payment-kit 1.18.56 → 1.19.1

package/src/app.tsx

@@ -27,6 +27,7 @@ const CustomerSubscriptionDetail = React.lazy(() => import('./pages/customer/sub
 const CustomerSubscriptionEmbed = React.lazy(() => import('./pages/customer/subscription/embed'));
 const CustomerSubscriptionChangePlan = React.lazy(() => import('./pages/customer/subscription/change-plan'));
 const CustomerSubscriptionChangePayment = React.lazy(() => import('./pages/customer/subscription/change-payment'));
+const CustomerCreditGrantDetail = React.lazy(() => import('./pages/customer/credit-grant/detail'));
 const CustomerRecharge = React.lazy(() => import('./pages/customer/recharge/subscription'));
 const CustomerPayoutDetail = React.lazy(() => import('./pages/customer/payout/detail'));
 const IntegrationsPage = React.lazy(() => import('./pages/integrations'));
@@ -149,6 +150,15 @@ function App() {
                 </UserLayout>
               }
             />
+            <Route
+              key="customer-credit-grant"
+              path="/customer/credit-grant/:id"
+              element={
+                <UserLayout>
+                  <CustomerCreditGrantDetail />
+                </UserLayout>
+              }
+            />
             <Route key="customer-fallback" path="/customer/*" element={<Navigate to="/customer" />} />,
             <Route path="*" element={<Navigate to="/" />} />
           </Routes>

package/src/components/actions.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { stopEvent } from '@blocklet/payment-react';
 import { ExpandMoreOutlined, MoreHorizOutlined } from '@mui/icons-material';
@@ -21,13 +22,15 @@ export type ActionsProps = {
   onOpenCallback?: Function;
 };
 
-Actions.defaultProps = {
-  variant: 'compact',
-  sx: {},
-  onOpenCallback: null,
-};
-
-export default function Actions(props: ActionsProps) {
+export default function Actions(rawProps: ActionsProps) {
+  const props: ActionsProps = Object.assign(
+    {
+      variant: 'compact',
+      sx: {},
+      onOpenCallback: null,
+    },
+    rawProps
+  );
   const { t } = useLocaleContext();
   const [anchorEl, setAnchorEl] = useState(null);
   const open = Boolean(anchorEl);
@@ -102,7 +105,12 @@ export default function Actions(props: ActionsProps) {
         {props.actions.map((action) =>
           openLoading ? (
             <MenuItem key={action.label} dense disabled>
-              <ListItemText primary={<Skeleton />} primaryTypographyProps={{ width: '56px' }} />
+              <ListItemText
+                primary={<Skeleton />}
+                slotProps={{
+                  primary: { width: '56px' },
+                }}
+              />
             </MenuItem>
           ) : (
             <MenuItem
@@ -111,7 +119,12 @@ export default function Actions(props: ActionsProps) {
               dense={!!action.dense}
               disabled={!!action.disabled}
               onClick={(e) => onClose(e, action.handler)}>
-              <ListItemText primary={action.label} primaryTypographyProps={{ color: action.color }} />
+              <ListItemText
+                primary={action.label}
+                slotProps={{
+                  primary: { color: action.color },
+                }}
+              />
             </MenuItem>
           )
         )}

package/src/components/balance-list.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { formatBNStr, usePaymentContext } from '@blocklet/payment-react';
 import type { GroupedBN } from '@blocklet/payment-types';
@@ -10,17 +11,36 @@ type Props = {
   showLogo?: boolean;
 };
 
-export default function BalanceList(props: Props) {
+export default function BalanceList(rawProps: Props) {
+  const props = Object.assign(
+    {
+      data: {},
+      showLogo: false,
+    },
+    rawProps
+  );
   const { t } = useLocaleContext();
   const { settings } = usePaymentContext();
   const currencies = flatten(settings.paymentMethods.map((method) => method.payment_currencies));
 
   if (isEmpty(props.data)) {
-    return <Typography color="text.secondary">{t('common.none')}</Typography>;
+    return (
+      <Typography
+        sx={{
+          color: 'text.secondary',
+        }}>
+        {t('common.none')}
+      </Typography>
+    );
   }
 
   return (
-    <Stack direction="column" alignItems="flex-start" sx={{ width: '100%' }}>
+    <Stack
+      direction="column"
+      sx={{
+        alignItems: 'flex-start',
+        width: '100%',
+      }}>
       {Object.entries(props.data).map(([currencyId, amount]) => {
         const currency = currencies.find((c) => c.id === currencyId);
         if (!currency) {
@@ -29,17 +49,30 @@ export default function BalanceList(props: Props) {
         return (
           <Stack
             key={currencyId}
-            sx={{ width: '100%', maxWidth: '280px' }}
             direction="row"
             spacing={1}
-            alignItems="center">
+            sx={{
+              alignItems: 'center',
+              width: '100%',
+              maxWidth: '280px',
+            }}>
             {props?.showLogo && (
               <Avatar src={currency.logo} alt={currency.symbol} style={{ width: '18px', height: '18px' }} />
             )}
-            <Typography sx={{ width: '32px', minWidth: 100 }} color="text.secondary">
+            <Typography
+              sx={{
+                color: 'text.secondary',
+                width: '32px',
+                minWidth: 100,
+              }}>
               {currency.symbol}
             </Typography>
-            <Typography sx={{ flex: 1, textAlign: 'right' }} color="text.primary">
+            <Typography
+              sx={{
+                color: 'text.primary',
+                flex: 1,
+                textAlign: 'right',
+              }}>
               {formatBNStr(amount, currency.decimal, 6, false)}
             </Typography>
           </Stack>
@@ -48,8 +81,3 @@ export default function BalanceList(props: Props) {
     </Stack>
   );
 }
-
-BalanceList.defaultProps = {
-  data: {},
-  showLogo: false,
-};

package/src/components/collapse.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 import { ExpandLessOutlined, ExpandMoreOutlined } from '@mui/icons-material';
 import { Box, Collapse, Stack } from '@mui/material';
 import { useEffect, useState } from 'react';
@@ -11,19 +12,23 @@ type Props = {
   value?: string;
   onChange?: (value: string, expanded: boolean) => void;
   lazy?: boolean;
+  card?: boolean;
 };
 
-IconCollapse.defaultProps = {
-  value: '',
-  onChange: () => {},
-  children: null,
-  expanded: false,
-  addons: null,
-  style: {},
-  lazy: true,
-};
-
-export default function IconCollapse(props: Props) {
+export default function IconCollapse(rawProps: Props) {
+  const props = Object.assign(
+    {
+      value: '',
+      onChange: () => {},
+      children: null,
+      expanded: false,
+      addons: null,
+      style: {},
+      lazy: true,
+      card: false,
+    },
+    rawProps
+  );
   const [expanded, setExpanded] = useState(props.expanded || false);
   const toggleExpanded = () => {
     const newExpanded = !expanded;
@@ -38,27 +43,40 @@ export default function IconCollapse(props: Props) {
     <>
       <Stack
         direction="row"
-        alignItems="center"
-        justifyContent="space-between"
         onClick={(e) => {
           e.stopPropagation();
           props.onChange?.(props.value || '', !expanded);
           toggleExpanded();
         }}
         sx={{
+          alignItems: 'center',
+          justifyContent: 'space-between',
           width: 1,
           cursor: 'pointer',
           fontWeight: 500,
           color: 'text.primary',
           '& :hover': { color: 'primary.main' },
+          ...(props.card && {
+            borderRadius: 1,
+            padding: 1,
+            pl: 2,
+            backgroundColor: 'grey.100',
+          }),
           ...props.style,
         }}>
         <Box>{typeof props.trigger === 'function' ? props.trigger(expanded) : props.trigger}</Box>
-        <Stack direction="row" alignItems="center" spacing={2}>
+        <Stack
+          direction="row"
+          spacing={2}
+          sx={{
+            alignItems: 'center',
+          }}>
           {props.addons} {expanded ? <ExpandLessOutlined /> : <ExpandMoreOutlined />}
         </Stack>
       </Stack>
-      <Collapse in={expanded}>{expanded || props.lazy ? props.children : null}</Collapse>
+      <Collapse in={expanded} sx={{ width: '100%' }}>
+        {expanded || props.lazy ? props.children : null}
+      </Collapse>
     </>
   );
 }

package/src/components/copyable.tsx

@@ -9,7 +9,7 @@ interface CopyableProps {
   children?: ReactNode;
   style?: React.CSSProperties;
 }
-export default function Copyable({ text, children, style }: CopyableProps) {
+export default function Copyable({ text, children = null, style = {} }: CopyableProps) {
   const { locale } = useLocaleContext();
   return (
     /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
@@ -20,7 +20,13 @@ export default function Copyable({ text, children, style }: CopyableProps) {
       locale={locale}
       style={style}
       render={({ copyButton, containerRef }: any) => (
-        <Stack ref={containerRef} direction="row" alignItems="center" color="text.secondary">
+        <Stack
+          ref={containerRef}
+          direction="row"
+          sx={{
+            alignItems: 'center',
+            color: 'text.secondary',
+          }}>
           {children || (
             <Typography
               className="copyable-text"
@@ -41,8 +47,3 @@ export default function Copyable({ text, children, style }: CopyableProps) {
     />
   );
 }
-
-Copyable.defaultProps = {
-  style: {},
-  children: null,
-};

package/src/components/currency.tsx

@@ -6,17 +6,25 @@ type Props = {
   sx?: SxProps;
 };
 
-export default function Currency({ logo, name, sx }: Props) {
+export default function Currency({ logo, name, sx = {} }: Props) {
   return (
-    <Stack direction="row" alignItems="center" spacing={0.5} sx={sx}>
+    <Stack
+      direction="row"
+      spacing={0.5}
+      sx={[
+        {
+          alignItems: 'center',
+        },
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}>
       <Avatar src={logo} alt={name} sx={{ width: 20, height: 20 }} />
-      <Typography color="text.primary" className="currency-name">
+      <Typography
+        className="currency-name"
+        sx={{
+          color: 'text.primary',
+        }}>
         {name}
       </Typography>
     </Stack>
   );
 }
-
-Currency.defaultProps = {
-  sx: {},
-};

package/src/components/customer/actions.tsx

@@ -15,11 +15,7 @@ type Props = {
   variant?: LiteralUnion<'compact' | 'normal', string>;
 };
 
-CustomerActions.defaultProps = {
-  variant: 'compact',
-};
-
-export default function CustomerActions({ data, onChange, variant }: Props) {
+export default function CustomerActions({ data, onChange, variant = 'compact' }: Props) {
   const { t } = useLocaleContext();
   const [state, setState] = useSetState({
     action: '',

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