"use client"; import { useEffect, useRef, useState } from "react"; import { fmtINR } from "@/lib/format"; import { confirmMockPayment } from "./actions"; type Method = "card" | "upi" | "upi-qr"; const UPI_PAYEE = "elitezonej@razorpay"; const UPI_PAYEE_NAME = "Elite Zone J"; function buildUpiUri(amount: number, orderId: string): string { // Standard UPI deep-link format. Real Razorpay would generate this server- // side; in sandbox we render a static QR encoding it so flows match prod. const params = new URLSearchParams({ pa: UPI_PAYEE, pn: UPI_PAYEE_NAME, am: amount.toFixed(2), cu: "INR", tn: `Order ${orderId}`, }); return `upi://pay?${params.toString()}`; } type Phase = "idle" | "stitching" | "sealed" | "error"; export default function MockPaymentSheet({ orderId, token, amount, email, onSuccess, onClose, }: { orderId: string; token: string; amount: number; email?: string; onSuccess: (orderId: string) => void; onClose: () => void; }) { const [method, setMethod] = useState("card"); const [phase, setPhase] = useState("idle"); const [err, setErr] = useState(null); const [card, setCard] = useState(""); const [exp, setExp] = useState(""); const [cvv, setCvv] = useState(""); const [upi, setUpi] = useState(""); const firstFieldRef = useRef(null); const dialogRef = useRef(null); // Body scroll-lock + Escape to dismiss + initial focus. useEffect(() => { const prev = document.body.style.overflow; document.body.style.overflow = "hidden"; const t = setTimeout(() => firstFieldRef.current?.focus(), 320); const onKey = (e: KeyboardEvent) => { if (e.key === "Escape" && phase !== "stitching" && phase !== "sealed") onClose(); }; window.addEventListener("keydown", onKey); return () => { document.body.style.overflow = prev; clearTimeout(t); window.removeEventListener("keydown", onKey); }; }, [onClose, phase]); const busy = phase === "stitching" || phase === "sealed"; async function pay() { setErr(null); setPhase("stitching"); // Let the seam "sew" before the server settles — pure theatre, but the // confirm itself is a real, idempotent server action. const settle = confirmMockPayment({ orderId, token }); await new Promise((r) => setTimeout(r, 2100)); const res = await settle; if (res.ok) { setPhase("sealed"); setTimeout(() => onSuccess(res.orderId ?? orderId), 1450); } else { setErr(res.error ?? "Payment could not be completed."); setPhase("error"); } } return (
{ if (e.target === e.currentTarget && !busy) onClose(); }} >
Amount due {fmtINR(amount)} Order {orderId} {email ? ` · ${email}` : ""}
{phase !== "sealed" ? ( <>
{(["card", "upi", "upi-qr"] as Method[]).map((m) => ( ))}
{method === "card" ? ( <>
) : method === "upi" ? ( ) : (
{/* Sandbox mock QR: a static 25×25 grid (visually QR-shaped, not scannable). Real Razorpay renders a scannable QR for the upi:// deep-link below; this is theatre. */} {/* Three finder squares (top-left, top-right, bottom-left) */} {([[0, 0], [18, 0], [0, 18]] as const).map(([x, y], i) => ( ))} {/* Pseudo-random data modules — deterministic via order id */} {Array.from({ length: 25 * 25 }).map((_, idx) => { const x = idx % 25; const y = Math.floor(idx / 25); // Skip the three finder areas (8x8 with separator) + their inner pad const inFinder = (x < 8 && y < 8) || (x > 16 && y < 8) || (x < 8 && y > 16); if (inFinder) return null; // Deterministic bit: hash of (orderId, x, y) → on/off const h = (orderId.charCodeAt((x + y * 7) % orderId.length || 1) + x * 13 + y * 7) & 1; if (!h) return null; return ; })}
Pay to {UPI_PAYEE} {UPI_PAYEE_NAME}
{ // On desktop the upi:// scheme has no handler; let the // mock "pay" flow complete instead of leaving a dead link. e.preventDefault(); }} > Open in UPI app
)}

Sandbox — enter anything, or leave blank. No card is charged. Drop live Razorpay keys into the environment and this screen is replaced by the real gateway automatically.

{/* The running-stitch seam — sews shut while processing */} {err && (

{err}

)}

Secured by the Elite Zone J atelier desk · 256-bit theatre

) : (

Payment received

Order {orderId} is confirmed. Redirecting to your receipt…

)}
); }