payment-kit 1.18.55 → 1.19.0

package/src/pages/admin/billing/invoices/detail.tsx

@@ -107,12 +107,21 @@ export default function InvoiceDetail(props: { id: string }) {
   return (
     <Root direction="column" spacing={2.5} sx={{ 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/billing/invoices')}>
+            onClick={() => goBackOrFallback('/admin/billing/invoices')}
+            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.invoices')}
@@ -124,29 +133,41 @@ export default function InvoiceDetail(props: { id: string }) {
           </Box>
         </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="column" gap={1}>
-            <Stack direction="row" alignItems="center">
+          <Stack
+            direction="column"
+            sx={{
+              gap: 1,
+            }}>
+            <Stack
+              direction="row"
+              sx={{
+                alignItems: 'center',
+              }}>
               <Typography variant="h2" sx={{ fontWeight: 600 }}>
                 {data.number}
               </Typography>
@@ -161,18 +182,22 @@ export default function InvoiceDetail(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,
@@ -189,7 +214,11 @@ export default function InvoiceDetail(props: { id: string }) {
                 label={t('admin.subscription.name')}
                 value={
                   <Link to={`/admin/billing/${data.subscription.id}`}>
-                    <Typography variant="body1" color="text.link">
+                    <Typography
+                      variant="body1"
+                      sx={{
+                        color: 'text.link',
+                      }}>
                       {data.subscription.description || data.subscription.id}
                     </Typography>
                   </Link>
@@ -238,7 +267,14 @@ export default function InvoiceDetail(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

package/src/pages/admin/billing/subscriptions/detail.tsx

@@ -79,12 +79,21 @@ export default function SubscriptionDetail(props: { id: string }) {
   return (
     <Root direction="column" spacing={2.5} sx={{ 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/billing/subscriptions')}>
+            onClick={() => goBackOrFallback('/admin/billing/subscriptions')}
+            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.subscriptions')}
@@ -93,29 +102,41 @@ export default function SubscriptionDetail(props: { id: string }) {
           <SubscriptionActions data={data} onChange={runAsync} variant="normal" />
         </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="column" gap={1}>
-            <Stack direction="row" alignItems="center">
+          <Stack
+            direction="column"
+            sx={{
+              gap: 1,
+            }}>
+            <Stack
+              direction="row"
+              sx={{
+                alignItems: 'center',
+              }}>
               <Typography variant="h2" sx={{ fontWeight: 600 }}>
                 {data.description}
               </Typography>
@@ -124,18 +145,22 @@ export default function SubscriptionDetail(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,
@@ -175,7 +200,14 @@ export default function SubscriptionDetail(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

package/src/pages/admin/customers/customers/detail.tsx

@@ -158,12 +158,21 @@ export default function CustomerDetail(props: { id: string }) {
   return (
     <Root direction="column" spacing={2.5} sx={{ 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/customers')}>
+            onClick={() => goBackOrFallback('/admin/customers')}
+            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.customers')}
@@ -180,29 +189,43 @@ export default function CustomerDetail(props: { id: string }) {
           {/* <CustomerActions data={data.customer} onChange={onChange} variant="normal" /> */}
         </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
                 title={data.customer.name}
                 src={getCustomerAvatar(
@@ -221,18 +244,22 @@ export default function CustomerDetail(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,
@@ -274,7 +301,14 @@ export default function CustomerDetail(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
@@ -436,7 +470,14 @@ export default function CustomerDetail(props: { id: string }) {
                 label={t('admin.customer.address.country')}
                 value={
                   data.customer.address?.country ? (
-                    <Box display="flex" alignItems="center" flexWrap="nowrap" gap={0.5} sx={{ cursor: 'pointer' }}>
+                    <Box
+                      sx={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        flexWrap: 'nowrap',
+                        gap: 0.5,
+                        cursor: 'pointer',
+                      }}>
                       <FlagEmoji iso2={data.customer.address?.country} style={{ display: 'flex', width: 24 }} />
                       <Typography>{countryDetail?.name}</Typography>
                     </Box>

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

@@ -68,7 +68,12 @@ export default function CustomersList() {
           const item = data.list[index] as TCustomer;
           return (
             <Link to={`/admin/customers/${item.id}`}>
-              <Stack direction="row" alignItems="center" spacing={1}>
+              <Stack
+                direction="row"
+                spacing={1}
+                sx={{
+                  alignItems: 'center',
+                }}>
                 <Avatar
                   src={getCustomerAvatar(
                     item?.did,

package/src/pages/admin/developers/events/detail.tsx

@@ -33,12 +33,21 @@ export default function EventDetail(props: { id: string }) {
   return (
     <Root direction="column" spacing={2.5} sx={{ 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/developers/events')}>
+            onClick={() => goBackOrFallback('/admin/developers/events')}
+            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.events')}
@@ -46,46 +55,63 @@ export default function EventDetail(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">
-            <Typography variant="h2" fontWeight={600}>
+          <Stack
+            direction="row"
+            sx={{
+              justifyContent: 'space-between',
+              alignItems: 'center',
+            }}>
+            <Typography
+              variant="h2"
+              sx={{
+                fontWeight: 600,
+              }}>
               {data.type}
             </Typography>
           </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,

package/src/pages/admin/developers/webhooks/detail.tsx

@@ -33,12 +33,21 @@ export default function WebhookDetail(props: { id: string }) {
   return (
     <Root direction="column" spacing={4} sx={{ 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/developers/webhooks')}>
+            onClick={() => goBackOrFallback('/admin/developers/webhooks')}
+            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.webhooks')}
@@ -46,11 +55,27 @@ export default function WebhookDetail(props: { id: string }) {
           </Stack>
           <Copyable text={props.id} style={{ marginLeft: 4 }} />
         </Stack>
-        <Box mt={2}>
-          <Stack direction="row" justifyContent="space-between" alignItems="center">
-            <Stack direction="column" alignItems="flex-start">
+        <Box
+          sx={{
+            mt: 2,
+          }}>
+          <Stack
+            direction="row"
+            sx={{
+              justifyContent: 'space-between',
+              alignItems: 'center',
+            }}>
+            <Stack
+              direction="column"
+              sx={{
+                alignItems: 'flex-start',
+              }}>
               <Typography variant="h5">{data.url}</Typography>
-              <Typography variant="body1" color="text.secondary">
+              <Typography
+                variant="body1"
+                sx={{
+                  color: 'text.secondary',
+                }}>
                 {data.description}
               </Typography>
             </Stack>
@@ -59,9 +84,14 @@ export default function WebhookDetail(props: { id: string }) {
             className="section-body"
             direction="row"
             spacing={3}
-            justifyContent="flex-start"
-            flexWrap="wrap"
-            sx={{ pt: 2, mt: 2, borderTop: '1px solid', borderColor: 'grey.100' }}>
+            sx={{
+              justifyContent: 'flex-start',
+              flexWrap: 'wrap',
+              pt: 2,
+              mt: 2,
+              borderTop: '1px solid',
+              borderColor: 'grey.100',
+            }}>
             <InfoMetric
               label={t('common.status')}
               value={<Status label={data.status} color={getWebhookStatusColor(data.status)} />}

package/src/pages/admin/index.tsx

@@ -73,7 +73,16 @@ function Admin() {
   return (
     <>
       <ProgressBar pending={isPending} />
-      <Stack direction="row" alignItems="center" justifyContent="end" flexWrap="wrap" spacing={1} sx={{ mt: 1, pb: 2 }}>
+      <Stack
+        direction="row"
+        spacing={1}
+        sx={{
+          alignItems: 'center',
+          justifyContent: 'end',
+          flexWrap: 'wrap',
+          mt: 1,
+          pb: 2,
+        }}>
         {/* <Box>{renderNav(group, onTabChange, group1)}</Box> */}
         {/* @ts-ignore */}
         <Tabs
@@ -101,7 +110,11 @@ function Admin() {
             },
           }}
         />
-        <Stack direction="row" alignItems="center">
+        <Stack
+          direction="row"
+          sx={{
+            alignItems: 'center',
+          }}>
           {renderNav(group, onTabChange, group2)}
           <label
             htmlFor="livemode-switch"