From 2386c95edd5baa729d4bba3fdada3783b31b1f0c Mon Sep 17 00:00:00 2001 From: MussiM Date: Tue, 10 Sep 2024 20:59:03 +0300 Subject: [PATCH 1/4] new example for emails notifications - credit usage --- .../notifications/novu-credit-alert.tsx | 281 ++++++++++++++++++ content-samples/react/package-lock.json | 4 +- 2 files changed, 283 insertions(+), 2 deletions(-) create mode 100644 content-samples/react/emails/notifications/novu-credit-alert.tsx diff --git a/content-samples/react/emails/notifications/novu-credit-alert.tsx b/content-samples/react/emails/notifications/novu-credit-alert.tsx new file mode 100644 index 0000000..39db903 --- /dev/null +++ b/content-samples/react/emails/notifications/novu-credit-alert.tsx @@ -0,0 +1,281 @@ +import React from 'react'; +import { + Body, + Container, + Head, + Heading, + Hr, + Html, + Img, + Link, + Preview, + Section, + Text +} from '@react-email/components'; + +interface NovuCreditUsageAlertEmailProps { + companyName: string, + logoImg: string; + address: string; + linkToPricing: string; + linkToUnsubscribe: string; + customerName: string, + usage: number, + amount: number, + packagesList: Array<{name: string; amount: string; price: string}> +}; + +const NovuCreditUsageAlertEmail = ({ + companyName, + logoImg, + address, + linkToPricing, + linkToUnsubscribe, + customerName, + usage, + amount, + packagesList +}: NovuCreditUsageAlertEmailProps) => { + const usagePrecent = Math.round(usage / amount * 100); + return ( + + + Credit Usage Alert - You've used {`${usagePrecent}`}% of your monthly credit + + +
+ + + + + +
+ Credit Usage Alert + + Hello {customerName}, + + + Thank you for using our services. We want to inform you that you have used {usagePrecent}% of your monthly credit. + + +
+ + + + + + + Your Credit Status + +
+
+
+ Credit used: {usage}/{amount} +
+ + + To ensure you can continue enjoying our service without interruption, we recommend considering purchasing an additional credit package. + + +
+ + + + + + Purchase Additional Credits + + Choose the package that suits you: +
    + { + packagesList.map(({name, amount, price}, indx) => +
  • {name}: {amount} - {price}
    • + ) + } +
+ + Upgrade {companyName} Plan + +
+ + + If you have any questions or need further information, please don't hesitate to contact us. We're here to help! + + + + Best regards,
The {companyName} Support Team + + +
+ +
+ {companyName} + + {companyName}
{address} + +
+ + + + If you don't want to receive these alerts in the future,{' '} + click here + {' '}to change your notification settings. + + + + + ); +}; + +const main = { + backgroundColor: '#f3f4f6', + fontFamily: '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif', +}; + +const container = { + backgroundColor: '#ffffff', + margin: '0 auto', + padding: '24px', + marginBottom: '24px', + maxWidth: '600px', + borderRadius: '8px', + boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)', +}; + +const iconContainer = { + textAlign: 'center' as const, +}; + +const h1 = { + color: '#1f2937', + fontSize: '24px', + fontWeight: 'bold', + textAlign: 'center' as const, + margin: '16px 0 24px', +}; + +const h2 = { + color: '#1f2937', + fontWeight: 'bold', + fontSize: '20px', + verticalAlign: 'middle' +}; + +const text = { + color: '#4b5563', + fontSize: '16px', + lineHeight: '24px', +}; + +const icon: React.CSSProperties | undefined = { + width: "48", + height: "48", + fill: "none", + stroke: "currentColor", + strokeWidth: "2", + strokeLinecap: "round", + strokeLinejoin: "round", + color: '#DA3688', + marginBottom: '16px', +}; + +const infoBox: React.CSSProperties | undefined = { + backgroundColor: '#FFF2FA', + border: '1px solid #FF968A', + borderRadius: '8px', + padding: '16px', + marginBottom: '24px', +}; + +const infoIcon = { + marginRight: '8px', + color: '#DA0685', + verticalAlign: 'middle' +}; + +const progressBar = { + width: '100%', + backgroundColor: '#e5e7eb', + borderRadius: '9999px', + height: '16px', + marginBottom: '8px', + marginTop: '8px' +}; + +const progressFill = { + backgroundColor: '#DA0685', + height: '16px', + borderRadius: '9999px', +}; + +const button = { + backgroundColor: '#3b82f6', + borderRadius: '4px', + color: '#ffffff', + fontSize: '16px', + fontWeight: 'bold', + textDecoration: 'none', + textAlign: 'center' as const, + display: 'block', + padding: '12px 16px', +}; + +const hr = { + borderColor: '#e5e7eb', + margin: '20px 0', +}; + +const footer = { + color: '#6b7280', + fontSize: '14px', + lineHeight: '24px', +}; + +const link = { + color: '#3b82f6', + textDecoration: 'none', +}; + +const list = { + ...text, + paddingLeft: '24px', + margin: '0 0 16px', +}; + +const highlight = { + color: '#DA3688', + fontWeight: 'bold', +}; + +NovuCreditUsageAlertEmail.PreviewProps = { + companyName: "Novu", + logoImg: `https://images.spr.so/cdn-cgi/imagedelivery/j42No7y-dcokJuNgXeA0ig/dca73b36-cf39-4e28-9bc7-8a0d0cd8ac70/standalone-gradient2x_2/w=128,quality=90,fit=scale-down`, + address: '', + linkToPricing: "https://novu.co/pricing/?utm_campaign=docs_top_nav", + linkToUnsubscribe: "https://google.com", + customerName: "Mussi", + usage: 80, + amount: 130, + packagesList: [{ + name: 'BUSINESS', + amount: '250K events/month', + price: '$250' + }, + { + name: 'ENTERPRISE', + amount: '5M events/month', + price: `Let's Talk` + }] + } as NovuCreditUsageAlertEmailProps; + +export default NovuCreditUsageAlertEmail \ No newline at end of file diff --git a/content-samples/react/package-lock.json b/content-samples/react/package-lock.json index e205b7d..8e9b0bb 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", From 370ae8d0625a0e07b58fadf494af330ba9f921a5 Mon Sep 17 00:00:00 2001 From: MussiM Date: Tue, 10 Sep 2024 23:25:08 +0300 Subject: [PATCH 2/4] Changing section to Section and style corrections --- .../notifications/novu-credit-alert.tsx | 52 +++++++++++++------ 1 file changed, 36 insertions(+), 16 deletions(-) diff --git a/content-samples/react/emails/notifications/novu-credit-alert.tsx b/content-samples/react/emails/notifications/novu-credit-alert.tsx index 39db903..bf711ac 100644 --- a/content-samples/react/emails/notifications/novu-credit-alert.tsx +++ b/content-samples/react/emails/notifications/novu-credit-alert.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { Body, + Column, Container, Head, Heading, @@ -9,8 +10,9 @@ import { Img, Link, Preview, + Row, Section, - Text + Text, } from '@react-email/components'; interface NovuCreditUsageAlertEmailProps { @@ -70,7 +72,7 @@ const NovuCreditUsageAlertEmail = ({ Your Credit Status
-
+
Credit used: {usage}/{amount} @@ -113,17 +115,24 @@ const NovuCreditUsageAlertEmail = ({
-
- {companyName} - - {companyName}
{address} - -
+
+ + + {companyName} + + + + {`${companyName} + ${address}`} + + + +
@@ -212,11 +221,12 @@ const progressBar = { marginTop: '8px' }; -const progressFill = { +const progressFill = (usagePrecent: number) => ({ backgroundColor: '#DA0685', height: '16px', borderRadius: '9999px', -}; + width: `${usagePrecent}%` +}); const button = { backgroundColor: '#3b82f6', @@ -241,6 +251,16 @@ const footer = { lineHeight: '24px', }; +const logoColumn = { + width: '42px', + paddingRight: '12px', +}; + +const companyDetails = { + ...footer, + whiteSpace: 'pre-line' +}; + const link = { color: '#3b82f6', textDecoration: 'none', @@ -260,7 +280,7 @@ const highlight = { NovuCreditUsageAlertEmail.PreviewProps = { companyName: "Novu", logoImg: `https://images.spr.so/cdn-cgi/imagedelivery/j42No7y-dcokJuNgXeA0ig/dca73b36-cf39-4e28-9bc7-8a0d0cd8ac70/standalone-gradient2x_2/w=128,quality=90,fit=scale-down`, - address: '', + address: 'Tel Aviv, Israel', linkToPricing: "https://novu.co/pricing/?utm_campaign=docs_top_nav", linkToUnsubscribe: "https://google.com", customerName: "Mussi", From 8995846c701d7db6e8ede27ef4cc7a4c46bb5649 Mon Sep 17 00:00:00 2001 From: MussiM Date: Wed, 11 Sep 2024 12:57:29 +0300 Subject: [PATCH 3/4] Division into subcomponents --- .../notifications/novu-credit-alert.tsx | 62 ++++++++++++------- 1 file changed, 39 insertions(+), 23 deletions(-) diff --git a/content-samples/react/emails/notifications/novu-credit-alert.tsx b/content-samples/react/emails/notifications/novu-credit-alert.tsx index bf711ac..bdd1fb0 100644 --- a/content-samples/react/emails/notifications/novu-credit-alert.tsx +++ b/content-samples/react/emails/notifications/novu-credit-alert.tsx @@ -38,7 +38,7 @@ const NovuCreditUsageAlertEmail = ({ amount, packagesList }: NovuCreditUsageAlertEmailProps) => { - const usagePrecent = Math.round(usage / amount * 100); + const usagePrecent: number = Math.round(usage / amount * 100); return ( @@ -46,11 +46,7 @@ const NovuCreditUsageAlertEmail = ({
- - - - - +
Credit Usage Alert @@ -62,18 +58,10 @@ const NovuCreditUsageAlertEmail = ({
- - - - - + Your Credit Status -
-
-
+ Credit used: {usage}/{amount}
@@ -83,18 +71,14 @@ const NovuCreditUsageAlertEmail = ({
- - - - + Purchase Additional Credits Choose the package that suits you:
    { packagesList.map(({name, amount, price}, indx) => -
  • {name}: {amount} - {price}
    • - ) +
  • {name}: {amount} - {price}
    • ) }
( + + + + + +); + +const LineChartIcon = () => ( + + + + + +); + +const CreditCardIcon = () => ( + + + + +); + +const ProgressBar = ({usagePrecent}) => { +return ( +
+
+
); +}; + const main = { backgroundColor: '#f3f4f6', fontFamily: '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif', @@ -298,4 +314,4 @@ NovuCreditUsageAlertEmail.PreviewProps = { }] } as NovuCreditUsageAlertEmailProps; -export default NovuCreditUsageAlertEmail \ No newline at end of file +export default NovuCreditUsageAlertEmail; From 60f4d9ffb28d6fcd9d2f056a3d468351e701d8e8 Mon Sep 17 00:00:00 2001 From: MussiM Date: Thu, 12 Sep 2024 10:08:55 +0300 Subject: [PATCH 4/4] Changing string to Text tag --- .../notifications/novu-credit-alert.tsx | 72 ++++++++++++------- 1 file changed, 47 insertions(+), 25 deletions(-) diff --git a/content-samples/react/emails/notifications/novu-credit-alert.tsx b/content-samples/react/emails/notifications/novu-credit-alert.tsx index bdd1fb0..c08390d 100644 --- a/content-samples/react/emails/notifications/novu-credit-alert.tsx +++ b/content-samples/react/emails/notifications/novu-credit-alert.tsx @@ -48,21 +48,33 @@ const NovuCreditUsageAlertEmail = ({
+ Credit Usage Alert Hello {customerName}, - - Thank you for using our services. We want to inform you that you have used {usagePrecent}% of your monthly credit. - + + + Thank you for using our services. We want to inform you that you have used + + {usagePrecent}% + of your monthly credit. +
- - - Your Credit Status - + + + + + + Your Credit Status + + - Credit used: {usage}/{amount} + + Credit used: + {usage}/{amount} +
@@ -70,10 +82,14 @@ const NovuCreditUsageAlertEmail = ({
- - - Purchase Additional Credits - + + + + + + Purchase Additional Credits + + Choose the package that suits you:
    { @@ -139,9 +155,7 @@ const AlertIcon = () => ( ); const LineChartIcon = () => ( - + @@ -149,7 +163,7 @@ const LineChartIcon = () => ( ); const CreditCardIcon = () => ( - + @@ -193,7 +207,8 @@ const h2 = { color: '#1f2937', fontWeight: 'bold', fontSize: '20px', - verticalAlign: 'middle' + verticalAlign: 'middle', + marginBottom: 0 }; const text = { @@ -218,14 +233,21 @@ const infoBox: React.CSSProperties | undefined = { backgroundColor: '#FFF2FA', border: '1px solid #FF968A', borderRadius: '8px', - padding: '16px', - marginBottom: '24px', + padding: '0 16px 16px 16px', + marginBottom: '0 auto', }; -const infoIcon = { +const infoIcon: React.CSSProperties | undefined = { marginRight: '8px', color: '#DA0685', - verticalAlign: 'middle' + verticalAlign: 'middle', + marginTop: "17px", + height: "24", + fill: "none", + stroke: "currentColor", + strokeWidth: "2", + strokeLinecap: "round", + strokeLinejoin: "round" }; const progressBar = { @@ -233,8 +255,7 @@ const progressBar = { backgroundColor: '#e5e7eb', borderRadius: '9999px', height: '16px', - marginBottom: '8px', - marginTop: '8px' + margin: '8px 0' }; const progressFill = (usagePrecent: number) => ({ @@ -250,7 +271,6 @@ const button = { color: '#ffffff', fontSize: '16px', fontWeight: 'bold', - textDecoration: 'none', textAlign: 'center' as const, display: 'block', padding: '12px 16px', @@ -279,7 +299,6 @@ const companyDetails = { const link = { color: '#3b82f6', - textDecoration: 'none', }; const list = { @@ -289,8 +308,11 @@ const list = { }; const highlight = { + ...text, color: '#DA3688', fontWeight: 'bold', + display: 'inline', + margin: "5px", }; NovuCreditUsageAlertEmail.PreviewProps = {