[dev] [Marfuen] mariano/email-unsubscribe (#1830)

* feat(email): add granular email unsubscribe preferences

- Add emailPreferences JSON field to User model for granular control
- Create unsubscribe preferences page with checkboxes for each email type
- Add unsubscribe API routes (GET/POST) with secure token verification
- Update all notification email templates to include unsubscribe links
- Add unsubscribe checks to email sending functions
- Create user settings page to re-subscribe from within app
- Support per-email-type unsubscribe (policy, task reminders, weekly digest, unassigned items)
- Use NEXT_PUBLIC_BETTER_AUTH_URL for unsubscribe links to support localhost/staging

* refactor(unsubscribe): remove legacy unsubscribe API and integrate preferences handling

* feat(user-settings): add user settings page for email notification preferences

* chore(auth): add default email preferences to mock user

---------

Co-authored-by: Mariano Fuentes <marfuen98@gmail.com>

Author: github-actions[bot]

apps/app/src/app/(app)/[orgId]/people/all/actions/removeMember.ts

@@ -6,7 +6,11 @@ import { z } from 'zod';
 // Adjust safe-action import for colocalized structure
 import { authActionClient } from '@/actions/safe-action';
 import type { ActionResponse } from '@/actions/types';
-import { sendUnassignedItemsNotificationEmail, type UnassignedItem } from '@comp/email';
+import {
+  isUserUnsubscribed,
+  sendUnassignedItemsNotificationEmail,
+  type UnassignedItem,
+} from '@comp/email';
 
 const removeMemberSchema = z.object({
   memberId: z.string(),
@@ -252,15 +256,24 @@ export const removeMember = authActionClient
         const removedMemberName = targetMember.user.name || targetMember.user.email || 'Member';
 
         if (owner) {
-          // Send email to the org owner
-          sendUnassignedItemsNotificationEmail({
-            email: owner.user.email,
-            userName: owner.user.name || owner.user.email || 'Owner',
-            organizationName: organization.name,
-            organizationId: ctx.session.activeOrganizationId,
-            removedMemberName,
-            unassignedItems,
-          });
+          // Check if owner is unsubscribed from unassigned items notifications
+          const unsubscribed = await isUserUnsubscribed(
+            db,
+            owner.user.email,
+            'unassignedItemsNotifications',
+          );
+
+          if (!unsubscribed) {
+            // Send email to the org owner
+            sendUnassignedItemsNotificationEmail({
+              email: owner.user.email,
+              userName: owner.user.name || owner.user.email || 'Owner',
+              organizationName: organization.name,
+              organizationId: ctx.session.activeOrganizationId,
+              removedMemberName,
+              unassignedItems,
+            });
+          }
         }
       }
 

apps/app/src/app/(app)/[orgId]/settings/layout.tsx

@@ -40,6 +40,10 @@ export default async function Layout({ children }: { children: React.ReactNode }
               path: `/${orgId}/settings/secrets`,
               label: 'Secrets',
             },
+            {
+              path: `/${orgId}/settings/user`,
+              label: 'User Settings',
+            },
           ]}
         />
       </Suspense>

apps/app/src/app/(app)/[orgId]/settings/user/actions/update-email-preferences.ts

@@ -0,0 +1,66 @@
+'use server';
+
+import { authActionClient } from '@/actions/safe-action';
+import { db } from '@db';
+import { revalidatePath } from 'next/cache';
+import { z } from 'zod';
+
+const emailPreferencesSchema = z.object({
+  preferences: z.object({
+    policyNotifications: z.boolean(),
+    taskReminders: z.boolean(),
+    weeklyTaskDigest: z.boolean(),
+    unassignedItemsNotifications: z.boolean(),
+  }),
+});
+
+export const updateEmailPreferencesAction = authActionClient
+  .inputSchema(emailPreferencesSchema)
+  .metadata({
+    name: 'update-email-preferences',
+    track: {
+      event: 'update-email-preferences',
+      description: 'Update Email Preferences',
+      channel: 'server',
+    },
+  })
+  .action(async ({ ctx, parsedInput }) => {
+    const { user } = ctx;
+
+    if (!user?.email) {
+      return {
+        success: false,
+        error: 'Not authorized',
+      };
+    }
+
+    try {
+      const { preferences } = parsedInput;
+
+      // Check if all preferences are disabled
+      const allUnsubscribed = Object.values(preferences).every((v) => v === false);
+
+      await db.user.update({
+        where: { email: user.email },
+        data: {
+          emailPreferences: preferences,
+          emailNotificationsUnsubscribed: allUnsubscribed,
+        },
+      });
+
+      // Revalidate the settings page
+      if (ctx.session.activeOrganizationId) {
+        revalidatePath(`/${ctx.session.activeOrganizationId}/settings/user`);
+      }
+
+      return {
+        success: true,
+      };
+    } catch (error) {
+      console.error('Error updating email preferences:', error);
+      return {
+        success: false,
+        error: 'Failed to update email preferences',
+      };
+    }
+  });

apps/app/src/app/(app)/[orgId]/settings/user/components/EmailNotificationPreferences.tsx

@@ -0,0 +1,165 @@
+'use client';
+
+import { Button } from '@comp/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@comp/ui/card';
+import { Checkbox } from '@comp/ui/checkbox';
+import { useAction } from 'next-safe-action/hooks';
+import { useState } from 'react';
+import { toast } from 'sonner';
+import { updateEmailPreferencesAction } from '../actions/update-email-preferences';
+
+interface EmailPreferences {
+  policyNotifications: boolean;
+  taskReminders: boolean;
+  weeklyTaskDigest: boolean;
+  unassignedItemsNotifications: boolean;
+}
+
+interface Props {
+  initialPreferences: EmailPreferences;
+  email: string;
+}
+
+export function EmailNotificationPreferences({ initialPreferences, email }: Props) {
+  // Normal logic: true = subscribed (checked), false = unsubscribed (unchecked)
+  const [preferences, setPreferences] = useState<EmailPreferences>(initialPreferences);
+  const [saving, setSaving] = useState(false);
+
+  const { execute } = useAction(updateEmailPreferencesAction, {
+    onSuccess: () => {
+      toast.success('Email preferences updated successfully');
+      setSaving(false);
+    },
+    onError: ({ error }) => {
+      toast.error(error.serverError || 'Failed to update preferences');
+      setSaving(false);
+    },
+  });
+
+  const handleToggle = (key: keyof EmailPreferences, checked: boolean) => {
+    setPreferences((prev) => ({
+      ...prev,
+      [key]: checked,
+    }));
+  };
+
+  const handleSelectAll = () => {
+    // If all are enabled (all true), disable all (set all to false)
+    // If any are disabled (some false), enable all (set all to true)
+    const allEnabled = Object.values(preferences).every((v) => v === true);
+    setPreferences({
+      policyNotifications: !allEnabled,
+      taskReminders: !allEnabled,
+      weeklyTaskDigest: !allEnabled,
+      unassignedItemsNotifications: !allEnabled,
+    });
+  };
+
+  const handleSave = async () => {
+    setSaving(true);
+    execute({ preferences });
+  };
+
+  // Check if all are disabled (all false)
+  const allDisabled = Object.values(preferences).every((v) => v === false);
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Email Notifications</CardTitle>
+        <CardDescription>
+          Manage which email notifications you receive at{' '}
+          <span className="font-medium">{email}</span>. These preferences apply to all organizations
+          you're a member of.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="flex items-center justify-between border-b pb-4">
+          <div>
+            <label className="text-base font-medium text-foreground">Enable All</label>
+            <p className="text-sm text-muted-foreground">Toggle all notifications</p>
+          </div>
+          <Button onClick={handleSelectAll} variant="outline" size="sm">
+            {Object.values(preferences).every((v) => v === true) ? 'Disable All' : 'Enable All'}
+          </Button>
+        </div>
+
+        <div className="space-y-4">
+          <label className="flex cursor-pointer items-start gap-4 rounded-lg border p-4 hover:bg-muted/50 transition-colors">
+            <Checkbox
+              checked={preferences.policyNotifications}
+              onCheckedChange={(checked) => handleToggle('policyNotifications', checked === true)}
+              className="mt-1 shrink-0"
+            />
+            <div className="flex-1 min-w-0">
+              <div className="font-medium text-foreground">Policy Notifications</div>
+              <div className="text-sm text-muted-foreground">
+                Receive emails when new policies are published or existing policies are updated
+              </div>
+            </div>
+          </label>
+
+          <label className="flex cursor-pointer items-start gap-4 rounded-lg border p-4 hover:bg-muted/50 transition-colors">
+            <Checkbox
+              checked={preferences.taskReminders}
+              onCheckedChange={(checked) => handleToggle('taskReminders', checked === true)}
+              className="mt-1 shrink-0"
+            />
+            <div className="flex-1 min-w-0">
+              <div className="font-medium text-foreground">Task Reminders</div>
+              <div className="text-sm text-muted-foreground">
+                Receive reminders when tasks are due soon or overdue
+              </div>
+            </div>
+          </label>
+
+          <label className="flex cursor-pointer items-start gap-4 rounded-lg border p-4 hover:bg-muted/50 transition-colors">
+            <Checkbox
+              checked={preferences.weeklyTaskDigest}
+              onCheckedChange={(checked) => handleToggle('weeklyTaskDigest', checked === true)}
+              className="mt-1 shrink-0"
+            />
+            <div className="flex-1 min-w-0">
+              <div className="font-medium text-foreground">Weekly Task Digest</div>
+              <div className="text-sm text-muted-foreground">
+                Receive a weekly summary of pending tasks
+              </div>
+            </div>
+          </label>
+
+          <label className="flex cursor-pointer items-start gap-4 rounded-lg border p-4 hover:bg-muted/50 transition-colors">
+            <Checkbox
+              checked={preferences.unassignedItemsNotifications}
+              onCheckedChange={(checked) =>
+                handleToggle('unassignedItemsNotifications', checked === true)
+              }
+              className="mt-1 shrink-0"
+            />
+            <div className="flex-1 min-w-0">
+              <div className="font-medium text-foreground">Unassigned Items Notifications</div>
+              <div className="text-sm text-muted-foreground">
+                Receive notifications when items need reassignment after a member is removed
+              </div>
+            </div>
+          </label>
+        </div>
+      </CardContent>
+      <CardFooter className="flex justify-between">
+        <div className="text-muted-foreground text-xs">
+          You can also manage these preferences by clicking the unsubscribe link in any email
+          notification.
+        </div>
+        <Button onClick={handleSave} disabled={saving}>
+          {saving ? 'Saving...' : 'Save'}
+        </Button>
+      </CardFooter>
+    </Card>
+  );
+}

apps/app/src/app/(app)/[orgId]/settings/user/page.tsx

@@ -0,0 +1,62 @@
+import { auth } from '@/utils/auth';
+import { db } from '@db';
+import type { Metadata } from 'next';
+import { headers } from 'next/headers';
+import { EmailNotificationPreferences } from './components/EmailNotificationPreferences';
+
+export default async function UserSettings() {
+  const session = await auth.api.getSession({
+    headers: await headers(),
+  });
+
+  if (!session?.user?.email) {
+    return null;
+  }
+
+  const user = await db.user.findUnique({
+    where: { email: session.user.email },
+    select: {
+      emailPreferences: true,
+      emailNotificationsUnsubscribed: true,
+    },
+  });
+
+  const DEFAULT_PREFERENCES = {
+    policyNotifications: true,
+    taskReminders: true,
+    weeklyTaskDigest: true,
+    unassignedItemsNotifications: true,
+  };
+
+  // If user has the old all-or-nothing unsubscribe flag, convert to preferences
+  if (user?.emailNotificationsUnsubscribed) {
+    const preferences = {
+      policyNotifications: false,
+      taskReminders: false,
+      weeklyTaskDigest: false,
+      unassignedItemsNotifications: false,
+    };
+    return (
+      <div className="space-y-4">
+        <EmailNotificationPreferences initialPreferences={preferences} email={session.user.email} />
+      </div>
+    );
+  }
+
+  const preferences =
+    user?.emailPreferences && typeof user.emailPreferences === 'object'
+      ? { ...DEFAULT_PREFERENCES, ...(user.emailPreferences as Record<string, boolean>) }
+      : DEFAULT_PREFERENCES;
+
+  return (
+    <div className="space-y-4">
+      <EmailNotificationPreferences initialPreferences={preferences} email={session.user.email} />
+    </div>
+  );
+}
+
+export async function generateMetadata(): Promise<Metadata> {
+  return {
+    title: 'User Settings',
+  };
+}