157 lines
4.2 KiB
TypeScript
157 lines
4.2 KiB
TypeScript
import { Heading, Section, Text } from "@react-email/components";
|
|
import { EmailLayout } from "./components/EmailLayout";
|
|
import { Card } from "./components/Card";
|
|
import { Button } from "./components/Button";
|
|
import { theme } from "./theme";
|
|
|
|
interface PaymentRequestEmailProps {
|
|
userName?: string;
|
|
requesterName?: string;
|
|
amount?: string;
|
|
description?: string;
|
|
requestId?: string;
|
|
dueDate?: string;
|
|
}
|
|
|
|
export const PaymentRequestEmail = ({
|
|
userName = "Kirubel",
|
|
requesterName = "Sarah Johnson",
|
|
amount = "$250.00",
|
|
description = "Dinner bill split - Italian Restaurant",
|
|
requestId = "REQ-987654321",
|
|
dueDate = "July 20, 2024",
|
|
}: PaymentRequestEmailProps) => {
|
|
return (
|
|
<EmailLayout
|
|
preview={`${requesterName} has sent you a payment request for ${amount}.`}
|
|
>
|
|
<Section>
|
|
<Heading style={heading}>New Payment Request 💰</Heading>
|
|
<Text style={text}>Hi {userName},</Text>
|
|
<Text style={text}>
|
|
<strong>{requesterName}</strong> has sent you a payment request. Here
|
|
are the details:
|
|
</Text>
|
|
<Card>
|
|
<Section style={detailRow}>
|
|
<Text style={detailLabel}>Requested By:</Text>
|
|
<Text style={detailValue}>{requesterName}</Text>
|
|
</Section>
|
|
<Section style={detailRow}>
|
|
<Text style={detailLabel}>Amount:</Text>
|
|
<Text style={detailAmount}>{amount}</Text>
|
|
</Section>
|
|
<Section style={detailRow}>
|
|
<Text style={detailLabel}>Description:</Text>
|
|
<Text style={detailValue}>{description}</Text>
|
|
</Section>
|
|
<Section style={detailRow}>
|
|
<Text style={detailLabel}>Request ID:</Text>
|
|
<Text style={detailValue}>{requestId}</Text>
|
|
</Section>
|
|
{dueDate && (
|
|
<Section style={detailRow}>
|
|
<Text style={detailLabel}>Due Date:</Text>
|
|
<Text style={detailValue}>{dueDate}</Text>
|
|
</Section>
|
|
)}
|
|
</Card>
|
|
<Text style={text}>
|
|
You can review and pay this request directly from the app. Payment is
|
|
secure and will be processed immediately.
|
|
</Text>
|
|
<Section style={buttonSection}>
|
|
<Button href="https://amba.app/payment-requests">
|
|
View & Pay Request
|
|
</Button>
|
|
</Section>
|
|
<Text style={noteText}>
|
|
<strong>Note:</strong> This payment request will remain pending until
|
|
you complete the payment. You'll receive a confirmation email once the
|
|
payment is processed.
|
|
</Text>
|
|
<Text style={text}>
|
|
Best regards,
|
|
<br />
|
|
The Amba Team
|
|
</Text>
|
|
</Section>
|
|
</EmailLayout>
|
|
);
|
|
};
|
|
|
|
const heading = {
|
|
color: theme.colors.primary,
|
|
fontSize: "28px",
|
|
fontWeight: "700",
|
|
margin: "0 0 24px",
|
|
};
|
|
|
|
const text = {
|
|
color: theme.colors.textDark,
|
|
fontSize: "16px",
|
|
lineHeight: "24px",
|
|
margin: "0 0 16px",
|
|
};
|
|
|
|
const detailRow = {
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
marginBottom: "12px",
|
|
paddingBottom: "12px",
|
|
borderBottom: `1px solid ${theme.colors.border}`,
|
|
alignItems: "flex-start",
|
|
};
|
|
|
|
const detailLabel = {
|
|
color: theme.colors.text,
|
|
fontSize: "14px",
|
|
fontWeight: "600",
|
|
margin: "0",
|
|
flex: "1",
|
|
};
|
|
|
|
const detailValue = {
|
|
color: theme.colors.textDark,
|
|
fontSize: "14px",
|
|
margin: "0",
|
|
textAlign: "right" as const,
|
|
flex: "1",
|
|
};
|
|
|
|
const detailAmount = {
|
|
color: theme.colors.primary,
|
|
fontSize: "18px",
|
|
fontWeight: "700",
|
|
margin: "0",
|
|
textAlign: "right" as const,
|
|
flex: "1",
|
|
};
|
|
|
|
const buttonSection = {
|
|
textAlign: "center" as const,
|
|
margin: "32px 0",
|
|
};
|
|
|
|
const noteText = {
|
|
color: theme.colors.textDark,
|
|
fontSize: "14px",
|
|
lineHeight: "20px",
|
|
margin: "24px 0 16px",
|
|
padding: "12px",
|
|
backgroundColor: theme.colors.accentLightest,
|
|
borderRadius: "4px",
|
|
borderLeft: `3px solid ${theme.colors.accent}`,
|
|
};
|
|
|
|
PaymentRequestEmail.PreviewProps = {
|
|
userName: "Kirubel",
|
|
requesterName: "Sarah Johnson",
|
|
amount: "$250.00",
|
|
description: "Dinner bill split - Italian Restaurant",
|
|
requestId: "REQ-987654321",
|
|
dueDate: "July 20, 2024",
|
|
} as PaymentRequestEmailProps;
|
|
|
|
export default PaymentRequestEmail;
|