payment-kit 1.18.56 → 1.19.1

package/src/pages/customer/credit-grant/detail.tsx

@@ -0,0 +1,308 @@
+/* eslint-disable react/no-unstable-nested-components */
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import {
+  api,
+  formatBNStr,
+  formatTime,
+  CreditTransactionsList,
+  CreditStatusChip,
+  getCustomerAvatar,
+} from '@blocklet/payment-react';
+import type { TCreditGrantExpanded } from '@blocklet/payment-types';
+import { ArrowBackOutlined } from '@mui/icons-material';
+import { Alert, Avatar, Box, CircularProgress, Divider, Stack, Typography } from '@mui/material';
+import { useRequest } from 'ahooks';
+import { useNavigate, useParams } from 'react-router-dom';
+import { styled } from '@mui/system';
+import { useCallback } from 'react';
+import InfoMetric from '../../../components/info-metric';
+import { useSessionContext } from '../../../contexts/session';
+import SectionHeader from '../../../components/section/header';
+import CreditGrantItemList from '../../../components/customer/credit-grant-item-list';
+import InfoRow from '../../../components/info-row';
+import InfoRowGroup from '../../../components/info-row-group';
+
+const fetchData = (id: string | undefined): Promise<TCreditGrantExpanded> => {
+  return api.get(`/api/credit-grants/${id}`).then((res: any) => res.data);
+};
+
+export default function CustomerCreditGrantDetail() {
+  const { id } = useParams() as { id: string };
+  const navigate = useNavigate();
+  const { t } = useLocaleContext();
+  const { session } = useSessionContext();
+  const { loading, error, data } = useRequest(() => fetchData(id));
+
+  const handleBack = useCallback(() => {
+    navigate('/customer', { replace: true });
+  }, [navigate]);
+
+  if (data?.customer?.did && session?.user?.did && data.customer.did !== session.user.did) {
+    return <Alert severity="error">You do not have permission to access other customer data</Alert>;
+  }
+  if (error) {
+    return <Alert severity="error">{error.message}</Alert>;
+  }
+
+  if (loading || !data) {
+    return <CircularProgress />;
+  }
+
+  const isDepleted = data?.status === 'depleted';
+
+  const getStatusText = (status: string) => {
+    switch (status) {
+      case 'granted':
+        return t('admin.customer.creditGrants.status.granted');
+      case 'pending':
+        return t('admin.customer.creditGrants.status.pending');
+      case 'depleted':
+        return t('admin.customer.creditGrants.status.depleted');
+      case 'expired':
+        return t('admin.customer.creditGrants.status.expired');
+      case 'voided':
+        return t('admin.customer.creditGrants.status.voided');
+      default:
+        return status;
+    }
+  };
+
+  const getUsagePercentage = () => {
+    if (!data.amount || !data.remaining_amount) return 0;
+    const total = parseFloat(data.amount);
+    const remaining = parseFloat(data.remaining_amount);
+    return ((total - remaining) / total) * 100;
+  };
+
+  return (
+    <Root>
+      <Box>
+        <Stack
+          className="page-header"
+          direction="row"
+          justifyContent="space-between"
+          alignItems="center"
+          sx={{ position: 'relative' }}>
+          <Stack
+            direction="row"
+            onClick={handleBack}
+            alignItems="center"
+            sx={{ 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.customer.creditGrants.title')}
+            </Typography>
+          </Stack>
+        </Stack>
+        <Box
+          mt={4}
+          sx={{
+            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="column" alignItems="flex-start" justifyContent="space-around">
+                <Typography variant="h2" color="text.primary">
+                  {data.name || data.id}
+                </Typography>
+              </Stack>
+            </Stack>
+          </Stack>
+          <Stack
+            className="section-body"
+            justifyContent="flex-start"
+            flexWrap="wrap"
+            sx={{
+              'hr.MuiDivider-root:last-child': {
+                display: 'none',
+              },
+              flexDirection: {
+                xs: 'column',
+                sm: 'column',
+                md: 'row',
+              },
+              alignItems: 'flex-start',
+              gap: {
+                xs: 1,
+                sm: 1,
+                md: 3,
+              },
+            }}>
+            <InfoMetric
+              label={t('common.status')}
+              value={<CreditStatusChip status={data.status} label={getStatusText(data.status)} />}
+            />
+            <InfoMetric
+              label={t('admin.customer.creditGrants.originalAmount')}
+              value={
+                <Stack direction="row" alignItems="center" spacing={0.5}>
+                  <Avatar
+                    src={data.paymentCurrency?.logo}
+                    sx={{ width: 16, height: 16 }}
+                    alt={data.paymentCurrency?.symbol}
+                  />
+                  <Typography variant="body2">
+                    {formatBNStr(data.amount, data.paymentCurrency.decimal)} {data.paymentCurrency.symbol}
+                  </Typography>
+                </Stack>
+              }
+              divider
+            />
+            <InfoMetric
+              label={t('common.remainingCredit')}
+              value={
+                <Stack direction="row" alignItems="center" spacing={0.5}>
+                  <Avatar
+                    src={data.paymentCurrency?.logo}
+                    sx={{ width: 16, height: 16 }}
+                    alt={data.paymentCurrency?.symbol}
+                  />
+                  <Typography variant="body2">
+                    {formatBNStr(data.remaining_amount, data.paymentCurrency.decimal)} {data.paymentCurrency.symbol}
+                  </Typography>
+                </Stack>
+              }
+              divider
+            />
+            <InfoMetric
+              label={t('admin.customer.creditGrants.usage')}
+              value={
+                <Typography variant="body2" color={isDepleted ? 'error.main' : 'text.primary'}>
+                  {getUsagePercentage().toFixed(1)}%
+                </Typography>
+              }
+              divider
+            />
+            <InfoMetric
+              label={t('common.effectiveDate')}
+              value={formatTime(data.effective_at ? data.effective_at * 1000 : data.created_at, 'YYYY-MM-DD HH:mm:ss')}
+            />
+            {data.expires_at && (
+              <InfoMetric
+                label={t('common.expirationDate')}
+                value={formatTime(data.expires_at * 1000, 'YYYY-MM-DD HH:mm:ss')}
+              />
+            )}
+          </Stack>
+        </Box>
+      </Box>
+      <Box className="section" sx={{ containerType: 'inline-size' }}>
+        <SectionHeader title={t('admin.details')} />
+        <InfoRowGroup
+          sx={{
+            display: 'grid',
+            gridTemplateColumns: {
+              xs: 'repeat(1, 1fr)',
+              xl: 'repeat(2, 1fr)',
+            },
+            '@container (min-width: 1000px)': {
+              gridTemplateColumns: 'repeat(2, 1fr)',
+            },
+            '.info-row-wrapper': {
+              gap: 1,
+              flexDirection: {
+                xs: 'column',
+                xl: 'row',
+              },
+              alignItems: {
+                xs: 'flex-start',
+                xl: 'center',
+              },
+              '@container (min-width: 1000px)': {
+                flexDirection: 'row',
+                alignItems: 'center',
+              },
+            },
+          }}>
+          <InfoRow
+            label={t('common.customer')}
+            value={
+              <Stack direction="row" alignItems="center" spacing={1}>
+                <Avatar
+                  src={getCustomerAvatar(
+                    data.customer?.did,
+                    data.customer?.updated_at ? new Date(data.customer.updated_at).toISOString() : '',
+                    24
+                  )}
+                  alt={data.customer?.name}
+                  sx={{ width: 24, height: 24 }}
+                />
+                <Typography>{data.customer?.name}</Typography>
+              </Stack>
+            }
+          />
+          <InfoRow
+            label={t('common.scope')}
+            value={
+              <Typography>
+                {data.applicability_config?.scope?.prices ? t('common.specific') : t('common.general')}
+              </Typography>
+            }
+          />
+          <InfoRow label={t('admin.creditProduct.priority.label')} value={<Typography>{data.priority}</Typography>} />
+          <InfoRow label={t('common.createdAt')} value={formatTime(data.created_at)} />
+        </InfoRowGroup>
+      </Box>
+
+      <Divider />
+      {data.items && data.items.length > 0 && (
+        <>
+          <Box className="section">
+            <SectionHeader title={t('admin.creditProduct.associatedPrices.label')} />
+            <Box className="section-body">
+              <CreditGrantItemList data={data.items} currency={data.paymentCurrency} />
+            </Box>
+          </Box>
+          <Divider />
+        </>
+      )}
+
+      <Divider />
+      <Box className="section">
+        <Typography variant="h3" className="section-header">
+          {t('admin.creditTransactions.title')}
+        </Typography>
+        <Box className="section-body">
+          <CreditTransactionsList
+            customer_id={data.customer_id}
+            credit_grant_id={data.id}
+            showAdminColumns={false}
+            showTimeFilter
+          />
+        </Box>
+      </Box>
+    </Root>
+  );
+}
+
+const Root = styled(Stack)`
+  margin-bottom: 24px;
+  gap: 24px;
+  flex-direction: column;
+  @media (max-width: ${({ theme }) => theme.breakpoints.values.md}px) {
+    . {
+      border: none;
+      box-shadow: none;
+      padding: 0;
+    }
+    .section-header {
+      font-size: 18px;
+    }
+  }
+`;

package/src/pages/customer/index.tsx

@@ -7,6 +7,7 @@ import {
   usePaymentContext,
   OverdueInvoicePayment,
 } from '@blocklet/payment-react';
+
 import type { GroupedBN, TCustomerExpanded } from '@blocklet/payment-types';
 import {
   ExpandMore,
@@ -38,6 +39,7 @@ import { flatten, isEmpty } from 'lodash';
 import { memo, useEffect, useState } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import { joinURL } from 'ufo';
+import CreditOverview from '../../components/customer/credit-overview';
 
 import { useTransitionContext } from '../../components/progress-bar';
 import CurrentSubscriptions from '../../components/subscription/portal/list';
@@ -46,7 +48,15 @@ import { useSessionContext } from '../../contexts/session';
 import api from '../../libs/api';
 import CustomerRevenueList from '../../components/payouts/portal/list';
 
-type Result = TCustomerExpanded & { summary: { [key: string]: GroupedBN }; error?: string };
+type Result = TCustomerExpanded & {
+  summary: { [key: string]: GroupedBN };
+  creditSummary?: {
+    grants?: { [key: string]: { totalAmount: string; remainingAmount: string; grantCount: number } };
+    transactions?: any;
+    pendingAmount?: { [key: string]: string };
+  };
+  error?: string;
+};
 
 const fetchData = (): Promise<Result> => {
   return api.get('/api/customers/me?skipError=true&create=true').then((res) => res.data);
@@ -105,7 +115,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} />
@@ -266,6 +283,12 @@ export default function CustomerHome() {
     }
   };
 
+  // const handleAddCredit = (currency: any) => {
+  //   if (currency?.id) {
+  //     navigate(`/customer/credit-packages?currency=${currency.id}`);
+  //   }
+  // };
+
   const onToggleActive = (e: SelectChangeEvent) => {
     setSubscriptionLoading(true);
     setState({ onlyActive: e.target.value === 'active' });
@@ -274,12 +297,21 @@ export default function CustomerHome() {
     }, 300);
   };
 
+  // const handleViewCreditDetails = (currencyId: string) => {
+  //   navigate(`/customer/credit-grants?currency=${currencyId}`);
+  // };
+
   const SubscriptionCard =
     loadingCard || !hasSubscriptions ? null : (
       <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 +372,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 +402,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 +420,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>
@@ -401,7 +448,6 @@ export default function CustomerHome() {
                       gap: 1,
                       mt: 1.5,
                     }}>
-                    {/* 使用配置渲染卡片 */}
                     {Object.entries(CARD_CONFIG).map(([type, config]) => {
                       if (!isCardVisible(type, config, data, c, method)) {
                         return null;
@@ -433,6 +479,18 @@ export default function CustomerHome() {
     </Box>
   );
 
+  // 独立的Credit Card组件
+  const CreditCard = loadingCard ? (
+    <CardSkeleton height={400} />
+  ) : (
+    <Box className="base-card section section-credit">
+      <Box className="section-header" sx={{ mb: 2 }}>
+        <Typography variant="h3">{t('admin.creditGrants.title')}</Typography>
+      </Box>
+      <CreditOverview customerId={data?.id} settings={settings} />
+    </Box>
+  );
+
   const InvoiceCard = loadingCard ? (
     <CardSkeleton height={200} />
   ) : (
@@ -461,15 +519,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>
@@ -525,6 +582,8 @@ export default function CustomerHome() {
       <Root>
         {SummaryCard}
         {SummaryCard && <Divider />}
+        {CreditCard}
+        {CreditCard && <Divider />}
         {SubscriptionCard}
         {SubscriptionCard && <Divider />}
         {InvoiceCard}

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')}