Add Events Pro/Business and BYO ticket gateways.

Cut ticket checkouts off Ladill Pay, settle to merchant gateways at 0% platform fee, and mirror Invoice freemium pricing (GHS 49 / 149). Co-authored-by: Cursor <cursoragent@cursor.com>
2026-07-15 01:26:28 +00:00
parent dda52722ce
commit 4c87c786da
26 changed files with 1376 additions and 105 deletions
@@ -0,0 +1,23 @@
+@props([
+    'currency' => 'GHS',
+    'monthlyMinor' => 0,
+    'prepaidMinor' => null,
+    'monthlyDisplay' => null,
+    'monthlySuffix' => '/mo',
+    'dark' => false,
+])
+
+@php
+    $prepaidBase = (int) ($prepaidMinor ?? $monthlyMinor);
+    $monthlyFormatted = $monthlyDisplay ?? number_format((int) $monthlyMinor / 100, 0);
+    $muted = $dark ? 'text-slate-300' : 'text-slate-500';
+    $text = $dark ? 'text-white' : 'text-slate-900';
+@endphp
+
+<p {{ $attributes->merge(['class' => "mt-2 text-3xl font-bold {$text}"]) }}>
+    <span x-show="billing === 'monthly'">{{ $currency }} {{ $monthlyFormatted }}<span class="text-base font-medium {{ $muted }}">{{ $monthlySuffix }}</span></span>
+    <span x-show="billing !== 'monthly'" x-cloak>
+        <span x-text="'{{ $currency }} ' + ({{ $prepaidBase }} * billing / 100).toLocaleString()"></span>
+        <span class="block text-base font-medium {{ $muted }}" x-text="'for ' + billing + ' months'"></span>
+    </span>
+</p>
@@ -2,6 +2,7 @@
    <x-slot name="title">Overview</x-slot>
    @php $fmt = fn ($m) => 'GHS '.number_format($m / 100, 2); @endphp
    <div class="space-y-6">
+        @include('partials.upgrade-banner')
        <div class="flex items-center justify-between gap-3">
            <div class="min-w-0 flex-1">
                <h1 class="truncate text-lg font-semibold text-slate-900 lg:text-xl">Events</h1>
@@ -16,7 +16,7 @@

        <div>
            <h1 class="text-xl font-semibold text-slate-900">Payments & Payouts</h1>
-            <p class="mt-1 text-sm text-slate-500">Ticket and contribution revenue settles into your Ladill wallet (5.5% tickets / 3.5% contributions).</p>
+            <p class="mt-1 text-sm text-slate-500">Paid tickets and contributions settle directly to your connected gateway (0% Ladill fee). This wallet is for app subscriptions and older balances only.</p>
        </div>

        <div class="grid gap-4 sm:grid-cols-2">
@@ -97,7 +97,7 @@
        <div class="rounded-2xl border border-slate-200 bg-white">
            <div class="border-b border-slate-100 px-5 py-4">
                <h2 class="text-sm font-semibold text-slate-900">Event payments</h2>
-                <p class="mt-0.5 text-xs text-slate-500">Recent ticket sales and contributions collected through Ladill Pay.</p>
+                <p class="mt-0.5 text-xs text-slate-500">Legacy wallet credits from before BYO gateway settlement. New ticket revenue does not land here.</p>
            </div>

            @if($transactions->isEmpty())
@@ -0,0 +1,100 @@
+<x-app-layout title="Plans" heading="Events plans">
+    @php
+        $proPrice = number_format($proPriceMinor / 100, 0);
+        $enterprisePrice = number_format($enterprisePriceMinor / 100, 0);
+        $live = $subscription && $subscription->entitled();
+    @endphp
+
+    <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
+        @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
+        @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
+
+        <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 Events 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.</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>
+                    @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>
+            @endif
+        </div>
+
+        @if ($live)
+            <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>
+                    </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>
+                    @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>
+                    @endif
+                </div>
+            </div>
+        @endif
+
+        <div class="grid gap-5 lg:grid-cols-3">
+            <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>
+                <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>
+                </ul>
+                @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' : '' }}">
+                <p class="text-xs font-semibold uppercase tracking-wide text-indigo-600">Pro</p>
+                <x-plan-tier-price :currency="$currency" :monthly-minor="$proPriceMinor" />
+                <ul class="mt-5 flex-1 space-y-2 text-sm text-slate-700">
+                    <li>Unlimited events</li>
+                    <li>Unlimited tickets</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>
+                        @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>
+                        @endforeach
+                    @endif
+                </div>
+            </div>
+
+            <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">Business</p>
+                <x-plan-tier-price :currency="$currency" :monthly-minor="$enterprisePriceMinor" dark />
+                <ul class="mt-5 flex-1 space-y-2 text-sm text-slate-200">
+                    <li>Everything in Pro</li>
+                    <li>Team seats</li>
+                    <li>Advanced attendee tools</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>
+                        @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>
+                        @endforeach
+                    @endif
+                </div>
+            </div>
+        </div>
+    </div>
+</x-app-layout>
@@ -32,6 +32,11 @@
    </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">
@@ -0,0 +1,10 @@
+@php $banner = config('events.upgrade_banner'); @endphp
+@if (empty($hasPaidPlan) && ! empty($banner))
+    <div class="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">{{ $banner['title'] }}</p>
+            <p class="mt-0.5 text-sm text-slate-600">{{ $banner['description'] }}</p>
+        </div>
+        <a href="{{ route($banner['route']) }}" class="btn-primary shrink-0">View plans</a>
+    </div>
+@endif
@@ -269,6 +269,46 @@
                </div>
            </details>

+            <div class="rounded-2xl border border-slate-200 bg-white p-5 space-y-4">
+                <div>
+                    <h2 class="text-base font-semibold text-slate-900">Payment gateway</h2>
+                    <p class="mt-1 text-sm text-slate-500">Connect Paystack, Flutterwave, or Hubtel. Ticket and contribution payments go 100% to you — 0% Ladill platform fee.</p>
+                </div>
+                <div>
+                    <label class="text-sm font-medium text-slate-700">Provider</label>
+                    <select name="gateway_provider" class="mt-1 w-full rounded-lg border-slate-200">
+                        <option value="">Select a provider</option>
+                        <option value="paystack" @selected(old('gateway_provider', $gateway?->provider) === 'paystack')>Paystack</option>
+                        <option value="flutterwave" @selected(old('gateway_provider', $gateway?->provider) === 'flutterwave')>Flutterwave</option>
+                        <option value="hubtel" @selected(old('gateway_provider', $gateway?->provider) === 'hubtel')>Hubtel</option>
+                    </select>
+                </div>
+                <div class="grid gap-4 md:grid-cols-2">
+                    <div>
+                        <label class="text-sm font-medium text-slate-700">Public key / Merchant account</label>
+                        <input type="text" name="gateway_public_key" value="{{ old('gateway_public_key') }}" placeholder="{{ $gateway?->public_key ? '•••• saved — leave blank to keep' : 'pk_live_…' }}" class="mt-1 w-full rounded-lg border-slate-200">
+                    </div>
+                    <div>
+                        <label class="text-sm font-medium text-slate-700">Secret / API key</label>
+                        <input type="password" name="gateway_secret_key" value="" placeholder="{{ $gateway?->secret_key ? '•••• saved — leave blank to keep' : 'sk_live_…' }}" class="mt-1 w-full rounded-lg border-slate-200" autocomplete="new-password">
+                    </div>
+                </div>
+                <div>
+                    <label class="text-sm font-medium text-slate-700">Webhook secret (optional)</label>
+                    <input type="password" name="gateway_webhook_secret" value="" placeholder="{{ $gateway?->webhook_secret ? '•••• saved — leave blank to keep' : 'Optional' }}" class="mt-1 w-full rounded-lg border-slate-200" autocomplete="new-password">
+                </div>
+                <label class="inline-flex items-center gap-2 text-sm text-slate-700">
+                    <input type="hidden" name="gateway_is_active" value="0">
+                    <input type="checkbox" name="gateway_is_active" value="1" @checked(old('gateway_is_active', $gateway?->is_active ?? true)) class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500">
+                    Gateway enabled for paid tickets and contributions
+                </label>
+                @if ($gateway?->isConfigured())
+                    <p class="rounded-lg bg-emerald-50 px-3 py-2 text-sm text-emerald-800">Gateway connected ({{ ucfirst($gateway->provider) }}).</p>
+                @else
+                    <p class="rounded-lg bg-amber-50 px-3 py-2 text-sm text-amber-800">Paid checkouts stay disabled until a gateway is connected.</p>
+                @endif
+            </div>
+
            <button type="submit" class="btn-primary">
                Save settings
            </button>