payment-kit 1.15.34 → 1.15.35

package/src/components/webhook/attempts.tsx

@@ -2,7 +2,7 @@
 import CodeBlock from '@arcblock/ux/lib/CodeBlock';
 import { api, formatTime } from '@blocklet/payment-react';
 import type { Paginated, TEvent, TWebhookAttemptExpanded } from '@blocklet/payment-types';
-import { CheckCircleOutlined, ErrorOutlined, InfoOutlined } from '@mui/icons-material';
+import { CheckCircleOutlined, ErrorOutlined } from '@mui/icons-material';
 import {
   Box,
   Button,
@@ -15,15 +15,13 @@ import {
   ListSubheader,
   Stack,
   Typography,
-  Popper,
-  Paper,
 } from '@mui/material';
 import { useInfiniteScroll } from 'ahooks';
 import React, { useEffect, useState } from 'react';
 
 import { isEmpty } from 'lodash';
 import { isSuccessAttempt } from '../../libs/util';
-import InfoCard from '../info-card';
+import RequestInfoPopper, { RequestType } from './request-info';
 
 const fetchData = (params: Record<string, any> = {}): Promise<Paginated<TWebhookAttemptExpanded>> => {
   const search = new URLSearchParams();
@@ -48,7 +46,7 @@ const groupAttemptsByDate = (attempts: TWebhookAttemptExpanded[]) => {
 type Props = {
   event_id?: string;
   webhook_endpoint_id?: string;
-  event?: TEvent & { requestInfo?: { avatar: string; email: string; did: string } };
+  event?: TEvent & { requestInfo?: RequestInfo };
 };
 
 WebhookAttempts.defaultProps = {
@@ -72,7 +70,9 @@ export default function WebhookAttempts({ event_id, webhook_endpoint_id, event }
   const attempts = data?.list || [];
 
   // @ts-ignore
-  const [selected, setSelected] = useState<TWebhookAttemptExpanded>(null);
+  const [selected, setSelected] = useState<
+    (TWebhookAttemptExpanded & { event: TEvent & { requestInfo?: RequestInfo } }) | null
+  >(null);
   const groupedAttempts = groupAttemptsByDate(attempts);
 
   useEffect(() => {
@@ -85,35 +85,6 @@ export default function WebhookAttempts({ event_id, webhook_endpoint_id, event }
     setSelected(attempt);
   };
 
-  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
-
-  const handleClick = (e: React.MouseEvent<HTMLElement>) => {
-    setAnchorEl(anchorEl ? null : e.currentTarget);
-  };
-
-  useEffect(() => {
-    const handleClickOutside = (e: MouseEvent) => {
-      if (anchorEl && !anchorEl.contains(e.target as Node) && !(e.target as Element).closest('.popper-content')) {
-        setAnchorEl(null);
-      }
-    };
-
-    const handleScroll = (e: Event) => {
-      // @ts-ignore
-      if (anchorEl && !e.target?.closest('.popper-content')) {
-        setAnchorEl(null);
-      }
-    };
-
-    document.addEventListener('click', handleClickOutside);
-    window.addEventListener('scroll', handleScroll, true);
-
-    return () => {
-      document.removeEventListener('click', handleClickOutside);
-      window.removeEventListener('scroll', handleScroll, true);
-    };
-  }, [anchorEl]);
-
   if (loading) {
     return <CircularProgress />;
   }
@@ -172,7 +143,14 @@ export default function WebhookAttempts({ event_id, webhook_endpoint_id, event }
               <CodeBlock language="json">{JSON.stringify(selected.response_body, null, 2)}</CodeBlock>
             </Box>
             <Box>
-              <Typography variant="h6">Request</Typography>
+              <Stack direction="row" alignItems="center" spacing={1}>
+                <Typography variant="h6">Request</Typography>
+                <RequestInfoPopper
+                  // @ts-ignore
+                  requestInfo={selected?.event?.requestInfo}
+                  request={selected?.event.request as RequestType}
+                />
+              </Stack>
               {/* @ts-ignore */}
               <CodeBlock language="json">{JSON.stringify(selected.event, null, 2)}</CodeBlock>
             </Box>
@@ -182,91 +160,11 @@ export default function WebhookAttempts({ event_id, webhook_endpoint_id, event }
           <Box>
             <Stack direction="row" alignItems="center" spacing={1}>
               <Typography variant="h6">Event Data</Typography>
-              <>
-                {/* @ts-ignore */}
-                <InfoOutlined
-                  fontSize="small"
-                  onClick={handleClick}
-                  sx={{
-                    color: 'text.secondary',
-                    opacity: 0.6,
-                    cursor: 'pointer',
-                  }}
-                />
-                <Popper
-                  open={Boolean(anchorEl)}
-                  anchorEl={anchorEl}
-                  placement="right"
-                  sx={{
-                    zIndex: 1000,
-                    '@media (max-width: 600px)': {
-                      '& .MuiPaper-root': {
-                        width: 'calc(100vw - 32px)',
-                        maxWidth: 'none',
-                      },
-                    },
-                  }}
-                  modifiers={[
-                    {
-                      name: 'preventOverflow',
-                      options: {
-                        boundary: window,
-                        altAxis: true,
-                        padding: 16,
-                      },
-                    },
-                    {
-                      name: 'flip',
-                      options: {
-                        fallbackPlacements: ['bottom'],
-                      },
-                    },
-                    {
-                      name: 'matchWidth',
-                      enabled: true,
-                      fn: ({ state }) => {
-                        if (window.innerWidth <= 600) {
-                          state.styles.popper = {
-                            ...state.styles.popper,
-                            width: 'calc(100vw - 32px)',
-                            maxWidth: 'none',
-                          };
-                        }
-                        return state;
-                      },
-                    },
-                  ]}>
-                  <Paper
-                    className="popper-content"
-                    elevation={3}
-                    sx={{
-                      p: 2,
-                      border: '1px solid',
-                      borderColor: 'divider',
-                      maxWidth: 300,
-                      '@media (max-width: 600px)': {
-                        maxWidth: 'none',
-                        margin: '0 auto',
-                      },
-                    }}>
-                    {event.requestInfo ? (
-                      <>
-                        <Typography variant="caption" color="text.secondary" sx={{ mb: 1, display: 'block' }}>
-                          Requested by:
-                        </Typography>
-                        <InfoCard
-                          logo={event.requestInfo.avatar}
-                          name={event.requestInfo.email}
-                          description={event.requestInfo.did || event.request.requested_by}
-                          size={40}
-                        />
-                      </>
-                    ) : (
-                      <Typography>Requested by: {event.request?.requested_by || 'system'}</Typography>
-                    )}
-                  </Paper>
-                </Popper>
-              </>
+              <RequestInfoPopper
+                // @ts-ignore
+                requestInfo={event.requestInfo}
+                request={event.request as RequestType}
+              />
             </Stack>
             {/* @ts-ignore */}
             <CodeBlock language="json">{JSON.stringify(event.data, null, 2)}</CodeBlock>

package/src/components/webhook/request-info.tsx

@@ -0,0 +1,139 @@
+import { InfoOutlined } from '@mui/icons-material';
+import { Popper, Paper, Typography } from '@mui/material';
+import { useState, useEffect } from 'react';
+import InfoCard from '../info-card';
+
+export type RequestInfo = {
+  avatar: string;
+  email: string;
+  did: string;
+};
+
+export type RequestType = {
+  requested_by: string;
+};
+type Props = {
+  requestInfo?: RequestInfo;
+  request?: RequestType;
+};
+RequestInfoPopper.defaultProps = {
+  requestInfo: null,
+  request: null,
+};
+export default function RequestInfoPopper({ requestInfo, request }: Props) {
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+
+  const handleClick = (e: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(anchorEl ? null : e.currentTarget);
+  };
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (anchorEl && !anchorEl.contains(e.target as Node) && !(e.target as Element).closest('.popper-content')) {
+        setAnchorEl(null);
+      }
+    };
+
+    const handleScroll = (e: Event) => {
+      if (anchorEl && !(e.target as Element)?.closest('.popper-content')) {
+        setAnchorEl(null);
+      }
+    };
+
+    document.addEventListener('click', handleClickOutside);
+    window.addEventListener('scroll', handleScroll, true);
+
+    return () => {
+      document.removeEventListener('click', handleClickOutside);
+      window.removeEventListener('scroll', handleScroll, true);
+    };
+  }, [anchorEl]);
+
+  return (
+    <>
+      <InfoOutlined
+        fontSize="small"
+        // @ts-ignore
+        onClick={(e) => handleClick(e)}
+        sx={{
+          color: 'text.secondary',
+          opacity: 0.6,
+          cursor: 'pointer',
+        }}
+      />
+      <Popper
+        open={Boolean(anchorEl)}
+        anchorEl={anchorEl}
+        placement="right"
+        sx={{
+          zIndex: 1000,
+          '@media (max-width: 600px)': {
+            '& .MuiPaper-root': {
+              width: 'calc(100vw - 32px)',
+              maxWidth: 'none',
+            },
+          },
+        }}
+        modifiers={[
+          {
+            name: 'preventOverflow',
+            options: {
+              boundary: window,
+              altAxis: true,
+              padding: 16,
+            },
+          },
+          {
+            name: 'flip',
+            options: {
+              fallbackPlacements: ['bottom'],
+            },
+          },
+          {
+            name: 'matchWidth',
+            enabled: true,
+            fn: ({ state }) => {
+              if (window.innerWidth <= 600) {
+                state.styles.popper = {
+                  ...state.styles.popper,
+                  width: 'calc(100vw - 32px)',
+                  maxWidth: 'none',
+                };
+              }
+              return state;
+            },
+          },
+        ]}>
+        <Paper
+          className="popper-content"
+          elevation={3}
+          sx={{
+            p: 2,
+            border: '1px solid',
+            borderColor: 'divider',
+            maxWidth: 360,
+            '@media (max-width: 600px)': {
+              maxWidth: 'none',
+              margin: '0 auto',
+            },
+          }}>
+          {requestInfo ? (
+            <>
+              <Typography variant="caption" color="text.secondary" sx={{ mb: 1, display: 'block' }}>
+                Requested by:
+              </Typography>
+              <InfoCard
+                logo={requestInfo.avatar}
+                name={requestInfo.email}
+                description={requestInfo.did || request?.requested_by}
+                size={40}
+              />
+            </>
+          ) : (
+            <Typography>Requested by: {request?.requested_by || 'system'}</Typography>
+          )}
+        </Paper>
+      </Popper>
+    </>
+  );
+}

package/src/locales/en.tsx

@@ -22,6 +22,7 @@ export default flat({
     latinOnly:
       'At least one letter and cannot include Chinese characters and special characters such as <, >、"、’ or \\',
     loading: 'Loading...',
+    rechargeTime: 'Recharge Time',
   },
   admin: {
     balances: 'Balances',
@@ -252,11 +253,13 @@ export default flat({
         label: 'Name',
         placeholder: 'Not consumer facing',
       },
+      adjustableQuantityError: 'Minimum must be less than maximum',
     },
     pricingTable: {
       view: 'View pricing table',
       add: 'Create pricing table',
       save: 'Create',
+      openLink: 'Open URL',
       copyLink: 'Copy URL',
       saved: 'Pricing table successfully saved',
       edit: 'Edit pricing table',
@@ -628,6 +631,7 @@ export default flat({
       custom: 'Custom',
       estimatedDuration: '{duration} {unit} est.',
       intervals: 'intervals',
+      history: 'Recharge History',
     },
   },
 });

package/src/locales/zh.tsx

@@ -21,6 +21,7 @@ export default flat({
     invalidCharacters: '无效字符',
     latinOnly: '至少包含一个字母，并且不能包含中文字符和特殊字符如 <, >、"、’ 或 \\',
     loading: '加载中...',
+    rechargeTime: '充值时间',
   },
   admin: {
     balances: '余额',
@@ -245,6 +246,7 @@ export default flat({
         label: '名称',
         placeholder: '不向消费者展示',
       },
+      adjustableQuantityError: '最小数量必须小于最大数量',
     },
     payout: {
       list: '对外支付',
@@ -257,6 +259,7 @@ export default flat({
       view: '查看定价表',
       add: '创建定价表',
       save: '创建',
+      openLink: '打开URL',
       copyLink: '复制URL',
       saved: '定价表已成功保存',
       edit: '编辑定价表',
@@ -283,6 +286,10 @@ export default flat({
       attention: '失败的付款',
       refundError: '退款申请失败',
       refundSuccess: '退款申请已成功创建',
+      cancelRefund: '取消退款',
+      refundCanceled: '取消退款成功',
+      refundCanceledError: '取消退款失败',
+      refundCanceledTip: '您确定要取消退款申请吗？取消后，退款将不再进行。',
       refundForm: {
         reason: '退款原因',
         amount: '退款金额',
@@ -616,6 +623,7 @@ export default flat({
       estimatedDuration: '预计可用 {duration} {unit}',
       custom: '自定义',
       intervals: '个周期',
+      history: '充值记录',
     },
   },
 });

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

@@ -104,7 +104,7 @@ export default function RefundDetail(props: { id: string }) {
               {t('admin.refunds')}
             </Typography>
           </Stack>
-          <RefundActions data={data} variant="normal" />
+          <RefundActions data={data} variant="normal" onChange={() => runAsync()} />
         </Stack>
         <Box
           mt={4}
@@ -234,7 +234,7 @@ export default function RefundDetail(props: { id: string }) {
                 value={
                   <Stack direction="row" alignItems="center" spacing={1}>
                     <Status label={data.status} color={getRefundStatusColor(data.status)} />
-                    {data.last_attempt_error && (
+                    {data.last_attempt_error && data.status !== 'canceled' && (
                       <Tooltip
                         title={
                           <pre style={{ whiteSpace: 'break-spaces' }}>

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

@@ -35,6 +35,7 @@ export default function CreatePaymentLink() {
 
   const methods = useForm<PaymentLink>({
     shouldUnregister: false,
+    mode: 'onChange',
     defaultValues: {
       name: '',
       line_items: [],
@@ -160,7 +161,9 @@ export default function CreatePaymentLink() {
               // @ts-ignore
               current={current}
               // @ts-ignore
-              onChange={(v: string) => setCurrent(v)}
+              onChange={(v: string) => {
+                methods.handleSubmit(() => setCurrent(v))();
+              }}
               style={{ width: '100%' }}
               scrollButtons="auto"
             />

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

@@ -20,6 +20,7 @@ import { useRequest, useSetState } from 'ahooks';
 import { useEffect } from 'react';
 import { Link, useParams, useSearchParams } from 'react-router-dom';
 
+import { useSessionContext } from '../../../contexts/session';
 import Currency from '../../../components/currency';
 import CustomerLink from '../../../components/customer/link';
 import InfoRow from '../../../components/info-row';
@@ -47,6 +48,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 onPay = () => {
     setState({ paying: true });
@@ -94,6 +96,10 @@ export default function CustomerInvoiceDetail() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [error]);
 
+  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">{formatError(error)}</Alert>;
   }

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/detail.tsx

@@ -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