@blocklet/payment-react 1.18.56 → 1.19.0

package/src/contexts/donate.tsx

@@ -162,7 +162,12 @@ function DonateProvider({
         <>
           {enableDonate && isAdmin && (
             <Stack spacing={1} sx={{ alignItems: 'center' }}>
-              <Typography color="text.secondary">{t('payment.checkout.donation.inactive')}</Typography>
+              <Typography
+                sx={{
+                  color: 'text.secondary',
+                }}>
+                {t('payment.checkout.donation.inactive')}
+              </Typography>
               <Button
                 size="small"
                 variant="outlined"
@@ -205,12 +210,6 @@ function useDonateContext() {
   return context;
 }
 
-DonateProvider.defaultProps = {
-  defaultSettings: {},
-  active: true,
-  enableDonate: false,
-};
-
 export const clearDonateCache = (mountLocation: string) => {
   const livemode = localStorage.getItem('livemode') !== 'false';
   const cacheKey = `donate-settings-${mountLocation}-${livemode}`;

package/src/contexts/payment.tsx

@@ -90,7 +90,13 @@ const syncToSpaceRequest = (userDid: string, spaceDid: string) => {
   });
 };
 
-function PaymentProvider({ session, connect, children, baseUrl, authToken }: PaymentContextProps) {
+function PaymentProvider({
+  session,
+  connect,
+  children,
+  baseUrl = undefined,
+  authToken = undefined,
+}: PaymentContextProps) {
   const [crossOriginLoading, setCrossOriginLoading] = useState(false);
 
   if (authToken) {
@@ -217,6 +223,4 @@ function usePaymentContext() {
   return context;
 }
 
-PaymentProvider.defaultProps = {};
-
 export { PaymentContext, PaymentProvider, Consumer as SettingsConsumer, usePaymentContext };

package/src/history/invoice/list.tsx

@@ -469,14 +469,22 @@ const InvoiceList = React.memo((props: Props & { onPay: (invoiceId: string) => v
   if (data && data.list.length === 0) {
     if (data.subscription && ['active', 'trialing'].includes(data.subscription.status)) {
       return (
-        <Typography color="text.secondary" sx={{ my: 0.5 }}>
+        <Typography
+          sx={{
+            color: 'text.secondary',
+            my: 0.5,
+          }}>
           {t('payment.customer.invoice.next', { date: formatToDatetime(data.subscription.current_period_end * 1000) })}
         </Typography>
       );
     }
 
     return (
-      <Typography color="text.secondary" sx={{ my: 0.5 }}>
+      <Typography
+        sx={{
+          color: 'text.secondary',
+          my: 0.5,
+        }}>
         {t('payment.customer.invoice.empty')}
       </Typography>
     );
@@ -502,21 +510,32 @@ const InvoiceList = React.memo((props: Props & { onPay: (invoiceId: string) => v
               <Stack
                 key={invoice.id}
                 direction="row"
-                sx={{ my: 1 }}
-                gap={{
-                  xs: 0.5,
-                  sm: 1.5,
-                  md: 3,
-                }}
-                alignItems="center"
-                flexWrap="nowrap">
-                <Box flex={2}>
+                sx={{
+                  gap: {
+                    xs: 0.5,
+                    sm: 1.5,
+                    md: 3,
+                  },
+
+                  alignItems: 'center',
+                  flexWrap: 'nowrap',
+                  my: 1,
+                }}>
+                <Box
+                  sx={{
+                    flex: 2,
+                  }}>
                   <a
                     href={link.url}
                     target={link.external ? '_blank' : target}
                     rel="noreferrer"
                     onClick={(e) => handleLinkClick(e, link)}>
-                    <Stack direction="row" alignItems="center" spacing={0.5}>
+                    <Stack
+                      direction="row"
+                      spacing={0.5}
+                      sx={{
+                        alignItems: 'center',
+                      }}>
                       <Typography component="span">{invoice.number}</Typography>
                       {link.external && (
                         <OpenInNewOutlined
@@ -530,25 +549,39 @@ const InvoiceList = React.memo((props: Props & { onPay: (invoiceId: string) => v
                     </Stack>
                   </a>
                 </Box>
-                <Box flex={1} textAlign="right">
+                <Box
+                  sx={{
+                    flex: 1,
+                    textAlign: 'right',
+                  }}>
                   <Typography sx={isVoid ? { textDecoration: 'line-through' } : {}}>
                     {formatBNStr(invoice.total, invoice.paymentCurrency.decimal)}&nbsp;
                     {invoice.paymentCurrency.symbol}
                   </Typography>
                 </Box>
-                <Box flex={1} textAlign="right">
+                <Box
+                  sx={{
+                    flex: 1,
+                    textAlign: 'right',
+                  }}>
                   <Typography>{formatToDate(invoice.created_at, locale, 'HH:mm:ss')}</Typography>
                 </Box>
                 {!action && (
                   <Box
-                    flex={2}
                     className="invoice-description"
-                    textAlign="right"
-                    sx={{ display: { xs: 'none', lg: 'inline-flex' } }}>
+                    sx={{
+                      flex: 2,
+                      textAlign: 'right',
+                      display: { xs: 'none', lg: 'inline-flex' },
+                    }}>
                     <Typography>{invoice.description || invoice.id}</Typography>
                   </Box>
                 )}
-                <Box flex={1} textAlign="right">
+                <Box
+                  sx={{
+                    flex: 1,
+                    textAlign: 'right',
+                  }}>
                   {action ? (
                     connect ? (
                       <Button
@@ -594,7 +627,10 @@ const InvoiceList = React.memo((props: Props & { onPay: (invoiceId: string) => v
           </Button>
         )}
         {!hasMore && data.count > size && (
-          <Typography color="text.secondary">
+          <Typography
+            sx={{
+              color: 'text.secondary',
+            }}>
             {t('common.noMore', { resource: t('payment.customer.invoices') })}
           </Typography>
         )}
@@ -603,7 +639,25 @@ const InvoiceList = React.memo((props: Props & { onPay: (invoiceId: string) => v
   );
 });
 
-export default function CustomerInvoiceList(props: Props) {
+export default function CustomerInvoiceList(rawProps: Props) {
+  const props = Object.assign(
+    {
+      customer_id: '',
+      subscription_id: '',
+      currency_id: '',
+      include_staking: false,
+      include_recovered_from: false,
+      status: 'open,paid,uncollectible',
+      pageSize: 10,
+      target: '_self',
+      action: '',
+      type: 'list',
+      onTableDataChange: () => {},
+      relatedSubscription: false,
+    },
+    rawProps
+  );
+  // eslint-disable-next-line react/prop-types
   const { action, type } = props;
   const { t, locale } = useLocaleContext();
   const { connect } = usePaymentContext();
@@ -649,21 +703,6 @@ export default function CustomerInvoiceList(props: Props) {
   return <InvoiceList {...props} onPay={onPay} />;
 }
 
-CustomerInvoiceList.defaultProps = {
-  customer_id: '',
-  subscription_id: '',
-  currency_id: '',
-  include_staking: false,
-  include_recovered_from: false,
-  status: 'open,paid,uncollectible',
-  pageSize: 10,
-  target: '_self',
-  action: '',
-  type: 'list',
-  onTableDataChange: () => {},
-  relatedSubscription: false,
-};
-
 const Root = styled(Stack)`
   @media (max-width: ${({ theme }) => theme.breakpoints.values.md}px) {
     svg.MuiSvgIcon-root {

package/src/history/payment/list.tsx

@@ -53,7 +53,14 @@ export default function CustomerPaymentList({ customer_id }: Props) {
   }
 
   if (data && data.list.length === 0) {
-    return <Typography color="text.secondary">{t('payment.customer.payment.empty')}</Typography>;
+    return (
+      <Typography
+        sx={{
+          color: 'text.secondary',
+        }}>
+        {t('payment.customer.payment.empty')}
+      </Typography>
+    );
   }
 
   const hasMore = data && data.list.length < data.count;
@@ -61,7 +68,12 @@ export default function CustomerPaymentList({ customer_id }: Props) {
   const grouped = groupByDate(data.list);
 
   return (
-    <Stack direction="column" gap={1} sx={{ mt: 1 }}>
+    <Stack
+      direction="column"
+      sx={{
+        gap: 1,
+        mt: 1,
+      }}>
       {Object.entries(grouped).map(([date, payments]) => (
         <Box key={date}>
           <Typography sx={{ fontWeight: 'bold', color: 'text.secondary', mt: 2, mb: 1 }}>{date}</Typography>
@@ -72,29 +84,51 @@ export default function CustomerPaymentList({ customer_id }: Props) {
                 xs: 'column',
                 sm: 'row',
               }}
-              sx={{ my: 1 }}
-              gap={{
-                xs: 0.5,
-                sm: 1.5,
-                md: 3,
-              }}
-              flexWrap="nowrap">
-              <Box flex={3}>
+              sx={{
+                gap: {
+                  xs: 0.5,
+                  sm: 1.5,
+                  md: 3,
+                },
+
+                flexWrap: 'nowrap',
+                my: 1,
+              }}>
+              <Box
+                sx={{
+                  flex: 3,
+                }}>
                 <Typography>{formatToDate(item.created_at)}</Typography>
               </Box>
-              <Box flex={2}>
-                <Typography textAlign="right">
+              <Box
+                sx={{
+                  flex: 2,
+                }}>
+                <Typography
+                  sx={{
+                    textAlign: 'right',
+                  }}>
                   {formatBNStr(item.amount_received, item.paymentCurrency.decimal)}&nbsp;
                   {item.paymentCurrency.symbol}
                 </Typography>
               </Box>
-              <Box flex={3}>
+              <Box
+                sx={{
+                  flex: 3,
+                }}>
                 <Status label={item.status} color={getPaymentIntentStatusColor(item.status)} />
               </Box>
-              <Box flex={3}>
+              <Box
+                sx={{
+                  flex: 3,
+                }}>
                 <Typography>{item.description || '-'}</Typography>
               </Box>
-              <Box flex={3} sx={{ minWidth: '220px' }}>
+              <Box
+                sx={{
+                  flex: 3,
+                  minWidth: '220px',
+                }}>
                 {(item.payment_details?.arcblock?.tx_hash ||
                   item.payment_details?.ethereum?.tx_hash ||
                   item.payment_details?.base?.tx_hash) && (
@@ -114,7 +148,10 @@ export default function CustomerPaymentList({ customer_id }: Props) {
           </Button>
         )}
         {!hasMore && data.count > pageSize && (
-          <Typography color="text.secondary">
+          <Typography
+            sx={{
+              color: 'text.secondary',
+            }}>
             {t('common.noMore', { resource: t('payment.customer.payments') })}
           </Typography>
         )}

package/src/hooks/keyboard.ts

@@ -14,7 +14,7 @@ type TabNavigationOptions<T> = {
   /** a selector to find navigable elements */
   selector?: string;
   /** an element container reference, limiting the query DOM range to improve performance */
-  containerRef?: RefObject<HTMLElement>;
+  containerRef?: RefObject<HTMLElement | null>;
   /** the type of the current value, can be 'index' or 'value' */
   valueType?: 'index' | 'value';
 };

package/src/payment/amount.tsx

@@ -3,7 +3,7 @@ import type { TypographyProps } from '@mui/material';
 
 type Props = { amount: string } & TypographyProps;
 
-export default function PaymentAmount({ amount, sx }: Props) {
+export default function PaymentAmount({ amount, sx = {} }: Props) {
   return (
     <Typography
       component="div"
@@ -19,8 +19,3 @@ export default function PaymentAmount({ amount, sx }: Props) {
     </Typography>
   );
 }
-
-PaymentAmount.defaultProps = {
-  // eslint-disable-next-line react/default-props-match-prop-types
-  sx: {},
-};

package/src/payment/donation-form.tsx

@@ -52,25 +52,19 @@ type Props = CheckoutContext &
     id: string;
   };
 
-PaymentInner.defaultProps = {
-  completed: false,
-  showCheckoutSummary: true,
-  formRender: {},
-};
-
 function PaymentInner({
   checkoutSession,
   paymentMethods,
   paymentLink,
   paymentIntent,
   customer,
-  completed,
+  completed = false,
   mode,
   onPaid,
   onError,
   onChange,
   action,
-  formRender,
+  formRender = {},
   benefits,
 }: MainProps) {
   const { t } = useLocaleContext();
@@ -227,7 +221,14 @@ function PaymentInner({
                 },
               }}
             />
-            <Stack direction="row" justifyContent="flex-end" alignItems="center" flexWrap="wrap" gap={1}>
+            <Stack
+              direction="row"
+              sx={{
+                justifyContent: 'flex-end',
+                alignItems: 'center',
+                flexWrap: 'wrap',
+                gap: 1,
+              }}>
               <Button
                 variant="outlined"
                 size="large"
@@ -244,7 +245,13 @@ function PaymentInner({
             )}
 
             <Stack sx={{ display: benefitsState.open ? 'none' : 'block' }}>
-              <Stack direction="row" justifyContent="space-between" alignItems="center" sx={{ mb: 2 }}>
+              <Stack
+                direction="row"
+                sx={{
+                  justifyContent: 'space-between',
+                  alignItems: 'center',
+                  mb: 2,
+                }}>
                 <Typography
                   title={t('payment.checkout.orderSummary')}
                   sx={{
@@ -311,7 +318,14 @@ function PaymentInner({
                 },
               }}
             />
-            <Stack direction="row" justifyContent="space-between" alignItems="center" flexWrap="wrap" gap={1}>
+            <Stack
+              direction="row"
+              sx={{
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                flexWrap: 'wrap',
+                gap: 1,
+              }}>
               {benefits &&
                 benefits.length > 0 &&
                 (benefitsState.open ? (
@@ -331,18 +345,20 @@ function PaymentInner({
                   </Typography>
                 ) : (
                   <Box
-                    display="flex"
-                    gap={0.5}
-                    alignItems="center"
                     onClick={() => setBenefitsState({ open: true })}
                     sx={{
+                      display: 'flex',
+                      gap: 0.5,
+                      alignItems: 'center',
                       color: 'text.secondary',
                       cursor: 'pointer',
+
                       '& .benefits-arrow': {
                         opacity: 0,
                         transform: 'translateX(-4px)',
                         transition: 'all 0.2s',
                       },
+
                       '&:hover': {
                         color: 'text.primary',
                         '& .benefits-arrow': {
@@ -358,13 +374,15 @@ function PaymentInner({
                 ))}
               {benefitsState.open ? null : (
                 <Box
-                  display="flex"
-                  gap={2}
                   sx={{
+                    display: 'flex',
+                    gap: 2,
+
                     flex: {
                       xs: 1,
                       md: 'auto',
                     },
+
                     justifyContent: 'flex-end',
                     whiteSpace: 'nowrap',
                   }}>
@@ -408,21 +426,14 @@ function PaymentInner({
   );
 }
 
-DonationForm.defaultProps = {
-  completed: false,
-  error: null,
-  showCheckoutSummary: true,
-  formRender: {},
-};
-
 export default function DonationForm({
   checkoutSession,
   paymentMethods,
   paymentIntent,
   paymentLink,
   customer,
-  completed,
-  error,
+  completed = false,
+  error = null,
   mode,
   onPaid,
   onError,
@@ -430,7 +441,7 @@ export default function DonationForm({
   goBack,
   action,
   showCheckoutSummary = true,
-  formRender,
+  formRender = {},
   id,
 }: Props) {
   const { t } = useLocaleContext();
@@ -473,7 +484,14 @@ export default function DonationForm({
     const footer = (
       <>
         <Divider sx={{ mt: { xs: '16px', md: '-24px' }, mb: { xs: '16px', md: '-16px' } }} />
-        <Stack direction="row" justifyContent="flex-end" alignItems="center" flexWrap="wrap" gap={1}>
+        <Stack
+          direction="row"
+          sx={{
+            justifyContent: 'flex-end',
+            alignItems: 'center',
+            flexWrap: 'wrap',
+            gap: 1,
+          }}>
           <Button variant="outlined" size="large" onClick={formRender?.onCancel}>
             {t('common.cancel')}
           </Button>
@@ -540,9 +558,9 @@ export default function DonationForm({
 
   return (
     <Stack
-      display="flex"
-      flexDirection="column"
       sx={{
+        display: 'flex',
+        flexDirection: 'column',
         height: mode === 'standalone' ? '100vh' : 'auto',
         overflow: isMobileSafariEnv ? 'visible' : 'hidden',
       }}>

package/src/payment/error.tsx

@@ -18,11 +18,24 @@ function getHeightStyle(mode: ModeType | undefined): any {
       return { height: 'auto', minHeight: 200 }; // 默认情况下，高度根据内容自动调整
   }
 }
-export default function PaymentError({ title, description, button, mode }: Props) {
+export default function PaymentError({ title, description, button = 'Back', mode = 'standalone' }: Props) {
   const heightStyle = getHeightStyle(mode);
   return (
-    <Stack sx={heightStyle} alignItems="center" justifyContent="center">
-      <Stack sx={{ width: '280px' }} direction="column" alignItems="center" justifyContent="center">
+    <Stack
+      sx={[
+        {
+          alignItems: 'center',
+          justifyContent: 'center',
+        },
+        ...(Array.isArray(heightStyle) ? heightStyle : [heightStyle]),
+      ]}>
+      <Stack
+        direction="column"
+        sx={{
+          alignItems: 'center',
+          justifyContent: 'center',
+          width: '280px',
+        }}>
         <Typography variant="h5" sx={{ mb: 2 }}>
           {title}
         </Typography>
@@ -45,8 +58,3 @@ export default function PaymentError({ title, description, button, mode }: Props
     </Stack>
   );
 }
-
-PaymentError.defaultProps = {
-  button: 'Back',
-  mode: 'standalone',
-};

package/src/payment/footer.tsx

@@ -1,8 +1,16 @@
-import { Typography } from '@mui/material';
+import { Typography, TypographyProps } from '@mui/material';
 
-export default function CheckoutFooter({ ...props }) {
+export default function CheckoutFooter(props: TypographyProps) {
   return (
-    <Typography color="text.lighter" fontSize={12} {...props}>
+    <Typography
+      {...props}
+      sx={[
+        {
+          color: 'text.lighter',
+          fontSize: 12,
+        },
+        ...(Array.isArray(props.sx) ? props.sx : [props.sx]),
+      ]}>
       Powered by{' '}
       <Typography component="span" sx={{ fontWeight: 'bold', fontSize: 12 }}>
         ArcBlock

package/src/payment/form/addon.tsx

@@ -10,7 +10,12 @@ export default function UserButtons() {
   const { session } = usePaymentContext();
 
   return (
-    <Stack direction="row" alignItems="center" justifyContent="space-between">
+    <Stack
+      direction="row"
+      sx={{
+        alignItems: 'center',
+        justifyContent: 'space-between',
+      }}>
       <LocaleSelector showText={false} />
       {session?.user ? (
         <SessionManager session={session} />

package/src/payment/form/address.tsx

@@ -14,13 +14,7 @@ type Props = {
   errorPosition?: 'right' | 'bottom';
 };
 
-AddressForm.defaultProps = {
-  sx: {},
-  fieldValidation: {},
-  errorPosition: 'right',
-};
-
-export default function AddressForm({ mode, stripe, sx = {}, fieldValidation, errorPosition }: Props) {
+export default function AddressForm({ mode, stripe, sx = {}, fieldValidation = {}, errorPosition = 'right' }: Props) {
   const { t, locale } = useLocaleContext();
   const { control } = useFormContext();
   const country = useWatch({ control, name: 'billing_address.country' });
@@ -85,6 +79,7 @@ export default function AddressForm({ mode, stripe, sx = {}, fieldValidation, er
                       render={({ field }) => (
                         <CountrySelect
                           {...field}
+                          ref={field.ref as unknown as React.RefObject<HTMLDivElement>}
                           sx={{
                             '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
                               borderColor: 'transparent',
@@ -132,6 +127,7 @@ export default function AddressForm({ mode, stripe, sx = {}, fieldValidation, er
                         render={({ field }) => (
                           <CountrySelect
                             {...field}
+                            ref={field.ref as unknown as React.RefObject<HTMLDivElement>}
                             sx={{
                               '.MuiOutlinedInput-notchedOutline': {
                                 borderColor: 'transparent !important',

package/src/payment/form/currency.tsx

@@ -27,7 +27,12 @@ export default function CurrencySelector({ value, currencies, onChange }: Props)
             variant="outlined"
             onClick={() => onChange(x.id, (x as any).method?.id)}
             className={selected ? 'cko-payment-card' : 'cko-payment-card-unselect'}>
-            <Stack direction="row" alignItems="center" sx={{ position: 'relative' }}>
+            <Stack
+              direction="row"
+              sx={{
+                alignItems: 'center',
+                position: 'relative',
+              }}>
               <Avatar src={x.logo} alt={x.name} sx={{ width: 40, height: 40, marginRight: '12px' }} />
               <div>
                 <Typography
@@ -36,7 +41,12 @@ export default function CurrencySelector({ value, currencies, onChange }: Props)
                   sx={{ fontSize: '16px', color: 'text.primary', fontWeight: '500' }}>
                   {x.symbol}
                 </Typography>
-                <Typography sx={{ fontSize: 14 }} color="text.lighter" gutterBottom>
+                <Typography
+                  gutterBottom
+                  sx={{
+                    color: 'text.lighter',
+                    fontSize: 14,
+                  }}>
                   {(x as any).method.name}
                 </Typography>
               </div>