payment-kit 1.14.21 → 1.14.22

package/src/pages/admin/products/products/detail.tsx

@@ -2,15 +2,25 @@ import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
 import { api, formatError, formatTime, usePaymentContext } from '@blocklet/payment-react';
 import type { TPrice, TProduct, TProductExpanded } from '@blocklet/payment-types';
-import { ArrowBackOutlined, Edit } from '@mui/icons-material';
-import { Alert, AlertTitle, Box, Button, CircularProgress, Grid, Stack, Typography } from '@mui/material';
+import { ArrowBackOutlined } from '@mui/icons-material';
+import {
+  Alert,
+  AlertTitle,
+  Avatar,
+  Box,
+  Button,
+  CircularProgress,
+  Divider,
+  Grid,
+  Stack,
+  Typography,
+} from '@mui/material';
 import { styled } from '@mui/system';
 import { useRequest, useSetState } from 'ahooks';
 import { useNavigate } from 'react-router-dom';
 
 import Copyable from '../../../../components/copyable';
 import EventList from '../../../../components/event/list';
-import InfoCard from '../../../../components/info-card';
 import InfoMetric from '../../../../components/info-metric';
 import InfoRow from '../../../../components/info-row';
 import MetadataEditor from '../../../../components/metadata/editor';
@@ -27,6 +37,9 @@ const getProduct = (id: string): Promise<TProductExpanded> => {
   return api.get(`/api/products/${id}`).then((res) => res.data);
 };
 
+const InfoDirection = 'column';
+const InfoAlignItems = 'flex-start';
+
 export default function ProductDetail(props: { id: string }) {
   const { t, locale } = useLocaleContext();
   const navigate = useNavigate();
@@ -95,6 +108,9 @@ export default function ProductDetail(props: { id: string }) {
   };
 
   const isLocked = data.locked || data.prices.some((x) => x.locked);
+  const handleEditMetadata = () => {
+    setState((prev) => ({ editing: { ...prev.editing, metadata: true } }));
+  };
 
   return (
     <Root direction="column" spacing={4} sx={{ mb: 4 }}>
@@ -121,135 +137,262 @@ export default function ProductDetail(props: { id: string }) {
               {t('admin.products')}
             </Typography>
           </Stack>
-          <Copyable text={props.id} style={{ marginLeft: 4 }} />
+          <ProductActions data={data} onChange={onChange} variant="normal" />
         </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">
-            <InfoCard
-              logo={data.images[0]}
-              name={data.name}
-              // @ts-ignore
-              description={formatProductPrice(data, settings.baseCurrency, locale)}
-            />
-            <ProductActions data={data} onChange={onChange} variant="normal" />
+            <Stack direction="row" alignItems="center" spacing={1}>
+              <Avatar src={data.images[0]} alt={data.name} variant="square" sx={{ width: '52px', height: '52px' }} />
+              <Stack direction="column" alignItems="flex-start" justifyContent="space-around">
+                <Typography variant="h2" color="text.primary">
+                  {data.name}
+                </Typography>
+                <Typography variant="subtitle1" color="text.lighter">
+                  {formatProductPrice(data as any, settings.baseCurrency, locale)}
+                </Typography>
+              </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)} />
+            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.id')} value={<Copyable text={props.id} style={{ marginLeft: 4 }} />} divider />
           </Stack>
         </Box>
+        <Divider />
       </Box>
-      <Box className="section">
-        <SectionHeader title={t('admin.details')}>
-          <Button
-            variant="outlined"
-            color="inherit"
-            size="small"
-            onClick={() => setState((prev) => ({ editing: { ...prev.editing, product: true } }))}>
-            <Edit fontSize="small" sx={{ mr: 0.5 }} />
-            {t('common.edit')}
-          </Button>
-        </SectionHeader>
-        <Grid className="section-body" container>
-          <Grid item xs={12} md={6}>
-            <InfoRow label={t('admin.product.name.label')} value={data.name} />
-            <InfoRow label={t('admin.product.description.label')} value={data.description} />
-            <InfoRow label={t('admin.product.statement_descriptor.label')} value={data.statement_descriptor} />
-            <InfoRow label={t('admin.product.unit_label.label')} value={data.unit_label} />
-            <InfoRow label={t('admin.product.features.label')} value={data.features.map((x) => x.name).join(',')} />
-            <InfoRow label={t('common.createdAt')} value={formatTime(data.created_at)} />
-            <InfoRow label={t('common.updatedAt')} value={formatTime(data.updated_at)} />
-          </Grid>
-          <Grid item xs={12} md={6}>
-            <InfoRow
-              label={t('admin.product.image.label')}
-              value={
-                data.images.length ? (
-                  <img src={data.images[0]} width={160} height={160} alt={data.name} style={{ objectFit: 'cover' }} />
-                ) : (
-                  t('empty.image')
-                )
-              }
-            />
-          </Grid>
-          {state.editing.product && (
-            <EditProduct
-              product={data}
-              loading={state.loading.product}
-              onSave={onUpdateAll}
-              onCancel={() => setState((prev) => ({ editing: { ...prev.editing, product: false } }))}
-            />
-          )}
-        </Grid>
-      </Box>
-      <Box className="section">
-        <SectionHeader title={t('admin.product.pricing')}>
-          <Button
-            variant="outlined"
-            color="inherit"
-            size="small"
-            onClick={() => setState((prev) => ({ adding: { ...prev.adding, price: true } }))}>
-            <Edit fontSize="small" sx={{ mr: 0.5 }} />
-            {t('admin.price.add')}
-          </Button>
-        </SectionHeader>
-        <Box className="section-body">
-          <PricesList product={data as any} onChange={runAsync} />
-          {state.adding.price && (
-            <AddPrice
-              loading={state.loading.price}
-              onSave={onAddPrice}
-              onCancel={() => setState((prev) => ({ adding: { ...prev.adding, price: false } }))}
-            />
-          )}
-        </Box>
-      </Box>
-      <Box className="section">
-        <SectionHeader title={t('admin.product.cross_sell.title')} />
-        <Box className="section-body">
-          <ProductCrossSell data={data} onChange={runAsync} />
-        </Box>
-      </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">
-          <Grid container>
-            <Grid item xs={12} md={6}>
-              {!state.editing.metadata && <MetadataList data={data.metadata} />}
+
+      <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')}>
+              <Button
+                variant="text"
+                color="inherit"
+                size="small"
+                sx={{ color: 'text.link' }}
+                onClick={() => setState((prev) => ({ editing: { ...prev.editing, product: true } }))}>
+                {t('common.edit')}
+              </Button>
+            </SectionHeader>
+            <Grid className="section-body" container>
+              <Grid
+                item
+                xs={12}
+                sx={{
+                  display: 'grid',
+                  gridTemplateColumns: {
+                    xs: 'repeat(1, 1fr)',
+                    sm: 'repeat(1, 1fr)',
+                    md: 'repeat(2, 1fr)',
+                    lg: 'repeat(3, 1fr)',
+                  },
+                }}>
+                <InfoRow
+                  label={t('admin.product.name.label')}
+                  value={data.name}
+                  direction={InfoDirection}
+                  alignItems={InfoAlignItems}
+                />
+                <InfoRow
+                  label={t('admin.product.description.label')}
+                  value={data.description}
+                  direction={InfoDirection}
+                  alignItems={InfoAlignItems}
+                />
+                <InfoRow
+                  label={t('admin.product.statement_descriptor.label')}
+                  value={data.statement_descriptor}
+                  direction={InfoDirection}
+                  alignItems={InfoAlignItems}
+                />
+                <InfoRow
+                  label={t('admin.product.unit_label.label')}
+                  value={data.unit_label}
+                  direction={InfoDirection}
+                  alignItems={InfoAlignItems}
+                />
+                <InfoRow
+                  label={t('admin.product.features.label')}
+                  value={data.features.map((x) => x.name).join(',')}
+                  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('admin.product.image.label')}
+                  value={
+                    data.images.length ? (
+                      <img
+                        src={data.images[0]}
+                        width={160}
+                        height={160}
+                        alt={data.name}
+                        style={{ objectFit: 'cover' }}
+                      />
+                    ) : (
+                      t('empty.image')
+                    )
+                  }
+                  direction={InfoDirection}
+                  alignItems={InfoAlignItems}
+                />
+              </Grid>
+              {state.editing.product && (
+                <EditProduct
+                  product={data}
+                  loading={state.loading.product}
+                  onSave={onUpdateAll}
+                  onCancel={() => setState((prev) => ({ editing: { ...prev.editing, product: false } }))}
+                />
+              )}
             </Grid>
-          </Grid>
-          {state.editing.metadata && (
-            <MetadataEditor
-              data={data}
-              loading={state.loading.metadata}
-              onSave={onUpdateMetadata}
-              onCancel={() => setState((prev) => ({ editing: { ...prev.editing, metadata: false } }))}
-            />
-          )}
+          </Box>
+          <Divider />
+          <Box className="section">
+            <SectionHeader title={t('admin.product.pricing')}>
+              <Button
+                variant="text"
+                color="inherit"
+                size="small"
+                sx={{ color: 'text.link' }}
+                onClick={() => setState((prev) => ({ adding: { ...prev.adding, price: true } }))}>
+                {t('admin.price.add')}
+              </Button>
+            </SectionHeader>
+            <Box className="section-body">
+              <PricesList product={data as any} onChange={runAsync} />
+              {state.adding.price && (
+                <AddPrice
+                  loading={state.loading.price}
+                  onSave={onAddPrice}
+                  onCancel={() => setState((prev) => ({ adding: { ...prev.adding, price: false } }))}
+                />
+              )}
+            </Box>
+          </Box>
+          <Divider />
+          <Box className="section">
+            <SectionHeader title={t('admin.events')} />
+            <Box className="section-body">
+              <EventList
+                features={{ toolbar: false }}
+                object_id={[data.id, ...data.prices.map((x) => x.id)].join(',')}
+              />
+            </Box>
+          </Box>
         </Box>
-      </Box>
-      <Box className="section">
-        <SectionHeader title={t('admin.events')} />
-        <Box className="section-body">
-          <EventList features={{ toolbar: false }} object_id={[data.id, ...data.prices.map((x) => x.id)].join(',')} />
+        <Box className="payment-link-column-2" sx={{ gap: 3, display: 'flex', flexDirection: 'column' }}>
+          <Box className="section">
+            <SectionHeader title={t('admin.product.cross_sell.title')} />
+            <Box className="section-body">
+              <ProductCrossSell data={data} onChange={runAsync} />
+            </Box>
+          </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>
   );
 }

package/src/pages/admin/products/products/index.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { getDurableData } from '@arcblock/ux/lib/Datatable';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { Status, api, formatTime, usePaymentContext } from '@blocklet/payment-react';
+import { Status, api, formatTime, usePaymentContext, Table } from '@blocklet/payment-react';
 import type { TProductExpanded } from '@blocklet/payment-types';
 import { CircularProgress } from '@mui/material';
 import { useEffect, useState } from 'react';
@@ -11,7 +11,6 @@ import useBus from 'use-bus';
 import FilterToolbar from '../../../../components/filter-toolbar';
 import InfoCard from '../../../../components/info-card';
 import ProductActions from '../../../../components/product/actions';
-import Table from '../../../../components/table';
 import { formatProductPrice } from '../../../../libs/util';
 
 const fetchData = (params: Record<string, any> = {}): Promise<{ list: TProductExpanded[]; count: number }> => {

package/src/pages/admin/settings/index.tsx

@@ -1,6 +1,6 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Tabs from '@arcblock/ux/lib/Tabs';
-import { Stack, Typography } from '@mui/material';
+import { Box, Stack } from '@mui/material';
 import React, { isValidElement } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
@@ -41,13 +41,33 @@ export default function SettingsIndex() {
 
   return (
     <>
-      <Stack direction="row" alignItems="center" justifyContent="space-between">
-        <Typography variant="h5" sx={{ mb: 1, fontWeight: 600 }}>
-          {t('admin.settings')}
-        </Typography>
-        {extra}
+      <Stack direction="row" alignItems="flex-start" justifyContent="end" flexWrap="wrap" spacing={1}>
+        <Tabs
+          tabs={tabs}
+          current={page}
+          onChange={onTabChange}
+          scrollButtons="auto"
+          variant="scrollable"
+          sx={{
+            flex: '1 0 auto',
+            maxWidth: '100%',
+            '.MuiTab-root': {
+              color: 'text.lighter',
+            },
+            '.MuiTabs-indicator': {
+              display: 'none',
+            },
+            '.Mui-selected': {
+              fontSize: 24,
+              color: 'text.primary',
+            },
+            '.MuiTabs-hideScrollbar': {
+              border: 'none !important',
+            },
+          }}
+        />
+        <Box> {extra}</Box>
       </Stack>
-      <Tabs tabs={tabs} current={page} onChange={onTabChange} scrollButtons="auto" />
       {isValidElement(TabComponent) ? TabComponent : <TabComponent />}
     </>
   );