274 lines
8.3 KiB
TypeScript
274 lines
8.3 KiB
TypeScript
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 (
|
|
<Html>
|
|
<Head>
|
|
<Font
|
|
fontFamily="Poppins"
|
|
fallbackFontFamily={["Verdana", "Arial", "sans-serif"]}
|
|
webFont={{
|
|
url: "https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap",
|
|
format: "woff2",
|
|
}}
|
|
fontWeight={400}
|
|
fontStyle="normal"
|
|
/>
|
|
<Font
|
|
fontFamily="Poppins"
|
|
fallbackFontFamily={["Verdana", "Arial", "sans-serif"]}
|
|
webFont={{
|
|
url: "https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap",
|
|
format: "woff2",
|
|
}}
|
|
fontWeight={600}
|
|
fontStyle="normal"
|
|
/>
|
|
</Head>
|
|
<Preview>{previewText}</Preview>
|
|
<Tailwind
|
|
config={{
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
brand: {
|
|
50: "#fcf3f7",
|
|
100: "#fbe8f1",
|
|
200: "#f8d2e5",
|
|
300: "#f4adce",
|
|
400: "#ec7aad",
|
|
500: "#e2528d",
|
|
600: "#d5467a",
|
|
700: "#b42253",
|
|
800: "#951f45",
|
|
900: "#7d1e3c",
|
|
950: "#4c0b20",
|
|
},
|
|
primary: "#e2528d",
|
|
accent: "#f4adce",
|
|
light: "#fcf3f7",
|
|
dark: "#4c0b20",
|
|
},
|
|
fontFamily: {
|
|
sans: ["Poppins", "Helvetica", "Arial", "sans-serif"],
|
|
},
|
|
},
|
|
},
|
|
}}
|
|
>
|
|
<Body className="bg-light font-sans">
|
|
<Container className="mx-auto pt-8 pb-8 mb-0">
|
|
<Section className="bg-white rounded-lg p-8 shadow-lg mb-8">
|
|
{/* Header with Logo */}
|
|
<Row>
|
|
<Column className="text-center">
|
|
{logoPath && (
|
|
<Img
|
|
src={logoPath}
|
|
alt={`${companyName} logo`}
|
|
width="120"
|
|
height="auto"
|
|
className="mx-auto mb-4"
|
|
/>
|
|
)}
|
|
<Text className="text-center text-brand-400 text-sm mb-6">
|
|
Your journey begins here
|
|
</Text>
|
|
</Column>
|
|
</Row>
|
|
|
|
<Hr className="border-t border-brand-100 my-6" />
|
|
|
|
{/* Booking Confirmation */}
|
|
<Heading className="text-brand-900 text-xl font-bold mb-4">
|
|
Booking Confirmation
|
|
</Heading>
|
|
|
|
<Text className="text-brand-800 mb-4">Hey {passengerName},</Text>
|
|
|
|
<Text className="text-brand-800 mb-4">
|
|
Your flight has been successfully booked! Below are the details
|
|
of your trip.
|
|
</Text>
|
|
|
|
{/* PNR Highlight Box */}
|
|
<Section className="bg-brand-50 border-l-4 border-primary p-4 mb-6">
|
|
<Text className="font-bold text-brand-900 mb-1">
|
|
Booking Reference (PNR):
|
|
</Text>
|
|
<Text className="text-2xl font-semibold text-primary mb-0">
|
|
{uid}
|
|
</Text>
|
|
</Section>
|
|
|
|
{/* Flight Details - Outbound */}
|
|
<Section className="bg-white border border-brand-100 rounded-lg p-4 mb-6">
|
|
<Heading className="text-lg font-bold text-primary mb-4">
|
|
Outbound Flight
|
|
</Heading>
|
|
|
|
<Row>
|
|
<Column className="pr-4">
|
|
<Text className="font-bold text-brand-900 mb-1">Date:</Text>
|
|
<Text className="text-brand-800 mb-3">
|
|
{formattedDepartureDate}
|
|
</Text>
|
|
</Column>
|
|
|
|
<Column>
|
|
<Text className="font-bold text-brand-900 mb-1">
|
|
Route:
|
|
</Text>
|
|
<Text className="text-brand-800 mb-3">
|
|
{origin} → {destination}
|
|
</Text>
|
|
</Column>
|
|
</Row>
|
|
</Section>
|
|
|
|
{/* Flight Details - Return (conditional) */}
|
|
{returnDate && (
|
|
<Section className="bg-white border border-brand-100 rounded-lg p-4 mb-6">
|
|
<Heading className="text-lg font-bold text-primary mb-4">
|
|
Return Flight
|
|
</Heading>
|
|
|
|
<Row>
|
|
<Column className="pr-4">
|
|
<Text className="font-bold text-brand-900 mb-1">
|
|
Date:
|
|
</Text>
|
|
<Text className="text-brand-800 mb-3">
|
|
{formattedReturnDate}
|
|
</Text>
|
|
</Column>
|
|
|
|
<Column>
|
|
<Text className="font-bold text-brand-900 mb-1">
|
|
Route:
|
|
</Text>
|
|
<Text className="text-brand-800 mb-3">
|
|
{destination} → {origin}
|
|
</Text>
|
|
</Column>
|
|
</Row>
|
|
</Section>
|
|
)}
|
|
|
|
<Text className="text-brand-700 mb-4 text-center text-sm">
|
|
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.
|
|
</Text>
|
|
|
|
{/* Call to action */}
|
|
<Section className="text-center mt-8 mb-6">
|
|
<Button
|
|
className="bg-primary text-white font-bold px-6 py-3 rounded-md"
|
|
href={`${baseUrl}/track?uid=${uid}`}
|
|
>
|
|
View Booking Online
|
|
</Button>
|
|
</Section>
|
|
|
|
<Text className="text-brand-700 text-xs mb-4 text-center">
|
|
You can use the button above or your booking reference to check
|
|
in online, make changes to your booking, or add additional
|
|
services.
|
|
</Text>
|
|
|
|
<Hr className="border-t border-brand-100 my-6" />
|
|
|
|
{/* Footer */}
|
|
<Text className="text-brand-500 text-sm text-center">
|
|
Thank you for choosing {companyName} for your journey. We hope
|
|
you have a wonderful trip!
|
|
</Text>
|
|
</Section>
|
|
|
|
{/* Footer disclaimer */}
|
|
<Text className="text-brand-400 text-xs text-center px-4">
|
|
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.
|
|
</Text>
|
|
</Container>
|
|
</Body>
|
|
</Tailwind>
|
|
</Html>
|
|
);
|
|
}
|
|
|
|
PnrConfirmationEmail.PreviewProps = {
|
|
uid: "ABC123",
|
|
origin: "SFO",
|
|
destination: "JFK",
|
|
departureDate: "2023-12-15",
|
|
returnDate: "2023-12-22",
|
|
passengerName: "John Smith",
|
|
baseUrl: "https://checkout.com",
|
|
logoPath: "https://checkout.com/assets/logos/logo-main.svg",
|
|
companyName: "checkout",
|
|
};
|
|
|
|
export default PnrConfirmationEmail;
|