payment-kit 1.18.2 → 1.18.4

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>
+  );
+}

package/src/pages/integrations/donations/index.tsx

@@ -0,0 +1,360 @@
+/* eslint-disable react/no-unstable-nested-components */
+import { Toast } from '@arcblock/ux';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { api, formatError, Table, ConfirmDialog, Switch, clearDonateCache, getPrefix } from '@blocklet/payment-react';
+import { Alert, Typography, Button, CircularProgress, Stack, Avatar, Box, IconButton, Tooltip } from '@mui/material';
+import { ContentCopy } from '@mui/icons-material';
+import { useLocalStorageState, useRequest } from 'ahooks';
+import Dialog from '@arcblock/ux/lib/Dialog';
+import { useState, useEffect } from 'react';
+import { joinURL } from 'ufo';
+import { getDurableData } from '@arcblock/ux/lib/Datatable';
+import useBus from 'use-bus';
+import EditDonationForm from './edit-form';
+
+const exampleCode = `import { PaymentProvider, DonateProvider, CheckoutDonate } from '@blocklet/payment-react';
+
+// In your component
+function YourComponent() {
+  return (
+    <PaymentProvider session={session} connect={connectApi}>
+      <DonateProvider
+        mountLocation="your-unique-donate-instance"
+        description="Help locate this donation instance"
+      >
+        <CheckoutDonate
+          settings={{
+            target: "post-123", // required, unique identifier for the donation instance
+            title: "Support Author", // required, title of the donation modal
+            description: "If you find this article helpful, feel free to buy me a coffee", // required, description of the donation 
+            reference: "https://your-site.com/posts/123", // required, reference link of the donation 
+            beneficiaries: [
+              {
+                address: "tip user did", // required, address of the beneficiary
+                share: "100",  // required, percentage share
+              },
+            ],
+          }}
+        />
+      </DonateProvider>
+    </PaymentProvider>
+  );
+}`;
+
+const fetchData = (params: Record<string, any> = {}): Promise<any> => {
+  const search = new URLSearchParams();
+  Object.keys(params).forEach((key) => {
+    let v = params[key];
+    if (key === 'q') {
+      v = Object.entries(v)
+        .map((x) => x.join(':'))
+        .join(' ');
+    }
+    search.set(key, String(v));
+  });
+  return api.get(`/api/settings/donate?${search.toString()}`).then((res) => res.data);
+};
+
+function CodeExample({ code }: { code: string }) {
+  const { t } = useLocaleContext();
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(code);
+      Toast.success(t('common.copySuccess'));
+    } catch (err) {
+      Toast.error(t('common.copyFailed'));
+    }
+  };
+
+  return (
+    <Box sx={{ position: 'relative' }}>
+      <Box
+        component="pre"
+        sx={{
+          backgroundColor: '#F8F9FA', // 更浅的背景色
+          color: '#495057', // 更柔和的文字颜色
+          borderRadius: 1,
+          p: 2,
+          overflow: 'auto',
+          '&::-webkit-scrollbar': {
+            height: 8,
+            bgcolor: 'background.paper',
+          },
+          '&::-webkit-scrollbar-thumb': {
+            bgcolor: '#CED4DA', // 更浅的滚动条颜色
+            borderRadius: 4,
+          },
+          fontSize: '0.875rem',
+          fontFamily: 'monospace',
+          lineHeight: 1.5, // 增加行高
+          border: '1px solid #E9ECEF', // 添加柔和的边框
+        }}>
+        {code}
+      </Box>
+      <Tooltip title={t('common.copy')} placement="top">
+        <IconButton
+          onClick={handleCopy}
+          sx={{
+            position: 'absolute',
+            top: 8,
+            right: 8,
+            bgcolor: 'background.paper',
+            '&:hover': {
+              bgcolor: '#F8F9FA', // 更浅的悬停色
+            },
+          }}>
+          <ContentCopy fontSize="small" />
+        </IconButton>
+      </Tooltip>
+    </Box>
+  );
+}
+
+type SearchProps = {
+  pageSize: number;
+  page: number;
+  q?: {
+    'like-description'?: string;
+    'like-component_did'?: string;
+    'like-mount_location'?: string;
+  };
+  o?: 'asc' | 'desc';
+};
+
+export default function DonationList() {
+  const listKey = 'donation-settings';
+  const { t } = useLocaleContext();
+  const [editingItem, setEditingItem] = useState<any>(null);
+  const [showExample, setShowExample] = useState(false);
+  const [confirmDialog, setConfirmDialog] = useState({
+    open: false,
+    id: '',
+    active: false,
+    mountLocation: '',
+  });
+
+  const persisted = getDurableData(listKey);
+  const [search, setSearch] = useLocalStorageState<SearchProps>(listKey, {
+    defaultValue: {
+      o: 'desc',
+      pageSize: persisted.rowsPerPage || 10,
+      page: persisted.page ? persisted.page + 1 : 1,
+    },
+  });
+
+  const { error, data = { list: [], count: 0 }, refresh } = useRequest(() => fetchData(search));
+  const listData = data.list || [];
+
+  useEffect(() => {
+    refresh();
+  }, [search, refresh]);
+
+  useBus('donation.updated', () => refresh(), []);
+
+  const handleStatusChange = async (item: any, active: boolean) => {
+    if (active) {
+      setConfirmDialog({ open: true, id: item.id, active, mountLocation: item.mount_location });
+      return;
+    }
+    try {
+      await api.put(`/api/settings/${item.id}`, { active: !active });
+      clearDonateCache(item.mount_location);
+      Toast.success(t('admin.donate.status.activeSuccess'));
+      refresh();
+    } catch (err) {
+      Toast.error(formatError(err));
+    }
+  };
+
+  const handleConfirmStatusChange = async () => {
+    try {
+      await api.put(`/api/settings/${confirmDialog.id}`, { active: !confirmDialog.active });
+      clearDonateCache(confirmDialog.mountLocation);
+      Toast.success(t('admin.donate.status.inactiveSuccess'));
+      refresh();
+    } catch (err) {
+      Toast.error(formatError(err));
+    } finally {
+      setConfirmDialog({ open: false, id: '', active: false, mountLocation: '' });
+    }
+  };
+
+  const columns = [
+    {
+      label: t('admin.donate.component'),
+      name: 'component_did',
+      options: {
+        sort: false,
+        customBodyRenderLite: (index: number) => {
+          const componentInfo = window.blocklet?.componentMountPoints.find(
+            (c) => c?.did === listData[index]?.component_did
+          );
+          if (!componentInfo) {
+            return data[index]?.component_did || t('common.none');
+          }
+          return (
+            <Stack direction="row" alignItems="center" gap={1}>
+              <Avatar
+                src={joinURL(getPrefix(), `.well-known/service/blocklet/logo-bundle/${componentInfo.did}`)}
+                alt={componentInfo?.title}
+              />
+              <Typography onClick={() => window.open(componentInfo.mountPoint, '_blank')} sx={{ cursor: 'pointer' }}>
+                {componentInfo?.title}
+              </Typography>
+            </Stack>
+          );
+        },
+      },
+    },
+    {
+      label: t('admin.donate.mountLocation'),
+      name: 'mount_location',
+      options: { sort: false },
+    },
+    {
+      label: t('admin.donate.description'),
+      name: 'description',
+      options: { sort: false },
+    },
+    {
+      label: t('admin.donate.status.title'),
+      name: 'active',
+      width: 100,
+      options: {
+        sort: false,
+        customBodyRenderLite: (index: number) => (
+          <Switch
+            checked={listData[index].active}
+            onChange={() => handleStatusChange(listData[index], listData[index].active)}
+          />
+        ),
+      },
+    },
+    {
+      label: t('common.setting'),
+      width: 100,
+      options: {
+        sort: false,
+        customBodyRenderLite: (index: number) => (
+          <Button
+            component="text"
+            sx={{
+              color: 'text.link',
+              minWidth: 'fit-content',
+            }}
+            onClick={() => setEditingItem(listData[index])}>
+            {t('common.edit')}
+          </Button>
+        ),
+      },
+    },
+  ];
+
+  const onTableChange = ({ page, rowsPerPage }: { page: number; rowsPerPage: number }) => {
+    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 }));
+    }
+  };
+
+  if (error) {
+    return <Alert severity="error">{error.message}</Alert>;
+  }
+
+  if (!data) {
+    return <CircularProgress />;
+  }
+
+  return (
+    <>
+      <Stack direction="row" alignItems="center" gap={1} flexWrap="wrap" mb={-1}>
+        <Typography variant="h6">{t('admin.donate.intro')}</Typography>
+        <Button variant="text" size="small" onClick={() => setShowExample(true)} sx={{ color: 'text.link' }}>
+          {t('admin.donate.usage.viewExample')}
+        </Button>
+      </Stack>
+      <Table
+        hasSearch
+        durable={`__${listKey}__`}
+        durableKeys={['searchText']}
+        data={listData}
+        columns={columns}
+        options={{
+          count: data.count,
+          page: search!.page - 1,
+          rowsPerPage: search!.pageSize,
+          onSearchChange: (text: string) => {
+            if (text) {
+              setSearch((x) => ({
+                ...x!,
+                q: {
+                  'like-mount_location': text,
+                  'like-description': text,
+                  'like-component_did': text,
+                },
+                page: 1,
+              }));
+            } else {
+              setSearch((x) => ({
+                ...x!,
+                page: 1,
+                q: {},
+              }));
+            }
+          },
+        }}
+        onChange={onTableChange}
+      />
+
+      {showExample && (
+        <Dialog
+          open
+          onClose={() => setShowExample(false)}
+          title={t('admin.donate.usage.title')}
+          maxWidth="md"
+          sx={{ '.MuiDialogContent-root': { padding: 0 } }}
+          fullWidth>
+          <Box sx={{ p: 3 }}>
+            <Typography variant="body2" paragraph>
+              {t('admin.donate.usage.description')}
+            </Typography>
+            <CodeExample code={exampleCode} />
+            <Typography variant="body2" color="text.secondary" sx={{ mt: 2 }}>
+              {t('admin.donate.usage.note')}
+            </Typography>
+          </Box>
+        </Dialog>
+      )}
+
+      {editingItem && (
+        <Dialog
+          open
+          onClose={() => setEditingItem(null)}
+          title={t('admin.donate.editTitle')}
+          maxWidth="md"
+          fullWidth
+          sx={{ '.MuiDialogContent-root': { padding: 0 } }}>
+          <EditDonationForm
+            item={editingItem}
+            onSuccess={() => {
+              refresh();
+              setEditingItem(null);
+            }}
+            onCancel={() => setEditingItem(null)}
+          />
+        </Dialog>
+      )}
+
+      {confirmDialog.open && (
+        <ConfirmDialog
+          title={t('admin.donate.status.inactiveTitle')}
+          message={t('admin.donate.status.inactiveTip')}
+          onConfirm={handleConfirmStatusChange}
+          onCancel={() => setConfirmDialog({ open: false, id: '', active: false, mountLocation: '' })}
+        />
+      )}
+    </>
+  );
+}