@bigbinary/neeto-approvals-frontend 0.2.7 → 0.2.9

package/dist/index.cjs.js

@@ -6,18 +6,13 @@ var React = require('react');
 var Container = require('@bigbinary/neeto-molecules/Container');
 var reactRouterDom = require('react-router-dom');
 var i18next = require('i18next');
-var yup = require('yup');
 var constants = require('@bigbinary/neeto-commons-frontend/constants');
 var neetoui = require('@bigbinary/neetoui');
+var ramda = require('ramda');
 var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
-var PageLoader = require('@bigbinary/neeto-molecules/PageLoader');
 var reactI18next = require('react-i18next');
-var ramda = require('ramda');
 var reactQuery = require('react-query');
 var axios = require('axios');
-var formik = require('@bigbinary/neetoui/formik');
-var neetoIcons = require('@bigbinary/neeto-icons');
-var TableWrapper = require('@bigbinary/neeto-molecules/TableWrapper');
 var utils = require('@bigbinary/neeto-commons-frontend/utils');
 var dayjs = require('dayjs');
 var timezone = require('dayjs/plugin/timezone');
@@ -25,7 +20,11 @@ var utc = require('dayjs/plugin/utc');
 var initializers = require('@bigbinary/neeto-commons-frontend/initializers');
 var neetoEditor = require('@bigbinary/neeto-editor');
 var pure = require('@bigbinary/neeto-commons-frontend/pure');
-var formik$1 = require('formik');
+var PageLoader = require('@bigbinary/neeto-molecules/PageLoader');
+var formik = require('@bigbinary/neetoui/formik');
+var yup = require('yup');
+var TableWrapper = require('@bigbinary/neeto-molecules/TableWrapper');
+var MoreDropdown = require('@bigbinary/neeto-molecules/MoreDropdown');
 var NeetoHeader = require('@bigbinary/neeto-molecules/Header');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -51,13 +50,14 @@ function _interopNamespace(e) {
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var Container__default = /*#__PURE__*/_interopDefaultLegacy(Container);
 var i18next__default = /*#__PURE__*/_interopDefaultLegacy(i18next);
-var yup__namespace = /*#__PURE__*/_interopNamespace(yup);
-var PageLoader__default = /*#__PURE__*/_interopDefaultLegacy(PageLoader);
 var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
-var TableWrapper__default = /*#__PURE__*/_interopDefaultLegacy(TableWrapper);
 var dayjs__default = /*#__PURE__*/_interopDefaultLegacy(dayjs);
 var timezone__default = /*#__PURE__*/_interopDefaultLegacy(timezone);
 var utc__default = /*#__PURE__*/_interopDefaultLegacy(utc);
+var PageLoader__default = /*#__PURE__*/_interopDefaultLegacy(PageLoader);
+var yup__namespace = /*#__PURE__*/_interopNamespace(yup);
+var TableWrapper__default = /*#__PURE__*/_interopDefaultLegacy(TableWrapper);
+var MoreDropdown__default = /*#__PURE__*/_interopDefaultLegacy(MoreDropdown);
 var NeetoHeader__default = /*#__PURE__*/_interopDefaultLegacy(NeetoHeader);
 
 function _typeof$1(obj) {
@@ -156,12 +156,9 @@ function _slicedToArray$1(arr, i) {
   return _arrayWithHoles$1(arr) || _iterableToArrayLimit$1(arr, i) || _unsupportedIterableToArray$1(arr, i) || _nonIterableRest$1();
 }
 
-var BASE_URL = "neeto_approvals";
-var TEMPLATE_URL = "".concat(BASE_URL, "/templates");
 var routes = {
   home: "/",
   approvals: "/approvals/",
-  approvers: "approvers",
   pending: "pending",
   history: "history",
   templates: {
@@ -172,597 +169,6 @@ var routes = {
   "public": "approvals/public/request/:id"
 };
 
-new URLSearchParams(window.location.search);
-var DEFAULT_PAGE_SIZE = 8;
-var DEFAULT_FILTER_VALUES = {
-  searchTerm: "",
-  sortBy: "",
-  orderBy: ""
-};
-var SEARCH_DELAY = 750;
-var STATUSES = {
-  approved: "approved",
-  rejected: "rejected",
-  pending: "pending",
-  cancelled: "cancelled"
-};
-var STATUS_TAG_STYLE = {
-  pending: "primary",
-  approved: "success",
-  rejected: "danger",
-  cancelled: "warning"
-};
-var APPROVAL_REQUEST_FORM_INITIAL_VALUES = {
-  message: "",
-  variables: []
-};
-var APPROVAL_REQUEST_FORM_VALIDATION_SCHEMA = yup__namespace.object().shape({
-  variables: yup__namespace.array().of(yup__namespace.object().shape({
-    variable: yup__namespace.string().trim().required(i18next.t("neetoApprovals.validations.required", {
-      what: i18next.t("neetoApprovals.common.field")
-    }))
-  }))
-});
-var STATUS_UPDATED_BY = {
-  rejected: i18next.t("neetoApprovals.common.rejectedBy"),
-  approved: i18next.t("neetoApprovals.common.approvedBy"),
-  cancelled: i18next.t("neetoApprovals.common.cancelledBy")
-};
-
-var handleEmptyPage = function handleEmptyPage(data, pageProperties, handleTablePagination) {
-  if (ramda.isEmpty(data) && pageProperties.page !== 1) {
-    handleTablePagination(pageProperties.page - 1, pageProperties.pageSize);
-  }
-};
-
-var fetch$3 = function fetch(params) {
-  return axios__default["default"].get("".concat(BASE_URL, "/approvers"), {
-    params: params
-  });
-};
-var create$1 = function create(payload) {
-  return axios__default["default"].post("".concat(BASE_URL, "/approvers"), payload);
-};
-var update$2 = function update(_ref) {
-  var id = _ref.id,
-    payload = _ref.payload;
-  return axios__default["default"].put("".concat(BASE_URL, "/approvers/").concat(id), {
-    approver: payload
-  });
-};
-var destroy$1 = function destroy(_ref2) {
-  var approverId = _ref2.approverId;
-  return axios__default["default"]["delete"]("".concat(BASE_URL, "/approvers/").concat(approverId));
-};
-var approversApi = {
-  create: create$1,
-  fetch: fetch$3,
-  update: update$2,
-  destroy: destroy$1
-};
-
-var QUERY_KEYS = {
-  APPROVERS: "neeto-approvals-approvers",
-  TEMPLATES: "neeto-approvals-templates",
-  REQUESTS: "neeto-approvals-requests",
-  SHOW_TEMPLATE: "neeto-approvals-show-template",
-  SHOW_PUBLIC_REQUEST: "neeto-approvals-show-public-request",
-  VIEWS: "neeto-approvals-views"
-};
-
-function ownKeys$c(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$c(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$c(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$c(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var useFetchApprovers = function useFetchApprovers() {
-  var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  return reactQuery.useQuery([QUERY_KEYS.APPROVERS, params], function () {
-    return approversApi.fetch(params);
-  }, _objectSpread$c({
-    select: function select(response) {
-      return response.data || response;
-    },
-    keepPreviousData: true,
-    onSuccess: function onSuccess(_ref) {
-      var _params$onSuccess;
-      var approvers = _ref.approvers;
-      return params === null || params === void 0 ? void 0 : (_params$onSuccess = params.onSuccess) === null || _params$onSuccess === void 0 ? void 0 : _params$onSuccess.call(params, approvers);
-    }
-  }, options));
-};
-var useCreateApprover = function useCreateApprover(options) {
-  return reactUtils.useMutationWithInvalidation(approversApi.create, _objectSpread$c({
-    keysToInvalidate: [QUERY_KEYS.APPROVERS, QUERY_KEYS.VIEWS]
-  }, options));
-};
-var useUpdateApprover = function useUpdateApprover(options) {
-  return reactUtils.useMutationWithInvalidation(approversApi.update, _objectSpread$c({
-    keysToInvalidate: [QUERY_KEYS.APPROVERS]
-  }, options));
-};
-var useDeleteApprover = function useDeleteApprover(options) {
-  return reactUtils.useMutationWithInvalidation(approversApi.destroy, _objectSpread$c({
-    keysToInvalidate: [QUERY_KEYS.APPROVERS, QUERY_KEYS.VIEWS]
-  }, options));
-};
-
-var useUrlSearchParams = function useUrlSearchParams() {
-  var _useLocation = reactRouterDom.useLocation(),
-    search = _useLocation.search;
-  return React.useMemo(function () {
-    return new URLSearchParams(search);
-  }, [search]);
-};
-
-var usePaginate = function usePaginate() {
-  var urlParams = useUrlSearchParams();
-  var _useState = React.useState({
-      page: Number(urlParams.get("page")) || constants.DEFAULT_PAGE_INDEX,
-      pageSize: Number(urlParams.get("size")) || DEFAULT_PAGE_SIZE
-    }),
-    _useState2 = _slicedToArray$1(_useState, 2),
-    pageProperties = _useState2[0],
-    setPageProperties = _useState2[1];
-  var history = reactRouterDom.useHistory();
-  var handleTablePagination = React.useCallback(function (page, pageSize) {
-    urlParams.set("page", page);
-    urlParams.set("size", pageSize);
-    history.push({
-      search: urlParams.toString()
-    });
-    setPageProperties({
-      page: page,
-      pageSize: pageSize
-    });
-  }, [urlParams, history]);
-  React.useEffect(function () {
-    var page = urlParams.get("page") || constants.DEFAULT_PAGE_INDEX;
-    var pageSize = urlParams.get("size") || DEFAULT_PAGE_SIZE;
-    setPageProperties({
-      page: Number(page),
-      pageSize: Number(pageSize)
-    });
-  }, [urlParams]);
-  return {
-    pageProperties: pageProperties,
-    handleTablePagination: handleTablePagination
-  };
-};
-
-var _t$1, _t2;
-var MAX_NAME_LENGTH = 40;
-var APPROVER_FORM_INITIAL_VALUES = {
-  firstName: "",
-  lastName: "",
-  email: ""
-};
-var APPROVER_FORM_VALIDATION_SCHEMA = yup__namespace.object().shape({
-  firstName: yup__namespace.string().trim().max(MAX_NAME_LENGTH, i18next.t("neetoApprovals.validations.limitExceeded", {
-    what: (_t$1 = i18next.t("neetoApprovals.inputs.labels.firstName")) === null || _t$1 === void 0 ? void 0 : _t$1.toLocaleLowerCase(),
-    limit: MAX_NAME_LENGTH
-  })).required(i18next.t("neetoApprovals.validations.required", {
-    what: i18next.t("neetoApprovals.inputs.labels.firstName")
-  })),
-  lastName: yup__namespace.string().trim().max(MAX_NAME_LENGTH, i18next.t("neetoApprovals.validations.limitExceeded", {
-    what: (_t2 = i18next.t("neetoApprovals.inputs.labels.lastName")) === null || _t2 === void 0 ? void 0 : _t2.toLocaleLowerCase(),
-    limit: MAX_NAME_LENGTH
-  })).required(i18next.t("neetoApprovals.validations.required", {
-    what: i18next.t("neetoApprovals.inputs.labels.lastName")
-  })),
-  email: yup__namespace.string().email().required(i18next.t("neetoApprovals.validations.required", {
-    what: i18next.t("neetoApprovals.common.email")
-  }))
-});
-
-var Form$2 = function Form(_ref) {
-  var isOpen = _ref.isOpen,
-    onClose = _ref.onClose,
-    onSubmit = _ref.onSubmit,
-    _ref$initialData = _ref.initialData,
-    initialData = _ref$initialData === void 0 ? {} : _ref$initialData,
-    isLoading = _ref.isLoading;
-  var inputReference = React.useRef(null);
-  var _useTranslation = reactI18next.useTranslation(),
-    t = _useTranslation.t;
-  return /*#__PURE__*/React__default["default"].createElement(neetoui.Pane, {
-    initialFocusRef: inputReference,
-    isOpen: isOpen,
-    onClose: onClose
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Header, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    style: "h2"
-  }, ramda.isEmpty(initialData) ? t("neetoApprovals.typography.newApprover") : t("neetoApprovals.typography.editApprover"))), /*#__PURE__*/React__default["default"].createElement(formik.Form, {
-    formikProps: {
-      initialValues: initialData || APPROVER_FORM_INITIAL_VALUES,
-      validationSchema: APPROVER_FORM_VALIDATION_SCHEMA,
-      onSubmit: onSubmit
-    }
-  }, /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Body, null, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "w-full space-y-6"
-  }, /*#__PURE__*/React__default["default"].createElement(formik.Input, {
-    required: true,
-    className: "w-full",
-    label: t("neetoApprovals.inputs.labels.firstName"),
-    name: "firstName",
-    placeholder: t("neetoApprovals.inputs.placeholders.firstName"),
-    ref: inputReference
-  }), /*#__PURE__*/React__default["default"].createElement(formik.Input, {
-    required: true,
-    className: "w-full",
-    label: t("neetoApprovals.inputs.labels.lastName"),
-    name: "lastName",
-    placeholder: t("neetoApprovals.inputs.placeholders.lastName")
-  }), /*#__PURE__*/React__default["default"].createElement(formik.Input, {
-    required: true,
-    className: "w-full",
-    label: t("neetoApprovals.common.email"),
-    name: "email",
-    placeholder: t("neetoApprovals.inputs.placeholders.email")
-  }))), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Footer, {
-    className: "flex gap-x-2"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-    label: t("neetoApprovals.buttons.saveChanges"),
-    loading: isLoading,
-    type: "submit"
-  }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-    label: t("neetoApprovals.buttons.cancel"),
-    style: "text",
-    onClick: onClose
-  })))));
-};
-
-var Create$1 = function Create(_ref) {
-  var isNewApproverPaneOpen = _ref.isNewApproverPaneOpen,
-    setIsNewApproverPaneOpen = _ref.setIsNewApproverPaneOpen,
-    pageProperties = _ref.pageProperties,
-    handleTablePagination = _ref.handleTablePagination,
-    totalCount = _ref.totalCount;
-  var _useCreateApprover = useCreateApprover(),
-    createApprover = _useCreateApprover.mutate,
-    isLoading = _useCreateApprover.isLoading;
-  var getLastPageNumber = function getLastPageNumber() {
-    return Math.ceil((totalCount + 1) / pageProperties.pageSize);
-  };
-  var onSubmit = function onSubmit(approver) {
-    return createApprover({
-      approver: approver
-    }, {
-      onSuccess: function onSuccess() {
-        var lastPageNumber = getLastPageNumber();
-        lastPageNumber !== pageProperties.page && handleTablePagination(lastPageNumber, pageProperties.pageSize);
-        setIsNewApproverPaneOpen(false);
-      }
-    });
-  };
-  return /*#__PURE__*/React__default["default"].createElement(Form$2, {
-    isLoading: isLoading,
-    onSubmit: onSubmit,
-    isOpen: isNewApproverPaneOpen,
-    onClose: function onClose() {
-      return setIsNewApproverPaneOpen(false);
-    }
-  });
-};
-var Create$2 = /*#__PURE__*/React__default["default"].memo(Create$1);
-
-var Edit$1 = function Edit(_ref) {
-  var approver = _ref.approver,
-    setApproverToEdit = _ref.setApproverToEdit;
-  var _useUpdateApprover = useUpdateApprover(),
-    updateApprover = _useUpdateApprover.mutate,
-    isLoading = _useUpdateApprover.isLoading;
-  var onSubmit = function onSubmit(_ref2) {
-    var firstName = _ref2.firstName,
-      lastName = _ref2.lastName,
-      email = _ref2.email;
-    return updateApprover({
-      id: approver.id,
-      payload: {
-        firstName: firstName,
-        lastName: lastName,
-        email: email
-      }
-    }, {
-      onSuccess: function onSuccess() {
-        return setApproverToEdit("");
-      }
-    });
-  };
-  return /*#__PURE__*/React__default["default"].createElement(Form$2, {
-    initialData: approver,
-    isLoading: isLoading,
-    isOpen: !!approver,
-    onClose: function onClose() {
-      return setApproverToEdit("");
-    },
-    onSubmit: onSubmit
-  });
-};
-var Edit$2 = /*#__PURE__*/React__default["default"].memo(Edit$1);
-
-var Menu$1 = neetoui.Dropdown.Menu,
-  MenuItem$1 = neetoui.Dropdown.MenuItem;
-var columnData$1 = function columnData(_ref) {
-  var onEditClick = _ref.onEditClick,
-    onDeleteClick = _ref.onDeleteClick;
-  return [{
-    dataIndex: "name",
-    key: "name",
-    sorter: true,
-    title: i18next__default["default"].t("neetoApprovals.common.name")
-  }, {
-    dataIndex: "email",
-    key: "email",
-    sorter: true,
-    title: i18next__default["default"].t("neetoApprovals.common.email")
-  }, {
-    key: "actions",
-    ellipsis: true,
-    render: function render(_, approver) {
-      return /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "flex flex-row items-center justify-end space-x-3",
-        onClick: function onClick(event) {
-          return event.stopPropagation();
-        }
-      }, /*#__PURE__*/React__default["default"].createElement(neetoui.Dropdown, {
-        autoWidth: true,
-        buttonProps: {
-          style: "text"
-        },
-        className: "flex-shrink-0",
-        icon: neetoIcons.MenuHorizontal,
-        position: "bottom-end",
-        strategy: "fixed"
-      }, /*#__PURE__*/React__default["default"].createElement(Menu$1, null, /*#__PURE__*/React__default["default"].createElement(MenuItem$1.Button, {
-        "data-cy": "approvers-edit-button",
-        onClick: function onClick() {
-          return onEditClick(approver);
-        }
-      }, i18next__default["default"].t("neetoApprovals.common.edit")), /*#__PURE__*/React__default["default"].createElement(MenuItem$1.Button, {
-        "data-cy": "approvers-delete-button",
-        onClick: function onClick() {
-          return onDeleteClick(approver);
-        }
-      }, i18next__default["default"].t("neetoApprovals.common.delete")))));
-    }
-  }];
-};
-
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-  return target;
-}
-
-function _objectWithoutProperties(source, excluded) {
-  if (source == null) return {};
-  var target = _objectWithoutPropertiesLoose(source, excluded);
-  var key, i;
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-      target[key] = source[key];
-    }
-  }
-  return target;
-}
-
-var renderNoDataHelpText = function renderNoDataHelpText(_ref) {
-  var entity = _ref.entity,
-    url = _ref.url;
-  return /*#__PURE__*/React__default["default"].createElement(reactI18next.Trans, {
-    i18nKey: "neetoApprovals.common.noDataHelpText",
-    values: {
-      entity: entity
-    },
-    components: {
-      a: /*#__PURE__*/React__default["default"].createElement(reactRouterDom.Link, {
-        className: "neeto-ui-text-primary-600 underline",
-        target: "_blank",
-        to: {
-          pathname: url
-        }
-      })
-    }
-  });
-};
-
-var _excluded$1 = ["entity", "columnData", "items", "totalCount", "filters", "setFilters", "setIsPaneOpen", "helpDocUrl", "onEditClick", "onDeleteClick"];
-function ownKeys$b(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$b(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$b(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$b(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var Table = function Table(_ref) {
-  var _t;
-  var entity = _ref.entity,
-    columnData = _ref.columnData,
-    items = _ref.items,
-    totalCount = _ref.totalCount,
-    filters = _ref.filters,
-    setFilters = _ref.setFilters,
-    setIsPaneOpen = _ref.setIsPaneOpen,
-    helpDocUrl = _ref.helpDocUrl,
-    onEditClick = _ref.onEditClick,
-    onDeleteClick = _ref.onDeleteClick,
-    otherProps = _objectWithoutProperties(_ref, _excluded$1);
-  var _usePaginate = usePaginate(),
-    pageProperties = _usePaginate.pageProperties,
-    handleTablePagination = _usePaginate.handleTablePagination;
-  var _useTranslation = reactI18next.useTranslation(),
-    t = _useTranslation.t;
-  var columns = columnData({
-    onEditClick: onEditClick,
-    onDeleteClick: onDeleteClick
-  });
-  var handleTableChange = function handleTableChange(_, __, sorter) {
-    setFilters(_objectSpread$b(_objectSpread$b({}, filters), {}, {
-      sortBy: sorter.field,
-      orderBy: sorter.order
-    }));
-  };
-  var noDataProps = {
-    primaryButtonProps: {
-      label: t("neetoApprovals.common.add_", {
-        what: (_t = t("neetoApprovals.common.template", constants.SINGULAR)) === null || _t === void 0 ? void 0 : _t.toLocaleLowerCase()
-      }),
-      onClick: function onClick() {
-        return setIsPaneOpen(true);
-      }
-    },
-    helpText: renderNoDataHelpText({
-      entity: entity,
-      url: helpDocUrl
-    })
-  };
-  if (ramda.isEmpty(items)) {
-    return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "flex h-full w-full flex-grow items-center justify-center"
-    }, /*#__PURE__*/React__default["default"].createElement(neetoui.NoData, _extends({
-      title: t("neetoApprovals.common.notFound_", {
-        what: entity
-      })
-    }, !filters.searchTerm && noDataProps)));
-  }
-  return /*#__PURE__*/React__default["default"].createElement(TableWrapper__default["default"], {
-    className: "mt-12",
-    hasPagination: totalCount > pageProperties.pageSize
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Table, _extends({
-    fixedHeight: true,
-    columnData: columns,
-    currentPageNumber: pageProperties.page,
-    defaultPageSize: pageProperties.pageSize,
-    handlePageChange: handleTablePagination,
-    rowData: items,
-    paginationProps: {
-      hideOnSinglePage: (items === null || items === void 0 ? void 0 : items.length) < DEFAULT_PAGE_SIZE + 1
-    },
-    onChange: handleTableChange
-  }, _objectSpread$b({
-    totalCount: totalCount
-  }, otherProps))));
-};
-
-function ownKeys$a(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$a(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$a(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$a(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var Approvers = function Approvers(_ref) {
-  var _t, _t2, _t3;
-  var filters = _ref.filters,
-    isNewApproverPaneOpen = _ref.isNewApproverPaneOpen,
-    setIsNewApproverPaneOpen = _ref.setIsNewApproverPaneOpen,
-    helpDocUrl = _ref.helpDocUrl,
-    setFilters = _ref.setFilters;
-  var _useState = React.useState(""),
-    _useState2 = _slicedToArray$1(_useState, 2),
-    approverToEdit = _useState2[0],
-    setApproverToEdit = _useState2[1];
-  var _useState3 = React.useState(""),
-    _useState4 = _slicedToArray$1(_useState3, 2),
-    approverToDelete = _useState4[0],
-    setApproverToDelete = _useState4[1];
-  var debouncedSearchTerm = reactUtils.useDebounce(filters.searchTerm, SEARCH_DELAY);
-  var _usePaginate = usePaginate(),
-    pageProperties = _usePaginate.pageProperties,
-    handleTablePagination = _usePaginate.handleTablePagination;
-  var _useTranslation = reactI18next.useTranslation(),
-    t = _useTranslation.t;
-  var _useFetchApprovers = useFetchApprovers(_objectSpread$a(_objectSpread$a(_objectSpread$a({}, pageProperties), filters), {}, {
-      searchTerm: debouncedSearchTerm.trim()
-    }), {
-      onSuccess: function onSuccess(approvers) {
-        handleEmptyPage(approvers, pageProperties, handleTablePagination);
-      }
-    }),
-    _useFetchApprovers$da = _useFetchApprovers.data,
-    _useFetchApprovers$da2 = _useFetchApprovers$da === void 0 ? {} : _useFetchApprovers$da,
-    _useFetchApprovers$da3 = _useFetchApprovers$da2.approvers,
-    approvers = _useFetchApprovers$da3 === void 0 ? [] : _useFetchApprovers$da3,
-    _useFetchApprovers$da4 = _useFetchApprovers$da2.totalCount,
-    totalCount = _useFetchApprovers$da4 === void 0 ? 0 : _useFetchApprovers$da4,
-    isApproverLoading = _useFetchApprovers.isLoading;
-  var _useDeleteApprover = useDeleteApprover(),
-    deleteApprover = _useDeleteApprover.mutate,
-    isDeleting = _useDeleteApprover.isLoading;
-  var onEditClick = function onEditClick(approver) {
-    var name = approver.name.split(" ");
-    setApproverToEdit(_objectSpread$a(_objectSpread$a({}, approver), {}, {
-      firstName: name[0],
-      lastName: name[1]
-    }));
-  };
-  var onDeleteClick = function onDeleteClick(approver) {
-    setApproverToDelete(approver);
-  };
-  var entity = (_t = t("neetoApprovals.common.approver", constants.PLURAL)) === null || _t === void 0 ? void 0 : _t.toLocaleLowerCase();
-  var handleDelete = function handleDelete(approverId) {
-    deleteApprover({
-      approverId: approverId
-    });
-    setApproverToDelete("");
-  };
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, isApproverLoading ? /*#__PURE__*/React__default["default"].createElement(PageLoader__default["default"], null) : /*#__PURE__*/React__default["default"].createElement(Table, {
-    items: approvers,
-    setIsPaneOpen: setIsNewApproverPaneOpen,
-    columnData: columnData$1,
-    entity: entity,
-    filters: filters,
-    helpDocUrl: helpDocUrl,
-    onDeleteClick: onDeleteClick,
-    onEditClick: onEditClick,
-    setFilters: setFilters,
-    totalCount: totalCount
-  }), /*#__PURE__*/React__default["default"].createElement(Create$2, {
-    handleTablePagination: handleTablePagination,
-    isNewApproverPaneOpen: isNewApproverPaneOpen,
-    pageProperties: pageProperties,
-    setIsNewApproverPaneOpen: setIsNewApproverPaneOpen,
-    totalCount: totalCount
-  }), /*#__PURE__*/React__default["default"].createElement(Edit$2, {
-    approver: approverToEdit,
-    setApproverToEdit: setApproverToEdit
-  }), /*#__PURE__*/React__default["default"].createElement(neetoui.Alert, {
-    isOpen: !!approverToDelete,
-    isSubmitting: isDeleting,
-    submitButtonLabel: t("neetoApprovals.buttons.delete"),
-    message: /*#__PURE__*/React__default["default"].createElement(reactI18next.Trans, {
-      i18nKey: "neetoApprovals.alerts.deleting_",
-      values: {
-        what: (_t2 = t("neetoApprovals.common.approver", constants.SINGULAR)) === null || _t2 === void 0 ? void 0 : _t2.toLocaleLowerCase(),
-        name: approverToDelete === null || approverToDelete === void 0 ? void 0 : approverToDelete.name
-      }
-    }),
-    title: t("neetoApprovals.common.delete_", {
-      what: (_t3 = t("neetoApprovals.common.approver", constants.SINGULAR)) === null || _t3 === void 0 ? void 0 : _t3.toLocaleLowerCase()
-    }),
-    onClose: function onClose() {
-      return setApproverToDelete("");
-    },
-    onSubmit: function onSubmit() {
-      return handleDelete(approverToDelete === null || approverToDelete === void 0 ? void 0 : approverToDelete.id);
-    }
-  }));
-};
-
 function _arrayWithHoles(arr) {
   if (Array.isArray(arr)) return arr;
 }
@@ -884,16 +290,20 @@ var filterNonNull = function filterNonNull(object) {
   }));
 };
 nullSafe(filterNonNull);
-var findById = /*#__PURE__*/ramda.curry(function (id, array) {
-  return array.find(function (item) {
-    return item.id === id;
-  });
-});
 var findBy = /*#__PURE__*/ramda.curry(function (pattern, array) {
   return array.find(matches(pattern));
 });
 
-var fetch$2 = function fetch(params, url) {
+var handleEmptyPage = function handleEmptyPage(data, pageProperties, handlePageChange) {
+  if (ramda.isEmpty(data) && pageProperties.page !== 1) {
+    handlePageChange(pageProperties.page - 1, pageProperties.pageSize);
+  }
+};
+
+var BASE_URL = "neeto_approvals";
+var TEMPLATE_URL = "".concat(BASE_URL, "/templates");
+
+var fetch$3 = function fetch(params, url) {
   return axios__default["default"].get(url, {
     params: params
   });
@@ -906,12 +316,21 @@ var update$1 = function update(_ref) {
   });
 };
 var requestsApi = {
-  fetch: fetch$2,
+  fetch: fetch$3,
   update: update$1
 };
 
-function ownKeys$9(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$9(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$9(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$9(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var QUERY_KEYS = {
+  APPROVERS: "neeto-approvals-approvers",
+  TEMPLATES: "neeto-approvals-templates",
+  REQUESTS: "neeto-approvals-requests",
+  SHOW_TEMPLATE: "neeto-approvals-show-template",
+  SHOW_PUBLIC_REQUEST: "neeto-approvals-show-public-request",
+  VIEWS: "neeto-approvals-views"
+};
+
+function ownKeys$b(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$b(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$b(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$b(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var useFetchRequests = function useFetchRequests(_ref) {
   var requestUrl = _ref.requestUrl,
     _ref$params = _ref.params,
@@ -920,7 +339,7 @@ var useFetchRequests = function useFetchRequests(_ref) {
     options = _ref$options === void 0 ? {} : _ref$options;
   return reactQuery.useQuery([QUERY_KEYS.REQUESTS, params], function () {
     return requestsApi.fetch(params, requestUrl);
-  }, _objectSpread$9({
+  }, _objectSpread$b({
     select: function select(response) {
       return response.data || response;
     },
@@ -933,11 +352,67 @@ var useFetchRequests = function useFetchRequests(_ref) {
   }, options));
 };
 var useUpdateRequest = function useUpdateRequest(options) {
-  return reactUtils.useMutationWithInvalidation(requestsApi.update, _objectSpread$9({
+  return reactUtils.useMutationWithInvalidation(requestsApi.update, _objectSpread$b({
     keysToInvalidate: [QUERY_KEYS.REQUESTS, QUERY_KEYS.VIEWS]
   }, options));
 };
 
+var usePaginate = function usePaginate() {
+  var _useState = React.useState({
+      page: constants.DEFAULT_PAGE_INDEX,
+      pageSize: constants.DEFAULT_PAGE_SIZE
+    }),
+    _useState2 = _slicedToArray$1(_useState, 2),
+    pageProperties = _useState2[0],
+    setPageProperties = _useState2[1];
+  var resetPageProperties = function resetPageProperties() {
+    return setPageProperties({
+      page: constants.DEFAULT_PAGE_INDEX,
+      pageSize: constants.DEFAULT_PAGE_SIZE
+    });
+  };
+  var handlePageChange = function handlePageChange(page, pageSize) {
+    setPageProperties({
+      page: page,
+      pageSize: pageSize
+    });
+  };
+  return {
+    pageProperties: pageProperties,
+    resetPageProperties: resetPageProperties,
+    handlePageChange: handlePageChange
+  };
+};
+
+new URLSearchParams(window.location.search);
+var DEFAULT_FILTER_VALUES = {
+  searchTerm: "",
+  sortBy: "",
+  orderBy: ""
+};
+var SEARCH_DELAY = 750;
+var STATUSES = {
+  approved: "approved",
+  rejected: "rejected",
+  pending: "pending",
+  cancelled: "cancelled"
+};
+var STATUS_TAG_STYLE = {
+  pending: "primary",
+  approved: "success",
+  rejected: "danger",
+  cancelled: "warning"
+};
+var APPROVAL_REQUEST_FORM_INITIAL_VALUES = {
+  message: "",
+  additionalInfo: ""
+};
+var STATUS_UPDATED_BY = {
+  rejected: i18next.t("neetoApprovals.common.rejectedBy"),
+  approved: i18next.t("neetoApprovals.common.approvedBy"),
+  cancelled: i18next.t("neetoApprovals.common.cancelledBy")
+};
+
 dayjs__default["default"].extend(utc__default["default"]);
 dayjs__default["default"].extend(timezone__default["default"]);
 var updateApprovalDetails = function updateApprovalDetails(_ref) {
@@ -969,10 +444,6 @@ var getApprovalFilter = function getApprovalFilter() {
     HISTORY: {
       label: i18next.t("neetoApprovals.common.history"),
       value: "HISTORY"
-    },
-    APPROVERS: {
-      label: i18next.t("neetoApprovals.common.approver", constants.PLURAL),
-      value: "APPROVERS"
     }
   };
 };
@@ -1039,6 +510,7 @@ var ApprovalsDetails = function ApprovalsDetails(_ref) {
     _approvalDetails$stat = approvalDetails.status,
     status = _approvalDetails$stat === void 0 ? "" : _approvalDetails$stat,
     message = approvalDetails.message,
+    additionalInfo = approvalDetails.additionalInfo,
     createdAt = approvalDetails.createdAt,
     approverName = approvalDetails.approverName,
     approverEmail = approvalDetails.approverEmail,
@@ -1098,6 +570,11 @@ var ApprovalsDetails = function ApprovalsDetails(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Label, null, t("neetoApprovals.inputs.labels.message")), /*#__PURE__*/React__default["default"].createElement(MemoizedEditorContent$1, {
     className: "neeto-ui-bg-gray-100 p-4",
     content: message
+  })), additionalInfo && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "w-full space-y-2"
+  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Label, null, t("neetoApprovals.inputs.labels.additionalInfo")), /*#__PURE__*/React__default["default"].createElement(MemoizedEditorContent$1, {
+    className: "neeto-ui-bg-gray-100 p-4",
+    content: additionalInfo
   })), isPending && isCurrentUserApprover && /*#__PURE__*/React__default["default"].createElement(neetoui.Textarea, {
     className: "w-full",
     disabled: !isPending,
@@ -1130,8 +607,8 @@ var ApprovalsDetails = function ApprovalsDetails(_ref) {
   })));
 };
 
-function ownKeys$8(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$8(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$8(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$8(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$a(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$a(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$a(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$a(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var History = function History(_ref) {
   var _t;
   var requestUrl = _ref.requestUrl;
@@ -1142,7 +619,7 @@ var History = function History(_ref) {
   var debouncedSearchTerm = reactUtils.useDebounce(filters.searchTerm, SEARCH_DELAY);
   var _usePaginate = usePaginate(),
     pageProperties = _usePaginate.pageProperties,
-    handleTablePagination = _usePaginate.handleTablePagination;
+    handlePageChange = _usePaginate.handlePageChange;
   var _useState3 = React.useState({}),
     _useState4 = _slicedToArray$1(_useState3, 2),
     approvalDetails = _useState4[0],
@@ -1150,13 +627,14 @@ var History = function History(_ref) {
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var _useFetchRequests = useFetchRequests({
-      params: _objectSpread$8(_objectSpread$8(_objectSpread$8({}, pageProperties), filters), {}, {
+      params: _objectSpread$a(_objectSpread$a(_objectSpread$a({}, pageProperties), filters), {}, {
         searchTerm: debouncedSearchTerm.trim(),
         status: [STATUSES.approved, STATUSES.rejected, STATUSES.cancelled]
       }),
       options: {
-        onSuccess: function onSuccess(requests) {
-          handleEmptyPage(requests, pageProperties, handleTablePagination);
+        onSuccess: function onSuccess(_ref2) {
+          var requests = _ref2.requests;
+          handleEmptyPage(requests, pageProperties, handlePageChange);
           setApprovalDetails(function (approvalDetails) {
             return updateApprovalDetails({
               requestsData: requests,
@@ -1174,8 +652,8 @@ var History = function History(_ref) {
     _useFetchRequests$dat4 = _useFetchRequests$dat2.totalCount,
     totalCount = _useFetchRequests$dat4 === void 0 ? 0 : _useFetchRequests$dat4;
   var handleTableChange = function handleTableChange(_, __, sorter) {
-    setFilters(_objectSpread$8(_objectSpread$8({}, filters), {}, {
-      sortBy: camelToSnakeCase(sorter.field),
+    setFilters(_objectSpread$a(_objectSpread$a({}, filters), {}, {
+      sortBy: camelToSnakeCase(sorter.field || ""),
       orderBy: sorter.order
     }));
   };
@@ -1188,10 +666,10 @@ var History = function History(_ref) {
     currentPageNumber: pageProperties.page,
     defaultPageSize: pageProperties.pageSize,
     rowData: approvalHistories,
+    handlePageChange: handlePageChange,
     totalCount: totalCount,
-    handlePageChange: handleTablePagination,
     paginationProps: {
-      hideOnSinglePage: (approvalHistories === null || approvalHistories === void 0 ? void 0 : approvalHistories.length) < DEFAULT_PAGE_SIZE + 1
+      hideOnSinglePage: (approvalHistories === null || approvalHistories === void 0 ? void 0 : approvalHistories.length) < constants.DEFAULT_PAGE_SIZE + 1
     },
     onChange: handleTableChange,
     onRowClick: function onRowClick(_, approvalDetails) {
@@ -1216,8 +694,8 @@ var PENDING_TABLE_COLUMNS = pure.removeBy({
   key: "status"
 }, HISTORY_TABLE_COLUMNS);
 
-function ownKeys$7(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$7(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$7(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$9(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$9(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$9(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$9(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var PendingRequests = function PendingRequests(_ref) {
   var _t;
   var requestUrl = _ref.requestUrl;
@@ -1232,17 +710,18 @@ var PendingRequests = function PendingRequests(_ref) {
   var debouncedSearchTerm = reactUtils.useDebounce(filters.searchTerm, SEARCH_DELAY);
   var _usePaginate = usePaginate(),
     pageProperties = _usePaginate.pageProperties,
-    handleTablePagination = _usePaginate.handleTablePagination;
+    handlePageChange = _usePaginate.handlePageChange;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var _useFetchRequests = useFetchRequests({
-      params: _objectSpread$7(_objectSpread$7(_objectSpread$7({}, pageProperties), filters), {}, {
+      params: _objectSpread$9(_objectSpread$9(_objectSpread$9({}, pageProperties), filters), {}, {
         searchTerm: debouncedSearchTerm.trim(),
         status: [STATUSES.pending]
       }),
       options: {
-        onSuccess: function onSuccess(requests) {
-          handleEmptyPage(requests, pageProperties, handleTablePagination);
+        onSuccess: function onSuccess(_ref2) {
+          var requests = _ref2.requests;
+          handleEmptyPage(requests, pageProperties, handlePageChange);
         }
       },
       requestUrl: requestUrl
@@ -1257,8 +736,8 @@ var PendingRequests = function PendingRequests(_ref) {
     updatePendingRequest = _useUpdateRequest.mutate,
     isLoading = _useUpdateRequest.isLoading;
   var handleTableChange = function handleTableChange(_, __, sorter) {
-    setFilters(_objectSpread$7(_objectSpread$7({}, filters), {}, {
-      sortBy: camelToSnakeCase(sorter.field),
+    setFilters(_objectSpread$9(_objectSpread$9({}, filters), {}, {
+      sortBy: camelToSnakeCase(sorter.field || ""),
       orderBy: sorter.order
     }));
   };
@@ -1281,10 +760,10 @@ var PendingRequests = function PendingRequests(_ref) {
     currentPageNumber: pageProperties.page,
     defaultPageSize: pageProperties.pageSize,
     rowData: pendingRequests,
+    handlePageChange: handlePageChange,
     totalCount: totalCount,
-    handlePageChange: handleTablePagination,
     paginationProps: {
-      hideOnSinglePage: (pendingRequests === null || pendingRequests === void 0 ? void 0 : pendingRequests.length) < DEFAULT_PAGE_SIZE + 1
+      hideOnSinglePage: (pendingRequests === null || pendingRequests === void 0 ? void 0 : pendingRequests.length) < constants.DEFAULT_PAGE_SIZE + 1
     },
     onChange: handleTableChange,
     onRowClick: function onRowClick(_, approvalDetails) {
@@ -1305,10 +784,54 @@ var PendingRequests = function PendingRequests(_ref) {
     onClose: function onClose() {
       return setApprovalDetails({});
     }
-  }));
-};
+  }));
+};
+
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+  var target = _objectWithoutPropertiesLoose(source, excluded);
+  var key, i;
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
+  }
+  return target;
+}
 
-var fetch$1 = function fetch(params) {
+var fetch$2 = function fetch(params) {
   return axios__default["default"].get(TEMPLATE_URL, {
     params: params
   });
@@ -1335,20 +858,20 @@ var destroy = function destroy(_ref3) {
 };
 var templatesApi = {
   create: create,
-  fetch: fetch$1,
+  fetch: fetch$2,
   update: update,
   destroy: destroy,
   show: show$1
 };
 
-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$8(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$8(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$8(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$8(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var useFetchTemplates = function useFetchTemplates() {
   var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   return reactQuery.useQuery([QUERY_KEYS.TEMPLATES, params], function () {
     return templatesApi.fetch(params);
-  }, _objectSpread$6({
+  }, _objectSpread$8({
     select: function select(response) {
       return response.data || response;
     },
@@ -1361,12 +884,12 @@ var useFetchTemplates = function useFetchTemplates() {
   }, options));
 };
 var useCreateTemplate = function useCreateTemplate(options) {
-  return reactUtils.useMutationWithInvalidation(templatesApi.create, _objectSpread$6({
+  return reactUtils.useMutationWithInvalidation(templatesApi.create, _objectSpread$8({
     keysToInvalidate: [QUERY_KEYS.TEMPLATES, QUERY_KEYS.VIEWS]
   }, options));
 };
 var useUpdateTemplate = function useUpdateTemplate(options) {
-  return reactUtils.useMutationWithInvalidation(templatesApi.update, _objectSpread$6({
+  return reactUtils.useMutationWithInvalidation(templatesApi.update, _objectSpread$8({
     keysToInvalidate: [QUERY_KEYS.TEMPLATES, function (_, _ref3) {
       var id = _ref3.id;
       return [QUERY_KEYS.SHOW_TEMPLATE, id];
@@ -1374,39 +897,44 @@ var useUpdateTemplate = function useUpdateTemplate(options) {
   }, options));
 };
 var useDeleteTemplate = function useDeleteTemplate(options) {
-  return reactUtils.useMutationWithInvalidation(templatesApi.destroy, _objectSpread$6({
+  return reactUtils.useMutationWithInvalidation(templatesApi.destroy, _objectSpread$8({
     keysToInvalidate: [QUERY_KEYS.TEMPLATES, QUERY_KEYS.VIEWS]
   }, options));
 };
 
-function _arrayWithoutHoles(arr) {
-  if (Array.isArray(arr)) return _arrayLikeToArray$1(arr);
-}
-
-function _iterableToArray(iter) {
-  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
-}
-
-function _nonIterableSpread() {
-  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-function _toConsumableArray(arr) {
-  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray$1(arr) || _nonIterableSpread();
-}
+var fetch$1 = function fetch(params) {
+  return axios__default["default"].get("".concat(BASE_URL, "/approvers"), {
+    params: params
+  });
+};
+var approversApi = {
+  fetch: fetch$1
+};
 
-var _t;
-var VALID_VARIABLE_NAME_REGEX = /^[a-z](?:\w*[a-z0-9])*$/i;
-var EVERYONE_VISIBILITY = {
-  label: i18next.t("neetoApprovals.select.visibility.everyone"),
-  value: "everyone"
+function ownKeys$7(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$7(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$7(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var useFetchApprovers = function useFetchApprovers() {
+  var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  return reactQuery.useQuery([QUERY_KEYS.APPROVERS, params], function () {
+    return approversApi.fetch(params);
+  }, _objectSpread$7({
+    select: function select(response) {
+      return response.data || response;
+    },
+    keepPreviousData: true,
+    onSuccess: function onSuccess(_ref) {
+      var _params$onSuccess;
+      var approvers = _ref.approvers;
+      return params === null || params === void 0 ? void 0 : (_params$onSuccess = params.onSuccess) === null || _params$onSuccess === void 0 ? void 0 : _params$onSuccess.call(params, approvers);
+    }
+  }, options));
 };
+
 var TEMPLATE_FORM_INITIAL_VALUES = {
   name: "",
   description: "",
-  visibility: EVERYONE_VISIBILITY,
   approver: "",
-  variables: [],
   message: ""
 };
 var TEMPLATE_FORM_VALIDATION_SCHEMA = yup__namespace.object().shape({
@@ -1418,87 +946,27 @@ var TEMPLATE_FORM_VALIDATION_SCHEMA = yup__namespace.object().shape({
     what: i18next.t("neetoApprovals.inputs.labels.message")
   }), function (content) {
     return !neetoEditor.isEditorEmpty(content);
-  }),
-  variables: yup__namespace.array().of(yup__namespace.object().shape({
-    variable: yup__namespace.string().trim().required(i18next.t("neetoApprovals.validations.pleaseEnter_", {
-      what: (_t = i18next.t("neetoApprovals.common.variable")) === null || _t === void 0 ? void 0 : _t.toLocaleLowerCase()
-    })).matches(VALID_VARIABLE_NAME_REGEX, i18next.t("neetoApprovals.validations.variableName"))
-  }))
+  })
 });
 
-var DynamicBlock = function DynamicBlock() {
-  var _useTranslation = reactI18next.useTranslation(),
-    t = _useTranslation.t;
-  var _useFormikContext = formik$1.useFormikContext(),
-    _useFormikContext$val = _useFormikContext.values.variables,
-    variables = _useFormikContext$val === void 0 ? [] : _useFormikContext$val;
-  var editorVariables = variables.map(function (_ref, index) {
-    var variable = _ref.variable;
-    var variableValue = variable || "variable_".concat(index + 1);
-    return {
-      key: variableValue,
-      label: variableValue
-    };
-  });
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "space-y-2 "
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Label, null, t("neetoApprovals.inputs.labels.variableMapping")), /*#__PURE__*/React__default["default"].createElement(formik$1.FieldArray, {
-    name: "variables"
-  }, function (_ref2) {
-    var remove = _ref2.remove,
-      push = _ref2.push;
-    return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "neeto-ui-bg-gray-100 w-full p-3"
-    }, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "grid grid-cols-2 gap-4"
-    }, variables === null || variables === void 0 ? void 0 : variables.map(function (_, index) {
-      return /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "mb-2 flex space-x-2",
-        key: index
-      }, /*#__PURE__*/React__default["default"].createElement(formik.Input, {
-        autoFocus: true,
-        required: true,
-        name: "variables[".concat(index, "][variable]"),
-        label: t("neetoApprovals.common.variable_", {
-          number: index + 1
-        })
-      }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-        className: "my-5",
-        icon: neetoIcons.Delete,
-        style: "text",
-        onClick: function onClick() {
-          return remove(index);
-        }
-      }));
-    })), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-      style: "link",
-      label: t("neetoApprovals.common.add_", {
-        what: t("neetoApprovals.common.variable")
-      }),
-      onClick: function onClick() {
-        return push({
-          variable: ""
-        });
-      }
-    }));
-  })), /*#__PURE__*/React__default["default"].createElement(neetoEditor.FormikEditor, {
+var MessageEditor = reactUtils.withT(function (_ref) {
+  var t = _ref.t,
+    _ref$placeholders = _ref.placeholders,
+    placeholders = _ref$placeholders === void 0 ? [] : _ref$placeholders;
+  return /*#__PURE__*/React__default["default"].createElement(neetoEditor.FormikEditor, {
     required: true,
-    key: variables,
     label: t("neetoApprovals.inputs.labels.message"),
     name: "message",
     rows: 3,
-    variables: editorVariables,
+    variables: placeholders,
     placeholder: t("neetoApprovals.inputs.placeholders.enter_", {
       what: t("neetoApprovals.inputs.labels.message")
-    }),
-    shouldUpdate: function shouldUpdate(nextProps, prevProps) {
-      return nextProps.variables !== prevProps.variables;
-    }
-  }));
-};
+    })
+  });
+});
 
 var Form$1 = function Form(_ref) {
-  var _t, _t2;
+  var _t;
   var isOpen = _ref.isOpen,
     onClose = _ref.onClose,
     _ref$initialData = _ref.initialData,
@@ -1507,7 +975,7 @@ var Form$1 = function Form(_ref) {
     onSubmit = _ref$onSubmit === void 0 ? noop : _ref$onSubmit,
     _ref$isLoading = _ref.isLoading,
     isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
-    visibilityOptions = _ref.visibilityOptions;
+    placeholders = _ref.placeholders;
   var inputReference = React.useRef(null);
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
@@ -1516,10 +984,10 @@ var Form$1 = function Form(_ref) {
     _useFetchApprovers$da2 = _useFetchApprovers$da === void 0 ? {} : _useFetchApprovers$da,
     _useFetchApprovers$da3 = _useFetchApprovers$da2.approvers,
     approvers = _useFetchApprovers$da3 === void 0 ? [] : _useFetchApprovers$da3;
-  var header = ramda.isEmpty(initialData) ? t("neetoApprovals.common.add_", {
-    what: t("neetoApprovals.common.approvalTemplate", constants.SINGULAR).toLocaleLowerCase()
+  var header = ramda.isEmpty(initialData) ? t("neetoApprovals.common.addNew_", {
+    what: t("neetoApprovals.common.template", constants.SINGULAR).toLocaleLowerCase()
   }) : t("neetoApprovals.common.edit_", {
-    what: t("neetoApprovals.common.approvalTemplate", constants.SINGULAR).toLocaleLowerCase()
+    what: t("neetoApprovals.common.template", constants.SINGULAR).toLocaleLowerCase()
   });
   return /*#__PURE__*/React__default["default"].createElement(neetoui.Pane, {
     initialFocusRef: inputReference,
@@ -1540,7 +1008,6 @@ var Form$1 = function Form(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(formik.Input, {
     autoFocus: true,
     required: true,
-    className: "w-1/2",
     label: t("neetoApprovals.common.name"),
     name: "name",
     placeholder: t("neetoApprovals.inputs.placeholders.name")
@@ -1564,14 +1031,9 @@ var Form$1 = function Form(_ref) {
     placeholder: t("neetoApprovals.inputs.placeholders.select_", {
       what: (_t = t("neetoApprovals.common.approver", constants.SINGULAR)) === null || _t === void 0 ? void 0 : _t.toLocaleLowerCase()
     })
-  }), /*#__PURE__*/React__default["default"].createElement(formik.Select, {
-    label: t("neetoApprovals.common.visibility"),
-    name: "visibility",
-    options: [].concat(_toConsumableArray(visibilityOptions), [EVERYONE_VISIBILITY]),
-    placeholder: t("neetoApprovals.inputs.placeholders.select_", {
-      what: (_t2 = t("neetoApprovals.common.visibility")) === null || _t2 === void 0 ? void 0 : _t2.toLocaleLowerCase()
-    })
-  })), /*#__PURE__*/React__default["default"].createElement(DynamicBlock, null))), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Footer, {
+  })), /*#__PURE__*/React__default["default"].createElement(MessageEditor, {
+    placeholders: placeholders
+  }))), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Footer, {
     className: "flex gap-x-2"
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
     label: t("neetoApprovals.buttons.saveChanges"),
@@ -1584,45 +1046,31 @@ var Form$1 = function Form(_ref) {
   })))));
 };
 
-function ownKeys$5(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$5(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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; }
 var buildTemplatePayload = function buildTemplatePayload(template) {
-  var variables = template.variables,
-    visibility = template.visibility,
-    approver = template.approver;
-  var indexedVariables = variables.map(function (_ref, index) {
-    var variable = _ref.variable;
-    return ["variable".concat(index + 1), variable];
-  });
+  var approver = template.approver;
   var payload = {
-    template: _objectSpread$5(_objectSpread$5({}, template), {}, {
-      accessibleId: visibility.value || visibility,
-      approverId: approver.value,
-      variables: ramda.fromPairs(indexedVariables)
+    template: _objectSpread$6(_objectSpread$6({}, template), {}, {
+      approverId: approver.value
     })
   };
   return payload;
 };
 var generateInitialData = function generateInitialData(template) {
-  return _objectSpread$5(_objectSpread$5({}, template), {}, {
-    visibility: template.accessibleId || EVERYONE_VISIBILITY.value,
+  return _objectSpread$6(_objectSpread$6({}, template), {}, {
     approver: {
       label: template.approverName,
       value: template.approverId
-    },
-    variables: template.variables && Object.values(template.variables).map(function (variable) {
-      return {
-        variable: variable
-      };
-    })
+    }
   });
 };
 
 var Create = function Create(_ref) {
-  var visibilityOptions = _ref.visibilityOptions,
-    templateUrl = _ref.templateUrl,
+  var templateUrl = _ref.templateUrl,
     isOpen = _ref.isOpen,
-    onClose = _ref.onClose;
+    onClose = _ref.onClose,
+    templatePlaceholders = _ref.templatePlaceholders;
   var _useCreateTemplate = useCreateTemplate(),
     createTemplate = _useCreateTemplate.mutate,
     isLoading = _useCreateTemplate.isLoading;
@@ -1636,21 +1084,21 @@ var Create = function Create(_ref) {
     });
   };
   return /*#__PURE__*/React__default["default"].createElement(Form$1, {
+    placeholders: templatePlaceholders,
     isLoading: isLoading,
     isOpen: isOpen,
     onClose: onClose,
-    onSubmit: onSubmit,
-    visibilityOptions: visibilityOptions
+    onSubmit: onSubmit
   });
 };
 
 var Edit = function Edit(_ref) {
-  var visibilityOptions = _ref.visibilityOptions,
-    templateUrl = _ref.templateUrl,
+  var templateUrl = _ref.templateUrl,
     template = _ref.template,
     setTemplate = _ref.setTemplate,
     isOpen = _ref.isOpen,
-    onClose = _ref.onClose;
+    onClose = _ref.onClose,
+    templatePlaceholders = _ref.templatePlaceholders;
   var _useUpdateTemplate = useUpdateTemplate({
       onSuccess: function onSuccess() {
         return setTemplate({});
@@ -1669,10 +1117,10 @@ var Edit = function Edit(_ref) {
   return /*#__PURE__*/React__default["default"].createElement(Form$1, {
     initialData: generateInitialData(template),
     isLoading: isUpdating,
+    placeholders: templatePlaceholders,
     isOpen: isOpen,
     onClose: onClose,
-    onSubmit: onSubmit,
-    visibilityOptions: visibilityOptions
+    onSubmit: onSubmit
   });
 };
 
@@ -1691,7 +1139,6 @@ var Field$1 = /*#__PURE__*/React__default["default"].memo(Field);
 
 var MemoizedEditorContent = /*#__PURE__*/React__default["default"].memo(neetoEditor.EditorContent);
 var TemplateDetails = function TemplateDetails(_ref) {
-  var _Object$entries;
   var isOpen = _ref.isOpen,
     onClose = _ref.onClose,
     template = _ref.template;
@@ -1700,8 +1147,6 @@ var TemplateDetails = function TemplateDetails(_ref) {
   var name = template.name,
     description = template.description,
     approverName = template.approverName,
-    accessible = template.accessible,
-    variables = template.variables,
     message = template.message;
   return /*#__PURE__*/React__default["default"].createElement(neetoui.Pane, {
     isOpen: isOpen,
@@ -1721,18 +1166,6 @@ var TemplateDetails = function TemplateDetails(_ref) {
   }), /*#__PURE__*/React__default["default"].createElement(Field$1, {
     label: t("neetoApprovals.common.approver", constants.SINGULAR),
     value: approverName
-  }), /*#__PURE__*/React__default["default"].createElement(Field$1, {
-    label: t("neetoApprovals.common.visibility"),
-    value: (accessible === null || accessible === void 0 ? void 0 : accessible.label) || EVERYONE_VISIBILITY.label
-  }), (_Object$entries = Object.entries(variables || {})) === null || _Object$entries === void 0 ? void 0 : _Object$entries.map(function (_ref2) {
-    var _ref3 = _slicedToArray$1(_ref2, 2),
-      variable = _ref3[0],
-      value = _ref3[1];
-    return /*#__PURE__*/React__default["default"].createElement(Field$1, {
-      key: value,
-      label: capitalize(variable),
-      value: value
-    });
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex w-full flex-col space-y-4"
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Label, {
@@ -1743,8 +1176,100 @@ var TemplateDetails = function TemplateDetails(_ref) {
   }))));
 };
 
-var Menu = neetoui.Dropdown.Menu,
-  MenuItem = neetoui.Dropdown.MenuItem;
+var renderNoDataHelpText = function renderNoDataHelpText(_ref) {
+  var entity = _ref.entity,
+    url = _ref.url;
+  return /*#__PURE__*/React__default["default"].createElement(reactI18next.Trans, {
+    i18nKey: "neetoApprovals.common.noDataHelpText",
+    values: {
+      entity: entity
+    },
+    components: {
+      a: /*#__PURE__*/React__default["default"].createElement(reactRouterDom.Link, {
+        className: "neeto-ui-text-primary-600 underline",
+        target: "_blank",
+        to: {
+          pathname: url
+        }
+      })
+    }
+  });
+};
+
+var _excluded$1 = ["entity", "columnData", "rowData", "totalCount", "filters", "setFilters", "setIsPaneOpen", "helpDocUrl", "onEditClick", "onDeleteClick", "pageProperties"];
+function ownKeys$5(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$5(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var Table = function Table(_ref) {
+  var _t;
+  var entity = _ref.entity,
+    columnData = _ref.columnData,
+    rowData = _ref.rowData,
+    totalCount = _ref.totalCount,
+    filters = _ref.filters,
+    setFilters = _ref.setFilters,
+    setIsPaneOpen = _ref.setIsPaneOpen,
+    helpDocUrl = _ref.helpDocUrl,
+    onEditClick = _ref.onEditClick,
+    onDeleteClick = _ref.onDeleteClick,
+    pageProperties = _ref.pageProperties,
+    otherProps = _objectWithoutProperties(_ref, _excluded$1);
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var columns = columnData({
+    onEditClick: onEditClick,
+    onDeleteClick: onDeleteClick
+  });
+  var handleTableChange = function handleTableChange(_, __, sorter) {
+    setFilters(_objectSpread$5(_objectSpread$5({}, filters), {}, {
+      sortBy: sorter.field,
+      orderBy: sorter.order
+    }));
+  };
+  var noDataProps = {
+    primaryButtonProps: {
+      label: t("neetoApprovals.common.addNew_", {
+        what: (_t = t("neetoApprovals.common.template", constants.SINGULAR)) === null || _t === void 0 ? void 0 : _t.toLocaleLowerCase()
+      }),
+      onClick: function onClick() {
+        return setIsPaneOpen(true);
+      }
+    },
+    helpText: renderNoDataHelpText({
+      entity: entity,
+      url: helpDocUrl
+    })
+  };
+  if (ramda.isEmpty(rowData)) {
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "flex h-full w-full flex-grow items-center justify-center"
+    }, /*#__PURE__*/React__default["default"].createElement(neetoui.NoData, _extends({
+      title: t("neetoApprovals.common.notFound_", {
+        what: entity
+      })
+    }, !filters.searchTerm && noDataProps)));
+  }
+  return /*#__PURE__*/React__default["default"].createElement(TableWrapper__default["default"], {
+    className: "mt-12",
+    hasPagination: totalCount > pageProperties.pageSize
+  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Table, _extends({
+    fixedHeight: true,
+    columnData: columns,
+    currentPageNumber: pageProperties.page,
+    defaultPageSize: pageProperties.pageSize,
+    scroll: {
+      x: 0
+    },
+    tableLayout: "fixed",
+    paginationProps: {
+      hideOnSinglePage: (rowData === null || rowData === void 0 ? void 0 : rowData.length) < constants.DEFAULT_PAGE_SIZE + 1
+    },
+    onChange: handleTableChange
+  }, _objectSpread$5({
+    rowData: rowData,
+    totalCount: totalCount
+  }, otherProps))));
+};
+
 var columnData = function columnData(_ref) {
   var onEditClick = _ref.onEditClick,
     onDeleteClick = _ref.onDeleteClick;
@@ -1752,86 +1277,90 @@ var columnData = function columnData(_ref) {
     dataIndex: "name",
     key: "name",
     sorter: true,
-    title: i18next__default["default"].t("neetoApprovals.common.name")
-  }, {
-    dataIndex: "visibility",
-    key: "visibility",
-    title: i18next__default["default"].t("neetoApprovals.common.visibility"),
-    render: function render(_, _ref2) {
-      var accessible = _ref2.accessible;
-      return (accessible === null || accessible === void 0 ? void 0 : accessible.label) || EVERYONE_VISIBILITY.label;
-    }
-  }, {
-    key: "actions",
+    title: i18next__default["default"].t("neetoApprovals.common.name"),
     ellipsis: true,
     render: function render(_, template) {
       return /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "flex flex-row items-center justify-end space-x-3",
-        onClick: function onClick(event) {
-          return event.stopPropagation();
-        }
-      }, /*#__PURE__*/React__default["default"].createElement(neetoui.Dropdown, {
-        autoWidth: true,
-        buttonProps: {
-          style: "text"
+        className: "flex items-center justify-between gap-x-3"
+      }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+        className: "truncate",
+        style: "body2"
+      }, template.name), /*#__PURE__*/React__default["default"].createElement(MoreDropdown__default["default"], {
+        dropdownProps: {
+          strategy: "fixed",
+          onClick: function onClick(e) {
+            return e.stopPropagation();
+          }
         },
-        className: "flex-shrink-0",
-        icon: neetoIcons.MenuHorizontal,
-        position: "bottom-end",
-        strategy: "fixed"
-      }, /*#__PURE__*/React__default["default"].createElement(Menu, null, /*#__PURE__*/React__default["default"].createElement(MenuItem.Button, {
-        "data-cy": "approvers-edit-button",
-        onClick: function onClick() {
-          return onEditClick(template);
-        }
-      }, i18next__default["default"].t("neetoApprovals.common.edit")), /*#__PURE__*/React__default["default"].createElement(MenuItem.Button, {
-        "data-cy": "approvers-delete-button",
-        onClick: function onClick() {
-          return onDeleteClick(template);
-        }
-      }, i18next__default["default"].t("neetoApprovals.common.delete")))));
+        menuItems: [{
+          key: "edit",
+          label: i18next__default["default"].t("neetoApprovals.common.edit"),
+          onClick: function onClick(event) {
+            return onEditClick(event, template);
+          }
+        }, {
+          key: "delete",
+          label: i18next__default["default"].t("neetoApprovals.common.delete"),
+          onClick: function onClick(event) {
+            return onDeleteClick(event, template);
+          }
+        }]
+      }));
     }
+  }, {
+    dataIndex: "approverName",
+    key: "approverName",
+    sorter: true,
+    title: i18next__default["default"].t("neetoApprovals.common.approver", constants.SINGULAR)
   }];
 };
 
-var _excluded = ["filters", "isNewTemplatePaneOpen", "setFilters", "setIsNewTemplatePaneOpen", "helpDocUrl"];
+var _excluded = ["searchTerm", "isNewTemplatePaneOpen", "setIsNewTemplatePaneOpen", "helpDocUrl"];
 function ownKeys$4(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$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var Templates = function Templates(_ref) {
   var _t, _t2, _t3;
-  var filters = _ref.filters,
+  var searchTerm = _ref.searchTerm,
     isNewTemplatePaneOpen = _ref.isNewTemplatePaneOpen,
-    setFilters = _ref.setFilters,
     setIsNewTemplatePaneOpen = _ref.setIsNewTemplatePaneOpen,
     helpDocUrl = _ref.helpDocUrl,
     otherProps = _objectWithoutProperties(_ref, _excluded);
-  var _useState = React.useState({}),
+  var _useState = React.useState(DEFAULT_FILTER_VALUES),
     _useState2 = _slicedToArray$1(_useState, 2),
-    selectedTemplate = _useState2[0],
-    setSelectedTemplate = _useState2[1];
-  var _useState3 = React.useState(false),
+    filters = _useState2[0],
+    setFilters = _useState2[1];
+  var _useState3 = React.useState({}),
     _useState4 = _slicedToArray$1(_useState3, 2),
-    isDeleteAlertOpen = _useState4[0],
-    setIsDeleteAlertOpen = _useState4[1];
+    selectedTemplate = _useState4[0],
+    setSelectedTemplate = _useState4[1];
   var _useState5 = React.useState(false),
     _useState6 = _slicedToArray$1(_useState5, 2),
-    isEditPaneOpen = _useState6[0],
-    setIsEditPaneOpen = _useState6[1];
+    isDeleteAlertOpen = _useState6[0],
+    setIsDeleteAlertOpen = _useState6[1];
   var _useState7 = React.useState(false),
     _useState8 = _slicedToArray$1(_useState7, 2),
-    isShowPaneOpen = _useState8[0],
-    setIsShowPaneOpen = _useState8[1];
-  var debouncedSearchTerm = reactUtils.useDebounce(filters.searchTerm, SEARCH_DELAY);
+    isEditPaneOpen = _useState8[0],
+    setIsEditPaneOpen = _useState8[1];
+  var _useState9 = React.useState(false),
+    _useState10 = _slicedToArray$1(_useState9, 2),
+    isShowPaneOpen = _useState10[0],
+    setIsShowPaneOpen = _useState10[1];
   var _usePaginate = usePaginate(),
     pageProperties = _usePaginate.pageProperties,
-    handleTablePagination = _usePaginate.handleTablePagination;
+    handlePageChange = _usePaginate.handlePageChange,
+    resetPageProperties = _usePaginate.resetPageProperties;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
+  var debouncedSearchTerm = reactUtils.useDebounce(searchTerm, SEARCH_DELAY);
+  React.useEffect(function () {
+    resetPageProperties();
+  }, [searchTerm]);
   var _useFetchTemplates = useFetchTemplates(_objectSpread$4(_objectSpread$4(_objectSpread$4({}, pageProperties), filters), {}, {
       searchTerm: debouncedSearchTerm.trim()
     }), {
-      onSuccess: function onSuccess(templates) {
-        handleEmptyPage(templates, pageProperties, handleTablePagination);
+      onSuccess: function onSuccess(_ref2) {
+        var templates = _ref2.templates;
+        handleEmptyPage(templates, pageProperties, handlePageChange);
       }
     }),
     _useFetchTemplates$da = _useFetchTemplates.data,
@@ -1851,7 +1380,8 @@ var Templates = function Templates(_ref) {
       setIsShowPaneOpen(false);
     }
   }, [selectedTemplate]);
-  var onEditClick = function onEditClick(template) {
+  var onEditClick = function onEditClick(event, template) {
+    event.stopPropagation();
     setSelectedTemplate(template);
     setIsEditPaneOpen(true);
   };
@@ -1859,7 +1389,8 @@ var Templates = function Templates(_ref) {
     setSelectedTemplate(templateDetails);
     setIsShowPaneOpen(true);
   };
-  var onDeleteClick = function onDeleteClick(template) {
+  var onDeleteClick = function onDeleteClick(event, template) {
+    event.stopPropagation();
     setSelectedTemplate(template);
     setIsDeleteAlertOpen(true);
   };
@@ -1871,15 +1402,18 @@ var Templates = function Templates(_ref) {
   };
   var entity = (_t = t("neetoApprovals.common.template", constants.PLURAL)) === null || _t === void 0 ? void 0 : _t.toLocaleLowerCase();
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, isTemplateLoading ? /*#__PURE__*/React__default["default"].createElement(PageLoader__default["default"], null) : /*#__PURE__*/React__default["default"].createElement(Table, {
-    items: templates,
+    rowData: templates,
     setIsPaneOpen: setIsNewTemplatePaneOpen,
     columnData: columnData,
     entity: entity,
     filters: filters,
+    handlePageChange: handlePageChange,
     helpDocUrl: helpDocUrl,
     onDeleteClick: onDeleteClick,
     onEditClick: onEditClick,
     onRowClick: onRowClick,
+    pageProperties: pageProperties,
+    searchTerm: searchTerm,
     setFilters: setFilters,
     totalCount: totalCount
   }), /*#__PURE__*/React__default["default"].createElement(Create, _extends({
@@ -1928,49 +1462,23 @@ 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 createRoutes = function createRoutes(_ref) {
   var config = _ref.config,
-    filters = _ref.filters,
-    isNewApproverPaneOpen = _ref.isNewApproverPaneOpen,
     isNewTemplatePaneOpen = _ref.isNewTemplatePaneOpen,
-    setFilters = _ref.setFilters,
-    setIsNewApproverPaneOpen = _ref.setIsNewApproverPaneOpen,
+    searchTerm = _ref.searchTerm,
     setIsNewTemplatePaneOpen = _ref.setIsNewTemplatePaneOpen;
   return [{
-    component: function component() {
-      return /*#__PURE__*/React__default["default"].createElement(Approvers, _objectSpread$3({
-        filters: filters,
-        isNewApproverPaneOpen: isNewApproverPaneOpen,
-        setFilters: setFilters,
-        setIsNewApproverPaneOpen: setIsNewApproverPaneOpen
-      }, config));
-    },
-    path: "".concat(config.approvalsPath).concat(routes.approvers),
-    actionBlock: function actionBlock() {
-      return /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-        label: i18next.t("neetoApprovals.common.add_", {
-          what: i18next.t("neetoApprovals.common.approver", constants.SINGULAR).toLocaleLowerCase()
-        }),
-        onClick: function onClick() {
-          return setIsNewApproverPaneOpen(true);
-        }
-      });
-    },
-    searchPlaceholder: i18next.t("neetoApprovals.inputs.placeholders.search_", {
-      what: i18next.t("neetoApprovals.common.approver", constants.PLURAL).toLocaleLowerCase()
-    })
-  }, {
     component: function component() {
       return /*#__PURE__*/React__default["default"].createElement(Templates, _objectSpread$3({
-        filters: filters,
         isNewTemplatePaneOpen: isNewTemplatePaneOpen,
-        setFilters: setFilters,
+        searchTerm: searchTerm,
         setIsNewTemplatePaneOpen: setIsNewTemplatePaneOpen
       }, config));
     },
     path: "".concat(config.approvalsPath).concat(routes.templates.index),
     actionBlock: function actionBlock() {
+      var _t;
       return /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-        label: i18next.t("neetoApprovals.common.add_", {
-          what: i18next.t("neetoApprovals.common.approvalTemplate", constants.SINGULAR).toLocaleLowerCase()
+        label: i18next.t("neetoApprovals.common.addNew_", {
+          what: (_t = i18next.t("neetoApprovals.common.template", constants.SINGULAR)) === null || _t === void 0 ? void 0 : _t.toLocaleLowerCase()
         }),
         onClick: function onClick() {
           return setIsNewTemplatePaneOpen(true);
@@ -1997,8 +1505,8 @@ var Header = function Header(_ref) {
   var _currentTab$actionBlo;
   var appRoutes = _ref.appRoutes,
     breadcrumbs = _ref.breadcrumbs,
-    filters = _ref.filters,
-    setFilters = _ref.setFilters;
+    setSearchTerm = _ref.setSearchTerm,
+    searchTerm = _ref.searchTerm;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var _useLocation = reactRouterDom.useLocation(),
@@ -2011,9 +1519,9 @@ var Header = function Header(_ref) {
     title: t("neetoApprovals.common.approval", constants.PLURAL),
     searchProps: (currentTab === null || currentTab === void 0 ? void 0 : currentTab.searchPlaceholder) && {
       onChange: function onChange(event) {
-        return setFilters(ramda.assoc("searchTerm", event.target.value));
+        return setSearchTerm(event.target.value);
       },
-      value: filters.searchTerm,
+      value: searchTerm,
       placeholder: currentTab === null || currentTab === void 0 ? void 0 : currentTab.searchPlaceholder
     },
     breadcrumbs: breadcrumbs
@@ -2077,33 +1585,26 @@ function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if
 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 Approvals = function Approvals(_ref) {
   var config = _ref.config;
-  var _useState = React.useState(DEFAULT_FILTER_VALUES),
+  var _useState = React.useState(""),
     _useState2 = _slicedToArray$1(_useState, 2),
-    filters = _useState2[0],
-    setFilters = _useState2[1];
+    searchTerm = _useState2[0],
+    setSearchTerm = _useState2[1];
   var _useState3 = React.useState(false),
     _useState4 = _slicedToArray$1(_useState3, 2),
     isNewTemplatePaneOpen = _useState4[0],
     setIsNewTemplatePaneOpen = _useState4[1];
-  var _useState5 = React.useState(false),
-    _useState6 = _slicedToArray$1(_useState5, 2),
-    isNewApproverPaneOpen = _useState6[0],
-    setIsNewApproverPaneOpen = _useState6[1];
   var appRoutes = createRoutes({
     config: config,
-    filters: filters,
-    isNewApproverPaneOpen: isNewApproverPaneOpen,
+    searchTerm: searchTerm,
     isNewTemplatePaneOpen: isNewTemplatePaneOpen,
-    setFilters: setFilters,
-    setIsNewApproverPaneOpen: setIsNewApproverPaneOpen,
     setIsNewTemplatePaneOpen: setIsNewTemplatePaneOpen
   });
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "neeto-approvals"
   }, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], null, /*#__PURE__*/React__default["default"].createElement(Header, _objectSpread$1({
     appRoutes: appRoutes,
-    filters: filters,
-    setFilters: setFilters
+    searchTerm: searchTerm,
+    setSearchTerm: setSearchTerm
   }, config)), /*#__PURE__*/React__default["default"].createElement(Tab, {
     approvalsPath: config.approvalsPath
   }), /*#__PURE__*/React__default["default"].createElement(reactRouterDom.Switch, null, appRoutes.map(function (_ref2) {
@@ -2129,15 +1630,18 @@ var Form = function Form(_ref) {
   var isOpen = _ref.isOpen,
     setIsPaneOpen = _ref.setIsPaneOpen,
     onSubmit = _ref.onSubmit,
-    isLoading = _ref.isLoading;
+    isLoading = _ref.isLoading,
+    _ref$requestableId = _ref.requestableId,
+    requestableId = _ref$requestableId === void 0 ? "" : _ref$requestableId;
   var _useState = React.useState({}),
     _useState2 = _slicedToArray$1(_useState, 2),
     selectedTemplateData = _useState2[0],
     setSelectedTemplateData = _useState2[1];
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
-  var variables = Object.values((selectedTemplateData === null || selectedTemplateData === void 0 ? void 0 : selectedTemplateData.variables) || {});
-  var _useFetchTemplates = useFetchTemplates(),
+  var _useFetchTemplates = useFetchTemplates({
+      requestableId: requestableId
+    }),
     _useFetchTemplates$da = _useFetchTemplates.data,
     _useFetchTemplates$da2 = _useFetchTemplates$da === void 0 ? {} : _useFetchTemplates$da,
     _useFetchTemplates$da3 = _useFetchTemplates$da2.templates,
@@ -2150,39 +1654,16 @@ var Form = function Form(_ref) {
   });
   var handleTemplateChange = function handleTemplateChange(selectedTemplate, setFieldValue, resetForm) {
     resetForm();
-    var template = findById(selectedTemplate.value, templates);
+    var template = pure.findById(selectedTemplate.value, templates);
     setSelectedTemplateData(template);
-    setFieldValue("message", template.message);
-    var variables = Object.values(template.variables);
-    if (isPresent(variables)) {
-      variables.forEach(function (_, index) {
-        return setFieldValue("variables[".concat(index, "].variable"), "");
-      });
-    } else {
-      setFieldValue("variables", []);
-    }
+    setFieldValue("message", template.parsedMessage || template.message);
   };
   var onClose = function onClose() {
     setIsPaneOpen(false);
     setSelectedTemplateData({});
   };
-  var parseVariables = function parseVariables(variableValues) {
-    return variables.map(function (variable, index) {
-      var _variableValues$index;
-      return {
-        key: variable,
-        value: (_variableValues$index = variableValues[index]) === null || _variableValues$index === void 0 ? void 0 : _variableValues$index["variable"]
-      };
-    });
-  };
   var handleSubmit = function handleSubmit(values) {
-    var parsedVariables = parseVariables(values.variables);
-    var parsedMessage = {
-      message: ramda.modify("message", function (message) {
-        return neetoEditor.substituteVariables(message, parsedVariables);
-      }, values).message
-    };
-    onSubmit(parsedMessage, selectedTemplateData, onClose);
+    return onSubmit(values, selectedTemplateData, onClose);
   };
   return /*#__PURE__*/React__default["default"].createElement(neetoui.Pane, {
     isOpen: isOpen,
@@ -2194,12 +1675,11 @@ var Form = function Form(_ref) {
   }))), /*#__PURE__*/React__default["default"].createElement(formik.Form, {
     formikProps: {
       onSubmit: handleSubmit,
-      initialValues: APPROVAL_REQUEST_FORM_INITIAL_VALUES,
-      validationSchema: APPROVAL_REQUEST_FORM_VALIDATION_SCHEMA
+      initialValues: APPROVAL_REQUEST_FORM_INITIAL_VALUES
     }
   }, function (_ref2) {
+    var _t2;
     var setFieldValue = _ref2.setFieldValue,
-      values = _ref2.values,
       resetForm = _ref2.resetForm,
       dirty = _ref2.dirty;
     return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Body, null, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -2210,30 +1690,20 @@ var Form = function Form(_ref) {
       onChange: function onChange(selectedTemplate) {
         return handleTemplateChange(selectedTemplate, setFieldValue, resetForm);
       }
-    }), isPresent(variables) && /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "space-y-2"
-    }, /*#__PURE__*/React__default["default"].createElement(neetoui.Label, null, t("neetoApprovals.inputs.labels.variableMapping")), /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "neeto-ui-bg-gray-100 neeto-ui-border-gray-300 neeto-ui-rounded-lg space-y-4 border p-3"
-    }, /*#__PURE__*/React__default["default"].createElement(formik$1.FieldArray, {
-      name: "variables"
-    }, function () {
-      return variables.map(function (variable, index) {
-        return /*#__PURE__*/React__default["default"].createElement(formik.Input, {
-          required: true,
-          className: "w-full",
-          key: variable,
-          label: variable,
-          name: "variables[".concat(index, "][variable]")
-        });
-      });
-    }))), (selectedTemplateData === null || selectedTemplateData === void 0 ? void 0 : selectedTemplateData.message) && /*#__PURE__*/React__default["default"].createElement("div", {
+    }), (selectedTemplateData === null || selectedTemplateData === void 0 ? void 0 : selectedTemplateData.message) && /*#__PURE__*/React__default["default"].createElement("div", {
       className: "space-y-2"
     }, /*#__PURE__*/React__default["default"].createElement(neetoui.Label, null, t("neetoApprovals.inputs.labels.message")), /*#__PURE__*/React__default["default"].createElement(neetoEditor.EditorContent, {
       className: "neeto-ui-bg-gray-100 neeto-ui-rounded-lg p-3",
-      content: selectedTemplateData === null || selectedTemplateData === void 0 ? void 0 : selectedTemplateData.message,
       name: "message",
-      variables: parseVariables(values === null || values === void 0 ? void 0 : values.variables)
-    })))), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Footer, {
+      content: (selectedTemplateData === null || selectedTemplateData === void 0 ? void 0 : selectedTemplateData.parsedMessage) || (selectedTemplateData === null || selectedTemplateData === void 0 ? void 0 : selectedTemplateData.message)
+    })), /*#__PURE__*/React__default["default"].createElement(neetoEditor.FormikEditor, {
+      label: t("neetoApprovals.inputs.labels.additionalInfo"),
+      name: "additionalInfo",
+      rows: 3,
+      placeholder: t("neetoApprovals.inputs.placeholders.enter_", {
+        what: (_t2 = t("neetoApprovals.inputs.labels.additionalInfo")) === null || _t2 === void 0 ? void 0 : _t2.toLocaleLowerCase()
+      })
+    }))), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Footer, {
       className: "flex gap-x-2"
     }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
       disabled: !dirty,