@pega/react-sdk-overrides 0.23.20 → 0.23.21

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/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,

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

@@ -171,7 +171,7 @@ export default function FlowContainer(props) {
 
     if (bLoadChildren && oWorkData) {
       // debugger;
-      setContainerName(oWorkData.caseInfo.assignments[0].name);
+      setContainerName(oWorkData.caseInfo.assignments?.[0].name);
     }
 
     // debugger;
@@ -253,7 +253,7 @@ export default function FlowContainer(props) {
 
     const caseActions = ourPConn.getValue(CASE_CONSTS.CASE_INFO_ACTIONS);
     const activeActionID = ourPConn.getValue(CASE_CONSTS.ACTIVE_ACTION_ID);
-    const activeAction = caseActions.find(action => action.ID === activeActionID);
+    const activeAction = caseActions?.find(action => action.ID === activeActionID);
     if (activeAction) {
       activeActionLabel = activeAction.name;
     }
@@ -396,7 +396,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(getActiveViewLabel() || oWorkData.caseInfo.assignments?.[0].name);
             }
           }
         }
@@ -405,7 +405,7 @@ export default function FlowContainer(props) {
 
   const caseId = thePConn.getCaseSummary().content.pyID;
   const urgency = getPConnect().getCaseSummary().assignments
-    ? getPConnect().getCaseSummary().assignments[0].urgency
+    ? getPConnect().getCaseSummary().assignments?.[0].urgency
     : '';
   const operatorInitials = Utils.getInitials(PCore.getEnvironmentInfo().getOperatorName());
   let instructionText = thePConn.getCaseSummary()?.assignments?.[0]?.instructions;
@@ -465,7 +465,7 @@ export default function FlowContainer(props) {
           <Alert severity='success'>{caseMessages}</Alert>
         </div>
       )}
-      {bShowConfirm && <Card className={classes.root}>{arNewChildrenAsReact}</Card>}
+      {bShowConfirm && <div>{arNewChildrenAsReact}</div>}
     </div>
   );
 }

package/lib/template/AppShell/AppShell.tsx

@@ -1,24 +1,33 @@
-import React, { useEffect, useState } from "react";
-import PropTypes from "prop-types";
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
 import { makeStyles } from '@material-ui/core/styles';
-
+import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
+import Avatar from '@material-ui/core/Avatar';
 import { NavContext } from '@pega/react-sdk-components/lib/components/helpers/reactContextHelpers';
 import './AppShell.css';
 
-// AppShell can emit NavBar
+// AppShell can emit NavBar or WssNavBar
 import NavBar from '@pega/react-sdk-components/lib/components/infra/NavBar';
+import WssNavBar from '@pega/react-sdk-components/lib/components/template/WssNavBar';
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles(theme => ({
   root: {
-    display: 'flex',
+    display: 'flex'
   },
   content: {
     flexGrow: 1,
     height: '100vh',
     overflow: 'auto',
     marginLeft: theme.spacing(2),
-    marginRight: theme.spacing(2),
+    marginRight: theme.spacing(2)
   },
+  wsscontent: {
+    flexGrow: 1,
+    height: '100vh',
+    overflow: 'auto',
+    marginLeft: theme.spacing(1),
+    marginRight: theme.spacing(1)
+  }
 }));
 
 declare const PCore;
@@ -31,53 +40,176 @@ export default function AppShell(props) {
     showAppName,
     children,
     getPConnect,
+    portalTemplate,
+    portalName,
+    portalLogo,
+    navDisplayOptions
   } = props;
   const [open, setOpen] = useState(true);
-
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
+  const [activeTab, setActiveTab] = useState(!pages ? null : pages[0]?.pyRuleName);
   const pConn = getPConnect();
   const envInfo = PCore.getEnvironmentInfo();
-
-  const appNameToDisplay = showAppName ? envInfo.getApplicationLabel() : "";
-
+  const imageKey = envInfo.getOperatorImageInsKey();
+  const userName = envInfo.getOperatorName();
+  const currentUserInitials = Utils.getInitials(userName);
+  const appNameToDisplay = showAppName ? envInfo.getApplicationLabel() : '';
+  const portalClass = pConn.getValue('.classID');
+  const envPortalName = envInfo.getPortalName();
+  const localeUtils = PCore.getLocaleUtils();
   const classes = useStyles();
-
+  const actionsAPI = pConn.getActionsApi();
+  const localeReference = pConn.getValue('.pyLocaleReference');
+  const [imageBlobUrl, setImageBlobUrl] = useState(null);
   // useState for appName and mapChildren - note these are ONLY updated once (on component mount!)
   // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
-  const [appName, setAppName] = useState("");
+  const [appName, setAppName] = useState('');
   // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
   const [mapChildren, setMapChildren] = useState([]);
 
   // Initial setting of appName and mapChildren
-  useEffect( () => {
+  useEffect(() => {
     setAppName(PCore.getEnvironmentInfo().getApplicationName());
 
     const tempMap = pConn.getChildren().map((child, index) => {
       const theChildComp = child.getPConnect().getComponentName();
       const theKey = `.${index}`;
-      return <div id={theChildComp} key={theKey} style={{border: "solid 1px silver", margin: "1px"}}>{theChildComp} will be here</div>
+      return (
+        <div id={theChildComp} key={theKey} style={{ border: 'solid 1px silver', margin: '1px' }}>
+          {theChildComp} will be here
+        </div>
+      );
     });
 
-    setMapChildren(tempMap)
+    setMapChildren(tempMap);
+  }, []);
 
+  const [iconURL, setIconURL] = useState('');
+  const [fullIconURL, setFullIconURL] = useState('');
+  useEffect(() => {
+    // using the default icon then fetch it from the static folder (not auth involved)
+    if (
+      !portalLogo ||
+      portalLogo.toLowerCase().includes('pzpega-logo-mark') ||
+      portalLogo.toLowerCase().includes('py-logo') ||
+      portalLogo.toLowerCase().includes('py-full-logo')
+    ) {
+      const portalLogoImage = Utils.getIconPath(PCore.getAssetLoader().getStaticServerUrl()).concat(
+        'pzpega-logo-mark.svg'
+      );
+      setIconURL(portalLogoImage);
+      setFullIconURL(`${PCore.getAssetLoader().getStaticServerUrl()}static/py-full-logo.svg`);
+    }
+    // not using default icon to fetch it using the way which uses authentication
+    else {
+      PCore.getAssetLoader()
+        .getSvcImage(portalLogo)
+        .then(blob => window.URL.createObjectURL(blob))
+        .then(data => {
+          setIconURL(data);
+          setFullIconURL(data);
+        })
+        .catch(() => {
+           // eslint-disable-next-line no-console
+          console.error(
+            `Unable to load the image for the portal logo/icon with the insName:${portalLogo}`
+          );
+        });
+    }
+  }, [portalLogo]);
+
+  useEffect(() => {
+    if (imageKey && portalTemplate === 'wss') {
+      PCore.getAssetLoader()
+        .getSvcImage(imageKey)
+        .then(blob => window.URL.createObjectURL(blob))
+        .then(imagePath => setImageBlobUrl(imagePath));
+    }
   }, []);
 
+  const getOperator = () => {
+    return {
+      avatar: portalTemplate !== 'wss' ? <Avatar /> : { name: userName, imageSrc: imageBlobUrl },
+      name: userName,
+      currentUserInitials
+    };
+  };
+
+  function showPage(viewName, className) {
+    actionsAPI.showPage(viewName, className);
+  }
+
+  function openURL(URL) {
+    window.open(URL, '_blank');
+  }
+
+  const links = !pages
+    ? []
+    : pages.map(page => {
+        const name = localeUtils.getLocaleValue(page.pyLabel, '', localeReference);
+        return {
+          text: name,
+          name,
+          icon: page.pxPageViewIcon.replace('pi pi-', ''),
+          active: page.pyRuleName === activeTab,
+          onClick: () =>
+            !page.pyURLContent || page.pyURLContent === ''
+              ? showPage(page.pyRuleName, page.pyClassName)
+              : openURL(page.pyURLContent)
+        };
+      });
+
   if (pConn.hasChildren()) {
     // const theChildren = pConn.getChildren();
     // const mapChildCompNames = theChildren.map((child) => { return child.getPConnect().getComponentName()});
-
     // debugging/investigation help
     // console.log(`AppShell has children: ${theChildren.length}`);
     // console.log(`--> ${mapChildCompNames.map((name) => {return name;})}`);
   }
 
-  return (
+  if (portalTemplate === 'wss') {
+    return (
+      <div id='AppShell'>
+        <WssNavBar
+          portalName={portalName}
+          imageSrc={iconURL}
+          fullImageSrc={fullIconURL}
+          appName={localeUtils.getLocaleValue(
+            appNameToDisplay,
+            '',
+            `${portalClass}!PORTAL!${envPortalName}`.toUpperCase()
+          )}
+          appInfo={{
+            imageSrc: iconURL,
+            appName: localeUtils.getLocaleValue(
+              appNameToDisplay,
+              '',
+              `${portalClass}!PORTAL!${envPortalName}`.toUpperCase()
+            ),
+            onClick: links[0] && links[0].onClick ? links[0].onClick : undefined
+          }}
+          navLinks={links.filter((link, index) => {
+            return index !== 0;
+          })}
+          operator={getOperator()}
+          navDisplayOptions={navDisplayOptions}
+        />
+        <div className={classes.wsscontent}>{children}</div>
+      </div>
 
-    <NavContext.Provider value={{open, setOpen}}>
-      <div id="AppShell" className={classes.root}>
-        <NavBar pConn={getPConnect()} appName={appNameToDisplay} pages={pages} caseTypes={caseTypes}></NavBar>
-        <div className={classes.content}>
-          {children}
-        </div>
+    );
+  }
+
+  return (
+    <NavContext.Provider value={{ open, setOpen }}>
+      <div id='AppShell' className={classes.root}>
+        <NavBar
+          pConn={getPConnect()}
+          appName={appNameToDisplay}
+          pages={pages}
+          caseTypes={caseTypes}
+        ></NavBar>
+        <div className={classes.content}>{children}</div>
       </div>
     </NavContext.Provider>
   );
@@ -86,12 +218,12 @@ export default function AppShell(props) {
 AppShell.defaultProps = {
   pages: [],
   caseTypes: [],
-  children: [],
+  children: []
 };
 AppShell.propTypes = {
-  showAppName: PropTypes.bool/* .isRequired */,
+  showAppName: PropTypes.bool /* .isRequired */,
   pages: PropTypes.arrayOf(PropTypes.object),
   caseTypes: PropTypes.arrayOf(PropTypes.object),
   children: PropTypes.arrayOf(PropTypes.node),
-  getPConnect: PropTypes.func.isRequired,
+  getPConnect: PropTypes.func.isRequired
 };

package/lib/template/BannerPage/BannerPage.tsx

@@ -0,0 +1,61 @@
+import { useMemo, Children } from 'react';
+import PropTypes from 'prop-types';
+import Banner from '@pega/react-sdk-components/lib/components/designSystemExtension/Banner';
+import React from 'react';
+
+/*
+ * BannerPage template.
+ */
+export default function BannerPage(props) {
+  const {
+    children,
+    layout,
+    heading,
+    message,
+    imageTheme,
+    backgroundImage,
+    backgroundColor,
+    tintImage
+  } = props;
+
+  const childArray = useMemo(() => {
+    return Children.toArray(children);
+  }, [children]);
+
+  return (
+    <Banner
+      variant={layout}
+      a={childArray[0]}
+      b={childArray[1]}
+      banner={{
+        variant: imageTheme,
+        backgroundColor,
+        title: heading,
+        message,
+        backgroundImage,
+        tintImage
+      }}
+    />
+  );
+}
+
+BannerPage.propTypes = {
+  children: PropTypes.arrayOf(PropTypes.node).isRequired,
+  layout: PropTypes.string,
+  heading: PropTypes.string,
+  message: PropTypes.string,
+  imageTheme: PropTypes.string,
+  backgroundImage: PropTypes.string,
+  backgroundColor: PropTypes.string,
+  tintImage: PropTypes.bool
+};
+
+BannerPage.defaultProps = {
+  layout: 'two-column',
+  heading: '',
+  message: '',
+  imageTheme: 'light',
+  backgroundImage: '',
+  backgroundColor: '',
+  tintImage: false
+};

package/lib/template/BannerPage/index.tsx

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

package/lib/template/Confirmation/Confirmation.tsx

@@ -7,11 +7,25 @@ import React from 'react';
 import { getToDoAssignments } from '@pega/react-sdk-components/lib/components/infra/Containers/FlowContainer/helpers';
 import ToDo from '@pega/react-sdk-components/lib/components/widget/ToDo';
 import Details from '@pega/react-sdk-components/lib/components/template/Details/Details';
-import { Button } from '@material-ui/core';
+import { Button, Card, makeStyles } from '@material-ui/core';
 
 declare const PCore;
 
+const useStyles = makeStyles(theme => ({
+  root: {
+    paddingRight: theme.spacing(1),
+    paddingLeft: theme.spacing(1),
+    paddingTop: theme.spacing(1),
+    paddingBottom: theme.spacing(1),
+    marginRight: theme.spacing(1),
+    marginLeft: theme.spacing(1),
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(1)
+  }
+}));
+
 export default function Confirmation(props) {
+  const classes = useStyles();
   const CONSTS = PCore.getConstants();
   const [showConfirmView, setShowConfirmView] = useState(true);
   const { showTasks, getPConnect, datasource } = props;
@@ -38,8 +52,8 @@ export default function Confirmation(props) {
   const detailProps = { ...props, showLabel: false };
   const showDetails = detailProps?.children?.[0]?.props?.getPConnect()?.getChildren()?.length > 0;
   return showConfirmView ? (
-    <Fragment>
-      <h2>{props.showLabel ? props.label : ''}</h2>
+    <Card className={classes.root}>
+      <h2 id='confirm-label'>{props.showLabel ? props.label : ''}</h2>
       {showDetails ? <Details {...detailProps} /> : undefined}
       {showTasks ? (
         toDoList && toDoList.length > 0 ? (
@@ -49,6 +63,7 @@ export default function Confirmation(props) {
             getPConnect={getPConnect}
             type={CONSTS.TODO}
             headerText='Open Tasks'
+            isConfirm
           />
         ) : undefined
       ) : undefined}
@@ -57,15 +72,18 @@ export default function Confirmation(props) {
           Done
         </Button>
       </div>
-    </Fragment>
+    </Card>
   ) : toDoList && toDoList.length > 0 ? (
-    <ToDo
-      {...props}
-      datasource={{ source: toDoList }}
-      getPConnect={getPConnect}
-      type={CONSTS.TODO}
-      headerText='Tasks'
-    />
+    <Card className={classes.root}>
+      <ToDo
+        {...props}
+        datasource={{ source: toDoList }}
+        getPConnect={getPConnect}
+        type={CONSTS.TODO}
+        headerText='Tasks'
+        isConfirm
+      />
+    </Card>
   ) : null;
 }
 

package/lib/template/WssNavBar/WssNavBar.css

@@ -0,0 +1,5 @@
+.link-style {
+  color: white !important;
+  text-transform: capitalize !important;
+  font-size: 1rem !important;
+}

package/lib/template/WssNavBar/WssNavBar.tsx

@@ -0,0 +1,141 @@
+import React, { useState } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import AppBar from '@material-ui/core/AppBar';
+import Box from '@material-ui/core/Box';
+import Toolbar from '@material-ui/core/Toolbar';
+import Container from '@material-ui/core/Container';
+import { IconButton, Menu, MenuItem, Typography } from '@material-ui/core';
+import { Button } from '@material-ui/core';
+import Avatar from '@material-ui/core/Avatar';
+import MenuIcon from '@material-ui/icons/Menu';
+import { logout } from '@pega/react-sdk-components/lib/components/helpers/authManager';
+import './WssNavBar.css';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    display: 'flex'
+  },
+  content: {
+    flexGrow: 1,
+    height: '100vh',
+    marginLeft: theme.spacing(2),
+    marginRight: theme.spacing(2)
+  },
+  appListLogo: {
+    width: '3.6rem'
+  },
+  appName: {
+    color: 'white',
+    marginLeft: theme.spacing(2),
+    marginRight: theme.spacing(4),
+    fontSize: '1.5rem'
+  }
+}));
+
+export default function WssNavBar(props) {
+  const { appInfo, navLinks, operator, navDisplayOptions } = props;
+  const { alignment } = navDisplayOptions;
+  const classes = useStyles();
+
+  const [anchorElNav, setAnchorElNav] = useState<null | HTMLElement>(null);
+  const [anchorElUser, setAnchorElUser] = useState<null | HTMLElement>(null);
+
+  const handleOpenNavMenu = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorElNav(event.currentTarget);
+  };
+  const handleOpenUserMenu = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorElUser(event.currentTarget);
+  };
+
+  const handleCloseNavMenu = () => {
+    setAnchorElNav(null);
+  };
+
+  const handleCloseUserMenu = () => {
+    setAnchorElUser(null);
+  };
+
+  return (
+    <div id='NavBar'>
+      <AppBar position='static' color='primary'>
+        <Container maxWidth='xl'>
+          <Toolbar disableGutters>
+            <Button style={{ textTransform: 'capitalize' }} onClick={appInfo.onClick}>
+              <img src={appInfo.imageSrc} className={classes.appListLogo} />
+              <span className={classes.appName}>{appInfo.appName}</span>
+            </Button>
+            <Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}>
+              <IconButton
+                size='small'
+                aria-label='account of current user'
+                aria-controls='menu-appbar'
+                aria-haspopup='true'
+                onClick={handleOpenNavMenu}
+                color='inherit'
+              >
+                <MenuIcon />
+              </IconButton>
+              <Menu
+                id='menu-appbar'
+                anchorEl={anchorElNav}
+                anchorOrigin={{
+                  vertical: 'bottom',
+                  horizontal: 'left'
+                }}
+                keepMounted
+                transformOrigin={{
+                  vertical: 'top',
+                  horizontal: 'left'
+                }}
+                open={Boolean(anchorElNav)}
+                onClose={handleCloseNavMenu}
+              >
+                {navLinks.map(link => (
+                  <MenuItem key={link.text} onClick={link.onClick}>
+                    <Typography>{link.text}</Typography>
+                  </MenuItem>
+                ))}
+              </Menu>
+            </Box>
+
+            <Box
+              sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}
+              style={{ justifyContent: alignment }}
+            >
+              {navLinks.map(link => (
+                <Button className='link-style' key={link.text} onClick={link.onClick}>
+                  {link.text}
+                </Button>
+              ))}
+            </Box>
+
+            <Box sx={{ flexGrow: 0 }}>
+              <IconButton onClick={handleOpenUserMenu}>
+                <Avatar>{operator.currentUserInitials}</Avatar>
+              </IconButton>
+              <Menu
+                id='menu-appbar'
+                anchorEl={anchorElUser}
+                anchorOrigin={{
+                  vertical: 'top',
+                  horizontal: 'right'
+                }}
+                keepMounted
+                transformOrigin={{
+                  vertical: 'top',
+                  horizontal: 'right'
+                }}
+                open={Boolean(anchorElUser)}
+                onClose={handleCloseUserMenu}
+              >
+                <MenuItem onClick={logout}>
+                  <Typography>Logout</Typography>
+                </MenuItem>
+              </Menu>
+            </Box>
+          </Toolbar>
+        </Container>
+      </AppBar>
+    </div>
+  );
+}

package/lib/template/WssNavBar/index.tsx

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

package/lib/widget/Attachment/Attachment.tsx

@@ -421,17 +421,16 @@ export default function Attachment(props) {
           }
         );
       }
-
-      PCore.getPubSubUtils().subscribe(
-        PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.ASSIGNMENT_SUBMISSION,
-        resetAttachmentStoredState,
-        caseID
-      );
-      return () => {
-        PCore.getPubSubUtils().unsubscribe(PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.ASSIGNMENT_SUBMISSION, caseID);
-      };
     }
-  }
+    }
+    PCore.getPubSubUtils().subscribe(
+      PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.ASSIGNMENT_SUBMISSION,
+      resetAttachmentStoredState,
+      caseID
+    );
+    return () => {
+      PCore.getPubSubUtils().unsubscribe(PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.ASSIGNMENT_SUBMISSION, caseID);
+    };
   }, []);
 
   let content = (

package/lib/widget/ToDo/ToDo.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable no-shadow */
 /* eslint-disable @typescript-eslint/no-shadow */
-import React, { useState } from 'react';
+import React, { Fragment, useState } from 'react';
 import PropTypes from 'prop-types';
 import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
 import {
@@ -30,7 +30,7 @@ import './ToDo.css';
 
 declare const PCore: any;
 
-const isChildCase = (assignment) => {
+const isChildCase = assignment => {
   return assignment.isChild;
 };
 
@@ -60,11 +60,17 @@ const useStyles = makeStyles(theme => ({
   avatar: {
     backgroundColor: theme.palette.primary.light,
     color: theme.palette.getContrastText(theme.palette.primary.light)
+  },
+  todoWrapper: {
+    borderLeft: '6px solid',
+    borderLeftColor: theme.palette.primary.light,
+    padding: theme.spacing(1),
+    margin: theme.spacing(1)
   }
 }));
 
 export default function ToDo(props) {
-  const { datasource, getPConnect, headerText, showTodoList, myWorkList, type } = props;
+  const { datasource, getPConnect, headerText, showTodoList, myWorkList, type, isConfirm } = props;
 
   const CONSTS = PCore.getConstants();
 
@@ -203,6 +209,47 @@ export default function ToDo(props) {
     );
   };
 
+  const toDoContent = (
+    <>
+      {showTodoList && (
+        <CardHeader
+          title={
+            <Badge badgeContent={assignmentCount} color='primary'>
+              <Typography variant='h6'>{headerText}&nbsp;&nbsp;&nbsp;</Typography>
+            </Badge>
+          }
+        ></CardHeader>
+      )}
+      <List>
+        {assignments.map(assignment => (
+          <>
+            <div className='psdk-todo-avatar-header'>
+              <Avatar className={classes.avatar} style={{ marginRight: '16px' }}>
+                {currentUserInitials}
+              </Avatar>
+              <div style={{ display: 'block' }}>
+                <Typography variant='h6'>{assignment?.name}</Typography>
+                {`Task in ${renderTaskId(
+                  type,
+                  getPConnect,
+                  showTodoList,
+                  assignment
+                )} \u2022  Urgency  ${getPriority(assignment)}`}
+              </div>
+              {!isConfirm && (
+                <div style={{ marginLeft: 'auto' }}>
+                  <IconButton onClick={() => clickGo(assignment)}>
+                    <ArrowForwardIosOutlinedIcon />
+                  </IconButton>
+                </div>
+              )}
+            </div>
+          </>
+        ))}
+      </List>
+    </>
+  );
+
   return (
     <React.Fragment>
       {type === CONSTS.WORKLIST && (
@@ -230,72 +277,33 @@ export default function ToDo(props) {
                     primary={getAssignmentName(assignment)}
                     secondary={getListItemComponent(assignment)}
                   />
-                  {type === CONSTS.WORKLIST && (
-                    <ListItemSecondaryAction>
-                      <IconButton onClick={() => clickGo(assignment)}>
-                        <ArrowForwardIosOutlinedIcon />
-                      </IconButton>
-                    </ListItemSecondaryAction>
-                  )}
+                  <ListItemSecondaryAction>
+                    <IconButton onClick={() => clickGo(assignment)}>
+                      <ArrowForwardIosOutlinedIcon />
+                    </IconButton>
+                  </ListItemSecondaryAction>
                 </ListItem>
               ))}
             </List>
           </CardContent>
-          {assignmentCount > 3 && (
-            <Box display='flex' justifyContent='center'>
-              {bShowMore ? (
-                <Button color='primary' onClick={_showMore}>
-                  Show more
-                </Button>
-              ) : (
-                <Button onClick={_showLess}>Show less</Button>
-              )}
-            </Box>
-          )}
         </Card>
       )}
 
-      {type === CONSTS.TODO && (
-        <>
-          {showTodoList && (
-            <>
-              <Badge badgeContent={assignmentCount} color='primary'>
-                <Typography variant='h6'>{headerText}&nbsp;&nbsp;&nbsp;</Typography>
-              </Badge>
-            </>
-          )}
-          <List>
-            {assignments.map(assignment => (
-              <>
-                <div className='psdk-todo-avatar-header'>
-                  <Avatar className={classes.avatar} style={{ marginRight: '16px' }}>
-                    {currentUserInitials}
-                  </Avatar>
-                  <div style={{ display: 'block' }}>
-                    <Typography variant='h6'>{assignment?.name}</Typography>
-                    {`Task in ${renderTaskId(
-                      type,
-                      getPConnect,
-                      showTodoList,
-                      assignment
-                    )} \u2022  Urgency  ${getPriority(assignment)}`}
-                  </div>
-                </div>
-              </>
-            ))}
-          </List>
-          {assignmentCount > 3 && (
-            <Box display='flex' justifyContent='center'>
-              {bShowMore ? (
-                <Button color='primary' onClick={_showMore}>
-                  Show more
-                </Button>
-              ) : (
-                <Button onClick={_showLess}>Show less</Button>
-              )}
-            </Box>
+      {type === CONSTS.TODO && !isConfirm && (
+        <Card className={classes.todoWrapper}>{toDoContent}</Card>
+      )}
+      {type === CONSTS.TODO && isConfirm && <Fragment>{toDoContent}</Fragment>}
+
+      {assignmentCount > 3 && (
+        <Box display='flex' justifyContent='center'>
+          {bShowMore ? (
+            <Button color='primary' onClick={_showMore}>
+              Show more
+            </Button>
+          ) : (
+            <Button onClick={_showLess}>Show less</Button>
           )}
-        </>
+        </Box>
       )}
 
       <Snackbar
@@ -328,8 +336,9 @@ ToDo.propTypes = {
   type: PropTypes.string,
   // pageMessages: PropTypes.arrayOf(PropTypes.any),
   // eslint-disable-next-line react/no-unused-prop-types
-  context: PropTypes.string
+  context: PropTypes.string,
   // hideActionButtons: PropTypes.bool
+  isConfirm: PropTypes.bool
 };
 
 ToDo.defaultProps = {
@@ -343,6 +352,7 @@ ToDo.defaultProps = {
   // target: "",
   type: 'worklist',
   // pageMessages: null,
-  context: ''
+  context: '',
   // hideActionButtons: false
+  isConfirm: false
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/react-sdk-overrides",
-  "version": "0.23.20",
+  "version": "0.23.21",
   "description": "React SDK - Code for overriding components",
   "_filesComment": "During packing, npm ignores everything NOT in the files list",
   "files": [