Simple Checkout Form 1

1'use client'
2 
3import { useState } from 'react'
4import { ArrowLeft, Lock } from 'lucide-react'
5 
6import { Button } from '@/components/ui/button'
7import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
8 
9import { initialCheckoutForm1Data, type CheckoutForm1Data } from "@/components/data/checkout-form-1-data"
10import { CheckoutForm1ContactStep } from './checkout-form-1-contact-step'
11import { CheckoutForm1OrderSummary } from './checkout-form-1-order-summary'
12import { CheckoutForm1PaymentStep } from './checkout-form-1-payment-step'
13import { CheckoutForm1Progress } from './checkout-form-1-progress'
14import { CheckoutForm1ShippingStep } from './checkout-form-1-shipping-step'
15 
16const STEP_COPY = [
17  { title: 'Contact Information', description: "We'll use this to send you order updates" },
18  { title: 'Shipping Address', description: 'Where should we deliver your order?' },
19  { title: 'Payment Details', description: 'Your payment information is secure and encrypted' },
20]
21 
22export function CheckoutForm1() {
23  const [step, setStep] = useState(1)
24  const [formData, setFormData] = useState<CheckoutForm1Data>(initialCheckoutForm1Data)
25 
26  const handleInputChange = (field: keyof CheckoutForm1Data, value: string | boolean) => {
27    setFormData(prev => ({ ...prev, [field]: value }))
28  }
29 
30  /** Card numbers read in four-digit groups, so the value is reformatted as it is typed. */
31  const handleCardNumberChange = (value: string) => {
32    const formatted = value
33      .replace(/\s/g, '')
34      .replace(/(.{4})/g, '$1 ')
35      .trim()
36    handleInputChange('cardNumber', formatted)
37  }
38 
39  const handleExpiryChange = (value: string) => {
40    const formatted = value.replace(/\D/g, '').replace(/(\d{2})(\d)/, '$1/$2')
41    handleInputChange('expiryDate', formatted)
42  }
43 
44  const nextStep = () => setStep(prev => Math.min(prev + 1, STEP_COPY.length))
45  const prevStep = () => setStep(prev => Math.max(prev - 1, 1))
46 
47  return (
48    <div className='bg-muted/30'>
49      <div className='mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8 py-8'>
50        <div className='mb-8 text-center'>
51          <h1 className='mb-2 text-3xl font-bold text-balance'>Secure Checkout</h1>
52          <p className='text-muted-foreground'>Complete your purchase in just a few steps</p>
53        </div>
54 
55        <CheckoutForm1Progress step={step} />
56 
57        <div className='grid gap-8 lg:grid-cols-3'>
58          <div className='lg:col-span-2'>
59            <Card>
60              <CardHeader>
61// … truncated