Set Pro to GHS 100/mo and add sidebar Go Pro UI like Accounting.

Adds a dedicated Pro page with wallet upgrade, gradient Upgrade to Pro button in the sidebar footer, and view composer for plan status. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-28 02:12:49 +00:00
parent 33b6070207
commit cc3d4e9a63
11 changed files with 297 additions and 57 deletions
@@ -6,12 +6,9 @@
        <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, 2) }} / month from your Ladill wallet — unlimited branches and kiosks, integrations, scheduled reports, and more.
+                GHS {{ number_format($proPriceMinor / 100, 0) }} / month from your Ladill wallet — unlimited branches and kiosks, integrations, scheduled reports, and more.
            </p>
-            <form method="POST" action="{{ route('frontdesk.settings.upgrade') }}" class="mt-4">
-                @csrf
-                <button type="submit" class="btn-primary">Upgrade from wallet</button>
-            </form>
+            <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">
                <a href="{{ route('frontdesk.wallet') }}" class="underline">Top up your wallet</a> if you need more balance.
            </p>
@@ -0,0 +1,59 @@
+<x-app-layout title="Pro" heading="Frontdesk Pro">
+    @php
+        $price = number_format($priceMinor / 100, 2);
+    @endphp
+
+    <div class="mx-auto max-w-2xl">
+        @if (session('upsell'))
+            <div class="mb-4 rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-800">{{ session('upsell') }}</div>
+        @endif
+
+        <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 Frontdesk Pro</h1>
+                <p class="mt-1 text-sm text-white/80">Everything in Free, plus unlimited scale, integrations, and unlimited host email alerts.</p>
+                <p class="mt-4 text-3xl font-bold">{{ $currency }} {{ $price }}<span class="text-base font-medium text-white/70"> / month</span></p>
+            </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
+                </ul>
+
+                <div class="mt-6 border-t border-slate-100 pt-6">
+                    @if ($isPro)
+                        <div class="text-sm text-slate-600">
+                            @if ($planExpiresAt)
+                                Pro is active until <strong>{{ $planExpiresAt->format('d M Y') }}</strong>.
+                            @else
+                                Your organization is on Frontdesk Pro.
+                            @endif
+                        </div>
+                        <p class="mt-3 text-xs text-slate-400">SMS host alerts still bill at Ladill platform rates from your wallet.</p>
+                    @elseif ($canManage)
+                        <form method="post" action="{{ route('frontdesk.pro.subscribe') }}">
+                            @csrf
+                            <button class="btn-primary w-full sm:w-auto">
+                                Upgrade to Pro — {{ $currency }} {{ $price }}/mo from wallet
+                            </button>
+                        </form>
+                        <p class="mt-3 text-xs text-slate-400">Billed monthly from your Ladill wallet. Host SMS remains pay-as-you-go on every plan.</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>
+                    @endif
+                </div>
+            </div>
+        </div>
+    </div>
+</x-app-layout>
@@ -20,10 +20,7 @@
                    </p>
                </div>
                @if (! $isPro)
-                    <form method="POST" action="{{ route('frontdesk.settings.upgrade') }}">
-                        @csrf
-                        <button type="submit" class="btn-primary text-sm">Upgrade to Pro (GHS {{ number_format($proPriceMinor / 100, 2) }}/mo)</button>
-                    </form>
+                    <a href="{{ route('frontdesk.pro.index') }}" class="btn-primary text-sm">Upgrade to Pro (GHS {{ number_format($proPriceMinor / 100, 0) }}/mo)</a>
                @endif
            </div>
            <dl class="mt-4 grid gap-3 text-sm sm:grid-cols-2">
@@ -104,11 +104,24 @@

    <div class="shrink-0 border-t border-slate-100 px-3 py-3">
        <a href="{{ route('frontdesk.settings') }}"
-           class="group flex items-center gap-3 rounded-lg px-3 py-2 text-[13px] transition {{ request()->routeIs('frontdesk.settings*') ? '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 {{ request()->routeIs('frontdesk.settings*') ? 'text-indigo-600' : 'text-slate-400' }}" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+           class="group flex items-center gap-3 rounded-lg px-3 py-2 text-[13px] transition {{ request()->routeIs('frontdesk.settings') && ! request()->routeIs('frontdesk.pro.*') ? '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 {{ request()->routeIs('frontdesk.settings') && ! request()->routeIs('frontdesk.pro.*') ? 'text-indigo-600' : 'text-slate-400' }}" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.241.437-.613.43-.992a6.932 6.932 0 0 1 0-.255c.007-.378-.138-.75-.43-.991l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.281Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
            </svg>
            <span class="flex-1 truncate">Settings</span>
        </a>
+
+        @php $proActive = request()->routeIs('frontdesk.pro.*'); @endphp
+        @if (! empty($isPro))
+            <a href="{{ route('frontdesk.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>Frontdesk Pro</span>
+            </a>
+        @else
+            <a href="{{ route('frontdesk.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>
 </div>