payment-kit 1.24.3 → 1.25.0

package/src/components/promotion/active-redemptions.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/display-name, react/no-unstable-nested-components */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { api, formatTime, Link, Table } from '@blocklet/payment-react';
+import { api, formatTime, formatAmount, Link, Table } from '@blocklet/payment-react';
 import { Box, Tab, Tabs, Typography, Chip } from '@mui/material';
 import { useRequest } from 'ahooks';
 import { useState } from 'react';
@@ -210,10 +210,11 @@ export default function ActiveRedemptions({ couponId = '', promotionCodeId = ''
                   if (!value) {
                     return null;
                   }
+                  const v = value as any;
                   return (
                     <Typography key={currencyId} variant="body2" sx={{ display: 'inline-flex' }}>
                       {i > 0 && '、'}
-                      {value.formattedAmount}
+                      {formatAmount(v.amount, v.currency?.decimal || 18)} {v.currency?.symbol || ''}
                     </Typography>
                   );
                 })}
@@ -371,10 +372,11 @@ export default function ActiveRedemptions({ couponId = '', promotionCodeId = ''
                   if (!value) {
                     return null;
                   }
+                  const v = value as any;
                   return (
                     <Typography key={currencyId} variant="body2" sx={{ lineHeight: 1.2 }}>
                       {i > 0 && ', '}
-                      {value.formattedAmount}
+                      {formatAmount(v.amount, v.currency?.decimal || 18)} {v.currency?.symbol || ''}
                     </Typography>
                   );
                 })}

package/src/components/quote/info.tsx

@@ -0,0 +1,234 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { formatTime } from '@blocklet/payment-react';
+import { LockClockOutlined, TrendingUpOutlined } from '@mui/icons-material';
+import { Box, Chip, Paper, Stack, Tooltip, Typography } from '@mui/material';
+
+import Copyable from '../copyable';
+import InfoRow from '../info-row';
+
+interface QuoteMetadata {
+  calculation?: {
+    token_amount_raw?: string;
+    unit_amount_raw?: string;
+  };
+  rounding?: {
+    mode?: string;
+    token_decimals?: number;
+  };
+  risk?: {
+    anomaly_detected?: boolean;
+    deviation_percent?: number;
+    degraded?: boolean;
+    degraded_reason?: string | null;
+  };
+  context?: Record<string, any>;
+}
+
+interface PriceQuote {
+  id: string;
+  price_id: string;
+  base_currency: string;
+  base_amount: string;
+  target_currency_id: string;
+  rate_currency_symbol: string;
+  exchange_rate: string;
+  quoted_amount: string;
+  rate_provider_id: string;
+  rate_provider_name: string;
+  rate_timestamp_ms: number;
+  expires_at: number;
+  status: 'active' | 'used' | 'paid' | 'expired' | 'cancelled' | 'failed';
+  metadata: QuoteMetadata | null;
+  created_at: string;
+}
+
+interface QuoteInfoProps {
+  quotes: PriceQuote[];
+}
+
+const getStatusColor = (status: string) => {
+  switch (status) {
+    case 'paid':
+      return 'success';
+    case 'used':
+      return 'primary';
+    case 'active':
+      return 'info';
+    case 'expired':
+    case 'cancelled':
+    case 'failed':
+      return 'error';
+    default:
+      return 'default';
+  }
+};
+
+export default function QuoteInfo({ quotes }: QuoteInfoProps) {
+  const { t } = useLocaleContext();
+
+  if (!quotes || quotes.length === 0) {
+    return (
+      <Typography variant="body2" color="text.secondary">
+        {t('admin.quote.noQuotes')}
+      </Typography>
+    );
+  }
+
+  return (
+    <Stack spacing={2}>
+      {quotes.map((quote) => (
+        <Paper key={quote.id} variant="outlined" sx={{ p: 2 }}>
+          <Stack spacing={2}>
+            {/* Header */}
+            <Stack direction="row" justifyContent="space-between" alignItems="center">
+              <Stack direction="row" spacing={1} alignItems="center">
+                <LockClockOutlined fontSize="small" color="primary" />
+                <Typography variant="subtitle2" fontWeight={600}>
+                  {t('admin.quote.title')}
+                </Typography>
+              </Stack>
+              <Chip label={t(`admin.quote.status.${quote.status}`)} color={getStatusColor(quote.status)} size="small" />
+            </Stack>
+
+            {/* Quote ID */}
+            <InfoRow
+              label={t('admin.quote.id')}
+              value={<Copyable text={quote.id} />}
+              direction="row"
+              alignItems="center"
+            />
+
+            {/* Pricing Details */}
+            <Box>
+              <Typography variant="caption" color="text.secondary" gutterBottom>
+                {t('admin.quote.pricingDetails')}
+              </Typography>
+              <Stack spacing={1} sx={{ mt: 1 }}>
+                <InfoRow
+                  label={t('admin.quote.baseAmount')}
+                  value={
+                    <Typography variant="body2">
+                      {quote.base_amount} {quote.base_currency}
+                    </Typography>
+                  }
+                  direction="row"
+                  alignItems="center"
+                />
+                <InfoRow
+                  label={t('admin.quote.exchangeRate')}
+                  value={
+                    <Stack direction="row" spacing={0.5} alignItems="center">
+                      <Typography variant="body2">
+                        1 {quote.rate_currency_symbol} = {quote.exchange_rate} {quote.base_currency}
+                      </Typography>
+                      {quote.metadata?.risk?.degraded && (
+                        <Tooltip title={quote.metadata.risk.degraded_reason || ''}>
+                          <Chip label={t('admin.quote.degraded')} color="warning" size="small" variant="outlined" />
+                        </Tooltip>
+                      )}
+                    </Stack>
+                  }
+                  direction="row"
+                  alignItems="center"
+                />
+                <InfoRow
+                  label={t('admin.quote.quotedAmount')}
+                  value={
+                    <Typography variant="body2" fontWeight={500}>
+                      {quote.metadata?.calculation?.token_amount_raw || '-'} {quote.rate_currency_symbol}
+                    </Typography>
+                  }
+                  direction="row"
+                  alignItems="center"
+                />
+              </Stack>
+            </Box>
+
+            {/* Rate Provider Info */}
+            <Box>
+              <Typography variant="caption" color="text.secondary" gutterBottom>
+                {t('admin.quote.providerInfo')}
+              </Typography>
+              <Stack spacing={1} sx={{ mt: 1 }}>
+                <InfoRow
+                  label={t('admin.quote.provider')}
+                  value={<Typography variant="body2">{quote.rate_provider_name}</Typography>}
+                  direction="row"
+                  alignItems="center"
+                />
+                <InfoRow
+                  label={t('admin.quote.rateTimestamp')}
+                  value={
+                    <Tooltip title={formatTime(quote.rate_timestamp_ms)}>
+                      <Typography variant="body2" color="text.secondary">
+                        {formatTime(quote.rate_timestamp_ms, 'relative')}
+                      </Typography>
+                    </Tooltip>
+                  }
+                  direction="row"
+                  alignItems="center"
+                />
+              </Stack>
+            </Box>
+
+            {/* Lifecycle */}
+            <Box>
+              <Typography variant="caption" color="text.secondary" gutterBottom>
+                {t('admin.quote.lifecycle')}
+              </Typography>
+              <Stack spacing={1} sx={{ mt: 1 }}>
+                <InfoRow
+                  label={t('common.createdAt')}
+                  value={
+                    <Typography variant="body2" color="text.secondary">
+                      {formatTime(quote.created_at)}
+                    </Typography>
+                  }
+                  direction="row"
+                  alignItems="center"
+                />
+                <InfoRow
+                  label={t('admin.quote.expiresAt')}
+                  value={
+                    <Typography variant="body2" color="text.secondary">
+                      {formatTime(quote.expires_at * 1000)}
+                    </Typography>
+                  }
+                  direction="row"
+                  alignItems="center"
+                />
+              </Stack>
+            </Box>
+
+            {/* Risk Information */}
+            {quote.metadata?.risk && (
+              <Box>
+                <Typography variant="caption" color="text.secondary" gutterBottom>
+                  {t('admin.quote.riskInfo')}
+                </Typography>
+                <Stack spacing={1} sx={{ mt: 1 }}>
+                  {quote.metadata.risk.deviation_percent !== undefined && (
+                    <InfoRow
+                      label={t('admin.quote.deviation')}
+                      value={
+                        <Stack direction="row" spacing={0.5} alignItems="center">
+                          <TrendingUpOutlined fontSize="small" />
+                          <Typography variant="body2">{quote.metadata.risk.deviation_percent.toFixed(2)}%</Typography>
+                        </Stack>
+                      }
+                      direction="row"
+                      alignItems="center"
+                    />
+                  )}
+                  {quote.metadata.risk.anomaly_detected && (
+                    <Chip label={t('admin.quote.anomalyDetected')} color="warning" size="small" variant="outlined" />
+                  )}
+                </Stack>
+              </Box>
+            )}
+          </Stack>
+        </Paper>
+      ))}
+    </Stack>
+  );
+}

package/src/hooks/subscription.ts

@@ -1,7 +1,7 @@
-import { useCallback } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 import Toast from '@arcblock/ux/lib/Toast';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { useRequest } from 'ahooks';
+import { useRequest, useSetState } from 'ahooks';
 import { api } from '@blocklet/payment-react';
 import type { TPaymentCurrency } from '@blocklet/payment-types';
 
@@ -62,3 +62,133 @@ export function usePendingAmountForSubscription(subscriptionId: string, paymentC
     checkPendingAmount,
   };
 }
+
+type SubscriptionExchangeRateInfo = {
+  rate?: string;
+  provider_id?: string;
+  provider_name?: string;
+  base_currency?: string;
+  timestamp_ms?: number;
+  fetched_at?: number;
+};
+
+type UseSubscriptionExchangeRateOptions = {
+  subscriptionId?: string;
+  currencyId?: string;
+  enabled?: boolean;
+  pollingInterval?: number;
+};
+
+export function useSubscriptionExchangeRate({
+  subscriptionId,
+  currencyId,
+  enabled = false,
+  pollingInterval = 30000,
+}: UseSubscriptionExchangeRateOptions) {
+  const [state, setState] = useSetState<{
+    liveRateInfo?: SubscriptionExchangeRateInfo;
+    liveRateUnavailable: boolean;
+    liveRateError?: string;
+  }>({
+    liveRateInfo: undefined,
+    liveRateUnavailable: false,
+    liveRateError: undefined,
+  });
+  const liveRateRefreshRef = useRef(false);
+
+  useEffect(() => {
+    if (!enabled || !subscriptionId || !currencyId) {
+      setState({
+        liveRateInfo: undefined,
+        liveRateUnavailable: false,
+        liveRateError: undefined,
+      });
+      return undefined;
+    }
+
+    let cancelled = false;
+    let timer: ReturnType<typeof setInterval> | null = null;
+
+    const fetchRate = async (isManualRetry = false) => {
+      if (typeof document !== 'undefined' && document.hidden && !isManualRetry) {
+        return;
+      }
+      if (typeof navigator !== 'undefined' && !navigator.onLine) {
+        return;
+      }
+      if (liveRateRefreshRef.current) {
+        return;
+      }
+      liveRateRefreshRef.current = true;
+      try {
+        const { data } = await api.get(`/api/subscriptions/${subscriptionId}/exchange-rate`, {
+          params: { currency_id: currencyId },
+        });
+        if (cancelled) {
+          return;
+        }
+        setState({
+          liveRateInfo: data,
+          liveRateUnavailable: false,
+          liveRateError: undefined,
+        });
+        scheduleNext();
+      } catch (err: any) {
+        if (cancelled) {
+          return;
+        }
+        console.error('[Subscription Exchange Rate Fetch Error]', {
+          subscriptionId,
+          currencyId,
+          message: err?.message,
+        });
+        setState({
+          liveRateUnavailable: true,
+          liveRateError: err?.response?.data?.error || err?.message,
+        });
+      } finally {
+        liveRateRefreshRef.current = false;
+      }
+    };
+
+    const scheduleNext = () => {
+      if (!timer) {
+        // no existing timer
+      } else {
+        clearInterval(timer);
+      }
+      if (typeof window === 'undefined') {
+        return;
+      }
+      timer = setInterval(() => {
+        fetchRate(false);
+      }, pollingInterval);
+    };
+
+    fetchRate(false);
+    const handleVisibilityChange = () => {
+      if (typeof document !== 'undefined' && !document.hidden) {
+        fetchRate(false);
+      }
+    };
+    if (typeof document !== 'undefined') {
+      document.addEventListener('visibilitychange', handleVisibilityChange);
+    }
+    return () => {
+      cancelled = true;
+      if (timer) {
+        clearInterval(timer);
+      }
+      if (typeof document !== 'undefined') {
+        document.removeEventListener('visibilitychange', handleVisibilityChange);
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [subscriptionId, currencyId, enabled, pollingInterval]);
+
+  return {
+    liveRateInfo: state.liveRateInfo,
+    liveRateUnavailable: state.liveRateUnavailable,
+    liveRateError: state.liveRateError,
+  };
+}

package/src/locales/en.tsx

@@ -9,6 +9,8 @@ export default flat({
     active: 'Active',
     every: 'Every',
     inactive: 'Inactive',
+    enabled: 'Enabled',
+    disabled: 'Disabled',
     metadata: {
       label: 'Metadata',
       description: 'Add custom key-value pairs to store additional information about this meter.',
@@ -40,6 +42,10 @@ export default flat({
     estimatedDuration: '{duration} est.',
     detail: 'Detail',
     setting: 'Setting',
+    slippage: 'Slippage Limit',
+    slippageMinRate: 'Min acceptable rate {rate} {currency}',
+    slippageTooltip:
+      'The minimum acceptable exchange rate for automatic payments. If the rate drops below this, payment will be paused.',
     welcome: 'Welcome to Payment Kit',
     welcomeDesc: 'Start accepting payments in minutes with Payment Kit. Choose a feature to get started.',
     quickStart: 'Quick Start Guides',
@@ -55,10 +61,14 @@ export default flat({
     copyTip: 'Please copy manually',
     save: 'Save',
     saving: 'Saving...',
+    saved: 'Saved successfully',
+    refresh: 'Refresh',
     cancel: 'Cancel',
     back: 'Back',
     know: 'I Know',
     confirm: 'Confirm',
+    increased: 'increased',
+    decreased: 'decreased',
     edit: 'Edit',
     view: 'View',
     select: 'Select',
@@ -804,6 +814,33 @@ export default flat({
         description: 'Enter the number of units that can be purchased in a single checkout, 0 means unlimited',
       },
       inventory: 'Inventory Settings',
+      dynamicPricing: {
+        label: 'Enable Dynamic Pricing',
+        description: 'Price fluctuates based on real-time exchange rates',
+        config: {
+          title: 'Dynamic Pricing Configuration',
+          baseAmount: {
+            label: 'Base Price',
+            description: 'The base price in fiat currency',
+            required: 'Base price is required',
+          },
+        },
+        validation: {
+          checking: 'Checking exchange rate availability...',
+          // eslint-disable-next-line no-template-curly-in-string
+          rateLine: 'Current rate: 1 {currency} ≈ ${rate}',
+          // eslint-disable-next-line no-template-curly-in-string
+          usdLine: 'USD estimate: ≈ ${amount}',
+          error: 'Failed to fetch exchange rate, currency not supported or data source exception',
+          // eslint-disable-next-line no-template-curly-in-string
+          estimatedLine: 'Estimated amount: ≈ {amount} {currency}',
+          useAmount: 'Fill amount',
+        },
+      },
+      referencePricing: {
+        label: 'Reference Exchange Rate Pricing',
+        description: 'Use current exchange rates to estimate token amounts without enabling dynamic pricing',
+      },
     },
     coupon: {
       create: 'Create Coupon',
@@ -1324,6 +1361,8 @@ export default flat({
       finalizedAt: 'Finalized At',
       paidAt: 'Payment Date',
       summary: 'Summary',
+      billingContextNote: 'Invoice amounts are calculated based on real-time prices at the time of billing.',
+      dynamicPricingNote: 'This invoice uses dynamic pricing with locked exchange rates.',
       billTo: 'Billed to',
       billing: 'Billing Method',
       download: 'Download PDF',
@@ -1816,6 +1855,71 @@ export default flat({
       totalCreditUsed: 'Total Credit Used',
       transactionDate: 'Transaction Date',
     },
+    exchangeRateProvider: {
+      title: 'Exchange Rate Providers',
+      subtitle: 'Manage exchange rate data sources for dynamic pricing',
+      medianStrategyNote:
+        'Exchange rates are calculated automatically using multiple data sources. You only need to manage this list when a provider is consistently failing or needs to be temporarily disabled.',
+      disableConfirmTitle: 'Disable Provider?',
+      disableConfirmMessage: 'Disabling this provider may affect dynamic pricing payments. Are you sure?',
+      table: {
+        name: 'Name',
+        participation: 'Participation',
+        health: 'Health',
+        recentActivity: 'Recent Activity',
+        trustLevel: 'Trust Level',
+        trustLevelTip:
+          'Indicates confidence and eligibility for rate calculation. Higher values do not mean preferred or primary source.',
+        enabled: 'Enabled',
+        lastUpdate: 'Last update: {time}',
+        failures24h: 'Failures (24h): {count}',
+      },
+      participation: {
+        included: 'Included',
+        excluded: 'Excluded',
+      },
+      health: {
+        active: 'Healthy',
+        degraded: 'Unstable',
+        paused: 'Outlier',
+        inactive: 'Outlier',
+      },
+      status: {
+        active: 'Active',
+        degraded: 'Degraded',
+        paused: 'Paused',
+        inactive: 'Inactive',
+      },
+      create: {
+        title: 'Add Provider',
+        primaryAction: 'Add Exchange Rate Provider',
+      },
+      edit: {
+        title: 'Edit {name}',
+        name: 'Name',
+        nameHelp: 'Unique identifier for this data source',
+        nameRequired: 'Name is required',
+        type: 'Provider Type',
+        typeHelp: 'Data source type. Cannot be changed after creation.',
+        baseUrl: 'Base URL (Optional)',
+        baseUrlHelp: 'Custom base URL for proxy or self-hosted instance. Default: {defaultUrl}',
+        apiKey: 'API Key',
+        apiKeyHelp: 'API key for accessing the data source.',
+        apiKeyLinkText: 'Get your API key at',
+        apiKeyLinkAction: 'CoinMarketCap account',
+        testConnection: 'Test Connection',
+        testing: 'Testing...',
+        testSuccess: 'Connection successful ({symbol}/USD: {rate}, {time}ms)',
+        testFailed: 'Connection failed: {error}',
+        enabled: 'Enabled',
+        priority: 'Priority',
+        priorityHelp: 'Lower number = higher priority. Providers are used in priority order.',
+        status: 'Status',
+        statusHelp: 'Set to "paused" to temporarily disable this provider.',
+        pausedReason: 'Paused Reason',
+        pausedReasonHelp: 'Explain why this provider is paused (optional).',
+      },
+    },
   },
   empty: {
     image: 'No Image',
@@ -1924,6 +2028,17 @@ export default flat({
       donation: 'Donation',
       creditsInfo: 'Total {amount} included',
       appliedDiscounts: 'Applied Discounts',
+      priceChanged:
+        'The exchange rate has changed by {percent}%. The payment amount will be updated. Do you want to continue?',
+      paymentCancelled: 'Payment cancelled',
+      paymentMethodChanged: 'Payment method changed',
+      priceChangeTitle: 'Price Changed',
+      priceChangeDescription: 'The exchange rate has {direction} by {percent}%. Your payment amount will be updated.',
+      currentPaymentMethod: 'Current Payment Method',
+      otherPaymentMethods: 'Or pay with another method',
+      confirmAndPay: 'Confirm & Pay',
+      switchAndPay: 'Switch & Pay',
+      current: 'current',
     },
     payout: {
       empty: 'No Revenues',
@@ -1940,6 +2055,36 @@ export default flat({
       alert: 'You have due invoices. Please pay them promptly to avoid service interruption.',
       title: 'Settle Due Invoices',
     },
+    quote: {
+      title: 'Price Quotes',
+      noQuotes: 'No price quotes for this invoice',
+      id: 'Quote ID',
+      pricingDetails: 'Pricing Details',
+      baseAmount: 'Base Amount',
+      exchangeRate: 'Exchange Rate',
+      consensusMethod: 'Consensus',
+      // eslint-disable-next-line no-template-curly-in-string
+      referenceRate: 'Reference Rate: 1 {symbol} ≈ ${rate}',
+      quotedAmount: 'Quoted Amount',
+      providerInfo: 'Rate Provider',
+      provider: 'Provider',
+      rateTimestamp: 'Rate Timestamp',
+      slippage: 'Slippage',
+      lifecycle: 'Lifecycle',
+      expiresAt: 'Expires At',
+      riskInfo: 'Risk Information',
+      deviation: 'Price Deviation',
+      anomalyDetected: 'Anomaly Detected',
+      degraded: 'Degraded',
+      status: {
+        active: 'Active',
+        used: 'Used',
+        paid: 'Paid',
+        expired: 'Expired',
+        cancelled: 'Cancelled',
+        failed: 'Failed',
+      },
+    },
   },
   integrations: {
     description: 'Configure and manage how Payment Kit integrates with your application.',