payment-kit 1.18.56 → 1.19.1

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

@@ -22,6 +22,7 @@ import { useMemo } from 'react';
 import BalanceList from '../../../../components/balance-list';
 import Copyable from '../../../../components/copyable';
 import EditCustomer from '../../../../components/customer/edit';
+import CreditOverview from '../../../../components/customer/credit-overview';
 import EventList from '../../../../components/event/list';
 import InfoMetric from '../../../../components/info-metric';
 import InfoRow from '../../../../components/info-row';
@@ -38,7 +39,14 @@ import InfoRowGroup from '../../../../components/info-row-group';
 
 const fetchData = async (
   id: string
-): Promise<{ customer: TCustomerExpanded; summary: { [key: string]: GroupedBN } }> => {
+): Promise<{
+  customer: TCustomerExpanded;
+  summary: { [key: string]: GroupedBN };
+  creditSummary?: {
+    grants?: { [currencyId: string]: { totalAmount: string; remainingAmount: string } };
+    pendingAmount?: { [currencyId: string]: string };
+  } | null;
+}> => {
   const [customer, summary] = await Promise.all([
     api.get(`/api/customers/${id}`).then((res) => res.data),
     api.get(`/api/customers/${id}/summary`).then((res) => res.data),
@@ -158,12 +166,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 +197,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 +252,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 +309,18 @@ 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' }}>
+          {/* 信用管理区域 */}
+          {data.creditSummary && (
+            <>
+              <Box className="section">
+                <SectionHeader title={t('admin.creditGrants.title')} mb={0} />
+                <CreditOverview customerId={props.id} settings={settings} mode="dashboard" />
+              </Box>
+              <Divider />
+            </>
+          )}
+
           <Box className="section" sx={{ containerType: 'inline-size' }}>
             <SectionHeader title={t('admin.details')} />
             <InfoRowGroup
@@ -376,7 +422,7 @@ export default function CustomerDetail(props: { id: string }) {
           </Box>
           <Divider />
           <Box className="section">
-            <SectionHeader title={t('admin.events')} />
+            <SectionHeader title={t('admin.events.title')} />
             <Box className="section-body">
               <EventList features={{ toolbar: false }} object_id={data.customer.id} />
             </Box>
@@ -436,7 +482,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/customers/index.tsx

@@ -6,6 +6,7 @@ import { useNavigate, useParams } from 'react-router-dom';
 import { useTransitionContext } from '../../../components/progress-bar';
 
 const CustomerDetail = React.lazy(() => import('./customers/detail'));
+const CreditGrantDetail = React.lazy(() => import('./customers/credit-grant/detail'));
 
 const pages = {
   overview: React.lazy(() => import('./customers')),
@@ -21,6 +22,10 @@ export default function CustomerIndex() {
     return <CustomerDetail id={page} />;
   }
 
+  if (page.startsWith('credgr_')) {
+    return <CreditGrantDetail id={page} />;
+  }
+
   const onTabChange = (newTab: string) => {
     startTransition(() => {
       navigate(`/admin/customers/${newTab}`);

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

@@ -33,59 +33,85 @@ 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')}
+              {t('admin.events.title')}
             </Typography>
           </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/index.tsx

@@ -41,7 +41,7 @@ export default function DevelopersIndex() {
   const tabs = [
     { label: t('admin.overview'), value: 'overview' },
     { label: t('admin.webhooks'), value: 'webhooks' },
-    { label: t('admin.events'), value: 'events' },
+    { label: t('admin.events.title'), value: 'events' },
     { label: t('admin.logs'), value: 'logs' },
   ];
 

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"

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>