{ "name": "cart-drawer", "title": "CartDrawer", "description": "Slide-in side cart drawer with provider context, free-shipping progress, animated subtotal, and empty state. Auto-opens on add-to-cart.", "type": "component", "registryDependencies": [ "cart-summary", "price", "cn" ], "files": [ { "path": "cart-drawer.tsx", "content": "\"use client\";\n\nimport React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from \"react\";\nimport { CartSummary } from \"./cart-summary\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { useCart } from \"@cimplify/sdk/react\";\nimport { parsePrice } from \"@cimplify/sdk\";\nimport { cn } from \"@cimplify/sdk/react\";\n\ninterface CartDrawerCtx {\n isOpen: boolean;\n open: () => void;\n close: () => void;\n toggle: () => void;\n}\n\nconst CartDrawerContext = createContext(null);\n\nexport function useCartDrawer(): CartDrawerCtx {\n const ctx = useContext(CartDrawerContext);\n if (!ctx) {\n throw new Error(\"useCartDrawer must be used within \");\n }\n return ctx;\n}\n\ninterface ProviderProps {\n children: React.ReactNode;\n /** Auto-open the drawer whenever the cart's pendingOpCount goes from 0 → >0. Default: true. */\n openOnAdd?: boolean;\n}\n\nexport function CartDrawerProvider({ children, openOnAdd = true }: ProviderProps): React.ReactElement {\n const [isOpen, setIsOpen] = useState(false);\n const cart = useCart();\n const lastPendingRef = useRef(0);\n\n const open = useCallback(() => setIsOpen(true), []);\n const close = useCallback(() => setIsOpen(false), []);\n const toggle = useCallback(() => setIsOpen((v) => !v), []);\n\n useEffect(() => {\n if (!openOnAdd) return;\n if (cart.pendingOpCount > lastPendingRef.current && cart.pendingOpCount > 0) {\n setIsOpen(true);\n }\n lastPendingRef.current = cart.pendingOpCount;\n }, [cart.pendingOpCount, openOnAdd]);\n\n const value = useMemo(() => ({ isOpen, open, close, toggle }), [isOpen, open, close, toggle]);\n return {children};\n}\n\nexport interface CartDrawerProps {\n /** Called when \"Checkout\" is clicked. Drawer auto-closes first. */\n onCheckout?: () => void;\n /** Called when \"Continue Shopping\" is clicked. Defaults to closing. */\n onContinueShopping?: () => void;\n /** Called when the empty state's CTA is clicked. */\n onShop?: () => void;\n /** Heading. */\n title?: string;\n /** Free-shipping threshold (in business currency, numeric). 0 disables the progress bar. */\n freeShippingThreshold?: number;\n /** Custom class on the panel. */\n className?: string;\n}\n\n/**\n * Animate a number toward `target` over ~250ms. Used for subtotal so it\n * feels alive when items are added/removed.\n */\nfunction useAnimatedNumber(target: number, durationMs = 250) {\n const [value, setValue] = useState(target);\n const fromRef = useRef(target);\n const startRef = useRef(null);\n useEffect(() => {\n fromRef.current = value;\n startRef.current = null;\n let raf = 0;\n const tick = (t: number) => {\n if (startRef.current == null) startRef.current = t;\n const p = Math.min(1, (t - startRef.current) / durationMs);\n const eased = 1 - Math.pow(1 - p, 3);\n setValue(fromRef.current + (target - fromRef.current) * eased);\n if (p < 1) raf = requestAnimationFrame(tick);\n };\n raf = requestAnimationFrame(tick);\n return () => cancelAnimationFrame(raf);\n // value intentionally omitted — only re-trigger on target change\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [target, durationMs]);\n return value;\n}\n\nexport function CartDrawer({\n onCheckout,\n onContinueShopping,\n onShop,\n title = \"Cart\",\n freeShippingThreshold = 0,\n className,\n}: CartDrawerProps): React.ReactElement {\n const { isOpen, close } = useCartDrawer();\n const cart = useCart();\n const subtotalNum = parsePrice(cart.subtotal);\n const animatedSubtotal = useAnimatedNumber(subtotalNum);\n\n // Lock body scroll + close on Escape while open.\n useEffect(() => {\n if (!isOpen) return;\n const original = document.body.style.overflow;\n document.body.style.overflow = \"hidden\";\n const onKey = (e: KeyboardEvent) => {\n if (e.key === \"Escape\") close();\n };\n window.addEventListener(\"keydown\", onKey);\n return () => {\n document.body.style.overflow = original;\n window.removeEventListener(\"keydown\", onKey);\n };\n }, [isOpen, close]);\n\n const handleCheckout = () => {\n close();\n onCheckout?.();\n };\n\n const handleContinue = () => {\n onContinueShopping?.();\n close();\n };\n\n const handleShop = () => {\n onShop?.();\n close();\n };\n\n // Free-shipping progress\n const showShippingBar = freeShippingThreshold > 0 && !cart.isEmpty;\n const remainingForShipping = Math.max(0, freeShippingThreshold - subtotalNum);\n const shippingProgress = freeShippingThreshold > 0 ? Math.min(100, (subtotalNum / freeShippingThreshold) * 100) : 0;\n const shippingUnlocked = subtotalNum >= freeShippingThreshold && freeShippingThreshold > 0;\n\n return (\n \n {/* Backdrop */}\n \n\n {/* Panel */}\n \n {/* Header */}\n
\n
\n

{title}

\n {cart.itemCount > 0 && (\n \n {cart.itemCount} {cart.itemCount === 1 ? \"item\" : \"items\"}\n \n )}\n
\n \n \n \n \n \n
\n\n {/* Free-shipping bar */}\n {showShippingBar && (\n
\n
\n {shippingUnlocked ? (\n ✓ Free shipping unlocked\n ) : (\n \n away from free shipping\n \n )}\n
\n
\n \n
\n
\n )}\n\n {/* Items */}\n
\n {cart.isEmpty ? (\n \n ) : (\n \n )}\n
\n\n {/* Footer */}\n {!cart.isEmpty && (\n
\n
\n Subtotal\n \n
\n

\n Tax and shipping calculated at checkout.\n

\n \n Checkout — \n \n \n Continue shopping\n \n
\n \n \n \n Secure checkout\n
\n
\n )}\n \n \n );\n}\n\nfunction EmptyState({ onShop }: { onShop: () => void }) {\n return (\n
\n
\n
\n
\n \n \n \n
\n
\n

Your cart is empty

\n

\n Discover something you'll love.\n

\n
\n \n Shop now\n \n \n \n \n
\n
\n );\n}\n" } ] }