shihaam/akaunting
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

close #2312 Enhancement: Apps page pricing re-desging

Browse Source
This commit is contained in:
Cüneyt Şentürk 2021-11-17 12:34:09 +03:00
parent c045980862
commit 26858c92df
8 changed files with 220 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/img/modules/save30arrow3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

12
resources/lang/en-GB/modules.php
View File

@ -9,13 +9,23 @@ return [
'new' => 'New',
'top_free' => 'Top Free',
'free' => 'FREE',
'monthly' => 'Monthly',
'yearly' => 'Yearly',
'yearly_pricing' => 'Yearly Pricing',
'monthly_price' => 'from :price',
'per_month' => 'per month',
'billed_yearly' => 'Billed Yearly',
'billed_monthly' => 'Billed Monthly',
'save_year' => 'You save <strong>:price</strong> a year!',
'if_paid_year' => 'Or <strong>:price/mo</strong> if paid yearly',
'information_monthly' => 'This option is valid only for <strong>Cloud Service</strong>',
'install' => 'Install',
'buy_now' => 'Buy Now',
'get_api_key' => '<a href=":url" target="_blank">Click here</a> to get your API key.',
'no_apps' => 'There are no apps in this category, yet.',
'become_developer' => 'Are you a developer? <a href=":url" target="_blank">Here</a> you can learn how to create an app and start selling today!',
'recommended_apps' => 'Recommended Apps',
'can_not_install' => 'You can not install :app app. </br> Beacuse monthly subscription just support <a href="https://akaunting.com/start" target="_blank">cloud</a>',
'can_not_install' => 'Monthly subscriptions are available only on Cloud service. <a href="https://akaunting.com/upgrade-to-yearly" target="_blank">Learn more.</a>',
'about' => 'About',

91
resources/views/modules/item/show.blade.php
View File

@ -15,7 +15,7 @@
<div class="row">
<div class="col-xs-6 col-sm-6">
<div class="float-left">
<h3>{{ $module->name }}</h3>
<h3>{!! $module->name !!}</h3>
</div>
</div>
@ -39,6 +39,7 @@
{{ trans('general.description') }}
</a>
</li>
@if ($module->installation)
<li class="nav-item">
<a class="nav-link mb-sm-2 mb-md-0" href="#installation" data-toggle="tab" aria-selected="false">
@ -46,6 +47,7 @@
</a>
</li>
@endif
@if ($module->faq)
<li class="nav-item">
<a class="nav-link mb-sm-2 mb-md-0" href="#faq" data-toggle="tab" aria-selected="false">
@ -53,6 +55,7 @@
</a>
</li>
@endif
@if ($module->changelog)
<li class="nav-item">
<a class="nav-link mb-sm-2 mb-md-0" href="#changelog" data-toggle="tab" aria-selected="false">
@ -60,8 +63,9 @@
</a>
</li>
@endif
<li class="nav-item">
<a class="nav-link mb-sm-2 mb-md-0" href="#review" data-toggle="tab" aria-selected="false">
<a class="nav-link mb-sm-2 mb-md-0" href="#review" data-toggle="tab" id="tab-{{ $module->slug }}-review" aria-selected="false">
{{ trans('modules.tab.reviews') }} @if ($module->total_review) ({{ $module->total_review }}) @endif
</a>
</li>
@ -75,7 +79,7 @@
{!! $module->description !!}
@if($module->screenshots || $module->video)
<akaunting-carousel :name="'{{ $module->name }}'" :height="'430px'" arrow="always"
<akaunting-carousel name="{!! $module->name !!}" height="430px" arrow="always"
@if($module->video)
@php
if (strpos($module->video->link, '=') !== false) {
@ -259,71 +263,15 @@
<div class="col-md-4">
<h3>{{ trans_choice('general.actions', 1) }}</h3>
@include('partials.modules.show.actions_header')
<div class="card">
<div class="card-body">
<div class="text-center">
<strong>
<div class="text-xl">
@if ($module->price == '0.0000')
{{ trans('modules.free') }}
@else
{!! $module->price_prefix !!}
@if (isset($module->special_price))
<del class="text-danger">{{ $module->price }}</del>
{{ $module->special_price }}
@else
{{ $module->price }}
@endif
{!! $module->price_suffix !!}
@endif
</div>
</strong>
</div>
@include('partials.modules.show.price')
</div>
<div class="card-footer">
@if ($installed)
@can('delete-modules-item')
<a href="{{ route('apps.app.uninstall', $module->slug) }}" class="btn btn-block btn-danger">{{ trans('modules.button.uninstall') }}</a>
@endcan
@can('update-modules-item')
@if ($enable)
<a href="{{ route('apps.app.disable', $module->slug) }}" class="btn btn-block btn-warning">{{ trans('modules.button.disable') }}</a>
@else
<a href="{{ route('apps.app.enable', $module->slug) }}" class="btn btn-block btn-success">{{ trans('modules.button.enable') }}</a>
@endif
@endcan
@else
@can('create-modules-item')
@if ($module->install)
@if (!empty($module->isPurchase) && (!empty($module->purchase_type) && $module->purchase_type == 'monthly'))
<el-tooltip placement="right">
<div slot="content">{!! trans('modules.can_not_install', ['app' => $module->name]) !!}</div>
<button type="button" class="btn btn-success btn-block btn-tooltip disabled">
<span class="text-disabled">{{ trans('modules.install') }}</span>
</button>
</el-tooltip>
@else
<button type="button" @click="onInstall('{{ $module->action_url }}', '{{ $module->slug }}', '{{ $module->name }}', '{{ $module->version }}')" class="btn btn-success btn-block" id="install-module">
{{ trans('modules.install') }}
</button>
@endif
@else
<a href="{{ $module->action_url }}" class="btn btn-success btn-block" target="_blank">
{{ trans('modules.buy_now') }}
</a>
@endif
@endcan
@endif
@if (!empty($module->purchase_desc))
<div class="text-center mt-3">
{!! $module->purchase_desc !!}
</div>
@endif
@include('partials.modules.show.buttons')
</div>
</div>
@ -338,24 +286,28 @@
<td class="col-7 text-right"><a href="{{ route('apps.vendors.show', $module->vendor->slug) }}">{{ $module->vendor_name }}</a></td>
</tr>
@endif
@if ($module->version)
<tr class="row">
<th class="col-5">{{ trans('footer.version') }}</th>
<td class="col-7 text-right">{{ $module->version }}</td>
</tr>
@endif
@if ($module->created_at)
<tr class="row">
<th class="col-5">{{ trans('modules.added') }}</th>
<td class="col-7 text-right long-texts">@date($module->created_at)</td>
</tr>
@endif
@if ($module->updated_at)
<tr class="row">
<th class="col-5">{{ trans('modules.updated') }}</th>
<td class="col-7 text-right">{{ Date::parse($module->updated_at)->diffForHumans() }}</td>
</tr>
@endif
@if ($module->categories)
<tr class="row">
<th class="col-5">{{ trans_choice('general.categories', (count($module->categories) > 1) ? 2 : 1) }}</th>
@ -366,6 +318,7 @@
</td>
</tr>
@endif
<tr class="row">
<th class="col-5">{{ trans('modules.documentation') }}</th>
@if ($module->documentation)
@ -373,7 +326,7 @@
<a href="{{ route('apps.docs.show', $module->slug) }}">{{ trans('modules.view') }}</a>
</td>
@else
<th class="col-7 text-right">{{ trans('general.na') }}</th>
<td class="col-7 text-right">{{ trans('general.na') }}</td>
@endif
</tr>
</tbody>
@ -411,6 +364,16 @@
@push('scripts_start')
<script type="text/javascript">
var app_slug = "{{ $module->slug }}";
$(document).on("click", "#app-pricing .nav-link", function() {
$('#button-monthly').removeClass('d-none');
$('#button-yearly').addClass('d-none');
if ($(this).attr('href') == '#yearly') {
$('#button-yearly').removeClass('d-none');
$('#button-monthly').addClass('d-none');
}
});
</script>
<script src="{{ asset('public/js/modules/item.js?v=' . version('short')) }}"></script>

35
resources/views/partials/modules/item.blade.php
View File

@ -2,9 +2,27 @@
<div class="card">
<div class="card-header py-2">
<h4 class="ml--3 mb-0 float-left">
<a href="{{ route('apps.app.show', $module->slug) }}">{{ $module->name }}</a>
<a href="{{ route('apps.app.show', $module->slug) }}">{!! $module->name !!}</a>
</h4>
@if (!empty($module->subscription_type))
<span class="mr--3 float-right">
@php $subscription_color = 'bg-info'; @endphp
@if ($module->subscription_type == 'monthly')
@php $subscription_color = 'bg-warning'; @endphp
@endif
<span class="badge {{ $subscription_color }} text-white">
@if ($module->subscription_type == 'yearly')
{{ trans('modules.yearly') }}
@else
{{ trans('modules.monthly') }}
@endif
</span>
</span>
@endif
@if (isset($installed[$module->slug]))
@php $color = 'bg-green'; @endphp
@ -12,8 +30,10 @@
@php $color = 'bg-warning'; @endphp
@endif
<span class="mr--3 float-right">
<span class="badge {{ $color }} text-white">{{ trans('modules.badge.installed') }}</span>
<span class="{{ !empty($module->subscription_type) ? 'mr-2' : 'mr--3' }} float-right">
<span class="badge {{ $color }} text-white">
{{ trans('modules.badge.installed') }}
</span>
</span>
@endif
</div>
@ -49,14 +69,7 @@
@if ($module->price == '0.0000')
{{ trans('modules.free') }}
@else
{!! $module->price_prefix !!}
@if (isset($module->special_price))
<del class="text-danger">{{ $module->price }}</del>
{{ $module->special_price }}
@else
{{ $module->price }}
@endif
{!! $module->price_suffix !!}
{{ trans('modules.monthly_price', ['price' => $module->yearly_per_monthly_price]) }}
@endif
</strong>
</small>

15
resources/views/partials/modules/pre_sale.blade.php
View File

@ -2,7 +2,7 @@
<div class="card">
<div class="card-header py-2">
<h4 class="ml--3 mb-0 float-left">
<a href="{{ route('apps.app.show', $module->slug) }}">{{ $module->name }}</a>
<a href="{{ route('apps.app.show', $module->slug) }}">{!! $module->name !!}</a>
</h4>
<span class="mr--3 float-right">
@ -31,14 +31,15 @@
@if ($module->price == '0.0000')
{{ trans('modules.free') }}
@else
{!! $module->price_prefix !!}
@if (isset($module->special_price))
<del class="text-danger">{{ $module->price }}</del>
{{ $module->special_price }}
@if ($module->is_discount)
<del class="text-danger">
{!! $module->yearly_price !!}
</del>
{!! $module->yearly_special_price !!}
@else
{{ $module->price }}
{!! $module->yearly_price !!}
@endif
{!! $module->price_suffix !!}
@endif
</strong>
</small>

23
resources/views/partials/modules/show/actions_header.blade.php Normal file
View File

@ -0,0 +1,23 @@
@if ($module->price != '0.0000')
<span style="position: absolute; right: 120px; top: -15px;">
<img src="{{ asset('public/img/modules/save30arrow3.png') }}" alt="{{ trans('modules.yearly_pricing') }}"/>
</span>
@endif
@if ($module->price != '0.0000')
<div id="app-pricing" class="nav-wrapper pt-0">
<ul class="nav nav-pills nav-fill flex-column flex-md-row" role="tablist">
<li class="nav-item">
<a class="nav-link mb-sm-2 mb-md-0 active" id="tab-pricing-monthly" href="#monthly" data-toggle="tab" aria-selected="false">
{{ trans('modules.monthly') }}
</a>
</li>
<li class="nav-item">
<a class="nav-link mb-sm-2 mb-md-0" href="#yearly" id="tab-pricing-yearly" data-toggle="tab" aria-selected="false">
{{ trans('modules.yearly') }}
</a>
</li>
</ul>
</div>
@endif

51
resources/views/partials/modules/show/buttons.blade.php Normal file
View File

@ -0,0 +1,51 @@
@if ($installed)
@can('delete-modules-item')
<a href="{{ route('apps.app.uninstall', $module->slug) }}" class="btn btn-block btn-danger">
{{ trans('modules.button.uninstall') }}
</a>
@endcan
@can('update-modules-item')
@if ($enable)
<a href="{{ route('apps.app.disable', $module->slug) }}" class="btn btn-block btn-warning">
{{ trans('modules.button.disable') }}
</a>
@else
<a href="{{ route('apps.app.enable', $module->slug) }}" class="btn btn-block btn-success">
{{ trans('modules.button.enable') }}
</a>
@endif
@endcan
@else
@can('create-modules-item')
@if ($module->install)
@if (!empty($module->isPurchase) && (!empty($module->purchase_type) && $module->purchase_type == 'monthly'))
<el-tooltip placement="right">
<div slot="content">{!! trans('modules.can_not_install') !!}</div>
<button type="button" class="btn btn-success btn-block btn-tooltip disabled">
<span class="text-disabled">{{ trans('modules.install') }}</span>
</button>
</el-tooltip>
@else
<button type="button"
id="install-module"
class="btn btn-success btn-block"
@click="onInstall('{{ $module->action_url }}', '{{ $module->slug }}', '{{ $module->name }}', '{{ $module->version }}')"
>
{{ trans('modules.install') }}
</button>
@endif
@else
<a href="{{ $module->action_url }}" class="btn btn-success btn-block" target="_blank">
{{ trans('modules.buy_now') }}
</a>
@endif
@endcan
@endif
@if (!empty($module->purchase_desc))
<div class="text-center mt-3 d-none">
{!! $module->purchase_desc !!}
</div>
@endif

73
resources/views/partials/modules/show/price.blade.php Normal file
View File

@ -0,0 +1,73 @@
@if ($module->price != '0.0000')
<div class="tab-content">
<div class="tab-pane fade" id="yearly">
<div class="text-center">
<strong>
<div class="text-xl">
@if ($module->price == '0.0000')
{{ trans('modules.free') }}
@else
{!! $module->yearly_per_monthly_price !!} <span class="small">{{ trans('modules.per_month') }}</span>
@endif
</div>
</strong>
</div>
<div class="text-center text-sm mt-3 mb--2" onclick="document.getElementById('tab-pricing-monthly').click();">
<span style="cursor: pointer;">
{{ trans('modules.billed_yearly') }}
</span>
</div>
<div class="text-center text-sm mt-3 mb--2">
<span style="font-size: 12px;">
{!! trans('modules.save_year', ['price' => '$' . $module->raw_monthly_price * 4]) !!}
</span>
</div>
<div class="text-center text-sm mt-3 mb--2">
<span style="height: 18px;display: block;"></span>
</div>
</div>
<div class="tab-pane fade show active" id="monthly">
<div class="text-center">
<strong>
<div class="text-xl">
@if ($module->price == '0.0000')
{{ trans('modules.free') }}
@else
{!! $module->monthly_price !!} <span class="small">{{ trans('modules.per_month') }}</span>
@endif
</div>
</strong>
</div>
<div class="text-center text-sm mt-3 mb--2" onclick="document.getElementById('tab-pricing-yearly').click();">
<span style="cursor: pointer;">
{{ trans('modules.billed_monthly') }}
</span>
</div>
<div class="text-center text-sm mt-3 mb--2">
<span style="font-size: 12px;">
{!! trans('modules.if_paid_year', ['price' => $module->yearly_per_monthly_price]) !!}
</span>
</div>
<div class="text-center text-sm mt-3 mb--2">
<span style="font-size: 12px;">
<span class="text-danger">*</span> {!! trans('modules.information_monthly') !!}
</span>
</div>
</div>
</div>
@else
<div class="text-center">
<strong>
<div class="text-xl">
{{ trans('modules.free') }}
</div>
</strong>
</div>
@endif