@pega/dx-component-builder-sdk 0.23.10 → 0.23.12

package/tests/assets/sdk-r/components/create/override-sdk/field/AutoComplete/config-ext.json

@@ -0,0 +1,10 @@
+{
+  "name": "AutoComplete",
+  "label": "Search box",
+  "description": "Picklist",
+  "type": "Field",
+  "subtype": "Picklist",
+  "componentKey": "AutoComplete",
+  "icon": "",
+  "properties": []
+}

package/tests/assets/sdk-r/components/create/override-sdk/field/AutoComplete/index.tsx

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

package/tests/assets/sdk-r/components/create/override-sdk/field/CancelAlert/CancelAlert.css

@@ -0,0 +1,24 @@
+.cancel-alert-background {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  background-color: rgba(100, 100, 100, 0.4);
+  position: fixed;
+  z-index: 9999;
+  top: 0px;
+  left: 0px;
+}
+
+.cancel-alert-top {
+  display: table;
+  margin: auto;
+  min-width: 550px;
+  background-color: white;
+  border: 1px solid black;
+  border-radius: 10px;
+  padding: 20px;
+  box-shadow: 0 0 10px 3px #777;
+}

package/tests/assets/sdk-r/components/create/override-sdk/field/CancelAlert/CancelAlert.tsx

@@ -0,0 +1,132 @@
+import React, { useState } from 'react';
+import { Button, Grid, IconButton, Snackbar } from '@material-ui/core';
+import CloseIcon from '@material-ui/icons/Close';
+
+import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import './CancelAlert.css';
+
+interface CancelAlertProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on CancelAlert here
+  pConn: any;
+  updateAlertState: any;
+}
+
+export default function CancelAlert(props: CancelAlertProps) {
+  const { pConn, updateAlertState } = props;
+  const [showSnackbar, setShowSnackbar] = useState(false);
+  const [snackbarMessage, setSnackbarMessage] = useState('');
+
+  const itemKey = pConn.getContextName();
+  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);
+    setShowSnackbar(true);
+  }
+
+  const dismissCancelAlertOnly = () => {
+    updateAlertState(true);
+  };
+
+  const dismissModal = () => {
+    updateAlertState(false);
+  };
+
+  function handleSnackbarClose(event: React.SyntheticEvent | React.MouseEvent, reason?: string) {
+    if (reason === 'clickaway') {
+      return;
+    }
+    setShowSnackbar(false);
+  }
+
+  const buttonClick = action => {
+    const actionsAPI = pConn.getActionsApi();
+
+    switch (action) {
+      case 'save':
+        // eslint-disable-next-line no-case-declarations
+        const savePromise = actionsAPI.saveAndClose(itemKey);
+
+        savePromise
+          .then(() => {
+            dismissModal();
+
+            // @ts-ignore - second parameter “payload” for publish method should be optional
+            PCore.getPubSubUtils().publish(PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.CASE_CREATED);
+          })
+          .catch(() => {
+            showToast(localizedVal('Save failed', localeCategory));
+          });
+        break;
+
+      case 'continue':
+        dismissCancelAlertOnly();
+        break;
+
+      case 'delete':
+        // eslint-disable-next-line no-case-declarations
+        const deletePromise = actionsAPI.deleteCaseInCreateStage(itemKey);
+
+        deletePromise
+          .then(() => {
+            dismissModal();
+
+            // @ts-ignore - second parameter “payload” for publish method should be optional
+            PCore.getPubSubUtils().publish(PCore.getConstants().PUB_SUB_EVENTS.EVENT_CANCEL);
+          })
+          .catch(() => {
+            showToast(localizedVal('Delete failed.', localeCategory));
+          });
+        break;
+
+      default:
+        break;
+    }
+  };
+
+  return (
+    <>
+      <div className='cancel-alert-background'>
+        <div className='cancel-alert-top'>
+          <h3>{`Delete ${caseName}(${ID})`}</h3>
+          <div>
+            <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')}>
+                  {localizedVal('Save for later', localeCategory)}
+                </Button>
+              </Grid>
+              <Grid item>
+                <Button variant='outlined' color='primary' onClick={() => buttonClick('continue')}>
+                  {localizedVal('Continue Working', localeCategory)}
+                </Button>
+                <Button variant='contained' color='primary' onClick={() => buttonClick('delete')}>
+                  {localizedVal('Delete', localeCategory)}
+                </Button>
+              </Grid>
+            </Grid>
+          </div>
+        </div>
+      </div>
+      <Snackbar
+        open={showSnackbar}
+        autoHideDuration={3000}
+        onClose={handleSnackbarClose}
+        message={snackbarMessage}
+        action={
+          <IconButton size='small' aria-label='close' color='inherit' onClick={handleSnackbarClose}>
+            <CloseIcon fontSize='small' />
+          </IconButton>
+        }
+      />
+    </>
+  );
+}

package/tests/assets/sdk-r/components/create/override-sdk/field/CancelAlert/index.tsx

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

package/tests/assets/sdk-r/components/create/override-sdk/field/Checkbox/Checkbox.tsx

@@ -0,0 +1,87 @@
+import { useState, useEffect } from 'react';
+import { Checkbox, FormControl, FormControlLabel, FormGroup, FormHelperText } from '@material-ui/core';
+
+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';
+
+interface CheckboxProps extends Omit<PConnFieldProps, 'value'> {
+  // If any, enter additional props that only exist on Checkbox here
+  value?: boolean;
+  // eslint-disable-next-line react/no-unused-prop-types
+  caption?: string;
+}
+
+export default function CheckboxComponent(props: CheckboxProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const FieldValueList = getComponentFromMap('FieldValueList');
+
+  const {
+    getPConnect,
+    label,
+    value = false,
+    readOnly,
+    testId,
+    required,
+    disabled,
+    status,
+    helperText,
+    validatemessage,
+    displayMode,
+    hideLabel
+  } = props;
+  const helperTextToDisplay = validatemessage || helperText;
+
+  const thePConn = getPConnect();
+  const theConfigProps = thePConn.getConfigProps() as CheckboxProps;
+  const caption = theConfigProps.caption;
+  const actionsApi = thePConn.getActionsApi();
+  const propName = (thePConn.getStateProps() as any).value;
+
+  const [checked, setChecked] = useState(false);
+  useEffect(() => {
+    // This update theSelectedButton which will update the UI to show the selected button correctly
+    setChecked(value);
+  }, [value]);
+
+  if (displayMode === 'LABELS_LEFT') {
+    return <FieldValueList name={hideLabel ? '' : label} value={value.toString()} />;
+  }
+
+  if (displayMode === 'STACKED_LARGE_VAL') {
+    return <FieldValueList name={hideLabel ? '' : label} value={value.toString()} variant='stacked' />;
+  }
+
+  const handleChange = event => {
+    handleEvent(actionsApi, 'changeNblur', propName, event.target.checked);
+  };
+
+  const handleBlur = event => {
+    thePConn.getValidationApi().validate(event.target.checked);
+  };
+
+  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} readOnly={readOnly} />;
+  }
+
+  return (
+    <FormControl required={required} error={status === 'error'}>
+      <FormGroup>
+        <FormControlLabel
+          control={theCheckbox}
+          checked={checked}
+          onChange={!readOnly ? handleChange : undefined}
+          onBlur={!readOnly ? handleBlur : undefined}
+          label={caption}
+          labelPlacement='end'
+          data-test-id={testId}
+        />
+      </FormGroup>
+      <FormHelperText>{helperTextToDisplay}</FormHelperText>
+    </FormControl>
+  );
+}

package/tests/assets/sdk-r/components/create/override-sdk/field/Checkbox/config-ext.json

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

package/tests/assets/sdk-r/components/create/override-sdk/field/Checkbox/index.tsx

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

package/tests/assets/sdk-r/components/create/override-sdk/field/Currency/Currency.tsx

@@ -0,0 +1,104 @@
+import { 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 { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+import { getCurrencyCharacters, getCurrencyOptions } from './currency-utils';
+
+// Using control from: https://github.com/unicef/material-ui-currency-textfield
+
+interface CurrrencyProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on Currency here
+  currencyISOCode?: string;
+}
+
+export default function Currency(props: CurrrencyProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const FieldValueList = getComponentFromMap('FieldValueList');
+
+  const {
+    getPConnect,
+    label,
+    required,
+    disabled,
+    value = '',
+    validatemessage,
+    status,
+    /* onChange, onBlur, */
+    readOnly,
+    testId,
+    helperText,
+    displayMode,
+    hideLabel,
+    currencyISOCode = 'USD',
+    placeholder
+  } = props;
+
+  const pConn = getPConnect();
+  const actions = pConn.getActionsApi();
+  const propName = (pConn.getStateProps() as any).value;
+  const helperTextToDisplay = validatemessage || helperText;
+
+  // console.log(`Currency: label: ${label} value: ${value}`);
+
+  const testProp = {
+    'data-test-id': testId
+  };
+
+  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]);
+
+  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 currOnBlur(event, inValue) {
+    // console.log(`Currency currOnBlur inValue: ${inValue}`);
+    handleEvent(actions, 'changeNblur', propName, inValue !== '' ? Number(inValue) : inValue);
+  }
+
+  // console.log(`theCurrSym: ${theCurrSym} | theCurrDec: ${theCurrDec} | theCurrSep: ${theCurrSep}`);
+
+  return (
+    <CurrencyTextField
+      fullWidth
+      variant={readOnly ? 'standard' : 'outlined'}
+      helperText={helperTextToDisplay}
+      placeholder={placeholder ?? ''}
+      size='small'
+      required={required}
+      disabled={disabled}
+      readOnly={!!readOnly}
+      error={status === 'error'}
+      label={label}
+      value={value}
+      type='text'
+      outputFormat='number'
+      textAlign='left'
+      InputProps={{ inputProps: { ...testProp } }}
+      currencySymbol={theCurrSym}
+      decimalCharacter={theCurrDec}
+      digitGroupSeparator={theCurrSep}
+      onBlur={!readOnly ? currOnBlur : undefined}
+    />
+  );
+}

package/tests/assets/sdk-r/components/create/override-sdk/field/Currency/config-ext.json

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

package/tests/assets/sdk-r/components/create/override-sdk/field/Currency/currency-utils.ts

@@ -0,0 +1,68 @@
+// 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';
+
+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/tests/assets/sdk-r/components/create/override-sdk/field/Currency/index.tsx

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

package/tests/assets/sdk-r/components/create/override-sdk/field/Date/Date.tsx

@@ -0,0 +1,113 @@
+import { KeyboardDatePicker } from '@material-ui/pickers';
+
+import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
+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';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+// 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 = getComponentFromMap('TextInput');
+  const FieldValueList = getComponentFromMap('FieldValueList');
+
+  const {
+    getPConnect,
+    label,
+    required,
+    disabled,
+    value = '',
+    validatemessage,
+    status,
+    onChange,
+    onBlur,
+    readOnly,
+    testId,
+    helperText,
+    displayMode,
+    hideLabel
+  } = props;
+
+  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;
+
+  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) {
+    // const theReadOnlyComp = <TextInput props />
+    return <TextInput {...props} />;
+  }
+
+  let testProp = {};
+
+  testProp = {
+    'data-test-id': testId
+  };
+
+  const handleChange = date => {
+    if (date && date.isValid()) {
+      onChange({ value: getFormattedDate(date) });
+    }
+  };
+
+  const handleAccept = date => {
+    if (date && date.isValid()) {
+      handleEvent(actions, 'changeNblur', propName, getFormattedDate(date));
+    }
+  };
+
+  return (
+    <KeyboardDatePicker
+      disableToolbar
+      variant='inline'
+      inputVariant='outlined'
+      placeholder={dateFormatInfo.dateFormatStringLC}
+      format={dateFormatInfo.dateFormatString}
+      mask={dateFormatInfo.dateFormatMask}
+      fullWidth
+      autoOk
+      required={required}
+      disabled={disabled}
+      error={status === 'error'}
+      helperText={helperTextToDisplay}
+      size='small'
+      label={label}
+      value={value || null}
+      onChange={handleChange}
+      onBlur={!readOnly ? onBlur : undefined}
+      onAccept={handleAccept}
+      InputProps={{ ...testProp }}
+    />
+  );
+}

package/tests/assets/sdk-r/components/create/override-sdk/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/tests/assets/sdk-r/components/create/override-sdk/field/Date/index.tsx

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