/* PhonePreview — a true iPhone (393×852 logical) shell framing the live wallet pass, auto-scaled to fit its pane so the studio never overflows. */ const { WalletPass: PP_WalletPass } = window.SpoonityWalletPassDesignSystem_de20b8; const PP_I18N = window.SpoonityI18n; // Loyalty fields the backend owns — never editable from the preview. const PP_LOCKED_LABELS = ["POINTS", "TIER"]; const PP_BACKDROPS = { wallet: "radial-gradient(120% 80% at 50% 8%, #f3eff7 0%, var(--background) 58%)", light: "var(--background)", // Rich, layered near-black with a purple cast — never flat #000. dark: "radial-gradient(130% 100% at 50% 0%, #1A1026 0%, #120D18 46%, #0F0A16 100%)", }; // Faint film grain so the gradients read as "expensive" rather than banded. const PP_GRAIN = "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\")"; function PP_hexToRgb(hex) { if (!hex || hex[0] !== "#") return "124,47,247"; const h = hex.length === 4 ? hex.slice(1).split("").map((c) => c + c).join("") : hex.slice(1, 7); const [r, g, b] = [0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16)); return [r, g, b].join(","); } function PhonePreview({ pass, setPass, lang = "en", backdrop = "wallet", showDevice = true, guides = false }) { const wrap = React.useRef(null); const inner = React.useRef(null); const [scale, setScale] = React.useState(1); const [slot, setSlot] = React.useState(null); const SlotEditor = window.StudioSlotEditor; React.useLayoutEffect(() => { const recompute = () => { if (!wrap.current || !inner.current) return; const ww = wrap.current.clientWidth - 36; const wh = wrap.current.clientHeight - 36; const iw = inner.current.offsetWidth; const ih = inner.current.offsetHeight; // Allow a touch of upscale so the device fills the stage with confidence // instead of floating small in dead space. if (iw && ih) setScale(Math.min(1.14, ww / iw, wh / ih)); }; recompute(); const ro = new ResizeObserver(recompute); if (wrap.current) ro.observe(wrap.current); return () => ro.disconnect(); }, [showDevice, pass.passStyle, !!pass.barcode]); const isDark = backdrop === "dark"; // Apple Wallet's own chrome flips with the system appearance: dark canvas, // light text, and an inverted "Add to Wallet" button. The pass face keeps // the designer's colors either way. const chrome = isDark ? "#f5f5f7" : "#1d1d1f"; const Screen = (
{showDevice && (
)} {showDevice && (
9:41 􀙇 􀛪 􀛨
)}
{PP_I18N.T("wallet")}
{/* company / name / iconSrc are backend-contract fields, not pass-face props. Field labels are translated for DISPLAY only — state stays English. */} {(() => { const { company, name, iconSrc, ...face } = pass; // Display the custom title (labelText) when set, otherwise the // translated default. `label` stays the stable identity for the // backend / lock detection; only the shown text changes. const tr = (f) => { if (!f) return f; const custom = f.labelText && f.labelText.trim(); return { ...f, label: custom ? f.labelText : (f.label ? PP_I18N.passLabel(lang, f.label) : f.label) }; }; const disp = { ...face, headerFields: (face.headerFields || []).map(tr), primaryFields: (face.primaryFields || []).map(tr), secondaryFields: (face.secondaryFields || []).map(tr), auxiliaryFields: (face.auxiliaryFields || []).map(tr), }; // POINTS and TIER are backend-driven loyalty data — lock them so they // can't be clicked/edited from the live preview. const lockField = (group, index) => { const f = (face[group] || [])[index]; return !!(f && PP_LOCKED_LABELS.includes(String(f.label || "").toUpperCase())); }; // Keyed by pass type so React remounts it on a switch, replaying the // gentle flip-in — the studio's one little moment of delight. return (
); })()}
{PP_I18N.T("addToWallet")}
); const passRgb = PP_hexToRgb(pass.backgroundColor); const spotlight = isDark ? "radial-gradient(60% 50% at 50% 42%, rgba(255,255,255,.10), transparent 70%)" : "radial-gradient(58% 48% at 50% 44%, rgba(255,255,255,.55), transparent 68%)"; return (
{/* Stage atmosphere — all behind the device, none interactive. */}