@bigbinary/neeto-molecules 1.0.113 → 1.0.115

package/dist/ShareViaEmail.js

@@ -1,18 +1,18 @@
-import React, { forwardRef, useRef, useCallback } from 'react';
+import React, { useRef, forwardRef } from 'react';
 import { Upload, LeftArrow } from '@bigbinary/neeto-icons';
-import { Typography, Button, DatePicker, Label } from '@bigbinary/neetoui';
+import { Typography, Button, Toastr, DatePicker, Label } from '@bigbinary/neetoui';
 import { MultiEmailInput, Input, Switch, ActionBlock, Form as Form$1 } from '@bigbinary/neetoui/formik';
 import { useTranslation } from 'react-i18next';
-import { isPresent, isNotEmpty, isNot } from '@bigbinary/neeto-commons-frontend/pure';
+import { isPresent, isNotEmpty } from '@bigbinary/neeto-commons-frontend/pure';
 import { withT } from '@bigbinary/neeto-commons-frontend/react-utils';
 import { EditorContent, FormikEditor, isEditorEmpty } from '@bigbinary/neeto-editor';
-import { useField, useFormikContext } from 'formik';
-import dayjs from 'dayjs';
+import { useFormikContext, useField } from 'formik';
 import { t } from 'i18next';
 import require$$0 from 'stream';
 import { prop } from 'ramda';
 import * as yup from 'yup';
 import { string } from 'yup';
+import dayjs from 'dayjs';
 
 function _typeof$1(obj) {
   "@babel/helpers - typeof";
@@ -1421,36 +1421,19 @@ EmailPreview.propTypes = {
   logo: propTypes.exports.string
 };
 
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-
-function _iterableToArrayLimit(arr, i) {
-  var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
-  if (null != _i) {
-    var _s,
-      _e,
-      _x,
-      _r,
-      _arr = [],
-      _n = !0,
-      _d = !1;
-    try {
-      if (_x = (_i = _i.call(arr)).next, 0 === i) {
-        if (Object(_i) !== _i) return;
-        _n = !1;
-      } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0);
-    } catch (err) {
-      _d = !0, _e = err;
-    } finally {
-      try {
-        if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return;
-      } finally {
-        if (_d) throw _e;
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
       }
     }
-    return _arr;
-  }
+    return target;
+  };
+  return _extends.apply(this, arguments);
 }
 
 function _arrayLikeToArray(arr, len) {
@@ -1459,6 +1442,14 @@ function _arrayLikeToArray(arr, len) {
   return arr2;
 }
 
+function _arrayWithoutHoles(arr) {
+  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
+}
+
+function _iterableToArray(iter) {
+  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+
 function _unsupportedIterableToArray(o, minLen) {
   if (!o) return;
   if (typeof o === "string") return _arrayLikeToArray(o, minLen);
@@ -1468,12 +1459,12 @@ function _unsupportedIterableToArray(o, minLen) {
   if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
 }
 
-function _nonIterableRest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 
-function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+function _toConsumableArray(arr) {
+  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
 }
 
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
@@ -1846,62 +1837,17 @@ try {
   }
 }
 
-var INITIAL_VALUES = {
-  sendFromEmail: "",
-  replyToEmail: "",
-  notifyEmails: [],
-  emailSubject: "",
-  emailBody: "",
-  isSendLaterEnabled: false,
-  sendEmailDatetime: undefined,
-  category: "email_share",
-  actionButtonText: ""
-};
-var EDITOR_ADDONS = ["emoji", "block-quote", "image-upload", "divider"];
 var ALLOWED_FILE_PICKER_TYPES = [".csv"];
 
-function _arrayWithoutHoles(arr) {
-  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
-}
-
-function _iterableToArray(iter) {
-  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
-}
-
-function _nonIterableSpread() {
-  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-function _toConsumableArray(arr) {
-  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
-}
-
-var EmailBody = function EmailBody(_ref, ref) {
-  var id = _ref.id,
-    showVideoEmbedInEditor = _ref.showVideoEmbedInEditor;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  return /*#__PURE__*/React.createElement(FormikEditor, {
-    required: true,
-    className: "mb-6",
-    "data-cy": "email-body",
-    id: id,
-    label: t("neetoMolecules.shareViaEmail.emailBody"),
-    name: "emailBody",
-    ref: ref,
-    addons: showVideoEmbedInEditor ? [].concat(_toConsumableArray(EDITOR_ADDONS), ["video-embed"]) : EDITOR_ADDONS
-  });
-};
-var EmailBody$1 = /*#__PURE__*/forwardRef(EmailBody);
-
 var FilePicker = function FilePicker(_ref) {
   var _ref$types = _ref.types,
     types = _ref$types === void 0 ? [] : _ref$types,
-    onChange = _ref.onChange;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
+    onChange = _ref.onChange,
+    children = _ref.children;
   var inputRef = useRef();
-  var accept = types.join(", ");
+  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;
@@ -1915,16 +1861,9 @@ var FilePicker = function FilePicker(_ref) {
     if (!inputRef.current) return;
     inputRef.current.click();
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
-    icon: Upload,
-    label: t("neetoMolecules.shareViaEmail.uploadCsv"),
-    size: "small",
-    style: "link",
-    tooltipProps: {
-      content: t("neetoMolecules.shareViaEmail.uploadCsvTooltip")
-    },
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     onClick: handleClick
-  }), /*#__PURE__*/React.createElement("input", {
+  }, children), /*#__PURE__*/React.createElement("input", {
     accept: accept,
     className: "hidden",
     ref: inputRef,
@@ -1932,69 +1871,6 @@ var FilePicker = function FilePicker(_ref) {
     onChange: handleInputChange
   }));
 };
-var FilePicker$1 = /*#__PURE__*/React.memo(FilePicker);
-
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-  return target;
-}
-
-function _objectWithoutProperties(source, excluded) {
-  if (source == null) return {};
-  var target = _objectWithoutPropertiesLoose(source, excluded);
-  var key, i;
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-      target[key] = source[key];
-    }
-  }
-  return target;
-}
-
-var _excluded = ["name"];
-var FormikDatePicker = function FormikDatePicker(_ref) {
-  var name = _ref.name,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var _useField = useField(name),
-    _useField2 = _slicedToArray(_useField, 3),
-    field = _useField2[0],
-    meta = _useField2[1],
-    setValue = _useField2[2].setValue;
-  return /*#__PURE__*/React.createElement(DatePicker, _extends({}, field, meta, {
-    onChange: function onChange(date) {
-      return setValue(date || undefined);
-    }
-  }, props, {
-    "data-cy": "email-share-date-input"
-  }));
-};
 
 var papaparse = {exports: {}};
 
@@ -3910,14 +3786,9 @@ License: MIT
 
 var Papa = papaparse.exports;
 
-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; }
 var isValidEmail = function isValidEmail(email) {
   return string().email().isValidSync(email);
 };
-var isPastDate = function isPastDate(date) {
-  return dayjs(date).isBefore(dayjs().subtract(1, "days"));
-};
 var createEmailOptions = function createEmailOptions() {
   var emails = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   return emails.map(function (email) {
@@ -3928,27 +3799,253 @@ var createEmailOptions = function createEmailOptions() {
     };
   });
 };
-var parseCsvEmails = function parseCsvEmails(file) {
-  return new Promise(function (resolve) {
-    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) return resolve([]);
-        var emails = results.data.map(function (item) {
-          var _item$email;
-          return (_item$email = item.email) === null || _item$email === void 0 ? void 0 : _item$email.trim();
-        }).filter(isNot(undefined));
-        return resolve(createEmailOptions(emails));
+var parseCsvEmails = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee(file, onSuccess) {
+    return regenerator.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);
+  };
+}();
+
+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__*/regenerator.mark(function _callee(files) {
+      var _sendToFieldRef$curre, onSuccess;
+      return regenerator.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))));
+};
+
+var INITIAL_VALUES = {
+  sendFromEmail: "",
+  replyToEmail: "",
+  notifyEmails: [],
+  emailSubject: "",
+  emailBody: "",
+  isSendLaterEnabled: false,
+  sendEmailDatetime: undefined,
+  category: "email_share",
+  actionButtonText: ""
+};
+var EDITOR_ADDONS = ["emoji", "block-quote", "image-upload", "divider"];
+
+var EmailBody = function EmailBody(_ref, ref) {
+  var id = _ref.id,
+    showVideoEmbedInEditor = _ref.showVideoEmbedInEditor;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/React.createElement(FormikEditor, {
+    required: true,
+    className: "mb-6",
+    "data-cy": "email-body",
+    id: id,
+    label: t("neetoMolecules.shareViaEmail.emailBody"),
+    name: "emailBody",
+    ref: ref,
+    addons: showVideoEmbedInEditor ? [].concat(_toConsumableArray(EDITOR_ADDONS), ["video-embed"]) : EDITOR_ADDONS
   });
 };
+var EmailBody$1 = /*#__PURE__*/forwardRef(EmailBody);
+
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
+
+function _iterableToArrayLimit(arr, i) {
+  var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
+  if (null != _i) {
+    var _s,
+      _e,
+      _x,
+      _r,
+      _arr = [],
+      _n = !0,
+      _d = !1;
+    try {
+      if (_x = (_i = _i.call(arr)).next, 0 === i) {
+        if (Object(_i) !== _i) return;
+        _n = !1;
+      } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0);
+    } catch (err) {
+      _d = !0, _e = err;
+    } finally {
+      try {
+        if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return;
+      } finally {
+        if (_d) throw _e;
+      }
+    }
+    return _arr;
+  }
+}
+
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+  var target = _objectWithoutPropertiesLoose(source, excluded);
+  var key, i;
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
+  }
+  return target;
+}
+
+var _excluded = ["name"];
+var FormikDatePicker = function FormikDatePicker(_ref) {
+  var name = _ref.name,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useField = useField(name),
+    _useField2 = _slicedToArray(_useField, 3),
+    field = _useField2[0],
+    meta = _useField2[1],
+    setValue = _useField2[2].setValue;
+  return /*#__PURE__*/React.createElement(DatePicker, _extends({}, field, meta, {
+    onChange: function onChange(date) {
+      return setValue(date || undefined);
+    }
+  }, props, {
+    "data-cy": "email-share-date-input"
+  }));
+};
+
+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; }
+var isPastDate = function isPastDate(date) {
+  return dayjs(date).isBefore(dayjs().subtract(1, "days"));
+};
 var generateInitialValues = function generateInitialValues(defaultValues) {
   return _objectSpread(_objectSpread({}, INITIAL_VALUES), defaultValues);
 };
@@ -3979,56 +4076,22 @@ var Form = function Form(_ref) {
     children = _ref.children;
   var _useFormikContext = useFormikContext(),
     values = _useFormikContext.values,
-    setFieldValue = _useFormikContext.setFieldValue,
     initialValues = _useFormikContext.initialValues;
   var editorRef = useRef();
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var handleReset = function handleReset() {
-    editorRef.current.editor.commands.setContent(initialValues.emailBody);
+    return editorRef.current.editor.commands.setContent(initialValues.emailBody);
   };
-  var handleCSVFile = useCallback( /*#__PURE__*/function () {
-    var _ref3 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee(_ref2) {
-      var _ref4, file, values;
-      return regenerator.wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            _ref4 = _slicedToArray(_ref2, 1), file = _ref4[0];
-            _context.next = 3;
-            return parseCsvEmails(file);
-          case 3:
-            values = _context.sent;
-            setFieldValue("notifyEmails", values);
-          case 5:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee);
-    }));
-    return function (_x) {
-      return _ref3.apply(this, arguments);
-    };
-  }(), []);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "space-y-4"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "space-y-2"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "flex items-center justify-between"
-  }, /*#__PURE__*/React.createElement(Typography, {
-    "data-cy": "send-to-input-label",
-    lineHeight: "normal",
-    style: "h4",
-    weight: "semibold"
-  }, t("neetoMolecules.shareViaEmail.sendTo")), /*#__PURE__*/React.createElement(FilePicker$1, {
-    types: ALLOWED_FILE_PICKER_TYPES,
-    onChange: handleCSVFile
-  })), /*#__PURE__*/React.createElement(MultiEmailInput, {
-    filterInvalidEmails: true,
-    required: true,
-    label: "",
-    name: "notifyEmails"
-  })), /*#__PURE__*/React.createElement(Input, {
+  }, /*#__PURE__*/React.createElement(SendToFields, {
+    showUploadCsvButton: true,
+    emailInputProps: {
+      label: t("neetoMolecules.shareViaEmail.sendTo"),
+      name: "notifyEmails"
+    }
+  }), /*#__PURE__*/React.createElement(Input, {
     required: true,
     className: "col-span-1",
     label: t("neetoMolecules.shareViaEmail.subject"),