Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(email): enhance MeetingInviteEmail component with prop consisten… #47

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

feat(email): enhance MeetingInviteEmail component with prop consisten… #47

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3069537
feat(email): enhance MeetingInviteEmail component with prop consisten…
TamarGluskin Sep 17, 2024
ed4bfbc
fix: remove comments
TamarGluskin Sep 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
235 changes: 235 additions & 0 deletions content-samples/react/emails/notifications/novu-invite-meeting.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,235 @@
import {
Body,
Button,
Column,
Container,
Head,
Heading,
Html,
Img,
Preview,
Row,
Section,
Text,
} from "@react-email/components";
import * as React from "react";

interface MeetingInviteEmailProps {
meetingTitle?: string;
meetingDate?: Date;
organizerName?: string;
participants?: string[];
location?: string;
subject?: string;
}
export const MeetingInviteEmail = ({
meetingTitle,
meetingDate,
organizerName,
participants = [],
location,
subject,
}: MeetingInviteEmailProps) => {
const formattedDate = new Intl.DateTimeFormat("en", {
dateStyle: "full",
timeStyle: "short",
}).format(meetingDate);
return (
<Html>
<Head />
<Preview>{meetingTitle || "Meeting Invitation"}</Preview>
<Body style={main}>
<Container>

<Section style={logo}>
<Img
src={`https://images.spr.so/cdn-cgi/imagedelivery/j42No7y-dcokJuNgXeA0ig/dca73b36-cf39-4e28-9bc7-8a0d0cd8ac70/standalone-gradient2x_2/w=128,quality=90,fit=scale-down`}
width="48"
alt="NOVU Logo"
/>
</Section>


<Section style={content}>
<Row>
<Img
style={image}
width={620}
src={`https://react-email-demo-48zvx380u-resend.vercel.app/static/yelp-header.png`}
alt="Meeting Image"
/>
</Row>


<Row style={rowContainer}>

<Column style={dateCard}>
<Heading style={{ fontSize: 24, textAlign: "center" }}>Meeting Date</Heading>
<Text style={{ fontSize: 20, textAlign: "center" }}>{formattedDate}</Text>
</Column>


<Column style={mainContentColumn}>
<Row style={boxInfos}>
<Column>
<Heading
style={{
fontSize: 32,
fontWeight: "bold",
textAlign: "center",
}}
>
{meetingTitle}
</Heading>
<Text style={paragraph}>
<b>Date and Time:</b> {formattedDate}
</Text>
<Text style={paragraph}>
<b>Organizer:</b> {organizerName}
</Text>
<Text style={paragraph}>
<b>Subject:</b> {subject}
</Text>
<Text style={paragraph}>
<b>Location:</b> {location}
</Text>
{participants.length > 0 && (
<Text style={paragraph}>
<b>Participants:</b> {participants.join(", ")}
</Text>
)}
</Column>
</Row>

{/* Response Buttons */}
<Row style={boxInfos}>
<Column style={containerButton} colSpan={2}>
<Button style={buttonYes}>Yes</Button>
<Button style={buttonMaybe}>Maybe</Button>
<Button style={buttonNo}>No</Button>
</Column>
</Row>
</Column>
</Row>
</Section>

<Section style={containerImageFooter}>
<Img
style={image}
width={620}
src={`https://react-email-demo-48zvx380u-resend.vercel.app/static/yelp-footer.png`}
alt="Footer Image"
/>
</Section>

<Text
style={{
textAlign: "center",
fontSize: 12,
color: "rgb(0,0,0, 0.7)",
}}
>
© 2024 | Novu Inc., 350 Mission Street, San Francisco, CA 94105,
U.S.A. | www.novu.com
</Text>
</Container>
</Body>
</Html>
);
};

MeetingInviteEmail.PreviewProps = {
meetingTitle: "Meeting Invitation with NOVU Team",
meetingDate: new Date("August 1, 2024, 2:30 PM"),
organizerName: "Tamar Henfling",
participants: ["Yael Dovrat", "John Doe", "Jane Smith"],
location: "Zoom - https://zoom.us/j/123456789",
subject: "Project Kickoff Meeting",
} as MeetingInviteEmailProps;

export default MeetingInviteEmail;


const main = {
backgroundColor: "#fff",
fontFamily:
'-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
};

const paragraph = {
fontSize: 16,
};

const logo = {
padding: "30px 20px",
};

const containerButton = {
display: "flex",
justifyContent: "center",
width: "100%",
gap: "10px",
};

const button = {
borderRadius: 3,
color: "#FFF",
fontWeight: "bold",
border: "1px solid rgb(0,0,0, 0.1)",
cursor: "pointer",
padding: "12px 30px",
textAlign: "center",
};

const buttonYes = {
...button,
backgroundImage: "linear-gradient(90deg, #e91e63, #f44336)",
};

const buttonMaybe = {
...button,
backgroundImage: "linear-gradient(90deg, #fcb045, #fd1d1d)",
};

const buttonNo = {
...button,
backgroundImage: "linear-gradient(90deg, #f44336, #e91e63)",
};

const content = {
border: "1px solid rgb(0,0,0, 0.1)",
borderRadius: "3px",
overflow: "hidden",
};

const image = {
maxWidth: "100%",
};

const boxInfos = {
padding: "20px",
};

const containerImageFooter = {
padding: "45px 0 0 0",
};

const rowContainer = {
display: "flex",
justifyContent: "space-between",
alignItems: "flex-start",
};

const dateCard = {
backgroundColor: "#f9f9f9",
borderRadius: "8px",
padding: "20px",
margin: "20px 0",
boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)",
width: "25%",
};

const mainContentColumn = {
paddingLeft: "20px",
width: "70%",
};