payment-kit 1.18.3 → 1.18.4

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

package/src/pages/integrations/overview.tsx

@@ -0,0 +1,121 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { Box, Card, CardActionArea, CardContent, Grid, Typography, Divider } from '@mui/material';
+import { useNavigate } from 'react-router-dom';
+import { Favorite, Inventory, Link as LinkIcon, TableChart, Payment, Code } from '@mui/icons-material';
+
+const basicFeatures = [
+  {
+    title: 'integrations.features.products.title',
+    description: 'integrations.features.products.intro',
+    icon: <Inventory color="primary" sx={{ fontSize: 40 }} />,
+    path: '/admin/products',
+  },
+  {
+    title: 'integrations.features.paymentLinks.title',
+    description: 'integrations.features.paymentLinks.intro',
+    icon: <LinkIcon color="primary" sx={{ fontSize: 40 }} />,
+    path: '/admin/products/links',
+  },
+  {
+    title: 'integrations.features.pricingTables.title',
+    description: 'integrations.features.pricingTables.intro',
+    icon: <TableChart color="primary" sx={{ fontSize: 40 }} />,
+    path: '/admin/products/pricing-tables',
+  },
+];
+
+const advancedFeatures = [
+  {
+    title: 'integrations.features.donate.title',
+    description: 'integrations.features.donate.intro',
+    icon: <Favorite color="primary" sx={{ fontSize: 40 }} />,
+    path: '/integrations/donations',
+  },
+  {
+    title: 'integrations.features.paymentMethods.title',
+    description: 'integrations.features.paymentMethods.intro',
+    icon: <Payment color="primary" sx={{ fontSize: 40 }} />,
+    path: '/admin/settings/payment-methods',
+  },
+  {
+    title: 'integrations.features.api.title',
+    description: 'integrations.features.api.intro',
+    icon: <Code color="primary" sx={{ fontSize: 40 }} />,
+    path: 'https://www.npmjs.com/package/@blocklet/payment-js',
+    external: true,
+  },
+];
+
+export default function Overview() {
+  const { t } = useLocaleContext();
+  const navigate = useNavigate();
+
+  const handleClick = (item: any) => {
+    if (item.external) {
+      window.open(item.path, '_blank');
+    } else {
+      navigate(item.path);
+    }
+  };
+
+  return (
+    <Box>
+      <Box mb={4}>
+        <Typography variant="h2" gutterBottom fontWeight="bold" mb={2}>
+          {t('common.welcome')}
+        </Typography>
+        <Typography variant="body1" color="text.secondary" mb={2}>
+          {t('common.welcomeDesc')}
+        </Typography>
+      </Box>
+
+      <Typography variant="h5" gutterBottom>
+        {t('integrations.basicFeatures')} 🚀
+      </Typography>
+      <Grid container spacing={3} mb={4}>
+        {basicFeatures.map((item) => (
+          <Grid item xs={12} sm={6} md={4} key={item.path}>
+            <Card sx={{ height: '100%' }}>
+              <CardActionArea onClick={() => handleClick(item)} sx={{ height: '100%' }}>
+                <CardContent>
+                  <Box display="flex" alignItems="center" gap={2} mb={2}>
+                    {item.icon}
+                    <Typography variant="h6">{t(item.title)}</Typography>
+                  </Box>
+                  <Typography variant="body2" color="text.secondary">
+                    {t(item.description)}
+                  </Typography>
+                </CardContent>
+              </CardActionArea>
+            </Card>
+          </Grid>
+        ))}
+      </Grid>
+
+      <Divider sx={{ my: 4 }} />
+
+      <Typography variant="h5" gutterBottom>
+        {t('integrations.advancedFeatures')} 🔥
+      </Typography>
+      <Grid container spacing={3}>
+        {advancedFeatures.map((item) => (
+          <Grid item xs={12} sm={6} md={4} key={item.path}>
+            <Card sx={{ height: '100%' }}>
+              <CardActionArea onClick={() => handleClick(item)} sx={{ height: '100%' }}>
+                <CardContent>
+                  <Box display="flex" alignItems="center" gap={2} mb={2}>
+                    {item.icon}
+                    <Typography variant="h6">{t(item.title)}</Typography>
+                  </Box>
+                  <Typography variant="body2" color="text.secondary">
+                    {t(item.description)}
+                  </Typography>
+                </CardContent>
+              </CardActionArea>
+            </Card>
+          </Grid>
+        ))}
+      </Grid>
+    </Box>
+  );
+}