@bigbinary/neeto-molecules 1.1.78 → 1.2.0-beta2

package/dist/cjs/ProductEmbed.js

@@ -0,0 +1,777 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var React = require('react');
+var classnames = require('classnames');
+var neetoIcons = require('@bigbinary/neeto-icons');
+var neetoui = require('@bigbinary/neetoui');
+var ramda = require('ramda');
+var reactI18next = require('react-i18next');
+var Codeblock = require('./Codeblock.js');
+var i18next = require('i18next');
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+var injectCss = require('./inject-css-80a5faa3.js');
+require('@babel/runtime/helpers/extends');
+require('react-syntax-highlighter');
+require('react-syntax-highlighter/dist/esm/styles/prism');
+require('./CopyToClipboardButton.js');
+require('@babel/runtime/helpers/objectWithoutProperties');
+require('@bigbinary/neeto-commons-frontend/utils/general');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
+
+var Code = function Code(_ref) {
+  var code = _ref.code;
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "relative w-full overflow-y-auto",
+    "data-cy": "embed-code-block",
+    "data-testid": "embed-code-block"
+  }, /*#__PURE__*/React__default["default"].createElement(Codeblock, {
+    code: code
+  }));
+};
+
+var TAB_KEYS = {
+  HTML: "html",
+  PREVIEW: "preview"
+};
+var TABS = [{
+  key: TAB_KEYS.HTML,
+  label: i18next.t("neetoMolecules.productEmbed.tab.html"),
+  icon: neetoIcons.Code
+}, {
+  key: TAB_KEYS.PREVIEW,
+  label: i18next.t("neetoMolecules.productEmbed.tab.preview"),
+  icon: neetoIcons.Eye
+}];
+var EMBED_OPTIONS = {
+  INLINE: "inline",
+  FLOATING_POPUP: "floatingPopup",
+  ELEMENT_POPUP: "elementPopup"
+};
+var DEFAULT_CUSTOMIZATION = _defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"]({}, EMBED_OPTIONS.INLINE, {
+  width: 100,
+  height: 100,
+  elementSelector: "inline-embed-container"
+}), EMBED_OPTIONS.FLOATING_POPUP, {
+  showIcon: false,
+  btnText: "Open",
+  btnColor: "#6f14ed",
+  btnTextColor: "#fff",
+  btnPosition: "bottomRight"
+}), EMBED_OPTIONS.ELEMENT_POPUP, {
+  elementSelector: "open-popup-button"
+});
+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__default["default"](_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__default["default"](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__default["default"](_useState, 2),
+    queryParams = _useState2[0],
+    setQueryParams = _useState2[1];
+  var handleAddQueryParam = function handleAddQueryParam() {
+    setQueryParams([].concat(_toConsumableArray__default["default"](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__default["default"]({}, 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,
+    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, {
+    "data-cy": "element-popup-header",
+    style: "h4"
+  }, t("neetoMolecules.productEmbed.customization.elementPopup.title")), /*#__PURE__*/React__default["default"].createElement(neetoui.Callout, {
+    "data-cy": "element-popup-description"
+  }, t("neetoMolecules.productEmbed.customization.elementPopup.description")), /*#__PURE__*/React__default["default"].createElement(neetoui.Input, {
+    className: "w-full",
+    "data-cy": "element-id-input-field",
+    "data-testid": "element-id-input-field",
+    value: elementSelector,
+    error: !elementSelector && t("neetoMolecules.productEmbed.customization.elementPopup.warning"),
+    label: t("neetoMolecules.productEmbed.customization.elementPopup.elementId"),
+    onChange: function onChange(e) {
+      return updateCustomization({
+        elementSelector: e.target.value
+      });
+    }
+  }), isQueryParamsEnabled && /*#__PURE__*/React__default["default"].createElement(DynamicQueryParams, {
+    updateCustomization: updateCustomization
+  }));
+};
+
+var FloatingPopup$1 = function FloatingPopup(_ref) {
+  var customization = _ref.customization,
+    updateCustomization = _ref.updateCustomization,
+    isQueryParamsEnabled = _ref.isQueryParamsEnabled;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var btnTextColor = customization.btnTextColor,
+    showIcon = customization.showIcon,
+    btnText = customization.btnText,
+    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, {
+    "data-cy": "popup-customization-header",
+    style: "h4"
+  }, t("neetoMolecules.productEmbed.customization.floatingPopup.title")), icon && /*#__PURE__*/React__default["default"].createElement(neetoui.Checkbox, {
+    checked: showIcon,
+    "data-cy": "show-icon-checkbox",
+    "data-testid": "show-icon-checkbox",
+    label: t("neetoMolecules.productEmbed.customization.floatingPopup.showCalIcon"),
+    onChange: function onChange(e) {
+      return updateCustomization({
+        showIcon: e.target.checked
+      });
+    }
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "space-y-2"
+  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Input, {
+    "data-cy": "button-text-input-field",
+    "data-testid": "button-text-input-field",
+    value: btnText,
+    label: t("neetoMolecules.productEmbed.customization.floatingPopup.button.text"),
+    onChange: function onChange(e) {
+      return updateCustomization({
+        btnText: e.target.value
+      });
+    }
+  })), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "space-y-2"
+  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Select, {
+    "data-cy": "button-position-select-field",
+    "data-testid": "button-position-select-field",
+    options: FLOATING_BUTTON_POSITIONS,
+    value: btnPosition,
+    getOptionValue: function getOptionValue(option) {
+      return typeof option === "string" ? option : option.value;
+    },
+    label: t("neetoMolecules.productEmbed.customization.floatingPopup.button.pos"),
+    onChange: function onChange(e) {
+      return updateCustomization({
+        btnPosition: e.value
+      });
+    }
+  })), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "flex items-center justify-between gap-x-2",
+    "data-cy": "button-color-label"
+  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Label, null, t("neetoMolecules.productEmbed.customization.floatingPopup.button.color")), /*#__PURE__*/React__default["default"].createElement(neetoui.ColorPicker, {
+    color: btnColor,
+    onChange: function onChange(e) {
+      return updateCustomization({
+        btnColor: e.hex
+      });
+    }
+  })), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "flex items-center justify-between gap-x-2",
+    "data-cy": "button-text-color-label"
+  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Label, null, t("neetoMolecules.productEmbed.customization.floatingPopup.button.textColor")), /*#__PURE__*/React__default["default"].createElement(neetoui.ColorPicker, {
+    color: btnTextColor,
+    onChange: function onChange(e) {
+      return updateCustomization({
+        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,
+    isQueryParamsEnabled = _ref.isQueryParamsEnabled;
+  var height = customization.height,
+    width = customization.width,
+    elementSelector = customization.elementSelector;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var handleInputChange = function handleInputChange(_ref2, attribute) {
+    var value = _ref2.target.value;
+    return updateCustomization(_defineProperty__default["default"]({}, 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, {
+    "data-cy": "customization-text",
+    style: "h4"
+  }, t("neetoMolecules.productEmbed.customization.inline.title")), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "flex flex-col gap-2"
+  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Label, {
+    "data-cy": "window-size-text"
+  }, t("neetoMolecules.productEmbed.customization.inline.sizeOfEmbedWindow")), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "flex justify-between gap-x-2"
+  }, /*#__PURE__*/React__default["default"].createElement(neetoui.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__*/React__default["default"].createElement(neetoui.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__*/React__default["default"].createElement("div", {
+    className: "flex flex-col gap-2"
+  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Label, {
+    "data-cy": "inline-element-id-input-label"
+  }, t("neetoMolecules.productEmbed.customization.inline.elementId")), /*#__PURE__*/React__default["default"].createElement(neetoui.Input, {
+    "data-cy": "inline-element-id-input-field",
+    "data-testid": "inline-element-id-input-field",
+    value: elementSelector,
+    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,
+    isQueryParamsEnabled = _ref.isQueryParamsEnabled;
+  var type = _defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"]({}, 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
+  });
+};
+
+var Header = function Header(_ref) {
+  var tab = _ref.tab,
+    setTab = _ref.setTab;
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "flex w-full pt-2"
+  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Tab, {
+    noUnderline: true,
+    className: "neeto-molecules-product-embed-tab"
+  }, TABS.map(function (_ref2) {
+    var key = _ref2.key,
+      label = _ref2.label,
+      icon = _ref2.icon;
+    return /*#__PURE__*/React__default["default"].createElement(neetoui.Tab.Item, {
+      icon: icon,
+      active: tab === key,
+      "data-cy": "".concat(key, "-tab"),
+      "data-testid": "".concat(key, "-tab"),
+      key: key,
+      onClick: function onClick() {
+        return setTab(key);
+      }
+    }, label);
+  })));
+};
+
+var Options = function Options(_ref) {
+  var options = _ref.options,
+    selectedOption = _ref.selectedOption,
+    setSelectedOption = _ref.setSelectedOption;
+  return /*#__PURE__*/React__default["default"].createElement(neetoui.Radio, {
+    stacked: true,
+    containerClassName: "w-full flex flex-col gap-y-6",
+    name: "options"
+  }, Object.entries(options).map(function (_ref2) {
+    var _ref3 = _slicedToArray__default["default"](_ref2, 2),
+      key = _ref3[0],
+      _ref3$ = _ref3[1],
+      label = _ref3$.label,
+      description = _ref3$.description;
+    return /*#__PURE__*/React__default["default"].createElement("label", {
+      className: "neeto-ui-border-gray-300 neeto-ui-bg-white neeto-ui-rounded-lg w-full cursor-pointer border p-4",
+      "data-cy": "".concat(key, "-embed-option-label"),
+      "data-testid": "".concat(key, "-embed-option-label"),
+      htmlFor: key,
+      key: key
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "flex items-center"
+    }, /*#__PURE__*/React__default["default"].createElement(neetoui.Radio.Item, {
+      label: label,
+      checked: key === selectedOption,
+      className: "mb-0",
+      "data-cy": "".concat(key, "-embed-radio-button"),
+      "data-testid": "".concat(key, "-embed-radio-button"),
+      id: key,
+      name: "options",
+      value: key,
+      onChange: function onChange(event) {
+        return setSelectedOption(event.target.value);
+      }
+    })), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+      className: "w-full pl-6 pt-1",
+      "data-cy": "".concat(key, "-embed-option-description"),
+      style: "body2"
+    }, description));
+  }));
+};
+
+var BrowserIcon = function BrowserIcon() {
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
+    fill: "none",
+    height: "12",
+    viewBox: "0 0 52 12",
+    width: "52",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M11.5 6a5.5 5.5 0 11-11 0 5.5 5.5 0 0111 0z",
+    fill: "#FF5F57",
+    stroke: "#E14640"
+  }), /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M31.5 6a5.5 5.5 0 11-11 0 5.5 5.5 0 0111 0z",
+    fill: "#FFBD2E",
+    stroke: "#DFA123"
+  }), /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M51.5 6a5.5 5.5 0 11-11 0 5.5 5.5 0 0111 0z",
+    fill: "#28CA42",
+    stroke: "#1DAD2C"
+  }));
+};
+
+var ElementPopup = function ElementPopup(_ref) {
+  var iframeURL = _ref.iframeURL,
+    customization = _ref.customization;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var elementSelector = customization.elementSelector;
+  React.useEffect(function () {
+    var _window$globalProps$a;
+    var element = document.getElementById(elementSelector);
+    if (element) (_window$globalProps$a = window[globalProps.appName]) === null || _window$globalProps$a === void 0 ? void 0 : _window$globalProps$a.embed(element, iframeURL);
+  }, []);
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "relative flex h-full w-full items-center justify-center p-6"
+  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+    "data-cy": "preview-element-popup-button",
+    "data-testid": "preview-element-popup-button",
+    id: elementSelector,
+    size: "small",
+    label: t("neetoMolecules.productEmbed.customization.elementPopup.label")
+  }));
+};
+
+var FloatingPopup = function FloatingPopup(_ref) {
+  var iframeURL = _ref.iframeURL,
+    customization = _ref.customization;
+  var btnTextColor = customization.btnTextColor,
+    showIcon = customization.showIcon,
+    btnText = customization.btnText,
+    btnPosition = customization.btnPosition,
+    btnColor = customization.btnColor,
+    icon = customization.icon;
+  React.useEffect(function () {
+    var _window$globalProps$a;
+    var btn = document.getElementById("embedBtn");
+    (_window$globalProps$a = window[globalProps.appName]) === null || _window$globalProps$a === void 0 ? void 0 : _window$globalProps$a.embed(btn, iframeURL);
+  }, []);
+  React.useEffect(function () {
+    var btn = document.getElementById("embedBtn");
+    btn.style.backgroundColor = btnColor;
+    btn.style.color = btnTextColor;
+  }, [btnColor, btnTextColor]);
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "relative h-full w-full"
+  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+    "data-cy": "popup-preview-button",
+    icon: icon && showIcon ? icon : null,
+    iconPosition: "left",
+    id: "embedBtn",
+    label: btnText,
+    className: classnames__default["default"]("absolute bottom-0 m-16", {
+      "left-0": btnPosition === "bottomLeft",
+      "right-0": btnPosition === "bottomRight"
+    })
+  }));
+};
+
+var Inline = function Inline(_ref) {
+  var iframeURL = _ref.iframeURL,
+    customization = _ref.customization;
+  var height = customization.height,
+    width = customization.width;
+  return /*#__PURE__*/React__default["default"].createElement("iframe", {
+    className: "m-auto",
+    height: "".concat(height, "%"),
+    src: iframeURL,
+    width: "".concat(width, "%")
+  });
+};
+
+var Preview = function Preview(_ref) {
+  var isScriptLoading = _ref.isScriptLoading,
+    selectedOption = _ref.selectedOption,
+    id = _ref.id,
+    customization = _ref.customization,
+    _ref$customPreviewIfr = _ref.customPreviewIframeUrl,
+    customPreviewIframeUrl = _ref$customPreviewIfr === void 0 ? "" : _ref$customPreviewIfr;
+  var preview = _defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"]({}, EMBED_OPTIONS.INLINE, Inline), EMBED_OPTIONS.FLOATING_POPUP, FloatingPopup), EMBED_OPTIONS.ELEMENT_POPUP, ElementPopup);
+  var iframeURL = customPreviewIframeUrl || "".concat(location.origin, "/embed/").concat(id);
+  var Component = preview[selectedOption];
+  if (isScriptLoading) {
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "flex min-h-0 flex-grow items-center justify-center overflow-y-auto"
+    }, /*#__PURE__*/React__default["default"].createElement(neetoui.Spinner, null));
+  }
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "neeto-ui-rounded-lg neeto-ui-border-gray-300 neeto-ui-bg-white relative flex w-full flex-col overflow-hidden border"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "neeto-ui-border-gray-300 flex-shrink-0 border-b p-3"
+  }, /*#__PURE__*/React__default["default"].createElement(BrowserIcon, null)), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "flex min-h-0 flex-grow overflow-y-auto"
+  }, /*#__PURE__*/React__default["default"].createElement(Component, {
+    customization: customization,
+    iframeURL: iframeURL
+  })));
+};
+
+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,{});
+
+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__default["default"](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) {
+  var _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className,
+    _ref$customEmbedScrip = _ref.customEmbedScriptPath,
+    customEmbedScriptPath = _ref$customEmbedScrip === void 0 ? "" : _ref$customEmbedScrip,
+    _ref$customPreviewIfr = _ref.customPreviewIframeUrl,
+    customPreviewIframeUrl = _ref$customPreviewIfr === void 0 ? "" : _ref$customPreviewIfr,
+    _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,
+    extraArgs = _ref$extraArgs === void 0 ? {} : _ref$extraArgs;
+  var _useState = React.useState(true),
+    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    isScriptLoading = _useState2[0],
+    setIsScriptLoading = _useState2[1];
+  var _useState3 = React.useState(TAB_KEYS.HTML),
+    _useState4 = _slicedToArray__default["default"](_useState3, 2),
+    tab = _useState4[0],
+    setTab = _useState4[1];
+  var _useState5 = React.useState(EMBED_OPTIONS.INLINE),
+    _useState6 = _slicedToArray__default["default"](_useState5, 2),
+    selectedOption = _useState6[0],
+    setSelectedOption = _useState6[1];
+  var _useState7 = React.useState(function () {
+      return buildDefaultCustomization(options);
+    }),
+    _useState8 = _slicedToArray__default["default"](_useState7, 2),
+    customizations = _useState8[0],
+    setCustomizations = _useState8[1];
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var embedScriptLink = customEmbedScriptPath || "".concat(window.location.protocol, "//").concat(window.location.host, "/javascript/embed.js");
+  var code = embedCode({
+    id: id,
+    type: selectedOption,
+    customization: customizations[selectedOption],
+    embedScriptLink: embedScriptLink,
+    extraArgs: extraArgs
+  });
+  var loadScript = function loadScript() {
+    var script = document.createElement("script");
+    script.id = SCRIPT_ID;
+    script.src = embedScriptLink;
+    document.head.appendChild(script);
+    setIsScriptLoading(false);
+  };
+  var updateCustomization = function updateCustomization(props) {
+    return setCustomizations(function (prevState) {
+      return _objectSpread(_objectSpread({}, prevState), {}, _defineProperty__default["default"]({}, selectedOption, ramda.mergeLeft(props, prevState[selectedOption])));
+    });
+  };
+  React.useEffect(function () {
+    var isScriptLoaded = document.getElementById(SCRIPT_ID);
+    if (isScriptLoaded) setIsScriptLoading(false);else loadScript();
+  }, []);
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classnames__default["default"]("flex w-full flex-grow", className),
+    "data-testid": "embed-product"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "neeto-molecules-embed-left-sidebar border-r"
+  }, goBackLink && /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+    className: "mb-4 px-0",
+    "data-cy": "back-button",
+    "data-testid": "back-button",
+    icon: neetoIcons.LeftArrow,
+    iconPosition: "left",
+    label: t("neetoMolecules.productEmbed.backToShare"),
+    size: "small",
+    style: "icon",
+    to: goBackLink
+  }), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    "data-cy": "embed-options-header-title",
+    style: "h3"
+  }, t("neetoMolecules.productEmbed.embedOptions.title")), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    className: "mt-1",
+    "data-cy": "embed-options-header-description",
+    style: "body3"
+  }, t("neetoMolecules.productEmbed.embedOptions.description")), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "mt-6 flex w-full flex-col gap-y-6 pb-10"
+  }, /*#__PURE__*/React__default["default"].createElement(Options, {
+    options: options,
+    selectedOption: selectedOption,
+    setSelectedOption: setSelectedOption
+  }), /*#__PURE__*/React__default["default"].createElement(Customization, {
+    isQueryParamsEnabled: isQueryParamsEnabled,
+    updateCustomization: updateCustomization,
+    customization: customizations[selectedOption],
+    option: selectedOption
+  }))), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "neeto-ui-bg-white flex w-full min-w-0 flex-grow flex-col gap-4 p-6"
+  }, /*#__PURE__*/React__default["default"].createElement(Header, {
+    setTab: setTab,
+    tab: tab
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "flex flex-grow overflow-y-auto"
+  }, tab === TAB_KEYS.PREVIEW ? /*#__PURE__*/React__default["default"].createElement(Preview, {
+    customPreviewIframeUrl: customPreviewIframeUrl,
+    id: id,
+    isScriptLoading: isScriptLoading,
+    selectedOption: selectedOption,
+    customization: customizations[selectedOption]
+  }) : /*#__PURE__*/React__default["default"].createElement(Code, {
+    code: code
+  }))));
+};
+
+module.exports = ProductEmbed;
+//# sourceMappingURL=ProductEmbed.js.map