@pega/react-sdk-overrides 0.23.20 → 0.23.22

package/lib/designSystemExtension/Banner/Banner.css

@@ -0,0 +1,35 @@
+.background-image-style {
+  margin-left: -16px;
+  margin-right: -16px;
+  height: calc(19rem);
+  background-size: cover;
+  background-position: center center;
+}
+
+.background-style {
+  background-color: transparent;
+  color: rgb(0, 0, 0);
+  width: 100%;
+  height: 100%;
+  text-align: center;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: calc(0.5rem);
+}
+
+.title {
+  margin: 0rem;
+  font-size: 1.728rem;
+  font-weight: 600;
+}
+
+.message {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 400;
+}

package/lib/designSystemExtension/Banner/Banner.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import Grid from '@material-ui/core/Grid';
+import './Banner.css';
+
+export default function Banner(props) {
+  const { a, b, banner } = props;
+  const { title, message, backgroundImage } = banner;
+  return (
+    <div>
+      <div
+        className='background-image-style'
+        style={{ backgroundImage: `url(${backgroundImage})` }}
+      >
+        <div className='background-style content'>
+          <div>
+            <h1 className='title'>{title}</h1>
+            <p className='message'>{message}</p>
+          </div>
+        </div>
+      </div>
+      <div style={{ padding: '1rem' }}>
+        <Grid container item xs={12} spacing={1}>
+          <Grid item xs={8} style={{ padding: '1em' }}>
+            {a}
+          </Grid>
+          <Grid item xs={4} style={{ padding: '1em' }}>
+            {b}
+          </Grid>
+        </Grid>
+      </div>
+    </div>
+  );
+}

package/lib/designSystemExtension/Banner/index.tsx

@@ -0,0 +1 @@
+export { default } from './Banner';

package/lib/designSystemExtension/CaseSummaryFields/CaseSummaryFields.tsx

@@ -125,8 +125,7 @@ export default function CaseSummaryFields(props) {
       case 'date':
       case 'datetime': {
         const theDateFormatInfo = getDateFormatInfo();
-        // eslint-disable-next-line no-console
-        console.log(`theDateFormatInfo: ${theDateFormatInfo}`);
+        // console.log(`theDateFormatInfo: ${theDateFormatInfo}`);
         const theFormat = (fieldTypeLower === 'datetime') ? `${theDateFormatInfo.dateFormatStringLong} hh:mm a` : theDateFormatInfo.dateFormatStringLong
 
         return (

package/lib/field/Currency/Currency.tsx

@@ -74,11 +74,12 @@ export default function Currency(props) {
     return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} variant='stacked' />;
   }
 
+  // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
   function currOnChange(event, inValue) {
     // console.log(`Currency currOnChange inValue: ${inValue}`);
 
     // update internal value
-    setCurrValue(inValue);
+    setCurrValue(event?.target?.value);
   }
 
   function currOnBlur(event, inValue) {

package/lib/field/DateTime/DateTime.tsx

@@ -38,19 +38,18 @@ export default function DateTime(props) {
 
 
   if (displayMode === 'LABELS_LEFT') {
-    const formattedDate = format(props.value, 'datetime', { format: `${dateFormatInfo.dateFormatString} hh:mm a` });
-    return <FieldValueList name={hideLabel ? '' : label} value={formattedDate} />;
+    const formattedDateTime = format(props.value, 'datetime', { format: `${dateFormatInfo.dateFormatString} hh:mm a` });
+    return <FieldValueList name={hideLabel ? '' : label} value={formattedDateTime} />;
   }
 
   if (displayMode === 'STACKED_LARGE_VAL') {
-    const formattedDate = format(props.value, 'datetime', { format: `${dateFormatInfo.dateFormatString} hh:mm a` });
-    return <FieldValueList name={hideLabel ? '' : label} value={formattedDate} variant='stacked' />;
+    const formattedDateTime = format(props.value, 'datetime', { format: `${dateFormatInfo.dateFormatString} hh:mm a` });
+    return <FieldValueList name={hideLabel ? '' : label} value={formattedDateTime} variant='stacked' />;
   }
 
   if (readOnly) {
-    const formattedDate = format(props.value, 'datetime');
-    props.value = formattedDate;
-    return <TextInput {...props} />;
+    const formattedDateTime = format(props.value, 'datetime');
+    return <TextInput {...props} value={formattedDateTime} />;
   }
 
   const handleChange = date => {

package/lib/helpers/template-utils.ts

@@ -6,16 +6,15 @@ export function getAllFields(pConnect: any) {
   const metadata = pConnect.getRawMetadata();
   let allFields = [];
   if (metadata.children && metadata.children.map) {
-    allFields = metadata.children.map((fields) => {
+    allFields = metadata.children.map(fields => {
       const children = fields.children instanceof Array ? fields.children : [];
-      return children.map((field) => field.config);
+      return children.map(field => field.config);
     });
   }
   return allFields;
 }
 
-
-export function filterForFieldValueList(fields : any) {
+export function filterForFieldValueList(fields: any) {
   return fields
     .filter(({ visibility }) => visibility !== false)
     .map(({ value, label }) => ({
@@ -25,12 +24,11 @@ export function filterForFieldValueList(fields : any) {
     }));
 }
 
-
 /**
  * Determine if the current view is the view of the case step/assignment.
  * @param {Function} pConnect PConnect object for the component
  */
- export function getIsAssignmentView(pConnect) {
+export function getIsAssignmentView(pConnect) {
   // Get caseInfo content from the store which contains the view info about the current assignment/step
   // TODO To be replaced with pConnect.getCaseInfo().getCurrentAssignmentView when it's available
   const assignmentViewClass = pConnect.getValue(PCore.getConstants().CASE_INFO.CASE_INFO_CLASSID);
@@ -50,7 +48,9 @@ export function filterForFieldValueList(fields : any) {
  * @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') {
-  const caseStepInstructions = pConnect.getValue(PCore.getConstants().CASE_INFO.INSTRUCTIONS);
+  const caseStepInstructions =
+    PCore.getConstants().CASE_INFO.INSTRUCTIONS &&
+    pConnect.getValue(PCore.getConstants().CASE_INFO.INSTRUCTIONS);
 
   // Determine if this view is the current assignment/step view
   const isCurrentAssignmentView = getIsAssignmentView(pConnect);

package/lib/infra/Assignment/Assignment.tsx

@@ -1,5 +1,5 @@
-import React, { useState, useEffect } from "react";
-import PropTypes from "prop-types";
+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';
@@ -14,7 +14,7 @@ export default function Assignment(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>>([]);
@@ -30,40 +30,38 @@ export default function Assignment(props) {
   // const showPage = actionsAPI.showPage.bind(actionsAPI);
 
   const [showSnackbar, setShowSnackbar] = useState(false);
-  const [snackbarMessage, setSnackbarMessage] = useState("");
-
-  function findCurrentIndicies(arStepperSteps: Array<any>, arIndicies: Array<number>, depth: number) : Array<number> {
+  const [snackbarMessage, setSnackbarMessage] = useState('');
 
+  function findCurrentIndicies(
+    arStepperSteps: Array<any>,
+    arIndicies: Array<number>,
+    depth: number
+  ): Array<number> {
     let count = 0;
-    arStepperSteps.forEach( (step) => {
-      if (step.visited_status === "current") {
+    arStepperSteps.forEach(step => {
+      if (step.visited_status === 'current') {
         arIndicies[depth] = count;
 
         // add in
-        step["step_status"] = "";
-      }
-      else if (step.visited_status === "success") {
+        step['step_status'] = '';
+      } else if (step.visited_status === 'success') {
         count += 1;
-        step.step_status = "completed"
-      }
-      else {
+        step.step_status = 'completed';
+      } else {
         count += 1;
-        step.step_status = "";
+        step.step_status = '';
       }
 
       if (step.steps) {
-        arIndicies = findCurrentIndicies(step.steps, arIndicies, depth + 1)
+        arIndicies = findCurrentIndicies(step.steps, arIndicies, depth + 1);
       }
     });
 
     return arIndicies;
   }
 
-
-  useEffect( ()=> {
-
+  useEffect(() => {
     if (children && children.length > 0) {
-
       // debugger;
 
       const oWorkItem = children[0].props.getPConnect();
@@ -77,32 +75,32 @@ export default function Assignment(props) {
           setActionButtons(oCaseInfo.actionButtons);
         }
 
-        if ( oCaseInfo?.navigation /* was oCaseInfo.navigation != null */) {
+        if (oCaseInfo?.navigation /* was oCaseInfo.navigation != null */) {
           setHasNavigation(true);
 
-          if (oCaseInfo.navigation.template && oCaseInfo.navigation.template.toLowerCase() === "standard") {
+          if (
+            oCaseInfo.navigation.template &&
+            oCaseInfo.navigation.template.toLowerCase() === 'standard'
+          ) {
             setHasNavigation(false);
-          }
-          else if (oCaseInfo.navigation.template && oCaseInfo.navigation.template.toLowerCase() === "vertical") {
+          } else if (
+            oCaseInfo.navigation.template &&
+            oCaseInfo.navigation.template.toLowerCase() === 'vertical'
+          ) {
             setIsVertical(true);
-          }
-          else {
+          } else {
             setIsVertical(false);
           }
 
           setArNavigationSteps(JSON.parse(JSON.stringify(oCaseInfo.navigation.steps)));
-          setArCurrentStepIndicies(findCurrentIndicies(arNavigationSteps, arCurrentStepIndicies, 0));
-
+          setArCurrentStepIndicies(
+            findCurrentIndicies(arNavigationSteps, arCurrentStepIndicies, 0)
+          );
         }
       }
-
     }
-
-
   }, [children]);
 
-
-
   function showToast(message: string) {
     const theMessage = `Assignment: ${message}`;
     // eslint-disable-next-line no-console
@@ -111,61 +109,65 @@ export default function Assignment(props) {
     setShowSnackbar(true);
   }
 
-
   function handleSnackbarClose(event: React.SyntheticEvent | React.MouseEvent, reason?: string) {
     if (reason === 'clickaway') {
       return;
     }
     setShowSnackbar(false);
-  };
+  }
 
   function onSaveActionSuccess(data) {
     actionsAPI.cancelAssignment(itemKey).then(() => {
-      PCore.getPubSubUtils().publish(PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.CREATE_STAGE_SAVED, data);
+      PCore.getPubSubUtils().publish(
+        PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.CREATE_STAGE_SAVED,
+        data
+      );
     });
   }
 
   function buttonPress(sAction: string, sButtonType: string) {
-
-    if (sButtonType === "secondary") {
-
+    if (sButtonType === 'secondary') {
       switch (sAction) {
-        case "navigateToStep": {
-          const navigatePromise = navigateToStep( "previous", itemKey );
+        case 'navigateToStep': {
+          const navigatePromise = navigateToStep('previous', itemKey);
 
           navigatePromise
-            .then(() => {
-            })
+            .then(() => {})
             .catch(() => {
-              showToast( `Navigation failed!`);
+              showToast(`Navigation failed!`);
             });
 
           break;
         }
 
-        case "saveAssignment": {
+        case 'saveAssignment': {
           const caseID = thePConn.getCaseInfo().getKey();
           const assignmentID = thePConn.getCaseInfo().getAssignmentID();
           const savePromise = saveAssignment(itemKey);
 
           savePromise
-          .then(() => {
-            const caseType = thePConn.getCaseInfo().c11nEnv.getValue(PCore.getConstants().CASE_INFO.CASE_TYPE_ID);
-            onSaveActionSuccess({ caseType, caseID, assignmentID });
-          })
-          .catch(() => {
-            showToast('Save failed');
-          });
+            .then(() => {
+              const caseType = thePConn
+                .getCaseInfo()
+                .c11nEnv.getValue(PCore.getConstants().CASE_INFO.CASE_TYPE_ID);
+              onSaveActionSuccess({ caseType, caseID, assignmentID });
+            })
+            .catch(() => {
+              showToast('Save failed');
+            });
 
           break;
         }
 
-        case "cancelAssignment": {
+        case 'cancelAssignment': {
           // check if create stage (modal)
           const { PUB_SUB_EVENTS } = PCore.getConstants();
           const { publish } = PCore.getPubSubUtils();
           const isAssignmentInCreateStage = thePConn.getCaseInfo().isAssignmentInCreateStage();
-          const isLocalAction = thePConn.getCaseInfo().isLocalAction() || getPConnect().getValue(PCore.getConstants().CASE_INFO.IS_LOCAL_ACTION);
+          const isLocalAction =
+            thePConn.getCaseInfo().isLocalAction() ||
+            (PCore.getConstants().CASE_INFO.IS_LOCAL_ACTION &&
+              getPConnect().getValue(PCore.getConstants().CASE_INFO.IS_LOCAL_ACTION));
           if (isAssignmentInCreateStage && isInModal && !isLocalAction) {
             const cancelPromise = cancelCreateStageAssignment(itemKey);
 
@@ -193,73 +195,89 @@ export default function Assignment(props) {
         default:
           break;
       }
-    }
-    else if (sButtonType === "primary") {
+    } else if (sButtonType === 'primary') {
       // eslint-disable-next-line sonarjs/no-small-switch
       switch (sAction) {
-        case "finishAssignment" :
-          {
-            const finishPromise = finishAssignment(itemKey);
+        case 'finishAssignment': {
+          const finishPromise = finishAssignment(itemKey);
 
-            finishPromise
-              .then(() => {
-              })
-              .catch(() => {
-                showToast( `Submit failed!`);
-              });
+          finishPromise
+            .then(() => {})
+            .catch(() => {
+              showToast(`Submit failed!`);
+            });
 
-            break;
-          }
+          break;
+        }
 
         default:
           break;
       }
     }
-
   }
 
-
   return (
-    <div id="Assignment">
-      { bHasNavigation ?
-          <React.Fragment>
-            <MultiStep getPConnect={getPConnect} itemKey={itemKey} actionButtons={actionButtons} onButtonPress={buttonPress}
-              bIsVertical={bIsVertical} arCurrentStepIndicies={arCurrentStepIndicies} arNavigationSteps={arNavigationSteps}>
-              {children}
-            </MultiStep>
-            <Snackbar
-              open={showSnackbar}
-              autoHideDuration={3000}
-              onClose={handleSnackbarClose}
-              message={snackbarMessage}
-              action={
-                <IconButton size="small" aria-label="close" color="inherit" onClick={handleSnackbarClose}>
-                  <CloseIcon fontSize="small" />
-                </IconButton>
-              }
-            />
-          </React.Fragment>
-        : (
-          <React.Fragment>
-            <AssignmentCard getPConnect={getPConnect} itemKey={itemKey} actionButtons={actionButtons} onButtonPress={buttonPress} >
-              {children}
-            </AssignmentCard>
-            <Snackbar
-              open={showSnackbar}
-              autoHideDuration={3000}
-              onClose={handleSnackbarClose}
-              message={snackbarMessage}
-              action={
-                <IconButton size="small" aria-label="close" color="inherit" onClick={handleSnackbarClose}>
-                  <CloseIcon fontSize="small" />
-                </IconButton>
-              }
-            />
-          </React.Fragment>
-        )
-    }
+    <div id='Assignment'>
+      {bHasNavigation ? (
+        <React.Fragment>
+          <MultiStep
+            getPConnect={getPConnect}
+            itemKey={itemKey}
+            actionButtons={actionButtons}
+            onButtonPress={buttonPress}
+            bIsVertical={bIsVertical}
+            arCurrentStepIndicies={arCurrentStepIndicies}
+            arNavigationSteps={arNavigationSteps}
+          >
+            {children}
+          </MultiStep>
+          <Snackbar
+            open={showSnackbar}
+            autoHideDuration={3000}
+            onClose={handleSnackbarClose}
+            message={snackbarMessage}
+            action={
+              <IconButton
+                size='small'
+                aria-label='close'
+                color='inherit'
+                onClick={handleSnackbarClose}
+              >
+                <CloseIcon fontSize='small' />
+              </IconButton>
+            }
+          />
+        </React.Fragment>
+      ) : (
+        <React.Fragment>
+          <AssignmentCard
+            getPConnect={getPConnect}
+            itemKey={itemKey}
+            actionButtons={actionButtons}
+            onButtonPress={buttonPress}
+          >
+            {children}
+          </AssignmentCard>
+          <Snackbar
+            open={showSnackbar}
+            autoHideDuration={3000}
+            onClose={handleSnackbarClose}
+            message={snackbarMessage}
+            action={
+              <IconButton
+                size='small'
+                aria-label='close'
+                color='inherit'
+                onClick={handleSnackbarClose}
+              >
+                <CloseIcon fontSize='small' />
+              </IconButton>
+            }
+          />
+        </React.Fragment>
+      )}
     </div>
-  )
+  );
 }
 
 // From WC SDK
@@ -286,7 +304,6 @@ export default function Assignment(props) {
 //     </div>`}
 // `;
 
-
 Assignment.propTypes = {
   children: PropTypes.node.isRequired,
   getPConnect: PropTypes.func.isRequired,