@pega/react-sdk-overrides 24.1.10 → 24.2.11

package/lib/infra/DashboardFilter/filterUtils.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable prefer-template */
 /** This file contains various utility methods to generate filter components, regionLayout data, filter expressions, etc.  */
 
-import { Grid, Link } from '@material-ui/core';
+import { Grid, Link } from '@mui/material';
 
 import DashboardFilter from './DashboardFilter';
 
@@ -46,7 +46,6 @@ export const createFilterComponent = (getPConnect, filterMeta, index) => {
   }
   let propInfo: any = PCore.getMetadataUtils().getPropertyMetadata(cleanedName, filterMeta.config.ruleClass);
   if (!propInfo) {
-    // @ts-ignore - PCore.getMetadataUtils().getPropertyMetadata - An argument for 'currentClassID' was not provided.
     propInfo = PCore.getMetadataUtils().getPropertyMetadata(cleanedName);
   }
   const { type: propertyType } = propInfo || { type: 'Text' };
@@ -78,13 +77,13 @@ export const buildFilterComponents = (getPConnect, allFilters) => {
   const filterComponents = allFilters.children.map((filter, index) => createFilterComponent(getPConnect, filter, index));
   if (filterComponents && filterComponents.length > 0) {
     filterComponents.push(
-      <Grid>
+      <Grid style={{ display: 'flex', alignItems: 'center' }}>
         <Link
           style={{ cursor: 'pointer' }}
           onClick={() => {
-            // @ts-ignore - second parameter “payload” for publish method should be optional
             PCore.getPubSubUtils().publish(PCore.getConstants().PUB_SUB_EVENTS.EVENT_DASHBOARD_FILTER_CLEAR_ALL);
           }}
+          underline='hover'
         >
           Clear All
         </Link>

package/lib/infra/DeferLoad/DeferLoad.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, createElement } from 'react';
-import { Box, Card, CircularProgress } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import { Box, Card, CircularProgress } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
 
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 
@@ -12,6 +12,7 @@ interface DeferLoadProps extends PConnProps {
   isChildDeferLoad?: boolean;
   isTab: boolean;
   deferLoadId: string;
+  lastUpdateCaseTime: any;
 }
 
 //
@@ -34,7 +35,7 @@ const useStyles = makeStyles(theme => ({
 }));
 
 export default function DeferLoad(props: DeferLoadProps) {
-  const { getPConnect, name, deferLoadId, isTab } = props;
+  const { getPConnect, name, deferLoadId, isTab, lastUpdateCaseTime } = props;
   const [content, setContent] = useState<any>(null);
   const [isLoading, setLoading] = useState(true);
   const [currentLoadedAssignment, setCurrentLoadedAssignment] = useState('');
@@ -69,8 +70,8 @@ export default function DeferLoad(props: DeferLoadProps) {
   const getViewOptions = () => ({
     viewContext: resourceType,
     pageClass: loadViewCaseID ? '' : (pConnect.getDataObject('') as any).pyPortal.classID, // 2nd arg empty string until typedef allows optional
-    container: isContainerPreview ? 'preview' : null,
-    containerName: isContainerPreview ? 'preview' : null,
+    container: isContainerPreview ? 'preview' : undefined,
+    containerName: isContainerPreview ? 'preview' : undefined,
     updateData: isContainerPreview
   });
 
@@ -95,7 +96,7 @@ export default function DeferLoad(props: DeferLoadProps) {
         }
       };
       const configObject = PCore.createPConnect(config);
-      configObject.getPConnect().setInheritedProp('displayMode', 'LABELS_LEFT');
+      configObject.getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY');
       setContent(createElement(createPConnectComponent(), configObject));
       if (deferLoadId) {
         PCore.getDeferLoadManager().stop(deferLoadId, getPConnect().getContextName());
@@ -113,7 +114,6 @@ export default function DeferLoad(props: DeferLoadProps) {
         getPConnect()
           .getActionsApi()
           .showData(name, dataContext, dataContextParameters, {
-            // @ts-ignore - Type 'boolean' is not assignable to type 'string'
             skipSemanticUrl: true,
             // @ts-ignore
             isDeferLoaded: true
@@ -145,7 +145,7 @@ export default function DeferLoad(props: DeferLoadProps) {
           console.log(`deferload: ${error}`);
         });
     }
-  }, [name, getPConnect, currentLoadedAssignment]);
+  }, [name, getPConnect, currentLoadedAssignment, lastUpdateCaseTime]);
   /* TODO Cosmos need to handle for now added a wrapper div with pos relative */
   let deferLoadContent;
   if (isLoading) {

package/lib/infra/MultiStep/MultiStep.tsx

@@ -11,7 +11,7 @@ interface MultiStepProps extends PConnProps {
   actionButtons: any[];
   onButtonPress: any;
   bIsVertical: boolean;
-  arNavigationSteps: any[];
+  arNavigationSteps: any;
 }
 
 export default function MultiStep(props: PropsWithChildren<MultiStepProps>) {
@@ -21,6 +21,12 @@ export default function MultiStep(props: PropsWithChildren<MultiStepProps>) {
   const { getPConnect, children, itemKey = '', actionButtons, onButtonPress } = props;
   const { bIsVertical, arNavigationSteps } = props;
 
+  let currentStep = arNavigationSteps.find(({ visited_status: vs }) => vs === 'current');
+  if (!currentStep) {
+    const lastActiveStepIndex = arNavigationSteps.findLastIndex(({ visited_status: vs }) => vs === 'success');
+    currentStep = arNavigationSteps[lastActiveStepIndex >= 0 ? lastActiveStepIndex : 0];
+  }
+
   // const svgCurrent = Utils.getImageSrc("circle-solid", Utils.getSDKStaticConentUrl());
   // const svgNotCurrent = Utils.getImageSrc("circle-solid", Utils.getSDKStaticConentUrl());
 
@@ -48,16 +54,16 @@ export default function MultiStep(props: PropsWithChildren<MultiStepProps>) {
     return 'psdk-vertical-step-body';
   }
 
-  function _getHIconClass(status): string {
-    if (status === 'current') {
+  function _getHIconClass(step): string {
+    if (step.ID === currentStep?.ID) {
       return 'psdk-horizontal-step-icon-selected';
     }
 
     return 'psdk-horizontal-step-icon';
   }
 
-  function _getHLabelClass(status): string {
-    if (status === 'current') {
+  function _getHLabelClass(step): string {
+    if (step.ID === currentStep?.ID) {
       return 'psdk-horizontal-step-label-selected';
     }
 
@@ -65,12 +71,7 @@ export default function MultiStep(props: PropsWithChildren<MultiStepProps>) {
   }
 
   function _showHLine(index: number): boolean {
-    // eslint-disable-next-line sonarjs/prefer-single-boolean-return
-    if (index < arNavigationSteps.length - 1) {
-      return true;
-    }
-
-    return false;
+    return index < arNavigationSteps.length - 1;
   }
 
   function buttonPress(sAction: string, sButtonType: string) {
@@ -138,12 +139,12 @@ export default function MultiStep(props: PropsWithChildren<MultiStepProps>) {
               return (
                 <React.Fragment key={mainStep.actionID}>
                   <div className='psdk-horizontal-step-header'>
-                    <div className={_getHIconClass(mainStep.visited_status)}>
+                    <div className={_getHIconClass(mainStep)}>
                       <div className='psdk-horizontal-step-icon-content'>
                         <span>{index + 1}</span>
                       </div>
                     </div>
-                    <div className={_getHLabelClass(mainStep.visited_status)}>
+                    <div className={_getHLabelClass(mainStep)}>
                       <div className='psdk-horizontal-step-text-label' id='selected-label'>
                         {mainStep.name}
                       </div>
@@ -176,7 +177,7 @@ export default function MultiStep(props: PropsWithChildren<MultiStepProps>) {
                     ))}
                   </ul>
                 )}
-                {!mainStep?.steps && mainStep.visited_status === 'current' && (
+                {!mainStep?.steps && mainStep.ID === currentStep?.ID && (
                   <AssignmentCard getPConnect={getPConnect} itemKey={itemKey} actionButtons={actionButtons} onButtonPress={buttonPress}>
                     {children}
                   </AssignmentCard>

package/lib/infra/NavBar/NavBar.css

@@ -165,4 +165,5 @@
 
 .scrollable {
   overflow-y: scroll !important;
+  min-height: 200px !important;
 }

package/lib/infra/NavBar/NavBar.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
-import { makeStyles, useTheme } from '@material-ui/core/styles';
+import { useTheme } from '@mui/material/styles';
+import makeStyles from '@mui/styles/makeStyles';
 import clsx from 'clsx';
 
 import {
@@ -15,19 +16,22 @@ import {
   Menu,
   MenuItem,
   Typography
-} from '@material-ui/core';
-import PersonOutlineIcon from '@material-ui/icons/PersonOutlineOutlined';
-import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
-import ChevronRightIcon from '@material-ui/icons/ChevronRight';
-import FlagOutlinedIcon from '@material-ui/icons/FlagOutlined';
-import HomeOutlinedIcon from '@material-ui/icons/HomeOutlined';
-import ExpandLess from '@material-ui/icons/ExpandLess';
-import ExpandMore from '@material-ui/icons/ExpandMore';
-import AddIcon from '@material-ui/icons/Add';
-import WorkOutlineIcon from '@material-ui/icons/WorkOutline';
-import ClearOutlinedIcon from '@material-ui/icons/ClearOutlined';
-import ArrowBackIcon from '@material-ui/icons/ArrowBack';
-import useMediaQuery from '@material-ui/core/useMediaQuery';
+} from '@mui/material';
+import PersonOutlineIcon from '@mui/icons-material/PersonOutlineOutlined';
+import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import FlagOutlinedIcon from '@mui/icons-material/FlagOutlined';
+import HomeOutlinedIcon from '@mui/icons-material/HomeOutlined';
+import TabletAndroidOutlineIcon from '@mui/icons-material/TabletAndroidOutlined';
+import AirportShuttleOutlinedIcon from '@mui/icons-material/AirportShuttleOutlined';
+import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
+import ExpandLess from '@mui/icons-material/ExpandLess';
+import ExpandMore from '@mui/icons-material/ExpandMore';
+import AddIcon from '@mui/icons-material/Add';
+import WorkOutlineIcon from '@mui/icons-material/WorkOutline';
+import ClearOutlinedIcon from '@mui/icons-material/ClearOutlined';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import useMediaQuery from '@mui/material/useMediaQuery';
 import { logout } from '@pega/auth/lib/sdk-auth-manager';
 
 import { useNavBar } from '@pega/react-sdk-components/lib/components/helpers/reactContextHelpers';
@@ -48,7 +52,11 @@ interface NavBarProps extends PConnProps {
 const iconMap = {
   'pi pi-headline': <HomeOutlinedIcon fontSize='large' />,
   'pi pi-flag-solid': <FlagOutlinedIcon fontSize='large' />,
-  'pi pi-home-solid': <HomeOutlinedIcon fontSize='large' />
+  'pi pi-home-solid': <HomeOutlinedIcon fontSize='large' />,
+  'pi pi-tablet': <TabletAndroidOutlineIcon fontSize='large' />,
+  'pi pi-ambulance': <AirportShuttleOutlinedIcon fontSize='large' />,
+  'pi pi-ink-solid': <EditOutlinedIcon fontSize='large' />,
+  'pi pi-columns': <HomeOutlinedIcon fontSize='large' />
 };
 
 const drawerWidth = 300;
@@ -203,7 +211,7 @@ export default function NavBar(props: NavBarProps) {
               }
             />
             <ListItemSecondaryAction>
-              <IconButton edge='end' onClick={handleDrawerOpen}>
+              <IconButton edge='end' onClick={handleDrawerOpen} size='large'>
                 <ChevronLeftIcon className={classes.appListIcon} />
               </IconButton>
             </ListItemSecondaryAction>
@@ -256,7 +264,7 @@ export default function NavBar(props: NavBarProps) {
             <ListItemText primary={portalOperator} />
             {open && (
               <ListItemSecondaryAction>
-                <IconButton edge='end' onClick={navPanelOperatorButtonClick}>
+                <IconButton edge='end' onClick={navPanelOperatorButtonClick} size='large'>
                   <ChevronRightIcon />
                 </IconButton>
               </ListItemSecondaryAction>

package/lib/infra/RootContainer/RootContainer.tsx

@@ -1,6 +1,5 @@
 import { Children, createElement, PropsWithChildren, useContext, useEffect, useMemo, useRef, useState } from 'react';
-import isEqual from 'lodash.isequal';
-import { Box, CircularProgress } from '@material-ui/core';
+import { Box, CircularProgress } from '@mui/material';
 
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 import StoreContext from '@pega/react-sdk-components/lib/bridge/Context/StoreContext';
@@ -54,6 +53,7 @@ export default function RootContainer(props: PropsWithChildren<RootContainerProp
   const pConn = getPConnect();
 
   const options = { context: 'app' };
+  const rootView = useRef(null);
 
   const [componentName, setComponentName] = useState('');
 
@@ -146,7 +146,6 @@ export default function RootContainer(props: PropsWithChildren<RootContainerProp
     return noPortalContent;
   }
 
-  let rootView: any;
   let rootViewConfig: any = null;
 
   useEffect(() => {
@@ -180,8 +179,8 @@ export default function RootContainer(props: PropsWithChildren<RootContainerProp
       }
     };
 
-    if (!isEqual(currentRootConfig, prevRootConfig)) {
-      rootView = createElement(createPConnectComponent(), PCore.createPConnect(currentRootConfig));
+    if (prevRootConfig === null || !PCore.isDeepEqual(currentRootConfig, prevRootConfig)) {
+      rootView.current = createElement(createPConnectComponent(), PCore.createPConnect(currentRootConfig)) as any;
     }
 
     // debugging/investigation help
@@ -189,7 +188,7 @@ export default function RootContainer(props: PropsWithChildren<RootContainerProp
 
     return (
       <div id='ModalManager'>
-        {rootView}
+        {rootView.current}
         {MemoizedModalViewContainer}
         <div id='MemoizedPreviewViewContainer' />
         <div id='ReAuthMessageModal' />

package/lib/infra/Stages/Stages.tsx

@@ -1,7 +1,7 @@
-import { Breadcrumbs, Card, Typography } from '@material-ui/core';
-import DoubleArrowIcon from '@material-ui/icons/DoubleArrow';
-import DoneIcon from '@material-ui/icons/Done';
-import { makeStyles } from '@material-ui/core/styles';
+import { Breadcrumbs, Card, Typography } from '@mui/material';
+import DoubleArrowIcon from '@mui/icons-material/DoubleArrow';
+import DoneIcon from '@mui/icons-material/Done';
+import makeStyles from '@mui/styles/makeStyles';
 
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 

package/lib/infra/VerticalTabs/LeftAlignVerticalTabs/LeftAlignVerticalTabs.tsx

@@ -1,5 +1,5 @@
-import { withStyles } from '@material-ui/core/styles';
-import { Tab, Divider } from '@material-ui/core';
+import withStyles from '@mui/styles/withStyles';
+import { Tab, Divider } from '@mui/material';
 
 // LeftAlignVerticalTabs does NOT have getPConnect. So, no need to extend from PConnProps
 
@@ -18,7 +18,8 @@ interface LeftAlignVerticalTabsProps {
 const LeftAlignVerticalTabs: any = withStyles((/* theme */) => ({
   root: {
     width: '100%',
-    maxWidth: '100%'
+    maxWidth: '100%',
+    alignItems: 'flex-start'
   },
   wrapper: {
     display: 'block',

package/lib/infra/VerticalTabs/VerticalTabs/VerticalTabs.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import Tabs from '@material-ui/core/Tabs';
+import makeStyles from '@mui/styles/makeStyles';
+import Tabs from '@mui/material/Tabs';
 
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 

package/lib/infra/View/View.tsx

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren, useEffect } from 'react';
 
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { getAllFields } from '@pega/react-sdk-components/lib/components/helpers/template-utils';
@@ -18,6 +18,7 @@ interface ViewProps extends PConnProps {
   visibility?: boolean;
   name?: string;
   bInForm?: boolean;
+  type?: any;
 }
 
 //
@@ -36,12 +37,14 @@ const NO_HEADER_TEMPLATES = [
   'NarrowWideDetails',
   'WideNarrowDetails',
   'Confirmation',
-  'DynamicTabs'
+  'DynamicTabs',
+  'DetailsSubTabs'
 ];
 
 export default function View(props: PropsWithChildren<ViewProps>) {
-  const { children, template, getPConnect, mode, visibility, name: pageName } = props;
+  const { children, template, getPConnect, mode, visibility, name: pageName, type, title } = props;
   let { label = '', showLabel = false } = props;
+  const { PAGE_TYPES: { PAGE, LANDINGPAGE, LISTPAGE } = {}, MODAL } = PCore.getConstants();
 
   // Get the inherited props from the parent to determine label settings. For 8.6, this is only for embedded data form views
   // Putting this logic here instead of copy/paste in every Form template index.js
@@ -49,12 +52,43 @@ export default function View(props: PropsWithChildren<ViewProps>) {
   const inheritedProps: any = getPConnect().getInheritedProps(); // try to remove any when getInheritedProps typedefs are fixed
   label = inheritedProps.label || label;
   showLabel = inheritedProps.showLabel || showLabel;
+  const localeUtils = PCore.getLocaleUtils();
 
   const isEmbeddedDataView = mode === 'editable'; // would be better to check the reference child for `context` attribute if possible
   if (isEmbeddedDataView && showLabel === undefined) {
     showLabel = true;
   }
 
+  useEffect(() => {
+    // Get the localized application label
+    let applicationLabel = PCore.getEnvironmentInfo().getApplicationLabel();
+    applicationLabel = localeUtils.getLocaleValue(`${applicationLabel}`, '', '');
+    const caseInfo = getPConnect().getCaseInfo();
+    const isAssignmentInCreateStage = caseInfo && caseInfo.isAssignmentInCreateStage();
+    const isRenderingInModal = getPConnect().getContainerName().includes(MODAL);
+    const isRenderingInPreviewPanel = getPConnect().getContainerName().includes('preview');
+
+    /* If assignment is in create stage and rendering in modal don't update the title.
+      Title will be updated on completion of create stage and when the assignment is rendered inline to the page.
+    */
+    const canUpdateTitle =
+      !isRenderingInPreviewPanel &&
+      (type === PAGE || type === LANDINGPAGE || type === LISTPAGE) &&
+      !(isRenderingInModal && isAssignmentInCreateStage) &&
+      PCore.getEnvironmentInfo().getRenderingMode() === 'FULL_PORTAL';
+    // Incase of home route title is same as applicationLabel so setting to empty to just show applicationLabel
+    let titleVar = title === applicationLabel ? '' : title;
+
+    if (canUpdateTitle) {
+      if (caseInfo) {
+        const name = caseInfo.getName();
+        const id = caseInfo.getBusinessID();
+        titleVar = name && id ? `${name} (${id})` : titleVar;
+      }
+      document.title = titleVar ? `${titleVar} - ${applicationLabel}` : applicationLabel;
+    }
+  }, [type, title, getPConnect, PAGE, LANDINGPAGE, LISTPAGE]);
+
   const key = `${getPConnect().getContextName()}_${getPConnect().getPageReference()}_${pageName}`;
   // As long as the template is defined in the dependencies of the view
   // it will be loaded, otherwise fall back to single column

package/lib/template/AppShell/AppShell.tsx

@@ -1,6 +1,6 @@
 import { PropsWithChildren, useEffect, useState } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import Avatar from '@material-ui/core/Avatar';
+import makeStyles from '@mui/styles/makeStyles';
+import Avatar from '@mui/material/Avatar';
 
 import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
 import { NavContext } from '@pega/react-sdk-components/lib/components/helpers/reactContextHelpers';
@@ -24,6 +24,8 @@ interface AppShellProps extends PConnProps {
   portalName: string;
   portalLogo: string;
   navDisplayOptions: { alignment: string; position: string };
+  httpMessages: string[];
+  pageMessages: string[];
 }
 
 const useStyles = makeStyles(theme => ({
@@ -49,8 +51,21 @@ export default function AppShell(props: PropsWithChildren<AppShellProps>) {
   // Get emitted components from map (so we can get any override that may exist)
   const NavBar = getComponentFromMap('NavBar');
   const WssNavBar = getComponentFromMap('WssNavBar');
+  const AlertBanner = getComponentFromMap('AlertBanner');
 
-  const { pages = [], caseTypes = [], showAppName, children = [], getPConnect, portalTemplate, portalName, portalLogo, navDisplayOptions } = props;
+  const {
+    pages = [],
+    caseTypes = [],
+    showAppName,
+    children = [],
+    getPConnect,
+    httpMessages = [],
+    pageMessages = [],
+    portalTemplate,
+    portalName,
+    portalLogo,
+    navDisplayOptions
+  } = props;
 
   const [open, setOpen] = useState(true);
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -58,7 +73,7 @@ export default function AppShell(props: PropsWithChildren<AppShellProps>) {
   const pConn = getPConnect();
   const envInfo = PCore.getEnvironmentInfo();
   const imageKey = envInfo.getOperatorImageInsKey();
-  const userName = envInfo.getOperatorName();
+  const userName = envInfo.getOperatorName() || '';
   const currentUserInitials = Utils.getInitials(userName);
   const appNameToDisplay = showAppName ? envInfo.getApplicationLabel() : '';
   const portalClass = pConn.getValue('.classID', ''); // 2nd arg empty string until typedef marked correctly
@@ -75,9 +90,18 @@ export default function AppShell(props: PropsWithChildren<AppShellProps>) {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [mapChildren, setMapChildren] = useState([]);
 
+  const messages = [...httpMessages, ...pageMessages];
+
+  const hasBanner = messages && messages.length ? messages.length > 0 : false;
+  let banners: any = null;
+  banners = hasBanner && (
+    <div style={{ display: 'flex', flexDirection: 'column', padding: '1em 0' }}>
+      <AlertBanner id='AppShell' variant='urgent' messages={messages} />
+    </div>
+  );
   // Initial setting of appName and mapChildren
   useEffect(() => {
-    setAppName(PCore.getEnvironmentInfo().getApplicationName());
+    setAppName(PCore.getEnvironmentInfo().getApplicationName() || '');
 
     const tempMap: any = (pConn.getChildren() as any)?.map((child: any, index) => {
       const theChildComp = child.getPConnect().getComponentName();
@@ -92,6 +116,25 @@ export default function AppShell(props: PropsWithChildren<AppShellProps>) {
     setMapChildren(tempMap);
   }, []);
 
+  useEffect(() => {
+    // @ts-ignore
+    const caseTypesAvailableToCreateDP = PCore.getEnvironmentInfo().environmentInfoObject?.pxApplication?.pyCaseTypesAvailableToCreateDP;
+    if (caseTypesAvailableToCreateDP) {
+      const portalID = pConn.getValue('.pyOwner');
+      PCore.getDataPageUtils()
+        .getPageDataAsync(caseTypesAvailableToCreateDP, pConn.getContextName(), {
+          PortalName: portalID
+        })
+        .then((response: { pyCaseTypesAvailableToCreate?: any }) => {
+          if (response?.pyCaseTypesAvailableToCreate) {
+            pConn.replaceState('.pyCaseTypesAvailableToCreate', response.pyCaseTypesAvailableToCreate, {
+              skipDirtyValidation: true
+            });
+          }
+        });
+    }
+  }, []);
+
   const [iconURL, setIconURL] = useState('');
   const [fullIconURL, setFullIconURL] = useState('');
   useEffect(() => {
@@ -175,10 +218,10 @@ export default function AppShell(props: PropsWithChildren<AppShellProps>) {
           portalName={portalName}
           imageSrc={iconURL}
           fullImageSrc={fullIconURL}
-          appName={localizedVal(appNameToDisplay, '', `${portalClass}!PORTAL!${envPortalName}`.toUpperCase())}
+          appName={localizedVal(appNameToDisplay || '', '', `${portalClass}!PORTAL!${envPortalName}`.toUpperCase())}
           appInfo={{
             imageSrc: iconURL,
-            appName: localizedVal(appNameToDisplay, '', `${portalClass}!PORTAL!${envPortalName}`.toUpperCase()),
+            appName: localizedVal(appNameToDisplay || '', '', `${portalClass}!PORTAL!${envPortalName}`.toUpperCase()),
             onClick: links[0] && /* links[0].onClick ? */ links[0].onClick /* : undefined */
           }}
           navLinks={links.filter((link, index) => {
@@ -187,7 +230,10 @@ export default function AppShell(props: PropsWithChildren<AppShellProps>) {
           operator={getOperator()}
           navDisplayOptions={navDisplayOptions}
         />
-        <div className={classes.wsscontent}>{children}</div>
+        <div className={classes.wsscontent}>
+          {banners}
+          {children}
+        </div>
       </div>
     );
   }
@@ -199,11 +245,15 @@ export default function AppShell(props: PropsWithChildren<AppShellProps>) {
         <NavBar
           getPConnect={getPConnect}
           pConn={getPConnect()}
-          appName={localizedVal(appNameToDisplay, '', `${portalClass}!PORTAL!${envPortalName}`.toUpperCase())}
+          appName={localizedVal(appNameToDisplay || '', '', `${portalClass}!PORTAL!${envPortalName}`.toUpperCase())}
           pages={pages}
           caseTypes={caseTypes}
         />
-        <div className={classes.content}>{children}</div>
+
+        <div className={classes.content}>
+          {banners}
+          {children}
+        </div>
       </div>
     </NavContext.Provider>
   );

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

@@ -0,0 +1,9 @@
+{
+  "name": "BannerPage",
+  "label": "Banner",
+  "description": "Banner Page Template",
+  "type": "Template",
+  "subtype": "PAGE",
+  "icon": "BannerPage.svg",
+  "properties": []
+}

package/lib/template/CaseView/CaseView.tsx

@@ -1,11 +1,11 @@
 /* eslint-disable react/jsx-boolean-value */
 
 import { PropsWithChildren, ReactElement, useContext, useEffect, useState } from 'react';
-import { Avatar, Card, CardHeader, Divider, Typography } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
-import Box from '@material-ui/core/Box';
-import Button from '@material-ui/core/Button';
-import Grid from '@material-ui/core/Grid';
+import { Avatar, Card, CardHeader, Divider, Typography } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Grid from '@mui/material/Grid';
 
 import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
 import StoreContext from '@pega/react-sdk-components/lib/bridge/Context/StoreContext';
@@ -19,6 +19,7 @@ interface CaseViewProps extends PConnProps {
   header: string;
   showIconInHeader: boolean;
   caseInfo: any;
+  lastUpdateCaseTime: any;
 }
 
 const useStyles = makeStyles(theme => ({
@@ -64,10 +65,10 @@ export default function CaseView(props: PropsWithChildren<CaseViewProps>) {
     showIconInHeader = true,
     caseInfo: { availableActions = [], availableProcesses = [], hasNewAttachments, caseTypeID = '', caseTypeName = '' }
   } = props;
+  const { lastUpdateCaseTime = getPConnect().getValue('caseInfo.lastUpdateTime') } = props;
 
   const currentCaseID = props.caseInfo.ID;
   let isComponentMounted = true;
-
   const { displayOnlyFA } = useContext<any>(StoreContext);
 
   const thePConn = getPConnect();
@@ -79,7 +80,6 @@ export default function CaseView(props: PropsWithChildren<CaseViewProps>) {
   const localizedVal = PCore.getLocaleUtils().getLocaleValue;
   const localeCategory = 'CaseView';
   const localeKey = `${caseTypeID}!CASE!${caseTypeName}`.toUpperCase();
-
   /**
    *
    * @param inName the metadata <em>name</em> that will cause a region to be returned
@@ -169,7 +169,6 @@ export default function CaseView(props: PropsWithChildren<CaseViewProps>) {
 
   useEffect(() => {
     if (hasNewAttachments) {
-      // @ts-ignore - Argument of type 'boolean' is not assignable to parameter of type 'object'
       PCore.getPubSubUtils().publish((PCore.getEvents().getCaseEvent() as any).CASE_ATTACHMENTS_UPDATED_FROM_CASEVIEW, true);
     }
   }, [hasNewAttachments]);
@@ -244,7 +243,9 @@ export default function CaseView(props: PropsWithChildren<CaseViewProps>) {
           <Grid item xs={6}>
             {theStagesRegion}
             {theTodoRegion}
-            {deferLoadInfo.length > 0 && <DeferLoad getPConnect={getPConnect} name={deferLoadInfo[activeVertTab].config.name} isTab />}
+            {deferLoadInfo.length > 0 && (
+              <DeferLoad getPConnect={getPConnect} name={deferLoadInfo[activeVertTab].config.name} isTab lastUpdateCaseTime={lastUpdateCaseTime} />
+            )}
           </Grid>
 
           <Grid item xs={3}>

package/lib/template/CaseViewActionsMenu/CaseViewActionsMenu.tsx

@@ -1,12 +1,12 @@
 import React, { useState } from 'react';
-import Button from '@material-ui/core/Button';
-import Menu from '@material-ui/core/Menu';
-import MenuItem from '@material-ui/core/MenuItem';
+import Button from '@mui/material/Button';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
 
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
-import Snackbar from '@material-ui/core/Snackbar';
-import IconButton from '@material-ui/core/IconButton';
-import CloseIcon from '@material-ui/icons/Close';
+import Snackbar from '@mui/material/Snackbar';
+import IconButton from '@mui/material/IconButton';
+import CloseIcon from '@mui/icons-material/Close';
 
 interface CaseViewActionsMenuProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -44,7 +44,7 @@ export default function CaseViewActionsMenu(props: CaseViewActionsMenuProps) {
     setShowSnackbar(true);
   }
 
-  function handleSnackbarClose(event: React.SyntheticEvent | React.MouseEvent, reason?: string) {
+  function handleSnackbarClose(event: React.SyntheticEvent<any> | Event, reason?: string) {
     if (reason === 'clickaway') {
       return;
     }