payment-kit 1.15.33 → 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/billing/invoices/detail.tsx

@@ -322,6 +322,21 @@ export default function InvoiceDetail(props: { id: string }) {
                   alignItems={InfoAlignItems}
                 />
               )}
+              {data.billing_reason === 'stake' && data?.metadata?.payment_details?.arcblock?.tx_hash && (
+                <InfoRow
+                  label={t('common.stakeTxHash')}
+                  value={
+                    <TxLink
+                      details={{
+                        arcblock: { tx_hash: data.metadata?.payment_details?.arcblock?.tx_hash, payer: '' },
+                      }}
+                      method={data.paymentMethod}
+                    />
+                  }
+                  direction={InfoDirection}
+                  alignItems={InfoAlignItems}
+                />
+              )}
               {data.subscription && (
                 <InfoRow
                   label={t('admin.subscription.name')}

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

@@ -1,5 +1,5 @@
 import InvoiceList from '../../../../components/invoice/list';
 
 export default function InvoicesList() {
-  return <InvoiceList features={{ customer: true, toolbar: true, filter: true }} />;
+  return <InvoiceList features={{ customer: true, toolbar: true, filter: true }} include_staking />;
 }

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

@@ -1,7 +1,15 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import { TxLink, api, formatError, formatSubscriptionProduct, formatTime, useMobile } from '@blocklet/payment-react';
+import {
+  TxLink,
+  api,
+  formatError,
+  formatSubscriptionProduct,
+  formatTime,
+  useMobile,
+  hasDelegateTxHash,
+} from '@blocklet/payment-react';
 import type { TProduct, TSubscriptionExpanded } from '@blocklet/payment-types';
 import { ArrowBackOutlined } from '@mui/icons-material';
 import { Alert, Box, Button, CircularProgress, Divider, Stack, Typography } from '@mui/material';
@@ -268,7 +276,7 @@ export default function SubscriptionDetail(props: { id: string }) {
                 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} />}
@@ -276,7 +284,7 @@ export default function SubscriptionDetail(props: { id: string }) {
                   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={
@@ -322,7 +330,7 @@ export default function SubscriptionDetail(props: { id: string }) {
           <Box className="section">
             <SectionHeader title={t('admin.invoices')} />
             <Box className="section-body">
-              <InvoiceList features={{ customer: true, toolbar: false }} subscription_id={data.id} />
+              <InvoiceList features={{ customer: true, toolbar: false }} subscription_id={data.id} include_staking />
             </Box>
           </Box>
           <Divider />

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

@@ -367,6 +367,7 @@ export default function CustomerDetail(props: { id: string }) {
                 features={{ customer: false, toolbar: false }}
                 customer_id={data.customer.id}
                 status={['open', 'paid', 'uncollectible', 'draft', 'void'].join(',')}
+                include_staking
               />
             </Box>
           </Box>

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

@@ -318,7 +318,7 @@ export default function CustomerHome() {
         )}
       </Box>
       <Box className="section-body">
-        <CustomerInvoiceList customer_id={data.id} type="table" />
+        <CustomerInvoiceList customer_id={data.id} type="table" include_staking />
       </Box>
     </Box>
   );

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

@@ -6,6 +6,7 @@ import {
   TxGas,
   TxLink,
   api,
+  formatAmount,
   formatError,
   formatTime,
   getInvoiceStatusColor,
@@ -19,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';
@@ -46,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 });
@@ -93,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>;
   }
@@ -101,9 +108,10 @@ export default function CustomerInvoiceDetail() {
     return <CircularProgress />;
   }
 
-  const isSlash =
-    data.paymentMethod?.type === 'arcblock' && data.paymentIntent?.payment_details?.arcblock?.type === 'slash';
+  const isStake = data.paymentMethod?.type === 'arcblock' && data.billing_reason === 'stake';
+  const isSlashStake = data.paymentMethod?.type === 'arcblock' && data.billing_reason.includes('slash_stake');
 
+  const paymentDetails = data.paymentIntent?.payment_details || data.metadata?.payment_details;
   return (
     <InvoiceDetailRoot direction="column" spacing={3} sx={{ my: 2 }}>
       <Stack direction="row" justifyContent="space-between">
@@ -263,12 +271,20 @@ export default function CustomerInvoiceDetail() {
               alignItems={InfoAlignItems}
             />
           )}
-          {data.paymentIntent && data.paymentIntent.payment_details && (
+          {paymentDetails && (
             <InfoRow
-              label={t(`common.${data.paymentIntent.payment_details?.arcblock?.type || 'transfer'}TxHash`)}
-              value={
-                <TxLink details={data.paymentIntent.payment_details} method={data.paymentMethod} mode="customer" />
+              label={
+                isStake ? t('common.stakeTxHash') : t(`common.${paymentDetails?.arcblock?.type || 'transfer'}TxHash`)
               }
+              value={<TxLink details={paymentDetails} method={data.paymentMethod} mode="customer" />}
+              direction={InfoDirection}
+              alignItems={InfoAlignItems}
+            />
+          )}
+          {(isStake || isSlashStake) && (
+            <InfoRow
+              label={isSlashStake ? t('common.slashStakeAmount') : t('common.stakeAmount')}
+              value={`${formatAmount(data.total, data.paymentCurrency.decimal)} ${data.paymentCurrency.symbol}`}
               direction={InfoDirection}
               alignItems={InfoAlignItems}
             />
@@ -289,15 +305,19 @@ export default function CustomerInvoiceDetail() {
           )}
         </Stack>
       </Box>
-      {!isSlash && (
+      {!isSlashStake && (
         <>
-          <Divider />
-          <Box className="section">
-            <Typography variant="h3" mb={1.5} className="section-header">
-              {t('payment.customer.products')}
-            </Typography>
-            <InvoiceTable invoice={data} simple />
-          </Box>
+          {!isStake && (
+            <>
+              <Divider />
+              <Box className="section">
+                <Typography variant="h3" mb={1.5} className="section-header">
+                  {t('payment.customer.products')}
+                </Typography>
+                <InvoiceTable invoice={data} simple />
+              </Box>
+            </>
+          )}
           <Divider />
           <Box className="section">
             <Typography variant="h3" className="section-header">