Skip to content

Commit 28e11c2

Browse files
maayan1maayan1
committed
notification for products recommendation
1 parent d9a0442 commit 28e11c2

File tree

1 file changed

+242
-0
lines changed

1 file changed

+242
-0
lines changed

‎content-samples/react/emails/notifications/novu-similar-products-recommedation.tsx‎

Lines changed: 242 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,242 @@
1+
import React from 'react';
2+
import {
3+
Body,
4+
Container,
5+
Column,
6+
Head,
7+
Heading,
8+
Hr,
9+
Html,
10+
Img,
11+
Link,
12+
Row,
13+
Section,
14+
Text,
15+
Preview,
16+
Tailwind
17+
} from "@react-email/components";
18+
19+
20+
21+
interface NovuAddToCartAlertProps {
22+
username: string;
23+
productName: string;
24+
logoImg: string;
25+
linkToUnsubscribe: string;
26+
productList: Array<{name: string; description: string; image: string}>
27+
}
28+
29+
export const NovuAddToCartAlert = ({
30+
username,
31+
productName,
32+
logoImg,
33+
linkToUnsubscribe,
34+
productList,
35+
}: NovuAddToCartAlertProps) => {
36+
37+
return(
38+
<Html>
39+
<Head />
40+
<Preview>Check out these amazing products we've picked just for you!</Preview>
41+
42+
<Tailwind>
43+
<Body style={main}>
44+
<Container style={container}>
45+
<Section style={iconContainer}>
46+
<Img
47+
src={logoImg}
48+
width="80"
49+
height="74"
50+
alt="Novu Logo"
51+
style={centerImage}
52+
/>
53+
</Section>
54+
<Heading style={h1}>
55+
Hello {username}, check out these amazing products!
56+
</Heading>
57+
<Text style={subheading}>
58+
We've hand-picked some items we think you'll love:
59+
</Text>
60+
61+
<Section>
62+
<Row style={productRow}>
63+
{productList.slice(0, 2).map((product, index) => (
64+
<Column key={index} style={productColumn}>
65+
<Img src={product.image} alt={product.name} style={imageStyle} />
66+
<Text style={productNameStyle}>{product.name}</Text>
67+
<Text style={productDescriptionStyle}>{product.description}</Text>
68+
</Column>
69+
))}
70+
</Row>
71+
<Row style={productRow}>
72+
{productList.slice(2, 4).map((product, index) => (
73+
<Column key={index} style={productColumn}>
74+
<Img src={product.image} alt={product.name} style={imageStyle} />
75+
<Text style={productNameStyle}>{product.name}</Text>
76+
<Text style={productDescriptionStyle}>{product.description}</Text>
77+
</Column>
78+
))}
79+
</Row>
80+
</Section>
81+
82+
<Text style={text}>
83+
Love what you see? <br/>Discover more products tailored just for you!
84+
<br/> Need assistance? We're just a click away and ready to help with any questions.
85+
</Text>
86+
87+
<Text style={footer}>
88+
Best regards,<br/> Support Team
89+
</Text>
90+
91+
<Hr style={hr} />
92+
93+
<Section style={footerSection}>
94+
<Img
95+
src={logoImg}
96+
width="42"
97+
height="42"
98+
alt={username}
99+
style={footerLogoStyle}
100+
/>
101+
<Text style={footer}>
102+
<br/>{productName}
103+
</Text>
104+
</Section>
105+
106+
<Text style={footer}>
107+
If you don't want to receive these alerts in the future,{' '}
108+
<Link href={linkToUnsubscribe} style={link}>click here</Link>
109+
{' '}to change your notification settings.
110+
</Text>
111+
</Container>
112+
</Body>
113+
</Tailwind>
114+
</Html>
115+
);
116+
};
117+
118+
const main = {
119+
backgroundColor: "#f8c8dc",
120+
fontFamily: 'Arial, sans-serif',
121+
};
122+
123+
const container = {
124+
margin: "0 auto",
125+
padding: "20px 0 48px",
126+
width: "580px",
127+
};
128+
129+
const iconContainer = {
130+
marginTop: "32px"
131+
};
132+
133+
const h1 = {
134+
color: "#ff69b4",
135+
fontSize: "24px",
136+
fontWeight: "bold",
137+
margin: "30px 0",
138+
padding: "0",
139+
};
140+
141+
const subheading = {
142+
color: "#c71585",
143+
fontSize: "18px",
144+
lineHeight: "26px",
145+
margin: "0 0 20px",
146+
};
147+
148+
const productRow = {
149+
display: 'flex',
150+
justifyContent: 'center',
151+
alignItems: 'flex-start',
152+
margin: '0 0 20px',
153+
};
154+
155+
const productColumn = {
156+
width: '50%',
157+
padding: '0 10px',
158+
boxSizing: 'border-box' as const,
159+
};
160+
161+
const imageStyle = {
162+
display: 'block',
163+
marginLeft: 'auto',
164+
marginRight: 'auto',
165+
width: "182px",
166+
height: "235px",
167+
objectFit: "cover" as const,
168+
borderRadius: "2px",
169+
border: "4px solid #ff69b4",
170+
};
171+
172+
const productNameStyle = {
173+
color: "#ff69b4",
174+
fontSize: "16px",
175+
fontWeight: "bold",
176+
margin: "10px 0 8px",
177+
};
178+
179+
const productDescriptionStyle = {
180+
color: "#c71585",
181+
fontSize: "14px",
182+
lineHeight: "20px",
183+
margin: "0",
184+
textAlign: "center" as const,
185+
};
186+
187+
const text = {
188+
color: '#c71585',
189+
fontSize: '16px',
190+
lineHeight: '24px',
191+
margin: '24px 0',
192+
};
193+
194+
const footer = {
195+
color: '#c71585',
196+
fontSize: '14px',
197+
lineHeight: '24px',
198+
};
199+
200+
const hr = {
201+
borderColor: '#e5e7eb',
202+
margin: '20px 0',
203+
};
204+
205+
const link = {
206+
color: '#3b82f6',
207+
textDecoration: 'none',
208+
};
209+
210+
const footerSection = {
211+
display: 'flex',
212+
flexDirection: 'column' as const,
213+
alignItems: 'center',
214+
gap: '10px',
215+
};
216+
217+
const footerLogoStyle = {
218+
display: 'block',
219+
margin: '0 auto',
220+
};
221+
222+
const centerImage = {
223+
display: 'block',
224+
margin: '0 auto',
225+
};
226+
227+
NovuAddToCartAlert.PreviewProps = {
228+
username: "Noa",
229+
productName: "",
230+
productLink: "",
231+
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`,
232+
linkToUnsubscribe: "https://google.com",
233+
productImage: "",
234+
productList: [
235+
{ 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" },
236+
{ 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" },
237+
{ 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" },
238+
{ 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" },
239+
]
240+
} as NovuAddToCartAlertProps;
241+
242+
export default NovuAddToCartAlert;

0 commit comments

Comments
 (0)