@bigbinary/neeto-approvals-frontend 1.1.0 → 1.2.1

package/dist/Approvals.js

@@ -0,0 +1,1088 @@
+import { _ as _slicedToArray, S as STATUS_TAG_STYLE, D as DEFAULT_FILTER_VALUES, a as SEARCH_DELAY, b as STATUSES, c as _defineProperty, d as SORT_ORDER, e as DATA_CY_KEY, B as BASE_URL, Q as QUERY_KEYS } from './constants-752da2ba.js';
+import { useState, useEffect, useRef, memo, createElement } from 'react';
+import { useDebounce, withT, useQueryParams } from '@bigbinary/neeto-commons-frontend/react-utils';
+import Container from '@bigbinary/neeto-molecules/Container';
+import { useLocation, useHistory, Switch, Route, Redirect } from 'react-router-dom';
+import i18next, { t } from 'i18next';
+import { DEFAULT_PAGE_INDEX, DEFAULT_PAGE_SIZE, PLURAL, SINGULAR } from '@bigbinary/neeto-commons-frontend/constants';
+import Button from '@bigbinary/neetoui/Button';
+import { capitalize, isPresent, camelToSnakeCase, removeBy, noop, findBy } from '@bigbinary/neeto-cist';
+import TableWrapper from '@bigbinary/neeto-molecules/TableWrapper';
+import Table$1 from '@bigbinary/neetoui/Table';
+import NoData from '@bigbinary/neetoui/NoData';
+import { isEmpty, keys } from 'ramda';
+import { useTranslation, Trans } from 'react-i18next';
+import { u as useFetchRequests, a as updateApprovalDetails, R as RequestDetailsPane, g as getApprovalFilter } from './index-458211fe.js';
+import DateFormat from '@bigbinary/neeto-molecules/DateFormat';
+import Tag from '@bigbinary/neetoui/Tag';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import PageLoader from '@bigbinary/neeto-molecules/PageLoader';
+import Alert from '@bigbinary/neetoui/Alert';
+import { u as useCreateTemplate, a as useUpdateTemplate, b as useFetchTemplates, c as useDeleteTemplate } from './useTemplatesApi-dc60dcdd.js';
+import Pane from '@bigbinary/neetoui/Pane';
+import Typography from '@bigbinary/neetoui/Typography';
+import ActionBlock from '@bigbinary/neetoui/formik/ActionBlock';
+import FormikForm from '@bigbinary/neetoui/formik/Form';
+import { isEditorEmpty } from '@bigbinary/neeto-editor/utils';
+import * as yup from 'yup';
+import { useFormikContext } from 'formik';
+import ToggleFeatureCard from '@bigbinary/neeto-molecules/ToggleFeatureCard';
+import Input from '@bigbinary/neetoui/formik/Input';
+import Textarea from '@bigbinary/neetoui/formik/Textarea';
+import FormikEditor from '@bigbinary/neeto-editor/FormikEditor';
+import EditorContent from '@bigbinary/neeto-editor/EditorContent';
+import Label from '@bigbinary/neetoui/Label';
+import MoreDropdown from '@bigbinary/neeto-molecules/MoreDropdown';
+import NeetoHeader from '@bigbinary/neeto-molecules/Header';
+import NeetoUITab from '@bigbinary/neetoui/Tab';
+import { useQuery } from '@tanstack/react-query';
+import axios from 'axios';
+import '@bigbinary/neeto-commons-frontend/utils';
+import '@bigbinary/neetoui/Textarea';
+import 'dayjs';
+import 'dayjs/plugin/timezone';
+import 'dayjs/plugin/utc';
+import '@bigbinary/neeto-commons-frontend/initializers';
+
+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 (isEmpty(data) && pageProperties.page !== 1) {
+    handlePageChange(pageProperties.page - 1, pageProperties.pageSize);
+  }
+};
+
+var usePaginate = function usePaginate() {
+  var _useState = useState({
+      page: DEFAULT_PAGE_INDEX,
+      pageSize: DEFAULT_PAGE_SIZE
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    pageProperties = _useState2[0],
+    setPageProperties = _useState2[1];
+  var resetPageProperties = function resetPageProperties() {
+    return setPageProperties({
+      page: DEFAULT_PAGE_INDEX,
+      pageSize: 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: t("neetoApprovals.common.id"),
+  render: function render(approvalLabel, _ref) {
+    var requestableUrl = _ref.requestableUrl;
+    var url = new URL(requestableUrl || window.location.origin);
+    return /*#__PURE__*/jsx(Button, {
+      label: approvalLabel,
+      style: "link",
+      to: url.pathname
+    });
+  }
+}, {
+  dataIndex: "title",
+  key: "title",
+  sorter: true,
+  width: "25%",
+  title: t("neetoApprovals.common.title")
+}, {
+  dataIndex: "status",
+  key: "status",
+  sorter: true,
+  width: "25%",
+  title: t("neetoApprovals.common.status"),
+  render: function render(status) {
+    return /*#__PURE__*/jsx(Tag, {
+      label: capitalize(status),
+      style: STATUS_TAG_STYLE[status]
+    });
+  }
+}, {
+  dataIndex: "createdAt",
+  key: "createdAt",
+  sorter: true,
+  width: "25%",
+  title: t("neetoApprovals.common.created"),
+  render: function render(createdAt) {
+    return /*#__PURE__*/jsx(DateFormat.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) { _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 = useState(DEFAULT_FILTER_VALUES),
+    _useState2 = _slicedToArray(_useState, 2),
+    filters = _useState2[0],
+    setFilters = _useState2[1];
+  var debouncedSearchTerm = useDebounce(filters.searchTerm, SEARCH_DELAY);
+  var _usePaginate = usePaginate(),
+    pageProperties = _usePaginate.pageProperties,
+    handlePageChange = _usePaginate.handlePageChange;
+  var _useState3 = useState({}),
+    _useState4 = _slicedToArray(_useState3, 2),
+    approvalDetails = _useState4[0],
+    setApprovalDetails = _useState4[1];
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useFetchRequests = useFetchRequests({
+      params: _objectSpread$7(_objectSpread$7(_objectSpread$7({}, pageProperties), filters), {}, {
+        searchTerm: debouncedSearchTerm.trim(),
+        status: [STATUSES.approved, STATUSES.rejected, 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;
+  useEffect(function () {
+    if (!data) return;
+    handleEmptyPage(data === null || data === void 0 ? void 0 : data.requests, pageProperties, handlePageChange);
+    setApprovalDetails(function (approvalDetails) {
+      return 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: camelToSnakeCase(sorter.field || ""),
+      orderBy: SORT_ORDER[sorter.order]
+    }));
+  };
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [!isEmpty(approvalHistories) ? /*#__PURE__*/jsx(TableWrapper, {
+      className: "mt-6",
+      hasPagination: totalCount > pageProperties.pageSize,
+      children: /*#__PURE__*/jsx(Table$1, {
+        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) < DEFAULT_PAGE_SIZE + 1
+        },
+        onChange: handleTableChange,
+        onRowClick: function onRowClick(_, approvalDetails) {
+          return setApprovalDetails(approvalDetails);
+        }
+      })
+    }) : /*#__PURE__*/jsx("div", {
+      className: "flex h-full w-full flex-grow items-center justify-center",
+      children: /*#__PURE__*/jsx(NoData, {
+        helpText: /*#__PURE__*/jsx(Trans, {
+          i18nKey: "neetoApprovals.common.noDataHelpTextLearnMore",
+          style: "link",
+          values: {
+            entity: t("neetoApprovals.common.history")
+          },
+          components: {
+            a: /*#__PURE__*/jsx(Button, {
+              style: "link",
+              target: "_blank",
+              to: {
+                pathname: helpDocUrl
+              }
+            })
+          }
+        }),
+        title: t("neetoApprovals.common.notFound_", {
+          what: t("neetoApprovals.common.record", PLURAL)
+        })
+      })
+    }), /*#__PURE__*/jsx(RequestDetailsPane, {
+      approvalDetails: approvalDetails,
+      isOpen: isPresent(approvalDetails),
+      onClose: function onClose() {
+        return setApprovalDetails({});
+      }
+    })]
+  });
+};
+
+var PENDING_TABLE_COLUMNS = 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) { _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 = useState(DEFAULT_FILTER_VALUES),
+    _useState2 = _slicedToArray(_useState, 2),
+    filters = _useState2[0],
+    setFilters = _useState2[1];
+  var _useState3 = useState({}),
+    _useState4 = _slicedToArray(_useState3, 2),
+    approvalDetails = _useState4[0],
+    setApprovalDetails = _useState4[1];
+  var debouncedSearchTerm = useDebounce(filters.searchTerm, SEARCH_DELAY);
+  var _usePaginate = usePaginate(),
+    pageProperties = _usePaginate.pageProperties,
+    handlePageChange = _usePaginate.handlePageChange;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useFetchRequests = useFetchRequests({
+      params: _objectSpread$6(_objectSpread$6(_objectSpread$6({}, pageProperties), filters), {}, {
+        searchTerm: debouncedSearchTerm.trim(),
+        status: [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;
+  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: camelToSnakeCase(sorter.field || ""),
+      orderBy: SORT_ORDER[sorter.order]
+    }));
+  };
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [!isEmpty(pendingRequests) ? /*#__PURE__*/jsx(TableWrapper, {
+      className: "mt-6",
+      hasPagination: totalCount > pageProperties.pageSize,
+      children: /*#__PURE__*/jsx(Table$1, {
+        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) < DEFAULT_PAGE_SIZE + 1
+        },
+        onChange: handleTableChange,
+        onRowClick: function onRowClick(_, approvalDetails) {
+          return setApprovalDetails(approvalDetails);
+        }
+      })
+    }) : /*#__PURE__*/jsx("div", {
+      className: "flex h-full w-full flex-grow items-center justify-center",
+      children: /*#__PURE__*/jsx(NoData, {
+        helpText: /*#__PURE__*/jsx(Trans, {
+          i18nKey: "neetoApprovals.common.noDataHelpTextLearnMore",
+          style: "link",
+          components: {
+            a: /*#__PURE__*/jsx(Button, {
+              style: "link",
+              target: "_blank",
+              to: {
+                pathname: helpDocUrl
+              }
+            })
+          },
+          values: {
+            entity: t("neetoApprovals.common.pendingApproval", PLURAL)
+          }
+        }),
+        title: t("neetoApprovals.common.notFound_", {
+          what: t("neetoApprovals.common.pendingApproval", PLURAL)
+        })
+      })
+    }), /*#__PURE__*/jsx(RequestDetailsPane, {
+      approvalDetails: approvalDetails,
+      isPending: true,
+      isOpen: 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.object().shape({
+  name: yup.string().trim().required(t("neetoApprovals.validations.required", {
+    what: t("neetoApprovals.common.name")
+  })),
+  message: yup.string().test("message", t("neetoApprovals.validations.required", {
+    what: t("neetoApprovals.inputs.labels.message")
+  }), function (content) {
+    return !isEditorEmpty(content);
+  })
+});
+
+var MessageEditor = 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__*/jsx(FormikEditor, {
+    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 = useTranslation(),
+    t = _useTranslation.t;
+  var _useFormikContext = 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__*/jsxs("div", {
+    className: "flex w-full flex-col space-y-6",
+    children: [/*#__PURE__*/jsx(Input, {
+      autoFocus: true,
+      required: true,
+      label: t("neetoApprovals.common.name"),
+      name: "name",
+      placeholder: t("neetoApprovals.inputs.placeholders.name")
+    }), /*#__PURE__*/jsx(ToggleFeatureCard, {
+      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__*/jsx(Textarea, {
+        className: "w-full",
+        name: "description",
+        placeholder: t("neetoApprovals.inputs.placeholders.description")
+      })
+    }), /*#__PURE__*/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 ? noop : _ref$onSubmit,
+    _ref$isLoading = _ref.isLoading,
+    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+    placeholders = _ref.placeholders;
+  var inputReference = useRef(null);
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var header = isEmpty(initialData) ? t("neetoApprovals.common.addNew_", {
+    what: t("neetoApprovals.common.template", SINGULAR)
+  }) : t("neetoApprovals.common.edit_", {
+    what: t("neetoApprovals.common.template", SINGULAR)
+  });
+  return /*#__PURE__*/jsxs(Pane, {
+    isOpen: isOpen,
+    onClose: onClose,
+    initialFocusRef: inputReference,
+    size: "large",
+    children: [/*#__PURE__*/jsx(Pane.Header, {
+      children: /*#__PURE__*/jsx(Typography, {
+        style: "h2",
+        children: header
+      })
+    }), /*#__PURE__*/jsxs(FormikForm, {
+      formikProps: {
+        enableReinitialize: true,
+        initialValues: isPresent(initialData) ? initialData : TEMPLATE_FORM_INITIAL_VALUES,
+        validationSchema: TEMPLATE_FORM_VALIDATION_SCHEMA,
+        onSubmit: onSubmit
+      },
+      children: [/*#__PURE__*/jsx(Pane.Body, {
+        children: /*#__PURE__*/jsx(TemplateForm, {
+          initialData: initialData,
+          placeholders: placeholders
+        })
+      }), /*#__PURE__*/jsx(Pane.Footer, {
+        children: /*#__PURE__*/jsx(ActionBlock, {
+          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 = 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__*/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) { _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 = 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__*/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__*/jsxs("div", {
+    className: "flex flex-col items-start justify-center",
+    children: [/*#__PURE__*/jsx(Label, {
+      className: "mb-1 font-normal",
+      children: label
+    }), /*#__PURE__*/jsx(Typography, {
+      style: "body1",
+      weight: "medium",
+      children: value
+    })]
+  });
+};
+var Field$1 = /*#__PURE__*/memo(Field);
+
+var MemoizedEditorContent = /*#__PURE__*/memo(EditorContent);
+var TemplateDetails = function TemplateDetails(_ref) {
+  var isOpen = _ref.isOpen,
+    onClose = _ref.onClose,
+    template = _ref.template;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var name = template.name,
+    description = template.description,
+    message = template.message;
+  return /*#__PURE__*/jsxs(Pane, {
+    isOpen: isOpen,
+    onClose: onClose,
+    children: [/*#__PURE__*/jsx(Pane.Header, {
+      className: "space-y-2",
+      children: /*#__PURE__*/jsx(Typography, {
+        style: "h2",
+        children: t("neetoApprovals.common.templateDetails")
+      })
+    }), /*#__PURE__*/jsxs(Pane.Body, {
+      className: "space-y-6",
+      children: [/*#__PURE__*/jsx(Field$1, {
+        label: t("neetoApprovals.common.name"),
+        value: name
+      }), /*#__PURE__*/jsx(Field$1, {
+        label: t("neetoApprovals.inputs.labels.description"),
+        value: description
+      }), /*#__PURE__*/jsxs("div", {
+        className: "flex w-full flex-col space-y-4",
+        children: [/*#__PURE__*/jsx(Label, {
+          className: "mb-1 font-normal",
+          children: t("neetoApprovals.inputs.labels.message")
+        }), /*#__PURE__*/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__*/jsx(Trans, {
+    i18nKey: "neetoApprovals.common.noDataHelpText",
+    style: "link",
+    values: {
+      entity: entity.toLocaleLowerCase()
+    },
+    components: {
+      a: /*#__PURE__*/jsx(Button, {
+        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) { _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 = 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: SORT_ORDER[sorter.order]
+    }));
+  };
+  var noDataProps = {
+    primaryButtonProps: {
+      label: t("neetoApprovals.common.addNew_", {
+        what: t("neetoApprovals.common.template", SINGULAR)
+      }),
+      onClick: function onClick() {
+        return setIsPaneOpen(true);
+      }
+    },
+    helpText: renderNoDataHelpText({
+      entity: entity,
+      url: helpDocUrl
+    })
+  };
+  if (isEmpty(rowData)) {
+    return /*#__PURE__*/jsx("div", {
+      className: "flex h-full w-full flex-grow items-center justify-center",
+      children: /*#__PURE__*/jsx(NoData, _objectSpread$4({
+        title: t("neetoApprovals.common.notFound_", {
+          what: entity
+        })
+      }, !filters.searchTerm && noDataProps))
+    });
+  }
+  return /*#__PURE__*/jsx(TableWrapper, {
+    className: "mt-6",
+    hasPagination: totalCount > pageProperties.pageSize,
+    children: /*#__PURE__*/jsx(Table$1, _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) < 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.t("neetoApprovals.common.name"),
+    ellipsis: true,
+    render: function render(_, template) {
+      return /*#__PURE__*/jsxs("div", {
+        className: "flex items-center justify-between gap-x-3",
+        children: [/*#__PURE__*/jsx(Typography, {
+          className: "truncate",
+          style: "body2",
+          children: template.name
+        }), /*#__PURE__*/jsx(MoreDropdown, {
+          dropdownProps: {
+            strategy: "fixed",
+            onClick: function onClick(e) {
+              return e.stopPropagation();
+            }
+          },
+          menuItems: [_defineProperty({
+            key: "edit",
+            label: i18next.t("neetoApprovals.common.edit"),
+            onClick: function onClick(event) {
+              return onEditClick(event, template);
+            }
+          }, DATA_CY_KEY, "neeto-approvals-templates-edit-template-btn"), _defineProperty({
+            key: "delete",
+            label: i18next.t("neetoApprovals.common.delete"),
+            onClick: function onClick(event) {
+              return onDeleteClick(event, template);
+            }
+          }, DATA_CY_KEY, "neeto-approvals-templates-delete-template-btn")]
+        })]
+      });
+    }
+  }, {
+    dataIndex: "description",
+    key: "description",
+    title: i18next.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) { _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 = useState(DEFAULT_FILTER_VALUES),
+    _useState2 = _slicedToArray(_useState, 2),
+    filters = _useState2[0],
+    setFilters = _useState2[1];
+  var _useState3 = useState({}),
+    _useState4 = _slicedToArray(_useState3, 2),
+    selectedTemplate = _useState4[0],
+    setSelectedTemplate = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isDeleteAlertOpen = _useState6[0],
+    setIsDeleteAlertOpen = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    isEditPaneOpen = _useState8[0],
+    setIsEditPaneOpen = _useState8[1];
+  var _useState9 = useState(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    isShowPaneOpen = _useState10[0],
+    setIsShowPaneOpen = _useState10[1];
+  var _usePaginate = usePaginate(),
+    pageProperties = _usePaginate.pageProperties,
+    handlePageChange = _usePaginate.handlePageChange,
+    resetPageProperties = _usePaginate.resetPageProperties;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var debouncedSearchTerm = useDebounce(searchTerm, SEARCH_DELAY);
+  useEffect(function () {
+    resetPageProperties();
+  }, [searchTerm]);
+  var _useFetchTemplates = 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;
+  useEffect(function () {
+    if (data) {
+      handleEmptyPage(data === null || data === void 0 ? void 0 : data.templates, pageProperties, handlePageChange);
+    }
+  }, [data]);
+  var _useDeleteTemplate = useDeleteTemplate(),
+    deleteTemplate = _useDeleteTemplate.mutate,
+    isDeleting = _useDeleteTemplate.isPending;
+  useEffect(function () {
+    if (!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", PLURAL);
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [isTemplateLoading ? /*#__PURE__*/jsx(PageLoader, {}) : /*#__PURE__*/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__*/jsx(Create, _objectSpread$3({
+      isOpen: isNewTemplatePaneOpen,
+      onClose: function onClose() {
+        return setIsNewTemplatePaneOpen(false);
+      }
+    }, otherProps)), /*#__PURE__*/jsx(Edit, _objectSpread$3(_objectSpread$3({
+      isOpen: isEditPaneOpen,
+      setTemplate: setSelectedTemplate,
+      template: selectedTemplate
+    }, otherProps), {}, {
+      onClose: function onClose() {
+        return setIsEditPaneOpen(false);
+      }
+    })), /*#__PURE__*/jsx(Alert, {
+      isOpen: isDeleteAlertOpen,
+      isSubmitting: isDeleting,
+      submitButtonLabel: t("neetoApprovals.buttons.delete"),
+      message: /*#__PURE__*/jsx(Trans, {
+        i18nKey: "neetoApprovals.alerts.deleting_",
+        values: {
+          what: t("neetoApprovals.common.template", SINGULAR),
+          name: selectedTemplate === null || selectedTemplate === void 0 ? void 0 : selectedTemplate.name
+        }
+      }),
+      title: t("neetoApprovals.common.delete_", {
+        what: t("neetoApprovals.common.template", SINGULAR)
+      }),
+      onClose: function onClose() {
+        return setSelectedTemplate({});
+      },
+      onSubmit: function onSubmit() {
+        return handleDelete(selectedTemplate === null || selectedTemplate === void 0 ? void 0 : selectedTemplate.id);
+      }
+    }), /*#__PURE__*/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) { _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__*/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__*/jsx(Button, {
+        "data-cy": "neeto-approvals-templates-add-new-button",
+        label: t("neetoApprovals.common.addNew_", {
+          what: t("neetoApprovals.common.template", SINGULAR)
+        }),
+        onClick: function onClick() {
+          return setIsNewTemplatePaneOpen(true);
+        }
+      });
+    },
+    searchPlaceholder: t("neetoApprovals.inputs.placeholders.search_", {
+      what: t("neetoApprovals.common.template", PLURAL)
+    })
+  }, {
+    component: function component() {
+      return /*#__PURE__*/jsx(PendingRequests, _objectSpread$2({}, config));
+    },
+    path: "".concat(config.approvalsPath).concat(routes.pending)
+  }, {
+    component: function component() {
+      return /*#__PURE__*/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,
+    titleHelpPopoverProps = _ref.titleHelpPopoverProps;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useLocation = useLocation(),
+    pathname = _useLocation.pathname;
+  var currentTab = findBy({
+    path: pathname
+  }, appRoutes);
+  return /*#__PURE__*/jsx(NeetoHeader, {
+    breadcrumbs: breadcrumbs,
+    titleHelpPopoverProps: titleHelpPopoverProps,
+    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", 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.get("".concat(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) { _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 useQuery(_objectSpread$1({
+    queryKey: [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 = useLocation(),
+    pathname = _useLocation.pathname;
+  var history = useHistory();
+  var approvalFilter = getApprovalFilter();
+  var approvalFilterKeys = 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__*/jsx(NeetoUITab, {
+    children: approvalFilterKeys.map(function (filter) {
+      return /*#__PURE__*/jsxs(NeetoUITab.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) { _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 = useQueryParams(),
+    _useQueryParams$searc = _useQueryParams.searchTerm,
+    searchTerm = _useQueryParams$searc === void 0 ? "" : _useQueryParams$searc;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isNewTemplatePaneOpen = _useState2[0],
+    setIsNewTemplatePaneOpen = _useState2[1];
+  var appRoutes = createRoutes({
+    config: config,
+    searchTerm: searchTerm,
+    isNewTemplatePaneOpen: isNewTemplatePaneOpen,
+    setIsNewTemplatePaneOpen: setIsNewTemplatePaneOpen
+  });
+  return /*#__PURE__*/jsx("div", {
+    className: "w-full overflow-y-auto",
+    children: /*#__PURE__*/jsxs(Container, {
+      children: [/*#__PURE__*/jsx(Header, _objectSpread({}, _objectSpread({
+        appRoutes: appRoutes
+      }, config))), /*#__PURE__*/jsx(Tab, {
+        approvalsPath: config.approvalsPath
+      }), /*#__PURE__*/jsxs(Switch, {
+        children: [appRoutes.map(function (_ref2) {
+          var path = _ref2.path,
+            component = _ref2.component;
+          return /*#__PURE__*/createElement(Route, {
+            component: component,
+            path: path,
+            exact: true,
+            key: path
+          });
+        }), /*#__PURE__*/jsx(Redirect, {
+          exact: true,
+          from: config.approvalsPath
+          // eslint-disable-next-line @bigbinary/neeto/use-common-routes
+          ,
+          to: "".concat(config.approvalsPath).concat(routes.pending)
+        })]
+      })]
+    })
+  });
+};
+
+export { Approvals as default };
+//# sourceMappingURL=Approvals.js.map