payment-kit 1.19.0 → 1.19.1

package/src/components/customer/credit-overview.tsx

@@ -0,0 +1,233 @@
+import { formatBNStr, CreditGrantsList, CreditTransactionsList, api } from '@blocklet/payment-react';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { Avatar, Box, Card, CardContent, Stack, Typography, Tabs, Tab } from '@mui/material';
+import { useState } from 'react';
+import type { TPaymentCurrency } from '@blocklet/payment-types';
+import { useRequest } from 'ahooks';
+
+enum CreditTab {
+  OVERVIEW = 'overview',
+  GRANTS = 'grants',
+  TRANSACTIONS = 'transactions',
+}
+
+interface CreditOverviewProps {
+  customerId: string;
+  settings: any;
+  mode?: 'portal' | 'dashboard';
+}
+
+const fetchCreditSummary = async (customerId: string) => {
+  try {
+    const [grantsResponse, pendingAmountResponse] = await Promise.all([
+      api.get(`/api/credit-grants/summary?customer_id=${customerId}`),
+      api.get(`/api/meter-events/pending-amount?customer_id=${customerId}`),
+      // api.get(`/api/credit-transactions/summary?customer_id=${customerId}`),
+    ]);
+
+    return {
+      grants: grantsResponse.data,
+      // transactions: transactionsResponse.data,
+      pendingAmount: pendingAmountResponse.data,
+    };
+  } catch (error) {
+    console.error('Failed to fetch credit summary:', error);
+    return {
+      grants: null,
+      transactions: null,
+      pendingAmount: null,
+    };
+  }
+};
+
+export default function CreditOverview({ customerId, settings, mode = 'portal' }: CreditOverviewProps) {
+  const { t } = useLocaleContext();
+  const [creditTab, setCreditTab] = useState<CreditTab>(CreditTab.OVERVIEW);
+  const { data: creditSummary } = useRequest(fetchCreditSummary, {
+    defaultParams: [customerId],
+    refreshDeps: [creditTab === CreditTab.OVERVIEW],
+  });
+
+  // 渲染信用概览卡片
+  const renderCreditOverviewCard = (currency: any) => {
+    const method = settings?.paymentMethods?.find((m: any) => m.id === currency.payment_method_id);
+    if (method?.type !== 'arcblock') {
+      return null;
+    }
+
+    const currencyId = currency.id as string;
+    const grantData = creditSummary?.grants?.[currencyId];
+    const pendingAmount = creditSummary?.pendingAmount?.[currencyId] || '0';
+
+    if (!grantData) {
+      return null;
+    }
+
+    const totalAmount = grantData.totalAmount || '0';
+    const remainingAmount = grantData.remainingAmount || '0';
+
+    return (
+      <Card
+        key={currency.id}
+        sx={{
+          height: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+          border: '1px solid',
+          borderColor: 'divider',
+          boxShadow: 1,
+          borderRadius: 1,
+        }}>
+        <CardContent sx={{ flexGrow: 1 }}>
+          <Stack spacing={2}>
+            {/* 货币信息 */}
+            <Stack
+              direction="row"
+              spacing={1}
+              sx={{
+                alignItems: 'center',
+              }}>
+              <Avatar src={currency.logo} alt={currency.symbol} sx={{ width: 24, height: 24 }} />
+              <Typography variant="h6" component="div">
+                {currency.name}
+              </Typography>
+            </Stack>
+
+            {/* 可用额度 / 总额度 */}
+            <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
+              <Typography
+                variant="body2"
+                gutterBottom
+                sx={{
+                  color: 'text.secondary',
+                }}>
+                {t('admin.customer.creditGrants.creditBalance')}
+              </Typography>
+              <Typography variant="h5" component="div" sx={{ fontWeight: 'normal' }}>
+                {totalAmount === '0' && remainingAmount === '0' ? (
+                  <>0 {currency.symbol}</>
+                ) : (
+                  <>
+                    {formatBNStr(remainingAmount, currency.decimal, 6, true)} /{' '}
+                    {formatBNStr(totalAmount, currency.decimal, 6, true)} {currency.symbol}
+                  </>
+                )}
+              </Typography>
+            </Box>
+
+            {/* 欠费额度 */}
+            {pendingAmount !== '0' && (
+              <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
+                <Typography
+                  variant="body2"
+                  gutterBottom
+                  sx={{
+                    color: 'text.secondary',
+                  }}>
+                  {t('admin.customer.creditGrants.pendingAmount')}
+                </Typography>
+                <Typography
+                  variant="body1"
+                  sx={{
+                    color: 'error.main',
+                  }}>
+                  {formatBNStr(pendingAmount, currency.decimal, 6, true)} {currency.symbol}
+                </Typography>
+              </Box>
+            )}
+          </Stack>
+        </CardContent>
+      </Card>
+    );
+  };
+
+  // 获取有信用额度的货币
+  const creditCurrencies =
+    settings?.paymentMethods
+      ?.filter((method: any) => method.type === 'arcblock')
+      ?.flatMap((method: any) => method.payment_currencies)
+      ?.filter((currency: TPaymentCurrency) => {
+        const currencyId = currency.id as string;
+        const grantData = creditSummary?.grants?.[currencyId];
+        return grantData;
+      }) || [];
+
+  if (creditCurrencies.length === 0) {
+    return null;
+  }
+
+  return (
+    <Stack sx={{ width: '100%' }}>
+      <Tabs
+        value={creditTab}
+        onChange={(_, newValue) => setCreditTab(newValue as CreditTab)}
+        // sx={{ borderBottom: 1, borderColor: 'divider', }}
+        sx={{
+          flex: '1 0 auto',
+          maxWidth: '100%',
+          fontSize: 14,
+          borderBottom: 1,
+          borderColor: 'divider',
+          '.Mui-selected': {
+            fontSize: '14px !important',
+            color: 'primary.main',
+          },
+        }}>
+        <Tab label={t('admin.creditGrants.overview')} value={CreditTab.OVERVIEW} />
+        <Tab label={t('admin.creditGrants.title')} value={CreditTab.GRANTS} />
+        <Tab label={t('admin.creditTransactions.title')} value={CreditTab.TRANSACTIONS} />
+      </Tabs>
+      {/* 概览标签页 */}
+      {creditTab === CreditTab.OVERVIEW && (
+        <Box sx={{ width: '100%', mt: 1 }} key={creditTab}>
+          <Box
+            sx={{
+              display: 'grid',
+              gridTemplateColumns: {
+                xs: 'repeat(1, 1fr)',
+                md: 'repeat(2, 1fr)',
+              },
+              gap: 2,
+              '@container (max-width: 600px)': {
+                gridTemplateColumns: 'repeat(1, 1fr)',
+              },
+            }}>
+            {creditCurrencies.map(renderCreditOverviewCard)}
+          </Box>
+
+          {creditCurrencies.length === 0 && (
+            <Box
+              sx={{
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                justifyContent: 'center',
+                py: 8,
+                textAlign: 'center',
+              }}>
+              <Typography
+                variant="h6"
+                gutterBottom
+                sx={{
+                  color: 'text.secondary',
+                }}>
+                {t('admin.customer.creditGrants.noGrants')}
+              </Typography>
+              <Typography
+                variant="body2"
+                sx={{
+                  color: 'text.secondary',
+                }}>
+                {t('admin.customer.creditGrants.noGrantsDescription')}
+              </Typography>
+            </Box>
+          )}
+        </Box>
+      )}
+      {creditTab === CreditTab.GRANTS && <CreditGrantsList customer_id={customerId} mode={mode} key={creditTab} />}
+      {creditTab === CreditTab.TRANSACTIONS && (
+        <CreditTransactionsList customer_id={customerId} mode={mode} key={creditTab} />
+      )}
+    </Stack>
+  );
+}

package/src/components/customer/form.tsx

@@ -81,13 +81,16 @@ export default function CustomerForm() {
           },
         }}
       />
-
       <FormLabel className="base-label">{t('payment.checkout.billing.required')}</FormLabel>
       <Controller
         name="address.country"
         control={control}
         render={({ field }) => (
-          <CountrySelect {...field} ref={field.ref as unknown as React.RefObject<HTMLDivElement>} sx={{ pl: '6px' }} />
+          <CountrySelect
+            {...field}
+            ref={field.ref as unknown as React.RefObject<HTMLDivElement | null>}
+            sx={{ pl: '6px' }}
+          />
         )}
       />
       <FormInput

package/src/components/invoice/list.tsx

@@ -12,7 +12,7 @@ import {
   getTxLink,
 } from '@blocklet/payment-react';
 import type { TInvoiceExpanded } from '@blocklet/payment-types';
-import { CircularProgress, Typography } from '@mui/material';
+import { Avatar, CircularProgress, Typography } from '@mui/material';
 import { useLocalStorageState } from 'ahooks';
 import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
@@ -176,6 +176,24 @@ export default function InvoiceList({
         },
       },
     },
+    {
+      label: t('common.paymentMethod'),
+      name: 'paymentMethod',
+      width: 120,
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const invoice = data?.list[index] as TInvoiceExpanded;
+          return (
+            <InvoiceLink invoice={invoice}>
+              <Typography sx={{ display: 'flex', alignItems: 'center', whiteSpace: 'nowrap' }}>
+                <Avatar src={invoice.paymentMethod.logo} sx={{ width: 18, height: 18, mr: 1 }} />
+                {invoice.paymentMethod.name}
+              </Typography>
+            </InvoiceLink>
+          );
+        },
+      },
+    },
     {
       label: t('common.status'),
       name: 'status',