payment-kit 1.15.33 → 1.15.35

package/src/pages/customer/recharge.tsx

@@ -30,12 +30,14 @@ import { joinURL } from 'ufo';
 import type { TSubscriptionExpanded } from '@blocklet/payment-types';
 import { ArrowBackOutlined } from '@mui/icons-material';
 import { BN, fromUnitToToken } from '@ocap/util';
+import RechargeList from '../../components/invoice/recharge';
 import SubscriptionDescription from '../../components/subscription/description';
 import InfoRow from '../../components/info-row';
 import Currency from '../../components/currency';
 import SubscriptionMetrics from '../../components/subscription/metrics';
 import { goBackOrFallback } from '../../libs/util';
 import CustomerLink from '../../components/customer/link';
+import { useSessionContext } from '../../contexts/session';
 
 const Root = styled(Stack)(({ theme }) => ({
   marginBottom: theme.spacing(3),
@@ -70,6 +72,7 @@ export default function RechargePage() {
   } | null>(null);
   const [customAmount, setCustomAmount] = useState(false);
   const [presetAmounts, setPresetAmounts] = useState<Array<{ amount: string; cycles: number }>>([]);
+  const { session } = useSessionContext();
 
   const {
     paymentCurrency,
@@ -84,42 +87,41 @@ export default function RechargePage() {
 
   // @ts-ignore
   const receiveAddress = paymentDetails?.[paymentMethod?.type]?.payer;
+  const fetchData = async () => {
+    try {
+      setLoading(true);
+      const [subscriptionRes, payerTokenRes, upcomingRes] = await Promise.all([
+        api.get(`/api/subscriptions/${subscriptionId}`),
+        api.get(`/api/subscriptions/${subscriptionId}/payer-token`),
+        api.get(`/api/subscriptions/${subscriptionId}/upcoming`),
+      ]);
+      setSubscription(subscriptionRes.data);
+      setPayerValue(payerTokenRes.data);
+
+      // Calculate preset amounts
+      const getCycleAmount = (cycles: number) =>
+        fromUnitToToken(
+          new BN(upcomingRes.data.amount === '0' ? upcomingRes.data.minExpectedAmount : upcomingRes.data.amount)
+            .mul(new BN(cycles))
+            .toString(),
+          upcomingRes.data?.currency?.decimal
+        );
+      setPresetAmounts([
+        { amount: getCycleAmount(1), cycles: 1 },
+        { amount: getCycleAmount(2), cycles: 2 },
+        { amount: getCycleAmount(3), cycles: 3 },
+        { amount: getCycleAmount(5), cycles: 5 },
+        { amount: getCycleAmount(10), cycles: 10 },
+      ]);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : t('common.fetchError'));
+      console.error(err);
+    } finally {
+      setLoading(false);
+    }
+  };
 
   useEffect(() => {
-    const fetchData = async () => {
-      try {
-        setLoading(true);
-        const [subscriptionRes, payerTokenRes, upcomingRes] = await Promise.all([
-          api.get(`/api/subscriptions/${subscriptionId}`),
-          api.get(`/api/subscriptions/${subscriptionId}/payer-token`),
-          api.get(`/api/subscriptions/${subscriptionId}/upcoming`),
-        ]);
-        setSubscription(subscriptionRes.data);
-        setPayerValue(payerTokenRes.data);
-
-        // Calculate preset amounts
-        const getCycleAmount = (cycles: number) =>
-          fromUnitToToken(
-            new BN(upcomingRes.data.amount === '0' ? upcomingRes.data.minExpectedAmount : upcomingRes.data.amount)
-              .mul(new BN(cycles))
-              .toString(),
-            upcomingRes.data?.currency?.decimal
-          );
-        setPresetAmounts([
-          { amount: getCycleAmount(1), cycles: 1 },
-          { amount: getCycleAmount(2), cycles: 2 },
-          { amount: getCycleAmount(3), cycles: 3 },
-          { amount: getCycleAmount(5), cycles: 5 },
-          { amount: getCycleAmount(10), cycles: 10 },
-        ]);
-      } catch (err) {
-        setError(err instanceof Error ? err.message : t('common.fetchError'));
-        console.error(err);
-      } finally {
-        setLoading(false);
-      }
-    };
-
     fetchData();
   }, [subscriptionId]);
 
@@ -135,7 +137,7 @@ export default function RechargePage() {
       onSuccess: () => {
         connect.close();
         Toast.success(t('customer.recharge.success'));
-        window.location.reload();
+        fetchData();
       },
       onClose: () => {
         connect.close();
@@ -181,6 +183,9 @@ export default function RechargePage() {
     return <Alert severity="info">{t('common.dataNotFound')}</Alert>;
   }
 
+  if (subscription?.customer?.did && session?.user?.did && subscription.customer.did !== session.user.did) {
+    return <Alert severity="error">You do not have permission to access other customer data</Alert>;
+  }
   const currentBalance = formatBNStr(payerValue?.token || '0', paymentCurrency?.decimal, 6, false);
 
   const supportRecharge = ['arcblock', 'ethereum'].includes(paymentMethod?.type || '');
@@ -414,6 +419,11 @@ export default function RechargePage() {
           <Alert severity="info">{t('customer.recharge.unsupported')}</Alert>
         )}
       </Box>
+      <Divider />
+      <Typography variant="h2" gutterBottom>
+        {t('customer.recharge.history')}
+      </Typography>
+      <RechargeList subscription_id={subscriptionId} currency_id={paymentCurrency?.id} />
     </Root>
   );
 }

package/src/pages/customer/subscription/change-plan.tsx

@@ -243,7 +243,14 @@ export default function CustomerSubscriptionChangePlan() {
       </Stack>
       <Stack direction="column" sx={{ marginTop: 32 }}>
         <SectionHeader title={t('payment.customer.changePlan.config')} />
-        <PricingTable mode="select" alignItems="left" interval={interval} table={table} onSelect={handleSelect} />
+        <PricingTable
+          mode="select"
+          alignItems="left"
+          interval={interval}
+          table={table}
+          onSelect={handleSelect}
+          hideCurrency
+        />
       </Stack>
       {!data.table && <Alert severity="error">{t('payment.customer.changePlan.tableNotFound')}</Alert>}
       {state.priceId && state.total && state.setup && (

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

@@ -1,6 +1,6 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { CustomerInvoiceList, TxLink, api, formatTime } from '@blocklet/payment-react';
+import { CustomerInvoiceList, TxLink, api, formatTime, hasDelegateTxHash } from '@blocklet/payment-react';
 import type { TSubscriptionExpanded } from '@blocklet/payment-types';
 import { ArrowBackOutlined } from '@mui/icons-material';
 import { Alert, Box, Button, CircularProgress, Divider, Stack, Typography } from '@mui/material';
@@ -15,7 +15,8 @@ import SubscriptionDescription from '../../../components/subscription/descriptio
 import SubscriptionItemList from '../../../components/subscription/items';
 import SubscriptionMetrics from '../../../components/subscription/metrics';
 import SubscriptionActions from '../../../components/subscription/portal/actions';
-import { canChangePaymentMethod, goBackOrFallback } from '../../../libs/util';
+import { canChangePaymentMethod } from '../../../libs/util';
+import { useSessionContext } from '../../../contexts/session';
 
 const fetchData = (id: string | undefined): Promise<TSubscriptionExpanded> => {
   return api.get(`/api/subscriptions/${id}`).then((res) => res.data);
@@ -24,19 +25,15 @@ const fetchData = (id: string | undefined): Promise<TSubscriptionExpanded> => {
 const InfoDirection = 'column';
 const InfoAlignItems = 'flex-start';
 
-const supportRecharge = (subscription: TSubscriptionExpanded) => {
-  return (
-    ['active', 'trialing', 'past_due'].includes(subscription?.status) &&
-    ['arcblock', 'ethereum'].includes(subscription?.paymentMethod?.type)
-  );
-};
-
 export default function CustomerSubscriptionDetail() {
   const { id } = useParams() as { id: string };
   const navigate = useNavigate();
   const { t } = useLocaleContext();
+  const { session } = useSessionContext();
   const { loading, error, data, refresh } = useRequest(() => fetchData(id));
-
+  if (data?.customer?.did && session?.user?.did && data.customer.did !== session.user.did) {
+    return <Alert severity="error">You do not have permission to access other customer data</Alert>;
+  }
   if (error) {
     return <Alert severity="error">{error.message}</Alert>;
   }
@@ -56,7 +53,7 @@ export default function CustomerSubscriptionDetail() {
           sx={{ position: 'relative', mt: '16px' }}>
           <Stack
             direction="row"
-            onClick={() => goBackOrFallback('/customer')}
+            onClick={() => navigate('/customer', { replace: true })}
             alignItems="center"
             sx={{ fontWeight: 'normal', cursor: 'pointer' }}>
             <ArrowBackOutlined fontSize="small" sx={{ mr: 0.5, color: 'text.secondary' }} />
@@ -69,6 +66,7 @@ export default function CustomerSubscriptionDetail() {
               subscription={data}
               onChange={() => refresh()}
               showExtra
+              showRecharge
               actionProps={{
                 cancel: {
                   variant: 'outlined',
@@ -84,14 +82,6 @@ export default function CustomerSubscriptionDetail() {
                 },
               }}
             />
-            {supportRecharge(data) && (
-              <Button
-                variant="outlined"
-                color="primary"
-                onClick={() => navigate(`/customer/subscription/${data.id}/recharge`)}>
-                {t('customer.recharge.title')}
-              </Button>
-            )}
           </Stack>
         </Stack>
         <Box
@@ -243,7 +233,7 @@ export default function CustomerSubscriptionDetail() {
             direction={InfoDirection}
             alignItems={InfoAlignItems}
           />
-          {(data.payment_details?.arcblock?.tx_hash || data.payment_details?.ethereum?.tx_hash) && (
+          {data.payment_details && hasDelegateTxHash(data.payment_details, data.paymentMethod) && (
             <InfoRow
               label={t('common.delegateTxHash')}
               value={<TxLink details={data.payment_details} method={data.paymentMethod} />}
@@ -251,7 +241,7 @@ export default function CustomerSubscriptionDetail() {
               alignItems={InfoAlignItems}
             />
           )}
-          {data.payment_details?.arcblock?.staking?.tx_hash && (
+          {data.paymentMethod?.type === 'arcblock' && data.payment_details?.arcblock?.staking?.tx_hash && (
             <InfoRow
               label={t('common.stakeTxHash')}
               value={
@@ -300,7 +290,7 @@ export default function CustomerSubscriptionDetail() {
           {t('customer.invoiceHistory')}
         </Typography>
         <Box className="section-body">
-          <CustomerInvoiceList subscription_id={data.id} include_staking type="table" />
+          <CustomerInvoiceList subscription_id={data.id} type="table" include_staking />
         </Box>
       </Box>
     </Root>

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

@@ -11,6 +11,7 @@ import {
   formatToDate,
   formatToDatetime,
   getDidConnectQueryParams,
+  getInvoiceDescriptionAndReason,
   getInvoiceStatusColor,
   getPrefix,
   getSubscriptionStatusColor,
@@ -210,8 +211,9 @@ export default function SubscriptionEmbed() {
                 {(invoices as any).map((item: any) => {
                   return (
                     <ListItem key={item.id} disableGutters sx={{ display: 'flex', justifyContent: 'space-between' }}>
-                      <Typography component="span" sx={{ flex: 3 }}>
+                      <Typography component="div" sx={{ flex: 3, gap: 1, display: 'flex', alignItems: 'center' }}>
                         {formatToDate(item.created_at, locale, 'YYYY-MM-DD')}
+                        <Status label={getInvoiceDescriptionAndReason(item, locale)?.type} />
                       </Typography>
                       <Typography component="span" sx={{ flex: 1, textAlign: 'right' }}>
                         {formatBNStr(item.total, item.paymentCurrency.decimal)}&nbsp;