feat(email): send trial ending soon mails

packages/email/src/components/footer.tsx

@@ -22,8 +22,8 @@ export function Footer() {
 
         <br />
 
-        <Row>
-          <Column className="align-middle w-[40px]">
+        <Row className="mt-4">
+          <Column className="w-8">
             <Link href="https://git.new/openpanel">
               <Img
                 src={`${baseUrl}/icons/github.png`}
@@ -33,7 +33,7 @@ export function Footer() {
               />
             </Link>
           </Column>
-          <Column className="align-middle w-[40px]">
+          <Column className="w-8">
             <Link href="https://x.com/openpaneldev">
               <Img
                 src={`${baseUrl}/icons/x.png`}
@@ -43,8 +43,7 @@ export function Footer() {
               />
             </Link>
           </Column>
-
-          <Column className="align-middle">
+          <Column className="w-8">
             <Link href="https://go.openpanel.dev/discord">
               <Img
                 src={`${baseUrl}/icons/discord.png`}
@@ -54,8 +53,7 @@ export function Footer() {
               />
             </Link>
           </Column>
-
-          <Column className="align-middle">
+          <Column className="w-auto">
             <Link href="mailto:hello@openpanel.dev">
               <Img
                 src={`${baseUrl}/icons/email.png`}

packages/email/src/emails/index.tsx

@@ -3,6 +3,7 @@ import { EmailInvite, zEmailInvite } from './email-invite';
 import EmailResetPassword, {
   zEmailResetPassword,
 } from './email-reset-password';
+import TrailEndingSoon, { zTrailEndingSoon } from './trial-ending-soon';
 
 export const templates = {
   invite: {
@@ -17,6 +18,12 @@ export const templates = {
     Component: EmailResetPassword,
     schema: zEmailResetPassword,
   },
+  'trial-ending-soon': {
+    subject: (data: z.infer<typeof zTrailEndingSoon>) =>
+      'Your trial is ending soon',
+    Component: TrailEndingSoon,
+    schema: zTrailEndingSoon,
+  },
 } as const;
 
 export type Templates = typeof templates;

packages/email/src/emails/trial-ending-soon.tsx

@@ -0,0 +1,73 @@
+import { Button, Hr, Link, Text } from '@react-email/components';
+import React from 'react';
+import { z } from 'zod';
+import { Layout } from '../components/layout';
+
+export const zTrailEndingSoon = z.object({
+  url: z.string(),
+  organizationName: z.string(),
+});
+
+export type Props = z.infer<typeof zTrailEndingSoon>;
+export default TrailEndingSoon;
+export function TrailEndingSoon({
+  organizationName = 'Acme Co',
+  url = 'https://openpanel.dev',
+}: Props) {
+  const newUrl = new URL(url);
+  newUrl.searchParams.set('utm_source', 'email');
+  newUrl.searchParams.set('utm_medium', 'email');
+  newUrl.searchParams.set('utm_campaign', 'trial-ending-soon');
+  return (
+    <Layout>
+      <Text>Your trial period is ending soon for {organizationName}!</Text>
+      <Text>
+        When your trial ends, you'll still receive incoming events but you won't
+        be able to see them in the dashboard until you upgrade.
+      </Text>
+      <Text>
+        <Link href={newUrl.toString()}>Upgrade to a paid plan</Link>
+      </Text>
+      <Hr />
+      <Text style={{ fontWeight: 'bold' }}>
+        Discover what you can do with OpenPanel:
+      </Text>
+      <Text>
+        🎯 <strong>Create Custom Funnels</strong> - Track user progression
+        through your key conversion paths and identify where users drop off
+      </Text>
+      <Text>
+        📈 <strong>User Retention Analysis</strong> - Understand how well you're
+        keeping users engaged over time with beautiful retention graphs
+      </Text>
+      <Text>
+        🗺️ <strong>User Journey Mapping</strong> - Follow individual user paths
+        through your application to understand their behavior and optimize their
+        experience
+      </Text>
+      <Text>
+        🔬 <strong>A/B Testing Analysis</strong> - Measure the impact of your
+        product changes with detailed conversion metrics and statistical
+        significance
+      </Text>
+      <Text>
+        📊 <strong>Custom Event Tracking</strong> - Track any user interaction
+        that matters to your business with our flexible event system
+      </Text>
+      <Text>
+        <Button
+          href={newUrl.toString()}
+          style={{
+            backgroundColor: '#0070f3',
+            color: 'white',
+            padding: '12px 20px',
+            borderRadius: '5px',
+            textDecoration: 'none',
+          }}
+        >
+          Upgrade Now to Unlock All Features
+        </Button>
+      </Text>
+    </Layout>
+  );
+}

packages/queue/src/queues.ts

@@ -76,6 +76,15 @@ export type CronQueuePayload =
   | CronQueuePayloadPing
   | CronQueuePayloadProject;
 
+export type MiscQueuePayloadTrialEndingSoon = {
+  type: 'trialEndingSoon';
+  payload: {
+    organizationId: string;
+  };
+};
+
+export type MiscQueuePayload = MiscQueuePayloadTrialEndingSoon;
+
 export type CronQueueType = CronQueuePayload['type'];
 
 export const eventsQueue = new Queue<EventsQueuePayload>('events', {
@@ -107,6 +116,13 @@ export const cronQueue = new Queue<CronQueuePayload>('cron', {
   },
 });
 
+export const miscQueue = new Queue<MiscQueuePayload>('misc', {
+  connection: getRedisQueue(),
+  defaultJobOptions: {
+    removeOnComplete: 10,
+  },
+});
+
 export type NotificationQueuePayload = {
   type: 'sendNotification';
   payload: {
@@ -123,3 +139,18 @@ export const notificationQueue = new Queue<NotificationQueuePayload>(
     },
   },
 );
+
+export function addTrialEndingSoonJob(organizationId: string, delay: number) {
+  return miscQueue.add(
+    'misc',
+    {
+      type: 'trialEndingSoon',
+      payload: {
+        organizationId,
+      },
+    },
+    {
+      delay,
+    },
+  );
+}

packages/trpc/src/routers/onboarding.ts

@@ -8,6 +8,7 @@ import { zOnboardingProject } from '@openpanel/validation';
 
 import { hashPassword } from '@openpanel/common/server';
 import { addDays } from 'date-fns';
+import { addTrialEndingSoonJob, miscQueue } from '../../../queue';
 import { createTRPCRouter, protectedProcedure, publicProcedure } from '../trpc';
 
 async function createOrGetOrganization(
@@ -18,16 +19,27 @@ async function createOrGetOrganization(
     return await getOrganizationBySlug(input.organizationId);
   }
 
+  const TRIAL_DURATION_IN_DAYS = 30;
+
   if (input.organization) {
-    return db.organization.create({
+    const organization = await db.organization.create({
       data: {
         id: await getId('organization', input.organization),
         name: input.organization,
         createdByUserId: user.id,
-        subscriptionEndsAt: addDays(new Date(), 30),
+        subscriptionEndsAt: addDays(new Date(), TRIAL_DURATION_IN_DAYS),
         subscriptionStatus: 'trialing',
       },
     });
+
+    if (!process.env.SELF_HOSTED) {
+      await addTrialEndingSoonJob(
+        organization.id,
+        1000 * 60 * 60 * 24 * TRIAL_DURATION_IN_DAYS * 0.9,
+      );
+    }
+
+    return organization;
   }
 
   return null;