feat: add contact-book variable registry for campaign personalization

apps/web/prisma/migrations/20260224120000_add_contact_book_variables/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "ContactBook" ADD COLUMN     "variables" TEXT[] NOT NULL DEFAULT ARRAY[]::TEXT[];

apps/web/prisma/schema.prisma

@@ -296,6 +296,7 @@ model ContactBook {
   id                 String    @id @default(cuid())
   name               String
   teamId             Int
+  variables          String[]  @default([])
   properties         Json
   doubleOptInEnabled Boolean   @default(false)
   doubleOptInFrom    String?

apps/web/src/app/(dashboard)/campaigns/[campaignId]/edit/page.tsx

@@ -5,7 +5,7 @@ import { Spinner } from "@usesend/ui/src/spinner";
 import { Button } from "@usesend/ui/src/button";
 import { Input } from "@usesend/ui/src/input";
 import { Editor } from "@usesend/email-editor";
-import { use, useState } from "react";
+import { use, useMemo, useState } from "react";
 import { Campaign } from "@prisma/client";
 import {
   Select,
@@ -65,7 +65,7 @@ export default function EditCampaignPage({
     { campaignId },
     {
       enabled: !!campaignId,
-    }
+    },
   );
 
   if (isLoading) {
@@ -102,18 +102,18 @@ function CampaignEditor({
   const utils = api.useUtils();
 
   const [json, setJson] = useState<Record<string, any> | undefined>(
-    campaign.content ? JSON.parse(campaign.content) : undefined
+    campaign.content ? JSON.parse(campaign.content) : undefined,
   );
   const [isSaving, setIsSaving] = useState(false);
   const [name, setName] = useState(campaign.name);
   const [subject, setSubject] = useState(campaign.subject);
   const [from, setFrom] = useState(campaign.from);
   const [contactBookId, setContactBookId] = useState(campaign.contactBookId);
   const [replyTo, setReplyTo] = useState<string | undefined>(
-    campaign.replyTo[0]
+    campaign.replyTo[0],
   );
   const [previewText, setPreviewText] = useState<string | null>(
-    campaign.previewText
+    campaign.previewText,
   );
 
   const updateCampaignMutation = api.campaign.updateCampaign.useMutation({
@@ -136,13 +136,13 @@ function CampaignEditor({
 
   const deboucedUpdateCampaign = useDebouncedCallback(
     updateEditorContent,
-    1000
+    1000,
   );
 
   const handleFileChange = async (file: File) => {
     if (file.size > IMAGE_SIZE_LIMIT) {
       throw new Error(
-        `File should be less than ${IMAGE_SIZE_LIMIT / 1024 / 1024}MB`
+        `File should be less than ${IMAGE_SIZE_LIMIT / 1024 / 1024}MB`,
       );
     }
 
@@ -165,8 +165,17 @@ function CampaignEditor({
   };
 
   const contactBook = contactBooksQuery.data?.find(
-    (book) => book.id === contactBookId
+    (book) => book.id === contactBookId,
   );
+  const editorVariables = useMemo(() => {
+    const baseVariables = ["email", "firstName", "lastName"];
+    const registryVariables = contactBook?.variables ?? [];
+
+    return Array.from(new Set([...baseVariables, ...registryVariables]));
+  }, [contactBook]);
+  const variableSuggestionsHelperText = contactBookId
+    ? undefined
+    : "Select the contact book for related variable";
 
   return (
     <div className="p-4 container mx-auto ">
@@ -196,7 +205,7 @@ function CampaignEditor({
                     toast.error(`${e.message}. Reverting changes.`);
                     setName(campaign.name);
                   },
-                }
+                },
               );
             }}
           />
@@ -251,7 +260,7 @@ function CampaignEditor({
                           toast.error(`${e.message}. Reverting changes.`);
                           setSubject(campaign.subject);
                         },
-                      }
+                      },
                     );
                   }}
                   className="mt-1 py-1 text-sm block w-full outline-none border-b border-transparent  focus:border-border bg-transparent"
@@ -291,7 +300,7 @@ function CampaignEditor({
                             toast.error(`${e.message}. Reverting changes.`);
                             setFrom(campaign.from);
                           },
-                        }
+                        },
                       );
                     }}
                     disabled={isApiCampaign}
@@ -327,7 +336,7 @@ function CampaignEditor({
                             toast.error(`${e.message}. Reverting changes.`);
                             setReplyTo(campaign.replyTo[0]);
                           },
-                        }
+                        },
                       );
                     }}
                     disabled={isApiCampaign}
@@ -365,7 +374,7 @@ function CampaignEditor({
                             toast.error(`${e.message}. Reverting changes.`);
                             setPreviewText(campaign.previewText ?? "");
                           },
-                        }
+                        },
                       );
                     }}
                     className="mt-1 py-1 text-sm block w-full outline-none border-b border-transparent bg-transparent  focus:border-border"
@@ -397,7 +406,7 @@ function CampaignEditor({
                             onError: () => {
                               setContactBookId(campaign.contactBookId);
                             },
-                          }
+                          },
                         );
                         setContactBookId(val);
                       }}
@@ -435,13 +444,15 @@ function CampaignEditor({
           <div className=" rounded-lg bg-gray-50 w-[700px] mx-auto p-10">
             <div className="w-[600px] mx-auto">
               <Editor
+                key={`campaign-editor-${contactBookId ?? "none"}-${editorVariables.join(",")}`}
                 initialContent={json}
                 onUpdate={(content) => {
                   setJson(content.getJSON());
                   setIsSaving(true);
                   deboucedUpdateCampaign();
                 }}
-                variables={["email", "firstName", "lastName"]}
+                variables={editorVariables}
+                variableSuggestionsHelperText={variableSuggestionsHelperText}
                 uploadImage={
                   campaign.imageUploadSupported ? handleFileChange : undefined
                 }

apps/web/src/app/(dashboard)/contacts/[contactBookId]/add-contact.tsx

@@ -26,6 +26,7 @@ import { z } from "zod";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { toast } from "@usesend/ui/src/toaster";
+import type { ReactNode } from "react";
 
 const contactsSchema = z.object({
   contacts: z.string({ required_error: "Contacts are required" }).min(1, {
@@ -35,8 +36,14 @@ const contactsSchema = z.object({
 
 export default function AddContact({
   contactBookId,
+  trigger,
+  open: controlledOpen,
+  onOpenChange,
 }: {
   contactBookId: string;
+  trigger?: ReactNode;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
 }) {
   const [open, setOpen] = useState(false);
 
@@ -50,6 +57,14 @@ export default function AddContact({
   });
 
   const utils = api.useUtils();
+  const dialogTrigger =
+    trigger ??
+    (controlledOpen === undefined ? (
+      <Button>
+        <Plus className="h-4 w-4 mr-1" />
+        Add Contacts
+      </Button>
+    ) : null);
 
   async function onContactsAdd(values: z.infer<typeof contactsSchema>) {
     const contactsArray = values.contacts.split(",").map((email) => ({
@@ -64,7 +79,11 @@ export default function AddContact({
       {
         onSuccess: async () => {
           utils.contacts.contacts.invalidate();
-          setOpen(false);
+          if (controlledOpen === undefined) {
+            setOpen(false);
+          } else {
+            onOpenChange?.(false);
+          }
           toast.success("Contacts queued for processing");
         },
         onError: async (error) => {
@@ -76,15 +95,21 @@ export default function AddContact({
 
   return (
     <Dialog
-      open={open}
-      onOpenChange={(_open) => (_open !== open ? setOpen(_open) : null)}
+      open={controlledOpen ?? open}
+      onOpenChange={(nextOpen) => {
+        if (controlledOpen === undefined) {
+          if (nextOpen !== open) {
+            setOpen(nextOpen);
+          }
+          return;
+        }
+
+        onOpenChange?.(nextOpen);
+      }}
     >
-      <DialogTrigger asChild>
-        <Button>
-          <Plus className="h-4 w-4 mr-1" />
-          Add Contacts
-        </Button>
-      </DialogTrigger>
+      {dialogTrigger ? (
+        <DialogTrigger asChild>{dialogTrigger}</DialogTrigger>
+      ) : null}
       <DialogContent>
         <DialogHeader>
           <DialogTitle>Add new contacts</DialogTitle>