@blocklet/payment-react/lib/history/payment/list.js

Reusable react components for payment kit v2

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
module.exports = CustomerPaymentList;
var _jsxRuntime = require("react/jsx-runtime");
var _context = require("@arcblock/ux/lib/Locale/context");
var _material = require("@mui/material");
var _ahooks = require("ahooks");
var _tx = _interopRequireDefault(require("../../components/blockchain/tx"));
var _status = _interopRequireDefault(require("../../components/status"));
var _api = _interopRequireDefault(require("../../libs/api"));
var _util = require("../../libs/util");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const groupByDate = items => {
  const grouped = {};
  items.forEach(item => {
    const date = new Date(item.created_at).toLocaleDateString();
    if (!grouped[date]) {
      grouped[date] = [];
    }
    grouped[date]?.push(item);
  });
  return grouped;
};
const fetchData = (params = {}) => {
  const search = new URLSearchParams();
  Object.keys(params).forEach(key => {
    search.set(key, String(params[key]));
  });
  return _api.default.get(`/api/payment-intents?${search.toString()}`).then(res => res.data);
};
const pageSize = 10;
function CustomerPaymentList({
  customer_id
}) {
  const {
    t
  } = (0, _context.useLocaleContext)();
  const {
    data,
    loadMore,
    loadingMore,
    loading
  } = (0, _ahooks.useInfiniteScroll)(d => {
    const page = d ? Math.ceil(d.list.length / pageSize) + 1 : 1;
    return fetchData({
      page,
      pageSize,
      customer_id
    });
  }, {
    reloadDeps: [customer_id]
  });
  if (loading || !data) {
    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.CircularProgress, {});
  }
  if (data && data.list.length === 0) {
    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
      sx: {
        color: "text.secondary"
      },
      children: t("payment.customer.payment.empty")
    });
  }
  const hasMore = data && data.list.length < data.count;
  const grouped = groupByDate(data.list);
  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
    direction: "column",
    sx: {
      gap: 1,
      mt: 1
    },
    children: [Object.entries(grouped).map(([date, payments]) => /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
        sx: {
          fontWeight: "bold",
          color: "text.secondary",
          mt: 2,
          mb: 1
        },
        children: date
      }), payments.map(item => /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
        direction: {
          xs: "column",
          sm: "row"
        },
        sx: {
          gap: {
            xs: 0.5,
            sm: 1.5,
            md: 3
          },
          flexWrap: "nowrap",
          my: 1
        },
        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
          sx: {
            flex: 3
          },
          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
            children: (0, _util.formatToDate)(item.created_at)
          })
        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
          sx: {
            flex: 2
          },
          children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
            sx: {
              textAlign: "right"
            },
            children: [(0, _util.formatBNStr)(item.amount_received, item.paymentCurrency.decimal), "\xA0", item.paymentCurrency.symbol]
          })
        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
          sx: {
            flex: 3
          },
          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_status.default, {
            label: item.status,
            color: (0, _util.getPaymentIntentStatusColor)(item.status)
          })
        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
          sx: {
            flex: 3
          },
          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
            children: item.description || "-"
          })
        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
          sx: {
            flex: 3,
            minWidth: "220px"
          },
          children: (item.payment_details?.arcblock?.tx_hash || item.payment_details?.ethereum?.tx_hash || item.payment_details?.base?.tx_hash) && /* @__PURE__ */(0, _jsxRuntime.jsx)(_tx.default, {
            details: item.payment_details,
            method: item.paymentMethod,
            mode: "customer"
          })
        })]
      }, item.id))]
    }, date)), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
      children: [hasMore && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
        variant: "text",
        type: "button",
        color: "inherit",
        onClick: loadMore,
        disabled: loadingMore,
        children: loadingMore ? t("common.loadingMore", {
          resource: t("payment.customer.payments")
        }) : t("common.loadMore", {
          resource: t("payment.customer.payments")
        })
      }), !hasMore && data.count > pageSize && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
        sx: {
          color: "text.secondary"
        },
        children: t("common.noMore", {
          resource: t("payment.customer.payments")
        })
      })]
    })]
  });
}