@commercetools-frontend/application-shell 21.3.4 → 21.3.5

package/dist/{application-entry-point-d0d51a20.cjs.dev.js → application-entry-point-2fa512ec.cjs.dev.js}

@@ -101,7 +101,7 @@ var _pt__default = /*#__PURE__*/_interopDefault(_pt);
 var invariant__default = /*#__PURE__*/_interopDefault(invariant);
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "21.3.4";
+var version = "21.3.5";
 
 var isAddNotificationErrorAction = function isAddNotificationErrorAction(action) {
   var errorAction = action;

package/dist/{application-entry-point-1dc8d5f7.cjs.prod.js → application-entry-point-dae0d1ac.cjs.prod.js}

@@ -100,7 +100,7 @@ var _JSON$stringify__default = /*#__PURE__*/_interopDefault(_JSON$stringify);
 var invariant__default = /*#__PURE__*/_interopDefault(invariant);
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "21.3.4";
+var version = "21.3.5";
 
 var isAddNotificationErrorAction = function isAddNotificationErrorAction(action) {
   var errorAction = action;

package/dist/{application-entry-point-f27fbd4a.esm.js → application-entry-point-f7f932ac.esm.js}

@@ -60,7 +60,7 @@ import { entryPointUriPathToPermissionKeys } from '@commercetools-frontend/appli
 import { useApplicationContext } from '@commercetools-frontend/application-shell-connectors';
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "21.3.4";
+var version = "21.3.5";
 
 var isAddNotificationErrorAction = function isAddNotificationErrorAction(action) {
   var errorAction = action;

package/dist/commercetools-frontend-application-shell.cjs.dev.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var applicationEntryPoint = require('./application-entry-point-d0d51a20.cjs.dev.js');
-var dist_commercetoolsFrontendApplicationShell = require('./index-95fb9489.cjs.dev.js');
+var applicationEntryPoint = require('./application-entry-point-2fa512ec.cjs.dev.js');
+var dist_commercetoolsFrontendApplicationShell = require('./index-93c8f750.cjs.dev.js');
 require('@babel/runtime-corejs3/core-js-stable/instance/filter');
 require('uuid');
 require('@babel/runtime-corejs3/core-js-stable/url');

package/dist/commercetools-frontend-application-shell.cjs.prod.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var applicationEntryPoint = require('./application-entry-point-1dc8d5f7.cjs.prod.js');
-var dist_commercetoolsFrontendApplicationShell = require('./index-bc2d17b9.cjs.prod.js');
+var applicationEntryPoint = require('./application-entry-point-dae0d1ac.cjs.prod.js');
+var dist_commercetoolsFrontendApplicationShell = require('./index-32cd533b.cjs.prod.js');
 require('@babel/runtime-corejs3/core-js-stable/instance/filter');
 require('uuid');
 require('@babel/runtime-corejs3/core-js-stable/url');

package/dist/commercetools-frontend-application-shell.esm.js

@@ -1,5 +1,5 @@
-export { p as RouteCatchAll, q as applyDefaultMiddlewares, f as createApolloClient, n as selectProjectKeyFromUrl, t as selectUserId, v as version } from './application-entry-point-f27fbd4a.esm.js';
-export { A as ApplicationShell, a as ApplicationShellProvider, C as ConfigureIntlProvider, G as GtmContext, b as GtmUserLogoutTracker, I as InjectReducers, S as SetupFlopFlipProvider, c as createApolloContextForProxyForwardTo, s as setupGlobalErrorListener, d as useMcLazyQuery, e as useMcMutation, u as useMcQuery } from './index-6883bbec.esm.js';
+export { p as RouteCatchAll, q as applyDefaultMiddlewares, f as createApolloClient, n as selectProjectKeyFromUrl, t as selectUserId, v as version } from './application-entry-point-f7f932ac.esm.js';
+export { A as ApplicationShell, a as ApplicationShellProvider, C as ConfigureIntlProvider, G as GtmContext, b as GtmUserLogoutTracker, I as InjectReducers, S as SetupFlopFlipProvider, c as createApolloContextForProxyForwardTo, s as setupGlobalErrorListener, d as useMcLazyQuery, e as useMcMutation, u as useMcQuery } from './index-82d5b1c3.esm.js';
 import '@babel/runtime-corejs3/core-js-stable/instance/filter';
 import 'uuid';
 import '@babel/runtime-corejs3/core-js-stable/url';

package/dist/declarations/src/components/application-shell/application-shell.d.ts

@@ -4,7 +4,7 @@ import type { NormalizedCacheObject } from '@apollo/client';
 import type { TApplicationContext } from '@commercetools-frontend/application-shell-connectors';
 import type { TAsyncLocaleDataProps } from '@commercetools-frontend/i18n';
 import type { TrackingList } from '../../utils/gtm';
-import { ReactNode, SyntheticEvent } from 'react';
+import { type ReactNode, type SyntheticEvent } from 'react';
 import { ApolloClient } from '@apollo/client';
 declare type Props<AdditionalEnvironmentProperties extends {}> = {
     apolloClient?: ApolloClient<NormalizedCacheObject>;

package/dist/declarations/src/components/navbar/tracking-events.d.ts

@@ -0,0 +1,18 @@
+declare const _default: {
+    readonly collapseMainNav: {
+        readonly action: "CollapseMainNav";
+        readonly category: "Main-Navigation";
+        readonly label: "Collapse Main Navigation";
+    };
+    readonly expandMainNav: {
+        readonly action: "ExpandMainNav";
+        readonly category: "Main-Navigation";
+        readonly label: "Expand Main Navigation";
+    };
+    readonly goToSupport: {
+        readonly action: "GoToSupport";
+        readonly category: "Main-Navigation";
+        readonly label: "Go to Support";
+    };
+};
+export default _default;

package/dist/{index-bc2d17b9.cjs.prod.js → index-32cd533b.cjs.prod.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var applicationEntryPoint = require('./application-entry-point-1dc8d5f7.cjs.prod.js');
+var applicationEntryPoint = require('./application-entry-point-dae0d1ac.cjs.prod.js');
 var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
 var _styled = require('@emotion/styled/base');
 var _pt = require('prop-types');
@@ -2325,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-0c73ec63.cjs.prod.js'
+  return Promise.resolve().then(function () { return require('./project-not-found-998fdc8e.cjs.prod.js'
   /* webpackChunkName: "project-not-found" */
   ); });
 });
 
 var ProjectExpired = /*#__PURE__*/react.lazy(function () {
-  return Promise.resolve().then(function () { return require('./project-expired-07c02144.cjs.prod.js'
+  return Promise.resolve().then(function () { return require('./project-expired-59cb3714.cjs.prod.js'
   /* webpackChunkName: "project-expired" */
   ); });
 });
 
 var ProjectNotInitialized = /*#__PURE__*/react.lazy(function () {
-  return Promise.resolve().then(function () { return require('./project-not-initialized-37ea5e31.cjs.prod.js'
+  return Promise.resolve().then(function () { return require('./project-not-initialized-aca1e34f.cjs.prod.js'
   /* webpackChunkName: "project-not-initialized" */
   ); });
 });
@@ -2384,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-a74e62db.cjs.prod.js'
+  return Promise.resolve().then(function () { return require('./project-suspended-e5827cf6.cjs.prod.js'
   /* webpackChunkName: "project-suspended" */
   ); });
 });
@@ -3000,6 +3000,24 @@ var useNavbarStateManager = function useNavbarStateManager(props) {
   });
 };
 
+var trackingEvents$1 = {
+  collapseMainNav: {
+    action: 'CollapseMainNav',
+    category: 'Main-Navigation',
+    label: 'Collapse Main Navigation'
+  },
+  expandMainNav: {
+    action: 'ExpandMainNav',
+    category: 'Main-Navigation',
+    label: 'Expand Main Navigation'
+  },
+  goToSupport: {
+    action: 'GoToSupport',
+    category: 'Main-Navigation',
+    label: 'Go to Support'
+  }
+};
+
 var _excluded = ["icon"];
 
 function ownKeys$2(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; }
@@ -3120,10 +3138,18 @@ IconSwitcher.propTypes = {};
 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)),
     children: jsxRuntime.jsx("div", {
-      onClick: props.onClick,
+      onClick: function onClick(event) {
+        var _trackingEvents = trackingEvents$1[props.isMenuOpen ? 'collapseMainNav' : 'expandMainNav'],
+            action = _trackingEvents.action,
+            category = _trackingEvents.category,
+            label = _trackingEvents.label;
+        gtmTracking.track(action, category, label);
+        props.onClick(event);
+      },
       className: styles['expand-icon'],
       "data-testid": "menu-expander",
       children: jsxRuntime.jsx(icons.BackIcon, {
@@ -3457,6 +3483,7 @@ var NavBar = function NavBar(props) {
 
   var useFullRedirectsForLinks = Boolean(props.environment.useFullRedirectsForLinks);
   var location = reactRouterDom.useLocation();
+  var gtmTracking = react.useContext(GtmContext);
   var projectPermissions = react.useMemo(function () {
     var _props$project, _props$project2, _props$project3;
 
@@ -3494,7 +3521,8 @@ var NavBar = function NavBar(props) {
             menuVisibilities: menuVisibilities,
             applicationLocale: props.applicationLocale,
             projectKey: props.projectKey,
-            useFullRedirectsForLinks: useFullRedirectsForLinks
+            useFullRedirectsForLinks: useFullRedirectsForLinks,
+            onMenuItemClick: props.onMenuItemClick
           }, menu.key);
         })
       }), jsxRuntime.jsxs("div", {
@@ -3504,6 +3532,8 @@ var NavBar = function NavBar(props) {
           isActive: false,
           isMenuOpen: isMenuOpen,
           onClick: function onClick() {
+            gtmTracking.track(trackingEvents$1.goToSupport.action, trackingEvents$1.goToSupport.category, trackingEvents$1.goToSupport.label);
+
             _handleToggleItem('fixed-support');
           },
           onMouseEnter: isMenuOpen ? undefined : function () {
@@ -3530,7 +3560,8 @@ var NavBar = function NavBar(props) {
           })
         }), jsxRuntime.jsx(MenuExpander, {
           isVisible: isExpanderVisible,
-          onClick: handleToggleMenu
+          onClick: handleToggleMenu,
+          isMenuOpen: isMenuOpen
         })]
       })]
     })
@@ -3599,7 +3630,7 @@ var pimIndexerStates = {
 };
 
 var QuickAccess = /*#__PURE__*/react.lazy(function () {
-  return Promise.resolve().then(function () { return require('./quick-access-2b0cce3b.cjs.prod.js'
+  return Promise.resolve().then(function () { return require('./quick-access-09abcedb.cjs.prod.js'
   /* webpackChunkName: "quick-access" */
   ); });
 });
@@ -3914,6 +3945,12 @@ var RestrictedApplication = function RestrictedApplication(props) {
   // ok-ish but we might want to look into a more performant solution.
 
   var location = reactRouterDom.useLocation();
+  var notificationsGlobalRef = react.useRef(null);
+  var notificationsPageRef = react.useRef(null);
+  var layoutRefs = react.useRef({
+    notificationsGlobalRef: notificationsGlobalRef,
+    notificationsPageRef: notificationsPageRef
+  });
   return jsxRuntime.jsx(FetchUser, {
     children: function children(_ref6) {
       var isLoadingUser = _ref6.isLoading,
@@ -3992,6 +4029,7 @@ var RestrictedApplication = function RestrictedApplication(props) {
                     role: "application-layout",
                     css: /*#__PURE__*/react$2.css("height:100vh;display:grid;grid-template-rows:auto ", constants.DIMENSIONS.header, " 1fr;grid-template-columns:auto 1fr;" + ("" ), "" ),
                     children: [jsxRuntime.jsx("div", {
+                      ref: notificationsGlobalRef,
                       role: "global-notifications",
                       css: _ref5,
                       children: jsxRuntime.jsx(reactNotifications.NotificationsList, {
@@ -4081,16 +4119,21 @@ var RestrictedApplication = function RestrictedApplication(props) {
                       children: jsxRuntime.jsx(ApplicationLoader, {})
                     }) : jsxRuntime.jsxs(MainContainer, {
                       role: "main",
-                      children: [jsxRuntime.jsx(reactNotifications.NotificationsList, {
-                        domain: constants$1.DOMAINS.PAGE
+                      children: [jsxRuntime.jsx("div", {
+                        ref: notificationsPageRef,
+                        children: jsxRuntime.jsx(reactNotifications.NotificationsList, {
+                          domain: constants$1.DOMAINS.PAGE
+                        })
                       }), jsxRuntime.jsx(reactNotifications.NotificationsList, {
                         domain: constants$1.DOMAINS.SIDE
                       }), jsxRuntime.jsxs("div", {
                         css: _ref2,
-                        children: [jsxRuntime.jsx(applicationComponents.PortalsContainer, {
+                        children: [jsxRuntime.jsx(applicationComponents.PortalsContainer // @ts-ignore
+                        , {
+                          ref: layoutRefs,
                           offsetTop: constants.DIMENSIONS.header,
-                          offsetLeft: constants.DIMENSIONS.navMenu,
-                          offsetLeftOnExpandedMenu: constants.DIMENSIONS.navMenuExpanded
+                          offsetLeft: projectKeyFromUrl ? constants.DIMENSIONS.navMenu : '0px',
+                          offsetLeftOnExpandedMenu: projectKeyFromUrl ? constants.DIMENSIONS.navMenuExpanded : '0px'
                         }), jsxRuntime.jsxs(reactRouterDom.Switch, {
                           children: [jsxRuntime.jsx(reactRouterDom.Redirect, {
                             from: "/profile",