50: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 51: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 52:T11f7,'use client' import { useState } from 'react' import { ArrowLeft, Lock } from 'lucide-react' import { Button } from '@/components/ui/button' import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card' import { initialCheckoutForm1Data, type CheckoutForm1Data } from "@/components/data/checkout-form-1-data" import { CheckoutForm1ContactStep } from './checkout-form-1-contact-step' import { CheckoutForm1OrderSummary } from './checkout-form-1-order-summary' import { CheckoutForm1PaymentStep } from './checkout-form-1-payment-step' import { CheckoutForm1Progress } from './checkout-form-1-progress' import { CheckoutForm1ShippingStep } from './checkout-form-1-shipping-step' const STEP_COPY = [ { title: 'Contact Information', description: "We'll use this to send you order updates" }, { title: 'Shipping Address', description: 'Where should we deliver your order?' }, { title: 'Payment Details', description: 'Your payment information is secure and encrypted' }, ] export function CheckoutForm1() { const [step, setStep] = useState(1) const [formData, setFormData] = useState(initialCheckoutForm1Data) const handleInputChange = (field: keyof CheckoutForm1Data, value: string | boolean) => { setFormData(prev => ({ ...prev, [field]: value })) } /** Card numbers read in four-digit groups, so the value is reformatted as it is typed. */ const handleCardNumberChange = (value: string) => { const formatted = value .replace(/\s/g, '') .replace(/(.{4})/g, '$1 ') .trim() handleInputChange('cardNumber', formatted) } const handleExpiryChange = (value: string) => { const formatted = value.replace(/\D/g, '').replace(/(\d{2})(\d)/, '$1/$2') handleInputChange('expiryDate', formatted) } const nextStep = () => setStep(prev => Math.min(prev + 1, STEP_COPY.length)) const prevStep = () => setStep(prev => Math.max(prev - 1, 1)) return (

Secure Checkout

Complete your purchase in just a few steps

{STEP_COPY[step - 1].title} {STEP_COPY[step - 1].description} {step === 1 ? : null} {step === 2 ? : null} {step === 3 ? ( ) : null}

{step < STEP_COPY.length ? ( ) : ( )}

handleInputChange('promoCode', value)} />

) } export default CheckoutForm1 53:T79e,'use client' import { Field, FieldGroup, FieldLabel } from '@/components/ui/field' import { Input } from '@/components/ui/input' import type { CheckoutForm1Data } from "@/components/data/checkout-form-1-data" type CheckoutForm1ContactStepProps = { formData: CheckoutForm1Data onChange: (field: keyof CheckoutForm1Data, value: string) => void } export function CheckoutForm1ContactStep({ formData, onChange }: CheckoutForm1ContactStepProps) { return ( Email address onChange('email', event.target.value)} className='h-9' />

First name onChange('firstName', event.target.value)} className='h-9' /> Last name onChange('lastName', event.target.value)} className='h-9' />

Phone number (optional) onChange('phone', event.target.value)} className='h-9' /> ) } 54:T481,'use client' import { Field, FieldLabel } from '@/components/ui/field' import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select' import { countryLabels, countryOptions } from "@/components/data/checkout-form-1-data" type CheckoutForm1CountryFieldProps = { id: string value: string onValueChange: (value: string) => void } export function CheckoutForm1CountryField({ id, value, onValueChange }: CheckoutForm1CountryFieldProps) { return ( Country ) } 55:T129d,'use client' import { Gift, Shield, Tag, Truck } from 'lucide-react' import { Badge } from '@/components/ui/badge' import { Button } from '@/components/ui/button' import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card' import { Field, FieldLabel } from '@/components/ui/field' import { Input } from '@/components/ui/input' import { Separator } from '@/components/ui/separator' import { orderSummary } from "@/components/data/checkout-form-1-data" type CheckoutForm1OrderSummaryProps = { promoCode: string onPromoCodeChange: (value: string) => void } export function CheckoutForm1OrderSummary({ promoCode, onPromoCodeChange }: CheckoutForm1OrderSummaryProps) { const subtotal = orderSummary.items.reduce((sum, item) => sum + item.price * item.quantity, 0) const total = subtotal + orderSummary.shipping + orderSummary.tax - orderSummary.discount - orderSummary.promoDiscount return ( Order Summary

{orderSummary.items.map(item => (

{item.quantity}

{item.name}

{item.variant}

${item.price}

))}

Promo code

onPromoCodeChange(event.target.value)} />

Subtotal ${subtotal.toFixed(2)}

${orderSummary.shipping.toFixed(2)}

Tax ${orderSummary.tax.toFixed(2)}

{orderSummary.promoDiscount > 0 ? (

-${orderSummary.promoDiscount.toFixed(2)}

) : null}

Total ${total.toFixed(2)}

) } 56:T113f,'use client' import { useState } from 'react' import { CreditCard, Eye, EyeOff } from 'lucide-react' import { CheckboxCheck } from '@/components/motion/checkbox-check' import { Field, FieldGroup, FieldLabel, FieldLegend, FieldSet } from '@/components/ui/field' import { Input } from '@/components/ui/input' import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from '@/components/ui/input-group' import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group' import type { CheckoutForm1Data } from "@/components/data/checkout-form-1-data" type CheckoutForm1PaymentStepProps = { formData: CheckoutForm1Data onChange: (field: keyof CheckoutForm1Data, value: string | boolean) => void onCardNumberChange: (value: string) => void onExpiryChange: (value: string) => void } export function CheckoutForm1PaymentStep({ formData, onChange, onCardNumberChange, onExpiryChange, }: CheckoutForm1PaymentStepProps) { const [showCvv, setShowCvv] = useState(false) return (

Payment method

Card number onCardNumberChange(event.target.value)} maxLength={19} className='h-9' />

Expiry onExpiryChange(event.target.value)} maxLength={5} className='h-9' /> CVV onChange('cvv', event.target.value)} maxLength={4} /> setShowCvv(current => !current)} > {showCvv ? : } Name on card onChange('cardName', event.target.value)} className='h-9' />

onChange('saveInfo', checked as boolean)} /> Save payment information for future purchases

) } 57:T49b,'use client' import { cn } from '@/lib/utils' const STEP_COUNT = 3 export function CheckoutForm1Progress({ step }: { step: number }) { return (

{Array.from({ length: STEP_COUNT }, (_, index) => index + 1).map(stepNumber => (

{stepNumber}

{stepNumber < STEP_COUNT ? ( ))}

) } 58:T890,'use client' import { Field, FieldGroup, FieldLabel } from '@/components/ui/field' import { Input } from '@/components/ui/input' import type { CheckoutForm1Data } from "@/components/data/checkout-form-1-data" import { CheckoutForm1CountryField } from './checkout-form-1-country-field' type CheckoutForm1ShippingStepProps = { formData: CheckoutForm1Data onChange: (field: keyof CheckoutForm1Data, value: string) => void } export function CheckoutForm1ShippingStep({ formData, onChange }: CheckoutForm1ShippingStepProps) { return ( Street address onChange('address', event.target.value)} className='h-9' />

City onChange('city', event.target.value)} className='h-9' /> State onChange('state', event.target.value)} className='h-9' />

ZIP code onChange('zipCode', event.target.value)} className='h-9' /> onChange('country', value)} />

) } 59:T85c,/** * Each block ships its own copy: registry install targets are globally unique, so a data file * cannot be shared between two blocks even when the contents match. */ export const countryOptions = [ { value: 'US', label: 'United States' }, { value: 'CA', label: 'Canada' }, { value: 'UK', label: 'United Kingdom' }, { value: 'AU', label: 'Australia' }, ] as const export const countryLabels: Record = Object.fromEntries( countryOptions.map(country => [country.value, country.label]), ) export interface CheckoutForm1Data { email: string firstName: string lastName: string phone: string address: string city: string state: string zipCode: string country: string cardNumber: string expiryDate: string cvv: string cardName: string saveInfo: boolean sameAsBilling: boolean newsletter: boolean promoCode: string } export const initialCheckoutForm1Data: CheckoutForm1Data = { email: '', firstName: '', lastName: '', phone: '', address: '', city: '', state: '', zipCode: '', country: 'US', cardNumber: '', expiryDate: '', cvv: '', cardName: '', saveInfo: false, sameAsBilling: true, newsletter: false, promoCode: '', } export interface OrderSummaryItem { id: number name: string variant: string price: number quantity: number image: string } export interface OrderSummary { items: OrderSummaryItem[] shipping: number tax: number discount: number promoDiscount: number } export const orderSummary: OrderSummary = { items: [ { id: 1, name: 'Premium Wireless Headphones', variant: 'Midnight Black', price: 299.99, quantity: 1, image: 'https://assets.shadcnstore.com/shadcnstore.com/stock/e-commerce/premium-wireless-headphones.600w.7d1414.avif', }, { id: 2, name: 'Leather Laptop Sleeve', variant: 'Brown, 13-inch', price: 89.99, quantity: 1, image: 'https://assets.shadcnstore.com/shadcnstore.com/stock/e-commerce/leather-laptop-sleeve.800w.86ef12.avif', }, ], shipping: 15.99, tax: 27.54, discount: 0, promoDiscount: 0, }4f:["$","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","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"}]]}]}]]}],["$","$L50",null,{"namespace":"@shadcnstore","registryDependencies":["@shadcnstore/motion-checkbox-check","badge","button","card","field","input","input-group","radio-group","select","separator"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"storage/app/registry-sources/e-commerce/checkout-forms/checkout-form-1/page.tsx","content":"import { CheckoutForm1 } from \"@/components/blocks/e-commerce/checkout-forms/checkout-form-1/components/checkout-form-1\"\n\nexport default function Page() {\n return (\n

\n \n

\n )\n}\n","type":"registry:page","target":"app/checkout-form-1/page.tsx"},{"path":"storage/app/registry-sources/e-commerce/checkout-forms/checkout-form-1/checkout-form-1.tsx","content":"$52","type":"registry:component","target":"@components/checkout-form-1.tsx"},{"path":"storage/app/registry-sources/e-commerce/checkout-forms/checkout-form-1/checkout-form-1-contact-step.tsx","content":"$53","type":"registry:component","target":"@components/checkout-form-1-contact-step.tsx"},{"path":"storage/app/registry-sources/e-commerce/checkout-forms/checkout-form-1/checkout-form-1-country-field.tsx","content":"$54","type":"registry:component","target":"@components/checkout-form-1-country-field.tsx"},{"path":"storage/app/registry-sources/e-commerce/checkout-forms/checkout-form-1/checkout-form-1-order-summary.tsx","content":"$55","type":"registry:component","target":"@components/checkout-form-1-order-summary.tsx"},{"path":"storage/app/registry-sources/e-commerce/checkout-forms/checkout-form-1/checkout-form-1-payment-step.tsx","content":"$56","type":"registry:component","target":"@components/checkout-form-1-payment-step.tsx"},{"path":"storage/app/registry-sources/e-commerce/checkout-forms/checkout-form-1/checkout-form-1-progress.tsx","content":"$57","type":"registry:component","target":"@components/checkout-form-1-progress.tsx"},{"path":"storage/app/registry-sources/e-commerce/checkout-forms/checkout-form-1/checkout-form-1-shipping-step.tsx","content":"$58","type":"registry:component","target":"@components/checkout-form-1-shipping-step.tsx"},{"path":"storage/app/registry-sources/e-commerce/checkout-forms/checkout-form-1/checkout-form-1-data.ts","content":"$59","type":"registry:lib","target":"@components/data/checkout-form-1-data.ts"}],"className":"h-[70svh] min-h-80"}]]}]