301 lines
11 KiB
TypeScript
301 lines
11 KiB
TypeScript
/**
|
|
* Public Booking Confirmation Page
|
|
*
|
|
* Allows carriers to accept booking requests via email link
|
|
* Route: /booking/confirm/:token
|
|
*/
|
|
|
|
'use client';
|
|
|
|
import { useState, useEffect, useCallback } from 'react';
|
|
import { useParams } from 'next/navigation';
|
|
import { useTranslations } from 'next-intl';
|
|
import { acceptCsvBooking, type CsvBookingResponse } from '@/lib/api/bookings';
|
|
|
|
export default function BookingConfirmPage() {
|
|
const params = useParams();
|
|
const token = params.token as string;
|
|
const t = useTranslations('bookingPortal.confirm');
|
|
const tCommon = useTranslations('bookingPortal.common');
|
|
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [booking, setBooking] = useState<CsvBookingResponse | null>(null);
|
|
|
|
const handleAccept = useCallback(async () => {
|
|
setError(null);
|
|
|
|
try {
|
|
const result = await acceptCsvBooking(token);
|
|
setBooking(result);
|
|
} catch (err) {
|
|
console.error('Acceptance error:', err);
|
|
if (err instanceof Error) {
|
|
setError(err.message);
|
|
} else {
|
|
setError(t('errorGeneric'));
|
|
}
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
}, [token, t]);
|
|
|
|
useEffect(() => {
|
|
if (!token) {
|
|
setError(t('tokenInvalid'));
|
|
setIsLoading(false);
|
|
return;
|
|
}
|
|
|
|
handleAccept();
|
|
}, [token, handleAccept, t]);
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-blue-50 flex items-center justify-center p-4">
|
|
<div className="bg-white rounded-2xl shadow-xl p-8 max-w-md w-full text-center">
|
|
<div className="animate-spin rounded-full h-16 w-16 border-b-2 border-blue-600 mx-auto mb-4"></div>
|
|
<p className="text-gray-600">{t('loading')}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (error) {
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-br from-red-50 via-white to-red-50 flex items-center justify-center p-4">
|
|
<div className="bg-white rounded-2xl shadow-xl p-8 max-w-md w-full">
|
|
<div className="text-center mb-6">
|
|
<div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<svg
|
|
className="w-8 h-8 text-red-600"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M6 18L18 6M6 6l12 12"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<h1 className="text-2xl font-bold text-gray-900 mb-2">{t('errorTitle')}</h1>
|
|
<p className="text-gray-600">{error}</p>
|
|
</div>
|
|
|
|
<div className="bg-red-50 border border-red-200 rounded-lg p-4 mb-6">
|
|
<p className="text-sm text-red-800">
|
|
<strong>{t('errorReasonsTitle')}</strong>
|
|
</p>
|
|
<ul className="text-sm text-red-700 mt-2 space-y-1 list-disc list-inside">
|
|
<li>{t('errorReason1')}</li>
|
|
<li>{t('errorReason2')}</li>
|
|
<li>{t('errorReason3')}</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<p className="text-sm text-gray-500 text-center">{t('errorContact')}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!booking) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-br from-green-50 via-white to-green-50 flex items-center justify-center p-4">
|
|
<div className="bg-white rounded-2xl shadow-xl p-8 max-w-2xl w-full">
|
|
{/* Success Icon with Animation */}
|
|
<div className="text-center mb-8">
|
|
<div className="relative inline-block">
|
|
<div className="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4 animate-scale-in">
|
|
<svg
|
|
className="w-10 h-10 text-green-600"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M5 13l4 4L19 7"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div className="absolute inset-0 rounded-full border-4 border-green-200 animate-ping opacity-20"></div>
|
|
</div>
|
|
|
|
<h1 className="text-3xl font-bold text-gray-900 mb-3">{t('successTitle')}</h1>
|
|
<p className="text-lg text-gray-600 mb-2">{t('successHeadline')}</p>
|
|
<p className="text-gray-500">{t('successBody')}</p>
|
|
</div>
|
|
|
|
{/* Booking Summary */}
|
|
<div className="bg-gray-50 rounded-xl p-6 mb-6">
|
|
<h2 className="text-lg font-semibold text-gray-900 mb-4">{t('summaryTitle')}</h2>
|
|
|
|
<div className="space-y-3">
|
|
<div className="flex justify-between py-2 border-b border-gray-200">
|
|
<span className="text-gray-600">{t('labels.bookingId')}</span>
|
|
<span className="font-semibold text-gray-900">{booking.bookingId}</span>
|
|
</div>
|
|
|
|
<div className="flex justify-between py-2 border-b border-gray-200">
|
|
<span className="text-gray-600">{t('labels.route')}</span>
|
|
<span className="font-semibold text-gray-900">
|
|
{booking.origin} → {booking.destination}
|
|
</span>
|
|
</div>
|
|
|
|
<div className="flex justify-between py-2 border-b border-gray-200">
|
|
<span className="text-gray-600">{t('labels.volume')}</span>
|
|
<span className="font-semibold text-gray-900">{booking.volumeCBM} CBM</span>
|
|
</div>
|
|
|
|
<div className="flex justify-between py-2 border-b border-gray-200">
|
|
<span className="text-gray-600">{t('labels.weight')}</span>
|
|
<span className="font-semibold text-gray-900">{booking.weightKG} kg</span>
|
|
</div>
|
|
|
|
<div className="flex justify-between py-2 border-b border-gray-200">
|
|
<span className="text-gray-600">{t('labels.pallets')}</span>
|
|
<span className="font-semibold text-gray-900">{booking.palletCount}</span>
|
|
</div>
|
|
|
|
<div className="flex justify-between py-2 border-b border-gray-200">
|
|
<span className="text-gray-600">{t('labels.containerType')}</span>
|
|
<span className="font-semibold text-gray-900">{booking.containerType}</span>
|
|
</div>
|
|
|
|
<div className="flex justify-between py-2 border-b border-gray-200">
|
|
<span className="text-gray-600">{t('labels.transitDays')}</span>
|
|
<span className="font-semibold text-gray-900">
|
|
{t('transitDaysValue', { count: booking.transitDays })}
|
|
</span>
|
|
</div>
|
|
|
|
<div className="flex justify-between py-3">
|
|
<span className="text-gray-600 text-lg">{t('labels.price')}</span>
|
|
<div className="text-right">
|
|
<div className="font-bold text-xl text-green-600">
|
|
{booking.primaryCurrency === 'USD'
|
|
? `$${booking.priceUSD.toLocaleString()}`
|
|
: `€${booking.priceEUR.toLocaleString()}`}
|
|
</div>
|
|
<div className="text-sm text-gray-500">
|
|
{booking.primaryCurrency === 'USD'
|
|
? `(€${booking.priceEUR.toLocaleString()})`
|
|
: `($${booking.priceUSD.toLocaleString()})`}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{booking.notes && (
|
|
<div className="mt-4 pt-4 border-t border-gray-200">
|
|
<p className="text-sm text-gray-600 mb-1">{t('labels.notes')}</p>
|
|
<p className="text-gray-800">{booking.notes}</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Next Steps */}
|
|
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
|
|
<h3 className="font-semibold text-blue-900 mb-2 flex items-center">
|
|
<svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
/>
|
|
</svg>
|
|
{t('nextStepsTitle')}
|
|
</h3>
|
|
<ul className="text-sm text-blue-800 space-y-1 list-disc list-inside">
|
|
<li>{t('nextStep1')}</li>
|
|
<li>{t('nextStep2')}</li>
|
|
<li>{t('nextStep3')}</li>
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Documents Section */}
|
|
{booking.documents && booking.documents.length > 0 && (
|
|
<div className="bg-gray-50 rounded-lg p-4 mb-6">
|
|
<h3 className="font-semibold text-gray-900 mb-3">{t('labels.documents')}</h3>
|
|
<div className="space-y-2">
|
|
{booking.documents.map((doc, index) => (
|
|
<div
|
|
key={index}
|
|
className="flex items-center justify-between p-3 bg-white rounded border border-gray-200"
|
|
>
|
|
<div className="flex items-center">
|
|
<svg
|
|
className="w-5 h-5 text-gray-400 mr-3"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
|
|
/>
|
|
</svg>
|
|
<div>
|
|
<p className="text-sm font-medium text-gray-900">{doc.fileName}</p>
|
|
<p className="text-xs text-gray-500">{doc.type}</p>
|
|
</div>
|
|
</div>
|
|
<a
|
|
href={doc.url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-blue-600 hover:text-blue-700 text-sm font-medium"
|
|
>
|
|
{t('labels.download')}
|
|
</a>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Contact Info */}
|
|
<div className="text-center text-sm text-gray-500">
|
|
<p>{tCommon('supportPrompt')}</p>
|
|
<a href="mailto:support@xpeditis.com" className="text-blue-600 hover:underline">
|
|
support@xpeditis.com
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<style jsx>{`
|
|
@keyframes scale-in {
|
|
0% {
|
|
transform: scale(0);
|
|
opacity: 0;
|
|
}
|
|
50% {
|
|
transform: scale(1.1);
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.animate-scale-in {
|
|
animation: scale-in 0.5s ease-out;
|
|
}
|
|
`}</style>
|
|
</div>
|
|
);
|
|
}
|