From 1e134a8e4b6b3aba2178331f87982468b1347893 Mon Sep 17 00:00:00 2001
From: isaacclad <sense.corporate@gmail.com>
Date: Sat, 6 Jun 2026 17:04:44 +0000
Subject: [PATCH] Add paystack-sheet partial for hosting account renewals.

The account overview page includes this partial for mobile Paystack checkout when exiting the panel.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../views/partials/paystack-sheet.blade.php   | 54 +++++++++++++++++++
 1 file changed, 54 insertions(+)
 create mode 100644 resources/views/partials/paystack-sheet.blade.php

diff --git a/resources/views/partials/paystack-sheet.blade.php b/resources/views/partials/paystack-sheet.blade.php
new file mode 100644
index 0000000..559bf73
--- /dev/null
+++ b/resources/views/partials/paystack-sheet.blade.php
@@ -0,0 +1,54 @@
+{{--
+    Paystack mobile bottom-sheet iframe.
+    Requires Alpine.js ancestor with: showSheet (bool), checkoutUrl (string).
+    On mobile (< md) the sheet slides up; on desktop nothing renders.
+--}}
+<template x-teleport="body">
+<div x-show="showSheet"
+     x-cloak
+     class="fixed inset-0 z-[9999] flex flex-col justify-end md:hidden"
+     role="dialog"
+     aria-modal="true">
+
+    {{-- Backdrop --}}
+    <div class="absolute inset-0 bg-black/60"
+         x-show="showSheet"
+         x-transition:enter="transition-opacity duration-300"
+         x-transition:enter-start="opacity-0"
+         x-transition:enter-end="opacity-100"
+         x-transition:leave="transition-opacity duration-200"
+         x-transition:leave-start="opacity-100"
+         x-transition:leave-end="opacity-0"
+         @click="showSheet = false">
+    </div>
+
+    {{-- Sheet --}}
+    <div class="relative flex flex-col bg-white rounded-t-2xl overflow-hidden"
+         style="height:90dvh"
+         x-show="showSheet"
+         x-transition:enter="transition-transform duration-300 ease-out"
+         x-transition:enter-start="translate-y-full"
+         x-transition:enter-end="translate-y-0"
+         x-transition:leave="transition-transform duration-200 ease-in"
+         x-transition:leave-start="translate-y-0"
+         x-transition:leave-end="translate-y-full">
+
+        <div class="flex shrink-0 items-center justify-between border-b border-slate-100 px-4 py-3">
+            <div class="absolute left-1/2 top-2 h-1 w-10 -translate-x-1/2 rounded-full bg-slate-200"></div>
+            <p class="text-sm font-semibold text-slate-800">Complete Payment</p>
+            <button @click="showSheet = false"
+                    class="rounded-full p-1.5 text-slate-400 transition hover:bg-slate-100 hover:text-slate-700"
+                    aria-label="Close">
+                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/>
+                </svg>
+            </button>
+        </div>
+
+        <iframe :src="showSheet ? checkoutUrl : ''"
+                class="flex-1 w-full border-0"
+                allow="payment"
+                title="Paystack checkout"></iframe>
+    </div>
+</div>
+</template>