payment-kit 1.13.124 → 1.13.126

package/blocklet.yml

@@ -14,7 +14,7 @@ repository:
   type: git
   url: git+https://github.com/blocklet/payment-kit.git
 specVersion: 1.2.8
-version: 1.13.124
+version: 1.13.126
 logo: logo.png
 files:
   - dist

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.13.124",
+  "version": "1.13.126",
   "scripts": {
     "dev": "cross-env COMPONENT_STORE_URL=https://test.store.blocklet.dev blocklet dev",
     "eject": "vite eject",
@@ -50,7 +50,7 @@
     "@arcblock/jwt": "^1.18.108",
     "@arcblock/ux": "^2.9.19",
     "@blocklet/logger": "1.16.23-beta-aeb9f5bd",
-    "@blocklet/payment-react": "1.13.124",
+    "@blocklet/payment-react": "1.13.126",
     "@blocklet/sdk": "1.16.23-beta-aeb9f5bd",
     "@blocklet/ui-react": "^2.9.19",
     "@blocklet/uploader": "^0.0.67",
@@ -110,7 +110,7 @@
   "devDependencies": {
     "@abtnode/types": "1.16.23-beta-aeb9f5bd",
     "@arcblock/eslint-config-ts": "^0.2.4",
-    "@blocklet/payment-types": "1.13.124",
+    "@blocklet/payment-types": "1.13.126",
     "@types/cookie-parser": "^1.4.6",
     "@types/cors": "^2.8.17",
     "@types/dotenv-flow": "^3.3.3",
@@ -149,5 +149,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "aa43e00accb681c724d88facc2dd5b61519e17ef"
+  "gitHead": "efeb0d3762e61e2a6642330b86a41aa4f0847f36"
 }

package/src/components/invoice/action.tsx

@@ -1,6 +1,6 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import { api, formatError } from '@blocklet/payment-react';
+import { ConfirmDialog, api, formatError } from '@blocklet/payment-react';
 import type { TInvoiceExpanded } from '@blocklet/payment-types';
 import { useSetState } from 'ahooks';
 import { useNavigate } from 'react-router-dom';
@@ -8,7 +8,6 @@ import type { LiteralUnion } from 'type-fest';
 
 import Actions from '../actions';
 import ClickBoundary from '../click-boundary';
-import ConfirmDialog from '../confirm';
 
 type Props = {
   data: TInvoiceExpanded;

package/src/components/passport/actions.tsx

@@ -1,11 +1,10 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import { api, formatError } from '@blocklet/payment-react';
+import { ConfirmDialog, api, formatError } from '@blocklet/payment-react';
 import { useSetState } from 'ahooks';
 
 import Actions from '../actions';
 import ClickBoundary from '../click-boundary';
-import ConfirmDialog from '../confirm';
 
 type Props = {
   data: any;

package/src/components/passport/assign.tsx

@@ -1,12 +1,10 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import { api } from '@blocklet/payment-react';
+import { ConfirmDialog, api } from '@blocklet/payment-react';
 import { Alert, Box, CircularProgress, MenuItem, Select, Typography } from '@mui/material';
 import { useRequest } from 'ahooks';
 import { useEffect, useState } from 'react';
 
-import ConfirmDialog from '../confirm';
-
 const fetchData = (): Promise<any[]> => {
   return api.get('/api/passports').then((res) => res.data);
 };

package/src/components/payment-intent/actions.tsx

@@ -1,6 +1,6 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import { api, formatError } from '@blocklet/payment-react';
+import { ConfirmDialog, api, formatError } from '@blocklet/payment-react';
 import type { TPaymentIntentExpanded } from '@blocklet/payment-types';
 import { useSetState } from 'ahooks';
 import { useNavigate } from 'react-router-dom';
@@ -8,7 +8,6 @@ import type { LiteralUnion } from 'type-fest';
 
 import Actions from '../actions';
 import ClickBoundary from '../click-boundary';
-import ConfirmDialog from '../confirm';
 
 type Props = {
   data: TPaymentIntentExpanded;

package/src/components/payment-link/actions.tsx

@@ -1,6 +1,6 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import { api, formatError } from '@blocklet/payment-react';
+import { ConfirmDialog, api, formatError } from '@blocklet/payment-react';
 import type { TPaymentLinkExpanded } from '@blocklet/payment-types';
 import { useSetState } from 'ahooks';
 import Copy from 'copy-to-clipboard';
@@ -9,7 +9,6 @@ import { joinURL } from 'ufo';
 
 import Actions from '../actions';
 import ClickBoundary from '../click-boundary';
-import ConfirmDialog from '../confirm';
 import AssignPassportDialog from '../passport/assign';
 import RenamePaymentLink from './rename';
 

package/src/components/pricing-table/actions.tsx

@@ -1,6 +1,6 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import { api, formatError } from '@blocklet/payment-react';
+import { ConfirmDialog, api, formatError } from '@blocklet/payment-react';
 import type { TPricingTableExpanded } from '@blocklet/payment-types';
 import { useSetState } from 'ahooks';
 import Copy from 'copy-to-clipboard';
@@ -9,7 +9,6 @@ import { joinURL } from 'ufo';
 
 import Actions from '../actions';
 import ClickBoundary from '../click-boundary';
-import ConfirmDialog from '../confirm';
 import AssignPassportDialog from '../passport/assign';
 import RenamePricingTable from './rename';
 

package/src/components/product/actions.tsx

@@ -1,13 +1,12 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import { api, formatError } from '@blocklet/payment-react';
+import { ConfirmDialog, api, formatError } from '@blocklet/payment-react';
 import type { TProduct } from '@blocklet/payment-types';
 import { useSetState } from 'ahooks';
 import type { LiteralUnion } from 'type-fest';
 
 import Actions from '../actions';
 import ClickBoundary from '../click-boundary';
-import ConfirmDialog from '../confirm';
 import AssignPassportDialog from '../passport/assign';
 import EditProduct from './edit';
 

package/src/components/subscription/actions/index.tsx

@@ -1,6 +1,6 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import { api, formatError } from '@blocklet/payment-react';
+import { ConfirmDialog, api, formatError } from '@blocklet/payment-react';
 import type { TSubscriptionExpanded } from '@blocklet/payment-types';
 import { useSetState } from 'ahooks';
 import { FormProvider, useForm, useFormContext } from 'react-hook-form';
@@ -9,7 +9,6 @@ import type { LiteralUnion } from 'type-fest';
 
 import Actions from '../../actions';
 import ClickBoundary from '../../click-boundary';
-import ConfirmDialog from '../../confirm';
 import SubscriptionCancelForm from './cancel';
 import SubscriptionPauseForm from './pause';
 

package/src/components/subscription/items/usage-records.tsx

@@ -1,11 +1,10 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { api, formatToDatetime } from '@blocklet/payment-react';
+import { ConfirmDialog, api, formatToDatetime } from '@blocklet/payment-react';
 import type { TUsageRecord } from '@blocklet/payment-types';
 import { Alert, Box, Button, CircularProgress } from '@mui/material';
 import { useRequest } from 'ahooks';
 import { useState } from 'react';
 
-import ConfirmDialog from '../../confirm';
 import Table from '../../table';
 
 const fetchData = (subscriptionId: string, id: string): Promise<{ list: TUsageRecord[]; count: number }> => {

package/src/components/{portal/subscription → subscription/portal}/actions.tsx

@@ -1,14 +1,13 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import { api, formatError, formatToDate, getSubscriptionAction } from '@blocklet/payment-react';
+import { ConfirmDialog, api, formatError, formatToDate, getSubscriptionAction } from '@blocklet/payment-react';
 import type { TSubscriptionExpanded } from '@blocklet/payment-types';
 import { Button, Stack } from '@mui/material';
 import { useRequest, useSetState } from 'ahooks';
 import { FormProvider, useForm, useFormContext } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 
-import ConfirmDialog from '../../confirm';
 import CustomerCancelForm from './cancel';
 
 type Props = {

package/src/components/{portal/subscription → subscription/portal}/list.tsx

@@ -1,12 +1,17 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { Status, api, formatPrice, getSubscriptionTimeSummary } from '@blocklet/payment-react';
+import {
+  Status,
+  api,
+  formatPrice,
+  getSubscriptionStatusColor,
+  getSubscriptionTimeSummary,
+} from '@blocklet/payment-react';
 import type { Paginated, TSubscriptionExpanded } from '@blocklet/payment-types';
 import { Avatar, AvatarGroup, Box, Button, CircularProgress, Stack, StackProps, Typography } from '@mui/material';
 import { useInfiniteScroll } from 'ahooks';
 
-import { getSubscriptionStatusColor } from '../../../libs/util';
-import SubscriptionDescription from '../../subscription/description';
+import SubscriptionDescription from '../description';
 import SubscriptionActions from './actions';
 
 const fetchData = (params: Record<string, any> = {}): Promise<Paginated<TSubscriptionExpanded>> => {

package/src/pages/admin/products/prices/actions.tsx

@@ -1,13 +1,12 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import { api, formatError } from '@blocklet/payment-react';
+import { ConfirmDialog, api, formatError } from '@blocklet/payment-react';
 import type { TPrice } from '@blocklet/payment-types';
 import { useSetState } from 'ahooks';
 import noop from 'lodash/noop';
 import { useNavigate } from 'react-router-dom';
 
 import Actions from '../../../../components/actions';
-import ConfirmDialog from '../../../../components/confirm';
 import EditPrice from '../../../../components/product/edit-price';
 
 type Props = {

package/src/pages/customer/index.tsx

@@ -1,6 +1,6 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import { formatError } from '@blocklet/payment-react';
+import { CustomerInvoiceList, CustomerPaymentList, formatError } from '@blocklet/payment-react';
 import type { TCustomerExpanded } from '@blocklet/payment-types';
 import { Edit } from '@mui/icons-material';
 import { Alert, Box, Button, CircularProgress, Grid, Stack } from '@mui/material';
@@ -11,9 +11,8 @@ import { useNavigate } from 'react-router-dom';
 
 import EditCustomer from '../../components/customer/edit';
 import InfoRow from '../../components/info-row';
-import CustomerInvoiceList from '../../components/portal/invoice/list';
-import CurrentSubscriptions from '../../components/portal/subscription/list';
 import SectionHeader from '../../components/section/header';
+import CurrentSubscriptions from '../../components/subscription/portal/list';
 import { useSessionContext } from '../../contexts/session';
 import api from '../../libs/api';
 
@@ -88,6 +87,12 @@ export default function CustomerHome() {
               <CustomerInvoiceList customer_id={data.id} />
             </Box>
           </Box>
+          <Box className="section">
+            <SectionHeader title={t('payment.customer.payments')} mb={0} />
+            <Box className="section-body">
+              <CustomerPaymentList customer_id={data.id} />
+            </Box>
+          </Box>
         </Root>
       </Grid>
       <Grid item xs={12} md={4}>

package/src/pages/customer/subscription/detail.tsx

@@ -12,11 +12,11 @@ import TxLink from '../../../components/blockchain/tx';
 import Currency from '../../../components/currency';
 import InfoRow from '../../../components/info-row';
 import InvoiceList from '../../../components/invoice/list';
-import SubscriptionActions from '../../../components/portal/subscription/actions';
 import SectionHeader from '../../../components/section/header';
 import SubscriptionDescription from '../../../components/subscription/description';
 import SubscriptionItemList from '../../../components/subscription/items';
 import SubscriptionMetrics from '../../../components/subscription/metrics';
+import SubscriptionActions from '../../../components/subscription/portal/actions';
 import SubscriptionStatus from '../../../components/subscription/status';
 
 const fetchData = (id: string | undefined): Promise<TSubscriptionExpanded> => {

package/src/components/confirm.tsx

@@ -1,39 +0,0 @@
-import { Confirm } from '@arcblock/ux/lib/Dialog';
-import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { Typography } from '@mui/material';
-import type { EventHandler } from 'react';
-
-export default function ConfirmDialog({
-  onConfirm,
-  onCancel,
-  title,
-  message,
-  loading,
-}: {
-  onConfirm: EventHandler<any>;
-  onCancel: EventHandler<any>;
-  title: string | React.ReactNode;
-  message: string | React.ReactNode;
-  loading?: boolean;
-}) {
-  const { t } = useLocaleContext();
-
-  return (
-    <Confirm
-      open
-      title={title}
-      onConfirm={onConfirm}
-      onCancel={onCancel}
-      confirmButton={{
-        text: t('common.confirm'),
-        props: { color: 'error', size: 'small', variant: 'contained', disabled: !!loading },
-      }}
-      cancelButton={{ text: t('common.cancel'), props: { color: 'inherit', size: 'small' } }}>
-      <Typography>{message}</Typography>
-    </Confirm>
-  );
-}
-
-ConfirmDialog.defaultProps = {
-  loading: false,
-};

package/src/components/portal/invoice/list.tsx

@@ -1,124 +0,0 @@
-/* eslint-disable react/no-unstable-nested-components */
-import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { Status, api, formatToDate } from '@blocklet/payment-react';
-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 { Link } from 'react-router-dom';
-
-import { getInvoiceStatusColor } from '../../../libs/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) => 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">
-        {customer_id ? t('payment.customer.invoice.empty') : t('admin.invoice.empty')}
-      </Typography>
-    );
-  }
-
-  const hasMore = data && data.list.length < data.count;
-
-  const grouped = groupByDate(data.list);
-
-  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}>
-                <Link to={`/customer/invoice/${invoice.id}`}>
-                  <Typography component="span">{invoice.number}</Typography>
-                </Link>
-              </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('admin.invoices') })
-              : t('common.loadMore', { resource: t('admin.invoices') })}
-          </Button>
-        )}
-        {!hasMore && data.count > pageSize && (
-          <Typography color="text.secondary">{t('common.noMore', { resource: t('admin.invoices') })}</Typography>
-        )}
-      </Box>
-    </Stack>
-  );
-}