import {
Body,
Button,
Column,
Container,
Font,
Head,
Heading,
Hr,
Html,
Img,
Preview,
Row,
Section,
Text,
} from "@react-email/components";
import { Tailwind } from "@react-email/tailwind";
interface PnrConfirmationProps {
uid: string;
origin: string;
destination: string;
departureDate: string;
passengerName: string;
returnDate?: string;
baseUrl?: string;
logoPath?: string;
companyName: string;
}
export function PnrConfirmationEmail({
uid,
origin,
destination,
passengerName,
departureDate,
returnDate,
baseUrl,
logoPath,
companyName,
}: PnrConfirmationProps) {
const previewText = `Flight Confirmation: ${origin} to ${destination} - PNR: ${uid}`;
// Format dates for better display
const formattedDepartureDate = new Date(departureDate).toLocaleDateString(
"en-US",
{
weekday: "long",
month: "long",
day: "numeric",
year: "numeric",
},
);
const formattedReturnDate = returnDate
? new Date(returnDate).toLocaleDateString("en-US", {
weekday: "long",
month: "long",
day: "numeric",
year: "numeric",
})
: null;
return (
{previewText}
{/* Header with Logo */}
{logoPath && (
)}
Your journey begins here
{/* Booking Confirmation */}
Booking Confirmation
Hey {passengerName},
Your flight has been successfully booked! Below are the details
of your trip.
{/* PNR Highlight Box */}
Booking Reference (PNR):
{uid}
{/* Flight Details - Outbound */}
Outbound Flight
Date:
{formattedDepartureDate}
Route:
{origin} → {destination}
{/* Flight Details - Return (conditional) */}
{returnDate && (
Return Flight
Date:
{formattedReturnDate}
Route:
{destination} → {origin}
)}
Please note that it may take up to 48 hours for the payment to
be processed and your flight to be confirmed with the airline.
{/* Call to action */}
You can use the button above or your booking reference to check
in online, make changes to your booking, or add additional
services.
{/* Footer */}
Thank you for choosing {companyName} for your journey. We hope
you have a wonderful trip!
{/* Footer disclaimer */}
This is an automated message. Please do not reply to this email.
For any changes to your booking, please use the "Manage My
Booking" button above or contact our customer service team.
);
}
PnrConfirmationEmail.PreviewProps = {
uid: "ABC123",
origin: "SFO",
destination: "JFK",
departureDate: "2023-12-15",
returnDate: "2023-12-22",
passengerName: "John Smith",
baseUrl: "https://flytickettravel.com",
logoPath: "https://flytickettravel.com/assets/logos/logo-main.svg",
companyName: "FlyTicketTravel",
};
export default PnrConfirmationEmail;