payment-kit 1.14.24 → 1.14.26

package/src/components/uploader.tsx

@@ -1,7 +1,7 @@
-import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { Box, Button, Typography } from '@mui/material';
-import { styled } from '@mui/system';
+import { Avatar, Box, Button } from '@mui/material';
+import { Stack, styled } from '@mui/system';
 import { lazy, useCallback, useEffect, useRef } from 'react';
+import { CloudUpload, Delete, Edit } from '@mui/icons-material';
 
 const UploaderComponent = lazy(() => import('@blocklet/uploader/react').then((res) => ({ default: res.Uploader })));
 
@@ -14,7 +14,6 @@ type Props = {
 };
 
 export default function Uploader({ onUploaded, preview, maxFileSize, maxNumberOfFiles, allowedFileExts }: Props) {
-  const { t } = useLocaleContext();
   const uploaderRef = useRef<any>(null);
   const handleOpen = useCallback(() => {
     if (!uploaderRef.current) return;
@@ -34,25 +33,66 @@ export default function Uploader({ onUploaded, preview, maxFileSize, maxNumberOf
 
   return (
     <>
-      <Div
-        display="flex"
-        alignItems={preview ? 'flex-end' : 'center'}
-        justifyContent="center"
-        style={{
-          backgroundImage: preview ? `url(${preview})` : 'none',
-          backgroundRepeat: 'no-repeat',
-          backgroundSize: 'contain',
-          backgroundPosition: 'center',
-        }}>
-        <Button variant={preview ? 'contained' : 'text'} color="inherit" size="small" onClick={handleOpen}>
-          <Typography>{t(`common.${preview ? 'change' : 'upload'}`)}</Typography>
-        </Button>
-        {preview && (
-          <Button variant="contained" color="error" size="small" onClick={handleRemove}>
-            <Typography>{t('common.remove')}</Typography>
-          </Button>
-        )}
-      </Div>
+      {!preview && (
+        <Div
+          display="flex"
+          alignItems="center"
+          justifyContent="center"
+          onClick={handleOpen}
+          sx={{
+            position: 'relative',
+            cursor: 'pointer',
+          }}>
+          <CloudUpload style={{ fontSize: 32, color: '#ccc' }} />
+        </Div>
+      )}
+      {preview && (
+        <Div
+          sx={{
+            border: 'none',
+            '&:hover': {
+              backgroundColor: 'rgba(0, 0, 0, 0.45)',
+            },
+          }}>
+          <Avatar
+            src={preview}
+            alt="picture"
+            variant="square"
+            sx={{ width: '100%', height: '100%', borderRadius: '2px' }}
+          />
+          <Div
+            display="flex"
+            alignItems="center"
+            justifyContent="center"
+            sx={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              width: '100%',
+              height: '100%',
+              backgroundColor: 'rgba(0, 0, 0, 0.5)',
+              opacity: {
+                xs: 1,
+                md: 0,
+              },
+              transition: 'opacity 0.3s',
+              '&:hover': {
+                opacity: 1,
+              },
+            }}>
+            <Stack direction="row">
+              <Button variant="text" onClick={handleOpen} startIcon={<Edit />} sx={{ minWidth: 20, color: '#fff' }} />
+              <Button
+                variant="text"
+                onClick={handleRemove}
+                startIcon={<Delete />}
+                sx={{ minWidth: 20, color: '#fff' }}
+              />
+            </Stack>
+          </Div>
+        </Div>
+      )}
+
       <UploaderComponent
         // @ts-ignore
         ref={uploaderRef}
@@ -89,13 +129,10 @@ Uploader.defaultProps = {
 };
 
 const Div = styled(Box)`
-  border: 1px solid #ccc;
+  border: 1px solid var(--stroke-border-base, #eff1f5);
   border-radius: 4px;
   cursor: pointer;
   width: 120px;
   height: 120px;
-
-  &:hover {
-    background-color: #fafafa;
-  }
+  position: relative;
 `;

package/src/components/webhook/attempts.tsx

@@ -19,6 +19,7 @@ import {
 import { useInfiniteScroll } from 'ahooks';
 import React, { useEffect, useState } from 'react';
 
+import { isEmpty } from 'lodash';
 import { isSuccessAttempt } from '../../libs/util';
 
 const fetchData = (params: Record<string, any> = {}): Promise<Paginated<TWebhookAttemptExpanded>> => {
@@ -88,42 +89,48 @@ export default function WebhookAttempts({ event_id, webhook_endpoint_id, event }
   const hasMore = data && data.list.length < data.count;
 
   return (
-    <Grid container spacing={0}>
-      <Grid item xs={4} className="attempt-list">
-        <List sx={{ maxHeight: '64vh', overflowY: 'scroll' }}>
-          {Object.entries(groupedAttempts).map(([date, items]) => (
-            <React.Fragment key={date}>
-              <ListSubheader>{date}</ListSubheader>
-              {items.map((attempt) => (
-                <ListItem
-                  button
-                  key={attempt.id}
-                  onClick={() => handleAttemptClick(attempt)}
-                  selected={selected === attempt}
-                  secondaryAction={
-                    <Typography color="text.secondary">{formatTime(attempt.created_at, 'HH:mm:ss A')}</Typography>
-                  }>
-                  <ListItemIcon>
-                    {isSuccessAttempt(attempt.response_status) === false ? (
-                      <ErrorOutlined color="error" />
-                    ) : (
-                      <CheckCircleOutlined color="success" />
-                    )}
-                  </ListItemIcon>
-                  <ListItemText primary={<Typography color="text.primary">{attempt.event.type}</Typography>} />
-                </ListItem>
+    <Grid container spacing={2.5}>
+      <Grid item xs={12} md={4} className="attempt-list">
+        {isEmpty(Object.keys(groupedAttempts)) ? (
+          <Typography color="text.secondary">No Attempt</Typography>
+        ) : (
+          <>
+            <List sx={{ maxHeight: '64vh', overflowY: 'scroll' }}>
+              {Object.entries(groupedAttempts).map(([date, items]) => (
+                <React.Fragment key={date}>
+                  <ListSubheader>{date}</ListSubheader>
+                  {items.map((attempt) => (
+                    <ListItem
+                      button
+                      key={attempt.id}
+                      onClick={() => handleAttemptClick(attempt)}
+                      selected={selected === attempt}
+                      secondaryAction={
+                        <Typography color="text.secondary">{formatTime(attempt.created_at, 'HH:mm:ss A')}</Typography>
+                      }>
+                      <ListItemIcon>
+                        {isSuccessAttempt(attempt.response_status) === false ? (
+                          <ErrorOutlined color="error" />
+                        ) : (
+                          <CheckCircleOutlined color="success" />
+                        )}
+                      </ListItemIcon>
+                      <ListItemText primary={<Typography color="text.primary">{attempt.event.type}</Typography>} />
+                    </ListItem>
+                  ))}
+                </React.Fragment>
               ))}
-            </React.Fragment>
-          ))}
-        </List>
-        {hasMore && (
-          <Button variant="text" type="button" color="inherit" onClick={loadMore} disabled={loadingMore}>
-            {loadingMore ? 'Loading more...' : 'Load more'}
-          </Button>
+            </List>
+            {hasMore && (
+              <Button variant="text" type="button" color="inherit" onClick={loadMore} disabled={loadingMore}>
+                {loadingMore ? 'Loading more...' : 'Load more'}
+              </Button>
+            )}
+            {!hasMore && <Typography color="text.secondary">No more data</Typography>}
+          </>
         )}
-        {!hasMore && <Typography color="text.secondary">No more data</Typography>}
       </Grid>
-      <Grid item xs={8}>
+      <Grid item xs={12} md={8}>
         {selected && (
           <Stack direction="column" spacing={2} sx={{ pt: 3, pl: 3, borderLeft: '1px solid #eee' }}>
             <Typography variant="h6">{event_id ? selected.endpoint.url : selected.event.type}</Typography>

package/src/libs/util.ts

@@ -14,7 +14,7 @@ import type {
 } from '@blocklet/payment-types';
 import { Hasher } from '@ocap/mcrypto';
 import { hexToNumber } from '@ocap/util';
-import { isObject } from 'lodash';
+import { isEmpty, isObject } from 'lodash';
 import cloneDeep from 'lodash/cloneDeep';
 import isEqual from 'lodash/isEqual';
 import { joinURL } from 'ufo';
@@ -67,7 +67,15 @@ export function formatPaymentLinkPricing(
   currency: TPaymentCurrency,
   locale: string = 'en'
 ) {
-  return formatCheckoutHeadlines(link.line_items, currency, link.subscription_data?.trial_period_days || 0, locale);
+  return formatCheckoutHeadlines(
+    link.line_items,
+    currency,
+    {
+      trialInDays: link.subscription_data?.trial_period_days || 0,
+      trialEnd: link.subscription_data?.trial_end || 0,
+    },
+    locale
+  );
 }
 
 export function getWebhookStatusColor(status: string) {
@@ -256,3 +264,10 @@ export function isObjectContent(value: string) {
     return false;
   }
 }
+
+export function isEmptyExceptNumber(value: any): boolean {
+  if (typeof value === 'number') {
+    return false;
+  }
+  return isEmpty(value);
+}

package/src/locales/en.tsx

@@ -216,6 +216,7 @@ export default flat({
       allowPromotionCodes: 'Allow promotion codes',
       requireCrossSell: 'Require cross sell products selected if eligible',
       includeFreeTrial: 'Include a free trial',
+      freeTrialDaysPositive: 'Free trial days must be positive',
       includeCustomFields: 'Add custom fields',
       confirmPage: 'Confirmation Page',
       showConfirmPage: 'Show confirmation page',
@@ -577,6 +578,7 @@ export default flat({
     subscriptions: 'No Subscriptions',
     customers: 'No Customers',
     products: 'No Products',
+    payouts: 'No Payouts',
     paymentLinks: 'No Payment Links',
     paymentMethods: 'No Payment Methods',
     pricingTables: 'No Pricing Tables',

package/src/locales/zh.tsx

@@ -211,6 +211,7 @@ export default flat({
       requirePhoneNumber: '收集客户的电话号码',
       allowPromotionCodes: '允许促销代码',
       includeFreeTrial: '包含免费试用',
+      freeTrialDaysPositive: '免费试用天数必须是正数',
       includeCustomFields: '添加自定义字段',
       requireCrossSell: '用户必须选择交叉销售的商品（如果有的话）',
       confirmPage: '确认页面',
@@ -567,6 +568,7 @@ export default flat({
     subscriptions: '没有订阅记录',
     customers: '没有客户',
     products: '没有产品',
+    payouts: '没有出款记录',
     paymentLinks: '没有支付链接',
     paymentMethods: '没有支付方式',
     pricingTables: '没有定价表',

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

@@ -65,6 +65,9 @@ export default function BillingIndex() {
           '.MuiTabs-hideScrollbar': {
             border: 'none !important',
           },
+          '.MuiTouchRipple-root': {
+            display: 'none',
+          },
         }}
       />
       {isValidElement(TabComponent) ? TabComponent : <TabComponent />}

package/src/pages/admin/billing/invoices/detail.tsx

@@ -10,6 +10,7 @@ import {
   formatError,
   formatTime,
   getInvoiceStatusColor,
+  useMobile,
 } from '@blocklet/payment-react';
 import type { TInvoice, TInvoiceExpanded } from '@blocklet/payment-types';
 import { ArrowBackOutlined } from '@mui/icons-material';
@@ -43,6 +44,7 @@ const InfoAlignItems = 'flex-start';
 
 export default function InvoiceDetail(props: { id: string }) {
   const { t } = useLocaleContext();
+  const { isMobile } = useMobile();
   const [state, setState] = useSetState({
     adding: {
       price: false,
@@ -87,7 +89,7 @@ export default function InvoiceDetail(props: { id: string }) {
     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>
         <Stack className="page-header" direction="row" justifyContent="space-between" alignItems="center">
           <Stack
@@ -179,7 +181,10 @@ export default function InvoiceDetail(props: { id: string }) {
             xs: 'column',
             lg: 'row',
           },
-          gap: 4,
+          gap: {
+            xs: 2.5,
+            md: 4,
+          },
           '.payment-link-column-1': {
             minWidth: {
               xs: '100%',
@@ -198,8 +203,7 @@ export default function InvoiceDetail(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
@@ -349,7 +353,8 @@ export default function InvoiceDetail(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.connections')} />
             <Stack>

package/src/pages/admin/billing/subscriptions/detail.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import { TxLink, api, formatError, formatSubscriptionProduct, formatTime } from '@blocklet/payment-react';
+import { TxLink, api, formatError, formatSubscriptionProduct, formatTime, useMobile } from '@blocklet/payment-react';
 import type { TProduct, TSubscriptionExpanded } from '@blocklet/payment-types';
 import { ArrowBackOutlined } from '@mui/icons-material';
 import { Alert, Box, Button, CircularProgress, Divider, Stack, Typography } from '@mui/material';
@@ -33,6 +33,7 @@ const InfoAlignItems = 'flex-start';
 
 export default function SubscriptionDetail(props: { id: string }) {
   const { t } = useLocaleContext();
+  const { isMobile } = useMobile();
   const [state, setState] = useSetState({
     adding: {
       price: false,
@@ -78,7 +79,7 @@ export default function SubscriptionDetail(props: { id: string }) {
   };
 
   return (
-    <Root direction="column" spacing={4} sx={{ mb: 4 }}>
+    <Root direction="column" spacing={2.5} sx={{ mb: 4 }}>
       <Box>
         <Stack className="page-header" direction="row" justifyContent="space-between" alignItems="center">
           <Stack
@@ -158,7 +159,10 @@ export default function SubscriptionDetail(props: { id: string }) {
             xs: 'column',
             lg: 'row',
           },
-          gap: 4,
+          gap: {
+            xs: 2.5,
+            md: 4,
+          },
           '.payment-link-column-1': {
             minWidth: {
               xs: '100%',
@@ -177,7 +181,7 @@ export default function SubscriptionDetail(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
@@ -332,7 +336,8 @@ export default function SubscriptionDetail(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('common.metadata.label')}>
               <Button

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

@@ -2,7 +2,7 @@
 import DidAddress from '@arcblock/ux/lib/DID';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import { api, formatBNStr, formatError, formatTime, usePaymentContext } from '@blocklet/payment-react';
+import { api, formatBNStr, formatError, formatTime, useMobile, usePaymentContext } from '@blocklet/payment-react';
 import type { GroupedBN, TCustomerExpanded, TPaymentMethodExpanded } from '@blocklet/payment-types';
 import { ArrowBackOutlined } from '@mui/icons-material';
 import { Alert, Avatar, Box, Button, CircularProgress, Divider, Stack, Typography } from '@mui/material';
@@ -76,6 +76,7 @@ function getTokenBalances(customer: TCustomerExpanded, paymentMethods: TPaymentM
 
 export default function CustomerDetail(props: { id: string }) {
   const { t } = useLocaleContext();
+  const { isMobile } = useMobile();
   const { settings } = usePaymentContext();
   const [state, setState] = useSetState({
     adding: {
@@ -146,7 +147,7 @@ export default function CustomerDetail(props: { id: string }) {
   };
 
   return (
-    <Root direction="column" spacing={4} sx={{ mb: 4 }}>
+    <Root direction="column" spacing={2.5} sx={{ mb: 4 }}>
       <Box>
         <Stack className="page-header" direction="row" justifyContent="space-between" alignItems="center">
           <Stack
@@ -241,7 +242,10 @@ export default function CustomerDetail(props: { id: string }) {
             xs: 'column',
             lg: 'row',
           },
-          gap: 4,
+          gap: {
+            xs: 2.5,
+            md: 4,
+          },
           '.payment-link-column-1': {
             minWidth: {
               xs: '100%',
@@ -260,7 +264,7 @@ export default function CustomerDetail(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>
@@ -387,10 +391,11 @@ export default function CustomerDetail(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.metrics')} />
-            <Box className="section-body">
+            <Box className="section-body" sx={{ '.info-row-value': { width: '100%' } }}>
               <InfoRow
                 label={t('admin.customer.spent')}
                 value={<BalanceList data={data.summary?.paid} showLogo />}

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

@@ -53,6 +53,9 @@ export default function CustomerIndex() {
           '.MuiTabs-hideScrollbar': {
             border: 'none !important',
           },
+          '.MuiTouchRipple-root': {
+            display: 'none',
+          },
         }}
       />
       {isValidElement(TabComponent) ? TabComponent : <TabComponent />}

package/src/pages/admin/developers/events/detail.tsx

@@ -3,7 +3,7 @@ import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { api, formatTime } from '@blocklet/payment-react';
 import type { TEventExpanded } from '@blocklet/payment-types';
 import { ArrowBackOutlined } from '@mui/icons-material';
-import { Alert, Box, CircularProgress, Stack, Typography } from '@mui/material';
+import { Alert, Box, CircularProgress, Divider, Stack, Typography } from '@mui/material';
 import { styled } from '@mui/system';
 import { useRequest } from 'ahooks';
 
@@ -31,7 +31,7 @@ export default function EventDetail(props: { id: string }) {
   }
 
   return (
-    <Root direction="column" spacing={4} sx={{ mb: 4 }}>
+    <Root direction="column" spacing={2.5} sx={{ mb: 4 }}>
       <Box>
         <Stack className="page-header" direction="row" justifyContent="space-between" alignItems="center">
           <Stack
@@ -44,26 +44,65 @@ export default function EventDetail(props: { id: string }) {
               {t('admin.events')}
             </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">
-            <Typography variant="h5" fontWeight={600}>
+            <Typography variant="h2" fontWeight={600}>
               {data.type}
             </Typography>
           </Stack>
           <Stack
             className="section-body"
-            direction="row"
-            spacing={3}
             justifyContent="flex-start"
             flexWrap="wrap"
-            sx={{ pt: 2, mt: 2, borderTop: '1px solid #eee' }}>
+            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 }} />} />
             <InfoMetric label={t('admin.event.pendingWebhooks')} value={data.pending_webhooks} divider />
             <InfoMetric label={t('common.createdAt')} value={formatTime(data.created_at)} divider />
             <InfoMetric label={t('common.updatedAt')} value={formatTime(data.updated_at)} />
           </Stack>
         </Box>
+        <Divider />
       </Box>
       <Box className="section">
         <SectionHeader title={t('admin.event.webhooks')} />

package/src/pages/admin/index.tsx

@@ -74,7 +74,7 @@ function Admin() {
   return (
     <>
       <ProgressBar pending={isPending} />
-      <Stack direction="row" alignItems="center" justifyContent="end" flexWrap="wrap" spacing={1} sx={{ mt: 1, pb: 1 }}>
+      <Stack direction="row" alignItems="center" justifyContent="end" flexWrap="wrap" spacing={1} sx={{ mt: 1, pb: 2 }}>
         {/* <Box>{renderNav(group, onTabChange, group1)}</Box> */}
         <Tabs
           tabs={group1}
@@ -93,6 +93,9 @@ function Admin() {
                 color: 'text.primary',
               },
             },
+            '.MuiTouchRipple-root': {
+              display: 'none',
+            },
           }}
         />
         <Stack direction="row" alignItems="center">

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

@@ -69,6 +69,9 @@ export default function PaymentIndex() {
           '.MuiTabs-hideScrollbar': {
             border: 'none !important',
           },
+          '.MuiTouchRipple-root': {
+            display: 'none',
+          },
         }}
       />
       {isValidElement(TabComponent) ? TabComponent : <TabComponent />}

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

@@ -11,6 +11,7 @@ import {
   formatError,
   formatTime,
   getPaymentIntentStatusColor,
+  useMobile,
 } from '@blocklet/payment-react';
 import type { TPaymentIntentExpanded } from '@blocklet/payment-types';
 import { ArrowBackOutlined, InfoOutlined } from '@mui/icons-material';
@@ -41,6 +42,7 @@ const InfoAlignItems = 'flex-start';
 
 export default function PaymentIntentDetail(props: { id: string }) {
   const { t } = useLocaleContext();
+  const { isMobile } = useMobile();
   const [state, setState] = useSetState({
     adding: {
       price: false,
@@ -90,7 +92,7 @@ export default function PaymentIntentDetail(props: { id: string }) {
     setState((prev) => ({ editing: { ...prev.editing, metadata: true } }));
   };
   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
@@ -183,7 +185,10 @@ export default function PaymentIntentDetail(props: { id: string }) {
             xs: 'column',
             lg: 'row',
           },
-          gap: 4,
+          gap: {
+            xs: 2.5,
+            md: 4,
+          },
           '.payment-link-column-1': {
             minWidth: {
               xs: '100%',
@@ -202,7 +207,7 @@ export default function PaymentIntentDetail(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
@@ -285,7 +290,8 @@ export default function PaymentIntentDetail(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>