@pega/react-sdk-overrides 0.24.3 → 0.25.1

package/lib/field/TextArea/TextArea.tsx

@@ -1,5 +1,7 @@
-import { TextField } from '@material-ui/core';
+import { useEffect, useState } from 'react';
+import { TextField } from '@mui/material';
 
+import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
@@ -13,14 +15,13 @@ export default function TextArea(props: TextAreaProps) {
   const FieldValueList = getComponentFromMap('FieldValueList');
 
   const {
+    getPConnect,
     label,
     required,
     disabled,
     value = '',
     validatemessage,
     status,
-    onChange,
-    onBlur,
     readOnly,
     testId,
     fieldMetadata,
@@ -30,12 +31,20 @@ export default function TextArea(props: TextAreaProps) {
     placeholder
   } = props;
   const helperTextToDisplay = validatemessage || helperText;
-
+  const pConn = getPConnect();
+  const actions = pConn.getActionsApi();
+  const propName = (pConn.getStateProps() as any).value;
   const maxLength = fieldMetadata?.maxLength;
 
+  const [inputValue, setInputValue] = useState('');
+
   let readOnlyProp = {};
 
-  if (displayMode === 'LABELS_LEFT') {
+  useEffect(() => {
+    setInputValue(value);
+  }, [value]);
+
+  if (displayMode === 'DISPLAY_ONLY') {
     return <FieldValueList name={hideLabel ? '' : label} value={value} />;
   }
 
@@ -55,6 +64,15 @@ export default function TextArea(props: TextAreaProps) {
     'data-test-id': testId
   };
 
+  function handleChange(event) {
+    // update internal value
+    setInputValue(event?.target?.value);
+  }
+
+  function handleBlur() {
+    handleEvent(actions, 'changeNblur', propName, inputValue);
+  }
+
   return (
     <TextField
       multiline
@@ -67,11 +85,11 @@ export default function TextArea(props: TextAreaProps) {
       size='small'
       required={required}
       disabled={disabled}
-      onChange={onChange}
-      onBlur={!readOnly ? onBlur : undefined}
+      onChange={handleChange}
+      onBlur={!readOnly ? handleBlur : undefined}
       error={status === 'error'}
       label={label}
-      value={value}
+      value={inputValue}
       InputProps={{ ...readOnlyProp, inputProps: { maxLength, ...testProp } }}
     />
   );

package/lib/field/TextContent/TextContent.tsx

@@ -1,4 +1,4 @@
-import { Typography } from '@material-ui/core';
+import { Typography } from '@mui/material';
 
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 

package/lib/field/TextInput/TextInput.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { TextField } from '@material-ui/core';
+import { TextField } from '@mui/material';
 
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
@@ -47,7 +47,7 @@ export default function TextInput(props: TextInputProps) {
     setInputValue(value);
   }, [value]);
 
-  if (displayMode === 'LABELS_LEFT') {
+  if (displayMode === 'DISPLAY_ONLY') {
     return <FieldValueList name={hideLabel ? '' : label} value={value} />;
   }
 

package/lib/field/Time/Time.tsx

@@ -1,7 +1,8 @@
-import { KeyboardTimePicker } from '@material-ui/pickers';
-import AccessTimeIcon from '@material-ui/icons/AccessTime';
+import { TimePicker } from '@mui/x-date-pickers/TimePicker';
+// import AccessTimeIcon from '@mui/icons-material/AccessTime';
 import dayjs from 'dayjs';
 
+import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
@@ -14,10 +15,12 @@ export default function Time(props: TimeProps) {
   const FieldValueList = getComponentFromMap('FieldValueList');
   const TextInput = getComponentFromMap('TextInput');
 
-  const { label, required, disabled, value = '', validatemessage, status, onChange, readOnly, helperText, displayMode, hideLabel, testId } = props;
+  const { getPConnect, label, required, disabled, value = '', validatemessage, status, readOnly, helperText, displayMode, hideLabel, testId } = props;
   const helperTextToDisplay = validatemessage || helperText;
-
-  if (displayMode === 'LABELS_LEFT') {
+  const pConn = getPConnect();
+  const actions = pConn.getActionsApi();
+  const propName = (pConn.getStateProps() as any).value;
+  if (displayMode === 'DISPLAY_ONLY') {
     return <FieldValueList name={hideLabel ? '' : label} value={value} />;
   }
 
@@ -36,12 +39,12 @@ export default function Time(props: TimeProps) {
   };
 
   const handleChange = date => {
-    const theValue = date && date.isValid() ? date.format('HH:mm') : null;
-    onChange({ value: theValue });
+    const theValue = date && date.isValid() ? date.format('HH:mm:ss') : null;
+    handleEvent(actions, 'changeNblur', propName, theValue);
   };
 
   let timeValue: any = null;
-  if (value) {
+  if (value && Object.keys(value).length) {
     const timeArray = value.split(':').map(itm => Number(itm));
     timeValue = dayjs().hour(timeArray[0]).minute(timeArray[1]);
   }
@@ -52,25 +55,29 @@ export default function Time(props: TimeProps) {
   //
 
   return (
-    <KeyboardTimePicker
-      variant='inline'
-      inputVariant='outlined'
-      placeholder='hh:mm am'
-      keyboardIcon={<AccessTimeIcon />}
-      fullWidth
-      required={required}
+    <TimePicker
+      // keyboardIcon={<AccessTimeIcon />}
+      // fullWidth
+
       disabled={disabled}
-      error={status === 'error'}
-      helperText={helperTextToDisplay}
       minutesStep={5}
-      size='small'
       label={label}
-      autoOk
-      mask='__:__ _m'
+      // autoOk
+      // mask='__:__ _m'
       format='hh:mm a'
       value={timeValue}
       onChange={handleChange}
-      InputProps={{ inputProps: { ...testProp } }}
+      slotProps={{
+        textField: {
+          variant: 'outlined',
+          placeholder: 'hh:mm am',
+          required,
+          error: status === 'error',
+          helperText: helperTextToDisplay,
+          size: 'small',
+          InputProps: { ...testProp }
+        }
+      }}
     />
   );
 }

package/lib/field/URL/URL.tsx

@@ -1,5 +1,7 @@
-import { TextField } from '@material-ui/core';
+import { useEffect, useState } from 'react';
+import { TextField } from '@mui/material';
 
+import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
@@ -16,14 +18,13 @@ export default function URLComponent(props: URLComponentProps) {
   const TextInput = getComponentFromMap('TextInput');
 
   const {
+    getPConnect,
     label,
     required,
     disabled,
     value = '',
     validatemessage,
     status,
-    onChange,
-    onBlur,
     readOnly,
     testId,
     helperText,
@@ -33,7 +34,17 @@ export default function URLComponent(props: URLComponentProps) {
   } = props;
   const helperTextToDisplay = validatemessage || helperText;
 
-  if (displayMode === 'LABELS_LEFT') {
+  const [inputValue, setInputValue] = useState('');
+
+  const pConn = getPConnect();
+  const actions = pConn.getActionsApi();
+  const propName = (pConn.getStateProps() as any).value;
+
+  useEffect(() => {
+    setInputValue(value);
+  }, [value]);
+
+  if (displayMode === 'DISPLAY_ONLY') {
     return <FieldValueList name={hideLabel ? '' : label} value={value} />;
   }
 
@@ -51,6 +62,14 @@ export default function URLComponent(props: URLComponentProps) {
     'data-test-id': testId
   };
 
+  const handleChange = event => {
+    setInputValue(event?.target?.value);
+  };
+
+  function handleBlur() {
+    handleEvent(actions, 'changeNblur', propName, inputValue);
+  }
+
   return (
     <TextField
       type='url'
@@ -61,11 +80,11 @@ export default function URLComponent(props: URLComponentProps) {
       size='small'
       required={required}
       disabled={disabled}
-      onChange={onChange}
-      onBlur={!readOnly ? onBlur : undefined}
+      onChange={handleChange}
+      onBlur={!readOnly ? handleBlur : undefined}
       error={status === 'error'}
       label={label}
-      value={value}
+      value={inputValue}
       InputProps={{ inputProps: { ...testProp } }}
     />
   );

package/lib/field/UserReference/UserReference.tsx

@@ -1,5 +1,5 @@
 import { memo, useEffect, useState } from 'react';
-import { Typography } from '@material-ui/core';
+import { Typography } from '@mui/material';
 
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
@@ -80,10 +80,8 @@ const UserReference = (props: UserReferenceProps) => {
       };
 
       PCore.getRestClient()
-        // @ts-ignore - Argument of type '{ queryPayload: { dataViewName: string; }; }' is not assignable to parameter of type 'RestApiOptionsObject'
-        // @ts-ignore - Expected 3 arguments, but got 2
         .invokeRestApi('getListData', { queryPayload })
-        .then((res: any) => {
+        .then(res => {
           const ddDataSource = res.data.data.map(listItem => ({
             key: listItem.pyUserIdentifier,
             value: listItem.pyUserName
@@ -99,7 +97,7 @@ const UserReference = (props: UserReferenceProps) => {
 
   let userReferenceComponent: any = null;
 
-  if (displayMode === 'LABELS_LEFT') {
+  if (displayMode === 'DISPLAY_ONLY') {
     return <FieldValueList name={hideLabel ? '' : label} value={userName || ''} />;
   }
 

package/lib/helpers/common-utils.ts

@@ -1,4 +1,27 @@
-/* eslint-disable import/prefer-default-export */
 export function isEmptyObject(obj: Object): boolean {
   return Object.keys(obj).length === 0;
 }
+
+/**
+ * Get a localized value from the Generic Fields
+ * @param path - The path within Generic Fields (e.g., 'CosmosFields.fields.lists')
+ * @param key - The key of the string to localize
+ * @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];
+
+  if (!localeStore) return key;
+
+  // Split the path and traverse the object
+  const pathParts = path.split('.');
+  let currentObj = localeStore;
+
+  for (const part of pathParts) {
+    if (!currentObj[part]) return key;
+    currentObj = currentObj[part];
+  }
+
+  return currentObj[key] || key;
+}

package/lib/helpers/field-group-utils.ts

@@ -49,8 +49,8 @@ export function buildView(pConn, index, viewConfigPath): ReactElement {
   };
 
   const view = PCore.createPConnect(config);
-  if (pConn.getConfigProps()?.displayMode === 'LABELS_LEFT') {
-    view.getPConnect()?.setInheritedProp('displayMode', 'LABELS_LEFT');
+  if (pConn.getConfigProps()?.displayMode === 'DISPLAY_ONLY') {
+    view.getPConnect()?.setInheritedProp('displayMode', 'DISPLAY_ONLY');
   }
   return createElement(createPConnectComponent(), view);
 }

package/lib/helpers/formatters/Currency.ts

@@ -5,10 +5,7 @@ import CurrencyMap from './CurrencyMap';
 function NumberFormatter(value, { locale = 'en-US', decPlaces = 2, style = '', currency = 'USD' } = {}): string {
   const currentLocale: string | undefined = getLocale(locale);
   if (value !== null && value !== undefined) {
-    return Number(value).toLocaleString(currentLocale, {
-      minimumFractionDigits: decPlaces,
-      maximumFractionDigits: decPlaces
-    });
+    return Number(value).toLocaleString(currentLocale, { minimumFractionDigits: decPlaces, maximumFractionDigits: decPlaces });
   }
   return value;
 }
@@ -20,14 +17,16 @@ function CurrencyFormatter(
   const currentLocale: string | undefined = getLocale(locale);
   let formattedValue: string = value;
   if (value !== null && value !== undefined && value !== '') {
-    formattedValue = NumberFormatter(value, {
-      locale: currentLocale,
-      decPlaces,
-      style,
-      currency
-    });
+    formattedValue = NumberFormatter(value, { locale: currentLocale, decPlaces, style, currency });
 
-    let countryCode: string | undefined = currentLocale?.split('-')[1].toUpperCase();
+    // For currency other than EUR, we need to determine the country code from currency code
+    // If currency is EUR, we use the locale to determine the country code
+    let countryCode: string | undefined;
+    if (currency !== 'EUR') {
+      countryCode = currency.substring(0, 2);
+    } else {
+      countryCode = currentLocale?.split('-')[1].toUpperCase();
+    }
 
     // If countryCode is still undefined, setting it as US
     if (!countryCode) {
@@ -67,11 +66,7 @@ export default {
   Currency: (value, options) => CurrencyFormatter(value, options),
   'Currency-Code': (value, options) => CurrencyFormatter(value, { ...options, symbol: false }),
   Decimal: (value, options) => NumberFormatter(value, options),
-  'Decimal-Auto': (value, options) =>
-    NumberFormatter(value, {
-      ...options,
-      decPlaces: Number.isInteger(value) ? 0 : 2
-    }),
+  '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: '%' })
 };

package/lib/helpers/formatters/common.ts

@@ -7,7 +7,8 @@ export function getLocale(locale: string = '') {
   return Intl.DateTimeFormat().resolvedOptions().locale;
 }
 
-export function getCurrentTimezone(timezone: string = 'America/New_York') {
+export function getCurrentTimezone(timezone?: string) {
+  // use timezone if specified
   if (timezone) return timezone;
   return PCore?.getLocaleUtils?.().getTimeZoneInUse?.();
 }

package/lib/helpers/formatters/index.ts

@@ -18,10 +18,8 @@ function getDateObject(text): Date {
   const day = parseInt(timeStamp.substr(6, 2), 10);
 
   const date = new Date();
-
-  date.setDate(day);
-  date.setMonth(month);
-  date.setFullYear(year);
+  // Fix to handle all the dates, raised via https://github.com/pegasystems/react-sdk-components/issues/442
+  date.setFullYear(year, month, day);
 
   if (isDateTime) {
     const hours = parseInt(timeStamp.substr(9, 2), 10);

package/lib/helpers/simpleTableHelpers.ts

@@ -231,7 +231,7 @@ export const filterData = filterByColumns => {
           case 'Date':
           case 'DateTime':
           case 'Time':
-            value = item[filterObj.ref] !== null ?? item[filterObj.ref] !== '' ? Utils.getSeconds(item[filterObj.ref]) : null;
+            value = (item[filterObj.ref] !== null ?? item[filterObj.ref] !== '') ? Utils.getSeconds(item[filterObj.ref]) : null;
             filterValue =
               filterObj.containsFilterValue !== null && filterObj.containsFilterValue !== '' ? Utils.getSeconds(filterObj.containsFilterValue) : null;
 

package/lib/infra/ActionButtons/ActionButtons.tsx

@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
-import Button from '@material-ui/core/Button';
-import { Grid, Divider } from '@material-ui/core';
+import makeStyles from '@mui/styles/makeStyles';
+import Button from '@mui/material/Button';
+import { Grid, Divider } from '@mui/material';
 
 // ActionButtons does NOT have getPConnect. So, no need to extend from PConnProps
 interface ActionButtonsProps {

package/lib/infra/Assignment/Assignment.tsx

@@ -1,9 +1,10 @@
 import React, { PropsWithChildren, useEffect, useState } from 'react';
-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';
 
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import { useFocusFirstField, useScrolltoTop } from '@pega/react-sdk-components/lib/hooks';
 
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
@@ -41,6 +42,8 @@ export default function Assignment(props: PropsWithChildren<AssignmentProps>) {
   const cancelAssignment = actionsAPI.cancelAssignment.bind(actionsAPI);
   const saveAssignment = actionsAPI.saveAssignment?.bind(actionsAPI);
   const cancelCreateStageAssignment = actionsAPI.cancelCreateStageAssignment.bind(actionsAPI);
+  const approveCase = actionsAPI.approveCase?.bind(actionsAPI);
+  const rejectCase = actionsAPI.rejectCase?.bind(actionsAPI);
   // const showPage = actionsAPI.showPage.bind(actionsAPI);
 
   const [showSnackbar, setShowSnackbar] = useState(false);
@@ -84,6 +87,10 @@ export default function Assignment(props: PropsWithChildren<AssignmentProps>) {
     return formedSteps;
   }
 
+  const scrollId = window.location.href.includes('embedded') ? '#pega-part-of-page' : '#portal';
+  useScrolltoTop(scrollId, children);
+  useFocusFirstField('Assignment', children);
+
   useEffect(() => {
     if (children) {
       const firstChild = Array.isArray(children) ? children[0] : children;
@@ -92,7 +99,7 @@ export default function Assignment(props: PropsWithChildren<AssignmentProps>) {
       const oData: any = thePConn.getDataObject(''); // 1st arg empty string until typedefs allow it to be optional
 
       if (oWorkData?.caseInfo && oWorkData.caseInfo.assignments !== null) {
-        const oCaseInfo = oData.caseInfo;
+        const oCaseInfo = oData?.caseInfo;
 
         if (oCaseInfo && oCaseInfo.actionButtons) {
           setActionButtons(oCaseInfo.actionButtons);
@@ -132,7 +139,7 @@ export default function Assignment(props: PropsWithChildren<AssignmentProps>) {
     setShowSnackbar(true);
   }
 
-  function handleSnackbarClose(event: React.SyntheticEvent | React.MouseEvent, reason?: string) {
+  function handleSnackbarClose(event: React.SyntheticEvent<any> | Event, reason?: string) {
     if (reason === 'clickaway') {
       return;
     }
@@ -140,7 +147,7 @@ export default function Assignment(props: PropsWithChildren<AssignmentProps>) {
   }
 
   function onSaveActionSuccess(data) {
-    actionsAPI.cancelAssignment(itemKey).then(() => {
+    actionsAPI.cancelAssignment(itemKey, false).then(() => {
       PCore.getPubSubUtils().publish(PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.CREATE_STAGE_SAVED, data);
     });
   }
@@ -167,7 +174,6 @@ export default function Assignment(props: PropsWithChildren<AssignmentProps>) {
 
           savePromise
             .then(() => {
-              // @ts-ignore - Property 'c11nEnv' is private and only accessible within class 'CaseInfo'.
               const caseType = thePConn.getCaseInfo().c11nEnv.getValue(PCore.getConstants().CASE_INFO.CASE_TYPE_ID);
               onSaveActionSuccess({ caseType, caseID, assignmentID });
             })
@@ -182,10 +188,8 @@ export default function Assignment(props: PropsWithChildren<AssignmentProps>) {
           // check if create stage (modal)
           const { PUB_SUB_EVENTS } = PCore.getConstants();
           const { publish } = PCore.getPubSubUtils();
-          // @ts-ignore - Property 'isAssignmentInCreateStage' is private and only accessible within class 'CaseInfo'
           const isAssignmentInCreateStage = thePConn.getCaseInfo().isAssignmentInCreateStage();
           const isLocalAction =
-            // @ts-ignore - Property 'isLocalAction' is private and only accessible within class 'CaseInfo'.
             thePConn.getCaseInfo().isLocalAction() ||
             (PCore.getConstants().CASE_INFO.IS_LOCAL_ACTION && getPConnect().getValue(PCore.getConstants().CASE_INFO.IS_LOCAL_ACTION));
           if (isAssignmentInCreateStage && isInModal && !isLocalAction) {
@@ -199,7 +203,7 @@ export default function Assignment(props: PropsWithChildren<AssignmentProps>) {
                 showToast(`${localizedVal('Cancel failed!', localeCategory)}`);
               });
           } else {
-            const cancelPromise = cancelAssignment(itemKey);
+            const cancelPromise = cancelAssignment(itemKey, false);
 
             cancelPromise
               .then(data => {
@@ -212,11 +216,22 @@ export default function Assignment(props: PropsWithChildren<AssignmentProps>) {
           break;
         }
 
+        case 'rejectCase': {
+          const rejectPromise = rejectCase(itemKey);
+
+          rejectPromise
+            .then(() => {})
+            .catch(() => {
+              showToast(`${localizedVal('Rejection failed!', localeCategory)}`);
+            });
+
+          break;
+        }
+
         default:
           break;
       }
     } else if (sButtonType === 'primary') {
-      // eslint-disable-next-line sonarjs/no-small-switch
       switch (sAction) {
         case 'finishAssignment': {
           const finishPromise = finishAssignment(itemKey);
@@ -230,6 +245,18 @@ export default function Assignment(props: PropsWithChildren<AssignmentProps>) {
           break;
         }
 
+        case 'approveCase': {
+          const approvePromise = approveCase(itemKey);
+
+          approvePromise
+            .then(() => {})
+            .catch(() => {
+              showToast(`${localizedVal('Approve failed!', localeCategory)}`);
+            });
+
+          break;
+        }
+
         default:
           break;
       }
@@ -245,7 +272,6 @@ export default function Assignment(props: PropsWithChildren<AssignmentProps>) {
   }
 
   // expected format of refreshConditions : [{field: ".Name", event: "Changes"}]
-  // @ts-ignore - Property 'getActionRefreshConditions' is private and only accessible within class 'CaseInfo'
   const refreshConditions = thePConn.getCaseInfo()?.getActionRefreshConditions();
   const context = thePConn.getContextName();
   const pageReference = thePConn.getPageReference();