@bigbinary/neeto-message-templates-frontend 2.0.6 → 2.0.8

package/dist/cjs/v2/MessageTemplates.js

@@ -0,0 +1,849 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var react = require('react');
+var neetoAtoms = require('@bigbinary/neeto-atoms');
+var neetoCist = require('@bigbinary/neeto-cist');
+var FiltersBar = require('@bigbinary/neeto-filters-frontend/Bar');
+var Container = require('@bigbinary/neeto-molecules/v2/Container');
+var NeetoHeader = require('@bigbinary/neeto-molecules/v2/Header');
+var SubHeader = require('@bigbinary/neeto-molecules/v2/SubHeader');
+var ramda = require('ramda');
+var reactI18next = require('react-i18next');
+var adaptive_input = require('../../adaptive_input-Cd_EArae.js');
+var constants = require('../../constants-Cvnks2UE.js');
+var i18next = require('i18next');
+var MoreDropdown = require('@bigbinary/neeto-molecules/v2/MoreDropdown');
+var useTemplatesApi = require('../../useTemplatesApi-byHuEDTl.js');
+var jsxRuntime = require('react/jsx-runtime');
+var formik$1 = require('@bigbinary/neeto-atoms/formik');
+var FormikEditor = require('@bigbinary/neeto-editor/FormikEditor');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var formik = require('formik');
+var PhoneNumber = require('@bigbinary/neeto-molecules/v2/PhoneNumber');
+var yup = require('yup');
+var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+var reactUtils = require('@bigbinary/neeto-commons-frontend/v2/react-utils');
+var utils = require('@bigbinary/neeto-filters-frontend/utils');
+var TableWrapper = require('@bigbinary/neeto-molecules/v2/TableWrapper');
+require('@bigbinary/neeto-commons-frontend/react-utils');
+require('zustand');
+require('../../inject-css-B6qYtOJe.js');
+require('@bigbinary/neeto-commons-frontend/v2/constants');
+require('@tanstack/react-query');
+require('axios');
+require('qs');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var yup__namespace = /*#__PURE__*/_interopNamespaceDefault(yup);
+
+var MESSAGE_TEMPLATE_INITIAL_STATE = {
+  isOpen: false,
+  isEdit: false,
+  isDelete: false,
+  template: {}
+};
+
+var MENU_ITEMS = {
+  EDIT: "edit",
+  DELETE: "delete",
+  STATUS: "status"
+};
+
+var getMenuItems = function getMenuItems(_ref) {
+  var handleDeleteTemplate = _ref.handleDeleteTemplate,
+    handleEditTemplate = _ref.handleEditTemplate,
+    handleMarkActiveInactive = _ref.handleMarkActiveInactive,
+    status = _ref.status;
+  return [{
+    key: MENU_ITEMS.EDIT,
+    label: i18next.t("neetoMessageTemplate.template.edit"),
+    onClick: handleEditTemplate,
+    "data-testid": "message-template-edit-button"
+  }, {
+    key: MENU_ITEMS.STATUS,
+    label: ramda.equals(status, "active") ? i18next.t("neetoMessageTemplate.template.markAsInactive") : i18next.t("neetoMessageTemplate.template.markAsActive"),
+    onClick: function onClick() {
+      return handleMarkActiveInactive(status);
+    },
+    "data-testid": "message-template-status-button"
+  }, {
+    key: MENU_ITEMS.DELETE,
+    label: i18next.t("neetoMessageTemplate.template.delete"),
+    onClick: handleDeleteTemplate,
+    "data-testid": "message-template-delete-button"
+  }];
+};
+
+function ownKeys$6(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$6(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$6(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$6(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var RowActions = function RowActions(_ref) {
+  var template = _ref.template,
+    setManageTemplatePane = _ref.setManageTemplatePane,
+    ownerId = _ref.ownerId,
+    onMutationSuccess = _ref.onMutationSuccess;
+  var _useUpdateTemplate = useTemplatesApi.useUpdateTemplate(ownerId),
+    update = _useUpdateTemplate.mutate;
+  var status = template.status,
+    id = template.id;
+  var templateType = adaptive_input.useTemplateStore(ramda.prop("templateType"));
+  var handleEditTemplate = function handleEditTemplate() {
+    return setManageTemplatePane(_objectSpread$6(_objectSpread$6({}, MESSAGE_TEMPLATE_INITIAL_STATE), {}, {
+      isOpen: true,
+      isEdit: true,
+      template: template
+    }));
+  };
+  var handleDeleteTemplate = function handleDeleteTemplate() {
+    return setManageTemplatePane(_objectSpread$6(_objectSpread$6({}, MESSAGE_TEMPLATE_INITIAL_STATE), {}, {
+      isDelete: true,
+      template: template
+    }));
+  };
+  var handleMarkActiveInactive = function handleMarkActiveInactive(activeState) {
+    var status = activeState === "active" ? "inactive" : "active";
+    update({
+      payload: {
+        status: status,
+        templateType: templateType
+      },
+      id: id
+    }, {
+      onSuccess: onMutationSuccess
+    });
+  };
+  return /*#__PURE__*/jsxRuntime.jsx(MoreDropdown, {
+    dropdownButtonProps: {
+      "data-testid": "message-template-dropdown",
+      className: "me-1 my-1"
+    },
+    menuItems: getMenuItems({
+      handleDeleteTemplate: handleDeleteTemplate,
+      handleEditTemplate: handleEditTemplate,
+      handleMarkActiveInactive: handleMarkActiveInactive,
+      status: status
+    })
+  });
+};
+
+function ownKeys$5(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$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var handleEditTemplate = function handleEditTemplate(setManageTemplatePane, template) {
+  return setManageTemplatePane(_objectSpread$5(_objectSpread$5({}, MESSAGE_TEMPLATE_INITIAL_STATE), {}, {
+    isOpen: true,
+    isEdit: true,
+    template: template
+  }));
+};
+var renderSearchProps = function renderSearchProps(label, value) {
+  return {
+    className: "w-52",
+    placeholder: i18next.t("neetoMessageTemplate.template.search", {
+      what: label
+    }),
+    "data-testid": "".concat(neetoCist.hyphenate(value), "-search-input")
+  };
+};
+
+// These column definitions serve double duty, exactly as they did in v1: the
+// TanStack keys (`id`/`accessorKey`/`header`/`size`/`cell`) feed atoms'
+// DataTable, while the filter keys (`key`/`node`/`label`/`type`/`values`) feed
+// neetofilters via `useFilters`. Keep both sets in sync when editing.
+var buildTableColumnData = function buildTableColumnData(setManageTemplatePane, ownerId, onMutationSuccess) {
+  return [{
+    accessorKey: "name",
+    id: "name",
+    key: "name",
+    node: "name",
+    header: i18next.t("neetoMessageTemplate.template.name"),
+    label: i18next.t("neetoMessageTemplate.template.name"),
+    type: "text",
+    size: 200,
+    cell: function cell(_ref) {
+      var template = _ref.row.original;
+      return /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex items-center justify-between gap-x-3",
+        children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
+          label: neetoCist.truncate(template.name, 100),
+          variant: "link",
+          onClick: function onClick() {
+            return handleEditTemplate(setManageTemplatePane, template);
+          }
+        }), /*#__PURE__*/jsxRuntime.jsx(RowActions, {
+          onMutationSuccess: onMutationSuccess,
+          ownerId: ownerId,
+          setManageTemplatePane: setManageTemplatePane,
+          template: template
+        })]
+      });
+    }
+  }, {
+    accessorKey: "status",
+    id: "status",
+    key: "status",
+    node: "status",
+    header: i18next.t("neetoMessageTemplate.template.active"),
+    label: i18next.t("neetoMessageTemplate.template.active"),
+    type: "single_option",
+    values: [{
+      label: "Yes",
+      value: "active"
+    }, {
+      label: "No",
+      value: "inactive"
+    }],
+    cell: function cell(_ref2) {
+      var getValue = _ref2.getValue;
+      return getValue() === "active" ? "Yes" : "No";
+    },
+    size: 180
+  }];
+};
+
+var _excluded = ["label", "name"];
+function ownKeys$4(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$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var FormikAdaptiveInput = function FormikAdaptiveInput(_ref) {
+  var label = _ref.label,
+    name = _ref.name,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  var _useFormikContext = formik.useFormikContext(),
+    submitForm = _useFormikContext.submitForm;
+  var handleKeyDown = function handleKeyDown(event) {
+    if (event.key !== "Enter" || event.shiftKey) return;
+    event.preventDefault();
+    submitForm();
+  };
+  return /*#__PURE__*/jsxRuntime.jsx(formik$1.Textarea, _objectSpread$4({
+    label: label,
+    name: name,
+    className: "neeto-message-templates-nano-adaptive-input",
+    resize: "none",
+    size: "small",
+    onKeyDown: handleKeyDown
+  }, otherProps));
+};
+
+// eslint-disable-next-line @bigbinary/neeto/file-name-and-export-name-standards
+var formatEditorContent = function formatEditorContent(value) {
+  return value === null || value === void 0 ? void 0 : value.replaceAll(/<\/?(?!img)\w*\b[^>]*>/gi, "").trim();
+};
+var EMAIL_TEMPLATE_INITIAL_VALUES = {
+  name: "",
+  subject: "",
+  body: "",
+  testEmailAddress: ""
+};
+var SMS_TEMPLATE_INITIAL_VALUES = {
+  name: "",
+  body: "",
+  testPhoneNumber: ""
+};
+var EMAIL_TEMPLATE_FORM_SCHEMA = yup__namespace.object({
+  name: yup__namespace.string().trim().required(i18next.t("neetoMessageTemplate.template.validation.namePresence")),
+  subject: yup__namespace.string().trim().required(i18next.t("neetoMessageTemplate.template.validation.subjectPresence")),
+  body: yup__namespace.string().test("name", i18next.t("neetoMessageTemplate.template.validation.bodyPresence"), function (value) {
+    return !!formatEditorContent(value);
+  })
+});
+var SMS_TEMPLATE_FORM_VALIDATION_SCHEMA = yup__namespace.object({
+  name: yup__namespace.string().trim().required(i18next.t("neetoMessageTemplate.template.validation.namePresence")),
+  body: yup__namespace.string().test("body", i18next.t("neetoMessageTemplate.template.validation.bodyPresence"), function (value) {
+    return !!formatEditorContent(value);
+  })
+});
+var SEND_TEST_EMAIL_SCHEMA = yup__namespace.string().trim().required(i18next.t("neetoMessageTemplate.template.validation.emailAddressPresence")).email(i18next.t("neetoMessageTemplate.template.validation.emailAddressFormatValidation"));
+var PHONE_NUMBER_VALIDATION_SCHEMA = yup__namespace.string().test("testPhoneNumber", i18next.t("neetoMessageTemplate.template.validation.validPhoneNumber"), function (value) {
+  return PhoneNumber.isPhoneNumberValid(value);
+});
+
+function ownKeys$3(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$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = false, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = true, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i["return"]) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), true), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
+function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
+var TestMessage = function TestMessage(_ref) {
+  var isEmailTemplate = _ref.isEmailTemplate,
+    handleSubmitTestTemplate = _ref.handleSubmitTestTemplate,
+    isTestMessageLoading = _ref.isTestMessageLoading,
+    isTestingTemplateDisabled = _ref.isTestingTemplateDisabled,
+    customFields = _ref.customFields;
+  var _useState = react.useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    isTestingTemplateRestricted = _useState2[0],
+    setIsTestingTemplateRestricted = _useState2[1];
+  var _useFormikContext = formik.useFormikContext(),
+    values = _useFormikContext.values,
+    isValid = _useFormikContext.isValid;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var handleTestValidation = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(event) {
+      var value;
+      return _regenerator().w(function (_context) {
+        while (1) switch (_context.p = _context.n) {
+          case 0:
+            value = event.target.value;
+            _context.p = 1;
+            if (!isEmailTemplate) {
+              _context.n = 3;
+              break;
+            }
+            _context.n = 2;
+            return SEND_TEST_EMAIL_SCHEMA.validate(value);
+          case 2:
+            _context.n = 4;
+            break;
+          case 3:
+            _context.n = 4;
+            return PHONE_NUMBER_VALIDATION_SCHEMA.validate(value);
+          case 4:
+            setIsTestingTemplateRestricted(false);
+            _context.n = 6;
+            break;
+          case 5:
+            _context.p = 5;
+            _context.v;
+            setIsTestingTemplateRestricted(true);
+          case 6:
+            return _context.a(2);
+        }
+      }, _callee, null, [[1, 5]]);
+    }));
+    return function handleTestValidation(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  var isTestTemplateButtonDisabled = !isValid || isTestingTemplateDisabled || isTestingTemplateRestricted || isTestMessageLoading;
+  var handleKeyDown = function handleKeyDown(event) {
+    if (event.key !== "Enter") return;
+    event.stopPropagation();
+    event.preventDefault();
+    !isTestTemplateButtonDisabled && handleSubmitTestTemplate(values);
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "start-0 flex items-start gap-x-2",
+      children: [/*#__PURE__*/jsxRuntime.jsx(formik$1.Input, _objectSpread$3(_objectSpread$3({
+        "data-testid": "message-template-test-input"
+      }, !isEmailTemplate && {
+        helpText: t("neetoMessageTemplate.template.phoneNumberHelpText")
+      }), {}, {
+        name: isEmailTemplate ? "testEmailAddress" : "testPhoneNumber",
+        placeholder: t(isEmailTemplate ? "neetoMessageTemplate.template.emailAddress" : "neetoMessageTemplate.template.phoneNumber"),
+        onKeyDown: handleKeyDown,
+        onKeyUp: handleTestValidation
+      })), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
+        "data-testid": "message-template-test-button",
+        disabled: isTestTemplateButtonDisabled,
+        loading: isTestMessageLoading,
+        type: "button",
+        variant: "default",
+        label: isEmailTemplate ? t("neetoMessageTemplate.template.sendTestEmail") : t("neetoMessageTemplate.template.sendTestSms"),
+        onClick: function onClick() {
+          return handleSubmitTestTemplate(values);
+        }
+      })]
+    }), !isEmailTemplate && /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+      variant: "body2",
+      children: t("neetoMessageTemplate.sendMessage.testSmsNote")
+    }), customFields]
+  });
+};
+
+function ownKeys$2(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$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Form = function Form(_ref) {
+  var onClose = _ref.onClose,
+    isEdit = _ref.isEdit,
+    _ref$template = _ref.template,
+    template = _ref$template === void 0 ? {} : _ref$template,
+    createUpdateTemplate = _ref.createUpdateTemplate,
+    setInitialFocusField = _ref.setInitialFocusField,
+    handleSubmitTestTemplate = _ref.handleSubmitTestTemplate,
+    isTestMessageLoading = _ref.isTestMessageLoading,
+    shouldIncludeTestTemplate = _ref.shouldIncludeTestTemplate,
+    templateVariables = _ref.templateVariables,
+    isTestingTemplateDisabled = _ref.isTestingTemplateDisabled,
+    customFields = _ref.customFields,
+    onMutationSuccess = _ref.onMutationSuccess;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var editorRef = react.useRef(null);
+  var templateType = adaptive_input.useTemplateStore(ramda.prop("templateType"));
+  var isEmailTemplate = ramda.equals(templateType, "email_template");
+  var isTestTemplateVisible = ramda.includes(templateType, ["sms_template", "email_template"]) && shouldIncludeTestTemplate;
+  var _ref2 = isEmailTemplate ? [_objectSpread$2(_objectSpread$2({}, EMAIL_TEMPLATE_INITIAL_VALUES), ramda.pick(["name", "body", "subject", "active"], template)), EMAIL_TEMPLATE_FORM_SCHEMA] : [_objectSpread$2(_objectSpread$2({}, SMS_TEMPLATE_INITIAL_VALUES), ramda.pick(["name", "body", "active"], template)), SMS_TEMPLATE_FORM_VALIDATION_SCHEMA],
+    _ref3 = _slicedToArray(_ref2, 2),
+    TEMPLATE_INITIAL_VALUES = _ref3[0],
+    TEMPLATE_FORM_SCHEMA = _ref3[1];
+  var handleSubmit = function handleSubmit(values) {
+    var filteredValues = isEmailTemplate ? ramda.omit(["name", "testEmailAddress"], values) : ramda.omit(["name", "testPhoneNumber"], values);
+    var payload = {
+      templateType: templateType,
+      name: values.name,
+      entity: ramda.mergeLeft({
+        id: template.id
+      }, filteredValues)
+    };
+    createUpdateTemplate({
+      isEdit: isEdit,
+      payload: payload,
+      id: template.id
+    }, {
+      onSuccess: function onSuccess() {
+        onMutationSuccess.apply(void 0, arguments);
+        onClose();
+      }
+    });
+  };
+  var messageBodyLabel = isEmailTemplate ? t("neetoMessageTemplate.template.emailBody") : t("neetoMessageTemplate.template.smsBody");
+  return /*#__PURE__*/jsxRuntime.jsxs(formik$1.Form, {
+    formProps: {
+      noValidate: true,
+      className: "flex w-full flex-col gap-y-4 pb-6"
+    },
+    formikProps: {
+      initialValues: TEMPLATE_INITIAL_VALUES,
+      validationSchema: TEMPLATE_FORM_SCHEMA,
+      validateOnBlur: true,
+      validateOnChange: true,
+      onSubmit: handleSubmit
+    },
+    children: [/*#__PURE__*/jsxRuntime.jsx(formik$1.Input, {
+      required: true,
+      label: t("neetoMessageTemplate.template.templateName"),
+      name: "name",
+      ref: setInitialFocusField
+    }), isEmailTemplate && /*#__PURE__*/jsxRuntime.jsx(FormikAdaptiveInput, {
+      required: true,
+      label: t("neetoMessageTemplate.template.emailSubject"),
+      name: "subject"
+    }), /*#__PURE__*/jsxRuntime.jsx(FormikEditor, {
+      hideSlashCommands: true,
+      required: true,
+      contentClassName: "max-h-40",
+      defaults: isEmailTemplate ? undefined : [],
+      label: messageBodyLabel,
+      name: "body",
+      ref: editorRef,
+      rows: constants.DEFAULT_EDITOR_ROW_COUNT,
+      variables: templateVariables
+    }), isTestTemplateVisible && /*#__PURE__*/jsxRuntime.jsx(TestMessage, {
+      customFields: customFields,
+      handleSubmitTestTemplate: handleSubmitTestTemplate,
+      isEmailTemplate: isEmailTemplate,
+      isTestMessageLoading: isTestMessageLoading,
+      isTestingTemplateDisabled: isTestingTemplateDisabled
+    }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Sheet.Footer, {
+      className: "absolute bottom-0 start-0",
+      children: /*#__PURE__*/jsxRuntime.jsx(formik$1.ActionBlock, {
+        cancelButtonProps: {
+          "data-testid": "message-template-reset-button",
+          onClick: onClose
+        },
+        submitButtonProps: {
+          "data-testid": "message-template-submit-button"
+        }
+      })
+    })]
+  });
+};
+
+var AddEdit = function AddEdit(_ref) {
+  var onClose = _ref.onClose,
+    createUpdateTemplate = _ref.createUpdateTemplate,
+    manageTemplatePane = _ref.manageTemplatePane,
+    isTestMessageLoading = _ref.isTestMessageLoading,
+    handleSubmitTestTemplate = _ref.handleSubmitTestTemplate,
+    shouldIncludeTestTemplate = _ref.shouldIncludeTestTemplate,
+    addText = _ref.addText,
+    editText = _ref.editText,
+    templateVariables = _ref.templateVariables,
+    isTestingTemplateDisabled = _ref.isTestingTemplateDisabled,
+    customFields = _ref.customFields,
+    onMutationSuccess = _ref.onMutationSuccess;
+  var initialFocusField = react.useRef(null);
+  var isOpen = manageTemplatePane.isOpen,
+    isEdit = manageTemplatePane.isEdit,
+    template = manageTemplatePane.template;
+  var label = isEdit ? editText : addText;
+  return /*#__PURE__*/jsxRuntime.jsxs(neetoAtoms.Sheet, {
+    isOpen: isOpen,
+    onClose: onClose,
+    initialFocusRef: initialFocusField,
+    children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Sheet.Header, {
+      children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Sheet.Title, {
+        children: label
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Sheet.Body, {
+      children: /*#__PURE__*/jsxRuntime.jsx(Form, {
+        createUpdateTemplate: createUpdateTemplate,
+        customFields: customFields,
+        handleSubmitTestTemplate: handleSubmitTestTemplate,
+        isEdit: isEdit,
+        isTestMessageLoading: isTestMessageLoading,
+        isTestingTemplateDisabled: isTestingTemplateDisabled,
+        onClose: onClose,
+        onMutationSuccess: onMutationSuccess,
+        shouldIncludeTestTemplate: shouldIncludeTestTemplate,
+        template: template,
+        templateVariables: templateVariables,
+        setInitialFocusField: initialFocusField
+      })
+    })]
+  });
+};
+
+var useFilters = function useFilters() {
+  var _useState = react.useState(constants.DEFAULT_PAGE_PROPERTIES),
+    _useState2 = _slicedToArray(_useState, 2),
+    pageProperties = _useState2[0],
+    setPageProperties = _useState2[1];
+  var _useQueryParams = reactUtils.useQueryParams(),
+    _useQueryParams$searc = _useQueryParams.searchTerm,
+    searchTerm = _useQueryParams$searc === void 0 ? "" : _useQueryParams$searc;
+  var filterColumns = buildTableColumnData().filter(ramda.prop("node"));
+  var searchKeywordProps = {
+    key: "search_term",
+    node: "name",
+    value: searchTerm,
+    setValue: neetoCist.noop
+  };
+  var _useState3 = react.useState(function () {
+      return utils.buildFiltersFromURL([].concat(_toConsumableArray(filterColumns), [searchKeywordProps]));
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    filters = _useState4[0],
+    setFilters = _useState4[1];
+  return {
+    filterColumns: filterColumns,
+    searchKeywordProps: searchKeywordProps,
+    searchTerm: searchTerm,
+    filters: filters,
+    setFilters: setFilters,
+    pageProperties: pageProperties,
+    setPageProperties: setPageProperties
+  };
+};
+
+var useTemplates = function useTemplates(_ref) {
+  var type = _ref.type,
+    ownerId = _ref.ownerId,
+    filters = _ref.filters,
+    pageProperties = _ref.pageProperties;
+  var pageIndex = pageProperties.index,
+    pageSize = pageProperties.size;
+  var templateParams = {
+    page: pageIndex,
+    pageSize: pageSize,
+    filters: filters,
+    templateType: constants.MESSAGE_TEMPLATES[type].value,
+    ownerId: ramda.isEmpty(ownerId) ? undefined : ownerId
+  };
+  var _useFetchTemplates = useTemplatesApi.useFetchTemplates(templateParams),
+    _useFetchTemplates$da = _useFetchTemplates.data,
+    templatesData = _useFetchTemplates$da === void 0 ? {} : _useFetchTemplates$da,
+    isLoadingTemplates = _useFetchTemplates.isLoading,
+    isFetching = _useFetchTemplates.isFetching;
+  var _useCreateTemplate = useTemplatesApi.useCreateTemplate(ownerId),
+    create = _useCreateTemplate.mutate;
+  var _useUpdateTemplate = useTemplatesApi.useUpdateTemplate(ownerId),
+    update = _useUpdateTemplate.mutate;
+  var createUpdateTemplate = function createUpdateTemplate(_ref2, options) {
+    var isEdit = _ref2.isEdit,
+      payload = _ref2.payload,
+      _ref2$id = _ref2.id,
+      id = _ref2$id === void 0 ? null : _ref2$id;
+    return isEdit ? update({
+      id: id,
+      payload: payload
+    }, options) : create(payload, options);
+  };
+  var isLoaderVisible = isLoadingTemplates || isFetching;
+  return {
+    templatesData: templatesData,
+    isLoading: isLoaderVisible,
+    createUpdateTemplate: createUpdateTemplate
+  };
+};
+
+function ownKeys$1(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$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var List = function List(_ref) {
+  var setManageTemplatePane = _ref.setManageTemplatePane,
+    templatesData = _ref.templatesData,
+    isLoading = _ref.isLoading,
+    manageTemplatePane = _ref.manageTemplatePane,
+    labelSingular = _ref.labelSingular,
+    setPageProperties = _ref.setPageProperties,
+    pageProperties = _ref.pageProperties,
+    label = _ref.label,
+    addText = _ref.addText,
+    isFilterApplied = _ref.isFilterApplied,
+    ownerId = _ref.ownerId,
+    type = _ref.type,
+    onMutationSuccess = _ref.onMutationSuccess,
+    helpDocUrl = _ref.helpDocUrl;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useDeleteTemplate = useTemplatesApi.useDeleteTemplate(ownerId),
+    deleteTemplate = _useDeleteTemplate.mutate,
+    isDeleting = _useDeleteTemplate.isPending;
+  var templates = templatesData.templates,
+    totalCount = templatesData.totalCount;
+  var template = manageTemplatePane.template,
+    isDelete = manageTemplatePane.isDelete;
+  var pageIndex = pageProperties.index,
+    pageSize = pageProperties.size;
+  var isSms = type === "sms";
+  var typeLabelSingular = isSms ? labelSingular : labelSingular.toLowerCase();
+  var emptyStateLabel = isSms ? label : label.toLowerCase();
+  var noDataProps = _objectSpread$1(_objectSpread$1({}, !isFilterApplied && {
+    primaryButtonProps: {
+      label: addText,
+      onClick: function onClick() {
+        return setManageTemplatePane(ramda.assoc("isOpen", true));
+      }
+    },
+    helpText: /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
+      i18nKey: "neetoMessageTemplate.template.linkToHelpArticle",
+      values: {
+        entity: label
+      },
+      components: {
+        Link: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
+          href: helpDocUrl,
+          target: "_blank",
+          variant: "link"
+        })
+      }
+    })
+  }), {}, {
+    title: isFilterApplied ? t("neetoMessageTemplate.template.filtersEmptyState", {
+      type: emptyStateLabel
+    }) : t("neetoMessageTemplate.template.emptyState", {
+      type: emptyStateLabel
+    })
+  });
+  var handleDelete = function handleDelete() {
+    deleteTemplate(template.id, {
+      onSuccess: onMutationSuccess,
+      onSettled: function onSettled() {
+        setManageTemplatePane(ramda.assoc("isDelete", false));
+      }
+    });
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [!ramda.isEmpty(templates) ? /*#__PURE__*/jsxRuntime.jsx(TableWrapper, {
+      hasPagination: totalCount > pageSize,
+      children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.DataTable, {
+        pageSize: pageSize,
+        totalCount: totalCount,
+        currentPage: pageIndex,
+        data: templates,
+        enableURLPagination: false,
+        loading: isLoading,
+        columns: buildTableColumnData(setManageTemplatePane, ownerId, onMutationSuccess),
+        onPageChange: function onPageChange(index) {
+          return setPageProperties({
+            index: index,
+            size: pageSize
+          });
+        }
+      })
+    }) : /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex h-full w-full items-center justify-center",
+      children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Empty, _objectSpread$1({}, noDataProps))
+    }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Alert, {
+      isOpen: isDelete,
+      isSubmitting: isDeleting,
+      submitButtonLabel: t("neetoMessageTemplate.template.delete"),
+      message: /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
+        i18nKey: "neetoMessageTemplate.template.templateDeleteConfirmation",
+        values: {
+          name: template.name
+        }
+      }),
+      title: t("neetoMessageTemplate.template.deleteTemplate", {
+        label: typeLabelSingular
+      }),
+      onClose: function onClose() {
+        return setManageTemplatePane(ramda.assoc("isDelete", false));
+      },
+      onSubmit: handleDelete
+    })]
+  });
+};
+
+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), true).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 MessageTemplates = function MessageTemplates(_ref) {
+  var _helpPopoverProps$hel;
+  var _ref$breadcrumbs = _ref.breadcrumbs,
+    breadcrumbs = _ref$breadcrumbs === void 0 ? [] : _ref$breadcrumbs,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? "" : _ref$type,
+    _ref$handleSubmitTest = _ref.handleSubmitTestTemplate,
+    handleSubmitTestTemplate = _ref$handleSubmitTest === void 0 ? neetoCist.noop : _ref$handleSubmitTest,
+    _ref$isTestMessageLoa = _ref.isTestMessageLoading,
+    isTestMessageLoading = _ref$isTestMessageLoa === void 0 ? false : _ref$isTestMessageLoa,
+    _ref$shouldIncludeTes = _ref.shouldIncludeTestTemplate,
+    shouldIncludeTestTemplate = _ref$shouldIncludeTes === void 0 ? true : _ref$shouldIncludeTes,
+    _ref$templateVariable = _ref.templateVariables,
+    templateVariables = _ref$templateVariable === void 0 ? {} : _ref$templateVariable,
+    _ref$ownerId = _ref.ownerId,
+    ownerId = _ref$ownerId === void 0 ? "" : _ref$ownerId,
+    _ref$isTestingTemplat = _ref.isTestingTemplateDisabled,
+    isTestingTemplateDisabled = _ref$isTestingTemplat === void 0 ? false : _ref$isTestingTemplat,
+    _ref$manageTemplatesP = _ref.manageTemplatesPaneCustomFields,
+    manageTemplatesPaneCustomFields = _ref$manageTemplatesP === void 0 ? null : _ref$manageTemplatesP,
+    _ref$onMutationSucces = _ref.onMutationSuccess,
+    onMutationSuccess = _ref$onMutationSucces === void 0 ? neetoCist.noop : _ref$onMutationSucces,
+    _ref$helpPopoverProps = _ref.helpPopoverProps,
+    helpPopoverProps = _ref$helpPopoverProps === void 0 ? {} : _ref$helpPopoverProps;
+  var _useState = react.useState(MESSAGE_TEMPLATE_INITIAL_STATE),
+    _useState2 = _slicedToArray(_useState, 2),
+    manageTemplatePane = _useState2[0],
+    setManageTemplatePane = _useState2[1];
+  var _useState3 = react.useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isFilterPaneOpen = _useState4[0],
+    setIsFilterPaneOpen = _useState4[1];
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useFilters = useFilters(),
+    searchKeywordProps = _useFilters.searchKeywordProps,
+    filterColumns = _useFilters.filterColumns,
+    searchTerm = _useFilters.searchTerm,
+    filters = _useFilters.filters,
+    setFilters = _useFilters.setFilters,
+    pageProperties = _useFilters.pageProperties,
+    setPageProperties = _useFilters.setPageProperties;
+  var _useTemplates = useTemplates({
+      type: type,
+      ownerId: ownerId,
+      filters: filters,
+      pageProperties: pageProperties
+    }),
+    isLoading = _useTemplates.isLoading,
+    templatesData = _useTemplates.templatesData,
+    createUpdateTemplate = _useTemplates.createUpdateTemplate;
+  var setTemplateState = adaptive_input.useTemplateStore(ramda.prop("setTemplateState"));
+  var _MESSAGE_TEMPLATES$ty = constants.MESSAGE_TEMPLATES[type],
+    label = _MESSAGE_TEMPLATES$ty.label,
+    value = _MESSAGE_TEMPLATES$ty.value,
+    addText = _MESSAGE_TEMPLATES$ty.addText,
+    labelSingular = _MESSAGE_TEMPLATES$ty.labelSingular,
+    editText = _MESSAGE_TEMPLATES$ty.editText;
+  var isFilterApplied = neetoCist.isNotEmpty(filters) || neetoCist.isNotEmpty(searchTerm);
+  var handleActionClick = function handleActionClick() {
+    return setManageTemplatePane(_objectSpread(_objectSpread({}, MESSAGE_TEMPLATE_INITIAL_STATE), {}, {
+      isOpen: true
+    }));
+  };
+  var handleChange = function handleChange(filters) {
+    setFilters(filters);
+    setPageProperties(constants.DEFAULT_PAGE_PROPERTIES);
+  };
+  var templatesCount = (templatesData === null || templatesData === void 0 ? void 0 : templatesData.totalCount) || 0;
+  react.useEffect(function () {
+    setTemplateState({
+      templateType: value
+    });
+  }, [value]);
+  var shouldShowTemplatesCount = !isLoading && (isFilterApplied || templatesCount > 0);
+  var helpDocUrl = (helpPopoverProps === null || helpPopoverProps === void 0 || (_helpPopoverProps$hel = helpPopoverProps.helpLinkProps) === null || _helpPopoverProps$hel === void 0 ? void 0 : _helpPopoverProps$hel.href) || "";
+  return /*#__PURE__*/jsxRuntime.jsxs(Container, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(NeetoHeader, {
+      breadcrumbs: breadcrumbs,
+      size: "small",
+      title: label,
+      actionBlock: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
+        "data-testid": "add-".concat(neetoCist.hyphenate(value), "-button"),
+        label: addText,
+        onClick: handleActionClick
+      }),
+      searchProps: shouldShowTemplatesCount && renderSearchProps(label, value),
+      titleHelpPopoverProps: helpPopoverProps && _objectSpread(_objectSpread({}, helpPopoverProps), {}, {
+        title: (helpPopoverProps === null || helpPopoverProps === void 0 ? void 0 : helpPopoverProps.title) || label
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(SubHeader, {
+      className: "mb-4",
+      leftActionBlock: shouldShowTemplatesCount && /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+        as: "h4",
+        children: t("neetoMessageTemplate.template.messageTemplatesWithCount", {
+          type: constants.MESSAGE_TYPES[type],
+          count: templatesCount
+        })
+      }),
+      rightActionBlock: /*#__PURE__*/jsxRuntime.jsx(SubHeader.RightBlock, {
+        dataProps: {
+          totalCount: isFilterApplied ? null : templatesCount
+        },
+        filterProps: {
+          columns: filterColumns,
+          isOpen: isFilterPaneOpen,
+          keyword: searchKeywordProps,
+          setIsOpen: setIsFilterPaneOpen,
+          onChange: handleChange
+        }
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(FiltersBar, {
+      columns: filterColumns,
+      keyword: searchKeywordProps,
+      setIsPaneOpen: setIsFilterPaneOpen,
+      onChange: handleChange
+    }), /*#__PURE__*/jsxRuntime.jsx(List, {
+      addText: addText,
+      helpDocUrl: helpDocUrl,
+      isFilterApplied: isFilterApplied,
+      isLoading: isLoading,
+      label: label,
+      labelSingular: labelSingular,
+      manageTemplatePane: manageTemplatePane,
+      onMutationSuccess: onMutationSuccess,
+      ownerId: ownerId,
+      pageProperties: pageProperties,
+      setManageTemplatePane: setManageTemplatePane,
+      setPageProperties: setPageProperties,
+      templatesData: templatesData,
+      type: type
+    }), /*#__PURE__*/jsxRuntime.jsx(AddEdit, {
+      addText: addText,
+      createUpdateTemplate: createUpdateTemplate,
+      editText: editText,
+      handleSubmitTestTemplate: handleSubmitTestTemplate,
+      isTestMessageLoading: isTestMessageLoading,
+      isTestingTemplateDisabled: isTestingTemplateDisabled,
+      manageTemplatePane: manageTemplatePane,
+      onMutationSuccess: onMutationSuccess,
+      shouldIncludeTestTemplate: shouldIncludeTestTemplate,
+      templateVariables: templateVariables,
+      customFields: manageTemplatesPaneCustomFields,
+      onClose: function onClose() {
+        return setManageTemplatePane(ramda.assoc("isOpen", false));
+      }
+    })]
+  });
+};
+
+module.exports = MessageTemplates;
+//# sourceMappingURL=MessageTemplates.js.map