@blocklet/payment-react 1.18.56 → 1.19.1

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 | null>}
                           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 | null>}
                             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>

package/src/payment/form/index.tsx

@@ -110,9 +110,11 @@ type UserInfo = {
 type FastCheckoutInfo = {
   open: boolean;
   loading: boolean;
-  sourceType: 'balance' | 'delegation';
+  sourceType: 'balance' | 'delegation' | 'credit';
   amount: string;
   payer?: string;
+  availableCredit?: string;
+  balance?: string;
 };
 
 const setUserFormValues = (
@@ -149,11 +151,6 @@ const setUserFormValues = (
   });
 };
 
-PaymentForm.defaultProps = {
-  onlyShowBtn: false,
-  isDonation: false,
-};
-
 // FIXME: https://stripe.com/docs/elements/address-element
 // TODO: https://country-regions.github.io/react-country-region-selector/
 // https://www.npmjs.com/package/postal-codes-js
@@ -169,7 +166,7 @@ export default function PaymentForm({
   onError,
   // mode,
   action,
-  onlyShowBtn,
+  onlyShowBtn = false,
   isDonation = false,
 }: PageData) {
   // const theme = useTheme();
@@ -211,6 +208,9 @@ export default function PaymentForm({
     customerLimited?: boolean;
     stripePaying: boolean;
     fastCheckoutInfo: FastCheckoutInfo | null;
+    creditInsufficientInfo: {
+      open: boolean;
+    } | null;
   }>({
     submitting: false,
     paying: false,
@@ -221,6 +221,7 @@ export default function PaymentForm({
     customerLimited: false,
     stripePaying: false,
     fastCheckoutInfo: null,
+    creditInsufficientInfo: null,
   });
 
   const currencies = flattenPaymentMethods(paymentMethods);
@@ -423,6 +424,10 @@ export default function PaymentForm({
     setState({ fastCheckoutInfo: null });
   };
 
+  const handleCreditInsufficientClose = () => {
+    setState({ creditInsufficientInfo: null });
+  };
+
   const openConnect = () => {
     try {
       if (!['arcblock', 'ethereum', 'base'].includes(method.type)) {
@@ -481,7 +486,30 @@ export default function PaymentForm({
       });
 
       if (['arcblock', 'ethereum', 'base'].includes(method.type)) {
-        if (
+        // 优先判断 credit 支付
+        if (paymentCurrency?.type === 'credit') {
+          if (result.data.creditSufficient === true) {
+            // 如果是 credit 支付且有足够额度，显示 credit 确认弹窗
+            setState({
+              fastCheckoutInfo: {
+                open: true,
+                loading: false,
+                sourceType: 'credit',
+                amount: result.data.fastPayInfo?.amount || '0',
+                payer: result.data.fastPayInfo?.payer,
+                availableCredit: result.data.fastPayInfo?.amount || '0',
+                balance: result.data.fastPayInfo?.token?.balance || '0',
+              },
+            });
+          } else {
+            // 如果是 credit 支付但额度不足，显示额度不足弹窗
+            setState({
+              creditInsufficientInfo: {
+                open: true,
+              },
+            });
+          }
+        } else if (
           (result.data.balance?.sufficient || result.data.delegation?.sufficient) &&
           !isDonationMode &&
           result.data.fastPayInfo
@@ -586,54 +614,96 @@ export default function PaymentForm({
   }, [state.submitting, state.paying, state.stripePaying, quantityInventoryStatus, payable]); // eslint-disable-line react-hooks/exhaustive-deps
 
   const balanceLink = getTokenBalanceLink(method, state.fastCheckoutInfo?.payer || '');
+
   const FastCheckoutConfirmDialog = state.fastCheckoutInfo && (
     <ConfirmDialog
       onConfirm={handleFastCheckoutConfirm}
       onCancel={handleFastCheckoutCancel}
-      title={t('payment.checkout.fastPay.title')}
+      title={
+        state.fastCheckoutInfo.sourceType === 'credit'
+          ? t('payment.checkout.fastPay.credit.title')
+          : t('payment.checkout.fastPay.title')
+      }
       message={
-        <Stack>
-          <Typography>{t('payment.checkout.fastPay.autoPaymentReason')}</Typography>
-          <Divider sx={{ mt: 1.5, mb: 1.5 }} />
-          <Stack spacing={1}>
-            <Stack flexDirection="row" alignItems="center" justifyContent="space-between">
-              <Typography color="text.primary" sx={{ whiteSpace: 'nowrap' }}>
-                {t('payment.checkout.fastPay.payer')}
-              </Typography>
-              <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
-                <DID did={state.fastCheckoutInfo.payer || ''} compact responsive={false} />
-                {balanceLink && (
-                  <Tooltip title={t('payment.checkout.fastPay.balanceLink')} placement="top">
-                    <OpenInNew
-                      sx={{
-                        color: 'text.lighter',
-                        fontSize: '0.85rem',
-                        cursor: 'pointer',
-                        '&:hover': { color: 'text.primary' },
-                      }}
-                      onClick={() => {
-                        window.open(balanceLink, '_blank');
-                      }}
-                    />
-                  </Tooltip>
-                )}
-              </Box>
-            </Stack>
-            <Stack flexDirection="row" alignItems="center" justifyContent="space-between">
-              <Typography color="text.primary">{t('payment.checkout.fastPay.amount')}</Typography>
-              <Typography>
-                {fromUnitToToken(state.fastCheckoutInfo.amount, paymentCurrency?.decimal || 18).toString()}{' '}
-                {paymentCurrency?.symbol}
-              </Typography>
+        state.fastCheckoutInfo.sourceType === 'credit' ? (
+          <Typography>
+            {t('payment.checkout.fastPay.credit.meteringSubscriptionMessage', {
+              available: `${fromUnitToToken(state.fastCheckoutInfo?.balance || '0', paymentCurrency?.decimal || 18).toString()} ${paymentCurrency?.symbol}`,
+            })}
+          </Typography>
+        ) : (
+          <Stack>
+            <Typography>{t('payment.checkout.fastPay.autoPaymentReason')}</Typography>
+            <Divider sx={{ mt: 1.5, mb: 1.5 }} />
+            <Stack spacing={1}>
+              <Stack
+                sx={{
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                }}>
+                <Typography
+                  sx={{
+                    color: 'text.primary',
+                    whiteSpace: 'nowrap',
+                  }}>
+                  {t('payment.checkout.fastPay.payer')}
+                </Typography>
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+                  <DID did={state.fastCheckoutInfo.payer || ''} compact responsive={false} />
+                  {balanceLink && (
+                    <Tooltip title={t('payment.checkout.fastPay.balanceLink')} placement="top">
+                      <OpenInNew
+                        sx={{
+                          color: 'text.lighter',
+                          fontSize: '0.85rem',
+                          cursor: 'pointer',
+                          '&:hover': { color: 'text.primary' },
+                        }}
+                        onClick={() => {
+                          window.open(balanceLink, '_blank');
+                        }}
+                      />
+                    </Tooltip>
+                  )}
+                </Box>
+              </Stack>
+              <Stack
+                sx={{
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                }}>
+                <Typography
+                  sx={{
+                    color: 'text.primary',
+                  }}>
+                  {t('payment.checkout.fastPay.amount')}
+                </Typography>
+                <Typography>
+                  {fromUnitToToken(state.fastCheckoutInfo.amount, paymentCurrency?.decimal || 18).toString()}{' '}
+                  {paymentCurrency?.symbol}
+                </Typography>
+              </Stack>
             </Stack>
           </Stack>
-        </Stack>
+        )
       }
       loading={state.fastCheckoutInfo.loading}
       color="primary"
     />
   );
 
+  const CreditInsufficientDialog = state.creditInsufficientInfo && (
+    <ConfirmDialog
+      onConfirm={handleCreditInsufficientClose}
+      onCancel={handleCreditInsufficientClose}
+      title={t('payment.checkout.fastPay.credit.insufficientTitle')}
+      message={<Typography>{t('payment.checkout.fastPay.credit.insufficientMessage')}</Typography>}
+      confirm={t('common.confirm')}
+    />
+  );
+
   if (onlyShowBtn) {
     return (
       <>
@@ -686,6 +756,7 @@ export default function PaymentForm({
           />
         )}
         {FastCheckoutConfirmDialog}
+        {CreditInsufficientDialog}
       </>
     );
   }
@@ -708,7 +779,12 @@ export default function PaymentForm({
             {t('payment.checkout.paymentDetails')}
           </Typography>
           <Fade in>
-            <Stack direction="column" alignItems="flex-start" className="cko-payment-methods">
+            <Stack
+              direction="column"
+              className="cko-payment-methods"
+              sx={{
+                alignItems: 'flex-start',
+              }}>
               <Stack direction="row" sx={{ width: '100%' }}>
                 <Controller
                   name="payment_currency"
@@ -808,7 +884,6 @@ export default function PaymentForm({
         </Stack>
       </Fade>
       <Divider sx={{ mt: 2.5, mb: 2.5 }} />
-
       <Fade in>
         <Stack className="cko-payment-submit">
           <Box className="cko-payment-submit-btn">
@@ -872,6 +947,7 @@ export default function PaymentForm({
         />
       )}
       {FastCheckoutConfirmDialog}
+      {CreditInsufficientDialog}
     </>
   );
 }

package/src/payment/form/stripe/form.tsx

@@ -19,7 +19,7 @@ export type StripeCheckoutFormProps = {
   customer: TCustomer;
   mode: string;
   onConfirm: Function;
-  returnUrl: string;
+  returnUrl?: string;
 };
 
 const PaymentElementContainer = styled('div')`
@@ -349,7 +349,3 @@ export default function StripeCheckout({
     </Dialog>
   );
 }
-
-StripeCheckout.defaultProps = {
-  returnUrl: '',
-};

package/src/payment/header.tsx

@@ -28,8 +28,20 @@ export default function PaymentHeader({ checkoutSession }: Props) {
   }, [domSize, theme]);
 
   return (
-    <Stack className="cko-header" direction="row" spacing={1} alignItems="center" justifyContent="space-between">
-      <Stack direction="row" spacing={1} alignItems="center">
+    <Stack
+      className="cko-header"
+      direction="row"
+      spacing={1}
+      sx={{
+        alignItems: 'center',
+        justifyContent: 'space-between',
+      }}>
+      <Stack
+        direction="row"
+        spacing={1}
+        sx={{
+          alignItems: 'center',
+        }}>
         <Avatar
           variant="square"
           src={window.blocklet.appLogo}

package/src/payment/index.tsx

@@ -30,6 +30,7 @@ import {
   getStatementDescriptor,
   isMobileSafari,
   isValidCountry,
+  showStaking,
 } from '../libs/util';
 import type { CheckoutCallbacks, CheckoutContext, CheckoutFormData } from '../types';
 import PaymentError from './error';
@@ -47,18 +48,13 @@ import { getCurrencyPreference } from '../libs/currency';
 // eslint-disable-next-line react/no-unused-prop-types
 type Props = CheckoutContext & CheckoutCallbacks & { completed?: boolean; error?: any; showCheckoutSummary?: boolean };
 
-PaymentInner.defaultProps = {
-  completed: false,
-  showCheckoutSummary: true,
-};
-
 function PaymentInner({
   checkoutSession,
   paymentMethods,
   paymentLink,
   paymentIntent,
   customer,
-  completed,
+  completed = false,
   mode,
   onPaid,
   onError,
@@ -213,6 +209,19 @@ function PaymentInner({
     }
   };
 
+  const onQuantityChange = async (itemId: string, quantity: number) => {
+    try {
+      const { data } = await api.put(`/api/checkout-sessions/${state.checkoutSession.id}/adjust-quantity`, {
+        itemId,
+        quantity,
+      });
+      setState({ checkoutSession: data });
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatError(err));
+    }
+  };
+
   const onCancelCrossSell = async () => {
     try {
       const { data } = await api.delete(`/api/checkout-sessions/${state.checkoutSession.id}/cross-sell`);
@@ -268,10 +277,11 @@ function PaymentInner({
                   // @ts-ignore
                   state.checkoutSession.subscription_data?.min_stake_amount || 0
                 )}
-                showStaking={method.type === 'arcblock' && !state.checkoutSession.subscription_data?.no_stake}
+                showStaking={showStaking(method, currency, !!state.checkoutSession.subscription_data?.no_stake)}
                 currency={currency}
                 onUpsell={onUpsell}
                 onDownsell={onDownsell}
+                onQuantityChange={onQuantityChange}
                 onApplyCrossSell={onApplyCrossSell}
                 onCancelCrossSell={onCancelCrossSell}
                 onChangeAmount={onChangeAmount}
@@ -279,6 +289,7 @@ function PaymentInner({
                 crossSellBehavior={state.checkoutSession.cross_sell_behavior}
                 donationSettings={paymentLink?.donation_settings}
                 action={action}
+                completed={completed}
               />
               {mode === 'standalone' && !isMobile && (
                 <CheckoutFooter className="cko-footer" sx={{ color: 'text.lighter' }} />
@@ -332,20 +343,14 @@ function PaymentInner({
   );
 }
 
-Payment.defaultProps = {
-  completed: false,
-  error: null,
-  showCheckoutSummary: true,
-};
-
 export default function Payment({
   checkoutSession,
   paymentMethods,
   paymentIntent,
   paymentLink,
   customer,
-  completed,
-  error,
+  completed = false,
+  error = null,
   mode,
   onPaid,
   onError,
@@ -435,9 +440,9 @@ export default function Payment({
 
   return (
     <Stack
-      display="flex"
-      flexDirection="column"
       sx={{
+        display: 'flex',
+        flexDirection: 'column',
         height: mode === 'standalone' ? '100vh' : 'auto',
         overflow: isMobileSafariEnv ? 'visible' : 'hidden',
       }}>
@@ -630,21 +635,21 @@ export const Root: React.FC<RootProps> = styled(Box)<RootProps>`
   }
 
   .product-item {
-    border-radius: ${({ theme }) => `${2 * theme.shape.borderRadius}px`};
+    border-radius: ${({ theme }) => `${2 * (theme.shape.borderRadius as number)}px`};
     border: 1px solid;
     border-color: ${({ theme }) => theme.palette.grey[100]};
     .product-item-content {
       padding: 16px;
       background: ${({ theme }) => theme.palette.grey[50]};
-      border-top-left-radius: ${({ theme }) => `${2 * theme.shape.borderRadius}px`};
-      border-top-right-radius: ${({ theme }) => `${2 * theme.shape.borderRadius}px`};
+      border-top-left-radius: ${({ theme }) => `${2 * (theme.shape.borderRadius as number)}px`};
+      border-top-right-radius: ${({ theme }) => `${2 * (theme.shape.borderRadius as number)}px`};
     }
     .product-item-upsell {
       margin-top: 0;
       padding: 16px;
       background: ${({ theme }) => theme.palette.grey[100]};
-      border-bottom-left-radius: ${({ theme }) => `${2 * theme.shape.borderRadius}px`};
-      border-bottom-right-radius: ${({ theme }) => `${2 * theme.shape.borderRadius}px`};
+      border-bottom-left-radius: ${({ theme }) => `${2 * (theme.shape.borderRadius as number)}px`};
+      border-bottom-right-radius: ${({ theme }) => `${2 * (theme.shape.borderRadius as number)}px`};
     }
   }
 

package/src/payment/product-card.tsx

@@ -11,10 +11,24 @@ type Props = {
 };
 
 // FIXME: @wangshijun add image filter for logo
-export default function ProductCard({ size, variant, name, logo, description, extra }: Props) {
+export default function ProductCard({
+  size = 48,
+  variant = 'rounded',
+  name,
+  logo = '',
+  description = '',
+  extra = undefined,
+}: Props) {
   const s = { width: size, height: size };
   return (
-    <Stack direction="row" alignItems="center" spacing={1} flex={2} sx={{ width: '100%' }}>
+    <Stack
+      direction="row"
+      spacing={1}
+      sx={{
+        alignItems: 'center',
+        flex: 2,
+        width: '100%',
+      }}>
       {logo ? (
         // @ts-ignore
         <Avatar src={logo} alt={name} variant={variant} sx={s} />
@@ -26,28 +40,45 @@ export default function ProductCard({ size, variant, name, logo, description, ex
       )}
       <Stack
         direction="column"
-        alignItems="flex-start"
-        justifyContent="space-around"
-        sx={{ flexShrink: 1, overflow: 'hidden' }}>
+        sx={{
+          alignItems: 'flex-start',
+          justifyContent: 'space-around',
+          flexShrink: 1,
+          overflow: 'hidden',
+        }}>
         <Typography
           className="cko-ellipsis"
           variant="body1"
           title={name}
-          sx={{ fontWeight: 500, mb: 0.5, lineHeight: 1.2, fontSize: 16 }}
-          color="text.primary">
+          sx={{
+            color: 'text.primary',
+            fontWeight: 500,
+            mb: 0.5,
+            lineHeight: 1.2,
+            fontSize: 16,
+          }}>
           {name}
         </Typography>
         {description && (
           <Typography
             variant="body1"
             title={description}
-            sx={{ fontSize: '0.74375rem', mb: 0.5, lineHeight: 1.2, textAlign: 'left' }}
-            color="text.lighter">
+            sx={{
+              color: 'text.lighter',
+              fontSize: '0.74375rem',
+              mb: 0.5,
+              lineHeight: 1.2,
+              textAlign: 'left',
+            }}>
             {description}
           </Typography>
         )}
         {extra && (
-          <Box sx={{ fontSize: '0.74375rem' }} color="text.lighter">
+          <Box
+            sx={{
+              color: 'text.lighter',
+              fontSize: '0.74375rem',
+            }}>
             {extra}
           </Box>
         )}
@@ -55,11 +86,3 @@ export default function ProductCard({ size, variant, name, logo, description, ex
     </Stack>
   );
 }
-
-ProductCard.defaultProps = {
-  logo: '',
-  size: 48,
-  description: '',
-  variant: 'rounded',
-  extra: undefined,
-};