Add Queue Enterprise billing and visible upgrade CTAs for all roles.
Deploy Ladill Queue / deploy (push) Successful in 1m32s
Deploy Ladill Queue / deploy (push) Successful in 1m32s
Enterprise charges per active branch (GHS 299+) with wallet subscribe/renew; sidebar and dashboard upsell no longer gated behind settings.view. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
isaacclad
@@ -98,19 +98,21 @@
|
||||
</svg>
|
||||
<span>Settings</span>
|
||||
</a>
|
||||
|
||||
@php $proActive = request()->routeIs('qms.pro.*'); @endphp
|
||||
@if (! empty($isPro))
|
||||
<a href="{{ route('qms.pro.index') }}" class="group mt-0.5 flex items-center gap-3 rounded-lg px-3 py-2 text-[13px] transition {{ $proActive ? 'bg-indigo-50 text-indigo-700 font-semibold' : 'text-slate-600 hover:bg-slate-50 hover:text-slate-900' }}">
|
||||
<svg class="h-[18px] w-[18px] shrink-0 text-amber-500" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.25c.3 0 .58.18.7.46l2.36 5.5 5.96.5a.75.75 0 0 1 .43 1.31l-4.53 3.9 1.36 5.83a.75.75 0 0 1-1.12.81L12 17.77l-5.16 3a.75.75 0 0 1-1.12-.81l1.36-5.83-4.53-3.9a.75.75 0 0 1 .43-1.31l5.96-.5 2.36-5.5c.12-.28.4-.46.7-.46Z"/></svg>
|
||||
<span>Queue Pro</span>
|
||||
</a>
|
||||
@else
|
||||
<a href="{{ route('qms.pro.index') }}" class="group mt-0.5 flex items-center gap-3 rounded-lg bg-gradient-to-r from-indigo-600 to-emerald-500 px-3 py-2 text-[13px] font-semibold text-white shadow-sm transition hover:opacity-95">
|
||||
<svg class="h-[18px] w-[18px] shrink-0" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.25c.3 0 .58.18.7.46l2.36 5.5 5.96.5a.75.75 0 0 1 .43 1.31l-4.53 3.9 1.36 5.83a.75.75 0 0 1-1.12.81L12 17.77l-5.16 3a.75.75 0 0 1-1.12-.81l1.36-5.83-4.53-3.9a.75.75 0 0 1 .43-1.31l5.96-.5 2.36-5.5c.12-.28.4-.46.7-.46Z"/></svg>
|
||||
<span>Upgrade to Pro</span>
|
||||
</a>
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div class="shrink-0 {{ $permissions->can($member, 'settings.view') ? '' : 'border-t border-slate-200' }} px-3 py-3">
|
||||
@php $proActive = request()->routeIs('qms.pro.*'); @endphp
|
||||
@if (! empty($hasPaidPlan))
|
||||
<a href="{{ route('qms.pro.index') }}" class="group flex items-center gap-3 rounded-lg px-3 py-2 text-[13px] transition {{ $proActive ? 'bg-indigo-50 text-indigo-700 font-semibold' : 'text-slate-600 hover:bg-slate-50 hover:text-slate-900' }}">
|
||||
<svg class="h-[18px] w-[18px] shrink-0 text-amber-500" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.25c.3 0 .58.18.7.46l2.36 5.5 5.96.5a.75.75 0 0 1 .43 1.31l-4.53 3.9 1.36 5.83a.75.75 0 0 1-1.12.81L12 17.77l-5.16 3a.75.75 0 0 1-1.12-.81l1.36-5.83-4.53-3.9a.75.75 0 0 1 .43-1.31l5.96-.5 2.36-5.5c.12-.28.4-.46.7-.46Z"/></svg>
|
||||
<span>{{ ! empty($isEnterprise) ? 'Queue Enterprise' : 'Queue Pro' }}</span>
|
||||
</a>
|
||||
@else
|
||||
<a href="{{ route('qms.pro.index') }}" class="group flex items-center gap-3 rounded-lg bg-gradient-to-r from-indigo-600 to-emerald-500 px-3 py-2 text-[13px] font-semibold text-white shadow-sm transition hover:opacity-95">
|
||||
<svg class="h-[18px] w-[18px] shrink-0" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.25c.3 0 .58.18.7.46l2.36 5.5 5.96.5a.75.75 0 0 1 .43 1.31l-4.53 3.9 1.36 5.83a.75.75 0 0 1-1.12.81L12 17.77l-5.16 3a.75.75 0 0 1-1.12-.81l1.36-5.83-4.53-3.9a.75.75 0 0 1 .43-1.31l5.96-.5 2.36-5.5c.12-.28.4-.46.7-.46Z"/></svg>
|
||||
<span>Upgrade to Pro</span>
|
||||
</a>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -68,6 +68,16 @@
|
||||
@endif
|
||||
</div>
|
||||
|
||||
@if (empty($hasPaidPlan))
|
||||
<div class="mb-6 flex flex-col gap-3 rounded-2xl border border-indigo-200 bg-gradient-to-r from-indigo-50 to-emerald-50 px-5 py-4 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div>
|
||||
<p class="font-semibold text-slate-900">Unlock Queue Pro or Enterprise</p>
|
||||
<p class="mt-0.5 text-sm text-slate-600">Unlimited branches, advanced routing, Care & Frontdesk integrations — from GHS 99/mo.</p>
|
||||
</div>
|
||||
<a href="{{ route('qms.pro.index') }}" class="btn-primary shrink-0">View plans</a>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<section class="mb-8">
|
||||
<h2 class="mb-3 text-sm font-semibold uppercase tracking-wide text-slate-500">Live operations</h2>
|
||||
<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-5">
|
||||
|
||||
@@ -1,51 +1,113 @@
|
||||
<x-app-layout title="Pro" heading="Queue Pro">
|
||||
<x-app-layout title="Plans" heading="Queue plans">
|
||||
@php
|
||||
$price = number_format($priceMinor / 100, 2);
|
||||
$proPrice = number_format($proPriceMinor / 100, 0);
|
||||
$enterprisePerBranch = number_format($enterprisePricePerBranchMinor / 100, 0);
|
||||
$enterpriseTotal = number_format($enterprisePriceMinor / 100, 0);
|
||||
@endphp
|
||||
|
||||
<div class="mx-auto max-w-2xl">
|
||||
<div class="overflow-hidden rounded-2xl border border-slate-200 bg-white">
|
||||
<div class="bg-gradient-to-r from-indigo-700 via-teal-600 to-cyan-500 px-6 py-7 text-white">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="rounded-md bg-white/20 px-2 py-0.5 text-[11px] font-semibold uppercase tracking-wide">Pro</span>
|
||||
@if ($isPro)
|
||||
<span class="rounded-md bg-emerald-400/90 px-2 py-0.5 text-[11px] font-semibold text-emerald-950">Active</span>
|
||||
@endif
|
||||
</div>
|
||||
<h1 class="mt-3 text-2xl font-bold">Ladill Queue Pro</h1>
|
||||
<p class="mt-1 text-sm text-white/80">Unlimited branches, queues, and advanced queue management.</p>
|
||||
<p class="mt-4 text-3xl font-bold">{{ $currency }} {{ $price }}<span class="text-base font-medium text-white/70"> / month</span></p>
|
||||
<div class="mx-auto max-w-5xl space-y-6">
|
||||
@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 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>
|
||||
</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 · 5 queues</p>
|
||||
<ul class="mt-5 flex-1 space-y-2 text-sm text-slate-700">
|
||||
<li>Core queue & tickets</li>
|
||||
<li>1 kiosk · 1 display</li>
|
||||
<li>Basic analytics</li>
|
||||
</ul>
|
||||
@if ($planKey === 'free')
|
||||
<p class="mt-6 text-sm font-medium text-indigo-700">Current plan</p>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div class="px-6 py-6">
|
||||
<ul class="grid gap-3 sm:grid-cols-2">
|
||||
@foreach ($proFeatures as $feature)
|
||||
<li class="flex items-start gap-2 text-sm text-slate-700">
|
||||
<svg class="mt-0.5 h-4 w-4 shrink-0 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5"/></svg>
|
||||
<span>{{ $feature }}</span>
|
||||
</li>
|
||||
@endforeach
|
||||
{{-- 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>
|
||||
<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>
|
||||
<ul class="mt-5 flex-1 space-y-2 text-sm text-slate-700">
|
||||
<li>Advanced routing rules</li>
|
||||
<li>Unlimited kiosks & displays</li>
|
||||
<li>Care & Frontdesk API</li>
|
||||
<li>Reports & exports</li>
|
||||
</ul>
|
||||
|
||||
<div class="mt-6 border-t border-slate-100 pt-6">
|
||||
@if ($isPro)
|
||||
<div class="text-sm text-slate-600">
|
||||
<div class="mt-6">
|
||||
@if ($planKey === 'pro')
|
||||
<p class="text-sm text-slate-600">
|
||||
Active
|
||||
@if ($planExpiresAt)
|
||||
Pro is active until <strong>{{ $planExpiresAt->format('d M Y') }}</strong>.
|
||||
@else
|
||||
Your organization is on Queue Pro.
|
||||
until <strong>{{ $planExpiresAt->format('d M Y') }}</strong>
|
||||
@endif
|
||||
</div>
|
||||
.
|
||||
</p>
|
||||
@elseif ($canManage)
|
||||
<form method="post" action="{{ route('qms.pro.subscribe') }}">
|
||||
@csrf
|
||||
<button class="btn-primary w-full sm:w-auto">
|
||||
Upgrade to Pro — {{ $currency }} {{ $price }}/mo from wallet
|
||||
</button>
|
||||
<button class="btn-primary w-full">Upgrade to Pro</button>
|
||||
</form>
|
||||
<p class="mt-3 text-xs text-slate-400">Billed monthly from your Ladill wallet.</p>
|
||||
@else
|
||||
<p class="rounded-xl bg-slate-50 px-4 py-3 text-sm text-slate-500">Ask an organization administrator to upgrade this workspace to Pro.</p>
|
||||
<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>
|
||||
<p class="mt-2 text-3xl font-bold">{{ $currency }} {{ $enterprisePerBranch }}<span class="text-base font-medium text-slate-300">/branch/mo</span></p>
|
||||
<p class="mt-1 text-sm text-slate-300">
|
||||
@if ($branchCount > 0)
|
||||
{{ $branchCount }} active {{ str('branch')->plural($branchCount) }} = {{ $currency }} {{ $enterpriseTotal }}/mo
|
||||
@else
|
||||
Per-branch billing for multi-site
|
||||
@endif
|
||||
</p>
|
||||
<ul class="mt-5 flex-1 space-y-2 text-sm text-slate-200">
|
||||
<li>Everything in Pro</li>
|
||||
<li>Full API & integrations</li>
|
||||
<li>Advanced analytics + SLA</li>
|
||||
<li>Dedicated onboarding (setup fee)</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 ($enterpriseBilledBranches > 0)
|
||||
· billed for {{ $enterpriseBilledBranches }} {{ str('branch')->plural($enterpriseBilledBranches) }}
|
||||
@endif
|
||||
.
|
||||
</p>
|
||||
@elseif ($canManage)
|
||||
@if ($canSubscribeEnterprise)
|
||||
<form 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
|
||||
</button>
|
||||
</form>
|
||||
@else
|
||||
<p class="text-sm text-slate-300">Add at least {{ $enterpriseMinBranches }} active branches, or choose Pro for a single site.</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>
|
||||
|
||||
Reference in New Issue
Block a user