Merge branch 'master' into mod/tor/themingChanges

Author: vishalshrm539

package-lock.json

@@ -57,7 +57,8 @@
     "@mui/material": "^6.5.0",
     "@mui/styles": "^6.5.0",
     "@mui/x-date-pickers": "^7.29.4",
-    "@pega/auth": "~0.2.31",
+    "@pega/auth": "~0.2.33",
+    "@react-google-maps/api": "^2.20.7",
     "@tinymce/tinymce-react": "^6.3.0",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.13",
@@ -76,7 +77,7 @@
   },
   "devDependencies": {
     "@pega/configs": "^0.16.3",
-    "@pega/constellationjs": "~24.2.2",
+    "@pega/constellationjs": "^0.25.1",
     "@pega/eslint-config": "^0.17.0",
     "@pega/pcore-pconnect-typedefs": "~3.2.2",
     "@pega/tsconfig": "^0.17.0",

package.json

@@ -20,6 +20,7 @@
     "@mui/material": "^6.5.0",
     "@mui/styles": "^6.5.0",
     "@mui/x-date-pickers": "^7.29.4",
+    "@react-google-maps/api": "^2.20.7",
     "@tinymce/tinymce-react": "^6.3.0",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.13",

packages/react-sdk-components/package.json

@@ -1,3 +1,4 @@
+/* eslint-disable max-classes-per-file */
 import { Component, createElement } from 'react';
 import PropTypes from 'prop-types';
 import { connect, shallowEqual } from 'react-redux';
@@ -100,6 +101,15 @@ const connectRedux = (component, c11nEnv) => {
             }
           }
         }
+        // For CaseSummary, we need to compare changes in
+        //  primaryFields and secondary Fields
+        if (next.template === 'CaseSummary') {
+          for (const key of Object.keys(prev)) {
+            if (!PCore.isDeepEqual(next[key], prev[key])) {
+              return false;
+            }
+          }
+        }
         /* TODO For some rawConfig we are not getting routingInfo under allStateProps */
         return !routingInfoCompare(next, prev);
       }

packages/react-sdk-components/src/bridge/react_pconnect.jsx

@@ -144,4 +144,8 @@
   color: var(--secondary-button-text-color) !important;
   font-size: 0.875rem !important;
   cursor: pointer !important;
+
+/* Support for google map autocomplete */
+.pac-container {
+  z-index: 2147483647;
 }

packages/react-sdk-components/src/common.css

@@ -1,4 +1,4 @@
-import Grid from '@mui/material/Grid';
+import Grid2 from '@mui/material/Grid2';
 import './Banner.css';
 
 // AlertBanner is one of the few components that does NOT have getPConnect.
@@ -37,14 +37,14 @@ export default function Banner(props: BannerProps) {
           </div>
         </div>
       </div>
-      <Grid container item xs={12} className='banner-layout' spacing={1}>
-        <Grid item xs={variantMap[variant][0]} style={{ padding: '1em' }}>
+      <Grid2 container size={12} className='banner-layout' spacing={1}>
+        <Grid2 size={{ xs: variantMap[variant][0] }} style={{ padding: '1em' }}>
           {a}
-        </Grid>
-        <Grid item xs={variantMap[variant][1]} style={{ padding: '1em' }}>
+        </Grid2>
+        <Grid2 size={{ xs: variantMap[variant][1] }} style={{ padding: '1em' }}>
           {b}
-        </Grid>
-      </Grid>
+        </Grid2>
+      </Grid2>
     </div>
   );
 }

packages/react-sdk-components/src/components/designSystemExtension/Banner/Banner.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 import isDeepEqual from 'fast-deep-equal/react';
-import Grid from '@mui/material/Grid';
+import Grid2 from '@mui/material/Grid2';
 import TextField from '@mui/material/TextField';
 
 import { getDateFormatInfo } from '../../helpers/date-format-utils';
@@ -123,10 +123,8 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
               slotProps={{
                 input: {
                   readOnly: true,
-                  inputProps: {
-                    style: { cursor: 'pointer' },
-                    disableUnderline: true
-                  }
+                  disableUnderline: true,
+                  inputProps: { style: { cursor: 'pointer' } }
                 }
               }}
             />
@@ -229,9 +227,9 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
       // 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 (
-          <Grid item xs={6} key={field.config.label}>
+          <Grid2 size={{ xs: 6 }} key={field.config.label}>
             {getFieldValue(field)}
-          </Grid>
+          </Grid2>
         );
       }
 
@@ -265,8 +263,8 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
   }
 
   return (
-    <Grid container className='psdk-case-summary-fields'>
+    <Grid2 container className='psdk-case-summary-fields'>
       {theFieldsAsGridItems}
-    </Grid>
+    </Grid2>
   );
 }

packages/react-sdk-components/src/components/designSystemExtension/CaseSummaryFields/CaseSummaryFields.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/no-array-index-key */
 import React, { createElement, isValidElement } from 'react';
-import Grid from '@mui/material/Grid';
+import Grid2 from '@mui/material/Grid2';
 import Typography from '@mui/material/Typography';
 import makeStyles from '@mui/styles/makeStyles';
 
@@ -62,11 +62,11 @@ export default function DetailsFields(props: DetailsFieldsProps) {
     const dispValue = field.label;
 
     return (
-      <Grid item xs={6} key={keyVal}>
+      <Grid2 size={{ xs: 6 }} key={keyVal}>
         <Typography variant='body2' component='span' className={`${classes.fieldLabel}`}>
           {dispValue}
         </Typography>
-      </Grid>
+      </Grid2>
     );
   }
 
@@ -97,21 +97,21 @@ export default function DetailsFields(props: DetailsFieldsProps) {
     const formattedValue = formatItemValue(field);
 
     return (
-      <Grid item xs={6} key={keyVal}>
+      <Grid2 size={{ xs: 6 }} key={keyVal}>
         <Typography variant='body2' component='span' className={classes.fieldValue}>
           {formattedValue}
         </Typography>
-      </Grid>
+      </Grid2>
     );
   }
 
   function getGridItem(field: any, keyVal: string) {
     return (
-      <Grid item xs={12} key={keyVal}>
+      <Grid2 size={{ xs: 12 }} key={keyVal}>
         <Typography variant='body2' component='span' className={classes.fieldValue}>
           {field?.value}
         </Typography>
-      </Grid>
+      </Grid2>
     );
   }
 
@@ -122,16 +122,16 @@ export default function DetailsFields(props: DetailsFieldsProps) {
       }
       if (isValidElement(field?.value)) {
         return (
-          <Grid container spacing={1} style={{ padding: '4px 0px' }} key={index}>
+          <Grid2 container spacing={1} style={{ padding: '4px 0px' }} key={index}>
             {getGridItem(field, `${index}-item`)}
-          </Grid>
+          </Grid2>
         );
       }
       return (
-        <Grid container spacing={1} style={{ padding: '4px 0px' }} key={index}>
+        <Grid2 container spacing={1} style={{ padding: '4px 0px' }} key={index}>
           {getGridItemLabel(field, `${index}-label`)}
           {getGridItemValue(field, `${index}-value`)}
-        </Grid>
+        </Grid2>
       );
     });
     return gridItems;

packages/react-sdk-components/src/components/designSystemExtension/DetailsFields/DetailsFields.tsx

@@ -1,5 +1,5 @@
 import { type PropsWithChildren, useState } from 'react';
-import Grid from '@mui/material/Grid';
+import Grid2 from '@mui/material/Grid2';
 import makeStyles from '@mui/styles/makeStyles';
 import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
@@ -45,18 +45,18 @@ export default function FieldGroup(props: PropsWithChildren<FieldGroupProps>) {
   const [collapsed, setCollapsed] = useState(false);
 
   const descAndChildren = (
-    <Grid container>
+    <Grid2 container>
       <div className={classes.fullWidth}>{children}</div>
-    </Grid>
+    </Grid2>
   );
 
   const headerClickHandler = () => {
     setCollapsed(current => !current);
   };
 
   return (
-    <Grid container spacing={4} justifyContent='space-between'>
-      <Grid item style={{ width: '100%' }}>
+    <Grid2 container spacing={4} justifyContent='space-between'>
+      <Grid2 style={{ width: '100%' }}>
         {name && (
           <div className={classes.fieldMargin}>
             {collapsible ? (
@@ -74,7 +74,7 @@ export default function FieldGroup(props: PropsWithChildren<FieldGroupProps>) {
           <div key='instructions' className={classes.instructionText} dangerouslySetInnerHTML={{ __html: instructions }} />
         )}
         {!collapsed && descAndChildren}
-      </Grid>
-    </Grid>
+      </Grid2>
+    </Grid2>
   );
 }