@pega/react-sdk-overrides 0.25.5 → 0.25.7

package/lib/designSystemExtension/CaseSummaryFields/CaseSummaryFields.tsx

@@ -223,7 +223,7 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
 
   // Whenever theFieldsToRender changes, update theFieldsAsGridItems that's used during render
   useEffect(() => {
-    const arGridItems = theFieldsToRender.map((field: any) => {
+    const arGridItems = theFieldsToRender?.map((field: any) => {
       // display the field when either visibility property doesn't exist or is true(if exists)
       if (field.config.visibility === undefined || field.config.visibility === true) {
         return (

package/lib/field/RadioButtons/RadioButtons.tsx

@@ -108,7 +108,7 @@ export default function RadioButtons(props: RadioButtonsProps) {
     return (
       <div>
         <h4 style={{ marginTop: 0, marginBottom: 0 }}>{label}</h4>
-        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(200px, 100%), 1fr))', gap: '1rem' }}>
+        <div id='selectable-card' style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(200px, 100%), 1fr))', gap: '1rem' }}>
           <SelectableCard
             hideFieldLabels={hideFieldLabels}
             additionalProps={additionalProps}

package/lib/field/SelectableCard/utils.tsx

@@ -2,10 +2,6 @@ import { Link } from '@mui/material';
 
 import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
 
-export const getResolvedConstantValue = (pConnect, key) => {
-  return pConnect.getValue(PCore.getResolvedConstantValue(key)) || pConnect.getValue(key);
-};
-
 export const resolveReferencedPConnect = pConnect => {
   if (!pConnect || !pConnect.meta) return undefined;
   const type = pConnect?._type ?? undefined;
@@ -203,7 +199,8 @@ export function resolveReferenceFields(
         ...preset,
         config: {
           ...preset.config,
-          displayMode: 'DISPLAY_ONLY'
+          displayMode: 'DISPLAY_ONLY',
+          contextName: pConnect.getContextName()
         }
       },
       useCustomContext: item

package/lib/field/SemanticLink/SemanticLink.tsx

@@ -202,7 +202,7 @@ export default function SemanticLink(props: SemanticLinkProps) {
 
   return (
     <Link component='button' {...linkComponentProps} {...restProps} onClick={openLinkClick} data-testid={testId}>
-      {text}
+      {text || '--'}
     </Link>
   );
 }

package/lib/helpers/attachmentShared.ts

@@ -0,0 +1,6 @@
+const megabyteSize = 1048576;
+
+export const validateMaxSize = (fileObj: Record<string, number>, maxSizeInMB: string) => {
+  const fileSize = (fileObj.size / megabyteSize).toFixed(2);
+  return parseFloat(fileSize) < parseFloat(maxSizeInMB);
+};

package/lib/helpers/common-utils.ts

@@ -9,8 +9,7 @@ export function isEmptyObject(obj: object): boolean {
  * @returns The localized string or the key itself if no translation is found
  */
 export function getGenericFieldsLocalizedValue(path: string, key: string): string {
-  const GENERIC_BUNDLE_KEY = PCore.getLocaleUtils().GENERIC_BUNDLE_KEY;
-  const localeStore = PCore.getLocaleUtils().localeStore[GENERIC_BUNDLE_KEY];
+  const localeStore = PCore.getLocaleUtils().localeStore;
 
   if (!localeStore) return key;
 

package/lib/helpers/formatters/Currency.ts

@@ -1,10 +1,14 @@
 import { getLocale } from './common';
 import CurrencyMap from './CurrencyMap';
 
+const isValidValue = value => {
+  return value !== null && value !== undefined && value !== '';
+};
+
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 function NumberFormatter(value, { locale = 'en-US', decPlaces = 2, style = '', currency = 'USD' } = {}): string {
   const currentLocale: string | undefined = getLocale(locale);
-  if (value !== null && value !== undefined) {
+  if (isValidValue(value)) {
     return Number(value).toLocaleString(currentLocale, { minimumFractionDigits: decPlaces, maximumFractionDigits: decPlaces });
   }
   return value;
@@ -16,7 +20,7 @@ function CurrencyFormatter(
 ): string {
   const currentLocale: string | undefined = getLocale(locale);
   let formattedValue: string = value;
-  if (value !== null && value !== undefined && value !== '') {
+  if (isValidValue(value)) {
     formattedValue = NumberFormatter(value, { locale: currentLocale, decPlaces, style, currency });
 
     // For currency other than EUR, we need to determine the country code from currency code
@@ -55,7 +59,7 @@ function CurrencyFormatter(
 
 function SymbolFormatter(value, { symbol = '$', suffix = true, locale = 'en-US' } = {}): string {
   let formattedValue: string = value;
-  if (value !== null && value !== undefined) {
+  if (isValidValue(value)) {
     formattedValue = NumberFormatter(value, { locale });
     return suffix ? `${formattedValue}${symbol}` : `${symbol}${formattedValue}`;
   }
@@ -68,5 +72,6 @@ export default {
   Decimal: (value, options) => NumberFormatter(value, options),
   'Decimal-Auto': (value, options) => NumberFormatter(value, { ...options, decPlaces: Number.isInteger(value) ? 0 : 2 }),
   Integer: (value, options) => NumberFormatter(value, { ...options, decPlaces: 0 }),
-  Percentage: (value, options) => SymbolFormatter(value, { ...options, symbol: '%' })
+  Percentage: (value, options) => SymbolFormatter(value, { ...options, symbol: '%' }),
+  isValidValue
 };

package/lib/helpers/object-utils.ts

@@ -0,0 +1,10 @@
+/**
+ * Returns the value of the key from objectInfo/caseInfo
+ * Added fallback to retrieve from caseInfo if objectInfo not present.
+ * @param pConnect
+ * @param key
+ * @returns the value of key
+ */
+export const getResolvedConstantValue = (pConnect: typeof PConnect, key: string) => {
+  return pConnect.getValue(PCore.getResolvedConstantValue(key)) || pConnect.getValue(key);
+};

package/lib/infra/Assignment/Assignment.tsx

@@ -34,7 +34,7 @@ export default function Assignment(props: PropsWithChildren<AssignmentProps>) {
   const actionsAPI = thePConn.getActionsApi();
   const localizedVal = PCore.getLocaleUtils().getLocaleValue;
   const localeCategory = 'Assignment';
-  const localeReference = `${getPConnect().getCaseInfo().getClassName()}!CASE!${getPConnect().getCaseInfo().getName()}`.toUpperCase();
+  const localeReference = getPConnect()?.getCaseLocaleReference();
 
   // store off bound functions to above pointers
   const finishAssignment = actionsAPI.finishAssignment.bind(actionsAPI);

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

@@ -96,7 +96,7 @@ export const FlowContainer = (props: FlowContainerProps) => {
   const localizedVal = PCore.getLocaleUtils().getLocaleValue;
   const localeCategory = 'Messages';
 
-  const key = `${thePConn.getCaseInfo().getClassName()}!CASE!${thePConn.getCaseInfo().getName()}`.toUpperCase();
+  const key = getPConnect()?.getCaseLocaleReference();
   const classes = useStyles();
 
   function getBuildName(): string {
@@ -218,7 +218,7 @@ export const FlowContainer = (props: FlowContainerProps) => {
               <CardHeader
                 id='assignment-header'
                 title={<Typography variant='h6'>{localizedVal(containerName, undefined, key)}</Typography>}
-                subheader={`${localizedVal('Task in', 'Todo')} ${caseId} \u2022 ${localizedVal('Priority', 'Todo')} ${urgency}`}
+                subheader={`${localizedVal('In', 'Todo')} ${caseId} \u2022 ${localizedVal('Priority', 'Todo')} ${urgency}`}
                 avatar={<Avatar className={`${classes.avatar} psdk-avatar`}>{operatorInitials}</Avatar>}
               />
               {displayPageMessages()}

package/lib/infra/Containers/ModalViewContainer/ModalViewContainer.tsx

@@ -96,6 +96,7 @@ const useStyles = makeStyles(theme => ({
     marginBottom: theme.spacing(0)
   },
   dlgContent: {
+    paddingTop: `${theme.spacing(1)} !important`,
     marginLeft: theme.spacing(2),
     marginRight: theme.spacing(2),
     marginTop: theme.spacing(0),
@@ -130,7 +131,7 @@ export default function ModalViewContainer(props: ModalViewContainerProps) {
   const [cancelAlertProps, setCancelAlertProps] = useState({});
   const [isMultiRecordData, setMultiRecordData] = useState(false);
   const localizedVal = PCore.getLocaleUtils().getLocaleValue;
-  const localeCategory = 'Data Object';
+  const localeCategory = 'ModalContainer';
 
   const ERROR_WHILE_RENDERING = 'ERROR_WHILE_RENDERING';
 
@@ -254,7 +255,7 @@ export default function ModalViewContainer(props: ModalViewContainerProps) {
         const headingValue =
           isDataObject || isMultiRecord
             ? getModalHeading(dataObjectAction)
-            : determineModalHeaderByAction(actionName, caseTypeName, ID, `${caseInfo?.getClassName()}!CASE!${caseInfo.getName()}`.toUpperCase());
+            : determineModalHeaderByAction(actionName, caseTypeName, ID, pConnect?.getCaseLocaleReference());
 
         let arChildrenAsReact: any[] = [];
 
@@ -309,7 +310,7 @@ export default function ModalViewContainer(props: ModalViewContainerProps) {
 
   return (
     <>
-      <Dialog open={bShowModal} aria-labelledby='form-dialog-title'>
+      <Dialog open={bShowModal} aria-labelledby='form-dialog-title' maxWidth={false}>
         <DialogTitle id='form-dialog-title' className={`${classes.dlgTitle} psdk-dialog-title`}>
           {title}
         </DialogTitle>

package/lib/infra/MultiStep/MultiStep.css

@@ -158,14 +158,12 @@ mat-horizontal-stepper {
 }
 
 .psdk-horizontal-step-header {
-  overflow: hidden;
   outline: none;
   cursor: pointer;
   position: relative;
   box-sizing: content-box;
   display: flex;
   height: 72px;
-  overflow: hidden;
   align-items: center;
 }
 

package/lib/infra/NavBar/NavBar.tsx

@@ -126,7 +126,6 @@ export default function NavBar(props: NavBarProps) {
   const [bShowOperatorButtons, setBShowOperatorButtons] = useState(false);
   const [anchorEl, setAnchorEl] = useState(null);
   const localeUtils = PCore.getLocaleUtils();
-  const localeReference = pConn.getValue('.pyLocaleReference');
 
   const localizedVal = PCore.getLocaleUtils().getLocaleValue;
   const localeCategory = 'AppShell';
@@ -241,7 +240,7 @@ export default function NavBar(props: NavBarProps) {
               <ListItemIcon>
                 <WorkOutlineIcon fontSize='large' />
               </ListItemIcon>
-              <ListItemText primary={localeUtils.getLocaleValue(caseType.pyLabel, '', localeReference)} />
+              <ListItemText primary={localeUtils.getLocaleValue(caseType.pyLabel, '', localeUtils.getCaseLocaleReference(caseType.pyClassName))} />
             </ListItemButton>
           ))}
         </List>
@@ -250,7 +249,7 @@ export default function NavBar(props: NavBarProps) {
         {navPages.map(page => (
           <ListItemButton onClick={() => navPanelButtonClick(page)} key={page.pyLabel}>
             <ListItemIcon>{iconMap[page.pxPageViewIcon]}</ListItemIcon>
-            <ListItemText primary={localeUtils.getLocaleValue(page.pyLabel, '', localeReference)} />
+            <ListItemText primary={localeUtils.getLocaleValue(page.pyLabel, '', localeUtils.getCaseLocaleReference(page.pyClassName))} />
           </ListItemButton>
         ))}
       </List>

package/lib/infra/Stages/Stages.tsx

@@ -57,7 +57,7 @@ export default function Stages(props: StagesProps) {
 
   const { getPConnect, stages } = props;
   const pConn = getPConnect();
-  const key = `${pConn.getCaseInfo().getClassName()}!CASE!${pConn.getCaseInfo().getName()}`.toUpperCase();
+  const key = getPConnect()?.getCaseLocaleReference();
 
   const filteredStages = getFilteredStages(stages);
   const currentStageID = pConn.getValue(PCore.getConstants().CASE_INFO.STAGEID, ''); // 2nd arg empty string until typedef allows optional

package/lib/template/AppShell/AppShell.tsx

@@ -112,6 +112,11 @@ export default function AppShell(props: PropsWithChildren<AppShellProps>) {
     });
 
     setMapChildren(tempMap);
+
+    /* TODO: We're setting the `pyPortalTemplate` for now, this would be handled by the CoreJS in the future releases */
+    if (portalTemplate === 'wss') {
+      PCore.getEnvironmentInfo().setEnvironmentInfo({ ...PCore.getEnvironmentInfo().environmentInfoObject, pyPortalTemplate: 'wss' } as any);
+    }
   }, []);
 
   useEffect(() => {

package/lib/template/CaseSummary/CaseSummary.tsx

@@ -1,22 +1,83 @@
-import type { PropsWithChildren } from 'react';
+import type { PropsWithChildren, ReactElement } from 'react';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface CaseSummaryProps extends PConnProps {
-  // If any, enter additional props that only exist on this component
   arPrimaryFields: any[];
   arSecondaryFields: any[];
+  // If any, enter additional props that only exist on this component
 }
 
 export default function CaseSummary(props: PropsWithChildren<CaseSummaryProps>) {
   // Get emitted components from map (so we can get any override that may exist)
   const CaseSummaryFields = getComponentFromMap('CaseSummaryFields');
 
-  const { arPrimaryFields, arSecondaryFields } = props;
+  const { getPConnect, children } = props;
+  let { arPrimaryFields = [], arSecondaryFields = [] } = props;
+
+  const thePConn = getPConnect && getPConnect();
+  const theConfigProps: any = thePConn?.getConfigProps();
+
+  const status = theConfigProps?.status;
+  const showStatus = theConfigProps?.showStatus;
+  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const localeCategory = 'ModalContainer';
+
+  function prepareComponentInCaseSummary(pConnectMeta, getPConnect) {
+    const { config, children } = pConnectMeta;
+    const pConnect = getPConnect();
+
+    const caseSummaryComponentObject: any = {};
+
+    const { type } = pConnectMeta;
+    const createdComponent = pConnect.createComponent({
+      type,
+      children: children ? [...children] : [],
+      config: {
+        ...config
+      }
+    });
+
+    caseSummaryComponentObject.value = createdComponent;
+    return caseSummaryComponentObject;
+  }
+
+  function prepareCaseSummaryData(summaryFieldChildren) {
+    const convertChildrenToSummaryData = kid => {
+      return kid?.map((childItem, index) => {
+        const childMeta = childItem.getPConnect().meta;
+        const caseSummaryComponentObject = prepareComponentInCaseSummary(childMeta, childItem.getPConnect);
+        caseSummaryComponentObject.id = index + 1;
+        return caseSummaryComponentObject;
+      });
+    };
+    return summaryFieldChildren ? convertChildrenToSummaryData(summaryFieldChildren?.getChildren()) : undefined;
+  }
+
+  if (arPrimaryFields.length === 0 && arSecondaryFields.length === 0) {
+    for (const child of children as ReactElement[]) {
+      const childPConn = (child as ReactElement).props.getPConnect();
+      const childPConnData = childPConn.resolveConfigProps(childPConn.getRawMetadata());
+      if (childPConnData.name.toLowerCase() === 'primary fields') {
+        arPrimaryFields = childPConnData.children;
+        arPrimaryFields.forEach(field => {
+          if (field.config?.value && typeof field.config?.value === 'string') {
+            field.config.value = localizedVal(field.config.value, localeCategory);
+          }
+        });
+      } else if (childPConnData.name.toLowerCase() === 'secondary fields') {
+        const secondarySummaryFields = prepareCaseSummaryData(childPConn);
+        arSecondaryFields = childPConnData.children;
+        arSecondaryFields.forEach((field, index) => {
+          field.config.displayLabel = secondarySummaryFields[index]?.value?.props?.label;
+        });
+      }
+    }
+  }
 
   return (
     <div id='CaseSummary'>
-      <CaseSummaryFields theFields={arPrimaryFields} />
+      <CaseSummaryFields status={status} showStatus={showStatus} theFields={arPrimaryFields} />
       <CaseSummaryFields theFields={arSecondaryFields} />
     </div>
   );

package/lib/template/CaseView/CaseView.tsx

@@ -9,7 +9,6 @@ import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
 import StoreContext from '@pega/react-sdk-components/lib/bridge/Context/StoreContext';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
-import { prepareCaseSummaryData } from '@pega/react-sdk-components/lib/components/template/utils';
 
 interface CaseViewProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -50,7 +49,6 @@ export default function CaseView(props: PropsWithChildren<CaseViewProps>) {
   const CaseViewActionsMenu = getComponentFromMap('CaseViewActionsMenu');
   const VerticalTabs = getComponentFromMap('VerticalTabs');
   const DeferLoad = getComponentFromMap('DeferLoad');
-  const CaseSummary = getComponentFromMap('CaseSummary');
 
   const {
     getPConnect,
@@ -73,7 +71,7 @@ export default function CaseView(props: PropsWithChildren<CaseViewProps>) {
 
   const localizedVal = PCore.getLocaleUtils().getLocaleValue;
   const localeCategory = 'CaseView';
-  const localeKey = `${caseTypeID}!CASE!${caseTypeName}`.toUpperCase();
+  const localeKey = thePConn?.getCaseLocaleReference();
   /**
    *
    * @param inName the metadata <em>name</em> that will cause a region to be returned
@@ -90,12 +88,7 @@ export default function CaseView(props: PropsWithChildren<CaseViewProps>) {
     return null;
   }
 
-  const theSummaryRegion = children && children[0];
-
-  const data = prepareCaseSummaryData(theSummaryRegion);
-  const primarySummaryFields = data.primarySummaryFields;
-  const secondarySummaryFields = data.secondarySummaryFields;
-
+  const theSummaryRegion = getChildRegionByName('summary');
   const theStagesRegion = getChildRegionByName('stages');
   const theTodoRegion = getChildRegionByName('todo');
   const theUtilitiesRegion = getChildRegionByName('utilities');
@@ -237,7 +230,7 @@ export default function CaseView(props: PropsWithChildren<CaseViewProps>) {
               />
               {getActionButtonsHtml()}
               <Divider />
-              <CaseSummary arPrimaryFields={primarySummaryFields} arSecondaryFields={secondarySummaryFields}></CaseSummary>
+              {theSummaryRegion}
               <Divider />
               {vertTabInfo.length > 1 && <VerticalTabs tabconfig={vertTabInfo} />}
             </Card>

package/lib/template/DataReference/DataReference.tsx

@@ -88,8 +88,7 @@ export default function DataReference(props: PropsWithChildren<DataReferenceProp
   let firstChildPConnect;
 
   const localizedPlaceholderOption = placeholder => {
-    const { GENERIC_BUNDLE_KEY } = PCore.getLocaleUtils?.() ?? {};
-    const localizedDefaultPlaceholder = pConn.getLocalizedValue('select_placeholder_default', 'CosmosFields', GENERIC_BUNDLE_KEY);
+    const localizedDefaultPlaceholder = pConn.getLocalizedValue('select_placeholder_default', '', 'CosmosFields');
     // If we have a placeholder, push that option in the list of items
     if (placeholder === 'Select...' && localizedDefaultPlaceholder !== 'select_placeholder_default') {
       return localizedDefaultPlaceholder;

package/lib/template/ListView/ListView.tsx

@@ -1212,7 +1212,7 @@ export default function ListView(props: ListViewProps) {
                 </TableBody>
               </Table>
               {(!arRows || arRows.length === 0) && (
-                <div className='no-records'>{getGenericFieldsLocalizedValue('CosmosFields.fields.lists', 'No records found.')}</div>
+                <div className='no-records'>{getGenericFieldsLocalizedValue('COSMOSFIELDS.lists', 'No records found.')}</div>
               )}
             </TableContainer>
           )}

package/lib/template/SimpleTable/SimpleTableManual/SimpleTableManual.tsx

@@ -715,7 +715,7 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
         </Table>
         {((readOnlyMode && (!rowData || rowData?.length === 0)) || (editableMode && (!referenceList || referenceList?.length === 0))) && (
           <div className='no-records' id='no-records'>
-            {getGenericFieldsLocalizedValue('CosmosFields.fields.lists', 'No records found.')}
+            {getGenericFieldsLocalizedValue('COSMOSFIELDS.lists', 'No records found.')}
           </div>
         )}
       </TableContainer>

package/lib/template/SingleReferenceReadOnly/SingleReferenceReadOnly.tsx

@@ -1,3 +1,4 @@
+import { FormControl, FormLabel } from '@mui/material';
 import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface SingleReferenceReadOnlyProps extends PConnProps {
@@ -59,5 +60,12 @@ export default function SingleReferenceReadOnly(props: SingleReferenceReadOnlyPr
     {}
   ); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional
 
-  return <>{component}</>;
+  return (
+    <>
+      <FormControl variant='standard' sx={{ display: 'flex', flexDirection: 'row' }}>
+        <FormLabel sx={{ marginRight: '2rem' }}>{label}</FormLabel>
+        {component}
+      </FormControl>
+    </>
+  );
 }