@pega/react-sdk-overrides 0.23.17 → 0.23.18

package/lib/designSystemExtension/CaseSummaryFields/CaseSummaryFields.tsx

@@ -5,6 +5,8 @@ import isDeepEqual from 'fast-deep-equal/react';
 import Grid from '@material-ui/core/Grid';
 import TextField from '@material-ui/core/TextField';
 import Operator from '@pega/react-sdk-components/lib/components/designSystemExtension/Operator';
+import { getDateFormatInfo } from '@pega/react-sdk-components/lib/components/helpers/date-format-utils';
+import { getCurrencyOptions } from '@pega/react-sdk-components/lib/components/field/Currency/currency-utils';
 
 import './CaseSummaryFields.css';
 
@@ -121,9 +123,42 @@ export default function CaseSummaryFields(props) {
       }
 
       case 'date':
-      case 'datetime':
-      case 'currency':
+      case 'datetime': {
+        const theDateFormatInfo = getDateFormatInfo();
+        // eslint-disable-next-line no-console
+        console.log(`theDateFormatInfo: ${theDateFormatInfo}`);
+        const theFormat = (fieldTypeLower === 'datetime') ? `${theDateFormatInfo.dateFormatStringLong} hh:mm a` : theDateFormatInfo.dateFormatStringLong
+
+        return (
+          <TextField
+            value={format(field.config.value, field.type, { format: theFormat })}
+            label={field.config.label}
+            InputProps={{
+              readOnly: true,
+              disableUnderline: true
+            }}
+          />
+        );
+    }
+
+      case 'currency': {
+        const theCurrencyOptions = getCurrencyOptions(field.config?.currencyISOCode);
+        return (
+          <TextField
+            value={format(field.config.value, field.type, theCurrencyOptions)}
+            label={field.config.label}
+            InputProps={{
+              readOnly: true,
+              disableUnderline: true
+            }}
+          />
+        );
+
+      }
+
+
       case 'boolean':
+      case 'userreference':
         return (
           <TextField
             value={format(field.config.value, field.type)}
@@ -137,7 +172,6 @@ export default function CaseSummaryFields(props) {
 
       case 'caseoperator':
         return <Operator caseOpConfig={field.config} />;
-        break;
 
       default:
         return (

package/lib/designSystemExtension/FieldGroup/FieldGroup.tsx

@@ -12,8 +12,7 @@ const useStyles = makeStyles(theme => ({
   fieldMargin: {
     paddingTop: theme.spacing(1),
     paddingBottom: theme.spacing(1),
-    marginTop: theme.spacing(1),
-    marginBottom: theme.spacing(1)
+    marginTop: theme.spacing(1)
   },
   fullWidth: {
     width: '100%'

package/lib/designSystemExtension/FieldValueList/FieldValueList.tsx

@@ -11,93 +11,75 @@ const useStyles = makeStyles(theme => ({
     marginTop: theme.spacing(1),
     marginBottom: theme.spacing(1)
   },
-  fieldMargin: {
-    // paddingRight: theme.spacing(1),
-    // paddingLeft: theme.spacing(1),
-    // paddingTop: theme.spacing(1),
-    // paddingBottom: theme.spacing(1),
-    // marginRight: theme.spacing(1),
-    // marginLeft: theme.spacing(1),
-    // marginTop: theme.spacing(1),
-    // marginBottom: theme.spacing(1)
-  },
   fieldLabel: {
     fontWeight: 400,
     color: theme.palette.text.secondary
   },
   fieldValue: {
-    fontWeight: 400,
     color: theme.palette.text.primary
+  },
+  noPaddingTop: {
+    paddingTop: '0 !important'
+  },
+  noPaddingBottom: {
+    paddingBottom: '0 !important'
   }
 }));
 
-const FieldValueList = props => {
-  const classes = useStyles();
+function formatItemValue(value) {
+  let formattedVal = value;
 
-  const fields: any = [];
-
-  // eslint-disable-next-line guard-for-in
-  for (const label in props.item) {
-    fields.push({ label, value: props.item[label] });
+  // if the value is undefined or an empty string, we want to display it as "---"
+  if (formattedVal === undefined || formattedVal === '') {
+    formattedVal = '---';
   }
 
-  function getGridItemLabel(label) {
-    const dispValue = label;
+  return formattedVal;
+}
 
+const FieldValueList = props => {
+  const { name, value, variant = 'inline' } = props;
+  const classes = useStyles();
+
+  function getGridItemLabel() {
     return (
-      <Grid item xs={6}>
-        <Typography
-          variant='body2'
-          component='span'
-          className={`${classes.fieldLabel} ${classes.fieldMargin}`}
-        >
-          {dispValue}
+      <Grid
+        item
+        xs={variant === 'stacked' ? 12 : 6}
+        className={variant === 'stacked' ? classes.noPaddingBottom : ''}
+      >
+        <Typography variant='body2' component='span' className={`${classes.fieldLabel}`}>
+          {name}
         </Typography>
       </Grid>
     );
   }
 
-  function formatItemValue(value) {
-    let formattedVal = value;
-
-    // if the value is undefined or an empty string, we want to display it as "---"
-    if (formattedVal === undefined || formattedVal === '') {
-      formattedVal = '---';
-    }
-
-    return formattedVal;
-  }
-
-  function getGridItemValue(value) {
+  function getGridItemValue() {
     const formattedValue = formatItemValue(value);
 
     return (
-      <Grid item xs={6}>
-        <Typography variant='body2' component='span' className={classes.fieldValue}>
+      <Grid
+        item
+        xs={variant === 'stacked' ? 12 : 6}
+        className={variant === 'stacked' ? classes.noPaddingTop : ''}
+      >
+        <Typography
+          variant={variant === 'stacked' ? 'h6' : 'body2'}
+          component='span'
+          className={classes.fieldValue}
+        >
           {formattedValue}
         </Typography>
       </Grid>
     );
   }
 
-  function getGridItems() {
-    const gridItems = fields.map(item => {
-      return (
-        <Grid container spacing={1} key={item.label}>
-          {getGridItemLabel(item.label)}
-          {getGridItemValue(item.value)}
-        </Grid>
-      );
-    });
-    return gridItems;
-  }
-
   return (
     <React.Fragment>
       <Grid container spacing={4} justifyContent='space-between'>
-        <Grid item style={{ width: '100%' }}>
-          {getGridItems()}
-        </Grid>
+        {getGridItemLabel()}
+        {getGridItemValue()}
       </Grid>
     </React.Fragment>
   );

package/lib/field/AutoComplete/AutoComplete.tsx

@@ -51,6 +51,7 @@ export default function AutoComplete(props) {
     datasourceMetadata,
     status,
     helperText,
+    hideLabel,
     onRecordChange
   } = props;
   const context = getPConnect().getContextName();
@@ -133,10 +134,11 @@ export default function AutoComplete(props) {
   }, []);
 
   if (displayMode === 'LABELS_LEFT') {
-    const field = {
-      [label]: value
-    };
-    return <FieldValueList item={field} />;
+    return <FieldValueList name={hideLabel ? '' : label} value={value} />;
+  }
+
+  if (displayMode === 'STACKED_LARGE_VAL') {
+    return <FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />;
   }
 
   if (value) {

package/lib/field/Checkbox/Checkbox.tsx

@@ -20,7 +20,8 @@ export default function CheckboxComponent(props) {
     status,
     helperText,
     validatemessage,
-    displayMode
+    displayMode,
+    hideLabel
   } = props;
   const helperTextToDisplay = validatemessage || helperText;
 
@@ -37,10 +38,11 @@ export default function CheckboxComponent(props) {
   }, [value]);
 
   if (displayMode === 'LABELS_LEFT') {
-    const field = {
-      [label]: value
-    };
-    return <FieldValueList item={field} />;
+    return <FieldValueList name={hideLabel ? '' : label} value={value} />;
+  }
+
+  if (displayMode === 'STACKED_LARGE_VAL') {
+    return <FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />;
   }
 
   const handleChange = event => {

package/lib/field/Currency/Currency.tsx

@@ -3,6 +3,8 @@ import React, { useState, useEffect } from 'react';
 import CurrencyTextField from '@unicef/material-ui-currency-textfield';
 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 { getCurrencyCharacters, getCurrencyOptions } from './currency-utils';
 
 // Using control from: https://github.com/unicef/material-ui-currency-textfield
 
@@ -19,8 +21,11 @@ export default function Currency(props) {
     readOnly,
     testId,
     helperText,
-    displayMode
+    displayMode,
+    hideLabel,
+    currencyISOCode = "USD"
   } = props;
+
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
   const propName = pConn.getStateProps().value;
@@ -41,17 +46,32 @@ export default function Currency(props) {
   };
 
   const [currValue, setCurrValue] = useState();
+  const [theCurrSym, setCurrSym] = useState("$");
+  const [theCurrDec, setCurrDec] = useState(".");
+  const [theCurrSep, setCurrSep] = useState(",");
+
+  useEffect(() => {
+    // currencySymbols looks like this: { theCurrencySymbol: '$', theDecimalIndicator: '.', theSeparator: ',' }
+    const theSymbols = getCurrencyCharacters(currencyISOCode);
+    setCurrSym(theSymbols.theCurrencySymbol);
+    setCurrDec(theSymbols.theDecimalIndicator);
+    setCurrSep(theSymbols.theDigitGroupSeparator);
+  }, [currencyISOCode]);
 
   useEffect(() => {
     // const testVal = value;
     setCurrValue(value.toString());
   }, [value]);
 
-  if(displayMode === 'LABELS_LEFT') {
-    const field = {
-      [label]: value
-    };
-    return <FieldValueList item={field} />
+  const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
+  const formattedValue = format(value, pConn.getComponentName().toLowerCase(), theCurrencyOptions);
+
+  if (displayMode === 'LABELS_LEFT') {
+    return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} />;
+  }
+
+  if (displayMode === 'STACKED_LARGE_VAL') {
+    return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} variant='stacked' />;
   }
 
   function currOnChange(event, inValue) {
@@ -66,6 +86,8 @@ export default function Currency(props) {
     handleEvent(actions, 'changeNblur', propName, inValue !== '' ? Number(inValue) : inValue);
   }
 
+  // console.log(`theCurrSym: ${theCurrSym} | theCurrDec: ${theCurrDec} | theCurrSep: ${theCurrSep}`);
+
   return (
     <CurrencyTextField
       fullWidth
@@ -84,6 +106,9 @@ export default function Currency(props) {
       outputFormat='number'
       textAlign='left'
       InputProps={{ ...readOnlyProp, inputProps: { ...testProp, value: currValue } }}
+      currencySymbol={theCurrSym}
+      decimalCharacter={theCurrDec}
+      digitGroupSeparator={theCurrSep}
     />
   );
 }

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

@@ -0,0 +1,76 @@
+// eslint-disable-next-line import/no-named-default
+import { default as CurrencyAlias} from '@pega/react-sdk-components/lib/components/helpers/formatters/Currency';
+// 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;
+
+export const getCurrencyOptions = (inISOCode: string) => {
+
+  const operatorLocale = PCore.getEnvironmentInfo().getUseLocale() || 'en-US';
+
+  let currMapToUse = CurrencyMapAlias.US;
+  let localeToUse = operatorLocale;
+
+  // Determine CurrencyMap lookup based on ISO code (if specified).
+  //  If no ISO code, use locale
+  //  If no locale, default to US
+  if (inISOCode) {
+    if (inISOCode === "EUR") {
+      currMapToUse = CurrencyMapAlias.NL;
+      localeToUse = "nl-NL";
+    } else {
+      // For all other ISO codes, use first 2 characters as the lookup from CurrencyMap
+      const countryCode = inISOCode.substring(0,2);
+      currMapToUse = CurrencyMapAlias[countryCode];
+    }
+  } else if (operatorLocale) {
+    // No ISO Code so check for operator locale (and force upper case for lookup)
+    const countryCode = operatorLocale.substring(3).toUpperCase();
+    currMapToUse = CurrencyMapAlias[countryCode];
+  } else {
+    // no ISO code and no operator locale, default to US
+    currMapToUse = CurrencyMapAlias.US;
+  }
+
+  // If no currMapToUse at this point, default to US as a failsafe
+  if (!currMapToUse) {
+    currMapToUse = CurrencyMapAlias['US'];
+  }
+
+  const theCode = currMapToUse.currencyCode.substring(0, 3);
+  const currencyOptions = { locale: localeToUse, style: "currency", currency: theCode }
+
+  return currencyOptions;
+
+}
+
+
+export const getCurrencyCharacters = (inISOCode: string) => {
+  const theCurrencyChars = {
+    theCurrencySymbol: '$',
+    theDecimalIndicator: '.',
+    theDigitGroupSeparator: ','
+  }
+
+  const theCurrencyOptions = getCurrencyOptions(inISOCode);
+
+  const testValue = 1234.56;
+  const formattedString = CurrencyAlias.Currency(testValue, theCurrencyOptions);
+
+  // console.log(`formattedString: ${formattedString}`);
+
+  // Here, we have the formatted string (ex: $1,234.56) where:
+  //  Currency symbol = formattedString[0]
+  //  Separator = formattedString[2]
+  //  DecimalIndicator = formattedString[6];
+
+  theCurrencyChars.theCurrencySymbol = formattedString[0];
+  theCurrencyChars.theDigitGroupSeparator = formattedString[2];
+  theCurrencyChars.theDecimalIndicator = formattedString[6];
+
+  // console.log(`theCurrencyChars: symbol: ${theCurrencyChars.theCurrencySymbol} | theDigitGroupSeparator: ${theCurrencyChars.theDigitGroupSeparator} | theDecimalIndicator: ${theCurrencyChars.theDecimalIndicator}`);
+
+  return theCurrencyChars;
+
+}

package/lib/field/Date/Date.tsx

@@ -3,6 +3,8 @@ 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 { dateFormatInfoDefault, getDateFormatInfo} from '@pega/react-sdk-components/lib/components/helpers/date-format-utils';
 
 export default function Date(props) {
   const {
@@ -18,18 +20,32 @@ export default function Date(props) {
     readOnly,
     testId,
     helperText,
-    displayMode
+    displayMode,
+    hideLabel
   } = props;
+
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
   const propName = pConn.getStateProps().value;
   const helperTextToDisplay = validatemessage || helperText;
 
-  if(displayMode === 'LABELS_LEFT') {
-    const field = {
-      [label]: value
-    };
-    return <FieldValueList item={field} />
+  // Start with default dateFormatInfo
+  const dateFormatInfo = dateFormatInfoDefault;
+  // and then update, as needed, based on locale, etc.
+  const theDateFormat = getDateFormatInfo()
+  dateFormatInfo.dateFormatString = theDateFormat.dateFormatString;
+  dateFormatInfo.dateFormatStringLC = theDateFormat.dateFormatStringLC;
+  dateFormatInfo.dateFormatMask = theDateFormat.dateFormatMask;
+
+
+  if (displayMode === 'LABELS_LEFT') {
+    const formattedDate = format(props.value, 'date', { format: dateFormatInfo.dateFormatString });
+    return <FieldValueList name={hideLabel ? '' : label} value={formattedDate} />;
+  }
+
+  if (displayMode === 'STACKED_LARGE_VAL') {
+    const formattedDate = format(props.value, 'date', { format: dateFormatInfo.dateFormatString });
+    return <FieldValueList name={hideLabel ? '' : label} value={formattedDate} variant='stacked' />;
   }
 
   if (readOnly) {
@@ -58,13 +74,13 @@ export default function Date(props) {
       disableToolbar
       variant='inline'
       inputVariant='outlined'
-      placeholder='mm/dd/yyyy'
+      placeholder={dateFormatInfo.dateFormatStringLC}
+      format={dateFormatInfo.dateFormatString}
+      mask={dateFormatInfo.dateFormatMask}
       fullWidth
       autoOk
       required={required}
       disabled={disabled}
-      format='MM/DD/YYYY'
-      mask='__/__/____'
       error={status === 'error'}
       helperText={helperTextToDisplay}
       size='small'

package/lib/field/DateTime/DateTime.tsx

@@ -4,6 +4,7 @@ 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 { dateFormatInfoDefault, getDateFormatInfo} from '@pega/react-sdk-components/lib/components/helpers/date-format-utils';
 
 export default function DateTime(props) {
   const {
@@ -18,19 +19,32 @@ export default function DateTime(props) {
     readOnly,
     testId,
     helperText,
-    displayMode
+    displayMode,
+    hideLabel
   } = props;
+
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
   const propName = pConn.getStateProps().value;
   const helperTextToDisplay = validatemessage || helperText;
 
-  if(displayMode === 'LABELS_LEFT'){
-    const formattedDate = format(props.value, 'datetime');
-    const field = {
-      [label]: formattedDate
-    };
-    return <FieldValueList item={field}/>
+  // Start with default dateFormatInfo
+  const dateFormatInfo = dateFormatInfoDefault;
+  // and then update, as needed, based on locale, etc.
+  const theDateFormat = getDateFormatInfo()
+  dateFormatInfo.dateFormatString = theDateFormat.dateFormatString;
+  dateFormatInfo.dateFormatStringLC = theDateFormat.dateFormatStringLC;
+  dateFormatInfo.dateFormatMask = theDateFormat.dateFormatMask;
+
+
+  if (displayMode === 'LABELS_LEFT') {
+    const formattedDate = format(props.value, 'datetime', { format: `${dateFormatInfo.dateFormatString} hh:mm a` });
+    return <FieldValueList name={hideLabel ? '' : label} value={formattedDate} />;
+  }
+
+  if (displayMode === 'STACKED_LARGE_VAL') {
+    const formattedDate = format(props.value, 'datetime', { format: `${dateFormatInfo.dateFormatString} hh:mm a` });
+    return <FieldValueList name={hideLabel ? '' : label} value={formattedDate} variant='stacked' />;
   }
 
   if (readOnly) {
@@ -62,9 +76,9 @@ export default function DateTime(props) {
       autoOk
       required={required}
       disabled={disabled}
-      placeholder='mm/dd/yyyy hh:mm am'
-      format='MM/DD/YYYY hh:mm a'
-      mask='__/__/____ __:__ _m'
+      placeholder={`${dateFormatInfo.dateFormatStringLC} hh:mm a`}
+      format={`${dateFormatInfo.dateFormatString} hh:mm a`}
+      mask={`${dateFormatInfo.dateFormatMask} __:__ _m`}
       minutesStep={5}
       error={status === 'error'}
       helperText={helperTextToDisplay}

package/lib/field/Decimal/Decimal.tsx

@@ -15,15 +15,17 @@ export default function Decimal(props) {
     onBlur,
     readOnly,
     helperText,
-    displayMode
+    displayMode,
+    hideLabel
   } = props;
   const helperTextToDisplay = validatemessage || helperText;
 
-  if(displayMode === 'LABELS_LEFT') {
-    const field = {
-      [label]: value
-    };
-    return <FieldValueList item={field} />
+  if (displayMode === 'LABELS_LEFT') {
+    return <FieldValueList name={hideLabel ? '' : label} value={value} />;
+  }
+
+  if (displayMode === 'STACKED_LARGE_VAL') {
+    return <FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />;
   }
 
   if (readOnly) {

package/lib/field/Dropdown/Dropdown.tsx

@@ -25,6 +25,7 @@ export default function Dropdown(props) {
     testId,
     helperText,
     displayMode,
+    hideLabel,
     onRecordChange
   } = props;
   const [options, setOptions] = useState<Array<IOption>>([]);
@@ -43,10 +44,11 @@ export default function Dropdown(props) {
   let readOnlyProp = {};
 
   if (displayMode === 'LABELS_LEFT') {
-    const field = {
-      [label]: value
-    };
-    return <FieldValueList item={field} />;
+    return <FieldValueList name={hideLabel ? '' : label} value={value} />;
+  }
+
+  if (displayMode === 'STACKED_LARGE_VAL') {
+    return <FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />;
   }
 
   if (readOnly) {

package/lib/field/Email/Email.tsx

@@ -17,23 +17,23 @@ export default function Email(props) {
     readOnly,
     testId,
     helperText,
-    displayMode
+    displayMode,
+    hideLabel
   } = props;
   const helperTextToDisplay = validatemessage || helperText;
 
-  if(displayMode === 'LABELS_LEFT') {
-    const field = {
-      [label]: value
-    };
-    return <FieldValueList item={field} />
+  if (displayMode === 'LABELS_LEFT') {
+    return <FieldValueList name={hideLabel ? '' : label} value={value} />;
+  }
+
+  if (displayMode === 'STACKED_LARGE_VAL') {
+    return <FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />;
   }
 
   if (readOnly) {
     return <TextInput {...props} />;
   }
 
-
-
   let testProp = {};
 
   testProp = {

package/lib/field/Integer/Integer.tsx

@@ -16,17 +16,19 @@ export default function Integer(props) {
     readOnly,
     testId,
     helperText,
-    displayMode
+    displayMode,
+    hideLabel
   } = props;
   const helperTextToDisplay = validatemessage || helperText;
 
   // console.log(`Integer: label: ${label} value: ${value}`);
 
-  if(displayMode === 'LABELS_LEFT') {
-    const field = {
-      [label]: value
-    };
-    return <FieldValueList item={field} />
+  if (displayMode === 'LABELS_LEFT') {
+    return <FieldValueList name={hideLabel ? '' : label} value={value} />;
+  }
+
+  if (displayMode === 'STACKED_LARGE_VAL') {
+    return <FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />;
   }
 
   if (readOnly) {

package/lib/field/Percentage/Percentage.tsx

@@ -37,17 +37,19 @@ export default function Percentage(props) {
     readOnly,
     testId,
     helperText,
-    displayMode
+    displayMode,
+    hideLabel
   } = props;
   const helperTextToDisplay = validatemessage || helperText;
 
   // console.log(`Percentage: label: ${label} value: ${value}`);
 
-  if(displayMode === 'LABELS_LEFT') {
-    const field = {
-      [label]: value
-    };
-    return <FieldValueList item={field} />
+  if (displayMode === 'LABELS_LEFT') {
+    return <FieldValueList name={hideLabel ? '' : label} value={value} />;
+  }
+
+  if (displayMode === 'STACKED_LARGE_VAL') {
+    return <FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />;
   }
 
   if (readOnly) {