@blocklet/payment-react 1.18.56 → 1.19.0

package/src/payment/form/index.tsx

@@ -149,11 +149,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 +164,7 @@ export default function PaymentForm({
   onError,
   // mode,
   action,
-  onlyShowBtn,
+  onlyShowBtn = false,
   isDonation = false,
 }: PageData) {
   // const theme = useTheme();
@@ -596,8 +591,17 @@ export default function PaymentForm({
           <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' }}>
+            <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 }}>
@@ -619,8 +623,18 @@ export default function PaymentForm({
                 )}
               </Box>
             </Stack>
-            <Stack flexDirection="row" alignItems="center" justifyContent="space-between">
-              <Typography color="text.primary">{t('payment.checkout.fastPay.amount')}</Typography>
+            <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}
@@ -708,7 +722,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 +827,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">

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

@@ -47,18 +47,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,
@@ -332,20 +327,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 +424,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 +619,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,
-};

package/src/payment/product-donation.tsx

@@ -265,17 +265,24 @@ export default function ProductDonation({
   return (
     <Box
       ref={containerRef}
-      display="flex"
-      flexDirection="column"
-      alignItems="flex-start"
-      gap={1.5}
       onKeyDown={handleKeyDown}
       tabIndex={0}
-      sx={{ outline: 'none' }}>
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+        gap: 1.5,
+        outline: 'none',
+      }}>
       {supportPreset && (
         <Grid container spacing={2}>
           {presets.map((amount) => (
-            <Grid item xs={6} sm={3} key={amount}>
+            <Grid
+              size={{
+                xs: 6,
+                sm: 3,
+              }}
+              key={amount}>
               <Card
                 variant="outlined"
                 className="tab-navigable-card"
@@ -302,19 +309,30 @@ export default function ProductDonation({
                   aria-selected={formatAmount(state.selected) === formatAmount(amount) && !state.custom}>
                   <Stack
                     direction="row"
-                    sx={{ py: 1.5, px: 1.5 }}
                     spacing={0.5}
-                    alignItems="center"
-                    justifyContent="center">
+                    sx={{
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      py: 1.5,
+                      px: 1.5,
+                    }}>
                     <Avatar src={currency?.logo} sx={{ width: 16, height: 16, mr: 0.5 }} alt={currency?.symbol} />
                     <Typography
                       component="strong"
-                      lineHeight={1}
                       variant="h3"
-                      sx={{ fontVariantNumeric: 'tabular-nums', fontWeight: 400 }}>
+                      sx={{
+                        lineHeight: 1,
+                        fontVariantNumeric: 'tabular-nums',
+                        fontWeight: 400,
+                      }}>
                       {amount}
                     </Typography>
-                    <Typography lineHeight={1} fontSize={14} color="text.secondary">
+                    <Typography
+                      sx={{
+                        lineHeight: 1,
+                        fontSize: 14,
+                        color: 'text.secondary',
+                      }}>
                       {currency?.symbol}
                     </Typography>
                   </Stack>
@@ -323,7 +341,12 @@ export default function ProductDonation({
             </Grid>
           ))}
           {supportCustom && (
-            <Grid item xs={6} sm={3} key="custom">
+            <Grid
+              size={{
+                xs: 6,
+                sm: 3,
+              }}
+              key="custom">
               <Card
                 variant="outlined"
                 className="tab-navigable-card"
@@ -344,11 +367,19 @@ export default function ProductDonation({
                 <CardActionArea onClick={handleCustomSelect} tabIndex={0} aria-selected={state.custom}>
                   <Stack
                     direction="row"
-                    sx={{ py: 1.5, px: 1.5 }}
                     spacing={0.5}
-                    alignItems="center"
-                    justifyContent="center">
-                    <Typography variant="h3" lineHeight={1} sx={{ fontWeight: 400 }}>
+                    sx={{
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      py: 1.5,
+                      px: 1.5,
+                    }}>
+                    <Typography
+                      variant="h3"
+                      sx={{
+                        lineHeight: 1,
+                        fontWeight: 400,
+                      }}>
                       {t('common.custom')}
                     </Typography>
                   </Stack>
@@ -368,36 +399,6 @@ export default function ProductDonation({
           error={!!state.error}
           helperText={state.error}
           inputRef={customInputRef}
-          InputProps={{
-            endAdornment: (
-              <Stack direction="row" spacing={0.5} alignItems="center" sx={{ ml: 1 }}>
-                <IconButton
-                  size="small"
-                  onClick={handleCustomSelect}
-                  disabled={state.animating}
-                  sx={{
-                    mr: 0.5,
-                    opacity: state.animating ? 0.5 : 1,
-                    transition: 'all 0.2s ease',
-                    '&:hover': {
-                      transform: 'scale(1.2)',
-                      transition: 'transform 0.3s ease',
-                    },
-                  }}
-                  aria-label={t('common.random')}>
-                  <AutoAwesomeIcon fontSize="small" />
-                </IconButton>
-                <Avatar src={currency?.logo} sx={{ width: 16, height: 16 }} alt={currency?.symbol} />
-                <Typography>{currency?.symbol}</Typography>
-              </Stack>
-            ),
-            autoComplete: 'off',
-            sx: {
-              '& input': {
-                transition: 'all 0.25s ease',
-              },
-            },
-          }}
           sx={{
             mt: defaultPreset !== '0' ? 0 : 1,
             '& .MuiInputBase-root': {
@@ -414,7 +415,44 @@ export default function ProductDonation({
               WebkitAppearance: 'none',
               margin: 0,
             },
+            '& input': {
+              transition: 'all 0.25s ease',
+            },
+          }}
+          slotProps={{
+            input: {
+              endAdornment: (
+                <Stack
+                  direction="row"
+                  spacing={0.5}
+                  sx={{
+                    alignItems: 'center',
+                    ml: 1,
+                  }}>
+                  <IconButton
+                    size="small"
+                    onClick={handleCustomSelect}
+                    disabled={state.animating}
+                    sx={{
+                      mr: 0.5,
+                      opacity: state.animating ? 0.5 : 1,
+                      transition: 'all 0.2s ease',
+                      '&:hover': {
+                        transform: 'scale(1.2)',
+                        transition: 'transform 0.3s ease',
+                      },
+                    }}
+                    aria-label={t('common.random')}>
+                    <AutoAwesomeIcon fontSize="small" />
+                  </IconButton>
+                  <Avatar src={currency?.logo} sx={{ width: 16, height: 16 }} alt={currency?.symbol} />
+                  <Typography>{currency?.symbol}</Typography>
+                </Stack>
+              ),
+              autoComplete: 'off',
+            },
           }}
+          autoComplete="off"
         />
       )}
     </Box>

package/src/payment/product-item.tsx

@@ -27,20 +27,14 @@ type Props = {
   children?: React.ReactNode;
 };
 
-ProductItem.defaultProps = {
-  mode: 'normal',
-  children: null,
-  trialEnd: 0,
-};
-
 export default function ProductItem({
   item,
   items,
   trialInDays,
   trialEnd = 0,
   currency,
-  mode,
-  children,
+  mode = 'normal',
+  children = null,
   onUpsell,
   onDownsell,
 }: Props) {
@@ -60,28 +54,52 @@ export default function ProductItem({
   }, [trialInDays, trialEnd, pricing, item, locale]);
 
   return (
-    <Stack direction="column" alignItems="flex-start" spacing={1} sx={{ width: '100%' }} className="product-item">
-      <Stack direction="column" alignItems="flex-start" sx={{ width: '100%' }} className="product-item-content">
+    <Stack
+      direction="column"
+      spacing={1}
+      className="product-item"
+      sx={{
+        alignItems: 'flex-start',
+        width: '100%',
+      }}>
+      <Stack
+        direction="column"
+        className="product-item-content"
+        sx={{
+          alignItems: 'flex-start',
+          width: '100%',
+        }}>
         <Stack
           direction="row"
-          alignItems="center"
-          flexWrap="wrap"
           spacing={0.5}
-          justifyContent="space-between"
-          sx={{ width: '100%' }}>
+          sx={{
+            alignItems: 'center',
+            flexWrap: 'wrap',
+            justifyContent: 'space-between',
+            width: '100%',
+          }}>
           <ProductCard
             logo={item.price.product?.images[0]}
             name={item.price.product?.name}
             // description={item.price.product?.description}
             extra={
-              <Box display="flex" alignItems="center">
+              <Box
+                sx={{
+                  display: 'flex',
+                  alignItems: 'center',
+                }}>
                 {item.price.type === 'recurring' && item.price.recurring
                   ? [pricing.quantity, t('common.billed', { rule: `${formatRecurring(item.upsell_price?.recurring || item.price.recurring, true, 'per', locale)} ${metered}` })].filter(Boolean).join(', ') // prettier-ignore
                   : pricing.quantity}
               </Box>
             }
           />
-          <Stack direction="column" alignItems="flex-end" flex={1}>
+          <Stack
+            direction="column"
+            sx={{
+              alignItems: 'flex-end',
+              flex: 1,
+            }}>
             <Typography sx={{ color: 'text.primary', fontWeight: 500, whiteSpace: 'nowrap' }} gutterBottom>
               {primaryText}
             </Typography>
@@ -107,10 +125,12 @@ export default function ProductItem({
       {canUpsell && !item.upsell_price_id && item.price.upsell?.upsells_to && (
         <Stack
           direction="row"
-          alignItems="center"
-          justifyContent="space-between"
-          sx={{ width: '100%' }}
-          className="product-item-upsell">
+          className="product-item-upsell"
+          sx={{
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            width: '100%',
+          }}>
           <Typography
             component="label"
             htmlFor="upsell-switch"
@@ -148,10 +168,12 @@ export default function ProductItem({
       {canUpsell && item.upsell_price_id && (
         <Stack
           direction="row"
-          alignItems="center"
-          justifyContent="space-between"
-          sx={{ width: '100%' }}
-          className="product-item-upsell">
+          className="product-item-upsell"
+          sx={{
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            width: '100%',
+          }}>
           <Typography
             component="label"
             htmlFor="upsell-switch"

package/src/payment/product-skeleton.tsx

@@ -5,16 +5,17 @@ export default function ProductSkeleton({ count }: { count: number }) {
     <Fade in>
       <Stack
         direction="column"
-        alignItems="center"
-        padding={4}
         spacing={1}
         sx={{
+          alignItems: 'center',
+          padding: 4,
           width: 320,
           border: '1px solid',
           borderColor: 'grey.100',
           borderRadius: 1,
           transition: 'border-color 0.3s ease 0s, box-shadow 0.3s ease 0s',
           boxShadow: '0 4px 8px rgba(0, 0, 0, 20%)',
+
           '&:hover': {
             borderColor: '#ddd',
             boxShadow: '0 8px 16px rgba(0, 0, 0, 20%)',

package/src/payment/skeleton/donation.tsx

@@ -18,9 +18,19 @@ export default function DonationSkeleton() {
             },
           }}
         />
-        <Stack direction="row" justifyContent="space-between" spacing={2}>
+        <Stack
+          direction="row"
+          spacing={2}
+          sx={{
+            justifyContent: 'space-between',
+          }}>
           <Skeleton variant="text" sx={{ fontSize: '1.5rem', width: '40%' }} />
-          <Box display="flex" alignItems="center" gap={2}>
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: 2,
+            }}>
             <Box>
               <Skeleton height={60} width={80} />
             </Box>

package/src/payment/skeleton/overview.tsx

@@ -4,11 +4,21 @@ export default function OverviewSkeleton() {
   return (
     <Fade in>
       <Stack direction="column">
-        <Stack direction="row" alignItems="center" spacing={2}>
+        <Stack
+          direction="row"
+          spacing={2}
+          sx={{
+            alignItems: 'center',
+          }}>
           <Skeleton variant="text" sx={{ fontSize: '1.75rem', width: '40%' }} />
         </Stack>
         <Skeleton sx={{ mt: 2 }} variant="rounded" height={100} />
-        <Typography mt={2} component="div" variant="h4">
+        <Typography
+          component="div"
+          variant="h4"
+          sx={{
+            mt: 2,
+          }}>
           <Skeleton />
         </Typography>
         <Typography component="div" variant="h2">