Add Paystack prepaid billing and fix sidebar footer spacing.
Deploy Ladill Queue / deploy (push) Successful in 2m27s

Monthly Pro/Enterprise stays on wallet; 6/12/24 month plans checkout via Paystack.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
isaacclad
2026-06-30 01:55:38 +00:00
co-authored by Cursor
parent 165c7238fe
commit 07998b29b9
7 changed files with 237 additions and 21 deletions
+40 -7
View File
@@ -5,7 +5,7 @@
$enterpriseTotal = number_format($enterprisePriceMinor / 100, 0);
@endphp
<div class="mx-auto max-w-5xl space-y-6">
<div class="mx-auto max-w-5xl space-y-6" x-data="{ billing: 'monthly' }">
@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
@@ -15,7 +15,20 @@
<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 Queue plan</h1>
<p class="mt-1 text-sm text-slate-600">Billed monthly from your Ladill wallet. 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>
<p class="mt-1 text-sm text-slate-600">
Pay monthly from your Ladill wallet, or prepay 6/12/24 months via Paystack.
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">
<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
</div>
</div>
<div class="grid gap-5 lg:grid-cols-3">
@@ -38,7 +51,10 @@
<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>
<p class="mt-2 text-3xl font-bold text-slate-900">{{ $currency }} {{ $proPrice }}<span class="text-base font-medium text-slate-500">/mo</span></p>
<p class="mt-1 text-sm text-slate-500">Unlimited branches & queues</p>
<p class="mt-1 text-sm text-slate-500" x-show="billing !== 'monthly'" x-cloak>
<span x-text="billing === 'monthly' ? '' : '{{ $currency }} ' + ({{ $proPriceMinor }} * billing / 100).toLocaleString() + ' total'"></span>
</p>
<p class="mt-1 text-sm text-slate-500" x-show="billing === 'monthly'">Unlimited branches & queues</p>
<ul class="mt-5 flex-1 space-y-2 text-sm text-slate-700">
<li>Advanced routing rules</li>
<li>Unlimited kiosks & displays</li>
@@ -55,10 +71,18 @@
.
</p>
@elseif ($canManage)
<form method="post" action="{{ route('qms.pro.subscribe') }}">
<form x-show="billing === 'monthly'" method="post" action="{{ route('qms.pro.subscribe') }}">
@csrf
<button class="btn-primary w-full">Upgrade to Pro</button>
<button class="btn-primary w-full">Upgrade to Pro monthly wallet</button>
</form>
<template x-for="months in @js($prepaidMonths)" :key="months">
<form x-show="billing == months" method="post" action="{{ route('qms.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>
</form>
</template>
@else
<p class="text-sm text-slate-500">Ask an admin to upgrade.</p>
@endif
@@ -96,12 +120,21 @@
</p>
@elseif ($canManage)
@if ($canSubscribeEnterprise)
<form method="post" action="{{ route('qms.pro.subscribe-enterprise') }}">
<form x-show="billing === 'monthly'" method="post" action="{{ route('qms.pro.subscribe-enterprise') }}">
@csrf
<button class="w-full rounded-xl bg-amber-400 px-4 py-2.5 text-sm font-semibold text-slate-900 hover:bg-amber-300">
Upgrade to Enterprise {{ $currency }} {{ $enterpriseTotal }}/mo
Upgrade {{ $currency }} {{ $enterpriseTotal }}/mo wallet
</button>
</form>
<template x-for="months in @js($prepaidMonths)" :key="'ent-' + months">
<form x-show="billing == months" method="post" action="{{ route('qms.pro.subscribe-prepaid') }}">
@csrf
<input type="hidden" name="plan" value="enterprise">
<input type="hidden" name="months" :value="months">
<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 }} ' + ({{ $enterprisePriceMinor }} * months / 100).toLocaleString()"></button>
</form>
</template>
@else
<p class="text-sm text-slate-300">Add at least {{ $enterpriseMinBranches }} active branches, or choose Pro for a single site.</p>
@endif