@bigbinary/neeto-payments-frontend 6.1.1 → 6.1.7

package/dist/cjs/PaymentsDashboard.js

@@ -0,0 +1,588 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var react = require('react');
+var constants$1 = require('neetocommons/constants');
+var utils = require('neetocommons/utils');
+var neetoFiltersFrontend = require('@bigbinary/neeto-filters-frontend');
+var neetoui = require('@bigbinary/neetoui');
+var ramda = require('ramda');
+var reactRouterDom = require('react-router-dom');
+var ExportModal = require('./ExportModal-BmlRgdZj.js');
+var reactQuery = require('@tanstack/react-query');
+var axios = require('axios');
+var constants = require('./index-DSCn1Pdn.js');
+var queryConstants = require('./queryConstants-Cka1X6GX.js');
+var i18next = require('i18next');
+var neetocist = require('neetocist');
+var Columns = require('@bigbinary/neeto-molecules/Columns');
+var TableWrapper = require('@bigbinary/neeto-molecules/TableWrapper');
+var reactI18next = require('react-i18next');
+var exportChannel = require('./exportChannel-D1Wls92m.js');
+var DateFormat = require('@bigbinary/neeto-molecules/DateFormat');
+var CopyButtonWrapper = require('./CopyButtonWrapper-BkpN0Wmd.js');
+var Header = require('@bigbinary/neeto-molecules/Header');
+var SubHeader = require('@bigbinary/neeto-molecules/SubHeader');
+require('@bigbinary/neeto-icons');
+require('decimal.js');
+require('@bigbinary/neeto-molecules/CopyToClipboardButton');
+
+var list = function list(payload) {
+  return axios.get("".concat(constants.BASE_URL, "/api/v1/payments"), {
+    params: payload
+  });
+};
+var paymentsApi = {
+  list: list
+};
+
+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), !0).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 useFetchPayments = function useFetchPayments() {
+  var payload = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  return reactQuery.useQuery(_objectSpread$2({
+    queryKey: [queryConstants.QUERY_KEYS.PAYMENTS_LIST, payload],
+    queryFn: function queryFn() {
+      return paymentsApi.list(payload);
+    }
+  }, options));
+};
+
+var PAYMENT_DASHBOARD_TAB = {
+  all: "all",
+  successful: "successful",
+  declined: "declined",
+  refunded: "refunded",
+  pending: "pending",
+  rejected: "rejected",
+  confirmation_pending: "confirmation_pending"
+};
+var SEARCH_PROPS = {
+  node: "identifier,",
+  key: "search_term",
+  model: "NeetoPaymentsEngine::Payment,"
+};
+var FILTER_COLUMNS = [{
+  key: "payment_provider",
+  label: i18next.t("neetoPayments.common.paymentProvider"),
+  node: "payment_provider",
+  type: "single_option",
+  values: [].concat(_toConsumableArray(ramda.map(neetocist.toLabelAndValue, constants.PAYMENT_PROVIDERS)), [{
+    label: i18next.t("neetoPayments.common.upi").toUpperCase(),
+    value: "eupi"
+  }])
+}, {
+  key: "amount",
+  label: i18next.t("neetoPayments.common.amount"),
+  node: "amount",
+  type: "decimal"
+}, {
+  key: "payment_time",
+  label: i18next.t("neetoPayments.common.paymentTime"),
+  node: "payment_at",
+  type: "date"
+}];
+var TAG_STYLE = {
+  initiated: "info",
+  declined: "danger",
+  successful: "success",
+  refunded: "secondary",
+  cancelled: "secondary",
+  pending: "warning",
+  paid: "success",
+  failed: "danger",
+  in_transit: "info",
+  rejected: "danger",
+  confirmationPending: "warning"
+};
+var PAYMENT_PROVIDER = {
+  eupi: "eupi"
+};
+var DEFAULT_SORT_PROPERTIES = {
+  sortBy: "payment_at",
+  orderBy: "DESC"
+};
+
+var renderIdentifier = function renderIdentifier(identifier, _ref) {
+  var receiptUrl = _ref.receiptUrl;
+  var isTemporaryIdentifier = identifier === null || identifier === void 0 ? void 0 : identifier.startsWith("temp_");
+  if (isTemporaryIdentifier) {
+    return /*#__PURE__*/React.createElement(neetoui.Tooltip, {
+      content: i18next.t("neetoPayments.tooltipContent.paymentIdentifierUnavailable"),
+      position: "top"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "text-center"
+    }, /*#__PURE__*/React.createElement(neetoui.Typography, {
+      style: "body2"
+    }, i18next.t("neetoPayments.common.notAvailable"))));
+  }
+  return /*#__PURE__*/React.createElement(CopyButtonWrapper.CopyButtonWrapper, {
+    content: identifier
+  }, /*#__PURE__*/React.createElement(neetoui.Button, {
+    href: receiptUrl,
+    label: identifier,
+    size: "small",
+    style: "link",
+    target: "_blank"
+  }));
+};
+var getTagStyle = function getTagStyle(status) {
+  return TAG_STYLE[status] || constants.DEFAULT_TAG_STYLE;
+};
+var preProcessStatus = function preProcessStatus(type, status) {
+  var record = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  if (type === "payment") {
+    return record.isRefunded ? "refunded" : status;
+  }
+  return neetocist.snakeToCamelCase(status);
+};
+var renderStatus = ramda.curry(function (type, status, record) {
+  if (neetocist.isNotPresent(status)) {
+    return /*#__PURE__*/React.createElement(neetoui.Typography, {
+      style: "body2"
+    }, i18next.t("neetoPayments.common.notAvailable"));
+  }
+  var processedStatus = preProcessStatus(type, status, record);
+  return /*#__PURE__*/React.createElement(neetoui.Tooltip, {
+    content: i18next.t("neetoPayments.tooltipContent.".concat(type, ".").concat(processedStatus)),
+    position: "top"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "w-fit"
+  }, /*#__PURE__*/React.createElement(neetoui.Tag, {
+    style: getTagStyle(neetocist.snakeToCamelCase(processedStatus)),
+    label: neetocist.humanize(i18next.t("neetoPayments.tagLabels.".concat(type, ".").concat(processedStatus)))
+  })));
+});
+var renderPaymentProvider = function renderPaymentProvider(paymentProvider) {
+  if (paymentProvider === PAYMENT_PROVIDER.eupi) {
+    return i18next.t("neetoPayments.common.upi");
+  }
+  return neetocist.humanize(paymentProvider);
+};
+var renderDate = function renderDate(date) {
+  if (neetocist.isPresent(date)) {
+    return /*#__PURE__*/React.createElement(DateFormat.DateTime, {
+      date: date
+    });
+  }
+  return /*#__PURE__*/React.createElement(neetoui.Typography, {
+    style: "body2"
+  }, i18next.t("neetoPayments.common.notAvailable"));
+};
+var renderPayoutTraceId = function renderPayoutTraceId(value) {
+  if (neetocist.isPresent(value)) return value;
+  return /*#__PURE__*/React.createElement(neetoui.Typography, {
+    style: "body2"
+  }, i18next.t("neetoPayments.common.notAvailable"));
+};
+var getDefaultColumns = function getDefaultColumns(dashboardKind) {
+  var columns = [{
+    title: i18next.t("neetoPayments.common.id"),
+    dataIndex: "id",
+    key: "id",
+    width: 85,
+    position: 0,
+    isHidable: false
+  }, {
+    title: i18next.t("neetoPayments.common.identifier"),
+    dataIndex: "identifier",
+    key: "identifier",
+    width: 300,
+    render: renderIdentifier,
+    position: 1,
+    isHidable: false
+  }, {
+    title: i18next.t("neetoPayments.common.provider"),
+    dataIndex: "paymentProvider",
+    key: "paymentProvider",
+    width: 150,
+    render: renderPaymentProvider,
+    position: 2,
+    sorter: false
+  }, {
+    title: i18next.t("neetoPayments.common.status"),
+    dataIndex: "status",
+    key: "status",
+    width: 150,
+    render: renderStatus("transaction"),
+    sorter: true,
+    position: 3,
+    isHidable: false
+  }, {
+    title: i18next.t("neetoPayments.common.totalAmount"),
+    dataIndex: "amount",
+    key: "amount",
+    width: 200,
+    sorter: true,
+    render: constants.formatAmount,
+    position: 4
+  }, {
+    title: i18next.t("neetoPayments.common.taxAmount"),
+    dataIndex: "taxAmount",
+    key: "taxAmount",
+    width: 200,
+    sorter: true,
+    render: constants.formatAmount,
+    position: 4
+  }, {
+    title: i18next.t("neetoPayments.common.tipAmount"),
+    dataIndex: "tipAmount",
+    key: "tipAmount",
+    width: 200,
+    sorter: true,
+    render: constants.formatAmount,
+    position: 4
+  }, {
+    title: i18next.t("neetoPayments.common.currency"),
+    dataIndex: "currency",
+    key: "currency",
+    width: 180,
+    sorter: true,
+    render: constants.formatCurrency,
+    position: 4
+  }, {
+    title: i18next.t("neetoPayments.common.paymentTime"),
+    dataIndex: "paymentAt",
+    key: "paymentTime",
+    width: 190,
+    render: renderDate,
+    sorter: true,
+    position: 6
+  }];
+  if (dashboardKind === "connected") {
+    columns = ramda.concat([{
+      title: i18next.t("neetoPayments.common.payoutStatus"),
+      dataIndex: ["payout", "status"],
+      key: "payoutStatus",
+      width: 200,
+      render: renderStatus("payout"),
+      sorter: false,
+      position: 7
+    }, {
+      title: i18next.t("neetoPayments.common.payoutArrivalDate"),
+      dataIndex: ["payout", "arrivalDate"],
+      key: "payoutArrivalDate",
+      width: 235,
+      render: renderDate,
+      sorter: true,
+      position: 8
+    }, {
+      title: i18next.t("neetoPayments.common.payoutTraceId"),
+      dataIndex: ["payout", "traceId", "value"],
+      key: "payoutTraceId",
+      width: 205,
+      render: renderPayoutTraceId,
+      sorter: false,
+      position: 9
+    }], columns);
+  }
+  return columns;
+};
+
+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 buildSearchProps = function buildSearchProps(searchProps, searchTerm) {
+  return ramda.mergeDeepWith(ramda.concat, SEARCH_PROPS, ramda.mergeLeft({
+    value: searchTerm.trim()
+  }, searchProps));
+};
+var buildFilterColumns = function buildFilterColumns() {
+  var payableEntityColumns = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  return ramda.reject(ramda.isNil, ramda.concat(FILTER_COLUMNS, ramda.map(ramda.prop("filterProps"), payableEntityColumns)));
+};
+var buildRowData = function buildRowData(_ref) {
+  var payments = _ref.payments,
+    _ref$pageProperties = _ref.pageProperties,
+    pageProperties = _ref$pageProperties === void 0 ? {} : _ref$pageProperties;
+  return payments === null || payments === void 0 ? void 0 : payments.map(function (element, index) {
+    return _objectSpread$1(_objectSpread$1({}, element), {}, {
+      id: ramda.isEmpty(pageProperties) ? index + 1 : pageProperties.pageSize * (pageProperties.page - 1) + index + 1
+    });
+  });
+};
+
+var List = function List(_ref) {
+  var dashboardKind = _ref.dashboardKind,
+    isFetching = _ref.isFetching,
+    payments = _ref.payments,
+    payableEntityColumns = _ref.payableEntityColumns,
+    setSortProperties = _ref.setSortProperties,
+    pageProperties = _ref.pageProperties,
+    handleTablePagination = _ref.handleTablePagination,
+    views = _ref.views;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _getQueryParams = utils.getQueryParams(),
+    _getQueryParams$tab = _getQueryParams.tab,
+    tab = _getQueryParams$tab === void 0 ? PAYMENT_DASHBOARD_TAB.all : _getQueryParams$tab;
+  var paymentsCount = react.useMemo(function () {
+    return views[tab];
+  }, [views, tab]);
+  var isMultipleProvidersExist = react.useMemo(function () {
+    return constants.getUniquePaymentProviders(payments !== null && payments !== void 0 ? payments : []).length > 1;
+  }, [payments]);
+  var defaultColumns = react.useMemo(function () {
+    return getDefaultColumns(dashboardKind);
+  }, [dashboardKind]);
+  var allColumns = react.useMemo(function () {
+    return constants.buildDefaultTableColumns({
+      payableEntityColumns: payableEntityColumns,
+      isMultipleProvidersExist: isMultipleProvidersExist,
+      defaultColumns: defaultColumns,
+      isAllTab: tab === PAYMENT_DASHBOARD_TAB.all
+    });
+  }, [payableEntityColumns, isMultipleProvidersExist, defaultColumns, tab]);
+  var _useTableConfiguratio = Columns.useTableConfigurations("".concat(exportChannel.TABLE_KEYS.PAYMENTS_TABLE, "-").concat(tab), allColumns),
+    isTableConfigurationLoading = _useTableConfiguratio.isTableConfigurationLoading,
+    customizedColumns = _useTableConfiguratio.customizedColumns,
+    hideColumn = _useTableConfiguratio.hideColumn;
+  var handleTableChange = react.useCallback(function (_, __, sorter) {
+    setSortProperties(neetocist.isPresent(sorter === null || sorter === void 0 ? void 0 : sorter.column) ? {
+      sortBy: neetocist.camelToSnakeCase(constants.processDataIndex(sorter.field)),
+      orderBy: sorter.order === "ascend" ? "ASC" : "DESC"
+    } : DEFAULT_SORT_PROPERTIES);
+  }, [setSortProperties]);
+  var rowData = react.useMemo(function () {
+    return buildRowData({
+      payments: payments,
+      pageProperties: pageProperties,
+      tab: tab
+    });
+  }, [payments, pageProperties, tab]);
+  if (neetocist.isNotPresent(payments)) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "flex h-full w-full items-center justify-center"
+    }, /*#__PURE__*/React.createElement(neetoui.NoData, {
+      title: tab === PAYMENT_DASHBOARD_TAB.all ? t("neetoPayments.emptyState.payments") : t("neetoPayments.emptyState.paymentsWithStatus", {
+        status: neetocist.humanize(tab)
+      })
+    }));
+  }
+  return /*#__PURE__*/React.createElement(TableWrapper, {
+    hasPagination: paymentsCount > (pageProperties === null || pageProperties === void 0 ? void 0 : pageProperties.pageSize)
+  }, /*#__PURE__*/React.createElement(neetoui.Table, {
+    rowData: rowData,
+    fixedHeight: true,
+    allowRowClick: false,
+    columnData: customizedColumns,
+    currentPageNumber: pageProperties === null || pageProperties === void 0 ? void 0 : pageProperties.page,
+    handlePageChange: handleTablePagination,
+    loading: isFetching || isTableConfigurationLoading,
+    rowSelection: false,
+    sortDirections: constants.SORT_DIRECTIONS,
+    totalCount: paymentsCount,
+    paginationProps: {
+      showSizeChanger: true,
+      hideOnSinglePage: true,
+      pageSize: pageProperties === null || pageProperties === void 0 ? void 0 : pageProperties.pageSize,
+      total: paymentsCount
+    },
+    onChange: handleTableChange,
+    onColumnHide: function onColumnHide(_ref2) {
+      var key = _ref2.key;
+      return hideColumn(key);
+    }
+  }));
+};
+
+var TopSection = function TopSection(_ref) {
+  var views = _ref.views,
+    filters = _ref.filters,
+    setFilters = _ref.setFilters,
+    filterableColumns = _ref.filterableColumns,
+    searchKeywordProps = _ref.searchKeywordProps,
+    payableEntityColumns = _ref.payableEntityColumns,
+    setIsExportModalOpen = _ref.setIsExportModalOpen,
+    dashboardKind = _ref.dashboardKind;
+  var _useState = react.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isFilterPaneOpen = _useState2[0],
+    setIsFilterPaneOpen = _useState2[1];
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var history = reactRouterDom.useHistory();
+  var _getQueryParams = utils.getQueryParams(),
+    _getQueryParams$tab = _getQueryParams.tab,
+    tab = _getQueryParams$tab === void 0 ? PAYMENT_DASHBOARD_TAB.all : _getQueryParams$tab;
+  var paymentsCount = views === null || views === void 0 ? void 0 : views[tab];
+  var isPaymentCountVisible = paymentsCount > 0 || paymentsCount === 0 && neetocist.isPresent(filters);
+  var isFilterButtonVisible = isPaymentCountVisible || neetocist.isPresent(filters);
+  var handleFiltersChange = function handleFiltersChange(filters) {
+    react.startTransition(function () {
+      setFilters(filters);
+    });
+  };
+  var handleTabChange = function handleTabChange(tab) {
+    var queryParams = utils.getQueryParams({
+      toCamelCase: false
+    });
+    var newParams = {
+      tab: tab,
+      page: constants$1.DEFAULT_PAGE_INDEX,
+      page_size: constants$1.DEFAULT_PAGE_SIZE
+    };
+    history.push(utils.buildUrl(window.location.pathname, ramda.mergeLeft(newParams, queryParams)));
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Header, {
+    title: t("neetoPayments.title.payments"),
+    searchProps: isFilterButtonVisible && {
+      placeholder: searchKeywordProps.placeholder,
+      className: searchKeywordProps.placeholder.length > 30 ? "w-96" : "w-64"
+    }
+  }), constants.shouldTabsVisible(views) && /*#__PURE__*/React.createElement(neetoui.Tab, null, Object.keys(PAYMENT_DASHBOARD_TAB).map(function (item) {
+    return /*#__PURE__*/React.createElement(neetoui.Tab.Item, {
+      active: tab === item,
+      key: item,
+      onClick: function onClick() {
+        return handleTabChange(item);
+      }
+    }, t("neetoPayments.common.".concat(neetocist.snakeToCamelCase(item))));
+  })), /*#__PURE__*/React.createElement(SubHeader, {
+    className: "my-4",
+    leftActionBlock: isPaymentCountVisible && /*#__PURE__*/React.createElement(neetoui.Typography, {
+      className: "neeto-ui-gray-800 me-2 font-semibold",
+      component: "h4"
+    }, tab === PAYMENT_DASHBOARD_TAB.all ? t("neetoPayments.countOf.payment", {
+      count: paymentsCount
+    }) : t("neetoPayments.countOf.paymentWithStatus", {
+      count: paymentsCount,
+      status: neetocist.humanize(tab)
+    })),
+    rightActionBlock: isFilterButtonVisible && /*#__PURE__*/React.createElement(SubHeader.RightBlock, {
+      columnsButtonProps: {
+        columnData: constants.buildDefaultTableColumns({
+          defaultColumns: getDefaultColumns(dashboardKind),
+          payableEntityColumns: payableEntityColumns,
+          isAllTab: tab === PAYMENT_DASHBOARD_TAB.all
+        }).map(ramda.modify("dataIndex", constants.processDataIndex)),
+        fixedColumns: constants.UN_HIDEABLE_COLUMNS,
+        tableKey: "".concat(exportChannel.TABLE_KEYS.PAYMENTS_TABLE, "-").concat(tab)
+      },
+      downloadButtonProps: {
+        onClick: function onClick() {
+          return setIsExportModalOpen(true);
+        }
+      },
+      filterProps: {
+        columns: filterableColumns,
+        isOpen: isFilterPaneOpen,
+        keyword: searchKeywordProps,
+        setIsOpen: setIsFilterPaneOpen,
+        onChange: handleFiltersChange
+      }
+    })
+  }), /*#__PURE__*/React.createElement(neetoFiltersFrontend.Bar, {
+    columns: filterableColumns,
+    keyword: searchKeywordProps,
+    setIsPaneOpen: setIsFilterPaneOpen,
+    onChange: handleFiltersChange
+  }));
+};
+
+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 PaymentsDashboard = function PaymentsDashboard(_ref) {
+  var searchProps = _ref.searchProps,
+    payableEntityColumns = _ref.payableEntityColumns,
+    _ref$holdableIds = _ref.holdableIds,
+    holdableIds = _ref$holdableIds === void 0 ? {} : _ref$holdableIds,
+    _ref$dashboardKind = _ref.dashboardKind,
+    dashboardKind = _ref$dashboardKind === void 0 ? "platform" : _ref$dashboardKind;
+  var _getQueryParams = utils.getQueryParams(),
+    _getQueryParams$searc = _getQueryParams.searchTerm,
+    searchTerm = _getQueryParams$searc === void 0 ? "" : _getQueryParams$searc;
+  var filterableColumns = buildFilterColumns(payableEntityColumns);
+  var searchKeywordProps = buildSearchProps(searchProps, searchTerm);
+  var _useState = react.useState(DEFAULT_SORT_PROPERTIES),
+    _useState2 = _slicedToArray(_useState, 2),
+    sortProperties = _useState2[0],
+    setSortProperties = _useState2[1];
+  var _useState3 = react.useState(constants.DEFAULT_PAGE_VALUES),
+    _useState4 = _slicedToArray(_useState3, 2),
+    pageProperties = _useState4[0],
+    setPageProperties = _useState4[1];
+  var _useState5 = react.useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isExportModalOpen = _useState6[0],
+    setIsExportModalOpen = _useState6[1];
+  var _useState7 = react.useState(neetoFiltersFrontend.buildFiltersFromURL([].concat(_toConsumableArray(filterableColumns), [searchKeywordProps]))),
+    _useState8 = _slicedToArray(_useState7, 2),
+    filters = _useState8[0],
+    setFilters = _useState8[1];
+  var history = reactRouterDom.useHistory();
+  var _getQueryParams2 = utils.getQueryParams(),
+    _getQueryParams2$tab = _getQueryParams2.tab,
+    tab = _getQueryParams2$tab === void 0 ? PAYMENT_DASHBOARD_TAB.all : _getQueryParams2$tab;
+  var payload = _objectSpread(_objectSpread({
+    dashboardKind: dashboardKind,
+    holdableIds: holdableIds,
+    tab: tab,
+    filters: filters
+  }, pageProperties), sortProperties);
+  var _useFetchPayments = useFetchPayments(payload, {
+      enabled: true
+    }),
+    _useFetchPayments$dat = _useFetchPayments.data,
+    _useFetchPayments$dat2 = _useFetchPayments$dat === void 0 ? {} : _useFetchPayments$dat,
+    payments = _useFetchPayments$dat2.payments,
+    views = _useFetchPayments$dat2.views,
+    isFetching = _useFetchPayments.isFetching,
+    isPaymentsLoaidng = _useFetchPayments.isPending;
+  var handleTablePagination = function handleTablePagination(page, pageSize) {
+    var queryParams = utils.getQueryParams({
+      toCamelCase: false
+    });
+    history.push(utils.buildUrl(window.location.pathname, ramda.mergeLeft({
+      page: page,
+      page_size: pageSize
+    }, queryParams)));
+    setPageProperties({
+      page: page,
+      pageSize: pageSize
+    });
+  };
+  react.useEffect(function () {
+    handleTablePagination(constants$1.DEFAULT_PAGE_INDEX, constants$1.DEFAULT_PAGE_SIZE);
+    setSortProperties(DEFAULT_SORT_PROPERTIES);
+  }, [filters, tab]);
+  if (isPaymentsLoaidng) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "flex h-full w-full items-center justify-center"
+    }, /*#__PURE__*/React.createElement(neetoui.Spinner, null));
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TopSection, {
+    dashboardKind: dashboardKind,
+    filterableColumns: filterableColumns,
+    filters: filters,
+    pageProperties: pageProperties,
+    payableEntityColumns: payableEntityColumns,
+    searchKeywordProps: searchKeywordProps,
+    setFilters: setFilters,
+    setIsExportModalOpen: setIsExportModalOpen,
+    setPageProperties: setPageProperties,
+    setSortProperties: setSortProperties,
+    views: views
+  }), /*#__PURE__*/React.createElement(List, {
+    dashboardKind: dashboardKind,
+    handleTablePagination: handleTablePagination,
+    isFetching: isFetching,
+    pageProperties: pageProperties,
+    payableEntityColumns: payableEntityColumns,
+    payments: payments,
+    setSortProperties: setSortProperties,
+    views: views
+  }), /*#__PURE__*/React.createElement(ExportModal.ExportModal, {
+    filters: filters,
+    holdableIds: holdableIds,
+    isExportModalOpen: isExportModalOpen,
+    setIsExportModalOpen: setIsExportModalOpen,
+    sortProperties: sortProperties,
+    dashboardKind: constants.DASHBOARD_KIND.payments
+  }));
+};
+
+module.exports = PaymentsDashboard;
+//# sourceMappingURL=PaymentsDashboard.js.map