@bigbinary/neeto-molecules 3.9.16 → 3.10.0

package/README.md

@@ -37,6 +37,7 @@ https://neeto-molecules.neeto.com/
 - [EmojiReactions](./docs/components/EmojiReactions.md)
 - [ErrorPage](./docs/components/ErrorPage.md)
 - [FileUpload](./docs/components/FileUpload.md)
+- [FinderModal](./docs/components/FinderModal.md)
 - [FloatingActionMenu](./docs/components/FloatingActionMenu.md)
 - [GoogleFontPicker](./docs/components/GoogleFontPicker.md)
 - [Header](./docs/components/Header.md)

package/dist/FinderModal.js

@@ -0,0 +1,244 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { useRef } from 'react';
+import { isNotPresent, humanize, noop } from '@bigbinary/neeto-cist';
+import useHotkeys from '@bigbinary/neeto-hotkeys';
+import Modal from '@bigbinary/neetoui/Modal';
+import Typography from '@bigbinary/neetoui/Typography';
+import { Link as Link$1 } from 'react-router-dom';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import Down from '@bigbinary/neeto-icons/Down';
+import Up from '@bigbinary/neeto-icons/Up';
+import { prop } from 'ramda';
+import { useTranslation } from 'react-i18next';
+import { withT } from '@bigbinary/neeto-commons-frontend/react-utils';
+import Button from '@bigbinary/neetoui/Button';
+import Spinner from '@bigbinary/neetoui/Spinner';
+import Search from './Search.js';
+import '@babel/runtime/helpers/slicedToArray';
+import '@bigbinary/neeto-commons-frontend/react-utils/useFuncDebounce';
+import '@bigbinary/neeto-commons-frontend/react-utils/useQueryParams';
+import '@bigbinary/neeto-commons-frontend/react-utils/useUpdateEffect';
+import '@bigbinary/neeto-commons-frontend/utils/general';
+import '@bigbinary/neeto-icons/Search';
+import '@bigbinary/neetoui/Input';
+import './inject-css-DmrvuTKK.js';
+import '@bigbinary/neeto-commons-frontend/utils';
+
+var _excluded$1 = ["to", "children"];
+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(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 Link = function Link(_ref) {
+  var to = _ref.to,
+    children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded$1);
+  var url = new URL(to);
+  url.host = "";
+  return /*#__PURE__*/jsx(Link$1, _objectSpread$1(_objectSpread$1({}, rest), {}, {
+    to: url.pathname,
+    children: children
+  }));
+};
+
+var minMax = function minMax(number) {
+  var max = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : Number.POSITIVE_INFINITY;
+  var min = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+  return Math.min(max, Math.max(min, number));
+};
+var htmlToText = function htmlToText(html) {
+  var tmp = document.createElement("div");
+  tmp.innerHTML = html;
+  return tmp.textContent || tmp.innerText || "";
+};
+
+var ModalBody = function ModalBody(_ref) {
+  var containerRef = _ref.containerRef,
+    data = _ref.data,
+    iconComponentMap = _ref.iconComponentMap,
+    onClose = _ref.onClose;
+  return /*#__PURE__*/jsx(Modal.Body, {
+    className: "h-96 overflow-y-auto px-4 py-6",
+    children: /*#__PURE__*/jsx("div", {
+      className: "space-y-4",
+      ref: containerRef,
+      children: Object.keys(data).map(function (key) {
+        if (isNotPresent(data[key])) return null;
+        return /*#__PURE__*/jsxs("div", {
+          className: "w-full",
+          children: [/*#__PURE__*/jsx(Typography, {
+            className: "neeto-ui-text-gray-700 mb-2",
+            style: "h6",
+            textTransform: "uppercase",
+            children: humanize(key)
+          }), /*#__PURE__*/jsx("div", {
+            className: "w-full",
+            children: data[key].map(function (item) {
+              var _ref2, _item$content;
+              var Icon = iconComponentMap[key] || iconComponentMap["default"];
+              return /*#__PURE__*/jsxs(Link, {
+                className: "neeto-molecules-search-result-item hover:neeto-ui-bg-gray-100 focus:neeto-ui-bg-gray-100 neeto-ui-rounded flex w-full cursor-pointer items-center gap-2 p-2 text-xs",
+                to: item.url,
+                onClick: onClose,
+                children: [/*#__PURE__*/jsx(Icon, {
+                  className: "neeto-ui-text-gray-600",
+                  size: 16
+                }), /*#__PURE__*/jsx(Typography, {
+                  className: "neeto-ui-text-gray-800 line-clamp-1",
+                  component: "span",
+                  style: "body3",
+                  children: htmlToText((_ref2 = (_item$content = item.content) !== null && _item$content !== void 0 ? _item$content : item.body) !== null && _ref2 !== void 0 ? _ref2 : item.name)
+                })]
+              }, item.id);
+            })
+          })]
+        }, key);
+      })
+    })
+  });
+};
+
+var ModalFooter = function ModalFooter(_ref) {
+  var enableAdvancedSearch = _ref.enableAdvancedSearch;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var shortcuts = [{
+    label: t("neetoMolecules.finderModal.advancedSearch"),
+    keys: ["Cmd/Ctrl", "Return"],
+    isVisible: enableAdvancedSearch
+  }, {
+    label: t("neetoMolecules.common.actions.open"),
+    keys: ["Return"],
+    isVisible: true
+  }, {
+    label: t("neetoMolecules.common.actions.move"),
+    keys: [/*#__PURE__*/jsx(Up, {
+      className: "neeto-ui-text-gray-800",
+      size: 12
+    }, "up"), /*#__PURE__*/jsx(Down, {
+      className: "neeto-ui-text-gray-800",
+      size: 12
+    }, "down")],
+    isVisible: true
+  }, {
+    label: t("neetoMolecules.common.actions.close"),
+    keys: ["Esc"],
+    isVisible: true
+  }];
+  return /*#__PURE__*/jsx(Modal.Footer, {
+    className: "neeto-ui-border-gray-300 border-t px-4 py-2",
+    children: /*#__PURE__*/jsx("div", {
+      className: "neeto-ui-text-xxs flex items-center justify-end gap-4",
+      children: shortcuts.filter(prop("isVisible")).map(function (_ref2, index) {
+        var label = _ref2.label,
+          keys = _ref2.keys;
+        return /*#__PURE__*/jsxs("div", {
+          className: "flex items-center gap-1",
+          children: [/*#__PURE__*/jsx(Typography, {
+            component: "span",
+            style: "nano",
+            children: label
+          }), keys.map(function (key, index) {
+            return /*#__PURE__*/jsx(Typography, {
+              className: "neeto-ui-bg-gray-200 neeto-ui-rounded-sm p-1",
+              component: "span",
+              style: "nano",
+              children: key
+            }, index);
+          })]
+        }, index);
+      })
+    })
+  });
+};
+
+var ModalHeader = withT(function (_ref) {
+  var t = _ref.t,
+    enableAdvancedSearch = _ref.enableAdvancedSearch,
+    loading = _ref.loading,
+    onSearch = _ref.onSearch,
+    onGoToAdvanced = _ref.onGoToAdvanced;
+  return /*#__PURE__*/jsx(Modal.Header, {
+    className: "border-b px-0 py-0",
+    children: /*#__PURE__*/jsx(Search, {
+      onSearch: onSearch,
+      nakedInput: true,
+      className: "px-4 py-1.5",
+      name: "term",
+      placeholder: t("neetoMolecules.common.actions.search"),
+      suffix: /*#__PURE__*/jsxs("div", {
+        className: "flex items-center gap-x-2 px-2",
+        children: [/*#__PURE__*/jsx("div", {
+          className: "h-3 w-3",
+          children: loading && /*#__PURE__*/jsx(Spinner, {
+            size: "small"
+          })
+        }), enableAdvancedSearch && /*#__PURE__*/jsx(Button, {
+          className: "ml-2 whitespace-nowrap",
+          label: t("neetoMolecules.finderModal.advancedSearch"),
+          size: "small",
+          style: "secondary",
+          onClick: onGoToAdvanced
+        })]
+      })
+    })
+  });
+});
+
+var _excluded = ["enableAdvancedSearch", "data", "iconComponentMap", "isFetching", "isOpen", "setSearchTerm", "onClose", "onGoToAdvanced"];
+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(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 FinderModal = function FinderModal(_ref) {
+  var _ref$enableAdvancedSe = _ref.enableAdvancedSearch,
+    enableAdvancedSearch = _ref$enableAdvancedSe === void 0 ? true : _ref$enableAdvancedSe,
+    data = _ref.data,
+    iconComponentMap = _ref.iconComponentMap,
+    isFetching = _ref.isFetching,
+    isOpen = _ref.isOpen,
+    setSearchTerm = _ref.setSearchTerm,
+    onClose = _ref.onClose,
+    _ref$onGoToAdvanced = _ref.onGoToAdvanced,
+    onGoToAdvanced = _ref$onGoToAdvanced === void 0 ? noop : _ref$onGoToAdvanced,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var containerRef = useRef();
+  var mutables = useRef({
+    focusIndex: -1
+  }).current;
+  var onFocusChange = function onFocusChange(offset) {
+    var container = containerRef.current;
+    var nodes = container.querySelectorAll("a.neeto-molecules-search-result-item");
+    mutables.focusIndex = minMax(mutables.focusIndex + offset, nodes.length - 1);
+    nodes[mutables.focusIndex].focus();
+  };
+  useHotkeys(["up", "down"], function (event) {
+    event.preventDefault();
+    if (event.code === "ArrowUp") onFocusChange(-1);else if (event.code === "ArrowDown") onFocusChange(1);
+  }, {
+    mode: "global"
+  });
+  useHotkeys(["ctrl+enter", "command+enter"], onGoToAdvanced, {
+    mode: "global",
+    enabled: enableAdvancedSearch
+  });
+  return /*#__PURE__*/jsxs(Modal, _objectSpread(_objectSpread({
+    isOpen: isOpen,
+    onClose: onClose,
+    closeButton: false
+  }, props), {}, {
+    children: [/*#__PURE__*/jsx(ModalHeader, {
+      enableAdvancedSearch: enableAdvancedSearch,
+      onGoToAdvanced: onGoToAdvanced,
+      loading: isFetching,
+      onSearch: setSearchTerm
+    }), /*#__PURE__*/jsx(ModalBody, {
+      containerRef: containerRef,
+      data: data,
+      iconComponentMap: iconComponentMap,
+      onClose: onClose
+    }), /*#__PURE__*/jsx(ModalFooter, {
+      enableAdvancedSearch: enableAdvancedSearch
+    })]
+  }));
+};
+
+export { FinderModal as default };
+//# sourceMappingURL=FinderModal.js.map

package/dist/FinderModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FinderModal.js","sources":["../src/components/FinderModal/Link.jsx","../src/components/FinderModal/utils.js","../src/components/FinderModal/Body.jsx","../src/components/FinderModal/Footer.jsx","../src/components/FinderModal/Header.jsx","../src/components/FinderModal/index.jsx"],"sourcesContent":["import { Link as RRDLink } from \"react-router-dom\";\n\nconst Link = ({ to, children, ...rest }) => {\n  const url = new URL(to);\n  url.host = \"\";\n\n  return (\n    <RRDLink {...rest} to={url.pathname}>\n      {children}\n    </RRDLink>\n  );\n};\n\nexport default Link;\n","export const minMax = (number, max = Number.POSITIVE_INFINITY, min = 0) =>\n  Math.min(max, Math.max(min, number));\n\nexport const htmlToText = html => {\n  const tmp = document.createElement(\"div\");\n  tmp.innerHTML = html;\n\n  return tmp.textContent || tmp.innerText || \"\";\n};\n","import { humanize, isNotPresent } from \"neetocist\";\nimport { Modal, Typography } from \"neetoui\";\n\nimport Link from \"./Link\";\nimport { htmlToText } from \"./utils\";\n\nconst ModalBody = ({ containerRef, data, iconComponentMap, onClose }) => (\n  <Modal.Body className=\"h-96 overflow-y-auto px-4 py-6\">\n    <div className=\"space-y-4\" ref={containerRef}>\n      {Object.keys(data).map(key => {\n        if (isNotPresent(data[key])) return null;\n\n        return (\n          <div className=\"w-full\" key={key}>\n            <Typography\n              className=\"neeto-ui-text-gray-700 mb-2\"\n              style=\"h6\"\n              textTransform=\"uppercase\"\n            >\n              {humanize(key)}\n            </Typography>\n            <div className=\"w-full\">\n              {data[key].map(item => {\n                const Icon = iconComponentMap[key] || iconComponentMap.default;\n\n                return (\n                  <Link\n                    className=\"neeto-molecules-search-result-item hover:neeto-ui-bg-gray-100 focus:neeto-ui-bg-gray-100 neeto-ui-rounded flex w-full cursor-pointer items-center gap-2 p-2 text-xs\"\n                    key={item.id}\n                    to={item.url}\n                    onClick={onClose}\n                  >\n                    <Icon className=\"neeto-ui-text-gray-600\" size={16} />\n                    <Typography\n                      className=\"neeto-ui-text-gray-800 line-clamp-1\"\n                      component=\"span\"\n                      style=\"body3\"\n                    >\n                      {htmlToText(item.content ?? item.body ?? item.name)}\n                    </Typography>\n                  </Link>\n                );\n              })}\n            </div>\n          </div>\n        );\n      })}\n    </div>\n  </Modal.Body>\n);\n\nexport default ModalBody;\n","import { Down, Up } from \"neetoicons\";\nimport { Modal, Typography } from \"neetoui\";\nimport { prop } from \"ramda\";\nimport { useTranslation } from \"react-i18next\";\n\nconst ModalFooter = ({ enableAdvancedSearch }) => {\n  const { t } = useTranslation();\n\n  const shortcuts = [\n    {\n      label: t(\"neetoMolecules.finderModal.advancedSearch\"),\n      keys: [\"Cmd/Ctrl\", \"Return\"],\n      isVisible: enableAdvancedSearch,\n    },\n    {\n      label: t(\"neetoMolecules.common.actions.open\"),\n      keys: [\"Return\"],\n      isVisible: true,\n    },\n    {\n      label: t(\"neetoMolecules.common.actions.move\"),\n      keys: [\n        <Up className=\"neeto-ui-text-gray-800\" key=\"up\" size={12} />,\n        <Down className=\"neeto-ui-text-gray-800\" key=\"down\" size={12} />,\n      ],\n      isVisible: true,\n    },\n    {\n      label: t(\"neetoMolecules.common.actions.close\"),\n      keys: [\"Esc\"],\n      isVisible: true,\n    },\n  ];\n\n  return (\n    <Modal.Footer className=\"neeto-ui-border-gray-300 border-t px-4 py-2\">\n      <div className=\"neeto-ui-text-xxs flex items-center justify-end gap-4\">\n        {shortcuts.filter(prop(\"isVisible\")).map(({ label, keys }, index) => (\n          <div className=\"flex items-center gap-1\" key={index}>\n            <Typography component=\"span\" style=\"nano\">\n              {label}\n            </Typography>\n            {keys.map((key, index) => (\n              <Typography\n                className=\"neeto-ui-bg-gray-200 neeto-ui-rounded-sm p-1\"\n                component=\"span\"\n                key={index}\n                style=\"nano\"\n              >\n                {key}\n              </Typography>\n            ))}\n          </div>\n        ))}\n      </div>\n    </Modal.Footer>\n  );\n};\n\nexport default ModalFooter;\n","import { withT } from \"neetocommons/react-utils\";\nimport { Button, Modal, Spinner } from \"neetoui\";\n\nimport Search from \"components/Search\";\n\nconst ModalHeader = withT(\n  ({ t, enableAdvancedSearch, loading, onSearch, onGoToAdvanced }) => (\n    <Modal.Header className=\"border-b px-0 py-0\">\n      <Search\n        {...{ onSearch }}\n        nakedInput\n        className=\"px-4 py-1.5\"\n        name=\"term\"\n        placeholder={t(\"neetoMolecules.common.actions.search\")}\n        suffix={\n          <div className=\"flex items-center gap-x-2 px-2\">\n            <div className=\"h-3 w-3\">{loading && <Spinner size=\"small\" />}</div>\n            {enableAdvancedSearch && (\n              <Button\n                className=\"ml-2 whitespace-nowrap\"\n                label={t(\"neetoMolecules.finderModal.advancedSearch\")}\n                size=\"small\"\n                style=\"secondary\"\n                onClick={onGoToAdvanced}\n              />\n            )}\n          </div>\n        }\n      />\n    </Modal.Header>\n  )\n);\n\nexport default ModalHeader;\n","import { useRef } from \"react\";\n\nimport { noop } from \"neetocist\";\nimport useHotkeys from \"neetohotkeys\";\nimport { Modal } from \"neetoui\";\nimport PropTypes from \"prop-types\";\n\nimport ModalBody from \"./Body\";\nimport ModalFooter from \"./Footer\";\nimport ModalHeader from \"./Header\";\nimport { minMax } from \"./utils\";\n\nconst FinderModal = ({\n  enableAdvancedSearch = true,\n  data,\n  iconComponentMap,\n  isFetching,\n  isOpen,\n  setSearchTerm,\n  onClose,\n  onGoToAdvanced = noop,\n  ...props\n}) => {\n  const containerRef = useRef();\n  const mutables = useRef({ focusIndex: -1 }).current;\n\n  const onFocusChange = offset => {\n    const container = containerRef.current;\n    const nodes = container.querySelectorAll(\n      \"a.neeto-molecules-search-result-item\"\n    );\n\n    mutables.focusIndex = minMax(\n      mutables.focusIndex + offset,\n      nodes.length - 1\n    );\n    nodes[mutables.focusIndex].focus();\n  };\n\n  useHotkeys(\n    [\"up\", \"down\"],\n    event => {\n      event.preventDefault();\n      if (event.code === \"ArrowUp\") onFocusChange(-1);\n      else if (event.code === \"ArrowDown\") onFocusChange(1);\n    },\n    { mode: \"global\" }\n  );\n\n  useHotkeys([\"ctrl+enter\", \"command+enter\"], onGoToAdvanced, {\n    mode: \"global\",\n    enabled: enableAdvancedSearch,\n  });\n\n  return (\n    <Modal {...{ isOpen, onClose }} closeButton={false} {...props}>\n      <ModalHeader\n        {...{ enableAdvancedSearch, onGoToAdvanced }}\n        loading={isFetching}\n        onSearch={setSearchTerm}\n      />\n      <ModalBody {...{ containerRef, data, iconComponentMap, onClose }} />\n      <ModalFooter {...{ enableAdvancedSearch }} />\n    </Modal>\n  );\n};\n\nFinderModal.propTypes = {\n  /*\n    Boolean to indicate decide whether to show advanced search button or not\n  */\n  enableAdvancedSearch: PropTypes.bool,\n  /*\n    Data to be displayed in the modal\n  */\n  data: PropTypes.objectOf(\n    PropTypes.arrayOf(\n      PropTypes.shape({\n        id: PropTypes.string,\n        url: PropTypes.string,\n        content: PropTypes.string,\n        body: PropTypes.string,\n        name: PropTypes.string,\n      })\n    )\n  ),\n  /*\n    Icon component map to render icons for each section\n  */\n  iconComponentMap: PropTypes.objectOf(PropTypes.elementType),\n  /*\n    Boolean to indicate whether data is being fetched or not\n  */\n  isFetching: PropTypes.bool,\n  /*\n    Boolean to indicate whether modal is open or not\n  */\n  isOpen: PropTypes.bool,\n  /*\n    Function to set search term\n  */\n  setSearchTerm: PropTypes.func,\n  /*\n    Function to close the modal\n  */\n  onClose: PropTypes.func,\n  /*\n    Function to execute when user clicks on advanced search button\n  */\n  onGoToAdvanced: PropTypes.func,\n};\n\nexport default FinderModal;\n"],"names":["Link","_ref","to","children","rest","_objectWithoutProperties","_excluded","url","URL","host","_jsx","RRDLink","_objectSpread","pathname","minMax","number","max","arguments","length","undefined","Number","POSITIVE_INFINITY","min","Math","htmlToText","html","tmp","document","createElement","innerHTML","textContent","innerText","ModalBody","containerRef","data","iconComponentMap","onClose","Modal","Body","className","ref","Object","keys","map","key","isNotPresent","_jsxs","Typography","style","textTransform","humanize","item","_ref2","_item$content","Icon","onClick","size","component","content","body","name","id","ModalFooter","enableAdvancedSearch","_useTranslation","useTranslation","t","shortcuts","label","isVisible","Up","Down","Footer","filter","prop","index","ModalHeader","withT","loading","onSearch","onGoToAdvanced","Header","Search","nakedInput","placeholder","suffix","Spinner","Button","FinderModal","_ref$enableAdvancedSe","isFetching","isOpen","setSearchTerm","_ref$onGoToAdvanced","noop","props","useRef","mutables","focusIndex","current","onFocusChange","offset","container","nodes","querySelectorAll","focus","useHotkeys","event","preventDefault","code","mode","enabled","closeButton"],"mappings":"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"}

package/dist/ProductEmbed.js

@@ -78,6 +78,7 @@ var DEFAULT_CUSTOMIZATION = _defineProperty(_defineProperty(_defineProperty({},
   elementSelector: "open-popup-button"
 });
 var SCRIPT_ID = "embed-script";
+var TAB_STRING = "    ";
 
 var FLOATING_BUTTON_POSITIONS = [{
   label: t("neetoMolecules.productEmbed.customization.position.bottomLeft"),
@@ -96,17 +97,17 @@ var embedBaseScript = function embedBaseScript(embedScriptLink) {
   return "<script>window.".concat(camelCasedAppName, " = window.").concat(camelCasedAppName, " || { embed: function(){(").concat(camelCasedAppName, ".q=").concat(camelCasedAppName, ".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, "\",") : "";
+  return globalProps.railsEnv !== "production" ? "\n".concat(TAB_STRING, "  env: \"").concat(globalProps.railsEnv, "\",") : "";
 };
 var embedQueryParam = function embedQueryParam(queryParams) {
-  return queryParams ? "\n\t  queryParams: ".concat(queryParams, ",") : "";
+  return queryParams ? "\n".concat(TAB_STRING, "  queryParams: ").concat(queryParams, ",") : "";
 };
 var parseExtraArgs = function parseExtraArgs(extraArgs) {
   return toPairs(extraArgs).map(function (_ref) {
     var _ref2 = _slicedToArray(_ref, 2),
       key = _ref2[0],
       value = _ref2[1];
-    return "\n\t  ".concat(key, ": \"").concat(value, "\"");
+    return "\n".concat(TAB_STRING, "  ").concat(key, ": \"").concat(value, "\"");
   });
 };
 var inlineEmbedCode = function inlineEmbedCode(_ref3) {
@@ -135,7 +136,7 @@ var floatingPopupEmbedCode = function floatingPopupEmbedCode(_ref4) {
     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(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\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 -->");
+  return "\n  <!-- ".concat(globalProps.appName, " floating-popup embed code begins -->\n  ").concat(embedBaseScript(embedScriptLink), "\n  <script>\n    ").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  </script>\n  <!-- ").concat(globalProps.appName, " floating-popup embed code ends -->");
 };
 var elementPopupEmbedCode = function elementPopupEmbedCode(_ref5) {
   var customization = _ref5.customization,