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