payment-kit 1.18.3 → 1.18.5

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

@@ -8,6 +8,7 @@ import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import useBus from 'use-bus';
 
+import { useLocalStorageState } from 'ahooks';
 import FilterToolbar from '../../../../components/filter-toolbar';
 import InfoCard from '../../../../components/info-card';
 import ProductActions from '../../../../components/product/actions';
@@ -43,11 +44,13 @@ export default function ProductsList() {
 
   const { t, locale } = useLocaleContext();
   const { settings } = usePaymentContext();
-  const [search, setSearch] = useState<SearchProps>({
-    active: '',
-    pageSize: persisted.rowsPerPage || 20,
-    page: persisted.page ? persisted.page + 1 : 1,
-    donation: 'hide',
+  const [search, setSearch] = useLocalStorageState<SearchProps>(listKey, {
+    defaultValue: {
+      active: '',
+      pageSize: persisted.rowsPerPage || 20,
+      page: persisted.page ? persisted.page + 1 : 1,
+      donation: 'hide',
+    },
   });
 
   const [data, setData] = useState({}) as any;
@@ -142,10 +145,10 @@ export default function ProductsList() {
   ];
 
   const onTableChange = ({ page, rowsPerPage }: any) => {
-    if (search.pageSize !== rowsPerPage) {
-      setSearch((x) => ({ ...x, pageSize: rowsPerPage, page: 1 }));
-    } else if (search.page !== page + 1) {
-      setSearch((x) => ({ ...x, page: page + 1 }));
+    if (search!.pageSize !== rowsPerPage) {
+      setSearch((x: any) => ({ ...x, pageSize: rowsPerPage, page: 1 }));
+    } else if (search!.page !== page + 1) {
+      setSearch((x: any) => ({ ...x, page: page + 1 }));
     }
   };
   return (
@@ -165,31 +168,32 @@ export default function ProductsList() {
       columns={columns}
       options={{
         count: data.count,
-        page: search.page - 1,
-        rowsPerPage: search.pageSize,
+        page: search!.page - 1,
+        rowsPerPage: search!.pageSize,
         onColumnSortChange(_: any, order: any) {
           setSearch({
-            ...search,
-            q: search.q || {},
+            ...search!,
+            q: search!.q || {},
             o: order,
           });
         },
         onSearchChange: (text: string) => {
           if (text) {
             setSearch({
+              ...search!,
               q: {
                 'like-description': text,
                 'like-name': text,
               },
-              active: '',
               pageSize: 100,
               page: 1,
             });
           } else {
             setSearch({
-              active: '',
+              ...search!,
               pageSize: 100,
               page: 1,
+              q: {},
             });
           }
         },

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

@@ -73,6 +73,9 @@ export default function PaymentMethodEdit({ onClose, value }: { onClose: () => v
             'settings.base.explorer_host',
             'settings.ethereum.api_host',
             'settings.ethereum.explorer_host',
+            'settings.stripe.publishable_key',
+            'settings.stripe.secret_key',
+            'settings.stripe.dashboard',
           ]}
         />
       </FormProvider>

package/src/pages/home.tsx

@@ -36,7 +36,7 @@ function Home() {
             </Typography>
           </Stack>
           <Stack direction="row" spacing={3}>
-            <Button variant="outlined" color="secondary" size="large" component={Link} to="/admin/overview">
+            <Button variant="outlined" color="secondary" size="large" component={Link} to="/integrations">
               Admin Dashboard
             </Button>
             <Button

package/src/pages/integrations/donations/edit-form.tsx

@@ -0,0 +1,349 @@
+import { useForm, Controller, FormProvider } from 'react-hook-form';
+import {
+  Box,
+  Grid,
+  TextField,
+  Switch,
+  Button,
+  Typography,
+  Stack,
+  Paper,
+  Divider,
+  ToggleButtonGroup,
+  ToggleButton,
+} from '@mui/material';
+import { api, formatError, clearDonateCache } from '@blocklet/payment-react';
+import { Toast } from '@arcblock/ux';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import type { TSetting } from '@blocklet/payment-types';
+import { useState, useEffect, useRef } from 'react';
+import DonationPreview from './preview';
+
+type FormData = {
+  settings: {
+    btnText: string;
+    amount: {
+      presets: string[];
+      preset: string;
+      minimum: string;
+      maximum: string;
+      custom: boolean;
+    };
+    historyType: 'avatar' | 'table';
+  };
+};
+
+function NumberArrayInput({ value, onChange }: { value: string[]; onChange: (value: string[]) => void }) {
+  const { t } = useLocaleContext();
+  const [inputValue, setInputValue] = useState(value.join(', '));
+  const isSelfUpdate = useRef(false); // 新增标志位
+
+  useEffect(() => {
+    if (isSelfUpdate.current) {
+      isSelfUpdate.current = false;
+      return;
+    }
+    setInputValue(value.join(', '));
+  }, [value]);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { value: val } = e.target;
+
+    if (!/^[\d,.\s]*$/.test(val)) return;
+
+    setInputValue(val);
+
+    // 添加处理空字符串的情况
+    const rawValues = val.split(/[,\s]+/).filter(Boolean);
+    const numbers = rawValues
+      .map((v) => v.trim())
+      .filter((v) => !Number.isNaN(Number(v)))
+      .map(Number)
+      .filter((v, i, arr) => arr.indexOf(v) === i);
+
+    isSelfUpdate.current = true; // 标记为内部更新
+    onChange(numbers.map(String));
+  };
+
+  return (
+    <TextField
+      fullWidth
+      label={t('admin.donate.presets')}
+      helperText={t('admin.donate.presetsHelper')}
+      value={inputValue}
+      onChange={handleChange}
+      placeholder="1, 5, 10"
+      sx={{ bgcolor: 'background.paper' }}
+      onBlur={() => {
+        // 失焦时强制同步显示格式
+        const formatted = (inputValue.match(/[\d.]+/g) || []).join(', ');
+        setInputValue(formatted);
+      }}
+    />
+  );
+}
+
+export default function EditDonationForm({
+  item,
+  onSuccess,
+  onCancel,
+}: {
+  item: TSetting;
+  onSuccess: () => void;
+  onCancel: () => void;
+}) {
+  const { t } = useLocaleContext();
+  const methods = useForm<FormData>({
+    defaultValues: {
+      settings: {
+        amount: {
+          presets: item?.settings?.amount?.presets,
+          preset: item?.settings?.amount?.preset,
+          minimum: item?.settings?.amount?.minimum,
+          maximum: item?.settings?.amount?.maximum,
+          custom: item?.settings?.amount?.custom,
+        },
+        btnText: item?.settings?.btnText,
+        historyType: item?.settings?.historyType,
+      },
+    },
+  });
+
+  const { handleSubmit, watch } = methods;
+  const formValues = watch();
+
+  const onSubmit = async (data: FormData) => {
+    if (data.settings.amount.presets?.length > 0 && data.settings.amount.preset) {
+      const inPresets = data.settings.amount.presets.includes(data.settings.amount.preset);
+      if (!inPresets) {
+        Toast.error(t('admin.donate.validation.invalidPreset'));
+        return;
+      }
+    }
+    try {
+      await api.put(`/api/settings/${item.id}`, data);
+      clearDonateCache(item.mount_location);
+      Toast.success(t('admin.donate.updateSuccess'));
+      onSuccess();
+    } catch (err) {
+      Toast.error(formatError(err));
+    }
+  };
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%',
+        minHeight: '100vh',
+      }}>
+      <Box
+        sx={{
+          flex: 1,
+          overflow: {
+            xs: 'visible',
+            md: 'auto',
+          },
+          pb: 2,
+          display: 'flex',
+          flexDirection: 'column',
+        }}>
+        <FormProvider {...methods}>
+          <Grid
+            container
+            spacing={3}
+            sx={{
+              flex: 1,
+              minHeight: 0,
+            }}>
+            <Grid
+              item
+              xs={12}
+              md={6}
+              sx={{
+                height: '100%',
+              }}>
+              <Paper
+                elevation={0}
+                sx={{
+                  p: { xs: 2, md: 3 },
+                  bgcolor: 'background.neutral',
+                  height: '100%',
+                  overflow: 'auto',
+                }}>
+                <Stack spacing={4}>
+                  <Box>
+                    <Typography variant="h6" gutterBottom color="text.primary" sx={{ mb: 3 }}>
+                      {t('admin.donate.buttonSettings')}
+                    </Typography>
+                    <Stack spacing={3}>
+                      <Controller
+                        name="settings.btnText"
+                        render={({ field }) => (
+                          <TextField
+                            {...field}
+                            fullWidth
+                            label={t('admin.donate.btn.text')}
+                            helperText={t('admin.donate.btn.helper')}
+                            sx={{ bgcolor: 'background.paper' }}
+                          />
+                        )}
+                      />
+
+                      <Stack gap={1}>
+                        <Typography variant="subtitle2" gutterBottom>
+                          {t('admin.donate.historyType.title')}
+                        </Typography>
+                        <Controller
+                          name="settings.historyType"
+                          render={({ field }) => (
+                            <ToggleButtonGroup
+                              value={field.value}
+                              exclusive
+                              onChange={(_, value) => field.onChange(value)}
+                              size="small"
+                              sx={{ bgcolor: 'background.paper' }}>
+                              <ToggleButton value="table" size="small">
+                                {t('admin.donate.historyType.list')}
+                              </ToggleButton>
+                              <ToggleButton value="avatar" size="small">
+                                {t('admin.donate.historyType.avatar')}
+                              </ToggleButton>
+                            </ToggleButtonGroup>
+                          )}
+                        />
+                      </Stack>
+                    </Stack>
+                  </Box>
+
+                  <Divider />
+
+                  <Box>
+                    <Typography variant="h6" gutterBottom color="text.primary" sx={{ mb: 3 }}>
+                      {t('admin.donate.amountSettings')}
+                    </Typography>
+                    <Stack spacing={3}>
+                      <Controller
+                        control={methods.control}
+                        name="settings.amount.presets"
+                        render={({ field }) => <NumberArrayInput value={field.value || []} onChange={field.onChange} />}
+                      />
+                      <Controller
+                        name="settings.amount.preset"
+                        render={({ field }) => (
+                          <TextField
+                            {...field}
+                            fullWidth
+                            label={t('admin.donate.preset')}
+                            helperText={t('admin.donate.presetHelper')}
+                            sx={{ bgcolor: 'background.paper' }}
+                          />
+                        )}
+                      />
+
+                      <Box
+                        sx={{
+                          display: 'flex',
+                          alignItems: 'center',
+                          gap: 2,
+                        }}>
+                        <Typography variant="subtitle2" gutterBottom>
+                          {t('admin.donate.custom')}
+                        </Typography>
+                        <Controller
+                          name="settings.amount.custom"
+                          render={({ field }) => (
+                            <Switch
+                              checked={field.value}
+                              onChange={(e) => field.onChange(e.target.checked)}
+                              size="small"
+                            />
+                          )}
+                        />
+                      </Box>
+
+                      {formValues.settings.amount.custom && (
+                        <Stack spacing={2} sx={{ mt: 2 }}>
+                          <Controller
+                            name="settings.amount.minimum"
+                            render={({ field }) => (
+                              <TextField
+                                {...field}
+                                fullWidth
+                                label={t('admin.donate.minimum')}
+                                type="number"
+                                sx={{ bgcolor: 'background.paper' }}
+                              />
+                            )}
+                          />
+                          <Controller
+                            name="settings.amount.maximum"
+                            render={({ field }) => (
+                              <TextField
+                                {...field}
+                                fullWidth
+                                label={t('admin.donate.maximum')}
+                                type="number"
+                                sx={{ bgcolor: 'background.paper' }}
+                              />
+                            )}
+                          />
+                        </Stack>
+                      )}
+                    </Stack>
+                  </Box>
+                </Stack>
+              </Paper>
+            </Grid>
+
+            <Grid
+              item
+              md={6}
+              sx={{
+                display: { xs: 'none', md: 'block' },
+                height: '100%',
+              }}>
+              <Paper
+                elevation={0}
+                sx={{
+                  p: 3,
+                  bgcolor: 'background.neutral',
+                  height: '100%',
+                  overflow: 'auto',
+                }}>
+                <DonationPreview config={methods.watch()} />
+              </Paper>
+            </Grid>
+          </Grid>
+        </FormProvider>
+      </Box>
+
+      <Box
+        sx={{
+          mt: 2,
+          pt: 2,
+          pb: 2,
+          px: 2,
+          borderTop: 1,
+          borderColor: 'divider',
+          display: 'flex',
+          justifyContent: 'flex-end',
+          gap: 2,
+          bgcolor: 'background.paper',
+          position: 'sticky',
+          bottom: 0,
+          left: 0,
+          right: 0,
+          zIndex: 1,
+        }}>
+        <Button onClick={onCancel} variant="outlined">
+          {t('common.cancel')}
+        </Button>
+        <Button variant="contained" onClick={handleSubmit(onSubmit)}>
+          {t('common.save')}
+        </Button>
+      </Box>
+    </Box>
+  );
+}