payment-kit 1.18.55 → 1.19.0

package/src/pages/admin/overview.tsx

@@ -209,10 +209,29 @@ export default function Overview() {
   };
 
   return (
-    <Grid container gap={{ xs: 2, sm: 5, md: 8 }} sx={{ mb: 4 }}>
-      <Grid item xs={12} sm={12} md={8}>
-        <Stack direction="column" gap={{ xs: 1, sm: 3 }}>
-          <Stack direction="row" alignItems="flex-end" justifyContent="space-between">
+    <Grid
+      container
+      sx={{
+        gap: { xs: 2, sm: 5, md: 8 },
+        mb: 4,
+      }}>
+      <Grid
+        size={{
+          xs: 12,
+          sm: 12,
+          md: 8,
+        }}>
+        <Stack
+          direction="column"
+          sx={{
+            gap: { xs: 1, sm: 3 },
+          }}>
+          <Stack
+            direction="row"
+            sx={{
+              alignItems: 'flex-end',
+              justifyContent: 'space-between',
+            }}>
             <Typography component="h3" variant="h4">
               {t('admin.trends')}
             </Typography>
@@ -221,19 +240,31 @@ export default function Overview() {
               {formatToDate(state.endDate, locale, 'YYYY-MM-DD')}
             </Button>
           </Stack>
-          <Stack direction="column" gap={1}>
+          <Stack
+            direction="column"
+            sx={{
+              gap: 1,
+            }}>
             <Typography component="h4" variant="subtitle1">
               {t('admin.paymentIntent.list')}
             </Typography>
             <Chart loading={!trend.data} height={320} data={payments} currencies={currencies} />
           </Stack>
-          <Stack direction="column" gap={1}>
+          <Stack
+            direction="column"
+            sx={{
+              gap: 1,
+            }}>
             <Typography component="h4" variant="subtitle1">
               {t('admin.payouts')}
             </Typography>
             <Chart loading={!trend.data} height={320} data={payouts} currencies={currencies} />
           </Stack>
-          <Stack direction="column" gap={1}>
+          <Stack
+            direction="column"
+            sx={{
+              gap: 1,
+            }}>
             <Typography component="h4" variant="subtitle1">
               {t('admin.refunds')}
             </Typography>
@@ -241,11 +272,21 @@ export default function Overview() {
           </Stack>
         </Stack>
       </Grid>
-      <Grid item xs={12} sm={12} md={3}>
+      <Grid
+        size={{
+          xs: 12,
+          sm: 12,
+          md: 3,
+        }}>
         <Stack direction="column" spacing={2}>
           {summary.data && summary.data.addresses && (
             <Box>
-              <Stack direction="row" alignItems="flex-end" justifyContent="space-between">
+              <Stack
+                direction="row"
+                sx={{
+                  alignItems: 'flex-end',
+                  justifyContent: 'space-between',
+                }}>
                 <Typography component="h3" variant="h4">
                   {t('admin.addresses')}
                 </Typography>
@@ -265,7 +306,12 @@ export default function Overview() {
           )}
           {summary.data && summary.data.balances && (
             <Box>
-              <Stack direction="row" alignItems="flex-end" justifyContent="space-between">
+              <Stack
+                direction="row"
+                sx={{
+                  alignItems: 'flex-end',
+                  justifyContent: 'space-between',
+                }}>
                 <Typography component="h3" variant="h4">
                   {t('admin.balances')}
                 </Typography>
@@ -291,20 +337,32 @@ export default function Overview() {
                         },
                       },
                     }}>
-                    <Stack direction="row" alignItems="center" spacing={1}>
+                    <Stack
+                      direction="row"
+                      spacing={1}
+                      sx={{
+                        alignItems: 'center',
+                      }}>
                       <Avatar
                         src={currencies[currencyId]?.logo}
                         alt={currencies[currencyId]?.symbol}
                         sx={{ width: 36, height: 36 }}
                       />
-                      <Box flex={1}>
+                      <Box
+                        sx={{
+                          flex: 1,
+                        }}>
                         <Typography variant="body1" component="div" sx={{ fontSize: '1.75rem' }}>
                           {formatBNStr(
                             summary.data?.balances?.[currencyId] as string,
                             currencies[currencyId]?.decimal as number
                           )}
                         </Typography>
-                        <Typography sx={{ fontSize: 14 }} color="text.secondary">
+                        <Typography
+                          sx={{
+                            color: 'text.secondary',
+                            fontSize: 14,
+                          }}>
                           {currencies[currencyId]?.symbol} on {currencies[currencyId]?.method.name}
                         </Typography>
                       </Box>
@@ -324,12 +382,23 @@ export default function Overview() {
           )}
           {metrics.length > 0 && (
             <Box>
-              <Stack direction="row" alignItems="flex-end" justifyContent="space-between">
+              <Stack
+                direction="row"
+                sx={{
+                  alignItems: 'flex-end',
+                  justifyContent: 'space-between',
+                }}>
                 <Typography component="h3" variant="h4">
                   {t('admin.metrics')}
                 </Typography>
               </Stack>
-              <Stack direction="row" flexWrap="wrap" gap={1} sx={{ mt: 2 }}>
+              <Stack
+                direction="row"
+                sx={{
+                  flexWrap: 'wrap',
+                  gap: 1,
+                  mt: 2,
+                }}>
                 {metrics.map((metric) => (
                   <Card
                     component={Link}
@@ -341,7 +410,11 @@ export default function Overview() {
                       <Typography component="div" sx={{ fontSize: '1.75rem' }}>
                         {metric.count}
                       </Typography>
-                      <Typography sx={{ fontSize: 14 }} color="text.secondary">
+                      <Typography
+                        sx={{
+                          color: 'text.secondary',
+                          fontSize: 14,
+                        }}>
                         {t(`admin.${metric.type}.name`)}
                       </Typography>
                     </Box>
@@ -352,12 +425,23 @@ export default function Overview() {
           )}
           {attentions.filter((x) => x.count > 0).length > 0 && (
             <Box>
-              <Stack direction="row" alignItems="flex-end" justifyContent="space-between">
+              <Stack
+                direction="row"
+                sx={{
+                  alignItems: 'flex-end',
+                  justifyContent: 'space-between',
+                }}>
                 <Typography component="h3" variant="h4" color="error">
                   {t('admin.attention')}
                 </Typography>
               </Stack>
-              <Stack direction="row" flexWrap="wrap" gap={1} sx={{ mt: 2 }}>
+              <Stack
+                direction="row"
+                sx={{
+                  flexWrap: 'wrap',
+                  gap: 1,
+                  mt: 2,
+                }}>
                 {attentions.map((metric) => (
                   <Card
                     component={Link}
@@ -369,7 +453,11 @@ export default function Overview() {
                       <Typography component="div" sx={{ fontSize: '1.75rem' }}>
                         {metric.count}
                       </Typography>
-                      <Typography sx={{ fontSize: 14 }} color="text.secondary">
+                      <Typography
+                        sx={{
+                          color: 'text.secondary',
+                          fontSize: 14,
+                        }}>
                         {t(`admin.${metric.type}.attention`)}
                       </Typography>
                     </Box>

package/src/pages/admin/payments/intents/detail.tsx

@@ -96,12 +96,21 @@ export default function PaymentIntentDetail(props: { id: string }) {
   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('/admin/payments/intents')}>
+            onClick={() => goBackOrFallback('/admin/payments/intents')}
+            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('admin.payments')}
@@ -110,36 +119,55 @@ export default function PaymentIntentDetail(props: { id: string }) {
           <PaymentIntentActions data={data} variant="normal" onChange={runAsync} />
         </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" spacing={1}>
+          <Stack
+            direction="row"
+            sx={{
+              justifyContent: 'space-between',
+              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={data?.amount_received === '0' ? total : received}
                   sx={{ my: 0, fontSize: '1.75rem', lineHeight: '32px' }}
@@ -150,18 +178,22 @@ export default function PaymentIntentDetail(props: { id: string }) {
           </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,
@@ -208,7 +240,14 @@ export default function PaymentIntentDetail(props: { id: string }) {
             },
           },
         }}>
-        <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" sx={{ containerType: 'inline-size' }}>
             <SectionHeader title={t('admin.details')} />
             <InfoRowGroup
@@ -240,7 +279,12 @@ export default function PaymentIntentDetail(props: { id: string }) {
               <InfoRow
                 label={t('common.status')}
                 value={
-                  <Stack direction="row" alignItems="center" spacing={1}>
+                  <Stack
+                    direction="row"
+                    spacing={1}
+                    sx={{
+                      alignItems: 'center',
+                    }}>
                     <Status label={data.status} color={getPaymentIntentStatusColor(data.status)} />
                     {data.last_payment_error && (
                       <Tooltip

package/src/pages/admin/payments/payouts/detail.tsx

@@ -119,12 +119,21 @@ export default function PayoutDetail(props: { id: string }) {
   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('/admin/payments/payouts')}>
+            onClick={() => goBackOrFallback('/admin/payments/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('admin.payouts')}
@@ -132,37 +141,60 @@ export default function PayoutDetail(props: { id: string }) {
           </Stack>
         </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' }} />
                   <Copyable text={props.id} />
                 </Stack>
@@ -171,18 +203,22 @@ export default function PayoutDetail(props: { id: string }) {
           </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,
@@ -278,7 +314,14 @@ export default function PayoutDetail(props: { id: string }) {
             },
           },
         }}>
-        <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" sx={{ containerType: 'inline-size' }}>
             <SectionHeader title={t('admin.details')} />
             <InfoRowGroup
@@ -310,7 +353,12 @@ export default function PayoutDetail(props: { id: string }) {
               <InfoRow
                 label={t('common.status')}
                 value={
-                  <Stack direction="row" alignItems="center" spacing={1}>
+                  <Stack
+                    direction="row"
+                    spacing={1}
+                    sx={{
+                      alignItems: 'center',
+                    }}>
                     <Status label={data.status} color={getPayoutStatusColor(data.status)} />
                     {data.last_attempt_error && (
                       <Tooltip

package/src/pages/admin/payments/refunds/detail.tsx

@@ -94,12 +94,21 @@ export default function RefundDetail(props: { id: string }) {
   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('/admin/payments/refunds')}>
+            onClick={() => goBackOrFallback('/admin/payments/refunds')}
+            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('admin.refunds')}
@@ -108,36 +117,55 @@ export default function RefundDetail(props: { id: string }) {
           <RefundActions data={data} variant="normal" onChange={() => runAsync()} />
         </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" spacing={1}>
+          <Stack
+            direction="row"
+            sx={{
+              justifyContent: 'space-between',
+              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={amount} sx={{ my: 0, fontSize: '1.75rem', lineHeight: '32px' }} />
                 <Copyable text={props.id} />
               </Stack>
@@ -145,18 +173,22 @@ export default function RefundDetail(props: { id: string }) {
           </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,
@@ -203,7 +235,14 @@ export default function RefundDetail(props: { id: string }) {
             },
           },
         }}>
-        <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" sx={{ containerType: 'inline-size' }}>
             <SectionHeader title={t('admin.details')} />
             <InfoRowGroup
@@ -235,7 +274,12 @@ export default function RefundDetail(props: { id: string }) {
               <InfoRow
                 label={t('common.status')}
                 value={
-                  <Stack direction="row" alignItems="center" spacing={1}>
+                  <Stack
+                    direction="row"
+                    spacing={1}
+                    sx={{
+                      alignItems: 'center',
+                    }}>
                     <Status label={data.status} color={getRefundStatusColor(data.status)} />
                     {data.last_attempt_error && data.status !== 'canceled' && (
                       <Tooltip

package/src/pages/admin/products/index.tsx

@@ -65,7 +65,14 @@ export default function Products() {
 
   return (
     <>
-      <Stack direction="row" alignItems="flex-start" justifyContent="end" flexWrap="wrap" spacing={1}>
+      <Stack
+        direction="row"
+        spacing={1}
+        sx={{
+          alignItems: 'flex-start',
+          justifyContent: 'end',
+          flexWrap: 'wrap',
+        }}>
         {/* @ts-ignore */}
         <Tabs
           // @ts-ignore
@@ -99,7 +106,6 @@ export default function Products() {
         />
         <Box> {extra}</Box>
       </Stack>
-
       {isValidElement(TabComponent) ? TabComponent : <TabComponent />}
     </>
   );