@blocklet/payment-react 1.13.124 → 1.13.126

package/src/portal/invoice/list.tsx

@@ -0,0 +1,122 @@
+/* eslint-disable react/no-unstable-nested-components */
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import type { Paginated, TInvoiceExpanded } from '@blocklet/payment-types';
+import { Box, Button, CircularProgress, Stack, Typography } from '@mui/material';
+import { fromUnitToToken } from '@ocap/util';
+import { useInfiniteScroll } from 'ahooks';
+
+import api from '../../api';
+import Status from '../../components/status';
+import { formatToDate, getInvoiceStatusColor } from '../../util';
+
+const groupByDate = (items: TInvoiceExpanded[]) => {
+  const grouped: { [key: string]: TInvoiceExpanded[] } = {};
+  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: Record<string, any> = {}): Promise<Paginated<TInvoiceExpanded>> => {
+  const search = new URLSearchParams();
+  Object.keys(params).forEach((key) => {
+    search.set(key, String(params[key]));
+  });
+  return api.get(`/api/invoices?${search.toString()}`).then((res: any) => res.data);
+};
+
+type Props = {
+  customer_id: string;
+};
+
+const pageSize = 10;
+
+export default function CustomerInvoiceList({ customer_id }: Props) {
+  const { t } = useLocaleContext();
+
+  const { data, loadMore, loadingMore, loading } = useInfiniteScroll<Paginated<TInvoiceExpanded>>(
+    (d) => {
+      const page = d ? Math.ceil(d.list.length / pageSize) + 1 : 1;
+      return fetchData({ page, pageSize, status: 'open,paid,uncollectible', customer_id });
+    },
+    {
+      reloadDeps: [customer_id],
+    }
+  );
+
+  if (loading || !data) {
+    return <CircularProgress />;
+  }
+
+  if (data && data.list.length === 0) {
+    return <Typography color="text.secondary">{t('payment.customer.invoice.empty')}</Typography>;
+  }
+
+  const hasMore = data && data.list.length < data.count;
+
+  const grouped = groupByDate(data.list as any);
+
+  return (
+    <Stack direction="column" gap={1} sx={{ mt: 1 }}>
+      {Object.entries(grouped).map(([date, invoices]) => (
+        <Box key={date}>
+          <Typography sx={{ fontWeight: 'bold', color: 'text.secondary', mt: 2, mb: 1 }}>{date}</Typography>
+          {invoices.map((invoice) => (
+            <Stack
+              key={invoice.id}
+              direction={{
+                xs: 'column',
+                sm: 'row',
+              }}
+              sx={{ my: 1 }}
+              gap={{
+                xs: 0.5,
+                sm: 1.5,
+                md: 3,
+              }}
+              flexWrap="nowrap">
+              <Box flex={3}>
+                <a href={`/customer/invoice/${invoice.id}`}>
+                  <Typography component="span">{invoice.number}</Typography>
+                </a>
+              </Box>
+              <Box flex={3}>
+                <Typography>{formatToDate(invoice.created_at)}</Typography>
+              </Box>
+              <Box flex={2}>
+                <Typography textAlign="right">
+                  {fromUnitToToken(invoice.total, invoice.paymentCurrency.decimal)}&nbsp;
+                  {invoice.paymentCurrency.symbol}
+                </Typography>
+              </Box>
+              <Box flex={2}>
+                <Status label={invoice.status} color={getInvoiceStatusColor(invoice.status)} />
+              </Box>
+              <Box flex={4}>
+                <Typography>{invoice.description || invoice.id}</Typography>
+              </Box>
+            </Stack>
+          ))}
+        </Box>
+      ))}
+      <Box>
+        {hasMore && (
+          <Button variant="text" type="button" color="inherit" onClick={loadMore} disabled={loadingMore}>
+            {loadingMore
+              ? t('common.loadingMore', { resource: t('payment.customer.invoices') })
+              : t('common.loadMore', { resource: t('payament.customer.invoices') })}
+          </Button>
+        )}
+        {!hasMore && data.count > pageSize && (
+          <Typography color="text.secondary">
+            {t('common.noMore', { resource: t('payment.customer.invoices') })}
+          </Typography>
+        )}
+      </Box>
+    </Stack>
+  );
+}

package/src/portal/payment/list.tsx

@@ -0,0 +1,120 @@
+/* eslint-disable react/no-unstable-nested-components */
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import type { Paginated, TPaymentIntentExpanded } from '@blocklet/payment-types';
+import { Box, Button, CircularProgress, Stack, Typography } from '@mui/material';
+import { fromUnitToToken } from '@ocap/util';
+import { useInfiniteScroll } from 'ahooks';
+
+import api from '../../api';
+import Status from '../../components/status';
+import { formatToDate, getPaymentIntentStatusColor } from '../../util';
+
+const groupByDate = (items: TPaymentIntentExpanded[]) => {
+  const grouped: { [key: string]: TPaymentIntentExpanded[] } = {};
+  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: Record<string, any> = {}): Promise<Paginated<TPaymentIntentExpanded>> => {
+  const search = new URLSearchParams();
+  Object.keys(params).forEach((key) => {
+    search.set(key, String(params[key]));
+  });
+  return api.get(`/api/payment-intents?${search.toString()}`).then((res: any) => res.data);
+};
+
+type Props = {
+  customer_id: string;
+};
+
+const pageSize = 10;
+
+export default function CustomerPaymentList({ customer_id }: Props) {
+  const { t } = useLocaleContext();
+
+  const { data, loadMore, loadingMore, loading } = useInfiniteScroll<Paginated<TPaymentIntentExpanded>>(
+    (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 <CircularProgress />;
+  }
+
+  if (data && data.list.length === 0) {
+    return <Typography color="text.secondary">{t('payment.customer.payment.empty')}</Typography>;
+  }
+
+  const hasMore = data && data.list.length < data.count;
+
+  const grouped = groupByDate(data.list as any);
+
+  return (
+    <Stack direction="column" gap={1} sx={{ mt: 1 }}>
+      {Object.entries(grouped).map(([date, payments]) => (
+        <Box key={date}>
+          <Typography sx={{ fontWeight: 'bold', color: 'text.secondary', mt: 2, mb: 1 }}>{date}</Typography>
+          {payments.map((item) => (
+            <Stack
+              key={item.id}
+              direction={{
+                xs: 'column',
+                sm: 'row',
+              }}
+              sx={{ my: 1 }}
+              gap={{
+                xs: 0.5,
+                sm: 1.5,
+                md: 3,
+              }}
+              flexWrap="nowrap">
+              <Box flex={3} sx={{ minWidth: '220px' }}>
+                <Typography component="span">{item.id}</Typography>
+              </Box>
+              <Box flex={3}>
+                <Typography>{formatToDate(item.created_at)}</Typography>
+              </Box>
+              <Box flex={2}>
+                <Typography textAlign="right">
+                  {fromUnitToToken(item.amount, item.paymentCurrency.decimal)}&nbsp;
+                  {item.paymentCurrency.symbol}
+                </Typography>
+              </Box>
+              <Box flex={3}>
+                <Status label={item.status} color={getPaymentIntentStatusColor(item.status)} />
+              </Box>
+              <Box flex={4}>
+                <Typography>{item.description || item.id}</Typography>
+              </Box>
+            </Stack>
+          ))}
+        </Box>
+      ))}
+      <Box>
+        {hasMore && (
+          <Button variant="text" type="button" color="inherit" onClick={loadMore} disabled={loadingMore}>
+            {loadingMore
+              ? t('common.loadingMore', { resource: t('payment.customer.payments') })
+              : t('common.loadMore', { resource: t('payment.customer.payments') })}
+          </Button>
+        )}
+        {!hasMore && data.count > pageSize && (
+          <Typography color="text.secondary">
+            {t('common.noMore', { resource: t('payment.customer.payments') })}
+          </Typography>
+        )}
+      </Box>
+    </Stack>
+  );
+}

package/src/util.ts

@@ -256,6 +256,66 @@ export function formatLineItemPricing(
   };
 }
 
+export function getSubscriptionStatusColor(status: string) {
+  switch (status) {
+    case 'active':
+      return 'success';
+    case 'trialing':
+      return 'primary';
+    case 'incomplete':
+    case 'incomplete_expired':
+    case 'paused':
+      return 'warning';
+    case 'past_due':
+    case 'unpaid':
+      return 'error';
+    case 'canceled':
+    default:
+      return 'default';
+  }
+}
+
+export function getPaymentIntentStatusColor(status: string) {
+  switch (status) {
+    case 'succeeded':
+      return 'success';
+    case 'requires_payment_method':
+    case 'requires_confirmation':
+    case 'requires_action':
+    case 'requires_capture':
+      return 'warning';
+    case 'canceled':
+    case 'processing':
+    default:
+      return 'default';
+  }
+}
+
+export function getInvoiceStatusColor(status: string) {
+  switch (status) {
+    case 'paid':
+      return 'success';
+    case 'open':
+      return 'secondary';
+    case 'uncollectible':
+      return 'warning';
+    case 'draft':
+    case 'void':
+    default:
+      return 'default';
+  }
+}
+
+export function getWebhookStatusColor(status: string) {
+  switch (status) {
+    case 'enabled':
+      return 'success';
+    case 'disabled':
+    default:
+      return 'default';
+  }
+}
+
 export function getCheckoutAmount(
   items: TLineItemExpanded[],
   currency: TPaymentCurrency,