@commercetools-frontend/application-components 22.3.4 → 22.5.0

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

@@ -40,6 +40,9 @@ var IconButton = require('@commercetools-uikit/icon-button');
 var Constraints = require('@commercetools-uikit/constraints');
 var PageNotFoundSVG = require('@commercetools-frontend/assets/images/page-not-found.svg');
 var FailedAuthorizationSVG = require('@commercetools-frontend/assets/images/doors-closed.svg');
+var actionsGlobal = require('@commercetools-frontend/actions-global');
+var applicationShellConnectors = require('@commercetools-frontend/application-shell-connectors');
+var sentry = require('@commercetools-frontend/sentry');
 var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
 var useResizeObserver = require('@react-hook/resize-observer');
 var hooks = require('@commercetools-uikit/hooks');
@@ -75,7 +78,7 @@ var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstancePro
 var useResizeObserver__default = /*#__PURE__*/_interopDefault(useResizeObserver);
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "22.3.4";
+var version = "22.5.0";
 
 var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9;
 const appKitSpacing55 = '40px';
@@ -550,7 +553,7 @@ const PageHeader = props => {
 PageHeader.propTypes = {};
 PageHeader.displayName = 'PageHeader';
 
-const ContentWrapper = /*#__PURE__*/_styled__default["default"]("div", {
+const ContentWrapper$1 = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e1b7jwn01"
 } )("flex:1;flex-basis:0;margin:", designTokens.marginForPageContent, ";overflow:auto;" + ("" ));
 const PageWrapper = /*#__PURE__*/_styled__default["default"]("div", {
@@ -560,7 +563,7 @@ const PageWrapper = /*#__PURE__*/_styled__default["default"]("div", {
   styles: "height:100%;display:flex;flex-direction:column"
 } );
 
-const messages$2 = reactIntl.defineMessages({
+const messages$3 = reactIntl.defineMessages({
   back: {
     id: 'Components.ModalPage.TopBar.Back',
     defaultMessage: 'Go Back'
@@ -589,7 +592,8 @@ const LargeIconWrapper = props => jsxRuntime.jsx("span", {
 LargeIconWrapper.propTypes = {};
 const defaultProps$c = {
   color: 'surface',
-  previousPathLabel: messages$2.back
+  previousPathLabel: messages$3.back,
+  hidePathLabel: false
 };
 var _ref$4 = {
   name: "uvw8rn",
@@ -601,7 +605,7 @@ const ModalPageTopBar = props => {
     css: /*#__PURE__*/react.css("position:relative;display:flex;align-items:center;justify-content:space-between;padding:", designTokens.paddingForModalTopBar, ";background-color:", props.color === 'neutral' ? designTokens.backgroundColorForPageHeader : designSystem.designTokens.colorSurface, ";border-bottom:1px solid ", props.color === 'neutral' ? designSystem.designTokens.colorSurface : designTokens.borderColorForModalTopBarWhenSurface, ";& *+*{margin-left:", designSystem.designTokens.spacingS, ";}p{font-size:12px!important;}" + ("" ), "" ),
     children: [jsxRuntime.jsxs("div", {
       css: _ref$4,
-      children: [jsxRuntime.jsx(FlatButton__default["default"], {
+      children: [!props.hidePathLabel && jsxRuntime.jsx(FlatButton__default["default"], {
         tone: "primary",
         label: typeof props.previousPathLabel === 'string' ? props.previousPathLabel : intl.formatMessage(props.previousPathLabel),
         icon: jsxRuntime.jsx(icons.AngleLeftIcon, {
@@ -621,7 +625,7 @@ const ModalPageTopBar = props => {
         })]
       })]
     }), props.onClose && jsxRuntime.jsx(SecondaryIconButton__default["default"], {
-      label: intl.formatMessage(messages$2.close),
+      label: intl.formatMessage(messages$3.close),
       onClick: props.onClose,
       icon: jsxRuntime.jsx(LargeIconWrapper, {
         children: jsxRuntime.jsx(icons.CloseIcon, {})
@@ -635,7 +639,7 @@ ModalPageTopBar.displayName = 'ModalPageTopBar';
 ModalPageTopBar.defaultProps = defaultProps$c;
 
 const TRANSITION_DURATION = 200;
-const getContainerStyles = _props => /*#__PURE__*/react.css("position:absolute;top:0;right:0;height:100%;width:100%;display:flex;flex-direction:column;background-color:", designSystem.customProperties.colorSurface, ";box-shadow:", designSystem.customProperties.shadow4, ",", designSystem.customProperties.shadow6, ";outline:0;transform:translate3d(30px, 0, 0);transition:transform ", TRANSITION_DURATION, "ms ease;" + ("" ), "" );
+const getContainerStyles = _props => /*#__PURE__*/react.css("position:absolute;top:0;right:0;height:100%;width:", _props.size === 'small' ? '600px !important' : '100%', ";display:flex;flex-direction:column;background-color:", designSystem.customProperties.colorSurface, ";box-shadow:", designSystem.customProperties.shadow4, ",", designSystem.customProperties.shadow6, ";outline:0;transform:translate3d(30px, 0, 0);transition:transform ", TRANSITION_DURATION, "ms ease;" + ("" ), "" );
 const getOverlayStyles = props => /*#__PURE__*/react.css("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;left:0;width:100%;height:100%;background-color:rgba(32, 62, 72, 0.5);opacity:0;transition:opacity ", TRANSITION_DURATION, "ms ease;" + ("" ), "" );
 var _ref4 = {
@@ -675,7 +679,8 @@ jsxRuntime.jsx("div", _objectSpread$3(_objectSpread$3({}, props), {}, {
 // does not recognize the object shape.
 const defaultProps$b = {
   getParentSelector: getDefaultParentSelector,
-  shouldDelayOnClose: true
+  shouldDelayOnClose: true,
+  size: 'large'
 };
 const ModalPage = props => {
   const _useState = react$1.useState(false),
@@ -721,7 +726,7 @@ const ModalPage = props => {
           beforeClose: makeClassName(getBeforeCloseOverlayAnimation())
         },
         className: {
-          base: makeClassName(getContainerStyles()),
+          base: makeClassName(getContainerStyles(props)),
           afterOpen: typeof props.afterOpenStyles === 'string' ? props.afterOpenStyles : makeClassName((_props$afterOpenStyle = props.afterOpenStyles) !== null && _props$afterOpenStyle !== void 0 ? _props$afterOpenStyle : getAfterOpenContainerAnimation()),
           beforeClose: makeClassName(getBeforeCloseContainerAnimation())
         },
@@ -741,7 +746,8 @@ const ModalPage = props => {
           color: props.topBarColor,
           onClose: handleClose,
           currentPathLabel: props.currentPathLabel,
-          previousPathLabel: props.previousPathLabel
+          previousPathLabel: props.previousPathLabel,
+          hidePathLabel: props.hidePathLabel
         }), props.children]
       });
     }
@@ -764,7 +770,7 @@ const InfoModalPage = props => jsxRuntime.jsxs(ModalPage, {
   children: [jsxRuntime.jsx(PageHeader, {
     title: props.title,
     subtitle: props.subtitle
-  }), jsxRuntime.jsx(ContentWrapper, {
+  }), jsxRuntime.jsx(ContentWrapper$1, {
     children: props.children
   })]
 });
@@ -845,7 +851,7 @@ const CustomFormModalPage = props => jsxRuntime.jsxs(ModalPage, {
       alignItems: "flex-end",
       children: props.formControls
     })
-  }), jsxRuntime.jsx(ContentWrapper, {
+  }), jsxRuntime.jsx(ContentWrapper$1, {
     children: props.children
   })]
 });
@@ -955,7 +961,7 @@ const TabularModalPage = props => {
           })
         })
       })]
-    }), jsxRuntime.jsx(ContentWrapper, {
+    }), jsxRuntime.jsx(ContentWrapper$1, {
       children: props.children
     })]
   });
@@ -974,7 +980,7 @@ TabularModalPage.Intl = i18n.sharedMessages;
 
 const defaultProps$7 = {
   color: 'surface',
-  previousPathLabel: messages$2.back
+  previousPathLabel: messages$3.back
 };
 const PageTopBar = props => {
   const intl = reactIntl.useIntl();
@@ -1026,7 +1032,7 @@ const CustomFormDetailPage = props => {
           children: props.formControls
         })
       })]
-    }), jsxRuntime.jsx(ContentWrapper, {
+    }), jsxRuntime.jsx(ContentWrapper$1, {
       children: props.children
     })]
   });
@@ -1123,7 +1129,7 @@ const TabularDetailPage = props => {
           })
         })
       })]
-    }), jsxRuntime.jsx(ContentWrapper, {
+    }), jsxRuntime.jsx(ContentWrapper$1, {
       children: props.children
     })]
   });
@@ -1142,7 +1148,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-992f709d.cjs.prod.js' /* webpackChunkName: "public-page-layout" */); }));
+const PublicPageLayout = /*#__PURE__*/react$1.lazy(() => Promise.resolve().then(function () { return require('./public-page-layout-b0cb3f87.cjs.prod.js' /* webpackChunkName: "public-page-layout" */); }));
 
 const MainPageContainer = /*#__PURE__*/_styled__default["default"]("div", {
   target: "ev8m2jf2"
@@ -1270,7 +1276,7 @@ const TabularMainPage = props => {
           })
         })
       })]
-    }), jsxRuntime.jsx(ContentWrapper, {
+    }), jsxRuntime.jsx(ContentWrapper$1, {
       css: /*#__PURE__*/react.css("background-color:", designTokens.backgroundColorForTabularMainPageContent, ";" + ("" ), "" ),
       children: props.children
     })]
@@ -1329,7 +1335,7 @@ const MaintenancePageLayout = props => jsxRuntime.jsx("div", {
 MaintenancePageLayout.propTypes = {};
 MaintenancePageLayout.displayName = 'MaintenancePageLayout';
 
-var messages$1 = reactIntl.defineMessages({
+var messages$2 = reactIntl.defineMessages({
   title: {
     id: 'PageNotFound.title',
     defaultMessage: 'We could not find what you are looking for'
@@ -1352,9 +1358,9 @@ const PageNotFound = () => {
   const intl = reactIntl.useIntl();
   return jsxRuntime.jsx(MaintenancePageLayout, {
     imageSrc: PageNotFoundSVG__default["default"],
-    title: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$1({}, messages$1.title)),
-    label: intl.formatMessage(messages$1.title),
-    paragraph1: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$1(_objectSpread$1({}, messages$1.paragraph1), {}, {
+    title: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$1({}, messages$2.title)),
+    label: intl.formatMessage(messages$2.title),
+    paragraph1: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$1(_objectSpread$1({}, messages$2.paragraph1), {}, {
       values: {
         a: getLink
       }
@@ -1363,7 +1369,7 @@ const PageNotFound = () => {
 };
 PageNotFound.displayName = 'PageNotFound';
 
-var messages = reactIntl.defineMessages({
+var messages$1 = reactIntl.defineMessages({
   title: {
     id: 'PageUnauthorized.title',
     defaultMessage: 'We could not find what you are looking for'
@@ -1390,10 +1396,10 @@ const PageUnauthorized = () => {
   const intl = reactIntl.useIntl();
   return jsxRuntime.jsx(MaintenancePageLayout, {
     imageSrc: FailedAuthorizationSVG__default["default"],
-    title: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread({}, messages.title)),
-    label: intl.formatMessage(messages.title),
-    paragraph1: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread({}, messages.paragraph1)),
-    paragraph2: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread(_objectSpread({}, messages.paragraph2), {}, {
+    title: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread({}, messages$1.title)),
+    label: intl.formatMessage(messages$1.title),
+    paragraph1: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread({}, messages$1.paragraph1)),
+    paragraph2: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread(_objectSpread({}, messages$1.paragraph2), {}, {
       values: {
         a: getSupportUrlLink
       }
@@ -1506,6 +1512,129 @@ function PageContentFull(props) {
 }
 PageContentFull.propTypes = {};
 
+const ContentWrapper = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1alzj9m0"
+} )("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 CUSTOM_VIEWS_EVENTS_NAMES = {
+  CUSTOM_VIEW_BOOTSTRAP: 'custom-view-bootstrap',
+  CUSTOM_VIEW_INITIALIZATION: 'custom-view-initialization'
+};
+const CUSTOM_VIEWS_EVENTS_META = {
+  SOURCE: 'mc-host-application',
+  DESTINATION_PREFIX: 'custom-view-'
+};
+
+const messages = reactIntl.defineMessages({
+  loadError: {
+    id: 'Components.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 ? 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, _props$customView$typ2;
+  const iFrameElementRef = react$1.useRef(null);
+  const appContext = applicationShellConnectors.useApplicationContext();
+  const iFrameCommunicationChannel = react$1.useRef(new MessageChannel());
+  const showNotification = actionsGlobal.useShowNotification();
+  const intl = reactIntl.useIntl();
+  const panelSize = ((_props$customView$typ = props.customView.typeConfig) === null || _props$customView$typ === void 0 ? void 0 : (_props$customView$typ2 = _props$customView$typ.size) === null || _props$customView$typ2 === void 0 ? void 0 : _props$customView$typ2.toLocaleLowerCase()) || 'large';
+  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, _iFrameElementRef$cur2, _context, _appContext$user, _appContext$project;
+    // 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.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 ? void 0 : (_iFrameElementRef$cur2 = _iFrameElementRef$cur.contentWindow) === null || _iFrameElementRef$cur2 === void 0 ? void 0 : _iFrameElementRef$cur2.postMessage(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: CUSTOM_VIEWS_EVENTS_META.SOURCE,
+      destination: _concatInstanceProperty__default["default"](_context = "".concat(CUSTOM_VIEWS_EVENTS_META.DESTINATION_PREFIX)).call(_context, props.customView.id),
+      eventName: CUSTOM_VIEWS_EVENTS_NAMES.CUSTOM_VIEW_INITIALIZATION,
+      eventData: {
+        context: {
+          userLocale: (_appContext$user = appContext.user) === null || _appContext$user === void 0 ? void 0 : _appContext$user.locale,
+          dataLocale: appContext.dataLocale,
+          projectKey: (_appContext$project = appContext.project) === null || _appContext$project === void 0 ? void 0 : _appContext$project.key
+        }
+      }
+    });
+
+    // We want the effect to run only once so we don't need the dependencies array.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // 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;
+  }
+  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),
+      ref: iFrameElementRef,
+      title: "Custom View: ".concat(props.customView.defaultLabel),
+      src: props.customView.url,
+      onLoad: onLoadSuccessHandler
+    }, "custom-view-".concat(props.customView.id))
+  });
+}
+CustomViewLoader.propTypes = {};
+
 // The width of each indentation level.
 const indentationSize = '48px';
 const useObserverElementDimensions = element => {
@@ -1624,6 +1753,8 @@ exports.ConfirmationDialog = ConfirmationDialog;
 exports.CustomFormDetailPage = CustomFormDetailPage;
 exports.CustomFormMainPage = CustomFormMainPage;
 exports.CustomFormModalPage = CustomFormModalPage;
+exports.CustomPanel = CustomPanel;
+exports.CustomViewLoader = CustomViewLoader;
 exports.FormDetailPage = FormDetailPage;
 exports.FormDialog = FormDialog;
 exports.FormMainPage = FormMainPage;