50:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 51:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 52:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 53:T895c,"use client"; import { zodResolver } from "@hookform/resolvers/zod"; import { Minus, Plus, Trash } from "lucide-react"; import { useCallback, useState } from "react"; import type { UseFormReturn } from "react-hook-form"; import { Controller, FormProvider, useFieldArray, useForm, useFormContext, } from "react-hook-form"; import z from "zod"; import { Logo, LogoImageDesktop, LogoImageMobile, } from "@/components/shadcnblocks/logo"; import { Price, PriceValue } from "@/components/shadcnblocks/price"; import QuantityInput from "@/components/shadcnblocks/quantity-input"; import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, } from "@/components/ui/accordion"; import { AspectRatio } from "@/components/ui/aspect-ratio"; import { Button } from "@/components/ui/button"; import { Card, CardTitle } from "@/components/ui/card"; import { Checkbox } from "@/components/ui/checkbox"; import { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldTitle, } from "@/components/ui/field"; import { Input } from "@/components/ui/input"; import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"; import { cn } from "@/lib/utils"; interface ProductPrice { regular: number; sale?: number; currency: string; } type CartItem = { product_id: string; link: string; name: string; image: string; price: ProductPrice; quantity: number; details: { label: string; value: string; }[]; }; interface CartItemProps extends CartItem { index: number; onRemoveClick: () => void; onQuantityChange: (newQty: number) => void; } interface CartProps { cartItems: CartItem[]; form: UseFormReturn; } const PAYMENT_METHODS = { creditCard: "creditCard", paypal: "paypal", onlineBankTransfer: "onlineBankTransfer", }; type PaymentMethod = keyof typeof PAYMENT_METHODS; const CreditCardPayment = z.object({ method: z.literal(PAYMENT_METHODS.creditCard), cardholderName: z.string(), cardNumber: z.string(), expiryDate: z .string() .regex(/^(0[1-9]|1[0-2])\/\d{2}$/, "Invalid format (MM/YY)") .refine((value) => { const [mm, yy] = value.split("/").map(Number); const now = new Date(); const currentMonth = now.getMonth() + 1; const currentYear = now.getFullYear() % 100; if (yy < currentYear) return false; if (yy === currentYear && mm < currentMonth) return false; return true; }, "Card has expired"), cvc: z.string(), }); const PayPalPayment = z.object({ method: z.literal(PAYMENT_METHODS.paypal), payPalEmail: z.string(), }); const BankTransferPayment = z.object({ method: z.literal(PAYMENT_METHODS.onlineBankTransfer), bankName: z.string(), accountNumber: z.string(), }); const PaymentSchema = z.discriminatedUnion("method", [ CreditCardPayment, PayPalPayment, BankTransferPayment, ]); const checkoutFormSchema = z.object({ contactInfo: z.object({ email: z.string(), subscribe: z.boolean().optional(), }), address: z.object({ country: z.string(), firstName: z.string(), lastName: z.string(), address: z.string(), postalCode: z.string(), city: z.string(), phone: z.string(), }), shippingMethod: z.string(), payment: PaymentSchema, products: z .object({ product_id: z.string(), quantity: z.number(), price: z.number(), }) .array(), }); type CheckoutFormType = z.infer; const CART_ITEMS: CartItem[] = [ { product_id: "product-1", link: "#", name: "Stylish Maroon Sneaker", image: "https://deifkwefumgah.cloudfront.net/shadcnblocks/block/ecommerce/clothes/stylish-maroon-sneaker.png", price: { regular: 354.0, currency: "USD", }, quantity: 1, details: [ { label: "Color", value: "Red", }, { label: "Size", value: "36", }, ], }, { product_id: "product-2", link: "#", name: "Bicolor Sweatshirt with Embroidered Logo", image: "https://deifkwefumgah.cloudfront.net/shadcnblocks/block/ecommerce/clothes/bicolor-crewneck-sweatshirt-with-embroidered-logo.png", price: { regular: 499.0, currency: "USD", }, quantity: 1, details: [ { label: "Color", value: "Blue & White", }, { label: "Size", value: "L", }, ], }, { product_id: "product-4", link: "#", name: "Maroon Leather Handbag", image: "https://deifkwefumgah.cloudfront.net/shadcnblocks/block/ecommerce/clothes/maroon-leather-handbag.png", price: { regular: 245.0, currency: "USD", }, quantity: 1, details: [ { label: "Color", value: "Maroon", }, ], }, ]; interface Checkout1Props { cartItems?: CartItem[]; className?: string; } const Checkout1 = ({ cartItems = CART_ITEMS, className }: Checkout1Props) => { const [activeAccordion, setActiveAccordion] = useState("item-1"); const defaultProducts = cartItems.map((item) => ({ product_id: item.product_id, quantity: item.quantity, price: item.price.sale ?? item.price.regular, })); const form = useForm({ resolver: zodResolver(checkoutFormSchema), defaultValues: { payment: { method: PAYMENT_METHODS.creditCard, }, products: defaultProducts, }, }); const onSubmit = (data: CheckoutFormType) => { console.log(data); }; const onContinue = (value: string) => { setActiveAccordion(value); }; const handleOnValueChange = (value: string) => { setActiveAccordion(value); }; return (

Checkout

Complete your purchase securely

Contact Information

Address

Shipping Method

Payment

); }; const ContactFields = () => { const form = useFormContext(); return ( ( Email {fieldState.invalid && } )} /> ( )} /> ); }; const AddressFields = () => { const form = useFormContext(); return ( ( Country {fieldState.invalid && } )} />

( First Name {fieldState.invalid && } )} /> ( Last Name {fieldState.invalid && } )} />

( Address {fieldState.invalid && } )} />

( Postal Code {fieldState.invalid && } )} /> ( City {fieldState.invalid && } )} />

( Phone {fieldState.invalid && } )} /> ); }; const ShippingMethodFields = () => { const form = useFormContext(); return ( ( UPS Delivery: Tomorrow

$10.00

FedEx Delivery: Next Week

$2.99

{fieldState.invalid && } )} /> ); }; const PaymentFields = () => { const form = useFormContext(); const paymentMethod = form.watch("payment.method") as PaymentMethod; return (

( Credit Card

PayPal

Online Bank Transfer {fieldState.invalid && } )} />

); }; const PaymentFieldsByMethod = ({ method }: { method: PaymentMethod }) => { const form = useFormContext(); if (!method) return; switch (method) { case PAYMENT_METHODS.creditCard: return (

( Cardholder Name {fieldState.invalid && ( )} )} /> ( Card Number {fieldState.invalid && ( )} )} />

( Card Number {fieldState.invalid && ( )} )} />

); case PAYMENT_METHODS.paypal: return ( ( PayPal Email {fieldState.invalid && } )} /> ); case PAYMENT_METHODS.onlineBankTransfer: return (

( Bank Name {fieldState.invalid && ( )} )} /> ( Account Number {fieldState.invalid && ( )} )} />

); default: return null; } }; const DateInput = () => { const form = useFormContext(); return ( ( Card Number { let val = e.target.value; val = val.replace(/[^0-9/]/g, ""); const prev = field.value ?? ""; const isDeleting = val.length < prev.length; if (!isDeleting) { if (val.length === 2 && !val.includes("/")) { val = val + "/"; } } if (val.length > 5) { val = val.slice(0, 5); } field.onChange(val); }} pattern="^(0[1-9]|1[0-2])/[0-9]{2}$" placeholder="MM/YY" id="checkout-payment-expiryDate" aria-invalid={fieldState.invalid} /> {fieldState.invalid && } )} /> ); }; const Cart = ({ cartItems, form }: CartProps) => { const { fields, remove, update } = useFieldArray({ control: form.control, name: "products", }); const formItems = form.watch("products"); const totalPrice = formItems?.reduce( (sum, p) => sum + p.price * p.quantity, 0, ); const handleRemove = useCallback( (index: number) => () => { remove(index); }, [remove], ); const handleQuantityChange = useCallback( (index: number) => (newQty: number) => update(index, { ...fields[index], quantity: newQty }), [update, fields], ); return (

Your Cart

p.product_id === field.product_id, ) as CartItem)} onRemoveClick={() => handleRemove(index)()} onQuantityChange={(newQty: number) => handleQuantityChange(index)(newQty) } index={index} />

Subtotal

Shipping

Free

Estimated Tax

$35.80

Total

); }; const CartItem = ({ image, name, link, details, price, index, onQuantityChange, onRemoveClick, }: CartItemProps) => { const { regular, currency } = price; return (

{name}

); }; const ProductDetails = ({ details, }: { details?: { label: string; value: string; }[]; }) => { if (!details) return; return (

{item.label}:

{item.value}
{!isLast && /}

); }; const QuantityField = ({ index, onQuantityChange, }: { index: number; onQuantityChange: (n: number) => void; }) => { const { control } = useFormContext(); return ( { return ( { field.onChange(newQty); onQuantityChange(newQty); }} className="rounded-none" /> ); }} /> ); }; export { Checkout1 }; 54:Te9c,"use client"; import { Download } from "lucide-react"; import { cn } from "@/lib/utils"; import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger, } from "@/components/ui/context-menu"; interface LogoProps extends React.HTMLAttributes { url: string; className?: string; children: React.ReactNode; } interface LogoImageProps extends React.ImgHTMLAttributes { src: string; alt: string; className?: string; } interface LogoTextProps extends React.HTMLAttributes { children: React.ReactNode; className?: string; } interface LogoBrandDownloadProps { children: React.ReactNode; files: Array<{ name: string; path: string; format: "svg" | "png" | "jpg" | "jpeg" | "webp"; }>; className?: string; } const LogoBrandDownload = ({ children, files, className, }: LogoBrandDownloadProps) => { const handleDownload = async (file: LogoBrandDownloadProps["files"][0]) => { try { const response = await fetch(file.path); if (!response.ok) throw new Error(`Failed to fetch ${file.name}`); const blob = await response.blob(); const url = window.URL.createObjectURL(blob); const link = document.createElement("a"); link.href = url; link.download = file.name; document.body.appendChild(link); link.click(); document.body.removeChild(link); window.URL.revokeObjectURL(url); } catch (error) { console.error("Failed to download file:", error); } }; return (

{children}

{files.map((file) => ( handleDownload(file)} className="cursor-pointer" > Download {file.format.toUpperCase()} ))} ); }; const Logo = ({ url, className, children, ...props }: LogoProps) => { return ( {children} ); }; const LogoImage = ({ src, alt, className, ...props }: LogoImageProps) => ( {alt}

); const LogoImageMobile = ({ src, alt, className, ...props }: LogoImageProps) => ( {alt}

); const LogoImageDesktop = ({ src, alt, className, ...props }: LogoImageProps) => ( {alt}

); const LogoText = ({ children, className, ...props }: LogoTextProps) => ( {children} ); const LogoTextMobile = ({ children, className, ...props }: LogoTextProps) => ( {children} ); const LogoTextDesktop = ({ children, className, ...props }: LogoTextProps) => ( {children} ); export { Logo, LogoBrandDownload, LogoImage, LogoImageDesktop, LogoImageMobile, LogoText, LogoTextDesktop, LogoTextMobile, }; 55:T6f2,"use client"; import type { ReactNode } from "react"; import { createContext, useContext } from "react"; import { cn } from "@/lib/utils"; const PriceContext = createContext<{ onSale?: boolean }>({ onSale: false }); export const usePriceContext = () => useContext(PriceContext); interface PriceProps { className?: string; children: ReactNode; onSale?: boolean; } interface PriceValueProps { price?: number; currency?: string; variant?: "regular" | "sale"; className?: string; } export type PriceType = { currency?: string; regular: number; sale?: number; }; const formatterCache = new Map(); function formatCurrency(value: number, currency = "USD", locale = "en-US") { const key = `${locale}-${currency}`; if (!formatterCache.has(key)) { formatterCache.set( key, new Intl.NumberFormat(locale, { style: "currency", currency }), ); } return formatterCache.get(key)!.format(value); } const Price = ({ className, children, onSale }: PriceProps) => { return (

{children}

); }; const PriceValue = ({ price, currency = "USD", variant = "regular", className, }: PriceValueProps) => { const { onSale } = usePriceContext(); if (price == null) return null; return ( {formatCurrency(price, currency)} ); }; export { Price, PriceValue }; 56:T90e,"use client"; import clsx from "clsx"; import { Minus, Plus } from "lucide-react"; import type { ReactNode } from "react"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; export interface QuantityProps { className?: string; max?: number; min?: number; onValueChange?: (value: number) => void; renderLeftIcon?: () => ReactNode; renderRightIcon?: () => ReactNode; inputProps?: React.ComponentProps<"input">; } const QuantityInput = ({ onValueChange, inputProps, className, renderRightIcon, renderLeftIcon, ...props }: QuantityProps) => { const { min = 1, max = 99 } = props; const clamp = (num: number) => Math.max(min, Math.min(max, num)); const handleIncrement = () => { const newValue = clamp((inputProps?.value as number) + 1 || min); onValueChange?.(newValue); }; const handleDecrement = () => { const newValue = clamp((inputProps?.value as number) - 1 || min); onValueChange?.(newValue); }; const handleInputChange = (e: React.ChangeEvent) => { let val = parseInt(e.target.value, 10); if (isNaN(val)) val = min; val = clamp(val); onValueChange?.(val); }; return (

); }; export default QuantityInput; 4c:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","@hookform/resolvers",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/%40hookform%2Fresolvers","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","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":"text-xs font-medium","children":"@hookform/resolvers"}]]}]}],["$","li","lucide-react",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","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":"text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","react-hook-form",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/react-hook-form","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","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":"text-xs font-medium","children":"react-hook-form"}]]}]}],["$","li","zod",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/zod","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","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":"text-xs font-medium","children":"zod"}]]}]}],["$","li","clsx",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","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":"text-xs font-medium","children":"clsx"}]]}]}]]}],["$","$L50",null,{"registryDependencies":["utils","accordion","aspect-ratio","button","card","checkbox","field","input","radio-group","context-menu"]}]]}],["$","$L51",null,{"sourceUrl":"https://shadcnblocks.com/r/checkout1.json","proxyUrl":"https://shadcnregistry.com/r/shadcnblocks/checkout1","itemId":"@shadcnblocks/checkout1"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L52",null,{"files":[{"path":"block/checkout1/checkout1.tsx","content":"$53","type":"registry:block"},{"path":"components/shadcnblocks/logo.tsx","content":"$54","type":"registry:component","target":""},{"path":"components/shadcnblocks/price.tsx","content":"$55","type":"registry:component","target":""},{"path":"components/shadcnblocks/quantity-input.tsx","content":"$56","type":"registry:component","target":""}]}]]}],"$L57"]}]

Checkout 1 Accordion Checkout With Cart And Payment Steps

Installation

Files

components

Styles