@bigbinary/neeto-message-templates-frontend 0.0.9 → 0.2.0

package/README.md

@@ -21,10 +21,10 @@ the creation of SMS, Email and Whatsapp templates.
    bundle install
    ```
 
-3. Configure the organization model in the host application.
+3. Configure the owner model in the host application.
 
    ```ruby
-   has_many :message_templates, class_name: "NeetoMessageTemplatesEngine::MessageTemplate", dependent: :destroy
+   has_many :message_templates, as: :owner, class_name: "NeetoMessageTemplatesEngine::MessageTemplate", dependent: :destroy
    ```
 
 4. Add this line to your application's `config/routes.rb` file
@@ -55,6 +55,15 @@ the creation of SMS, Email and Whatsapp templates.
     end
    ```
 
+7. Create an initializer file in the host app under
+   `configs/initializers/neeto-message-templates.rb` & provide the name of owner
+   model for the message templates. The message_templates `belongs_to` this
+   `owner`.
+
+   ```ruby
+   NeetoMessageTemplatesEngine.owner_class = "Organization"
+   ```
+
 # Frontend Package Installation
 
 Install the latest `neetoMessageTemplates` package using the below command:
@@ -80,6 +89,10 @@ yarn add @bigbinary/neeto-message-templates-frontend
 
 - `templateVariables`: (optional) To add dynamic variables to form body field.
 
+- `ownerId`: (optional) To provide the `id` of the owner if it is not an
+  Organization model. If the owner is an Organization, this prop can be left
+  unspecified.
+
 ### Usage
 
 ```javascript
@@ -141,6 +154,10 @@ const App = () => {
 
 - `templateVariables`: (optional) To add dynamic variables to form body field.
 
+- `ownerId`: (optional) To provide the `id` of the owner if it is not an
+  Organization model. If the owner is an Organization, this prop can be left
+  unspecified.
+
 ### Usage
 
 ```js

package/dist/index.cjs.js

@@ -13,8 +13,8 @@ var ramda = require('ramda');
 var reactQuery = require('react-query');
 var devtools = require('react-query/devtools');
 var neetoIcons = require('@bigbinary/neeto-icons');
-var axios = require('axios');
 var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
+var axios = require('axios');
 var zustand = require('zustand');
 var neetoEditor = require('@bigbinary/neeto-editor');
 var formik$1 = require('@bigbinary/neetoui/formik');
@@ -5280,9 +5280,11 @@ var template = {
 	search: "Search {{what}}",
 	markAsActive: "Mark as active",
 	markAsInactive: "Mark as inactive",
+	close: "Close",
 	"delete": "Delete",
 	edit: "Edit",
 	saveChanges: "Save changes",
+	send: "Send",
 	cancel: "Cancel",
 	emailAddress: "Email address",
 	phoneNumber: "Phone number",
@@ -5303,13 +5305,16 @@ var template = {
 	sendTestEmail: "Send test email",
 	sendTestSms: "Send test sms",
 	filtersEmptyState: "There are no {{type}} to show for applied filters.",
+	preview: "Template Preview",
+	resolveVariable: "Resolve {{type}} variables",
 	validation: {
 		namePresence: "Name is required",
 		subjectPresence: "Subject is required",
 		bodyPresence: "Body is required",
 		emailAddressPresence: "Email address is required",
 		emailAddressFormatValidation: "Invalid email address",
-		validPhoneNumber: "Enter valid phone number"
+		validPhoneNumber: "Enter valid phone number",
+		variablePresence: "Variable should not be empty"
 	}
 };
 var sendMessage = {
@@ -5422,18 +5427,31 @@ var fetchMessageTemplates = function fetchMessageTemplates(params) {
     params: params
   });
 };
-var createMessageTemplate = function createMessageTemplate(params) {
+var createMessageTemplate = function createMessageTemplate(_ref) {
+  var messageTemplate = _ref.messageTemplate,
+    ownerId = _ref.ownerId;
   return axios__default["default"].post(MESSAGE_TEMPLATE_BASE_URL, {
-    messageTemplate: params
+    messageTemplate: messageTemplate,
+    ownerId: ownerId
   });
 };
-var updateMessageTemplate = function updateMessageTemplate(id, params) {
+var updateMessageTemplate = function updateMessageTemplate(_ref2) {
+  var id = _ref2.id,
+    messageTemplate = _ref2.messageTemplate,
+    ownerId = _ref2.ownerId;
   return axios__default["default"].patch("".concat(MESSAGE_TEMPLATE_BASE_URL, "/").concat(id), {
-    messageTemplate: params
+    messageTemplate: messageTemplate,
+    ownerId: ownerId
   });
 };
-var deleteMessageTemplate = function deleteMessageTemplate(id) {
-  return axios__default["default"]["delete"]("".concat(MESSAGE_TEMPLATE_BASE_URL, "/").concat(id));
+var deleteMessageTemplate = function deleteMessageTemplate(_ref3) {
+  var id = _ref3.id,
+    ownerId = _ref3.ownerId;
+  return axios__default["default"]["delete"]("".concat(MESSAGE_TEMPLATE_BASE_URL, "/").concat(id), {
+    data: {
+      ownerId: ownerId
+    }
+  });
 };
 var messageTemplatesApi = {
   fetchAll: fetchMessageTemplates,
@@ -5446,42 +5464,46 @@ var QUERY_KEYS = {
   MESSAGE_TEMPLATE: "message-templates"
 };
 
+var ownerIdValue = function ownerIdValue(ownerId) {
+  return ramda.isEmpty(ownerId) ? undefined : ownerId;
+};
 var useFetchTemplates = function useFetchTemplates(params) {
   return reactQuery.useQuery([QUERY_KEYS.MESSAGE_TEMPLATE, params], function () {
     return messageTemplatesApi.fetchAll(params);
   });
 };
-var useCreateTemplate = function useCreateTemplate(options) {
-  var queryClient = reactQuery.useQueryClient();
-  return reactQuery.useMutation(function (payload) {
-    return messageTemplatesApi.create(payload);
+var useCreateTemplate = function useCreateTemplate(ownerId, options) {
+  return reactUtils.useMutationWithInvalidation(function (messageTemplate) {
+    return messageTemplatesApi.create({
+      messageTemplate: messageTemplate,
+      ownerId: ownerIdValue(ownerId)
+    });
   }, {
-    onSuccess: function onSuccess() {
-      queryClient.invalidateQueries(QUERY_KEYS.MESSAGE_TEMPLATE);
-      options === null || options === void 0 ? void 0 : options.onSuccess();
-    }
+    keysToInvalidate: [QUERY_KEYS.MESSAGE_TEMPLATE],
+    onSuccess: options === null || options === void 0 ? void 0 : options.onSuccess
   });
 };
-var useUpdateTemplate = function useUpdateTemplate() {
-  var queryClient = reactQuery.useQueryClient();
-  return reactQuery.useMutation(function (_ref) {
+var useUpdateTemplate = function useUpdateTemplate(ownerId) {
+  return reactUtils.useMutationWithInvalidation(function (_ref) {
     var id = _ref.id,
       payload = _ref.payload;
-    return messageTemplatesApi.update(id, payload);
+    return messageTemplatesApi.update({
+      id: id,
+      messageTemplate: payload,
+      ownerId: ownerIdValue(ownerId)
+    });
   }, {
-    onSuccess: function onSuccess() {
-      queryClient.invalidateQueries(QUERY_KEYS.MESSAGE_TEMPLATE);
-    }
+    keysToInvalidate: [QUERY_KEYS.MESSAGE_TEMPLATE]
   });
 };
-var useDeleteTemplate = function useDeleteTemplate() {
-  var queryClient = reactQuery.useQueryClient();
-  return reactQuery.useMutation(function (id) {
-    return messageTemplatesApi["delete"](id);
+var useDeleteTemplate = function useDeleteTemplate(ownerId) {
+  return reactUtils.useMutationWithInvalidation(function (id) {
+    return messageTemplatesApi["delete"]({
+      id: id,
+      ownerId: ownerIdValue(ownerId)
+    });
   }, {
-    onSuccess: function onSuccess() {
-      queryClient.invalidateQueries(QUERY_KEYS.MESSAGE_TEMPLATE);
-    }
+    keysToInvalidate: [QUERY_KEYS.MESSAGE_TEMPLATE]
   });
 };
 
@@ -5497,10 +5519,11 @@ function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if
 function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var RowActions = function RowActions(_ref) {
   var template = _ref.template,
-    setManageTemplatePane = _ref.setManageTemplatePane;
+    setManageTemplatePane = _ref.setManageTemplatePane,
+    ownerId = _ref.ownerId;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  var _useUpdateTemplate = useUpdateTemplate(),
+  var _useUpdateTemplate = useUpdateTemplate(ownerId),
     update = _useUpdateTemplate.mutate;
   var Menu = neetoui.Dropdown.Menu,
     MenuItem = neetoui.Dropdown.MenuItem;
@@ -5558,7 +5581,7 @@ var renderSearchProps = function renderSearchProps(label, setSearchTerm, searchT
     value: searchTerm
   };
 };
-var buildTableColumnData = function buildTableColumnData(setManageTemplatePane) {
+var buildTableColumnData = function buildTableColumnData(setManageTemplatePane, ownerId) {
   return [{
     dataIndex: "name",
     key: "name",
@@ -5572,6 +5595,7 @@ var buildTableColumnData = function buildTableColumnData(setManageTemplatePane)
       }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
         style: "body2"
       }, name), /*#__PURE__*/React__default["default"].createElement(RowActions, {
+        ownerId: ownerId,
         setManageTemplatePane: setManageTemplatePane,
         template: template
       }));
@@ -6086,7 +6110,7 @@ var TestMessage = function TestMessage(_ref) {
 
 function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var Form$1 = function Form(_ref) {
+var Form = function Form(_ref) {
   var onClose = _ref.onClose,
     isEdit = _ref.isEdit,
     _ref$template = _ref.template,
@@ -6204,7 +6228,7 @@ var AddEdit = function AddEdit(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Header, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
     style: "h2",
     weight: "semibold"
-  }, label)), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Body, null, /*#__PURE__*/React__default["default"].createElement(Form$1, {
+  }, label)), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Body, null, /*#__PURE__*/React__default["default"].createElement(Form, {
     createUpdateTemplate: createUpdateTemplate,
     handleSubmitTestTemplate: handleSubmitTestTemplate,
     isEdit: isEdit,
@@ -6236,7 +6260,7 @@ var useFilters = function useFilters() {
   };
 };
 
-var useTemplates = function useTemplates(type) {
+var useTemplates = function useTemplates(type, ownerId) {
   var _useState = React.useState(neetoFiltersFrontend.buildFiltersFromURL(buildTableColumnData().filter(ramda.prop("node")))),
     _useState2 = _slicedToArray(_useState, 2),
     filters = _useState2[0],
@@ -6251,16 +6275,17 @@ var useTemplates = function useTemplates(type) {
     pageIndex: pageIndex,
     pageSize: pageSize,
     filters: JSON.stringify(filters),
-    templateType: MESSAGE_TEMPLATES[type].value
+    templateType: MESSAGE_TEMPLATES[type].value,
+    ownerId: ramda.isEmpty(ownerId) ? undefined : ownerId
   };
   var _useFetchTemplates = useFetchTemplates(templateParams),
     _useFetchTemplates$da = _useFetchTemplates.data,
     templatesData = _useFetchTemplates$da === void 0 ? {} : _useFetchTemplates$da,
     isLoadingTemplates = _useFetchTemplates.isLoading,
     isFetching = _useFetchTemplates.isFetching;
-  var _useCreateTemplate = useCreateTemplate(),
+  var _useCreateTemplate = useCreateTemplate(ownerId),
     create = _useCreateTemplate.mutate;
-  var _useUpdateTemplate = useUpdateTemplate(),
+  var _useUpdateTemplate = useUpdateTemplate(ownerId),
     update = _useUpdateTemplate.mutate;
   var createUpdateTemplate = function createUpdateTemplate(_ref, options) {
     var isEdit = _ref.isEdit,
@@ -6294,10 +6319,11 @@ var List = function List(_ref) {
     pageProperties = _ref.pageProperties,
     label = _ref.label,
     addText = _ref.addText,
-    isFilterApplied = _ref.isFilterApplied;
+    isFilterApplied = _ref.isFilterApplied,
+    ownerId = _ref.ownerId;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  var _useDeleteTemplate = useDeleteTemplate(),
+  var _useDeleteTemplate = useDeleteTemplate(ownerId),
     deleteTemplate = _useDeleteTemplate.mutate,
     isDeleting = _useDeleteTemplate.isLoading;
   var templates = templatesData.templates,
@@ -6318,7 +6344,7 @@ var List = function List(_ref) {
   }, !ramda.isEmpty(templates) ? /*#__PURE__*/React__default["default"].createElement(TableWrapper__default["default"], {
     hasPagination: totalCount > pageSize
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Table, {
-    columnData: buildTableColumnData(setManageTemplatePane),
+    columnData: buildTableColumnData(setManageTemplatePane, ownerId),
     currentPageNumber: pageIndex,
     defaultPageSize: pageSize,
     loading: isLoading,
@@ -6380,7 +6406,9 @@ var MessageTemplates = function MessageTemplates(_ref) {
     _ref$shouldIncludeTes = _ref.shouldIncludeTestTemplate,
     shouldIncludeTestTemplate = _ref$shouldIncludeTes === void 0 ? true : _ref$shouldIncludeTes,
     _ref$templateVariable = _ref.templateVariables,
-    templateVariables = _ref$templateVariable === void 0 ? {} : _ref$templateVariable;
+    templateVariables = _ref$templateVariable === void 0 ? {} : _ref$templateVariable,
+    _ref$ownerId = _ref.ownerId,
+    ownerId = _ref$ownerId === void 0 ? "" : _ref$ownerId;
   var _useState = React.useState(MESSAGE_TEMPLATE_INITIAL_STATE),
     _useState2 = _slicedToArray(_useState, 2),
     manageTemplatePane = _useState2[0],
@@ -6394,7 +6422,7 @@ var MessageTemplates = function MessageTemplates(_ref) {
     filterColumns = _useFilters.filterColumns,
     setSearchTerm = _useFilters.setSearchTerm,
     searchTerm = _useFilters.searchTerm;
-  var _useTemplates = useTemplates(type),
+  var _useTemplates = useTemplates(type, ownerId),
     isLoading = _useTemplates.isLoading,
     templatesData = _useTemplates.templatesData,
     createUpdateTemplate = _useTemplates.createUpdateTemplate,
@@ -6455,6 +6483,7 @@ var MessageTemplates = function MessageTemplates(_ref) {
     label: label,
     labelSingular: labelSingular,
     manageTemplatePane: manageTemplatePane,
+    ownerId: ownerId,
     pageProperties: pageProperties,
     setManageTemplatePane: setManageTemplatePane,
     setPageProperties: setPageProperties,
@@ -6475,13 +6504,13 @@ var MessageTemplates = function MessageTemplates(_ref) {
 };
 var index$1 = withReactQuery(MessageTemplates);
 
+var formatEditorContent = function formatEditorContent(value) {
+  return value === null || value === void 0 ? void 0 : value.replaceAll(/<\/?(?!img)\w*\b[^>]*>/gi, "").trim();
+};
 var SEND_MESSAGE_INITIAL_VALUES = {
   subject: "",
   body: ""
 };
-var formatEditorContent = function formatEditorContent(value) {
-  return value === null || value === void 0 ? void 0 : value.replaceAll(/<\/?(?!img)\w*\b[^>]*>/gi, "").trim();
-};
 var EMAIL_MESSAGE_FORM_SCHEMA = yup__namespace.object().shape({
   subject: yup__namespace.string().trim().required(t$1("template.validation.subjectPresence")),
   body: yup__namespace.string().test("body", t$1("template.validation.bodyPresence"), function (value) {
@@ -6493,10 +6522,15 @@ var SMS_MESSAGE_FORM_VALIDATION_SCHEMA = yup__namespace.object().shape({
     return !!formatEditorContent(value);
   })
 });
+var WHATSAPP_MESSAGE_FORM_VALIDATIONS_SCHEMA = yup__namespace.object().shape({
+  variableContents: yup__namespace.object().shape({
+    body: yup__namespace.array().of(yup__namespace.string().required(t$1("template.validation.variablePresence")))
+  })
+});
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var Form = function Form(_ref) {
+var EmailAndSms = function EmailAndSms(_ref) {
   var isEmailTemplate = _ref.isEmailTemplate,
     onClose = _ref.onClose,
     templates = _ref.templates,
@@ -6573,7 +6607,7 @@ var Form = function Form(_ref) {
       className: "absolute bottom-0 left-0 flex gap-x-2"
     }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
       disabled: !dirty || isSubmitting,
-      label: t("template.saveChanges"),
+      label: t("template.send"),
       loading: isSubmitting,
       type: "submit"
     }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
@@ -6585,6 +6619,125 @@ var Form = function Form(_ref) {
   });
 };
 
+var Whatsapp = function Whatsapp(_ref) {
+  var _templates$, _templates$2, _templates$3, _templates$4;
+  var templates = _ref.templates,
+    onClose = _ref.onClose,
+    handleSubmit = _ref.handleSubmit;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var getInitialVariableComponents = function getInitialVariableComponents(variables) {
+    var initialComponents = {};
+    variables.forEach(function (_ref2) {
+      var type = _ref2.type,
+        count = _ref2.count;
+      initialComponents[type] = Array(count).fill("");
+    });
+    return initialComponents;
+  };
+  var getTemplateMessage = function getTemplateMessage(components) {
+    return pure.nullSafe(ramda.pluck)("text", components).join("\n");
+  };
+  if (ramda.isEmpty(templates)) {
+    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, null, t("template.emptyState", {
+      type: t("template.whatsappTemplates")
+    })), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Footer, {
+      className: "absolute bottom-0 left-0"
+    }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+      label: t("template.close"),
+      onClick: onClose
+    })));
+  }
+  var initialFormValues = {
+    selectedTemplate: {
+      label: (_templates$ = templates[0]) === null || _templates$ === void 0 ? void 0 : _templates$.name,
+      value: (_templates$2 = templates[0]) === null || _templates$2 === void 0 ? void 0 : _templates$2.id
+    },
+    templateMessage: getTemplateMessage((_templates$3 = templates[0]) === null || _templates$3 === void 0 ? void 0 : _templates$3.components),
+    variableContents: getInitialVariableComponents((_templates$4 = templates[0]) === null || _templates$4 === void 0 ? void 0 : _templates$4.variableCount)
+  };
+  return /*#__PURE__*/React__default["default"].createElement(formik$1.Form, {
+    formProps: {
+      noValidate: true,
+      className: "flex w-full flex-col gap-y-4 pb-6"
+    },
+    formikProps: {
+      initialValues: initialFormValues,
+      validationSchema: WHATSAPP_MESSAGE_FORM_VALIDATIONS_SCHEMA,
+      onSubmit: handleSubmit
+    }
+  }, function (_ref3) {
+    var dirty = _ref3.dirty,
+      isSubmitting = _ref3.isSubmitting,
+      values = _ref3.values,
+      setValues = _ref3.setValues;
+    var handleTemplateChange = function handleTemplateChange(value) {
+      if (!value) return;
+      var template = pure.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__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(formik$1.Select, {
+      required: true,
+      defaultValue: initialFormValues.selectedTemplate,
+      label: t("template.title"),
+      name: "selectedTemplate",
+      options: templates.map(function (_ref4) {
+        var name = _ref4.name,
+          id = _ref4.id;
+        return {
+          label: name,
+          value: id
+        };
+      }),
+      onChange: handleTemplateChange
+    }), /*#__PURE__*/React__default["default"].createElement(neetoui.Textarea, {
+      disabled: true,
+      nakedTextarea: true,
+      label: t("template.preview"),
+      value: values.templateMessage
+    }), pure.isNotEmpty(values.variableContents) && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, Object.keys(values.variableContents).map(function (group) {
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "flex flex-col gap-y-2",
+        key: group
+      }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+        style: "h4"
+      }, t("template.resolveVariable", {
+        type: pure.capitalize(group)
+      })), values.variableContents[group].map(function (_, index) {
+        return /*#__PURE__*/React__default["default"].createElement("div", {
+          key: "".concat(group, "-").concat(index)
+        }, /*#__PURE__*/React__default["default"].createElement(formik$1.Input, {
+          required: true,
+          key: "".concat(group, "-").concat(index),
+          label: "{{".concat(index + 1, "}}"),
+          name: "variableContents.".concat(group, ".").concat(index)
+        }));
+      }));
+    })), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Footer, {
+      className: "absolute bottom-0 left-0 flex gap-x-2"
+    }, /*#__PURE__*/React__default["default"].createElement(formik$1.Button, {
+      disabled: !dirty || isSubmitting,
+      label: t("template.send"),
+      loading: isSubmitting,
+      type: "submit"
+    }), /*#__PURE__*/React__default["default"].createElement(formik$1.Button, {
+      label: t("template.cancel"),
+      style: "text",
+      type: "reset",
+      onClick: onClose
+    })));
+  });
+};
+
 var SendMessagePane = function SendMessagePane(_ref) {
   var _ref$isOpen = _ref.isOpen,
     isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
@@ -6601,7 +6754,9 @@ var SendMessagePane = function SendMessagePane(_ref) {
     _ref$customFieldsVali = _ref.customFieldsValidationSchema,
     customFieldsValidationSchema = _ref$customFieldsVali === void 0 ? {} : _ref$customFieldsVali,
     _ref$templateVariable = _ref.templateVariables,
-    templateVariables = _ref$templateVariable === void 0 ? {} : _ref$templateVariable;
+    templateVariables = _ref$templateVariable === void 0 ? {} : _ref$templateVariable,
+    _ref$ownerId = _ref.ownerId,
+    ownerId = _ref$ownerId === void 0 ? "" : _ref$ownerId;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var initialFocusField = React.useRef();
@@ -6611,7 +6766,8 @@ var SendMessagePane = function SendMessagePane(_ref) {
   var value = MESSAGE_TEMPLATES[type].value;
   var templateParams = {
     status: "active",
-    templateType: value
+    templateType: value,
+    ownerId: ownerId
   };
   var _useFetchTemplates = useFetchTemplates(templateParams),
     _useFetchTemplates$da = _useFetchTemplates.data,
@@ -6619,6 +6775,7 @@ var SendMessagePane = function SendMessagePane(_ref) {
     _useFetchTemplates$da3 = _useFetchTemplates$da2.templates,
     templates = _useFetchTemplates$da3 === void 0 ? [] : _useFetchTemplates$da3;
   var isEmailTemplate = type === "email";
+  var isWhatsappTemplate = type === "whatsapp";
   return /*#__PURE__*/React__default["default"].createElement(neetoui.Pane, {
     initialFocusRef: initialFocusField,
     isOpen: isOpen,
@@ -6626,7 +6783,11 @@ var SendMessagePane = function SendMessagePane(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Header, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
     style: "h2",
     weight: "semibold"
-  }, t("common.send"), " ", type)), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Body, null, /*#__PURE__*/React__default["default"].createElement(Form, {
+  }, t("common.send"), " ", type)), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Body, null, isWhatsappTemplate ? /*#__PURE__*/React__default["default"].createElement(Whatsapp, {
+    handleSubmit: handleSubmit,
+    templates: templates,
+    onClose: onClose
+  }) : /*#__PURE__*/React__default["default"].createElement(EmailAndSms, {
     customFields: customFields,
     customFieldsInitialValues: customFieldsInitialValues,
     customFieldsValidationSchema: customFieldsValidationSchema,