feat: allow users to select notification types (#1512)

* feat: allow users to select notification types

* fix(ui): display personal notification types before management types

* fix: update allRequestsAutoApproved check to account for new REQUEST_MOVIE & REQUEST_TV perms

* fix(ui): do not display Discord notif type selector if user not eligible for any types

* refactor(ui): remove unnecessary 'enabled' checkboxes from user notif settings

* fix(ui): correct checkbox behavior

* fix: add missing return type on hasNotificationType

* refactor: remove unused isValid prop in NotificationsWebPush

* fix(ui): use SensitiveInput for users' public PGP keys

* fix(ui): add missing tip/hint for email encryption setting

* refactor(svg): use the new Discord logo

* revert(api): undo breaking change removing discordEnabled from UserSettingsNotificationsResponse

* fix(lang): update notification type descriptions for clarity

* fix(telegram): do not send users notifications of their own auto-approved requests

src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsDiscord.tsx

@@ -11,12 +11,11 @@ import { useUser } from '../../../../hooks/useUser';
 import globalMessages from '../../../../i18n/globalMessages';
 import Button from '../../../Common/Button';
 import LoadingSpinner from '../../../Common/LoadingSpinner';
-import { ALL_NOTIFICATIONS } from '../../../NotificationTypeSelector';
+import NotificationTypeSelector from '../../../NotificationTypeSelector';
 
 const messages = defineMessages({
   discordsettingssaved: 'Discord notification settings saved successfully!',
   discordsettingsfailed: 'Discord notification settings failed to save.',
-  enableDiscord: 'Enable Mentions',
   discordId: 'User ID',
   discordIdTip:
     'The <FindDiscordIdLink>ID number</FindDiscordIdLink> for your user account',
@@ -34,8 +33,8 @@ const UserNotificationsDiscord: React.FC = () => {
 
   const UserNotificationsDiscordSchema = Yup.object().shape({
     discordId: Yup.string()
-      .when('enableDiscord', {
-        is: true,
+      .when('types', {
+        is: (value: unknown) => !!value,
         then: Yup.string()
           .nullable()
           .required(intl.formatMessage(messages.validationDiscordId)),
@@ -51,8 +50,10 @@ const UserNotificationsDiscord: React.FC = () => {
   return (
     <Formik
       initialValues={{
-        enableDiscord: !!data?.notificationTypes.discord,
         discordId: data?.discordId,
+        types:
+          (data?.discordEnabledTypes ?? 0) &
+          (data?.notificationTypes.discord ?? 0),
       }}
       validationSchema={UserNotificationsDiscordSchema}
       enableReinitialize
@@ -64,7 +65,7 @@ const UserNotificationsDiscord: React.FC = () => {
             telegramChatId: data?.telegramChatId,
             telegramSendSilently: data?.telegramSendSilently,
             notificationTypes: {
-              discord: values.enableDiscord ? ALL_NOTIFICATIONS : 0,
+              discord: values.types,
             },
           });
           addToast(intl.formatMessage(messages.discordsettingssaved), {
@@ -81,27 +82,23 @@ const UserNotificationsDiscord: React.FC = () => {
         }
       }}
     >
-      {({ errors, touched, isSubmitting, isValid }) => {
+      {({
+        errors,
+        touched,
+        isSubmitting,
+        isValid,
+        values,
+        setFieldValue,
+        setFieldTouched,
+      }) => {
         return (
           <Form className="section">
-            {data?.discordEnabled && (
-              <div className="form-row">
-                <label htmlFor="enableDiscord" className="checkbox-label">
-                  {intl.formatMessage(messages.enableDiscord)}
-                </label>
-                <div className="form-input">
-                  <Field
-                    type="checkbox"
-                    id="enableDiscord"
-                    name="enableDiscord"
-                  />
-                </div>
-              </div>
-            )}
             <div className="form-row">
               <label htmlFor="discordId" className="text-label">
-                <span>{intl.formatMessage(messages.discordId)}</span>
-                <span className="label-required">*</span>
+                {intl.formatMessage(messages.discordId)}
+                {!!data?.discordEnabledTypes && (
+                  <span className="label-required">*</span>
+                )}
                 <span className="label-tip">
                   {intl.formatMessage(messages.discordIdTip, {
                     FindDiscordIdLink: function FindDiscordIdLink(msg) {
@@ -127,6 +124,20 @@ const UserNotificationsDiscord: React.FC = () => {
                 )}
               </div>
             </div>
+            <NotificationTypeSelector
+              user={user}
+              enabledTypes={data?.discordEnabledTypes ?? 0}
+              currentTypes={values.types}
+              onUpdate={(newTypes) => {
+                setFieldValue('types', newTypes);
+                setFieldTouched('types');
+              }}
+              error={
+                errors.types && touched.types
+                  ? (errors.types as string)
+                  : undefined
+              }
+            />
             <div className="actions">
               <div className="flex justify-end">
                 <span className="inline-flex ml-3 rounded-md shadow-sm">

src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsEmail.tsx

@@ -1,5 +1,5 @@
 import axios from 'axios';
-import { Field, Form, Formik } from 'formik';
+import { Form, Formik } from 'formik';
 import { useRouter } from 'next/router';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
@@ -12,13 +12,15 @@ import globalMessages from '../../../../i18n/globalMessages';
 import Badge from '../../../Common/Badge';
 import Button from '../../../Common/Button';
 import LoadingSpinner from '../../../Common/LoadingSpinner';
-import { ALL_NOTIFICATIONS } from '../../../NotificationTypeSelector';
+import SensitiveInput from '../../../Common/SensitiveInput';
+import NotificationTypeSelector, {
+  ALL_NOTIFICATIONS,
+} from '../../../NotificationTypeSelector';
 import { OpenPgpLink } from '../../../Settings/Notifications/NotificationsEmail';
 
 const messages = defineMessages({
   emailsettingssaved: 'Email notification settings saved successfully!',
   emailsettingsfailed: 'Email notification settings failed to save.',
-  enableEmail: 'Enable Notifications',
   pgpPublicKey: 'PGP Public Key',
   pgpPublicKeyTip:
     'Encrypt email messages using <OpenPgpLink>OpenPGP</OpenPgpLink>',
@@ -50,8 +52,8 @@ const UserEmailSettings: React.FC = () => {
   return (
     <Formik
       initialValues={{
-        enableEmail: !!(data?.notificationTypes.email ?? true),
         pgpKey: data?.pgpKey,
+        types: data?.notificationTypes.email ?? ALL_NOTIFICATIONS,
       }}
       validationSchema={UserNotificationsEmailSchema}
       enableReinitialize
@@ -63,7 +65,7 @@ const UserEmailSettings: React.FC = () => {
             telegramChatId: data?.telegramChatId,
             telegramSendSilently: data?.telegramSendSilently,
             notificationTypes: {
-              email: values.enableEmail ? ALL_NOTIFICATIONS : 0,
+              email: values.types,
             },
           });
           addToast(intl.formatMessage(messages.emailsettingssaved), {
@@ -80,17 +82,17 @@ const UserEmailSettings: React.FC = () => {
         }
       }}
     >
-      {({ errors, touched, isSubmitting, isValid }) => {
+      {({
+        errors,
+        touched,
+        isSubmitting,
+        isValid,
+        values,
+        setFieldValue,
+        setFieldTouched,
+      }) => {
         return (
           <Form className="section">
-            <div className="form-row">
-              <label htmlFor="enableEmail" className="checkbox-label">
-                {intl.formatMessage(messages.enableEmail)}
-              </label>
-              <div className="form-input">
-                <Field type="checkbox" id="enableEmail" name="enableEmail" />
-              </div>
-            </div>
             <div className="form-row">
               <label htmlFor="pgpKey" className="text-label">
                 <span className="mr-2">
@@ -107,8 +109,9 @@ const UserEmailSettings: React.FC = () => {
               </label>
               <div className="form-input">
                 <div className="form-input-field">
-                  <Field
-                    as="textarea"
+                  <SensitiveInput
+                    as="field"
+                    type="textarea"
                     id="pgpKey"
                     name="pgpKey"
                     rows="10"
@@ -120,6 +123,19 @@ const UserEmailSettings: React.FC = () => {
                 )}
               </div>
             </div>
+            <NotificationTypeSelector
+              user={user}
+              currentTypes={values.types}
+              onUpdate={(newTypes) => {
+                setFieldValue('types', newTypes);
+                setFieldTouched('types');
+              }}
+              error={
+                errors.types && touched.types
+                  ? (errors.types as string)
+                  : undefined
+              }
+            />
             <div className="actions">
               <div className="flex justify-end">
                 <span className="inline-flex ml-3 rounded-md shadow-sm">

src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsTelegram.tsx

@@ -11,12 +11,11 @@ import { useUser } from '../../../../hooks/useUser';
 import globalMessages from '../../../../i18n/globalMessages';
 import Button from '../../../Common/Button';
 import LoadingSpinner from '../../../Common/LoadingSpinner';
-import { ALL_NOTIFICATIONS } from '../../../NotificationTypeSelector';
+import NotificationTypeSelector from '../../../NotificationTypeSelector';
 
 const messages = defineMessages({
   telegramsettingssaved: 'Telegram notification settings saved successfully!',
   telegramsettingsfailed: 'Telegram notification settings failed to save.',
-  enableTelegram: 'Enable Notifications',
   telegramChatId: 'Chat ID',
   telegramChatIdTipLong:
     '<TelegramBotLink>Start a chat</TelegramBotLink>, add <GetIdBotLink>@get_id_bot</GetIdBotLink>, and issue the <code>/my_id</code> command',
@@ -36,8 +35,8 @@ const UserTelegramSettings: React.FC = () => {
 
   const UserNotificationsTelegramSchema = Yup.object().shape({
     telegramChatId: Yup.string()
-      .when('enableTelegram', {
-        is: true,
+      .when('types', {
+        is: (value: unknown) => !!value,
         then: Yup.string()
           .nullable()
           .required(intl.formatMessage(messages.validationTelegramChatId)),
@@ -56,9 +55,9 @@ const UserTelegramSettings: React.FC = () => {
   return (
     <Formik
       initialValues={{
-        enableTelegram: !!data?.notificationTypes.telegram,
         telegramChatId: data?.telegramChatId,
         telegramSendSilently: data?.telegramSendSilently,
+        types: data?.notificationTypes.telegram ?? 0,
       }}
       validationSchema={UserNotificationsTelegramSchema}
       enableReinitialize
@@ -70,7 +69,7 @@ const UserTelegramSettings: React.FC = () => {
             telegramChatId: values.telegramChatId,
             telegramSendSilently: values.telegramSendSilently,
             notificationTypes: {
-              telegram: values.enableTelegram ? ALL_NOTIFICATIONS : 0,
+              telegram: values.types,
             },
           });
           addToast(intl.formatMessage(messages.telegramsettingssaved), {
@@ -87,21 +86,17 @@ const UserTelegramSettings: React.FC = () => {
         }
       }}
     >
-      {({ errors, touched, isSubmitting, isValid }) => {
+      {({
+        errors,
+        touched,
+        isSubmitting,
+        isValid,
+        values,
+        setFieldValue,
+        setFieldTouched,
+      }) => {
         return (
           <Form className="section">
-            <div className="form-row">
-              <label htmlFor="enableTelegram" className="checkbox-label">
-                {intl.formatMessage(messages.enableTelegram)}
-              </label>
-              <div className="form-input">
-                <Field
-                  type="checkbox"
-                  id="enableTelegram"
-                  name="enableTelegram"
-                />
-              </div>
-            </div>
             <div className="form-row">
               <label htmlFor="telegramChatId" className="text-label">
                 {intl.formatMessage(messages.telegramChatId)}
@@ -166,6 +161,19 @@ const UserTelegramSettings: React.FC = () => {
                 />
               </div>
             </div>
+            <NotificationTypeSelector
+              user={user}
+              currentTypes={values.types}
+              onUpdate={(newTypes) => {
+                setFieldValue('types', newTypes);
+                setFieldTouched('types');
+              }}
+              error={
+                errors.types && touched.types
+                  ? (errors.types as string)
+                  : undefined
+              }
+            />
             <div className="actions">
               <div className="flex justify-end">
                 <span className="inline-flex ml-3 rounded-md shadow-sm">

src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsWebPush.tsx

@@ -1,5 +1,5 @@
 import axios from 'axios';
-import { Field, Form, Formik } from 'formik';
+import { Form, Formik } from 'formik';
 import { useRouter } from 'next/router';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
@@ -10,12 +10,13 @@ import { useUser } from '../../../../hooks/useUser';
 import globalMessages from '../../../../i18n/globalMessages';
 import Button from '../../../Common/Button';
 import LoadingSpinner from '../../../Common/LoadingSpinner';
-import { ALL_NOTIFICATIONS } from '../../../NotificationTypeSelector';
+import NotificationTypeSelector, {
+  ALL_NOTIFICATIONS,
+} from '../../../NotificationTypeSelector';
 
 const messages = defineMessages({
   webpushsettingssaved: 'Web push notification settings saved successfully!',
   webpushsettingsfailed: 'Web push notification settings failed to save.',
-  enableWebPush: 'Enable Notifications',
 });
 
 const UserWebPushSettings: React.FC = () => {
@@ -34,18 +35,18 @@ const UserWebPushSettings: React.FC = () => {
   return (
     <Formik
       initialValues={{
-        enableWebPush: !!(data?.notificationTypes.webpush ?? true),
-        pgpKey: data?.pgpKey,
+        types: data?.notificationTypes.webpush ?? ALL_NOTIFICATIONS,
       }}
       enableReinitialize
       onSubmit={async (values) => {
         try {
           await axios.post(`/api/v1/user/${user?.id}/settings/notifications`, {
+            pgpKey: data?.pgpKey,
             discordId: data?.discordId,
             telegramChatId: data?.telegramChatId,
             telegramSendSilently: data?.telegramSendSilently,
             notificationTypes: {
-              webpush: values.enableWebPush ? ALL_NOTIFICATIONS : 0,
+              webpush: values.types,
             },
           });
           mutate('/api/v1/settings/public');
@@ -63,21 +64,30 @@ const UserWebPushSettings: React.FC = () => {
         }
       }}
     >
-      {({ isSubmitting, isValid }) => {
+      {({
+        errors,
+        touched,
+        isSubmitting,
+        isValid,
+        values,
+        setFieldValue,
+        setFieldTouched,
+      }) => {
         return (
           <Form className="section">
-            <div className="form-row">
-              <label htmlFor="enableEmail" className="checkbox-label">
-                {intl.formatMessage(messages.enableWebPush)}
-              </label>
-              <div className="form-input">
-                <Field
-                  type="checkbox"
-                  id="enableWebPush"
-                  name="enableWebPush"
-                />
-              </div>
-            </div>
+            <NotificationTypeSelector
+              user={user}
+              currentTypes={values.types}
+              onUpdate={(newTypes) => {
+                setFieldValue('types', newTypes);
+                setFieldTouched('types');
+              }}
+              error={
+                errors.types && touched.types
+                  ? (errors.types as string)
+                  : undefined
+              }
+            />
             <div className="actions">
               <div className="flex justify-end">
                 <span className="inline-flex ml-3 rounded-md shadow-sm">

src/components/UserProfile/UserSettings/UserNotificationSettings/index.tsx

@@ -42,6 +42,18 @@ const UserNotificationSettings: React.FC = ({ children }) => {
       regex: /\/settings\/notifications\/email/,
       hidden: !data?.emailEnabled,
     },
+    {
+      text: intl.formatMessage(messages.webpush),
+      content: (
+        <span className="flex items-center">
+          <CloudIcon className="h-4 mr-2" />
+          {intl.formatMessage(messages.webpush)}
+        </span>
+      ),
+      route: '/settings/notifications/webpush',
+      regex: /\/settings\/notifications\/webpush/,
+      hidden: !data?.webPushEnabled,
+    },
     {
       text: 'Discord',
       content: (
@@ -65,18 +77,6 @@ const UserNotificationSettings: React.FC = ({ children }) => {
       regex: /\/settings\/notifications\/telegram/,
       hidden: !data?.telegramEnabled || !data?.telegramBotUsername,
     },
-    {
-      text: intl.formatMessage(messages.webpush),
-      content: (
-        <span className="flex items-center">
-          <CloudIcon className="h-4 mr-2" />
-          {intl.formatMessage(messages.webpush)}
-        </span>
-      ),
-      route: '/settings/notifications/webpush',
-      regex: /\/settings\/notifications\/webpush/,
-      hidden: !data?.webPushEnabled,
-    },
   ];
 
   settingsRoutes.forEach((settingsRoute) => {