@blocklet/payment-react 1.26.0 → 1.26.2

package/src/checkout-v2/panels/right/payment-panel.tsx

@@ -39,10 +39,10 @@ import {
 import { joinURL } from 'ufo';
 import { usePaymentContext } from '../../../contexts/payment';
 import { useMobile } from '../../../hooks/mobile';
-import { getPrefix } from '../../../libs/util';
+import { getPrefix, getStatementDescriptor } from '../../../libs/util';
 import OverdueInvoicePayment from '../../../components/over-due-invoice-payment';
 
-import { tSafe, whiteTooltipSx } from '../../utils/format';
+import { tSafe, whiteTooltipSx, primaryContrastColor } from '../../utils/format';
 import CustomerInfoCard from '../../components/right/customer-info-card';
 import SubscriptionDisclaimer from '../../components/right/subscription-disclaimer';
 import StatusFeedback from '../../components/right/status-feedback';
@@ -459,6 +459,7 @@ export default function PaymentPanel() {
               }}
               discounts={discounts}
               discountAmount={pricing.discount}
+              isAmountLoading={isAmountLoading}
             />
           </>
         )}
@@ -564,15 +565,39 @@ export default function PaymentPanel() {
           disabled={!canSubmit || submit.status === 'waiting_stripe'}
           onClick={handleAction}
           startIcon={isProcessing ? <CircularProgress size={20} color="inherit" /> : null}
-          endIcon={!isProcessing ? <ArrowForwardIcon /> : undefined}
           sx={{
             py: 1.5,
             fontSize: '1.1rem',
             fontWeight: 600,
             textTransform: 'none',
             borderRadius: '12px',
+            color: (theme) => primaryContrastColor(theme),
+            position: 'relative',
+            overflow: 'hidden',
+            '&:hover': { bgcolor: 'primary.main' },
+            '&:hover .arrow-icon': { transform: 'translateX(4px)' },
+            '&:hover .shine-layer': { transform: 'translateX(100%)' },
           }}>
-          {isProcessing ? `${t('payment.checkout.processing')}...` : buttonLabel}
+          <Box component="span" sx={{ position: 'relative', zIndex: 1 }}>
+            {isProcessing ? `${t('payment.checkout.processing')}...` : buttonLabel}
+          </Box>
+          {!isProcessing && (
+            <ArrowForwardIcon
+              className="arrow-icon"
+              sx={{ ml: 1, position: 'relative', zIndex: 1, transition: 'transform 0.2s ease' }}
+            />
+          )}
+          <Box
+            className="shine-layer"
+            sx={{
+              position: 'absolute',
+              inset: 0,
+              background: 'linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent)',
+              transform: 'translateX(-100%)',
+              transition: 'transform 0.7s ease',
+              pointerEvents: 'none',
+            }}
+          />
         </Button>
 
         {/* Mobile: SSL footer inside fixed bar, below button */}
@@ -642,7 +667,7 @@ export default function PaymentPanel() {
           mode={mode}
           subscription={subscription}
           staking={pricing.staking}
-          appName={(session?.metadata as any)?.app_name || 'New Payment Kit'}
+          appName={getStatementDescriptor(session?.line_items || [])}
         />
 
         {!isMobile && (

package/src/checkout-v2/utils/format.ts

@@ -1,6 +1,8 @@
 import { fromUnitToToken } from '@ocap/util';
 import type { TPaymentCurrency } from '@blocklet/payment-types';
 
+export { primaryContrastColor } from '../../libs/util';
+
 // Interval key → locale key mapping
 export const INTERVAL_LOCALE_KEY: Record<string, string> = {
   day: 'common.daily',
@@ -29,7 +31,7 @@ export function formatTokenAmount(unitAmount: string | number | bigint, currency
     const abs = Math.abs(num);
     const precision = abs > 0 && abs < 0.01 ? 6 : 2;
     const formatted = num.toLocaleString('en-US', { minimumFractionDigits: 0, maximumFractionDigits: precision });
-    return formatted.replace(/\.?0+$/, '') || '0';
+    return formatted.replace(/(\.\d*?)0+$/, '$1').replace(/\.$/, '') || '0';
   } catch {
     return '0';
   }
@@ -90,7 +92,8 @@ export function formatDynamicUnitPrice(
         return (
           tokenAmount
             .toLocaleString('en-US', { minimumFractionDigits: 0, maximumFractionDigits: precision })
-            .replace(/\.?0+$/, '') || '0'
+            .replace(/(\.\d*?)0+$/, '$1')
+            .replace(/\.$/, '') || '0'
         );
       }
     }

package/src/checkout-v2/views/error-view.tsx

@@ -3,6 +3,7 @@ import { alpha, useTheme } from '@mui/material/styles';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import Header from '@blocklet/ui-react/lib/Header';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { primaryContrastColor } from '../utils/format';
 
 interface ErrorViewProps {
   error: string;
@@ -191,6 +192,7 @@ function ErrorContent({ error, errorCode = undefined }: { error: string; errorCo
             fontWeight: 600,
             fontSize: 16,
             letterSpacing: '0.02em',
+            color: (th) => primaryContrastColor(th),
             boxShadow: `0 8px 32px -4px ${alpha(primaryColor, 0.3)}`,
             '&:hover': {
               boxShadow: `0 12px 40px -4px ${alpha(primaryColor, 0.4)}`,

package/src/checkout-v2/views/success-view.tsx

@@ -23,7 +23,7 @@ import type { TCheckoutSessionExpanded } from '@blocklet/payment-types';
 import { usePaymentMethodContext } from '@blocklet/payment-react-headless';
 
 import { getPrefix } from '../../libs/util';
-import { formatTokenAmount } from '../utils/format';
+import { formatTokenAmount, primaryContrastColor } from '../utils/format';
 
 // ── Animations ──
 
@@ -573,6 +573,7 @@ function SubscriptionLinks({
           fontWeight: 700,
           fontSize: { xs: 16, md: 17 },
           letterSpacing: '0.02em',
+          color: (theme) => primaryContrastColor(theme),
           boxShadow: '0 8px 24px -4px rgba(59,130,246,0.25)',
           '&:hover': {
             boxShadow: '0 12px 28px -4px rgba(59,130,246,0.35)',
@@ -616,6 +617,7 @@ function InvoiceLink({
         fontWeight: 700,
         fontSize: { xs: 16, md: 17 },
         letterSpacing: '0.02em',
+        color: (theme) => primaryContrastColor(theme),
         boxShadow: '0 8px 24px -4px rgba(59,130,246,0.25)',
         '&:hover': {
           boxShadow: '0 12px 28px -4px rgba(59,130,246,0.35)',

package/src/components/over-due-invoice-payment.tsx

@@ -19,7 +19,7 @@ import Dialog from '@arcblock/ux/lib/Dialog/dialog';
 import { CheckCircle as CheckCircleIcon } from '@mui/icons-material';
 import debounce from 'lodash/debounce';
 import { usePaymentContext } from '../contexts/payment';
-import { formatAmount, formatError, getPrefix, isCrossOrigin } from '../libs/util';
+import { formatAmount, formatError, getPrefix, isCrossOrigin, primaryContrastColor } from '../libs/util';
 import { useSubscription } from '../hooks/subscription';
 import api from '../libs/api';
 import LoadingButton from './loading-button';
@@ -397,6 +397,8 @@ function OverdueInvoicePayment({
     const { currency } = item;
     const inProcess = payLoading && selectCurrencyId === currency.id;
     const status = paymentStatus[currency.id] || 'idle';
+    const containedColorSx =
+      (options?.variant || 'contained') === 'contained' ? { color: (th: any) => primaryContrastColor(th) } : {};
 
     if (status === 'success') {
       return (
@@ -404,6 +406,7 @@ function OverdueInvoicePayment({
           variant={options?.variant || 'contained'}
           size="small"
           onClick={() => checkAndHandleInvoicePaid(currency.id)}
+          sx={containedColorSx}
           {...(primaryButton
             ? {}
             : {
@@ -442,7 +445,7 @@ function OverdueInvoicePayment({
               disabled={paying || status === 'processing'}
               loading={paying || status === 'processing'}
               onClick={onPay}
-              sx={options?.sx}>
+              sx={{ ...containedColorSx, ...((options?.sx || {}) as any) }}>
               {buttonText}
             </LoadingButton>
           )}
@@ -456,7 +459,7 @@ function OverdueInvoicePayment({
         disabled={inProcess}
         loading={inProcess}
         onClick={() => handlePay(item)}
-        sx={options?.sx}>
+        sx={{ ...containedColorSx, ...((options?.sx || {}) as any) }}>
         {status === 'error' ? t('payment.subscription.overdue.retry') : t('payment.subscription.overdue.payNow')}
       </LoadingButton>
     );

package/src/libs/util.ts

@@ -1823,3 +1823,10 @@ export function formatLinkWithLocale(url: string, locale?: string) {
     return `${url}${separator}locale=${locale}`;
   }
 }
+
+// Compute text color that contrasts with primary.main, works in both light and dark mode
+export function primaryContrastColor(theme: {
+  palette: { primary: { main: string }; getContrastText: (bg: string) => string };
+}): string {
+  return theme.palette.getContrastText(theme.palette.primary.main);
+}