@pega/sdk 0.0.1

package/templates/react-sdk-reference/src/components/field/Currency/Currency.tsx

@@ -0,0 +1,111 @@
+import { useEffect, useState } from 'react';
+import { NumericFormat } from 'react-number-format';
+import { TextField } from '@mui/material';
+import { getComponentFromRegistry } from '@pega/sdk-react';
+import type { PConnFieldProps } from '@pega/sdk-react';
+import handleEvent from '../../helpers/event-utils';
+import { format } from '../../helpers/formatters';
+import { getCurrencyCharacters, getCurrencyOptions } from './currency-utils';
+
+/* Using react-number-format component here, since it allows formatting decimal values,
+as per the locale.
+*/
+interface CurrrencyProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on Currency here
+  currencyISOCode?: string;
+  allowDecimals: boolean;
+}
+
+export default function Currency(props: CurrrencyProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const FieldValueList = getComponentFromRegistry('FieldValueList');
+
+  const {
+    getPConnect,
+    label,
+    required,
+    disabled,
+    value = '',
+    validatemessage,
+    status,
+    /* onChange, onBlur, */
+    readOnly,
+    testId,
+    helperText,
+    displayMode,
+    hideLabel,
+    currencyISOCode = 'USD',
+    placeholder,
+    allowDecimals
+  } = props;
+
+  const pConn = getPConnect();
+  const actions = pConn.getActionsApi();
+  const propName = (pConn.getStateProps() as any).value;
+  const helperTextToDisplay = validatemessage || helperText;
+  const [values, setValues] = useState(value.toString());
+
+  const testProps: any = { 'data-test-id': testId };
+
+  useEffect(() => {
+    setValues(value.toString());
+  }, [value]);
+
+  // currencySymbols looks like this: { theCurrencySymbol: '$', theDecimalIndicator: '.', theSeparator: ',' }
+  const theSymbols = getCurrencyCharacters(currencyISOCode);
+  const theCurrSym = theSymbols.theCurrencySymbol;
+  const theCurrDec = theSymbols.theDecimalIndicator;
+  const theCurrSep = theSymbols.theDigitGroupSeparator;
+
+  const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
+  const formattedValue = format(value, pConn.getComponentName()?.toLowerCase(), theCurrencyOptions);
+
+  let readOnlyProp = {}; // Note: empty if NOT ReadOnly
+
+  if (readOnly) {
+    readOnlyProp = { readOnly: true };
+  }
+
+  let currencyProp = {};
+  currencyProp = { prefix: theCurrSym, decimalSeparator: theCurrDec, thousandSeparator: theCurrSep };
+
+  if (displayMode === 'DISPLAY_ONLY') {
+    return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} />;
+  }
+
+  if (displayMode === 'STACKED_LARGE_VAL') {
+    return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} variant='stacked' />;
+  }
+
+  function currOnBlur() {
+    handleEvent(actions, 'changeNblur', propName, values);
+  }
+
+  const handleChange = val => {
+    setValues(val.value);
+  };
+
+  return (
+    <NumericFormat
+      valueIsNumericString
+      variant={readOnly ? 'standard' : 'outlined'}
+      label={label}
+      helperText={helperTextToDisplay}
+      placeholder={placeholder ?? ''}
+      required={required}
+      disabled={disabled}
+      onValueChange={val => {
+        handleChange(val);
+      }}
+      onBlur={!readOnly ? currOnBlur : undefined}
+      error={status === 'error'}
+      name='numberformat'
+      value={values}
+      {...currencyProp}
+      decimalScale={allowDecimals !== false ? 2 : 0}
+      fixedDecimalScale={allowDecimals}
+      slotProps={{ input: { ...readOnlyProp, inputProps: { ...testProps } } }}
+      customInput={TextField}
+    />
+  );
+}

package/templates/react-sdk-reference/src/components/field/Currency/config-ext.json

@@ -0,0 +1,9 @@
+{
+  "name": "Currency",
+  "label": "Currency",
+  "description": "Currency",
+  "type": "Field",
+  "subtype": "Decimal-Currency",
+  "componentKey": "Currency",
+  "properties": []
+}

package/templates/react-sdk-reference/src/components/field/Currency/currency-utils.ts

@@ -0,0 +1,67 @@
+import { default as CurrencyAlias } from '../../helpers/formatters/Currency';
+
+import { default as CurrencyMapAlias } from '../../helpers/formatters/CurrencyMap';
+
+export const getCurrencyOptions = (inISOCode: string) => {
+  const operatorLocale = PCore.getEnvironmentInfo().getUseLocale() || PCore.getEnvironmentInfo().getLocale() || '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);
+  return { locale: localeToUse, style: 'currency', currency: theCode };
+};
+
+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/templates/react-sdk-reference/src/components/field/Currency/index.tsx

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

package/templates/react-sdk-reference/src/components/field/Date/Date.tsx

@@ -0,0 +1,94 @@
+import { useEffect, useState } from 'react';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+import dayjs, { Dayjs } from 'dayjs';
+
+import handleEvent from '../../helpers/event-utils';
+import { format } from '../../helpers/formatters';
+import { dateFormatInfoDefault, getDateFormatInfo } from '../../helpers/date-format-utils';
+import { getComponentFromRegistry } from '@pega/sdk-react';
+import type { PConnFieldProps } from '@pega/sdk-react';
+
+// 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')}`;
+}
+
+interface DateProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on Date here
+}
+
+export default function Date(props: DateProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const TextInput = getComponentFromRegistry('TextInput');
+  const FieldValueList = getComponentFromRegistry('FieldValueList');
+
+  const { getPConnect, label, required, disabled, value, validatemessage, status, readOnly, testId, helperText, displayMode, hideLabel } = props;
+
+  const [dateValue, setDateValue] = useState<Dayjs | null>(value ? dayjs(value) : null);
+
+  const pConn = getPConnect();
+  const actions = pConn.getActionsApi();
+  const propName = (pConn.getStateProps() as any).value;
+  const helperTextToDisplay = validatemessage || helperText;
+
+  // 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;
+
+  useEffect(() => {
+    setDateValue(dayjs(value));
+  }, [value]);
+
+  if (displayMode === 'DISPLAY_ONLY') {
+    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) {
+    // const theReadOnlyComp = <TextInput props />
+    return <TextInput {...props} />;
+  }
+
+  const testProps: any = { 'data-test-id': testId };
+
+  const handleChange = date => {
+    if (date && date.isValid()) {
+      setDateValue(date);
+      handleEvent(actions, 'changeNblur', propName, getFormattedDate(date));
+    }
+  };
+
+  return (
+    <DatePicker
+      label={label}
+      disabled={disabled}
+      format={dateFormatInfo.dateFormatString}
+      value={dateValue}
+      slotProps={{
+        textField: {
+          required,
+          variant: 'outlined',
+          placeholder: dateFormatInfo.dateFormatStringLC,
+          error: status === 'error',
+          helperText: helperTextToDisplay,
+          size: 'small',
+          InputProps: { ...testProps }
+        }
+      }}
+      onChange={handleChange}
+    />
+  );
+}

package/templates/react-sdk-reference/src/components/field/Date/config-ext.json

@@ -0,0 +1,9 @@
+{
+  "name": "Date",
+  "label": "Date only",
+  "description": "Date only",
+  "type": "Field",
+  "subtype": "Date",
+  "componentKey": "Date",
+  "properties": []
+}

package/templates/react-sdk-reference/src/components/field/Date/index.tsx

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

package/templates/react-sdk-reference/src/components/field/DateTime/DateTime.tsx

@@ -0,0 +1,101 @@
+import { useEffect, useState } from 'react';
+import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
+import dayjs, { Dayjs } from 'dayjs';
+import DateFormatter from '../../helpers/formatters/Date';
+import handleEvent from '../../helpers/event-utils';
+import { format } from '../../helpers/formatters';
+import { dateFormatInfoDefault, getDateFormatInfo } from '../../helpers/date-format-utils';
+import { getComponentFromRegistry } from '@pega/sdk-react';
+import type { PConnFieldProps } from '@pega/sdk-react';
+
+interface DateTimeProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on DateTime here
+}
+
+export default function DateTime(props: DateTimeProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const TextInput = getComponentFromRegistry('TextInput');
+  const FieldValueList = getComponentFromRegistry('FieldValueList');
+
+  const { getPConnect, label, required, disabled, value = '', validatemessage, status, readOnly, testId, helperText, displayMode, hideLabel } = props;
+
+  const environmentInfo = PCore.getEnvironmentInfo();
+  const timezone = environmentInfo && environmentInfo.getTimeZone();
+
+  const [dateValue, setDateValue] = useState<Dayjs | null>(value ? dayjs(DateFormatter.convertToTimezone(value, { timezone })) : null);
+
+  const pConn = getPConnect();
+  const actions = pConn.getActionsApi();
+  const propName = (pConn.getStateProps() as any).value;
+  const helperTextToDisplay = validatemessage || helperText;
+
+  // 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;
+
+  useEffect(() => {
+    setDateValue(dayjs(DateFormatter.convertToTimezone(value, { timezone })));
+  }, [value]);
+
+  if (displayMode === 'DISPLAY_ONLY') {
+    const formattedDateTime = format(props.value, 'datetime', {
+      format: `${dateFormatInfo.dateFormatString} hh:mm a`
+    });
+    return <FieldValueList name={hideLabel ? '' : label} value={formattedDateTime} />;
+  }
+
+  if (displayMode === 'STACKED_LARGE_VAL') {
+    const formattedDateTime = format(props.value, 'datetime', {
+      format: `${dateFormatInfo.dateFormatString} hh:mm a`
+    });
+    return <FieldValueList name={hideLabel ? '' : label} value={formattedDateTime} variant='stacked' />;
+  }
+
+  if (readOnly) {
+    const formattedDateTime = format(props.value, 'datetime');
+    return <TextInput {...props} value={formattedDateTime} />;
+  }
+
+  const testProps: any = { 'data-test-id': testId };
+
+  const handleChange = date => {
+    const timeZoneDateTime = (dayjs as any).tz(date.format('YYYY-MM-DDTHH:mm:ss'), timezone);
+    const changeValue = timeZoneDateTime && timeZoneDateTime.isValid() ? timeZoneDateTime.toISOString() : '';
+    setDateValue(timeZoneDateTime);
+    handleEvent(actions, 'changeNblur', propName, changeValue);
+  };
+
+  //
+  // TODO: Keyboard doesn't work in the minute field, it updates one digit then jump to am/pm field
+  //       try an older version of the lib or use DateTimePicker
+  //
+
+  return (
+    <DateTimePicker
+      // fullWidth
+      // autoOk
+      disabled={disabled}
+      format={`${dateFormatInfo.dateFormatString} hh:mm a`}
+      // mask={`${dateFormatInfo.dateFormatMask} __:__ _m`}
+      minutesStep={5}
+      label={label}
+      value={dateValue}
+      onChange={handleChange}
+      slotProps={{
+        textField: {
+          variant: 'outlined',
+          required,
+          placeholder: `${dateFormatInfo.dateFormatStringLC} hh:mm a`,
+          error: status === 'error',
+          helperText: helperTextToDisplay,
+          size: 'small',
+          InputProps: { ...testProps }
+        }
+      }}
+    />
+  );
+}

package/templates/react-sdk-reference/src/components/field/DateTime/config-ext.json

@@ -0,0 +1,8 @@
+{
+  "name": "DateTime",
+  "label": "Date & time",
+  "description": "Date & time",
+  "type": "Field",
+  "subtype": "DateTime",
+  "properties": []
+}

package/templates/react-sdk-reference/src/components/field/DateTime/index.tsx

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

package/templates/react-sdk-reference/src/components/field/Decimal/Decimal.tsx

@@ -0,0 +1,122 @@
+import { NumericFormat } from 'react-number-format';
+import { TextField } from '@mui/material';
+import { useEffect, useState } from 'react';
+import { getCurrencyCharacters, getCurrencyOptions } from '../Currency/currency-utils';
+import handleEvent from '../../helpers/event-utils';
+import { format } from '../../helpers/formatters';
+import { getComponentFromRegistry } from '@pega/sdk-react';
+import type { PConnFieldProps } from '@pega/sdk-react';
+
+/* Using react-number-format component here, since it allows formatting decimal values,
+as per the locale.
+*/
+
+interface DecimalProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on Decimal here
+  currencyISOCode?: string;
+  decimalPrecision?: number;
+  showGroupSeparators?: boolean;
+  formatter?: string;
+}
+
+export default function Decimal(props: DecimalProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const FieldValueList = getComponentFromRegistry('FieldValueList');
+
+  const {
+    getPConnect,
+    label,
+    required,
+    disabled,
+    value = '',
+    validatemessage,
+    status,
+    /* onChange, onBlur, */
+    readOnly,
+    helperText,
+    displayMode,
+    hideLabel,
+    currencyISOCode = 'USD',
+    decimalPrecision,
+    showGroupSeparators,
+    testId,
+    placeholder,
+    formatter
+  } = props;
+
+  const [values, setValues] = useState(value.toString());
+
+  const pConn = getPConnect();
+  const actions = pConn.getActionsApi();
+  const propName = (pConn.getStateProps() as any).value;
+  const helperTextToDisplay = validatemessage || helperText;
+
+  const theSymbols = getCurrencyCharacters(currencyISOCode);
+  const theCurrDec = theSymbols.theDecimalIndicator;
+  const theCurrSep = theSymbols.theDigitGroupSeparator;
+  const theCurrSym = theSymbols.theCurrencySymbol;
+
+  const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
+
+  useEffect(() => {
+    setValues(value.toString());
+  }, [value]);
+
+  let readOnlyProp = {}; // Note: empty if NOT ReadOnly
+
+  if (readOnly) {
+    readOnlyProp = { readOnly: true };
+  }
+
+  let formattedValue = '';
+  if (formatter === 'Currency') {
+    formattedValue = format(value, formatter.toLowerCase(), theCurrencyOptions);
+  } else {
+    formattedValue = format(value, pConn.getComponentName()?.toLowerCase(), theCurrencyOptions);
+  }
+
+  if (displayMode === 'DISPLAY_ONLY') {
+    return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} />;
+  }
+
+  if (displayMode === 'STACKED_LARGE_VAL') {
+    return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} variant='stacked' />;
+  }
+
+  const testProps: any = { 'data-test-id': testId };
+
+  function decimalOnBlur() {
+    handleEvent(actions, 'changeNblur', propName, values);
+  }
+
+  const handleChange = val => {
+    setValues(val.value);
+  };
+
+  return (
+    <NumericFormat
+      valueIsNumericString
+      fullWidth
+      variant={readOnly ? 'standard' : 'outlined'}
+      helperText={helperTextToDisplay}
+      placeholder={placeholder ?? ''}
+      size='small'
+      required={required}
+      disabled={disabled}
+      error={status === 'error'}
+      label={label}
+      value={values}
+      onValueChange={val => {
+        handleChange(val);
+      }}
+      onBlur={!readOnly ? decimalOnBlur : undefined}
+      prefix={readOnly && formatter === 'Currency' ? theCurrSym : ''}
+      suffix={readOnly && formatter === 'Percentage' ? '%' : ''}
+      decimalSeparator={theCurrDec}
+      thousandSeparator={showGroupSeparators ? theCurrSep : ''}
+      decimalScale={readOnly && formatter === 'Currency' ? undefined : decimalPrecision}
+      slotProps={{ input: { ...readOnlyProp, inputProps: { ...testProps } } }}
+      customInput={TextField}
+    />
+  );
+}

package/templates/react-sdk-reference/src/components/field/Decimal/config-ext.json

@@ -0,0 +1,8 @@
+{
+  "name": "Decimal",
+  "label": "Decimal",
+  "description": "Decimal",
+  "type": "Field",
+  "subtype": "Decimal",
+  "properties": []
+}

package/templates/react-sdk-reference/src/components/field/Decimal/index.tsx

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