Fix Events /pro 500 and align Plans UI with Accounting.

Use the Events user layout, match the Accounting/Invoice upgrade sidebar CTA, and tolerate a missing subscriptions table until migrate runs. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-07-15 08:14:07 +00:00
parent 4c87c786da
commit 6b2d97967a
4 changed files with 86 additions and 25 deletions
@@ -1,7 +1,6 @@
-<x-app-layout title="Plans" heading="Events plans">
+<x-user-layout>
+    <x-slot name="title">Plans</x-slot>
    @php
-        $proPrice = number_format($proPriceMinor / 100, 0);
-        $enterprisePrice = number_format($enterprisePriceMinor / 100, 0);
        $live = $subscription && $subscription->entitled();
    @endphp

@@ -21,9 +20,13 @@
            <p class="mt-1 text-sm text-slate-600">Pay monthly from your Ladill wallet, or prepay 6/12/24 months via Paystack.</p>
            @if ($gatingActive && ! $live)
                <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>
+                    <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>
+                        <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>
            @endif
@@ -33,12 +36,26 @@
            <div class="rounded-2xl border border-slate-200 bg-white px-6 py-5">
                <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                    <div class="text-sm text-slate-600">
-                        <strong>{{ $isEnterprise ? 'Business' : 'Pro' }}</strong> active until <strong>{{ $subscription->current_period_end->format('d M Y') }}</strong>
+                        <strong>{{ $isEnterprise ? 'Business' : 'Pro' }}</strong> active
+                        @if ($subscription->current_period_end)
+                            until <strong>{{ $subscription->current_period_end->format('d M Y') }}</strong>
+                        @endif
+                        @if ($subscription->auto_renew)
+                            · renews from wallet
+                        @else
+                            · prepaid / auto-renew off
+                        @endif
                    </div>
                    @if ($subscription->auto_renew)
-                        <form method="post" action="{{ route('events.pro.cancel') }}" onsubmit="return confirm('Turn off auto-renew?');">@csrf<button class="rounded-xl border border-slate-200 px-4 py-2 text-sm font-medium text-slate-600 hover:bg-slate-50">Cancel auto-renew</button></form>
+                        <form method="post" action="{{ route('events.pro.cancel') }}" onsubmit="return confirm('Turn off auto-renew?');">
+                            @csrf
+                            <button class="rounded-xl border border-slate-200 px-4 py-2 text-sm font-medium text-slate-600 hover:bg-slate-50">Cancel auto-renew</button>
+                        </form>
                    @elseif ($subscription->status === 'canceled')
-                        <form method="post" action="{{ route($isEnterprise ? 'events.pro.subscribe-enterprise' : 'events.pro.subscribe') }}">@csrf<button class="btn-primary">Resume subscription</button></form>
+                        <form method="post" action="{{ route($isEnterprise ? 'events.pro.subscribe-enterprise' : 'events.pro.subscribe') }}">
+                            @csrf
+                            <button class="btn-primary">Resume subscription</button>
+                        </form>
                    @endif
                </div>
            </div>
@@ -48,12 +65,16 @@
            <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">Get started with ticketed events</p>
                <ul class="mt-5 flex-1 space-y-2 text-sm text-slate-700">
-                    <li>2 live events</li>
-                    <li>100 tickets / month</li>
-                    <li>BYO Paystack / Flutterwave / Hubtel</li>
+                    <li>{{ (int) config('events.free.max_live_events', 2) }} live events</li>
+                    <li>{{ (int) config('events.free.max_tickets_per_month', 100) }} tickets / month</li>
+                    <li>Your own Paystack / Flutterwave / Hubtel</li>
+                    <li>0% Ladill platform fee</li>
                </ul>
-                @if ($planKey === 'free')<p class="mt-6 text-sm font-medium text-indigo-700">Current plan</p>@endif
+                @if ($planKey === 'free')
+                    <p class="mt-6 text-sm font-medium text-indigo-700">Current plan</p>
+                @endif
            </div>

            <div class="flex flex-col rounded-2xl border border-slate-200 bg-white p-6 {{ $planKey === 'pro' ? 'ring-2 ring-indigo-500' : '' }}">
@@ -62,15 +83,24 @@
                <ul class="mt-5 flex-1 space-y-2 text-sm text-slate-700">
                    <li>Unlimited events</li>
                    <li>Unlimited tickets</li>
+                    <li>BYO payment gateway</li>
                    <li>Priority support</li>
                </ul>
                <div class="mt-6">
                    @if ($planKey === 'pro')
                        <p class="text-sm text-slate-600">Current plan</p>
                    @elseif ($gatingActive && ! $hasPaidPlan)
-                        <form x-show="billing === 'monthly'" method="post" action="{{ route('events.pro.subscribe') }}">@csrf<button class="btn-primary w-full">Upgrade — monthly wallet</button></form>
+                        <form x-show="billing === 'monthly'" method="post" action="{{ route('events.pro.subscribe') }}">
+                            @csrf
+                            <button class="btn-primary w-full">Upgrade — monthly wallet</button>
+                        </form>
                        @foreach ($prepaidMonths as $months)
-                            <form x-show="billing == {{ $months }}" method="post" action="{{ route('events.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">Pay {{ $months }} months via Paystack</button></form>
+                            <form x-show="billing == {{ $months }}" method="post" action="{{ route('events.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">Pay {{ $months }} months via Paystack</button>
+                            </form>
                        @endforeach
                    @endif
                </div>
@@ -83,18 +113,27 @@
                    <li>Everything in Pro</li>
                    <li>Team seats</li>
                    <li>Advanced attendee tools</li>
+                    <li>Dedicated onboarding</li>
                </ul>
                <div class="mt-6">
                    @if ($planKey === 'enterprise')
                        <p class="text-sm text-slate-200">Current plan</p>
                    @elseif ($gatingActive && ! $hasPaidPlan)
-                        <form x-show="billing === 'monthly'" method="post" action="{{ route('events.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 — monthly wallet</button></form>
+                        <form x-show="billing === 'monthly'" method="post" action="{{ route('events.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 — monthly wallet</button>
+                        </form>
                        @foreach ($prepaidMonths as $months)
-                            <form x-show="billing == {{ $months }}" method="post" action="{{ route('events.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">Pay {{ $months }} months via Paystack</button></form>
+                            <form x-show="billing == {{ $months }}" method="post" action="{{ route('events.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">Pay {{ $months }} months via Paystack</button>
+                            </form>
                        @endforeach
                    @endif
                </div>
            </div>
        </div>
    </div>
-</x-app-layout>
+</x-user-layout>
@@ -32,11 +32,6 @@
    </nav>

    <div class="shrink-0 border-t border-slate-100 px-3 py-3">
-        @php $proActive = request()->routeIs('events.pro.*'); @endphp
-        <a href="{{ route('events.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 {{ $proActive ? '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.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09Z"/></svg>
-            <span>Plans</span>
-        </a>
        <a href="{{ route('account.settings') }}"
           class="group flex items-center gap-3 rounded-lg px-3 py-2 text-[13px] transition {{ request()->routeIs('account.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('account.settings') ? 'text-indigo-600' : 'text-slate-400' }}" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
@@ -44,5 +39,18 @@
            </svg>
            <span class="flex-1 truncate">Settings</span>
        </a>
+
+        @php $proActive = request()->routeIs('events.pro.*'); @endphp
+        @if (! empty($hasPaidPlan))
+            <a href="{{ route('events.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>{{ ! empty($isEnterprise) ? 'Events Business' : 'Events Pro' }}</span>
+            </a>
+        @else
+            <a href="{{ route('events.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>