@pega/react-sdk-overrides 8.23.10 → 8.23.11-debug

package/lib/helpers/config_access.js

@@ -1,7 +1,7 @@
 // Helper singleton class to assist with loading and accessing
 //  the SDK Config JSON
-import {sdkGetAuthHeader} from './authManager';
-import Utils from './utils';
+import { sdkGetAuthHeader } from './authManager';
+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 +9,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 +25,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 +51,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 +86,128 @@ 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
+   * Get available portals which supports SDK
+   * @returns list of available portals (portals other than excludingPortals list)
    */
-   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;
-    }
+  async getAvailablePortals() {
+    return new Promise(async (resolve, reject) => {
+      if (isEmptyObject(this.sdkConfig)) {
+        await getSdkConfig();
+      }
 
-    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"];
+      const serverConfig = this.sdkConfig.serverConfig;
+
+      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'];
+      let headers = {
+        Authorization: sdkGetAuthHeader(),
+        'Content-Type': 'application/json'
+      };
 
-    // 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}`,
-      {
+      // 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
+      fetch(`${serverUrl}${appAliasPath}/api/v1/data/${dataPageName}`, {
         method: 'GET',
-        headers: {
-          'Content-Type' : 'application/json',
-          'Authorization' : sdkGetAuthHeader()
-        }
+        headers
       })
-      .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;
+        .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 => {
+          const arAccessGroups = agData.pxResults;
+          const availablePortals = [];
+
+          for (let ag of arAccessGroups) {
+            if (ag.pyAccessGroup === userAccessGroup) {
+              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.`
+              );
+              for (let portal of ag.pyUserPortals) {
+                if (!arExcludedPortals.includes(portal.pyPortalLayout)) {
+                  availablePortals.push(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.
-      });
+          console.log(`Available portals: ${availablePortals}`);
 
+          resolve(availablePortals);
+        })
+        .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 +215,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 +252,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 = () => {
+  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/{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,7 +1,8 @@
 import { getLocale } from "./common";
 import CurrencyMap from "./CurrencyMap";
 
-function NumberFormatter(value, { locale, decPlaces = 2 } = {}) {
+// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
+function NumberFormatter(value, { locale = "en-US", decPlaces = 2, style="", currency="USD" } = {}) {
   const currentLocale = getLocale(locale);
   if (value !== null && value !== undefined) {
     return Number(value).toLocaleString(currentLocale, {
@@ -14,7 +15,7 @@ function NumberFormatter(value, { locale, decPlaces = 2 } = {}) {
 
 function CurrencyFormatter(
   value,
-  { symbol = true, position, locale, decPlaces = 2, style = "currency", currency = "USD" } = {}
+  { symbol = true, position="before", locale="en-US", decPlaces = 2, style = "currency", currency = "USD" } = {}
 ) {
   const currentLocale = getLocale(locale);
   let formattedValue = value;
@@ -56,7 +57,7 @@ function CurrencyFormatter(
   return formattedValue;
 }
 
-function SymbolFormatter(value, { symbol, suffix = true, locale } = {}) {
+function SymbolFormatter(value, { symbol="$", suffix = true, locale="en-US" } = {}) {
   let formattedValue = value;
   if (value !== null && value !== undefined) {
     formattedValue = NumberFormatter(value, { locale });

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

@@ -14,7 +14,7 @@ const types = ["fromNow", "customFormat"];
 // value should be in ISO 8601 format.
 function DateFormatter(
   value,
-  { type = types[1], format = "DD/MM/YYYY", timezone } = {}
+  { type = types[1], format = "DD/MM/YYYY", timezone = "America/New_York" } = {}
 ) {
   if (!value) return value;
   switch (type) {

package/lib/helpers/formatters/common.ts

@@ -0,0 +1,18 @@
+import PCoreType from '@pega/pcore-pconnect-typedefs/types/pcore';
+
+declare const PCore: typeof PCoreType;
+
+
+export function getLocale(locale='') {
+  // use locale if specified
+  if (locale) return locale;
+  // otherwise, use operator locale if it's defined
+  if (PCore.getEnvironmentInfo().getLocale()) return PCore.getEnvironmentInfo().getLocale();
+  // fallback
+  return Intl.DateTimeFormat().resolvedOptions().locale;
+}
+
+export function getCurrentTimezone(timezone="America/New_York") {
+  if (timezone) return timezone;
+  return PCore?.getLocaleUtils?.().getTimeZoneInUse?.();
+}

package/lib/helpers/simpleTableHelpers.ts

@@ -1,6 +1,8 @@
 import { Utils } from './utils';
+import PCoreType from '@pega/pcore-pconnect-typedefs/types/pcore';
+
+declare const PCore: typeof PCoreType;
 
-declare const PCore;
 
 export const TABLE_CELL = "SdkRenderer";
 export const DELETE_ICON = "DeleteIcon";
@@ -216,7 +218,9 @@ export const getAddRowCallback = (pConnect, index) => {
  * @param {string} referenceList - referenceList
  * @param {string} pageReference - pageReference
  */
-export const createPConnect = (contextName, referenceList, pageReference) => {
+// NOTE: use of type "any" is required since TypeScript doesn't allow private/protected properties
+//  to be exported from a class (TS4094 error)
+export function createPConnect(contextName, referenceList, pageReference): any {
   const options = {
     context: contextName,
     pageReference,

package/lib/helpers/state-utils.tsx

@@ -0,0 +1,50 @@
+import React, { useContext } from 'react';
+import { connect, Provider, shallowEqual } from 'react-redux';
+import ReactReduxContext from '@pega/react-sdk-components/lib/bridge/Context/StoreContext';
+import PCoreType from '@pega/pcore-pconnect-typedefs/types/pcore';
+
+declare const PCore: typeof PCoreType;
+
+
+const connectToState = (mapStateToProps = () => {}) => {
+  return (Component: any) => {
+    const ConnectedComponent = connect(mapStateToProps, null, null, {
+      areStatePropsEqual: (next, prev: any) => {
+        // Compare visibility
+        const prevWasVisible = prev.visibility !== false;
+        if (next.visibility !== undefined && next.visibility !== prevWasVisible) {
+          return false;
+        }
+        // Compare start props
+        const c11nEnv = next.getPConnect();
+        const allStateProps = c11nEnv.getStateProps();
+        for (const key in allStateProps) {
+          if (
+            !shallowEqual(next[key], prev[key]) ||
+            (next.routingInfo && !PCore.isDeepEqual(next.routingInfo, prev.routingInfo))
+          ) {
+            return false;
+          }
+        }
+        /* TODO For some rawConfig we are not getting routingInfo under allStateProps */
+        return !(
+          'routingInfo' in next &&
+          (!shallowEqual(next.routingInfo, prev.routingInfo) ||
+            !PCore.isDeepEqual(next.routingInfo, prev.routingInfo))
+        );
+      }
+    })(Component);
+
+    return (ownProps = {}) => {
+      const { store } = useContext<any>(ReactReduxContext);
+
+      return (
+        <Provider store={store}>
+          <ConnectedComponent {...ownProps} />
+        </Provider>
+      );
+    };
+  };
+};
+
+export default connectToState;

package/lib/helpers/template-utils.ts

@@ -1,6 +1,8 @@
 //  This file is adapted from React DX components/template/utils.js
+import PCoreType from '@pega/pcore-pconnect-typedefs/types/pcore';
+
+declare const PCore: typeof PCoreType;
 
-declare const PCore: any;
 
 export function getAllFields(pConnect: any) {
   const metadata = pConnect.getRawMetadata();