isaacclad
fc072e71be
Deploy Ladill Frontdesk / deploy (push) Successful in 1m16s
Surface hardware kiosk provision in plan benefits, upgrade banners, and settings copy so paid tiers clearly include supplied visitor kiosks.
235 lines
15 KiB
PHP
235 lines
15 KiB
PHP
<x-app-layout title="Plans" heading="Frontdesk plans">
|
||
@php
|
||
$proPerBranch = number_format($proPricePerBranchMinor / 100, 0);
|
||
$enterprisePerBranch = number_format($enterprisePricePerBranchMinor / 100, 0);
|
||
$initialBranches = max(1, (int) $branchCount);
|
||
@endphp
|
||
|
||
<div class="mx-auto max-w-5xl space-y-6"
|
||
x-data="{
|
||
billing: 'monthly',
|
||
branches: {{ $initialBranches }},
|
||
proPerBranch: {{ (int) $proPricePerBranchMinor }},
|
||
entPerBranch: {{ (int) $enterprisePricePerBranchMinor }},
|
||
minBranches: {{ $initialBranches }},
|
||
proTotal() {
|
||
return this.proPerBranch * Math.max(this.minBranches, parseInt(this.branches) || this.minBranches);
|
||
},
|
||
entTotal() {
|
||
return this.entPerBranch * Math.max(this.minBranches, parseInt(this.branches) || this.minBranches);
|
||
},
|
||
branchCount() {
|
||
return Math.max(this.minBranches, parseInt(this.branches) || this.minBranches);
|
||
},
|
||
fmt(minor) {
|
||
return (minor / 100).toLocaleString();
|
||
}
|
||
}">
|
||
@if (session('upsell'))
|
||
<div class="rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-800">{{ session('upsell') }}</div>
|
||
@endif
|
||
@if (session('success'))
|
||
<div class="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-800">{{ session('success') }}</div>
|
||
@endif
|
||
@if (session('error'))
|
||
<div class="rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800">{{ session('error') }}</div>
|
||
@endif
|
||
|
||
<div class="rounded-2xl border border-slate-200 bg-white px-6 py-5">
|
||
<h1 class="text-2xl font-bold text-slate-900">Choose your Frontdesk plan</h1>
|
||
<p class="mt-1 text-sm text-slate-600">
|
||
Pay monthly from your Ladill wallet, or prepay 6/12/24 months via Paystack.
|
||
Pro and Enterprise are billed per branch — set how many branches to include below.
|
||
Enterprise includes a one-time setup fee — <a href="{{ $salesUrl }}" class="font-medium text-indigo-600 hover:text-indigo-800" target="_blank" rel="noopener">contact sales</a> for onboarding.
|
||
</p>
|
||
<div class="mt-4 flex flex-wrap items-center gap-2">
|
||
<button type="button" @click="billing = 'monthly'"
|
||
:class="billing === 'monthly' ? 'bg-indigo-600 text-white' : 'bg-slate-100 text-slate-700 hover:bg-slate-200'"
|
||
class="rounded-lg px-3 py-1.5 text-sm font-medium transition">Monthly · wallet</button>
|
||
@foreach ($prepaidMonths as $months)
|
||
<button type="button" @click="billing = '{{ $months }}'"
|
||
:class="billing === '{{ $months }}' ? 'bg-indigo-600 text-white' : 'bg-slate-100 text-slate-700 hover:bg-slate-200'"
|
||
class="rounded-lg px-3 py-1.5 text-sm font-medium transition">{{ $months }} months · Paystack</button>
|
||
@endforeach
|
||
|
||
<label class="inline-flex items-center gap-2 rounded-lg border border-slate-200 bg-slate-50 px-3 py-1.5 text-sm text-slate-700">
|
||
<span class="font-medium text-slate-600">Branches</span>
|
||
<input type="number"
|
||
min="{{ $initialBranches }}"
|
||
max="999"
|
||
x-model.number="branches"
|
||
@change="if (branches < minBranches) branches = minBranches"
|
||
class="w-16 rounded-md border-slate-300 py-0.5 text-center text-sm focus:border-indigo-500 focus:ring-indigo-500">
|
||
</label>
|
||
</div>
|
||
<p class="mt-2 text-xs text-slate-500">
|
||
Minimum is your current active branch count ({{ $initialBranches }}). Totals update live for Pro and Enterprise.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="grid gap-5 lg:grid-cols-3">
|
||
{{-- Free --}}
|
||
<div class="flex flex-col rounded-2xl border border-slate-200 bg-white p-6 {{ $planKey === 'free' ? 'ring-2 ring-indigo-500' : '' }}">
|
||
<p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Free</p>
|
||
<p class="mt-2 text-3xl font-bold text-slate-900">GHS 0</p>
|
||
<p class="mt-1 text-sm text-slate-500">1 branch · 1 kiosk · owner only</p>
|
||
<ul class="mt-5 flex-1 space-y-2 text-sm text-slate-700">
|
||
<li>Core check-in & badges</li>
|
||
<li>100 host emails / month</li>
|
||
<li>Watchlist & hosts</li>
|
||
<li class="text-slate-400">Multi-branch, team & provided kiosks (Pro)</li>
|
||
</ul>
|
||
@if ($planKey === 'free')
|
||
<p class="mt-6 text-sm font-medium text-indigo-700">Current plan</p>
|
||
@endif
|
||
</div>
|
||
|
||
{{-- Pro --}}
|
||
<div class="flex flex-col rounded-2xl border border-slate-200 bg-white p-6 {{ $planKey === 'pro' ? 'ring-2 ring-indigo-500' : '' }}">
|
||
<p class="text-xs font-semibold uppercase tracking-wide text-indigo-600">Pro</p>
|
||
<x-plan-tier-price
|
||
:currency="$currency"
|
||
:monthly-minor="$proPricePerBranchMinor"
|
||
:monthly-display="$proPerBranch"
|
||
monthly-suffix="/branch/mo"
|
||
/>
|
||
<p class="mt-1 text-sm text-slate-500">
|
||
<span x-text="branchCount()"></span> branch(es) × {{ $currency }} {{ $proPerBranch }}/branch
|
||
= {{ $currency }} <span x-text="fmt(proTotal())"></span>/mo
|
||
</p>
|
||
<ul class="mt-5 flex-1 space-y-2 text-sm text-slate-700">
|
||
<li>Ladill-provided visitor kiosks</li>
|
||
<li>Multi-branch locations & buildings</li>
|
||
<li>Team roles & invitations</li>
|
||
<li>Unlimited host email alerts</li>
|
||
<li>Webhooks & iCal feeds</li>
|
||
<li>Scheduled report exports</li>
|
||
<li>Custom badge templates</li>
|
||
<li>Unlimited kiosk software (billed per branch)</li>
|
||
</ul>
|
||
<div class="mt-6">
|
||
@if ($planKey === 'pro')
|
||
<p class="text-sm text-slate-600">
|
||
Active
|
||
@if ($planExpiresAt)
|
||
until <strong>{{ $planExpiresAt->format('d M Y') }}</strong>
|
||
@endif
|
||
@if ($billedBranches > 0)
|
||
· billed for {{ $billedBranches }} {{ str('branch')->plural($billedBranches) }}
|
||
@endif
|
||
.
|
||
</p>
|
||
<p class="mt-2 text-xs text-slate-400">SMS host alerts bill at platform rates from your wallet.</p>
|
||
@if ($canManage)
|
||
<form method="post" action="{{ route('frontdesk.pro.expand-branches') }}" class="mt-4 space-y-2"
|
||
x-data="{ seats: {{ (int) $billedBranches + 1 }}, rate: {{ (int) $proPricePerBranchMinor }}, current: {{ (int) $billedBranches }} }">
|
||
@csrf
|
||
<label class="flex items-center justify-between gap-2 text-xs font-medium text-slate-600">
|
||
<span>Increase allotment</span>
|
||
<input type="number" name="branches" x-model.number="seats" min="{{ (int) $billedBranches + 1 }}" max="999"
|
||
class="w-20 rounded-md border-slate-300 py-1 text-center text-sm focus:border-indigo-500 focus:ring-indigo-500">
|
||
</label>
|
||
<button type="submit" class="btn-secondary w-full text-sm"
|
||
x-text="'Add seats — {{ $currency }} ' + (((Math.max(current + 1, seats) - current) * rate) / 100).toLocaleString() + ' from wallet'"></button>
|
||
</form>
|
||
@endif
|
||
@elseif ($canManage)
|
||
<form x-show="billing === 'monthly'" method="post" action="{{ route('frontdesk.pro.subscribe') }}">
|
||
@csrf
|
||
<input type="hidden" name="branches" :value="branchCount()">
|
||
<button type="submit" class="btn-primary w-full"
|
||
x-text="'Upgrade to Pro — {{ $currency }} ' + fmt(proTotal()) + '/mo wallet'"></button>
|
||
</form>
|
||
<template x-for="months in @js($prepaidMonths)" :key="months">
|
||
<form x-show="billing == months" method="post" action="{{ route('frontdesk.pro.subscribe-prepaid') }}">
|
||
@csrf
|
||
<input type="hidden" name="plan" value="pro">
|
||
<input type="hidden" name="months" :value="months">
|
||
<input type="hidden" name="branches" :value="branchCount()">
|
||
<button type="submit" class="btn-primary w-full"
|
||
x-text="'Pay ' + months + ' months via Paystack — {{ $currency }} ' + fmt(proTotal() * months)"></button>
|
||
</form>
|
||
</template>
|
||
@else
|
||
<p class="text-sm text-slate-500">Ask an admin to upgrade.</p>
|
||
@endif
|
||
</div>
|
||
</div>
|
||
|
||
{{-- Enterprise --}}
|
||
<div class="flex flex-col rounded-2xl border border-slate-200 bg-gradient-to-b from-slate-900 to-slate-800 p-6 text-white {{ $planKey === 'enterprise' ? 'ring-2 ring-amber-400' : '' }}">
|
||
<p class="text-xs font-semibold uppercase tracking-wide text-amber-300">Enterprise</p>
|
||
<x-plan-tier-price
|
||
:currency="$currency"
|
||
:monthly-minor="$enterprisePricePerBranchMinor"
|
||
:monthly-display="$enterprisePerBranch"
|
||
monthly-suffix="/branch/mo"
|
||
dark
|
||
/>
|
||
<p class="mt-1 text-sm text-slate-300">
|
||
<span x-text="branchCount()"></span> branch(es) × {{ $currency }} {{ $enterprisePerBranch }}/branch
|
||
= {{ $currency }} <span x-text="fmt(entTotal())"></span>/mo
|
||
</p>
|
||
<ul class="mt-5 flex-1 space-y-2 text-sm text-slate-200">
|
||
<li>Everything in Pro</li>
|
||
<li>Ladill-provided visitor kiosks</li>
|
||
<li>Custom integrations</li>
|
||
<li>Volume SMS rates</li>
|
||
<li>Dedicated support & SLA</li>
|
||
</ul>
|
||
<div class="mt-6 space-y-2">
|
||
@if ($planKey === 'enterprise')
|
||
<p class="text-sm text-slate-200">
|
||
Active
|
||
@if ($planExpiresAt)
|
||
until <strong class="text-white">{{ $planExpiresAt->format('d M Y') }}</strong>
|
||
@endif
|
||
@if ($billedBranches > 0)
|
||
· billed for {{ $billedBranches }} {{ str('branch')->plural($billedBranches) }}
|
||
@endif
|
||
.
|
||
</p>
|
||
@if ($canManage)
|
||
<form method="post" action="{{ route('frontdesk.pro.expand-branches') }}" class="mt-4 space-y-2"
|
||
x-data="{ seats: {{ (int) $billedBranches + 1 }}, rate: {{ (int) $enterprisePricePerBranchMinor }}, current: {{ (int) $billedBranches }} }">
|
||
@csrf
|
||
<label class="flex items-center justify-between gap-2 text-xs font-medium text-slate-300">
|
||
<span>Increase allotment</span>
|
||
<input type="number" name="branches" x-model.number="seats" min="{{ (int) $billedBranches + 1 }}" max="999"
|
||
class="w-20 rounded-md border-slate-500 bg-slate-800 py-1 text-center text-sm text-white focus:border-amber-400 focus:ring-amber-400">
|
||
</label>
|
||
<button type="submit" class="w-full rounded-xl border border-amber-300/40 bg-slate-800 px-4 py-2 text-sm font-semibold text-amber-200 hover:bg-slate-700"
|
||
x-text="'Add seats — {{ $currency }} ' + (((Math.max(current + 1, seats) - current) * rate) / 100).toLocaleString() + ' from wallet'"></button>
|
||
</form>
|
||
@endif
|
||
@elseif ($canManage)
|
||
@if ($canSubscribeEnterprise)
|
||
<form x-show="billing === 'monthly'" method="post" action="{{ route('frontdesk.pro.subscribe-enterprise') }}">
|
||
@csrf
|
||
<input type="hidden" name="branches" :value="branchCount()">
|
||
<button type="submit" class="w-full rounded-xl bg-amber-400 px-4 py-2.5 text-sm font-semibold text-slate-900 hover:bg-amber-300"
|
||
x-text="'Upgrade — {{ $currency }} ' + fmt(entTotal()) + '/mo wallet'"></button>
|
||
</form>
|
||
<template x-for="months in @js($prepaidMonths)" :key="'ent-' + months">
|
||
<form x-show="billing == months" method="post" action="{{ route('frontdesk.pro.subscribe-prepaid') }}">
|
||
@csrf
|
||
<input type="hidden" name="plan" value="enterprise">
|
||
<input type="hidden" name="months" :value="months">
|
||
<input type="hidden" name="branches" :value="branchCount()">
|
||
<button type="submit" class="w-full rounded-xl bg-amber-400 px-4 py-2.5 text-sm font-semibold text-slate-900 hover:bg-amber-300"
|
||
x-text="'Pay ' + months + ' months via Paystack — {{ $currency }} ' + fmt(entTotal() * months)"></button>
|
||
</form>
|
||
</template>
|
||
@else
|
||
<p class="text-sm text-slate-300">Add an active branch to subscribe, or contact sales.</p>
|
||
@endif
|
||
<a href="{{ $salesUrl }}" target="_blank" rel="noopener" class="block text-center text-xs text-amber-200 underline hover:text-white">Contact sales for setup & SLA</a>
|
||
@else
|
||
<p class="text-sm text-slate-300">Ask an admin to upgrade.</p>
|
||
@endif
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</x-app-layout>
|