Merge pull request #779 from AppQuality/develop

release 20240229

Author: marcbon

package.json

@@ -3,7 +3,7 @@
   "version": "1.4.0",
   "private": true,
   "dependencies": {
-    "@appquality/unguess-design-system": "3.1.72",
+    "@appquality/unguess-design-system": "3.1.78",
     "@headwayapp/react-widget": "^0.0.4",
     "@reduxjs/toolkit": "^1.8.0",
     "@rtk-query/codegen-openapi": "1.2.0",

src/features/api/api.ts

@@ -28,6 +28,7 @@ export const apiSlice = createApi({
     'CustomStatuses',
     'Bug',
     'BugComments',
+    'Preferences',
   ],
   endpoints: () => ({}),
 });

src/features/api/apiTags.ts

@@ -89,6 +89,12 @@ unguessApi.enhanceEndpoints({
     deleteCampaignsByCidBugsAndBidCommentsCmid: {
       invalidatesTags: ['BugComments'],
     },
+    getUsersMePreferences: {
+      providesTags: ['Preferences'],
+    },
+    putUsersMePreferencesByPrefid: {
+      invalidatesTags: ['Preferences'],
+    },
     postCampaignsByCidBugsAndBidComments: {
       invalidatesTags: ['Bugs'],
       async onQueryStarted({ cid, bid }, { dispatch, queryFulfilled }) {

src/features/api/index.ts

@@ -483,6 +483,22 @@ const injectedRtkApi = api.injectEndpoints({
         body: queryArg.body,
       }),
     }),
+    getUsersMePreferences: build.query<
+      GetUsersMePreferencesApiResponse,
+      GetUsersMePreferencesApiArg
+    >({
+      query: () => ({ url: `/users/me/preferences` }),
+    }),
+    putUsersMePreferencesByPrefid: build.mutation<
+      PutUsersMePreferencesByPrefidApiResponse,
+      PutUsersMePreferencesByPrefidApiArg
+    >({
+      query: (queryArg) => ({
+        url: `/users/me/preferences/${queryArg.prefid}`,
+        method: 'PUT',
+        body: queryArg.body,
+      }),
+    }),
   }),
   overrideExisting: false,
 });
@@ -1198,6 +1214,18 @@ export type DeleteCampaignsByCidBugsAndBidCommentsCmidApiArg = {
   cmid: string;
   body: {};
 };
+export type GetUsersMePreferencesApiResponse = /** status 200 OK */ {
+  items?: UserPreference[];
+};
+export type GetUsersMePreferencesApiArg = void;
+export type PutUsersMePreferencesByPrefidApiResponse =
+  /** status 200 OK */ UserPreference;
+export type PutUsersMePreferencesByPrefidApiArg = {
+  prefid: string;
+  body: {
+    value: number;
+  };
+};
 export type Error = {
   message: string;
   code: number;
@@ -1576,6 +1604,11 @@ export type BugComment = {
     isInternal: boolean;
   };
 };
+export type UserPreference = {
+  preference_id: number;
+  value: number;
+  name: string;
+};
 export const {
   use$getQuery,
   usePostAuthenticateMutation,
@@ -1631,4 +1664,6 @@ export const {
   useGetCampaignsByCidBugsAndBidCommentsQuery,
   usePostCampaignsByCidBugsAndBidCommentsMutation,
   useDeleteCampaignsByCidBugsAndBidCommentsCmidMutation,
+  useGetUsersMePreferencesQuery,
+  usePutUsersMePreferencesByPrefidMutation,
 } = injectedRtkApi;

src/features/navigation/Navigation.tsx

@@ -2,6 +2,7 @@ import {
   Content,
   Notification,
   ProfileModal,
+  Skeleton,
   useToast,
 } from '@appquality/unguess-design-system';
 import { useEffect } from 'react';
@@ -22,6 +23,10 @@ import i18n from 'src/i18n';
 import styled from 'styled-components';
 import { Header } from '../../common/components/navigation/header/header';
 import { usePathWithoutLocale } from './usePathWithoutLocale';
+import {
+  useGetUsersMePreferencesQuery,
+  usePutUsersMePreferencesByPrefidMutation,
+} from '../api';
 
 const StyledContent = styled(Content)`
   height: 100%;
@@ -44,7 +49,41 @@ export const Navigation = ({
   const { activeWorkspace } = useActiveWorkspace();
   const { addToast } = useToast();
 
-  // Set isSidebarOpen to false for specific routes
+  const {
+    data: preferences,
+    isLoading: isLoadingPrefs,
+    isFetching: isFetchingPrefs,
+    isError,
+  } = useGetUsersMePreferencesQuery();
+
+  const notificationsPreference = preferences?.items?.find(
+    (preference) => preference?.name === 'notifications_enabled'
+  );
+
+  const [updatePreference] = usePutUsersMePreferencesByPrefidMutation();
+
+  const onSetSettings = async (value: number) => {
+    await updatePreference({
+      prefid: `${notificationsPreference?.preference_id}`,
+      body: { value },
+    })
+      .unwrap()
+      .then(() => {
+        addToast(
+          ({ close }) => (
+            <Notification
+              onClose={close}
+              type="success"
+              message={t('__PROFILE_MODAL_NOTIFICATIONS_UPDATED')}
+              closeText={t('__TOAST_CLOSE_TEXT')}
+              isPrimary
+            />
+          ),
+          { placement: 'top' }
+        );
+      });
+  };
+
   useEffect(() => {
     switch (route) {
       case 'service':
@@ -111,6 +150,22 @@ export const Navigation = ({
       title: t('__PROFILE_MODAL_PRIVACY_ITEM_LABEL'),
       url: 'https://www.iubenda.com/privacy-policy/833252/full-legal',
     },
+    settingValue: notificationsPreference?.value,
+    i18n: {
+      settingsTitle: t('__PROFILE_MODAL_NOTIFICATIONS_TITLE'),
+      settingsIntroText: t('__PROFILE_MODAL_NOTIFICATIONS_INTRO'),
+      settingsOutroText: {
+        paragraph_1: t('__PROFILE_MODAL_NOTIFICATIONS_OUTRO_P_1'),
+        paragraph_2: t('__PROFILE_MODAL_NOTIFICATIONS_OUTRO_P_2'),
+        paragraph_3: t('__PROFILE_MODAL_NOTIFICATIONS_OUTRO_P_3'),
+      },
+      settingsToggle: {
+        title: t('__PROFILE_MODAL_NOTIFICATIONS_TOGGLE_TITLE'),
+        on: t('__PROFILE_MODAL_NOTIFICATIONS_TOGGLE_ON'),
+        off: t('__PROFILE_MODAL_NOTIFICATIONS_TOGGLE_OFF'),
+      },
+    },
+    onSetSettings,
     onSelectLanguage: (lang: string) => {
       if (pathWithoutLocale === false) return;
       if (lang === i18n.language) return;
@@ -158,9 +213,19 @@ export const Navigation = ({
 
   if (!activeWorkspace) return null;
 
+  if (isLoadingPrefs) {
+    return <Skeleton />;
+  }
+  if (isError || !preferences) {
+    return null;
+  }
   return (
     <>
-      <Header {...(isMinimal && { style: { display: 'none' } })} />
+      <Header
+        {...(isMinimal && {
+          style: { display: 'none', opacity: isFetchingPrefs ? 0.5 : 1 },
+        })}
+      />
       {isProfileModalOpen && (
         <ProfileModal onClose={onProfileModalClose} menuArgs={profileModal} />
       )}

src/locales/en/translation.json

@@ -807,6 +807,15 @@
   "__PROFILE_MODAL_FEEDBACK_TITLE": "Give us your feedback",
   "__PROFILE_MODAL_LANGUAGES_TITLE": "Change Language",
   "__PROFILE_MODAL_LOGOUT_TITLE": "Log Out",
+  "__PROFILE_MODAL_NOTIFICATIONS_INTRO": "Manage the notifications we send you by email.",
+  "__PROFILE_MODAL_NOTIFICATIONS_OUTRO_P_1": "By turning on notifications, you will be updated on: ",
+  "__PROFILE_MODAL_NOTIFICATIONS_OUTRO_P_2": "comments, mentions, campaign starting, campaign ending, and invitations.",
+  "__PROFILE_MODAL_NOTIFICATIONS_OUTRO_P_3": "By turning off notifications, you will be only updated on mentions and invitations",
+  "__PROFILE_MODAL_NOTIFICATIONS_TITLE": "Notifications settings",
+  "__PROFILE_MODAL_NOTIFICATIONS_TOGGLE_OFF": "No",
+  "__PROFILE_MODAL_NOTIFICATIONS_TOGGLE_ON": "Yes",
+  "__PROFILE_MODAL_NOTIFICATIONS_TOGGLE_TITLE": "Allow notifications",
+  "__PROFILE_MODAL_NOTIFICATIONS_UPDATED": "Changes saved",
   "__PROFILE_MODAL_PRIVACY_ITEM_LABEL": "Privacy settings",
   "__PROJECT_PAGE_UPDATE_PROJECT_NAME_ERROR": "Error",
   "__PROJECT_SETTINGS_CTA_TEXT": "Invite",