\n \n \n\n",[203],"56ad6b8a-0b53-11f1-b9fe-42dde27851f2","html.ts","6708a5e0-0b52-11f1-ab1a-42dde27851f2",62,["D",1771258798950],"import app from \"./app.ts\";\nimport styles from \"./styles.ts\";\n\nexport default async function html(_req: Request): Promise {\n const [cssRes, appRes] = await Promise.all([styles(_req), app(_req)]);\n let css = await cssRes.text();\n let js = await appRes.text();\n // Prevent in embedded script from closing the tag in HTML\n js = js.replace(/<\\/script/gi, \"<\\\\/script\");\n const body = `\n\n\n \n \n Wero Quick Shop\n \n\n\n

\n \n\n`;\n return new Response(body, {\n headers: { \"Content-Type\": \"text/html; charset=utf-8\" },\n });\n}\n",[210],"b7cee722-0b53-11f1-988a-42dde27851f2","app.ts","96dd7e76-0b52-11f1-9ad2-42dde27851f2",["D",1771258961905],3,"// Returns the Wero Quick Shop app as a single ESM module (React + Framer Motion from esm.sh)\nexport default async function app(_req: Request): Promise {\n // Use string concatenation to avoid any template literal interpolation issues\n const js = [\n 'import React from \"https://esm.sh/react@18.2.0\";',\n 'import { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";',\n 'import { motion, AnimatePresence } from \"https://esm.sh/framer-motion@11.0.0\";',\n \"\",\n 'const productImage = \"https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=400\";',\n \"\",\n \"function ProductCard() {\",\n ' return React.createElement(\"div\", { className: \"flex flex-col items-center\" },',\n ' React.createElement(\"div\", { className: \"relative w-64 h-64 mb-8\" },',\n ' React.createElement(\"img\", { src: productImage, alt: \"Headphones\", className: \"w-full h-full object-contain\" })',\n \" ),\",\n ' React.createElement(\"p\", { className: \"text-sm font-semibold text-primary uppercase tracking-wider\" }, \"New Release\"),',\n ' React.createElement(\"h1\", { className: \"text-4xl font-bold text-foreground\" }, \"SoundMax Pro\"),',\n ' React.createElement(\"p\", { className: \"text-lg text-muted-foreground max-w-md\" }, \"Premium wireless noise-canceling headphones.\"),',\n ' React.createElement(\"div\", { className: \"pt-6 flex gap-2 items-baseline\" },',\n ' React.createElement(\"span\", { className: \"text-4xl font-bold text-foreground\" }, \"\\u20AC249\"),',\n ' React.createElement(\"span\", { className: \"text-lg text-muted-foreground line-through\" }, \"\\u20AC349\"),',\n ' React.createElement(\"span\", { className: \"px-3 py-1 text-sm font-semibold rounded-full\", style: { background: \"hsl(173 58% 39% / 0.15)\", color: \"var(--primary)\" } }, \"Save \\u20AC100\")',\n \" )\",\n \" );\",\n \"}\",\n \"\",\n 'const klarnaOptions = [{ name: \"Klarna Balance\" }, { name: \"Klarna Pay Later\" }];',\n 'const banks = [\"Deutsche Bank\", \"Postbank\", \"Sparkasse\", \"Volksbanken Raiffeisenbanken\", \"BBBank\", \"GLS Gemeinschaftsbank eG\", \"PSD Banken\"];',\n \"\",\n \"function WeroBankSelection({ onBack, onSelectBank }) {\",\n \" const [klarnaOpen, setKlarnaOpen] = React.useState(false);\",\n \" const [search, setSearch] = React.useState(\\\"\\\");\",\n \" const showKlarna = !search || \\\"klarna\\\".includes(search.toLowerCase()) || klarnaOptions.some(function(o) { return o.name.toLowerCase().includes(search.toLowerCase()); });\",\n \" const filteredBanks = banks.filter(function(b) { return b.toLowerCase().includes(search.toLowerCase()); });\",\n ' return React.createElement(\"div\", { className: \"fixed inset-0 z-50 flex items-center justify-center\", style: { background: \"rgba(0,0,0,0.5)\" } },',\n \" React.createElement(motion.div, { initial: { opacity: 0, scale: 0.95 }, animate: { opacity: 1, scale: 1 }, className: \\\"w-full max-w-[420px] max-h-[844px] h-full flex flex-col rounded-3xl overflow-hidden shadow-2xl\\\", style: { backgroundColor: \\\"#F7F7F7\\\" } },\",\n ' React.createElement(\"div\", { className: \"flex items-center justify-between p-4 border-b\", style: { borderColor: \"#E5E5E5\" } },',\n ' React.createElement(\"button\", { onClick: onBack, className: \"p-2\" }, \"\\u2190\"),',\n ' React.createElement(\"h1\", { className: \"text-lg font-semibold\" }, \"Pay with Wero\"),',\n ' React.createElement(\"span\", { className: \"text-sm text-muted-foreground\" }, \"EN\")',\n \" ),\",\n ' React.createElement(\"div\", { className: \"flex-1 overflow-auto p-4\" },',\n ' React.createElement(\"h2\", { className: \"text-2xl font-bold mb-4\" }, \"Select your bank\"),',\n ' React.createElement(\"input\", { type: \"text\", placeholder: \"Search\", value: search, onChange: function(e) { return setSearch(e.target.value); }, className: \"w-full p-2 mb-4 border-b\", style: { borderColor: \"#CCC\" } }),',\n \" showKlarna && React.createElement(\\\"div\\\", { className: \\\"mb-2 rounded-xl overflow-hidden\\\", style: { border: \\\"1px solid #F0F0F0\\\", background: \\\"#fff\\\" } },\",\n ' React.createElement(\"button\", { type: \"button\", onClick: function() { return setKlarnaOpen(!klarnaOpen); }, className: \"w-full flex items-center gap-4 p-4 text-left\" },',\n ' React.createElement(\"div\", { className: \"w-12 h-12 rounded flex items-center justify-center\", style: { background: \"#FFA8CD\" } }, \"K\"),',\n ' React.createElement(\"span\", { className: \"flex-1 font-medium\" }, \"Klarna\"),',\n ' React.createElement(\"span\", { style: { transform: klarnaOpen ? \"rotate(180deg)\" : \"none\" } }, \"\\u25BC\")',\n \" ),\",\n \" klarnaOpen && klarnaOptions.map(function(o) { return React.createElement(\\\"button\\\", { key: o.name, type: \\\"button\\\", onClick: function() { return onSelectBank(o.name); }, className: \\\"w-full flex items-center gap-4 py-3 px-4 pl-[4.5rem] text-left\\\", style: { background: \\\"#FAFAFA\\\", borderBottom: \\\"1px solid #F0F0F0\\\" } }, o.name); })\",\n \" ),\",\n \" showKlarna && filteredBanks.length ? React.createElement(\\\"div\\\", { className: \\\"my-4 border-b\\\", style: { borderColor: \\\"#E5E5E5\\\" } }) : null,\",\n ' filteredBanks.map(function(b) { return React.createElement(\"button\", { key: b, type: \"button\", onClick: function() { return onSelectBank(b); }, className: \"w-full flex items-center gap-4 p-4 rounded-xl text-left mb-2\", style: { background: \"#fff\", border: \"1px solid #F0F0F0\" } }, b); })',\n \" ),\",\n ' React.createElement(\"div\", { className: \"p-4 flex items-start gap-2\", style: { background: \"#FFE566\" } },',\n ' React.createElement(\"p\", { className: \"flex-1 text-sm\" }, \"Wero uses strictly necessary cookies. See our Cookie Policy.\"),',\n ' React.createElement(\"button\", { type: \"button\" }, \"\\u00D7\")',\n \" )\",\n \" )\",\n \" );\",\n \"}\",\n \"\",\n \"function KlarnaHPP({ onBack, onComplete, product }) {\",\n \" const [step, setStep] = React.useState(\\\"welcome\\\");\",\n \" const [phone, setPhone] = React.useState(\\\"\\\");\",\n \" React.useEffect(function() { var t = setTimeout(function() { return setStep(\\\"welcome\\\"); }, 800); return function() { return clearTimeout(t); }; }, []);\",\n \" if (step === \\\"welcome\\\") return React.createElement(\\\"div\\\", { className: \\\"fixed inset-0 z-50 flex flex-col items-center justify-center\\\", style: { background: \\\"#F9F8F5\\\" } },\",\n ' React.createElement(\"button\", { onClick: onBack, className: \"absolute top-4 right-4 p-2\" }, \"\\u2715\"),',\n ' React.createElement(\"h1\", { className: \"text-2xl font-bold mb-2\" }, \"Welcome to Klarna\"),',\n ' React.createElement(\"p\", { className: \"text-muted-foreground mb-4\" }, \"Verify your phone number\"),',\n ' React.createElement(\"input\", { type: \"tel\", placeholder: \"+31 6 12 34 56 78\", value: phone, onChange: function(e) { return setPhone(e.target.value); }, className: \"w-full p-4 rounded-2xl border mb-4\" }),',\n ' React.createElement(\"button\", { onClick: function() { return setStep(\\\"confirm\\\"); }, disabled: phone.length < 6, className: \"w-full py-4 rounded-full font-semibold text-white\", style: { background: \"#0B051D\" } }, \"Continue\")',\n \" );\",\n \" if (step === \\\"confirm\\\") return React.createElement(\\\"div\\\", { className: \\\"fixed inset-0 z-50 flex flex-col p-6 overflow-auto\\\", style: { background: \\\"#F9F8F5\\\" } },\",\n ' React.createElement(\"button\", { onClick: onBack, className: \"self-end p-2 mb-4\" }, \"\\u2715\"),',\n ' React.createElement(\"h1\", { className: \"text-2xl font-bold mb-4\" }, \"Review and pay\"),',\n ' React.createElement(\"div\", { className: \"p-4 rounded-xl mb-4\", style: { background: \"#fff\", border: \"1px solid #E5E5E5\" } },',\n ' React.createElement(\"p\", { className: \"font-medium\" }, product === \"Klarna Pay Later\" ? \"Pay later in 30 days\" : product),',\n ' React.createElement(\"p\", { className: \"text-sm\", style: { color: \"green\" } }, product === \"Klarna Balance\" ? \"\\u20AC 1,250.00 available\" : \"Pay in 30 days\")',\n \" ),\",\n ' React.createElement(\"div\", { className: \"mb-4\" }, React.createElement(\"span\", { className: \"text-3xl font-bold\" }, \"\\u20AC 249\")),',\n \" React.createElement(\\\"button\\\", { onClick: function() { setStep(\\\"processing\\\"); setTimeout(onComplete, 2000); }, className: \\\"w-full py-4 rounded-full font-semibold text-white\\\", style: { background: \\\"#0B051D\\\" } }, \\\"Pay with Klarna\\\")\",\n \" );\",\n ' return React.createElement(\"div\", { className: \"fixed inset-0 z-50 flex flex-col items-center justify-center\", style: { background: \"#F9F8F5\" } },',\n ' React.createElement(\"div\", { className: \"w-16 h-16 rounded-full flex items-center justify-center mb-4\", style: { background: \"#FFA8CD\" } }, \"K\"),',\n ' React.createElement(\"p\", { className: \"font-semibold\" }, \"Processing payment...\")',\n \" );\",\n \"}\",\n \"\",\n \"function CheckoutForm({ onBack }) {\",\n \" const [step, setStep] = React.useState(\\\"details\\\");\",\n \" const [selectedBank, setSelectedBank] = React.useState(\\\"\\\");\",\n \" const [form, setForm] = React.useState({ email: \\\"\\\", firstName: \\\"\\\", lastName: \\\"\\\", phone: \\\"\\\" });\",\n \" function update(e) { setForm(function(f) { return Object.assign({}, f, {}); }); var k = e.target.name; setForm(function(f) { var o = {}; o[k] = e.target.value; return Object.assign({}, f, o); }); }\",\n \" if (step === \\\"wero\\\") return React.createElement(WeroBankSelection, { onBack: function() { return setStep(\\\"details\\\"); }, onSelectBank: function(bank) { setSelectedBank(bank); if (bank === \\\"Klarna Balance\\\" || bank === \\\"Klarna Pay Later\\\") { setStep(\\\"klarna\\\"); } else { setStep(\\\"processing\\\"); setTimeout(function() { return setStep(\\\"failed\\\"); }, 2500); } } });\",\n \" if (step === \\\"klarna\\\") return React.createElement(KlarnaHPP, { onBack: function() { return setStep(\\\"wero\\\"); }, onComplete: function() { return setStep(\\\"success\\\"); }, product: selectedBank });\",\n \" if (step === \\\"processing\\\") return React.createElement(\\\"div\\\", { className: \\\"text-center py-12\\\" },\",\n ' React.createElement(\"div\", { className: \"mx-auto w-24 h-24 rounded-3xl flex items-center justify-center mb-8\", style: { background: \"#FFE566\" } }, \"W\"),',\n ' React.createElement(\"h2\", { className: \"text-2xl font-bold mb-2\" }, \"Processing Payment\"),',\n ' React.createElement(\"p\", { className: \"text-muted-foreground\" }, \"Confirming \\u20AC249 via Wero...\")',\n \" );\",\n \" if (step === \\\"success\\\") return React.createElement(\\\"div\\\", { className: \\\"text-center py-12\\\" },\",\n ' React.createElement(\"div\", { className: \"mx-auto w-24 h-24 rounded-full bg-primary flex items-center justify-center mb-8 shadow-wero text-primary-foreground text-4xl\" }, \"\\u2713\"),',\n ' React.createElement(\"h2\", { className: \"text-3xl font-bold mb-2\" }, \"Payment Successful!\"),',\n \" React.createElement(\\\"p\\\", { className: \\\"text-muted-foreground mb-8\\\" }, \\\"Thank you, \\\" + form.firstName + \\\"! Confirmation sent to \\\" + form.email),\",\n ' React.createElement(\"button\", { onClick: onBack, className: \"btn btn-primary px-8 py-3\" }, \"Back to product\")',\n \" );\",\n \" if (step === \\\"failed\\\") return React.createElement(\\\"div\\\", { className: \\\"text-center py-12\\\" },\",\n ' React.createElement(\"div\", { className: \"mx-auto w-24 h-24 rounded-full bg-destructive flex items-center justify-center mb-8 text-white text-4xl\" }, \"\\u2715\"),',\n ' React.createElement(\"h2\", { className: \"text-3xl font-bold mb-2\" }, \"Payment Failed\"),',\n ' React.createElement(\"button\", { onClick: function() { return setStep(\\\"wero\\\"); }, className: \"btn btn-primary px-8 py-3 mt-4\" }, \"Try Again\")',\n \" );\",\n \" return React.createElement(motion.div, { initial: { opacity: 0, x: 50 }, animate: { opacity: 1, x: 0 }, className: \\\"w-full max-w-lg mx-auto\\\" },\",\n ' React.createElement(\"button\", { onClick: onBack, className: \"flex gap-2 text-muted-foreground mb-6\" }, \"\\u2190 Back to product\"),',\n ' React.createElement(\"h2\", { className: \"text-3xl font-bold mb-2\" }, \"Checkout\"),',\n ' React.createElement(\"p\", { className: \"text-muted-foreground mb-8\" }, \"Complete your purchase with Wero\"),',\n ' React.createElement(\"div\", { className: \"bg-secondary rounded-2xl p-4 mb-8 flex gap-4\" },',\n ' React.createElement(\"img\", { src: productImage, alt: \"SoundMax Pro\", className: \"w-20 h-20 object-cover rounded-xl\" }),',\n ' React.createElement(\"div\", null, React.createElement(\"h3\", { className: \"font-semibold\" }, \"SoundMax Pro\"), React.createElement(\"p\", { className: \"text-sm text-muted-foreground\" }, \"Wireless Headphones\"), React.createElement(\"p\", { className: \"text-lg font-bold\" }, \"\\u20AC249\"))',\n \" ),\",\n ' React.createElement(\"form\", { onSubmit: function(e) { e.preventDefault(); setStep(\"wero\"); }, className: \"space-y-4\" },',\n ' React.createElement(\"div\", null, React.createElement(\"label\", { className: \"text-sm font-medium\" }, \"Email\"), React.createElement(\"input\", { name: \"email\", type: \"email\", placeholder: \"your@email.com\", value: form.email, onChange: update, required: true, className: \"mt-1\" })),',\n ' React.createElement(\"div\", { className: \"grid grid-cols-2 gap-4\" }, React.createElement(\"div\", null, React.createElement(\"label\", { className: \"text-sm font-medium\" }, \"First Name\"), React.createElement(\"input\", { name: \"firstName\", placeholder: \"John\", value: form.firstName, onChange: update, required: true, className: \"mt-1\" })), React.createElement(\"div\", null, React.createElement(\"label\", { className: \"text-sm font-medium\" }, \"Last Name\"), React.createElement(\"input\", { name: \"lastName\", placeholder: \"Doe\", value: form.lastName, onChange: update, required: true, className: \"mt-1\" }))),',\n ' React.createElement(\"div\", null, React.createElement(\"label\", { className: \"text-sm font-medium\" }, \"Phone\"), React.createElement(\"input\", { name: \"phone\", type: \"tel\", placeholder: \"+49 123 456 7890\", value: form.phone, onChange: update, required: true, className: \"mt-1\" })),',\n ' React.createElement(\"button\", { type: \"submit\", className: \"w-full h-14 text-lg font-semibold btn-primary rounded-xl\" }, \"Continue to Wero\")',\n \" )\",\n \" );\",\n \"}\",\n \"\",\n \"function Index() {\",\n \" const [view, setView] = React.useState(\\\"product\\\");\",\n ' return React.createElement(\"div\", { className: \"min-h-screen\" },',\n ' React.createElement(\"header\", { className: \"fixed top-0 left-0 right-0 z-50 border-b border py-4 px-4 flex justify-between items-center backdrop-blur-lg bg-background/80\" },',\n ' React.createElement(\"span\", { className: \"text-xl font-bold\" }, \"SoundMax\"),',\n ' React.createElement(\"span\", { className: \"text-sm text-muted-foreground\" }, \"Premium Audio\")',\n \" ),\",\n ' React.createElement(\"main\", { className: \"container pt-24 pb-12 min-h-screen flex items-center\" },',\n \" React.createElement(AnimatePresence, { mode: \\\"wait\\\" },\",\n \" view === \\\"product\\\" && React.createElement(motion.div, { key: \\\"product\\\", initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0, x: -100 }, className: \\\"w-full max-w-4xl mx-auto\\\" },\",\n \" React.createElement(ProductCard),\",\n \" React.createElement(motion.div, { initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, transition: { delay: 0.5 }, className: \\\"mt-10 flex flex-col items-center gap-4\\\" },\",\n ' React.createElement(\"button\", { onClick: function() { return setView(\"checkout\"); }, className: \"h-16 px-12 text-lg font-semibold btn-primary rounded-xl flex items-center gap-2\" }, \"\\\\u{1F6D2} Checkout\"),',\n ' React.createElement(\"div\", { className: \"flex gap-4 text-sm text-muted-foreground\" }, \"\\u2713 Free shipping\", \"\\u2713 30-day returns\", \"\\u2713 Instant payment\")',\n \" )\",\n \" ),\",\n \" view === \\\"checkout\\\" && React.createElement(motion.div, { key: \\\"checkout\\\", initial: { opacity: 0, x: 100 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0 }, className: \\\"w-full\\\" }, React.createElement(CheckoutForm, { onBack: function() { return setView(\\\"product\\\"); } }))\",\n \" )\",\n \" ),\",\n ' React.createElement(\"footer\", { className: \"fixed bottom-0 left-0 right-0 border-t border py-4 px-4 text-center text-xs text-muted-foreground bg-background/80 backdrop-blur-lg\" }, \"\\\\u{1F512} Free shipping\")',\n \" );\",\n \"}\",\n \"\",\n 'createRoot(document.getElementById(\"root\")).render(React.createElement(Index));',\n ].join(\"\\n\");\n return new Response(js, {\n headers: { \"Content-Type\": \"application/javascript; charset=utf-8\" },\n });\n}\n",[217],"31988624-0b51-11f1-9cb2-42dde27851f2","README.md","319886e2-0b51-11f1-9cb2-42dde27851f2",5,["D",1771257877744],"# Wero Quick Shop\n\nMockup checkout: product page → Wero bank selection (Klarna dropdown + banks) → Klarna HPP simulation or processing.\n\n**Run locally:** Copy all files from this val into a Vite + React + TS project. Ensure `@/` points to `src/`. Add assets: `src/assets/product-headphones.jpg`, `src/assets/klarna-logo.png`, and `public/fonts/` for GT Walsheim if needed.\n\n**Stack:** Vite, React 18, Tailwind, Framer Motion, Radix UI (shadcn), React Router.\n",[224],"38f9aba0-0b51-11f1-969e-42dde27851f2","src","38f9ac68-0b51-11f1-969e-42dde27851f2",8,["D",1771257890115],"directory",[231],"pulls","branches","forks","envVars",{"_244":82,"_246":82},"connections",{"_244":82,"_245":82},"count","unfilledCount","emptyCount",{"_27":230,"_13":231,"_56":232,"_37":-5,"_29":30,"_154":233,"_156":78,"_31":620,"_33":82,"_59":235,"_158":-5,"_61":24,"_160":-5,"_297":621,"_117":622},{"_27":615,"_13":432,"_56":426,"_37":232,"_29":30,"_154":616,"_156":78,"_31":617,"_33":82,"_59":235,"_158":-5,"_61":24,"_160":-5,"_297":618,"_117":619},{"_27":610,"_13":545,"_56":539,"_37":426,"_29":30,"_154":611,"_156":78,"_31":612,"_33":82,"_59":235,"_158":-5,"_61":24,"_160":-5,"_297":613,"_117":614},{"_27":602,"_13":603,"_56":604,"_37":539,"_29":30,"_154":605,"_156":78,"_31":606,"_33":82,"_59":47,"_158":607,"_61":24,"_160":-5,"_297":608,"_117":609},{"_27":594,"_13":595,"_56":596,"_37":539,"_29":30,"_154":597,"_156":78,"_31":598,"_33":82,"_59":47,"_158":599,"_61":24,"_160":-5,"_297":600,"_117":601},{"_27":586,"_13":587,"_56":588,"_37":539,"_29":30,"_154":589,"_156":78,"_31":590,"_33":82,"_59":47,"_158":591,"_61":24,"_160":-5,"_297":592,"_117":593},{"_27":578,"_13":579,"_56":580,"_37":539,"_29":30,"_154":581,"_156":78,"_31":582,"_33":82,"_59":47,"_158":583,"_61":24,"_160":-5,"_297":584,"_117":585},{"_27":570,"_13":571,"_56":572,"_37":539,"_29":30,"_154":573,"_156":78,"_31":574,"_33":82,"_59":47,"_158":575,"_61":24,"_160":-5,"_297":576,"_117":577},{"_27":562,"_13":563,"_56":564,"_37":539,"_29":30,"_154":565,"_156":78,"_31":566,"_33":82,"_59":47,"_158":567,"_61":24,"_160":-5,"_297":568,"_117":569},{"_27":554,"_13":555,"_56":556,"_37":539,"_29":30,"_154":557,"_156":78,"_31":558,"_33":82,"_59":47,"_158":559,"_61":24,"_160":-5,"_297":560,"_117":561},{"_27":546,"_13":547,"_56":548,"_37":539,"_29":30,"_154":549,"_156":78,"_31":550,"_33":82,"_59":47,"_158":551,"_61":24,"_160":-5,"_297":552,"_117":553},{"_27":536,"_13":537,"_56":538,"_37":539,"_29":30,"_154":540,"_156":78,"_31":541,"_33":82,"_59":47,"_158":542,"_61":24,"_160":-5,"_297":543,"_117":544},{"_27":531,"_13":482,"_56":476,"_37":426,"_29":30,"_154":532,"_156":78,"_31":533,"_33":82,"_59":235,"_158":-5,"_61":24,"_160":-5,"_297":534,"_117":535},{"_27":523,"_13":524,"_56":525,"_37":476,"_29":30,"_154":526,"_156":78,"_31":527,"_33":82,"_59":47,"_158":528,"_61":24,"_160":-5,"_297":529,"_117":530},{"_27":515,"_13":516,"_56":517,"_37":476,"_29":30,"_154":518,"_156":78,"_31":519,"_33":82,"_59":47,"_158":520,"_61":24,"_160":-5,"_297":521,"_117":522},{"_27":507,"_13":508,"_56":509,"_37":476,"_29":30,"_154":510,"_156":78,"_31":511,"_33":82,"_59":47,"_158":512,"_61":24,"_160":-5,"_297":513,"_117":514},{"_27":499,"_13":500,"_56":501,"_37":476,"_29":30,"_154":502,"_156":78,"_31":503,"_33":34,"_59":47,"_158":504,"_61":24,"_160":-5,"_297":505,"_117":506},{"_27":491,"_13":492,"_56":493,"_37":476,"_29":30,"_154":494,"_156":78,"_31":495,"_33":82,"_59":47,"_158":496,"_61":24,"_160":-5,"_297":497,"_117":498},{"_27":483,"_13":484,"_56":485,"_37":476,"_29":30,"_154":486,"_156":78,"_31":487,"_33":82,"_59":47,"_158":488,"_61":24,"_160":-5,"_297":489,"_117":490},{"_27":473,"_13":474,"_56":475,"_37":476,"_29":30,"_154":477,"_156":78,"_31":478,"_33":82,"_59":47,"_158":479,"_61":24,"_160":-5,"_297":480,"_117":481},{"_27":465,"_13":466,"_56":467,"_37":426,"_29":30,"_154":468,"_156":78,"_31":469,"_33":82,"_59":47,"_158":470,"_61":24,"_160":-5,"_297":471,"_117":472},{"_27":457,"_13":458,"_56":459,"_37":426,"_29":30,"_154":460,"_156":78,"_31":461,"_33":34,"_59":47,"_158":462,"_61":24,"_160":-5,"_297":463,"_117":464},{"_27":449,"_13":450,"_56":451,"_37":426,"_29":30,"_154":452,"_156":78,"_31":453,"_33":82,"_59":47,"_158":454,"_61":24,"_160":-5,"_297":455,"_117":456},{"_27":441,"_13":442,"_56":443,"_37":426,"_29":30,"_154":444,"_156":78,"_31":445,"_33":82,"_59":47,"_158":446,"_61":24,"_160":-5,"_297":447,"_117":448},{"_27":433,"_13":434,"_56":435,"_37":426,"_29":30,"_154":436,"_156":78,"_31":437,"_33":82,"_59":47,"_158":438,"_61":24,"_160":-5,"_297":439,"_117":440},{"_27":423,"_13":424,"_56":425,"_37":426,"_29":30,"_154":427,"_156":78,"_31":428,"_33":82,"_59":47,"_158":429,"_61":24,"_160":-5,"_297":430,"_117":431},{"_27":418,"_13":409,"_56":403,"_37":232,"_29":30,"_154":419,"_156":78,"_31":420,"_33":82,"_59":235,"_158":-5,"_61":24,"_160":-5,"_297":421,"_117":422},{"_27":410,"_13":411,"_56":412,"_37":403,"_29":30,"_154":413,"_156":78,"_31":414,"_33":82,"_59":47,"_158":415,"_61":24,"_160":-5,"_297":416,"_117":417},{"_27":400,"_13":401,"_56":402,"_37":403,"_29":30,"_154":404,"_156":78,"_31":405,"_33":82,"_59":47,"_158":406,"_61":24,"_160":-5,"_297":407,"_117":408},{"_27":395,"_13":394,"_56":388,"_37":232,"_29":30,"_154":396,"_156":78,"_31":397,"_33":82,"_59":235,"_158":-5,"_61":24,"_160":-5,"_297":398,"_117":399},{"_27":385,"_13":386,"_56":387,"_37":388,"_29":30,"_154":389,"_156":78,"_31":390,"_33":82,"_59":47,"_158":391,"_61":24,"_160":-5,"_297":392,"_117":393},{"_27":380,"_13":371,"_56":365,"_37":232,"_29":30,"_154":381,"_156":78,"_31":382,"_33":82,"_59":235,"_158":-5,"_61":24,"_160":-5,"_297":383,"_117":384},{"_27":372,"_13":373,"_56":374,"_37":365,"_29":30,"_154":375,"_156":78,"_31":376,"_33":82,"_59":47,"_158":377,"_61":24,"_160":-5,"_297":378,"_117":379},{"_27":362,"_13":363,"_56":364,"_37":365,"_29":30,"_154":366,"_156":78,"_31":367,"_33":82,"_59":47,"_158":368,"_61":24,"_160":-5,"_297":369,"_117":370},{"_27":354,"_13":355,"_56":356,"_37":232,"_29":30,"_154":357,"_156":78,"_31":358,"_33":82,"_59":47,"_158":359,"_61":24,"_160":-5,"_297":360,"_117":361},{"_27":346,"_13":347,"_56":348,"_37":232,"_29":30,"_154":349,"_156":78,"_31":350,"_33":82,"_59":47,"_158":351,"_61":24,"_160":-5,"_297":352,"_117":353},{"_27":338,"_13":339,"_56":340,"_37":232,"_29":30,"_154":341,"_156":78,"_31":342,"_33":82,"_59":47,"_158":343,"_61":24,"_160":-5,"_297":344,"_117":345},{"_27":330,"_13":331,"_56":332,"_37":232,"_29":30,"_154":333,"_156":78,"_31":334,"_33":82,"_59":47,"_158":335,"_61":24,"_160":-5,"_297":336,"_117":337},{"_27":223,"_13":224,"_56":225,"_37":-5,"_29":30,"_154":226,"_156":78,"_31":327,"_33":82,"_59":47,"_158":228,"_61":24,"_160":-5,"_297":328,"_117":329},{"_27":216,"_13":217,"_56":218,"_37":-5,"_29":30,"_154":102,"_156":78,"_31":324,"_33":220,"_59":47,"_158":221,"_61":24,"_160":-5,"_297":325,"_117":326},{"_27":209,"_13":210,"_56":211,"_37":-5,"_29":30,"_154":212,"_156":78,"_31":321,"_33":20,"_59":47,"_158":214,"_61":24,"_160":-5,"_297":322,"_117":323},{"_27":202,"_13":203,"_56":204,"_37":-5,"_29":30,"_154":205,"_156":78,"_31":318,"_33":82,"_59":47,"_158":207,"_61":24,"_160":-5,"_297":319,"_117":320},{"_27":197,"_13":58,"_56":57,"_37":-5,"_29":30,"_154":198,"_156":78,"_31":315,"_33":34,"_59":60,"_158":200,"_61":24,"_160":-5,"_297":316,"_117":317},{"_27":190,"_13":191,"_56":192,"_37":-5,"_29":30,"_154":193,"_156":78,"_31":312,"_33":82,"_59":47,"_158":195,"_61":24,"_160":-5,"_297":313,"_117":314},{"_27":183,"_13":184,"_56":76,"_37":-5,"_29":30,"_154":185,"_156":78,"_31":309,"_33":20,"_59":187,"_158":188,"_61":24,"_160":-5,"_297":310,"_117":311},{"_27":176,"_13":177,"_56":178,"_37":-5,"_29":30,"_154":179,"_156":78,"_31":306,"_33":82,"_59":47,"_158":181,"_61":24,"_160":-5,"_297":307,"_117":308},{"_27":169,"_13":170,"_56":171,"_37":-5,"_29":30,"_154":172,"_156":78,"_31":303,"_33":82,"_59":47,"_158":174,"_61":24,"_160":-5,"_297":304,"_117":305},{"_27":162,"_13":163,"_56":164,"_37":-5,"_29":30,"_154":165,"_156":78,"_31":300,"_33":82,"_59":47,"_158":167,"_61":24,"_160":-5,"_297":301,"_117":302},{"_27":151,"_13":152,"_56":153,"_37":-5,"_29":30,"_154":155,"_156":78,"_31":296,"_33":82,"_59":47,"_158":159,"_61":24,"_160":-5,"_297":298,"_117":299},["D",1771258204346],"children",[],[152],["D",1771258209807],[],[163],["D",1771258208024],[],[170],["D",1771258418544],[],[177],["D",1771258598979],[],[184],["D",1771257880798],[],[191],["D",1771257876286],[],[58],["D",1771257881597],[],[203],["D",1771258798950],[],[210],["D",1771258961905],[],[217],["D",1771257877744],[],[224],"3cd8aea6-0b51-11f1-a77d-42dde27851f2","vite-env.d.ts","3cd8af82-0b51-11f1-a77d-42dde27851f2",12,["D",1771257896614],"/// \n",[],[231,331],"3b756658-0b51-11f1-9050-42dde27851f2","main.tsx","3b75673e-0b51-11f1-9050-42dde27851f2",10,["D",1771257894293],"import { createRoot } from \"react-dom/client\";\nimport App from \"./App.tsx\";\nimport \"./index.css\";\n\ncreateRoot(document.getElementById(\"root\")!).render();\n",[],[231,339],"4f799ca0-0b51-11f1-9043-42dde27851f2","index.css","4f799d86-0b51-11f1-9043-42dde27851f2",19,["D",1771257927865],"@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n :root {\n --background: 0 0% 99%;\n --foreground: 220 20% 10%;\n --card: 0 0% 100%;\n --card-foreground: 220 20% 10%;\n --primary: 173 58% 39%;\n --primary-foreground: 0 0% 100%;\n --secondary: 200 20% 96%;\n --secondary-foreground: 220 20% 10%;\n --muted: 200 15% 95%;\n --muted-foreground: 220 10% 45%;\n --border: 220 15% 90%;\n --input: 220 15% 90%;\n --ring: 173 58% 39%;\n --radius: 0.75rem;\n --wero: 173 58% 39%;\n --gradient-wero: linear-gradient(135deg, hsl(173 58% 39%), hsl(190 60% 45%));\n --gradient-hero: linear-gradient(180deg, hsl(0 0% 100%) 0%, hsl(200 20% 98%) 100%);\n --shadow-wero: 0 8px 30px hsl(173 58% 39% / 0.25);\n }\n}\n@layer base {\n * { @apply border-border; }\n body { @apply bg-background text-foreground; }\n}\n",[],[231,347],"3c479da8-0b51-11f1-9e3b-42dde27851f2","App.tsx","3c479e8e-0b51-11f1-9e3b-42dde27851f2",11,["D",1771257895670],"import { Toaster } from \"@/components/ui/toaster\";\nimport { Toaster as Sonner } from \"@/components/ui/sonner\";\nimport { TooltipProvider } from \"@/components/ui/tooltip\";\nimport { BrowserRouter, Routes, Route } from \"react-router-dom\";\nimport Index from \"./pages/Index\";\nimport NotFound from \"./pages/NotFound\";\n\nconst App = () => (\n \n \n \n \n \n } />\n } />\n \n \n \n);\n\nexport default App;\n",[],[231,355],"54cd0728-0b51-11f1-809e-42dde27851f2","NotFound.tsx","54cd0818-0b51-11f1-809e-42dde27851f2","390efd8e-0b51-11f1-a585-42dde27851f2",21,["D",1771257936797],"import { useLocation } from \"react-router-dom\";\nimport { useEffect } from \"react\";\n\nconst NotFound = () => {\n const location = useLocation();\n useEffect(() => {\n console.error(\"404 Error: User attempted to access non-existent route:\", location.pathname);\n }, [location.pathname]);\n\n return (\n

404

Oops! Page not found

\n Return to Home\n

\n );\n};\n\nexport default NotFound;\n",[],[231,371,363],"pages","536e5d00-0b51-11f1-970a-42dde27851f2","Index.tsx","536e5dd2-0b51-11f1-970a-42dde27851f2",20,["D",1771257934495],"import { useState } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport { ShoppingBag } from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\nimport { ProductCard } from \"@/components/ProductCard\";\nimport { CheckoutForm } from \"@/components/CheckoutForm\";\n\ntype View = \"product\" | \"checkout\";\n\nconst Index = () => {\n const [view, setView] = useState(\"product\");\n\n return (\n

\n \n

SoundMax

Premium Audio

\n \n\n

\n \n {view === \"product\" ? (\n \n \n \n \n

\n ✓ Free shipping\n ✓ 30-day returns\n ✓ Instant payment\n

\n \n \n ) : (\n \n setView(\"product\")} />\n \n )}\n \n

\n\n \n

\n 🔒 Free shipping\n

\n \n

\n );\n};\n\nexport default Index;\n",[],[231,371,373],"390efcbc-0b51-11f1-a585-42dde27851f2",9,["D",1771257890261],[279,280],[231,371],"4d3acebe-0b51-11f1-9dba-42dde27851f2","utils.ts","4d3acf90-0b51-11f1-9dba-42dde27851f2","40f67c66-0b51-11f1-9ae4-42dde27851f2",18,["D",1771257924107],"import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n",[],[231,394,386],"lib","40f67ba8-0b51-11f1-9ae4-42dde27851f2",13,["D",1771257903527],[277],[231,394],"81975f60-0b51-11f1-9664-42dde27851f2","use-toast.ts","81976050-0b51-11f1-9664-42dde27851f2","4123213a-0b51-11f1-bd12-42dde27851f2",29,["D",1771258011957],"import * as React from \"react\";\nimport type { ToastActionElement, ToastProps } from \"@/components/ui/toast\";\n\nconst TOAST_LIMIT = 1;\nconst TOAST_REMOVE_DELAY = 1000000;\n\ntype ToasterToast = ToastProps & { id: string; title?: React.ReactNode; description?: React.ReactNode; action?: ToastActionElement };\n\nconst actionTypes = { ADD_TOAST: \"ADD_TOAST\", UPDATE_TOAST: \"UPDATE_TOAST\", DISMISS_TOAST: \"DISMISS_TOAST\", REMOVE_TOAST: \"REMOVE_TOAST\" } as const;\n\nlet count = 0;\nfunction genId() { count = (count + 1) % Number.MAX_SAFE_INTEGER; return count.toString(); }\n\ntype ActionType = typeof actionTypes;\ntype Action =\n | { type: ActionType[\"ADD_TOAST\"]; toast: ToasterToast }\n | { type: ActionType[\"UPDATE_TOAST\"]; toast: Partial }\n | { type: ActionType[\"DISMISS_TOAST\"]; toastId?: ToasterToast[\"id\"] }\n | { type: ActionType[\"REMOVE_TOAST\"]; toastId?: ToasterToast[\"id\"] };\n\ninterface State { toasts: ToasterToast[]; }\n\nconst toastTimeouts = new Map>();\n\nconst addToRemoveQueue = (toastId: string) => {\n if (toastTimeouts.has(toastId)) return;\n const timeout = setTimeout(() => { toastTimeouts.delete(toastId); dispatch({ type: \"REMOVE_TOAST\", toastId }); }, TOAST_REMOVE_DELAY);\n toastTimeouts.set(toastId, timeout);\n};\n\nexport const reducer = (state: State, action: Action): State => {\n switch (action.type) {\n case \"ADD_TOAST\": return { ...state, toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT) };\n case \"UPDATE_TOAST\": return { ...state, toasts: state.toasts.map((t) => (t.id === action.toast.id ? { ...t, ...action.toast } : t)) };\n case \"DISMISS_TOAST\":\n if (action.toastId) addToRemoveQueue(action.toastId);\n else state.toasts.forEach((t) => addToRemoveQueue(t.id));\n return { ...state, toasts: state.toasts.map((t) => (t.id === action.toastId || action.toastId === undefined ? { ...t, open: false } : t)) };\n case \"REMOVE_TOAST\":\n if (action.toastId === undefined) return { ...state, toasts: [] };\n return { ...state, toasts: state.toasts.filter((t) => t.id !== action.toastId) };\n }\n};\n\nconst listeners: Array<(state: State) => void> = [];\nlet memoryState: State = { toasts: [] };\n\nfunction dispatch(action: Action) {\n memoryState = reducer(memoryState, action);\n listeners.forEach((l) => l(memoryState));\n}\n\nfunction toast({ ...props }: Omit) {\n const id = genId();\n dispatch({ type: \"ADD_TOAST\", toast: { ...props, id, open: true, onOpenChange: (open) => { if (!open) dispatch({ type: \"DISMISS_TOAST\", toastId: id }); } } });\n return { id, dismiss: () => dispatch({ type: \"DISMISS_TOAST\", toastId: id }), update: (p: ToasterToast) => dispatch({ type: \"UPDATE_TOAST\", toast: { ...p, id } }) };\n}\n\nfunction useToast() {\n const [state, setState] = React.useState(memoryState);\n React.useEffect(() => { listeners.push(setState); return () => { const i = listeners.indexOf(setState); if (i > -1) listeners.splice(i, 1); }; }, [state]);\n return { ...state, toast, dismiss: (toastId?: string) => dispatch({ type: \"DISMISS_TOAST\", toastId }) };\n}\n\nexport { useToast, toast };\n",[],[231,409,401],"hooks","55c71cd6-0b51-11f1-acfb-42dde27851f2","use-mobile.tsx","55c71d76-0b51-11f1-acfb-42dde27851f2",22,["D",1771257938446],"import * as React from \"react\";\n\nconst MOBILE_BREAKPOINT = 768;\n\nexport function useIsMobile() {\n const [isMobile, setIsMobile] = React.useState(undefined);\n\n React.useEffect(() => {\n const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);\n const onChange = () => setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n mql.addEventListener(\"change\", onChange);\n setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n return () => mql.removeEventListener(\"change\", onChange);\n }, []);\n\n return !!isMobile;\n}\n",[],[231,409,411],"4123205e-0b51-11f1-bd12-42dde27851f2",14,["D",1771257903810],[274,275],[231,409],"9bb4720c-0b51-11f1-8345-42dde27851f2","WeroLogo.tsx","9bb472ac-0b51-11f1-8345-42dde27851f2","4152705c-0b51-11f1-9f9d-42dde27851f2",42,["D",1771258055763],"import { motion } from \"framer-motion\";\n\nexport const WeroLogo = ({ className = \"\" }: { className?: string }) => (\n \n

\n W\n

\n wero\n \n);\n",[],[231,432,424],"components","d898c3d0-0b51-11f1-aab8-42dde27851f2","WeroBankSelection.tsx","d898c47a-0b51-11f1-aab8-42dde27851f2",46,["D",1771258157924],"import { useState, ReactNode } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport { ArrowLeft, Search, ChevronDown, ChevronRight } from \"lucide-react\";\nimport { Input } from \"@/components/ui/input\";\nimport { DeutscheBankLogo, PostbankLogo, SparkasseLogo, VolksbankLogo, BBBankLogo, GLSBankLogo, PSDBankLogo, KlarnaLogo } from \"@/components/bank-logos\";\n\ninterface WeroBankSelectionProps {\n onBack: () => void;\n onSelectBank: (bank: string) => void;\n}\n\ninterface Bank {\n name: string;\n Logo: () => ReactNode;\n hasArrow: boolean;\n}\n\nconst klarnaOptions: Bank[] = [\n { name: \"Klarna Balance\", Logo: KlarnaLogo, hasArrow: true },\n { name: \"Klarna Pay Later\", Logo: KlarnaLogo, hasArrow: true },\n];\n\nconst banks: Bank[] = [\n { name: \"Deutsche Bank\", Logo: DeutscheBankLogo, hasArrow: true },\n { name: \"Postbank\", Logo: PostbankLogo, hasArrow: true },\n { name: \"Sparkasse\", Logo: SparkasseLogo, hasArrow: false },\n { name: \"Volksbanken Raiffeisenbanken\", Logo: VolksbankLogo, hasArrow: true },\n { name: \"BBBank\", Logo: BBBankLogo, hasArrow: false },\n { name: \"GLS Gemeinschaftsbank eG\", Logo: GLSBankLogo, hasArrow: false },\n { name: \"PSD Banken\", Logo: PSDBankLogo, hasArrow: true },\n];\n\nexport const WeroBankSelection = ({ onBack, onSelectBank }: WeroBankSelectionProps) => {\n const [searchQuery, setSearchQuery] = useState(\"\");\n const [showCookieBanner, setShowCookieBanner] = useState(true);\n const [klarnaDropdownOpen, setKlarnaDropdownOpen] = useState(false);\n\n const searchLower = searchQuery.toLowerCase();\n const showKlarnaSection = searchLower === \"\" || klarnaOptions.some((o) => o.name.toLowerCase().includes(searchLower));\n const filteredKlarnaOptions = klarnaOptions.filter((o) => o.name.toLowerCase().includes(searchLower));\n const filteredBanks = banks.filter((b) => b.name.toLowerCase().includes(searchLower));\n\n return (\n

\n \n

Pay with Wero

\n \n

Select your bank

\n setSearchQuery(e.target.value)} className=\"w-full bg-transparent border-0 border-b rounded-none px-0 py-2 focus-visible:ring-0\" style={{ borderColor: \"#CCCCCC\", color: \"#1A1A1A\" }} />\n \n

\n \n

\n {showKlarnaSection && (\n

\n setKlarnaDropdownOpen((o) => !o)} className=\"w-full flex items-center gap-4 p-4 transition-colors hover:opacity-90\" style={{ backgroundColor: \"transparent\" }}>\n

\n \n

\n Klarna\n \n \n \n \n \n {klarnaDropdownOpen && (\n \n {filteredKlarnaOptions.map((option, index) => (\n \n ))}\n \n )}\n \n

\n )}\n {showKlarnaSection && filteredBanks.length > 0 &&

}\n {filteredBanks.map((bank, index) => (\n onSelectBank(bank.name)} className=\"w-full flex items-center gap-4 p-4 rounded-xl transition-colors\" style={{ backgroundColor: \"#FFFFFF\", border: \"1px solid #F0F0F0\" }}>\n

\n \n

\n {bank.name}\n {bank.hasArrow ? (\n

\n ) : (\n

\n )}\n \n ))}\n

\n {showCookieBanner && (\n

Wero uses strictly necessary cookies to improve your experience. See our Cookie Policy.

\n \n

\n )}\n \n

\n );\n};\n",[],[231,432,434],"a05d70ec-0b51-11f1-a232-42dde27851f2","ProductCard.tsx","a05d71aa-0b51-11f1-a232-42dde27851f2",43,["D",1771258063587],"import { motion } from \"framer-motion\";\nimport { Star, Shield, Zap, Headphones } from \"lucide-react\";\n\nconst productImage = \"https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=400\";\n\nconst features = [\n { icon: Zap, text: \"40h Battery Life\" },\n { icon: Shield, text: \"2 Year Warranty\" },\n { icon: Headphones, text: \"Hi-Res Audio\" },\n];\n\nexport const ProductCard = () => (\n \n \n $\"Premium$ \n \n

\n New Release\n SoundMax Pro\n Premium wireless noise-canceling headphones with studio-quality sound and all-day comfort.\n \n {[...Array(5)].map((_, i) => )}\n (2,847 reviews)\n \n \n {features.map((feature, index) => (\n

\n \n {feature.text}\n

\n ))}\n \n \n €249\n €349\n Save €100\n \n

\n \n);\n",[],[231,432,442],"ef8f9d02-0b51-11f1-85a0-42dde27851f2","KlarnaHPPSimulation.tsx","ef8f9dc0-0b51-11f1-85a0-42dde27851f2",47,["D",1771258196446],"import { useState, useEffect } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport { X, ChevronRight, CreditCard, Smartphone } from \"lucide-react\";\nimport { KlarnaBadge } from \"./KlarnaBadge\";\n\ninterface KlarnaHPPSimulationProps {\n onBack: () => void;\n onComplete: () => void;\n amount: string;\n email: string;\n product?: \"Klarna Balance\" | \"Klarna Pay Later\";\n}\n\ntype KlarnaStep = \"loading\" | \"welcome\" | \"confirm\" | \"processing\";\n\nconst KLARNA_BLACK = \"#0B051D\";\nconst KLARNA_WHITE = \"#F9F8F5\";\nconst KLARNA_TEXT = \"rgb(55, 53, 68)\";\n\nconst klarnaTextStyle: React.CSSProperties = {\n fontFamily: '-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Arial, sans-serif',\n fontSize: \"16px\",\n fontWeight: 400,\n lineHeight: \"23px\",\n letterSpacing: \"0px\",\n color: KLARNA_TEXT,\n textRendering: \"geometricPrecision\",\n WebkitFontSmoothing: \"antialiased\",\n};\n\nconst springTransition = { type: \"spring\" as const, stiffness: 300, damping: 30 };\n\nexport const KlarnaHPPSimulation = ({ onBack, onComplete, amount, email, product = \"Klarna Balance\" }: KlarnaHPPSimulationProps) => {\n const [step, setStep] = useState(\"loading\");\n const [phone, setPhone] = useState(\"\");\n\n useEffect(() => {\n const t = setTimeout(() => setStep(\"welcome\"), 1200);\n return () => clearTimeout(t);\n }, []);\n\n const handleContinue = () => { if (phone.length >= 6) setStep(\"confirm\"); };\n const handlePay = () => { setStep(\"processing\"); setTimeout(onComplete, 2000); };\n const amountValue = amount.replace(\"€\", \"\").trim();\n\n return (\n \n

\n \n \n \n \n \n

\n \n {step === \"loading\" && (\n \n \n \n )}\n {step === \"welcome\" && (\n \n

\n Welcome to\n \n

We make payments simple and flexible. Just verify your number.

\n \n

\n Phone number\n setPhone(e.target.value)} className=\"w-full text-base font-medium focus:outline-none bg-transparent\" style={{ color: KLARNA_BLACK }} />\n

\n \n

\n \n = 6 ? 1.01 : 1 }} whileTap={{ scale: phone.length >= 6 ? 0.99 : 1 }}>Continue\n

You'll stay logged in for faster access

By continuing, I agree to the Terms of Use · Privacy Policy · Cookie Policy

\n \n \n )}\n {step === \"confirm\" && (\n \n

Review and pay

Review your payment details before continuing.

\n \n

{email ? email.slice(0, 2).toUpperCase() : \"JT\"}

{email || \"customer@example.com\"}

{phone || \"+1 555 123 4567\"}

\n \n \n \n

🛍️

SoundMax Store

\n \n \n \n

{product === \"Klarna Pay Later\" ? \"Pay later in 30 days\" : product}

{product === \"Klarna Balance\" ? \"€ 1,250.00 available\" : \"Pay in 30 days\"}

\n \n \n

Order amount€ {amountValue}

Pay now€ {amountValue}

\n \n

You must be at least 18 years old to use this service.

By continuing, you accept the Payment Terms for Pay Now.

\n \n \n Pay with\n \n \n \n \n )}\n {step === \"processing\" && (\n \n \n Processing payment...\n Please wait\n \n )}\n \n

\n \n );\n};\n",[],[231,432,450],"afb3dea0-0b51-11f1-916a-42dde27851f2","KlarnaBadge.tsx","9aaf7e38-0b51-11f1-9eec-42dde27851f2",44,["D",1771258089287],"interface KlarnaBadgeProps {\n className?: string;\n height?: number;\n}\n\nexport const KlarnaBadge = ({ className = \"\", height = 36 }: KlarnaBadgeProps) => {\n const aspectRatio = 1448 / 609;\n const width = height * aspectRatio;\n return (\n \n );\n};\n",[],[231,432,458],"c33a1dae-0b51-11f1-9a79-42dde27851f2","CheckoutForm.tsx","c33a1e62-0b51-11f1-9a79-42dde27851f2",45,["D",1771258122036],"import { useState } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport { ArrowLeft, Check, Lock, XCircle } from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\nimport { WeroLogo } from \"./WeroLogo\";\nimport { WeroBankSelection } from \"./WeroBankSelection\";\nimport { KlarnaHPPSimulation } from \"./KlarnaHPPSimulation\";\n\nconst productImage = \"https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=400\";\n\ninterface CheckoutFormProps {\n onBack: () => void;\n}\n\ntype Step = \"details\" | \"wero\" | \"klarna\" | \"processing\" | \"success\" | \"failed\";\n\nexport const CheckoutForm = ({ onBack }: CheckoutFormProps) => {\n const [step, setStep] = useState(\"details\");\n const [selectedBank, setSelectedBank] = useState(\"\");\n const [formData, setFormData] = useState({\n email: \"\",\n firstName: \"\",\n lastName: \"\",\n phone: \"\",\n });\n\n const handleInputChange = (e: React.ChangeEvent) => {\n setFormData({ ...formData, [e.target.name]: e.target.value });\n };\n\n const handleSubmitDetails = (e: React.FormEvent) => {\n e.preventDefault();\n setStep(\"wero\");\n };\n\n const handleBankSelect = (bank: string) => {\n setSelectedBank(bank);\n if (bank === \"Klarna Balance\" || bank === \"Klarna Pay Later\") {\n setStep(\"klarna\");\n return;\n }\n setStep(\"processing\");\n setTimeout(() => setStep(\"failed\"), 2500);\n };\n\n const handleKlarnaComplete = () => setStep(\"success\");\n\n if (step === \"wero\") {\n return setStep(\"details\")} onSelectBank={handleBankSelect} />;\n }\n\n if (step === \"klarna\") {\n return (\n setStep(\"wero\")}\n onComplete={handleKlarnaComplete}\n amount=\"€249\"\n email={formData.email}\n product={selectedBank as \"Klarna Balance\" | \"Klarna Pay Later\"}\n />\n );\n }\n\n return (\n \n \n {step === \"details\" && (\n \n \n

Checkout

Complete your purchase with Wero instant payment

\n $\"SoundMax$ \n

SoundMax Pro

Wireless Headphones

€249

\n \n \n )}\n {step === \"processing\" && (\n \n

Processing Payment

Confirming your payment of €249 via Wero...

\n {[0, 1, 2].map((i) => (\n \n ))}\n

Please wait...

\n \n )}\n {step === \"success\" && (\n \n \n \n \n Payment Successful!\n \n Thank you for your purchase, {formData.firstName}!
A confirmation email has been sent to {formData.email}\n \n \n

Order Number

#WRO-{Math.random().toString(36).substr(2, 9).toUpperCase()}

\n \n \n \n Secure payment completed\n \n \n )}\n {step === \"failed\" && (\n \n \n \n \n Payment Failed\n We couldn't process your payment. Please try again with a different payment method.\n \n \n \n \n )}\n \n \n );\n};\n",[],[231,432,466],"6e0e3004-0b51-11f1-97dc-42dde27851f2","tooltip.tsx","6e0e30d6-0b51-11f1-97dc-42dde27851f2","46964570-0b51-11f1-bf2e-42dde27851f2",26,["D",1771257979131],"import * as React from \"react\";\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\nimport { cn } from \"@/lib/utils\";\n\nconst TooltipProvider = TooltipPrimitive.Provider;\nconst Tooltip = TooltipPrimitive.Root;\nconst TooltipTrigger = TooltipPrimitive.Trigger;\n\nconst TooltipContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, sideOffset = 4, ...props }, ref) => (\n \n));\nTooltipContent.displayName = TooltipPrimitive.Content.displayName;\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };\n",[],[231,432,482,474],"ui","8a1a893c-0b51-11f1-a116-42dde27851f2","toaster.tsx","8a1a8a18-0b51-11f1-a116-42dde27851f2",31,["D",1771258026235],"import { useToast } from \"@/hooks/use-toast\";\nimport { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from \"@/components/ui/toast\";\n\nexport function Toaster() {\n const { toasts } = useToast();\n return (\n \n {toasts.map(({ id, title, description, action, ...props }) => (\n \n

\n {title && {title}}\n {description && {description}}\n

\n {action}\n \n \n ))}\n \n \n );\n}\n",[],[231,432,482,484],"88ffcf8a-0b51-11f1-b0c0-42dde27851f2","toast.tsx","88ffd05c-0b51-11f1-b0c0-42dde27851f2",30,["D",1771258024373],"import * as React from \"react\";\nimport * as ToastPrimitives from \"@radix-ui/react-toast\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { X } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\n\nconst ToastProvider = ToastPrimitives.Provider;\n\nconst ToastViewport = React.forwardRef, React.ComponentPropsWithoutRef>(\n ({ className, ...props }, ref) => (\n \n ),\n);\nToastViewport.displayName = ToastPrimitives.Viewport.displayName;\n\nconst toastVariants = cva(\n \"group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all\",\n { variants: { variant: { default: \"border bg-background text-foreground\", destructive: \"border-destructive bg-destructive text-destructive-foreground\" } }, defaultVariants: { variant: \"default\" } },\n);\n\nconst Toast = React.forwardRef, React.ComponentPropsWithoutRef & VariantProps>(\n ({ className, variant, ...props }, ref) => ,\n);\nToast.displayName = ToastPrimitives.Root.displayName;\n\nconst ToastClose = React.forwardRef, React.ComponentPropsWithoutRef>(\n ({ className, ...props }, ref) => (\n \n \n \n ),\n);\nToastClose.displayName = ToastPrimitives.Close.displayName;\n\nconst ToastTitle = React.forwardRef, React.ComponentPropsWithoutRef>(\n ({ className, ...props }, ref) => ,\n);\nToastTitle.displayName = ToastPrimitives.Title.displayName;\n\nconst ToastDescription = React.forwardRef, React.ComponentPropsWithoutRef>(\n ({ className, ...props }, ref) => ,\n);\nToastDescription.displayName = ToastPrimitives.Description.displayName;\n\nconst ToastAction = React.forwardRef, React.ComponentPropsWithoutRef>(\n ({ className, ...props }, ref) => ,\n);\nToastAction.displayName = ToastPrimitives.Action.displayName;\n\nexport type ToastProps = React.ComponentPropsWithoutRef;\nexport type ToastActionElement = React.ReactElement;\nexport { ToastProvider, ToastViewport, Toast, ToastTitle, ToastDescription, ToastClose, ToastAction };\n",[],[231,432,482,492],"7b8fa4f6-0b51-11f1-b87e-42dde27851f2","sonner.tsx","6fa5ce5e-0b51-11f1-935d-42dde27851f2",28,["D",1771258001833],"import { Toaster as Sonner } from \"sonner\";\n\ntype ToasterProps = React.ComponentProps;\n\nconst Toaster = ({ ...props }: ToasterProps) => (\n \n);\n\nexport { Toaster };\nexport { toast } from \"sonner\";\n",[],[231,432,482,500],"6c1b3bf2-0b51-11f1-928e-42dde27851f2","label.tsx","6c1b3ce2-0b51-11f1-928e-42dde27851f2",25,["D",1771257975895],"import * as React from \"react\";\nimport * as LabelPrimitive from \"@radix-ui/react-label\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\n\nconst labelVariants = cva(\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\");\n\nconst Label = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef & VariantProps\n>(({ className, ...props }, ref) => (\n \n));\nLabel.displayName = LabelPrimitive.Root.displayName;\n\nexport { Label };\n",[],[231,432,482,508],"6a984194-0b51-11f1-8d95-42dde27851f2","input.tsx","6a98423e-0b51-11f1-8d95-42dde27851f2",24,["D",1771257973359],"import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nconst Input = React.forwardRef>(\n ({ className, type, ...props }, ref) => (\n \n ),\n);\nInput.displayName = \"Input\";\n\nexport { Input };\n",[],[231,432,482,516],"68c5cb34-0b51-11f1-b536-42dde27851f2","button.tsx","68c5cc38-0b51-11f1-b536-42dde27851f2",23,["D",1771257970307],"import * as React from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\n\nconst buttonVariants = cva(\n \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n {\n variants: {\n variant: {\n default: \"bg-primary text-primary-foreground hover:bg-primary/90\",\n destructive: \"bg-destructive text-destructive-foreground hover:bg-destructive/90\",\n outline: \"border border-input bg-background hover:bg-accent hover:text-accent-foreground\",\n secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n ghost: \"hover:bg-accent hover:text-accent-foreground\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n size: {\n default: \"h-10 px-4 py-2\",\n sm: \"h-9 rounded-md px-3\",\n lg: \"h-11 rounded-md px-8\",\n icon: \"h-10 w-10\",\n },\n },\n defaultVariants: { variant: \"default\", size: \"default\" },\n },\n);\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps {\n asChild?: boolean;\n}\n\nconst Button = React.forwardRef(\n ({ className, variant, size, asChild = false, ...props }, ref) => {\n const Comp = asChild ? Slot : \"button\";\n return ;\n },\n);\nButton.displayName = \"Button\";\n\nexport { Button, buttonVariants };\n",[],[231,432,482,524],"46964480-0b51-11f1-bf2e-42dde27851f2",16,["D",1771257912949],[260,261,262,263,264,265,266],[231,432,482],"8c8e03b0-0b51-11f1-9e5c-42dde27851f2","index.ts","8c8e0478-0b51-11f1-9e5c-42dde27851f2","46ba346c-0b51-11f1-8ae0-42dde27851f2",32,["D",1771258030349],"export { DeutscheBankLogo } from './DeutscheBankLogo';\nexport { PostbankLogo } from './PostbankLogo';\nexport { SparkasseLogo } from './SparkasseLogo';\nexport { VolksbankLogo } from './VolksbankLogo';\nexport { BBBankLogo } from './BBBankLogo';\nexport { GLSBankLogo } from './GLSBankLogo';\nexport { PSDBankLogo } from './PSDBankLogo';\nexport { KlarnaLogo } from './KlarnaLogo';\n",[],[231,432,545,537],"bank-logos","9081ea72-0b51-11f1-bfcb-42dde27851f2","VolksbankLogo.tsx","9081eb6c-0b51-11f1-bfcb-42dde27851f2",36,["D",1771258036774],"export const VolksbankLogo = () => (\n \n);\n",[],[231,432,545,547],"8f6ecf56-0b51-11f1-963d-42dde27851f2","SparkasseLogo.tsx","8f6ed014-0b51-11f1-963d-42dde27851f2",35,["D",1771258035178],"export const SparkasseLogo = () => (\n \n);\n",[],[231,432,545,555],"8ead5614-0b51-11f1-879b-42dde27851f2","PostbankLogo.tsx","8ead56b4-0b51-11f1-879b-42dde27851f2",34,["D",1771258033910],"export const PostbankLogo = () => (\n \n);\n",[],[231,432,545,563],"939e00e2-0b51-11f1-87ec-42dde27851f2","PSDBankLogo.tsx","939e018c-0b51-11f1-87ec-42dde27851f2",39,["D",1771258042189],"export const PSDBankLogo = () => (\n \n);\n",[],[231,432,545,571],"9418f93c-0b51-11f1-a86f-42dde27851f2","KlarnaLogo.tsx","9418fa18-0b51-11f1-a86f-42dde27851f2",40,["D",1771258042998],"// In local project: import klarnaLogo from \"@/assets/klarna-logo.png\";\nconst klarnaLogo = \"https://upload.wikimedia.org/wikipedia/commons/thumb/5/5b/Klarna_Logo.svg/200px-Klarna_Logo.png\";\n\nexport const KlarnaLogo = () => (\n

\n $\"Klarna\"$ \n

\n);\n",[],[231,432,545,579],"923faf7a-0b51-11f1-a2ed-42dde27851f2","GLSBankLogo.tsx","923fb06a-0b51-11f1-a2ed-42dde27851f2",38,["D",1771258039905],"export const GLSBankLogo = () => (\n \n);\n",[],[231,432,545,587],"8d95b6fe-0b51-11f1-b3b4-42dde27851f2","DeutscheBankLogo.tsx","8d95b7bc-0b51-11f1-b3b4-42dde27851f2",33,["D",1771258032079],"export const DeutscheBankLogo = () => (\n \n);\n",[],[231,432,545,595],"913eece4-0b51-11f1-afe4-42dde27851f2","BBBankLogo.tsx","913eedc0-0b51-11f1-afe4-42dde27851f2",37,["D",1771258038210],"export const BBBankLogo = () => (\n \n);\n",[],[231,432,545,603],"46ba3214-0b51-11f1-8ae0-42dde27851f2",17,["D",1771257913198],[250,251,252,253,254,255,256,257,258],[231,432,545],"41526f8a-0b51-11f1-9f9d-42dde27851f2",15,["D",1771257904127],[249,259,267,268,269,270,271,272],[231,432],["D",1771257890115],[248,273,276,278,281,282,283,284],[231],["D",1771257755381],{"_11":12,"_116":64},{"_11":12,"_111":112,"_63":64,"_25":62,"_113":114,"_115":24},{"_33":102,"_13":16,"_27":30,"_103":65,"_104":-5,"_105":-5,"_106":-5,"_107":-5,"_108":-5,"_109":14,"_110":12},"ctx",{"_45":-5,"_136":660,"_661":662,"_663":664,"_665":24,"_666":24,"_667":24,"_668":78,"_669":-5,"_670":-7,"_671":-7,"_672":82,"_673":24,"_674":24,"_675":-5,"_676":24,"_677":24,"_678":24,"_679":-5},"ENV",{"_631":632,"_633":634,"_635":16,"_636":637,"_638":639,"_640":641,"_642":643,"_644":645,"_646":647,"_648":649,"_650":651,"_652":653,"_654":655,"_656":657,"_658":659},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History