From 3069537f8b10a06f3a32723cb64b4d71936a1724 Mon Sep 17 00:00:00 2001 From: TamarGluskin <4101675@gmail.com> Date: Tue, 17 Sep 2024 22:25:10 +0300 Subject: [PATCH 1/2] feat(email): enhance MeetingInviteEmail component with prop consistency and added comments --- .../notifications/novu-invite-meeting.tsx | 237 ++++++++++++++++++ 1 file changed, 237 insertions(+) create mode 100644 content-samples/react/emails/notifications/novu-invite-meeting.tsx diff --git a/content-samples/react/emails/notifications/novu-invite-meeting.tsx b/content-samples/react/emails/notifications/novu-invite-meeting.tsx new file mode 100644 index 0000000..f0c28ef --- /dev/null +++ b/content-samples/react/emails/notifications/novu-invite-meeting.tsx @@ -0,0 +1,237 @@ +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; +} + +// Custom Styles +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)", // Slight border for contrast + cursor: "pointer", + padding: "12px 30px", // Button padding for a larger click area + textAlign: "center", +}; + +const buttonYes = { + ...button, + backgroundImage: "linear-gradient(90deg, #e91e63, #f44336)", // Gradient for 'Yes' button +}; + +const buttonMaybe = { + ...button, + backgroundImage: "linear-gradient(90deg, #fcb045, #fd1d1d)", // Gradient for 'Maybe' button +}; + +const buttonNo = { + ...button, + backgroundImage: "linear-gradient(90deg, #f44336, #e91e63)", // Gradient for 'No' button +}; + +const content = { + border: "1px solid rgb(0,0,0, 0.1)", // Border around the main content + 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%", // Date card width +}; + +const mainContentColumn = { + paddingLeft: "20px", + width: "70%", // Main content width +}; + +export const MeetingInviteEmail = ({ + meetingTitle, + meetingDate, + organizerName, + participants = [], + location, + subject, +}: MeetingInviteEmailProps) => { + const formattedDate = new Intl.DateTimeFormat("en", { + dateStyle: "full", + timeStyle: "short", + }).format(meetingDate); // Format meeting date + + return ( + + + {meetingTitle || "Meeting Invitation"} + + + {/* NOVU Logo */} +
+ NOVU Logo +
+ + {/* Invitation Content */} +
+ + Meeting Image + + + {/* Date Card and Main Content */} + + {/* Date Card */} + + Meeting Date + {formattedDate} + + + {/* Main Content */} + + + + + {meetingTitle} + + + Date and Time: {formattedDate} + + + Organizer: {organizerName} + + + Subject: {subject} + + + Location: {location} + + {participants.length > 0 && ( + + Participants: {participants.join(", ")} + + )} + + + + {/* Response Buttons */} + + + + + + + + + +
+ +
+ Footer Image +
+ + + © 2024 | Novu Inc., 350 Mission Street, San Francisco, CA 94105, + U.S.A. | www.novu.com + + + + + ); +}; + +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; From ed4bfbc755030db25228038c3c850f09f772f5f3 Mon Sep 17 00:00:00 2001 From: TamarGluskin <4101675@gmail.com> Date: Fri, 20 Sep 2024 11:20:31 +0300 Subject: [PATCH 2/2] fix: remove comments --- .../notifications/novu-invite-meeting.tsx | 184 +++++++++--------- 1 file changed, 91 insertions(+), 93 deletions(-) diff --git a/content-samples/react/emails/notifications/novu-invite-meeting.tsx b/content-samples/react/emails/notifications/novu-invite-meeting.tsx index f0c28ef..81a669f 100644 --- a/content-samples/react/emails/notifications/novu-invite-meeting.tsx +++ b/content-samples/react/emails/notifications/novu-invite-meeting.tsx @@ -22,92 +22,6 @@ interface MeetingInviteEmailProps { location?: string; subject?: string; } - -// Custom Styles -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)", // Slight border for contrast - cursor: "pointer", - padding: "12px 30px", // Button padding for a larger click area - textAlign: "center", -}; - -const buttonYes = { - ...button, - backgroundImage: "linear-gradient(90deg, #e91e63, #f44336)", // Gradient for 'Yes' button -}; - -const buttonMaybe = { - ...button, - backgroundImage: "linear-gradient(90deg, #fcb045, #fd1d1d)", // Gradient for 'Maybe' button -}; - -const buttonNo = { - ...button, - backgroundImage: "linear-gradient(90deg, #f44336, #e91e63)", // Gradient for 'No' button -}; - -const content = { - border: "1px solid rgb(0,0,0, 0.1)", // Border around the main content - 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%", // Date card width -}; - -const mainContentColumn = { - paddingLeft: "20px", - width: "70%", // Main content width -}; - export const MeetingInviteEmail = ({ meetingTitle, meetingDate, @@ -119,15 +33,14 @@ export const MeetingInviteEmail = ({ const formattedDate = new Intl.DateTimeFormat("en", { dateStyle: "full", timeStyle: "short", - }).format(meetingDate); // Format meeting date - + }).format(meetingDate); return ( {meetingTitle || "Meeting Invitation"} - {/* NOVU Logo */} +
- {/* Invitation Content */} +
- {/* Date Card and Main Content */} + - {/* Date Card */} + Meeting Date {formattedDate} - {/* Main Content */} + @@ -235,3 +148,88 @@ MeetingInviteEmail.PreviewProps = { } 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%", +}; \ No newline at end of file