payment-kit 1.18.56 → 1.19.1

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

@@ -107,12 +107,21 @@ export default function InvoiceDetail(props: { id: string }) {
   return (
     <Root direction="column" spacing={2.5} sx={{ mb: 4 }}>
       <Box>
-        <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/billing/invoices')}>
+            onClick={() => goBackOrFallback('/admin/billing/invoices')}
+            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.invoices')}
@@ -124,29 +133,41 @@ export default function InvoiceDetail(props: { id: string }) {
           </Box>
         </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="column" gap={1}>
-            <Stack direction="row" alignItems="center">
+          <Stack
+            direction="column"
+            sx={{
+              gap: 1,
+            }}>
+            <Stack
+              direction="row"
+              sx={{
+                alignItems: 'center',
+              }}>
               <Typography variant="h2" sx={{ fontWeight: 600 }}>
                 {data.number}
               </Typography>
@@ -161,18 +182,22 @@ export default function InvoiceDetail(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,
@@ -189,7 +214,11 @@ export default function InvoiceDetail(props: { id: string }) {
                 label={t('admin.subscription.name')}
                 value={
                   <Link to={`/admin/billing/${data.subscription.id}`}>
-                    <Typography variant="body1" color="text.link">
+                    <Typography
+                      variant="body1"
+                      sx={{
+                        color: 'text.link',
+                      }}>
                       {data.subscription.description || data.subscription.id}
                     </Typography>
                   </Link>
@@ -238,7 +267,14 @@ export default function InvoiceDetail(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')} />
             <InfoRowGroup
@@ -370,7 +406,7 @@ export default function InvoiceDetail(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/billing/meters/create.tsx

@@ -0,0 +1,60 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { AddOutlined } from '@mui/icons-material';
+import { Button } from '@mui/material';
+import { api, formatError, usePaymentContext } from '@blocklet/payment-react';
+import { useForm, FormProvider } from 'react-hook-form';
+import Toast from '@arcblock/ux/lib/Toast';
+import { dispatch } from 'use-bus';
+
+import type { TMeter } from '@blocklet/payment-types';
+import MeterForm from '../../../../components/meter/form';
+import DrawerForm from '../../../../components/drawer-form';
+
+export default function MeterCreate() {
+  const { t } = useLocaleContext();
+  const { refresh } = usePaymentContext();
+  const methods = useForm<TMeter>({
+    defaultValues: {
+      name: '',
+      event_name: '',
+      aggregation_method: 'sum',
+      unit: '',
+      description: '',
+      metadata: {},
+    },
+  });
+
+  const { handleSubmit, reset, clearErrors } = methods;
+
+  const onSubmit = async (data: TMeter) => {
+    try {
+      await api.post('/api/meters', data);
+      Toast.success(t('admin.meter.saved'));
+      reset();
+      clearErrors();
+      dispatch('meter.created');
+      dispatch('drawer.submitted');
+      refresh(true);
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatError(err));
+    }
+  };
+
+  return (
+    <DrawerForm
+      icon={<AddOutlined />}
+      text={t('admin.meter.add')}
+      onClose={() => clearErrors()}
+      width={640}
+      addons={
+        <Button variant="contained" size="small" onClick={handleSubmit(onSubmit)}>
+          {t('admin.meter.save')}
+        </Button>
+      }>
+      <FormProvider {...methods}>
+        <MeterForm />
+      </FormProvider>
+    </DrawerForm>
+  );
+}

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

@@ -0,0 +1,435 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Toast from '@arcblock/ux/lib/Toast';
+import { api, formatError, formatTime, useMobile } from '@blocklet/payment-react';
+import { ArrowBackOutlined, EditOutlined } from '@mui/icons-material';
+import { Alert, AlertTitle, Box, Button, CircularProgress, Divider, Stack, Typography } from '@mui/material';
+import { styled } from '@mui/system';
+import { useRequest, useSetState } from 'ahooks';
+import { useNavigate } from 'react-router-dom';
+import { useForm, FormProvider } from 'react-hook-form';
+
+import type { TPaymentCurrency, TMeter } from '@blocklet/payment-types';
+import Copyable from '../../../../components/copyable';
+import InfoMetric from '../../../../components/info-metric';
+import InfoRow from '../../../../components/info-row';
+import InfoRowGroup from '../../../../components/info-row-group';
+import MetadataEditor from '../../../../components/metadata/editor';
+import MetadataList from '../../../../components/metadata/list';
+import MeterActions from '../../../../components/meter/actions';
+import SectionHeader from '../../../../components/section/header';
+import { goBackOrFallback } from '../../../../libs/util';
+import MeterEventsList from '../../../../components/meter/events-list';
+import MeterProducts from '../../../../components/meter/products';
+import MeterForm from '../../../../components/meter/form';
+import DrawerForm from '../../../../components/drawer-form';
+
+const getMeter = (id: string): Promise<TMeter & { paymentCurrency: TPaymentCurrency }> => {
+  return api.get(`/api/meters/${id}`).then((res: any) => res.data);
+};
+
+export default function MeterDetail(props: { id: string }) {
+  const { t } = useLocaleContext();
+  const { isMobile } = useMobile();
+  const navigate = useNavigate();
+
+  // 获取聚合方法的简洁描述
+  const getAggregationMethodHint = (method: string) => {
+    switch (method) {
+      case 'sum':
+        return t('admin.meter.aggregationMethod.sumHint');
+      case 'count':
+        return t('admin.meter.aggregationMethod.countHint');
+      case 'last':
+        return t('admin.meter.aggregationMethod.lastHint');
+      default:
+        return '';
+    }
+  };
+  const [state, setState] = useSetState({
+    editing: {
+      metadata: false,
+      meter: false,
+    },
+    loading: {
+      metadata: false,
+      meter: false,
+    },
+    creating: {
+      product: false,
+      creditProduct: false,
+    },
+  });
+
+  const methods = useForm<TMeter>({
+    defaultValues: {
+      name: '',
+      event_name: '',
+      aggregation_method: 'sum',
+      unit: '',
+      description: '',
+      metadata: {},
+    },
+  });
+
+  const { loading, error, data, runAsync } = useRequest(() => getMeter(props.id));
+
+  if (error) {
+    return <Alert severity="error">{error.message}</Alert>;
+  }
+
+  if (loading || !data) {
+    return <CircularProgress />;
+  }
+
+  const onUpdateMetadata = async (updates: any) => {
+    try {
+      setState((prev) => ({ loading: { ...prev.loading, metadata: true } }));
+      await api.put(`/api/meters/${props.id}`, updates);
+      Toast.success(t('common.saved'));
+      runAsync();
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatError(err));
+    } finally {
+      setState((prev) => ({ loading: { ...prev.loading, metadata: false } }));
+    }
+  };
+
+  const onChange = (action?: string) => {
+    if (action === 'delete') {
+      navigate('/admin/billing/meters');
+    } else {
+      runAsync();
+    }
+  };
+
+  const handleEditMetadata = () => {
+    setState((prev) => ({ editing: { ...prev.editing, metadata: true } }));
+  };
+
+  const handleEditMeter = () => {
+    // 设置表单默认值
+    methods.reset({
+      name: data.name,
+      event_name: data.event_name,
+      aggregation_method: data.aggregation_method,
+      unit: data.unit,
+      description: data.description || '',
+      metadata: data.metadata || {},
+    });
+    setState((prev) => ({ editing: { ...prev.editing, meter: true } }));
+  };
+
+  const onUpdateMeter = async (formData: TMeter) => {
+    try {
+      setState((prev) => ({ loading: { ...prev.loading, meter: true } }));
+      await api.put(`/api/meters/${props.id}`, formData);
+      Toast.success(t('admin.meter.saved'));
+      setState((prev) => ({ editing: { ...prev.editing, meter: false } }));
+      runAsync();
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatError(err));
+    } finally {
+      setState((prev) => ({ loading: { ...prev.loading, meter: false } }));
+    }
+  };
+
+  return (
+    <Root direction="column" spacing={2.5} sx={{ mb: 4 }}>
+      <Box>
+        {data.status === 'inactive' && (
+          <Alert severity="warning" sx={{ mb: 2 }}>
+            <AlertTitle>{t('admin.meter.inactive')}</AlertTitle>
+            {t('admin.meter.inactiveTip')}
+          </Alert>
+        )}
+        <Stack
+          className="page-header"
+          direction="row"
+          sx={{
+            justifyContent: 'space-between',
+            alignItems: 'center',
+          }}>
+          <Stack
+            direction="row"
+            onClick={() => goBackOrFallback('/admin/meters')}
+            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.meters')}
+            </Typography>
+          </Stack>
+          <MeterActions data={data} variant="normal" onChange={onChange} />
+        </Stack>
+        <Box
+          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"
+            sx={{
+              justifyContent: 'space-between',
+              alignItems: 'center',
+            }}>
+            <Stack
+              direction="row"
+              spacing={1}
+              sx={{
+                alignItems: 'center',
+              }}>
+              <Stack
+                direction="column"
+                sx={{
+                  alignItems: 'flex-start',
+                  justifyContent: 'space-around',
+                }}>
+                <Typography
+                  variant="h2"
+                  sx={{
+                    color: 'text.primary',
+                  }}>
+                  {data.name}
+                </Typography>
+                <Typography
+                  variant="subtitle1"
+                  sx={{
+                    color: 'text.lighter',
+                  }}>
+                  {data.event_name} • {data.unit}
+                </Typography>
+              </Stack>
+            </Stack>
+          </Stack>
+          <Stack
+            className="section-body"
+            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,
+                md: 3,
+              },
+            }}>
+            <InfoMetric label={t('common.id')} value={<Copyable text={props.id} style={{ marginLeft: 4 }} />} divider />
+            <InfoMetric label={t('common.createdAt')} value={formatTime(data.created_at)} divider />
+          </Stack>
+        </Box>
+        <Divider />
+      </Box>
+      <Stack
+        sx={{
+          flexDirection: {
+            xs: 'column',
+            lg: 'row',
+          },
+          gap: {
+            xs: 2.5,
+            md: 4,
+          },
+          '.meter-column-1': {
+            minWidth: {
+              xs: '100%',
+              lg: '600px',
+            },
+          },
+          '.meter-column-2': {
+            width: {
+              xs: '100%',
+              md: '100%',
+              lg: '320px',
+            },
+            maxWidth: {
+              xs: '100%',
+              md: '33%',
+            },
+          },
+        }}>
+        <Box
+          className="meter-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
+                variant="text"
+                color="inherit"
+                size="small"
+                sx={{ color: 'text.link' }}
+                disabled={state.editing.meter}
+                onClick={handleEditMeter}>
+                {t('common.edit')}
+              </Button>
+            </SectionHeader>
+            <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('admin.meter.name.label')} value={data.name} />
+              <InfoRow label={t('admin.meter.eventName.label')} value={data.event_name} />
+              <InfoRow label={t('admin.meter.aggregationMethod.label')} value={data.aggregation_method} />
+              <InfoRow label={t('admin.meter.unit.label')} value={data.unit} />
+              <InfoRow label={t('admin.meter.description.label')} value={data.description || '-'} />
+              <InfoRow label={t('common.updatedAt')} value={formatTime(data.updated_at)} />
+            </InfoRowGroup>
+          </Box>
+          <Divider />
+
+          <Box className="section">
+            <SectionHeader title={t('admin.meter.events.title')} />
+            <Box className="section-body">
+              <MeterEventsList meterId={data.id} paymentCurrency={data.paymentCurrency} />
+            </Box>
+          </Box>
+          <Divider />
+
+          <Box className="section">
+            <Box
+              sx={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+              }}>
+              <SectionHeader title={t('admin.meter.products.title')} />
+            </Box>
+            <Box className="section-body">
+              <MeterProducts meterId={data.id} meter={data} />
+            </Box>
+          </Box>
+        </Box>
+        {isMobile && <Divider />}
+        <Box className="meter-column-2" sx={{ gap: 2.5, display: 'flex', flexDirection: 'column' }}>
+          <Box className="section">
+            <SectionHeader title={t('admin.meter.usageGuide.title')} />
+            <Box className="section-body">
+              <Alert severity="info" sx={{ mb: 2 }}>
+                <Typography variant="body2">
+                  {t('admin.meter.usageGuide.tip', {
+                    eventName: data.event_name,
+                    aggregationMethodHint: getAggregationMethodHint(data.aggregation_method),
+                    unit: data.unit,
+                  })}
+                </Typography>
+              </Alert>
+            </Box>
+          </Box>
+          <Divider />
+          <Box className="section">
+            <SectionHeader title={t('common.metadata.label')}>
+              <Button
+                variant="text"
+                color="inherit"
+                size="small"
+                sx={{ color: 'text.link' }}
+                disabled={state.editing.metadata}
+                onClick={handleEditMetadata}>
+                {t('common.edit')}
+              </Button>
+            </SectionHeader>
+            <Box className="section-body">
+              <MetadataList data={data.metadata} handleEditMetadata={handleEditMetadata} />
+              {state.editing.metadata && (
+                <MetadataEditor
+                  data={data}
+                  loading={state.loading.metadata}
+                  onSave={onUpdateMetadata}
+                  onCancel={() => setState((prev) => ({ editing: { ...prev.editing, metadata: false } }))}
+                />
+              )}
+            </Box>
+          </Box>
+        </Box>
+      </Stack>
+      {/* 编辑计量器表单 */}
+      {state.editing.meter && (
+        <DrawerForm
+          icon={<EditOutlined />}
+          text={t('admin.meter.edit')}
+          open={state.editing.meter}
+          onClose={() => setState((prev) => ({ editing: { ...prev.editing, meter: false } }))}
+          width={640}
+          addons={
+            <Button
+              variant="contained"
+              size="small"
+              disabled={state.loading.meter}
+              onClick={methods.handleSubmit(onUpdateMeter)}>
+              {t('admin.meter.save')}
+            </Button>
+          }>
+          <FormProvider {...methods}>
+            <MeterForm mode="edit" />
+          </FormProvider>
+        </DrawerForm>
+      )}
+    </Root>
+  );
+}
+
+const Root = styled(Stack)``;