payment-kit 1.13.209 → 1.13.211

package/src/components/invoice/list.tsx

@@ -230,6 +230,8 @@ export default function InvoiceList({
   return (
     <Table
       data={data.list}
+      durable={`__${listKey}__`}
+      durableKeys={['searchText']}
       columns={columns}
       loading={!data.list}
       onChange={onTableChange}

package/src/components/invoice/table.tsx

@@ -93,7 +93,7 @@ export default function InvoiceTable({ invoice, simple }: Props) {
             </TableCell>
             <TableCell align="right">
               {!line.proration
-                ? formatAmount(getPriceUintAmountByCurrency(line.price, invoice.paymentCurrency), invoice.paymentCurrency.decimal) // prettier-ignore
+                ? formatAmount(getPriceUintAmountByCurrency(line.price, invoice.paymentCurrency) || line.amount, invoice.paymentCurrency.decimal) // prettier-ignore
                 : ''}
             </TableCell>
             <TableCell align="right">{formatAmount(line.amount, invoice.paymentCurrency.decimal)}</TableCell>

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

@@ -203,6 +203,8 @@ export default function PaymentList({ customer_id, invoice_id, features }: ListP
   return (
     <Table
       data={data.list || []}
+      durable={`__${listKey}__`}
+      durableKeys={['searchText']}
       columns={columns}
       loading={!data.list}
       onChange={onTableChange}

package/src/components/payouts/actions.tsx

@@ -0,0 +1,43 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import type { TPayoutExpanded } from '@blocklet/payment-types';
+import { useNavigate } from 'react-router-dom';
+import type { LiteralUnion } from 'type-fest';
+
+import Actions from '../actions';
+import ClickBoundary from '../click-boundary';
+
+type Props = {
+  data: TPayoutExpanded;
+  variant?: LiteralUnion<'compact' | 'normal', string>;
+};
+
+PayoutActions.defaultProps = {
+  variant: 'compact',
+};
+
+export default function PayoutActions({ data, variant }: Props) {
+  const { t } = useLocaleContext();
+  const navigate = useNavigate();
+  const actions = [
+    {
+      label: t('admin.customer.view'),
+      handler: () => navigate(`/admin/customers/${data.customer_id}`),
+      color: 'primary',
+      disabled: false,
+    },
+  ];
+  if (variant === 'compact') {
+    actions.push({
+      label: t('admin.paymentIntent.view'),
+      handler: () => navigate(`/admin/payments/${data.id}`),
+      color: 'primary',
+      disabled: false,
+    });
+  }
+
+  return (
+    <ClickBoundary>
+      <Actions variant={variant} actions={actions} />
+    </ClickBoundary>
+  );
+}

package/src/components/payouts/list.tsx

@@ -0,0 +1,255 @@
+/* eslint-disable react/no-unstable-nested-components */
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { Status, api, formatBNStr, formatTime, getPayoutStatusColor } from '@blocklet/payment-react';
+import type { TPayoutExpanded } from '@blocklet/payment-types';
+import { CircularProgress, Typography } from '@mui/material';
+import { useLocalStorageState } from 'ahooks';
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { debounce } from '../../libs/util';
+import CustomerLink from '../customer/link';
+import FilterToolbar from '../filter-toolbar';
+import { useTransitionContext } from '../progress-bar';
+import Table from '../table';
+import PayoutActions from './actions';
+
+const fetchData = (params: Record<string, any> = {}): Promise<{ list: TPayoutExpanded[]; count: number }> => {
+  const search = new URLSearchParams();
+  Object.keys(params).forEach((key) => {
+    let v = params[key];
+    if (key === 'q') {
+      v = Object.entries(v)
+        .map((x) => x.join(':'))
+        .join(' ');
+    }
+    search.set(key, String(v));
+  });
+  return api.get(`/api/payouts?${search.toString()}`).then((res) => res.data);
+};
+
+type SearchProps = {
+  status?: string;
+  pageSize: number;
+  page: number;
+  customer_id?: string;
+  payment_intent_id?: string;
+  q?: any;
+  o?: any;
+};
+
+type ListProps = {
+  features?: {
+    customer?: boolean;
+    toolbar?: boolean;
+    filter?: boolean;
+    footer?: boolean;
+  };
+  customer_id?: string;
+  payment_intent_id?: string;
+};
+
+const getListKey = (props: ListProps) => {
+  if (props.customer_id) {
+    return `customer-payouts-${props.customer_id}`;
+  }
+  if (props.payment_intent_id) {
+    return `intent-payouts-${props.payment_intent_id}`;
+  }
+
+  return 'payouts';
+};
+
+PaymentList.defaultProps = {
+  features: {
+    customer: true,
+    filter: true,
+  },
+  customer_id: '',
+  payment_intent_id: '',
+};
+
+export default function PaymentList({ customer_id, payment_intent_id, features }: ListProps) {
+  const { t } = useLocaleContext();
+  const navigate = useNavigate();
+
+  const listKey = getListKey({ customer_id, payment_intent_id });
+  const [search, setSearch] = useLocalStorageState<SearchProps>(listKey, {
+    defaultValue: {
+      status: '',
+      customer_id,
+      payment_intent_id,
+      pageSize: 20,
+      page: 1,
+    },
+  });
+
+  const { startTransition } = useTransitionContext();
+  const [data, setData] = useState({}) as any;
+
+  useEffect(() => {
+    debounce(() => {
+      fetchData(search).then((res: any) => {
+        setData(res);
+      });
+    }, 300)();
+  }, [search]);
+
+  if (!data.list) {
+    return <CircularProgress />;
+  }
+
+  const columns = [
+    {
+      label: t('common.amount'),
+      name: 'id',
+      align: 'right',
+      width: 60,
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = data.list[index] as TPayoutExpanded;
+          return (
+            <Typography component="strong" fontWeight={600}>
+              {formatBNStr(item.amount, item?.paymentCurrency.decimal)}
+              &nbsp;
+              {item?.paymentCurrency.symbol}
+            </Typography>
+          );
+        },
+      },
+    },
+    {
+      label: t('common.status'),
+      name: 'status',
+      width: 60,
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = data.list[index] as TPayoutExpanded;
+          return <Status label={item.status} color={getPayoutStatusColor(item.status)} />;
+        },
+      },
+    },
+    {
+      label: t('common.description'),
+      name: 'description',
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = data.list[index] as TPayoutExpanded;
+          return item.description || item.id;
+        },
+      },
+    },
+    {
+      label: t('common.createdAt'),
+      name: 'created_at',
+      options: {
+        sort: true,
+        customBodyRender: (e: string) => {
+          return formatTime(e);
+        },
+      },
+    },
+    {
+      label: t('common.updatedAt'),
+      name: 'updated_at',
+      options: {
+        sort: true,
+        customBodyRender: (e: string) => {
+          return formatTime(e);
+        },
+      },
+    },
+    {
+      label: t('common.actions'),
+      name: '',
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = data.list[index] as TPayoutExpanded;
+          return <PayoutActions data={item} />;
+        },
+      },
+    },
+  ];
+
+  if (features?.customer) {
+    columns.splice(3, 0, {
+      label: t('common.customer'),
+      name: 'customer_id',
+      options: {
+        filter: true,
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = data.list[index] as TPayoutExpanded;
+          return item.customer ? <CustomerLink customer={item.customer} /> : item.destination;
+        },
+      } as any,
+    });
+  }
+
+  const onTableChange = ({ page, rowsPerPage }: any) => {
+    if (search!.pageSize !== rowsPerPage) {
+      setSearch((x) => ({ ...x, pageSize: rowsPerPage, page: 1 }));
+    } else if (search!.page !== page + 1) {
+      // @ts-ignore
+      setSearch((x) => ({ ...x, page: page + 1 }));
+    }
+  };
+
+  return (
+    <Table
+      data={data.list || []}
+      columns={columns}
+      loading={!data.list}
+      onChange={onTableChange}
+      options={{
+        count: data.count,
+        page: search!.page - 1,
+        rowsPerPage: search!.pageSize,
+        onSearchChange: (text: string) => {
+          if (text) {
+            setSearch({
+              q: {
+                'like-description': text,
+                'like-metadata': text,
+              },
+              pageSize: 100,
+              page: 1,
+            });
+          } else {
+            setSearch({
+              status: '',
+              customer_id,
+              payment_intent_id,
+              pageSize: 100,
+              page: 1,
+            });
+          }
+        },
+        onColumnSortChange(_: any, order: any) {
+          setSearch({
+            ...search!,
+            q: search!.q || {},
+            o: order,
+          });
+        },
+        onRowClick: (_: any, { dataIndex }: any) => {
+          const item = data.list[dataIndex] as TPayoutExpanded;
+          startTransition(() => {
+            navigate(`/admin/payments/${item.id}`);
+          });
+        },
+      }}
+      toolbar={features?.toolbar}
+      footer={features?.footer}
+      title={
+        features?.filter && (
+          <FilterToolbar
+            setSearch={setSearch}
+            search={search}
+            status={['paid', 'pending', 'failed', 'canceled']}
+            currency
+          />
+        )
+      }
+    />
+  );
+}

package/src/components/refund/list.tsx

@@ -193,6 +193,8 @@ export default function RefundList({ customer_id, invoice_id, subscription_id, f
   return (
     <Table
       data={data.list}
+      durable={`__${listKey}__`}
+      durableKeys={['searchText']}
       columns={columns}
       loading={!data.list}
       onChange={onTableChange}

package/src/components/subscription/list.tsx

@@ -188,6 +188,8 @@ export default function SubscriptionList({ customer_id, features, status }: List
       columns={columns}
       loading={!data.list}
       onChange={onTableChange}
+      durable={`__${listKey}__`}
+      durableKeys={['searchText']}
       options={{
         count: data.count,
         page: search!.page - 1,

package/src/libs/util.ts

@@ -187,5 +187,8 @@ export const debounce = (fun: Function, wait: number) => {
 };
 
 export function canChangePaymentMethod(subscription: TSubscriptionExpanded) {
-  return subscription.items.every((x) => getPriceCurrencyOptions(x.price).length > 1);
+  return (
+    ['active', 'trialing'].includes(subscription.status) &&
+    subscription.items.every((x) => getPriceCurrencyOptions(x.price).length > 1)
+  );
 }

package/src/locales/en.tsx

@@ -29,6 +29,7 @@ export default flat({
     webhooks: 'Webhooks',
     events: 'Events',
     refunds: 'Refunds',
+    payouts: 'Payouts',
     logs: 'Logs',
     passports: 'Passports',
     details: 'Details',
@@ -239,6 +240,12 @@ export default flat({
       refund: 'Refund payment',
       received: 'Received',
     },
+    payout: {
+      list: 'Payouts',
+      name: 'Payout',
+      view: 'View payout',
+      empty: 'No payout',
+    },
     paymentMethod: {
       _name: 'Payment Method',
       type: 'Type',

package/src/locales/zh.tsx

@@ -203,6 +203,12 @@ export default flat({
         placeholder: '不向消费者展示',
       },
     },
+    payout: {
+      list: '对外支付',
+      name: '对外支付',
+      view: '查看对外支付',
+      empty: '没有记录',
+    },
     pricingTable: {
       view: '查看定价表',
       add: '创建定价表',

package/src/pages/admin/customers/customers/index.tsx

@@ -110,8 +110,8 @@ export default function CustomersList() {
 
   return (
     <Table
-      durable={listKey}
-      durableKeys={['page', 'rowsPerPage']}
+      durable={`__${listKey}__`}
+      durableKeys={['page', 'rowsPerPage', 'searchText']}
       data={data.list}
       columns={columns}
       options={{

package/src/pages/admin/payments/index.tsx

@@ -8,10 +8,12 @@ import { useTransitionContext } from '../../../components/progress-bar';
 
 const PaymentIntentDetail = React.lazy(() => import('./intents/detail'));
 const RefundDetail = React.lazy(() => import('./refunds/detail'));
+const PayoutDetail = React.lazy(() => import('./payouts/detail'));
 
 const pages = {
   intents: React.lazy(() => import('./intents')),
   refunds: React.lazy(() => import('./refunds')),
+  payouts: React.lazy(() => import('./payouts')),
 };
 
 export default function PaymentIndex() {
@@ -24,6 +26,10 @@ export default function PaymentIndex() {
     return <PaymentIntentDetail id={page} />;
   }
 
+  if (page.startsWith('po_')) {
+    return <PayoutDetail id={page} />;
+  }
+
   if (page.startsWith('re_')) {
     return <RefundDetail id={page} />;
   }
@@ -39,6 +45,7 @@ export default function PaymentIndex() {
   const tabs = [
     { label: t('admin.paymentIntent.list'), value: 'intents' },
     { label: t('admin.refunds'), value: 'refunds' },
+    { label: t('admin.payouts'), value: 'payouts' },
   ];
 
   return (

package/src/pages/admin/payments/intents/detail.tsx

@@ -27,6 +27,7 @@ import InfoRow from '../../../../components/info-row';
 import MetadataEditor from '../../../../components/metadata/editor';
 import MetadataList from '../../../../components/metadata/list';
 import PaymentIntentActions from '../../../../components/payment-intent/actions';
+import PayoutList from '../../../../components/payouts/list';
 import SectionHeader from '../../../../components/section/header';
 
 const fetchData = (id: string): Promise<TPaymentIntentExpanded> => {
@@ -199,6 +200,12 @@ export default function PaymentIntentDetail(props: { id: string }) {
           )}
         </Stack>
       </Box>
+      <Box className="section">
+        <SectionHeader title={t('admin.payouts')} />
+        <Box className="section-body">
+          <PayoutList features={{ toolbar: false }} payment_intent_id={data.id} />
+        </Box>
+      </Box>
       <Box className="section">
         <SectionHeader title={t('admin.events')} />
         <Box className="section-body">

package/src/pages/admin/payments/payouts/detail.tsx

@@ -0,0 +1,204 @@
+/* eslint-disable react/no-unstable-nested-components */
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Toast from '@arcblock/ux/lib/Toast';
+import {
+  Amount,
+  Status,
+  TxLink,
+  api,
+  formatBNStr,
+  formatError,
+  formatTime,
+  getPayoutStatusColor,
+} from '@blocklet/payment-react';
+import type { TPayoutExpanded } from '@blocklet/payment-types';
+import { ArrowBackOutlined, Edit, InfoOutlined } from '@mui/icons-material';
+import { Alert, Box, Button, CircularProgress, Stack, Tooltip, Typography } from '@mui/material';
+import { styled } from '@mui/system';
+import { useRequest, useSetState } from 'ahooks';
+import { Link } from 'react-router-dom';
+
+import Copyable from '../../../../components/copyable';
+import Currency from '../../../../components/currency';
+import CustomerLink from '../../../../components/customer/link';
+import EventList from '../../../../components/event/list';
+import InfoMetric from '../../../../components/info-metric';
+import InfoRow from '../../../../components/info-row';
+import MetadataEditor from '../../../../components/metadata/editor';
+import MetadataList from '../../../../components/metadata/list';
+import SectionHeader from '../../../../components/section/header';
+
+const fetchData = (id: string): Promise<TPayoutExpanded> => {
+  return api.get(`/api/payouts/${id}`).then((res) => res.data);
+};
+
+export default function PayoutDetail(props: { id: string }) {
+  const { t } = useLocaleContext();
+  const [state, setState] = useSetState({
+    adding: {
+      price: false,
+    },
+    editing: {
+      metadata: false,
+      product: false,
+    },
+    loading: {
+      metadata: false,
+      price: false,
+      product: false,
+    },
+  });
+
+  const { loading, error, data, runAsync } = useRequest(() => fetchData(props.id));
+
+  if (error) {
+    return <Alert severity="error">{error.message}</Alert>;
+  }
+
+  if (loading || !data) {
+    return <CircularProgress />;
+  }
+
+  const createUpdater = (key: string) => async (updates: TPayoutExpanded) => {
+    try {
+      setState((prev) => ({ loading: { ...prev.loading, [key]: true } }));
+      await api.put(`/api/payouts/${props.id}`, updates).then((res) => res.data);
+      Toast.success(t('common.saved'));
+      runAsync();
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatError(err));
+    } finally {
+      setState((prev) => ({ loading: { ...prev.loading, [key]: false } }));
+    }
+  };
+
+  const onUpdateMetadata = createUpdater('metadata');
+
+  const currency = data.paymentCurrency;
+  const total = [formatBNStr(data?.amount, currency.decimal), currency.symbol].join(' ');
+
+  return (
+    <Root direction="column" spacing={4} mb={4}>
+      <Box>
+        <Stack className="page-header" direction="row" justifyContent="space-between" alignItems="center">
+          <Link to="/admin/payments/payouts">
+            <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('admin.payouts')}
+              </Typography>
+            </Stack>
+          </Link>
+          <Copyable text={props.id} style={{ marginLeft: 4 }} />
+        </Stack>
+        <Box mt={2}>
+          <Stack direction="row" justifyContent="space-between" alignItems="center">
+            <Stack direction="row" alignItems="center">
+              <Amount amount={total} sx={{ my: 0, fontSize: '2rem', lineHeight: '1rem' }} />
+              <Status label={data.status} color={getPayoutStatusColor(data.status)} sx={{ ml: 2 }} />
+            </Stack>
+          </Stack>
+          <Stack
+            className="section-body"
+            direction="row"
+            spacing={3}
+            justifyContent="flex-start"
+            flexWrap="wrap"
+            sx={{ pt: 2, mt: 2, borderTop: '1px solid #eee' }}>
+            <InfoMetric label={t('common.createdAt')} value={formatTime(data.created_at)} divider />
+            <InfoMetric label={t('common.updatedAt')} value={formatTime(data.updated_at)} divider />
+          </Stack>
+        </Box>
+      </Box>
+      <Box className="section">
+        <SectionHeader title={t('admin.details')} />
+        <Stack>
+          <InfoRow label={t('common.amount')} value={total} />
+          <InfoRow
+            label={t('common.status')}
+            value={
+              <Stack direction="row" alignItems="center" spacing={1}>
+                <Status label={data.status} color={getPayoutStatusColor(data.status)} />
+                {data.last_attempt_error && (
+                  <Tooltip title={<pre>{JSON.stringify(data.last_attempt_error, null, 2)}</pre>}>
+                    <InfoOutlined fontSize="small" color="error" />
+                  </Tooltip>
+                )}
+              </Stack>
+            }
+          />
+          <InfoRow label={t('common.description')} value={data.description} />
+          <InfoRow label={t('common.createdAt')} value={formatTime(data.created_at)} />
+          <InfoRow label={t('common.updatedAt')} value={formatTime(data.updated_at)} />
+          <InfoRow
+            label={t('common.customer')}
+            value={data.customer ? <CustomerLink customer={data.customer} /> : data.destination}
+          />
+        </Stack>
+      </Box>
+      <Box className="section">
+        <SectionHeader title={t('admin.paymentMethod._name')} />
+        <Stack>
+          <InfoRow label={t('common.id')} value={data.paymentMethod.id} />
+          <InfoRow label={t('admin.paymentMethod.type')} value={data.paymentMethod.type} />
+          <InfoRow
+            label={t('admin.paymentMethod._name')}
+            value={<Currency logo={data.paymentMethod.logo} name={data.paymentMethod.name} />}
+          />
+          <InfoRow
+            label={t('admin.paymentCurrency.name')}
+            value={<Currency logo={data.paymentCurrency.logo} name={data.paymentCurrency.symbol} />}
+          />
+          <InfoRow
+            label={t(`common.${data.payment_details?.arcblock?.type || 'transfer'}TxHash`)}
+            value={<TxLink details={data.payment_details as any} method={data.paymentMethod} />}
+          />
+        </Stack>
+      </Box>
+      <Box className="section">
+        <SectionHeader title={t('common.metadata.label')}>
+          <Button
+            variant="outlined"
+            color="inherit"
+            size="small"
+            disabled={state.editing.metadata}
+            onClick={() => setState((prev) => ({ editing: { ...prev.editing, metadata: true } }))}>
+            <Edit fontSize="small" sx={{ mr: 0.5 }} />
+            {t('common.metadata.edit')}
+          </Button>
+        </SectionHeader>
+        <Box className="section-body">
+          {!state.editing.metadata && <MetadataList data={data.metadata} />}
+          {state.editing.metadata && (
+            <MetadataEditor
+              data={data}
+              loading={state.loading.metadata}
+              onSave={onUpdateMetadata}
+              onCancel={() => setState((prev) => ({ editing: { ...prev.editing, metadata: false } }))}
+            />
+          )}
+        </Box>
+      </Box>
+      <Box className="section">
+        <SectionHeader title={t('admin.connections')} />
+        <Stack>
+          {data.payment_intent_id && (
+            <InfoRow
+              label={t('admin.paymentIntent.name')}
+              value={<Link to={`/admin/payments/${data.paymentIntent.id}`}>{data.paymentIntent.id}</Link>}
+            />
+          )}
+        </Stack>
+      </Box>
+      <Box className="section">
+        <SectionHeader title={t('admin.events')} />
+        <Box className="section-body">
+          <EventList features={{ toolbar: false }} object_id={data.id} />
+        </Box>
+      </Box>
+    </Root>
+  );
+}
+
+const Root = styled(Stack)``;

package/src/pages/admin/payments/payouts/index.tsx

@@ -0,0 +1,5 @@
+import PayoutList from '../../../../components/payouts/list';
+
+export default function PayoutsList() {
+  return <PayoutList />;
+}

package/src/pages/admin/products/links/index.tsx

@@ -128,8 +128,8 @@ function PaymentLinks() {
 
   return (
     <Table
-      durable={listKey}
-      durableKeys={['page', 'rowsPerPage']}
+      durable={`__${listKey}__`}
+      durableKeys={['page', 'rowsPerPage', 'searchText']}
       title={
         <div className="table-toolbar-left">
           <ToggleButtonGroup