isaaccladandCursor
5cdc0a046d
Deploy Ladill Mini / deploy (push) Successful in 1m23s
Drop the required MTN MoMo number field and MoMo copy so public payment QRs open Paystack checkout via Ladill Pay like the other restored storefronts. Co-authored-by: Cursor <cursoragent@cursor.com>
96 lines
7.0 KiB
PHP
96 lines
7.0 KiB
PHP
<x-user-layout>
|
|
<x-slot name="title">My Payment QR</x-slot>
|
|
|
|
<div class="space-y-6"
|
|
x-data="balanceGate({
|
|
balance: @js((float) $wallet->spendableBalance()),
|
|
price: @js((float) $pricePerQr),
|
|
topupUrl: @js($topupUrl),
|
|
href: @js(route('mini.payment-qrs.create')),
|
|
})">
|
|
@foreach(['success', 'error'] as $flash)
|
|
@if(session($flash))
|
|
<div class="rounded-lg border px-4 py-3 {{ $flash === 'success' ? 'border-emerald-200 bg-emerald-50 text-emerald-700' : 'border-red-200 bg-red-50 text-red-700' }}">
|
|
<p class="text-sm">{{ session($flash) }}</p>
|
|
</div>
|
|
@endif
|
|
@endforeach
|
|
|
|
<div class="relative overflow-hidden rounded-2xl border border-slate-200 bg-white">
|
|
<div class="absolute inset-0 bg-gradient-to-br from-violet-50/80 via-white to-indigo-50/60"></div>
|
|
<div class="relative px-6 py-8 sm:px-10">
|
|
<div class="flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between">
|
|
<div class="max-w-xl">
|
|
<div class="inline-flex items-center gap-1.5 rounded-full bg-violet-100 px-3 py-1 text-xs font-semibold text-violet-700">
|
|
Card · MoMo · Ladill Pay
|
|
</div>
|
|
<h1 class="mt-3 text-2xl font-bold tracking-tight text-slate-900 sm:text-3xl">Your payment QRs</h1>
|
|
<p class="mt-2 text-sm leading-6 text-slate-600">
|
|
Static QRs to print or display at your counter — one per till or branch. Customers scan and pay you instantly.
|
|
</p>
|
|
<div class="mt-6">
|
|
<button type="button"
|
|
@click="goOrTopup($event)"
|
|
class="btn-primary">
|
|
<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="M12 4.5v15m7.5-7.5h-15"/></svg>
|
|
New payment QR
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="scrollbar-hide flex snap-x snap-mandatory gap-3 overflow-x-auto pb-2 sm:grid sm:grid-cols-3 sm:overflow-visible sm:pb-0 lg:gap-4" style="-ms-overflow-style:none;scrollbar-width:none;">
|
|
<div class="mobile-stats-card shrink-0 snap-start rounded-xl border border-slate-200 bg-white/90 px-4 py-3 text-center backdrop-blur-sm">
|
|
<p class="whitespace-nowrap text-xl font-bold text-slate-900 sm:text-2xl">GHS {{ number_format($wallet->spendableBalance(), 2) }}</p>
|
|
<p class="mt-0.5 whitespace-nowrap text-[11px] font-medium text-slate-500">Account balance</p>
|
|
</div>
|
|
<div class="mobile-stats-card shrink-0 snap-start rounded-xl border border-slate-200 bg-white/90 px-4 py-3 text-center backdrop-blur-sm">
|
|
<p class="whitespace-nowrap text-xl font-bold text-slate-900 sm:text-2xl">{{ $qrCodes->count() }}</p>
|
|
<p class="mt-0.5 whitespace-nowrap text-[11px] font-medium text-slate-500">Payment QRs</p>
|
|
</div>
|
|
<div class="mobile-stats-card shrink-0 snap-start rounded-xl border border-slate-200 bg-white/90 px-4 py-3 text-center backdrop-blur-sm">
|
|
<p class="whitespace-nowrap text-xl font-bold text-slate-900 sm:text-2xl">{{ number_format($activeCount) }}</p>
|
|
<p class="mt-0.5 whitespace-nowrap text-[11px] font-medium text-slate-500">Active</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rounded-2xl border border-slate-200 bg-white overflow-hidden">
|
|
<div class="border-b border-slate-100 px-6 py-4">
|
|
<h2 class="text-sm font-semibold text-slate-900">Your payment QRs</h2>
|
|
</div>
|
|
@if($qrCodes->isEmpty())
|
|
<p class="px-6 py-10 text-center text-sm text-slate-500">No payment QRs yet. Create your first payment QR to get started.</p>
|
|
@else
|
|
<div class="grid gap-4 p-6 sm:grid-cols-2 lg:grid-cols-3">
|
|
@foreach($qrCodes as $qr)
|
|
@php $c = $qr->content(); @endphp
|
|
<a href="{{ route('mini.payment-qrs.show', $qr) }}" class="rounded-2xl border border-slate-200 bg-white p-5 transition hover:border-indigo-200 hover:shadow-sm">
|
|
<div class="flex items-start justify-between gap-3">
|
|
<div class="min-w-0 flex-1">
|
|
<p class="truncate font-semibold text-slate-900">{{ $qr->label }}</p>
|
|
<p class="mt-0.5 truncate text-sm text-slate-500">{{ $c['business_name'] ?? '' }}</p>
|
|
@if(!empty($c['branch_label']))
|
|
<p class="mt-1 truncate text-xs text-slate-400">{{ $c['branch_label'] }}</p>
|
|
@endif
|
|
<p class="mt-2 truncate text-xs text-slate-400">{{ $qr->is_active ? 'Active' : 'Inactive' }} · {{ $qr->publicUrl() }}</p>
|
|
</div>
|
|
@if(!empty($previewDataUris[$qr->id]))
|
|
<img src="{{ $previewDataUris[$qr->id] }}" alt="" class="h-16 w-16 shrink-0 rounded-lg border border-slate-100 bg-white object-contain p-1">
|
|
@else
|
|
<div class="flex h-16 w-16 shrink-0 items-center justify-center rounded-lg {{ $qr->is_active ? 'bg-violet-100' : 'bg-slate-100 opacity-50' }}">
|
|
<svg class="h-8 w-8 text-violet-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h9.75c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-9.75A1.125 1.125 0 0 1 3.75 9.375v-4.5ZM3.75 14.625c0-.621.504-1.125 1.125-1.125h9.75c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125v-4.5ZM13.5 4.875c0-.621.504-1.125 1.125-1.125h9.75c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-9.75A1.125 1.125 0 0 1 13.5 9.375v-4.5ZM13.5 14.625c0-.621.504-1.125 1.125-1.125h9.75c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125v-4.5Z" />
|
|
</svg>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</a>
|
|
@endforeach
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</x-user-layout>
|