@bigbinary/neeto-molecules 4.0.58 → 4.0.59

package/dist/ProductEmbed.js

@@ -1,5 +1,5 @@
 import { shallow } from 'zustand/shallow';
-import { useEffect, createElement, useState, useMemo } from 'react';
+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';
@@ -9,7 +9,7 @@ import useStateWithDependency from '@bigbinary/neeto-commons-frontend/react-util
 import LeftArrow from '@bigbinary/neeto-icons/LeftArrow';
 import Button from '@bigbinary/neetoui/Button';
 import Typography from '@bigbinary/neetoui/Typography';
-import { toPairs, mergeDeepLeft, pick, isEmpty, mergeLeft } from 'ramda';
+import { toPairs, mergeDeepLeft, isEmpty, mergeLeft } from 'ramda';
 import { useTranslation } from 'react-i18next';
 import Container from './Container.js';
 import Header from './Header.js';
@@ -115,8 +115,10 @@ var inlineEmbedCode$1 = function inlineEmbedCode(_ref3) {
     inlineWrapperStyle = _ref3.inlineWrapperStyle,
     iframeStyle = _ref3.iframeStyle,
     queryParams = _ref3.queryParams;
-  var elementSelector = customization.elementSelector;
-  return "\n  <!-- ".concat(globalProps.appName, " inline embed code begins -->\n  <div style=\"").concat(inlineWrapperStyle, "\" id=\"").concat(elementSelector, "\">\n    <!-- ").concat(globalProps.appName, " widget will be added here -->\n  </div>\n  ").concat(embedBaseScript(embedScriptLink), "\n  <script>\n    ").concat(camelCasedAppName$1, ".embed({\n      type: \"inline\",\n      id: \"").concat(id, "\",\n      organization: \"").concat(globalProps.organization.subdomain, "\",\n      elementSelector: \"#").concat(elementSelector, "\",\n      styles: \"").concat(iframeStyle, "\", ").concat(embedQueryParam$1(queryParams)).concat(embedEnv$1()).concat(parseExtraArgs$1(extraArgs), "\n    });\n  </script>\n  <!-- ").concat(globalProps.appName, " inline embed code ends -->");
+  var elementSelector = customization.elementSelector,
+    dynamicHeight = customization.dynamicHeight;
+  var processedInlineWrapperStyle = dynamicHeight !== null && dynamicHeight !== void 0 && dynamicHeight.value ? removeHeightFromStyle(inlineWrapperStyle) : inlineWrapperStyle;
+  return "\n  <!-- ".concat(globalProps.appName, " inline embed code begins -->\n  <div style=\"").concat(processedInlineWrapperStyle, "\" id=\"").concat(elementSelector, "\">\n    <!-- ").concat(globalProps.appName, " widget will be added here -->\n  </div>\n  ").concat(embedBaseScript(embedScriptLink), "\n  <script>\n    ").concat(camelCasedAppName$1, ".embed({\n      type: \"inline\",\n      id: \"").concat(id, "\",\n      organization: \"").concat(globalProps.organization.subdomain, "\",\n      elementSelector: \"#").concat(elementSelector, "\",\n      styles: \"").concat(iframeStyle, "\", ").concat(embedQueryParam$1(queryParams)).concat(embedEnv$1()).concat(parseExtraArgs$1(extraArgs), "\n    });\n  </script>\n  <!-- ").concat(globalProps.appName, " inline embed code ends -->");
 };
 var floatingPopupEmbedCode$1 = function floatingPopupEmbedCode(_ref4) {
   var customization = _ref4.customization,
@@ -148,13 +150,15 @@ var iframeEmbedCode$1 = function iframeEmbedCode(_ref6) {
   var height = customization.height,
     width = customization.width,
     iframeTitle = customization.iframeTitle,
-    iframeUrl = customization.iframeUrl;
+    iframeUrl = customization.iframeUrl,
+    dynamicHeight = customization.dynamicHeight;
   var iframeSrc = buildIframeURL$1({
     id: id,
     iframeUrl: iframeUrl,
     queryParams: queryParams
   });
-  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  ></iframe>\n  <!-- ").concat(globalProps.appName, " iframe embed code ends -->");
+  var heightAttribute = dynamicHeight !== null && dynamicHeight !== void 0 && dynamicHeight.value ? "" : "\n".concat(TAB_STRING, "height=\"").concat(height, "\"");
+  return "\n  <!-- ".concat(globalProps.appName, " iframe embed code begins -->\n  <iframe\n    allowfullscreen").concat(heightAttribute, "\n    width=\"").concat(width, "\"\n    frameborder=\"0\"\n    title=\"").concat(iframeTitle, "\"\n    src=\"").concat(iframeSrc, "\"\n  ></iframe>\n  <!-- ").concat(globalProps.appName, " iframe embed code ends -->");
 };
 var htmlCodeGenerators = {
   inline: inlineEmbedCode$1,
@@ -173,7 +177,7 @@ var embedEnv = function embedEnv() {
   return globalProps.railsEnv !== "production" ? "\n".concat(TAB_STRING).concat(TAB_STRING, "  env: \"").concat(globalProps.railsEnv, "\",") : "";
 };
 var embedQueryParam = function embedQueryParam(queryParams) {
-  return queryParams ? "\n".concat(TAB_STRING).concat(TAB_STRING, "queryParams: ").concat(queryParams, ",") : "";
+  return queryParams ? "\n".concat(TAB_STRING).concat(TAB_STRING, "  queryParams: ").concat(queryParams, ",") : "";
 };
 var parseExtraArgs = function parseExtraArgs(extraArgs) {
   return toPairs(extraArgs).map(function (_ref) {
@@ -202,8 +206,10 @@ var inlineEmbedCode = function inlineEmbedCode(_ref3) {
     inlineWrapperStyle = _ref3.inlineWrapperStyle,
     iframeStyle = _ref3.iframeStyle,
     queryParams = _ref3.queryParams;
-  var elementSelector = customization.elementSelector;
-  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: \"inline\",\n          id: \"").concat(id, "\",\n          organization: \"").concat(globalProps.organization.subdomain, "\",\n          elementSelector: \"#").concat(elementSelector, "\",\n          styles: \"").concat(iframeStyle, "\",").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 (\n      <div\n        id=\"inline-embed-container\"\n        style={{ ").concat(parseInlineStyle(inlineWrapperStyle), " }}\n      />\n    );\n  };");
+  var elementSelector = customization.elementSelector,
+    dynamicHeight = customization.dynamicHeight;
+  var processedInlineWrapperStyle = dynamicHeight !== null && dynamicHeight !== void 0 && dynamicHeight.value ? removeHeightFromStyle(inlineWrapperStyle) : inlineWrapperStyle;
+  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: \"inline\",\n          id: \"").concat(id, "\",\n          organization: \"").concat(globalProps.organization.subdomain, "\",\n          elementSelector: \"#").concat(elementSelector, "\",\n          styles: \"").concat(iframeStyle, "\",").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 (\n      <div\n        id=\"inline-embed-container\"\n        style={{ ").concat(parseInlineStyle(processedInlineWrapperStyle), " }}\n      />\n    );\n  };");
 };
 var floatingPopupEmbedCode = function floatingPopupEmbedCode(_ref4) {
   var customization = _ref4.customization,
@@ -235,13 +241,15 @@ var iframeEmbedCode = function iframeEmbedCode(_ref6) {
   var height = customization.height,
     width = customization.width,
     iframeTitle = customization.iframeTitle,
-    iframeUrl = customization.iframeUrl;
+    iframeUrl = customization.iframeUrl,
+    dynamicHeight = customization.dynamicHeight;
   var iframeSrc = buildIframeURL$1({
     id: id,
     iframeUrl: iframeUrl,
     queryParams: queryParams
   });
-  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        ></iframe>\n        {/* ").concat(globalProps.appName, " iframe embed code ends */}\n      </>\n    );\n  };\n");
+  var heightAttribute = dynamicHeight !== null && dynamicHeight !== void 0 && dynamicHeight.value ? "" : "\n".concat(TAB_STRING).concat(TAB_STRING, "  height=\"").concat(height, "\"");
+  return "\n  const App = () => {\n    return (\n      <>\n        {/* ".concat(globalProps.appName, " iframe embed code begins */}\n        <iframe\n          allowFullScreen").concat(heightAttribute, "\n          width=\"").concat(width, "\"\n          frameBorder=\"0\"\n          title=\"").concat(iframeTitle, "\"\n          src=\"").concat(iframeSrc, "\"\n        ></iframe>\n        {/* ").concat(globalProps.appName, " iframe embed code ends */}\n      </>\n    );\n  };\n");
 };
 var reactCodeGenerators = {
   inline: inlineEmbedCode,
@@ -250,17 +258,19 @@ var reactCodeGenerators = {
   iframe: iframeEmbedCode
 };
 
-var _excluded = ["selectedLanguage", "type"];
-function ownKeys$4(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$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var buildQueryParams = function buildQueryParams() {
+var _excluded$1 = ["selectedLanguage", "type"];
+function ownKeys$6(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$6(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$6(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$6(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var buildQueryParams$1 = function buildQueryParams() {
   var customization = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var existingQueryParams = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var activeKeys = Object.keys(SWITCH_OPTIONS).filter(function (key) {
-    return customization[key];
-  });
-  var activeOptions = pick(activeKeys, customization);
-  var mergedQueryParams = _objectSpread$4(_objectSpread$4({}, existingQueryParams), activeOptions);
+  var activeOptions = Object.keys(SWITCH_OPTIONS).reduce(function (acc, key) {
+    var _customization$key;
+    var value = (_customization$key = customization[key]) === null || _customization$key === void 0 ? void 0 : _customization$key.value;
+    if (value) acc[key] = value;
+    return acc;
+  }, {});
+  var mergedQueryParams = _objectSpread$6(_objectSpread$6({}, existingQueryParams), activeOptions);
   if (isEmpty(mergedQueryParams)) return "";
   return JSON.stringify(mergedQueryParams, null, 2).replace(/\n/g, " ").replace(/\s\s+/g, " ");
 };
@@ -268,11 +278,11 @@ var generateCode = function generateCode(options) {
   var _embeddedCodeOptions$, _reactCodeGenerators$, _htmlCodeGenerators$t;
   var selectedLanguage = options.selectedLanguage,
     type = options.type,
-    embeddedCodeOptions = _objectWithoutProperties(options, _excluded);
+    embeddedCodeOptions = _objectWithoutProperties(options, _excluded$1);
   var queryParams = ((_embeddedCodeOptions$ = embeddedCodeOptions.customization) === null || _embeddedCodeOptions$ === void 0 ? void 0 : _embeddedCodeOptions$.queryParams) || {};
   var customization = embeddedCodeOptions.customization || {};
-  var codeOptions = _objectSpread$4(_objectSpread$4({}, embeddedCodeOptions), {}, {
-    queryParams: buildQueryParams(customization, queryParams)
+  var codeOptions = _objectSpread$6(_objectSpread$6({}, embeddedCodeOptions), {}, {
+    queryParams: buildQueryParams$1(customization, queryParams)
   });
   return selectedLanguage === "react" ? (_reactCodeGenerators$ = reactCodeGenerators[type]) === null || _reactCodeGenerators$ === void 0 ? void 0 : _reactCodeGenerators$.call(reactCodeGenerators, codeOptions) : (_htmlCodeGenerators$t = htmlCodeGenerators[type]) === null || _htmlCodeGenerators$t === void 0 ? void 0 : _htmlCodeGenerators$t.call(htmlCodeGenerators, codeOptions);
 };
@@ -312,9 +322,12 @@ var buildIframeURL$1 = function buildIframeURL(_ref3) {
   });
   return url.toString();
 };
+var removeHeightFromStyle = function removeHeightFromStyle(style) {
+  return style.replace(/height\s*:\s*[^;]+;?\s*/g, "").trim();
+};
 
-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), true).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; }
+function ownKeys$5(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$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(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 = useTranslation(),
@@ -340,7 +353,7 @@ var DynamicQueryParams = function DynamicQueryParams(_ref) {
   };
   var handleInputChange = function handleInputChange(index, field, value) {
     var newQueryParams = queryParams.map(function (param, i) {
-      return i === index ? _objectSpread$3(_objectSpread$3({}, param), {}, _defineProperty({}, field, value)) : param;
+      return i === index ? _objectSpread$5(_objectSpread$5({}, param), {}, _defineProperty({}, field, value)) : param;
     });
     setQueryParams(newQueryParams);
   };
@@ -356,7 +369,7 @@ var DynamicQueryParams = function DynamicQueryParams(_ref) {
         "data-cy": "dynamic-query-params-label",
         "data-testid": "dynamic-query-params-label",
         children: queryParamsProps.label || t("neetoMolecules.productEmbed.queryParam.label")
-      }), isPresent(queryParamsProps.helpPopoverProps) && /*#__PURE__*/jsx(HelpPopover, _objectSpread$3({
+      }), isPresent(queryParamsProps.helpPopoverProps) && /*#__PURE__*/jsx(HelpPopover, _objectSpread$5({
         className: "ml-1"
       }, queryParamsProps.helpPopoverProps))]
     }), queryParams.map(function (param, index) {
@@ -542,6 +555,9 @@ var FloatingPopup$1 = function FloatingPopup(_ref) {
   });
 };
 
+var _excluded = ["value", "label", "helpIconProps"];
+function ownKeys$4(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$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var SwitchOptions = function SwitchOptions(_ref) {
   var _ref$customization = _ref.customization,
     customization = _ref$customization === void 0 ? {} : _ref$customization,
@@ -556,25 +572,28 @@ var SwitchOptions = function SwitchOptions(_ref) {
     className: "flex flex-col gap-4",
     children: visibleOptions.map(function (_ref2) {
       var _ref3 = _slicedToArray(_ref2, 2),
-        key = _ref3[0],
-        value = _ref3[1];
-      var helpText = SWITCH_OPTIONS[key].helpText;
-      var labelProps = helpText ? {
-        helpIconProps: {
-          tooltipProps: {
-            content: helpText
-          }
-        }
-      } : undefined;
-      return /*#__PURE__*/createElement(Switch, {
-        labelProps: labelProps,
+        option = _ref3[0],
+        _ref3$ = _ref3[1],
+        value = _ref3$.value,
+        label = _ref3$.label,
+        helpIconProps = _ref3$.helpIconProps,
+        rest = _objectWithoutProperties(_ref3$, _excluded);
+      return /*#__PURE__*/jsx(Switch, {
         checked: value,
-        key: key,
-        label: SWITCH_OPTIONS[key].label,
+        label: label || SWITCH_OPTIONS[option].label,
+        labelProps: helpIconProps && {
+          helpIconProps: _objectSpread$4({
+            "data-testid": "help-icon-button"
+          }, helpIconProps)
+        },
         onChange: function onChange(e) {
-          return updateCustomization(_defineProperty({}, key, e.target.checked));
+          return updateCustomization(_defineProperty({}, option, _objectSpread$4(_objectSpread$4({}, rest), {}, {
+            label: label,
+            helpIconProps: helpIconProps,
+            value: e.target.checked
+          })));
         }
-      });
+      }, option);
     })
   });
 };
@@ -652,11 +671,11 @@ var Inline$1 = function Inline(_ref) {
   });
 };
 
-function ownKeys$2(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$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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), true).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 InlineEmbedIcon = function InlineEmbedIcon(_ref) {
   var other = Object.assign({}, (_objectDestructuringEmpty(_ref), _ref));
-  return /*#__PURE__*/jsxs("svg", _objectSpread$2(_objectSpread$2({
+  return /*#__PURE__*/jsxs("svg", _objectSpread$3(_objectSpread$3({
     fill: "none",
     height: "163",
     viewBox: "0 0 278 163",
@@ -905,7 +924,7 @@ var InlineEmbedIcon = function InlineEmbedIcon(_ref) {
 };
 var FloatingPopupIcon = function FloatingPopupIcon(_ref2) {
   var other = Object.assign({}, (_objectDestructuringEmpty(_ref2), _ref2));
-  return /*#__PURE__*/jsxs("svg", _objectSpread$2(_objectSpread$2({
+  return /*#__PURE__*/jsxs("svg", _objectSpread$3(_objectSpread$3({
     fill: "none",
     height: "163",
     viewBox: "0 0 278 163",
@@ -1049,7 +1068,7 @@ var FloatingPopupIcon = function FloatingPopupIcon(_ref2) {
 };
 var ElementPopupIcon = function ElementPopupIcon(_ref3) {
   var other = Object.assign({}, (_objectDestructuringEmpty(_ref3), _ref3));
-  return /*#__PURE__*/jsxs("svg", _objectSpread$2(_objectSpread$2({
+  return /*#__PURE__*/jsxs("svg", _objectSpread$3(_objectSpread$3({
     fill: "none",
     height: "163",
     viewBox: "0 0 278 163",
@@ -1200,8 +1219,7 @@ var SCRIPT_ID = "embed-script";
 var TAB_STRING = "    ";
 var SWITCH_OPTIONS = {
   dynamicHeight: {
-    label: t("neetoMolecules.productEmbed.dynamicHeight"),
-    helpText: t("neetoMolecules.productEmbed.dynamicHeightHelpText")
+    label: t("neetoMolecules.productEmbed.dynamicHeight")
   },
   hideTitle: {
     label: t("neetoMolecules.productEmbed.hideTitle")
@@ -1277,11 +1295,11 @@ var Code = function Code(_ref) {
   });
 };
 
-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), true).forEach(function (r) { _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; }
+function ownKeys$2(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$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var FloatingPopupPlaceholderImage = function FloatingPopupPlaceholderImage(_ref) {
   var other = Object.assign({}, (_objectDestructuringEmpty(_ref), _ref));
-  return /*#__PURE__*/jsxs("svg", _objectSpread$1(_objectSpread$1({
+  return /*#__PURE__*/jsxs("svg", _objectSpread$2(_objectSpread$2({
     fill: "none",
     height: "518",
     viewBox: "0 0 796 518",
@@ -1341,7 +1359,7 @@ var FloatingPopupPlaceholderImage = function FloatingPopupPlaceholderImage(_ref)
 };
 var ElementPopupPlaceholderImage = function ElementPopupPlaceholderImage(_ref2) {
   var other = Object.assign({}, (_objectDestructuringEmpty(_ref2), _ref2));
-  return /*#__PURE__*/jsxs("svg", _objectSpread$1(_objectSpread$1({
+  return /*#__PURE__*/jsxs("svg", _objectSpread$2(_objectSpread$2({
     fill: "none",
     height: "518",
     viewBox: "0 0 748 518",
@@ -1507,10 +1525,27 @@ var Inline = function Inline(_ref) {
   });
 };
 
-var buildIframeURL = function buildIframeURL(iframeURL, queryParams) {
+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), true).forEach(function (r) { _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 buildQueryParams = function buildQueryParams() {
+  var customization = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var existingQueryParams = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var activeOptions = Object.keys(SWITCH_OPTIONS).reduce(function (acc, key) {
+    var _customization$key;
+    var value = (_customization$key = customization[key]) === null || _customization$key === void 0 ? void 0 : _customization$key.value;
+    if (value) acc[key] = value;
+    return acc;
+  }, {});
+  return _objectSpread$1(_objectSpread$1({}, existingQueryParams), activeOptions);
+};
+var buildIframeURL = function buildIframeURL(iframeURL, queryParams, customization) {
   var url = new URL(iframeURL);
-  queryParams.forEach(function (param) {
-    url.searchParams.append(param.name, param.value);
+  var params = buildQueryParams(customization, queryParams);
+  Object.entries(params).forEach(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      name = _ref2[0],
+      value = _ref2[1];
+    url.searchParams.append(name, value);
   });
   return url.toString();
 };
@@ -1529,7 +1564,8 @@ var Preview = function Preview(_ref) {
     }, shallow),
     queryParams = _useProductEmbedStore.queryParams;
   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 previewURL = customPreviewIframeUrl || "".concat(location.origin, "/embed/").concat(id);
+  var iframeURL = buildIframeURL(previewURL, queryParams, customization);
   var Component = preview[selectedEmbed];
   if (isScriptLoading) {
     return /*#__PURE__*/jsx("div", {