Switch from Loops to Resend for transactional emails

QUICK_START.md

@@ -97,7 +97,7 @@ INFISCAL_STRIPE_SECRET_KEY =  ""
 INFISCAL_STRIPE_WEBHOOK_SECRET = ""
 
 # third party services
-INFISCAL_LOOPS_API_KEY = "" # you can leave as empty string if NODE_ENV = development
+INFISCAL_RESEND_API_KEY = "" # you can leave as empty string if NODE_ENV = development
 INFISCAL_OPENROUTER_API_KEY = ""
 
 # better auth secrets

apps/api/package.json

@@ -41,11 +41,11 @@
 		"hono-openapi": "^0.4.8",
 		"hono-party": "^0.0.13",
 		"lodash.throttle": "^4.1.1",
-		"loops": "^5.0.1",
 		"openai": "^5.9.0",
 		"partyserver": "^0.0.72",
 		"partysocket": "1.1.4",
 		"postgres": "^3.4.7",
+		"resend": "^6.9.2",
 		"stripe": "^18.3.0",
 		"y-partykit": "^0.0.33",
 		"y-partyserver": "^0.0.45",

apps/api/src/lib/auth.ts

@@ -11,7 +11,7 @@ import { AppContext } from '@/index';
 import { retryable } from '@/lib/utils';
 import { BillingService } from '@/services/billing/Billing.service';
 import { UsageService } from '@/services/billing/Usage.service';
-import { LoopsService } from '@/services/third-party/Loops.service';
+import { ResendService } from '@/services/third-party/Resend.service';
 import { betterAuthConfig } from '../../better-auth.config';
 
 export const useAuth: (
@@ -21,7 +21,7 @@ export const useAuth: (
   const db = useDb(ctx);
   const billingService = new BillingService(ctx);
   const usageService = new UsageService(ctx);
-  const loopsService = new LoopsService(ctx);
+  const resendService = new ResendService(ctx);
 
   const options = {
     trustedOrigins: [env.FE_APP_URL],
@@ -34,33 +34,25 @@ export const useAuth: (
       user: {
         create: {
           after: async (user) => {
-            await Promise.all([
-              retryable(() =>
-                loopsService.createContact({
-                  email: user.email,
-                  name: user.name,
-                })
-              ),
-              retryable(async () => {
-                // check if user is invited to any organization, if so they dont need to be onboarded
-                const db = useDb(ctx);
-                const invitations = await db
-                  .select()
-                  .from(schema.invitation)
-                  .where(eq(schema.invitation.email, user.email))
-                  .limit(1);
-
-                if (invitations.length === 0) {
-                  return;
-                }
-
-                // create user as onboarded
-                await db
-                  .update(schema.user)
-                  .set({ isOnboarded: true })
-                  .where(eq(schema.user.id, user.id));
-              }),
-            ]);
+            await retryable(async () => {
+              // check if user is invited to any organization, if so they dont need to be onboarded
+              const db = useDb(ctx);
+              const invitations = await db
+                .select()
+                .from(schema.invitation)
+                .where(eq(schema.invitation.email, user.email))
+                .limit(1);
+
+              if (invitations.length === 0) {
+                return;
+              }
+
+              // create user as onboarded
+              await db
+                .update(schema.user)
+                .set({ isOnboarded: true })
+                .where(eq(schema.user.id, user.id));
+            });
           },
         },
       },
@@ -99,7 +91,7 @@ export const useAuth: (
         sendInvitationEmail: async (data) => {
           const inviteLink = `${env.FE_APP_URL}/accept-invitation/${data.id}`;
 
-          await loopsService.sendTransactionalEmail('org_invitation', data.email, {
+          await resendService.sendTransactionalEmail('org_invitation', data.email, {
             invited_by_username: data.inviter.user.name,
             invited_by_email: data.inviter.user.email,
             org_name: data.organization.name,
@@ -163,7 +155,7 @@ export const useAuth: (
       sendOnSignUp: true,
       autoSignInAfterVerification: true,
       sendVerificationEmail: async (data) => {
-        await loopsService.sendTransactionalEmail('verification_code', data.user.email, {
+        await resendService.sendTransactionalEmail('verification_code', data.user.email, {
           verification_url: data.url,
         });
       },

apps/api/src/services/third-party/Resend.service.ts

@@ -0,0 +1,76 @@
+import { Context } from 'hono';
+import { Resend } from 'resend';
+import { AppContext } from '@/index';
+import { buildOrgInvitationEmail } from './emails/org-invitation';
+import { buildVerificationEmail } from './emails/verification';
+
+type TransactionalEmailTypes = 'verification_code' | 'org_invitation';
+type TransactionEmailParams = {
+  verification_code: {
+    params: {
+      verification_url: string;
+    };
+  };
+  org_invitation: {
+    params: {
+      invited_by_username: string;
+      invited_by_email: string;
+      org_name: string;
+      invite_link: string;
+    };
+  };
+};
+
+type TransactionEmailPayload<T extends TransactionalEmailTypes> = T extends TransactionalEmailTypes
+  ? TransactionEmailParams[T]['params']
+  : never;
+
+const FROM_ADDRESS = 'CoderScreen <team@coderscreen.com>';
+
+const EMAIL_BUILDERS: {
+  [K in TransactionalEmailTypes]: (params: TransactionEmailPayload<K>) => {
+    subject: string;
+    html: string;
+  };
+} = {
+  verification_code: buildVerificationEmail,
+  org_invitation: buildOrgInvitationEmail,
+};
+
+export class ResendService {
+  private client: Resend;
+
+  constructor(private readonly ctx: Context<AppContext>) {
+    this.client = new Resend(this.ctx.env.INFISCAL_RESEND_API_KEY);
+  }
+
+  async sendTransactionalEmail<T extends TransactionalEmailTypes>(
+    type: T,
+    email: string,
+    params: TransactionEmailPayload<T>
+  ): Promise<void> {
+    const { subject, html } = EMAIL_BUILDERS[type](params as any);
+
+    if (this.ctx.env.NODE_ENV === 'development') {
+      console.log('Skipping email in development. Details:', {
+        type,
+        email,
+        subject,
+        params,
+      });
+      return;
+    }
+
+    const { error } = await this.client.emails.send({
+      from: FROM_ADDRESS,
+      to: email,
+      subject,
+      html,
+    });
+
+    if (error) {
+      console.error('Failed to send email:', error);
+      throw new Error(`Failed to send email: ${error.message}`);
+    }
+  }
+}

apps/api/src/services/third-party/emails/layout.ts

@@ -0,0 +1,43 @@
+const LOGO_SVG = `<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="32" height="32"><path fill="#1860fb" d="m118.8 111.3l47.7 28.7-83.4 50-50.1-28.6z"/><path fill="#1860fb" d="m33 60.6l51.8 28.7v100.7l-51.8-28.7z"/><path fill="#1860fb" d="m118.8 11.2l47.7 28.8v100.9l-47.7-28.8z"/><path fill="#1860fb" d="m118 11.5l47.2 28.6-82.6 50.1-49.6-28.6z"/></svg>`;
+
+export function emailLayout(content: string): string {
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+</head>
+<body style="margin:0;padding:0;background-color:#f5f4f3;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;">
+  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#f5f4f3;padding:40px 20px;">
+    <tr>
+      <td align="center">
+        <!-- Logo -->
+        <table role="presentation" width="480" cellpadding="0" cellspacing="0">
+          <tr>
+            <td align="center" style="padding:0 0 24px;">
+              ${LOGO_SVG}
+            </td>
+          </tr>
+        </table>
+        <!-- Card -->
+        <table role="presentation" width="480" cellpadding="0" cellspacing="0" style="background-color:#ffffff;border-radius:8px;border:1px solid #e5e1dd;">
+          ${content}
+        </table>
+        <!-- Footer -->
+        <table role="presentation" width="480" cellpadding="0" cellspacing="0">
+          <tr>
+            <td align="center" style="padding:24px 0 0;">
+              <p style="margin:0;font-size:12px;color:#726b65;">CoderScreen</p>
+            </td>
+          </tr>
+        </table>
+      </td>
+    </tr>
+  </table>
+</body>
+</html>`;
+}
+
+export function emailButton(href: string, label: string): string {
+  return `<a href="${href}" style="display:inline-block;padding:10px 24px;background-color:#1860fb;color:#ffffff;font-size:14px;font-weight:500;text-decoration:none;border-radius:6px;">${label}</a>`;
+}

apps/api/src/services/third-party/emails/org-invitation.ts

@@ -0,0 +1,35 @@
+import { emailButton, emailLayout } from './layout';
+
+interface OrgInvitationEmailParams {
+  invited_by_username: string;
+  invited_by_email: string;
+  org_name: string;
+  invite_link: string;
+}
+
+export function buildOrgInvitationEmail(params: OrgInvitationEmailParams) {
+  return {
+    subject: `${params.invited_by_username} invited you to ${params.org_name}`,
+    html: emailLayout(`
+          <tr>
+            <td style="padding:36px 36px 16px;">
+              <h1 style="margin:0;font-size:20px;font-weight:600;color:#0a0806;">Join ${params.org_name}</h1>
+            </td>
+          </tr>
+          <tr>
+            <td style="padding:0 36px 24px;">
+              <p style="margin:0;font-size:14px;line-height:22px;color:#726b65;"><strong style="color:#0a0806;">${params.invited_by_username}</strong> (${params.invited_by_email}) has invited you to collaborate on CoderScreen.</p>
+            </td>
+          </tr>
+          <tr>
+            <td style="padding:0 36px 24px;">
+              ${emailButton(params.invite_link, 'Accept invitation')}
+            </td>
+          </tr>
+          <tr>
+            <td style="padding:0 36px 36px;border-top:1px solid #e5e1dd;">
+              <p style="margin:16px 0 0;font-size:12px;line-height:18px;color:#726b65;">If you weren't expecting this invitation, you can safely ignore this email.</p>
+            </td>
+          </tr>`),
+  };
+}

apps/api/src/services/third-party/emails/verification.ts

@@ -0,0 +1,32 @@
+import { emailButton, emailLayout } from './layout';
+
+interface VerificationEmailParams {
+  verification_url: string;
+}
+
+export function buildVerificationEmail(params: VerificationEmailParams) {
+  return {
+    subject: 'Verify your email address',
+    html: emailLayout(`
+          <tr>
+            <td style="padding:36px 36px 16px;">
+              <h1 style="margin:0;font-size:20px;font-weight:600;color:#0a0806;">Verify your email</h1>
+            </td>
+          </tr>
+          <tr>
+            <td style="padding:0 36px 24px;">
+              <p style="margin:0;font-size:14px;line-height:22px;color:#726b65;">Click the button below to verify your email address and get started with CoderScreen.</p>
+            </td>
+          </tr>
+          <tr>
+            <td style="padding:0 36px 24px;">
+              ${emailButton(params.verification_url, 'Verify email')}
+            </td>
+          </tr>
+          <tr>
+            <td style="padding:0 36px 36px;border-top:1px solid #e5e1dd;">
+              <p style="margin:16px 0 0;font-size:12px;line-height:18px;color:#726b65;">If you didn't create an account, you can safely ignore this email.</p>
+            </td>
+          </tr>`),
+  };
+}

apps/api/worker-configuration.d.ts

@@ -13,7 +13,7 @@ declare namespace Cloudflare {
 		INFISCAL_STRIPE_SECRET_KEY: string;
 		INFISCAL_STRIPE_WEBHOOK_SECRET: string;
 		INFISCAL_DATABASE_URL: string;
-		INFISCAL_LOOPS_API_KEY: string;
+		INFISCAL_RESEND_API_KEY: string;
 		INFISCAL_OPENROUTER_API_KEY: string;
 		INFISCAL_BETTER_AUTH_URL: string;
 		INFISCAL_BETTER_AUTH_SECRET: string;
@@ -34,7 +34,7 @@ type StringifyValues<EnvType extends Record<string, unknown>> = {
 	[Binding in keyof EnvType]: EnvType[Binding] extends string ? EnvType[Binding] : string;
 };
 declare namespace NodeJS {
-	interface ProcessEnv extends StringifyValues<Pick<Cloudflare.Env, "ASSETS_URL" | "NODE_ENV" | "FE_APP_URL" | "FREE_PLAN_ID" | "USE_TUNNEL_FOR_PREVIEW" | "INFISCAL_STRIPE_PUBLISHABLE_KEY" | "INFISCAL_STRIPE_SECRET_KEY" | "INFISCAL_STRIPE_WEBHOOK_SECRET" | "INFISCAL_DATABASE_URL" | "INFISCAL_LOOPS_API_KEY" | "INFISCAL_OPENROUTER_API_KEY" | "INFISCAL_BETTER_AUTH_URL" | "INFISCAL_BETTER_AUTH_SECRET" | "INFISCAL_GOOGLE_CLIENT_ID" | "INFISCAL_GOOGLE_CLIENT_SECRET" | "INFISCAL_GITHUB_CLIENT_ID" | "INFISCAL_GITHUB_CLIENT_SECRET">> {}
+	interface ProcessEnv extends StringifyValues<Pick<Cloudflare.Env, "ASSETS_URL" | "NODE_ENV" | "FE_APP_URL" | "FREE_PLAN_ID" | "USE_TUNNEL_FOR_PREVIEW" | "INFISCAL_STRIPE_PUBLISHABLE_KEY" | "INFISCAL_STRIPE_SECRET_KEY" | "INFISCAL_STRIPE_WEBHOOK_SECRET" | "INFISCAL_DATABASE_URL" | "INFISCAL_RESEND_API_KEY" | "INFISCAL_OPENROUTER_API_KEY" | "INFISCAL_BETTER_AUTH_URL" | "INFISCAL_BETTER_AUTH_SECRET" | "INFISCAL_GOOGLE_CLIENT_ID" | "INFISCAL_GOOGLE_CLIENT_SECRET" | "INFISCAL_GITHUB_CLIENT_ID" | "INFISCAL_GITHUB_CLIENT_SECRET">> {}
 }
 
 // Begin runtime types