@bigbinary/neeto-approvals-frontend 0.3.11 → 0.4.0-beta2

package/dist/index.js

@@ -1,23 +1,25 @@
-import React, { useState, useEffect, useRef, useMemo } from 'react';
+import React, { useState, useEffect, useRef, createElement, useMemo } from 'react';
 import { useMutationWithInvalidation, useDebounce, withT, useQueryParams } from '@bigbinary/neeto-commons-frontend/react-utils';
 import Container from '@bigbinary/neeto-molecules/Container';
 import { Link, useLocation, useHistory, Switch, Route, Redirect, useParams } from 'react-router-dom';
 import i18next, { t as t$1 } from 'i18next';
 import { DEFAULT_PAGE_INDEX, DEFAULT_PAGE_SIZE, PLURAL, SINGULAR } from '@bigbinary/neeto-commons-frontend/constants';
 import Button from '@bigbinary/neetoui/Button';
-import { isEmpty, keys } from 'ramda';
 import { capitalize, isPresent, findBy, camelToSnakeCase, removeBy, noop } 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 { useQuery, useQueryClient } from 'react-query';
+import { useQuery, keepPreviousData } from '@tanstack/react-query';
 import axios from 'axios';
 import Tag from '@bigbinary/neetoui/Tag';
 import DateFormat from '@bigbinary/neeto-molecules/DateFormat';
-import { isEditorEmpty, EditorContent, FormikEditor } from '@bigbinary/neeto-editor';
+import { isEditorEmpty } from '@bigbinary/neeto-editor/utils';
 import * as yup from 'yup';
-import { dateFormat, withEventTargetValue } from '@bigbinary/neeto-commons-frontend/utils';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { dateFormat, withEventTargetValue, captureAnalyticsEvent } from '@bigbinary/neeto-commons-frontend/utils';
+import EditorContent from '@bigbinary/neeto-editor/EditorContent';
 import Label from '@bigbinary/neetoui/Label';
 import Pane from '@bigbinary/neetoui/Pane';
 import Textarea from '@bigbinary/neetoui/Textarea';
@@ -34,6 +36,7 @@ import { useFormikContext } from 'formik';
 import ToggleFeatureCard from '@bigbinary/neeto-molecules/ToggleFeatureCard';
 import Input from '@bigbinary/neetoui/formik/Input';
 import Textarea$1 from '@bigbinary/neetoui/formik/Textarea';
+import FormikEditor from '@bigbinary/neeto-editor/FormikEditor';
 import MoreDropdown from '@bigbinary/neeto-molecules/MoreDropdown';
 import NeetoHeader from '@bigbinary/neeto-molecules/Header';
 import NeetoUITab from '@bigbinary/neetoui/Tab';
@@ -192,23 +195,20 @@ var useFetchRequests = function useFetchRequests(_ref) {
     params = _ref$params === void 0 ? {} : _ref$params,
     _ref$options = _ref.options,
     options = _ref$options === void 0 ? {} : _ref$options;
-  return useQuery([QUERY_KEYS.REQUESTS, params], function () {
-    return requestsApi.fetch(params, requestUrl);
-  }, _objectSpread$b({
+  return useQuery(_objectSpread$b({
+    queryKey: [QUERY_KEYS.REQUESTS, params],
+    queryFn: function queryFn() {
+      return requestsApi.fetch(params, requestUrl);
+    },
     select: function select(response) {
       return response.data || response;
     },
-    keepPreviousData: true,
-    onSuccess: function onSuccess(_ref2) {
-      var _options$onSuccess;
-      var requests = _ref2.requests;
-      return (_options$onSuccess = options.onSuccess) === null || _options$onSuccess === void 0 ? void 0 : _options$onSuccess.call(options, requests);
-    }
+    placeholderData: keepPreviousData
   }, options));
 };
 var useUpdateRequest = function useUpdateRequest(options) {
   return useMutationWithInvalidation(requestsApi.update, _objectSpread$b({
-    keysToInvalidate: [QUERY_KEYS.REQUESTS, QUERY_KEYS.VIEWS]
+    keysToInvalidate: [[QUERY_KEYS.REQUESTS], [QUERY_KEYS.VIEWS]]
   }, options));
 };
 
@@ -279,6 +279,9 @@ var REQUEST_FORM_VALIDATION_SCHEMA = yup.object().shape({
   }),
   approver: yup.object().required(t$1("neetoApprovals.validations.approver"))
 });
+var EVENTS = {
+  APPROVAL_TEMPLATE_CREATED: "approval_template_created"
+};
 
 var HISTORY_TABLE_COLUMNS = [{
   dataIndex: "approvalLabel",
@@ -289,7 +292,7 @@ var HISTORY_TABLE_COLUMNS = [{
   render: function render(approvalLabel, _ref) {
     var requestableUrl = _ref.requestableUrl;
     var url = new URL(requestableUrl || window.location.origin);
-    return /*#__PURE__*/React.createElement(Button, {
+    return /*#__PURE__*/jsx(Button, {
       label: approvalLabel,
       style: "link",
       to: url.pathname
@@ -308,7 +311,7 @@ var HISTORY_TABLE_COLUMNS = [{
   width: "25%",
   title: t$1("neetoApprovals.common.status"),
   render: function render(status) {
-    return /*#__PURE__*/React.createElement(Tag, {
+    return /*#__PURE__*/jsx(Tag, {
       label: capitalize(status),
       style: STATUS_TAG_STYLE[status]
     });
@@ -320,7 +323,7 @@ var HISTORY_TABLE_COLUMNS = [{
   width: "25%",
   title: t$1("neetoApprovals.common.created"),
   render: function render(createdAt) {
-    return /*#__PURE__*/React.createElement(DateFormat.FromNow, {
+    return /*#__PURE__*/jsx(DateFormat.FromNow, {
       date: createdAt,
       typographyProps: {
         style: "body2"
@@ -338,34 +341,36 @@ var Footer = function Footer(_ref) {
     t = _useTranslation.t;
   if (!isCurrentUserApprover && !isCurrentUserRequester) return null;
   if (isCurrentUserApprover) {
-    return /*#__PURE__*/React.createElement(Pane.Footer, {
-      className: "flex gap-x-2"
-    }, /*#__PURE__*/React.createElement(Button, {
-      label: t("neetoApprovals.buttons.approve"),
+    return /*#__PURE__*/jsxs(Pane.Footer, {
+      className: "flex gap-x-2",
+      children: [/*#__PURE__*/jsx(Button, {
+        label: t("neetoApprovals.buttons.approve"),
+        loading: isLoading,
+        type: "submit",
+        onClick: function onClick() {
+          return handleSubmit(STATUSES.approved);
+        }
+      }), /*#__PURE__*/jsx(Button, {
+        label: t("neetoApprovals.buttons.decline"),
+        loading: isLoading,
+        style: "text",
+        onClick: function onClick() {
+          return handleSubmit(STATUSES.rejected);
+        }
+      })]
+    });
+  }
+  return /*#__PURE__*/jsx(Pane.Footer, {
+    className: "flex gap-x-2",
+    children: /*#__PURE__*/jsx(Button, {
+      label: t("neetoApprovals.buttons.cancelRequest"),
       loading: isLoading,
       type: "submit",
       onClick: function onClick() {
-        return handleSubmit(STATUSES.approved);
+        return handleSubmit(STATUSES.cancelled);
       }
-    }), /*#__PURE__*/React.createElement(Button, {
-      label: t("neetoApprovals.buttons.decline"),
-      loading: isLoading,
-      style: "text",
-      onClick: function onClick() {
-        return handleSubmit(STATUSES.rejected);
-      }
-    }));
-  }
-  return /*#__PURE__*/React.createElement(Pane.Footer, {
-    className: "flex gap-x-2"
-  }, /*#__PURE__*/React.createElement(Button, {
-    label: t("neetoApprovals.buttons.cancelRequest"),
-    loading: isLoading,
-    type: "submit",
-    onClick: function onClick() {
-      return handleSubmit(STATUSES.cancelled);
-    }
-  }));
+    })
+  });
 };
 
 dayjs.extend(utc);
@@ -430,7 +435,7 @@ var RequestDetailsPane = function RequestDetailsPane(_ref) {
     setNote = _useState2[1];
   var _useUpdateRequest = useUpdateRequest(),
     updatePendingRequest = _useUpdateRequest.mutate,
-    isLoading = _useUpdateRequest.isLoading;
+    isUpdateRequestPending = _useUpdateRequest.isPending;
   useEffect(function () {
     setNote(initialNote);
   }, [initialNote]);
@@ -458,65 +463,82 @@ var RequestDetailsPane = function RequestDetailsPane(_ref) {
       onSuccess: handleOnClose
     });
   };
-  return /*#__PURE__*/React.createElement(Pane, {
+  return /*#__PURE__*/jsxs(Pane, {
     isOpen: isOpen,
     size: "large",
-    onClose: handleOnClose
-  }, /*#__PURE__*/React.createElement(Pane.Header, {
-    className: "space-y-2"
-  }, /*#__PURE__*/React.createElement(Typography, {
-    style: "h2"
-  }, title), /*#__PURE__*/React.createElement(Tag, {
-    label: capitalize(status),
-    style: STATUS_TAG_STYLE[status]
-  })), /*#__PURE__*/React.createElement(Pane.Body, {
-    className: "space-y-6"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "w-full divide-y border px-3"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "flex space-x-3 p-2"
-  }, /*#__PURE__*/React.createElement(Label, {
-    className: "font-normal"
-  }, getStatusLabel()), /*#__PURE__*/React.createElement(Typography, {
-    style: "body2",
-    weight: "medium"
-  }, requesterOrApproverDetails)), /*#__PURE__*/React.createElement("div", {
-    className: "flex space-x-3 p-2"
-  }, /*#__PURE__*/React.createElement(Label, {
-    className: "font-normal"
-  }, t("neetoApprovals.common.created")), /*#__PURE__*/React.createElement(Typography, {
-    style: "body2",
-    weight: "medium"
-  }, dateFormat.defaultWithTime(timeInZone(createdAt))))), /*#__PURE__*/React.createElement("div", {
-    className: "w-full space-y-2"
-  }, /*#__PURE__*/React.createElement(Label, null, t("neetoApprovals.inputs.labels.message")), /*#__PURE__*/React.createElement(MemoizedEditorContent$1, {
-    className: "neeto-ui-bg-gray-100 p-4",
-    content: message
-  })), isPending && isCurrentUserApprover && /*#__PURE__*/React.createElement(Textarea, {
-    className: "w-full",
-    disabled: !isPending,
-    label: t("neetoApprovals.common.note"),
-    value: note,
-    placeholder: t("neetoApprovals.inputs.placeholders.add_", {
-      what: t("neetoApprovals.common.note")
-    }),
-    onChange: withEventTargetValue(setNote)
-  }), !isPending && note && /*#__PURE__*/React.createElement("div", {
-    className: "w-full space-y-2"
-  }, /*#__PURE__*/React.createElement(Label, null, t("neetoApprovals.common.note")), /*#__PURE__*/React.createElement("div", {
-    className: "neeto-ui-bg-gray-100 p-4"
-  }, note))), isPending && /*#__PURE__*/React.createElement(Footer, {
-    handleSubmit: handleSubmit,
-    isCurrentUserApprover: isCurrentUserApprover,
-    isCurrentUserRequester: isCurrentUserRequester,
-    isLoading: isLoading
-  }));
+    onClose: handleOnClose,
+    children: [/*#__PURE__*/jsxs(Pane.Header, {
+      className: "space-y-2",
+      children: [/*#__PURE__*/jsx(Typography, {
+        style: "h2",
+        children: title
+      }), /*#__PURE__*/jsx(Tag, {
+        label: capitalize(status),
+        style: STATUS_TAG_STYLE[status]
+      })]
+    }), /*#__PURE__*/jsxs(Pane.Body, {
+      className: "space-y-6",
+      children: [/*#__PURE__*/jsxs("div", {
+        className: "w-full divide-y border px-3",
+        children: [/*#__PURE__*/jsxs("div", {
+          className: "flex space-x-3 p-2",
+          children: [/*#__PURE__*/jsx(Label, {
+            className: "font-normal",
+            children: getStatusLabel()
+          }), /*#__PURE__*/jsx(Typography, {
+            style: "body2",
+            weight: "medium",
+            children: requesterOrApproverDetails
+          })]
+        }), /*#__PURE__*/jsxs("div", {
+          className: "flex space-x-3 p-2",
+          children: [/*#__PURE__*/jsx(Label, {
+            className: "font-normal",
+            children: t("neetoApprovals.common.created")
+          }), /*#__PURE__*/jsx(Typography, {
+            style: "body2",
+            weight: "medium",
+            children: dateFormat.defaultWithTime(timeInZone(createdAt))
+          })]
+        })]
+      }), /*#__PURE__*/jsxs("div", {
+        className: "w-full space-y-2",
+        children: [/*#__PURE__*/jsx(Label, {
+          children: t("neetoApprovals.inputs.labels.message")
+        }), /*#__PURE__*/jsx(MemoizedEditorContent$1, {
+          className: "neeto-ui-bg-gray-100 p-4",
+          content: message
+        })]
+      }), isPending && isCurrentUserApprover && /*#__PURE__*/jsx(Textarea, {
+        className: "w-full",
+        disabled: !isPending,
+        label: t("neetoApprovals.common.note"),
+        value: note,
+        placeholder: t("neetoApprovals.inputs.placeholders.add_", {
+          what: t("neetoApprovals.common.note")
+        }),
+        onChange: withEventTargetValue(setNote)
+      }), !isPending && note && /*#__PURE__*/jsxs("div", {
+        className: "w-full space-y-2",
+        children: [/*#__PURE__*/jsx(Label, {
+          children: t("neetoApprovals.common.note")
+        }), /*#__PURE__*/jsx("div", {
+          className: "neeto-ui-bg-gray-100 p-4",
+          children: note
+        })]
+      })]
+    }), isPending && /*#__PURE__*/jsx(Footer, {
+      handleSubmit: handleSubmit,
+      isCurrentUserApprover: isCurrentUserApprover,
+      isCurrentUserRequester: isCurrentUserRequester,
+      isLoading: isUpdateRequestPending
+    })]
+  });
 };
 
 function ownKeys$a(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$a(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$a(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$a(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var History = function History(_ref) {
-  var _t;
   var requestUrl = _ref.requestUrl;
   var _useState = useState(DEFAULT_FILTER_VALUES),
     _useState2 = _slicedToArray(_useState, 2),
@@ -537,64 +559,66 @@ var History = function History(_ref) {
         searchTerm: debouncedSearchTerm.trim(),
         status: [STATUSES.approved, STATUSES.rejected, STATUSES.cancelled]
       }),
-      options: {
-        onSuccess: function onSuccess(_ref2) {
-          var requests = _ref2.requests;
-          handleEmptyPage(requests, pageProperties, handlePageChange);
-          setApprovalDetails(function (approvalDetails) {
-            return updateApprovalDetails({
-              requestsData: requests,
-              approvalDetails: approvalDetails
-            });
-          });
-        }
-      },
       requestUrl: requestUrl
     }),
-    _useFetchRequests$dat = _useFetchRequests.data,
-    _useFetchRequests$dat2 = _useFetchRequests$dat === void 0 ? {} : _useFetchRequests$dat,
-    _useFetchRequests$dat3 = _useFetchRequests$dat2.requests,
-    approvalHistories = _useFetchRequests$dat3 === void 0 ? {} : _useFetchRequests$dat3,
-    _useFetchRequests$dat4 = _useFetchRequests$dat2.totalCount,
-    totalCount = _useFetchRequests$dat4 === void 0 ? 0 : _useFetchRequests$dat4;
+    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$a(_objectSpread$a({}, filters), {}, {
       sortBy: camelToSnakeCase(sorter.field || ""),
       orderBy: SORT_ORDER[sorter.order]
     }));
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, !isEmpty(approvalHistories) ? /*#__PURE__*/React.createElement(TableWrapper, {
-    className: "mt-6",
-    hasPagination: totalCount > pageProperties.pageSize
-  }, /*#__PURE__*/React.createElement(Table$1, {
-    allowRowClick: true,
-    fixedHeight: true,
-    columnData: HISTORY_TABLE_COLUMNS,
-    currentPageNumber: pageProperties.page,
-    defaultPageSize: pageProperties.pageSize,
-    rowData: approvalHistories,
-    handlePageChange: handlePageChange,
-    totalCount: totalCount,
-    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__*/React.createElement("div", {
-    className: "flex h-full w-full flex-grow items-center justify-center"
-  }, /*#__PURE__*/React.createElement(NoData, {
-    title: t("neetoApprovals.common.notFound_", {
-      what: (_t = t("neetoApprovals.common.record", PLURAL)) === null || _t === void 0 ? void 0 : _t.toLocaleLowerCase()
-    })
-  })), /*#__PURE__*/React.createElement(RequestDetailsPane, {
-    approvalDetails: approvalDetails,
-    isOpen: isPresent(approvalDetails),
-    onClose: function onClose() {
-      return setApprovalDetails({});
-    }
-  }));
+  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, {
+        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({
@@ -604,7 +628,6 @@ var PENDING_TABLE_COLUMNS = removeBy({
 function ownKeys$9(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$9(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$9(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$9(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var PendingRequests = function PendingRequests(_ref) {
-  var _t;
   var requestUrl = _ref.requestUrl;
   var _useState = useState(DEFAULT_FILTER_VALUES),
     _useState2 = _slicedToArray(_useState, 2),
@@ -625,75 +648,62 @@ var PendingRequests = function PendingRequests(_ref) {
         searchTerm: debouncedSearchTerm.trim(),
         status: [STATUSES.pending]
       }),
-      options: {
-        onSuccess: function onSuccess(_ref2) {
-          var requests = _ref2.requests;
-          handleEmptyPage(requests, pageProperties, handlePageChange);
-        }
-      },
       requestUrl: requestUrl
     }),
-    _useFetchRequests$dat = _useFetchRequests.data,
-    _useFetchRequests$dat2 = _useFetchRequests$dat === void 0 ? {} : _useFetchRequests$dat,
-    _useFetchRequests$dat3 = _useFetchRequests$dat2.requests,
-    pendingRequests = _useFetchRequests$dat3 === void 0 ? {} : _useFetchRequests$dat3,
-    _useFetchRequests$dat4 = _useFetchRequests$dat2.totalCount,
-    totalCount = _useFetchRequests$dat4 === void 0 ? 0 : _useFetchRequests$dat4;
+    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$9(_objectSpread$9({}, filters), {}, {
       sortBy: camelToSnakeCase(sorter.field || ""),
       orderBy: SORT_ORDER[sorter.order]
     }));
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, !isEmpty(pendingRequests) ? /*#__PURE__*/React.createElement(TableWrapper, {
-    className: "mt-6",
-    hasPagination: totalCount > pageProperties.pageSize
-  }, /*#__PURE__*/React.createElement(Table$1, {
-    allowRowClick: true,
-    fixedHeight: true,
-    columnData: PENDING_TABLE_COLUMNS,
-    currentPageNumber: pageProperties.page,
-    defaultPageSize: pageProperties.pageSize,
-    rowData: pendingRequests,
-    handlePageChange: handlePageChange,
-    totalCount: totalCount,
-    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__*/React.createElement("div", {
-    className: "flex h-full w-full flex-grow items-center justify-center"
-  }, /*#__PURE__*/React.createElement(NoData, {
-    title: t("neetoApprovals.common.notFound_", {
-      what: (_t = t("neetoApprovals.common.pendingApproval", PLURAL)) === null || _t === void 0 ? void 0 : _t.toLocaleLowerCase()
-    })
-  })), /*#__PURE__*/React.createElement(RequestDetailsPane, {
-    isPending: true,
-    approvalDetails: approvalDetails,
-    isOpen: isPresent(approvalDetails),
-    onClose: function onClose() {
-      return setApprovalDetails({});
-    }
-  }));
-};
-
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
+  return /*#__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, {
+        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({});
       }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
+    })]
+  });
+};
 
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
@@ -766,48 +776,50 @@ function _objectSpread$8(e) { for (var r = 1; r < arguments.length; r++) { var t
 var useFetchTemplates = function useFetchTemplates() {
   var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  return useQuery([QUERY_KEYS.TEMPLATES, params], function () {
-    return templatesApi.fetch(params);
-  }, _objectSpread$8({
+  return useQuery(_objectSpread$8({
+    queryKey: [QUERY_KEYS.TEMPLATES, params],
+    queryFn: function queryFn() {
+      return templatesApi.fetch(params);
+    },
     select: function select(response) {
       return response.data || response;
     },
-    keepPreviousData: true,
-    onSuccess: function onSuccess(_ref) {
-      var _params$onSuccess;
-      var templates = _ref.templates;
-      return params === null || params === void 0 || (_params$onSuccess = params.onSuccess) === null || _params$onSuccess === void 0 ? void 0 : _params$onSuccess.call(params, templates);
-    }
+    placeholderData: keepPreviousData
   }, options));
 };
-var useFetchTemplate = function useFetchTemplate(_ref2) {
-  var id = _ref2.id,
-    params = _ref2.params;
-  return useQuery([QUERY_KEYS.SHOW_TEMPLATE, id, params], function () {
-    return templatesApi.show({
-      id: id,
-      params: params
-    });
-  }, {
+var useFetchTemplate = function useFetchTemplate(_ref) {
+  var id = _ref.id,
+    params = _ref.params;
+  return useQuery({
+    queryKey: [QUERY_KEYS.SHOW_TEMPLATE, id, params],
+    queryFn: function queryFn() {
+      return templatesApi.show({
+        id: id,
+        params: params
+      });
+    },
     enabled: !!id
   });
 };
-var useCreateTemplate = function useCreateTemplate(options) {
-  return useMutationWithInvalidation(templatesApi.create, _objectSpread$8({
-    keysToInvalidate: [QUERY_KEYS.TEMPLATES, QUERY_KEYS.VIEWS]
-  }, options));
+var useCreateTemplate = function useCreateTemplate() {
+  return useMutationWithInvalidation(templatesApi.create, {
+    keysToInvalidate: [[QUERY_KEYS.TEMPLATES], [QUERY_KEYS.VIEWS]],
+    onSuccess: function onSuccess() {
+      return captureAnalyticsEvent(EVENTS.APPROVAL_TEMPLATE_CREATED);
+    }
+  });
 };
 var useUpdateTemplate = function useUpdateTemplate(options) {
   return useMutationWithInvalidation(templatesApi.update, _objectSpread$8({
-    keysToInvalidate: [QUERY_KEYS.TEMPLATES, function (_, _ref3) {
-      var id = _ref3.id;
+    keysToInvalidate: [[QUERY_KEYS.TEMPLATES], function (_, _ref2) {
+      var id = _ref2.id;
       return [QUERY_KEYS.SHOW_TEMPLATE, id];
     }]
   }, options));
 };
 var useDeleteTemplate = function useDeleteTemplate(options) {
   return useMutationWithInvalidation(templatesApi.destroy, _objectSpread$8({
-    keysToInvalidate: [QUERY_KEYS.TEMPLATES, QUERY_KEYS.VIEWS]
+    keysToInvalidate: [[QUERY_KEYS.TEMPLATES], [QUERY_KEYS.VIEWS]]
   }, options));
 };
 
@@ -833,7 +845,7 @@ var MessageEditor = withT(function (_ref) {
     placeholders = _ref$placeholders === void 0 ? [] : _ref$placeholders,
     _ref$initialValue = _ref.initialValue,
     initialValue = _ref$initialValue === void 0 ? "" : _ref$initialValue;
-  return /*#__PURE__*/React.createElement(FormikEditor, {
+  return /*#__PURE__*/jsx(FormikEditor, {
     initialValue: initialValue,
     required: true,
     label: t("neetoApprovals.inputs.labels.message"),
@@ -861,32 +873,34 @@ var TemplateForm = function TemplateForm(_ref) {
       setFieldValue("description", "");
     }
   };
-  return /*#__PURE__*/React.createElement("div", {
-    className: "flex w-full flex-col space-y-6"
-  }, /*#__PURE__*/React.createElement(Input, {
-    autoFocus: true,
-    required: true,
-    label: t("neetoApprovals.common.name"),
-    name: "name",
-    placeholder: t("neetoApprovals.inputs.placeholders.name")
-  }), /*#__PURE__*/React.createElement(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")
-      }
-    }
-  }, values.descriptionEnabled && /*#__PURE__*/React.createElement(Textarea$1, {
-    className: "w-full",
-    name: "description",
-    placeholder: t("neetoApprovals.inputs.placeholders.description")
-  })), /*#__PURE__*/React.createElement(MessageEditor, {
-    placeholders: placeholders,
-    initialValue: initialData.message
-  }));
+  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$1, {
+        className: "w-full",
+        name: "description",
+        placeholder: t("neetoApprovals.inputs.placeholders.description")
+      })
+    }), /*#__PURE__*/jsx(MessageEditor, {
+      placeholders: placeholders,
+      initialValue: initialData.message
+    })]
+  });
 };
 
 var Form$2 = function Form(_ref) {
@@ -907,33 +921,42 @@ var Form$2 = function Form(_ref) {
   }) : t("neetoApprovals.common.edit_", {
     what: t("neetoApprovals.common.template", SINGULAR)
   });
-  return /*#__PURE__*/React.createElement(Pane, {
+  return /*#__PURE__*/jsxs(Pane, {
     isOpen: isOpen,
     onClose: onClose,
     initialFocusRef: inputReference,
-    size: "large"
-  }, /*#__PURE__*/React.createElement(Pane.Header, null, /*#__PURE__*/React.createElement(Typography, {
-    style: "h2"
-  }, header)), /*#__PURE__*/React.createElement(FormikForm, {
-    formikProps: {
-      enableReinitialize: true,
-      initialValues: isPresent(initialData) ? initialData : TEMPLATE_FORM_INITIAL_VALUES,
-      validationSchema: TEMPLATE_FORM_VALIDATION_SCHEMA,
-      onSubmit: onSubmit
-    }
-  }, /*#__PURE__*/React.createElement(Pane.Body, null, /*#__PURE__*/React.createElement(TemplateForm, {
-    initialData: initialData,
-    placeholders: placeholders
-  })), /*#__PURE__*/React.createElement(Pane.Footer, null, /*#__PURE__*/React.createElement(ActionBlock, {
-    isSubmitting: isLoading,
-    cancelButtonProps: {
-      "data-cy": "neeto-approvals-templates-close-template-form-btn",
-      onClick: onClose
-    },
-    submitButtonProps: {
-      "data-cy": "neeto-approvals-templates-save-template-btn"
-    }
-  }))));
+    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) {
@@ -943,7 +966,7 @@ var Create = function Create(_ref) {
     templatePlaceholders = _ref.templatePlaceholders;
   var _useCreateTemplate = useCreateTemplate(),
     createTemplate = _useCreateTemplate.mutate,
-    isLoading = _useCreateTemplate.isLoading;
+    isPending = _useCreateTemplate.isPending;
   var onSubmit = function onSubmit(template) {
     var payload = {
       template: template
@@ -955,11 +978,11 @@ var Create = function Create(_ref) {
       onSuccess: onClose
     });
   };
-  return /*#__PURE__*/React.createElement(Form$2, {
-    isLoading: isLoading,
+  return /*#__PURE__*/jsx(Form$2, {
     isOpen: isOpen,
     onClose: onClose,
     onSubmit: onSubmit,
+    isLoading: isPending,
     placeholders: templatePlaceholders
   });
 };
@@ -979,7 +1002,7 @@ var Edit = function Edit(_ref) {
       }
     }),
     updateTemplate = _useUpdateTemplate.mutate,
-    isUpdating = _useUpdateTemplate.isLoading;
+    isUpdating = _useUpdateTemplate.isPending;
   var onSubmit = function onSubmit(template) {
     var payload = {
       template: template
@@ -993,7 +1016,7 @@ var Edit = function Edit(_ref) {
   var initialData = _objectSpread$7(_objectSpread$7({}, template), {}, {
     descriptionEnabled: !!template.description
   });
-  return /*#__PURE__*/React.createElement(Form$2, {
+  return /*#__PURE__*/jsx(Form$2, {
     initialData: initialData,
     isOpen: isOpen,
     onClose: onClose,
@@ -1006,14 +1029,17 @@ var Edit = function Edit(_ref) {
 var Field = function Field(_ref) {
   var label = _ref.label,
     value = _ref.value;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "flex flex-col items-start justify-center"
-  }, /*#__PURE__*/React.createElement(Label, {
-    className: "mb-1 font-normal"
-  }, label), /*#__PURE__*/React.createElement(Typography, {
-    style: "body1",
-    weight: "medium"
-  }, 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__*/React.memo(Field);
 
@@ -1027,41 +1053,47 @@ var TemplateDetails = function TemplateDetails(_ref) {
   var name = template.name,
     description = template.description,
     message = template.message;
-  return /*#__PURE__*/React.createElement(Pane, {
+  return /*#__PURE__*/jsxs(Pane, {
     isOpen: isOpen,
-    onClose: onClose
-  }, /*#__PURE__*/React.createElement(Pane.Header, {
-    className: "space-y-2"
-  }, /*#__PURE__*/React.createElement(Typography, {
-    style: "h2"
-  }, t("neetoApprovals.common.templateDetails"))), /*#__PURE__*/React.createElement(Pane.Body, {
-    className: "space-y-6"
-  }, /*#__PURE__*/React.createElement(Field$1, {
-    label: t("neetoApprovals.common.name"),
-    value: name
-  }), /*#__PURE__*/React.createElement(Field$1, {
-    label: t("neetoApprovals.inputs.labels.description"),
-    value: description
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "flex w-full flex-col space-y-4"
-  }, /*#__PURE__*/React.createElement(Label, {
-    className: "mb-1 font-normal"
-  }, t("neetoApprovals.inputs.labels.message")), /*#__PURE__*/React.createElement(MemoizedEditorContent, {
-    className: "neeto-ui-bg-gray-100 neeto-ui-rounded-lg p-3",
-    content: message
-  }))));
+    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__*/React.createElement(Trans, {
+  return /*#__PURE__*/jsx(Trans, {
     i18nKey: "neetoApprovals.common.noDataHelpText",
     values: {
       entity: entity
     },
     components: {
-      a: /*#__PURE__*/React.createElement(Link, {
+      a: /*#__PURE__*/jsx(Link, {
         className: "neeto-ui-text-primary-600 underline",
         target: "_blank",
         to: {
@@ -1116,34 +1148,36 @@ var Table = function Table(_ref) {
     })
   };
   if (isEmpty(rowData)) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: "flex h-full w-full flex-grow items-center justify-center"
-    }, /*#__PURE__*/React.createElement(NoData, _extends({
-      title: t("neetoApprovals.common.notFound_", {
-        what: entity
-      })
-    }, !filters.searchTerm && noDataProps)));
+    return /*#__PURE__*/jsx("div", {
+      className: "flex h-full w-full flex-grow items-center justify-center",
+      children: /*#__PURE__*/jsx(NoData, _objectSpread$6({
+        title: t("neetoApprovals.common.notFound_", {
+          what: entity
+        })
+      }, !filters.searchTerm && noDataProps))
+    });
   }
-  return /*#__PURE__*/React.createElement(TableWrapper, {
+  return /*#__PURE__*/jsx(TableWrapper, {
     className: "mt-6",
-    hasPagination: totalCount > pageProperties.pageSize
-  }, /*#__PURE__*/React.createElement(Table$1, _extends({
-    fixedHeight: true,
-    columnData: columns,
-    currentPageNumber: pageProperties.page,
-    defaultPageSize: pageProperties.pageSize,
-    scroll: {
-      x: 0
-    },
-    tableLayout: "fixed",
-    paginationProps: {
-      hideOnSinglePage: (rowData === null || rowData === void 0 ? void 0 : rowData.length) < DEFAULT_PAGE_SIZE + 1
-    },
-    onChange: handleTableChange
-  }, _objectSpread$6({
-    rowData: rowData,
-    totalCount: totalCount
-  }, otherProps))));
+    hasPagination: totalCount > pageProperties.pageSize,
+    children: /*#__PURE__*/jsx(Table$1, _objectSpread$6({
+      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$6({
+      rowData: rowData,
+      totalCount: totalCount
+    }, otherProps)))
+  });
 };
 
 var columnData = function columnData(_ref) {
@@ -1156,32 +1190,34 @@ var columnData = function columnData(_ref) {
     title: i18next.t("neetoApprovals.common.name"),
     ellipsis: true,
     render: function render(_, template) {
-      return /*#__PURE__*/React.createElement("div", {
-        className: "flex items-center justify-between gap-x-3"
-      }, /*#__PURE__*/React.createElement(Typography, {
-        className: "truncate",
-        style: "body2"
-      }, template.name), /*#__PURE__*/React.createElement(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")]
-      }));
+      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",
@@ -1194,7 +1230,6 @@ var _excluded = ["searchTerm", "isNewTemplatePaneOpen", "setIsNewTemplatePaneOpe
 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 Templates = function Templates(_ref) {
-  var _t, _t2, _t3;
   var searchTerm = _ref.searchTerm,
     isNewTemplatePaneOpen = _ref.isNewTemplatePaneOpen,
     setIsNewTemplatePaneOpen = _ref.setIsNewTemplatePaneOpen,
@@ -1232,28 +1267,27 @@ var Templates = function Templates(_ref) {
   }, [searchTerm]);
   var _useFetchTemplates = useFetchTemplates(_objectSpread$5(_objectSpread$5(_objectSpread$5({}, pageProperties), filters), {}, {
       searchTerm: debouncedSearchTerm.trim()
-    }), {
-      onSuccess: function onSuccess(_ref2) {
-        var templates = _ref2.templates;
-        handleEmptyPage(templates, pageProperties, handlePageChange);
-      }
-    }),
-    _useFetchTemplates$da = _useFetchTemplates.data,
-    _useFetchTemplates$da2 = _useFetchTemplates$da === void 0 ? {} : _useFetchTemplates$da,
-    _useFetchTemplates$da3 = _useFetchTemplates$da2.templates,
-    templates = _useFetchTemplates$da3 === void 0 ? [] : _useFetchTemplates$da3,
-    _useFetchTemplates$da4 = _useFetchTemplates$da2.totalCount,
-    totalCount = _useFetchTemplates$da4 === void 0 ? 0 : _useFetchTemplates$da4,
+    })),
+    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.isLoading;
+    isDeleting = _useDeleteTemplate.isPending;
   useEffect(function () {
-    if (isEmpty(selectedTemplate)) {
-      setIsDeleteAlertOpen(false);
-      setIsEditPaneOpen(false);
-      setIsShowPaneOpen(false);
-    }
+    if (!isEmpty(selectedTemplate)) return;
+    setIsDeleteAlertOpen(false);
+    setIsEditPaneOpen(false);
+    setIsShowPaneOpen(false);
   }, [selectedTemplate]);
   var onEditClick = function onEditClick(event, template) {
     event.stopPropagation();
@@ -1275,62 +1309,64 @@ var Templates = function Templates(_ref) {
     });
     setSelectedTemplate({});
   };
-  var entity = (_t = t("neetoApprovals.common.template", PLURAL)) === null || _t === void 0 ? void 0 : _t.toLocaleLowerCase();
-  return /*#__PURE__*/React.createElement(React.Fragment, null, isTemplateLoading ? /*#__PURE__*/React.createElement(PageLoader, null) : /*#__PURE__*/React.createElement(Table, {
-    rowData: templates,
-    setIsPaneOpen: setIsNewTemplatePaneOpen,
-    columnData: columnData,
-    entity: entity,
-    filters: filters,
-    handlePageChange: handlePageChange,
-    helpDocUrl: helpDocUrl,
-    onDeleteClick: onDeleteClick,
-    onEditClick: onEditClick,
-    onRowClick: onRowClick,
-    pageProperties: pageProperties,
-    searchTerm: searchTerm,
-    setFilters: setFilters,
-    totalCount: totalCount
-  }), /*#__PURE__*/React.createElement(Create, _extends({
-    isOpen: isNewTemplatePaneOpen,
-    onClose: function onClose() {
-      return setIsNewTemplatePaneOpen(false);
-    }
-  }, otherProps)), /*#__PURE__*/React.createElement(Edit, _extends({
-    isOpen: isEditPaneOpen,
-    setTemplate: setSelectedTemplate,
-    template: selectedTemplate
-  }, otherProps, {
-    onClose: function onClose() {
-      return setIsEditPaneOpen(false);
-    }
-  })), /*#__PURE__*/React.createElement(Alert, {
-    isOpen: isDeleteAlertOpen,
-    isSubmitting: isDeleting,
-    submitButtonLabel: t("neetoApprovals.buttons.delete"),
-    message: /*#__PURE__*/React.createElement(Trans, {
-      i18nKey: "neetoApprovals.alerts.deleting_",
-      values: {
-        what: (_t2 = t("neetoApprovals.common.template", SINGULAR)) === null || _t2 === void 0 ? void 0 : _t2.toLocaleLowerCase(),
-        name: selectedTemplate === null || selectedTemplate === void 0 ? void 0 : selectedTemplate.name
+  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$5({
+      isOpen: isNewTemplatePaneOpen,
+      onClose: function onClose() {
+        return setIsNewTemplatePaneOpen(false);
       }
-    }),
-    title: t("neetoApprovals.common.delete_", {
-      what: (_t3 = t("neetoApprovals.common.template", SINGULAR)) === null || _t3 === void 0 ? void 0 : _t3.toLocaleLowerCase()
-    }),
-    onClose: function onClose() {
-      return setSelectedTemplate({});
-    },
-    onSubmit: function onSubmit() {
-      return handleDelete(selectedTemplate === null || selectedTemplate === void 0 ? void 0 : selectedTemplate.id);
-    }
-  }), /*#__PURE__*/React.createElement(TemplateDetails, {
-    isOpen: isShowPaneOpen,
-    template: selectedTemplate,
-    onClose: function onClose() {
-      return setSelectedTemplate({});
-    }
-  }));
+    }, otherProps)), /*#__PURE__*/jsx(Edit, _objectSpread$5(_objectSpread$5({
+      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$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; }
@@ -1342,16 +1378,16 @@ var createRoutes = function createRoutes(_ref) {
     setIsNewTemplatePaneOpen = _ref.setIsNewTemplatePaneOpen;
   return [{
     component: function component() {
-      return /*#__PURE__*/React.createElement(Templates, _objectSpread$4({
+      return /*#__PURE__*/jsx(Templates, _objectSpread$4({}, _objectSpread$4({
         isNewTemplatePaneOpen: isNewTemplatePaneOpen,
         searchTerm: searchTerm,
         setIsNewTemplatePaneOpen: setIsNewTemplatePaneOpen
-      }, config));
+      }, config)));
     },
     path: "".concat(config.approvalsPath).concat(routes.templates.index),
     actionBlock: function actionBlock() {
       var _t;
-      return /*#__PURE__*/React.createElement(Button, {
+      return /*#__PURE__*/jsx(Button, {
         "data-cy": "neeto-approvals-templates-add-new-button",
         label: t$1("neetoApprovals.common.addNew_", {
           what: (_t = t$1("neetoApprovals.common.template", SINGULAR)) === null || _t === void 0 ? void 0 : _t.toLocaleLowerCase()
@@ -1366,12 +1402,12 @@ var createRoutes = function createRoutes(_ref) {
     })
   }, {
     component: function component() {
-      return /*#__PURE__*/React.createElement(PendingRequests, config);
+      return /*#__PURE__*/jsx(PendingRequests, _objectSpread$4({}, config));
     },
     path: "".concat(config.approvalsPath).concat(routes.pending)
   }, {
     component: function component() {
-      return /*#__PURE__*/React.createElement(History, config);
+      return /*#__PURE__*/jsx(History, _objectSpread$4({}, config));
     },
     path: "".concat(config.approvalsPath).concat(routes.history)
   }];
@@ -1388,7 +1424,7 @@ var Header = function Header(_ref) {
   var currentTab = findBy({
     path: pathname
   }, appRoutes);
-  return /*#__PURE__*/React.createElement(NeetoHeader, {
+  return /*#__PURE__*/jsx(NeetoHeader, {
     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) && {
@@ -1409,9 +1445,9 @@ function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymb
 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 useFetchViews = function useFetchViews() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return useQuery([QUERY_KEYS.VIEWS], function () {
-    return viewsApi.fetch();
-  }, _objectSpread$3({
+  return useQuery(_objectSpread$3({
+    queryKey: [QUERY_KEYS.VIEWS],
+    queryFn: viewsApi.fetch,
     select: function select(response) {
       return response.data || response;
     }
@@ -1438,17 +1474,19 @@ var Tab = function Tab(_ref) {
     _useFetchViews$data2 = _useFetchViews$data === void 0 ? {} : _useFetchViews$data,
     _useFetchViews$data2$ = _useFetchViews$data2.views,
     views = _useFetchViews$data2$ === void 0 ? {} : _useFetchViews$data2$;
-  return /*#__PURE__*/React.createElement(NeetoUITab, null, approvalFilterKeys.map(function (filter) {
-    return /*#__PURE__*/React.createElement(NeetoUITab.Item, {
-      active: isActive(filter),
-      count: views[filter === null || filter === void 0 ? void 0 : filter.toLocaleLowerCase()],
-      key: filter,
-      label: approvalFilter[filter].label,
-      onClick: function onClick() {
-        return history.push(getRoute(filter));
-      }
-    }, approvalFilter[filter].label, " (", views[filter === null || filter === void 0 ? void 0 : filter.toLocaleLowerCase()] || 0, ")");
-  }));
+  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$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; }
@@ -1468,28 +1506,33 @@ var Approvals = function Approvals(_ref) {
     isNewTemplatePaneOpen: isNewTemplatePaneOpen,
     setIsNewTemplatePaneOpen: setIsNewTemplatePaneOpen
   });
-  return /*#__PURE__*/React.createElement("div", {
-    className: "w-full overflow-y-auto"
-  }, /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Header, _objectSpread$2({
-    appRoutes: appRoutes
-  }, config)), /*#__PURE__*/React.createElement(Tab, {
-    approvalsPath: config.approvalsPath
-  }), /*#__PURE__*/React.createElement(Switch, null, appRoutes.map(function (_ref2) {
-    var path = _ref2.path,
-      component = _ref2.component;
-    return /*#__PURE__*/React.createElement(Route, {
-      exact: true,
-      component: component,
-      path: path,
-      key: path
-    });
-  }), /*#__PURE__*/React.createElement(Redirect, {
-    exact: true,
-    from: config.approvalsPath
-    // eslint-disable-next-line @bigbinary/neeto/use-common-routes
-    ,
-    to: "".concat(config.approvalsPath).concat(routes.pending)
-  }))));
+  return /*#__PURE__*/jsx("div", {
+    className: "w-full overflow-y-auto",
+    children: /*#__PURE__*/jsxs(Container, {
+      children: [/*#__PURE__*/jsx(Header, _objectSpread$2({}, _objectSpread$2({
+        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, {
+            exact: true,
+            component: component,
+            path: path,
+            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)
+        })]
+      })]
+    })
+  });
 };
 
 var fetch = function fetch(params) {
@@ -1506,17 +1549,13 @@ function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t
 var useFetchApprovers = function useFetchApprovers() {
   var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  return useQuery([QUERY_KEYS.APPROVERS, params], function () {
-    return approversApi.fetch(params);
-  }, _objectSpread$1({
+  return useQuery(_objectSpread$1({
+    queryKey: [QUERY_KEYS.APPROVERS, params],
+    queryFn: function queryFn() {
+      return approversApi.fetch(params);
+    },
     select: function select(response) {
       return response.data || response;
-    },
-    keepPreviousData: true,
-    onSuccess: function onSuccess(_ref) {
-      var _params$onSuccess;
-      var approvers = _ref.approvers;
-      return params === null || params === void 0 || (_params$onSuccess = params.onSuccess) === null || _params$onSuccess === void 0 ? void 0 : _params$onSuccess.call(params, approvers);
     }
   }, options));
 };
@@ -1595,37 +1634,42 @@ var Form$1 = function Form(_ref) {
     setSelectedTemplateData(template);
     updateMessage();
   }, [template]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: "w-full space-y-6"
-  }, /*#__PURE__*/React.createElement(Select, {
-    label: t("neetoApprovals.select.approval"),
-    options: templateOptions,
-    onChange: function onChange(selectedTemplate) {
-      return handleTemplateChange(selectedTemplate);
-    }
-  }), (selectedTemplateData === null || selectedTemplateData === void 0 ? void 0 : selectedTemplateData.message) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: "flex space-x-6"
-  }, /*#__PURE__*/React.createElement(Select, {
-    required: true,
-    label: t("neetoApprovals.inputs.labels.approver"),
-    name: "approver",
-    options: approverOptions,
-    placeholder: t("neetoApprovals.inputs.placeholders.select_", {
-      what: t("neetoApprovals.common.approver", SINGULAR)
-    }),
-    onChange: handleApproverChange
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "space-y-2"
-  }, /*#__PURE__*/React.createElement(FormikEditor, {
-    required: true,
-    label: t("neetoApprovals.inputs.labels.message"),
-    name: "message",
-    ref: inputRef,
-    rows: 3,
-    placeholder: t("neetoApprovals.inputs.placeholders.enter_", {
-      what: t("neetoApprovals.inputs.labels.message")
-    })
-  }))));
+  return /*#__PURE__*/jsxs("div", {
+    className: "w-full space-y-6",
+    children: [/*#__PURE__*/jsx(Select, {
+      label: t("neetoApprovals.select.approval"),
+      options: templateOptions,
+      onChange: function onChange(selectedTemplate) {
+        return handleTemplateChange(selectedTemplate);
+      }
+    }), (selectedTemplateData === null || selectedTemplateData === void 0 ? void 0 : selectedTemplateData.message) && /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsx("div", {
+        className: "flex space-x-6",
+        children: /*#__PURE__*/jsx(Select, {
+          required: true,
+          label: t("neetoApprovals.inputs.labels.approver"),
+          name: "approver",
+          options: approverOptions,
+          placeholder: t("neetoApprovals.inputs.placeholders.select_", {
+            what: t("neetoApprovals.common.approver", SINGULAR)
+          }),
+          onChange: handleApproverChange
+        })
+      }), /*#__PURE__*/jsx("div", {
+        className: "space-y-2",
+        children: /*#__PURE__*/jsx(FormikEditor, {
+          required: true,
+          label: t("neetoApprovals.inputs.labels.message"),
+          name: "message",
+          ref: inputRef,
+          rows: 3,
+          placeholder: t("neetoApprovals.inputs.placeholders.enter_", {
+            what: t("neetoApprovals.inputs.labels.message")
+          })
+        })
+      })]
+    })]
+  });
 };
 
 var Form = function Form(_ref) {
@@ -1651,29 +1695,38 @@ var Form = function Form(_ref) {
       approverId: values.approver.value
     }, selectedTemplateData, onClose);
   };
-  return /*#__PURE__*/React.createElement(Pane, {
+  return /*#__PURE__*/jsxs(Pane, {
     isOpen: isOpen,
-    onClose: onClose
-  }, /*#__PURE__*/React.createElement(Pane.Header, null, /*#__PURE__*/React.createElement(Typography, {
-    style: "h2"
-  }, t("neetoApprovals.common.add_", {
-    what: t("neetoApprovals.common.approval", SINGULAR)
-  }))), /*#__PURE__*/React.createElement(FormikForm, {
-    formikProps: {
-      onSubmit: handleSubmit,
-      initialValues: APPROVAL_REQUEST_FORM_INITIAL_VALUES,
-      validationSchema: REQUEST_FORM_VALIDATION_SCHEMA
-    }
-  }, /*#__PURE__*/React.createElement(Pane.Body, null, /*#__PURE__*/React.createElement(Form$1, {
-    requestableId: requestableId,
-    selectedTemplateData: selectedTemplateData,
-    setSelectedTemplateData: setSelectedTemplateData
-  })), /*#__PURE__*/React.createElement(Pane.Footer, null, /*#__PURE__*/React.createElement(ActionBlock, {
-    cancelButtonProps: {
-      onClick: onClose
-    },
-    isSubmitting: isLoading
-  }))));
+    onClose: onClose,
+    children: [/*#__PURE__*/jsx(Pane.Header, {
+      children: /*#__PURE__*/jsx(Typography, {
+        style: "h2",
+        children: t("neetoApprovals.common.add_", {
+          what: t("neetoApprovals.common.approval", SINGULAR)
+        })
+      })
+    }), /*#__PURE__*/jsxs(FormikForm, {
+      formikProps: {
+        onSubmit: handleSubmit,
+        initialValues: APPROVAL_REQUEST_FORM_INITIAL_VALUES,
+        validationSchema: REQUEST_FORM_VALIDATION_SCHEMA
+      },
+      children: [/*#__PURE__*/jsx(Pane.Body, {
+        children: /*#__PURE__*/jsx(Form$1, {
+          requestableId: requestableId,
+          selectedTemplateData: selectedTemplateData,
+          setSelectedTemplateData: setSelectedTemplateData
+        })
+      }), /*#__PURE__*/jsx(Pane.Footer, {
+        children: /*#__PURE__*/jsx(ActionBlock, {
+          cancelButtonProps: {
+            onClick: onClose
+          },
+          isSubmitting: isLoading
+        })
+      })]
+    })]
+  });
 };
 
 var show = function show(id) {
@@ -1703,20 +1756,21 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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 useFetchPublicRequest = function useFetchPublicRequest(_ref, options) {
   var requestId = _ref.requestId;
-  return useQuery([QUERY_KEYS.SHOW_PUBLIC_REQUEST, requestId], function () {
-    return publicRequestsApi.show(requestId);
-  }, _objectSpread({}, options));
+  return useQuery(_objectSpread({
+    queryKey: [QUERY_KEYS.SHOW_PUBLIC_REQUEST, requestId],
+    queryFn: function queryFn() {
+      return publicRequestsApi.show(requestId);
+    }
+  }, options));
 };
 var useAcceptPendingRequest = function useAcceptPendingRequest(options) {
-  useQueryClient();
   return useMutationWithInvalidation(publicRequestsApi.accept, _objectSpread({
-    keysToInvalidate: [QUERY_KEYS.SHOW_PUBLIC_REQUEST, QUERY_KEYS.REQUESTS, QUERY_KEYS.VIEWS]
+    keysToInvalidate: [[QUERY_KEYS.SHOW_PUBLIC_REQUEST], [QUERY_KEYS.REQUESTS], [QUERY_KEYS.VIEWS]]
   }, options));
 };
 var useDeclinePendingRequest = function useDeclinePendingRequest(options) {
-  useQueryClient();
   return useMutationWithInvalidation(publicRequestsApi.decline, _objectSpread({
-    keysToInvalidate: [QUERY_KEYS.SHOW_PUBLIC_REQUEST, QUERY_KEYS.REQUESTS, QUERY_KEYS.VIEWS]
+    keysToInvalidate: [[QUERY_KEYS.SHOW_PUBLIC_REQUEST], [QUERY_KEYS.REQUESTS], [QUERY_KEYS.VIEWS]]
   }, options));
 };
 
@@ -1732,84 +1786,96 @@ var Public = function Public() {
     t = _useTranslation.t;
   var _useFetchPublicReques = useFetchPublicRequest({
       requestId: id
-    }, {
-      onSuccess: function onSuccess(_ref) {
-        var note = _ref.approvalRequest.note;
-        note && setNote(note);
-      }
     }),
-    _useFetchPublicReques2 = _useFetchPublicReques.data,
-    _useFetchPublicReques3 = _useFetchPublicReques2 === void 0 ? {} : _useFetchPublicReques2,
-    _useFetchPublicReques4 = _useFetchPublicReques3.approvalRequest,
-    approvalRequest = _useFetchPublicReques4 === void 0 ? {} : _useFetchPublicReques4,
+    data = _useFetchPublicReques.data,
     isLoading = _useFetchPublicReques.isLoading;
+  var _ref = data || {},
+    _ref$approvalRequest = _ref.approvalRequest,
+    approvalRequest = _ref$approvalRequest === void 0 ? {} : _ref$approvalRequest;
+  useEffect(function () {
+    var _data$approvalRequest;
+    if (data !== null && data !== void 0 && (_data$approvalRequest = data.approvalRequest) !== null && _data$approvalRequest !== void 0 && _data$approvalRequest.note) {
+      setNote(data.approvalRequest.note);
+    }
+  }, [data]);
   var _useAcceptPendingRequ = useAcceptPendingRequest(),
     acceptPendingRequest = _useAcceptPendingRequ.mutate,
-    isAccepting = _useAcceptPendingRequ.isLoading;
+    isAccepting = _useAcceptPendingRequ.isPending;
   var _useDeclinePendingReq = useDeclinePendingRequest(),
     declinePendingRequest = _useDeclinePendingReq.mutate,
-    isDeclining = _useDeclinePendingReq.isLoading;
+    isDeclining = _useDeclinePendingReq.isPending;
   var calloutStyle = approvalRequest.status === STATUSES.approved ? "success" : "danger";
   var hideTextArea = approvalRequest.status !== STATUSES.pending && isEmpty(note);
   if (isLoading) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: "h-screen items-center justify-center"
-    }, /*#__PURE__*/React.createElement(PageLoader, null));
+    return /*#__PURE__*/jsx("div", {
+      className: "h-screen items-center justify-center",
+      children: /*#__PURE__*/jsx(PageLoader, {})
+    });
   }
-  return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(NeetoHeader, {
-    title: t("neetoApprovals.common.approval", PLURAL)
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "flex h-screen w-full flex-col items-center"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "neeto-ui-shadow-s w-2/5 rounded border p-6"
-  }, approvalRequest ? /*#__PURE__*/React.createElement("div", {
-    className: "flex w-full flex-col space-y-6"
-  }, /*#__PURE__*/React.createElement(Typography, {
-    style: "h2"
-  }, approvalRequest.title), /*#__PURE__*/React.createElement(EditorContent, {
-    content: approvalRequest.message
-  }), !hideTextArea && /*#__PURE__*/React.createElement(Textarea, {
-    label: t("neetoApprovals.common.note"),
-    placeholder: t("neetoApprovals.inputs.placeholders.add_", {
-      what: (_t = t("neetoApprovals.common.note")) === null || _t === void 0 ? void 0 : _t.toLocaleLowerCase()
-    }),
-    value: note,
-    disabled: approvalRequest.status !== STATUSES.pending,
-    onChange: withEventTargetValue(setNote)
-  }), approvalRequest.status === STATUSES.pending ? /*#__PURE__*/React.createElement("div", {
-    className: "mx-auto mt-8 flex space-x-6"
-  }, /*#__PURE__*/React.createElement(Button, {
-    label: t("neetoApprovals.buttons.approve"),
-    onClick: function onClick() {
-      return acceptPendingRequest({
-        id: approvalRequest.id,
-        note: note
-      });
-    },
-    loading: isAccepting
-  }), /*#__PURE__*/React.createElement(Button, {
-    label: t("neetoApprovals.buttons.decline"),
-    onClick: function onClick() {
-      return declinePendingRequest({
-        id: approvalRequest.id,
-        note: note
-      });
-    },
-    style: "secondary",
-    loading: isDeclining
-  })) : /*#__PURE__*/React.createElement(Callout, {
-    style: calloutStyle
-  }, /*#__PURE__*/React.createElement(Typography, {
-    style: "body1"
-  }, /*#__PURE__*/React.createElement(Trans, {
-    i18nKey: "neetoApprovals.typography.approvalRequest",
-    values: {
-      status: approvalRequest.status
-    }
-  })))) : /*#__PURE__*/React.createElement(Typography, {
-    style: "h4",
-    className: "text-center"
-  }, t("neetoApprovals.common.notFound")))));
+  return /*#__PURE__*/jsxs(Container, {
+    children: [/*#__PURE__*/jsx(NeetoHeader, {
+      title: t("neetoApprovals.common.approval", PLURAL)
+    }), /*#__PURE__*/jsx("div", {
+      className: "flex h-screen w-full flex-col items-center",
+      children: /*#__PURE__*/jsx("div", {
+        className: "neeto-ui-shadow-s w-2/5 rounded border p-6",
+        children: approvalRequest ? /*#__PURE__*/jsxs("div", {
+          className: "flex w-full flex-col space-y-6",
+          children: [/*#__PURE__*/jsx(Typography, {
+            style: "h2",
+            children: approvalRequest.title
+          }), /*#__PURE__*/jsx(EditorContent, {
+            content: approvalRequest.message
+          }), !hideTextArea && /*#__PURE__*/jsx(Textarea, {
+            label: t("neetoApprovals.common.note"),
+            placeholder: t("neetoApprovals.inputs.placeholders.add_", {
+              what: (_t = t("neetoApprovals.common.note")) === null || _t === void 0 ? void 0 : _t.toLocaleLowerCase()
+            }),
+            value: note,
+            disabled: approvalRequest.status !== STATUSES.pending,
+            onChange: withEventTargetValue(setNote)
+          }), approvalRequest.status === STATUSES.pending ? /*#__PURE__*/jsxs("div", {
+            className: "mx-auto mt-8 flex space-x-6",
+            children: [/*#__PURE__*/jsx(Button, {
+              label: t("neetoApprovals.buttons.approve"),
+              onClick: function onClick() {
+                return acceptPendingRequest({
+                  id: approvalRequest.id,
+                  note: note
+                });
+              },
+              loading: isAccepting
+            }), /*#__PURE__*/jsx(Button, {
+              label: t("neetoApprovals.buttons.decline"),
+              onClick: function onClick() {
+                return declinePendingRequest({
+                  id: approvalRequest.id,
+                  note: note
+                });
+              },
+              style: "secondary",
+              loading: isDeclining
+            })]
+          }) : /*#__PURE__*/jsx(Callout, {
+            style: calloutStyle,
+            children: /*#__PURE__*/jsx(Typography, {
+              style: "body1",
+              children: /*#__PURE__*/jsx(Trans, {
+                i18nKey: "neetoApprovals.typography.approvalRequest",
+                values: {
+                  status: approvalRequest.status
+                }
+              })
+            })
+          })]
+        }) : /*#__PURE__*/jsx(Typography, {
+          style: "h4",
+          className: "text-center",
+          children: t("neetoApprovals.common.notFound")
+        })
+      })
+    })]
+  });
 };
 
 var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}