mirror of
https://github.com/Tria-plc/edr-platform.git
synced 2026-08-26 18:42:49 +00:00
Eyob T.
@@ -3,6 +3,7 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useAuthStore } from '@/lib/auth-store';
|
||||
import { useBookingStore } from '@/lib/booking-store';
|
||||
import { LogIn, UserPlus, ChevronLeft } from 'lucide-react';
|
||||
|
||||
function Tooltip({ children, content }: { children: React.ReactNode; content: string[] }) {
|
||||
@@ -41,6 +42,23 @@ function Tooltip({ children, content }: { children: React.ReactNode; content: st
|
||||
export default function AuthCheckPage() {
|
||||
const router = useRouter();
|
||||
const { isAuthenticated, initialize } = useAuthStore();
|
||||
const searchCriteria = useBookingStore((s) => s.searchCriteria);
|
||||
|
||||
const buildResultsUrl = () => {
|
||||
if (!searchCriteria) return '/booking/results';
|
||||
const params = new URLSearchParams({
|
||||
tripType: searchCriteria.tripType,
|
||||
origin: searchCriteria.originStationId,
|
||||
destination: searchCriteria.destinationStationId,
|
||||
date: searchCriteria.departureDate,
|
||||
adults: searchCriteria.adultCount.toString(),
|
||||
children: searchCriteria.childCount.toString(),
|
||||
nationality: searchCriteria.nationality,
|
||||
});
|
||||
if (searchCriteria.returnDate) params.set('returnDate', searchCriteria.returnDate);
|
||||
if (searchCriteria.promoCode) params.set('promoCode', searchCriteria.promoCode);
|
||||
return `/booking/results?${params}`;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
initialize();
|
||||
@@ -94,7 +112,7 @@ export default function AuthCheckPage() {
|
||||
|
||||
<div className="mt-8 text-center">
|
||||
<button
|
||||
onClick={() => router.push('/booking/results')}
|
||||
onClick={() => router.push(buildResultsUrl())}
|
||||
className="inline-flex items-center gap-1.5 text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors"
|
||||
>
|
||||
<ChevronLeft className="w-4 h-4" />
|
||||
|
||||
@@ -18,6 +18,7 @@ import {
|
||||
Wallet
|
||||
} from 'lucide-react';
|
||||
import { format } from 'date-fns';
|
||||
import { formatTime, getTimePeriod } from '@/utils/format';
|
||||
import QRCode from 'qrcode.react';
|
||||
|
||||
function BookingDetailContent() {
|
||||
@@ -234,10 +235,10 @@ function BookingDetailContent() {
|
||||
{/* Origin */}
|
||||
<div className="pb-8">
|
||||
<div className="text-2xl font-bold text-gray-900 dark:text-white">
|
||||
{booking.schedule?.departureAt ? format(new Date(booking.schedule.departureAt), 'HH:mm') : '--:--'}
|
||||
{booking.schedule?.departureAt ? formatTime(booking.schedule.departureAt) : '--:--'}
|
||||
</div>
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400 mt-0.5">
|
||||
{booking.schedule?.departureAt ? format(new Date(booking.schedule.departureAt), 'EEE, MMM d') : 'N/A'}
|
||||
{booking.schedule?.departureAt ? `${format(new Date(booking.schedule.departureAt), 'EEE, MMM d')} · ${getTimePeriod(booking.schedule.departureAt)}` : 'N/A'}
|
||||
</div>
|
||||
<div className="text-base font-semibold text-gray-900 dark:text-white mt-2">
|
||||
{booking.schedule?.origin?.name}
|
||||
@@ -267,10 +268,10 @@ function BookingDetailContent() {
|
||||
{/* Destination */}
|
||||
<div>
|
||||
<div className="text-2xl font-bold text-gray-900 dark:text-white">
|
||||
{booking.schedule?.arrivalAt ? format(new Date(booking.schedule.arrivalAt), 'HH:mm') : '--:--'}
|
||||
{booking.schedule?.arrivalAt ? formatTime(booking.schedule.arrivalAt) : '--:--'}
|
||||
</div>
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400 mt-0.5">
|
||||
{booking.schedule?.arrivalAt ? format(new Date(booking.schedule.arrivalAt), 'EEE, MMM d') : 'N/A'}
|
||||
{booking.schedule?.arrivalAt ? `${format(new Date(booking.schedule.arrivalAt), 'EEE, MMM d')} · ${getTimePeriod(booking.schedule.arrivalAt)}` : 'N/A'}
|
||||
</div>
|
||||
<div className="text-base font-semibold text-gray-900 dark:text-white mt-2">
|
||||
{booking.schedule?.destination?.name}
|
||||
@@ -493,10 +494,10 @@ function BookingDetailContent() {
|
||||
{/* Origin */}
|
||||
<div className="pb-8">
|
||||
<div className="text-2xl font-bold text-gray-900 dark:text-white">
|
||||
{booking.schedule?.departureAt ? format(new Date(booking.schedule.departureAt), 'HH:mm') : '--:--'}
|
||||
{booking.schedule?.departureAt ? formatTime(booking.schedule.departureAt) : '--:--'}
|
||||
</div>
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400 mt-0.5">
|
||||
{booking.schedule?.departureAt ? format(new Date(booking.schedule.departureAt), 'EEE, MMM d') : 'N/A'}
|
||||
{booking.schedule?.departureAt ? `${format(new Date(booking.schedule.departureAt), 'EEE, MMM d')} · ${getTimePeriod(booking.schedule.departureAt)}` : 'N/A'}
|
||||
</div>
|
||||
<div className="text-base font-semibold text-gray-900 dark:text-white mt-2">
|
||||
{booking.schedule?.origin?.name}
|
||||
@@ -526,10 +527,10 @@ function BookingDetailContent() {
|
||||
{/* Destination */}
|
||||
<div>
|
||||
<div className="text-2xl font-bold text-gray-900 dark:text-white">
|
||||
{booking.schedule?.arrivalAt ? format(new Date(booking.schedule.arrivalAt), 'HH:mm') : '--:--'}
|
||||
{booking.schedule?.arrivalAt ? formatTime(booking.schedule.arrivalAt) : '--:--'}
|
||||
</div>
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400 mt-0.5">
|
||||
{booking.schedule?.arrivalAt ? format(new Date(booking.schedule.arrivalAt), 'EEE, MMM d') : 'N/A'}
|
||||
{booking.schedule?.arrivalAt ? `${format(new Date(booking.schedule.arrivalAt), 'EEE, MMM d')} · ${getTimePeriod(booking.schedule.arrivalAt)}` : 'N/A'}
|
||||
</div>
|
||||
<div className="text-base font-semibold text-gray-900 dark:text-white mt-2">
|
||||
{booking.schedule?.destination?.name}
|
||||
|
||||
@@ -8,7 +8,7 @@ import { useBookingStore } from '@/lib/booking-store';
|
||||
import { useAuthStore } from '@/lib/auth-store';
|
||||
import { apiClient } from '@/lib/api-client';
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import { CheckCircle, ExternalLink, Loader2, CalendarDays, X, Globe, ChevronLeft } from 'lucide-react';
|
||||
import { CheckCircle, ExternalLink, Loader2, CalendarDays, X, Globe, ChevronLeft, AlertCircle } from 'lucide-react';
|
||||
import { gregorianToEthiopian, ethiopianToGregorian, ETHIOPIAN_MONTHS, getDaysInEthiopianMonth } from '@/lib/ethiopian-calendar';
|
||||
|
||||
const GC_MONTHS = ['January','February','March','April','May','June','July','August','September','October','November','December'];
|
||||
@@ -17,24 +17,73 @@ function daysInGCMonth(y: number, m: number) {
|
||||
return new Date(y, m, 0).getDate();
|
||||
}
|
||||
|
||||
const ADULT_MIN_AGE = 6; // adults must be older than 5 years
|
||||
const CHILD_MAX_AGE = 5; // children must be 5 years old or younger
|
||||
const ADULT_MAX_AGE_SPAN = 110;
|
||||
const ADULT_DEFAULT_YEAR = 2000;
|
||||
|
||||
// ─── fayda passenger tracking ───────────────────────────────────────────────
|
||||
// Fayda's OAuth redirect can land back on this route either inside the popup
|
||||
// window we opened, or — on browsers/mobile contexts that refuse to open a
|
||||
// popup — as a full-page navigation of this same tab. React state doesn't
|
||||
// survive that reload, so we track which passenger triggered the verification
|
||||
// in sessionStorage, which does survive same-tab navigation.
|
||||
const FAYDA_PENDING_INDEX_KEY = 'edr_fayda_pending_passenger_index';
|
||||
|
||||
function getPendingFaydaIndex(): number | null {
|
||||
if (typeof window === 'undefined') return null;
|
||||
const raw = window.sessionStorage.getItem(FAYDA_PENDING_INDEX_KEY);
|
||||
if (raw === null) return null;
|
||||
const parsed = parseInt(raw, 10);
|
||||
return Number.isNaN(parsed) ? null : parsed;
|
||||
}
|
||||
|
||||
function setPendingFaydaIndex(index: number) {
|
||||
if (typeof window === 'undefined') return;
|
||||
window.sessionStorage.setItem(FAYDA_PENDING_INDEX_KEY, String(index));
|
||||
}
|
||||
|
||||
function clearPendingFaydaIndex() {
|
||||
if (typeof window === 'undefined') return;
|
||||
window.sessionStorage.removeItem(FAYDA_PENDING_INDEX_KEY);
|
||||
}
|
||||
|
||||
// Fayda may return gender as "MALE"/"M" etc — normalize to the form's expected values
|
||||
function normalizeFaydaGender(raw: unknown): 'Male' | 'Female' | '' {
|
||||
const g = String(raw || '').trim().toUpperCase();
|
||||
if (g === 'MALE' || g === 'M') return 'Male';
|
||||
if (g === 'FEMALE' || g === 'F') return 'Female';
|
||||
return '';
|
||||
}
|
||||
|
||||
function DobPickerModal({
|
||||
value,
|
||||
onChange,
|
||||
error,
|
||||
passengerType = 'ADULT',
|
||||
}: {
|
||||
value: string;
|
||||
onChange: (iso: string) => void;
|
||||
error?: string;
|
||||
passengerType?: 'ADULT' | 'CHILD';
|
||||
}) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [manualMode, setManualMode] = useState(false);
|
||||
const [calType, setCalType] = useState<'gregorian' | 'ethiopian'>('gregorian');
|
||||
const isChild = passengerType === 'CHILD';
|
||||
const currentYear = new Date().getFullYear();
|
||||
const currentEthYear = gregorianToEthiopian(new Date()).year;
|
||||
|
||||
// Selectable year bounds, scoped to passenger type so the picker can't produce an invalid age
|
||||
const minGCYear = isChild ? currentYear - CHILD_MAX_AGE : currentYear - ADULT_MAX_AGE_SPAN;
|
||||
const maxGCYear = isChild ? currentYear : currentYear - ADULT_MIN_AGE;
|
||||
const minEthYear = isChild ? currentEthYear - CHILD_MAX_AGE : currentEthYear - ADULT_MAX_AGE_SPAN;
|
||||
const maxEthYear = isChild ? currentEthYear : currentEthYear - ADULT_MIN_AGE;
|
||||
|
||||
// Parse stored ISO value (always Gregorian)
|
||||
const parsed = value ? value.split('-') : [];
|
||||
const initGCYear = parsed[0] ? parseInt(parsed[0]) : currentYear - 25;
|
||||
const defaultGCYear = isChild ? maxGCYear : Math.min(Math.max(ADULT_DEFAULT_YEAR, minGCYear), maxGCYear);
|
||||
const initGCYear = parsed[0] ? parseInt(parsed[0]) : defaultGCYear;
|
||||
const initGCMonth = parsed[1] ? parseInt(parsed[1]) : 1;
|
||||
const initGCDay = parsed[2] ? parseInt(parsed[2]) : 1;
|
||||
|
||||
@@ -44,7 +93,7 @@ function DobPickerModal({
|
||||
const [selGCDay, setSelGCDay] = useState(initGCDay);
|
||||
|
||||
// Ethiopian drum state — initialise from parsed value if present
|
||||
const initEth = value ? gregorianToEthiopian(new Date(initGCYear, initGCMonth - 1, initGCDay)) : { year: currentEthYear - 25, month: 1, day: 1 };
|
||||
const initEth = value ? gregorianToEthiopian(new Date(initGCYear, initGCMonth - 1, initGCDay)) : { year: isChild ? maxEthYear : Math.min(Math.max(ADULT_DEFAULT_YEAR - 8, minEthYear), maxEthYear), month: 1, day: 1 };
|
||||
const [selEthYear, setSelEthYear] = useState(initEth.year);
|
||||
const [selEthMonth, setSelEthMonth] = useState(initEth.month);
|
||||
const [selEthDay, setSelEthDay] = useState(initEth.day);
|
||||
@@ -60,8 +109,8 @@ function DobPickerModal({
|
||||
const gcSafeDay = Math.min(selGCDay, gcMaxDay);
|
||||
const ethSafeDay = Math.min(selEthDay, ethMaxDay);
|
||||
|
||||
const gcYears = Array.from({ length: 100 }, (_, i) => currentYear - i);
|
||||
const ethYears = Array.from({ length: 100 }, (_, i) => currentEthYear - i);
|
||||
const gcYears = Array.from({ length: maxGCYear - minGCYear + 1 }, (_, i) => maxGCYear - i);
|
||||
const ethYears = Array.from({ length: maxEthYear - minEthYear + 1 }, (_, i) => maxEthYear - i);
|
||||
const gcMonths = GC_MONTHS.map((m, i) => ({ label: m, value: i + 1 }));
|
||||
const ethMonths = ETHIOPIAN_MONTHS.map((m, i) => ({ label: m, value: i + 1 }));
|
||||
const gcDays = Array.from({ length: gcMaxDay }, (_, i) => i + 1);
|
||||
@@ -115,11 +164,11 @@ function DobPickerModal({
|
||||
|
||||
const gcDayHandler = useRef(makeScrollHandler(dayRef, setSelGCDay, () => Array.from({ length: daysInGCMonth(selGCYear, selGCMonth) }, (_, i) => i + 1))).current;
|
||||
const gcMonthHandler = useRef(makeScrollHandler(monthRef, setSelGCMonth, () => GC_MONTHS.map((_, i) => i + 1))).current;
|
||||
const gcYearHandler = useRef(makeScrollHandler(yearRef, setSelGCYear, () => Array.from({ length: 100 }, (_, i) => new Date().getFullYear() - i))).current;
|
||||
const gcYearHandler = useRef(makeScrollHandler(yearRef, setSelGCYear, () => gcYears)).current;
|
||||
|
||||
const ethDayHandler = useRef(makeScrollHandler(dayRef, setSelEthDay, () => Array.from({ length: getDaysInEthiopianMonth(selEthYear, selEthMonth) }, (_, i) => i + 1))).current;
|
||||
const ethMonthHandler = useRef(makeScrollHandler(monthRef, setSelEthMonth, () => ETHIOPIAN_MONTHS.map((_, i) => i + 1))).current;
|
||||
const ethYearHandler = useRef(makeScrollHandler(yearRef, setSelEthYear, () => Array.from({ length: 100 }, (_, i) => gregorianToEthiopian(new Date()).year - i))).current;
|
||||
const ethYearHandler = useRef(makeScrollHandler(yearRef, setSelEthYear, () => ethYears)).current;
|
||||
|
||||
const confirm = () => {
|
||||
let gregDate: Date;
|
||||
@@ -137,16 +186,20 @@ function DobPickerModal({
|
||||
|
||||
const confirmManual = () => {
|
||||
const d = parseInt(manDay), m = parseInt(manMonth), y = parseInt(manYear);
|
||||
if (!d || !m || !y || m < 1 || m > 12 || d < 1 || d > daysInGCMonth(y, m) || y < currentYear - 110 || y > currentYear) return;
|
||||
if (!d || !m || !y || m < 1 || m > 12 || d < 1 || d > daysInGCMonth(y, m) || y < minGCYear || y > maxGCYear) return;
|
||||
onChange(`${y}-${String(m).padStart(2,'0')}-${String(d).padStart(2,'0')}`);
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
const manualValid = (() => {
|
||||
const d = parseInt(manDay), m = parseInt(manMonth), y = parseInt(manYear);
|
||||
return d >= 1 && m >= 1 && m <= 12 && y >= currentYear - 110 && y <= currentYear && d <= daysInGCMonth(y, m);
|
||||
return d >= 1 && m >= 1 && m <= 12 && y >= minGCYear && y <= maxGCYear && d <= daysInGCMonth(y, m);
|
||||
})();
|
||||
|
||||
const manualRangeMessage = isChild
|
||||
? `Child's date of birth must fall between ${minGCYear} and ${maxGCYear} (age 5 or younger)`
|
||||
: `Adult's date of birth must fall between ${minGCYear} and ${maxGCYear} (age older than 5)`;
|
||||
|
||||
// Display: always show Gregorian ISO as human-readable, with calendar label
|
||||
const displayValue = (() => {
|
||||
if (!value) return '';
|
||||
@@ -276,11 +329,12 @@ function DobPickerModal({
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1.5">Year</label>
|
||||
<input type="number" min={currentYear - 110} max={currentYear} value={manYear} onChange={(e) => setManYear(e.target.value)} placeholder="YYYY" className="input-field text-center text-lg font-semibold" />
|
||||
<input type="number" min={minGCYear} max={maxGCYear} value={manYear} onChange={(e) => setManYear(e.target.value)} placeholder="YYYY" className="input-field text-center text-lg font-semibold" />
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-xs text-gray-400">Valid years: {minGCYear} – {maxGCYear}</p>
|
||||
{manDay && manMonth && manYear && !manualValid && (
|
||||
<p className="text-red-500 text-xs">Please enter a valid Gregorian date</p>
|
||||
<p className="text-red-500 text-xs">{manualRangeMessage}</p>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
@@ -453,6 +507,21 @@ function PhoneInput({
|
||||
);
|
||||
}
|
||||
|
||||
// ─── age calculation ─────────────────────────────────────────────────────────
|
||||
|
||||
function calculateAge(dateOfBirth: string): number | null {
|
||||
if (!dateOfBirth) return null;
|
||||
const dob = new Date(dateOfBirth);
|
||||
if (isNaN(dob.getTime())) return null;
|
||||
const today = new Date();
|
||||
let age = today.getFullYear() - dob.getFullYear();
|
||||
const monthDiff = today.getMonth() - dob.getMonth();
|
||||
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < dob.getDate())) {
|
||||
age--;
|
||||
}
|
||||
return age;
|
||||
}
|
||||
|
||||
// ─── passenger zod schema ──────────────────────────────────────────────────────
|
||||
|
||||
const passengerSchema = z.object({
|
||||
@@ -460,8 +529,6 @@ const passengerSchema = z.object({
|
||||
dateOfBirth: z.string().min(1, 'Date of birth is required'),
|
||||
gender: z.string().min(1, 'Gender is required'),
|
||||
nationality: z.string().min(1, 'Nationality is required'),
|
||||
phone: z.string(),
|
||||
email: z.string().optional(),
|
||||
nationalId: z.string().optional(),
|
||||
passportNumber: z.string().optional(),
|
||||
passportCountry: z.string().optional(),
|
||||
@@ -475,16 +542,6 @@ const passengerSchema = z.object({
|
||||
if (data.gender !== 'Male' && data.gender !== 'Female') {
|
||||
ctx.addIssue({ code: z.ZodIssueCode.custom, message: 'Gender is required', path: ['gender'] });
|
||||
}
|
||||
if (data.email && data.email.trim().length > 0) {
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
if (!emailRegex.test(data.email)) {
|
||||
ctx.addIssue({ code: z.ZodIssueCode.custom, message: 'Invalid email format', path: ['email'] });
|
||||
}
|
||||
}
|
||||
const phoneError = validatePhone(data.phone, data.nationality);
|
||||
if (phoneError) {
|
||||
ctx.addIssue({ code: z.ZodIssueCode.custom, message: phoneError, path: ['phone'] });
|
||||
}
|
||||
const isNonEthiopian = data.nationality !== 'ETHIOPIAN' && data.nationality !== 'Ethiopian';
|
||||
if (isNonEthiopian) {
|
||||
if (!data.passportNumber || data.passportNumber.trim().length === 0) {
|
||||
@@ -496,12 +553,41 @@ const passengerSchema = z.object({
|
||||
}
|
||||
});
|
||||
|
||||
const formSchema = z.object({
|
||||
passengers: z.array(passengerSchema),
|
||||
createAccount: z.boolean(),
|
||||
});
|
||||
function createFormSchema(adultCount: number) {
|
||||
return z.object({
|
||||
passengers: z.array(passengerSchema),
|
||||
createAccount: z.boolean(),
|
||||
contactPhone: z.string(),
|
||||
contactEmail: z.string(),
|
||||
}).superRefine((data, ctx) => {
|
||||
if (!data.contactEmail || data.contactEmail.trim().length === 0) {
|
||||
ctx.addIssue({ code: z.ZodIssueCode.custom, message: 'Contact email is required', path: ['contactEmail'] });
|
||||
} else {
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
if (!emailRegex.test(data.contactEmail)) {
|
||||
ctx.addIssue({ code: z.ZodIssueCode.custom, message: 'Invalid email format', path: ['contactEmail'] });
|
||||
}
|
||||
}
|
||||
const contactNationality = data.passengers[0]?.nationality || 'ETHIOPIAN';
|
||||
const phoneError = validatePhone(data.contactPhone, contactNationality);
|
||||
if (phoneError) {
|
||||
ctx.addIssue({ code: z.ZodIssueCode.custom, message: phoneError, path: ['contactPhone'] });
|
||||
}
|
||||
|
||||
type FormData = z.infer<typeof formSchema>;
|
||||
data.passengers.forEach((p, i) => {
|
||||
const age = calculateAge(p.dateOfBirth);
|
||||
if (age === null) return;
|
||||
const isAdult = i < adultCount;
|
||||
if (isAdult && age <= 5) {
|
||||
ctx.addIssue({ code: z.ZodIssueCode.custom, message: 'Adult passengers must be older than 5 years', path: ['passengers', i, 'dateOfBirth'] });
|
||||
} else if (!isAdult && age > 5) {
|
||||
ctx.addIssue({ code: z.ZodIssueCode.custom, message: 'Child passengers must be 5 years old or younger', path: ['passengers', i, 'dateOfBirth'] });
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
type FormData = z.infer<ReturnType<typeof createFormSchema>>;
|
||||
|
||||
export default function PassengersPage() {
|
||||
const router = useRouter();
|
||||
@@ -509,17 +595,24 @@ export default function PassengersPage() {
|
||||
const { user, isAuthenticated, updateUser } = useAuthStore();
|
||||
const isInitialized = useAuthStore((s) => s.isInitialized);
|
||||
const [faydaEnabled, setFaydaEnabled] = useState(true);
|
||||
const [verificationStatus, setVerificationStatus] = useState<Record<number, 'success' | 'error'>>({});
|
||||
const [verificationStatus, setVerificationStatus] = useState<Record<number, 'pending' | 'success' | 'error'>>({});
|
||||
const [faydaErrors, setFaydaErrors] = useState<Record<number, string>>({});
|
||||
// The passenger currently mid-verification (popup open / awaiting callback). Only one
|
||||
// passenger can verify at a time so a stray callback can never be misapplied to the
|
||||
// wrong passenger's form.
|
||||
const [verifyingIndex, setVerifyingIndex] = useState<number | null>(null);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [submitError, setSubmitError] = useState<string | null>(null);
|
||||
const [formInitialized, setFormInitialized] = useState(false);
|
||||
const [faydaParams, setFaydaParams] = useState<{ code: string; state: string } | null>(null);
|
||||
const [faydaCompleting, setFaydaCompleting] = useState(false);
|
||||
|
||||
|
||||
const totalPassengers = (searchCriteria?.adultCount || 1) + (searchCriteria?.childCount || 0);
|
||||
const adultCount = searchCriteria?.adultCount || 1;
|
||||
|
||||
const { register, control, handleSubmit, setValue, watch, formState: { errors } } = useForm<FormData>({
|
||||
resolver: zodResolver(formSchema as any),
|
||||
resolver: zodResolver(createFormSchema(adultCount) as any),
|
||||
mode: 'onChange',
|
||||
defaultValues: {
|
||||
passengers: Array.from({ length: totalPassengers }, (_, i) => {
|
||||
@@ -530,8 +623,6 @@ export default function PassengersPage() {
|
||||
dateOfBirth: stored.dateOfBirth || '',
|
||||
gender: (stored.gender as any) || undefined,
|
||||
nationality: stored.nationality || searchCriteria?.nationality || 'ETHIOPIAN',
|
||||
phone: stored.phone || '',
|
||||
email: stored.email || '',
|
||||
nationalId: stored.nationalId || '',
|
||||
passportNumber: stored.passportNumber || '',
|
||||
passportCountry: stored.passportCountry || '',
|
||||
@@ -547,8 +638,6 @@ export default function PassengersPage() {
|
||||
dateOfBirth: '',
|
||||
gender: undefined,
|
||||
nationality: searchCriteria?.nationality || 'ETHIOPIAN',
|
||||
phone: '',
|
||||
email: '',
|
||||
nationalId: '',
|
||||
passportNumber: '',
|
||||
passportCountry: '',
|
||||
@@ -556,10 +645,12 @@ export default function PassengersPage() {
|
||||
passportExpiryDate: '',
|
||||
passportIssuingAuthority: '',
|
||||
faydaVerified: false,
|
||||
formExpanded: false,
|
||||
formExpanded: i >= adultCount,
|
||||
};
|
||||
}),
|
||||
createAccount: false,
|
||||
contactPhone: storedPassengers[0]?.phone || '',
|
||||
contactEmail: storedPassengers[0]?.email || '',
|
||||
},
|
||||
});
|
||||
|
||||
@@ -584,15 +675,24 @@ export default function PassengersPage() {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const code = params.get('code');
|
||||
const state = params.get('state');
|
||||
if (code && state) setFaydaParams({ code, state });
|
||||
if (code && state) {
|
||||
setFaydaParams({ code, state });
|
||||
const pendingIndex = getPendingFaydaIndex();
|
||||
if (pendingIndex !== null) setVerifyingIndex(pendingIndex);
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Complete Fayda verification once the form is ready and callback params are present
|
||||
// Complete Fayda verification once the form is ready and callback params are present.
|
||||
// This effect runs whenever this route reloads with ?code&state — which happens either
|
||||
// inside the verification popup, or, if the browser refused to open a popup, as a full
|
||||
// navigation of this same tab. Either way, the index of the passenger who started the
|
||||
// verification was stashed in sessionStorage before redirecting, so it survives the reload.
|
||||
useEffect(() => {
|
||||
if (!faydaParams || !formInitialized) return;
|
||||
|
||||
const complete = async () => {
|
||||
setFaydaCompleting(true);
|
||||
const targetIndex = getPendingFaydaIndex() ?? 0;
|
||||
try {
|
||||
const response: any = await apiClient.get(
|
||||
`/fayda/verification/complete?code=${encodeURIComponent(faydaParams.code)}&state=${encodeURIComponent(faydaParams.state)}`
|
||||
@@ -600,25 +700,50 @@ export default function PassengersPage() {
|
||||
|
||||
if (response?.success && response?.data?.verified) {
|
||||
const d = response.data;
|
||||
// Convert "1980/12/01" → "1980-12-01"
|
||||
const dob = d.birthdate ? (d.birthdate as string).replace(/\//g, '-') : '';
|
||||
const faydaSub: string | undefined = d.sub || d.faydaSub || d.fin;
|
||||
|
||||
setValue('passengers.0.name', d.fullName || '', { shouldValidate: true });
|
||||
if (dob) setValue('passengers.0.dateOfBirth', dob, { shouldValidate: true });
|
||||
if (d.email) setValue('passengers.0.email', d.email, { shouldValidate: true });
|
||||
if (d.phoneNumber) setValue('passengers.0.phone', d.phoneNumber, { shouldValidate: true });
|
||||
setValue('passengers.0.faydaVerified', true);
|
||||
setValue('passengers.0.formExpanded', true);
|
||||
setVerificationStatus((prev) => ({ ...prev, 0: 'success' }));
|
||||
// A single Fayda identity can't be reused across two different passengers.
|
||||
const usedByOther = faydaSub && passengers.some(
|
||||
(p, i) => i !== targetIndex && (p as any).faydaSub === faydaSub,
|
||||
);
|
||||
|
||||
// Remove code/state from the URL so a refresh doesn't re-trigger
|
||||
router.replace('/booking/passengers');
|
||||
if (usedByOther) {
|
||||
setFaydaErrors((prev) => ({ ...prev, [targetIndex]: 'This Fayda identity is already linked to another passenger on this booking.' }));
|
||||
setVerificationStatus((prev) => ({ ...prev, [targetIndex]: 'error' }));
|
||||
} else {
|
||||
// Convert "1980/12/01" → "1980-12-01"
|
||||
const dob = d.birthdate ? (d.birthdate as string).replace(/\//g, '-') : '';
|
||||
|
||||
setValue(`passengers.${targetIndex}.name`, d.fullName || '', { shouldValidate: true });
|
||||
if (dob) setValue(`passengers.${targetIndex}.dateOfBirth`, dob, { shouldValidate: true });
|
||||
const normalizedGender = normalizeFaydaGender(d.gender);
|
||||
if (normalizedGender) setValue(`passengers.${targetIndex}.gender`, normalizedGender, { shouldValidate: true });
|
||||
if (faydaSub) setValue(`passengers.${targetIndex}.faydaSub`, faydaSub);
|
||||
// Contact info is shared across all passengers — only fill it in if nobody has
|
||||
// entered it yet, so verifying passenger 2 can't clobber passenger 1's contact.
|
||||
if (d.email && !watch('contactEmail')) setValue('contactEmail', d.email, { shouldValidate: true });
|
||||
if (d.phoneNumber && !watch('contactPhone')) setValue('contactPhone', d.phoneNumber, { shouldValidate: true });
|
||||
setValue(`passengers.${targetIndex}.faydaVerified`, true);
|
||||
setValue(`passengers.${targetIndex}.formExpanded`, true);
|
||||
setVerificationStatus((prev) => ({ ...prev, [targetIndex]: 'success' }));
|
||||
setFaydaErrors((prev) => { const next = { ...prev }; delete next[targetIndex]; return next; });
|
||||
}
|
||||
} else {
|
||||
setVerificationStatus((prev) => ({ ...prev, [targetIndex]: 'error' }));
|
||||
setFaydaErrors((prev) => ({ ...prev, [targetIndex]: 'Fayda verification could not be completed. Please try again or enter details manually.' }));
|
||||
}
|
||||
|
||||
// Remove code/state from the URL so a refresh doesn't re-trigger
|
||||
router.replace('/booking/passengers');
|
||||
} catch (error) {
|
||||
console.error('Failed to complete Fayda verification:', error);
|
||||
setVerificationStatus((prev) => ({ ...prev, [targetIndex]: 'error' }));
|
||||
setFaydaErrors((prev) => ({ ...prev, [targetIndex]: 'Fayda verification failed. Please try again or enter details manually.' }));
|
||||
} finally {
|
||||
setFaydaCompleting(false);
|
||||
setFaydaParams(null);
|
||||
setVerifyingIndex(null);
|
||||
clearPendingFaydaIndex();
|
||||
}
|
||||
};
|
||||
|
||||
@@ -656,8 +781,8 @@ export default function PassengersPage() {
|
||||
setValue('passengers.0.dateOfBirth', passengerData?.dateOfBirth || user.dateOfBirth || '');
|
||||
if (passengerData?.gender || user.gender) setValue('passengers.0.gender', (passengerData?.gender || user.gender) as any);
|
||||
setValue('passengers.0.nationality', passengerData?.nationality || user.nationality || 'ETHIOPIAN');
|
||||
if (passengerData?.phone || user.phone) setValue('passengers.0.phone', passengerData?.phone || user.phone || '');
|
||||
if (passengerData?.email || user.email) setValue('passengers.0.email', passengerData?.email || user.email || '');
|
||||
if (passengerData?.phone || user.phone) setValue('contactPhone', passengerData?.phone || user.phone || '');
|
||||
if (passengerData?.email || user.email) setValue('contactEmail', passengerData?.email || user.email || '');
|
||||
if (passengerData?.passportNumber) setValue('passengers.0.passportNumber', passengerData.passportNumber);
|
||||
if (passengerData?.passportCountry) setValue('passengers.0.passportCountry', passengerData.passportCountry);
|
||||
if (passengerData?.passportIssueDate) setValue('passengers.0.passportIssueDate', passengerData.passportIssueDate);
|
||||
@@ -678,6 +803,16 @@ export default function PassengersPage() {
|
||||
|
||||
const openFaydaVerification = async (index: number) => {
|
||||
if (typeof window === 'undefined') return;
|
||||
// Only one passenger can verify at a time — this keeps the status poll below
|
||||
// (which has no passenger identifier of its own) unambiguous about who it belongs to.
|
||||
if (verifyingIndex !== null) return;
|
||||
|
||||
setVerifyingIndex(index);
|
||||
setVerificationStatus((prev) => ({ ...prev, [index]: 'pending' }));
|
||||
setFaydaErrors((prev) => { const next = { ...prev }; delete next[index]; return next; });
|
||||
// Persist which passenger this is for so it survives a full-page redirect/reload
|
||||
// if the browser can't open a popup (e.g. some mobile browsers).
|
||||
setPendingFaydaIndex(index);
|
||||
|
||||
try {
|
||||
const response: any = await apiClient.post('/fayda/verification/start', {
|
||||
@@ -698,33 +833,67 @@ export default function PassengersPage() {
|
||||
`width=${width},height=${height},left=${left},top=${top},scrollbars=yes,resizable=yes`
|
||||
);
|
||||
|
||||
if (!popup) {
|
||||
setVerificationStatus((prev) => ({ ...prev, [index]: 'error' }));
|
||||
setFaydaErrors((prev) => ({ ...prev, [index]: 'Unable to open the Fayda verification window. Please allow pop-ups and try again.' }));
|
||||
setVerifyingIndex(null);
|
||||
clearPendingFaydaIndex();
|
||||
return;
|
||||
}
|
||||
|
||||
const checkPopup = setInterval(async () => {
|
||||
if (popup?.closed) {
|
||||
if (popup.closed) {
|
||||
clearInterval(checkPopup);
|
||||
try {
|
||||
const statusResponse: any = await apiClient.get('/fayda/verification/status');
|
||||
if (statusResponse.verified) {
|
||||
setValue(`passengers.${index}.name`, statusResponse.fullName || '');
|
||||
setValue(`passengers.${index}.faydaVerified`, true);
|
||||
setValue(`passengers.${index}.formExpanded`, true);
|
||||
setVerificationStatus({ ...verificationStatus, [index]: 'success' });
|
||||
const faydaSub: string | undefined = statusResponse.sub || statusResponse.faydaSub || statusResponse.fin;
|
||||
const usedByOther = faydaSub && passengers.some(
|
||||
(p, i) => i !== index && (p as any).faydaSub === faydaSub,
|
||||
);
|
||||
|
||||
if (index === 0 && isAuthenticated) {
|
||||
updateUser({
|
||||
fullName: statusResponse.fullName,
|
||||
faydaVerified: true,
|
||||
faydaVerifiedAt: statusResponse.verifiedAt,
|
||||
});
|
||||
if (usedByOther) {
|
||||
setVerificationStatus((prev) => ({ ...prev, [index]: 'error' }));
|
||||
setFaydaErrors((prev) => ({ ...prev, [index]: 'This Fayda identity is already linked to another passenger on this booking.' }));
|
||||
} else {
|
||||
setValue(`passengers.${index}.name`, statusResponse.fullName || '', { shouldValidate: true });
|
||||
if (statusResponse.dateOfBirth) setValue(`passengers.${index}.dateOfBirth`, statusResponse.dateOfBirth, { shouldValidate: true });
|
||||
const normalizedGender = normalizeFaydaGender(statusResponse.gender);
|
||||
if (normalizedGender) setValue(`passengers.${index}.gender`, normalizedGender, { shouldValidate: true });
|
||||
if (faydaSub) setValue(`passengers.${index}.faydaSub`, faydaSub);
|
||||
setValue(`passengers.${index}.faydaVerified`, true);
|
||||
setValue(`passengers.${index}.formExpanded`, true);
|
||||
setVerificationStatus((prev) => ({ ...prev, [index]: 'success' }));
|
||||
setFaydaErrors((prev) => { const next = { ...prev }; delete next[index]; return next; });
|
||||
|
||||
if (index === 0 && isAuthenticated) {
|
||||
updateUser({
|
||||
fullName: statusResponse.fullName,
|
||||
faydaVerified: true,
|
||||
faydaVerifiedAt: statusResponse.verifiedAt,
|
||||
});
|
||||
}
|
||||
}
|
||||
} else {
|
||||
setVerificationStatus((prev) => ({ ...prev, [index]: 'error' }));
|
||||
setFaydaErrors((prev) => ({ ...prev, [index]: 'Fayda verification was not completed. Please try again or enter details manually.' }));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to get verification status:', error);
|
||||
setVerificationStatus((prev) => ({ ...prev, [index]: 'error' }));
|
||||
setFaydaErrors((prev) => ({ ...prev, [index]: 'Failed to confirm verification status. Please try again or enter details manually.' }));
|
||||
} finally {
|
||||
setVerifyingIndex(null);
|
||||
clearPendingFaydaIndex();
|
||||
}
|
||||
}
|
||||
}, 1000);
|
||||
} catch (error) {
|
||||
console.error('Failed to start Fayda verification:', error);
|
||||
alert('Failed to start verification. Please try again.');
|
||||
setVerificationStatus((prev) => ({ ...prev, [index]: 'error' }));
|
||||
setFaydaErrors((prev) => ({ ...prev, [index]: 'Failed to start verification. Please try again.' }));
|
||||
setVerifyingIndex(null);
|
||||
clearPendingFaydaIndex();
|
||||
}
|
||||
};
|
||||
|
||||
@@ -732,8 +901,15 @@ export default function PassengersPage() {
|
||||
setValue(`passengers.${index}.formExpanded`, !passengers[index].formExpanded);
|
||||
};
|
||||
|
||||
const onInvalid = () => {
|
||||
// Sections still behind the Fayda verify screen stay collapsed here — they only expand
|
||||
// when the user explicitly clicks "Skip for now" / "Enter details manually".
|
||||
setSubmitError('Please fix the highlighted errors before continuing.');
|
||||
};
|
||||
|
||||
const onSubmit = async (data: FormData) => {
|
||||
setSaving(true);
|
||||
setSubmitError(null);
|
||||
try {
|
||||
let passengerId = '';
|
||||
|
||||
@@ -759,8 +935,8 @@ export default function PassengersPage() {
|
||||
passportIssueDate: p.passportIssueDate,
|
||||
passportExpiryDate: p.passportExpiryDate,
|
||||
passportIssuingAuthority: p.passportIssuingAuthority,
|
||||
phone: p.phone || '',
|
||||
email: p.email || '',
|
||||
phone: data.contactPhone,
|
||||
email: data.contactEmail,
|
||||
isPrimaryPassenger: i === 0,
|
||||
passengerId: i === 0 && passengerId ? passengerId : undefined,
|
||||
}))
|
||||
@@ -809,7 +985,9 @@ export default function PassengersPage() {
|
||||
<div className="max-w-lg mx-auto text-center">
|
||||
<Loader2 className="w-8 h-8 animate-spin mx-auto text-blue-600" />
|
||||
<p className="text-gray-600 dark:text-gray-400 mt-4">
|
||||
{faydaCompleting ? 'Completing Fayda verification...' : 'Loading passenger details...'}
|
||||
{faydaCompleting
|
||||
? `Completing Fayda verification for Passenger ${(verifyingIndex ?? 0) + 1}...`
|
||||
: 'Loading passenger details...'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -823,22 +1001,26 @@ export default function PassengersPage() {
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<h1 className="text-3xl font-bold mb-6 text-gray-900 dark:text-gray-100">Passenger details</h1>
|
||||
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
|
||||
<form onSubmit={handleSubmit(onSubmit, onInvalid)} className="space-y-6">
|
||||
{fields.map((field, index) => {
|
||||
const isEthiopian = passengers[index]?.nationality === 'ETHIOPIAN';
|
||||
const isFormExpanded = passengers[index]?.formExpanded;
|
||||
const status = verificationStatus[index];
|
||||
const isPrimaryPassenger = index === 0;
|
||||
const isChildPassenger = index >= adultCount;
|
||||
const isLoggedInAndVerified = isPrimaryPassenger && isAuthenticated && user?.faydaVerified;
|
||||
const isLoggedInNotVerified = isPrimaryPassenger && isAuthenticated && !user?.faydaVerified;
|
||||
const showVerifyButton = isEthiopian && faydaEnabled && !isFormExpanded && !isLoggedInAndVerified;
|
||||
const showManualEntryLink = isEthiopian && !faydaEnabled && !isFormExpanded;
|
||||
const showVerifyButton = isEthiopian && faydaEnabled && !isFormExpanded && !isLoggedInAndVerified && !isChildPassenger;
|
||||
const showManualEntryLink = isEthiopian && !faydaEnabled && !isFormExpanded && !isChildPassenger;
|
||||
const isVerifyingThis = verifyingIndex === index;
|
||||
const isVerifyingOther = verifyingIndex !== null && verifyingIndex !== index;
|
||||
const faydaError = faydaErrors[index];
|
||||
|
||||
return (
|
||||
<div key={field.id} className="card">
|
||||
<h3 className="text-lg font-semibold mb-4 text-gray-900 dark:text-gray-100">
|
||||
Passenger {index + 1} {index === 0 && '(Primary)'}
|
||||
{index < (searchCriteria.adultCount || 1) ? ' - Adult' : ' - Child'}
|
||||
{isChildPassenger ? ' - Child' : ' - Adult'}
|
||||
<span className="ml-2 text-sm font-normal text-gray-600 dark:text-gray-400">
|
||||
({isEthiopian ? 'Ethiopian' : searchCriteria.nationality === 'DJIBOUTIAN' ? 'Djiboutian' : 'Other'})
|
||||
</span>
|
||||
@@ -853,18 +1035,40 @@ export default function PassengersPage() {
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
{faydaError && (
|
||||
<div className="mb-4 p-3 bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 rounded-lg flex items-center gap-2">
|
||||
<AlertCircle className="w-4 h-4 text-red-600 dark:text-red-400 flex-shrink-0" />
|
||||
<p className="text-sm text-red-700 dark:text-red-300">{faydaError}</p>
|
||||
</div>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => openFaydaVerification(index)}
|
||||
className="btn-primary flex items-center justify-center gap-2 mx-auto"
|
||||
disabled={isVerifyingThis || isVerifyingOther}
|
||||
className="btn-primary flex items-center justify-center gap-2 mx-auto disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<ExternalLink className="w-5 h-5" />
|
||||
{isLoggedInNotVerified ? 'Verify with Fayda' : 'Verify with Fayda'}
|
||||
{isVerifyingThis ? (
|
||||
<>
|
||||
<Loader2 className="w-5 h-5 animate-spin" />
|
||||
Waiting for verification...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<ExternalLink className="w-5 h-5" />
|
||||
Verify with Fayda
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
{isVerifyingOther && (
|
||||
<p className="text-xs text-gray-400 dark:text-gray-500 mt-2">
|
||||
Finish verifying Passenger {(verifyingIndex ?? 0) + 1} first
|
||||
</p>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => toggleForm(index)}
|
||||
className="text-sm text-gray-500 dark:text-gray-400 hover:underline mt-3 block mx-auto"
|
||||
disabled={isVerifyingThis}
|
||||
className="text-sm text-gray-500 dark:text-gray-400 hover:underline mt-3 block mx-auto disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
Skip for now
|
||||
</button>
|
||||
@@ -889,10 +1093,16 @@ export default function PassengersPage() {
|
||||
{status === 'success' && (
|
||||
<div className="p-3 bg-green-50 dark:bg-green-900/30 border border-green-200 dark:border-green-800 rounded-lg mb-4">
|
||||
<p className="text-green-700 dark:text-green-300 text-sm flex items-center gap-2">
|
||||
<CheckCircle className="w-4 h-4" /> Verified with Fayda
|
||||
<CheckCircle className="w-4 h-4" /> Verified with Fayda — details auto-filled below
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
{status === 'error' && faydaError && (
|
||||
<div className="p-3 bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 rounded-lg mb-4 flex items-center gap-2">
|
||||
<AlertCircle className="w-4 h-4 text-red-600 dark:text-red-400 flex-shrink-0" />
|
||||
<p className="text-red-700 dark:text-red-300 text-sm">{faydaError}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
{/* Full Name */}
|
||||
@@ -915,6 +1125,7 @@ export default function PassengersPage() {
|
||||
value={passengers[index]?.dateOfBirth || ''}
|
||||
onChange={(iso) => setValue(`passengers.${index}.dateOfBirth`, iso, { shouldValidate: true })}
|
||||
error={errors.passengers?.[index]?.dateOfBirth?.message}
|
||||
passengerType={isChildPassenger ? 'CHILD' : 'ADULT'}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -944,32 +1155,6 @@ export default function PassengersPage() {
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Phone */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">Phone Number *</label>
|
||||
<PhoneInput
|
||||
nationality={passengers[index]?.nationality || 'ETHIOPIAN'}
|
||||
storedValue={passengers[index]?.phone || ''}
|
||||
onInterimChange={(v) => setValue(`passengers.${index}.phone`, v)}
|
||||
onNormalized={(v) => setValue(`passengers.${index}.phone`, v, { shouldValidate: true })}
|
||||
error={errors.passengers?.[index]?.phone?.message}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Email */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">Email</label>
|
||||
<input
|
||||
type="email"
|
||||
{...register(`passengers.${index}.email`)}
|
||||
className={`input-field ${errors.passengers?.[index]?.email ? 'border-red-500' : ''}`}
|
||||
placeholder="email@example.com"
|
||||
/>
|
||||
{errors.passengers?.[index]?.email && (
|
||||
<p className="text-red-500 text-xs mt-1">{errors.passengers[index]?.email?.message}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
@@ -995,6 +1180,7 @@ export default function PassengersPage() {
|
||||
value={passengers[index]?.dateOfBirth || ''}
|
||||
onChange={(iso) => setValue(`passengers.${index}.dateOfBirth`, iso, { shouldValidate: true })}
|
||||
error={errors.passengers?.[index]?.dateOfBirth?.message}
|
||||
passengerType={isChildPassenger ? 'CHILD' : 'ADULT'}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -1024,32 +1210,6 @@ export default function PassengersPage() {
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Phone */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">Phone Number *</label>
|
||||
<PhoneInput
|
||||
nationality={passengers[index]?.nationality || 'OTHER'}
|
||||
storedValue={passengers[index]?.phone || ''}
|
||||
onInterimChange={(v) => setValue(`passengers.${index}.phone`, v)}
|
||||
onNormalized={(v) => setValue(`passengers.${index}.phone`, v, { shouldValidate: true })}
|
||||
error={errors.passengers?.[index]?.phone?.message}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Email */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">Email</label>
|
||||
<input
|
||||
type="email"
|
||||
{...register(`passengers.${index}.email`)}
|
||||
className={`input-field ${errors.passengers?.[index]?.email ? 'border-red-500' : ''}`}
|
||||
placeholder="email@example.com"
|
||||
/>
|
||||
{errors.passengers?.[index]?.email && (
|
||||
<p className="text-red-500 text-xs mt-1">{errors.passengers[index]?.email?.message}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Passport fields */}
|
||||
@@ -1106,7 +1266,41 @@ export default function PassengersPage() {
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
|
||||
<div className="card">
|
||||
<h3 className="text-lg font-semibold mb-1 text-gray-900 dark:text-gray-100">Contact Information</h3>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 mb-4">
|
||||
This phone number and email will be used for booking and ticketing communication for all passengers.
|
||||
</p>
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
{/* Contact Phone */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">Phone Number *</label>
|
||||
<PhoneInput
|
||||
nationality={passengers[0]?.nationality || searchCriteria?.nationality || 'ETHIOPIAN'}
|
||||
storedValue={watch('contactPhone') || ''}
|
||||
onInterimChange={(v) => setValue('contactPhone', v)}
|
||||
onNormalized={(v) => setValue('contactPhone', v, { shouldValidate: true })}
|
||||
error={errors.contactPhone?.message}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Contact Email */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">Email *</label>
|
||||
<input
|
||||
type="email"
|
||||
{...register('contactEmail')}
|
||||
className={`input-field ${errors.contactEmail ? 'border-red-500' : ''}`}
|
||||
placeholder="email@example.com"
|
||||
/>
|
||||
{errors.contactEmail && (
|
||||
<p className="text-red-500 text-xs mt-1">{errors.contactEmail.message}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{!isAuthenticated && (
|
||||
<div className="card">
|
||||
<label className="flex items-center gap-2 cursor-pointer">
|
||||
@@ -1116,6 +1310,13 @@ export default function PassengersPage() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{submitError && (
|
||||
<div className="p-3 bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 rounded-lg flex items-center gap-2">
|
||||
<AlertCircle className="w-4 h-4 text-red-600 dark:text-red-400 flex-shrink-0" />
|
||||
<p className="text-sm text-red-700 dark:text-red-300">{submitError}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex gap-4">
|
||||
<button type="button" onClick={() => {
|
||||
const params = new URLSearchParams({
|
||||
@@ -1132,8 +1333,10 @@ export default function PassengersPage() {
|
||||
<ChevronLeft className="w-4 h-4" />
|
||||
Back
|
||||
</button>
|
||||
<button type="submit" className="btn-primary flex-1" disabled={saving}>
|
||||
{saving ? 'Saving...' : 'Continue to seat selection'}
|
||||
<button type="submit" className="btn-primary flex-1 flex items-center justify-center gap-2" disabled={saving}>
|
||||
{saving
|
||||
? <Loader2 className="w-4 h-4 animate-spin" />
|
||||
: 'Continue to seat selection'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@@ -8,6 +8,8 @@ import { apiClient } from "@/lib/api-client";
|
||||
import { useState, useEffect } from "react";
|
||||
import { PaymentMethod } from "@/types";
|
||||
import { format } from "date-fns";
|
||||
import { formatTime, getTimePeriod } from '@/utils/format';
|
||||
import { calculatePassengerFare, isChild, isFirstChild, formatFare } from '@/utils/fare-utils';
|
||||
import {
|
||||
CreditCard,
|
||||
Smartphone,
|
||||
@@ -65,21 +67,21 @@ export default function PaymentPage() {
|
||||
enabled: !!selectedMethod && !!bookingId,
|
||||
});
|
||||
|
||||
// Fallback: estimate from local store while API hasn't responded yet
|
||||
const outboundBaseFare = isRoundTrip && outboundSchedule ? passengers.reduce(
|
||||
(sum) => sum + (outboundSchedule.baseFareAdult || 0),
|
||||
0,
|
||||
) : 0;
|
||||
// Fallback: estimate from local store while API hasn't responded yet.
|
||||
// Uses the same first-child-free calculation as the review page so the
|
||||
// breakdown shown here matches what the passenger already saw there.
|
||||
const outboundBaseFare = isRoundTrip && outboundSchedule ? passengers.reduce((sum, _, i) => {
|
||||
return sum + calculatePassengerFare(passengers, i, outboundSchedule.baseFareAdult || 0);
|
||||
}, 0) : 0;
|
||||
|
||||
const inboundBaseFare = isRoundTrip && inboundSchedule ? passengers.reduce(
|
||||
(sum) => sum + (inboundSchedule.baseFareAdult || 0),
|
||||
0,
|
||||
) : 0;
|
||||
const inboundBaseFare = isRoundTrip && inboundSchedule ? passengers.reduce((sum, _, i) => {
|
||||
return sum + calculatePassengerFare(passengers, i, inboundSchedule.baseFareAdult || 0);
|
||||
}, 0) : 0;
|
||||
|
||||
const baseFare = isRoundTrip ? (outboundBaseFare + inboundBaseFare) : passengers.reduce(
|
||||
(sum) => sum + (selectedSchedule?.baseFareAdult || 0),
|
||||
0,
|
||||
);
|
||||
const baseFare = isRoundTrip ? (outboundBaseFare + inboundBaseFare) : passengers.reduce((sum, _, i) => {
|
||||
const farePerPassenger = selectedSchedule?.baseFareAdult || (selectedSchedule as any)?.fareAdult || (selectedSchedule as any)?.price || 0;
|
||||
return sum + calculatePassengerFare(passengers, i, farePerPassenger);
|
||||
}, 0);
|
||||
|
||||
// API returns amount in major units (e.g. 11602.5 DJF); convert to minor for display consistency
|
||||
const totalAmount = bookingAmountData != null
|
||||
@@ -203,10 +205,12 @@ export default function PaymentPage() {
|
||||
<div className="flex-1 flex flex-col pl-2">
|
||||
<div className="pb-5">
|
||||
<div className="text-lg font-bold text-gray-900 dark:text-white">
|
||||
{schedule?.departureTime ? format(new Date(schedule.departureTime), 'HH:mm') : '--:--'}
|
||||
{schedule?.departureTime ? formatTime(schedule.departureTime) : '--:--'}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400">
|
||||
{schedule?.departureTime ? format(new Date(schedule.departureTime), 'EEE, MMM d') : ''}
|
||||
{schedule?.departureTime
|
||||
? `${format(new Date(schedule.departureTime), 'EEE, MMM d')} · ${getTimePeriod(schedule.departureTime)}`
|
||||
: ''}
|
||||
</div>
|
||||
<div className="text-sm font-semibold text-gray-900 dark:text-white mt-1">{schedule?.origin}</div>
|
||||
</div>
|
||||
@@ -216,10 +220,12 @@ export default function PaymentPage() {
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-lg font-bold text-gray-900 dark:text-white">
|
||||
{schedule?.arrivalTime ? format(new Date(schedule.arrivalTime), 'HH:mm') : '--:--'}
|
||||
{schedule?.arrivalTime ? formatTime(schedule.arrivalTime) : '--:--'}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400">
|
||||
{schedule?.arrivalTime ? format(new Date(schedule.arrivalTime), 'EEE, MMM d') : ''}
|
||||
{schedule?.arrivalTime
|
||||
? `${format(new Date(schedule.arrivalTime), 'EEE, MMM d')} · ${getTimePeriod(schedule.arrivalTime)}`
|
||||
: ''}
|
||||
</div>
|
||||
<div className="text-sm font-semibold text-gray-900 dark:text-white mt-1">{schedule?.destination}</div>
|
||||
</div>
|
||||
@@ -240,7 +246,9 @@ export default function PaymentPage() {
|
||||
<div className="card space-y-4">
|
||||
<h2 className="text-base font-bold text-gray-900 dark:text-gray-100 pb-2 border-b border-gray-100 dark:border-gray-800">
|
||||
Order summary
|
||||
<span className="ml-2 text-xs font-normal text-gray-500 dark:text-gray-400">Ref: {pnr}</span>
|
||||
<span className="ml-2 text-xs font-normal text-gray-500 dark:text-gray-400">
|
||||
Ref: <span className="font-bold text-gray-900 dark:text-gray-100">{pnr}</span>
|
||||
</span>
|
||||
</h2>
|
||||
|
||||
{isRoundTrip ? (
|
||||
@@ -254,14 +262,58 @@ export default function PaymentPage() {
|
||||
<JourneyLeg schedule={selectedSchedule} label="Your journey" />
|
||||
)}
|
||||
|
||||
<div className="pt-2 border-t-2 border-gray-200 dark:border-gray-700 space-y-1.5">
|
||||
<div className="flex justify-between text-sm text-gray-600 dark:text-gray-400">
|
||||
<span>Passengers</span>
|
||||
<span className="font-medium text-gray-900 dark:text-gray-100">
|
||||
{passengers.length} passenger{passengers.length !== 1 ? 's' : ''}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center pt-1">
|
||||
{/* Fare breakdown — same first-child-free logic as the review page */}
|
||||
<div className="pt-2 border-t-2 border-gray-200 dark:border-gray-700 space-y-2">
|
||||
<h3 className="text-sm font-bold text-gray-900 dark:text-gray-100">Fare breakdown</h3>
|
||||
{passengers.map((p, i) => {
|
||||
const outFare = outboundSchedule?.baseFareAdult || 0;
|
||||
const inFare = inboundSchedule?.baseFareAdult || 0;
|
||||
const onewayFare = selectedSchedule?.baseFareAdult || 0;
|
||||
|
||||
const outboundFare = calculatePassengerFare(passengers, i, outFare);
|
||||
const inboundFare = calculatePassengerFare(passengers, i, inFare);
|
||||
const oneWayFare = calculatePassengerFare(passengers, i, onewayFare);
|
||||
|
||||
const passengerTotal = isRoundTrip ? outboundFare + inboundFare : oneWayFare;
|
||||
const isChildPassenger = isChild(p);
|
||||
const isFreeChild = isChildPassenger && isFirstChild(passengers, i);
|
||||
|
||||
return (
|
||||
<div key={i} className="border-b border-gray-100 dark:border-gray-800 pb-2 last:border-0">
|
||||
<div className="flex justify-between mb-0.5">
|
||||
<span className="text-sm font-medium text-gray-900 dark:text-gray-100 truncate max-w-[60%]">
|
||||
{p.name || `Passenger ${i + 1}`}
|
||||
{isChildPassenger && (
|
||||
<span className={`text-xs font-semibold ml-1 ${
|
||||
isFreeChild ? 'text-green-600' : 'text-blue-600'
|
||||
}`}>
|
||||
({isFreeChild ? 'CHILD - FREE' : 'CHILD'})
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
<span className="text-sm font-semibold text-gray-900 dark:text-gray-100">
|
||||
{formatFare(passengerTotal, displayCurrency)}
|
||||
</span>
|
||||
</div>
|
||||
{isRoundTrip && (
|
||||
<div className="pl-3 space-y-0.5 text-xs text-gray-500 dark:text-gray-400">
|
||||
<div className="flex justify-between">
|
||||
<span>Outbound {isFreeChild ? '(Free)' : ''}</span>
|
||||
<span>{formatFare(outboundFare, displayCurrency)}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span>Return {isFreeChild ? '(Free)' : ''}</span>
|
||||
<span>{formatFare(inboundFare, displayCurrency)}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="pt-2 border-t-2 border-gray-200 dark:border-gray-700">
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="font-bold text-gray-900 dark:text-gray-100">Total</span>
|
||||
<span className="text-xl font-bold text-primary flex items-center gap-1.5">
|
||||
{loadingAmount && (
|
||||
@@ -311,6 +363,22 @@ export default function PaymentPage() {
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<h1 className="text-2xl font-bold mb-4 text-gray-900 dark:text-gray-100">Complete payment</h1>
|
||||
|
||||
{/* Reservation confirmation banner */}
|
||||
<div className="card bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 mb-4 flex items-start gap-3">
|
||||
<CheckCircle className="w-6 h-6 text-green-600 dark:text-green-400 flex-shrink-0 mt-0.5" />
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-green-800 dark:text-green-300">
|
||||
Your booking is successfully reserved
|
||||
</p>
|
||||
<p className="text-sm text-green-700 dark:text-green-400 mt-0.5">
|
||||
Booking Reference: <span className="font-bold">{pnr}</span>
|
||||
</p>
|
||||
<p className="text-xs text-green-700/80 dark:text-green-400/80 mt-1">
|
||||
Please complete the payment below to confirm your booking. Your seats are held temporarily until payment is completed.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Payment Processing Overlay */}
|
||||
{isProcessing && (
|
||||
<div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50">
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
import { useSearchParams, useRouter } from 'next/navigation';
|
||||
import { usePaymentStore } from '@/lib/payment-store';
|
||||
import { useEffect, Suspense } from 'react';
|
||||
import { XCircle, Loader2, RefreshCw, ChevronLeft } from 'lucide-react';
|
||||
import { XCircle, Loader2, ChevronLeft } from 'lucide-react';
|
||||
|
||||
function TelebirrFailureContent() {
|
||||
const router = useRouter();
|
||||
@@ -30,11 +30,6 @@ function TelebirrFailureContent() {
|
||||
{merchantOrderId && <p className="text-xs text-gray-400 mb-1">Order ID: {merchantOrderId}</p>}
|
||||
{trxRef && <p className="text-xs text-gray-400 mb-4">Ref: {trxRef}</p>}
|
||||
<div className="flex flex-col gap-3 mt-4">
|
||||
<button onClick={() => router.push('/booking/payment')}
|
||||
className="btn-primary w-full flex items-center justify-center gap-2">
|
||||
<RefreshCw className="w-4 h-4" />
|
||||
Try Again
|
||||
</button>
|
||||
<button onClick={() => router.push('/booking/review')}
|
||||
className="btn-secondary w-full flex items-center justify-center gap-2">
|
||||
<ChevronLeft className="w-4 h-4" />
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
import { useSearchParams, useRouter } from 'next/navigation';
|
||||
import { usePaymentStore } from '@/lib/payment-store';
|
||||
import { useEffect, Suspense } from 'react';
|
||||
import { XCircle, Loader2, RefreshCw, ChevronLeft } from 'lucide-react';
|
||||
import { XCircle, Loader2, ChevronLeft } from 'lucide-react';
|
||||
|
||||
function WaafiFailureContent() {
|
||||
const router = useRouter();
|
||||
@@ -33,11 +33,6 @@ function WaafiFailureContent() {
|
||||
<p className="text-xs text-gray-400 mb-4">Ref: {referenceId || transactionId}</p>
|
||||
)}
|
||||
<div className="flex flex-col gap-3 mt-4">
|
||||
<button onClick={() => router.push('/booking/payment')}
|
||||
className="btn-primary w-full flex items-center justify-center gap-2">
|
||||
<RefreshCw className="w-4 h-4" />
|
||||
Try Again
|
||||
</button>
|
||||
<button onClick={() => router.push('/booking/review')}
|
||||
className="btn-secondary w-full flex items-center justify-center gap-2">
|
||||
<ChevronLeft className="w-4 h-4" />
|
||||
|
||||
@@ -7,6 +7,7 @@ import { useBookingStore } from '@/lib/booking-store';
|
||||
import { Schedule } from '@/types';
|
||||
import { ArrowRight, Clock, Calendar, Users, ChevronLeft, Check, X, MapPin, Gift, Train, Bed, Armchair, Star } from 'lucide-react';
|
||||
import { format } from 'date-fns';
|
||||
import { formatTime, getTimePeriod } from '@/utils/format';
|
||||
import { useState, useEffect } from 'react';
|
||||
|
||||
export default function ResultsPage() {
|
||||
@@ -19,6 +20,10 @@ export default function ResultsPage() {
|
||||
);
|
||||
const [classModal, setClassModal] = useState<Schedule | null>(null);
|
||||
const [promoData, setPromoData] = useState<{ code: string; discount: string; message: string } | null>(null);
|
||||
const [roundTripStep, setRoundTripStep] = useState<'outbound' | 'inbound'>(() => {
|
||||
const { outboundSchedule, searchCriteria: sc } = useBookingStore.getState();
|
||||
return outboundSchedule && sc?.tripType === 'ROUND_TRIP' ? 'inbound' : 'outbound';
|
||||
});
|
||||
|
||||
const searchCriteria = useBookingStore((s) => s.searchCriteria);
|
||||
const setSearchCriteria = useBookingStore((s) => s.setSearchCriteria);
|
||||
@@ -28,7 +33,7 @@ export default function ResultsPage() {
|
||||
destinationStationId: searchParams.get('destination') || searchCriteria?.destinationStationId || '',
|
||||
date: searchParams.get('date') || searchCriteria?.departureDate || '',
|
||||
returnDate: searchParams.get('returnDate') || searchCriteria?.returnDate,
|
||||
journeyType: searchParams.get('tripType') === 'ROUND_TRIP' ? 'ROUND_TRIP' : 'ONE_WAY',
|
||||
journeyType: (searchParams.get('tripType') ?? searchCriteria?.tripType ?? 'ONE_WAY') === 'ROUND_TRIP' ? 'ROUND_TRIP' : 'ONE_WAY',
|
||||
adultCount: parseInt(searchParams.get('adults') || '') || searchCriteria?.adultCount || 1,
|
||||
childCount: parseInt(searchParams.get('children') || '') || searchCriteria?.childCount || 0,
|
||||
nationality: searchParams.get('nationality') || searchCriteria?.nationality || 'ETHIOPIAN',
|
||||
@@ -111,6 +116,8 @@ export default function ResultsPage() {
|
||||
return response;
|
||||
},
|
||||
enabled: !!searchData.originStationId && !!searchData.destinationStationId,
|
||||
staleTime: 0,
|
||||
gcTime: 0,
|
||||
});
|
||||
|
||||
const isRoundTrip = searchData.journeyType === 'ROUND_TRIP';
|
||||
@@ -188,18 +195,13 @@ export default function ResultsPage() {
|
||||
seatClassName: (selectedCoachType as any).seatClassName || selectedCoachType.name,
|
||||
};
|
||||
|
||||
// For round trip, store outbound and wait for inbound selection
|
||||
// For round trip, store outbound and advance to inbound step
|
||||
if (isRoundTrip && isOutbound) {
|
||||
setOutboundScheduleData(scheduleData);
|
||||
setOutboundSchedule(scheduleData);
|
||||
setClassModal(null);
|
||||
// Scroll to inbound section
|
||||
setTimeout(() => {
|
||||
const inboundSection = document.getElementById('inbound-section');
|
||||
if (inboundSection) {
|
||||
inboundSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
}
|
||||
}, 100);
|
||||
setRoundTripStep('inbound');
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -256,10 +258,10 @@ export default function ResultsPage() {
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="text-center">
|
||||
<div className="text-3xl font-bold text-gray-900 dark:text-gray-100">
|
||||
{schedule.departureAt ? format(new Date(schedule.departureAt), 'HH:mm') : '--:--'}
|
||||
{schedule.departureAt ? formatTime(schedule.departureAt) : '--:--'}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
|
||||
{schedule.departureAt ? format(new Date(schedule.departureAt), 'MMM d') : ''}
|
||||
{schedule.departureAt ? `${format(new Date(schedule.departureAt), 'MMM d')} · ${getTimePeriod(schedule.departureAt)}` : ''}
|
||||
</div>
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400 mt-1">{schedule.origin?.name || 'Origin'}</div>
|
||||
</div>
|
||||
@@ -283,10 +285,10 @@ export default function ResultsPage() {
|
||||
|
||||
<div className="text-center">
|
||||
<div className="text-3xl font-bold text-gray-900 dark:text-gray-100">
|
||||
{schedule.arrivalAt ? format(new Date(schedule.arrivalAt), 'HH:mm') : '--:--'}
|
||||
{schedule.arrivalAt ? formatTime(schedule.arrivalAt) : '--:--'}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400 mt-0.5 flex items-center justify-center gap-1">
|
||||
<span>{schedule.arrivalAt ? format(new Date(schedule.arrivalAt), 'MMM d') : ''}</span>
|
||||
<span>{schedule.arrivalAt ? `${format(new Date(schedule.arrivalAt), 'MMM d')} · ${getTimePeriod(schedule.arrivalAt)}` : ''}</span>
|
||||
{isNextDay && <span className="text-orange-500 font-medium">(+1)</span>}
|
||||
</div>
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400 mt-1">{schedule.destination?.name || 'Destination'}</div>
|
||||
@@ -699,6 +701,33 @@ export default function ResultsPage() {
|
||||
Modify search
|
||||
</button>
|
||||
<h1 className="section-title">Available schedules</h1>
|
||||
{isRoundTrip && (
|
||||
<div className="flex items-center gap-3 mt-4">
|
||||
<div className={`flex items-center gap-2 px-4 py-2 rounded-full text-sm font-semibold transition-all ${
|
||||
roundTripStep === 'inbound'
|
||||
? 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300'
|
||||
: 'bg-primary text-white shadow-md shadow-primary/30'
|
||||
}`}>
|
||||
{roundTripStep === 'inbound'
|
||||
? <Check className="w-3.5 h-3.5" />
|
||||
: <span className="text-xs leading-none">1</span>}
|
||||
<span>Outbound</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<div className="w-4 h-0.5 bg-gray-300 dark:bg-gray-600" />
|
||||
<ArrowRight className="w-3 h-3 text-gray-400" />
|
||||
<div className="w-4 h-0.5 bg-gray-300 dark:bg-gray-600" />
|
||||
</div>
|
||||
<div className={`flex items-center gap-2 px-4 py-2 rounded-full text-sm font-semibold transition-all ${
|
||||
roundTripStep === 'inbound'
|
||||
? 'bg-primary text-white shadow-md shadow-primary/30'
|
||||
: 'bg-gray-100 dark:bg-gray-800 text-gray-400 dark:text-gray-500'
|
||||
}`}>
|
||||
<span className="text-xs leading-none">2</span>
|
||||
<span>Return</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="hidden sm:flex flex-wrap items-center gap-4 text-gray-600 dark:text-gray-400 mt-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<Calendar className="w-4 h-4" />
|
||||
@@ -718,39 +747,74 @@ export default function ResultsPage() {
|
||||
</div>
|
||||
|
||||
<div className="space-y-8">
|
||||
{outboundSchedules.length > 0 && (
|
||||
<div>
|
||||
{isRoundTrip && (
|
||||
{isRoundTrip ? (
|
||||
roundTripStep === 'outbound' ? (
|
||||
<div>
|
||||
<div className="mb-4">
|
||||
<h2 className="text-xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
|
||||
<ArrowRight className="w-5 h-5 text-primary" />
|
||||
Outbound Journey
|
||||
Select Outbound Journey
|
||||
</h2>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
|
||||
{searchData.date ? format(new Date(searchData.date), 'EEEE, MMMM d, yyyy') : ''}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
<div className="space-y-4">
|
||||
{outboundSchedules.map((schedule: Schedule) => renderScheduleCard(schedule, true))}
|
||||
<div className="space-y-4">
|
||||
{outboundSchedules.map((schedule: Schedule) => renderScheduleCard(schedule, true))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isRoundTrip && inboundSchedules.length > 0 && outboundScheduleData && (
|
||||
<div id="inbound-section">
|
||||
<div className="mb-4">
|
||||
<h2 className="text-xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
|
||||
<ArrowRight className="w-5 h-5 text-primary rotate-180" />
|
||||
Return Journey
|
||||
</h2>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
|
||||
{searchData.returnDate ? format(new Date(searchData.returnDate), 'EEEE, MMMM d, yyyy') : ''}
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
{inboundSchedules.map((schedule: Schedule) => renderScheduleCard(schedule))}
|
||||
) : (
|
||||
<div>
|
||||
{outboundScheduleData && (
|
||||
<div className="mb-6 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-xl p-4 flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 bg-green-100 dark:bg-green-900/40 rounded-full flex items-center justify-center flex-shrink-0">
|
||||
<Check className="w-4 h-4 text-green-600 dark:text-green-400" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-green-900 dark:text-green-200">Outbound journey selected</p>
|
||||
<p className="text-xs text-green-700 dark:text-green-400 mt-0.5">
|
||||
{outboundScheduleData.origin} → {outboundScheduleData.destination}
|
||||
{outboundScheduleData.selectedSeatClassName ? ` · ${outboundScheduleData.selectedSeatClassName}` : ''}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => {
|
||||
setRoundTripStep('outbound');
|
||||
const prevId = outboundScheduleData?.id;
|
||||
setOutboundScheduleData(null);
|
||||
if (prevId) {
|
||||
setSelectedCoachTypes(prev => {
|
||||
const next = { ...prev };
|
||||
delete next[prevId];
|
||||
return next;
|
||||
});
|
||||
}
|
||||
}}
|
||||
className="text-xs font-semibold text-primary hover:underline flex-shrink-0 ml-4"
|
||||
>
|
||||
Change
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
<div className="mb-4">
|
||||
<h2 className="text-xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
|
||||
<ArrowRight className="w-5 h-5 text-primary rotate-180" />
|
||||
Select Return Journey
|
||||
</h2>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
|
||||
{searchData.returnDate ? format(new Date(searchData.returnDate), 'EEEE, MMMM d, yyyy') : ''}
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-4" id="inbound-section">
|
||||
{inboundSchedules.map((schedule: Schedule) => renderScheduleCard(schedule, false))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{outboundSchedules.map((schedule: Schedule) => renderScheduleCard(schedule, true))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -6,6 +6,7 @@ import { useAuthStore } from '@/lib/auth-store';
|
||||
import { useMutation } from '@tanstack/react-query';
|
||||
import { apiClient } from '@/lib/api-client';
|
||||
import { format } from 'date-fns';
|
||||
import { formatTime, getTimePeriod } from '@/utils/format';
|
||||
import { useState, useEffect } from 'react';
|
||||
import { ChevronLeft } from 'lucide-react';
|
||||
import { calculatePassengerFare, isChild, isFirstChild, formatFare } from '@/utils/fare-utils';
|
||||
@@ -93,6 +94,14 @@ export default function ReviewPage() {
|
||||
return suffix ? `${base}${suffix}` : base;
|
||||
};
|
||||
|
||||
// The seat class/category is chosen once per leg (coach type selected on /booking/seats),
|
||||
// so every seat on that leg shares it — no need to look it up per-seat.
|
||||
const formatSeatClass = (schedule: any): string => {
|
||||
const raw = schedule?.selectedSeatClassName || schedule?.seatClassName || schedule?.selectedSeatClass;
|
||||
if (!raw) return 'Standard';
|
||||
return String(raw).replace(/_/g, ' ');
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const fetchSeatDetails = async () => {
|
||||
try {
|
||||
@@ -525,10 +534,12 @@ export default function ReviewPage() {
|
||||
{/* Origin */}
|
||||
<div className="pb-8">
|
||||
<div className="text-2xl font-bold text-gray-900 dark:text-white">
|
||||
{outboundSchedule.departureTime ? format(new Date(outboundSchedule.departureTime), 'HH:mm') : '--:--'}
|
||||
{outboundSchedule.departureTime ? formatTime(outboundSchedule.departureTime) : '--:--'}
|
||||
</div>
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400 mt-0.5">
|
||||
{outboundSchedule.departureTime ? format(new Date(outboundSchedule.departureTime), 'EEE, MMM d') : 'N/A'}
|
||||
{outboundSchedule.departureTime
|
||||
? `${format(new Date(outboundSchedule.departureTime), 'EEE, MMM d')} · ${getTimePeriod(outboundSchedule.departureTime)}`
|
||||
: 'N/A'}
|
||||
</div>
|
||||
<div className="text-base font-semibold text-gray-900 dark:text-white mt-2">
|
||||
{outboundSchedule.origin}
|
||||
@@ -556,10 +567,12 @@ export default function ReviewPage() {
|
||||
{/* Destination */}
|
||||
<div>
|
||||
<div className="text-2xl font-bold text-gray-900 dark:text-white">
|
||||
{outboundSchedule.arrivalTime ? format(new Date(outboundSchedule.arrivalTime), 'HH:mm') : '--:--'}
|
||||
{outboundSchedule.arrivalTime ? formatTime(outboundSchedule.arrivalTime) : '--:--'}
|
||||
</div>
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400 mt-0.5">
|
||||
{outboundSchedule.arrivalTime ? format(new Date(outboundSchedule.arrivalTime), 'EEE, MMM d') : 'N/A'}
|
||||
{outboundSchedule.arrivalTime
|
||||
? `${format(new Date(outboundSchedule.arrivalTime), 'EEE, MMM d')} · ${getTimePeriod(outboundSchedule.arrivalTime)}`
|
||||
: 'N/A'}
|
||||
</div>
|
||||
<div className="text-base font-semibold text-gray-900 dark:text-white mt-2">
|
||||
{outboundSchedule.destination}
|
||||
@@ -598,10 +611,12 @@ export default function ReviewPage() {
|
||||
{/* Origin */}
|
||||
<div className="pb-8">
|
||||
<div className="text-2xl font-bold text-gray-900 dark:text-white">
|
||||
{inboundSchedule.departureTime ? format(new Date(inboundSchedule.departureTime), 'HH:mm') : '--:--'}
|
||||
{inboundSchedule.departureTime ? formatTime(inboundSchedule.departureTime) : '--:--'}
|
||||
</div>
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400 mt-0.5">
|
||||
{inboundSchedule.departureTime ? format(new Date(inboundSchedule.departureTime), 'EEE, MMM d') : 'N/A'}
|
||||
{inboundSchedule.departureTime
|
||||
? `${format(new Date(inboundSchedule.departureTime), 'EEE, MMM d')} · ${getTimePeriod(inboundSchedule.departureTime)}`
|
||||
: 'N/A'}
|
||||
</div>
|
||||
<div className="text-base font-semibold text-gray-900 dark:text-white mt-2">
|
||||
{inboundSchedule.origin}
|
||||
@@ -629,10 +644,12 @@ export default function ReviewPage() {
|
||||
{/* Destination */}
|
||||
<div>
|
||||
<div className="text-2xl font-bold text-gray-900 dark:text-white">
|
||||
{inboundSchedule.arrivalTime ? format(new Date(inboundSchedule.arrivalTime), 'HH:mm') : '--:--'}
|
||||
{inboundSchedule.arrivalTime ? formatTime(inboundSchedule.arrivalTime) : '--:--'}
|
||||
</div>
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400 mt-0.5">
|
||||
{inboundSchedule.arrivalTime ? format(new Date(inboundSchedule.arrivalTime), 'EEE, MMM d') : 'N/A'}
|
||||
{inboundSchedule.arrivalTime
|
||||
? `${format(new Date(inboundSchedule.arrivalTime), 'EEE, MMM d')} · ${getTimePeriod(inboundSchedule.arrivalTime)}`
|
||||
: 'N/A'}
|
||||
</div>
|
||||
<div className="text-base font-semibold text-gray-900 dark:text-white mt-2">
|
||||
{inboundSchedule.destination}
|
||||
@@ -671,10 +688,12 @@ export default function ReviewPage() {
|
||||
{/* Origin */}
|
||||
<div className="pb-8">
|
||||
<div className="text-2xl font-bold text-gray-900 dark:text-white">
|
||||
{selectedSchedule.departureTime ? format(new Date(selectedSchedule.departureTime), 'HH:mm') : '--:--'}
|
||||
{selectedSchedule.departureTime ? formatTime(selectedSchedule.departureTime) : '--:--'}
|
||||
</div>
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400 mt-0.5">
|
||||
{selectedSchedule.departureTime ? format(new Date(selectedSchedule.departureTime), 'EEE, MMM d') : 'N/A'}
|
||||
{selectedSchedule.departureTime
|
||||
? `${format(new Date(selectedSchedule.departureTime), 'EEE, MMM d')} · ${getTimePeriod(selectedSchedule.departureTime)}`
|
||||
: 'N/A'}
|
||||
</div>
|
||||
<div className="text-base font-semibold text-gray-900 dark:text-white mt-2">
|
||||
{selectedSchedule.origin}
|
||||
@@ -702,10 +721,12 @@ export default function ReviewPage() {
|
||||
{/* Destination */}
|
||||
<div>
|
||||
<div className="text-2xl font-bold text-gray-900 dark:text-white">
|
||||
{selectedSchedule.arrivalTime ? format(new Date(selectedSchedule.arrivalTime), 'HH:mm') : '--:--'}
|
||||
{selectedSchedule.arrivalTime ? formatTime(selectedSchedule.arrivalTime) : '--:--'}
|
||||
</div>
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400 mt-0.5">
|
||||
{selectedSchedule.arrivalTime ? format(new Date(selectedSchedule.arrivalTime), 'EEE, MMM d') : 'N/A'}
|
||||
{selectedSchedule.arrivalTime
|
||||
? `${format(new Date(selectedSchedule.arrivalTime), 'EEE, MMM d')} · ${getTimePeriod(selectedSchedule.arrivalTime)}`
|
||||
: 'N/A'}
|
||||
</div>
|
||||
<div className="text-base font-semibold text-gray-900 dark:text-white mt-2">
|
||||
{selectedSchedule.destination}
|
||||
@@ -736,18 +757,27 @@ export default function ReviewPage() {
|
||||
<p className="font-semibold text-sm text-gray-900 dark:text-gray-100">
|
||||
{(p as any).outboundSeatId ? (seatDetails[`outbound-${(p as any).outboundSeatId}`] || 'Loading...') : 'Auto-assign'}
|
||||
</p>
|
||||
{(p as any).outboundSeatId && (
|
||||
<p className="text-[10px] text-gray-400 dark:text-gray-500 mt-0.5">{formatSeatClass(outboundSchedule)}</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="bg-gray-50 dark:bg-gray-800 rounded-lg p-2">
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">Return Seat</p>
|
||||
<p className="font-semibold text-sm text-gray-900 dark:text-gray-100">
|
||||
{(p as any).inboundSeatId ? (seatDetails[`inbound-${(p as any).inboundSeatId}`] || 'Loading...') : 'Auto-assign'}
|
||||
</p>
|
||||
{(p as any).inboundSeatId && (
|
||||
<p className="text-[10px] text-gray-400 dark:text-gray-500 mt-0.5">{formatSeatClass(inboundSchedule)}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-right">
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">Seat</p>
|
||||
<p className="font-medium text-gray-900 dark:text-gray-100">{p.seatId ? (seatDetails[p.seatId] || 'Loading...') : 'Auto-assign'}</p>
|
||||
{p.seatId && (
|
||||
<p className="text-[10px] text-gray-400 dark:text-gray-500 mt-0.5">{formatSeatClass(selectedSchedule)}</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -4,14 +4,13 @@ import { useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { z } from "zod";
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { useAuthStore } from "@/lib/auth-store";
|
||||
import { apiClient } from "@/lib/api-client";
|
||||
import { useBookingStore } from "@/lib/booking-store";
|
||||
import { Station } from "@/types";
|
||||
import {
|
||||
MapPin,
|
||||
ArrowRight,
|
||||
ArrowLeftRight,
|
||||
Plus,
|
||||
Minus,
|
||||
@@ -23,7 +22,6 @@ import {
|
||||
X,
|
||||
ChevronLeft,
|
||||
Clock,
|
||||
Zap,
|
||||
} from "lucide-react";
|
||||
import { useEffect, useRef, useState, useCallback } from "react";
|
||||
import ModernDatePicker from "@/components/ModernDatePicker";
|
||||
@@ -79,12 +77,6 @@ const searchSchema = z
|
||||
|
||||
type SearchForm = z.infer<typeof searchSchema>;
|
||||
|
||||
const POPULAR_ROUTES = [
|
||||
{ from: "Sebeta", to: "Nagad", duration: "12h", icon: "🌆" },
|
||||
{ from: "Sebeta", to: "Diredawa", duration: "8h", icon: "🏔️" },
|
||||
{ from: "Diredawa", to: "Nagad", duration: "4h", icon: "🌊" },
|
||||
];
|
||||
|
||||
// ─── Station Modal ────────────────────────────────────────────────────────────
|
||||
function StationModal({
|
||||
stations,
|
||||
@@ -530,6 +522,8 @@ export default function SearchPage() {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
const setSearchCriteria = useBookingStore((s) => s.setSearchCriteria);
|
||||
const clearBooking = useBookingStore((s) => s.clearBooking);
|
||||
const queryClient = useQueryClient();
|
||||
const { user, isAuthenticated } = useAuthStore();
|
||||
|
||||
const [passengerModalOpen, setPassengerModalOpen] = useState(false);
|
||||
@@ -701,7 +695,10 @@ export default function SearchPage() {
|
||||
|
||||
const onSubmit = (data: SearchForm) => {
|
||||
setHasInteracted(true);
|
||||
// Clear previous booking selections and search cache before starting a new search
|
||||
clearBooking();
|
||||
setSearchCriteria(data);
|
||||
queryClient.removeQueries({ queryKey: ["search"] });
|
||||
if (data.originStationId) saveRecent(data.originStationId);
|
||||
if (data.destinationStationId) saveRecent(data.destinationStationId);
|
||||
const params = new URLSearchParams({
|
||||
@@ -723,20 +720,6 @@ export default function SearchPage() {
|
||||
const originStation = getStationById(originId);
|
||||
const destStation = getStationById(destId);
|
||||
|
||||
const handlePopularRoute = (fromName: string, toName: string) => {
|
||||
const origin = stations.find((s) =>
|
||||
s.name.toLowerCase().includes(fromName.toLowerCase()),
|
||||
);
|
||||
const dest = stations.find((s) =>
|
||||
s.name.toLowerCase().includes(toName.toLowerCase()),
|
||||
);
|
||||
if (origin && dest) {
|
||||
setValue("originStationId", origin.id);
|
||||
setValue("destinationStationId", dest.id);
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-gray-50 dark:bg-gray-950">
|
||||
{/* Passenger modal (mobile) */}
|
||||
@@ -790,9 +773,15 @@ export default function SearchPage() {
|
||||
)}
|
||||
|
||||
{/* ── 90vh hero with banner image ── */}
|
||||
{/* Round trip stacks an extra Return Date field into the widget on mobile, which grows
|
||||
upward from its bottom-anchored position — give the hero extra height there so the
|
||||
widget's top edge doesn't creep up into the sticky header. */}
|
||||
<section
|
||||
className="relative"
|
||||
style={{ height: "90vh", minHeight: "560px" }}
|
||||
className={`relative ${
|
||||
tripType === "ROUND_TRIP"
|
||||
? "h-[calc(90vh+60px)] min-h-[670px] md:h-[90vh] md:min-h-[560px]"
|
||||
: "h-[94vh] min-h-[560px]"
|
||||
}`}
|
||||
>
|
||||
{/* Background image with zoom - fully isolated */}
|
||||
<div className="absolute inset-0 overflow-hidden">
|
||||
@@ -956,7 +945,7 @@ export default function SearchPage() {
|
||||
<label className="text-xs font-semibold text-gray-500 uppercase tracking-wide">
|
||||
Date
|
||||
</label>
|
||||
<div className="relative z-30">
|
||||
<div>
|
||||
<ModernDatePicker
|
||||
value={
|
||||
departureDate
|
||||
@@ -980,7 +969,7 @@ export default function SearchPage() {
|
||||
<label className="text-xs font-semibold text-gray-500 uppercase tracking-wide">
|
||||
Return Date
|
||||
</label>
|
||||
<div className="relative z-20">
|
||||
<div>
|
||||
<ModernDatePicker
|
||||
value={
|
||||
returnDate
|
||||
@@ -1059,7 +1048,11 @@ export default function SearchPage() {
|
||||
clearErrors("originStationId");
|
||||
clearErrors("destinationStationId");
|
||||
}}
|
||||
error={hasInteracted ? errors.originStationId?.message : undefined}
|
||||
error={
|
||||
hasInteracted
|
||||
? errors.originStationId?.message
|
||||
: undefined
|
||||
}
|
||||
onOpen={scrollWidgetIntoView}
|
||||
/>
|
||||
{hasInteracted && errors.originStationId && (
|
||||
@@ -1094,7 +1087,11 @@ export default function SearchPage() {
|
||||
if (s.id) saveRecent(s.id);
|
||||
clearErrors("destinationStationId");
|
||||
}}
|
||||
error={hasInteracted ? errors.destinationStationId?.message : undefined}
|
||||
error={
|
||||
hasInteracted
|
||||
? errors.destinationStationId?.message
|
||||
: undefined
|
||||
}
|
||||
onOpen={scrollWidgetIntoView}
|
||||
/>
|
||||
{hasInteracted && errors.destinationStationId && (
|
||||
@@ -1110,7 +1107,7 @@ export default function SearchPage() {
|
||||
<label className="text-xs font-semibold text-gray-500 uppercase tracking-wide">
|
||||
Date
|
||||
</label>
|
||||
<div className="relative z-30">
|
||||
<div>
|
||||
<ModernDatePicker
|
||||
value={
|
||||
departureDate
|
||||
@@ -1191,7 +1188,11 @@ export default function SearchPage() {
|
||||
clearErrors("originStationId");
|
||||
clearErrors("destinationStationId");
|
||||
}}
|
||||
error={hasInteracted ? errors.originStationId?.message : undefined}
|
||||
error={
|
||||
hasInteracted
|
||||
? errors.originStationId?.message
|
||||
: undefined
|
||||
}
|
||||
onOpen={scrollWidgetIntoView}
|
||||
/>
|
||||
{hasInteracted && errors.originStationId && (
|
||||
@@ -1226,7 +1227,11 @@ export default function SearchPage() {
|
||||
if (s.id) saveRecent(s.id);
|
||||
clearErrors("destinationStationId");
|
||||
}}
|
||||
error={hasInteracted ? errors.destinationStationId?.message : undefined}
|
||||
error={
|
||||
hasInteracted
|
||||
? errors.destinationStationId?.message
|
||||
: undefined
|
||||
}
|
||||
onOpen={scrollWidgetIntoView}
|
||||
/>
|
||||
{hasInteracted && errors.destinationStationId && (
|
||||
@@ -1242,7 +1247,7 @@ export default function SearchPage() {
|
||||
<label className="text-xs font-semibold text-gray-500 uppercase tracking-wide">
|
||||
Departure
|
||||
</label>
|
||||
<div className="relative z-30">
|
||||
<div>
|
||||
<ModernDatePicker
|
||||
value={
|
||||
departureDate
|
||||
@@ -1272,7 +1277,7 @@ export default function SearchPage() {
|
||||
<label className="text-xs font-semibold text-gray-500 uppercase tracking-wide">
|
||||
Return
|
||||
</label>
|
||||
<div className="relative z-20">
|
||||
<div>
|
||||
<ModernDatePicker
|
||||
value={
|
||||
returnDate
|
||||
@@ -1497,41 +1502,6 @@ export default function SearchPage() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Popular Routes — below hero */}
|
||||
<div className="bg-gray-50 dark:bg-gray-950 py-10">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<Zap className="w-4 h-4 text-primary" />
|
||||
<h2 className="text-base font-bold text-gray-900 dark:text-white">
|
||||
Popular Routes
|
||||
</h2>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
|
||||
{POPULAR_ROUTES.map((route, idx) => (
|
||||
<button
|
||||
key={idx}
|
||||
type="button"
|
||||
onClick={() => handlePopularRoute(route.from, route.to)}
|
||||
className="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-xl p-4 hover:border-primary hover:shadow-md transition-all text-left active:scale-95"
|
||||
>
|
||||
<div className="text-xl mb-2">{route.icon}</div>
|
||||
<div className="flex items-center gap-1.5 text-sm font-semibold text-gray-900 dark:text-white">
|
||||
<span>{route.from}</span>
|
||||
<ArrowRight className="w-3.5 h-3.5 text-primary flex-shrink-0" />
|
||||
<span>{route.to}</span>
|
||||
</div>
|
||||
<div className="text-xs text-gray-400 mt-1 flex items-center gap-1">
|
||||
<Clock className="w-3 h-3" />
|
||||
{route.duration} journey
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style jsx>{`
|
||||
@keyframes slide-up {
|
||||
from {
|
||||
|
||||
@@ -21,7 +21,7 @@ const buildSeatLabel = (seat: any): string => {
|
||||
return suffix ? `${base}${suffix}` : base;
|
||||
};
|
||||
|
||||
const BedCard = memo(({ bed, isSelected, onToggle }: any) => {
|
||||
const BedCard = memo(({ bed, isSelected, isAssignedToOther, onToggle }: any) => {
|
||||
const seatLabel = bed.label || bed.seatNumber || bed.number || "?";
|
||||
const bedPosition = bed.bedPosition || "";
|
||||
const bedType =
|
||||
@@ -30,21 +30,28 @@ const BedCard = memo(({ bed, isSelected, onToggle }: any) => {
|
||||
: bedPosition === "middle"
|
||||
? "Middle"
|
||||
: "Lower";
|
||||
const isDisabled = bed.status !== "AVAILABLE" || isAssignedToOther;
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={() => onToggle(bed.id)}
|
||||
disabled={bed.status !== "AVAILABLE"}
|
||||
disabled={isDisabled}
|
||||
className={`relative flex flex-col items-center justify-center gap-1 px-3 py-2 rounded-lg transition-all ${
|
||||
isSelected
|
||||
? "bg-blue-50 border-2 border-blue-500 dark:bg-blue-900/20 dark:border-blue-400"
|
||||
: bed.status === "AVAILABLE"
|
||||
? "bg-green-50 border border-green-300 hover:bg-green-100 dark:bg-green-900/20 dark:border-green-700"
|
||||
: bed.status === "BOOKED"
|
||||
? "bg-red-50 border border-red-300 cursor-not-allowed dark:bg-red-900/20 dark:border-red-700"
|
||||
: "bg-gray-100 border border-gray-300 cursor-not-allowed dark:bg-gray-800 dark:border-gray-700"
|
||||
: isAssignedToOther
|
||||
? "bg-purple-50 border border-purple-300 cursor-not-allowed dark:bg-purple-900/20 dark:border-purple-700"
|
||||
: bed.status === "AVAILABLE"
|
||||
? "bg-green-50 border border-green-300 hover:bg-green-100 dark:bg-green-900/20 dark:border-green-700"
|
||||
: bed.status === "BOOKED"
|
||||
? "bg-red-50 border border-red-300 cursor-not-allowed dark:bg-red-900/20 dark:border-red-700"
|
||||
: "bg-gray-100 border border-gray-300 cursor-not-allowed dark:bg-gray-800 dark:border-gray-700"
|
||||
}`}
|
||||
title={`Bed ${seatLabel} - ${bedType} - ${bed.status}`}
|
||||
title={
|
||||
isAssignedToOther
|
||||
? `Bed ${seatLabel} - already assigned to another passenger`
|
||||
: `Bed ${seatLabel} - ${bedType} - ${bed.status}`
|
||||
}
|
||||
>
|
||||
<Image src="/bed.png" alt="bed" width={32} height={32} className="object-contain" />
|
||||
<div className="text-xs font-bold text-gray-900 dark:text-white">
|
||||
@@ -63,6 +70,7 @@ const SeatButton = memo(
|
||||
({
|
||||
seat,
|
||||
isSelected,
|
||||
isAssignedToOther,
|
||||
onToggle,
|
||||
isBedCoach,
|
||||
bedLabel,
|
||||
@@ -71,22 +79,29 @@ const SeatButton = memo(
|
||||
const seatLabel = seat.number || seat.label || seat.seatNumber || "?";
|
||||
const bedWidth = "w-24";
|
||||
const width = isBedCoach ? bedWidth : "w-10";
|
||||
const isDisabled = seat.status !== "AVAILABLE" || isAssignedToOther;
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center">
|
||||
<button
|
||||
onClick={() => onToggle(seat.id)}
|
||||
disabled={seat.status !== "AVAILABLE"}
|
||||
disabled={isDisabled}
|
||||
className={`${width} h-11 rounded flex items-center justify-center transition-all ${
|
||||
isSelected
|
||||
? "bg-[rgb(20_113_76)] text-white shadow-md scale-105"
|
||||
: seat.status === "AVAILABLE"
|
||||
? "bg-green-500 hover:bg-green-600 text-white cursor-pointer hover:shadow-md"
|
||||
: seat.status === "HELD"
|
||||
? "bg-yellow-500 text-white cursor-not-allowed opacity-75"
|
||||
: "bg-gray-500 text-white cursor-not-allowed opacity-60"
|
||||
: isAssignedToOther
|
||||
? "bg-purple-400 text-white cursor-not-allowed opacity-75"
|
||||
: seat.status === "AVAILABLE"
|
||||
? "bg-green-500 hover:bg-green-600 text-white cursor-pointer hover:shadow-md"
|
||||
: seat.status === "HELD"
|
||||
? "bg-yellow-500 text-white cursor-not-allowed opacity-75"
|
||||
: "bg-gray-500 text-white cursor-not-allowed opacity-60"
|
||||
}`}
|
||||
title={`Seat ${seatLabel}${bedLabel} - ${seat.status} - ${coachSeatClass}`}
|
||||
title={
|
||||
isAssignedToOther
|
||||
? `Seat ${seatLabel}${bedLabel} - already assigned to another passenger`
|
||||
: `Seat ${seatLabel}${bedLabel} - ${seat.status} - ${coachSeatClass}`
|
||||
}
|
||||
style={
|
||||
isBedCoach
|
||||
? seat.row % 2 === 1
|
||||
@@ -122,7 +137,10 @@ export default function SeatsPage() {
|
||||
searchCriteria,
|
||||
bookingId,
|
||||
} = useBookingStore();
|
||||
const [selectedSeats, setSelectedSeats] = useState<string[]>([]);
|
||||
// Maps passenger index -> assigned seat id. A passenger can only get a seat while
|
||||
// they are the "active" passenger, which prevents bulk/batch selection across passengers.
|
||||
const [passengerSeatMap, setPassengerSeatMap] = useState<Record<number, string>>({});
|
||||
const [activePassengerIndex, setActivePassengerIndex] = useState(0);
|
||||
const [selectedCoach, setSelectedCoach] = useState<string | null>(null);
|
||||
const [currentJourneyType, setCurrentJourneyType] = useState<
|
||||
"outbound" | "inbound"
|
||||
@@ -344,71 +362,87 @@ export default function SeatsPage() {
|
||||
return seats;
|
||||
}, [allSeats, selectedCoachData, currentSchedule?.selectedSeatClass]);
|
||||
|
||||
const handleSeatClick = useCallback(
|
||||
(seatId: string) => {
|
||||
setSelectedSeats((prev) => {
|
||||
if (prev.length < passengers.length) {
|
||||
return [...prev, seatId];
|
||||
} else {
|
||||
return [seatId];
|
||||
}
|
||||
});
|
||||
},
|
||||
[passengers.length],
|
||||
// Seats already claimed by any passenger in this journey leg
|
||||
const assignedSeatIds = useMemo(
|
||||
() => new Set(Object.values(passengerSeatMap)),
|
||||
[passengerSeatMap],
|
||||
);
|
||||
|
||||
const handleContinue = async () => {
|
||||
if (isRoundTrip && currentJourneyType === "outbound") {
|
||||
if (selectedSeats.length > 0) {
|
||||
try {
|
||||
await holdMutation.mutateAsync(selectedSeats);
|
||||
const updatedPassengers = passengers.map((p, i) => {
|
||||
const seatData = validSeats?.find(
|
||||
(s: any) => s.id === selectedSeats[i],
|
||||
);
|
||||
return {
|
||||
...p,
|
||||
outboundSeatId: selectedSeats[i],
|
||||
outboundSeatNumber: seatData ? buildSeatLabel(seatData) : '',
|
||||
};
|
||||
});
|
||||
setPassengers(updatedPassengers);
|
||||
} catch (error: any) {
|
||||
setModalState({
|
||||
isOpen: true,
|
||||
title: "Seat Hold Failed",
|
||||
message:
|
||||
error?.response?.data?.message ||
|
||||
"Failed to hold seats. Please try again.",
|
||||
type: "error",
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
setCurrentJourneyType("inbound");
|
||||
setSelectedSeats([]);
|
||||
setSelectedCoach(null);
|
||||
return;
|
||||
}
|
||||
// The furthest passenger a user is allowed to jump to — cannot skip ahead of the
|
||||
// first passenger who still needs a seat.
|
||||
const firstUnassignedIndex = useMemo(
|
||||
() => passengers.findIndex((_, i) => !passengerSeatMap[i]),
|
||||
[passengers, passengerSeatMap],
|
||||
);
|
||||
const maxSelectableIndex =
|
||||
firstUnassignedIndex === -1 ? passengers.length - 1 : firstUnassignedIndex;
|
||||
|
||||
if (selectedSeats.length > 0) {
|
||||
const isSeatSelected = useCallback(
|
||||
(seatId: string) => passengerSeatMap[activePassengerIndex] === seatId,
|
||||
[passengerSeatMap, activePassengerIndex],
|
||||
);
|
||||
|
||||
const isSeatAssignedToOther = useCallback(
|
||||
(seatId: string) =>
|
||||
Object.entries(passengerSeatMap).some(
|
||||
([idx, sid]) => Number(idx) !== activePassengerIndex && sid === seatId,
|
||||
),
|
||||
[passengerSeatMap, activePassengerIndex],
|
||||
);
|
||||
|
||||
const handleSelectPassenger = useCallback(
|
||||
(index: number) => {
|
||||
if (index > maxSelectableIndex) return; // no skipping ahead of unassigned passengers
|
||||
setActivePassengerIndex(index);
|
||||
},
|
||||
[maxSelectableIndex],
|
||||
);
|
||||
|
||||
const handleSeatClick = useCallback(
|
||||
(seatId: string) => {
|
||||
// Seat already claimed by a different passenger — never allow duplicate assignment
|
||||
const takenByOther = Object.entries(passengerSeatMap).some(
|
||||
([idx, sid]) => Number(idx) !== activePassengerIndex && sid === seatId,
|
||||
);
|
||||
if (takenByOther) return;
|
||||
|
||||
const isDeselecting = passengerSeatMap[activePassengerIndex] === seatId;
|
||||
const next = { ...passengerSeatMap };
|
||||
if (isDeselecting) {
|
||||
delete next[activePassengerIndex];
|
||||
} else {
|
||||
next[activePassengerIndex] = seatId;
|
||||
}
|
||||
setPassengerSeatMap(next);
|
||||
|
||||
if (!isDeselecting) {
|
||||
// Move on to the next passenger who still needs a seat — one passenger at a time
|
||||
const nextUnassigned = passengers.findIndex(
|
||||
(_, i) => i !== activePassengerIndex && !next[i],
|
||||
);
|
||||
if (nextUnassigned !== -1) setActivePassengerIndex(nextUnassigned);
|
||||
}
|
||||
},
|
||||
[passengerSeatMap, activePassengerIndex, passengers],
|
||||
);
|
||||
|
||||
const allSeatsAssigned =
|
||||
passengers.length > 0 &&
|
||||
passengers.every((_, i) => !!passengerSeatMap[i]);
|
||||
|
||||
const handleContinue = async () => {
|
||||
if (!allSeatsAssigned) return;
|
||||
const seatIds = passengers.map((_, i) => passengerSeatMap[i]);
|
||||
|
||||
if (isRoundTrip && currentJourneyType === "outbound") {
|
||||
try {
|
||||
await holdMutation.mutateAsync(selectedSeats);
|
||||
await holdMutation.mutateAsync(seatIds);
|
||||
const updatedPassengers = passengers.map((p, i) => {
|
||||
const seatData = validSeats?.find(
|
||||
(s: any) => s.id === selectedSeats[i],
|
||||
);
|
||||
if (isRoundTrip && currentJourneyType === "inbound") {
|
||||
return {
|
||||
...p,
|
||||
inboundSeatId: selectedSeats[i],
|
||||
inboundSeatNumber: seatData ? buildSeatLabel(seatData) : '',
|
||||
};
|
||||
}
|
||||
const seatData = validSeats?.find((s: any) => s.id === seatIds[i]);
|
||||
return {
|
||||
...p,
|
||||
seatId: selectedSeats[i],
|
||||
seatNumber: seatData ? buildSeatLabel(seatData) : '',
|
||||
outboundSeatId: seatIds[i],
|
||||
outboundSeatNumber: seatData ? buildSeatLabel(seatData) : '',
|
||||
};
|
||||
});
|
||||
setPassengers(updatedPassengers);
|
||||
@@ -423,42 +457,32 @@ export default function SeatsPage() {
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
router.push("/booking/review");
|
||||
};
|
||||
|
||||
const handleAutoAssign = async () => {
|
||||
const availableSeats =
|
||||
validSeats?.filter((s: any) => s.status === "AVAILABLE") || [];
|
||||
if (availableSeats.length < passengers.length) {
|
||||
setModalState({
|
||||
isOpen: true,
|
||||
title: "Not Enough Seats",
|
||||
message: `Only ${availableSeats.length} seat(s) available in this coach, but you need ${passengers.length} seat(s). Please select another coach.`,
|
||||
type: "warning",
|
||||
});
|
||||
setCurrentJourneyType("inbound");
|
||||
setPassengerSeatMap({});
|
||||
setActivePassengerIndex(0);
|
||||
setSelectedCoach(null);
|
||||
return;
|
||||
}
|
||||
|
||||
const autoSelectedSeats = availableSeats
|
||||
.slice(0, passengers.length)
|
||||
.map((s: any) => s.id);
|
||||
setSelectedSeats(autoSelectedSeats);
|
||||
|
||||
try {
|
||||
await holdMutation.mutateAsync(autoSelectedSeats);
|
||||
await holdMutation.mutateAsync(seatIds);
|
||||
const updatedPassengers = passengers.map((p, i) => {
|
||||
const seatData = availableSeats[i];
|
||||
const seatData = validSeats?.find((s: any) => s.id === seatIds[i]);
|
||||
if (isRoundTrip && currentJourneyType === "inbound") {
|
||||
return {
|
||||
...p,
|
||||
inboundSeatId: seatIds[i],
|
||||
inboundSeatNumber: seatData ? buildSeatLabel(seatData) : '',
|
||||
};
|
||||
}
|
||||
return {
|
||||
...p,
|
||||
seatId: autoSelectedSeats[i],
|
||||
seatId: seatIds[i],
|
||||
seatNumber: seatData ? buildSeatLabel(seatData) : '',
|
||||
};
|
||||
});
|
||||
setPassengers(updatedPassengers);
|
||||
router.push("/booking/review");
|
||||
} catch (error: any) {
|
||||
console.error("Failed to hold seats:", error);
|
||||
setModalState({
|
||||
isOpen: true,
|
||||
title: "Seat Hold Failed",
|
||||
@@ -467,7 +491,38 @@ export default function SeatsPage() {
|
||||
"Failed to hold seats. Please try again.",
|
||||
type: "error",
|
||||
});
|
||||
return;
|
||||
}
|
||||
router.push("/booking/review");
|
||||
};
|
||||
|
||||
const handleAutoAssign = () => {
|
||||
const unassignedIndices = passengers
|
||||
.map((_, i) => i)
|
||||
.filter((i) => !passengerSeatMap[i]);
|
||||
|
||||
if (unassignedIndices.length === 0) return;
|
||||
|
||||
const availableSeats = (
|
||||
validSeats?.filter((s: any) => s.status === "AVAILABLE") || []
|
||||
).filter((s: any) => !assignedSeatIds.has(s.id));
|
||||
|
||||
if (availableSeats.length < unassignedIndices.length) {
|
||||
setModalState({
|
||||
isOpen: true,
|
||||
title: "Not Enough Seats",
|
||||
message: `Only ${availableSeats.length} seat(s) available in this coach, but you need ${unassignedIndices.length} more seat(s). Please select another coach.`,
|
||||
type: "warning",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const next = { ...passengerSeatMap };
|
||||
unassignedIndices.forEach((passengerIndex, offset) => {
|
||||
next[passengerIndex] = availableSeats[offset].id;
|
||||
});
|
||||
setPassengerSeatMap(next);
|
||||
setActivePassengerIndex(passengers.length - 1);
|
||||
};
|
||||
|
||||
const handleBackToPassengers = () => {
|
||||
@@ -494,8 +549,9 @@ export default function SeatsPage() {
|
||||
]);
|
||||
|
||||
useEffect(() => {
|
||||
if (bookingId && selectedSeats.length > 0) {
|
||||
bookSeatsMutation.mutate(selectedSeats);
|
||||
const heldSeatIds = Object.values(passengerSeatMap);
|
||||
if (bookingId && heldSeatIds.length > 0) {
|
||||
bookSeatsMutation.mutate(heldSeatIds);
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [bookingId]);
|
||||
@@ -636,7 +692,8 @@ export default function SeatsPage() {
|
||||
<div key={bed.id} className="relative">
|
||||
<BedCard
|
||||
bed={bed}
|
||||
isSelected={selectedSeats.includes(bed.id)}
|
||||
isSelected={isSeatSelected(bed.id)}
|
||||
isAssignedToOther={isSeatAssignedToOther(bed.id)}
|
||||
onToggle={handleSeatClick}
|
||||
bedLabel="U"
|
||||
/>
|
||||
@@ -661,7 +718,8 @@ export default function SeatsPage() {
|
||||
<div key={bed.id} className="relative">
|
||||
<BedCard
|
||||
bed={bed}
|
||||
isSelected={selectedSeats.includes(bed.id)}
|
||||
isSelected={isSeatSelected(bed.id)}
|
||||
isAssignedToOther={isSeatAssignedToOther(bed.id)}
|
||||
onToggle={handleSeatClick}
|
||||
bedLabel="L"
|
||||
/>
|
||||
@@ -695,7 +753,8 @@ export default function SeatsPage() {
|
||||
<BedCard
|
||||
key={bed.id}
|
||||
bed={bed}
|
||||
isSelected={selectedSeats.includes(bed.id)}
|
||||
isSelected={isSeatSelected(bed.id)}
|
||||
isAssignedToOther={isSeatAssignedToOther(bed.id)}
|
||||
onToggle={handleSeatClick}
|
||||
bedLabel="L"
|
||||
/>
|
||||
@@ -713,7 +772,8 @@ export default function SeatsPage() {
|
||||
<BedCard
|
||||
key={bed.id}
|
||||
bed={bed}
|
||||
isSelected={selectedSeats.includes(bed.id)}
|
||||
isSelected={isSeatSelected(bed.id)}
|
||||
isAssignedToOther={isSeatAssignedToOther(bed.id)}
|
||||
onToggle={handleSeatClick}
|
||||
bedLabel="L"
|
||||
/>
|
||||
@@ -739,7 +799,8 @@ export default function SeatsPage() {
|
||||
<BedCard
|
||||
key={bed.id}
|
||||
bed={bed}
|
||||
isSelected={selectedSeats.includes(bed.id)}
|
||||
isSelected={isSeatSelected(bed.id)}
|
||||
isAssignedToOther={isSeatAssignedToOther(bed.id)}
|
||||
onToggle={handleSeatClick}
|
||||
bedLabel="M"
|
||||
/>
|
||||
@@ -757,7 +818,8 @@ export default function SeatsPage() {
|
||||
<BedCard
|
||||
key={bed.id}
|
||||
bed={bed}
|
||||
isSelected={selectedSeats.includes(bed.id)}
|
||||
isSelected={isSeatSelected(bed.id)}
|
||||
isAssignedToOther={isSeatAssignedToOther(bed.id)}
|
||||
onToggle={handleSeatClick}
|
||||
bedLabel="M"
|
||||
/>
|
||||
@@ -783,7 +845,8 @@ export default function SeatsPage() {
|
||||
<BedCard
|
||||
key={bed.id}
|
||||
bed={bed}
|
||||
isSelected={selectedSeats.includes(bed.id)}
|
||||
isSelected={isSeatSelected(bed.id)}
|
||||
isAssignedToOther={isSeatAssignedToOther(bed.id)}
|
||||
onToggle={handleSeatClick}
|
||||
bedLabel="U"
|
||||
/>
|
||||
@@ -801,7 +864,8 @@ export default function SeatsPage() {
|
||||
<BedCard
|
||||
key={bed.id}
|
||||
bed={bed}
|
||||
isSelected={selectedSeats.includes(bed.id)}
|
||||
isSelected={isSeatSelected(bed.id)}
|
||||
isAssignedToOther={isSeatAssignedToOther(bed.id)}
|
||||
onToggle={handleSeatClick}
|
||||
bedLabel="U"
|
||||
/>
|
||||
@@ -880,7 +944,8 @@ export default function SeatsPage() {
|
||||
<SeatButton
|
||||
key={seat.id}
|
||||
seat={seat}
|
||||
isSelected={selectedSeats.includes(seat.id)}
|
||||
isSelected={isSeatSelected(seat.id)}
|
||||
isAssignedToOther={isSeatAssignedToOther(seat.id)}
|
||||
onToggle={handleSeatClick}
|
||||
isBedCoach={true}
|
||||
bedLabel={getBedLabel(seat.bedPosition)}
|
||||
@@ -992,7 +1057,8 @@ export default function SeatsPage() {
|
||||
<SeatButton
|
||||
key={seat.id}
|
||||
seat={seat}
|
||||
isSelected={selectedSeats.includes(seat.id)}
|
||||
isSelected={isSeatSelected(seat.id)}
|
||||
isAssignedToOther={isSeatAssignedToOther(seat.id)}
|
||||
onToggle={handleSeatClick}
|
||||
isBedCoach={false}
|
||||
bedLabel=""
|
||||
@@ -1065,7 +1131,8 @@ export default function SeatsPage() {
|
||||
);
|
||||
}
|
||||
|
||||
const allSelected = selectedSeats.length === passengers.length;
|
||||
const assignedCount = passengers.filter((_, i) => !!passengerSeatMap[i]).length;
|
||||
const activePassenger = passengers[activePassengerIndex];
|
||||
const isBedCoach =
|
||||
selectedCoachData?.isBedCoach === true ||
|
||||
selectedCoachData?.rooms?.length > 0 ||
|
||||
@@ -1081,18 +1148,18 @@ export default function SeatsPage() {
|
||||
</h3>
|
||||
<span
|
||||
className={`text-xs font-semibold px-2 py-0.5 rounded-full ${
|
||||
allSelected
|
||||
allSeatsAssigned
|
||||
? "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400"
|
||||
: "bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400"
|
||||
}`}
|
||||
>
|
||||
{selectedSeats.length}/{passengers.length} selected
|
||||
{assignedCount}/{passengers.length} selected
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mb-4">
|
||||
{allSelected
|
||||
{allSeatsAssigned
|
||||
? "All seats selected — ready to continue"
|
||||
: `Select ${passengers.length - selectedSeats.length} more seat(s)`}
|
||||
: `Selecting seat for ${activePassenger?.name || `Passenger ${activePassengerIndex + 1}`} (${activePassengerIndex + 1} of ${passengers.length})`}
|
||||
</p>
|
||||
|
||||
{/* Progress bar */}
|
||||
@@ -1100,75 +1167,88 @@ export default function SeatsPage() {
|
||||
<div
|
||||
className="h-full bg-[rgb(20,113,76)] rounded-full transition-all duration-300"
|
||||
style={{
|
||||
width: `${(selectedSeats.length / passengers.length) * 100}%`,
|
||||
width: `${(assignedCount / passengers.length) * 100}%`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 mb-5">
|
||||
{passengers.map((p, i) => {
|
||||
const assignedSeat = selectedSeats[i]
|
||||
? validSeats?.find((s: any) => s.id === selectedSeats[i])
|
||||
const assignedSeatId = passengerSeatMap[i];
|
||||
const assignedSeat = assignedSeatId
|
||||
? validSeats?.find((s: any) => s.id === assignedSeatId)
|
||||
: null;
|
||||
const seatLabel = assignedSeat
|
||||
? assignedSeat.number ||
|
||||
assignedSeat.label ||
|
||||
assignedSeat.seatNumber ||
|
||||
"—"
|
||||
: "—";
|
||||
const bedLabel = assignedSeat
|
||||
? getBedLabel(assignedSeat.bedPosition)
|
||||
: "";
|
||||
const seatLabel = assignedSeat ? buildSeatLabel(assignedSeat) : "";
|
||||
const isActive = i === activePassengerIndex;
|
||||
const isClickable = i <= maxSelectableIndex;
|
||||
return (
|
||||
<div
|
||||
<button
|
||||
key={i}
|
||||
className="flex items-center justify-between py-2 border-b border-gray-100 dark:border-gray-800 last:border-0"
|
||||
type="button"
|
||||
onClick={() => handleSelectPassenger(i)}
|
||||
disabled={!isClickable}
|
||||
className={`w-full flex items-center justify-between py-2 px-2 rounded-lg border text-left transition-all ${
|
||||
isActive
|
||||
? "border-[rgb(20,113,76)] bg-[rgb(20,113,76)]/5 dark:bg-[rgb(20,113,76)]/10"
|
||||
: "border-transparent"
|
||||
} ${
|
||||
isClickable
|
||||
? "cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/60"
|
||||
: "cursor-not-allowed opacity-50"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center gap-2 min-w-0">
|
||||
<div
|
||||
className={`w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0 ${
|
||||
assignedSeat
|
||||
? "bg-[rgb(20,113,76)] text-white"
|
||||
: "bg-gray-200 dark:bg-gray-700 text-gray-500"
|
||||
: isActive
|
||||
? "bg-[rgb(20,113,76)]/20 text-[rgb(20,113,76)] ring-2 ring-[rgb(20,113,76)]"
|
||||
: "bg-gray-200 dark:bg-gray-700 text-gray-500"
|
||||
}`}
|
||||
>
|
||||
{i + 1}
|
||||
</div>
|
||||
<span className="text-sm text-gray-700 dark:text-gray-300 truncate max-w-[120px]">
|
||||
{p.name}
|
||||
</span>
|
||||
<div className="min-w-0">
|
||||
<span className="text-sm text-gray-700 dark:text-gray-300 truncate block max-w-[120px]">
|
||||
{p.name}
|
||||
</span>
|
||||
{isActive && !assignedSeat && (
|
||||
<span className="text-[10px] font-semibold text-[rgb(20,113,76)] uppercase tracking-wide">
|
||||
Now selecting
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
className={`text-sm font-semibold ${
|
||||
className={`text-sm font-semibold flex-shrink-0 ${
|
||||
assignedSeat ? "text-[rgb(20,113,76)]" : "text-gray-400"
|
||||
}`}
|
||||
>
|
||||
{assignedSeat ? `${seatLabel}${bedLabel}` : "Not selected"}
|
||||
{assignedSeat ? `Seat ${seatLabel}` : "Not Assigned"}
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={handleContinue}
|
||||
disabled={selectedSeats.length === 0 || holdMutation.isPending}
|
||||
disabled={!allSeatsAssigned || holdMutation.isPending}
|
||||
className="w-full py-3 bg-[rgb(20,113,76)] hover:bg-[rgb(16,89,60)] disabled:opacity-40 disabled:cursor-not-allowed text-white font-bold text-sm rounded-xl transition-all shadow-lg"
|
||||
>
|
||||
{holdMutation.isPending
|
||||
? "Holding seats..."
|
||||
: isRoundTrip && currentJourneyType === "outbound"
|
||||
? "Continue to Return Seats"
|
||||
: allSelected
|
||||
? "Continue"
|
||||
: "Continue with partial selection"}
|
||||
: "Continue"}
|
||||
</button>
|
||||
<button
|
||||
onClick={handleAutoAssign}
|
||||
disabled={holdMutation.isPending}
|
||||
disabled={holdMutation.isPending || allSeatsAssigned}
|
||||
className="w-full mt-2 py-2.5 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 disabled:opacity-40 text-gray-700 dark:text-gray-300 font-semibold text-sm rounded-xl transition-all"
|
||||
>
|
||||
Auto-assign seats
|
||||
Auto Assign Seats
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
@@ -1183,21 +1263,17 @@ export default function SeatsPage() {
|
||||
type={modalState.type}
|
||||
/>
|
||||
|
||||
{/* Mobile summary bottom-sheet */}
|
||||
{selectedSeats.length > 0 && (
|
||||
<>
|
||||
<div
|
||||
className="fixed inset-x-0 bottom-0 z-50 lg:hidden bg-white dark:bg-gray-900 rounded-t-2xl shadow-2xl p-5"
|
||||
style={{
|
||||
animation: "seats-slide-up 0.25s cubic-bezier(0.32,0.72,0,1)",
|
||||
}}
|
||||
>
|
||||
<div className="w-10 h-1 bg-gray-300 dark:bg-gray-600 rounded-full mx-auto mb-4" />
|
||||
<SummaryContent />
|
||||
</div>
|
||||
<style>{`@keyframes seats-slide-up{from{transform:translateY(100%)}to{transform:translateY(0)}}`}</style>
|
||||
</>
|
||||
)}
|
||||
{/* Mobile summary bottom-sheet — always visible so the active passenger is clear */}
|
||||
<div
|
||||
className="fixed inset-x-0 bottom-0 z-50 lg:hidden bg-white dark:bg-gray-900 rounded-t-2xl shadow-2xl p-5 max-h-[70vh] overflow-y-auto"
|
||||
style={{
|
||||
animation: "seats-slide-up 0.25s cubic-bezier(0.32,0.72,0,1)",
|
||||
}}
|
||||
>
|
||||
<div className="w-10 h-1 bg-gray-300 dark:bg-gray-600 rounded-full mx-auto mb-4" />
|
||||
<SummaryContent />
|
||||
</div>
|
||||
<style>{`@keyframes seats-slide-up{from{transform:translateY(100%)}to{transform:translateY(0)}}`}</style>
|
||||
|
||||
<div className="min-h-screen bg-gray-50 dark:bg-gray-900">
|
||||
{/* Header */}
|
||||
@@ -1211,15 +1287,22 @@ export default function SeatsPage() {
|
||||
<ChevronLeft className="w-4 h-4" />
|
||||
Back
|
||||
</button>
|
||||
<h1 className="text-base font-bold text-gray-900 dark:text-white">
|
||||
{isRoundTrip
|
||||
? currentJourneyType === "outbound"
|
||||
? "Select Outbound Seats"
|
||||
: "Select Return Seats"
|
||||
: "Select Seats"}
|
||||
</h1>
|
||||
<div className="text-center">
|
||||
<h1 className="text-base font-bold text-gray-900 dark:text-white">
|
||||
{isRoundTrip
|
||||
? currentJourneyType === "outbound"
|
||||
? "Select Outbound Seats"
|
||||
: "Select Return Seats"
|
||||
: "Select Seats"}
|
||||
</h1>
|
||||
{!allSeatsAssigned && (
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">
|
||||
Now selecting: {activePassenger?.name || `Passenger ${activePassengerIndex + 1}`}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-sm font-semibold text-[rgb(20,113,76)]">
|
||||
{selectedSeats.length}/{passengers.length}
|
||||
{assignedCount}/{passengers.length}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -104,7 +104,7 @@ function fmt(iso: string, opts?: Intl.DateTimeFormatOptions): string {
|
||||
|
||||
function fmtTime(iso: string): string {
|
||||
try {
|
||||
return new Date(iso).toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit", hour12: false });
|
||||
return new Date(iso).toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit", hour12: true });
|
||||
} catch { return iso; }
|
||||
}
|
||||
|
||||
|
||||
@@ -1,12 +1,27 @@
|
||||
import { Suspense } from 'react';
|
||||
import { dehydrate, HydrationBoundary, QueryClient } from '@tanstack/react-query';
|
||||
import SearchPage from '@/app/booking/search/page';
|
||||
import PackagesSection from '@/components/PackagesSection';
|
||||
|
||||
export default function Home() {
|
||||
export default async function Home() {
|
||||
const queryClient = new QueryClient();
|
||||
const apiUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:4000';
|
||||
|
||||
await queryClient.prefetchQuery({
|
||||
queryKey: ['stations'],
|
||||
queryFn: async () => {
|
||||
const res = await fetch(`${apiUrl}/stations`, { next: { revalidate: 3600 } });
|
||||
const json = await res.json();
|
||||
return json?.data ?? json;
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<Suspense>
|
||||
<SearchPage />
|
||||
<PackagesSection />
|
||||
</Suspense>
|
||||
<HydrationBoundary state={dehydrate(queryClient)}>
|
||||
<Suspense>
|
||||
<SearchPage />
|
||||
<PackagesSection />
|
||||
</Suspense>
|
||||
</HydrationBoundary>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -31,7 +31,7 @@ export default function AppHeader() {
|
||||
|
||||
|
||||
return (
|
||||
<header className="sticky top-0 z-50 bg-[rgb(20_113_76)] dark:bg-gray-900 border-b border-[rgb(16_89_60)] dark:border-gray-800 shadow-sm">
|
||||
<header className="sticky top-0 z-[60] bg-[rgb(20_113_76)] dark:bg-gray-900 border-b border-[rgb(16_89_60)] dark:border-gray-800 shadow-sm">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="flex items-center justify-between h-16">
|
||||
|
||||
@@ -146,7 +146,7 @@ export function SearchWidget({ fullWidth = false, onSearch }: SearchWidgetProps)
|
||||
</div>
|
||||
|
||||
{/* Date */}
|
||||
<div className="space-y-2 relative z-30 md:col-span-1">
|
||||
<div className="space-y-2 md:col-span-1">
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 text-left">Date</label>
|
||||
<ModernDatePicker
|
||||
value={watch('departureDate') ? new Date(watch('departureDate') + 'T00:00:00') : undefined}
|
||||
|
||||
@@ -119,7 +119,7 @@ function drawJourneyLeg(doc: jsPDF, schedule: ScheduleInfo, label: string | null
|
||||
|
||||
const dep = new Date(schedule.departureAt);
|
||||
doc.setFontSize(13); doc.setTextColor(...PRIMARY); doc.setFont('helvetica', 'bold');
|
||||
doc.text(dep.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: false }), margin + 5, y + 33);
|
||||
doc.text(dep.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true }), margin + 5, y + 33);
|
||||
doc.setFontSize(7); doc.setTextColor(...MED); doc.setFont('helvetica', 'normal');
|
||||
doc.text(dep.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric', year: 'numeric' }), margin + 5, y + 38);
|
||||
|
||||
@@ -143,7 +143,7 @@ function drawJourneyLeg(doc: jsPDF, schedule: ScheduleInfo, label: string | null
|
||||
|
||||
const arr = new Date(schedule.arrivalAt);
|
||||
doc.setFontSize(13); doc.setTextColor(...PRIMARY); doc.setFont('helvetica', 'bold');
|
||||
doc.text(arr.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: false }), dx, y + 33);
|
||||
doc.text(arr.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true }), dx, y + 33);
|
||||
doc.setFontSize(7); doc.setTextColor(...MED); doc.setFont('helvetica', 'normal');
|
||||
doc.text(arr.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric', year: 'numeric' }), dx, y + 38);
|
||||
|
||||
|
||||
@@ -13,9 +13,17 @@ export const formatDate = (date: string | Date, formatStr: string = 'MMM dd, yyy
|
||||
};
|
||||
|
||||
export const formatDateTime = (date: string | Date): string => {
|
||||
return format(new Date(date), 'MMM dd, yyyy HH:mm');
|
||||
return format(new Date(date), 'MMM dd, yyyy h:mm a');
|
||||
};
|
||||
|
||||
export const formatTime = (date: string | Date): string => {
|
||||
return format(new Date(date), 'HH:mm');
|
||||
return format(new Date(date), 'h:mm a');
|
||||
};
|
||||
|
||||
export const getTimePeriod = (date: string | Date): string => {
|
||||
const hour = new Date(date).getHours();
|
||||
if (hour >= 5 && hour < 12) return 'Morning';
|
||||
if (hour >= 12 && hour < 17) return 'Afternoon';
|
||||
if (hour >= 17 && hour < 21) return 'Evening';
|
||||
return 'Night';
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user