Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 | 11x 11x | /** @jsxImportSource react */
import { Button, Section, Text } from "@react-email/components";
import { EmailLayout, styles } from "./components";
export type ReminderDueEmailProps = {
proName: string;
reminderTitle: string;
customerName: string;
dueAt: string;
notes?: string;
leadUrl?: string;
};
export function ReminderDueEmail({
proName,
reminderTitle,
customerName,
dueAt,
notes,
leadUrl,
}: ReminderDueEmailProps) {
const ctaUrl = leadUrl || "https://portal.interioring.com/crm";
return (
<EmailLayout preview={`Reminder due: ${reminderTitle}`}>
<Section style={styles.section}>
<Text style={styles.paragraph}>Hi {proName},</Text>
<Text style={styles.paragraph}>
You have a reminder that's now due for your lead{" "}
<strong>{customerName}</strong>.
</Text>
<Section
style={{
backgroundColor: "#FEF3C7",
borderRadius: "8px",
padding: "20px",
margin: "24px 0",
borderLeft: "4px solid #F59E0B",
}}
>
<Text style={{ ...styles.paragraph, margin: "0 0 12px 0" }}>
<strong>⏰ Reminder Due</strong>
</Text>
<Text style={{ ...styles.paragraph, margin: "4px 0" }}>
<strong>Title:</strong> {reminderTitle}
</Text>
<Text style={{ ...styles.paragraph, margin: "4px 0" }}>
<strong>Customer:</strong> {customerName}
</Text>
<Text style={{ ...styles.paragraph, margin: "4px 0" }}>
<strong>Due:</strong> {dueAt}
</Text>
{notes && (
<Text style={{ ...styles.paragraph, margin: "4px 0" }}>
<strong>Notes:</strong> {notes}
</Text>
)}
</Section>
<Section style={{ textAlign: "center", margin: "32px 0" }}>
<Button href={ctaUrl} style={styles.button}>
View Lead
</Button>
</Section>
<Text style={styles.mutedText}>
Don't miss this — follow up with your lead while they're still
interested!
</Text>
<Text style={styles.paragraph}>
Best regards,
<br />
The Interioring Team
</Text>
</Section>
</EmailLayout>
);
}
export default ReminderDueEmail;
|