From acfe6b7e11016a98f551560e273720f01b71daed Mon Sep 17 00:00:00 2001
From: Gustavo Carvalho <gustavo.carvalho@container-solutions.com>
Date: Wed, 18 Feb 2026 11:28:17 -0300
Subject: [PATCH] feat: workflow notification preferences

Signed-off-by: Gustavo Carvalho <gustavo.carvalho@container-solutions.com>
---
 src/views/PreferencesView.vue               | 239 ++++++++++++++++----
 src/views/__tests__/PreferencesView.spec.ts | 119 +++++++++-
 2 files changed, 308 insertions(+), 50 deletions(-)

diff --git a/src/views/PreferencesView.vue b/src/views/PreferencesView.vue
index 5a30c08f..4b8968db 100644
--- a/src/views/PreferencesView.vue
+++ b/src/views/PreferencesView.vue
@@ -35,54 +35,135 @@
             Email Notifications
           </h2>
 
-          <div class="space-y-4">
-            <div
-              class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-800 rounded-lg"
-            >
-              <div class="flex-1">
-                <h3
-                  id="evidence-digest-heading"
-                  class="text-lg font-medium text-gray-900 dark:text-gray-100"
-                >
-                  Evidence Digest
-                </h3>
-                <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
-                  Receive periodic email summaries of evidence updates and
-                  activities
-                </p>
-              </div>
+          <div class="space-y-6">
+            <div class="space-y-3">
+              <h3
+                class="text-base font-semibold text-gray-900 dark:text-gray-100"
+              >
+                Evidence Notifications
+              </h3>
 
-              <div class="ml-4">
-                <label class="relative inline-flex items-center cursor-pointer">
-                  <input
-                    type="checkbox"
-                    v-model="digestSubscribed"
-                    @change="updateDigestSubscription"
-                    :disabled="updating"
-                    class="sr-only peer"
-                    aria-labelledby="evidence-digest-heading"
-                  />
-                  <div
-                    class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"
-                  ></div>
-                </label>
+              <div
+                class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-800 rounded-lg"
+              >
+                <div class="flex-1">
+                  <h4
+                    id="evidence-digest-heading"
+                    class="text-lg font-medium text-gray-900 dark:text-gray-100"
+                  >
+                    <TooltipTitle
+                      text="Evidence Digest"
+                      :tooltip-text="evidenceDigestTooltipText"
+                    />
+                  </h4>
+                  <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
+                    Receive periodic email summaries of evidence updates and
+                    activities
+                  </p>
+                </div>
+
+                <div class="ml-4">
+                  <label
+                    class="relative inline-flex items-center cursor-pointer"
+                  >
+                    <input
+                      type="checkbox"
+                      v-model="digestSubscribed"
+                      @change="updateEmailPreferences"
+                      :disabled="updating"
+                      class="sr-only peer"
+                      aria-labelledby="evidence-digest-heading"
+                    />
+                    <div
+                      class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"
+                    ></div>
+                  </label>
+                </div>
               </div>
             </div>
 
             <div
-              v-if="digestSubscribed"
-              class="ml-4 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg"
+              class="space-y-3 pt-2 border-t border-gray-200 dark:border-gray-700"
             >
-              <p class="text-sm text-blue-800 dark:text-blue-200">
-                <strong>Active:</strong> You will receive digest emails
-                according to the system schedule.
-              </p>
-            </div>
+              <h3
+                class="text-base font-semibold text-gray-900 dark:text-gray-100"
+              >
+                Task Notifications
+              </h3>
+
+              <div
+                class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-800 rounded-lg"
+              >
+                <div class="flex-1">
+                  <h4
+                    id="task-available-heading"
+                    class="text-lg font-medium text-gray-900 dark:text-gray-100"
+                  >
+                    <TooltipTitle
+                      text="Task Available Alerts"
+                      :tooltip-text="taskAvailableTooltipText"
+                    />
+                  </h4>
+                  <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
+                    Receive an email when new tasks become available for you
+                  </p>
+                </div>
+
+                <div class="ml-4">
+                  <label
+                    class="relative inline-flex items-center cursor-pointer"
+                  >
+                    <input
+                      type="checkbox"
+                      v-model="taskAvailableEmailSubscribed"
+                      @change="updateEmailPreferences"
+                      :disabled="updating"
+                      class="sr-only peer"
+                      aria-labelledby="task-available-heading"
+                    />
+                    <div
+                      class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"
+                    ></div>
+                  </label>
+                </div>
+              </div>
+
+              <div
+                class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-800 rounded-lg"
+              >
+                <div class="flex-1">
+                  <h4
+                    id="task-digest-heading"
+                    class="text-lg font-medium text-gray-900 dark:text-gray-100"
+                  >
+                    <TooltipTitle
+                      text="Daily Task Digest"
+                      :tooltip-text="taskDailyDigestTooltipText"
+                    />
+                  </h4>
+                  <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
+                    Receive a daily summary email of your task activity
+                  </p>
+                </div>
 
-            <div v-else class="ml-4 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
-              <p class="text-sm text-gray-600 dark:text-gray-400">
-                <strong>Inactive:</strong> You will not receive digest emails.
-              </p>
+                <div class="ml-4">
+                  <label
+                    class="relative inline-flex items-center cursor-pointer"
+                  >
+                    <input
+                      type="checkbox"
+                      v-model="taskDailyDigestSubscribed"
+                      @change="updateEmailPreferences"
+                      :disabled="updating"
+                      class="sr-only peer"
+                      aria-labelledby="task-digest-heading"
+                    />
+                    <div
+                      class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"
+                    ></div>
+                  </label>
+                </div>
+              </div>
             </div>
           </div>
 
@@ -143,22 +224,54 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue';
+import { computed, ref, onMounted, onUnmounted } from 'vue';
 import { useAuthenticatedInstance } from '@/composables/axios';
 import type { CCFUser } from '@/stores/types';
 import PageHeader from '@/components/PageHeader.vue';
 import PageCard from '@/components/PageCard.vue';
+import TooltipTitle from '@/components/TooltipTitle.vue';
+
+interface DigestSubscriptionPreferences {
+  subscribed: boolean;
+  taskAvailableEmailSubscribed: boolean;
+  taskDailyDigestSubscribed: boolean;
+}
 
 const axios = useAuthenticatedInstance();
 const user = ref<CCFUser | null>(null);
 const loading = ref(true);
 const updating = ref(false);
 const digestSubscribed = ref(false);
+const taskAvailableEmailSubscribed = ref(false);
+const taskDailyDigestSubscribed = ref(false);
+const lastSavedPreferences = ref<DigestSubscriptionPreferences>({
+  subscribed: false,
+  taskAvailableEmailSubscribed: false,
+  taskDailyDigestSubscribed: false,
+});
 const updateError = ref<string | null>(null);
 const updateSuccess = ref(false);
 const loadError = ref<string | null>(null);
 const successTimeoutId = ref<number | null>(null);
 
+const evidenceDigestTooltipText = computed(() =>
+  digestSubscribed.value
+    ? 'Active: You will receive digest emails according to the system schedule.'
+    : 'Inactive: You will not receive digest emails.',
+);
+
+const taskAvailableTooltipText = computed(() =>
+  taskAvailableEmailSubscribed.value
+    ? 'Active: You will receive an email when new tasks become available for you.'
+    : 'Inactive: You will not receive task-available alert emails.',
+);
+
+const taskDailyDigestTooltipText = computed(() =>
+  taskDailyDigestSubscribed.value
+    ? 'Active: You will receive a daily summary email of your task activity.'
+    : 'Inactive: You will not receive daily task digest emails.',
+);
+
 // Load user data and digest subscription
 const loadUserData = async () => {
   try {
@@ -168,9 +281,22 @@ const loadUserData = async () => {
 
     // Get digest subscription status
     const subscriptionResponse = await axios.get<{
-      data: { subscribed: boolean };
+      data: DigestSubscriptionPreferences;
     }>('/api/users/me/digest-subscription');
+
     digestSubscribed.value = subscriptionResponse.data.data.subscribed;
+    taskAvailableEmailSubscribed.value =
+      subscriptionResponse.data.data.taskAvailableEmailSubscribed;
+    taskDailyDigestSubscribed.value =
+      subscriptionResponse.data.data.taskDailyDigestSubscribed;
+
+    lastSavedPreferences.value = {
+      subscribed: subscriptionResponse.data.data.subscribed,
+      taskAvailableEmailSubscribed:
+        subscriptionResponse.data.data.taskAvailableEmailSubscribed,
+      taskDailyDigestSubscribed:
+        subscriptionResponse.data.data.taskDailyDigestSubscribed,
+    };
   } catch (error) {
     console.error('Error loading user data:', error);
     loadError.value =
@@ -180,8 +306,8 @@ const loadUserData = async () => {
   }
 };
 
-// Update digest subscription
-const updateDigestSubscription = async () => {
+// Update email preferences
+const updateEmailPreferences = async () => {
   updating.value = true;
   updateError.value = null;
   updateSuccess.value = false;
@@ -189,18 +315,35 @@ const updateDigestSubscription = async () => {
   try {
     await axios.put('/api/users/me/digest-subscription', {
       subscribed: digestSubscribed.value,
+      taskAvailableEmailSubscribed: taskAvailableEmailSubscribed.value,
+      taskDailyDigestSubscribed: taskDailyDigestSubscribed.value,
     });
 
+    lastSavedPreferences.value = {
+      subscribed: digestSubscribed.value,
+      taskAvailableEmailSubscribed: taskAvailableEmailSubscribed.value,
+      taskDailyDigestSubscribed: taskDailyDigestSubscribed.value,
+    };
+
+    if (successTimeoutId.value) {
+      clearTimeout(successTimeoutId.value);
+    }
+
     updateSuccess.value = true;
     // Hide success message after 3 seconds
     successTimeoutId.value = window.setTimeout(() => {
       updateSuccess.value = false;
     }, 3000);
   } catch (error) {
-    console.error('Error updating digest subscription:', error);
+    console.error('Error updating email preferences:', error);
     updateError.value = 'Failed to update preferences. Please try again.';
-    // Revert the checkbox state on error
-    digestSubscribed.value = !digestSubscribed.value;
+
+    // Revert to previous values on error
+    digestSubscribed.value = lastSavedPreferences.value.subscribed;
+    taskAvailableEmailSubscribed.value =
+      lastSavedPreferences.value.taskAvailableEmailSubscribed;
+    taskDailyDigestSubscribed.value =
+      lastSavedPreferences.value.taskDailyDigestSubscribed;
   } finally {
     updating.value = false;
   }
diff --git a/src/views/__tests__/PreferencesView.spec.ts b/src/views/__tests__/PreferencesView.spec.ts
index 86178f31..b4ef4462 100644
--- a/src/views/__tests__/PreferencesView.spec.ts
+++ b/src/views/__tests__/PreferencesView.spec.ts
@@ -1,6 +1,7 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { mount } from '@vue/test-utils';
 import { createPinia, setActivePinia } from 'pinia';
+import { nextTick } from 'vue';
 import PreferencesView from '../PreferencesView.vue';
 
 // Mock the composables
@@ -36,6 +37,38 @@ describe('PreferencesView', () => {
     setActivePinia(createPinia());
     vi.clearAllMocks();
     vi.useFakeTimers();
+
+    mockAxios.get.mockImplementation((url: string) => {
+      if (url === '/api/users/me') {
+        return Promise.resolve({
+          data: {
+            data: {
+              id: 'user-1',
+              email: 'user@example.com',
+              firstName: 'User',
+              lastName: 'Example',
+              failedLogins: 0,
+            },
+          },
+        });
+      }
+
+      if (url === '/api/users/me/digest-subscription') {
+        return Promise.resolve({
+          data: {
+            data: {
+              subscribed: false,
+              taskAvailableEmailSubscribed: false,
+              taskDailyDigestSubscribed: false,
+            },
+          },
+        });
+      }
+
+      return Promise.reject(new Error(`Unexpected GET URL: ${url}`));
+    });
+
+    mockAxios.put.mockResolvedValue({ data: { data: {} } });
   });
 
   afterEach(() => {
@@ -85,6 +118,8 @@ describe('PreferencesView', () => {
       expect(wrapper.vm.loading).toBe(true);
       expect(wrapper.vm.updating).toBe(false);
       expect(wrapper.vm.digestSubscribed).toBe(false);
+      expect(wrapper.vm.taskAvailableEmailSubscribed).toBe(false);
+      expect(wrapper.vm.taskDailyDigestSubscribed).toBe(false);
       expect(wrapper.vm.updateError).toBeNull();
       expect(wrapper.vm.updateSuccess).toBe(false);
     });
@@ -155,7 +190,7 @@ describe('PreferencesView', () => {
       expect(typeof wrapper.vm.loadUserData).toBe('function');
     });
 
-    it('has updateDigestSubscription method', () => {
+    it('has updateEmailPreferences method', () => {
       wrapper = mount(PreferencesView, {
         global: {
           stubs: {
@@ -165,7 +200,87 @@ describe('PreferencesView', () => {
         },
       });
 
-      expect(typeof wrapper.vm.updateDigestSubscription).toBe('function');
+      expect(typeof wrapper.vm.updateEmailPreferences).toBe('function');
+    });
+  });
+
+  describe('Email preferences integration', () => {
+    it('loads all email preference toggles from API', async () => {
+      mockAxios.get.mockImplementation((url: string) => {
+        if (url === '/api/users/me') {
+          return Promise.resolve({
+            data: {
+              data: {
+                id: 'user-1',
+                email: 'user@example.com',
+                firstName: 'User',
+                lastName: 'Example',
+                failedLogins: 0,
+              },
+            },
+          });
+        }
+
+        if (url === '/api/users/me/digest-subscription') {
+          return Promise.resolve({
+            data: {
+              data: {
+                subscribed: true,
+                taskAvailableEmailSubscribed: true,
+                taskDailyDigestSubscribed: false,
+              },
+            },
+          });
+        }
+
+        return Promise.reject(new Error(`Unexpected GET URL: ${url}`));
+      });
+
+      wrapper = mount(PreferencesView, {
+        global: {
+          stubs: {
+            PageHeader: true,
+            PageCard: true,
+          },
+        },
+      });
+
+      await Promise.resolve();
+      await nextTick();
+
+      expect(wrapper.vm.digestSubscribed).toBe(true);
+      expect(wrapper.vm.taskAvailableEmailSubscribed).toBe(true);
+      expect(wrapper.vm.taskDailyDigestSubscribed).toBe(false);
+    });
+
+    it('sends all email preference fields when updating', async () => {
+      wrapper = mount(PreferencesView, {
+        global: {
+          stubs: {
+            PageHeader: true,
+            PageCard: true,
+          },
+        },
+      });
+
+      await Promise.resolve();
+      await nextTick();
+
+      wrapper.vm.digestSubscribed = true;
+      wrapper.vm.taskAvailableEmailSubscribed = true;
+      wrapper.vm.taskDailyDigestSubscribed = true;
+
+      await wrapper.vm.updateEmailPreferences();
+
+      expect(mockAxios.put).toHaveBeenCalledWith(
+        '/api/users/me/digest-subscription',
+        {
+          subscribed: true,
+          taskAvailableEmailSubscribed: true,
+          taskDailyDigestSubscribed: true,
+        },
+      );
+      expect(wrapper.vm.updateSuccess).toBe(true);
     });
   });