subscribe thank you email

mailers/subscribe-notification-mailer.ts

@@ -0,0 +1,35 @@
+import previewEmail from "preview-email";
+
+import { sendEmail } from "integrations/aws-ses";
+import { render } from "./renderer";
+
+type ResetPasswordMailer = {
+	to: string;
+	userName: string;
+};
+
+export async function subscribeNotificationMailer({ to, userName }: ResetPasswordMailer) {
+	const origin = process.env.APP_ORIGIN || process.env.BLITZ_DEV_SERVER_ORIGIN;
+	const phoneSettingsUrl = `${origin}/settings/phone`;
+	const html = await render("subscribe-notification", { name: userName, phoneSettingsUrl });
+	const msg = {
+		from: "mokhtar@shellphone.app",
+		to,
+		subject: "Your Shellphone subscription",
+		html,
+	};
+
+	return {
+		async send() {
+			if (process.env.NODE_ENV === "production") {
+				return sendEmail({
+					recipients: [msg.to],
+					subject: msg.subject,
+					html: msg.html,
+				});
+			}
+
+			return previewEmail(msg);
+		},
+	};
+}

mailers/templates/forgot-password.html

@@ -36,8 +36,9 @@ bodyClass: bg-gray-postmark-lighter
 																			href="{{ action_url }}"
 																			class="button button--green"
 																			target="_blank"
-																			>Reset your password</a
 																		>
+																			Reset your password
+																		</a>
 																	</td>
 																</tr>
 															</table>

mailers/templates/subscribe-notification.html

@@ -0,0 +1,57 @@
+---
+bodyClass: bg-gray-postmark-lighter
+---
+
+<extends src="mailers/layouts/main.html">
+	<block name="template">
+		<table class="email-wrapper w-full bg-gray-postmark-lighter font-sans">
+			<tr>
+				<td align="center">
+					<table class="email-content w-full">
+						<component src="mailers/components/header.html"></component>
+						<tr>
+							<td class="email-body w-full">
+								<table align="center" class="email-body_inner w-570 bg-white mx-auto sm:w-full">
+									<tr>
+										<td class="p-45">
+											<div class="text-base">
+												<h1 class="mt-0 text-2xl font-bold text-left text-gray-postmark-darker">
+													Hi {{ name }},
+												</h1>
+												<p class="mt-6 mb-20 text-base leading-24 text-gray-postmark-dark">
+													First of all, <span class="italic">merci beaucoup</span> for supporting
+													{{ page.company.product }} with your money.
+													As an independent developer, it means a lot as any money that comes in
+													means I'm able to dedicate my time to work on {{ page.company.product }}.
+												</p>
+												<p class="mt-6 mb-20 text-base leading-24 text-gray-postmark-dark">
+													Your subscription gives you access to all {{ page.company.product }}
+													features.<br>
+													Make sure you set up your phone number in
+													<a href="{{ phoneSettingsUrl }}">your settings</a>
+													if you haven't done so yet.
+												</p>
+												<p class="mt-6 mb-20 text-base leading-24 text-gray-postmark-dark">
+													As always, if you have any questions or feedback,
+													please don't hesitate to reach out.
+													Thank you for choosing {{ page.company.product }} to be a part of
+													your journey!
+												</p>
+												<p class="mt-6 mb-20 text-base leading-24 text-gray-postmark-dark">
+													Take care!
+													<br /><br />{{ page.company.sender }} <br />
+													Founder at {{ page.company.product }}
+												</p>
+											</div>
+										</td>
+									</tr>
+								</table>
+							</td>
+						</tr>
+						<!--<component src="mailers/components/footer.html"></component>-->
+					</table>
+				</td>
+			</tr>
+		</table>
+	</block>
+</extends>