61: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"] 62: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"] 63:T3b42,"use client" import * as React from "react" import { CircleAlert } from "lucide-react" import { MotionConfig, motion, useReducedMotion } from "motion/react" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Skeleton } from "@/components/ui/skeleton" import { cn } from "@/lib/utils" /* * How the shopper pays: one ruled list of methods — card, wallet, pay in * instalments, bank — where the chosen one opens onto your payment * provider's own fields. * * (m.id === "card" ? : null)} * total={777.6} * /> * * It never renders a card-number, expiry or CVC field. Each method's panel * is a slot — `renderPanel` — for Stripe's Payment Element, Adyen's Drop-in, * PayPal's buttons or a redirect notice. A panel stays mounted once opened * (`keepMounted`), hidden rather than destroyed, so a provider's iframe keeps * the half-typed card when the shopper looks at another method and comes * back. Panels sit outside the radio group, so the arrow keys move between * methods without ever reaching into a provider's fields — and laid out * under their own method, joined to it as one object. The heavy rule slides * to the chosen method and its panel grows to its measured height (Motion; * a fade under reduced motion). */ export interface PaymentMethod { id: string label: string /** "Visa, Mastercard, Amex". */ description?: React.ReactNode /** Your brand marks, at the row's end. ecomcn ships none: they are trademarks. */ icon?: React.ReactNode kind: "card" | "wallet" | "bnpl" | "bank" | "other" /** Pay in N: shows "3 payments of $259.20" from `total`. */ instalments?: number /** False when it can't be used here — Apple Pay outside Safari, say. */ available?: boolean /** Why, in words: "Needs Safari on an Apple device". */ unavailableReason?: string } /** The same settle curve as the other ecomcn morphs: no bounce, an editorial ease. */ const MORPH = { duration: 0.45, ease: [0.2, 0, 0, 1] } as const const FADE = { duration: 0.15 } as const const subscribeNothing = () => () => {} /** Your locale, or the visitor's once hydrated — so server and client HTML agree. */ function useFormatLocale(locale?: string) { const hydrated = React.useSyncExternalStore(subscribeNothing, () => true, () => false) return locale ?? (hydrated ? undefined : "en-US") } /* ─── context ──────────────────────────────────────────────────────────── */ export interface PaymentSelectorContextValue { methods: PaymentMethod[] /** The chosen method's id, or null before the shopper chooses. */ value: string | null select: (id: string) => void selected: PaymentMethod | undefined /** Methods opened so far — their panels stay mounted while `keepMounted`. */ opened: ReadonlySet keepMounted: boolean renderPanel?: (method: PaymentMethod) => React.ReactNode /** A provider failure, shown in the chosen method's panel. */ error: React.ReactNode /** "3 payments of $259.20", or null when the method or `total` doesn't say. */ instalmentText: (method: PaymentMethod) => string | null formatMoney: (amount: number) => string /** Where a method sits in the list — rows and panels are placed by it. */ indexOf: (id: string) => number panelId: (id: string) => string /** For the sliding rule's shared layout id. */ scope: string disabled: boolean } const PaymentSelectorContext = React.createContext(null) export function usePaymentSelector() { const context = React.useContext(PaymentSelectorContext) if (!context) { throw new Error("usePaymentSelector must be used within .") } return context } /* ─── root ─────────────────────────────────────────────────────────────── */ export interface PaymentSelectorProps extends Omit, "onChange" | "defaultValue" | "name" | "children"> { methods: PaymentMethod[] value: string | null onValueChange: (id: string) => void /** The provider slot. Return null for a method with nothing to show. */ renderPanel?: (method: PaymentMethod) => React.ReactNode /** The order total, for instalment lines. */ total?: number currency?: string /** `undefined` follows the visitor's locale, once hydrated. */ locale?: string /** A provider failure — "Your card was declined" — shown in the open panel. */ error?: React.ReactNode /** Keep a panel mounted once opened, so a provider's iframe keeps its state. Defaults to true. */ keepMounted?: boolean /** "Payment", by default. */ legend?: React.ReactNode /** Keeps the legend for screen readers when your page already has a heading. */ hideLegend?: boolean /** The radio group's name, for a plain form post. */ name?: string /** The methods aren't known yet. */ loading?: boolean disabled?: boolean children?: React.ReactNode } export function PaymentSelector({ methods, value, onValueChange, renderPanel, total, currency = "USD", locale: localeProp, error = null, keepMounted = true, legend = "Payment", hideLegend = false, name, loading = false, disabled = false, className, children, ...props }: PaymentSelectorProps) { const locale = useFormatLocale(localeProp) const uid = React.useId() const legendId = `${uid}-legend` // Every method opened so far; adjusted during render, so a panel mounts // in the same commit as its selection. const [opened, setOpened] = React.useState>(() => new Set(value ? [value] : [])) if (value && !opened.has(value)) setOpened(new Set([...opened, value])) const money = React.useMemo(() => new Intl.NumberFormat(locale, { style: "currency", currency }), [locale, currency]) const formatMoney = React.useCallback((amount: number) => money.format(amount), [money]) const instalmentText = React.useCallback( (method: PaymentMethod) => { const n = method.instalments if (!n || n < 2 || total === undefined) return null return `${n} payments of ${money.format(Math.round((total / n) * 100) / 100)}` }, [money, total] ) const ids = methods.map((m) => m.id).join("\n") const indexOf = React.useCallback((id: string) => ids.split("\n").indexOf(id), [ids]) const panelId = React.useCallback((id: string) => `${uid}-panel-${id}`, [uid]) const context = React.useMemo( () => ({ methods, value, select: onValueChange, selected: methods.find((m) => m.id === value), opened, keepMounted, renderPanel, error, instalmentText, formatMoney, indexOf, panelId, scope: uid, disabled, }), [methods, value, onValueChange, opened, keepMounted, renderPanel, error, instalmentText, formatMoney, indexOf, panelId, uid, disabled] ) const rows = methods.length * 2 return (

{legend} {loading ? ( ) : methods.length === 0 ? (

No payment method can be used for this order.

) : ( // Methods and panels share one grid: the radio group spans it as // a subgrid holding the method rows (odd rows), and each panel is // placed in the row under its method (even rows) — outside the // group in the DOM, so arrow keys never reach a provider's field. // Both are pinned to column 1: left to auto-placement, a panel // would find column 1 taken by the group and open a second one.

onValueChange(String(next))} name={name} disabled={disabled} aria-labelledby={legendId} className="grid gap-0" style={{ gridColumn: 1, gridRow: `1 / span ${rows}`, gridTemplateRows: "subgrid" }} > {children ?? methods.map((method) => )} {methods.map((method) => ( ))}

)}

) } /* ─── parts ────────────────────────────────────────────────────────────── */ export interface PaymentSelectorMethodProps extends React.HTMLAttributes { method: PaymentMethod } /** One method: the radio, its name, what it takes or costs, and your mark. */ export function PaymentSelectorMethod({ method, className, children, ...props }: PaymentSelectorMethodProps) { const { value, indexOf, panelId, instalmentText, scope, disabled } = usePaymentSelector() const reduce = useReducedMotion() const selected = value === method.id const unavailable = method.available === false const instalments = unavailable ? null : instalmentText(method) const noteId = `${panelId(method.id)}-note` const hasNote = unavailable || instalments || method.description return ( {selected ? ( ) : null} {method.label} {hasNote ? ( {unavailable ? (method.unavailableReason ?? "Not available for this order") : null} {!unavailable && instalments ? {instalments} : null} {!unavailable && method.description ? {method.description} : null} ) : null} {method.icon ? ( {method.icon} ) : null} {children} ) } /** * The provider slot under one method. Mounted from the first time its * method is chosen; while another is chosen it folds to nothing and is * hidden, never unmounted (unless `keepMounted` is off). */ function PaymentSelectorPanel({ method }: { method: PaymentMethod }) { const { value, opened, keepMounted, renderPanel, error, indexOf, panelId } = usePaymentSelector() const reduce = useReducedMotion() const hydrated = React.useSyncExternalStore(subscribeNothing, () => true, () => false) const open = value === method.id if (!open && !(keepMounted && opened.has(method.id))) return null const body = renderPanel?.(method) ?? null const showError = open && error if (body === null && !showError) return null const shown = reduce ? { opacity: 1, height: "auto", visibility: "visible" as const } : { opacity: 1, height: "auto", visibility: "visible" as const, transitionEnd: { overflow: "visible" } } const folded = { opacity: 0, height: 0, overflow: "hidden", transitionEnd: { visibility: "hidden" as const } } return (

{showError ? (

{error}

) : null} {body}

) } /** Three ruled rows in the list's shape, while the methods load. */ function PaymentSelectorSkeleton() { return (

Loading payment methods {[0, 1, 2].map((row) => (

))}

) } 60:["$","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","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","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":"lucide-react"}]]}]}]]}],["$","$L61",null,{"namespace":"@registrydirectory","registryDependencies":["radio-group","skeleton"]}]]}],null]}],["$","$L62",null,{"files":[{"path":"src/registry/ecomcn/payment-selector/payment-selector.tsx","content":"$63","type":"registry:component","target":"components/ecomcn/payment-selector.tsx"}],"className":"h-[70svh] min-h-80"}]]}]