62:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 63:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 64:T85b2,"use client"; import * as React from "react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { clsx, type ClassValue } from "clsx"; import { twMerge } from "tailwind-merge"; function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } export interface NewsletterIssue { number: number; title: string; images: string[]; } export interface NewsletterDiscountModalProps { store?: string; /** Percent off the first order. */ discount?: number; code?: string; /** How long the code is valid after signing up, in hours. */ validHours?: number; issue?: NewsletterIssue; interests?: string[]; /** Open automatically after this many milliseconds. Set to null to wait for the teaser. */ openAfter?: number | null; /** Return a Promise to keep the button busy while you subscribe the email. */ onSubscribe?: (value: { email: string; frequency: "weekly" | "drops"; interests: string[] }) => void | Promise; onApply?: (code: string) => void; theme?: "dark" | "light"; className?: string; } const PALETTES = { dark: { bg: "#0A0A0A", title: "#FFFFFF", muted: "rgba(255,255,255,0.45)", body: "rgba(255,255,255,0.65)", line: "rgba(255,255,255,0.12)", panel: "#121212", photo: "#F1F1F1", input: "#0D0D0D", scrim: "rgba(0,0,0,0.6)", buttonBg: "#FFFFFF", buttonText: "#111111", accent: "#7CDE6A", error: "#FF6B57", ring: "rgba(255,255,255,0.5)", ticket: "#7CDE6A", ticketText: "#0B1A08", }, light: { bg: "#FFFFFF", title: "#111111", muted: "rgba(0,0,0,0.45)", body: "rgba(0,0,0,0.65)", line: "rgba(0,0,0,0.1)", panel: "#FFFFFF", photo: "#F1F1F1", input: "#FAFAF9", scrim: "rgba(10,10,10,0.4)", buttonBg: "#111111", buttonText: "#FFFFFF", accent: "#2F9E44", error: "#D9480F", ring: "rgba(0,0,0,0.45)", ticket: "#111111", ticketText: "#FFFFFF", }, }; // The letter is paper in both themes. const PAPER = { bg: "#FAF8F3", ink: "#141414", soft: "rgba(20,20,20,0.55)", rule: "rgba(20,20,20,0.12)", stamp: "#D9480F", }; const ISSUE: NewsletterIssue = { number: 42, title: "The desk edit: five things we reach for every day", images: ["/demo/laptop-stand.webp", "/demo/notebook.webp", "/demo/minimal-watch.webp", "/demo/wireless-earbuds.webp"], }; const INTERESTS = ["Audio", "Desk setup", "Outdoor", "Watches"]; const GRID = [ "/demo/wireless-earbuds.webp", "/demo/minimal-watch.webp", "/demo/running-shoes.webp", "/demo/laptop-stand.webp", "/demo/notebook.webp", "/demo/insulated-water-bottle.webp", "/demo/blocks/product-list/headphones.webp", "/demo/blocks/product-list/backpack.webp", ]; const FREQUENCIES = [ { id: "weekly" as const, label: "Weekly letter", detail: "Thursdays, one email", }, { id: "drops" as const, label: "Drops only", detail: "New products, ~2 a month", }, ]; const EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/; const pad = (n: number) => String(n).padStart(2, "0"); export function NewsletterDiscountModal({ store = "Northline", discount = 15, code = "LETTER15", validHours = 48, issue = ISSUE, interests = INTERESTS, openAfter = 900, onSubscribe, onApply, theme = "dark", className }: NewsletterDiscountModalProps) { const p = PALETTES[theme]; const reduce = !!useReducedMotion(); const uid = React.useId(); const [open, setOpen] = React.useState(false); const [teaser, setTeaser] = React.useState(false); const [step, setStep] = React.useState<"form" | "done">("form"); const [email, setEmail] = React.useState(""); const [frequency, setFrequency] = React.useState<"weekly" | "drops">("weekly"); const [picked, setPicked] = React.useState([interests[1] ?? interests[0]].filter(Boolean)); const [error, setError] = React.useState(null); const [busy, setBusy] = React.useState(false); const [copied, setCopied] = React.useState(false); const [applied, setApplied] = React.useState(false); const [expiresAt, setExpiresAt] = React.useState(null); const [now, setNow] = React.useState(0); const teaserRef = React.useRef(null); const emailRef = React.useRef(null); React.useEffect(() => { if (openAfter === null) { const t = setTimeout(() => setTeaser(true), 0); return () => clearTimeout(t); } const t = setTimeout(() => setOpen(true), reduce ? 0 : openAfter); return () => clearTimeout(t); }, [openAfter, reduce]); const close = React.useCallback(() => { setOpen(false); setTeaser(true); setTimeout(() => teaserRef.current?.focus({ preventScroll: true }), 0); }, []); React.useEffect(() => { if (!open) return; const onKey = (e: KeyboardEvent) => e.key === "Escape" && close(); window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [open, close]); React.useEffect(() => { if (!copied) return; const t = setTimeout(() => setCopied(false), 1600); return () => clearTimeout(t); }, [copied]); // The countdown only ticks once there's a code, and only in the browser. React.useEffect(() => { if (expiresAt === null) return; const tick = () => setNow(Date.now()); const first = setTimeout(tick, 0); const id = setInterval(tick, 1000); return () => { clearTimeout(first); clearInterval(id); }; }, [expiresAt]); const focusOnce = React.useCallback((el: HTMLElement | null) => { if (el && !el.dataset.f) { el.dataset.f = "1"; el.focus({ preventScroll: true }); } }, []); const submit = async (e: React.FormEvent) => { e.preventDefault(); if (!EMAIL.test(email.trim())) { setError("Enter an email like name@example.com."); emailRef.current?.focus(); return; } setError(null); setBusy(true); try { await onSubscribe?.({ email: email.trim(), frequency, interests: picked, }); if (!onSubscribe && !reduce) await new Promise((r) => setTimeout(r, 900)); setExpiresAt(Date.now() + validHours * 3600_000); setStep("done"); setTeaser(false); } catch { setError("Something went wrong. Please try again."); } finally { setBusy(false); } }; const copy = async () => { try { await navigator.clipboard?.writeText(code); } catch { /* clipboard can be blocked; the code is still on screen */ } setCopied(true); }; const reopen = () => { setTeaser(false); setOpen(true); }; const left = expiresAt === null || now === 0 ? validHours * 3600 : Math.max(0, Math.round((expiresAt - now) / 1000)); const countdown = `${pad(Math.floor(left / 3600))}:${pad(Math.floor((left % 3600) / 60))}:${pad(left % 60)}`; const ring = { ["--tw-ring-color" as string]: p.ring, ["--tw-ring-offset-color" as string]: p.panel, } as React.CSSProperties; const focus = "outline-none focus-visible:ring-2 focus-visible:ring-offset-2"; const done = step === "done"; const toggle = (x: string) => setPicked((list) => (list.includes(x) ? list.filter((y) => y !== x) : [...list, x])); return (

{/* Store page behind */}

{store} Shop Journal Cart (0)

{/* eslint-disable-next-line @next/next/no-img-element */}

{/* Teaser tab, left after closing without signing up. A zero-height sticky rail keeps it in the bottom corner of the screen while the section is in view, however tall it is. */}

{teaser && !open && step === "form" && ( )}

{open && ( e.target === e.currentTarget && close()} > )}

); } 61:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}],["$","li","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"clsx"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"tailwind-merge"}]]}]}]]}],["$","$L62",null,{"namespace":"@reactframe","registryDependencies":[]}]]}],null]}],["$","$L63",null,{"files":[{"path":"registry/new-york/newsletter-discount-modal/newsletter-discount-modal.tsx","content":"$64","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]

{discount}% off when you join the list.

Here's your {discount}% off.