payment-kit 1.18.17 → 1.18.19

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

@@ -10,8 +10,26 @@ import {
   useMobile,
 } from '@blocklet/payment-react';
 import type { TPaymentCurrency, TSubscriptionExpanded } from '@blocklet/payment-types';
-import { ArrowBackOutlined, CheckCircle } from '@mui/icons-material';
-import { Alert, Avatar, Box, Button, CircularProgress, Divider, Stack, Typography } from '@mui/material';
+import {
+  AccountBalanceWalletOutlined,
+  ArrowBackOutlined,
+  CheckCircle,
+  HelpOutline,
+  SettingsOutlined,
+} from '@mui/icons-material';
+import {
+  Alert,
+  Avatar,
+  Box,
+  Button,
+  CircularProgress,
+  Divider,
+  Stack,
+  Typography,
+  Link as MuiLink,
+  IconButton,
+  Tooltip,
+} from '@mui/material';
 import { useRequest } from 'ahooks';
 import { Link, useNavigate, useParams } from 'react-router-dom';
 import { styled } from '@mui/system';
@@ -29,6 +47,7 @@ import { useSessionContext } from '../../../contexts/session';
 import InfoMetric from '../../../components/info-metric';
 import { useUnpaidInvoicesCheckForSubscription } from '../../../hooks/subscription';
 import { formatSmartDuration, TimeUnit } from '../../../libs/dayjs';
+import InfoRowGroup from '../../../components/info-row-group';
 
 const fetchData = (id: string | undefined): Promise<TSubscriptionExpanded> => {
   return api.get(`/api/subscriptions/${id}`).then((res) => res.data);
@@ -47,9 +66,6 @@ const fetchCycleAmount = (
   return api.get(`/api/subscriptions/${subscriptionId}/cycle-amount`, { params }).then((res) => res.data);
 };
 
-const InfoDirection = 'column';
-const InfoAlignItems = 'flex-start';
-
 export default function CustomerSubscriptionDetail() {
   const { id } = useParams() as { id: string };
   const navigate = useNavigate();
@@ -176,52 +192,79 @@ export default function CustomerSubscriptionDetail() {
     }
 
     return (
-      <Stack direction="row" spacing={1} alignItems="center">
-        <Stack direction="row" spacing={0.5} alignItems="center">
-          <CheckCircle
+      <Stack direction="row" alignItems="center">
+        <Stack direction="row" spacing={1} alignItems="center">
+          <Stack direction="row" spacing={0.5} alignItems="center">
+            <CheckCircle
+              sx={{
+                fontSize: '16px',
+                color: 'success.main',
+                verticalAlign: 'middle',
+              }}
+            />
+            <Typography
+              sx={{
+                color: 'success.main',
+                fontWeight: 500,
+              }}>
+              {t('customer.overdraftProtection.enabled')}
+            </Typography>
+          </Stack>
+          <Divider
+            orientation="vertical"
+            flexItem
             sx={{
-              fontSize: '16px',
-              color: 'success.main',
-              verticalAlign: 'middle',
+              mx: 1,
+              borderColor: 'divider',
             }}
           />
           <Typography
             sx={{
-              color: 'success.main',
+              color: 'text.primary',
+              display: 'flex',
+              alignItems: 'center',
+              gap: 0.5,
               fontWeight: 500,
             }}>
-            {t('customer.overdraftProtection.enabled')}
+            <Avatar
+              src={data.paymentCurrency?.logo}
+              sx={{ width: 16, height: 16 }}
+              alt={data.paymentCurrency?.symbol}
+            />
+            <Box display="flex" alignItems="baseline">
+              {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>
-        <Divider
-          orientation="vertical"
-          flexItem
-          sx={{
-            mx: 1,
-            borderColor: 'divider',
-          }}
-        />
-        <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 display="flex" alignItems="baseline">
-            {formatBNStr(overdraftProtection?.unused, data.paymentCurrency.decimal)}
-            <Typography
+        {data?.overdraft_protection?.enabled && (
+          <Tooltip title={t('customer.overdraftProtection.setting')} placement="top">
+            <IconButton
+              size="small"
               sx={{
-                color: 'text.secondary',
-                fontSize: '14px',
-                ml: 0.5,
-              }}>
-              {data.paymentCurrency.symbol}（{formatEstimatedDuration(Math.ceil(remainingStake / estimateAmount))}）
-            </Typography>
-          </Box>
-        </Typography>
+                ml: -1,
+                color: 'text.disabled',
+                '&:hover': {
+                  color: 'primary.main',
+                  backgroundColor: 'transparent',
+                },
+              }}
+              onClick={() =>
+                actionRef.current?.openOverdraftProtection({
+                  enabled: true,
+                })
+              }>
+              <SettingsOutlined fontSize="small" sx={{ fontSize: 16 }} />
+            </IconButton>
+          </Tooltip>
+        )}
       </Stack>
     );
   };
@@ -337,57 +380,112 @@ export default function CustomerSubscriptionDetail() {
             }}>
             <SubscriptionMetrics subscription={data} />
             {showOverdraftProtection && (
-              <InfoMetric label={t('customer.overdraftProtection.title')} value={renderOverdraftProtectionLabel()} />
+              <InfoMetric
+                label={
+                  <Stack direction="row" alignItems="center" spacing={0.5}>
+                    <Typography variant="body2" component="span">
+                      {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"
+                      rel="noopener noreferrer"
+                      sx={{
+                        display: 'flex',
+                        alignItems: 'center',
+                      }}>
+                      <Tooltip title={t('customer.overdraftProtection.learnMore')} placement="top">
+                        <HelpOutline
+                          fontSize="small"
+                          sx={{
+                            fontSize: '14px',
+                            ml: -0.2,
+                            color: 'text.secondary',
+                            cursor: 'pointer',
+                            opacity: 0.8,
+                            '&:hover': { color: 'primary.main' },
+                          }}
+                        />
+                      </Tooltip>
+                    </MuiLink>
+                    {data.overdraft_protection?.payment_details?.arcblock?.staking?.address && (
+                      <Tooltip
+                        title={
+                          <Typography sx={{ fontFamily: 'monospace', fontSize: '13px' }}>
+                            {t('customer.overdraftProtection.stakingAddress')}：
+                            {data.overdraft_protection?.payment_details?.arcblock?.staking?.address}
+                          </Typography>
+                        }
+                        arrow
+                        placement="top">
+                        <AccountBalanceWalletOutlined
+                          sx={{
+                            fontSize: '16px',
+                            color: 'text.secondary',
+                            cursor: 'pointer',
+                            ml: 1,
+                            '&:hover': { color: 'primary.main' },
+                            display: {
+                              xs: 'none',
+                              md: 'block',
+                            },
+                          }}
+                        />
+                      </Tooltip>
+                    )}
+                  </Stack>
+                }
+                value={renderOverdraftProtectionLabel()}
+              />
             )}
           </Stack>
         </Box>
       </Box>
       <Divider />
-      <Box className="section">
+      <Box className="section" sx={{ containerType: 'inline-size' }}>
         <Typography variant="h3" mb={3} className="section-header">
           {t('admin.details')}
         </Typography>
-        <Box
+        <InfoRowGroup
           sx={{
             display: 'grid',
             gridTemplateColumns: {
               xs: 'repeat(1, 1fr)',
-              sm: 'repeat(1, 1fr)',
-              md: 'repeat(2, 1fr)',
-              lg: 'repeat(3, 1fr)',
+              xl: 'repeat(2, 1fr)',
             },
-            gap: {
-              xs: 0,
-              md: 2,
+            '@container (min-width: 980px)': {
+              gridTemplateColumns: 'repeat(2, 1fr)',
+            },
+            '.info-row-wrapper': {
+              gap: 1,
+              flexDirection: {
+                xs: 'column',
+                xl: 'row',
+              },
+              alignItems: {
+                xs: 'flex-start',
+                xl: 'center',
+              },
+              '@container (min-width: 980px)': {
+                flexDirection: 'row',
+                alignItems: 'center',
+              },
+            },
+            '.currency-name': {
+              color: 'text.secondary',
             },
           }}>
           <InfoRow
             label={t('common.customer')}
-            value={<CustomerLink customer={data.customer} linked={false} />}
-            direction={InfoDirection}
-            alignItems={InfoAlignItems}
+            value={<CustomerLink customer={data.customer} linked={false} size={isMobile ? 'default' : 'small'} />}
           />
-          <InfoRow
-            label={t('common.createdAt')}
-            value={formatTime(data.created_at)}
-            direction={InfoDirection}
-            alignItems={InfoAlignItems}
-          />
-          {data.status === 'paused' && !!data.pause_collection?.resumes_at && (
-            <InfoRow
-              label={t('common.resumesAt')}
-              value={formatTime(data.pause_collection.resumes_at * 1000)}
-              direction={InfoDirection}
-              alignItems={InfoAlignItems}
-            />
-          )}
+          <InfoRow label={t('common.createdAt')} value={formatTime(data.created_at)} />
+
           <InfoRow
             label={t('admin.subscription.currentPeriod')}
             value={[formatTime(data.current_period_start * 1000), formatTime(data.current_period_end * 1000)].join(
               ' ~ '
             )}
-            direction={InfoDirection}
-            alignItems={InfoAlignItems}
           />
           <InfoRow
             label={t('admin.subscription.trialingPeriod')}
@@ -396,26 +494,17 @@ export default function CustomerSubscriptionDetail() {
                 ? [formatTime(data.trial_start * 1000), formatTime(data.trial_end * 1000)].join(' ~ ')
                 : ''
             }
-            direction={InfoDirection}
-            alignItems={InfoAlignItems}
-          />
-          <InfoRow
-            label={t('admin.subscription.discount')}
-            value={data.discount_id ? data.discount_id : ''}
-            direction={InfoDirection}
-            alignItems={InfoAlignItems}
-          />
-          <InfoRow
-            label={t('admin.subscription.collectionMethod')}
-            value={data.collection_method}
-            direction={InfoDirection}
-            alignItems={InfoAlignItems}
           />
+          {data.status === 'paused' && !!data.pause_collection?.resumes_at && (
+            <InfoRow label={t('common.resumesAt')} value={formatTime(data.pause_collection.resumes_at * 1000)} />
+          )}
+
+          <InfoRow label={t('admin.subscription.collectionMethod')} value={data.collection_method} />
+          <InfoRow label={t('admin.subscription.discount')} value={data.discount_id ? data.discount_id : ''} />
+
           <InfoRow
             label={t('admin.paymentMethod._name')}
             value={<Currency logo={data.paymentMethod?.logo} name={data.paymentMethod?.name} />}
-            alignItems={InfoAlignItems}
-            direction={InfoDirection}
           />
           <InfoRow
             label={t('admin.paymentCurrency.name')}
@@ -439,15 +528,12 @@ export default function CustomerSubscriptionDetail() {
                 )}
               </Stack>
             }
-            direction={InfoDirection}
-            alignItems={InfoAlignItems}
           />
+
           {data.payment_details && hasDelegateTxHash(data.payment_details, data.paymentMethod) && (
             <InfoRow
               label={t('common.delegateTxHash')}
               value={<TxLink details={data.payment_details} method={data.paymentMethod} />}
-              direction={InfoDirection}
-              alignItems={InfoAlignItems}
             />
           )}
           {data.paymentMethod?.type === 'arcblock' && data.payment_details?.arcblock?.staking?.tx_hash && (
@@ -466,8 +552,6 @@ export default function CustomerSubscriptionDetail() {
                   />
                 </Box>
               }
-              direction={InfoDirection}
-              alignItems={InfoAlignItems}
             />
           )}
           {!!data.recovered_from && (
@@ -478,11 +562,9 @@ export default function CustomerSubscriptionDetail() {
                   {data.recovered_from}
                 </Link>
               }
-              direction={InfoDirection}
-              alignItems={InfoAlignItems}
             />
           )}
-        </Box>
+        </InfoRowGroup>
       </Box>
       <Divider />
       <Box className="section">