diff --git a/content-samples/react/emails/notifications/novu-birthday-coupon.tsx b/content-samples/react/emails/notifications/novu-birthday-coupon.tsx new file mode 100644 index 0000000..2276d8d --- /dev/null +++ b/content-samples/react/emails/notifications/novu-birthday-coupon.tsx @@ -0,0 +1,203 @@ +import { + Body, + Button, + Container, + Column, + Head, + Heading, + Html, + Img, + Preview, + Row, + Section, + Text, + } from "@react-email/components"; + import * as React from "react"; + + interface NovuBirthdayCouponProps { + userFirstName?: string; + couponDate?: Date; + discountAmount?: string; + validationCode?: string; + } + + const baseUrl = process.env.VERCEL_URL + ? `https://${process.env.VERCEL_URL}` + : ""; + + export const NovuBirthdayCoupon = ({ + userFirstName, + discountAmount, + couponDate, + validationCode, + + }: NovuBirthdayCouponProps) => { + const formattedDate = new Intl.DateTimeFormat("en", { + dateStyle: "long", + timeStyle: "short", + }).format(couponDate); + + return ( + + + Novu birthday discount + + +
+ +
+ +
+ + + + + + + + Happy Birthday {userFirstName} + + + Hope you're enjoying your big day! + + + + + + + Let us surprise you with a {discountAmount}% discount in favor of the celebration! + +
+ {validationCode} +
+ + Coupon expire date: {formattedDate} + + + + + + + + +
+ +
+ +
+ + + © 2022 | Novu Inc., 350 Mission Street, San Francisco, CA 94105, + U.S.A. | www.novu.com + + + + + ); + }; + + NovuRecentLoginEmail.PreviewProps = { + userFirstName: "Alan", + discountAmount: "10", + loginDate: new Date("September 30, 2024, 00:00 am"), + validationCode: "HPY-BDY", + } as NovuRecentLoginEmailProps; + + export default NovuRecentLoginEmail; + + 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%", + }; + + const button = { + backgroundColor: "#5e6ad2", + borderRadius: "3px", + fontWeight: "600", + color: "#fff", + fontSize: "15px", + textDecoration: "none", + textAlign: "center" as const, + display: "block", + padding: "11px 23px", + }; + + 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 codeBox = { + background: "rgb(245, 244, 245)", + borderRadius: "4px", + marginBottom: "20px", + padding: "30px 5px", + }; + + const confirmationCodeText = { + fontSize: "30px", + textAlign: "center" as const, + verticalAlign: "middle", + };