Fix payment QR edits and mobile payment sheet keyboard gap.

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>

resources/css/app.css

@@ -67,6 +67,39 @@ html.qr-mobile-page body {
     background-color: #fff;
 }
 
+/* Payment QR landing: lock scroll and keep the amount sheet flush to the screen bottom */
+@media (max-width: 767px) {
+    html.mini-payment-page,
+    html.mini-payment-page body {
+        overflow: hidden;
+        width: 100%;
+        height: 100%;
+    }
+
+    html.mini-payment-page body {
+        position: fixed;
+        inset: 0;
+    }
+
+    .mini-payment-sheet {
+        position: fixed;
+        inset-inline: 0;
+        bottom: 0;
+        z-index: 20;
+    }
+
+    .mini-payment-bottom-bleed {
+        position: fixed;
+        inset-inline: 0;
+        bottom: 0;
+        z-index: 19;
+        pointer-events: none;
+        background-color: #fff;
+        height: calc(12rem + env(safe-area-inset-bottom, 0px));
+        min-height: 8rem;
+    }
+}
+
 .mobile-stats-card {
     width: calc(66.666667% - 0.5rem);
 }

resources/js/app.js

@@ -144,6 +144,111 @@ Alpine.data('afia', (config = {}) => ({
     },
 }));
 
+function mobileKeyboardBottomOffset() {
+    const viewport = window.visualViewport;
+    if (!viewport) {
+        return 0;
+    }
+
+    return Math.max(0, Math.round(window.innerHeight - viewport.height - viewport.offsetTop));
+}
+
+Alpine.data('miniPaymentLanding', (config = {}) => ({
+    amount: config.amount ?? '',
+    loading: false,
+    errorMsg: config.errorMsg ?? '',
+    showSheet: false,
+    checkoutUrl: '',
+    paymentSheetStyle: '',
+    sheetBleedStyle: '',
+
+    init() {
+        this._syncSheet = () => {
+            if (window.innerWidth >= 768) {
+                this.paymentSheetStyle = '';
+                this.sheetBleedStyle = '';
+                return;
+            }
+
+            const offset = mobileKeyboardBottomOffset();
+            const safePad = offset > 0 ? '1.25rem' : 'max(1.25rem, env(safe-area-inset-bottom))';
+            this.paymentSheetStyle = `bottom: ${offset}px; padding-bottom: ${safePad};`;
+            this.sheetBleedStyle = `bottom: ${offset}px;`;
+        };
+
+        this._onViewportChange = () => this._syncSheet();
+        this._onFocusChange = () => {
+            requestAnimationFrame(this._syncSheet);
+            setTimeout(this._syncSheet, 150);
+            setTimeout(this._syncSheet, 350);
+        };
+
+        window.visualViewport?.addEventListener('resize', this._onViewportChange);
+        window.visualViewport?.addEventListener('scroll', this._onViewportChange);
+        document.addEventListener('focusin', this._onFocusChange);
+        document.addEventListener('focusout', this._onFocusChange);
+
+        if (window.innerWidth < 768) {
+            document.documentElement.classList.add('mini-payment-page');
+        }
+
+        this._syncSheet();
+    },
+
+    destroy() {
+        window.visualViewport?.removeEventListener('resize', this._onViewportChange);
+        window.visualViewport?.removeEventListener('scroll', this._onViewportChange);
+        document.removeEventListener('focusin', this._onFocusChange);
+        document.removeEventListener('focusout', this._onFocusChange);
+        document.documentElement.classList.remove('mini-payment-page');
+    },
+
+    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(config.payUrl, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    Accept: 'application/json',
+                    'X-CSRF-TOKEN': config.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;
+        }
+    },
+}));
+
 Alpine.data('topbarSearch', (config = {}) => ({
     query: config.initialQuery || '',
     results: Array.isArray(config.initialResults) ? config.initialResults : [],

resources/views/public/qr/payment-landing.blade.php

@@ -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>