@bigbinary/neeto-approvals-frontend 1.2.16 → 1.2.18

package/dist/v2/Approvals.js

@@ -0,0 +1,986 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { useState, useEffect, memo, createElement } from 'react';
+import { useDebounce, withT, useQueryParams } from '@bigbinary/neeto-commons-frontend/v2/react-utils';
+import Container from '@bigbinary/neeto-molecules/v2/Container';
+import { useLocation, useHistory, Switch, Route, Redirect } from 'react-router-dom';
+import { u as usePaginate, h as handleEmptyPage, r as routes, a as useFetchViews } from '../useViewsApi-k6u7op_J.js';
+import { Button, Badge, DataTable, Empty, Sheet, Typography, Label, Alert, Tabs } from '@bigbinary/neeto-atoms';
+import i18next, { t } from 'i18next';
+import { PLURAL, SINGULAR } from '@bigbinary/neeto-commons-frontend/v2/constants';
+import { capitalize, isPresent, camelToSnakeCase, removeBy, noop, findBy } from '@bigbinary/neeto-cist';
+import TableWrapper from '@bigbinary/neeto-molecules/v2/TableWrapper';
+import { isEmpty, keys } from 'ramda';
+import { useTranslation, Trans } from 'react-i18next';
+import { a as useFetchRequests } from '../useRequestsApi-DEGfFuv5.js';
+import DateFormat from '@bigbinary/neeto-molecules/v2/DateFormat';
+import { b as STATUS_TAG_STYLE, D as DEFAULT_FILTER_VALUES, d as SEARCH_DELAY, S as STATUSES, e as SORT_ORDER, f as DATA_TESTID_KEY } from '../constants-DzID-rqV.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { u as updateApprovalDetails, R as RequestDetailsPane, g as getApprovalFilter } from '../index-C8moxeiZ.js';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import PageLoader from '@bigbinary/neeto-molecules/v2/PageLoader';
+import { b as useCreateTemplate, c as useUpdateTemplate, u as useFetchTemplates, d as useDeleteTemplate } from '../useTemplatesApi-BII_qvcl.js';
+import { Input, Textarea, Form as Form$1, ActionBlock } from '@bigbinary/neeto-atoms/formik';
+import { isEditorEmpty } from '@bigbinary/neeto-editor/v2/utils';
+import * as yup from 'yup';
+import { useFormikContext } from 'formik';
+import ToggleFeatureCard from '@bigbinary/neeto-molecules/v2/ToggleFeatureCard';
+import FormikEditor from '@bigbinary/neeto-editor/v2/FormikEditor';
+import EditorContent from '@bigbinary/neeto-editor/v2/EditorContent';
+import MoreDropdown from '@bigbinary/neeto-molecules/v2/MoreDropdown';
+import NeetoHeader from '@bigbinary/neeto-molecules/v2/Header';
+import '@bigbinary/neeto-commons-frontend/constants';
+import '@tanstack/react-query';
+import 'axios';
+import '../queryConstants-Vrcjv9lF.js';
+import '@bigbinary/neeto-commons-frontend/react-utils';
+import '@bigbinary/neeto-commons-frontend/v2/utils';
+import '@bigbinary/neeto-commons-frontend/utils/timezonePlugin';
+import 'dayjs/plugin/utc';
+import '@bigbinary/neeto-commons-frontend/utils';
+import '@bigbinary/neeto-commons-frontend/v2/initializers';
+import '../constants-qLYJlKc6.js';
+import '@bigbinary/neeto-editor/utils';
+
+var STATUS_BADGE_VARIANT = {
+  primary: "default",
+  success: "green-subtle",
+  danger: "red-subtle",
+  warning: "amber-subtle"
+};
+var HISTORY_TABLE_COLUMNS = [{
+  accessorKey: "approvalLabel",
+  id: "approvalLabel",
+  enableSorting: true,
+  size: 150,
+  header: t("neetoApprovals.common.id"),
+  cell: function cell(_ref) {
+    var _ref$row$original = _ref.row.original,
+      approvalLabel = _ref$row$original.approvalLabel,
+      requestableUrl = _ref$row$original.requestableUrl;
+    var url = new URL(requestableUrl || window.location.origin);
+    return /*#__PURE__*/jsx(Button, {
+      label: approvalLabel,
+      to: url.pathname,
+      variant: "link"
+    });
+  }
+}, {
+  accessorKey: "title",
+  id: "title",
+  enableSorting: true,
+  size: 400,
+  header: t("neetoApprovals.common.title")
+}, {
+  accessorKey: "status",
+  id: "status",
+  enableSorting: true,
+  size: 200,
+  header: t("neetoApprovals.common.status"),
+  cell: function cell(_ref2) {
+    var status = _ref2.row.original.status;
+    return /*#__PURE__*/jsx(Badge, {
+      variant: STATUS_BADGE_VARIANT[STATUS_TAG_STYLE[status]],
+      children: capitalize(status)
+    });
+  }
+}, {
+  accessorKey: "createdAt",
+  id: "createdAt",
+  enableSorting: true,
+  size: 200,
+  header: t("neetoApprovals.common.created"),
+  cell: function cell(_ref3) {
+    var createdAt = _ref3.row.original.createdAt;
+    return /*#__PURE__*/jsx(DateFormat.FromNow, {
+      date: createdAt,
+      typographyProps: {
+        variant: "body2"
+      }
+    });
+  }
+}];
+
+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), true).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 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$6(_objectSpread$6(_objectSpread$6({}, 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$6(_objectSpread$6({}, 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(DataTable, {
+        totalCount: totalCount,
+        allowRowClick: true,
+        columns: HISTORY_TABLE_COLUMNS,
+        currentPage: pageProperties.page,
+        data: approvalHistories,
+        pageSize: pageProperties.pageSize,
+        onPageChange: handlePageChange,
+        onSort: function onSort(sorter) {
+          return handleTableChange(sorter !== null && sorter !== void 0 ? sorter : {});
+        },
+        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(Empty, {
+        helpText: /*#__PURE__*/jsx(Trans, {
+          i18nKey: "neetoApprovals.common.noDataHelpTextLearnMore",
+          values: {
+            entity: t("neetoApprovals.common.history")
+          },
+          components: {
+            a: /*#__PURE__*/jsx(Button, {
+              target: "_blank",
+              to: helpDocUrl,
+              variant: "link"
+            })
+          }
+        }),
+        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({
+  id: "status"
+}, HISTORY_TABLE_COLUMNS);
+
+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), true).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 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$5(_objectSpread$5(_objectSpread$5({}, 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$5(_objectSpread$5({}, 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(DataTable, {
+        totalCount: totalCount,
+        allowRowClick: true,
+        columns: PENDING_TABLE_COLUMNS,
+        currentPage: pageProperties.page,
+        data: pendingRequests,
+        pageSize: pageProperties.pageSize,
+        onPageChange: handlePageChange,
+        onSort: function onSort(sorter) {
+          return handleTableChange(sorter !== null && sorter !== void 0 ? sorter : {});
+        },
+        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(Empty, {
+        helpText: /*#__PURE__*/jsx(Trans, {
+          i18nKey: "neetoApprovals.common.noDataHelpTextLearnMore",
+          components: {
+            a: /*#__PURE__*/jsx(Button, {
+              target: "_blank",
+              to: helpDocUrl,
+              variant: "link"
+            })
+          },
+          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({});
+      }
+    })]
+  });
+};
+
+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(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: {
+        onCheckedChange: 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 _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(Sheet, {
+    isOpen: isOpen,
+    onClose: onClose,
+    size: "large",
+    children: [/*#__PURE__*/jsx(Sheet.Header, {
+      children: /*#__PURE__*/jsx(Typography, {
+        variant: "h2",
+        children: header
+      })
+    }), /*#__PURE__*/jsxs(Form$1, {
+      formikProps: {
+        enableReinitialize: true,
+        initialValues: isPresent(initialData) ? initialData : TEMPLATE_FORM_INITIAL_VALUES,
+        validationSchema: TEMPLATE_FORM_VALIDATION_SCHEMA,
+        onSubmit: onSubmit
+      },
+      children: [/*#__PURE__*/jsx(Sheet.Body, {
+        children: /*#__PURE__*/jsx(TemplateForm, {
+          initialData: initialData,
+          placeholders: placeholders
+        })
+      }), /*#__PURE__*/jsx(Sheet.Footer, {
+        children: /*#__PURE__*/jsx(ActionBlock, {
+          isSubmitting: isLoading,
+          cancelButtonProps: {
+            "data-testid": "neeto-approvals-templates-close-template-form-btn",
+            onClick: onClose
+          },
+          submitButtonProps: {
+            "data-testid": "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$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), true).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 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$4(_objectSpread$4({}, template), {}, {
+    descriptionEnabled: !!template.description
+  });
+  return /*#__PURE__*/jsx(Form, {
+    initialData: initialData,
+    isOpen: isOpen,
+    onClose: onClose,
+    onSubmit: onSubmit,
+    isLoading: isUpdating,
+    placeholders: templatePlaceholders
+  });
+};
+
+var Field$1 = 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, {
+      variant: "body1",
+      weight: "medium",
+      children: value
+    })]
+  });
+};
+var Field = /*#__PURE__*/memo(Field$1);
+
+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(Sheet, {
+    isOpen: isOpen,
+    onClose: onClose,
+    children: [/*#__PURE__*/jsx(Sheet.Header, {
+      className: "space-y-2",
+      children: /*#__PURE__*/jsx(Typography, {
+        variant: "h2",
+        children: t("neetoApprovals.common.templateDetails")
+      })
+    }), /*#__PURE__*/jsxs(Sheet.Body, {
+      className: "space-y-6",
+      children: [/*#__PURE__*/jsx(Field, {
+        label: t("neetoApprovals.common.name"),
+        value: name
+      }), /*#__PURE__*/jsx(Field, {
+        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: "bg-muted 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",
+    values: {
+      entity: entity.toLocaleLowerCase()
+    },
+    components: {
+      a: /*#__PURE__*/jsx(Button, {
+        target: "_blank",
+        to: {
+          pathname: url
+        },
+        variant: "link"
+      })
+    }
+  });
+};
+
+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), true).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 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,
+    onRowClick = _ref.onRowClick,
+    handlePageChange = _ref.handlePageChange,
+    pageProperties = _ref.pageProperties;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var columns = columnData({
+    onEditClick: onEditClick,
+    onDeleteClick: onDeleteClick
+  });
+  var handleSort = function handleSort() {
+    var sorter = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    setFilters(_objectSpread$3(_objectSpread$3({}, 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(Empty, _objectSpread$3({
+        title: t("neetoApprovals.common.notFound_", {
+          what: entity
+        })
+      }, !filters.searchTerm && noDataProps))
+    });
+  }
+  return /*#__PURE__*/jsx(TableWrapper, {
+    className: "mt-6",
+    hasPagination: totalCount > pageProperties.pageSize,
+    children: /*#__PURE__*/jsx(DataTable, {
+      columns: columns,
+      onRowClick: onRowClick,
+      totalCount: totalCount,
+      currentPage: pageProperties.page,
+      data: rowData,
+      pageSize: pageProperties.pageSize,
+      onPageChange: handlePageChange,
+      onSort: function onSort(sorter) {
+        return handleSort(sorter !== null && sorter !== void 0 ? sorter : {});
+      }
+    })
+  });
+};
+
+var columnData = function columnData(_ref) {
+  var onEditClick = _ref.onEditClick,
+    onDeleteClick = _ref.onDeleteClick;
+  return [{
+    accessorKey: "name",
+    id: "name",
+    enableSorting: true,
+    header: i18next.t("neetoApprovals.common.name"),
+    size: 300,
+    cell: function cell(_ref2) {
+      var template = _ref2.row.original;
+      return /*#__PURE__*/jsxs("div", {
+        className: "flex items-center justify-between gap-x-3",
+        children: [/*#__PURE__*/jsx(Typography, {
+          className: "truncate",
+          variant: "body2",
+          children: template.name
+        }), /*#__PURE__*/jsx(MoreDropdown, {
+          dropdownButtonProps: {
+            className: "me-1 my-1"
+          },
+          dropdownProps: {
+            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_TESTID_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_TESTID_KEY, "neeto-approvals-templates-delete-template-btn")]
+        })]
+      });
+    }
+  }, {
+    accessorKey: "description",
+    id: "description",
+    header: i18next.t("neetoApprovals.inputs.labels.description"),
+    size: 400
+  }];
+};
+
+var _excluded = ["searchTerm", "isNewTemplatePaneOpen", "setIsNewTemplatePaneOpen", "helpDocUrl"];
+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), true).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 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),
+    _useState0 = _slicedToArray(_useState9, 2),
+    isShowPaneOpen = _useState0[0],
+    setIsShowPaneOpen = _useState0[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$2(_objectSpread$2(_objectSpread$2({}, 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$2({
+      isOpen: isNewTemplatePaneOpen,
+      onClose: function onClose() {
+        return setIsNewTemplatePaneOpen(false);
+      }
+    }, otherProps)), /*#__PURE__*/jsx(Edit, _objectSpread$2(_objectSpread$2({
+      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$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), true).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 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$1({}, _objectSpread$1({
+        isNewTemplatePaneOpen: isNewTemplatePaneOpen,
+        searchTerm: searchTerm,
+        setIsNewTemplatePaneOpen: setIsNewTemplatePaneOpen
+      }, config)));
+    },
+    path: "".concat(config.approvalsPath).concat(routes.templates.index),
+    actionBlock: function actionBlock() {
+      return /*#__PURE__*/jsx(Button, {
+        "data-testid": "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$1({}, config));
+    },
+    path: "".concat(config.approvalsPath).concat(routes.pending)
+  }, {
+    component: function component() {
+      return /*#__PURE__*/jsx(History, _objectSpread$1({}, 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 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 === null || category === void 0 ? void 0 : category.includes(filter);
+  };
+  var getRoute = function getRoute(filter) {
+    return "".concat(approvalsPath).concat(filter.toLowerCase());
+  };
+  var activeFilter = approvalFilterKeys.find(isActive);
+  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(Tabs, {
+    value: activeFilter,
+    onValueChange: function onValueChange(filter) {
+      return history.push(getRoute(filter));
+    },
+    children: /*#__PURE__*/jsx(Tabs.List, {
+      children: approvalFilterKeys.map(function (filter) {
+        return /*#__PURE__*/jsxs(Tabs.Item, {
+          value: 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), true).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__*/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