💥💣 ALMOST THERE???? DUNNO PROBABLY - 90% done
This commit is contained in:
user
273
packages/email/emails/uid-confirmation.tsx
Normal file
273
packages/email/emails/uid-confirmation.tsx
Normal file
@@ -0,0 +1,273 @@
|
||||
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://flytickettravel.com",
|
||||
logoPath: "https://flytickettravel.com/assets/logos/logo-main.svg",
|
||||
companyName: "FlyTicketTravel",
|
||||
};
|
||||
|
||||
export default PnrConfirmationEmail;
|
||||
Reference in New Issue
Block a user