rikrdo/mercadodevida
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Deploy
2026-08-26 22:20:12 +02:00
parent 971411e1c2
commit e17a8d4de7
1 changed files with 72 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
project/apps/pos/src/app/(terminal)/page.tsx
View File

@@ -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}