@thorprovider/blocks 1.0.0 → 3.0.0

package/src/blocks/e-commerce/checkout-forms/checkout-form-2-payment-card.tsx

@@ -1,175 +0,0 @@
-import { CreditCard, Shield } from 'lucide-react'
-
-import { Card, CardContent, CardHeader, CardTitle } from '../../../ui/card'
-import { Field, FieldGroup, FieldLabel } from '../../../ui/field'
-import { Input } from '../../../ui/input'
-import { RadioGroup, RadioGroupItem } from '../../../ui/radio-group'
-import { CheckoutFieldFeedback, checkoutFieldAria } from './checkout-field-feedback'
-import type { PaymentMethod } from '@thorprovider/types'
-import type {
-  CheckoutForm2Data,
-  CheckoutForm2FieldDescriptions,
-  CheckoutForm2FieldErrors,
-} from './checkout-form-2'
-
-interface CheckoutForm2PaymentCardProps {
-  paymentMethod: string
-  onPaymentMethodChange: (method: string) => void
-  data: CheckoutForm2Data
-  onChange: (field: keyof CheckoutForm2Data, value: string | boolean) => void
-  onCardNumberChange: (value: string) => void
-  onExpiryChange: (value: string) => void
-  paymentMethods?: PaymentMethod[]
-  noMethodsLabel?: string
-  paymentLabel: string
-  cardNumberLabel: string
-  expiryLabel: string
-  cvvLabel: string
-  cardNameLabel: string
-  encryptedNoteLabel: string
-  fieldErrors?: CheckoutForm2FieldErrors
-  fieldDescriptions?: CheckoutForm2FieldDescriptions
-}
-
-export function CheckoutForm2PaymentCard({
-  paymentMethod,
-  onPaymentMethodChange,
-  data,
-  onChange,
-  onCardNumberChange,
-  onExpiryChange,
-  paymentMethods = [],
-  noMethodsLabel = 'No hay métodos de pago disponibles para esta región.',
-  paymentLabel,
-  cardNumberLabel,
-  expiryLabel,
-  cvvLabel,
-  cardNameLabel,
-  encryptedNoteLabel,
-  fieldErrors,
-  fieldDescriptions,
-}: CheckoutForm2PaymentCardProps) {
-  const selectedMethod = paymentMethods.find(method => method.id === paymentMethod)
-  const isCard = selectedMethod?.type === 'card'
-
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle className='flex items-center gap-2'>
-          <CreditCard className='size-5' aria-hidden='true' />
-          {paymentLabel}
-        </CardTitle>
-      </CardHeader>
-      <CardContent className='flex flex-col gap-4'>
-        {paymentMethods.length === 0 ? (
-          <p className='text-muted-foreground text-sm'>{noMethodsLabel}</p>
-        ) : (
-          <RadioGroup value={paymentMethod} onValueChange={value => value && onPaymentMethodChange(value)}>
-            {paymentMethods.map(method => (
-              <Field key={method.id} orientation='horizontal'>
-                <RadioGroupItem value={method.id} id={method.id} />
-                <FieldLabel htmlFor={method.id} className='flex flex-col gap-0.5 font-normal'>
-                  <span className='flex items-center gap-2'>
-                    <CreditCard className='size-4' aria-hidden='true' />
-                    {method.name}
-                  </span>
-                  {method.description ? (
-                    <span className='text-muted-foreground text-xs'>{method.description}</span>
-                  ) : null}
-                </FieldLabel>
-              </Field>
-            ))}
-          </RadioGroup>
-        )}
-
-        {selectedMethod && !isCard ? (
-          <div className='bg-muted/50 rounded-lg p-4 text-sm'>
-            <p className='font-medium'>{selectedMethod.name}</p>
-            {selectedMethod.description ? <p className='text-muted-foreground mt-1'>{selectedMethod.description}</p> : null}
-          </div>
-        ) : null}
-
-        {isCard ? (
-          <div className='border-muted border-l-2 ps-6'>
-            <FieldGroup>
-              <Field data-invalid={!!fieldErrors?.cardNumber?.length}>
-                <FieldLabel htmlFor='cardNumber'>{cardNumberLabel}</FieldLabel>
-                <Input
-                  id='cardNumber'
-                  placeholder='1234 5678 9012 3456'
-                  inputMode='numeric'
-                  value={data.cardNumber}
-                  onChange={event => onCardNumberChange(event.target.value)}
-                  {...checkoutFieldAria('cardNumber', fieldErrors?.cardNumber)}
-                  className='h-9 font-mono'
-                />
-                <CheckoutFieldFeedback
-                  id='cardNumber'
-                  errors={fieldErrors?.cardNumber}
-                  description={fieldDescriptions?.cardNumber}
-                />
-              </Field>
-              <div className='grid gap-4 sm:grid-cols-2 md:grid-cols-3'>
-                <Field data-invalid={!!fieldErrors?.expiryDate?.length} className='sm:col-span-2'>
-                  <FieldLabel htmlFor='expiryDate'>{expiryLabel}</FieldLabel>
-                  <Input
-                    id='expiryDate'
-                    placeholder='MM/AA'
-                    inputMode='numeric'
-                    value={data.expiryDate}
-                    onChange={event => onExpiryChange(event.target.value)}
-                    {...checkoutFieldAria('expiryDate', fieldErrors?.expiryDate)}
-                    className='h-9 font-mono'
-                  />
-                  <CheckoutFieldFeedback
-                    id='expiryDate'
-                    errors={fieldErrors?.expiryDate}
-                    description={fieldDescriptions?.expiryDate}
-                  />
-                </Field>
-                <Field data-invalid={!!fieldErrors?.cvv?.length}>
-                  <FieldLabel htmlFor='cvv'>{cvvLabel}</FieldLabel>
-                  <Input
-                    id='cvv'
-                    placeholder='123'
-                    inputMode='numeric'
-                    value={data.cvv}
-                    onChange={event => onChange('cvv', event.target.value)}
-                    {...checkoutFieldAria('cvv', fieldErrors?.cvv)}
-                    className='h-9 font-mono'
-                  />
-                  <CheckoutFieldFeedback
-                    id='cvv'
-                    errors={fieldErrors?.cvv}
-                    description={fieldDescriptions?.cvv}
-                  />
-                </Field>
-              </div>
-              <Field data-invalid={!!fieldErrors?.cardName?.length}>
-                <FieldLabel htmlFor='cardName'>{cardNameLabel}</FieldLabel>
-                <Input
-                  id='cardName'
-                  placeholder='Juan Pérez'
-                  value={data.cardName}
-                  onChange={event => onChange('cardName', event.target.value)}
-                  {...checkoutFieldAria('cardName', fieldErrors?.cardName)}
-                  className='h-9'
-                />
-                <CheckoutFieldFeedback
-                  id='cardName'
-                  errors={fieldErrors?.cardName}
-                  description={fieldDescriptions?.cardName}
-                />
-              </Field>
-            </FieldGroup>
-          </div>
-        ) : null}
-
-        <div className='bg-muted/50 flex items-center gap-2 rounded-lg p-3 text-sm'>
-          <Shield className='size-4 text-success' aria-hidden='true' />
-          <span>{encryptedNoteLabel}</span>
-        </div>
-      </CardContent>
-    </Card>
-  )
-}

package/src/blocks/e-commerce/checkout-forms/checkout-form-2-shipping-card.tsx

@@ -1,190 +0,0 @@
-import { Truck } from 'lucide-react'
-
-import { Card, CardContent, CardHeader, CardTitle } from '../../../ui/card'
-import { CheckboxCheck } from './checkbox-check'
-import { Field, FieldGroup, FieldLabel } from '../../../ui/field'
-import { Input } from '../../../ui/input'
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '../../../ui/select'
-import { CheckoutFieldFeedback, checkoutFieldAria } from './checkout-field-feedback'
-import type {
-  CheckoutForm2CountryOption,
-  CheckoutForm2Data,
-  CheckoutForm2FieldDescriptions,
-  CheckoutForm2FieldErrors,
-} from './checkout-form-2'
-
-interface CheckoutForm2ShippingCardProps {
-  data: CheckoutForm2Data
-  onChange: (field: keyof CheckoutForm2Data, value: string | boolean) => void
-  countryOptions: CheckoutForm2CountryOption[]
-  shippingAddressLabel: string
-  firstNameLabel: string
-  lastNameLabel: string
-  addressLabel: string
-  cityLabel: string
-  zipCodeLabel: string
-  countryLabel: string
-  saveInfoLabel: string
-  fieldErrors?: CheckoutForm2FieldErrors
-  fieldDescriptions?: CheckoutForm2FieldDescriptions
-}
-
-const countryLabelFor = (value: string, options: CheckoutForm2CountryOption[]) =>
-  options.find(option => option.value === value)?.label ?? value
-
-export function CheckoutForm2ShippingCard({
-  data,
-  onChange,
-  countryOptions,
-  shippingAddressLabel,
-  firstNameLabel,
-  lastNameLabel,
-  addressLabel,
-  cityLabel,
-  zipCodeLabel,
-  countryLabel,
-  saveInfoLabel,
-  fieldErrors,
-  fieldDescriptions,
-}: CheckoutForm2ShippingCardProps) {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle className='flex items-center gap-2'>
-          <Truck className='size-5' aria-hidden='true' />
-          {shippingAddressLabel}
-        </CardTitle>
-      </CardHeader>
-      <CardContent>
-        <FieldGroup>
-          <div className='grid gap-4 sm:grid-cols-2'>
-            <Field data-invalid={!!fieldErrors?.firstName?.length}>
-              <FieldLabel htmlFor='firstName'>{firstNameLabel}</FieldLabel>
-              <Input
-                id='firstName'
-                placeholder='Juan'
-                value={data.firstName}
-                onChange={event => onChange('firstName', event.target.value)}
-                {...checkoutFieldAria('firstName', fieldErrors?.firstName)}
-                className='h-9'
-              />
-              <CheckoutFieldFeedback
-                id='firstName'
-                errors={fieldErrors?.firstName}
-                description={fieldDescriptions?.firstName}
-              />
-            </Field>
-            <Field data-invalid={!!fieldErrors?.lastName?.length}>
-              <FieldLabel htmlFor='lastName'>{lastNameLabel}</FieldLabel>
-              <Input
-                id='lastName'
-                placeholder='Pérez'
-                value={data.lastName}
-                onChange={event => onChange('lastName', event.target.value)}
-                {...checkoutFieldAria('lastName', fieldErrors?.lastName)}
-                className='h-9'
-              />
-              <CheckoutFieldFeedback
-                id='lastName'
-                errors={fieldErrors?.lastName}
-                description={fieldDescriptions?.lastName}
-              />
-            </Field>
-          </div>
-
-          <Field data-invalid={!!fieldErrors?.address?.length}>
-            <FieldLabel htmlFor='address'>{addressLabel}</FieldLabel>
-            <Input
-              id='address'
-              placeholder='Calle Principal 123'
-              value={data.address}
-              onChange={event => onChange('address', event.target.value)}
-              {...checkoutFieldAria('address', fieldErrors?.address)}
-              className='h-9'
-            />
-            <CheckoutFieldFeedback
-              id='address'
-              errors={fieldErrors?.address}
-              description={fieldDescriptions?.address}
-            />
-          </Field>
-
-          <div className='grid gap-4 sm:grid-cols-2 md:grid-cols-3'>
-            <Field data-invalid={!!fieldErrors?.city?.length}>
-              <FieldLabel htmlFor='city'>{cityLabel}</FieldLabel>
-              <Input
-                id='city'
-                placeholder='Madrid'
-                value={data.city}
-                onChange={event => onChange('city', event.target.value)}
-                {...checkoutFieldAria('city', fieldErrors?.city)}
-                className='h-9'
-              />
-              <CheckoutFieldFeedback
-                id='city'
-                errors={fieldErrors?.city}
-                description={fieldDescriptions?.city}
-              />
-            </Field>
-            <Field data-invalid={!!fieldErrors?.zipCode?.length}>
-              <FieldLabel htmlFor='zipCode'>{zipCodeLabel}</FieldLabel>
-              <Input
-                id='zipCode'
-                placeholder='28001'
-                value={data.zipCode}
-                onChange={event => onChange('zipCode', event.target.value)}
-                {...checkoutFieldAria('zipCode', fieldErrors?.zipCode)}
-                className='h-9'
-              />
-              <CheckoutFieldFeedback
-                id='zipCode'
-                errors={fieldErrors?.zipCode}
-                description={fieldDescriptions?.zipCode}
-              />
-            </Field>
-            <Field data-invalid={!!fieldErrors?.country?.length}>
-              <FieldLabel htmlFor='country'>{countryLabel}</FieldLabel>
-              <Select value={data.country} onValueChange={value => value && onChange('country', value)}>
-                <SelectTrigger id='country' {...checkoutFieldAria('country', fieldErrors?.country)} className='w-full'>
-                  <SelectValue>{countryLabelFor(data.country, countryOptions)}</SelectValue>
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectGroup>
-                    {countryOptions.map(country => (
-                      <SelectItem key={country.value} value={country.value}>
-                        {country.label}
-                      </SelectItem>
-                    ))}
-                  </SelectGroup>
-                </SelectContent>
-              </Select>
-              <CheckoutFieldFeedback
-                id='country'
-                errors={fieldErrors?.country}
-                description={fieldDescriptions?.country}
-              />
-            </Field>
-          </div>
-
-          <Field orientation='horizontal'>
-            <CheckboxCheck
-              id='saveInfo'
-              checked={data.saveInfo}
-              onCheckedChange={checked => onChange('saveInfo', checked as boolean)}
-            />
-            <FieldLabel htmlFor='saveInfo' className='text-sm font-normal'>
-              {saveInfoLabel}
-            </FieldLabel>
-          </Field>
-        </FieldGroup>
-      </CardContent>
-    </Card>
-  )
-}

package/src/blocks/e-commerce/checkout-forms/checkout-form-2.tsx

@@ -1,312 +0,0 @@
-'use client'
-
-import { useState, type FormEvent } from 'react'
-import { ArrowLeft, Lock, Package } from 'lucide-react'
-
-import { Button } from '../../../ui/button'
-import { Card, CardContent, CardHeader, CardTitle } from '../../../ui/card'
-import { CheckboxCheck } from './checkbox-check'
-import { Field, FieldGroup, FieldLabel } from '../../../ui/field'
-import { Input } from '../../../ui/input'
-import { CheckoutFieldFeedback, checkoutFieldAria } from './checkout-field-feedback'
-import { formatCardNumber, formatExpiryDate } from './card-formatting'
-import type { PaymentMethod } from '@thorprovider/types'
-import type { CheckoutFieldErrors } from './checkout-form-types'
-
-import { CheckoutForm2OrderSummary } from './checkout-form-2-order-summary'
-import { CheckoutForm2PaymentCard } from './checkout-form-2-payment-card'
-import { CheckoutForm2ShippingCard } from './checkout-form-2-shipping-card'
-
-export interface CheckoutForm2Item {
-  id: string
-  name: string
-  price: number
-  quantity: number
-  image: string
-}
-
-export interface CheckoutForm2CountryOption {
-  value: string
-  label: string
-}
-
-export interface CheckoutForm2Data {
-  email: string
-  firstName: string
-  lastName: string
-  address: string
-  city: string
-  zipCode: string
-  country: string
-  saveInfo: boolean
-  newsletter: boolean
-  cardNumber: string
-  expiryDate: string
-  cvv: string
-  cardName: string
-}
-
-export type CheckoutForm2FieldErrors = CheckoutFieldErrors<keyof CheckoutForm2Data>
-
-export type CheckoutForm2FieldDescriptions = Partial<
-  Record<keyof CheckoutForm2Data, string>
->
-
-export interface CheckoutForm2Totals {
-  subtotal: number
-  shipping: number
-  tax: number
-  total: number
-}
-
-export interface CheckoutForm2Props {
-  items: CheckoutForm2Item[]
-  countryOptions?: CheckoutForm2CountryOption[]
-  paymentMethods?: PaymentMethod[]
-  noMethodsLabel?: string
-  taxRate?: number
-  shippingCost?: number
-  freeShippingThreshold?: number
-  currencySymbol?: string
-  titleLabel?: string
-  descriptionLabel?: string
-  backToCartLabel?: string
-  completeOrderLabel?: string
-  contactLabel?: string
-  emailLabel?: string
-  emailPlaceholder?: string
-  newsletterLabel?: string
-  shippingAddressLabel?: string
-  firstNameLabel?: string
-  lastNameLabel?: string
-  addressLabel?: string
-  cityLabel?: string
-  zipCodeLabel?: string
-  countryLabel?: string
-  saveInfoLabel?: string
-  paymentLabel?: string
-  cardNumberLabel?: string
-  expiryLabel?: string
-  cvvLabel?: string
-  cardNameLabel?: string
-  encryptedNoteLabel?: string
-  orderSummaryLabel?: string
-  subtotalLabel?: string
-  shippingLineLabel?: string
-  freeShippingLineLabel?: string
-  taxLabel?: string
-  totalLabel?: string
-  freeShippingNoteLabel?: string
-  estimatedDeliveryLabel?: string
-  values: CheckoutForm2Data
-  onChange: (field: keyof CheckoutForm2Data, value: string | boolean) => void
-  fieldErrors?: CheckoutForm2FieldErrors
-  fieldDescriptions?: CheckoutForm2FieldDescriptions
-  onBackToCart?: () => void
-  onCompleteOrder?: (data: CheckoutForm2Data, totals: CheckoutForm2Totals) => void
-}
-
-const DEFAULT_COUNTRY_OPTIONS: CheckoutForm2CountryOption[] = [
-  { value: 'US', label: 'Estados Unidos' },
-  { value: 'CA', label: 'Canadá' },
-  { value: 'UK', label: 'Reino Unido' },
-  { value: 'AU', label: 'Australia' },
-]
-
-export function CheckoutForm2({
-  items,
-  countryOptions = DEFAULT_COUNTRY_OPTIONS,
-  paymentMethods = [],
-  noMethodsLabel,
-  taxRate = 0.08,
-  shippingCost = 9.99,
-  freeShippingThreshold = 75,
-  currencySymbol = '$',
-  titleLabel = 'Finalizar compra',
-  descriptionLabel = 'Completa tu pedido de forma segura',
-  backToCartLabel = 'Volver al carrito',
-  completeOrderLabel = 'Completar pedido',
-  contactLabel = 'Información de contacto',
-  emailLabel = 'Correo electrónico',
-  emailPlaceholder = 'tucorreo@ejemplo.com',
-  newsletterLabel = 'Quiero recibir novedades y ofertas',
-  shippingAddressLabel = 'Dirección de envío',
-  firstNameLabel = 'Nombre',
-  lastNameLabel = 'Apellido',
-  addressLabel = 'Dirección',
-  cityLabel = 'Ciudad',
-  zipCodeLabel = 'Código postal',
-  countryLabel = 'País',
-  saveInfoLabel = 'Guardar esta información para la próxima vez',
-  paymentLabel = 'Método de pago',
-  cardNumberLabel = 'Número de tarjeta',
-  expiryLabel = 'Fecha de vencimiento',
-  cvvLabel = 'CVV',
-  cardNameLabel = 'Nombre en la tarjeta',
-  encryptedNoteLabel = 'Tu información de pago está cifrada y segura',
-  orderSummaryLabel = 'Resumen del pedido',
-  subtotalLabel = 'Subtotal',
-  shippingLineLabel = 'Envío',
-  freeShippingLineLabel = 'Gratis',
-  taxLabel = 'Impuestos',
-  totalLabel = 'Total',
-  freeShippingNoteLabel = 'Envío gratis en pedidos superiores a',
-  estimatedDeliveryLabel = 'Entrega estimada: 3-5 días hábiles',
-  values,
-  onChange,
-  fieldErrors,
-  fieldDescriptions,
-  onBackToCart,
-  onCompleteOrder,
-}: CheckoutForm2Props) {
-  const [paymentMethod, setPaymentMethod] = useState(paymentMethods[0]?.id ?? '')
-
-  const subtotal = items.reduce((sum, item) => sum + item.price * item.quantity, 0)
-  const shipping = subtotal >= freeShippingThreshold ? 0 : shippingCost
-  const tax = subtotal * taxRate
-  const total = subtotal + shipping + tax
-
-  const handleCardNumberChange = (value: string) => {
-    onChange('cardNumber', formatCardNumber(value))
-  }
-
-  const handleExpiryChange = (value: string) => {
-    onChange('expiryDate', formatExpiryDate(value))
-  }
-
-  const handleSubmit = (event: FormEvent) => {
-    event.preventDefault()
-    onCompleteOrder?.(values, { subtotal, shipping, tax, total })
-  }
-
-  return (
-    <section className='py-8'>
-      <div className='mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>
-        <div className='mb-8'>
-          <Button
-            type='button'
-            variant='secondary'
-            size='sm'
-            className='mb-4 h-8 px-3 text-xs cursor-pointer'
-            onClick={onBackToCart}
-          >
-            <ArrowLeft />
-            {backToCartLabel}
-          </Button>
-          <h1 className='text-3xl font-bold tracking-tight text-balance'>{titleLabel}</h1>
-          <p className='text-muted-foreground mt-2'>{descriptionLabel}</p>
-        </div>
-
-        <div className='grid gap-8 lg:grid-cols-3'>
-          <div className='order-2 lg:order-1 lg:col-span-2'>
-            <form onSubmit={handleSubmit} className='flex flex-col gap-8'>
-              <Card>
-                <CardHeader>
-                  <CardTitle className='flex items-center gap-2'>
-                    <Package className='size-5' aria-hidden='true' />
-                    {contactLabel}
-                  </CardTitle>
-                </CardHeader>
-                <CardContent>
-                  <FieldGroup>
-                    <Field data-invalid={!!fieldErrors?.email?.length}>
-                      <FieldLabel htmlFor='email'>{emailLabel}</FieldLabel>
-                      <Input
-                        id='email'
-                        type='text'
-                        inputMode='email'
-                        placeholder={emailPlaceholder}
-                        value={values.email}
-                        onChange={event => onChange('email', event.target.value)}
-                        {...checkoutFieldAria('email', fieldErrors?.email)}
-                        className='h-9'
-                      />
-                      <CheckoutFieldFeedback
-                        id='email'
-                        errors={fieldErrors?.email}
-                        description={fieldDescriptions?.email}
-                      />
-                    </Field>
-                    <Field orientation='horizontal'>
-                      <CheckboxCheck
-                        id='newsletter'
-                        checked={values.newsletter}
-                        onCheckedChange={checked => onChange('newsletter', checked as boolean)}
-                      />
-                      <FieldLabel htmlFor='newsletter' className='text-sm font-normal'>
-                        {newsletterLabel}
-                      </FieldLabel>
-                    </Field>
-                  </FieldGroup>
-                </CardContent>
-              </Card>
-
-              <CheckoutForm2ShippingCard
-                data={values}
-                onChange={onChange}
-                countryOptions={countryOptions}
-                shippingAddressLabel={shippingAddressLabel}
-                firstNameLabel={firstNameLabel}
-                lastNameLabel={lastNameLabel}
-                addressLabel={addressLabel}
-                cityLabel={cityLabel}
-                zipCodeLabel={zipCodeLabel}
-                countryLabel={countryLabel}
-                saveInfoLabel={saveInfoLabel}
-                fieldErrors={fieldErrors}
-                fieldDescriptions={fieldDescriptions}
-              />
-
-              <CheckoutForm2PaymentCard
-                paymentMethod={paymentMethod}
-                onPaymentMethodChange={setPaymentMethod}
-                data={values}
-                onChange={onChange}
-                onCardNumberChange={handleCardNumberChange}
-                onExpiryChange={handleExpiryChange}
-                paymentMethods={paymentMethods}
-                noMethodsLabel={noMethodsLabel}
-                paymentLabel={paymentLabel}
-                cardNumberLabel={cardNumberLabel}
-                expiryLabel={expiryLabel}
-                cvvLabel={cvvLabel}
-                cardNameLabel={cardNameLabel}
-                encryptedNoteLabel={encryptedNoteLabel}
-                fieldErrors={fieldErrors}
-                fieldDescriptions={fieldDescriptions}
-              />
-
-              <Button type='submit' size='lg' className='h-10 px-8 w-full cursor-pointer'>
-                <Lock />
-                {completeOrderLabel} • {currencySymbol}
-                {total.toFixed(2)}
-              </Button>
-            </form>
-          </div>
-
-          <div className='order-1 lg:order-2 lg:col-span-1'>
-            <CheckoutForm2OrderSummary
-              items={items}
-              subtotal={subtotal}
-              shipping={shipping}
-              tax={tax}
-              total={total}
-              currencySymbol={currencySymbol}
-              orderSummaryLabel={orderSummaryLabel}
-              subtotalLabel={subtotalLabel}
-              shippingLabel={shippingLineLabel}
-              freeShippingLabel={freeShippingLineLabel}
-              taxLabel={taxLabel}
-              totalLabel={totalLabel}
-              freeShippingNoteLabel={freeShippingNoteLabel}
-              estimatedDeliveryLabel={estimatedDeliveryLabel}
-              freeShippingThreshold={freeShippingThreshold}
-            />
-          </div>
-        </div>
-      </div>
-    </section>
-  )
-}
-
-export default CheckoutForm2