fix(pos-selfpay): payment methods shown as modal in selfpay mode only

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,9 +1658,8 @@ export default function RegisterPage() {
             {error}
           </p>
         )}
-        {/* POS-SELFPAY-FLOW: in selfpay mode, hide payment methods until email is captured */}
+        {/* POS-SELFPAY-FLOW: in cashier mode show inline payment methods; in selfpay show modal */}
-        {(!isSelfpayMode || selfpayPaymentReady) && (
+        {!isSelfpayMode && (
-          <>
           <div className="mt-3 grid grid-cols-2 gap-2">
             {config.paymentMethods.map((method) => (
               <button
@@ -1673,8 +1673,9 @@ export default function RegisterPage() {
               </button>
             ))}
           </div>
+        )}
         {/* POS-SELFPAY-FLOW: confirm button after payment added in selfpay */}
-            {isSelfpayMode && selfpayPaymentReady && !paymentMethod && (
+        {isSelfpayMode && selfpayPaymentReady && !paymentMethod && !showSelfpayPaymentMethods && (
           <button
             type="button"
             onClick={() => void confirmSale()}
@@ -1684,8 +1685,6 @@ export default function RegisterPage() {
             {processing ? 'Confirmando…' : '✅ Confirmar e imprimir'}
           </button>
         )}
-          </>
-        )}
         <div className="mt-3 grid grid-cols-2 gap-2">
           {!isSelfpayMode && (
             <button
@@ -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}