MPDX-8351 Add UseLocalizedConstants() hook

__tests__/util/setup.ts

@@ -3,9 +3,17 @@ import 'isomorphic-fetch';
 import { Settings } from 'luxon';
 import { type useSession } from 'next-auth/react';
 import { session } from '__tests__/fixtures/session';
+import {
+  LoadConstantsDocument,
+  LoadConstantsQuery,
+} from 'src/components/Constants/LoadConstants.generated';
+import { loadConstantsMockData } from 'src/components/Constants/LoadConstantsMock';
+import { useApiConstants } from 'src/components/Constants/UseApiConstants';
 import { toHaveGraphqlOperation } from '../extensions/toHaveGraphqlOperation';
+import { gqlMock } from './graphqlMocking';
 import matchMediaMock from './matchMediaMock';
 
+jest.mock('src/components/Constants/UseApiConstants');
 jest.mock('next-auth/react', () => {
   return {
     getSession: jest.fn().mockResolvedValue(session),
@@ -21,6 +29,12 @@ jest.mock('next-auth/react', () => {
   };
 });
 
+(useApiConstants as jest.MockedFn<typeof useApiConstants>).mockReturnValue(
+  gqlMock<LoadConstantsQuery>(LoadConstantsDocument, {
+    mocks: loadConstantsMockData,
+  }).constant,
+);
+
 expect.extend({
   toHaveGraphqlOperation,
 });

pages/accountLists/[accountListId]/contacts/flows/setup.page.tsx

@@ -45,7 +45,8 @@ const StickyBox = styled(Box)(() => ({
 const ContactFlowSetupPage: React.FC = () => {
   const { t } = useTranslation();
   const accountListId = useAccountListId();
-  const { statusMap, contactStatuses } = useContactPartnershipStatuses();
+  const { statusMap, getContactStatusesByPhase } =
+    useContactPartnershipStatuses();
   const { enqueueSnackbar } = useSnackbar();
   const [flowOptions, setFlowOptions] = useState<FlowOption[]>([]);
   const resetColumnsMessage = t(
@@ -55,7 +56,7 @@ const ContactFlowSetupPage: React.FC = () => {
 
   useEffect(() => {
     if (!userOptions.length) {
-      setFlowOptions(getDefaultFlowOptions(t, contactStatuses));
+      setFlowOptions(getDefaultFlowOptions(t, getContactStatusesByPhase));
     } else {
       setFlowOptions(userOptions);
     }

pages/accountLists/[accountListId]/tools/merge/contacts/[[...contactId]].page.test.tsx

@@ -7,7 +7,6 @@ import { SnackbarProvider } from 'notistack';
 import { I18nextProvider } from 'react-i18next';
 import TestRouter from '__tests__/util/TestRouter';
 import { GqlMockedProvider } from '__tests__/util/graphqlMocking';
-import { loadConstantsMockData } from 'src/components/Constants/LoadConstantsMock';
 import { GetContactDuplicatesQuery } from 'src/components/Tool/MergeContacts/GetContactDuplicates.generated';
 import { getContactDuplicatesMocks } from 'src/components/Tool/MergeContacts/MergeContactsMock';
 import i18n from 'src/lib/i18n';
@@ -48,7 +47,6 @@ const Components = () => (
       }>
         mocks={{
           ...getContactDuplicatesMocks,
-          LoadConstants: loadConstantsMockData,
         }}
       >
         <I18nextProvider i18n={i18n}>

pages/api/Schema/reports/fourteenMonth/datahandler.ts

@@ -1,7 +1,7 @@
+import { convertStatus } from 'src/utils/functions/convertContactStatus';
 import {
   FourteenMonthReport,
   FourteenMonthReportCurrencyType,
-  StatusEnum,
 } from '../../../graphql-rest.page.generated';
 
 export interface FourteenMonthReportResponse {
@@ -69,61 +69,6 @@ export interface FourteenMonthReportResponse {
   };
 }
 
-// Convert a status string into a StatusEnum
-const convertStatus = (
-  status: string | null | undefined,
-): StatusEnum | null => {
-  // Statuses will be lowercase and underscored (i.e. "never_contacted") after task phases lands
-  // Statuses will be sentence case with spaces (i.e. "Never Contacted") before task phases lands
-  switch (status) {
-    case 'never_contacted':
-    case 'Never Contacted':
-      return StatusEnum.NeverContacted;
-    case 'ask_in_future':
-    case 'Ask in Future':
-      return StatusEnum.AskInFuture;
-    case 'cultivate_relationship':
-    case 'Cultivate Relationship':
-      return StatusEnum.CultivateRelationship;
-    case 'contact_for_appointment':
-    case 'Contact for Appointment':
-      return StatusEnum.ContactForAppointment;
-    case 'appointment_scheduled':
-    case 'Appointment Scheduled':
-      return StatusEnum.AppointmentScheduled;
-    case 'call_for_decision':
-    case 'Call for Decision':
-      return StatusEnum.CallForDecision;
-    case 'partner_financial':
-    case 'Partner - Financial':
-      return StatusEnum.PartnerFinancial;
-    case 'partner_special':
-    case 'Partner - Special':
-      return StatusEnum.PartnerSpecial;
-    case 'partner_pray':
-    case 'Partner - Pray':
-      return StatusEnum.PartnerPray;
-    case 'not_interested':
-    case 'Not Interested':
-      return StatusEnum.NotInterested;
-    case 'unresponsive':
-    case 'Unresponsive':
-      return StatusEnum.Unresponsive;
-    case 'never_ask':
-    case 'Never Ask':
-      return StatusEnum.NeverAsk;
-    case 'research_abandoned':
-    case 'Research Abandoned':
-      return StatusEnum.ResearchAbandoned;
-    case 'expired_referral':
-    case 'Expired Referral':
-      return StatusEnum.ExpiredReferral;
-
-    default:
-      return null;
-  }
-};
-
 export const mapFourteenMonthReport = (
   data: FourteenMonthReportResponse,
   currencyType: FourteenMonthReportCurrencyType,

pages/api/graphql-rest.page.ts

@@ -14,8 +14,6 @@ import {
   MergeContactsInput,
   MergePeopleBulkInput,
 } from 'src/graphql/types.generated';
-import i18n from 'src/lib/i18n';
-import { getLocalizedContactStatus } from '../../src/utils/functions/getLocalizedContactStatus';
 import schema from './Schema';
 import { getAccountListAnalytics } from './Schema/AccountListAnalytics/dataHandler';
 import { getAccountListCoaches } from './Schema/AccountListCoaches/dataHandler';
@@ -615,16 +613,7 @@ class MpdxRestApi extends RESTDataSource {
         // Status
         case 'status':
           filters[snakedKey] = (value as ContactFilterStatusEnum[])
-            .map((status) => {
-              const translated = getLocalizedContactStatus(i18n.t, status);
-              if (!translated) {
-                throw new Error(
-                  `Unrecognized ContactFilterStatusEnum value ${value}`,
-                );
-              }
-
-              return translated;
-            })
+            .map((status) => status.toLowerCase())
             .join(',');
           break;
 

src/components/Coaching/CoachingDetail/Activity/Activity.tsx

@@ -24,12 +24,12 @@ import {
   StatusEnum,
 } from 'src/graphql/types.generated';
 import { useLocale } from 'src/hooks/useLocale';
+import { useLocalizedConstants } from 'src/hooks/useLocalizedConstants';
 import {
   currencyFormat,
   dateFormat,
   dateFormatWithoutYear,
 } from 'src/lib/intlFormat';
-import { getLocalizedContactStatus } from 'src/utils/functions/getLocalizedContactStatus';
 import { MultilineSkeleton } from '../../../Shared/MultilineSkeleton';
 import { AccountListTypeEnum, CoachingPeriodEnum } from '../CoachingDetail';
 import { CoachingLink } from '../CoachingLink';
@@ -177,6 +177,7 @@ export const Activity: React.FC<ActivityProps> = ({
   primaryAppeal,
 }) => {
   const { t } = useTranslation();
+  const { getLocalizedContactStatus } = useLocalizedConstants();
   const locale = useLocale();
 
   const periodDuration =
@@ -288,7 +289,7 @@ export const Activity: React.FC<ActivityProps> = ({
                     {data?.accountListAnalytics.contactsByStatus.neverContacted}
                   </StatsText>
                   <StatsColumnTitle>
-                    {getLocalizedContactStatus(t, StatusEnum.NeverContacted)}
+                    {getLocalizedContactStatus(StatusEnum.NeverContacted)}
                   </StatsColumnTitle>
                 </CoachingLink>
               </StatsColumn>
@@ -303,7 +304,7 @@ export const Activity: React.FC<ActivityProps> = ({
                     {data?.accountListAnalytics.contactsByStatus.future}
                   </StatsText>
                   <StatsColumnTitle>
-                    {getLocalizedContactStatus(t, StatusEnum.AskInFuture)}
+                    {getLocalizedContactStatus(StatusEnum.AskInFuture)}
                   </StatsColumnTitle>
                 </CoachingLink>
               </StatsColumn>
@@ -319,7 +320,6 @@ export const Activity: React.FC<ActivityProps> = ({
                   </StatsText>
                   <StatsColumnTitle>
                     {getLocalizedContactStatus(
-                      t,
                       StatusEnum.CultivateRelationship,
                     )}
                   </StatsColumnTitle>
@@ -366,7 +366,6 @@ export const Activity: React.FC<ActivityProps> = ({
                   </StatsText>
                   <StatsColumnTitle>
                     {getLocalizedContactStatus(
-                      t,
                       StatusEnum.ContactForAppointment,
                     )}
                   </StatsColumnTitle>
@@ -386,10 +385,7 @@ export const Activity: React.FC<ActivityProps> = ({
                     }
                   </StatsText>
                   <StatsColumnTitle>
-                    {getLocalizedContactStatus(
-                      t,
-                      StatusEnum.AppointmentScheduled,
-                    )}
+                    {getLocalizedContactStatus(StatusEnum.AppointmentScheduled)}
                   </StatsColumnTitle>
                 </CoachingLink>
               </StatsColumn>
@@ -407,7 +403,7 @@ export const Activity: React.FC<ActivityProps> = ({
                     }
                   </StatsText>
                   <StatsColumnTitle>
-                    {getLocalizedContactStatus(t, StatusEnum.CallForDecision)}
+                    {getLocalizedContactStatus(StatusEnum.CallForDecision)}
                   </StatsColumnTitle>
                 </CoachingLink>
               </StatsColumn>

src/components/Coaching/CoachingDetail/LevelOfEffort/LevelOfEffort.test.tsx

@@ -1,6 +1,5 @@
 import { render, waitFor } from '@testing-library/react';
 import { GqlMockedProvider } from '__tests__/util/graphqlMocking';
-import { loadConstantsMockData } from 'src/components/Constants/LoadConstantsMock';
 import { CoachingPeriodEnum } from '../CoachingDetail';
 import { levelOfEffortMocks } from '../coachingMocks';
 import { LevelOfEffort } from './LevelOfEffort';
@@ -13,7 +12,6 @@ describe('LevelOfEffort', () => {
       <GqlMockedProvider
         mocks={{
           ...levelOfEffortMocks,
-          LoadConstants: loadConstantsMockData,
         }}
       >
         <LevelOfEffort
@@ -117,7 +115,7 @@ describe('LevelOfEffort', () => {
     );
 
     await waitFor(() =>
-      expect(mutationSpy.mock.calls[1][0].operation.variables).toMatchObject({
+      expect(mutationSpy.mock.calls[0][0].operation.variables).toMatchObject({
         range: '4w',
       }),
     );
@@ -134,7 +132,7 @@ describe('LevelOfEffort', () => {
     );
 
     await waitFor(() =>
-      expect(mutationSpy.mock.calls[1][0].operation.variables).toMatchObject({
+      expect(mutationSpy.mock.calls[0][0].operation.variables).toMatchObject({
         range: '4m',
       }),
     );

src/components/Constants/LoadConstantsMock.ts

@@ -898,6 +898,11 @@ export const loadConstantsMockData: LoadConstantsQuery = {
         symbol: '$',
         value: 'USD ($)',
       },
+      {
+        code: 'EUR',
+        codeSymbolString: 'EUR (€)',
+        name: 'Euro',
+      },
     ],
     pledgeFrequency: [
       {
@@ -911,6 +916,55 @@ export const loadConstantsMockData: LoadConstantsQuery = {
         value: 'Annual',
       },
     ],
+    languages: [
+      {
+        id: 'en',
+        value: 'English',
+      },
+      {
+        id: 'elx',
+        value: 'Greek',
+      },
+      {
+        id: 'eka',
+        value: 'Ekajuk',
+      },
+      {
+        id: 'en-AU',
+        value: 'Australian English',
+      },
+    ],
+    locales: [
+      {
+        englishName: 'Filipino (fil)',
+        nativeName: 'Filipino',
+        shortName: 'fil',
+      },
+      {
+        englishName: 'UK English (en-GB)',
+        nativeName: 'UK English',
+        shortName: 'en-GB',
+      },
+      {
+        englishName: 'Latin American Spanish (es-419)',
+        nativeName: 'español latinoamericano',
+        shortName: 'es-419',
+      },
+    ],
+    times: [
+      {
+        key: 0,
+        value: '12:00 AM',
+      },
+      {
+        key: 5,
+        value: '5:00 AM',
+      },
+      {
+        key: null,
+        value: 'Immediately',
+      },
+    ],
   },
 };
 

src/components/Constants/UseApiConstants.test.tsx

@@ -4,12 +4,10 @@ import { useApiConstants } from './UseApiConstants';
 
 describe('LoadConstants', () => {
   it('returns an object', async () => {
-    const { result, waitForNextUpdate } = renderHook(() => useApiConstants(), {
+    const { result } = renderHook(() => useApiConstants(), {
       wrapper: GqlMockedProvider,
     });
 
-    await waitForNextUpdate();
-
     expect(result.current?.activities).toBeTruthy();
     expect(result.current?.languages).toBeTruthy();
     expect(result.current?.likelyToGive).toBeTruthy();

src/components/Contacts/ContactDetails/ContactDetailsHeader/ContactHeaderSection/ContactHeaderStatusSection.test.tsx

@@ -2,8 +2,7 @@ import React from 'react';
 import { ThemeProvider } from '@mui/material/styles';
 import { render } from '@testing-library/react';
 import { I18nextProvider } from 'react-i18next';
-import { GqlMockedProvider, gqlMock } from '__tests__/util/graphqlMocking';
-import { LoadConstantsQuery } from 'src/components/Constants/LoadConstants.generated';
+import { gqlMock } from '__tests__/util/graphqlMocking';
 import { loadConstantsMockData } from 'src/components/Constants/LoadConstantsMock';
 import { PledgeFrequencyEnum, StatusEnum } from 'src/graphql/types.generated';
 import i18n from '../../../../../lib/i18n';
@@ -53,17 +52,11 @@ interface ComponentsProps {
 }
 
 const Components = ({ loading, contact }: ComponentsProps) => (
-  <GqlMockedProvider<{
-    LoadConstants: LoadConstantsQuery;
-  }>
-    mocks={{ LoadConstants: loadConstantsMockData }}
-  >
-    <ThemeProvider theme={theme}>
-      <I18nextProvider i18n={i18n}>
-        <ContactHeaderStatusSection loading={loading} contact={contact} />
-      </I18nextProvider>
-    </ThemeProvider>
-  </GqlMockedProvider>
+  <ThemeProvider theme={theme}>
+    <I18nextProvider i18n={i18n}>
+      <ContactHeaderStatusSection loading={loading} contact={contact} />
+    </I18nextProvider>
+  </ThemeProvider>
 );
 
 describe('ContactHeaderStatusSection', () => {