From 28e11c281d5dd5b9f18bea2a8bad0f1d9d9f909a Mon Sep 17 00:00:00 2001 From: Maayan Simkins Date: Mon, 16 Sep 2024 23:36:17 +0300 Subject: [PATCH 1/6] notification for products recommendation --- .../novu-similar-products-recommedation.tsx | 242 ++++++++++++++++++ 1 file changed, 242 insertions(+) create mode 100644 content-samples/react/emails/notifications/novu-similar-products-recommedation.tsx diff --git a/content-samples/react/emails/notifications/novu-similar-products-recommedation.tsx b/content-samples/react/emails/notifications/novu-similar-products-recommedation.tsx new file mode 100644 index 0000000..f0a4055 --- /dev/null +++ b/content-samples/react/emails/notifications/novu-similar-products-recommedation.tsx @@ -0,0 +1,242 @@ +import React from 'react'; +import { + Body, + Container, + Column, + Head, + Heading, + Hr, + Html, + Img, + Link, + Row, + Section, + Text, + Preview, + Tailwind +} from "@react-email/components"; + + + +interface NovuAddToCartAlertProps { + username: string; + productName: string; + logoImg: string; + linkToUnsubscribe: string; + productList: Array<{name: string; description: string; image: string}> +} + +export const NovuAddToCartAlert = ({ + username, + productName, + logoImg, + linkToUnsubscribe, + productList, +}: NovuAddToCartAlertProps) => { + + return( + + + Check out these amazing products we've picked just for you! + + + + +
+ Novu Logo +
+ + Hello {username}, check out these amazing products! + + + We've hand-picked some items we think you'll love: + + +
+ + {productList.slice(0, 2).map((product, index) => ( + + {product.name} + {product.name} + {product.description} + + ))} + + + {productList.slice(2, 4).map((product, index) => ( + + {product.name} + {product.name} + {product.description} + + ))} + +
+ + + Love what you see?
Discover more products tailored just for you! +
Need assistance? We're just a click away and ready to help with any questions. + + + + Best regards,
Support Team + + +
+ +
+ {username} + +
{productName} + +
+ + + If you don't want to receive these alerts in the future,{' '} + click here + {' '}to change your notification settings. + + + + + + ); +}; + +const main = { + backgroundColor: "#f8c8dc", + fontFamily: 'Arial, sans-serif', +}; + +const container = { + margin: "0 auto", + padding: "20px 0 48px", + width: "580px", +}; + +const iconContainer = { + marginTop: "32px" +}; + +const h1 = { + color: "#ff69b4", + fontSize: "24px", + fontWeight: "bold", + margin: "30px 0", + padding: "0", +}; + +const subheading = { + color: "#c71585", + fontSize: "18px", + lineHeight: "26px", + margin: "0 0 20px", +}; + +const productRow = { + display: 'flex', + justifyContent: 'center', + alignItems: 'flex-start', + margin: '0 0 20px', +}; + +const productColumn = { + width: '50%', + padding: '0 10px', + boxSizing: 'border-box' as const, +}; + +const imageStyle = { + display: 'block', + marginLeft: 'auto', + marginRight: 'auto', + width: "182px", + height: "235px", + objectFit: "cover" as const, + borderRadius: "2px", + border: "4px solid #ff69b4", +}; + +const productNameStyle = { + color: "#ff69b4", + fontSize: "16px", + fontWeight: "bold", + margin: "10px 0 8px", +}; + +const productDescriptionStyle = { + color: "#c71585", + fontSize: "14px", + lineHeight: "20px", + margin: "0", + textAlign: "center" as const, +}; + +const text = { + color: '#c71585', + fontSize: '16px', + lineHeight: '24px', + margin: '24px 0', +}; + +const footer = { + color: '#c71585', + fontSize: '14px', + lineHeight: '24px', +}; + +const hr = { + borderColor: '#e5e7eb', + margin: '20px 0', +}; + +const link = { + color: '#3b82f6', + textDecoration: 'none', +}; + +const footerSection = { + display: 'flex', + flexDirection: 'column' as const, + alignItems: 'center', + gap: '10px', +}; + +const footerLogoStyle = { + display: 'block', + margin: '0 auto', +}; + +const centerImage = { + display: 'block', + margin: '0 auto', +}; + +NovuAddToCartAlert.PreviewProps = { + username: "Noa", + productName: "", + productLink: "", + 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`, + linkToUnsubscribe: "https://google.com", + productImage: "", + productList: [ + { name: "Classic White Sneakers", description: "Timeless style for everyday wear", image: "https://images.unsplash.com/photo-1549298916-b41d501d3772?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=300&q=80" }, + { name: "Leather Messenger Bag", description: "Perfect for work or casual outings", image: "https://images.unsplash.com/photo-1553062407-98eeb64c6a62?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=300&q=80" }, + { name: "Stainless Steel Watch", description: "Elegant timepiece for any occasion", image: "https://images.unsplash.com/photo-1524592094714-0f0654e20314?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=300&q=80" }, + { name: "Polarized Sunglasses", description: "Protect your eyes in style", image: "https://images.unsplash.com/photo-1511499767150-a48a237f0083?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=300&q=80" }, + ] +} as NovuAddToCartAlertProps; + +export default NovuAddToCartAlert; \ No newline at end of file From 435e81c058e944c598896aa75802df86d6143421 Mon Sep 17 00:00:00 2001 From: Maayan Simkins Date: Tue, 17 Sep 2024 00:27:28 +0300 Subject: [PATCH 2/6] change row to grid --- .../novu-similar-products-recommedation.tsx | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/content-samples/react/emails/notifications/novu-similar-products-recommedation.tsx b/content-samples/react/emails/notifications/novu-similar-products-recommedation.tsx index f0a4055..4826237 100644 --- a/content-samples/react/emails/notifications/novu-similar-products-recommedation.tsx +++ b/content-samples/react/emails/notifications/novu-similar-products-recommedation.tsx @@ -58,7 +58,7 @@ export const NovuAddToCartAlert = ({ We've hand-picked some items we think you'll love: -
+
{productList.slice(0, 2).map((product, index) => ( @@ -144,18 +144,25 @@ const subheading = { lineHeight: "26px", margin: "0 0 20px", }; +const productTable = { + tableLayout: 'fixed' +} const productRow = { - display: 'flex', + display: 'grid', justifyContent: 'center', alignItems: 'flex-start', margin: '0 0 20px', + width: '100%', + gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)' }; const productColumn = { width: '50%', padding: '0 10px', - boxSizing: 'border-box' as const, + boxSizing: 'content-box' as const, + overflow: 'hidden', + textOverflow: 'ellipsis' }; const imageStyle = { @@ -232,9 +239,9 @@ NovuAddToCartAlert.PreviewProps = { linkToUnsubscribe: "https://google.com", productImage: "", productList: [ - { name: "Classic White Sneakers", description: "Timeless style for everyday wear", image: "https://images.unsplash.com/photo-1549298916-b41d501d3772?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=300&q=80" }, + { name: "Classic White Sneakers", description: "Timeless style for everyday wear just trying to add words for you ", image: "https://images.unsplash.com/photo-1549298916-b41d501d3772?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=300&q=80" }, { name: "Leather Messenger Bag", description: "Perfect for work or casual outings", image: "https://images.unsplash.com/photo-1553062407-98eeb64c6a62?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=300&q=80" }, - { name: "Stainless Steel Watch", description: "Elegant timepiece for any occasion", image: "https://images.unsplash.com/photo-1524592094714-0f0654e20314?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=300&q=80" }, + { name: "Stainless Steel Watch", description: "Elegant timepiece for any", image: "https://images.unsplash.com/photo-1524592094714-0f0654e20314?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=300&q=80" }, { name: "Polarized Sunglasses", description: "Protect your eyes in style", image: "https://images.unsplash.com/photo-1511499767150-a48a237f0083?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=300&q=80" }, ] } as NovuAddToCartAlertProps; From f1d137b4807abfc6c5d74bf8f2a611ecbb668a01 Mon Sep 17 00:00:00 2001 From: Maayan Simkins Date: Tue, 17 Sep 2024 00:48:43 +0300 Subject: [PATCH 3/6] minimal code for column alignment --- .../notifications/novu-similar-products-recommedation.tsx | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/content-samples/react/emails/notifications/novu-similar-products-recommedation.tsx b/content-samples/react/emails/notifications/novu-similar-products-recommedation.tsx index 4826237..bcdfac1 100644 --- a/content-samples/react/emails/notifications/novu-similar-products-recommedation.tsx +++ b/content-samples/react/emails/notifications/novu-similar-products-recommedation.tsx @@ -58,7 +58,7 @@ export const NovuAddToCartAlert = ({ We've hand-picked some items we think you'll love: -
+
{productList.slice(0, 2).map((product, index) => ( @@ -144,16 +144,13 @@ const subheading = { lineHeight: "26px", margin: "0 0 20px", }; -const productTable = { - tableLayout: 'fixed' -} + const productRow = { display: 'grid', justifyContent: 'center', alignItems: 'flex-start', margin: '0 0 20px', - width: '100%', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)' }; From 1cde749bd4b8d1307843eed8a6587e8d919d8683 Mon Sep 17 00:00:00 2001 From: Maayan Simkins Date: Tue, 17 Sep 2024 01:09:35 +0300 Subject: [PATCH 4/6] align vertically inside cell --- .../notifications/novu-similar-products-recommedation.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content-samples/react/emails/notifications/novu-similar-products-recommedation.tsx b/content-samples/react/emails/notifications/novu-similar-products-recommedation.tsx index bcdfac1..3f9b7d6 100644 --- a/content-samples/react/emails/notifications/novu-similar-products-recommedation.tsx +++ b/content-samples/react/emails/notifications/novu-similar-products-recommedation.tsx @@ -155,6 +155,7 @@ const productRow = { }; const productColumn = { + verticalAlign: 'top', width: '50%', padding: '0 10px', boxSizing: 'content-box' as const, @@ -163,7 +164,6 @@ const productColumn = { }; const imageStyle = { - display: 'block', marginLeft: 'auto', marginRight: 'auto', width: "182px", From 58584fd6f5cc97d57c4c822b26c3323e8f5226e3 Mon Sep 17 00:00:00 2001 From: Maayan Simkins Date: Tue, 17 Sep 2024 01:49:38 +0300 Subject: [PATCH 5/6] align the row to the center and add more padding between items --- .../novu-similar-products-recommedation.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/content-samples/react/emails/notifications/novu-similar-products-recommedation.tsx b/content-samples/react/emails/notifications/novu-similar-products-recommedation.tsx index 3f9b7d6..fe8843d 100644 --- a/content-samples/react/emails/notifications/novu-similar-products-recommedation.tsx +++ b/content-samples/react/emails/notifications/novu-similar-products-recommedation.tsx @@ -145,20 +145,24 @@ const subheading = { margin: "0 0 20px", }; +const productsTable = { + display: 'flex', + ustifyContent: 'center' +} const productRow = { display: 'grid', justifyContent: 'center', alignItems: 'flex-start', - margin: '0 0 20px', + paddingLeft: '3%', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)' }; const productColumn = { verticalAlign: 'top', width: '50%', - padding: '0 10px', - boxSizing: 'content-box' as const, + padding: '0 40px', + boxSizing: 'border-box' as const, overflow: 'hidden', textOverflow: 'ellipsis' }; From f17c372f698b9aeb432d4467effe201d0bc3e709 Mon Sep 17 00:00:00 2001 From: Maayan Simkins Date: Tue, 17 Sep 2024 10:30:15 +0300 Subject: [PATCH 6/6] clean code --- .../notifications/novu-similar-products-recommedation.tsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/content-samples/react/emails/notifications/novu-similar-products-recommedation.tsx b/content-samples/react/emails/notifications/novu-similar-products-recommedation.tsx index fe8843d..f89d0ce 100644 --- a/content-samples/react/emails/notifications/novu-similar-products-recommedation.tsx +++ b/content-samples/react/emails/notifications/novu-similar-products-recommedation.tsx @@ -145,11 +145,6 @@ const subheading = { margin: "0 0 20px", }; -const productsTable = { - display: 'flex', - ustifyContent: 'center' -} - const productRow = { display: 'grid', justifyContent: 'center',