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..c08390d --- /dev/null +++ b/content-samples/react/emails/notifications/novu-credit-alert.tsx @@ -0,0 +1,339 @@ +import React from 'react'; +import { + Body, + Column, + Container, + Head, + Heading, + Hr, + Html, + Img, + Link, + Preview, + Row, + 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: number = 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: + + + 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 AlertIcon = () => ( + + + + + +); + +const LineChartIcon = () => ( + + + + + +); + +const CreditCardIcon = () => ( + + + + +); + +const ProgressBar = ({usagePrecent}) => { +return ( +
+
+
); +}; + +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', + marginBottom: 0 +}; + +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: '0 16px 16px 16px', + marginBottom: '0 auto', +}; + +const infoIcon: React.CSSProperties | undefined = { + marginRight: '8px', + color: '#DA0685', + verticalAlign: 'middle', + marginTop: "17px", + height: "24", + fill: "none", + stroke: "currentColor", + strokeWidth: "2", + strokeLinecap: "round", + strokeLinejoin: "round" +}; + +const progressBar = { + width: '100%', + backgroundColor: '#e5e7eb', + borderRadius: '9999px', + height: '16px', + margin: '8px 0' +}; + +const progressFill = (usagePrecent: number) => ({ + backgroundColor: '#DA0685', + height: '16px', + borderRadius: '9999px', + width: `${usagePrecent}%` +}); + +const button = { + backgroundColor: '#3b82f6', + borderRadius: '4px', + color: '#ffffff', + fontSize: '16px', + fontWeight: 'bold', + 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 logoColumn = { + width: '42px', + paddingRight: '12px', +}; + +const companyDetails = { + ...footer, + whiteSpace: 'pre-line' +}; + +const link = { + color: '#3b82f6', +}; + +const list = { + ...text, + paddingLeft: '24px', + margin: '0 0 16px', +}; + +const highlight = { + ...text, + color: '#DA3688', + fontWeight: 'bold', + display: 'inline', + margin: "5px", +}; + +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: 'Tel Aviv, Israel', + 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; 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",