From bf3f6571ebebf2c43600946fe3a3f7a018f05576 Mon Sep 17 00:00:00 2001 From: RachelyAyn <117756298+RachelyAyn@users.noreply.github.com> Date: Wed, 11 Sep 2024 14:06:15 +0300 Subject: [PATCH 1/2] Add a new template for an expired coupon notification --- .../notifications/novu-expired-coupon.tsx | 220 ++++++++++++++++++ .../react/emails/welcome/novu-welcome-4.tsx | 114 +++++++++ content-samples/react/package-lock.json | 6 +- content-samples/react/package.json | 6 +- 4 files changed, 340 insertions(+), 6 deletions(-) create mode 100644 content-samples/react/emails/notifications/novu-expired-coupon.tsx create mode 100644 content-samples/react/emails/welcome/novu-welcome-4.tsx diff --git a/content-samples/react/emails/notifications/novu-expired-coupon.tsx b/content-samples/react/emails/notifications/novu-expired-coupon.tsx new file mode 100644 index 0000000..9e4c786 --- /dev/null +++ b/content-samples/react/emails/notifications/novu-expired-coupon.tsx @@ -0,0 +1,220 @@ +import { + Body, + Button, + Container, + Column, + Head, + Heading, + Html, + Img, + Preview, + Row, + Section, + Text, +} from "@react-email/components"; +import * as React from "react"; + +interface NovuExpiredCouponEmailProps { + userFirstName?: string; + CouponDate?: Date; + expiresInDays?: number; + CouponName?: string; +} + +export const NovuExpiredCouponEmail = ({ + userFirstName, + CouponDate, + expiresInDays, + CouponName, +}: NovuExpiredCouponEmailProps) => { + let expiryDate; + if (CouponDate) { + const currentDate: Date = new Date(); + expiryDate = new Date(CouponDate as unknown as string); + + // Calculate days difference + expiresInDays = Math.floor( + (expiryDate.getTime() - currentDate.getTime()) / (1000 * 60 * 60 * 24) + ); + } else { + // Handle case where expirationDate is undefined or invalid + expiresInDays = undefined; + } + + return ( + + + Novu: Your Coupon is Expiring Soon! + + +
+ Novu Logo +
+ +
+ + Coupon Header + + + + + + Hi {userFirstName}, + + + {expiresInDays !== undefined && expiresInDays <= 5 ? ( + + 🎉 Hurry! Your {CouponName} coupon expires + in {expiresInDays} days! + + ) : ( + + 🎉 You have a coupon for {CouponName}. + + )} + + + Coupon expires on {expiryDate?.toLocaleDateString()} + + + + Remember to use it before it expires! + + + + If you lose the coupon or have any issues, feel free to visit + our support page. + + + + + + + + + +
+ +
+ Coupon Footer +
+ + + © 2024 | Novu Inc., 350 Mission Street, San Francisco, CA 94105, + U.S.A. | www.novu.com + + + + + ); +}; + +NovuExpiredCouponEmail.PreviewProps = { + userFirstName: "Rachely", + expiresInDays: 3, + CouponDate: new Date("October 7, 2024, 10:58 am"), + CouponName: "Birthday", +} as NovuExpiredCouponEmailProps; + +export default NovuExpiredCouponEmail; + +const main = { + backgroundColor: "#f7f7f7", + fontFamily: + '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, "Helvetica Neue", sans-serif', + color: "#333", + padding: "20px", +}; + +const paragraph = { + fontSize: 16, + color: "#555", + lineHeight: "24px", +}; + +const highlightText = { + fontSize: 18, + fontWeight: "bold", + color: "#e00707", + textAlign: "center" as const, + padding: "10px 0", +}; + +const footerText = { + color: "rgb(0,0,0, 0.5)", + fontSize: 14, + marginTop: 10, + textAlign: "center" as const, +}; + +const footer = { + textAlign: "center" as const, + fontSize: 12, + color: "rgb(0,0,0, 0.7)", +}; + +const logo = { + padding: "20px 0", + textAlign: "center" as const, +}; + +const containerButton = { + display: "flex", + justifyContent: "center", + padding: "20px 0", +}; + +const button = { + backgroundColor: "#e00707", + borderRadius: "5px", + color: "#FFF", + fontWeight: "bold", + border: "none", + cursor: "pointer", + padding: "12px 30px", + textAlign: "center" as const, + textDecoration: "none", +}; + +const content = { + backgroundColor: "#fff", + border: "1px solid rgb(0,0,0, 0.1)", + borderRadius: "8px", + overflow: "hidden", + padding: "20px", + marginBottom: "20px", +}; + +const image = { + maxWidth: "100%", +}; + +const boxInfos = { + padding: "20px", +}; + +const containerImageFooter = { + padding: "30px 0", +}; + diff --git a/content-samples/react/emails/welcome/novu-welcome-4.tsx b/content-samples/react/emails/welcome/novu-welcome-4.tsx new file mode 100644 index 0000000..fb32fa8 --- /dev/null +++ b/content-samples/react/emails/welcome/novu-welcome-4.tsx @@ -0,0 +1,114 @@ +import { + Body, + Button, + Container, + Head, + Hr, + Html, + Img, + Preview, + Section, + Text, +} from "@react-email/components"; +import * as React from "react"; + +interface NovuFirstWelcomeEmailProps { + userFirstname: string; +} + +const baseUrl = process.env.VERCEL_URL + ? `https://${process.env.VERCEL_URL}` + : ""; + +export const NovuFirstWelcomeEmail = ({ + userFirstname, +}: NovuFirstWelcomeEmailProps) => ( + + + + The sales intelligence platform that helps you uncover qualified leads. + + + + Novu + Hi {userFirstname}, + + Welcome to Novu, the sales intelligence platform that helps you + uncover qualified leads and close deals faster. + We wish you success! + +
+ +
+ + Best, +
+ The Novu team + +
+ + 470 Noor Ave STE B #1148, South San Francisco, CA 94080 + + + + +); + +NovuFirstWelcomeEmail.PreviewProps = { + userFirstname: "John", +} as NovuFirstWelcomeEmailProps; + +export default NovuFirstWelcomeEmail; + +const main = { + backgroundColor: "#ffffff", + fontFamily: + '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif', +}; + +const container = { + margin: "0 auto", + padding: "20px 0 48px", +}; + +const logo = { + margin: "0 auto", +}; + +const paragraph = { + fontSize: "16px", + lineHeight: "26px", +}; + +const btnContainer = { + textAlign: "center" as const, +}; + +const button = { + backgroundColor: "#5F51E8", + borderRadius: "3px", + color: "#fff", + fontSize: "16px", + textDecoration: "none", + textAlign: "center" as const, + display: "block", + padding: "12px", +}; + +const hr = { + borderColor: "#cccccc", + margin: "20px 0", +}; + +const footer = { + color: "#8898aa", + fontSize: "12px", +}; diff --git a/content-samples/react/package-lock.json b/content-samples/react/package-lock.json index e205b7d..5574574 100644 --- a/content-samples/react/package-lock.json +++ b/content-samples/react/package-lock.json @@ -1,11 +1,11 @@ { - "name": "emails", + "name": "react-email-templates", "version": "0.0.19", "lockfileVersion": 3, "requires": true, "packages": { "": { - "name": "emails", + "name": "react-email-templates", "version": "0.0.19", "dependencies": { "@react-email/components": "0.0.18", @@ -13,7 +13,7 @@ "react-email": "2.1.4" }, "devDependencies": { - "@types/react": "18.2.33", + "@types/react": "^18.2.33", "@types/react-dom": "18.2.14" } }, diff --git a/content-samples/react/package.json b/content-samples/react/package.json index 77ea9f9..9d5e833 100644 --- a/content-samples/react/package.json +++ b/content-samples/react/package.json @@ -9,11 +9,11 @@ }, "dependencies": { "@react-email/components": "0.0.18", - "react-email": "2.1.4", - "react": "^18.2.0" + "react": "^18.2.0", + "react-email": "2.1.4" }, "devDependencies": { - "@types/react": "18.2.33", + "@types/react": "^18.2.33", "@types/react-dom": "18.2.14" } } From bf055530b0c42c0bd4e12b3a68b2fa57edfc2168 Mon Sep 17 00:00:00 2001 From: RachelyAyn <117756298+RachelyAyn@users.noreply.github.com> Date: Wed, 11 Sep 2024 22:31:11 +0300 Subject: [PATCH 2/2] add link to support --- .../emails/notifications/novu-expired-coupon.tsx | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/content-samples/react/emails/notifications/novu-expired-coupon.tsx b/content-samples/react/emails/notifications/novu-expired-coupon.tsx index 9e4c786..6d83db0 100644 --- a/content-samples/react/emails/notifications/novu-expired-coupon.tsx +++ b/content-samples/react/emails/notifications/novu-expired-coupon.tsx @@ -19,6 +19,7 @@ interface NovuExpiredCouponEmailProps { CouponDate?: Date; expiresInDays?: number; CouponName?: string; + LinkSupport?: string; } export const NovuExpiredCouponEmail = ({ @@ -26,6 +27,7 @@ export const NovuExpiredCouponEmail = ({ CouponDate, expiresInDays, CouponName, + LinkSupport, }: NovuExpiredCouponEmailProps) => { let expiryDate; if (CouponDate) { @@ -101,6 +103,13 @@ export const NovuExpiredCouponEmail = ({ If you lose the coupon or have any issues, feel free to visit our support page. + + For more assistance, visit our{" "} + + support page + . + + @@ -135,6 +144,7 @@ NovuExpiredCouponEmail.PreviewProps = { expiresInDays: 3, CouponDate: new Date("October 7, 2024, 10:58 am"), CouponName: "Birthday", + LinkSupport:"https://www.google.co.il/", } as NovuExpiredCouponEmailProps; export default NovuExpiredCouponEmail; @@ -217,4 +227,8 @@ const boxInfos = { const containerImageFooter = { padding: "30px 0", }; +const linkStyle = { + color: "#e00707", + textDecoration: "none", +};