add new design (#70)

* add new design stuff

* add more ui things

* add more ui changes

* more ui changes

* add more design

* update emoji

apps/web/src/server/api/routers/campaign.ts

@@ -1,5 +1,6 @@
-import { Prisma } from "@prisma/client";
+import { CampaignStatus, Prisma } from "@prisma/client";
 import { TRPCError } from "@trpc/server";
+import { EmailRenderer } from "@unsend/email-editor/src/renderer";
 import { z } from "zod";
 import { env } from "~/env";
 import {
@@ -20,11 +21,14 @@ import {
   isStorageConfigured,
 } from "~/server/service/storage-service";
 
+const statuses = Object.values(CampaignStatus) as [CampaignStatus];
+
 export const campaignRouter = createTRPCRouter({
   getCampaigns: teamProcedure
     .input(
       z.object({
         page: z.number().optional(),
+        status: z.enum(statuses).optional().nullable(),
       })
     )
     .query(async ({ ctx: { db, team }, input }) => {
@@ -36,6 +40,10 @@ export const campaignRouter = createTRPCRouter({
         teamId: team.id,
       };
 
+      if (input.status) {
+        whereConditions.status = input.status;
+      }
+
       const countP = db.campaign.count({ where: whereConditions });
 
       const campaignsP = db.campaign.findMany({
@@ -48,6 +56,7 @@ export const campaignRouter = createTRPCRouter({
           createdAt: true,
           updatedAt: true,
           status: true,
+          html: true,
         },
         orderBy: {
           createdAt: "desc",
@@ -92,6 +101,7 @@ export const campaignRouter = createTRPCRouter({
         previewText: z.string().optional(),
         content: z.string().optional(),
         contactBookId: z.string().optional(),
+        replyTo: z.string().array().optional(),
       })
     )
     .mutation(async ({ ctx: { db, team, campaign: campaignOld }, input }) => {
@@ -113,10 +123,21 @@ export const campaignRouter = createTRPCRouter({
         const domain = await validateDomainFromEmail(data.from, team.id);
         domainId = domain.id;
       }
+
+      let html: string | null = null;
+
+      if (data.content) {
+        const jsonContent = data.content ? JSON.parse(data.content) : null;
+
+        const renderer = new EmailRenderer(jsonContent);
+        html = await renderer.render();
+      }
+
       const campaign = await db.campaign.update({
         where: { id: campaignId },
         data: {
           ...data,
+          html,
           domainId,
         },
       });

apps/web/src/server/api/routers/contacts.ts

@@ -1,4 +1,4 @@
-import { Prisma } from "@prisma/client";
+import { CampaignStatus, Prisma } from "@prisma/client";
 import { z } from "zod";
 
 import {
@@ -43,19 +43,31 @@ export const contactsRouter = createTRPCRouter({
 
   getContactBookDetails: contactBookProcedure.query(
     async ({ ctx: { contactBook, db } }) => {
-      const [totalContacts, unsubscribedContacts] = await Promise.all([
-        db.contact.count({
-          where: { contactBookId: contactBook.id },
-        }),
-        db.contact.count({
-          where: { contactBookId: contactBook.id, subscribed: false },
-        }),
-      ]);
+      const [totalContacts, unsubscribedContacts, campaigns] =
+        await Promise.all([
+          db.contact.count({
+            where: { contactBookId: contactBook.id },
+          }),
+          db.contact.count({
+            where: { contactBookId: contactBook.id, subscribed: false },
+          }),
+          db.campaign.findMany({
+            where: {
+              contactBookId: contactBook.id,
+              status: CampaignStatus.SENT,
+            },
+            orderBy: {
+              createdAt: "desc",
+            },
+            take: 2,
+          }),
+        ]);
 
       return {
         ...contactBook,
         totalContacts,
         unsubscribedContacts,
+        campaigns,
       };
     }
   ),
@@ -66,6 +78,7 @@ export const contactsRouter = createTRPCRouter({
         contactBookId: z.string(),
         name: z.string().optional(),
         properties: z.record(z.string()).optional(),
+        emoji: z.string().optional(),
       })
     )
     .mutation(async ({ ctx: { db }, input }) => {

apps/web/src/server/api/routers/email.ts

@@ -177,7 +177,7 @@ export const emailRouter = createTRPCRouter({
         select: {
           emailEvents: {
             orderBy: {
-              status: "asc",
+              status: "desc",
             },
           },
           id: true,

apps/web/src/server/service/campaign-service.ts

@@ -188,6 +188,7 @@ type CampainEmail = {
   from: string;
   subject: string;
   html: string;
+  previewText?: string;
   replyTo?: string[];
   cc?: string[];
   bcc?: string[];
@@ -199,8 +200,17 @@ export async function sendCampaignEmail(
   campaign: Campaign,
   emailData: CampainEmail
 ) {
-  const { campaignId, from, subject, replyTo, cc, bcc, teamId, contacts } =
-    emailData;
+  const {
+    campaignId,
+    from,
+    subject,
+    replyTo,
+    cc,
+    bcc,
+    teamId,
+    contacts,
+    previewText,
+  } = emailData;
 
   const jsonContent = JSON.parse(campaign.content || "{}");
   const renderer = new EmailRenderer(jsonContent);
@@ -242,6 +252,7 @@ export async function sendCampaignEmail(
       from,
       subject,
       html: contact.html,
+      text: previewText,
       teamId,
       campaignId,
       contactId: contact.id,