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 | 18x 18x 18x | /** @jsxImportSource react */
import { Button, Link, Section, Text } from "@react-email/components";
import { EmailLayout, styles } from "./components";
export type TeamInvitationEmailProps = {
invitationLink: string;
proName: string;
inviterName: string;
role: "owner" | "manager" | "staff";
expiresInDays: number;
};
export function TeamInvitationEmail({
invitationLink,
proName,
inviterName,
role,
expiresInDays,
}: TeamInvitationEmailProps) {
const roleLabels: Record<string, string> = { owner: "Owner", manager: "Manager", staff: "Staff Member" };
const roleLabel = roleLabels[role] || "Team Member";
return (
<EmailLayout preview={`You've been invited to join ${proName} on Interioring`}>
<Section style={styles.section}>
<Text style={styles.paragraph}>Hi,</Text>
<Text style={styles.paragraph}>
<strong>{inviterName}</strong> has invited you to join{" "}
<strong>{proName}</strong> as a <strong>{roleLabel}</strong> on Interioring.
</Text>
<Text style={styles.paragraph}>
As a {roleLabel.toLowerCase()}, you'll be able to help manage the
business profile, projects, and customer inquiries.
</Text>
<Section style={{ textAlign: "center", margin: "32px 0" }}>
<Button href={invitationLink} style={styles.button}>
Accept Invitation
</Button>
</Section>
<Text style={styles.mutedText}>
This invitation will expire in {expiresInDays} day
{expiresInDays !== 1 ? "s" : ""}. If you don't want to join this team,
you can safely ignore this email.
</Text>
<Text style={styles.mutedText}>
If the button doesn't work, copy and paste this link into your browser:
</Text>
<Text style={{ ...styles.mutedText, wordBreak: "break-all" }}>
<Link href={invitationLink} style={styles.link}>
{invitationLink}
</Link>
</Text>
</Section>
</EmailLayout>
);
}
export default TeamInvitationEmail;
|