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

package/README.md

@@ -78,6 +78,8 @@ yarn add @bigbinary/neeto-message-templates-frontend
 
 - `type`: Type can be `email`, `sms` or `whatsapp`.
 
+- `templateVariables`: (optional) To add dynamic variables to form body field.
+
 ### Usage
 
 ```javascript
@@ -96,12 +98,20 @@ const App = () => {
     //api call
   };
 
+  const TEMPLATE_VARIABLES = [
+    {
+      key: "name",
+      label: "Name",
+    },
+  ];
+
   return (
     <MessageTemplates
       shouldIncludeTestTemplate
       breadcrumbs={breadcrumbs}
       handleSubmitTestTemplate={handleSubmit}
       isTestMessageLoading={isTestMessageLoading}
+      templateVariables={TEMPLATE_VARIABLES}
       type={type}
     />
   );
@@ -121,9 +131,19 @@ 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.
+
+- `templateVariables`: (optional) To add dynamic variables to form body field.
+
 ### Usage
 
-```javascript
+```js
 import React, { useState } from "react";
 
 import { SendMessagePane } from "@bigbinary/neeto-message-templates-frontend";
@@ -135,12 +155,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 +238,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;
@@ -5401,10 +5401,6 @@ var MESSAGE_TEMPLATES = {
   }
 };
 var DEFAULT_EDITOR_ROW_COUNT = 15;
-var TEMPLATE_VARIABLES = [{
-  key: "name",
-  label: t$1("template.name")
-}];
 
 var MESSAGE_TEMPLATE_INITIAL_STATE = {
   isOpen: false,
@@ -5497,8 +5493,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;
@@ -5512,14 +5508,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
     }));
@@ -6088,8 +6084,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,
@@ -6099,14 +6095,15 @@ var Form$1 = function Form(_ref) {
     setInitialFocusField = _ref.setInitialFocusField,
     handleSubmitTestTemplate = _ref.handleSubmitTestTemplate,
     isTestMessageLoading = _ref.isTestMessageLoading,
-    shouldIncludeTestTemplate = _ref.shouldIncludeTestTemplate;
+    shouldIncludeTestTemplate = _ref.shouldIncludeTestTemplate,
+    templateVariables = _ref.templateVariables;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var editorRef = React.useRef(null);
   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];
@@ -6161,7 +6158,7 @@ var Form$1 = function Form(_ref) {
       name: "body",
       ref: editorRef,
       rows: DEFAULT_EDITOR_ROW_COUNT,
-      variables: TEMPLATE_VARIABLES
+      variables: templateVariables
     }), isTestTemplateVisible && /*#__PURE__*/React__default["default"].createElement(TestMessage, {
       handleSubmitTestTemplate: handleSubmitTestTemplate,
       isEmailTemplate: isEmailTemplate,
@@ -6190,7 +6187,8 @@ var AddEdit = function AddEdit(_ref) {
     handleSubmitTestTemplate = _ref.handleSubmitTestTemplate,
     shouldIncludeTestTemplate = _ref.shouldIncludeTestTemplate,
     addText = _ref.addText,
-    editText = _ref.editText;
+    editText = _ref.editText,
+    templateVariables = _ref.templateVariables;
   var initialFocusField = React.useRef();
   var setInitialFocusField = function setInitialFocusField(fieldRef) {
     return initialFocusField.current = fieldRef;
@@ -6214,6 +6212,7 @@ var AddEdit = function AddEdit(_ref) {
     setInitialFocusField: setInitialFocusField,
     shouldIncludeTestTemplate: shouldIncludeTestTemplate,
     template: template,
+    templateVariables: templateVariables,
     onClose: onClose
   })));
 };
@@ -6367,8 +6366,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,
@@ -6379,7 +6378,9 @@ var MessageTemplates = function MessageTemplates(_ref) {
     _ref$isTestMessageLoa = _ref.isTestMessageLoading,
     isTestMessageLoading = _ref$isTestMessageLoa === void 0 ? false : _ref$isTestMessageLoa,
     _ref$shouldIncludeTes = _ref.shouldIncludeTestTemplate,
-    shouldIncludeTestTemplate = _ref$shouldIncludeTes === void 0 ? true : _ref$shouldIncludeTes;
+    shouldIncludeTestTemplate = _ref$shouldIncludeTes === void 0 ? true : _ref$shouldIncludeTes,
+    _ref$templateVariable = _ref.templateVariables,
+    templateVariables = _ref$templateVariable === void 0 ? {} : _ref$templateVariable;
   var _useState = React.useState(MESSAGE_TEMPLATE_INITIAL_STATE),
     _useState2 = _slicedToArray(_useState, 2),
     manageTemplatePane = _useState2[0],
@@ -6410,7 +6411,7 @@ var MessageTemplates = function MessageTemplates(_ref) {
     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
     }));
   };
@@ -6466,6 +6467,7 @@ var MessageTemplates = function MessageTemplates(_ref) {
     isTestMessageLoading: isTestMessageLoading,
     manageTemplatePane: manageTemplatePane,
     shouldIncludeTestTemplate: shouldIncludeTestTemplate,
+    templateVariables: templateVariables,
     onClose: function onClose() {
       return setManageTemplatePane(ramda.assoc("isOpen", false));
     }
@@ -6492,12 +6494,18 @@ 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,
+    templateVariables = _ref.templateVariables,
+    customFields = _ref.customFields,
+    customFieldsInitialValues = _ref.customFieldsInitialValues,
+    customFieldsValidationSchema = _ref.customFieldsValidationSchema;
   var editorRef = React.useRef(null);
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
@@ -6505,26 +6513,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, {
@@ -6533,16 +6546,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"
@@ -6555,7 +6568,7 @@ var Form = function Form(_ref) {
       name: "body",
       ref: editorRef,
       rows: DEFAULT_EDITOR_ROW_COUNT,
-      variables: TEMPLATE_VARIABLES
+      variables: templateVariables
     }), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Footer, {
       className: "absolute bottom-0 left-0 flex gap-x-2"
     }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
@@ -6580,7 +6593,15 @@ 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,
+    _ref$templateVariable = _ref.templateVariables,
+    templateVariables = _ref$templateVariable === void 0 ? {} : _ref$templateVariable;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var initialFocusField = React.useRef();
@@ -6606,9 +6627,13 @@ var SendMessagePane = function SendMessagePane(_ref) {
     style: "h2",
     weight: "semibold"
   }, 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,
+    templateVariables: templateVariables,
     templates: templates,
     onClose: onClose
   })));