Skip to content

Commit 7552bda

Browse files
KamilMarshalKamilMarshal
committed
Creating email templates for autereply and sending message to Company
1 parent 2d7f282 commit 7552bda

2 files changed

Lines changed: 203 additions & 0 deletions

File tree

‎src/emailTemplates/contactUsEmail.jsx‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import {
2+
Body,
3+
Container,
4+
Head,
5+
Hr,
6+
Html,
7+
Img,
8+
Preview,
9+
Text,
10+
} from "@react-email/components";
11+
import * as React from "react";
12+
import {Tailwind} from "@react-email/tailwind";
13+
14+
export const contactUsEmail = ({category, username, email, message}) => {
15+
const previewText = `${username} send us a message via the contact form on our website!`;
16+
17+
return (
18+
<Html>
19+
<Head/>
20+
<Preview>{previewText}</Preview>
21+
<Tailwind>
22+
<Body style={main}>
23+
<Container style={container}>
24+
<Img
25+
src={`https://kamilmarshal.github.io/docwire/static/media/logoDocWire.1b7fc94e1a27836aa427.JPG`}
26+
width="170"
27+
alt="DocWire Logo"
28+
style={logo}
29+
/>
30+
<Text style={paragraph}>{previewText}</Text>
31+
<Text style={paragraph}>
32+
Email: {email}<br/>
33+
Category: {category}
34+
</Text>
35+
<Text style={paragraph}>
36+
Message: "{message}"
37+
</Text>
38+
<Hr style={hr}/>
39+
<Text style={footer}>
40+
Reply as soon as possible.
41+
</Text>
42+
</Container>
43+
</Body>
44+
</Tailwind>
45+
</Html>
46+
)
47+
}
48+
49+
50+
const main = {
51+
backgroundColor: "#ffffff",
52+
fontFamily:
53+
'-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
54+
display: "flex",
55+
justifyContent : "center"
56+
};
57+
58+
const container = {
59+
margin: "0 auto",
60+
padding: "20px 0 48px",
61+
justifyContent : "center",
62+
display: "flex",
63+
width: "60vw"
64+
};
65+
66+
const logo = {
67+
margin: "0 auto",
68+
};
69+
70+
const paragraph = {
71+
fontSize: "16px",
72+
lineHeight: "26px",
73+
};
74+
75+
const hr = {
76+
borderColor: "#cccccc",
77+
margin: "20px 0",
78+
};
79+
80+
const footer = {
81+
color: "#8898aa",
82+
fontSize: "12px",
83+
}
84+
export default contactUsEmail

‎src/emailTemplates/thanksForYourEmail.jsx‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
import {
2+
Body,
3+
Button,
4+
Container,
5+
Head,
6+
Hr,
7+
Html,
8+
Img,
9+
Preview,
10+
Section,
11+
Text,
12+
} from "@react-email/components";
13+
import * as React from "react";
14+
import {Tailwind} from "@react-email/tailwind";
15+
16+
export const thanksForYourEmail = ({username}) => {
17+
const previewText = `Thank you ${username} for Contacting DocWire!`;
18+
19+
return (
20+
<Html>
21+
<Head/>
22+
<Preview>{previewText}</Preview>
23+
<Tailwind>
24+
<Body style={main}>
25+
<Container style={container}>
26+
<Img
27+
src={`https://kamilmarshal.github.io/docwire/static/media/logoDocWire.1b7fc94e1a27836aa427.JPG`}
28+
width="170"
29+
alt="DocWire Logo"
30+
style={logo}
31+
/>
32+
<Text style={paragraph}>Dear {username},</Text>
33+
<Text style={paragraph}>
34+
Thanks for getting in touch! We know how important it is to get immediate help which is why
35+
we promise to do everything we can to get back to you as soon as possible.
36+
</Text>
37+
<Text style={paragraph}>
38+
While you wait, feel free to explore our website for more information about our products.
39+
Should you have any urgent matters, please do not hesitate to contact us directly at
40+
info@docwire.io
41+
</Text>
42+
43+
<Section style={btnContainer}>
44+
<Button style={button} href="https://kamilmarshal.github.io/docwire">
45+
Our Website
46+
</Button>
47+
</Section>
48+
<Text style={paragraph}>
49+
We appreciate your interest in Docwire SDK. We look forward to assisting you and
50+
will be in touch soon!
51+
<br/>
52+
Best Regards,
53+
<br/>
54+
The Team at DocWire
55+
</Text>
56+
<Hr style={hr}/>
57+
<Text style={footer}>
58+
If you were not expecting this, you can ignore this email.<br/>If you are concerned about your account's safety, please reply to info@docwire.io to get in touch with us.
59+
</Text>
60+
</Container>
61+
62+
</Body>
63+
</Tailwind>
64+
</Html>
65+
)
66+
}
67+
68+
69+
const main = {
70+
backgroundColor: "#ffffff",
71+
fontFamily:
72+
'-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
73+
display: "flex",
74+
justifyContent : "center"
75+
};
76+
77+
const container = {
78+
margin: "0 auto",
79+
padding: "20px 0 48px",
80+
justifyContent : "center",
81+
display: "flex",
82+
width: "60vw"
83+
};
84+
85+
const logo = {
86+
margin: "0 auto",
87+
};
88+
89+
const paragraph = {
90+
fontSize: "16px",
91+
lineHeight: "26px",
92+
};
93+
94+
const btnContainer = {
95+
textAlign: "center",
96+
width: "10vw"
97+
};
98+
99+
const button = {
100+
backgroundColor: "#5F51E8",
101+
borderRadius: "3px",
102+
color: "#fff",
103+
fontSize: "16px",
104+
textDecoration: "none",
105+
textAlign: "center",
106+
display: "block",
107+
padding: "12px",
108+
};
109+
110+
const hr = {
111+
borderColor: "#cccccc",
112+
margin: "20px 0",
113+
};
114+
115+
const footer = {
116+
color: "#8898aa",
117+
fontSize: "12px",
118+
}
119+
export default thanksForYourEmail

0 commit comments

Comments
 (0)