feat: add double opt-in

apps/web/prisma/migrations/20250930120000_add_double_opt_in/migration.sql

@@ -0,0 +1,17 @@
+-- Add double opt-in supporting columns
+ALTER TABLE "Domain" ADD COLUMN "defaultFrom" TEXT;
+
+ALTER TABLE "ContactBook"
+  ADD COLUMN "defaultDomainId" INTEGER,
+  ADD COLUMN "doubleOptInEnabled" BOOLEAN NOT NULL DEFAULT false,
+  ADD COLUMN "doubleOptInTemplateId" TEXT;
+
+-- Indexes for new foreign keys
+CREATE INDEX "ContactBook_defaultDomainId_idx" ON "ContactBook"("defaultDomainId");
+CREATE INDEX "ContactBook_doubleOptInTemplateId_idx" ON "ContactBook"("doubleOptInTemplateId");
+
+-- Foreign key constraints
+ALTER TABLE "ContactBook"
+  ADD CONSTRAINT "ContactBook_defaultDomainId_fkey" FOREIGN KEY ("defaultDomainId") REFERENCES "Domain"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+ALTER TABLE "ContactBook"
+  ADD CONSTRAINT "ContactBook_doubleOptInTemplateId_fkey" FOREIGN KEY ("doubleOptInTemplateId") REFERENCES "Template"("id") ON DELETE SET NULL ON UPDATE CASCADE;

apps/web/prisma/schema.prisma

@@ -177,26 +177,28 @@ enum DomainStatus {
 }
 
 model Domain {
-  id            Int          @id @default(autoincrement())
-  name          String       @unique
+  id            Int           @id @default(autoincrement())
+  name          String        @unique
   teamId        Int
-  status        DomainStatus @default(PENDING)
-  region        String       @default("us-east-1")
-  clickTracking Boolean      @default(false)
-  openTracking  Boolean      @default(false)
+  status        DomainStatus  @default(PENDING)
+  region        String        @default("us-east-1")
+  clickTracking Boolean       @default(false)
+  openTracking  Boolean       @default(false)
   publicKey     String
-  dkimSelector  String?      @default("usesend")
+  dkimSelector  String?       @default("usesend")
   dkimStatus    String?
   spfDetails    String?
-  dmarcAdded    Boolean      @default(false)
+  dmarcAdded    Boolean       @default(false)
   errorMessage  String?
   subdomain     String?
   sesTenantId   String?
-  isVerifying   Boolean      @default(false)
-  createdAt     DateTime     @default(now())
-  updatedAt     DateTime     @updatedAt
-  team          Team         @relation(fields: [teamId], references: [id], onDelete: Cascade)
+  isVerifying   Boolean       @default(false)
+  defaultFrom   String?
+  createdAt     DateTime      @default(now())
+  updatedAt     DateTime      @updatedAt
+  team          Team          @relation(fields: [teamId], references: [id], onDelete: Cascade)
   apiKeys       ApiKey[]
+  ContactBook   ContactBook[]
 }
 
 enum ApiPermission {
@@ -279,17 +281,24 @@ model EmailEvent {
 }
 
 model ContactBook {
-  id         String    @id @default(cuid())
-  name       String
-  teamId     Int
-  properties Json
-  createdAt  DateTime  @default(now())
-  updatedAt  DateTime  @updatedAt
-  emoji      String    @default("📙")
-  team       Team      @relation(fields: [teamId], references: [id], onDelete: Cascade)
-  contacts   Contact[]
+  id                    String    @id @default(cuid())
+  name                  String
+  teamId                Int
+  properties            Json
+  createdAt             DateTime  @default(now())
+  updatedAt             DateTime  @updatedAt
+  emoji                 String    @default("📙")
+  defaultDomainId       Int?
+  doubleOptInEnabled    Boolean   @default(false)
+  doubleOptInTemplateId String?
+  team                  Team      @relation(fields: [teamId], references: [id], onDelete: Cascade)
+  contacts              Contact[]
+  defaultDomain         Domain?   @relation(fields: [defaultDomainId], references: [id], onDelete: SetNull, onUpdate: Cascade)
+  doubleOptInTemplate   Template? @relation(fields: [doubleOptInTemplateId], references: [id], onDelete: SetNull, onUpdate: Cascade)
 
   @@index([teamId])
+  @@index([defaultDomainId])
+  @@index([doubleOptInTemplateId])
 }
 
 enum UnsubscribeReason {
@@ -369,7 +378,8 @@ model Template {
   createdAt DateTime @default(now())
   updatedAt DateTime @updatedAt
 
-  team Team @relation(fields: [teamId], references: [id], onDelete: Cascade)
+  team        Team          @relation(fields: [teamId], references: [id], onDelete: Cascade)
+  ContactBook ContactBook[]
 
   @@index([createdAt(sort: Desc)])
 }

apps/web/src/app/(dashboard)/contacts/[contactBookId]/page.tsx

@@ -120,6 +120,11 @@ export default function ContactsPage({
           </Breadcrumb>
         </div>
         <div className="flex gap-4">
+          <Link href={`/contacts/${contactBookId}/settings`}>
+            <Button variant="outline" type="button">
+              Settings
+            </Button>
+          </Link>
           <AddContact contactBookId={contactBookId} />
         </div>
       </div>

apps/web/src/app/(dashboard)/contacts/[contactBookId]/settings/page.tsx

@@ -0,0 +1,243 @@
+"use client";
+
+import { use, useEffect } from "react";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@usesend/ui/src/form";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Switch } from "@usesend/ui/src/switch";
+import { Button } from "@usesend/ui/src/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@usesend/ui/src/select";
+import { api } from "~/trpc/react";
+import { toast } from "@usesend/ui/src/toaster";
+import { Skeleton } from "@usesend/ui/src/skeleton";
+
+const schema = z
+  .object({
+    doubleOptInEnabled: z.boolean(),
+    defaultDomainId: z.string().nullable(),
+    doubleOptInTemplateId: z.string().nullable(),
+  })
+  .superRefine((value, ctx) => {
+    if (!value.doubleOptInEnabled) {
+      return;
+    }
+
+    if (!value.defaultDomainId) {
+      ctx.addIssue({
+        path: ["defaultDomainId"],
+        code: z.ZodIssueCode.custom,
+        message: "Choose a verified domain",
+      });
+    }
+
+    if (!value.doubleOptInTemplateId) {
+      ctx.addIssue({
+        path: ["doubleOptInTemplateId"],
+        code: z.ZodIssueCode.custom,
+        message: "Select a confirmation template",
+      });
+    }
+  });
+
+export default function ContactBookSettingsPage({
+  params,
+}: {
+  params: Promise<{ contactBookId: string }>;
+}) {
+  const { contactBookId } = use(params);
+
+  const utils = api.useUtils();
+
+  const settingsQuery = api.contacts.getContactBookSettings.useQuery({
+    contactBookId,
+  });
+
+  const updateMutation = api.contacts.updateContactBook.useMutation({
+    onSuccess: async () => {
+      await Promise.all([
+        utils.contacts.getContactBookSettings.invalidate({ contactBookId }),
+        utils.contacts.getContactBookDetails.invalidate({ contactBookId }),
+      ]);
+      toast.success("Settings updated");
+    },
+    onError: (error) => {
+      toast.error(error.message);
+    },
+  });
+
+  const form = useForm<z.infer<typeof schema>>({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      doubleOptInEnabled: false,
+      defaultDomainId: null,
+      doubleOptInTemplateId: null,
+    },
+  });
+
+  useEffect(() => {
+    if (!settingsQuery.data) return;
+    const { contactBook } = settingsQuery.data;
+    form.reset({
+      doubleOptInEnabled: contactBook.doubleOptInEnabled,
+      defaultDomainId: contactBook.defaultDomainId
+        ? String(contactBook.defaultDomainId)
+        : null,
+      doubleOptInTemplateId: contactBook.doubleOptInTemplateId,
+    });
+  }, [settingsQuery.data, form]);
+
+  const onSubmit = form.handleSubmit((values) => {
+    updateMutation.mutate({
+      contactBookId,
+      doubleOptInEnabled: values.doubleOptInEnabled,
+      defaultDomainId: values.defaultDomainId
+        ? Number(values.defaultDomainId)
+        : null,
+      doubleOptInTemplateId: values.doubleOptInTemplateId,
+    });
+  });
+
+  if (settingsQuery.isLoading || !settingsQuery.data) {
+    return (
+      <div className="space-y-6">
+        <Skeleton className="h-6 w-40" />
+        <Skeleton className="h-12 w-full" />
+        <Skeleton className="h-12 w-full" />
+      </div>
+    );
+  }
+
+  const { domains, templates } = settingsQuery.data;
+
+  const disableSelectorsBase =
+    !form.watch("doubleOptInEnabled") || domains.length === 0;
+  const disableDomainSelect = disableSelectorsBase;
+  const disableTemplateSelect = disableSelectorsBase || templates.length === 0;
+
+  return (
+    <div className="max-w-2xl space-y-10">
+      <div>
+        <h1 className="text-2xl font-semibold">Double opt-in</h1>
+        <p className="text-sm text-muted-foreground">
+          Require new contacts to confirm their email address before they are
+          subscribed.
+        </p>
+      </div>
+      <Form {...form}>
+        <form onSubmit={onSubmit} className="space-y-8">
+          <FormField
+            control={form.control}
+            name="doubleOptInEnabled"
+            render={({ field }) => (
+              <FormItem className="flex items-center justify-between rounded-lg border p-4">
+                <div>
+                  <FormLabel>Require confirmation</FormLabel>
+                  <p className="text-sm text-muted-foreground">
+                    Send a confirmation email when contacts are added via the
+                    API.
+                  </p>
+                </div>
+                <FormControl>
+                  <Switch
+                    checked={field.value}
+                    onCheckedChange={field.onChange}
+                  />
+                </FormControl>
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="defaultDomainId"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>From domain</FormLabel>
+                <FormControl>
+                  <Select
+                    value={field.value ?? undefined}
+                    onValueChange={(value) => field.onChange(value)}
+                    disabled={disableDomainSelect}
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select a verified domain" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {domains.map((domain) => (
+                        <SelectItem key={domain.id} value={String(domain.id)}>
+                          {domain.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </FormControl>
+                {domains.length === 0 ? (
+                  <p className="text-sm text-muted-foreground">
+                    Add a verified domain before enabling double opt-in.
+                  </p>
+                ) : (
+                  <FormMessage />
+                )}
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="doubleOptInTemplateId"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Confirmation email</FormLabel>
+                <FormControl>
+                  <Select
+                    value={field.value ?? undefined}
+                    onValueChange={(value) => field.onChange(value)}
+                    disabled={disableTemplateSelect}
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select a template" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {templates.map((template) => (
+                        <SelectItem key={template.id} value={template.id}>
+                          {template.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </FormControl>
+                <p className="text-sm text-muted-foreground">
+                  Templates must include the {"{{verificationUrl}}"} placeholder.
+                  {templates.length === 0
+                    ? " Create or publish a template before enabling double opt-in."
+                    : ""}
+                </p>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <div className="flex justify-end">
+            <Button type="submit" disabled={updateMutation.isPending}>
+              {updateMutation.isPending ? "Saving..." : "Save changes"}
+            </Button>
+          </div>
+        </form>
+      </Form>
+    </div>
+  );
+}