Email wip

midday-ai · Nov 14, 2023 · 735a318 · 735a318
1 parent 3c0724d
commit 735a318
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 42 deletions.
diff --git a/apps/dashboard/src/jobs/transactions.ts b/apps/dashboard/src/jobs/transactions.ts
@@ -1,7 +1,9 @@
 import { client } from "@/trigger";
+import { TransactionsEmail } from "@midday/email/emails/transactions";
 import { getTransactions } from "@midday/gocardless";
-import { TriggerEvents, trigger, triggerBulk } from "@midday/notification";
+import { TriggerEvents, triggerBulk } from "@midday/notification";
 import { Database } from "@midday/supabase/src/types";
+import { renderAsync } from "@react-email/components";
 import { eventTrigger } from "@trigger.dev/sdk";
 import { Supabase, SupabaseManagement } from "@trigger.dev/supabase";
 import { capitalCase } from "change-case";
@@ -139,13 +141,23 @@ client.defineJob({
       )
       .select();
 
+    const { data: usersData } = await io.supabase.client
+      .from("users_on_team")
+      .select("team_id, user:user_id(id, full_name, avatar_url, email, locale)")
+      .eq("team_id", data?.team_id);
+
     if (transactionsData?.length && transactionsData.length > 0) {
+      revalidateTag(`transactions_${data?.team_id}`);
+      revalidateTag(`spending_${data?.team_id}`);
+      revalidateTag(`metrics_${data?.team_id}`);
+
       // Send notification for each transaction
       // triggerBulk(
       //   transactionsData.map((transaction) => ({
       //     name: TriggerEvents.TransactionNewInApp,
       //     payload: {
-      //       html: "TODO",
+      //       description: "You have a new transaction of -1000 from Github",
+      //       currency: "SEK",
       //     },
       //     users: [
       //       {
@@ -159,27 +171,42 @@ client.defineJob({
       //   }))
       // );
 
-      // Send email with react-email-template
-      // trigger({
-      //   name: TriggerEvents.TransactionNewEmail,
-      //   payload: {
-      //     subject: "New transactions",
-      //     html: "TODO",
-      //   },
-      //   users: [
-      //     {
-      //       subscriberId: "",
-      //       teamId: "123",
-      //       email: "",
-      //       fullName: "Pontus Abrahamsson",
-      //       avatarUrl: "https://",
-      //     },
-      //   ],
-      // });
+      const emailEvents = await Promise.all(
+        usersData?.map(async ({ user, team_id }) => {
+          const html = await renderAsync(
+            TransactionsEmail({
+              fullName: user.full_name,
+              transactions: transactionsData.map((transaction) => ({
+                id: transaction.id,
+                date: transaction.date,
+                amount: transaction.amount,
+                name: transaction.name,
+                currency: transaction.currency,
+              })),
+              locale: user.locale,
+            })
+          );
 
-      revalidateTag(`transactions_${data?.team_id}`);
-      revalidateTag(`spending_${data?.team_id}`);
-      revalidateTag(`metrics_${data?.team_id}`);
+          return {
+            name: TriggerEvents.TransactionNewEmail,
+            payload: {
+              subject: "New transactions",
+              html,
+            },
+            user: {
+              subscriberId: user.id,
+              teamId: team_id,
+              email: user.email,
+              fullName: user.full_name,
+              avatarUrl: user.avatar_url,
+            },
+          };
+        })
+      );
+
+      if (emailEvents?.length) {
+        triggerBulk(emailEvents);
+      }
     }
 
     if (error) {

diff --git a/bun.lockb b/bun.lockb
diff --git a/packages/email/emails/transactions.tsx b/packages/email/emails/transactions.tsx
@@ -2,7 +2,6 @@ import { cn } from "@midday/ui/utils";
 import {
   Body,
   Button,
-  Column,
   Container,
   Font,
   Head,
@@ -12,7 +11,6 @@ import {
   Img,
   Link,
   Preview,
-  Row,
   Section,
   Tailwind,
   Text,
@@ -29,7 +27,7 @@ type Transaction = {
 };
 
 interface TransactionsEmailEmailProps {
-  firstName: string;
+  fullName: string;
   transactions: Transaction[];
   locale: string;
 }
@@ -76,10 +74,12 @@ const baseAppUrl =
     : "http://localhost:3001";
 
 export const TransactionsEmail = ({
-  firstName = "Viktor",
+  fullName = "Viktor Hofte",
   transactions = defaultTransactions,
   locale = "en",
 }: TransactionsEmailEmailProps) => {
+  const firstName = fullName.split(" ").at(0);
+
   const previewText = `Hi ${firstName}, We found 5 transactions thats missing receipts. Feel free to attach them to ease your own or your accountants work for upcoming declerations.`;
 
   return (
@@ -150,7 +150,7 @@ export const TransactionsEmail = ({
               </thead>
 
               <tbody>
-                {transactions.map((transaction) => (
+                {transactions?.map((transaction) => (
                   <tr key={transaction.id}>
                     <td align="left">
                       <Text className="text-[14px] m-0 p-0 mt-1 pb-1">
@@ -190,11 +190,9 @@ export const TransactionsEmail = ({
 
             <Section className="text-center mt-[32px] mb-[32px]">
               <Button
-                pX={20}
-                pY={12}
                 className="bg-[#000000] rounded-xl text-white text-[12px] font-semibold no-underline text-center"
                 href={`${baseAppUrl}/transactions?from_id=${
-                  transactions.at(0).id
+                  transactions.at(0)?.id
                 }`}
               >
                 View transactions

diff --git a/packages/email/package.json b/packages/email/package.json
@@ -11,9 +11,9 @@
     "export": "email export"
   },
   "dependencies": {
-    "@react-email/components": "0.0.6",
+    "@react-email/components": "0.0.11",
     "date-fns": "^2.30.0",
-    "react-email": "1.9.3"
+    "react-email": "1.9.5"
   },
   "devDependencies": {
     "typescript": "^5.2.2"

diff --git a/packages/notification/src/index.ts b/packages/notification/src/index.ts
@@ -19,17 +19,17 @@ type TriggerUser = {
 type TriggerPayload = {
   name: TriggerEvents;
   payload: any;
-  users: TriggerUser[];
+  user: TriggerUser;
   tenant?: string; // NOTE: Currently no way to listen for messages with tenant, we use team_id + user_id for unique
 };
 
 export async function trigger(data: TriggerPayload) {
   return novu.trigger(data.name, {
-    to: data.users.map((user) => ({
-      ...user,
+    to: {
+      ...data.user,
       //   Prefix subscriber id with team id
-      subscriberId: `${user.teamId}_${user.subscriberId}`,
-    })),
+      subscriberId: `${data.user.teamId}_${data.user.subscriberId}`,
+    },
     payload: data.payload,
     tenant: data.tenant,
   });
@@ -39,11 +39,11 @@ export async function triggerBulk(events: TriggerPayload[]) {
   return novu.bulkTrigger(
     events.map((data) => ({
       name: data.name,
-      to: data.users.map((user) => ({
-        ...user,
+      to: {
+        ...data.user,
         //   Prefix subscriber id with team id
-        subscriberId: `${user.teamId}_${user.subscriberId}`,
-      })),
+        subscriberId: `${data.user.teamId}_${data.user.subscriberId}`,
+      },
       payload: data.payload,
       tenant: data.tenant,
     }))

diff --git a/packages/supabase/src/queries/index.ts b/packages/supabase/src/queries/index.ts
@@ -313,7 +313,6 @@ export async function getTransaction(supabase: Client, id: string) {
     )
     .eq("id", id)
     .single()
-
     .throwOnError();
 }