trypear · shrix1 · Jun 7, 2024 · Jun 7, 2024 · Jun 7, 2024 · Jun 7, 2024
diff --git a/.env.local.example b/.env.local.example
@@ -4,6 +4,7 @@ NEXT_PUBLIC_REDIRECT_URL=http://localhost:3000 # or the production URL (X) repla
 NEXT_PUBLIC_POSTHOG_KEY=key
 NEXT_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
 VERCEL_ENV=local
+RESEND_API_KEY=your_resend_api_key
 # PearAI server, must run locally
 PEARAI_SERVER_URL=http://localhost:8000
 
@@ -16,4 +17,4 @@ NEXT_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
 # for dynamic urls. (https://supabase.com/docs/guides/auth/redirect-urls#vercel-preview-urls)
 # process?.env?.NEXT_PUBLIC_VERCEL_URL 
 
-NEXT_PUBLIC_TEST_MODE_ENABLED=true # Set to true if running locally, false otherwise
+NEXT_PUBLIC_TEST_MODE_ENABLED=true # Set to true if running locally, false otherwise
diff --git a/app/api/mail/route.ts b/app/api/mail/route.ts
@@ -0,0 +1,31 @@
+import { Resend } from "resend";
+import { SelectEmailTemplate } from "@/components/email-templates";
+import { NextRequest, NextResponse } from "next/server";
+import { withAuth } from "@/utils/withAuth";
+
+const resend = new Resend(process.env.RESEND_API_KEY!);
+
+async function sendEmail(req: NextRequest) {
+  const body = await req.json();
+  const { to, subject, data } = body;
+  const EmailTemplate = SelectEmailTemplate(data);
+
+  try {
+    const { data, error } = await resend.emails.send({
+      from: "Acme <[email protected]>", // Pear AI <[email protected]>
+      to: [to],
+      subject,
+      react: EmailTemplate as JSX.Element,
+    });
+
+    if (error) {
+      return NextResponse.json({ error, status: 500 });
+    }
+
+    return NextResponse.json({ message: "Email sent!", data, status: 200 });
+  } catch (error) {
+    return NextResponse.json({ error, status: 500 });
+  }
+}
+
+export const POST = withAuth(sendEmail);
diff --git a/app/globals.css b/app/globals.css
@@ -151,6 +151,6 @@
 }
 
 .thin-bullets ul li::marker {
-  font-weight: normal; 
-  font-size: 0.75em; 
+  font-weight: normal;
+  font-size: 0.75em;
 }
diff --git a/components/email-templates/email-wrapper.tsx b/components/email-templates/email-wrapper.tsx
@@ -0,0 +1,71 @@
+import {
+  Html,
+  Preview,
+  Body,
+  Head,
+  Text,
+  Img,
+  Row,
+  Column,
+  Link,
+  Section,
+  Heading,
+} from "@react-email/components";
+import * as React from "react";
+import { Tailwind } from "@react-email/tailwind";
+
+type EmailWrapperProps = {
+  children: React.ReactNode;
+  previewText: string;
+  dir?: "ltr" | "rtl";
+};
+
+const EmailWrapper = ({ children, previewText, dir }: EmailWrapperProps) => {
+  return (
+    <Html lang="en" dir={dir}>
+      <Head>
+        <title>Pear AI | {previewText}</title>
+      </Head>
+      <Preview>{previewText as string}</Preview>
+      <Tailwind>
+        <Body className="mx-auto bg-gray-100 p-3">
+          <Section className="mx-auto mt-2 text-center">
+            <Section className="max-w-[180px]">
+              <Column align="right">
+                <Link href="https://trypear.ai" target="_blank">
+                  {/* <Img
+                    src={``} // emails supports only PNG images
+                    width="35"
+                    height="35"
+                    alt="pearai-logo"
+                    className="mx-auto"
+                    style={{ marginTop: "-0.1rem" }}
+                  /> */}
+                  LOGO HERE
+                </Link>
+              </Column>
+              <Column align="center">
+                <Heading as="h2">Pear AI</Heading>
+              </Column>
+            </Section>
+          </Section>
+
+          {children}
+
+          <Section className="mx-auto mt-2 text-center">
+            <Text className="-mt-2 text-xs text-gray-500">© 2023 Pear AI</Text>
+            <Link
+              className="-mt-4 text-xs text-blue-500 underline"
+              href="https://trypear.ai"
+              target="_blank"
+            >
+              Contact Us
+            </Link>
+          </Section>
+        </Body>
+      </Tailwind>
+    </Html>
+  );
+};
+
+export default EmailWrapper;
diff --git a/components/email-templates/index.ts b/components/email-templates/index.ts
@@ -0,0 +1,16 @@
+import WelcomeTemplate from "./welcome-template";
+
+export enum EmailTemplates {
+  WELCOME = "WELCOME",
+}
+
+export function SelectEmailTemplate(data: any) {
+  switch (data.template) {
+    case EmailTemplates.WELCOME:
+      return WelcomeTemplate({
+        userName: data.userName,
+      });
+
+    // more templates here
+  }
+}
diff --git a/components/email-templates/welcome-template.tsx b/components/email-templates/welcome-template.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import EmailWrapper from "./email-wrapper";
+import { Container, Heading, Text } from "@react-email/components";
+
+const WelcomeTemplate = ({ userName }: { userName: string }) => {
+  return (
+    <EmailWrapper previewText="Welcome to Pear AI" dir="ltr">
+      <Container className="bg-white mx-auto -mt-3 max-w-[600px] rounded-xl px-8 py-5">
+        <Heading as="h1">Hi {userName},</Heading>
+        <Heading as="h2">Welcome to Pear AI!</Heading>
+        <Text>
+          We are excited to have you onboard and look forward to helping you get
+          the most out of our product.
+        </Text>
+        <Text>
+          If you have any questions or need assistance, please dont hesitate to
+          reach out to us.
+        </Text>
+      </Container>
+    </EmailWrapper>
+  );
+};
+
+export default WelcomeTemplate;
diff --git a/components/ui/header.tsx b/components/ui/header.tsx
@@ -27,7 +27,7 @@ export default async function Header() {
             {/* Site branding */}
             <div className="flex w-[14%] flex-row items-center space-x-2 md:w-[36%]">
               {/* Logo */}
-              <Link className="-mt-0.5 dark:invert sm:mt-0" href="/">
+              <Link className="-mt-0.5 sm:mt-0 dark:invert" href="/">
                 <PearDarkLogo />
               </Link>
             </div>