payment-kit 1.21.15 → 1.21.17

package/src/components/subscription/payment-method-info.tsx

@@ -0,0 +1,222 @@
+import { Button } from '@arcblock/ux';
+import DID from '@arcblock/ux/lib/DID';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Toast from '@arcblock/ux/lib/Toast';
+import { StripeForm, api, formatError, usePaymentContext } from '@blocklet/payment-react';
+import type { TCustomer } from '@blocklet/payment-types';
+import { CreditCard, Email, AccountBalance } from '@mui/icons-material';
+import { Box, Stack, Typography } from '@mui/material';
+import { useSetState } from 'ahooks';
+import { useEffect } from 'react';
+
+interface PaymentMethodData {
+  id?: string;
+  type: string;
+  // Stripe payment methods
+  card?: {
+    brand: string;
+    last4: string;
+    exp_month: number;
+    exp_year: number;
+  };
+  link?: {
+    email: string;
+  };
+  us_bank_account?: {
+    account_type: string;
+    bank_name: string;
+    last4: string;
+  };
+  billing_details?: {
+    name?: string;
+    email?: string;
+    phone?: string;
+  };
+  // On-chain payment methods (arcblock/ethereum/base)
+  payer?: string;
+}
+
+interface Props {
+  subscriptionId: string;
+  customer: TCustomer;
+  paymentMethodDetails: PaymentMethodData | null;
+  editable?: boolean;
+  paymentMethodType: string;
+  onUpdate?: () => void;
+}
+
+export default function PaymentMethodInfo({
+  subscriptionId,
+  customer,
+  paymentMethodDetails,
+  editable = false,
+  onUpdate = () => {},
+  paymentMethodType,
+}: Props) {
+  const { t, locale } = useLocaleContext();
+  const { connect } = usePaymentContext();
+
+  const [state, setState] = useSetState<{
+    editing: boolean;
+    submitting: boolean;
+    setupIntentId: string | null;
+    clientSecret: string | null;
+    publishableKey: string | null;
+  }>({
+    editing: false,
+    submitting: false,
+    setupIntentId: null,
+    clientSecret: null,
+    publishableKey: null,
+  });
+
+  useEffect(() => {
+    if (!state.editing) {
+      setState({ clientSecret: null, publishableKey: null, setupIntentId: null });
+    }
+  }, [state.editing, setState]);
+
+  const handleEdit = async () => {
+    if (paymentMethodType === 'stripe') {
+      try {
+        setState({ submitting: true });
+        const { data } = await api.post(`/api/subscriptions/${subscriptionId}/update-stripe-payment-method`);
+        setState({
+          editing: true,
+          clientSecret: data.client_secret,
+          publishableKey: data.publishable_key,
+          setupIntentId: data.setup_intent_id,
+          submitting: false,
+        });
+      } catch (err) {
+        Toast.error(formatError(err));
+        setState({ submitting: false });
+      }
+    } else {
+      connect.open({
+        action: 'change-payer',
+        saveConnect: false,
+        locale: locale as 'en' | 'zh',
+        useSocket: true,
+        messages: {
+          scan: '',
+          title: t('admin.subscription.changePayer.connect.title'),
+          success: t('admin.subscription.changePayer.connect.success'),
+          error: t('admin.subscription.changePayer.connect.error'),
+          confirm: '',
+        } as any,
+        extraParams: { subscriptionId },
+        onSuccess: () => {
+          connect.close();
+          Toast.success(t('admin.subscription.changePayer.connect.success'));
+          onUpdate?.();
+        },
+        onClose: () => {
+          connect.close();
+        },
+        onError: (err: any) => {
+          Toast.error(formatError(err));
+        },
+      });
+    }
+  };
+
+  const handleConfirm = () => {
+    setTimeout(() => {
+      Toast.success(t('admin.subscription.changePayer.connect.success'));
+      setState({ editing: false, submitting: false });
+      onUpdate?.();
+    }, 2000);
+  };
+
+  const handleCancel = () => {
+    setState({ editing: false, clientSecret: null, publishableKey: null, setupIntentId: null });
+  };
+
+  if (!paymentMethodDetails) {
+    return null;
+  }
+
+  const { card, link, us_bank_account: usBankAccount, payer, type } = paymentMethodDetails;
+
+  if (state.editing && state.clientSecret && state.publishableKey) {
+    return (
+      <Box>
+        <StripeForm
+          clientSecret={state.clientSecret}
+          intentType="setup_intent"
+          publicKey={state.publishableKey}
+          customer={customer}
+          mode="setup"
+          onConfirm={handleConfirm}
+          onCancel={handleCancel}
+          returnUrl={window.location.href}
+        />
+      </Box>
+    );
+  }
+
+  const renderPaymentMethodInfo = () => {
+    if (type === 'card' && card) {
+      return (
+        <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
+          <CreditCard sx={{ fontSize: 16, color: 'text.secondary' }} />
+          <Typography variant="body2">
+            {card.brand.toUpperCase()} •••• {card.last4}
+          </Typography>
+        </Stack>
+      );
+    }
+
+    if (type === 'link' && link) {
+      return (
+        <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
+          <Email sx={{ fontSize: 16, color: 'text.secondary' }} />
+          <Typography variant="body2">
+            {t('admin.subscription.changePayer.stripe.linkType')} ({link.email})
+          </Typography>
+        </Stack>
+      );
+    }
+
+    if (type === 'us_bank_account' && usBankAccount) {
+      return (
+        <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
+          <AccountBalance sx={{ fontSize: 16, color: 'text.secondary' }} />
+          <Typography variant="body2">
+            {usBankAccount.bank_name || t('admin.subscription.changePayer.stripe.bankAccount')} ••••{' '}
+            {usBankAccount.last4}
+          </Typography>
+        </Stack>
+      );
+    }
+
+    if (['arcblock', 'ethereum', 'base'].includes(type) && payer) {
+      return <DID did={payer} responsive={false} compact copyable={false} />;
+    }
+
+    return (
+      <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+        -
+      </Typography>
+    );
+  };
+
+  return (
+    <Stack direction="row" spacing={1} sx={{ alignItems: 'center', flex: 1 }}>
+      {renderPaymentMethodInfo()}
+      {editable && (
+        <Button
+          variant="text"
+          size="small"
+          sx={{
+            color: 'text.link',
+          }}
+          loading={state.submitting}
+          onClick={handleEdit}>
+          {t('admin.subscription.changePayer.btn')}
+        </Button>
+      )}
+    </Stack>
+  );
+}

package/src/global.css

@@ -79,3 +79,7 @@ th.MuiTableCell-head {
 .MuiTooltip-tooltip {
   max-width: 500px;
 }
+
+.date-range-picker .MuiListItem-root {
+  cursor: pointer;
+}

package/src/locales/en.tsx

@@ -1421,6 +1421,19 @@ export default flat({
       batchPay: {
         button: 'Pay due invoices',
       },
+      payerAddress: 'Payment Address',
+      changePayer: {
+        btn: 'Change',
+        stripe: {
+          linkType: 'Stripe Link',
+          bankAccount: 'Bank Account',
+        },
+        connect: {
+          title: 'Change Payment Address',
+          success: 'Payment Address changed successfully',
+          error: 'Failed to change payment Address',
+        },
+      },
     },
     customer: {
       view: 'View customer',

package/src/locales/zh.tsx

@@ -1387,6 +1387,19 @@ export default flat({
       batchPay: {
         button: '批量付款',
       },
+      payerAddress: '扣费地址',
+      changePayer: {
+        btn: '变更',
+        stripe: {
+          linkType: 'Stripe Link',
+          bankAccount: '银行账户',
+        },
+        connect: {
+          title: '变更扣费地址',
+          success: '扣费地址变更成功',
+          error: '扣费地址变更失败',
+        },
+      },
     },
     customer: {
       view: '查看客户',

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

@@ -55,7 +55,7 @@ const fetchData = (
     relatedCreditGrants?: TCreditGrantExpanded[];
   }
 > => {
-  return api.get(`/api/invoices/${id}`).then((res) => res.data);
+  return api.get(`/api/invoices/${id}?sync=true`).then((res: any) => res.data);
 };
 
 const InfoDirection = 'column';
@@ -92,7 +92,7 @@ export default function InvoiceDetail(props: { id: string }) {
   const createUpdater = (key: string) => async (updates: TInvoice) => {
     try {
       setState((prev) => ({ loading: { ...prev.loading, [key]: true } }));
-      await api.put(`/api/invoices/${props.id}`, updates).then((res) => res.data);
+      await api.put(`/api/invoices/${props.id}`, updates).then((res: any) => res.data);
       Toast.success(t('common.saved'));
       runAsync();
     } catch (err) {
@@ -120,6 +120,8 @@ export default function InvoiceDetail(props: { id: string }) {
   };
   // @ts-ignore
   const isDonation = data?.checkoutSession?.submit_type === 'donate';
+  const showDownloadButton =
+    ['open', 'paid', 'uncollectible'].includes(data.status) && !isDonation && !isEmpty(data.lines);
   return (
     <Root direction="column" spacing={2.5} sx={{ mb: 4 }}>
       <Box>
@@ -144,7 +146,7 @@ export default function InvoiceDetail(props: { id: string }) {
             </Typography>
           </Stack>
           <Box style={{ display: 'flex', gap: '10px' }}>
-            <Download data={data} />
+            {showDownloadButton && <Download data={data} />}
             <InvoiceActions data={data} onChange={runAsync} variant="normal" />
           </Box>
         </Stack>

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

@@ -35,6 +35,7 @@ import { goBackOrFallback } from '../../../../libs/util';
 import InfoRowGroup from '../../../../components/info-row-group';
 import VendorServiceList from '../../../../components/subscription/vendor-service-list';
 import { useSessionContext } from '../../../../contexts/session';
+import PaymentMethodInfo from '../../../../components/subscription/payment-method-info';
 
 const fetchData = (id: string): Promise<TSubscriptionExpanded> => {
   return api.get(`/api/subscriptions/${id}`).then((res) => res.data);
@@ -285,6 +286,21 @@ export default function SubscriptionDetail(props: { id: string }) {
                   />
                 }
               />
+
+              {(data as any).paymentMethodDetails && (
+                <InfoRow
+                  label={t('admin.subscription.payerAddress')}
+                  value={
+                    <PaymentMethodInfo
+                      subscriptionId={data.id}
+                      customer={data.customer}
+                      paymentMethodDetails={(data as any).paymentMethodDetails}
+                      editable={false}
+                      paymentMethodType={data.paymentMethod?.type}
+                    />
+                  }
+                />
+              )}
               {data.payment_details && hasDelegateTxHash(data.payment_details, data.paymentMethod) && (
                 <InfoRow
                   label={t('common.delegateTxHash')}

package/src/pages/admin/overview.tsx

@@ -3,7 +3,7 @@ import DID from '@arcblock/ux/lib/DID';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { api, formatBNStr, formatToDate, usePaymentContext } from '@blocklet/payment-react';
 import { BN } from '@ocap/util';
-import type { GroupedBN, TPaymentMethod, TPaymentStat } from '@blocklet/payment-types';
+import type { GroupedBN, TPaymentCurrency, TPaymentMethod, TPaymentStat } from '@blocklet/payment-types';
 import {
   Avatar,
   Box,
@@ -175,8 +175,8 @@ export default function Overview() {
 
   const currencies: TCurrencyMap = useMemo(() => {
     const map: TCurrencyMap = {};
-    (settings.paymentMethods || []).forEach((method) => {
-      (method.payment_currencies || []).forEach((currency) => {
+    (settings.paymentMethods || []).forEach((method: { payment_currencies: TPaymentCurrency[] }) => {
+      (method.payment_currencies || []).forEach((currency: TPaymentCurrency) => {
         if (!map[currency.id]) {
           map[currency.id] = {
             ...currency,
@@ -1105,10 +1105,12 @@ export default function Overview() {
                     sx={{
                       p: 1.5,
                       flex: '1 1 calc(50% - 8px)',
+                      minWidth: 0,
                       borderRadius: 1,
                       backgroundColor: theme.mode === 'dark' ? 'grey.100' : 'grey.50',
                       border: 'none',
                       boxShadow: 'none',
+                      containerType: 'inline-size',
                     }}>
                     <Box>
                       <Typography
@@ -1124,13 +1126,11 @@ export default function Overview() {
                         sx={{
                           gap: 1.5,
                           flexWrap: 'wrap',
-                          flexDirection: {
-                            xs: 'column',
-                            md: 'row',
-                          },
-                          alignItems: {
-                            xs: 'flex-start',
-                            md: 'baseline',
+                          flexDirection: 'row',
+                          alignItems: 'baseline',
+                          '@container (max-width: 220px)': {
+                            flexDirection: 'column',
+                            alignItems: 'flex-start',
                           },
                         }}>
                         <Typography
@@ -1239,14 +1239,14 @@ export default function Overview() {
 
       <Grid
         container
+        spacing={{ xs: 3, lg: 6 }}
         sx={{
-          gap: { xs: 3, md: 6 },
           mb: 4,
         }}>
         <Grid
           size={{
             xs: 12,
-            md: 8,
+            lg: 8,
           }}>
           {renderFinancialSection()}
         </Grid>
@@ -1254,7 +1254,7 @@ export default function Overview() {
         <Grid
           size={{
             xs: 12,
-            md: 3,
+            lg: 4,
           }}>
           {renderBusinessMonitoringSection()}
         </Grid>
@@ -1265,7 +1265,7 @@ export default function Overview() {
         open={open}
         anchorEl={state.anchorEl}
         onClose={() => setState({ anchorEl: null })}
-        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}>
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}>
         <DateRangePicker
           open
           toggle={onTogglePicker as any}

package/src/pages/admin/products/vendors/create.tsx

@@ -5,23 +5,21 @@ import { AddOutlined } from '@mui/icons-material';
 import {
   Button,
   CircularProgress,
-  Stack,
-  TextField,
-  FormControlLabel,
-  Switch,
   FormControl,
+  FormControlLabel,
   InputLabel,
-  Select,
   MenuItem,
+  Select,
+  Stack,
+  Switch,
+  TextField,
 } from '@mui/material';
 import { useState } from 'react';
-import { useForm, Controller, FormProvider } from 'react-hook-form';
+import { Controller, FormProvider, useForm } from 'react-hook-form';
 import { dispatch } from 'use-bus';
 
-import { joinURL, withQuery } from 'ufo';
 import DrawerForm from '../../../../components/drawer-form';
 import MetadataForm from '../../../../components/metadata/form';
-import { formatProxyUrl } from '../../../../libs/util';
 
 interface Vendor {
   id: string;
@@ -84,8 +82,6 @@ export default function VendorCreate({
         app_url: '',
         status: 'inactive' as const,
         metadata: [{ key: 'blockletMetaUrl', value: '' }],
-        app_pid: '',
-        app_logo: '',
       };
 
   const methods = useForm<VendorFormData>({
@@ -147,36 +143,6 @@ export default function VendorCreate({
         metadata: metadataObj,
       };
 
-      // 如果状态为启用，则检测应用地址可用性
-      if (submitData.status === 'active') {
-        try {
-          const response = await fetch(
-            formatProxyUrl(withQuery(joinURL(submitData.app_url, '__blocklet__.js'), { type: 'json' })),
-            {
-              method: 'GET',
-              headers: { 'Content-Type': 'application/json' },
-            }
-          );
-
-          if (!response.ok) {
-            Toast.error(t('admin.vendor.addressCheckFailed'));
-            setLoading(false);
-            return;
-          }
-
-          // 从响应中获取appPid和appLogo
-          const blockletInfo = await response.json();
-          if (blockletInfo) {
-            submitData.app_pid = blockletInfo.pid || blockletInfo.appPid;
-            submitData.app_logo = blockletInfo.logo || blockletInfo.appLogo;
-          }
-        } catch (error) {
-          Toast.error(t('admin.vendor.addressCheckFailed'));
-          setLoading(false);
-          return;
-        }
-      }
-
       if (isEditMode && vendorData) {
         // 编辑模式：更新供应商
         await api.put(`/api/vendors/${vendorData.id}`, submitData);

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

@@ -6,6 +6,7 @@ import { ContentCopy } from '@mui/icons-material';
 import { Box, Chip, CircularProgress, IconButton, Tooltip, Typography } from '@mui/material';
 import { useEffect, useState } from 'react';
 import useBus from 'use-bus';
+import omit from 'lodash/omit';
 
 import { useLocalStorageState } from 'ahooks';
 import FilterToolbar from '../../../../components/filter-toolbar';
@@ -320,7 +321,10 @@ export default function VendorsList() {
             setSelectedVendor(null);
             refresh();
           }}
-          vendorData={selectedVendor}
+          vendorData={{
+            ...selectedVendor,
+            metadata: omit(selectedVendor?.metadata || {}, 'mountPoint'),
+          }}
         />
       )}
     </>

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

@@ -15,13 +15,14 @@ import {
   usePaymentContext,
   PaymentBeneficiaries,
   useMobile,
+  StripePaymentAction,
 } from '@blocklet/payment-react';
 import type { TCheckoutSession, TCreditGrantExpanded, TInvoiceExpanded, TPaymentLink } from '@blocklet/payment-types';
 import { ArrowBackOutlined } from '@mui/icons-material';
 import { Alert, Box, Button, CircularProgress, Divider, Stack, Tooltip, Typography, useTheme } from '@mui/material';
 import { styled } from '@mui/system';
 import { useRequest, useSetState } from 'ahooks';
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import { Link, useParams, useSearchParams } from 'react-router-dom';
 
 import { joinURL } from 'ufo';
@@ -48,7 +49,7 @@ const fetchData = (
     relatedCreditGrants?: TCreditGrantExpanded[];
   }
 > => {
-  return api.get(`/api/invoices/${id}`).then((res) => res.data);
+  return api.get(`/api/invoices/${id}`).then((res: any) => res.data);
 };
 
 export default function CustomerInvoiceDetail() {
@@ -64,16 +65,19 @@ 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 payHandlerRef = useRef<(() => void) | null>(null);
 
-  const onPay = () => {
+  const handleExternalPayment = () => {
     setState({ paying: true });
     connect.open({
       action: 'collect',
       saveConnect: false,
       locale: locale as 'en' | 'zh',
+      extraParams: { invoiceId: params.id, action },
       messages: {
         scan: '',
         title: t(`payment.customer.invoice.${action || 'pay'}`),
@@ -81,9 +85,9 @@ export default function CustomerInvoiceDetail() {
         error: t(`payment.customer.invoice.${action || 'pay'}Error`),
         confirm: '',
       } as any,
-      extraParams: { invoiceId: params.id, action },
       onSuccess: async () => {
         connect.close();
+        setState({ paying: false });
         await runAsync();
       },
       onClose: () => {
@@ -110,7 +114,7 @@ export default function CustomerInvoiceDetail() {
       ['pay', 'renew'].includes(action as string) &&
       ['open', 'uncollectible'].includes(data?.status as string)
     ) {
-      onPay();
+      handleExternalPayment();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [error]);
@@ -133,6 +137,9 @@ export default function CustomerInvoiceDetail() {
 
   const hidePayButton = data.billing_reason === 'overdraft_protection';
   const paymentDetails = data.paymentIntent?.payment_details || data.metadata?.payment_details;
+
+  const showDownloadButton =
+    ['open', 'paid', 'uncollectible'].includes(data.status) && !isDonation && !isEmpty(data.lines);
   return (
     <InvoiceDetailRoot direction="column" spacing={3}>
       <Stack
@@ -161,7 +168,7 @@ export default function CustomerInvoiceDetail() {
             justifyContent: 'flex-end',
             alignItems: 'center',
           }}>
-          {['open', 'paid', 'uncollectible'].includes(data.status) && !isDonation && <Download data={data} />}
+          {showDownloadButton && <Download data={data} />}
           {data?.paymentLink?.donation_settings?.reference && (
             <Button
               variant="outlined"
@@ -171,17 +178,52 @@ export default function CustomerInvoiceDetail() {
               {t('customer.payout.viewReference')}
             </Button>
           )}
-          {['open', 'uncollectible'].includes(data.status) && !hidePayButton && (
-            <Button
-              variant="outlined"
-              color="primary"
-              size="small"
-              sx={{ borderColor: 'divider' }}
-              disabled={state.paying}
-              onClick={onPay}>
-              {t('payment.customer.invoice.pay')}
-            </Button>
-          )}
+          {['open', 'uncollectible'].includes(data.status) &&
+            !hidePayButton &&
+            (data.paymentMethod?.type === 'stripe' ? (
+              <StripePaymentAction
+                invoice={data}
+                paymentMethod={data.paymentMethod}
+                onSuccess={async () => {
+                  Toast.close();
+                  setState({ paying: false });
+                  await runAsync();
+                }}
+                onError={() => {
+                  setState({ paying: false });
+                }}
+                onClose={() => {
+                  setState({ paying: false });
+                }}>
+                {(onPay: () => void, paying: boolean) => {
+                  payHandlerRef.current = onPay;
+                  return (
+                    <Button
+                      variant="outlined"
+                      color="primary"
+                      size="small"
+                      sx={{ borderColor: 'divider' }}
+                      disabled={state.paying || paying}
+                      onClick={() => {
+                        setState({ paying: true });
+                        onPay();
+                      }}>
+                      {t('payment.customer.invoice.pay')}
+                    </Button>
+                  );
+                }}
+              </StripePaymentAction>
+            ) : (
+              <Button
+                variant="outlined"
+                color="primary"
+                size="small"
+                sx={{ borderColor: 'divider' }}
+                disabled={state.paying}
+                onClick={handleExternalPayment}>
+                {t('payment.customer.invoice.pay')}
+              </Button>
+            ))}
         </Stack>
       </Stack>
       <Box