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>
2026-06-07 23:16:55 +00:00
parent 2b81462e39
commit 99dae20743
6 changed files with 219 additions and 57 deletions
@@ -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 : [],