Stop Paystack pre-modal flash on customer checkout.

Use the shared Inline sheet, hold busy until payment UI opens, and avoid locking page scroll during the handoff.

config/ladill_launcher.php

@@ -32,7 +32,6 @@ return [
         ['name' => 'Link', 'url' => 'https://link.'.$root.'/sso/connect?redirect='.urlencode('https://link.'.$root.'/dashboard'), 'icon' => 'link.svg'],
         ['name' => 'Frontdesk', 'url' => 'https://frontdesk.'.$root.'/sso/connect?redirect='.urlencode('https://frontdesk.'.$root.'/dashboard'), 'icon' => 'frontdesk.svg'],
         ['name' => 'Care', 'url' => 'https://care.'.$root.'/sso/connect?redirect='.urlencode('https://care.'.$root.'/dashboard'), 'icon' => 'care.svg'],
-        ['name' => 'One', 'url' => 'https://one.'.$root.'/sso/connect?redirect='.urlencode('https://one.'.$root.'/dashboard'), 'icon' => 'one.svg'],
         ['name' => 'Queue', 'url' => 'https://queue.'.$root.'/sso/connect?redirect='.urlencode('https://queue.'.$root.'/dashboard'), 'icon' => 'queue.svg'],
         ['name' => 'SMS', 'url' => 'https://sms.'.$root, 'icon' => 'sms.svg'],
         ['name' => 'Bird', 'url' => 'https://bird.'.$root, 'icon' => 'bird.svg'],

resources/js/app.js

@@ -165,6 +165,8 @@ Alpine.data('miniPaymentLanding', (config = {}) => ({
     errorMsg: config.errorMsg ?? '',
     showSheet: false,
     checkoutUrl: '',
+    accessCode: '',
+    returnUrl: '',
     paymentSheetStyle: '',
     sheetBleedStyle: '',
 
@@ -241,8 +243,10 @@ Alpine.data('miniPaymentLanding', (config = {}) => ({
                 this.loading = false;
                 return;
             }
-            this.checkoutUrl = data.checkout_url;
-                this.showSheet = true;
+            this.checkoutUrl = data.checkout_url || data.authorization_url || '';
+            this.accessCode = data.access_code || '';
+            this.returnUrl = data.callback_url || this.returnUrl || '';
+            this.showSheet = true; // loading cleared when payment UI opens (ladill-pay-opened)
         } catch (e) {
             window.LadillPayCheckout?.cancel?.(); this.errorMsg = 'Network error. Please try again.';
             this.loading = false;

resources/views/components/user/service-topup-modal.blade.php

@@ -56,8 +56,7 @@
                           }
 
                           this.checkoutUrl = data.checkout_url;
-                          this.showSheet = true;
-                          this.loading = false;
+                          this.showSheet = true; // loading cleared when payment UI opens (ladill-pay-opened)
                       } catch (error) {
                           window.LadillPayCheckout?.cancel?.(); this.errorMsg = 'Network error. Please try again.';
                           this.loading = false;

tests/Feature/ResponsivePaystackSheetTest.php

@@ -14,18 +14,56 @@ class ResponsivePaystackSheetTest extends TestCase
 
         $this->assertStringContainsString('role="dialog"', $html);
         $this->assertStringContainsString('aria-modal="true"', $html);
+        $this->assertStringContainsString('data-ladill-pay-sheet', $html);
+        $this->assertStringContainsString('data-ladill-pay-panel', $html);
+        $this->assertStringContainsString('data-ladill-pay-backdrop', $html);
+        $this->assertStringContainsString('data-ladill-pay-handle', $html);
         $this->assertStringContainsString('md:items-center', $html);
         $this->assertStringContainsString('rounded-t-2xl', $html);
-        $this->assertStringContainsString('md:h-[min(720px,85vh)]', $html);
+        $this->assertStringContainsString('md:rounded-2xl', $html);
+        $this->assertStringContainsString('md:max-w-lg', $html);
+        $this->assertStringContainsString('data-paystack-live', $html);
+        $this->assertStringContainsString('data-ladill-pay-close-live', $html);
+        $this->assertStringContainsString('data-ladill-pay-header-minimal', $html);
         $this->assertStringContainsString('Complete your payment', $html);
         $this->assertStringContainsString('safe-area-inset-bottom', $html);
         $this->assertStringContainsString('LadillPayCheckout', $html);
-        $this->assertStringContainsString('Continue to Paystack', $html);
-        $this->assertStringContainsString('ladill_pay_checkout', $html);
-        $this->assertStringContainsString('prepare:', $html);
+        $this->assertStringContainsString('resumeTransaction', $html);
+        $this->assertStringContainsString("\$watch('showSheet'", $html);
+        $this->assertStringContainsString('js.paystack.co/v2/inline.js', $html);
+        $this->assertStringContainsString('items-end justify-center md:items-center', $html);
+        $this->assertStringContainsString('rounded-t-2xl bg-white shadow-2xl md:max-w-lg md:rounded-2xl', $html);
+        $this->assertStringContainsString('ensurePaystackIframePermissions', $html);
+        $this->assertStringContainsString('installIframeAllowHook', $html);
+        $this->assertStringContainsString('fullscreen *', $html);
+        $this->assertStringNotContainsString("attributeFilter: ['allow', 'src', 'id', 'name', 'style', 'class']", $html);
+        $this->assertStringContainsString('childList only', $html);
+        $this->assertStringContainsString('Only write attributes when they actually change', $html);
+        $this->assertStringContainsString('Do not watch iframes or preload Paystack on every page', $html);
+        $this->assertStringContainsString('data-ladill-pay-mount', $html);
+        $this->assertStringContainsString('data-ladill-pay-body', $html);
+        $this->assertStringNotContainsString('styleCheckoutPinnedToRect', $html);
+        $this->assertStringNotContainsString('waitForPinTarget', $html);
+        $this->assertStringNotContainsString('placeCheckoutInMount', $html);
+        $this->assertStringNotContainsString('installAppendHook', $html);
+        $this->assertStringNotContainsString('__ladillContainPaystack', $html);
+        $this->assertStringNotContainsString('Node.prototype.appendChild', $html);
+        $this->assertStringNotContainsString('data-ladill-pay-inline-status', $html);
+        $this->assertStringNotContainsString('Please wait', $html);
+        $this->assertStringContainsString('Payment UI did not open', $html);
+        $this->assertStringContainsString('ladill-pay-opened', $html);
+        $this->assertStringContainsString('Only lock page scroll when OUR shell is visible', $html);
+        $this->assertStringContainsString('releaseBusy', $html);
+        $this->assertStringContainsString('markOpened', $html);
+        $this->assertStringNotContainsString('Continue to Paystack', $html);
+        $this->assertStringNotContainsString('window.open(', $html);
+        $this->assertStringNotContainsString('hidden w-full max-w-lg', $html);
         $this->assertStringNotContainsString('Paystack checkout', $html);
+        $this->assertStringNotContainsString('bg-transparent shadow-none', $html);
+        $this->assertStringNotContainsString('not in a separate browser', $html);
     }
 
+
     public function test_payment_return_escapes_popup_and_iframe_to_opener_or_top(): void
     {
         $html = view('public.payment-return', [