payment-kit 1.19.0 → 1.19.1

package/src/components/metadata/form.tsx

@@ -1,30 +1,96 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { FormInput } from '@blocklet/payment-react';
-import { AddOutlined, DeleteOutlineOutlined } from '@mui/icons-material';
-import { Box, Button, Divider, IconButton, Stack, Typography } from '@mui/material';
-import { useEffect, useRef } from 'react';
+import { AddOutlined, Autorenew, DeleteOutlineOutlined, FormatAlignLeft } from '@mui/icons-material';
+import { Box, Button, Divider, IconButton, Stack, TextField, InputAdornment, Tooltip, FormLabel } from '@mui/material';
+import { useEffect, useRef, useState, useCallback } from 'react';
 import { useFieldArray, useFormContext } from 'react-hook-form';
+import { isObject, debounce } from 'lodash';
+
+import { isObjectContent } from '../../libs/util';
 
 export default function MetadataForm({
   title = undefined,
   actions = null,
   minHeight = 'auto',
+  showModeToggle = true,
+  color = 'primary',
+  name = 'metadata',
 }: {
   title?: string;
   actions?: React.ReactNode;
   minHeight?: string;
+  showModeToggle?: boolean;
+  color?: 'primary' | 'inherit';
+  name?: string;
 }) {
   const { t } = useLocaleContext();
   const {
     control,
     formState: { errors },
+    setValue,
+    getValues,
   } = useFormContext();
 
-  const metadata = useFieldArray({ control, name: 'metadata' });
+  const metadata = useFieldArray({ control, name });
   const lastItemRef = useRef<HTMLDivElement | null>(null);
   const errorRef = useRef<HTMLDivElement | null>(null);
   const initRef = useRef(false);
 
+  const [mode, setMode] = useState<'form' | 'json'>('form');
+  const [jsonValue, setJsonValue] = useState('');
+  const [formatError, setFormatError] = useState<string | null>(null);
+
+  // Initialize JSON value from form data
+  useEffect(() => {
+    const formData = getValues();
+    if (Array.isArray(formData.metadata)) {
+      const metadataObj = formData.metadata.reduce((acc: any, x: any) => {
+        if (x.key) {
+          acc[x.key] = isObjectContent(x.value) ? JSON.parse(x.value) : x.value;
+        }
+        return acc;
+      }, {});
+      setJsonValue(JSON.stringify(metadataObj, null, 2));
+    }
+  }, [getValues]);
+
+  // Debounced function to sync JSON changes to form
+  const debouncedSyncToForm = useCallback(
+    debounce((jsonString: string) => {
+      try {
+        const parsedData = JSON.parse(jsonString);
+        const formMetadata: Array<{ key: string; value: string }> = [];
+        const orderedKeys = Object.keys(JSON.parse(JSON.stringify(parsedData)));
+        orderedKeys.forEach((key) => {
+          formMetadata.push({
+            key,
+            value: isObject(parsedData[key]) ? JSON.stringify(parsedData[key]) : parsedData[key],
+          });
+        });
+
+        setValue('metadata', formMetadata.length > 0 ? formMetadata : [{ key: '', value: '' }]);
+      } catch (err) {
+        // eslint-disable-next-line no-console
+        console.log(err);
+      }
+    }, 500),
+    [setValue]
+  );
+
+  // Sync JSON changes to form when in JSON mode
+  useEffect(() => {
+    if (mode === 'json') {
+      debouncedSyncToForm(jsonValue);
+    }
+  }, [jsonValue, mode, debouncedSyncToForm]);
+
+  // Cleanup debounce on unmount
+  useEffect(() => {
+    return () => {
+      debouncedSyncToForm.cancel();
+    };
+  }, [debouncedSyncToForm]);
+
   useEffect(() => {
     if (!initRef.current) {
       initRef.current = true;
@@ -41,99 +107,229 @@ export default function MetadataForm({
     }
   }, [errors.metadata, errorRef]);
 
-  return (
-    <Box sx={{ width: 1, height: '100%', display: 'flex', flexDirection: 'column' }}>
-      {!!title && <Typography>{title}</Typography>}
-      <Stack
+  const handleModeChange = (newMode: 'form' | 'json') => {
+    if (newMode === 'json' && mode === 'form') {
+      // 从表单模式切换到JSON模式，同步数据
+      const formData = getValues();
+      if (Array.isArray(formData.metadata)) {
+        const metadataObj = formData.metadata.reduce((acc: any, x: any) => {
+          if (x.key) {
+            acc[x.key] = isObjectContent(x.value) ? JSON.parse(x.value) : x.value;
+          }
+          return acc;
+        }, {});
+        setJsonValue(JSON.stringify(metadataObj, null, 2));
+      }
+    }
+    setMode(newMode);
+  };
+
+  const handleJsonChange = (value: string) => {
+    setJsonValue(value);
+    // 清除格式化错误状态
+    if (formatError) {
+      setFormatError(null);
+    }
+  };
+
+  const handleFormatJson = () => {
+    try {
+      const parsed = JSON.parse(jsonValue);
+      const formatted = JSON.stringify(parsed, null, 2);
+      setJsonValue(formatted);
+      setFormatError(null);
+    } catch (err) {
+      setFormatError(err instanceof Error ? err.message : 'Invalid JSON format');
+    }
+  };
+
+  const toggleBtn = showModeToggle && (
+    <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
+      <Button
+        size="small"
+        variant="text"
+        color="primary"
         sx={{
-          maxHeight: {
-            xs: 'calc(100vh - 130px)',
-            md: 400,
-          },
-          minHeight,
-          overflow: 'auto',
-          pb: 1.5,
-          mr: -1.5,
-          pr: 1.5,
-          flex: 1,
-        }}>
-        {metadata.fields.map((meta, index) => (
+          color: color === 'inherit' ? 'text.secondary' : 'primary.main',
+        }}
+        onClick={() => handleModeChange(mode === 'form' ? 'json' : 'form')}
+        startIcon={<Autorenew />}>
+        {mode === 'form' ? t('common.metadata.jsonMode') : t('common.metadata.formMode')}
+      </Button>
+    </Box>
+  );
+  return (
+    <Box sx={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column' }}>
+      {title ? (
+        <Stack sx={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+          <FormLabel sx={{ color: 'text.primary', mt: 0 }}>{title}</FormLabel>
+          {toggleBtn}
+        </Stack>
+      ) : (
+        toggleBtn
+      )}
+      {mode === 'form' ? (
+        <>
           <Stack
-            key={meta.id}
-            spacing={2}
-            direction="row"
-            ref={index === metadata.fields.length - 1 ? lastItemRef : null}
             sx={{
-              mt: 2,
-              alignItems: 'flex-end',
+              maxHeight: {
+                xs: showModeToggle ? 'calc(100vh - 180px)' : 'calc(100vh - 130px)',
+                md: 400,
+              },
+              minHeight,
+              overflow: 'auto',
+              pb: 1.5,
+              mr: -1.5,
+              pr: 1.5,
+              flex: 1,
             }}>
-            <Stack direction="row" spacing={2} sx={{ flex: 1 }}>
-              <FormInput
-                sx={{ flex: 1 }}
-                errorPosition="right"
-                size="small"
-                name={`metadata.${index}.key`}
-                rules={{
-                  required: t('payment.checkout.required'),
-                  maxLength: {
-                    value: 64,
-                    message: t('common.maxLength', { len: 40 }),
-                  },
-                }}
-                placeholder="Key"
-                label="Key"
-                // @ts-ignore
-                ref={errors?.metadata?.[index]?.key ? errorRef : null}
-                inputProps={{
-                  maxLength: 40,
-                }}
-              />
-              <FormInput
-                sx={{ flex: 2 }}
-                size="small"
-                errorPosition="right"
-                name={`metadata.${index}.value`}
-                placeholder="Value"
-                rules={{
-                  required: t('payment.checkout.required'),
-                  maxLength: {
-                    value: 256,
-                    message: t('common.maxLength', { len: 256 }),
-                  },
-                }}
-                label="Value"
-                // @ts-ignore
-                ref={errors?.metadata?.[index]?.value ? errorRef : null}
-                inputProps={{
-                  maxLength: 256,
+            {metadata.fields.map((meta, index) => (
+              <Stack
+                key={meta.id}
+                ref={index === metadata.fields.length - 1 ? lastItemRef : null}
+                sx={{
+                  mt: 2,
+                  spacing: 2,
+
+                  alignItems: 'flex-end',
                 }}
-              />
-            </Stack>
-            <IconButton
-              onClick={() => metadata.remove(index)}
+                spacing={2}
+                direction="row">
+                <Stack direction="row" spacing={2} sx={{ flex: 1 }}>
+                  <FormInput
+                    sx={{ flex: 1 }}
+                    errorPosition="right"
+                    size="small"
+                    name={`metadata.${index}.key`}
+                    rules={{
+                      required: t('payment.checkout.required'),
+                      maxLength: {
+                        value: 64,
+                        message: t('common.maxLength', { len: 40 }),
+                      },
+                    }}
+                    placeholder="Key"
+                    label="Key"
+                    // @ts-ignore
+                    ref={errors?.metadata?.[index]?.key ? errorRef : null}
+                    inputProps={{
+                      maxLength: 40,
+                    }}
+                  />
+                  <FormInput
+                    sx={{ flex: 2 }}
+                    size="small"
+                    errorPosition="right"
+                    name={`metadata.${index}.value`}
+                    placeholder="Value"
+                    rules={{
+                      required: t('payment.checkout.required'),
+                      maxLength: {
+                        value: 256,
+                        message: t('common.maxLength', { len: 256 }),
+                      },
+                    }}
+                    label="Value"
+                    // @ts-ignore
+                    ref={errors?.metadata?.[index]?.value ? errorRef : null}
+                    inputProps={{
+                      maxLength: 256,
+                    }}
+                  />
+                </Stack>
+                <IconButton
+                  onClick={() => metadata.remove(index)}
+                  sx={{
+                    border: '1px solid',
+                    borderColor: 'grey.100',
+                    borderRadius: 1,
+                    padding: '8px',
+                  }}>
+                  <DeleteOutlineOutlined color="error" sx={{ opacity: 0.75 }} />
+                </IconButton>
+              </Stack>
+            ))}
+          </Stack>
+
+          <Divider />
+          <Stack
+            direction="row"
+            sx={{
+              mt: metadata.fields.length ? 2 : 1,
+              justifyContent: 'space-between',
+            }}>
+            <Button
+              size="small"
+              variant="outlined"
+              color="primary"
               sx={{
-                border: '1px solid',
-                borderColor: 'grey.100',
-                borderRadius: 1,
-                padding: '8px',
-              }}>
-              <DeleteOutlineOutlined color="error" sx={{ opacity: 0.75 }} />
-            </IconButton>
+                color: color === 'inherit' ? 'text.primary' : 'primary.main',
+              }}
+              onClick={() => metadata.append({ key: '', value: '' })}>
+              <AddOutlined fontSize="small" /> {t('common.metadata.add')}
+            </Button>
+            {actions}
           </Stack>
-        ))}
-      </Stack>
-      <Divider />
-      <Stack
-        direction="row"
-        sx={{
-          mt: metadata.fields.length ? 2 : 1,
-          justifyContent: 'space-between',
-        }}>
-        <Button size="small" variant="outlined" color="primary" onClick={() => metadata.append({ key: '', value: '' })}>
-          <AddOutlined fontSize="small" /> {t('common.metadata.add')}
-        </Button>
-        {actions}
-      </Stack>
+        </>
+      ) : (
+        <>
+          <TextField
+            multiline
+            fullWidth
+            rows={15}
+            value={jsonValue}
+            onChange={(e) => handleJsonChange(e.target.value)}
+            placeholder={t('common.metadata.jsonPlaceholder')}
+            InputProps={{
+              endAdornment: (
+                <InputAdornment position="end" sx={{ alignSelf: 'flex-start', mt: 1 }}>
+                  <Tooltip
+                    title={formatError || t('common.metadata.formatJson')}
+                    placement="top"
+                    componentsProps={{
+                      tooltip: {
+                        sx: formatError
+                          ? {
+                              maxWidth: 300,
+                              backgroundColor: 'error.main',
+                              opacity: 0.8,
+                            }
+                          : {},
+                      },
+                    }}>
+                    <IconButton
+                      onClick={handleFormatJson}
+                      size="small"
+                      sx={{
+                        color: formatError ? 'error.main' : 'text.secondary',
+                      }}>
+                      <FormatAlignLeft fontSize="small" />
+                    </IconButton>
+                  </Tooltip>
+                </InputAdornment>
+              ),
+            }}
+            sx={{
+              mb: 2,
+              mt: 2,
+              flex: 1,
+              '& .MuiInputBase-input': {
+                fontFamily: 'monospace',
+                fontSize: '14px',
+              },
+            }}
+          />
+          <Divider />
+          <Stack
+            direction="row"
+            sx={{
+              mt: 2,
+              justifyContent: 'flex-end',
+            }}>
+            {actions}
+          </Stack>
+        </>
+      )}
     </Box>
   );
 }

package/src/components/meter/actions.tsx

@@ -0,0 +1,101 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Toast from '@arcblock/ux/lib/Toast';
+import { ConfirmDialog, api, formatError } from '@blocklet/payment-react';
+import { useSetState } from 'ahooks';
+import { useNavigate } from 'react-router-dom';
+import type { LiteralUnion } from 'type-fest';
+import type { TMeter } from '@blocklet/payment-types';
+import Actions from '../actions';
+import ClickBoundary from '../click-boundary';
+
+interface MeterActionsProps {
+  data: TMeter;
+  variant?: LiteralUnion<'compact' | 'normal', string>;
+  onChange: (action?: string) => void;
+}
+
+export default function MeterActions({ data, variant = 'compact', onChange }: MeterActionsProps) {
+  const { t } = useLocaleContext();
+  const navigate = useNavigate();
+  const [state, setState] = useSetState({
+    action: '',
+    loading: false,
+  });
+
+  const createHandler = (action: string) => {
+    return async () => {
+      try {
+        setState({ loading: true });
+
+        if (action === 'delete') {
+          await api.delete(`/api/meters/${data.id}`);
+        } else {
+          await api.put(`/api/meters/${data.id}/${action}`);
+        }
+
+        if (action === 'activate') {
+          Toast.success(t('admin.meter.activated'));
+        } else if (action === 'deactivate') {
+          Toast.success(t('admin.meter.deactivated'));
+        } else if (action === 'delete') {
+          Toast.success(t('admin.meter.deleted'));
+        }
+
+        onChange(action);
+      } catch (err) {
+        console.error(err);
+        Toast.error(formatError(err));
+      } finally {
+        setState({ loading: false, action: '' });
+      }
+    };
+  };
+
+  const handleCancel = () => {
+    setState({ action: '' });
+  };
+
+  const actions = [
+    {
+      label: data.status === 'inactive' ? t('admin.meter.activate') : t('admin.meter.deactivate'),
+      handler: () => setState({ action: data.status === 'inactive' ? 'activate' : 'deactivate' }),
+      color: data.status === 'inactive' ? 'primary' : 'error',
+    },
+  ];
+
+  if (variant === 'compact') {
+    actions.push({
+      label: t('admin.meter.view'),
+      handler: () => navigate(`/admin/billing/meters/${data.id}`),
+      color: 'primary',
+    });
+  }
+
+  return (
+    <ClickBoundary>
+      <Actions variant={variant} actions={actions} />
+
+      {state.action === 'activate' && (
+        <ConfirmDialog
+          onConfirm={createHandler('activate')}
+          onCancel={handleCancel}
+          title={t('admin.meter.activate')}
+          message={t('admin.meter.activateConfirm')}
+          loading={state.loading}
+          color="primary"
+        />
+      )}
+
+      {state.action === 'deactivate' && (
+        <ConfirmDialog
+          onConfirm={createHandler('deactivate')}
+          onCancel={handleCancel}
+          title={t('admin.meter.deactivate')}
+          message={t('admin.meter.deactivateConfirm')}
+          loading={state.loading}
+          color="warning"
+        />
+      )}
+    </ClickBoundary>
+  );
+}