payment-kit 1.19.0 → 1.19.2

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,69 +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
-            sx={{
-              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

@@ -379,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 } }))}
                 />
               )}
@@ -386,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 }}

package/src/pages/admin/settings/payment-methods/index.tsx

@@ -549,6 +549,9 @@ export default function PaymentMethods() {
                           if (!currency) {
                             return null;
                           }
+                          if (currency.type === 'credit') {
+                            return null;
+                          }
                           return (
                             <ListItem
                               key={currency.id}

package/src/pages/customer/credit-grant/detail.tsx

@@ -0,0 +1,308 @@
+/* eslint-disable react/no-unstable-nested-components */
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import {
+  api,
+  formatBNStr,
+  formatTime,
+  CreditTransactionsList,
+  CreditStatusChip,
+  getCustomerAvatar,
+} from '@blocklet/payment-react';
+import type { TCreditGrantExpanded } from '@blocklet/payment-types';
+import { ArrowBackOutlined } from '@mui/icons-material';
+import { Alert, Avatar, Box, CircularProgress, Divider, Stack, Typography } from '@mui/material';
+import { useRequest } from 'ahooks';
+import { useNavigate, useParams } from 'react-router-dom';
+import { styled } from '@mui/system';
+import { useCallback } from 'react';
+import InfoMetric from '../../../components/info-metric';
+import { useSessionContext } from '../../../contexts/session';
+import SectionHeader from '../../../components/section/header';
+import CreditGrantItemList from '../../../components/customer/credit-grant-item-list';
+import InfoRow from '../../../components/info-row';
+import InfoRowGroup from '../../../components/info-row-group';
+
+const fetchData = (id: string | undefined): Promise<TCreditGrantExpanded> => {
+  return api.get(`/api/credit-grants/${id}`).then((res: any) => res.data);
+};
+
+export default function CustomerCreditGrantDetail() {
+  const { id } = useParams() as { id: string };
+  const navigate = useNavigate();
+  const { t } = useLocaleContext();
+  const { session } = useSessionContext();
+  const { loading, error, data } = useRequest(() => fetchData(id));
+
+  const handleBack = useCallback(() => {
+    navigate('/customer', { replace: true });
+  }, [navigate]);
+
+  if (data?.customer?.did && session?.user?.did && data.customer.did !== session.user.did) {
+    return <Alert severity="error">You do not have permission to access other customer data</Alert>;
+  }
+  if (error) {
+    return <Alert severity="error">{error.message}</Alert>;
+  }
+
+  if (loading || !data) {
+    return <CircularProgress />;
+  }
+
+  const isDepleted = data?.status === 'depleted';
+
+  const getStatusText = (status: string) => {
+    switch (status) {
+      case 'granted':
+        return t('admin.customer.creditGrants.status.granted');
+      case 'pending':
+        return t('admin.customer.creditGrants.status.pending');
+      case 'depleted':
+        return t('admin.customer.creditGrants.status.depleted');
+      case 'expired':
+        return t('admin.customer.creditGrants.status.expired');
+      case 'voided':
+        return t('admin.customer.creditGrants.status.voided');
+      default:
+        return status;
+    }
+  };
+
+  const getUsagePercentage = () => {
+    if (!data.amount || !data.remaining_amount) return 0;
+    const total = parseFloat(data.amount);
+    const remaining = parseFloat(data.remaining_amount);
+    return ((total - remaining) / total) * 100;
+  };
+
+  return (
+    <Root>
+      <Box>
+        <Stack
+          className="page-header"
+          direction="row"
+          justifyContent="space-between"
+          alignItems="center"
+          sx={{ position: 'relative' }}>
+          <Stack
+            direction="row"
+            onClick={handleBack}
+            alignItems="center"
+            sx={{ 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.customer.creditGrants.title')}
+            </Typography>
+          </Stack>
+        </Stack>
+        <Box
+          mt={4}
+          sx={{
+            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" flexWrap="wrap" gap={1}>
+              <Stack direction="column" alignItems="flex-start" justifyContent="space-around">
+                <Typography variant="h2" color="text.primary">
+                  {data.name || data.id}
+                </Typography>
+              </Stack>
+            </Stack>
+          </Stack>
+          <Stack
+            className="section-body"
+            justifyContent="flex-start"
+            flexWrap="wrap"
+            sx={{
+              'hr.MuiDivider-root:last-child': {
+                display: 'none',
+              },
+              flexDirection: {
+                xs: 'column',
+                sm: 'column',
+                md: 'row',
+              },
+              alignItems: 'flex-start',
+              gap: {
+                xs: 1,
+                sm: 1,
+                md: 3,
+              },
+            }}>
+            <InfoMetric
+              label={t('common.status')}
+              value={<CreditStatusChip status={data.status} label={getStatusText(data.status)} />}
+            />
+            <InfoMetric
+              label={t('admin.customer.creditGrants.originalAmount')}
+              value={
+                <Stack direction="row" alignItems="center" spacing={0.5}>
+                  <Avatar
+                    src={data.paymentCurrency?.logo}
+                    sx={{ width: 16, height: 16 }}
+                    alt={data.paymentCurrency?.symbol}
+                  />
+                  <Typography variant="body2">
+                    {formatBNStr(data.amount, data.paymentCurrency.decimal)} {data.paymentCurrency.symbol}
+                  </Typography>
+                </Stack>
+              }
+              divider
+            />
+            <InfoMetric
+              label={t('common.remainingCredit')}
+              value={
+                <Stack direction="row" alignItems="center" spacing={0.5}>
+                  <Avatar
+                    src={data.paymentCurrency?.logo}
+                    sx={{ width: 16, height: 16 }}
+                    alt={data.paymentCurrency?.symbol}
+                  />
+                  <Typography variant="body2">
+                    {formatBNStr(data.remaining_amount, data.paymentCurrency.decimal)} {data.paymentCurrency.symbol}
+                  </Typography>
+                </Stack>
+              }
+              divider
+            />
+            <InfoMetric
+              label={t('admin.customer.creditGrants.usage')}
+              value={
+                <Typography variant="body2" color={isDepleted ? 'error.main' : 'text.primary'}>
+                  {getUsagePercentage().toFixed(1)}%
+                </Typography>
+              }
+              divider
+            />
+            <InfoMetric
+              label={t('common.effectiveDate')}
+              value={formatTime(data.effective_at ? data.effective_at * 1000 : data.created_at, 'YYYY-MM-DD HH:mm:ss')}
+            />
+            {data.expires_at && (
+              <InfoMetric
+                label={t('common.expirationDate')}
+                value={formatTime(data.expires_at * 1000, 'YYYY-MM-DD HH:mm:ss')}
+              />
+            )}
+          </Stack>
+        </Box>
+      </Box>
+      <Box className="section" sx={{ containerType: 'inline-size' }}>
+        <SectionHeader title={t('admin.details')} />
+        <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',
+              },
+            },
+          }}>
+          <InfoRow
+            label={t('common.customer')}
+            value={
+              <Stack direction="row" alignItems="center" spacing={1}>
+                <Avatar
+                  src={getCustomerAvatar(
+                    data.customer?.did,
+                    data.customer?.updated_at ? new Date(data.customer.updated_at).toISOString() : '',
+                    24
+                  )}
+                  alt={data.customer?.name}
+                  sx={{ width: 24, height: 24 }}
+                />
+                <Typography>{data.customer?.name}</Typography>
+              </Stack>
+            }
+          />
+          <InfoRow
+            label={t('common.scope')}
+            value={
+              <Typography>
+                {data.applicability_config?.scope?.prices ? t('common.specific') : t('common.general')}
+              </Typography>
+            }
+          />
+          <InfoRow label={t('admin.creditProduct.priority.label')} value={<Typography>{data.priority}</Typography>} />
+          <InfoRow label={t('common.createdAt')} value={formatTime(data.created_at)} />
+        </InfoRowGroup>
+      </Box>
+
+      <Divider />
+      {data.items && data.items.length > 0 && (
+        <>
+          <Box className="section">
+            <SectionHeader title={t('admin.creditProduct.associatedPrices.label')} />
+            <Box className="section-body">
+              <CreditGrantItemList data={data.items} currency={data.paymentCurrency} />
+            </Box>
+          </Box>
+          <Divider />
+        </>
+      )}
+
+      <Divider />
+      <Box className="section">
+        <Typography variant="h3" className="section-header">
+          {t('admin.creditTransactions.title')}
+        </Typography>
+        <Box className="section-body">
+          <CreditTransactionsList
+            customer_id={data.customer_id}
+            credit_grant_id={data.id}
+            showAdminColumns={false}
+            showTimeFilter
+          />
+        </Box>
+      </Box>
+    </Root>
+  );
+}
+
+const Root = styled(Stack)`
+  margin-bottom: 24px;
+  gap: 24px;
+  flex-direction: column;
+  @media (max-width: ${({ theme }) => theme.breakpoints.values.md}px) {
+    . {
+      border: none;
+      box-shadow: none;
+      padding: 0;
+    }
+    .section-header {
+      font-size: 18px;
+    }
+  }
+`;