@bigbinary/neeto-molecules 1.1.10 → 1.1.12

package/dist/Scrollable/scrollable.scss

@@ -0,0 +1,32 @@
+.neeto-molecules-scrollable {
+  flex-grow: 1;
+  overflow-y: auto;
+
+  &.neeto-molecules-scrollable--nano {
+    height: calc(
+      100vh - var(--neeto-molecules-main-header-with-breadcrumbs-height) -
+        var(--neeto-molecules-sub-header-height) -
+        var(--neeto-molecules-sub-header-bottom-margin)
+    );
+  }
+
+  &.neeto-molecules-scrollable--small {
+    height: calc(
+      100vh - var(--neeto-molecules-main-header-height) -
+        var(--neeto-molecules-sub-header-height) -
+        var(--neeto-molecules-sub-header-bottom-margin)
+    );
+  }
+
+  &.neeto-molecules-scrollable--medium {
+    height: calc(100vh - var(--neeto-molecules-main-header-with-breadcrumbs-height));
+  }
+
+  &.neeto-molecules-scrollable--large {
+    height: calc(100vh - var(--neeto-molecules-main-header-height));
+  }
+
+  &.neeto-molecules-scrollable--viewport {
+    height: 100vh;
+  }
+}

package/dist/Search/index.js

@@ -0,0 +1,52 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["value", "debounceTime", "onChange", "onSearch"];
+import React, { useEffect, useState } from "react";
+import { useDebounce } from "@bigbinary/neeto-commons-frontend/react-utils";
+import { Search as NeetoUISearchIcon } from "@bigbinary/neeto-icons";
+import { Input } from "@bigbinary/neetoui";
+import { useTranslation } from "react-i18next";
+var Search = function Search(_ref) {
+  var _ref$value = _ref.value,
+    value = _ref$value === void 0 ? "" : _ref$value,
+    _ref$debounceTime = _ref.debounceTime,
+    debounceTime = _ref$debounceTime === void 0 ? 300 : _ref$debounceTime,
+    onChange = _ref.onChange,
+    onSearch = _ref.onSearch,
+    inputProps = _objectWithoutProperties(_ref, _excluded);
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useState = useState(value),
+    _useState2 = _slicedToArray(_useState, 2),
+    internalValue = _useState2[0],
+    setInternalValue = _useState2[1];
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    untrimmedValue = _useState4[0],
+    setUntrimmedValue = _useState4[1];
+  useEffect(function () {
+    if (untrimmedValue && untrimmedValue.includes(value)) {
+      setInternalValue(untrimmedValue);
+    } else {
+      setInternalValue(value);
+    }
+  }, [value]);
+  var debouncedValue = useDebounce(internalValue, debounceTime);
+  useEffect(function () {
+    onSearch === null || onSearch === void 0 ? void 0 : onSearch(debouncedValue.trim());
+  }, [debouncedValue, onSearch]);
+  var handleOnChange = function handleOnChange(e) {
+    onChange === null || onChange === void 0 ? void 0 : onChange(e);
+    setInternalValue(e.target.value);
+    setUntrimmedValue(e.target.value);
+  };
+  return /*#__PURE__*/React.createElement(Input, _extends({
+    placeholder: t("neetoMolecules.common.actions.search"),
+    prefix: /*#__PURE__*/React.createElement(NeetoUISearchIcon, null),
+    type: "search",
+    value: internalValue,
+    onChange: handleOnChange
+  }, inputProps));
+};
+export default Search;

package/dist/Security/AllowedKeywords/Add.js

@@ -0,0 +1,38 @@
+import React from "react";
+import classNames from "classnames";
+import { useFormikContext } from "formik";
+import { Delete } from "@bigbinary/neeto-icons";
+import { Button } from "@bigbinary/neetoui";
+import { Input } from "@bigbinary/neetoui/formik";
+import { remove } from "ramda";
+import { useTranslation } from "react-i18next";
+var Add = function Add() {
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useFormikContext = useFormikContext(),
+    setFieldValue = _useFormikContext.setFieldValue,
+    allowedKeywords = _useFormikContext.values.allowedKeywords;
+  var removeKeyword = function removeKeyword(index) {
+    return setFieldValue("allowedKeywords", remove(index, 1, allowedKeywords));
+  };
+  if (!allowedKeywords) return null;
+  return allowedKeywords.map(function (_, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: classNames("flex w-full items-start justify-between gap-x-2"),
+      key: index
+    }, /*#__PURE__*/React.createElement(Input, {
+      autoFocus: true,
+      "data-cy": "keyword-input-field-".concat(index),
+      name: "allowedKeywords[".concat(index, "]"),
+      placeholder: t("neetoMolecules.security.placeholders.enterKeyword")
+    }), /*#__PURE__*/React.createElement(Button, {
+      "data-cy": "keyword-remove-button-".concat(index),
+      icon: Delete,
+      style: "text",
+      onClick: function onClick() {
+        return removeKeyword(index);
+      }
+    }));
+  });
+};
+export default Add;

package/dist/Security/AllowedKeywords/index.js

@@ -0,0 +1,38 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import React from "react";
+import { ErrorMessage, useFormikContext } from "formik";
+import { globalProps } from "@bigbinary/neeto-commons-frontend/initializers";
+import { Button, Label } from "@bigbinary/neetoui";
+import { isEmpty } from "ramda";
+import { useTranslation } from "react-i18next";
+import Add from "./Add";
+import { OTP_ENABLED, APP_NAME } from "../constants";
+var AllowedKeywords = function AllowedKeywords() {
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useFormikContext = useFormikContext(),
+    setFieldValue = _useFormikContext.setFieldValue,
+    _useFormikContext$val = _useFormikContext.values,
+    allowedKeywords = _useFormikContext$val.allowedKeywords,
+    authKind = _useFormikContext$val.authKind;
+  if (authKind !== OTP_ENABLED) return null;
+  var appName = APP_NAME[globalProps.appName];
+  return /*#__PURE__*/React.createElement("div", {
+    className: "flex-col space-y-2 py-2"
+  }, appName && /*#__PURE__*/React.createElement(Label, null, t("neetoMolecules.security.labels.keywordForm.".concat(appName))), /*#__PURE__*/React.createElement("div", {
+    className: "neeto-ui-bg-pastel-blue neeto-ui-rounded-sm w-full space-y-4 p-6"
+  }, /*#__PURE__*/React.createElement(Add, null), /*#__PURE__*/React.createElement(Button, {
+    "data-cy": "add-allowed-keyword-button",
+    "data-testid": "add-allowed-keyword-button",
+    label: t("neetoMolecules.security.labels.addKeyWord"),
+    style: "link",
+    onClick: function onClick() {
+      return setFieldValue("allowedKeywords", [].concat(_toConsumableArray(allowedKeywords), [""]));
+    }
+  })), isEmpty(allowedKeywords) && /*#__PURE__*/React.createElement(ErrorMessage, {
+    className: "neeto-ui-text-error-600",
+    component: "div",
+    name: "allowedKeywords"
+  }));
+};
+export default AllowedKeywords;

package/dist/Security/PasswordBlock.js

@@ -0,0 +1,31 @@
+import React from "react";
+import { useFormikContext } from "formik";
+import { Input } from "@bigbinary/neetoui/formik";
+import { useTranslation } from "react-i18next";
+import { PASSWORD_ENABLED } from "./constants";
+var Password = function Password() {
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useFormikContext = useFormikContext(),
+    authKind = _useFormikContext.values.authKind,
+    getFieldProps = _useFormikContext.getFieldProps;
+  if (authKind !== PASSWORD_ENABLED) return null;
+  var _getFieldProps = getFieldProps("password"),
+    onPasswordChange = _getFieldProps.onChange;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "space-y-4 pb-2"
+  }, /*#__PURE__*/React.createElement(Input, {
+    autoFocus: true,
+    unlimitedChars: true,
+    className: "w-7/12",
+    "data-testid": "password-block",
+    label: t("neetoMolecules.security.labels.password"),
+    name: "password",
+    placeholder: t("neetoMolecules.security.placeholders.enterPassword"),
+    onChange: function onChange(e) {
+      e.target.value = e.target.value.trim();
+      onPasswordChange(e);
+    }
+  }));
+};
+export default Password;

package/dist/Security/RadioBlock.js

@@ -0,0 +1,38 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import React from "react";
+import { useFormikContext } from "formik";
+import { Radio } from "@bigbinary/neetoui/formik";
+import { OTP_ENABLED } from "./constants";
+var RadioBlock = function RadioBlock(_ref) {
+  var radioItems = _ref.radioItems;
+  var _useFormikContext = useFormikContext(),
+    _useFormikContext$val = _useFormikContext.values.allowedKeywords,
+    allowedKeywords = _useFormikContext$val === void 0 ? [] : _useFormikContext$val,
+    setFieldValue = _useFormikContext.setFieldValue;
+  var handleRadioChange = function handleRadioChange(_ref2) {
+    var value = _ref2.event.target.value,
+      allowedKeywords = _ref2.allowedKeywords;
+    var allowedKeywordsValue = value === OTP_ENABLED ? [].concat(_toConsumableArray(allowedKeywords), [""]) : [];
+    setFieldValue("allowedKeywords", allowedKeywordsValue);
+    setFieldValue("authKind", value);
+  };
+  return /*#__PURE__*/React.createElement(Radio, {
+    stacked: true,
+    name: "authKind",
+    onChange: function onChange(event) {
+      return handleRadioChange({
+        event: event,
+        allowedKeywords: allowedKeywords
+      });
+    }
+  }, radioItems.map(function (_ref3) {
+    var label = _ref3.label,
+      value = _ref3.value;
+    return /*#__PURE__*/React.createElement(Radio.Item, {
+      key: value,
+      label: label,
+      value: value
+    });
+  }));
+};
+export default RadioBlock;

package/dist/Security/api.js

@@ -0,0 +1,12 @@
+import axios from "axios";
+var fetch = function fetch(url) {
+  return axios.get(url);
+};
+var update = function update(url, payload) {
+  return axios.put(url, payload);
+};
+var settingsApi = {
+  fetch: fetch,
+  update: update
+};
+export default settingsApi;

package/dist/Security/constants.js

@@ -0,0 +1,58 @@
+import { t } from "i18next";
+import { identity } from "ramda";
+import * as yup from "yup";
+import { findKeywordDuplicates } from "./utils";
+var NOT_SECURED = "no_auth";
+var SESSION_AUTH = "session_auth";
+yup.addMethod(yup.array, "unique", function (message) {
+  var mapper = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : identity;
+  return this.test("unique", message, function (list, _ref) {
+    var authKind = _ref.parent.authKind;
+    return authKind === OTP_ENABLED && (list === null || list === void 0 ? void 0 : list.length) === new Set(list === null || list === void 0 ? void 0 : list.map(mapper)).size ? true : findKeywordDuplicates(list, message, this.createError);
+  });
+});
+export var QUERY_KEYS = {
+  SETTINGS_LIST: "settings-list",
+  GETTING_STARTED: "getting-started",
+  INTEGRATION_SETTINGS: "integration_settings",
+  THEMES_SETTINGS: "themes_setting"
+};
+export var SETTINGS_STALE_TIME = 900000; // 15 mins
+export var PASSWORD_ENABLED = "basic_auth";
+export var OTP_ENABLED = "otp_auth";
+export var APP_NAME = {
+  neetoKB: "KB",
+  neetoCourse: "Course"
+};
+export var AUTH_KINDS = [{
+  label: t("neetoMolecules.security.labels.notSecured"),
+  value: NOT_SECURED
+}, {
+  label: t("neetoMolecules.security.labels.passwordEnabled"),
+  value: PASSWORD_ENABLED
+}, {
+  label: t("neetoMolecules.security.labels.otpEnabled"),
+  value: OTP_ENABLED
+}, {
+  label: t("neetoMolecules.security.labels.private"),
+  value: SESSION_AUTH
+}];
+export var SECURITY_SETTINGS_VALIDATION_SCHEMA = yup.object({
+  password: yup.string().when("authKind", {
+    is: PASSWORD_ENABLED,
+    then: yup.string().required(t("neetoMolecules.security.validation.required", {
+      what: t("neetoMolecules.security.labels.password")
+    })).min(4, t("neetoMolecules.security.validation.min", {
+      entity: t("neetoMolecules.security.labels.password"),
+      min: 4
+    }))
+  }),
+  allowedKeywords: yup.array().when("authKind", {
+    is: OTP_ENABLED,
+    then: yup.array().of(yup.string().trim().required(t("neetoMolecules.security.validation.required", {
+      what: t("neetoMolecules.security.labels.keyword")
+    }))).unique(t("neetoMolecules.security.placeholders.exists", {
+      what: t("neetoMolecules.security.labels.keyword")
+    }))
+  })
+});

package/dist/Security/index.js

@@ -0,0 +1,68 @@
+import React from "react";
+import { toLabelAndValue } from "@bigbinary/neeto-commons-frontend/pure";
+import { Form, ActionBlock } from "@bigbinary/neetoui/formik";
+import Container from "../Container";
+import Header from "../Header";
+import PageLoader from "../PageLoader";
+import Scrollable from "../Scrollable";
+import AllowedKeywords from "./AllowedKeywords";
+import { SECURITY_SETTINGS_VALIDATION_SCHEMA } from "./constants";
+import Password from "./PasswordBlock";
+import RadioBlock from "./RadioBlock";
+import { useFetchSettings, useUpdateSetting } from "./useSecurityApi";
+import { buildSecuritySettings } from "./utils";
+var Security = function Security(_ref) {
+  var url = _ref.url,
+    breadcrumbs = _ref.breadcrumbs,
+    title = _ref.title,
+    radioItems = _ref.radioItems;
+  var _useFetchSettings = useFetchSettings(url),
+    _useFetchSettings$dat = _useFetchSettings.data,
+    settings = _useFetchSettings$dat === void 0 ? {} : _useFetchSettings$dat,
+    isLoading = _useFetchSettings.isLoading;
+  var _useUpdateSetting = useUpdateSetting(url),
+    updateSettings = _useUpdateSetting.mutate;
+  var handleSubmit = function handleSubmit(values, _ref2) {
+    var setSubmitting = _ref2.setSubmitting;
+    updateSettings(values, {
+      onSettled: function onSettled() {
+        return setSubmitting(false);
+      }
+    });
+  };
+  if (isLoading) return /*#__PURE__*/React.createElement(PageLoader, null);
+  return /*#__PURE__*/React.createElement(Container, {
+    isHeaderFixed: true
+  }, /*#__PURE__*/React.createElement(Header, {
+    "data-cy": "general-settings-heading",
+    breadcrumbs: breadcrumbs,
+    title: title
+  }), /*#__PURE__*/React.createElement(Scrollable, {
+    className: "w-full pb-6"
+  }, /*#__PURE__*/React.createElement(Form, {
+    className: "mx-auto w-full max-w-3xl space-y-6 md:px-0 lg:px-6",
+    formikProps: {
+      initialValues: buildSecuritySettings(settings),
+      validationSchema: SECURITY_SETTINGS_VALIDATION_SCHEMA,
+      onSubmit: handleSubmit,
+      enableReinitialize: true
+    }
+  }, function (_ref3) {
+    var dirty = _ref3.dirty,
+      isSubmitting = _ref3.isSubmitting;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(RadioBlock, {
+      radioItems: radioItems
+    }), /*#__PURE__*/React.createElement(Password, null), /*#__PURE__*/React.createElement(AllowedKeywords, null), /*#__PURE__*/React.createElement(ActionBlock, {
+      cancelButtonProps: {
+        disabled: false,
+        className: "ml-3"
+      },
+      className: "mt-6 w-full justify-start",
+      submitButtonProps: {
+        loading: isSubmitting,
+        disabled: !dirty || isSubmitting
+      }
+    }));
+  })));
+};
+export default Security;

package/dist/Security/useSecurityApi.js

@@ -0,0 +1,22 @@
+import { useMutationWithInvalidation } from "@bigbinary/neeto-commons-frontend/react-utils";
+import { useQuery } from "react-query";
+import settingsApi from "./api";
+import { QUERY_KEYS, SETTINGS_STALE_TIME } from "./constants";
+var SETTINGS_LIST = QUERY_KEYS.SETTINGS_LIST,
+  GETTING_STARTED = QUERY_KEYS.GETTING_STARTED,
+  THEMES_SETTINGS = QUERY_KEYS.THEMES_SETTINGS;
+var useFetchSettings = function useFetchSettings(url) {
+  return useQuery(SETTINGS_LIST, function () {
+    return settingsApi.fetch(url);
+  }, {
+    staleTime: SETTINGS_STALE_TIME
+  });
+};
+var useUpdateSetting = function useUpdateSetting(url) {
+  return useMutationWithInvalidation(function (payload) {
+    return settingsApi.update(url, payload);
+  }, {
+    keysToInvalidate: [SETTINGS_LIST, GETTING_STARTED, THEMES_SETTINGS]
+  });
+};
+export { useFetchSettings, useUpdateSetting };

package/dist/Security/utils.js

@@ -0,0 +1,31 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import { isEmpty } from "ramda";
+import * as yup from "yup";
+export var buildSecuritySettings = function buildSecuritySettings(settings) {
+  return _objectSpread(_objectSpread({}, settings.setting), {}, {
+    addEmail: false
+  });
+};
+export var findKeywordDuplicates = function findKeywordDuplicates(list, message, createError) {
+  var duplicates = {};
+  list === null || list === void 0 ? void 0 : list.forEach(function (value, index) {
+    if (duplicates[value]) {
+      duplicates[value].push(index);
+    } else {
+      duplicates[value] = [index];
+    }
+  });
+  var errors = Object.values(duplicates).map(function (index) {
+    return index.length > 1 && new yup.ValidationError(message, list[index.at(-1)], "setting.allowedKeywords[".concat(index.at(-1), "]"));
+  });
+  if (isEmpty(errors)) {
+    return true;
+  }
+  return createError({
+    message: function message() {
+      return errors;
+    }
+  });
+};

package/dist/SendToFields/FilePicker.js

@@ -0,0 +1,34 @@
+import React, { useRef } from "react";
+var FilePicker = function FilePicker(_ref) {
+  var _ref$types = _ref.types,
+    types = _ref$types === void 0 ? [] : _ref$types,
+    onChange = _ref.onChange,
+    children = _ref.children;
+  var inputRef = useRef();
+  var accept = types.reduce(function (acc, ext) {
+    return "".concat(acc, ", ").concat(ext);
+  }, "");
+  var handleInputChange = function handleInputChange(_ref2) {
+    var target = _ref2.target;
+    if (!target.files) return;
+    onChange(target.files);
+
+    // This will trigger handleClick when same file is uploaded again.
+    inputRef.current.value = "";
+    handleClick();
+  };
+  var handleClick = function handleClick() {
+    if (!inputRef.current) return;
+    inputRef.current.click();
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    onClick: handleClick
+  }, children), /*#__PURE__*/React.createElement("input", {
+    accept: accept,
+    className: "hidden",
+    ref: inputRef,
+    type: "file",
+    onChange: handleInputChange
+  }));
+};
+export default FilePicker;

package/dist/SendToFields/constants.js

@@ -0,0 +1,6 @@
+export var SIZES = {
+  small: "small",
+  medium: "medium",
+  large: "large"
+};
+export var ALLOWED_FILE_PICKER_TYPES = [".csv"];

package/dist/SendToFields/index.js

@@ -0,0 +1,102 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React, { useRef } from "react";
+import { useFormikContext } from "formik";
+import { Upload } from "@bigbinary/neeto-icons";
+import { Button, Toastr } from "@bigbinary/neetoui";
+import { MultiEmailInput } from "@bigbinary/neetoui/formik";
+import { useTranslation } from "react-i18next";
+import { SIZES, ALLOWED_FILE_PICKER_TYPES } from "./constants";
+import FilePicker from "./FilePicker";
+import { parseCsvEmails } from "./utils";
+var SendToFields = function SendToFields(_ref) {
+  var emailInputProps = _ref.emailInputProps,
+    ccInputProps = _ref.ccInputProps,
+    bccInputProps = _ref.bccInputProps,
+    _ref$showUploadCsvBut = _ref.showUploadCsvButton,
+    showUploadCsvButton = _ref$showUploadCsvBut === void 0 ? false : _ref$showUploadCsvBut,
+    _ref$showCcBccButton = _ref.showCcBccButton,
+    showCcBccButton = _ref$showCcBccButton === void 0 ? false : _ref$showCcBccButton;
+  var sendToFieldRef = useRef();
+  var _useFormikContext = useFormikContext(),
+    _useFormikContext$val = _useFormikContext.values,
+    showCopyEmails = _useFormikContext$val.showCopyEmails,
+    existingSendToEmails = _useFormikContext$val[emailInputProps.name || "sendTo"],
+    setFieldValue = _useFormikContext.setFieldValue;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var handleCSVFile = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(files) {
+      var _sendToFieldRef$curre, onSuccess;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.prev = 0;
+            onSuccess = function onSuccess(values) {
+              return setFieldValue(emailInputProps.name || "sendTo", [].concat(_toConsumableArray(existingSendToEmails), _toConsumableArray(values)));
+            };
+            _context.next = 4;
+            return parseCsvEmails(files[0], onSuccess);
+          case 4:
+            (_sendToFieldRef$curre = sendToFieldRef.current) === null || _sendToFieldRef$curre === void 0 ? void 0 : _sendToFieldRef$curre.focus();
+            _context.next = 10;
+            break;
+          case 7:
+            _context.prev = 7;
+            _context.t0 = _context["catch"](0);
+            Toastr.error(_context.t0);
+          case 10:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[0, 7]]);
+    }));
+    return function handleCSVFile(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  var handelCcBccButtonClick = function handelCcBccButtonClick(e) {
+    e.stopPropagation();
+    setFieldValue("showCopyEmails", !showCopyEmails);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "relative w-full flex-col gap-2"
+  }, showUploadCsvButton && /*#__PURE__*/React.createElement("div", {
+    className: "absolute top-0 right-1"
+  }, /*#__PURE__*/React.createElement(FilePicker, {
+    types: ALLOWED_FILE_PICKER_TYPES,
+    onChange: handleCSVFile
+  }, /*#__PURE__*/React.createElement(Button, {
+    "data-cy": "upload-csv-button",
+    icon: Upload,
+    label: t("neetoMolecules.emailForm.uploadCSV"),
+    size: "small",
+    style: "link",
+    tooltipProps: {
+      content: t("neetoMolecules.sendToFields.uploadCsvTooltip"),
+      position: "right"
+    }
+  }))), /*#__PURE__*/React.createElement(MultiEmailInput, _extends({
+    "data-testid": "emails",
+    name: "sendTo",
+    ref: sendToFieldRef
+  }, emailInputProps, {
+    suffix: showCcBccButton && /*#__PURE__*/React.createElement(Button, {
+      "data-cy": "cc-bcc-button",
+      "data-testid": "cc-bcc-button",
+      label: t("neetoMolecules.emailForm.labels.ccBcc"),
+      size: "small",
+      style: "link",
+      onClick: handelCcBccButtonClick
+    })
+  })), showCopyEmails && /*#__PURE__*/React.createElement("div", {
+    className: "mt-5 flex w-full flex-col gap-6"
+  }, /*#__PURE__*/React.createElement(MultiEmailInput, _extends({
+    name: "sendToBcc"
+  }, ccInputProps)), /*#__PURE__*/React.createElement(MultiEmailInput, _extends({
+    name: "sendToCc"
+  }, bccInputProps))));
+};
+export default SendToFields;

package/dist/SendToFields/utils.js

@@ -0,0 +1,54 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { t } from "i18next";
+import { Toastr } from "@bigbinary/neetoui";
+import Papa from "papaparse";
+import { prop } from "ramda";
+import { string } from "yup";
+var isValidEmail = function isValidEmail(email) {
+  return string().email().isValidSync(email);
+};
+export var createEmailOptions = function createEmailOptions() {
+  var emails = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  return emails.map(function (email) {
+    return {
+      label: email,
+      value: email,
+      valid: isValidEmail(email)
+    };
+  });
+};
+export var parseCsvEmails = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(file, onSuccess) {
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          Papa.parse(file, {
+            header: true,
+            skipEmptyLines: true,
+            transformHeader: function transformHeader(h) {
+              return h.toLowerCase().replace(/\W/g, "");
+            },
+            complete: function complete(results) {
+              var _results$meta$fields;
+              var isEmailFieldPresent = (_results$meta$fields = results.meta.fields) === null || _results$meta$fields === void 0 ? void 0 : _results$meta$fields.includes("email");
+              if (isEmailFieldPresent) {
+                var emails = results.data.filter(prop("email")).map(function (item) {
+                  return item.email.trim();
+                });
+                onSuccess(createEmailOptions(emails));
+              } else {
+                Toastr.error(t("neetoMolecules.sendToFields.errors.invalidCsv"));
+              }
+            }
+          });
+        case 1:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return function parseCsvEmails(_x, _x2) {
+    return _ref.apply(this, arguments);
+  };
+}();

package/dist/Settings/Category.js

@@ -0,0 +1,30 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from "react";
+import { isNotEmpty } from "@bigbinary/neeto-commons-frontend/pure";
+import { Typography } from "@bigbinary/neetoui";
+import IntegrationCard from "../IntegrationCard";
+import Item from "./Item";
+var Category = function Category(_ref) {
+  var items = _ref.items,
+    label = _ref.label,
+    id = _ref.id,
+    isIntegration = _ref.isIntegration;
+  var SettingsCard = isIntegration ? IntegrationCard : Item;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col py-6",
+    id: id
+  }, isNotEmpty(items) && /*#__PURE__*/React.createElement(Typography, {
+    className: "mb-6",
+    component: "h2",
+    "data-cy": "settings-category-heading",
+    style: "h2",
+    weight: "semibold"
+  }, label), /*#__PURE__*/React.createElement("div", {
+    className: "grid grid-cols-1 gap-3 lg:grid-cols-2 lg:gap-6 xl:grid-cols-3 2xl:grid-cols-4"
+  }, items.map(function (item) {
+    return /*#__PURE__*/React.createElement(SettingsCard, _extends({
+      key: item.label
+    }, item));
+  })));
+};
+export default Category;