@pega/react-sdk-overrides 8.23.10 → 8.23.11-debug2

package/lib/helpers/utils.ts

@@ -2,6 +2,7 @@ import dayjs from 'dayjs';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
 import localizedFormat from 'dayjs/plugin/localizedFormat';
 import relativeTime from 'dayjs/plugin/relativeTime';
+import { SdkConfigAccess } from './config_access';
 
 dayjs.extend(customParseFormat);
 dayjs.extend(localizedFormat);
@@ -10,6 +11,17 @@ dayjs.extend(relativeTime);
 export class Utils {
   static lastControlID: number = 0;
 
+  static getSDKStaticConentUrl() {
+    const sdkConfigServer = SdkConfigAccess.getSdkConfigServer();
+
+    // NOTE: Needs a trailing slash! So add one if not provided
+    if (!sdkConfigServer.sdkContentServerUrl.endsWith('/')) {
+      sdkConfigServer.sdkContentServerUrl = `${sdkConfigServer.sdkContentServerUrl}/`;
+    }
+
+    return `${sdkConfigServer.sdkContentServerUrl}constellation/`;
+  }
+
   static getUniqueControlID(): string {
     const sPrefix = 'control-';
 
@@ -322,10 +334,6 @@ export class Utils {
     return text.charAt(text.length - 1);
   }
 
-  static isEmptyObject(obj: Object): Boolean {
-    return Object.keys(obj).length === 0;
-  }
-
   static isObject(objValue) {
     return objValue && typeof objValue === 'object' && objValue.constructor === Object;
   }

package/lib/helpers/versionHelpers.ts

@@ -4,8 +4,10 @@
  * Container helper functions that can identify which version of
  * PCore/PConnect is being run
  */
+import PCoreType from '@pega/pcore-pconnect-typedefs/types/pcore';
+
+declare const PCore: typeof PCoreType;
 
-declare const PCore;
 
 export const sdkVersion = "8.7";
 

package/lib/infra/ActionButtons/ActionButtons.tsx

@@ -5,6 +5,9 @@ import { makeStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 import { Grid, Divider } from "@material-ui/core";
 
+import PCoreType from '@pega/pcore-pconnect-typedefs/types/pcore';
+
+declare const PCore: typeof PCoreType;
 
 
 const useStyles = makeStyles((/* theme */) => ({
@@ -21,6 +24,8 @@ const useStyles = makeStyles((/* theme */) => ({
 export default function ActionButtons(props) {
   const { arMainButtons, arSecondaryButtons, onButtonPress } = props;
   const classes = useStyles();
+  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const localeCategory = 'Assignment';
 
   function _onButtonPress(sAction: string, sButtonType: string) {
 
@@ -35,7 +40,7 @@ export default function ActionButtons(props) {
           <Grid container spacing={1}>
           {arSecondaryButtons.map((sButton) => (
                   <Grid item key={sButton.name}>
-                    <Button variant="contained" color="secondary" onClick={() => { _onButtonPress(sButton.jsAction, "secondary")}} >{sButton.name}</Button>
+                    <Button variant="contained" color="secondary" onClick={() => { _onButtonPress(sButton.jsAction, "secondary")}} >{localizedVal(sButton.name, localeCategory)}</Button>
                   </Grid>
                 ))}
           </Grid>
@@ -44,7 +49,7 @@ export default function ActionButtons(props) {
           <Grid container spacing={1}>
           {arMainButtons.map((mButton) => (
                   <Grid item key={mButton.name}>
-                    <Button variant="contained" color="primary" onClick={() => { _onButtonPress(mButton.jsAction, "primary")}} >{mButton.name}</Button>
+                    <Button variant="contained" color="primary" onClick={() => { _onButtonPress(mButton.jsAction, "primary")}} >{localizedVal(mButton.name, localeCategory)}</Button>
                   </Grid>
                 ))}
           </Grid>

package/lib/infra/Assignment/Assignment.tsx

@@ -7,10 +7,13 @@ import Snackbar from '@material-ui/core/Snackbar';
 import IconButton from '@material-ui/core/IconButton';
 import CloseIcon from '@material-ui/icons/Close';
 
-declare const PCore: any;
+import PCoreType from '@pega/pcore-pconnect-typedefs/types/pcore';
+
+declare const PCore: typeof PCoreType;
+
 
 export default function Assignment(props) {
-  const { getPConnect, children, itemKey, isInModal } = props;
+  const { getPConnect, children, itemKey, isInModal, banners } = props;
   const thePConn = getPConnect();
 
   const [bHasNavigation, setHasNavigation] = useState(false);
@@ -20,6 +23,9 @@ export default function Assignment(props) {
   const [arNavigationSteps, setArNavigationSteps] = useState<Array<any>>([]);
 
   const actionsAPI = thePConn.getActionsApi();
+  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const localeCategory = 'Assignment';
+  const localeReference = `${getPConnect().getCaseInfo().getClassName()}!CASE!${getPConnect().getCaseInfo().getName()}`.toUpperCase();
 
   // store off bound functions to above pointers
   const finishAssignment = actionsAPI.finishAssignment.bind(actionsAPI);
@@ -91,8 +97,13 @@ export default function Assignment(props) {
           } else {
             setIsVertical(false);
           }
-
-          setArNavigationSteps(JSON.parse(JSON.stringify(oCaseInfo.navigation.steps)));
+          const steps = JSON.parse(JSON.stringify(oCaseInfo?.navigation?.steps));
+          steps.forEach(step => {
+            if (step.name) {
+              step.name = PCore.getLocaleUtils().getLocaleValue(step.name, undefined, localeReference);
+            }
+          });
+          setArNavigationSteps(steps);
           setArCurrentStepIndicies(
             findCurrentIndicies(arNavigationSteps, arCurrentStepIndicies, 0)
           );
@@ -134,7 +145,7 @@ export default function Assignment(props) {
           navigatePromise
             .then(() => {})
             .catch(() => {
-              showToast(`Navigation failed!`);
+              showToast(`${localizedVal('Navigation failed!', localeCategory)}`);
             });
 
           break;
@@ -153,7 +164,7 @@ export default function Assignment(props) {
               onSaveActionSuccess({ caseType, caseID, assignmentID });
             })
             .catch(() => {
-              showToast('Save failed');
+              showToast(`${localizedVal('Save failed', localeCategory)}`);
             });
 
           break;
@@ -176,7 +187,7 @@ export default function Assignment(props) {
                 publish(PUB_SUB_EVENTS.EVENT_CANCEL, data);
               })
               .catch(() => {
-                showToast(`Cancel failed!`);
+                showToast(`${localizedVal('Cancel failed!', localeCategory)}`);
               });
           } else {
             const cancelPromise = cancelAssignment(itemKey);
@@ -186,7 +197,7 @@ export default function Assignment(props) {
                 publish(PUB_SUB_EVENTS.EVENT_CANCEL, data);
               })
               .catch(() => {
-                showToast(`Cancel failed!`);
+                showToast(`${localizedVal('Cancel failed!', localeCategory)}`);
               });
           }
           break;
@@ -204,7 +215,7 @@ export default function Assignment(props) {
           finishPromise
             .then(() => {})
             .catch(() => {
-              showToast(`Submit failed!`);
+              showToast(`${localizedVal('Submit failed!', localeCategory)}`);
             });
 
           break;
@@ -218,6 +229,7 @@ export default function Assignment(props) {
 
   return (
     <div id='Assignment'>
+      {banners}
       {bHasNavigation ? (
         <React.Fragment>
           <MultiStep
@@ -308,7 +320,8 @@ Assignment.propTypes = {
   children: PropTypes.node.isRequired,
   getPConnect: PropTypes.func.isRequired,
   itemKey: PropTypes.string,
-  isInModal: PropTypes.bool
+  isInModal: PropTypes.bool,
+  banners: PropTypes.any
   // actionButtons: PropTypes.object
   // buildName: PropTypes.string
 };

package/lib/infra/Containers/FlowContainer/FlowContainer.tsx

@@ -7,17 +7,20 @@ import { Card, CardHeader, Avatar, Typography } from '@material-ui/core';
 import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
 import { Alert } from '@material-ui/lab';
 
-import Assignment from '@pega/react-sdk-components/lib/components/infra/Assignment';
-import ToDo from '@pega/react-sdk-components/lib/components/widget/ToDo';
-
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 import StoreContext from '@pega/react-sdk-components/lib/bridge/Context/StoreContext';
 import DayjsUtils from '@date-io/dayjs';
 import { MuiPickersUtilsProvider } from '@material-ui/pickers';
 
 import { addContainerItem, getToDoAssignments, showBanner } from './helpers';
+import { isEmptyObject } from '@pega/react-sdk-components/lib/components/helpers/common-utils';
+// Need to get correct implementation from component map for Assignment and ToDo
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+
+
+// Remove this and use "real" PCore type once .d.ts is fixed (currently shows 3 errors)
+declare const PCore: any;
 
-declare const PCore;
 
 //
 // WARNING:  It is not expected that this file should be modified.  It is part of infrastructure code that works with
@@ -47,13 +50,17 @@ const useStyles = makeStyles(theme => ({
 }));
 
 export default function FlowContainer(props) {
+  // Get the proper implementation (local or Pega-provided) for these components that are emitted below
+  const Assignment = getComponentFromMap("Assignment");
+  const ToDo = getComponentFromMap("Todo");   // NOTE: ConstellationJS Engine uses "Todo" and not "ToDo"!!!
+
   const pCoreConstants = PCore.getConstants();
   const { TODO } = pCoreConstants;
   const todo_headerText = 'To do';
 
   const { getPConnect, routingInfo } = props;
 
-  const { displayOnlyFA } = useContext(StoreContext);
+  const { displayOnlyFA } = useContext<any>(StoreContext);
 
   const thePConn = getPConnect();
 
@@ -78,9 +85,14 @@ export default function FlowContainer(props) {
   const [containerName, setContainerName] = useState('');
   const [buildName, setBuildName] = useState('');
   const [bShowConfirm, setShowConfirm] = useState(false);
+  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const localeCategory = 'Messages';
+  const caseInfo = getPConnect().getCaseInfo();
+  const localeReference = `${caseInfo?.getClassName()}!CASE!${caseInfo.getName()}`.toUpperCase();
 
   const classes = useStyles();
 
+
   function initContainer() {
     const ourPConn = getPConnect();
     const containerMgr = ourPConn.getContainerManager();
@@ -171,7 +183,7 @@ export default function FlowContainer(props) {
 
     if (bLoadChildren && oWorkData) {
       // debugger;
-      setContainerName(oWorkData.caseInfo.assignments?.[0].name);
+      setContainerName(localizedVal(oWorkData.caseInfo.assignments?.[0].name, undefined, localeReference));
     }
 
     // debugger;
@@ -313,13 +325,13 @@ export default function FlowContainer(props) {
     }
 
     // if have caseMessage show message and end
-    const theCaseMessages = thePConn.getValue('caseMessages');
+    const theCaseMessages = localizedVal(thePConn.getValue('caseMessages'), localeCategory);
 
     if (theCaseMessages || !hasAssignments()) {
       // Temp fix for 8.7 change: confirmationNote no longer coming through in caseMessages$.
       // So, if we get here and caseMessages$ is empty, use default value in DX API response
       setCaseMessages(
-        theCaseMessages || 'Thank you! The next step in this case has been routed appropriately.'
+        theCaseMessages || localizedVal('Thank you! The next step in this case has been routed appropriately.', localeCategory)
       );
       setHasCaseMessages(true);
       setShowConfirm(true);
@@ -328,7 +340,7 @@ export default function FlowContainer(props) {
       PCore.getPubSubUtils().publish('assignmentFinished');
 
       // debugger;
-      setCheckSvg(Utils.getImageSrc('check', PCore.getAssetLoader().getStaticServerUrl()));
+      setCheckSvg(Utils.getImageSrc('check', Utils.getSDKStaticConentUrl()));
     } else {
       // debugger;
       setHasCaseMessages(false);
@@ -357,7 +369,7 @@ export default function FlowContainer(props) {
           currentItems[key] &&
           currentItems[key].view &&
           type === 'single' &&
-          !Utils.isEmptyObject(currentItems[key].view)
+          !isEmptyObject(currentItems[key].view)
         ) {
           const currentItem = currentItems[key];
           const rootView = currentItem.view;
@@ -395,7 +407,7 @@ export default function FlowContainer(props) {
           // check if have oWorkData, there are times due to timing of state change, when this
           // may not be available
           if (oWorkData) {
-            setContainerName(getActiveViewLabel() || oWorkData.caseInfo.assignments?.[0].name);
+            setContainerName(localizedVal(getActiveViewLabel() || oWorkData.caseInfo.assignments?.[0].name, undefined, localeReference));
           }
         }
       }
@@ -450,6 +462,7 @@ export default function FlowContainer(props) {
         ) : (
           <div>
             <ToDo
+              key={Math.random()}
               getPConnect={getPConnect}
               caseInfoID={todo_caseInfoID}
               datasource={todo_datasource}

package/lib/infra/Containers/FlowContainer/{helpers.js → helpers.ts}

@@ -1,4 +1,7 @@
-//  From CosmosReact DX Components
+import PCoreType from '@pega/pcore-pconnect-typedefs/types/pcore';
+
+declare const PCore: typeof PCoreType;
+
 
 //  Moved PCore.getConstants() into each function in which it's used until we can
 //  make sure that this code isn't run until PCore is defined (after onPCoreReady)
@@ -14,8 +17,8 @@ export const addContainerItem = (pConnect) => {
 
   if(caseViewMode !== "review") {
     const target = contextName.substring(0, contextName.lastIndexOf("_"));
-    const activeContainerItemID = window.PCore.getContainerUtils().getActiveContainerItemName(target);
-    const containerItemData = window.PCore.getContainerUtils().getContainerItemData(target, activeContainerItemID);
+    const activeContainerItemID = PCore.getContainerUtils().getActiveContainerItemName(target);
+    const containerItemData = PCore.getContainerUtils().getContainerItemData(target, activeContainerItemID);
 
     if(containerItemData) {
       ({ key, flowName } = containerItemData);
@@ -35,11 +38,11 @@ export const addContainerItem = (pConnect) => {
 export const hasContainerItems = (pConnect) => {
   const contextName = pConnect.getContextName();
   const containerName = pConnect.getContainerName();
-  return window.PCore.getContainerUtils().hasContainerItems(`${contextName}/${containerName}`);
+  return PCore.getContainerUtils().hasContainerItems(`${contextName}/${containerName}`);
 }
 
 export const getActiveCaseActionName = (pConnect) => {
-  const { CASE_INFO } = window.PCore.getConstants();
+  const { CASE_INFO } = PCore.getConstants();
   const caseActions = pConnect.getValue(CASE_INFO.CASE_INFO_ACTIONS);
   const activeActionID = pConnect.getValue(CASE_INFO.ACTIVE_ACTION_ID);
   const activeAction = caseActions.find(
@@ -49,7 +52,7 @@ export const getActiveCaseActionName = (pConnect) => {
 };
 
 export const getFirstCaseActionName = (pConnect) => {
-  const { CASE_INFO } = window.PCore.getConstants();
+  const { CASE_INFO } = PCore.getConstants();
   const caseActions = pConnect.getValue(CASE_INFO.CASE_INFO_ACTIONS);
   return caseActions[0]?.name || "";
 };
@@ -59,7 +62,7 @@ export const hasNotificationMessages = (pConnect) => {
 };
 
 export const isCaseWideLocalAction = (pConnect) => {
-  const { CASE_INFO } = window.PCore.getConstants();
+  const { CASE_INFO } = PCore.getConstants();
   const actionID = pConnect.getValue(CASE_INFO.ACTIVE_ACTION_ID);
   const caseActions = pConnect.getValue(CASE_INFO.CASE_INFO_ACTIONS);
   if (caseActions && actionID) {
@@ -72,23 +75,25 @@ export const isCaseWideLocalAction = (pConnect) => {
 };
 
 export const getChildCaseAssignments = (pConnect) => {
-  const { CASE_INFO } = window.PCore.getConstants();
+  const { CASE_INFO } = PCore.getConstants();
   const childCases = pConnect.getValue(CASE_INFO.CHILD_ASSIGNMENTS);
   let allAssignments = [];
   if (childCases && childCases.length > 0) {
-    childCases.forEach(({ assignments = [], Name }) => {
-      const childCaseAssignments = assignments.map((assignment) => ({
-        ...assignment,
-        caseName: Name
-      }));
-      allAssignments = allAssignments.concat(childCaseAssignments);
+    childCases.forEach(({ assignments, Name }) => {
+      if (assignments) {
+        const childCaseAssignments = assignments.map((assignment) => ({
+          ...assignment,
+          caseName: Name
+        }));
+        allAssignments = allAssignments.concat(childCaseAssignments);
+      }
     });
   }
   return allAssignments;
 };
 
 export const hasAssignments = (pConnect) => {
-  const { CASE_INFO } = window.PCore.getConstants();
+  const { CASE_INFO } = PCore.getConstants();
   const assignments = pConnect.getValue(CASE_INFO.D_CASE_ASSIGNMENTS_RESULTS);
   const childCasesAssignments = getChildCaseAssignments(pConnect);
 
@@ -118,7 +123,7 @@ export const isRenderWithToDoWrapper = (getPConnect, options) => {
 };
 
 export const getToDoAssignments = (pConnect) => {
-  const { CASE_INFO } = window.PCore.getConstants();
+  const { CASE_INFO } = PCore.getConstants();
   const caseActions = pConnect.getValue(CASE_INFO.CASE_INFO_ACTIONS);
   const assignmentLabel = pConnect.getValue(CASE_INFO.ASSIGNMENT_LABEL);
   const assignments =

package/lib/infra/Containers/ModalViewContainer/ModalViewContainer.tsx

@@ -6,11 +6,14 @@ import DialogContent from '@material-ui/core/DialogContent';
 import DialogTitle from '@material-ui/core/DialogTitle';
 import { makeStyles } from '@material-ui/core/styles';
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
-import Assignment from '@pega/react-sdk-components/lib/components/infra/Assignment';
-import CancelAlert from '@pega/react-sdk-components/lib/components/field/CancelAlert';
-import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
+// Need to get correct implementation from component map for Assignment and CancelAlert
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import { getBanners } from '@pega/react-sdk-components/lib/components/helpers/case-utils';
+import { isEmptyObject } from '@pega/react-sdk-components/lib/components/helpers/common-utils';
+
+// Remove this and use "real" PCore type once .d.ts is fixed (currently shows 8 errors)
+declare const PCore: any;
 
-declare const PCore;
 
 function buildName(pConnect, name = '') {
   const context = pConnect.getContextName();
@@ -68,10 +71,14 @@ const useStyles = makeStyles(theme => ({
 }));
 
 const ModalViewContainer = props => {
+  // Get the proper implementation (local or Pega-provided) for these components that are emitted below
+  const Assignment = getComponentFromMap("Assignment");
+  const CancelAlert = getComponentFromMap("CancelAlert");
+
   const classes = useStyles();
 
   const routingInfoRef = useRef({});
-  const { getPConnect, routingInfo, loadingInfo } = props;
+  const { getPConnect, routingInfo, loadingInfo, pageMessages } = props;
   const pConn = getPConnect();
   const {
     CONTAINER_TYPE: { MULTIPLE },
@@ -88,6 +95,10 @@ const ModalViewContainer = props => {
   const [itemKey, setItemKey] = useState('');
   const [cancelPConn, setCancelPConn] = useState(null);
 
+  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const localeCategory = 'Data Object';
+
+
   function showAlert(payload) {
     const { latestItem } = getKeyAndLatestItem(routingInfoRef.current, pConn);
     const { isModalAction } = payload;
@@ -160,7 +171,7 @@ const ModalViewContainer = props => {
         if (
           currentItems[key] &&
           currentItems[key].view &&
-          !Utils.isEmptyObject(currentItems[key].view)
+          !isEmptyObject(currentItems[key].view)
         ) {
           const currentItem = currentItems[key];
           const rootView = currentItem.view;
@@ -218,7 +229,7 @@ const ModalViewContainer = props => {
             const caseName = theNewCaseInfo.getName();
             const ID = theNewCaseInfo.getID();
 
-            setTitle(actionName || `New ${caseName} (${ID})`);
+            setTitle(actionName || `${localizedVal('New', localeCategory)} ${caseName} (${ID})`);
 
             let arChildrenAsReact: Array<any> = [];
 
@@ -255,7 +266,7 @@ const ModalViewContainer = props => {
         if (bShowModal) {
           setShowModal(false);
         }
-        if (!Utils.isEmptyObject(oCaseInfo)) {
+        if (!isEmptyObject(oCaseInfo)) {
           setOCaseInfo({});
         }
       }
@@ -286,7 +297,15 @@ const ModalViewContainer = props => {
         </DialogTitle>
         <DialogContent className={classes.dlgContent}>
           {bShowModal ? (
-            <Assignment getPConnect={createdView.getPConnect} itemKey={itemKey} isInModal>
+            <Assignment
+              getPConnect={createdView.getPConnect}
+              itemKey={itemKey}
+              isInModal
+              banners={getBanners({
+                target: itemKey,
+                pageMessages
+              })}
+            >
               {arNewChildrenAsReact}
             </Assignment>
           ) : (

package/lib/infra/Containers/ViewContainer/ViewContainer.tsx

@@ -3,13 +3,15 @@ import PropTypes from "prop-types";
 import { Box, CircularProgress } from "@material-ui/core";
 import createPConnectComponent from "@pega/react-sdk-components/lib/bridge/react_pconnect";
 import StoreContext from "@pega/react-sdk-components/lib/bridge/Context/StoreContext";
-import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
+import { isEmptyObject } from '@pega/react-sdk-components/lib/components/helpers/common-utils';
+import PCoreType from '@pega/pcore-pconnect-typedefs/types/pcore';
+
+declare const PCore: typeof PCoreType;
+
 
 // ViewContainer can emit View
 // import View from '../View';
 
-declare const PCore;
-
 //
 // WARNING:  It is not expected that this file should be modified.  It is part of infrastructure code that works with
 // Redux and creation/update of Redux containers and PConnect.  Modifying this code could have undesireable results and
@@ -21,7 +23,7 @@ export default function ViewContainer(props) {
   // const { getPConnect, children, routingInfo, name } = props;
   const { getPConnect, name, mode, limit, loadingInfo, routingInfo } = props;
 
-  const { displayOnlyFA } = useContext(StoreContext);
+  const { displayOnlyFA } = useContext<any>(StoreContext);
 
 
   const { CONTAINER_TYPE, APP } = PCore.getConstants();
@@ -157,7 +159,7 @@ export default function ViewContainer(props) {
       if (
         items[key] &&
         items[key].view &&
-        !Utils.isEmptyObject(items[key].view)
+        !isEmptyObject(items[key].view)
       ) {
         const latestItem = items[key];
         const rootView = latestItem.view;

package/lib/infra/DashboardFilter/DashboardFilter.tsx

@@ -10,9 +10,13 @@ import { getFilterExpression } from './filterUtils';
 import { TextField } from '@material-ui/core';
 import React from 'react';
 import DatePicker from 'react-datepicker';
+
 import 'react-datepicker/dist/react-datepicker.css';
 
-declare const PCore: any;
+import PCoreType from '@pega/pcore-pconnect-typedefs/types/pcore';
+
+declare const PCore: typeof PCoreType;
+
 
 export default function DashboardFilter(props) {
   const { children, name, filterProp, type, metadata, getPConnect } = props;

package/lib/infra/DashboardFilter/filterUtils.tsx

@@ -5,8 +5,10 @@ import { Grid, Link } from '@material-ui/core';
 import React from 'react';
 import DashboardFilter from './DashboardFilter';
 
+// Remove this and use "real" PCore type once .d.ts is fixed (currently shows 5 errors)
 declare const PCore: any;
 
+
 export const createFilter = (value, fieldId, comparator = 'EQ') => {
   return {
     condition: {

package/lib/infra/DeferLoad/DeferLoad.tsx

@@ -5,7 +5,10 @@ import { makeStyles } from '@material-ui/core/styles';
 
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 
-declare const PCore;
+import PCoreType from '@pega/pcore-pconnect-typedefs/types/pcore';
+
+declare const PCore: typeof PCoreType;
+
 
 //
 // WARNING:  It is not expected that this file should be modified.  It is part of infrastructure code that works with

package/lib/infra/ErrorBoundary/ErrorBoundary.tsx

@@ -1,10 +1,15 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-declare const PCore;
+// Remove this and use "real" PCore type once .d.ts is fixed (currently shows 1 error)
+declare const PCore: any;
+
 
 function ErrorBoundary(props) {
-  const ERROR_TEXT = PCore.getErrorHandler().getGenericFailedMessage();
+  const errorMsg = PCore.getErrorHandler().getGenericFailedMessage();
+  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const localeCategory = 'Messages';
+  const ERROR_TEXT = localizedVal(errorMsg, localeCategory);
   const WORK_AREA = "workarea";
   const ERROR_WHILE_RENDERING = "ERROR_WHILE_RENDERING";
   const { getPConnect, isInternalError } = props;
@@ -21,9 +26,9 @@ function ErrorBoundary(props) {
 
   if (!isInternalError) {
     // eslint-disable-next-line no-console
-    console.error(`Unable to load the component ${pConn.getComponentName()}
-    This might be due to the view meta data getting corrupted or the component file missing.
-    Raw meta data for the component: ${JSON.stringify(pConn.getRawMetadata())}`);
+    console.error(`${localizedVal('Unable to load the component', localeCategory)} ${pConn.getComponentName()}
+    ${localizedVal(`This might be due to the view meta data getting corrupted or the component file missing.
+    Raw meta data for the component:`, localeCategory)} ${JSON.stringify(pConn.getRawMetadata())}`);
   }
 
   if (pConn.getConfigProps().type === "page") {

package/lib/infra/MultiStep/MultiStep.tsx

@@ -11,8 +11,8 @@ export default function MultiStep(props) {
     const { getPConnect, children, itemKey, actionButtons, onButtonPress} = props;
     const { bIsVertical, arNavigationSteps } = props;
 
-    // const svgCurrent = Utils.getImageSrc("circle-solid", PCore.getAssetLoader().getStaticServerUrl());
-    // const svgNotCurrent = Utils.getImageSrc("circle-solid", PCore.getAssetLoader().getStaticServerUrl());
+    // const svgCurrent = Utils.getImageSrc("circle-solid", Utils.getSDKStaticConentUrl());
+    // const svgNotCurrent = Utils.getImageSrc("circle-solid", Utils.getSDKStaticConentUrl());
 
     function _getVIconClass(status): string {
         if (status === "current") {

package/lib/infra/NavBar/NavBar.tsx

@@ -35,7 +35,10 @@ import useMediaQuery from '@material-ui/core/useMediaQuery';
 import { useNavBar } from '@pega/react-sdk-components/lib/components/helpers/reactContextHelpers';
 import { logout } from '@pega/react-sdk-components/lib/components/helpers/authManager';
 
-declare const PCore;
+import PCoreType from '@pega/pcore-pconnect-typedefs/types/pcore';
+
+declare const PCore: typeof PCoreType;
+
 
 const iconMap = {
   'pi pi-headline': <HomeOutlinedIcon fontSize='large' />,
@@ -108,7 +111,10 @@ export default function NavBar(props) {
   const [bShowOperatorButtons, setBShowOperatorButtons] = useState(false);
   const [anchorEl, setAnchorEl] = useState(null);
 
-  const portalLogoImage = Utils.getIconPath(PCore.getAssetLoader().getStaticServerUrl()).concat(
+  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const localeCategory = 'AppShell';
+
+  const portalLogoImage = Utils.getIconPath(Utils.getSDKStaticConentUrl()).concat(
     'pzpega-logo-mark.svg'
   );
   const portalOperator = PCore.getEnvironmentInfo().getOperatorName();
@@ -126,7 +132,7 @@ export default function NavBar(props) {
       .showPage(pyRuleName, pyClassName)
       .then(() => {
         // eslint-disable-next-line no-console
-        console.log(`showPage completed`);
+        console.log(`${localizedVal('showPage completed', localeCategory)}`);
       });
   }
 
@@ -142,7 +148,7 @@ export default function NavBar(props) {
       .createWork(sCaseType, actionInfo)
       .then(() => {
         // eslint-disable-next-line no-console
-        console.log(`createWork completed`);
+        console.log(`${localizedVal('createWork completed', localeCategory)}`);
       });
   }
 
@@ -278,7 +284,7 @@ export default function NavBar(props) {
               <ListItemIcon>
                 <ArrowBackIcon fontSize='large' />
               </ListItemIcon>
-              <Typography variant='inherit'>Logout</Typography>
+              <Typography variant='inherit'>{localizedVal('Logout', localeCategory)}</Typography>
             </MenuItem>
           </Menu>
         </>