payment-kit 1.18.3 → 1.18.5

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

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

@@ -0,0 +1,229 @@
+import { useState } from 'react';
+import { Box, Typography, Button, TextField, Stack, Paper, Divider } from '@mui/material';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import type { TSetting } from '@blocklet/payment-types';
+
+export default function DonationPreview({ config }: { config: TSetting['settings'] }) {
+  const { t } = useLocaleContext();
+  const hasPresets = config.settings.amount.presets?.length > 0;
+  const [selectedAmount, setSelectedAmount] = useState(config.settings.amount.preset);
+  const [customAmount, setCustomAmount] = useState('');
+  const [showCustom, setShowCustom] = useState(hasPresets ? false : config.settings.amount.custom);
+
+  const handleAmountSelect = (amount: string) => {
+    setSelectedAmount(amount);
+    setShowCustom(false);
+    setCustomAmount('');
+  };
+
+  const handleCustomClick = () => {
+    setShowCustom(true);
+    setSelectedAmount('');
+  };
+
+  return (
+    <Stack spacing={3}>
+      <Typography variant="h6" gutterBottom color="text.primary">
+        {t('admin.donate.previewTitle')}
+      </Typography>
+
+      {/* Button Preview */}
+      <Paper
+        elevation={0}
+        sx={{
+          p: 2,
+          bgcolor: 'background.paper',
+          border: '1px dashed',
+          borderColor: 'divider',
+          borderRadius: 1,
+        }}>
+        <Typography variant="caption" display="block" gutterBottom color="text.secondary" mb={1}>
+          {t('admin.donate.btn.preview')}
+        </Typography>
+        <Stack spacing={2} alignItems="center">
+          <Button variant="contained" color="primary">
+            {config.settings.btnText}
+          </Button>
+
+          <Box sx={{ width: '100%', maxWidth: 300 }}>
+            <Typography variant="caption" display="block" gutterBottom color="text.secondary" mb={1} textAlign="center">
+              total XX ABT
+            </Typography>
+            {config.settings.historyType === 'avatar' ? (
+              <Box
+                sx={{
+                  height: 40,
+                  position: 'relative',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                }}>
+                {Array(5)
+                  .fill(0)
+                  .map((_, i) => (
+                    <Box
+                      // eslint-disable-next-line react/no-array-index-key
+                      key={i}
+                      sx={{
+                        width: 32,
+                        height: 32,
+                        borderRadius: '50%',
+                        bgcolor: '#e0e0e0',
+                        position: 'absolute',
+                        left: `calc(50% - 16px + ${i * 24}px - ${2 * 24}px)`,
+                        opacity: 1 - i * 0.1,
+                        border: '2px solid #fff',
+                      }}
+                    />
+                  ))}
+              </Box>
+            ) : (
+              <Box
+                sx={{
+                  borderRadius: 1,
+                  p: 1.5,
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'center',
+                  gap: 1.5,
+                }}>
+                {Array(3)
+                  .fill(0)
+                  .map((_, i) => (
+                    <Box
+                      // eslint-disable-next-line react/no-array-index-key
+                      key={i}
+                      sx={{
+                        display: 'flex',
+                        justifyContent: 'center',
+                        gap: 2,
+                        opacity: 1 - i * 0.2,
+                        width: '100%',
+                        maxWidth: 240,
+                      }}>
+                      <Box
+                        sx={{
+                          width: '30%',
+                          height: 8,
+                          borderRadius: 1,
+                          bgcolor: '#e0e0e0',
+                        }}
+                      />
+                      <Box
+                        sx={{
+                          width: '20%',
+                          height: 8,
+                          borderRadius: 1,
+                          bgcolor: '#e0e0e0',
+                        }}
+                      />
+                      <Box
+                        sx={{
+                          width: '15%',
+                          height: 8,
+                          borderRadius: 1,
+                          bgcolor: '#e0e0e0',
+                        }}
+                      />
+                    </Box>
+                  ))}
+              </Box>
+            )}
+          </Box>
+        </Stack>
+      </Paper>
+
+      {/* Dialog Preview */}
+      <Paper
+        elevation={0}
+        sx={{
+          p: 2,
+          bgcolor: 'background.paper',
+          border: '1px dashed',
+          borderColor: 'divider',
+          borderRadius: 1,
+        }}>
+        <Typography variant="caption" display="block" gutterBottom color="text.secondary" mb={1}>
+          {t('admin.donate.dialog.preview')}
+        </Typography>
+        <Stack spacing={3}>
+          <Box display="flex" gap={1} flexWrap="wrap">
+            {config.settings.amount.presets?.map((amount: string) => (
+              <Button
+                key={amount}
+                variant="outlined"
+                size="small"
+                sx={{
+                  borderColor: selectedAmount === amount ? 'primary.main' : 'divider',
+                  borderWidth: selectedAmount === amount ? 2 : 1,
+                  color: selectedAmount === amount ? 'primary.main' : 'text.primary',
+                }}
+                onClick={() => handleAmountSelect(amount)}>
+                {`${amount} ABT`}
+              </Button>
+            ))}
+            {config.settings.amount.custom && hasPresets && (
+              <Button
+                variant="outlined"
+                size="small"
+                sx={{
+                  borderColor: showCustom ? 'primary.main' : 'divider',
+                  borderWidth: showCustom ? 2 : 1,
+                  color: showCustom ? 'primary.main' : 'text.primary',
+                }}
+                onClick={handleCustomClick}>
+                {t('common.custom')}
+              </Button>
+            )}
+          </Box>
+
+          {showCustom && config.settings.amount.custom && (
+            <TextField
+              fullWidth
+              size="small"
+              autoFocus
+              label={t('admin.donate.customAmount')}
+              value={customAmount}
+              onChange={(e) => {
+                const { value } = e.target;
+                setCustomAmount(value);
+              }}
+              InputProps={{
+                endAdornment: <Typography sx={{ ml: 1 }}>ABT</Typography>,
+                autoComplete: 'off',
+              }}
+              helperText={t('admin.donate.amountRange', {
+                min: config.settings.amount.minimum,
+                max: config.settings.amount.maximum,
+              })}
+            />
+          )}
+        </Stack>
+        <Divider sx={{ my: 2 }} />
+        <Box display="flex" justifyContent="flex-end" alignItems="center" gap={1}>
+          <Box
+            sx={{
+              px: 2,
+              py: 0.5,
+              bgcolor: '#f5f5f5',
+              borderRadius: 1,
+              width: 40,
+              height: 24,
+            }}
+          />
+          <Box
+            sx={{
+              px: 2,
+              py: 0.5,
+              bgcolor: 'primary.main',
+              borderRadius: 1,
+              width: 40,
+              height: 24,
+              opacity: 0.5,
+            }}
+          />
+        </Box>
+      </Paper>
+    </Stack>
+  );
+}

package/src/pages/integrations/index.tsx

@@ -0,0 +1,80 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { Stack } from '@mui/material';
+import React, { useEffect } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import Tabs from '@arcblock/ux/lib/Tabs';
+
+import Layout from '../../components/layout/admin';
+import ProgressBar, { useTransitionContext } from '../../components/progress-bar';
+import { useSessionContext } from '../../contexts/session';
+
+const pages = {
+  overview: React.lazy(() => import('./overview')),
+  donations: React.lazy(() => import('./donations')),
+};
+
+function Integrations() {
+  const navigate = useNavigate();
+  const { t } = useLocaleContext();
+  const { group = 'overview' } = useParams();
+  const { isPending, startTransition } = useTransitionContext();
+
+  const onTabChange = (newTab: string) => {
+    startTransition(() => {
+      navigate(`/integrations/${newTab}`);
+    });
+  };
+
+  // @ts-ignore
+  const TabComponent = pages[group] || pages.overview;
+  const tabs = [
+    { label: t('common.quickStarts'), value: 'overview' },
+    { label: t('admin.donate.title'), value: 'donations' },
+  ];
+
+  return (
+    <>
+      <ProgressBar pending={isPending} />
+      <Stack direction="row" alignItems="center" justifyContent="end" flexWrap="wrap" spacing={1} sx={{ mt: 1, pb: 2 }}>
+        <Tabs
+          tabs={tabs}
+          current={group}
+          onChange={onTabChange}
+          scrollButtons="auto"
+          variant="scrollable"
+          sx={{
+            flex: '1 0 auto',
+            maxWidth: '100%',
+            '.MuiTab-root': {
+              marginBottom: '12px',
+              fontWeight: '500',
+              color: 'text.lighter',
+              '&.Mui-selected': {
+                color: 'text.primary',
+              },
+            },
+            '.MuiTouchRipple-root': {
+              display: 'none',
+            },
+          }}
+        />
+      </Stack>
+      <div className="page-content">{React.isValidElement(TabComponent) ? TabComponent : <TabComponent />}</div>
+    </>
+  );
+}
+
+export default function WrappedIntegrations() {
+  const { session } = useSessionContext();
+  const navigate = useNavigate();
+  useEffect(() => {
+    if (session.user && ['owner', 'admin'].includes(session.user.role) === false) {
+      navigate('/customer');
+    }
+  }, [session.user]);
+  return (
+    <Layout>
+      <Integrations />
+    </Layout>
+  );
+}