@bigbinary/neeto-approvals-frontend 1.0.1 → 1.2.0

package/dist/cjs/Approvals.js

@@ -0,0 +1,1134 @@
+'use strict';
+
+var constants$1 = require('../constants-d561fb6c.js');
+var react = require('react');
+var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
+var Container = require('@bigbinary/neeto-molecules/Container');
+var reactRouterDom = require('react-router-dom');
+var i18next = require('i18next');
+var constants = require('@bigbinary/neeto-commons-frontend/constants');
+var Button = require('@bigbinary/neetoui/Button');
+var neetoCist = require('@bigbinary/neeto-cist');
+var TableWrapper = require('@bigbinary/neeto-molecules/TableWrapper');
+var Table$1 = require('@bigbinary/neetoui/Table');
+var NoData = require('@bigbinary/neetoui/NoData');
+var ramda = require('ramda');
+var reactI18next = require('react-i18next');
+var RequestDetailsPane = require('../index-c6f5a782.js');
+var DateFormat = require('@bigbinary/neeto-molecules/DateFormat');
+var Tag = require('@bigbinary/neetoui/Tag');
+var jsxRuntime = require('react/jsx-runtime');
+var PageLoader = require('@bigbinary/neeto-molecules/PageLoader');
+var Alert = require('@bigbinary/neetoui/Alert');
+var useTemplatesApi = require('../useTemplatesApi-5d82bdca.js');
+var Pane = require('@bigbinary/neetoui/Pane');
+var Typography = require('@bigbinary/neetoui/Typography');
+var ActionBlock = require('@bigbinary/neetoui/formik/ActionBlock');
+var FormikForm = require('@bigbinary/neetoui/formik/Form');
+var utils = require('@bigbinary/neeto-editor/utils');
+var yup = require('yup');
+var formik = require('formik');
+var ToggleFeatureCard = require('@bigbinary/neeto-molecules/ToggleFeatureCard');
+var Input = require('@bigbinary/neetoui/formik/Input');
+var Textarea = require('@bigbinary/neetoui/formik/Textarea');
+var FormikEditor = require('@bigbinary/neeto-editor/FormikEditor');
+var EditorContent = require('@bigbinary/neeto-editor/EditorContent');
+var Label = require('@bigbinary/neetoui/Label');
+var MoreDropdown = require('@bigbinary/neeto-molecules/MoreDropdown');
+var NeetoHeader = require('@bigbinary/neeto-molecules/Header');
+var NeetoUITab = require('@bigbinary/neetoui/Tab');
+var reactQuery = require('@tanstack/react-query');
+var axios = require('axios');
+require('@bigbinary/neeto-commons-frontend/utils');
+require('@bigbinary/neetoui/Textarea');
+require('dayjs');
+require('dayjs/plugin/timezone');
+require('dayjs/plugin/utc');
+require('@bigbinary/neeto-commons-frontend/initializers');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var Container__default = /*#__PURE__*/_interopDefaultLegacy(Container);
+var i18next__default = /*#__PURE__*/_interopDefaultLegacy(i18next);
+var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
+var TableWrapper__default = /*#__PURE__*/_interopDefaultLegacy(TableWrapper);
+var Table__default = /*#__PURE__*/_interopDefaultLegacy(Table$1);
+var NoData__default = /*#__PURE__*/_interopDefaultLegacy(NoData);
+var DateFormat__default = /*#__PURE__*/_interopDefaultLegacy(DateFormat);
+var Tag__default = /*#__PURE__*/_interopDefaultLegacy(Tag);
+var PageLoader__default = /*#__PURE__*/_interopDefaultLegacy(PageLoader);
+var Alert__default = /*#__PURE__*/_interopDefaultLegacy(Alert);
+var Pane__default = /*#__PURE__*/_interopDefaultLegacy(Pane);
+var Typography__default = /*#__PURE__*/_interopDefaultLegacy(Typography);
+var ActionBlock__default = /*#__PURE__*/_interopDefaultLegacy(ActionBlock);
+var FormikForm__default = /*#__PURE__*/_interopDefaultLegacy(FormikForm);
+var yup__namespace = /*#__PURE__*/_interopNamespace(yup);
+var ToggleFeatureCard__default = /*#__PURE__*/_interopDefaultLegacy(ToggleFeatureCard);
+var Input__default = /*#__PURE__*/_interopDefaultLegacy(Input);
+var Textarea__default = /*#__PURE__*/_interopDefaultLegacy(Textarea);
+var FormikEditor__default = /*#__PURE__*/_interopDefaultLegacy(FormikEditor);
+var EditorContent__default = /*#__PURE__*/_interopDefaultLegacy(EditorContent);
+var Label__default = /*#__PURE__*/_interopDefaultLegacy(Label);
+var MoreDropdown__default = /*#__PURE__*/_interopDefaultLegacy(MoreDropdown);
+var NeetoHeader__default = /*#__PURE__*/_interopDefaultLegacy(NeetoHeader);
+var NeetoUITab__default = /*#__PURE__*/_interopDefaultLegacy(NeetoUITab);
+var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
+
+var routes = {
+  home: "/",
+  approvals: "/approvals/",
+  pending: "pending",
+  history: "history",
+  templates: {
+    index: "templates",
+    "new": "templates/new",
+    edit: "templates/:id/edit"
+  },
+  "public": "approvals/public/request/:id"
+};
+
+var handleEmptyPage = function handleEmptyPage(data, pageProperties, handlePageChange) {
+  if (ramda.isEmpty(data) && pageProperties.page !== 1) {
+    handlePageChange(pageProperties.page - 1, pageProperties.pageSize);
+  }
+};
+
+var usePaginate = function usePaginate() {
+  var _useState = react.useState({
+      page: constants.DEFAULT_PAGE_INDEX,
+      pageSize: constants.DEFAULT_PAGE_SIZE
+    }),
+    _useState2 = constants$1._slicedToArray(_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
+  };
+};
+
+var HISTORY_TABLE_COLUMNS = [{
+  dataIndex: "approvalLabel",
+  key: "approvalLabel",
+  sorter: true,
+  width: "25%",
+  title: i18next.t("neetoApprovals.common.id"),
+  render: function render(approvalLabel, _ref) {
+    var requestableUrl = _ref.requestableUrl;
+    var url = new URL(requestableUrl || window.location.origin);
+    return /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+      label: approvalLabel,
+      style: "link",
+      to: url.pathname
+    });
+  }
+}, {
+  dataIndex: "title",
+  key: "title",
+  sorter: true,
+  width: "25%",
+  title: i18next.t("neetoApprovals.common.title")
+}, {
+  dataIndex: "status",
+  key: "status",
+  sorter: true,
+  width: "25%",
+  title: i18next.t("neetoApprovals.common.status"),
+  render: function render(status) {
+    return /*#__PURE__*/jsxRuntime.jsx(Tag__default["default"], {
+      label: neetoCist.capitalize(status),
+      style: constants$1.STATUS_TAG_STYLE[status]
+    });
+  }
+}, {
+  dataIndex: "createdAt",
+  key: "createdAt",
+  sorter: true,
+  width: "25%",
+  title: i18next.t("neetoApprovals.common.created"),
+  render: function render(createdAt) {
+    return /*#__PURE__*/jsxRuntime.jsx(DateFormat__default["default"].FromNow, {
+      date: createdAt,
+      typographyProps: {
+        style: "body2"
+      }
+    });
+  }
+}];
+
+function ownKeys$7(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$7(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$7(Object(t), !0).forEach(function (r) { constants$1._defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$7(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var History = function History(_ref) {
+  var helpDocUrl = _ref.helpDocUrl,
+    requestUrl = _ref.requestUrl;
+  var _useState = react.useState(constants$1.DEFAULT_FILTER_VALUES),
+    _useState2 = constants$1._slicedToArray(_useState, 2),
+    filters = _useState2[0],
+    setFilters = _useState2[1];
+  var debouncedSearchTerm = reactUtils.useDebounce(filters.searchTerm, constants$1.SEARCH_DELAY);
+  var _usePaginate = usePaginate(),
+    pageProperties = _usePaginate.pageProperties,
+    handlePageChange = _usePaginate.handlePageChange;
+  var _useState3 = react.useState({}),
+    _useState4 = constants$1._slicedToArray(_useState3, 2),
+    approvalDetails = _useState4[0],
+    setApprovalDetails = _useState4[1];
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useFetchRequests = RequestDetailsPane.useFetchRequests({
+      params: _objectSpread$7(_objectSpread$7(_objectSpread$7({}, pageProperties), filters), {}, {
+        searchTerm: debouncedSearchTerm.trim(),
+        status: [constants$1.STATUSES.approved, constants$1.STATUSES.rejected, constants$1.STATUSES.cancelled]
+      }),
+      requestUrl: requestUrl
+    }),
+    data = _useFetchRequests.data;
+  var _ref2 = data || {},
+    _ref2$requests = _ref2.requests,
+    approvalHistories = _ref2$requests === void 0 ? {} : _ref2$requests,
+    _ref2$totalCount = _ref2.totalCount,
+    totalCount = _ref2$totalCount === void 0 ? 0 : _ref2$totalCount;
+  react.useEffect(function () {
+    if (!data) return;
+    handleEmptyPage(data === null || data === void 0 ? void 0 : data.requests, pageProperties, handlePageChange);
+    setApprovalDetails(function (approvalDetails) {
+      return RequestDetailsPane.updateApprovalDetails({
+        requestsData: data === null || data === void 0 ? void 0 : data.requests,
+        approvalDetails: approvalDetails
+      });
+    });
+  }, [data]);
+  var handleTableChange = function handleTableChange(_, __, sorter) {
+    setFilters(_objectSpread$7(_objectSpread$7({}, filters), {}, {
+      sortBy: neetoCist.camelToSnakeCase(sorter.field || ""),
+      orderBy: constants$1.SORT_ORDER[sorter.order]
+    }));
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [!ramda.isEmpty(approvalHistories) ? /*#__PURE__*/jsxRuntime.jsx(TableWrapper__default["default"], {
+      className: "mt-6",
+      hasPagination: totalCount > pageProperties.pageSize,
+      children: /*#__PURE__*/jsxRuntime.jsx(Table__default["default"], {
+        handlePageChange: handlePageChange,
+        totalCount: totalCount,
+        allowRowClick: true,
+        fixedHeight: true,
+        columnData: HISTORY_TABLE_COLUMNS,
+        currentPageNumber: pageProperties.page,
+        defaultPageSize: pageProperties.pageSize,
+        rowData: approvalHistories,
+        paginationProps: {
+          hideOnSinglePage: (approvalHistories === null || approvalHistories === void 0 ? void 0 : approvalHistories.length) < constants.DEFAULT_PAGE_SIZE + 1
+        },
+        onChange: handleTableChange,
+        onRowClick: function onRowClick(_, approvalDetails) {
+          return setApprovalDetails(approvalDetails);
+        }
+      })
+    }) : /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex h-full w-full flex-grow items-center justify-center",
+      children: /*#__PURE__*/jsxRuntime.jsx(NoData__default["default"], {
+        helpText: /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
+          i18nKey: "neetoApprovals.common.noDataHelpTextLearnMore",
+          style: "link",
+          values: {
+            entity: t("neetoApprovals.common.history")
+          },
+          components: {
+            a: /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+              style: "link",
+              target: "_blank",
+              to: {
+                pathname: helpDocUrl
+              }
+            })
+          }
+        }),
+        title: t("neetoApprovals.common.notFound_", {
+          what: t("neetoApprovals.common.record", constants.PLURAL)
+        })
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(RequestDetailsPane.RequestDetailsPane, {
+      approvalDetails: approvalDetails,
+      isOpen: neetoCist.isPresent(approvalDetails),
+      onClose: function onClose() {
+        return setApprovalDetails({});
+      }
+    })]
+  });
+};
+
+var PENDING_TABLE_COLUMNS = neetoCist.removeBy({
+  key: "status"
+}, HISTORY_TABLE_COLUMNS);
+
+function ownKeys$6(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$6(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$6(Object(t), !0).forEach(function (r) { constants$1._defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$6(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var PendingRequests = function PendingRequests(_ref) {
+  var helpDocUrl = _ref.helpDocUrl,
+    requestUrl = _ref.requestUrl;
+  var _useState = react.useState(constants$1.DEFAULT_FILTER_VALUES),
+    _useState2 = constants$1._slicedToArray(_useState, 2),
+    filters = _useState2[0],
+    setFilters = _useState2[1];
+  var _useState3 = react.useState({}),
+    _useState4 = constants$1._slicedToArray(_useState3, 2),
+    approvalDetails = _useState4[0],
+    setApprovalDetails = _useState4[1];
+  var debouncedSearchTerm = reactUtils.useDebounce(filters.searchTerm, constants$1.SEARCH_DELAY);
+  var _usePaginate = usePaginate(),
+    pageProperties = _usePaginate.pageProperties,
+    handlePageChange = _usePaginate.handlePageChange;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useFetchRequests = RequestDetailsPane.useFetchRequests({
+      params: _objectSpread$6(_objectSpread$6(_objectSpread$6({}, pageProperties), filters), {}, {
+        searchTerm: debouncedSearchTerm.trim(),
+        status: [constants$1.STATUSES.pending]
+      }),
+      requestUrl: requestUrl
+    }),
+    data = _useFetchRequests.data;
+  var _ref2 = data || {},
+    _ref2$requests = _ref2.requests,
+    pendingRequests = _ref2$requests === void 0 ? {} : _ref2$requests,
+    _ref2$totalCount = _ref2.totalCount,
+    totalCount = _ref2$totalCount === void 0 ? 0 : _ref2$totalCount;
+  react.useEffect(function () {
+    if (!data) return;
+    handleEmptyPage(data === null || data === void 0 ? void 0 : data.requests, pageProperties, handlePageChange);
+  }, [data]);
+  var handleTableChange = function handleTableChange(_, __, sorter) {
+    setFilters(_objectSpread$6(_objectSpread$6({}, filters), {}, {
+      sortBy: neetoCist.camelToSnakeCase(sorter.field || ""),
+      orderBy: constants$1.SORT_ORDER[sorter.order]
+    }));
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [!ramda.isEmpty(pendingRequests) ? /*#__PURE__*/jsxRuntime.jsx(TableWrapper__default["default"], {
+      className: "mt-6",
+      hasPagination: totalCount > pageProperties.pageSize,
+      children: /*#__PURE__*/jsxRuntime.jsx(Table__default["default"], {
+        handlePageChange: handlePageChange,
+        totalCount: totalCount,
+        allowRowClick: true,
+        fixedHeight: true,
+        columnData: PENDING_TABLE_COLUMNS,
+        currentPageNumber: pageProperties.page,
+        defaultPageSize: pageProperties.pageSize,
+        rowData: pendingRequests,
+        paginationProps: {
+          hideOnSinglePage: (pendingRequests === null || pendingRequests === void 0 ? void 0 : pendingRequests.length) < constants.DEFAULT_PAGE_SIZE + 1
+        },
+        onChange: handleTableChange,
+        onRowClick: function onRowClick(_, approvalDetails) {
+          return setApprovalDetails(approvalDetails);
+        }
+      })
+    }) : /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex h-full w-full flex-grow items-center justify-center",
+      children: /*#__PURE__*/jsxRuntime.jsx(NoData__default["default"], {
+        helpText: /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
+          i18nKey: "neetoApprovals.common.noDataHelpTextLearnMore",
+          style: "link",
+          components: {
+            a: /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+              style: "link",
+              target: "_blank",
+              to: {
+                pathname: helpDocUrl
+              }
+            })
+          },
+          values: {
+            entity: t("neetoApprovals.common.pendingApproval", constants.PLURAL)
+          }
+        }),
+        title: t("neetoApprovals.common.notFound_", {
+          what: t("neetoApprovals.common.pendingApproval", constants.PLURAL)
+        })
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(RequestDetailsPane.RequestDetailsPane, {
+      approvalDetails: approvalDetails,
+      isPending: true,
+      isOpen: neetoCist.isPresent(approvalDetails),
+      onClose: function onClose() {
+        return setApprovalDetails({});
+      }
+    })]
+  });
+};
+
+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 TEMPLATE_FORM_INITIAL_VALUES = {
+  name: "",
+  description: "",
+  message: ""
+};
+var TEMPLATE_FORM_VALIDATION_SCHEMA = yup__namespace.object().shape({
+  name: yup__namespace.string().trim().required(i18next.t("neetoApprovals.validations.required", {
+    what: i18next.t("neetoApprovals.common.name")
+  })),
+  message: yup__namespace.string().test("message", i18next.t("neetoApprovals.validations.required", {
+    what: i18next.t("neetoApprovals.inputs.labels.message")
+  }), function (content) {
+    return !utils.isEditorEmpty(content);
+  })
+});
+
+var MessageEditor = reactUtils.withT(function (_ref) {
+  var t = _ref.t,
+    _ref$placeholders = _ref.placeholders,
+    placeholders = _ref$placeholders === void 0 ? [] : _ref$placeholders,
+    _ref$initialValue = _ref.initialValue,
+    initialValue = _ref$initialValue === void 0 ? "" : _ref$initialValue;
+  return /*#__PURE__*/jsxRuntime.jsx(FormikEditor__default["default"], {
+    initialValue: initialValue,
+    required: true,
+    label: t("neetoApprovals.inputs.labels.message"),
+    name: "message",
+    rows: 3,
+    variables: placeholders,
+    placeholder: t("neetoApprovals.inputs.placeholders.enter_", {
+      what: t("neetoApprovals.inputs.labels.message")
+    })
+  });
+});
+
+var TemplateForm = function TemplateForm(_ref) {
+  var placeholders = _ref.placeholders,
+    initialData = _ref.initialData;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useFormikContext = formik.useFormikContext(),
+    values = _useFormikContext.values,
+    setFieldValue = _useFormikContext.setFieldValue;
+  var handleDescriptionToggle = function handleDescriptionToggle(_ref2) {
+    var checked = _ref2.target.checked;
+    setFieldValue("descriptionEnabled", checked);
+    if (!checked) {
+      setFieldValue("description", "");
+    }
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "flex w-full flex-col space-y-6",
+    children: [/*#__PURE__*/jsxRuntime.jsx(Input__default["default"], {
+      autoFocus: true,
+      required: true,
+      label: t("neetoApprovals.common.name"),
+      name: "name",
+      placeholder: t("neetoApprovals.inputs.placeholders.name")
+    }), /*#__PURE__*/jsxRuntime.jsx(ToggleFeatureCard__default["default"], {
+      switchName: "descriptionEnabled",
+      title: t("neetoApprovals.inputs.labels.description"),
+      switchProps: {
+        onChange: handleDescriptionToggle,
+        tooltipProps: {
+          enabledSwitchText: t("neetoApprovals.templates.descriptionToggle.enable"),
+          disabledSwitchText: t("neetoApprovals.templates.descriptionToggle.disable")
+        }
+      },
+      children: values.descriptionEnabled && /*#__PURE__*/jsxRuntime.jsx(Textarea__default["default"], {
+        className: "w-full",
+        name: "description",
+        placeholder: t("neetoApprovals.inputs.placeholders.description")
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(MessageEditor, {
+      placeholders: placeholders,
+      initialValue: initialData.message
+    })]
+  });
+};
+
+var Form = function Form(_ref) {
+  var isOpen = _ref.isOpen,
+    onClose = _ref.onClose,
+    _ref$initialData = _ref.initialData,
+    initialData = _ref$initialData === void 0 ? {} : _ref$initialData,
+    _ref$onSubmit = _ref.onSubmit,
+    onSubmit = _ref$onSubmit === void 0 ? neetoCist.noop : _ref$onSubmit,
+    _ref$isLoading = _ref.isLoading,
+    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+    placeholders = _ref.placeholders;
+  var inputReference = react.useRef(null);
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var header = ramda.isEmpty(initialData) ? t("neetoApprovals.common.addNew_", {
+    what: t("neetoApprovals.common.template", constants.SINGULAR)
+  }) : t("neetoApprovals.common.edit_", {
+    what: t("neetoApprovals.common.template", constants.SINGULAR)
+  });
+  return /*#__PURE__*/jsxRuntime.jsxs(Pane__default["default"], {
+    isOpen: isOpen,
+    onClose: onClose,
+    initialFocusRef: inputReference,
+    size: "large",
+    children: [/*#__PURE__*/jsxRuntime.jsx(Pane__default["default"].Header, {
+      children: /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+        style: "h2",
+        children: header
+      })
+    }), /*#__PURE__*/jsxRuntime.jsxs(FormikForm__default["default"], {
+      formikProps: {
+        enableReinitialize: true,
+        initialValues: neetoCist.isPresent(initialData) ? initialData : TEMPLATE_FORM_INITIAL_VALUES,
+        validationSchema: TEMPLATE_FORM_VALIDATION_SCHEMA,
+        onSubmit: onSubmit
+      },
+      children: [/*#__PURE__*/jsxRuntime.jsx(Pane__default["default"].Body, {
+        children: /*#__PURE__*/jsxRuntime.jsx(TemplateForm, {
+          initialData: initialData,
+          placeholders: placeholders
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx(Pane__default["default"].Footer, {
+        children: /*#__PURE__*/jsxRuntime.jsx(ActionBlock__default["default"], {
+          isSubmitting: isLoading,
+          cancelButtonProps: {
+            "data-cy": "neeto-approvals-templates-close-template-form-btn",
+            onClick: onClose
+          },
+          submitButtonProps: {
+            "data-cy": "neeto-approvals-templates-save-template-btn"
+          }
+        })
+      })]
+    })]
+  });
+};
+
+var Create = function Create(_ref) {
+  var templateUrl = _ref.templateUrl,
+    isOpen = _ref.isOpen,
+    onClose = _ref.onClose,
+    templatePlaceholders = _ref.templatePlaceholders;
+  var _useCreateTemplate = useTemplatesApi.useCreateTemplate(),
+    createTemplate = _useCreateTemplate.mutate,
+    isPending = _useCreateTemplate.isPending;
+  var onSubmit = function onSubmit(template) {
+    var payload = {
+      template: template
+    };
+    createTemplate({
+      url: templateUrl,
+      payload: payload
+    }, {
+      onSuccess: onClose
+    });
+  };
+  return /*#__PURE__*/jsxRuntime.jsx(Form, {
+    isOpen: isOpen,
+    onClose: onClose,
+    onSubmit: onSubmit,
+    isLoading: isPending,
+    placeholders: templatePlaceholders
+  });
+};
+
+function ownKeys$5(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), !0).forEach(function (r) { constants$1._defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Edit = function Edit(_ref) {
+  var templateUrl = _ref.templateUrl,
+    template = _ref.template,
+    setTemplate = _ref.setTemplate,
+    isOpen = _ref.isOpen,
+    onClose = _ref.onClose,
+    templatePlaceholders = _ref.templatePlaceholders;
+  var _useUpdateTemplate = useTemplatesApi.useUpdateTemplate({
+      onSuccess: function onSuccess() {
+        return setTemplate({});
+      }
+    }),
+    updateTemplate = _useUpdateTemplate.mutate,
+    isUpdating = _useUpdateTemplate.isPending;
+  var onSubmit = function onSubmit(template) {
+    var payload = {
+      template: template
+    };
+    updateTemplate({
+      id: template.id,
+      payload: payload,
+      url: templateUrl
+    });
+  };
+  var initialData = _objectSpread$5(_objectSpread$5({}, template), {}, {
+    descriptionEnabled: !!template.description
+  });
+  return /*#__PURE__*/jsxRuntime.jsx(Form, {
+    initialData: initialData,
+    isOpen: isOpen,
+    onClose: onClose,
+    onSubmit: onSubmit,
+    isLoading: isUpdating,
+    placeholders: templatePlaceholders
+  });
+};
+
+var Field = function Field(_ref) {
+  var label = _ref.label,
+    value = _ref.value;
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "flex flex-col items-start justify-center",
+    children: [/*#__PURE__*/jsxRuntime.jsx(Label__default["default"], {
+      className: "mb-1 font-normal",
+      children: label
+    }), /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+      style: "body1",
+      weight: "medium",
+      children: value
+    })]
+  });
+};
+var Field$1 = /*#__PURE__*/react.memo(Field);
+
+var MemoizedEditorContent = /*#__PURE__*/react.memo(EditorContent__default["default"]);
+var TemplateDetails = function TemplateDetails(_ref) {
+  var isOpen = _ref.isOpen,
+    onClose = _ref.onClose,
+    template = _ref.template;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var name = template.name,
+    description = template.description,
+    message = template.message;
+  return /*#__PURE__*/jsxRuntime.jsxs(Pane__default["default"], {
+    isOpen: isOpen,
+    onClose: onClose,
+    children: [/*#__PURE__*/jsxRuntime.jsx(Pane__default["default"].Header, {
+      className: "space-y-2",
+      children: /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+        style: "h2",
+        children: t("neetoApprovals.common.templateDetails")
+      })
+    }), /*#__PURE__*/jsxRuntime.jsxs(Pane__default["default"].Body, {
+      className: "space-y-6",
+      children: [/*#__PURE__*/jsxRuntime.jsx(Field$1, {
+        label: t("neetoApprovals.common.name"),
+        value: name
+      }), /*#__PURE__*/jsxRuntime.jsx(Field$1, {
+        label: t("neetoApprovals.inputs.labels.description"),
+        value: description
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex w-full flex-col space-y-4",
+        children: [/*#__PURE__*/jsxRuntime.jsx(Label__default["default"], {
+          className: "mb-1 font-normal",
+          children: t("neetoApprovals.inputs.labels.message")
+        }), /*#__PURE__*/jsxRuntime.jsx(MemoizedEditorContent, {
+          className: "neeto-ui-bg-gray-100 neeto-ui-rounded-lg p-3",
+          content: message
+        })]
+      })]
+    })]
+  });
+};
+
+var renderNoDataHelpText = function renderNoDataHelpText(_ref) {
+  var entity = _ref.entity,
+    url = _ref.url;
+  return /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
+    i18nKey: "neetoApprovals.common.noDataHelpText",
+    style: "link",
+    values: {
+      entity: entity.toLocaleLowerCase()
+    },
+    components: {
+      a: /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+        style: "link",
+        target: "_blank",
+        to: {
+          pathname: url
+        }
+      })
+    }
+  });
+};
+
+var _excluded$1 = ["entity", "columnData", "rowData", "totalCount", "filters", "setFilters", "setIsPaneOpen", "helpDocUrl", "onEditClick", "onDeleteClick", "pageProperties"];
+function ownKeys$4(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), !0).forEach(function (r) { constants$1._defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Table = function Table(_ref) {
+  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$4(_objectSpread$4({}, filters), {}, {
+      sortBy: sorter.field,
+      orderBy: constants$1.SORT_ORDER[sorter.order]
+    }));
+  };
+  var noDataProps = {
+    primaryButtonProps: {
+      label: t("neetoApprovals.common.addNew_", {
+        what: t("neetoApprovals.common.template", constants.SINGULAR)
+      }),
+      onClick: function onClick() {
+        return setIsPaneOpen(true);
+      }
+    },
+    helpText: renderNoDataHelpText({
+      entity: entity,
+      url: helpDocUrl
+    })
+  };
+  if (ramda.isEmpty(rowData)) {
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex h-full w-full flex-grow items-center justify-center",
+      children: /*#__PURE__*/jsxRuntime.jsx(NoData__default["default"], _objectSpread$4({
+        title: t("neetoApprovals.common.notFound_", {
+          what: entity
+        })
+      }, !filters.searchTerm && noDataProps))
+    });
+  }
+  return /*#__PURE__*/jsxRuntime.jsx(TableWrapper__default["default"], {
+    className: "mt-6",
+    hasPagination: totalCount > pageProperties.pageSize,
+    children: /*#__PURE__*/jsxRuntime.jsx(Table__default["default"], _objectSpread$4({
+      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$4({
+      rowData: rowData,
+      totalCount: totalCount
+    }, otherProps)))
+  });
+};
+
+var columnData = 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"),
+    ellipsis: true,
+    render: function render(_, template) {
+      return /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex items-center justify-between gap-x-3",
+        children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+          className: "truncate",
+          style: "body2",
+          children: template.name
+        }), /*#__PURE__*/jsxRuntime.jsx(MoreDropdown__default["default"], {
+          dropdownProps: {
+            strategy: "fixed",
+            onClick: function onClick(e) {
+              return e.stopPropagation();
+            }
+          },
+          menuItems: [constants$1._defineProperty({
+            key: "edit",
+            label: i18next__default["default"].t("neetoApprovals.common.edit"),
+            onClick: function onClick(event) {
+              return onEditClick(event, template);
+            }
+          }, constants$1.DATA_CY_KEY, "neeto-approvals-templates-edit-template-btn"), constants$1._defineProperty({
+            key: "delete",
+            label: i18next__default["default"].t("neetoApprovals.common.delete"),
+            onClick: function onClick(event) {
+              return onDeleteClick(event, template);
+            }
+          }, constants$1.DATA_CY_KEY, "neeto-approvals-templates-delete-template-btn")]
+        })]
+      });
+    }
+  }, {
+    dataIndex: "description",
+    key: "description",
+    title: i18next__default["default"].t("neetoApprovals.inputs.labels.description")
+  }];
+};
+
+var _excluded = ["searchTerm", "isNewTemplatePaneOpen", "setIsNewTemplatePaneOpen", "helpDocUrl"];
+function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { constants$1._defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Templates = function Templates(_ref) {
+  var searchTerm = _ref.searchTerm,
+    isNewTemplatePaneOpen = _ref.isNewTemplatePaneOpen,
+    setIsNewTemplatePaneOpen = _ref.setIsNewTemplatePaneOpen,
+    helpDocUrl = _ref.helpDocUrl,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  var _useState = react.useState(constants$1.DEFAULT_FILTER_VALUES),
+    _useState2 = constants$1._slicedToArray(_useState, 2),
+    filters = _useState2[0],
+    setFilters = _useState2[1];
+  var _useState3 = react.useState({}),
+    _useState4 = constants$1._slicedToArray(_useState3, 2),
+    selectedTemplate = _useState4[0],
+    setSelectedTemplate = _useState4[1];
+  var _useState5 = react.useState(false),
+    _useState6 = constants$1._slicedToArray(_useState5, 2),
+    isDeleteAlertOpen = _useState6[0],
+    setIsDeleteAlertOpen = _useState6[1];
+  var _useState7 = react.useState(false),
+    _useState8 = constants$1._slicedToArray(_useState7, 2),
+    isEditPaneOpen = _useState8[0],
+    setIsEditPaneOpen = _useState8[1];
+  var _useState9 = react.useState(false),
+    _useState10 = constants$1._slicedToArray(_useState9, 2),
+    isShowPaneOpen = _useState10[0],
+    setIsShowPaneOpen = _useState10[1];
+  var _usePaginate = usePaginate(),
+    pageProperties = _usePaginate.pageProperties,
+    handlePageChange = _usePaginate.handlePageChange,
+    resetPageProperties = _usePaginate.resetPageProperties;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var debouncedSearchTerm = reactUtils.useDebounce(searchTerm, constants$1.SEARCH_DELAY);
+  react.useEffect(function () {
+    resetPageProperties();
+  }, [searchTerm]);
+  var _useFetchTemplates = useTemplatesApi.useFetchTemplates(_objectSpread$3(_objectSpread$3(_objectSpread$3({}, pageProperties), filters), {}, {
+      searchTerm: debouncedSearchTerm.trim()
+    })),
+    data = _useFetchTemplates.data,
+    isTemplateLoading = _useFetchTemplates.isLoading;
+  var _ref2 = data || {},
+    _ref2$templates = _ref2.templates,
+    templates = _ref2$templates === void 0 ? [] : _ref2$templates,
+    _ref2$totalCount = _ref2.totalCount,
+    totalCount = _ref2$totalCount === void 0 ? 0 : _ref2$totalCount;
+  react.useEffect(function () {
+    if (data) {
+      handleEmptyPage(data === null || data === void 0 ? void 0 : data.templates, pageProperties, handlePageChange);
+    }
+  }, [data]);
+  var _useDeleteTemplate = useTemplatesApi.useDeleteTemplate(),
+    deleteTemplate = _useDeleteTemplate.mutate,
+    isDeleting = _useDeleteTemplate.isPending;
+  react.useEffect(function () {
+    if (!ramda.isEmpty(selectedTemplate)) return;
+    setIsDeleteAlertOpen(false);
+    setIsEditPaneOpen(false);
+    setIsShowPaneOpen(false);
+  }, [selectedTemplate]);
+  var onEditClick = function onEditClick(event, template) {
+    event.stopPropagation();
+    setSelectedTemplate(template);
+    setIsEditPaneOpen(true);
+  };
+  var onRowClick = function onRowClick(_, templateDetails) {
+    setSelectedTemplate(templateDetails);
+    setIsShowPaneOpen(true);
+  };
+  var onDeleteClick = function onDeleteClick(event, template) {
+    event.stopPropagation();
+    setSelectedTemplate(template);
+    setIsDeleteAlertOpen(true);
+  };
+  var handleDelete = function handleDelete(templateId) {
+    deleteTemplate({
+      templateId: templateId
+    });
+    setSelectedTemplate({});
+  };
+  var entity = t("neetoApprovals.common.template", constants.PLURAL);
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [isTemplateLoading ? /*#__PURE__*/jsxRuntime.jsx(PageLoader__default["default"], {}) : /*#__PURE__*/jsxRuntime.jsx(Table, {
+      columnData: columnData,
+      entity: entity,
+      filters: filters,
+      handlePageChange: handlePageChange,
+      helpDocUrl: helpDocUrl,
+      onDeleteClick: onDeleteClick,
+      onEditClick: onEditClick,
+      onRowClick: onRowClick,
+      pageProperties: pageProperties,
+      searchTerm: searchTerm,
+      setFilters: setFilters,
+      totalCount: totalCount,
+      rowData: templates,
+      setIsPaneOpen: setIsNewTemplatePaneOpen
+    }), /*#__PURE__*/jsxRuntime.jsx(Create, _objectSpread$3({
+      isOpen: isNewTemplatePaneOpen,
+      onClose: function onClose() {
+        return setIsNewTemplatePaneOpen(false);
+      }
+    }, otherProps)), /*#__PURE__*/jsxRuntime.jsx(Edit, _objectSpread$3(_objectSpread$3({
+      isOpen: isEditPaneOpen,
+      setTemplate: setSelectedTemplate,
+      template: selectedTemplate
+    }, otherProps), {}, {
+      onClose: function onClose() {
+        return setIsEditPaneOpen(false);
+      }
+    })), /*#__PURE__*/jsxRuntime.jsx(Alert__default["default"], {
+      isOpen: isDeleteAlertOpen,
+      isSubmitting: isDeleting,
+      submitButtonLabel: t("neetoApprovals.buttons.delete"),
+      message: /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
+        i18nKey: "neetoApprovals.alerts.deleting_",
+        values: {
+          what: t("neetoApprovals.common.template", constants.SINGULAR),
+          name: selectedTemplate === null || selectedTemplate === void 0 ? void 0 : selectedTemplate.name
+        }
+      }),
+      title: t("neetoApprovals.common.delete_", {
+        what: t("neetoApprovals.common.template", constants.SINGULAR)
+      }),
+      onClose: function onClose() {
+        return setSelectedTemplate({});
+      },
+      onSubmit: function onSubmit() {
+        return handleDelete(selectedTemplate === null || selectedTemplate === void 0 ? void 0 : selectedTemplate.id);
+      }
+    }), /*#__PURE__*/jsxRuntime.jsx(TemplateDetails, {
+      isOpen: isShowPaneOpen,
+      template: selectedTemplate,
+      onClose: function onClose() {
+        return setSelectedTemplate({});
+      }
+    })]
+  });
+};
+
+function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { constants$1._defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var createRoutes = function createRoutes(_ref) {
+  var config = _ref.config,
+    isNewTemplatePaneOpen = _ref.isNewTemplatePaneOpen,
+    searchTerm = _ref.searchTerm,
+    setIsNewTemplatePaneOpen = _ref.setIsNewTemplatePaneOpen;
+  return [{
+    component: function component() {
+      return /*#__PURE__*/jsxRuntime.jsx(Templates, _objectSpread$2({}, _objectSpread$2({
+        isNewTemplatePaneOpen: isNewTemplatePaneOpen,
+        searchTerm: searchTerm,
+        setIsNewTemplatePaneOpen: setIsNewTemplatePaneOpen
+      }, config)));
+    },
+    path: "".concat(config.approvalsPath).concat(routes.templates.index),
+    actionBlock: function actionBlock() {
+      return /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+        "data-cy": "neeto-approvals-templates-add-new-button",
+        label: i18next.t("neetoApprovals.common.addNew_", {
+          what: i18next.t("neetoApprovals.common.template", constants.SINGULAR)
+        }),
+        onClick: function onClick() {
+          return setIsNewTemplatePaneOpen(true);
+        }
+      });
+    },
+    searchPlaceholder: i18next.t("neetoApprovals.inputs.placeholders.search_", {
+      what: i18next.t("neetoApprovals.common.template", constants.PLURAL)
+    })
+  }, {
+    component: function component() {
+      return /*#__PURE__*/jsxRuntime.jsx(PendingRequests, _objectSpread$2({}, config));
+    },
+    path: "".concat(config.approvalsPath).concat(routes.pending)
+  }, {
+    component: function component() {
+      return /*#__PURE__*/jsxRuntime.jsx(History, _objectSpread$2({}, config));
+    },
+    path: "".concat(config.approvalsPath).concat(routes.history)
+  }];
+};
+
+var Header = function Header(_ref) {
+  var _currentTab$actionBlo;
+  var appRoutes = _ref.appRoutes,
+    breadcrumbs = _ref.breadcrumbs;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useLocation = reactRouterDom.useLocation(),
+    pathname = _useLocation.pathname;
+  var currentTab = neetoCist.findBy({
+    path: pathname
+  }, appRoutes);
+  return /*#__PURE__*/jsxRuntime.jsx(NeetoHeader__default["default"], {
+    breadcrumbs: breadcrumbs,
+    actionBlock: currentTab === null || currentTab === void 0 || (_currentTab$actionBlo = currentTab.actionBlock) === null || _currentTab$actionBlo === void 0 ? void 0 : _currentTab$actionBlo.call(currentTab),
+    title: t("neetoApprovals.common.approval", constants.PLURAL),
+    searchProps: (currentTab === null || currentTab === void 0 ? void 0 : currentTab.searchPlaceholder) && {
+      placeholder: currentTab === null || currentTab === void 0 ? void 0 : currentTab.searchPlaceholder
+    }
+  });
+};
+
+var fetch = function fetch() {
+  return axios__default["default"].get("".concat(constants$1.BASE_URL, "/views"));
+};
+var viewsApi = {
+  fetch: fetch
+};
+
+function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { constants$1._defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var useFetchViews = function useFetchViews() {
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return reactQuery.useQuery(_objectSpread$1({
+    queryKey: [constants$1.QUERY_KEYS.VIEWS],
+    queryFn: viewsApi.fetch,
+    select: function select(response) {
+      return response.data || response;
+    }
+  }, options));
+};
+
+var Tab = function Tab(_ref) {
+  var _pathname$split$;
+  var approvalsPath = _ref.approvalsPath;
+  var _useLocation = reactRouterDom.useLocation(),
+    pathname = _useLocation.pathname;
+  var history = reactRouterDom.useHistory();
+  var approvalFilter = RequestDetailsPane.getApprovalFilter();
+  var approvalFilterKeys = ramda.keys(approvalFilter);
+  var category = (_pathname$split$ = pathname.split(routes.approvals)[1]) === null || _pathname$split$ === void 0 ? void 0 : _pathname$split$.toLocaleUpperCase();
+  var isActive = function isActive(filter) {
+    return category.includes(filter);
+  };
+  var getRoute = function getRoute(filter) {
+    return "".concat(approvalsPath).concat(filter.toLowerCase());
+  };
+  var _useFetchViews = useFetchViews(),
+    _useFetchViews$data = _useFetchViews.data,
+    _useFetchViews$data2 = _useFetchViews$data === void 0 ? {} : _useFetchViews$data,
+    _useFetchViews$data2$ = _useFetchViews$data2.views,
+    views = _useFetchViews$data2$ === void 0 ? {} : _useFetchViews$data2$;
+  return /*#__PURE__*/jsxRuntime.jsx(NeetoUITab__default["default"], {
+    children: approvalFilterKeys.map(function (filter) {
+      return /*#__PURE__*/jsxRuntime.jsxs(NeetoUITab__default["default"].Item, {
+        active: isActive(filter),
+        count: views[filter === null || filter === void 0 ? void 0 : filter.toLocaleLowerCase()],
+        label: approvalFilter[filter].label,
+        onClick: function onClick() {
+          return history.push(getRoute(filter));
+        },
+        children: [approvalFilter[filter].label, " (", views[filter === null || filter === void 0 ? void 0 : filter.toLocaleLowerCase()] || 0, ")"]
+      }, filter);
+    })
+  });
+};
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { constants$1._defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Approvals = function Approvals(_ref) {
+  var config = _ref.config;
+  var _useQueryParams = reactUtils.useQueryParams(),
+    _useQueryParams$searc = _useQueryParams.searchTerm,
+    searchTerm = _useQueryParams$searc === void 0 ? "" : _useQueryParams$searc;
+  var _useState = react.useState(false),
+    _useState2 = constants$1._slicedToArray(_useState, 2),
+    isNewTemplatePaneOpen = _useState2[0],
+    setIsNewTemplatePaneOpen = _useState2[1];
+  var appRoutes = createRoutes({
+    config: config,
+    searchTerm: searchTerm,
+    isNewTemplatePaneOpen: isNewTemplatePaneOpen,
+    setIsNewTemplatePaneOpen: setIsNewTemplatePaneOpen
+  });
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: "w-full overflow-y-auto",
+    children: /*#__PURE__*/jsxRuntime.jsxs(Container__default["default"], {
+      children: [/*#__PURE__*/jsxRuntime.jsx(Header, _objectSpread({}, _objectSpread({
+        appRoutes: appRoutes
+      }, config))), /*#__PURE__*/jsxRuntime.jsx(Tab, {
+        approvalsPath: config.approvalsPath
+      }), /*#__PURE__*/jsxRuntime.jsxs(reactRouterDom.Switch, {
+        children: [appRoutes.map(function (_ref2) {
+          var path = _ref2.path,
+            component = _ref2.component;
+          return /*#__PURE__*/react.createElement(reactRouterDom.Route, {
+            component: component,
+            path: path,
+            exact: true,
+            key: path
+          });
+        }), /*#__PURE__*/jsxRuntime.jsx(reactRouterDom.Redirect, {
+          exact: true,
+          from: config.approvalsPath
+          // eslint-disable-next-line @bigbinary/neeto/use-common-routes
+          ,
+          to: "".concat(config.approvalsPath).concat(routes.pending)
+        })]
+      })]
+    })
+  });
+};
+
+module.exports = Approvals;
+//# sourceMappingURL=Approvals.js.map