Fixed the Localization issues (#532)

4manasa · manasa · web-flow · commit 348630602d62 · 2025-11-11T22:59:01.000+05:30
Co-authored-by: manasa &lt;manasa.mashetty@in.pega.com&gt;
diff --git a/packages/react-sdk-components/src/components/field/SelectableCard/utils.tsx b/packages/react-sdk-components/src/components/field/SelectableCard/utils.tsx
@@ -199,7 +199,8 @@ export function resolveReferenceFields(
         ...preset,
         config: {
           ...preset.config,
-          displayMode: 'DISPLAY_ONLY'
+          displayMode: 'DISPLAY_ONLY',
+          contextName: pConnect.getContextName()
         }
       },
       useCustomContext: item
diff --git a/packages/react-sdk-components/src/components/helpers/common-utils.ts b/packages/react-sdk-components/src/components/helpers/common-utils.ts
@@ -9,8 +9,7 @@ export function isEmptyObject(obj: object): boolean {
  * @returns The localized string or the key itself if no translation is found
  */
 export function getGenericFieldsLocalizedValue(path: string, key: string): string {
-  const GENERIC_BUNDLE_KEY = PCore.getLocaleUtils().GENERIC_BUNDLE_KEY;
-  const localeStore = PCore.getLocaleUtils().localeStore[GENERIC_BUNDLE_KEY];
+  const localeStore = PCore.getLocaleUtils().localeStore;
 
   if (!localeStore) return key;
 
diff --git a/packages/react-sdk-components/src/components/infra/Assignment/Assignment.tsx b/packages/react-sdk-components/src/components/infra/Assignment/Assignment.tsx
@@ -34,7 +34,7 @@ export default function Assignment(props: PropsWithChildren<AssignmentProps>) {
   const actionsAPI = thePConn.getActionsApi();
   const localizedVal = PCore.getLocaleUtils().getLocaleValue;
   const localeCategory = 'Assignment';
-  const localeReference = `${getPConnect().getCaseInfo().getClassName()}!CASE!${getPConnect().getCaseInfo().getName()}`.toUpperCase();
+  const localeReference = getPConnect()?.getCaseLocaleReference();
 
   // store off bound functions to above pointers
   const finishAssignment = actionsAPI.finishAssignment.bind(actionsAPI);
diff --git a/packages/react-sdk-components/src/components/infra/Containers/FlowContainer/FlowContainer.tsx b/packages/react-sdk-components/src/components/infra/Containers/FlowContainer/FlowContainer.tsx
@@ -96,7 +96,7 @@ export const FlowContainer = (props: FlowContainerProps) => {
   const localizedVal = PCore.getLocaleUtils().getLocaleValue;
   const localeCategory = 'Messages';
 
-  const key = `${thePConn.getCaseInfo().getClassName()}!CASE!${thePConn.getCaseInfo().getName()}`.toUpperCase();
+  const key = getPConnect()?.getCaseLocaleReference();
   const classes = useStyles();
 
   function getBuildName(): string {
@@ -218,7 +218,7 @@ export const FlowContainer = (props: FlowContainerProps) => {
               <CardHeader
                 id='assignment-header'
                 title={<Typography variant='h6'>{localizedVal(containerName, undefined, key)}</Typography>}
-                subheader={`${localizedVal('Task in', 'Todo')} ${caseId} \u2022 ${localizedVal('Priority', 'Todo')} ${urgency}`}
+                subheader={`${localizedVal('In', 'Todo')} ${caseId} \u2022 ${localizedVal('Priority', 'Todo')} ${urgency}`}
                 avatar={<Avatar className={`${classes.avatar} psdk-avatar`}>{operatorInitials}</Avatar>}
               />
               {displayPageMessages()}
diff --git a/packages/react-sdk-components/src/components/infra/Containers/ModalViewContainer/ModalViewContainer.tsx b/packages/react-sdk-components/src/components/infra/Containers/ModalViewContainer/ModalViewContainer.tsx
@@ -131,7 +131,7 @@ export default function ModalViewContainer(props: ModalViewContainerProps) {
   const [cancelAlertProps, setCancelAlertProps] = useState({});
   const [isMultiRecordData, setMultiRecordData] = useState(false);
   const localizedVal = PCore.getLocaleUtils().getLocaleValue;
-  const localeCategory = 'Data Object';
+  const localeCategory = 'ModalContainer';
 
   const ERROR_WHILE_RENDERING = 'ERROR_WHILE_RENDERING';
 
@@ -255,7 +255,7 @@ export default function ModalViewContainer(props: ModalViewContainerProps) {
         const headingValue =
           isDataObject || isMultiRecord
             ? getModalHeading(dataObjectAction)
-            : determineModalHeaderByAction(actionName, caseTypeName, ID, `${caseInfo?.getClassName()}!CASE!${caseInfo.getName()}`.toUpperCase());
+            : determineModalHeaderByAction(actionName, caseTypeName, ID, pConnect?.getCaseLocaleReference());
 
         let arChildrenAsReact: any[] = [];
 
diff --git a/packages/react-sdk-components/src/components/infra/NavBar/NavBar.tsx b/packages/react-sdk-components/src/components/infra/NavBar/NavBar.tsx
@@ -126,7 +126,6 @@ export default function NavBar(props: NavBarProps) {
   const [bShowOperatorButtons, setBShowOperatorButtons] = useState(false);
   const [anchorEl, setAnchorEl] = useState(null);
   const localeUtils = PCore.getLocaleUtils();
-  const localeReference = pConn.getValue('.pyLocaleReference');
 
   const localizedVal = PCore.getLocaleUtils().getLocaleValue;
   const localeCategory = 'AppShell';
@@ -241,7 +240,7 @@ export default function NavBar(props: NavBarProps) {
               <ListItemIcon>
                 <WorkOutlineIcon fontSize='large' />
               </ListItemIcon>
-              <ListItemText primary={localeUtils.getLocaleValue(caseType.pyLabel, '', localeReference)} />
+              <ListItemText primary={localeUtils.getLocaleValue(caseType.pyLabel, '', localeUtils.getCaseLocaleReference(caseType.pyClassName))} />
             </ListItemButton>
           ))}
         </List>
@@ -250,7 +249,7 @@ export default function NavBar(props: NavBarProps) {
         {navPages.map(page => (
           <ListItemButton onClick={() => navPanelButtonClick(page)} key={page.pyLabel}>
             <ListItemIcon>{iconMap[page.pxPageViewIcon]}</ListItemIcon>
-            <ListItemText primary={localeUtils.getLocaleValue(page.pyLabel, '', localeReference)} />
+            <ListItemText primary={localeUtils.getLocaleValue(page.pyLabel, '', localeUtils.getCaseLocaleReference(page.pyClassName))} />
           </ListItemButton>
         ))}
       </List>
diff --git a/packages/react-sdk-components/src/components/infra/Stages/Stages.tsx b/packages/react-sdk-components/src/components/infra/Stages/Stages.tsx
@@ -57,7 +57,7 @@ export default function Stages(props: StagesProps) {
 
   const { getPConnect, stages } = props;
   const pConn = getPConnect();
-  const key = `${pConn.getCaseInfo().getClassName()}!CASE!${pConn.getCaseInfo().getName()}`.toUpperCase();
+  const key = getPConnect()?.getCaseLocaleReference();
 
   const filteredStages = getFilteredStages(stages);
   const currentStageID = pConn.getValue(PCore.getConstants().CASE_INFO.STAGEID, ''); // 2nd arg empty string until typedef allows optional
diff --git a/packages/react-sdk-components/src/components/template/CaseView/CaseView.tsx b/packages/react-sdk-components/src/components/template/CaseView/CaseView.tsx
@@ -9,7 +9,6 @@ import { Utils } from '../../helpers/utils';
 import StoreContext from '../../../bridge/Context/StoreContext';
 import { getComponentFromMap } from '../../../bridge/helpers/sdk_component_map';
 import type { PConnProps } from '../../../types/PConnProps';
-import { prepareCaseSummaryData } from '../utils';
 
 interface CaseViewProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -50,7 +49,6 @@ export default function CaseView(props: PropsWithChildren<CaseViewProps>) {
   const CaseViewActionsMenu = getComponentFromMap('CaseViewActionsMenu');
   const VerticalTabs = getComponentFromMap('VerticalTabs');
   const DeferLoad = getComponentFromMap('DeferLoad');
-  const CaseSummary = getComponentFromMap('CaseSummary');
 
   const {
     getPConnect,
@@ -73,7 +71,7 @@ export default function CaseView(props: PropsWithChildren<CaseViewProps>) {
 
   const localizedVal = PCore.getLocaleUtils().getLocaleValue;
   const localeCategory = 'CaseView';
-  const localeKey = `${caseTypeID}!CASE!${caseTypeName}`.toUpperCase();
+  const localeKey = thePConn?.getCaseLocaleReference();
   /**
    *
    * @param inName the metadata <em>name</em> that will cause a region to be returned
@@ -90,12 +88,7 @@ export default function CaseView(props: PropsWithChildren<CaseViewProps>) {
     return null;
   }
 
-  const theSummaryRegion = children && children[0];
-
-  const data = prepareCaseSummaryData(theSummaryRegion);
-  const primarySummaryFields = data.primarySummaryFields;
-  const secondarySummaryFields = data.secondarySummaryFields;
-
+  const theSummaryRegion = getChildRegionByName('summary');
   const theStagesRegion = getChildRegionByName('stages');
   const theTodoRegion = getChildRegionByName('todo');
   const theUtilitiesRegion = getChildRegionByName('utilities');
@@ -237,7 +230,7 @@ export default function CaseView(props: PropsWithChildren<CaseViewProps>) {
               />
               {getActionButtonsHtml()}
               <Divider />
-              <CaseSummary arPrimaryFields={primarySummaryFields} arSecondaryFields={secondarySummaryFields}></CaseSummary>
+              {theSummaryRegion}
               <Divider />
               {vertTabInfo.length > 1 && <VerticalTabs tabconfig={vertTabInfo} />}
             </Card>
diff --git a/packages/react-sdk-components/src/components/template/DataReference/DataReference.tsx b/packages/react-sdk-components/src/components/template/DataReference/DataReference.tsx
@@ -88,8 +88,7 @@ export default function DataReference(props: PropsWithChildren<DataReferenceProp
   let firstChildPConnect;
 
   const localizedPlaceholderOption = placeholder => {
-    const { GENERIC_BUNDLE_KEY } = PCore.getLocaleUtils?.() ?? {};
-    const localizedDefaultPlaceholder = pConn.getLocalizedValue('select_placeholder_default', 'CosmosFields', GENERIC_BUNDLE_KEY);
+    const localizedDefaultPlaceholder = pConn.getLocalizedValue('select_placeholder_default', '', 'CosmosFields');
     // If we have a placeholder, push that option in the list of items
     if (placeholder === 'Select...' && localizedDefaultPlaceholder !== 'select_placeholder_default') {
       return localizedDefaultPlaceholder;
diff --git a/packages/react-sdk-components/src/components/template/ListView/ListView.tsx b/packages/react-sdk-components/src/components/template/ListView/ListView.tsx
@@ -1212,7 +1212,7 @@ export default function ListView(props: ListViewProps) {
                 </TableBody>
               </Table>
               {(!arRows || arRows.length === 0) && (
-                <div className='no-records'>{getGenericFieldsLocalizedValue('CosmosFields.fields.lists', 'No records found.')}</div>
+                <div className='no-records'>{getGenericFieldsLocalizedValue('COSMOSFIELDS.lists', 'No records found.')}</div>
               )}
             </TableContainer>
           )}
diff --git a/packages/react-sdk-components/src/components/template/SimpleTable/SimpleTableManual/SimpleTableManual.tsx b/packages/react-sdk-components/src/components/template/SimpleTable/SimpleTableManual/SimpleTableManual.tsx
@@ -715,7 +715,7 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
         </Table>
         {((readOnlyMode && (!rowData || rowData?.length === 0)) || (editableMode && (!referenceList || referenceList?.length === 0))) && (
           <div className='no-records' id='no-records'>
-            {getGenericFieldsLocalizedValue('CosmosFields.fields.lists', 'No records found.')}
+            {getGenericFieldsLocalizedValue('COSMOSFIELDS.lists', 'No records found.')}
           </div>
         )}
       </TableContainer>
diff --git a/packages/react-sdk-components/src/components/widget/ToDo/ToDo.tsx b/packages/react-sdk-components/src/components/widget/ToDo/ToDo.tsx
@@ -180,7 +180,9 @@ export default function ToDo(props: ToDoProps) {
   };
 
   const getAssignmentName = assignment => {
-    return type === CONSTS.TODO ? assignment.name : assignment.stepName;
+    return type === CONSTS.TODO
+      ? localizedVal(assignment.name, '', PCore.getLocaleUtils().getCaseLocaleReference(assignment.classname))
+      : localizedVal(assignment.stepName, '', PCore.getLocaleUtils().getCaseLocaleReference(assignment.classname));
   };
 
   function showToast(message: string) {
@@ -263,13 +265,16 @@ export default function ToDo(props: ToDoProps) {
   };
 
   const getListItemComponent = assignment => {
+    const caseLocaleRef = PCore.getLocaleUtils().getCaseLocaleReference(assignment.classname);
     if (isDesktop) {
       return (
         <>
-          {localizedVal('Task in', localeCategory)}
+          {localizedVal('In', localeCategory)}
           {renderTaskId(type, getPConnect, showTodoList, assignment)}
           {type === CONSTS.WORKLIST && assignment.status ? `\u2022 ` : undefined}
-          {type === CONSTS.WORKLIST && assignment.status ? <span className='psdk-todo-assignment-status'>{assignment.status}</span> : undefined}
+          {type === CONSTS.WORKLIST && assignment.status ? (
+            <span className='psdk-todo-assignment-status'>{localizedVal(assignment.status, '', caseLocaleRef)}</span>
+          ) : undefined}
           {` \u2022  ${localizedVal('Urgency', localeCategory)}  ${getPriority(assignment)}`}
         </>
       );
@@ -302,8 +307,8 @@ export default function ToDo(props: ToDoProps) {
               {currentUserInitials}
             </Avatar>
             <div style={{ display: 'block' }}>
-              <Typography variant='h6'>{assignment?.name}</Typography>
-              {`${localizedVal('Task in', localeCategory)} ${getID(assignment)} \u2022  ${localizedVal(
+              <Typography variant='h6'>{localizedVal(assignment?.name, localeCategory)}</Typography>
+              {`${localizedVal('In', localeCategory)} ${getID(assignment)} \u2022  ${localizedVal(
                 'Urgency',
                 localeCategory
               )}  ${getPriority(assignment)}`}
diff --git a/packages/react-sdk-components/src/mediaco/ToDo/ToDo.tsx b/packages/react-sdk-components/src/mediaco/ToDo/ToDo.tsx
@@ -244,7 +244,7 @@ export default function ToDo(props: ToDoProps) {
     if (isDesktop) {
       return (
         <>
-          {localizedVal('Task in', localeCategory)}
+          {localizedVal('In', localeCategory)}
           {renderTaskId(type, getPConnect, showTodoList, assignment)}
           {type === CONSTS.WORKLIST && assignment.status ? `\u2022 ` : undefined}
           {type === CONSTS.WORKLIST && assignment.status ? <span className='psdk-todo-assignment-status'>{assignment.status}</span> : undefined}
@@ -281,7 +281,7 @@ export default function ToDo(props: ToDoProps) {
             </Avatar>
             <div style={{ display: 'block' }}>
               <Typography variant='h6'>{assignment?.name}</Typography>
-              {`${localizedVal('Task in', localeCategory)} ${renderTaskId(type, getPConnect, showTodoList, assignment)} \u2022  ${localizedVal(
+              {`${localizedVal('In', localeCategory)} ${renderTaskId(type, getPConnect, showTodoList, assignment)} \u2022  ${localizedVal(
                 'Urgency',
                 localeCategory
               )}  ${getPriority(assignment)}`}
