@bigbinary/neeto-molecules 3.16.27 → 3.16.28

package/dist/cjs/ProductEmbed.js

@@ -1,10 +1,11 @@
 'use strict';
 
+var shallow = require('zustand/shallow');
+var React = require('react');
 var neetoCist = require('@bigbinary/neeto-cist');
 var reactRouterDom = require('react-router-dom');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
-var React = require('react');
 var classnames = require('classnames');
 var LeftArrow = require('@bigbinary/neeto-icons/LeftArrow');
 var Button = require('@bigbinary/neetoui/Button');
@@ -23,6 +24,8 @@ var Delete = require('@bigbinary/neeto-icons/Delete');
 var Plus = require('@bigbinary/neeto-icons/Plus');
 var Label = require('@bigbinary/neetoui/Label');
 var HelpPopover = require('./HelpPopover.js');
+var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
+var zustand = require('zustand');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var jsxRuntime = require('react/jsx-runtime');
 var Checkbox = require('@bigbinary/neetoui/Checkbox');
@@ -31,7 +34,6 @@ var _objectDestructuringEmpty = require('@babel/runtime/helpers/objectDestructur
 var Spinner = require('@bigbinary/neetoui/Spinner');
 var BrowserPreview = require('./BrowserPreview.js');
 var injectCss = require('./inject-css-vQvjPR2x.js');
-var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
 require('./index-JY2zVpnv.js');
 require('./_commonjsHelpers-BJu3ubxk.js');
 require('./Breadcrumbs.js');
@@ -67,6 +69,24 @@ var INITIAL_QUERY_PARAM = {
   value: ""
 };
 
+/** @type {import("neetocommons/react-utils").ZustandStoreHook} */
+var useProductEmbedStore = zustand.create(reactUtils.withImmutableActions(function (set) {
+  return {
+    isQueryParamsEnabled: false,
+    queryParams: [INITIAL_QUERY_PARAM],
+    queryParamsProps: {
+      helpPopoverProps: {},
+      label: ""
+    },
+    setProductEmbedState: set,
+    setQueryParams: function setQueryParams(queryParams) {
+      return set({
+        queryParams: queryParams
+      });
+    }
+  };
+}));
+
 var camelCasedAppName$1 = globalProps.appName.replace(/^neeto/i, "neeto");
 var embedBaseScript = function embedBaseScript(embedScriptLink) {
   return "<script>window.".concat(camelCasedAppName$1, " = window.").concat(camelCasedAppName$1, " || { embed: function(){(").concat(camelCasedAppName$1, ".q=").concat(camelCasedAppName$1, ".q||[]).push(arguments)} };</script>\n  <script async\n    src=\"").concat(embedScriptLink, "\">\n  </script>");
@@ -239,14 +259,19 @@ var toCamelCasedString = function toCamelCasedString(string) {
 function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(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 t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var DynamicQueryParams = function DynamicQueryParams(_ref) {
-  var updateCustomization = _ref.updateCustomization,
-    queryParamsProps = _ref.queryParamsProps;
+  var updateCustomization = _ref.updateCustomization;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
-  var _useState = React.useState([INITIAL_QUERY_PARAM]),
-    _useState2 = _slicedToArray(_useState, 2),
-    queryParams = _useState2[0],
-    setQueryParams = _useState2[1];
+  var _useProductEmbedStore = useProductEmbedStore(function (store) {
+      return {
+        queryParamsProps: store["queryParamsProps"],
+        queryParams: store["queryParams"],
+        setQueryParams: store["setQueryParams"]
+      };
+    }, shallow.shallow),
+    queryParamsProps = _useProductEmbedStore.queryParamsProps,
+    queryParams = _useProductEmbedStore.queryParams,
+    setQueryParams = _useProductEmbedStore.setQueryParams;
   var handleAddQueryParam = function handleAddQueryParam() {
     setQueryParams([].concat(_toConsumableArray(queryParams), [INITIAL_QUERY_PARAM]));
   };
@@ -322,12 +347,16 @@ var DynamicQueryParams = function DynamicQueryParams(_ref) {
 var ElementPopup$1 = function ElementPopup(_ref) {
   var customization = _ref.customization,
     updateCustomization = _ref.updateCustomization,
-    isQueryParamsEnabled = _ref.isQueryParamsEnabled,
-    queryParamsProps = _ref.queryParamsProps,
     otherCustomizations = _ref.otherCustomizations;
   var elementSelector = customization.elementSelector;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
+  var _useProductEmbedStore = useProductEmbedStore(function (store) {
+      return {
+        isQueryParamsEnabled: store["isQueryParamsEnabled"]
+      };
+    }, shallow.shallow),
+    isQueryParamsEnabled = _useProductEmbedStore.isQueryParamsEnabled;
   React.useEffect(function () {
     if (isQueryParamsEnabled) return;
     updateCustomization({
@@ -351,7 +380,6 @@ var ElementPopup$1 = function ElementPopup(_ref) {
         });
       }
     }), otherCustomizations(), isQueryParamsEnabled && /*#__PURE__*/jsxRuntime.jsx(DynamicQueryParams, {
-      queryParamsProps: queryParamsProps,
       updateCustomization: updateCustomization
     })]
   });
@@ -360,11 +388,15 @@ var ElementPopup$1 = function ElementPopup(_ref) {
 var FloatingPopup$1 = function FloatingPopup(_ref) {
   var customization = _ref.customization,
     updateCustomization = _ref.updateCustomization,
-    isQueryParamsEnabled = _ref.isQueryParamsEnabled,
-    queryParamsProps = _ref.queryParamsProps,
     otherCustomizations = _ref.otherCustomizations;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
+  var _useProductEmbedStore = useProductEmbedStore(function (store) {
+      return {
+        isQueryParamsEnabled: store["isQueryParamsEnabled"]
+      };
+    }, shallow.shallow),
+    isQueryParamsEnabled = _useProductEmbedStore.isQueryParamsEnabled;
   var btnTextColor = customization.btnTextColor,
     showIcon = customization.showIcon,
     btnText = customization.btnText,
@@ -448,7 +480,6 @@ var FloatingPopup$1 = function FloatingPopup(_ref) {
         });
       }
     }), otherCustomizations(), isQueryParamsEnabled && /*#__PURE__*/jsxRuntime.jsx(DynamicQueryParams, {
-      queryParamsProps: queryParamsProps,
       updateCustomization: updateCustomization
     })]
   });
@@ -457,14 +488,18 @@ var FloatingPopup$1 = function FloatingPopup(_ref) {
 var Inline$1 = function Inline(_ref) {
   var customization = _ref.customization,
     updateCustomization = _ref.updateCustomization,
-    isQueryParamsEnabled = _ref.isQueryParamsEnabled,
-    queryParamsProps = _ref.queryParamsProps,
     otherCustomizations = _ref.otherCustomizations;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useProductEmbedStore = useProductEmbedStore(function (store) {
+      return {
+        isQueryParamsEnabled: store["isQueryParamsEnabled"]
+      };
+    }, shallow.shallow),
+    isQueryParamsEnabled = _useProductEmbedStore.isQueryParamsEnabled;
   var height = customization.height,
     width = customization.width,
     elementSelector = customization.elementSelector;
-  var _useTranslation = reactI18next.useTranslation(),
-    t = _useTranslation.t;
   var handleInputChange = function handleInputChange(_ref2, attribute) {
     var value = _ref2.target.value;
     return updateCustomization(_defineProperty({}, attribute, value));
@@ -525,7 +560,6 @@ var Inline$1 = function Inline(_ref) {
         }
       })]
     }), otherCustomizations(), isQueryParamsEnabled && /*#__PURE__*/jsxRuntime.jsx(DynamicQueryParams, {
-      queryParamsProps: queryParamsProps,
       updateCustomization: updateCustomization
     })]
   });
@@ -1253,18 +1287,25 @@ var ElementPopupPlaceholderImage = function ElementPopupPlaceholderImage(_ref2)
 };
 
 var ElementPopup = function ElementPopup(_ref) {
-  var iframeURL = _ref.iframeURL,
-    customization = _ref.customization;
+  var iframeURL = _ref.iframeURL;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
-  var elementSelector = customization.elementSelector;
+
+  /**
+   * Currently embed() function doesn't have an unembed handler.
+   * When iframe link changes, we don't have an option to reinitiate it.
+   * So we forcefully recreate the element with `key` and call embed() again
+   */
+  var elementSelectorId = React.useMemo(function () {
+    return "popup-button-".concat(Math.random().toString().substring(2, 10));
+  }, [iframeURL]);
   React.useEffect(function () {
-    var element = document.getElementById(elementSelector);
+    var element = document.getElementById(elementSelectorId);
     if (element) {
       var _window$globalProps$a;
       (_window$globalProps$a = window[globalProps.appName.replace(/^neeto/i, "neeto")]) === null || _window$globalProps$a === void 0 || _window$globalProps$a.embed(element, iframeURL);
     }
-  }, []);
+  }, [iframeURL]);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "relative h-full w-full overflow-hidden",
     children: [/*#__PURE__*/jsxRuntime.jsx(ElementPopupPlaceholderImage, {
@@ -1273,9 +1314,9 @@ var ElementPopup = function ElementPopup(_ref) {
       className: "absolute left-[48.5294117647%] top-[39.0804597701%]",
       "data-cy": "preview-element-popup-button",
       "data-testid": "preview-element-popup-button",
-      id: elementSelector,
+      id: elementSelectorId,
       label: t("neetoMolecules.productEmbed.elementPopup.label")
-    })]
+    }, elementSelectorId)]
   });
 };
 
@@ -1288,13 +1329,24 @@ var FloatingPopup = function FloatingPopup(_ref) {
     btnPosition = customization.btnPosition,
     btnColor = customization.btnColor,
     icon = customization.icon;
+
+  /**
+   * Currently embed() function doesn't have an unembed handler.
+   * When iframe link changes, we don't have an option to reinitiate it.
+   * So we forcefully recreate the element with `key` and call embed() again
+   */
+  var elementSelectorId = React.useMemo(function () {
+    return "popup-button-".concat(Math.random().toString().substring(2, 10));
+  }, [iframeURL]);
   React.useEffect(function () {
-    var _window$globalProps$a;
-    var btn = document.getElementById("embedBtn");
-    (_window$globalProps$a = window[globalProps.appName.replace(/^neeto/i, "neeto")]) === null || _window$globalProps$a === void 0 || _window$globalProps$a.embed(btn, iframeURL);
-  }, []);
+    var element = document.getElementById(elementSelectorId);
+    if (element) {
+      var _window$globalProps$a;
+      (_window$globalProps$a = window[globalProps.appName.replace(/^neeto/i, "neeto")]) === null || _window$globalProps$a === void 0 || _window$globalProps$a.embed(element, iframeURL);
+    }
+  }, [iframeURL]);
   React.useEffect(function () {
-    var btn = document.getElementById("embedBtn");
+    var btn = document.getElementById(elementSelectorId);
     btn.style.backgroundColor = btnColor;
     btn.style.color = btnTextColor;
   }, [btnColor, btnTextColor]);
@@ -1306,13 +1358,13 @@ var FloatingPopup = function FloatingPopup(_ref) {
       "data-cy": "popup-preview-button",
       icon: icon && showIcon ? icon : null,
       iconPosition: "left",
-      id: "embedBtn",
+      id: elementSelectorId,
       label: btnText,
       className: classnames("absolute bottom-0 m-4", {
         "left-0": btnPosition === "bottomLeft",
         "right-0": btnPosition === "bottomRight"
       })
-    })]
+    }, elementSelectorId)]
   });
 };
 
@@ -1329,6 +1381,14 @@ var Inline = function Inline(_ref) {
   });
 };
 
+var buildIframeURL = function buildIframeURL(iframeURL, queryParams) {
+  var url = new URL(iframeURL);
+  queryParams.forEach(function (param) {
+    url.searchParams.append(param.name, param.value);
+  });
+  return url.toString();
+};
+
 var Preview = function Preview(_ref) {
   var isScriptLoading = _ref.isScriptLoading,
     selectedEmbed = _ref.selectedEmbed,
@@ -1336,8 +1396,14 @@ var Preview = function Preview(_ref) {
     customization = _ref.customization,
     _ref$customPreviewIfr = _ref.customPreviewIframeUrl,
     customPreviewIframeUrl = _ref$customPreviewIfr === void 0 ? "" : _ref$customPreviewIfr;
+  var _useProductEmbedStore = useProductEmbedStore(function (store) {
+      return {
+        queryParams: store["queryParams"]
+      };
+    }, shallow.shallow),
+    queryParams = _useProductEmbedStore.queryParams;
   var preview = _defineProperty(_defineProperty(_defineProperty({}, EMBED_OPTIONS.INLINE, Inline), EMBED_OPTIONS.FLOATING_POPUP, FloatingPopup), EMBED_OPTIONS.ELEMENT_POPUP, ElementPopup);
-  var iframeURL = customPreviewIframeUrl || "".concat(location.origin, "/embed/").concat(id);
+  var iframeURL = buildIframeURL(customPreviewIframeUrl || "".concat(location.origin, "/embed/").concat(id), queryParams);
   var Component = preview[selectedEmbed];
   if (isScriptLoading) {
     return /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -1365,8 +1431,6 @@ var EmbedRenderer = function EmbedRenderer(_ref) {
     customEmbedScriptPath = _ref.customEmbedScriptPath,
     customPreviewIframeUrl = _ref.customPreviewIframeUrl,
     id = _ref.id,
-    queryParamsProps = _ref.queryParamsProps,
-    isQueryParamsEnabled = _ref.isQueryParamsEnabled,
     options = _ref.options,
     extraArgs = _ref.extraArgs,
     otherCustomizations = _ref.otherCustomizations,
@@ -1446,9 +1510,7 @@ var EmbedRenderer = function EmbedRenderer(_ref) {
             supportedLanguages: supportedLanguages
           }), /*#__PURE__*/jsxRuntime.jsx(CustomizationComponent, {
             customization: customization,
-            isQueryParamsEnabled: isQueryParamsEnabled,
             otherCustomizations: otherCustomizations,
-            queryParamsProps: queryParamsProps,
             updateCustomization: updateCustomization
           })]
         })
@@ -1568,6 +1630,18 @@ var ProductEmbed = function ProductEmbed(_ref) {
     search = _useLocation.search;
   var queryParams = new URLSearchParams(search);
   var selectedEmbed = toCamelCasedString(queryParams.get("type"));
+  var _useProductEmbedStore = useProductEmbedStore(function (store) {
+      return {
+        setProductEmbedState: store["setProductEmbedState"]
+      };
+    }, shallow.shallow),
+    setProductEmbedState = _useProductEmbedStore.setProductEmbedState;
+  React.useEffect(function () {
+    setProductEmbedState({
+      isQueryParamsEnabled: isQueryParamsEnabled,
+      queryParamsProps: queryParamsProps
+    });
+  }, []);
   return selectedEmbed ? /*#__PURE__*/jsxRuntime.jsx(EmbedRenderer, {
     className: className,
     customEmbedScriptPath: customEmbedScriptPath,
@@ -1575,7 +1649,6 @@ var ProductEmbed = function ProductEmbed(_ref) {
     extraArgs: extraArgs,
     id: id,
     inlineWrapperStyle: inlineWrapperStyle,
-    isQueryParamsEnabled: isQueryParamsEnabled,
     options: options,
     otherCustomizations: otherCustomizations,
     queryParamsProps: queryParamsProps,