payment-kit 1.23.11 → 1.24.1

package/src/components/subscription/payment-method-info.tsx

@@ -1,4 +1,4 @@
-import { Button } from '@arcblock/ux';
+import Button from '@arcblock/ux/lib/Button';
 import DID from '@arcblock/ux/lib/DID';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';

package/src/components/subscription/portal/actions.tsx

@@ -153,8 +153,15 @@ export function SubscriptionActionsInner({
     return true;
   };
 
+  const isScheduledCreditPrice = (price: any) => {
+    const schedule = price?.metadata?.credit_config?.schedule;
+    return schedule?.enabled && schedule?.delivery_mode === 'schedule';
+  };
+
+  const hasScheduledCredit = (subscription.items || []).some((item: any) => isScheduledCreditPrice(item.price));
+
   const { data: changePlanAvailable = false } = useRequest(() => fetchChangePlan(subscription.id), {
-    ready: !!showExtra && isActive(subscription),
+    ready: !!showExtra && isActive(subscription) && !hasScheduledCredit,
   });
 
   const { data: batchPayAvailable = '' } = useRequest(() => fetchBatchPay(subscription.id), {
@@ -491,7 +498,7 @@ export function SubscriptionActionsInner({
       },
       {
         key: 'changePlan',
-        show: changePlanAvailable,
+        show: changePlanAvailable && !hasScheduledCredit,
         label: action?.text || t('payment.customer.changePlan.button'),
         onClick: (e) => {
           e?.stopPropagation();

package/src/locales/en.tsx

@@ -7,6 +7,7 @@ export default flat({
     estimated: 'Estimated',
     total: 'Total',
     active: 'Active',
+    every: 'Every',
     inactive: 'Inactive',
     metadata: {
       label: 'Metadata',
@@ -416,6 +417,11 @@ export default flat({
       defaultNickname: 'Credit Recharge',
       unitLabel: 'units',
       settings: 'Credit Settings',
+      configTitle: 'Credit Configuration',
+      expirationTime: {
+        label: 'Expiration',
+        expireWithNextGrant: 'Expire with Next Grant',
+      },
       name: {
         placeholder: 'Enter Credit product name',
       },
@@ -451,6 +457,28 @@ export default flat({
         help: 'Usage order when user has multiple Credits, lower numbers have higher priority',
         description: 'Range: 0-100, 0 is highest priority, 50 is default value',
       },
+      deliveryMode: {
+        label: 'Delivery Mode',
+        once: 'One-time',
+        periodic: 'Periodic',
+      },
+      schedule: {
+        interval: {
+          label: 'Grant Frequency',
+          hour: 'hours',
+          day: 'days',
+          week: 'weeks',
+          month: 'months',
+        },
+        amountPerGrant: {
+          label: 'Amount per Grant',
+          description: 'Fixed Credit amount per grant',
+        },
+        expireWithNextGrant: {
+          label: 'Expire with Next Grant',
+          description: 'This Credit expires when the next grant is issued (refresh mode)',
+        },
+      },
     },
     meterEvent: {
       title: 'Meter Event Details',

package/src/locales/zh.tsx

@@ -7,6 +7,7 @@ export default flat({
     estimated: '预估',
     total: '总量',
     active: '生效中',
+    every: '每',
     metadata: {
       label: '元数据',
       description: '添加自定义键值对以存储有关此计量器的其他信息。',
@@ -414,6 +415,11 @@ export default flat({
       defaultNickname: 'Credit 充值',
       unitLabel: '单位',
       settings: 'Credit 设置',
+      configTitle: 'Credit 配置',
+      expirationTime: {
+        label: '过期时间',
+        expireWithNextGrant: '随下次发放过期',
+      },
       name: {
         placeholder: '输入 Credit 产品名称',
       },
@@ -448,6 +454,28 @@ export default flat({
         help: '当用户有多个 Credit 时的使用顺序，数字越小优先级越高',
         description: '范围：0-100，0 为最高优先级，50 为默认值',
       },
+      deliveryMode: {
+        label: '发放模式',
+        once: '一次性发放',
+        periodic: '周期性发放',
+      },
+      schedule: {
+        interval: {
+          label: '发放频率',
+          hour: '小时',
+          day: '天',
+          week: '周',
+          month: '月',
+        },
+        amountPerGrant: {
+          label: '每次发放数量',
+          description: '每次发放固定数量的 Credit',
+        },
+        expireWithNextGrant: {
+          label: '随下次发放过期',
+          description: '本次 Credit 将在下一次发放时自动过期',
+        },
+      },
     },
     meterEvent: {
       title: '计量事件详情',

package/src/pages/admin/billing/subscriptions/detail.tsx

@@ -8,6 +8,7 @@ import {
   formatTime,
   useMobile,
   hasDelegateTxHash,
+  CreditGrantsList,
   CreditTransactionsList,
 } from '@blocklet/payment-react';
 import type { TProduct, TSubscriptionExpanded } from '@blocklet/payment-types';
@@ -89,7 +90,10 @@ export default function SubscriptionDetail(props: { id: string }) {
     setState((prev) => ({ editing: { ...prev.editing, metadata: true } }));
   };
 
-  const isCredit = data.paymentCurrency.type === 'credit';
+  const isCredit =
+    data?.serviceType === 'credit' ||
+    data?.paymentCurrency?.type === 'credit' ||
+    data?.items?.some((item) => item?.price?.product?.type === 'credit' || item?.price?.metadata?.credit_config);
 
   return (
     <Root direction="column" spacing={2.5} sx={{ mb: 4 }}>
@@ -379,22 +383,31 @@ export default function SubscriptionDetail(props: { id: string }) {
               </>
             );
           })()}
-          <Divider />
+          <Divider sx={{ my: 1.5 }} />
           {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
-                  showTimeFilter
-                  mode="dashboard"
-                />
+            <>
+              <Box className="section">
+                <Typography variant="h3" className="section-header">
+                  {t('admin.creditGrants.tab')}
+                </Typography>
+                <Box className="section-body">
+                  <CreditGrantsList customer_id={data.customer_id} subscription_id={data.id} mode="dashboard" />
+                </Box>
               </Box>
-            </Box>
+              <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}
+                    includeGrants
+                    mode="dashboard"
+                  />
+                </Box>
+              </Box>
+            </>
           ) : (
             <>
               <Box className="section">

package/src/pages/admin/products/prices/detail.tsx

@@ -310,6 +310,120 @@ export default function PriceDetail(props: { id: string }) {
           </Box>
 
           <Divider />
+          {data.metadata?.credit_config && (
+            <>
+              <Box className="section">
+                <SectionHeader title={t('admin.creditProduct.configTitle')} />
+                <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',
+                      },
+                    },
+                  }}>
+                  {(() => {
+                    const creditConfig = data.metadata.credit_config;
+                    const isScheduleEnabled = creditConfig.schedule?.enabled;
+                    const creditCurrencyItem = data.currency_options?.find(
+                      (item: any) => item.currency_id === creditConfig.currency_id
+                    );
+                    const creditCurrency = creditCurrencyItem ? (creditCurrencyItem as any).currency : null;
+
+                    return (
+                      <>
+                        {/* 周期性发放的字段 */}
+                        {isScheduleEnabled &&
+                          creditConfig.schedule?.interval_value &&
+                          creditConfig.schedule?.interval_unit && (
+                            <InfoRow
+                              label={t('admin.creditProduct.schedule.interval.label')}
+                              value={`${t('common.every')} ${creditConfig.schedule.interval_value} ${t(`admin.creditProduct.schedule.interval.${creditConfig.schedule.interval_unit}`)}`}
+                            />
+                          )}
+                        {isScheduleEnabled && creditConfig.schedule?.amount_per_grant && (
+                          <InfoRow
+                            label={t('admin.creditProduct.schedule.amountPerGrant.label')}
+                            value={
+                              creditCurrency ? (
+                                <Stack direction="row" spacing={0.5} alignItems="center">
+                                  <span>{creditConfig.schedule.amount_per_grant}</span>
+                                  <Currency logo={creditCurrency.logo} name={creditCurrency.symbol} size={16} />
+                                </Stack>
+                              ) : (
+                                creditConfig.schedule.amount_per_grant
+                              )
+                            }
+                          />
+                        )}
+                        {/* 一次性发放的字段 */}
+                        {!isScheduleEnabled && creditConfig.credit_amount && (
+                          <InfoRow
+                            label={t('admin.creditProduct.creditAmount.label')}
+                            value={
+                              creditCurrency ? (
+                                <Stack direction="row" spacing={0.5} alignItems="center">
+                                  <span>{creditConfig.credit_amount}</span>
+                                  <Currency logo={creditCurrency.logo} name={creditCurrency.symbol} size={16} />
+                                </Stack>
+                              ) : (
+                                creditConfig.credit_amount
+                              )
+                            }
+                          />
+                        )}
+                        {/* 过期时间 */}
+                        <InfoRow
+                          label={t('admin.creditProduct.expirationTime.label')}
+                          value={(() => {
+                            if (isScheduleEnabled && creditConfig.schedule?.expire_with_next_grant) {
+                              return t('admin.creditProduct.expirationTime.expireWithNextGrant');
+                            }
+                            const durationValue = creditConfig.valid_duration_value;
+                            const durationUnit = creditConfig.valid_duration_unit;
+                            if (durationValue && durationValue > 0 && durationUnit) {
+                              return `${durationValue} ${t(`admin.creditProduct.validDuration.${durationUnit}`)}`;
+                            }
+                            return '-';
+                          })()}
+                        />
+                        {/* 使用优先级 */}
+                        {creditConfig.priority !== undefined && (
+                          <InfoRow label={t('admin.creditProduct.priority.label')} value={creditConfig.priority} />
+                        )}
+                        {/* 关联价格 */}
+                        {creditConfig.applicable_prices && creditConfig.applicable_prices.length > 0 && (
+                          <InfoRow
+                            label={t('admin.creditProduct.associatedPrices.label')}
+                            value={creditConfig.applicable_prices.length}
+                          />
+                        )}
+                      </>
+                    );
+                  })()}
+                </InfoRowGroup>
+              </Box>
+              <Divider />
+            </>
+          )}
           {isCreditMetered(data) && (
             <>
               <Box className="section">

package/src/pages/admin/settings/vault-config/index.tsx

@@ -6,7 +6,7 @@ import { useRequest, useSetState } from 'ahooks';
 import Empty from '@arcblock/ux/lib/Empty';
 import { HelpOutline } from '@mui/icons-material';
 import type { TPaymentCurrencyExpanded } from '@blocklet/payment-types';
-import { Toast } from '@arcblock/ux';
+import Toast from '@arcblock/ux/lib/Toast';
 import { styled } from '@mui/system';
 import { useSessionContext } from '../../../../contexts/session';
 

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

@@ -2,6 +2,7 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import {
   api,
+  CreditGrantsList,
   CreditTransactionsList,
   CustomerInvoiceList,
   formatBNStr,
@@ -129,7 +130,10 @@ export default function CustomerSubscriptionDetail() {
     return <CircularProgress />;
   }
 
-  const isCredit = data?.paymentCurrency?.type === 'credit';
+  const isCredit =
+    data?.serviceType === 'credit' ||
+    data?.paymentCurrency?.type === 'credit' ||
+    data?.items?.some((item) => item?.price?.product?.type === 'credit' || item?.price?.metadata?.credit_config);
   const showOverdraftProtection =
     data?.paymentMethod?.type === 'arcblock' &&
     !overdraftProtectionLoading &&
@@ -751,14 +755,30 @@ export default function CustomerSubscriptionDetail() {
       })()}
       <Box className="divider" />
       {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} />
+        <>
+          <Divider />
+          <Box className="section">
+            <Typography variant="h3" className="section-header">
+              {t('admin.creditGrants.tab')}
+            </Typography>
+            <Box className="section-body">
+              <CreditGrantsList customer_id={data.customer_id} subscription_id={data.id} mode="portal" />
+            </Box>
           </Box>
-        </Box>
+          <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}
+                includeGrants
+              />
+            </Box>
+          </Box>
+        </>
       ) : (
         <Box className="section">
           <Typography variant="h3" className="section-header">

package/src/pages/integrations/donations/edit-form.tsx

@@ -13,7 +13,7 @@ import {
   ToggleButton,
 } from '@mui/material';
 import { api, formatError, clearDonateCache } from '@blocklet/payment-react';
-import { Toast } from '@arcblock/ux';
+import Toast from '@arcblock/ux/lib/Toast';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import type { TSetting } from '@blocklet/payment-types';
 import { useState, useEffect, useRef } from 'react';

package/src/pages/integrations/donations/index.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/no-unstable-nested-components */
-import { Toast } from '@arcblock/ux';
+import Toast from '@arcblock/ux/lib/Toast';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { api, formatError, Table, ConfirmDialog, Switch, clearDonateCache, getPrefix } from '@blocklet/payment-react';
 import { Alert, Typography, Button, CircularProgress, Stack, Avatar, Box, IconButton, Tooltip } from '@mui/material';

package/vite.config.ts

@@ -98,7 +98,6 @@ export default defineConfig(({ mode }) => {
             moment: ['moment', 'moment-timezone'],
             utils: ['dayjs', 'numbro', 'bn.js'],
             hooks: ['ahooks', 'use-bus'],
-            lottie: ['lottie-web', 'react-lottie-player', '@lottiefiles/react-lottie-player'],
             'vendor-arcblock': ['@arcblock/did-connect-react', '@arcblock/ux'],
             'vendor-blocklet': ['@blocklet/ui-react'],
           },