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 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 | 3x 6x 6x 6x | /** @jsxImportSource react */
import { Button, Link, Section, Text } from "@react-email/components";
import { EmailLayout, styles } from "./components";
export type ImportResultProps = {
adminName: string;
proName: string;
sourceUrl: string;
status: "completed" | "failed" | "cancelled";
projectsFound?: number;
photosDownloaded?: number;
errorMessage?: string;
errorCode?: string;
reviewUrl: string;
};
const STATUS_LABEL: Record<ImportResultProps["status"], string> = {
completed: "ready for review",
failed: "failed",
cancelled: "was cancelled",
};
export function ImportResultEmail({
adminName,
proName,
sourceUrl,
status,
projectsFound,
photosDownloaded,
errorMessage,
errorCode,
reviewUrl,
}: ImportResultProps) {
const preview = `Pro import for ${proName} ${STATUS_LABEL[status]}`;
const isSuccess = status === "completed";
return (
<EmailLayout preview={preview}>
<Section style={styles.section}>
<Text style={styles.paragraph}>Hi {adminName},</Text>
<Text style={styles.paragraph}>
The pro import for <strong>{proName}</strong> ({" "}
<Link href={sourceUrl} style={styles.link}>
{sourceUrl}
</Link>{" "}
) {STATUS_LABEL[status]}.
</Text>
{isSuccess ? (
<Section
style={{
backgroundColor: "#DCFCE7",
borderRadius: "8px",
padding: "20px",
margin: "24px 0",
borderLeft: "4px solid #10B981",
}}
>
<Text style={{ ...styles.paragraph, margin: "0 0 8px 0" }}>
<strong>Ready for review</strong>
</Text>
<Text style={{ ...styles.paragraph, margin: "0" }}>
Projects extracted: {projectsFound ?? 0}
<br />
Photos downloaded: {photosDownloaded ?? 0}
</Text>
</Section>
) : (
<Section
style={{
backgroundColor: "#FEE2E2",
borderRadius: "8px",
padding: "20px",
margin: "24px 0",
borderLeft: "4px solid #EF4444",
}}
>
<Text style={{ ...styles.paragraph, margin: "0 0 8px 0" }}>
<strong>
{status === "failed" ? "Import failed" : "Import cancelled"}
</strong>
</Text>
{errorCode && (
<Text style={{ ...styles.mutedText, margin: "0 0 4px 0" }}>
Code: {errorCode}
</Text>
)}
{errorMessage && (
<Text style={{ ...styles.mutedText, margin: "0" }}>
{errorMessage}
</Text>
)}
</Section>
)}
<Section style={{ textAlign: "center", margin: "32px 0" }}>
<Button href={reviewUrl} style={styles.button}>
{isSuccess ? "Review import" : "Open in admin"}
</Button>
</Section>
<Text style={styles.paragraph}>
— Interioring admin tooling
</Text>
</Section>
</EmailLayout>
);
}
export default ImportResultEmail;
|