@commercetools-frontend/application-shell 22.14.1 → 22.14.3

package/dist/{index-76a06c5f.esm.js → index-35f9f7c2.esm.js}

@@ -72,9 +72,9 @@ import _someInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instanc
 import { showUnexpectedErrorNotification } from '@commercetools-frontend/actions-global';
 
 // NOTE: This string will be replaced on build time with the package version.
-var applicationShellVersion = "22.14.1";
+var applicationShellVersion = "22.14.3";
 
-const RequestsInFlightLoader = /*#__PURE__*/lazy(() => import('./requests-in-flight-loader-788c3b51.esm.js' /* webpackChunkName: "requests-in-flight-loader" */));
+const RequestsInFlightLoader = /*#__PURE__*/lazy(() => import('./requests-in-flight-loader-9400ad17.esm.js' /* webpackChunkName: "requests-in-flight-loader" */));
 
 // Attempt to load the `projectKey` from localStorage
 function selectProjectKeyFromLocalStorage() {
@@ -554,7 +554,7 @@ FetchUser.displayName = 'FetchUser';
 
 const Navbar = /*#__PURE__*/lazy(() => import('./navbar-e4559c93.esm.js' /* webpackChunkName: "navbar" */));
 
-const ProjectContainer = /*#__PURE__*/lazy(() => import('./project-container-ba60ec97.esm.js' /* webpackChunkName: "project-container" */));
+const ProjectContainer = /*#__PURE__*/lazy(() => import('./project-container-8a000259.esm.js' /* webpackChunkName: "project-container" */));
 
 const getSelectedDataLocaleForProject = projectLocales => {
   const cachedDataLocale = window.localStorage.getItem(STORAGE_KEYS.SELECTED_DATA_LOCALE);
@@ -678,7 +678,7 @@ var pimIndexerStates = {
   NOT_INDEXED: 'NOT_INDEXED'
 };
 
-const QuickAccess = /*#__PURE__*/lazy(() => import('./quick-access-17179da4.esm.js' /* webpackChunkName: "quick-access" */));
+const QuickAccess = /*#__PURE__*/lazy(() => import('./quick-access-11418f11.esm.js' /* webpackChunkName: "quick-access" */));
 
 const QuickAccessTrigger = props => {
   const _useState = useState(false),
@@ -767,7 +767,7 @@ QuickAccessTrigger.propTypes = process.env.NODE_ENV !== "production" ? {
 } : {};
 QuickAccessTrigger.displayName = 'QuickAccessTrigger';
 
-const RedirectToLogout = /*#__PURE__*/lazy(() => import('./redirect-to-logout-47da024e.esm.js' /* webpackChunkName: "redirect-to-logout" */));
+const RedirectToLogout = /*#__PURE__*/lazy(() => import('./redirect-to-logout-7fb8c085.esm.js' /* webpackChunkName: "redirect-to-logout" */));
 
 const RedirectToProjectCreate = /*#__PURE__*/lazy(() => import('./redirect-to-project-create-c5323504.esm.js' /* webpackChunkName: "redirect-to-project-create" */));
 
@@ -917,7 +917,7 @@ const ThemeSwitcher = () => {
   });
 };
 
-const VersionTracker = /*#__PURE__*/lazy(() => import('./version-tracker-d42aafd6.esm.js' /* webpackChunkName: "version-tracker" */));
+const VersionTracker = /*#__PURE__*/lazy(() => import('./version-tracker-d3961598.esm.js' /* webpackChunkName: "version-tracker" */));
 
 function ownKeys$5(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context2 = ownKeys$5(Object(t), !0)).call(_context2, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context3 = ownKeys$5(Object(t))).call(_context3, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -1422,7 +1422,7 @@ const hasCachedAuthenticationState = () => {
   return window.localStorage.getItem(STORAGE_KEYS.IS_AUTHENTICATED) === 'true';
 };
 
-const OidcCallback = /*#__PURE__*/lazy(() => import('./oidc-callback-758e96ec.esm.js' /* webpackChunkName: "oidc-callback" */));
+const OidcCallback = /*#__PURE__*/lazy(() => import('./oidc-callback-860db268.esm.js' /* webpackChunkName: "oidc-callback" */));
 
 function ownKeys$3(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys$3(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys$3(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -1660,7 +1660,7 @@ ApplicationShell.propTypes = process.env.NODE_ENV !== "production" ? {
 ApplicationShell.displayName = 'ApplicationShell';
 ApplicationShell.version = applicationShellVersion;
 
-const CustomViewDevHost = /*#__PURE__*/lazy(() => import('./custom-view-dev-host-cbf108c9.esm.js' /* webpackChunkName: "custom-view-dev-host" */));
+const CustomViewDevHost = /*#__PURE__*/lazy(() => import('./custom-view-dev-host-945f058b.esm.js' /* webpackChunkName: "custom-view-dev-host" */));
 
 function ownKeys$1(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys$1(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys$1(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -1710,7 +1710,8 @@ function CustomViewShellAuthenticated(props) {
               environment: props.environment,
               children: jsxs(Fragment, {
                 children: [jsx(ThemeProvider, {
-                  theme: "default"
+                  theme: "default",
+                  themeOverrides: themesOverrides.default
                 }), jsx(FetchProject, {
                   projectKey: props.projectKey,
                   children: _ref3 => {
@@ -1749,6 +1750,35 @@ CustomViewShellAuthenticated.propTypes = process.env.NODE_ENV !== "production" ?
 } : {};
 
 const browserLocale = getBrowserLocale(window);
+function NotificationsContainer(props) {
+  return jsxs(Fragment, {
+    children: [jsxs("div", {
+      ref: props.notificationsGlobalRef,
+      role: "region",
+      "aria-live": "polite",
+      style: {
+        gridRow: 1,
+        gridColumn: '1/3'
+      },
+      children: [jsx("div", {
+        id: "above-top-navigation"
+      }), jsx(NotificationsList, {
+        domain: DOMAINS.GLOBAL
+      })]
+    }), jsx("div", {
+      ref: props.notificationsPageRef,
+      children: jsx(NotificationsList, {
+        domain: DOMAINS.PAGE
+      })
+    }), jsx(NotificationsList, {
+      domain: DOMAINS.SIDE
+    })]
+  });
+}
+NotificationsContainer.propTypes = process.env.NODE_ENV !== "production" ? {
+  notificationsGlobalRef: _pt.any.isRequired,
+  notificationsPageRef: _pt.any.isRequired
+} : {};
 function StrictModeEnablement(props) {
   if (props.enableReactStrictMode) {
     return jsx(StrictMode, {
@@ -1760,10 +1790,17 @@ function StrictModeEnablement(props) {
     });
   }
 }
+
+/*
+  During e2e tests, the Custom View template is built in production mode but still runs on localhost.
+  Checking for local production mode is necessary for applying the development host URL,
+  creating an environment for testing interaction with the Custom View template.
+*/
 StrictModeEnablement.propTypes = process.env.NODE_ENV !== "production" ? {
   enableReactStrictMode: _pt.bool,
   children: _pt.node
 } : {};
+const isLocalProdMode = process.env.NODE_ENV === 'production' && window.app.env === 'development';
 function CustomViewShell(props) {
   var _window$app$__DEVELOP;
   const _useState = useState(),
@@ -1771,6 +1808,12 @@ function CustomViewShell(props) {
     hostContext = _useState2[0],
     setHostContext = _useState2[1];
   const iFrameCommunicationPort = useRef();
+  const notificationsGlobalRef = useRef(null);
+  const notificationsPageRef = useRef(null);
+  const layoutRefs = useRef({
+    notificationsGlobalRef,
+    notificationsPageRef
+  });
   const hostMessageHandler = useCallback(event => {
     if (event.data.eventName === CUSTOM_VIEWS_EVENTS_NAMES.CUSTOM_VIEW_INITIALIZATION) {
       setHostContext(event.data.eventData.context);
@@ -1814,41 +1857,54 @@ function CustomViewShell(props) {
       showLogo: true
     });
   }
-  const hostUrl = process.env.NODE_ENV === 'development' ? (_window$app$__DEVELOP = window.app.__DEVELOPMENT__) === null || _window$app$__DEVELOP === void 0 ? void 0 : _window$app$__DEVELOP.customViewHostUrl : hostContext.hostUrl;
-  return jsx(ApplicationShellProvider, {
-    environment: window.app,
-    applicationMessages: props.applicationMessages,
-    apolloClient: props.apolloClient,
-    children: _ref => {
-      let isAuthenticated = _ref.isAuthenticated;
-      if (isAuthenticated) {
-        return jsx(CustomViewContextProvider, {
-          hostUrl: hostUrl,
-          customViewConfig: hostContext.customViewConfig,
-          children: jsx(CustomViewShellAuthenticated, {
-            dataLocale: hostContext.dataLocale,
-            environment: window.app,
-            messages: props.applicationMessages,
-            projectKey: hostContext.projectKey,
+  const hostUrl = process.env.NODE_ENV === 'development' || isLocalProdMode ? (_window$app$__DEVELOP = window.app.__DEVELOPMENT__) === null || _window$app$__DEVELOP === void 0 ? void 0 : _window$app$__DEVELOP.customViewHostUrl : hostContext.hostUrl;
+  return jsxs(Fragment, {
+    children: [jsx(GlobalStyles, {}), jsx(ApplicationShellProvider, {
+      environment: window.app,
+      applicationMessages: props.applicationMessages,
+      apolloClient: props.apolloClient,
+      children: _ref => {
+        let isAuthenticated = _ref.isAuthenticated;
+        if (isAuthenticated) {
+          var _context;
+          return jsx(CustomViewContextProvider, {
+            hostUrl: hostUrl,
             customViewConfig: hostContext.customViewConfig,
-            children: props.children
-          })
-        });
-      }
-      return jsx(AsyncLocaleData, {
-        locale: browserLocale,
-        applicationMessages: props.applicationMessages,
-        children: _ref2 => {
-          let locale = _ref2.locale,
-            messages = _ref2.messages;
-          return jsx(ConfigureIntlProvider, {
-            locale: locale,
-            messages: messages,
-            children: jsx(PageUnauthorized, {})
+            children: jsxs(CustomViewShellAuthenticated, {
+              dataLocale: hostContext.dataLocale,
+              environment: window.app,
+              messages: props.applicationMessages,
+              projectKey: hostContext.projectKey,
+              customViewConfig: hostContext.customViewConfig,
+              children: [jsx(PortalsContainer
+              // @ts-ignore
+              , {
+                ref: layoutRefs
+              }), jsx(NotificationsContainer, {
+                notificationsGlobalRef: notificationsGlobalRef,
+                notificationsPageRef: notificationsPageRef
+              }), jsx(Route, {
+                path: _concatInstanceProperty(_context = "/custom-views/".concat(hostContext.customViewConfig.id, "/projects/")).call(_context, hostContext.projectKey),
+                children: props.children
+              })]
+            })
           });
         }
-      });
-    }
+        return jsx(AsyncLocaleData, {
+          locale: browserLocale,
+          applicationMessages: props.applicationMessages,
+          children: _ref2 => {
+            let locale = _ref2.locale,
+              messages = _ref2.messages;
+            return jsx(ConfigureIntlProvider, {
+              locale: locale,
+              messages: messages,
+              children: jsx(PageUnauthorized, {})
+            });
+          }
+        });
+      }
+    })]
   });
 }
 CustomViewShell.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -1858,7 +1914,7 @@ CustomViewShell.propTypes = process.env.NODE_ENV !== "production" ? {
   children: _pt.node.isRequired
 } : {};
 const CustomViewShellWrapper = props => {
-  if (process.env.NODE_ENV === 'development' && !props.disableDevHost) {
+  if ((process.env.NODE_ENV === 'development' || isLocalProdMode) && !props.disableDevHost) {
     return jsx(StrictModeEnablement, {
       enableReactStrictMode: props.enableReactStrictMode,
       children: jsx(Suspense, {

package/dist/{index-d07d1e3f.cjs.prod.js → index-c29f8aa0.cjs.prod.js}

@@ -112,9 +112,9 @@ var _JSON$stringify__default = /*#__PURE__*/_interopDefault(_JSON$stringify);
 var _someInstanceProperty__default = /*#__PURE__*/_interopDefault(_someInstanceProperty);
 
 // NOTE: This string will be replaced on build time with the package version.
-var applicationShellVersion = "22.14.1";
+var applicationShellVersion = "22.14.3";
 
-const RequestsInFlightLoader = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./requests-in-flight-loader-a92766d3.cjs.prod.js' /* webpackChunkName: "requests-in-flight-loader" */); }));
+const RequestsInFlightLoader = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./requests-in-flight-loader-7580242c.cjs.prod.js' /* webpackChunkName: "requests-in-flight-loader" */); }));
 
 // Attempt to load the `projectKey` from localStorage
 function selectProjectKeyFromLocalStorage() {
@@ -561,7 +561,7 @@ FetchUser.displayName = 'FetchUser';
 
 const Navbar = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./navbar-be902d73.cjs.prod.js' /* webpackChunkName: "navbar" */); }));
 
-const ProjectContainer = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./project-container-de098f6b.cjs.prod.js' /* webpackChunkName: "project-container" */); }));
+const ProjectContainer = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./project-container-0b7034a5.cjs.prod.js' /* webpackChunkName: "project-container" */); }));
 
 const getSelectedDataLocaleForProject = projectLocales => {
   const cachedDataLocale = window.localStorage.getItem(constants.STORAGE_KEYS.SELECTED_DATA_LOCALE);
@@ -673,7 +673,7 @@ var pimIndexerStates = {
   NOT_INDEXED: 'NOT_INDEXED'
 };
 
-const QuickAccess = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./quick-access-713ed6cf.cjs.prod.js' /* webpackChunkName: "quick-access" */); }));
+const QuickAccess = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./quick-access-ecbaedf9.cjs.prod.js' /* webpackChunkName: "quick-access" */); }));
 
 const QuickAccessTrigger = props => {
   const _useState = react.useState(false),
@@ -760,7 +760,7 @@ const QuickAccessTrigger = props => {
 QuickAccessTrigger.propTypes = {};
 QuickAccessTrigger.displayName = 'QuickAccessTrigger';
 
-const RedirectToLogout = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./redirect-to-logout-ea121e87.cjs.prod.js' /* webpackChunkName: "redirect-to-logout" */); }));
+const RedirectToLogout = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./redirect-to-logout-2418d058.cjs.prod.js' /* webpackChunkName: "redirect-to-logout" */); }));
 
 const RedirectToProjectCreate = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./redirect-to-project-create-2266c427.cjs.prod.js' /* webpackChunkName: "redirect-to-project-create" */); }));
 
@@ -886,7 +886,7 @@ const ThemeSwitcher = () => {
   });
 };
 
-const VersionTracker = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./version-tracker-97ea0c67.cjs.prod.js' /* webpackChunkName: "version-tracker" */); }));
+const VersionTracker = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./version-tracker-abf7b029.cjs.prod.js' /* webpackChunkName: "version-tracker" */); }));
 
 function ownKeys$5(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys$5(Object(t), !0)).call(_context2, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context3 = ownKeys$5(Object(t))).call(_context3, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
@@ -1355,7 +1355,7 @@ const hasCachedAuthenticationState = () => {
   return window.localStorage.getItem(constants.STORAGE_KEYS.IS_AUTHENTICATED) === 'true';
 };
 
-const OidcCallback = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./oidc-callback-f2c75e2d.cjs.prod.js' /* webpackChunkName: "oidc-callback" */); }));
+const OidcCallback = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./oidc-callback-25005367.cjs.prod.js' /* webpackChunkName: "oidc-callback" */); }));
 
 function ownKeys$3(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$3(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$3(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
@@ -1571,6 +1571,8 @@ ApplicationShell.propTypes = {};
 ApplicationShell.displayName = 'ApplicationShell';
 ApplicationShell.version = applicationShellVersion;
 
+const CustomViewDevHost = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./custom-view-dev-host-98e7ce7d.cjs.prod.js' /* webpackChunkName: "custom-view-dev-host" */); }));
+
 function ownKeys$1(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$1(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$1(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 const CustomViewWithPermissionCheck = props => {
@@ -1617,7 +1619,8 @@ function CustomViewShellAuthenticated(props) {
               environment: props.environment,
               children: jsxRuntime.jsxs(jsxRuntime.Fragment, {
                 children: [jsxRuntime.jsx(designSystem.ThemeProvider, {
-                  theme: "default"
+                  theme: "default",
+                  themeOverrides: applicationComponents.themesOverrides.default
                 }), jsxRuntime.jsx(FetchProject, {
                   projectKey: props.projectKey,
                   children: _ref3 => {
@@ -1651,6 +1654,32 @@ function CustomViewShellAuthenticated(props) {
 CustomViewShellAuthenticated.propTypes = {};
 
 const browserLocale = getBrowserLocale(window);
+function NotificationsContainer(props) {
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsxs("div", {
+      ref: props.notificationsGlobalRef,
+      role: "region",
+      "aria-live": "polite",
+      style: {
+        gridRow: 1,
+        gridColumn: '1/3'
+      },
+      children: [jsxRuntime.jsx("div", {
+        id: "above-top-navigation"
+      }), jsxRuntime.jsx(reactNotifications.NotificationsList, {
+        domain: constants.DOMAINS.GLOBAL
+      })]
+    }), jsxRuntime.jsx("div", {
+      ref: props.notificationsPageRef,
+      children: jsxRuntime.jsx(reactNotifications.NotificationsList, {
+        domain: constants.DOMAINS.PAGE
+      })
+    }), jsxRuntime.jsx(reactNotifications.NotificationsList, {
+      domain: constants.DOMAINS.SIDE
+    })]
+  });
+}
+NotificationsContainer.propTypes = {};
 function StrictModeEnablement(props) {
   if (props.enableReactStrictMode) {
     return jsxRuntime.jsx(react.StrictMode, {
@@ -1662,13 +1691,27 @@ function StrictModeEnablement(props) {
     });
   }
 }
+
+/*
+  During e2e tests, the Custom View template is built in production mode but still runs on localhost.
+  Checking for local production mode is necessary for applying the development host URL,
+  creating an environment for testing interaction with the Custom View template.
+*/
 StrictModeEnablement.propTypes = {};
+const isLocalProdMode = window.app.env === 'development';
 function CustomViewShell(props) {
+  var _window$app$__DEVELOP;
   const _useState = react.useState(),
     _useState2 = _slicedToArray(_useState, 2),
     hostContext = _useState2[0],
     setHostContext = _useState2[1];
   const iFrameCommunicationPort = react.useRef();
+  const notificationsGlobalRef = react.useRef(null);
+  const notificationsPageRef = react.useRef(null);
+  const layoutRefs = react.useRef({
+    notificationsGlobalRef,
+    notificationsPageRef
+  });
   const hostMessageHandler = react.useCallback(event => {
     if (event.data.eventName === constants.CUSTOM_VIEWS_EVENTS_NAMES.CUSTOM_VIEW_INITIALIZATION) {
       setHostContext(event.data.eventData.context);
@@ -1712,45 +1755,73 @@ function CustomViewShell(props) {
       showLogo: true
     });
   }
-  const hostUrl = hostContext.hostUrl;
-  return jsxRuntime.jsx(ApplicationShellProvider, {
-    environment: window.app,
-    applicationMessages: props.applicationMessages,
-    apolloClient: props.apolloClient,
-    children: _ref => {
-      let isAuthenticated = _ref.isAuthenticated;
-      if (isAuthenticated) {
-        return jsxRuntime.jsx(applicationShellConnectors.CustomViewContextProvider, {
-          hostUrl: hostUrl,
-          customViewConfig: hostContext.customViewConfig,
-          children: jsxRuntime.jsx(CustomViewShellAuthenticated, {
-            dataLocale: hostContext.dataLocale,
-            environment: window.app,
-            messages: props.applicationMessages,
-            projectKey: hostContext.projectKey,
+  const hostUrl = isLocalProdMode ? (_window$app$__DEVELOP = window.app.__DEVELOPMENT__) === null || _window$app$__DEVELOP === void 0 ? void 0 : _window$app$__DEVELOP.customViewHostUrl : hostContext.hostUrl;
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx(GlobalStyles, {}), jsxRuntime.jsx(ApplicationShellProvider, {
+      environment: window.app,
+      applicationMessages: props.applicationMessages,
+      apolloClient: props.apolloClient,
+      children: _ref => {
+        let isAuthenticated = _ref.isAuthenticated;
+        if (isAuthenticated) {
+          var _context;
+          return jsxRuntime.jsx(applicationShellConnectors.CustomViewContextProvider, {
+            hostUrl: hostUrl,
             customViewConfig: hostContext.customViewConfig,
-            children: props.children
-          })
-        });
-      }
-      return jsxRuntime.jsx(i18n.AsyncLocaleData, {
-        locale: browserLocale,
-        applicationMessages: props.applicationMessages,
-        children: _ref2 => {
-          let locale = _ref2.locale,
-            messages = _ref2.messages;
-          return jsxRuntime.jsx(ConfigureIntlProvider, {
-            locale: locale,
-            messages: messages,
-            children: jsxRuntime.jsx(applicationComponents.PageUnauthorized, {})
+            children: jsxRuntime.jsxs(CustomViewShellAuthenticated, {
+              dataLocale: hostContext.dataLocale,
+              environment: window.app,
+              messages: props.applicationMessages,
+              projectKey: hostContext.projectKey,
+              customViewConfig: hostContext.customViewConfig,
+              children: [jsxRuntime.jsx(applicationComponents.PortalsContainer
+              // @ts-ignore
+              , {
+                ref: layoutRefs
+              }), jsxRuntime.jsx(NotificationsContainer, {
+                notificationsGlobalRef: notificationsGlobalRef,
+                notificationsPageRef: notificationsPageRef
+              }), jsxRuntime.jsx(reactRouterDom.Route, {
+                path: _concatInstanceProperty__default["default"](_context = "/custom-views/".concat(hostContext.customViewConfig.id, "/projects/")).call(_context, hostContext.projectKey),
+                children: props.children
+              })]
+            })
           });
         }
-      });
-    }
+        return jsxRuntime.jsx(i18n.AsyncLocaleData, {
+          locale: browserLocale,
+          applicationMessages: props.applicationMessages,
+          children: _ref2 => {
+            let locale = _ref2.locale,
+              messages = _ref2.messages;
+            return jsxRuntime.jsx(ConfigureIntlProvider, {
+              locale: locale,
+              messages: messages,
+              children: jsxRuntime.jsx(applicationComponents.PageUnauthorized, {})
+            });
+          }
+        });
+      }
+    })]
   });
 }
 CustomViewShell.propTypes = {};
 const CustomViewShellWrapper = props => {
+  if ((isLocalProdMode) && !props.disableDevHost) {
+    return jsxRuntime.jsx(StrictModeEnablement, {
+      enableReactStrictMode: props.enableReactStrictMode,
+      children: jsxRuntime.jsx(react.Suspense, {
+        fallback: jsxRuntime.jsx(ApplicationLoader, {}),
+        children: jsxRuntime.jsx(CustomViewDevHost, {
+          applicationMessages: props.applicationMessages,
+          children: jsxRuntime.jsx(CustomViewShell, {
+            applicationMessages: props.applicationMessages,
+            children: props.children
+          })
+        })
+      })
+    });
+  }
   return jsxRuntime.jsx(StrictModeEnablement, {
     enableReactStrictMode: props.enableReactStrictMode,
     children: jsxRuntime.jsx(CustomViewShell, {

package/dist/{oidc-callback-f2c75e2d.cjs.prod.js → oidc-callback-25005367.cjs.prod.js}

@@ -18,7 +18,7 @@ var icons = require('@commercetools-uikit/icons');
 var notifications = require('@commercetools-uikit/notifications');
 var Spacings = require('@commercetools-uikit/spacings');
 var Text = require('@commercetools-uikit/text');
-var dist_commercetoolsFrontendApplicationShell = require('./index-d07d1e3f.cjs.prod.js');
+var dist_commercetoolsFrontendApplicationShell = require('./index-c29f8aa0.cjs.prod.js');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
 require('@babel/runtime-corejs3/core-js-stable/object/keys');
 require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');

package/dist/{oidc-callback-508c5239.cjs.dev.js → oidc-callback-6aa0b446.cjs.dev.js}

@@ -18,7 +18,7 @@ var icons = require('@commercetools-uikit/icons');
 var notifications = require('@commercetools-uikit/notifications');
 var Spacings = require('@commercetools-uikit/spacings');
 var Text = require('@commercetools-uikit/text');
-var dist_commercetoolsFrontendApplicationShell = require('./index-190fcd7f.cjs.dev.js');
+var dist_commercetoolsFrontendApplicationShell = require('./index-0d0e6d8b.cjs.dev.js');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
 require('@babel/runtime-corejs3/core-js-stable/object/keys');
 require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');

package/dist/{oidc-callback-758e96ec.esm.js → oidc-callback-860db268.esm.js}

@@ -16,7 +16,7 @@ import { AngleLeftIcon } from '@commercetools-uikit/icons';
 import { ContentNotification } from '@commercetools-uikit/notifications';
 import Spacings from '@commercetools-uikit/spacings';
 import Text from '@commercetools-uikit/text';
-import { C as ConfigureIntlProvider } from './index-76a06c5f.esm.js';
+import { C as ConfigureIntlProvider } from './index-35f9f7c2.esm.js';
 import { jsx, jsxs } from '@emotion/react/jsx-runtime';
 import '@babel/runtime-corejs3/core-js-stable/object/keys';
 import '@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols';

package/dist/{project-container-de098f6b.cjs.prod.js → project-container-0b7034a5.cjs.prod.js}

@@ -12,7 +12,7 @@ var constants = require('@commercetools-frontend/constants');
 var reactNotifications = require('@commercetools-frontend/react-notifications');
 var oidc = require('./oidc-b070ff6c.cjs.prod.js');
 var applicationEntryPoint = require('./application-entry-point-bde45acf.cjs.prod.js');
-var dist_commercetoolsFrontendApplicationShell = require('./index-d07d1e3f.cjs.prod.js');
+var dist_commercetoolsFrontendApplicationShell = require('./index-c29f8aa0.cjs.prod.js');
 var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
 var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
 var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
@@ -180,13 +180,13 @@ const LocaleSwitcher = props => {
 };
 LocaleSwitcher.propTypes = {};
 
-const ProjectExpired = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./project-expired-1ddd2af5.cjs.prod.js' /* webpackChunkName: "project-expired" */); }));
+const ProjectExpired = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./project-expired-abde10a9.cjs.prod.js' /* webpackChunkName: "project-expired" */); }));
 
-const ProjectNotFound = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./project-not-found-bc75cb7d.cjs.prod.js' /* webpackChunkName: "project-not-found" */); }));
+const ProjectNotFound = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./project-not-found-aeb6b4e5.cjs.prod.js' /* webpackChunkName: "project-not-found" */); }));
 
-const ProjectNotInitialized = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./project-not-initialized-0b673fe7.cjs.prod.js' /* webpackChunkName: "project-not-initialized" */); }));
+const ProjectNotInitialized = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./project-not-initialized-e8c5fae6.cjs.prod.js' /* webpackChunkName: "project-not-initialized" */); }));
 
-const ProjectSuspended = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./project-suspended-f53d45c9.cjs.prod.js' /* webpackChunkName: "project-suspended" */); }));
+const ProjectSuspended = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./project-suspended-1f94c722.cjs.prod.js' /* webpackChunkName: "project-suspended" */); }));
 
 var messages = reactIntl.defineMessages({
   trialDaysLeft: {

package/dist/{project-container-bae27095.cjs.dev.js → project-container-22dd3ee8.cjs.dev.js}

@@ -12,7 +12,7 @@ var constants = require('@commercetools-frontend/constants');
 var reactNotifications = require('@commercetools-frontend/react-notifications');
 var oidc = require('./oidc-7c48215c.cjs.dev.js');
 var applicationEntryPoint = require('./application-entry-point-fd6f9973.cjs.dev.js');
-var dist_commercetoolsFrontendApplicationShell = require('./index-190fcd7f.cjs.dev.js');
+var dist_commercetoolsFrontendApplicationShell = require('./index-0d0e6d8b.cjs.dev.js');
 var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
 var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
 var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
@@ -191,13 +191,13 @@ LocaleSwitcher.propTypes = process.env.NODE_ENV !== "production" ? {
   availableLocales: _pt__default["default"].arrayOf(_pt__default["default"].string).isRequired
 } : {};
 
-const ProjectExpired = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./project-expired-0e3d424a.cjs.dev.js' /* webpackChunkName: "project-expired" */); }));
+const ProjectExpired = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./project-expired-7e9f4a37.cjs.dev.js' /* webpackChunkName: "project-expired" */); }));
 
-const ProjectNotFound = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./project-not-found-90c2b18e.cjs.dev.js' /* webpackChunkName: "project-not-found" */); }));
+const ProjectNotFound = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./project-not-found-fcb9f62d.cjs.dev.js' /* webpackChunkName: "project-not-found" */); }));
 
-const ProjectNotInitialized = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./project-not-initialized-4c3ec31f.cjs.dev.js' /* webpackChunkName: "project-not-initialized" */); }));
+const ProjectNotInitialized = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./project-not-initialized-718a18d0.cjs.dev.js' /* webpackChunkName: "project-not-initialized" */); }));
 
-const ProjectSuspended = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./project-suspended-62a1b681.cjs.dev.js' /* webpackChunkName: "project-suspended" */); }));
+const ProjectSuspended = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./project-suspended-d028eced.cjs.dev.js' /* webpackChunkName: "project-suspended" */); }));
 
 var messages = reactIntl.defineMessages({
   trialDaysLeft: {

package/dist/{project-container-ba60ec97.esm.js → project-container-8a000259.esm.js}

@@ -10,7 +10,7 @@ import { STORAGE_KEYS, LOGOUT_REASONS, DOMAINS } from '@commercetools-frontend/c
 import { Notifier } from '@commercetools-frontend/react-notifications';
 import { C as CONTAINERS, S as SUSPENSION_REASONS } from './oidc-da8526e3.esm.js';
 import { A as ApplicationEntryPoint } from './application-entry-point-3613e4a5.esm.js';
-import { a as RedirectToProjectCreate, E as ErrorBoundary, b as ApplicationLoader, F as FetchProject, P as ProjectDataLocale } from './index-76a06c5f.esm.js';
+import { a as RedirectToProjectCreate, E as ErrorBoundary, b as ApplicationLoader, F as FetchProject, P as ProjectDataLocale } from './index-35f9f7c2.esm.js';
 import _Object$keys from '@babel/runtime-corejs3/core-js-stable/object/keys';
 import _Object$getOwnPropertySymbols from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols';
 import _filterInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/filter';
@@ -172,13 +172,13 @@ LocaleSwitcher.propTypes = process.env.NODE_ENV !== "production" ? {
   availableLocales: _pt.arrayOf(_pt.string).isRequired
 } : {};
 
-const ProjectExpired = /*#__PURE__*/lazy(() => import('./project-expired-371ff86e.esm.js' /* webpackChunkName: "project-expired" */));
+const ProjectExpired = /*#__PURE__*/lazy(() => import('./project-expired-175f09e7.esm.js' /* webpackChunkName: "project-expired" */));
 
-const ProjectNotFound = /*#__PURE__*/lazy(() => import('./project-not-found-6c139fad.esm.js' /* webpackChunkName: "project-not-found" */));
+const ProjectNotFound = /*#__PURE__*/lazy(() => import('./project-not-found-89cc6d97.esm.js' /* webpackChunkName: "project-not-found" */));
 
-const ProjectNotInitialized = /*#__PURE__*/lazy(() => import('./project-not-initialized-ddb69ed3.esm.js' /* webpackChunkName: "project-not-initialized" */));
+const ProjectNotInitialized = /*#__PURE__*/lazy(() => import('./project-not-initialized-1e4f45dc.esm.js' /* webpackChunkName: "project-not-initialized" */));
 
-const ProjectSuspended = /*#__PURE__*/lazy(() => import('./project-suspended-9e8d176c.esm.js' /* webpackChunkName: "project-suspended" */));
+const ProjectSuspended = /*#__PURE__*/lazy(() => import('./project-suspended-0d49681f.esm.js' /* webpackChunkName: "project-suspended" */));
 
 var messages = defineMessages({
   trialDaysLeft: {

package/dist/{project-expired-371ff86e.esm.js → project-expired-175f09e7.esm.js}

@@ -10,12 +10,12 @@ import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 import { MaintenancePageLayout } from '@commercetools-frontend/application-components';
 import ProjectExpiredIllustration from '@commercetools-frontend/assets/images/hourglass.svg';
-import { S as ServicePageProjectSwitcher } from './service-page-project-switcher-2c199df9.esm.js';
+import { S as ServicePageProjectSwitcher } from './service-page-project-switcher-f7058ef7.esm.js';
 import { jsx } from '@emotion/react/jsx-runtime';
 import '@emotion/styled/base';
 import 'react-router-dom';
 import '@commercetools-frontend/application-shell-connectors';
-import './index-76a06c5f.esm.js';
+import './index-35f9f7c2.esm.js';
 import 'prop-types';
 import 'react';
 import './index-89e5711a.esm.js';

package/dist/{project-expired-0e3d424a.cjs.dev.js → project-expired-7e9f4a37.cjs.dev.js}

@@ -12,12 +12,12 @@ var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
 var reactIntl = require('react-intl');
 var applicationComponents = require('@commercetools-frontend/application-components');
 var ProjectExpiredIllustration = require('@commercetools-frontend/assets/images/hourglass.svg');
-var servicePageProjectSwitcher = require('./service-page-project-switcher-1609cf1c.cjs.dev.js');
+var servicePageProjectSwitcher = require('./service-page-project-switcher-c2446f31.cjs.dev.js');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
 require('@emotion/styled/base');
 require('react-router-dom');
 require('@commercetools-frontend/application-shell-connectors');
-require('./index-190fcd7f.cjs.dev.js');
+require('./index-0d0e6d8b.cjs.dev.js');
 require('prop-types');
 require('react');
 require('./index-37a25e51.cjs.dev.js');