From e17a8d4de7141246969f04ae9865edc691252c5d Mon Sep 17 00:00:00 2001
From: Deploy <deploy@mercadodevida.com>
Date: Wed, 26 Aug 2026 22:20:12 +0200
Subject: [PATCH] fix(pos-selfpay): payment methods shown as modal in selfpay
 mode only

---
 project/apps/pos/src/app/(terminal)/page.tsx | 96 +++++++++++++++-----
 1 file changed, 72 insertions(+), 24 deletions(-)

diff --git a/project/apps/pos/src/app/(terminal)/page.tsx b/project/apps/pos/src/app/(terminal)/page.tsx
index a9fab9e..b5bafb6 100644
--- a/project/apps/pos/src/app/(terminal)/page.tsx
+++ b/project/apps/pos/src/app/(terminal)/page.tsx
@@ -144,6 +144,7 @@ export default function RegisterPage() {
   const [showSelfpayEmail, setShowSelfpayEmail] = useState(false);
   const [selfpayEmail, setSelfpayEmail] = useState('');
   const [selfpayPaymentReady, setSelfpayPaymentReady] = useState(false);
+  const [showSelfpayPaymentMethods, setShowSelfpayPaymentMethods] = useState(false);
   let toastTimer: ReturnType<typeof setTimeout> | undefined;
   const showAddedToast = (name: string) => {
     clearTimeout(toastTimer);
@@ -1657,34 +1658,32 @@ export default function RegisterPage() {
             {error}
           </p>
         )}
-        {/* POS-SELFPAY-FLOW: in selfpay mode, hide payment methods until email is captured */}
-        {(!isSelfpayMode || selfpayPaymentReady) && (
-          <>
-            <div className="mt-3 grid grid-cols-2 gap-2">
-              {config.paymentMethods.map((method) => (
-                <button
-                  key={method.id}
-                  type="button"
-                  onClick={() => setPaymentMethod(method)}
-                  disabled={cart.length === 0 || processing || remainingCents === 0}
-                  className={`min-h-14 rounded-xl px-2 font-bold text-white disabled:opacity-40 ${method.kind === 'cash' ? 'bg-green-600' : method.kind === 'card' ? 'bg-blue-600' : 'bg-slate-700'}`}
-                >
-                  {method.kind === 'cash' ? '💵' : method.kind === 'card' ? '💳' : '◉'} {method.label}
-                </button>
-              ))}
-            </div>
-            {/* POS-SELFPAY-FLOW: confirm button after payment added in selfpay */}
-            {isSelfpayMode && selfpayPaymentReady && !paymentMethod && (
+        {/* POS-SELFPAY-FLOW: in cashier mode show inline payment methods; in selfpay show modal */}
+        {!isSelfpayMode && (
+          <div className="mt-3 grid grid-cols-2 gap-2">
+            {config.paymentMethods.map((method) => (
               <button
+                key={method.id}
                 type="button"
-                onClick={() => void confirmSale()}
-                disabled={processing || cart.length === 0 || paidCents <= 0 || paidCents > totals.total}
-                className="mt-3 w-full min-h-16 rounded-xl bg-[#1B4332] text-lg font-bold text-white disabled:opacity-40"
+                onClick={() => setPaymentMethod(method)}
+                disabled={cart.length === 0 || processing || remainingCents === 0}
+                className={`min-h-14 rounded-xl px-2 font-bold text-white disabled:opacity-40 ${method.kind === 'cash' ? 'bg-green-600' : method.kind === 'card' ? 'bg-blue-600' : 'bg-slate-700'}`}
               >
-                {processing ? 'Confirmando…' : '✅ Confirmar e imprimir'}
+                {method.kind === 'cash' ? '💵' : method.kind === 'card' ? '💳' : '◉'} {method.label}
               </button>
-            )}
-          </>
+            ))}
+          </div>
+        )}
+        {/* POS-SELFPAY-FLOW: confirm button after payment added in selfpay */}
+        {isSelfpayMode && selfpayPaymentReady && !paymentMethod && !showSelfpayPaymentMethods && (
+          <button
+            type="button"
+            onClick={() => void confirmSale()}
+            disabled={processing || cart.length === 0 || paidCents <= 0 || paidCents > totals.total}
+            className="mt-3 w-full min-h-16 rounded-xl bg-[#1B4332] text-lg font-bold text-white disabled:opacity-40"
+          >
+            {processing ? 'Confirmando…' : '✅ Confirmar e imprimir'}
+          </button>
         )}
         <div className="mt-3 grid grid-cols-2 gap-2">
           {!isSelfpayMode && (
@@ -1782,6 +1781,7 @@ export default function RegisterPage() {
                 e.preventDefault();
                 setShowSelfpayEmail(false);
                 setSelfpayPaymentReady(true);
+                setShowSelfpayPaymentMethods(true);
               }}
               className="space-y-4"
             >
@@ -1810,6 +1810,7 @@ export default function RegisterPage() {
                   setSelfpayEmail('');
                   setShowSelfpayEmail(false);
                   setSelfpayPaymentReady(true);
+                  setShowSelfpayPaymentMethods(true);
                 }}
                 className="w-full rounded-xl border border-gray-300 py-2 text-sm font-medium text-gray-500"
               >
@@ -1820,6 +1821,53 @@ export default function RegisterPage() {
         </div>
       )}
 
+      {/* POS-SELFPAY-FLOW: payment methods modal in selfpay mode */}
+      {showSelfpayPaymentMethods && isSelfpayMode && (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4"
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="selfpay-payment-title"
+        >
+          <div className="w-full max-w-md space-y-4 rounded-2xl bg-white p-6 shadow-2xl">
+            <div className="flex items-start justify-between gap-4">
+              <div>
+                <p className="text-sm font-semibold text-[#2D6A4F]">
+                  Total {formatPrice(totals.total)}
+                </p>
+                <h2 id="selfpay-payment-title" className="text-2xl font-bold text-gray-900">
+                  ¿Cómo quieres pagar?
+                </h2>
+              </div>
+              <button
+                type="button"
+                onClick={() => setShowSelfpayPaymentMethods(false)}
+                className="min-h-12 min-w-12 rounded-xl bg-gray-100 text-xl"
+                aria-label="Cerrar"
+              >
+                ✕
+              </button>
+            </div>
+            <div className="grid grid-cols-2 gap-2">
+              {config.paymentMethods.map((method) => (
+                <button
+                  key={method.id}
+                  type="button"
+                  onClick={() => {
+                    setShowSelfpayPaymentMethods(false);
+                    setPaymentMethod(method);
+                  }}
+                  disabled={remainingCents === 0}
+                  className={`min-h-16 rounded-xl px-2 font-bold text-white disabled:opacity-40 ${method.kind === 'cash' ? 'bg-green-600' : method.kind === 'card' ? 'bg-blue-600' : 'bg-slate-700'}`}
+                >
+                  {method.kind === 'cash' ? '💵' : method.kind === 'card' ? '💳' : '◉'} {method.label}
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+      )}
+
       {paymentMethod && (
         <PaymentModal
           method={paymentMethod}