Skip to main content

CustomerDetailsForm

Collects customer contact information (name, email, phone) as the first step of the checkout flow.

Preview

View in Storybook

Import

import { CustomerDetailsForm } from '@/components/CustomerDetailsForm'

Usage

<CustomerDetailsForm
  initialValues={savedCustomerInfo}
  onSubmit={handleCustomerDetails}
/>

Props

initialValues
CustomerDetails
Pre-filled values from a returning customer or saved session.
onSubmit
(details: CustomerDetails) => void
required
Callback fired when the form is submitted with valid data.

Behavior

  • Validates email format and phone number
  • Remembers returning customer info via local storage
  • Phone input with country code selector
  • Auto-focuses the first empty field