payment-kit 1.18.0 → 1.18.2

package/src/pages/customer/payout/detail.tsx

@@ -0,0 +1,264 @@
+/* eslint-disable react/no-unstable-nested-components */
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import {
+  Amount,
+  Status,
+  TxLink,
+  api,
+  formatBNStr,
+  formatTime,
+  getCustomerAvatar,
+  getPayoutStatusColor,
+} from '@blocklet/payment-react';
+import type { TCustomer, TPaymentLink, TPayoutExpanded } from '@blocklet/payment-types';
+import { ArrowBackOutlined } from '@mui/icons-material';
+import { Alert, Avatar, Box, Button, CircularProgress, Divider, Stack, Typography } from '@mui/material';
+import { styled } from '@mui/system';
+import { useRequest } from 'ahooks';
+
+import { useParams } from 'react-router-dom';
+import DID from '@arcblock/ux/lib/DID';
+import InfoMetric from '../../../components/info-metric';
+import InfoRow from '../../../components/info-row';
+import SectionHeader from '../../../components/section/header';
+import { getCustomerProfileUrl, goBackOrFallback } from '../../../libs/util';
+import CustomerLink from '../../../components/customer/link';
+import InfoCard from '../../../components/info-card';
+
+const fetchData = (
+  id: string
+): Promise<
+  TPayoutExpanded & {
+    paymentIntent?: { customer: TCustomer };
+    paymentLink: TPaymentLink;
+  }
+> => {
+  return api.get(`/api/payouts/${id}`).then((res) => res.data);
+};
+
+const InfoDirection = 'column';
+const InfoAlignItems = 'flex-start';
+
+export default function PayoutDetail() {
+  const { t } = useLocaleContext();
+  const params = useParams<{ id: string }>();
+  const { loading, error, data } = useRequest(() => fetchData(params.id!), {
+    ready: !!params.id,
+  });
+
+  if (error) {
+    return <Alert severity="error">{error.message}</Alert>;
+  }
+
+  if (loading || !data) {
+    return <CircularProgress />;
+  }
+
+  const currency = data.paymentCurrency;
+  const total = [formatBNStr(data?.amount, currency.decimal), currency.symbol].join(' ');
+  const { paymentIntent, paymentLink } = data || {};
+  return (
+    <Root direction="column" spacing={2.5} mb={4}>
+      <Box>
+        <Stack className="page-header" direction="row" justifyContent="space-between" alignItems="center" mt={2}>
+          <Stack
+            direction="row"
+            alignItems="center"
+            sx={{ fontWeight: 'normal', cursor: 'pointer' }}
+            onClick={() => goBackOrFallback('/customer/payouts')}>
+            <ArrowBackOutlined fontSize="small" sx={{ mr: 0.5, color: 'text.secondary' }} />
+            <Typography variant="h6" sx={{ color: 'text.secondary', fontWeight: 'normal' }}>
+              {t('common.previous')}
+            </Typography>
+          </Stack>
+          {paymentLink?.donation_settings?.reference && (
+            <Button
+              variant="outlined"
+              onClick={() => {
+                window.open(paymentLink?.donation_settings?.reference, '_blank');
+              }}>
+              {t('customer.payout.viewReference')}
+            </Button>
+          )}
+        </Stack>
+        <Box
+          mt={4}
+          mb={3}
+          sx={{
+            display: 'flex',
+            gap: {
+              xs: 2,
+              sm: 2,
+              md: 5,
+            },
+            flexWrap: 'wrap',
+            flexDirection: {
+              xs: 'column',
+              sm: 'column',
+              md: 'row',
+            },
+            alignItems: {
+              xs: 'flex-start',
+              sm: 'flex-start',
+              md: 'center',
+            },
+          }}>
+          <Stack direction="row" justifyContent="space-between" alignItems="center">
+            <Stack direction="row" alignItems="center">
+              <Stack direction="row" alignItems="center" spacing={1}>
+                <Avatar
+                  src={data.paymentCurrency.logo}
+                  alt={data.paymentCurrency.symbol}
+                  variant="square"
+                  sx={{ width: '52px', height: '52px', borderRadius: 'var(--radius-s, 4px)' }}
+                />
+                <Stack direction="column" alignItems="flex-start" justifyContent="space-around">
+                  <Amount amount={total} sx={{ my: 0, fontSize: '2rem', lineHeight: '32px' }} />
+                </Stack>
+              </Stack>
+            </Stack>
+          </Stack>
+          <Stack
+            className="section-body"
+            justifyContent="flex-start"
+            flexWrap="wrap"
+            sx={{
+              'hr.MuiDivider-root:last-child': {
+                display: 'none',
+              },
+              flexDirection: {
+                xs: 'column',
+                sm: 'column',
+                md: 'row',
+              },
+              alignItems: {
+                xs: 'flex-start',
+                sm: 'flex-start',
+                md: 'center',
+              },
+              gap: {
+                xs: 1,
+                sm: 1,
+                md: 3,
+              },
+            }}>
+            <InfoMetric
+              label={t('common.status')}
+              value={<Status label={data.status} color={getPayoutStatusColor(data.status)} />}
+              divider
+            />
+            <InfoMetric
+              label={t('customer.payout.payer')}
+              value={
+                <InfoCard
+                  logo={getCustomerAvatar(
+                    paymentIntent?.customer?.did,
+                    paymentIntent?.customer?.updated_at
+                      ? new Date(paymentIntent?.customer?.updated_at).toISOString()
+                      : '',
+                    48
+                  )}
+                  name={
+                    <Typography
+                      variant="subtitle2"
+                      sx={{
+                        cursor: 'pointer',
+                        '&:hover': {
+                          color: 'text.link',
+                        },
+                      }}
+                      onClick={() => {
+                        const url = getCustomerProfileUrl({
+                          userDid: paymentIntent?.customer?.did,
+                          locale: 'zh',
+                        });
+                        window.open(url, '_blank');
+                      }}>
+                      {paymentIntent?.customer?.name} ({paymentIntent?.customer?.email})
+                    </Typography>
+                  }
+                  description={<DID did={paymentIntent?.customer?.did} />}
+                  size={40}
+                  variant="rounded"
+                />
+              }
+              divider
+            />
+          </Stack>
+        </Box>
+        <Divider />
+      </Box>
+      <Stack
+        sx={{
+          flexDirection: {
+            xs: 'column',
+            lg: 'row',
+          },
+          gap: {
+            xs: 2.5,
+            md: 4,
+          },
+          '.payment-link-column-1': {
+            minWidth: {
+              xs: '100%',
+              lg: '600px',
+            },
+          },
+          '.payment-link-column-2': {
+            width: {
+              xs: '100%',
+              md: '100%',
+              lg: '320px',
+            },
+            maxWidth: {
+              xs: '100%',
+              md: '33%',
+            },
+          },
+        }}>
+        <Box flex={1} className="payment-link-column-1" sx={{ gap: 2.5, display: 'flex', flexDirection: 'column' }}>
+          <Box className="section">
+            <SectionHeader title={t('common.detail')} />
+            <Stack
+              sx={{
+                display: 'grid',
+                gridTemplateColumns: {
+                  xs: 'repeat(1, 1fr)',
+                  sm: 'repeat(1, 1fr)',
+                  md: 'repeat(2, 1fr)',
+                  lg: 'repeat(3, 1fr)',
+                },
+                gap: {
+                  xs: 0,
+                  md: 2,
+                },
+              }}>
+              <InfoRow
+                label={t('common.createdAt')}
+                value={formatTime(data.created_at)}
+                direction={InfoDirection}
+                alignItems={InfoAlignItems}
+              />
+              {paymentIntent && paymentIntent.payment_details && (
+                <InfoRow
+                  label={t('customer.payout.payTxHash')}
+                  value={<TxLink details={paymentIntent.payment_details} method={data.paymentMethod} mode="customer" />}
+                  direction={InfoDirection}
+                  alignItems={InfoAlignItems}
+                />
+              )}
+              <InfoRow
+                label={t('customer.payout.receiver')}
+                value={<CustomerLink customer={data.customer} linked={false} />}
+                direction={InfoDirection}
+                alignItems={InfoAlignItems}
+              />
+            </Stack>
+          </Box>
+        </Box>
+      </Stack>
+    </Root>
+  );
+}
+
+const Root = styled(Stack)``;

package/src/pages/customer/recharge.tsx

@@ -366,7 +366,7 @@ export default function RechargePage() {
                           boxShadow: 3,
                         },
                         ...(amount === presetAmount && !customAmount
-                          ? { borderColor: 'primary.main', borderWidth: 2 }
+                          ? { borderColor: 'primary.main', borderWidth: 1 }
                           : {}),
                       }}>
                       <CardActionArea onClick={() => handleSelect(presetAmount)} sx={{ height: '100%' }}>
@@ -401,7 +401,7 @@ export default function RechargePage() {
                         transform: 'translateY(-4px)',
                         boxShadow: 3,
                       },
-                      ...(customAmount ? { borderColor: 'primary.main', borderWidth: 2 } : {}),
+                      ...(customAmount ? { borderColor: 'primary.main', borderWidth: 1 } : {}),
                     }}>
                     <CardActionArea onClick={handleCustomSelect} sx={{ height: '100%' }}>
                       <Stack direction="column" sx={{ p: 1 }} spacing={1} alignItems="center" justifyContent="center">

package/vite.config.ts

@@ -57,6 +57,7 @@ export default defineConfig(({ mode }) => {
         mainFields: ['module', 'main'],
         resolveExtensions: ['.ts', '.tsx', '.js', '.jsx'],
       },
+      exclude: mode === 'development' ? ['@blocklet/payment-react', '@blocklet/payment-js'] : [],
     },
     ...(mode === 'development' && {
       resolve: {