payment-kit 1.18.55 → 1.19.0

package/src/pages/customer/index.tsx

@@ -105,7 +105,14 @@ const CurrencyCard = memo(
 const CardSkeleton = memo(({ height = 100 }: { height: number }) => {
   return (
     <Box className="base-card section">
-      <Box className="section-header" display="flex" justifyContent="space-between" alignItems="center" mb={2}>
+      <Box
+        className="section-header"
+        sx={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          mb: 2,
+        }}>
         <Skeleton variant="text" width={150} height={32} />
       </Box>
       <Skeleton variant="rectangular" height={height} />
@@ -279,7 +286,12 @@ export default function CustomerHome() {
       <Box className="base-card section section-subscription">
         <Box className="section-header">
           <Typography variant="h3">{t('customer.subscription.title')}</Typography>
-          <Stack direction="row" spacing={1} alignItems="center">
+          <Stack
+            direction="row"
+            spacing={1}
+            sx={{
+              alignItems: 'center',
+            }}>
             <NotificationPreference />
             {subscriptionStatus && (
               <FormControl
@@ -340,14 +352,16 @@ export default function CustomerHome() {
             <Typography variant="h3">{t('admin.customer.summary.stats')}</Typography>
           </Box>
           <Stack
-            gap={2}
-            mt={2}
             sx={{
+              gap: 2,
+              mt: 2,
               display: 'grid',
+
               gridTemplateColumns: {
                 xs: 'repeat(1, 1fr)',
                 md: 'repeat(2, 1fr)',
               },
+
               '@container (max-width: 600px)': {
                 gridTemplateColumns: 'repeat(1, 1fr)',
               },
@@ -368,8 +382,17 @@ export default function CustomerHome() {
                     borderColor: 'grey.100',
                     boxShadow: 1,
                   }}>
-                  <Stack flexDirection="row" justifyContent="space-between">
-                    <Box alignItems="center" display="flex" gap={1}>
+                  <Stack
+                    sx={{
+                      flexDirection: 'row',
+                      justifyContent: 'space-between',
+                    }}>
+                    <Box
+                      sx={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        gap: 1,
+                      }}>
                       <Avatar src={c?.logo} alt={c?.symbol} sx={{ width: 18, height: 18 }} />
                       <Typography
                         variant="h5"
@@ -377,7 +400,11 @@ export default function CustomerHome() {
                         sx={{ fontSize: '16px', color: 'text.primary', fontWeight: '500' }}>
                         {c?.symbol}
                       </Typography>
-                      <Typography sx={{ fontSize: 12 }} color="text.lighter">
+                      <Typography
+                        sx={{
+                          color: 'text.lighter',
+                          fontSize: 12,
+                        }}>
                         {c?.methodName}
                       </Typography>
                     </Box>
@@ -461,15 +488,14 @@ export default function CustomerHome() {
     </Box>
   );
 
-  const RevenueCard =
-    loadingCard || !hasRevenues ? null : (
-      <Box className="base-card section section-revenue">
-        <Box className="section-header">
-          <Typography variant="h3">{t('customer.payout.title')}</Typography>
-        </Box>
-        <CustomerRevenueList setHasRevenues={setHasRevenues} />
+  const RevenueCard = loadingCard ? null : (
+    <Box className="base-card section section-revenue" sx={{ visibility: hasRevenues ? 'visible' : 'hidden' }}>
+      <Box className="section-header">
+        <Typography variant="h3">{t('customer.payout.title')}</Typography>
       </Box>
-    );
+      <CustomerRevenueList setHasRevenues={setHasRevenues} />
+    </Box>
+  );
 
   return (
     <Content>

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

@@ -128,18 +128,32 @@ export default function CustomerInvoiceDetail() {
   const paymentDetails = data.paymentIntent?.payment_details || data.metadata?.payment_details;
   return (
     <InvoiceDetailRoot direction="column" spacing={3}>
-      <Stack direction="row" justifyContent="space-between">
+      <Stack
+        direction="row"
+        sx={{
+          justifyContent: 'space-between',
+        }}>
         <Stack
           direction="row"
           onClick={() => goBackOrFallback('/customer')}
-          alignItems="center"
-          sx={{ fontWeight: 'normal', padding: '10px 0', cursor: 'pointer' }}>
+          sx={{
+            alignItems: 'center',
+            fontWeight: 'normal',
+            padding: '10px 0',
+            cursor: 'pointer',
+          }}>
           <ArrowBackOutlined fontSize="small" sx={{ mr: 0.5, color: 'text.secondary' }} />
           <Typography variant="h6" sx={{ color: 'text.secondary', fontWeight: 'normal' }}>
             {t('common.previous')}
           </Typography>
         </Stack>
-        <Stack direction="row" spacing={1} justifyContent="flex-end" alignItems="center">
+        <Stack
+          direction="row"
+          spacing={1}
+          sx={{
+            justifyContent: 'flex-end',
+            alignItems: 'center',
+          }}>
           {['open', 'paid', 'uncollectible'].includes(data.status) && !isDonation && <Download data={data} />}
           {data?.paymentLink?.donation_settings?.reference && (
             <Button
@@ -164,49 +178,68 @@ export default function CustomerInvoiceDetail() {
         </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,
+            }}>
             <Typography variant="h1">{data.number}</Typography>
           </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: {
               xs: 'flex-start',
               sm: 'flex-start',
               md: 'center',
             },
+
             gap: {
               xs: 1,
               sm: 1,
@@ -232,7 +265,11 @@ export default function CustomerInvoiceDetail() {
               label={t('admin.subscription.name')}
               value={
                 <Link to={`/customer/subscription/${data.subscription.id}`}>
-                  <Typography variant="body1" color="text.link">
+                  <Typography
+                    variant="body1"
+                    sx={{
+                      color: 'text.link',
+                    }}>
                     {data.subscription.description || data.subscription.id}
                   </Typography>
                 </Link>
@@ -252,7 +289,12 @@ export default function CustomerInvoiceDetail() {
       </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('payment.customer.invoice.details')}
         </Typography>
         <InfoRowGroup
@@ -331,11 +373,13 @@ export default function CustomerInvoiceDetail() {
               value={
                 <Typography
                   variant="body1"
-                  color="text.link"
-                  sx={{ cursor: 'pointer' }}
                   component="a"
                   onClick={() => {
                     window.open(joinURL(getPrefix(), `/customer/invoice/${data.relatedInvoice?.id}`), '_self');
+                  }}
+                  sx={{
+                    color: 'text.link',
+                    cursor: 'pointer',
                   }}>
                   {data.relatedInvoice?.number}
                 </Typography>
@@ -367,7 +411,12 @@ export default function CustomerInvoiceDetail() {
             <>
               <Divider />
               <Box className="section">
-                <Typography variant="h3" mb={1.5} className="section-header">
+                <Typography
+                  variant="h3"
+                  className="section-header"
+                  sx={{
+                    mb: 1.5,
+                  }}>
                   {t('payment.customer.products')}
                 </Typography>
                 <InvoiceTable invoice={data} simple />

package/src/pages/customer/invoice/past-due.tsx

@@ -109,12 +109,20 @@ export default function CustomerInvoicePastDue() {
 
   return (
     <Stack direction="column" spacing={3} sx={{ my: 2 }}>
-      <Stack direction="row" alignItems="center" justifyContent="space-between">
+      <Stack
+        direction="row"
+        sx={{
+          alignItems: 'center',
+          justifyContent: 'space-between',
+        }}>
         <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')}

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

@@ -60,12 +60,21 @@ export default function PayoutDetail() {
   return (
     <Root direction="column" spacing={2.5} mb={4}>
       <Box>
-        <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/payouts')}>
+            onClick={() => goBackOrFallback('/customer/payouts')}
+            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')}
@@ -82,37 +91,60 @@ export default function PayoutDetail() {
           )}
         </Stack>
         <Box
-          mt={4}
-          mb={3}
           sx={{
+            mt: 4,
+            mb: 3,
             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">
-              <Stack direction="row" alignItems="center" spacing={1}>
+          <Stack
+            direction="row"
+            sx={{
+              justifyContent: 'space-between',
+              alignItems: 'center',
+            }}>
+            <Stack
+              direction="row"
+              sx={{
+                alignItems: 'center',
+              }}>
+              <Stack
+                direction="row"
+                spacing={1}
+                sx={{
+                  alignItems: 'center',
+                }}>
                 <Avatar
                   src={data.paymentCurrency.logo}
                   alt={data.paymentCurrency.symbol}
                   variant="square"
                   sx={{ width: '52px', height: '52px', borderRadius: 0.5 }}
                 />
-                <Stack direction="column" alignItems="flex-start" justifyContent="space-around">
+                <Stack
+                  direction="column"
+                  sx={{
+                    alignItems: 'flex-start',
+                    justifyContent: 'space-around',
+                  }}>
                   <Amount amount={total} sx={{ my: 0, fontSize: '1.75rem', lineHeight: '32px' }} />
                 </Stack>
               </Stack>
@@ -120,18 +152,22 @@ export default function PayoutDetail() {
           </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,
@@ -218,7 +254,14 @@ export default function PayoutDetail() {
             },
           },
         }}>
-        <Box flex={1} className="payment-link-column-1" sx={{ gap: 2.5, display: 'flex', flexDirection: 'column' }}>
+        <Box
+          className="payment-link-column-1"
+          sx={{
+            flex: 1,
+            gap: 2.5,
+            display: 'flex',
+            flexDirection: 'column',
+          }}>
           <Box className="section">
             <SectionHeader title={t('common.detail')} />
             <InfoRowGroup

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

@@ -322,7 +322,13 @@ export default function BalanceRechargePage() {
 
   return (
     <Root>
-      <Stack direction="row" justifyContent="space-between" alignItems="center" sx={{ position: 'relative' }}>
+      <Stack
+        direction="row"
+        sx={{
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          position: 'relative',
+        }}>
         <Button
           startIcon={<ArrowBackOutlined />}
           variant="text"
@@ -332,19 +338,27 @@ export default function BalanceRechargePage() {
           {t('common.previous')}
         </Button>
       </Stack>
-
       <Typography variant="h2" gutterBottom>
         {currency?.symbol} {t('customer.recharge.title')}
       </Typography>
-
       {currency && (
         <Box ref={rechargeRef}>
           <Stack sx={{ maxWidth: '760px' }}>
             <Box sx={{ mb: 4 }}>
               <BalanceCard elevation={0}>
-                <Stack direction="row" justifyContent="space-between" alignItems="center" spacing={2}>
+                <Stack
+                  direction="row"
+                  spacing={2}
+                  sx={{
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                  }}>
                   <Stack spacing={0.5}>
-                    <Typography variant="body2" color="text.secondary">
+                    <Typography
+                      variant="body2"
+                      sx={{
+                        color: 'text.secondary',
+                      }}>
                       {t('customer.recharge.receiveAddress')}
                     </Typography>
                     <Typography variant="body1" sx={{ wordBreak: 'break-all', fontFamily: 'monospace' }}>
@@ -388,7 +402,12 @@ export default function BalanceRechargePage() {
                       }
                     : undefined,
                 }}>
-                <Stack direction="row" alignItems="center" justifyContent="space-between">
+                <Stack
+                  direction="row"
+                  sx={{
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                  }}>
                   <Stack>
                     <Typography
                       variant="body1"
@@ -420,7 +439,12 @@ export default function BalanceRechargePage() {
             <Stack sx={{ mb: 3, backgroundColor: 'background.default', borderRadius: '16px' }}>
               <Grid container spacing={2}>
                 {presetAmounts.map(({ amount: presetAmount, label, multiplier }) => (
-                  <Grid item xs={6} sm={3} key={presetAmount}>
+                  <Grid
+                    key={presetAmount}
+                    size={{
+                      xs: 6,
+                      sm: 3,
+                    }}>
                     <Card
                       variant="outlined"
                       sx={{
@@ -456,7 +480,12 @@ export default function BalanceRechargePage() {
                           {formatNumber(presetAmount)} {currency.symbol}
                         </Typography>
                         {multiplier > 0 && label && (
-                          <Typography variant="caption" align="center" color="text.secondary">
+                          <Typography
+                            variant="caption"
+                            align="center"
+                            sx={{
+                              color: 'text.secondary',
+                            }}>
                             {label}
                           </Typography>
                         )}
@@ -464,7 +493,11 @@ export default function BalanceRechargePage() {
                     </Card>
                   </Grid>
                 ))}
-                <Grid item xs={6} sm={3}>
+                <Grid
+                  size={{
+                    xs: 6,
+                    sm: 3,
+                  }}>
                   <Card
                     variant="outlined"
                     sx={{
@@ -488,7 +521,13 @@ export default function BalanceRechargePage() {
                         : {}),
                     }}>
                     <CardActionArea onClick={handleCustomSelect} sx={{ height: '100%', p: 1 }}>
-                      <Stack direction="row" spacing={1} justifyContent="center" alignItems="center">
+                      <Stack
+                        direction="row"
+                        spacing={1}
+                        sx={{
+                          justifyContent: 'center',
+                          alignItems: 'center',
+                        }}>
                         <Typography
                           variant="h6"
                           align="center"
@@ -513,18 +552,26 @@ export default function BalanceRechargePage() {
                   error={!!amountError}
                   helperText={amountError}
                   onChange={handleAmountChange}
-                  InputProps={{
-                    endAdornment: <Typography>{currency.symbol}</Typography>,
-                    autoComplete: 'off',
-                    inputProps: {
-                      min: 0,
-                      max: MAX_SAFE_AMOUNT,
+                  inputRef={customInputRef}
+                  slotProps={{
+                    input: {
+                      endAdornment: <Typography>{currency.symbol}</Typography>,
+                      autoComplete: 'off',
+                      inputProps: {
+                        min: 0,
+                        max: MAX_SAFE_AMOUNT,
+                      },
                     },
                   }}
-                  inputRef={customInputRef}
                 />
                 {amount && Number(amount) > 0 && Number(unitCycle.amount) > 0 && !amountError && (
-                  <Typography variant="body2" sx={{ color: 'text.lighter', mt: 1 }} fontSize={12}>
+                  <Typography
+                    variant="body2"
+                    sx={{
+                      fontSize: 12,
+                      color: 'text.lighter',
+                      mt: 1,
+                    }}>
                     {t('common.estimatedDuration', {
                       duration: formatSmartDuration(
                         Math.floor(Number(amount) / Number(unitCycle.amount)) < 1
@@ -568,12 +615,25 @@ export default function BalanceRechargePage() {
 
               <Grid container spacing={2}>
                 {relatedSubscriptions.map((subscription) => (
-                  <Grid item xs={12} sm={6} md={4} lg={3} key={subscription.id}>
+                  <Grid
+                    key={subscription.id}
+                    size={{
+                      xs: 12,
+                      sm: 6,
+                      md: 4,
+                      lg: 3,
+                    }}>
                     <Stack
                       onClick={() => handleSubscriptionClick(subscription.id)}
                       className="base-card"
                       sx={{ height: '100%' }}>
-                      <Stack direction="row" alignItems="center" spacing={1.5} sx={{ mb: 1 }}>
+                      <Stack
+                        direction="row"
+                        spacing={1.5}
+                        sx={{
+                          alignItems: 'center',
+                          mb: 1,
+                        }}>
                         <Typography
                           variant="subtitle1"
                           sx={{