@bigbinary/neeto-molecules 4.0.45 → 4.0.46

package/dist/ProductEmbed.js

@@ -1,5 +1,5 @@
 import { shallow } from 'zustand/shallow';
-import { useEffect, useState, useMemo } from 'react';
+import { useEffect, createElement, 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, isEmpty, mergeDeepLeft, mergeLeft } from 'ramda';
+import { toPairs, mergeDeepLeft, pick, isEmpty, mergeLeft } from 'ramda';
 import { useTranslation } from 'react-i18next';
 import Container from './Container.js';
 import Header from './Header.js';
@@ -28,6 +28,7 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import Checkbox from '@bigbinary/neetoui/Checkbox';
 import ColorPicker from '@bigbinary/neetoui/ColorPicker';
+import Switch from '@bigbinary/neetoui/Switch';
 import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
 import Spinner from '@bigbinary/neetoui/Spinner';
 import BrowserPreview from './BrowserPreview.js';
@@ -112,42 +113,42 @@ var inlineEmbedCode$1 = function inlineEmbedCode(_ref3) {
     embedScriptLink = _ref3.embedScriptLink,
     extraArgs = _ref3.extraArgs,
     inlineWrapperStyle = _ref3.inlineWrapperStyle,
-    iframeStyle = _ref3.iframeStyle;
-  var elementSelector = customization.elementSelector,
-    queryParams = customization.queryParams;
+    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 floatingPopupEmbedCode$1 = function floatingPopupEmbedCode(_ref4) {
   var customization = _ref4.customization,
     id = _ref4.id,
     embedScriptLink = _ref4.embedScriptLink,
-    extraArgs = _ref4.extraArgs;
+    extraArgs = _ref4.extraArgs,
+    queryParams = _ref4.queryParams;
   var btnTextColor = customization.btnTextColor,
     showIcon = customization.showIcon,
     btnText = customization.btnText,
     btnPosition = customization.btnPosition,
     btnColor = customization.btnColor,
-    icon = customization.icon,
-    queryParams = customization.queryParams;
+    icon = customization.icon;
   return "\n  <!-- ".concat(globalProps.appName, " floating-popup embed code begins -->\n  ").concat(embedBaseScript(embedScriptLink), "\n  <script>\n    ").concat(camelCasedAppName$1, ".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$1(queryParams)).concat(embedEnv$1()).concat(parseExtraArgs$1(extraArgs), "\n    });\n  </script>\n  <!-- ").concat(globalProps.appName, " floating-popup embed code ends -->");
 };
 var elementPopupEmbedCode$1 = function elementPopupEmbedCode(_ref5) {
   var customization = _ref5.customization,
     id = _ref5.id,
     embedScriptLink = _ref5.embedScriptLink,
-    extraArgs = _ref5.extraArgs;
-  var elementSelector = customization.elementSelector,
-    queryParams = customization.queryParams;
+    extraArgs = _ref5.extraArgs,
+    queryParams = _ref5.queryParams;
+  var elementSelector = customization.elementSelector;
   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;
+    customization = _ref6.customization,
+    queryParams = _ref6.queryParams;
   var height = customization.height,
     width = customization.width,
     iframeTitle = customization.iframeTitle,
-    iframeUrl = customization.iframeUrl,
-    queryParams = customization.queryParams;
+    iframeUrl = customization.iframeUrl;
   var iframeSrc = buildIframeURL$1({
     id: id,
     iframeUrl: iframeUrl,
@@ -199,48 +200,48 @@ var inlineEmbedCode = function inlineEmbedCode(_ref3) {
     embedScriptLink = _ref3.embedScriptLink,
     extraArgs = _ref3.extraArgs,
     inlineWrapperStyle = _ref3.inlineWrapperStyle,
-    iframeStyle = _ref3.iframeStyle;
-  var elementSelector = customization.elementSelector,
-    queryParams = customization.queryParams;
+    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 floatingPopupEmbedCode = function floatingPopupEmbedCode(_ref4) {
   var customization = _ref4.customization,
     id = _ref4.id,
     embedScriptLink = _ref4.embedScriptLink,
-    extraArgs = _ref4.extraArgs;
+    extraArgs = _ref4.extraArgs,
+    queryParams = _ref4.queryParams;
   var btnTextColor = customization.btnTextColor,
     showIcon = customization.showIcon,
     btnText = customization.btnText,
     btnPosition = customization.btnPosition,
     btnColor = customization.btnColor,
-    icon = customization.icon,
-    queryParams = customization.queryParams;
+    icon = customization.icon;
   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,
     id = _ref5.id,
     embedScriptLink = _ref5.embedScriptLink,
-    extraArgs = _ref5.extraArgs;
-  var elementSelector = customization.elementSelector,
-    queryParams = customization.queryParams;
+    extraArgs = _ref5.extraArgs,
+    queryParams = _ref5.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: \"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;
+    id = _ref6.id,
+    queryParams = _ref6.queryParams;
   var height = customization.height,
     width = customization.width,
     iframeTitle = customization.iframeTitle,
-    iframeUrl = customization.iframeUrl,
-    queryParams = customization.queryParams;
+    iframeUrl = customization.iframeUrl;
   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  ");
+  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 reactCodeGenerators = {
   inline: inlineEmbedCode,
@@ -250,12 +251,30 @@ var reactCodeGenerators = {
 };
 
 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 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);
+  if (isEmpty(mergedQueryParams)) return "";
+  return JSON.stringify(mergedQueryParams, null, 2).replace(/\n/g, " ").replace(/\s\s+/g, " ");
+};
 var generateCode = function generateCode(options) {
-  var _reactCodeGenerators$, _htmlCodeGenerators$t;
+  var _embeddedCodeOptions$, _reactCodeGenerators$, _htmlCodeGenerators$t;
   var selectedLanguage = options.selectedLanguage,
     type = options.type,
     embeddedCodeOptions = _objectWithoutProperties(options, _excluded);
-  return selectedLanguage === "react" ? (_reactCodeGenerators$ = reactCodeGenerators[type]) === null || _reactCodeGenerators$ === void 0 ? void 0 : _reactCodeGenerators$.call(reactCodeGenerators, embeddedCodeOptions) : (_htmlCodeGenerators$t = htmlCodeGenerators[type]) === null || _htmlCodeGenerators$t === void 0 ? void 0 : _htmlCodeGenerators$t.call(htmlCodeGenerators, embeddedCodeOptions);
+  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)
+  });
+  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);
 };
 var buildDefaultCustomization = function buildDefaultCustomization(defaultCustomizations) {
   return mergeDeepLeft(defaultCustomizations, DEFAULT_CUSTOMIZATION);
@@ -266,15 +285,12 @@ var buildQueryParamsFromInputFields = function buildQueryParamsFromInputFields(i
       value = _ref.value;
     return name && value;
   });
-  var queryParams = filteredInputFields.reduce(function (queryParams, _ref2) {
+  return filteredInputFields.reduce(function (queryParams, _ref2) {
     var name = _ref2.name,
       value = _ref2.value;
     queryParams[name] = value;
     return queryParams;
   }, {});
-  if (isEmpty(queryParams)) return "";
-  var queryParamJsonString = JSON.stringify(queryParams, null, 2);
-  return queryParamJsonString.replace(/\n/g, " ").replace(/\s\s+/g, " ");
 };
 var toCamelCasedString = function toCamelCasedString(string) {
   return string === null || string === void 0 ? void 0 : string.replace(/[_-]+(\w)/g, function (_, nextChar) {
@@ -526,9 +542,47 @@ var FloatingPopup$1 = function FloatingPopup(_ref) {
   });
 };
 
+var SwitchOptions = function SwitchOptions(_ref) {
+  var _ref$customization = _ref.customization,
+    customization = _ref$customization === void 0 ? {} : _ref$customization,
+    updateCustomization = _ref.updateCustomization;
+  var visibleOptions = Object.keys(SWITCH_OPTIONS).filter(function (key) {
+    return key in customization;
+  }).map(function (key) {
+    return [key, customization[key]];
+  });
+  if (isEmpty(visibleOptions)) return null;
+  return /*#__PURE__*/jsx("div", {
+    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,
+        checked: value,
+        key: key,
+        label: SWITCH_OPTIONS[key].label,
+        onChange: function onChange(e) {
+          return updateCustomization(_defineProperty({}, key, e.target.checked));
+        }
+      });
+    })
+  });
+};
+
 var Iframe$1 = function Iframe(_ref) {
   var updateCustomization = _ref.updateCustomization,
-    otherCustomizations = _ref.otherCustomizations;
+    otherCustomizations = _ref.otherCustomizations,
+    customization = _ref.customization;
   var _useProductEmbedStore = useProductEmbedStore(function (store) {
       return {
         isQueryParamsEnabled: store["isQueryParamsEnabled"]
@@ -542,7 +596,10 @@ var Iframe$1 = function Iframe(_ref) {
     });
   }, []);
   return /*#__PURE__*/jsxs(Fragment, {
-    children: [otherCustomizations(), isQueryParamsEnabled && /*#__PURE__*/jsx(DynamicQueryParams, {
+    children: [otherCustomizations(), /*#__PURE__*/jsx(SwitchOptions, {
+      customization: customization,
+      updateCustomization: updateCustomization
+    }), isQueryParamsEnabled && /*#__PURE__*/jsx(DynamicQueryParams, {
       updateCustomization: updateCustomization
     })]
   });
@@ -586,6 +643,9 @@ var Inline$1 = function Inline(_ref) {
           return handleInputChange(e, "elementSelector");
         }
       })]
+    }), /*#__PURE__*/jsx(SwitchOptions, {
+      customization: customization,
+      updateCustomization: updateCustomization
     }), otherCustomizations(), isQueryParamsEnabled && /*#__PURE__*/jsx(DynamicQueryParams, {
       updateCustomization: updateCustomization
     })]
@@ -1138,6 +1198,21 @@ var SUPPORTED_LANGUAGES = [{
 }];
 var SCRIPT_ID = "embed-script";
 var TAB_STRING = "    ";
+var SWITCH_OPTIONS = {
+  dynamicHeight: {
+    label: t("neetoMolecules.productEmbed.dynamicHeight"),
+    helpText: t("neetoMolecules.productEmbed.dynamicHeightHelpText")
+  },
+  hideTitle: {
+    label: t("neetoMolecules.productEmbed.hideTitle")
+  },
+  alignContentLeft: {
+    label: t("neetoMolecules.productEmbed.alignContentLeft")
+  },
+  transparentBackground: {
+    label: t("neetoMolecules.productEmbed.transparentBackground")
+  }
+};
 
 var Code = function Code(_ref) {
   var id = _ref.id,