@pega/react-sdk-overrides 8.23.10 → 23.1.10

package/lib/helpers/formatters/{CurrencyMap.js → CurrencyMap.ts}

@@ -1,29 +1,32 @@
 /* eslint-disable no-template-curly-in-string */
-const EURO = {
+
+type CurrencyMapType = { name: string, symbolFormat: string, currencyCode: string}
+
+const EURO: CurrencyMapType = {
   name: "Euro (EUR)",
   symbolFormat: "\u20AC{#}",
   currencyCode: "EUR {#}"
 };
 
-const USD = {
+const USD: CurrencyMapType = {
   name: "U.S. Dollar (USD)",
   symbolFormat: "${#}",
   currencyCode: "USD {#}"
 };
 
-const XAF = {
+const XAF: CurrencyMapType = {
   name: "CFA Franc (BEAC) (XAF)",
   symbolFormat: "XAF {#}",
   currencyCode: "XAF {#}"
 };
 
-const XCD = {
+const XCD: CurrencyMapType = {
   name: "East Caribbean Dollar (XCD)",
   symbolFormat: "${#}",
   currencyCode: "XCD {#}"
 };
 
-const XPF = {
+const XPF: CurrencyMapType = {
   name: "Pacific Franc (XPF)",
   symbolFormat: "₣{#}",
   currencyCode: "XPF {#}"

package/lib/helpers/formatters/{Date.js → Date.ts}

@@ -13,8 +13,8 @@ const types = ["fromNow", "customFormat"];
 
 // value should be in ISO 8601 format.
 function DateFormatter(
-  value,
-  { type = types[1], format = "DD/MM/YYYY", timezone } = {}
+  value: string,
+  { type = types[1], format = "DD/MM/YYYY", timezone = "America/New_York" } = {}
 ) {
   if (!value) return value;
   switch (type) {

package/lib/helpers/formatters/{common.js → common.ts}

@@ -1,14 +1,14 @@
-export function getLocale(locale) {
+
+export function getLocale(locale: string = '') {
   // use locale if specified
   if (locale) return locale;
   // otherwise, use operator locale if it's defined
-  if (window.PCore.getEnvironmentInfo().getUseLocale()) return window.PCore.getEnvironmentInfo().getUseLocale();
+  if (PCore.getEnvironmentInfo().getLocale()) return PCore.getEnvironmentInfo().getLocale();
   // fallback
   return Intl.DateTimeFormat().resolvedOptions().locale;
 }
 
-export function getCurrentTimezone(timezone) {
+export function getCurrentTimezone(timezone: string = "America/New_York" ) {
   if (timezone) return timezone;
-  // eslint-disable-next-line no-undef
   return PCore?.getLocaleUtils?.().getTimeZoneInUse?.();
 }

package/lib/helpers/formatters/{index.js → index.ts}

@@ -9,7 +9,7 @@ export default {
   ...DateFormatter
 };
 
-function getDateObject(text) {
+function getDateObject(text): Date {
   // TODO - cleanup formatters util functions as DX APIs are returning values per ISO std now.
   const timeStamp = text.replace(/-/g, "");
   const isDateTime = timeStamp.indexOf("GMT") !== -1;
@@ -58,8 +58,8 @@ function parseDateInISO(value) {
   return value ? getDateObject(value).toISOString() : value;
 }
 
-export function format(value, type, options = {}) {
-  let formattedValue;
+export function format(value, type, options = {}): string {
+  let formattedValue: string;
 
   switch (type?.toLowerCase()) {
     case "currency": {

package/lib/helpers/simpleTableHelpers.ts

@@ -1,6 +1,5 @@
 import { Utils } from './utils';
 
-declare const PCore;
 
 export const TABLE_CELL = "SdkRenderer";
 export const DELETE_ICON = "DeleteIcon";
@@ -8,7 +7,7 @@ export const DELETE_ICON = "DeleteIcon";
 // BUG-615253: Workaround for autosize in table with lazy loading components
 /* istanbul ignore next */
 function getFieldWidth(field, label) {
-  let width;
+  let width: number;
   switch (field.type) {
     case "Time":
       width = 150;
@@ -46,7 +45,7 @@ function getFieldWidth(field, label) {
 export const getContext = (thePConn) => {
   const contextName = thePConn.getContextName();
   const pageReference = thePConn.getPageReference();
-  let { referenceList } = thePConn.getStateProps().config;
+  let { referenceList } = thePConn.getStateProps()?.config || thePConn.getStateProps();
   const pageReferenceForRows = referenceList.startsWith(".")
     ? `${pageReference}.${referenceList.substring(1)}`
     : referenceList;
@@ -65,7 +64,7 @@ export const getContext = (thePConn) => {
 };
 
 export const populateRowKey = (rawData) => {
-  return rawData.map((row, index) => {
+  return rawData.map((row: any, index: number) => {
     return { ...row, index };
   });
 };
@@ -103,6 +102,7 @@ export const buildMetaForListView = (
   ruleClass,
   name,
   propertyLabel,
+  isDataObject,
   parameters
 ) => {
   return {
@@ -112,10 +112,12 @@ export const buildMetaForListView = (
       referenceList: fieldMetadata.datasource.name,
       parameters: parameters ?? fieldMetadata.datasource.parameters,
       personalization: false,
+      isDataObject,
       grouping: true,
       globalSearch: true,
       reorderFields: true,
       toggleFieldVisibility: true,
+      title: propertyLabel,
       personalizationId: "" /* TODO */,
       template: "ListView",
       presets: [
@@ -207,7 +209,7 @@ export const createMetaForTable = (fields, renderMode) => {
  * @param {number} index - index of the page list to add
  */
 export const getAddRowCallback = (pConnect, index) => {
-  return () => pConnect.getListActions().insert({}, index);
+  return () => pConnect.getListActions().insert({}, index, '');  // 3rd arg null until typedef marked correctly as optional
 };
 
 /**
@@ -216,7 +218,9 @@ export const getAddRowCallback = (pConnect, index) => {
  * @param {string} referenceList - referenceList
  * @param {string} pageReference - pageReference
  */
-export const createPConnect = (contextName, referenceList, pageReference) => {
+// NOTE: use of type "any" is required since TypeScript doesn't allow private/protected properties
+//  to be exported from a class (TS4094 error)
+export function createPConnect(contextName, referenceList, pageReference): any {
   const options = {
     context: contextName,
     pageReference,

package/lib/helpers/state-utils.tsx

@@ -0,0 +1,47 @@
+import React, { useContext } from 'react';
+import { connect, Provider, shallowEqual } from 'react-redux';
+import ReactReduxContext from '@pega/react-sdk-components/lib/bridge/Context/StoreContext';
+
+
+const connectToState = (mapStateToProps = () => {}) => {
+  return (Component: any) => {
+    const ConnectedComponent = connect(mapStateToProps, null, null, {
+      areStatePropsEqual: (next, prev: any) => {
+        // Compare visibility
+        const prevWasVisible = prev.visibility !== false;
+        if (next.visibility !== undefined && next.visibility !== prevWasVisible) {
+          return false;
+        }
+        // Compare start props
+        const c11nEnv = next.getPConnect();
+        const allStateProps = c11nEnv.getStateProps();
+        for (const key in allStateProps) {
+          if (
+            !shallowEqual(next[key], prev[key]) ||
+            (next.routingInfo && !PCore.isDeepEqual(next.routingInfo, prev.routingInfo))
+          ) {
+            return false;
+          }
+        }
+        /* TODO For some rawConfig we are not getting routingInfo under allStateProps */
+        return !(
+          'routingInfo' in next &&
+          (!shallowEqual(next.routingInfo, prev.routingInfo) ||
+            !PCore.isDeepEqual(next.routingInfo, prev.routingInfo))
+        );
+      }
+    })(Component);
+
+    return (ownProps = {}) => {
+      const { store } = useContext<any>(ReactReduxContext);
+
+      return (
+        <Provider store={store}>
+          <ConnectedComponent {...ownProps} />
+        </Provider>
+      );
+    };
+  };
+};
+
+export default connectToState;

package/lib/helpers/template-utils.ts

@@ -1,10 +1,9 @@
 //  This file is adapted from React DX components/template/utils.js
 
-declare const PCore: any;
 
 export function getAllFields(pConnect: any) {
   const metadata = pConnect.getRawMetadata();
-  let allFields = [];
+  let allFields: Array<any> = [];
   if (metadata.children && metadata.children.map) {
     allFields = metadata.children.map(fields => {
       const children = fields.children instanceof Array ? fields.children : [];
@@ -14,7 +13,7 @@ export function getAllFields(pConnect: any) {
   return allFields;
 }
 
-export function filterForFieldValueList(fields: any) {
+export function filterForFieldValueList(fields: Array<any>) {
   return fields
     .filter(({ visibility }) => visibility !== false)
     .map(({ value, label }) => ({
@@ -47,7 +46,7 @@ export function getIsAssignmentView(pConnect) {
  * @param {Function} pConnect PConnect object for the component
  * @param {string} [instructions="casestep"] 'casestep', 'none', or the html content of a Rule-UI-Paragraph rule (processed via core's paragraph annotation handler)
  */
-export function getInstructions(pConnect, instructions = 'casestep') {
+export function getInstructions(pConnect, instructions: string = 'casestep'): string | undefined {
   const caseStepInstructions =
     PCore.getConstants().CASE_INFO.INSTRUCTIONS &&
     pConnect.getValue(PCore.getConstants().CASE_INFO.INSTRUCTIONS);

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

@@ -5,7 +5,6 @@
  * PCore/PConnect is being run
  */
 
-declare const PCore;
 
 export const sdkVersion = "8.7";
 

package/lib/infra/ActionButtons/ActionButtons.tsx

@@ -1,10 +1,16 @@
 import React from "react";
-import PropTypes from "prop-types";
 import { makeStyles } from '@material-ui/core/styles';
 
 import Button from '@material-ui/core/Button';
 import { Grid, Divider } from "@material-ui/core";
 
+// ActionButtons does NOT have getPConnect. So, no need to extend from PConnProps
+interface ActionButtonsProps {
+  // If any, enter additional props that only exist on this component
+  arMainButtons?: Array<any>,
+  arSecondaryButtons?: Array<any>,
+  onButtonPress: any
+}
 
 
 const useStyles = makeStyles((/* theme */) => ({
@@ -18,9 +24,11 @@ const useStyles = makeStyles((/* theme */) => ({
 }));
 
 
-export default function ActionButtons(props) {
-  const { arMainButtons, arSecondaryButtons, onButtonPress } = props;
+export default function ActionButtons(props: ActionButtonsProps) {
+  const { arMainButtons = [], arSecondaryButtons = [], onButtonPress } = props;
   const classes = useStyles();
+  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const localeCategory = 'Assignment';
 
   function _onButtonPress(sAction: string, sButtonType: string) {
 
@@ -35,7 +43,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 +52,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>
@@ -55,16 +63,3 @@ export default function ActionButtons(props) {
 
   )
 }
-
-ActionButtons.propTypes = {
-  arMainButtons: PropTypes.array,
-  arSecondaryButtons: PropTypes.array,
-  onButtonPress: PropTypes.func
-  // buildName: PropTypes.string
-};
-
-ActionButtons.defaultProps = {
-  arMainButtons: [],
-  arSecondaryButtons: []
-  // buildName: null
-};

package/lib/infra/Assignment/Assignment.tsx

@@ -1,25 +1,43 @@
 import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-
-import AssignmentCard from '@pega/react-sdk-components/lib/components/infra/AssignmentCard';
-import MultiStep from '@pega/react-sdk-components/lib/components/infra/MultiStep';
 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;
-
-export default function Assignment(props) {
-  const { getPConnect, children, itemKey, isInModal } = props;
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+
+// import type { PConnProps } from '../../../types/PConnProps';
+
+// Can't use AssignmentProps until the following are NOT private
+//  getCaseInfo().isAssignmentInCreateStage()
+//  getCaseInfo().isLocalAction()
+// interface AssignmentProps extends PConnProps {
+//   // If any, enter additional props that only exist on this component
+//   children: Array<any>,
+//   itemKey: string,
+//   isInModal: boolean,
+//   banners: Array<any>
+//   // eslint-disable-next-line react/no-unused-prop-types
+//   actionButtons: Array<any>,
+// }
+
+
+export default function Assignment(props /* : AssignmentProps */) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const AssignmentCard = getComponentFromMap("AssignmentCard");
+  const MultiStep = getComponentFromMap("MultiStep");
+
+  const { getPConnect, children, itemKey = '', isInModal = false, banners = [] } = props;
   const thePConn = getPConnect();
 
   const [bHasNavigation, setHasNavigation] = useState(false);
-  const [actionButtons, setActionButtons] = useState({});
+  const [actionButtons, setActionButtons] = useState([]);
   const [bIsVertical, setIsVertical] = useState(false);
   const [arCurrentStepIndicies, setArCurrentStepIndicies] = useState<Array<any>>([]);
   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);
@@ -66,10 +84,10 @@ export default function Assignment(props) {
 
       const oWorkItem = children[0].props.getPConnect();
       const oWorkData = oWorkItem.getDataObject();
-      const oData = thePConn.getDataObject();
+      const oData = thePConn.getDataObject('');  // 1st arg empty string until typedefs allow it to be optional
 
       if (oWorkData?.caseInfo && oWorkData.caseInfo.assignments !== null) {
-        const oCaseInfo = oData.caseInfo;
+        const oCaseInfo = oData["caseInfo"];
 
         if (oCaseInfo && oCaseInfo.actionButtons) {
           setActionButtons(oCaseInfo.actionButtons);
@@ -91,8 +109,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 +157,7 @@ export default function Assignment(props) {
           navigatePromise
             .then(() => {})
             .catch(() => {
-              showToast(`Navigation failed!`);
+              showToast(`${localizedVal('Navigation failed!', localeCategory)}`);
             });
 
           break;
@@ -153,7 +176,7 @@ export default function Assignment(props) {
               onSaveActionSuccess({ caseType, caseID, assignmentID });
             })
             .catch(() => {
-              showToast('Save failed');
+              showToast(`${localizedVal('Save failed', localeCategory)}`);
             });
 
           break;
@@ -167,7 +190,7 @@ export default function Assignment(props) {
           const isLocalAction =
             thePConn.getCaseInfo().isLocalAction() ||
             (PCore.getConstants().CASE_INFO.IS_LOCAL_ACTION &&
-              getPConnect().getValue(PCore.getConstants().CASE_INFO.IS_LOCAL_ACTION));
+              getPConnect().getValue(PCore.getConstants().CASE_INFO.IS_LOCAL_ACTION, ''));// 2nd arg empty string until typedefs allow it to be optional
           if (isAssignmentInCreateStage && isInModal && !isLocalAction) {
             const cancelPromise = cancelCreateStageAssignment(itemKey);
 
@@ -176,7 +199,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 +209,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 +227,7 @@ export default function Assignment(props) {
           finishPromise
             .then(() => {})
             .catch(() => {
-              showToast(`Submit failed!`);
+              showToast(`${localizedVal('Submit failed!', localeCategory)}`);
             });
 
           break;
@@ -218,6 +241,7 @@ export default function Assignment(props) {
 
   return (
     <div id='Assignment'>
+      {banners}
       {bHasNavigation ? (
         <React.Fragment>
           <MultiStep
@@ -303,18 +327,3 @@ export default function Assignment(props) {
 //         <lit-toast></lit-toast>
 //     </div>`}
 // `;
-
-Assignment.propTypes = {
-  children: PropTypes.node.isRequired,
-  getPConnect: PropTypes.func.isRequired,
-  itemKey: PropTypes.string,
-  isInModal: PropTypes.bool
-  // actionButtons: PropTypes.object
-  // buildName: PropTypes.string
-};
-
-Assignment.defaultProps = {
-  itemKey: null,
-  isInModal: false
-  // buildName: null
-};

package/lib/infra/AssignmentCard/AssignmentCard.tsx

@@ -1,9 +1,21 @@
 import React, { useState, useEffect } from "react";
-import PropTypes from "prop-types";
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+
+interface AssignmentCardProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  children: Array<any>,
+  actionButtons: any,
+  onButtonPress: any,
+  // eslint-disable-next-line react/no-unused-prop-types
+  itemKey?: string
+}
+
 
-import ActionButtons from "@pega/react-sdk-components/lib/components/infra/ActionButtons";
+export default function AssignmentCard(props: AssignmentCardProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const ActionButtons = getComponentFromMap("ActionButtons");
 
-export default function AssignmentCard(props) {
   const { children, actionButtons, onButtonPress} = props;
 
   const [arMainButtons, setArMainButtons] = useState([]);
@@ -29,19 +41,3 @@ export default function AssignmentCard(props) {
     </>
   )
 }
-
-AssignmentCard.propTypes = {
-  children: PropTypes.node.isRequired,
-  // eslint-disable-next-line react/no-unused-prop-types
-  getPConnect: PropTypes.func.isRequired,
-  // eslint-disable-next-line react/no-unused-prop-types
-  itemKey: PropTypes.string,
-  actionButtons: PropTypes.object,
-  onButtonPress: PropTypes.func
-  // buildName: PropTypes.string
-};
-
-AssignmentCard.defaultProps = {
-  itemKey: null,
-  // buildName: null
-};