payment-kit 1.19.0 → 1.19.2

package/src/components/pricing-table/preview.tsx

@@ -9,7 +9,7 @@ export default function PricingTablePreview({
   id,
   version = 1,
 }: { id: string; version?: number } & {
-  ref?: React.RefObject<unknown>;
+  ref?: React.RefObject<unknown | null>;
 }) {
   const innerRef = useRef(null);
   const size = useSize(innerRef);

package/src/components/product/add-price.tsx

@@ -6,16 +6,16 @@ import type { EventHandler } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 
 import PriceForm, { DEFAULT_PRICE, Price } from '../price/form';
+import { ProductsProvider } from '../../contexts/products';
 
-export default function AddPrice({
-  loading,
-  onSave,
-  onCancel,
-}: {
+interface AddPriceProps {
   loading: boolean;
   onSave: EventHandler<any>;
   onCancel: EventHandler<any>;
-}) {
+  productType?: string;
+}
+
+export default function AddPrice({ loading, onSave, onCancel, productType = '' }: AddPriceProps) {
   const { t } = useLocaleContext();
   const { settings } = usePaymentContext();
   const methods = useForm<Price>({
@@ -63,7 +63,9 @@ export default function AddPrice({
         </Stack>
       }>
       <FormProvider {...methods}>
-        <PriceForm />
+        <ProductsProvider>
+          <PriceForm productType={productType} />
+        </ProductsProvider>
       </FormProvider>
     </Dialog>
   );

package/src/components/product/create.tsx

@@ -9,6 +9,7 @@ import { FormProvider, useFieldArray, useForm } from 'react-hook-form';
 
 import PriceForm, { DEFAULT_PRICE } from '../price/form';
 import ProductForm, { Product } from './form';
+import { ProductsProvider } from '../../contexts/products';
 
 export default function CreateProduct({
   simple = true,
@@ -92,10 +93,12 @@ export default function CreateProduct({
         </Stack>
       }>
       <FormProvider {...methods}>
-        <ProductForm simple={simple} />
-        {prices.fields.map((price, index) => (
-          <PriceForm key={price.id} prefix={`prices.${index}`} simple={simple} />
-        ))}
+        <ProductsProvider>
+          <ProductForm simple={simple} />
+          {prices.fields.map((price, index) => (
+            <PriceForm key={price.id} prefix={`prices.${index}`} simple={simple} />
+          ))}
+        </ProductsProvider>
       </FormProvider>
     </Dialog>
   );

package/src/components/product/edit-price.tsx

@@ -10,19 +10,28 @@ import { FormProvider, useForm } from 'react-hook-form';
 
 import { getPricingModel } from '../../libs/util';
 import PriceForm, { DEFAULT_PRICE, Price } from '../price/form';
+import { ProductsProvider } from '../../contexts/products';
 
-export default function EditPrice({
-  price,
-  loading,
-  onSave,
-  onCancel,
-}: {
+interface EditPriceProps {
   price: Price;
   loading: boolean;
   onSave: EventHandler<any>;
   onCancel: EventHandler<any>;
-}) {
+  productType?: string;
+}
+
+export default function EditPrice({ price, loading, onSave, onCancel, productType = '' }: EditPriceProps) {
   const { t } = useLocaleContext();
+
+  // 处理 metadata 的回填逻辑
+  const processMetadata = (metadata: any) => {
+    if (isEmpty(metadata)) {
+      return {};
+    }
+
+    return metadata;
+  };
+
   const methods = useForm<Price>({
     mode: 'onChange',
     defaultValues: {
@@ -30,10 +39,8 @@ export default function EditPrice({
       unit_amount: fromUnitToToken(price.unit_amount, price.currency?.decimal),
       // @ts-ignore
       model: getPricingModel(price as any),
-      metadata: isEmpty(price.metadata)
-        ? []
-        : // @ts-ignore
-          Object.keys(price.metadata).map((x) => ({ key: x, value: price.metadata[x] })),
+      // @ts-ignore
+      metadata: processMetadata(price.metadata),
       recurring: price.recurring
         ? {
             ...price.recurring,
@@ -90,7 +97,9 @@ export default function EditPrice({
         </Stack>
       }>
       <FormProvider {...methods}>
-        <PriceForm />
+        <ProductsProvider>
+          <PriceForm productType={productType || price.product?.type} />
+        </ProductsProvider>
       </FormProvider>
     </Dialog>
   );

package/src/components/product/features.tsx

@@ -17,15 +17,12 @@ export default function MetadataForm() {
       {features.fields.map((feature, index) => (
         <Box
           key={feature.id}
-          sx={{
-            mt: 2,
-            width: 1,
-          }}>
+          sx={{ width: 1, gap: 1, display: 'flex', alignItems: 'center', justifyContent: 'space-between', mt: 2 }}>
           <Controller
             render={({ field }) => (
               <TextField
                 {...field}
-                sx={{ width: '80%' }}
+                sx={{ flex: 1, width: 'calc(100% - 60px)' }}
                 size="small"
                 error={!!get(errors, field.name)}
                 helperText={get(errors, field.name)?.message as string}
@@ -38,7 +35,15 @@ export default function MetadataForm() {
             name={`features.${index}.name`}
             control={control}
           />
-          <IconButton size="small" sx={{ ml: 1 }} onClick={() => features.remove(index)}>
+          <IconButton
+            size="small"
+            onClick={() => features.remove(index)}
+            sx={{
+              border: '1px solid',
+              borderColor: 'grey.100',
+              borderRadius: 1,
+              padding: '8px',
+            }}>
             <DeleteOutlineOutlined color="error" sx={{ opacity: 0.75 }} />
           </IconButton>
         </Box>
@@ -47,7 +52,12 @@ export default function MetadataForm() {
         sx={{
           mt: features.fields.length ? 2 : 1,
         }}>
-        <Button size="small" variant="outlined" color="inherit" onClick={() => features.append({ name: '' })}>
+        <Button
+          size="small"
+          variant="outlined"
+          color="primary"
+          sx={{ color: 'text.primary' }}
+          onClick={() => features.append({ name: '' })}>
           <AddOutlined fontSize="small" /> {t('admin.product.features.add')}
         </Button>
       </Box>

package/src/components/product/form.tsx

@@ -1,9 +1,9 @@
 /* eslint-disable no-nested-ternary */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { FormInput } from '@blocklet/payment-react';
+import { FormInput, FormLabel } from '@blocklet/payment-react';
 import type { InferFormType, TProduct } from '@blocklet/payment-types';
-import { Box, Stack, Typography } from '@mui/material';
-import { useFormContext, useWatch } from 'react-hook-form';
+import { Box, Stack, Typography, Select, MenuItem } from '@mui/material';
+import { useFormContext, useWatch, Controller } from 'react-hook-form';
 
 import Collapse from '../collapse';
 import MetadataForm from '../metadata/form';
@@ -19,17 +19,11 @@ type Props = {
   simple?: boolean;
 };
 
-export default function ProductForm(rawProps: Props) {
-  const props = Object.assign(
-    {
-      simple: false,
-    },
-    rawProps
-  );
-
+export default function ProductForm({ simple = false }: Props) {
   const { t } = useLocaleContext();
   const { control, setValue, formState } = useFormContext();
   const images = useWatch({ control, name: 'images' });
+  const productType = useWatch({ control, name: 'type' }) ?? '';
 
   const onUploaded = (result: any) => {
     if (result.url) {
@@ -42,97 +36,113 @@ export default function ProductForm(rawProps: Props) {
 
   return (
     <Stack
-      spacing={2}
-      direction="row"
+      spacing={3}
       sx={{
         mb: 3,
-        alignItems: 'flex-start',
       }}>
+      <Controller
+        name="type"
+        control={control}
+        rules={{ required: true }}
+        render={({ field }) => (
+          <Box sx={{ width: '100%' }}>
+            <FormLabel sx={{ color: 'text.primary', fontSize: '0.875rem' }}>{t('admin.product.type.label')}</FormLabel>
+            <Select {...field} fullWidth size="small">
+              <MenuItem value="good">{t('admin.product.type.good')}</MenuItem>
+              <MenuItem value="service">{t('admin.product.type.service')}</MenuItem>
+              <MenuItem value="credit">{t('admin.product.type.credit')}</MenuItem>
+            </Select>
+          </Box>
+        )}
+      />
       <Stack
-        spacing={2}
+        direction="row"
         sx={{
-          flex: 2,
           alignItems: 'flex-start',
-        }}>
-        <FormInput
-          name="name"
-          rules={{
-            required: t('admin.product.name.required'),
-            maxLength: {
-              value: 64,
-              message: t('common.maxLength', { len: 64 }),
-            },
-          }}
-          label={t('admin.product.name.label')}
-          placeholder={t('admin.product.name.placeholder')}
-          error={!!formState.errors.name}
-          helperText={formState.errors.name?.message as string}
-          autoFocus
-          inputProps={{ maxLength: 64 }}
-        />
-        <FormInput
-          name="description"
-          rules={{
-            required: t('admin.product.description.required'),
-            maxLength: {
-              value: 250,
-              message: t('common.maxLength', { len: 250 }),
-            },
-          }}
-          label={t('admin.product.description.label')}
-          placeholder={t('admin.product.description.placeholder')}
-          error={!!formState.errors.description}
-          helperText={formState.errors.description?.message as string}
-          multiline
-          minRows={2}
-          maxRows={4}
-          inputProps={{ maxLength: 250 }}
-        />
-        <Collapse trigger={t('admin.product.additional')}>
-          <Stack
-            spacing={2}
-            sx={{
-              alignItems: 'flex-start',
-            }}>
-            <FormInput
-              name="statement_descriptor"
-              label={t('admin.product.statement_descriptor.label')}
-              rules={{
-                maxLength: { value: 22, message: t('common.maxLength', { len: 22 }) },
-                pattern: {
-                  value: /^(?=.*[A-Za-z])[^\u4e00-\u9fa5<>"’\\]*$/,
-                  message: t('common.latinOnly'),
-                },
-              }}
-            />
-            <FormInput
-              name="unit_label"
-              label={t('admin.product.unit_label.label')}
-              rules={{
-                maxLength: { value: 12, message: t('common.maxLength', { len: 12 }) },
-              }}
-            />
-            {/* eslint-disable-next-line react/prop-types */}
-            {!props.simple && <ProductFeatures />}
-            {/* eslint-disable-next-line react/prop-types */}
-            {!props.simple && <MetadataForm title={t('common.metadata.label')} />}
-          </Stack>
-        </Collapse>
-      </Stack>
-      <Box
-        sx={{
           flex: 1,
+          gap: 2,
         }}>
-        <Stack direction="column">
-          <Typography
-            sx={{
-              mb: 1,
-            }}>
+        <Stack sx={{ flex: 1, gap: 2 }}>
+          <FormInput
+            name="name"
+            rules={{
+              required: t('admin.product.name.required'),
+              maxLength: {
+                value: 64,
+                message: t('common.maxLength', { len: 64 }),
+              },
+            }}
+            label={t('admin.product.name.label')}
+            required
+            placeholder={
+              productType === 'credit' ? t('admin.creditProduct.name.placeholder') : t('admin.product.name.placeholder')
+            }
+            error={!!formState.errors.name}
+            helperText={formState.errors.name?.message as string}
+            autoFocus
+            inputProps={{ maxLength: 64 }}
+          />
+
+          <FormInput
+            name="description"
+            rules={{
+              required: t('admin.product.description.required'),
+              maxLength: {
+                value: 250,
+                message: t('common.maxLength', { len: 250 }),
+              },
+            }}
+            label={t('admin.product.description.label')}
+            placeholder={
+              productType === 'credit'
+                ? t('admin.creditProduct.description.placeholder')
+                : t('admin.product.description.placeholder')
+            }
+            error={!!formState.errors.description}
+            helperText={formState.errors.description?.message as string}
+            multiline
+            required
+            minRows={2}
+            maxRows={4}
+            inputProps={{ maxLength: 250 }}
+          />
+        </Stack>
+
+        <Box sx={{ width: '100%', maxWidth: 160 }}>
+          <Typography variant="body2" sx={{ mb: 1, fontWeight: 500 }}>
             {t('admin.product.image.label')}
           </Typography>
           <Uploader onUploaded={onUploaded} preview={images[0]} />
+        </Box>
+      </Stack>
+      <Collapse trigger={t('admin.product.additional')}>
+        <Stack
+          spacing={2}
+          sx={{
+            alignItems: 'flex-start',
+          }}>
+          <FormInput
+            name="statement_descriptor"
+            label={t('admin.product.statement_descriptor.label')}
+            rules={{
+              maxLength: { value: 22, message: t('common.maxLength', { len: 22 }) },
+              pattern: {
+                value: /^(?=.*[A-Za-z])[^\u4e00-\u9fa5<>"'\\]*$/,
+                message: t('common.latinOnly'),
+              },
+            }}
+          />
+          <FormInput
+            name="unit_label"
+            label={t('admin.product.unit_label.label')}
+            rules={{
+              maxLength: { value: 12, message: t('common.maxLength', { len: 12 }) },
+            }}
+          />
+          {!simple && <ProductFeatures />}
+          {!simple && <MetadataForm title={t('common.metadata.label')} color="inherit" />}
         </Stack>
-      </Box>
+      </Collapse>
     </Stack>
   );
 }

package/src/components/refund/list.tsx

@@ -10,7 +10,7 @@ import {
   useDefaultPageSize,
 } from '@blocklet/payment-react';
 import type { TRefundExpanded } 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';
@@ -143,6 +143,24 @@ export default function RefundList({
         },
       },
     },
+    {
+      label: t('common.paymentMethod'),
+      name: 'paymentMethod',
+      width: 120,
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = data.list[index] as TRefundExpanded;
+          return (
+            <Link to={`/admin/payments/${item.id}`}>
+              <Typography sx={{ display: 'flex', alignItems: 'center', whiteSpace: 'nowrap' }}>
+                <Avatar src={item.paymentMethod.logo} sx={{ width: 18, height: 18, mr: 1 }} />
+                {item.paymentMethod.name}
+              </Typography>
+            </Link>
+          );
+        },
+      },
+    },
     {
       label: t('common.status'),
       name: 'status',

package/src/components/section/header.tsx

@@ -8,16 +8,7 @@ type Props = {
   mt?: number;
 };
 
-export default function SectionHeader(rawProps: Props) {
-  const props = Object.assign(
-    {
-      children: null,
-      mb: 1.5,
-      mt: 1.5,
-    },
-    rawProps
-  );
-
+export default function SectionHeader({ title, children = null, mb = 1.5, mt = 1.5 }: Props) {
   return (
     <Stack
       className="section-header"
@@ -27,10 +18,8 @@ export default function SectionHeader(rawProps: Props) {
         alignItems: 'center',
         flexWrap: 'wrap',
         gap: 1,
-        // eslint-disable-next-line react/prop-types
-        mb: props.mb,
-        // eslint-disable-next-line react/prop-types
-        mt: props.mt,
+        mb,
+        mt,
         pb: 1,
       }}>
       <Typography
@@ -42,11 +31,9 @@ export default function SectionHeader(rawProps: Props) {
           },
         }}
         component="div">
-        {/* eslint-disable-next-line react/prop-types */}
-        {props.title}
+        {title}
       </Typography>
-      {/* eslint-disable-next-line react/prop-types */}
-      {props.children}
+      {children}
     </Stack>
   );
 }

package/src/components/subscription/items/index.tsx

@@ -109,7 +109,7 @@ export default function SubscriptionItemList({ data, currency, mode = 'customer'
         },
       },
     },
-    {
+    currency.type !== 'credit' && {
       label: t('common.quantity'),
       name: 'quantity',
       options: {

package/src/components/subscription/metrics.tsx

@@ -1,6 +1,6 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { api, formatBNStr, formatTime } from '@blocklet/payment-react';
-import type { TSubscriptionExpanded } from '@blocklet/payment-types';
+import type { TSubscriptionExpanded, CreditGrantSummary } from '@blocklet/payment-types';
 import { useRequest } from 'ahooks';
 
 import { Button, Stack, Typography, Tooltip, Avatar, Box, CircularProgress, Skeleton } from '@mui/material';
@@ -23,8 +23,21 @@ const fetchPayer = (id: string): Promise<{ token: string; paymentAddress: string
   return api.get(`/api/subscriptions/${id}/payer-token`).then((res) => res.data);
 };
 
+const fetchCreditBalance = ({
+  customerId,
+  subscriptionId,
+}: {
+  customerId: string;
+  subscriptionId: string;
+}): Promise<{ [key: string]: CreditGrantSummary }> => {
+  return api
+    .get(`/api/credit-grants/summary?customer_id=${customerId}&subscription_id=${subscriptionId}`)
+    .then((res) => res.data);
+};
+
 export default function SubscriptionMetrics({ subscription, showBalance = true }: Props) {
   const { t } = useLocaleContext();
+  const isCredit = subscription.paymentCurrency?.type === 'credit';
   const { data: upcoming, loading: upcomingLoading } = useRequest(() => fetchUpcoming(subscription.id));
   const navigate = useNavigate();
 
@@ -32,6 +45,17 @@ export default function SubscriptionMetrics({ subscription, showBalance = true }
     ready: showBalance,
   });
 
+  const { data: creditBalance } = useRequest(
+    () =>
+      fetchCreditBalance({
+        customerId: subscription.customer_id,
+        subscriptionId: subscription.id,
+      }),
+    {
+      ready: isCredit,
+    }
+  );
+
   const supportShowBalance = showBalance && ['arcblock', 'ethereum', 'base'].includes(subscription.paymentMethod.type);
   // let scheduleToCancelTime = 0;
   // if (['active', 'trialing', 'past_due'].includes(subscription.status) && subscription.cancel_at) {
@@ -41,12 +65,20 @@ export default function SubscriptionMetrics({ subscription, showBalance = true }
   // }
 
   const isInsufficientBalance = new BN(payerValue?.token || '0').lt(new BN(upcoming?.amount || '0'));
+
+  const handleRecharge = () => {
+    if (isCredit) {
+      return;
+    }
+    navigate(`/customer/subscription/${subscription.id}/recharge`);
+  };
   const renderBalanceValue = () => {
+    const balance = isCredit ? creditBalance?.[subscription.paymentCurrency.id]?.remainingAmount : payerValue?.token;
     if (upcomingLoading || payerLoading) {
       return <CircularProgress size={16} />;
     }
 
-    if (isInsufficientBalance) {
+    if (isInsufficientBalance && !isCredit) {
       return (
         <Button
           component="a"
@@ -60,7 +92,6 @@ export default function SubscriptionMetrics({ subscription, showBalance = true }
 
     return (
       <Stack
-        onClick={() => navigate(`/customer/subscription/${subscription.id}/recharge`)}
         sx={{
           flexDirection: 'row',
           alignItems: 'center',
@@ -69,7 +100,8 @@ export default function SubscriptionMetrics({ subscription, showBalance = true }
           fontWeight: 500,
           cursor: 'pointer',
           '&:hover': { color: 'primary.main' },
-        }}>
+        }}
+        onClick={handleRecharge}>
         <Avatar
           src={subscription.paymentCurrency?.logo}
           sx={{ width: 16, height: 16 }}
@@ -80,7 +112,7 @@ export default function SubscriptionMetrics({ subscription, showBalance = true }
             display: 'flex',
             alignItems: 'baseline',
           }}>
-          {formatBNStr(payerValue?.token, subscription.paymentCurrency.decimal)}
+          {formatBNStr(balance, subscription.paymentCurrency.decimal)}
           <Typography sx={{ fontSize: '14px', ml: 0.5 }}>{subscription.paymentCurrency.symbol}</Typography>
         </Box>
       </Stack>

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

@@ -113,7 +113,8 @@ const fetchBatchPay = async (id: string): Promise<string> => {
 const supportRecharge = (subscription: TSubscriptionExpanded) => {
   return (
     ['active', 'trialing', 'past_due'].includes(subscription?.status) &&
-    ['arcblock', 'ethereum', 'base'].includes(subscription?.paymentMethod?.type)
+    ['arcblock', 'ethereum', 'base'].includes(subscription?.paymentMethod?.type) &&
+    subscription.paymentCurrency?.type !== 'credit'
   );
 };
 

package/src/contexts/products.tsx

@@ -1,28 +1,39 @@
-import { api } from '@blocklet/payment-react';
+import { api, CachedRequest } from '@blocklet/payment-react';
 import type { TProductExpanded } from '@blocklet/payment-types';
 import { Alert, CircularProgress } from '@mui/material';
 import { useRequest } from 'ahooks';
 import { createContext, useContext, type JSX } from 'react';
+import useBus from 'use-bus';
 
 type ProductsContextType = {
   products: TProductExpanded[];
-  refresh: () => void;
+  refresh: (forceRefresh?: boolean) => void;
 };
 
 // @ts-ignore
 const ProductsContext = createContext<ProductsContextType>({ api });
 const { Provider, Consumer } = ProductsContext;
 
-const getProducts = async (): Promise<TProductExpanded[]> => {
-  // FIXME: pagination here
-  const { data } = await api.get('/api/products?active=true&page=1&pageSize=100&donation=hide');
-  return data.list || [];
+const fetchProducts = (forceRefresh = false): Promise<{ list: TProductExpanded[] }> => {
+  const livemode = localStorage.getItem('livemode') !== 'false';
+  const cacheKey = `products-${livemode}`;
+
+  const cachedRequest = new CachedRequest(
+    cacheKey,
+    () => api.get('/api/products?active=true&page=1&pageSize=100&donation=hide'),
+    {
+      ttl: 1000 * 60 * 10, // 10分钟缓存
+      strategy: 'session',
+    }
+  );
+
+  return cachedRequest.fetch(forceRefresh);
 };
 
 // eslint-disable-next-line react/prop-types
 function ProductsProvider({ children }: { children: any }): JSX.Element {
-  const { data, error, run, loading } = useRequest(getProducts);
-
+  const { data, error, run, loading } = useRequest((forceRefresh = false) => fetchProducts(forceRefresh));
+  useBus('project.created', () => run(true), []);
   if (error) {
     return <Alert severity="error">{error.message}</Alert>;
   }
@@ -31,7 +42,7 @@ function ProductsProvider({ children }: { children: any }): JSX.Element {
     return <CircularProgress />;
   }
 
-  return <Provider value={{ products: data, refresh: run }}>{children}</Provider>;
+  return <Provider value={{ products: data?.list ?? [], refresh: () => run(true) }}>{children}</Provider>;
 }
 
 function useProductsContext() {
@@ -39,4 +50,10 @@ function useProductsContext() {
   return context;
 }
 
+export const clearProductsCache = () => {
+  const livemode = localStorage.getItem('livemode') !== 'false';
+  const cacheKey = `products-${livemode}`;
+  sessionStorage.removeItem(cacheKey);
+};
+
 export { ProductsContext, ProductsProvider, Consumer as ProductsConsumer, useProductsContext };