@bigbinary/neeto-payments-frontend 6.1.12 → 6.1.14

package/dist/cjs/TaxesDashboard.js

@@ -1,16 +1,14 @@
 'use strict';
 
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var react = require('react');
 var neetocist = require('neetocist');
 var ramda = require('ramda');
 var reactI18next = require('react-i18next');
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var reactQuery = require('@tanstack/react-query');
 var reactUtils = require('neetocommons/react-utils');
 var axios = require('axios');
-var constants = require('./index-CZ_VFGNj.js');
-var queryConstants = require('./queryConstants-Cka1X6GX.js');
+var constants = require('./index-C3LUTqjR.js');
+var queryConstants = require('./queryConstants-Dc6wh21D.js');
 var Container = require('@bigbinary/neeto-molecules/Container');
 var Header$1 = require('@bigbinary/neeto-molecules/Header');
 var TableWrapper = require('@bigbinary/neeto-molecules/TableWrapper');
@@ -18,6 +16,7 @@ var neetoui = require('@bigbinary/neetoui');
 var formik = require('@bigbinary/neetoui/formik');
 var i18next = require('i18next');
 var yup = require('yup');
+var jsxRuntime = require('react/jsx-runtime');
 var MoreDropdown = require('@bigbinary/neeto-molecules/MoreDropdown');
 require('neetocommons/constants');
 require('decimal.js');
@@ -42,74 +41,64 @@ function _interopNamespaceDefault(e) {
 
 var yup__namespace = /*#__PURE__*/_interopNamespaceDefault(yup);
 
-var list = function list(taxableId) {
-  return axios.get("".concat(constants.BASE_URL, "/api/v1/taxable/").concat(taxableId, "/taxes"));
-};
-var create = function create(_ref) {
-  var taxableId = _ref.taxableId,
-    payload = _ref.payload;
-  return axios.post("".concat(constants.BASE_URL, "/api/v1/taxable/").concat(taxableId, "/taxes"), {
-    tax: payload
-  });
-};
-var update = function update(_ref2) {
-  var taxableId = _ref2.taxableId,
-    taxId = _ref2.taxId,
-    payload = _ref2.payload;
-  return axios.put("".concat(constants.BASE_URL, "/api/v1/taxable/").concat(taxableId, "/taxes/").concat(taxId), {
-    tax: payload
-  });
-};
-var destroy = function destroy(_ref3) {
-  var taxableId = _ref3.taxableId,
-    taxId = _ref3.taxId;
-  return axios["delete"]("".concat(constants.BASE_URL, "/api/v1/taxable/").concat(taxableId, "/taxes/").concat(taxId));
-};
-var taxesApi = {
-  list: list,
-  create: create,
-  update: update,
-  destroy: destroy
+const list = taxableId => axios.get(`${constants.BASE_URL}/api/v1/taxable/${taxableId}/taxes`);
+const create = ({
+  taxableId,
+  payload
+}) => axios.post(`${constants.BASE_URL}/api/v1/taxable/${taxableId}/taxes`, {
+  tax: payload
+});
+const update = ({
+  taxableId,
+  taxId,
+  payload
+}) => axios.put(`${constants.BASE_URL}/api/v1/taxable/${taxableId}/taxes/${taxId}`, {
+  tax: payload
+});
+const destroy = ({
+  taxableId,
+  taxId
+}) => axios.delete(`${constants.BASE_URL}/api/v1/taxable/${taxableId}/taxes/${taxId}`);
+const taxesApi = {
+  list,
+  create,
+  update,
+  destroy
 };
 
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var useFetchTaxes = function useFetchTaxes(_ref) {
-  var taxableId = _ref.taxableId;
-  return reactQuery.useQuery({
-    queryKey: [queryConstants.QUERY_KEYS.TAXES, taxableId],
-    queryFn: function queryFn() {
-      return taxesApi.list(taxableId);
-    },
-    enabled: ramda.isNotNil(taxableId)
-  });
-};
-var useCreateTax = function useCreateTax(_ref2, options) {
-  var taxableId = _ref2.taxableId;
-  return reactUtils.useMutationWithInvalidation(taxesApi.create, _objectSpread({
-    keysToInvalidate: [queryConstants.QUERY_KEYS.TAXES, taxableId]
-  }, options));
-};
-var useUpdateTax = function useUpdateTax(_ref3, options) {
-  var taxableId = _ref3.taxableId;
-  return reactUtils.useMutationWithInvalidation(taxesApi.update, _objectSpread({
-    keysToInvalidate: [queryConstants.QUERY_KEYS.TAXES, taxableId]
-  }, options));
-};
-var useDeleteTax = function useDeleteTax(_ref4, options) {
-  var taxableId = _ref4.taxableId;
-  return reactUtils.useMutationWithInvalidation(taxesApi.destroy, _objectSpread({
-    keysToInvalidate: [queryConstants.QUERY_KEYS.TAXES, taxableId]
-  }, options));
-};
+const useFetchTaxes = ({
+  taxableId
+}) => reactQuery.useQuery({
+  queryKey: [queryConstants.QUERY_KEYS.TAXES, taxableId],
+  queryFn: () => taxesApi.list(taxableId),
+  enabled: ramda.isNotNil(taxableId)
+});
+const useCreateTax = ({
+  taxableId
+}, options) => reactUtils.useMutationWithInvalidation(taxesApi.create, {
+  keysToInvalidate: [queryConstants.QUERY_KEYS.TAXES, taxableId],
+  ...options
+});
+const useUpdateTax = ({
+  taxableId
+}, options) => reactUtils.useMutationWithInvalidation(taxesApi.update, {
+  keysToInvalidate: [queryConstants.QUERY_KEYS.TAXES, taxableId],
+  ...options
+});
+const useDeleteTax = ({
+  taxableId
+}, options) => reactUtils.useMutationWithInvalidation(taxesApi.destroy, {
+  keysToInvalidate: [queryConstants.QUERY_KEYS.TAXES, taxableId],
+  ...options
+});
 
-var INITIAL_VALUES = {
+const INITIAL_VALUES = {
   name: "",
   description: "",
   kind: "percentage",
   value: ""
 };
-var VALIDATION_SCHEMA = yup__namespace.object().shape({
+const VALIDATION_SCHEMA = yup__namespace.object().shape({
   name: yup__namespace.string().required(i18next.t("neetoPayments.validations.nameRequired")),
   description: yup__namespace.string().nullable(),
   kind: yup__namespace.string().required(i18next.t("neetoPayments.validations.kindRequired")),
@@ -119,193 +108,196 @@ var VALIDATION_SCHEMA = yup__namespace.object().shape({
   }).positive(i18next.t("neetoPayments.validations.valueMustBePositive")).required(i18next.t("neetoPayments.validations.valueRequired"))
 });
 
-var Header = neetoui.Pane.Header,
-  Body = neetoui.Pane.Body,
-  Footer = neetoui.Pane.Footer;
-var FormPane = function FormPane(_ref) {
-  var taxableId = _ref.taxableId,
-    taxToEdit = _ref.taxToEdit,
-    setTaxToEdit = _ref.setTaxToEdit,
-    isOpen = _ref.isOpen,
-    setIsOpen = _ref.setIsOpen,
-    onTaxesChange = _ref.onTaxesChange;
-  var _useTranslation = reactI18next.useTranslation(),
-    t = _useTranslation.t;
-  var _useCreateTax = useCreateTax({
-      taxableId: taxableId
-    }, {
-      onSuccess: function onSuccess() {
-        setIsOpen(false);
-        onTaxesChange();
-      }
-    }),
-    create = _useCreateTax.mutate,
-    isCreating = _useCreateTax.isPending;
-  var _useUpdateTax = useUpdateTax({
-      taxableId: taxableId
-    }, {
-      onSuccess: function onSuccess() {
-        setIsOpen(false);
-        onTaxesChange();
-      }
-    }),
-    update = _useUpdateTax.mutate,
-    isUpdating = _useUpdateTax.isPending;
-  var isEdit = neetocist.isPresent(taxToEdit === null || taxToEdit === void 0 ? void 0 : taxToEdit.id);
-  var handleSubmit = function handleSubmit(values) {
+const {
+  Header,
+  Body,
+  Footer
+} = neetoui.Pane;
+const FormPane = ({
+  taxableId,
+  taxToEdit,
+  setTaxToEdit,
+  isOpen,
+  setIsOpen,
+  onTaxesChange
+}) => {
+  const {
+    t
+  } = reactI18next.useTranslation();
+  const {
+    mutate: create,
+    isPending: isCreating
+  } = useCreateTax({
+    taxableId
+  }, {
+    onSuccess: () => {
+      setIsOpen(false);
+      onTaxesChange();
+    }
+  });
+  const {
+    mutate: update,
+    isPending: isUpdating
+  } = useUpdateTax({
+    taxableId
+  }, {
+    onSuccess: () => {
+      setIsOpen(false);
+      onTaxesChange();
+    }
+  });
+  const isEdit = neetocist.isPresent(taxToEdit?.id);
+  const handleSubmit = values => {
     if (isEdit) {
       update({
-        taxableId: taxableId,
+        taxableId,
         taxId: taxToEdit.id,
         payload: values
       });
       setTaxToEdit(null);
     } else {
       create({
-        taxableId: taxableId,
+        taxableId,
         payload: values
       });
     }
   };
-  return /*#__PURE__*/React.createElement(neetoui.Pane, {
-    isOpen: isOpen,
-    onClose: function onClose() {
+  return /*#__PURE__*/jsxRuntime.jsxs(neetoui.Pane, {
+    isOpen,
+    onClose: () => {
       setIsOpen(false);
       setTaxToEdit(null);
-    }
-  }, /*#__PURE__*/React.createElement(Header, null, /*#__PURE__*/React.createElement(neetoui.Typography, {
-    style: "h3"
-  }, isEdit ? t("neetoPayments.taxesDashboard.form.title.edit") : t("neetoPayments.taxesDashboard.form.title.create"))), /*#__PURE__*/React.createElement(formik.Form, {
-    formikProps: {
-      initialValues: isEdit ? taxToEdit : INITIAL_VALUES,
-      validationSchema: VALIDATION_SCHEMA,
-      onSubmit: handleSubmit
-    }
-  }, /*#__PURE__*/React.createElement(Body, null, /*#__PURE__*/React.createElement("div", {
-    className: "flex flex-col w-full gap-4"
-  }, /*#__PURE__*/React.createElement(formik.Input, {
-    required: true,
-    label: t("neetoPayments.taxesDashboard.form.name.label"),
-    name: "name",
-    placeholder: t("neetoPayments.taxesDashboard.form.name.placeholder")
-  }), /*#__PURE__*/React.createElement(neetoui.Callout, {
-    style: "info"
-  }, t("neetoPayments.taxesDashboard.form.name.helpText")), /*#__PURE__*/React.createElement(formik.Input, {
-    label: t("neetoPayments.taxesDashboard.form.description.label"),
-    name: "description",
-    placeholder: t("neetoPayments.taxesDashboard.form.description.placeholder")
-  }), /*#__PURE__*/React.createElement(neetoui.Label, null, t("neetoPayments.taxesDashboard.form.kind.label")), /*#__PURE__*/React.createElement(formik.Radio, {
-    stacked: true,
-    name: "kind"
-  }, /*#__PURE__*/React.createElement(formik.Radio.Item, {
-    label: t("neetoPayments.taxesDashboard.form.kind.percentage"),
-    value: "percentage"
-  }), /*#__PURE__*/React.createElement(formik.Radio.Item, {
-    label: t("neetoPayments.taxesDashboard.form.kind.fixed"),
-    value: "fixed"
-  })), /*#__PURE__*/React.createElement(formik.Input, {
-    required: true,
-    label: t("neetoPayments.taxesDashboard.form.value.label"),
-    name: "value",
-    type: "number",
-    placeholder: t("neetoPayments.taxesDashboard.form.value.placeholder")
-  }))), /*#__PURE__*/React.createElement(Footer, null, /*#__PURE__*/React.createElement(formik.ActionBlock, {
-    cancelButtonProps: {
-      onClick: function onClick() {
-        return setIsOpen(false);
-      }
     },
-    isSubmitting: isCreating || isUpdating
-  }))));
-};
-
-var generateColumnData = function generateColumnData(handleDropdownClick) {
-  return [{
-    title: i18next.t("neetoPayments.taxesDashboard.table.taxName"),
-    dataIndex: "name",
-    render: function render(name, tax) {
-      return /*#__PURE__*/React.createElement("div", {
-        className: "flex justify-between gap-2"
-      }, /*#__PURE__*/React.createElement(neetoui.Typography, {
-        style: "body1"
-      }, neetocist.truncate(name, 100)), /*#__PURE__*/React.createElement(MoreDropdown, {
-        dropdownProps: {
-          strategy: "fixed"
-        },
-        menuItems: [{
-          key: "edit",
-          label: i18next.t("neetoPayments.common.edit"),
-          onClick: function onClick() {
-            return handleDropdownClick(tax, "edit");
-          },
-          "data-testid": "menu-dropdown-edit-button"
-        }, {
-          key: "delete",
-          label: i18next.t("neetoPayments.common.delete"),
-          onClick: function onClick() {
-            return handleDropdownClick(tax, "delete");
+    children: [/*#__PURE__*/jsxRuntime.jsx(Header, {
+      children: /*#__PURE__*/jsxRuntime.jsx(neetoui.Typography, {
+        style: "h3",
+        children: isEdit ? t("neetoPayments.taxesDashboard.form.title.edit") : t("neetoPayments.taxesDashboard.form.title.create")
+      })
+    }), /*#__PURE__*/jsxRuntime.jsxs(formik.Form, {
+      formikProps: {
+        initialValues: isEdit ? taxToEdit : INITIAL_VALUES,
+        validationSchema: VALIDATION_SCHEMA,
+        onSubmit: handleSubmit
+      },
+      children: [/*#__PURE__*/jsxRuntime.jsx(Body, {
+        children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "flex flex-col w-full gap-4",
+          children: [/*#__PURE__*/jsxRuntime.jsx(formik.Input, {
+            required: true,
+            label: t("neetoPayments.taxesDashboard.form.name.label"),
+            name: "name",
+            placeholder: t("neetoPayments.taxesDashboard.form.name.placeholder")
+          }), /*#__PURE__*/jsxRuntime.jsx(neetoui.Callout, {
+            style: "info",
+            children: t("neetoPayments.taxesDashboard.form.name.helpText")
+          }), /*#__PURE__*/jsxRuntime.jsx(formik.Input, {
+            label: t("neetoPayments.taxesDashboard.form.description.label"),
+            name: "description",
+            placeholder: t("neetoPayments.taxesDashboard.form.description.placeholder")
+          }), /*#__PURE__*/jsxRuntime.jsx(neetoui.Label, {
+            children: t("neetoPayments.taxesDashboard.form.kind.label")
+          }), /*#__PURE__*/jsxRuntime.jsxs(formik.Radio, {
+            stacked: true,
+            name: "kind",
+            children: [/*#__PURE__*/jsxRuntime.jsx(formik.Radio.Item, {
+              label: t("neetoPayments.taxesDashboard.form.kind.percentage"),
+              value: "percentage"
+            }), /*#__PURE__*/jsxRuntime.jsx(formik.Radio.Item, {
+              label: t("neetoPayments.taxesDashboard.form.kind.fixed"),
+              value: "fixed"
+            })]
+          }), /*#__PURE__*/jsxRuntime.jsx(formik.Input, {
+            required: true,
+            label: t("neetoPayments.taxesDashboard.form.value.label"),
+            name: "value",
+            type: "number",
+            placeholder: t("neetoPayments.taxesDashboard.form.value.placeholder")
+          })]
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx(Footer, {
+        children: /*#__PURE__*/jsxRuntime.jsx(formik.ActionBlock, {
+          cancelButtonProps: {
+            onClick: () => setIsOpen(false)
           },
-          "data-testid": "menu-dropdown-delete-button"
-        }]
-      }));
-    }
-  }, {
-    title: i18next.t("neetoPayments.taxesDashboard.table.description"),
-    dataIndex: "description",
-    width: 300
-  }, {
-    title: i18next.t("neetoPayments.taxesDashboard.table.value"),
-    dataIndex: "value",
-    render: function render(value, tax) {
-      return /*#__PURE__*/React.createElement(React.Fragment, null, tax.kind === "percentage" ? "".concat(value, "%") : value);
-    }
-  }, {
-    title: i18next.t("neetoPayments.taxesDashboard.table.type"),
-    dataIndex: "kind",
-    render: function render(value) {
-      return /*#__PURE__*/React.createElement(React.Fragment, null, neetocist.humanize(value));
-    }
-  }];
+          isSubmitting: isCreating || isUpdating
+        })
+      })]
+    })]
+  });
 };
 
-var TaxesDashboard = function TaxesDashboard(_ref) {
-  var taxableId = _ref.taxableId,
-    breadcrumbs = _ref.breadcrumbs,
-    _ref$noDataHelpText = _ref.noDataHelpText,
-    noDataHelpText = _ref$noDataHelpText === void 0 ? "" : _ref$noDataHelpText,
-    _ref$onTaxesChange = _ref.onTaxesChange,
-    onTaxesChange = _ref$onTaxesChange === void 0 ? neetocist.noop : _ref$onTaxesChange,
-    _ref$titleHelpPopover = _ref.titleHelpPopoverProps,
-    titleHelpPopoverProps = _ref$titleHelpPopover === void 0 ? {} : _ref$titleHelpPopover;
-  var _useState = react.useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isFormPaneOpen = _useState2[0],
-    setIsFormPaneOpen = _useState2[1];
-  var _useState3 = react.useState(null),
-    _useState4 = _slicedToArray(_useState3, 2),
-    taxToEdit = _useState4[0],
-    setTaxToEdit = _useState4[1];
-  var _useState5 = react.useState(null),
-    _useState6 = _slicedToArray(_useState5, 2),
-    taxToDelete = _useState6[0],
-    setTaxToDelete = _useState6[1];
-  var _useFetchTaxes = useFetchTaxes({
-      taxableId: taxableId
-    }),
-    _useFetchTaxes$data = _useFetchTaxes.data,
-    _useFetchTaxes$data2 = _useFetchTaxes$data === void 0 ? {} : _useFetchTaxes$data,
-    _useFetchTaxes$data2$ = _useFetchTaxes$data2.taxes,
-    taxes = _useFetchTaxes$data2$ === void 0 ? [] : _useFetchTaxes$data2$,
-    isLoading = _useFetchTaxes.isLoading;
-  var _useDeleteTax = useDeleteTax({
-      taxableId: taxableId
-    }, {
-      onSuccess: onTaxesChange
-    }),
-    deleteTax = _useDeleteTax.mutate;
-  var _useTranslation = reactI18next.useTranslation(),
-    t = _useTranslation.t;
-  var handleDropdownClick = function handleDropdownClick(tax, action) {
+const generateColumnData = handleDropdownClick => [{
+  title: i18next.t("neetoPayments.taxesDashboard.table.taxName"),
+  dataIndex: "name",
+  render: (name, tax) => /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "flex justify-between gap-2",
+    children: [/*#__PURE__*/jsxRuntime.jsx(neetoui.Typography, {
+      style: "body1",
+      children: neetocist.truncate(name, 100)
+    }), /*#__PURE__*/jsxRuntime.jsx(MoreDropdown, {
+      dropdownProps: {
+        strategy: "fixed"
+      },
+      menuItems: [{
+        key: "edit",
+        label: i18next.t("neetoPayments.common.edit"),
+        onClick: () => handleDropdownClick(tax, "edit"),
+        "data-testid": "menu-dropdown-edit-button"
+      }, {
+        key: "delete",
+        label: i18next.t("neetoPayments.common.delete"),
+        onClick: () => handleDropdownClick(tax, "delete"),
+        "data-testid": "menu-dropdown-delete-button"
+      }]
+    })]
+  })
+}, {
+  title: i18next.t("neetoPayments.taxesDashboard.table.description"),
+  dataIndex: "description",
+  width: 300
+}, {
+  title: i18next.t("neetoPayments.taxesDashboard.table.value"),
+  dataIndex: "value",
+  render: (value, tax) => /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: tax.kind === "percentage" ? `${value}%` : value
+  })
+}, {
+  title: i18next.t("neetoPayments.taxesDashboard.table.type"),
+  dataIndex: "kind",
+  render: value => /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: neetocist.humanize(value)
+  })
+}];
+
+const TaxesDashboard = ({
+  taxableId,
+  breadcrumbs,
+  noDataHelpText = "",
+  onTaxesChange = neetocist.noop,
+  titleHelpPopoverProps = {}
+}) => {
+  const [isFormPaneOpen, setIsFormPaneOpen] = react.useState(false);
+  const [taxToEdit, setTaxToEdit] = react.useState(null);
+  const [taxToDelete, setTaxToDelete] = react.useState(null);
+  const {
+    data: {
+      taxes = []
+    } = {},
+    isLoading
+  } = useFetchTaxes({
+    taxableId
+  });
+  const {
+    mutate: deleteTax
+  } = useDeleteTax({
+    taxableId
+  }, {
+    onSuccess: onTaxesChange
+  });
+  const {
+    t
+  } = reactI18next.useTranslation();
+  const handleDropdownClick = (tax, action) => {
     switch (action) {
       case "edit":
         setTaxToEdit(tax);
@@ -317,67 +309,67 @@ var TaxesDashboard = function TaxesDashboard(_ref) {
     }
   };
   if (isLoading) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: "flex h-full w-full items-center justify-center"
-    }, /*#__PURE__*/React.createElement(neetoui.Spinner, null));
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex h-full w-full items-center justify-center",
+      children: /*#__PURE__*/jsxRuntime.jsx(neetoui.Spinner, {})
+    });
   }
-  return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Header$1, {
-    breadcrumbs: breadcrumbs,
-    titleHelpPopoverProps: titleHelpPopoverProps,
-    title: t("neetoPayments.taxesDashboard.title"),
-    actionBlock: /*#__PURE__*/React.createElement(neetoui.Button, {
-      "data-testid": "add-new-tax-button",
-      label: t("neetoPayments.taxesDashboard.buttons.add"),
-      onClick: function onClick() {
-        return setIsFormPaneOpen(true);
-      }
-    })
-  }), ramda.isEmpty(taxes) ? /*#__PURE__*/React.createElement("div", {
-    className: "flex h-full w-full items-center justify-center"
-  }, /*#__PURE__*/React.createElement(neetoui.NoData, {
-    helpText: noDataHelpText,
-    title: t("neetoPayments.taxesDashboard.noData"),
-    primaryButtonProps: {
-      label: t("neetoPayments.taxesDashboard.buttons.add"),
-      onClick: function onClick() {
-        return setIsFormPaneOpen(true);
-      }
-    }
-  })) : /*#__PURE__*/React.createElement(TableWrapper, null, /*#__PURE__*/React.createElement(neetoui.Table, {
-    fixedHeight: true,
-    columnData: generateColumnData(handleDropdownClick),
-    loading: isLoading,
-    rowData: taxes
-  })), /*#__PURE__*/React.createElement(FormPane, {
-    onTaxesChange: onTaxesChange,
-    setTaxToEdit: setTaxToEdit,
-    taxToEdit: taxToEdit,
-    taxableId: taxableId,
-    isOpen: isFormPaneOpen,
-    setIsOpen: setIsFormPaneOpen
-  }), /*#__PURE__*/React.createElement(neetoui.Alert, {
-    isOpen: neetocist.isPresent(taxToDelete),
-    title: t("neetoPayments.alert.delete.tax.title"),
-    message: /*#__PURE__*/React.createElement(reactI18next.Trans, {
-      components: {
-        strong: /*#__PURE__*/React.createElement("strong", null)
-      },
-      i18nKey: "neetoPayments.alert.delete.tax.message",
-      values: {
-        name: taxToDelete === null || taxToDelete === void 0 ? void 0 : taxToDelete.name
+  return /*#__PURE__*/jsxRuntime.jsxs(Container, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(Header$1, {
+      breadcrumbs,
+      titleHelpPopoverProps,
+      title: t("neetoPayments.taxesDashboard.title"),
+      actionBlock: /*#__PURE__*/jsxRuntime.jsx(neetoui.Button, {
+        "data-testid": "add-new-tax-button",
+        label: t("neetoPayments.taxesDashboard.buttons.add"),
+        onClick: () => setIsFormPaneOpen(true)
+      })
+    }), ramda.isEmpty(taxes) ? /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex h-full w-full items-center justify-center",
+      children: /*#__PURE__*/jsxRuntime.jsx(neetoui.NoData, {
+        helpText: noDataHelpText,
+        title: t("neetoPayments.taxesDashboard.noData"),
+        primaryButtonProps: {
+          label: t("neetoPayments.taxesDashboard.buttons.add"),
+          onClick: () => setIsFormPaneOpen(true)
+        }
+      })
+    }) : /*#__PURE__*/jsxRuntime.jsx(TableWrapper, {
+      children: /*#__PURE__*/jsxRuntime.jsx(neetoui.Table, {
+        fixedHeight: true,
+        columnData: generateColumnData(handleDropdownClick),
+        loading: isLoading,
+        rowData: taxes
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(FormPane, {
+      onTaxesChange,
+      setTaxToEdit,
+      taxToEdit,
+      taxableId,
+      isOpen: isFormPaneOpen,
+      setIsOpen: setIsFormPaneOpen
+    }), /*#__PURE__*/jsxRuntime.jsx(neetoui.Alert, {
+      isOpen: neetocist.isPresent(taxToDelete),
+      title: t("neetoPayments.alert.delete.tax.title"),
+      message: /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
+        components: {
+          strong: /*#__PURE__*/jsxRuntime.jsx("strong", {})
+        },
+        i18nKey: "neetoPayments.alert.delete.tax.message",
+        values: {
+          name: taxToDelete?.name
+        }
+      }),
+      onClose: () => setTaxToDelete(null),
+      onSubmit: () => {
+        deleteTax({
+          taxableId,
+          taxId: taxToDelete?.id
+        });
+        setTaxToDelete(null);
       }
-    }),
-    onClose: function onClose() {
-      return setTaxToDelete(null);
-    },
-    onSubmit: function onSubmit() {
-      deleteTax({
-        taxableId: taxableId,
-        taxId: taxToDelete === null || taxToDelete === void 0 ? void 0 : taxToDelete.id
-      });
-      setTaxToDelete(null);
-    }
-  }));
+    })]
+  });
 };
 
 module.exports = TaxesDashboard;