@bigbinary/neeto-molecules 3.16.27 → 3.16.28

package/dist/ProductEmbed.js

@@ -1,8 +1,9 @@
+import { shallow } from 'zustand/shallow';
+import { useEffect, useState, useMemo } from 'react';
 import { isPresent, filterBy, hyphenate, noop } from '@bigbinary/neeto-cist';
 import { useLocation, useHistory } from 'react-router-dom';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { useState, useEffect } from 'react';
 import classnames from 'classnames';
 import LeftArrow from '@bigbinary/neeto-icons/LeftArrow';
 import Button from '@bigbinary/neetoui/Button';
@@ -21,6 +22,8 @@ import Delete from '@bigbinary/neeto-icons/Delete';
 import Plus from '@bigbinary/neeto-icons/Plus';
 import Label from '@bigbinary/neetoui/Label';
 import HelpPopover from './HelpPopover.js';
+import { withImmutableActions, handleMetaClick } from '@bigbinary/neeto-commons-frontend/react-utils';
+import { create } from 'zustand';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import Checkbox from '@bigbinary/neetoui/Checkbox';
@@ -29,7 +32,6 @@ import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructurin
 import Spinner from '@bigbinary/neetoui/Spinner';
 import BrowserPreview from './BrowserPreview.js';
 import { n } from './inject-css-DmrvuTKK.js';
-import { handleMetaClick } from '@bigbinary/neeto-commons-frontend/react-utils';
 import './index-DAYCJu79.js';
 import './_commonjsHelpers-BFTU3MAI.js';
 import './Breadcrumbs.js';
@@ -65,6 +67,24 @@ var INITIAL_QUERY_PARAM = {
   value: ""
 };
 
+/** @type {import("neetocommons/react-utils").ZustandStoreHook} */
+var useProductEmbedStore = create(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>");
@@ -237,14 +257,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 = useTranslation(),
     t = _useTranslation.t;
-  var _useState = 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),
+    queryParamsProps = _useProductEmbedStore.queryParamsProps,
+    queryParams = _useProductEmbedStore.queryParams,
+    setQueryParams = _useProductEmbedStore.setQueryParams;
   var handleAddQueryParam = function handleAddQueryParam() {
     setQueryParams([].concat(_toConsumableArray(queryParams), [INITIAL_QUERY_PARAM]));
   };
@@ -320,12 +345,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 = useTranslation(),
     t = _useTranslation.t;
+  var _useProductEmbedStore = useProductEmbedStore(function (store) {
+      return {
+        isQueryParamsEnabled: store["isQueryParamsEnabled"]
+      };
+    }, shallow),
+    isQueryParamsEnabled = _useProductEmbedStore.isQueryParamsEnabled;
   useEffect(function () {
     if (isQueryParamsEnabled) return;
     updateCustomization({
@@ -349,7 +378,6 @@ var ElementPopup$1 = function ElementPopup(_ref) {
         });
       }
     }), otherCustomizations(), isQueryParamsEnabled && /*#__PURE__*/jsx(DynamicQueryParams, {
-      queryParamsProps: queryParamsProps,
       updateCustomization: updateCustomization
     })]
   });
@@ -358,11 +386,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 = useTranslation(),
     t = _useTranslation.t;
+  var _useProductEmbedStore = useProductEmbedStore(function (store) {
+      return {
+        isQueryParamsEnabled: store["isQueryParamsEnabled"]
+      };
+    }, shallow),
+    isQueryParamsEnabled = _useProductEmbedStore.isQueryParamsEnabled;
   var btnTextColor = customization.btnTextColor,
     showIcon = customization.showIcon,
     btnText = customization.btnText,
@@ -446,7 +478,6 @@ var FloatingPopup$1 = function FloatingPopup(_ref) {
         });
       }
     }), otherCustomizations(), isQueryParamsEnabled && /*#__PURE__*/jsx(DynamicQueryParams, {
-      queryParamsProps: queryParamsProps,
       updateCustomization: updateCustomization
     })]
   });
@@ -455,14 +486,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 = useTranslation(),
+    t = _useTranslation.t;
+  var _useProductEmbedStore = useProductEmbedStore(function (store) {
+      return {
+        isQueryParamsEnabled: store["isQueryParamsEnabled"]
+      };
+    }, shallow),
+    isQueryParamsEnabled = _useProductEmbedStore.isQueryParamsEnabled;
   var height = customization.height,
     width = customization.width,
     elementSelector = customization.elementSelector;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
   var handleInputChange = function handleInputChange(_ref2, attribute) {
     var value = _ref2.target.value;
     return updateCustomization(_defineProperty({}, attribute, value));
@@ -523,7 +558,6 @@ var Inline$1 = function Inline(_ref) {
         }
       })]
     }), otherCustomizations(), isQueryParamsEnabled && /*#__PURE__*/jsx(DynamicQueryParams, {
-      queryParamsProps: queryParamsProps,
       updateCustomization: updateCustomization
     })]
   });
@@ -1251,18 +1285,25 @@ var ElementPopupPlaceholderImage = function ElementPopupPlaceholderImage(_ref2)
 };
 
 var ElementPopup = function ElementPopup(_ref) {
-  var iframeURL = _ref.iframeURL,
-    customization = _ref.customization;
+  var iframeURL = _ref.iframeURL;
   var _useTranslation = 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 = useMemo(function () {
+    return "popup-button-".concat(Math.random().toString().substring(2, 10));
+  }, [iframeURL]);
   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__*/jsxs("div", {
     className: "relative h-full w-full overflow-hidden",
     children: [/*#__PURE__*/jsx(ElementPopupPlaceholderImage, {
@@ -1271,9 +1312,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)]
   });
 };
 
@@ -1286,13 +1327,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 = useMemo(function () {
+    return "popup-button-".concat(Math.random().toString().substring(2, 10));
+  }, [iframeURL]);
   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]);
   useEffect(function () {
-    var btn = document.getElementById("embedBtn");
+    var btn = document.getElementById(elementSelectorId);
     btn.style.backgroundColor = btnColor;
     btn.style.color = btnTextColor;
   }, [btnColor, btnTextColor]);
@@ -1304,13 +1356,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)]
   });
 };
 
@@ -1327,6 +1379,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,
@@ -1334,8 +1394,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),
+    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__*/jsx("div", {
@@ -1363,8 +1429,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,
@@ -1444,9 +1508,7 @@ var EmbedRenderer = function EmbedRenderer(_ref) {
             supportedLanguages: supportedLanguages
           }), /*#__PURE__*/jsx(CustomizationComponent, {
             customization: customization,
-            isQueryParamsEnabled: isQueryParamsEnabled,
             otherCustomizations: otherCustomizations,
-            queryParamsProps: queryParamsProps,
             updateCustomization: updateCustomization
           })]
         })
@@ -1566,6 +1628,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),
+    setProductEmbedState = _useProductEmbedStore.setProductEmbedState;
+  useEffect(function () {
+    setProductEmbedState({
+      isQueryParamsEnabled: isQueryParamsEnabled,
+      queryParamsProps: queryParamsProps
+    });
+  }, []);
   return selectedEmbed ? /*#__PURE__*/jsx(EmbedRenderer, {
     className: className,
     customEmbedScriptPath: customEmbedScriptPath,
@@ -1573,7 +1647,6 @@ var ProductEmbed = function ProductEmbed(_ref) {
     extraArgs: extraArgs,
     id: id,
     inlineWrapperStyle: inlineWrapperStyle,
-    isQueryParamsEnabled: isQueryParamsEnabled,
     options: options,
     otherCustomizations: otherCustomizations,
     queryParamsProps: queryParamsProps,