/* global React, LWC_BOOKS, LWC_REVIEWS, LWC_TRUST, LWC_CHARACTERS, LWC_COVER_IMAGES, LWC_AUDIO_DEMOS, LWC_NAME_FONTS */ const { useEffect, useState } = React; function getCoverImage(book, character) { return LWC_COVER_IMAGES?.[book.id]?.[character.id] || book.coverImage || character.coverImage; } function getCharactersForGender(gender) { return LWC_CHARACTERS.filter(character => character.gender === gender); } function getFirstCharacterForGender(gender) { return getCharactersForGender(gender)[0] || LWC_CHARACTERS[0]; } function normalizeChildName(value) { const cleaned = value.replace(/\s+/g, " ").replace(/^\s+/, ""); if (!cleaned) return ""; return cleaned.replace(/(^|[\s-])([a-z])/g, (_, prefix, letter) => `${prefix}${letter.toUpperCase()}`); } function shuffleArray(items) { const copy = [...items]; for (let i = copy.length - 1; i > 0; i -= 1) { const swapIndex = Math.floor(Math.random() * (i + 1)); [copy[i], copy[swapIndex]] = [copy[swapIndex], copy[i]]; } return copy; } const POPULAR_US_GIRL_NAMES = [ "Olivia", "Charlotte", "Emma", "Amelia", "Sophia", "Mia", "Isabella", "Evelyn", "Sofia", "Eliana", ]; const POPULAR_US_BOY_NAMES = [ "Liam", "Noah", "Oliver", "Theodore", "Henry", "James", "Elijah", "Mateo", "William", "Lucas", ]; function SampleBookScroller({ book, name, character, nameFont, compact = false }) { const dragRef = React.useRef({ active: false, startX: 0, deltaX: 0 }); const [pageIndex, setPageIndex] = useState(0); const isCompact = compact || useIsNarrow(); const samples = book.samplePages || []; const pageCount = samples.length + 1; const coverImage = getCoverImage(book, character); const previewItems = [ { id: "cover", kind: "cover", title: "Cover", thumb: coverImage }, ...samples.map((sample, index) => ({ id: sample.src, kind: "page", title: sample.title, thumb: sample.src, pageNumber: index + 1, src: sample.src, })), ]; useEffect(() => { setPageIndex(0); dragRef.current = { active: false, startX: 0, deltaX: 0 }; }, [book.id, character.id]); function onPointerDown(event) { dragRef.current = { active: true, startX: event.clientX, deltaX: 0 }; event.currentTarget.setPointerCapture?.(event.pointerId); } function onPointerMove(event) { if (!dragRef.current.active) return; event.preventDefault(); dragRef.current.deltaX = event.clientX - dragRef.current.startX; } function endDrag(event) { const threshold = isCompact ? 36 : 52; const deltaX = dragRef.current.deltaX; dragRef.current.active = false; event.currentTarget?.releasePointerCapture?.(event.pointerId); if (Math.abs(deltaX) < threshold) return; setPageIndex(current => Math.max(0, Math.min(pageCount - 1, current + (deltaX < 0 ? 1 : -1)))); } function goToPage(next) { setPageIndex(Math.max(0, Math.min(pageCount - 1, next))); } const arrowButton = { position: "absolute", top: "50%", transform: "translateY(-50%)", width: 46, height: 46, borderRadius: 999, border: "1px solid var(--border-soft)", background: "rgba(255, 252, 246, .94)", color: "var(--fg-primary)", boxShadow: "var(--shadow-card)", display: "grid", placeItems: "center", cursor: "pointer", zIndex: 3, }; const activeItem = previewItems[pageIndex]; const railMinWidth = isCompact ? "100%" : 96; const pageHeight = isCompact ? "min(42vh, 360px)" : "min(58vh, 560px)"; function renderMockup(item) { if (item.kind === "cover") { return (
); } return (
{`${book.title}
); } return (
{previewItems.map((item, index) => { const active = index === pageIndex; return ( ); })}
{renderMockup(activeItem)}
{pageIndex === 0 ? "Swipe through cover + sample pages" : `Sample ${pageIndex} of ${samples.length} · ${activeItem.title}`}
{Array.from({ length: pageCount }).map((_, index) => ( ))}
); } const INFO_PAGES = { returns: { eyebrow: "Returns policy", title: "Fair, plain-English support if something is not right.", intro: "Every book is printed especially for your child, so our returns policy is designed around made-to-order keepsakes while still protecting you if anything arrives damaged, faulty, or incorrect.", sections: [ { title: "Personalized books and change of mind", body: [ "Because each book is made with your child's name on the cover and throughout the story, we cannot accept returns for change of mind once production has started.", "Please double-check the spelling, book title, and delivery details before ordering. If you spot an issue quickly, email us and we will help if production has not begun.", ], }, { title: "Damaged or defective books", body: [ "If your book arrives damaged, misprinted, or with a production defect, we will make it right with a replacement or refund.", "Email hello@learnwithcoloring.com within 7 days of delivery with your order reference, a clear photo of the issue, and your preferred resolution.", ], }, { title: "Wrong item received", body: [ "If we send the wrong title, wrong name, or wrong order, that is on us. We will send the correct book at no extra cost, or refund you if you prefer.", ], }, { title: "Waitlist and pre-launch", body: [ "Joining the waitlist does not take payment. Refunds only apply once paid orders are open and an order has been placed.", ], }, ], }, delivery: { eyebrow: "Shipping", title: "Made to order, packed carefully, sent with tracking.", intro: "The current launch plan is USA printing and delivery first, with wider shipping options to follow. Timings below apply once paid orders open.", sections: [ { title: "Standard delivery", body: [ "Books are printed to order. Please allow 1-2 business days for production before dispatch.", "Standard delivery is expected to take 3-5 business days after dispatch. We will email tracking details when your book leaves the printer.", ], }, { title: "Packaging", body: [ "Each book is sent in protective packaging so it arrives flat, clean, and ready to give or colour straight away.", ], }, { title: "International shipping", body: [ "International delivery is planned after launch. If you are outside the USA, join the waitlist and we will let you know when your location opens.", ], }, ], }, privacy: { eyebrow: "Privacy policy", title: "We collect only what we need to make and deliver your book.", intro: "Last updated: May 2026. This summary keeps the earlier policy content and aligns it with the new waitlist-first experience.", sections: [ { title: "What we collect", body: [ "We may collect a parent or guardian's name, email address, book preferences, child name for personalization, order details, and delivery address when orders open.", "We do not knowingly collect data directly from children. The service is for parents, guardians, and gift-givers.", ], }, { title: "How we use it", body: [ "We use your information to manage waitlist signups, produce personalized books, send order and shipping updates, provide support, and improve the website.", "Marketing emails are optional. You can unsubscribe or ask us to remove waitlist data by emailing hello@learnwithcoloring.com.", ], }, { title: "Sharing and storage", body: [ "We do not sell personal data. We only share what is needed with trusted providers such as print partners, shipping partners, payment processors, and email services.", "Waitlist data is kept only as long as needed for launch communications, unless you ask us to remove it sooner.", ], }, { title: "Your choices", body: [ "You can ask to access, correct, or delete your personal data by contacting hello@learnwithcoloring.com.", ], }, ], }, terms: { eyebrow: "Terms of use", title: "The practical terms for using Learn with Coloring.", intro: "Last updated: May 2026. By using the site or joining the waitlist, you agree to use the service lawfully and provide accurate information.", sections: [ { title: "Pre-launch waitlist", body: [ "We are currently operating a waitlist. Joining expresses interest only. No payment is taken and no contract of sale is formed until paid orders open and we confirm an order.", ], }, { title: "Personalization", body: [ "You are responsible for checking that personalization details are accurate and appropriate. We produce made-to-order books using the information you provide.", "If we make an error in production, we will investigate and arrange a fair replacement or refund.", ], }, { title: "Pricing and availability", body: [ "The design-system launch price is $19.99 per book, with the optional audio adventure shown at +$9.99. Final availability and checkout terms will be confirmed at launch.", ], }, { title: "Intellectual property", body: [ "The Learn with Coloring brand, copy, artwork, layouts, and product concepts belong to Learn with Coloring. Purchasing a book grants personal use of the physical product, not reuse of the underlying artwork.", ], }, ], }, cookies: { eyebrow: "Cookie policy", title: "Small files, used only where they help the site work better.", intro: "Last updated: May 2026. This page explains the cookie approach for the storefront prototype and launch site.", sections: [ { title: "Essential cookies", body: [ "Essential cookies may be used to keep forms, waitlist state, checkout, and security features working properly.", ], }, { title: "Analytics cookies", body: [ "If analytics are enabled, they help us understand which pages people visit and where the site needs improvement. Analytics should be used in aggregate, not to sell personal profiles.", ], }, { title: "Managing cookies", body: [ "You can block or delete cookies in your browser settings. Some essential features may not work correctly if all cookies are disabled.", ], }, ], }, faq: { eyebrow: "FAQ", title: "Answers for parents before launch.", intro: "A quick, updated version of the earlier FAQ, focused on the new personalized book plus audio adventure offer.", sections: [ { title: "What is Learn with Coloring?", body: [ "It is a premium personalized coloring book with your child's name woven into the cover and story, paired with an optional immersive audio adventure.", ], }, { title: "What ages is it for?", body: [ "The books are designed for children aged roughly 3-8, with bold scenes, calm storytelling, and enough detail to make colouring feel satisfying.", ], }, { title: "How does the audio work?", body: [ "The audio adventure is a narrated, scene-by-scene companion with music and sound effects, so your child can listen while colouring without needing a screen.", ], }, { title: "Can I order now?", body: [ "The app is currently collecting waitlist interest. You can choose books, add the audio option, and save your email to be notified when ordering opens.", ], }, { title: "Can personalized books be returned?", body: [ "Personalized books cannot usually be returned for change of mind, but damaged, defective, or incorrect orders will be fixed with a replacement or refund.", ], }, ], }, contact: { eyebrow: "Contact", title: "Need a hand before you join the waitlist?", intro: "We are a small team and we genuinely want the book to feel right before you order.", sections: [ { title: "Email", body: [ "Write to hello@learnwithcoloring.com with questions about personalization, shipping, gifting, returns, or launch timing.", ], }, { title: "Response time", body: [ "We aim to reply within one business day during launch preparation.", ], }, ], }, }; function InfoScreen({ page = "faq", onNavigate }) { const info = INFO_PAGES[page] || INFO_PAGES.faq; return (

{info.eyebrow}

{info.title}

{info.intro}

{info.sections.map((section) => (

{section.title}

{section.body.map((para, index) => (

{para}

))}
))}

Still need help?

Email hello@learnwithcoloring.com and we will point you in the right direction.

); } // ---- Home ---- function BrandSchemeToggle({ scheme, onChange }) { const isMobile = useIsNarrow(); const options = [ { id: "storybook", label: "Storybook navy" }, { id: "forest", label: "Forest green" }, ]; return (
{options.map(option => { const active = scheme === option.id; return ( ); })}
); } function GenderQuickPick({ character, setCharacterId }) { const isMobile = useIsNarrow(); return (
Start with
{["girl", "boy"].map(option => { const active = character.gender === option; const firstForGender = LWC_CHARACTERS.find(c => c.gender === option); return ( ); })}
); } function HomeScreen({ name, setName, character, setCharacterId, nameFont, brandScheme, setBrandScheme, onOpenProduct, onNavigate }) { const isMobile = useIsNarrow(); const [activeAudioBook, setActiveAudioBook] = useState(null); const [heroCoverIndex, setHeroCoverIndex] = useState(0); const [isNameEditing, setIsNameEditing] = useState(false); const [frozenHero, setFrozenHero] = useState(null); const audioRef = React.useRef(null); const adventures = LWC_BOOKS.filter(b => b.category === "adventure"); const gifts = LWC_BOOKS.filter(b => b.category === "gift"); const byo = LWC_BOOKS.filter(b => b.category === "byo"); const previewName = name || "Emma"; const currentDemo = getDemoForCharacter(LWC_AUDIO_DEMOS, character, "fairy-glen"); const heroCharacters = getCharactersForGender(character.gender); const heroNames = React.useMemo(() => { if ((name || "").trim()) return [name]; const defaults = character.gender === "boy" ? POPULAR_US_BOY_NAMES : POPULAR_US_GIRL_NAMES; return shuffleArray(defaults); }, [name, character.gender]); const heroSequence = React.useMemo(() => { const shuffledCovers = shuffleArray( adventures.flatMap(book => heroCharacters.map(heroCharacter => ({ book, heroCharacter }))) ); if (heroNames.length <= 1) { return shuffledCovers.map(item => ({ ...item, heroName: heroNames[0] || previewName })); } return shuffledCovers.map((item, index) => ({ ...item, heroName: heroNames[index % heroNames.length], })); }, [adventures, heroCharacters, heroNames]); const rotatingHero = heroSequence[heroCoverIndex] || { book: adventures[0], heroCharacter: heroCharacters[0] || character, heroName: previewName, }; const hasTypedName = Boolean((name || "").trim()); const activeHero = isNameEditing && frozenHero ? frozenHero : rotatingHero; const displayHeroName = hasTypedName ? previewName : (activeHero.heroName || previewName); const heroVisualKey = hasTypedName ? `${activeHero.book.id}-${activeHero.heroCharacter.id}` : `${activeHero.book.id}-${activeHero.heroCharacter.id}-${activeHero.heroName}-${heroCoverIndex}`; useEffect(() => { setHeroCoverIndex(0); }, [character.gender]); useEffect(() => { if (isNameEditing) return undefined; if (heroSequence.length <= 1) return undefined; const timer = window.setInterval(() => { setHeroCoverIndex(current => (current + 1) % heroSequence.length); }, 3600); return () => window.clearInterval(timer); }, [heroSequence.length, character.gender, name, isNameEditing]); function toggleCardAudio(bookId) { const audio = audioRef.current; if (!audio) return; if (activeAudioBook === bookId && !audio.paused) { audio.pause(); setActiveAudioBook(null); return; } audio.pause(); audio.currentTime = 0; audio.src = currentDemo.src; audio.play() .then(() => setActiveAudioBook(bookId)) .catch(() => setActiveAudioBook(bookId)); } function scrollToAdventures() { document.getElementById("personalized-adventures")?.scrollIntoView({ behavior: "smooth", block: "start" }); } function handleNameFocus() { setFrozenHero(rotatingHero); setIsNameEditing(true); } function handleNameBlur() { setIsNameEditing(false); setFrozenHero(null); } return (
); } function ProductDetailSections({ book, name, character, hasAudio }) { const isMobile = useIsNarrow(); const childName = name || "Emma"; const [openFaq, setOpenFaq] = useState(null); const firstSample = book.samplePages?.[0]; const secondSample = book.samplePages?.[1] || firstSample; const detailRows = [ { title: "How is the book personalized?", body: `${childName}'s name appears on the cover and throughout the adventure. For personalized adventures, parents can also choose a cover character that feels closest to their child.`, }, { title: "What's the story?", body: `${book.title} is a gentle, imaginative coloring adventure built for small children: simple scenes, friendly characters, and enough story to make every page feel like part of one journey.`, }, { title: "Size & quality", body: `${book.pages} coloring pages for ages 3-10, planned as a premium printed book on thick cream paper with a keepsake-style cover.`, }, ]; if (hasAudio) { detailRows.push({ title: "Audio companion", body: "Personalized adventures can include a narrated audio version, so children can listen along while coloring without needing to watch a screen.", }); } const faqs = [ { q: `What age is ${book.title} best for?`, a: "The page style and story rhythm are designed for children aged 3-10, with simple scenes for younger kids and enough detail for older children to enjoy.", }, { q: "Can I preview pages first?", a: "Yes. The preview book on this page lets you swipe through the cover and sample coloring pages before joining the waitlist.", }, { q: "Is audio included?", a: hasAudio ? "Audio is an optional add-on for personalized adventures. Gift books and mix-and-match books are planned as printed books only for now." : "No. Gift books and mix-and-match books are planned as printed books only for now.", }, ]; return ( <>

This one's a keeper

A little book with their name woven in.

It is designed to feel personal before the first page is colored: their name on the cover, their chosen character in the scene, and a gentle story that makes the book feel made for them.

{firstSample ? ( {`${book.title} ) : ( )}
{secondSample && ( {`${book.title} )}

For them, page after page

Coloring, story, and a keepsake in one.

Each spread gives children something calm and creative to do, while the personalized story makes the finished book feel worth keeping on the shelf.

Product details

{detailRows.map(row => (

{row.title}

{row.body}

))}

Early family feedback

"Parents in our initial testing group loved the idea of a coloring book that feels personal, especially when the child's name appears in the story."

Based on early concept testing, not public customer reviews.

FAQs for {book.title}

{faqs.map((item, index) => { const open = openFaq === index; return (
{open && (

{item.a}

)}
);})}

Launch updates

Join the list for first access.

We will send one useful launch email when personalized ordering opens.

); } function PersonalizeModal({ open, onClose, book, name, setName, character, setCharacterId, nameFont, setNameFontId, audio, setAudio, hasAudio, onWaitlist }) { const isMobile = useIsNarrow(); const [step, setStep] = useState(0); const [parentName, setParentName] = useState(""); const [parentEmail, setParentEmail] = useState(""); const previewImages = LWC_COVER_IMAGES?.[book.id]; const launchBookPrice = 19.99; const launchBundlePrice = 24.99; const standardBookPrice = 29.99; const standardBundlePrice = 39.99; const selectedGender = character.gender; const genderCharacters = getCharactersForGender(selectedGender); const childName = name || "Emma"; const launchPrice = hasAudio && audio ? launchBundlePrice : launchBookPrice; const stepTitles = [ "Child's name", "Girl or boy", "Cover variant", "Name style", "Final review", ]; useEffect(() => { if (!open) return; setStep(0); setParentName(""); setParentEmail(""); }, [open, book.id]); if (!open) return null; const canContinue = [ (name || "").trim().length > 0, Boolean(character?.gender), Boolean(character?.id), Boolean(nameFont?.id), parentName.trim().length > 0 && parentEmail.includes("@"), ][step]; function moveStep(direction) { setStep(current => Math.max(0, Math.min(stepTitles.length - 1, current + direction))); } function renderStepContent() { if (step === 0) { return (

Step 1

Start with the child's name.

Start with the name you want to see on the cover and throughout the adventure.

); } if (step === 1) { return (

Step 2

Choose girl or boy.

Choose the version that matches your child best before we fine-tune the cover.

{["girl", "boy"].map(option => { const active = selectedGender === option; const firstForGender = getFirstCharacterForGender(option); return ( ); })}
); } if (step === 2) { return (

Step 3

Pick the closest cover variant.

Pick the cover look that feels most like your child. Each option keeps the same magical world while changing the child on the cover.

{LWC_COVER_IMAGES?.[book.id] && ( )}
); } if (step === 3) { return (

Step 4

Choose the name style.

Choose the lettering style you’d love to see on the finished cover.

); } return (

Step 5

Final review and launch offer.

Here’s the finished version with the preview pages, plus the optional audio companion before you reserve your launch spot.

{hasAudio && ( )}
Add me to the waitlist and reserve the launch offer ${launchPrice.toFixed(2)}

{audio ? <>Instead of ${standardBundlePrice.toFixed(2)} for the full bundle with audio, the launch offer is ${launchBundlePrice.toFixed(2)}. : <>Instead of ${standardBookPrice.toFixed(2)} for the coloring book alone, the launch offer is ${launchBookPrice.toFixed(2)}.}

No payment now. We’ll only email you when this exact version is ready to order.

); } return ( <>

{book.theme}

{stepTitles[step]}

{stepTitles.map((title, index) => ( ))}
{step === stepTitles.length - 1 ? ( ) : (
{book.title} {selectedGender === "girl" ? `${genderCharacters.length} girl cover variants` : `${genderCharacters.length} boy cover variants`}
)}
{renderStepContent()} {step < stepTitles.length - 1 && (
We’ll keep the current cover preview visible as you move through each step.
)}
{step > 0 && ( )} Step {step + 1} of {stepTitles.length}
{step < stepTitles.length - 1 ? ( ) : ( )}
); } // ---- Product detail ---- function ProductScreen({ bookId, name, setName, character, setCharacterId, nameFont, setNameFontId, onBack, onAdd, onNavigate }) { const isMobile = useIsNarrow(); const book = LWC_BOOKS.find(b => b.id === bookId) || LWC_BOOKS[0]; const hasAudio = book.category === "adventure"; const [audio, setAudio] = useState(hasAudio); const [personalizeOpen, setPersonalizeOpen] = useState(false); useEffect(() => setAudio(hasAudio), [book.id, hasAudio]); const heroFeatures = [ "Best for ages 3-10", `Preview ${book.samplePages?.length || 4} sample pages before launch`, "Personalized cover and story", hasAudio ? "Optional narrated audio companion" : "Printed gift book only", ]; return (

{book.theme}

{book.title}

{book.subtitle} Hand-illustrated, on premium 200gsm cream paper.

{Array.from({ length: 5 }).map((_, i) => )} Based on initial family testing
{heroFeatures.map(feature => (
{feature}
))}
Step through cover, character, font and{hasAudio ? " audio" : " preview"} next
setPersonalizeOpen(false)} book={book} name={name} setName={setName} character={character} setCharacterId={setCharacterId} nameFont={nameFont} setNameFontId={setNameFontId} audio={audio} setAudio={setAudio} hasAudio={hasAudio} onWaitlist={({ parentName, parentEmail, launchPrice }) => { onAdd(book, audio, name || "Emma", { parentName, parentEmail, launchPrice }); setPersonalizeOpen(false); }} />
); } // ---- Waitlist drawer ---- function CartDrawer({ open, items, onClose, onCheckout, onRemove }) { const isMobile = useIsNarrow(); const [email, setEmail] = React.useState(""); const [submitted, setSubmitted] = React.useState(false); useEffect(() => { const reservedEmail = items.find(item => item.email)?.email || ""; if (reservedEmail) { setEmail(reservedEmail); setSubmitted(true); return; } if (!open) { setEmail(""); setSubmitted(false); } }, [items, open]); return ( <>
); } // ---- App ---- function App() { const urlParams = new URL(window.location.href).searchParams; const initialName = normalizeChildName(urlParams.get("name") || ""); const initialCharacterId = urlParams.get("character"); const hasInitialCharacter = LWC_CHARACTERS.some(character => character.id === initialCharacterId); const routeFromLocation = () => { const url = new URL(window.location.href); const bookId = url.searchParams.get("book"); const pageParam = url.searchParams.get("page"); const hashValue = window.location.hash.replace(/^#\/?/, ""); const page = pageParam || hashValue; if (bookId && LWC_BOOKS.some(book => book.id === bookId)) { return { name: "product", id: bookId }; } return INFO_PAGES[page] ? { name: "info", page } : { name: "home" }; }; const [route, setRoute] = useState(routeFromLocation); const [name, setNameState] = useState(initialName); const [characterId, setCharacterId] = useState(hasInitialCharacter ? initialCharacterId : "girl-medium-black"); const [nameFontId, setNameFontId] = useState("storybook"); const [brandScheme, setBrandScheme] = useState("storybook"); const [cart, setCart] = useState([]); const [cartOpen, setCartOpen] = useState(false); const character = LWC_CHARACTERS.find(c => c.id === characterId) || LWC_CHARACTERS[0]; const nameFont = LWC_NAME_FONTS.find(f => f.id === nameFontId) || LWC_NAME_FONTS[0]; function setName(value) { setNameState(normalizeChildName(value)); } useEffect(() => { const syncRoute = () => setRoute(routeFromLocation()); window.addEventListener("hashchange", syncRoute); window.addEventListener("popstate", syncRoute); return () => { window.removeEventListener("hashchange", syncRoute); window.removeEventListener("popstate", syncRoute); }; }, []); useEffect(() => { document.body.dataset.brandScheme = brandScheme === "forest" ? "forest" : "storybook"; }, [brandScheme]); function navigate(page) { const url = new URL(window.location.href); if (page === "home") { url.searchParams.delete("book"); url.searchParams.delete("page"); url.hash = ""; window.history.pushState("", document.title, `${url.pathname}${url.search}`); setRoute({ name: "home" }); } else { url.searchParams.delete("book"); url.searchParams.set("page", page); url.hash = ""; window.history.pushState("", document.title, `${url.pathname}${url.search}`); setRoute(INFO_PAGES[page] ? { name: "info", page } : { name: "home" }); } window.scrollTo({ top: 0 }); } function openProduct(id) { const url = new URL(window.location.href); url.searchParams.set("book", id); url.searchParams.delete("page"); url.hash = ""; window.history.pushState("", document.title, `${url.pathname}${url.search}`); setRoute({ name: "product", id }); window.scrollTo({ top: 0 }); } function addToCart(book, audio, forName, meta = {}) { const launchPrice = meta.launchPrice || (book.category === "adventure" ? (audio ? 24.99 : 19.99) : book.price); setCart(c => [...c, { id: book.id, title: book.title, bg: book.bg, name: forName, audio, price: launchPrice, email: meta.parentEmail || "", parentName: meta.parentName || "", }]); setCartOpen(true); } return ( <>
navigate("home")} onBrowse={() => navigate("home")} onCart={() => setCartOpen(true)} onNavigate={navigate} /> {route.name === "home" && ( )} {route.name === "product" && ( navigate("home")} onAdd={addToCart} onNavigate={navigate}/> )} {route.name === "info" && ( )} setCartOpen(false)} onRemove={i => setCart(c => c.filter((_, n) => n !== i))} onCheckout={(books, email) => console.log("[waitlist]", email, books.map(b => `${b.title} for ${b.name}`))}/> ); } Object.assign(window, { HomeScreen, ProductScreen, CartDrawer, App });