payment-kit 1.19.4 → 1.19.6

package/src/components/subscription/items/index.tsx

@@ -2,7 +2,8 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { formatPrice, Table, TruncatedText, useMobile } from '@blocklet/payment-react';
 import type { TPaymentCurrency, TSubscriptionItemExpanded } from '@blocklet/payment-types';
-import { Avatar, Stack, Typography } from '@mui/material';
+import { Avatar, Stack, Typography, Box } from '@mui/material';
+import { styled } from '@mui/system';
 
 import { Link } from 'react-router-dom';
 import Copyable from '../../copyable';
@@ -41,59 +42,74 @@ export default function SubscriptionItemList({ data, currency, mode = 'customer'
                   sm: 2,
                 },
               }}>
-              {item.price.product.images.length > 0 ? (
-                // @ts-ignore
-                <Avatar
-                  key={item.price.product_id}
-                  src={item.price.product.images[0]}
-                  alt={item.price.product.name}
-                  variant="rounded"
-                  sx={size}
-                />
-              ) : (
-                <Avatar key={item.price.product_id} variant="rounded" sx={size}>
-                  {item.price.product.name.slice(0, 1)}
-                </Avatar>
-              )}
-              {isAdmin ? (
-                <>
-                  <Typography
-                    sx={{
-                      color: 'text.primary',
-                      fontWeight: 600,
-                    }}>
-                    <Link to={`/admin/products/${item?.price.product_id}`}>
+              <Box order={isMobile ? 2 : 1}>
+                {item.price.product.images.length > 0 ? (
+                  // @ts-ignore
+                  <Avatar
+                    key={item.price.product_id}
+                    src={item.price.product.images[0]}
+                    alt={item.price.product.name}
+                    variant="rounded"
+                    sx={size}
+                  />
+                ) : (
+                  <Avatar key={item.price.product_id} variant="rounded" sx={size}>
+                    {item.price.product.name.slice(0, 1)}
+                  </Avatar>
+                )}
+              </Box>
+              <Box order={isMobile ? 1 : 2}>
+                {isAdmin ? (
+                  <>
+                    <Typography
+                      sx={{
+                        color: 'text.primary',
+                        fontWeight: 600,
+                      }}>
+                      <Link to={`/admin/products/${item?.price.product_id}`}>
+                        <TruncatedText text={item?.price.product.name} maxLength={isMobile ? 20 : 50} useWidth />
+                      </Link>
+                    </Typography>
+                    <Typography
+                      sx={{
+                        color: 'text.secondary',
+                        whiteSpace: 'nowrap',
+                      }}>
+                      <Link to={`/admin/products/${item?.price.id}`}>
+                        {formatPrice(item.price, currency, item?.price.product.unit_label)}
+                      </Link>
+                    </Typography>
+                  </>
+                ) : (
+                  <Box
+                    sx={
+                      isMobile
+                        ? {
+                            display: 'flex',
+                            flexDirection: 'column',
+                            alignItems: 'flex-end',
+                            gap: 0.5,
+                            flex: 1,
+                          }
+                        : {}
+                    }>
+                    <Typography
+                      sx={{
+                        color: 'text.primary',
+                        fontWeight: 600,
+                      }}>
                       <TruncatedText text={item?.price.product.name} maxLength={isMobile ? 20 : 50} useWidth />
-                    </Link>
-                  </Typography>
-                  <Typography
-                    sx={{
-                      color: 'text.secondary',
-                      whiteSpace: 'nowrap',
-                    }}>
-                    <Link to={`/admin/products/${item?.price.id}`}>
+                    </Typography>
+                    <Typography
+                      sx={{
+                        color: 'text.secondary',
+                        whiteSpace: 'nowrap',
+                      }}>
                       {formatPrice(item.price, currency, item?.price.product.unit_label)}
-                    </Link>
-                  </Typography>
-                </>
-              ) : (
-                <>
-                  <Typography
-                    sx={{
-                      color: 'text.primary',
-                      fontWeight: 600,
-                    }}>
-                    <TruncatedText text={item?.price.product.name} maxLength={isMobile ? 20 : 50} useWidth />
-                  </Typography>
-                  <Typography
-                    sx={{
-                      color: 'text.secondary',
-                      whiteSpace: 'nowrap',
-                    }}>
-                    {formatPrice(item.price, currency, item?.price.product.unit_label)}
-                  </Typography>
-                </>
-              )}
+                    </Typography>
+                  </Box>
+                )}
+              </Box>
             </Stack>
           );
         },
@@ -153,22 +169,42 @@ export default function SubscriptionItemList({ data, currency, mode = 'customer'
   ].filter(Boolean);
 
   return (
-    <Table
-      data={data}
-      columns={columns}
-      loading={false}
-      footer={false}
-      toolbar={false}
-      components={{
-        TableToolbar: () => null,
-        TableFooter: () => null,
-      }}
-      options={{
-        count: data.length,
-        page: 0,
-        rowsPerPage: 100,
-      }}
-      emptyNodeText={t('customer.product.empty')}
-    />
+    <InvoiceTableRoot>
+      <Table
+        data={data}
+        columns={columns}
+        loading={false}
+        footer={false}
+        toolbar={false}
+        components={{
+          TableToolbar: () => null,
+          TableFooter: () => null,
+        }}
+        mobileTDFlexDirection="row"
+        options={{
+          count: data.length,
+          page: 0,
+          rowsPerPage: 100,
+        }}
+        emptyNodeText={t('customer.product.empty')}
+      />
+    </InvoiceTableRoot>
   );
 }
+
+const InvoiceTableRoot = styled(Box)`
+  @media (max-width: ${({ theme }) => theme.breakpoints.values.md}px) {
+    .MuiTable-root > .MuiTableBody-root > .MuiTableRow-root > td.MuiTableCell-root {
+      align-items: center;
+      padding: 4px 0;
+      > div {
+        width: fit-content;
+        flex: inherit;
+        font-size: 14px;
+      }
+    }
+    .invoice-summary {
+      padding-right: 20px;
+    }
+  }
+`;

package/src/components/subscription/metrics.tsx

@@ -1,5 +1,5 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { api, formatBNStr, formatTime } from '@blocklet/payment-react';
+import { api, formatBNStr, formatTime, useMobile } from '@blocklet/payment-react';
 import type { TSubscriptionExpanded, CreditGrantSummary } from '@blocklet/payment-types';
 import { useRequest } from 'ahooks';
 
@@ -41,6 +41,8 @@ export default function SubscriptionMetrics({ subscription, showBalance = true }
   const { data: upcoming, loading: upcomingLoading } = useRequest(() => fetchUpcoming(subscription.id));
   const navigate = useNavigate();
 
+  const { isMobile } = useMobile();
+
   const { data: payerValue, loading: payerLoading } = useRequest(() => fetchPayer(subscription.id), {
     ready: showBalance,
   });
@@ -83,9 +85,15 @@ export default function SubscriptionMetrics({ subscription, showBalance = true }
         <Button
           component="a"
           color="error"
+          sx={{
+            height: 24,
+            pt: 0,
+            pb: 0,
+            ...(isMobile ? { textAlign: 'right', maxWidth: 160 } : {}),
+          }}
           onClick={() => navigate(`/customer/subscription/${subscription.id}/recharge`)}>
           {t('admin.subscription.insufficientBalance')}
-          <ArrowForward sx={{ fontSize: '14px' }} />
+          <ArrowForward sx={{ fontSize: 14 }} />
         </Button>
       );
     }
@@ -113,7 +121,7 @@ export default function SubscriptionMetrics({ subscription, showBalance = true }
             alignItems: 'baseline',
           }}>
           {formatBNStr(balance, subscription.paymentCurrency.decimal)}
-          <Typography sx={{ fontSize: '14px', ml: 0.5 }}>{subscription.paymentCurrency.symbol}</Typography>
+          <Typography sx={{ fontSize: 14, ml: 0.5 }}>{subscription.paymentCurrency.symbol}</Typography>
         </Box>
       </Stack>
     );
@@ -136,6 +144,8 @@ export default function SubscriptionMetrics({ subscription, showBalance = true }
                 display: 'flex',
                 alignItems: 'center',
                 gap: 0.5,
+                fontSize: 14,
+                fontWeight: 500,
               }}>
               {t('admin.subscription.nextInvoiceAmount')}
               <Tooltip title={t('admin.subscription.nextInvoiceAmountTip')} placement="top" arrow>
@@ -157,8 +167,11 @@ export default function SubscriptionMetrics({ subscription, showBalance = true }
               spacing={1}
               sx={{
                 alignItems: 'center',
+                fontWeight: 500,
               }}>
-              <Typography>{t('admin.subscription.currentBalance')}</Typography>
+              <Typography fontWeight={500} sx={{ fontSize: 14 }}>
+                {t('admin.subscription.currentBalance')}
+              </Typography>
               <Tooltip
                 title={
                   <Typography sx={{ fontFamily: 'monospace', fontSize: '13px' }}>

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

@@ -18,7 +18,7 @@ import {
 } from '@blocklet/payment-react';
 import type { TCheckoutSession, TInvoiceExpanded, TPaymentLink } from '@blocklet/payment-types';
 import { ArrowBackOutlined } from '@mui/icons-material';
-import { Alert, Box, Button, CircularProgress, Divider, Stack, Tooltip, Typography } from '@mui/material';
+import { Alert, Box, Button, CircularProgress, Divider, Stack, Tooltip, Typography, useTheme } from '@mui/material';
 import { styled } from '@mui/system';
 import { useRequest, useSetState } from 'ahooks';
 import { useEffect } from 'react';
@@ -51,6 +51,7 @@ export default function CustomerInvoiceDetail() {
   const { isMobile } = useMobile();
   const { connect } = usePaymentContext();
   const params = useParams<{ id: string }>();
+  const muiTheme = useTheme();
   const [state, setState] = useSetState({
     downloading: false,
     paying: false,
@@ -179,8 +180,11 @@ export default function CustomerInvoiceDetail() {
       </Stack>
       <Box
         sx={{
-          mt: 4,
+          mt: isMobile ? '0 !important' : 4,
           display: 'flex',
+          border: isMobile ? `1px solid ${muiTheme.palette.divider}` : 'none',
+          borderRadius: isMobile ? 1 : 0,
+          p: isMobile ? 2 : 0,
 
           gap: {
             xs: 2,
@@ -227,6 +231,9 @@ export default function CustomerInvoiceDetail() {
             'hr.MuiDivider-root:last-child': {
               display: 'none',
             },
+            '.info-metric-label': {
+              mb: isMobile ? 0.5 : 1,
+            },
 
             flexDirection: {
               xs: 'column',
@@ -288,7 +295,14 @@ export default function CustomerInvoiceDetail() {
         </Stack>
       </Box>
       <Divider />
-      <Box className="section" sx={{ containerType: 'inline-size' }}>
+      <Box
+        className="section"
+        sx={{
+          containerType: 'inline-size',
+          border: isMobile ? (theme) => `1px solid ${theme.palette.divider}` : 'none',
+          borderRadius: isMobile ? 1 : 0,
+          p: isMobile ? 2 : 0,
+        }}>
         <Typography
           variant="h3"
           className="section-header"
@@ -300,6 +314,7 @@ export default function CustomerInvoiceDetail() {
         <InfoRowGroup
           sx={{
             display: 'grid',
+            columnGap: 16,
             gridTemplateColumns: {
               xs: 'repeat(1, 1fr)',
               lg: 'repeat(2, 1fr)',
@@ -308,7 +323,7 @@ export default function CustomerInvoiceDetail() {
               gridTemplateColumns: 'repeat(2, 1fr)',
             },
             '.info-row-wrapper': {
-              gap: 1,
+              gap: isMobile ? 0.5 : 1,
               flexDirection: {
                 xs: 'column',
                 lg: 'row',
@@ -324,11 +339,17 @@ export default function CustomerInvoiceDetail() {
             },
             '.currency-name': {
               color: 'text.secondary',
+              fontSize: 14,
+              lineHeight: 1,
+            },
+            '.tx-link-text': {
+              fontSize: 14,
+              lineHeight: 1,
             },
           }}>
           <InfoRow
             label={t('admin.invoice.billTo')}
-            value={<CustomerLink customer={data.customer} linked={false} size={isMobile ? 'default' : 'small'} />}
+            value={<CustomerLink customer={data.customer} linked={false} size="small" />}
           />
           <InfoRow label={t('admin.invoice.from')} value={data.statement_descriptor || blocklet.appName} />
           <InfoRow

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

@@ -30,6 +30,7 @@ import {
   Link as MuiLink,
   IconButton,
   Tooltip,
+  useTheme,
 } from '@mui/material';
 import { useRequest } from 'ahooks';
 import { Link, useNavigate, useParams } from 'react-router-dom';
@@ -86,6 +87,8 @@ export default function CustomerSubscriptionDetail() {
     ready: overdraftProtectionReady,
   });
 
+  const muiTheme = useTheme();
+
   const {
     data: cycleAmount = {
       amount: '0',
@@ -170,6 +173,9 @@ export default function CustomerSubscriptionDetail() {
             size="small"
             sx={{
               fontSize: '13px',
+              pt: 0,
+              pb: 0,
+              height: 3,
               color: 'text.link',
               '&:hover': { backgroundColor: 'primary.lighter' },
             }}
@@ -208,34 +214,32 @@ export default function CustomerSubscriptionDetail() {
         direction="row"
         sx={{
           alignItems: 'center',
+          flexWrap: 'wrap',
+          justifyContent: 'flex-end',
+          columnGap: 0.5,
         }}>
         <Stack
           direction="row"
-          spacing={1}
+          spacing={0.5}
           sx={{
             alignItems: 'center',
           }}>
-          <Stack
-            direction="row"
-            spacing={0.5}
+          <CheckCircle
             sx={{
-              alignItems: 'center',
+              fontSize: '16px',
+              color: 'success.main',
+              verticalAlign: 'middle',
+            }}
+          />
+          <Typography
+            sx={{
+              color: 'success.main',
+              fontWeight: 500,
             }}>
-            <CheckCircle
-              sx={{
-                fontSize: '16px',
-                color: 'success.main',
-                verticalAlign: 'middle',
-              }}
-            />
-            <Typography
-              sx={{
-                color: 'success.main',
-                fontWeight: 500,
-              }}>
-              {t('customer.overdraftProtection.enabled')}
-            </Typography>
-          </Stack>
+            {t('customer.overdraftProtection.enabled')}
+          </Typography>
+        </Stack>
+        {!isMobile && (
           <Divider
             orientation="vertical"
             flexItem
@@ -244,36 +248,32 @@ export default function CustomerSubscriptionDetail() {
               borderColor: 'divider',
             }}
           />
-          <Typography
+        )}
+        <Typography
+          sx={{
+            color: 'text.primary',
+            display: 'flex',
+            alignItems: 'center',
+            gap: 0.5,
+            fontWeight: 500,
+          }}>
+          <Avatar src={data.paymentCurrency?.logo} sx={{ width: 16, height: 16 }} alt={data.paymentCurrency?.symbol} />
+          <Box
             sx={{
-              color: 'text.primary',
               display: 'flex',
-              alignItems: 'center',
-              gap: 0.5,
-              fontWeight: 500,
+              alignItems: 'baseline',
             }}>
-            <Avatar
-              src={data.paymentCurrency?.logo}
-              sx={{ width: 16, height: 16 }}
-              alt={data.paymentCurrency?.symbol}
-            />
-            <Box
+            {formatBNStr(overdraftProtection?.unused, data.paymentCurrency.decimal)}
+            <Typography
               sx={{
-                display: 'flex',
-                alignItems: 'baseline',
+                color: 'text.secondary',
+                fontSize: '14px',
+                ml: 0.5,
               }}>
-              {formatBNStr(overdraftProtection?.unused, data.paymentCurrency.decimal)}
-              <Typography
-                sx={{
-                  color: 'text.secondary',
-                  fontSize: '14px',
-                  ml: 0.5,
-                }}>
-                {data.paymentCurrency.symbol}（{formatEstimatedDuration(Math.ceil(remainingStake / estimateAmount))}）
-              </Typography>
-            </Box>
-          </Typography>
-        </Stack>
+              {data.paymentCurrency.symbol}({formatEstimatedDuration(Math.ceil(remainingStake / estimateAmount))})
+            </Typography>
+          </Box>
+        </Typography>
         {data?.overdraft_protection?.enabled && (
           <Tooltip title={t('customer.overdraftProtection.setting')} placement="top">
             <IconButton
@@ -377,8 +377,11 @@ export default function CustomerSubscriptionDetail() {
         </Stack>
         <Box
           sx={{
-            mt: 4,
+            mt: isMobile ? 2 : 4,
             display: 'flex',
+            border: isMobile ? `1px solid ${muiTheme.palette.divider}` : 'none',
+            borderRadius: isMobile ? 1 : 0,
+            p: isMobile ? 2 : 0,
 
             gap: {
               xs: 2,
@@ -421,6 +424,8 @@ export default function CustomerSubscriptionDetail() {
             sx={{
               justifyContent: 'flex-start',
               flexWrap: 'wrap',
+              flex: 1,
+              width: '100%',
 
               'hr.MuiDivider-root:last-child': {
                 display: 'none',
@@ -450,7 +455,9 @@ export default function CustomerSubscriptionDetail() {
                     sx={{
                       alignItems: 'center',
                     }}>
-                    <Typography component="span">{t('customer.overdraftProtection.title')}</Typography>
+                    <Typography component="span" fontSize={14} fontWeight={500}>
+                      {t('customer.overdraftProtection.title')}
+                    </Typography>
                     <MuiLink
                       href="https://www.arcblock.io/content/blog/en/payment-kit-v117-sub-guard#listen-to-the-audio-overview"
                       target="_blank"
@@ -517,8 +524,15 @@ export default function CustomerSubscriptionDetail() {
           </Stack>
         </Box>
       </Box>
-      <Divider />
-      <Box className="section" sx={{ containerType: 'inline-size' }}>
+      {!isMobile ? <Divider /> : null}
+      <Box
+        className="section"
+        sx={{
+          containerType: 'inline-size',
+          border: isMobile ? `1px solid ${muiTheme.palette.divider}` : 'none',
+          borderRadius: isMobile ? 1 : 0,
+          p: isMobile ? 2 : 0,
+        }}>
         <Typography
           variant="h3"
           className="section-header"
@@ -538,7 +552,7 @@ export default function CustomerSubscriptionDetail() {
               gridTemplateColumns: 'repeat(2, 1fr)',
             },
             '.info-row-wrapper': {
-              gap: 1,
+              gap: isMobile ? 0.5 : 1,
               flexDirection: {
                 xs: 'column',
                 xl: 'row',
@@ -554,11 +568,17 @@ export default function CustomerSubscriptionDetail() {
             },
             '.currency-name': {
               color: 'text.secondary',
+              lineHeight: 1,
+              fontSize: 14,
+            },
+            '.tx-link-text': {
+              fontSize: 14,
+              lineHeight: 1,
             },
           }}>
           <InfoRow
             label={t('common.customer')}
-            value={<CustomerLink customer={data.customer} linked={false} size={isMobile ? 'default' : 'small'} />}
+            value={<CustomerLink customer={data.customer} linked={false} size="small" />}
           />
           <InfoRow label={t('common.createdAt')} value={formatTime(data.created_at)} />
 
@@ -585,17 +605,17 @@ export default function CustomerSubscriptionDetail() {
 
           <InfoRow
             label={t('admin.paymentMethod._name')}
-            value={<Currency logo={data.paymentMethod?.logo} name={data.paymentMethod?.name} />}
+            value={<Currency logo={data.paymentMethod?.logo} name={data.paymentMethod?.name} size={16} />}
           />
           <InfoRow
             label={t('admin.paymentCurrency.name')}
             value={
               <Stack direction="row" spacing={2}>
-                <Currency logo={data.paymentCurrency.logo} name={data.paymentCurrency.symbol} />
+                <Currency logo={data.paymentCurrency.logo} name={data.paymentCurrency.symbol} size={16} />
                 {canChangePaymentMethod(data) && (
                   <Button
                     variant="text"
-                    sx={{ color: 'text.link' }}
+                    sx={{ color: 'text.link', fontSize: 14 }}
                     size="small"
                     onClick={async () => {
                       // only check unpaid invoices when overdraft protection is enabled
@@ -617,7 +637,7 @@ export default function CustomerSubscriptionDetail() {
           {data.payment_details && hasDelegateTxHash(data.payment_details, data.paymentMethod) && (
             <InfoRow
               label={t('common.delegateTxHash')}
-              value={<TxLink details={data.payment_details} method={data.paymentMethod} />}
+              value={<TxLink details={data.payment_details} method={data.paymentMethod} size={16} />}
             />
           )}
           {data.paymentMethod?.type === 'arcblock' && data.payment_details?.arcblock?.staking?.tx_hash && (
@@ -633,6 +653,7 @@ export default function CustomerSubscriptionDetail() {
                   <TxLink
                     details={{ arcblock: { tx_hash: data.payment_details?.arcblock?.staking?.tx_hash, payer: '' } }}
                     method={data.paymentMethod}
+                    size={16}
                   />
                 </Box>
               }