@pega/react-sdk-overrides 0.23.25 → 8.8.20

package/lib/helpers/case-utils.tsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+
+// Remove this and use "real" PCore type once .d.ts is fixed (currently shows 1 error)
+declare const PCore: any;
+
+/**
+ * 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
+                });
+              }
+        }
+      />
+    );
+  });
+
+  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,4 @@
+// eslint-disable-next-line import/prefer-default-export
+export function isEmptyObject(obj: Object): boolean {
+  return Object.keys(obj).length === 0;
+}

package/lib/helpers/config_access.js

@@ -1,7 +1,6 @@
 // Helper singleton class to assist with loading and accessing
 //  the SDK Config JSON
-import {sdkGetAuthHeader} from './authManager';
-import Utils from './utils';
+import { isEmptyObject } from './common-utils';
 
 // Create a singleton for this class (with async loading of config file) and export it
 // Note: Initialzing SdkConfigAccess to null seems to cause lots of compile issues with references
@@ -9,9 +8,7 @@ import Utils from './utils';
 let SdkConfigAccess;
 let SdkConfigAccessCreateInProgress = false;
 
-
 class ConfigAccess {
-
   constructor() {
     // sdkConfig is the JSON object read from the sdk-config.json file
     this.sdkConfig = {};
@@ -27,23 +24,24 @@ class ConfigAccess {
    * @returns Promise of config file fetch
    */
   async readSdkConfig() {
-    if(Utils.isEmptyObject(this.sdkConfig)) {
-      return  fetch("./sdk-config.json")
-        .then ( (response) => {
-          if( response.ok ) {
+    if (isEmptyObject(this.sdkConfig)) {
+      return fetch('./sdk-config.json')
+        .then(response => {
+          if (response.ok) {
             return response.json();
           } else {
             throw new Error(`Failed with status:${response.status}`);
           }
         })
-        .then ( (data) => {
-            this.sdkConfig = data;
-            this.fixupConfigSettings();
-            return Promise.resolve(this.sdkConfig);
-        }).catch(err => {
-            console.error("Fetch for sdk-config.js failed.");
-            console.error(err);
-            return Promise.reject(err);
+        .then(data => {
+          this.sdkConfig = data;
+          this.fixupConfigSettings();
+          return Promise.resolve(this.sdkConfig);
+        })
+        .catch(err => {
+          console.error('Fetch for sdk-config.js failed.');
+          console.error(err);
+          return Promise.reject(err);
         });
     } else {
       return Promise.resolve(this.sdkConfig);
@@ -52,24 +50,33 @@ class ConfigAccess {
 
   // Adjust any settings like setting up defaults or making sure URIs have a trailing slash
   fixupConfigSettings() {
-    const oServerConfig = this.sdkConfig["serverConfig"];
+    const oServerConfig = this.sdkConfig['serverConfig'];
     // If not present, then use current root path
     oServerConfig.sdkContentServerUrl = oServerConfig.sdkContentServerUrl || window.location.origin;
     // Needs a trailing slash so add one if not there
-    if( !oServerConfig.sdkContentServerUrl.endsWith('/') ) {
+    if (!oServerConfig.sdkContentServerUrl.endsWith('/')) {
       oServerConfig.sdkContentServerUrl = `${oServerConfig.sdkContentServerUrl}/`;
     }
-    console.log(`Using sdkContentServerUrl: ${this.sdkConfig["serverConfig"].sdkContentServerUrl}`);
+    console.log(`Using sdkContentServerUrl: ${this.sdkConfig['serverConfig'].sdkContentServerUrl}`);
 
     // Don't want a trailing slash for infinityRestServerUrl
-    if( oServerConfig.infinityRestServerUrl.endsWith('/') ) {
-      oServerConfig.infinityRestServerUrl = oServerConfig.infinityRestServerUrl.slice(0, -1)
+    if (oServerConfig.infinityRestServerUrl.endsWith('/')) {
+      oServerConfig.infinityRestServerUrl = oServerConfig.infinityRestServerUrl.slice(0, -1);
     }
 
     // Specify our own internal list of well known portals to exclude (if one not specified)
-    if( !oServerConfig.excludePortals ) {
-      oServerConfig.excludePortals = ["pxExpress", "Developer", "pxPredictionStudio", "pxAdminStudio", "pyCaseWorker", "pyCaseManager7"];
-      console.warn(`No exludePortals entry found within serverConfig section of sdk-config.json.  Using the following default list: ["pxExpress", "Developer", "pxPredictionStudio", "pxAdminStudio", "pyCaseWorker", "pyCaseManager7"]`);
+    if (!oServerConfig.excludePortals) {
+      oServerConfig.excludePortals = [
+        'pxExpress',
+        'Developer',
+        'pxPredictionStudio',
+        'pxAdminStudio',
+        'pyCaseWorker',
+        'pyCaseManager7'
+      ];
+      console.warn(
+        `No exludePortals entry found within serverConfig section of sdk-config.json.  Using the following default list: ["pxExpress", "Developer", "pxPredictionStudio", "pxAdminStudio", "pyCaseWorker", "pyCaseManager7"]`
+      );
     }
   }
 
@@ -78,145 +85,56 @@ class ConfigAccess {
    * @returns the sdk-config JSON object
    */
   getSdkConfig = async () => {
-    if(Utils.isEmptyObject(this.sdkConfig)) {
+    if (isEmptyObject(this.sdkConfig)) {
       await getSdkConfig();
     }
     return this.sdkConfig;
-  }
-
+  };
 
   /**
    *
    * @returns the authConfig block in the SDK Config object
    */
   getSdkConfigAuth = () => {
-    if(Utils.isEmptyObject(this.sdkConfig)) {
+    if (isEmptyObject(this.sdkConfig)) {
       const config = this.getSdkConfig();
     }
-    return this.sdkConfig["authConfig"];
-  }
+    return this.sdkConfig['authConfig'];
+  };
 
   /**
    *
    * @returns the serverConfig bloc from the sdk-config.json file
    */
   getSdkConfigServer = () => {
-    if(Utils.isEmptyObject(this.sdkConfig)) {
+    if (isEmptyObject(this.sdkConfig)) {
       const config = this.getSdkConfig();
     }
-    return this.sdkConfig["serverConfig"];
-  }
-
+    return this.sdkConfig['serverConfig'];
+  };
 
   /**
-     * @param {String} key the key to be inserted/updated in serverConfig
-     * @param {String} value the value to be assigned to the given key
-     */
+   * @param {String} key the key to be inserted/updated in serverConfig
+   * @param {String} value the value to be assigned to the given key
+   */
   setSdkConfigServer = (key, value) => {
-
     this.sdkConfig.serverConfig[key] = value;
-
-  }
-
-  /**
-   * If this.sdkConfig.serverConfig.appPortal is set, leave it and the specified portal will be used.
-   * If not set, set this.sdkConfig.serverConfig.appPortal to default portal of currently logged in user
-   */
-   async selectPortal() {
-
-    if(Utils.isEmptyObject(this.sdkConfig)) {
-      await getSdkConfig();
-    }
-
-    const serverConfig = this.sdkConfig.serverConfig;
-
-    if ((serverConfig.appPortal !== "") &&
-        (serverConfig.appPortal !== undefined) ) {
-          // use the specified portal
-          console.log(`Using appPortal: ${serverConfig.appPortal}`);
-          return;
-    }
-
-    const userAccessGroup = PCore.getEnvironmentInfo().getAccessGroup();
-    const dataPageName = "D_OperatorAccessGroups";
-    const serverUrl = serverConfig.infinityRestServerUrl;
-    const appAlias = serverConfig.appAlias;
-    const appAliasPath = appAlias ? `/app/${appAlias}` : '';
-    const arExcludedPortals = serverConfig["excludePortals"];
-
-    // Using v1 API here as v2 data_views is not able to access same data page currently.  Should move to avoid having this logic to find
-    //  a default portal or constellation portal and rather have Constellation JS Engine API just load the default portal
-    await fetch ( `${serverUrl}${appAliasPath}/api/v1/data/${dataPageName}`,
-      {
-        method: 'GET',
-        headers: {
-          'Content-Type' : 'application/json',
-          'Authorization' : sdkGetAuthHeader()
-        }
-      })
-      .then( response => {
-        if( response.ok && response.status === 200) {
-          return response.json();
-        } else {
-          if( response.status === 401 ) {
-            // Might be either a real token expiration or revoke, but more likely that the "api" service package is misconfigured
-            throw( new Error(`Attempt to access ${dataPageName} failed.  The "api" service package is likely not configured to use "OAuth 2.0"`));
-          };
-          throw( new Error(`HTTP Error: ${response.status}`));
-        }
-      })
-      .then( async (agData) => {
-
-        let arAccessGroups = agData.pxResults;
-        let selectedPortal = null;
-
-        for (let ag of arAccessGroups) {
-          if (ag.pyAccessGroup === userAccessGroup) {
-            // Check if default portal works
-            if( !arExcludedPortals.includes(ag.pyPortal) ) {
-              selectedPortal = ag.pyPortal;
-            } else {
-              console.error(`Default portal for current operator (${ag.pyPortal}) is not compatible with SDK.\nConsider using a different operator, adjusting the default portal for this operator, or using "appPortal" setting within sdk-config.json to specify a specific portal to load.`);
-              // Find first portal that is not excluded (might work)
-              for (let portal of ag.pyUserPortals ) {
-                if( !arExcludedPortals.includes(portal.pyPortalLayout) ) {
-                  selectedPortal = portal.pyPortalLayout;
-                  break;
-                }
-              }
-            }
-            break;
-          }
-        }
-        if( selectedPortal ) {
-          // Found operator's current access group. Use its portal
-          this.setSdkConfigServer("appPortal", selectedPortal);
-          console.log(`Using non-excluded portal: ${serverConfig.appPortal}`);
-        }
-      })
-      .catch( e => {
-        console.error(e.message);
-        // check specific error if 401, and wiped out if so stored token is stale.  Fetch new tokens.
-      });
-
-  }
+  };
 
   /**
    * Path to the BootstrapCSS
    * @returns the locBootstrapCSS from the serverConfig block of the sdk-config.json file
    */
-   getSdkConfigBootstrapCSS = () => {
-     const serverConfig = this.getSdkConfigServer();
-     const locBootstrapCSS = serverConfig.locBootstrapCSS;
-     if (locBootstrapCSS === undefined) {
-       console.error(`locBootstrapCSS: ${locBootstrapCSS}`);
-     }
+  getSdkConfigBootstrapCSS = () => {
+    const serverConfig = this.getSdkConfigServer();
+    const locBootstrapCSS = serverConfig.locBootstrapCSS;
+    if (locBootstrapCSS === undefined) {
+      console.error(`locBootstrapCSS: ${locBootstrapCSS}`);
+    }
     return locBootstrapCSS;
-  }
-
+  };
 }
 
-
 // Implement Factory function to allow async load
 //  See https://stackoverflow.com/questions/49905178/asynchronous-operations-in-constructor/49906064#49906064 for inspiration
 async function createSdkConfigAccess() {
@@ -224,36 +142,36 @@ async function createSdkConfigAccess() {
   let singleton = new ConfigAccess();
   await singleton.readSdkConfig();
   return singleton;
-};
+}
 
 // Initialize exported SdkConfigAccess structure
 async function getSdkConfig() {
-  return new Promise( (resolve) => {
+  return new Promise(resolve => {
     let idNextCheck = null;
-    if( !SdkConfigAccess && !SdkConfigAccessCreateInProgress ) {
+    if (!SdkConfigAccess && !SdkConfigAccessCreateInProgress) {
       SdkConfigAccessCreateInProgress = true;
-      createSdkConfigAccess().then( theConfigAccess => {
+      createSdkConfigAccess().then(theConfigAccess => {
         // Key initialization of SdkConfigAccess
         SdkConfigAccess = theConfigAccess;
         SdkConfigAccessCreateInProgress = false;
         // console.log(`SdkConfigAccess: ${JSON.stringify(SdkConfigAccess)}`);
         // Create and dispatch the SdkConfigAccessReady event
-        const event = new CustomEvent("SdkConfigAccessReady", { });
+        const event = new CustomEvent('SdkConfigAccessReady', {});
         document.dispatchEvent(event);
-        return resolve( SdkConfigAccess.sdkConfig );
+        return resolve(SdkConfigAccess.sdkConfig);
       });
     } else {
       const fnCheckForConfig = () => {
-        if( SdkConfigAccess ) {
-          if( idNextCheck ) {
+        if (SdkConfigAccess) {
+          if (idNextCheck) {
             clearInterval(idNextCheck);
           }
-          return resolve( SdkConfigAccess.sdkConfig );
+          return resolve(SdkConfigAccess.sdkConfig);
         }
         idNextCheck = setInterval(fnCheckForConfig, 500);
       };
-      if( SdkConfigAccess ) {
-        return resolve( SdkConfigAccess.sdkConfig );
+      if (SdkConfigAccess) {
+        return resolve(SdkConfigAccess.sdkConfig);
       } else {
         idNextCheck = setInterval(fnCheckForConfig, 500);
       }
@@ -261,8 +179,8 @@ async function getSdkConfig() {
   });
 }
 
-if( true ) {
+if (true) {
   let ignore = getSdkConfig();
 }
 
-export {SdkConfigAccess, getSdkConfig};
+export { SdkConfigAccess, getSdkConfig };

package/lib/helpers/data_page.ts

@@ -1,4 +1,5 @@
-declare const PCore;
+// Remove this and use "real" PCore type once .d.ts is fixed (currently shows 1 error)
+declare const PCore: any;
 
 // eslint-disable-next-line import/prefer-default-export
 export const getDataPage = (dataPageName, parameters, context) => {

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,6 +1,6 @@
 // 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":
       actions.updateFieldValue(propName, value);

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

@@ -1,7 +1,8 @@
-import { createElement } from 'react';
+import { createElement, ReactElement } from 'react';
 
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 
+
 /**
  *
  * @param {*} pConn - pConnect object of the view
@@ -28,7 +29,7 @@ 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);
 
@@ -48,7 +49,7 @@ 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');

package/lib/helpers/formatters/{Currency.js → Currency.ts}

@@ -1,8 +1,9 @@
 import { getLocale } from "./common";
 import CurrencyMap from "./CurrencyMap";
 
-function NumberFormatter(value, { locale, decPlaces = 2 } = {}) {
-  const currentLocale = getLocale(locale);
+// eslint-disable-next-line no-unused-vars, @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 ){
       countryCode = 'US';
     }
 
-    let code;
+    let code: string;
     if (symbol) {
       code = CurrencyMap[countryCode]?.symbolFormat;
     } else {
@@ -42,7 +43,7 @@ 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" &&
@@ -56,8 +57,8 @@ function CurrencyFormatter(
   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}`;

package/lib/helpers/formatters/{CurrencyMap.js → CurrencyMap.ts}

@@ -1,29 +1,32 @@
 /* eslint-disable no-template-curly-in-string */
-const EURO = {
+
+type CurrencyMapType = { name: string, symbolFormat: string, currencyCode: string}
+
+const EURO: CurrencyMapType = {
   name: "Euro (EUR)",
   symbolFormat: "\u20AC{#}",
   currencyCode: "EUR {#}"
 };
 
-const USD = {
+const USD: CurrencyMapType = {
   name: "U.S. Dollar (USD)",
   symbolFormat: "${#}",
   currencyCode: "USD {#}"
 };
 
-const XAF = {
+const XAF: CurrencyMapType = {
   name: "CFA Franc (BEAC) (XAF)",
   symbolFormat: "XAF {#}",
   currencyCode: "XAF {#}"
 };
 
-const XCD = {
+const XCD: CurrencyMapType = {
   name: "East Caribbean Dollar (XCD)",
   symbolFormat: "${#}",
   currencyCode: "XCD {#}"
 };
 
-const XPF = {
+const XPF: CurrencyMapType = {
   name: "Pacific Franc (XPF)",
   symbolFormat: "₣{#}",
   currencyCode: "XPF {#}"