108 lines
3.3 KiB
TypeScript
108 lines
3.3 KiB
TypeScript
import React from 'react';
|
|
import { FormSection } from '../../../components/forms/FormSection';
|
|
import { FormField } from '../../../components/forms/FormField';
|
|
import { SelectField } from '../../../components/forms/SelectField';
|
|
|
|
const usStates = [
|
|
'AL', 'AK', 'AZ', 'AR', 'CA', 'CO', 'CT', 'DE', 'FL', 'GA', 'HI', 'ID', 'IL', 'IN', 'IA',
|
|
'KS', 'KY', 'LA', 'ME', 'MD', 'MA', 'MI', 'MN', 'MS', 'MO', 'MT', 'NE', 'NV', 'NH', 'NJ',
|
|
'NM', 'NY', 'NC', 'ND', 'OH', 'OK', 'OR', 'PA', 'RI', 'SC', 'SD', 'TN', 'TX', 'UT', 'VT',
|
|
'VA', 'WA', 'WV', 'WI', 'WY',
|
|
];
|
|
|
|
const caProvinces = ['AB', 'BC', 'MB', 'NB', 'NL', 'NS', 'NT', 'NU', 'ON', 'PE', 'QC', 'SK', 'YT'];
|
|
|
|
const countries = [
|
|
{ value: 'US', label: 'United States' },
|
|
{ value: 'CA', label: 'Canada' },
|
|
];
|
|
|
|
interface BusinessAddressStepProps {
|
|
data: any;
|
|
errors: Record<string, string>;
|
|
onChange: (data: any) => void;
|
|
}
|
|
|
|
export function BusinessAddressStep({ data, errors, onChange }: BusinessAddressStepProps) {
|
|
const regions = data.isoCountry === 'CA' ? caProvinces : usStates;
|
|
|
|
return (
|
|
<div>
|
|
<FormSection
|
|
title="Business Address"
|
|
description="Physical location of your business"
|
|
>
|
|
<FormField
|
|
label="Customer Name"
|
|
name="customerName"
|
|
value={data.customerName}
|
|
onChange={(v) => onChange({ customerName: v })}
|
|
helpText="Name associated with this address"
|
|
error={errors.customerName}
|
|
required
|
|
/>
|
|
|
|
<FormField
|
|
label="Street Address"
|
|
name="street"
|
|
value={data.street}
|
|
onChange={(v) => onChange({ street: v })}
|
|
placeholder="123 Main Street"
|
|
error={errors.street}
|
|
required
|
|
/>
|
|
|
|
<FormField
|
|
label="Street Address Line 2"
|
|
name="streetSecondary"
|
|
value={data.streetSecondary}
|
|
onChange={(v) => onChange({ streetSecondary: v })}
|
|
placeholder="Suite 100 (optional)"
|
|
/>
|
|
|
|
<div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 'var(--spacing-4)' }}>
|
|
<FormField
|
|
label="City"
|
|
name="city"
|
|
value={data.city}
|
|
onChange={(v) => onChange({ city: v })}
|
|
error={errors.city}
|
|
required
|
|
/>
|
|
|
|
<SelectField
|
|
label={data.isoCountry === 'CA' ? 'Province' : 'State'}
|
|
name="region"
|
|
value={data.region}
|
|
onChange={(v) => onChange({ region: v })}
|
|
options={regions}
|
|
error={errors.region}
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--spacing-4)' }}>
|
|
<FormField
|
|
label="Postal Code"
|
|
name="postalCode"
|
|
value={data.postalCode}
|
|
onChange={(v) => onChange({ postalCode: v })}
|
|
placeholder={data.isoCountry === 'CA' ? 'A1A 1A1' : '12345'}
|
|
error={errors.postalCode}
|
|
required
|
|
/>
|
|
|
|
<SelectField
|
|
label="Country"
|
|
name="isoCountry"
|
|
value={data.isoCountry}
|
|
onChange={(v) => onChange({ isoCountry: v, region: '' })}
|
|
options={countries}
|
|
required
|
|
/>
|
|
</div>
|
|
</FormSection>
|
|
</div>
|
|
);
|
|
}
|