MPDX-8351 Add UseLocalizedConstants() hook

src/components/Constants/LoadConstants.graphql

@@ -31,9 +31,11 @@ query LoadConstants {
     # }
     pledgeCurrency {
       id
+      key
       codeSymbolString
       name
       code
+      value
       symbol
     }
     pledgeFrequency {
@@ -83,4 +85,11 @@ query LoadConstants {
       tasks
     }
   }
+  user {
+    id
+    preferences {
+      id
+      locale
+    }
+  }
 }

src/components/Constants/LoadConstantsMock.ts

@@ -24,6 +24,7 @@ const LoadConstantsMock = (): MockedResponse => {
 };
 
 export const loadConstantsMockData: LoadConstantsQuery = {
+  user: { id: '123', preferences: { id: '123', locale: 'en' } },
   constant: {
     status: [
       {

src/components/Constants/UseApiConstants.tsx

@@ -1,3 +1,5 @@
+import { useEffect } from 'react';
+import { useLocalStorage } from 'src/hooks/useLocalStorage';
 import {
   LoadConstantsQuery,
   useLoadConstantsQuery,
@@ -7,9 +9,22 @@ import {
 export const useApiConstants = ():
   | LoadConstantsQuery['constant']
   | undefined => {
-  const { data } = useLoadConstantsQuery({
+  const { data, refetch } = useLoadConstantsQuery({
     fetchPolicy: 'cache-first',
   });
 
+  const userSavedLanguage = data?.user.preferences?.locale;
+  const [localeStorageLanguage, setLocaleStorageLanguage] = useLocalStorage(
+    `user-language`,
+    '',
+  );
+  useEffect(() => {
+    // if the language in locale storage is different than the saved language, the user may have changed languages in a different browser. If so, refetch the constants.
+    if (localeStorageLanguage !== userSavedLanguage) {
+      setLocaleStorageLanguage(userSavedLanguage || '');
+      refetch();
+    }
+  }, [userSavedLanguage]);
+
   return data?.constant;
 };

src/components/Settings/preferences/accordions/LanguageAccordion/LanguageAccordion.tsx

@@ -9,6 +9,7 @@ import { FieldWrapper } from 'src/components/Shared/Forms/FieldWrapper';
 import { FormWrapper } from 'src/components/Shared/Forms/FormWrapper';
 import { Preference } from 'src/graphql/types.generated';
 import useGetAppSettings from 'src/hooks/useGetAppSettings';
+import { useLocalStorage } from 'src/hooks/useLocalStorage';
 import { formatLanguage, languages } from 'src/lib/data/languages';
 import { useUpdatePersonalPreferencesMutation } from '../UpdatePersonalPreferences.generated';
 
@@ -33,6 +34,7 @@ export const LanguageAccordion: React.FC<LanguageAccordionProps> = ({
   const { appName } = useGetAppSettings();
   const { enqueueSnackbar } = useSnackbar();
   const [updatePersonalPreferences] = useUpdatePersonalPreferencesMutation();
+  const [_, setLocaleStorageLanguage] = useLocalStorage(`user-language`, '');
 
   const label = t('Language');
 
@@ -55,6 +57,7 @@ export const LanguageAccordion: React.FC<LanguageAccordionProps> = ({
         enqueueSnackbar(t('Saved successfully.'), {
           variant: 'success',
         });
+        setLocaleStorageLanguage(attributes.locale || '');
       },
       onError: () => {
         enqueueSnackbar(t('Saving failed.'), {