fix: add story map notifications preference (#1168)

techmatters · Sep 11, 2023 · 17d4832 · 17d4832
1 parent a459472
commit 17d4832
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 16 deletions.
diff --git a/src/account/components/AccountProfile.js b/src/account/components/AccountProfile.js
@@ -25,7 +25,9 @@ import {
 } from 'terraso-client-shared/account/accountSlice';
 import { useFetchData } from 'terraso-client-shared/store/utils';
 import * as yup from 'yup';
-import { Checkbox, FormControlLabel } from '@mui/material';
+import { Checkbox, FormControlLabel, Typography } from '@mui/material';
+
+import { withProps } from 'react-hoc';
 
 import { useDocumentDescription, useDocumentTitle } from 'common/document';
 import Form from 'forms/components/Form';
@@ -82,10 +84,47 @@ const FIELDS = [
     },
   },
   {
-    name: 'preferences.notifications',
-    label: 'account.form_notifications_section_label',
+    name: 'notifications',
+    renderStaticElement: ({ t }) => (
+      <Typography
+        variant="caption"
+        size="small"
+        sx={{ pl: 2, textTransform: 'uppercase', opacity: 0.6 }}
+      >
+        {t('account.form_notifications_section_label')}
+      </Typography>
+    ),
+  },
+  {
+    name: 'preferences.group_notifications',
+    props: {
+      renderInput: ({ id, field }) => (
+        <GroupNotificationsCheckbox field={field} />
+      ),
+      gridItemProps: {
+        sx: {
+          '&.MuiGrid-root.MuiGrid-item': {
+            pt: 0,
+          },
+          pb: 0,
+        },
+      },
+    },
+  },
+  {
+    name: 'preferences.story_map_notifications',
     props: {
-      renderInput: ({ id, field }) => <NotificationsCheckboxes field={field} />,
+      renderInput: ({ id, field }) => (
+        <StoryMapNotificationsCheckbox field={field} />
+      ),
+      gridItemProps: {
+        sx: {
+          '&.MuiGrid-root.MuiGrid-item': {
+            pt: 0,
+          },
+          m: 0,
+        },
+      },
     },
   },
   {
@@ -104,7 +143,11 @@ const FIELDS = [
   },
 ];
 
-const PREFERENCE_KEYS = ['language', 'notifications'];
+const PREFERENCE_KEYS = [
+  'language',
+  'group_notifications',
+  'story_map_notifications',
+];
 
 const ProfilePicture = () => {
   const { data: user } = useSelector(_.get('account.profile'));
@@ -133,7 +176,7 @@ const AccountProfile = () => {
     dispatch(
       saveUser(
         _.omit(
-          ['profilePicture', 'email'].concat(
+          ['profilePicture', 'notifications', 'email'].concat(
             PREFERENCE_KEYS.map(key => `preferences.${key}`)
           ),
           updatedProfile
@@ -158,7 +201,7 @@ const AccountProfile = () => {
           savePreference({ key: preferenceKey, value: newValue.toString() })
         );
 
-        if (preferenceKey === 'notifications') {
+        if (_.endsWith(preferenceKey, 'notifications')) {
           trackEvent('preference.update', {
             props: { emailNotifications: newValue },
           });
@@ -188,9 +231,9 @@ const AccountProfile = () => {
   );
 };
 
-const NotificationsCheckboxes = props => {
+const BaseNotificationsCheckbox = props => {
   const { t } = useTranslation();
-  const { field } = props;
+  const { field, formKey, label } = props;
 
   const handleChange = useCallback(
     event => {
@@ -201,7 +244,7 @@ const NotificationsCheckboxes = props => {
 
   return (
     <FormControlLabel
-      key="notifications"
+      key={formKey}
       control={
         <Checkbox
           sx={{ pt: 0 }}
@@ -212,9 +255,19 @@ const NotificationsCheckboxes = props => {
       sx={{
         alignItems: 'flex-start',
       }}
-      label={t('account.form_notifications_label')}
+      label={t(label)}
     />
   );
 };
 
+const GroupNotificationsCheckbox = withProps(BaseNotificationsCheckbox, {
+  formKey: 'group_notifications',
+  label: 'account.form_notifications_group_label',
+});
+
+const StoryMapNotificationsCheckbox = withProps(BaseNotificationsCheckbox, {
+  formKey: 'story_map_notifications',
+  label: 'account.form_notifications_story_map_label',
+});
+
 export default AccountProfile;
diff --git a/src/account/components/AccountProfile.test.js b/src/account/components/AccountProfile.test.js
@@ -245,7 +245,7 @@ test('AccountProfile: Save language', async () => {
   });
 });
 
-test('AccountProfile: Save notifications', async () => {
+test('AccountProfile: Save group notifications', async () => {
   terrasoApi.requestGraphQL.mockImplementation(query => {
     const trimmedQuery = query.trim();
 
@@ -278,7 +278,7 @@ test('AccountProfile: Save notifications', async () => {
             preferences: {
               edges: [
                 { node: { key: 'language', value: 'es-ES' } },
-                { node: { key: 'notifications', value: 'false' } },
+                { node: { key: 'group_notifications', value: 'false' } },
               ],
             },
           },
@@ -290,7 +290,7 @@ test('AccountProfile: Save notifications', async () => {
       return Promise.resolve(
         _.set(
           'updateUserPreference.preference',
-          { key: 'notifications', value: 'true' },
+          { key: 'group_notifications', value: 'true' },
           {}
         )
       );
@@ -311,7 +311,7 @@ test('AccountProfile: Save notifications', async () => {
   expect(terrasoApi.requestGraphQL).toHaveBeenCalledTimes(4);
   expect(terrasoApi.requestGraphQL.mock.calls[3][1]).toStrictEqual({
     input: {
-      key: 'notifications',
+      key: 'group_notifications',
       userEmail: '[email protected]',
       value: 'true',
     },

diff --git a/src/localization/locales/en-US.json b/src/localization/locales/en-US.json
@@ -212,7 +212,8 @@
         "profile_form_label": "Manage profile",
         "form_language_label": "Language",
         "form_notifications_section_label": "Email notifications",
-        "form_notifications_label": "Notify me when a group I manage has pending requests or my request to join a closed group is approved",
+        "form_notifications_group_label": "A group I manage has pending requests or my request to join a closed group is approved",
+        "form_notifications_story_map_label": "I am invited to edit a story map",
         "unsubscribe_title": "Unsubscribe",
         "unsubscribe_success": "You have been unsubscribed from Terraso emails.",
         "unsubscribe_error": "Error unsubscribing from Terraso emails"