\n \n \n\n",[170],"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",[177],"38f9aba0-0b51-11f1-969e-42dde27851f2","src","38f9ac68-0b51-11f1-969e-42dde27851f2",8,["D",1771257890115],"directory",[184],"pulls","branches","forks","envVars",{"_197":60,"_199":60},"connections",{"_197":60,"_198":60},"count","unfilledCount","emptyCount",{"_40":183,"_31":184,"_29":185,"_136":-5,"_38":39,"_37":186,"_138":56,"_35":557,"_13":60,"_32":188,"_33":-5,"_23":24,"_141":-5,"_246":558,"_26":559},{"_40":552,"_31":369,"_29":363,"_136":185,"_38":39,"_37":553,"_138":56,"_35":554,"_13":60,"_32":188,"_33":-5,"_23":24,"_141":-5,"_246":555,"_26":556},{"_40":547,"_31":482,"_29":476,"_136":363,"_38":39,"_37":548,"_138":56,"_35":549,"_13":60,"_32":188,"_33":-5,"_23":24,"_141":-5,"_246":550,"_26":551},{"_40":539,"_31":540,"_29":541,"_136":476,"_38":39,"_37":542,"_138":56,"_35":543,"_13":60,"_32":20,"_33":544,"_23":24,"_141":-5,"_246":545,"_26":546},{"_40":531,"_31":532,"_29":533,"_136":476,"_38":39,"_37":534,"_138":56,"_35":535,"_13":60,"_32":20,"_33":536,"_23":24,"_141":-5,"_246":537,"_26":538},{"_40":523,"_31":524,"_29":525,"_136":476,"_38":39,"_37":526,"_138":56,"_35":527,"_13":60,"_32":20,"_33":528,"_23":24,"_141":-5,"_246":529,"_26":530},{"_40":515,"_31":516,"_29":517,"_136":476,"_38":39,"_37":518,"_138":56,"_35":519,"_13":60,"_32":20,"_33":520,"_23":24,"_141":-5,"_246":521,"_26":522},{"_40":507,"_31":508,"_29":509,"_136":476,"_38":39,"_37":510,"_138":56,"_35":511,"_13":60,"_32":20,"_33":512,"_23":24,"_141":-5,"_246":513,"_26":514},{"_40":499,"_31":500,"_29":501,"_136":476,"_38":39,"_37":502,"_138":56,"_35":503,"_13":60,"_32":20,"_33":504,"_23":24,"_141":-5,"_246":505,"_26":506},{"_40":491,"_31":492,"_29":493,"_136":476,"_38":39,"_37":494,"_138":56,"_35":495,"_13":60,"_32":20,"_33":496,"_23":24,"_141":-5,"_246":497,"_26":498},{"_40":483,"_31":484,"_29":485,"_136":476,"_38":39,"_37":486,"_138":56,"_35":487,"_13":60,"_32":20,"_33":488,"_23":24,"_141":-5,"_246":489,"_26":490},{"_40":473,"_31":474,"_29":475,"_136":476,"_38":39,"_37":477,"_138":56,"_35":478,"_13":60,"_32":20,"_33":479,"_23":24,"_141":-5,"_246":480,"_26":481},{"_40":468,"_31":419,"_29":413,"_136":363,"_38":39,"_37":469,"_138":56,"_35":470,"_13":60,"_32":188,"_33":-5,"_23":24,"_141":-5,"_246":471,"_26":472},{"_40":460,"_31":461,"_29":462,"_136":413,"_38":39,"_37":463,"_138":56,"_35":464,"_13":60,"_32":20,"_33":465,"_23":24,"_141":-5,"_246":466,"_26":467},{"_40":452,"_31":453,"_29":454,"_136":413,"_38":39,"_37":455,"_138":56,"_35":456,"_13":60,"_32":20,"_33":457,"_23":24,"_141":-5,"_246":458,"_26":459},{"_40":444,"_31":445,"_29":446,"_136":413,"_38":39,"_37":447,"_138":56,"_35":448,"_13":60,"_32":20,"_33":449,"_23":24,"_141":-5,"_246":450,"_26":451},{"_40":436,"_31":437,"_29":438,"_136":413,"_38":39,"_37":439,"_138":56,"_35":440,"_13":165,"_32":20,"_33":441,"_23":24,"_141":-5,"_246":442,"_26":443},{"_40":428,"_31":429,"_29":430,"_136":413,"_38":39,"_37":431,"_138":56,"_35":432,"_13":60,"_32":20,"_33":433,"_23":24,"_141":-5,"_246":434,"_26":435},{"_40":420,"_31":421,"_29":422,"_136":413,"_38":39,"_37":423,"_138":56,"_35":424,"_13":60,"_32":20,"_33":425,"_23":24,"_141":-5,"_246":426,"_26":427},{"_40":410,"_31":411,"_29":412,"_136":413,"_38":39,"_37":414,"_138":56,"_35":415,"_13":60,"_32":20,"_33":416,"_23":24,"_141":-5,"_246":417,"_26":418},{"_40":402,"_31":403,"_29":404,"_136":363,"_38":39,"_37":405,"_138":56,"_35":406,"_13":60,"_32":20,"_33":407,"_23":24,"_141":-5,"_246":408,"_26":409},{"_40":394,"_31":395,"_29":396,"_136":363,"_38":39,"_37":397,"_138":56,"_35":398,"_13":165,"_32":20,"_33":399,"_23":24,"_141":-5,"_246":400,"_26":401},{"_40":386,"_31":387,"_29":388,"_136":363,"_38":39,"_37":389,"_138":56,"_35":390,"_13":60,"_32":20,"_33":391,"_23":24,"_141":-5,"_246":392,"_26":393},{"_40":378,"_31":379,"_29":380,"_136":363,"_38":39,"_37":381,"_138":56,"_35":382,"_13":60,"_32":20,"_33":383,"_23":24,"_141":-5,"_246":384,"_26":385},{"_40":370,"_31":371,"_29":372,"_136":363,"_38":39,"_37":373,"_138":56,"_35":374,"_13":60,"_32":20,"_33":375,"_23":24,"_141":-5,"_246":376,"_26":377},{"_40":360,"_31":361,"_29":362,"_136":363,"_38":39,"_37":364,"_138":56,"_35":365,"_13":60,"_32":20,"_33":366,"_23":24,"_141":-5,"_246":367,"_26":368},{"_40":355,"_31":346,"_29":340,"_136":185,"_38":39,"_37":356,"_138":56,"_35":357,"_13":60,"_32":188,"_33":-5,"_23":24,"_141":-5,"_246":358,"_26":359},{"_40":347,"_31":348,"_29":349,"_136":340,"_38":39,"_37":350,"_138":56,"_35":351,"_13":60,"_32":20,"_33":352,"_23":24,"_141":-5,"_246":353,"_26":354},{"_40":337,"_31":338,"_29":339,"_136":340,"_38":39,"_37":341,"_138":56,"_35":342,"_13":60,"_32":20,"_33":343,"_23":24,"_141":-5,"_246":344,"_26":345},{"_40":332,"_31":331,"_29":325,"_136":185,"_38":39,"_37":333,"_138":56,"_35":334,"_13":60,"_32":188,"_33":-5,"_23":24,"_141":-5,"_246":335,"_26":336},{"_40":322,"_31":323,"_29":324,"_136":325,"_38":39,"_37":326,"_138":56,"_35":327,"_13":60,"_32":20,"_33":328,"_23":24,"_141":-5,"_246":329,"_26":330},{"_40":317,"_31":308,"_29":302,"_136":185,"_38":39,"_37":318,"_138":56,"_35":319,"_13":60,"_32":188,"_33":-5,"_23":24,"_141":-5,"_246":320,"_26":321},{"_40":309,"_31":310,"_29":311,"_136":302,"_38":39,"_37":312,"_138":56,"_35":313,"_13":60,"_32":20,"_33":314,"_23":24,"_141":-5,"_246":315,"_26":316},{"_40":299,"_31":300,"_29":301,"_136":302,"_38":39,"_37":303,"_138":56,"_35":304,"_13":60,"_32":20,"_33":305,"_23":24,"_141":-5,"_246":306,"_26":307},{"_40":291,"_31":292,"_29":293,"_136":185,"_38":39,"_37":294,"_138":56,"_35":295,"_13":60,"_32":20,"_33":296,"_23":24,"_141":-5,"_246":297,"_26":298},{"_40":283,"_31":284,"_29":285,"_136":185,"_38":39,"_37":286,"_138":56,"_35":287,"_13":60,"_32":20,"_33":288,"_23":24,"_141":-5,"_246":289,"_26":290},{"_40":275,"_31":276,"_29":277,"_136":185,"_38":39,"_37":278,"_138":56,"_35":279,"_13":60,"_32":20,"_33":280,"_23":24,"_141":-5,"_246":281,"_26":282},{"_40":267,"_31":268,"_29":269,"_136":185,"_38":39,"_37":270,"_138":56,"_35":271,"_13":60,"_32":20,"_33":272,"_23":24,"_141":-5,"_246":273,"_26":274},{"_40":176,"_31":177,"_29":178,"_136":-5,"_38":39,"_37":179,"_138":56,"_35":264,"_13":60,"_32":20,"_33":181,"_23":24,"_141":-5,"_246":265,"_26":266},{"_40":169,"_31":170,"_29":171,"_136":-5,"_38":39,"_37":172,"_138":56,"_35":261,"_13":60,"_32":20,"_33":174,"_23":24,"_141":-5,"_246":262,"_26":263},{"_40":160,"_31":161,"_29":162,"_136":-5,"_38":39,"_37":163,"_138":56,"_35":258,"_13":165,"_32":166,"_33":167,"_23":24,"_141":-5,"_246":259,"_26":260},{"_40":153,"_31":154,"_29":155,"_136":-5,"_38":39,"_37":156,"_138":56,"_35":255,"_13":60,"_32":20,"_33":158,"_23":24,"_141":-5,"_246":256,"_26":257},{"_40":146,"_31":147,"_29":148,"_136":-5,"_38":39,"_37":149,"_138":56,"_35":252,"_13":60,"_32":20,"_33":151,"_23":24,"_141":-5,"_246":253,"_26":254},{"_40":143,"_31":27,"_29":30,"_136":-5,"_38":39,"_37":14,"_138":56,"_35":249,"_13":60,"_32":20,"_33":34,"_23":24,"_141":-5,"_246":250,"_26":251},{"_40":133,"_31":134,"_29":135,"_136":-5,"_38":39,"_37":137,"_138":56,"_35":245,"_13":60,"_32":20,"_33":140,"_23":24,"_141":-5,"_246":247,"_26":248},["D",1771258204346],"children",[],[134],["D",1771258209807],[],[27],["D",1771258208024],[],[147],["D",1771257880798],[],[154],["D",1771257876286],[],[161],["D",1771257881597],[],[170],["D",1771257877744],[],[177],"3cd8aea6-0b51-11f1-a77d-42dde27851f2","vite-env.d.ts","3cd8af82-0b51-11f1-a77d-42dde27851f2",12,["D",1771257896614],"/// \n",[],[184,268],"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",[],[184,276],"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",[],[184,284],"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",[],[184,292],"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",[],[184,308,300],"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",[],[184,308,310],"390efcbc-0b51-11f1-a585-42dde27851f2",9,["D",1771257890261],[232,233],[184,308],"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",[],[184,331,323],"lib","40f67ba8-0b51-11f1-9ae4-42dde27851f2",13,["D",1771257903527],[230],[184,331],"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",[],[184,346,338],"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",[],[184,346,348],"4123205e-0b51-11f1-bd12-42dde27851f2",14,["D",1771257903810],[227,228],[184,346],"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",[],[184,369,361],"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",[],[184,369,371],"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",[],[184,369,379],"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",[],[184,369,387],"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",[],[184,369,395],"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",[],[184,369,403],"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",[],[184,369,419,411],"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",[],[184,369,419,421],"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",[],[184,369,419,429],"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",[],[184,369,419,437],"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",[],[184,369,419,445],"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",[],[184,369,419,453],"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",[],[184,369,419,461],"46964480-0b51-11f1-bf2e-42dde27851f2",16,["D",1771257912949],[213,214,215,216,217,218,219],[184,369,419],"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",[],[184,369,482,474],"bank-logos","9081ea72-0b51-11f1-bfcb-42dde27851f2","VolksbankLogo.tsx","9081eb6c-0b51-11f1-bfcb-42dde27851f2",36,["D",1771258036774],"export const VolksbankLogo = () => (\n \n);\n",[],[184,369,482,484],"8f6ecf56-0b51-11f1-963d-42dde27851f2","SparkasseLogo.tsx","8f6ed014-0b51-11f1-963d-42dde27851f2",35,["D",1771258035178],"export const SparkasseLogo = () => (\n \n);\n",[],[184,369,482,492],"8ead5614-0b51-11f1-879b-42dde27851f2","PostbankLogo.tsx","8ead56b4-0b51-11f1-879b-42dde27851f2",34,["D",1771258033910],"export const PostbankLogo = () => (\n \n);\n",[],[184,369,482,500],"939e00e2-0b51-11f1-87ec-42dde27851f2","PSDBankLogo.tsx","939e018c-0b51-11f1-87ec-42dde27851f2",39,["D",1771258042189],"export const PSDBankLogo = () => (\n \n);\n",[],[184,369,482,508],"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",[],[184,369,482,516],"923faf7a-0b51-11f1-a2ed-42dde27851f2","GLSBankLogo.tsx","923fb06a-0b51-11f1-a2ed-42dde27851f2",38,["D",1771258039905],"export const GLSBankLogo = () => (\n \n);\n",[],[184,369,482,524],"8d95b6fe-0b51-11f1-b3b4-42dde27851f2","DeutscheBankLogo.tsx","8d95b7bc-0b51-11f1-b3b4-42dde27851f2",33,["D",1771258032079],"export const DeutscheBankLogo = () => (\n \n);\n",[],[184,369,482,532],"913eece4-0b51-11f1-afe4-42dde27851f2","BBBankLogo.tsx","913eedc0-0b51-11f1-afe4-42dde27851f2",37,["D",1771258038210],"export const BBBankLogo = () => (\n \n);\n",[],[184,369,482,540],"46ba3214-0b51-11f1-8ae0-42dde27851f2",17,["D",1771257913198],[203,204,205,206,207,208,209,210,211],[184,369,482],"41526f8a-0b51-11f1-9f9d-42dde27851f2",15,["D",1771257904127],[202,212,220,221,222,223,224,225],[184,369],["D",1771257890115],[201,226,229,231,234,235,236,237],[184],["D",1771257755381],{"_94":93,"_102":98},{"_94":93,"_95":96,"_97":98,"_18":52,"_99":100,"_101":24},{"_13":83,"_31":84,"_40":39,"_85":41,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":42,"_92":93},"ctx",{"_76":-5,"_122":597,"_598":599,"_600":601,"_602":24,"_603":24,"_604":24,"_605":56,"_606":-5,"_607":-7,"_608":-7,"_609":60,"_610":24,"_611":24,"_612":-5,"_613":24,"_614":24,"_615":24,"_616":-5},"ENV",{"_568":569,"_570":571,"_572":84,"_573":574,"_575":576,"_577":578,"_579":580,"_581":582,"_583":584,"_585":586,"_587":588,"_589":590,"_591":592,"_593":594,"_595":596},"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"]

Diff · v50