payment-kit 1.14.21 → 1.14.23

package/src/pages/admin/payments/payouts/detail.tsx

@@ -13,14 +13,13 @@ import {
   getPayoutStatusColor,
 } from '@blocklet/payment-react';
 import type { TPayoutExpanded } from '@blocklet/payment-types';
-import { ArrowBackOutlined, Edit, InfoOutlined } from '@mui/icons-material';
-import { Alert, Box, Button, CircularProgress, Stack, Tooltip, Typography } from '@mui/material';
+import { ArrowBackOutlined, InfoOutlined } from '@mui/icons-material';
+import { Alert, Avatar, Box, Button, CircularProgress, Divider, Stack, Tooltip, Typography } from '@mui/material';
 import { styled } from '@mui/system';
 import { useRequest, useSetState } from 'ahooks';
 import { Link } from 'react-router-dom';
 
 import Copyable from '../../../../components/copyable';
-import Currency from '../../../../components/currency';
 import CustomerLink from '../../../../components/customer/link';
 import EventList from '../../../../components/event/list';
 import InfoMetric from '../../../../components/info-metric';
@@ -34,6 +33,9 @@ const fetchData = (id: string): Promise<TPayoutExpanded> => {
   return api.get(`/api/payouts/${id}`).then((res) => res.data);
 };
 
+const InfoDirection = 'column';
+const InfoAlignItems = 'flex-start';
+
 export default function PayoutDetail(props: { id: string }) {
   const { t } = useLocaleContext();
   const [state, setState] = useSetState({
@@ -80,6 +82,10 @@ export default function PayoutDetail(props: { id: string }) {
   const currency = data.paymentCurrency;
   const total = [formatBNStr(data?.amount, currency.decimal), currency.symbol].join(' ');
 
+  const handleEditMetadata = () => {
+    setState((prev) => ({ editing: { ...prev.editing, metadata: true } }));
+  };
+
   return (
     <Root direction="column" spacing={4} mb={4}>
       <Box>
@@ -94,120 +100,247 @@ export default function PayoutDetail(props: { id: string }) {
               {t('admin.payouts')}
             </Typography>
           </Stack>
-          <Copyable text={props.id} style={{ marginLeft: 4 }} />
         </Stack>
-        <Box mt={2}>
+        <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">
-              <Amount amount={total} sx={{ my: 0, fontSize: '2rem', lineHeight: '1rem' }} />
-              <Status label={data.status} color={getPayoutStatusColor(data.status)} sx={{ ml: 2 }} />
+              <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' }} />
+                  <Copyable text={props.id} />
+                </Stack>
+              </Stack>
             </Stack>
           </Stack>
           <Stack
             className="section-body"
-            direction="row"
-            spacing={3}
             justifyContent="flex-start"
             flexWrap="wrap"
-            sx={{ pt: 2, mt: 2, borderTop: '1px solid #eee' }}>
-            <InfoMetric label={t('common.createdAt')} value={formatTime(data.created_at)} divider />
-            <InfoMetric label={t('common.updatedAt')} value={formatTime(data.updated_at)} divider />
+            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('common.createdAt')} value={formatTime(data.created_at)} divider /> */}
+            {/* <InfoMetric label={t('common.updatedAt')} value={formatTime(data.updated_at)} divider /> */}
           </Stack>
         </Box>
+        <Divider />
       </Box>
-      <Box className="section">
-        <SectionHeader title={t('admin.details')} />
-        <Stack>
-          <InfoRow label={t('common.amount')} value={total} />
-          <InfoRow
-            label={t('common.status')}
-            value={
-              <Stack direction="row" alignItems="center" spacing={1}>
-                <Status label={data.status} color={getPayoutStatusColor(data.status)} />
-                {data.last_attempt_error && (
-                  <Tooltip title={<pre>{JSON.stringify(data.last_attempt_error, null, 2)}</pre>}>
-                    <InfoOutlined fontSize="small" color="error" />
-                  </Tooltip>
-                )}
-              </Stack>
-            }
-          />
-          <InfoRow label={t('common.description')} value={data.description} />
-          <InfoRow label={t('common.createdAt')} value={formatTime(data.created_at)} />
-          <InfoRow label={t('common.updatedAt')} value={formatTime(data.updated_at)} />
-          <InfoRow
-            label={t('common.customer')}
-            value={data.customer ? <CustomerLink customer={data.customer} /> : data.destination}
-          />
-        </Stack>
-      </Box>
-      <Box className="section">
-        <SectionHeader title={t('admin.paymentMethod._name')} />
-        <Stack>
-          <InfoRow label={t('common.id')} value={data.paymentMethod.id} />
-          <InfoRow label={t('admin.paymentMethod.type')} value={data.paymentMethod.type} />
-          <InfoRow
-            label={t('admin.paymentCurrency.name')}
-            value={
-              <Currency
-                logo={data.paymentCurrency.logo}
-                name={`${data.paymentCurrency.symbol} (${data.paymentMethod.name})`}
+      <Stack
+        sx={{
+          flexDirection: {
+            xs: 'column',
+            lg: 'row',
+          },
+          gap: 4,
+          '.payment-link-column-1': {
+            minWidth: {
+              xs: '100%',
+              lg: '600px',
+            },
+          },
+          '.payment-link-column-2': {
+            width: {
+              xs: '100%',
+              md: '100%',
+              lg: '580px',
+            },
+            maxWidth: {
+              xs: '100%',
+              md: '33%',
+            },
+          },
+        }}>
+        <Box flex={1} className="payment-link-column-1" sx={{ gap: 4, display: 'flex', flexDirection: 'column' }}>
+          <Box className="section">
+            <SectionHeader title={t('admin.details')} />
+            <Stack
+              sx={{
+                display: 'grid',
+                gridTemplateColumns: {
+                  xs: 'repeat(1, 1fr)',
+                  sm: 'repeat(1, 1fr)',
+                  md: 'repeat(2, 1fr)',
+                  lg: 'repeat(3, 1fr)',
+                },
+              }}>
+              <InfoRow label={t('common.amount')} value={total} direction={InfoDirection} alignItems={InfoAlignItems} />
+              <InfoRow
+                label={t('common.status')}
+                value={
+                  <Stack direction="row" alignItems="center" spacing={1}>
+                    <Status label={data.status} color={getPayoutStatusColor(data.status)} />
+                    {data.last_attempt_error && (
+                      <Tooltip title={<pre>{JSON.stringify(data.last_attempt_error, null, 2)}</pre>}>
+                        <InfoOutlined fontSize="small" color="error" />
+                      </Tooltip>
+                    )}
+                  </Stack>
+                }
+                direction={InfoDirection}
+                alignItems={InfoAlignItems}
               />
-            }
-          />
-          {!!data.payment_details?.ethereum && (
-            <InfoRow
-              label={t('common.txGas')}
-              value={<TxGas details={data.payment_details as any} method={data.paymentMethod} />}
-            />
-          )}
-          <InfoRow
-            label={t(`common.${data.payment_details?.arcblock?.type || 'transfer'}TxHash`)}
-            value={<TxLink details={data.payment_details as any} method={data.paymentMethod} />}
-          />
-        </Stack>
-      </Box>
-      <Box className="section">
-        <SectionHeader title={t('common.metadata.label')}>
-          <Button
-            variant="outlined"
-            color="inherit"
-            size="small"
-            disabled={state.editing.metadata}
-            onClick={() => setState((prev) => ({ editing: { ...prev.editing, metadata: true } }))}>
-            <Edit fontSize="small" sx={{ mr: 0.5 }} />
-            {t('common.metadata.edit')}
-          </Button>
-        </SectionHeader>
-        <Box className="section-body">
-          {!state.editing.metadata && <MetadataList data={data.metadata} />}
-          {state.editing.metadata && (
-            <MetadataEditor
-              data={data}
-              loading={state.loading.metadata}
-              onSave={onUpdateMetadata}
-              onCancel={() => setState((prev) => ({ editing: { ...prev.editing, metadata: false } }))}
-            />
-          )}
+              <InfoRow
+                label={t('common.description')}
+                value={data.description}
+                direction={InfoDirection}
+                alignItems={InfoAlignItems}
+              />
+              <InfoRow
+                label={t('common.createdAt')}
+                value={formatTime(data.created_at)}
+                direction={InfoDirection}
+                alignItems={InfoAlignItems}
+              />
+              <InfoRow
+                label={t('common.updatedAt')}
+                value={formatTime(data.updated_at)}
+                direction={InfoDirection}
+                alignItems={InfoAlignItems}
+              />
+              <InfoRow
+                label={t('common.customer')}
+                value={data.customer ? <CustomerLink customer={data.customer} /> : data.destination}
+                direction={InfoDirection}
+                alignItems={InfoAlignItems}
+              />
+            </Stack>
+          </Box>
+          <Divider />
+          <Box className="section">
+            <SectionHeader title={t('admin.events')} />
+            <Box className="section-body">
+              <EventList features={{ toolbar: false }} object_id={data.id} />
+            </Box>
+          </Box>
         </Box>
-      </Box>
-      <Box className="section">
-        <SectionHeader title={t('admin.connections')} />
-        <Stack>
-          {data.payment_intent_id && (
-            <InfoRow
-              label={t('admin.paymentIntent.name')}
-              value={<Link to={`/admin/payments/${data.paymentIntent.id}`}>{data.paymentIntent.id}</Link>}
-            />
-          )}
-        </Stack>
-      </Box>
-      <Box className="section">
-        <SectionHeader title={t('admin.events')} />
-        <Box className="section-body">
-          <EventList features={{ toolbar: false }} object_id={data.id} />
+        <Box className="payment-link-column-2" sx={{ gap: 3, display: 'flex', flexDirection: 'column' }}>
+          <Box className="section">
+            <SectionHeader title={t('admin.paymentMethod._name')} />
+            <Stack>
+              <InfoRow
+                label={t('common.id')}
+                value={data.paymentMethod?.id}
+                direction={InfoDirection}
+                alignItems={InfoAlignItems}
+              />
+              <InfoRow
+                label={t('admin.paymentMethod.type')}
+                value={data.paymentMethod?.type}
+                direction={InfoDirection}
+                alignItems={InfoAlignItems}
+              />
+              <InfoRow
+                label={t('admin.paymentCurrency.name')}
+                value={`${data.paymentCurrency.symbol} (${data.paymentMethod?.name})`}
+                direction={InfoDirection}
+                alignItems={InfoAlignItems}
+              />
+              {!!data.payment_details?.ethereum && (
+                <InfoRow
+                  label={t('common.txGas')}
+                  value={<TxGas details={data.payment_details as any} method={data.paymentMethod} />}
+                  direction={InfoDirection}
+                  alignItems={InfoAlignItems}
+                />
+              )}
+              <InfoRow
+                label={t(`common.${data.payment_details?.arcblock?.type || 'transfer'}TxHash`)}
+                value={<TxLink details={data.payment_details as any} method={data.paymentMethod} />}
+                direction={InfoDirection}
+                alignItems={InfoAlignItems}
+              />
+            </Stack>
+          </Box>
+          <Divider />
+          <Box className="section">
+            <SectionHeader title={t('admin.connections')} />
+            <Stack>
+              {data.payment_intent_id && (
+                <InfoRow
+                  label={t('admin.paymentIntent.name')}
+                  value={<Link to={`/admin/payments/${data.paymentIntent.id}`}>{data.paymentIntent.id}</Link>}
+                  direction={InfoDirection}
+                  alignItems={InfoAlignItems}
+                />
+              )}
+            </Stack>
+          </Box>
+          <Divider />
+          <Box className="section">
+            <SectionHeader title={t('common.metadata.label')}>
+              <Button
+                variant="text"
+                color="inherit"
+                size="small"
+                sx={{ color: 'text.link' }}
+                disabled={state.editing.metadata}
+                onClick={handleEditMetadata}>
+                {t('common.edit')}
+              </Button>
+            </SectionHeader>
+            <Box className="section-body">
+              <MetadataList data={data.metadata} handleEditMetadata={handleEditMetadata} />
+              {state.editing.metadata && (
+                <MetadataEditor
+                  data={data}
+                  loading={state.loading.metadata}
+                  onSave={onUpdateMetadata}
+                  onCancel={() => setState((prev) => ({ editing: { ...prev.editing, metadata: false } }))}
+                />
+              )}
+            </Box>
+          </Box>
         </Box>
-      </Box>
+      </Stack>
     </Root>
   );
 }