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>
+  );
+}