payment-kit 1.18.0 → 1.18.1

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

@@ -0,0 +1,192 @@
+/* eslint-disable react/no-unstable-nested-components */
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { api, formatBNStr, formatTime, Table, useDefaultPageSize } from '@blocklet/payment-react';
+import type { TCustomer, TPaymentIntentExpanded, TPayoutExpanded } from '@blocklet/payment-types';
+import { Box, Typography } from '@mui/material';
+import { useLocalStorageState } from 'ahooks';
+import { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+
+import { styled } from '@mui/system';
+import { debounce } from '../../../libs/util';
+import CustomerLink from '../../customer/link';
+
+const fetchData = (
+  params: Record<string, any> = {}
+): Promise<{
+  list: TPayoutExpanded &
+    {
+      paymentIntent: TPaymentIntentExpanded & { customer: TCustomer };
+    }[];
+  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/mine?${search.toString()}`).then((res) => res.data);
+};
+
+type SearchProps = {
+  status?: string;
+  pageSize: number;
+  page: number;
+  currency_id?: string;
+  customer_id?: string;
+  q?: any;
+  o?: any;
+};
+
+type ListProps = {
+  status?: string;
+  customer_id?: string;
+  currency_id?: string;
+};
+
+const getListKey = (props: ListProps) => {
+  if (props.customer_id) {
+    return `customer-payouts-${props.customer_id}`;
+  }
+  return 'payouts-mine';
+};
+
+CustomerRevenueList.defaultProps = {
+  status: '',
+  currency_id: '',
+  customer_id: '',
+};
+
+export default function CustomerRevenueList({ currency_id, status, customer_id }: ListProps) {
+  const { t } = useLocaleContext();
+
+  const listKey = getListKey({ customer_id });
+  const defaultPageSize = useDefaultPageSize(10);
+  const [search, setSearch] = useLocalStorageState<SearchProps>(listKey, {
+    defaultValue: {
+      status: status as string,
+      customer_id,
+      currency_id,
+      pageSize: defaultPageSize,
+      page: 1,
+    },
+  });
+
+  const [data, setData] = useState({
+    list: [],
+    count: 0,
+  }) as any;
+
+  useEffect(() => {
+    debounce(() => {
+      fetchData(search).then((res: any) => {
+        setData(res);
+      });
+    }, 300)();
+  }, [search]);
+
+  const columns = [
+    {
+      label: t('common.amount'),
+      name: 'id',
+      align: 'right',
+      width: 80,
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = data.list[index] as TPayoutExpanded;
+          return (
+            <Link to={`/customer/payout/${item.id}`}>
+              <Typography component="strong" fontWeight={600}>
+                {formatBNStr(item.amount, item?.paymentCurrency.decimal)}
+                &nbsp;
+                {item?.paymentCurrency.symbol}
+              </Typography>
+            </Link>
+          );
+        },
+      },
+    },
+    {
+      label: t('customer.payout.payer'),
+      name: 'customer_id',
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = data.list[index] as TPayoutExpanded & {
+            paymentIntent: TPaymentIntentExpanded & { customer: TCustomer };
+          };
+          // @ts-ignore
+          return item?.paymentIntent?.customer ? (
+            <CustomerLink customer={item.paymentIntent.customer} linkTo={`/customer/payout/${item.id}`} />
+          ) : (
+            t('common.none')
+          );
+        },
+      } as any,
+    },
+    {
+      label: t('common.createdAt'),
+      name: 'created_at',
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = data.list[index] as TPayoutExpanded;
+          return <Link to={`/customer/payout/${item.id}`}>{formatTime(item.created_at)}</Link>;
+        },
+      },
+    },
+  ];
+
+  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 (
+    <Root>
+      <Table
+        hasRowLink
+        durable={`__${listKey}__`}
+        data={data.list || []}
+        columns={columns}
+        loading={!data.list}
+        onChange={onTableChange}
+        options={{
+          count: data.count,
+          page: search!.page - 1,
+          rowsPerPage: search!.pageSize,
+        }}
+        toolbar={false}
+        showMobile={false}
+        mobileTDFlexDirection="row"
+        emptyNodeText={t('customer.payout.empty')}
+        sx={{ mt: 2 }}
+      />
+    </Root>
+  );
+}
+
+const Root = styled(Box)`
+  @media (max-width: ${({ theme }) => theme.breakpoints.values.md}px) {
+    .MuiTable-root > .MuiTableBody-root > .MuiTableRow-root > td.MuiTableCell-root {
+      > div {
+        width: fit-content;
+        flex: inherit;
+        font-size: 14px;
+        .info-card {
+          align-items: flex-end;
+        }
+      }
+    }
+    .invoice-summary {
+      padding-right: 20px;
+    }
+  }
+`;

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

@@ -12,7 +12,6 @@ type Props = {
 export default function LineItemActions(props: Props) {
   const { t } = useLocaleContext();
   const navigate = useNavigate();
-
   return (
     <ClickBoundary>
       <Actions
@@ -24,7 +23,7 @@ export default function LineItemActions(props: Props) {
           },
           {
             label: t('admin.product.view'),
-            handler: () => navigate(`/admin/products/${props.data.price.product_id}`),
+            handler: () => navigate(`/admin/products/${props.data.product_id || props.data.price.product_id}`),
             color: 'primary',
           },
         ]}

package/src/libs/util.ts

@@ -19,8 +19,9 @@ import { hexToNumber } from '@ocap/util';
 import { isEmpty, isObject } from 'lodash';
 import cloneDeep from 'lodash/cloneDeep';
 import isEqual from 'lodash/isEqual';
-import { joinURL } from 'ufo';
+import { joinURL, withQuery } from 'ufo';
 
+import type { LiteralUnion } from 'type-fest';
 import { t } from '../locales/index';
 
 export const formatProductPrice = (
@@ -323,3 +324,43 @@ export function getInvoiceUsageReportStartEnd(invoice: TInvoiceExpanded, showPre
   usageReportRange.end = invoice.period_end - offset;
   return usageReportRange;
 }
+
+export function getCustomerProfileUrl({
+  locale = 'en',
+  userDid,
+}: {
+  locale: LiteralUnion<'en' | 'zh', string>;
+  userDid: string;
+}) {
+  return joinURL(
+    getPrefix(),
+    withQuery('.well-known/service/user', {
+      locale,
+      did: userDid,
+    })
+  );
+}
+
+export function getAppInfo(address: string): { name: string; avatar: string; type: string; url: string } | null {
+  const blockletJson = window.blocklet;
+  if (blockletJson) {
+    if (blockletJson?.appId === address) {
+      return {
+        name: blockletJson?.appName,
+        avatar: blockletJson?.appLogo,
+        type: 'dapp',
+        url: blockletJson?.appUrl,
+      };
+    }
+    const appInfo = blockletJson?.componentMountPoints?.find((x: any) => x.appId === address);
+    if (appInfo) {
+      return {
+        name: appInfo.name || '',
+        avatar: joinURL(getPrefix(), `.well-known/service/blocklet/logo-bundle/${appInfo.did}`),
+        type: 'dapp',
+        url: joinURL(getPrefix(), appInfo.mountPoint),
+      };
+    }
+  }
+  return null;
+}

package/src/locales/en.tsx

@@ -26,6 +26,7 @@ export default flat({
     submit: 'Submit',
     custom: 'Custom',
     estimatedDuration: '{duration} est.',
+    detail: 'Detail',
   },
   admin: {
     balances: 'Balances',
@@ -734,6 +735,15 @@ export default flat({
     unpaidInvoicesWarningTip: 'You currently have unpaid invoices, please settle your invoices promptly.',
     invoice: {
       relatedInvoice: 'Related Invoice',
+      donation: 'Donation',
+    },
+    payout: {
+      empty: 'No Payout',
+      payer: 'Payer',
+      receiver: 'Receiver',
+      payTxHash: 'Payment TxHash',
+      viewReference: 'View Reference',
+      title: 'Revenue',
     },
   },
 });

package/src/locales/zh.tsx

@@ -25,6 +25,7 @@ export default flat({
     submit: '提交',
     custom: '自定义',
     estimatedDuration: '预计可用 {duration}',
+    detail: '详情',
   },
   admin: {
     balances: '余额',
@@ -715,6 +716,15 @@ export default flat({
     unpaidInvoicesWarningTip: '您当前有未支付的账单，请及时付清。',
     invoice: {
       relatedInvoice: '关联账单',
+      donation: '打赏记录',
+    },
+    payout: {
+      empty: '没有收款记录',
+      payer: '付款方',
+      receiver: '收款方',
+      payTxHash: '交易详情',
+      viewReference: '查看打赏原文',
+      title: '收款记录',
     },
   },
 });

package/src/pages/admin/billing/invoices/detail.tsx

@@ -2,6 +2,7 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
 import {
+  PaymentBeneficiaries,
   Status,
   TxGas,
   TxLink,
@@ -19,6 +20,7 @@ import { styled } from '@mui/system';
 import { useRequest, useSetState } from 'ahooks';
 import { Link } from 'react-router-dom';
 
+import { isEmpty } from 'lodash';
 import Copyable from '../../../../components/copyable';
 import Currency from '../../../../components/currency';
 import CustomerLink from '../../../../components/customer/link';
@@ -99,6 +101,8 @@ export default function InvoiceDetail(props: { id: string }) {
     }
     return desc;
   };
+  // @ts-ignore
+  const isDonation = data?.checkoutSession?.submit_type === 'donate';
   return (
     <Root direction="column" spacing={2.5} sx={{ mb: 4 }}>
       <Box>
@@ -360,6 +364,23 @@ export default function InvoiceDetail(props: { id: string }) {
             </Box>
           </Box>
           <Divider />
+          {isDonation && !isEmpty(data.paymentIntent?.beneficiaries) && (
+            <>
+              <Box className="section">
+                <Typography variant="h3" className="section-header">
+                  {t('customer.invoice.donation')}
+                </Typography>
+              </Box>
+              <Box sx={{ maxWidth: 800 }}>
+                <PaymentBeneficiaries
+                  data={data?.paymentIntent?.beneficiaries as any}
+                  currency={data.paymentCurrency}
+                  totalAmount={data?.amount_paid}
+                />
+              </Box>
+              <Divider />
+            </>
+          )}
           <Box className="section">
             <SectionHeader title={t('admin.payments')} />
             <Box className="section-body">

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

@@ -10,16 +10,18 @@ import {
   formatBNStr,
   formatError,
   formatTime,
+  getCustomerAvatar,
   getPayoutStatusColor,
   useMobile,
 } from '@blocklet/payment-react';
-import type { TPayoutExpanded } from '@blocklet/payment-types';
+import type { TCustomer, TPayoutExpanded } from '@blocklet/payment-types';
 import { ArrowBackOutlined, InfoOutlined } from '@mui/icons-material';
 import { Alert, Avatar, Box, Button, CircularProgress, Divider, Stack, Tooltip, Typography } from '@mui/material';
 import { styled } from '@mui/system';
 import { useRequest, useSetState } from 'ahooks';
 import { Link } from 'react-router-dom';
 
+import DID from '@arcblock/ux/lib/DID';
 import Copyable from '../../../../components/copyable';
 import CustomerLink from '../../../../components/customer/link';
 import EventList from '../../../../components/event/list';
@@ -28,9 +30,16 @@ import InfoRow from '../../../../components/info-row';
 import MetadataEditor from '../../../../components/metadata/editor';
 import MetadataList from '../../../../components/metadata/list';
 import SectionHeader from '../../../../components/section/header';
-import { goBackOrFallback } from '../../../../libs/util';
+import { getAppInfo, getCustomerProfileUrl, goBackOrFallback } from '../../../../libs/util';
+import InfoCard from '../../../../components/info-card';
 
-const fetchData = (id: string): Promise<TPayoutExpanded> => {
+const fetchData = (
+  id: string
+): Promise<
+  TPayoutExpanded & {
+    paymentIntent?: { customer: TCustomer };
+  }
+> => {
   return api.get(`/api/payouts/${id}`).then((res) => res.data);
 };
 
@@ -88,6 +97,21 @@ export default function PayoutDetail(props: { id: string }) {
     setState((prev) => ({ editing: { ...prev.editing, metadata: true } }));
   };
 
+  const { paymentIntent } = data || {};
+
+  const renderCustomer = () => {
+    if (data.customer) {
+      return <CustomerLink customer={data.customer} />;
+    }
+    const appInfo = getAppInfo(data.destination);
+    if (appInfo) {
+      return (
+        <InfoCard name={appInfo.name} description={<DID did={data.destination} />} logo={appInfo.avatar} size={40} />
+      );
+    }
+    return data.destination;
+  };
+
   return (
     <Root direction="column" spacing={2.5} mb={4}>
       <Box>
@@ -170,6 +194,43 @@ export default function PayoutDetail(props: { id: string }) {
               value={<Status label={data.status} color={getPayoutStatusColor(data.status)} />}
               divider
             />
+            <InfoMetric
+              label={t('customer.payout.payer')}
+              value={
+                <InfoCard
+                  logo={getCustomerAvatar(
+                    paymentIntent?.customer?.did,
+                    paymentIntent?.customer?.updated_at
+                      ? new Date(paymentIntent?.customer?.updated_at).toISOString()
+                      : '',
+                    48
+                  )}
+                  name={
+                    <Typography
+                      variant="subtitle2"
+                      sx={{
+                        cursor: 'pointer',
+                        '&:hover': {
+                          color: 'text.link',
+                        },
+                      }}
+                      onClick={() => {
+                        const url = getCustomerProfileUrl({
+                          userDid: paymentIntent?.customer?.did,
+                          locale: 'zh',
+                        });
+                        window.open(url, '_blank');
+                      }}>
+                      {paymentIntent?.customer?.name} ({paymentIntent?.customer?.email})
+                    </Typography>
+                  }
+                  description={<DID did={paymentIntent?.customer?.did} />}
+                  size={40}
+                  variant="rounded"
+                />
+              }
+              divider
+            />
             {/* <InfoMetric label={t('common.createdAt')} value={formatTime(data.created_at)} divider /> */}
             {/* <InfoMetric label={t('common.updatedAt')} value={formatTime(data.updated_at)} divider /> */}
           </Stack>
@@ -262,7 +323,7 @@ export default function PayoutDetail(props: { id: string }) {
               />
               <InfoRow
                 label={t('common.customer')}
-                value={data.customer ? <CustomerLink customer={data.customer} /> : data.destination}
+                value={renderCustomer()}
                 direction={InfoDirection}
                 alignItems={InfoAlignItems}
               />

package/src/pages/customer/index.tsx

@@ -41,6 +41,7 @@ import ProgressBar, { useTransitionContext } from '../../components/progress-bar
 import CurrentSubscriptions from '../../components/subscription/portal/list';
 import { useSessionContext } from '../../contexts/session';
 import api from '../../libs/api';
+import CustomerRevenueList from '../../components/payouts/portal/list';
 
 type Result = TCustomerExpanded & { summary: { [key: string]: GroupedBN }; error?: string };
 
@@ -449,6 +450,15 @@ export default function CustomerHome() {
     </Box>
   );
 
+  const RevenueCard = (
+    <Box className="base-card section section-revenue">
+      <Box className="section-header">
+        <Typography variant="h3">{t('customer.payout.title')}</Typography>
+      </Box>
+      <CustomerRevenueList />
+    </Box>
+  );
+
   return (
     <Content>
       <ProgressBar pending={isPending} />
@@ -457,6 +467,7 @@ export default function CustomerHome() {
           {SummaryCard}
           {SubscriptionCard}
           {InvoiceCard}
+          {RevenueCard}
           {DetailCard}
         </Root>
       ) : (
@@ -465,6 +476,7 @@ export default function CustomerHome() {
             <Stack direction="column" spacing={2.5}>
               {SubscriptionCard}
               {InvoiceCard}
+              {RevenueCard}
             </Stack>
           </Grid>
           <Grid item xs={12} md={4}>
@@ -503,33 +515,8 @@ const Content = styled(Stack)`
 `;
 
 const Root = styled(Stack)`
-  display: grid;
-  grid-template-columns: 5fr 2fr;
-  grid-auto-rows: minmax(min-content, max-content);
-  grid-gap: 20px;
-  grid-template-areas:
-    'subscription summary'
-    'invoice detail';
-  .section-summary {
-    grid-area: summary;
-  }
-  .section-detail {
-    grid-area: detail;
-  }
-  .section-invoice {
-    grid-area: invoice;
-  }
-  .section-subscription {
-    grid-area: subscription;
-  }
   @media (max-width: ${({ theme }) => theme.breakpoints.values.xl}px) {
     padding: 0px;
-    grid-template-columns: 1fr;
-    grid-template-areas:
-      'summary'
-      'subscription'
-      'invoice'
-      'detail';
     gap: 0;
     .base-card {
       border: none;

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

@@ -13,8 +13,9 @@ import {
   getInvoiceStatusColor,
   getPrefix,
   usePaymentContext,
+  PaymentBeneficiaries,
 } from '@blocklet/payment-react';
-import type { TInvoiceExpanded } from '@blocklet/payment-types';
+import type { TCheckoutSession, TInvoiceExpanded, TPaymentLink } from '@blocklet/payment-types';
 import { ArrowBackOutlined } from '@mui/icons-material';
 import { Alert, Box, Button, CircularProgress, Divider, Stack, Typography } from '@mui/material';
 import { styled } from '@mui/system';
@@ -23,6 +24,7 @@ import { useEffect } from 'react';
 import { Link, useParams, useSearchParams } from 'react-router-dom';
 
 import { joinURL } from 'ufo';
+import { isEmpty } from 'lodash';
 import { useSessionContext } from '../../../contexts/session';
 import Currency from '../../../components/currency';
 import CustomerLink from '../../../components/customer/link';
@@ -33,7 +35,11 @@ import { goBackOrFallback } from '../../../libs/util';
 import CustomerRefundList from '../refund/list';
 import InfoMetric from '../../../components/info-metric';
 
-const fetchData = (id: string): Promise<TInvoiceExpanded & { relatedInvoice?: TInvoiceExpanded }> => {
+const fetchData = (
+  id: string
+): Promise<
+  TInvoiceExpanded & { relatedInvoice?: TInvoiceExpanded; checkoutSession: TCheckoutSession; paymentLink: TPaymentLink }
+> => {
   return api.get(`/api/invoices/${id}`).then((res) => res.data);
 };
 
@@ -52,6 +58,7 @@ export default function CustomerInvoiceDetail() {
   const { loading, error, data, runAsync } = useRequest(() => fetchData(params.id as string));
   const action = searchParams.get('action');
   const { session } = useSessionContext();
+  const isDonation = data?.checkoutSession?.submit_type === 'donate';
 
   const onPay = () => {
     setState({ paying: true });
@@ -329,7 +336,24 @@ export default function CustomerInvoiceDetail() {
           )}
         </Stack>
       </Box>
-      {!isSlashStake && (
+      {isDonation && !isEmpty(data.paymentIntent?.beneficiaries) && (
+        <>
+          <Divider />
+          <Box className="section">
+            <Typography variant="h3" className="section-header">
+              {t('customer.invoice.donation')}
+            </Typography>
+          </Box>
+          <Box sx={{ maxWidth: 800 }}>
+            <PaymentBeneficiaries
+              data={data?.paymentIntent?.beneficiaries as any}
+              currency={data.paymentCurrency}
+              totalAmount={data?.amount_paid}
+            />
+          </Box>
+        </>
+      )}
+      {!isSlashStake && !isDonation && (
         <>
           {!isStake && (
             <>