chore: [DHIS2-21969] Archived

src/core_modules/capture-core-utils/featuresSupport/support.ts

@@ -6,6 +6,7 @@ export const FEATURES = Object.freeze({
     orgUnitReplaceOuQueryParam: 'orgUnitReplaceOuQueryParam',
     enrollmentStatusReplaceProgramStatusQueryParam: 'enrollmentStatusReplaceProgramStatusQueryParam',
     emptyValueFilter: 'emptyValueFilter',
+    customTerminologyPlurals: 'customTerminologyPlurals',
 });
 
 const MINOR_VERSION_SUPPORT = Object.freeze({
@@ -16,6 +17,7 @@ const MINOR_VERSION_SUPPORT = Object.freeze({
     [FEATURES.orgUnitReplaceOuQueryParam]: 42,
     [FEATURES.enrollmentStatusReplaceProgramStatusQueryParam]: 42,
     [FEATURES.emptyValueFilter]: 42,
+    [FEATURES.customTerminologyPlurals]: 43,
 });
 
 export const hasAPISupportForFeature = (minorVersion: string | number, featureName: string) =>

src/core_modules/capture-core-utils/string/capitalizeFirstLetter.ts

@@ -1,5 +1,11 @@
+import i18n from '@dhis2/d2-i18n';
+
 export function capitalizeFirstLetter(text: string) {
-    const first = text.charAt(0).toLocaleUpperCase();
-    const rest = text.slice(1);
-    return first + rest;
+    if (!text) return text;
+    const locale = (i18n as any).language ?? 'en';
+    try {
+        return text.charAt(0).toLocaleUpperCase(locale) + text.slice(1);
+    } catch {
+        return text.charAt(0).toUpperCase() + text.slice(1);
+    }
 }

src/core_modules/capture-core/HOC/withCustomLabels.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { capitalizeFirstLetter } from 'capture-core-utils/string/capitalizeFirstLetter';
+import { useTermLabel, type TermRequest } from '../metaData';
+
+export const withCustomLabels =
+    (requests: ReadonlyArray<TermRequest>) =>
+        (InnerComponent: React.ComponentType<any>) =>
+            (props: any) => {
+                const { programId, stageId } = props;
+                const labels = useTermLabel(requests, { programId, stageId });
+                const capitalized = Object.fromEntries(
+                    Object.entries(labels).map(([key, value]) => [key, capitalizeFirstLetter(value)]),
+                );
+                return <InnerComponent {...props} {...capitalized} />;
+            };

src/core_modules/capture-core/components/Breadcrumbs/BulkDataEntryBreadcrumb/hooks/useOriginLabel.ts

@@ -2,6 +2,7 @@ import i18n from '@dhis2/d2-i18n';
 import { useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import { breadcrumbsKeys } from '../BulkDataEntryBreadcrumb';
+import { LabelKeys, useTermLabel } from '../../../../metaData';
 
 type Props = {
     programId: string;
@@ -10,30 +11,35 @@ type Props = {
     page: string;
 };
 
-const DefaultFilterLabels = {
-    default: i18n.t('Program overview'),
-    active: i18n.t('Active enrollments'),
-    complete: i18n.t('Completed enrollments'),
-    cancelled: i18n.t('Cancelled enrollments'),
-};
-
-const getWorkingListLabel = (selectedTemplate: any, selectedTemplateId: string) => {
+const getWorkingListLabel = (
+    selectedTemplate: any,
+    selectedTemplateId: string,
+    defaultFilterLabels: Record<string, string>,
+) => {
     if (selectedTemplate && !selectedTemplate.isDefault) {
         return selectedTemplate.name;
     }
     if (selectedTemplateId && !selectedTemplate) {
-        return DefaultFilterLabels[selectedTemplateId as keyof typeof DefaultFilterLabels];
+        return defaultFilterLabels[selectedTemplateId as keyof typeof defaultFilterLabels];
     }
     return i18n.t('Program overview');
 };
 
 export const useOriginLabel = ({ programId, displayFrontPageList, page }: Props) => {
+    const { enrollmentsLabel } = useTermLabel([LabelKeys.enrollmentPlural]);
     const workingListTemplates = useSelector(({ workingListsTemplates }: any) => workingListsTemplates?.teiList);
     const workingListProgramId = useSelector(({ workingListsContext }: any) => workingListsContext?.teiList?.programIdView);
     const { selectedTemplateId, loading: isLoadingTemplates, templates } = workingListTemplates ?? {};
     const selectedTemplate = templates?.find(({ id }: any) => id === selectedTemplateId);
     const isSameProgram = workingListProgramId === programId;
 
+    const defaultFilterLabels = useMemo(() => ({
+        default: i18n.t('Program overview'),
+        active: i18n.t('Active {{enrollmentsLabel}}', { enrollmentsLabel }),
+        complete: i18n.t('Completed {{enrollmentsLabel}}', { enrollmentsLabel }),
+        cancelled: i18n.t('Cancelled {{enrollmentsLabel}}', { enrollmentsLabel }),
+    }), [enrollmentsLabel]);
+
     const label = useMemo(() => {
         if (page === breadcrumbsKeys.SEARCH_PAGE) {
             return i18n.t('Search');
@@ -44,7 +50,7 @@ export const useOriginLabel = ({ programId, displayFrontPageList, page }: Props)
         }
 
         if (isSameProgram) {
-            return getWorkingListLabel(selectedTemplate, selectedTemplateId);
+            return getWorkingListLabel(selectedTemplate, selectedTemplateId, defaultFilterLabels);
         }
 
         if (!displayFrontPageList) {
@@ -58,6 +64,7 @@ export const useOriginLabel = ({ programId, displayFrontPageList, page }: Props)
         selectedTemplate,
         selectedTemplateId,
         page,
+        defaultFilterLabels,
     ]);
 
     return {

src/core_modules/capture-core/components/Breadcrumbs/EnrollmentBreadcrumb/EnrollmentBreadcrumb.tsx

@@ -1,7 +1,8 @@
-import React, { useCallback, useMemo, useState, ComponentType } from 'react';
 import i18n from '@dhis2/d2-i18n';
+import React, { useCallback, useMemo, useState, ComponentType } from 'react';
 import { withStyles, WithStyles } from 'capture-core-utils/styles';
 import { colors } from '@dhis2/ui';
+import { LabelKeys, useTermLabel } from '../../../metaData';
 import { DirectionalChevron } from '../../../utils/rtl';
 import { useWorkingListLabel } from './hooks/useWorkingListLabel';
 import { BreadcrumbItem } from '../common/BreadcrumbItem';
@@ -68,6 +69,10 @@ const BreadcrumbsPlain = ({
     classes,
 }: Props) => {
     const [openWarning, setOpenWarning] = useState<WarningKey | null>(null);
+    const { enrollmentLabel, eventLabel } = useTermLabel(
+        [LabelKeys.enrollmentSingular, LabelKeys.eventSingular],
+        { programId },
+    );
 
     const { label } = useWorkingListLabel({
         programId,
@@ -101,29 +106,29 @@ const BreadcrumbsPlain = ({
         {
             key: pageKeys.OVERVIEW,
             onClick: () => handleNavigation(onBackToDashboard, pageKeys.OVERVIEW),
-            label: i18n.t('Enrollment dashboard'),
+            label: i18n.t('{{enrollmentLabel}} dashboard', { enrollmentLabel }),
             selected: page === pageKeys.OVERVIEW,
             condition: true,
         },
         {
             key: pageKeys.VIEW_EVENT,
             onClick: () => handleNavigation(onBackToViewEvent, pageKeys.VIEW_EVENT),
-            label: i18n.t('View event'),
+            label: i18n.t('View {{eventLabel}}', { eventLabel }),
             selected: page === pageKeys.VIEW_EVENT,
             condition: page === pageKeys.VIEW_EVENT ||
                 (page === pageKeys.EDIT_EVENT && !eventIsScheduled(eventStatus)),
         },
         {
             key: pageKeys.EDIT_EVENT,
             onClick: () => undefined,
-            label: i18n.t('Edit event'),
+            label: i18n.t('Edit {{eventLabel}}', { eventLabel }),
             selected: page === pageKeys.EDIT_EVENT,
             condition: page === pageKeys.EDIT_EVENT,
         },
         {
             key: pageKeys.NEW_EVENT,
             onClick: () => undefined,
-            label: i18n.t('New event'),
+            label: i18n.t('New {{eventLabel}}', { eventLabel }),
             selected: page === pageKeys.NEW_EVENT,
             condition: page === pageKeys.NEW_EVENT,
         },
@@ -135,6 +140,8 @@ const BreadcrumbsPlain = ({
         onBackToMainPage,
         onBackToDashboard,
         onBackToViewEvent,
+        enrollmentLabel,
+        eventLabel,
     ]);
 
     return (

src/core_modules/capture-core/components/Breadcrumbs/EnrollmentBreadcrumb/hooks/useWorkingListLabel.ts

@@ -1,6 +1,7 @@
 import i18n from '@dhis2/d2-i18n';
 import { useMemo } from 'react';
 import { useSelector } from 'react-redux';
+import { LabelKeys, useTermLabel } from '../../../../metaData';
 
 type Template = {
     id: string;
@@ -22,17 +23,11 @@ const DefaultFilterKeys = {
 
 type DefaultFilterKey = typeof DefaultFilterKeys[keyof typeof DefaultFilterKeys];
 
-const DefaultFilterLabels: { [key in DefaultFilterKey]: string } = {
-    [DefaultFilterKeys.DEFAULT]: i18n.t('Program overview'),
-    [DefaultFilterKeys.ACTIVE]: i18n.t('Active enrollments'),
-    [DefaultFilterKeys.COMPLETE]: i18n.t('Completed enrollments'),
-    [DefaultFilterKeys.CANCELLED]: i18n.t('Cancelled enrollments'),
-};
-
 export const useWorkingListLabel = ({
     programId,
     displayFrontPageList,
 }: Props) => {
+    const { enrollmentsLabel } = useTermLabel([LabelKeys.enrollmentPlural], { programId });
     const workingListTemplates = useSelector((state: any) => state.workingListsTemplates?.teiList);
     const workingListProgramId = useSelector((state: any) => state.workingListsContext?.teiList?.programIdView);
 
@@ -41,6 +36,13 @@ export const useWorkingListLabel = ({
     const selectedTemplate: Template | undefined = templates?.find(({ id }) => id === selectedTemplateId);
     const isSameProgram: boolean = workingListProgramId === programId;
 
+    const defaultFilterLabels: { [key in DefaultFilterKey]: string } = useMemo(() => ({
+        [DefaultFilterKeys.DEFAULT]: i18n.t('Program overview'),
+        [DefaultFilterKeys.ACTIVE]: i18n.t('Active {{enrollmentsLabel}}', { enrollmentsLabel }),
+        [DefaultFilterKeys.COMPLETE]: i18n.t('Completed {{enrollmentsLabel}}', { enrollmentsLabel }),
+        [DefaultFilterKeys.CANCELLED]: i18n.t('Cancelled {{enrollmentsLabel}}', { enrollmentsLabel }),
+    }), [enrollmentsLabel]);
+
     const label: string = useMemo(() => {
         if (isLoadingTemplates) return i18n.t('Loading...');
 
@@ -51,7 +53,7 @@ export const useWorkingListLabel = ({
 
             if (selectedTemplateId && !selectedTemplate &&
                 DefaultFilterKeys[selectedTemplateId.toUpperCase() as keyof typeof DefaultFilterKeys]) {
-                return DefaultFilterLabels[selectedTemplateId as DefaultFilterKey];
+                return defaultFilterLabels[selectedTemplateId as DefaultFilterKey];
             }
 
             return i18n.t('Program overview');
@@ -66,6 +68,7 @@ export const useWorkingListLabel = ({
         isSameProgram,
         selectedTemplate,
         selectedTemplateId,
+        defaultFilterLabels,
     ]);
 
     return {

src/core_modules/capture-core/components/Breadcrumbs/EventBreadcrumb/EventBreadcrumb.tsx

@@ -1,12 +1,13 @@
-import React, { ComponentType, useCallback, useMemo, useState } from 'react';
 import i18n from '@dhis2/d2-i18n';
+import React, { ComponentType, useCallback, useMemo, useState } from 'react';
 import { colors } from '@dhis2/ui';
 import { withStyles, WithStyles } from 'capture-core-utils/styles';
 import { DirectionalChevron } from '../../../utils/rtl';
 import { BreadcrumbItem } from '../common/BreadcrumbItem';
 import { DiscardDialog } from '../../Dialogs/DiscardDialog.component';
 import { defaultDialogProps } from '../../Dialogs/DiscardDialog.constants';
 import { useWorkingListLabel } from './hooks/useWorkingListLabel';
+import { LabelKeys, useTermLabel } from '../../../metaData';
 
 export const pageKeys = {
     MAIN_PAGE: 'mainPage',
@@ -43,6 +44,7 @@ const EventBreadcrumbPlain = ({
 }: Props) => {
     const [openWarning, setOpenWarning] = useState<PageKeys | null>(null);
     const { label } = useWorkingListLabel({ programId });
+    const { eventLabel } = useTermLabel([LabelKeys.eventSingular], { programId });
 
     const handleNavigation = useCallback((callback?: () => void, warningType?: PageKeys) => {
         if (userInteractionInProgress && warningType) {
@@ -71,14 +73,14 @@ const EventBreadcrumbPlain = ({
         {
             key: pageKeys.VIEW_EVENT,
             onClick: () => handleNavigation(onBackToViewEvent, pageKeys.VIEW_EVENT),
-            label: i18n.t('View event'),
+            label: i18n.t('View {{eventLabel}}', { eventLabel }),
             selected: page === pageKeys.VIEW_EVENT,
             condition: page === pageKeys.VIEW_EVENT || page === pageKeys.EDIT_EVENT,
         },
         {
             key: pageKeys.EDIT_EVENT,
             onClick: () => undefined,
-            label: i18n.t('Edit event'),
+            label: i18n.t('Edit {{eventLabel}}', { eventLabel }),
             selected: page === pageKeys.EDIT_EVENT,
             condition: page === pageKeys.EDIT_EVENT,
         },
@@ -88,6 +90,7 @@ const EventBreadcrumbPlain = ({
         onBackToViewEvent,
         onBackToMainPage,
         page,
+        eventLabel,
     ]);
 
     return (

src/core_modules/capture-core/components/Breadcrumbs/EventBreadcrumb/hooks/useWorkingListLabel.ts

@@ -1,6 +1,7 @@
 import { useMemo } from 'react';
 import i18n from '@dhis2/d2-i18n';
 import { useSelector } from 'react-redux';
+import { LabelKeys, useTermLabel } from '../../../../metaData';
 
 type Template = {
     id: string;
@@ -15,6 +16,7 @@ type Props = {
 export const useWorkingListLabel = ({ programId }: Props) => {
     const workingListTemplate = useSelector((state: any) => state.workingListsTemplates?.eventList);
     const workingListProgramId = useSelector((state: any) => state.workingListsContext?.eventList?.programIdView);
+    const { eventLabel } = useTermLabel([LabelKeys.eventSingular], { programId });
 
     const {
         selectedTemplateId,
@@ -33,8 +35,8 @@ export const useWorkingListLabel = ({ programId }: Props) => {
             return selectedTemplete.name;
         }
 
-        return i18n.t('Event list');
-    }, [isDefaultTemplate, isSameProgram, loadingTemplates, selectedTemplete]);
+        return i18n.t('{{eventLabel}} list', { eventLabel });
+    }, [isDefaultTemplate, isSameProgram, loadingTemplates, selectedTemplete, eventLabel]);
 
     return {
         label: computedLabel,

src/core_modules/capture-core/components/CardList/CardListButtons.component.tsx

@@ -8,6 +8,7 @@ import { availableCardListButtonState, enrollmentTypes } from './CardList.consta
 import {
     navigateToEnrollmentOverview,
 } from '../../actions/navigateToEnrollmentOverview/navigateToEnrollmentOverview.actions';
+import { useTermLabel, LabelKeys } from '../../metaData';
 
 type Props = {
     currentSearchScopeId?: string,
@@ -79,6 +80,7 @@ const CardListButtons: FC<Props> = ({
 }) => {
     const dispatch = useDispatch();
     const navigationButtonsState: AvailableCardListButtonState = deriveNavigationButtonState(enrollmentType);
+    const { enrollmentLabel } = useTermLabel([LabelKeys.enrollmentSingular]);
     const onHandleClick: ButtonEventHandler<React.MouseEvent<HTMLButtonElement>> = useCallback((_, event) => {
         event.stopPropagation();
 
@@ -115,7 +117,7 @@ const CardListButtons: FC<Props> = ({
     {
         dataTest: 'view-active-enrollment-button',
         onClick: onHandleClick,
-        label: i18n.t('View active enrollment'),
+        label: i18n.t('View active {{enrollmentLabel}}', { enrollmentLabel }),
         hide: navigationButtonsState !== availableCardListButtonState.SHOW_VIEW_ACTIVE_ENROLLMENT_BUTTON,
     },
     {

src/core_modules/capture-core/components/CardList/CardListItem.component.tsx

@@ -17,6 +17,8 @@ import {
     getTrackerProgramThrowIfNotFound,
     OptionSet,
     type TrackerProgram,
+    useTermLabel,
+    LabelKeys,
 } from '../../metaData';
 import { useOrgUnitNameWithAncestors } from '../../metadataRetrieval/orgUnitName';
 import type { ListItem, RenderCustomCardActions } from './CardList.types';
@@ -152,6 +154,10 @@ const CardListItemIndex = ({
     const enrollmentType = deriveEnrollmentType(enrollments, currentProgramId);
     const { orgUnitId, enrolledAt } = deriveEnrollmentOrgUnitIdAndDate(enrollments, enrollmentType, currentProgramId);
     const { displayName: orgUnitName } = useOrgUnitNameWithAncestors(orgUnitId ?? null);
+    const { enrollmentLabel, orgUnitLabel } = useTermLabel(
+        [LabelKeys.enrollmentSingular, LabelKeys.orgUnitSingular],
+        { programId: currentProgramId },
+    );
     const program: TrackerProgram | undefined = enrollments.length
         ? deriveProgramFromEnrollment(enrollments, currentSearchScopeType)
         : undefined;
@@ -217,11 +223,14 @@ const CardListItemIndex = ({
 
         return (<>
             <ListEntry
-                name={i18n.t('Organisation unit')}
+                name={i18n.t('{{orgUnitLabel}}', { orgUnitLabel })}
                 value={orgUnitName}
             />
             <ListEntry
-                name={program?.enrollment?.enrollmentDateLabel ?? i18n.t('Date of enrollment')}
+                name={
+                    program?.enrollment?.enrollmentDateLabel
+                    ?? i18n.t('Date of {{enrollmentLabel}}', { enrollmentLabel })
+                }
                 value={enrolledAt}
                 type={dataElementTypes.DATE}
             />