@bigbinary/neeto-molecules 3.16.51 → 3.16.53

package/dist/ProductEmbed.js

@@ -107,14 +107,11 @@ var inlineEmbedCode$1 = function inlineEmbedCode(_ref3) {
     id = _ref3.id,
     embedScriptLink = _ref3.embedScriptLink,
     extraArgs = _ref3.extraArgs,
-    inlineWrapperStyle = _ref3.inlineWrapperStyle;
+    inlineWrapperStyle = _ref3.inlineWrapperStyle,
+    iframeStyle = _ref3.iframeStyle;
   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=\"").concat(inlineWrapperStyle || "height: 90vh; width: 100%;", "\" 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: { height: \"").concat(height, "%\", width: \"").concat(width, "%\"},").concat(embedQueryParam$1(queryParams)).concat(embedEnv$1()).concat(parseExtraArgs$1(extraArgs), "\n    });\n  </script>\n  <!-- ").concat(globalProps.appName, " inline embed code ends -->");
+  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 floatingPopupEmbedCode$1 = function floatingPopupEmbedCode(_ref4) {
   var customization = _ref4.customization,
@@ -166,7 +163,7 @@ var parseExtraArgs = function parseExtraArgs(extraArgs) {
   });
 };
 var parseInlineStyle = function parseInlineStyle(styleString) {
-  return styleString ? styleString.split(";").map(function (rule) {
+  return styleString.split(";").map(function (rule) {
     var _rule$split$map = rule.split(":").map(function (s) {
         return s.trim();
       }),
@@ -174,21 +171,18 @@ var parseInlineStyle = function parseInlineStyle(styleString) {
       key = _rule$split$map2[0],
       value = _rule$split$map2[1];
     return key && value ? "".concat(key, ": \"").concat(value, "\"") : null;
-  }).filter(Boolean).join(", ") : 'height: "90vh", width: "100%"';
+  }).filter(Boolean).join(", ");
 };
 var inlineEmbedCode = function inlineEmbedCode(_ref3) {
   var customization = _ref3.customization,
     id = _ref3.id,
     embedScriptLink = _ref3.embedScriptLink,
     extraArgs = _ref3.extraArgs,
-    inlineWrapperStyle = _ref3.inlineWrapperStyle;
+    inlineWrapperStyle = _ref3.inlineWrapperStyle,
+    iframeStyle = _ref3.iframeStyle;
   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  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: { height: \"").concat(height, "%\", width: \"").concat(width, "%\" },").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  };");
+  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 floatingPopupEmbedCode = function floatingPopupEmbedCode(_ref4) {
   var customization = _ref4.customization,
@@ -202,7 +196,7 @@ var floatingPopupEmbedCode = function floatingPopupEmbedCode(_ref4) {
     btnColor = customization.btnColor,
     icon = customization.icon,
     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: \"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".concat(TAB_STRING).concat(TAB_STRING, "  showIcon: ").concat(showIcon, ",") : "", "\n          },").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 <div />;\n  };");
+  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: \"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".concat(TAB_STRING).concat(TAB_STRING).concat(TAB_STRING, "showIcon: ").concat(showIcon, ",") : "", "\n          },").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 <div />;\n  };");
 };
 var elementPopupEmbedCode = function elementPopupEmbedCode(_ref5) {
   var customization = _ref5.customization,
@@ -492,9 +486,7 @@ var Inline$1 = function Inline(_ref) {
       };
     }, shallow),
     isQueryParamsEnabled = _useProductEmbedStore.isQueryParamsEnabled;
-  var height = customization.height,
-    width = customization.width,
-    elementSelector = customization.elementSelector;
+  var elementSelector = customization.elementSelector;
   var handleInputChange = function handleInputChange(_ref2, attribute) {
     var value = _ref2.target.value;
     return updateCustomization(_defineProperty({}, attribute, value));
@@ -507,41 +499,6 @@ var Inline$1 = function Inline(_ref) {
   }, []);
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsxs("div", {
-      className: "flex flex-col gap-2",
-      children: [/*#__PURE__*/jsx(Label, {
-        "data-cy": "window-size-text",
-        children: t("neetoMolecules.productEmbed.inline.sizeOfEmbedWindow")
-      }), /*#__PURE__*/jsxs("div", {
-        className: "flex justify-between gap-x-2",
-        children: [/*#__PURE__*/jsx(Input, {
-          className: "neeto-molecules-product-embed-size-input",
-          "data-cy": "inline-width-input-field",
-          "data-testid": "inline-width-input-field",
-          max: 100,
-          min: 0,
-          prefix: "W",
-          suffix: "%",
-          type: "number",
-          value: width,
-          onChange: function onChange(e) {
-            return handleInputChange(e, "width");
-          }
-        }), /*#__PURE__*/jsx(Input, {
-          className: "neeto-molecules-product-embed-size-input",
-          "data-cy": "inline-height-input-field",
-          "data-testid": "inline-height-input-field",
-          max: 100,
-          min: 0,
-          prefix: "H",
-          suffix: "%",
-          type: "number",
-          value: height,
-          onChange: function onChange(e) {
-            return handleInputChange(e, "height");
-          }
-        })]
-      })]
-    }), /*#__PURE__*/jsxs("div", {
       className: "flex flex-col gap-2",
       children: [/*#__PURE__*/jsx(Label, {
         "data-cy": "inline-element-id-input-label",
@@ -1109,6 +1066,7 @@ var Code = function Code(_ref) {
     embedScriptLink = _ref.embedScriptLink,
     extraArgs = _ref.extraArgs,
     inlineWrapperStyle = _ref.inlineWrapperStyle,
+    iframeStyle = _ref.iframeStyle,
     supportedLanguages = _ref.supportedLanguages,
     customization = _ref.customization;
   var _useTranslation = useTranslation(),
@@ -1129,7 +1087,8 @@ var Code = function Code(_ref) {
     customization: customization,
     embedScriptLink: embedScriptLink,
     extraArgs: extraArgs,
-    inlineWrapperStyle: inlineWrapperStyle
+    inlineWrapperStyle: inlineWrapperStyle,
+    iframeStyle: iframeStyle
   });
   return /*#__PURE__*/jsxs("div", {
     className: "flex flex-col gap-3",
@@ -1431,6 +1390,7 @@ var EmbedRenderer = function EmbedRenderer(_ref) {
     extraArgs = _ref.extraArgs,
     otherCustomizations = _ref.otherCustomizations,
     inlineWrapperStyle = _ref.inlineWrapperStyle,
+    iframeStyle = _ref.iframeStyle,
     supportedLanguages = _ref.supportedLanguages,
     selectedEmbed = _ref.selectedEmbed;
   var _useTranslation = useTranslation(),
@@ -1501,6 +1461,7 @@ var EmbedRenderer = function EmbedRenderer(_ref) {
             embedScriptLink: embedScriptLink,
             extraArgs: extraArgs,
             id: id,
+            iframeStyle: iframeStyle,
             inlineWrapperStyle: inlineWrapperStyle,
             selectedEmbed: selectedEmbed,
             supportedLanguages: supportedLanguages
@@ -1619,7 +1580,9 @@ var ProductEmbed = function ProductEmbed(_ref) {
     _ref$otherCustomizati = _ref.otherCustomizations,
     otherCustomizations = _ref$otherCustomizati === void 0 ? noop : _ref$otherCustomizati,
     _ref$inlineWrapperSty = _ref.inlineWrapperStyle,
-    inlineWrapperStyle = _ref$inlineWrapperSty === void 0 ? "" : _ref$inlineWrapperSty,
+    inlineWrapperStyle = _ref$inlineWrapperSty === void 0 ? "height: 90vh; width: 100%;" : _ref$inlineWrapperSty,
+    _ref$iframeStyle = _ref.iframeStyle,
+    iframeStyle = _ref$iframeStyle === void 0 ? "height: 100%; width: 100%;" : _ref$iframeStyle,
     _ref$supportedLanguag = _ref.supportedLanguages,
     supportedLanguages = _ref$supportedLanguag === void 0 ? ["html"] : _ref$supportedLanguag;
   var _useLocation = useLocation(),
@@ -1644,6 +1607,7 @@ var ProductEmbed = function ProductEmbed(_ref) {
     customPreviewIframeUrl: customPreviewIframeUrl,
     extraArgs: extraArgs,
     id: id,
+    iframeStyle: iframeStyle,
     inlineWrapperStyle: inlineWrapperStyle,
     options: options,
     otherCustomizations: otherCustomizations,