@pega/react-sdk-overrides 8.23.10 → 8.23.11-debug2

package/lib/designSystemExtension/AlertBanner/AlertBanner.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Alert } from '@material-ui/lab';
+
+const SEVERITY_MAP = {
+  urgent: 'error',
+  warning: 'warning',
+  success: 'success',
+  info: 'info'
+};
+
+export default function AlertBanner(props) {
+  const { id, variant, messages, onDismiss } = props;
+  let additionalProps = {};
+
+  if (onDismiss) {
+    additionalProps = {
+      onClose: onDismiss
+    };
+  }
+
+  return (
+    <div id={id}>
+      {messages.map(message => (
+        <Alert
+          key={message}
+          variant='outlined'
+          severity={SEVERITY_MAP[variant]}
+          {...additionalProps}
+        >
+          {message}
+        </Alert>
+      ))}
+    </div>
+  );
+}
+
+AlertBanner.propTypes = {
+  id: PropTypes.string,
+  variant: PropTypes.string,
+  messages: PropTypes.arrayOf(PropTypes.string),
+  onDismiss: PropTypes.any
+};

package/lib/designSystemExtension/AlertBanner/index.tsx

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

package/lib/designSystemExtension/FieldGroupList/FieldGroupList.tsx

@@ -6,14 +6,12 @@ import Link from '@material-ui/core/Link';
 
 import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
 
-declare const PCore: any;
-
 const FieldGroupList = props => {
   let menuIconOverride$ = 'trash';
   if (menuIconOverride$) {
     menuIconOverride$ = Utils.getImageSrc(
       menuIconOverride$,
-      PCore.getAssetLoader().getStaticServerUrl()
+      Utils.getSDKStaticConentUrl()
     );
   }
 

package/lib/designSystemExtension/Operator/Operator.tsx

@@ -9,7 +9,10 @@ import { makeStyles } from '@material-ui/core/styles';
 
 import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
 
-declare const PCore: any;
+import PCoreType from '@pega/pcore-pconnect-typedefs/types/pcore';
+
+declare const PCore: typeof PCoreType;
+
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -59,6 +62,8 @@ export default function Operator(props) {
   function showOperatorDetails(event) {
 
     const operatorPreviewPromise = PCore.getUserApi().getOperatorDetails(caseOpId);
+    const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+    const localeCategory = 'Operator';
 
     operatorPreviewPromise.then((res) => {
       const fillerString = "---";
@@ -71,27 +76,27 @@ export default function Operator(props) {
         fields = [
           {
             id: "pyPosition",
-            name: "Position",
+            name: localizedVal("Position", localeCategory),
             value: res.data.pyOperatorInfo.pyPosition ? res.data.pyOperatorInfo.pyPosition : fillerString
           },
           {
             id: "pyOrganization",
-            name: "Organization",
+            name: localizedVal("Organization", localeCategory),
             value: res.data.pyOperatorInfo.pyOrganization ? res.data.pyOperatorInfo.pyOrganization : fillerString
           },
           {
             id: "ReportToUserName",
-            name: "Reports to",
+            name: localizedVal('Reports to', localeCategory),
             value: res.data.pyOperatorInfo.pyReportToUserName ? res.data.pyOperatorInfo.pyReportToUserName : fillerString
           },
           {
             id: "pyTelephone",
-            name: "Telephone",
+            name: localizedVal('Telephone', localeCategory),
             value: res.data.pyOperatorInfo.pyTelephone ? <a href={`tel:${res.data.pyOperatorInfo.pyTelephone}`}>{res.data.pyOperatorInfo.pyTelephone}</a> : fillerString
           },
           {
             id: "pyEmailAddress",
-            name: "Email address",
+            name: localizedVal('Email address', localeCategory),
             value: res.data.pyOperatorInfo.pyEmailAddress ? <a href={`mailto:${res.data.pyOperatorInfo.pyEmailAddress}`}>{res.data.pyOperatorInfo.pyEmailAddress}</a> : fillerString
           }
         ];
@@ -101,27 +106,27 @@ export default function Operator(props) {
         fields = [
           {
             id: "pyPosition",
-            name: "Position",
+            name: localizedVal("Position", localeCategory),
             value: fillerString
           },
           {
             id: "pyOrganization",
-            name: "Organization",
+            name: localizedVal("Organization", localeCategory),
             value: fillerString
           },
           {
             id: "ReportToUserName",
-            name: "Reports to",
+            name: localizedVal('Reports to', localeCategory),
             value: fillerString
           },
           {
             id: "pyTelephone",
-            name: "Telephone",
+            name: localizedVal('Telephone', localeCategory),
             value: fillerString
           },
           {
             id: "pyEmailAddress",
-            name: "Email address",
+            name: localizedVal('Email address', localeCategory),
             value: fillerString
           }
         ];

package/lib/designSystemExtension/WssQuickCreate/WssQuickCreate.tsx

@@ -7,8 +7,8 @@ export default function WssQuickCreate(props) {
 
   return (
     <div>
-      <h1 className='quick-link-heading'>{heading}</h1>
-      <ul className='quick-link-ul-list'>
+      <h1 id="quick-links-heading" className='quick-link-heading'>{heading}</h1>
+      <ul id="quick-links" className='quick-link-ul-list'>
         {actions &&
           actions.map(element => {
             return (

package/lib/field/CancelAlert/CancelAlert.tsx

@@ -4,7 +4,9 @@ import CloseIcon from '@material-ui/icons/Close';
 
 import './CancelAlert.css';
 
-declare const PCore;
+// Remove this and use "real" PCore type once .d.ts is fixed (currently shows 2 errors)
+declare const PCore: any;
+
 
 const CancelAlert = props => {
   const { pConn, updateAlertState } = props;
@@ -15,6 +17,8 @@ const CancelAlert = props => {
   const caseInfo = pConn.getCaseInfo();
   const caseName = caseInfo.getName();
   const ID = caseInfo.getID();
+  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const localeCategory = 'ModalContainer';
 
   function showToast(message: string) {
     setSnackbarMessage(message);
@@ -53,7 +57,7 @@ const CancelAlert = props => {
             );
           })
           .catch(() => {
-            showToast('Save failed');
+            showToast(localizedVal('Save failed', localeCategory));
           });
         break;
 
@@ -71,7 +75,7 @@ const CancelAlert = props => {
             PCore.getPubSubUtils().publish(PCore.getConstants().PUB_SUB_EVENTS.EVENT_CANCEL);
           })
           .catch(() => {
-            showToast('Delete failed.');
+            showToast(localizedVal('Delete failed.', localeCategory));
           });
         break;
 
@@ -86,22 +90,22 @@ const CancelAlert = props => {
         <div className='cancel-alert-top'>
           <h3>{`Delete ${caseName}(${ID})`}</h3>
           <div>
-            <p>{`Are you sure you want to delete ${caseName} (${ID})?`}</p>
-            <p>Alternatively, you can continue working or save your work for later.</p>
+            <p>{`${localizedVal('Are you sure you want to delete', localeCategory)} ${caseName} (${ID})?`}</p>
+            <p>{localizedVal('Alternatively, you can continue working or save your work for later.', localeCategory)}</p>
           </div>
           <div className='action-controls'>
             <Grid container spacing={4} justifyContent='space-between'>
               <Grid item>
                 <Button variant='outlined' color='primary' onClick={() => buttonClick('save')}>
-                  Save for later
+                  {localizedVal('Save for later', localeCategory)}
                 </Button>
               </Grid>
               <Grid item>
                 <Button variant='outlined' color='primary' onClick={() => buttonClick('continue')}>
-                  Continue Working
+                  {localizedVal('Continue Working', localeCategory)}
                 </Button>
                 <Button variant='contained' color='primary' onClick={() => buttonClick('delete')}>
-                  Delete
+                  {localizedVal('Delete', localeCategory)}
                 </Button>
               </Grid>
             </Grid>

package/lib/field/Checkbox/Checkbox.tsx

@@ -17,6 +17,7 @@ export default function CheckboxComponent(props) {
     readOnly,
     testId,
     required,
+    disabled,
     status,
     helperText,
     validatemessage,
@@ -53,12 +54,12 @@ export default function CheckboxComponent(props) {
     thePConn.getValidationApi().validate(event.target.checked);
   };
 
-  let theCheckbox = <Checkbox color='primary' />;
+  let theCheckbox = <Checkbox color='primary' disabled={disabled} />;
 
   if (readOnly) {
     // Workaround for lack of InputProps readOnly from https://github.com/mui-org/material-ui/issues/17043
     //  Also note that we need to turn off the onChange call in the FormControlLabel wrapper, too. See below!
-    theCheckbox = <Checkbox value={value || false} onChange={handleChange} readOnly={readOnly} />;
+    theCheckbox = <Checkbox value={value || false} readOnly={readOnly} />;
   }
 
   return (

package/lib/field/Currency/currency-utils.ts

@@ -3,7 +3,10 @@ import { default as CurrencyAlias} from '@pega/react-sdk-components/lib/componen
 // eslint-disable-next-line import/no-named-default
 import { default as CurrencyMapAlias } from '@pega/react-sdk-components/lib/components/helpers/formatters/CurrencyMap';
 
-declare const PCore: any;
+import PCoreType from '@pega/pcore-pconnect-typedefs/types/pcore';
+
+declare const PCore: typeof PCoreType;
+
 
 export const getCurrencyOptions = (inISOCode: string) => {
 

package/lib/field/Date/Date.tsx

@@ -3,9 +3,14 @@ import { KeyboardDatePicker } from '@material-ui/pickers';
 import TextInput from '@pega/react-sdk-components/lib/components/field/TextInput';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
-import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters/';
+import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
 import { dateFormatInfoDefault, getDateFormatInfo} from '@pega/react-sdk-components/lib/components/helpers/date-format-utils';
 
+// Will return the date string in YYYY-MM-DD format which we'll be POSTing to the server
+function getFormattedDate(date){
+  return `${date.$y.toString()}-${(date.$M + 1).toString().padStart(2, '0')}-${date.$D.toString().padStart(2, '0')}`;
+}
+
 export default function Date(props) {
   const {
     getPConnect,
@@ -60,13 +65,15 @@ export default function Date(props) {
   };
 
   const handleChange = date => {
-    const changeValue = date && date.isValid() ? date.toISOString() : null;
-    onChange({ value: changeValue });
+    if(date && date.isValid()){
+      onChange({ value: getFormattedDate(date) });
+    }
   };
 
   const handleAccept = date => {
-    const changeValue = date && date.isValid() ? date.toISOString() : null;
-    handleEvent(actions, 'changeNblur', propName, changeValue);
+    if(date && date.isValid()){
+      handleEvent(actions, 'changeNblur', propName, getFormattedDate(date));
+    }
   };
 
   return (

package/lib/field/DateTime/DateTime.tsx

@@ -3,7 +3,7 @@ import { KeyboardDateTimePicker } from '@material-ui/pickers';
 import TextInput from '@pega/react-sdk-components/lib/components/field/TextInput';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
-import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters/';
+import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
 import { dateFormatInfoDefault, getDateFormatInfo} from '@pega/react-sdk-components/lib/components/helpers/date-format-utils';
 
 export default function DateTime(props) {

package/lib/field/Decimal/Decimal.tsx

@@ -1,39 +1,85 @@
-import React from 'react';
-import { TextField } from '@material-ui/core';
-import TextInput from '@pega/react-sdk-components/lib/components/field/TextInput';
+import React, { useState, useEffect } from 'react';
+import CurrencyTextField from '@unicef/material-ui-currency-textfield';
 import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
+import { getCurrencyCharacters, getCurrencyOptions } from '@pega/react-sdk-components/lib/components/field/Currency/currency-utils';
+import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
+import { format } from "@pega/react-sdk-components/lib/components/helpers/formatters";
+
+// Using control from: https://github.com/unicef/material-ui-currency-textfield
 
 export default function Decimal(props) {
   const {
+    getPConnect,
     label,
     required,
     disabled,
     value = '',
     validatemessage,
     status,
-    onChange,
-    onBlur,
+    /* onChange, onBlur, */
     readOnly,
     helperText,
     displayMode,
-    hideLabel
+    hideLabel,
+    currencyISOCode = "USD",
+    decimalPrecision = 2,
+    showGroupSeparators = true,
+    testId
   } = props;
+
+  const pConn = getPConnect();
+  const actions = pConn.getActionsApi();
+  const propName = pConn.getStateProps().value;
   const helperTextToDisplay = validatemessage || helperText;
 
+  const [decValue, setDecimalvalue] = useState();
+  const [theCurrDec, setCurrDec] = useState(".");
+  const [theCurrSep, setCurrSep] = useState(",");
+
+  useEffect(() => {
+    const theSymbols = getCurrencyCharacters(currencyISOCode);
+    setCurrDec(theSymbols.theDecimalIndicator);
+    setCurrSep(theSymbols.theDigitGroupSeparator);
+  }, [currencyISOCode]);
+
+  useEffect(() => {
+    setDecimalvalue(value.toString());
+  }, [value]);
+
+  const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
+  const formattedValue = format(value, pConn.getComponentName().toLowerCase(), theCurrencyOptions);
+
   if (displayMode === 'LABELS_LEFT') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} />;
+    return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} />;
   }
 
   if (displayMode === 'STACKED_LARGE_VAL') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />;
+    return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} variant='stacked' />;
   }
 
+  let readOnlyProp = {}; // Note: empty if NOT ReadOnly
+
   if (readOnly) {
-    return <TextInput {...props} />;
+    readOnlyProp = { readOnly: true };
+  }
+
+  let testProp = {};
+
+  testProp = {
+    'data-test-id': testId
+  };
+
+  function decimalOnChange(event) {
+    // update internal value
+    setDecimalvalue(event?.target?.value);
+  }
+
+  function decimalOnBlur(event, inValue) {
+    handleEvent(actions, 'changeNblur', propName, inValue !== '' ? Number(inValue) : inValue);
   }
 
   return (
-    <TextField
+    <CurrencyTextField
       fullWidth
       variant={readOnly ? 'standard' : 'outlined'}
       helperText={helperTextToDisplay}
@@ -41,13 +87,19 @@ export default function Decimal(props) {
       size='small'
       required={required}
       disabled={disabled}
-      onChange={onChange}
-      onBlur={!readOnly ? onBlur : undefined}
+      onChange={decimalOnChange}
+      onBlur={!readOnly ? decimalOnBlur : undefined}
       error={status === 'error'}
       label={label}
-      value={value}
+      value={decValue}
       type='text'
-      inputProps={{ inputMode: 'decimal', pattern: '[0-9]*' }}
+      outputFormat='number'
+      textAlign='left'
+      InputProps={{ ...readOnlyProp, inputProps: { ...testProp, value: decValue } }}
+      currencySymbol=''
+      decimalCharacter={theCurrDec}
+      digitGroupSeparator={showGroupSeparators ? theCurrSep : ''}
+      decimalPlaces={decimalPrecision}
     />
   );
 }

package/lib/field/Dropdown/Dropdown.tsx

@@ -16,7 +16,6 @@ export default function Dropdown(props) {
     label,
     required,
     disabled,
-    placeholder,
     value = '',
     datasource = [],
     validatemessage,
@@ -26,29 +25,65 @@ export default function Dropdown(props) {
     helperText,
     displayMode,
     hideLabel,
-    onRecordChange
+    onRecordChange,
+    fieldMetadata
   } = props;
+  let { placeholder } = props;
+  placeholder = placeholder || 'Select...';
   const [options, setOptions] = useState<Array<IOption>>([]);
   const helperTextToDisplay = validatemessage || helperText;
 
   const thePConn = getPConnect();
   const actionsApi = thePConn.getActionsApi();
   const propName = thePConn.getStateProps().value;
+  const className = thePConn.getCaseInfo().getClassName();
+  const refName = propName?.slice(propName.lastIndexOf('.') + 1);
 
   useEffect(() => {
-    const optionsList = Utils.getOptionList(props, getPConnect().getDataObject());
-    optionsList.unshift({ key: 'Select', value: 'Select...' });
+    const list = Utils.getOptionList(props, getPConnect().getDataObject());
+    const optionsList = [...list];
+    optionsList.unshift({ key: placeholder, value: thePConn.getLocalizedValue(placeholder) });
     setOptions(optionsList);
   }, [datasource]);
 
+  const metaData = Array.isArray(fieldMetadata)
+    ? fieldMetadata.filter(field => field?.classID === className)[0]
+    : fieldMetadata;
+
+  let displayName = metaData?.datasource?.propertyForDisplayText;
+  displayName = displayName?.slice(displayName.lastIndexOf('.') + 1);
+  const localeContext = metaData?.datasource?.tableType === 'DataPage' ? 'datapage' : 'associated';
+  const localeClass = localeContext === 'datapage' ? '@baseclass' : className;
+  const localeName = localeContext === 'datapage' ? metaData?.datasource?.name : refName;
+  const localePath = localeContext === 'datapage' ? displayName : localeName;
+
   let readOnlyProp = {};
 
   if (displayMode === 'LABELS_LEFT') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} />;
+    return (
+      <FieldValueList
+        name={hideLabel ? '' : label}
+        value={thePConn.getLocalizedValue(
+          value,
+          localePath,
+          thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName)
+        )}
+      />
+    );
   }
 
   if (displayMode === 'STACKED_LARGE_VAL') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />;
+    return (
+      <FieldValueList
+        name={hideLabel ? '' : label}
+        value={thePConn.getLocalizedValue(
+          value,
+          localePath,
+          thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName)
+        )}
+        variant='stacked'
+      />
+    );
   }
 
   if (readOnly) {
@@ -62,7 +97,7 @@ export default function Dropdown(props) {
   };
 
   const handleChange = evt => {
-    const selectedValue = evt.target.value === 'Select' ? '' : evt.target.value;
+    const selectedValue = evt.target.value === placeholder ? '' : evt.target.value;
     handleEvent(actionsApi, 'changeNblur', propName, selectedValue);
     if (onRecordChange) {
       onRecordChange(evt);
@@ -76,20 +111,24 @@ export default function Dropdown(props) {
       fullWidth
       variant={readOnly ? 'standard' : 'outlined'}
       helperText={helperTextToDisplay}
-      placeholder={placeholder}
+      placeholder={thePConn.getLocalizedValue(placeholder)}
       size='small'
       required={required}
       disabled={disabled}
       onChange={!readOnly ? handleChange : undefined}
       error={status === 'error'}
       label={label}
-      value={value === '' && !readOnly ? 'Select' : value}
+      value={value === '' && !readOnly ? placeholder : value}
       select
       InputProps={{ ...readOnlyProp, ...testProp }}
     >
       {options.map((option: any) => (
         <MenuItem key={option.key} value={option.key}>
-          {option.value}
+          {thePConn.getLocalizedValue(
+            option.value,
+            localePath,
+            thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName)
+          )}
         </MenuItem>
       ))}
     </TextField>

package/lib/field/Phone/Phone.tsx

@@ -50,7 +50,8 @@ export default function Phone(props) {
           label={label}
           value={value}
           InputProps={{
-            readOnly: true
+            readOnly: true,
+            inputProps: { ...testProp }
           }}
           disableDropdown={disableDropdown}
         />

package/lib/field/RadioButtons/RadioButtons.tsx

@@ -24,7 +24,8 @@ export default function RadioButtons(props) {
     required,
     inline,
     displayMode,
-    hideLabel
+    hideLabel,
+    fieldMetadata
   } = props;
   const [theSelectedButton, setSelectedButton] = useState(value);
 
@@ -33,6 +34,21 @@ export default function RadioButtons(props) {
   const actionsApi = thePConn.getActionsApi();
   const propName = thePConn.getStateProps().value;
   const helperTextToDisplay = validatemessage || helperText;
+  const className = thePConn.getCaseInfo().getClassName();
+
+  let configProperty = thePConn.getRawMetadata()?.config?.value || '';
+  configProperty = configProperty.startsWith('@P') ? configProperty.substring(3) : configProperty;
+  configProperty = configProperty.startsWith('.') ? configProperty.substring(1) : configProperty;
+
+  const metaData = Array.isArray(fieldMetadata)
+    ? fieldMetadata.filter(field => field?.classID === className)[0]
+    : fieldMetadata;
+  let displayName = metaData?.datasource?.propertyForDisplayText;
+  displayName = displayName?.slice(displayName.lastIndexOf('.') + 1);
+  const localeContext = metaData?.datasource?.tableType === 'DataPage' ? 'datapage' : 'associated';
+  const localeClass = localeContext === 'datapage' ? '@baseclass' : className;
+  const localeName = localeContext === 'datapage' ? metaData?.datasource?.name : configProperty;
+  const localePath = localeContext === 'datapage' ? displayName : localeName;
 
   // theOptions will be an array of JSON objects that are literally key/value pairs.
   //  Ex: [ {key: "Basic", value: "Basic"} ]
@@ -44,11 +60,30 @@ export default function RadioButtons(props) {
   }, [value]);
 
   if (displayMode === 'LABELS_LEFT') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} />;
+    return (
+      <FieldValueList
+        name={hideLabel ? '' : label}
+        value={thePConn.getLocalizedValue(
+          value,
+          localePath,
+          thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName)
+        )}
+      />
+    );
   }
 
   if (displayMode === 'STACKED_LARGE_VAL') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />;
+    return (
+      <FieldValueList
+        name={hideLabel ? '' : label}
+        value={thePConn.getLocalizedValue(
+          value,
+          localePath,
+          thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName)
+        )}
+        variant='stacked'
+      />
+    );
   }
 
   const handleChange = event => {
@@ -73,7 +108,11 @@ export default function RadioButtons(props) {
             <FormControlLabel
               value={theOption.key}
               key={theOption.key}
-              label={theOption.value}
+              label={thePConn.getLocalizedValue(
+                theOption.value,
+                localePath,
+                thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName)
+              )}
               control={<Radio key={theOption.key} color='primary' disabled={readOnly} />}
             />
           );

package/lib/field/SemanticLink/utils.ts

@@ -1,4 +1,5 @@
-declare const PCore;
+// Remove this and use "real" PCore type once .d.ts is fixed (currently shows 2 errors)
+declare const PCore: any;
 
 function getDataReferenceInfo(pConnect, dataRelationshipContext) {
   if (!pConnect) {