payment-kit 1.18.18 → 1.18.20

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

@@ -14,6 +14,7 @@ import {
   getPrefix,
   usePaymentContext,
   PaymentBeneficiaries,
+  useMobile,
 } from '@blocklet/payment-react';
 import type { TCheckoutSession, TInvoiceExpanded, TPaymentLink } from '@blocklet/payment-types';
 import { ArrowBackOutlined } from '@mui/icons-material';
@@ -34,6 +35,7 @@ import InvoiceTable from '../../../components/invoice/table';
 import { goBackOrFallback } from '../../../libs/util';
 import CustomerRefundList from '../refund/list';
 import InfoMetric from '../../../components/info-metric';
+import InfoRowGroup from '../../../components/info-row-group';
 
 const fetchData = (
   id: string
@@ -43,11 +45,10 @@ const fetchData = (
   return api.get(`/api/invoices/${id}`).then((res) => res.data);
 };
 
-const InfoDirection = 'column';
-const InfoAlignItems = 'flex-start';
 export default function CustomerInvoiceDetail() {
   const { t, locale } = useLocaleContext();
   const [searchParams] = useSearchParams();
+  const { isMobile } = useMobile();
   const { connect } = usePaymentContext();
   const params = useParams<{ id: string }>();
   const [state, setState] = useSetState({
@@ -138,7 +139,16 @@ export default function CustomerInvoiceDetail() {
           </Typography>
         </Stack>
         <Stack direction="row" spacing={1} justifyContent="flex-end" alignItems="center">
-          {['open', 'paid', 'uncollectible'].includes(data.status) && <Download data={data} />}
+          {['open', 'paid', 'uncollectible'].includes(data.status) && !isDonation && <Download data={data} />}
+          {data?.paymentLink?.donation_settings?.reference && (
+            <Button
+              variant="outlined"
+              onClick={() => {
+                window.open(data?.paymentLink?.donation_settings?.reference, '_blank');
+              }}>
+              {t('customer.payout.viewReference')}
+            </Button>
+          )}
           {['open', 'uncollectible'].includes(data.status) && !hidePayButton && (
             <Button
               variant="outlined"
@@ -240,51 +250,50 @@ export default function CustomerInvoiceDetail() {
         </Stack>
       </Box>
       <Divider />
-      <Box className="section">
+      <Box className="section" sx={{ containerType: 'inline-size' }}>
         <Typography variant="h3" mb={3} className="section-header">
           {t('payment.customer.invoice.details')}
         </Typography>
-        <Stack
-          className="invoice-summary-wrapper"
+        <InfoRowGroup
           sx={{
             display: 'grid',
             gridTemplateColumns: {
               xs: 'repeat(1, 1fr)',
-              sm: 'repeat(1, 1fr)',
-              md: 'repeat(2, 1fr)',
-              lg: 'repeat(3, 1fr)',
+              lg: 'repeat(2, 1fr)',
             },
-            gap: {
-              xs: 0,
-              md: 2,
+            '@container (min-width: 980px)': {
+              gridTemplateColumns: 'repeat(2, 1fr)',
+            },
+            '.info-row-wrapper': {
+              gap: 1,
+              flexDirection: {
+                xs: 'column',
+                lg: 'row',
+              },
+              alignItems: {
+                xs: 'flex-start',
+                lg: 'center',
+              },
+              '@container (min-width: 980px)': {
+                flexDirection: 'row',
+                alignItems: 'center',
+              },
+            },
+            '.currency-name': {
+              color: 'text.secondary',
             },
           }}>
           <InfoRow
-            label={t('admin.invoice.description')}
-            value={getInvoiceDescriptionAndReason(data, locale)?.description}
-            direction={InfoDirection}
-            alignItems={InfoAlignItems}
-          />
-          <InfoRow
-            label={t('admin.invoice.from')}
-            value={data.statement_descriptor || blocklet.appName}
-            direction={InfoDirection}
-            alignItems={InfoAlignItems}
+            label={t('admin.invoice.billTo')}
+            value={<CustomerLink customer={data.customer} linked={false} size={isMobile ? 'default' : 'small'} />}
           />
-
+          <InfoRow label={t('admin.invoice.from')} value={data.statement_descriptor || blocklet.appName} />
           <InfoRow
-            label={t('admin.invoice.billTo')}
-            value={<CustomerLink customer={data.customer} linked={false} />}
-            direction={InfoDirection}
-            alignItems={InfoAlignItems}
+            label={t('admin.invoice.description')}
+            value={getInvoiceDescriptionAndReason(data, locale)?.description}
           />
           {data.status_transitions?.paid_at && (
-            <InfoRow
-              label={t('admin.invoice.paidAt')}
-              value={formatTime(data.status_transitions.paid_at * 1000)}
-              direction={InfoDirection}
-              alignItems={InfoAlignItems}
-            />
+            <InfoRow label={t('admin.invoice.paidAt')} value={formatTime(data.status_transitions.paid_at * 1000)} />
           )}
           <InfoRow
             label={t('admin.paymentCurrency.name')}
@@ -294,15 +303,17 @@ export default function CustomerInvoiceDetail() {
                 name={`${data.paymentCurrency.symbol} (${data.paymentMethod.name})`}
               />
             }
-            direction={InfoDirection}
-            alignItems={InfoAlignItems}
           />
+          {(isStake || isSlashStake) && (
+            <InfoRow
+              label={isSlashStake ? t('common.slashStakeAmount') : t('common.stakeAmount')}
+              value={`${formatAmount(data.total, data.paymentCurrency.decimal)} ${data.paymentCurrency.symbol}`}
+            />
+          )}
           {(!!data.paymentIntent?.payment_details?.ethereum || !!data.paymentIntent?.payment_details?.base) && (
             <InfoRow
               label={t('common.txGas')}
               value={<TxGas details={data.paymentIntent.payment_details as any} method={data.paymentMethod} />}
-              direction={InfoDirection}
-              alignItems={InfoAlignItems}
             />
           )}
           {paymentDetails && (
@@ -311,16 +322,6 @@ export default function CustomerInvoiceDetail() {
                 isStake ? t('common.stakeTxHash') : t(`common.${paymentDetails?.arcblock?.type || 'transfer'}TxHash`)
               }
               value={<TxLink details={paymentDetails} method={data.paymentMethod} mode="customer" />}
-              direction={InfoDirection}
-              alignItems={InfoAlignItems}
-            />
-          )}
-          {(isStake || isSlashStake) && (
-            <InfoRow
-              label={isSlashStake ? t('common.slashStakeAmount') : t('common.stakeAmount')}
-              value={`${formatAmount(data.total, data.paymentCurrency.decimal)} ${data.paymentCurrency.symbol}`}
-              direction={InfoDirection}
-              alignItems={InfoAlignItems}
             />
           )}
           {data?.relatedInvoice && (
@@ -338,11 +339,9 @@ export default function CustomerInvoiceDetail() {
                   {data.relatedInvoice?.number}
                 </Typography>
               }
-              direction={InfoDirection}
-              alignItems={InfoAlignItems}
             />
           )}
-        </Stack>
+        </InfoRowGroup>
       </Box>
       {isDonation && !isEmpty(data.paymentIntent?.beneficiaries) && (
         <>

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

@@ -25,6 +25,7 @@ import SectionHeader from '../../../components/section/header';
 import { getCustomerProfileUrl, goBackOrFallback } from '../../../libs/util';
 import CustomerLink from '../../../components/customer/link';
 import InfoCard from '../../../components/info-card';
+import InfoRowGroup from '../../../components/info-row-group';
 
 const fetchData = (
   id: string
@@ -37,9 +38,6 @@ const fetchData = (
   return api.get(`/api/payouts/${id}`).then((res) => res.data);
 };
 
-const InfoDirection = 'column';
-const InfoAlignItems = 'flex-start';
-
 export default function PayoutDetail() {
   const { t } = useLocaleContext();
   const { isMobile } = useMobile();
@@ -237,41 +235,37 @@ export default function PayoutDetail() {
         <Box flex={1} className="payment-link-column-1" sx={{ gap: 2.5, display: 'flex', flexDirection: 'column' }}>
           <Box className="section">
             <SectionHeader title={t('common.detail')} />
-            <Stack
+            <InfoRowGroup
               sx={{
                 display: 'grid',
                 gridTemplateColumns: {
                   xs: 'repeat(1, 1fr)',
-                  sm: 'repeat(1, 1fr)',
-                  md: 'repeat(2, 1fr)',
-                  lg: 'repeat(3, 1fr)',
+                  lg: 'repeat(2, 1fr)',
                 },
-                gap: {
-                  xs: 0,
-                  md: 2,
+                '.info-row-wrapper': {
+                  gap: 1,
+                  flexDirection: {
+                    xs: 'column',
+                    lg: 'row',
+                  },
+                  alignItems: {
+                    xs: 'flex-start',
+                    lg: 'center',
+                  },
                 },
               }}>
-              <InfoRow
-                label={t('common.createdAt')}
-                value={formatTime(data.created_at)}
-                direction={InfoDirection}
-                alignItems={InfoAlignItems}
-              />
+              <InfoRow label={t('common.createdAt')} value={formatTime(data.created_at)} />
               {paymentIntent && paymentIntent.payment_details && (
                 <InfoRow
                   label={t('customer.payout.payTxHash')}
                   value={<TxLink details={paymentIntent.payment_details} method={data.paymentMethod} mode="customer" />}
-                  direction={InfoDirection}
-                  alignItems={InfoAlignItems}
                 />
               )}
               <InfoRow
                 label={t('customer.payout.receiver')}
-                value={<CustomerLink customer={data.customer} linked={false} />}
-                direction={InfoDirection}
-                alignItems={InfoAlignItems}
+                value={<CustomerLink customer={data.customer} linked={false} size={isMobile ? 'default' : 'small'} />}
               />
-            </Stack>
+            </InfoRowGroup>
           </Box>
         </Box>
       </Stack>

package/src/pages/customer/recharge/account.tsx

@@ -31,9 +31,11 @@ import type { TPaymentCurrency, TPaymentMethod } from '@blocklet/payment-types';
 import { joinURL } from 'ufo';
 import { AccountBalanceWalletOutlined, ArrowBackOutlined, ArrowForwardOutlined } from '@mui/icons-material';
 import Empty from '@arcblock/ux/lib/Empty';
+import { BN } from '@ocap/util';
 import RechargeList from '../../../components/invoice/recharge';
 import { getTokenBalanceLink, goBackOrFallback } from '../../../libs/util';
 import { useSessionContext } from '../../../contexts/session';
+import { formatSmartDuration, TimeUnit } from '../../../libs/dayjs';
 
 // 扩展PaymentCurrency类型以包含paymentMethod
 interface ExtendedPaymentCurrency extends TPaymentCurrency {
@@ -81,12 +83,21 @@ export default function BalanceRechargePage() {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState('');
   const customInputRef = useRef<HTMLInputElement>(null);
+  const [unitCycle, setUnitCycle] = useState<{
+    amount: string;
+    interval: TimeUnit;
+    cycle: number;
+  }>({
+    amount: '0',
+    interval: 'month',
+    cycle: 1,
+  });
   const [payerValue, setPayerValue] = useState<{
     paymentAddress: string;
     token: string;
   } | null>(null);
   const [customAmount, setCustomAmount] = useState(false);
-  const [presetAmounts] = useState<Array<{ amount: string }>>([{ amount: '10' }, { amount: '50' }, { amount: '100' }]);
+  const [presetAmounts, setPresetAmounts] = useState<Array<{ amount: string; multiplier: number; label: string }>>([]);
   const { session } = useSessionContext();
   const [currency, setCurrency] = useState<ExtendedPaymentCurrency | null>(null);
   const [relatedSubscriptions, setRelatedSubscriptions] = useState<Subscription[]>([]);
@@ -105,6 +116,62 @@ export default function BalanceRechargePage() {
       if (data.currency) {
         setCurrency(data.currency);
         setRelatedSubscriptions(data.relatedSubscriptions || []);
+
+        if (data.recommendedRecharge && data.recommendedRecharge.amount && data.recommendedRecharge.amount !== '0') {
+          const baseAmount = data.recommendedRecharge.amount;
+          const decimal = data.currency.decimal || 0;
+          setUnitCycle({
+            amount: parseFloat(formatBNStr(baseAmount, decimal, 6, true)).toString(),
+            interval: data.recommendedRecharge.interval as TimeUnit,
+            cycle: data.recommendedRecharge.cycle,
+          });
+          setPresetAmounts([
+            {
+              amount: Math.ceil(parseFloat(formatBNStr(baseAmount, decimal, 6, true))).toString(),
+              multiplier: data.recommendedRecharge.cycle,
+              label: t('common.estimatedDuration', {
+                duration: formatSmartDuration(1, data.recommendedRecharge.interval as TimeUnit, {
+                  t,
+                }),
+              }),
+            },
+            {
+              amount: Math.ceil(
+                parseFloat(formatBNStr(new BN(baseAmount).mul(new BN('4')).toString(), decimal, 6, true))
+              ).toString(),
+              multiplier: data.recommendedRecharge.cycle * 4,
+              label: t('common.estimatedDuration', {
+                duration: formatSmartDuration(4, data.recommendedRecharge.interval as TimeUnit, {
+                  t,
+                }),
+              }),
+            },
+            {
+              amount: Math.ceil(
+                parseFloat(formatBNStr(new BN(baseAmount).mul(new BN('8')).toString(), decimal, 6, true))
+              ).toString(),
+              multiplier: data.recommendedRecharge.cycle * 8,
+              label: t('common.estimatedDuration', {
+                duration: formatSmartDuration(8, data.recommendedRecharge.interval as TimeUnit, {
+                  t,
+                }),
+              }),
+            },
+          ]);
+
+          setAmount(
+            Math.ceil(
+              parseFloat(formatBNStr(new BN(baseAmount).mul(new BN('4')).toString(), decimal, 6, true))
+            ).toString()
+          );
+        } else {
+          setPresetAmounts([
+            { amount: '10', multiplier: 0, label: '' },
+            { amount: '50', multiplier: 0, label: '' },
+            { amount: '100', multiplier: 0, label: '' },
+          ]);
+        }
+
         const supportRecharge = data.currency?.paymentMethod?.type === 'arcblock';
         if (supportRecharge) {
           const payerTokenRes = await api.get(`/api/customers/payer-token?currencyId=${currencyId}`);
@@ -261,7 +328,7 @@ export default function BalanceRechargePage() {
 
       {currency && (
         <Box ref={rechargeRef}>
-          <Stack sx={{ maxWidth: '600px' }}>
+          <Stack sx={{ maxWidth: '760px' }}>
             <Box sx={{ mb: 4 }}>
               <BalanceCard elevation={0}>
                 <Stack direction="row" justifyContent="space-between" alignItems="center" spacing={2}>
@@ -341,7 +408,7 @@ export default function BalanceRechargePage() {
 
             <Paper elevation={0} sx={{ mb: 3, backgroundColor: 'background.default', borderRadius: '16px' }}>
               <Grid container spacing={2}>
-                {presetAmounts.map(({ amount: presetAmount }) => (
+                {presetAmounts.map(({ amount: presetAmount, label, multiplier }) => (
                   <Grid item xs={6} sm={3} key={presetAmount}>
                     <Card
                       variant="outlined"
@@ -365,7 +432,9 @@ export default function BalanceRechargePage() {
                             }
                           : {}),
                       }}>
-                      <CardActionArea onClick={() => handleSelect(presetAmount)} sx={{ height: '100%', p: 1.5 }}>
+                      <CardActionArea
+                        onClick={() => handleSelect(presetAmount)}
+                        sx={{ height: '100%', p: 1.5, textAlign: 'center' }}>
                         <Typography
                           variant="h6"
                           align="center"
@@ -375,6 +444,11 @@ export default function BalanceRechargePage() {
                           }}>
                           {presetAmount} {currency.symbol}
                         </Typography>
+                        {multiplier > 0 && label && (
+                          <Typography variant="caption" align="center" color="text.secondary">
+                            {label}
+                          </Typography>
+                        )}
                       </CardActionArea>
                     </Card>
                   </Grid>
@@ -434,6 +508,19 @@ export default function BalanceRechargePage() {
                   }}
                   inputRef={customInputRef}
                 />
+                {amount && Number(amount) > 0 && Number(unitCycle.amount) > 0 && !amountError && (
+                  <Typography variant="body2" sx={{ color: 'text.lighter', mt: 1 }} fontSize={12}>
+                    {t('common.estimatedDuration', {
+                      duration: formatSmartDuration(
+                        Math.floor(Number(amount) / Number(unitCycle.amount)) < 1
+                          ? parseFloat((Number(amount) / Number(unitCycle.amount)).toFixed(1))
+                          : Math.floor(Number(amount) / Number(unitCycle.amount)),
+                        unitCycle.interval,
+                        { t }
+                      ),
+                    })}
+                  </Typography>
+                )}
               </Box>
             )}
 
@@ -464,39 +551,37 @@ export default function BalanceRechargePage() {
                 {t('customer.recharge.relatedSubscriptions')}
               </Typography>
 
-              <Stack direction="row" sx={{ flexWrap: 'wrap', gap: 2 }}>
+              <Grid container spacing={2}>
                 {relatedSubscriptions.map((subscription) => (
-                  <Stack
-                    key={subscription.id}
-                    onClick={() => handleSubscriptionClick(subscription.id)}
-                    className="base-card"
-                    sx={{
-                      minWidth: '220px',
-                      flex: 1,
-                    }}>
-                    <Stack direction="row" alignItems="center" spacing={1.5} sx={{ mb: 1 }}>
-                      <Typography
-                        variant="subtitle1"
-                        sx={{
-                          fontWeight: 'medium',
-                          overflow: 'hidden',
-                          textOverflow: 'ellipsis',
-                          whiteSpace: 'nowrap',
-                          color: 'text.link',
-                          cursor: 'pointer',
-                        }}>
-                        {subscription.description || subscription.id}
-                      </Typography>
-                    </Stack>
+                  <Grid item xs={12} sm={6} md={4} lg={3} key={subscription.id}>
+                    <Stack
+                      onClick={() => handleSubscriptionClick(subscription.id)}
+                      className="base-card"
+                      sx={{ height: '100%' }}>
+                      <Stack direction="row" alignItems="center" spacing={1.5} sx={{ mb: 1 }}>
+                        <Typography
+                          variant="subtitle1"
+                          sx={{
+                            fontWeight: 'medium',
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            whiteSpace: 'nowrap',
+                            color: 'text.link',
+                            cursor: 'pointer',
+                          }}>
+                          {subscription.description || subscription.id}
+                        </Typography>
+                      </Stack>
 
-                    {subscription.items && subscription.items[0] && currency && (
-                      <Typography variant="body1" sx={{ color: 'text.secondary' }}>
-                        {formatPrice(subscription.items[0].price, currency)}
-                      </Typography>
-                    )}
-                  </Stack>
+                      {subscription.items && subscription.items[0] && currency && (
+                        <Typography variant="body1" sx={{ color: 'text.secondary' }}>
+                          {formatPrice(subscription.items[0].price, currency)}
+                        </Typography>
+                      )}
+                    </Stack>
+                  </Grid>
                 ))}
-              </Stack>
+              </Grid>
             </Box>
           )}
           <Divider sx={{ mb: 3 }} />

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

@@ -294,6 +294,12 @@ export default function RechargePage() {
             display: 'grid',
             gridTemplateColumns: { xs: 'repeat(1, 1fr)', sm: 'repeat(1, 1fr)', md: 'repeat(1, 1fr)' },
             gap: { xs: 0, md: 2 },
+            '.currency-name': {
+              color: 'text.secondary',
+            },
+            '.info-row-label': {
+              fontWeight: 500,
+            },
           }}>
           <InfoRow
             label={t('common.customer')}
@@ -473,7 +479,11 @@ export default function RechargePage() {
                 />
                 {amount && Number(amount) > 0 && Number(cycleAmount) > 0 && !amountError && (
                   <Typography variant="body2" sx={{ color: 'text.lighter', mt: '8px !important' }} fontSize={12}>
-                    {formatEstimatedDuration(Math.floor(Number(amount) / Number(cycleAmount)))}
+                    {formatEstimatedDuration(
+                      Math.floor(Number(amount) / Number(cycleAmount)) < 1
+                        ? parseFloat((Number(amount) / Number(cycleAmount)).toFixed(1))
+                        : Math.floor(Number(amount) / Number(cycleAmount))
+                    )}
                   </Typography>
                 )}
               </Box>