Tria/edr-platform
1
0
Fork 0
mirror of https://github.com/Tria-plc/edr-platform.git synced 2026-08-27 00:52:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update fare display based on currency and fix seat allocation

Browse Source
This commit is contained in:
Roba Boru
2026-06-27 07:16:08 +03:00
parent d86cfa43ea
commit c50abbffaa
17 changed files with 662 additions and 693 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
apps/edr-passenger-api/src/modules/fare-engine/fare-engine.dto.ts
View File

@@ -3,15 +3,15 @@ import { ApiProperty, ApiPropertyOptional } from '@nestjs/swagger';
import { Type } from 'class-transformer';
import { Currency } from '@prisma/client';
// Nationality → home currency mapping
// Nationality → home currency mapping (keys are uppercase for case-insensitive lookup)
export const NATIONALITY_CURRENCY_MAP: Record<string, Currency> = {
Ethiopian: Currency.ETB,
Djiboutian: Currency.DJF,
ETHIOPIAN: Currency.ETB,
DJIBOUTIAN: Currency.DJF,
};
export function resolveCurrencyFromNationality(nationality?: string): Currency {
if (!nationality) return Currency.ETB;
return NATIONALITY_CURRENCY_MAP[nationality] ?? Currency.USD;
return NATIONALITY_CURRENCY_MAP[nationality.toUpperCase()] ?? Currency.USD;
}
export class FareCalculateDto {
@@ -29,7 +29,7 @@ export class FareCalculateDto {
@ApiPropertyOptional({
example: 'Ethiopian',
description: 'Passenger nationality. Determines the billing currency: Ethiopian → ETB, Djiboutian → DJF, other → USD. Defaults to ETB.',
description: 'Passenger nationality. Determines the billing currency: ETHIOPIAN → ETB, DJIBOUTIAN → DJF, other → USD. Case-insensitive. Defaults to ETB.',
})
@IsOptional() @IsString() nationality?: string;

24
apps/edr-passenger-api/src/modules/notifications/notifications.service.ts
View File

@@ -295,20 +295,34 @@ export class NotificationsService {
{ category: 'PAYMENT', deepLink: `edr://tickets/${ref}` },
);
// Resolve SMS phone: prefer the IAM user's stored number, fall back to the phone
// the passenger entered on the booking form (contactPhone).
const contactPhone: string | null = (booking as any)?.contactPhone ?? (payload.booking as any)?.contactPhone ?? null;
const iamPhone = passengerId ? await this.getRecipientAddress(passengerId, 'SMS').catch(() => null) : null;
const smsPhone = iamPhone ?? contactPhone;
// Ticket not ready (generation failed/raced) — fall back to a payment-only confirmation.
if (!ticket || !booking) {
this.logger.warn(`payment.succeeded: ticket not ready for booking ${ref}; sending payment-only confirmation`);
const text = `EDR: Payment of ${amount} ${currency} received for booking ${ref}. Your ticket is being prepared.`;
await this.deliverEmail(passengerId, `Payment received — ${ref}`, text);
await this.deliverSms(passengerId, text);
if (smsPhone) {
await this.smsClient.sendSms({ to: smsPhone, message: text }).catch(() => null);
} else {
this.logger.warn(`No SMS phone for booking ${ref}`);
}
return;
}
// SMS — short pointer (no HTML/QR over SMS).
await this.deliverSms(
passengerId,
`EDR: Booking ${ref} confirmed, ${amount} ${currency} paid. Show ref ${ref} at the gate or view your ticket: ${ticketUrl}`,
);
if (smsPhone) {
await this.smsClient.sendSms({
to: smsPhone,
message: `EDR: Booking ${ref} confirmed, ${amount} ${currency} paid. Show ref ${ref} at the gate or view your ticket: ${ticketUrl}`,
}).catch(() => null);
} else {
this.logger.warn(`No SMS phone for booking ${ref}`);
}
// EMAIL — rich HTML ticket with plain-text fallback.
await this.deliverEmail(

10
apps/edr-passenger-api/src/modules/payments/payments.controller.ts
View File

@@ -128,12 +128,16 @@ export class PaymentsController {
@ApiOperation({
summary: "List payment systems supported by the platform",
description:
"Returns the global catalog of accepted payment systems. Not user-specific. Optionally filter by region to match a passenger's nationality.",
"Returns the global catalog of accepted payment systems. Filter by `currency` (e.g. ETB, DJF, USD) to get methods that settle in that currency, and/or by `region` to match a passenger's nationality. Both filters can be combined.",
})
@ApiQuery({ name: "currency", required: false, example: "DJF", description: "Settlement currency — ETB, DJF, USD, etc." })
@ApiQuery({ name: "region", enum: PaymentRegionEnum, required: false })
@ApiOkResponse({ type: [SupportedPaymentMethodDto] })
getMethods(@Query("region") region?: PaymentRegionEnum) {
return this.service.getSupportedPaymentMethods(region);
getMethods(
@Query("currency") currency?: string,
@Query("region") region?: PaymentRegionEnum,
) {
return this.service.getSupportedPaymentMethods(region, currency);
}
@Get("checkout")

3
apps/edr-passenger-api/src/modules/payments/payments.service.ts
View File

@@ -473,7 +473,7 @@ export class PaymentsService {
});
}
getSupportedPaymentMethods(region?: PaymentRegionEnum) {
getSupportedPaymentMethods(region?: PaymentRegionEnum, currency?: string) {
return this.prisma.paymentMethod.findMany({
where: {
enabled: true,
@@ -487,6 +487,7 @@ export class PaymentsService {
},
}
: {}),
...(currency ? { currency: currency.toUpperCase() } : {}),
},
orderBy: [{ sortOrder: "asc" }, { displayName: "asc" }],
});

52
apps/edr-passenger-api/src/modules/search/search.service.ts
View File

@@ -4,6 +4,7 @@ import { SearchTripsDto, FareQuoteDto } from './search.dto';
import { CurrencyService } from '../currency/currency.service';
import { FareEngineService } from '../fare-engine/fare-engine.service';
import { SegmentsService } from '../segments/segments.service';
import { resolveCurrencyFromNationality } from '../fare-engine/fare-engine.dto';
import { Currency } from '@prisma/client';
const POINTS_TO_MINOR = 10;
@@ -307,9 +308,13 @@ export class SearchService {
(new Date(leg2DepartureAt).getTime() - new Date(leg1ArrivalAt).getTime()) / 60_000,
);
const leg1MinFare = Math.min(...(leg1Result.faresByClass as any[]).map((f: any) => f.baseFareMinor).filter((n: number) => n > 0), Infinity);
const leg2MinFare = Math.min(...(leg2Result.faresByClass as any[]).map((f: any) => f.baseFareMinor).filter((n: number) => n > 0), Infinity);
const combinedMinFareMinor = (isFinite(leg1MinFare) ? leg1MinFare : 0) + (isFinite(leg2MinFare) ? leg2MinFare : 0);
const leg1MinFare = Math.min(...(leg1Result.faresByClass as any[]).map((f: any) => f.baseFareMinor).filter((n: number) => n > 0), Infinity);
const leg2MinFare = Math.min(...(leg2Result.faresByClass as any[]).map((f: any) => f.baseFareMinor).filter((n: number) => n > 0), Infinity);
const leg1MinDisplay = Math.min(...(leg1Result.faresByClass as any[]).map((f: any) => f.displayAmountMinor).filter((n: number) => n > 0), Infinity);
const leg2MinDisplay = Math.min(...(leg2Result.faresByClass as any[]).map((f: any) => f.displayAmountMinor).filter((n: number) => n > 0), Infinity);
const combinedMinFareMinor = (isFinite(leg1MinFare) ? leg1MinFare : 0) + (isFinite(leg2MinFare) ? leg2MinFare : 0);
const combinedMinFareDisplay = (isFinite(leg1MinDisplay) ? leg1MinDisplay : 0) + (isFinite(leg2MinDisplay) ? leg2MinDisplay : 0);
const displayCurrency = leg1Result.displayCurrency ?? leg2Result.displayCurrency ?? Currency.ETB;
results.push({
type: 'TRANSIT',
@@ -318,7 +323,9 @@ export class SearchService {
connectionMinutes,
leg1: leg1Result,
leg2: leg2Result,
displayCurrency,
combinedMinFareMinor,
combinedMinFareDisplay,
// Convenience top-level fields so round-trip filter can read them uniformly
departureAt: leg1Result.departureAt,
arrivalAt: leg2Result.arrivalAt,
@@ -379,6 +386,8 @@ export class SearchService {
const legDepartureAt = originStop.plannedDepartureAt ?? schedule.departureAt;
const legArrivalAt = destStop.plannedArrivalAt ?? schedule.arrivalAt;
const displayCurrency = faresByClass[0]?.displayCurrency ?? resolveCurrencyFromNationality(nationality);
return {
type: 'DIRECT',
scheduleId: schedule.id,
@@ -395,6 +404,7 @@ export class SearchService {
.map((st: any) => ({ stationId: st.stationId, stationName: st.station.name, sequence: st.sequence, plannedArrivalAt: st.plannedArrivalAt, plannedDepartureAt: st.plannedDepartureAt })),
availabilityByClass,
hasAvailability: Object.values(availabilityByClass).some(n => n >= totalPassengers),
displayCurrency,
faresByClass,
coachTypes,
};
@@ -467,7 +477,7 @@ export class SearchService {
const taxesMinor = Math.round(totalBaseFareMinor * 0.05);
const totalMinor = Math.max(0, totalBaseFareMinor - discountMinor - loyaltyMinor + taxesMinor);
const displayCurrency = dto.displayCurrency ?? Currency.ETB;
const displayCurrency = dto.displayCurrency ?? resolveCurrencyFromNationality(dto.nationality);
const displayTotalMinor = displayCurrency !== Currency.ETB
? await this.currencyService.convertAmount(totalMinor, Currency.ETB, displayCurrency)
: totalMinor;
@@ -494,7 +504,9 @@ export class SearchService {
originStationId: string,
destinationStationId: string,
nationality?: string,
): Promise<Array<{ seatClassName: string; baseFareMinor: number }>> {
): Promise<Array<{ seatClassName: string; baseFareMinor: number; displayCurrency: Currency; displayAmountMinor: number }>> {
const displayCurrency = resolveCurrencyFromNationality(nationality);
const seatClassIds: string[] = Array.from(
new Set(
schedule.coachAssignments
@@ -535,8 +547,10 @@ export class SearchService {
scheduleId: schedule.id,
});
return {
seatClassName: fare.seatClassName,
baseFareMinor: fare.baseFarePerPassengerMinor,
seatClassName: fare.seatClassName,
baseFareMinor: fare.baseFarePerPassengerMinor,
displayCurrency: fare.billingCurrency as Currency,
displayAmountMinor: Math.round(fare.baseFarePerPassengerMinor * fare.exchangeRate),
};
} catch (error) {
console.error(`Failed to calculate fare for ${sc.name}:`, (error as Error).message);
@@ -545,7 +559,9 @@ export class SearchService {
}),
);
const validResults = results.filter((r): r is { seatClassName: string; baseFareMinor: number } => r !== null);
const validResults = results.filter(
(r): r is { seatClassName: string; baseFareMinor: number; displayCurrency: Currency; displayAmountMinor: number } => r !== null,
);
if (validResults.length > 0) {
return validResults;
}
@@ -573,9 +589,12 @@ export class SearchService {
if (fareRules.length > 0) {
console.log(`Found ${fareRules.length} fare rules for segment ${segmentRoute}`);
const seatClassMap = Object.fromEntries(seatClasses.map(sc => [sc.id, sc.name]));
const exchangeRate = await this.currencyService.getExchangeRate(Currency.ETB, displayCurrency);
return fareRules.map(rule => ({
seatClassName: seatClassMap[rule.seatClassId] || 'Unknown',
baseFareMinor: rule.baseFareMinor,
seatClassName: seatClassMap[rule.seatClassId] || 'Unknown',
baseFareMinor: rule.baseFareMinor,
displayCurrency,
displayAmountMinor: Math.round(rule.baseFareMinor * exchangeRate),
}));
}
}
@@ -586,13 +605,13 @@ export class SearchService {
private async buildCoachTypeDetails(
schedule: any,
faresByClass: Array<{ seatClassName: string; baseFareMinor: number }>,
faresByClass: Array<{ seatClassName: string; baseFareMinor: number; displayCurrency: Currency; displayAmountMinor: number }>,
): Promise<Array<{
coachTypeId: string;
coachTypeName: string;
coachTypeCode: string;
coachId: string;
classes: Array<{ name: string; baseFareMinor: number }>;
classes: Array<{ name: string; baseFareMinor: number; displayCurrency: Currency; displayAmountMinor: number }>;
}>> {
const coachTypeMap = new Map<
string,
@@ -621,9 +640,14 @@ export class SearchService {
.map((className) => {
const fareInfo = faresByClass.find((f) => f.seatClassName === className);
if (!fareInfo) return null;
return { name: className, baseFareMinor: fareInfo.baseFareMinor };
return {
name: className,
baseFareMinor: fareInfo.baseFareMinor,
displayCurrency: fareInfo.displayCurrency,
displayAmountMinor: fareInfo.displayAmountMinor,
};
})
.filter((c): c is { name: string; baseFareMinor: number } => c !== null)
.filter((c): c is { name: string; baseFareMinor: number; displayCurrency: Currency; displayAmountMinor: number } => c !== null)
.sort((a, b) => a.baseFareMinor - b.baseFareMinor);
result.push({

77
apps/edr-passenger-api/src/modules/seats/seats.service.ts
View File

@@ -307,9 +307,9 @@ export class SeatsService {
throw new NotFoundException(`Seat(s) not found: ${missing.join(', ')}`);
}
const blocked = seats.filter(s => s.status === 'BLOCKED');
const blocked = seats.filter(s => s.status === 'BLOCKED' || s.status === 'BOOKED' || s.status === 'HELD');
if (blocked.length > 0)
throw new ConflictException(`Seat(s) ${blocked.map(s => s.seatNumber).join(', ')} are blocked`);
throw new ConflictException(`Seat(s) ${blocked.map(s => s.seatNumber).join(', ')} are already taken`);
const seatLabelById = Object.fromEntries(seats.map(s => [s.id, s.seatNumber]));
@@ -334,28 +334,34 @@ export class SeatsService {
select: { seatIds: true, createdBy: true },
});
const parsedHolds: { seatIds: string[]; from: number; to: number; passengerIds: string[] }[] = [];
const parsedHolds: { seatIds: string[]; from: number; to: number; passengerIds: string[]; legUnknown: boolean }[] = [];
for (const h of activeHolds) {
const rawSeatIds = h.seatIds as string[];
try {
if (h.createdBy?.trimStart().startsWith('{')) {
const meta = JSON.parse(h.createdBy);
const holdFrom = seqOf(meta.originStationId);
const holdTo = seqOf(meta.destinationStationId);
if (holdFrom !== undefined && holdTo !== undefined) {
parsedHolds.push({
seatIds: h.seatIds,
from: holdFrom,
to: holdTo,
passengerIds: (meta.passengers ?? []).map((p: any) => p.passengerId),
});
}
parsedHolds.push({
seatIds: rawSeatIds,
from: holdFrom ?? 0,
to: holdTo ?? Number.MAX_SAFE_INTEGER,
passengerIds: (meta.passengers ?? []).map((p: any) => p.passengerId),
legUnknown: holdFrom === undefined || holdTo === undefined,
});
} else {
// Legacy plain-string createdBy — can't determine leg; block conservatively.
parsedHolds.push({ seatIds: rawSeatIds, from: 0, to: Number.MAX_SAFE_INTEGER, passengerIds: [], legUnknown: true });
}
} catch { /* ignore */ }
} catch {
// Malformed JSON — block conservatively.
parsedHolds.push({ seatIds: rawSeatIds, from: 0, to: Number.MAX_SAFE_INTEGER, passengerIds: [], legUnknown: true });
}
}
for (const { passengerId, seatId } of dto.passengers) {
for (const hold of parsedHolds) {
const legsOverlap = hold.from < reqTo && reqFrom < hold.to;
const legsOverlap = hold.legUnknown || (hold.from < reqTo && reqFrom < hold.to);
if (!legsOverlap) continue;
if (hold.seatIds.includes(seatId)) {
@@ -364,7 +370,7 @@ export class SeatsService {
);
}
if (hold.passengerIds.includes(passengerId)) {
if (!hold.legUnknown && hold.passengerIds.includes(passengerId)) {
throw new ConflictException(
`Passenger already holds a seat on this journey leg`,
);
@@ -386,12 +392,14 @@ export class SeatsService {
if (!seg.seatId) continue;
const segFrom = seqOf(seg.departureStationId);
const segTo = seqOf(seg.arrivalStationId);
if (segFrom !== undefined && segTo !== undefined) {
if (segFrom < reqTo && reqFrom < segTo) {
throw new ConflictException(
`Seat ${seatLabelById[seg.seatId]} is already booked for this leg`,
);
}
// If stations can't be resolved, assume overlap (conservative) to prevent double-booking.
const overlaps = (segFrom === undefined || segTo === undefined)
? true
: segFrom < reqTo && reqFrom < segTo;
if (overlaps) {
throw new ConflictException(
`Seat ${seatLabelById[seg.seatId]} is already booked for this leg`,
);
}
}
@@ -401,6 +409,13 @@ export class SeatsService {
passengers: dto.passengers.map(p => ({ passengerId: p.passengerId, seatId: p.seatId })),
};
// Mark seats as HELD so the status check catches them immediately on any
// subsequent hold attempt (avoids relying solely on the SeatHold table scan).
await tx.seat.updateMany({
where: { id: { in: seatIds } },
data: { status: 'HELD' },
});
return tx.seatHold.create({
data: {
scheduleId: dto.scheduleId,
@@ -541,11 +556,16 @@ export class SeatsService {
async releaseHold(holdId: string) {
const hold = await this.prisma.seatHold.findUnique({ where: { id: holdId } });
if (!hold) throw new NotFoundException('Hold not found');
await this.prisma.seatHold.delete({ where: { id: holdId } });
await this.prisma.$transaction([
this.prisma.seat.updateMany({
where: { id: { in: hold.seatIds as string[] }, status: 'HELD' },
data: { status: 'AVAILABLE' },
}),
this.prisma.seatHold.delete({ where: { id: holdId } }),
]);
return { released: true, holdId };
}
// Physical seat.status stays AVAILABLE — segment rows are the source of truth for occupancy.
async confirmSeats(_seatIds: string[]) {}
// Delete the Journey (and its JourneySegments) scoped to this booking.
@@ -719,7 +739,18 @@ export class SeatsService {
@Cron(CronExpression.EVERY_MINUTE)
async expireHolds() {
// Holds are temporary and don't create Journey rows — just delete expired ones.
const expired = await this.prisma.seatHold.findMany({
where: { expiresAt: { lt: new Date() } },
select: { id: true, seatIds: true },
});
if (expired.length === 0) return;
const expiredSeatIds = expired.flatMap(h => h.seatIds as string[]);
// Only reset seats that are still HELD — BOOKED seats have been confirmed and must not be touched.
await this.prisma.seat.updateMany({
where: { id: { in: expiredSeatIds }, status: 'HELD' },
data: { status: 'AVAILABLE' },
});
await this.prisma.seatHold.deleteMany({ where: { expiresAt: { lt: new Date() } } });
}
}

36
apps/edr-passenger-api/src/modules/tickets/tickets.service.ts
View File

@@ -1,4 +1,4 @@
import { Injectable, NotFoundException, BadRequestException, HttpException, HttpStatus } from '@nestjs/common';
import { Injectable, NotFoundException, BadRequestException, HttpException, HttpStatus, Logger } from '@nestjs/common';
import { InjectDataSource } from '@nestjs/typeorm';
import { DataSource } from 'typeorm';
import { PrismaService } from '../../common/prisma.service';
@@ -15,6 +15,8 @@ interface OfflineValidation {
@Injectable()
export class TicketsService {
private readonly logger = new Logger(TicketsService.name);
constructor(
private readonly prisma: PrismaService,
private readonly notifications: NotificationsService,
@@ -154,17 +156,29 @@ export class TicketsService {
);
}
// Booking not in CONFIRMED state (safety net — should align with SUCCEEDED)
// Booking not in CONFIRMED state — could be a webhook delivery failure.
// If the intent already SUCCEEDED but the booking is still PENDING_PAYMENT,
// self-heal here rather than rejecting a legitimately paid booking.
if (booking.status !== 'CONFIRMED') {
throw new HttpException(
{
status: 'error',
message: 'Payment not completed',
code: 400,
detail: `Booking status: ${booking.status}`,
},
HttpStatus.BAD_REQUEST,
);
if (booking.status === 'PENDING_PAYMENT') {
this.logger.warn(
`Booking ${bookingId} is PENDING_PAYMENT but payment intent SUCCEEDED — webhook likely missed. Auto-confirming before ticket generation.`,
);
await this.prisma.booking.update({
where: { id: bookingId },
data: { status: 'CONFIRMED' },
});
} else {
throw new HttpException(
{
status: 'error',
message: 'Payment not completed',
code: 400,
detail: `Booking status: ${booking.status}`,
},
HttpStatus.BAD_REQUEST,
);
}
}
// Build a compact multi-leg payload for the QR so gate scanners see all legs

193
apps/edr-passenger-web/portal/src/app/booking/auth-check/page.tsx
View File

@@ -1,9 +1,42 @@
'use client';
import { useEffect } from 'react';
import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import { useAuthStore } from '@/lib/auth-store';
import { LogIn, UserPlus, Shield, Clock } from 'lucide-react';
import { LogIn, UserPlus, ChevronLeft } from 'lucide-react';
function Tooltip({ children, content }: { children: React.ReactNode; content: string[] }) {
const [visible, setVisible] = useState(false);
return (
<div
className="relative"
onMouseEnter={() => setVisible(true)}
onMouseLeave={() => setVisible(false)}
onFocus={() => setVisible(true)}
onBlur={() => setVisible(false)}
>
{children}
<div
role="tooltip"
className={`absolute bottom-[calc(100%+8px)] left-1/2 -translate-x-1/2 w-52 bg-gray-900 dark:bg-gray-700 text-white text-xs rounded-lg px-3 py-2.5 shadow-xl pointer-events-none transition-all duration-150 z-50 ${
visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-1'
}`}
>
<ul className="space-y-1">
{content.map((item, i) => (
<li key={i} className="flex items-center gap-1.5">
<span className="text-green-400 flex-shrink-0">✓</span>
{item}
</li>
))}
</ul>
{/* Arrow */}
<div className="absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-gray-900 dark:border-t-gray-700" />
</div>
</div>
);
}
export default function AuthCheckPage() {
const router = useRouter();
@@ -19,122 +52,54 @@ export default function AuthCheckPage() {
}
}, [isAuthenticated, router]);
const handleSignIn = () => {
router.push('/login?redirect=/booking/passengers');
};
const handleGuest = () => {
router.push('/booking/passengers');
};
return (
<div className="min-h-screen bg-gradient-to-br from-gray-50 to-primary-50 dark:from-gray-900 dark:to-gray-800 py-12">
<div className="container mx-auto px-4">
<div className="max-w-5xl mx-auto">
{/* Header */}
<div className="text-center mb-12 animate-fade-in">
<h1 className="section-title">Continue your booking</h1>
<p className="section-subtitle mt-2">
Sign in to access saved profiles or continue as a guest
</p>
</div>
<div className="min-h-screen bg-gray-50 dark:bg-gray-900 flex flex-col items-center justify-center px-4">
<div className="w-full max-w-sm">
<h1 className="text-2xl font-bold text-center text-gray-900 dark:text-gray-100 mb-1">
Continue your booking
</h1>
<p className="text-sm text-center text-gray-500 dark:text-gray-400 mb-8">
Choose how you&apos;d like to proceed
</p>
{/* Options Grid */}
<div className="grid md:grid-cols-2 gap-8 mb-8">
{/* Sign In Option */}
<div
onClick={handleSignIn}
className="card-interactive group"
<div className="flex flex-col gap-3">
<Tooltip content={[
'Saved passenger details',
'View booking history',
'Faster future bookings',
]}>
<button
onClick={() => router.push('/login?redirect=/booking/passengers')}
className="w-full flex items-center justify-center gap-2.5 px-5 py-3.5 bg-primary hover:bg-primary/90 active:scale-[0.98] text-white font-semibold rounded-xl transition-all shadow-md shadow-primary/20"
>
<div className="text-center">
<div className="w-20 h-20 bg-gradient-to-br from-primary to-primary-700 rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-lg group-hover:shadow-xl transition-shadow">
<LogIn className="w-10 h-10 text-white" />
</div>
<h2 className="text-2xl font-bold mb-3 text-gray-900 dark:text-gray-100">Sign in</h2>
<p className="text-gray-600 dark:text-gray-400 mb-6 text-balance">
Access your saved passenger profiles and booking history for faster checkout
</p>
{/* Benefits */}
<div className="space-y-3 mb-6 text-left">
<div className="flex items-start gap-3">
<div className="w-5 h-5 bg-primary-100 dark:bg-primary-900/30 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
<span className="text-primary dark:text-gray-300 text-xs">✓</span>
</div>
<span className="text-sm text-gray-700 dark:text-gray-300">Saved passenger details</span>
</div>
<div className="flex items-start gap-3">
<div className="w-5 h-5 bg-primary-100 dark:bg-primary-900/30 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
<span className="text-primary dark:text-gray-300 text-xs">✓</span>
</div>
<span className="text-sm text-gray-700 dark:text-gray-300">View booking history</span>
</div>
<div className="flex items-start gap-3">
<div className="w-5 h-5 bg-primary-100 dark:bg-primary-900/30 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
<span className="text-primary dark:text-gray-300 text-xs">✓</span>
</div>
<span className="text-sm text-gray-700 dark:text-gray-300">Faster future bookings</span>
</div>
</div>
<button className="btn-primary w-full text-center">
Sign in to continue
</button>
</div>
</div>
{/* Guest Option */}
<div
onClick={handleGuest}
className="card-interactive group"
>
<div className="text-center">
<div className="w-20 h-20 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-600 rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-lg group-hover:shadow-xl transition-shadow">
<UserPlus className="w-10 h-10 text-gray-700 dark:text-gray-300" />
</div>
<h2 className="text-2xl font-bold mb-3 text-gray-900 dark:text-gray-100">Continue as guest</h2>
<p className="text-gray-600 dark:text-gray-400 mb-6 text-balance">
Book without an account. You can create one after completing your booking
</p>
{/* Benefits */}
<div className="space-y-3 mb-6 text-left">
<div className="flex items-start gap-3">
<div className="w-5 h-5 bg-gray-200 dark:bg-gray-700 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
<Clock className="w-3 h-3 text-gray-600 dark:text-gray-400" />
</div>
<span className="text-sm text-gray-700 dark:text-gray-300">Quick checkout process</span>
</div>
<div className="flex items-start gap-3">
<div className="w-5 h-5 bg-gray-200 dark:bg-gray-700 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
<Shield className="w-3 h-3 text-gray-600 dark:text-gray-400" />
</div>
<span className="text-sm text-gray-700 dark:text-gray-300">No account required</span>
</div>
<div className="flex items-start gap-3">
<div className="w-5 h-5 bg-gray-200 dark:bg-gray-700 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
<UserPlus className="w-3 h-3 text-gray-600 dark:text-gray-400" />
</div>
<span className="text-sm text-gray-700 dark:text-gray-300">Create account later (optional)</span>
</div>
</div>
<button className="btn-secondary w-full text-center">
Continue as guest
</button>
</div>
</div>
</div>
{/* Back Link */}
<div className="text-center">
<button
onClick={() => router.push('/booking/results')}
className="btn-ghost"
>
← Back to Results
<LogIn className="w-5 h-5 flex-shrink-0" />
Sign in
</button>
</div>
</Tooltip>
<Tooltip content={[
'No account required',
'Quick checkout',
'Create account later (optional)',
]}>
<button
onClick={() => router.push('/booking/passengers')}
className="w-full flex items-center justify-center gap-2.5 px-5 py-3.5 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 active:scale-[0.98] text-gray-800 dark:text-gray-100 font-semibold rounded-xl border border-gray-200 dark:border-gray-700 transition-all shadow-sm"
>
<UserPlus className="w-5 h-5 flex-shrink-0" />
Continue as guest
</button>
</Tooltip>
</div>
<div className="mt-8 text-center">
<button
onClick={() => router.push('/booking/results')}
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" />
Back to results
</button>
</div>
</div>
</div>

5
apps/edr-passenger-web/portal/src/app/booking/passengers/page.tsx
View File

@@ -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 } from 'lucide-react';
import { CheckCircle, ExternalLink, Loader2, CalendarDays, X, Globe, ChevronLeft } 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'];
@@ -951,7 +951,8 @@ export default function PassengersPage() {
...(searchCriteria.promoCode && { promoCode: searchCriteria.promoCode }),
});
router.push(`/booking/results?${params}`);
}} className="btn-secondary flex-1" disabled={saving}>
}} className="btn-secondary flex-1 flex items-center justify-center gap-2" disabled={saving}>
<ChevronLeft className="w-4 h-4" />
Back
</button>
<button type="submit" className="btn-primary flex-1" disabled={saving}>

631
apps/edr-passenger-web/portal/src/app/booking/payment/page.tsx
View File

@@ -14,6 +14,7 @@ import {
Wallet,
Loader2,
CheckCircle,
ChevronLeft,
} from "lucide-react";
const getIconForMethod = (methodId: string) => {
@@ -22,21 +23,33 @@ const getIconForMethod = (methodId: string) => {
return Smartphone;
};
const NATIONALITY_TO_CURRENCY: Record<string, 'ETB' | 'DJF' | 'USD'> = {
ETHIOPIAN: 'ETB',
DJIBOUTIAN: 'DJF',
};
export default function PaymentPage() {
const router = useRouter();
const { bookingId, pnr, selectedSchedule, outboundSchedule, inboundSchedule, passengers, searchCriteria } = useBookingStore();
const { selectedCurrency, setPaymentIntent, updateStatus } =
usePaymentStore();
const { setPaymentIntent, updateStatus, setCurrency } = usePaymentStore();
const [selectedMethod, setSelectedMethod] = useState<string | null>(null);
const [isProcessing, setIsProcessing] = useState(false);
const [paymentError, setPaymentError] = useState<string | null>(null);
const isRoundTrip = searchCriteria?.tripType === 'ROUND_TRIP';
const displayCurrency: 'ETB' | 'DJF' | 'USD' =
NATIONALITY_TO_CURRENCY[searchCriteria?.nationality?.toUpperCase() ?? ''] ?? 'USD';
// Keep payment store in sync so the mutation picks up the right currency.
useEffect(() => {
setCurrency(displayCurrency);
}, [displayCurrency, setCurrency]);
const { data: paymentMethods = [], isLoading: loadingMethods, error } = useQuery<PaymentMethod[]>({
queryKey: ['paymentMethods'],
queryKey: ['paymentMethods', displayCurrency],
queryFn: async () => {
const response = await apiClient.get<PaymentMethod[]>('/payments/methods');
const response = await apiClient.get<PaymentMethod[]>(`/payments/methods?currency=${displayCurrency}`);
return Array.isArray(response) ? response : [];
},
});
@@ -120,7 +133,7 @@ export default function PaymentPage() {
bookingId,
method: selectedMethod,
paymentMethodId: selectedPaymentMethod.id,
currency: selectedCurrency,
currency: displayCurrency,
amountMinor: totalAmount,
});
};
@@ -152,428 +165,252 @@ export default function PaymentPage() {
);
}
// Reusable journey leg timeline block
const JourneyLeg = ({ schedule, color = 'primary', label, fare }: { schedule: any; color?: string; label: string; fare?: number }) => {
const dotColor = color === 'blue' ? 'border-blue-500' : 'border-primary';
const lineColor = color === 'blue' ? 'from-blue-500' : 'from-primary';
const badgeBg = color === 'blue' ? 'bg-blue-500/10 text-blue-600 dark:text-blue-400' : 'bg-primary/10 text-primary';
return (
<div>
<div className="flex items-center gap-2 mb-3">
<div className={`w-2 h-2 rounded-full ${color === 'blue' ? 'bg-blue-500' : 'bg-primary'}`} />
<span className="text-sm font-semibold text-gray-700 dark:text-gray-300">{label}</span>
<span className={`ml-auto text-xs px-2 py-0.5 rounded-full font-medium ${badgeBg}`}>
{schedule?.selectedSeatClassName?.replace(/_/g, ' ') || 'Standard'}
</span>
</div>
<div className="flex">
<div className="flex flex-col items-center w-7 flex-shrink-0">
<div className={`w-3 h-3 rounded-full border-4 ${dotColor} bg-white dark:bg-gray-900 z-10`} />
<div className={`w-0.5 flex-1 bg-gradient-to-b ${lineColor} via-gray-300 dark:via-gray-700 to-gray-300 my-1.5`} />
<div className="w-3 h-3 rounded-full border-4 border-gray-400 dark:border-gray-600 bg-white dark:bg-gray-900 z-10" />
</div>
<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') : '--:--'}
</div>
<div className="text-xs text-gray-500 dark:text-gray-400">
{schedule?.departureTime ? format(new Date(schedule.departureTime), 'EEE, MMM d') : ''}
</div>
<div className="text-sm font-semibold text-gray-900 dark:text-white mt-1">{schedule?.origin}</div>
</div>
<div className="pb-5 flex items-center gap-4 text-xs text-gray-500 dark:text-gray-400">
<span>{schedule?.duration}</span>
<span>Train {schedule?.trainNumber}</span>
</div>
<div>
<div className="text-lg font-bold text-gray-900 dark:text-white">
{schedule?.arrivalTime ? format(new Date(schedule.arrivalTime), 'HH:mm') : '--:--'}
</div>
<div className="text-xs text-gray-500 dark:text-gray-400">
{schedule?.arrivalTime ? format(new Date(schedule.arrivalTime), 'EEE, MMM d') : ''}
</div>
<div className="text-sm font-semibold text-gray-900 dark:text-white mt-1">{schedule?.destination}</div>
</div>
</div>
</div>
{fare !== undefined && (
<div className="mt-3 pt-2 border-t border-gray-100 dark:border-gray-800 flex justify-between text-sm">
<span className="text-gray-500 dark:text-gray-400">{label} fare</span>
<span className="font-semibold text-gray-900 dark:text-gray-100">{displayCurrency} {(fare / 100).toFixed(2)}</span>
</div>
)}
</div>
);
};
// Order summary card — used in right sticky column (desktop) and inline (mobile)
const OrderSummary = () => (
<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>
</h2>
{isRoundTrip ? (
<div className="space-y-4">
<JourneyLeg schedule={outboundSchedule} label="Outbound" fare={outboundBaseFare} />
<div className="border-t-2 border-dashed border-gray-200 dark:border-gray-700 pt-4">
<JourneyLeg schedule={inboundSchedule} color="blue" label="Return" fare={inboundBaseFare} />
</div>
</div>
) : (
<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">
<span className="font-bold text-gray-900 dark:text-gray-100">Total</span>
<span className="text-xl font-bold text-primary">{displayCurrency} {(totalAmount / 100).toFixed(2)}</span>
</div>
</div>
{/* Pay + back buttons — desktop sidebar only */}
<div className="hidden lg:flex flex-col gap-2 pt-1">
{paymentError && (
<p className="text-red-600 dark:text-red-400 text-xs">⚠️ {paymentError}</p>
)}
<button
onClick={handlePayment}
disabled={!selectedMethod || isProcessing}
className="btn-primary w-full py-3 font-semibold disabled:opacity-50 disabled:cursor-not-allowed"
>
{isProcessing ? (
<span className="flex items-center justify-center gap-2">
<Loader2 className="w-4 h-4 animate-spin" /> Processing...
</span>
) : (
`Pay ${displayCurrency} ${(totalAmount / 100).toFixed(2)}`
)}
</button>
<button onClick={() => router.back()} disabled={isProcessing} className="btn-secondary w-full flex items-center justify-center gap-2">
<ChevronLeft className="w-4 h-4" />
Back
</button>
<p className="text-xs text-gray-500 dark:text-gray-400 text-center pt-1">
🔒 Secure & encrypted payment
</p>
</div>
</div>
);
return (
<div className="min-h-screen bg-gray-50 dark:bg-gray-900 py-12">
<div className="min-h-screen bg-gray-50 dark:bg-gray-900 py-6 pb-28 lg:pb-10">
<div className="container mx-auto px-4">
<div className="max-w-6xl mx-auto">
<h1 className="text-3xl font-bold mb-2 text-gray-900 dark:text-gray-100">
Complete payment
</h1>
<p className="text-gray-600 dark:text-gray-400 mb-6">
Booking reference:{" "}
<span className="font-bold text-primary">{pnr}</span>
</p>
<h1 className="text-2xl font-bold mb-4 text-gray-900 dark:text-gray-100">Complete payment</h1>
{/* Payment Processing Overlay */}
{isProcessing && (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
<div className="bg-white dark:bg-gray-800 rounded-lg p-8 max-w-md text-center">
<div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50">
<div className="bg-white dark:bg-gray-800 rounded-xl p-8 max-w-sm w-full mx-4 text-center shadow-2xl">
{paymentMutation.isSuccess ? (
<>
<CheckCircle className="w-16 h-16 text-green-600 mx-auto mb-4" />
<h3 className="text-xl font-bold mb-2 text-gray-900 dark:text-gray-100">
Payment successful!
</h3>
<p className="text-gray-600 dark:text-gray-400 mb-4">
Redirecting to confirmation...
</p>
<Loader2 className="w-8 h-8 text-primary animate-spin mx-auto" />
<CheckCircle className="w-14 h-14 text-green-500 mx-auto mb-4" />
<h3 className="text-lg font-bold mb-1 text-gray-900 dark:text-gray-100">Payment successful!</h3>
<p className="text-sm text-gray-500 dark:text-gray-400 mb-4">Redirecting to confirmation...</p>
<Loader2 className="w-6 h-6 text-primary animate-spin mx-auto" />
</>
) : (
<>
<Loader2 className="w-16 h-16 text-primary animate-spin mx-auto mb-4" />
<h3 className="text-xl font-bold mb-2 text-gray-900 dark:text-gray-100">
Processing payment
</h3>
<p className="text-gray-600 dark:text-gray-400">
Please wait while we process your payment...
</p>
<Loader2 className="w-14 h-14 text-primary animate-spin mx-auto mb-4" />
<h3 className="text-lg font-bold mb-1 text-gray-900 dark:text-gray-100">Processing payment</h3>
<p className="text-sm text-gray-500 dark:text-gray-400">Please wait...</p>
</>
)}
</div>
</div>
)}
{/* Order Summary */}
<div className="card mb-6">
<h2 className="text-xl font-semibold mb-6 text-gray-900 dark:text-gray-100">
Order summary
</h2>
<div className="space-y-6">
{isRoundTrip ? (
<>
{/* Outbound Journey */}
<div>
<div className="flex items-center gap-2 mb-4">
<div className="w-2 h-2 bg-primary rounded-full" />
<span className="text-sm font-semibold text-gray-700 dark:text-gray-300">Outbound Journey</span>
<span className="ml-auto text-xs px-2 py-0.5 bg-primary/10 text-primary rounded-full font-medium">
{outboundSchedule?.selectedSeatClassName?.replace(/_/g, ' ') || 'Standard'}
</span>
</div>
{/* Flight-style timeline */}
<div className="flex">
{/* Left column: Timeline with dots and line */}
<div className="flex flex-col items-center w-8 flex-shrink-0">
{/* Origin dot */}
<div className="w-4 h-4 rounded-full border-4 border-primary bg-white dark:bg-gray-900 z-10" />
{/* Vertical line */}
<div className="w-0.5 flex-1 bg-gradient-to-b from-primary via-gray-300 dark:via-gray-700 to-gray-300 dark:to-gray-700 my-2" />
{/* Destination dot */}
<div className="w-4 h-4 rounded-full border-4 border-gray-400 dark:border-gray-600 bg-white dark:bg-gray-900 z-10" />
</div>
{/* Right column: Content */}
<div className="flex-1 flex flex-col">
{/* 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') : '--:--'}
</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'}
</div>
<div className="text-base font-semibold text-gray-900 dark:text-white mt-2">
{outboundSchedule?.origin}
</div>
</div>
{/* Two-column grid */}
<div className="lg:grid lg:grid-cols-3 lg:gap-6 lg:items-start">
{/* Journey Info */}
<div className="pb-8">
<div className="flex items-center gap-6 text-sm text-gray-600 dark:text-gray-400">
<div className="flex items-center gap-1.5">
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span className="font-medium">{outboundSchedule?.duration}</span>
</div>
<div className="flex items-center gap-1.5">
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
<span className="font-medium">Train {outboundSchedule?.trainNumber}</span>
</div>
</div>
</div>
{/* Destination */}
<div>
<div className="text-2xl font-bold text-gray-900 dark:text-white">
{outboundSchedule?.arrivalTime ? format(new Date(outboundSchedule.arrivalTime), 'HH:mm') : '--:--'}
</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'}
</div>
<div className="text-base font-semibold text-gray-900 dark:text-white mt-2">
{outboundSchedule?.destination}
</div>
</div>
</div>
</div>
<div className="mt-4 pt-3 border-t border-gray-100 dark:border-gray-800">
<div className="flex justify-between text-sm">
<span className="text-gray-600 dark:text-gray-400">Outbound fare</span>
<span className="font-semibold text-gray-900 dark:text-gray-100">ETB {(outboundBaseFare / 100).toFixed(2)}</span>
</div>
</div>
{/* Left column — payment methods (2/3 width) */}
<div className="lg:col-span-2 space-y-4">
<div className="card">
<h2 className="text-base font-bold text-gray-900 dark:text-gray-100 mb-4">Select payment method</h2>
{loadingMethods ? (
<div className="flex items-center justify-center py-10 gap-2">
<Loader2 className="w-6 h-6 text-primary animate-spin" />
<span className="text-sm text-gray-500 dark:text-gray-400">Loading payment methods...</span>
</div>
{/* Return Journey */}
<div className="pt-4 border-t-2 border-dashed border-gray-200 dark:border-gray-700">
<div className="flex items-center gap-2 mb-4">
<div className="w-2 h-2 bg-blue-500 rounded-full" />
<span className="text-sm font-semibold text-gray-700 dark:text-gray-300">Return Journey</span>
<span className="ml-auto text-xs px-2 py-0.5 bg-blue-500/10 text-blue-600 dark:text-blue-400 rounded-full font-medium">
{inboundSchedule?.selectedSeatClassName?.replace(/_/g, ' ') || 'Standard'}
</span>
</div>
{/* Flight-style timeline */}
<div className="flex">
{/* Left column: Timeline with dots and line */}
<div className="flex flex-col items-center w-8 flex-shrink-0">
{/* Origin dot */}
<div className="w-4 h-4 rounded-full border-4 border-blue-500 bg-white dark:bg-gray-900 z-10" />
{/* Vertical line */}
<div className="w-0.5 flex-1 bg-gradient-to-b from-blue-500 via-gray-300 dark:via-gray-700 to-gray-300 dark:to-gray-700 my-2" />
{/* Destination dot */}
<div className="w-4 h-4 rounded-full border-4 border-gray-400 dark:border-gray-600 bg-white dark:bg-gray-900 z-10" />
</div>
{/* Right column: Content */}
<div className="flex-1 flex flex-col">
{/* 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') : '--:--'}
</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'}
</div>
<div className="text-base font-semibold text-gray-900 dark:text-white mt-2">
{inboundSchedule?.origin}
</div>
</div>
{/* Journey Info */}
<div className="pb-8">
<div className="flex items-center gap-6 text-sm text-gray-600 dark:text-gray-400">
<div className="flex items-center gap-1.5">
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span className="font-medium">{inboundSchedule?.duration}</span>
</div>
<div className="flex items-center gap-1.5">
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
<span className="font-medium">Train {inboundSchedule?.trainNumber}</span>
</div>
</div>
</div>
{/* Destination */}
<div>
<div className="text-2xl font-bold text-gray-900 dark:text-white">
{inboundSchedule?.arrivalTime ? format(new Date(inboundSchedule.arrivalTime), 'HH:mm') : '--:--'}
</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'}
</div>
<div className="text-base font-semibold text-gray-900 dark:text-white mt-2">
{inboundSchedule?.destination}
</div>
</div>
</div>
</div>
<div className="mt-4 pt-3 border-t border-gray-100 dark:border-gray-800">
<div className="flex justify-between text-sm">
<span className="text-gray-600 dark:text-gray-400">Return fare</span>
<span className="font-semibold text-gray-900 dark:text-gray-100">ETB {(inboundBaseFare / 100).toFixed(2)}</span>
</div>
</div>
) : error ? (
<div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4">
<p className="text-red-800 dark:text-red-200 text-sm">Failed to load payment methods. Please refresh.</p>
</div>
</>
) : (
<>
{/* One-Way Journey */}
<div>
<div className="flex items-center gap-2 mb-4">
<div className="w-2 h-2 bg-primary rounded-full" />
<span className="text-sm font-semibold text-gray-700 dark:text-gray-300">Your Journey</span>
<span className="ml-auto text-xs px-2 py-0.5 bg-primary/10 text-primary rounded-full font-medium">
{selectedSchedule?.selectedSeatClassName?.replace(/_/g, ' ') || 'Standard'}
</span>
</div>
{/* Flight-style timeline */}
<div className="flex">
{/* Left column: Timeline with dots and line */}
<div className="flex flex-col items-center w-8 flex-shrink-0">
{/* Origin dot */}
<div className="w-4 h-4 rounded-full border-4 border-primary bg-white dark:bg-gray-900 z-10" />
{/* Vertical line */}
<div className="w-0.5 flex-1 bg-gradient-to-b from-primary via-gray-300 dark:via-gray-700 to-gray-300 dark:to-gray-700 my-2" />
{/* Destination dot */}
<div className="w-4 h-4 rounded-full border-4 border-gray-400 dark:border-gray-600 bg-white dark:bg-gray-900 z-10" />
</div>
{/* Right column: Content */}
<div className="flex-1 flex flex-col">
{/* 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') : '--:--'}
</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'}
</div>
<div className="text-base font-semibold text-gray-900 dark:text-white mt-2">
{selectedSchedule?.origin}
</div>
</div>
{/* Journey Info */}
<div className="pb-8">
<div className="flex items-center gap-6 text-sm text-gray-600 dark:text-gray-400">
<div className="flex items-center gap-1.5">
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span className="font-medium">{selectedSchedule?.duration}</span>
</div>
<div className="flex items-center gap-1.5">
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
<span className="font-medium">Train {selectedSchedule?.trainNumber}</span>
</div>
</div>
</div>
{/* Destination */}
<div>
<div className="text-2xl font-bold text-gray-900 dark:text-white">
{selectedSchedule?.arrivalTime ? format(new Date(selectedSchedule.arrivalTime), 'HH:mm') : '--:--'}
</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'}
</div>
<div className="text-base font-semibold text-gray-900 dark:text-white mt-2">
{selectedSchedule?.destination}
</div>
</div>
</div>
</div>
) : paymentMethods.length === 0 ? (
<div className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4">
<p className="text-yellow-800 dark:text-yellow-200 text-sm">No payment methods available at the moment.</p>
</div>
</>
)}
{/* Passengers and Total */}
<div className="pt-4 border-t-2 border-gray-200 dark:border-gray-700">
<div className="flex justify-between text-sm mb-3">
<span className="text-gray-600 dark:text-gray-400">
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-3 border-t border-gray-200 dark:border-gray-700">
<span className="text-base font-bold text-gray-900 dark:text-gray-100">
Total amount
</span>
<span className="text-2xl font-bold text-primary dark:text-gray-100">
ETB {(totalAmount / 100).toFixed(2)}
</span>
</div>
</div>
</div>
</div>
{/* Payment Methods */}
<div className="card mb-6">
<h2 className="text-xl font-semibold mb-4 text-gray-900 dark:text-gray-100">
Select payment method
</h2>
{loadingMethods ? (
<div className="flex justify-center py-8">
<Loader2 className="w-8 h-8 text-primary animate-spin" />
<p className="ml-2 text-gray-600 dark:text-gray-400">Loading payment methods...</p>
</div>
) : error ? (
<div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4">
<p className="text-red-800 dark:text-red-200 text-sm">
Failed to load payment methods. Please refresh the page.
</p>
</div>
) : paymentMethods.length === 0 ? (
<div className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4">
<p className="text-yellow-800 dark:text-yellow-200 text-sm">
No payment methods available at the moment.
</p>
</div>
) : (
<div className="space-y-3">
{paymentMethods.map((method) => {
const Icon = getIconForMethod(method.type);
const isSelected = selectedMethod === method.type;
return (
<button
key={method.id}
onClick={() => setSelectedMethod(method.type)}
disabled={isProcessing || !method.enabled}
className={`w-full p-4 rounded-lg border-2 transition-all text-left ${
isSelected
? "border-primary bg-primary/10 dark:bg-primary/20 shadow-md"
: "border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 hover:border-primary dark:hover:border-primary"
} ${isProcessing || !method.enabled ? "opacity-50 cursor-not-allowed" : ""}`}
>
<div className="flex items-center gap-3">
<div
className={`w-12 h-12 rounded-lg flex items-center justify-center ${
) : (
<div className="space-y-3">
{paymentMethods.map((method) => {
const Icon = getIconForMethod(method.type);
const isSelected = selectedMethod === method.type;
return (
<button
key={method.id}
onClick={() => setSelectedMethod(method.type)}
disabled={isProcessing || !method.enabled}
className={`w-full p-4 rounded-xl border-2 transition-all text-left ${
isSelected
? "bg-primary"
: "bg-gray-100 dark:bg-gray-700"
}`}
? 'border-primary bg-primary/8 dark:bg-primary/15 shadow-md'
: 'border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 hover:border-primary/50'
} ${isProcessing || !method.enabled ? 'opacity-50 cursor-not-allowed' : ''}`}
>
<Icon
className={`w-6 h-6 ${isSelected ? "text-white" : "text-primary"}`}
/>
</div>
<div className="flex-1">
<p className="font-semibold text-gray-900 dark:text-gray-100">
{method.displayName}
</p>
<p className="text-sm text-gray-600 dark:text-gray-400">
{method.region} · {method.currency}
</p>
</div>
{isSelected && (
<div className="w-6 h-6 bg-primary rounded-full flex items-center justify-center">
<CheckCircle className="w-5 h-5 text-white" />
<div className="flex items-center gap-3">
<div className={`w-11 h-11 rounded-lg flex items-center justify-center flex-shrink-0 ${isSelected ? 'bg-primary' : 'bg-gray-100 dark:bg-gray-700'}`}>
<Icon className={`w-5 h-5 ${isSelected ? 'text-white' : 'text-primary'}`} />
</div>
<div className="flex-1 min-w-0">
<p className="font-semibold text-gray-900 dark:text-gray-100">{method.displayName}</p>
<p className="text-xs text-gray-500 dark:text-gray-400">{method.region} · {method.currency}</p>
</div>
{isSelected && (
<CheckCircle className="w-5 h-5 text-primary flex-shrink-0" />
)}
</div>
)}
</div>
</button>
);
})}
</button>
);
})}
</div>
)}
</div>
)}
</div>
{/* Action Buttons */}
<div className="flex flex-col gap-3">
<button
onClick={handlePayment}
disabled={!selectedMethod || isProcessing}
className={`btn-primary w-full py-4 text-lg font-semibold ${
!selectedMethod || isProcessing
? "opacity-50 cursor-not-allowed"
: ""
}`}
>
{isProcessing ? (
<span className="flex items-center justify-center gap-2">
<Loader2 className="w-5 h-5 animate-spin" />
Processing...
</span>
) : (
`Pay ETB ${(totalAmount / 100).toFixed(2)}`
)}
</button>
<button
onClick={() => router.back()}
disabled={isProcessing}
className="btn-secondary w-full py-2"
>
Back to review
</button>
</div>
{/* Error Message */}
{paymentError && (
<div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 mt-4">
<p className="text-red-800 dark:text-red-200 text-sm font-medium">
⚠️ {paymentError}
</p>
{/* Order summary inline — mobile only */}
<div className="lg:hidden">
<OrderSummary />
</div>
</div>
)}
{/* Security Notice */}
<div className="mt-6 p-4 bg-gray-100 dark:bg-gray-800 rounded-lg">
<p className="text-xs text-gray-600 dark:text-gray-400 text-center">
🔒 Your payment is secure and encrypted. We do not store your
payment information.
</p>
</div>
{/* Right column — sticky order summary (desktop only) */}
<div className="hidden lg:block">
<div className="sticky top-6">
<OrderSummary />
</div>
</div>
</div>{/* end grid */}
</div>
</div>
{/* Mobile sticky bottom bar */}
<div className="lg:hidden fixed bottom-0 inset-x-0 bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700 px-4 py-3 z-40 shadow-lg">
<div className="flex items-center justify-between mb-2.5">
<span className="text-sm text-gray-600 dark:text-gray-400">Total</span>
<span className="text-lg font-bold text-primary">{displayCurrency} {(totalAmount / 100).toFixed(2)}</span>
</div>
{paymentError && (
<p className="text-red-600 dark:text-red-400 text-xs mb-2">⚠️ {paymentError}</p>
)}
<div className="flex gap-3">
<button onClick={() => router.back()} disabled={isProcessing} className="btn-secondary flex-1 py-2.5 flex items-center justify-center gap-2">
<ChevronLeft className="w-4 h-4" />
Back
</button>
<button
onClick={handlePayment}
disabled={!selectedMethod || isProcessing}
className="btn-primary flex-1 py-2.5 disabled:opacity-50 disabled:cursor-not-allowed"
>
{isProcessing ? (
<span className="flex items-center justify-center gap-1.5">
<Loader2 className="w-4 h-4 animate-spin" /> Processing...
</span>
) : (
`Pay ${displayCurrency} ${(totalAmount / 100).toFixed(2)}`
)}
</button>
</div>
</div>
</div>
);
}

5
apps/edr-passenger-web/portal/src/app/booking/payment/telebirr/failure/page.tsx
View File

@@ -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 } from 'lucide-react';
import { XCircle, Loader2, RefreshCw, ChevronLeft } from 'lucide-react';
function TelebirrFailureContent() {
const router = useRouter();
@@ -36,7 +36,8 @@ function TelebirrFailureContent() {
Try Again
</button>
<button onClick={() => router.push('/booking/review')}
className="btn-secondary w-full">
className="btn-secondary w-full flex items-center justify-center gap-2">
<ChevronLeft className="w-4 h-4" />
Back to Review
</button>
</div>

5
apps/edr-passenger-web/portal/src/app/booking/payment/waafi/failure/page.tsx
View File

@@ -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 } from 'lucide-react';
import { XCircle, Loader2, RefreshCw, ChevronLeft } from 'lucide-react';
function WaafiFailureContent() {
const router = useRouter();
@@ -39,7 +39,8 @@ function WaafiFailureContent() {
Try Again
</button>
<button onClick={() => router.push('/booking/review')}
className="btn-secondary w-full">
className="btn-secondary w-full flex items-center justify-center gap-2">
<ChevronLeft className="w-4 h-4" />
Back to Review
</button>
</div>

38
apps/edr-passenger-web/portal/src/app/booking/results/page.tsx
View File

@@ -159,12 +159,17 @@ export default function ResultsPage() {
// Find the coach type to get pricing info
const coachType = schedule.coachTypes?.find(ct => ct.coachTypeCode === selectedCoachType.code);
const minFare = coachType?.classes.length ? Math.min(...coachType.classes.map(c => c.baseFareMinor)) : 0;
// Use displayAmountMinor (passenger's currency) so stored fare matches what the card showed.
const minFare = coachType?.classes.length
? Math.min(...coachType.classes.map(c => c.displayAmountMinor ?? c.baseFareMinor))
: 0;
const fareCurrency: string =
coachType?.classes[0]?.displayCurrency ?? schedule.displayCurrency ?? 'ETB';
const hours = Math.floor((schedule.durationMinutes || 0) / 60);
const minutes = (schedule.durationMinutes || 0) % 60;
const durationStr = `${hours}h ${minutes}m`;
const scheduleData = {
id: scheduleId,
trainNumber: schedule.trainNumber,
@@ -175,6 +180,7 @@ export default function ResultsPage() {
duration: durationStr,
baseFareAdult: minFare,
baseFareChild: minFare,
displayCurrency: fareCurrency,
selectedSeatClass: selectedCoachType.name,
selectedSeatClassName: selectedCoachType.name,
selectedCoachTypeId: selectedCoachType.id,
@@ -213,13 +219,22 @@ export default function ResultsPage() {
const scheduleId = schedule.scheduleId || schedule.id || '';
const selectedCoachType = selectedCoachTypes[scheduleId];
// Calculate lowest fare from coach types
// Calculate lowest fare and display currency from coach types / faresByClass.
// Prefer displayAmountMinor (passenger's own currency) over baseFareMinor (ETB internal).
let lowestFare = null;
let displayCurrency = schedule.displayCurrency || 'ETB';
if (schedule.coachTypes?.length) {
const allFares = schedule.coachTypes.flatMap(ct => ct.classes.map(c => c.baseFareMinor)).filter(f => f > 0);
const allClasses = schedule.coachTypes.flatMap(ct => ct.classes);
const allFares = allClasses.map(c => c.displayAmountMinor ?? c.baseFareMinor).filter(f => f > 0);
lowestFare = allFares.length ? Math.min(...allFares) : null;
const firstWithCurrency = allClasses.find(c => c.displayCurrency);
if (firstWithCurrency?.displayCurrency) displayCurrency = firstWithCurrency.displayCurrency;
} else if (schedule.faresByClass?.length) {
lowestFare = Math.min(...schedule.faresByClass.map((f: any) => f.baseFareMinor).filter((fare: number) => fare > 0));
lowestFare = Math.min(...schedule.faresByClass.map(f => f.displayAmountMinor ?? f.baseFareMinor).filter(f => f > 0));
const firstWithCurrency = schedule.faresByClass.find(f => f.displayCurrency);
if (firstWithCurrency?.displayCurrency) displayCurrency = firstWithCurrency.displayCurrency;
} else if (schedule.combinedMinFareDisplay) {
lowestFare = schedule.combinedMinFareDisplay;
}
const hours = Math.floor((schedule.durationMinutes || 0) / 60);
const minutes = (schedule.durationMinutes || 0) % 60;
@@ -287,7 +302,7 @@ export default function ResultsPage() {
<div className="text-center lg:text-right">
<div className="text-sm text-gray-600 dark:text-gray-400 mb-1">Starting from</div>
<div className="text-3xl font-bold text-primary">
{lowestFare ? `ETB ${(lowestFare / 100).toFixed(2)}` : 'N/A'}
{lowestFare ? `${displayCurrency} ${(lowestFare / 100).toFixed(2)}` : 'N/A'}
</div>
<div className="text-xs text-gray-500 dark:text-gray-400 mt-1 mb-4">per adult</div>
{selectedCoachType && (
@@ -536,7 +551,8 @@ export default function ResultsPage() {
<div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4 pt-2">
{coachTypes.map((coachType: any, index: number) => {
const isSelected = selectedCoachType?.id === coachType.coachTypeId;
const minPrice = coachType.classes.length ? Math.min(...coachType.classes.map((c: any) => c.baseFareMinor)) : 0;
const minPrice = coachType.classes.length ? Math.min(...coachType.classes.map((c: any) => c.displayAmountMinor ?? c.baseFareMinor)) : 0;
const coachCurrency: string = (coachType.classes[0] as any)?.displayCurrency ?? (classModal as any).displayCurrency ?? 'ETB';
const CoachIcon = getCoachIcon(coachType.coachTypeName);
return (
@@ -585,7 +601,7 @@ export default function ResultsPage() {
}`}>
{(minPrice / 100).toFixed(2)}
</span>
<span className="text-sm font-semibold text-gray-600 dark:text-gray-400">ETB</span>
<span className="text-sm font-semibold text-gray-600 dark:text-gray-400">{coachCurrency}</span>
</div>
</div>
</div>
@@ -615,10 +631,10 @@ export default function ResultsPage() {
</div>
<div className="flex items-baseline gap-1">
<span className="text-base font-bold tabular-nums text-gray-900 dark:text-white">
{(cls.baseFareMinor / 100).toFixed(2)}
{((cls.displayAmountMinor ?? cls.baseFareMinor) / 100).toFixed(2)}
</span>
<span className="text-xs text-gray-500 dark:text-gray-400 font-medium">
ETB
{cls.displayCurrency ?? coachCurrency}
</span>
</div>
</div>

231
apps/edr-passenger-web/portal/src/app/booking/review/page.tsx
View File

@@ -7,6 +7,7 @@ import { useMutation } from '@tanstack/react-query';
import { apiClient } from '@/lib/api-client';
import { format } from 'date-fns';
import { useState, useEffect } from 'react';
import { ChevronLeft } from 'lucide-react';
// Helper function to decode JWT token and extract passengerId
function getPassengerIdFromToken(token: string): string | null {
@@ -58,6 +59,14 @@ export default function ReviewPage() {
const isRoundTrip = searchCriteria?.tripType === 'ROUND_TRIP';
// Prefer the currency already stored on the selected schedule (set from search results).
// Fall back to deriving from nationality so the review page is never left with a stale value.
const NATIONALITY_TO_CURRENCY: Record<string, string> = { ETHIOPIAN: 'ETB', DJIBOUTIAN: 'DJF' };
const displayCurrency: string =
(isRoundTrip ? outboundSchedule?.displayCurrency : selectedSchedule?.displayCurrency) ??
NATIONALITY_TO_CURRENCY[searchCriteria?.nationality?.toUpperCase() ?? ''] ??
'USD';
useEffect(() => {
if (!seatHold?.expiresAt) return;
@@ -79,55 +88,54 @@ export default function ReviewPage() {
return () => clearInterval(interval);
}, [seatHold]);
const buildSeatLabel = (seat: any): string => {
const base: string = seat.number || seat.label || seat.seatNumber || '';
if (!base) return 'N/A';
const posMap: Record<string, string> = { lower: 'L', middle: 'M', upper: 'U' };
const suffix = seat.bedPosition ? (posMap[seat.bedPosition] ?? '') : '';
return suffix ? `${base}${suffix}` : base;
};
useEffect(() => {
const fetchSeatDetails = async () => {
try {
const details: Record<string, string> = {};
// Fetch outbound seat details
if (isRoundTrip && outboundSchedule?.id) {
const outboundSeatMap: any = await apiClient.get(`/seats/seatmap/${outboundSchedule.id}`);
const outboundCoaches = outboundSeatMap?.coaches || [];
const outboundSeats = outboundCoaches.flatMap((coach: any) => coach.seats || []);
const outboundSeats = (outboundSeatMap?.coaches || []).flatMap((coach: any) => coach.seats || []);
passengers.forEach(p => {
if ((p as any).outboundSeatId) {
const seat = outboundSeats.find((s: any) => s.id === (p as any).outboundSeatId);
if (seat) {
details[`outbound-${(p as any).outboundSeatId}`] = seat.number || seat.label || seat.seatNumber || 'N/A';
}
if (seat) details[`outbound-${(p as any).outboundSeatId}`] = buildSeatLabel(seat);
}
});
}
// Fetch inbound seat details
if (isRoundTrip && inboundSchedule?.id) {
const inboundSeatMap: any = await apiClient.get(`/seats/seatmap/${inboundSchedule.id}`);
const inboundCoaches = inboundSeatMap?.coaches || [];
const inboundSeats = inboundCoaches.flatMap((coach: any) => coach.seats || []);
const inboundSeats = (inboundSeatMap?.coaches || []).flatMap((coach: any) => coach.seats || []);
passengers.forEach(p => {
if ((p as any).inboundSeatId) {
const seat = inboundSeats.find((s: any) => s.id === (p as any).inboundSeatId);
if (seat) {
details[`inbound-${(p as any).inboundSeatId}`] = seat.number || seat.label || seat.seatNumber || 'N/A';
}
if (seat) details[`inbound-${(p as any).inboundSeatId}`] = buildSeatLabel(seat);
}
});
}
// Fetch one-way seat details
if (!isRoundTrip && selectedSchedule?.id) {
const seatMapData: any = await apiClient.get(`/seats/seatmap/${selectedSchedule.id}`);
const coaches = seatMapData?.coaches || [];
const allSeats = coaches.flatMap((coach: any) => coach.seats || []);
const allSeats = (seatMapData?.coaches || []).flatMap((coach: any) => coach.seats || []);
passengers.forEach(p => {
if (p.seatId) {
const seat = allSeats.find((s: any) => s.id === p.seatId);
if (seat) {
details[p.seatId] = seat.number || seat.label || seat.seatNumber || 'N/A';
}
if (seat) details[p.seatId] = buildSeatLabel(seat);
}
});
}
@@ -249,7 +257,7 @@ export default function ReviewPage() {
destinationStationId: searchCriteria.destinationStationId,
seatClassId: seatClassId,
bookingType: isRoundTrip ? 'ROUND_TRIP' : 'ONE_WAY',
displayCurrency: 'ETB',
displayCurrency: displayCurrency,
passengers: passengers.map((p) => {
const isEthiopian = p.nationality === 'ETHIOPIAN' || p.nationality === 'Ethiopian';
return {
@@ -288,7 +296,7 @@ export default function ReviewPage() {
destinationStationId: searchCriteria.destinationStationId,
seatClassId: seatClassId,
bookingType: isRoundTrip ? 'ROUND_TRIP' : 'ONE_WAY',
displayCurrency: 'ETB',
displayCurrency: displayCurrency,
passengers: passengers.map(p => {
const isEthiopian = p.nationality === 'ETHIOPIAN' || p.nationality === 'Ethiopian';
return {
@@ -373,21 +381,88 @@ export default function ReviewPage() {
}, 0);
const total = baseFare;
// Shared fare sidebar — rendered in right column (desktop) and inline (mobile)
const FareSidebar = () => (
<div className="card space-y-3">
<h2 className="text-base font-bold text-gray-900 dark:text-gray-100 pb-2 border-b border-gray-100 dark:border-gray-800">
Fare breakdown
</h2>
{passengers.map((p, i) => {
const outFare = outboundSchedule?.baseFareAdult || 0;
const inFare = inboundSchedule?.baseFareAdult || 0;
const onewayFare = selectedSchedule?.baseFareAdult || 0;
const passengerTotal = isRoundTrip ? outFare + inFare : onewayFare;
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}`}
</span>
<span className="text-sm font-semibold text-gray-900 dark:text-gray-100">
{displayCurrency} {(passengerTotal / 100).toFixed(2)}
</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</span>
<span>{displayCurrency} {(outFare / 100).toFixed(2)}</span>
</div>
<div className="flex justify-between">
<span>Return</span>
<span>{displayCurrency} {(inFare / 100).toFixed(2)}</span>
</div>
</div>
)}
</div>
);
})}
<div className="flex justify-between items-center pt-1 border-t border-gray-200 dark:border-gray-700">
<span className="font-bold text-gray-900 dark:text-gray-100">Total</span>
<span className="text-xl font-bold text-primary">{displayCurrency} {(total / 100).toFixed(2)}</span>
</div>
{/* Action buttons — visible only in desktop sidebar */}
<div className="hidden lg:flex flex-col gap-2 pt-2">
{createBookingMutation.isError && (
<p className="text-red-600 dark:text-red-400 text-xs">
⚠️ {createBookingMutation.error instanceof Error ? createBookingMutation.error.message : 'An error occurred. Please try again.'}
</p>
)}
<button
onClick={handleConfirm}
disabled={createBookingMutation.isPending}
className="btn-primary w-full"
>
{createBookingMutation.isPending ? 'Creating booking...' : `Confirm ${isAuthenticated ? '' : 'and pay'}`}
</button>
<button onClick={() => router.back()} className="btn-secondary w-full flex items-center justify-center gap-2">
<ChevronLeft className="w-4 h-4" />
Back
</button>
</div>
</div>
);
return (
<div className="min-h-screen bg-gray-50 dark:bg-gray-900 py-12">
<div className="min-h-screen bg-gray-50 dark:bg-gray-900 py-6 pb-28 lg:pb-10">
<div className="container mx-auto px-4">
<div className="max-w-6xl mx-auto">
<h1 className="text-3xl font-bold mb-6 text-gray-900 dark:text-gray-100">Review your booking</h1>
<h1 className="text-2xl font-bold mb-4 text-gray-900 dark:text-gray-100">Review your booking</h1>
{seatHold && (
<div className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4 mb-6">
<p className="text-yellow-800 dark:text-yellow-200">
⏱️ Your seats will be released in: <span className="font-bold">{timeLeft}</span>
</p>
<div className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-3 mb-4 flex items-center gap-2">
<span className="text-yellow-800 dark:text-yellow-200 text-sm">
⏱️ Seats held for: <span className="font-bold">{timeLeft}</span>
</span>
</div>
)}
<div className="space-y-6">
{/* Two-column layout on desktop */}
<div className="lg:grid lg:grid-cols-3 lg:gap-6 lg:items-start">
{/* Left column — trip details + passengers */}
<div className="lg:col-span-2 space-y-4">
{/* Outbound Trip Details */}
{isRoundTrip && outboundSchedule && (
<div className="card overflow-hidden">
@@ -646,67 +721,47 @@ export default function ReviewPage() {
</div>
</div>
<div className="card">
<h2 className="text-xl font-semibold mb-4 text-gray-900 dark:text-gray-100">Fare breakdown</h2>
<div className="space-y-3">
{passengers.map((p, i) => {
const outFare = outboundSchedule?.baseFareAdult || 0;
const inFare = inboundSchedule?.baseFareAdult || 0;
const onewayFare = selectedSchedule?.baseFareAdult || 0;
const passengerTotal = isRoundTrip ? outFare + inFare : onewayFare;
return (
<div key={i} className="border-b border-gray-100 dark:border-gray-800 pb-3 last:border-0">
<div className="flex justify-between mb-1">
<span className="text-sm font-medium text-gray-900 dark:text-gray-100">
{p.name || `Passenger ${i + 1}`}
</span>
<span className="text-sm font-semibold text-gray-900 dark:text-gray-100">
ETB {(passengerTotal / 100).toFixed(2)}
</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</span>
<span>ETB {(outFare / 100).toFixed(2)}</span>
</div>
<div className="flex justify-between">
<span>Return</span>
<span>ETB {(inFare / 100).toFixed(2)}</span>
</div>
</div>
)}
</div>
);
})}
<div className="flex justify-between text-lg font-bold border-t border-gray-200 dark:border-gray-700 pt-2">
<span className="text-gray-900 dark:text-gray-100">Total</span>
<span className="text-primary dark:text-gray-100">ETB {(total / 100).toFixed(2)}</span>
</div>
{/* Fare breakdown — visible only on mobile (desktop shows it in right column) */}
<div className="lg:hidden mt-4">
<FareSidebar />
</div>
</div>{/* end left column */}
{/* Right column — sticky fare card (desktop only) */}
<div className="hidden lg:block">
<div className="sticky top-6">
<FareSidebar />
</div>
</div>
<div className="flex gap-4">
<button onClick={() => router.back()} className="btn-secondary flex-1">
Back
</button>
<button
onClick={handleConfirm}
disabled={createBookingMutation.isPending}
className="btn-primary flex-1"
>
{createBookingMutation.isPending ? 'Creating booking...' : `Confirm ${isAuthenticated ? '' : 'and pay'}`}
</button>
</div>
{createBookingMutation.isError && (
<div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 mt-4">
<p className="text-red-800 dark:text-red-200 text-sm">
⚠️ {createBookingMutation.error instanceof Error ? createBookingMutation.error.message : 'An error occurred while creating your booking. Please try again.'}
</p>
</div>
)}
</div>
</div>{/* end grid */}
</div>
</div>
{/* Mobile sticky bottom bar */}
<div className="lg:hidden fixed bottom-0 inset-x-0 bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700 px-4 py-3 z-40 shadow-lg">
<div className="flex items-center justify-between mb-2.5">
<span className="text-sm text-gray-600 dark:text-gray-400">Total</span>
<span className="text-lg font-bold text-primary">{displayCurrency} {(total / 100).toFixed(2)}</span>
</div>
{createBookingMutation.isError && (
<p className="text-red-600 dark:text-red-400 text-xs mb-2">
⚠️ {createBookingMutation.error instanceof Error ? createBookingMutation.error.message : 'An error occurred. Please try again.'}
</p>
)}
<div className="flex gap-3">
<button onClick={() => router.back()} className="btn-secondary flex-1 py-2.5 flex items-center justify-center gap-2">
<ChevronLeft className="w-4 h-4" />
Back
</button>
<button
onClick={handleConfirm}
disabled={createBookingMutation.isPending}
className="btn-primary flex-1 py-2.5"
>
{createBookingMutation.isPending ? 'Creating...' : `Confirm ${isAuthenticated ? '' : '& pay'}`}
</button>
</div>
</div>
</div>

27
apps/edr-passenger-web/portal/src/app/booking/seats/page.tsx
View File

@@ -12,6 +12,15 @@ import Image from "next/image";
import CustomModal from "@/components/CustomModal";
const BED_POSITION_SUFFIX: Record<string, string> = { lower: 'L', middle: 'M', upper: 'U' };
const buildSeatLabel = (seat: any): string => {
const base: string = seat.number || seat.label || seat.seatNumber || '';
if (!base) return '';
const suffix = seat.bedPosition ? (BED_POSITION_SUFFIX[seat.bedPosition] ?? '') : '';
return suffix ? `${base}${suffix}` : base;
};
const BedCard = memo(({ bed, isSelected, onToggle }: any) => {
const seatLabel = bed.label || bed.seatNumber || bed.number || "?";
const bedPosition = bed.bedPosition || "";
@@ -364,11 +373,7 @@ export default function SeatsPage() {
return {
...p,
outboundSeatId: selectedSeats[i],
outboundSeatNumber:
seatData?.number ||
seatData?.label ||
seatData?.seatNumber ||
"",
outboundSeatNumber: seatData ? buildSeatLabel(seatData) : '',
};
});
setPassengers(updatedPassengers);
@@ -401,18 +406,13 @@ export default function SeatsPage() {
return {
...p,
inboundSeatId: selectedSeats[i],
inboundSeatNumber:
seatData?.number ||
seatData?.label ||
seatData?.seatNumber ||
"",
inboundSeatNumber: seatData ? buildSeatLabel(seatData) : '',
};
}
return {
...p,
seatId: selectedSeats[i],
seatNumber:
seatData?.number || seatData?.label || seatData?.seatNumber || "",
seatNumber: seatData ? buildSeatLabel(seatData) : '',
};
});
setPassengers(updatedPassengers);
@@ -456,8 +456,7 @@ export default function SeatsPage() {
return {
...p,
seatId: autoSelectedSeats[i],
seatNumber:
seatData?.number || seatData?.label || seatData?.seatNumber || "",
seatNumber: seatData ? buildSeatLabel(seatData) : '',
};
});
setPassengers(updatedPassengers);

1
apps/edr-passenger-web/portal/src/lib/booking-store.ts
View File

@@ -44,6 +44,7 @@ export interface SelectedSchedule {
duration: string;
baseFareAdult: number;
baseFareChild: number;
displayCurrency: string;
selectedSeatClass?: string;
selectedSeatClassName?: string;
}

7
apps/edr-passenger-web/portal/src/types/index.ts
View File

@@ -38,7 +38,7 @@ export interface Schedule {
baseFareChild?: number;
availableSeats?: number;
availabilityByClass?: Record<string, number>; // API returns this
faresByClass?: Array<{ seatClassName: string; baseFareMinor: number }>; // API returns this
faresByClass?: Array<{ seatClassName: string; baseFareMinor: number; displayCurrency?: string; displayAmountMinor?: number }>; // API returns this
coachTypes?: Array<{
coachId: string;
coachTypeName: string;
@@ -46,8 +46,13 @@ export interface Schedule {
classes: Array<{
name: string;
baseFareMinor: number;
displayCurrency?: string;
displayAmountMinor?: number;
}>;
}>;
displayCurrency?: string;
combinedMinFareMinor?: number;
combinedMinFareDisplay?: number;
serviceClass?: string;
status?: string;
hasAvailability?: boolean;