payment-kit 1.19.0 → 1.19.2

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,8 @@ 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 ConditionalSection from '../../components/conditional-section';
 
 import { useTransitionContext } from '../../components/progress-bar';
 import CurrentSubscriptions from '../../components/subscription/portal/list';
@@ -46,7 +49,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);
@@ -204,7 +215,6 @@ export default function CustomerHome() {
   const navigate = useNavigate();
   const [subscriptionStatus, setSubscriptionStatus] = useState(false);
   const [hasSubscriptions, setHasSubscriptions] = useState(false);
-  const [hasRevenues, setHasRevenues] = useState(false);
   const { startTransition } = useTransitionContext();
   const {
     data,
@@ -273,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' });
@@ -281,6 +297,10 @@ 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">
@@ -428,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;
@@ -460,6 +479,18 @@ export default function CustomerHome() {
     </Box>
   );
 
+  // 独立的Credit Card组件
+  const CreditCard = (
+    <ConditionalSection skeleton={loadingCard}>
+      <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>
+    </ConditionalSection>
+  );
+
   const InvoiceCard = loadingCard ? (
     <CardSkeleton height={200} />
   ) : (
@@ -488,13 +519,15 @@ export default function CustomerHome() {
     </Box>
   );
 
-  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>
+  const RevenueCard = (
+    <ConditionalSection skeleton={loadingCard}>
+      <Box className="base-card section section-revenue">
+        <Box className="section-header">
+          <Typography variant="h3">{t('customer.payout.title')}</Typography>
+        </Box>
+        <CustomerRevenueList />
       </Box>
-      <CustomerRevenueList setHasRevenues={setHasRevenues} />
-    </Box>
+    </ConditionalSection>
   );
 
   return (
@@ -551,6 +584,8 @@ export default function CustomerHome() {
       <Root>
         {SummaryCard}
         {SummaryCard && <Divider />}
+        {CreditCard}
+        {CreditCard && <Divider />}
         {SubscriptionCard}
         {SubscriptionCard && <Divider />}
         {InvoiceCard}

package/src/pages/customer/recharge/account.tsx

@@ -553,14 +553,14 @@ export default function BalanceRechargePage() {
                   helperText={amountError}
                   onChange={handleAmountChange}
                   inputRef={customInputRef}
+                  autoComplete="off"
                   slotProps={{
                     input: {
                       endAdornment: <Typography>{currency.symbol}</Typography>,
-                      autoComplete: 'off',
-                      inputProps: {
-                        min: 0,
-                        max: MAX_SAFE_AMOUNT,
-                      },
+                    },
+                    htmlInput: {
+                      min: 0,
+                      max: MAX_SAFE_AMOUNT,
                     },
                   }}
                 />

package/src/pages/customer/subscription/change-payment.tsx

@@ -17,6 +17,7 @@ import {
   getPriceCurrencyOptions,
   getStatementDescriptor,
   isValidCountry,
+  showStaking,
   usePaymentContext,
 } from '@blocklet/payment-react';
 import type { TCustomer, TPaymentCurrency, TPaymentMethod, TSubscriptionExpanded } from '@blocklet/payment-types';
@@ -222,6 +223,7 @@ function CustomerSubscriptionChangePayment({ subscription, customer, onComplete
     setState({ stripePaying: false });
   };
 
+  const currency = findCurrency(settings.paymentMethods, selectedCurrencyId) as TPaymentCurrency;
   return (
     <Stack direction="column" spacing={4} sx={{ maxWidth: '540px' }}>
       <Stack
@@ -248,10 +250,10 @@ function CustomerSubscriptionChangePayment({ subscription, customer, onComplete
         <SectionHeader title={t('payment.customer.changePayment.review')} />
         <PaymentSummary
           items={subscription.items as any[]}
-          currency={findCurrency(settings.paymentMethods, selectedCurrencyId) as TPaymentCurrency}
+          currency={currency}
           trialInDays={0}
           billingThreshold={0}
-          showStaking={method.type === 'arcblock' && !subscription.billing_thresholds?.no_stake}
+          showStaking={showStaking(method, currency, !!subscription.billing_thresholds?.no_stake)}
         />
       </Stack>
       <Stack direction="column" spacing={2}>

package/src/pages/customer/subscription/detail.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import {
+  CreditTransactionsList,
   CustomerInvoiceList,
   TxLink,
   api,
@@ -45,7 +46,7 @@ import SubscriptionActions, { ActionMethods } from '../../../components/subscrip
 import { canChangePaymentMethod } from '../../../libs/util';
 import { useSessionContext } from '../../../contexts/session';
 import InfoMetric from '../../../components/info-metric';
-import { useUnpaidInvoicesCheckForSubscription } from '../../../hooks/subscription';
+import { useUnpaidInvoicesCheckForSubscription, usePendingAmountForSubscription } from '../../../hooks/subscription';
 import { formatSmartDuration, TimeUnit } from '../../../libs/dayjs';
 import InfoRowGroup from '../../../components/info-row-group';
 
@@ -74,6 +75,7 @@ export default function CustomerSubscriptionDetail() {
   const { session } = useSessionContext();
   const { loading, error, data, refresh } = useRequest(() => fetchData(id));
   const { hasUnpaid, checkUnpaidInvoices } = useUnpaidInvoicesCheckForSubscription(id);
+  const { hasPendingAmount, pendingAmount } = usePendingAmountForSubscription(id, data?.paymentCurrency);
   const overdraftProtectionReady =
     ['active', 'trialing', 'past_due'].includes(data?.status || '') && data?.paymentMethod?.type === 'arcblock';
   const {
@@ -119,11 +121,13 @@ export default function CustomerSubscriptionDetail() {
     return <CircularProgress />;
   }
 
+  const isCredit = data?.paymentCurrency?.type === 'credit';
   const showOverdraftProtection =
     data?.paymentMethod?.type === 'arcblock' &&
     !overdraftProtectionLoading &&
     !!overdraftProtection &&
-    ['active', 'trialing', 'past_due'].includes(data.status);
+    ['active', 'trialing', 'past_due'].includes(data.status) &&
+    !isCredit;
 
   const renderOverdraftProtectionLabel = () => {
     const enabled = data?.overdraft_protection?.enabled;
@@ -303,6 +307,14 @@ export default function CustomerSubscriptionDetail() {
             {t('customer.unpaidInvoicesWarningTip')}
           </Alert>
         )}
+        {hasPendingAmount && pendingAmount && (
+          <Alert severity="error" sx={{ mb: 2 }}>
+            {t('customer.pendingAmountWarningTip', {
+              amount: formatBNStr(pendingAmount, data?.paymentCurrency?.decimal),
+              symbol: data?.paymentCurrency?.symbol,
+            })}
+          </Alert>
+        )}
         <Stack
           className="page-header"
           direction="row"
@@ -491,6 +503,17 @@ export default function CustomerSubscriptionDetail() {
                 value={renderOverdraftProtectionLabel()}
               />
             )}
+            {isCredit && hasPendingAmount && (
+              <InfoMetric
+                label={t('admin.customer.creditGrants.pendingAmount')}
+                value={
+                  <Typography
+                    sx={{
+                      color: 'error.main',
+                    }}>{`${formatBNStr(pendingAmount, data?.paymentCurrency?.decimal)} ${data?.paymentCurrency?.symbol}`}</Typography>
+                }
+              />
+            )}
           </Stack>
         </Box>
       </Box>
@@ -642,19 +665,30 @@ export default function CustomerSubscriptionDetail() {
         </Box>
       </Box>
       <Divider />
-      <Box className="section">
-        <Typography variant="h3" className="section-header">
-          {t('customer.invoiceHistory')}
-        </Typography>
-        <Box className="section-body">
-          <CustomerInvoiceList
-            subscription_id={data.id}
-            type="table"
-            include_staking
-            status="open,paid,uncollectible,void"
-          />
+      {isCredit ? (
+        <Box className="section">
+          <Typography variant="h3" className="section-header">
+            {t('admin.creditTransactions.title')}
+          </Typography>
+          <Box className="section-body">
+            <CreditTransactionsList customer_id={data.customer_id} subscription_id={data.id} showAdminColumns={false} />
+          </Box>
         </Box>
-      </Box>
+      ) : (
+        <Box className="section">
+          <Typography variant="h3" className="section-header">
+            {t('customer.invoiceHistory')}
+          </Typography>
+          <Box className="section-body">
+            <CustomerInvoiceList
+              subscription_id={data.id}
+              type="table"
+              include_staking
+              status="open,paid,uncollectible,void"
+            />
+          </Box>
+        </Box>
+      )}
     </Root>
   );
 }

package/src/pages/customer/subscription/embed.tsx

@@ -60,7 +60,7 @@ const fetchSubscriptionData = (id: string, authToken: string): Promise<TSubscrip
     throw new Error('Subscription ID is missing');
   }
 
-  return api.get(`/api/subscriptions/${id}?authToken=${authToken}`).then((res) => res.data);
+  return api.get(`/api/subscriptions/${id}?authToken=${authToken}`).then((res: any) => res.data);
 };
 
 const checkHasPastDue = async (subscriptionId: string, authToken: string): Promise<boolean> => {