@commercetools-frontend/application-shell 21.2.0 → 21.3.2

package/dist/declarations/src/utils/index.d.ts

@@ -6,4 +6,3 @@ export { default as getCorrelationId } from './get-correlation-id';
 export { default as getPreviousProjectKey } from './get-previous-project-key';
 export { default as getMcApiUrl } from './get-mc-api-url';
 export { createApolloContextForProxyForwardTo } from './apollo-context';
-export * from './formatters';

package/dist/{index-a137d138.cjs.prod.js → index-655dc306.cjs.prod.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var applicationEntryPoint = require('./application-entry-point-7f30d2ba.cjs.prod.js');
+var applicationEntryPoint = require('./application-entry-point-f21c8316.cjs.prod.js');
 var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
 var _styled = require('@emotion/styled/base');
 var _pt = require('prop-types');
@@ -18,18 +18,16 @@ var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/obje
 var react = require('react');
 var reactRouterDom = require('react-router-dom');
 var react$2 = require('@emotion/react');
-var constants = require('@commercetools-frontend/constants');
+var constants$1 = require('@commercetools-frontend/constants');
 var sentry = require('@commercetools-frontend/sentry');
 var applicationShellConnectors = require('@commercetools-frontend/application-shell-connectors');
 var applicationComponents = require('@commercetools-frontend/application-components');
 var reactNotifications = require('@commercetools-frontend/react-notifications');
 var i18n = require('@commercetools-frontend/i18n');
 var uuid = require('uuid');
-var formatters = require('./formatters-a5bb12eb.cjs.prod.js');
+var constants = require('./constants-745aeeca.cjs.prod.js');
 var _URL = require('@babel/runtime-corejs3/core-js-stable/url');
 var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
-var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
-require('lodash/upperFirst');
 var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
 var Perfume = require('perfume.js');
@@ -40,7 +38,7 @@ var reactRedux = require('react-redux');
 var history = require('@commercetools-frontend/browser-history');
 var reactIntl = require('react-intl');
 var _startsWithInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/starts-with');
-var oidc = require('./oidc-d5829556.cjs.prod.js');
+var oidc = require('./oidc-69515812.cjs.prod.js');
 var qss = require('qss');
 var jwtDecode = require('jwt-decode');
 var FailedAuthenticationSVG = require('@commercetools-frontend/assets/images/locked-diamond.svg');
@@ -66,6 +64,7 @@ var sdk = require('@commercetools-frontend/sdk');
 var _JSON$stringify = require('@babel/runtime-corejs3/core-js-stable/json/stringify');
 var LogoSVG = require('@commercetools-frontend/assets/images/logo.svg');
 var _trimInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/trim');
+var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
 var Downshift = require('downshift');
 var reactBroadcast = require('@flopflip/react-broadcast');
 var Avatar = require('@commercetools-uikit/avatar');
@@ -96,6 +95,7 @@ var throttle = require('lodash/throttle');
 var urlUtils = require('@commercetools-frontend/url-utils');
 var _someInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/some');
 var actionsGlobal = require('@commercetools-frontend/actions-global');
+require('@commercetools-frontend/application-config/ssr');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -114,7 +114,6 @@ var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$def
 var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
 var _URL__default = /*#__PURE__*/_interopDefault(_URL);
 var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
-var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
 var Perfume__default = /*#__PURE__*/_interopDefault(Perfume);
 var _reverseInstanceProperty__default = /*#__PURE__*/_interopDefault(_reverseInstanceProperty);
 var camelcase__default = /*#__PURE__*/_interopDefault(camelcase);
@@ -134,6 +133,7 @@ var _reduceInstanceProperty__default = /*#__PURE__*/_interopDefault(_reduceInsta
 var _JSON$stringify__default = /*#__PURE__*/_interopDefault(_JSON$stringify);
 var LogoSVG__default = /*#__PURE__*/_interopDefault(LogoSVG);
 var _trimInstanceProperty__default = /*#__PURE__*/_interopDefault(_trimInstanceProperty);
+var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
 var Downshift__default = /*#__PURE__*/_interopDefault(Downshift);
 var Avatar__default = /*#__PURE__*/_interopDefault(Avatar);
 var memoize__default = /*#__PURE__*/_interopDefault(memoize);
@@ -155,7 +155,7 @@ var throttle__default = /*#__PURE__*/_interopDefault(throttle);
 var _someInstanceProperty__default = /*#__PURE__*/_interopDefault(_someInstanceProperty);
 
 function selectProjectKeyFromLocalStorage() {
-  return window.localStorage.getItem(formatters.STORAGE_KEYS.ACTIVE_PROJECT_KEY);
+  return window.localStorage.getItem(constants.STORAGE_KEYS.ACTIVE_PROJECT_KEY);
 }
 
 var getPreviousProjectKey = function getPreviousProjectKey(defaultProjectKeyOfUser) {
@@ -180,7 +180,7 @@ var createApolloContextForProxyForwardTo = function createApolloContextForProxyF
 };
 
 var getSelectedDataLocaleForProject = function getSelectedDataLocaleForProject(projectLocales) {
-  var cachedDataLocale = window.localStorage.getItem(formatters.STORAGE_KEYS.SELECTED_DATA_LOCALE); // Make sure the cached locale is listed in the selected project
+  var cachedDataLocale = window.localStorage.getItem(constants.STORAGE_KEYS.SELECTED_DATA_LOCALE); // Make sure the cached locale is listed in the selected project
 
   var isCachedDataLocaleIncludedInProjectLanguages = _includesInstanceProperty__default["default"](projectLocales).call(projectLocales, cachedDataLocale || '');
 
@@ -188,7 +188,7 @@ var getSelectedDataLocaleForProject = function getSelectedDataLocaleForProject(p
 
   var defaultDataLocaleForProject = projectLocales[0]; // Cache it
 
-  window.localStorage.setItem(formatters.STORAGE_KEYS.SELECTED_DATA_LOCALE, defaultDataLocaleForProject);
+  window.localStorage.setItem(constants.STORAGE_KEYS.SELECTED_DATA_LOCALE, defaultDataLocaleForProject);
   return defaultDataLocaleForProject;
 };
 
@@ -201,7 +201,7 @@ var ProjectDataLocale = function ProjectDataLocale(props) {
   var handleSetProjectDataLocale = react.useCallback(function (locale) {
     setLocale(locale); // Cache it
 
-    window.localStorage.setItem(formatters.STORAGE_KEYS.SELECTED_DATA_LOCALE, locale);
+    window.localStorage.setItem(constants.STORAGE_KEYS.SELECTED_DATA_LOCALE, locale);
   }, []);
   return jsxRuntime.jsx(jsxRuntime.Fragment, {
     children: props.children({
@@ -623,7 +623,7 @@ var withoutProjectKeyClaim = function withoutProjectKeyClaim(scope) {
   var _context;
 
   return _filterInstanceProperty__default["default"](_context = scope.split(' ')).call(_context, function (claim) {
-    return !_startsWithInstanceProperty__default["default"](claim).call(claim, formatters.OIDC_CLAIMS.PROJECT_KEY);
+    return !_startsWithInstanceProperty__default["default"](claim).call(claim, constants.OIDC_CLAIMS.PROJECT_KEY);
   }).join(' ');
 };
 
@@ -690,7 +690,7 @@ var hasCachedAuthenticationState = function hasCachedAuthenticationState() {
     }
   }
 
-  return window.localStorage.getItem(formatters.STORAGE_KEYS.IS_AUTHENTICATED) === 'true';
+  return window.localStorage.getItem(constants.STORAGE_KEYS.IS_AUTHENTICATED) === 'true';
 };
 
 function useMcQuery(query, options) {
@@ -714,7 +714,7 @@ var AmILoggedIn = function AmILoggedIn(props) {
   // is valid. We return null while the query is loading.
   var _useMcQuery = useMcQuery(AmILoggedInQuery, {
     context: {
-      target: constants.GRAPHQL_TARGETS.MERCHANT_CENTER_BACKEND,
+      target: constants$1.GRAPHQL_TARGETS.MERCHANT_CENTER_BACKEND,
       skipTokenRetry: true
     },
     // NOTE: With `no-cache` the `useQuery` will not trigger a
@@ -733,20 +733,20 @@ var AmILoggedIn = function AmILoggedIn(props) {
       if (!data) {
         // In case the request is 200 but there is no data, we assume
         // there are some errors.
-        window.localStorage.removeItem(formatters.STORAGE_KEYS.IS_AUTHENTICATED);
+        window.localStorage.removeItem(constants.STORAGE_KEYS.IS_AUTHENTICATED);
       } else {
         // Even though the login page might set this flag, we just make sure that
         // we do it here as well. This will help in the future when we eventually
         // move the auth service to itw own domain, in which case the local storage
         // is not shared anymore.
-        window.localStorage.setItem(formatters.STORAGE_KEYS.IS_AUTHENTICATED, String(true));
+        window.localStorage.setItem(constants.STORAGE_KEYS.IS_AUTHENTICATED, String(true));
       }
     },
     onError: function onError() {
       // The query fails without the `mcAccessToken`. In this case the caching
       // needs to be unset as otherwise the application will end up in a infinte
       // redirect loop.
-      window.localStorage.removeItem(formatters.STORAGE_KEYS.IS_AUTHENTICATED);
+      window.localStorage.removeItem(constants.STORAGE_KEYS.IS_AUTHENTICATED);
     }
   }),
       data = _useMcQuery.data,
@@ -1303,7 +1303,7 @@ var FetchUser = function FetchUser(props) {
   var _useMcQuery = useMcQuery(LoggedInUserQuery, {
     onError: sentry.reportErrorToSentry,
     context: {
-      target: constants.GRAPHQL_TARGETS.MERCHANT_CENTER_BACKEND
+      target: constants$1.GRAPHQL_TARGETS.MERCHANT_CENTER_BACKEND
     }
   }),
       loading = _useMcQuery.loading,
@@ -1328,7 +1328,7 @@ var pushDependencyVersionCounter = function pushDependencyVersionCounter(_ref) {
   var payload = _ref.payload;
   return sdk.actions.post({
     uri: '/metrics/counters',
-    mcApiProxyTarget: constants.MC_API_PROXY_TARGETS.MC_METRICS,
+    mcApiProxyTarget: constants$1.MC_API_PROXY_TARGETS.MC_METRICS,
     payload: _JSON$stringify__default["default"](payload)
   });
 };
@@ -1380,7 +1380,7 @@ var FetchProject = function FetchProject(props) {
       projectKey: props.projectKey
     },
     context: {
-      target: constants.GRAPHQL_TARGETS.MERCHANT_CENTER_BACKEND
+      target: constants$1.GRAPHQL_TARGETS.MERCHANT_CENTER_BACKEND
     },
     skip: props.skip === true
   }),
@@ -1520,16 +1520,25 @@ function useApplicationsMenu(menuKey, config) {
   var apolloClient = client.useApolloClient();
   var mcProxyApiUrl = applicationShellConnectors.useApplicationContext(function (context) {
     return context.environment.mcProxyApiUrl;
-  }); // Fetch all menu links from the GraphQL API in the Merchant Center Proxy.
+  });
+
+  var _useState = react.useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      hasWrittenToCache = _useState2[0],
+      setHasWrittenToCache = _useState2[1]; // Fetch all menu links from the GraphQL API in the Merchant Center Proxy.
   // For local development, we don't fetch data from the remote server but use
   // only the configuration for the menu links defined for the application.
   // To do so, we manually write the data in the Apollo cache and use the
   // `fetchPolicy: cache-only` to instruct Apollo to read the data from the cache.
-  // NOTE: we lazily execute the query to ensure that (for development) we can
-  // write the data into the cache BEFORE the query attempts to read from it.
-  // If not, Apollo throws an error like `Can't find field 'applicationMenu' on ROOT_QUERY object`.
+  // NOTE: In development, we skip the query as long as the data hasn't been written
+  // into the cache. If not, Apollo throws an error like
+  // `Can't find field 'applicationMenu' on ROOT_QUERY object`.
+
 
-  var _useMcLazyQuery = useMcLazyQuery(FetchApplicationsMenu, {
+  var _useMcQuery = useMcQuery(FetchApplicationsMenu, {
+    skip: config.environment.servedByProxy ? // Production environment
+    false : // Development environment
+    !hasWrittenToCache,
     onError: (_config$queryOptions = config.queryOptions) === null || _config$queryOptions === void 0 ? void 0 : _config$queryOptions.onError,
     fetchPolicy: config.environment.servedByProxy ? 'cache-first' : 'cache-only',
     context: {
@@ -1538,29 +1547,22 @@ function useApplicationsMenu(menuKey, config) {
       skipGraphQlTargetCheck: true
     }
   }),
-      _useMcLazyQuery2 = _slicedToArray(_useMcLazyQuery, 2),
-      executeQuery = _useMcLazyQuery2[0],
-      _useMcLazyQuery2$ = _useMcLazyQuery2[1],
-      menuQueryResult = _useMcLazyQuery2$.data,
-      called = _useMcLazyQuery2$.called; // For development, we read the menu data from the configuration file and
+      menuQueryResult = _useMcQuery.data; // For development, we read the menu data from the configuration file and
   // write it into the Apollo cache.
 
 
   react.useEffect(function () {
     if (config.environment.__DEVELOPMENT__ && (config.environment.__DEVELOPMENT__.menuLinks || // @ts-expect-error: the `accountLinks` is not explicitly typed as it's only used by the account app.
-    config.environment.__DEVELOPMENT__.accountLinks)) {
+    config.environment.__DEVELOPMENT__.accountLinks) && !hasWrittenToCache) {
       var applicationMenu = mapApplicationMenuConfigToGraqhQLQueryResult(config.environment);
       apolloClient.writeQuery({
         query: FetchApplicationsMenu,
         data: applicationMenu
       });
-    }
-
-    if (!called) {
-      executeQuery();
+      setHasWrittenToCache(true);
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
-  }, []); // Make sure to run this effect only once, otherwise we might end up in an infinite loop!
+  }, [hasWrittenToCache]); // Only subscribe to state changes.
 
   if (menuQueryResult && menuQueryResult.applicationsMenu) {
     return menuQueryResult.applicationsMenu[menuKey];
@@ -1678,7 +1680,7 @@ var renderLabel = function renderLabel(menu, applicationLanguage) {
   });
 
   if (localizedLabel) return localizedLabel.value;
-  return constants.NO_VALUE_FALLBACK;
+  return constants$1.NO_VALUE_FALLBACK;
 };
 
 var MenuItem$1 = _styled__default["default"]("div", {
@@ -1783,7 +1785,7 @@ var UserSettingsMenuBody = function UserSettingsMenuBody(props) {
         })
       }), jsxRuntime.jsx("a", {
         css: getUserSettingsMenuItemLinkStyles(),
-        href: constants.SUPPORT_PORTAL_URL,
+        href: constants$1.SUPPORT_PORTAL_URL,
         rel: "noopener noreferrer",
         target: "_blank",
         "data-track-component": "Navigation-Support-links",
@@ -1805,7 +1807,7 @@ var UserSettingsMenuBody = function UserSettingsMenuBody(props) {
         css: getUserSettingsMenuItemLinkStyles() // NOTE: we want to redirect to a new page so that the
         // server can remove things like cookie for access token.
         ,
-        href: "/logout?reason=".concat(constants.LOGOUT_REASONS.USER),
+        href: "/logout?reason=".concat(constants$1.LOGOUT_REASONS.USER),
         "data-test": "logout-button",
         "data-user-settings-menu": true,
         children: [jsxRuntime.jsx(MenuItem$1, {
@@ -1989,7 +1991,7 @@ var ProjectSwitcher = function ProjectSwitcher(props) {
   var _useMcQuery = useMcQuery(ProjectsQuery, {
     onError: sentry.reportErrorToSentry,
     context: {
-      target: constants.GRAPHQL_TARGETS.MERCHANT_CENTER_BACKEND
+      target: constants$1.GRAPHQL_TARGETS.MERCHANT_CENTER_BACKEND
     }
   }),
       loading = _useMcQuery.loading,
@@ -2210,7 +2212,7 @@ var AppBar = function AppBar(props) {
         children: [jsxRuntime.jsxs(Spacings__default["default"].Inline, {
           alignItems: "center",
           children: [jsxRuntime.jsx("div", {
-            id: formatters.CONTAINERS.LOCALE_SWITCHER
+            id: constants.CONTAINERS.LOCALE_SWITCHER
           }), function () {
             if (!props.user) {
               return jsxRuntime.jsx(LoadingPlaceholder, {
@@ -2330,19 +2332,19 @@ var LocaleSwitcher = function LocaleSwitcher(props) {
 LocaleSwitcher.propTypes = {};
 
 var ProjectNotFound = /*#__PURE__*/react.lazy(function () {
-  return Promise.resolve().then(function () { return require('./project-not-found-0e6cff4a.cjs.prod.js'
+  return Promise.resolve().then(function () { return require('./project-not-found-bff932dd.cjs.prod.js'
   /* webpackChunkName: "project-not-found" */
   ); });
 });
 
 var ProjectExpired = /*#__PURE__*/react.lazy(function () {
-  return Promise.resolve().then(function () { return require('./project-expired-d78f409e.cjs.prod.js'
+  return Promise.resolve().then(function () { return require('./project-expired-78a70097.cjs.prod.js'
   /* webpackChunkName: "project-expired" */
   ); });
 });
 
 var ProjectNotInitialized = /*#__PURE__*/react.lazy(function () {
-  return Promise.resolve().then(function () { return require('./project-not-initialized-ca9859aa.cjs.prod.js'
+  return Promise.resolve().then(function () { return require('./project-not-initialized-64ac7587.cjs.prod.js'
   /* webpackChunkName: "project-not-initialized" */
   ); });
 });
@@ -2389,7 +2391,7 @@ var RedirectToProjectCreate = function RedirectToProjectCreate() {
 RedirectToProjectCreate.displayName = 'RedirectToProjectCreate';
 
 var ProjectSuspended = /*#__PURE__*/react.lazy(function () {
-  return Promise.resolve().then(function () { return require('./project-suspended-a3444cac.cjs.prod.js'
+  return Promise.resolve().then(function () { return require('./project-suspended-540da552.cjs.prod.js'
   /* webpackChunkName: "project-suspended" */
   ); });
 });
@@ -2436,13 +2438,13 @@ var ProjectContainer = function ProjectContainer(props) {
      *   is inserted in the DOM tree.
      * "
      */
-    setLocaleSwitcherNode(document.getElementById(formatters.CONTAINERS.LOCALE_SWITCHER));
+    setLocaleSwitcherNode(document.getElementById(constants.CONTAINERS.LOCALE_SWITCHER));
   }, [setLocaleSwitcherNode]);
   var projectKey = props.match.params.projectKey;
   react.useEffect(function () {
     // Ensure to sync the `projectKey` from the URL with localStorage.
     if (projectKey) {
-      window.localStorage.setItem(formatters.STORAGE_KEYS.ACTIVE_PROJECT_KEY, projectKey);
+      window.localStorage.setItem(constants.STORAGE_KEYS.ACTIVE_PROJECT_KEY, projectKey);
     }
   }, [projectKey]); // }
 
@@ -2460,7 +2462,7 @@ var ProjectContainer = function ProjectContainer(props) {
    */
 
   if (hasNoProjects && props.environment.enableSignUp !== true && props.environment.servedByProxy) return jsxRuntime.jsx(reactRouterDom.Redirect, {
-    to: "/logout?reason=".concat(constants.LOGOUT_REASONS.NO_PROJECTS)
+    to: "/logout?reason=".concat(constants$1.LOGOUT_REASONS.NO_PROJECTS)
   });
   if (hasNoProjects && props.environment.enableSignUp) return jsxRuntime.jsxs(reactRouterDom.Switch, {
     children: [jsxRuntime.jsx(reactRouterDom.Route, {
@@ -2484,7 +2486,7 @@ var ProjectContainer = function ProjectContainer(props) {
           if (isProjectLoading) return jsxRuntime.jsx(ApplicationLoader, {});
           if (!project) return jsxRuntime.jsx(ProjectNotFound, {});
           if (project.suspension && project.suspension.isActive) return jsxRuntime.jsx(ProjectSuspended, {
-            isTemporary: project.suspension.reason === formatters.SUSPENSION_REASONS.TEMPORARY_MAINTENANCE
+            isTemporary: project.suspension.reason === constants.SUSPENSION_REASONS.TEMPORARY_MAINTENANCE
           });
           if (project.expiry && project.expiry.isActive) return jsxRuntime.jsx(ProjectExpired, {});
           if (project.initialized === false) return jsxRuntime.jsx(ProjectNotInitialized, {});
@@ -2503,7 +2505,7 @@ var ProjectContainer = function ProjectContainer(props) {
                 children: jsxRuntime.jsxs(jsxRuntime.Fragment, {
                   children: [shouldShowNotificationForTrialExpired((_project$expiry$daysL = project.expiry.daysLeft) !== null && _project$expiry$daysL !== void 0 ? _project$expiry$daysL : undefined) && jsxRuntime.jsx(reactNotifications.Notifier, {
                     kind: "warning",
-                    domain: constants.DOMAINS.GLOBAL,
+                    domain: constants$1.DOMAINS.GLOBAL,
                     text: intl.formatMessage(messages$1.trialDaysLeft, {
                       daysLeft: project.expiry.daysLeft || 0
                     })
@@ -2679,7 +2681,7 @@ var SetupFlopFlipProvider = function SetupFlopFlipProvider(props) {
                       query: AllFeaturesQuery,
                       errorPolicy: 'ignore',
                       context: {
-                        target: constants.GRAPHQL_TARGETS.MERCHANT_CENTER_BACKEND
+                        target: constants$1.GRAPHQL_TARGETS.MERCHANT_CENTER_BACKEND
                       }
                     });
 
@@ -2755,7 +2757,7 @@ var messages = reactIntl.defineMessages({
 });
 
 var useLoadingMenuLayoutEffect = function useLoadingMenuLayoutEffect() {
-  var cachedIsForcedMenuOpen = window.localStorage.getItem(formatters.STORAGE_KEYS.IS_FORCED_MENU_OPEN);
+  var cachedIsForcedMenuOpen = window.localStorage.getItem(constants.STORAGE_KEYS.IS_FORCED_MENU_OPEN);
   var isForcedMenuOpen = isNil__default["default"](cachedIsForcedMenuOpen) ? null : JSON.parse(cachedIsForcedMenuOpen);
   react.useLayoutEffect(function () {
     if (isForcedMenuOpen) document.body.classList.add('body__menu-open');
@@ -2833,7 +2835,7 @@ var useNavbarStateManager = function useNavbarStateManager(props) {
   var _useMcQuery = useMcQuery(FetchProjectExtensionsNavbar, {
     skip: !props.environment.servedByProxy,
     context: {
-      target: constants.GRAPHQL_TARGETS.SETTINGS_SERVICE
+      target: constants$1.GRAPHQL_TARGETS.SETTINGS_SERVICE
     },
     fetchPolicy: 'cache-and-network',
     onError: sentry.reportErrorToSentry
@@ -2909,7 +2911,7 @@ var useNavbarStateManager = function useNavbarStateManager(props) {
       })
     };
   })).call(_context4, nonNullable) : [];
-  var cachedIsForcedMenuOpen = window.localStorage.getItem(formatters.STORAGE_KEYS.IS_FORCED_MENU_OPEN);
+  var cachedIsForcedMenuOpen = window.localStorage.getItem(constants.STORAGE_KEYS.IS_FORCED_MENU_OPEN);
   var isForcedMenuOpen = isNil__default["default"](cachedIsForcedMenuOpen) ? null : JSON.parse(cachedIsForcedMenuOpen);
 
   var _useReducer = react.useReducer(reducer, getInitialState(isForcedMenuOpen)),
@@ -2991,7 +2993,7 @@ var useNavbarStateManager = function useNavbarStateManager(props) {
       type: 'toggleIsMenuOpen'
     }); // Synchronize the menu state with local storage.
 
-    window.localStorage.setItem(formatters.STORAGE_KEYS.IS_FORCED_MENU_OPEN, String(!state.isMenuOpen));
+    window.localStorage.setItem(constants.STORAGE_KEYS.IS_FORCED_MENU_OPEN, String(!state.isMenuOpen));
   }, [state.activeItemIndex, state.isMenuOpen]);
 
   var allApplicationNavbarMenu = _concatInstanceProperty__default["default"](_context7 = _concatInstanceProperty__default["default"](_context8 = applicationsNavBarMenu || []).call(_context8, legacyCustomAppsMenu)).call(_context7, organizationCustomAppsMenu);
@@ -3314,7 +3316,7 @@ var MenuLabel = function MenuLabel(props) {
     children: props.defaultLabel
   });
   return jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: constants.NO_VALUE_FALLBACK
+    children: constants$1.NO_VALUE_FALLBACK
   });
 };
 
@@ -3516,7 +3518,7 @@ var NavBar = function NavBar(props) {
           },
           onMouseLeave: isMenuOpen ? undefined : shouldCloseMenuFly,
           children: jsxRuntime.jsx("a", {
-            href: constants.SUPPORT_PORTAL_URL,
+            href: constants$1.SUPPORT_PORTAL_URL,
             rel: "noopener noreferrer",
             target: "_blank",
             children: jsxRuntime.jsxs("div", {
@@ -3604,7 +3606,7 @@ var pimIndexerStates = {
 };
 
 var QuickAccess = /*#__PURE__*/react.lazy(function () {
-  return Promise.resolve().then(function () { return require('./quick-access-08a3e28d.cjs.prod.js'
+  return Promise.resolve().then(function () { return require('./quick-access-1d4f2411.cjs.prod.js'
   /* webpackChunkName: "quick-access" */
   ); });
 });
@@ -3801,10 +3803,10 @@ var RedirectToLogin = function RedirectToLogin() {
       origin: (_window$app$__DEVELOP7 = window.app.__DEVELOPMENT__) === null || _window$app$__DEVELOP7 === void 0 ? void 0 : (_window$app$__DEVELOP8 = _window$app$__DEVELOP7.oidc) === null || _window$app$__DEVELOP8 === void 0 ? void 0 : _window$app$__DEVELOP8.authorizeUrl,
       location: location,
       queryParams: {
-        reason: constants.LOGOUT_REASONS.UNAUTHORIZED,
+        reason: constants$1.LOGOUT_REASONS.UNAUTHORIZED,
         // Query parameters for OIDC-lik workflow.
         client_id: window.app.applicationId,
-        response_type: formatters.OIDC_RESPONSE_TYPES.ID_TOKEN,
+        response_type: constants.OIDC_RESPONSE_TYPES.ID_TOKEN,
         scope: requestedScope,
         state: sessionId,
         nonce: sessionId
@@ -3818,7 +3820,7 @@ var RedirectToLogin = function RedirectToLogin() {
     origin: mcOrigin,
     location: location,
     queryParams: {
-      reason: constants.LOGOUT_REASONS.UNAUTHORIZED,
+      reason: constants$1.LOGOUT_REASONS.UNAUTHORIZED,
       redirectTo: urlUtils.trimLeadingAndTrailingSlashes(urlUtils.joinPaths(window.location.origin, location.pathname))
     }
   });
@@ -3851,7 +3853,7 @@ var RedirectToLogout = function RedirectToLogout(props) {
     origin: mcOrigin,
     location: location,
     queryParams: _objectSpread$1({
-      reason: (_props$reason = props.reason) !== null && _props$reason !== void 0 ? _props$reason : constants.LOGOUT_REASONS.USER
+      reason: (_props$reason = props.reason) !== null && _props$reason !== void 0 ? _props$reason : constants$1.LOGOUT_REASONS.USER
     }, servedByProxy ? {} : {
       // This will be used after being logged in, to redirect to this location.
       redirectTo: window.location.origin
@@ -3938,7 +3940,7 @@ var RestrictedApplication = function RestrictedApplication(props) {
 
           if (hasUnauthorizedError || hasUserBeenDeletedError) {
             var logoutReason;
-            if (hasUnauthorizedError) logoutReason = constants.LOGOUT_REASONS.UNAUTHORIZED;else if (hasUserBeenDeletedError) logoutReason = constants.LOGOUT_REASONS.DELETED;
+            if (hasUnauthorizedError) logoutReason = constants$1.LOGOUT_REASONS.UNAUTHORIZED;else if (hasUserBeenDeletedError) logoutReason = constants$1.LOGOUT_REASONS.DELETED;
             return jsxRuntime.jsx(RedirectToLogout, {
               reason: logoutReason
             });
@@ -4005,7 +4007,7 @@ var RestrictedApplication = function RestrictedApplication(props) {
                       role: "global-notifications",
                       css: _ref5,
                       children: jsxRuntime.jsx(reactNotifications.NotificationsList, {
-                        domain: constants.DOMAINS.GLOBAL
+                        domain: constants$1.DOMAINS.GLOBAL
                       })
                     }), jsxRuntime.jsx(reactRouterDom.Route, {
                       children: function children() {
@@ -4092,9 +4094,9 @@ var RestrictedApplication = function RestrictedApplication(props) {
                     }) : jsxRuntime.jsxs(MainContainer, {
                       role: "main",
                       children: [jsxRuntime.jsx(reactNotifications.NotificationsList, {
-                        domain: constants.DOMAINS.PAGE
+                        domain: constants$1.DOMAINS.PAGE
                       }), jsxRuntime.jsx(reactNotifications.NotificationsList, {
-                        domain: constants.DOMAINS.SIDE
+                        domain: constants$1.DOMAINS.SIDE
                       }), jsxRuntime.jsxs("div", {
                         css: _ref2,
                         children: [jsxRuntime.jsx(applicationComponents.PortalsContainer, {}), jsxRuntime.jsxs(reactRouterDom.Switch, {

package/dist/{index-aa15e33c.esm.js → index-6ed51d04.esm.js}

@@ -1,4 +1,4 @@
-import { g as getMcApiUrl, l as logger, a as getActiveProjectKey, r as removeActiveProjectKey, s as setActiveProjectKey, b as getSessionScope, c as location, d as getSessionState, e as setActiveSession, f as createApolloClient, i as internalReduxStore, h as setCachedApolloClient, v as version, R as REQUESTS_IN_FLIGHT_LOADER_DOM_ID, u as useIsServedByProxy, A as ApplicationEntryPoint, j as setSessionScope, k as setSessionState, m as clearSession, n as selectProjectKeyFromUrl, o as RequestsInFlightLoader, p as RouteCatchAll } from './application-entry-point-35823e6a.esm.js';
+import { g as getMcApiUrl, l as logger, a as getActiveProjectKey, r as removeActiveProjectKey, s as setActiveProjectKey, b as getSessionScope, c as location, d as getSessionState, e as setActiveSession, f as createApolloClient, i as internalReduxStore, h as setCachedApolloClient, v as version, R as REQUESTS_IN_FLIGHT_LOADER_DOM_ID, u as useIsServedByProxy, A as ApplicationEntryPoint, j as setSessionScope, k as setSessionState, m as clearSession, n as selectProjectKeyFromUrl, o as RequestsInFlightLoader, p as RouteCatchAll } from './application-entry-point-bad42f46.esm.js';
 import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
 import _styled from '@emotion/styled/base';
 import _pt from 'prop-types';
@@ -23,11 +23,9 @@ import { PublicPageLayout, MaintenancePageLayout, PortalsContainer } from '@comm
 import { Notifier, NotificationsList } from '@commercetools-frontend/react-notifications';
 import { AsyncLocaleData } from '@commercetools-frontend/i18n';
 import { v4 } from 'uuid';
-import { S as STORAGE_KEYS, O as OIDC_CLAIMS, C as CONTAINERS, a as SUSPENSION_REASONS, b as OIDC_RESPONSE_TYPES } from './formatters-1c23c0a9.esm.js';
+import { S as STORAGE_KEYS, O as OIDC_CLAIMS, C as CONTAINERS, a as SUSPENSION_REASONS, b as OIDC_RESPONSE_TYPES } from './constants-33a16227.esm.js';
 import _URL from '@babel/runtime-corejs3/core-js-stable/url';
 import _concatInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/concat';
-import _mapInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/map';
-import 'lodash/upperFirst';
 import _slicedToArray from '@babel/runtime-corejs3/helpers/esm/slicedToArray';
 import { jsx, Fragment, jsxs } from '@emotion/react/jsx-runtime';
 import Perfume from 'perfume.js';
@@ -38,7 +36,7 @@ import { Provider, useStore } from 'react-redux';
 import history from '@commercetools-frontend/browser-history';
 import { IntlProvider, defineMessages, useIntl, FormattedMessage } from 'react-intl';
 import _startsWithInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/starts-with';
-import { b as buildOidcScope } from './oidc-cb5c92bd.esm.js';
+import { b as buildOidcScope } from './oidc-415a3ef6.esm.js';
 import { encode, decode } from 'qss';
 import jwtDecode from 'jwt-decode';
 import FailedAuthenticationSVG from '@commercetools-frontend/assets/images/locked-diamond.svg';
@@ -64,6 +62,7 @@ import { actions, useAsyncDispatch } from '@commercetools-frontend/sdk';
 import _JSON$stringify from '@babel/runtime-corejs3/core-js-stable/json/stringify';
 import LogoSVG from '@commercetools-frontend/assets/images/logo.svg';
 import _trimInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/trim';
+import _mapInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/map';
 import Downshift from 'downshift';
 import { ToggleFeature, ConfigureFlopFlip, useFlagVariation } from '@flopflip/react-broadcast';
 import Avatar from '@commercetools-uikit/avatar';
@@ -94,6 +93,7 @@ import throttle from 'lodash/throttle';
 import { trimLeadingAndTrailingSlashes, joinPaths } from '@commercetools-frontend/url-utils';
 import _someInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/some';
 import { showUnexpectedErrorNotification } from '@commercetools-frontend/actions-global';
+import '@commercetools-frontend/application-config/ssr';
 
 function selectProjectKeyFromLocalStorage() {
   return window.localStorage.getItem(STORAGE_KEYS.ACTIVE_PROJECT_KEY);
@@ -1480,16 +1480,25 @@ function useApplicationsMenu(menuKey, config) {
   var apolloClient = useApolloClient();
   var mcProxyApiUrl = useApplicationContext(function (context) {
     return context.environment.mcProxyApiUrl;
-  }); // Fetch all menu links from the GraphQL API in the Merchant Center Proxy.
+  });
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      hasWrittenToCache = _useState2[0],
+      setHasWrittenToCache = _useState2[1]; // Fetch all menu links from the GraphQL API in the Merchant Center Proxy.
   // For local development, we don't fetch data from the remote server but use
   // only the configuration for the menu links defined for the application.
   // To do so, we manually write the data in the Apollo cache and use the
   // `fetchPolicy: cache-only` to instruct Apollo to read the data from the cache.
-  // NOTE: we lazily execute the query to ensure that (for development) we can
-  // write the data into the cache BEFORE the query attempts to read from it.
-  // If not, Apollo throws an error like `Can't find field 'applicationMenu' on ROOT_QUERY object`.
+  // NOTE: In development, we skip the query as long as the data hasn't been written
+  // into the cache. If not, Apollo throws an error like
+  // `Can't find field 'applicationMenu' on ROOT_QUERY object`.
+
 
-  var _useMcLazyQuery = useMcLazyQuery(FetchApplicationsMenu, {
+  var _useMcQuery = useMcQuery(FetchApplicationsMenu, {
+    skip: config.environment.servedByProxy ? // Production environment
+    false : // Development environment
+    !hasWrittenToCache,
     onError: (_config$queryOptions = config.queryOptions) === null || _config$queryOptions === void 0 ? void 0 : _config$queryOptions.onError,
     fetchPolicy: config.environment.servedByProxy ? 'cache-first' : 'cache-only',
     context: {
@@ -1498,29 +1507,22 @@ function useApplicationsMenu(menuKey, config) {
       skipGraphQlTargetCheck: true
     }
   }),
-      _useMcLazyQuery2 = _slicedToArray(_useMcLazyQuery, 2),
-      executeQuery = _useMcLazyQuery2[0],
-      _useMcLazyQuery2$ = _useMcLazyQuery2[1],
-      menuQueryResult = _useMcLazyQuery2$.data,
-      called = _useMcLazyQuery2$.called; // For development, we read the menu data from the configuration file and
+      menuQueryResult = _useMcQuery.data; // For development, we read the menu data from the configuration file and
   // write it into the Apollo cache.
 
 
   useEffect(function () {
     if (config.environment.__DEVELOPMENT__ && (config.environment.__DEVELOPMENT__.menuLinks || // @ts-expect-error: the `accountLinks` is not explicitly typed as it's only used by the account app.
-    config.environment.__DEVELOPMENT__.accountLinks)) {
+    config.environment.__DEVELOPMENT__.accountLinks) && !hasWrittenToCache) {
       var applicationMenu = mapApplicationMenuConfigToGraqhQLQueryResult(config.environment);
       apolloClient.writeQuery({
         query: FetchApplicationsMenu,
         data: applicationMenu
       });
-    }
-
-    if (!called) {
-      executeQuery();
+      setHasWrittenToCache(true);
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
-  }, []); // Make sure to run this effect only once, otherwise we might end up in an infinite loop!
+  }, [hasWrittenToCache]); // Only subscribe to state changes.
 
   if (menuQueryResult && menuQueryResult.applicationsMenu) {
     return menuQueryResult.applicationsMenu[menuKey];
@@ -2365,19 +2367,19 @@ LocaleSwitcher.propTypes = process.env.NODE_ENV !== "production" ? {
 } : {};
 
 var ProjectNotFound = /*#__PURE__*/lazy(function () {
-  return import('./project-not-found-5ef3ee79.esm.js'
+  return import('./project-not-found-745820fa.esm.js'
   /* webpackChunkName: "project-not-found" */
   );
 });
 
 var ProjectExpired = /*#__PURE__*/lazy(function () {
-  return import('./project-expired-869c2e90.esm.js'
+  return import('./project-expired-9e2d78cb.esm.js'
   /* webpackChunkName: "project-expired" */
   );
 });
 
 var ProjectNotInitialized = /*#__PURE__*/lazy(function () {
-  return import('./project-not-initialized-34bbe63a.esm.js'
+  return import('./project-not-initialized-5666fe79.esm.js'
   /* webpackChunkName: "project-not-initialized" */
   );
 });
@@ -2424,7 +2426,7 @@ var RedirectToProjectCreate = function RedirectToProjectCreate() {
 RedirectToProjectCreate.displayName = 'RedirectToProjectCreate';
 
 var ProjectSuspended = /*#__PURE__*/lazy(function () {
-  return import('./project-suspended-67a4df2c.esm.js'
+  return import('./project-suspended-b4842f42.esm.js'
   /* webpackChunkName: "project-suspended" */
   );
 });
@@ -3739,7 +3741,7 @@ var pimIndexerStates = {
 };
 
 var QuickAccess = /*#__PURE__*/lazy(function () {
-  return import('./quick-access-c3dc89c4.esm.js'
+  return import('./quick-access-1233f1f8.esm.js'
   /* webpackChunkName: "quick-access" */
   );
 });