@bigbinary/neeto-molecules 1.1.78 → 1.2.0-beta2

package/dist/ShareViaEmail.js

@@ -1,422 +1,27 @@
-import React, { useState, useRef, forwardRef } from 'react';
-import { Download, Upload, LeftArrow } from '@bigbinary/neeto-icons';
-import { Typography, Button, Callout, Pane, Toastr, DatePicker, Label } from '@bigbinary/neetoui';
-import { MultiEmailInput, Input, Switch, ActionBlock, Form as Form$1 } from '@bigbinary/neetoui/formik';
-import { Trans, useTranslation } from 'react-i18next';
+import React__default, { forwardRef, useMemo, useRef } from 'react';
+import { LeftArrow } from '@bigbinary/neeto-icons';
+import { DateTimePicker, Label, Typography, Button } from '@bigbinary/neetoui';
+import { Input, Switch, ActionBlock, Form as Form$1 } from '@bigbinary/neetoui/formik';
+import { useTranslation } from 'react-i18next';
+import EmailPreview from './EmailPreview.js';
 import classnames from 'classnames';
-import { isPresent } from '@bigbinary/neeto-cist';
-import { withT } from '@bigbinary/neeto-commons-frontend/react-utils';
-import { EditorContent, FormikEditor, isEditorEmpty } from '@bigbinary/neeto-editor';
-import { useFormikContext, useField } from 'formik';
-import { useDropzone } from 'react-dropzone';
+import { useField, useFormikContext } from 'formik';
+import SendToFields from './SendToFields.js';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import { FormikEditor, isEditorEmpty } from '@bigbinary/neeto-editor';
+import _extends from '@babel/runtime/helpers/extends';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import dayjs from 'dayjs';
 import { t } from 'i18next';
-import Papa from 'papaparse';
+import '@bigbinary/neeto-cist';
+import 'papaparse';
 import { prop } from 'ramda';
 import * as yup from 'yup';
-import { string } from 'yup';
-import dayjs from 'dayjs';
-
-var MemoizedEditorContent = /*#__PURE__*/React.memo(EditorContent);
-var EmailPreview = withT(function (_ref) {
-  var t = _ref.t,
-    _ref$to = _ref.to,
-    to = _ref$to === void 0 ? [] : _ref$to,
-    subject = _ref.subject,
-    body = _ref.body,
-    productName = _ref.productName,
-    actionButtonText = _ref.actionButtonText,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? "" : _ref$className;
-  return /*#__PURE__*/React.createElement("div", {
-    "data-cy": "email-preview-card",
-    "data-testid": "email-preview",
-    className: classnames("neeto-ui-border-gray-300 neeto-ui-shadow-m neeto-ui-bg-white flex flex-1 flex-col border", className)
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "neeto-ui-border-gray-300 space-y-6 divide-y divide-gray-200 border-b p-6"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "flex gap-2",
-    "data-cy": "email-send-to-preview",
-    "data-testid": "email-to-block"
-  }, /*#__PURE__*/React.createElement(Typography, {
-    className: "neeto-ui-text-gray-500",
-    lineHeight: "normal",
-    style: "body2"
-  }, t("neetoMolecules.emailPreview.to"), ":"), isPresent(to) ? /*#__PURE__*/React.createElement(Typography, {
-    className: "neeto-ui-text-gray-800 min-w-0 flex-grow break-words",
-    lineHeight: "normal",
-    style: "body2"
-  }, to.join(", ")) : /*#__PURE__*/React.createElement("div", {
-    className: "neeto-ui-bg-gray-300 neeto-ui-rounded-full mt-2 h-2 w-40"
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "flex items-center gap-2 pt-6"
-  }, /*#__PURE__*/React.createElement(Typography, {
-    className: "neeto-ui-text-gray-500",
-    lineHeight: "normal",
-    style: "body2"
-  }, t("neetoMolecules.emailPreview.subject"), ":"), /*#__PURE__*/React.createElement(Typography, {
-    className: "neeto-ui-text-gray-800 min-w-0 flex-grow break-words",
-    "data-cy": "email-subject-preview",
-    lineHeight: "normal",
-    style: "body2"
-  }, subject || /*#__PURE__*/React.createElement("span", {
-    className: "neeto-ui-bg-gray-300 neeto-ui-rounded-full h-2 w-40"
-  })))), /*#__PURE__*/React.createElement("div", {
-    className: "neeto-ui-text-gray-800 my-10 flex flex-1 flex-col justify-between space-y-6 p-6 pr-10 text-base leading-relaxed",
-    "data-cy": "email-body-preview-container"
-  }, body ? /*#__PURE__*/React.createElement(MemoizedEditorContent, {
-    content: body
-  }) : /*#__PURE__*/React.createElement("div", {
-    className: "space-y-4"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "neeto-ui-bg-gray-300 neeto-ui-rounded-full h-2 w-80"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "neeto-ui-bg-gray-300 neeto-ui-rounded-full h-2 w-72"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "neeto-ui-bg-gray-300 neeto-ui-rounded-full h-2 w-80"
-  })), actionButtonText && /*#__PURE__*/React.createElement("div", {
-    className: "mt-6 flex w-full items-center justify-center"
-  }, /*#__PURE__*/React.createElement(Button, {
-    className: "pointer-events-none",
-    label: actionButtonText
-  }))), productName && /*#__PURE__*/React.createElement("div", {
-    className: "neeto-ui-bg-gray-100 mt-auto p-2",
-    "data-testid": "product-name-block"
-  }, /*#__PURE__*/React.createElement(Typography, {
-    className: "neeto-ui-text-gray-600 text-center leading-6",
-    style: "body3"
-  }, t("neetoMolecules.emailPreview.poweredBy"), /*#__PURE__*/React.createElement("span", {
-    className: "neeto-ui-text-gray-800 font-medium"
-  }, productName))));
-});
-
-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];
-  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);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-
-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();
-}
-
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-
-function _iterableToArrayLimit(r, l) {
-  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
-  if (null != t) {
-    var e,
-      n,
-      i,
-      u,
-      a = [],
-      f = !0,
-      o = !1;
-    try {
-      if (i = (t = t.call(r)).next, 0 === l) {
-        if (Object(t) !== t) return;
-        f = !1;
-      } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
-    } catch (r) {
-      o = !0, n = r;
-    } finally {
-      try {
-        if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return;
-      } finally {
-        if (o) throw n;
-      }
-    }
-    return a;
-  }
-}
-
-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();
-}
-
-var ALLOWED_FILE_TYPES = [".csv"];
-var ONE_MEGABYTE_IN_BYTES = 1024 * 1024;
-var DOWNLOAD_SAMPLE_EMAIL_CSV_FILE = "https://d2v7kzglnr2dnh.cloudfront.net/others/sample-bulk-email.csv";
-
-var Requirements = withT(function (_ref) {
-  var t = _ref.t,
-    fileSize = _ref.fileSize;
-  return /*#__PURE__*/React.createElement(Callout, {
-    className: "flex flex-col items-center py-6",
-    style: "info"
-  }, /*#__PURE__*/React.createElement("ul", {
-    className: "list-outside list-disc space-y-1 font-normal leading-normal"
-  }, fileSize && /*#__PURE__*/React.createElement("li", null, t("neetoMolecules.shareViaLink.requirements.fileTypeAndSize", {
-    limit: fileSize
-  })), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(Trans, {
-    components: {
-      strong: /*#__PURE__*/React.createElement("strong", {
-        className: "font-semibold"
-      })
-    },
-    i18nKey: "neetoMolecules.shareViaLink.requirements.shouldContainColumns"
-  }))), /*#__PURE__*/React.createElement(Button, {
-    href: DOWNLOAD_SAMPLE_EMAIL_CSV_FILE,
-    icon: Download,
-    iconPosition: "left",
-    label: t("neetoMolecules.shareViaLink.bulkUploadPane.downloadSampleCSV"),
-    style: "link"
-  }));
-});
-var Requirements$1 = /*#__PURE__*/React.memo(Requirements);
-
-var BulkUploadPane = function BulkUploadPane(_ref) {
-  var _fileRejections$;
-  var isOpen = _ref.isOpen,
-    fileType = _ref.fileType,
-    fileSize = _ref.fileSize,
-    onClose = _ref.onClose,
-    handleFileSubmit = _ref.handleFileSubmit;
-  var _useDropzone = useDropzone({
-      accept: fileType,
-      maxFiles: 1,
-      maxSize: fileSize * ONE_MEGABYTE_IN_BYTES,
-      onDrop: function onDrop(files) {
-        return files[0] && handleFileSubmit(files[0]);
-      }
-    }),
-    getRootProps = _useDropzone.getRootProps,
-    getInputProps = _useDropzone.getInputProps,
-    isDragActive = _useDropzone.isDragActive,
-    fileRejections = _useDropzone.fileRejections;
-  var errors = (_fileRejections$ = fileRejections[0]) === null || _fileRejections$ === void 0 ? void 0 : _fileRejections$.errors.map(function (_ref2) {
-    var message = _ref2.message,
-      code = _ref2.code;
-    return /*#__PURE__*/React.createElement(Typography, {
-      className: "neeto-ui-text-error-500 items",
-      "data-cy": "file-input-error-message",
-      key: code,
-      style: "body3"
-    }, message);
-  });
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  return /*#__PURE__*/React.createElement(Pane, {
-    "data-testid": "bulk-upload-pane",
-    isOpen: isOpen,
-    onClose: onClose
-  }, /*#__PURE__*/React.createElement("div", {
-    tabIndex: 0
-  }, /*#__PURE__*/React.createElement(Pane.Header, null, /*#__PURE__*/React.createElement(Typography, {
-    "data-testid": "bulk-upload-header",
-    style: "h2",
-    weight: "semibold"
-  }, t("neetoMolecules.shareViaLink.bulkUpload"))), /*#__PURE__*/React.createElement(Pane.Body, null, /*#__PURE__*/React.createElement("div", {
-    className: "w-full space-y-4"
-  }, /*#__PURE__*/React.createElement(Requirements$1, {
-    fileSize: fileSize
-  }), /*#__PURE__*/React.createElement("div", getRootProps({
-    className: classnames("flex flex-col p-2 border neeto-ui-border-primary-500 border-dashed neeto-ui-rounded-md transition duration-500 ease-in-out hover:neeto-ui-bg-gray-100 cursor-pointer items-center", {
-      "neeto-ui-border-gray-100": isDragActive,
-      "neeto-ui-border-error neeto-ui-bg-pastel-red hover:neeto-ui-bg-pastel-red": fileRejections.length
-    })
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "flex flex-col items-center space-y-3 p-4"
-  }, /*#__PURE__*/React.createElement(Upload, {
-    className: "neeto-ui-text-primary-500",
-    size: 32
-  }), /*#__PURE__*/React.createElement("input", _extends({}, getInputProps(), {
-    "data-cy": "csv-upload-input",
-    "data-testid": "csv-upload-input"
-  })), isDragActive ? /*#__PURE__*/React.createElement(Typography, {
-    style: "body2"
-  }, t("neetoMolecules.shareViaLink.bulkUploadPane.dropFileHere")) : /*#__PURE__*/React.createElement("div", {
-    className: "flex flex-col items-center space-y-1"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "flex w-full items-center justify-center gap-x-1"
-  }, /*#__PURE__*/React.createElement(Trans, {
-    i18nKey: "neetoMolecules.shareViaLink.bulkUploadPane.dragNDrop",
-    components: {
-      Button: /*#__PURE__*/React.createElement(Button, {
-        style: "link"
-      })
-    }
-  })), /*#__PURE__*/React.createElement(Typography, {
-    className: "neeto-ui-text-gray-700",
-    style: "body3"
-  }, fileType && /*#__PURE__*/React.createElement(Trans, {
-    i18nKey: "neetoMolecules.shareViaLink.bulkUploadPane.supportedFormat",
-    values: {
-      fileType: fileType
-    },
-    components: {
-      code: /*#__PURE__*/React.createElement("code", {
-        className: "neeto-ui-typography neeto-ui-text-body3 neeto-ui-bg-white m-0 border-l-0 p-0"
-      })
-    }
-  }), " ", fileSize && t("neetoMolecules.shareViaLink.bulkUploadPane.supportedSize", {
-    fileSize: fileSize
-  })))), errors))), /*#__PURE__*/React.createElement(Pane.Footer, {
-    className: "flex items-center space-x-2"
-  }, /*#__PURE__*/React.createElement(Button, {
-    "data-cy": "bulk-upload-cancel-button",
-    "data-testid": "bulk-upload-cancel-button",
-    label: t("neetoMolecules.common.actions.cancel"),
-    style: "text",
-    type: "reset",
-    onClick: onClose
-  }))));
-};
-
-var isValidEmail = function isValidEmail(email) {
-  return string().email().isValidSync(email);
-};
-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)
-    };
-  });
-};
-var parseCsvEmails = function parseCsvEmails(file, onSuccess) {
-  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"));
-      }
-    }
-  });
-};
-
-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 _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isBulkUploadPaneOpen = _useState2[0],
-    setIsBulkUploadPaneOpen = _useState2[1];
-  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 = function handleCSVFile(file) {
-    try {
-      var _sendToFieldRef$curre;
-      var onSuccess = function onSuccess(values) {
-        return setFieldValue(emailInputProps.name || "sendTo", [].concat(_toConsumableArray(existingSendToEmails), _toConsumableArray(values)));
-      };
-      parseCsvEmails(file, onSuccess);
-      setIsBulkUploadPaneOpen(false);
-      (_sendToFieldRef$curre = sendToFieldRef.current) === null || _sendToFieldRef$curre === void 0 ? void 0 : _sendToFieldRef$curre.focus();
-    } catch (error) {
-      Toastr.error(error);
-    }
-  };
-  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(Button, {
-    className: "absolute top-0 right-1",
-    "data-testid": "bulk-upload-button",
-    icon: Upload,
-    label: t("neetoMolecules.shareViaLink.bulkUpload"),
-    size: "small",
-    style: "link",
-    onClick: function onClick() {
-      return setIsBulkUploadPaneOpen(true);
-    }
-  }), /*#__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))), /*#__PURE__*/React.createElement(BulkUploadPane, {
-    fileSize: globalProps.endUserUploadedFileSizeLimitInMb,
-    fileType: ALLOWED_FILE_TYPES,
-    handleFileSubmit: handleCSVFile,
-    isOpen: isBulkUploadPaneOpen,
-    onClose: function onClose() {
-      return setIsBulkUploadPaneOpen(false);
-    }
-  }));
-};
+import '@bigbinary/neeto-commons-frontend/react-utils/withT';
+import './index-e5588516.js';
+import 'react-dropzone';
 
 var INITIAL_VALUES = {
   sendFromEmail: "",
@@ -436,7 +41,7 @@ var EmailBody = function EmailBody(_ref, ref) {
     showVideoEmbedInEditor = _ref.showVideoEmbedInEditor;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  return /*#__PURE__*/React.createElement(FormikEditor, {
+  return /*#__PURE__*/React__default.createElement(FormikEditor, {
     required: true,
     className: "mb-6",
     "data-cy": "email-body",
@@ -449,94 +54,6 @@ var EmailBody = function EmailBody(_ref, ref) {
 };
 var EmailBody$1 = /*#__PURE__*/forwardRef(EmailBody);
 
-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 _typeof(o) {
-  "@babel/helpers - typeof";
-
-  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
-    return typeof o;
-  } : function (o) {
-    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
-  }, _typeof(o);
-}
-
-function _toPrimitive(input, hint) {
-  if (_typeof(input) !== "object" || input === null) return input;
-  var prim = input[Symbol.toPrimitive];
-  if (prim !== undefined) {
-    var res = prim.call(input, hint || "default");
-    if (_typeof(res) !== "object") return res;
-    throw new TypeError("@@toPrimitive must return a primitive value.");
-  }
-  return (hint === "string" ? String : Number)(input);
-}
-
-function _toPropertyKey(arg) {
-  var key = _toPrimitive(arg, "string");
-  return _typeof(key) === "symbol" ? key : String(key);
-}
-
-function _defineProperty(obj, key, value) {
-  key = _toPropertyKey(key);
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
-}
-
 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 isPastDate = function isPastDate(date) {
@@ -565,6 +82,65 @@ var emailFormValidationSchema = function emailFormValidationSchema(disableReplyT
     actionButtonText: yup.string().required(t("neetoMolecules.shareViaEmail.validations.requiredField.startButtonText"))
   });
 };
+var disabledTime = function disabledTime(selectedDate) {
+  var current = selectedDate ? dayjs(selectedDate).startOf("day") : null;
+  if (!current) return {};
+  var today = dayjs().startOf("day");
+  var isAfterToday = current.isAfter(today, "day");
+  var isBeforeToday = current.isBefore(today, "day");
+  if (isAfterToday) {
+    return {
+      minTime: null,
+      maxTime: null
+    };
+  } else if (isBeforeToday) {
+    return {
+      minTime: "0:00",
+      maxTime: "24:00"
+    };
+  }
+
+  // eslint-disable-next-line @bigbinary/neeto/use-standard-date-time-formats
+  var currentTime = dayjs().format("HH:mm");
+  var endOfDay = "23:59";
+  return {
+    minTime: currentTime,
+    maxTime: endOfDay
+  };
+};
+
+var _excluded = ["name", "disabledDate"];
+var FormikDatePicker = function FormikDatePicker(_ref) {
+  var name = _ref.name,
+    disabledDate = _ref.disabledDate,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useField = useField(name),
+    _useField2 = _slicedToArray(_useField, 3),
+    field = _useField2[0],
+    meta = _useField2[1],
+    _useField2$ = _useField2[2],
+    setValue = _useField2$.setValue,
+    setTouched = _useField2$.setTouched;
+  var disabledTimeFrame = useMemo(function () {
+    return disabledTime(field === null || field === void 0 ? void 0 : field.value);
+  }, [field === null || field === void 0 ? void 0 : field.value]);
+  return /*#__PURE__*/React__default.createElement(DateTimePicker, _extends({}, field, meta, {
+    timePickerProps: disabledTimeFrame,
+    datePickerProps: {
+      disabledDate: disabledDate,
+      "data-cy": props["data-cy"],
+      "data-testid": props["data-testid"]
+    },
+    onBlur: function onBlur(date) {
+      setValue(date || undefined);
+      setTouched(true);
+    },
+    onChange: function onChange(date) {
+      setValue(date || undefined);
+      setTouched(true);
+    }
+  }, props));
+};
 
 var Form = function Form(_ref) {
   var showSendFromField = _ref.showSendFromField,
@@ -580,75 +156,74 @@ var Form = function Form(_ref) {
   var handleReset = function handleReset() {
     return editorRef.current.editor.commands.setContent(initialValues.emailBody);
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
     className: "space-y-4"
-  }, /*#__PURE__*/React.createElement(SendToFields, {
+  }, /*#__PURE__*/React__default.createElement(SendToFields, {
     showUploadCsvButton: true,
     emailInputProps: {
       label: t("neetoMolecules.shareViaEmail.sendTo"),
       name: "notifyEmails",
       required: true
     }
-  }), /*#__PURE__*/React.createElement(Input, {
+  }), /*#__PURE__*/React__default.createElement(Input, {
     required: true,
     className: "col-span-1",
     label: t("neetoMolecules.shareViaEmail.subject"),
     name: "emailSubject"
-  }), /*#__PURE__*/React.createElement(EmailBody$1, {
+  }), /*#__PURE__*/React__default.createElement(EmailBody$1, {
+    showVideoEmbedInEditor: showVideoEmbedInEditor,
     id: "emailBody",
-    ref: editorRef,
-    showVideoEmbedInEditor: showVideoEmbedInEditor
-  }), /*#__PURE__*/React.createElement("div", {
     ref: editorRef
-  }), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Label, {
+  }), /*#__PURE__*/React__default.createElement("div", {
+    ref: editorRef
+  }), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Label, {
     className: "flex items-center gap-2"
-  }, /*#__PURE__*/React.createElement(Switch, {
+  }, /*#__PURE__*/React__default.createElement(Switch, {
     "data-cy": "send-later-switch",
     "data-testid": "send-later-switch",
     name: "isSendLaterEnabled"
-  }), /*#__PURE__*/React.createElement(Typography, {
+  }), /*#__PURE__*/React__default.createElement(Typography, {
     component: "span",
     "data-cy": "send-later-label",
     lineHeight: "normal",
     style: "h4",
     weight: "semibold"
-  }, t("neetoMolecules.shareViaEmail.sendLater")))), values.isSendLaterEnabled && /*#__PURE__*/React.createElement(FormikDatePicker, {
+  }, t("neetoMolecules.shareViaEmail.sendLater")))), values.isSendLaterEnabled && /*#__PURE__*/React__default.createElement(FormikDatePicker, {
     autoFocus: true,
-    showTime: true,
     "data-cy": "email-share-date-input",
     "data-testid": "formik-date-picker",
     disabledDate: isPastDate,
     name: "sendEmailDatetime",
-    picker: "date",
-    size: "large",
-    type: "date"
-  }), /*#__PURE__*/React.createElement(Input, {
+    size: "large"
+  }), /*#__PURE__*/React__default.createElement(Input, {
     required: true,
     label: t("neetoMolecules.shareViaEmail.startButtonText"),
     name: "actionButtonText"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: classnames({
-      "grid grid-cols-2 gap-6": !disableReplyTo
-    })
-  }, showSendFromField && /*#__PURE__*/React.createElement(Input, {
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "flex flex-col gap-4 sm:flex-row sm:gap-6"
+  }, showSendFromField && /*#__PURE__*/React__default.createElement(Input, {
     required: true,
-    className: "col-auto",
+    className: classnames({
+      "w-full flex-grow-0": !disableReplyTo
+    }),
     "data-testid": "neeto-molecules-share-via-email-send-from",
     label: t("neetoMolecules.shareViaEmail.sendFrom"),
     name: "sendFromEmail"
-  }), !disableReplyTo && /*#__PURE__*/React.createElement(Input, {
+  }), !disableReplyTo && /*#__PURE__*/React__default.createElement(Input, {
     required: true,
-    className: "col-auto",
     "data-testid": "replyTo-field",
     label: t("neetoMolecules.shareViaEmail.replyTo"),
-    name: "replyToEmail"
-  }))), children && /*#__PURE__*/React.createElement("div", {
+    name: "replyToEmail",
+    className: classnames({
+      "w-full flex-grow-0": showSendFromField
+    })
+  }))), children && /*#__PURE__*/React__default.createElement("div", {
     className: "neeto-ui-border-gray-300 mt-4 border-t py-4"
-  }, /*#__PURE__*/React.createElement("h3", {
+  }, /*#__PURE__*/React__default.createElement("h3", {
     className: "mb-4"
-  }, t("neetoMolecules.shareViaEmail.additionalOptions")), children), /*#__PURE__*/React.createElement("div", {
+  }, t("neetoMolecules.shareViaEmail.additionalOptions")), children), /*#__PURE__*/React__default.createElement("div", {
     className: "mt-6"
-  }, /*#__PURE__*/React.createElement(ActionBlock, {
+  }, /*#__PURE__*/React__default.createElement(ActionBlock, {
     cancelButtonProps: {
       label: t("neetoMolecules.shareViaEmail.reset"),
       type: "reset",
@@ -681,11 +256,11 @@ var ShareViaEmail = function ShareViaEmail(_ref) {
       return email === null || email === void 0 ? void 0 : email.value;
     });
   };
-  return /*#__PURE__*/React.createElement("div", {
-    className: "neeto-ui-bg-gray-100 flex w-full flex-1 flex-col p-8"
-  }, /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "neeto-ui-bg-gray-100 flex w-full flex-1 flex-col p-6 md:p-8"
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: "mx-auto flex w-full max-w-7xl flex-col"
-  }, /*#__PURE__*/React.createElement(Form$1, {
+  }, /*#__PURE__*/React__default.createElement(Form$1, {
     scrollToErrorField: true,
     formProps: {
       noValidate: true
@@ -699,11 +274,11 @@ var ShareViaEmail = function ShareViaEmail(_ref) {
     }
   }, function (_ref2) {
     var values = _ref2.values;
-    return /*#__PURE__*/React.createElement("div", {
-      className: "grid grid-cols-12 gap-8"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "col-span-5"
-    }, backToUrl && /*#__PURE__*/React.createElement(Button, {
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "grid grid-cols-1 gap-8 md:grid-cols-12"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "col-span-1 md:col-span-6 lg:col-span-5"
+    }, backToUrl && /*#__PURE__*/React__default.createElement(Button, {
       className: "mb-4",
       "data-testid": "back-to-url-button",
       icon: LeftArrow,
@@ -712,30 +287,30 @@ var ShareViaEmail = function ShareViaEmail(_ref) {
       size: "small",
       style: "link",
       to: backToUrl
-    }), /*#__PURE__*/React.createElement("div", {
+    }), /*#__PURE__*/React__default.createElement("div", {
       className: "mb-6"
-    }, /*#__PURE__*/React.createElement(Typography, {
+    }, /*#__PURE__*/React__default.createElement(Typography, {
       className: "mb-0.5 break-words",
       "data-cy": "share-via-email-heading",
       lineHeight: "normal",
       style: "h2",
       weight: "semibold"
-    }, shareViaEmailTitle), description && /*#__PURE__*/React.createElement(Typography, {
+    }, shareViaEmailTitle), description && /*#__PURE__*/React__default.createElement(Typography, {
       className: "neeto-ui-text-gray-700",
       "data-cy": "share-via-email-sub-heading",
       lineHeight: "normal",
       style: "body2"
-    }, description)), /*#__PURE__*/React.createElement(Form, {
+    }, description)), /*#__PURE__*/React__default.createElement(Form, {
       disableReplyTo: disableReplyTo,
       showSendFromField: showSendFromField,
       showVideoEmbedInEditor: showVideoEmbedInEditor
-    }, children)), /*#__PURE__*/React.createElement("div", {
-      className: "col-span-7"
-    }, /*#__PURE__*/React.createElement(EmailPreview, {
+    }, children)), /*#__PURE__*/React__default.createElement("div", {
+      className: "col-span-1 md:col-span-6 lg:col-span-7"
+    }, /*#__PURE__*/React__default.createElement(EmailPreview, {
+      productName: productName,
       actionButtonText: values.actionButtonText,
       body: values.emailBody,
-      className: "sticky mt-28 pt-1",
-      productName: productName,
+      className: "sticky pt-1 md:mt-28",
       subject: values.emailSubject,
       to: sendToEmails(values.notifyEmails)
     })));