payment-kit 1.13.150 → 1.13.152

package/src/pages/customer/index.tsx

@@ -1,36 +1,50 @@
+import DID from '@arcblock/ux/lib/Address';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import { CustomerInvoiceList, CustomerPaymentList, formatError } from '@blocklet/payment-react';
-import type { TCustomerExpanded } from '@blocklet/payment-types';
+import {
+  CustomerInvoiceList,
+  CustomerPaymentList,
+  PaymentProvider,
+  formatError,
+  getPrefix,
+} from '@blocklet/payment-react';
+import type { GroupedBN, TCustomerExpanded } from '@blocklet/payment-types';
 import { Edit } from '@mui/icons-material';
-import { Alert, Box, Button, CircularProgress, Grid, Stack } from '@mui/material';
+import { Alert, Box, Button, CircularProgress, Grid, Stack, Tooltip } from '@mui/material';
 import { styled } from '@mui/system';
 import { useRequest, useSetState } from 'ahooks';
+import { isEmpty } from 'lodash';
+import { useEffect } from 'react';
 import { FlagEmoji } from 'react-international-phone';
 import { useNavigate } from 'react-router-dom';
+import { joinURL } from 'ufo';
 
+import BalanceList from '../../components/balance-list';
 import EditCustomer from '../../components/customer/edit';
+import InfoMetric from '../../components/info-metric';
 import InfoRow from '../../components/info-row';
 import SectionHeader from '../../components/section/header';
 import CurrentSubscriptions from '../../components/subscription/portal/list';
 import { useSessionContext } from '../../contexts/session';
 import api from '../../libs/api';
 
-const fetchData = (): Promise<TCustomerExpanded> => {
+const fetchData = (): Promise<TCustomerExpanded & { summary: { [key: string]: GroupedBN } }> => {
   return api.get('/api/customers/me').then((res) => res.data);
 };
 
 export default function CustomerHome() {
   const { t } = useLocaleContext();
-  const { events } = useSessionContext();
+  const { events, session, connectApi } = useSessionContext();
   const [state, setState] = useSetState({ editing: false, loading: false });
   const navigate = useNavigate();
 
   const { loading, error, data, runAsync } = useRequest(fetchData);
 
-  events.once('switch-did', () => {
-    runAsync().catch(console.error);
-  });
+  useEffect(() => {
+    events.once('switch-did', () => {
+      runAsync().catch(console.error);
+    });
+  }, []);
 
   if (error) {
     return <Alert severity="error">{formatError(error)}</Alert>;
@@ -82,7 +96,23 @@ export default function CustomerHome() {
             </Box>
           </Box>
           <Box className="section">
-            <SectionHeader title={t('payment.customer.invoices')} mb={0} />
+            <SectionHeader title={t('payment.customer.invoices')} mb={0}>
+              {isEmpty(data.summary.due) === false && (
+                <Tooltip title={t('payment.customer.pastDue.warning')}>
+                  <Button
+                    variant="contained"
+                    color="error"
+                    component="a"
+                    size="small"
+                    href={joinURL(window.location.origin, getPrefix(), '/customer/invoice/past-due')}
+                    target="_blank"
+                    rel="noreferrer"
+                    style={{ textDecoration: 'none' }}>
+                    {t('payment.customer.pastDue.invoices')}
+                  </Button>
+                </Tooltip>
+              )}
+            </SectionHeader>
             <Box className="section-body">
               <CustomerInvoiceList customer_id={data.id} />
             </Box>
@@ -110,6 +140,7 @@ export default function CustomerHome() {
               </Button>
             </SectionHeader>
             <Stack>
+              <InfoRow sizes={[1, 2]} label={t('common.did')} value={<DID copyable>{data.did}</DID>} />
               <InfoRow sizes={[1, 2]} label={t('admin.customer.name')} value={data.name} />
               <InfoRow sizes={[1, 2]} label={t('admin.customer.phone')} value={data.phone} />
               <InfoRow sizes={[1, 2]} label={t('admin.customer.email')} value={data.email} />
@@ -143,6 +174,21 @@ export default function CustomerHome() {
               />
             )}
           </Box>
+          <Box className="section">
+            <SectionHeader title={t('payment.customer.summary')} />
+            <PaymentProvider session={session} connect={connectApi}>
+              <Stack
+                className="section-body"
+                direction="column"
+                spacing={2}
+                justifyContent="flex-start"
+                sx={{ width: '100%' }}>
+                <InfoMetric label={t('admin.customer.spent')} value={<BalanceList data={data.summary.paid} />} />
+                <InfoMetric label={t('admin.customer.due')} value={<BalanceList data={data.summary.due} />} />
+                <InfoMetric label={t('admin.customer.refund')} value={<BalanceList data={data.summary.refunded} />} />
+              </Stack>
+            </PaymentProvider>
+          </Box>
         </Root>
       </Grid>
     </Grid>

package/src/pages/customer/invoice/past-due.tsx

@@ -0,0 +1,77 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { CustomerInvoiceList, formatError } from '@blocklet/payment-react';
+import type { TCustomerExpanded } from '@blocklet/payment-types';
+import { ArrowBackOutlined } from '@mui/icons-material';
+import { Alert, Box, CircularProgress, Stack, Typography } from '@mui/material';
+import { styled } from '@mui/system';
+import { useRequest } from 'ahooks';
+import { useEffect } from 'react';
+import { Link } from 'react-router-dom';
+
+import SectionHeader from '../../../components/section/header';
+import { useSessionContext } from '../../../contexts/session';
+import api from '../../../libs/api';
+
+const fetchData = (): Promise<TCustomerExpanded> => {
+  return api.get('/api/customers/me').then((res) => res.data);
+};
+
+export default function CustomerInvoicePastDue() {
+  const { t } = useLocaleContext();
+  const { events } = useSessionContext();
+
+  const { loading, error, data, runAsync } = useRequest(fetchData);
+
+  useEffect(() => {
+    events.once('switch-did', () => {
+      runAsync().catch(console.error);
+    });
+  }, []);
+
+  if (error) {
+    return <Alert severity="error">{formatError(error)}</Alert>;
+  }
+
+  if (loading) {
+    return <CircularProgress />;
+  }
+
+  if (!data) {
+    return (
+      <Alert sx={{ mt: 3 }} severity="info">
+        {t('payment.customer.empty')}
+      </Alert>
+    );
+  }
+
+  return (
+    <Stack direction="column" spacing={3} sx={{ my: 2, maxWidth: '960px' }}>
+      <Link to="/customer">
+        <Stack direction="row" alignItems="center" sx={{ fontWeight: 'normal' }}>
+          <ArrowBackOutlined fontSize="small" sx={{ mr: 0.5, color: 'text.secondary' }} />
+          <Typography variant="h6" sx={{ color: 'text.secondary', fontWeight: 'normal' }}>
+            {t('common.previous')}
+          </Typography>
+        </Stack>
+      </Link>
+      <Root direction="column" spacing={3}>
+        <Box className="section">
+          <SectionHeader title={t('payment.customer.pastDue.invoices')} mb={0}>
+            <Typography variant="body1" color="error">
+              {t('payment.customer.pastDue.warning')}
+            </Typography>
+          </SectionHeader>
+          <Box className="section-body">
+            <CustomerInvoiceList customer_id={data.id} pageSize={100} status="uncollectible" target="_blank" />
+          </Box>
+        </Box>
+      </Root>
+    </Stack>
+  );
+}
+
+const Root = styled(Stack)`
+  a {
+    text-decoration: underline;
+  }
+`;

package/src/pages/customer/invoice.tsx

@@ -4,7 +4,7 @@ import Toast from '@arcblock/ux/lib/Toast';
 import { Status, TxLink, api, formatError, formatTime, getInvoiceStatusColor } from '@blocklet/payment-react';
 import type { TInvoiceExpanded } from '@blocklet/payment-types';
 import { ArrowBackOutlined } from '@mui/icons-material';
-import { Alert, Box, Button, CircularProgress, Grid, Stack, Typography } from '@mui/material';
+import { Alert, Box, Button, CircularProgress, Stack, Typography } from '@mui/material';
 import { useRequest, useSetState } from 'ahooks';
 import { useEffect } from 'react';
 import { Link, useParams, useSearchParams } from 'react-router-dom';
@@ -14,13 +14,14 @@ import InfoRow from '../../components/info-row';
 import InvoiceTable from '../../components/invoice/table';
 import SectionHeader from '../../components/section/header';
 import { useSessionContext } from '../../contexts/session';
+import CustomerRefundList from './refund/list';
 
 const fetchData = (id: string): Promise<TInvoiceExpanded> => {
   return api.get(`/api/invoices/${id}`).then((res) => res.data);
 };
 
 // TODO: download feature using: https://react-pdf.org/
-export default function CustomerHome() {
+export default function CustomerInvoiceDetail() {
   const { t } = useLocaleContext();
   const [searchParams] = useSearchParams();
   const { connectApi } = useSessionContext();
@@ -89,58 +90,22 @@ export default function CustomerHome() {
   }
 
   return (
-    <Grid container spacing={3} sx={{ mt: 1 }}>
-      <Grid item xs={12} md={12}>
+    <Stack direction="column" spacing={3} sx={{ my: 2, maxWidth: 'lg' }}>
+      <Stack direction="row" justifyContent="space-between">
         <Link to="/customer">
-          <Stack direction="row" alignItems="center" sx={{ fontWeight: 'normal' }}>
+          <Stack direction="row" alignItems="center" sx={{ fontWeight: 'normal', padding: '10px 0' }}>
             <ArrowBackOutlined fontSize="small" sx={{ mr: 0.5, color: 'text.secondary' }} />
             <Typography variant="h6" sx={{ color: 'text.secondary', fontWeight: 'normal' }}>
               {t('common.previous')}
             </Typography>
           </Stack>
         </Link>
-      </Grid>
-      <Grid item xs={12} md={5}>
-        <Box>
-          <SectionHeader title={t('payment.customer.invoice.summary')} mb={0} />
-          <Stack sx={{ mt: 1 }}>
-            <InfoRow label={t('admin.invoice.number')} value={data.number} />
-            <InfoRow label={t('admin.invoice.from')} value={data.statement_descriptor || blocklet.appName} />
-            <InfoRow label={t('admin.invoice.customer')} value={data.customer.name} />
-            <InfoRow
-              label={t('common.status')}
-              value={<Status label={data.status} color={getInvoiceStatusColor(data.status)} />}
-            />
-            <InfoRow
-              label={t('admin.subscription.currentPeriod')}
-              value={
-                data.period_start && data.period_end
-                  ? [formatTime(data.period_start * 1000), formatTime(data.period_end * 1000)].join(' ~ ')
-                  : ''
-              }
-            />
-            {data.status_transitions?.paid_at && (
-              <InfoRow label={t('admin.invoice.paidAt')} value={formatTime(data.status_transitions.paid_at * 1000)} />
-            )}
-            <InfoRow
-              label={t('admin.paymentCurrency.name')}
-              value={<Currency logo={data.paymentCurrency.logo} name={data.paymentCurrency.symbol} />}
-            />
-            <InfoRow
-              label={t('common.txHash')}
-              value={
-                data.paymentIntent?.payment_details ? (
-                  <TxLink details={data.paymentIntent.payment_details} method={data.paymentMethod} mode="customer" />
-                ) : (
-                  ''
-                )
-              }
-            />
-          </Stack>
-        </Box>
-      </Grid>
-      <Grid item xs={12} md={7}>
-        <SectionHeader title={t('payment.customer.invoice.details')} mb={0}>
+        <Stack direction="row" justifyContent="flex-end" alignItems="center">
+          {['open', 'uncollectible'].includes(data.status) && (
+            <Button variant="contained" color="primary" disabled={state.paying} onClick={onPay}>
+              {t('payment.customer.invoice.pay')}
+            </Button>
+          )}
           {['open', 'paid', 'uncollectible'].includes(data.status) && (
             <Button
               variant="contained"
@@ -151,16 +116,53 @@ export default function CustomerHome() {
               {t('payment.customer.invoice.download')}
             </Button>
           )}
-        </SectionHeader>
-        <InvoiceTable invoice={data} simple />
-        <Stack direction="row" justifyContent="flex-end" alignItems="center" mt={2}>
-          {['open', 'uncollectible'].includes(data.status) && (
-            <Button variant="contained" color="primary" disabled={state.paying} onClick={onPay}>
-              {t('payment.customer.invoice.pay')}
-            </Button>
+        </Stack>
+      </Stack>
+      <Box>
+        <SectionHeader title={t('payment.customer.invoice.summary')} />
+        <Stack sx={{ mt: 1, display: 'grid', gridTemplateColumns: '50% 50%' }}>
+          <InfoRow label={t('admin.invoice.number')} value={data.number} />
+          <InfoRow label={t('admin.invoice.from')} value={data.statement_descriptor || blocklet.appName} />
+          <InfoRow label={t('admin.invoice.customer')} value={data.customer.name} />
+          <InfoRow
+            label={t('common.status')}
+            value={<Status label={data.status} color={getInvoiceStatusColor(data.status)} />}
+          />
+          {data.period_start > 0 && data.period_end > 0 && (
+            <InfoRow
+              label={t('admin.subscription.currentPeriod')}
+              value={[formatTime(data.period_start * 1000), formatTime(data.period_end * 1000)].join(' ~ ')}
+            />
           )}
+          {data.status_transitions?.paid_at && (
+            <InfoRow label={t('admin.invoice.paidAt')} value={formatTime(data.status_transitions.paid_at * 1000)} />
+          )}
+          <InfoRow
+            label={t('admin.paymentCurrency.name')}
+            value={<Currency logo={data.paymentCurrency.logo} name={data.paymentCurrency.symbol} />}
+          />
+          <InfoRow
+            label={t('common.txHash')}
+            value={
+              data.paymentIntent?.payment_details ? (
+                <TxLink details={data.paymentIntent.payment_details} method={data.paymentMethod} mode="customer" />
+              ) : (
+                ''
+              )
+            }
+          />
         </Stack>
-      </Grid>
-    </Grid>
+      </Box>
+      <Box>
+        <SectionHeader title={t('payment.customer.invoice.details')} />
+        <InvoiceTable invoice={data} simple />
+      </Box>
+      <Box className="section">
+        <SectionHeader title={t('admin.refunds')} mb={0} mt={0} />
+        <Box className="section-body">
+          <CustomerRefundList invoice_id={data.id} />
+        </Box>
+      </Box>
+    </Stack>
   );
 }

package/src/pages/customer/refund/list.tsx

@@ -0,0 +1,125 @@
+/* eslint-disable react/no-unstable-nested-components */
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { Status, TxLink, api, formatToDate, getPaymentIntentStatusColor } from '@blocklet/payment-react';
+import type { Paginated, PaymentDetails, TPaymentIntentExpanded } from '@blocklet/payment-types';
+import { Box, Button, CircularProgress, Stack, Typography } from '@mui/material';
+import { fromUnitToToken } from '@ocap/util';
+import { useInfiniteScroll } from 'ahooks';
+
+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/refunds?${search.toString()}`).then((res) => res.data);
+};
+
+type Props = {
+  invoice_id: string;
+};
+
+const pageSize = 10;
+
+export default function CustomerRefundList({ invoice_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, invoice_id });
+    },
+    {
+      reloadDeps: [invoice_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: any) => {
+            return (
+              <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}>
+                  <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={3}>
+                  <Typography>{item.description || '-'}</Typography>
+                </Box>
+                <Box flex={3} sx={{ minWidth: '220px' }}>
+                  {item.payment_details?.arcblock?.tx_hash && (
+                    <TxLink
+                      details={item.payment_details as PaymentDetails}
+                      method={item.paymentMethod}
+                      mode="customer"
+                    />
+                  )}
+                </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>
+  );
+}