@bigbinary/neeto-molecules 1.0.114 → 1.1.0

package/dist/EmailForm.js

@@ -1,7 +1,7 @@
 import React, { useRef, useState, useContext } from 'react';
 import { useFormikContext, Field } from 'formik';
 import { isEditorEmpty, FormikEditor, EditorContent } from '@bigbinary/neeto-editor';
-import { Label, Button, Toastr, Input as Input$1, Typography } from '@bigbinary/neetoui';
+import { Toastr, Button, Input as Input$1, Typography } from '@bigbinary/neetoui';
 import { Select, Input, MultiEmailInput, ActionBlock, Form } from '@bigbinary/neetoui/formik';
 import { useTranslation, Trans } from 'react-i18next';
 import { t } from 'i18next';
@@ -10,10 +10,10 @@ import * as yup from 'yup';
 import { string } from 'yup';
 import { isNotEmpty, noop, isPresent } from '@bigbinary/neeto-commons-frontend/pure';
 import { Info, Upload } from '@bigbinary/neeto-icons';
+import { withT } from '@bigbinary/neeto-commons-frontend/react-utils';
 import require$$0 from 'stream';
 import { withEventTargetValue } from '@bigbinary/neeto-commons-frontend/utils';
 import DynamicVariables from '@bigbinary/neeto-molecules/DynamicVariables';
-import { withT } from '@bigbinary/neeto-commons-frontend/react-utils';
 
 function _typeof$1(obj) {
   "@babel/helpers - typeof";
@@ -147,7 +147,6 @@ var REPLY_TO_FIELD_VALIDATION = yup.object({
   }))
 });
 var EDITOR_ADDONS = ["highlight", "emoji", "code-block", "block-quote", "image-upload", "divider", "video-embed"];
-var ALLOWED_FILE_PICKER_TYPES = [".csv"];
 
 /* eslint-disable @bigbinary/neeto/use-zustand-for-global-state-management */
 var EmailFormContext = /*#__PURE__*/React.createContext({
@@ -203,6 +202,21 @@ var ReplyToField = function ReplyToField(_ref) {
   });
 };
 
+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 _arrayLikeToArray(arr, len) {
   if (len == null || len > arr.length) len = arr.length;
   for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
@@ -604,6 +618,8 @@ try {
   }
 }
 
+var ALLOWED_FILE_PICKER_TYPES = [".csv"];
+
 var FilePicker = function FilePicker(_ref) {
   var _ref$types = _ref.types,
     types = _ref$types === void 0 ? [] : _ref$types,
@@ -2576,10 +2592,16 @@ var parseCsvEmails = /*#__PURE__*/function () {
               return h.toLowerCase().replace(/\W/g, "");
             },
             complete: function complete(results) {
-              var emails = results.data.filter(prop("email")).map(function (item) {
-                return item.email.trim();
-              });
-              onSuccess(createEmailOptions(emails));
+              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:
@@ -2592,37 +2614,35 @@ var parseCsvEmails = /*#__PURE__*/function () {
     return _ref.apply(this, arguments);
   };
 }();
-var getValidationSchema = function getValidationSchema(_ref2) {
-  var showSendToField = _ref2.showSendToField,
-    showReplyToField = _ref2.showReplyToField,
-    customValidations = _ref2.customValidations;
-  var schema = EMAIL_FORM_VALIDATION_SCHEMA.clone();
-  if (showSendToField) schema = schema.concat(SEND_TO_FIELD_VALIDATION);
-  if (showReplyToField) schema = schema.concat(REPLY_TO_FIELD_VALIDATION);
-  return schema.shape(customValidations);
-};
 
-var SendToField = function SendToField() {
+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 _useFormikContext = useFormikContext(),
-    setFieldValue = _useFormikContext.setFieldValue,
-    values = _useFormikContext.values;
-  var sendToFieldRef = useRef();
-  var showCopyEmailFieldValue = values.showCopyEmails,
-    existingSendToEmails = values.sendTo;
   var handleCSVFile = /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee(files) {
-      var _sendToFieldRef$curre, setNotifyEmails;
+    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;
-            setNotifyEmails = function setNotifyEmails(values) {
-              return setFieldValue("sendTo", [].concat(_toConsumableArray(existingSendToEmails), _toConsumableArray(values)));
+            onSuccess = function onSuccess(values) {
+              return setFieldValue(emailInputProps.name || "sendTo", [].concat(_toConsumableArray(existingSendToEmails), _toConsumableArray(values)));
             };
             _context.next = 4;
-            return parseCsvEmails(files[0], setNotifyEmails);
+            return parseCsvEmails(files[0], onSuccess);
           case 4:
             (_sendToFieldRef$curre = sendToFieldRef.current) === null || _sendToFieldRef$curre === void 0 ? void 0 : _sendToFieldRef$curre.focus();
             _context.next = 10;
@@ -2638,14 +2658,18 @@ var SendToField = function SendToField() {
       }, _callee, null, [[0, 7]]);
     }));
     return function handleCSVFile(_x) {
-      return _ref.apply(this, arguments);
+      return _ref2.apply(this, arguments);
     };
   }();
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: "flex w-full flex-col gap-2"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "flex items-center justify-between"
-  }, /*#__PURE__*/React.createElement(Label, null, t("neetoMolecules.emailForm.labels.sendTo")), /*#__PURE__*/React.createElement(FilePicker, {
+  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, {
@@ -2653,35 +2677,57 @@ var SendToField = function SendToField() {
     icon: Upload,
     label: t("neetoMolecules.emailForm.uploadCSV"),
     size: "small",
-    style: "link"
-  }))), /*#__PURE__*/React.createElement(MultiEmailInput, {
-    id: "sendTo",
-    label: "",
+    style: "link",
+    tooltipProps: {
+      content: t("neetoMolecules.sendToFields.uploadCsvTooltip"),
+      position: "right"
+    }
+  }))), /*#__PURE__*/React.createElement(MultiEmailInput, _extends({
+    "data-testid": "emails",
     name: "sendTo",
-    ref: sendToFieldRef,
-    placeholder: t("neetoMolecules.emailForm.placeholders.commaSeparatedEmails"),
-    suffix: /*#__PURE__*/React.createElement(Button, {
+    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: function onClick() {
-        return setFieldValue("showCopyEmails", !showCopyEmailFieldValue);
-      }
+      onClick: handelCcBccButtonClick
     })
-  })), showCopyEmailFieldValue && /*#__PURE__*/React.createElement("div", {
-    className: "flex w-full flex-col gap-6"
-  }, /*#__PURE__*/React.createElement(MultiEmailInput, {
-    label: t("neetoMolecules.emailForm.labels.cc"),
-    name: "sendToCc",
-    placeholder: t("neetoMolecules.emailForm.placeholders.commaSeparatedEmails")
-  }), /*#__PURE__*/React.createElement(MultiEmailInput, {
-    label: t("neetoMolecules.emailForm.labels.bCc"),
-    name: "sendToBcc",
-    placeholder: t("neetoMolecules.emailForm.placeholders.commaSeparatedEmails")
-  })));
+  })), 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 SendToField = withT(function (_ref) {
+  var t = _ref.t;
+  return /*#__PURE__*/React.createElement(SendToFields, {
+    showCcBccButton: true,
+    showUploadCsvButton: true,
+    bccInputProps: {
+      label: t("neetoMolecules.emailForm.labels.bCc"),
+      name: "sendToBcc",
+      placeholder: t("neetoMolecules.emailForm.placeholders.commaSeparatedEmails")
+    },
+    ccInputProps: {
+      label: t("neetoMolecules.emailForm.labels.cc"),
+      name: "sendToCc",
+      placeholder: t("neetoMolecules.emailForm.placeholders.commaSeparatedEmails")
+    },
+    emailInputProps: {
+      id: "sendTo",
+      name: "sendTo",
+      label: t("neetoMolecules.emailForm.labels.sendTo"),
+      placeholder: t("neetoMolecules.emailForm.placeholders.commaSeparatedEmails")
+    }
+  });
+});
+
 function _arrayWithHoles(arr) {
   if (Array.isArray(arr)) return arr;
 }
@@ -2864,6 +2910,16 @@ var EmailForm = function EmailForm(_ref) {
   }));
 };
 
+var getValidationSchema = function getValidationSchema(_ref) {
+  var showSendToField = _ref.showSendToField,
+    showReplyToField = _ref.showReplyToField,
+    customValidations = _ref.customValidations;
+  var schema = EMAIL_FORM_VALIDATION_SCHEMA.clone();
+  if (showSendToField) schema = schema.concat(SEND_TO_FIELD_VALIDATION);
+  if (showReplyToField) schema = schema.concat(REPLY_TO_FIELD_VALIDATION);
+  return schema.shape(customValidations);
+};
+
 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 EmailFormProvider = function EmailFormProvider(_ref) {