payment-kit 1.18.56 → 1.19.1

package/src/pages/admin/products/products/create.tsx

@@ -3,9 +3,9 @@ import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
 import { api, findCurrency, formatError, formatPrice, usePaymentContext } from '@blocklet/payment-react';
 import { AddOutlined } from '@mui/icons-material';
-import { Box, Button, Divider, Typography } from '@mui/material';
+import { Box, Button, Divider } from '@mui/material';
 import { cloneDeep } from 'lodash';
-import { Fragment } from 'react';
+import { Fragment, useState, useEffect } from 'react';
 import { FormProvider, useFieldArray, useForm } from 'react-hook-form';
 import { dispatch } from 'use-bus';
 
@@ -14,31 +14,145 @@ import DrawerForm from '../../../../components/drawer-form';
 import PriceActions from '../../../../components/price/actions';
 import PriceForm, { DEFAULT_PRICE } from '../../../../components/price/form';
 import ProductForm, { Product } from '../../../../components/product/form';
+import { ProductsProvider } from '../../../../contexts/products';
 
-export default function ProductsCreate() {
+type InitialPrice = {
+  currency_id?: string;
+  priceModel?: string;
+  name?: string;
+  metadata?: Record<string, any>;
+};
+type Props = {
+  open?: boolean;
+  onClose?: () => void;
+  onSubmit?: () => void;
+  mode?: 'standard' | 'credit';
+  meterId?: string;
+  initialPrice?: InitialPrice;
+};
+
+export default function ProductsCreate({
+  open = true,
+  onClose = () => {},
+  mode = 'standard',
+  meterId = '',
+  onSubmit: onSubmitCallback = () => {},
+  initialPrice = {} as InitialPrice,
+}: Props) {
   const { t, locale } = useLocaleContext();
   const { settings } = usePaymentContext();
 
+  // 管理收折状态，Credit 模式下默认展开定价部分
+  const [expandedSection, setExpandedSection] = useState<'product' | 'pricing'>(
+    mode === 'credit' ? 'pricing' : 'product'
+  );
+
+  // Credit 模式下的默认价格配置
+  const getCreditDefaultPrice = () => ({
+    ...DEFAULT_PRICE,
+    currency_id: settings.baseCurrency.id,
+    type: 'one_time' as const,
+    nickname: t('admin.creditProduct.defaultNickname'),
+    metadata: {
+      ...(initialPrice?.metadata || {}),
+      ...(meterId ? { meter_id: meterId } : ({} as any)),
+      credit_config: {
+        priority: 50,
+        valid_duration_value: 0,
+        valid_duration_unit: 'days',
+        ...(initialPrice?.metadata?.credit_config || {}),
+      },
+    },
+  });
+
   const methods = useForm<Product>({
     mode: 'onChange',
     defaultValues: {
-      type: 'service',
-      name: '',
-      description: '',
+      type: mode === 'credit' ? 'credit' : 'service',
+      name:
+        mode === 'credit'
+          ? t('admin.creditProduct.defaultName', {
+              name: initialPrice?.name || 'Credit',
+            })
+          : '',
+      description: mode === 'credit' ? t('admin.creditProduct.defaultDescription') : '',
       images: [],
       statement_descriptor: '',
-      unit_label: '',
+      unit_label: mode === 'credit' ? t('admin.creditProduct.unitLabel') : '',
       features: [],
-      prices: [{ ...DEFAULT_PRICE, currency_id: settings.baseCurrency.id }],
-      metadata: [],
+      prices: [
+        mode === 'credit'
+          ? getCreditDefaultPrice()
+          : {
+              ...DEFAULT_PRICE,
+              recurring: {
+                ...DEFAULT_PRICE.recurring,
+                meter_id: meterId,
+                usage_type:
+                  initialPrice?.priceModel === 'credit_metered' ? 'metered' : DEFAULT_PRICE.recurring?.usage_type,
+              },
+              unit_amount: '1',
+              model: initialPrice?.priceModel || 'standard',
+              currency_id: initialPrice?.currency_id || settings.baseCurrency.id,
+            },
+      ],
     },
   });
-  const { control, handleSubmit, getValues, clearErrors } = methods;
+  const {
+    control,
+    handleSubmit,
+    getValues,
+    clearErrors,
+    formState: { errors },
+  } = methods;
 
   const prices = useFieldArray({ control, name: 'prices' });
   const getPrice = (index: number) => methods.getValues().prices[index];
 
+  useEffect(() => {
+    if (Object.keys(errors).length > 0) {
+      const hasProductErrors =
+        errors.name ||
+        errors.description ||
+        errors.images ||
+        errors.statement_descriptor ||
+        errors.unit_label ||
+        errors.features ||
+        errors.metadata;
+
+      const hasPriceErrors = errors.prices;
+
+      if (hasProductErrors) {
+        setExpandedSection('product');
+      } else if (hasPriceErrors) {
+        setExpandedSection('pricing');
+      }
+    }
+  }, [errors]);
+
   const onSubmit = (data: Product) => {
+    if (mode === 'credit') {
+      data.type = 'credit';
+      data.prices.forEach((price: any) => {
+        if (meterId) {
+          price.metadata = price.metadata || {};
+          const meterIdExists = price.metadata.meter_id;
+          if (!meterIdExists) {
+            price.metadata.meter_id = meterId;
+          }
+        }
+      });
+    } else {
+      data.prices.forEach((price: any) => {
+        if (price.billing_type === 'metered') {
+          price.type = 'recurring';
+          if (price.recurring) {
+            price.recurring.usage_type = 'metered';
+          }
+        }
+      });
+    }
+
     api
       .post('/api/products', data)
       .then(() => {
@@ -46,66 +160,131 @@ export default function ProductsCreate() {
         methods.reset();
         dispatch('drawer.submitted');
         dispatch('project.created');
+        if (onSubmitCallback) {
+          onSubmitCallback();
+        }
+        if (onClose) {
+          onClose();
+        }
       })
-      .catch((err) => {
+      .catch((err: any) => {
         console.error(err);
         Toast.error(formatError(err));
       });
   };
 
+  const onSubmitError = (formErrors: any) => {
+    // 表单验证失败时，错误会通过 useEffect 自动处理展开逻辑
+    // eslint-disable-next-line no-console
+    console.log('Form validation errors:', formErrors);
+  };
+
+  const handleClose = () => {
+    clearErrors();
+    if (onClose) {
+      onClose();
+    }
+  };
+
+  const getDrawerTitle = () => {
+    if (mode === 'credit') {
+      return t('admin.creditProduct.create');
+    }
+    return t('admin.product.add');
+  };
+
   return (
     <DrawerForm
       icon={<AddOutlined />}
-      text={t('admin.product.add')}
-      onClose={() => clearErrors()}
+      text={getDrawerTitle()}
+      open={open}
+      onClose={handleClose}
       width={640}
       addons={
-        <Button variant="contained" size="small" onClick={handleSubmit(onSubmit)}>
+        <Button variant="contained" size="small" onClick={handleSubmit(onSubmit, onSubmitError)}>
           {t('admin.product.save')}
         </Button>
       }>
       <FormProvider {...methods}>
-        <Typography variant="h6" sx={{ mb: 3, fontWeight: 600 }}>
-          {t('admin.product.info')}
-        </Typography>
-        <ProductForm />
-        <Typography variant="h6" sx={{ mt: 5, mb: 3, fontWeight: 600 }}>
-          {t('admin.price.info')}
-        </Typography>
-        <Box>
-          {prices.fields.map((price, index) => (
-            <Fragment key={price.id}>
-              <Collapse
-                expanded
-                style={{ fontWeight: 'bold', width: '50%' }}
-                addons={<PriceActions onDuplicate={() => prices.append(price)} onRemove={() => prices.remove(index)} />}
-                trigger={(expanded: boolean) => {
-                  if (expanded) {
-                    return t('admin.price.detail');
-                  }
-                  const priceItem = getPrice(index);
-                  const currency =
-                    findCurrency(settings.paymentMethods, priceItem?.currency_id || '') || settings.baseCurrency;
-
-                  // @ts-ignore
-                  return formatPrice(priceItem as any, currency, getValues().unit_label, 1, false, locale);
+        <ProductsProvider>
+          <Collapse
+            expanded={expandedSection === 'product'}
+            value="product"
+            card
+            onChange={(_, expanded) => {
+              if (expanded) {
+                setExpandedSection('product');
+              }
+            }}
+            style={{ mb: 2 }}
+            trigger={t('admin.product.info')}>
+            <Box sx={{ p: 1, pl: 2 }}>
+              <ProductForm />
+            </Box>
+          </Collapse>
+
+          <Collapse
+            expanded={expandedSection === 'pricing'}
+            value="pricing"
+            onChange={(_, expanded) => {
+              if (expanded) {
+                setExpandedSection('pricing');
+              }
+            }}
+            card
+            trigger={
+              expandedSection === 'pricing'
+                ? t('admin.price.plan')
+                : `${t('admin.price.plan')} (${prices.fields.length} 个价格)`
+            }>
+            <Box sx={{ p: 1, pl: 2 }}>
+              {prices.fields.map((price, index) => (
+                <Fragment key={price.id}>
+                  <Collapse
+                    expanded
+                    style={{ fontWeight: 'bold', width: '100%' }}
+                    addons={
+                      <PriceActions onDuplicate={() => prices.append(price)} onRemove={() => prices.remove(index)} />
+                    }
+                    trigger={(expanded: boolean) => {
+                      if (expanded) {
+                        return t('admin.price.order', {
+                          order: index + 1,
+                        });
+                      }
+                      const priceItem = getPrice(index);
+                      const currency =
+                        findCurrency(settings.paymentMethods, priceItem?.currency_id || '') || settings.baseCurrency;
+
+                      // @ts-ignore
+                      return formatPrice(priceItem as any, currency, getValues().unit_label, 1, false, locale);
+                    }}>
+                    <Box sx={{ width: '100%', p: 1 }}>
+                      <PriceForm prefix={`prices.${index}`} meterId={meterId} />
+                    </Box>
+                  </Collapse>
+                  <Divider sx={{ mt: 2, mb: 2 }} />
+                </Fragment>
+              ))}
+              <Button
+                variant="outlined"
+                color="primary"
+                sx={{
+                  color: 'text.primary',
+                  width: '100%',
+                }}
+                onClick={() => {
+                  const newPrice =
+                    mode === 'credit'
+                      ? getCreditDefaultPrice()
+                      : ({ ...cloneDeep(DEFAULT_PRICE), currency_id: settings.baseCurrency.id } as any);
+                  prices.append(newPrice);
                 }}>
-                <PriceForm prefix={`prices.${index}`} />
-              </Collapse>
-              <Divider sx={{ mt: 2, mb: 4 }} />
-            </Fragment>
-          ))}
-          <Box mt={1}>
-            <Button
-              size="small"
-              variant="outlined"
-              color="inherit"
-              // @ts-ignore
-              onClick={() => prices.append({ ...cloneDeep(DEFAULT_PRICE), currency_id: settings.baseCurrency.id })}>
-              <AddOutlined fontSize="small" /> Add another price
-            </Button>
-          </Box>
-        </Box>
+                <AddOutlined fontSize="small" /> {t('admin.price.addAnother')}
+              </Button>
+            </Box>
+          </Collapse>
+        </ProductsProvider>
       </FormProvider>
     </DrawerForm>
   );

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

@@ -134,12 +134,21 @@ export default function ProductDetail(props: { id: string }) {
             {t('admin.product.locked')}
           </Alert>
         )}
-        <Stack className="page-header" direction="row" justifyContent="space-between" alignItems="center">
+        <Stack
+          className="page-header"
+          direction="row"
+          sx={{
+            justifyContent: 'space-between',
+            alignItems: 'center',
+          }}>
           <Stack
             direction="row"
-            alignItems="center"
-            sx={{ fontWeight: 'normal', cursor: 'pointer' }}
-            onClick={() => goBackOrFallback('/admin/products')}>
+            onClick={() => goBackOrFallback('/admin/products')}
+            sx={{
+              alignItems: 'center',
+              fontWeight: 'normal',
+              cursor: 'pointer',
+            }}>
             <ArrowBackOutlined fontSize="small" sx={{ mr: 0.5, color: 'text.secondary' }} />
             <Typography variant="h6" sx={{ color: 'text.secondary', fontWeight: 'normal' }}>
               {t('admin.products')}
@@ -148,37 +157,64 @@ export default function ProductDetail(props: { id: string }) {
           <ProductActions data={data} onChange={onChange} variant="normal" />
         </Stack>
         <Box
-          mt={4}
-          mb={3}
           sx={{
+            mt: 4,
+            mb: 3,
             display: 'flex',
+
             gap: {
               xs: 2,
               sm: 2,
               md: 5,
             },
+
             flexWrap: 'wrap',
+
             flexDirection: {
               xs: 'column',
               sm: 'column',
               md: 'row',
             },
+
             alignItems: {
               xs: 'flex-start',
               sm: 'flex-start',
               md: 'center',
             },
           }}>
-          <Stack direction="row" justifyContent="space-between" alignItems="center">
-            <Stack direction="row" alignItems="center" spacing={1}>
+          <Stack
+            direction="row"
+            sx={{
+              justifyContent: 'space-between',
+              alignItems: 'center',
+            }}>
+            <Stack
+              direction="row"
+              spacing={1}
+              sx={{
+                alignItems: 'center',
+              }}>
               {data.images.length > 0 && (
                 <Avatar src={data.images[0]} alt={data.name} variant="square" sx={{ width: '52px', height: '52px' }} />
               )}
-              <Stack direction="column" alignItems="flex-start" justifyContent="space-around">
-                <Typography variant="h2" color="text.primary">
+              <Stack
+                direction="column"
+                sx={{
+                  alignItems: 'flex-start',
+                  justifyContent: 'space-around',
+                }}>
+                <Typography
+                  variant="h2"
+                  sx={{
+                    color: 'text.primary',
+                  }}>
                   {data.name}
                 </Typography>
-                <Typography variant="subtitle1" color="text.lighter">
+                <Typography
+                  variant="subtitle1"
+                  sx={{
+                    color: 'text.lighter',
+                  }}>
                   {formatProductPrice(data as any, defaultCurrency, locale)}
                 </Typography>
               </Stack>
@@ -186,18 +222,22 @@ export default function ProductDetail(props: { id: string }) {
           </Stack>
           <Stack
             className="section-body"
-            justifyContent="flex-start"
-            flexWrap="wrap"
             sx={{
+              justifyContent: 'flex-start',
+              flexWrap: 'wrap',
+
               'hr.MuiDivider-root:last-child': {
                 display: 'none',
               },
+
               flexDirection: {
                 xs: 'column',
                 sm: 'column',
                 md: 'row',
               },
+
               alignItems: 'flex-start',
+
               gap: {
                 xs: 1,
                 sm: 1,
@@ -210,7 +250,6 @@ export default function ProductDetail(props: { id: string }) {
         </Box>
         <Divider />
       </Box>
-
       <Stack
         sx={{
           flexDirection: {
@@ -239,7 +278,14 @@ export default function ProductDetail(props: { id: string }) {
             },
           },
         }}>
-        <Box flex={1} className="payment-link-column-1" sx={{ gap: 2.5, display: 'flex', flexDirection: 'column' }}>
+        <Box
+          className="payment-link-column-1"
+          sx={{
+            flex: 1,
+            gap: 2.5,
+            display: 'flex',
+            flexDirection: 'column',
+          }}>
           <Box className="section" sx={{ containerType: 'inline-size' }}>
             <SectionHeader title={t('admin.details')}>
               <Button
@@ -295,7 +341,11 @@ export default function ProductDetail(props: { id: string }) {
                       sx={{ width: '160px', height: '160px' }}
                     />
                   ) : (
-                    <Typography variant="body2" color="text.lighter">
+                    <Typography
+                      variant="body2"
+                      sx={{
+                        color: 'text.lighter',
+                      }}>
                       {t('empty.image')}
                     </Typography>
                   )
@@ -329,6 +379,7 @@ export default function ProductDetail(props: { id: string }) {
                 <AddPrice
                   loading={state.loading.price}
                   onSave={onAddPrice}
+                  productType={data.type}
                   onCancel={() => setState((prev) => ({ adding: { ...prev.adding, price: false } }))}
                 />
               )}
@@ -336,7 +387,7 @@ export default function ProductDetail(props: { id: string }) {
           </Box>
           <Divider />
           <Box className="section">
-            <SectionHeader title={t('admin.events')} />
+            <SectionHeader title={t('admin.events.title')} />
             <Box className="section-body">
               <EventList
                 features={{ toolbar: false }}
@@ -350,7 +401,12 @@ export default function ProductDetail(props: { id: string }) {
           <Box className="section">
             <SectionHeader
               title={
-                <Stack direction="row" alignItems="center" spacing={1}>
+                <Stack
+                  direction="row"
+                  spacing={1}
+                  sx={{
+                    alignItems: 'center',
+                  }}>
                   <Typography
                     variant="h3"
                     sx={{

package/src/pages/admin/settings/index.tsx

@@ -41,7 +41,14 @@ export default function SettingsIndex() {
 
   return (
     <>
-      <Stack direction="row" alignItems="flex-start" justifyContent="end" flexWrap="wrap" spacing={1}>
+      <Stack
+        direction="row"
+        spacing={1}
+        sx={{
+          alignItems: 'flex-start',
+          justifyContent: 'end',
+          flexWrap: 'wrap',
+        }}>
         {/* @ts-ignore */}
         <Tabs
           // @ts-ignore