86 lines
2.5 KiB
TypeScript
86 lines
2.5 KiB
TypeScript
import React from 'react';
|
|
import { FormSection } from '../../../components/forms/FormSection';
|
|
import { FormField } from '../../../components/forms/FormField';
|
|
import { SelectField } from '../../../components/forms/SelectField';
|
|
import { PhoneInput } from '../../../components/forms/PhoneInput';
|
|
|
|
const jobPositions = ['Director', 'GM', 'VP', 'CEO', 'CFO', 'General Counsel', 'Other'];
|
|
|
|
interface AuthorizedRepStepProps {
|
|
data: any;
|
|
errors: Record<string, string>;
|
|
onChange: (data: any) => void;
|
|
}
|
|
|
|
export function AuthorizedRepStep({ data, errors, onChange }: AuthorizedRepStepProps) {
|
|
return (
|
|
<div>
|
|
<FormSection
|
|
title="Authorized Representative"
|
|
description="Primary contact for this registration"
|
|
>
|
|
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--spacing-4)' }}>
|
|
<FormField
|
|
label="First Name"
|
|
name="firstName"
|
|
value={data.firstName}
|
|
onChange={(v) => onChange({ firstName: v })}
|
|
error={errors.firstName}
|
|
required
|
|
/>
|
|
|
|
<FormField
|
|
label="Last Name"
|
|
name="lastName"
|
|
value={data.lastName}
|
|
onChange={(v) => onChange({ lastName: v })}
|
|
error={errors.lastName}
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<FormField
|
|
label="Business Title"
|
|
name="businessTitle"
|
|
value={data.businessTitle}
|
|
onChange={(v) => onChange({ businessTitle: v })}
|
|
placeholder="e.g., Director of Marketing"
|
|
error={errors.businessTitle}
|
|
required
|
|
/>
|
|
|
|
<SelectField
|
|
label="Job Position"
|
|
name="jobPosition"
|
|
value={data.jobPosition}
|
|
onChange={(v) => onChange({ jobPosition: v })}
|
|
options={jobPositions}
|
|
error={errors.jobPosition}
|
|
required
|
|
/>
|
|
|
|
<PhoneInput
|
|
label="Phone Number"
|
|
name="phoneNumber"
|
|
value={data.phoneNumber}
|
|
onChange={(v) => onChange({ phoneNumber: v })}
|
|
helpText="Enter 10-digit US number"
|
|
error={errors.phoneNumber}
|
|
required
|
|
/>
|
|
|
|
<FormField
|
|
label="Email Address"
|
|
name="email"
|
|
type="email"
|
|
value={data.email}
|
|
onChange={(v) => onChange({ email: v })}
|
|
placeholder="contact@example.com"
|
|
error={errors.email}
|
|
required
|
|
/>
|
|
</FormSection>
|
|
</div>
|
|
);
|
|
}
|