@commercetools-frontend/application-components 23.3.0 → 24.0.0

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

@@ -83,7 +83,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 = "23.3.0";
+var version = "24.0.0";
 
 // We keep these tokens as they are related to page layout components which should have
 // a slightly different layout (margins/paddings) when used within a Custom View panel.
@@ -500,7 +500,7 @@ FormDialog.TextTitle = TextTitle;
 
 const CustomViewSelector = /*#__PURE__*/react$1.lazy(() => {
   if (typeof window !== 'undefined' && typeof window.app !== 'undefined') {
-    return Promise.resolve().then(function () { return require('./custom-views-selector-7238360c.cjs.prod.js' /* webpackChunkName: "custom-views-selector" */); });
+    return Promise.resolve().then(function () { return require('./custom-views-selector-4f4e8c43.cjs.prod.js' /* webpackChunkName: "custom-views-selector" */); });
   }
   return _Promise__default["default"].resolve({
     default: () => null
@@ -1526,7 +1526,7 @@ const getLink = msg => jsxRuntime.jsx("a", {
   target: "_blank",
   rel: "noopener noreferrer",
   children: msg
-});
+}, "support-portal-url");
 const PageNotFound = () => {
   const intl = reactIntl.useIntl();
   return jsxRuntime.jsx(MaintenancePageLayout, {
@@ -1564,7 +1564,7 @@ const getSupportUrlLink = msg => jsxRuntime.jsx("a", {
   target: "_blank",
   rel: "noopener noreferrer",
   children: msg
-});
+}, "support-portal-url");
 const PageUnauthorized = () => {
   const intl = reactIntl.useIntl();
   return jsxRuntime.jsx(MaintenancePageLayout, {
@@ -1814,6 +1814,26 @@ function CustomViewLoader(props) {
   const iFrameCommunicationChannel = react$1.useRef(new MessageChannel());
   const showNotification = actionsGlobal.useShowNotification();
   const intl = reactIntl.useIntl();
+  const sendInitializationMessages = react$1.useCallback(() => {
+    // Transfer port2 to the iFrame so it can send messages back privately
+    iFrameElementRef.current?.contentWindow?.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.HOST_APPLICATION_CODE,
+      destination: `${constants.CUSTOM_VIEWS_EVENTS_META.CUSTOM_VIEW_KEY_PREFIX}${props.customView.id}`,
+      eventName: constants.CUSTOM_VIEWS_EVENTS_NAMES.CUSTOM_VIEW_INITIALIZATION,
+      eventData: {
+        context: {
+          dataLocale,
+          projectKey,
+          featureFlags,
+          customViewConfig: props.customView,
+          hostUrl: props.hostUrl || window.location.href
+        }
+      }
+    });
+  }, [dataLocale, featureFlags, props.customView, props.hostUrl, projectKey]);
   const messageFromIFrameHandler = react$1.useCallback(event => {
     if (event.data.origin === window.location.origin) {
       switch (event.data.eventName) {
@@ -1841,24 +1861,13 @@ function CustomViewLoader(props) {
     // Listen for messages from the iFrame
     iFrameCommunicationChannel.current.port1.onmessage = messageFromIFrameHandler;
 
-    // Transfer port2 to the iFrame so it can send messages back privately
-    iFrameElementRef.current?.contentWindow?.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.HOST_APPLICATION_CODE,
-      destination: `${constants.CUSTOM_VIEWS_EVENTS_META.CUSTOM_VIEW_KEY_PREFIX}${props.customView.id}`,
-      eventName: constants.CUSTOM_VIEWS_EVENTS_NAMES.CUSTOM_VIEW_INITIALIZATION,
-      eventData: {
-        context: {
-          dataLocale,
-          projectKey,
-          featureFlags,
-          customViewConfig: props.customView,
-          hostUrl: props.hostUrl || window.location.href
-        }
-      }
-    });
+    // TODO: Locally (starter templates) we're seeing a little delay while rendering
+    // the iFrame. The CustomViewShell gets rendered, but the effect to start listening
+    // for messages is triggered after the iFrame is ready.
+    // This is a temporary fix to avoid the situation when running locally.
+    _setTimeout__default["default"](() => {
+      sendInitializationMessages();
+    }, 500);
 
     // We want the effect to run only once so we don't need the dependencies array.
     // eslint-disable-next-line react-hooks/exhaustive-deps