@bigbinary/neeto-molecules 1.16.3 → 1.17.0

package/dist/cjs/ProductEmbed.js

@@ -10,6 +10,7 @@ var ramda = require('ramda');
 var reactI18next = require('react-i18next');
 var Codeblock = require('./Codeblock.js');
 var i18next = require('i18next');
+var toConsumableArray = require('./toConsumableArray-9abb3858.js');
 var injectCss = require('./inject-css-80a5faa3.js');
 require('./extends-1b35a664.js');
 require('react-syntax-highlighter');
@@ -67,12 +68,211 @@ var DEFAULT_CUSTOMIZATION = defineProperty._defineProperty(defineProperty._defin
 });
 var SCRIPT_ID = "embed-script";
 
+var FLOATING_BUTTON_POSITIONS = [{
+  label: i18next.t("neetoMolecules.productEmbed.customization.position.bottomLeft"),
+  value: "bottomLeft"
+}, {
+  label: i18next.t("neetoMolecules.productEmbed.customization.position.bottomRight"),
+  value: "bottomRight"
+}];
+var INITIAL_QUERY_PARAM = {
+  name: "",
+  value: ""
+};
+
+var embedBaseScript = function embedBaseScript(embedScriptLink) {
+  return "<script>window.".concat(globalProps.appName, " = window.").concat(globalProps.appName, " || { embed: function(){(").concat(globalProps.appName, ".q=").concat(globalProps.appName, ".q||[]).push(arguments)} };</script>\n  <script async\n    src=\"").concat(embedScriptLink, "\">\n  </script>");
+};
+var embedEnv = function embedEnv() {
+  return globalProps.railsEnv !== "production" ? "\n\t  env: \"".concat(globalProps.railsEnv, "\",") : "";
+};
+var embedQueryParam = function embedQueryParam(queryParams) {
+  return queryParams ? "\n\t  queryParams: ".concat(queryParams, ",") : "";
+};
+var parseExtraArgs = function parseExtraArgs(extraArgs) {
+  return ramda.toPairs(extraArgs).map(function (_ref) {
+    var _ref2 = slicedToArray._slicedToArray(_ref, 2),
+      key = _ref2[0],
+      value = _ref2[1];
+    return "\n\t  ".concat(key, ": \"").concat(value, "\"");
+  });
+};
+var inlineEmbedCode = function inlineEmbedCode(_ref3) {
+  var customization = _ref3.customization,
+    id = _ref3.id,
+    embedScriptLink = _ref3.embedScriptLink,
+    extraArgs = _ref3.extraArgs;
+  var elementSelector = customization.elementSelector,
+    _customization$width = customization.width,
+    width = _customization$width === void 0 ? 100 : _customization$width,
+    _customization$height = customization.height,
+    height = _customization$height === void 0 ? 100 : _customization$height,
+    queryParams = customization.queryParams;
+  return "\n  <!-- ".concat(globalProps.appName, " inline embed code begins -->\n  <div style=\"min-width: 90vw; height: 90vh;\" id=\"").concat(elementSelector, "\">\n    <!-- ").concat(globalProps.appName, " widget will be added here -->\n  </div>\n  ").concat(embedBaseScript(embedScriptLink), "\n  <script>\n    ").concat(globalProps.appName, ".embed({\n      type: \"inline\",\n      id: \"").concat(id, "\",\n      organization: \"").concat(globalProps.organization.subdomain, "\",\n      elementSelector: \"#").concat(elementSelector, "\",\n      styles: { height: \"").concat(height, "%\", width: \"").concat(width, "%\"},").concat(embedQueryParam(queryParams)).concat(embedEnv()).concat(parseExtraArgs(extraArgs), "\n    });\n  </script>\n  <!-- ").concat(globalProps.appName, " inline embed code ends -->");
+};
+var floatingPopupEmbedCode = function floatingPopupEmbedCode(_ref4) {
+  var customization = _ref4.customization,
+    id = _ref4.id,
+    embedScriptLink = _ref4.embedScriptLink,
+    extraArgs = _ref4.extraArgs;
+  var btnTextColor = customization.btnTextColor,
+    showIcon = customization.showIcon,
+    btnText = customization.btnText,
+    btnPosition = customization.btnPosition,
+    btnColor = customization.btnColor,
+    icon = customization.icon,
+    queryParams = customization.queryParams;
+  return "\n  <!-- ".concat(globalProps.appName, " floating-popup embed code begins -->\n  ").concat(embedBaseScript(embedScriptLink), "\n  <script>\n    ").concat(globalProps.appName, ".embed({\n      type: \"floatingPopup\",\n      id: \"").concat(id, "\",\n      organization: \"").concat(globalProps.organization.subdomain, "\",\n      styles: {\n        btnTextColor: \"").concat(btnTextColor, "\",\n        btnPosition: \"").concat(btnPosition, "\",\n        btnColor: \"").concat(btnColor, "\",\n        btnText: \"").concat(btnText, "\", ").concat(icon ? "\n\t\tshowIcon: ".concat(showIcon, ",") : "", "\n      },").concat(embedQueryParam(queryParams)).concat(embedEnv()).concat(parseExtraArgs(extraArgs), "\n    });\n  </script>\n  <!-- ").concat(globalProps.appName, " floating-popup embed code ends -->");
+};
+var elementPopupEmbedCode = function elementPopupEmbedCode(_ref5) {
+  var customization = _ref5.customization,
+    id = _ref5.id,
+    embedScriptLink = _ref5.embedScriptLink,
+    extraArgs = _ref5.extraArgs;
+  var elementSelector = customization.elementSelector,
+    queryParams = customization.queryParams;
+  return "\n  <!-- ".concat(globalProps.appName, " element-click embed code begins -->\n  ").concat(embedBaseScript(embedScriptLink), "\n  <script>\n    ").concat(globalProps.appName, ".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  </script>\n  <!-- ").concat(globalProps.appName, " element-click embed code ends -->");
+};
+var embedCode = function embedCode(_ref6) {
+  var type = _ref6.type,
+    customization = _ref6.customization,
+    id = _ref6.id,
+    embedScriptLink = _ref6.embedScriptLink,
+    _ref6$extraArgs = _ref6.extraArgs,
+    extraArgs = _ref6$extraArgs === void 0 ? {} : _ref6$extraArgs;
+  switch (type) {
+    case "inline":
+      return inlineEmbedCode({
+        customization: customization,
+        id: id,
+        embedScriptLink: embedScriptLink,
+        extraArgs: extraArgs
+      });
+    case "floatingPopup":
+      return floatingPopupEmbedCode({
+        customization: customization,
+        id: id,
+        embedScriptLink: embedScriptLink,
+        extraArgs: extraArgs
+      });
+    case "elementPopup":
+      return elementPopupEmbedCode({
+        customization: customization,
+        id: id,
+        embedScriptLink: embedScriptLink,
+        extraArgs: extraArgs
+      });
+    default:
+      return "";
+  }
+};
+var buildDefaultCustomization = function buildDefaultCustomization(defaultCustomizations) {
+  return ramda.mergeDeepLeft(defaultCustomizations, DEFAULT_CUSTOMIZATION);
+};
+var buildQueryParamsFromInputFields = function buildQueryParamsFromInputFields(inputFields) {
+  var filteredInputFields = inputFields.filter(function (_ref7) {
+    var name = _ref7.name,
+      value = _ref7.value;
+    return name && value;
+  });
+  var queryParams = filteredInputFields.reduce(function (queryParams, _ref8) {
+    var name = _ref8.name,
+      value = _ref8.value;
+    queryParams[name] = value;
+    return queryParams;
+  }, {});
+  if (ramda.isEmpty(queryParams)) return "";
+  var queryParamJsonString = JSON.stringify(queryParams, null, 2);
+  return queryParamJsonString.replace(/"([^"]+)":/g, "$1: ").replace(/\n/g, " ").replace(/\s\s+/g, " ");
+};
+
+function ownKeys$1(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$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { defineProperty._defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var DynamicQueryParams = function DynamicQueryParams(_ref) {
+  var updateCustomization = _ref.updateCustomization;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useState = React.useState([INITIAL_QUERY_PARAM]),
+    _useState2 = slicedToArray._slicedToArray(_useState, 2),
+    queryParams = _useState2[0],
+    setQueryParams = _useState2[1];
+  var handleAddQueryParam = function handleAddQueryParam() {
+    setQueryParams([].concat(toConsumableArray._toConsumableArray(queryParams), [INITIAL_QUERY_PARAM]));
+  };
+  var handleRemoveQueryParam = function handleRemoveQueryParam(index) {
+    var newQueryParams = queryParams.filter(function (_, i) {
+      return i !== index;
+    });
+    setQueryParams(newQueryParams);
+  };
+  var handleInputChange = function handleInputChange(index, field, value) {
+    var newQueryParams = queryParams.map(function (param, i) {
+      return i === index ? _objectSpread$1(_objectSpread$1({}, param), {}, defineProperty._defineProperty({}, field, value)) : param;
+    });
+    setQueryParams(newQueryParams);
+  };
+  React.useEffect(function () {
+    updateCustomization({
+      queryParams: buildQueryParamsFromInputFields(queryParams)
+    });
+  }, [queryParams]);
+  return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(neetoui.Label, {
+    className: "mb-2",
+    "data-cy": "dynamic-query-params-label"
+  }, t("neetoMolecules.productEmbed.customization.queryParam.label")), queryParams.map(function (param, index) {
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "mb-1 flex gap-1",
+      key: index
+    }, /*#__PURE__*/React__default["default"].createElement(neetoui.Input, {
+      "data-cy": "dynamic-query-key-name-input",
+      "data-testid": "dynamic-query-key-name-input",
+      name: "queryParams.".concat(index, ".name"),
+      value: param.name,
+      placeholder: t("neetoMolecules.productEmbed.customization.queryParam.keyNamePlaceholder"),
+      onChange: function onChange(e) {
+        return handleInputChange(index, "name", e.target.value);
+      }
+    }), /*#__PURE__*/React__default["default"].createElement(neetoui.Input, {
+      "data-cy": "dynamic-query-key-value-input",
+      "data-testid": "dynamic-query-key-value-input",
+      name: "queryParams.".concat(index, ".value"),
+      value: param.value,
+      placeholder: t("neetoMolecules.productEmbed.customization.queryParam.keyValuePlaceholder"),
+      onChange: function onChange(e) {
+        return handleInputChange(index, "value", e.target.value);
+      }
+    }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+      "data-cy": "dynamic-query-delete-button",
+      icon: neetoIcons.Delete,
+      style: "text",
+      onClick: function onClick() {
+        return handleRemoveQueryParam(index);
+      }
+    }));
+  }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+    className: "my-2",
+    "data-cy": "dynamic-query-add-new-button",
+    icon: neetoIcons.Plus,
+    iconPosition: "left",
+    style: "link",
+    label: t("neetoMolecules.productEmbed.customization.queryParam.addQueryParam"),
+    onClick: handleAddQueryParam
+  }));
+};
+
 var ElementPopup$1 = function ElementPopup(_ref) {
   var customization = _ref.customization,
-    updateCustomization = _ref.updateCustomization;
+    updateCustomization = _ref.updateCustomization,
+    isQueryParamsEnabled = _ref.isQueryParamsEnabled;
   var elementSelector = customization.elementSelector;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
+  React.useEffect(function () {
+    if (isQueryParamsEnabled) return;
+    updateCustomization({
+      queryParams: undefined
+    });
+  }, []);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "space-y-6"
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
@@ -92,20 +292,15 @@ var ElementPopup$1 = function ElementPopup(_ref) {
         elementSelector: e.target.value
       });
     }
+  }), isQueryParamsEnabled && /*#__PURE__*/React__default["default"].createElement(DynamicQueryParams, {
+    updateCustomization: updateCustomization
   }));
 };
 
-var FLOATING_BUTTON_POSITIONS = [{
-  label: i18next.t("neetoMolecules.productEmbed.customization.position.bottomLeft"),
-  value: "bottomLeft"
-}, {
-  label: i18next.t("neetoMolecules.productEmbed.customization.position.bottomRight"),
-  value: "bottomRight"
-}];
-
 var FloatingPopup$1 = function FloatingPopup(_ref) {
   var customization = _ref.customization,
-    updateCustomization = _ref.updateCustomization;
+    updateCustomization = _ref.updateCustomization,
+    isQueryParamsEnabled = _ref.isQueryParamsEnabled;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var btnTextColor = customization.btnTextColor,
@@ -114,6 +309,12 @@ var FloatingPopup$1 = function FloatingPopup(_ref) {
     btnPosition = customization.btnPosition,
     btnColor = customization.btnColor,
     icon = customization.icon;
+  React.useEffect(function () {
+    if (isQueryParamsEnabled) return;
+    updateCustomization({
+      queryParams: undefined
+    });
+  }, []);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "space-y-6"
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
@@ -177,12 +378,15 @@ var FloatingPopup$1 = function FloatingPopup(_ref) {
         btnTextColor: e.hex
       });
     }
-  })));
+  })), isQueryParamsEnabled && /*#__PURE__*/React__default["default"].createElement(DynamicQueryParams, {
+    updateCustomization: updateCustomization
+  }));
 };
 
 var Inline$1 = function Inline(_ref) {
   var customization = _ref.customization,
-    updateCustomization = _ref.updateCustomization;
+    updateCustomization = _ref.updateCustomization,
+    isQueryParamsEnabled = _ref.isQueryParamsEnabled;
   var height = customization.height,
     width = customization.width,
     elementSelector = customization.elementSelector;
@@ -192,6 +396,12 @@ var Inline$1 = function Inline(_ref) {
     var value = _ref2.target.value;
     return updateCustomization(defineProperty._defineProperty({}, attribute, value));
   };
+  React.useEffect(function () {
+    if (isQueryParamsEnabled) return;
+    updateCustomization({
+      queryParams: undefined
+    });
+  }, []);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex flex-col gap-y-6"
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
@@ -240,17 +450,21 @@ var Inline$1 = function Inline(_ref) {
     onChange: function onChange(e) {
       return handleInputChange(e, "elementSelector");
     }
-  })));
+  })), isQueryParamsEnabled && /*#__PURE__*/React__default["default"].createElement(DynamicQueryParams, {
+    updateCustomization: updateCustomization
+  }));
 };
 
 var Customization = function Customization(_ref) {
   var option = _ref.option,
     customization = _ref.customization,
-    updateCustomization = _ref.updateCustomization;
+    updateCustomization = _ref.updateCustomization,
+    isQueryParamsEnabled = _ref.isQueryParamsEnabled;
   var type = defineProperty._defineProperty(defineProperty._defineProperty(defineProperty._defineProperty({}, EMBED_OPTIONS.INLINE, Inline$1), EMBED_OPTIONS.FLOATING_POPUP, FloatingPopup$1), EMBED_OPTIONS.ELEMENT_POPUP, ElementPopup$1);
   var Component = type[option];
   return /*#__PURE__*/React__default["default"].createElement(Component, {
     customization: customization,
+    isQueryParamsEnabled: isQueryParamsEnabled,
     updateCustomization: updateCustomization
   });
 };
@@ -443,90 +657,6 @@ var Preview = function Preview(_ref) {
 var css = ".neeto-molecules-product-embed-size-input.neeto-ui-input__wrapper .neeto-ui-input__prefix{align-self:stretch;background-color:rgb(var(--neeto-ui-gray-200));margin-left:0!important;padding-left:12px;padding-right:12px}.neeto-molecules-product-embed-tab{gap:.5rem}.neeto-molecules-product-embed-tab .neeto-ui-tab{border-radius:var(--neeto-ui-btn-border-radius);color:rgb(var(--neeto-ui-gray-800))}.neeto-molecules-product-embed-tab .neeto-ui-tab:not(.active):hover{background-color:rgb(var(--neeto-ui-gray-100))}.neeto-molecules-product-embed-tab .neeto-ui-tab.active{background-color:rgb(var(--neeto-ui-gray-200))}.neeto-molecules-embed-left-sidebar{align-items:flex-start;display:flex;flex-direction:column;flex-shrink:0;max-width:28rem;overflow-y:auto;padding:1.5rem;width:100%}";
 injectCss.n(css,{});
 
-var embedBaseScript = function embedBaseScript(embedScriptLink) {
-  return "<script>window.".concat(globalProps.appName, " = window.").concat(globalProps.appName, " || { embed: function(){(").concat(globalProps.appName, ".q=").concat(globalProps.appName, ".q||[]).push(arguments)} };</script>\n  <script async\n    src=\"").concat(embedScriptLink, "\">\n  </script>");
-};
-var embedEnv = function embedEnv() {
-  return globalProps.railsEnv !== "production" ? "\n\t  env: \"".concat(globalProps.railsEnv, "\",") : "";
-};
-var parseExtraArgs = function parseExtraArgs(extraArgs) {
-  return ramda.toPairs(extraArgs).map(function (_ref) {
-    var _ref2 = slicedToArray._slicedToArray(_ref, 2),
-      key = _ref2[0],
-      value = _ref2[1];
-    return "\n\t  ".concat(key, ": \"").concat(value, "\"");
-  });
-};
-var inlineEmbedCode = function inlineEmbedCode(_ref3) {
-  var customization = _ref3.customization,
-    id = _ref3.id,
-    embedScriptLink = _ref3.embedScriptLink,
-    extraArgs = _ref3.extraArgs;
-  var elementSelector = customization.elementSelector,
-    _customization$width = customization.width,
-    width = _customization$width === void 0 ? 100 : _customization$width,
-    _customization$height = customization.height,
-    height = _customization$height === void 0 ? 100 : _customization$height;
-  return "\n  <!-- ".concat(globalProps.appName, " inline embed code begins -->\n  <div style=\"min-width: 90vw; height: 90vh;\" id=\"").concat(elementSelector, "\">\n    <!-- ").concat(globalProps.appName, " widget will be added here -->\n  </div>\n  ").concat(embedBaseScript(embedScriptLink), "\n  <script>\n    ").concat(globalProps.appName, ".embed({\n      type: \"inline\",\n      id: \"").concat(id, "\",\n      organization: \"").concat(globalProps.organization.subdomain, "\",\n      elementSelector: \"#").concat(elementSelector, "\",\n      styles: { height: \"").concat(height, "%\", width: \"").concat(width, "%\"},").concat(embedEnv()).concat(parseExtraArgs(extraArgs), "\n    });\n  </script>\n  <!-- ").concat(globalProps.appName, " inline embed code ends -->");
-};
-var floatingPopupEmbedCode = function floatingPopupEmbedCode(_ref4) {
-  var customization = _ref4.customization,
-    id = _ref4.id,
-    embedScriptLink = _ref4.embedScriptLink,
-    extraArgs = _ref4.extraArgs;
-  var btnTextColor = customization.btnTextColor,
-    showIcon = customization.showIcon,
-    btnText = customization.btnText,
-    btnPosition = customization.btnPosition,
-    btnColor = customization.btnColor,
-    icon = customization.icon;
-  return "\n  <!-- ".concat(globalProps.appName, " floating-popup embed code begins -->\n  ").concat(embedBaseScript(embedScriptLink), "\n  <script>\n    ").concat(globalProps.appName, ".embed({\n      type: \"floatingPopup\",\n      id: \"").concat(id, "\",\n      organization: \"").concat(globalProps.organization.subdomain, "\",\n      styles: {\n        btnTextColor: \"").concat(btnTextColor, "\",\n        btnPosition: \"").concat(btnPosition, "\",\n        btnColor: \"").concat(btnColor, "\",\n        btnText: \"").concat(btnText, "\", ").concat(icon ? "\n\t\tshowIcon: ".concat(showIcon, ",") : "", "\n      },").concat(embedEnv()).concat(parseExtraArgs(extraArgs), "\n    });\n  </script>\n  <!-- ").concat(globalProps.appName, " floating-popup embed code ends -->");
-};
-var elementPopupEmbedCode = function elementPopupEmbedCode(_ref5) {
-  var customization = _ref5.customization,
-    id = _ref5.id,
-    embedScriptLink = _ref5.embedScriptLink,
-    extraArgs = _ref5.extraArgs;
-  var elementSelector = customization.elementSelector;
-  return "\n  <!-- ".concat(globalProps.appName, " element-click embed code begins -->\n  ").concat(embedBaseScript(embedScriptLink), "\n  <script>\n    ").concat(globalProps.appName, ".embed({\n      type: \"elementClick\",\n      id: \"").concat(id, "\",\n      organization: \"").concat(globalProps.organization.subdomain, "\",\n      elementSelector: \"#").concat(elementSelector, "\",").concat(embedEnv()).concat(parseExtraArgs(extraArgs), "\n    });\n  </script>\n  <!-- ").concat(globalProps.appName, " element-click embed code ends -->");
-};
-var embedCode = function embedCode(_ref6) {
-  var type = _ref6.type,
-    customization = _ref6.customization,
-    id = _ref6.id,
-    embedScriptLink = _ref6.embedScriptLink,
-    _ref6$extraArgs = _ref6.extraArgs,
-    extraArgs = _ref6$extraArgs === void 0 ? {} : _ref6$extraArgs;
-  switch (type) {
-    case "inline":
-      return inlineEmbedCode({
-        customization: customization,
-        id: id,
-        embedScriptLink: embedScriptLink,
-        extraArgs: extraArgs
-      });
-    case "floatingPopup":
-      return floatingPopupEmbedCode({
-        customization: customization,
-        id: id,
-        embedScriptLink: embedScriptLink,
-        extraArgs: extraArgs
-      });
-    case "elementPopup":
-      return elementPopupEmbedCode({
-        customization: customization,
-        id: id,
-        embedScriptLink: embedScriptLink,
-        extraArgs: extraArgs
-      });
-    default:
-      return "";
-  }
-};
-var buildDefaultCustomization = function buildDefaultCustomization(defaultCustomizations) {
-  return ramda.mergeDeepLeft(defaultCustomizations, DEFAULT_CUSTOMIZATION);
-};
-
 function ownKeys(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(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { defineProperty._defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var ProductEmbed = function ProductEmbed(_ref) {
@@ -539,6 +669,8 @@ var ProductEmbed = function ProductEmbed(_ref) {
     _ref$goBackLink = _ref.goBackLink,
     goBackLink = _ref$goBackLink === void 0 ? "" : _ref$goBackLink,
     id = _ref.id,
+    _ref$isQueryParamsEna = _ref.isQueryParamsEnabled,
+    isQueryParamsEnabled = _ref$isQueryParamsEna === void 0 ? false : _ref$isQueryParamsEna,
     _ref$options = _ref.options,
     options = _ref$options === void 0 ? {} : _ref$options,
     _ref$extraArgs = _ref.extraArgs,
@@ -616,6 +748,7 @@ var ProductEmbed = function ProductEmbed(_ref) {
     selectedOption: selectedOption,
     setSelectedOption: setSelectedOption
   }), /*#__PURE__*/React__default["default"].createElement(Customization, {
+    isQueryParamsEnabled: isQueryParamsEnabled,
     updateCustomization: updateCustomization,
     customization: customizations[selectedOption],
     option: selectedOption