@bigbinary/neeto-message-templates-frontend 0.0.6 → 0.0.8

package/README.md

@@ -121,9 +121,17 @@ const App = () => {
 
 * `type`: Type can be `email`, `sms` or `whatsapp`.
 
+- `customFields`: (optional) To add custom field component to the pane.
+
+- `customFieldsInitialValues`: (optional) To provide initial values for the
+  custom fields.
+
+- `customFieldsValidationSchema`: (optional) To provide validation schema for
+  the custom fields.
+
 ### Usage
 
-```javascript
+```js
 import React, { useState } from "react";
 
 import { SendMessagePane } from "@bigbinary/neeto-message-templates-frontend";
@@ -135,12 +143,36 @@ const App = () => {
     //api call
   };
 
+  const customFields = () => (
+    <div className="space-y-4">
+      <Input required label="To" name="to" />
+      <Input required label="From" name="from" />
+    </div>
+  );
+
+  const customFieldsInitialValues = {
+    to: "",
+    from: "",
+  };
+
+  const customFieldsSchema = yup.object().shape({
+    to: yup.string().trim().required("To address is required").email("invalid"),
+    from: yup
+      .string()
+      .trim()
+      .required("From address is required")
+      .email("invalid"),
+  });
+
   return (
     <SendMessagePane
       handleSubmit={handleSubmit}
       isOpen={isPaneOpen}
       type={type}
       onClose={() => setIsPaneOpen(false)}
+      customFields={customFields()}
+      customFieldsInitialValues={customFieldsInitialValues}
+      customFieldsValidationSchema={customFieldsSchema}
     />
   );
 };
@@ -194,3 +226,6 @@ password `welcome`.
 ### Additional Instructions
 
 - Run `yarn build` to bundle the app.
+
+- Note: Run the following command before running rails test
+  `RAILS_ENV=test rails db:migrate`

package/dist/index.cjs.js

@@ -1788,8 +1788,8 @@ function _toArray(arr) {
   return _arrayWithHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableRest();
 }
 
-function ownKeys$6(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$6(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$6$1(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$6$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var consoleLogger = {
   type: 'logger',
   log: function log(args) {
@@ -1867,7 +1867,7 @@ var Logger = function () {
   }, {
     key: "create",
     value: function create(moduleName) {
-      return new Logger(this.logger, _objectSpread$6(_objectSpread$6({}, {
+      return new Logger(this.logger, _objectSpread$6$1(_objectSpread$6$1({}, {
         prefix: "".concat(this.prefix, ":").concat(moduleName, ":")
       }), this.options));
     }
@@ -4731,9 +4731,9 @@ function cape(m) {
   return unes[m];
 }
 
-function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$5(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$6(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var defaultOptions = {
   bindI18n: 'languageChanged',
   bindI18nStore: '',
@@ -4747,7 +4747,7 @@ var i18nInstance;
 var I18nContext = React__default["default"].createContext();
 function setDefaults() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  defaultOptions = _objectSpread$5(_objectSpread$5({}, defaultOptions), options);
+  defaultOptions = _objectSpread$6(_objectSpread$6({}, defaultOptions), options);
 }
 function getDefaults() {
   return defaultOptions;
@@ -4874,9 +4874,9 @@ function hasLoadedNamespace(ns, i18n) {
 var _excluded = ["format"],
     _excluded2 = ["children", "count", "parent", "i18nKey", "context", "tOptions", "values", "defaults", "components", "ns", "i18n", "t", "shouldUnescape"];
 
-function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$4(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$5(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 function hasChildren(node, checkLength) {
   if (!node) return false;
@@ -4902,7 +4902,7 @@ function getAsArray(data) {
 }
 
 function mergeProps(source, target) {
-  var newTarget = _objectSpread$4({}, target);
+  var newTarget = _objectSpread$5({}, target);
 
   newTarget.props = Object.assign(source.props, target.props);
   return newTarget;
@@ -4972,7 +4972,7 @@ function renderNodes(children, targetString, i18n, i18nOptions, combinedTOpts, s
   getData(children);
   var ast = c.parse("<0>".concat(targetString, "</0>"));
 
-  var opts = _objectSpread$4(_objectSpread$4({}, data), combinedTOpts);
+  var opts = _objectSpread$5(_objectSpread$5({}, data), combinedTOpts);
 
   function renderInner(child, node, rootReactNode) {
     var childs = getChildren(child);
@@ -4982,7 +4982,7 @@ function renderNodes(children, targetString, i18n, i18nOptions, combinedTOpts, s
 
   function pushTranslatedJSX(child, inner, mem, i, isVoid) {
     if (child.dummy) child.children = inner;
-    mem.push(React__default["default"].cloneElement(child, _objectSpread$4(_objectSpread$4({}, child.props), {}, {
+    mem.push(React__default["default"].cloneElement(child, _objectSpread$5(_objectSpread$5({}, child.props), {}, {
       key: i
     }), isVoid ? undefined : inner));
   }
@@ -5014,7 +5014,7 @@ function renderNodes(children, targetString, i18n, i18nOptions, combinedTOpts, s
           } else if (isEmptyTransWithHTML) {
           var _inner = mapAST(reactNodes, node.children, rootReactNode);
 
-          mem.push(React__default["default"].cloneElement(child, _objectSpread$4(_objectSpread$4({}, child.props), {}, {
+          mem.push(React__default["default"].cloneElement(child, _objectSpread$5(_objectSpread$5({}, child.props), {}, {
             key: i
           }), _inner));
         } else if (Number.isNaN(parseFloat(node.name))) {
@@ -5045,11 +5045,11 @@ function renderNodes(children, targetString, i18n, i18nOptions, combinedTOpts, s
           var content = node.children[0] ? translationContent : null;
           if (content) mem.push(content);
         } else if (node.children.length === 1 && translationContent) {
-          mem.push(React__default["default"].cloneElement(child, _objectSpread$4(_objectSpread$4({}, child.props), {}, {
+          mem.push(React__default["default"].cloneElement(child, _objectSpread$5(_objectSpread$5({}, child.props), {}, {
             key: i
           }), translationContent));
         } else {
-          mem.push(React__default["default"].cloneElement(child, _objectSpread$4(_objectSpread$4({}, child.props), {}, {
+          mem.push(React__default["default"].cloneElement(child, _objectSpread$5(_objectSpread$5({}, child.props), {}, {
             key: i
           })));
         }
@@ -5112,7 +5112,7 @@ function Trans(_ref) {
 
   if (context) tOptions.context = context;
 
-  var reactI18nextOptions = _objectSpread$4(_objectSpread$4({}, getDefaults()), i18n.options && i18n.options.react);
+  var reactI18nextOptions = _objectSpread$5(_objectSpread$5({}, getDefaults()), i18n.options && i18n.options.react);
 
   var namespaces = ns || t.ns || defaultNSFromContext || i18n.options && i18n.options.defaultNS;
   namespaces = typeof namespaces === 'string' ? [namespaces] : namespaces || ['translation'];
@@ -5120,13 +5120,13 @@ function Trans(_ref) {
   var hashTransKey = reactI18nextOptions.hashTransKey;
   var key = i18nKey || (hashTransKey ? hashTransKey(defaultValue) : defaultValue);
   var interpolationOverride = values ? tOptions.interpolation : {
-    interpolation: _objectSpread$4(_objectSpread$4({}, tOptions.interpolation), {}, {
+    interpolation: _objectSpread$5(_objectSpread$5({}, tOptions.interpolation), {}, {
       prefix: '#$?',
       suffix: '?$#'
     })
   };
 
-  var combinedTOpts = _objectSpread$4(_objectSpread$4(_objectSpread$4(_objectSpread$4({}, tOptions), {}, {
+  var combinedTOpts = _objectSpread$5(_objectSpread$5(_objectSpread$5(_objectSpread$5({}, tOptions), {}, {
     count: count
   }, values), interpolationOverride), {}, {
     defaultValue: defaultValue,
@@ -5171,9 +5171,9 @@ function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
 
-function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$3(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$4(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 function useTranslation(ns) {
   var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var i18nFromProps = props.i18n;
@@ -5201,7 +5201,7 @@ function useTranslation(ns) {
 
   if (i18n.options.react && i18n.options.react.wait !== undefined) warnOnce('It seems you are still using the old wait option, you may migrate to the new useSuspense behaviour.');
 
-  var i18nOptions = _objectSpread$3(_objectSpread$3(_objectSpread$3({}, getDefaults()), i18n.options.react), props);
+  var i18nOptions = _objectSpread$4(_objectSpread$4(_objectSpread$4({}, getDefaults()), i18n.options.react), props);
 
   var useSuspense = i18nOptions.useSuspense,
       keyPrefix = i18nOptions.keyPrefix;
@@ -5274,6 +5274,9 @@ var template = {
 	addEmailTemplate: "Add new email template",
 	addSmsTemplate: "Add new sms template",
 	addWhatsappTemplate: "Add new whatsapp template",
+	editEmailTemplate: "Edit email template",
+	editSmsTemplate: "Edit sms template",
+	editWhatsappTemplate: "Edit whatsapp template",
 	search: "Search {{what}}",
 	markAsActive: "Mark as active",
 	markAsInactive: "Mark as inactive",
@@ -5314,9 +5317,13 @@ var sendMessage = {
 	sms: "Send sms",
 	selectTemplate: "Select a template"
 };
+var common = {
+	send: "Send"
+};
 var en = {
 	template: template,
-	sendMessage: sendMessage
+	sendMessage: sendMessage,
+	common: common
 };
 
 instance.use(Browser).use(initReactI18next).init({
@@ -5374,20 +5381,23 @@ var MESSAGE_TEMPLATES = {
   email: {
     label: t$1("template.emailTemplates"),
     value: "email_template",
-    addButtonText: t$1("template.addEmailTemplate"),
-    labelSingular: t$1("template.emailTemplate")
+    addText: t$1("template.addEmailTemplate"),
+    labelSingular: t$1("template.emailTemplate"),
+    editText: t$1("template.editEmailTemplate")
   },
   sms: {
     label: t$1("template.smsTemplates"),
     value: "sms_template",
-    addButtonText: t$1("template.addSmsTemplate"),
-    labelSingular: t$1("template.smsTemplate")
+    addText: t$1("template.addSmsTemplate"),
+    labelSingular: t$1("template.smsTemplate"),
+    editText: t$1("template.editSmsTemplate")
   },
   whatsapp: {
     label: t$1("template.whatsappTemplates"),
     value: "whatsapp_template",
-    addButtonText: t$1("template.addWhatsappTemplate"),
-    labelSingular: t$1("template.whatsappTemplate")
+    addText: t$1("template.addWhatsappTemplate"),
+    labelSingular: t$1("template.whatsappTemplate"),
+    editText: t$1("template.editWhatsappTemplate")
   }
 };
 var DEFAULT_EDITOR_ROW_COUNT = 15;
@@ -5487,8 +5497,8 @@ var useTemplateStore = zustand.create(reactUtils.withImmutableActions(function (
   };
 }));
 
-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; }
+function ownKeys$3(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$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;
@@ -5502,14 +5512,14 @@ var RowActions = function RowActions(_ref) {
     id = template.id;
   var templateType = useTemplateStore(ramda.prop("templateType"));
   var handleEditTemplate = function handleEditTemplate() {
-    return setManageTemplatePane(_objectSpread$2(_objectSpread$2({}, MESSAGE_TEMPLATE_INITIAL_STATE), {}, {
+    return setManageTemplatePane(_objectSpread$3(_objectSpread$3({}, MESSAGE_TEMPLATE_INITIAL_STATE), {}, {
       isOpen: true,
       isEdit: true,
       template: template
     }));
   };
   var handleDeleteTemplate = function handleDeleteTemplate() {
-    return setManageTemplatePane(_objectSpread$2(_objectSpread$2({}, MESSAGE_TEMPLATE_INITIAL_STATE), {}, {
+    return setManageTemplatePane(_objectSpread$3(_objectSpread$3({}, MESSAGE_TEMPLATE_INITIAL_STATE), {}, {
       isDelete: true,
       template: template
     }));
@@ -6078,8 +6088,8 @@ var TestMessage = function TestMessage(_ref) {
   }));
 };
 
-function ownKeys$1(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$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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 onClose = _ref.onClose,
     isEdit = _ref.isEdit,
@@ -6096,7 +6106,7 @@ var Form$1 = function Form(_ref) {
   var templateType = useTemplateStore(ramda.prop("templateType"));
   var isEmailTemplate = ramda.equals(templateType, "email_template");
   var isTestTemplateVisible = ramda.includes(templateType, ["sms_template", "email_template"]) && shouldIncludeTestTemplate;
-  var _ref2 = isEmailTemplate ? [_objectSpread$1(_objectSpread$1({}, EMAIL_TEMPLATE_INITIAL_VALUES), ramda.pick(["name", "body", "subject", "active"], template)), EMAIL_TEMPLATE_FORM_SCHEMA] : [_objectSpread$1(_objectSpread$1({}, SMS_TEMPLATE_INITIAL_VALUES), ramda.pick(["name", "body", "active"], template)), SMS_TEMPLATE_FORM_VALIDATION_SCHEMA],
+  var _ref2 = isEmailTemplate ? [_objectSpread$2(_objectSpread$2({}, EMAIL_TEMPLATE_INITIAL_VALUES), ramda.pick(["name", "body", "subject", "active"], template)), EMAIL_TEMPLATE_FORM_SCHEMA] : [_objectSpread$2(_objectSpread$2({}, SMS_TEMPLATE_INITIAL_VALUES), ramda.pick(["name", "body", "active"], template)), SMS_TEMPLATE_FORM_VALIDATION_SCHEMA],
     _ref3 = _slicedToArray(_ref2, 2),
     TEMPLATE_INITIAL_VALUES = _ref3[0],
     TEMPLATE_FORM_SCHEMA = _ref3[1];
@@ -6174,12 +6184,13 @@ var Form$1 = function Form(_ref) {
 
 var AddEdit = function AddEdit(_ref) {
   var onClose = _ref.onClose,
-    label = _ref.label,
     createUpdateTemplate = _ref.createUpdateTemplate,
     manageTemplatePane = _ref.manageTemplatePane,
     isTestMessageLoading = _ref.isTestMessageLoading,
     handleSubmitTestTemplate = _ref.handleSubmitTestTemplate,
-    shouldIncludeTestTemplate = _ref.shouldIncludeTestTemplate;
+    shouldIncludeTestTemplate = _ref.shouldIncludeTestTemplate,
+    addText = _ref.addText,
+    editText = _ref.editText;
   var initialFocusField = React.useRef();
   var setInitialFocusField = function setInitialFocusField(fieldRef) {
     return initialFocusField.current = fieldRef;
@@ -6187,6 +6198,7 @@ var AddEdit = function AddEdit(_ref) {
   var isOpen = manageTemplatePane.isOpen,
     isEdit = manageTemplatePane.isEdit,
     template = manageTemplatePane.template;
+  var label = isEdit ? editText : addText;
   return /*#__PURE__*/React__default["default"].createElement(neetoui.Pane, {
     initialFocusRef: initialFocusField,
     isOpen: isOpen,
@@ -6282,7 +6294,7 @@ var List = function List(_ref) {
     setPageProperties = _ref.setPageProperties,
     pageProperties = _ref.pageProperties,
     label = _ref.label,
-    addButtonText = _ref.addButtonText,
+    addText = _ref.addText,
     isFilterApplied = _ref.isFilterApplied;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
@@ -6326,7 +6338,7 @@ var List = function List(_ref) {
     className: "flex h-full w-full items-center justify-center"
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.NoData, {
     primaryButtonProps: {
-      label: addButtonText,
+      label: addText,
       onClick: function onClick() {
         return setManageTemplatePane(ramda.assoc("isOpen", true));
       }
@@ -6355,8 +6367,8 @@ var List = function List(_ref) {
   }));
 };
 
-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; }
+function ownKeys$1(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$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var MessageTemplates = function MessageTemplates(_ref) {
   var _ref$breadcrumbs = _ref.breadcrumbs,
     breadcrumbs = _ref$breadcrumbs === void 0 ? [] : _ref$breadcrumbs,
@@ -6393,11 +6405,12 @@ var MessageTemplates = function MessageTemplates(_ref) {
   var _MESSAGE_TEMPLATES$ty = MESSAGE_TEMPLATES[type],
     label = _MESSAGE_TEMPLATES$ty.label,
     value = _MESSAGE_TEMPLATES$ty.value,
-    addButtonText = _MESSAGE_TEMPLATES$ty.addButtonText,
-    labelSingular = _MESSAGE_TEMPLATES$ty.labelSingular;
+    addText = _MESSAGE_TEMPLATES$ty.addText,
+    labelSingular = _MESSAGE_TEMPLATES$ty.labelSingular,
+    editText = _MESSAGE_TEMPLATES$ty.editText;
   var isFilterApplied = pure.isNotEmpty(filters) || pure.isNotEmpty(searchTerm);
   var handleActionClick = function handleActionClick() {
-    return setManageTemplatePane(_objectSpread(_objectSpread({}, MESSAGE_TEMPLATE_INITIAL_STATE), {}, {
+    return setManageTemplatePane(_objectSpread$1(_objectSpread$1({}, MESSAGE_TEMPLATE_INITIAL_STATE), {}, {
       isOpen: true
     }));
   };
@@ -6411,13 +6424,13 @@ var MessageTemplates = function MessageTemplates(_ref) {
     });
   }, [value]);
   return /*#__PURE__*/React__default["default"].createElement(Container__default["default"], null, /*#__PURE__*/React__default["default"].createElement(NeetoHeader__default["default"], {
-    breadcrumbs: breadcrumbs,
-    searchProps: renderSearchProps(label, setSearchTerm, searchTerm),
-    title: label,
     actionBlock: /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-      label: addButtonText,
+      label: addText,
       onClick: handleActionClick
-    })
+    }),
+    breadcrumbs: breadcrumbs,
+    searchProps: renderSearchProps(label, setSearchTerm, searchTerm),
+    title: label
   }), /*#__PURE__*/React__default["default"].createElement(SubHeader__default["default"], {
     leftActionBlock: /*#__PURE__*/React__default["default"].createElement(neetoFiltersFrontend.Bar, {
       columns: filterColumns,
@@ -6435,7 +6448,7 @@ var MessageTemplates = function MessageTemplates(_ref) {
       }
     })
   }), /*#__PURE__*/React__default["default"].createElement(List, {
-    addButtonText: addButtonText,
+    addText: addText,
     isFilterApplied: isFilterApplied,
     isLoading: isLoading,
     label: label,
@@ -6446,10 +6459,11 @@ var MessageTemplates = function MessageTemplates(_ref) {
     setPageProperties: setPageProperties,
     templatesData: templatesData
   }), /*#__PURE__*/React__default["default"].createElement(AddEdit, {
+    addText: addText,
     createUpdateTemplate: createUpdateTemplate,
+    editText: editText,
     handleSubmitTestTemplate: handleSubmitTestTemplate,
     isTestMessageLoading: isTestMessageLoading,
-    label: addButtonText,
     manageTemplatePane: manageTemplatePane,
     shouldIncludeTestTemplate: shouldIncludeTestTemplate,
     onClose: function onClose() {
@@ -6478,12 +6492,17 @@ var SMS_MESSAGE_FORM_VALIDATION_SCHEMA = yup__namespace.object().shape({
   })
 });
 
+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 isEmailTemplate = _ref.isEmailTemplate,
     onClose = _ref.onClose,
     templates = _ref.templates,
     handleSubmit = _ref.handleSubmit,
-    setInitialFocusField = _ref.setInitialFocusField;
+    setInitialFocusField = _ref.setInitialFocusField,
+    customFields = _ref.customFields,
+    customFieldsInitialValues = _ref.customFieldsInitialValues,
+    customFieldsValidationSchema = _ref.customFieldsValidationSchema;
   var editorRef = React.useRef(null);
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
@@ -6491,26 +6510,31 @@ var Form = function Form(_ref) {
     _ref3 = _slicedToArray(_ref2, 2),
     INITIAL_VALUES = _ref3[0],
     SEND_MESSAGE_FORM_SCHEMA = _ref3[1];
+  var updatedInitialValues = ramda.mergeAll([INITIAL_VALUES, customFieldsInitialValues]);
+  var updatedValidationSchema = yup__namespace.object().shape(_objectSpread(_objectSpread({}, 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__default["default"].createElement(formik$1.Form, {
     formProps: {
       noValidate: true,
       className: "flex w-full flex-col gap-y-4 pb-6"
     },
     formikProps: {
-      initialValues: INITIAL_VALUES,
-      validationSchema: SEND_MESSAGE_FORM_SCHEMA,
+      initialValues: updatedInitialValues,
+      validationSchema: updatedValidationSchema,
       onSubmit: handleSubmit
     }
   }, function (_ref4) {
     var dirty = _ref4.dirty,
       isSubmitting = _ref4.isSubmitting,
-      setValues = _ref4.setValues;
-    var handleTemplateChange = function handleTemplateChange(_ref5) {
-      var value = _ref5.value;
+      setValues = _ref4.setValues,
+      values = _ref4.values;
+    var handleTemplateChange = function handleTemplateChange(value) {
+      if (!value) return;
+      var customFieldValues = ramda.omit(initialValueKeys, values);
       var template = pure.findBy({
-        id: value
+        id: value === null || value === void 0 ? void 0 : value.value
       }, templates);
-      setValues(template);
+      setValues(_objectSpread(_objectSpread({}, template), customFieldValues));
       editorRef.current.editor.commands.setContent(template.body);
     };
     return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Select, {
@@ -6519,16 +6543,16 @@ var Form = function Form(_ref) {
       innerRef: setInitialFocusField,
       label: t("template.title"),
       placeholder: t("sendMessage.selectTemplate"),
-      options: templates.map(function (_ref6) {
-        var name = _ref6.name,
-          id = _ref6.id;
+      options: templates.map(function (_ref5) {
+        var name = _ref5.name,
+          id = _ref5.id;
         return {
           label: name,
           value: id
         };
       }),
       onChange: handleTemplateChange
-    }), isEmailTemplate && /*#__PURE__*/React__default["default"].createElement(formik$1.Input, {
+    }), customFields, isEmailTemplate && /*#__PURE__*/React__default["default"].createElement(formik$1.Input, {
       required: true,
       label: t("template.subject"),
       name: "subject"
@@ -6566,14 +6590,20 @@ var SendMessagePane = function SendMessagePane(_ref) {
     _ref$handleSubmit = _ref.handleSubmit,
     handleSubmit = _ref$handleSubmit === void 0 ? pure.noop : _ref$handleSubmit,
     _ref$onClose = _ref.onClose,
-    onClose = _ref$onClose === void 0 ? pure.noop : _ref$onClose;
+    onClose = _ref$onClose === void 0 ? pure.noop : _ref$onClose,
+    _ref$customFields = _ref.customFields,
+    customFields = _ref$customFields === void 0 ? null : _ref$customFields,
+    _ref$customFieldsInit = _ref.customFieldsInitialValues,
+    customFieldsInitialValues = _ref$customFieldsInit === void 0 ? {} : _ref$customFieldsInit,
+    _ref$customFieldsVali = _ref.customFieldsValidationSchema,
+    customFieldsValidationSchema = _ref$customFieldsVali === void 0 ? {} : _ref$customFieldsVali;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
   var initialFocusField = React.useRef();
   var setInitialFocusField = function setInitialFocusField(fieldRef) {
     return initialFocusField.current = fieldRef;
   };
-  var _MESSAGE_TEMPLATES$ty = MESSAGE_TEMPLATES[type],
-    label = _MESSAGE_TEMPLATES$ty.label,
-    value = _MESSAGE_TEMPLATES$ty.value;
+  var value = MESSAGE_TEMPLATES[type].value;
   var templateParams = {
     status: "active",
     templateType: value
@@ -6591,7 +6621,10 @@ 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"
-  }, label)), /*#__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, /*#__PURE__*/React__default["default"].createElement(Form, {
+    customFields: customFields,
+    customFieldsInitialValues: customFieldsInitialValues,
+    customFieldsValidationSchema: customFieldsValidationSchema,
     handleSubmit: handleSubmit,
     isEmailTemplate: isEmailTemplate,
     setInitialFocusField: setInitialFocusField,