@commercetools-frontend/application-components 22.8.4 → 22.10.0

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

@@ -35,12 +35,17 @@ var _startsWithInstanceProperty = require('@babel/runtime-corejs3/core-js-stable
 var omitBy = require('lodash/omitBy');
 var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
 var _setTimeout = require('@babel/runtime-corejs3/core-js-stable/set-timeout');
+var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
+var sentry = require('@commercetools-frontend/sentry');
+var Constraints = require('@commercetools-uikit/constraints');
+var actionsGlobal = require('@commercetools-frontend/actions-global');
+var applicationShellConnectors = require('@commercetools-frontend/application-shell-connectors');
 var FlatButton = require('@commercetools-uikit/flat-button');
 var IconButton = require('@commercetools-uikit/icon-button');
-var Constraints = require('@commercetools-uikit/constraints');
+var _findInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/find');
+var _Object$entries = require('@babel/runtime-corejs3/core-js-stable/object/entries');
 var PageNotFoundSVG = require('@commercetools-frontend/assets/images/page-not-found.svg');
 var FailedAuthorizationSVG = require('@commercetools-frontend/assets/images/doors-closed.svg');
-var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
 var useResizeObserver = require('@react-hook/resize-observer');
 var hooks = require('@commercetools-uikit/hooks');
 
@@ -66,16 +71,18 @@ var SecondaryButton__default = /*#__PURE__*/_interopDefault(SecondaryButton);
 var _startsWithInstanceProperty__default = /*#__PURE__*/_interopDefault(_startsWithInstanceProperty);
 var omitBy__default = /*#__PURE__*/_interopDefault(omitBy);
 var _setTimeout__default = /*#__PURE__*/_interopDefault(_setTimeout);
+var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
+var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
 var FlatButton__default = /*#__PURE__*/_interopDefault(FlatButton);
 var IconButton__default = /*#__PURE__*/_interopDefault(IconButton);
-var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
+var _findInstanceProperty__default = /*#__PURE__*/_interopDefault(_findInstanceProperty);
+var _Object$entries__default = /*#__PURE__*/_interopDefault(_Object$entries);
 var PageNotFoundSVG__default = /*#__PURE__*/_interopDefault(PageNotFoundSVG);
 var FailedAuthorizationSVG__default = /*#__PURE__*/_interopDefault(FailedAuthorizationSVG);
-var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
 var useResizeObserver__default = /*#__PURE__*/_interopDefault(useResizeObserver);
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "22.8.4";
+var version = "22.10.0";
 
 var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9;
 const appKitSpacing55 = '40px';
@@ -145,9 +152,9 @@ var _ref$7 = {
 } ;
 const getLinkStyles = (isActive, isDisabled) => [/*#__PURE__*/react.css("font-size:", designSystem.designTokens.fontSizeDefault, ";padding:", designSystem.designTokens.spacingS, " ", designSystem.designTokens.spacingM, ";position:relative;text-align:center;display:inline-block;color:inherit;text-decoration:inherit;&:first-of-type{padding-left:", designTokens.paddingLeftForTabAsFirst, ";}", getBottomBorderStyles('transparent'), ";" + ("" ), "" ), isActive && /*#__PURE__*/react.css(getBottomBorderStyles(designSystem.designTokens.colorPrimary), " & h4{color:", designSystem.designTokens.colorPrimary, "!important;}" + ("" ), "" ), isDisabled && _ref$7, !isActive && !isDisabled && /*#__PURE__*/react.css(":hover,:focus,:active{& h4{color:", designSystem.designTokens.colorPrimary, "!important;}}" + ("" ), "" )];
 
-function ownKeys$6(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$6(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$6(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$6(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
-const pathWithoutSearch = path => typeof path === 'string' ? path.split('?')[0] : path.pathname;
+function ownKeys$7(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$7(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$7(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$7(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+const pathWithoutSearch$1 = path => typeof path === 'string' ? path.split('?')[0] : path.pathname;
 const warnIfMissingContent = props => {
   Boolean(props.intlMessage) || Boolean(props.label);
 };
@@ -168,7 +175,7 @@ const TabHeader = props => {
   const location = reactRouterDom.useLocation();
   const isActive = Boolean(reactRouterDom.matchPath(location.pathname, {
     // strip the search, otherwise the path won't match
-    path: pathWithoutSearch(props.to),
+    path: pathWithoutSearch$1(props.to),
     exact: props.exactPathMatch,
     strict: false
   }));
@@ -178,7 +185,7 @@ const TabHeader = props => {
     label = intl.formatMessage(props.intlMessage);
   }
   warnIfMissingContent(props);
-  return jsxRuntime.jsx(reactRouterDom.Link, _objectSpread$6(_objectSpread$6({
+  return jsxRuntime.jsx(reactRouterDom.Link, _objectSpread$7(_objectSpread$7({
     role: "tab",
     "aria-selected": isActive,
     to: props.to,
@@ -237,13 +244,13 @@ const getModalContentStyles = props => {
 const getOverlayStyles$1 = props => /*#__PURE__*/react.css("display:flex;position:absolute;z-index:", typeof props.zIndex === 'number' ? // Use `!important` to overwrite the default value assigned by the Stacking Layer System.
 "".concat(props.zIndex, " !important") : 'auto', ";top:0;width:100%;height:100%;background-color:rgba(32, 62, 72, 0.5);opacity:1;" + ("" ), "" );
 
-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 _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$5(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$5(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+function ownKeys$6(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$6(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$6(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$6(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 const getDefaultParentSelector$1 = () => document.querySelector("#".concat(constants.PORTALS_CONTAINER_ID));
 const getOverlayElement$1 = (props, contentElement) =>
 // Assign the `data-role` to the overlay container, which is used as
 // the CSS selector in the `<PortalsContainer>`.
-jsxRuntime.jsx("div", _objectSpread$5(_objectSpread$5({}, props), {}, {
+jsxRuntime.jsx("div", _objectSpread$6(_objectSpread$6({}, props), {}, {
   "data-role": "dialog-overlay",
   children: contentElement
 }));
@@ -371,8 +378,8 @@ function filterDataAttributes(obj) {
   return omitBy__default["default"](obj, (_value, key) => !_startsWithInstanceProperty__default["default"](key).call(key, 'data-'));
 }
 
-function ownKeys$4(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$4(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$4(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$4(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+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 _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$5(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$5(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 const defaultProps$g = {
   isPrimaryButtonDisabled: false,
   dataAttributesPrimaryButton: {},
@@ -387,11 +394,11 @@ const DialogFooter = props => {
       scale: "m",
       alignItems: "center",
       justifyContent: "flex-end",
-      children: [jsxRuntime.jsx(SecondaryButton__default["default"], _objectSpread$4({
+      children: [jsxRuntime.jsx(SecondaryButton__default["default"], _objectSpread$5({
         label: getFormattedLabel(props.labelSecondary, intl),
         onClick: props.onCancel,
         iconLeft: props.iconLeftSecondaryButton
-      }, filterDataAttributes(props.dataAttributesSecondaryButton))), jsxRuntime.jsx(PrimaryButton__default["default"], _objectSpread$4({
+      }, filterDataAttributes(props.dataAttributesSecondaryButton))), jsxRuntime.jsx(PrimaryButton__default["default"], _objectSpread$5({
         label: getFormattedLabel(props.labelPrimary, intl),
         onClick: props.onConfirm,
         isDisabled: props.isPrimaryButtonDisabled
@@ -560,6 +567,243 @@ const PageWrapper = /*#__PURE__*/_styled__default["default"]("div", {
   styles: "height:100%;display:flex;flex-direction:column"
 } );
 
+const ContentWrapper = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1alzj9m0"
+} )("height:100%;padding:", designSystem.designTokens.spacing40, " 40px;" + ("" ));
+function CustomPanel(props) {
+  return jsxRuntime.jsx(ModalPage, {
+    hidePathLabel: true,
+    isOpen: true,
+    onClose: props.onClose,
+    size: props.size,
+    title: props.title,
+    children: jsxRuntime.jsx(ContentWrapper, {
+      children: props.children
+    })
+  });
+}
+CustomPanel.propTypes = {};
+
+const messages$4 = reactIntl.defineMessages({
+  loadError: {
+    id: 'CustomViewLoader.error.load',
+    defaultMessage: 'We could not load the Custom View. Please contact your administrator to check its configuration.'
+  }
+});
+
+const isIframeReady = iFrameElementRef => {
+  try {
+    var _iFrameElementRef$con;
+    return (iFrameElementRef === null || iFrameElementRef === void 0 || (_iFrameElementRef$con = iFrameElementRef.contentWindow) === null || _iFrameElementRef$con === void 0 ? void 0 : _iFrameElementRef$con.document.readyState) === 'complete';
+  } catch {
+    // Trying to access the contentWindow of a cross-origin iFrame will throw an error.
+    // We are not supposed to even get here because the iFrame must use
+    // a URL from our very same domain (the custom view is proxied through our http-proxy service).
+    return false;
+  }
+};
+const CustomPanelIframe = /*#__PURE__*/_styled__default["default"]("iframe", {
+  target: "ewwxuwo0"
+} )({
+  name: "174lt7a",
+  styles: "height:100%;width:100%;border:none"
+} );
+function CustomViewLoader(props) {
+  var _props$customView$typ;
+  const iFrameElementRef = react$1.useRef(null);
+  const dataLocale = applicationShellConnectors.useApplicationContext(context => context.dataLocale);
+  const projectKey = applicationShellConnectors.useApplicationContext(context => {
+    var _context$project;
+    return (_context$project = context.project) === null || _context$project === void 0 ? void 0 : _context$project.key;
+  });
+  const iFrameCommunicationChannel = react$1.useRef(new MessageChannel());
+  const showNotification = actionsGlobal.useShowNotification();
+  const intl = reactIntl.useIntl();
+  const messageFromIFrameHandler = react$1.useCallback(event => {
+    if (event.data.origin === window.location.origin) {
+      console.log('message received from iframe port: ', event);
+    }
+  }, []);
+
+  // onLoad handler is called from the iFrame even where the URL is not valid
+  // (blocked by CORS, 404, etc.) so we need to make sure the iFrame is ready
+  const onLoadSuccessHandler = react$1.useCallback(() => {
+    var _iFrameElementRef$cur, _context;
+    // Show error and block if the iFrame is not ready
+    // (error loading it)
+    if (!isIframeReady(iFrameElementRef.current)) {
+      showNotification({
+        domain: constants.DOMAINS.PAGE,
+        kind: constants.NOTIFICATION_KINDS_PAGE.error,
+        text: intl.formatMessage(messages$4.loadError)
+      });
+      return;
+    }
+
+    // Listen for messages from the iFrame
+    iFrameCommunicationChannel.current.port1.onmessage = messageFromIFrameHandler;
+
+    // Transfer port2 to the iFrame so it can send messages back privately
+    (_iFrameElementRef$cur = iFrameElementRef.current) === null || _iFrameElementRef$cur === void 0 || (_iFrameElementRef$cur = _iFrameElementRef$cur.contentWindow) === null || _iFrameElementRef$cur === void 0 || _iFrameElementRef$cur.postMessage(constants.CUSTOM_VIEWS_EVENTS_NAMES.CUSTOM_VIEW_BOOTSTRAP, window.location.href, [iFrameCommunicationChannel.current.port2]);
+
+    // Send the initialization message to the iFrame
+    iFrameCommunicationChannel.current.port1.postMessage({
+      source: constants.CUSTOM_VIEWS_EVENTS_META.SOURCE,
+      destination: _concatInstanceProperty__default["default"](_context = "".concat(constants.CUSTOM_VIEWS_EVENTS_META.DESTINATION_PREFIX)).call(_context, props.customView.id),
+      eventName: constants.CUSTOM_VIEWS_EVENTS_NAMES.CUSTOM_VIEW_INITIALIZATION,
+      eventData: {
+        context: {
+          dataLocale,
+          projectKey,
+          customViewConfig: props.customView,
+          hostUrl: props.hostUrl || window.location.href
+        }
+      }
+    });
+
+    // We want the effect to run only once so we don't need the dependencies array.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  react$1.useEffect(() => {
+    // Close the channel when the component unmounts
+    const communicationChannel = iFrameCommunicationChannel.current;
+    return () => {
+      communicationChannel === null || communicationChannel === void 0 || communicationChannel.port1.close();
+    };
+  }, []);
+
+  // Currently we only support custom panels
+  if (props.customView.type !== 'CustomPanel') {
+    sentry.reportErrorToSentry(new Error("CustomViewLoader: Provided Custom View has an unsupported type: ".concat(props.customView.type, ". Supported types: ['CustomPanel'].")));
+    return null;
+  }
+  const panelSize = ((_props$customView$typ = props.customView.typeSettings) === null || _props$customView$typ === void 0 || (_props$customView$typ = _props$customView$typ.size) === null || _props$customView$typ === void 0 ? void 0 : _props$customView$typ.toLocaleLowerCase()) || 'large';
+  const iFrameUrl = [window.location.origin, 'custom-views', props.customView.id, 'projects', projectKey].join('/');
+  return jsxRuntime.jsx(CustomPanel, {
+    title: "Custom View: ".concat(props.customView.defaultLabel),
+    onClose: props.onClose,
+    size: panelSize,
+    children: jsxRuntime.jsx(CustomPanelIframe, {
+      id: "custom-view-".concat(props.customView.id),
+      title: "Custom View: ".concat(props.customView.defaultLabel),
+      ref: iFrameElementRef,
+      src: iFrameUrl,
+      onLoad: onLoadSuccessHandler
+    }, "custom-view-".concat(props.customView.id))
+  });
+}
+CustomViewLoader.propTypes = {};
+
+var messages$3 = reactIntl.defineMessages({
+  title: {
+    id: 'CustomViewsSelector.title',
+    defaultMessage: 'Custom Views:'
+  }
+});
+
+var FetchCustomViewsQuery = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "FetchCustomViewsByLocator" }, variableDefinitions: [{ kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "customViewLocatorCode" } }, type: { kind: "NonNullType", type: { kind: "NamedType", name: { kind: "Name", value: "String" } } }, directives: [] }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "allCustomViewsInstallationsByLocator" }, arguments: [{ kind: "Argument", name: { kind: "Name", value: "locator" }, value: { kind: "Variable", name: { kind: "Name", value: "customViewLocatorCode" } } }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "customView" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "defaultLabel" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "labelAllLocales" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "locale" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "value" }, arguments: [], directives: [] }] } }, { kind: "Field", name: { kind: "Name", value: "url" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "type" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "typeSettings" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "size" }, arguments: [], directives: [] }] } }, { kind: "Field", name: { kind: "Name", value: "locators" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "permissions" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "oAuthScopes" }, arguments: [], directives: [] }] } }] } }] } }] } }], loc: { start: 0, end: 405, source: { body: "query FetchCustomViewsByLocator($customViewLocatorCode: String!) {\n  allCustomViewsInstallationsByLocator(locator: $customViewLocatorCode) {\n    id\n    customView {\n      id\n      defaultLabel\n      labelAllLocales {\n        locale\n        value\n      }\n      url\n      type\n      typeSettings {\n        size\n      }\n      locators\n      permissions {\n        name\n        oAuthScopes\n      }\n    }\n  }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
+const useCustomViewsConnector = _ref => {
+  var _data$allCustomViewsI;
+  let customViewLocatorCode = _ref.customViewLocatorCode;
+  const _useMcQuery = applicationShellConnectors.useMcQuery(FetchCustomViewsQuery, {
+      variables: {
+        customViewLocatorCode
+      },
+      context: {
+        target: constants.GRAPHQL_TARGETS.SETTINGS_SERVICE
+      }
+    }),
+    data = _useMcQuery.data,
+    error = _useMcQuery.error,
+    loading = _useMcQuery.loading;
+  return {
+    customViews: (data === null || data === void 0 || (_data$allCustomViewsI = data.allCustomViewsInstallationsByLocator) === null || _data$allCustomViewsI === void 0 ? void 0 : _mapInstanceProperty__default["default"](_data$allCustomViewsI).call(_data$allCustomViewsI, installation => installation.customView)) || [],
+    error,
+    loading
+  };
+};
+
+function ownKeys$4(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$4(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$4(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$4(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+const COMPONENT_HEIGHT = '56px';
+const Wrapper = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e16cb3zv1"
+} )("height:", props => props.shouldRender ? COMPONENT_HEIGHT : '0', ";overflow:hidden;transition:height 0.3s ease-in-out;" + ("" ));
+const Container$2 = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e16cb3zv0"
+} )("background-color:", designSystem.designTokens.colorAccent98, ";padding:", designSystem.designTokens.spacing25, " ", designSystem.designTokens.spacing60, ";" + ("" ));
+function CustomViewSelector(props) {
+  const _useState = react$1.useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedCustomView = _useState2[0],
+    setSelectedCustomView = _useState2[1];
+  const _useCustomViewsConnec = useCustomViewsConnector({
+      customViewLocatorCode: props.customViewLocatorCode
+    }),
+    customViews = _useCustomViewsConnec.customViews,
+    error = _useCustomViewsConnec.error,
+    loading = _useCustomViewsConnec.loading;
+  const onCustomViewsResolved = props.onCustomViewsResolved;
+  react$1.useEffect(() => {
+    if (!loading && !error && onCustomViewsResolved) {
+      onCustomViewsResolved(customViews);
+    }
+  }, [customViews, error, loading, onCustomViewsResolved]);
+  if (error) {
+    sentry.reportErrorToSentry(error, {
+      extra: {
+        customViewLocatorCode: props.customViewLocatorCode
+      }
+    });
+    return null;
+  }
+  return jsxRuntime.jsx(Wrapper, {
+    shouldRender: customViews.length > 0,
+    children: jsxRuntime.jsx(Container$2, {
+      children: jsxRuntime.jsxs(Constraints__default["default"].Horizontal, {
+        max: "scale",
+        children: [jsxRuntime.jsxs(Spacings__default["default"].Inline, {
+          scale: "m",
+          justifyContent: "flex-end",
+          alignItems: "center",
+          children: [jsxRuntime.jsxs(Spacings__default["default"].Inline, {
+            scale: "xs",
+            alignItems: "center",
+            children: [jsxRuntime.jsx(icons.SidebarCollapseIcon, {
+              size: "medium",
+              color: "neutral60"
+            }), jsxRuntime.jsx(Text__default["default"].Detail, {
+              tone: "secondary",
+              intlMessage: messages$3.title
+            })]
+          }), _mapInstanceProperty__default["default"](customViews).call(customViews, customView => jsxRuntime.jsx(SecondaryButton__default["default"], {
+            label: customView.defaultLabel,
+            size: "medium",
+            onClick: () => {
+              setSelectedCustomView(customView);
+            }
+          }, customView.id))]
+        }), selectedCustomView && jsxRuntime.jsx(CustomViewLoader, {
+          customView: selectedCustomView,
+          onClose: () => {
+            setSelectedCustomView(null);
+          }
+        })]
+      })
+    })
+  });
+}
+CustomViewSelector.propTypes = {};
+const CustomViewSelectorOrNothing = props => {
+  if (!props.customViewLocatorCode) {
+    return null;
+  }
+  return jsxRuntime.jsx(CustomViewSelector, _objectSpread$4(_objectSpread$4({}, props), {}, {
+    customViewLocatorCode: props.customViewLocatorCode
+  }));
+};
+CustomViewSelectorOrNothing.propTypes = {};
+
 const messages$2 = reactIntl.defineMessages({
   back: {
     id: 'Components.ModalPage.TopBar.Back',
@@ -739,7 +983,9 @@ const ModalPage = props => {
             zIndex: props.zIndex
           }
         },
-        children: [jsxRuntime.jsx(ModalPageTopBar, {
+        children: [jsxRuntime.jsx(CustomViewSelectorOrNothing, {
+          customViewLocatorCode: props.customViewLocatorCode
+        }), jsxRuntime.jsx(ModalPageTopBar, {
           color: props.topBarColor,
           onClose: handleClose,
           currentPathLabel: props.currentPathLabel,
@@ -764,6 +1010,7 @@ const InfoModalPage = props => jsxRuntime.jsxs(ModalPage, {
   shouldDelayOnClose: props.shouldDelayOnClose,
   getParentSelector: props.getParentSelector,
   afterOpenStyles: props.afterOpenStyles,
+  customViewLocatorCode: props.customViewLocatorCode,
   children: [jsxRuntime.jsx(PageHeader, {
     title: props.title,
     subtitle: props.subtitle
@@ -841,6 +1088,7 @@ const CustomFormModalPage = props => jsxRuntime.jsxs(ModalPage, {
   getParentSelector: props.getParentSelector,
   shouldDelayOnClose: props.shouldDelayOnClose,
   afterOpenStyles: props.afterOpenStyles,
+  customViewLocatorCode: props.customViewLocatorCode,
   children: [jsxRuntime.jsx(PageHeader, {
     title: props.title,
     subtitle: props.subtitle,
@@ -892,6 +1140,7 @@ const FormModalPage = props => jsxRuntime.jsx(CustomFormModalPage, {
       dataAttributes: props.dataAttributesPrimaryButton
     })]
   }),
+  customViewLocatorCode: props.customViewLocatorCode,
   children: props.children
 });
 FormModalPage.propTypes = {};
@@ -901,6 +1150,26 @@ FormModalPage.defaultProps = defaultProps$a;
 // The Intl messages can be used for button labels.
 FormModalPage.Intl = i18n.sharedMessages;
 
+const pathWithoutSearch = path => typeof path === 'string' ? path.split('?')[0] : path.pathname;
+const useCustomViewLocatorSelector = function () {
+  var _context;
+  let customViewLocatorCodes = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const location = reactRouterDom.useLocation();
+  const customViewLocator = _findInstanceProperty__default["default"](_context = _Object$entries__default["default"](customViewLocatorCodes)).call(_context, _ref => {
+    let _ref2 = _slicedToArray(_ref, 2),
+      locator = _ref2[1];
+    return reactRouterDom.matchPath(location.pathname, {
+      // strip the search, otherwise the path won't match
+      path: pathWithoutSearch(locator),
+      exact: false,
+      strict: false
+    });
+  });
+  return {
+    currentCustomViewLocatorCode: customViewLocator === null || customViewLocator === void 0 ? void 0 : customViewLocator[0]
+  };
+};
+
 const TabControls = /*#__PURE__*/_styled__default["default"]("div", {
   target: "elpldre1"
 } )("margin-top:", designSystem.designTokens.spacingS, ";" + ("" ));
@@ -931,6 +1200,8 @@ const defaultProps$8 = {
   hideControls: false
 };
 const TabularModalPage = props => {
+  const _useCustomViewLocator = useCustomViewLocatorSelector(props.customViewLocatorCodes),
+    currentCustomViewLocatorCode = _useCustomViewLocator.currentCustomViewLocatorCode;
   return jsxRuntime.jsxs(ModalPage, {
     title: props.title,
     isOpen: props.isOpen,
@@ -942,6 +1213,7 @@ const TabularModalPage = props => {
     getParentSelector: props.getParentSelector,
     shouldDelayOnClose: props.shouldDelayOnClose,
     afterOpenStyles: props.afterOpenStyles,
+    customViewLocatorCode: currentCustomViewLocatorCode,
     children: [jsxRuntime.jsxs(TabularPageContainer, {
       color: "neutral",
       children: [props.customTitleRow || jsxRuntime.jsx(PageHeaderTitle, {
@@ -1014,7 +1286,9 @@ const defaultProps$6 = {
 const CustomFormDetailPage = props => {
   var _props$title;
   return jsxRuntime.jsxs(PageWrapper, {
-    children: [jsxRuntime.jsxs(DetailPageContainer, {
+    children: [jsxRuntime.jsx(CustomViewSelectorOrNothing, {
+      customViewLocatorCode: props.customViewLocatorCode
+    }), jsxRuntime.jsxs(DetailPageContainer, {
       children: [jsxRuntime.jsx(PageTopBar, {
         color: "neutral",
         previousPathLabel: props.previousPathLabel,
@@ -1056,6 +1330,7 @@ const FormDetailPage = props => jsxRuntime.jsx(CustomFormDetailPage, {
   title: props.title,
   subtitle: props.subtitle,
   customTitleRow: props.customTitleRow,
+  customViewLocatorCode: props.customViewLocatorCode,
   previousPathLabel: props.previousPathLabel,
   onPreviousPathClick: props.onPreviousPathClick,
   hideControls: props.hideControls,
@@ -1092,6 +1367,7 @@ const InfoDetailPage = props => jsxRuntime.jsx(CustomFormDetailPage, {
   subtitle: props.subtitle,
   customTitleRow: props.customTitleRow,
   previousPathLabel: props.previousPathLabel,
+  customViewLocatorCode: props.customViewLocatorCode,
   onPreviousPathClick: props.onPreviousPathClick,
   children: props.children
 });
@@ -1106,8 +1382,12 @@ const defaultProps$4 = {
 };
 const TabularDetailPage = props => {
   var _props$title;
+  const _useCustomViewLocator = useCustomViewLocatorSelector(props.customViewLocatorCodes),
+    currentCustomViewLocatorCode = _useCustomViewLocator.currentCustomViewLocatorCode;
   return jsxRuntime.jsxs(PageWrapper, {
-    children: [jsxRuntime.jsxs(TabularPageContainer, {
+    children: [jsxRuntime.jsx(CustomViewSelectorOrNothing, {
+      customViewLocatorCode: currentCustomViewLocatorCode
+    }), jsxRuntime.jsxs(TabularPageContainer, {
       color: "neutral",
       children: [jsxRuntime.jsx(PageTopBar, {
         color: "neutral",
@@ -1145,7 +1425,7 @@ TabularDetailPage.PageHeaderTitle = PageHeaderTitle;
 // This is a convenience proxy export to expose pre-defined Intl messages defined in the `@commercetools-frontend/i18n` package.
 TabularDetailPage.Intl = i18n.sharedMessages;
 
-const PublicPageLayout = /*#__PURE__*/react$1.lazy(() => Promise.resolve().then(function () { return require('./public-page-layout-c1f12507.cjs.prod.js' /* webpackChunkName: "public-page-layout" */); }));
+const PublicPageLayout = /*#__PURE__*/react$1.lazy(() => Promise.resolve().then(function () { return require('./public-page-layout-e13f8cb7.cjs.prod.js' /* webpackChunkName: "public-page-layout" */); }));
 
 const MainPageContainer = /*#__PURE__*/_styled__default["default"]("div", {
   target: "ev8m2jf2"
@@ -1164,7 +1444,9 @@ const defaultProps$3 = {
 const CustomFormMainPage = props => {
   var _props$title;
   return jsxRuntime.jsxs(PageWrapper, {
-    children: [jsxRuntime.jsx(MainPageContainer, {
+    children: [jsxRuntime.jsx(CustomViewSelectorOrNothing, {
+      customViewLocatorCode: props.customViewLocatorCode
+    }), jsxRuntime.jsx(MainPageContainer, {
       children: jsxRuntime.jsxs(Spacings__default["default"].Stack, {
         scale: "l",
         children: [props.customTitleRow || jsxRuntime.jsx(PageHeaderTitle, {
@@ -1207,6 +1489,7 @@ const FormMainPage = props => {
     title: props.title,
     subtitle: props.subtitle,
     customTitleRow: props.customTitleRow,
+    customViewLocatorCode: props.customViewLocatorCode,
     hideControls: props.hideControls,
     formControls: jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [jsxRuntime.jsx(CustomFormMainPage.FormSecondaryButton, {
@@ -1242,6 +1525,7 @@ const InfoMainPage = props => {
     title: props.title,
     subtitle: props.subtitle,
     customTitleRow: props.customTitleRow,
+    customViewLocatorCode: props.customViewLocatorCode,
     hideDivider: true,
     children: props.children
   });
@@ -1257,8 +1541,12 @@ const defaultProps$1 = {
 };
 const TabularMainPage = props => {
   var _props$title;
+  const _useCustomViewLocator = useCustomViewLocatorSelector(props.customViewLocatorCodes),
+    currentCustomViewLocatorCode = _useCustomViewLocator.currentCustomViewLocatorCode;
   return jsxRuntime.jsxs(PageWrapper, {
-    children: [jsxRuntime.jsxs(TabularPageContainer, {
+    children: [jsxRuntime.jsx(CustomViewSelectorOrNothing, {
+      customViewLocatorCode: currentCustomViewLocatorCode
+    }), jsxRuntime.jsxs(TabularPageContainer, {
       color: "surface",
       children: [props.customTitleRow || jsxRuntime.jsx(PageHeaderTitle, {
         title: (_props$title = props.title) !== null && _props$title !== void 0 ? _props$title : '',
@@ -1509,23 +1797,6 @@ function PageContentFull(props) {
 }
 PageContentFull.propTypes = {};
 
-const ContentWrapper = /*#__PURE__*/_styled__default["default"]("div", {
-  target: "e1alzj9m0"
-} )("height:100%;padding:", designSystem.designTokens.spacing40, " 40px;" + ("" ));
-function CustomPanel(props) {
-  return jsxRuntime.jsx(ModalPage, {
-    hidePathLabel: true,
-    isOpen: true,
-    onClose: props.onClose,
-    size: props.size,
-    title: props.title,
-    children: jsxRuntime.jsx(ContentWrapper, {
-      children: props.children
-    })
-  });
-}
-CustomPanel.propTypes = {};
-
 // The width of each indentation level.
 const indentationSize = '48px';
 const useObserverElementDimensions = element => {
@@ -1645,6 +1916,8 @@ exports.CustomFormDetailPage = CustomFormDetailPage;
 exports.CustomFormMainPage = CustomFormMainPage;
 exports.CustomFormModalPage = CustomFormModalPage;
 exports.CustomPanel = CustomPanel;
+exports.CustomViewLoader = CustomViewLoader;
+exports.CustomViewsSelector = CustomViewSelectorOrNothing;
 exports.FormDetailPage = FormDetailPage;
 exports.FormDialog = FormDialog;
 exports.FormMainPage = FormMainPage;