welcome email

app/auth/mutations/signup.ts

@@ -3,6 +3,7 @@ import { resolver, SecurePassword } from "blitz";
 import db, { GlobalRole, MembershipRole } from "db";
 import { Signup } from "../validations";
 import { computeEncryptionKey } from "db/_encryption";
+import { welcomeMailer } from "mailers/welcome-mailer";
 
 export default resolver.pipe(resolver.zod(Signup), async ({ email, password, fullName }, ctx) => {
 	const hashedPassword = await SecurePassword.hash(password.trim());
@@ -34,7 +35,12 @@ export default resolver.pipe(resolver.zod(Signup), async ({ email, password, ful
 		shouldShowWelcomeMessage: true,
 	});
 
-	// TODO: send welcome email
+	await (
+		await welcomeMailer({
+			to: user.email,
+			userName: user.fullName,
+		})
+	).send();
 
 	return user;
 });

mailers/renderer.ts

@@ -195,11 +195,9 @@ function getMaizzleParams(templateName: string, locals: Record<string, string>)
 			},
 			company: {
 				name: "Capsule Corp. Dev Pte. Ltd.",
-				address: `
+				address: `<br>39 Robinson Rd, #11-01<br>Singapore 068911`,
-    <br>39 Robinson Rd, #11-01
-    <br>Singapore 068911
-    `,
 				product: "Shellphone",
+				sender: "Mokhtar",
 			},
 			googleFonts: "family=Nunito+Sans:wght@400;700",
 			year: () => new Date().getFullYear(),

mailers/templates/forgot-password.html

@@ -16,11 +16,11 @@ bodyClass: bg-gray-postmark-lighter
 										<td class="px-45 py-24">
 											<div class="text-base">
 												<h1 class="mt-0 text-2xl font-bold text-left text-gray-postmark-darker">
-													Hi {{name}},
+													Hi {{ name }},
 												</h1>
 												<p class="mt-6 mb-20 text-base leading-24 text-gray-postmark-dark">
-													You recently requested to reset your password for your
+													You recently requested to reset your password for your {{ page
-													{{page.company.product}} account. Use the button below to reset it.
+													.company.product}} account. Use the button below to reset it.
 													<strong
 														>This password reset is only valid for the next 24
 														hours.</strong
@@ -33,7 +33,7 @@ bodyClass: bg-gray-postmark-lighter
 																<tr>
 																	<td align="center" class="text-base">
 																		<a
-																			href="{{action_url}}"
+																			href="{{ action_url }}"
 																			class="button button--green"
 																			target="_blank"
 																			>Reset your password</a
@@ -72,7 +72,7 @@ bodyClass: bg-gray-postmark-lighter
 																	text-gray-postmark-dark
 																"
 															>
-																{{action_url}}
+																{{ action_url }}
 															</p>
 														</td>
 													</tr>

mailers/templates/welcome.html

@@ -0,0 +1,53 @@
+---
+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="px-45 py-24">
+											<div class="text-base">
+												<h1 class="mt-0 text-2xl font-bold text-left text-gray-postmark-darker">
+													Welcome {{ name }}!
+												</h1>
+												<p class="mt-6 mb-20 text-base leading-24 text-gray-postmark-dark">
+													First of all, thanks for signing up and welcome aboard!
+												</p>
+												<p class="mt-6 mb-20 text-base leading-24 text-gray-postmark-dark">
+													My name is Mokhtar and I built {{ page.company.product }} after
+													growing tired of paying exorbitant charges for international
+													communications and getting frustrated over the lack of decent
+													consumer-oriented cloud phone solutions.
+												</p>
+												<p class="mt-6 mb-20 text-base leading-24 text-gray-postmark-dark">
+													If you ever need help or have feedback, please don't hesitate to
+													reach out by email to
+													<a href="mailto:mokhtar@shellphone.app">mokhtar@shellphone.app</a>
+													or simply reply to this email.
+												</p>
+												<p class="mt-6 mb-20 text-base leading-24 text-gray-postmark-dark">
+													Take care!
+													<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>

mailers/welcome-mailer.ts

@@ -0,0 +1,34 @@
+import previewEmail from "preview-email";
+
+import { sendEmail } from "integrations/aws-ses";
+import { render } from "./renderer";
+
+type ResetPasswordMailer = {
+	to: string;
+	userName: string;
+};
+
+export async function welcomeMailer({ to, userName }: ResetPasswordMailer) {
+	const html = await render("welcome", { name: userName });
+	const msg = {
+		from: "mokhtar@shellphone.app",
+		to,
+		subject: "Welcome to Shellphone",
+		html,
+	};
+
+	return {
+		async send() {
+			if (process.env.NODE_ENV === "production") {
+				await sendEmail({
+					recipients: [msg.to],
+					subject: msg.subject,
+					html: msg.html,
+				});
+			} else {
+				// Preview email in the browser
+				return await previewEmail(msg);
+			}
+		},
+	};
+}