@pega/react-sdk-overrides 0.23.26 → 8.8.20

package/lib/infra/DashboardFilter/DashboardFilter.tsx

@@ -2,7 +2,6 @@
 /* eslint-disable @typescript-eslint/no-shadow */
 /* eslint-disable operator-assignment */
 import { useRef, useEffect, useState, Fragment, forwardRef } from 'react';
-import PropTypes from 'prop-types';
 import { v4 as uuidv4 } from 'uuid';
 import { debounce } from 'throttle-debounce';
 import { createFilter, combineFilters, getFormattedDate } from './filterUtils';
@@ -10,12 +9,23 @@ 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 type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+interface DashboardFilterProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  children?: Array<any>,
+  name: string,
+  filterProp: string,
+  type?: string,
+  metadata?: any
+}
 
-export default function DashboardFilter(props) {
-  const { children, name, filterProp, type, metadata, getPConnect } = props;
+
+export default function DashboardFilter(props: DashboardFilterProps) {
+  const { children = [], name, filterProp, type = '', metadata = null, getPConnect } = props;
   const { current: filterId } = useRef(uuidv4());
 
   const [startDate, setStartDate] = useState(null);
@@ -98,7 +108,8 @@ export default function DashboardFilter(props) {
     metadata.config.onRecordChange = e => {
       fireFilterChange(e.id);
     };
-    return getPConnect().createComponent(metadata);
+    return getPConnect().createComponent(metadata,
+      null, null, {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional;
   };
 
   const onChange = dates => {
@@ -163,18 +174,3 @@ export default function DashboardFilter(props) {
     </Fragment>
   );
 }
-
-DashboardFilter.defaultProps = {
-  children: null,
-  type: null,
-  metadata: null
-};
-
-DashboardFilter.propTypes = {
-  getPConnect: PropTypes.func.isRequired,
-  children: PropTypes.object,
-  name: PropTypes.string.isRequired,
-  filterProp: PropTypes.string.isRequired,
-  type: PropTypes.string,
-  metadata: PropTypes.objectOf(PropTypes.any)
-};

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: {
@@ -89,7 +91,7 @@ export const createFilterComponent = (getPConnect, filterMeta, index) => {
       metadata={filterMeta}
       type={filterMeta.type}
     >
-      {getPConnect().createComponent(filterMeta)}
+      {getPConnect().createComponent(filterMeta, '','', {})}
     </DashboardFilter>
   );
 };

package/lib/infra/DeferLoad/DeferLoad.tsx

@@ -1,11 +1,19 @@
 import React, { useState, useEffect, createElement } from 'react';
-import PropTypes from 'prop-types';
 import { Box, Card, CircularProgress } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 
-declare const PCore;
+// import type { PConnProps } from '../../../types/PConnProps';
+
+// Can't use PConnProps until typedefs for showData are fixed
+// interface DeferLoadProps extends PConnProps {
+//   // If any, enter additional props that only exist on this component
+//   name: string,
+//   isChildDeferLoad?: boolean,
+//   isTab: boolean
+// }
+
 
 //
 // WARNING:  It is not expected that this file should be modified.  It is part of infrastructure code that works with
@@ -26,7 +34,7 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
-export default function DeferLoad(props) {
+export default function DeferLoad(props /* : DeferLoadProps */) {
   const { getPConnect, name, deferLoadId, isTab } = props;
   const [content, setContent] = useState<any>(null);
   const [isLoading, setLoading] = useState(true);
@@ -37,7 +45,7 @@ export default function DeferLoad(props) {
   const pConnect = getPConnect();
   const constants = PCore.getConstants();
 
-  const theRequestedAssignment = pConnect.getValue( PCore.getConstants().CASE_INFO.ASSIGNMENT_LABEL);
+  const theRequestedAssignment = pConnect.getValue( PCore.getConstants().CASE_INFO.ASSIGNMENT_LABEL, '');  // 2nd arg empty string until typedef allows optional
   if (theRequestedAssignment !== currentLoadedAssignment)  {
     // console.log(`DeferLoad: currentLoadedAssignment about to change from ${currentLoadedAssignment} to ${theRequestedAssignment}`);
     setCurrentLoadedAssignment(theRequestedAssignment);
@@ -45,7 +53,7 @@ export default function DeferLoad(props) {
 
   const { CASE, PAGE, DATA } = constants.RESOURCE_TYPES;
   const loadViewCaseID =
-    pConnect.getValue(constants.PZINSKEY) || pConnect.getValue(constants.CASE_INFO.CASE_INFO_ID);
+    pConnect.getValue(constants.PZINSKEY, '') || pConnect.getValue(constants.CASE_INFO.CASE_INFO_ID, '');  // 2nd arg empty string until typedef allows optional
   let containerName;
   let containerItemData;
   const targetName = pConnect.getTarget();
@@ -62,7 +70,7 @@ export default function DeferLoad(props) {
 
   const getViewOptions = () => ({
     viewContext: resourceType,
-    pageClass: loadViewCaseID ? '' : pConnect.getDataObject().pyPortal.classID,
+    pageClass: loadViewCaseID ? '' : pConnect.getDataObject(pConnect.getContextName()).pyPortal.classID,
     container: isContainerPreview ? 'preview' : null,
     containerName: isContainerPreview ? 'preview' : null,
     updateData: isContainerPreview
@@ -110,7 +118,7 @@ export default function DeferLoad(props) {
 
         getPConnect()
           .getActionsApi()
-          .showData(name, dataContext, dataContextParameters, {
+          .showData(name, dataContext, dataContextParameters, {   // Need to wait for typedefs to be fixed for showData
             skipSemanticUrl: true,
             isDeferLoaded: true
           })
@@ -132,7 +140,7 @@ export default function DeferLoad(props) {
     } else {
       getPConnect()
         .getActionsApi()
-        .refreshCaseView(encodeURI(loadViewCaseID), name)
+        .refreshCaseView(encodeURI(loadViewCaseID), name, '')  // 3rd arg empty string until typedef allows optional
         .then(data => {
           onResponse(data.root);
         });
@@ -162,14 +170,3 @@ export default function DeferLoad(props) {
 
   return deferLoadContent;
 }
-
-DeferLoad.defaultProps = {
-  isChildDeferLoad: false
-};
-
-DeferLoad.propTypes = {
-  getPConnect: PropTypes.func.isRequired,
-  name: PropTypes.string.isRequired,
-  isChildDeferLoad: PropTypes.bool,
-  isTab: PropTypes.bool
-};

package/lib/infra/ErrorBoundary/ErrorBoundary.tsx

@@ -1,13 +1,25 @@
 import React from "react";
-import PropTypes from "prop-types";
 
-declare const PCore;
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
-function ErrorBoundary(props) {
-  const ERROR_TEXT = PCore.getErrorHandler().getGenericFailedMessage();
+interface ErrorBoundaryProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  isInternalError?: boolean
+}
+
+
+// Remove this and use "real" PCore type once .d.ts is fixed (currently shows 1 error)
+declare const PCore: any;
+
+
+export default function ErrorBoundary(props: ErrorBoundaryProps) {
+  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;
+  const { getPConnect, isInternalError = false } = props;
 
   const theErrorDiv = <div>{ERROR_TEXT}</div>
 
@@ -21,9 +33,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") {
@@ -46,14 +58,3 @@ function ErrorBoundary(props) {
     theErrorDiv
   );
 }
-ErrorBoundary.propTypes = {
-  getPConnect: PropTypes.func,
-  isInternalError: PropTypes.bool
-};
-
-ErrorBoundary.defaultProps = {
-  getPConnect: null,
-  isInternalError: false
-};
-
-export default ErrorBoundary;

package/lib/infra/MultiStep/MultiStep.tsx

@@ -1,18 +1,34 @@
 import React from "react";
-import PropTypes from "prop-types";
-
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import './MultiStep.css';
 
-import AssignmentCard from '@pega/react-sdk-components/lib/components/infra/AssignmentCard';
-
 // import { useConstellationContext } from "../../bridge/Context/StoreContext";
 
-export default function MultiStep(props) {
-    const { getPConnect, children, itemKey, actionButtons, onButtonPress} = props;
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+
+interface MultiStepProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  children: Array<any>,
+  itemKey: string,
+  actionButtons: Array<any>,
+  onButtonPress: any,
+  bIsVertical: boolean,
+  arNavigationSteps: Array<any>,
+  // eslint-disable-next-line react/no-unused-prop-types
+  arCurrentStepIndicies?: Array<any>
+}
+
+
+export default function MultiStep(props: MultiStepProps) {
+    // Get emitted components from map (so we can get any override that may exist)
+    const AssignmentCard = getComponentFromMap("AssignmentCard");
+
+    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") {
@@ -207,19 +223,3 @@ export default function MultiStep(props) {
 
     )
   }
-
-  MultiStep.propTypes = {
-    children: PropTypes.node.isRequired,
-    getPConnect: PropTypes.func.isRequired,
-    itemKey: PropTypes.string,
-    actionButtons: PropTypes.object,
-    onButtonPress: PropTypes.func,
-    bIsVertical: PropTypes.bool,
-    // eslint-disable-next-line react/no-unused-prop-types
-    arCurrentStepIndicies: PropTypes.array,
-    arNavigationSteps: PropTypes.array
-  };
-
-  MultiStep.defaultProps = {
-    itemKey: null
-  };

package/lib/infra/NavBar/NavBar.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { makeStyles, useTheme } from '@material-ui/core/styles';
 import clsx from 'clsx';
-import PropTypes from 'prop-types';
 import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
 import './NavBar.css';
 import {
@@ -35,11 +34,23 @@ 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 type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+
+interface NavBarProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  // eslint-disable-next-line react/no-unused-prop-types
+  appName?: string,
+  pages?: Array<any>,
+  caseTypes: Array<any>,
+  pConn?: any
+}
+
 
 const iconMap = {
   'pi pi-headline': <HomeOutlinedIcon fontSize='large' />,
-  'pi pi-flag-solid': <FlagOutlinedIcon fontSize='large' />
+  'pi pi-flag-solid': <FlagOutlinedIcon fontSize='large' />,
+  'pi pi-home-solid': <HomeOutlinedIcon fontSize='large' />
 };
 
 const drawerWidth = 300;
@@ -95,8 +106,8 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
-export default function NavBar(props) {
-  const { pConn, pages, caseTypes } = props;
+export default function NavBar(props: NavBarProps) {
+  const { pConn, pages = [], caseTypes = [] } = props;
 
   const classes = useStyles();
   const theme = useTheme();
@@ -108,7 +119,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 +140,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 +156,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 +292,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>
         </>
@@ -286,18 +300,3 @@ export default function NavBar(props) {
     </Drawer>
   );
 }
-
-NavBar.defaultProps = {
-  pConn: null,
-  appName: '',
-  pages: [],
-  caseTypes: []
-};
-
-NavBar.propTypes = {
-  pConn: PropTypes.object,
-  // eslint-disable-next-line react/no-unused-prop-types
-  appName: PropTypes.string,
-  pages: PropTypes.arrayOf(PropTypes.object),
-  caseTypes: PropTypes.arrayOf(PropTypes.object)
-};

package/lib/infra/Reference/Reference.tsx

@@ -1,8 +1,18 @@
 import React from "react";
-import PropTypes from "prop-types";
 
-export default function Reference(props) {
-  const { visibility, context, getPConnect, readOnly, displayMode } = props;
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+interface ReferenceProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  visibility?: boolean,
+  context?: string,
+  readOnly?: boolean,
+  displayMode?: string
+}
+
+
+export default function Reference(props: ReferenceProps) {
+  const { visibility = true, context = '', getPConnect, readOnly = false, displayMode = '' } = props;
 
   const pConnect = getPConnect();
   const referenceConfig = { ...pConnect.getComponentConfig() } || {};
@@ -41,18 +51,3 @@ export default function Reference(props) {
   }
   return null;
 }
-
-Reference.defaultProps = {
-  visibility: true,
-  context: null,
-  readOnly: false,
-  displayMode: null
-};
-
-Reference.propTypes = {
-  getPConnect: PropTypes.func.isRequired,
-  visibility: PropTypes.bool,
-  context: PropTypes.string,
-  readOnly: PropTypes.bool,
-  displayMode: PropTypes.string
-};

package/lib/infra/Region/Region.tsx

@@ -1,7 +1,13 @@
 import React from "react";
-import PropTypes from "prop-types";
 
-export default function Region(props) {
+// Region does NOT have getPConnect. So, no need to extend from PConnProps
+interface RegionProps {
+  // If any, enter additional props that only exist on this component
+  children: Array<any>
+}
+
+
+export default function Region(props: RegionProps) {
   const { children } = props;
 
   return <React.Fragment>
@@ -11,7 +17,3 @@ export default function Region(props) {
     </>
   </React.Fragment>;
 }
-
-Region.propTypes = {
-  children: PropTypes.arrayOf(PropTypes.node).isRequired
-};

package/lib/infra/RootContainer/RootContainer.tsx

@@ -1,15 +1,28 @@
 import React, { useMemo, useRef, useState, useEffect, useContext, createElement } from "react";
 // import { Banner, ModalManager } from "@pega/cosmos-react-core";
-import PropTypes, { object } from "prop-types";
 import isEqual from 'lodash.isequal';
 // import ReAuthMessageModal from "../ReAuthenticationModal";
 import { Box, CircularProgress } from "@material-ui/core";
 import createPConnectComponent from "@pega/react-sdk-components/lib/bridge/react_pconnect";
 import { LazyMap as LazyComponentMap } from "@pega/react-sdk-components/lib/components_map";
 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 type { PConnProps } from '../../../types/PConnProps';
+
+// Can't use RootContainerProps until getChildren() typedef is fixes to not return an array of 'never'
+// interface RootContainerProps extends PConnProps {
+//   // If any, enter additional props that only exist on this component
+//   renderingMode?: string,
+//   routingInfo: { type: string, accessedOrder: Array<any>, items: any },
+//   children: Array<any>,
+//   skeleton: any,
+//   httpMessages: Array<any>
+// }
+
+// Remove this and use "real" PCore type once .d.ts is fixed (currently shows 1 error)
+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
@@ -37,7 +50,7 @@ function getItemView(routingInfo, renderingMode) {
       if (
         items[key] &&
         items[key].view &&
-        !Utils.isEmptyObject(items[key].view)
+        !isEmptyObject(items[key].view)
       ) {
         viewConfigs.push(items[key]);
       }
@@ -46,25 +59,22 @@ function getItemView(routingInfo, renderingMode) {
   return viewConfigs;
 }
 
-const RootContainer = (props) => {
+export default function RootContainer(props /* : RootContainerProps */) {
   const {
     getPConnect,
-    renderingMode,
-    children,
+    renderingMode = '',
+    children = [],
     skeleton,
-    httpMessages,
+    httpMessages = [],
     routingInfo
   } = props;
 
-  const { displayOnlyFA, isMashup } = useContext(StoreContext);
+  const { displayOnlyFA } = useContext<any>(StoreContext);
 
 
   const pConn = getPConnect();
 
   const options = { "context": "app" };
-  if (isMashup) {
-    options["context"] = "root";
-  }
 
   const [componentName, setComponentName] = useState("");
 
@@ -78,12 +88,15 @@ const RootContainer = (props) => {
 
   let hasBanner = false;
   let banners: any = null;
+  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const localeCategory = 'Messages';
+
   const messages = httpMessages
-    ? httpMessages.map((msg) => msg.message)
+    ? httpMessages.map((msg) => localizedVal(msg.message, localeCategory))
     : httpMessages;
 
   hasBanner = messages && messages.length > 0;
-  banners = hasBanner && (<div>RootContainer: trying to emit Banner with {messages}</div>);
+  banners = hasBanner && (<div>{localizedVal(`RootContainer: trying to emit Banner with ${messages}`, localeCategory)}</div>);
 
   const MemoizedModalViewContainer = useMemo(() => {
     return createElement(
@@ -123,7 +136,7 @@ const RootContainer = (props) => {
 
     switch (componentName) {
       case "View":
-        noPortalContent = <div>getNoPortalContent: RootContainer wants to render View in noPortal mode</div>
+        noPortalContent = <div>{localizedVal('getNoPortalContent: RootContainer wants to render View in noPortal mode', localeCategory)}</div>
         break;
 
       case "ViewContainer": {
@@ -148,7 +161,7 @@ const RootContainer = (props) => {
       }
 
       default:
-        noPortalContent = <div>getNoPortalContent: RootContainer wants to render NO componentName in noPortal mode</div>
+        noPortalContent = <div>{localizedVal('getNoPortalContent: RootContainer wants to render NO componentName in noPortal mode', localeCategory)}</div>
         break;
 
     }
@@ -220,7 +233,7 @@ const RootContainer = (props) => {
   }
   else if (renderingMode === "noPortal") {
     // eslint-disable-next-line no-console
-    console.log(`RootContainer rendering in noPortal mode`);
+    console.log(`${localizedVal('RootContainer rendering in noPortal mode', localeCategory)}`);
 
     const theChildren = pConn.getChildren();
     if (theChildren && (theChildren.length === 1)) {
@@ -238,7 +251,7 @@ const RootContainer = (props) => {
   else if (children && children.length > 0) {
     return (
       <React.Fragment>
-        <div>RootContainer: Has children. Trying to show ModalManager with children, etc.</div>
+        <div>{localizedVal('RootContainer: Has children. Trying to show ModalManager with children, etc.', localeCategory)}</div>
         {children}
         {MemoizedModalViewContainer}
       </React.Fragment>
@@ -257,28 +270,8 @@ const RootContainer = (props) => {
   } else {
     return (
       <div id="root-container">
-        <div>RootContainer: Should be ModalManager, etc.</div>
+        <div>{localizedVal('RootContainer: Should be ModalManager, etc.', localeCategory)}</div>
       </div>
     );
   }
 };
-
-RootContainer.defaultProps = {
-  getPConnect: null,
-  renderingMode: null,
-  children: null,
-  routingInfo: object
-};
-
-RootContainer.propTypes = {
-  getPConnect: PropTypes.func,
-  renderingMode: PropTypes.string,
-  routingInfo: PropTypes.shape({
-    type: PropTypes.string,
-    accessedOrder: PropTypes.array,
-    items: PropTypes.object
-  }),
-  children: PropTypes.arrayOf(PropTypes.oneOfType( [PropTypes.object, PropTypes.string ]))
-};
-
-export default RootContainer;

package/lib/infra/Stages/Stages.tsx

@@ -1,12 +1,21 @@
 import React from "react";
-import PropTypes from "prop-types";
 import { Breadcrumbs, Card, Typography } from "@material-ui/core";
 import DoubleArrowIcon from '@material-ui/icons/DoubleArrow';
 import DoneIcon from '@material-ui/icons/Done';
 import { makeStyles } from '@material-ui/core/styles';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
+
+interface StagesProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  stages: Array<any>
+}
+
+
+// Remove this and use "real" PCore type once .d.ts is fixed (currently shows 1 error)
 declare const PCore: any;
 
+
 const useStyles = makeStyles((theme) => ({
   root: {
     paddingRight: theme.spacing(1),
@@ -55,18 +64,20 @@ function getFilteredStages(stages) {
 
 /* TODO - this component should be refactored and not exposed as top level DX Component -
   the stages should be created as part of the CaseView */
-export default function Stages(props) {
+export default function Stages(props: StagesProps) {
   const classes = useStyles();
 
   const { getPConnect, stages } = props;
   const pConn = getPConnect();
+  const key = `${pConn.getCaseInfo().getClassName()}!CASE!${pConn.getCaseInfo().getName()}`.toUpperCase();
+
 
   const filteredStages = getFilteredStages(stages);
-  const currentStageID = pConn.getValue(PCore.getConstants().CASE_INFO.STAGEID);
+  const currentStageID = pConn.getValue(PCore.getConstants().CASE_INFO.STAGEID, '');  // 2nd arg empty string until typedef allows optional
   const stagesObj = filteredStages.map((stage, index, arr) => {
     const theID = stage.ID || stage.id;
     return {
-      name: stage.name,
+      name: PCore.getLocaleUtils().getLocaleValue(stage.name, null, key),
       id: theID,
       complete: stage.visited_status === "completed",
       current: (theID === currentStageID),
@@ -112,8 +123,3 @@ export default function Stages(props) {
     </Card>
   )
 }
-
-Stages.propTypes = {
-  getPConnect: PropTypes.func.isRequired,
-  stages: PropTypes.arrayOf(PropTypes.object).isRequired
-};