close #2312 Enhancement: Apps page pricing re-desging
This commit is contained in:
Cüneyt Şentürk
@ -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>
|
||||
@ -38,7 +58,7 @@
|
||||
|
||||
<small class="text-xs">
|
||||
@if ($module->total_review)
|
||||
({{ $module->total_review }})
|
||||
({{ $module->total_review }})
|
||||
@endif
|
||||
</small>
|
||||
</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>
|
||||
|
||||
@ -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 }}
|
||||
@else
|
||||
{{ $module->price }}
|
||||
@endif
|
||||
{!! $module->price_suffix !!}
|
||||
@if ($module->is_discount)
|
||||
<del class="text-danger">
|
||||
{!! $module->yearly_price !!}
|
||||
</del>
|
||||
|
||||
{!! $module->yearly_special_price !!}
|
||||
@else
|
||||
{!! $module->yearly_price !!}
|
||||
@endif
|
||||
@endif
|
||||
</strong>
|
||||
</small>
|
||||
|
||||
@ -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
51
resources/views/partials/modules/show/buttons.blade.php
Normal 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
73
resources/views/partials/modules/show/price.blade.php
Normal 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
|
||||
Reference in New Issue
Block a user