make the booking in many steps

2026-06-29 08:54:41 -04:00
parent ae10f5272f
commit 3d6607e6c8
20 changed files with 3894 additions and 836 deletions
@@ -0,0 +1,710 @@
+'use client'
+
+import { useEffect, useMemo, useReducer, useRef, useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { BilingualInput, bilingualPrimary } from '@/components/ui/BilingualInput'
+import { getReservationWizardCopy, wizardSteps } from './reservationWizard.copy'
+import { ReservationReview } from './ReservationReview'
+import { ReservationStepper } from './ReservationStepper'
+import { createInitialDraft, reservationDraftReducer } from './reservationWizard.reducer'
+import {
+  validateCompleteReservation,
+  validateCustomerStep,
+  validateIdentityStep,
+  validateLicenseStep,
+  validatePaymentExtrasStep,
+  validateRentalStep,
+} from './reservationWizard.schemas'
+import { checkVehicleAvailability, submitReservationDraft } from './reservationWizard.submit'
+import type { AdditionalDriverDraft, Customer, FieldErrors, ReservationDraft, Vehicle, WizardStepId } from './reservationWizard.types'
+import type { BilingualField } from '@/components/ui/BilingualInput'
+
+type Language = 'en' | 'fr' | 'ar'
+
+const paymentModes = ['CASH', 'CARD', 'BANK_TRANSFER', 'AMANPAY', 'PAYPAL'] as const
+
+export function ReservationWizard({
+  customers,
+  vehicles,
+  language,
+}: {
+  customers: Customer[]
+  vehicles: Vehicle[]
+  language: Language
+}) {
+  const router = useRouter()
+  const copy = useMemo(() => getReservationWizardCopy(language), [language])
+  const localeCode = language === 'fr' ? 'fr-FR' : language === 'ar' ? 'ar-MA' : 'en-US'
+  const [draft, dispatch] = useReducer(reservationDraftReducer, undefined, createInitialDraft)
+  const [currentStep, setCurrentStep] = useState<WizardStepId>('customer')
+  const [completedSteps, setCompletedSteps] = useState<Set<WizardStepId>>(new Set())
+  const [errors, setErrors] = useState<FieldErrors>({})
+  const [submitError, setSubmitError] = useState<string | null>(null)
+  const [customerSearch, setCustomerSearch] = useState('')
+  const [saving, setSaving] = useState(false)
+  const [licenseImagePreviewUrl, setLicenseImagePreviewUrl] = useState<string | null>(null)
+  const headingRef = useRef<HTMLHeadingElement | null>(null)
+  const dirtyRef = useRef(false)
+  const pendingErrorFocusRef = useRef<string | null>(null)
+
+  const stepIndex = wizardSteps.findIndex((step) => step.id === currentStep)
+  const highestReachableIndex = Math.min(completedSteps.size, wizardSteps.length - 1)
+  const availableVehicles = vehicles.filter((vehicle) => vehicle.status === 'AVAILABLE')
+  const filteredCustomers = useMemo(() => {
+    const q = customerSearch.trim().toLowerCase()
+    if (!q) return customers
+    return customers.filter((customer) =>
+      `${customer.firstName} ${customer.lastName}`.toLowerCase().includes(q) ||
+      customer.email.toLowerCase().includes(q),
+    )
+  }, [customerSearch, customers])
+
+  useEffect(() => {
+    dirtyRef.current = JSON.stringify(draft) !== JSON.stringify(createInitialDraft())
+  }, [draft])
+
+  useEffect(() => {
+    const onBeforeUnload = (event: BeforeUnloadEvent) => {
+      if (!dirtyRef.current) return
+      event.preventDefault()
+      event.returnValue = copy.leaveWarning
+    }
+    window.addEventListener('beforeunload', onBeforeUnload)
+    return () => window.removeEventListener('beforeunload', onBeforeUnload)
+  }, [copy.leaveWarning])
+
+  useEffect(() => {
+    headingRef.current?.focus()
+  }, [currentStep])
+
+  useEffect(() => {
+    if (!pendingErrorFocusRef.current) return
+    const field = pendingErrorFocusRef.current
+    requestAnimationFrame(() => {
+      const target = document.querySelector<HTMLElement>(`[data-field="${field}"]`)
+      if (target) {
+        target.focus()
+        pendingErrorFocusRef.current = null
+      }
+    })
+  }, [currentStep, errors])
+
+  useEffect(() => {
+    if (!draft.license.newImageFile) {
+      setLicenseImagePreviewUrl(null)
+      return
+    }
+
+    const objectUrl = URL.createObjectURL(draft.license.newImageFile)
+    setLicenseImagePreviewUrl(objectUrl)
+    return () => URL.revokeObjectURL(objectUrl)
+  }, [draft.license.newImageFile])
+
+  function setFieldErrors(nextErrors: FieldErrors) {
+    setErrors(nextErrors)
+    if (Object.keys(nextErrors).length === 0) return
+    pendingErrorFocusRef.current = Object.keys(nextErrors)[0]
+    requestAnimationFrame(() => {
+      if (!pendingErrorFocusRef.current) return
+      const target = document.querySelector<HTMLElement>(`[data-field="${pendingErrorFocusRef.current}"]`)
+      if (target) {
+        target.focus()
+        pendingErrorFocusRef.current = null
+      }
+    })
+  }
+
+  function updateCustomer(field: keyof ReservationDraft['customer'], value: any) {
+    dispatch({ type: 'updateCustomer', field, value })
+    clearFieldError(`customer.${field}`)
+  }
+
+  function clearFieldError(field: string) {
+    setErrors((current) => {
+      if (!current[field]) return current
+      const next = { ...current }
+      delete next[field]
+      return next
+    })
+  }
+
+  function updateIdentity(field: keyof ReservationDraft['identity'], value: string) {
+    dispatch({ type: 'updateIdentity', field, value })
+    clearFieldError(`identity.${field}`)
+  }
+
+  function updateLicense(field: keyof ReservationDraft['license'], value: any) {
+    dispatch({ type: 'updateLicense', field, value })
+    clearFieldError(`license.${field}`)
+  }
+
+  function updateRental(field: keyof ReservationDraft['rental'], value: string) {
+    dispatch({ type: 'updateRental', field, value })
+    clearFieldError(`rental.${field}`)
+  }
+
+  function updatePayment(field: keyof ReservationDraft['payment'], value: string) {
+    dispatch({ type: 'updatePayment', field, value })
+    clearFieldError(`payment.${field}`)
+  }
+
+  function selectCustomer(customerId: string) {
+    if (!customerId) return
+    const customer = customers.find((item) => item.id === customerId)
+    if (!customer) return
+    if (draft.customer.hydratedFromCustomerId && draft.customer.hydratedFromCustomerId !== customer.id) {
+      const confirmed = window.confirm(copy.confirmReplaceCustomer)
+      if (!confirmed) return
+    }
+    dispatch({ type: 'selectExistingCustomer', customer })
+    setCustomerSearch(`${customer.firstName} ${customer.lastName}`)
+    setErrors({})
+  }
+
+  function validateStep(step: WizardStepId) {
+    if (step === 'customer') return validateCustomerStep(draft, copy)
+    if (step === 'identity') return validateIdentityStep(draft, copy)
+    if (step === 'license') return validateLicenseStep(draft, copy)
+    if (step === 'rental') return validateRentalStep(draft, copy)
+    if (step === 'payment') return validatePaymentExtrasStep(draft, copy)
+    return validateCompleteReservation(draft, copy)
+  }
+
+  async function handleContinue() {
+    setSubmitError(null)
+    const nextErrors = validateStep(currentStep)
+    if (Object.keys(nextErrors).length > 0) {
+      setFieldErrors(nextErrors)
+      return
+    }
+
+    if (currentStep === 'rental') {
+      try {
+        const availability = await checkVehicleAvailability(draft)
+        if (!availability.available) {
+          setFieldErrors({ 'rental.vehicleId': copy.availabilityConflict })
+          return
+        }
+      } catch (err: any) {
+        setFieldErrors({ 'rental.vehicleId': err.message ?? copy.availabilityConflict })
+        return
+      }
+    }
+
+    const nextCompleted = new Set(completedSteps)
+    nextCompleted.add(currentStep)
+    setCompletedSteps(nextCompleted)
+    const nextStep = wizardSteps[Math.min(stepIndex + 1, wizardSteps.length - 1)]
+    setErrors({})
+    setCurrentStep(nextStep.id)
+  }
+
+  function handleBack() {
+    if (stepIndex === 0) {
+      handleCancel()
+      return
+    }
+    setErrors({})
+    setCurrentStep(wizardSteps[stepIndex - 1].id)
+  }
+
+  function handleCancel() {
+    router.push('/reservations')
+  }
+
+  function handleStepClick(step: WizardStepId) {
+    const targetIndex = wizardSteps.findIndex((item) => item.id === step)
+    if (targetIndex > highestReachableIndex) return
+    setErrors({})
+    setCurrentStep(step)
+  }
+
+  async function handleSubmit() {
+    if (saving) {
+      setSubmitError(copy.duplicateGuard)
+      return
+    }
+
+    const nextErrors = validateCompleteReservation(draft, copy)
+    if (Object.keys(nextErrors).length > 0) {
+      const firstStepWithError = wizardSteps.find((step) =>
+        Object.keys(nextErrors).some((field) => {
+          if (step.id === 'customer') return field.startsWith('customer.')
+          if (step.id === 'identity') return field.startsWith('identity.')
+          if (step.id === 'license') return field.startsWith('license.')
+          if (step.id === 'rental') return field.startsWith('rental.')
+          if (step.id === 'payment') return field.startsWith('payment.') || field.startsWith('additionalDrivers.')
+          return false
+        }),
+      )
+      if (firstStepWithError) setCurrentStep(firstStepWithError.id)
+      setFieldErrors(nextErrors)
+      return
+    }
+
+    setSaving(true)
+    setSubmitError(null)
+    try {
+      const result = await submitReservationDraft(draft, {
+        onCustomerIdResolved: (customerId) => dispatch({ type: 'setCreatedCustomerId', customerId }),
+      })
+      dirtyRef.current = false
+      dispatch({ type: 'reset' })
+      router.push(`/reservations/${result.reservation.id}`)
+    } catch (err: any) {
+      setSubmitError(err.code === 'vehicle_unavailable' ? copy.availabilityConflict : err.message ?? copy.submitFailed)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const currentLabel = copy[wizardSteps[stepIndex].labelKey] as string
+
+  return (
+    <div className="max-w-4xl space-y-6" dir={language === 'ar' ? 'rtl' : 'ltr'}>
+      <div>
+        <h2 className="text-xl font-semibold text-slate-900">{copy.title}</h2>
+        <p className="mt-1 text-sm text-slate-500">{copy.subtitle}</p>
+      </div>
+
+      <ReservationStepper
+        copy={copy}
+        currentStep={currentStep}
+        completedSteps={completedSteps}
+        highestReachableIndex={highestReachableIndex}
+        onStepClick={handleStepClick}
+      />
+
+      {submitError ? <div className="card p-4 text-sm text-red-700">{submitError}</div> : null}
+
+      <form
+        className="card p-6"
+        onSubmit={(event) => {
+          event.preventDefault()
+          if (currentStep === 'review') void handleSubmit()
+        }}
+      >
+        <h3 ref={headingRef} tabIndex={-1} className="mb-5 text-lg font-semibold text-slate-900 outline-none">
+          {currentLabel}
+        </h3>
+
+        {currentStep === 'customer' ? (
+          <CustomerStep
+            copy={copy}
+            draft={draft}
+            customers={filteredCustomers}
+            customerSearch={customerSearch}
+            errors={errors}
+            onSearchChange={setCustomerSearch}
+            onSelectCustomer={selectCustomer}
+            onModeChange={(mode: 'existing' | 'new') => {
+              dispatch({ type: 'setCustomerMode', mode })
+              setErrors({})
+            }}
+            onCustomerChange={updateCustomer}
+          />
+        ) : null}
+
+        {currentStep === 'identity' ? (
+          <IdentityStep copy={copy} draft={draft} errors={errors} onChange={updateIdentity} />
+        ) : null}
+
+        {currentStep === 'license' ? (
+          <LicenseStep
+            copy={copy}
+            draft={draft}
+            errors={errors}
+            previewUrl={licenseImagePreviewUrl}
+            onChange={updateLicense}
+          />
+        ) : null}
+
+        {currentStep === 'rental' ? (
+          <RentalStep
+            copy={copy}
+            draft={draft}
+            vehicles={vehicles}
+            availableVehicles={availableVehicles}
+            errors={errors}
+            onChange={updateRental}
+          />
+        ) : null}
+
+        {currentStep === 'payment' ? (
+          <PaymentStep
+            copy={copy}
+            draft={draft}
+            errors={errors}
+            onPaymentChange={updatePayment}
+            onAddDriver={() => dispatch({ type: 'addAdditionalDriver' })}
+            onRemoveDriver={(id: string) => dispatch({ type: 'removeAdditionalDriver', id })}
+            onDriverChange={(id: string, field: keyof AdditionalDriverDraft, value: any) => {
+              dispatch({ type: 'updateAdditionalDriver', id, field, value })
+              setErrors((current) => {
+                const index = draft.additionalDrivers.findIndex((driver) => driver.id === id)
+                const key = `additionalDrivers.${index}.${field}`
+                if (!current[key]) return current
+                const next = { ...current }
+                delete next[key]
+                return next
+              })
+            }}
+          />
+        ) : null}
+
+        {currentStep === 'review' ? (
+          <ReservationReview
+            copy={copy}
+            draft={draft}
+            customers={customers}
+            vehicles={vehicles}
+            localeCode={localeCode}
+            onEdit={setCurrentStep}
+          />
+        ) : null}
+
+        <div className="sticky bottom-0 mt-6 flex items-center justify-between gap-3 border-t border-slate-200 bg-white pt-4">
+          <div className="flex items-center gap-3">
+            <button type="button" className="btn-secondary" onClick={handleBack} disabled={saving}>
+              {stepIndex === 0 ? copy.cancel : copy.back}
+            </button>
+            {currentStep === 'review' ? (
+              <button type="button" className="btn-secondary" onClick={handleCancel} disabled={saving}>
+                {copy.cancel}
+              </button>
+            ) : null}
+          </div>
+          {currentStep === 'review' ? (
+            <button type="submit" className="btn-primary" disabled={saving}>
+              {saving ? copy.creating : copy.create}
+            </button>
+          ) : (
+            <button type="button" className="btn-primary" onClick={handleContinue}>
+              {copy.continue}
+            </button>
+          )}
+        </div>
+      </form>
+    </div>
+  )
+}
+
+function FieldError({ id, errors }: { id: string; errors: FieldErrors }) {
+  return errors[id] ? <p id={`${id}-error`} className="text-xs text-red-700">{errors[id]}</p> : null
+}
+
+function inputProps(field: string, errors: FieldErrors) {
+  return {
+    'data-field': field,
+    'aria-invalid': Boolean(errors[field]),
+    'aria-describedby': errors[field] ? `${field}-error` : undefined,
+  }
+}
+
+function CustomerStep({
+  copy,
+  draft,
+  customers,
+  customerSearch,
+  errors,
+  onSearchChange,
+  onSelectCustomer,
+  onModeChange,
+  onCustomerChange,
+}: {
+  copy: ReturnType<typeof getReservationWizardCopy>
+  draft: ReservationDraft
+  customers: Customer[]
+  customerSearch: string
+  errors: FieldErrors
+  onSearchChange: (value: string) => void
+  onSelectCustomer: (customerId: string) => void
+  onModeChange: (mode: 'existing' | 'new') => void
+  onCustomerChange: (field: keyof ReservationDraft['customer'], value: any) => void
+}) {
+  return (
+    <div className="space-y-5">
+      <div className="flex flex-wrap gap-2">
+        {(['existing', 'new'] as const).map((mode) => (
+          <button
+            key={mode}
+            type="button"
+            className={draft.customer.mode === mode ? 'btn-primary' : 'btn-secondary'}
+            onClick={() => onModeChange(mode)}
+          >
+            {copy.modes[mode]}
+          </button>
+        ))}
+      </div>
+
+      {draft.customer.mode === 'existing' ? (
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+          <label className="space-y-1">
+            <span className="text-sm font-medium text-slate-700">{copy.searchCustomer}</span>
+            <input value={customerSearch} onChange={(event) => onSearchChange(event.target.value)} className="input-field" />
+          </label>
+          <label className="space-y-1">
+            <span className="text-sm font-medium text-slate-700">{copy.customer} <span className="text-red-600">*</span></span>
+            <select
+              value={draft.customer.selectedCustomerId ?? ''}
+              onChange={(event) => onSelectCustomer(event.target.value)}
+              className="input-field"
+              {...inputProps('customer.selectedCustomerId', errors)}
+            >
+              <option value="">{copy.selectCustomer}</option>
+              {customers.map((customer: Customer) => (
+                <option key={customer.id} value={customer.id}>{customer.firstName} {customer.lastName} · {customer.email}</option>
+              ))}
+            </select>
+            <FieldError id="customer.selectedCustomerId" errors={errors} />
+          </label>
+        </div>
+      ) : (
+        <div className="space-y-4">
+          <div data-field="customer.firstName" tabIndex={-1}>
+            <BilingualInput label={copy.firstName} required value={draft.customer.firstName} onChange={(value: BilingualField) => onCustomerChange('firstName', value)} />
+            <FieldError id="customer.firstName" errors={errors} />
+          </div>
+          <div data-field="customer.lastName" tabIndex={-1}>
+            <BilingualInput label={copy.lastName} required value={draft.customer.lastName} onChange={(value: BilingualField) => onCustomerChange('lastName', value)} />
+            <FieldError id="customer.lastName" errors={errors} />
+          </div>
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+            <label className="space-y-1">
+              <span className="text-sm font-medium text-slate-700">{copy.email} <span className="text-red-600">*</span></span>
+              <input value={draft.customer.email} onChange={(event) => onCustomerChange('email', event.target.value)} className="input-field" {...inputProps('customer.email', errors)} />
+              <FieldError id="customer.email" errors={errors} />
+            </label>
+            <label className="space-y-1">
+              <span className="text-sm font-medium text-slate-700">{copy.phone} <span className="text-red-600">*</span></span>
+              <input value={draft.customer.phone} onChange={(event) => onCustomerChange('phone', event.target.value)} className="input-field" {...inputProps('customer.phone', errors)} />
+              <FieldError id="customer.phone" errors={errors} />
+            </label>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+function IdentityStep({
+  copy,
+  draft,
+  errors,
+  onChange,
+}: {
+  copy: ReturnType<typeof getReservationWizardCopy>
+  draft: ReservationDraft
+  errors: FieldErrors
+  onChange: (field: keyof ReservationDraft['identity'], value: string) => void
+}) {
+  return (
+    <div className="space-y-4">
+      {draft.customer.hydratedFromCustomerId ? <p className="text-sm text-slate-500">{copy.loadedCustomerData}</p> : null}
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+        <TextField type="date" id="identity.dateOfBirth" label={copy.dateOfBirth} required value={draft.identity.dateOfBirth} errors={errors} onChange={(value) => onChange('dateOfBirth', value)} />
+        <TextField id="identity.nationality" label={copy.nationality} required value={draft.identity.nationality} errors={errors} onChange={(value) => onChange('nationality', value)} />
+      </div>
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+        <TextField id="identity.identityDocumentNumber" label={copy.identityDocumentNumber} required value={draft.identity.identityDocumentNumber} errors={errors} onChange={(value) => onChange('identityDocumentNumber', value)} />
+        <TextField id="identity.internationalLicenseNumber" label={copy.internationalLicenseNumber} value={draft.identity.internationalLicenseNumber} errors={errors} onChange={(value) => onChange('internationalLicenseNumber', value)} />
+      </div>
+      <label className="space-y-1 block">
+        <span className="text-sm font-medium text-slate-700">{copy.fullAddress} <span className="text-red-600">*</span></span>
+        <textarea value={draft.identity.fullAddress} onChange={(event) => onChange('fullAddress', event.target.value)} className="input-field min-h-[96px]" {...inputProps('identity.fullAddress', errors)} />
+        <FieldError id="identity.fullAddress" errors={errors} />
+      </label>
+    </div>
+  )
+}
+
+function LicenseStep({
+  copy,
+  draft,
+  errors,
+  previewUrl,
+  onChange,
+}: {
+  copy: ReturnType<typeof getReservationWizardCopy>
+  draft: ReservationDraft
+  errors: FieldErrors
+  previewUrl: string | null
+  onChange: (field: keyof ReservationDraft['license'], value: any) => void
+}) {
+  return (
+    <div className="space-y-4">
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+        <TextField id="license.number" label={copy.driverLicenseNumber} required value={draft.license.number} errors={errors} onChange={(value) => onChange('number', value)} />
+        <TextField id="license.country" label={copy.licenseCountry} required value={draft.license.country} errors={errors} onChange={(value) => onChange('country', value)} />
+      </div>
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
+        <TextField type="date" id="license.issuedAt" label={copy.licenseIssuedAt} required value={draft.license.issuedAt} errors={errors} onChange={(value) => onChange('issuedAt', value)} />
+        <TextField type="date" id="license.expiry" label={copy.licenseExpiry} required value={draft.license.expiry} errors={errors} onChange={(value) => onChange('expiry', value)} />
+        <TextField id="license.category" label={copy.licenseCategory} required value={draft.license.category} errors={errors} onChange={(value) => onChange('category', value)} />
+      </div>
+      <div className="space-y-2">
+        <label className="space-y-1 block">
+          <span className="text-sm font-medium text-slate-700">{copy.licenseImage}</span>
+          <input type="file" accept="image/*" onChange={(event) => onChange('newImageFile', event.target.files?.[0] ?? null)} className="input-field" {...inputProps('license.newImageFile', errors)} />
+          <FieldError id="license.newImageFile" errors={errors} />
+        </label>
+        <p className="text-xs text-slate-500">{copy.licenseImageHint}</p>
+        {draft.license.newImageFile ? (
+          <p className="text-xs font-medium text-slate-700">{copy.licenseImageSelected}: {draft.license.newImageFile.name}</p>
+        ) : draft.license.existingImageUrl ? (
+          <p className="text-xs font-medium text-slate-700">{copy.licenseImageCurrent}</p>
+        ) : (
+          <p className="text-xs text-slate-500">{copy.noLicenseImage}</p>
+        )}
+        {previewUrl || draft.license.existingImageUrl ? (
+          <img src={previewUrl ?? draft.license.existingImageUrl ?? ''} alt={copy.licenseImageAlt} className="h-40 w-full max-w-sm rounded-lg border border-slate-200 object-cover" />
+        ) : null}
+      </div>
+    </div>
+  )
+}
+
+function RentalStep({
+  copy,
+  draft,
+  vehicles,
+  availableVehicles,
+  errors,
+  onChange,
+}: {
+  copy: ReturnType<typeof getReservationWizardCopy>
+  draft: ReservationDraft
+  vehicles: Vehicle[]
+  availableVehicles: Vehicle[]
+  errors: FieldErrors
+  onChange: (field: keyof ReservationDraft['rental'], value: string) => void
+}) {
+  return (
+    <div className="space-y-4">
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+        <TextField type="datetime-local" id="rental.startDate" label={copy.startDate} required value={draft.rental.startDate} errors={errors} onChange={(value) => onChange('startDate', value)} />
+        <TextField type="datetime-local" id="rental.endDate" label={copy.endDate} required value={draft.rental.endDate} errors={errors} onChange={(value) => onChange('endDate', value)} />
+      </div>
+      <label className="space-y-1 block">
+        <span className="text-sm font-medium text-slate-700">{copy.vehicle} <span className="text-red-600">*</span></span>
+        <select value={draft.rental.vehicleId} onChange={(event) => onChange('vehicleId', event.target.value)} className="input-field" {...inputProps('rental.vehicleId', errors)}>
+          <option value="">{copy.selectVehicle}</option>
+          {availableVehicles.map((vehicle: Vehicle) => (
+            <option key={vehicle.id} value={vehicle.id}>{vehicle.make} {vehicle.model} · {vehicle.licensePlate}</option>
+          ))}
+        </select>
+        <FieldError id="rental.vehicleId" errors={errors} />
+        {vehicles.length === 0 ? <span className="text-xs text-orange-700">{copy.noVehicles}</span> : null}
+        {vehicles.length > 0 && availableVehicles.length === 0 ? <span className="text-xs text-orange-700">{copy.noAvailableStatusVehicles}</span> : null}
+      </label>
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+        <TextField id="rental.pickupLocation" label={copy.pickup} value={draft.rental.pickupLocation} errors={errors} onChange={(value) => onChange('pickupLocation', value)} />
+        <TextField id="rental.returnLocation" label={copy.return} value={draft.rental.returnLocation} errors={errors} onChange={(value) => onChange('returnLocation', value)} />
+      </div>
+    </div>
+  )
+}
+
+function PaymentStep({
+  copy,
+  draft,
+  errors,
+  onPaymentChange,
+  onAddDriver,
+  onRemoveDriver,
+  onDriverChange,
+}: {
+  copy: ReturnType<typeof getReservationWizardCopy>
+  draft: ReservationDraft
+  errors: FieldErrors
+  onPaymentChange: (field: keyof ReservationDraft['payment'], value: string) => void
+  onAddDriver: () => void
+  onRemoveDriver: (id: string) => void
+  onDriverChange: (id: string, field: keyof AdditionalDriverDraft, value: any) => void
+}) {
+  return (
+    <div className="space-y-5">
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+        <TextField type="number" id="payment.depositAmount" label={copy.deposit} value={draft.payment.depositAmount} errors={errors} min={0} onChange={(value) => onPaymentChange('depositAmount', value)} />
+        <label className="space-y-1">
+          <span className="text-sm font-medium text-slate-700">{copy.paymentMode} <span className="text-red-600">*</span></span>
+          <select value={draft.payment.paymentMode} onChange={(event) => onPaymentChange('paymentMode', event.target.value)} className="input-field" {...inputProps('payment.paymentMode', errors)}>
+            {paymentModes.map((mode) => <option key={mode} value={mode}>{copy.paymentModes[mode]}</option>)}
+          </select>
+          <FieldError id="payment.paymentMode" errors={errors} />
+        </label>
+      </div>
+      <label className="space-y-1 block">
+        <span className="text-sm font-medium text-slate-700">{copy.notes}</span>
+        <textarea value={draft.payment.notes} onChange={(event) => onPaymentChange('notes', event.target.value)} className="input-field min-h-[96px]" placeholder={copy.notesPlaceholder} />
+      </label>
+
+      <div className="rounded-lg border border-slate-200 p-4">
+        <div className="flex items-center justify-between gap-3">
+          <p className="text-sm font-semibold text-slate-900">{copy.additionalDriverInfo}</p>
+          <button type="button" className="btn-secondary" onClick={onAddDriver}>{copy.addAnotherDriver}</button>
+        </div>
+        <div className="mt-4 space-y-5">
+          {draft.additionalDrivers.map((driver, index) => (
+            <div key={driver.id} className="space-y-4 rounded-lg border border-slate-200 p-4">
+              <div className="flex items-center justify-between">
+                <p className="text-sm font-semibold text-slate-900">{copy.additionalDriverInfo} {index + 1}</p>
+                <button type="button" className="text-sm font-semibold text-red-700 hover:underline" onClick={() => onRemoveDriver(driver.id)}>{copy.remove}</button>
+              </div>
+              <div data-field={`additionalDrivers.${index}.firstName`} tabIndex={-1}>
+                <BilingualInput label={copy.firstName} required value={driver.firstName} onChange={(value: BilingualField) => onDriverChange(driver.id, 'firstName', value)} />
+                <FieldError id={`additionalDrivers.${index}.firstName`} errors={errors} />
+              </div>
+              <div data-field={`additionalDrivers.${index}.lastName`} tabIndex={-1}>
+                <BilingualInput label={copy.lastName} required value={driver.lastName} onChange={(value: BilingualField) => onDriverChange(driver.id, 'lastName', value)} />
+                <FieldError id={`additionalDrivers.${index}.lastName`} errors={errors} />
+              </div>
+              <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+                <TextField id={`additionalDrivers.${index}.email`} label={copy.email} value={driver.email} errors={errors} onChange={(value) => onDriverChange(driver.id, 'email', value)} />
+                <TextField id={`additionalDrivers.${index}.phone`} label={copy.phone} value={driver.phone} errors={errors} onChange={(value) => onDriverChange(driver.id, 'phone', value)} />
+                <TextField id={`additionalDrivers.${index}.driverLicense`} label={copy.driverLicenseNumber} required value={driver.driverLicense} errors={errors} onChange={(value) => onDriverChange(driver.id, 'driverLicense', value)} />
+                <div data-field={`additionalDrivers.${index}.nationality`} tabIndex={-1}>
+                  <BilingualInput label={copy.nationality} value={driver.nationality} onChange={(value: BilingualField) => onDriverChange(driver.id, 'nationality', value)} />
+                </div>
+                <TextField type="date" id={`additionalDrivers.${index}.dateOfBirth`} label={copy.dateOfBirth} value={driver.dateOfBirth} errors={errors} onChange={(value) => onDriverChange(driver.id, 'dateOfBirth', value)} />
+                <TextField type="date" id={`additionalDrivers.${index}.licenseIssuedAt`} label={copy.licenseIssuedAt} value={driver.licenseIssuedAt} errors={errors} onChange={(value) => onDriverChange(driver.id, 'licenseIssuedAt', value)} />
+                <TextField type="date" id={`additionalDrivers.${index}.licenseExpiry`} label={copy.licenseExpiry} value={driver.licenseExpiry} errors={errors} onChange={(value) => onDriverChange(driver.id, 'licenseExpiry', value)} />
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function TextField({
+  id,
+  label,
+  value,
+  errors,
+  onChange,
+  required = false,
+  type = 'text',
+  min,
+}: {
+  id: string
+  label: string
+  value: string
+  errors: FieldErrors
+  onChange: (value: string) => void
+  required?: boolean
+  type?: string
+  min?: number
+}) {
+  return (
+    <label className="space-y-1">
+      <span className="text-sm font-medium text-slate-700">
+        {label}
+        {required ? <span className="text-red-600"> *</span> : null}
+      </span>
+      <input type={type} min={min} value={value} onChange={(event) => onChange(event.target.value)} className="input-field" {...inputProps(id, errors)} />
+      <FieldError id={id} errors={errors} />
+    </label>
+  )
+}