payment-kit 1.18.56 → 1.19.0

package/src/pages/customer/recharge/subscription.tsx

@@ -254,12 +254,21 @@ export default function RechargePage() {
 
   return (
     <Root>
-      <Stack direction="row" justifyContent="space-between" alignItems="center" sx={{ position: 'relative' }}>
+      <Stack
+        direction="row"
+        sx={{
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          position: 'relative',
+        }}>
         <Stack
           direction="row"
           onClick={() => goBackOrFallback('/customer')}
-          alignItems="center"
-          sx={{ fontWeight: 'normal', cursor: 'pointer' }}>
+          sx={{
+            alignItems: 'center',
+            fontWeight: 'normal',
+            cursor: 'pointer',
+          }}>
           <ArrowBackOutlined fontSize="small" sx={{ mr: 0.5, color: 'text.secondary' }} />
           <Typography variant="h6" sx={{ color: 'text.secondary', fontWeight: 'normal' }}>
             {t('common.previous')}
@@ -269,7 +278,6 @@ export default function RechargePage() {
           {t('customer.recharge.view')}
         </Button>
       </Stack>
-
       <Box>
         <Box
           sx={{
@@ -279,15 +287,26 @@ export default function RechargePage() {
             flexDirection: { xs: 'column', sm: 'column', md: 'row' },
             alignItems: { xs: 'flex-start', sm: 'flex-start', md: 'center' },
           }}>
-          <Stack direction="row" justifyContent="space-between" alignItems="center">
-            <Stack direction="row" alignItems="center" flexWrap="wrap" gap={1}>
+          <Stack
+            direction="row"
+            sx={{
+              justifyContent: 'space-between',
+              alignItems: 'center',
+            }}>
+            <Stack
+              direction="row"
+              sx={{
+                alignItems: 'center',
+                flexWrap: 'wrap',
+                gap: 1,
+              }}>
               <SubscriptionDescription subscription={subscription} variant="h1" />
             </Stack>
           </Stack>
           <Stack
-            justifyContent="flex-start"
-            flexWrap="wrap"
             sx={{
+              justifyContent: 'flex-start',
+              flexWrap: 'wrap',
               flexDirection: { xs: 'column', sm: 'column', md: 'row' },
               alignItems: { xs: 'flex-start', sm: 'flex-start', md: 'center' },
               gap: { xs: 1, sm: 1, md: 3 },
@@ -341,7 +360,6 @@ export default function RechargePage() {
         </Box>
       </Box>
       <Divider />
-
       <Box sx={{ maxWidth: 600 }} ref={rechargeRef}>
         <Typography variant="h4" gutterBottom>
           {t('customer.recharge.title')}
@@ -373,8 +391,16 @@ export default function RechargePage() {
                     }
                   : undefined,
               }}>
-              <Stack direction="row" alignItems="center" spacing={1}>
-                <Stack flex={1}>
+              <Stack
+                direction="row"
+                spacing={1}
+                sx={{
+                  alignItems: 'center',
+                }}>
+                <Stack
+                  sx={{
+                    flex: 1,
+                  }}>
                   <Typography
                     variant="body1"
                     color="inherit"
@@ -402,7 +428,12 @@ export default function RechargePage() {
             <Stack sx={{ mb: 2, mt: 2, backgroundColor: 'background.default' }}>
               <Grid container spacing={2}>
                 {presetAmounts.map(({ amount: presetAmount, cycles }) => (
-                  <Grid item xs={6} sm={4} key={presetAmount}>
+                  <Grid
+                    key={presetAmount}
+                    size={{
+                      xs: 6,
+                      sm: 4,
+                    }}>
                     <Card
                       variant="outlined"
                       sx={{
@@ -421,7 +452,14 @@ export default function RechargePage() {
                           : {}),
                       }}>
                       <CardActionArea onClick={() => handleSelect(presetAmount)} sx={{ height: '100%' }}>
-                        <Stack direction="column" sx={{ p: 1 }} spacing={1} alignItems="center" justifyContent="center">
+                        <Stack
+                          direction="column"
+                          spacing={1}
+                          sx={{
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            p: 1,
+                          }}>
                           <Typography
                             variant="h6"
                             sx={{
@@ -430,7 +468,11 @@ export default function RechargePage() {
                             }}>
                             {presetAmount} {subscription.paymentCurrency.symbol}
                           </Typography>
-                          <Typography variant="caption" color="text.secondary">
+                          <Typography
+                            variant="caption"
+                            sx={{
+                              color: 'text.secondary',
+                            }}>
                             {formatEstimatedDuration(cycles)}
                           </Typography>
                         </Stack>
@@ -438,7 +480,11 @@ export default function RechargePage() {
                     </Card>
                   </Grid>
                 ))}
-                <Grid item xs={6} sm={4}>
+                <Grid
+                  size={{
+                    xs: 6,
+                    sm: 4,
+                  }}>
                   <Card
                     variant="outlined"
                     sx={{
@@ -455,7 +501,14 @@ export default function RechargePage() {
                       ...(customAmount ? { borderColor: 'primary.main', borderWidth: 1 } : {}),
                     }}>
                     <CardActionArea onClick={handleCustomSelect} sx={{ height: '100%' }}>
-                      <Stack direction="column" sx={{ p: 1 }} spacing={1} alignItems="center" justifyContent="center">
+                      <Stack
+                        direction="column"
+                        spacing={1}
+                        sx={{
+                          alignItems: 'center',
+                          justifyContent: 'center',
+                          p: 1,
+                        }}>
                         <Typography
                           variant="h6"
                           sx={{ fontWeight: 600, color: customAmount ? 'primary.main' : 'text.primary' }}>
@@ -479,19 +532,27 @@ export default function RechargePage() {
                   error={!!amountError}
                   helperText={amountError}
                   onChange={handleAmountChange}
-                  InputProps={{
-                    endAdornment: <Typography>{subscription.paymentCurrency.symbol}</Typography>,
-                    autoComplete: 'off',
-                    inputProps: {
-                      min: 0,
-                      max: MAX_SAFE_AMOUNT,
-                    },
-                  }}
                   sx={{ mt: 1 }}
                   inputRef={customInputRef}
+                  slotProps={{
+                    input: {
+                      endAdornment: <Typography>{subscription.paymentCurrency.symbol}</Typography>,
+                      autoComplete: 'off',
+                      inputProps: {
+                        min: 0,
+                        max: MAX_SAFE_AMOUNT,
+                      },
+                    },
+                  }}
                 />
                 {amount && Number(amount) > 0 && Number(cycleAmount) > 0 && !amountError && (
-                  <Typography variant="body2" sx={{ color: 'text.lighter', mt: '8px !important' }} fontSize={12}>
+                  <Typography
+                    variant="body2"
+                    sx={{
+                      fontSize: 12,
+                      color: 'text.lighter',
+                      mt: '8px !important',
+                    }}>
                     {formatEstimatedDuration(
                       Math.floor(Number(amount) / Number(cycleAmount)) < 1
                         ? parseFloat((Number(amount) / Number(cycleAmount)).toFixed(1))

package/src/pages/customer/refund/list.tsx

@@ -72,8 +72,12 @@ const RefundTable = memo(({ invoice_id }: Props) => {
         customBodyRenderLite: (_: string, index: number) => {
           const item = data.list[index] as TRefundExpanded;
           return (
-            <Typography component="strong" fontWeight={600}>
-              {formatBNStr(item?.amount, item?.paymentCurrency.decimal)}&nbsp;
+            <Typography
+              component="strong"
+              sx={{
+                fontWeight: 600,
+              }}>
+              {formatBNStr(item?.amount, item?.paymentCurrency.decimal)}
               {item?.paymentCurrency.symbol}
             </Typography>
           );
@@ -228,7 +232,14 @@ const RefundList = memo(({ invoice_id }: Props) => {
   }
 
   if (data && data.list.length === 0) {
-    return <Typography color="text.secondary">{t('payment.customer.refund.empty')}</Typography>;
+    return (
+      <Typography
+        sx={{
+          color: 'text.secondary',
+        }}>
+        {t('payment.customer.refund.empty')}
+      </Typography>
+    );
   }
 
   const hasMore = data && data.list.length < data.count;
@@ -236,7 +247,12 @@ const RefundList = memo(({ invoice_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>
@@ -248,31 +264,53 @@ const RefundList = memo(({ invoice_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, 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 ? capitalize(toLower(item.description.replace(/_/g, ' '))) : '-'}
                   </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) && (
@@ -293,7 +331,10 @@ const RefundList = memo(({ invoice_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>
         )}
@@ -302,14 +343,9 @@ const RefundList = memo(({ invoice_id }: Props) => {
   );
 });
 
-export default function CustomerRefundList(props: Props & { type?: 'table' | 'list' }) {
-  const { type, ...restProps } = props;
+export default function CustomerRefundList({ type = 'list', ...restProps }: Props & { type?: 'table' | 'list' }) {
   if (type === 'table') {
     return <RefundTable {...restProps} />;
   }
   return <RefundList {...restProps} />;
 }
-
-CustomerRefundList.defaultProps = {
-  type: 'list',
-};

package/src/pages/customer/subscription/change-payment.tsx

@@ -224,12 +224,21 @@ function CustomerSubscriptionChangePayment({ subscription, customer, onComplete
 
   return (
     <Stack direction="column" spacing={4} sx={{ maxWidth: '540px' }}>
-      <Stack className="page-header" direction="row" justifyContent="space-between" alignItems="center">
+      <Stack
+        className="page-header"
+        direction="row"
+        sx={{
+          justifyContent: 'space-between',
+          alignItems: 'center',
+        }}>
         <Stack
           direction="row"
-          alignItems="center"
-          sx={{ fontWeight: 'normal', cursor: 'pointer' }}
-          onClick={() => goBackOrFallback(`/customer/subscription/${subscription.id}`)}>
+          onClick={() => goBackOrFallback(`/customer/subscription/${subscription.id}`)}
+          sx={{
+            alignItems: 'center',
+            fontWeight: 'normal',
+            cursor: 'pointer',
+          }}>
           <ArrowBackOutlined fontSize="small" sx={{ mr: 0.5, color: 'text.secondary' }} />
           <SubscriptionDescription subscription={subscription} variant="h5" />
         </Stack>

package/src/pages/customer/subscription/change-plan.tsx

@@ -219,7 +219,12 @@ export default function CustomerSubscriptionChangePlan() {
 
   const getInfoRow = (label: string, value: string, prefix?: string) => {
     return (
-      <Stack direction="row" justifyContent="space-between" key={value}>
+      <Stack
+        direction="row"
+        key={value}
+        sx={{
+          justifyContent: 'space-between',
+        }}>
         <Typography variant="h6" sx={{ fontWeight: 'normal' }}>
           {label}
         </Typography>
@@ -233,12 +238,21 @@ export default function CustomerSubscriptionChangePlan() {
 
   return (
     <Stack direction="column" spacing={4} sx={{ mb: 4 }}>
-      <Stack className="page-header" direction="row" justifyContent="space-between" alignItems="center">
+      <Stack
+        className="page-header"
+        direction="row"
+        sx={{
+          justifyContent: 'space-between',
+          alignItems: 'center',
+        }}>
         <Stack
           direction="row"
-          alignItems="center"
-          sx={{ fontWeight: 'normal', cursor: 'pointer' }}
-          onClick={() => goBackOrFallback(`/customer/subscription/${data.subscription.id}`)}>
+          onClick={() => goBackOrFallback(`/customer/subscription/${data.subscription.id}`)}
+          sx={{
+            alignItems: 'center',
+            fontWeight: 'normal',
+            cursor: 'pointer',
+          }}>
           <ArrowBackOutlined fontSize="small" sx={{ mr: 0.5, color: 'text.secondary' }} />
           <SubscriptionDescription subscription={data.subscription} variant="h5" />
         </Stack>
@@ -268,7 +282,13 @@ export default function CustomerSubscriptionChangePlan() {
             {state.items.map((x: TLineItemExpanded) => {
               const { product } = x.price;
               return (
-                <Stack key={x.price_id} direction="row" alignItems="center" justifyContent="space-between">
+                <Stack
+                  key={x.price_id}
+                  direction="row"
+                  sx={{
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                  }}>
                   <InfoCard logo={product.images[0]} name={product.name} description={product.description} />
                   <Typography component="p" style={{ fontWeight: 'bold' }}>
                     {formatPrice(
@@ -294,7 +314,14 @@ export default function CustomerSubscriptionChangePlan() {
             <Divider />
             {getInfoRow(t('payment.customer.changePlan.remaining'), state.due)}
             <Divider />
-            <Stack direction="row" alignItems="center" justifyContent="flex-end" spacing={2} sx={{ pt: 2 }}>
+            <Stack
+              direction="row"
+              spacing={2}
+              sx={{
+                alignItems: 'center',
+                justifyContent: 'flex-end',
+                pt: 2,
+              }}>
               <LoadingButton
                 disabled={state.loading || state.paying}
                 onClick={() => setState({ priceId: '' })}

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

@@ -100,7 +100,7 @@ export default function CustomerSubscriptionDetail() {
     }
   );
 
-  const actionRef = useRef<ActionMethods>();
+  const actionRef = useRef<ActionMethods | undefined>(undefined);
 
   const enableOverdraftProtection = !!overdraftProtection?.enabled;
 
@@ -155,7 +155,12 @@ export default function CustomerSubscriptionDetail() {
     };
     if (!enabled) {
       return (
-        <Stack direction="row" spacing={1} alignItems="center">
+        <Stack
+          direction="row"
+          spacing={1}
+          sx={{
+            alignItems: 'center',
+          }}>
           <Typography sx={{ color: 'text.lighter' }}>{t('customer.overdraftProtection.disabled')}</Typography>
           <Button
             size="small"
@@ -195,9 +200,23 @@ export default function CustomerSubscriptionDetail() {
     }
 
     return (
-      <Stack direction="row" alignItems="center">
-        <Stack direction="row" spacing={1} alignItems="center">
-          <Stack direction="row" spacing={0.5} alignItems="center">
+      <Stack
+        direction="row"
+        sx={{
+          alignItems: 'center',
+        }}>
+        <Stack
+          direction="row"
+          spacing={1}
+          sx={{
+            alignItems: 'center',
+          }}>
+          <Stack
+            direction="row"
+            spacing={0.5}
+            sx={{
+              alignItems: 'center',
+            }}>
             <CheckCircle
               sx={{
                 fontSize: '16px',
@@ -234,7 +253,11 @@ export default function CustomerSubscriptionDetail() {
               sx={{ width: 16, height: 16 }}
               alt={data.paymentCurrency?.symbol}
             />
-            <Box display="flex" alignItems="baseline">
+            <Box
+              sx={{
+                display: 'flex',
+                alignItems: 'baseline',
+              }}>
               {formatBNStr(overdraftProtection?.unused, data.paymentCurrency.decimal)}
               <Typography
                 sx={{
@@ -283,20 +306,29 @@ export default function CustomerSubscriptionDetail() {
         <Stack
           className="page-header"
           direction="row"
-          justifyContent="space-between"
-          alignItems="center"
-          sx={{ position: 'relative' }}>
+          sx={{
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            position: 'relative',
+          }}>
           <Stack
             direction="row"
             onClick={() => navigate('/customer', { replace: true })}
-            alignItems="center"
-            sx={{ fontWeight: 'normal', cursor: 'pointer' }}>
+            sx={{
+              alignItems: 'center',
+              fontWeight: 'normal',
+              cursor: 'pointer',
+            }}>
             <ArrowBackOutlined fontSize="small" sx={{ mr: 0.5, color: 'text.secondary' }} />
             <Typography variant="h6" sx={{ color: 'text.secondary', fontWeight: 'normal' }}>
               {t('payment.customer.subscriptions.title')}
             </Typography>
           </Stack>
-          <Stack direction="row" gap={1}>
+          <Stack
+            direction="row"
+            sx={{
+              gap: 1,
+            }}>
             <SubscriptionActions
               subscription={data}
               onChange={(action) => {
@@ -332,45 +364,64 @@ export default function CustomerSubscriptionDetail() {
           </Stack>
         </Stack>
         <Box
-          mt={4}
           sx={{
+            mt: 4,
             display: 'flex',
+
             gap: {
               xs: 2,
               sm: 2,
               md: 5,
             },
+
             flexWrap: 'wrap',
+
             flexDirection: {
               xs: 'column',
               sm: 'column',
               md: 'row',
             },
+
             alignItems: {
               xs: 'flex-start',
               sm: 'flex-start',
               md: 'center',
             },
           }}>
-          <Stack direction="row" justifyContent="space-between" alignItems="center">
-            <Stack direction="row" alignItems="center" flexWrap="wrap" gap={1}>
+          <Stack
+            direction="row"
+            sx={{
+              justifyContent: 'space-between',
+              alignItems: 'center',
+            }}>
+            <Stack
+              direction="row"
+              sx={{
+                alignItems: 'center',
+                flexWrap: 'wrap',
+                gap: 1,
+              }}>
               <SubscriptionDescription subscription={data} variant="h1" />
             </Stack>
           </Stack>
           <Stack
             className="section-body"
-            justifyContent="flex-start"
-            flexWrap="wrap"
             sx={{
+              justifyContent: 'flex-start',
+              flexWrap: 'wrap',
+
               'hr.MuiDivider-root:last-child': {
                 display: 'none',
               },
+
               flexDirection: {
                 xs: 'column',
                 sm: 'column',
                 md: 'row',
               },
+
               alignItems: 'flex-start',
+
               gap: {
                 xs: 1,
                 sm: 1,
@@ -381,7 +432,12 @@ export default function CustomerSubscriptionDetail() {
             {showOverdraftProtection && (
               <InfoMetric
                 label={
-                  <Stack direction="row" alignItems="center" spacing={0.5}>
+                  <Stack
+                    direction="row"
+                    spacing={0.5}
+                    sx={{
+                      alignItems: 'center',
+                    }}>
                     <Typography component="span">{t('customer.overdraftProtection.title')}</Typography>
                     <MuiLink
                       href="https://www.arcblock.io/content/blog/en/payment-kit-v117-sub-guard#listen-to-the-audio-overview"
@@ -440,7 +496,12 @@ export default function CustomerSubscriptionDetail() {
       </Box>
       <Divider />
       <Box className="section" sx={{ containerType: 'inline-size' }}>
-        <Typography variant="h3" mb={3} className="section-header">
+        <Typography
+          variant="h3"
+          className="section-header"
+          sx={{
+            mb: 3,
+          }}>
           {t('admin.details')}
         </Typography>
         <InfoRowGroup
@@ -568,7 +629,12 @@ export default function CustomerSubscriptionDetail() {
       </Box>
       <Divider />
       <Box className="section">
-        <Typography variant="h3" mb={1.5} className="section-header">
+        <Typography
+          variant="h3"
+          className="section-header"
+          sx={{
+            mb: 1.5,
+          }}>
           {t('admin.products')}
         </Typography>
         <Box className="section-body">