@pega/react-sdk-overrides 0.23.25 → 0.23.27

package/lib/helpers/case-utils.tsx

@@ -0,0 +1,99 @@
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+
+/**
+ * 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 = getComponentFromMap('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/lib/helpers/common-utils.ts

@@ -0,0 +1,8 @@
+export function isEmptyObject(obj: Object): boolean {
+  return Object.keys(obj).length === 0;
+}
+
+export function isInfinity23OrHigher() {
+  const pCoreVersion = PCore.getPCoreVersion();
+  return ['8.23.0', '23.1.1'].includes(pCoreVersion);
+}

package/lib/helpers/data_page.ts

@@ -1,16 +1,13 @@
-declare const PCore;
-
 // eslint-disable-next-line import/prefer-default-export
 export const getDataPage = (dataPageName, parameters, context) => {
   let dataViewParams;
-  if(parameters){
+  if (parameters) {
     dataViewParams = {
-      'dataViewParameters': parameters
+      dataViewParameters: parameters
     };
   }
   return new Promise((resolve, reject) => {
-    PCore.getDataApiUtils()
-      .getData(dataPageName, dataViewParams, context)
+    (PCore.getDataApiUtils().getData(dataPageName, dataViewParams, context) as any)
       .then(response => {
         resolve(response.data.data);
       })

package/lib/helpers/date-format-utils.ts

@@ -1,16 +1,17 @@
 import { getLocale } from './formatters/common';
 
-
 export const dateFormatInfoDefault = {
-  dateFormatString: "MM/DD/YYYY",
-  dateFormatStringLong: "MMM DD, YYYY",
-  dateFormatStringLC: "mm/dd/yyyy",
-  dateFormatMask: "__/__/____"
-}
+  dateFormatString: 'MM/DD/YYYY',
+  dateFormatStringLong: 'MMM DD, YYYY',
+  dateFormatStringLC: 'mm/dd/yyyy',
+  dateFormatMask: '__/__/____'
+};
 
-export const getDateFormatInfo = () => {
+export const getDateFormatInfo = (): typeof dateFormatInfoDefault => {
+  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const localeCategory = 'CosmosFields';
   const theDateFormatInfo = dateFormatInfoDefault;
-  const theLocale = getLocale(); // PCore.getEnvironmentInfo().getUseLocale() || "US-en";
+  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!
@@ -25,29 +26,38 @@ export const getDateFormatInfo = () => {
   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: 'mm',
-      mask: '__'
+      placeholder: localizedPlaceholderExists ? localizedVal('month_placeholder', localeCategory) : 'mm',
+      mask: '__',
+      separator: theTestDateLocaleString[locMM + 2]
     },
     {
       loc: locDD,
       format: 'DD',
       longFormat: 'DD',
-      placeholder: 'dd',
-      mask: '__'
+      placeholder: localizedPlaceholderExists ? localizedVal('day_placeholder', localeCategory) : 'dd',
+      mask: '__',
+      separator: theTestDateLocaleString[locDD + 2]
     },
     {
       loc: locYYYY,
       format: 'YYYY',
       longFormat: 'YYYY',
-      placeholder: 'yyyy',
-      mask: '____'
+      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) => {
@@ -57,10 +67,10 @@ export const getDateFormatInfo = () => {
   });
 
   // Construct the structure to return...
-  theDateFormatInfo.dateFormatString = `${arrPieces[0].format}/${arrPieces[1].format}/${arrPieces[2].format}`;
+  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[1].placeholder}/${arrPieces[2].placeholder}`;
-  theDateFormatInfo.dateFormatMask = `${arrPieces[0].mask}/${arrPieces[1].mask}/${arrPieces[2].mask}`;
+  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/lib/helpers/{event-utils.js → event-utils.ts}

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

package/lib/helpers/{field-group-utils.js → field-group-utils.ts}

@@ -1,4 +1,4 @@
-import { createElement } from 'react';
+import { createElement, ReactElement } from 'react';
 
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 
@@ -28,17 +28,16 @@ export const getReferenceList = pConn => {
  * @param {*} viewConfigPath - boolean value to check for children in config
  * @returns {*} - return the react element of the view
  */
-export const buildView = (pConn, index, viewConfigPath) => {
+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];
+  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: {
@@ -48,10 +47,10 @@ export const buildView = (pConn, index, viewConfigPath) => {
       hasForm: true
     }
   };
-  // eslint-disable-next-line no-undef
+
   const view = PCore.createPConnect(config);
   if (pConn.getConfigProps()?.displayMode === 'LABELS_LEFT') {
     view.getPConnect()?.setInheritedProp('displayMode', 'LABELS_LEFT');
   }
   return createElement(createPConnectComponent(), view);
-};
+}

package/lib/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/lib/helpers/formatters/{Currency.js → Currency.ts}

@@ -1,8 +1,9 @@
-import { getLocale } from "./common";
-import CurrencyMap from "./CurrencyMap";
+import { getLocale } from './common';
+import CurrencyMap from './CurrencyMap';
 
-function NumberFormatter(value, { locale, decPlaces = 2 } = {}) {
-  const currentLocale = getLocale(locale);
+// 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 (value !== null && value !== undefined) {
     return Number(value).toLocaleString(currentLocale, {
       minimumFractionDigits: decPlaces,
@@ -13,11 +14,11 @@ function NumberFormatter(value, { locale, decPlaces = 2 } = {}) {
 }
 
 function CurrencyFormatter(
-  value,
-  { symbol = true, position, locale, decPlaces = 2, style = "currency", currency = "USD" } = {}
-) {
-  const currentLocale = getLocale(locale);
-  let formattedValue = value;
+  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 (value !== null && value !== undefined && value !== '') {
     formattedValue = NumberFormatter(value, {
       locale: currentLocale,
@@ -26,14 +27,14 @@ function CurrencyFormatter(
       currency
     });
 
-    let countryCode =  currentLocale.split("-")[1].toUpperCase();
+    let countryCode: string | undefined = currentLocale?.split('-')[1].toUpperCase();
 
     // If countryCode is still undefined, setting it as US
-    if( !countryCode ){
+    if (!countryCode) {
       countryCode = 'US';
     }
 
-    let code;
+    let code: string;
     if (symbol) {
       code = CurrencyMap[countryCode]?.symbolFormat;
     } else {
@@ -42,22 +43,19 @@ function CurrencyFormatter(
 
     // if position is provided, change placeholder accordingly.
     if (position && code) {
-      if (position.toLowerCase() === "before" && code.indexOf("{#}") === 0) {
+      if (position.toLowerCase() === 'before' && code.startsWith('{#}')) {
         code = code.slice(3) + code.slice(0, 3);
-      } else if (
-        position.toLowerCase() === "after" &&
-        code.indexOf("{#}") === code.length - 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 code?.replace('{#}', formattedValue) || formattedValue;
   }
   return formattedValue;
 }
 
-function SymbolFormatter(value, { symbol, suffix = true, locale } = {}) {
-  let formattedValue = value;
+function SymbolFormatter(value, { symbol = '$', suffix = true, locale = 'en-US' } = {}): string {
+  let formattedValue: string = value;
   if (value !== null && value !== undefined) {
     formattedValue = NumberFormatter(value, { locale });
     return suffix ? `${formattedValue}${symbol}` : `${symbol}${formattedValue}`;
@@ -67,16 +65,13 @@ function SymbolFormatter(value, { symbol, suffix = true, locale } = {}) {
 
 export default {
   Currency: (value, options) => CurrencyFormatter(value, options),
-  "Currency-Code": (value, options) =>
-    CurrencyFormatter(value, { ...options, symbol: false }),
+  'Currency-Code': (value, options) => CurrencyFormatter(value, { ...options, symbol: false }),
   Decimal: (value, options) => NumberFormatter(value, options),
-  "Decimal-Auto": (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: "%" })
+  Integer: (value, options) => NumberFormatter(value, { ...options, decPlaces: 0 }),
+  Percentage: (value, options) => SymbolFormatter(value, { ...options, symbol: '%' })
 };