2d:I[522016,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],""] 2e:I[406394,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"BlockTabs"] 2f:I[966139,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"PreviewFrame"] 30:I[967833,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"CodeView"] 31:T16e7,"use client"; import { useState } from "react"; import { Checkbox } from "@/components/ui/checkbox"; import { toast } from "@/components/ui/toast"; import { cn } from "@/lib/utils"; import { cheapestVariant, formatMoney } from "../../../lib/commerce/select"; import type { Product } from "../../../lib/commerce/types"; import { Price } from "../../ui/price/price"; import { useCart } from "../_shared/cart-store"; import { resolveProductHref, type PdpHrefs, type ProductHref } from "../_shared/links"; import { PendingButton } from "../_shared/pending-button"; import { OptionPills } from "../_shared/ui/option-pills"; import { DEFAULT_SIZES } from "../_shared/use-variant-selection"; export type PdpCompleteTheLookProps = { /** 2 to 3 products. The first is usually the product on the page. */ products: Product[]; sizes?: readonly string[]; /** Product handle(s) to leave out: pass the product being viewed. */ exclude?: string | string[]; title?: string; hrefFor?: ProductHref; /** Route overrides (product). hrefFor wins when both are given. */ hrefs?: PdpHrefs; /** Simulated latency before the bag updates. Default 600. */ delayMs?: number; className?: string; }; /** Two or three products in a row, one size choice each, one "Add all". The total is the sum of the listed prices, nothing more. */ export function PdpCompleteTheLook({ products, sizes = DEFAULT_SIZES, exclude, title = "Complete the look", hrefFor: hrefForProp, hrefs, delayMs = 600, className, }: PdpCompleteTheLookProps) { const hrefFor = resolveProductHref(hrefForProp, hrefs); const cart = useCart(); const skip = new Set([exclude ?? []].flat()); const items = products.filter((p) => !skip.has(p.handle)).slice(0, 3); const [included, setIncluded] = useState>({}); // Nothing is pre-checked: the shopper picks what to add. const [size, setSize] = useState>({}); const [missing, setMissing] = useState([]); const [pending, setPending] = useState(false); const on = (p: Product) => included[p.handle] === true; const chosen = items.filter(on); const total = chosen.reduce((n, p) => n + cheapestVariant(p).price.amount, 0); const currency = items[0] ? cheapestVariant(items[0]).price.currency : "USD"; const addAll = async () => { if (pending || chosen.length === 0) return; const lacking = chosen.filter((p) => !size[p.handle]).map((p) => p.handle); setMissing(lacking); if (lacking.length) return; setPending(true); await new Promise((r) => setTimeout(r, delayMs)); for (const p of chosen) { cart.add({ variantId: cheapestVariant(p).id, productHandle: p.handle, qty: 1, size: size[p.handle] }, p); } setPending(false); if (cart.ready) { toast({ message: chosen.length === 1 ? "Added" : `Added ${chosen.length} items`, state: "success", action: { label: "Open cart", run: () => cart.setOpen(true) }, }); } }; if (items.length < 2) return null; return (

{title}

{/* eslint-disable-next-line @next/next/no-img-element */} setIncluded((s) => ({ ...s, [p.handle]: c }))} className="absolute start-2 top-2 bg-canvas" />

{p.title}
({ value }))} value={size[p.handle]} onValueChange={(value) => setSize((s) => ({ ...s, [p.handle]: value }))} invalid={invalid} /> {invalid ? (
Choose a size.
) : null}

Selected total{" "} {formatMoney({ amount: total, currency })}

{chosen.length ? `Add selected · ${formatMoney({ amount: total, currency })}` : "Add selected"}

); } export default PdpCompleteTheLook; 32:T271d,"use client"; /* * Tiny client cart (no zustand): React context + a module store read with * useSyncExternalStore, persisted to localStorage per brand (`kc-cart:`). * * API (stable; the customizer imports this): * * * ...blocks... * * - `products` resolves stored lines back to product + variant for display. Lines whose * product is not in `products` (or registered through `add(item, product)`) are hidden. * - mounts Kobra (bottom-center) unless `toaster={false}`. * * const cart = useCart(); // safe outside a provider: `ready: false` and every method is a no-op * cart.ready boolean * cart.brand Brand | undefined * cart.shopifyDomain string | null set when the brand checks out on its own Shopify store * cart.items CartItem[] { variantId, productHandle, qty, size? } * cart.lines CartLine[] item + product + variant + lineTotal + key + checkoutHref * cart.count number total quantity * cart.subtotal Money | null null when the bag is empty * cart.open / cart.setOpen(boolean) drawer visibility (cart-drawer reads this) * cart.add(item: Omit & { qty?: number }, product?: Product) * cart.remove(key) cart.setQty(key, qty) cart.clear() (key = lineKey(item)) * cart.checkoutUrl(items?: CartItem[]) => string | null (items default to the bag) * * checkoutUrl(items, { brandSlug, shopifyDomain?, products }) => string | null (pure) * - brand has shopifyDomain -> https:///cart/:,: * - else the mrch.shop storeUrl of the FIRST item, wrapped with mrchShopUrl (UTM + attribution) * - else null ("checkout on mrch.shop coming soon") * mrch.shop checks out one design at a time, so the bag exits per line (CartLine.checkoutHref). * * lineKey(item) => string variantId + size, the identity of a bag line. */ import { createContext, useCallback, useContext, useMemo, useState, useSyncExternalStore, type ReactNode, } from "react"; import { Toasts } from "@/components/ui/toast"; import { PortalScope } from "./portal-scope"; import { mrchShopUrl } from "../../../lib/commerce/adapters/mrch"; import type { Brand, Money, Product, Variant } from "../../../lib/commerce/types"; import { buildCheckoutUrl, clampQty, lineKey, parseCart, type CartItem, type CheckoutContext } from "./cart-core"; export { lineKey, type CartItem }; export type CartLine = CartItem & { key: string; product: Product; variant: Variant; lineTotal: Money; /** Where this single line checks out (mrch.shop URL with UTM, or the Shopify permalink), or null. */ checkoutHref: string | null; }; export type Cart = { ready: boolean; brand: Brand | undefined; shopifyDomain: string | null; items: CartItem[]; lines: CartLine[]; count: number; subtotal: Money | null; open: boolean; setOpen: (open: boolean) => void; add: (item: Omit & { qty?: number }, product?: Product) => void; remove: (key: string) => void; setQty: (key: string, qty: number) => void; clear: () => void; checkoutUrl: (items?: CartItem[]) => string | null; }; export type { CheckoutContext }; export function checkoutUrl(items: CartItem[], ctx: CheckoutContext): string | null { return buildCheckoutUrl(items, ctx, (slug, placement, url, designSlug) => mrchShopUrl(slug, placement, url, { designSlug })); } /* ---- persistence: one module store per storage key --------------------------------------- */ type Store = { key: string; items: CartItem[]; loaded: boolean; listeners: Set<() => void>; }; const EMPTY: CartItem[] = []; const stores = new Map(); function storeFor(key: string): Store { let store = stores.get(key); if (!store) { store = { key, items: EMPTY, loaded: false, listeners: new Set() }; stores.set(key, store); } return store; } const parse = (raw: string | null): CartItem[] => { const items = parseCart(raw); return items.length ? items : EMPTY; }; function snapshot(store: Store): CartItem[] { if (!store.loaded && typeof window !== "undefined") { store.loaded = true; try { store.items = parse(window.localStorage.getItem(store.key)); } catch { store.items = EMPTY; } } return store.items; } function commit(store: Store, items: CartItem[]) { store.items = items.length ? items : EMPTY; store.loaded = true; try { window.localStorage.setItem(store.key, JSON.stringify(store.items)); } catch { /* private mode: the bag lives for the session */ } store.listeners.forEach((l) => l()); } function subscribe(store: Store, listener: () => void) { store.listeners.add(listener); const onStorage = (e: StorageEvent) => { if (e.key !== store.key) return; store.items = parse(e.newValue); listener(); }; window.addEventListener("storage", onStorage); return () => { store.listeners.delete(listener); window.removeEventListener("storage", onStorage); }; } /* ---- context ------------------------------------------------------------------------------ */ const noop = () => {}; const NO_CART: Cart = { ready: false, brand: undefined, shopifyDomain: null, items: EMPTY, lines: [], count: 0, subtotal: null, open: false, setOpen: noop, add: noop, remove: noop, setQty: noop, clear: noop, checkoutUrl: () => null, }; const CartContext = createContext(NO_CART); export function useCart(): Cart { return useContext(CartContext); } export type CartProviderProps = { brand: Brand; products: Product[]; shopifyDomain?: string | null; /** Mount the Kobra toast stack (the add-to-cart "Added" toast needs one). Default true. */ toaster?: boolean; children: ReactNode; }; export function CartProvider({ brand, products, shopifyDomain = null, toaster = true, children, }: CartProviderProps) { const store = storeFor(`kc-cart:${brand.slug}`); const items = useSyncExternalStore( (l) => subscribe(store, l), () => snapshot(store), () => EMPTY, ); const [open, setOpen] = useState(false); const [extra, setExtra] = useState([]); const catalog = useMemo(() => { const byHandle = new Map(); for (const p of extra) byHandle.set(p.handle, p); for (const p of products) byHandle.set(p.handle, p); return byHandle; }, [products, extra]); const checkoutFor = useCallback( (list: CartItem[]) => checkoutUrl(list, { brandSlug: brand.slug, shopifyDomain, products: [...catalog.values()], }), [brand.slug, shopifyDomain, catalog], ); const lines = useMemo(() => { const out: CartLine[] = []; for (const item of items) { const product = catalog.get(item.productHandle); const variant = product?.variants.find((v) => v.id === item.variantId); if (!product || !variant) continue; out.push({ ...item, key: lineKey(item), product, variant, lineTotal: { amount: variant.price.amount * item.qty, currency: variant.price.currency }, checkoutHref: checkoutFor([item]), }); } return out; }, [items, catalog, checkoutFor]); const add = useCallback( (item, product) => { if (product && !catalog.has(product.handle)) { setExtra((list) => [...list, product]); } const qty = clampQty(item.qty); const key = lineKey(item); const current = snapshot(store); const found = current.some((i) => lineKey(i) === key); commit( store, found ? current.map((i) => (lineKey(i) === key ? { ...i, qty: Math.min(99, i.qty + qty) } : i)) : [...current, { variantId: item.variantId, productHandle: item.productHandle, size: item.size, qty }], ); }, [store, catalog], ); const remove = useCallback( (key) => commit(store, snapshot(store).filter((i) => lineKey(i) !== key)), [store], ); const setQty = useCallback( (key, qty) => commit( store, !(qty >= 1) ? snapshot(store).filter((i) => lineKey(i) !== key) : snapshot(store).map((i) => (lineKey(i) === key ? { ...i, qty: clampQty(qty) } : i)), ), [store], ); const clear = useCallback(() => commit(store, EMPTY), [store]); const value = useMemo(() => { const count = lines.reduce((n, l) => n + l.qty, 0); const subtotal: Money | null = lines.length ? { amount: lines.reduce((n, l) => n + l.lineTotal.amount, 0), currency: lines[0].lineTotal.currency, } : null; return { ready: true, brand, shopifyDomain, items, lines, count, subtotal, open, setOpen, add, remove, setQty, clear, checkoutUrl: (list = items) => checkoutFor(list), }; }, [brand, shopifyDomain, items, lines, open, add, remove, setQty, clear, checkoutFor]); return ( {children} {toaster ? ( // A transformed ancestor becomes the containing block of the toast stack's fixed container, // so shifting this wrapper lifts the toasts above a sticky bar (--kc-sticky-offset, set by pdp-sticky-buy-bar).

) : null} ); } 33:T7c9,"use client"; import type { ComponentProps } from "react"; import { Button } from "@/components/ui/button"; import { Spinner } from "@/components/ui/spinner"; import { cn } from "@/lib/utils"; import { EASE_EXIT, EASE_OUT } from "./motion"; type Props = ComponentProps & { pending?: boolean }; /** * The Kobra busy button: the label turns out and a spinner turns in (one shared flip, in the * same grid cell so the width never changes). `aria-busy`, repeat presses dropped, never * `disabled` (that would dim the spinner). Reduced motion: plain crossfade, the spinner still turns. */ export function PendingButton({ pending = false, children, onClick, className, ...props }: Props) { const handle: Props["onClick"] = (e) => { if (pending) { e.preventDefault(); return; } onClick?.(e); }; return ( ); } 34:Tdc2,"use client"; import { cva } from "class-variance-authority"; import type { ReactNode } from "react"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"; import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"; import { cn } from "@/lib/utils"; import { PortalScope } from "../portal-scope"; export type OptionPillOption = { value: string; /** Visible label; defaults to `value`. */ label?: ReactNode; /** Unavailable: struck through and disabled. */ disabled?: boolean; /** Tooltip for a disabled option. Default "Sold out". */ reason?: string; }; const item = cva( "micro h-10 min-w-11 border border-rule bg-transparent px-3 text-ink hover:bg-surface aria-pressed:border-ink aria-pressed:bg-ink aria-pressed:text-canvas aria-pressed:hover:bg-ink data-[state=on]:bg-ink data-[state=on]:text-canvas disabled:line-through disabled:opacity-40 transition-[background-color,color,border-color,transform] duration-150 ease-out motion-reduce:transition-none active:scale-[0.97] motion-reduce:active:scale-100", { variants: { variant: { pill: "", /** Segmented: one conjoined bar, used for garment choice. */ segmented: "h-auto min-h-10 flex-1 whitespace-normal rounded-none px-2 py-1 text-center leading-[1.15] first:rounded-s-lg last:rounded-e-lg not-first:-ms-px", }, }, defaultVariants: { variant: "pill" }, }, ); export type OptionPillsProps = { options: OptionPillOption[]; value: string | undefined; onValueChange: (value: string) => void; /** Accessible name of the group ("Size", "Garment"). */ label: string; variant?: "pill" | "segmented"; /** Marks the group invalid (Kobra: aria-invalid + a message by the caller). */ invalid?: boolean; className?: string; }; /** Size or garment pills on Kobra toggle-group. Unavailable options are struck, disabled, and explain themselves. */ export function OptionPills({ options, value, onValueChange, label, variant = "pill", invalid, className, }: OptionPillsProps) { const segmented = variant === "segmented"; return ( next[0] && onValueChange(next[0])} spacing={segmented ? 0 : 2} className={cn( segmented ? "w-full" : "flex-wrap", invalid && "rounded-lg ring-3 ring-destructive/20", className, )} > {options.map((o) => { const button = ( {o.label ?? o.value} ); if (!o.disabled) return button; return ( }> {button} {o.reason ?? "Sold out"} ); })} ); } 35:T6df,import { cva, type VariantProps } from "class-variance-authority"; import { cn } from "@/lib/utils"; import { formatMoney } from "../../../lib/commerce/select"; import type { Money } from "../../../lib/commerce/types"; const price = cva("tabular inline-flex items-baseline gap-2 text-ink", { variants: { variant: { default: "text-base", large: "display-m", "strike-compare": "text-base", "from-range": "text-base", }, }, defaultVariants: { variant: "default" }, }); export type PriceProps = VariantProps & { money: Money; /** Original price, shown struck through with the `strike-compare` variant. */ compareAt?: Money; /** Upper bound; with `from-range` renders "From $min" or "$min to $max". */ max?: Money; locale?: string; className?: string; }; export function Price({ variant = "default", money, compareAt, max, locale, className, }: PriceProps) { const now = formatMoney(money, locale); if (variant === "strike-compare" && compareAt) { return ( {now} ~~{formatMoney(compareAt, locale)}~~ ); } if (variant === "from-range") { const range = max && max.amount !== money.amount; return ( {range ? ( <> From {now} ) : ( {now} )} ); } return {now}; } 36:T618,import type { BlockMeta } from "../../../lib/block-meta"; export const pdpCompleteTheLookMeta: BlockMeta = { slug: "pdp-complete-the-look", title: "Complete the look", description: "Two or three products in a row with a size choice each and one Add all button. The total is only the sum of the listed prices.", group: "pdp", kobraDeps: ["checkbox", "toggle-group", "button", "toast"], files: [ "blocks/pdp/pdp-complete-the-look/pdp-complete-the-look.tsx", "blocks/pdp/_shared/cart-store.tsx", "blocks/pdp/_shared/pending-button.tsx", "blocks/pdp/_shared/ui/option-pills.tsx", "blocks/ui/price/price.tsx", ], props: [ { name: "exclude", type: "string | string[]", description: "Product handle(s) to leave out: pass the product being viewed. Nothing is pre-checked; the button reads Add selected with the running total." }, { name: "hrefs", type: "{ home?: string; collection?: (handle) => string; product?: (handle) => string }", default: "'/', /collections/, /products/", description: "Route overrides (product); hrefFor wins when both are set." }, { name: "products", type: "Product[]", description: "2 to 3 products; each uses its cheapest variant." }, { name: "sizes", type: "string[]", default: "S to 2XL", description: "Static size list." }, { name: "title", type: "string", default: "'Complete the look'", description: "Heading." }, { name: "delayMs", type: "number", default: "600", description: "Simulated add latency." }, ], tags: ["pdp", "bundle", "cart"], status: "ready", }; 24:["$","article",null,{"className":"grid gap-6","children":[["$","header",null,{"className":"grid gap-3","children":[["$","nav",null,{"aria-label":"breadcrumb","data-slot":"breadcrumb","className":"","children":["$","ol",null,{"data-slot":"breadcrumb-list","className":"flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground","children":[["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2d",null,{"href":"/","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Kobra Commerce"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2d",null,{"href":"/#pdp","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"PDP"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","span",null,{"data-slot":"breadcrumb-page","role":"link","aria-disabled":"true","aria-current":"page","className":"font-normal text-foreground","children":"Complete the look"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Complete the look"}],["$","span",null,{"data-slot":"badge","data-variant":"green","className":"group/badge t-label relative isolate inline-flex w-fit shrink-0 items-center justify-center gap-1 rounded-full border border-transparent py-0.5 font-medium [--surface-calm:0.5] whitespace-nowrap transition-ring before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:border before:border-transparent before:transition-[scale,background-color,border-color] before:duration-150 before:ease-out focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 motion-reduce:before:transition-none has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [a,button]:active:before:scale-[0.97] motion-reduce:[a,button]:active:before:scale-100 [&>svg]:pointer-events-none [&>svg]:size-3! t-surface t-surface-success text-[var(--badge-green-fg)] h-5 px-1.5 text-xs","children":"Ready"}]]}],["$","p",null,{"className":"max-w-[65ch] text-sm text-muted-foreground","children":"Two or three products in a row with a size choice each and one Add all button. The total is only the sum of the listed prices."}]]}],["$","$L2e",null,{"preview":["$","$L2f",null,{"slug":"pdp-complete-the-look","group":"pdp","minHeight":480,"fixedHeight":"$undefined"}],"code":["$","$L30",null,{"files":[{"path":"blocks/pdp/pdp-complete-the-look/pdp-complete-the-look.tsx","code":"$31"},{"path":"blocks/pdp/_shared/cart-store.tsx","code":"$32"},{"path":"blocks/pdp/_shared/pending-button.tsx","code":"$33"},{"path":"blocks/pdp/_shared/ui/option-pills.tsx","code":"$34"},{"path":"blocks/ui/price/price.tsx","code":"$35"},{"path":"blocks/pdp/pdp-complete-the-look/demo.tsx","code":"import { pdpDemoData } from \"../../../lib/commerce/fixtures/pdp\";\nimport { CartProvider } from \"../_shared/cart-store\";\nimport { PdpCartDrawer } from \"../pdp-cart-drawer/pdp-cart-drawer\";\nimport { PdpCompleteTheLook } from \"./pdp-complete-the-look\";\n\nexport async function PdpCompleteTheLookDemo({ brand }: { brand?: string }) {\n const { brand: b, products } = await pdpDemoData(brand);\n const look = products.slice(0, 3);\n return (\n \n

\n \n

\n \n \n );\n}\n\nexport default PdpCompleteTheLookDemo;\n"},{"path":"blocks/pdp/pdp-complete-the-look/meta.ts","code":"$36"}]}],"props":"$L37"}],"$L38"]}]