payment-kit 1.19.0 → 1.19.2

package/src/components/customer/credit-grant-item-list.tsx

@@ -0,0 +1,99 @@
+/* eslint-disable react/no-unstable-nested-components */
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { formatPrice, Table, usePaymentContext } from '@blocklet/payment-react';
+import type { TLineItemExpanded, TPaymentCurrency, TPriceExpanded } from '@blocklet/payment-types';
+import { Avatar, Stack, Typography, Box } from '@mui/material';
+import { useNavigate } from 'react-router-dom';
+import Copyable from '../copyable';
+
+type CreditGrantItemListProps = {
+  data: TLineItemExpanded[];
+  currency: TPaymentCurrency;
+  mode?: 'dashboard' | 'portal';
+};
+
+export default function CreditGrantItemList({ data, currency, mode = 'portal' }: CreditGrantItemListProps) {
+  const { t } = useLocaleContext();
+  const navigate = useNavigate();
+  const { session } = usePaymentContext();
+  const isAdmin = mode === 'dashboard' && ['owner', 'admin'].includes(session?.user?.role || '');
+
+  const viewProduct = (price: TPriceExpanded) => {
+    if (!isAdmin) {
+      return;
+    }
+    navigate(`/admin/products/${price.product_id}?price_id=${price.id}&currency_id=${price.currency_id}`);
+  };
+
+  const columns = [
+    {
+      label: t('admin.subscription.product'),
+      name: 'product_id',
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = data[index] as TLineItemExpanded;
+          return (
+            <Stack direction="row" spacing={1} onClick={() => viewProduct(item.price)}>
+              <Avatar
+                src={item.price?.product?.images?.[0]}
+                alt={item.price?.product?.name}
+                variant="square"
+                sx={{ borderRadius: 1 }}
+              />
+              <Stack direction="column" spacing={0.5}>
+                <Typography
+                  variant="body2"
+                  sx={{
+                    fontWeight: 500,
+                  }}>
+                  {item.price?.product?.name}
+                </Typography>
+                <Typography
+                  variant="body2"
+                  sx={{
+                    color: 'text.secondary',
+                  }}>
+                  {formatPrice(item.price, currency, item.price?.product?.unit_label || '')}
+                </Typography>
+              </Stack>
+            </Stack>
+          );
+        },
+      },
+    },
+    {
+      label: t('common.id'),
+      name: 'id',
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = data[index] as TLineItemExpanded;
+          return (
+            <Box onClick={() => viewProduct(item.price)}>
+              <Copyable text={item.id} />
+            </Box>
+          );
+        },
+      },
+    },
+  ].filter(Boolean);
+
+  return (
+    <Table
+      data={data}
+      columns={columns}
+      loading={false}
+      footer={false}
+      toolbar={false}
+      components={{
+        TableToolbar: () => null,
+        TableFooter: () => null,
+      }}
+      options={{
+        count: data.length,
+        page: 0,
+        rowsPerPage: 100,
+      }}
+      emptyNodeText={t('admin.customer.creditGrants.noApplicableProducts')}
+    />
+  );
+}

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

@@ -0,0 +1,246 @@
+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 { useMemo, useState } from 'react';
+import type { TPaymentCurrency } from '@blocklet/payment-types';
+import { useRequest } from 'ahooks';
+import { useConditionalSection } from '../conditional-section';
+
+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 conditionalSection = useConditionalSection();
+
+  const creditCurrencies = useMemo(() => {
+    return (
+      settings?.paymentMethods
+        ?.filter((method: any) => method.type === 'arcblock')
+        ?.flatMap((method: any) => method.payment_currencies)
+        ?.filter((currency: TPaymentCurrency) => {
+          return currency.type === 'credit';
+        }) || []
+    );
+  }, [settings]);
+
+  const { data: creditSummary } = useRequest(fetchCreditSummary, {
+    defaultParams: [customerId],
+    refreshDeps: [creditTab === CreditTab.OVERVIEW],
+    onSuccess: (data) => {
+      if (creditTab === CreditTab.OVERVIEW) {
+        const filteredCurrencies = creditCurrencies.filter((currency: TPaymentCurrency) => {
+          return data.grants?.[currency.id];
+        });
+        conditionalSection?.hideRender(filteredCurrencies.length === 0);
+      }
+    },
+  });
+
+  // 渲染信用概览卡片
+  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 filteredCreditCurrencies = useMemo(() => {
+    return creditCurrencies.filter((currency: TPaymentCurrency) => {
+      return creditSummary?.grants?.[currency.id];
+    });
+  }, [creditCurrencies, creditSummary?.grants]);
+
+  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)',
+              },
+            }}>
+            {filteredCreditCurrencies.map(renderCreditOverviewCard)}
+          </Box>
+
+          {filteredCreditCurrencies.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

@@ -8,8 +8,9 @@ import {
   validatePhoneNumber,
   getPhoneUtil,
   validatePostalCode,
+  FormLabel,
 } from '@blocklet/payment-react';
-import { FormLabel, Stack } from '@mui/material';
+import { Stack } from '@mui/material';
 import { Controller, useFormContext, useWatch } from 'react-hook-form';
 import isEmail from 'validator/es/lib/isEmail';
 import { useMount } from 'ahooks';
@@ -81,13 +82,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',