Phase 1: Migrate to Email Notification System (with unit tests)

app/(dashboard)/settings/preferences/dailyEmailSetting.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { toast } from "sonner";
+import { useSavingIndicator } from "@/components/hooks/useSavingIndicator";
+import { SavingIndicator } from "@/components/savingIndicator";
+import { useSession } from "@/components/useSession";
+import { api } from "@/trpc/react";
+import { SwitchSectionWrapper } from "../sectionWrapper";
+
+const DailyEmailSetting = () => {
+  const { user } = useSession() ?? {};
+  const savingIndicator = useSavingIndicator();
+  const utils = api.useUtils();
+  const { mutate: update } = api.user.update.useMutation({
+    onSuccess: () => {
+      utils.user.currentUser.invalidate();
+      savingIndicator.setState("saved");
+    },
+    onError: (error) => {
+      savingIndicator.setState("error");
+      toast.error("Error updating preferences", { description: error.message });
+    },
+  });
+
+  const handleSwitchChange = (checked: boolean) => {
+    savingIndicator.setState("saving");
+    update({ preferences: { allowDailyEmail: checked } });
+  };
+
+  return (
+    <div className="relative">
+      <div className="absolute top-2 right-4 z-10">
+        <SavingIndicator state={savingIndicator.state} />
+      </div>
+      <SwitchSectionWrapper
+        title="Daily Email Reports"
+        description="Receive a daily summary email with key ticket and performance metrics"
+        initialSwitchChecked={user?.preferences?.allowDailyEmail !== false}
+        onSwitchChange={handleSwitchChange}
+      >
+        <></>
+      </SwitchSectionWrapper>
+    </div>
+  );
+};
+
+export default DailyEmailSetting;

app/(dashboard)/settings/preferences/preferencesSetting.tsx

@@ -1,7 +1,10 @@
 import { useSession } from "@/components/useSession";
 import AutoAssignSetting from "./autoAssignSetting";
 import ConfettiSetting from "./confettiSetting";
+import DailyEmailSetting from "./dailyEmailSetting";
 import NextTicketPreviewSetting from "./nextTicketPreviewSetting";
+import VipMessageEmailSetting from "./vipMessageEmailSetting";
+import WeeklyEmailSetting from "./weeklyEmailSetting";
 
 const PreferencesSetting = () => {
   const { user } = useSession() ?? {};
@@ -13,6 +16,9 @@ const PreferencesSetting = () => {
       <AutoAssignSetting />
       <ConfettiSetting />
       <NextTicketPreviewSetting />
+      <DailyEmailSetting />
+      <WeeklyEmailSetting />
+      <VipMessageEmailSetting />
     </div>
   );
 };

app/(dashboard)/settings/preferences/vipMessageEmailSetting.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { toast } from "sonner";
+import { useSavingIndicator } from "@/components/hooks/useSavingIndicator";
+import { SavingIndicator } from "@/components/savingIndicator";
+import { useSession } from "@/components/useSession";
+import { api } from "@/trpc/react";
+import { SwitchSectionWrapper } from "../sectionWrapper";
+
+const VipMessageEmailSetting = () => {
+  const { user } = useSession() ?? {};
+  const savingIndicator = useSavingIndicator();
+  const utils = api.useUtils();
+  const { mutate: update } = api.user.update.useMutation({
+    onSuccess: () => {
+      utils.user.currentUser.invalidate();
+      savingIndicator.setState("saved");
+    },
+    onError: (error) => {
+      savingIndicator.setState("error");
+      toast.error("Error updating preferences", { description: error.message });
+    },
+  });
+
+  const handleSwitchChange = (checked: boolean) => {
+    savingIndicator.setState("saving");
+    update({ preferences: { allowVipMessageEmail: checked } });
+  };
+
+  return (
+    <div className="relative">
+      <div className="absolute top-2 right-4 z-10">
+        <SavingIndicator state={savingIndicator.state} />
+      </div>
+      <SwitchSectionWrapper
+        title="VIP Message Email Alerts"
+        description="Receive immediate email alerts when a VIP message arrives"
+        initialSwitchChecked={user?.preferences?.allowVipMessageEmail !== false}
+        onSwitchChange={handleSwitchChange}
+      >
+        <></>
+      </SwitchSectionWrapper>
+    </div>
+  );
+};
+
+export default VipMessageEmailSetting;

app/(dashboard)/settings/preferences/weeklyEmailSetting.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { toast } from "sonner";
+import { useSavingIndicator } from "@/components/hooks/useSavingIndicator";
+import { SavingIndicator } from "@/components/savingIndicator";
+import { useSession } from "@/components/useSession";
+import { api } from "@/trpc/react";
+import { SwitchSectionWrapper } from "../sectionWrapper";
+
+const WeeklyEmailSetting = () => {
+  const { user } = useSession() ?? {};
+  const savingIndicator = useSavingIndicator();
+  const utils = api.useUtils();
+  const { mutate: update } = api.user.update.useMutation({
+    onSuccess: () => {
+      utils.user.currentUser.invalidate();
+      savingIndicator.setState("saved");
+    },
+    onError: (error) => {
+      savingIndicator.setState("error");
+      toast.error("Error updating preferences", { description: error.message });
+    },
+  });
+
+  const handleSwitchChange = (checked: boolean) => {
+    savingIndicator.setState("saving");
+    update({ preferences: { allowWeeklyEmail: checked } });
+  };
+
+  return (
+    <div className="relative">
+      <div className="absolute top-2 right-4 z-10">
+        <SavingIndicator state={savingIndicator.state} />
+      </div>
+      <SwitchSectionWrapper
+        title="Weekly Email Reports"
+        description="Receive a weekly summary email with trends and aggregate metrics"
+        initialSwitchChecked={user?.preferences?.allowWeeklyEmail !== false}
+        onSwitchChange={handleSwitchChange}
+      >
+        <></>
+      </SwitchSectionWrapper>
+    </div>
+  );
+};
+
+export default WeeklyEmailSetting;

db/schema/userProfiles.ts

@@ -27,6 +27,9 @@ export const userProfiles = pgTable("user_profiles", {
     confetti?: boolean;
     disableNextTicketPreview?: boolean;
     autoAssignOnReply?: boolean;
+    allowDailyEmail?: boolean;
+    allowWeeklyEmail?: boolean;
+    allowVipMessageEmail?: boolean;
   }>(),
 }).enableRLS();