@bigbinary/neeto-molecules 1.1.9 → 1.1.11

package/dist/CustomDomainDashboard/useCustomDomainApi.js

@@ -0,0 +1,71 @@
+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 { useMutation, useQuery, useQueryClient } from "react-query";
+import customDomainApi from "./api";
+import { DEFAULT_STALE_TIME, DOMAIN_QUERY_KEY } from "./constants";
+var useCreateCustomDomain = function useCreateCustomDomain(url) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var queryClient = useQueryClient();
+  return useMutation(function (payload) {
+    return customDomainApi.createCustomDomain(url, payload);
+  }, _objectSpread(_objectSpread({}, options), {}, {
+    onSuccess: function onSuccess() {
+      return queryClient.invalidateQueries(DOMAIN_QUERY_KEY);
+    }
+  }));
+};
+var useDeleteCustomDomain = function useDeleteCustomDomain(url) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var queryClient = useQueryClient();
+  return useMutation(function (id) {
+    return customDomainApi.deleteCustomDomain(url, id);
+  }, _objectSpread(_objectSpread({}, options), {}, {
+    onSuccess: function onSuccess(result) {
+      var _options$onSuccess;
+      (_options$onSuccess = options.onSuccess) === null || _options$onSuccess === void 0 ? void 0 : _options$onSuccess.call(options, result);
+      queryClient.invalidateQueries(DOMAIN_QUERY_KEY);
+    }
+  }));
+};
+var useFetchCustomDomains = function useFetchCustomDomains(params) {
+  return useQuery([DOMAIN_QUERY_KEY, _objectSpread({}, params)], function () {
+    return customDomainApi.fetchCustomDomains(params);
+  }, {
+    staleTime: DEFAULT_STALE_TIME
+  });
+};
+var useValidateDomain = function useValidateDomain(url) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var queryClient = useQueryClient();
+  return useMutation(function (id) {
+    return customDomainApi.validateDomain(url, id);
+  }, _objectSpread(_objectSpread({}, options), {}, {
+    onSuccess: function onSuccess() {
+      return queryClient.invalidateQueries(DOMAIN_QUERY_KEY);
+    }
+  }));
+};
+var useValidateCname = function useValidateCname(url) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var queryClient = useQueryClient();
+  return useMutation(function (id) {
+    return customDomainApi.validateCname(url, id);
+  }, _objectSpread(_objectSpread({}, options), {}, {
+    onSuccess: function onSuccess() {
+      return queryClient.invalidateQueries(DOMAIN_QUERY_KEY);
+    }
+  }));
+};
+var useUpdateCustomDomain = function useUpdateCustomDomain(url) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var queryClient = useQueryClient();
+  return useMutation(function (id) {
+    return customDomainApi.updateCustomDomain(url, id);
+  }, _objectSpread(_objectSpread({}, options), {}, {
+    onSuccess: function onSuccess() {
+      return queryClient.invalidateQueries(DOMAIN_QUERY_KEY);
+    }
+  }));
+};
+export { useCreateCustomDomain, useDeleteCustomDomain, useValidateDomain, useFetchCustomDomains, useValidateCname, useUpdateCustomDomain };

package/dist/CustomDomainDashboard/utils.js

@@ -0,0 +1,84 @@
+import React from "react";
+import { t } from "i18next";
+import { SINGULAR } from "@bigbinary/neeto-commons-frontend/constants";
+import { Typography } from "@bigbinary/neetoui";
+import MoreDropdown from "../MoreDropdown";
+import TagBlock from "./Manage/TagBlock";
+export var renderColumnData = function renderColumnData(enableManagePane, enableDeleteAlert) {
+  return [{
+    title: t("neetoMolecules.customDomain.customDomain", SINGULAR),
+    dataIndex: "hostname",
+    key: "hostname",
+    width: "60%",
+    render: function render(hostName, customDomain) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "flex items-center justify-between gap-x-3"
+      }, /*#__PURE__*/React.createElement(Typography, {
+        style: "body2"
+      }, hostName), /*#__PURE__*/React.createElement(MoreDropdown, {
+        dropdownButtonProps: {
+          "data-testid": "nui-dropdown-icon-".concat(customDomain.id)
+        },
+        dropdownProps: {
+          position: "bottom-end",
+          strategy: "fixed",
+          autoWidth: true
+        },
+        menuItems: [{
+          label: t("neetoMolecules.common.actions.edit"),
+          onClick: function onClick() {
+            return enableManagePane(customDomain);
+          },
+          key: "edit-custom-domain-button"
+        }, {
+          label: t("neetoMolecules.common.actions.delete"),
+          onClick: function onClick() {
+            return enableDeleteAlert(customDomain);
+          },
+          key: "delete-custom-domain"
+        }]
+      }));
+    }
+  }, {
+    title: t("neetoMolecules.common.status"),
+    dataIndex: "status",
+    key: "status",
+    render: function render(status) {
+      return /*#__PURE__*/React.createElement(TagBlock, {
+        status: status
+      });
+    },
+    width: "40%"
+  }];
+};
+export var recordData = function recordData(customDomain) {
+  var status = customDomain.status,
+    hostname = customDomain.hostname,
+    dnsTarget = customDomain.dnsTarget,
+    cnameValidationParams = customDomain.cnameValidationParams;
+  var isDomainValidated = status === "active" || status === "pending_cname_validation";
+  var recordName = isDomainValidated ? hostname : cnameValidationParams === null || cnameValidationParams === void 0 ? void 0 : cnameValidationParams.name;
+  var recordValue = isDomainValidated ? dnsTarget : cnameValidationParams === null || cnameValidationParams === void 0 ? void 0 : cnameValidationParams.value;
+  var recordType = isDomainValidated ? t("neetoMolecules.customDomain.cname") : t("neetoMolecules.customDomain.domainValidationCname");
+  var recordDescription = isDomainValidated ? t("neetoMolecules.customDomain.validation.desc", {
+    record: recordType
+  }) : t("neetoMolecules.customDomain.validation.desc", {
+    record: recordType,
+    proxyMessage: t("neetoMolecules.customDomain.validation.proxyMessage")
+  });
+  var recordNameLabel = t("neetoMolecules.customDomain.validation.record", {
+    record: recordType,
+    type: t("neetoMolecules.common.name")
+  });
+  var recordValueLabel = t("neetoMolecules.customDomain.validation.record", {
+    record: recordType,
+    type: t("neetoMolecules.common.value")
+  });
+  return {
+    recordName: recordName,
+    recordValue: recordValue,
+    recordDescription: recordDescription,
+    recordNameLabel: recordNameLabel,
+    recordValueLabel: recordValueLabel
+  };
+};

package/dist/{DateFormat.js → DateFormat/index.js}

@@ -1,25 +1,10 @@
-import React from 'react';
-import { capitalize } from '@bigbinary/neeto-commons-frontend/pure';
-import { useTimer } from '@bigbinary/neeto-commons-frontend/react-utils';
-import { timeFormat } from '@bigbinary/neeto-commons-frontend/utils';
-import { Typography, Tooltip } from '@bigbinary/neetoui';
-import { fromPairs, keys } from 'ramda';
-
-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);
-}
-
+import _extends from "@babel/runtime/helpers/extends";
+import React from "react";
+import { capitalize } from "@bigbinary/neeto-commons-frontend/pure";
+import { useTimer } from "@bigbinary/neeto-commons-frontend/react-utils";
+import { timeFormat } from "@bigbinary/neeto-commons-frontend/utils";
+import { Tooltip, Typography } from "@bigbinary/neetoui";
+import { fromPairs, keys } from "ramda";
 var DateFormat = fromPairs(keys(timeFormat).map(function (key) {
   return [capitalize(key), function (_ref) {
     var date = _ref.date,
@@ -40,6 +25,4 @@ var DateFormat = fromPairs(keys(timeFormat).map(function (key) {
     }, tooltipProps), dateDisplay);
   }];
 }));
-
-export { DateFormat as default };
-//# sourceMappingURL=DateFormat.js.map
+export default DateFormat;

package/dist/DateRangeFilter/index.js

@@ -0,0 +1,60 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React from "react";
+import dayjs from "dayjs";
+import { globalProps } from "@bigbinary/neeto-commons-frontend/initializers";
+import { Select, DatePicker } from "@bigbinary/neetoui";
+import { prop } from "ramda";
+import { useTranslation } from "react-i18next";
+import { defaultTimePeriodOptions } from "./utils";
+var DateRangeFilter = function DateRangeFilter(_ref) {
+  var _timePeriod$value, _timePeriod$value2, _globalProps$user;
+  var timePeriodOptions = _ref.timePeriodOptions,
+    timePeriod = _ref.timePeriod,
+    setTimePeriod = _ref.setTimePeriod;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var customDurationLabel = t("neetoMolecules.dateRangeFilter.timePeriodOptions.customDuration");
+  var isCustom = timePeriod.label === customDurationLabel;
+  var startDate = (_timePeriod$value = timePeriod.value) === null || _timePeriod$value === void 0 ? void 0 : _timePeriod$value.startDate;
+  var endDate = (_timePeriod$value2 = timePeriod.value) === null || _timePeriod$value2 === void 0 ? void 0 : _timePeriod$value2.endDate;
+  var requiredDateFormat = globalProps === null || globalProps === void 0 ? void 0 : (_globalProps$user = globalProps.user) === null || _globalProps$user === void 0 ? void 0 : _globalProps$user.dateFormat;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "flex",
+    "data-testid": "date-range-filter"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "w-40"
+  }, /*#__PURE__*/React.createElement(Select, {
+    required: true,
+    getOptionValue: prop("label"),
+    options: timePeriodOptions || defaultTimePeriodOptions(),
+    strategy: "fixed",
+    value: timePeriod,
+    onChange: function onChange(option) {
+      return setTimePeriod(option);
+    }
+  })), isCustom && /*#__PURE__*/React.createElement("div", {
+    className: "w-2/3",
+    "data-testid": "date-range-filter-custom-duration-picker"
+  }, /*#__PURE__*/React.createElement(DatePicker, {
+    autoFocus: true,
+    className: "ml-3 w-full",
+    dateFormat: requiredDateFormat,
+    picker: "date",
+    type: "range",
+    defaultValue: [startDate ? dayjs(startDate) : null, endDate ? dayjs(endDate) : null],
+    onChange: function onChange(_ref2) {
+      var _ref3 = _slicedToArray(_ref2, 2),
+        startDate = _ref3[0],
+        endDate = _ref3[1];
+      setTimePeriod({
+        label: customDurationLabel,
+        value: {
+          startDate: startDate,
+          endDate: endDate,
+          rangeType: "custom"
+        }
+      });
+    }
+  })));
+};
+export default DateRangeFilter;

package/dist/DateRangeFilter/utils.js

@@ -0,0 +1,113 @@
+import dayjs from "dayjs";
+import { t } from "i18next";
+var quarterOfYear = require("dayjs/plugin/quarterOfYear");
+dayjs.extend(quarterOfYear);
+export var defaultTimePeriodOptions = function defaultTimePeriodOptions() {
+  var today = dayjs().startOf("day");
+  var startOfLastWeek = today.subtract(7, "day").startOf("week");
+  var endOfLastWeek = today.subtract(7, "day").endOf("week");
+  var lastMonthStart = today.subtract(1, "month").startOf("month");
+  var lastMonthEnd = today.subtract(1, "month").endOf("month");
+  var thisQuarterStart = dayjs().startOf("quarter");
+  var thisQuarterEnd = dayjs().endOf("quarter");
+  var lastQuarterStart = dayjs().subtract(1, "quarter").startOf("quarter");
+  var lastQuarterEnd = dayjs().subtract(1, "quarter").endOf("quarter");
+  var startOfLastYear = dayjs().subtract(1, "year").startOf("year");
+  var endOfLastYear = dayjs().subtract(1, "year").endOf("year");
+  var startOfYear = dayjs().startOf("year");
+  var endOfYear = dayjs().endOf("year");
+  var startOf24Hours = dayjs().subtract(24, "hour");
+  var now = dayjs();
+  var startOfLast7Days = dayjs().subtract(7, "day");
+  var startOfWeek = dayjs().startOf("week");
+  var startOfLast30Days = dayjs().subtract(30, "day");
+  var startOfMonth = today.startOf("month");
+  return [{
+    label: t("neetoMolecules.dateRangeFilter.timePeriodOptions.allTime"),
+    value: {
+      startDate: null,
+      endDate: null,
+      rangeType: "all"
+    }
+  }, {
+    label: t("neetoMolecules.dateRangeFilter.timePeriodOptions.last24Hours"),
+    value: {
+      startDate: startOf24Hours,
+      endDate: now,
+      rangeType: "hours"
+    }
+  }, {
+    label: t("neetoMolecules.dateRangeFilter.timePeriodOptions.last7Days"),
+    value: {
+      startDate: startOfLast7Days,
+      endDate: now,
+      rangeType: "days"
+    }
+  }, {
+    label: t("neetoMolecules.dateRangeFilter.timePeriodOptions.thisWeek"),
+    value: {
+      startDate: startOfWeek,
+      endDate: now,
+      rangeType: "week"
+    }
+  }, {
+    label: t("neetoMolecules.dateRangeFilter.timePeriodOptions.lastWeek"),
+    value: {
+      startDate: startOfLastWeek,
+      endDate: endOfLastWeek,
+      rangeType: "week"
+    }
+  }, {
+    label: t("neetoMolecules.dateRangeFilter.timePeriodOptions.last30Days"),
+    value: {
+      startDate: startOfLast30Days,
+      endDate: now,
+      rangeType: "days"
+    }
+  }, {
+    label: t("neetoMolecules.dateRangeFilter.timePeriodOptions.thisMonth"),
+    value: {
+      startDate: startOfMonth,
+      endDate: now,
+      rangeType: "month"
+    }
+  }, {
+    label: t("neetoMolecules.dateRangeFilter.timePeriodOptions.lastMonth"),
+    value: {
+      startDate: lastMonthStart,
+      endDate: lastMonthEnd,
+      rangeType: "month"
+    }
+  }, {
+    label: t("neetoMolecules.dateRangeFilter.timePeriodOptions.thisQuarter"),
+    value: {
+      startDate: thisQuarterStart,
+      endDate: thisQuarterEnd,
+      rangeType: "quarter"
+    }
+  }, {
+    label: t("neetoMolecules.dateRangeFilter.timePeriodOptions.lastQuarter"),
+    value: {
+      startDate: lastQuarterStart,
+      endDate: lastQuarterEnd,
+      rangeType: "quarter"
+    }
+  }, {
+    label: t("neetoMolecules.dateRangeFilter.timePeriodOptions.thisYear"),
+    value: {
+      startDate: startOfYear,
+      endDate: endOfYear,
+      rangeType: "year"
+    }
+  }, {
+    label: t("neetoMolecules.dateRangeFilter.timePeriodOptions.lastYear"),
+    value: {
+      startDate: startOfLastYear,
+      endDate: endOfLastYear,
+      rangeType: "year"
+    }
+  }, {
+    label: t("neetoMolecules.dateRangeFilter.timePeriodOptions.customDuration"),
+    value: "custom"
+  }];
+};

package/dist/DynamicVariables/dynamic-variables.scss

@@ -0,0 +1,34 @@
+.neeto-molecules-dynamic-variables {
+  min-width: 184px;
+  max-width: 360px;
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+
+  &__list {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px;
+
+    button {
+      border: solid 1px rgb(var(--neeto-ui-gray-300));
+      border-radius: var(--neeto-ui-rounded-md);
+      color: rgb(var(--neeto-ui-black));
+      transition: var(--neeto-ui-transition);
+      padding: 6px;
+      user-select: none;
+      text-align: left;
+    }
+
+    button:focus-visible,
+    button:focus,
+    button:hover {
+      color: rgb(var(--neeto-ui-primary-800));
+      border-color: rgb(var(--neeto-ui-primary-800));
+      outline: none;
+      box-shadow: none;
+    }
+  }
+}

package/dist/DynamicVariables/index.js

@@ -0,0 +1,59 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["onVariableClick", "variables", "buttonProps"];
+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 React, { Fragment } from "react";
+import { noop } from "@bigbinary/neeto-commons-frontend/pure";
+import { joinHyphenCase } from "@bigbinary/neeto-commons-frontend/utils";
+import { Braces } from "@bigbinary/neeto-icons";
+import { Dropdown, Typography } from "@bigbinary/neetoui";
+import { isEmpty } from "ramda";
+import "./dynamic-variables.scss";
+import { parseVariables } from "./utils";
+var Menu = Dropdown.Menu;
+var DynamicVariables = function DynamicVariables(_ref) {
+  var _ref$onVariableClick = _ref.onVariableClick,
+    onVariableClick = _ref$onVariableClick === void 0 ? noop : _ref$onVariableClick,
+    _ref$variables = _ref.variables,
+    variables = _ref$variables === void 0 ? [] : _ref$variables,
+    buttonProps = _ref.buttonProps,
+    dropdownProps = _objectWithoutProperties(_ref, _excluded);
+  if (isEmpty(variables)) {
+    return null;
+  }
+  var parsedVariables = parseVariables(variables);
+  return /*#__PURE__*/React.createElement(Dropdown, _extends({
+    buttonStyle: "secondary",
+    icon: Braces,
+    strategy: "fixed",
+    buttonProps: _objectSpread({
+      "data-testid": "variables-dropdown",
+      "data-cy": "dynamic-variables-button"
+    }, buttonProps)
+  }, dropdownProps), /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement("div", {
+    className: "neeto-molecules-dynamic-variables",
+    "data-testid": "variables-list"
+  }, parsedVariables.map(function (_ref2) {
+    var label = _ref2.label,
+      variables = _ref2.variables;
+    return /*#__PURE__*/React.createElement(Fragment, {
+      key: label
+    }, label && /*#__PURE__*/React.createElement(Typography, {
+      style: "h6"
+    }, label), /*#__PURE__*/React.createElement("div", {
+      className: "neeto-molecules-dynamic-variables__list",
+      "data-cy": "dynamic-variables-list"
+    }, variables.map(function (item) {
+      return /*#__PURE__*/React.createElement("button", {
+        key: item.label,
+        "data-cy": joinHyphenCase("dynamic-variables-list-item", item.label),
+        onClick: function onClick() {
+          return onVariableClick(item);
+        }
+      }, item.label);
+    })));
+  }))));
+};
+export default DynamicVariables;

package/dist/DynamicVariables/utils.js

@@ -0,0 +1,37 @@
+import { findBy } from "@bigbinary/neeto-commons-frontend/pure";
+import { prop, assoc, isEmpty, uniqBy } from "ramda";
+export var parseVariables = function parseVariables() {
+  var variableArr = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var uncategorized = [];
+  var groupedVariables = [];
+  var categorySet = new Set();
+  variableArr.forEach(function (variable) {
+    var category = variable.category,
+      label = variable.label,
+      variables = variable.variables;
+    if (category && variables) {
+      var parsedVariables = variables.map(assoc("category", category));
+      if (!categorySet.has(category)) {
+        categorySet.add(category);
+        groupedVariables.push({
+          label: label,
+          variables: parsedVariables
+        });
+      } else {
+        var existingGroup = findBy({
+          label: label
+        }, groupedVariables);
+        existingGroup.variables = uniqBy(prop("key"), existingGroup.variables.concat(parsedVariables));
+      }
+    } else {
+      uncategorized.push(variable);
+    }
+  });
+  if (!isEmpty(uncategorized)) {
+    groupedVariables.push({
+      label: !isEmpty(groupedVariables) ? "Others" : null,
+      variables: uncategorized
+    });
+  }
+  return groupedVariables;
+};

package/dist/EmailForm/EmailForm.js

@@ -0,0 +1,97 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React, { useContext } from "react";
+import classnames from "classnames";
+import { Field, useFormikContext } from "formik";
+import { FormikEditor } from "@bigbinary/neeto-editor";
+import { Typography } from "@bigbinary/neetoui";
+import { ActionBlock } from "@bigbinary/neetoui/formik";
+import { Trans, useTranslation } from "react-i18next";
+import { EDITOR_ADDONS } from "./constants";
+import { EmailFormContext } from "./contexts/EmailForm";
+import ReplyToField from "./ReplyToField";
+import SendToField from "./SendToField";
+import SubjectField from "./SubjectField";
+var EmailForm = function EmailForm(_ref) {
+  var _ref$messageVariables = _ref.messageVariables,
+    messageVariables = _ref$messageVariables === void 0 ? [] : _ref$messageVariables,
+    _ref$subjectVariables = _ref.subjectVariables,
+    subjectVariables = _ref$subjectVariables === void 0 ? [] : _ref$subjectVariables,
+    handleCancel = _ref.handleCancel,
+    isLoading = _ref.isLoading,
+    _ref$replyToOptions = _ref.replyToOptions,
+    replyToOptions = _ref$replyToOptions === void 0 ? [] : _ref$replyToOptions,
+    _ref$isUpdating = _ref.isUpdating,
+    isUpdating = _ref$isUpdating === void 0 ? false : _ref$isUpdating,
+    _ref$showFields = _ref.showFields,
+    showFields = _ref$showFields === void 0 ? true : _ref$showFields,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useContext = useContext(EmailFormContext),
+    showSendToField = _useContext.showSendToField,
+    showReplyToField = _useContext.showReplyToField;
+  var _useFormikContext = useFormikContext(),
+    setFieldValue = _useFormikContext.setFieldValue,
+    dirty = _useFormikContext.dirty;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": "email-form",
+    className: classnames("flex flex-1 flex-col items-start gap-2", _defineProperty({}, className, className))
+  }, showFields && /*#__PURE__*/React.createElement("div", {
+    className: "flex w-full flex-col items-start justify-start gap-6"
+  }, /*#__PURE__*/React.createElement(Field, {
+    name: "subject"
+  }, function (_ref2) {
+    var value = _ref2.field.value,
+      error = _ref2.meta.error;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "w-full"
+    }, /*#__PURE__*/React.createElement(SubjectField, {
+      error: t(error),
+      name: "subject",
+      subjectVariables: subjectVariables,
+      text: value,
+      updateText: function updateText(text) {
+        return setFieldValue("subject", text);
+      }
+    }));
+  }), showSendToField && /*#__PURE__*/React.createElement(SendToField, null), showReplyToField && /*#__PURE__*/React.createElement(ReplyToField, {
+    replyToOptions: replyToOptions
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "w-full"
+  }, /*#__PURE__*/React.createElement(FormikEditor, {
+    required: true,
+    addons: EDITOR_ADDONS,
+    "data-cy": "message-input-field",
+    id: "form_message",
+    label: t("neetoMolecules.emailForm.labels.message"),
+    name: "message",
+    variables: messageVariables
+  }), /*#__PURE__*/React.createElement(Typography, {
+    className: "neeto-ui-text-gray-500 mt-2",
+    "data-cy": "message-input-variable-label",
+    style: "body3"
+  }, /*#__PURE__*/React.createElement(Trans, {
+    i18nKey: "neetoMolecules.emailForm.helpText",
+    values: {
+      type: "message"
+    },
+    components: {
+      span: /*#__PURE__*/React.createElement("span", {
+        className: "font-semibold"
+      })
+    }
+  })))), /*#__PURE__*/React.createElement(ActionBlock, {
+    className: "mt-6 w-full justify-start",
+    cancelButtonProps: {
+      disabled: false,
+      onClick: handleCancel,
+      className: "ml-3"
+    },
+    submitButtonProps: {
+      loading: isLoading,
+      disabled: !dirty || isUpdating
+    }
+  }));
+};
+export default EmailForm;

package/dist/EmailForm/EmailFormProvider.js

@@ -0,0 +1,45 @@
+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 React from "react";
+import { noop } from "@bigbinary/neeto-commons-frontend/pure";
+import { Form } from "@bigbinary/neetoui/formik";
+import { INITIAL_FORM_VALUES } from "./constants";
+import { EmailFormContext } from "./contexts/EmailForm";
+import { getValidationSchema } from "./utils";
+var EmailFormProvider = function EmailFormProvider(_ref) {
+  var _ref$onSubmit = _ref.onSubmit,
+    onSubmit = _ref$onSubmit === void 0 ? noop : _ref$onSubmit,
+    _ref$initialValues = _ref.initialValues,
+    initialValues = _ref$initialValues === void 0 ? INITIAL_FORM_VALUES : _ref$initialValues,
+    children = _ref.children,
+    formikProps = _ref.formikProps,
+    _ref$validationSchema = _ref.validationSchema,
+    customValidations = _ref$validationSchema === void 0 ? {} : _ref$validationSchema,
+    _ref$showSendToField = _ref.showSendToField,
+    showSendToField = _ref$showSendToField === void 0 ? false : _ref$showSendToField,
+    _ref$showReplyToField = _ref.showReplyToField,
+    showReplyToField = _ref$showReplyToField === void 0 ? false : _ref$showReplyToField;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": "email-form-provider"
+  }, /*#__PURE__*/React.createElement(EmailFormContext.Provider, {
+    value: {
+      showSendToField: showSendToField,
+      showReplyToField: showReplyToField
+    }
+  }, /*#__PURE__*/React.createElement(Form, {
+    formikProps: _objectSpread({
+      enableReinitialize: true,
+      validationSchema: getValidationSchema({
+        showSendToField: showSendToField,
+        showReplyToField: showReplyToField,
+        customValidations: customValidations
+      }),
+      initialValues: _objectSpread(_objectSpread({}, initialValues), {}, {
+        replyTo: initialValues.replyTo || globalProps.user.email
+      }),
+      onSubmit: onSubmit
+    }, formikProps)
+  }, children)));
+};
+export default EmailFormProvider;