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>

app/Http/Controllers/Mini/PaymentQrController.php

@@ -92,6 +92,8 @@ class PaymentQrController extends Controller
             'is_active' => 'sometimes|boolean',
         ]);
 
+        $data['is_active'] = $request->boolean('is_active', $paymentQr->is_active);
+
         try {
             $this->manager->update($paymentQr, $data);
         } catch (RuntimeException $e) {

app/Services/Qr/QrCodeManagerService.php

@@ -371,6 +371,7 @@ class QrCodeManagerService
             QrCode::TYPE_APP => ['app_name', 'ios_url', 'android_url', 'web_url', 'app_icon'],
             QrCode::TYPE_BOOK => ['book_title', 'author', 'description', 'price_ghs'],
             QrCode::TYPE_WIFI => ['ssid', 'password', 'encryption', 'hidden'],
+            QrCode::TYPE_PAYMENT => ['business_name', 'branch_label', 'currency'],
             default => [],
         };
 

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 --}}
+    {{-- Mobile: Ladill Mini branding + fixed payment sheet --}}
-    <div class="md:hidden flex min-h-[100dvh] flex-col bg-slate-50">
+    <div class="md:hidden">
-        <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))]">
+        <div class="fixed inset-0 overflow-hidden bg-slate-50">
-            <img src="{{ asset('images/launcher-icons/mini.svg') }}?v={{ @filemtime(public_path('images/launcher-icons/mini.svg')) ?: '1' }}"
+            <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))]">
-                 alt="Ladill Mini" class="h-14 w-14 object-contain">
+                <img src="{{ asset('images/launcher-icons/mini.svg') }}?v={{ @filemtime(public_path('images/launcher-icons/mini.svg')) ?: '1' }}"
-            <h1 class="mt-4 text-xl font-bold text-slate-900">{{ $businessName }}</h1>
+                     alt="Ladill Mini" class="h-14 w-14 object-contain">
-            @if(!empty($content['branch_label']))
+                <h1 class="mt-4 text-xl font-bold text-slate-900">{{ $businessName }}</h1>
-                <p class="mt-1 text-sm text-slate-500">{{ $content['branch_label'] }}</p>
+                @if(!empty($content['branch_label']))
-            @endif
+                    <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>

tests/Unit/Services/Qr/PaymentQrUpdateTest.php

@@ -0,0 +1,57 @@
+<?php
+
+namespace Tests\Unit\Services\Qr;
+
+use App\Models\QrCode;
+use App\Models\User;
+use App\Services\Qr\QrCodeManagerService;
+use App\Services\Qr\QrImageGeneratorService;
+use App\Services\Qr\QrPayloadValidator;
+use App\Services\Qr\QrWalletBillingService;
+use Illuminate\Foundation\Testing\RefreshDatabase;
+use Illuminate\Support\Str;
+use Tests\TestCase;
+
+class PaymentQrUpdateTest extends TestCase
+{
+    use RefreshDatabase;
+
+    public function test_payment_qr_update_persists_business_fields(): void
+    {
+        $user = User::create([
+            'public_id' => (string) Str::uuid(),
+            'name' => 'Trader',
+            'email' => 'trader@example.com',
+        ]);
+
+        $qrCode = QrCode::create([
+            'user_id' => $user->id,
+            'short_code' => 'paytest01',
+            'type' => QrCode::TYPE_PAYMENT,
+            'label' => 'Till 1',
+            'payload' => [
+                'content' => [
+                    'business_name' => 'Old Shop',
+                    'branch_label' => 'Main',
+                    'currency' => 'GHS',
+                ],
+                'style' => [],
+            ],
+            'is_active' => true,
+        ]);
+
+        $manager = new QrCodeManagerService(
+            $this->createMock(QrWalletBillingService::class),
+            $this->createMock(QrImageGeneratorService::class),
+            new QrPayloadValidator(),
+        );
+
+        $updated = $manager->update($qrCode, [
+            'business_name' => 'New Shop',
+            'branch_label' => 'Accra Mall',
+        ]);
+
+        $this->assertSame('New Shop', $updated->content()['business_name']);
+        $this->assertSame('Accra Mall', $updated->content()['branch_label']);
+    }
+}