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/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">