Bill Frontdesk Pro and Enterprise per branch.

Pro is GHS 990/branch/mo and Enterprise is GHS 1990/branch/mo, with the Care-style branch selector UI, self-serve Enterprise checkout, and renewal charges scaled to billed branches.
2026-07-16 00:42:34 +00:00
parent 3bbd1a8ddd
commit bdbf572f19
9 changed files with 295 additions and 61 deletions
@@ -6,7 +6,7 @@
        <div class="mt-6 rounded-2xl border border-indigo-200 bg-indigo-50 p-6">
            <h2 class="font-semibold text-indigo-900">Upgrade to Pro</h2>
            <p class="mt-2 text-sm text-indigo-800">
-                GHS {{ number_format($proPriceMinor / 100, 0) }} / month from your Ladill wallet — unlimited branches and kiosks, integrations, scheduled reports, and more.
+                GHS {{ number_format($proPriceMinor / 100, 0) }} / branch / month from your Ladill wallet — unlimited kiosks, integrations, scheduled reports, and more.
            </p>
            <a href="{{ route('frontdesk.pro.index') }}" class="btn-primary mt-4 inline-flex">View Pro plans</a>
            <p class="mt-3 text-xs text-indigo-700">
@@ -1,9 +1,30 @@
 <x-app-layout title="Plans" heading="Frontdesk plans">
    @php
-        $proPrice = number_format($proPriceMinor / 100, 0);
+        $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' }">
+    <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
@@ -17,10 +38,11 @@
        <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 for Pro.
-                Enterprise is custom — <a href="{{ $salesUrl }}" class="font-medium text-indigo-600 hover:text-indigo-800" target="_blank" rel="noopener">contact sales</a> for multi-site onboarding.
+                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 gap-2">
+            <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>
@@ -29,7 +51,20 @@
                            :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">
@@ -51,13 +86,22 @@
            {{-- 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="$proPriceMinor" />
-                <p class="mt-1 text-sm text-slate-500" x-show="billing === 'monthly'">Unlimited branches & kiosks</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>Unlimited host email alerts</li>
                    <li>Webhooks & iCal feeds</li>
                    <li>Scheduled report exports</li>
                    <li>Custom badge templates</li>
+                    <li>Unlimited kiosks (billed per branch)</li>
                </ul>
                <div class="mt-6">
                    @if ($planKey === 'pro')
@@ -66,20 +110,27 @@
                            @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>
                    @elseif ($canManage)
                        <form x-show="billing === 'monthly'" method="post" action="{{ route('frontdesk.pro.subscribe') }}">
                            @csrf
-                            <button class="btn-primary w-full">Upgrade to Pro — monthly wallet</button>
+                            <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">
-                                <button type="submit" class="btn-primary w-full" x-text="'Pay ' + months + ' months via Paystack'"></button>
+                                <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
@@ -91,8 +142,17 @@
            {{-- 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>
-                <p class="mt-2 text-3xl font-bold">Custom</p>
-                <p class="mt-1 text-sm text-slate-300">Multi-site · SLA · dedicated onboarding</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>Custom integrations</li>
@@ -106,16 +166,35 @@
                            @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>
                    @elseif ($canManage)
-                        <a href="{{ $salesUrl }}" target="_blank" rel="noopener"
-                           class="block w-full rounded-xl bg-amber-400 px-4 py-2.5 text-center text-sm font-semibold text-slate-900 hover:bg-amber-300">
-                            Contact sales
-                        </a>
-                        <p class="text-center text-xs text-amber-200">Includes one-time setup fee</p>
+                        @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 contact sales.</p>
+                        <p class="text-sm text-slate-300">Ask an admin to upgrade.</p>
                    @endif
                </div>
            </div>
@@ -9,13 +9,13 @@
                <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
                    <p class="text-sm leading-6 text-slate-600">
                        @if ($isPro)
-                            <span class="font-medium text-indigo-700">{{ $plan['label'] ?? 'Pro' }}</span> — unlimited branches and kiosks, integrations, and unlimited host emails (SMS still billed per segment).
+                            <span class="font-medium text-indigo-700">{{ $plan['label'] ?? 'Pro' }}</span> — unlimited kiosks, integrations, and unlimited host emails, billed per branch (SMS still billed per segment).
                        @else
                            <span class="font-medium text-slate-900">Free</span> — one branch, one kiosk, core check-in and badges. Host alerts billed after {{ number_format($freeEmailAllowance) }} free emails per month.
                        @endif
                    </p>
                    @if (! $isPro)
-                        <a href="{{ route('frontdesk.pro.index') }}" class="btn-primary shrink-0 text-sm">Upgrade to Pro (GHS {{ number_format($proPriceMinor / 100, 0) }}/mo)</a>
+                        <a href="{{ route('frontdesk.pro.index') }}" class="btn-primary shrink-0 text-sm">Upgrade to Pro (GHS {{ number_format($proPriceMinor / 100, 0) }}/branch/mo)</a>
                    @endif
                </div>
                <dl class="mt-5 grid gap-4 border-t border-slate-100 pt-5 text-sm sm:grid-cols-2">