@bigbinary/neeto-payments-frontend 6.2.0 → 6.3.0

package/dist/cjs/v2/PaymentKindRestrictionAlert.js

@@ -0,0 +1,33 @@
+'use strict';
+
+var neetoAtoms = require('@bigbinary/neeto-atoms');
+var neetocist = require('neetocist');
+var i18next = require('i18next');
+var jsxRuntime = require('react/jsx-runtime');
+
+const STRIPE_ALERT_PAYMENT_KIND_CONTENT = {
+  standard: {
+    title: i18next.t("neetoPayments.alert.stripe.connectRestrictionTitle"),
+    message: i18next.t("neetoPayments.alert.stripe.connectRestrictionMessage")
+  },
+  platform: {
+    title: i18next.t("neetoPayments.alert.stripePlatform.connectRestrictionTitle"),
+    message: i18next.t("neetoPayments.alert.stripePlatform.connectRestrictionMessage")
+  }
+};
+
+const PaymentKindRestrictionAlert = ({
+  isOpen = false,
+  paymentKind = "standard",
+  onClose = neetocist.noop,
+  ...otherProps
+}) => /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Alert, {
+  isOpen,
+  onClose,
+  message: STRIPE_ALERT_PAYMENT_KIND_CONTENT[paymentKind].message,
+  title: STRIPE_ALERT_PAYMENT_KIND_CONTENT[paymentKind].title,
+  ...otherProps
+});
+
+module.exports = PaymentKindRestrictionAlert;
+//# sourceMappingURL=PaymentKindRestrictionAlert.js.map

package/dist/cjs/v2/PaymentKindRestrictionAlert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaymentKindRestrictionAlert.js","sources":["../../../app/javascript/src/v2/components/PaymentKindRestrictionAlert/constants.js","../../../app/javascript/src/v2/components/PaymentKindRestrictionAlert/index.jsx"],"sourcesContent":["import { t } from \"i18next\";\n\nexport const STRIPE_ALERT_PAYMENT_KIND_CONTENT = {\n  standard: {\n    title: t(\"neetoPayments.alert.stripe.connectRestrictionTitle\"),\n    message: t(\"neetoPayments.alert.stripe.connectRestrictionMessage\"),\n  },\n  platform: {\n    title: t(\"neetoPayments.alert.stripePlatform.connectRestrictionTitle\"),\n    message: t(\"neetoPayments.alert.stripePlatform.connectRestrictionMessage\"),\n  },\n};\n","import { Alert } from \"@bigbinary/neeto-atoms\";\nimport { noop } from \"neetocist\";\n\nimport { STRIPE_ALERT_PAYMENT_KIND_CONTENT } from \"./constants\";\n\nconst PaymentKindRestrictionAlert = ({\n  isOpen = false,\n  paymentKind = \"standard\",\n  onClose = noop,\n  ...otherProps\n}) => (\n  <Alert\n    {...{ isOpen, onClose }}\n    message={STRIPE_ALERT_PAYMENT_KIND_CONTENT[paymentKind].message}\n    title={STRIPE_ALERT_PAYMENT_KIND_CONTENT[paymentKind].title}\n    {...otherProps}\n  />\n);\n\nexport default PaymentKindRestrictionAlert;\n"],"names":["STRIPE_ALERT_PAYMENT_KIND_CONTENT","standard","title","t","message","platform","PaymentKindRestrictionAlert","isOpen","paymentKind","onClose","noop","otherProps","_jsx","Alert"],"mappings":";;;;;;;AAEO,MAAMA,iCAAiC,GAAG;AAC/CC,EAAAA,QAAQ,EAAE;AACRC,IAAAA,KAAK,EAAEC,SAAC,CAAC,oDAAoD,CAAC;IAC9DC,OAAO,EAAED,SAAC,CAAC,sDAAsD;GAClE;AACDE,EAAAA,QAAQ,EAAE;AACRH,IAAAA,KAAK,EAAEC,SAAC,CAAC,4DAA4D,CAAC;IACtEC,OAAO,EAAED,SAAC,CAAC,8DAA8D;AAC3E;AACF,CAAC;;ACND,MAAMG,2BAA2B,GAAGA,CAAC;AACnCC,EAAAA,MAAM,GAAG,KAAK;AACdC,EAAAA,WAAW,GAAG,UAAU;AACxBC,EAAAA,OAAO,GAAGC,cAAI;EACd,GAAGC;AACL,CAAC,kBACCC,cAAA,CAACC,gBAAK,EAAA;EACEN,MAAM;EAAEE,OAAO;AACrBL,EAAAA,OAAO,EAAEJ,iCAAiC,CAACQ,WAAW,CAAC,CAACJ,OAAQ;AAChEF,EAAAA,KAAK,EAAEF,iCAAiC,CAACQ,WAAW,CAAC,CAACN,KAAM;EAAA,GACxDS;AAAU,CACf;;;;"}

package/dist/cjs/v2/PaymentsDashboard.js

@@ -0,0 +1,581 @@
+'use strict';
+
+var react = require('react');
+var neetoAtoms = require('@bigbinary/neeto-atoms');
+var constants$1 = require('neetocommons/constants');
+var utils = require('neetocommons/utils');
+var neetoFiltersFrontend = require('@bigbinary/neeto-filters-frontend');
+var ramda = require('ramda');
+var reactRouterDom = require('react-router-dom');
+var ExportModal = require('../ExportModal-C7_QKb9q.js');
+var usePaymentsApi = require('../usePaymentsApi-ZomyqUIJ.js');
+var constants = require('../index-CpEnC-Gq.js');
+var dashboard = require('../dashboard-BGW0_f30.js');
+var i18next = require('i18next');
+var neetocist = require('neetocist');
+var Columns = require('@bigbinary/neeto-molecules/v2/Columns');
+var TableWrapper = require('@bigbinary/neeto-molecules/v2/TableWrapper');
+var reactI18next = require('react-i18next');
+var exportChannel = require('../exportChannel-BL2RGGhP.js');
+var index = require('../index-CsYH-ECo.js');
+var DateFormat = require('@bigbinary/neeto-molecules/v2/DateFormat');
+var CopyButtonWrapper = require('../CopyButtonWrapper-CXzqqYIp.js');
+var jsxRuntime = require('react/jsx-runtime');
+var Header = require('@bigbinary/neeto-molecules/v2/Header');
+var SubHeader = require('@bigbinary/neeto-molecules/v2/SubHeader');
+require('@bigbinary/neeto-icons');
+require('../useExportsApi-rYuPpXWl.js');
+require('@tanstack/react-query');
+require('axios');
+require('../queryConstants-CGUF7zol.js');
+require('decimal.js');
+require('@bigbinary/neeto-molecules/v2/CopyToClipboardButton');
+require('../copy-button-DdBSM5yi.js');
+
+const PAYMENT_DASHBOARD_TAB = {
+  all: "all",
+  successful: "successful",
+  declined: "declined",
+  refunded: "refunded",
+  pending: "pending",
+  rejected: "rejected",
+  confirmation_pending: "confirmation_pending"
+};
+const SEARCH_PROPS = {
+  node: "identifier,",
+  key: "search_term",
+  model: "NeetoPaymentsEngine::Payment,"
+};
+const FILTER_COLUMNS = [{
+  key: "payment_provider",
+  label: i18next.t("neetoPayments.common.paymentProvider"),
+  node: "payment_provider",
+  type: "single_option",
+  values: [...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"
+}];
+const TAG_STYLE = {
+  initiated: "blue",
+  declined: "red",
+  successful: "green",
+  refunded: "secondary",
+  cancelled: "secondary",
+  pending: "amber",
+  paid: "green",
+  failed: "red",
+  in_transit: "blue",
+  rejected: "red",
+  confirmationPending: "amber",
+  authorized: "amber"
+};
+const PAYMENT_PROVIDER = {
+  eupi: "eupi"
+};
+const DEFAULT_BADGE_VARIANT = "amber";
+const DEFAULT_SORT_PROPERTIES = {
+  sortBy: "payment_at",
+  orderBy: "DESC"
+};
+
+const getTagStyle = status => TAG_STYLE[status] || DEFAULT_BADGE_VARIANT;
+const preProcessStatus = (type, status, record = {}) => {
+  if (type === "payment") {
+    return record.isRefunded ? "refunded" : status;
+  }
+  return neetocist.snakeToCamelCase(status);
+};
+const renderIdentifier = (identifier, {
+  receiptUrl,
+  paymentScreenshotUrl
+}) => {
+  const isTemporaryIdentifier = identifier?.startsWith("temp_");
+  if (isTemporaryIdentifier) {
+    return /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Tooltip, {
+      content: i18next.t("neetoPayments.tooltipContent.paymentIdentifierUnavailable"),
+      position: "top",
+      children: /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "text-center",
+        children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+          variant: "body2",
+          children: i18next.t("neetoPayments.common.notAvailable")
+        })
+      })
+    });
+  }
+  if (neetocist.isNotPresent(identifier) && neetocist.isPresent(paymentScreenshotUrl)) {
+    return /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Tooltip, {
+      content: i18next.t("neetoPayments.tooltipContent.screenshotUploadedByCustomer"),
+      position: "top",
+      children: /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "text-center",
+        children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+          variant: "body2",
+          children: "-"
+        })
+      })
+    });
+  }
+  return /*#__PURE__*/jsxRuntime.jsx(CopyButtonWrapper.CopyButtonWrapper, {
+    content: identifier,
+    children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Button, {
+      href: receiptUrl,
+      label: identifier,
+      size: "sm",
+      target: "_blank",
+      variant: "link"
+    })
+  });
+};
+const renderStatus = ramda.curry((type, status, record) => {
+  if (neetocist.isNotPresent(status)) {
+    return /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+      variant: "body2",
+      children: i18next.t("neetoPayments.common.notAvailable")
+    });
+  }
+  const processedStatus = preProcessStatus(type, status, record);
+  return /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Tooltip, {
+    content: i18next.t(`neetoPayments.tooltipContent.${type}.${processedStatus}`),
+    position: "top",
+    children: /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "w-fit",
+      children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Badge, {
+        variant: getTagStyle(neetocist.snakeToCamelCase(processedStatus)),
+        children: neetocist.humanize(i18next.t(`neetoPayments.tagLabels.${type}.${processedStatus}`))
+      })
+    })
+  });
+});
+const renderPaymentProvider = paymentProvider => {
+  if (paymentProvider === PAYMENT_PROVIDER.eupi) {
+    return i18next.t("neetoPayments.common.upi");
+  }
+  return neetocist.humanize(paymentProvider);
+};
+const renderDate = date => {
+  if (neetocist.isPresent(date)) {
+    return /*#__PURE__*/jsxRuntime.jsx(DateFormat.DateTime, {
+      date
+    });
+  }
+  return /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+    variant: "body2",
+    children: i18next.t("neetoPayments.common.notAvailable")
+  });
+};
+const renderPayoutTraceId = value => {
+  if (neetocist.isPresent(value)) return value;
+  return /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+    variant: "body2",
+    children: i18next.t("neetoPayments.common.notAvailable")
+  });
+};
+const getDefaultColumns = dashboardKind => {
+  let columns = [{
+    header: i18next.t("neetoPayments.common.id"),
+    id: "id",
+    accessorKey: "id",
+    size: 85,
+    position: 0,
+    enableHiding: false
+  }, {
+    header: i18next.t("neetoPayments.common.identifier"),
+    id: "identifier",
+    accessorKey: "identifier",
+    size: 300,
+    cell: ({
+      row
+    }) => renderIdentifier(row.getValue("identifier"), row.original),
+    position: 1,
+    enableHiding: false
+  }, {
+    header: i18next.t("neetoPayments.common.provider"),
+    id: "paymentProvider",
+    accessorKey: "paymentProvider",
+    size: 150,
+    cell: ({
+      row
+    }) => renderPaymentProvider(row.getValue("paymentProvider")),
+    position: 2
+  }, {
+    header: i18next.t("neetoPayments.common.status"),
+    id: "status",
+    accessorKey: "status",
+    size: 150,
+    cell: ({
+      row
+    }) => renderStatus("transaction")(row.getValue("status"), row.original),
+    enableSorting: true,
+    position: 3,
+    enableHiding: false
+  }, {
+    header: i18next.t("neetoPayments.common.totalAmount"),
+    id: "amount",
+    accessorKey: "amount",
+    size: 200,
+    cell: ({
+      row
+    }) => constants.formatAmount(row.getValue("amount")),
+    enableSorting: true,
+    position: 4
+  }, {
+    header: i18next.t("neetoPayments.common.taxAmount"),
+    id: "taxAmount",
+    accessorKey: "taxAmount",
+    size: 200,
+    cell: ({
+      row
+    }) => constants.formatAmount(row.getValue("taxAmount")),
+    enableSorting: true,
+    position: 4
+  }, {
+    header: i18next.t("neetoPayments.common.tipAmount"),
+    id: "tipAmount",
+    accessorKey: "tipAmount",
+    size: 200,
+    cell: ({
+      row
+    }) => constants.formatAmount(row.getValue("tipAmount")),
+    enableSorting: true,
+    position: 4
+  }, {
+    header: i18next.t("neetoPayments.common.currency"),
+    id: "currency",
+    accessorKey: "currency",
+    size: 180,
+    cell: ({
+      row
+    }) => constants.formatCurrency(row.getValue("currency")),
+    enableSorting: true,
+    position: 4
+  }, {
+    header: i18next.t("neetoPayments.common.paymentTime"),
+    id: "paymentTime",
+    accessorKey: "paymentAt",
+    size: 190,
+    cell: ({
+      row
+    }) => renderDate(row.getValue("paymentAt")),
+    enableSorting: true,
+    position: 6
+  }, {
+    header: i18next.t("neetoPayments.common.notes"),
+    id: "notes",
+    accessorKey: "notes",
+    size: 250,
+    position: 10
+  }];
+  if (dashboardKind === "connected") {
+    columns = ramda.concat([{
+      header: i18next.t("neetoPayments.common.payoutStatus"),
+      id: "payoutStatus",
+      accessorFn: row => row.payout?.status,
+      size: 200,
+      cell: ({
+        row
+      }) => renderStatus("payout")(row.original.payout?.status, row.original),
+      position: 7
+    }, {
+      header: i18next.t("neetoPayments.common.payoutArrivalDate"),
+      id: "payoutArrivalDate",
+      accessorFn: row => row.payout?.arrivalDate,
+      size: 235,
+      cell: ({
+        row
+      }) => renderDate(row.original.payout?.arrivalDate),
+      enableSorting: true,
+      position: 8
+    }, {
+      header: i18next.t("neetoPayments.common.payoutTraceId"),
+      id: "payoutTraceId",
+      accessorFn: row => row.payout?.traceId?.value,
+      size: 205,
+      cell: ({
+        row
+      }) => renderPayoutTraceId(row.original.payout?.traceId?.value),
+      position: 9
+    }], columns);
+  }
+  return columns;
+};
+
+const buildSearchProps = (searchProps, searchTerm) => ramda.mergeDeepWith(ramda.concat, SEARCH_PROPS, ramda.mergeLeft({
+  value: searchTerm.trim()
+}, searchProps));
+const buildFilterColumns = (payableEntityColumns = []) => ramda.reject(ramda.isNil, ramda.concat(FILTER_COLUMNS, ramda.map(ramda.prop("filterProps"), payableEntityColumns)));
+const buildRowData = ({
+  payments,
+  pageProperties = {}
+}) => payments?.map((element, index) => ({
+  ...element,
+  id: ramda.isEmpty(pageProperties) ? index + 1 : pageProperties.pageSize * (pageProperties.page - 1) + index + 1
+}));
+
+const List = ({
+  dashboardKind,
+  isFetching,
+  payments,
+  payableEntityColumns,
+  setSortProperties,
+  pageProperties,
+  handleTablePagination,
+  views
+}) => {
+  const {
+    t
+  } = reactI18next.useTranslation();
+  const {
+    tab = PAYMENT_DASHBOARD_TAB.all
+  } = utils.getQueryParams();
+  const paymentsCount = react.useMemo(() => views?.[tab], [views, tab]);
+  const defaultColumns = react.useMemo(() => getDefaultColumns(dashboardKind), [dashboardKind]);
+  const allColumns = react.useMemo(() => index.buildDefaultTableColumns({
+    payableEntityColumns,
+    defaultColumns,
+    isAllTab: tab === PAYMENT_DASHBOARD_TAB.all
+  }), [payableEntityColumns, defaultColumns, tab]);
+  const {
+    isTableConfigurationLoading,
+    customizedColumns,
+    hideColumn
+  } = Columns.useTableConfigurations(`${exportChannel.TABLE_KEYS.PAYMENTS_TABLE}-${tab}`, allColumns);
+  const rowData = react.useMemo(() => buildRowData({
+    payments,
+    pageProperties}), [payments, pageProperties, tab]);
+  if (neetocist.isNotPresent(payments)) {
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex h-full w-full items-center justify-center",
+      children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Empty, {
+        title: tab === PAYMENT_DASHBOARD_TAB.all ? t("neetoPayments.emptyState.payments") : t("neetoPayments.emptyState.paymentsWithStatus", {
+          status: neetocist.humanize(tab)
+        })
+      })
+    });
+  }
+  return /*#__PURE__*/jsxRuntime.jsx(TableWrapper, {
+    hasPagination: paymentsCount > pageProperties?.pageSize,
+    children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.DataTable, {
+      allowRowClick: false,
+      columns: customizedColumns,
+      currentPage: pageProperties?.page,
+      data: rowData,
+      enableURLPagination: false,
+      enableURLSort: false,
+      loading: isFetching || isTableConfigurationLoading,
+      totalCount: paymentsCount,
+      onColumnHide: id => hideColumn(id),
+      onPageChange: page => handleTablePagination(page, pageProperties?.pageSize),
+      onSort: sort => sort ? setSortProperties({
+        sortBy: neetocist.camelToSnakeCase(sort.field),
+        orderBy: sort.order === "ascend" ? "ASC" : "DESC"
+      }) : setSortProperties(DEFAULT_SORT_PROPERTIES)
+    })
+  });
+};
+
+const TopSection = ({
+  views,
+  filters,
+  setFilters,
+  filterableColumns,
+  searchKeywordProps,
+  payableEntityColumns,
+  setIsExportModalOpen,
+  dashboardKind
+}) => {
+  const [isFilterPaneOpen, setIsFilterPaneOpen] = react.useState(false);
+  const {
+    t
+  } = reactI18next.useTranslation();
+  const history = reactRouterDom.useHistory();
+  const {
+    tab = PAYMENT_DASHBOARD_TAB.all
+  } = utils.getQueryParams();
+  const paymentsCount = views?.[tab];
+  const isPaymentCountVisible = paymentsCount > 0 || paymentsCount === 0 && neetocist.isPresent(filters);
+  const isFilterButtonVisible = isPaymentCountVisible || neetocist.isPresent(filters);
+  const handleFiltersChange = filters => {
+    react.startTransition(() => {
+      setFilters(filters);
+    });
+  };
+  const handleTabChange = tab => {
+    const queryParams = utils.getQueryParams({
+      toCamelCase: false
+    });
+    const newParams = {
+      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__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(Header, {
+      title: t("neetoPayments.title.payments"),
+      searchProps: isFilterButtonVisible && {
+        placeholder: searchKeywordProps.placeholder,
+        className: searchKeywordProps.placeholder?.length > 30 ? "w-96" : "w-64"
+      }
+    }), constants.shouldTabsVisible(views) && /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Tabs, {
+      value: tab,
+      onValueChange: handleTabChange,
+      children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Tabs.List, {
+        children: Object.keys(PAYMENT_DASHBOARD_TAB).map(item => /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Tabs.Item, {
+          value: item,
+          children: t(`neetoPayments.common.${neetocist.snakeToCamelCase(item)}`)
+        }, item))
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(SubHeader, {
+      className: "my-4",
+      leftActionBlock: isPaymentCountVisible && /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+        className: "me-2 font-semibold",
+        variant: "body1",
+        children: tab === PAYMENT_DASHBOARD_TAB.all ? t("neetoPayments.countOf.payment", {
+          count: paymentsCount
+        }) : t("neetoPayments.countOf.paymentWithStatus", {
+          count: paymentsCount,
+          status: neetocist.humanize(tab)
+        })
+      }),
+      rightActionBlock: isFilterButtonVisible && /*#__PURE__*/jsxRuntime.jsx(SubHeader.RightBlock, {
+        columnsButtonProps: {
+          columnData: index.buildDefaultTableColumns({
+            defaultColumns: getDefaultColumns(dashboardKind),
+            payableEntityColumns,
+            isAllTab: tab === PAYMENT_DASHBOARD_TAB.all
+          }),
+          fixedColumns: constants.UN_HIDEABLE_COLUMNS,
+          tableKey: `${exportChannel.TABLE_KEYS.PAYMENTS_TABLE}-${tab}`
+        },
+        downloadButtonProps: {
+          onClick: () => setIsExportModalOpen(true)
+        },
+        filterProps: {
+          columns: filterableColumns,
+          isOpen: isFilterPaneOpen,
+          keyword: searchKeywordProps,
+          setIsOpen: setIsFilterPaneOpen,
+          onChange: handleFiltersChange
+        }
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(neetoFiltersFrontend.Bar, {
+      columns: filterableColumns,
+      keyword: searchKeywordProps,
+      setIsPaneOpen: setIsFilterPaneOpen,
+      onChange: handleFiltersChange
+    })]
+  });
+};
+
+const PaymentsDashboard = ({
+  searchProps,
+  payableEntityColumns,
+  holdableIds = {},
+  enforceFilterValues = [],
+  isIncludeAllHoldableIds = false,
+  dashboardKind = "platform"
+}) => {
+  const {
+    searchTerm = ""
+  } = utils.getQueryParams();
+  const filterableColumns = buildFilterColumns(payableEntityColumns);
+  const searchKeywordProps = buildSearchProps(searchProps, searchTerm);
+  const [sortProperties, setSortProperties] = react.useState(DEFAULT_SORT_PROPERTIES);
+  const [pageProperties, setPageProperties] = react.useState(constants.DEFAULT_PAGE_VALUES);
+  const [isExportModalOpen, setIsExportModalOpen] = react.useState(false);
+  const [filters, setFilters] = react.useState(neetoFiltersFrontend.buildFiltersFromURL([...filterableColumns, searchKeywordProps]));
+  const history = reactRouterDom.useHistory();
+  const {
+    tab = PAYMENT_DASHBOARD_TAB.all
+  } = utils.getQueryParams();
+  const apiFilters = react.useMemo(() => dashboard.mergeEnforcedFilters(filters, enforceFilterValues, filterableColumns), [filters, enforceFilterValues, filterableColumns]);
+  const payload = {
+    dashboardKind,
+    holdableIds,
+    isIncludeAllHoldableIds,
+    tab,
+    filters: apiFilters,
+    ...pageProperties,
+    ...sortProperties
+  };
+  const {
+    data: {
+      payments,
+      views
+    } = {},
+    isFetching,
+    isPending: isPaymentsLoading
+  } = usePaymentsApi.useFetchPayments(payload, {
+    enabled: true
+  });
+  const handleTablePagination = (page, pageSize) => {
+    const queryParams = utils.getQueryParams({
+      toCamelCase: false
+    });
+    history.push(utils.buildUrl(window.location.pathname, ramda.mergeLeft({
+      page,
+      page_size: pageSize
+    }, queryParams)));
+    setPageProperties({
+      page,
+      pageSize
+    });
+  };
+  react.useEffect(() => {
+    handleTablePagination(constants$1.DEFAULT_PAGE_INDEX, constants$1.DEFAULT_PAGE_SIZE);
+    setSortProperties(DEFAULT_SORT_PROPERTIES);
+  }, [filters, tab]);
+  if (isPaymentsLoading) {
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex h-full w-full items-center justify-center",
+      children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Spinner, {})
+    });
+  }
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(TopSection, {
+      dashboardKind,
+      filterableColumns,
+      filters,
+      pageProperties,
+      payableEntityColumns,
+      searchKeywordProps,
+      setFilters,
+      setIsExportModalOpen,
+      setPageProperties,
+      setSortProperties,
+      views
+    }), /*#__PURE__*/jsxRuntime.jsx(List, {
+      dashboardKind,
+      handleTablePagination,
+      isFetching,
+      pageProperties,
+      payableEntityColumns,
+      payments,
+      setSortProperties,
+      views
+    }), /*#__PURE__*/jsxRuntime.jsx(ExportModal.ExportModal, {
+      holdableIds,
+      isExportModalOpen,
+      setIsExportModalOpen,
+      sortProperties,
+      dashboardKind: constants.DASHBOARD_KIND.payments,
+      filters: apiFilters
+    })]
+  });
+};
+
+module.exports = PaymentsDashboard;
+//# sourceMappingURL=PaymentsDashboard.js.map