@bigbinary/neeto-message-templates-frontend 0.7.0 → 0.7.2

package/dist/index.js

@@ -1,10 +1,11 @@
-import React, { useState, useRef, useEffect } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import { hyphenate, noop, isNotEmpty, renameKeys, findBy, capitalize, nullSafe } from '@bigbinary/neeto-cist';
 import { buildFiltersFromURL, Bar } from '@bigbinary/neeto-filters-frontend';
 import Container from '@bigbinary/neeto-molecules/Container';
 import NeetoHeader from '@bigbinary/neeto-molecules/Header';
 import SubHeader from '@bigbinary/neeto-molecules/SubHeader';
-import { Button, Typography, Pane, Table, NoData, Alert, Select, Textarea as Textarea$1, Label } from '@bigbinary/neetoui';
+import Button from '@bigbinary/neetoui/Button';
+import Typography from '@bigbinary/neetoui/Typography';
 import { isEmpty, equals, prop, includes, pick, omit, assoc, mergeAll, pluck, whereAny, reject, modify } from 'ramda';
 import { useTranslation, Trans } from 'react-i18next';
 import { t as t$1 } from 'i18next';
@@ -15,13 +16,26 @@ import { useQuery } from 'react-query';
 import axios from 'axios';
 import require$$0 from 'util';
 import { create } from 'zustand';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import Pane from '@bigbinary/neetoui/Pane';
 import { FormikEditor } from '@bigbinary/neeto-editor';
-import { Textarea, Input, Form as Form$2, ActionBlock, Select as Select$1 } from '@bigbinary/neetoui/formik';
+import NeetoUIForm from '@bigbinary/neetoui/formik/Form';
+import Input from '@bigbinary/neetoui/formik/Input';
+import ActionBlock from '@bigbinary/neetoui/formik/ActionBlock';
 import { useFormikContext, FieldArray } from 'formik';
+import Textarea from '@bigbinary/neetoui/formik/Textarea';
 import { isPhoneNumberValid } from '@bigbinary/neeto-molecules/PhoneNumber';
 import * as yup from 'yup';
 import TableWrapper from '@bigbinary/neeto-molecules/TableWrapper';
+import Alert from '@bigbinary/neetoui/Alert';
+import Table from '@bigbinary/neetoui/Table';
+import NoData from '@bigbinary/neetoui/NoData';
+import Spinner from '@bigbinary/neetoui/Spinner';
+import Select from '@bigbinary/neetoui/Select';
+import Textarea$1 from '@bigbinary/neetoui/Textarea';
+import Select$1 from '@bigbinary/neetoui/formik/Select';
 import { Delete } from '@bigbinary/neeto-icons';
+import Label from '@bigbinary/neetoui/Label';
 
 function _typeof$1(o) {
   "@babel/helpers - typeof";
@@ -140,6 +154,11 @@ var MESSAGE_TEMPLATES = {
     addText: t$1("neetoMessageTemplate.template.addWhatsappTemplate"),
     labelSingular: t$1("neetoMessageTemplate.template.whatsappTemplate"),
     editText: t$1("neetoMessageTemplate.template.editWhatsappTemplate")
+  },
+  api: {
+    label: t$1("neetoMessageTemplate.template.apiTemplates"),
+    value: "api_template",
+    addText: t$1("neetoMessageTemplate.api.addApiTemplate")
   }
 };
 var MESSAGE_TYPES = {
@@ -2263,8 +2282,8 @@ var QUERY_KEYS = {
   NEETO_MESSAGE_TEMPLATES: "neeto-message-templates"
 };
 
-function ownKeys$8(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$8(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$8(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$8(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$d(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$d(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$d(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$d(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var ownerIdValue = function ownerIdValue(ownerId) {
   return isEmpty(ownerId) ? undefined : ownerId;
 };
@@ -2279,7 +2298,7 @@ var useCreateTemplate = function useCreateTemplate(ownerId, options) {
       messageTemplate: messageTemplate,
       ownerId: ownerIdValue(ownerId)
     });
-  }, _objectSpread$8({
+  }, _objectSpread$d({
     keysToInvalidate: [QUERY_KEYS.NEETO_MESSAGE_TEMPLATES]
   }, options));
 };
@@ -2346,8 +2365,8 @@ var getMenuItems = function getMenuItems(_ref) {
   }];
 };
 
-function ownKeys$7(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$7(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$7(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$7(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$c(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$c(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$c(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$c(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,
@@ -2359,14 +2378,14 @@ var RowActions = function RowActions(_ref) {
     id = template.id;
   var templateType = useTemplateStore(prop("templateType"));
   var handleEditTemplate = function handleEditTemplate() {
-    return setManageTemplatePane(_objectSpread$7(_objectSpread$7({}, MESSAGE_TEMPLATE_INITIAL_STATE), {}, {
+    return setManageTemplatePane(_objectSpread$c(_objectSpread$c({}, MESSAGE_TEMPLATE_INITIAL_STATE), {}, {
       isOpen: true,
       isEdit: true,
       template: template
     }));
   };
   var handleDeleteTemplate = function handleDeleteTemplate() {
-    return setManageTemplatePane(_objectSpread$7(_objectSpread$7({}, MESSAGE_TEMPLATE_INITIAL_STATE), {}, {
+    return setManageTemplatePane(_objectSpread$c(_objectSpread$c({}, MESSAGE_TEMPLATE_INITIAL_STATE), {}, {
       isDelete: true,
       template: template
     }));
@@ -2383,7 +2402,7 @@ var RowActions = function RowActions(_ref) {
       onSuccess: onMutationSuccess
     });
   };
-  return /*#__PURE__*/React.createElement(MoreDropdown, {
+  return /*#__PURE__*/jsx(MoreDropdown, {
     dropdownButtonProps: {
       "data-cy": "message-template-dropdown"
     },
@@ -2399,10 +2418,10 @@ var RowActions = function RowActions(_ref) {
   });
 };
 
-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), !0).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; }
+function ownKeys$b(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$b(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$b(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$b(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var handleEditTemplate = function handleEditTemplate(setManageTemplatePane, template) {
-  return setManageTemplatePane(_objectSpread$6(_objectSpread$6({}, MESSAGE_TEMPLATE_INITIAL_STATE), {}, {
+  return setManageTemplatePane(_objectSpread$b(_objectSpread$b({}, MESSAGE_TEMPLATE_INITIAL_STATE), {}, {
     isOpen: true,
     isEdit: true,
     template: template
@@ -2426,20 +2445,21 @@ var buildTableColumnData$1 = function buildTableColumnData(setManageTemplatePane
     label: t$1("neetoMessageTemplate.template.name"),
     type: "text",
     render: function render(name, template) {
-      return /*#__PURE__*/React.createElement("div", {
-        className: "flex items-center justify-between gap-x-3"
-      }, /*#__PURE__*/React.createElement(Button, {
-        label: name,
-        style: "link",
-        onClick: function onClick() {
-          return handleEditTemplate(setManageTemplatePane, template);
-        }
-      }), /*#__PURE__*/React.createElement(RowActions, {
-        onMutationSuccess: onMutationSuccess,
-        ownerId: ownerId,
-        setManageTemplatePane: setManageTemplatePane,
-        template: template
-      }));
+      return /*#__PURE__*/jsxs("div", {
+        className: "flex items-center justify-between gap-x-3",
+        children: [/*#__PURE__*/jsx(Button, {
+          label: name,
+          style: "link",
+          onClick: function onClick() {
+            return handleEditTemplate(setManageTemplatePane, template);
+          }
+        }), /*#__PURE__*/jsx(RowActions, {
+          onMutationSuccess: onMutationSuccess,
+          ownerId: ownerId,
+          setManageTemplatePane: setManageTemplatePane,
+          template: template
+        })]
+      });
     }
   }, {
     dataIndex: "status",
@@ -2462,21 +2482,6 @@ var buildTableColumnData$1 = function buildTableColumnData(setManageTemplatePane
   }];
 };
 
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
   var target = {};
@@ -2507,6 +2512,8 @@ function _objectWithoutProperties(source, excluded) {
 }
 
 var _excluded = ["label", "name"];
+function ownKeys$a(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$a(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$a(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$a(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,
@@ -2518,7 +2525,7 @@ var FormikAdaptiveInput = function FormikAdaptiveInput(_ref) {
     event.preventDefault();
     submitForm();
   };
-  return /*#__PURE__*/React.createElement(Textarea, _extends({
+  return /*#__PURE__*/jsx(Textarea, _objectSpread$a({
     label: label,
     name: name,
     className: "neeto-message-templates-nano-adaptive-input",
@@ -2941,6 +2948,8 @@ try {
 
 var _regeneratorRuntime = /*@__PURE__*/getDefaultExportFromCjs(regenerator);
 
+function ownKeys$9(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$9(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$9(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$9(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var TestMessage = function TestMessage(_ref) {
   var isEmailTemplate = _ref.isEmailTemplate,
     handleSubmitTestTemplate = _ref.handleSubmitTestTemplate,
@@ -3001,34 +3010,38 @@ var TestMessage = function TestMessage(_ref) {
     event.preventDefault();
     !isTestTemplateButtonDisabled && handleSubmitTestTemplate(values);
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: "neeto-ui-flex left-0 flex items-start gap-x-2"
-  }, /*#__PURE__*/React.createElement(Input, _extends({
-    "data-cy": "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__*/React.createElement(Button, {
-    "data-cy": "message-template-test-button",
-    disabled: isTestTemplateButtonDisabled,
-    loading: isTestMessageLoading,
-    style: "primary",
-    type: "button",
-    label: isEmailTemplate ? t("neetoMessageTemplate.template.sendTestEmail") : t("neetoMessageTemplate.template.sendTestSms"),
-    onClick: function onClick() {
-      return handleSubmitTestTemplate(values);
-    }
-  })), !isEmailTemplate && /*#__PURE__*/React.createElement(Typography, {
-    style: "body2"
-  }, t("neetoMessageTemplate.sendMessage.testSmsNote")), customFields);
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsxs("div", {
+      className: "neeto-ui-flex left-0 flex items-start gap-x-2",
+      children: [/*#__PURE__*/jsx(Input, _objectSpread$9(_objectSpread$9({
+        "data-cy": "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__*/jsx(Button, {
+        "data-cy": "message-template-test-button",
+        disabled: isTestTemplateButtonDisabled,
+        loading: isTestMessageLoading,
+        style: "primary",
+        type: "button",
+        label: isEmailTemplate ? t("neetoMessageTemplate.template.sendTestEmail") : t("neetoMessageTemplate.template.sendTestSms"),
+        onClick: function onClick() {
+          return handleSubmitTestTemplate(values);
+        }
+      })]
+    }), !isEmailTemplate && /*#__PURE__*/jsx(Typography, {
+      style: "body2",
+      children: t("neetoMessageTemplate.sendMessage.testSmsNote")
+    }), customFields]
+  });
 };
 
-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), !0).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; }
+function ownKeys$8(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$8(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$8(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$8(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Form$1 = function Form(_ref) {
   var onClose = _ref.onClose,
     isEdit = _ref.isEdit,
@@ -3049,7 +3062,7 @@ var Form$1 = function Form(_ref) {
   var templateType = useTemplateStore(prop("templateType"));
   var isEmailTemplate = equals(templateType, "email_template");
   var isTestTemplateVisible = includes(templateType, ["sms_template", "email_template"]) && shouldIncludeTestTemplate;
-  var _ref2 = isEmailTemplate ? [_objectSpread$5(_objectSpread$5({}, EMAIL_TEMPLATE_INITIAL_VALUES), pick(["name", "body", "subject", "active"], template)), EMAIL_TEMPLATE_FORM_SCHEMA] : [_objectSpread$5(_objectSpread$5({}, SMS_TEMPLATE_INITIAL_VALUES), pick(["name", "body", "active"], template)), SMS_TEMPLATE_FORM_VALIDATION_SCHEMA],
+  var _ref2 = isEmailTemplate ? [_objectSpread$8(_objectSpread$8({}, EMAIL_TEMPLATE_INITIAL_VALUES), pick(["name", "body", "subject", "active"], template)), EMAIL_TEMPLATE_FORM_SCHEMA] : [_objectSpread$8(_objectSpread$8({}, SMS_TEMPLATE_INITIAL_VALUES), pick(["name", "body", "active"], template)), SMS_TEMPLATE_FORM_VALIDATION_SCHEMA],
     _ref3 = _slicedToArray(_ref2, 2),
     TEMPLATE_INITIAL_VALUES = _ref3[0],
     TEMPLATE_FORM_SCHEMA = _ref3[1];
@@ -3072,7 +3085,7 @@ var Form$1 = function Form(_ref) {
     });
   };
   var messageBodyLabel = isEmailTemplate ? t("neetoMessageTemplate.template.emailBody") : t("neetoMessageTemplate.template.smsBody");
-  return /*#__PURE__*/React.createElement(Form$2, {
+  return /*#__PURE__*/jsxs(NeetoUIForm, {
     formProps: {
       noValidate: true,
       className: "flex w-full flex-col gap-y-4 pb-6"
@@ -3083,43 +3096,45 @@ var Form$1 = function Form(_ref) {
       validateOnBlur: true,
       validateOnChange: true,
       onSubmit: handleSubmit
-    }
-  }, /*#__PURE__*/React.createElement(Input, {
-    required: true,
-    label: t("neetoMessageTemplate.template.templateName"),
-    name: "name",
-    ref: setInitialFocusField
-  }), isEmailTemplate && /*#__PURE__*/React.createElement(FormikAdaptiveInput, {
-    required: true,
-    label: t("neetoMessageTemplate.template.emailSubject"),
-    name: "subject"
-  }), /*#__PURE__*/React.createElement(FormikEditor, {
-    hideSlashCommands: true,
-    required: true,
-    contentClassName: "max-h-40",
-    defaults: isEmailTemplate ? undefined : [],
-    label: messageBodyLabel,
-    name: "body",
-    ref: editorRef,
-    rows: DEFAULT_EDITOR_ROW_COUNT,
-    variables: templateVariables
-  }), isTestTemplateVisible && /*#__PURE__*/React.createElement(TestMessage, {
-    customFields: customFields,
-    handleSubmitTestTemplate: handleSubmitTestTemplate,
-    isEmailTemplate: isEmailTemplate,
-    isTestMessageLoading: isTestMessageLoading,
-    isTestingTemplateDisabled: isTestingTemplateDisabled
-  }), /*#__PURE__*/React.createElement(Pane.Footer, {
-    className: "absolute bottom-0 left-0"
-  }, /*#__PURE__*/React.createElement(ActionBlock, {
-    cancelButtonProps: {
-      "data-cy": "message-template-reset-button",
-      onClick: onClose
     },
-    submitButtonProps: {
-      "data-cy": "message-template-submit-button"
-    }
-  })));
+    children: [/*#__PURE__*/jsx(Input, {
+      required: true,
+      label: t("neetoMessageTemplate.template.templateName"),
+      name: "name",
+      ref: setInitialFocusField
+    }), isEmailTemplate && /*#__PURE__*/jsx(FormikAdaptiveInput, {
+      required: true,
+      label: t("neetoMessageTemplate.template.emailSubject"),
+      name: "subject"
+    }), /*#__PURE__*/jsx(FormikEditor, {
+      hideSlashCommands: true,
+      required: true,
+      contentClassName: "max-h-40",
+      defaults: isEmailTemplate ? undefined : [],
+      label: messageBodyLabel,
+      name: "body",
+      ref: editorRef,
+      rows: DEFAULT_EDITOR_ROW_COUNT,
+      variables: templateVariables
+    }), isTestTemplateVisible && /*#__PURE__*/jsx(TestMessage, {
+      customFields: customFields,
+      handleSubmitTestTemplate: handleSubmitTestTemplate,
+      isEmailTemplate: isEmailTemplate,
+      isTestMessageLoading: isTestMessageLoading,
+      isTestingTemplateDisabled: isTestingTemplateDisabled
+    }), /*#__PURE__*/jsx(Pane.Footer, {
+      className: "absolute bottom-0 left-0",
+      children: /*#__PURE__*/jsx(ActionBlock, {
+        cancelButtonProps: {
+          "data-cy": "message-template-reset-button",
+          onClick: onClose
+        },
+        submitButtonProps: {
+          "data-cy": "message-template-submit-button"
+        }
+      })
+    })]
+  });
 };
 
 var AddEdit = function AddEdit(_ref) {
@@ -3143,27 +3158,33 @@ var AddEdit = function AddEdit(_ref) {
     isEdit = manageTemplatePane.isEdit,
     template = manageTemplatePane.template;
   var label = isEdit ? editText : addText;
-  return /*#__PURE__*/React.createElement(Pane, {
+  return /*#__PURE__*/jsxs(Pane, {
     isOpen: isOpen,
     onClose: onClose,
-    initialFocusRef: initialFocusField
-  }, /*#__PURE__*/React.createElement(Pane.Header, null, /*#__PURE__*/React.createElement(Typography, {
-    style: "h2",
-    weight: "semibold"
-  }, label)), /*#__PURE__*/React.createElement(Pane.Body, null, /*#__PURE__*/React.createElement(Form$1, {
-    createUpdateTemplate: createUpdateTemplate,
-    customFields: customFields,
-    handleSubmitTestTemplate: handleSubmitTestTemplate,
-    isEdit: isEdit,
-    isTestMessageLoading: isTestMessageLoading,
-    isTestingTemplateDisabled: isTestingTemplateDisabled,
-    onClose: onClose,
-    onMutationSuccess: onMutationSuccess,
-    setInitialFocusField: setInitialFocusField,
-    shouldIncludeTestTemplate: shouldIncludeTestTemplate,
-    template: template,
-    templateVariables: templateVariables
-  })));
+    initialFocusRef: initialFocusField,
+    children: [/*#__PURE__*/jsx(Pane.Header, {
+      children: /*#__PURE__*/jsx(Typography, {
+        style: "h2",
+        weight: "semibold",
+        children: label
+      })
+    }), /*#__PURE__*/jsx(Pane.Body, {
+      children: /*#__PURE__*/jsx(Form$1, {
+        createUpdateTemplate: createUpdateTemplate,
+        customFields: customFields,
+        handleSubmitTestTemplate: handleSubmitTestTemplate,
+        isEdit: isEdit,
+        isTestMessageLoading: isTestMessageLoading,
+        isTestingTemplateDisabled: isTestingTemplateDisabled,
+        onClose: onClose,
+        onMutationSuccess: onMutationSuccess,
+        setInitialFocusField: setInitialFocusField,
+        shouldIncludeTestTemplate: shouldIncludeTestTemplate,
+        template: template,
+        templateVariables: templateVariables
+      })
+    })]
+  });
 };
 
 function _arrayWithoutHoles(arr) {
@@ -3255,6 +3276,8 @@ var useTemplates = function useTemplates(_ref) {
   };
 };
 
+function ownKeys$7(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$7(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$7(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$7(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,
@@ -3291,62 +3314,66 @@ var List = function List(_ref) {
       }
     });
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, !isEmpty(templates) ? /*#__PURE__*/React.createElement(TableWrapper, {
-    hasPagination: totalCount > pageSize
-  }, /*#__PURE__*/React.createElement(Table, {
-    totalCount: totalCount,
-    fixedHeight: true,
-    currentPageNumber: pageIndex,
-    defaultPageSize: pageSize,
-    loading: isLoading,
-    rowData: templates,
-    scroll: {
-      x: "100%"
-    },
-    columnData: buildTableColumnData$1(setManageTemplatePane, ownerId, onMutationSuccess),
-    handlePageChange: function handlePageChange(index, size) {
-      return setPageProperties({
-        index: index,
-        size: size
-      });
-    }
-  })) : /*#__PURE__*/React.createElement("div", {
-    className: "flex h-full w-full items-center justify-center"
-  }, /*#__PURE__*/React.createElement(NoData, _extends({}, !isFilterApplied && {
-    primaryButtonProps: {
-      label: addText,
-      onClick: function onClick() {
-        return setManageTemplatePane(assoc("isOpen", true));
-      }
-    }
-  }, {
-    title: isFilterApplied ? t("neetoMessageTemplate.template.filtersEmptyState", {
-      type: emptyStateLabel
-    }) : t("neetoMessageTemplate.template.emptyState", {
-      type: emptyStateLabel
-    })
-  }))), /*#__PURE__*/React.createElement(Alert, {
-    isOpen: isDelete,
-    isSubmitting: isDeleting,
-    submitButtonLabel: t("neetoMessageTemplate.template.delete"),
-    message: /*#__PURE__*/React.createElement(Trans, {
-      i18nKey: "neetoMessageTemplate.template.templateDeleteConfirmation",
-      values: {
-        name: template.name
-      }
-    }),
-    title: t("neetoMessageTemplate.template.deleteTemplate", {
-      label: typeLabelSingular
-    }),
-    onClose: function onClose() {
-      return setManageTemplatePane(assoc("isDelete", false));
-    },
-    onSubmit: handleDelete
-  }));
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [!isEmpty(templates) ? /*#__PURE__*/jsx(TableWrapper, {
+      hasPagination: totalCount > pageSize,
+      children: /*#__PURE__*/jsx(Table, {
+        totalCount: totalCount,
+        fixedHeight: true,
+        currentPageNumber: pageIndex,
+        defaultPageSize: pageSize,
+        loading: isLoading,
+        rowData: templates,
+        scroll: {
+          x: "100%"
+        },
+        columnData: buildTableColumnData$1(setManageTemplatePane, ownerId, onMutationSuccess),
+        handlePageChange: function handlePageChange(index, size) {
+          return setPageProperties({
+            index: index,
+            size: size
+          });
+        }
+      })
+    }) : /*#__PURE__*/jsx("div", {
+      className: "flex h-full w-full items-center justify-center",
+      children: /*#__PURE__*/jsx(NoData, _objectSpread$7(_objectSpread$7({}, !isFilterApplied && {
+        primaryButtonProps: {
+          label: addText,
+          onClick: function onClick() {
+            return setManageTemplatePane(assoc("isOpen", true));
+          }
+        }
+      }), {}, {
+        title: isFilterApplied ? t("neetoMessageTemplate.template.filtersEmptyState", {
+          type: emptyStateLabel
+        }) : t("neetoMessageTemplate.template.emptyState", {
+          type: emptyStateLabel
+        })
+      }))
+    }), /*#__PURE__*/jsx(Alert, {
+      isOpen: isDelete,
+      isSubmitting: isDeleting,
+      submitButtonLabel: t("neetoMessageTemplate.template.delete"),
+      message: /*#__PURE__*/jsx(Trans, {
+        i18nKey: "neetoMessageTemplate.template.templateDeleteConfirmation",
+        values: {
+          name: template.name
+        }
+      }),
+      title: t("neetoMessageTemplate.template.deleteTemplate", {
+        label: typeLabelSingular
+      }),
+      onClose: function onClose() {
+        return setManageTemplatePane(assoc("isDelete", false));
+      },
+      onSubmit: handleDelete
+    })]
+  });
 };
 
-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), !0).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; }
+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), !0).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 MessageTemplates = function MessageTemplates(_ref) {
   var _ref$breadcrumbs = _ref.breadcrumbs,
     breadcrumbs = _ref$breadcrumbs === void 0 ? [] : _ref$breadcrumbs,
@@ -3404,7 +3431,7 @@ var MessageTemplates = function MessageTemplates(_ref) {
     editText = _MESSAGE_TEMPLATES$ty.editText;
   var isFilterApplied = isNotEmpty(filters) || isNotEmpty(searchTerm);
   var handleActionClick = function handleActionClick() {
-    return setManageTemplatePane(_objectSpread$4(_objectSpread$4({}, MESSAGE_TEMPLATE_INITIAL_STATE), {}, {
+    return setManageTemplatePane(_objectSpread$6(_objectSpread$6({}, MESSAGE_TEMPLATE_INITIAL_STATE), {}, {
       isOpen: true
     }));
   };
@@ -3418,70 +3445,116 @@ var MessageTemplates = function MessageTemplates(_ref) {
       templateType: value
     });
   }, [value]);
-  return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(NeetoHeader, {
-    breadcrumbs: breadcrumbs,
-    searchProps: renderSearchProps(label, value),
-    size: "small",
-    title: label,
-    actionBlock: /*#__PURE__*/React.createElement(Button, {
-      "data-cy": "add-".concat(hyphenate(value), "-button"),
-      label: addText,
-      onClick: handleActionClick
-    })
-  }), /*#__PURE__*/React.createElement(SubHeader, {
-    leftActionBlock: /*#__PURE__*/React.createElement(Typography, {
-      component: "h4"
-    }, t("neetoMessageTemplate.template.messageTemplatesWithCount", {
-      type: MESSAGE_TYPES[type],
-      count: templatesCount
-    })),
-    rightActionBlock: /*#__PURE__*/React.createElement(SubHeader.RightBlock, {
-      dataProps: {
-        totalCount: isFilterApplied ? null : templatesCount
-      },
-      filterProps: {
-        columns: filterColumns,
-        isOpen: isFilterPaneOpen,
-        keyword: searchKeywordProps,
-        setIsOpen: setIsFilterPaneOpen,
-        onChange: handleChange
+  return /*#__PURE__*/jsxs(Container, {
+    children: [/*#__PURE__*/jsx(NeetoHeader, {
+      breadcrumbs: breadcrumbs,
+      searchProps: renderSearchProps(label, value),
+      size: "small",
+      title: label,
+      actionBlock: /*#__PURE__*/jsx(Button, {
+        "data-cy": "add-".concat(hyphenate(value), "-button"),
+        label: addText,
+        onClick: handleActionClick
+      })
+    }), /*#__PURE__*/jsx(SubHeader, {
+      leftActionBlock: /*#__PURE__*/jsx(Typography, {
+        component: "h4",
+        children: t("neetoMessageTemplate.template.messageTemplatesWithCount", {
+          type: MESSAGE_TYPES[type],
+          count: templatesCount
+        })
+      }),
+      rightActionBlock: /*#__PURE__*/jsx(SubHeader.RightBlock, {
+        dataProps: {
+          totalCount: isFilterApplied ? null : templatesCount
+        },
+        filterProps: {
+          columns: filterColumns,
+          isOpen: isFilterPaneOpen,
+          keyword: searchKeywordProps,
+          setIsOpen: setIsFilterPaneOpen,
+          onChange: handleChange
+        }
+      })
+    }), /*#__PURE__*/jsx(Bar, {
+      columns: filterColumns,
+      keyword: searchKeywordProps,
+      setIsPaneOpen: setIsFilterPaneOpen,
+      onChange: handleChange
+    }), /*#__PURE__*/jsx(List, {
+      addText: addText,
+      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__*/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(assoc("isOpen", false));
       }
-    })
-  }), /*#__PURE__*/React.createElement(Bar, {
-    columns: filterColumns,
-    keyword: searchKeywordProps,
-    setIsPaneOpen: setIsFilterPaneOpen,
-    onChange: handleChange
-  }), /*#__PURE__*/React.createElement(List, {
-    addText: addText,
-    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__*/React.createElement(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(assoc("isOpen", false));
-    }
-  }));
+    })]
+  });
+};
+
+var NoDataPage = function NoDataPage(_ref) {
+  var type = _ref.type,
+    addNewTemplateRoute = _ref.addNewTemplateRoute,
+    _ref$helpDocUrl = _ref.helpDocUrl,
+    helpDocUrl = _ref$helpDocUrl === void 0 ? "" : _ref$helpDocUrl;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _MESSAGE_TEMPLATES$ty = MESSAGE_TEMPLATES[type],
+    addText = _MESSAGE_TEMPLATES$ty.addText,
+    label = _MESSAGE_TEMPLATES$ty.label;
+  if (type === MESSAGE_TYPES.whatsapp) {
+    return /*#__PURE__*/jsx("div", {
+      className: "flex h-full w-full items-center justify-center px-6 text-center",
+      children: /*#__PURE__*/jsxs(Typography, {
+        children: [t("neetoMessageTemplate.template.emptyState", {
+          type: t("neetoMessageTemplate.template.whatsappTemplates")
+        }), " ", helpDocUrl && /*#__PURE__*/jsx(Trans, {
+          i18nKey: "neetoMessageTemplate.template.whatsapp.helpDocText",
+          components: {
+            Link: /*#__PURE__*/jsx(Button, {
+              href: helpDocUrl,
+              size: "large",
+              style: "link"
+            })
+          }
+        })]
+      })
+    });
+  }
+  return /*#__PURE__*/jsxs("div", {
+    className: "flex h-full w-full flex-col items-center justify-center",
+    children: [/*#__PURE__*/jsx(Typography, {
+      children: t("neetoMessageTemplate.template.emptyState", {
+        type: label
+      })
+    }), /*#__PURE__*/jsx(Button, {
+      className: "mt-4",
+      label: addText,
+      to: addNewTemplateRoute
+    })]
+  });
 };
 
 var formatEditorContent = function formatEditorContent(value) {
@@ -3508,12 +3581,12 @@ var WHATSAPP_MESSAGE_FORM_VALIDATIONS_SCHEMA = yup.object().shape({
   })
 });
 
-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), !0).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 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), !0).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 EmailAndSms = function EmailAndSms(_ref) {
   var onClose = _ref.onClose,
     templates = _ref.templates,
-    setInitialFocusField = _ref.setInitialFocusField,
+    setFocusField = _ref.setFocusField,
     templateVariables = _ref.templateVariables,
     customFields = _ref.customFields,
     customFieldsInitialValues = _ref.customFieldsInitialValues,
@@ -3529,9 +3602,9 @@ var EmailAndSms = function EmailAndSms(_ref) {
     INITIAL_VALUES = _ref3[0],
     SEND_MESSAGE_FORM_SCHEMA = _ref3[1];
   var updatedInitialValues = mergeAll([INITIAL_VALUES, customFieldsInitialValues]);
-  var updatedValidationSchema = yup.object().shape(_objectSpread$3(_objectSpread$3({}, SEND_MESSAGE_FORM_SCHEMA === null || SEND_MESSAGE_FORM_SCHEMA === void 0 ? void 0 : SEND_MESSAGE_FORM_SCHEMA.fields), customFieldsValidationSchema === null || customFieldsValidationSchema === void 0 ? void 0 : customFieldsValidationSchema.fields));
+  var updatedValidationSchema = yup.object().shape(_objectSpread$5(_objectSpread$5({}, SEND_MESSAGE_FORM_SCHEMA === null || SEND_MESSAGE_FORM_SCHEMA === void 0 ? void 0 : SEND_MESSAGE_FORM_SCHEMA.fields), customFieldsValidationSchema === null || customFieldsValidationSchema === void 0 ? void 0 : customFieldsValidationSchema.fields));
   var initialValueKeys = Object.keys(INITIAL_VALUES);
-  return /*#__PURE__*/React.createElement(Form$2, {
+  return /*#__PURE__*/jsx(NeetoUIForm, {
     formProps: {
       noValidate: true,
       className: "flex w-full flex-col gap-y-4 pb-6"
@@ -3540,61 +3613,65 @@ var EmailAndSms = function EmailAndSms(_ref) {
       initialValues: updatedInitialValues,
       validationSchema: updatedValidationSchema,
       onSubmit: handleSubmit
+    },
+    children: function children(_ref4) {
+      var setValues = _ref4.setValues,
+        values = _ref4.values;
+      var handleTemplateChange = function handleTemplateChange(value) {
+        if (!value) return;
+        var customFieldValues = omit(initialValueKeys, values);
+        var template = findBy({
+          id: value === null || value === void 0 ? void 0 : value.value
+        }, templates);
+        setValues(_objectSpread$5(_objectSpread$5({}, template), customFieldValues));
+        editorRef.current.editor.commands.setContent(template.body);
+      };
+      return /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx(Select, {
+          isClearable: true,
+          isSearchable: true,
+          innerRef: setFocusField,
+          label: t("neetoMessageTemplate.template.title"),
+          options: renameKeys({
+            name: "label",
+            id: "value"
+          }, templates),
+          placeholder: t("neetoMessageTemplate.sendMessage.selectTemplate"),
+          onChange: handleTemplateChange
+        }), customFields, isEmailTemplate && /*#__PURE__*/jsx(Input, {
+          required: true,
+          label: t("neetoMessageTemplate.template.subject"),
+          name: "subject"
+        }), /*#__PURE__*/jsx(FormikEditor, {
+          hideSlashCommands: true,
+          required: true,
+          contentClassName: "max-h-40",
+          defaults: isEmailTemplate ? undefined : [],
+          label: t("neetoMessageTemplate.template.body"),
+          name: "body",
+          ref: editorRef,
+          rows: DEFAULT_EDITOR_ROW_COUNT,
+          variables: templateVariables
+        }), /*#__PURE__*/jsx(Pane.Footer, {
+          className: "absolute bottom-0 left-0",
+          children: /*#__PURE__*/jsx(ActionBlock, {
+            cancelButtonProps: {
+              "data-cy": "message-template-cancel-button",
+              onClick: onClose
+            },
+            submitButtonProps: {
+              "data-cy": "message-template-send-button",
+              label: t("neetoMessageTemplate.template.send")
+            }
+          })
+        })]
+      });
     }
-  }, function (_ref4) {
-    var setValues = _ref4.setValues,
-      values = _ref4.values;
-    var handleTemplateChange = function handleTemplateChange(value) {
-      if (!value) return;
-      var customFieldValues = omit(initialValueKeys, values);
-      var template = findBy({
-        id: value === null || value === void 0 ? void 0 : value.value
-      }, templates);
-      setValues(_objectSpread$3(_objectSpread$3({}, template), customFieldValues));
-      editorRef.current.editor.commands.setContent(template.body);
-    };
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Select, {
-      isClearable: true,
-      isSearchable: true,
-      innerRef: setInitialFocusField,
-      label: t("neetoMessageTemplate.template.title"),
-      options: renameKeys({
-        name: "label",
-        id: "value"
-      }, templates),
-      placeholder: t("neetoMessageTemplate.sendMessage.selectTemplate"),
-      onChange: handleTemplateChange
-    }), customFields, isEmailTemplate && /*#__PURE__*/React.createElement(Input, {
-      required: true,
-      label: t("neetoMessageTemplate.template.subject"),
-      name: "subject"
-    }), /*#__PURE__*/React.createElement(FormikEditor, {
-      hideSlashCommands: true,
-      required: true,
-      contentClassName: "max-h-40",
-      defaults: isEmailTemplate ? undefined : [],
-      label: t("neetoMessageTemplate.template.body"),
-      name: "body",
-      ref: editorRef,
-      rows: DEFAULT_EDITOR_ROW_COUNT,
-      variables: templateVariables
-    }), /*#__PURE__*/React.createElement(Pane.Footer, {
-      className: "absolute bottom-0 left-0"
-    }, /*#__PURE__*/React.createElement(ActionBlock, {
-      cancelButtonProps: {
-        "data-cy": "message-template-cancel-button",
-        onClick: onClose
-      },
-      submitButtonProps: {
-        "data-cy": "message-template-send-button",
-        label: t("neetoMessageTemplate.template.send")
-      }
-    })));
   });
 };
 
-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), !0).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; }
+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), !0).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 Whatsapp = function Whatsapp(_ref) {
   var _templates$, _templates$2, _templates$3, _templates$4;
   var templates = _ref.templates,
@@ -3602,9 +3679,7 @@ var Whatsapp = function Whatsapp(_ref) {
     handleSubmit = _ref.handleSubmit,
     customFields = _ref.customFields,
     customFieldsInitialValues = _ref.customFieldsInitialValues,
-    customFieldsValidationSchema = _ref.customFieldsValidationSchema,
-    _ref$helpDocUrl = _ref.helpDocUrl,
-    helpDocUrl = _ref$helpDocUrl === void 0 ? "" : _ref$helpDocUrl;
+    customFieldsValidationSchema = _ref.customFieldsValidationSchema;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var getInitialVariableComponents = function getInitialVariableComponents(variables) {
@@ -3629,27 +3704,9 @@ var Whatsapp = function Whatsapp(_ref) {
     variableContents: getInitialVariableComponents((_templates$4 = templates[0]) === null || _templates$4 === void 0 ? void 0 : _templates$4.variableCount)
   };
   var updatedInitialValues = mergeAll([initialFormValues, customFieldsInitialValues]);
-  var updatedValidationSchema = yup.object().shape(_objectSpread$2(_objectSpread$2({}, WHATSAPP_MESSAGE_FORM_VALIDATIONS_SCHEMA === null || WHATSAPP_MESSAGE_FORM_VALIDATIONS_SCHEMA === void 0 ? void 0 : WHATSAPP_MESSAGE_FORM_VALIDATIONS_SCHEMA.fields), customFieldsValidationSchema === null || customFieldsValidationSchema === void 0 ? void 0 : customFieldsValidationSchema.fields));
-  if (isEmpty(templates)) {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Typography, null, t("neetoMessageTemplate.template.emptyState", {
-      type: t("neetoMessageTemplate.template.whatsappTemplates")
-    }), " ", helpDocUrl && /*#__PURE__*/React.createElement(Trans, {
-      i18nKey: "neetoMessageTemplate.template.whatsapp.helpDocText",
-      components: {
-        Link: /*#__PURE__*/React.createElement(Button, {
-          size: "large",
-          style: "link",
-          to: helpDocUrl
-        })
-      }
-    })), /*#__PURE__*/React.createElement(Pane.Footer, {
-      className: "absolute bottom-0 left-0"
-    }, /*#__PURE__*/React.createElement(Button, {
-      label: t("neetoMessageTemplate.template.close"),
-      onClick: onClose
-    })));
-  }
-  return /*#__PURE__*/React.createElement(Form$2, {
+  var updatedValidationSchema = yup.object().shape(_objectSpread$4(_objectSpread$4({}, WHATSAPP_MESSAGE_FORM_VALIDATIONS_SCHEMA === null || WHATSAPP_MESSAGE_FORM_VALIDATIONS_SCHEMA === void 0 ? void 0 : WHATSAPP_MESSAGE_FORM_VALIDATIONS_SCHEMA.fields), customFieldsValidationSchema === null || customFieldsValidationSchema === void 0 ? void 0 : customFieldsValidationSchema.fields));
+  var initialValueKeys = Object.keys(initialFormValues);
+  return /*#__PURE__*/jsx(NeetoUIForm, {
     formProps: {
       noValidate: true,
       className: "flex w-full flex-col gap-y-4 pb-6"
@@ -3658,76 +3715,96 @@ var Whatsapp = function Whatsapp(_ref) {
       initialValues: updatedInitialValues,
       validationSchema: updatedValidationSchema,
       onSubmit: handleSubmit
-    }
-  }, function (_ref3) {
-    var values = _ref3.values,
-      setValues = _ref3.setValues;
-    var handleTemplateChange = function handleTemplateChange(value) {
-      if (!value) return;
-      var template = findBy({
-        id: value === null || value === void 0 ? void 0 : value.value
-      }, templates);
-      setValues({
-        selectedTemplate: {
-          label: template.name,
-          value: template.id
-        },
-        templateMessage: getTemplateMessage(template.components),
-        variableContents: getInitialVariableComponents(template.variableCount)
-      });
-    };
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Select$1, {
-      required: true,
-      defaultValue: initialFormValues.selectedTemplate,
-      label: t("neetoMessageTemplate.template.title"),
-      name: "selectedTemplate",
-      options: renameKeys({
-        name: "label",
-        id: "value"
-      }, templates),
-      onChange: handleTemplateChange
-    }), customFields, /*#__PURE__*/React.createElement(Textarea$1, {
-      disabled: true,
-      nakedTextarea: true,
-      label: t("neetoMessageTemplate.template.preview"),
-      value: values.templateMessage
-    }), isNotEmpty(values.variableContents) && /*#__PURE__*/React.createElement(React.Fragment, null, Object.keys(values.variableContents).map(function (group) {
-      return /*#__PURE__*/React.createElement("div", {
-        className: "flex flex-col gap-y-2",
-        key: group
-      }, /*#__PURE__*/React.createElement(Typography, {
-        style: "h4"
-      }, t("neetoMessageTemplate.template.resolveVariable", {
-        type: capitalize(group)
-      })), values.variableContents[group].map(function (_, index) {
-        return /*#__PURE__*/React.createElement("div", {
-          key: "".concat(group, "-").concat(index)
-        }, /*#__PURE__*/React.createElement(Input, {
+    },
+    children: function children(_ref3) {
+      var values = _ref3.values,
+        setValues = _ref3.setValues;
+      var handleTemplateChange = function handleTemplateChange(value) {
+        if (!value) return;
+        var template = findBy({
+          id: value === null || value === void 0 ? void 0 : value.value
+        }, templates);
+        var customFieldValues = omit(initialValueKeys, values);
+        setValues(_objectSpread$4({
+          selectedTemplate: {
+            label: template.name,
+            value: template.id
+          },
+          templateMessage: getTemplateMessage(template.components),
+          variableContents: getInitialVariableComponents(template.variableCount)
+        }, customFieldValues));
+      };
+      return /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx(Select$1, {
           required: true,
-          key: "".concat(group, "-").concat(index),
-          label: "{{".concat(index + 1, "}}"),
-          name: "variableContents.".concat(group, ".").concat(index)
-        }));
-      }));
-    })), /*#__PURE__*/React.createElement(Pane.Footer, {
-      className: "absolute bottom-0 left-0"
-    }, /*#__PURE__*/React.createElement(ActionBlock, {
-      cancelButtonProps: {
-        "data-cy": "message-template-cancel-button",
-        onClick: onClose
-      },
-      submitButtonProps: {
-        "data-cy": "message-template-send-button",
-        label: t("neetoMessageTemplate.template.send")
-      }
-    })));
+          defaultValue: initialFormValues.selectedTemplate,
+          label: t("neetoMessageTemplate.template.title"),
+          name: "selectedTemplate",
+          options: renameKeys({
+            name: "label",
+            id: "value"
+          }, templates),
+          onChange: handleTemplateChange
+        }), customFields, /*#__PURE__*/jsx(Textarea$1, {
+          disabled: true,
+          nakedTextarea: true,
+          label: t("neetoMessageTemplate.template.preview"),
+          value: values.templateMessage
+        }), isNotEmpty(values.variableContents) && /*#__PURE__*/jsx(Fragment, {
+          children: Object.keys(values.variableContents).map(function (group) {
+            return /*#__PURE__*/jsxs("div", {
+              className: "flex flex-col gap-y-2",
+              children: [/*#__PURE__*/jsx(Typography, {
+                style: "h4",
+                children: t("neetoMessageTemplate.template.resolveVariable", {
+                  type: capitalize(group)
+                })
+              }), values.variableContents[group].map(function (_, index) {
+                return /*#__PURE__*/jsx("div", {
+                  children: /*#__PURE__*/jsx(Input, {
+                    required: true,
+                    label: "{{".concat(index + 1, "}}"),
+                    name: "variableContents.".concat(group, ".").concat(index)
+                  }, "".concat(group, "-").concat(index))
+                }, "".concat(group, "-").concat(index));
+              })]
+            }, group);
+          })
+        }), /*#__PURE__*/jsx(Pane.Footer, {
+          className: "absolute bottom-0 left-0",
+          children: /*#__PURE__*/jsx(ActionBlock, {
+            cancelButtonProps: {
+              "data-cy": "message-template-cancel-button",
+              onClick: onClose
+            },
+            submitButtonProps: {
+              "data-cy": "message-template-send-button",
+              label: t("neetoMessageTemplate.template.send")
+            }
+          })
+        })]
+      });
+    }
   });
 };
 
-var SendMessagePane = function SendMessagePane(_ref) {
-  var _ref$isOpen = _ref.isOpen,
-    isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
-    _ref$type = _ref.type,
+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), !0).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; }
+var SendMessagePane = function SendMessagePane(props) {
+  var isOpen = props.isOpen,
+    onClose = props.onClose;
+  return /*#__PURE__*/jsx(Pane, {
+    isOpen: isOpen,
+    onClose: onClose,
+    children: function children(paneProps) {
+      return /*#__PURE__*/jsx(SendMessageForm, _objectSpread$3({}, _objectSpread$3(_objectSpread$3({}, props), {}, {
+        paneProps: paneProps
+      })));
+    }
+  });
+};
+var SendMessageForm = function SendMessageForm(_ref) {
+  var _ref$type = _ref.type,
     type = _ref$type === void 0 ? "" : _ref$type,
     _ref$handleSubmit = _ref.handleSubmit,
     handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit,
@@ -3744,13 +3821,12 @@ var SendMessagePane = function SendMessagePane(_ref) {
     _ref$ownerId = _ref.ownerId,
     ownerId = _ref$ownerId === void 0 ? "" : _ref$ownerId,
     _ref$helpDocUrl = _ref.helpDocUrl,
-    helpDocUrl = _ref$helpDocUrl === void 0 ? "" : _ref$helpDocUrl;
+    helpDocUrl = _ref$helpDocUrl === void 0 ? "" : _ref$helpDocUrl,
+    _ref$addNewTemplateRo = _ref.addNewTemplateRoute,
+    addNewTemplateRoute = _ref$addNewTemplateRo === void 0 ? "" : _ref$addNewTemplateRo,
+    setFocusField = _ref.paneProps.setFocusField;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  var initialFocusField = useRef();
-  var setInitialFocusField = function setInitialFocusField(fieldRef) {
-    return initialFocusField.current = fieldRef;
-  };
   var value = MESSAGE_TEMPLATES[type].value;
   var isWhatsappTemplate = type === "whatsapp";
   var templateParams = {
@@ -3762,33 +3838,49 @@ var SendMessagePane = function SendMessagePane(_ref) {
     _useFetchTemplates$da = _useFetchTemplates.data,
     _useFetchTemplates$da2 = _useFetchTemplates$da === void 0 ? {} : _useFetchTemplates$da,
     _useFetchTemplates$da3 = _useFetchTemplates$da2.templates,
-    templates = _useFetchTemplates$da3 === void 0 ? [] : _useFetchTemplates$da3;
-  return /*#__PURE__*/React.createElement(Pane, {
-    isOpen: isOpen,
-    onClose: onClose,
-    initialFocusRef: initialFocusField
-  }, /*#__PURE__*/React.createElement(Pane.Header, null, /*#__PURE__*/React.createElement(Typography, {
-    style: "h2",
-    weight: "semibold"
-  }, t("neetoMessageTemplate.common.send"), " ", MESSAGE_TYPES[type])), /*#__PURE__*/React.createElement(Pane.Body, null, isWhatsappTemplate ? /*#__PURE__*/React.createElement(Whatsapp, {
-    customFields: customFields,
-    customFieldsInitialValues: customFieldsInitialValues,
-    customFieldsValidationSchema: customFieldsValidationSchema,
-    handleSubmit: handleSubmit,
-    helpDocUrl: helpDocUrl,
-    onClose: onClose,
-    templates: templates
-  }) : /*#__PURE__*/React.createElement(EmailAndSms, {
-    customFields: customFields,
-    customFieldsInitialValues: customFieldsInitialValues,
-    customFieldsValidationSchema: customFieldsValidationSchema,
-    handleSubmit: handleSubmit,
-    onClose: onClose,
-    setInitialFocusField: setInitialFocusField,
-    templateVariables: templateVariables,
-    templates: templates,
-    type: type
-  })));
+    templates = _useFetchTemplates$da3 === void 0 ? [] : _useFetchTemplates$da3,
+    isLoading = _useFetchTemplates.isLoading;
+  if (isLoading) {
+    return /*#__PURE__*/jsx("div", {
+      className: "flex h-full w-full items-center justify-center",
+      children: /*#__PURE__*/jsx(Spinner, {})
+    });
+  }
+  if (isEmpty(templates)) {
+    return /*#__PURE__*/jsx(NoDataPage, {
+      addNewTemplateRoute: addNewTemplateRoute,
+      helpDocUrl: helpDocUrl,
+      type: type
+    });
+  }
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(Pane.Header, {
+      children: /*#__PURE__*/jsxs(Typography, {
+        style: "h2",
+        weight: "semibold",
+        children: [t("neetoMessageTemplate.common.send"), " ", MESSAGE_TYPES[type]]
+      })
+    }), /*#__PURE__*/jsx(Pane.Body, {
+      children: isWhatsappTemplate ? /*#__PURE__*/jsx(Whatsapp, {
+        customFields: customFields,
+        customFieldsInitialValues: customFieldsInitialValues,
+        customFieldsValidationSchema: customFieldsValidationSchema,
+        handleSubmit: handleSubmit,
+        onClose: onClose,
+        templates: templates
+      }) : /*#__PURE__*/jsx(EmailAndSms, {
+        customFields: customFields,
+        customFieldsInitialValues: customFieldsInitialValues,
+        customFieldsValidationSchema: customFieldsValidationSchema,
+        handleSubmit: handleSubmit,
+        onClose: onClose,
+        setFocusField: setFocusField,
+        templateVariables: templateVariables,
+        templates: templates,
+        type: type
+      })
+    })]
+  });
 };
 
 var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
@@ -3877,46 +3969,50 @@ var KeyValuePairs = withT(function (_ref) {
     name = _ref.name,
     _ref$label = _ref.label,
     label = _ref$label === void 0 ? "" : _ref$label;
-  return /*#__PURE__*/React.createElement(FieldArray, {
-    name: name
-  }, function (arrayHelpers) {
-    var data = arrayHelpers.form.values[name];
-    var showDeleteButton = data.length > 1 || isKeyOrValueNotEmpty(data[0]);
-    return /*#__PURE__*/React.createElement("div", {
-      className: "space-y-2"
-    }, /*#__PURE__*/React.createElement(Label, null, label), data.map(function (_, index) {
-      return /*#__PURE__*/React.createElement("div", {
-        className: "flex h-8 space-x-3",
-        key: index
-      }, /*#__PURE__*/React.createElement(Input, {
-        className: "w-2/5",
-        name: "".concat(name, ".").concat(index, ".key"),
-        placeholder: t("neetoMessageTemplate.api.key")
-      }), /*#__PURE__*/React.createElement(Input, {
-        className: "w-3/5",
-        name: "".concat(name, ".").concat(index, ".value"),
-        placeholder: t("neetoMessageTemplate.api.value"),
-        suffix: showDeleteButton && /*#__PURE__*/React.createElement(Button, {
-          icon: Delete,
-          size: "small",
-          style: "text",
+  return /*#__PURE__*/jsx(FieldArray, {
+    name: name,
+    children: function children(arrayHelpers) {
+      var data = arrayHelpers.form.values[name];
+      var showDeleteButton = data.length > 1 || isKeyOrValueNotEmpty(data[0]);
+      return /*#__PURE__*/jsxs("div", {
+        className: "space-y-2",
+        children: [/*#__PURE__*/jsx(Label, {
+          children: label
+        }), data.map(function (_, index) {
+          return /*#__PURE__*/jsxs("div", {
+            className: "flex h-8 space-x-3",
+            children: [/*#__PURE__*/jsx(Input, {
+              className: "w-2/5",
+              name: "".concat(name, ".").concat(index, ".key"),
+              placeholder: t("neetoMessageTemplate.api.key")
+            }), /*#__PURE__*/jsx(Input, {
+              className: "w-3/5",
+              name: "".concat(name, ".").concat(index, ".value"),
+              placeholder: t("neetoMessageTemplate.api.value"),
+              suffix: showDeleteButton && /*#__PURE__*/jsx(Button, {
+                icon: Delete,
+                size: "small",
+                style: "text",
+                onClick: function onClick() {
+                  return removeOption({
+                    arrayHelpers: arrayHelpers,
+                    index: index,
+                    data: data
+                  });
+                }
+              })
+            })]
+          }, index);
+        }), /*#__PURE__*/jsx(Button, {
+          className: "w-full justify-center",
+          label: t("neetoMessageTemplate.api.addKeyValuePair"),
+          style: "secondary",
           onClick: function onClick() {
-            return removeOption({
-              arrayHelpers: arrayHelpers,
-              index: index,
-              data: data
-            });
+            return addOption(arrayHelpers);
           }
-        })
-      }));
-    }), /*#__PURE__*/React.createElement(Button, {
-      className: "w-full justify-center",
-      label: t("neetoMessageTemplate.api.addKeyValuePair"),
-      style: "secondary",
-      onClick: function onClick() {
-        return addOption(arrayHelpers);
-      }
-    }));
+        })]
+      });
+    }
   });
 });
 
@@ -3925,8 +4021,8 @@ var rejectEmptyKeyValuePairs = reject(whereAny({
   value: isEmpty
 }));
 
-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), !0).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; }
+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), !0).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 buildApiTemplatePayload = function buildApiTemplatePayload(values) {
   return {
     entity: {
@@ -3946,38 +4042,39 @@ var buildTableColumnData = function buildTableColumnData(_ref) {
     key: "name",
     title: t$1("neetoMessageTemplate.template.name"),
     render: function render(name, apiTemplate) {
-      return /*#__PURE__*/React.createElement("div", {
-        className: "flex items-center justify-between gap-x-3"
-      }, /*#__PURE__*/React.createElement(Button, {
-        label: name,
-        style: "link",
-        onClick: function onClick() {
-          return handleOpenEditPane(apiTemplate);
-        }
-      }), /*#__PURE__*/React.createElement(MoreDropdown, {
-        dropdownProps: {
-          strategy: "fixed"
-        },
-        menuItems: [{
-          key: "edit",
-          label: t$1("neetoMessageTemplate.template.edit"),
+      return /*#__PURE__*/jsxs("div", {
+        className: "flex items-center justify-between gap-x-3",
+        children: [/*#__PURE__*/jsx(Button, {
+          label: name,
+          style: "link",
           onClick: function onClick() {
             return handleOpenEditPane(apiTemplate);
           }
-        }, {
-          key: "status",
-          label: equals(apiTemplate.status, TEMPLATE_STATUS.ACTIVE) ? t$1("neetoMessageTemplate.template.markAsInactive") : t$1("neetoMessageTemplate.template.markAsActive"),
-          onClick: function onClick() {
-            return handleMarkAsActiveOrInactive(apiTemplate);
-          }
-        }, {
-          key: "delete",
-          label: t$1("neetoMessageTemplate.template.delete"),
-          onClick: function onClick() {
-            return handleOpenDeleteAlert(apiTemplate);
-          }
-        }]
-      }));
+        }), /*#__PURE__*/jsx(MoreDropdown, {
+          dropdownProps: {
+            strategy: "fixed"
+          },
+          menuItems: [{
+            key: "edit",
+            label: t$1("neetoMessageTemplate.template.edit"),
+            onClick: function onClick() {
+              return handleOpenEditPane(apiTemplate);
+            }
+          }, {
+            key: "status",
+            label: equals(apiTemplate.status, TEMPLATE_STATUS.ACTIVE) ? t$1("neetoMessageTemplate.template.markAsInactive") : t$1("neetoMessageTemplate.template.markAsActive"),
+            onClick: function onClick() {
+              return handleMarkAsActiveOrInactive(apiTemplate);
+            }
+          }, {
+            key: "delete",
+            label: t$1("neetoMessageTemplate.template.delete"),
+            onClick: function onClick() {
+              return handleOpenDeleteAlert(apiTemplate);
+            }
+          }]
+        })]
+      });
     }
   }, {
     dataIndex: "status",
@@ -3992,7 +4089,7 @@ var buildTableColumnData = function buildTableColumnData(_ref) {
 var buildApiTemplateInitialValues = function buildApiTemplateInitialValues(isEdit, apiTemplate) {
   if (!isEdit) return API_TEMPLATE_INITIAL_VALUES;
   var additionalData = isEmpty(apiTemplate.additionalData) ? [ADDITIONAL_DATA_INITIAL_VALUE] : apiTemplate.additionalData;
-  return _objectSpread$1(_objectSpread$1({}, pick(["name", "endpoint"], apiTemplate)), {}, {
+  return _objectSpread$2(_objectSpread$2({}, pick(["name", "endpoint"], apiTemplate)), {}, {
     additionalData: additionalData
   });
 };
@@ -4034,38 +4131,51 @@ var Form = function Form(_ref) {
     createApiTemplate(payload, options);
   };
   var isMutating = isUpdating || isCreating;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Pane.Header, null, /*#__PURE__*/React.createElement(Typography, {
-    style: "h2",
-    weight: "semibold"
-  }, isEdit ? t("neetoMessageTemplate.api.editApiTemplate") : t("neetoMessageTemplate.api.addApiTemplate"))), /*#__PURE__*/React.createElement(Form$2, {
-    formikProps: {
-      initialValues: buildApiTemplateInitialValues(isEdit, selectedApiTemplate),
-      validationSchema: API_TEMPLATE_FORM_VALIDATION_SCHEMA,
-      onSubmit: handleSubmit
-    }
-  }, /*#__PURE__*/React.createElement(Pane.Body, null, /*#__PURE__*/React.createElement("div", {
-    className: "w-full space-y-5"
-  }, /*#__PURE__*/React.createElement(Input, {
-    required: true,
-    label: t("neetoMessageTemplate.template.name"),
-    name: "name",
-    ref: setFocusField
-  }), /*#__PURE__*/React.createElement(Input, {
-    required: true,
-    label: t("neetoMessageTemplate.api.endpoint"),
-    name: "endpoint",
-    placeholder: SAMPLE_URL
-  }), /*#__PURE__*/React.createElement(KeyValuePairs, {
-    label: t("neetoMessageTemplate.api.additionalData"),
-    name: "additionalData"
-  }))), /*#__PURE__*/React.createElement(Pane.Footer, null, /*#__PURE__*/React.createElement(ActionBlock, {
-    cancelButtonProps: {
-      onClick: onClose
-    },
-    isSubmitting: isMutating
-  }))));
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(Pane.Header, {
+      children: /*#__PURE__*/jsx(Typography, {
+        style: "h2",
+        weight: "semibold",
+        children: isEdit ? t("neetoMessageTemplate.api.editApiTemplate") : t("neetoMessageTemplate.api.addApiTemplate")
+      })
+    }), /*#__PURE__*/jsxs(NeetoUIForm, {
+      formikProps: {
+        initialValues: buildApiTemplateInitialValues(isEdit, selectedApiTemplate),
+        validationSchema: API_TEMPLATE_FORM_VALIDATION_SCHEMA,
+        onSubmit: handleSubmit
+      },
+      children: [/*#__PURE__*/jsx(Pane.Body, {
+        children: /*#__PURE__*/jsxs("div", {
+          className: "w-full space-y-5",
+          children: [/*#__PURE__*/jsx(Input, {
+            required: true,
+            label: t("neetoMessageTemplate.template.name"),
+            name: "name",
+            ref: setFocusField
+          }), /*#__PURE__*/jsx(Input, {
+            required: true,
+            label: t("neetoMessageTemplate.api.endpoint"),
+            name: "endpoint",
+            placeholder: SAMPLE_URL
+          }), /*#__PURE__*/jsx(KeyValuePairs, {
+            label: t("neetoMessageTemplate.api.additionalData"),
+            name: "additionalData"
+          })]
+        })
+      }), /*#__PURE__*/jsx(Pane.Footer, {
+        children: /*#__PURE__*/jsx(ActionBlock, {
+          cancelButtonProps: {
+            onClick: onClose
+          },
+          isSubmitting: isMutating
+        })
+      })]
+    })]
+  });
 };
 
+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), !0).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 ApiTemplates = function ApiTemplates(_ref) {
   var ownerId = _ref.ownerId,
     _ref$breadcrumbs = _ref.breadcrumbs,
@@ -4166,107 +4276,113 @@ var ApiTemplates = function ApiTemplates(_ref) {
       }
     });
   };
-  return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(NeetoHeader, {
-    breadcrumbs: breadcrumbs,
-    size: "small",
-    title: t("neetoMessageTemplate.template.apiTemplates"),
-    actionBlock: /*#__PURE__*/React.createElement(Button, {
-      label: t("neetoMessageTemplate.api.addApiTemplate"),
-      onClick: function onClick() {
-        return setIsFormPaneOpen(true);
-      }
-    }),
-    searchProps: {
-      placeholder: t("neetoMessageTemplate.template.searchApiTemplates")
-    }
-  }), /*#__PURE__*/React.createElement(SubHeader, {
-    leftActionBlock: /*#__PURE__*/React.createElement(Typography, {
-      component: "h4"
-    }, t("neetoMessageTemplate.template.messageTemplatesWithCount", {
-      type: t("messageType.api"),
-      count: totalCount
-    })),
-    rightActionBlock: /*#__PURE__*/React.createElement(SubHeader.RightBlock, {
-      dataProps: {
-        totalCount: isFilterApplied ? null : totalCount
-      },
-      filterProps: {
-        columns: FILTER_COLUMNS,
-        isOpen: isFiltersPaneOpen,
-        keyword: searchKeywordProps,
-        setIsOpen: setIsFiltersPaneOpen,
-        onChange: handleFiltersChange
-      }
-    })
-  }), /*#__PURE__*/React.createElement(Bar, {
-    columns: FILTER_COLUMNS,
-    keyword: searchKeywordProps,
-    setIsPaneOpen: setIsFiltersPaneOpen,
-    onChange: handleFiltersChange
-  }), isNotEmpty(templates) ? /*#__PURE__*/React.createElement(TableWrapper, {
-    hasPagination: totalCount > pageParams.size
-  }, /*#__PURE__*/React.createElement(Table, {
-    totalCount: totalCount,
-    fixedHeight: true,
-    currentPageNumber: pageParams.index,
-    defaultPageSize: pageParams.size,
-    handlePageChange: function handlePageChange(index, size) {
-      return setPageParams({
-        index: index,
-        size: size
-      });
-    },
-    loading: isLoading || isFetching,
-    rowData: templates,
-    scroll: {
-      x: "100%"
-    },
-    columnData: buildTableColumnData({
-      handleMarkAsActiveOrInactive: handleMarkAsActiveOrInactive,
-      handleOpenDeleteAlert: handleOpenDeleteAlert,
-      handleOpenEditPane: handleOpenEditPane
-    })
-  })) : /*#__PURE__*/React.createElement("div", {
-    className: "flex h-full w-full items-center justify-center"
-  }, /*#__PURE__*/React.createElement(NoData, _extends({}, !isFilterApplied && {
-    primaryButtonProps: {
-      label: t("neetoMessageTemplate.api.addApiTemplate"),
-      onClick: function onClick() {
-        return setIsFormPaneOpen(true);
+  return /*#__PURE__*/jsxs(Container, {
+    children: [/*#__PURE__*/jsx(NeetoHeader, {
+      breadcrumbs: breadcrumbs,
+      size: "small",
+      title: t("neetoMessageTemplate.template.apiTemplates"),
+      actionBlock: /*#__PURE__*/jsx(Button, {
+        label: t("neetoMessageTemplate.api.addApiTemplate"),
+        onClick: function onClick() {
+          return setIsFormPaneOpen(true);
+        }
+      }),
+      searchProps: {
+        placeholder: t("neetoMessageTemplate.template.searchApiTemplates")
       }
-    }
-  }, {
-    title: isFilterApplied ? t("neetoMessageTemplate.template.filtersEmptyState", {
-      type: t("neetoMessageTemplate.template.apiTemplates")
-    }) : t("neetoMessageTemplate.template.emptyState", {
-      type: t("neetoMessageTemplate.template.apiTemplates")
-    })
-  }))), /*#__PURE__*/React.createElement(Pane, {
-    isOpen: isFormPaneOpen,
-    onClose: handleCloseDeleteAlertAndFormPane
-  }, function (_ref3) {
-    var setFocusField = _ref3.setFocusField;
-    return /*#__PURE__*/React.createElement(Form, {
-      onMutationSuccess: onMutationSuccess,
-      ownerId: ownerId,
-      selectedApiTemplate: selectedApiTemplate,
-      setFocusField: setFocusField,
-      onClose: handleCloseDeleteAlertAndFormPane
-    });
-  }), /*#__PURE__*/React.createElement(Alert, {
-    isOpen: isDeleteAlertOpen,
-    isSubmitting: isDeleting,
-    submitButtonLabel: t("neetoMessageTemplate.template.delete"),
-    title: t("neetoMessageTemplate.api.deleteApiTemplate"),
-    message: /*#__PURE__*/React.createElement(Trans, {
-      i18nKey: "neetoMessageTemplate.template.templateDeleteConfirmation",
-      values: {
-        name: selectedApiTemplate.name
+    }), /*#__PURE__*/jsx(SubHeader, {
+      leftActionBlock: /*#__PURE__*/jsx(Typography, {
+        component: "h4",
+        children: t("neetoMessageTemplate.template.messageTemplatesWithCount", {
+          type: t("messageType.api"),
+          count: totalCount
+        })
+      }),
+      rightActionBlock: /*#__PURE__*/jsx(SubHeader.RightBlock, {
+        dataProps: {
+          totalCount: isFilterApplied ? null : totalCount
+        },
+        filterProps: {
+          columns: FILTER_COLUMNS,
+          isOpen: isFiltersPaneOpen,
+          keyword: searchKeywordProps,
+          setIsOpen: setIsFiltersPaneOpen,
+          onChange: handleFiltersChange
+        }
+      })
+    }), /*#__PURE__*/jsx(Bar, {
+      columns: FILTER_COLUMNS,
+      keyword: searchKeywordProps,
+      setIsPaneOpen: setIsFiltersPaneOpen,
+      onChange: handleFiltersChange
+    }), isNotEmpty(templates) ? /*#__PURE__*/jsx(TableWrapper, {
+      hasPagination: totalCount > pageParams.size,
+      children: /*#__PURE__*/jsx(Table, {
+        totalCount: totalCount,
+        fixedHeight: true,
+        currentPageNumber: pageParams.index,
+        defaultPageSize: pageParams.size,
+        handlePageChange: function handlePageChange(index, size) {
+          return setPageParams({
+            index: index,
+            size: size
+          });
+        },
+        loading: isLoading || isFetching,
+        rowData: templates,
+        scroll: {
+          x: "100%"
+        },
+        columnData: buildTableColumnData({
+          handleMarkAsActiveOrInactive: handleMarkAsActiveOrInactive,
+          handleOpenDeleteAlert: handleOpenDeleteAlert,
+          handleOpenEditPane: handleOpenEditPane
+        })
+      })
+    }) : /*#__PURE__*/jsx("div", {
+      className: "flex h-full w-full items-center justify-center",
+      children: /*#__PURE__*/jsx(NoData, _objectSpread$1(_objectSpread$1({}, !isFilterApplied && {
+        primaryButtonProps: {
+          label: t("neetoMessageTemplate.api.addApiTemplate"),
+          onClick: function onClick() {
+            return setIsFormPaneOpen(true);
+          }
+        }
+      }), {}, {
+        title: isFilterApplied ? t("neetoMessageTemplate.template.filtersEmptyState", {
+          type: t("neetoMessageTemplate.template.apiTemplates")
+        }) : t("neetoMessageTemplate.template.emptyState", {
+          type: t("neetoMessageTemplate.template.apiTemplates")
+        })
+      }))
+    }), /*#__PURE__*/jsx(Pane, {
+      isOpen: isFormPaneOpen,
+      onClose: handleCloseDeleteAlertAndFormPane,
+      children: function children(_ref3) {
+        var setFocusField = _ref3.setFocusField;
+        return /*#__PURE__*/jsx(Form, {
+          onMutationSuccess: onMutationSuccess,
+          ownerId: ownerId,
+          selectedApiTemplate: selectedApiTemplate,
+          setFocusField: setFocusField,
+          onClose: handleCloseDeleteAlertAndFormPane
+        });
       }
-    }),
-    onClose: handleCloseDeleteAlertAndFormPane,
-    onSubmit: handleDeleteApiTemplate
-  }));
+    }), /*#__PURE__*/jsx(Alert, {
+      isOpen: isDeleteAlertOpen,
+      isSubmitting: isDeleting,
+      submitButtonLabel: t("neetoMessageTemplate.template.delete"),
+      title: t("neetoMessageTemplate.api.deleteApiTemplate"),
+      message: /*#__PURE__*/jsx(Trans, {
+        i18nKey: "neetoMessageTemplate.template.templateDeleteConfirmation",
+        values: {
+          name: selectedApiTemplate.name
+        }
+      }),
+      onClose: handleCloseDeleteAlertAndFormPane,
+      onSubmit: handleDeleteApiTemplate
+    })]
+  });
 };
 
 var SEND_TO_API_FORM_INITIAL_VALUES = {
@@ -4286,13 +4402,14 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 var SendToApiPane = function SendToApiPane(props) {
   var isOpen = props.isOpen,
     onClose = props.onClose;
-  return /*#__PURE__*/React.createElement(Pane, {
+  return /*#__PURE__*/jsx(Pane, {
     isOpen: isOpen,
-    onClose: onClose
-  }, function (paneProps) {
-    return /*#__PURE__*/React.createElement(SendToApiForm, _objectSpread(_objectSpread({}, props), {}, {
-      paneProps: paneProps
-    }));
+    onClose: onClose,
+    children: function children(paneProps) {
+      return /*#__PURE__*/jsx(SendToApiForm, _objectSpread({}, _objectSpread(_objectSpread({}, props), {}, {
+        paneProps: paneProps
+      })));
+    }
   });
 };
 var SendToApiForm = function SendToApiForm(_ref) {
@@ -4300,6 +4417,7 @@ var SendToApiForm = function SendToApiForm(_ref) {
     onClose = _ref.onClose,
     onSubmit = _ref.onSubmit,
     isSubmitting = _ref.isSubmitting,
+    addNewTemplateRoute = _ref.addNewTemplateRoute,
     setFocusField = _ref.paneProps.setFocusField;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
@@ -4321,49 +4439,68 @@ var SendToApiForm = function SendToApiForm(_ref) {
     var additionalDataModifiedFormValues = modify("additionalData", rejectEmptyKeyValuePairs, formValues);
     onSubmit(additionalDataModifiedFormValues);
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Pane.Header, null, /*#__PURE__*/React.createElement(Typography, {
-    style: "h2",
-    weight: "semibold"
-  }, t("neetoMessageTemplate.api.sendToApi"))), /*#__PURE__*/React.createElement(Form$2, {
-    formikProps: {
-      initialValues: SEND_TO_API_FORM_INITIAL_VALUES,
-      validationSchema: SEND_TO_API_FORM_VALIDATION_SCHEMA,
-      onSubmit: handleSubmit
-    }
-  }, function (_ref2) {
-    var setFieldValue = _ref2.setFieldValue;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Pane.Body, null, /*#__PURE__*/React.createElement("div", {
-      className: "w-full space-y-5"
-    }, /*#__PURE__*/React.createElement(Select, {
-      innerRef: setFocusField,
-      isLoading: isLoadingTemplates,
-      label: t("neetoMessageTemplate.template.title"),
-      options: renameKeys({
-        name: "label",
-        id: "value"
-      }, templates),
-      placeholder: t("neetoMessageTemplate.sendMessage.selectTemplate"),
-      onChange: function onChange(template) {
-        return handleTemplateChange(setFieldValue, template);
-      }
-    }), /*#__PURE__*/React.createElement(Input, {
-      required: true,
-      label: t("neetoMessageTemplate.api.endpoint"),
-      name: "endpoint",
-      placeholder: SAMPLE_URL
-    }), /*#__PURE__*/React.createElement(KeyValuePairs, {
-      label: t("neetoMessageTemplate.api.additionalData"),
-      name: "additionalData"
-    }))), /*#__PURE__*/React.createElement(Pane.Footer, null, /*#__PURE__*/React.createElement(ActionBlock, {
-      isSubmitting: isSubmitting,
-      cancelButtonProps: {
-        onClick: onClose
+  if (isEmpty(templates)) {
+    return /*#__PURE__*/jsx(NoDataPage, {
+      addNewTemplateRoute: addNewTemplateRoute,
+      type: "api"
+    });
+  }
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(Pane.Header, {
+      children: /*#__PURE__*/jsx(Typography, {
+        style: "h2",
+        weight: "semibold",
+        children: t("neetoMessageTemplate.api.sendToApi")
+      })
+    }), /*#__PURE__*/jsx(NeetoUIForm, {
+      formikProps: {
+        initialValues: SEND_TO_API_FORM_INITIAL_VALUES,
+        validationSchema: SEND_TO_API_FORM_VALIDATION_SCHEMA,
+        onSubmit: handleSubmit
       },
-      submitButtonProps: {
-        label: t("neetoMessageTemplate.template.send")
+      children: function children(_ref2) {
+        var setFieldValue = _ref2.setFieldValue;
+        return /*#__PURE__*/jsxs(Fragment, {
+          children: [/*#__PURE__*/jsx(Pane.Body, {
+            children: /*#__PURE__*/jsxs("div", {
+              className: "w-full space-y-5",
+              children: [/*#__PURE__*/jsx(Select, {
+                innerRef: setFocusField,
+                isLoading: isLoadingTemplates,
+                label: t("neetoMessageTemplate.template.title"),
+                options: renameKeys({
+                  name: "label",
+                  id: "value"
+                }, templates),
+                placeholder: t("neetoMessageTemplate.sendMessage.selectTemplate"),
+                onChange: function onChange(template) {
+                  return handleTemplateChange(setFieldValue, template);
+                }
+              }), /*#__PURE__*/jsx(Input, {
+                required: true,
+                label: t("neetoMessageTemplate.api.endpoint"),
+                name: "endpoint",
+                placeholder: SAMPLE_URL
+              }), /*#__PURE__*/jsx(KeyValuePairs, {
+                label: t("neetoMessageTemplate.api.additionalData"),
+                name: "additionalData"
+              })]
+            })
+          }), /*#__PURE__*/jsx(Pane.Footer, {
+            children: /*#__PURE__*/jsx(ActionBlock, {
+              isSubmitting: isSubmitting,
+              cancelButtonProps: {
+                onClick: onClose
+              },
+              submitButtonProps: {
+                label: t("neetoMessageTemplate.template.send")
+              }
+            })
+          })]
+        });
       }
-    })));
-  }));
+    })]
+  });
 };
 
 export { ApiTemplates, MessageTemplates, SendMessagePane, SendToApiPane };