92 lines
4.9 KiB
PHP
92 lines
4.9 KiB
PHP
<div class="mx-auto max-w-[1120px] space-y-6">
|
|
<div class="animate-rise">
|
|
<h1 class="text-2xl font-bold tracking-tight text-ink">{{ __('order.title') }}</h1>
|
|
<p class="mt-1 max-w-[70ch] text-sm text-muted">{{ __('order.subtitle') }}</p>
|
|
</div>
|
|
|
|
@if ($contract)
|
|
{{-- Not an error and not a dead end: they have a contract, and the way
|
|
to a bigger package is a plan change, which prorates and leaves
|
|
their data where it is. A second checkout would build a second,
|
|
empty cloud and bill for both. --}}
|
|
<x-ui.alert variant="info">
|
|
{{ __('order.already_customer') }}
|
|
<a href="{{ route('billing') }}" class="font-semibold underline">{{ __('order.to_billing') }}</a>
|
|
</x-ui.alert>
|
|
@elseif ($plans === [])
|
|
<x-ui.alert variant="warning">{{ __('order.no_catalogue') }}</x-ui.alert>
|
|
@else
|
|
@error('plan')<x-ui.alert variant="error">{{ $message }}</x-ui.alert>@enderror
|
|
|
|
<div class="grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
|
|
@foreach ($plans as $plan)
|
|
<div @class([
|
|
'flex flex-col rounded-lg border bg-surface p-6 shadow-xs animate-rise',
|
|
'border-ink shadow-md' => $plan['recommended'],
|
|
'border-line' => ! $plan['recommended'],
|
|
])>
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
<h2 class="font-semibold text-ink">{{ $plan['name'] }}</h2>
|
|
@if ($plan['recommended'])
|
|
<span class="rounded-pill bg-accent-active px-2 py-0.5 text-[10px] font-medium uppercase tracking-wider text-on-accent">{{ __('order.recommended') }}</span>
|
|
@endif
|
|
</div>
|
|
@if ($plan['audience'])
|
|
<p class="mt-1 text-xs text-muted">{{ $plan['audience'] }}</p>
|
|
@endif
|
|
|
|
{{-- Gross, like the public sheet. A customer quoted 58,80 €
|
|
out there must not meet 49 € on the page with the
|
|
button on it. --}}
|
|
<p class="mt-5 flex items-baseline gap-1.5">
|
|
<span class="font-mono text-2xl font-semibold tabular-nums text-ink">{{ Number::currency($plan['gross'] / 100, in: $plan['currency'], locale: app()->getLocale()) }}</span>
|
|
<span class="text-xs text-muted">{{ __('order.per_month') }}</span>
|
|
</p>
|
|
<p class="mt-1 text-xs text-muted">
|
|
{{ __('order.incl_vat', ['rate' => $vat]) }} ·
|
|
{{ __('order.net') }} {{ Number::currency($plan['net'] / 100, in: $plan['currency'], locale: app()->getLocale()) }}
|
|
</p>
|
|
@if ($setup > 0)
|
|
<p class="mt-1 text-xs text-muted">
|
|
{{ __('order.setup', ['amount' => Number::currency($setup / 100, in: $plan['currency'], locale: app()->getLocale())]) }}
|
|
</p>
|
|
@endif
|
|
|
|
<x-ui.delivery :state="$plan['delivery']" class="mt-4" />
|
|
|
|
<dl class="mt-5 flex-1 space-y-2 border-t border-line pt-4 text-sm">
|
|
@foreach ([
|
|
__('order.storage') => $plan['quota_gb'].' GB',
|
|
__('order.traffic') => $plan['traffic_gb'].' GB',
|
|
__('order.seats') => $plan['seats'],
|
|
] as $term => $value)
|
|
<div class="flex justify-between gap-3">
|
|
<dt class="text-muted">{{ $term }}</dt>
|
|
<dd class="font-mono tabular-nums text-ink">{{ $value }}</dd>
|
|
</div>
|
|
@endforeach
|
|
</dl>
|
|
|
|
{{-- A plain form post, not a Livewire action: the response
|
|
is a redirect to another domain, and Livewire's
|
|
XHR-and-swap cannot leave the site. --}}
|
|
<form method="POST" action="{{ route('checkout.start') }}" class="mt-6">
|
|
@csrf
|
|
<input type="hidden" name="plan" value="{{ $plan['key'] }}" />
|
|
{{-- The wording is the legal one and not a nicety:
|
|
the button that concludes a paid contract has to
|
|
say that it costs money. --}}
|
|
<x-ui.button type="submit" :variant="$plan['recommended'] ? 'primary' : 'secondary'" class="w-full">
|
|
{{ __('order.buy') }}
|
|
</x-ui.button>
|
|
</form>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
|
|
<p class="max-w-[80ch] text-xs leading-relaxed text-muted">
|
|
{{ __('order.terms') }}
|
|
</p>
|
|
@endif
|
|
</div>
|