@bigbinary/neeto-molecules 3.16.65 → 3.16.67

package/dist/cjs/ProductEmbed.js

@@ -138,10 +138,28 @@ var elementPopupEmbedCode$1 = function elementPopupEmbedCode(_ref5) {
     queryParams = customization.queryParams;
   return "\n  <!-- This is a demo button, you can use any element on your website instead. -->\n  <button id=\"".concat(elementSelector, "\">Click to open popup</button>\n\n  <!-- ").concat(globalProps.appName, " element-click embed code begins -->\n  ").concat(embedBaseScript(embedScriptLink), "\n  <script>\n    ").concat(camelCasedAppName$1, ".embed({\n      type: \"elementClick\",\n      id: \"").concat(id, "\",\n      organization: \"").concat(globalProps.organization.subdomain, "\",\n      elementSelector: \"#").concat(elementSelector, "\",").concat(embedQueryParam$1(queryParams)).concat(embedEnv$1()).concat(parseExtraArgs$1(extraArgs), "\n    });\n  </script>\n  <!-- ").concat(globalProps.appName, " element-click embed code ends -->");
 };
+var iframeEmbedCode$1 = function iframeEmbedCode(_ref6) {
+  var id = _ref6.id,
+    customization = _ref6.customization,
+    extraArgs = _ref6.extraArgs;
+  var height = customization.height,
+    width = customization.width,
+    iframeTitle = customization.iframeTitle,
+    iframeUrl = customization.iframeUrl,
+    queryParams = customization.queryParams;
+  var iframeSrc = buildIframeURL$1({
+    id: id,
+    iframeUrl: iframeUrl,
+    queryParams: queryParams,
+    extraArgs: extraArgs
+  });
+  return "\n  <!-- ".concat(globalProps.appName, " iframe embed code begins -->\n  <iframe\n    allowfullscreen\n    height=\"").concat(height, "%\"\n    width=\"").concat(width, "%\"\n    frameborder=\"0\"\n    title=\"").concat(iframeTitle, "\"\n    src=\"").concat(iframeSrc, "\"\n  />\n  <!-- ").concat(globalProps.appName, " iframe embed code ends -->");
+};
 var htmlCodeGenerators = {
   inline: inlineEmbedCode$1,
   floatingPopup: floatingPopupEmbedCode$1,
-  elementPopup: elementPopupEmbedCode$1
+  elementPopup: elementPopupEmbedCode$1,
+  iframe: iframeEmbedCode$1
 };
 
 var camelCasedAppName = globalProps.appName.replace(/^neeto/i, "neeto");
@@ -209,10 +227,28 @@ var elementPopupEmbedCode = function elementPopupEmbedCode(_ref5) {
     queryParams = customization.queryParams;
   return "\n  import { useEffect } from \"react\";\n\n  const App = () => {\n    const ".concat(embedFunctionName, " = () => {\n      ").concat(embedScript(embedScriptLink), "\n      embedScript.onload = () => {\n        window.").concat(camelCasedAppName, ".embed({\n          type: \"elementClick\",\n          id: \"").concat(id, "\",\n          organization: \"").concat(globalProps.organization.subdomain, "\",\n          elementSelector: \"#").concat(elementSelector, "\",").concat(embedQueryParam(queryParams)).concat(embedEnv()).concat(parseExtraArgs(extraArgs), "\n        });\n      };\n\n      document.body.appendChild(embedScript);\n      ").concat(cleanupFunction, "\n    };\n\n    useEffect(() => ").concat(embedFunctionName, "(), []);\n\n    return <button id=\"").concat(elementSelector, "\">Click to open popup</button>;\n  };");
 };
+var iframeEmbedCode = function iframeEmbedCode(_ref6) {
+  var customization = _ref6.customization,
+    id = _ref6.id,
+    extraArgs = _ref6.extraArgs;
+  var height = customization.height,
+    width = customization.width,
+    iframeTitle = customization.iframeTitle,
+    iframeUrl = customization.iframeUrl,
+    queryParams = customization.queryParams;
+  var iframeSrc = buildIframeURL$1({
+    id: id,
+    iframeUrl: iframeUrl,
+    queryParams: queryParams,
+    extraArgs: extraArgs
+  });
+  return "\n  const App = () => {\n    return (\n      <>\n        {/* ".concat(globalProps.appName, " iframe embed code begins */}\n        <iframe\n          allowFullScreen\n          height=\"").concat(height, "%\"\n          width=\"").concat(width, "%\"\n          frameBorder=\"0\"\n          title=\"").concat(iframeTitle, "\"\n          src=\"").concat(iframeSrc, "\"\n        />\n        {/* ").concat(globalProps.appName, " iframe embed code ends */}\n      </>\n    );\n  };\n  ");
+};
 var reactCodeGenerators = {
   inline: inlineEmbedCode,
   floatingPopup: floatingPopupEmbedCode,
-  elementPopup: elementPopupEmbedCode
+  elementPopup: elementPopupEmbedCode,
+  iframe: iframeEmbedCode
 };
 
 var _excluded = ["selectedLanguage", "type"];
@@ -247,6 +283,32 @@ var toCamelCasedString = function toCamelCasedString(string) {
     return nextChar.toUpperCase();
   });
 };
+var buildIframeURL$1 = function buildIframeURL(_ref3) {
+  var id = _ref3.id,
+    iframeURL = _ref3.iframeURL,
+    queryParams = _ref3.queryParams,
+    extraArgs = _ref3.extraArgs;
+  var url = new URL(iframeURL || "".concat(location.origin, "/embed/").concat(id));
+  if (!queryParams && !extraArgs) return url.toString();
+  if (queryParams) {
+    var parsedQueryParams = JSON.parse(queryParams);
+    Object.entries(parsedQueryParams).forEach(function (_ref4) {
+      var _ref5 = _slicedToArray(_ref4, 2),
+        key = _ref5[0],
+        value = _ref5[1];
+      url.searchParams.append(key, value);
+    });
+  }
+  if (extraArgs) {
+    Object.entries(extraArgs).forEach(function (_ref6) {
+      var _ref7 = _slicedToArray(_ref6, 2),
+        key = _ref7[0],
+        value = _ref7[1];
+      url.searchParams.append(key, value);
+    });
+  }
+  return url.toString();
+};
 
 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; }
@@ -476,6 +538,72 @@ var FloatingPopup$1 = function FloatingPopup(_ref) {
   });
 };
 
+var Iframe$1 = function Iframe(_ref) {
+  var customization = _ref.customization,
+    updateCustomization = _ref.updateCustomization,
+    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;
+  var handleInputChange = function handleInputChange(_ref2, attribute) {
+    var value = _ref2.target.value;
+    return updateCustomization(_defineProperty({}, attribute, value));
+  };
+  React.useEffect(function () {
+    if (isQueryParamsEnabled) return;
+    updateCustomization({
+      queryParams: undefined
+    });
+  }, []);
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex flex-col gap-2",
+      children: [/*#__PURE__*/jsxRuntime.jsx(Label, {
+        "data-cy": "window-size-text",
+        children: t("neetoMolecules.productEmbed.iframe.sizeOfIframe")
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex justify-between gap-x-2",
+        children: [/*#__PURE__*/jsxRuntime.jsx(Input, {
+          className: "neeto-molecules-product-embed-size-input",
+          "data-cy": "iframe-width-input-field",
+          "data-testid": "iframe-width-input-field",
+          max: 100,
+          min: 0,
+          prefix: "W",
+          suffix: "%",
+          type: "number",
+          value: width,
+          onChange: function onChange(e) {
+            return handleInputChange(e, "width");
+          }
+        }), /*#__PURE__*/jsxRuntime.jsx(Input, {
+          className: "neeto-molecules-product-embed-size-input",
+          "data-cy": "iframe-height-input-field",
+          "data-testid": "iframe-height-input-field",
+          max: 100,
+          min: 0,
+          prefix: "H",
+          suffix: "%",
+          type: "number",
+          value: height,
+          onChange: function onChange(e) {
+            return handleInputChange(e, "height");
+          }
+        })]
+      })]
+    }), otherCustomizations(), isQueryParamsEnabled && /*#__PURE__*/jsxRuntime.jsx(DynamicQueryParams, {
+      updateCustomization: updateCustomization
+    })]
+  });
+};
+
 var Inline$1 = function Inline(_ref) {
   var customization = _ref.customization,
     updateCustomization = _ref.updateCustomization,
@@ -1034,10 +1162,11 @@ var ElementPopupIcon = function ElementPopupIcon(_ref3) {
 var EMBED_OPTIONS = {
   INLINE: "inline",
   FLOATING_POPUP: "floatingPopup",
-  ELEMENT_POPUP: "elementPopup"
+  ELEMENT_POPUP: "elementPopup",
+  IFRAME: "iframe"
 };
-var EMBED_ICONS = _defineProperty(_defineProperty(_defineProperty({}, EMBED_OPTIONS.INLINE, InlineEmbedIcon), EMBED_OPTIONS.FLOATING_POPUP, FloatingPopupIcon), EMBED_OPTIONS.ELEMENT_POPUP, ElementPopupIcon);
-var DEFAULT_CUSTOMIZATION = _defineProperty(_defineProperty(_defineProperty({}, EMBED_OPTIONS.INLINE, {
+var EMBED_ICONS = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, EMBED_OPTIONS.INLINE, InlineEmbedIcon), EMBED_OPTIONS.FLOATING_POPUP, FloatingPopupIcon), EMBED_OPTIONS.ELEMENT_POPUP, ElementPopupIcon), EMBED_OPTIONS.IFRAME, InlineEmbedIcon);
+var DEFAULT_CUSTOMIZATION = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, EMBED_OPTIONS.INLINE, {
   width: 100,
   height: 100,
   elementSelector: "inline-embed-container"
@@ -1049,9 +1178,13 @@ var DEFAULT_CUSTOMIZATION = _defineProperty(_defineProperty(_defineProperty({},
   btnPosition: "bottomRight"
 }), EMBED_OPTIONS.ELEMENT_POPUP, {
   elementSelector: "open-popup-button"
+}), EMBED_OPTIONS.IFRAME, {
+  height: 100,
+  width: 100,
+  iframeTitle: "Iframe embed"
 });
-var EMBED_CUSTOMIZATION_COMPONENTS = _defineProperty(_defineProperty(_defineProperty({}, EMBED_OPTIONS.INLINE, Inline$1), EMBED_OPTIONS.FLOATING_POPUP, FloatingPopup$1), EMBED_OPTIONS.ELEMENT_POPUP, ElementPopup$1);
-var EMBED_TITLES = _defineProperty(_defineProperty(_defineProperty({}, EMBED_OPTIONS.INLINE, i18next.t("neetoMolecules.productEmbed.inline.title")), EMBED_OPTIONS.FLOATING_POPUP, i18next.t("neetoMolecules.productEmbed.floatingPopup.title")), EMBED_OPTIONS.ELEMENT_POPUP, i18next.t("neetoMolecules.productEmbed.elementPopup.title"));
+var EMBED_CUSTOMIZATION_COMPONENTS = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, EMBED_OPTIONS.INLINE, Inline$1), EMBED_OPTIONS.FLOATING_POPUP, FloatingPopup$1), EMBED_OPTIONS.ELEMENT_POPUP, ElementPopup$1), EMBED_OPTIONS.IFRAME, Iframe$1);
+var EMBED_TITLES = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, EMBED_OPTIONS.INLINE, i18next.t("neetoMolecules.productEmbed.inline.title")), EMBED_OPTIONS.FLOATING_POPUP, i18next.t("neetoMolecules.productEmbed.floatingPopup.title")), EMBED_OPTIONS.ELEMENT_POPUP, i18next.t("neetoMolecules.productEmbed.elementPopup.title")), EMBED_OPTIONS.IFRAME, i18next.t("neetoMolecules.productEmbed.iframe.title"));
 var SUPPORTED_LANGUAGES = [{
   value: "html",
   label: i18next.t("neetoMolecules.productEmbed.language.html")
@@ -1325,6 +1458,23 @@ var FloatingPopup = function FloatingPopup(_ref) {
   });
 };
 
+var Iframe = function Iframe(_ref) {
+  var iframeURL = _ref.iframeURL,
+    customization = _ref.customization;
+  var height = customization.height,
+    width = customization.width,
+    iframeTitle = customization.iframeTitle;
+  return /*#__PURE__*/jsxRuntime.jsx("iframe", {
+    allowFullScreen: true,
+    className: "m-auto",
+    frameBorder: "0",
+    height: "".concat(height, "%"),
+    src: iframeURL,
+    title: iframeTitle,
+    width: "".concat(width, "%")
+  });
+};
+
 var Inline = function Inline(_ref) {
   var iframeURL = _ref.iframeURL,
     customization = _ref.customization;
@@ -1359,7 +1509,7 @@ var Preview = function Preview(_ref) {
       };
     }, 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 preview = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, EMBED_OPTIONS.INLINE, Inline), EMBED_OPTIONS.FLOATING_POPUP, FloatingPopup), EMBED_OPTIONS.ELEMENT_POPUP, ElementPopup), EMBED_OPTIONS.IFRAME, Iframe);
   var iframeURL = buildIframeURL(customPreviewIframeUrl || "".concat(location.origin, "/embed/").concat(id), queryParams);
   var Component = preview[selectedEmbed];
   if (isScriptLoading) {