@commercetools-frontend/application-shell 21.18.1 → 21.20.0

package/dist/{index-fe68c713.cjs.prod.js → index-5693a438.cjs.prod.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var applicationEntryPoint = require('./application-entry-point-88e60ecd.cjs.prod.js');
+var applicationEntryPoint = require('./application-entry-point-6dc9ec3c.cjs.prod.js');
 var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
 var _styled = require('@emotion/styled/base');
 var _pt = require('prop-types');
@@ -24,7 +24,6 @@ var applicationShellConnectors = require('@commercetools-frontend/application-sh
 var applicationComponents = require('@commercetools-frontend/application-components');
 var reactNotifications = require('@commercetools-frontend/react-notifications');
 var i18n = require('@commercetools-frontend/i18n');
-var designSystem = require('@commercetools-uikit/design-system');
 var constants = require('./constants-9ffc458b.cjs.prod.js');
 var uuid = require('uuid');
 var _URL = require('@babel/runtime-corejs3/core-js-stable/url');
@@ -43,6 +42,7 @@ var oidc = require('./oidc-d13fc045.cjs.prod.js');
 var qss = require('qss');
 var jwtDecode = require('jwt-decode');
 var FailedAuthenticationSVG = require('@commercetools-frontend/assets/images/locked-diamond.svg');
+var designSystem = require('@commercetools-uikit/design-system');
 var notifications = require('@commercetools-uikit/notifications');
 var Spacings = require('@commercetools-uikit/spacings');
 var Card = require('@commercetools-uikit/card');
@@ -95,6 +95,7 @@ var MissingImageSvg = require('@commercetools-frontend/assets/images/diagonal-li
 var permissions = require('@commercetools-frontend/permissions');
 var throttle = require('lodash/throttle');
 var urlUtils = require('@commercetools-frontend/url-utils');
+require('@commercetools-uikit/design-system/materials/resets.css');
 var _someInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/some');
 var actionsGlobal = require('@commercetools-frontend/actions-global');
 require('@commercetools-frontend/application-config/ssr');
@@ -241,6 +242,10 @@ var getDataAttribute = function getDataAttribute(node, key) {
   }
 
   return undefined;
+};
+
+var isGtmEnabled = function isGtmEnabled() {
+  return window.dataLayer && window.app.trackingGtm && window.app.trackingGtm !== 'null';
 }; // The way that tracking works is like so:
 //
 // `data-track-component`: used to set up the hierarchy of the tracking ID.
@@ -305,7 +310,7 @@ var trackTiming = function trackTiming(_ref3) {
       value = _ref3.value,
       label = _ref3.label;
 
-  if (window.dataLayer && window.app.trackingGtm) {
+  if (isGtmEnabled()) {
     logTracking({
       variable: variable,
       value: value,
@@ -323,17 +328,17 @@ var trackTiming = function trackTiming(_ref3) {
 }; // Track custom dimensions
 
 var trackApplicationName = function trackApplicationName(applicationName) {
-  if (window.dataLayer && window.app.trackingGtm) window.dataLayer.push({
+  if (isGtmEnabled()) window.dataLayer.push({
     applicationName: applicationName
   });
 };
 var trackProjectKey = function trackProjectKey(projectKey) {
-  if (window.dataLayer && window.app.trackingGtm && projectKey) window.dataLayer.push({
+  if (isGtmEnabled() && projectKey) window.dataLayer.push({
     projectKey: projectKey
   });
 };
 var trackUserBusinessRole = function trackUserBusinessRole(userBusinessRole) {
-  if (window.dataLayer && window.app.trackingGtm && userBusinessRole) {
+  if (isGtmEnabled() && userBusinessRole) {
     window.dataLayer.push({
       userBusinessRole: userBusinessRole
     });
@@ -436,12 +441,12 @@ var boot = function boot(trackingEventList) {
   });
 };
 var updateUser = function updateUser(userId) {
-  if (window.dataLayer && window.app.trackingGtm) window.dataLayer.push({
+  if (isGtmEnabled()) window.dataLayer.push({
     userId: userId
   });
 };
 var stopTrackingUser = function stopTrackingUser() {
-  if (window.dataLayer && window.app.trackingGtm) window.dataLayer.push({
+  if (isGtmEnabled()) window.dataLayer.push({
     userId: undefined
   });
 };
@@ -2387,19 +2392,19 @@ var LocaleSwitcher = function LocaleSwitcher(props) {
 LocaleSwitcher.propTypes = {};
 
 var ProjectNotFound = /*#__PURE__*/react.lazy(function () {
-  return Promise.resolve().then(function () { return require('./project-not-found-18ac7cda.cjs.prod.js'
+  return Promise.resolve().then(function () { return require('./project-not-found-946204ee.cjs.prod.js'
   /* webpackChunkName: "project-not-found" */
   ); });
 });
 
 var ProjectExpired = /*#__PURE__*/react.lazy(function () {
-  return Promise.resolve().then(function () { return require('./project-expired-35706f6f.cjs.prod.js'
+  return Promise.resolve().then(function () { return require('./project-expired-14847008.cjs.prod.js'
   /* webpackChunkName: "project-expired" */
   ); });
 });
 
 var ProjectNotInitialized = /*#__PURE__*/react.lazy(function () {
-  return Promise.resolve().then(function () { return require('./project-not-initialized-6b2644dc.cjs.prod.js'
+  return Promise.resolve().then(function () { return require('./project-not-initialized-7f0124c9.cjs.prod.js'
   /* webpackChunkName: "project-not-initialized" */
   ); });
 });
@@ -2446,7 +2451,7 @@ var RedirectToProjectCreate = function RedirectToProjectCreate() {
 RedirectToProjectCreate.displayName = 'RedirectToProjectCreate';
 
 var ProjectSuspended = /*#__PURE__*/react.lazy(function () {
-  return Promise.resolve().then(function () { return require('./project-suspended-3a5f6bb2.cjs.prod.js'
+  return Promise.resolve().then(function () { return require('./project-suspended-6f575ef2.cjs.prod.js'
   /* webpackChunkName: "project-suspended" */
   ); });
 });
@@ -2646,7 +2651,8 @@ var useAllMenuFeatureToggles = function useAllMenuFeatureToggles() {
  *   fetched from LaunchDarkly (without default values flopflip will default
  *   them to off until fetched).
  */
-var FLAGS = {};
+var UI_REDESIGN = 'uiRedesign';
+var FLAGS = _defineProperty({}, UI_REDESIGN, false);
 
 function ownKeys$5(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; }
 
@@ -2773,6 +2779,13 @@ var SetupFlopFlipProvider = function SetupFlopFlipProvider(props) {
 SetupFlopFlipProvider.propTypes = {};
 SetupFlopFlipProvider.displayName = 'SetupFlopFlipProvider';
 
+var ThemeSwitcher = function ThemeSwitcher() {
+  var isNewThemeEnabled = reactBroadcast.useFeatureToggle(UI_REDESIGN);
+  return jsxRuntime.jsx(designSystem.ThemeProvider, {
+    theme: isNewThemeEnabled ? 'test' : 'default'
+  });
+};
+
 /**
  * This component will let gtm know if any information about the user has
  * changed.
@@ -3121,7 +3134,7 @@ var compiledStyles = {
     "fixed-menu": "navbar-mod__fixed-menu___42tD9"
   }
 };
-var styles = compiledStyles.jsonMap;
+var styles$1 = compiledStyles.jsonMap;
 
 // The icon is expected to be the `svg` document as a string.
 // For backwards compatibility purposes, we still support the legacy "icon name",
@@ -3201,7 +3214,7 @@ IconSwitcher.displayName = 'IconSwitcher';
 var MenuExpander = function MenuExpander(props) {
   var gtmTracking = react.useContext(GtmContext);
   return jsxRuntime.jsx("li", {
-    className: classnames__default["default"](styles['list-item'], styles.expander, _defineProperty({}, styles.hidden, !props.isVisible)),
+    className: classnames__default["default"](styles$1['list-item'], styles$1.expander, _defineProperty({}, styles$1.hidden, !props.isVisible)),
     children: jsxRuntime.jsx("div", {
       onClick: function onClick(event) {
         var _trackingEvents = trackingEvents$1[props.isMenuOpen ? 'collapseMainNav' : 'expandMainNav'],
@@ -3211,7 +3224,7 @@ var MenuExpander = function MenuExpander(props) {
         gtmTracking.track(action, category, label);
         props.onClick(event);
       },
-      className: styles['expand-icon'],
+      className: styles$1['expand-icon'],
       "data-testid": "menu-expander",
       children: jsxRuntime.jsx(icons.BackIcon, {
         color: "surface",
@@ -3232,7 +3245,7 @@ var MenuGroup = function MenuGroup(props) {
     "data-testid": "group-".concat(props.id),
     role: "menu",
     "aria-expanded": isSublistActiveWhileIsMenuExpanded || isSublistActiveWhileIsMenuCollapsed,
-    className: classnames__default["default"](_defineProperty({}, styles.list, props.level === 1), _defineProperty({}, styles.sublist, props.level === 2), _defineProperty({}, styles['sublist-no-children'], props.level === 2 && !props.children), _defineProperty({}, styles['sublist-expanded__active'], isSublistActiveWhileIsMenuExpanded), _defineProperty({}, styles['sublist-collapsed__active'], isSublistActiveWhileIsMenuCollapsed), _defineProperty({}, styles.sublist__inactive, !isSublistActiveWhileIsMenuCollapsed)),
+    className: classnames__default["default"](_defineProperty({}, styles$1.list, props.level === 1), _defineProperty({}, styles$1.sublist, props.level === 2), _defineProperty({}, styles$1['sublist-no-children'], props.level === 2 && !props.children), _defineProperty({}, styles$1['sublist-expanded__active'], isSublistActiveWhileIsMenuExpanded), _defineProperty({}, styles$1['sublist-collapsed__active'], isSublistActiveWhileIsMenuCollapsed), _defineProperty({}, styles$1.sublist__inactive, !isSublistActiveWhileIsMenuCollapsed)),
     children: props.children
   });
 };
@@ -3245,12 +3258,12 @@ var MenuItem = function MenuItem(props) {
 
   return jsxRuntime.jsx("li", {
     role: "menu-item",
-    className: classnames__default["default"](styles['list-item'], (_classnames8 = {}, _defineProperty(_classnames8, styles.item__active, props.isActive), _defineProperty(_classnames8, styles['item_menu-collapsed'], !props.isMenuOpen), _defineProperty(_classnames8, styles['item__no-submenu'], !props.hasSubmenu), _classnames8)),
+    className: classnames__default["default"](styles$1['list-item'], (_classnames8 = {}, _defineProperty(_classnames8, styles$1.item__active, props.isActive), _defineProperty(_classnames8, styles$1['item_menu-collapsed'], !props.isMenuOpen), _defineProperty(_classnames8, styles$1['item__no-submenu'], !props.hasSubmenu), _classnames8)),
     onClick: props.onClick,
     onMouseEnter: props.onMouseEnter,
     onMouseLeave: props.onMouseLeave,
     children: jsxRuntime.jsx("div", {
-      className: styles['item-link'],
+      className: styles$1['item-link'],
       children: props.children
     })
   });
@@ -3273,8 +3286,8 @@ var MenuItemLink = function MenuItemLink(props) {
     return jsxRuntime.jsx(reactRouterDom.NavLink, {
       to: props.linkTo,
       exact: props.exactMatch,
-      activeClassName: styles.highlighted,
-      className: styles['text-link'],
+      activeClassName: styles$1.highlighted,
+      className: styles$1['text-link'],
       onClick: function onClick(event) {
         if (props.linkTo && props.useFullRedirectsForLinks) {
           event.preventDefault();
@@ -3300,9 +3313,9 @@ MenuItemLink.defaultProps = menuItemLinkDefaultProps; // This component just ren
 
 var MenuItemDivider = function MenuItemDivider() {
   return jsxRuntime.jsx("div", {
-    className: styles['divider-first-item'],
+    className: styles$1['divider-first-item'],
     children: jsxRuntime.jsx("div", {
-      className: styles['divider-second-item']
+      className: styles$1['divider-second-item']
     })
   });
 };
@@ -3451,16 +3464,16 @@ var ApplicationMenu = function ApplicationMenu(props) {
           useFullRedirectsForLinks: props.useFullRedirectsForLinks,
           onClick: props.onMenuItemClick,
           children: jsxRuntime.jsxs("div", {
-            className: styles['item-icon-text'],
+            className: styles$1['item-icon-text'],
             children: [jsxRuntime.jsx("div", {
-              className: styles.icon,
+              className: styles$1.icon,
               children: jsxRuntime.jsx(IconSwitcher, {
                 icon: props.menu.icon,
                 size: "scale",
                 color: getIconColor(props.isActive || isMainMenuRouteActive, Boolean(props.menu.shouldRenderDivider))
               })
             }), jsxRuntime.jsx("div", {
-              className: styles.title,
+              className: styles$1.title,
               "aria-owns": "group-".concat(props.menu.key),
               children: jsxRuntime.jsx(MenuLabel, {
                 labelAllLocales: props.menu.labelAllLocales,
@@ -3487,9 +3500,9 @@ var ApplicationMenu = function ApplicationMenu(props) {
               menuVisibilities: props.menuVisibilities,
               namesOfMenuVisibilities: submenu.menuVisibility ? [submenu.menuVisibility] : undefined,
               children: jsxRuntime.jsx("li", {
-                className: styles['sublist-item'],
+                className: styles$1['sublist-item'],
                 children: jsxRuntime.jsx("div", {
-                  className: styles.text,
+                  className: styles$1.text,
                   children: jsxRuntime.jsx(MenuItemLink, {
                     linkTo: _concatInstanceProperty__default["default"](_context9 = "/".concat(props.projectKey, "/")).call(_context9, submenu.uriPath),
                     exactMatch: true,
@@ -3519,7 +3532,7 @@ var NavBarLayout = /*#__PURE__*/react.forwardRef(function (props, ref) {
       styles: /*#__PURE__*/react$2.css(compiledStyles.global, ";" + ("" ), "" )
     }), jsxRuntime.jsx("nav", {
       ref: ref,
-      className: styles['left-navigation'],
+      className: styles$1['left-navigation'],
       "data-test": "left-navigation",
       "data-testid": "left-navigation",
       "data-track-component": "Navigation",
@@ -3565,7 +3578,7 @@ var NavBar = function NavBar(props) {
       id: "main",
       level: 1,
       children: [jsxRuntime.jsx("div", {
-        className: styles['scrollable-menu'],
+        className: styles$1['scrollable-menu'],
         children: _mapInstanceProperty__default["default"](allApplicationNavbarMenu).call(allApplicationNavbarMenu, function (menu) {
           var menuType = 'scrollable';
           var itemIndex = "".concat(menuType, "-").concat(menu.key);
@@ -3587,7 +3600,7 @@ var NavBar = function NavBar(props) {
           }, menu.key);
         })
       }), jsxRuntime.jsxs("div", {
-        className: styles['fixed-menu'],
+        className: styles$1['fixed-menu'],
         children: [jsxRuntime.jsx(MenuItem, {
           hasSubmenu: false,
           isActive: false,
@@ -3606,15 +3619,15 @@ var NavBar = function NavBar(props) {
             rel: "noopener noreferrer",
             target: "_blank",
             children: jsxRuntime.jsxs("div", {
-              className: styles['item-icon-text'],
+              className: styles$1['item-icon-text'],
               children: [jsxRuntime.jsx("div", {
-                className: styles.icon,
+                className: styles$1.icon,
                 children: jsxRuntime.jsx(icons.SupportIcon, {
                   size: "scale",
                   color: getIconColor(activeItemIndex === 'fixed-support', true)
                 })
               }), jsxRuntime.jsx("div", {
-                className: styles.title,
+                className: styles$1.title,
                 children: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$3({}, messages['NavBar.MCSupport.title']))
               })]
             })
@@ -3651,7 +3664,7 @@ var LoadingNavBar = function LoadingNavBar() {
               return undefined;
             },
             children: jsxRuntime.jsx("div", {
-              className: styles['loading-dot-container'],
+              className: styles$1['loading-dot-container'],
               "data-testid": "dot-container-".concat(index),
               children: jsxRuntime.jsx(LoadingPlaceholder, {
                 shape: "dot",
@@ -3691,7 +3704,7 @@ var pimIndexerStates = {
 };
 
 var QuickAccess = /*#__PURE__*/react.lazy(function () {
-  return Promise.resolve().then(function () { return require('./quick-access-055999e2.cjs.prod.js'
+  return Promise.resolve().then(function () { return require('./quick-access-3f564da2.cjs.prod.js'
   /* webpackChunkName: "quick-access" */
   ); });
 });
@@ -3946,25 +3959,14 @@ var RedirectToLogout = function RedirectToLogout(props) {
   });
 };
 
-var appStyles = {
-  name: "172jsbd",
-  styles: "#app{height:100%;}"
-} ;
-var gridStyles = {
-  name: "r6l3ky",
-  styles: ".row clear:both;float:left;width:100%"
+var styles = {
+  name: "1prreal",
+  styles: "html,body{font-size:var(--font-size-for-body);height:100vh;}#app{height:100%;}"
 } ;
-var resetStyles = /*#__PURE__*/react$2.css("*,*::before,*::after{box-sizing:inherit;}html,body{color:", designSystem.customProperties.colorSolid, ";font-family:'Open Sans',sans-serif;font-size:13px;margin:0;padding:0;height:100vh;}html{box-sizing:border-box;}h1,h2,h3,h4,h5,h6{margin:0;}button{cursor:pointer;}a{color:", designSystem.customProperties.colorPrimary, ";cursor:pointer;text-decoration:none;transition:color 0.2s ease-in;}p{color:", designSystem.customProperties.colorSolid, ";margin:0;}" + ("" ), "" );
 
 var GlobalStyles = function GlobalStyles() {
-  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [jsxRuntime.jsx(react$2.Global, {
-      styles: appStyles
-    }), jsxRuntime.jsx(react$2.Global, {
-      styles: gridStyles
-    }), jsxRuntime.jsx(react$2.Global, {
-      styles: resetStyles
-    })]
+  return jsxRuntime.jsx(react$2.Global, {
+    styles: styles
   });
 };
 
@@ -4100,7 +4102,7 @@ var RestrictedApplication = function RestrictedApplication(props) {
                 flags: props.featureFlags,
                 defaultFlags: props.defaultFeatureFlags,
                 children: jsxRuntime.jsxs(jsxRuntime.Fragment, {
-                  children: [jsxRuntime.jsx(VersionTracker, {}), jsxRuntime.jsx(applicationEntryPoint.RequestsInFlightLoader, {}), jsxRuntime.jsx(sentry.SentryUserTracker, {
+                  children: [jsxRuntime.jsx(ThemeSwitcher, {}), jsxRuntime.jsx(VersionTracker, {}), jsxRuntime.jsx(applicationEntryPoint.RequestsInFlightLoader, {}), jsxRuntime.jsx(sentry.SentryUserTracker, {
                     user: user !== null && user !== void 0 ? user : undefined
                   }), jsxRuntime.jsx(GtmUserTracker, {
                     user: user
@@ -4299,9 +4301,7 @@ var ApplicationShell = function ApplicationShell(props) {
   }, []); // <-- run only once, when component mounts
 
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [jsxRuntime.jsx(designSystem.ThemeProvider, {
-      theme: "default"
-    }), jsxRuntime.jsx(GlobalStyles, {}), jsxRuntime.jsx(ApplicationShellProvider, {
+    children: [jsxRuntime.jsx(GlobalStyles, {}), jsxRuntime.jsx(ApplicationShellProvider, {
       apolloClient: props.apolloClient,
       environment: props.environment,
       trackingEventList: props.trackingEventList,