feat(web): email notification preference settings (#9934)

* feat(web): email notification preference settings

* Update

* remove failed api generation file

* fix handle album invite return value

* Update web/src/lib/components/user-settings-page/notifications-settings.svelte

Co-authored-by: Daniel Dietzler <36593685+danieldietzler@users.noreply.github.com>

* wording

* test

---------

Co-authored-by: Daniel Dietzler <mail@ddietzler.dev>
Co-authored-by: Daniel Dietzler <36593685+danieldietzler@users.noreply.github.com>

e2e/src/api/specs/user-admin.e2e-spec.ts

@@ -250,10 +250,18 @@ describe('/admin/users', () => {
         .set('Authorization', `Bearer ${admin.accessToken}`);
 
       expect(status).toBe(200);
-      expect(body).toEqual({ avatar: { color: 'orange' }, memories: { enabled: false } });
+      expect(body).toEqual({
+        avatar: { color: 'orange' },
+        memories: { enabled: false },
+        emailNotifications: { enabled: true, albumInvite: true, albumUpdate: true },
+      });
 
       const after = await getUserPreferencesAdmin({ id: admin.userId }, { headers: asBearerAuth(admin.accessToken) });
-      expect(after).toEqual({ avatar: { color: 'orange' }, memories: { enabled: false } });
+      expect(after).toEqual({
+        avatar: { color: 'orange' },
+        memories: { enabled: false },
+        emailNotifications: { enabled: true, albumInvite: true, albumUpdate: true },
+      });
     });
   });
 

open-api/immich-openapi-specs.json

@@ -8152,6 +8152,39 @@
         ],
         "type": "object"
       },
+      "EmailNotificationsResponse": {
+        "properties": {
+          "albumInvite": {
+            "type": "boolean"
+          },
+          "albumUpdate": {
+            "type": "boolean"
+          },
+          "enabled": {
+            "type": "boolean"
+          }
+        },
+        "required": [
+          "albumInvite",
+          "albumUpdate",
+          "enabled"
+        ],
+        "type": "object"
+      },
+      "EmailNotificationsUpdate": {
+        "properties": {
+          "albumInvite": {
+            "type": "boolean"
+          },
+          "albumUpdate": {
+            "type": "boolean"
+          },
+          "enabled": {
+            "type": "boolean"
+          }
+        },
+        "type": "object"
+      },
       "EntityType": {
         "enum": [
           "ASSET",
@@ -11205,12 +11238,16 @@
           "avatar": {
             "$ref": "#/components/schemas/AvatarResponse"
           },
+          "emailNotifications": {
+            "$ref": "#/components/schemas/EmailNotificationsResponse"
+          },
           "memories": {
             "$ref": "#/components/schemas/MemoryResponse"
           }
         },
         "required": [
           "avatar",
+          "emailNotifications",
           "memories"
         ],
         "type": "object"
@@ -11220,6 +11257,9 @@
           "avatar": {
             "$ref": "#/components/schemas/AvatarUpdate"
           },
+          "emailNotifications": {
+            "$ref": "#/components/schemas/EmailNotificationsUpdate"
+          },
           "memories": {
             "$ref": "#/components/schemas/MemoryUpdate"
           }

open-api/typescript-sdk/src/fetch-client.ts

@@ -78,21 +78,33 @@ export type UserAdminUpdateDto = {
 export type AvatarResponse = {
     color: UserAvatarColor;
 };
+export type EmailNotificationsResponse = {
+    albumInvite: boolean;
+    albumUpdate: boolean;
+    enabled: boolean;
+};
 export type MemoryResponse = {
     enabled: boolean;
 };
 export type UserPreferencesResponseDto = {
     avatar: AvatarResponse;
+    emailNotifications: EmailNotificationsResponse;
     memories: MemoryResponse;
 };
 export type AvatarUpdate = {
     color?: UserAvatarColor;
 };
+export type EmailNotificationsUpdate = {
+    albumInvite?: boolean;
+    albumUpdate?: boolean;
+    enabled?: boolean;
+};
 export type MemoryUpdate = {
     enabled?: boolean;
 };
 export type UserPreferencesUpdateDto = {
     avatar?: AvatarUpdate;
+    emailNotifications?: EmailNotificationsUpdate;
     memories?: MemoryUpdate;
 };
 export type AlbumUserResponseDto = {

server/src/dtos/user-preferences.dto.ts

@@ -16,6 +16,17 @@ class MemoryUpdate {
   enabled?: boolean;
 }
 
+class EmailNotificationsUpdate {
+  @ValidateBoolean({ optional: true })
+  enabled?: boolean;
+
+  @ValidateBoolean({ optional: true })
+  albumInvite?: boolean;
+
+  @ValidateBoolean({ optional: true })
+  albumUpdate?: boolean;
+}
+
 export class UserPreferencesUpdateDto {
   @Optional()
   @ValidateNested()
@@ -26,6 +37,11 @@ export class UserPreferencesUpdateDto {
   @ValidateNested()
   @Type(() => MemoryUpdate)
   memories?: MemoryUpdate;
+
+  @Optional()
+  @ValidateNested()
+  @Type(() => EmailNotificationsUpdate)
+  emailNotifications?: EmailNotificationsUpdate;
 }
 
 class AvatarResponse {
@@ -37,9 +53,16 @@ class MemoryResponse {
   enabled!: boolean;
 }
 
+class EmailNotificationsResponse {
+  enabled!: boolean;
+  albumInvite!: boolean;
+  albumUpdate!: boolean;
+}
+
 export class UserPreferencesResponseDto implements UserPreferences {
   memories!: MemoryResponse;
   avatar!: AvatarResponse;
+  emailNotifications!: EmailNotificationsResponse;
 }
 
 export const mapPreferences = (preferences: UserPreferences): UserPreferencesResponseDto => {

server/src/entities/user-metadata.entity.ts

@@ -36,6 +36,11 @@ export interface UserPreferences {
   avatar: {
     color: UserAvatarColor;
   };
+  emailNotifications: {
+    enabled: boolean;
+    albumInvite: boolean;
+    albumUpdate: boolean;
+  };
 }
 
 export const getDefaultPreferences = (user: { email: string }): UserPreferences => {
@@ -51,6 +56,11 @@ export const getDefaultPreferences = (user: { email: string }): UserPreferences
     avatar: {
       color: values[randomIndex],
     },
+    emailNotifications: {
+      enabled: true,
+      albumInvite: true,
+      albumUpdate: true,
+    },
   };
 };
 

server/src/services/notification.service.ts

@@ -19,6 +19,7 @@ import { ILoggerRepository } from 'src/interfaces/logger.interface';
 import { EmailImageAttachment, EmailTemplate, INotificationRepository } from 'src/interfaces/notification.interface';
 import { ISystemMetadataRepository } from 'src/interfaces/system-metadata.interface';
 import { IUserRepository } from 'src/interfaces/user.interface';
+import { getPreferences } from 'src/utils/preferences';
 
 @Injectable()
 export class NotificationService {
@@ -95,6 +96,12 @@ export class NotificationService {
       return JobStatus.SKIPPED;
     }
 
+    const { emailNotifications } = getPreferences(recipient);
+
+    if (!emailNotifications.enabled || !emailNotifications.albumInvite) {
+      return JobStatus.SKIPPED;
+    }
+
     const attachment = await this.getAlbumThumbnailAttachment(album);
 
     const { server } = await this.configCore.getConfig();
@@ -142,6 +149,12 @@ export class NotificationService {
     const { server } = await this.configCore.getConfig();
 
     for (const recipient of recipients) {
+      const { emailNotifications } = getPreferences(recipient);
+
+      if (!emailNotifications.enabled || !emailNotifications.albumUpdate) {
+        continue;
+      }
+
       const { html, text } = this.notificationRepository.renderEmail({
         template: EmailTemplate.ALBUM_UPDATE,
         data: {

web/src/lib/components/user-settings-page/notifications-settings.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+  import {
+    notificationController,
+    NotificationType,
+  } from '$lib/components/shared-components/notification/notification';
+  import { updateMyPreferences } from '@immich/sdk';
+  import { fade } from 'svelte/transition';
+  import { handleError } from '../../utils/handle-error';
+
+  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
+  import { preferences } from '$lib/stores/user.store';
+  import Button from '../elements/buttons/button.svelte';
+
+  let emailNotificationsEnabled = $preferences?.emailNotifications?.enabled ?? true;
+  let albumInviteNotificationEnabled = $preferences?.emailNotifications?.albumInvite ?? true;
+  let albumUpdateNotificationEnabled = $preferences?.emailNotifications?.albumUpdate ?? true;
+
+  const handleSave = async () => {
+    try {
+      const data = await updateMyPreferences({
+        userPreferencesUpdateDto: {
+          emailNotifications: {
+            enabled: emailNotificationsEnabled,
+            albumInvite: emailNotificationsEnabled && albumInviteNotificationEnabled,
+            albumUpdate: emailNotificationsEnabled && albumUpdateNotificationEnabled,
+          },
+        },
+      });
+
+      $preferences.emailNotifications.enabled = data.emailNotifications.enabled;
+      $preferences.emailNotifications.albumInvite = data.emailNotifications.albumInvite;
+      $preferences.emailNotifications.albumUpdate = data.emailNotifications.albumUpdate;
+
+      notificationController.show({ message: 'Saved settings', type: NotificationType.Info });
+    } catch (error) {
+      handleError(error, 'Unable to update settings');
+    }
+  };
+</script>
+
+<section class="my-4">
+  <div in:fade={{ duration: 500 }}>
+    <form autocomplete="off" on:submit|preventDefault>
+      <div class="ml-4 mt-4 flex flex-col gap-4">
+        <div class="ml-4">
+          <SettingSwitch
+            title="Enable"
+            subtitle="Toggle email notifications"
+            bind:checked={emailNotificationsEnabled}
+          />
+        </div>
+        <div class="ml-4">
+          <SettingSwitch
+            title="Album Added"
+            subtitle="Receive an email notification when you are added to a shared album"
+            bind:checked={albumInviteNotificationEnabled}
+            disabled={!emailNotificationsEnabled}
+          />
+        </div>
+        <div class="ml-4">
+          <SettingSwitch
+            title="Album Updated"
+            subtitle="Receive an email notification when a shared album has new assets"
+            bind:checked={albumUpdateNotificationEnabled}
+            disabled={!emailNotificationsEnabled}
+          />
+        </div>
+
+        <div class="flex justify-end">
+          <Button type="submit" size="sm" on:click={() => handleSave()}>Save</Button>
+        </div>
+      </div>
+    </form>
+  </div>
+</section>

web/src/lib/components/user-settings-page/user-settings-list.svelte

@@ -15,6 +15,7 @@
   import PartnerSettings from './partner-settings.svelte';
   import UserAPIKeyList from './user-api-key-list.svelte';
   import UserProfileSettings from './user-profile-settings.svelte';
+  import NotificationsSettings from '$lib/components/user-settings-page/notifications-settings.svelte';
 
   export let keys: ApiKeyResponseDto[] = [];
   export let sessions: SessionResponseDto[] = [];
@@ -45,6 +46,10 @@
     <MemoriesSettings />
   </SettingAccordion>
 
+  <SettingAccordion key="notifications" title="Notifications" subtitle="Manage notifications">
+    <NotificationsSettings />
+  </SettingAccordion>
+
   {#if $featureFlags.loaded && $featureFlags.oauth}
     <SettingAccordion key="oauth" title="OAuth" subtitle="Manage your OAuth connection" isOpen={oauthOpen || undefined}>
       <OAuthSettings user={$user} />