payment-kit 1.14.25 → 1.14.26

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

@@ -11,6 +11,7 @@ import {
   formatError,
   formatTime,
   getPayoutStatusColor,
+  useMobile,
 } from '@blocklet/payment-react';
 import type { TPayoutExpanded } from '@blocklet/payment-types';
 import { ArrowBackOutlined, InfoOutlined } from '@mui/icons-material';
@@ -38,6 +39,7 @@ const InfoAlignItems = 'flex-start';
 
 export default function PayoutDetail(props: { id: string }) {
   const { t } = useLocaleContext();
+  const { isMobile } = useMobile();
   const [state, setState] = useSetState({
     adding: {
       price: false,
@@ -87,7 +89,7 @@ export default function PayoutDetail(props: { id: string }) {
   };
 
   return (
-    <Root direction="column" spacing={4} mb={4}>
+    <Root direction="column" spacing={2.5} mb={4}>
       <Box>
         <Stack className="page-header" direction="row" justifyContent="space-between" alignItems="center">
           <Stack
@@ -180,7 +182,10 @@ export default function PayoutDetail(props: { id: string }) {
             xs: 'column',
             lg: 'row',
           },
-          gap: 4,
+          gap: {
+            xs: 2.5,
+            md: 4,
+          },
           '.payment-link-column-1': {
             minWidth: {
               xs: '100%',
@@ -199,7 +204,7 @@ export default function PayoutDetail(props: { id: string }) {
             },
           },
         }}>
-        <Box flex={1} className="payment-link-column-1" sx={{ gap: 4, display: 'flex', flexDirection: 'column' }}>
+        <Box flex={1} className="payment-link-column-1" sx={{ gap: 2.5, display: 'flex', flexDirection: 'column' }}>
           <Box className="section">
             <SectionHeader title={t('admin.details')} />
             <Stack
@@ -262,7 +267,8 @@ export default function PayoutDetail(props: { id: string }) {
             </Box>
           </Box>
         </Box>
-        <Box className="payment-link-column-2" sx={{ gap: 3, display: 'flex', flexDirection: 'column' }}>
+        {isMobile && <Divider />}
+        <Box className="payment-link-column-2" sx={{ gap: 2.5, display: 'flex', flexDirection: 'column' }}>
           <Box className="section">
             <SectionHeader title={t('admin.paymentMethod._name')} />
             <Stack>

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

@@ -11,6 +11,7 @@ import {
   formatError,
   formatTime,
   getRefundStatusColor,
+  useMobile,
 } from '@blocklet/payment-react';
 import type { TRefundExpanded } from '@blocklet/payment-types';
 import { ArrowBackOutlined, InfoOutlined } from '@mui/icons-material';
@@ -40,6 +41,7 @@ const InfoAlignItems = 'flex-start';
 
 export default function RefundDetail(props: { id: string }) {
   const { t } = useLocaleContext();
+  const { isMobile } = useMobile();
   const [state, setState] = useSetState({
     adding: {
       price: false,
@@ -89,7 +91,7 @@ export default function RefundDetail(props: { id: string }) {
   };
 
   return (
-    <Root direction="column" spacing={4} mb={4}>
+    <Root direction="column" spacing={2.5} mb={4}>
       <Box>
         <Stack className="page-header" direction="row" justifyContent="space-between" alignItems="center">
           <Stack
@@ -182,7 +184,10 @@ export default function RefundDetail(props: { id: string }) {
             xs: 'column',
             lg: 'row',
           },
-          gap: 4,
+          gap: {
+            xs: 2.5,
+            md: 4,
+          },
           '.payment-link-column-1': {
             minWidth: {
               xs: '100%',
@@ -201,7 +206,7 @@ export default function RefundDetail(props: { id: string }) {
             },
           },
         }}>
-        <Box flex={1} className="payment-link-column-1" sx={{ gap: 4, display: 'flex', flexDirection: 'column' }}>
+        <Box flex={1} className="payment-link-column-1" sx={{ gap: 2.5, display: 'flex', flexDirection: 'column' }}>
           <Box className="section">
             <SectionHeader title={t('admin.details')} />
             <Stack
@@ -283,7 +288,8 @@ export default function RefundDetail(props: { id: string }) {
             </Box>
           </Box>
         </Box>
-        <Box className="payment-link-column-2" sx={{ gap: 3, display: 'flex', flexDirection: 'column' }}>
+        {isMobile && <Divider />}
+        <Box className="payment-link-column-2" sx={{ gap: 2.5, display: 'flex', flexDirection: 'column' }}>
           {data.paymentMethod && (
             <>
               <Box className="section">

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

@@ -88,6 +88,9 @@ export default function Products() {
             '.MuiTabs-hideScrollbar': {
               border: 'none !important',
             },
+            '.MuiTouchRipple-root': {
+              display: 'none',
+            },
           }}
         />
         <Box> {extra}</Box>

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

@@ -140,7 +140,7 @@ export default function PassportList() {
       columns={columns}
       loading={loading}
       title={
-        <Typography variant="subtitle1" sx={{ color: 'text.secondary' }}>
+        <Typography variant="subtitle1" sx={{ color: 'text.secondary', whiteSpace: 'break-spaces' }}>
           {t('admin.passport.intro')}
         </Typography>
       }

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

@@ -1,6 +1,6 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import { api, formatError, formatPrice, formatTime, Table } from '@blocklet/payment-react';
+import { api, formatError, formatPrice, formatTime, Table, useMobile } from '@blocklet/payment-react';
 import type { TPrice, TPriceExpanded } from '@blocklet/payment-types';
 import { ArrowBackOutlined } from '@mui/icons-material';
 import { Alert, AlertTitle, Box, Button, CircularProgress, Divider, Stack, Typography } from '@mui/material';
@@ -30,6 +30,7 @@ const InfoAlignItems = 'flex-start';
 
 export default function PriceDetail(props: { id: string }) {
   const { t, locale } = useLocaleContext();
+  const { isMobile } = useMobile();
   const navigate = useNavigate();
   const [state, setState] = useSetState({
     adding: {
@@ -84,7 +85,7 @@ export default function PriceDetail(props: { id: string }) {
   };
 
   return (
-    <Root direction="column" spacing={4} sx={{ mb: 4 }}>
+    <Root direction="column" spacing={2.5} sx={{ mb: 4 }}>
       <Box>
         {data.active === false && (
           <Alert severity="warning">
@@ -179,7 +180,10 @@ export default function PriceDetail(props: { id: string }) {
             xs: 'column',
             lg: 'row',
           },
-          gap: 4,
+          gap: {
+            xs: 2.5,
+            md: 4,
+          },
           '.payment-link-column-1': {
             minWidth: {
               xs: '100%',
@@ -198,7 +202,7 @@ export default function PriceDetail(props: { id: string }) {
             },
           },
         }}>
-        <Box flex={1} className="payment-link-column-1" sx={{ gap: 4, display: 'flex', flexDirection: 'column' }}>
+        <Box flex={1} className="payment-link-column-1" sx={{ gap: 2.5, display: 'flex', flexDirection: 'column' }}>
           <Box className="section">
             <SectionHeader title={t('admin.details')}>
               <Button
@@ -333,7 +337,8 @@ export default function PriceDetail(props: { id: string }) {
             </Box>
           </Box>
         </Box>
-        <Box className="payment-link-column-2" sx={{ gap: 3, display: 'flex', flexDirection: 'column' }}>
+        {isMobile && <Divider />}
+        <Box className="payment-link-column-2" sx={{ gap: 2.5, display: 'flex', flexDirection: 'column' }}>
           <Box className="section">
             <SectionHeader title={t('admin.price.upsell.title')} />
             <Box className="section-body">

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

@@ -1,6 +1,6 @@
 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, useMobile, usePaymentContext } from '@blocklet/payment-react';
 import type { TPrice, TProduct, TProductExpanded } from '@blocklet/payment-types';
 import { ArrowBackOutlined } from '@mui/icons-material';
 import {
@@ -19,6 +19,7 @@ import { styled } from '@mui/system';
 import { useRequest, useSetState } from 'ahooks';
 import { useNavigate } from 'react-router-dom';
 
+import { isEmpty } from 'lodash';
 import Copyable from '../../../../components/copyable';
 import EventList from '../../../../components/event/list';
 import InfoMetric from '../../../../components/info-metric';
@@ -42,6 +43,7 @@ const InfoAlignItems = 'flex-start';
 
 export default function ProductDetail(props: { id: string }) {
   const { t, locale } = useLocaleContext();
+  const { isMobile } = useMobile();
   const navigate = useNavigate();
   const { settings } = usePaymentContext();
   const [state, setState] = useSetState({
@@ -107,13 +109,13 @@ export default function ProductDetail(props: { id: string }) {
     }
   };
 
-  const isLocked = data.locked || data.prices.some((x) => x.locked);
+  const isLocked = data.locked || (!isEmpty(data.prices) && data.prices.some((x) => x.locked));
   const handleEditMetadata = () => {
     setState((prev) => ({ editing: { ...prev.editing, metadata: true } }));
   };
 
   return (
-    <Root direction="column" spacing={4} sx={{ mb: 4 }}>
+    <Root direction="column" spacing={2.5} sx={{ mb: 4 }}>
       <Box>
         {data.active === false && (
           <Alert severity="warning">
@@ -163,7 +165,9 @@ export default function ProductDetail(props: { id: string }) {
           }}>
           <Stack direction="row" justifyContent="space-between" alignItems="center">
             <Stack direction="row" alignItems="center" spacing={1}>
-              <Avatar src={data.images[0]} alt={data.name} variant="square" sx={{ width: '52px', height: '52px' }} />
+              {data.images.length > 0 && (
+                <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}
@@ -210,7 +214,10 @@ export default function ProductDetail(props: { id: string }) {
             xs: 'column',
             lg: 'row',
           },
-          gap: 4,
+          gap: {
+            xs: 2.5,
+            md: 4,
+          },
           '.payment-link-column-1': {
             minWidth: {
               xs: '100%',
@@ -229,7 +236,7 @@ export default function ProductDetail(props: { id: string }) {
             },
           },
         }}>
-        <Box flex={1} className="payment-link-column-1" sx={{ gap: 4, display: 'flex', flexDirection: 'column' }}>
+        <Box flex={1} className="payment-link-column-1" sx={{ gap: 2.5, display: 'flex', flexDirection: 'column' }}>
           <Box className="section">
             <SectionHeader title={t('admin.details')}>
               <Button
@@ -300,12 +307,11 @@ export default function ProductDetail(props: { id: string }) {
                   label={t('admin.product.image.label')}
                   value={
                     data.images.length ? (
-                      <img
+                      <Avatar
                         src={data.images[0]}
-                        width={160}
-                        height={160}
                         alt={data.name}
-                        style={{ objectFit: 'cover' }}
+                        variant="square"
+                        sx={{ width: '160px', height: '160px' }}
                       />
                     ) : (
                       t('empty.image')
@@ -359,7 +365,8 @@ export default function ProductDetail(props: { id: string }) {
             </Box>
           </Box>
         </Box>
-        <Box className="payment-link-column-2" sx={{ gap: 3, display: 'flex', flexDirection: 'column' }}>
+        {isMobile && <Divider />}
+        <Box className="payment-link-column-2" sx={{ gap: 2.5, display: 'flex', flexDirection: 'column' }}>
           <Box className="section">
             <SectionHeader title={t('admin.product.cross_sell.title')} />
             <Box className="section-body">

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

@@ -64,6 +64,9 @@ export default function SettingsIndex() {
             '.MuiTabs-hideScrollbar': {
               border: 'none !important',
             },
+            '.MuiTouchRipple-root': {
+              display: 'none',
+            },
           }}
         />
         <Box> {extra}</Box>

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

@@ -14,6 +14,7 @@ import {
   getInvoiceStatusColor,
   getPrefix,
   getSubscriptionStatusColor,
+  useDefaultPageSize,
 } from '@blocklet/payment-react';
 import type { Paginated, TInvoiceExpanded, TSubscriptionExpanded } from '@blocklet/payment-types';
 import {
@@ -57,12 +58,12 @@ export default function SubscriptionEmbed() {
 
   const subscriptionId = params.get('id') || '';
   const authToken = params.get('authToken') || '';
-
+  const defaultPageSize = useDefaultPageSize(20);
   const { data: subscription, error, loading } = useRequest(() => fetchSubscriptionData(subscriptionId, authToken));
   const { data } = useRequest(() =>
     fetchInvoiceData({
       page: 1,
-      pageSize: 20,
+      pageSize: defaultPageSize,
       status: 'open,paid,uncollectible',
       subscription_id: subscriptionId,
       authToken,