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 113 114 115 116 117 118 119 120 | 22x 22x | /** @jsxImportSource react */
import { Button, Link, Section, Text } from "@react-email/components";
import { EmailLayout, styles } from "./components";
export type WebsiteBuildResultProps = {
proName: string;
businessName: string;
success: boolean;
websiteUrl?: string;
errorMessage?: string;
portalUrl?: string;
};
export function WebsiteBuildResultEmail({
proName,
businessName,
success,
websiteUrl,
errorMessage,
portalUrl,
}: WebsiteBuildResultProps) {
const ctaUrl = success
? websiteUrl || "https://interioring.com"
: portalUrl || "https://portal.interioring.com";
return (
<EmailLayout
preview={
success
? `Your website for ${businessName} is live!`
: `Website build failed for ${businessName}`
}
>
<Section style={styles.section}>
<Text style={styles.paragraph}>Hi {proName},</Text>
{success ? (
<>
<Text style={styles.paragraph}>
Great news! Your website for <strong>{businessName}</strong> has
been successfully built and is now live.
</Text>
<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>Your website is live!</strong>
</Text>
{websiteUrl && (
<Text style={{ ...styles.paragraph, margin: "0" }}>
<Link href={websiteUrl} style={styles.link}>
{websiteUrl}
</Link>
</Text>
)}
</Section>
<Text style={styles.paragraph}>
Share your new website with clients to showcase your portfolio and
attract new business.
</Text>
<Section style={{ textAlign: "center", margin: "32px 0" }}>
<Button href={ctaUrl} style={styles.button}>
View Your Website
</Button>
</Section>
</>
) : (
<>
<Text style={styles.paragraph}>
Unfortunately, the website build for <strong>{businessName}</strong>{" "}
did not complete successfully.
</Text>
<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>Build failed</strong>
</Text>
{errorMessage && (
<Text style={{ ...styles.mutedText, margin: "0" }}>
{errorMessage}
</Text>
)}
</Section>
<Text style={styles.paragraph}>
You can retry the build from your portal. If the problem persists,
please reach out to our support team and we'll be happy to help.
</Text>
<Section style={{ textAlign: "center", margin: "32px 0" }}>
<Button href={ctaUrl} style={styles.button}>
Retry in Portal
</Button>
</Section>
</>
)}
<Text style={styles.paragraph}>
Best regards,
<br />
The Interioring Team
</Text>
</Section>
</EmailLayout>
);
}
export default WebsiteBuildResultEmail;
|