isaacclad
6afc3db909
Deploy Ladill Frontdesk / deploy (push) Successful in 52s
Dedicated onboarding remains; setup fees apply only to VPS and dedicated servers.
236 lines
15 KiB
PHP
236 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 dedicated onboarding — <a href="{{ $salesUrl }}" class="font-medium text-indigo-600 hover:text-indigo-800" target="_blank" rel="noopener">contact sales</a> for multi-site deployments.
|
||
</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</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>5,000 host email alerts / month</li>
|
||
<li>5,000 host SMS alerts / month</li>
|
||
<li>Webhooks & iCal feeds</li>
|
||
<li>Scheduled report exports</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">Pro includes 5,000 email and 5,000 SMS host alerts per month. Upgrade to Enterprise for unlimited alerts.</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()"></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'"></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>Unlimited host email & SMS alerts</li>
|
||
<li>Custom badge templates</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()"></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'"></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 onboarding & SLA</a>
|
||
@else
|
||
<p class="text-sm text-slate-300">Ask an admin to upgrade.</p>
|
||
@endif
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</x-app-layout>
|