isaacclad/ladill-merchant
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make guest landing-page checkouts email-optional like Ladill Mini.
Deploy Ladill Merchant / deploy (push) Successful in 59s
Details

Browse Source 
Drop required buyer email on public merchant forms; require phone for bookings so merchants can reach guests without Ladill accounts.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
isaacclad
2026-06-27 14:18:45 +00:00
co-authored by Cursor
parent 24d47ac04e
commit eee78aa3d2
8 changed files with 60 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/Http/Controllers/Public/BookingController.php
+2 -2
View File
@@ -42,8 +42,8 @@ class BookingController extends Controller
$validated = $request->validate([ $validated = $request->validate([
'customer_name' => ['required', 'string', 'max:120'], 'customer_name' => ['required', 'string', 'max:120'],
'customer_email' => ['required', 'email', 'max:200'], 'customer_email' => ['nullable', 'email', 'max:200'],
'customer_phone' => ['nullable', 'string', 'max:30'], 'customer_phone' => ['required', 'string', 'max:30'],
'service_index' => ['required', 'integer', 'min:0'], 'service_index' => ['required', 'integer', 'min:0'],
'starts_at' => ['required', 'date'], 'starts_at' => ['required', 'date'],
]); ]);
app/Http/Controllers/Public/SaleOrderController.php
+1 -1
View File
@@ -34,7 +34,7 @@ class SaleOrderController extends Controller
$validated = $request->validate([ $validated = $request->validate([
'customer_name' => ['required', 'string', 'max:120'], 'customer_name' => ['required', 'string', 'max:120'],
'customer_email' => ['required', 'email', 'max:200'], 'customer_email' => ['nullable', 'email', 'max:200'],
'customer_phone' => ['required', 'string', 'max:30'], 'customer_phone' => ['required', 'string', 'max:30'],
'shipping_fee' => ['nullable', 'numeric', 'min:0', 'max:10000'], 'shipping_fee' => ['nullable', 'numeric', 'min:0', 'max:10000'],
'items' => ['required', 'array', 'min:1'], 'items' => ['required', 'array', 'min:1'],
app/Services/Merchant/GiveDonationService.php
+1 -1
View File
@@ -56,7 +56,7 @@ class MerchantSaleService
'amount_minor' => $amountMinor, 'amount_minor' => $amountMinor,
'currency' => $qrCode->content()['currency'] ?? 'GHS', 'currency' => $qrCode->content()['currency'] ?? 'GHS',
'payer_name' => trim((string) ($data['customer_name'] ?? '')), 'payer_name' => trim((string) ($data['customer_name'] ?? '')),
'payer_email' => trim((string) ($data['customer_email'] ?? '')), 'payer_email' => ($email = trim((string) ($data['customer_email'] ?? ''))) !== '' ? $email : null,
'payer_phone' => trim((string) ($data['customer_phone'] ?? '')), 'payer_phone' => trim((string) ($data['customer_phone'] ?? '')),
'status' => QrSaleOrder::STATUS_PENDING, 'status' => QrSaleOrder::STATUS_PENDING,
'payment_reference' => null, 'payment_reference' => null,
resources/views/public/qr/book-landing.blade.php
+5 -8
View File
@@ -6,7 +6,7 @@
$price = number_format((float) ($c['price_ghs'] ?? 0), 2); $price = number_format((float) ($c['price_ghs'] ?? 0), 2);
$fileType = strtoupper($c['file_type'] ?? 'PDF'); $fileType = strtoupper($c['file_type'] ?? 'PDF');
$hasCover = !empty($c['cover_path']); $hasCover = !empty($c['cover_path']);
$orderUrl = route('qr.public.book.checkout', $qrCode->short_code); $orderUrl = $qrCode->publicPath('book/order');
$csrfToken = csrf_token(); $csrfToken = csrf_token();
@endphp @endphp
<!DOCTYPE html> <!DOCTYPE html>
@@ -35,7 +35,7 @@
customerPhone: '', customerPhone: '',
async submitOrder() { async submitOrder() {
if (!this.customerName.trim()) { this.errorMsg = 'Enter your full name.'; return; } if (!this.customerName.trim()) { this.errorMsg = 'Enter your full name.'; return; }
if (!this.customerEmail.trim() || !this.customerEmail.includes('@')) { this.errorMsg = 'Enter a valid email address.'; return; } if (!this.customerPhone.trim()) { this.errorMsg = 'Enter your phone number.'; return; }
this.loading = true; this.errorMsg = ''; this.loading = true; this.errorMsg = '';
try { try {
const res = await fetch(@js($orderUrl), { const res = await fetch(@js($orderUrl), {
@@ -63,7 +63,7 @@
{{-- Left column: cover panel (desktop only) --}} {{-- Left column: cover panel (desktop only) --}}
<div class="hidden lg:flex lg:flex-col lg:items-center lg:justify-center bg-white border-r border-slate-200 px-12 py-16"> <div class="hidden lg:flex lg:flex-col lg:items-center lg:justify-center bg-white border-r border-slate-200 px-12 py-16">
@if($hasCover) @if($hasCover)
<img src="{{ route('qr.public.book.cover', $qrCode->short_code) }}" <img src="{{ $qrCode->publicPath('cover') }}"
alt="{{ $title }} cover" alt="{{ $title }} cover"
class="w-56 rounded-2xl object-cover shadow-xl ring-1 ring-slate-200"> class="w-56 rounded-2xl object-cover shadow-xl ring-1 ring-slate-200">
@else @else
@@ -85,7 +85,7 @@
{{-- Mobile cover header --}} {{-- Mobile cover header --}}
<div class="lg:hidden bg-white border-b border-slate-200 px-6 pt-10 pb-8 flex flex-col items-center text-center"> <div class="lg:hidden bg-white border-b border-slate-200 px-6 pt-10 pb-8 flex flex-col items-center text-center">
@if($hasCover) @if($hasCover)
<img src="{{ route('qr.public.book.cover', $qrCode->short_code) }}" <img src="{{ $qrCode->publicPath('cover') }}"
alt="{{ $title }} cover" alt="{{ $title }} cover"
class="h-48 w-32 rounded-2xl object-cover shadow-xl ring-1 ring-slate-200"> class="h-48 w-32 rounded-2xl object-cover shadow-xl ring-1 ring-slate-200">
@else @else
@@ -214,11 +214,8 @@
<input type="text" x-model="customerName" <input type="text" x-model="customerName"
autocomplete="name" placeholder="Full name *" autocomplete="name" placeholder="Full name *"
class="w-full rounded-xl border border-slate-200 px-4 py-3 text-sm placeholder:text-slate-400 focus:border-amber-400 focus:outline-none focus:ring-1 focus:ring-amber-400/30"> class="w-full rounded-xl border border-slate-200 px-4 py-3 text-sm placeholder:text-slate-400 focus:border-amber-400 focus:outline-none focus:ring-1 focus:ring-amber-400/30">
<input type="email" x-model="customerEmail"
autocomplete="email" placeholder="Email address *"
class="w-full rounded-xl border border-slate-200 px-4 py-3 text-sm placeholder:text-slate-400 focus:border-amber-400 focus:outline-none focus:ring-1 focus:ring-amber-400/30">
<input type="tel" x-model="customerPhone" <input type="tel" x-model="customerPhone"
autocomplete="tel" placeholder="Phone (optional)" autocomplete="tel" placeholder="Phone number *"
class="w-full rounded-xl border border-slate-200 px-4 py-3 text-sm placeholder:text-slate-400 focus:border-amber-400 focus:outline-none focus:ring-1 focus:ring-amber-400/30"> class="w-full rounded-xl border border-slate-200 px-4 py-3 text-sm placeholder:text-slate-400 focus:border-amber-400 focus:outline-none focus:ring-1 focus:ring-amber-400/30">
</div> </div>
resources/views/public/qr/booking-landing.blade.php
+5 -6
View File
@@ -5,8 +5,8 @@
$hasCover = ! empty($c['cover_path']); $hasCover = ! empty($c['cover_path']);
$hasLogo = ! empty($c['logo_path']); $hasLogo = ! empty($c['logo_path']);
$brand = $c['brand_color'] ?? '#4f46e5'; $brand = $c['brand_color'] ?? '#4f46e5';
$slotsUrl = route('qr.public.booking.slots', $qrCode->short_code); $slotsUrl = $qrCode->publicPath('booking/slots');
$bookUrl = route('qr.public.booking.store', $qrCode->short_code); $bookUrl = $qrCode->publicPath('booking');
$csrfToken = csrf_token(); $csrfToken = csrf_token();
@endphp @endphp
<!DOCTYPE html> <!DOCTYPE html>
@@ -54,7 +54,7 @@
}, },
async submitBooking() { async submitBooking() {
if (!this.customerName.trim()) { this.errorMsg = 'Enter your full name.'; return; } if (!this.customerName.trim()) { this.errorMsg = 'Enter your full name.'; return; }
if (!this.customerEmail.includes('@')) { this.errorMsg = 'Enter a valid email.'; return; } if (!this.customerPhone.trim()) { this.errorMsg = 'Enter your phone number.'; return; }
if (!this.selectedSlot) { this.errorMsg = 'Pick a time slot.'; return; } if (!this.selectedSlot) { this.errorMsg = 'Pick a time slot.'; return; }
this.loading = true; this.errorMsg = ''; this.loading = true; this.errorMsg = '';
try { try {
@@ -90,7 +90,7 @@
}" class="mx-auto max-w-lg min-h-screen bg-white shadow-sm"> }" class="mx-auto max-w-lg min-h-screen bg-white shadow-sm">
<div class="border-b border-slate-100 px-6 py-8 text-center" style="background: linear-gradient(135deg, {{ $brand }}15, #fff)"> <div class="border-b border-slate-100 px-6 py-8 text-center" style="background: linear-gradient(135deg, {{ $brand }}15, #fff)">
@if($hasLogo) @if($hasLogo)
<img src="{{ route('qr.public.menu.logo', $qrCode->short_code) }}" alt="" class="mx-auto h-14 w-14 rounded-2xl object-cover ring-2 ring-white shadow"> <img src="{{ $qrCode->publicPath('menu-logo') }}" alt="" class="mx-auto h-14 w-14 rounded-2xl object-cover ring-2 ring-white shadow">
@endif @endif
<h1 class="mt-4 text-2xl font-bold text-slate-900">{{ $title }}</h1> <h1 class="mt-4 text-2xl font-bold text-slate-900">{{ $title }}</h1>
@if(!empty($c['description'])) @if(!empty($c['description']))
@@ -139,8 +139,7 @@
<div x-show="selectedSlot" x-cloak class="space-y-3"> <div x-show="selectedSlot" x-cloak class="space-y-3">
<p class="text-xs font-semibold uppercase tracking-widest text-slate-400">4. Your details</p> <p class="text-xs font-semibold uppercase tracking-widest text-slate-400">4. Your details</p>
<input type="text" x-model="customerName" placeholder="Full name *" class="w-full rounded-xl border border-slate-200 px-4 py-3 text-sm"> <input type="text" x-model="customerName" placeholder="Full name *" class="w-full rounded-xl border border-slate-200 px-4 py-3 text-sm">
<input type="email" x-model="customerEmail" placeholder="Email *" class="w-full rounded-xl border border-slate-200 px-4 py-3 text-sm"> <input type="tel" x-model="customerPhone" placeholder="Phone number *" class="w-full rounded-xl border border-slate-200 px-4 py-3 text-sm">
<input type="tel" x-model="customerPhone" placeholder="Phone (optional)" class="w-full rounded-xl border border-slate-200 px-4 py-3 text-sm">
<div x-show="errorMsg" x-cloak class="rounded-xl bg-red-50 px-4 py-3 text-sm text-red-600" x-text="errorMsg"></div> <div x-show="errorMsg" x-cloak class="rounded-xl bg-red-50 px-4 py-3 text-sm text-red-600" x-text="errorMsg"></div>
<button type="button" @click="submitBooking()" :disabled="loading" <button type="button" @click="submitBooking()" :disabled="loading"
class="w-full rounded-2xl py-4 text-base font-bold text-white transition disabled:opacity-60" class="w-full rounded-2xl py-4 text-base font-bold text-white transition disabled:opacity-60"
resources/views/public/qr/event-confirmed.blade.php
+6
View File
@@ -44,7 +44,9 @@
</div> </div>
@endif @endif
@if($registration->attendee_email)
<p class="mt-5 text-xs text-slate-400">A receipt was sent to {{ $registration->attendee_email }}.</p> <p class="mt-5 text-xs text-slate-400">A receipt was sent to {{ $registration->attendee_email }}.</p>
@endif
@else @else
<p class="text-sm text-slate-500">Hi <span class="font-semibold text-slate-800">{{ $registration->attendee_name }}</span>, your spot is confirmed.</p> <p class="text-sm text-slate-500">Hi <span class="font-semibold text-slate-800">{{ $registration->attendee_name }}</span>, your spot is confirmed.</p>
@@ -64,7 +66,11 @@
@endforeach @endforeach
</div> </div>
@if($registration->attendee_email)
<p class="mt-5 text-xs text-slate-400">Show this badge code at check-in. A confirmation was sent to {{ $registration->attendee_email }}.</p> <p class="mt-5 text-xs text-slate-400">Show this badge code at check-in. A confirmation was sent to {{ $registration->attendee_email }}.</p>
@else
<p class="mt-5 text-xs text-slate-400">Show this badge code at check-in.</p>
@endif
@endif @endif
</div> </div>
</div> </div>
resources/views/public/qr/landing.blade.php
+35 -44
View File
@@ -3,8 +3,8 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
@include('partials.favicon')
<title>{{ $qrCode->label }}</title> <title>{{ $qrCode->label }}</title>
@include('partials.favicon')
<meta name="description" content="{{ $qrCode->typeLabel() }} — {{ $qrCode->label }}"> <meta name="description" content="{{ $qrCode->typeLabel() }} — {{ $qrCode->label }}">
@vite(['resources/css/app.css']) @vite(['resources/css/app.css'])
</head> </head>
@@ -24,7 +24,7 @@
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"/> <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"/>
</svg> </svg>
</div> </div>
<a href="{{ route('qr.public.view', $qrCode->short_code) }}" <a href="{{ $qrCode->publicPath('view') }}"
class="mt-6 flex w-full items-center justify-center gap-2 rounded-2xl bg-red-600 px-6 py-4 text-sm font-semibold text-white shadow-sm transition hover:bg-red-700"> class="mt-6 flex w-full items-center justify-center gap-2 rounded-2xl bg-red-600 px-6 py-4 text-sm font-semibold text-white shadow-sm transition hover:bg-red-700">
<svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"> <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z"/> <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z"/>
@@ -32,7 +32,7 @@
</svg> </svg>
View document View document
</a> </a>
<a href="{{ route('qr.public.file', $qrCode->short_code) }}" <a href="{{ $qrCode->publicPath('file') }}"
class="mt-3 flex w-full items-center justify-center gap-2 rounded-2xl border border-slate-200 bg-white px-6 py-4 text-sm font-semibold text-slate-700 shadow-sm transition hover:bg-slate-50"> class="mt-3 flex w-full items-center justify-center gap-2 rounded-2xl border border-slate-200 bg-white px-6 py-4 text-sm font-semibold text-slate-700 shadow-sm transition hover:bg-slate-50">
<svg class="h-5 w-5 text-slate-500" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"> <svg class="h-5 w-5 text-slate-500" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3"/> <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3"/>
@@ -62,7 +62,7 @@
{{-- ===== VCARD ===== --}} {{-- ===== VCARD ===== --}}
@elseif($type === \App\Models\QrCode::TYPE_VCARD) @elseif($type === \App\Models\QrCode::TYPE_VCARD)
@php @php
$avatarUrl = !empty($content['avatar_path']) ? route('qr.public.vcard.avatar', $qrCode->short_code) : null; $avatarUrl = !empty($content['avatar_path']) ? $qrCode->publicPath('avatar') : null;
$rawSocial = $content['social'] ?? []; $rawSocial = $content['social'] ?? [];
$social = []; $social = [];
foreach ($rawSocial as $platform => $url) { foreach ($rawSocial as $platform => $url) {
@@ -159,8 +159,8 @@
{{-- Save contact button --}} {{-- Save contact button --}}
<div class="px-6 pb-6 pt-2"> <div class="px-6 pb-6 pt-2">
<a href="{{ route('qr.public.vcard', $qrCode->short_code) }}" <a href="{{ $qrCode->publicPath('vcard.vcf') }}"
class="flex w-full items-center justify-center gap-2 rounded-2xl bg-indigo-600 py-3.5 text-sm font-semibold text-white shadow-sm transition hover:bg-indigo-700"> class="btn-primary w-full">
<svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5"/></svg> <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5"/></svg>
Save Contact Save Contact
</a> </a>
@@ -178,8 +178,8 @@
$bizColor = $content['brand_color'] ?? '#1e3a5f'; $bizColor = $content['brand_color'] ?? '#1e3a5f';
$bizHasLogo = !empty($content['logo_path']); $bizHasLogo = !empty($content['logo_path']);
$bizHasCover = !empty($content['cover_path']); $bizHasCover = !empty($content['cover_path']);
$bizLogoUrl = $bizHasLogo ? route('qr.public.business.logo', $qrCode->short_code) : null; $bizLogoUrl = $bizHasLogo ? $qrCode->publicPath('business-logo') : null;
$bizCoverUrl = $bizHasCover ? route('qr.public.business.cover', $qrCode->short_code) : null; $bizCoverUrl = $bizHasCover ? $qrCode->publicPath('business-cover') : null;
$bizInitials = strtoupper(substr($bizName, 0, 1)); $bizInitials = strtoupper(substr($bizName, 0, 1));
$bizRawSocial = $content['social'] ?? []; $bizRawSocial = $content['social'] ?? [];
$bizSocial = []; $bizSocial = [];
@@ -307,25 +307,25 @@
</div> </div>
{{-- ===== CHURCH ===== --}} {{-- ===== CHURCH ===== --}}
@elseif($type === \App\Models\QrCode::TYPE_SHOP) @elseif($type === \App\Models\QrCode::TYPE_CHURCH)
@php @php
$churchName = $content['name'] ?? $qrCode->label; $churchName = $content['name'] ?? $qrCode->label;
$churchColor = $content['brand_color'] ?? '#1a3a5c'; $churchColor = $content['brand_color'] ?? '#1a3a5c';
$churchHasLogo = !empty($content['logo_path']); $churchHasLogo = !empty($content['logo_path']);
$churchHasCover = !empty($content['cover_path']); $churchHasCover = !empty($content['cover_path']);
$menuLogoUrl = $churchHasLogo ? route('qr.public.church.logo', $qrCode->short_code) : null; $churchLogoUrl = $churchHasLogo ? $qrCode->publicPath('church-logo') : null;
$menuCoverUrl = $churchHasCover ? route('qr.public.church.cover', $qrCode->short_code) : null; $churchCoverUrl = $churchHasCover ? $qrCode->publicPath('church-cover') : null;
$churchInitials = strtoupper(substr($churchName, 0, 2)); $churchInitials = strtoupper(substr($churchName, 0, 2));
$churchAcceptsPay = true; $churchAcceptsPay = !empty($content['accepts_payment']);
$churchCurrency = $content['currency'] ?? 'GHS'; $churchCurrency = $content['currency'] ?? 'GHS';
$churchTypes = $content['collection_types'] ?? ['offering', 'tithe', 'order', 'harvest']; $churchTypes = $content['collection_types'] ?? ['offering', 'tithe', 'donation', 'harvest'];
// Normalise legacy lowercase slugs → display strings // Normalise legacy lowercase slugs → display strings
$legacyLabels = ['offering'=>'Offering','tithe'=>'Tithe','order'=>'Order','harvest'=>'Harvest']; $legacyLabels = ['offering'=>'Offering','tithe'=>'Tithe','donation'=>'Donation','harvest'=>'Harvest'];
$churchTypeLabels = array_combine( $churchTypeLabels = array_combine(
$churchTypes, $churchTypes,
array_map(fn($t) => $legacyLabels[strtolower(trim($t))] ?? trim($t), $churchTypes) array_map(fn($t) => $legacyLabels[strtolower(trim($t))] ?? trim($t), $churchTypes)
); );
$churchOrderRoute = route('qr.public.order', $qrCode->short_code); $churchOrderRoute = $qrCode->publicPath('order');
$churchCsrf = csrf_token(); $churchCsrf = csrf_token();
@endphp @endphp
<div x-data="{ <div x-data="{
@@ -341,7 +341,6 @@
async give() { async give() {
if (!this.amount || parseFloat(this.amount) <= 0) { this.errorMsg = 'Enter a valid amount.'; return; } if (!this.amount || parseFloat(this.amount) <= 0) { this.errorMsg = 'Enter a valid amount.'; return; }
if (!this.name.trim()) { this.errorMsg = 'Enter your name.'; return; } if (!this.name.trim()) { this.errorMsg = 'Enter your name.'; return; }
if (!this.email.trim() || !this.email.includes('@')) { this.errorMsg = 'Enter a valid email.'; return; }
if (!this.phone.trim()) { this.errorMsg = 'Enter your phone number.'; return; } if (!this.phone.trim()) { this.errorMsg = 'Enter your phone number.'; return; }
this.errorMsg = ''; this.loading = true; this.errorMsg = ''; this.loading = true;
const labels = @js($churchTypeLabels); const labels = @js($churchTypeLabels);
@@ -376,7 +375,7 @@
<div style="position:relative;"> <div style="position:relative;">
<div style="position:relative; overflow:hidden; height:200px;"> <div style="position:relative; overflow:hidden; height:200px;">
@if($churchHasCover) @if($churchHasCover)
<img src="{{ $menuCoverUrl }}" alt="{{ $churchName }}" <img src="{{ $churchCoverUrl }}" alt="{{ $churchName }}"
style="position:absolute; inset:0; width:100%; height:100%; object-fit:cover;"> style="position:absolute; inset:0; width:100%; height:100%; object-fit:cover;">
<div style="position:absolute; inset:0; background:linear-gradient(to bottom,rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.55) 100%);"></div> <div style="position:absolute; inset:0; background:linear-gradient(to bottom,rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.55) 100%);"></div>
@else @else
@@ -389,7 +388,7 @@
<div style="position:absolute; bottom:-52px; left:50%; transform:translateX(-50%); z-index:10;"> <div style="position:absolute; bottom:-52px; left:50%; transform:translateX(-50%); z-index:10;">
@if($churchHasLogo) @if($churchHasLogo)
<div style="width:104px; height:104px; border-radius:20px; background:#fff; box-shadow:0 8px 32px rgba(0,0,0,0.14); border:4px solid #fff; overflow:hidden; display:flex; align-items:center; justify-content:center;"> <div style="width:104px; height:104px; border-radius:20px; background:#fff; box-shadow:0 8px 32px rgba(0,0,0,0.14); border:4px solid #fff; overflow:hidden; display:flex; align-items:center; justify-content:center;">
<img src="{{ $menuLogoUrl }}" alt="{{ $churchName }}" <img src="{{ $churchLogoUrl }}" alt="{{ $churchName }}"
style="width:100%; height:100%; object-fit:contain; padding:8px;"> style="width:100%; height:100%; object-fit:contain; padding:8px;">
</div> </div>
@else @else
@@ -484,7 +483,7 @@
$typeIconMap = [ $typeIconMap = [
'offering' => 'M21 11.25v8.25a1.5 1.5 0 0 1-1.5 1.5H5.25a1.5 1.5 0 0 1-1.5-1.5v-8.25M12 4.875A2.625 2.625 0 1 0 9.375 7.5H12m0-2.625V7.5m0-2.625A2.625 2.625 0 1 1 14.625 7.5H12m0 0V21m-8.625-9.75h18c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125h-18c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125Z', 'offering' => 'M21 11.25v8.25a1.5 1.5 0 0 1-1.5 1.5H5.25a1.5 1.5 0 0 1-1.5-1.5v-8.25M12 4.875A2.625 2.625 0 1 0 9.375 7.5H12m0-2.625V7.5m0-2.625A2.625 2.625 0 1 1 14.625 7.5H12m0 0V21m-8.625-9.75h18c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125h-18c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125Z',
'tithe' => 'M2.25 18.75a60.07 60.07 0 0 1 15.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 0 1 3 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 0 0-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 0 1-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 0 0 3 15h-.75M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm3 0h.008v.008H18V10.5Zm-12 0h.008v.008H6V10.5Z', 'tithe' => 'M2.25 18.75a60.07 60.07 0 0 1 15.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 0 1 3 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 0 0-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 0 1-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 0 0 3 15h-.75M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm3 0h.008v.008H18V10.5Zm-12 0h.008v.008H6V10.5Z',
'order' => 'M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z', 'donation' => 'M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z',
'harvest' => 'M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z', 'harvest' => 'M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z',
'school fees' => 'M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.63 48.63 0 0 1 12 20.904a48.63 48.63 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.57 50.57 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.697 50.697 0 0 1 12 13.489a50.702 50.702 0 0 1 3.741-1.342M6.75 14.25v4.5', 'school fees' => 'M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.63 48.63 0 0 1 12 20.904a48.63 48.63 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.57 50.57 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.697 50.697 0 0 1 12 13.489a50.702 50.702 0 0 1 3.741-1.342M6.75 14.25v4.5',
'pta levy' => 'M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z', 'pta levy' => 'M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z',
@@ -494,7 +493,7 @@
'zakat' => 'M2.25 18.75a60.07 60.07 0 0 1 15.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 0 1 3 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 0 0-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 0 1-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 0 0 3 15h-.75M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm3 0h.008v.008H18V10.5Zm-12 0h.008v.008H6V10.5Z', 'zakat' => 'M2.25 18.75a60.07 60.07 0 0 1 15.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 0 1 3 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 0 0-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 0 1-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 0 0 3 15h-.75M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm3 0h.008v.008H18V10.5Zm-12 0h.008v.008H6V10.5Z',
"waqf" => 'M2.25 21h19.5m-18-18v18m10.5-18v18m6-13.5V21M6.75 6.75h.75m-.75 3h.75m-.75 3h.75m3-6h.75m-.75 3h.75m-.75 3h.75M6.75 21v-3.375c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21M3 3h12m-.75 4.5H21m-3.75 3.75h.008v.008h-.008v-.008Zm0 3h.008v.008h-.008v-.008Zm0 3h.008v.008h-.008v-.008Z', "waqf" => 'M2.25 21h19.5m-18-18v18m10.5-18v18m6-13.5V21M6.75 6.75h.75m-.75 3h.75m-.75 3h.75m3-6h.75m-.75 3h.75m-.75 3h.75M6.75 21v-3.375c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21M3 3h12m-.75 4.5H21m-3.75 3.75h.008v.008h-.008v-.008Zm0 3h.008v.008h-.008v-.008Zm0 3h.008v.008h-.008v-.008Z',
"jumu'ah" => 'M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z', "jumu'ah" => 'M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z',
'general order' => 'M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z', 'general donation' => 'M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z',
'project fund' => 'M20.25 14.15v4.25c0 1.094-.787 2.036-1.872 2.18-2.087.277-4.216.42-6.378.42s-4.291-.143-6.378-.42c-1.085-.144-1.872-1.086-1.872-2.18v-4.25m16.5 0a2.18 2.18 0 0 0 .75-1.661V8.706c0-1.081-.768-2.015-1.837-2.175a48.114 48.114 0 0 0-3.413-.387m4.5 8.006c-.194.165-.42.295-.673.38A23.978 23.978 0 0 1 12 15.75c-2.648 0-5.195-.429-7.577-1.22a2.016 2.016 0 0 1-.673-.38m0 0A2.18 2.18 0 0 1 3 12.489V8.706c0-1.081.768-2.015 1.837-2.175a48.111 48.111 0 0 1 3.413-.387m7.5 0V5.25A2.25 2.25 0 0 0 13.5 3h-3a2.25 2.25 0 0 0-2.25 2.25v.894m7.5 0a48.667 48.667 0 0 0-7.5 0M12 12.75h.008v.008H12v-.008Z', 'project fund' => 'M20.25 14.15v4.25c0 1.094-.787 2.036-1.872 2.18-2.087.277-4.216.42-6.378.42s-4.291-.143-6.378-.42c-1.085-.144-1.872-1.086-1.872-2.18v-4.25m16.5 0a2.18 2.18 0 0 0 .75-1.661V8.706c0-1.081-.768-2.015-1.837-2.175a48.114 48.114 0 0 0-3.413-.387m4.5 8.006c-.194.165-.42.295-.673.38A23.978 23.978 0 0 1 12 15.75c-2.648 0-5.195-.429-7.577-1.22a2.016 2.016 0 0 1-.673-.38m0 0A2.18 2.18 0 0 1 3 12.489V8.706c0-1.081.768-2.015 1.837-2.175a48.111 48.111 0 0 1 3.413-.387m7.5 0V5.25A2.25 2.25 0 0 0 13.5 3h-3a2.25 2.25 0 0 0-2.25 2.25v.894m7.5 0a48.667 48.667 0 0 0-7.5 0M12 12.75h.008v.008H12v-.008Z',
'emergency relief' => 'M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z', 'emergency relief' => 'M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z',
'sponsorship' => 'M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z', 'sponsorship' => 'M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z',
@@ -512,8 +511,8 @@
<div style="border-radius:24px; background:linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); border:1px solid #eef2f7; padding:14px; box-shadow:0 14px 36px rgba(15,23,42,0.06);"> <div style="border-radius:24px; background:linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); border:1px solid #eef2f7; padding:14px; box-shadow:0 14px 36px rgba(15,23,42,0.06);">
<div style="display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px;"> <div style="display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px;">
<div> <div>
<p class="text-[10px] font-bold uppercase tracking-widest" style="color:{{ $churchColor }}">I'm merchant for</p> <p class="text-[10px] font-bold uppercase tracking-widest" style="color:{{ $churchColor }}">I'm giving for</p>
<p style="margin-top:3px; font-size:0.75rem; color:#94a3b8;">Choose a merchant category</p> <p style="margin-top:3px; font-size:0.75rem; color:#94a3b8;">Choose a giving category</p>
</div> </div>
<span style="display:flex; height:34px; width:34px; flex-shrink:0; align-items:center; justify-content:center; border-radius:999px; background:{{ $churchColor }}12; color:{{ $churchColor }};"> <span style="display:flex; height:34px; width:34px; flex-shrink:0; align-items:center; justify-content:center; border-radius:999px; background:{{ $churchColor }}12; color:{{ $churchColor }};">
<svg width="17" height="17" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"> <svg width="17" height="17" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
@@ -592,9 +591,6 @@
<input type="text" x-model="name" placeholder="Full name *" autocomplete="name" <input type="text" x-model="name" placeholder="Full name *" autocomplete="name"
class="church-input" class="church-input"
style="display:block; width:100%; box-sizing:border-box; border-radius:14px; border:1.5px solid #e2e8f0; padding:12px 16px; font-size:0.875rem; color:#0f172a; background:#fff;"> style="display:block; width:100%; box-sizing:border-box; border-radius:14px; border:1.5px solid #e2e8f0; padding:12px 16px; font-size:0.875rem; color:#0f172a; background:#fff;">
<input type="email" x-model="email" placeholder="Email address *" autocomplete="email"
class="church-input"
style="display:block; width:100%; box-sizing:border-box; border-radius:14px; border:1.5px solid #e2e8f0; padding:12px 16px; font-size:0.875rem; color:#0f172a; background:#fff;">
<input type="tel" x-model="phone" placeholder="Phone number *" autocomplete="tel" <input type="tel" x-model="phone" placeholder="Phone number *" autocomplete="tel"
class="church-input" class="church-input"
style="display:block; width:100%; box-sizing:border-box; border-radius:14px; border:1.5px solid #e2e8f0; padding:12px 16px; font-size:0.875rem; color:#0f172a; background:#fff;"> style="display:block; width:100%; box-sizing:border-box; border-radius:14px; border:1.5px solid #e2e8f0; padding:12px 16px; font-size:0.875rem; color:#0f172a; background:#fff;">
@@ -616,7 +612,7 @@
<span x-text="loading ? 'Processing…' : ('Give ' + @js($churchCurrency) + ' ' + (parseFloat(amount)||0).toFixed(2))">Give</span> <span x-text="loading ? 'Processing…' : ('Give ' + @js($churchCurrency) + ' ' + (parseFloat(amount)||0).toFixed(2))">Give</span>
</button> </button>
<p class="text-center text-[11px] text-slate-400">Your merchant is safe &amp; secure</p> <p class="text-center text-[11px] text-slate-400">Your giving is safe &amp; secure</p>
</div> </div>
</div> </div>
@endif @endif
@@ -631,8 +627,8 @@
$evColor = $content['brand_color'] ?? '#4f46e5'; $evColor = $content['brand_color'] ?? '#4f46e5';
$evHasLogo = !empty($content['logo_path']); $evHasLogo = !empty($content['logo_path']);
$evHasCover = !empty($content['cover_path']); $evHasCover = !empty($content['cover_path']);
$evLogoUrl = $evHasLogo ? route('qr.public.event.logo', $qrCode->short_code) : null; $evLogoUrl = $evHasLogo ? $qrCode->publicPath('event-logo') : null;
$evCoverUrl = $evHasCover ? route('qr.public.event.cover', $qrCode->short_code) : null; $evCoverUrl = $evHasCover ? $qrCode->publicPath('event-cover') : null;
$evName = $content['name'] ?? $qrCode->label; $evName = $content['name'] ?? $qrCode->label;
$evInitials = strtoupper(mb_substr($evName, 0, 2)); $evInitials = strtoupper(mb_substr($evName, 0, 2));
$evTiers = $content['tiers'] ?? []; $evTiers = $content['tiers'] ?? [];
@@ -642,7 +638,7 @@
$evMode = in_array($content['mode'] ?? 'ticketing', ['contributions', 'free'], true) ? ($content['mode'] ?? 'ticketing') : 'ticketing'; $evMode = in_array($content['mode'] ?? 'ticketing', ['contributions', 'free'], true) ? ($content['mode'] ?? 'ticketing') : 'ticketing';
$evCategories = $content['contribution_categories'] ?? ['Contribution']; $evCategories = $content['contribution_categories'] ?? ['Contribution'];
$evHeading = $evMode === 'contributions' ? 'Make a contribution' : 'Register'; $evHeading = $evMode === 'contributions' ? 'Make a contribution' : 'Register';
$evRegRoute = route('qr.public.event.register', $qrCode->short_code); $evRegRoute = $qrCode->publicPath('register');
$evCsrf = csrf_token(); $evCsrf = csrf_token();
@endphp @endphp
<div x-data="{ <div x-data="{
@@ -660,7 +656,7 @@
if (!this.tier) { this.errorMsg = this.mode === 'contributions' ? 'Select a category.' : 'Select a ticket type.'; return; } if (!this.tier) { this.errorMsg = this.mode === 'contributions' ? 'Select a category.' : 'Select a ticket type.'; return; }
if (this.mode === 'contributions' && !(parseFloat(this.amount) > 0)) { this.errorMsg = 'Enter a contribution amount.'; return; } if (this.mode === 'contributions' && !(parseFloat(this.amount) > 0)) { this.errorMsg = 'Enter a contribution amount.'; return; }
if (!this.name.trim()) { this.errorMsg = 'Enter your full name.'; return; } if (!this.name.trim()) { this.errorMsg = 'Enter your full name.'; return; }
if (!this.email.trim() || !this.email.includes('@')) { this.errorMsg = 'Enter a valid email.'; return; } if (!this.phone.trim()) { this.errorMsg = 'Enter your phone number.'; return; }
this.errorMsg = ''; this.loading = true; this.errorMsg = ''; this.loading = true;
try { try {
const res = await fetch(@js($evRegRoute), { const res = await fetch(@js($evRegRoute), {
@@ -782,7 +778,7 @@
<div style="border-radius:24px; background:linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); border:1px solid #eef2f7; padding:14px; box-shadow:0 14px 36px rgba(15,23,42,0.06);"> <div style="border-radius:24px; background:linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); border:1px solid #eef2f7; padding:14px; box-shadow:0 14px 36px rgba(15,23,42,0.06);">
<div style="display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px;"> <div style="display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px;">
<div> <div>
<p class="text-[10px] font-bold uppercase tracking-widest" style="color:{{ $evColor }}">I'm merchant for</p> <p class="text-[10px] font-bold uppercase tracking-widest" style="color:{{ $evColor }}">I'm giving for</p>
<p style="margin-top:3px; font-size:0.75rem; color:#94a3b8;">Choose a category</p> <p style="margin-top:3px; font-size:0.75rem; color:#94a3b8;">Choose a category</p>
</div> </div>
<span style="display:flex; height:34px; width:34px; flex-shrink:0; align-items:center; justify-content:center; border-radius:999px; background:{{ $evColor }}12; color:{{ $evColor }};"> <span style="display:flex; height:34px; width:34px; flex-shrink:0; align-items:center; justify-content:center; border-radius:999px; background:{{ $evColor }}12; color:{{ $evColor }};">
@@ -855,9 +851,7 @@
<p class="text-[10px] font-bold uppercase tracking-widest" style="color:{{ $evColor }}">Your details</p> <p class="text-[10px] font-bold uppercase tracking-widest" style="color:{{ $evColor }}">Your details</p>
<input type="text" x-model="name" placeholder="Full name *" autocomplete="name" <input type="text" x-model="name" placeholder="Full name *" autocomplete="name"
class="w-full rounded-xl border border-slate-200 px-4 py-3 text-sm placeholder:text-slate-400 focus:outline-none focus:ring-1"> class="w-full rounded-xl border border-slate-200 px-4 py-3 text-sm placeholder:text-slate-400 focus:outline-none focus:ring-1">
<input type="email" x-model="email" placeholder="Email address *" autocomplete="email" <input type="tel" x-model="phone" placeholder="Phone number *" autocomplete="tel"
class="w-full rounded-xl border border-slate-200 px-4 py-3 text-sm placeholder:text-slate-400 focus:outline-none focus:ring-1">
<input type="tel" x-model="phone" placeholder="Phone number" autocomplete="tel"
class="w-full rounded-xl border border-slate-200 px-4 py-3 text-sm placeholder:text-slate-400 focus:outline-none focus:ring-1"> class="w-full rounded-xl border border-slate-200 px-4 py-3 text-sm placeholder:text-slate-400 focus:outline-none focus:ring-1">
@foreach($evFields as $field) @foreach($evFields as $field)
<input type="text" x-model="fields[@js($field)]" placeholder="{{ $field }}" <input type="text" x-model="fields[@js($field)]" placeholder="{{ $field }}"
@@ -887,7 +881,7 @@
@php @php
$itinColor = $content['brand_color'] ?? '#b45309'; $itinColor = $content['brand_color'] ?? '#b45309';
$itinHasCover = !empty($content['cover_path']); $itinHasCover = !empty($content['cover_path']);
$itinCoverUrl = $itinHasCover ? route('qr.public.itinerary.cover', $qrCode->short_code) : null; $itinCoverUrl = $itinHasCover ? $qrCode->publicPath('itinerary-cover') : null;
$itinTitle = $content['title'] ?? $qrCode->label; $itinTitle = $content['title'] ?? $qrCode->label;
$itinDays = $content['days'] ?? []; $itinDays = $content['days'] ?? [];
$multiDay = count($itinDays) > 1; $multiDay = count($itinDays) > 1;
@@ -1029,7 +1023,7 @@
<h1 class="text-2xl font-bold text-slate-900">{{ $qrCode->label }}</h1> <h1 class="text-2xl font-bold text-slate-900">{{ $qrCode->label }}</h1>
<div class="mt-6 space-y-4"> <div class="mt-6 space-y-4">
@foreach($content['images'] ?? [] as $index => $image) @foreach($content['images'] ?? [] as $index => $image)
<img src="{{ route('qr.public.image', [$qrCode->short_code, $index]) }}" <img src="{{ $qrCode->publicPath('images/'.$index) }}"
alt="{{ $image['title'] ?? 'Image ' . ($index + 1) }}" alt="{{ $image['title'] ?? 'Image ' . ($index + 1) }}"
class="w-full rounded-2xl border border-slate-200 shadow-sm" class="w-full rounded-2xl border border-slate-200 shadow-sm"
loading="lazy"> loading="lazy">
@@ -1039,7 +1033,7 @@
{{-- ===== APP ===== --}} {{-- ===== APP ===== --}}
@elseif($type === \App\Models\QrCode::TYPE_APP) @elseif($type === \App\Models\QrCode::TYPE_APP)
@php $appIconUrl = !empty($content['icon_path']) ? route('qr.public.app.icon', $qrCode->short_code) : null; @endphp @php $appIconUrl = !empty($content['icon_path']) ? $qrCode->publicPath('app-icon') : null; @endphp
<div class="flex min-h-screen flex-col items-center justify-center px-4 py-12"> <div class="flex min-h-screen flex-col items-center justify-center px-4 py-12">
<div class="w-full max-w-sm text-center"> <div class="w-full max-w-sm text-center">
@if($appIconUrl) @if($appIconUrl)
@@ -1132,14 +1126,14 @@
$sections = $content['sections'] ?? []; $sections = $content['sections'] ?? [];
$title = $content['title'] ?? $qrCode->label; $title = $content['title'] ?? $qrCode->label;
$acceptsPayment = (bool) ($content['accepts_payment'] ?? false); $acceptsPayment = (bool) ($content['accepts_payment'] ?? false);
$orderRoute = route('qr.public.order', $qrCode->short_code); $orderRoute = $qrCode->publicPath('order');
$csrfToken = csrf_token(); $csrfToken = csrf_token();
$paystackPublicKey = $acceptsPayment ? app(\App\Services\Billing\PaystackService::class)->publicKey() : ''; $paystackPublicKey = $acceptsPayment ? app(\App\Services\Billing\PaystackService::class)->publicKey() : '';
$brandColor = $content['brand_color'] ?? ($isShop ? '#7c3aed' : '#f97316'); $brandColor = $content['brand_color'] ?? ($isShop ? '#7c3aed' : '#f97316');
$hasLogo = !empty($content['logo_path']); $hasLogo = !empty($content['logo_path']);
$hasCover = !empty($content['cover_path']); $hasCover = !empty($content['cover_path']);
$logoUrl = $hasLogo ? route('qr.public.menu.logo', $qrCode->short_code) : null; $logoUrl = $hasLogo ? $qrCode->publicPath('menu-logo') : null;
$coverUrl = $hasCover ? route('qr.public.menu.cover', $qrCode->short_code) : null; $coverUrl = $hasCover ? $qrCode->publicPath('menu-cover') : null;
$shippingType = $content['shipping_type'] ?? 'none'; $shippingType = $content['shipping_type'] ?? 'none';
$shippingFee = (float) ($content['shipping_fee'] ?? 0); $shippingFee = (float) ($content['shipping_fee'] ?? 0);
$freeShippingAbove = (float) ($content['free_shipping_above'] ?? 0); $freeShippingAbove = (float) ($content['free_shipping_above'] ?? 0);
@@ -1186,7 +1180,6 @@
async submitOrder() { async submitOrder() {
if (this.cartCount === 0) { this.errorMsg = 'Add at least one item.'; return } if (this.cartCount === 0) { this.errorMsg = 'Add at least one item.'; return }
if (!this.name.trim()) { this.errorMsg = 'Enter your name.'; return } if (!this.name.trim()) { this.errorMsg = 'Enter your name.'; return }
if (!this.email.trim() || !this.email.includes('@')) { this.errorMsg = 'Enter a valid email address.'; return }
if (!this.phone.trim()) { this.errorMsg = 'Enter your phone number.'; return } if (!this.phone.trim()) { this.errorMsg = 'Enter your phone number.'; return }
this.errorMsg = ''; this.errorMsg = '';
this.loading = true; this.loading = true;
@@ -1291,7 +1284,7 @@
<div class="flex gap-3 overflow-hidden rounded-2xl bg-white shadow-sm ring-1 ring-slate-100"> <div class="flex gap-3 overflow-hidden rounded-2xl bg-white shadow-sm ring-1 ring-slate-100">
{{-- Item image --}} {{-- Item image --}}
@if($hasImage) @if($hasImage)
<img src="{{ route('qr.public.item-image', [$qrCode->short_code, $si, $ii]) }}" <img src="{{ $qrCode->publicPath('item-image/'.$si.'/'.$ii) }}"
alt="{{ $item['name'] }}" alt="{{ $item['name'] }}"
class="h-[100px] w-[100px] flex-shrink-0 object-cover" loading="lazy"> class="h-[100px] w-[100px] flex-shrink-0 object-cover" loading="lazy">
@endif @endif
@@ -1451,8 +1444,6 @@
<p class="text-xs font-semibold uppercase tracking-widest text-slate-400">Your details</p> <p class="text-xs font-semibold uppercase tracking-widest text-slate-400">Your details</p>
<input type="text" x-model="name" placeholder="Full name *" <input type="text" x-model="name" placeholder="Full name *"
class="w-full rounded-xl border border-slate-200 px-4 py-3 text-sm placeholder:text-slate-400 focus:border-indigo-400 focus:outline-none focus:ring-1 focus:ring-indigo-400/30"> class="w-full rounded-xl border border-slate-200 px-4 py-3 text-sm placeholder:text-slate-400 focus:border-indigo-400 focus:outline-none focus:ring-1 focus:ring-indigo-400/30">
<input type="email" x-model="email" placeholder="Email address *"
class="w-full rounded-xl border border-slate-200 px-4 py-3 text-sm placeholder:text-slate-400 focus:border-indigo-400 focus:outline-none focus:ring-1 focus:ring-indigo-400/30">
<input type="tel" x-model="phone" placeholder="Phone number *" <input type="tel" x-model="phone" placeholder="Phone number *"
class="w-full rounded-xl border border-slate-200 px-4 py-3 text-sm placeholder:text-slate-400 focus:border-indigo-400 focus:outline-none focus:ring-1 focus:ring-indigo-400/30"> class="w-full rounded-xl border border-slate-200 px-4 py-3 text-sm placeholder:text-slate-400 focus:border-indigo-400 focus:outline-none focus:ring-1 focus:ring-indigo-400/30">
</div> </div>
resources/views/public/qr/storefront.blade.php
+5 -6
View File
@@ -11,9 +11,9 @@
$isShop = $qrCode->type === \App\Models\QrCode::TYPE_SHOP; $isShop = $qrCode->type === \App\Models\QrCode::TYPE_SHOP;
$hasLogo = ! empty($c['logo_path']); $hasLogo = ! empty($c['logo_path']);
$hasCover = ! empty($c['cover_path']); $hasCover = ! empty($c['cover_path']);
$logoUrl = $hasLogo ? route('qr.public.menu.logo', $qrCode->short_code) : null; $logoUrl = $hasLogo ? $qrCode->publicPath('menu-logo') : null;
$coverUrl = $hasCover ? route('qr.public.menu.cover', $qrCode->short_code) : null; $coverUrl = $hasCover ? $qrCode->publicPath('menu-cover') : null;
$orderUrl = route('qr.public.order', $qrCode->short_code); $orderUrl = $qrCode->publicPath('order');
@endphp @endphp
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
@@ -75,7 +75,7 @@
@endphp @endphp
<div class="flex items-center gap-3 rounded-2xl border border-slate-200 bg-white p-3"> <div class="flex items-center gap-3 rounded-2xl border border-slate-200 bg-white p-3">
@if($img) @if($img)
<img src="{{ route('qr.public.item-image', [$qrCode->short_code, $loop->parent->index, $iIdx]) }}" alt="" class="h-16 w-16 shrink-0 rounded-xl object-cover"> <img src="{{ $qrCode->publicPath('item-image/'.$loop->parent->index.'/'.$iIdx) }}" alt="" class="h-16 w-16 shrink-0 rounded-xl object-cover">
@endif @endif
<div class="min-w-0 flex-1"> <div class="min-w-0 flex-1">
<p class="truncate text-sm font-semibold text-slate-900">{{ $item['name'] ?? '' }}</p> <p class="truncate text-sm font-semibold text-slate-900">{{ $item['name'] ?? '' }}</p>
@@ -139,7 +139,6 @@
<div class="mt-4 space-y-2"> <div class="mt-4 space-y-2">
<input type="text" x-model="name" placeholder="Your name *" class="w-full rounded-xl border border-slate-200 px-3.5 py-2.5 text-sm"> <input type="text" x-model="name" placeholder="Your name *" class="w-full rounded-xl border border-slate-200 px-3.5 py-2.5 text-sm">
<input type="email" x-model="email" placeholder="Email *" class="w-full rounded-xl border border-slate-200 px-3.5 py-2.5 text-sm">
<input type="tel" x-model="phone" placeholder="Phone *" class="w-full rounded-xl border border-slate-200 px-3.5 py-2.5 text-sm"> <input type="tel" x-model="phone" placeholder="Phone *" class="w-full rounded-xl border border-slate-200 px-3.5 py-2.5 text-sm">
</div> </div>
@@ -180,7 +179,7 @@ function storefront(cfg) {
get total() { return this.subtotal + this.shipping; }, get total() { return this.subtotal + this.shipping; },
async checkout() { async checkout() {
this.errorMsg = ''; this.errorMsg = '';
if (!this.name.trim() || !this.email.trim() || !this.phone.trim()) { this.errorMsg = 'Please fill in your name, email and phone.'; return; } if (!this.name.trim() || !this.phone.trim()) { this.errorMsg = 'Please fill in your name and phone.'; return; }
if (this.count === 0) { this.errorMsg = 'Your cart is empty.'; return; } if (this.count === 0) { this.errorMsg = 'Your cart is empty.'; return; }
this.loading = true; this.loading = true;
try { try {