root
755 lines
37 KiB
TypeScript
755 lines
37 KiB
TypeScript
'use client'
|
||
|
||
import { useRouter, useSearchParams } from 'next/navigation'
|
||
import { useEffect, useState } from 'react'
|
||
import { DEFAULT_COMPANY_SLUG } from '@/lib/api'
|
||
import { getPublicSiteDictionary, type PublicSiteLanguage } from '@/lib/i18n'
|
||
|
||
interface VehicleDetail {
|
||
id: string
|
||
make: string
|
||
model: string
|
||
year: number
|
||
category: string
|
||
dailyRate: number
|
||
seats: number
|
||
transmission: string
|
||
photos: string[]
|
||
}
|
||
|
||
interface PromoOffer {
|
||
id: string
|
||
title: string
|
||
discountValue: number
|
||
}
|
||
|
||
interface InsurancePolicy {
|
||
id: string
|
||
name: string
|
||
type: string
|
||
chargeType: 'PER_DAY' | 'PER_RENTAL' | 'PERCENTAGE_OF_RENTAL'
|
||
chargeValue: number
|
||
isRequired: boolean
|
||
}
|
||
|
||
interface ContractSettings {
|
||
fuelPolicyType: string
|
||
fuelPolicyNote: string | null
|
||
additionalDriverCharge: 'FREE' | 'PER_DAY' | 'FLAT'
|
||
additionalDriverDailyRate: number
|
||
additionalDriverFlatRate: number
|
||
}
|
||
|
||
interface BookingOptions {
|
||
insurancePolicies: InsurancePolicy[]
|
||
contractSettings: ContractSettings | null
|
||
}
|
||
|
||
interface Step1 {
|
||
startDate: string
|
||
endDate: string
|
||
}
|
||
|
||
interface Step2 {
|
||
firstName: string
|
||
lastName: string
|
||
email: string
|
||
phone: string
|
||
driverLicense: string
|
||
dateOfBirth: string
|
||
licenseExpiry: string
|
||
licenseIssuedAt: string
|
||
nationality: string
|
||
promoCode: string
|
||
}
|
||
|
||
interface AdditionalDriverForm {
|
||
firstName: string
|
||
lastName: string
|
||
email: string
|
||
phone: string
|
||
driverLicense: string
|
||
dateOfBirth: string
|
||
licenseExpiry: string
|
||
licenseIssuedAt: string
|
||
nationality: string
|
||
}
|
||
|
||
const API_BASE = process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:4000/api/v1'
|
||
|
||
function diffDays(start: string, end: string): number {
|
||
if (!start || !end) return 0
|
||
const ms = new Date(end).getTime() - new Date(start).getTime()
|
||
return Math.max(1, Math.ceil(ms / 86400000))
|
||
}
|
||
|
||
function fmt(n: number) {
|
||
return n.toLocaleString('fr-MA', { style: 'currency', currency: 'MAD', maximumFractionDigits: 0 })
|
||
}
|
||
|
||
function inputClass(error?: string) {
|
||
return [
|
||
'w-full rounded-xl border px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-sky-500',
|
||
error ? 'border-red-400 bg-red-50' : 'border-slate-300 bg-white',
|
||
].join(' ')
|
||
}
|
||
|
||
function insuranceCharge(policy: InsurancePolicy, days: number, baseTotal: number) {
|
||
if (policy.chargeType === 'PER_DAY') return policy.chargeValue * days
|
||
if (policy.chargeType === 'PERCENTAGE_OF_RENTAL') return Math.round(baseTotal * policy.chargeValue / 100)
|
||
return policy.chargeValue
|
||
}
|
||
|
||
function additionalDriverCharge(settings: ContractSettings | null, count: number, days: number) {
|
||
if (!settings || count === 0) return 0
|
||
if (settings.additionalDriverCharge === 'PER_DAY') return settings.additionalDriverDailyRate * count * days
|
||
if (settings.additionalDriverCharge === 'FLAT') return settings.additionalDriverFlatRate * count
|
||
return 0
|
||
}
|
||
|
||
function getDayLabel(language: PublicSiteLanguage, days: number) {
|
||
if (language === 'fr') return days === 1 ? 'jour' : 'jours'
|
||
if (language === 'ar') return days === 1 ? 'يوم' : 'أيام'
|
||
return days === 1 ? 'day' : 'days'
|
||
}
|
||
|
||
function StepDots({
|
||
step,
|
||
steps,
|
||
}: {
|
||
step: number
|
||
steps: {
|
||
selectDates: string
|
||
driverDetails: string
|
||
reviewBooking: string
|
||
payment: string
|
||
}
|
||
}) {
|
||
return (
|
||
<div className="mb-6 flex items-center gap-2">
|
||
{[1, 2, 3, 4].map((n) => (
|
||
<div key={n} className="flex items-center gap-2">
|
||
<div
|
||
className={[
|
||
'flex h-8 w-8 items-center justify-center rounded-full text-sm font-bold',
|
||
n === step ? 'bg-slate-900 text-white' : n < step ? 'bg-sky-600 text-white' : 'bg-slate-200 text-slate-500',
|
||
].join(' ')}
|
||
>
|
||
{n < step ? '✓' : n}
|
||
</div>
|
||
{n < 4 && <div className={['h-0.5 w-8 rounded', n < step ? 'bg-sky-600' : 'bg-slate-200'].join(' ')} />}
|
||
</div>
|
||
))}
|
||
<span className="ml-2 text-sm text-slate-500">
|
||
{step === 1 && steps.selectDates}
|
||
{step === 2 && steps.driverDetails}
|
||
{step === 3 && steps.reviewBooking}
|
||
{step === 4 && steps.payment}
|
||
</span>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
function SummaryRow({
|
||
label,
|
||
value,
|
||
valueClass = 'text-slate-900',
|
||
}: {
|
||
label: string
|
||
value: string
|
||
valueClass?: string
|
||
}) {
|
||
return (
|
||
<div className="flex justify-between gap-4 px-4 py-3">
|
||
<span className="flex-shrink-0 text-slate-500">{label}</span>
|
||
<span className={`text-right font-medium ${valueClass}`}>{value}</span>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default function BookClient({ language }: { language: PublicSiteLanguage }) {
|
||
const dict = getPublicSiteDictionary(language)
|
||
const params = useSearchParams()
|
||
const router = useRouter()
|
||
|
||
const vehicleId = params.get('vehicleId') ?? ''
|
||
const offerId = params.get('offerId') ?? undefined
|
||
const ref = params.get('ref') ?? 'direct'
|
||
const slug = params.get('slug') ?? DEFAULT_COMPANY_SLUG
|
||
|
||
const [step, setStep] = useState(1)
|
||
const [vehicle, setVehicle] = useState<VehicleDetail | null>(null)
|
||
const [vehicleLoading, setVehicleLoading] = useState(!!vehicleId)
|
||
const [vehicleError, setVehicleError] = useState('')
|
||
const [bookingOptions, setBookingOptions] = useState<BookingOptions | null>(null)
|
||
const [bookingOptionsError, setBookingOptionsError] = useState('')
|
||
|
||
const [step1, setStep1] = useState<Step1>({ startDate: '', endDate: '' })
|
||
const [step1Errors, setStep1Errors] = useState<Partial<Step1>>({})
|
||
const [step2, setStep2] = useState<Step2>({
|
||
firstName: '',
|
||
lastName: '',
|
||
email: '',
|
||
phone: '',
|
||
driverLicense: '',
|
||
dateOfBirth: '',
|
||
licenseExpiry: '',
|
||
licenseIssuedAt: '',
|
||
nationality: '',
|
||
promoCode: '',
|
||
})
|
||
const [step2Errors, setStep2Errors] = useState<Record<string, string>>({})
|
||
const [additionalDriverEnabled, setAdditionalDriverEnabled] = useState(false)
|
||
const [additionalDriver, setAdditionalDriver] = useState<AdditionalDriverForm>({
|
||
firstName: '',
|
||
lastName: '',
|
||
email: '',
|
||
phone: '',
|
||
driverLicense: '',
|
||
dateOfBirth: '',
|
||
licenseExpiry: '',
|
||
licenseIssuedAt: '',
|
||
nationality: '',
|
||
})
|
||
const [selectedInsurancePolicyIds, setSelectedInsurancePolicyIds] = useState<string[]>([])
|
||
const [promoApplied, setPromoApplied] = useState<PromoOffer | null>(null)
|
||
const [promoLoading, setPromoLoading] = useState(false)
|
||
const [promoError, setPromoError] = useState('')
|
||
const [submitting, setSubmitting] = useState(false)
|
||
const [submitError, setSubmitError] = useState('')
|
||
const [reservationId, setReservationId] = useState<string | null>(null)
|
||
const [requiresManualApproval, setRequiresManualApproval] = useState(false)
|
||
|
||
const [paymentProvider, setPaymentProvider] = useState<'AMANPAY' | 'PAYPAL' | 'CASH'>('AMANPAY')
|
||
const [paymentCurrency, setPaymentCurrency] = useState<'MAD' | 'USD' | 'EUR'>('MAD')
|
||
const [paymentLoading, setPaymentLoading] = useState(false)
|
||
const [paymentError, setPaymentError] = useState('')
|
||
|
||
useEffect(() => {
|
||
if (!vehicleId) return
|
||
setVehicleLoading(true)
|
||
fetch(`${API_BASE}/site/${slug}/vehicles/${vehicleId}`)
|
||
.then((r) => r.json())
|
||
.then((j) => {
|
||
if (j?.data) setVehicle(j.data as VehicleDetail)
|
||
else setVehicleError(dict.booking.vehicleNotFound)
|
||
})
|
||
.catch(() => setVehicleError(dict.booking.vehicleLoadError))
|
||
.finally(() => setVehicleLoading(false))
|
||
}, [dict.booking.vehicleLoadError, dict.booking.vehicleNotFound, vehicleId, slug])
|
||
|
||
useEffect(() => {
|
||
fetch(`${API_BASE}/site/${slug}/booking-options`)
|
||
.then((r) => r.json())
|
||
.then((j) => setBookingOptions(j.data as BookingOptions))
|
||
.catch(() => setBookingOptionsError(dict.booking.bookingOptionsLoadError))
|
||
}, [dict.booking.bookingOptionsLoadError, slug])
|
||
|
||
const days = diffDays(step1.startDate, step1.endDate)
|
||
const baseTotal = vehicle ? vehicle.dailyRate * days : 0
|
||
const discount = promoApplied ? Math.round(baseTotal * (promoApplied.discountValue / 100)) : 0
|
||
const requiredPolicies = (bookingOptions?.insurancePolicies ?? []).filter((policy) => policy.isRequired)
|
||
const optionalPolicies = (bookingOptions?.insurancePolicies ?? []).filter((policy) => !policy.isRequired)
|
||
const selectedPolicies = [
|
||
...requiredPolicies,
|
||
...optionalPolicies.filter((policy) => selectedInsurancePolicyIds.includes(policy.id)),
|
||
]
|
||
const insuranceTotal = selectedPolicies.reduce((sum, policy) => sum + insuranceCharge(policy, days, baseTotal), 0)
|
||
const additionalDriverTotal = additionalDriverCharge(bookingOptions?.contractSettings ?? null, additionalDriverEnabled ? 1 : 0, days)
|
||
const grandTotal = baseTotal - discount + insuranceTotal + additionalDriverTotal
|
||
const dayLabel = getDayLabel(language, days)
|
||
|
||
function validateStep1() {
|
||
const errs: Partial<Step1> = {}
|
||
if (!step1.startDate) errs.startDate = dict.booking.validation.pickStartDate
|
||
if (!step1.endDate) errs.endDate = dict.booking.validation.pickEndDate
|
||
if (step1.startDate && step1.endDate && new Date(step1.endDate) <= new Date(step1.startDate)) errs.endDate = dict.booking.validation.endDateAfterStart
|
||
setStep1Errors(errs)
|
||
return Object.keys(errs).length === 0
|
||
}
|
||
|
||
function validateStep2() {
|
||
const errs: Record<string, string> = {}
|
||
if (!step2.firstName.trim()) errs.firstName = dict.booking.validation.firstNameRequired
|
||
if (!step2.lastName.trim()) errs.lastName = dict.booking.validation.lastNameRequired
|
||
if (!step2.email.trim() || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(step2.email)) errs.email = dict.booking.validation.validEmailRequired
|
||
if (!step2.driverLicense.trim()) errs.driverLicense = dict.booking.validation.driverLicenseRequired
|
||
if (!step2.dateOfBirth) errs.dateOfBirth = dict.booking.validation.dateOfBirthRequired
|
||
if (!step2.licenseExpiry) errs.licenseExpiry = dict.booking.validation.licenseExpiryRequired
|
||
if (!step2.licenseIssuedAt) errs.licenseIssuedAt = dict.booking.validation.licenseIssueDateRequired
|
||
if (additionalDriverEnabled) {
|
||
if (!additionalDriver.firstName.trim()) errs.additionalDriverFirstName = dict.booking.validation.additionalDriverFirstNameRequired
|
||
if (!additionalDriver.lastName.trim()) errs.additionalDriverLastName = dict.booking.validation.additionalDriverLastNameRequired
|
||
if (!additionalDriver.driverLicense.trim()) errs.additionalDriverLicense = dict.booking.validation.additionalDriverLicenseRequired
|
||
}
|
||
setStep2Errors(errs)
|
||
return Object.keys(errs).length === 0
|
||
}
|
||
|
||
async function applyPromo() {
|
||
if (!step2.promoCode.trim()) return
|
||
setPromoLoading(true)
|
||
setPromoError('')
|
||
setPromoApplied(null)
|
||
try {
|
||
const res = await fetch(`${API_BASE}/site/${slug}/book/validate-code`, {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ code: step2.promoCode.trim() }),
|
||
})
|
||
const json = await res.json()
|
||
if (!res.ok) setPromoError(json?.message ?? dict.booking.promo.invalid)
|
||
else setPromoApplied(json.data as PromoOffer)
|
||
} catch {
|
||
setPromoError(dict.booking.promo.unavailable)
|
||
} finally {
|
||
setPromoLoading(false)
|
||
}
|
||
}
|
||
|
||
async function handleSubmit() {
|
||
setSubmitting(true)
|
||
setSubmitError('')
|
||
try {
|
||
const res = await fetch(`${API_BASE}/site/${slug}/book`, {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({
|
||
vehicleId,
|
||
offerId: promoApplied?.id ?? offerId,
|
||
promoCodeUsed: promoApplied ? step2.promoCode.trim() : undefined,
|
||
source: ref === 'marketplace' ? 'MARKETPLACE' : 'PUBLIC_SITE',
|
||
startDate: new Date(step1.startDate).toISOString(),
|
||
endDate: new Date(step1.endDate).toISOString(),
|
||
firstName: step2.firstName.trim(),
|
||
lastName: step2.lastName.trim(),
|
||
email: step2.email.trim(),
|
||
phone: step2.phone.trim() || undefined,
|
||
driverLicense: step2.driverLicense.trim(),
|
||
dateOfBirth: new Date(step2.dateOfBirth).toISOString(),
|
||
licenseExpiry: new Date(step2.licenseExpiry).toISOString(),
|
||
licenseIssuedAt: new Date(step2.licenseIssuedAt).toISOString(),
|
||
nationality: step2.nationality.trim() || undefined,
|
||
selectedInsurancePolicyIds,
|
||
additionalDrivers: additionalDriverEnabled ? [{
|
||
firstName: additionalDriver.firstName.trim(),
|
||
lastName: additionalDriver.lastName.trim(),
|
||
email: additionalDriver.email.trim() || undefined,
|
||
phone: additionalDriver.phone.trim() || undefined,
|
||
driverLicense: additionalDriver.driverLicense.trim(),
|
||
dateOfBirth: additionalDriver.dateOfBirth ? new Date(additionalDriver.dateOfBirth).toISOString() : undefined,
|
||
licenseExpiry: additionalDriver.licenseExpiry ? new Date(additionalDriver.licenseExpiry).toISOString() : undefined,
|
||
licenseIssuedAt: additionalDriver.licenseIssuedAt ? new Date(additionalDriver.licenseIssuedAt).toISOString() : undefined,
|
||
nationality: additionalDriver.nationality.trim() || undefined,
|
||
}] : [],
|
||
}),
|
||
})
|
||
const json = await res.json()
|
||
if (!res.ok) {
|
||
setSubmitError(json?.message ?? dict.booking.submit.failed)
|
||
return
|
||
}
|
||
setReservationId(json.data.id)
|
||
setRequiresManualApproval(Boolean(json.data.requiresManualApproval))
|
||
setStep(4)
|
||
if (json.data.requiresManualApproval) setPaymentProvider('CASH')
|
||
} catch {
|
||
setSubmitError(dict.booking.submit.network)
|
||
} finally {
|
||
setSubmitting(false)
|
||
}
|
||
}
|
||
|
||
async function handlePayOnline() {
|
||
if (!reservationId) return
|
||
setPaymentLoading(true)
|
||
setPaymentError('')
|
||
try {
|
||
const base = window.location.origin
|
||
const res = await fetch(`${API_BASE}/site/${slug}/booking/${reservationId}/pay`, {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({
|
||
provider: paymentProvider,
|
||
currency: paymentCurrency,
|
||
successUrl: `${base}/book/confirmation?id=${reservationId}&payment=success`,
|
||
failureUrl: `${base}/book?vehicleId=${vehicleId}&payment=failed`,
|
||
}),
|
||
})
|
||
const json = await res.json()
|
||
if (!res.ok) {
|
||
setPaymentError(json?.message ?? dict.booking.payment.initiateFailed)
|
||
return
|
||
}
|
||
window.location.href = json.data.checkoutUrl
|
||
} catch {
|
||
setPaymentError(dict.booking.payment.network)
|
||
} finally {
|
||
setPaymentLoading(false)
|
||
}
|
||
}
|
||
|
||
function handlePayAtPickup() {
|
||
if (!reservationId) return
|
||
router.push(`/book/confirmation?id=${reservationId}`)
|
||
}
|
||
|
||
return (
|
||
<div className="card p-8">
|
||
<p className="text-sm font-semibold uppercase tracking-[0.18em] text-sky-700">{dict.booking.eyebrow}</p>
|
||
<h1 className="mt-2 text-3xl font-black text-slate-900">{dict.booking.title}</h1>
|
||
|
||
<div className="mt-6">
|
||
<StepDots step={step} steps={dict.booking.steps} />
|
||
</div>
|
||
|
||
{vehicleLoading && <div className="mb-6 rounded-xl bg-slate-100 px-4 py-3 text-sm text-slate-500">{dict.booking.loadingVehicle}</div>}
|
||
{vehicleError && <div className="mb-6 rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">{vehicleError}</div>}
|
||
{vehicle && (
|
||
<div className="mb-6 flex items-center gap-4 rounded-xl border border-slate-200 bg-slate-50 p-4">
|
||
{vehicle.photos[0] && (
|
||
// eslint-disable-next-line @next/next/no-img-element
|
||
<img src={vehicle.photos[0]} alt={`${vehicle.make} ${vehicle.model}`} className="h-16 w-24 rounded-lg object-cover flex-shrink-0" />
|
||
)}
|
||
<div>
|
||
<p className="font-bold text-slate-900">
|
||
{vehicle.make} {vehicle.model} <span className="font-normal text-slate-500">({vehicle.year})</span>
|
||
</p>
|
||
<p className="text-sm text-slate-500">{vehicle.category} · {vehicle.transmission} · {dict.vehicles.seats(vehicle.seats)}</p>
|
||
<p className="mt-0.5 text-sm font-semibold text-slate-800">{fmt(vehicle.dailyRate)} {dict.vehicles.detail.perDay}</p>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{step === 1 && (
|
||
<div className="space-y-5">
|
||
<div className="grid gap-5 sm:grid-cols-2">
|
||
<div>
|
||
<label className="mb-1.5 block text-sm font-medium text-slate-700">{dict.booking.startDate}</label>
|
||
<input type="date" value={step1.startDate} min={new Date().toISOString().slice(0, 10)} onChange={(e) => setStep1((s) => ({ ...s, startDate: e.target.value }))} className={inputClass(step1Errors.startDate)} />
|
||
{step1Errors.startDate && <p className="mt-1 text-xs text-red-600">{step1Errors.startDate}</p>}
|
||
</div>
|
||
<div>
|
||
<label className="mb-1.5 block text-sm font-medium text-slate-700">{dict.booking.endDate}</label>
|
||
<input type="date" value={step1.endDate} min={step1.startDate || new Date().toISOString().slice(0, 10)} onChange={(e) => setStep1((s) => ({ ...s, endDate: e.target.value }))} className={inputClass(step1Errors.endDate)} />
|
||
{step1Errors.endDate && <p className="mt-1 text-xs text-red-600">{step1Errors.endDate}</p>}
|
||
</div>
|
||
</div>
|
||
|
||
{days > 0 && vehicle && (
|
||
<div className="rounded-xl border border-sky-200 bg-sky-50 px-4 py-3 text-sm text-sky-800">
|
||
<span className="font-semibold">{days} {dayLabel}</span> × {fmt(vehicle.dailyRate)} = <span className="font-bold">{fmt(baseTotal)}</span>
|
||
</div>
|
||
)}
|
||
|
||
<button onClick={() => validateStep1() && setStep(2)} className="w-full rounded-full bg-slate-900 py-3 text-sm font-semibold text-white transition-colors hover:bg-slate-700">
|
||
{dict.booking.continueToDriverDetails}
|
||
</button>
|
||
</div>
|
||
)}
|
||
|
||
{step === 2 && (
|
||
<div className="space-y-5">
|
||
<div className="grid gap-4 sm:grid-cols-2">
|
||
<div>
|
||
<label className="mb-1.5 block text-sm font-medium text-slate-700">{dict.booking.firstName}</label>
|
||
<input value={step2.firstName} onChange={(e) => setStep2((s) => ({ ...s, firstName: e.target.value }))} placeholder={dict.booking.firstName} className={inputClass(step2Errors.firstName)} />
|
||
{step2Errors.firstName && <p className="mt-1 text-xs text-red-600">{step2Errors.firstName}</p>}
|
||
</div>
|
||
<div>
|
||
<label className="mb-1.5 block text-sm font-medium text-slate-700">{dict.booking.lastName}</label>
|
||
<input value={step2.lastName} onChange={(e) => setStep2((s) => ({ ...s, lastName: e.target.value }))} placeholder={dict.booking.lastName} className={inputClass(step2Errors.lastName)} />
|
||
{step2Errors.lastName && <p className="mt-1 text-xs text-red-600">{step2Errors.lastName}</p>}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid gap-4 sm:grid-cols-2">
|
||
<div>
|
||
<label className="mb-1.5 block text-sm font-medium text-slate-700">{dict.booking.email}</label>
|
||
<input type="email" value={step2.email} onChange={(e) => setStep2((s) => ({ ...s, email: e.target.value }))} placeholder="you@example.com" className={inputClass(step2Errors.email)} />
|
||
{step2Errors.email && <p className="mt-1 text-xs text-red-600">{step2Errors.email}</p>}
|
||
</div>
|
||
<div>
|
||
<label className="mb-1.5 block text-sm font-medium text-slate-700">{dict.booking.phone}</label>
|
||
<input value={step2.phone} onChange={(e) => setStep2((s) => ({ ...s, phone: e.target.value }))} placeholder="+212 6xx xxx xxx" className={inputClass()} />
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid gap-4 sm:grid-cols-2">
|
||
<div>
|
||
<label className="mb-1.5 block text-sm font-medium text-slate-700">{dict.booking.driverLicense}</label>
|
||
<input value={step2.driverLicense} onChange={(e) => setStep2((s) => ({ ...s, driverLicense: e.target.value }))} placeholder={dict.booking.driverLicense} className={inputClass(step2Errors.driverLicense)} />
|
||
{step2Errors.driverLicense && <p className="mt-1 text-xs text-red-600">{step2Errors.driverLicense}</p>}
|
||
</div>
|
||
<div>
|
||
<label className="mb-1.5 block text-sm font-medium text-slate-700">{dict.booking.nationality}</label>
|
||
<input value={step2.nationality} onChange={(e) => setStep2((s) => ({ ...s, nationality: e.target.value }))} placeholder={dict.booking.nationality} className={inputClass()} />
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid gap-4 sm:grid-cols-3">
|
||
<div>
|
||
<label className="mb-1.5 block text-sm font-medium text-slate-700">{dict.booking.dateOfBirth}</label>
|
||
<input type="date" value={step2.dateOfBirth} onChange={(e) => setStep2((s) => ({ ...s, dateOfBirth: e.target.value }))} className={inputClass(step2Errors.dateOfBirth)} />
|
||
{step2Errors.dateOfBirth && <p className="mt-1 text-xs text-red-600">{step2Errors.dateOfBirth}</p>}
|
||
</div>
|
||
<div>
|
||
<label className="mb-1.5 block text-sm font-medium text-slate-700">{dict.booking.licenseIssued}</label>
|
||
<input type="date" value={step2.licenseIssuedAt} onChange={(e) => setStep2((s) => ({ ...s, licenseIssuedAt: e.target.value }))} className={inputClass(step2Errors.licenseIssuedAt)} />
|
||
{step2Errors.licenseIssuedAt && <p className="mt-1 text-xs text-red-600">{step2Errors.licenseIssuedAt}</p>}
|
||
</div>
|
||
<div>
|
||
<label className="mb-1.5 block text-sm font-medium text-slate-700">{dict.booking.licenseExpiry}</label>
|
||
<input type="date" value={step2.licenseExpiry} onChange={(e) => setStep2((s) => ({ ...s, licenseExpiry: e.target.value }))} className={inputClass(step2Errors.licenseExpiry)} />
|
||
{step2Errors.licenseExpiry && <p className="mt-1 text-xs text-red-600">{step2Errors.licenseExpiry}</p>}
|
||
</div>
|
||
</div>
|
||
|
||
{bookingOptionsError && <div className="rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-800">{bookingOptionsError}</div>}
|
||
|
||
{bookingOptions && (
|
||
<div className="space-y-4 rounded-xl border border-slate-200 bg-slate-50 p-4">
|
||
<div>
|
||
<p className="text-sm font-semibold text-slate-900">{dict.booking.insuranceAndPickupPolicies}</p>
|
||
<p className="mt-1 text-xs text-slate-500">
|
||
{bookingOptions.contractSettings?.fuelPolicyNote || dict.booking.insuranceHint}
|
||
</p>
|
||
</div>
|
||
|
||
{selectedPolicies.length > 0 && (
|
||
<div className="rounded-lg border border-slate-200 bg-white px-3 py-2 text-xs text-slate-600">
|
||
{dict.booking.requiredCoverage}: {requiredPolicies.map((policy) => policy.name).join(', ') || dict.booking.none}
|
||
</div>
|
||
)}
|
||
|
||
{optionalPolicies.length > 0 ? (
|
||
<div className="space-y-2">
|
||
{optionalPolicies.map((policy) => {
|
||
const selected = selectedInsurancePolicyIds.includes(policy.id)
|
||
return (
|
||
<label key={policy.id} className="flex items-center justify-between gap-3 rounded-xl border border-slate-200 bg-white px-4 py-3">
|
||
<div>
|
||
<p className="text-sm font-medium text-slate-900">{policy.name}</p>
|
||
<p className="text-xs text-slate-500">{policy.type}</p>
|
||
</div>
|
||
<div className="flex items-center gap-3">
|
||
<span className="text-sm font-semibold text-slate-800">{fmt(insuranceCharge(policy, days, baseTotal))}</span>
|
||
<input
|
||
type="checkbox"
|
||
checked={selected}
|
||
onChange={(e) => setSelectedInsurancePolicyIds((current) => e.target.checked ? [...current, policy.id] : current.filter((id) => id !== policy.id))}
|
||
/>
|
||
</div>
|
||
</label>
|
||
)
|
||
})}
|
||
</div>
|
||
) : (
|
||
<p className="text-xs text-slate-500">{dict.booking.noOptionalInsurance}</p>
|
||
)}
|
||
|
||
<div className="rounded-xl border border-slate-200 bg-white p-4">
|
||
<label className="flex items-center justify-between gap-3">
|
||
<div>
|
||
<p className="text-sm font-semibold text-slate-900">{dict.booking.additionalDriver}</p>
|
||
<p className="text-xs text-slate-500">{dict.booking.charge}: {fmt(additionalDriverCharge(bookingOptions.contractSettings, 1, days))}</p>
|
||
</div>
|
||
<input type="checkbox" checked={additionalDriverEnabled} onChange={(e) => setAdditionalDriverEnabled(e.target.checked)} />
|
||
</label>
|
||
|
||
{additionalDriverEnabled && (
|
||
<div className="mt-4 grid gap-4 sm:grid-cols-2">
|
||
<div>
|
||
<input value={additionalDriver.firstName} onChange={(e) => setAdditionalDriver((current) => ({ ...current, firstName: e.target.value }))} placeholder={`${dict.booking.additionalDriver} ${dict.booking.firstName.toLowerCase()}`} className={inputClass(step2Errors.additionalDriverFirstName)} />
|
||
{step2Errors.additionalDriverFirstName && <p className="mt-1 text-xs text-red-600">{step2Errors.additionalDriverFirstName}</p>}
|
||
</div>
|
||
<div>
|
||
<input value={additionalDriver.lastName} onChange={(e) => setAdditionalDriver((current) => ({ ...current, lastName: e.target.value }))} placeholder={`${dict.booking.additionalDriver} ${dict.booking.lastName.toLowerCase()}`} className={inputClass(step2Errors.additionalDriverLastName)} />
|
||
{step2Errors.additionalDriverLastName && <p className="mt-1 text-xs text-red-600">{step2Errors.additionalDriverLastName}</p>}
|
||
</div>
|
||
<input value={additionalDriver.email} onChange={(e) => setAdditionalDriver((current) => ({ ...current, email: e.target.value }))} placeholder={`${dict.booking.additionalDriver} ${dict.booking.email.toLowerCase()}`} className={inputClass()} />
|
||
<input value={additionalDriver.phone} onChange={(e) => setAdditionalDriver((current) => ({ ...current, phone: e.target.value }))} placeholder={`${dict.booking.additionalDriver} ${dict.booking.phone.toLowerCase()}`} className={inputClass()} />
|
||
<div>
|
||
<input value={additionalDriver.driverLicense} onChange={(e) => setAdditionalDriver((current) => ({ ...current, driverLicense: e.target.value }))} placeholder={`${dict.booking.additionalDriver} ${dict.booking.driverLicense.toLowerCase()}`} className={inputClass(step2Errors.additionalDriverLicense)} />
|
||
{step2Errors.additionalDriverLicense && <p className="mt-1 text-xs text-red-600">{step2Errors.additionalDriverLicense}</p>}
|
||
</div>
|
||
<input value={additionalDriver.nationality} onChange={(e) => setAdditionalDriver((current) => ({ ...current, nationality: e.target.value }))} placeholder={`${dict.booking.additionalDriver} ${dict.booking.nationality.toLowerCase()}`} className={inputClass()} />
|
||
<input type="date" value={additionalDriver.dateOfBirth} onChange={(e) => setAdditionalDriver((current) => ({ ...current, dateOfBirth: e.target.value }))} className={inputClass()} />
|
||
<input type="date" value={additionalDriver.licenseIssuedAt} onChange={(e) => setAdditionalDriver((current) => ({ ...current, licenseIssuedAt: e.target.value }))} className={inputClass()} />
|
||
<input type="date" value={additionalDriver.licenseExpiry} onChange={(e) => setAdditionalDriver((current) => ({ ...current, licenseExpiry: e.target.value }))} className={inputClass()} />
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
<div>
|
||
<label className="mb-1.5 block text-sm font-medium text-slate-700">{dict.booking.promoCode}</label>
|
||
<div className="flex gap-2">
|
||
<input
|
||
value={step2.promoCode}
|
||
onChange={(e) => {
|
||
setStep2((s) => ({ ...s, promoCode: e.target.value }))
|
||
setPromoApplied(null)
|
||
setPromoError('')
|
||
}}
|
||
placeholder={dict.booking.enterCode}
|
||
className={`flex-1 ${inputClass(promoError || undefined)}`}
|
||
/>
|
||
<button type="button" onClick={applyPromo} disabled={promoLoading || !step2.promoCode.trim()} className="rounded-xl border border-slate-300 px-5 py-3 text-sm font-semibold text-slate-700 transition-colors hover:bg-slate-50 disabled:opacity-50">
|
||
{promoLoading ? '...' : dict.booking.apply}
|
||
</button>
|
||
</div>
|
||
{promoError && <p className="mt-1 text-xs text-red-600">{promoError}</p>}
|
||
{promoApplied && <p className="mt-1 text-xs font-medium text-emerald-700">{dict.booking.appliedPromo(promoApplied.title, promoApplied.discountValue)}</p>}
|
||
</div>
|
||
|
||
<div className="flex gap-3 pt-2">
|
||
<button onClick={() => setStep(1)} className="rounded-full border border-slate-300 px-6 py-3 text-sm font-semibold text-slate-700 transition-colors hover:bg-slate-50">{dict.booking.back}</button>
|
||
<button onClick={() => validateStep2() && setStep(3)} className="flex-1 rounded-full bg-slate-900 py-3 text-sm font-semibold text-white transition-colors hover:bg-slate-700">
|
||
{dict.booking.reviewBookingCta}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{step === 3 && (
|
||
<div className="space-y-6">
|
||
<div className="overflow-hidden rounded-xl border border-slate-200 divide-y divide-slate-100 text-sm">
|
||
<SummaryRow label={dict.booking.summary.vehicle} value={vehicle ? `${vehicle.make} ${vehicle.model}` : vehicleId} />
|
||
<SummaryRow label={dict.booking.summary.dates} value={`${step1.startDate} -> ${step1.endDate} (${days} ${dayLabel})`} />
|
||
<SummaryRow label={dict.booking.summary.primaryDriver} value={`${step2.firstName} ${step2.lastName}`} />
|
||
<SummaryRow label={dict.booking.summary.email} value={step2.email} />
|
||
<SummaryRow label={dict.booking.summary.driverLicense} value={step2.driverLicense} />
|
||
<SummaryRow label={dict.booking.summary.licenseExpiry} value={step2.licenseExpiry} />
|
||
{additionalDriverEnabled && <SummaryRow label={dict.booking.summary.additionalDriver} value={`${additionalDriver.firstName} ${additionalDriver.lastName}`} />}
|
||
{promoApplied && <SummaryRow label={dict.booking.summary.promoCode} value={`${step2.promoCode} (-${promoApplied.discountValue}%)`} valueClass="font-semibold text-emerald-700" />}
|
||
</div>
|
||
|
||
<div className="space-y-2 rounded-xl border border-slate-200 bg-slate-50 p-4 text-sm">
|
||
<div className="flex justify-between text-slate-600">
|
||
<span>{days} {dayLabel} × {fmt(vehicle?.dailyRate ?? 0)}</span>
|
||
<span>{fmt(baseTotal)}</span>
|
||
</div>
|
||
{discount > 0 && (
|
||
<div className="flex justify-between text-emerald-700">
|
||
<span>{dict.booking.summary.discount(promoApplied?.discountValue ?? 0)}</span>
|
||
<span>-{fmt(discount)}</span>
|
||
</div>
|
||
)}
|
||
{selectedPolicies.map((policy) => (
|
||
<div key={policy.id} className="flex justify-between text-slate-600">
|
||
<span>{policy.name}</span>
|
||
<span>{fmt(insuranceCharge(policy, days, baseTotal))}</span>
|
||
</div>
|
||
))}
|
||
{additionalDriverEnabled && (
|
||
<div className="flex justify-between text-slate-600">
|
||
<span>{dict.booking.additionalDriver}</span>
|
||
<span>{fmt(additionalDriverTotal)}</span>
|
||
</div>
|
||
)}
|
||
<div className="flex justify-between border-t border-slate-200 pt-2 text-base font-bold text-slate-900">
|
||
<span>{dict.booking.summary.total}</span>
|
||
<span>{fmt(grandTotal)}</span>
|
||
</div>
|
||
</div>
|
||
|
||
{submitError && <div className="rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">{submitError}</div>}
|
||
|
||
<div className="flex gap-3">
|
||
<button onClick={() => setStep(2)} className="rounded-full border border-slate-300 px-6 py-3 text-sm font-semibold text-slate-700 transition-colors hover:bg-slate-50">{dict.booking.back}</button>
|
||
<button onClick={handleSubmit} disabled={submitting} className="flex-1 rounded-full bg-slate-900 py-3 text-sm font-semibold text-white transition-colors hover:bg-slate-700 disabled:opacity-60">
|
||
{submitting ? dict.booking.processing : dict.booking.confirmReservation}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{step === 4 && (
|
||
<div className="space-y-6">
|
||
<div className="rounded-xl border border-green-200 bg-green-50 px-4 py-3 text-sm font-medium text-green-800">
|
||
{dict.booking.reservationCreated}
|
||
</div>
|
||
|
||
{requiresManualApproval && (
|
||
<div className="rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-800">
|
||
{dict.booking.manualApprovalRequired}
|
||
</div>
|
||
)}
|
||
|
||
<div className="flex items-center justify-between rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm">
|
||
<span className="text-slate-600">{dict.booking.totalDue}</span>
|
||
<span className="text-base font-black text-slate-900">{fmt(grandTotal)}</span>
|
||
</div>
|
||
|
||
<div>
|
||
<p className="mb-2 text-sm font-medium text-slate-700">{dict.booking.currency}</p>
|
||
<div className="flex gap-2">
|
||
{(['MAD', 'USD', 'EUR'] as const).map((currency) => (
|
||
<button
|
||
key={currency}
|
||
onClick={() => setPaymentCurrency(currency)}
|
||
className={`rounded-lg border px-4 py-1.5 text-sm font-medium transition-colors ${
|
||
paymentCurrency === currency ? 'border-sky-500 bg-sky-50 text-sky-700' : 'border-slate-200 text-slate-600 hover:border-slate-300'
|
||
}`}
|
||
>
|
||
{currency}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<p className="mb-3 text-sm font-medium text-slate-700">{dict.booking.paymentMethod}</p>
|
||
<div className="space-y-2">
|
||
{(['AMANPAY', 'PAYPAL', 'CASH'] as const).map((provider) => {
|
||
const disabled = requiresManualApproval && provider !== 'CASH'
|
||
return (
|
||
<button
|
||
key={provider}
|
||
onClick={() => !disabled && setPaymentProvider(provider)}
|
||
className={`w-full rounded-xl border-2 p-4 text-left transition-all ${
|
||
paymentProvider === provider ? 'border-slate-900 bg-slate-50' : 'border-slate-200 hover:border-slate-300'
|
||
} ${disabled ? 'opacity-50' : ''}`}
|
||
>
|
||
<div className="flex items-center gap-4">
|
||
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-slate-100 text-lg">
|
||
{provider === 'AMANPAY' ? '🏦' : provider === 'PAYPAL' ? '🔵' : '💵'}
|
||
</div>
|
||
<div>
|
||
<p className="text-sm font-semibold text-slate-900">
|
||
{provider === 'AMANPAY' ? dict.booking.paymentMethods.amanpay.title : provider === 'PAYPAL' ? dict.booking.paymentMethods.paypal.title : dict.booking.paymentMethods.cash.title}
|
||
</p>
|
||
<p className="mt-0.5 text-xs text-slate-500">
|
||
{provider === 'AMANPAY' && dict.booking.paymentMethods.amanpay.description}
|
||
{provider === 'PAYPAL' && dict.booking.paymentMethods.paypal.description}
|
||
{provider === 'CASH' && dict.booking.paymentMethods.cash.description}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</button>
|
||
)
|
||
})}
|
||
</div>
|
||
</div>
|
||
|
||
{paymentError && <div className="rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">{paymentError}</div>}
|
||
|
||
<button
|
||
onClick={paymentProvider === 'CASH' ? handlePayAtPickup : handlePayOnline}
|
||
disabled={paymentLoading || (requiresManualApproval && paymentProvider !== 'CASH')}
|
||
className="w-full rounded-full bg-slate-900 py-3.5 text-sm font-semibold text-white transition-colors hover:bg-slate-700 disabled:opacity-60"
|
||
>
|
||
{paymentLoading
|
||
? dict.booking.redirectingToPayment
|
||
: paymentProvider === 'CASH'
|
||
? dict.booking.confirmPayAtPickup
|
||
: dict.booking.payWith(paymentProvider === 'AMANPAY' ? dict.booking.paymentMethods.amanpay.title : dict.booking.paymentMethods.paypal.title)}
|
||
</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|