481 lines
31 KiB
PHP
481 lines
31 KiB
PHP
<?php use Illuminate\Support\Number; ?>
|
|
<div class="space-y-6" x-data="{ msgs: @js(['purchased' => __('billing.purchased')]) }">
|
|
@php $loc = app()->getLocale(); $eur = fn ($c) => Number::currency($c / 100, in: 'EUR', locale: $loc); @endphp
|
|
|
|
<div class="animate-rise">
|
|
<h1 class="text-2xl font-bold tracking-tight text-ink">{{ __('billing.title') }}</h1>
|
|
<p class="mt-1 text-sm text-muted">{{ __('billing.subtitle') }}</p>
|
|
</div>
|
|
|
|
{{-- Nothing booked. Said plainly instead of falling back to the first plan
|
|
and rendering it as "AKTUELLES PAKET — Status Aktiv": that is a contract
|
|
nobody entered into, on the page a customer opens to find out what they
|
|
pay, and the dashboard said the opposite about the same account.
|
|
|
|
Everything below needs a contract to mean anything — an "Upgrade" from
|
|
nothing is a purchase, and that has its own page. --}}
|
|
@if (! $hasContract)
|
|
<div class="rounded-lg border border-line bg-surface p-8 shadow-xs animate-rise [animation-delay:60ms]">
|
|
<h2 class="text-lg font-semibold text-ink">{{ __('billing.none_title') }}</h2>
|
|
<p class="mt-2 max-w-[70ch] text-sm leading-relaxed text-muted">{{ __('billing.none_body') }}</p>
|
|
|
|
<div class="mt-6 flex flex-wrap gap-2.5">
|
|
<x-ui.button variant="ink" :href="route('order')" wire:navigate>{{ __('billing.none_cta') }}</x-ui.button>
|
|
<x-ui.button variant="secondary" :href="route('support')" wire:navigate>{{ __('dashboard.nav.support') }}</x-ui.button>
|
|
</div>
|
|
</div>
|
|
@else
|
|
|
|
{{-- Current plan --}}
|
|
<div class="overflow-hidden rounded-lg border border-line bg-surface shadow-xs animate-rise [animation-delay:60ms]">
|
|
<div class="flex flex-wrap items-center justify-between gap-4 border-b border-line bg-surface-2 px-6 py-4">
|
|
<div>
|
|
<p class="text-xs font-semibold uppercase tracking-wider text-muted">{{ __('billing.current_plan') }}</p>
|
|
<p class="mt-0.5 text-lg font-semibold text-ink">{{ __('billing.plan.'.$currentKey) }}</p>
|
|
</div>
|
|
<div class="text-right">
|
|
@if ($current['granted'] ?? false)
|
|
{{-- Not "free", not struck through — just the service. A
|
|
later conversion to paid must not read as a negotiation. --}}
|
|
<p class="text-xs text-muted">{{ __('billing.granted_plan') }}</p>
|
|
@else
|
|
<p class="text-2xl font-semibold text-ink">{{ $eur($current['price_cents'] ?? 0) }}</p>
|
|
<p class="text-xs text-muted">{{ __('billing.net_per_month') }}</p>
|
|
{{-- A yearly contract is charged once a year; the figure
|
|
above is per month whatever the term, so without this
|
|
line a yearly customer read a number that never appears
|
|
on a statement. --}}
|
|
@if (($current['term'] ?? null) === App\Models\Subscription::TERM_YEARLY)
|
|
<p class="mt-1 text-xs font-medium text-body">
|
|
{{ __('billing.term_yearly_note', ['total' => $eur($current['term_total_cents'] ?? 0)]) }}
|
|
@if ($current['renews_at'] ?? null)
|
|
{{-- R19: stored in UTC, read on the wall clock. --}}
|
|
· {{ __('billing.renews_at', ['date' => $current['renews_at']->local()->isoFormat('D. MMM YYYY')]) }}
|
|
@endif
|
|
</p>
|
|
@endif
|
|
@if ($totalMonthlyCents !== null && $totalMonthlyCents !== ($current['price_cents'] ?? 0))
|
|
{{-- The plan alone is not the bill once modules are booked,
|
|
and every part of it is frozen at what was agreed. --}}
|
|
<p class="mt-1 text-sm font-medium text-body">
|
|
{{ __('billing.total_with_addons', ['total' => $eur($totalMonthlyCents)]) }}
|
|
</p>
|
|
@endif
|
|
@endif
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-px bg-line sm:grid-cols-4">
|
|
{{-- Storage is the figure Nextcloud actually enforces: the package
|
|
plus every booked pack. Printing the package alone told a
|
|
customer with two packs that they had 500 GB while their own
|
|
cloud was giving them 700. --}}
|
|
@foreach ([
|
|
['billing.storage', ($current['storage_gb'] ?? 0).' GB'],
|
|
['billing.seats', $current['seats'] ?? '—'],
|
|
['billing.performance', __('billing.perf.'.($current['performance'] ?? 'standard'))],
|
|
['billing.status', __('billing.status_active')],
|
|
] as [$label, $value])
|
|
<div class="bg-surface px-6 py-4">
|
|
<p class="text-xs text-muted">{{ __($label) }}</p>
|
|
<p class="mt-0.5 font-semibold text-ink">{{ $value }}</p>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
|
|
{{-- Where the storage above comes from, once it is no longer only the
|
|
package. A customer who books packs should be able to see them in
|
|
the figure they are enforced in, not only as a line on the bill. --}}
|
|
@if (($current['storage_packs'] ?? 0) > 0)
|
|
<div class="flex items-start gap-2 border-t border-line px-6 py-3">
|
|
<x-ui.icon name="database" class="mt-0.5 size-4 shrink-0 text-muted" />
|
|
<p class="text-sm text-muted">
|
|
{{ __('billing.storage_includes_packs', [
|
|
'count' => $current['storage_packs'],
|
|
'gb' => $current['storage_pack_gb'] ?? 0,
|
|
]) }}
|
|
</p>
|
|
</div>
|
|
@endif
|
|
|
|
{{-- A change already booked, on the card that states what they have. A
|
|
contract quietly due to shrink at the end of the term is not
|
|
something a customer should have to remember on their own — and it
|
|
is announced here rather than only in the cart, because the cart
|
|
entry goes the moment it is paid for and the booking does not. --}}
|
|
@if ($pendingChange)
|
|
<div class="flex items-start gap-2 border-t border-line bg-warning-bg px-6 py-3">
|
|
<x-ui.icon name="calendar" class="mt-0.5 size-4 shrink-0 text-warning" />
|
|
<p class="text-sm text-body">
|
|
{{ __('billing.pending_change_note', ['plan' => $pendingChange['plan'], 'date' => $pendingChange['at']]) }}
|
|
</p>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
@endif
|
|
|
|
{{-- Cart: "5 purchases pending" told nobody what they had ordered, and
|
|
offered no way to change their mind.
|
|
|
|
Outside the contract gate on purpose: a customer can have something in
|
|
their cart before they have any contract at all, and hiding it there
|
|
would hide the thing they came to pay for. --}}
|
|
@if ($pending->isNotEmpty())
|
|
<div class="overflow-hidden rounded-lg border border-info-border bg-surface shadow-xs animate-rise">
|
|
<div class="flex items-center gap-2 border-b border-line bg-info-bg px-5 py-3">
|
|
<x-ui.icon name="receipt" class="size-4 shrink-0 text-info" />
|
|
<h2 class="text-sm font-semibold text-ink">{{ __('billing.cart.title') }}</h2>
|
|
<span class="ml-auto text-xs text-muted">{{ __('billing.cart.subtitle') }}</span>
|
|
</div>
|
|
|
|
<ul class="divide-y divide-line">
|
|
@foreach ($pending as $order)
|
|
<li wire:key="order-{{ $order->uuid }}" class="flex flex-wrap items-center gap-3 px-5 py-3">
|
|
<div class="min-w-0 flex-1">
|
|
<p class="text-sm font-medium text-ink">{{ $order->label() }}</p>
|
|
<p class="mt-0.5 text-xs text-muted">
|
|
{{ __('billing.cart.added', ['when' => $order->created_at->local()->isoFormat('LL')]) }}
|
|
</p>
|
|
</div>
|
|
<div class="text-right">
|
|
<p class="font-mono text-sm text-body">{{ $eur($order->amount_cents) }}</p>
|
|
<p class="text-xs text-muted">
|
|
{{ __('billing.cart.net') }} ·
|
|
{{ $order->isRecurring() ? __('billing.cart.per_month') : __('billing.cart.once') }}
|
|
</p>
|
|
</div>
|
|
<button type="button" aria-label="{{ __('billing.cart.remove') }}" title="{{ __('billing.cart.remove') }}"
|
|
x-on:click="$dispatch('openModal', { component: 'confirm-remove-order', arguments: { uuid: '{{ $order->uuid }}' } })"
|
|
class="grid size-8 place-items-center rounded-md border border-line text-muted transition hover:border-danger hover:text-danger">
|
|
<x-ui.icon name="trash-2" class="size-4" />
|
|
</button>
|
|
</li>
|
|
@endforeach
|
|
</ul>
|
|
|
|
@php
|
|
$net = $pending->sum('amount_cents');
|
|
$gross = $pending->sum(fn ($o) => $o->grossCents());
|
|
// Summed from the same per-order rounding the total uses: rounding
|
|
// after aggregating would let the two figures disagree by a cent.
|
|
$recurringGross = $pending->filter->isRecurring()->sum(fn ($o) => $o->grossCents());
|
|
@endphp
|
|
<div class="space-y-1.5 border-t border-line bg-surface-2 px-5 py-3.5 text-sm">
|
|
<div class="flex items-center justify-between text-muted">
|
|
<span>{{ __('billing.cart.subtotal_net') }}</span>
|
|
<span class="font-mono">{{ $eur($net) }}</span>
|
|
</div>
|
|
<div class="flex items-center justify-between text-muted">
|
|
<span>
|
|
{{ $tax->reverseCharge
|
|
? __('billing.cart.reverse_charge')
|
|
: __('billing.cart.vat', ['percent' => $tax->percentLabel()]) }}
|
|
</span>
|
|
<span class="font-mono">{{ $eur($gross - $net) }}</span>
|
|
</div>
|
|
<div class="flex items-center justify-between border-t border-line pt-1.5 font-semibold text-ink">
|
|
<span>{{ __('billing.cart.total_gross') }}</span>
|
|
<span class="font-mono">{{ $eur($gross) }}</span>
|
|
</div>
|
|
@if ($recurringGross > 0)
|
|
{{-- The number that actually matters every month, kept apart
|
|
from a one-off traffic top-up in the same cart. --}}
|
|
<p class="pt-1 text-xs text-muted">
|
|
{{ __('billing.cart.recurring_note', ['amount' => $eur($recurringGross)]) }}
|
|
</p>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
@if ($hasContract)
|
|
|
|
{{-- Upgrades --}}
|
|
@if (count($upgrades) > 0)
|
|
<div class="animate-rise [animation-delay:120ms]">
|
|
<h2 class="mb-3 font-semibold text-ink">{{ __('billing.upgrade_title') }}</h2>
|
|
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
|
@foreach ($upgrades as $key)
|
|
@php $p = $plans[$key]; @endphp
|
|
<div wire:key="upgrade-{{ $key }}" class="flex flex-col rounded-lg border border-line bg-surface p-5 shadow-xs transition hover:border-accent-border">
|
|
<div class="flex items-baseline justify-between">
|
|
<p class="font-semibold text-ink">{{ __('billing.plan.'.$key) }}</p>
|
|
<span class="rounded-pill bg-accent-subtle px-2 py-0.5 text-xs font-semibold text-accent-text">{{ __('billing.perf.'.($p['performance'] ?? 'standard')) }}</span>
|
|
</div>
|
|
<p class="mt-1 text-sm text-muted">{{ $p['quota_gb'] }} GB · {{ __('billing.seats_count', ['count' => $p['seats'] ?? 0]) }}</p>
|
|
<ul class="mt-3 space-y-1.5">
|
|
@foreach (array_slice($features[$key] ?? [], 0, 4) as $f)
|
|
<li class="flex items-center gap-2 text-sm text-body">
|
|
<x-ui.icon name="check" class="size-4 shrink-0 text-success-bright" />
|
|
{{ __('billing.feature.'.$f) }}
|
|
</li>
|
|
@endforeach
|
|
</ul>
|
|
<p class="mt-4 text-xl font-semibold text-ink">{{ $eur($p['price_cents']) }}<span class="text-sm font-normal text-muted"> / {{ __('billing.month_short') }}</span></p>
|
|
<p class="text-xs text-muted">
|
|
{{ $tax->reverseCharge
|
|
? __('billing.net_reverse_charge')
|
|
: __('billing.net_hint', ['percent' => $tax->percentLabel()]) }}
|
|
</p>
|
|
<x-ui.button variant="primary" size="sm" class="mt-4 w-full" wire:click="purchase('upgrade', '{{ $key }}')" wire:target="purchase('upgrade', '{{ $key }}')" wire:loading.attr="disabled">
|
|
{{ __('billing.upgrade_cta') }}
|
|
</x-ui.button>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
{{-- ── Downgrade ──────────────────────────────────────────────────────
|
|
Smaller plans are listed even when they cannot be taken, with the
|
|
reason in the customer's own numbers. A plan that quietly disappears
|
|
reads as "no longer offered"; a greyed-out button that does not say
|
|
what is in the way is the thing people ring about. --}}
|
|
@if ($downgrades !== [])
|
|
<section class="animate-rise">
|
|
<h2 class="text-md font-semibold text-ink">{{ __('billing.downgrade') }}</h2>
|
|
<p class="mt-1 text-sm text-muted">{{ __('billing.downgrade_hint') }}</p>
|
|
|
|
<div class="mt-4 grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
|
|
@foreach ($downgrades as $key => $plan)
|
|
<article class="flex flex-col rounded-lg border border-line bg-surface p-5 shadow-xs">
|
|
<div class="flex items-start justify-between gap-3">
|
|
<div class="min-w-0">
|
|
<h3 class="text-md font-semibold text-ink">{{ $plan['name'] ?? $key }}</h3>
|
|
<p class="mt-1 text-xs text-muted">
|
|
{{ $plan['quota_gb'] ?? 0 }} GB · {{ __('billing.seats_count', ['count' => $plan['seats'] ?? 0]) }}
|
|
</p>
|
|
</div>
|
|
<p class="shrink-0 text-right font-mono text-lg font-semibold text-ink">
|
|
{{ $eur($plan['price_cents'] ?? 0) }}
|
|
<span class="mt-0.5 block text-xs font-normal text-muted">{{ __('billing.per_month') }}</span>
|
|
</p>
|
|
</div>
|
|
|
|
{{-- What the move would take away, above the button that
|
|
makes it — being told afterwards that an own domain
|
|
has been switched off is the same failure as a
|
|
greyed-out button with no reason on it. --}}
|
|
@if ($plan['check']->consequences !== [])
|
|
<div class="mt-5 rounded border border-accent-border bg-accent-subtle p-3">
|
|
<p class="flex items-center gap-1.5 text-xs font-semibold text-accent-text">
|
|
<x-ui.icon name="alert-triangle" class="size-4" />{{ __('billing.downgrade_consequence_title') }}
|
|
</p>
|
|
<ul class="mt-2 space-y-1.5">
|
|
@foreach ($plan['check']->consequences as $consequence)
|
|
<li class="text-xs leading-relaxed text-ink">
|
|
{{ __('billing.downgrade_consequence.'.$consequence['key'], $consequence['replace']) }}
|
|
</li>
|
|
@endforeach
|
|
</ul>
|
|
</div>
|
|
@endif
|
|
|
|
@if ($plan['check']->allowed)
|
|
<x-ui.button variant="secondary" class="mt-5 w-full"
|
|
wire:click="purchase('downgrade', '{{ $key }}')"
|
|
wire:loading.attr="disabled" wire:target="purchase('downgrade', '{{ $key }}')">
|
|
{{ __('billing.downgrade_to', ['plan' => $plan['name'] ?? $key]) }}
|
|
</x-ui.button>
|
|
@else
|
|
<div class="mt-5 rounded border border-warning-border bg-warning-bg p-3">
|
|
<p class="text-xs font-semibold text-warning">{{ __('billing.downgrade_blocked') }}</p>
|
|
<ul class="mt-2 space-y-1.5">
|
|
@foreach ($plan['check']->blockers as $blocker)
|
|
<li class="text-xs leading-relaxed text-ink">
|
|
{{ __('billing.downgrade_blocker.'.$blocker['key'], [
|
|
'current' => $blocker['current'],
|
|
'limit' => $blocker['limit'],
|
|
]) }}
|
|
</li>
|
|
@endforeach
|
|
</ul>
|
|
|
|
{{-- "No" with a way out of it. A customer blocked
|
|
by their own data has exactly two: buy the
|
|
room, or delete the files and have us look
|
|
again — and being told to wait for tonight's
|
|
reading after clearing 40 GB is the same
|
|
dead end as a greyed-out button. --}}
|
|
@if ($remedy = $plan['check']->storageRemedy)
|
|
<div class="mt-3 border-t border-warning-border pt-3">
|
|
<p class="text-xs leading-relaxed text-ink">
|
|
{{ __('billing.downgrade_escape.intro', [
|
|
'used' => $remedy['used'],
|
|
'limit' => $remedy['limit'],
|
|
'over' => $remedy['over'],
|
|
]) }}
|
|
</p>
|
|
<div class="mt-3 flex flex-wrap gap-2">
|
|
@if ($remedy['packs'] > 0)
|
|
<x-ui.button variant="primary" size="sm"
|
|
x-on:click="$dispatch('openModal', { component: 'confirm-book-storage', arguments: { packs: {{ $remedy['packs'] }} } })">
|
|
<x-ui.icon name="database" class="size-4" />{{ __('billing.downgrade_escape.book', ['count' => $remedy['packs'], 'gb' => $remedy['packs'] * $remedy['pack_gb']]) }}
|
|
</x-ui.button>
|
|
@endif
|
|
<x-ui.button variant="secondary" size="sm"
|
|
wire:click="remeasureStorage" wire:target="remeasureStorage" wire:loading.attr="disabled">
|
|
<x-ui.icon name="refresh" class="size-4" />{{ __('billing.downgrade_escape.remeasure') }}
|
|
</x-ui.button>
|
|
</div>
|
|
@if ($storageMeasuredAt)
|
|
<p class="mt-2 text-xs text-muted">
|
|
{{ __('billing.downgrade_escape.measured_at', ['when' => $storageMeasuredAt->local()->isoFormat('LLL')]) }}
|
|
</p>
|
|
@endif
|
|
</div>
|
|
@endif
|
|
</div>
|
|
@endif
|
|
</article>
|
|
@endforeach
|
|
</div>
|
|
</section>
|
|
@endif
|
|
|
|
{{-- Extra storage + Add-ons --}}
|
|
<div class="grid grid-cols-1 gap-4 lg:grid-cols-3 xl:grid-cols-4 animate-rise [animation-delay:180ms]">
|
|
{{-- Storage --}}
|
|
<div class="flex flex-col rounded-lg border border-accent-border bg-accent-subtle p-5">
|
|
<div class="flex items-center gap-2">
|
|
<x-ui.icon name="database" class="size-5 text-accent-active" />
|
|
<p class="font-semibold text-ink">{{ __('billing.storage_title') }}</p>
|
|
</div>
|
|
<p class="mt-2 text-sm text-body">{{ __('billing.storage_body', ['gb' => $storage['gb'], 'price' => $eur($storage['price_cents'])]) }}</p>
|
|
<p class="mt-1 text-xs text-muted">{{ __('billing.net_per_month') }}</p>
|
|
<x-ui.button variant="primary" size="sm" class="mt-4 w-full" wire:click="purchase('storage')" wire:target="purchase('storage')" wire:loading.attr="disabled">
|
|
{{ __('billing.storage_cta', ['gb' => $storage['gb']]) }}
|
|
</x-ui.button>
|
|
</div>
|
|
|
|
{{-- Traffic --}}
|
|
<div class="flex flex-col rounded-lg border {{ $trafficMeter && $trafficMeter->state() !== 'ok' ? 'border-warning-border bg-warning-bg' : 'border-line bg-surface shadow-xs' }} p-5">
|
|
<div class="flex items-center gap-2">
|
|
<x-ui.icon name="activity" class="size-5 {{ $trafficMeter && $trafficMeter->state() !== 'ok' ? 'text-warning' : 'text-muted' }}" />
|
|
<p class="font-semibold text-ink">{{ __('billing.traffic_title') }}</p>
|
|
</div>
|
|
<p class="mt-2 text-sm text-body">{{ __('billing.traffic_body', ['gb' => $trafficAddon['gb'], 'price' => $eur($trafficAddon['price_cents'])]) }}</p>
|
|
<p class="mt-1 text-xs text-muted">{{ __('billing.net_once') }}</p>
|
|
@if ($trafficMeter)
|
|
<p class="mt-2 font-mono text-xs text-muted">
|
|
{{ __('billing.traffic_used', [
|
|
'used' => \App\Support\Bytes::human($trafficMeter->usedBytes),
|
|
'quota' => \App\Support\Bytes::human($trafficMeter->quotaBytes),
|
|
]) }}
|
|
</p>
|
|
@endif
|
|
<x-ui.button variant="{{ $trafficMeter && $trafficMeter->state() !== 'ok' ? 'primary' : 'secondary' }}" size="sm" class="mt-4 w-full"
|
|
wire:click="purchase('traffic')" wire:target="purchase('traffic')" wire:loading.attr="disabled">
|
|
{{ __('billing.traffic_cta', ['gb' => $trafficAddon['gb']]) }}
|
|
</x-ui.button>
|
|
</div>
|
|
|
|
{{-- Add-ons --}}
|
|
@foreach ($addons as $key => $addon)
|
|
<div wire:key="addon-{{ $key }}" class="flex flex-col rounded-lg border border-line bg-surface p-5 shadow-xs">
|
|
<div class="flex items-center gap-2">
|
|
<x-ui.icon name="box" class="size-5 text-muted" />
|
|
<p class="font-semibold text-ink">{{ __('billing.addon.'.$key.'.name') }}</p>
|
|
</div>
|
|
<p class="mt-2 flex-1 text-sm text-muted">{{ __('billing.addon.'.$key.'.desc') }}</p>
|
|
@if ($addon['included'] ?? false)
|
|
{{-- Part of the package they already pay for. Neither a
|
|
price nor a button belongs here: both would be selling
|
|
a customer something they have. --}}
|
|
<p class="mt-3 inline-flex items-center gap-1.5 rounded-pill border border-success-border bg-success-bg px-2.5 py-0.5 text-xs font-medium text-success">
|
|
<x-ui.icon name="check" class="size-4" />{{ __('billing.addon_included') }}
|
|
</p>
|
|
@elseif ($addon['granted'] ?? false)
|
|
{{-- Not "free", not struck through — just the service. --}}
|
|
<p class="mt-3 text-sm font-medium text-muted">{{ __('billing.granted_plan') }}</p>
|
|
@else
|
|
{{-- What they actually pay for it once booked (packs and all),
|
|
and today's price while it is still a sale to be made. --}}
|
|
<p class="mt-3 text-lg font-semibold text-ink">
|
|
{{ $eur($addon['booked'] ? $addon['monthly_cents'] : (int) $addon['price_cents']) }}<span class="text-sm font-normal text-muted"> / {{ __('billing.month_short') }}</span>
|
|
@if ($addon['booked'] && $addon['quantity'] > 1)
|
|
<span class="text-sm font-normal text-muted">· {{ __('billing.addon_packs', ['count' => $addon['quantity']]) }}</span>
|
|
@endif
|
|
</p>
|
|
<p class="text-xs text-muted">
|
|
{{ $tax->reverseCharge
|
|
? __('billing.net_reverse_charge')
|
|
: __('billing.net_hint', ['percent' => $tax->percentLabel()]) }}
|
|
</p>
|
|
@endif
|
|
@if ($addon['booked'] && ($addon['cancelling'] ?? false))
|
|
{{-- Cancelled and still running. The customer has to be able
|
|
to see both halves of that: the date it actually stops,
|
|
and that they can still take it back until then. What is
|
|
NOT offered is a second cancellation — the card that
|
|
says "gekündigt" must not also say "kündigen". --}}
|
|
<p class="mt-3 inline-flex items-center gap-1.5 rounded-pill border border-warning-border bg-warning-bg px-2.5 py-0.5 text-xs font-medium text-warning">
|
|
<x-ui.icon name="calendar" class="size-4" />
|
|
{{ __('billing.addon_runs_until', ['date' => $addon['cancels_at']?->local()->isoFormat('LL')]) }}
|
|
</p>
|
|
@elseif ($addon['booked'])
|
|
{{-- Already theirs, at the price they booked it for — which
|
|
is why this card does not show today's. --}}
|
|
<p class="mt-3 inline-flex items-center gap-1.5 rounded-pill border border-success-border bg-success-bg px-2.5 py-0.5 text-xs font-medium text-success">
|
|
<span class="size-1.5 rounded-pill bg-current" aria-hidden="true"></span>
|
|
{{ __('billing.addon_booked') }}
|
|
</p>
|
|
@elseif ($addon['in_cart'] ?? false)
|
|
{{-- Placed and waiting to be paid for. Saying so is what
|
|
stops the second click: an unchanged card invites one,
|
|
and a second order for the same module is a second
|
|
charge for one thing. --}}
|
|
<p class="mt-3 inline-flex items-center gap-1.5 rounded-pill border border-info-border bg-info-bg px-2.5 py-0.5 text-xs font-medium text-info">
|
|
<x-ui.icon name="receipt" class="size-4" />
|
|
{{ __('billing.addon_in_cart_badge') }}
|
|
</p>
|
|
@endif
|
|
|
|
{{-- The button appears only where the purchase would actually
|
|
go through. A module the package includes has nothing to
|
|
sell; one already booked is a second charge for the same
|
|
thing, unless it is sold in packs, where a second one is
|
|
genuinely a second helping (see `sold_as` in
|
|
config/provisioning.php); and one already in the cart is
|
|
that second charge one step earlier. An offer that would be
|
|
refused is worse than no offer. --}}
|
|
@if (! ($addon['included'] ?? false)
|
|
&& ! ($addon['in_cart'] ?? false)
|
|
&& ! ($addon['booked'] && ($addon['entitlement'] ?? true)))
|
|
<x-ui.button variant="secondary" size="sm" class="mt-3 w-full" wire:click="purchase('addon', '{{ $key }}')" wire:target="purchase('addon', '{{ $key }}')" wire:loading.attr="disabled">
|
|
{{ __('billing.addon_cta') }}
|
|
</x-ui.button>
|
|
@endif
|
|
|
|
{{-- The way out, which the page did not have at all. The owner's
|
|
rule is that a module can be cancelled monthly, and until
|
|
now the only way to exercise it was to write to us.
|
|
|
|
Not offered on a granted module: nothing is being charged
|
|
for it, so there is no recurring cost to escape, and letting
|
|
a customer "cancel" a gift would take away something they
|
|
were given rather than stopping a payment. --}}
|
|
@if ($addon['booked'] && ! ($addon['granted'] ?? false))
|
|
@if ($addon['cancelling'] ?? false)
|
|
<button type="button" wire:click="resumeAddon('{{ $key }}')"
|
|
wire:target="resumeAddon('{{ $key }}')" wire:loading.attr="disabled"
|
|
class="mt-3 inline-flex w-full items-center justify-center gap-1.5 text-xs font-semibold text-accent-text hover:underline">
|
|
<x-ui.icon name="rotate-ccw" class="size-4" />
|
|
{{ __('billing.addon_resume_cta') }}
|
|
</button>
|
|
@else
|
|
<button type="button"
|
|
x-on:click="$dispatch('openModal', { component: 'confirm-cancel-addon', arguments: { key: '{{ $key }}' } })"
|
|
class="mt-3 inline-flex w-full items-center justify-center text-xs font-semibold text-muted hover:text-danger hover:underline">
|
|
{{ __('billing.addon_cancel_cta') }}
|
|
</button>
|
|
@endif
|
|
@endif
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
|
|
@endif
|
|
|
|
<p class="text-xs text-muted">{{ __('billing.mock_note') }}</p>
|
|
</div>
|