@bigbinary/neeto-payments-frontend 6.1.12 → 6.1.13

package/dist/cjs/AccountsDashboard.js

@@ -1,6 +1,5 @@
 'use strict';
 
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var react = require('react');
 var i18next = require('i18next');
 var neetocist = require('neetocist');
@@ -10,43 +9,42 @@ var Header = require('@bigbinary/neeto-molecules/Header');
 var SubHeader = require('@bigbinary/neeto-molecules/SubHeader');
 var neetoui = require('@bigbinary/neetoui');
 var reactI18next = require('react-i18next');
-var dashboard = require('./dashboard-DKHencVn.js');
-var exportChannel = require('./exportChannel-D1Wls92m.js');
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var dashboard = require('./dashboard-BiCB2A6S.js');
+var exportChannel = require('./exportChannel-BL2RGGhP.js');
 var neetoIcons = require('@bigbinary/neeto-icons');
-var constants = require('./index-CZ_VFGNj.js');
-var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+var constants = require('./index-D6V3Vofs.js');
+var jsxRuntime = require('react/jsx-runtime');
 var utils = require('neetocommons/utils');
 var ramda = require('ramda');
 var reactRouterDom = require('react-router-dom');
-var renderFunctions = require('./renderFunctions-CX_K4qf8.js');
-var CopyButtonWrapper = require('./CopyButtonWrapper-BkpN0Wmd.js');
+var renderFunctions = require('./renderFunctions-DhCwlBWw.js');
+var CopyButtonWrapper = require('./CopyButtonWrapper-I-kdKiiB.js');
 var constants$1 = require('neetocommons/constants');
 var Columns = require('@bigbinary/neeto-molecules/Columns');
 var TableWrapper = require('@bigbinary/neeto-molecules/TableWrapper');
-var useAccountsApi = require('./useAccountsApi-DC617yB4.js');
+var useAccountsApi = require('./useAccountsApi-B2MZWHMY.js');
 require('@tanstack/react-query');
 require('@tanstack/react-query-devtools');
 require('axios');
 require('decimal.js');
 require('@bigbinary/neeto-molecules/DateFormat');
 require('@bigbinary/neeto-molecules/CopyToClipboardButton');
-require('./queryConstants-Cka1X6GX.js');
+require('./queryConstants-Dc6wh21D.js');
 
-var TAB = {
+const TAB = {
   all: "all",
   connected: "connected",
   disconnected: "disconnected",
   incomplete: "incomplete"
 };
-var TABS = Object.values(TAB);
-var SEARCH_PROPS = {
+const TABS = Object.values(TAB);
+const SEARCH_PROPS = {
   key: "keyword",
   node: "identifier,user.first_name,last_name,email",
   model: "NeetoPaymentsEngine::Stripe::Account,User"
 };
-var DASHBOARD_MANDATORY_COLUMNS = ["id", "status", "identifier"];
-var FILTER_COLUMNS = [{
+const DASHBOARD_MANDATORY_COLUMNS = ["id", "status", "identifier"];
+const FILTER_COLUMNS = [{
   key: "created_at",
   label: i18next.t("neetoPayments.common.createdAt"),
   node: "created_at",
@@ -54,116 +52,115 @@ var FILTER_COLUMNS = [{
   showRuleSelector: true
 }];
 
-function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var ExportModal = function ExportModal(_ref) {
-  var showExportModal = _ref.showExportModal,
-    setShowExportModal = _ref.setShowExportModal,
-    tab = _ref.tab,
-    filters = _ref.filters,
-    _ref$sortProperties = _ref.sortProperties,
-    sortProperties = _ref$sortProperties === void 0 ? {} : _ref$sortProperties;
-  var _useTranslation = reactI18next.useTranslation(),
-    t = _useTranslation.t;
-  var _useState = react.useState(""),
-    _useState2 = _slicedToArray(_useState, 2),
-    downloadUrl = _useState2[0],
-    setDownloadUrl = _useState2[1];
-  var _useState3 = react.useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isGenerating = _useState4[0],
-    setIsGenerating = _useState4[1];
-  var _useExportData = dashboard.useExportData(),
-    exportCsv = _useExportData.mutate,
-    isPending = _useExportData.isPending;
-  var isFileLoading = isPending || isGenerating;
-  var token = react.useMemo(function () {
-    return "account-report-".concat(constants.uuidV4());
-  }, []);
-  var receivedCallback = function receivedCallback(data) {
+const ExportModal = ({
+  showExportModal,
+  setShowExportModal,
+  tab,
+  filters,
+  sortProperties = {}
+}) => {
+  const {
+    t
+  } = reactI18next.useTranslation();
+  const [downloadUrl, setDownloadUrl] = react.useState("");
+  const [isGenerating, setIsGenerating] = react.useState(false);
+  const {
+    mutate: exportCsv,
+    isPending
+  } = dashboard.useExportData();
+  const isFileLoading = isPending || isGenerating;
+  const token = react.useMemo(() => `account-report-${constants.uuidV4()}`, []);
+  const receivedCallback = data => {
     if (!data.download_url) return;
     setDownloadUrl(data.download_url);
     setIsGenerating(false);
   };
-  var handleGenerateClick = function handleGenerateClick() {
-    var payload = _objectSpread$1({
+  const handleGenerateClick = () => {
+    const payload = {
       kind: "account",
-      token: token,
-      filters: filters,
-      tab: tab
-    }, sortProperties);
+      token,
+      filters,
+      tab,
+      ...sortProperties
+    };
     exportCsv(payload, {
-      onSuccess: function onSuccess() {
+      onSuccess: () => {
         setDownloadUrl("");
         setIsGenerating(true);
       }
     });
   };
-  react.useEffect(function () {
+  react.useEffect(() => {
     if (showExportModal) {
-      var channel = exportChannel.exportChannel(token, receivedCallback);
+      const channel = exportChannel.exportChannel(token, receivedCallback);
       setDownloadUrl("");
       setIsGenerating(false);
-      return function () {
+      return () => {
         channel.disconnected();
       };
     }
     return undefined;
   }, [showExportModal, token]);
-  var onClose = function onClose() {
-    return setShowExportModal(false);
-  };
-  return /*#__PURE__*/React.createElement(neetoui.Modal, {
-    onClose: onClose,
-    isOpen: showExportModal
-  }, /*#__PURE__*/React.createElement(neetoui.Modal.Header, null, /*#__PURE__*/React.createElement(neetoui.Typography, {
-    style: "h2"
-  }, t("neetoPayments.export.title.account"))), /*#__PURE__*/React.createElement(neetoui.Modal.Body, null, isFileLoading ? /*#__PURE__*/React.createElement(neetoui.Typography, {
-    style: "body2"
-  }, t("neetoPayments.export.pleaseWait")) : /*#__PURE__*/React.createElement(neetoui.Typography, {
-    style: "body2"
-  }, downloadUrl ? t("neetoPayments.export.fileReady") : t("neetoPayments.export.download.account"))), /*#__PURE__*/React.createElement(neetoui.Modal.Footer, {
-    className: "space-x-2"
-  }, downloadUrl ? /*#__PURE__*/React.createElement(neetoui.Button, {
-    "data-testid": "neeto-payments-download-button",
-    href: downloadUrl,
-    icon: neetoIcons.Download,
-    label: t("neetoPayments.common.download"),
-    onClick: onClose
-  }) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(neetoui.Button, {
-    "data-testid": "cancel-button",
-    disabled: isFileLoading,
-    label: t("neetoPayments.common.cancel"),
-    style: "tertiary",
-    onClick: onClose
-  }), /*#__PURE__*/React.createElement(neetoui.Button, {
-    "data-testid": "neeto-payments-export-button",
-    disabled: isFileLoading,
-    label: t("neetoPayments.common.export"),
-    loading: isFileLoading,
-    onClick: handleGenerateClick
-  }))));
+  const onClose = () => setShowExportModal(false);
+  return /*#__PURE__*/jsxRuntime.jsxs(neetoui.Modal, {
+    onClose,
+    isOpen: showExportModal,
+    children: [/*#__PURE__*/jsxRuntime.jsx(neetoui.Modal.Header, {
+      children: /*#__PURE__*/jsxRuntime.jsx(neetoui.Typography, {
+        style: "h2",
+        children: t("neetoPayments.export.title.account")
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(neetoui.Modal.Body, {
+      children: isFileLoading ? /*#__PURE__*/jsxRuntime.jsx(neetoui.Typography, {
+        style: "body2",
+        children: t("neetoPayments.export.pleaseWait")
+      }) : /*#__PURE__*/jsxRuntime.jsx(neetoui.Typography, {
+        style: "body2",
+        children: downloadUrl ? t("neetoPayments.export.fileReady") : t("neetoPayments.export.download.account")
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(neetoui.Modal.Footer, {
+      className: "space-x-2",
+      children: downloadUrl ? /*#__PURE__*/jsxRuntime.jsx(neetoui.Button, {
+        "data-testid": "neeto-payments-download-button",
+        href: downloadUrl,
+        icon: neetoIcons.Download,
+        label: t("neetoPayments.common.download"),
+        onClick: onClose
+      }) : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/jsxRuntime.jsx(neetoui.Button, {
+          "data-testid": "cancel-button",
+          disabled: isFileLoading,
+          label: t("neetoPayments.common.cancel"),
+          style: "tertiary",
+          onClick: onClose
+        }), /*#__PURE__*/jsxRuntime.jsx(neetoui.Button, {
+          "data-testid": "neeto-payments-export-button",
+          disabled: isFileLoading,
+          label: t("neetoPayments.common.export"),
+          loading: isFileLoading,
+          onClick: handleGenerateClick
+        })]
+      })
+    })]
+  });
 };
 
-var renderIdentifier = function renderIdentifier() {
-  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-    _ref$identifier = _ref.identifier,
-    identifier = _ref$identifier === void 0 ? "" : _ref$identifier,
-    _ref$isLive = _ref.isLive,
-    isLive = _ref$isLive === void 0 ? false : _ref$isLive;
-  return /*#__PURE__*/React.createElement(CopyButtonWrapper.CopyButtonWrapper, {
-    content: identifier
-  }, /*#__PURE__*/React.createElement(neetoui.Button, {
+const renderIdentifier = ({
+  identifier = "",
+  isLive = false
+} = {}) => /*#__PURE__*/jsxRuntime.jsx(CopyButtonWrapper.CopyButtonWrapper, {
+  content: identifier,
+  children: /*#__PURE__*/jsxRuntime.jsx(neetoui.Button, {
     href: constants.buildStripeAccountLink(identifier, isLive),
     label: identifier,
     size: "small",
     style: "link",
     target: "_blank"
-  }));
-};
-var renderCountry = ramda.pipe(ramda.split("_"), ramda.map(neetocist.capitalize), ramda.join(" "));
+  })
+});
+const renderCountry = ramda.pipe(ramda.split("_"), ramda.map(neetocist.capitalize), ramda.join(" "));
 
-var COLUMNS = [{
+const COLUMNS = [{
   title: i18next.t("neetoPayments.common.id"),
   dataIndex: "id",
   key: "id",
@@ -214,285 +211,263 @@ var COLUMNS = [{
   sorter: true
 }];
 
-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 useFiltersAndPagination = function useFiltersAndPagination() {
-  var history = reactRouterDom.useHistory();
-  var _useState = react.useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isFilterButtonVisible = _useState2[0],
-    setIsFilterButtonVisible = _useState2[1];
-  var _useState3 = react.useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isFilterPaneOpen = _useState4[0],
-    setIsFilterPaneOpen = _useState4[1];
-  var _useState5 = react.useState(dashboard.buildDefaultPageProperties(TABS)),
-    _useState6 = _slicedToArray(_useState5, 2),
-    pageProperties = _useState6[0],
-    setPageProperties = _useState6[1];
-  var _useState7 = react.useState(constants.DEFAULT_SORT_PROPERTIES),
-    _useState8 = _slicedToArray(_useState7, 2),
-    sortProperties = _useState8[0],
-    setSortProperties = _useState8[1];
-  var _useQueryParams = reactUtils.useQueryParams(),
-    _useQueryParams$tab = _useQueryParams.tab,
-    tab = _useQueryParams$tab === void 0 ? TAB.all : _useQueryParams$tab;
-  var _getQueryParams = utils.getQueryParams(),
-    _getQueryParams$searc = _getQueryParams.searchTerm,
-    searchTerm = _getQueryParams$searc === void 0 ? "" : _getQueryParams$searc;
-  var searchKeywordProps = _objectSpread(_objectSpread({}, SEARCH_PROPS), {}, {
+const useFiltersAndPagination = () => {
+  const history = reactRouterDom.useHistory();
+  const [isFilterButtonVisible, setIsFilterButtonVisible] = react.useState(false);
+  const [isFilterPaneOpen, setIsFilterPaneOpen] = react.useState(false);
+  const [pageProperties, setPageProperties] = react.useState(dashboard.buildDefaultPageProperties(TABS));
+  const [sortProperties, setSortProperties] = react.useState(constants.DEFAULT_SORT_PROPERTIES);
+  const {
+    tab = TAB.all
+  } = reactUtils.useQueryParams();
+  const {
+    searchTerm = ""
+  } = utils.getQueryParams();
+  const searchKeywordProps = {
+    ...SEARCH_PROPS,
     key: "search_term",
     value: searchTerm.trim()
-  });
-  var _useState9 = react.useState(neetoFiltersFrontend.buildFiltersFromURL([].concat(_toConsumableArray(FILTER_COLUMNS), [searchKeywordProps]))),
-    _useState10 = _slicedToArray(_useState9, 2),
-    filters = _useState10[0],
-    setFilters = _useState10[1];
-  var _useState11 = react.useState(null),
-    _useState12 = _slicedToArray(_useState11, 2),
-    dataSize = _useState12[0],
-    setDataSize = _useState12[1];
-  var columnData = tab !== TAB.all ? neetocist.removeBy({
+  };
+  const [filters, setFilters] = react.useState(neetoFiltersFrontend.buildFiltersFromURL([...FILTER_COLUMNS, searchKeywordProps]));
+  const [dataSize, setDataSize] = react.useState(null);
+  const columnData = tab !== TAB.all ? neetocist.removeBy({
     key: "status"
   }, COLUMNS) : COLUMNS;
-  var handleTabChange = function handleTabChange(tab) {
-    var _pageProperties$tab, _pageProperties$tab2;
+  const handleTabChange = tab => {
     setDataSize(null);
-    var queryParams = utils.getQueryParams({
+    const queryParams = utils.getQueryParams({
       toCamelCase: false
     });
-    var newParams = {
-      tab: tab,
-      page: (_pageProperties$tab = pageProperties[tab]) === null || _pageProperties$tab === void 0 ? void 0 : _pageProperties$tab.page,
-      page_size: (_pageProperties$tab2 = pageProperties[tab]) === null || _pageProperties$tab2 === void 0 ? void 0 : _pageProperties$tab2.pageSize
+    const newParams = {
+      tab,
+      page: pageProperties[tab]?.page,
+      page_size: pageProperties[tab]?.pageSize
     };
     history.push(utils.buildUrl(window.location.pathname, ramda.mergeLeft(newParams, queryParams)));
   };
   return {
-    isFilterButtonVisible: isFilterButtonVisible,
-    isFilterPaneOpen: isFilterPaneOpen,
-    pageProperties: pageProperties,
-    filters: filters,
-    searchKeywordProps: searchKeywordProps,
-    tab: tab,
-    sortProperties: sortProperties,
-    columnData: columnData,
-    dataSize: dataSize,
-    setDataSize: setDataSize,
-    setIsFilterButtonVisible: setIsFilterButtonVisible,
-    setIsFilterPaneOpen: setIsFilterPaneOpen,
-    setPageProperties: setPageProperties,
-    setFilters: setFilters,
-    handleTabChange: handleTabChange,
-    setSortProperties: setSortProperties
+    isFilterButtonVisible,
+    isFilterPaneOpen,
+    pageProperties,
+    filters,
+    searchKeywordProps,
+    tab,
+    sortProperties,
+    columnData,
+    dataSize,
+    setDataSize,
+    setIsFilterButtonVisible,
+    setIsFilterPaneOpen,
+    setPageProperties,
+    setFilters,
+    handleTabChange,
+    setSortProperties
   };
 };
 
-var List = function List(_ref) {
-  var _pageProperties$tab, _pageProperties$tab2, _pageProperties$tab3;
-  var columnData = _ref.columnData,
-    filters = _ref.filters,
-    pageProperties = _ref.pageProperties,
-    setDataSize = _ref.setDataSize,
-    setIsFilterButtonVisible = _ref.setIsFilterButtonVisible,
-    setPageProperties = _ref.setPageProperties,
-    setSortProperties = _ref.setSortProperties,
-    sortProperties = _ref.sortProperties,
-    tab = _ref.tab;
-  var history = reactRouterDom.useHistory();
-  var _useTranslation = reactI18next.useTranslation(),
-    t = _useTranslation.t;
-  var _useTableConfiguratio = Columns.useTableConfigurations(exportChannel.TABLE_KEYS.ACCOUNTS_TABLE, columnData),
-    isTableConfigurationLoading = _useTableConfiguratio.isTableConfigurationLoading,
-    customizedColumns = _useTableConfiguratio.customizedColumns,
-    hideColumn = _useTableConfiguratio.hideColumn;
-  var _useFetchConnectedAcc = useAccountsApi.useFetchConnectedAccounts(dashboard.buildPayload({
-      filters: filters,
-      pageProperties: pageProperties,
-      sortProperties: sortProperties,
-      tab: tab
-    })),
-    _useFetchConnectedAcc2 = _useFetchConnectedAcc.data,
-    _useFetchConnectedAcc3 = _useFetchConnectedAcc2 === void 0 ? {} : _useFetchConnectedAcc2,
-    _useFetchConnectedAcc4 = _useFetchConnectedAcc3.accounts,
-    accounts = _useFetchConnectedAcc4 === void 0 ? [] : _useFetchConnectedAcc4,
-    _useFetchConnectedAcc5 = _useFetchConnectedAcc3.views,
-    views = _useFetchConnectedAcc5 === void 0 ? {} : _useFetchConnectedAcc5,
-    isLoading = _useFetchConnectedAcc.isLoading,
-    isFetching = _useFetchConnectedAcc.isFetching;
-  var dataSize = views[tab];
-  react.useEffect(function () {
+const List = ({
+  columnData,
+  filters,
+  pageProperties,
+  setDataSize,
+  setIsFilterButtonVisible,
+  setPageProperties,
+  setSortProperties,
+  sortProperties,
+  tab
+}) => {
+  const history = reactRouterDom.useHistory();
+  const {
+    t
+  } = reactI18next.useTranslation();
+  const {
+    isTableConfigurationLoading,
+    customizedColumns,
+    hideColumn
+  } = Columns.useTableConfigurations(exportChannel.TABLE_KEYS.ACCOUNTS_TABLE, columnData);
+  const {
+    data: {
+      accounts = [],
+      views = {}
+    } = {},
+    isLoading,
+    isFetching
+  } = useAccountsApi.useFetchConnectedAccounts(dashboard.buildPayload({
+    filters,
+    pageProperties,
+    sortProperties,
+    tab
+  }));
+  const dataSize = views[tab];
+  react.useEffect(() => {
     setIsFilterButtonVisible(neetocist.isPresent(accounts) || neetocist.isPresent(filters));
     setDataSize(dataSize);
   }, [accounts]);
-  var handleTablePagination = function handleTablePagination(page, pageSize) {
-    var queryParams = utils.getQueryParams({
+  const handleTablePagination = (page, pageSize) => {
+    const queryParams = utils.getQueryParams({
       toCamelCase: false
     });
     history.push(utils.buildUrl(window.location.pathname, ramda.mergeLeft({
-      page: page,
+      page,
       page_size: pageSize
     }, queryParams)));
     setPageProperties(ramda.assoc(tab, {
-      page: page,
-      pageSize: pageSize
+      page,
+      pageSize
     }));
   };
-  react.useEffect(function () {
+  react.useEffect(() => {
     handleTablePagination(constants$1.DEFAULT_PAGE_INDEX, constants$1.DEFAULT_PAGE_SIZE);
     setSortProperties(constants.DEFAULT_SORT_PROPERTIES);
   }, [filters, tab]);
-  var handleTableChange = function handleTableChange(_, __, sorter) {
-    setSortProperties(neetocist.isPresent(sorter === null || sorter === void 0 ? void 0 : sorter.column) ? {
+  const handleTableChange = (_, __, sorter) => {
+    setSortProperties(neetocist.isPresent(sorter?.column) ? {
       sortBy: neetocist.camelToSnakeCase(sorter.field),
       orderBy: sorter.order === "ascend" ? "ASC" : "DESC"
     } : constants.DEFAULT_SORT_PROPERTIES);
   };
   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, {})
+    });
   }
   if (dataSize <= 0 || !neetocist.isPresent(accounts)) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: "flex h-full w-full items-center justify-center"
-    }, /*#__PURE__*/React.createElement(neetoui.NoData, {
-      title: tab === TAB.all ? t("neetoPayments.emptyState.account") : t("neetoPayments.emptyState.accountWithStatus", {
-        status: tab
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex h-full w-full items-center justify-center",
+      children: /*#__PURE__*/jsxRuntime.jsx(neetoui.NoData, {
+        title: tab === TAB.all ? t("neetoPayments.emptyState.account") : t("neetoPayments.emptyState.accountWithStatus", {
+          status: tab
+        })
       })
-    }));
+    });
   }
-  return /*#__PURE__*/React.createElement(TableWrapper, {
-    hasPagination: dataSize > ((_pageProperties$tab = pageProperties[tab]) === null || _pageProperties$tab === void 0 ? void 0 : _pageProperties$tab.pageSize)
-  }, /*#__PURE__*/React.createElement(neetoui.Table, {
-    fixedHeight: true,
-    allowRowClick: false,
-    columnData: customizedColumns,
-    currentPageNumber: (_pageProperties$tab2 = pageProperties[tab]) === null || _pageProperties$tab2 === void 0 ? void 0 : _pageProperties$tab2.page,
-    handlePageChange: handleTablePagination,
-    loading: isFetching || isTableConfigurationLoading,
-    rowData: dashboard.buildRowData({
-      data: accounts,
-      pageProperties: pageProperties,
-      tab: tab
-    }),
-    rowSelection: false,
-    sortDirections: constants.SORT_DIRECTIONS,
-    totalCount: dataSize,
-    paginationProps: {
-      showSizeChanger: true,
-      hideOnSinglePage: true,
-      pageSize: (_pageProperties$tab3 = pageProperties[tab]) === null || _pageProperties$tab3 === void 0 ? void 0 : _pageProperties$tab3.pageSize,
-      total: dataSize
-    },
-    onChange: handleTableChange,
-    onColumnHide: function onColumnHide(_ref2) {
-      var key = _ref2.key;
-      return hideColumn(key);
-    }
-  }));
+  return /*#__PURE__*/jsxRuntime.jsx(TableWrapper, {
+    hasPagination: dataSize > pageProperties[tab]?.pageSize,
+    children: /*#__PURE__*/jsxRuntime.jsx(neetoui.Table, {
+      fixedHeight: true,
+      allowRowClick: false,
+      columnData: customizedColumns,
+      currentPageNumber: pageProperties[tab]?.page,
+      handlePageChange: handleTablePagination,
+      loading: isFetching || isTableConfigurationLoading,
+      rowData: dashboard.buildRowData({
+        data: accounts,
+        pageProperties,
+        tab
+      }),
+      rowSelection: false,
+      sortDirections: constants.SORT_DIRECTIONS,
+      totalCount: dataSize,
+      paginationProps: {
+        showSizeChanger: true,
+        hideOnSinglePage: true,
+        pageSize: pageProperties[tab]?.pageSize,
+        total: dataSize
+      },
+      onChange: handleTableChange,
+      onColumnHide: ({
+        key
+      }) => hideColumn(key)
+    })
+  });
 };
 
-var AccountsDashboard = function AccountsDashboard() {
-  var _useTransition = react.useTransition(),
-    _useTransition2 = _slicedToArray(_useTransition, 2);
-    _useTransition2[0];
-    var startTransition = _useTransition2[1];
-  var _useTranslation = reactI18next.useTranslation(),
-    t = _useTranslation.t;
-  var _useState = react.useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    showExportModal = _useState2[0],
-    setShowExportModal = _useState2[1];
-  var _useFiltersAndPaginat = useFiltersAndPagination(),
-    isFilterButtonVisible = _useFiltersAndPaginat.isFilterButtonVisible,
-    isFilterPaneOpen = _useFiltersAndPaginat.isFilterPaneOpen,
-    pageProperties = _useFiltersAndPaginat.pageProperties,
-    filters = _useFiltersAndPaginat.filters,
-    searchKeywordProps = _useFiltersAndPaginat.searchKeywordProps,
-    tab = _useFiltersAndPaginat.tab,
-    sortProperties = _useFiltersAndPaginat.sortProperties,
-    columnData = _useFiltersAndPaginat.columnData,
-    dataSize = _useFiltersAndPaginat.dataSize,
-    setDataSize = _useFiltersAndPaginat.setDataSize,
-    setIsFilterButtonVisible = _useFiltersAndPaginat.setIsFilterButtonVisible,
-    setIsFilterPaneOpen = _useFiltersAndPaginat.setIsFilterPaneOpen,
-    setPageProperties = _useFiltersAndPaginat.setPageProperties,
-    setFilters = _useFiltersAndPaginat.setFilters,
-    handleTabChange = _useFiltersAndPaginat.handleTabChange,
-    setSortProperties = _useFiltersAndPaginat.setSortProperties;
-  var isTabsVisible = isFilterButtonVisible || tab !== "all";
-  var handleFiltersChange = function handleFiltersChange(filters) {
-    startTransition(function () {
+const AccountsDashboard = () => {
+  const [_, startTransition] = react.useTransition();
+  const {
+    t
+  } = reactI18next.useTranslation();
+  const [showExportModal, setShowExportModal] = react.useState(false);
+  const {
+    isFilterButtonVisible,
+    isFilterPaneOpen,
+    pageProperties,
+    filters,
+    searchKeywordProps,
+    tab,
+    sortProperties,
+    columnData,
+    dataSize,
+    setDataSize,
+    setIsFilterButtonVisible,
+    setIsFilterPaneOpen,
+    setPageProperties,
+    setFilters,
+    handleTabChange,
+    setSortProperties
+  } = useFiltersAndPagination();
+  const isTabsVisible = isFilterButtonVisible || tab !== "all";
+  const handleFiltersChange = filters => {
+    startTransition(() => {
       setFilters(filters);
     });
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Header, {
-    title: t("neetoPayments.title.account"),
-    searchProps: isFilterButtonVisible && {
-      placeholder: t("neetoPayments.common.search"),
-      className: "w-80"
-    }
-  }), isTabsVisible && /*#__PURE__*/React.createElement(neetoui.Tab, null, TABS.map(function (item) {
-    return /*#__PURE__*/React.createElement(neetoui.Tab.Item, {
-      active: tab === item,
-      key: item,
-      onClick: function onClick() {
-        return handleTabChange(item);
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(Header, {
+      title: t("neetoPayments.title.account"),
+      searchProps: isFilterButtonVisible && {
+        placeholder: t("neetoPayments.common.search"),
+        className: "w-80"
       }
-    }, t("neetoPayments.common.".concat(item)));
-  })), /*#__PURE__*/React.createElement(SubHeader, {
-    className: "my-4",
-    leftActionBlock: neetocist.isPresent(dataSize) && /*#__PURE__*/React.createElement(neetoui.Typography, {
-      className: "neeto-ui-gray-800 me-2 font-semibold",
-      component: "h4"
-    }, tab === TAB.all ? t("neetoPayments.countOf.account", {
-      count: dataSize
-    }) : t("neetoPayments.countOf.accountWithStatus", {
-      count: dataSize,
-      status: tab
-    })),
-    rightActionBlock: isFilterButtonVisible && /*#__PURE__*/React.createElement(SubHeader.RightBlock, {
-      columnsButtonProps: {
-        columnData: columnData,
-        fixedColumns: DASHBOARD_MANDATORY_COLUMNS,
-        tableKey: exportChannel.TABLE_KEYS.ACCOUNTS_TABLE
-      },
-      downloadButtonProps: {
-        onClick: function onClick() {
-          return setShowExportModal(true);
+    }), isTabsVisible && /*#__PURE__*/jsxRuntime.jsx(neetoui.Tab, {
+      children: TABS.map(item => /*#__PURE__*/jsxRuntime.jsx(neetoui.Tab.Item, {
+        active: tab === item,
+        onClick: () => handleTabChange(item),
+        children: t(`neetoPayments.common.${item}`)
+      }, item))
+    }), /*#__PURE__*/jsxRuntime.jsx(SubHeader, {
+      className: "my-4",
+      leftActionBlock: neetocist.isPresent(dataSize) && /*#__PURE__*/jsxRuntime.jsx(neetoui.Typography, {
+        className: "neeto-ui-gray-800 me-2 font-semibold",
+        component: "h4",
+        children: tab === TAB.all ? t("neetoPayments.countOf.account", {
+          count: dataSize
+        }) : t("neetoPayments.countOf.accountWithStatus", {
+          count: dataSize,
+          status: tab
+        })
+      }),
+      rightActionBlock: isFilterButtonVisible && /*#__PURE__*/jsxRuntime.jsx(SubHeader.RightBlock, {
+        columnsButtonProps: {
+          columnData,
+          fixedColumns: DASHBOARD_MANDATORY_COLUMNS,
+          tableKey: exportChannel.TABLE_KEYS.ACCOUNTS_TABLE
+        },
+        downloadButtonProps: {
+          onClick: () => setShowExportModal(true)
+        },
+        filterProps: {
+          columns: FILTER_COLUMNS,
+          isOpen: isFilterPaneOpen,
+          keyword: searchKeywordProps,
+          setIsOpen: setIsFilterPaneOpen,
+          onChange: handleFiltersChange
         }
-      },
-      filterProps: {
-        columns: FILTER_COLUMNS,
-        isOpen: isFilterPaneOpen,
-        keyword: searchKeywordProps,
-        setIsOpen: setIsFilterPaneOpen,
-        onChange: handleFiltersChange
-      }
-    })
-  }), /*#__PURE__*/React.createElement(neetoFiltersFrontend.Bar, {
-    columns: FILTER_COLUMNS,
-    keyword: searchKeywordProps,
-    setIsPaneOpen: setIsFilterPaneOpen,
-    onChange: handleFiltersChange
-  }), /*#__PURE__*/React.createElement(List, {
-    columnData: columnData,
-    filters: filters,
-    pageProperties: pageProperties,
-    setDataSize: setDataSize,
-    setIsFilterButtonVisible: setIsFilterButtonVisible,
-    setPageProperties: setPageProperties,
-    setSortProperties: setSortProperties,
-    sortProperties: sortProperties,
-    tab: tab
-  }), /*#__PURE__*/React.createElement(ExportModal, {
-    filters: filters,
-    setShowExportModal: setShowExportModal,
-    showExportModal: showExportModal,
-    sortProperties: sortProperties,
-    tab: tab
-  }));
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(neetoFiltersFrontend.Bar, {
+      columns: FILTER_COLUMNS,
+      keyword: searchKeywordProps,
+      setIsPaneOpen: setIsFilterPaneOpen,
+      onChange: handleFiltersChange
+    }), /*#__PURE__*/jsxRuntime.jsx(List, {
+      columnData,
+      filters,
+      pageProperties,
+      setDataSize,
+      setIsFilterButtonVisible,
+      setPageProperties,
+      setSortProperties,
+      sortProperties,
+      tab
+    }), /*#__PURE__*/jsxRuntime.jsx(ExportModal, {
+      filters,
+      setShowExportModal,
+      showExportModal,
+      sortProperties,
+      tab
+    })]
+  });
 };
 var index = reactUtils.withTitle(dashboard.withReactQuery(AccountsDashboard), i18next.t("neetoPayments.title.account"));