{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "cart-drawer", "title": "Cart Drawer", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/cart-drawer/CartDrawer.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport { Leaf, Lock, Minus, Plus, RotateCcw, ShieldCheck, ShoppingBag, Tag, Trash2, Truck, X } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Input } from '@/components/ui/input'\nimport { Progress } from '@/components/ui/progress'\nimport { Separator } from '@/components/ui/separator'\n\nexport interface CartItem {\n id: string\n name: string\n variant: string\n price: number\n originalPrice?: number\n qty: number\n inStock?: boolean\n image: string\n}\n\nexport interface CartDrawerProps {\n variant?: 'drawer' | 'page'\n items?: CartItem[]\n currency?: string\n freeShippingThreshold?: number\n taxRate?: number\n initialPromoCode?: string\n className?: string\n onCheckout?: (items: CartItem[], total: number) => void\n onContinueShopping?: () => void\n onClose?: () => void\n onUpdateQuantity?: (id: string, qty: number) => void\n onRemoveItem?: (id: string) => void\n onApplyPromo?: (code: string) => void\n onRemovePromo?: () => void\n}\n\nconst DEFAULT_ITEMS: CartItem[] = [\n {\n id: 'item-1',\n name: 'Aero Minimalist Runner',\n variant: 'Size: 10.5 · Color: Matte Black',\n price: 120,\n originalPrice: 140,\n qty: 1,\n inStock: true,\n image: 'https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=300&auto=format&fit=crop&q=80',\n },\n {\n id: 'item-2',\n name: 'Technical Shell Parka',\n variant: 'Size: L · Color: Mineral Gray',\n price: 95,\n originalPrice: 110,\n qty: 1,\n inStock: true,\n image: 'https://images.unsplash.com/photo-1591047139829-d91aecb6caea?w=300&auto=format&fit=crop&q=80',\n },\n {\n id: 'item-3',\n name: 'Minimalist Leather Cardholder',\n variant: 'Size: Slim · Color: Saddle Brown',\n price: 70,\n originalPrice: 85,\n qty: 1,\n inStock: true,\n image: 'https://images.unsplash.com/photo-1627123424574-724758594e93?w=300&auto=format&fit=crop&q=80',\n },\n]\n\nexport function CartDrawer({\n variant = 'drawer',\n items = DEFAULT_ITEMS,\n currency = 'USD',\n freeShippingThreshold = 300,\n taxRate = 0.08,\n initialPromoCode = '',\n className,\n onCheckout,\n onContinueShopping,\n onClose,\n onUpdateQuantity,\n onRemoveItem,\n onApplyPromo,\n onRemovePromo,\n}: CartDrawerProps) {\n const [cartItems, setCartItems] = React.useState(() => items.map((item) => ({ ...item })))\n const [promoCodeInput, setPromoCodeInput] = React.useState('')\n const [appliedPromo, setAppliedPromo] = React.useState(initialPromoCode)\n const [promoDiscount, setPromoDiscount] = React.useState(initialPromoCode ? 20 : 0)\n const [promoError, setPromoError] = React.useState('')\n const [promoSuccess, setPromoSuccess] = React.useState('')\n\n React.useEffect(() => {\n setCartItems(items.map((item) => ({ ...item })))\n }, [items])\n\n const totalItemsCount = React.useMemo(() => cartItems.reduce((acc, item) => acc + item.qty, 0), [cartItems])\n\n const subtotal = React.useMemo(() => cartItems.reduce((acc, item) => acc + item.price * item.qty, 0), [cartItems])\n\n const isFreeShippingUnlocked = subtotal >= freeShippingThreshold && cartItems.length > 0\n const amountAwayFromFreeShipping = Math.max(0, freeShippingThreshold - subtotal)\n const shippingProgress =\n cartItems.length === 0 ? 0 : Math.min(100, Math.round((subtotal / freeShippingThreshold) * 100))\n const shippingFee = cartItems.length === 0 ? 0 : isFreeShippingUnlocked ? 0 : 15\n const discountedSubtotal = Math.max(0, subtotal - promoDiscount)\n const estimatedTax = cartItems.length === 0 ? 0 : Number((discountedSubtotal * taxRate).toFixed(2))\n const total = cartItems.length === 0 ? 0 : Number((discountedSubtotal + shippingFee + estimatedTax).toFixed(2))\n\n const formatCurrency = React.useCallback(\n (amount: number) => {\n try {\n return new Intl.NumberFormat('en-US', {\n style: 'currency',\n currency,\n minimumFractionDigits: 2,\n }).format(amount)\n } catch {\n return `$${amount.toFixed(2)}`\n }\n },\n [currency],\n )\n\n const updateQuantity = (id: string, delta: number) => {\n setCartItems((prev) =>\n prev.flatMap((item) => {\n if (item.id !== id) return [item]\n const newQty = item.qty + delta\n if (newQty <= 0) {\n onRemoveItem?.(id)\n return []\n }\n onUpdateQuantity?.(id, newQty)\n return [{ ...item, qty: newQty }]\n }),\n )\n }\n\n const removeItem = (id: string) => {\n setCartItems((prev) => prev.filter((item) => item.id !== id))\n onRemoveItem?.(id)\n }\n\n const handleApplyPromo = () => {\n setPromoError('')\n setPromoSuccess('')\n const trimmed = promoCodeInput.trim().toUpperCase()\n if (!trimmed) return\n\n if (trimmed === 'SUMMER20' || trimmed === 'SAVE20') {\n setAppliedPromo(trimmed)\n setPromoDiscount(20)\n setPromoSuccess('$20.00 coupon discount applied!')\n setPromoCodeInput('')\n onApplyPromo?.(trimmed)\n } else if (trimmed === 'SAVE10') {\n setAppliedPromo(trimmed)\n setPromoDiscount(10)\n setPromoSuccess('$10.00 coupon discount applied!')\n setPromoCodeInput('')\n onApplyPromo?.(trimmed)\n } else {\n setAppliedPromo(trimmed)\n setPromoDiscount(15)\n setPromoSuccess('Promo code applied!')\n setPromoCodeInput('')\n onApplyPromo?.(trimmed)\n }\n }\n\n const handleRemovePromo = () => {\n setAppliedPromo('')\n setPromoDiscount(0)\n setPromoSuccess('')\n setPromoError('')\n onRemovePromo?.()\n }\n\n const handleCheckout = () => {\n onCheckout?.(cartItems, total)\n }\n\n const resetCart = () => {\n setCartItems(DEFAULT_ITEMS.map((item) => ({ ...item })))\n }\n\n return (\n
\n {variant === 'drawer' ? (\n /* DRAWER VARIANT */\n
\n {/* Drawer Header */}\n
\n
\n

Shopping Cart

\n {totalItemsCount > 0 && (\n \n {totalItemsCount}\n \n )}\n
\n \n
\n\n {/* Free Shipping Meter */}\n {cartItems.length > 0 && (\n
\n
\n {isFreeShippingUnlocked ? (\n \n \n You've unlocked Free Express Shipping!\n \n ) : (\n \n 🎉 You're{' '}\n \n {formatCurrency(amountAwayFromFreeShipping)}\n {' '}\n away from Free Shipping!\n \n )}\n {shippingProgress}%\n
\n \n
\n )}\n\n {/* Drawer Body: Line Items or Empty State */}\n
\n {cartItems.length === 0 ? (\n
\n
\n \n
\n

Your cart is empty

\n

\n Looks like you haven't added any products to your cart yet. Explore our latest items!\n

\n \n
\n ) : (\n
\n
    \n {cartItems.map((item) => (\n
  • \n
    \n {item.name}\n
    \n\n
    \n
    \n
    \n

    {item.name}

    \n removeItem(item.id)}\n >\n \n \n
    \n

    {item.variant}

    \n
    \n \n In stock\n
    \n
    \n\n
    \n
    \n updateQuantity(item.id, -1)}\n >\n \n \n {item.qty}\n updateQuantity(item.id, 1)}\n >\n \n \n
    \n\n
    \n {item.originalPrice && (\n \n {formatCurrency(item.originalPrice * item.qty)}\n \n )}\n \n {formatCurrency(item.price * item.qty)}\n \n
    \n
    \n
    \n
    • \n ))}\n
\n\n \n\n {/* Promo Code Section */}\n
\n {appliedPromo ? (\n
\n
\n \n {appliedPromo}\n \n -{formatCurrency(promoDiscount)}\n \n
\n \n \n \n
\n ) : (\n
\n setPromoCodeInput(e.target.value)}\n placeholder=\"Promo code (e.g. SUMMER20)\"\n size=\"small\"\n className=\"text-xs\"\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n e.preventDefault()\n handleApplyPromo()\n }\n }}\n />\n \n Apply\n \n
\n )}\n {promoSuccess &&

{promoSuccess}

}\n {promoError &&

{promoError}

}\n
\n
\n )}\n
\n\n {/* Drawer Footer: Summary & Actions */}\n {cartItems.length > 0 && (\n
\n
\n
\n Subtotal\n {formatCurrency(subtotal)}\n
\n\n {promoDiscount > 0 && (\n
\n Coupon ({appliedPromo})\n -{formatCurrency(promoDiscount)}\n
\n )}\n\n
\n Estimated Shipping\n {shippingFee === 0 ? (\n Free\n ) : (\n {formatCurrency(shippingFee)}\n )}\n
\n\n
\n Estimated Tax\n {formatCurrency(estimatedTax)}\n
\n\n \n\n
\n Total\n {formatCurrency(total)}\n
\n
\n\n
\n \n \n Proceed to Checkout\n \n\n \n Continue Shopping\n \n
\n\n {/* Guarantee badges */}\n
\n
\n \n 30-day returns\n
\n
\n \n 256-bit secure\n
\n
\n \n Carbon neutral\n
\n
\n
\n )}\n
\n ) : (\n /* FULL PAGE VARIANT */\n
\n {/* Page Header */}\n
\n
\n

Shopping Cart

\n

\n Review your selected items and calculate shipping before checkout.\n

\n
\n {totalItemsCount > 0 && (\n \n {totalItemsCount} items in cart\n \n )}\n
\n\n {/* Free Shipping Banner */}\n {cartItems.length > 0 && (\n
\n
\n
\n {isFreeShippingUnlocked ? (\n <>\n \n \n You've unlocked Free Express Shipping on this order!\n \n \n ) : (\n \n 🎉 You're{' '}\n \n {formatCurrency(amountAwayFromFreeShipping)}\n {' '}\n away from Free Shipping!\n \n )}\n
\n \n {shippingProgress}% completed\n \n
\n \n
\n )}\n\n {/* Empty State for Page */}\n {cartItems.length === 0 ? (\n
\n
\n \n
\n

Your cart is currently empty

\n

\n Before you proceed to checkout you must add some products to your shopping cart.\n

\n \n
\n ) : (\n /* Page Grid: Items (Left) & Order Summary (Right) */\n
\n {/* Left: Line Items list */}\n
\n
\n {cartItems.map((item) => (\n \n
\n
\n {item.name}\n
\n
\n

{item.name}

\n

{item.variant}

\n
\n \n In stock\n \n · {formatCurrency(item.price)} each\n \n
\n
\n
\n\n
\n
\n updateQuantity(item.id, -1)}\n >\n \n \n {item.qty}\n updateQuantity(item.id, 1)}\n >\n \n \n
\n\n
\n {item.originalPrice && (\n \n {formatCurrency(item.originalPrice * item.qty)}\n \n )}\n \n {formatCurrency(item.price * item.qty)}\n \n
\n\n removeItem(item.id)}\n >\n \n \n
\n
\n ))}\n
\n\n {/* Bottom bar: Guarantees */}\n
\n
\n
\n \n
\n
\n

Free 30-Day Returns

\n

Hassle-free return policy

\n
\n
\n
\n
\n \n
\n
\n

256-Bit SSL Security

\n

Bank-grade data encryption

\n
\n
\n
\n
\n \n
\n
\n

Carbon Neutral

\n

Offset delivery emissions

\n
\n
\n
\n
\n\n {/* Right: Sticky Order Summary Card */}\n
\n
\n

Order Summary

\n\n {/* Promo Input */}\n
\n \n {appliedPromo ? (\n
\n
\n \n {appliedPromo}\n \n -{formatCurrency(promoDiscount)}\n \n
\n \n \n \n
\n ) : (\n
\n setPromoCodeInput(e.target.value)}\n placeholder=\"Enter code (SUMMER20)\"\n size=\"small\"\n className=\"text-xs\"\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n e.preventDefault()\n handleApplyPromo()\n }\n }}\n />\n \n Apply\n \n
\n )}\n
\n\n \n\n {/* Cost Breakdown */}\n
\n
\n Subtotal\n {formatCurrency(subtotal)}\n
\n\n {promoDiscount > 0 && (\n
\n Coupon ({appliedPromo})\n -{formatCurrency(promoDiscount)}\n
\n )}\n\n
\n Estimated Shipping\n {shippingFee === 0 ? (\n Free\n ) : (\n {formatCurrency(shippingFee)}\n )}\n
\n\n
\n Estimated Tax (8%)\n {formatCurrency(estimatedTax)}\n
\n\n \n\n
\n Total\n {formatCurrency(total)}\n
\n
\n\n \n \n Proceed to Checkout\n \n\n \n Continue Shopping\n \n
\n
\n
\n )}\n
\n )}\n \n )\n}\n", "type": "registry:block", "target": "~/components/blocks/CartDrawer.tsx" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/react/badge.json", "https://uipkge.dev/r/react/button.json", "https://uipkge.dev/r/react/input.json", "https://uipkge.dev/r/react/progress.json", "https://uipkge.dev/r/react/separator.json" ], "description": "Shopping cart drawer & full cart page view featuring free shipping progress meter, interactive line items with quantity steppers and variant tags, promo code application, order summary with tax & shipping calculation, trust badges, and empty state.", "categories": [ "commerce", "ecommerce" ] }