@wavemaker-ai/react-runtime 1.0.0-rc.309

package/higherOrder/BasePage.js

@@ -0,0 +1,909 @@
+"use strict";
+"use client";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof3 = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.withPageContext = exports["default"] = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _navigation = require("next/navigation");
+var _isEqual = _interopRequireDefault(require("lodash-es/isEqual"));
+var _cloneDeep = _interopRequireDefault(require("lodash-es/cloneDeep"));
+var _merge = _interopRequireDefault(require("lodash-es/merge"));
+var _compare = _interopRequireDefault(require("../core/util/compare"));
+var _WidgetProvider = require("@wavemaker-ai/react-runtime/context/WidgetProvider");
+var _spinner = require("@wavemaker-ai/react-runtime/components/basic/spinner");
+var _appVariablesStore = require("@wavemaker-ai/react-runtime/core/appVariablesStore");
+var _store = require("@wavemaker-ai/react-runtime/store");
+var _AppContext = require("@wavemaker-ai/react-runtime/context/AppContext");
+var _useAccess2 = _interopRequireDefault(require("@wavemaker-ai/react-runtime/hooks/useAccess"));
+var _authSlice = require("@wavemaker-ai/react-runtime/store/slices/authSlice");
+var _types = require("@wavemaker-ai/react-runtime/types");
+var _proxyService = require("@wavemaker-ai/react-runtime/core/proxy-service");
+var _helper = require("@wavemaker-ai/react-runtime/higherOrder/helper");
+var _toast = require("@wavemaker-ai/react-runtime/actions/toast.service");
+var _appstore = _interopRequireDefault(require("@wavemaker-ai/react-runtime/core/appstore"));
+var _scriptRegistry = require("@wavemaker-ai/react-runtime/core/script-registry");
+var _formatters = _interopRequireDefault(require("../core/formatters"));
+var _AppContext2 = require("../context/AppContext");
+var _pageParamsUtil = require("../utils/page-params-util");
+var _AppSpinnerProvider = require("../context/AppSpinnerProvider");
+var _get = _interopRequireDefault(require("lodash-es/get"));
+var _events = require("../core/constants/events");
+var _libErrorSkipper = require("../utils/lib-error-skipper");
+var _viewport = require("../store/viewport.service");
+var _util = require("../core/util");
+var _utils = require("../core/util/utils");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
+var __jsx = _react["default"].createElement;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var withPageContext = exports.withPageContext = function withPageContext(WrappedComponent, addPageScript, getVariables, componentInfo, prefabInfo) {
+  var PageContextComponent = function PageContextComponent(props) {
+    var _useAppSpinner, _info$appConfig;
+    var dispatch = (0, _store.useAppDispatch)();
+    var _ref = (_useAppSpinner = (0, _AppSpinnerProvider.useAppSpinner)()) !== null && _useAppSpinner !== void 0 ? _useAppSpinner : {},
+      show = _ref.show,
+      hide = _ref.hide;
+    var i18n = (0, _store.useAppSelector)(function (state) {
+      return state.i18n;
+    });
+    var info = (0, _store.useAppSelector)(function (state) {
+      return state.info;
+    });
+    var pageParams = (0, _navigation.useSearchParams)();
+    // Get app context if available (when used within BaseApp)
+    var appContext = (0, _AppContext.useAppContext)();
+    var appProxy = (0, _AppContext2.useAppProxy)();
+
+    // Use optimized access hook instead of useAccess
+    var _useAccess = (0, _useAccess2["default"])({
+        componentName: (componentInfo === null || componentInfo === void 0 ? void 0 : componentInfo.componentName) || "Main",
+        type: (componentInfo === null || componentInfo === void 0 ? void 0 : componentInfo.componentType) || "PAGE"
+      }),
+      hasAccess = _useAccess.hasAccess,
+      accessLoading = _useAccess.loading,
+      accessError = _useAccess.error;
+
+    // Get security status for debugging
+    var isSecurityEnabled = (0, _store.useAppSelector)(function (state) {
+      var _state$auth$securityC;
+      return (_state$auth$securityC = state.auth.securityConfig) === null || _state$auth$securityC === void 0 ? void 0 : _state$auth$securityC.isSecurityEnabled;
+    });
+    var securityConfig = (0, _store.useAppSelector)(function (state) {
+      return state.auth.securityConfig;
+    });
+    var isAuthenticated = (0, _store.useAppSelector)(function (state) {
+      var _state$auth$loggedInU;
+      return (_state$auth$loggedInU = state.auth.loggedInUser) === null || _state$auth$loggedInU === void 0 ? void 0 : _state$auth$loggedInU.isAuthenticated;
+    });
+    var loggedInUser = (0, _store.useAppSelector)(function (state) {
+      return state.auth.loggedInUser;
+    });
+    var appConfig = (0, _store.useAppSelector)(function (state) {
+      return state.info.appConfig;
+    });
+    var pendingAccordionExpansion = (0, _store.useAppSelector)(function (state) {
+      return state.navigation.pendingAccordionExpansion;
+    });
+    var pendingTabSelection = (0, _store.useAppSelector)(function (state) {
+      return state.navigation.pendingTabSelection;
+    });
+
+    // Initialization state management
+    var _useState = (0, _react.useState)(false),
+      isInitialized = _useState[0],
+      setIsInitialized = _useState[1];
+    var _useState2 = (0, _react.useState)(false),
+      startupComplete = _useState2[0],
+      setStartupComplete = _useState2[1];
+    var _useState3 = (0, _react.useState)(false),
+      isLayoutReady = _useState3[0],
+      setIsLayoutReady = _useState3[1];
+
+    // Refs for managing component lifecycle
+    var redirectHandledRef = (0, _react.useRef)(false);
+    var subscriptionsRef = (0, _react.useRef)([]);
+    var pendingStartupOpsRef = (0, _react.useRef)(new Set());
+    var startUpVariableLoadedRef = (0, _react.useRef)(false);
+    var pageProxyRef = (0, _react.useRef)(null);
+    var urlTabProcessedRef = (0, _react.useRef)(false); // Track if URL tab parameter has been processed
+    var isInitializingRef = (0, _react.useRef)(false);
+    var isMountedRef = (0, _react.useRef)(true);
+    var appVarSubscriptionsDoneRef = (0, _react.useRef)(false);
+    var subscribedVariableNamesRef = (0, _react.useRef)(new Set());
+    var overriddenPropsRegistryRef = (0, _react.useRef)(null);
+    var onStartupCompletedRef = (0, _react.useRef)(false);
+    var _useState4 = (0, _react.useState)(false),
+      isPageReady = _useState4[0],
+      setIsPageReady = _useState4[1];
+    var pageReady = (0, _react.useCallback)(function () {
+      setIsPageReady(true);
+    }, []);
+
+    // Initial page context state
+    var _useState5 = (0, _react.useState)(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
+        Widgets: {},
+        Variables: {},
+        Actions: {},
+        onReady: function onReady() {},
+        serviceDefinitions: (0, _cloneDeep["default"])((prefabInfo === null || prefabInfo === void 0 ? void 0 : prefabInfo.serviceDefs) || (appContext === null || appContext === void 0 ? void 0 : appContext.serviceDefinitions) || {}),
+        pageParams: props.pageParams || {},
+        baseUrl: (prefabInfo === null || prefabInfo === void 0 ? void 0 : prefabInfo.baseUrl) || (info === null || info === void 0 || (_info$appConfig = info.appConfig) === null || _info$appConfig === void 0 ? void 0 : _info$appConfig.url) || "",
+        appConfig: appContext === null || appContext === void 0 ? void 0 : appContext.appConfig,
+        notification: {},
+        toaster: _toast.toastService,
+        onContentReady: onContentReady,
+        onChange: updateWidgetState,
+        pageReady: pageReady,
+        App: {},
+        eval: appContext === null || appContext === void 0 ? void 0 : appContext.eval,
+        appLocale: (componentInfo === null || componentInfo === void 0 ? void 0 : componentInfo.appLocale) || i18n.appLocale || {},
+        localeFormats: {
+          date: i18n.dateFormat,
+          time: i18n.timeFormat,
+          currency: i18n.currencyCode
+        }
+      }, prefabInfo), props), componentInfo), {}, {
+        executeStartup: executeStartup,
+        formatters: _formatters["default"],
+        Viewport: _viewport.viewportService.getViewport(),
+        formatMessage: _util.formatMessage,
+        overriddenPropsRegistryRef: overriddenPropsRegistryRef.current,
+        layoutReady: layoutReady,
+        activePageName: componentInfo === null || componentInfo === void 0 ? void 0 : componentInfo.componentName
+      })),
+      pageContext = _useState5[0],
+      setPageContext = _useState5[1];
+    // Enhanced initial app config that inherits from app context if available
+    var initialAppConfig = (0, _react.useMemo)(function () {
+      return appContext;
+    }, [appContext]);
+
+    // Compute a stable key from partial param values for dependency tracking
+    var partialParamValuesKey = (0, _pageParamsUtil.computePartialParamKey)(componentInfo === null || componentInfo === void 0 ? void 0 : componentInfo.componentType, props.params, props);
+    var authLoggedInUser = (0, _store.useAppSelector)(function (state) {
+      return state.auth.loggedInUser;
+    });
+    (0, _react.useEffect)(function () {
+      if (!pageProxyRef.current) return;
+      pageProxyRef.current.appConfig.loggedInUser = authLoggedInUser;
+      setPageContext(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), {}, {
+          appConfig: _objectSpread(_objectSpread({}, prev.appConfig), {}, {
+            loggedInUser: authLoggedInUser
+          })
+        });
+      });
+    }, [authLoggedInUser]);
+    (0, _react.useEffect)(function () {
+      pageContext.serviceDefinitions = (0, _cloneDeep["default"])((prefabInfo === null || prefabInfo === void 0 ? void 0 : prefabInfo.serviceDefs) || (appContext === null || appContext === void 0 ? void 0 : appContext.serviceDefinitions) || {});
+      setPageContext(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), {}, {
+          serviceDefinitions: (0, _cloneDeep["default"])((prefabInfo === null || prefabInfo === void 0 ? void 0 : prefabInfo.serviceDefs) || (appContext === null || appContext === void 0 ? void 0 : appContext.serviceDefinitions) || {})
+        });
+      });
+    }, [appContext === null || appContext === void 0 ? void 0 : appContext.serviceDefinitions, prefabInfo === null || prefabInfo === void 0 ? void 0 : prefabInfo.serviceDefs]);
+    // Subscribe for partial params changes - sync prop values to pageParams
+    (0, _react.useEffect)(function () {
+      if ((componentInfo === null || componentInfo === void 0 ? void 0 : componentInfo.componentType) !== "PARTIAL" || !pageProxyRef.current) {
+        return;
+      }
+      var paramValues = (0, _pageParamsUtil.extractPartialParamValues)(props.params || [], props);
+
+      // Update pageParams for each param key when prop values change
+      Object.entries(paramValues).forEach(function (_ref2) {
+        var _pageProxyRef$current;
+        var _ref3 = (0, _slicedToArray2["default"])(_ref2, 2),
+          key = _ref3[0],
+          newValue = _ref3[1];
+        if (!(0, _isEqual["default"])((_pageProxyRef$current = pageProxyRef.current.pageParams) === null || _pageProxyRef$current === void 0 ? void 0 : _pageProxyRef$current[key], newValue)) {
+          if (!pageProxyRef.current.pageParams) {
+            pageProxyRef.current.pageParams = {};
+          }
+          pageProxyRef.current.pageParams[key] = newValue;
+        }
+      });
+    }, [partialParamValuesKey]);
+
+    // Handle redirect to login if authentication is required
+    (0, _react.useEffect)(function () {
+      var _appConfig$pages;
+      if ((componentInfo === null || componentInfo === void 0 ? void 0 : componentInfo.componentType) !== "PAGE" || redirectHandledRef.current || accessLoading || !isSecurityEnabled) {
+        return;
+      }
+
+      // Check if page requires authentication
+      var pageConfig = appConfig === null || appConfig === void 0 || (_appConfig$pages = appConfig.pages) === null || _appConfig$pages === void 0 ? void 0 : _appConfig$pages.find(function (p) {
+        var _componentInfo$compon;
+        return p.name.toLowerCase() === (componentInfo === null || componentInfo === void 0 || (_componentInfo$compon = componentInfo.componentName) === null || _componentInfo$compon === void 0 ? void 0 : _componentInfo$compon.toLowerCase());
+      });
+
+      // Redirect to login if page requires authentication and user is not authenticated
+      var requiresAuth = (pageConfig === null || pageConfig === void 0 ? void 0 : pageConfig.permission) === "Authenticated" || (pageConfig === null || pageConfig === void 0 ? void 0 : pageConfig.permission) === "Role";
+      if (requiresAuth && !isAuthenticated) {
+        redirectHandledRef.current = true;
+        dispatch((0, _authSlice.redirectToLogin)({
+          redirectTo: componentInfo === null || componentInfo === void 0 ? void 0 : componentInfo.componentName,
+          securityConfig: securityConfig
+        }));
+      }
+    }, [accessLoading, isSecurityEnabled, isAuthenticated, appConfig, componentInfo === null || componentInfo === void 0 ? void 0 : componentInfo.componentType, componentInfo === null || componentInfo === void 0 ? void 0 : componentInfo.componentName, dispatch, securityConfig]);
+
+    // Check if we should proceed with initialization
+    var shouldInitialize = (0, _react.useMemo)(function () {
+      // Wait for app to be ready (if app context exists)
+      if (appContext && !appContext.isAppReady) {
+        return false;
+      }
+
+      // Wait for access check to complete
+      if (accessLoading) {
+        return false;
+      }
+
+      // Don't initialize if no access
+      if (!hasAccess && isSecurityEnabled) {
+        if (isAuthenticated) {
+          var _pageContext$appLocal;
+          appContext === null || appContext === void 0 || appContext.notifyApp((pageContext === null || pageContext === void 0 || (_pageContext$appLocal = pageContext.appLocale) === null || _pageContext$appLocal === void 0 || (_pageContext$appLocal = _pageContext$appLocal.LABELS) === null || _pageContext$appLocal === void 0 ? void 0 : _pageContext$appLocal.ACCESS_DENIED) || "Access Denied", "Error");
+        }
+        return false;
+      }
+      return true;
+    }, [appContext === null || appContext === void 0 ? void 0 : appContext.isAppReady, accessLoading, hasAccess, isSecurityEnabled, isAuthenticated]);
+
+    // Update page context with app variables when app context changes
+    (0, _react.useEffect)(function () {
+      if (!(appContext !== null && appContext !== void 0 && appContext.isAppReady) || !pageProxyRef.current) {
+        return;
+      }
+
+      // Update page context with app variables without triggering re-initialization
+      setPageContext(function (prev) {
+        var updatedVariables = _objectSpread(_objectSpread({}, prev.Variables), appContext.Variables || {});
+        var updatedActions = _objectSpread(_objectSpread({}, prev.Actions), appContext.Actions || {});
+
+        // Update proxy with the same object references
+        pageProxyRef.current.Variables = updatedVariables;
+        pageProxyRef.current.Actions = updatedActions;
+        return _objectSpread(_objectSpread({}, prev), {}, {
+          App: _objectSpread(_objectSpread({}, prev.App), {}, {
+            Variables: appContext.Variables || {},
+            Actions: appContext.Actions || {}
+          }),
+          Variables: updatedVariables,
+          Actions: updatedActions
+        });
+      });
+    }, [appContext === null || appContext === void 0 ? void 0 : appContext.isAppReady, appContext === null || appContext === void 0 ? void 0 : appContext.Variables, appContext === null || appContext === void 0 ? void 0 : appContext.Actions]);
+
+    // Main initialization effect - runs only when conditions are met
+    (0, _react.useEffect)(function () {
+      // Early returns for non-initialization cases
+      if (!shouldInitialize || isInitialized || isInitializingRef.current || !isMountedRef.current) {
+        return;
+      }
+
+      // Set initialization flag
+      isInitializingRef.current = true;
+      var initializeComponent = /*#__PURE__*/function () {
+        var _ref4 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
+          var pageProxy, pageVariables, appVariables, APP_VARIABLES, _mergeVariablesAndAct, Variables, Actions, urlParams, newParams, localeFormats, _pageName;
+          return _regenerator["default"].wrap(function _callee$(_context) {
+            while (1) switch (_context.prev = _context.next) {
+              case 0:
+                try {
+                  // Create overridden props registry
+                  overriddenPropsRegistryRef.current = (0, _scriptRegistry.createOverriddenPropsRegistry)();
+                  // Create page proxy
+                  pageProxy = (0, _proxyService.createStateProxy)(pageContext, [], setPageContext, overriddenPropsRegistryRef.current);
+                  pageProxyRef.current = pageProxy;
+
+                  // Initialize variables and actions
+                  pageVariables = getVariables(pageProxy); // Handle app variables based on app context availability
+                  appVariables = {
+                    Variables: {},
+                    Actions: {}
+                  };
+                  if (appContext !== null && appContext !== void 0 && appContext.isAppReady) {
+                    // If app context is available and ready, use app variables directly
+                    appVariables = {
+                      Variables: appContext.Variables || {},
+                      Actions: appContext.Actions || {}
+                    };
+                  } else {
+                    // Fallback to traditional app variable initialization
+                    // @ts-ignore
+                    APP_VARIABLES = _appstore["default"].get("AppConfig").appVariables;
+                    appVariables = APP_VARIABLES ? (0, _appVariablesStore.getAppVariablesInstance)(pageProxy, APP_VARIABLES) : {
+                      Variables: {},
+                      Actions: {}
+                    };
+                  }
+                  _mergeVariablesAndAct = (0, _helper.mergeVariablesAndActions)(pageVariables, appVariables), Variables = _mergeVariablesAndAct.Variables, Actions = _mergeVariablesAndAct.Actions; // Compute page params from URL and include partial params when applicable
+                  urlParams = Object.fromEntries(pageParams.entries());
+                  newParams = (0, _pageParamsUtil.computeMergedPageParams)(urlParams, {
+                    componentType: componentInfo === null || componentInfo === void 0 ? void 0 : componentInfo.componentType,
+                    props: props
+                  });
+                  appProxy.appLocale = i18n.appLocale || {};
+                  localeFormats = {
+                    date: i18n.dateFormat,
+                    time: i18n.timeFormat,
+                    currency: i18n.currencyCode
+                  };
+                  appProxy.localeFormats = localeFormats;
+                  pageProxy.localeFormats = localeFormats;
+
+                  // Update proxy with merged variables and actions
+                  pageProxy.Variables = Variables;
+                  pageProxy.Actions = Actions;
+                  pageProxy.pageParams = _objectSpread({}, newParams);
+                  pageProxy.pageReady = pageReady;
+                  pageProxy.App = _objectSpread(_objectSpread({}, appProxy), initialAppConfig);
+                  pageProxy.selectedLocale = i18n.selectedLocale || "en";
+                  pageProxy.overriddenPropsRegistry = overriddenPropsRegistryRef.current;
+
+                  // Setup variable event handlers
+                  setupVariableSubscriptions(pageVariables.Variables);
+                  if ((componentInfo === null || componentInfo === void 0 ? void 0 : componentInfo.componentType) === "PAGE" && appProxy) {
+                    _pageName = componentInfo === null || componentInfo === void 0 ? void 0 : componentInfo.componentName;
+                    appProxy.updateActivePage(_pageName);
+                    appProxy.activePage = pageProxy;
+                    appProxy.activePageName = _pageName;
+                    appProxy.Widgets = (0, _utils.mergeProxies)(appProxy.Widgets, pageProxy.Widgets);
+                  } else if ((componentInfo === null || componentInfo === void 0 ? void 0 : componentInfo.componentName) === "Common" && (componentInfo === null || componentInfo === void 0 ? void 0 : componentInfo.componentType) === "PARTIAL" && appProxy) {
+                    appProxy.Widgets = (0, _utils.mergeProxies)(appProxy.Widgets, pageProxy.Widgets);
+                  }
+
+                  // Initialize page script
+                  addPageScript(appProxy, pageProxy);
+
+                  // Gaurd for unsupported third party functionality
+                  (0, _libErrorSkipper.wrapWithThirdPartyErrorGuard)(pageProxy, appContext, (componentInfo === null || componentInfo === void 0 ? void 0 : componentInfo.componentName) || "Prefab");
+
+                  // Setup global wm object for pages
+                  if ((componentInfo === null || componentInfo === void 0 ? void 0 : componentInfo.componentType) === "PAGE") {
+                    global.wm = appProxy ? _objectSpread(_objectSpread({}, pageProxy), {}, {
+                      App: appProxy
+                    }) : pageProxy;
+                  }
+
+                  // Mark as initialized
+                  setIsInitialized(true);
+                } catch (error) {
+                  console.error("Error during component initialization:", error);
+                  // Still mark as initialized to prevent hanging
+                  setIsInitialized(true);
+                } finally {
+                  isInitializingRef.current = false;
+                }
+              case 1:
+              case "end":
+                return _context.stop();
+            }
+          }, _callee);
+        }));
+        return function initializeComponent() {
+          return _ref4.apply(this, arguments);
+        };
+      }();
+      initializeComponent();
+
+      // Cleanup function
+      return function () {
+        var _overriddenPropsRegis;
+        // Cancel all pending page operations
+        if (pageProxyRef.current) {
+          var _ref5 = getVariables(pageProxyRef.current) || {},
+            _ref5$Variables = _ref5.Variables,
+            Variables = _ref5$Variables === void 0 ? {} : _ref5$Variables,
+            _ref5$Actions = _ref5.Actions,
+            Actions = _ref5$Actions === void 0 ? {} : _ref5$Actions;
+
+          // Cancel page variables
+          Object.values(Variables).forEach(function (variable) {
+            if (variable !== null && variable !== void 0 && variable.cancel && typeof variable.cancel === "function") {
+              try {
+                variable.cancel();
+              } catch (error) {
+                console.warn("Failed to cancel page variable:", error);
+              }
+            }
+          });
+
+          // Cancel page actions
+          Object.values(Actions).forEach(function (action) {
+            if (action !== null && action !== void 0 && action.cancel && typeof action.cancel === "function") {
+              try {
+                action.cancel();
+              } catch (error) {
+                console.warn("Failed to cancel page timer action:", error);
+              }
+            }
+          });
+        }
+
+        // Clear pending startup operations
+        pendingStartupOpsRef.current.clear();
+        (_overriddenPropsRegis = overriddenPropsRegistryRef.current) === null || _overriddenPropsRegis === void 0 || _overriddenPropsRegis.clear();
+        // clearOverriddenProps();
+
+        // Unsubscribe from events
+        subscriptionsRef.current.forEach(function (_ref6) {
+          var variable = _ref6.variable,
+            event = _ref6.event,
+            handler = _ref6.handler;
+          if (variable !== null && variable !== void 0 && variable.unsubscribe) {
+            try {
+              variable.unsubscribe(event, handler);
+            } catch (error) {
+              console.warn("Failed to unsubscribe from ".concat(event, ":"), error);
+            }
+          }
+        });
+        subscriptionsRef.current = [];
+      };
+    }, [shouldInitialize]); // Only depend on shouldInitialize
+
+    // Subscribe to app-level variables when app becomes ready
+    // This MUST happen before executeStartAppOperations() is called (via executeStartup)
+    // so that widgets can receive loading state updates when app variables are invoked
+    (0, _react.useEffect)(function () {
+      if (!(appContext !== null && appContext !== void 0 && appContext.isAppReady) || !pageProxyRef.current || appVarSubscriptionsDoneRef.current) {
+        return;
+      }
+      try {
+        var _ref7 = getVariables(pageProxyRef.current) || {
+            Variables: {}
+          },
+          _ref7$Variables = _ref7.Variables,
+          pageVars = _ref7$Variables === void 0 ? {} : _ref7$Variables;
+        var pageVarNames = new Set(Object.keys(pageVars || {}));
+        subscribeAppVariablesIfNeeded(appContext.Variables || {}, pageVarNames);
+        appVarSubscriptionsDoneRef.current = true;
+      } catch (e) {
+        // no-op
+      }
+    }, [appContext === null || appContext === void 0 ? void 0 : appContext.isAppReady]);
+
+    // Prefab state sync
+    (0, _react.useEffect)(function () {
+      if (prefabInfo && (componentInfo === null || componentInfo === void 0 ? void 0 : componentInfo.componentType) === "PREFAB") {
+        var handlePrefabStateRefresh = function handlePrefabStateRefresh(data) {
+          var proxy = pageProxyRef.current;
+          Object.keys(data).forEach(function (key) {
+            var _data$key$newValue;
+            var propKey = data[key].key;
+            var newValue = (_data$key$newValue = data[key].newValue) !== null && _data$key$newValue !== void 0 ? _data$key$newValue : data[key].oldValue;
+            if (newValue && (0, _typeof2["default"])(newValue) === "object") {
+              newValue = (0, _cloneDeep["default"])(newValue);
+            }
+
+            // Call onPropertyChange if available
+            if (proxy && proxy.onPropertyChange) {
+              proxy[propKey] = newValue;
+              proxy.onPropertyChange(propKey, newValue, data[key].oldValue);
+            }
+          });
+        };
+        _events.EVENTEMITTER_METHODS.PREFAB_STATE_SYNC_ON(prefabInfo === null || prefabInfo === void 0 ? void 0 : prefabInfo.name, handlePrefabStateRefresh);
+        return function () {
+          _events.EVENTEMITTER_METHODS.PREFAB_STATE_SYNC_OFF(prefabInfo === null || prefabInfo === void 0 ? void 0 : prefabInfo.name, handlePrefabStateRefresh);
+        };
+      }
+    }, [prefabInfo, componentInfo === null || componentInfo === void 0 ? void 0 : componentInfo.componentType]);
+
+    // Setup variable subscriptions
+    var setupVariableSubscriptions = function setupVariableSubscriptions(variables) {
+      var handleVariableEvent = function handleVariableEvent(variableName, event, variable) {
+        // not required because while unmounting page,variables invocation get cancelled and state update will not happen
+
+        var updateState = variable;
+        updateState.loading = event === _types.VariableEvents.BEFORE_INVOKE;
+        updateState.error = event === _types.VariableEvents.ERROR ? variable : null;
+        if ((0, _get["default"])(variable, "spinnerContext") === "page") {
+          if (updateState.loading) {
+            var message = (0, _get["default"])(variable, "spinnerMessage");
+            show(message);
+          } else {
+            hide();
+          }
+        }
+        setPageContext(function (prev) {
+          return _objectSpread(_objectSpread({}, prev), {}, {
+            Variables: _objectSpread(_objectSpread({}, prev.Variables), {}, (0, _defineProperty2["default"])({}, variableName, updateState))
+          });
+        });
+        if (event === _types.VariableEvents.AFTER_INVOKE) {
+          pendingStartupOpsRef.current["delete"](variableName);
+        }
+      };
+
+      // Set up subscriptions (avoid duplicates by name)
+      Object.entries(variables).forEach(function (_ref8) {
+        var _ref9 = (0, _slicedToArray2["default"])(_ref8, 2),
+          name = _ref9[0],
+          variable = _ref9[1];
+        if (subscribedVariableNamesRef.current.has(name)) {
+          return;
+        }
+        Object.values(_types.VariableEvents).forEach(function (event) {
+          var handler = function handler() {
+            return handleVariableEvent(name, event, variable);
+          };
+          if (variable && typeof variable.subscribe === "function") {
+            variable.subscribe(event, handler);
+            subscriptionsRef.current.push({
+              variable: variable,
+              event: event,
+              handler: handler
+            });
+          }
+        });
+        subscribedVariableNamesRef.current.add(name);
+      });
+    };
+
+    // Subscribe to app-level variables that are not shadowed by page variables
+    var subscribeAppVariablesIfNeeded = function subscribeAppVariablesIfNeeded(appVars, pageVarNames) {
+      var appVarsOnly = {};
+      Object.entries(appVars || {}).forEach(function (_ref0) {
+        var _ref1 = (0, _slicedToArray2["default"])(_ref0, 2),
+          name = _ref1[0],
+          variable = _ref1[1];
+        if (!pageVarNames.has(name) && !subscribedVariableNamesRef.current.has(name)) {
+          appVarsOnly[name] = variable;
+        }
+      });
+      if (Object.keys(appVarsOnly).length) {
+        setupVariableSubscriptions(appVarsOnly);
+      }
+    };
+
+    // Execute startup operations
+    var executeStartupOperations = /*#__PURE__*/function () {
+      var _ref10 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2(Variables, Actions) {
+        var _ref11, _ref11$startUpActions, startUpActions, _ref11$startUpVariabl, startUpVariables, variablePromises;
+        return _regenerator["default"].wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              _ref11 = componentInfo || {}, _ref11$startUpActions = _ref11.startUpActions, startUpActions = _ref11$startUpActions === void 0 ? [] : _ref11$startUpActions, _ref11$startUpVariabl = _ref11.startUpVariables, startUpVariables = _ref11$startUpVariabl === void 0 ? [] : _ref11$startUpVariabl; // Track startup operations
+              startUpVariables.forEach(function (name) {
+                return pendingStartupOpsRef.current.add(name);
+              });
+              startUpActions.forEach(function (name) {
+                return pendingStartupOpsRef.current.add(name);
+              });
+
+              // If no startup operations, mark as complete immediately
+              if (!(startUpActions.length === 0 && startUpVariables.length === 0)) {
+                _context2.next = 5;
+                break;
+              }
+              return _context2.abrupt("return");
+            case 5:
+              _context2.prev = 5;
+              // Execute startup actions
+              startUpActions.forEach(function (actionName) {
+                var _Actions$actionName;
+                if ((_Actions$actionName = Actions[actionName]) !== null && _Actions$actionName !== void 0 && _Actions$actionName.invoke) {
+                  Actions[actionName].invoke();
+                }
+                pendingStartupOpsRef.current["delete"](String(actionName));
+              });
+
+              // Execute startup variables
+              variablePromises = startUpVariables.map(function (varName) {
+                var _Variables$varName;
+                if ((_Variables$varName = Variables[varName]) !== null && _Variables$varName !== void 0 && _Variables$varName.invoke) {
+                  return Variables[varName].invoke()["catch"](function (error) {
+                    console.log("Error invoking ".concat(varName, ":"), error);
+                    return null;
+                  });
+                }
+                return Promise.resolve();
+              });
+              _context2.next = 10;
+              return Promise.allSettled(variablePromises);
+            case 10:
+              startUpVariableLoadedRef.current = true;
+              pendingStartupOpsRef.current.clear();
+              setTimeout(function () {
+                if ((componentInfo === null || componentInfo === void 0 ? void 0 : componentInfo.componentType) === "PAGE") {
+                  appContext === null || appContext === void 0 || appContext.notify("page-variables-data-loaded", {
+                    pageName: componentInfo === null || componentInfo === void 0 ? void 0 : componentInfo.componentName
+                  });
+                }
+              }, 0);
+              _context2.next = 18;
+              break;
+            case 15:
+              _context2.prev = 15;
+              _context2.t0 = _context2["catch"](5);
+              console.error("Error during startup operations:", _context2.t0);
+            case 18:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2, null, [[5, 15]]);
+      }));
+      return function executeStartupOperations(_x, _x2) {
+        return _ref10.apply(this, arguments);
+      };
+    }();
+    function layoutReady() {
+      setIsLayoutReady(true);
+    }
+
+    // Widget state update function
+    function updateWidgetState(widgetName, newProps) {
+      if (!widgetName || !newProps || Object.keys(newProps).length === 0) return;
+      if ((0, _compare["default"])(pageContext.Widgets[widgetName], newProps)) return;
+      var registry = overriddenPropsRegistryRef.current;
+      if (registry) {
+        Object.keys(newProps).forEach(function (key) {
+          if (newProps[key] !== undefined) {
+            registry.trackInternalUpdate(widgetName, key, newProps[key]);
+          }
+        });
+      }
+      setPageContext(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), {}, {
+          Widgets: _objectSpread(_objectSpread({}, prev.Widgets), {}, (0, _defineProperty2["default"])({}, widgetName, _objectSpread(_objectSpread({}, prev.Widgets[widgetName]), newProps)))
+        });
+      });
+
+      // Suspend tracking to prevent internal state updates from being tracked as script overrides
+      (0, _scriptRegistry.withSuspendedTracking)(overriddenPropsRegistryRef.current, function () {
+        Object.keys(newProps).forEach(function (key) {
+          var _pageContext$Widgets$;
+          if (!(0, _isEqual["default"])((_pageContext$Widgets$ = pageContext.Widgets[widgetName]) === null || _pageContext$Widgets$ === void 0 ? void 0 : _pageContext$Widgets$[key], newProps === null || newProps === void 0 ? void 0 : newProps[key]) && (newProps === null || newProps === void 0 ? void 0 : newProps[key]) !== undefined) {
+            var _pageProxyRef$current2;
+            if ((_pageProxyRef$current2 = pageProxyRef.current) !== null && _pageProxyRef$current2 !== void 0 && (_pageProxyRef$current2 = _pageProxyRef$current2.Widgets) !== null && _pageProxyRef$current2 !== void 0 && _pageProxyRef$current2[widgetName]) {
+              pageProxyRef.current.Widgets[widgetName][key] = newProps[key];
+            }
+          }
+        });
+      });
+    }
+
+    // Content ready callback
+    function onContentReady() {
+      return _onContentReady.apply(this, arguments);
+    }
+    function _onContentReady() {
+      _onContentReady = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee4() {
+        return _regenerator["default"].wrap(function _callee4$(_context4) {
+          while (1) switch (_context4.prev = _context4.next) {
+            case 0:
+              if (!pageContext.onReady) {
+                _context4.next = 3;
+                break;
+              }
+              _context4.next = 3;
+              return pageContext.onReady();
+            case 3:
+              if (appContext !== null && appContext !== void 0 && appContext.onPageReady && pageContext.componentType === "PAGE") {
+                appContext.onPageReady(pageContext.componentName, pageProxyRef.current, undefined);
+              }
+              return _context4.abrupt("return", Promise.resolve());
+            case 5:
+            case "end":
+              return _context4.stop();
+          }
+        }, _callee4);
+      }));
+      return _onContentReady.apply(this, arguments);
+    }
+    function executeStartup() {
+      return _executeStartup.apply(this, arguments);
+    }
+    function _executeStartup() {
+      _executeStartup = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee5() {
+        return _regenerator["default"].wrap(function _callee5$(_context5) {
+          while (1) switch (_context5.prev = _context5.next) {
+            case 0:
+              _context5.next = 2;
+              return appContext === null || appContext === void 0 ? void 0 : appContext.executeStartAppOperations();
+            case 2:
+            case "end":
+              return _context5.stop();
+          }
+        }, _callee5);
+      }));
+      return _executeStartup.apply(this, arguments);
+    }
+    function executePageStartup() {
+      return _executePageStartup.apply(this, arguments);
+    } // Update pageContext.appLocale when i18n.appLocale changes
+    function _executePageStartup() {
+      _executePageStartup = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee6() {
+        return _regenerator["default"].wrap(function _callee6$(_context6) {
+          while (1) switch (_context6.prev = _context6.next) {
+            case 0:
+              _context6.next = 2;
+              return executeStartupOperations(pageContext.Variables, pageContext.Actions);
+            case 2:
+            case "end":
+              return _context6.stop();
+          }
+        }, _callee6);
+      }));
+      return _executePageStartup.apply(this, arguments);
+    }
+    (0, _react.useEffect)(function () {
+      var newAppLocale = (0, _merge["default"])({}, i18n.appLocale || {}, (prefabInfo === null || prefabInfo === void 0 ? void 0 : prefabInfo.appLocale) || {});
+      if (!(0, _isEqual["default"])(pageContext.appLocale, newAppLocale)) {
+        var _pageProxyRef$current3;
+        setPageContext(function (prev) {
+          return _objectSpread(_objectSpread({}, prev), {}, {
+            appLocale: newAppLocale
+          });
+        });
+        if ((_pageProxyRef$current3 = pageProxyRef.current) !== null && _pageProxyRef$current3 !== void 0 && _pageProxyRef$current3.App) {
+          pageProxyRef.current.App.appLocale = newAppLocale;
+        }
+      }
+    }, [i18n.appLocale]);
+    (0, _react.useEffect)(function () {
+      var localeFormats = {
+        date: i18n.dateFormat,
+        time: i18n.timeFormat,
+        currency: i18n.currencyCode
+      };
+      setPageContext(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), {}, {
+          localeFormats: localeFormats
+        });
+      });
+      if (pageProxyRef.current) {
+        pageProxyRef.current.localeFormats = localeFormats;
+        if (pageProxyRef.current.App) {
+          pageProxyRef.current.App.localeFormats = localeFormats;
+        }
+      }
+    }, [i18n.dateFormat, i18n.timeFormat, i18n.currencyCode]);
+    var pageName = (appProxy === null || appProxy === void 0 ? void 0 : appProxy.activePageName) || "";
+    (0, _react.useEffect)(function () {
+      if ((componentInfo === null || componentInfo === void 0 ? void 0 : componentInfo.componentType) === "PARTIAL" && pageName) {
+        // update the app active page name
+        setPageContext(function (prev) {
+          return _objectSpread(_objectSpread({}, prev), {}, {
+            App: _objectSpread(_objectSpread({}, prev.App), {}, {
+              activePageName: pageName
+            })
+          });
+        });
+      }
+    }, [pageName]);
+
+    // Execute startup when both conditions are met:
+    // 1. Page is initialized (context ready)
+    // 2. Page component has called pageReady() after widgets have rendered and subscribed
+    (0, _react.useEffect)(function () {
+      if (isInitialized && isPageReady && isMountedRef.current && !onStartupCompletedRef.current && pageProxyRef.current) {
+        var runStartup = /*#__PURE__*/function () {
+          var _ref12 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee3() {
+            var tabNameFromUrl, tabNameToSelect;
+            return _regenerator["default"].wrap(function _callee3$(_context3) {
+              while (1) switch (_context3.prev = _context3.next) {
+                case 0:
+                  if (isMountedRef.current) {
+                    _context3.next = 2;
+                    break;
+                  }
+                  return _context3.abrupt("return");
+                case 2:
+                  if (!(securityConfig !== null && securityConfig !== void 0 && securityConfig.authenticated && appProxy !== null && appProxy !== void 0 && appProxy.executeSessionFailureRequests)) {
+                    _context3.next = 5;
+                    break;
+                  }
+                  _context3.next = 5;
+                  return appProxy.executeSessionFailureRequests();
+                case 5:
+                  _context3.next = 7;
+                  return executeStartup();
+                case 7:
+                  _context3.next = 9;
+                  return onContentReady();
+                case 9:
+                  _context3.next = 11;
+                  return executePageStartup();
+                case 11:
+                  onStartupCompletedRef.current = true;
+                  // Handle pending accordion expansion from navigation using Redux
+                  if (pendingAccordionExpansion) {
+                    (0, _helper.accordionExpansionHandler)(pageProxyRef, pendingAccordionExpansion, dispatch);
+                  }
+
+                  // Handle tab selection from URL query parameter or Redux
+                  // URL parameter is only processed once on initial page load
+                  // Redux state is used for programmatic navigation
+                  tabNameFromUrl = !urlTabProcessedRef.current ? pageParams === null || pageParams === void 0 ? void 0 : pageParams.get("tabName") : null;
+                  tabNameToSelect = tabNameFromUrl || pendingTabSelection;
+                  if (tabNameToSelect) {
+                    (0, _helper.tabSelectionHandler)(pageProxyRef, tabNameToSelect, dispatch);
+                  }
+                case 16:
+                case "end":
+                  return _context3.stop();
+              }
+            }, _callee3);
+          }));
+          return function runStartup() {
+            return _ref12.apply(this, arguments);
+          };
+        }();
+        runStartup();
+      }
+    }, [isInitialized, isPageReady]);
+    // Call onContentReady when startup operations are complete
+    (0, _react.useEffect)(function () {
+      if (startupComplete && (pageContext.type === "PAGE" ? isLayoutReady : true)) {
+        onContentReady();
+      }
+    }, [startupComplete, isLayoutReady]);
+    (0, _react.useEffect)(function () {
+      isMountedRef.current = true;
+      return function () {
+        isMountedRef.current = false;
+        // Cleanup viewport service when component unmounts
+        _viewport.viewportService.destroy();
+      };
+    }, []);
+
+    // Handle access denied case
+    if (!accessLoading && !hasAccess && !(componentInfo !== null && componentInfo !== void 0 && componentInfo.isPartOfPrefab)) {
+      return null;
+    }
+
+    // Handle access error case
+    if (accessError && !accessLoading) {
+      console.error("Access check failed for ".concat(componentInfo === null || componentInfo === void 0 ? void 0 : componentInfo.componentName, ":"), accessError);
+      return null;
+    }
+
+    // Show loading spinner while checking access or app is not ready
+    if (accessLoading || appContext && !appContext.isAppReady || !isInitialized) {
+      return __jsx(_spinner.WmSpinner, {
+        name: "page",
+        caption: "",
+        listener: {}
+      });
+    }
+    if (appContext !== null && appContext !== void 0 && appContext.autoUpdateVariables && onStartupCompletedRef.current) {
+      var appVariables = appContext.Variables;
+      appContext.autoUpdateVariables.forEach(function (value) {
+        var _appVariables$value, _appVariables$value2;
+        ((_appVariables$value = appVariables[value]) === null || _appVariables$value === void 0 ? void 0 : _appVariables$value.invokeOnParamChange) && ((_appVariables$value2 = appVariables[value]) === null || _appVariables$value2 === void 0 ? void 0 : _appVariables$value2.invokeOnParamChange());
+      });
+    }
+    if (pageContext.autoUpdateVariables && onStartupCompletedRef.current) {
+      var pageVariables = pageContext.Variables;
+      componentInfo === null || componentInfo === void 0 || componentInfo.autoUpdateVariables.forEach(function (value) {
+        var _pageVariables$value, _pageVariables$value$;
+        (_pageVariables$value = pageVariables[value]) === null || _pageVariables$value === void 0 || (_pageVariables$value$ = _pageVariables$value.invokeOnParamChange) === null || _pageVariables$value$ === void 0 || _pageVariables$value$.call(_pageVariables$value);
+      });
+    }
+
+    // Render the component
+    return __jsx(_WidgetProvider.WidgetProvider, {
+      value: {
+        value: pageContext,
+        proxy: pageProxyRef.current
+      }
+    }, __jsx(WrappedComponent, props));
+  };
+  PageContextComponent.displayName = "WithPageContext(".concat(WrappedComponent.displayName || WrappedComponent.name || "Component", ")");
+  return PageContextComponent;
+};
+var _default = exports["default"] = withPageContext;