@pega/sdk 0.0.1

package/templates/react-sdk-reference/src/components/helpers/attachmentShared.ts

@@ -0,0 +1,6 @@
+const megabyteSize = 1048576;
+
+export const validateMaxSize = (fileObj: Record<string, number>, maxSizeInMB: string) => {
+  const fileSize = (fileObj.size / megabyteSize).toFixed(2);
+  return parseFloat(fileSize) < parseFloat(maxSizeInMB);
+};

package/templates/react-sdk-reference/src/components/helpers/case-utils.tsx

@@ -0,0 +1,99 @@
+import { getComponentFromRegistry } from '@pega/sdk-react';
+
+/**
+ * Function that accepts array of messages as input and group them by their type and returns the resulting object
+ * @param {Array} inputMessages
+ * Eg: [
+ * {message: 'First Name is required', type: 'error'},
+ * {message: 'Last Name is required', type: 'error'},
+ * {message: 'Address field should be clear and precise', type: 'info'}
+ * ]
+ *
+ * @returns {object}
+ *
+ * Eg: {
+ *  error: ['First Name is required', 'Last Name is required'],
+ *  info: ['Address field should be clear and precise']
+ * }
+ */
+
+function getMessagesGrouped(inputMessages) {
+  const messages = {};
+
+  if (inputMessages && inputMessages instanceof Array && inputMessages.length > 0) {
+    inputMessages.forEach(item => {
+      const { message, type } = item;
+      messages[type] = [...(messages[type] || []), message];
+    });
+  }
+  return messages;
+}
+
+/**
+ * Function accepts a error type and variant of the banner
+ * @param {string} type
+ * Eg: 'error'
+ * @returns {string}
+ * Eg: 'urgent'
+ */
+function getVariant(type) {
+  const { BANNER_VARIANT_SUCCESS, BANNER_VARIANT_INFO, BANNER_VARIANT_URGENT, MESSAGES } = PCore.getConstants();
+  const { MESSAGES_TYPE_ERROR, MESSAGES_TYPE_INFO, MESSAGES_TYPE_SUCCESS } = MESSAGES;
+
+  let variant;
+  switch (type) {
+    case MESSAGES_TYPE_ERROR:
+      variant = BANNER_VARIANT_URGENT;
+      break;
+    case MESSAGES_TYPE_INFO:
+      variant = BANNER_VARIANT_INFO;
+      break;
+    case MESSAGES_TYPE_SUCCESS:
+      variant = BANNER_VARIANT_SUCCESS;
+      break;
+    default:
+      variant = '';
+  }
+  return variant;
+}
+
+function getBanners(config) {
+  const AlertBanner = getComponentFromRegistry('AlertBanner');
+  const { target, pageMessages, httpMessages } = config;
+  const { PAGE } = PCore.getConstants();
+  const { clearMessages } = PCore.getMessageManager();
+  const banners: any = [];
+  const groupedPageMessages = getMessagesGrouped(pageMessages);
+
+  Object.keys(groupedPageMessages).forEach(type => {
+    const messagesByType = groupedPageMessages[type];
+    const variant = getVariant(type);
+    const pageMessagesBannerID = `${target}_${PAGE}_${type}`.toLowerCase().replace('/', '_');
+    banners.push(
+      <AlertBanner
+        id={pageMessagesBannerID}
+        variant={variant}
+        messages={messagesByType}
+        onDismiss={
+          variant === 'urgent'
+            ? ''
+            : () => {
+                clearMessages({
+                  category: PAGE,
+                  type,
+                  context: target
+                } as any);
+              }
+        }
+      />
+    );
+  });
+
+  if (httpMessages && httpMessages.length > 0) {
+    banners.push(<AlertBanner id='modalViewContainerBanner' variant='urgent' messages={httpMessages} />);
+  }
+
+  return banners;
+}
+
+export { getMessagesGrouped, getBanners };

package/templates/react-sdk-reference/src/components/helpers/common-utils.ts

@@ -0,0 +1,26 @@
+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 localeStore = PCore.getLocaleUtils().localeStore;
+
+  if (!localeStore) return key;
+
+  // Split the path and traverse the object
+  const pathParts = path.split('.');
+  let currentObj: any = localeStore;
+
+  for (const part of pathParts) {
+    if (!currentObj[part]) return key;
+    currentObj = currentObj[part];
+  }
+
+  return currentObj[key] || key;
+}

package/templates/react-sdk-reference/src/components/helpers/data_page.ts

@@ -0,0 +1,20 @@
+export const getDataPage = (dataPageName, parameters, context) => {
+  let dataViewParams;
+  if (parameters) {
+    dataViewParams = {
+      dataViewParameters: parameters
+    };
+  }
+  return new Promise((resolve, reject) => {
+    (PCore.getDataApiUtils().getData(dataPageName, dataViewParams, context) as any)
+      .then(response => {
+        resolve(response.data.data);
+      })
+      .catch(e => {
+        if (e) {
+          // check specific error if 401, and wiped out if so stored token is stale.  Fetcch new tokens.
+          reject(e);
+        }
+      });
+  });
+};

package/templates/react-sdk-reference/src/components/helpers/date-format-utils.ts

@@ -0,0 +1,76 @@
+import { getLocale } from './formatters/common';
+
+export const dateFormatInfoDefault = {
+  dateFormatString: 'MM/DD/YYYY',
+  dateFormatStringLong: 'MMM DD, YYYY',
+  dateFormatStringLC: 'mm/dd/yyyy',
+  dateFormatMask: '__/__/____'
+};
+
+export const getDateFormatInfo = (): typeof dateFormatInfoDefault => {
+  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const localeCategory = 'CosmosFields';
+  const theDateFormatInfo = dateFormatInfoDefault;
+  const theLocale = getLocale();
+
+  // NOTE: this date was chosen since it has a day larger than 12. If you change it,
+  //  you'll need to change the indexOf values below!
+  const theTestDate = new Date(Date.parse('30 November 2023 12:00:00 GMT'));
+  const theTestDateLocaleString = new Intl.DateTimeFormat(theLocale).format(theTestDate);
+
+  // console.log(`theLocale: ${theLocale} theTestDateLocaleString: ${theTestDateLocaleString}`);
+
+  // Build the format string based on where '11' (mm), '30' (dd), and '2023' (yyyy) are
+  //  Example: US locations are 0, 3, 6 but for NL locations are 3, 0, 6
+  const locMM = theTestDateLocaleString.indexOf('11');
+  const locDD = theTestDateLocaleString.indexOf('30');
+  const locYYYY = theTestDateLocaleString.indexOf('2023');
+
+  // If localized placeholder exists for one of day/month/year then show it otherwise fall back to ddmmyyyy
+  const localizedPlaceholderExists =
+    localizedVal('month_placeholder', localeCategory) !== 'month_placeholder' ||
+    localizedVal('day_placeholder', localeCategory) !== 'day_placeholder' ||
+    localizedVal('year_placeholder', localeCategory) !== 'year_placeholder';
+
+  const arrPieces = [
+    {
+      loc: locMM,
+      format: 'MM',
+      longFormat: 'MMM',
+      placeholder: localizedPlaceholderExists ? localizedVal('month_placeholder', localeCategory) : 'mm',
+      mask: '__',
+      separator: theTestDateLocaleString[locMM + 2]
+    },
+    {
+      loc: locDD,
+      format: 'DD',
+      longFormat: 'DD',
+      placeholder: localizedPlaceholderExists ? localizedVal('day_placeholder', localeCategory) : 'dd',
+      mask: '__',
+      separator: theTestDateLocaleString[locDD + 2]
+    },
+    {
+      loc: locYYYY,
+      format: 'YYYY',
+      longFormat: 'YYYY',
+      placeholder: localizedPlaceholderExists ? localizedVal('year_placeholder', localeCategory) : 'yyyy',
+      mask: '____',
+      separator: theTestDateLocaleString[locYYYY + 4]
+    }
+  ];
+
+  // Sort the associative array by order of appearance (loc) of each piece
+  arrPieces.sort((a, b) => {
+    if (a.loc < b.loc) return -1;
+    if (a.loc > b.loc) return 1;
+    return 0;
+  });
+
+  // Construct the structure to return...
+  theDateFormatInfo.dateFormatString = `${arrPieces[0].format}${arrPieces[0].separator}${arrPieces[1].format}${arrPieces[1].separator}${arrPieces[2].format}`;
+  theDateFormatInfo.dateFormatStringLong = `${arrPieces[0].longFormat} ${arrPieces[1].longFormat}, ${arrPieces[2].longFormat}`;
+  theDateFormatInfo.dateFormatStringLC = `${arrPieces[0].placeholder}${arrPieces[0].separator}${arrPieces[1].placeholder}${arrPieces[1].separator}${arrPieces[2].placeholder}`;
+  theDateFormatInfo.dateFormatMask = `${arrPieces[0].mask}${arrPieces[0].separator}${arrPieces[1].mask}${arrPieces[1].separator}${arrPieces[2].mask}`;
+
+  return theDateFormatInfo;
+};

package/templates/react-sdk-reference/src/components/helpers/event-utils.ts

@@ -0,0 +1,20 @@
+// From DX Components src/utils/event-utils.js
+
+const handleEvent = (actions: any, eventType: string, propName: string, value: string) => {
+  switch (eventType) {
+    case 'change':
+      actions.updateFieldValue(propName, value);
+      break;
+    case 'blur':
+      actions.triggerFieldChange(propName, value);
+      break;
+    case 'changeNblur':
+      actions.updateFieldValue(propName, value);
+      actions.triggerFieldChange(propName, value);
+      break;
+    default:
+      break;
+  }
+};
+
+export default handleEvent;

package/templates/react-sdk-reference/src/components/helpers/field-group-utils.ts

@@ -0,0 +1,63 @@
+import { createElement, type ReactElement } from 'react';
+
+import { PConnectComponent } from '@pega/sdk-react';
+
+/**
+ *
+ * @param {*} pConn - pConnect object of the view
+ * @returns {string} - returns the name of referenceList
+ */
+
+export const getReferenceList = (pConn) => {
+  let resolvePage = pConn.getComponentConfig().referenceList.replace('@P ', '');
+  if (resolvePage.includes('D_')) {
+    resolvePage = pConn.resolveDatasourceReference(resolvePage);
+    if (resolvePage?.pxResults) {
+      resolvePage = resolvePage?.pxResults;
+    } else if (
+      resolvePage.startsWith('D_') &&
+      !resolvePage.endsWith('.pxResults')
+    ) {
+      resolvePage = `${resolvePage}.pxResults`;
+    }
+  }
+  return resolvePage;
+};
+
+/**
+ * creates and returns react element of the view
+ * @param {*} pConn - pConnect object of the view
+ * @param {*} index - index of the fieldGroup item
+ * @param {*} viewConfigPath - boolean value to check for children in config
+ * @returns {*} - return the react element of the view
+ */
+export function buildView(pConn, index, viewConfigPath): ReactElement {
+  const context = pConn.getContextName();
+  const referenceList = getReferenceList(pConn);
+
+  const isDatapage = referenceList.startsWith('D_');
+  const pageReference = isDatapage
+    ? `${referenceList}[${index}]`
+    : `${pConn.getPageReference()}${referenceList}[${index}]`;
+  const meta = viewConfigPath
+    ? pConn.getRawMetadata().children[0].children[0]
+    : pConn.getRawMetadata().children[0];
+
+  delete meta?.config?.ruleClass;
+
+  const config = {
+    meta,
+    options: {
+      context,
+      pageReference,
+      referenceList,
+      hasForm: true,
+    },
+  };
+
+  const view = PCore.createPConnect(config);
+  if (pConn.getConfigProps()?.displayMode === 'DISPLAY_ONLY') {
+    view.getPConnect()?.setInheritedProp('displayMode', 'DISPLAY_ONLY');
+  }
+  return createElement(PConnectComponent, view);
+}

package/templates/react-sdk-reference/src/components/helpers/formatters/Boolean.ts

@@ -0,0 +1,21 @@
+function Boolean(value, { allowEmpty = true, tick = '', cross = '' } = {}) {
+  if ((!allowEmpty && !value) || value === false || value?.toString()?.toLowerCase() === 'false' || value === 0 || value === '0') {
+    return cross || '';
+  }
+  if (value === true || value?.toString()?.toLowerCase() === 'true' || value === 1 || value === '1') {
+    return tick || '';
+  }
+  if (allowEmpty && (value === 'null' || value === '' || value === null || typeof value === 'undefined')) {
+    return '- -';
+  }
+  return value;
+}
+
+export default {
+  TrueFalse: (value, options) =>
+    Boolean(value, {
+      ...options,
+      tick: options.trueLabel || 'True',
+      cross: options.falseLabel || 'False'
+    })
+};

package/templates/react-sdk-reference/src/components/helpers/formatters/Currency.ts

@@ -0,0 +1,77 @@
+import { getLocale } from './common';
+import CurrencyMap from './CurrencyMap';
+
+const isValidValue = value => {
+  return value !== null && value !== undefined && value !== '';
+};
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function NumberFormatter(value, { locale = 'en-US', decPlaces = 2, style = '', currency = 'USD' } = {}): string {
+  const currentLocale: string | undefined = getLocale(locale);
+  if (isValidValue(value)) {
+    return Number(value).toLocaleString(currentLocale, { minimumFractionDigits: decPlaces, maximumFractionDigits: decPlaces });
+  }
+  return value;
+}
+
+function CurrencyFormatter(
+  value: string,
+  { symbol = true, position = 'before', locale = 'en-US', decPlaces = 2, style = 'currency', currency = 'USD' } = {}
+): string {
+  const currentLocale: string | undefined = getLocale(locale);
+  let formattedValue: string = value;
+  if (isValidValue(value)) {
+    formattedValue = NumberFormatter(value, { locale: currentLocale, decPlaces, style, currency });
+
+    // 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) {
+      countryCode = 'US';
+    }
+
+    let code: string;
+    if (symbol) {
+      code = CurrencyMap[countryCode]?.symbolFormat;
+    } else {
+      code = CurrencyMap[countryCode]?.currencyCode;
+    }
+
+    // if position is provided, change placeholder accordingly.
+    if (position && code) {
+      if (position.toLowerCase() === 'before' && code.startsWith('{#}')) {
+        code = code.slice(3) + code.slice(0, 3);
+      } else if (position.toLowerCase() === 'after' && code.indexOf('{#}') === code.length - 3) {
+        code = code.slice(-3) + code.slice(0, -3);
+      }
+    }
+    return code?.replace('{#}', formattedValue) || formattedValue;
+  }
+  return formattedValue;
+}
+
+function SymbolFormatter(value, { symbol = '$', suffix = true, locale = 'en-US' } = {}): string {
+  let formattedValue: string = value;
+  if (isValidValue(value)) {
+    formattedValue = NumberFormatter(value, { locale });
+    return suffix ? `${formattedValue}${symbol}` : `${symbol}${formattedValue}`;
+  }
+  return formattedValue;
+}
+
+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 }),
+  Integer: (value, options) => NumberFormatter(value, { ...options, decPlaces: 0 }),
+  Percentage: (value, options) => SymbolFormatter(value, { ...options, symbol: '%' }),
+  isValidValue
+};