@bigbinary/neeto-payments-frontend 2.2.0 → 2.2.2

package/dist/cjs/PayoutsDashboard.js

@@ -1,6 +1,7 @@
 'use strict';
 
-var React$1 = require('react');
+var slicedToArray = require('./slicedToArray-f320d9e7.js');
+var React = require('react');
 var i18next = require('i18next');
 var neetoCist = require('@bigbinary/neeto-cist');
 var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
@@ -10,33 +11,38 @@ var SubHeader = require('@bigbinary/neeto-molecules/SubHeader');
 var Tab = require('@bigbinary/neetoui/Tab');
 var Typography = require('@bigbinary/neetoui/Typography');
 var reactI18next = require('react-i18next');
-var renderFunctions = require('./renderFunctions-621282bb.js');
+var renderFunctions = require('./renderFunctions-0284d0cb.js');
+var defineProperty = require('./defineProperty-f3094d6c.js');
 var Download = require('@bigbinary/neeto-icons/Download');
 var Button = require('@bigbinary/neetoui/Button');
 var Modal = require('@bigbinary/neetoui/Modal');
-var exportChannel = require('./exportChannel-1c3103ef.js');
-var index$1 = require('./index-e317e851.js');
+var exportChannel = require('./exportChannel-2d528a51.js');
+var index$1 = require('./index-8a575dd1.js');
+var jsxRuntime = require('react/jsx-runtime');
+var toConsumableArray = require('./toConsumableArray-9abb3858.js');
 var utils = require('@bigbinary/neeto-commons-frontend/utils');
 var ramda = require('ramda');
 var reactRouterDom = require('react-router-dom');
 var constants = require('./constants.js');
+var CopyButtonWrapper = require('./CopyButtonWrapper-57331e1c.js');
 var constants$1 = require('@bigbinary/neeto-commons-frontend/constants');
 var Columns = require('@bigbinary/neeto-molecules/Columns');
 var PageLoader = require('@bigbinary/neeto-molecules/PageLoader');
 var TableWrapper = require('@bigbinary/neeto-molecules/TableWrapper');
 var Table = require('@bigbinary/neetoui/Table');
 var NoData = require('@bigbinary/neetoui/NoData');
-var useConnectApi = require('./useConnectApi-a80cbf88.js');
-var usePlatformApi = require('./usePlatformApi-6740cf80.js');
+var useConnectApi = require('./useConnectApi-67c912ae.js');
+var usePlatformApi = require('./usePlatformApi-365cf2dc.js');
 require('@tanstack/react-query');
 require('@tanstack/react-query-devtools');
 require('@bigbinary/neeto-molecules/DateFormat');
 require('@bigbinary/neetoui/Tag');
 require('@bigbinary/neetoui/Tooltip');
-require('@bigbinary/neeto-molecules/CopyToClipboardButton');
 require('axios');
+require('@bigbinary/neeto-molecules/CopyToClipboardButton');
+require('./_commonjsHelpers-755157d3.js');
 require('util');
-require('./queryConstants-45f84f3e.js');
+require('./queryConstants-cb79f600.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -52,7 +58,7 @@ var TableWrapper__default = /*#__PURE__*/_interopDefaultLegacy(TableWrapper);
 var Table__default = /*#__PURE__*/_interopDefaultLegacy(Table);
 var NoData__default = /*#__PURE__*/_interopDefaultLegacy(NoData);
 
-const TAB = {
+var TAB = {
   all: "all",
   paid: "paid",
   inTransit: "inTransit",
@@ -60,14 +66,14 @@ const TAB = {
   canceled: "canceled",
   pending: "pending"
 };
-const TABS = Object.values(TAB);
-const SEARCH_PROPS = {
+var TABS = Object.values(TAB);
+var SEARCH_PROPS = {
   key: "keyword",
   node: "identifier,destination_identifier",
   model: "NeetoPaymentsEngine::Payout"
 };
-const DASHBOARD_MANDATORY_COLUMNS = ["id", "status", "identifier"];
-const FILTER_COLUMNS = [{
+var DASHBOARD_MANDATORY_COLUMNS = ["id", "status", "identifier"];
+var FILTER_COLUMNS = [{
   key: "created_at",
   label: i18next.t("neetoPayments.common.createdAt"),
   node: "created_at",
@@ -80,93 +86,112 @@ const FILTER_COLUMNS = [{
   type: "date",
   showRuleSelector: true
 }];
-const DEFAULT_SORT_PROPERTIES = {
+var DEFAULT_SORT_PROPERTIES = {
   sortBy: "created_at",
   orderBy: "DESC"
 };
-const STRIPE_PAYOUTS_TABLE_HIDDEN_COLUMNS_STORAGE_KEY = "stripePayoutsDashboard";
+var STRIPE_PAYOUTS_TABLE_HIDDEN_COLUMNS_STORAGE_KEY = "stripePayoutsDashboard";
 
-const ExportModal = _ref => {
-  let {
-    showExportModal,
-    setShowExportModal,
-    tab,
-    filters,
-    sortProperties = {}
-  } = _ref;
-  const {
-    t
-  } = reactI18next.useTranslation();
-  const [downloadUrl, setDownloadUrl] = React$1.useState("");
-  const [isGenerating, setIsGenerating] = React$1.useState(false);
-  const {
-    mutate: exportCsv,
-    isPending
-  } = exportChannel.useExportData();
-  const isFileLoading = isPending || isGenerating;
-  const token = React$1.useMemo(() => `payout-report-${index$1.uuidV4()}`, []);
-  const receivedCallback = data => {
+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._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._slicedToArray(_useState, 2),
+    downloadUrl = _useState2[0],
+    setDownloadUrl = _useState2[1];
+  var _useState3 = React.useState(false),
+    _useState4 = slicedToArray._slicedToArray(_useState3, 2),
+    isGenerating = _useState4[0],
+    setIsGenerating = _useState4[1];
+  var _useExportData = exportChannel.useExportData(),
+    exportCsv = _useExportData.mutate,
+    isPending = _useExportData.isPending;
+  var isFileLoading = isPending || isGenerating;
+  var token = React.useMemo(function () {
+    return "payout-report-".concat(index$1.uuidV4());
+  }, []);
+  var receivedCallback = function receivedCallback(data) {
     if (!data.download_url) return;
     setDownloadUrl(data.download_url);
     setIsGenerating(false);
   };
-  const handleGenerateClick = () => {
-    const payload = {
+  var handleGenerateClick = function handleGenerateClick() {
+    var payload = _objectSpread$1({
       kind: "payout",
-      token,
-      filters,
-      tab,
-      ...sortProperties
-    };
+      token: token,
+      filters: filters,
+      tab: tab
+    }, sortProperties);
     exportCsv(payload, {
-      onSuccess: () => {
+      onSuccess: function onSuccess() {
         setDownloadUrl("");
         setIsGenerating(true);
       }
     });
   };
-  React$1.useEffect(() => {
+  React.useEffect(function () {
     if (showExportModal) {
-      const channel = exportChannel.exportChannel(token, receivedCallback);
+      var channel = exportChannel.exportChannel(token, receivedCallback);
       setDownloadUrl("");
       setIsGenerating(false);
-      return () => {
+      return function () {
         channel.disconnected();
       };
     }
     return undefined;
   }, [showExportModal, token]);
-  const onClose = () => setShowExportModal(false);
-  return /*#__PURE__*/React.createElement(Modal__default["default"], {
-    onClose,
-    isOpen: showExportModal
-  }, /*#__PURE__*/React.createElement(Modal__default["default"].Header, null, /*#__PURE__*/React.createElement(Typography__default["default"], {
-    style: "h2"
-  }, t("neetoPayments.export.title.payout"))), /*#__PURE__*/React.createElement(Modal__default["default"].Body, null, isFileLoading ? /*#__PURE__*/React.createElement(Typography__default["default"], {
-    style: "body2"
-  }, t("neetoPayments.export.pleaseWait")) : /*#__PURE__*/React.createElement(Typography__default["default"], {
-    style: "body2"
-  }, downloadUrl ? t("neetoPayments.export.fileReady") : t("neetoPayments.export.download.payout"))), /*#__PURE__*/React.createElement(Modal__default["default"].Footer, {
-    className: "space-x-2"
-  }, downloadUrl ? /*#__PURE__*/React.createElement(Button__default["default"], {
-    href: downloadUrl,
-    icon: Download__default["default"],
-    label: t("neetoPayments.common.download"),
-    onClick: onClose
-  }) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button__default["default"], {
-    disabled: isFileLoading,
-    label: t("neetoPayments.common.cancel"),
-    style: "tertiary",
-    onClick: onClose
-  }), /*#__PURE__*/React.createElement(Button__default["default"], {
-    disabled: isFileLoading,
-    label: t("neetoPayments.common.export"),
-    loading: isFileLoading,
-    onClick: handleGenerateClick
-  }))));
+  var onClose = function onClose() {
+    return setShowExportModal(false);
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs(Modal__default["default"], {
+    onClose: onClose,
+    isOpen: showExportModal,
+    children: [/*#__PURE__*/jsxRuntime.jsx(Modal__default["default"].Header, {
+      children: /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+        style: "h2",
+        children: t("neetoPayments.export.title.payout")
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(Modal__default["default"].Body, {
+      children: isFileLoading ? /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+        style: "body2",
+        children: t("neetoPayments.export.pleaseWait")
+      }) : /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+        style: "body2",
+        children: downloadUrl ? t("neetoPayments.export.fileReady") : t("neetoPayments.export.download.payout")
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(Modal__default["default"].Footer, {
+      className: "space-x-2",
+      children: downloadUrl ? /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+        href: downloadUrl,
+        icon: Download__default["default"],
+        label: t("neetoPayments.common.download"),
+        onClick: onClose
+      }) : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+          disabled: isFileLoading,
+          label: t("neetoPayments.common.cancel"),
+          style: "tertiary",
+          onClick: onClose
+        }), /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+          disabled: isFileLoading,
+          label: t("neetoPayments.common.export"),
+          loading: isFileLoading,
+          onClick: handleGenerateClick
+        })]
+      })
+    })]
+  });
 };
 
-const COLUMNS = [{
+var COLUMNS = [{
   title: i18next.t("neetoPayments.common.id"),
   dataIndex: "id",
   key: "id",
@@ -206,7 +231,7 @@ const COLUMNS = [{
   key: "destinationIdentifier",
   width: "300px"
 }];
-const IDENTIFIER_COLUMN = {
+var IDENTIFIER_COLUMN = {
   title: i18next.t("neetoPayments.common.identifier"),
   dataIndex: "identifier",
   key: "identifier",
@@ -214,88 +239,110 @@ const IDENTIFIER_COLUMN = {
   isHidable: false
 };
 
-const processTab = status => neetoCist.camelToSnakeCase(status).split("_").join(" ");
-const renderPayoutIdentifier = ramda.curry((route, _ref) => {
-  let {
-    identifier = "",
-    id = ""
-  } = _ref;
-  return /*#__PURE__*/React.createElement(renderFunctions.CopyButtonWrapper, {
-    content: identifier
-  }, /*#__PURE__*/React.createElement(Button__default["default"], {
-    label: identifier,
-    size: "small",
-    style: "link",
-    to: utils.buildUrl(route, {
-      id
+var processTab = function processTab(status) {
+  return neetoCist.camelToSnakeCase(status).split("_").join(" ");
+};
+var renderPayoutIdentifier = ramda.curry(function (route, _ref) {
+  var _ref$identifier = _ref.identifier,
+    identifier = _ref$identifier === void 0 ? "" : _ref$identifier,
+    _ref$id = _ref.id,
+    id = _ref$id === void 0 ? "" : _ref$id;
+  return /*#__PURE__*/jsxRuntime.jsx(CopyButtonWrapper.CopyButtonWrapper, {
+    content: identifier,
+    children: /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+      label: identifier,
+      size: "small",
+      style: "link",
+      to: utils.buildUrl(route, {
+        id: id
+      })
     })
-  }));
+  });
 });
 
-const useFiltersAndPagination = payoutsPageRoute => {
-  const history = reactRouterDom.useHistory();
-  const [isFilterButtonVisible, setIsFilterButtonVisible] = React$1.useState(false);
-  const [isFilterPaneOpen, setIsFilterPaneOpen] = React$1.useState(false);
-  const [pageProperties, setPageProperties] = React$1.useState(renderFunctions.buildDefaultPageProperties(TABS));
-  const [sortProperties, setSortProperties] = React$1.useState(constants.DEFAULT_SORT_PROPERTIES);
-  const {
-    tab = TAB.all
-  } = reactUtils.useQueryParams();
-  const {
-    searchTerm = ""
-  } = utils.getQueryParams();
-  const searchKeywordProps = {
-    ...SEARCH_PROPS,
+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._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(payoutsPageRoute) {
+  var history = reactRouterDom.useHistory();
+  var _useState = React.useState(false),
+    _useState2 = slicedToArray._slicedToArray(_useState, 2),
+    isFilterButtonVisible = _useState2[0],
+    setIsFilterButtonVisible = _useState2[1];
+  var _useState3 = React.useState(false),
+    _useState4 = slicedToArray._slicedToArray(_useState3, 2),
+    isFilterPaneOpen = _useState4[0],
+    setIsFilterPaneOpen = _useState4[1];
+  var _useState5 = React.useState(renderFunctions.buildDefaultPageProperties(TABS)),
+    _useState6 = slicedToArray._slicedToArray(_useState5, 2),
+    pageProperties = _useState6[0],
+    setPageProperties = _useState6[1];
+  var _useState7 = React.useState(constants.DEFAULT_SORT_PROPERTIES),
+    _useState8 = slicedToArray._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), {}, {
     key: "search_term",
     value: searchTerm.trim()
-  };
-  const [filters, setFilters] = React$1.useState(neetoFiltersFrontend.buildFiltersFromURL([...FILTER_COLUMNS, searchKeywordProps]));
-  const [dataSize, setDataSize] = React$1.useState(null);
-  const identifierColumn = ramda.assoc("render", renderPayoutIdentifier(payoutsPageRoute), IDENTIFIER_COLUMN);
-  const columns = ramda.insert(1, identifierColumn, COLUMNS);
-  const columnData = tab !== TAB.all ? neetoCist.removeBy({
+  });
+  var _useState9 = React.useState(neetoFiltersFrontend.buildFiltersFromURL([].concat(toConsumableArray._toConsumableArray(FILTER_COLUMNS), [searchKeywordProps]))),
+    _useState10 = slicedToArray._slicedToArray(_useState9, 2),
+    filters = _useState10[0],
+    setFilters = _useState10[1];
+  var _useState11 = React.useState(null),
+    _useState12 = slicedToArray._slicedToArray(_useState11, 2),
+    dataSize = _useState12[0],
+    setDataSize = _useState12[1];
+  var identifierColumn = ramda.assoc("render", renderPayoutIdentifier(payoutsPageRoute), IDENTIFIER_COLUMN);
+  var columns = ramda.insert(1, identifierColumn, COLUMNS);
+  var columnData = tab !== TAB.all ? neetoCist.removeBy({
     key: "status"
   }, columns) : columns;
-  const handleTabChange = tab => {
+  var handleTabChange = function handleTabChange(tab) {
+    var _pageProperties$tab, _pageProperties$tab2;
     setDataSize(null);
-    const queryParams = utils.getQueryParams({
+    var queryParams = utils.getQueryParams({
       toCamelCase: false
     });
-    const newParams = {
-      tab,
-      page: pageProperties[tab]?.page,
-      page_size: pageProperties[tab]?.pageSize
+    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
     };
     history.push(utils.buildUrl(window.location.pathname, ramda.mergeLeft(newParams, queryParams)));
   };
   return {
-    isFilterButtonVisible,
-    isFilterPaneOpen,
-    pageProperties,
-    filters,
-    searchKeywordProps,
-    tab,
-    sortProperties,
-    columnData,
-    dataSize,
-    setDataSize,
-    setIsFilterButtonVisible,
-    setIsFilterPaneOpen,
-    setPageProperties,
-    setFilters,
-    handleTabChange,
-    setSortProperties
+    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
   };
 };
 
-const useFetchData = _ref => {
-  let {
-    isPlatformEnabled,
-    payload
-  } = _ref;
-  const data = {};
-  const kind = isPlatformEnabled ? "platform" : "connected";
-  const tab = neetoCist.snakeToCamelCase(payload?.tab || "");
+var useFetchData = function useFetchData(_ref) {
+  var _data$kind, _data$kind2, _data$kind3, _data$kind4;
+  var isPlatformEnabled = _ref.isPlatformEnabled,
+    payload = _ref.payload;
+  var data = {};
+  var kind = isPlatformEnabled ? "platform" : "connected";
+  var tab = neetoCist.snakeToCamelCase((payload === null || payload === void 0 ? void 0 : payload.tab) || "");
   data.connected = useConnectApi.useFetchStripePayouts(payload, {
     enabled: !isPlatformEnabled
   });
@@ -303,213 +350,224 @@ const useFetchData = _ref => {
     enabled: isPlatformEnabled
   });
   return {
-    data: data[kind]?.data?.payouts,
-    dataSize: data[kind]?.data?.views?.[tab],
-    isDataLoading: data[kind]?.isLoading,
-    isDataFetching: data[kind]?.isFetching
+    data: (_data$kind = data[kind]) === null || _data$kind === void 0 || (_data$kind = _data$kind.data) === null || _data$kind === void 0 ? void 0 : _data$kind.payouts,
+    dataSize: (_data$kind2 = data[kind]) === null || _data$kind2 === void 0 || (_data$kind2 = _data$kind2.data) === null || _data$kind2 === void 0 || (_data$kind2 = _data$kind2.views) === null || _data$kind2 === void 0 ? void 0 : _data$kind2[tab],
+    isDataLoading: (_data$kind3 = data[kind]) === null || _data$kind3 === void 0 ? void 0 : _data$kind3.isLoading,
+    isDataFetching: (_data$kind4 = data[kind]) === null || _data$kind4 === void 0 ? void 0 : _data$kind4.isFetching
   };
 };
 
-const List = _ref => {
-  let {
-    columnData,
-    filters,
-    pageProperties,
-    setDataSize,
-    setIsFilterButtonVisible,
-    setPageProperties,
-    setSortProperties,
-    sortProperties,
-    tab,
-    isPlatformEnabled
-  } = _ref;
-  const history = reactRouterDom.useHistory();
-  const {
-    t
-  } = reactI18next.useTranslation();
-  const {
-    hideColumn,
-    getVisibleColumnData
-  } = Columns.useHiddenColumns(STRIPE_PAYOUTS_TABLE_HIDDEN_COLUMNS_STORAGE_KEY);
-  const {
-    data: payouts,
-    isDataLoading,
-    dataSize,
-    isDataFetching
-  } = useFetchData({
-    payload: renderFunctions.buildPayload({
-      filters,
-      pageProperties,
-      sortProperties,
-      tab
+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,
+    isPlatformEnabled = _ref.isPlatformEnabled;
+  var history = reactRouterDom.useHistory();
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useHiddenColumns = Columns.useHiddenColumns(STRIPE_PAYOUTS_TABLE_HIDDEN_COLUMNS_STORAGE_KEY),
+    hideColumn = _useHiddenColumns.hideColumn,
+    getVisibleColumnData = _useHiddenColumns.getVisibleColumnData;
+  var _useFetchData = useFetchData({
+      payload: renderFunctions.buildPayload({
+        filters: filters,
+        pageProperties: pageProperties,
+        sortProperties: sortProperties,
+        tab: tab
+      }),
+      isPlatformEnabled: isPlatformEnabled
     }),
-    isPlatformEnabled
-  });
-  React$1.useEffect(() => {
+    payouts = _useFetchData.data,
+    isDataLoading = _useFetchData.isDataLoading,
+    dataSize = _useFetchData.dataSize,
+    isDataFetching = _useFetchData.isDataFetching;
+  React.useEffect(function () {
     setIsFilterButtonVisible(neetoCist.isPresent(payouts) || neetoCist.isPresent(filters));
     setDataSize(dataSize);
   }, [payouts]);
-  const handleTablePagination = (page, pageSize) => {
-    const queryParams = utils.getQueryParams({
+  var handleTablePagination = function handleTablePagination(page, pageSize) {
+    var 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,
-      pageSize
+      page: page,
+      pageSize: pageSize
     }));
   };
-  React$1.useEffect(() => {
+  React.useEffect(function () {
     handleTablePagination(constants$1.DEFAULT_PAGE_INDEX, constants$1.DEFAULT_PAGE_SIZE);
     setSortProperties(DEFAULT_SORT_PROPERTIES);
   }, [filters, tab]);
-  const handleTableChange = (_, __, sorter) => {
-    setSortProperties(neetoCist.isPresent(sorter?.column) ? {
+  var handleTableChange = function handleTableChange(_, __, sorter) {
+    setSortProperties(neetoCist.isPresent(sorter === null || sorter === void 0 ? void 0 : sorter.column) ? {
       sortBy: neetoCist.camelToSnakeCase(sorter.field),
       orderBy: sorter.order === "ascend" ? "ASC" : "DESC"
     } : DEFAULT_SORT_PROPERTIES);
   };
   if (isDataLoading) {
-    return /*#__PURE__*/React.createElement(PageLoader__default["default"], null);
+    return /*#__PURE__*/jsxRuntime.jsx(PageLoader__default["default"], {});
   }
   if (dataSize <= 0 || !neetoCist.isPresent(payouts)) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: "flex h-full w-full items-center justify-center"
-    }, /*#__PURE__*/React.createElement(NoData__default["default"], {
-      title: t(`neetoPayments.emptyState.payouts.${tab}`)
-    }));
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex h-full w-full items-center justify-center",
+      children: /*#__PURE__*/jsxRuntime.jsx(NoData__default["default"], {
+        title: t("neetoPayments.emptyState.payouts.".concat(tab))
+      })
+    });
   }
-  return /*#__PURE__*/React.createElement(TableWrapper__default["default"], {
-    hasPagination: dataSize > pageProperties[tab]?.pageSize
-  }, /*#__PURE__*/React.createElement(Table__default["default"], {
-    fixedHeight: true,
-    allowRowClick: false,
-    columnData: getVisibleColumnData(columnData),
-    currentPageNumber: pageProperties[tab]?.page,
-    handlePageChange: handleTablePagination,
-    loading: isDataFetching,
-    rowData: renderFunctions.buildRowData({
-      data: payouts,
-      pageProperties,
-      tab
-    }),
-    rowSelection: false,
-    sortDirections: constants.SORT_DIRECTIONS,
-    totalCount: dataSize,
-    paginationProps: {
-      showSizeChanger: true,
-      hideOnSinglePage: true,
-      pageSize: pageProperties[tab]?.pageSize,
-      total: dataSize
-    },
-    onChange: handleTableChange,
-    onColumnHide: _ref2 => {
-      let {
-        dataIndex
-      } = _ref2;
-      return hideColumn(dataIndex);
-    }
-  }));
+  return /*#__PURE__*/jsxRuntime.jsx(TableWrapper__default["default"], {
+    hasPagination: dataSize > ((_pageProperties$tab = pageProperties[tab]) === null || _pageProperties$tab === void 0 ? void 0 : _pageProperties$tab.pageSize),
+    children: /*#__PURE__*/jsxRuntime.jsx(Table__default["default"], {
+      fixedHeight: true,
+      allowRowClick: false,
+      columnData: getVisibleColumnData(columnData),
+      currentPageNumber: (_pageProperties$tab2 = pageProperties[tab]) === null || _pageProperties$tab2 === void 0 ? void 0 : _pageProperties$tab2.page,
+      handlePageChange: handleTablePagination,
+      loading: isDataFetching,
+      rowData: renderFunctions.buildRowData({
+        data: payouts,
+        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 dataIndex = _ref2.dataIndex;
+        return hideColumn(dataIndex);
+      }
+    })
+  });
 };
 
-const PayoutsDashboard = _ref => {
-  let {
-    payoutsPageRoute,
-    isPlatformEnabled
-  } = _ref;
-  const [_, startTransition] = React$1.useTransition();
-  const {
-    t
-  } = reactI18next.useTranslation();
-  const [showExportModal, setShowExportModal] = React$1.useState(false);
-  const {
-    isFilterButtonVisible,
-    isFilterPaneOpen,
-    pageProperties,
-    filters,
-    searchKeywordProps,
-    tab,
-    sortProperties,
-    columnData,
-    dataSize,
-    setDataSize,
-    setIsFilterButtonVisible,
-    setIsFilterPaneOpen,
-    setPageProperties,
-    setFilters,
-    handleTabChange,
-    setSortProperties
-  } = useFiltersAndPagination(payoutsPageRoute);
-  const isTabsVisible = isFilterButtonVisible || tab !== "all";
-  const handleFiltersChange = filters => {
-    startTransition(() => {
+var PayoutsDashboard = function PayoutsDashboard(_ref) {
+  var payoutsPageRoute = _ref.payoutsPageRoute,
+    isPlatformEnabled = _ref.isPlatformEnabled;
+  var _useTransition = React.useTransition(),
+    _useTransition2 = slicedToArray._slicedToArray(_useTransition, 2);
+    _useTransition2[0];
+    var startTransition = _useTransition2[1];
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useState = React.useState(false),
+    _useState2 = slicedToArray._slicedToArray(_useState, 2),
+    showExportModal = _useState2[0],
+    setShowExportModal = _useState2[1];
+  var _useFiltersAndPaginat = useFiltersAndPagination(payoutsPageRoute),
+    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 () {
       setFilters(filters);
     });
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Header__default["default"], {
-    title: t("neetoPayments.title.payouts"),
-    searchProps: isFilterButtonVisible && {
-      placeholder: t("neetoPayments.common.search"),
-      className: "w-80"
-    }
-  }), isTabsVisible && /*#__PURE__*/React.createElement(Tab__default["default"], null, TABS.map(item => /*#__PURE__*/React.createElement(Tab__default["default"].Item, {
-    active: tab === item,
-    key: item,
-    onClick: () => handleTabChange(item)
-  }, t(`neetoPayments.common.${item}`)))), /*#__PURE__*/React.createElement(SubHeader__default["default"], {
-    className: "mt-4",
-    leftActionBlock: neetoCist.isPresent(dataSize) && /*#__PURE__*/React.createElement(Typography__default["default"], {
-      className: "neeto-ui-gray-800 mr-2 font-semibold",
-      component: "h4"
-    }, tab === TAB.all ? t("neetoPayments.countOf.payout", {
-      count: dataSize
-    }) : t("neetoPayments.countOf.payoutWithStatus", {
-      count: dataSize,
-      status: processTab(tab)
-    })),
-    rightActionBlock: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(neetoFiltersFrontend.Bar, {
-      columns: FILTER_COLUMNS,
-      keyword: searchKeywordProps,
-      setIsPaneOpen: setIsFilterPaneOpen,
-      onChange: handleFiltersChange
-    }), isFilterButtonVisible && /*#__PURE__*/React.createElement(SubHeader__default["default"].RightBlock, {
-      columnsButtonProps: {
-        columnData,
-        fixedColumns: DASHBOARD_MANDATORY_COLUMNS,
-        localStorageKey: STRIPE_PAYOUTS_TABLE_HIDDEN_COLUMNS_STORAGE_KEY
-      },
-      downloadButtonProps: {
-        onClick: () => setShowExportModal(true)
-      },
-      filterProps: {
-        columns: FILTER_COLUMNS,
-        isOpen: isFilterPaneOpen,
-        keyword: searchKeywordProps,
-        setIsOpen: setIsFilterPaneOpen,
-        onChange: handleFiltersChange
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(Header__default["default"], {
+      title: t("neetoPayments.title.payouts"),
+      searchProps: isFilterButtonVisible && {
+        placeholder: t("neetoPayments.common.search"),
+        className: "w-80"
       }
-    }))
-  }), /*#__PURE__*/React.createElement(List, {
-    columnData,
-    filters,
-    isPlatformEnabled,
-    pageProperties,
-    setDataSize,
-    setIsFilterButtonVisible,
-    setPageProperties,
-    setSortProperties,
-    sortProperties,
-    tab
-  }), /*#__PURE__*/React.createElement(ExportModal, {
-    filters,
-    setShowExportModal,
-    showExportModal,
-    sortProperties,
-    tab
-  }));
+    }), isTabsVisible && /*#__PURE__*/jsxRuntime.jsx(Tab__default["default"], {
+      children: TABS.map(function (item) {
+        return /*#__PURE__*/jsxRuntime.jsx(Tab__default["default"].Item, {
+          active: tab === item,
+          onClick: function onClick() {
+            return handleTabChange(item);
+          },
+          children: t("neetoPayments.common.".concat(item))
+        }, item);
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(SubHeader__default["default"], {
+      className: "mt-4",
+      leftActionBlock: neetoCist.isPresent(dataSize) && /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+        className: "neeto-ui-gray-800 mr-2 font-semibold",
+        component: "h4",
+        children: tab === TAB.all ? t("neetoPayments.countOf.payout", {
+          count: dataSize
+        }) : t("neetoPayments.countOf.payoutWithStatus", {
+          count: dataSize,
+          status: processTab(tab)
+        })
+      }),
+      rightActionBlock: /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/jsxRuntime.jsx(neetoFiltersFrontend.Bar, {
+          columns: FILTER_COLUMNS,
+          keyword: searchKeywordProps,
+          setIsPaneOpen: setIsFilterPaneOpen,
+          onChange: handleFiltersChange
+        }), isFilterButtonVisible && /*#__PURE__*/jsxRuntime.jsx(SubHeader__default["default"].RightBlock, {
+          columnsButtonProps: {
+            columnData: columnData,
+            fixedColumns: DASHBOARD_MANDATORY_COLUMNS,
+            localStorageKey: STRIPE_PAYOUTS_TABLE_HIDDEN_COLUMNS_STORAGE_KEY
+          },
+          downloadButtonProps: {
+            onClick: function onClick() {
+              return setShowExportModal(true);
+            }
+          },
+          filterProps: {
+            columns: FILTER_COLUMNS,
+            isOpen: isFilterPaneOpen,
+            keyword: searchKeywordProps,
+            setIsOpen: setIsFilterPaneOpen,
+            onChange: handleFiltersChange
+          }
+        })]
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(List, {
+      columnData: columnData,
+      filters: filters,
+      isPlatformEnabled: isPlatformEnabled,
+      pageProperties: pageProperties,
+      setDataSize: setDataSize,
+      setIsFilterButtonVisible: setIsFilterButtonVisible,
+      setPageProperties: setPageProperties,
+      setSortProperties: setSortProperties,
+      sortProperties: sortProperties,
+      tab: tab
+    }), /*#__PURE__*/jsxRuntime.jsx(ExportModal, {
+      filters: filters,
+      setShowExportModal: setShowExportModal,
+      showExportModal: showExportModal,
+      sortProperties: sortProperties,
+      tab: tab
+    })]
+  });
 };
 var index = reactUtils.withTitle(renderFunctions.withReactQuery(PayoutsDashboard), i18next.t("neetoPayments.title.payouts"));