@pega/react-sdk-overrides 0.23.19 → 0.23.21

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

@@ -0,0 +1,101 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable no-unused-vars */
+/* eslint-disable no-nested-ternary */
+import { Fragment, useState } from 'react';
+import PropTypes from 'prop-types';
+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, 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;
+  // Get the inherited props from the parent to determine label settings
+  // Not using whatsNext at the moment, need to figure out the use of it
+  const whatsNext = datasource?.source;
+  const items = whatsNext.length > 0 ? whatsNext.map(item => item.label) : '';
+  const activeContainerItemID = PCore.getContainerUtils().getActiveContainerItemName(
+    getPConnect().getTarget()
+  );
+  const rootInfo = PCore.getContainerUtils().getContainerItemData(
+    getPConnect().getTarget(),
+    activeContainerItemID
+  );
+  const onConfirmViewClose = () => {
+    setShowConfirmView(false);
+    PCore.getPubSubUtils().publish(
+      PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.CLOSE_CONFIRM_VIEW,
+      rootInfo
+    );
+  };
+  const todoProps = { ...props, renderTodoInConfirm: true };
+  const toDoList = getToDoAssignments(getPConnect());
+  const detailProps = { ...props, showLabel: false };
+  const showDetails = detailProps?.children?.[0]?.props?.getPConnect()?.getChildren()?.length > 0;
+  return showConfirmView ? (
+    <Card className={classes.root}>
+      <h2 id='confirm-label'>{props.showLabel ? props.label : ''}</h2>
+      {showDetails ? <Details {...detailProps} /> : undefined}
+      {showTasks ? (
+        toDoList && toDoList.length > 0 ? (
+          <ToDo
+            {...todoProps}
+            datasource={{ source: toDoList }}
+            getPConnect={getPConnect}
+            type={CONSTS.TODO}
+            headerText='Open Tasks'
+            isConfirm
+          />
+        ) : undefined
+      ) : undefined}
+      <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+        <Button variant='contained' color='primary' onClick={onConfirmViewClose}>
+          Done
+        </Button>
+      </div>
+    </Card>
+  ) : toDoList && toDoList.length > 0 ? (
+    <Card className={classes.root}>
+      <ToDo
+        {...props}
+        datasource={{ source: toDoList }}
+        getPConnect={getPConnect}
+        type={CONSTS.TODO}
+        headerText='Tasks'
+        isConfirm
+      />
+    </Card>
+  ) : null;
+}
+
+Confirmation.defaultProps = {
+  datasource: undefined,
+  label: '',
+  showLabel: true
+};
+
+Confirmation.propTypes = {
+  getPConnect: PropTypes.func.isRequired,
+  datasource: PropTypes.objectOf(PropTypes.any),
+  label: PropTypes.string,
+  showLabel: PropTypes.bool
+};

package/lib/template/Confirmation/config-ext.json

@@ -0,0 +1,12 @@
+{
+  "name": "Confirmation",
+  "label": "Confirmation",
+  "description": "Confirmation template",
+  "type": "Template",
+  "subtype": "CASE",
+  "icon": "confirm-view.svg",
+  "hideTemplateEdit": true,
+  "hideViewName": true,
+  "properties": [
+  ]
+}

package/lib/template/Confirmation/index.tsx

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

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.css

@@ -34,7 +34,7 @@
   min-width: 2.5rem;
   min-height: 2.5rem;
   max-width: 2.5rem;
-  max-height: 2.5rem; 
+  max-height: 2.5rem;
   border-radius: 50%;
   justify-content: center;
   align-items: center;
@@ -47,8 +47,8 @@
 }
 
 .psdk-todo-assignment {
-  display: inline-flex; 
-  width:100%; 
+  display: inline-flex;
+  width:100%;
   padding: 0.625rem 0rem;
 }
 
@@ -77,7 +77,7 @@
 }
 
 .psdk-todo-card {
-  width: 100%; 
+  width: 100%;
   padding-left: 0.625rem;
 }
 
@@ -85,3 +85,9 @@
   width: 100%;
   text-align: center;
 }
+
+.psdk-todo-avatar-header{
+  display: flex;
+  align-items: center;
+  padding: 16px;
+}