@commercetools-frontend/application-shell 22.14.1 → 22.14.3

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var dist_commercetoolsFrontendApplicationShell = require('./index-190fcd7f.cjs.dev.js');
+var dist_commercetoolsFrontendApplicationShell = require('./index-0d0e6d8b.cjs.dev.js');
 var index = require('./index-37a25e51.cjs.dev.js');
 var applicationShellConnectors = require('@commercetools-frontend/application-shell-connectors');
 var ssr = require('@commercetools-frontend/application-config/ssr');

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var dist_commercetoolsFrontendApplicationShell = require('./index-d07d1e3f.cjs.prod.js');
+var dist_commercetoolsFrontendApplicationShell = require('./index-c29f8aa0.cjs.prod.js');
 var index = require('./index-6cd618cc.cjs.prod.js');
 var applicationShellConnectors = require('@commercetools-frontend/application-shell-connectors');
 var ssr = require('@commercetools-frontend/application-config/ssr');

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

@@ -1,4 +1,4 @@
-export { g as ApplicationPageTitle, A as ApplicationShell, f as ApplicationShellProvider, C as ConfigureIntlProvider, h as CustomViewShell, I as InjectReducers, S as SetupFlopFlipProvider, i as SuspendedRoute, s as setupGlobalErrorListener, u as useRoutesCreator, d as version } from './index-76a06c5f.esm.js';
+export { g as ApplicationPageTitle, A as ApplicationShell, f as ApplicationShellProvider, C as ConfigureIntlProvider, h as CustomViewShell, I as InjectReducers, S as SetupFlopFlipProvider, i as SuspendedRoute, s as setupGlobalErrorListener, u as useRoutesCreator, d as version } from './index-35f9f7c2.esm.js';
 export { R as RouteCatchAll, a as applyDefaultMiddlewares } from './index-89e5711a.esm.js';
 export { buildApiUrl, createApolloClient, createApolloContextForProxyForwardTo, createHttpClientOptions, executeHttpClientRequest, getMcApiUrl, selectProjectKeyFromUrl, selectUserId, useMcLazyQuery, useMcMutation, useMcQuery } from '@commercetools-frontend/application-shell-connectors';
 export { entryPointUriPathToPermissionKeys, entryPointUriPathToResourceAccesses } from '@commercetools-frontend/application-config/ssr';

package/dist/{custom-view-dev-host-cc53ff72.cjs.dev.js → custom-view-dev-host-52595f60.cjs.dev.js}

@@ -12,7 +12,7 @@ var Constraints = require('@commercetools-uikit/constraints');
 var PrimaryButton = require('@commercetools-uikit/primary-button');
 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('./index-37a25e51.cjs.dev.js');
 require('@babel/runtime-corejs3/core-js-stable/object/keys');

package/dist/{custom-view-dev-host-cbf108c9.esm.js → custom-view-dev-host-945f058b.esm.js}

@@ -10,7 +10,7 @@ import Constraints from '@commercetools-uikit/constraints';
 import PrimaryButton from '@commercetools-uikit/primary-button';
 import Spacings from '@commercetools-uikit/spacings';
 import Text from '@commercetools-uikit/text';
-import { A as ApplicationShell } from './index-76a06c5f.esm.js';
+import { A as ApplicationShell } from './index-35f9f7c2.esm.js';
 import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
 import './index-89e5711a.esm.js';
 import '@babel/runtime-corejs3/core-js-stable/object/keys';

package/dist/custom-view-dev-host-98e7ce7d.cjs.prod.js

@@ -0,0 +1,203 @@
+'use strict';
+
+var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
+require('prop-types');
+var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
+var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
+var react = require('react');
+var reactRouterDom = require('react-router-dom');
+var applicationComponents = require('@commercetools-frontend/application-components');
+var history = require('@commercetools-frontend/browser-history');
+var Constraints = require('@commercetools-uikit/constraints');
+var PrimaryButton = require('@commercetools-uikit/primary-button');
+var Spacings = require('@commercetools-uikit/spacings');
+var Text = require('@commercetools-uikit/text');
+var dist_commercetoolsFrontendApplicationShell = require('./index-c29f8aa0.cjs.prod.js');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+require('./index-6cd618cc.cjs.prod.js');
+require('@babel/runtime-corejs3/core-js-stable/object/keys');
+require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
+require('@babel/runtime-corejs3/core-js-stable/instance/filter');
+require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
+require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
+require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
+require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
+require('@babel/runtime-corejs3/core-js-stable/object/define-property');
+require('@babel/runtime-corejs3/helpers/defineProperty');
+require('@babel/runtime-corejs3/core-js-stable/instance/reduce');
+require('@babel/runtime-corejs3/core-js-stable/object/entries');
+require('@babel/runtime-corejs3/core-js-stable/reflect/has');
+require('@reduxjs/toolkit');
+require('lodash/mapValues');
+require('omit-empty-es');
+require('redux-thunk');
+require('@commercetools-frontend/application-shell-connectors');
+require('@commercetools-frontend/constants');
+require('@commercetools-frontend/notifications');
+require('@commercetools-frontend/sdk');
+require('@babel/runtime-corejs3/core-js-stable/instance/index-of');
+require('@babel/runtime-corejs3/core-js-stable/instance/slice');
+require('@babel/runtime-corejs3/core-js-stable/instance/includes');
+require('@commercetools-frontend/sentry');
+require('@commercetools-frontend/react-notifications');
+require('@babel/runtime-corejs3/core-js-stable/instance/starts-with');
+require('redux-logger');
+require('@emotion/styled/base');
+require('@babel/runtime-corejs3/core-js-stable/instance/find');
+require('@babel/runtime-corejs3/core-js-stable/array/is-array');
+require('@emotion/react');
+require('@commercetools-frontend/i18n');
+require('./oidc-b070ff6c.cjs.prod.js');
+require('@babel/runtime-corejs3/core-js-stable/url');
+require('@commercetools-uikit/design-system');
+require('react-intl');
+require('@commercetools-uikit/flat-button');
+require('@commercetools-uikit/icons');
+require('./use-is-served-by-proxy-845cace5.cjs.prod.js');
+require('@babel/runtime-corejs3/helpers/taggedTemplateLiteral');
+require('@babel/runtime-corejs3/helpers/objectDestructuringEmpty');
+require('@babel/runtime-corejs3/helpers/extends');
+require('memoize-one');
+require('react-select');
+require('@commercetools-uikit/accessible-hidden');
+require('@commercetools-uikit/select-input');
+require('@commercetools-frontend/assets/images/ct-logo.svg');
+require('@commercetools-uikit/loading-spinner');
+require('@commercetools-frontend/l10n');
+require('@babel/runtime-corejs3/core-js-stable/reflect/construct');
+require('@babel/runtime-corejs3/helpers/classCallCheck');
+require('@babel/runtime-corejs3/helpers/createClass');
+require('@babel/runtime-corejs3/helpers/inherits');
+require('@babel/runtime-corejs3/helpers/possibleConstructorReturn');
+require('@babel/runtime-corejs3/helpers/getPrototypeOf');
+require('@babel/runtime-corejs3/core-js-stable/object/from-entries');
+require('@babel/runtime-corejs3/core-js-stable/instance/flags');
+require('@apollo/client/react');
+require('@flopflip/combine-adapters');
+require('@flopflip/http-adapter');
+require('@flopflip/launchdarkly-adapter');
+require('@flopflip/react-broadcast');
+require('react-redux');
+require('lodash/upperFirst');
+require('@commercetools-uikit/design-system/materials/resets.css');
+require('@commercetools-frontend/application-config/ssr');
+require('@commercetools-frontend/permissions');
+require('@babel/runtime-corejs3/core-js-stable/json/stringify');
+require('@babel/runtime-corejs3/core-js-stable/instance/some');
+require('@commercetools-frontend/actions-global');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
+var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
+var history__default = /*#__PURE__*/_interopDefault(history);
+var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
+var PrimaryButton__default = /*#__PURE__*/_interopDefault(PrimaryButton);
+var Spacings__default = /*#__PURE__*/_interopDefault(Spacings);
+var Text__default = /*#__PURE__*/_interopDefault(Text);
+
+const LocalCustomViewLauncher = props => {
+  var _props$environment$__, _context, _customViewConfig$typ, _props$environment$__2;
+  const _useState = react.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    shouldRenderCustomView = _useState2[0],
+    setShouldRenderCustomView = _useState2[1];
+  // We expect this in development to be defined.
+  const customViewConfig = (_props$environment$__ = props.environment.__DEVELOPMENT__) === null || _props$environment$__ === void 0 ? void 0 : _props$environment$__.customViewConfig;
+  return jsxRuntime.jsx("main", {
+    children: jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
+      max: "scale",
+      children: jsxRuntime.jsxs(Spacings__default["default"].Inset, {
+        scale: "xl",
+        children: [jsxRuntime.jsxs(Spacings__default["default"].Stack, {
+          scale: "xl",
+          children: [jsxRuntime.jsx(Text__default["default"].Headline, {
+            as: "h1",
+            children: "Custom View loader"
+          }), jsxRuntime.jsxs(Spacings__default["default"].Stack, {
+            scale: "l",
+            children: [jsxRuntime.jsxs(Spacings__default["default"].Stack, {
+              scale: "m",
+              children: [jsxRuntime.jsxs(Text__default["default"].Body, {
+                children: ["This page simulates the rendering of your Custom View as if it was within a page in the Merchant Center:", jsxRuntime.jsx("br", {}), "Based on your ", jsxRuntime.jsx("i", {
+                  children: "custom-view-config"
+                }), " file, these are the settings that will be used:"]
+              }), jsxRuntime.jsx("ul", {
+                children: jsxRuntime.jsxs(Spacings__default["default"].Stack, {
+                  scale: "s",
+                  children: [jsxRuntime.jsxs("li", {
+                    children: ["Custom View ID: ", jsxRuntime.jsx("b", {
+                      children: customViewConfig.id
+                    })]
+                  }), jsxRuntime.jsxs("li", {
+                    children: ["Custom View permissions:", ' ', jsxRuntime.jsx("b", {
+                      children: _mapInstanceProperty__default["default"](_context = customViewConfig.permissions).call(_context, permission => {
+                        var _context2;
+                        return _concatInstanceProperty__default["default"](_context2 = "(".concat(permission.name, ": ")).call(_context2, permission.oAuthScopes.join(', '), ")");
+                      }).join(', ')
+                    })]
+                  }), jsxRuntime.jsxs("li", {
+                    children: ["Custom View locators:", ' ', jsxRuntime.jsx("b", {
+                      children: customViewConfig.locators.join(', ')
+                    })]
+                  }), jsxRuntime.jsxs("li", {
+                    children: ["Custom View type: ", jsxRuntime.jsx("b", {
+                      children: customViewConfig.type
+                    })]
+                  }), jsxRuntime.jsxs("li", {
+                    children: ["Custom View size:", ' ', jsxRuntime.jsx("b", {
+                      children: (_customViewConfig$typ = customViewConfig.typeSettings) === null || _customViewConfig$typ === void 0 ? void 0 : _customViewConfig$typ.size
+                    })]
+                  })]
+                })
+              })]
+            }), jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
+              max: 10,
+              children: jsxRuntime.jsx(PrimaryButton__default["default"], {
+                label: "Open the Custom View",
+                onClick: () => setShouldRenderCustomView(true)
+              })
+            })]
+          })]
+        }), shouldRenderCustomView && jsxRuntime.jsx(applicationComponents.CustomViewLoader, {
+          customView: customViewConfig,
+          hostUrl: (_props$environment$__2 = props.environment.__DEVELOPMENT__) === null || _props$environment$__2 === void 0 ? void 0 : _props$environment$__2.customViewHostUrl,
+          onClose: () => setShouldRenderCustomView(false)
+        })]
+      })
+    })
+  });
+};
+const SimulatedIframeRoute = props => {
+  const routeMatch = reactRouterDom.useRouteMatch();
+  console.info("\u2139\uFE0F Rendering a Custom View as it would be rendered within an iframe", routeMatch.url);
+  return jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: props.children
+  });
+};
+const CustomViewDevHost = props => {
+  return jsxRuntime.jsx(reactRouterDom.Router, {
+    history: history__default["default"],
+    children: jsxRuntime.jsxs(reactRouterDom.Switch, {
+      children: [jsxRuntime.jsx(reactRouterDom.Route, {
+        path: "/custom-views/:customViewId/projects/:projectKey",
+        children: jsxRuntime.jsx(SimulatedIframeRoute, {
+          children: props.children
+        })
+      }), jsxRuntime.jsx(reactRouterDom.Route, {
+        children: jsxRuntime.jsx(dist_commercetoolsFrontendApplicationShell.ApplicationShell, {
+          environment: window.app,
+          applicationMessages: props.applicationMessages,
+          disableRoutePermissionCheck: true,
+          children: jsxRuntime.jsx(LocalCustomViewLauncher, {
+            environment: window.app
+          })
+        })
+      })]
+    })
+  });
+};
+CustomViewDevHost.propTypes = {};
+CustomViewDevHost.displayName = 'CustomViewDevHost';
+
+exports["default"] = CustomViewDevHost;

package/dist/{index-190fcd7f.cjs.dev.js → index-0d0e6d8b.cjs.dev.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-ffbb439c.cjs.dev.js' /* webpackChunkName: "requests-in-flight-loader" */); }));
+const RequestsInFlightLoader = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./requests-in-flight-loader-41d05ebb.cjs.dev.js' /* webpackChunkName: "requests-in-flight-loader" */); }));
 
 // Attempt to load the `projectKey` from localStorage
 function selectProjectKeyFromLocalStorage() {
@@ -594,7 +594,7 @@ FetchUser.displayName = 'FetchUser';
 
 const Navbar = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./navbar-8409df86.cjs.dev.js' /* webpackChunkName: "navbar" */); }));
 
-const ProjectContainer = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./project-container-bae27095.cjs.dev.js' /* webpackChunkName: "project-container" */); }));
+const ProjectContainer = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./project-container-22dd3ee8.cjs.dev.js' /* webpackChunkName: "project-container" */); }));
 
 const getSelectedDataLocaleForProject = projectLocales => {
   const cachedDataLocale = window.localStorage.getItem(constants.STORAGE_KEYS.SELECTED_DATA_LOCALE);
@@ -718,7 +718,7 @@ var pimIndexerStates = {
   NOT_INDEXED: 'NOT_INDEXED'
 };
 
-const QuickAccess = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./quick-access-3516dd17.cjs.dev.js' /* webpackChunkName: "quick-access" */); }));
+const QuickAccess = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./quick-access-08a2f835.cjs.dev.js' /* webpackChunkName: "quick-access" */); }));
 
 const QuickAccessTrigger = props => {
   const _useState = react.useState(false),
@@ -807,7 +807,7 @@ QuickAccessTrigger.propTypes = process.env.NODE_ENV !== "production" ? {
 } : {};
 QuickAccessTrigger.displayName = 'QuickAccessTrigger';
 
-const RedirectToLogout = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./redirect-to-logout-66d5d228.cjs.dev.js' /* webpackChunkName: "redirect-to-logout" */); }));
+const RedirectToLogout = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./redirect-to-logout-8cbbf5b3.cjs.dev.js' /* webpackChunkName: "redirect-to-logout" */); }));
 
 const RedirectToProjectCreate = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./redirect-to-project-create-7b476aa6.cjs.dev.js' /* webpackChunkName: "redirect-to-project-create" */); }));
 
@@ -957,7 +957,7 @@ const ThemeSwitcher = () => {
   });
 };
 
-const VersionTracker = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./version-tracker-7c9070d6.cjs.dev.js' /* webpackChunkName: "version-tracker" */); }));
+const VersionTracker = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./version-tracker-0c067072.cjs.dev.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; }
@@ -1462,7 +1462,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-508c5239.cjs.dev.js' /* webpackChunkName: "oidc-callback" */); }));
+const OidcCallback = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./oidc-callback-6aa0b446.cjs.dev.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; }
@@ -1700,7 +1700,7 @@ ApplicationShell.propTypes = process.env.NODE_ENV !== "production" ? {
 ApplicationShell.displayName = 'ApplicationShell';
 ApplicationShell.version = applicationShellVersion;
 
-const CustomViewDevHost = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./custom-view-dev-host-cc53ff72.cjs.dev.js' /* webpackChunkName: "custom-view-dev-host" */); }));
+const CustomViewDevHost = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./custom-view-dev-host-52595f60.cjs.dev.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; }
@@ -1750,7 +1750,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 => {
@@ -1789,6 +1790,35 @@ CustomViewShellAuthenticated.propTypes = process.env.NODE_ENV !== "production" ?
 } : {};
 
 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 = process.env.NODE_ENV !== "production" ? {
+  notificationsGlobalRef: _pt__default["default"].any.isRequired,
+  notificationsPageRef: _pt__default["default"].any.isRequired
+} : {};
 function StrictModeEnablement(props) {
   if (props.enableReactStrictMode) {
     return jsxRuntime.jsx(react.StrictMode, {
@@ -1800,10 +1830,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__default["default"].bool,
   children: _pt__default["default"].node
 } : {};
+const isLocalProdMode = process.env.NODE_ENV === 'production' && window.app.env === 'development';
 function CustomViewShell(props) {
   var _window$app$__DEVELOP;
   const _useState = react.useState(),
@@ -1811,6 +1848,12 @@ function CustomViewShell(props) {
     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);
@@ -1854,41 +1897,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 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 = 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 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 = process.env.NODE_ENV !== "production" ? {
@@ -1898,7 +1954,7 @@ CustomViewShell.propTypes = process.env.NODE_ENV !== "production" ? {
   children: _pt__default["default"].node.isRequired
 } : {};
 const CustomViewShellWrapper = props => {
-  if (process.env.NODE_ENV === 'development' && !props.disableDevHost) {
+  if ((process.env.NODE_ENV === 'development' || isLocalProdMode) && !props.disableDevHost) {
     return jsxRuntime.jsx(StrictModeEnablement, {
       enableReactStrictMode: props.enableReactStrictMode,
       children: jsxRuntime.jsx(react.Suspense, {