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

Fix payment QR edits and mobile payment sheet keyboard gap.
Deploy Ladill Mini / deploy (push) Successful in 40s
Details

Browse Source 
Persist payment QR business fields on update, handle is_active correctly, and keep the amount bottom sheet flush to the screen while moving with the keyboard on iOS.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
isaacclad
2026-06-07 23:16:55 +00:00
co-authored by Cursor
parent 2b81462e39
commit 99dae20743
6 changed files with 219 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/public/qr/payment-landing.blade.php
+21 -57
View File
@@ -17,68 +17,32 @@
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="min-h-screen bg-slate-50 font-sans text-slate-900 antialiased"
x-data="{
x-data="miniPaymentLanding({
payUrl: @js($payUrl),
csrf: @js($csrf),
amount: @js(old('amount')),
loading: false,
errorMsg: @js(session('error')),
showSheet: false,
checkoutUrl: '',
async submitPay() {
const value = parseFloat(this.amount);
if (!value || value <= 0) {
this.errorMsg = 'Enter an amount greater than zero.';
return;
}
this.errorMsg = '';
this.loading = true;
try {
const res = await fetch(@js($payUrl), {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
'X-CSRF-TOKEN': @js($csrf),
'X-Requested-With': 'XMLHttpRequest',
},
body: JSON.stringify({ amount: value }),
});
const data = await res.json().catch(() => ({}));
if (!res.ok || data.error || data.message) {
this.errorMsg = data.error || data.message || 'Could not start payment. Please try again.';
this.loading = false;
return;
}
if (!data.checkout_url) {
this.errorMsg = 'Could not start payment. Please try again.';
this.loading = false;
return;
}
if (window.innerWidth < 768) {
this.checkoutUrl = data.checkout_url;
this.showSheet = true;
this.loading = false;
} else {
window.location.href = data.checkout_url;
}
} catch (e) {
this.errorMsg = 'Network error. Please try again.';
this.loading = false;
}
}
}">
})">
{{-- Mobile: Ladill Mini branding + content-sized payment sheet --}}
<div class="md:hidden flex min-h-[100dvh] flex-col bg-slate-50">
<div class="flex flex-1 flex-col items-center justify-center px-6 pb-6 text-center pt-[max(2.5rem,env(safe-area-inset-top))]">
<img src="{{ asset('images/launcher-icons/mini.svg') }}?v={{ @filemtime(public_path('images/launcher-icons/mini.svg')) ?: '1' }}"
alt="Ladill Mini" class="h-14 w-14 object-contain">
<h1 class="mt-4 text-xl font-bold text-slate-900">{{ $businessName }}</h1>
@if(!empty($content['branch_label']))
<p class="mt-1 text-sm text-slate-500">{{ $content['branch_label'] }}</p>
@endif
{{-- Mobile: Ladill Mini branding + fixed payment sheet --}}
<div class="md:hidden">
<div class="fixed inset-0 overflow-hidden bg-slate-50">
<div class="flex h-full flex-col items-center justify-center px-6 pb-56 text-center pt-[max(2.5rem,env(safe-area-inset-top))]">
<img src="{{ asset('images/launcher-icons/mini.svg') }}?v={{ @filemtime(public_path('images/launcher-icons/mini.svg')) ?: '1' }}"
alt="Ladill Mini" class="h-14 w-14 object-contain">
<h1 class="mt-4 text-xl font-bold text-slate-900">{{ $businessName }}</h1>
@if(!empty($content['branch_label']))
<p class="mt-1 text-sm text-slate-500">{{ $content['branch_label'] }}</p>
@endif
</div>
</div>
<div class="shrink-0 rounded-t-3xl border-t border-slate-200/80 bg-white px-5 pb-[max(1.25rem,env(safe-area-inset-bottom))] pt-3 shadow-[0_-12px_40px_rgba(15,23,42,0.12)]">
<div class="mini-payment-bottom-bleed md:hidden"
:style="sheetBleedStyle"
aria-hidden="true"></div>
<div class="mini-payment-sheet rounded-t-3xl border-t border-slate-200/80 bg-white px-5 pt-3 shadow-[0_-12px_40px_rgba(15,23,42,0.12)] md:hidden"
:style="paymentSheetStyle">
<div class="mx-auto mb-4 h-1 w-10 rounded-full bg-slate-200"></div>
<div x-show="errorMsg" x-cloak class="mb-4 rounded-xl bg-red-50 px-4 py-3 text-sm text-red-700" x-text="errorMsg"></div>