payment-kit 1.14.21 → 1.14.22

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

@@ -1,10 +1,10 @@
 /* eslint-disable react/no-unstable-nested-components */
 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 { api, formatError, formatTime, usePaymentContext, Table } from '@blocklet/payment-react';
 import type { TLineItemExpanded, TPaymentLinkExpanded, TPrice, TProduct } from '@blocklet/payment-types';
-import { ArrowBackOutlined, Edit } from '@mui/icons-material';
-import { Alert, Box, Button, CircularProgress, Grid, Stack, Typography } from '@mui/material';
+import { ArrowBackOutlined } from '@mui/icons-material';
+import { Alert, Box, Button, CircularProgress, Divider, Grid, Stack, Typography } from '@mui/material';
 import { styled } from '@mui/system';
 import { useRequest, useSetState } from 'ahooks';
 import { Link, useNavigate } from 'react-router-dom';
@@ -20,13 +20,16 @@ import PaymentLinkActions from '../../../../components/payment-link/actions';
 import PaymentLinkPreview from '../../../../components/payment-link/preview';
 import AddPrice from '../../../../components/product/add-price';
 import SectionHeader from '../../../../components/section/header';
-import Table from '../../../../components/table';
 import { formatPaymentLinkPricing, formatProductPrice, goBackOrFallback } from '../../../../libs/util';
+import InfoMetric from '../../../../components/info-metric';
 
 const fetchData = (id: string): Promise<TPaymentLinkExpanded> => {
   return api.get(`/api/payment-links/${id}`).then((res) => res.data);
 };
 
+const InfoDirection = 'column';
+const InfoAlignItems = 'flex-start';
+
 export default function PaymentLinkDetail(props: { id: string }) {
   const { t, locale } = useLocaleContext();
   const navigate = useNavigate();
@@ -93,11 +96,15 @@ export default function PaymentLinkDetail(props: { id: string }) {
     }
   };
 
-  const result = formatPaymentLinkPricing(data, settings.baseCurrency);
+  const result = formatPaymentLinkPricing(data, settings.baseCurrency, locale);
+
+  const handleEditMetadata = () => {
+    setState((prev) => ({ editing: { ...prev.editing, metadata: true } }));
+  };
 
   return (
     <Grid container spacing={4} sx={{ mb: 4 }}>
-      <Grid item md={12}>
+      <Grid item xs={12}>
         <Stack className="page-header" direction="row" justifyContent="space-between" alignItems="center">
           <Stack
             direction="row"
@@ -109,193 +116,290 @@ export default function PaymentLinkDetail(props: { id: string }) {
               {t('admin.paymentLinks')}
             </Typography>
           </Stack>
-          <Copyable text={props.id} style={{ marginLeft: 4 }} />
+          <PaymentLinkActions 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">
-            <Stack direction="column" alignItems="flex-start">
-              <Stack direction="row" alignItems="center" mb={1}>
-                <Typography variant="h5" sx={{ color: 'text.primary', fontWeight: 600 }}>
-                  {data.name}
-                </Typography>
-                <Typography sx={{ mx: 1, color: 'text.secondary' }}>for</Typography>
-                <Typography variant="h6" sx={{ color: 'text.primary', fontWeight: 500 }}>
-                  {[result.amount, result.then].filter(Boolean).join(', ')}
-                </Typography>
-              </Stack>
+            <Stack gap={1}>
+              <Typography variant="h1">{data.name}</Typography>
               <Copyable text={joinURL(window.blocklet.appUrl, window.blocklet.prefix, `/checkout/pay/${data.id}`)}>
-                <Typography variant="h6" sx={{ color: 'text.secondary', mr: 1 }}>
+                <Typography
+                  variant="h6"
+                  sx={{
+                    color: 'text.secondary',
+                    mr: 1,
+                    maxWidth: '80%',
+                    textOverflow: 'ellipsis',
+                    overflow: 'hidden',
+                  }}>
                   {joinURL(window.blocklet.prefix, `/checkout/pay/${data.id}`)}
                 </Typography>
               </Copyable>
             </Stack>
-            <PaymentLinkActions data={data} onChange={onChange} variant="normal" />
+          </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.price')} value={result.priceDisplay} divider />
+            <InfoMetric label={t('common.id')} value={<Copyable text={props.id} style={{ marginLeft: 4 }} />} divider />
           </Stack>
         </Box>
+        <Divider />
       </Grid>
-      <Grid item xs={12} md={5}>
-        <Div direction="column" spacing={4}>
-          <Box className="section">
-            <SectionHeader title={t('admin.products')} />
-            <Box className="section-body">
-              <Table
-                className="link-products-table"
-                toolbar={false}
-                footer={false}
-                locale={locale}
-                data={data.line_items}
-                columns={[
-                  {
-                    label: t('common.title'),
-                    name: 'name',
-                    options: {
-                      sort: false,
-                      customBodyRenderLite: (_: any, index: number) => {
-                        const item = data.line_items[index] as TLineItemExpanded;
-                        return (
-                          <Link to={`/admin/products/${item.price.product_id}`}>
-                            <InfoCard
-                              name={item.price.product.name}
-                              description={formatProductPrice(
-                                // @ts-ignore
-                                { ...item.price.product, prices: [item.price] },
-                                settings.baseCurrency,
-                                locale
-                              )}
-                              logo={item.price.product.images[0]}
-                            />
-                          </Link>
-                        );
+      <Grid item xs={12}>
+        <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">
+            <Div direction="column" spacing={3}>
+              <Box className="section">
+                <SectionHeader title={t('admin.products')} />
+                <Box className="section-body">
+                  <Table
+                    className="link-products-table"
+                    toolbar={false}
+                    footer={false}
+                    locale={locale}
+                    data={data.line_items}
+                    columns={[
+                      {
+                        label: t('common.title'),
+                        name: 'name',
+                        options: {
+                          sort: false,
+                          customBodyRenderLite: (_: any, index: number) => {
+                            const item = data.line_items[index] as TLineItemExpanded;
+                            return (
+                              <Link to={`/admin/products/${item.price.product_id}`}>
+                                <InfoCard
+                                  name={item.price.product.name}
+                                  description={formatProductPrice(
+                                    // @ts-ignore
+                                    { ...item.price.product, prices: [item.price] },
+                                    settings.baseCurrency,
+                                    locale
+                                  )}
+                                  logo={item.price.product.images[0]}
+                                />
+                              </Link>
+                            );
+                          },
+                        },
                       },
-                    },
-                  },
-                  {
-                    label: t('common.quantity'),
-                    name: 'quantity',
-                  },
-                  {
-                    label: t('admin.paymentLink.adjustable'),
-                    name: 'price_id',
-                    options: {
-                      customBodyRenderLite: (_: any, index: number) => {
-                        const item = data.line_items[index];
-                        if (item?.adjustable_quantity?.enabled) {
-                          return `${t('common.yes')} (${item.adjustable_quantity.minimum} - ${
-                            item.adjustable_quantity.maximum
-                          })`;
-                        }
+                      {
+                        label: t('common.quantity'),
+                        name: 'quantity',
+                      },
+                      {
+                        label: t('admin.paymentLink.adjustable'),
+                        name: 'price_id',
+                        options: {
+                          customBodyRenderLite: (_: any, index: number) => {
+                            const item = data.line_items[index];
+                            if (item?.adjustable_quantity?.enabled) {
+                              return `${t('common.yes')} (${item.adjustable_quantity.minimum} - ${
+                                item.adjustable_quantity.maximum
+                              })`;
+                            }
 
-                        return t('common.no');
+                            return t('common.no');
+                          },
+                        },
                       },
+                    ]}
+                    options={{
+                      count: data.line_items.length,
+                      page: 0,
+                      rowsPerPage: 20,
+                    }}
+                  />
+                  {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.details')} />
+                <Stack
+                  sx={{
+                    display: 'grid',
+                    gridTemplateColumns: {
+                      xs: 'repeat(1, 1fr)',
+                      sm: 'repeat(1, 1fr)',
+                      md: 'repeat(2, 1fr)',
+                      lg: 'repeat(3, 1fr)',
                     },
-                  },
-                ]}
-                options={{
-                  count: data.line_items.length,
-                  page: 0,
-                  rowsPerPage: 20,
-                }}
-              />
-              {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.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>
-            <Stack>
-              <InfoRow
-                sizes={[1, 1]}
-                label={t('admin.paymentLink.allowPromotionCodes')}
-                value={data.allow_promotion_codes ? t('common.yes') : t('common.no')}
-              />
-              <InfoRow
-                sizes={[1, 1]}
-                label={t('admin.paymentLink.requireBillingAddress')}
-                value={data.billing_address_collection ? t('common.yes') : t('common.no')}
-              />
-              <InfoRow
-                sizes={[1, 1]}
-                label={t('admin.paymentLink.requirePhoneNumber')}
-                value={data.phone_number_collection?.enabled ? t('common.yes') : t('common.no')}
-              />
-              <InfoRow
-                sizes={[1, 1]}
-                label={t('admin.paymentLink.includeFreeTrial')}
-                value={data.subscription_data?.trial_period_days ? t('common.yes') : t('common.no')}
-              />
-              <InfoRow
-                sizes={[1, 1]}
-                label={t('admin.paymentLink.showConfirmPage')}
-                value={data.after_completion?.type}
-              />
-              <InfoRow
-                sizes={[1, 1]}
-                label={t('admin.paymentLink.mintNft')}
-                value={data.nft_mint_settings?.factory || ''}
-              />
-              <InfoRow sizes={[1, 1]} label={t('common.createdAt')} value={formatTime(data.created_at)} />
-              <InfoRow sizes={[1, 1]} label={t('common.updatedAt')} value={formatTime(data.updated_at)} />
-            </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">
-              <Grid container>
-                <Grid item xs={12} md={6}>
-                  {!state.editing.metadata && <MetadataList data={data.metadata} />}
-                </Grid>
-              </Grid>
-              {state.editing.metadata && (
-                <MetadataEditor
-                  data={data}
-                  loading={state.loading.metadata}
-                  onSave={onUpdateMetadata}
-                  onCancel={() => setState((prev) => ({ editing: { ...prev.editing, metadata: false } }))}
-                />
-              )}
-            </Box>
+                  }}>
+                  <InfoRow
+                    sizes={[1, 1]}
+                    label={t('admin.paymentLink.allowPromotionCodes')}
+                    value={data.allow_promotion_codes ? t('common.yes') : t('common.no')}
+                    direction={InfoDirection}
+                    alignItems={InfoAlignItems}
+                  />
+                  <InfoRow
+                    sizes={[1, 1]}
+                    label={t('admin.paymentLink.requireBillingAddress')}
+                    value={data.billing_address_collection ? t('common.yes') : t('common.no')}
+                    direction={InfoDirection}
+                    alignItems={InfoAlignItems}
+                  />
+                  <InfoRow
+                    sizes={[1, 1]}
+                    label={t('admin.paymentLink.requirePhoneNumber')}
+                    value={data.phone_number_collection?.enabled ? t('common.yes') : t('common.no')}
+                    direction={InfoDirection}
+                    alignItems={InfoAlignItems}
+                  />
+                  <InfoRow
+                    sizes={[1, 1]}
+                    label={t('admin.paymentLink.includeFreeTrial')}
+                    value={data.subscription_data?.trial_period_days ? t('common.yes') : t('common.no')}
+                    direction={InfoDirection}
+                    alignItems={InfoAlignItems}
+                  />
+                  <InfoRow
+                    sizes={[1, 1]}
+                    label={t('admin.paymentLink.showConfirmPage')}
+                    value={data.after_completion?.type}
+                    direction={InfoDirection}
+                    alignItems={InfoAlignItems}
+                  />
+                  <InfoRow
+                    sizes={[1, 1]}
+                    label={t('admin.paymentLink.mintNft')}
+                    value={data.nft_mint_settings?.factory || ''}
+                    direction={InfoDirection}
+                    alignItems={InfoAlignItems}
+                  />
+                  <InfoRow
+                    sizes={[1, 1]}
+                    label={t('common.createdAt')}
+                    value={formatTime(data.created_at)}
+                    direction={InfoDirection}
+                    alignItems={InfoAlignItems}
+                  />
+                  <InfoRow
+                    sizes={[1, 1]}
+                    label={t('common.updatedAt')}
+                    value={formatTime(data.updated_at)}
+                    direction={InfoDirection}
+                    alignItems={InfoAlignItems}
+                  />
+                </Stack>
+              </Box>
+              <Divider />
+              <Box className="section">
+                <SectionHeader title={t('common.preview')} />
+                <Box className="section-body" sx={{ maxWidth: 1050 }}>
+                  <PaymentLinkPreview id={data.id} />
+                </Box>
+              </Box>
+              <Divider />
+              <Box className="section">
+                <SectionHeader title={t('admin.events')} />
+                <Box className="section-body">
+                  <EventList features={{ toolbar: false }} object_id={data.id} />
+                </Box>
+              </Box>
+            </Div>
           </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">
+            <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>
-        </Div>
-      </Grid>
-      <Grid item xs={12} md={7}>
-        <Div>
-          <Box className="section">
-            <SectionHeader title={t('common.preview')} />
-            <Box className="section-body">
-              <PaymentLinkPreview id={data.id} />
-            </Box>
-          </Box>
-        </Div>
+        </Stack>
       </Grid>
     </Grid>
   );

package/src/pages/admin/products/links/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 { TPaymentLinkExpanded } from '@blocklet/payment-types';
 import { Alert, CircularProgress, ToggleButton, ToggleButtonGroup, Typography } from '@mui/material';
 import { useRequest } from 'ahooks';
@@ -12,7 +12,6 @@ import useBus from 'use-bus';
 
 import Copyable from '../../../../components/copyable';
 import PaymentLinkActions from '../../../../components/payment-link/actions';
-import Table from '../../../../components/table';
 import { ProductsProvider } from '../../../../contexts/products';
 import { formatPaymentLinkPricing } from '../../../../libs/util';
 
@@ -26,7 +25,7 @@ const fetchData = (params: Record<string, any> = {}): Promise<{ list: TPaymentLi
 
 function PaymentLinks() {
   const listKey = 'payment-links';
-  const { t } = useLocaleContext();
+  const { t, locale } = useLocaleContext();
   const { settings } = usePaymentContext();
 
   const persisted = getDurableData(listKey);
@@ -98,10 +97,8 @@ function PaymentLinks() {
         sort: false,
         customBodyRenderLite: (_: string, index: number) => {
           const item = data.list[index] as TPaymentLinkExpanded;
-          const result = formatPaymentLinkPricing(item, settings.baseCurrency);
-          return (
-            <Link to={`/admin/products/${item.id}`}>{[result.amount, result.then].filter(Boolean).join(', ')}</Link>
-          );
+          const result = formatPaymentLinkPricing(item, settings.baseCurrency, locale);
+          return <Link to={`/admin/products/${item.id}`}>{result.priceDisplay}</Link>;
         },
       },
     },

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

@@ -1,12 +1,11 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { api } from '@blocklet/payment-react';
+import { api, Table } from '@blocklet/payment-react';
 import { Alert, CircularProgress, Typography } from '@mui/material';
 import { useRequest } from 'ahooks';
 import { Link } from 'react-router-dom';
 
 import PassportActions from '../../../../components/passport/actions';
-import Table from '../../../../components/table';
 
 const fetchData = (params: Record<string, any> = {}): Promise<any[]> => {
   const search = new URLSearchParams();
@@ -140,7 +139,11 @@ export default function PassportList() {
       data={data}
       columns={columns}
       loading={loading}
-      title={<Typography variant="subtitle1">{t('admin.passport.intro')}</Typography>}
+      title={
+        <Typography variant="subtitle1" sx={{ color: 'text.secondary' }}>
+          {t('admin.passport.intro')}
+        </Typography>
+      }
       options={{
         count: data.length,
         page: 1,