@pega/react-sdk-overrides 0.23.20 → 0.23.22

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

@@ -15,7 +15,7 @@ import StoreContext from '@pega/react-sdk-components/lib/bridge/Context/StoreCon
 import DayjsUtils from '@date-io/dayjs';
 import { MuiPickersUtilsProvider } from '@material-ui/pickers';
 
-import { addContainerItem, getToDoAssignments } from './helpers';
+import { addContainerItem, getToDoAssignments, showBanner } from './helpers';
 
 declare const PCore;
 
@@ -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;
     }
@@ -312,7 +312,6 @@ export default function FlowContainer(props) {
       }
     }
 
-
     // if have caseMessage show message and end
     const theCaseMessages = thePConn.getValue('caseMessages');
 
@@ -337,75 +336,75 @@ export default function FlowContainer(props) {
     }
 
     // this check in routingInfo, mimic React to check and get the internals of the
-      // flowContainer and force updates to pConnect/redux
-      if (routingInfo && loadingInfo !== undefined) {
-        // debugging/investigation help
-        // console.log(`${thePConn.getComponentName()}: >>routingInfo: ${JSON.stringify(routingInfo)}`);
-
-        const currentOrder = routingInfo.accessedOrder;
-        const currentItems = routingInfo.items;
-        const type = routingInfo.type;
-        if (currentOrder && currentItems) {
-          // JA - making more similar to React version
-          const key = currentOrder[currentOrder.length - 1];
-
-          // save off itemKey to be used for finishAssignment, etc.
-          // debugger;
-          setItemKey(key);
-
-          if (
-            currentOrder.length > 0 &&
-            currentItems[key] &&
-            currentItems[key].view &&
-            type === 'single' &&
-            !Utils.isEmptyObject(currentItems[key].view)
-          ) {
-            const currentItem = currentItems[key];
-            const rootView = currentItem.view;
-            const { context } = rootView.config;
-            const config = { meta: rootView };
-
-            config['options'] = {
-              context: currentItem.context,
-              pageReference: context || localPConn.getPageReference(),
-              hasForm: true,
-              isFlowContainer: true,
-              containerName: localPConn.getContainerName(),
-              containerItemName: key,
-              parentPageReference: localPConn.getPageReference()
-            };
-
-            const configObject = PCore.createPConnect(config);
-
-            // Since we're setting an array, need to add in an appropriate key
-            //  to remove React warning.
-            configObject['key'] = config['options'].parentPageReference;
-
-            // keep track of these changes
-            const theNewChildren: Array<Object> = [];
-            theNewChildren.push(configObject);
-            setArNewChildren(theNewChildren);
-
-            // JEA - adapted from Constellation DX Components FlowContainer since we want to render children that are React components
-            const root = createElement(createPConnectComponent(), configObject);
-            setArNewChildrenAsReact([root]);
-
-            const oWorkItem = configObject.getPConnect(); // was theNewChildren[0].getPConnect()
-            const oWorkData = oWorkItem.getDataObject();
-
-            // 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);
-            }
+    // flowContainer and force updates to pConnect/redux
+    if (routingInfo && loadingInfo !== undefined) {
+      // debugging/investigation help
+      // console.log(`${thePConn.getComponentName()}: >>routingInfo: ${JSON.stringify(routingInfo)}`);
+
+      const currentOrder = routingInfo.accessedOrder;
+      const currentItems = routingInfo.items;
+      const type = routingInfo.type;
+      if (currentOrder && currentItems) {
+        // JA - making more similar to React version
+        const key = currentOrder[currentOrder.length - 1];
+
+        // save off itemKey to be used for finishAssignment, etc.
+        // debugger;
+        setItemKey(key);
+
+        if (
+          currentOrder.length > 0 &&
+          currentItems[key] &&
+          currentItems[key].view &&
+          type === 'single' &&
+          !Utils.isEmptyObject(currentItems[key].view)
+        ) {
+          const currentItem = currentItems[key];
+          const rootView = currentItem.view;
+          const { context } = rootView.config;
+          const config = { meta: rootView };
+
+          config['options'] = {
+            context: currentItem.context,
+            pageReference: context || localPConn.getPageReference(),
+            hasForm: true,
+            isFlowContainer: true,
+            containerName: localPConn.getContainerName(),
+            containerItemName: key,
+            parentPageReference: localPConn.getPageReference()
+          };
+
+          const configObject = PCore.createPConnect(config);
+
+          // Since we're setting an array, need to add in an appropriate key
+          //  to remove React warning.
+          configObject['key'] = config['options'].parentPageReference;
+
+          // keep track of these changes
+          const theNewChildren: Array<Object> = [];
+          theNewChildren.push(configObject);
+          setArNewChildren(theNewChildren);
+
+          // JEA - adapted from Constellation DX Components FlowContainer since we want to render children that are React components
+          const root = createElement(createPConnectComponent(), configObject);
+          setArNewChildrenAsReact([root]);
+
+          const oWorkItem = configObject.getPConnect(); // was theNewChildren[0].getPConnect()
+          const oWorkData = oWorkItem.getDataObject();
+
+          // 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);
           }
         }
       }
+    }
   }, [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;
@@ -413,6 +412,8 @@ export default function FlowContainer(props) {
     instructionText = '';
   }
 
+  const bShowBanner = showBanner(getPConnect);
+
   return (
     <div style={{ textAlign: 'left' }} id={buildName} className='psdk-flow-container-top'>
       {!bShowConfirm &&
@@ -465,7 +466,7 @@ export default function FlowContainer(props) {
           <Alert severity='success'>{caseMessages}</Alert>
         </div>
       )}
-      {bShowConfirm && <Card className={classes.root}>{arNewChildrenAsReact}</Card>}
+      {bShowConfirm && bShowBanner && <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;
+}