subscribe thank you email

app/settings/api/queue/subscription-created.ts

@@ -9,6 +9,7 @@ import type { Metadata } from "integrations/paddle";
 import { translateSubscriptionStatus } from "integrations/paddle";
 import fetchMessagesQueue from "app/messages/api/queue/fetch-messages";
 import fetchCallsQueue from "app/phone-calls/api/queue/fetch-calls";
+import { subscribeNotificationMailer } from "../../../../mailers/subscribe-notification-mailer";
 
 const logger = appLogger.child({ queue: "subscription-created" });
 
@@ -33,8 +34,7 @@ export const subscriptionCreatedQueue = Queue<Payload>("api/queue/subscription-c
 	}
 
 	const isReturningSubscriber = organization.subscriptions.length > 0;
-	const orgOwner = organization.memberships.find((membership) => membership.role === MembershipRole.OWNER);
+	const orgOwner = organization.memberships.find((membership) => membership.role === MembershipRole.OWNER)!.user!;
-	const email = orgOwner!.user!.email;
 	await db.subscription.create({
 		data: {
 			organizationId,
@@ -80,7 +80,7 @@ export const subscriptionCreatedQueue = Queue<Payload>("api/queue/subscription-c
 			subject: "Welcome back to Shellphone",
 			text: "Welcome back to Shellphone",
 			html: "Welcome back to Shellphone",
-			recipients: [email],
+			recipients: [orgOwner.email],
 		}).catch((error) => {
 			logger.error(error);
 		});
@@ -88,14 +88,7 @@ export const subscriptionCreatedQueue = Queue<Payload>("api/queue/subscription-c
 		return;
 	}
 
-	sendEmail({
+	await (await subscribeNotificationMailer({ to: orgOwner.email, userName: orgOwner.fullName })).send();
-		subject: "Welcome to Shellphone",
-		text: `Welcome to Shellphone`,
-		html: `Welcome to Shellphone`,
-		recipients: [email],
-	}).catch((error) => {
-		logger.error(error);
-	});
 });
 
 export default subscriptionCreatedQueue;

db/schema.prisma

@@ -57,9 +57,9 @@ model Subscription {
 
 enum SubscriptionStatus {
   active
-  trialing
+  trialing // not used
   past_due
-  paused
+  paused // not used
   deleted
 }
 

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>