@commercetools-frontend/application-shell 21.2.1 → 21.3.3

package/dist/{index-4a064d3c.cjs.prod.js → index-76ebb56d.cjs.prod.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var applicationEntryPoint = require('./application-entry-point-c8e001b7.cjs.prod.js');
+var applicationEntryPoint = require('./application-entry-point-0178aabe.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 constants = require('./constants-90b58549.cjs.prod.js');
 var uuid = require('uuid');
-var formatters = require('./formatters-a5bb12eb.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-8ad956b5.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
   }),
@@ -1406,7 +1406,7 @@ FetchProject.displayName = 'FetchProject';
 
 function ownKeys$9(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$9(target) { for (var i = 1; i < arguments.length; i++) { var _context4, _context5; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context4 = ownKeys$9(Object(source), !0)).call(_context4, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context5 = ownKeys$9(Object(source))).call(_context5, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
+function _objectSpread$9(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context3 = ownKeys$9(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context4 = ownKeys$9(Object(source))).call(_context4, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 var FetchApplicationsMenu = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "FetchApplicationsMenu" }, variableDefinitions: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "applicationsMenu" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "navBar" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "shouldRenderDivider" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "key" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "uriPath" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "icon" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "labelAllLocales" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "locale" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "value" }, arguments: [], directives: [] }] } }, { kind: "Field", name: { kind: "Name", value: "featureToggle" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "menuVisibility" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "permissions" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "dataFences" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "group" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "type" }, arguments: [], directives: [] }] } }, { kind: "Field", name: { kind: "Name", value: "actionRights" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "group" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }] } }, { kind: "Field", name: { kind: "Name", value: "submenu" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "key" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "uriPath" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "labelAllLocales" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "locale" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "value" }, arguments: [], directives: [] }] } }, { kind: "Field", name: { kind: "Name", value: "featureToggle" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "menuVisibility" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "permissions" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "actionRights" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "group" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }] } }, { kind: "Field", name: { kind: "Name", value: "dataFences" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "group" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "type" }, arguments: [], directives: [] }] } }] } }] } }, { kind: "Field", name: { kind: "Name", value: "appBar" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "key" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "uriPath" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "labelAllLocales" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "locale" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "value" }, arguments: [], directives: [] }] } }, { kind: "Field", name: { kind: "Name", value: "featureToggle" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "permissions" }, arguments: [], directives: [] }] } }] } }] } }], loc: { start: 0, end: 849, source: { body: "query FetchApplicationsMenu {\n  applicationsMenu {\n    navBar {\n      shouldRenderDivider\n      key\n      uriPath\n      icon\n      labelAllLocales {\n        locale\n        value\n      }\n      featureToggle\n      menuVisibility\n      permissions\n      dataFences {\n        group\n        name\n        type\n      }\n      actionRights {\n        group\n        name\n      }\n      submenu {\n        key\n        uriPath\n        labelAllLocales {\n          locale\n          value\n        }\n        featureToggle\n        menuVisibility\n        permissions\n        actionRights {\n          group\n          name\n        }\n        dataFences {\n          group\n          name\n          type\n        }\n      }\n    }\n    appBar {\n      key\n      uriPath\n      labelAllLocales {\n        locale\n        value\n      }\n      featureToggle\n      permissions\n    }\n  }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
 var supportedLocales = ['en', 'de', 'es', 'fr-FR', 'zh-CN', 'ja'];
 var defaultApiUrl$1 = window.location.origin;
@@ -1471,19 +1471,12 @@ var mapApplicationMenuConfigToGraqhQLQueryResult = function mapApplicationMenuCo
         // @ts-ignore: not defined in schema, as it's only used internally.
         dataFences: (_menuLinks$dataFences = menuLinks.dataFences) !== null && _menuLinks$dataFences !== void 0 ? _menuLinks$dataFences : null,
         submenu: _mapInstanceProperty__default["default"](_context = menuLinks.submenuLinks).call(_context, function (submenuLink) {
-          var _context2, _context3, _submenuLink$featureT, _submenuLink$menuVisi, _submenuLink$actionRi, _submenuLink$dataFenc;
+          var _context2, _submenuLink$featureT, _submenuLink$menuVisi, _submenuLink$actionRi, _submenuLink$dataFenc;
 
           return {
             __typename: 'BaseMenu',
             key: _concatInstanceProperty__default["default"](_context2 = "".concat(entryPointUriPath, "-")).call(_context2, submenuLink.uriPath),
-            // The `uriPath` of each submenu link is supposed to be defined relative
-            // to the entry point URI path.
-            // However, when rendering the link, we need to provide the full uri path.
-            // Special case when the value is `/`: it means that the link is supposed to be
-            // treated the same as the entry point uri path. In this case, the return value
-            // should not contain any unnecessary trailing slash and therefore we return the
-            // main value `entryPointUriPath`.
-            uriPath: submenuLink.uriPath === '/' ? entryPointUriPath : _concatInstanceProperty__default["default"](_context3 = "".concat(entryPointUriPath, "/")).call(_context3, submenuLink.uriPath),
+            uriPath: submenuLink.uriPath,
             labelAllLocales: mapLabelAllLocalesWithDefaults(submenuLink.labelAllLocales, submenuLink.defaultLabel),
             permissions: submenuLink.permissions,
             // @ts-ignore: not defined in schema, as it's only used internally.
@@ -1680,7 +1673,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", {
@@ -1785,7 +1778,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",
@@ -1807,7 +1800,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, {
@@ -1991,7 +1984,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,
@@ -2183,7 +2176,7 @@ var AppBar = function AppBar(props) {
 
   var previousProjectKey = getPreviousProjectKey((_props$user$defaultPr = (_props$user = props.user) === null || _props$user === void 0 ? void 0 : _props$user.defaultProjectKey) !== null && _props$user$defaultPr !== void 0 ? _props$user$defaultPr : undefined);
   return jsxRuntime.jsxs("div", {
-    css: /*#__PURE__*/react$2.css("box-shadow:", designSystem.customProperties.shadow1, ";min-height:43px;position:relative;width:100%;z-index:20000;display:flex;align-items:center;justify-content:space-between;" + ("" ), "" ),
+    css: /*#__PURE__*/react$2.css("background-color:", designSystem.customProperties.colorSurface, ";box-shadow:", designSystem.customProperties.shadow1, ";min-height:", constants.HEIGHTS.header, ";position:relative;width:100%;z-index:20000;display:flex;align-items:center;justify-content:space-between;" + ("" ), "" ),
     "data-test": "top-navigation",
     children: [jsxRuntime.jsxs(Spacings__default["default"].Inline, {
       children: [jsxRuntime.jsx("div", {
@@ -2212,7 +2205,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, {
@@ -2237,7 +2230,7 @@ var AppBar = function AppBar(props) {
             });
           }()]
         }), jsxRuntime.jsx("div", {
-          css: /*#__PURE__*/react$2.css("border-left:1px ", designSystem.customProperties.colorNeutral90, " solid;height:43px;" + ("" ), "" )
+          css: /*#__PURE__*/react$2.css("border-left:1px ", designSystem.customProperties.colorNeutral90, " solid;height:", constants.HEIGHTS.header, ";" + ("" ), "" )
         }), props.user ? jsxRuntime.jsx(UserSettingsMenu, {
           language: props.user.language,
           firstName: props.user.firstName,
@@ -2332,19 +2325,19 @@ var LocaleSwitcher = function LocaleSwitcher(props) {
 LocaleSwitcher.propTypes = {};
 
 var ProjectNotFound = /*#__PURE__*/react.lazy(function () {
-  return Promise.resolve().then(function () { return require('./project-not-found-77c72212.cjs.prod.js'
+  return Promise.resolve().then(function () { return require('./project-not-found-b3dc61be.cjs.prod.js'
   /* webpackChunkName: "project-not-found" */
   ); });
 });
 
 var ProjectExpired = /*#__PURE__*/react.lazy(function () {
-  return Promise.resolve().then(function () { return require('./project-expired-c28b50d9.cjs.prod.js'
+  return Promise.resolve().then(function () { return require('./project-expired-38ca65c4.cjs.prod.js'
   /* webpackChunkName: "project-expired" */
   ); });
 });
 
 var ProjectNotInitialized = /*#__PURE__*/react.lazy(function () {
-  return Promise.resolve().then(function () { return require('./project-not-initialized-46b2b026.cjs.prod.js'
+  return Promise.resolve().then(function () { return require('./project-not-initialized-0f274fc5.cjs.prod.js'
   /* webpackChunkName: "project-not-initialized" */
   ); });
 });
@@ -2391,7 +2384,7 @@ var RedirectToProjectCreate = function RedirectToProjectCreate() {
 RedirectToProjectCreate.displayName = 'RedirectToProjectCreate';
 
 var ProjectSuspended = /*#__PURE__*/react.lazy(function () {
-  return Promise.resolve().then(function () { return require('./project-suspended-7dabf6de.cjs.prod.js'
+  return Promise.resolve().then(function () { return require('./project-suspended-f5ab439d.cjs.prod.js'
   /* webpackChunkName: "project-suspended" */
   ); });
 });
@@ -2438,13 +2431,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]); // }
 
@@ -2462,7 +2455,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, {
@@ -2486,7 +2479,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, {});
@@ -2505,7 +2498,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
                     })
@@ -2681,7 +2674,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
                       }
                     });
 
@@ -2757,7 +2750,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');
@@ -2835,7 +2828,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
@@ -2911,7 +2904,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)),
@@ -2993,7 +2986,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);
@@ -3316,7 +3309,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
   });
 };
 
@@ -3518,7 +3511,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", {
@@ -3606,7 +3599,7 @@ var pimIndexerStates = {
 };
 
 var QuickAccess = /*#__PURE__*/react.lazy(function () {
-  return Promise.resolve().then(function () { return require('./quick-access-1ebebadc.cjs.prod.js'
+  return Promise.resolve().then(function () { return require('./quick-access-123514ab.cjs.prod.js'
   /* webpackChunkName: "quick-access" */
   ); });
 });
@@ -3803,10 +3796,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
@@ -3820,7 +3813,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))
     }
   });
@@ -3853,7 +3846,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
@@ -3911,11 +3904,6 @@ var _ref5 = {
   styles: "grid-row:1;grid-column:1/3"
 } ;
 
-var _ref6 = {
-  name: "1gbbf0w",
-  styles: "height:100vh;display:grid;grid-template-rows:auto 43px 1fr;grid-template-columns:auto 1fr"
-} ;
-
 var RestrictedApplication = function RestrictedApplication(props) {
   var applicationEnvironment = applicationShellConnectors.useApplicationContext(function (context) {
     return context.environment;
@@ -3927,10 +3915,10 @@ var RestrictedApplication = function RestrictedApplication(props) {
 
   var location = reactRouterDom.useLocation();
   return jsxRuntime.jsx(FetchUser, {
-    children: function children(_ref7) {
-      var isLoadingUser = _ref7.isLoading,
-          user = _ref7.user,
-          error = _ref7.error;
+    children: function children(_ref6) {
+      var isLoadingUser = _ref6.isLoading,
+          user = _ref6.user,
+          error = _ref6.error;
 
       if (error) {
         // In case there is an unauthorized error, we redirect to the login page
@@ -3940,7 +3928,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
             });
@@ -3953,9 +3941,9 @@ var RestrictedApplication = function RestrictedApplication(props) {
         return jsxRuntime.jsx(i18n.AsyncLocaleData, {
           locale: userLocale,
           applicationMessages: props.applicationMessages,
-          children: function children(_ref8) {
-            var locale = _ref8.locale,
-                messages = _ref8.messages;
+          children: function children(_ref7) {
+            var locale = _ref7.locale,
+                messages = _ref7.messages;
             sentry.reportErrorToSentry(error, {});
             return jsxRuntime.jsx(ConfigureIntlProvider, {
               locale: locale,
@@ -3973,12 +3961,12 @@ var RestrictedApplication = function RestrictedApplication(props) {
         children: jsxRuntime.jsx(i18n.AsyncLocaleData, {
           locale: user === null || user === void 0 ? void 0 : user.language,
           applicationMessages: props.applicationMessages,
-          children: function children(_ref9) {
+          children: function children(_ref8) {
             var _user$businessRole;
 
-            var isLoadingLocaleData = _ref9.isLoading,
-                locale = _ref9.locale,
-                messages = _ref9.messages;
+            var isLoadingLocaleData = _ref8.isLoading,
+                locale = _ref8.locale,
+                messages = _ref8.messages;
             return jsxRuntime.jsx(ConfigureIntlProvider // We do not want to pass the language as long as the locale data
             // is not loaded.
             , _objectSpread(_objectSpread({}, isLoadingLocaleData ? {} : {
@@ -4002,21 +3990,21 @@ var RestrictedApplication = function RestrictedApplication(props) {
                     userBusinessRole: (_user$businessRole = user === null || user === void 0 ? void 0 : user.businessRole) !== null && _user$businessRole !== void 0 ? _user$businessRole : undefined
                   }), jsxRuntime.jsxs("div", {
                     role: "application-layout",
-                    css: _ref6,
+                    css: /*#__PURE__*/react$2.css("height:100vh;display:grid;grid-template-rows:auto ", constants.HEIGHTS.header, " 1fr;grid-template-columns:auto 1fr;" + ("" ), "" ),
                     children: [jsxRuntime.jsx("div", {
                       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() {
                         if (!projectKeyFromUrl) return jsxRuntime.jsx(QuickAccessTrigger, {});
                         return jsxRuntime.jsx(FetchProject, {
                           projectKey: projectKeyFromUrl,
-                          children: function children(_ref10) {
-                            var isProjectLoading = _ref10.isLoading,
-                                project = _ref10.project;
+                          children: function children(_ref9) {
+                            var isProjectLoading = _ref9.isLoading,
+                                project = _ref9.project;
                             if (isProjectLoading || !project) return null; // when used outside of a project context,
                             // or when the project is expired or supsended
 
@@ -4024,9 +4012,9 @@ var RestrictedApplication = function RestrictedApplication(props) {
                             if (!shouldUseProjectContext) return jsxRuntime.jsx(QuickAccessTrigger, {});
                             return jsxRuntime.jsx(ProjectDataLocale, {
                               locales: project.languages,
-                              children: function children(_ref11) {
-                                var dataLocale = _ref11.locale,
-                                    setProjectDataLocale = _ref11.setProjectDataLocale;
+                              children: function children(_ref10) {
+                                var dataLocale = _ref10.locale,
+                                    setProjectDataLocale = _ref10.setProjectDataLocale;
                                 return jsxRuntime.jsx(applicationShellConnectors.ApplicationContextProvider, {
                                   user: user,
                                   project: project,
@@ -4065,9 +4053,9 @@ var RestrictedApplication = function RestrictedApplication(props) {
                         if (!projectKeyFromUrl) return null;
                         return jsxRuntime.jsx(FetchProject, {
                           projectKey: projectKeyFromUrl,
-                          children: function children(_ref12) {
-                            var isLoadingProject = _ref12.isLoading,
-                                project = _ref12.project;
+                          children: function children(_ref11) {
+                            var isLoadingProject = _ref11.isLoading,
+                                project = _ref11.project;
                             // Render the loading navbar as long as all the data
                             // hasn't been loaded, or if the project does not exist.
                             if (isLoadingUser || isLoadingLocaleData || isLoadingProject || !locale || !project) return jsxRuntime.jsx(LoadingNavBar, {});
@@ -4094,12 +4082,14 @@ 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, {
+                        children: [jsxRuntime.jsx(applicationComponents.PortalsContainer, {
+                          offsetTop: constants.HEIGHTS.header
+                        }), jsxRuntime.jsxs(reactRouterDom.Switch, {
                           children: [jsxRuntime.jsx(reactRouterDom.Redirect, {
                             from: "/profile",
                             to: "/account/profile"
@@ -4174,8 +4164,8 @@ var RestrictedApplication = function RestrictedApplication(props) {
 RestrictedApplication.displayName = 'RestrictedApplication';
 
 var _ref = {
-  name: "jq7s6j",
-  styles: "#app{height:100%;}.ReactModal__Body--open main{overflow:hidden;}"
+  name: "172jsbd",
+  styles: "#app{height:100%;}"
 } ;
 
 var ApplicationShell = function ApplicationShell(props) {
@@ -4195,8 +4185,8 @@ var ApplicationShell = function ApplicationShell(props) {
       environment: props.environment,
       trackingEventList: props.trackingEventList,
       applicationMessages: props.applicationMessages,
-      children: function children(_ref13) {
-        var isAuthenticated = _ref13.isAuthenticated;
+      children: function children(_ref12) {
+        var isAuthenticated = _ref12.isAuthenticated;
 
         if (isAuthenticated) {
           return jsxRuntime.jsxs(reactRouterDom.Switch, {