@geekmidas/emailkit 0.0.1 → 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +0 -1
- package/dist/__tests__/client.spec.cjs +38 -13106
- package/dist/__tests__/client.spec.mjs +15 -13087
- package/dist/{client-7k6es7pg.cjs → client-Dc4Thg_P.cjs} +31 -3
- package/dist/client.cjs +1 -1
- package/dist/index.cjs +1 -1
- package/package.json +1 -1
- package/src/client.ts +3 -5
- package/src/types.ts +7 -4
- package/dist/chunk-CUT6urMc.cjs +0 -30
- package/dist/magic-string.es-BGRTPV9O.mjs +0 -1014
- package/dist/magic-string.es-BrLHy2bw.cjs +0 -1015
- package/dist/templates.cjs +0 -176
- package/dist/templates.mjs +0 -171
- package/src/templates.tsx +0 -182
package/dist/templates.cjs
DELETED
|
@@ -1,176 +0,0 @@
|
|
|
1
|
-
const require_chunk = require('./chunk-CUT6urMc.cjs');
|
|
2
|
-
const react_jsx_runtime = require_chunk.__toESM(require("react/jsx-runtime"));
|
|
3
|
-
|
|
4
|
-
//#region src/templates.tsx
|
|
5
|
-
const emailStyles = {
|
|
6
|
-
container: {
|
|
7
|
-
fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif",
|
|
8
|
-
lineHeight: 1.6,
|
|
9
|
-
color: "#333",
|
|
10
|
-
maxWidth: "600px",
|
|
11
|
-
margin: "0 auto",
|
|
12
|
-
padding: "20px"
|
|
13
|
-
},
|
|
14
|
-
heading: {
|
|
15
|
-
color: "#2c3e50",
|
|
16
|
-
marginBottom: "20px"
|
|
17
|
-
},
|
|
18
|
-
button: {
|
|
19
|
-
display: "inline-block",
|
|
20
|
-
padding: "12px 24px",
|
|
21
|
-
backgroundColor: "#3498db",
|
|
22
|
-
color: "#ffffff",
|
|
23
|
-
textDecoration: "none",
|
|
24
|
-
borderRadius: "4px",
|
|
25
|
-
fontWeight: "bold"
|
|
26
|
-
},
|
|
27
|
-
footer: {
|
|
28
|
-
marginTop: "40px",
|
|
29
|
-
paddingTop: "20px",
|
|
30
|
-
borderTop: "1px solid #eee",
|
|
31
|
-
fontSize: "14px",
|
|
32
|
-
color: "#666"
|
|
33
|
-
}
|
|
34
|
-
};
|
|
35
|
-
function EmailLayout({ children, preheader, title }) {
|
|
36
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("html", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("head", { children: [
|
|
37
|
-
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("meta", { charSet: "utf-8" }),
|
|
38
|
-
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("meta", {
|
|
39
|
-
name: "viewport",
|
|
40
|
-
content: "width=device-width, initial-scale=1.0"
|
|
41
|
-
}),
|
|
42
|
-
title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("title", { children: title }),
|
|
43
|
-
preheader && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
44
|
-
style: {
|
|
45
|
-
display: "none",
|
|
46
|
-
maxHeight: 0,
|
|
47
|
-
overflow: "hidden"
|
|
48
|
-
},
|
|
49
|
-
children: preheader
|
|
50
|
-
})
|
|
51
|
-
] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("body", {
|
|
52
|
-
style: {
|
|
53
|
-
margin: 0,
|
|
54
|
-
padding: 0,
|
|
55
|
-
backgroundColor: "#f4f4f4"
|
|
56
|
-
},
|
|
57
|
-
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
58
|
-
style: emailStyles.container,
|
|
59
|
-
children
|
|
60
|
-
})
|
|
61
|
-
})] });
|
|
62
|
-
}
|
|
63
|
-
function WelcomeEmail({ name, confirmationUrl }) {
|
|
64
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(EmailLayout, {
|
|
65
|
-
title: "Welcome!",
|
|
66
|
-
preheader: `Welcome to our service, ${name}!`,
|
|
67
|
-
children: [
|
|
68
|
-
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("h1", {
|
|
69
|
-
style: emailStyles.heading,
|
|
70
|
-
children: [
|
|
71
|
-
"Welcome, ",
|
|
72
|
-
name,
|
|
73
|
-
"!"
|
|
74
|
-
]
|
|
75
|
-
}),
|
|
76
|
-
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: "We're excited to have you on board. Your account has been successfully created." }),
|
|
77
|
-
confirmationUrl && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: "Please confirm your email address by clicking the button below:" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
|
|
78
|
-
style: {
|
|
79
|
-
textAlign: "center",
|
|
80
|
-
margin: "30px 0"
|
|
81
|
-
},
|
|
82
|
-
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
|
|
83
|
-
href: confirmationUrl,
|
|
84
|
-
style: emailStyles.button,
|
|
85
|
-
children: "Confirm Email"
|
|
86
|
-
})
|
|
87
|
-
})] }),
|
|
88
|
-
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
89
|
-
style: emailStyles.footer,
|
|
90
|
-
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: "If you have any questions, feel free to reply to this email." }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", { children: [
|
|
91
|
-
"Best regards,",
|
|
92
|
-
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("br", {}),
|
|
93
|
-
"The Team"
|
|
94
|
-
] })]
|
|
95
|
-
})
|
|
96
|
-
]
|
|
97
|
-
});
|
|
98
|
-
}
|
|
99
|
-
function PasswordResetEmail({ name, resetUrl, expiresIn }) {
|
|
100
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(EmailLayout, {
|
|
101
|
-
title: "Password Reset Request",
|
|
102
|
-
preheader: "Reset your password",
|
|
103
|
-
children: [
|
|
104
|
-
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
|
|
105
|
-
style: emailStyles.heading,
|
|
106
|
-
children: "Password Reset Request"
|
|
107
|
-
}),
|
|
108
|
-
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", { children: [
|
|
109
|
-
"Hi ",
|
|
110
|
-
name,
|
|
111
|
-
","
|
|
112
|
-
] }),
|
|
113
|
-
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: "We received a request to reset your password. Click the button below to create a new password:" }),
|
|
114
|
-
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
|
|
115
|
-
style: {
|
|
116
|
-
textAlign: "center",
|
|
117
|
-
margin: "30px 0"
|
|
118
|
-
},
|
|
119
|
-
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
|
|
120
|
-
href: resetUrl,
|
|
121
|
-
style: emailStyles.button,
|
|
122
|
-
children: "Reset Password"
|
|
123
|
-
})
|
|
124
|
-
}),
|
|
125
|
-
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", { children: [
|
|
126
|
-
"This link will expire in ",
|
|
127
|
-
expiresIn,
|
|
128
|
-
". If you didn't request a password reset, you can safely ignore this email."
|
|
129
|
-
] }),
|
|
130
|
-
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
131
|
-
style: emailStyles.footer,
|
|
132
|
-
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: "For security reasons, this link can only be used once." })
|
|
133
|
-
})
|
|
134
|
-
]
|
|
135
|
-
});
|
|
136
|
-
}
|
|
137
|
-
function NotificationEmail({ name, title, message, actionUrl, actionText = "View Details" }) {
|
|
138
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(EmailLayout, {
|
|
139
|
-
title,
|
|
140
|
-
preheader: message,
|
|
141
|
-
children: [
|
|
142
|
-
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
|
|
143
|
-
style: emailStyles.heading,
|
|
144
|
-
children: title
|
|
145
|
-
}),
|
|
146
|
-
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", { children: [
|
|
147
|
-
"Hi ",
|
|
148
|
-
name,
|
|
149
|
-
","
|
|
150
|
-
] }),
|
|
151
|
-
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: message }),
|
|
152
|
-
actionUrl && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
|
|
153
|
-
style: {
|
|
154
|
-
textAlign: "center",
|
|
155
|
-
margin: "30px 0"
|
|
156
|
-
},
|
|
157
|
-
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
|
|
158
|
-
href: actionUrl,
|
|
159
|
-
style: emailStyles.button,
|
|
160
|
-
children: actionText
|
|
161
|
-
})
|
|
162
|
-
}),
|
|
163
|
-
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
164
|
-
style: emailStyles.footer,
|
|
165
|
-
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: "This is an automated notification from our system." })
|
|
166
|
-
})
|
|
167
|
-
]
|
|
168
|
-
});
|
|
169
|
-
}
|
|
170
|
-
|
|
171
|
-
//#endregion
|
|
172
|
-
exports.EmailLayout = EmailLayout;
|
|
173
|
-
exports.NotificationEmail = NotificationEmail;
|
|
174
|
-
exports.PasswordResetEmail = PasswordResetEmail;
|
|
175
|
-
exports.WelcomeEmail = WelcomeEmail;
|
|
176
|
-
exports.emailStyles = emailStyles;
|
package/dist/templates.mjs
DELETED
|
@@ -1,171 +0,0 @@
|
|
|
1
|
-
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
-
|
|
3
|
-
//#region src/templates.tsx
|
|
4
|
-
const emailStyles = {
|
|
5
|
-
container: {
|
|
6
|
-
fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif",
|
|
7
|
-
lineHeight: 1.6,
|
|
8
|
-
color: "#333",
|
|
9
|
-
maxWidth: "600px",
|
|
10
|
-
margin: "0 auto",
|
|
11
|
-
padding: "20px"
|
|
12
|
-
},
|
|
13
|
-
heading: {
|
|
14
|
-
color: "#2c3e50",
|
|
15
|
-
marginBottom: "20px"
|
|
16
|
-
},
|
|
17
|
-
button: {
|
|
18
|
-
display: "inline-block",
|
|
19
|
-
padding: "12px 24px",
|
|
20
|
-
backgroundColor: "#3498db",
|
|
21
|
-
color: "#ffffff",
|
|
22
|
-
textDecoration: "none",
|
|
23
|
-
borderRadius: "4px",
|
|
24
|
-
fontWeight: "bold"
|
|
25
|
-
},
|
|
26
|
-
footer: {
|
|
27
|
-
marginTop: "40px",
|
|
28
|
-
paddingTop: "20px",
|
|
29
|
-
borderTop: "1px solid #eee",
|
|
30
|
-
fontSize: "14px",
|
|
31
|
-
color: "#666"
|
|
32
|
-
}
|
|
33
|
-
};
|
|
34
|
-
function EmailLayout({ children, preheader, title }) {
|
|
35
|
-
return /* @__PURE__ */ jsxs("html", { children: [/* @__PURE__ */ jsxs("head", { children: [
|
|
36
|
-
/* @__PURE__ */ jsx("meta", { charSet: "utf-8" }),
|
|
37
|
-
/* @__PURE__ */ jsx("meta", {
|
|
38
|
-
name: "viewport",
|
|
39
|
-
content: "width=device-width, initial-scale=1.0"
|
|
40
|
-
}),
|
|
41
|
-
title && /* @__PURE__ */ jsx("title", { children: title }),
|
|
42
|
-
preheader && /* @__PURE__ */ jsx("div", {
|
|
43
|
-
style: {
|
|
44
|
-
display: "none",
|
|
45
|
-
maxHeight: 0,
|
|
46
|
-
overflow: "hidden"
|
|
47
|
-
},
|
|
48
|
-
children: preheader
|
|
49
|
-
})
|
|
50
|
-
] }), /* @__PURE__ */ jsx("body", {
|
|
51
|
-
style: {
|
|
52
|
-
margin: 0,
|
|
53
|
-
padding: 0,
|
|
54
|
-
backgroundColor: "#f4f4f4"
|
|
55
|
-
},
|
|
56
|
-
children: /* @__PURE__ */ jsx("div", {
|
|
57
|
-
style: emailStyles.container,
|
|
58
|
-
children
|
|
59
|
-
})
|
|
60
|
-
})] });
|
|
61
|
-
}
|
|
62
|
-
function WelcomeEmail({ name, confirmationUrl }) {
|
|
63
|
-
return /* @__PURE__ */ jsxs(EmailLayout, {
|
|
64
|
-
title: "Welcome!",
|
|
65
|
-
preheader: `Welcome to our service, ${name}!`,
|
|
66
|
-
children: [
|
|
67
|
-
/* @__PURE__ */ jsxs("h1", {
|
|
68
|
-
style: emailStyles.heading,
|
|
69
|
-
children: [
|
|
70
|
-
"Welcome, ",
|
|
71
|
-
name,
|
|
72
|
-
"!"
|
|
73
|
-
]
|
|
74
|
-
}),
|
|
75
|
-
/* @__PURE__ */ jsx("p", { children: "We're excited to have you on board. Your account has been successfully created." }),
|
|
76
|
-
confirmationUrl && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("p", { children: "Please confirm your email address by clicking the button below:" }), /* @__PURE__ */ jsx("p", {
|
|
77
|
-
style: {
|
|
78
|
-
textAlign: "center",
|
|
79
|
-
margin: "30px 0"
|
|
80
|
-
},
|
|
81
|
-
children: /* @__PURE__ */ jsx("a", {
|
|
82
|
-
href: confirmationUrl,
|
|
83
|
-
style: emailStyles.button,
|
|
84
|
-
children: "Confirm Email"
|
|
85
|
-
})
|
|
86
|
-
})] }),
|
|
87
|
-
/* @__PURE__ */ jsxs("div", {
|
|
88
|
-
style: emailStyles.footer,
|
|
89
|
-
children: [/* @__PURE__ */ jsx("p", { children: "If you have any questions, feel free to reply to this email." }), /* @__PURE__ */ jsxs("p", { children: [
|
|
90
|
-
"Best regards,",
|
|
91
|
-
/* @__PURE__ */ jsx("br", {}),
|
|
92
|
-
"The Team"
|
|
93
|
-
] })]
|
|
94
|
-
})
|
|
95
|
-
]
|
|
96
|
-
});
|
|
97
|
-
}
|
|
98
|
-
function PasswordResetEmail({ name, resetUrl, expiresIn }) {
|
|
99
|
-
return /* @__PURE__ */ jsxs(EmailLayout, {
|
|
100
|
-
title: "Password Reset Request",
|
|
101
|
-
preheader: "Reset your password",
|
|
102
|
-
children: [
|
|
103
|
-
/* @__PURE__ */ jsx("h1", {
|
|
104
|
-
style: emailStyles.heading,
|
|
105
|
-
children: "Password Reset Request"
|
|
106
|
-
}),
|
|
107
|
-
/* @__PURE__ */ jsxs("p", { children: [
|
|
108
|
-
"Hi ",
|
|
109
|
-
name,
|
|
110
|
-
","
|
|
111
|
-
] }),
|
|
112
|
-
/* @__PURE__ */ jsx("p", { children: "We received a request to reset your password. Click the button below to create a new password:" }),
|
|
113
|
-
/* @__PURE__ */ jsx("p", {
|
|
114
|
-
style: {
|
|
115
|
-
textAlign: "center",
|
|
116
|
-
margin: "30px 0"
|
|
117
|
-
},
|
|
118
|
-
children: /* @__PURE__ */ jsx("a", {
|
|
119
|
-
href: resetUrl,
|
|
120
|
-
style: emailStyles.button,
|
|
121
|
-
children: "Reset Password"
|
|
122
|
-
})
|
|
123
|
-
}),
|
|
124
|
-
/* @__PURE__ */ jsxs("p", { children: [
|
|
125
|
-
"This link will expire in ",
|
|
126
|
-
expiresIn,
|
|
127
|
-
". If you didn't request a password reset, you can safely ignore this email."
|
|
128
|
-
] }),
|
|
129
|
-
/* @__PURE__ */ jsx("div", {
|
|
130
|
-
style: emailStyles.footer,
|
|
131
|
-
children: /* @__PURE__ */ jsx("p", { children: "For security reasons, this link can only be used once." })
|
|
132
|
-
})
|
|
133
|
-
]
|
|
134
|
-
});
|
|
135
|
-
}
|
|
136
|
-
function NotificationEmail({ name, title, message, actionUrl, actionText = "View Details" }) {
|
|
137
|
-
return /* @__PURE__ */ jsxs(EmailLayout, {
|
|
138
|
-
title,
|
|
139
|
-
preheader: message,
|
|
140
|
-
children: [
|
|
141
|
-
/* @__PURE__ */ jsx("h1", {
|
|
142
|
-
style: emailStyles.heading,
|
|
143
|
-
children: title
|
|
144
|
-
}),
|
|
145
|
-
/* @__PURE__ */ jsxs("p", { children: [
|
|
146
|
-
"Hi ",
|
|
147
|
-
name,
|
|
148
|
-
","
|
|
149
|
-
] }),
|
|
150
|
-
/* @__PURE__ */ jsx("p", { children: message }),
|
|
151
|
-
actionUrl && /* @__PURE__ */ jsx("p", {
|
|
152
|
-
style: {
|
|
153
|
-
textAlign: "center",
|
|
154
|
-
margin: "30px 0"
|
|
155
|
-
},
|
|
156
|
-
children: /* @__PURE__ */ jsx("a", {
|
|
157
|
-
href: actionUrl,
|
|
158
|
-
style: emailStyles.button,
|
|
159
|
-
children: actionText
|
|
160
|
-
})
|
|
161
|
-
}),
|
|
162
|
-
/* @__PURE__ */ jsx("div", {
|
|
163
|
-
style: emailStyles.footer,
|
|
164
|
-
children: /* @__PURE__ */ jsx("p", { children: "This is an automated notification from our system." })
|
|
165
|
-
})
|
|
166
|
-
]
|
|
167
|
-
});
|
|
168
|
-
}
|
|
169
|
-
|
|
170
|
-
//#endregion
|
|
171
|
-
export { EmailLayout, NotificationEmail, PasswordResetEmail, WelcomeEmail, emailStyles };
|
package/src/templates.tsx
DELETED
|
@@ -1,182 +0,0 @@
|
|
|
1
|
-
import type React from 'react';
|
|
2
|
-
import type { CSSProperties, ReactElement } from 'react';
|
|
3
|
-
|
|
4
|
-
// Common email styling utilities
|
|
5
|
-
export const emailStyles = {
|
|
6
|
-
container: {
|
|
7
|
-
fontFamily:
|
|
8
|
-
'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
|
|
9
|
-
lineHeight: 1.6,
|
|
10
|
-
color: '#333',
|
|
11
|
-
maxWidth: '600px',
|
|
12
|
-
margin: '0 auto',
|
|
13
|
-
padding: '20px',
|
|
14
|
-
} as CSSProperties,
|
|
15
|
-
|
|
16
|
-
heading: {
|
|
17
|
-
color: '#2c3e50',
|
|
18
|
-
marginBottom: '20px',
|
|
19
|
-
} as CSSProperties,
|
|
20
|
-
|
|
21
|
-
button: {
|
|
22
|
-
display: 'inline-block',
|
|
23
|
-
padding: '12px 24px',
|
|
24
|
-
backgroundColor: '#3498db',
|
|
25
|
-
color: '#ffffff',
|
|
26
|
-
textDecoration: 'none',
|
|
27
|
-
borderRadius: '4px',
|
|
28
|
-
fontWeight: 'bold',
|
|
29
|
-
} as CSSProperties,
|
|
30
|
-
|
|
31
|
-
footer: {
|
|
32
|
-
marginTop: '40px',
|
|
33
|
-
paddingTop: '20px',
|
|
34
|
-
borderTop: '1px solid #eee',
|
|
35
|
-
fontSize: '14px',
|
|
36
|
-
color: '#666',
|
|
37
|
-
} as CSSProperties,
|
|
38
|
-
};
|
|
39
|
-
|
|
40
|
-
// Base layout component for emails
|
|
41
|
-
export interface EmailLayoutProps {
|
|
42
|
-
children: React.ReactNode;
|
|
43
|
-
preheader?: string;
|
|
44
|
-
title?: string;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
export function EmailLayout({
|
|
48
|
-
children,
|
|
49
|
-
preheader,
|
|
50
|
-
title,
|
|
51
|
-
}: EmailLayoutProps): ReactElement {
|
|
52
|
-
return (
|
|
53
|
-
<html>
|
|
54
|
-
<head>
|
|
55
|
-
<meta charSet="utf-8" />
|
|
56
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
57
|
-
{title && <title>{title}</title>}
|
|
58
|
-
{preheader && (
|
|
59
|
-
<div style={{ display: 'none', maxHeight: 0, overflow: 'hidden' }}>
|
|
60
|
-
{preheader}
|
|
61
|
-
</div>
|
|
62
|
-
)}
|
|
63
|
-
</head>
|
|
64
|
-
<body style={{ margin: 0, padding: 0, backgroundColor: '#f4f4f4' }}>
|
|
65
|
-
<div style={emailStyles.container}>{children}</div>
|
|
66
|
-
</body>
|
|
67
|
-
</html>
|
|
68
|
-
);
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
// Example welcome email template
|
|
72
|
-
export interface WelcomeEmailProps {
|
|
73
|
-
name: string;
|
|
74
|
-
confirmationUrl?: string;
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
export function WelcomeEmail({
|
|
78
|
-
name,
|
|
79
|
-
confirmationUrl,
|
|
80
|
-
}: WelcomeEmailProps): ReactElement {
|
|
81
|
-
return (
|
|
82
|
-
<EmailLayout
|
|
83
|
-
title="Welcome!"
|
|
84
|
-
preheader={`Welcome to our service, ${name}!`}
|
|
85
|
-
>
|
|
86
|
-
<h1 style={emailStyles.heading}>Welcome, {name}!</h1>
|
|
87
|
-
<p>
|
|
88
|
-
We're excited to have you on board. Your account has been successfully
|
|
89
|
-
created.
|
|
90
|
-
</p>
|
|
91
|
-
{confirmationUrl && (
|
|
92
|
-
<>
|
|
93
|
-
<p>Please confirm your email address by clicking the button below:</p>
|
|
94
|
-
<p style={{ textAlign: 'center', margin: '30px 0' }}>
|
|
95
|
-
<a href={confirmationUrl} style={emailStyles.button}>
|
|
96
|
-
Confirm Email
|
|
97
|
-
</a>
|
|
98
|
-
</p>
|
|
99
|
-
</>
|
|
100
|
-
)}
|
|
101
|
-
<div style={emailStyles.footer}>
|
|
102
|
-
<p>If you have any questions, feel free to reply to this email.</p>
|
|
103
|
-
<p>
|
|
104
|
-
Best regards,
|
|
105
|
-
<br />
|
|
106
|
-
The Team
|
|
107
|
-
</p>
|
|
108
|
-
</div>
|
|
109
|
-
</EmailLayout>
|
|
110
|
-
);
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
// Example password reset template
|
|
114
|
-
export interface PasswordResetEmailProps {
|
|
115
|
-
name: string;
|
|
116
|
-
resetUrl: string;
|
|
117
|
-
expiresIn: string;
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
export function PasswordResetEmail({
|
|
121
|
-
name,
|
|
122
|
-
resetUrl,
|
|
123
|
-
expiresIn,
|
|
124
|
-
}: PasswordResetEmailProps): ReactElement {
|
|
125
|
-
return (
|
|
126
|
-
<EmailLayout title="Password Reset Request" preheader="Reset your password">
|
|
127
|
-
<h1 style={emailStyles.heading}>Password Reset Request</h1>
|
|
128
|
-
<p>Hi {name},</p>
|
|
129
|
-
<p>
|
|
130
|
-
We received a request to reset your password. Click the button below to
|
|
131
|
-
create a new password:
|
|
132
|
-
</p>
|
|
133
|
-
<p style={{ textAlign: 'center', margin: '30px 0' }}>
|
|
134
|
-
<a href={resetUrl} style={emailStyles.button}>
|
|
135
|
-
Reset Password
|
|
136
|
-
</a>
|
|
137
|
-
</p>
|
|
138
|
-
<p>
|
|
139
|
-
This link will expire in {expiresIn}. If you didn't request a password
|
|
140
|
-
reset, you can safely ignore this email.
|
|
141
|
-
</p>
|
|
142
|
-
<div style={emailStyles.footer}>
|
|
143
|
-
<p>For security reasons, this link can only be used once.</p>
|
|
144
|
-
</div>
|
|
145
|
-
</EmailLayout>
|
|
146
|
-
);
|
|
147
|
-
}
|
|
148
|
-
|
|
149
|
-
// Example notification template
|
|
150
|
-
export interface NotificationEmailProps {
|
|
151
|
-
name: string;
|
|
152
|
-
title: string;
|
|
153
|
-
message: string;
|
|
154
|
-
actionUrl?: string;
|
|
155
|
-
actionText?: string;
|
|
156
|
-
}
|
|
157
|
-
|
|
158
|
-
export function NotificationEmail({
|
|
159
|
-
name,
|
|
160
|
-
title,
|
|
161
|
-
message,
|
|
162
|
-
actionUrl,
|
|
163
|
-
actionText = 'View Details',
|
|
164
|
-
}: NotificationEmailProps): ReactElement {
|
|
165
|
-
return (
|
|
166
|
-
<EmailLayout title={title} preheader={message}>
|
|
167
|
-
<h1 style={emailStyles.heading}>{title}</h1>
|
|
168
|
-
<p>Hi {name},</p>
|
|
169
|
-
<p>{message}</p>
|
|
170
|
-
{actionUrl && (
|
|
171
|
-
<p style={{ textAlign: 'center', margin: '30px 0' }}>
|
|
172
|
-
<a href={actionUrl} style={emailStyles.button}>
|
|
173
|
-
{actionText}
|
|
174
|
-
</a>
|
|
175
|
-
</p>
|
|
176
|
-
)}
|
|
177
|
-
<div style={emailStyles.footer}>
|
|
178
|
-
<p>This is an automated notification from our system.</p>
|
|
179
|
-
</div>
|
|
180
|
-
</EmailLayout>
|
|
181
|
-
);
|
|
182
|
-
}
|