import { Form, Head, Link, usePage } from '@inertiajs/react'; import { CheckCircle2, LogIn, Mail, MapPin, MessageSquare, Phone, User } from 'lucide-react'; import { useState } from 'react'; import { FormField } from '@/components/form-field'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Separator } from '@/components/ui/separator'; import { Textarea } from '@/components/ui/textarea'; import { formatUSPhone } from '@/lib/utils'; import type { User as AuthUser } from '@/types/auth'; function IconInput({ icon: Icon, ...props }: React.InputHTMLAttributes & { icon: React.ComponentType<{ className?: string }> }) { return (
); } type Props = { draft?: { name?: string; email?: string; phone?: string; office_suite?: string; cell?: string; service_type?: 'mobile' | 'fixed'; service_address?: string; service_city?: string; service_state?: string; service_zip?: string; notes?: string; location?: { name: string; address: string | null; city: string | null; state: string | null; zip: string | null; } | null; }; }; export default function Step6CustomerInfo({ draft }: Props) { const { auth } = usePage().props as { auth?: { user?: AuthUser } }; const user = auth?.user ?? null; const userPhone = (user?.phone as string | undefined) ?? ''; const userOfficeSuite = (user?.office_suite as string | undefined) ?? ''; const userCell = (user?.cell as string | undefined) ?? ''; const [values, setValues] = useState({ name: draft?.name || user?.name || '', email: draft?.email || user?.email || '', phone: draft?.phone || userPhone, office_suite: draft?.office_suite || userOfficeSuite, cell: draft?.cell || userCell, service_address: draft?.service_address || '', service_city: draft?.service_city || '', service_state: draft?.service_state || '', service_zip: draft?.service_zip || '', notes: draft?.notes || '', }); const set = (key: keyof typeof values) => (e: React.ChangeEvent) => setValues((v) => ({ ...v, [key]: e.target.value })); const loginUrl = `/login?redirect_to=${encodeURIComponent('/book/customer-info')}`; return ( <>
{({ errors, processing }) => (

Your contact details

We'll use this to confirm your booking and reach you if needed.

{/* Auth banner */} {user ? (

Signed in as {user.name}

Your details have been pre-filled — edit anything below.

) : (

Returning customer?

Sign in to pre-fill your contact details.

Sign in
)} {/* Contact info */}

Contact information

setValues((v) => ({ ...v, cell: formatUSPhone(e.target.value), })) } /> setValues((v) => ({ ...v, phone: formatUSPhone(e.target.value), })) } />
{/* Service address — read-only for fixed, editable for mobile */} {draft?.service_type === 'fixed' && draft?.location ? (

Service location

{draft.location.name}

{draft.location.address && (

{draft.location.address} {draft.location.city && `, ${draft.location.city}`} {draft.location.state && `, ${draft.location.state}`} {draft.location.zip && ` ${draft.location.zip}`}

)}
) : (

Service address
)} {/* Notes */}