CHI-3259: language select poc

hrm-form-definitions/form-definitions/as/v1/flexUiLocales.json

@@ -0,0 +1,5 @@
+[
+  { "label": "English", "aseloLocale": "en-US" },
+  { "label": "Thai", "aseloLocale": "th-TH" },
+  { "label": "Español", "aseloLocale": "es-CL" }
+]

hrm-form-definitions/form-definitions/br/v1/flexUiLocales.json

@@ -0,0 +1 @@
+[]

hrm-form-definitions/form-definitions/ca/v1/flexUiLocales.json

@@ -0,0 +1 @@
+[]

hrm-form-definitions/form-definitions/cl/v1/flexUiLocales.json

@@ -0,0 +1 @@
+[]

hrm-form-definitions/form-definitions/co/v1/flexUiLocales.json

@@ -0,0 +1 @@
+[]

hrm-form-definitions/form-definitions/e2e/v1/flexUiLocales.json

@@ -0,0 +1 @@
+[]

hrm-form-definitions/form-definitions/et/v1/flexUiLocales.json

@@ -0,0 +1 @@
+[]

hrm-form-definitions/form-definitions/hu/v1/flexUiLocales.json

@@ -0,0 +1 @@
+[]

hrm-form-definitions/form-definitions/in/v1/flexUiLocales.json

@@ -0,0 +1 @@
+[]

hrm-form-definitions/form-definitions/jm/v1/flexUiLocales.json

@@ -0,0 +1 @@
+[]

hrm-form-definitions/form-definitions/mt/v1/flexUiLocales.json

@@ -0,0 +1 @@
+[]

hrm-form-definitions/form-definitions/mw/v1/flexUiLocales.json

@@ -0,0 +1 @@
+[]

hrm-form-definitions/form-definitions/nz/v1/flexUiLocales.json

@@ -0,0 +1 @@
+[]

hrm-form-definitions/form-definitions/ph/v1/flexUiLocales.json

@@ -0,0 +1 @@
+[]

hrm-form-definitions/form-definitions/sg/v1/flexUiLocales.json

@@ -0,0 +1 @@
+[]

hrm-form-definitions/form-definitions/th/v1/flexUiLocales.json

@@ -0,0 +1 @@
+[]

hrm-form-definitions/form-definitions/tz/v1/flexUiLocales.json

@@ -0,0 +1 @@
+[]

hrm-form-definitions/form-definitions/ukmh/v1/flexUiLocales.json

@@ -0,0 +1 @@
+[]

hrm-form-definitions/form-definitions/usch/v1/flexUiLocales.json

@@ -0,0 +1 @@
+[]

hrm-form-definitions/form-definitions/uscr/v1/flexUiLocales.json

@@ -0,0 +1 @@
+[]

hrm-form-definitions/form-definitions/za/v1/flexUiLocales.json

@@ -0,0 +1 @@
+[]

hrm-form-definitions/form-definitions/zm/v1/flexUiLocales.json

@@ -0,0 +1 @@
+[]

hrm-form-definitions/form-definitions/zw/v1/flexUiLocales.json

@@ -0,0 +1 @@
+[]

hrm-form-definitions/src/__tests__/fetchDefinitionsMock.ts

@@ -56,6 +56,7 @@ const files = [
   'profileForms/FlagDurations.json',
   'customStrings/Messages.json',
   'customStrings/Substitutions.json',
+  'flexUiLocales.json',
 ];
 
 const getDefinitionVersionId = (formDefinitionsBaseUrl: string) =>

hrm-form-definitions/src/formDefinition/loadDefinition.ts

@@ -34,6 +34,7 @@ import {
   ProfileFlagDurationDefinition,
   ProfileSectionDefinition,
   LocalizedStringMap,
+  FlexUILocaleEntry,
 } from './types';
 import { OneToManyConfigSpecs, OneToOneConfigSpec } from './insightsConfig';
 import { LayoutVersion } from './layoutVersion';
@@ -196,6 +197,7 @@ export async function loadDefinition(baseUrl: string): Promise<DefinitionVersion
     profileFlagDurations,
     messages,
     substitutions,
+    flexUiLocales,
   ] = await Promise.all([
     fetchDefinition<LayoutVersion>('LayoutDefinitions.json'),
     fetchDefinition<FormItemJsonDefinition[]>('tabbedForms/CallerInformationTab.json'),
@@ -225,6 +227,7 @@ export async function loadDefinition(baseUrl: string): Promise<DefinitionVersion
     fetchDefinition<ProfileFlagDurationDefinition[]>('profileForms/FlagDurations.json', []),
     fetchDefinition<LocalizedStringMap>('customStrings/Messages.json', {}),
     fetchDefinition<LocalizedStringMap>('customStrings/Substitutions.json', {}),
+    fetchDefinition<FlexUILocaleEntry[]>('flexUiLocales.json', []),
   ] as const);
   const expandedCaseSections: CaseSectionTypeDefinitions = await loadAndExpandCaseSections(
     caseSections,
@@ -267,5 +270,6 @@ export async function loadDefinition(baseUrl: string): Promise<DefinitionVersion
       Messages: messages,
       Substitutions: substitutions,
     },
+    flexUiLocales,
   };
 }

hrm-form-definitions/src/formDefinition/types.ts

@@ -243,6 +243,12 @@ export declare type ProfileFlagDurationDefinition = {
   durationInHours: string;
 };
 
+export declare type FlexUILocaleEntry = {
+  label: string;
+  aseloLocale: string;
+  flexLocale?: string; // We try to automatically infer the best match from the list of supported locals if this is not set
+};
+
 export type FormItemDefinition =
   | InputDefinition
   | SearchInputDefinition
@@ -412,4 +418,5 @@ export type DefinitionVersion = {
     Messages: LocalizedStringMap;
     Substitutions: LocalizedStringMap;
   };
+  flexUiLocales?: FlexUILocaleEntry[];
 };

plugin-hrm-form/src/HrmFormPlugin.tsx

@@ -21,7 +21,7 @@ import './styles/global-overrides.css';
 
 import reducers from './states';
 import HrmTheme, { overrides } from './styles/HrmTheme';
-import { initLocalization, defaultLanguage } from './translations';
+import { defaultLanguage, initLocalization } from './translations';
 import * as Providers from './utils/setUpProviders';
 import * as ActionFunctions from './utils/setUpActions';
 import { recordCallState } from './utils/setUpActions';
@@ -56,7 +56,7 @@ export type SetupObject = ReturnType<typeof getHrmConfig>;
 const setUpLocalization = (config: ReturnType<typeof getHrmConfig>) => {
   const manager = Flex.Manager.getInstance();
 
-  const { helplineLanguage } = config;
+  const { counselorLanguage, helplineLanguage } = config;
 
   const twilioStrings = { ...manager.strings }; // save the originals
 
@@ -72,7 +72,10 @@ const setUpLocalization = (config: ReturnType<typeof getHrmConfig>) => {
 
   const localizationConfig = { twilioStrings, setNewStrings, afterNewStrings };
 
-  return initLocalization(localizationConfig, helplineLanguage);
+  return initLocalization(
+    localizationConfig,
+    localStorage.getItem('ASELO_PLUGIN_USER_LOCALE') || counselorLanguage || helplineLanguage || defaultLanguage,
+  );
 };
 
 const setUpComponents = (
@@ -127,6 +130,8 @@ const setUpComponents = (
   TeamsView.setUpWorkerDirectoryFilters();
 
   if (featureFlags.enable_conferencing) setupConferenceComponents();
+
+  Components.setupWorkerLanguageSelect(translateUI);
 };
 
 const setUpActions = (

plugin-hrm-form/src/___tests__/components/case/Case.test.tsx

@@ -84,10 +84,17 @@ beforeEach(() => {
 describe('useState mocked', () => {
   const verifyTimelineActions = () => {
     ['household', 'incident', 'perpetrator'].forEach(sectionType => {
-      expect(mockNewGetTimelineAction).toHaveBeenCalledWith(case1.connectedCase.id, sectionType, [sectionType], false, {
-        limit: 100,
-        offset: 0,
-      });
+      expect(mockNewGetTimelineAction).toHaveBeenCalledWith(
+        case1.connectedCase.id,
+        sectionType,
+        [sectionType],
+        false,
+        {
+          limit: 100,
+          offset: 0,
+        },
+        `case-${case1.connectedCase.id}`,
+      );
     });
 
     expect(mockNewGetTimelineAction).toHaveBeenCalledWith(
@@ -96,6 +103,7 @@ describe('useState mocked', () => {
       expect.arrayContaining(['referral', 'note']),
       true,
       { limit: 5, offset: 0 },
+      `case-${case1.connectedCase.id}`,
     );
   };
 
@@ -136,12 +144,8 @@ describe('useState mocked', () => {
       twilioWorkerId: WORKER_SID,
       status: 'open',
       info: { definitionVersion: DefinitionVersionId.v1 },
-      categories: {},
       accountSid: 'AC-accountSid',
       helpline: 'helpline',
-      firstContact: {
-        id: 'contact1',
-      } as Contact,
     },
     availableStatusTransitions: [],
     references: new Set(['x']),

plugin-hrm-form/src/___tests__/states/case/timeline.test.ts

@@ -111,6 +111,7 @@ describe('newGetTimelineAsyncAction', () => {
       ['note', 'household'],
       true,
       SAMPLE_PAGINATION,
+      'test-reference',
     );
     expect(getCaseTimeline).toHaveBeenCalledWith(TEST_CASE_ID, ['note', 'household'], true, SAMPLE_PAGINATION);
 
@@ -120,6 +121,7 @@ describe('newGetTimelineAsyncAction', () => {
       timelineId: TEST_TIMELINE_ID,
       caseId: TEST_CASE_ID,
       pagination: SAMPLE_PAGINATION,
+      reference: 'test-reference',
     });
   });
 
@@ -197,7 +199,14 @@ describe('newGetTimelineAsyncAction', () => {
         } = getState() as HrmState;
         mockGetCaseTimeline.mockResolvedValue(apiResponse);
         await ((dispatch(
-          newGetTimelineAsyncAction(TEST_CASE_ID, TEST_TIMELINE_ID, ['note', 'household'], true, pagination),
+          newGetTimelineAsyncAction(
+            TEST_CASE_ID,
+            TEST_TIMELINE_ID,
+            ['note', 'household'],
+            true,
+            pagination,
+            'test-reference',
+          ),
         ) as unknown) as PromiseLike<void>);
         const {
           connectedCase: {

plugin-hrm-form/src/components/case/CaseSection.tsx

@@ -65,7 +65,14 @@ const CaseSection: React.FC<Props> = ({ taskSid, canAdd, sectionType }) => {
       // eslint-disable-next-line no-console
       console.log(`Fetching ${sectionType} sections for case ${caseId}`);
       asyncDispatcher(
-        newGetTimelineAsyncAction(caseId, sectionType, [sectionType], false, { offset: 0, limit: MAX_SECTIONS }),
+        newGetTimelineAsyncAction(
+          caseId,
+          sectionType,
+          [sectionType],
+          false,
+          { offset: 0, limit: MAX_SECTIONS },
+          `case-${caseId}`,
+        ),
       );
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps

plugin-hrm-form/src/components/case/casePrint/CasePrintView.tsx

@@ -115,10 +115,17 @@ const CasePrintView: React.FC<OwnProps> = ({ task }) => {
   useEffect(() => {
     if (!contactTimeline) {
       dispatch(
-        newGetTimelineAsyncAction(connectedCase.id, 'print-contacts', [], true, {
-          offset: 0,
-          limit: MAX_PRINTOUT_CONTACTS,
-        }),
+        newGetTimelineAsyncAction(
+          connectedCase.id,
+          'print-contacts',
+          [],
+          true,
+          {
+            offset: 0,
+            limit: MAX_PRINTOUT_CONTACTS,
+          },
+          `case-${connectedCase.id}`,
+        ),
       );
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -129,10 +136,17 @@ const CasePrintView: React.FC<OwnProps> = ({ task }) => {
     useEffect(
       () => {
         dispatch(
-          newGetTimelineAsyncAction(connectedCase.id, sectionType, [sectionType], false, {
-            offset: 0,
-            limit: MAX_SECTIONS,
-          }),
+          newGetTimelineAsyncAction(
+            connectedCase.id,
+            sectionType,
+            [sectionType],
+            false,
+            {
+              offset: 0,
+              limit: MAX_SECTIONS,
+            },
+            `case-${connectedCase.id}`,
+          ),
         );
       },
       // eslint-disable-next-line react-hooks/exhaustive-deps

plugin-hrm-form/src/components/case/timeline/FullTimelineView.tsx

@@ -53,10 +53,17 @@ const mapDispatchToProps = (dispatch: Dispatch<any>, { task }: MyProps) => {
         changeRoute({ route: 'case', subroute: 'timeline', caseId, page }, task.taskSid, ChangeRouteMode.Replace),
       );
       dispatch(
-        newGetTimelineAsyncAction(caseId, 'prime-timeline', ['note', 'referral'], true, {
-          offset: page * TIMELINE_PAGE_SIZE,
-          limit: TIMELINE_PAGE_SIZE,
-        }),
+        newGetTimelineAsyncAction(
+          caseId,
+          'prime-timeline',
+          ['note', 'referral'],
+          true,
+          {
+            offset: page * TIMELINE_PAGE_SIZE,
+            limit: TIMELINE_PAGE_SIZE,
+          },
+          `case-${caseId}`,
+        ),
       );
     },
   };

plugin-hrm-form/src/components/case/timeline/Timeline.tsx

@@ -92,10 +92,17 @@ const Timeline: React.FC<OwnProps> = ({
     if (caseId) {
       console.log(`Fetching main timeline sections for case ${caseId}`);
       asyncDispatch(dispatch)(
-        newGetTimelineAsyncAction(caseId, timelineId, timelineCaseSectionTypes, true, {
-          offset: page * pageSize,
-          limit: pageSize,
-        }),
+        newGetTimelineAsyncAction(
+          caseId,
+          timelineId,
+          timelineCaseSectionTypes,
+          true,
+          {
+            offset: page * pageSize,
+            limit: pageSize,
+          },
+          `case-${caseId}`,
+        ),
       );
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps

plugin-hrm-form/src/components/caseList/CaseListTableRow.tsx

@@ -95,7 +95,9 @@ const CaseListTableRow: React.FC<Props> = ({ caseId, handleClickViewCase }) => {
 
   useEffect(() => {
     if (!timelineCategories) {
-      dispatch(newGetTimelineAsyncAction(caseId, CONTACTS_TIMELINE_ID, [], true, { offset: 0, limit: 10000 }));
+      dispatch(
+        newGetTimelineAsyncAction(caseId, CONTACTS_TIMELINE_ID, [], true, { offset: 0, limit: 10000 }, `case-list`),
+      );
     }
   }, [timelineCategories, caseId, dispatch]);