payment-kit 1.24.4 → 1.25.1

package/src/pages/admin/products/exchange-rate-providers/index.tsx

@@ -0,0 +1,363 @@
+/* eslint-disable react/no-unstable-nested-components */
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Dialog from '@arcblock/ux/lib/Dialog';
+import Toast from '@arcblock/ux/lib/Toast';
+import { api, ConfirmDialog, formatError, formatTime, Table, Status, Switch } from '@blocklet/payment-react';
+import { DeleteOutlined, EditOutlined } from '@mui/icons-material';
+import { Alert, Button, IconButton, Stack, Tooltip, Typography } from '@mui/material';
+import { useRequest, useSetState } from 'ahooks';
+import { useEffect } from 'react';
+import { useSearchParams } from 'react-router-dom';
+
+import EditProviderDialog from './edit-dialog';
+
+interface ExchangeRateProvider {
+  id: string;
+  name: string;
+  type: 'token-data' | 'coingecko' | 'coinmarketcap';
+  enabled: boolean;
+  priority: number;
+  status: 'active' | 'degraded' | 'paused' | 'inactive';
+  paused_reason: string | null;
+  config: Record<string, any> | null;
+  last_success_at: string | null;
+  last_failure_at: string | null;
+  failure_count: number;
+  created_at: string;
+  updated_at: string;
+}
+
+const DEFAULT_BASE_URLS = {
+  'token-data': 'https://token-data.arcblock.io',
+  coingecko: 'https://api.coingecko.com/api/v3',
+  coinmarketcap: 'https://pro-api.coinmarketcap.com/v1',
+} as const;
+
+const fetchProviders = (): Promise<{ data: ExchangeRateProvider[] }> => {
+  return api.get('/api/exchange-rate-providers').then((res) => res.data);
+};
+
+const getStatusColor = (status: string) => {
+  switch (status) {
+    case 'active':
+      return 'success';
+    case 'degraded':
+      return 'warning';
+    case 'paused':
+      return 'default';
+    case 'inactive':
+      return 'error';
+    default:
+      return 'default';
+  }
+};
+
+export default function ExchangeRateProviders() {
+  const { t } = useLocaleContext();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [state, setState] = useSetState({
+    editingProvider: null as ExchangeRateProvider | null,
+    isCreating: false,
+    deletingProvider: null as ExchangeRateProvider | null,
+    updatingProviderId: null as string | null,
+    confirmDisableProvider: null as ExchangeRateProvider | null,
+  });
+
+  const { loading, error, data, refresh } = useRequest(fetchProviders);
+
+  const handleEdit = (provider: ExchangeRateProvider) => {
+    setState({ editingProvider: provider, isCreating: false });
+  };
+
+  const handleCloseEdit = () => {
+    setState({ editingProvider: null, isCreating: false });
+    if (searchParams.get('create') === '1') {
+      const nextParams = new URLSearchParams(searchParams);
+      nextParams.delete('create');
+      setSearchParams(nextParams);
+    }
+  };
+
+  const handleSave = async () => {
+    await refresh();
+    handleCloseEdit();
+    Toast.success(t('common.saved'));
+    if (searchParams.get('create') === '1') {
+      const nextParams = new URLSearchParams(searchParams);
+      nextParams.delete('create');
+      setSearchParams(nextParams);
+    }
+  };
+
+  const handleCreate = () => {
+    setState({
+      editingProvider: {
+        id: '',
+        name: 'Token Data',
+        type: 'token-data',
+        enabled: true,
+        priority: (data?.data?.length || 0) + 1,
+        status: 'active',
+        paused_reason: '',
+        config: { base_url: '' },
+        last_failure_at: null,
+        last_success_at: null,
+        failure_count: 0,
+        created_at: '',
+        updated_at: '',
+      },
+      isCreating: true,
+    });
+  };
+
+  useEffect(() => {
+    const shouldCreate = searchParams.get('create') === '1';
+    if (shouldCreate && !state.isCreating && !state.editingProvider) {
+      handleCreate();
+    }
+  }, [searchParams, state.isCreating, state.editingProvider, data?.data]);
+
+  const handleDelete = async () => {
+    if (!state.deletingProvider) return;
+
+    try {
+      await api.delete(`/api/exchange-rate-providers/${state.deletingProvider.id}`);
+      Toast.success(t('common.deleted'));
+      await refresh();
+      setState({ deletingProvider: null });
+    } catch (err) {
+      Toast.error(formatError(err));
+    }
+  };
+
+  const handleToggleEnabled = async (provider: ExchangeRateProvider, enabled: boolean) => {
+    setState({ updatingProviderId: provider.id });
+    try {
+      await api.put(`/api/exchange-rate-providers/${provider.id}`, {
+        enabled,
+      });
+      Toast.success(t('common.saved'));
+      await refresh();
+    } catch (err) {
+      Toast.error(formatError(err));
+    } finally {
+      setState({ updatingProviderId: null });
+    }
+  };
+
+  if (error) {
+    return <Alert severity="error">{formatError(error)}</Alert>;
+  }
+
+  const columns = [
+    {
+      label: t('admin.exchangeRateProvider.table.name'),
+      name: 'name',
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const provider = data?.data?.[index];
+          if (!provider) return null;
+          const baseUrl = provider.config?.base_url || DEFAULT_BASE_URLS[provider.type];
+          return (
+            <Stack direction="column" spacing={0.5}>
+              <Typography variant="body2" fontWeight={500}>
+                {provider.name}
+              </Typography>
+              {baseUrl && (
+                <Typography variant="caption" color="text.secondary">
+                  {baseUrl}
+                </Typography>
+              )}
+            </Stack>
+          );
+        },
+      },
+    },
+    {
+      label: t('admin.exchangeRateProvider.table.participation'),
+      name: 'participation',
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const provider = data?.data?.[index];
+          if (!provider) return null;
+          const included = provider.enabled && provider.status !== 'paused' && provider.status !== 'inactive';
+          return (
+            <Status
+              label={
+                included
+                  ? t('admin.exchangeRateProvider.participation.included')
+                  : t('admin.exchangeRateProvider.participation.excluded')
+              }
+              color={included ? 'success' : 'default'}
+            />
+          );
+        },
+      },
+    },
+    {
+      label: t('admin.exchangeRateProvider.table.health'),
+      name: 'health',
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const provider = data?.data?.[index];
+          if (!provider) return null;
+          const healthLabel = t(`admin.exchangeRateProvider.health.${provider.status}`);
+          if (provider.paused_reason) {
+            return (
+              <Tooltip title={provider.paused_reason} arrow>
+                <span>
+                  <Status label={healthLabel} color={getStatusColor(provider.status)} />
+                </span>
+              </Tooltip>
+            );
+          }
+          return <Status label={healthLabel} color={getStatusColor(provider.status)} />;
+        },
+      },
+    },
+    {
+      label: t('admin.exchangeRateProvider.table.recentActivity'),
+      name: 'recent_activity',
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const provider = data?.data?.[index];
+          if (!provider) return null;
+          const lastUpdateAt = provider.last_success_at || provider.last_failure_at;
+          const lastUpdateDisplay = lastUpdateAt ? formatTime(lastUpdateAt) : '-';
+          const failureWindowMs = 24 * 60 * 60 * 1000;
+          const failureCount24h =
+            provider.last_failure_at && Date.now() - new Date(provider.last_failure_at).getTime() <= failureWindowMs
+              ? provider.failure_count
+              : 0;
+          return (
+            <Stack direction="column" spacing={0.25}>
+              <Typography variant="caption" color="text.secondary">
+                {t('admin.exchangeRateProvider.table.lastUpdate', { time: lastUpdateDisplay })}
+              </Typography>
+              <Typography variant="caption" color="text.secondary">
+                {t('admin.exchangeRateProvider.table.failures24h', {
+                  count: failureCount24h,
+                })}
+              </Typography>
+            </Stack>
+          );
+        },
+      },
+    },
+    {
+      label: t('admin.exchangeRateProvider.table.enabled'),
+      name: 'enabled',
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const provider = data?.data?.[index];
+          if (!provider) return null;
+          return (
+            <Switch
+              checked={provider.enabled}
+              onChange={(e) => {
+                const nextEnabled = e.target.checked;
+                if (!nextEnabled) {
+                  setState({ confirmDisableProvider: provider });
+                  return;
+                }
+                handleToggleEnabled(provider, nextEnabled);
+              }}
+              disabled={state.updatingProviderId === provider.id}
+              size="small"
+            />
+          );
+        },
+      },
+    },
+    {
+      label: t('common.actions'),
+      name: 'id',
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const provider = data?.data?.[index];
+          if (!provider) return null;
+          return (
+            <Stack direction="row" spacing={0.5}>
+              <IconButton size="small" onClick={() => handleEdit(provider)}>
+                <EditOutlined fontSize="small" />
+              </IconButton>
+              <IconButton size="small" onClick={() => setState({ deletingProvider: provider })} color="error">
+                <DeleteOutlined fontSize="small" />
+              </IconButton>
+            </Stack>
+          );
+        },
+      },
+    },
+  ];
+
+  return (
+    <>
+      <Typography variant="subtitle1" sx={{ color: 'text.secondary', whiteSpace: 'break-spaces', mt: 3, mb: 2 }}>
+        {t('admin.exchangeRateProvider.medianStrategyNote')}
+      </Typography>
+      <Table
+        data={data?.data || []}
+        columns={columns}
+        loading={loading}
+        toolbar={false}
+        footer={false}
+        options={{
+          count: data?.data?.length || 0,
+          page: 0,
+          rowsPerPage: 100,
+        }}
+        emptyNodeText={t('common.noData')}
+      />
+      {state.confirmDisableProvider && (
+        <ConfirmDialog
+          title={t('admin.exchangeRateProvider.disableConfirmTitle')}
+          message={t('admin.exchangeRateProvider.disableConfirmMessage')}
+          onConfirm={() => {
+            const provider = state.confirmDisableProvider as ExchangeRateProvider;
+            setState({ confirmDisableProvider: null });
+            handleToggleEnabled(provider, false);
+          }}
+          onCancel={() => setState({ confirmDisableProvider: null })}
+        />
+      )}
+
+      {state.editingProvider && (
+        <EditProviderDialog
+          provider={state.editingProvider}
+          isCreate={state.isCreating}
+          open={!!state.editingProvider}
+          onClose={handleCloseEdit}
+          onSave={handleSave}
+        />
+      )}
+
+      {state.deletingProvider && (
+        <Dialog
+          open={!!state.deletingProvider}
+          onClose={() => setState({ deletingProvider: null })}
+          maxWidth="sm"
+          title={t('admin.exchangeRateProvider.delete.title')}
+          PaperProps={{
+            sx: {
+              borderRadius: 2,
+            },
+          }}
+          actions={
+            <Stack direction="row" spacing={2}>
+              <Button variant="outlined" onClick={() => setState({ deletingProvider: null })}>
+                {t('common.cancel')}
+              </Button>
+              <Button variant="contained" color="error" onClick={handleDelete}>
+                {t('common.delete')}
+              </Button>
+            </Stack>
+          }>
+          <Typography>
+            {t('admin.exchangeRateProvider.delete.confirm', { name: state.deletingProvider.name })}
+          </Typography>
+        </Dialog>
+      )}
+    </>
+  );
+}

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

@@ -1,6 +1,7 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Tabs from '@arcblock/ux/lib/Tabs';
-import { Box, Stack } from '@mui/material';
+import { Box, Button, Stack } from '@mui/material';
+import { AddOutlined } from '@mui/icons-material';
 import React, { isValidElement, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
@@ -25,6 +26,7 @@ const pages = {
   'pricing-tables': React.lazy(() => import('./pricing-tables')),
   passports: React.lazy(() => import('./passports')),
   vendors: React.lazy(() => import('./vendors')),
+  'exchange-rate-providers': React.lazy(() => import('./exchange-rate-providers')),
 };
 
 export default function Products() {
@@ -34,6 +36,8 @@ export default function Products() {
   const [createProduct, setCreateProduct] = useState(false);
   const [createCoupon, setCreateCoupon] = useState(false);
   const { startTransition } = useTransitionContext();
+  const handleCreateProvider = () =>
+    startTransition(() => navigate('/admin/products/exchange-rate-providers?create=1'));
 
   // Handle old-style routing where ID is passed as page parameter
   if (page.startsWith('prod_')) {
@@ -78,6 +82,7 @@ export default function Products() {
     { label: t('admin.pricingTables'), value: 'pricing-tables' },
     { label: t('admin.passports'), value: 'passports' },
     { label: t('admin.vendors'), value: 'vendors' },
+    { label: t('admin.exchangeRateProvider.title'), value: 'exchange-rate-providers' },
   ];
 
   let extra = null;
@@ -91,6 +96,12 @@ export default function Products() {
     extra = <CouponCreate open={createCoupon} onClose={() => setCreateCoupon(false)} />;
   } else if (page === 'vendors') {
     extra = <VendorCreate open={createProduct} onClose={() => setCreateProduct(false)} />;
+  } else if (page === 'exchange-rate-providers') {
+    extra = (
+      <Button variant="contained" startIcon={<AddOutlined />} onClick={handleCreateProvider} size="small">
+        {t('admin.exchangeRateProvider.create.primaryAction')}
+      </Button>
+    );
   }
 
   return (

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

@@ -22,7 +22,7 @@ import { ArrowBackOutlined } from '@mui/icons-material';
 import { Alert, Box, Button, CircularProgress, Divider, Stack, Tooltip, Typography, useTheme } from '@mui/material';
 import { styled } from '@mui/system';
 import { useRequest, useSetState } from 'ahooks';
-import { useEffect, useRef } from 'react';
+import { useEffect } from 'react';
 import { Link, useParams, useSearchParams } from 'react-router-dom';
 
 import { joinURL } from 'ufo';
@@ -71,15 +71,15 @@ export default function CustomerInvoiceDetail() {
   const action = searchParams.get('action');
   const { session } = useSessionContext();
   const isDonation = data?.checkoutSession?.submit_type === 'donate';
-  const payHandlerRef = useRef<(() => void) | null>(null);
 
   const handleExternalPayment = () => {
     setState({ paying: true });
+
     connect.open({
       action: 'collect',
       saveConnect: false,
       locale: locale as 'en' | 'zh',
-      extraParams: { invoiceId: params.id, action },
+      extraParams: { invoiceId: params.id, action, allowCreatePI: data?.status === 'uncollectible' },
       messages: {
         scan: '',
         title: t(`payment.customer.invoice.${action || 'pay'}`),
@@ -202,7 +202,6 @@ export default function CustomerInvoiceDetail() {
                   setState({ paying: false });
                 }}>
                 {(onPay: () => void, paying: boolean) => {
-                  payHandlerRef.current = onPay;
                   return (
                     <Button
                       variant="outlined"
@@ -232,6 +231,16 @@ export default function CustomerInvoiceDetail() {
             ))}
         </Stack>
       </Stack>
+      {data.status === 'uncollectible' && data.metadata?.slippage?.below_threshold && (
+        <Alert severity="warning" sx={{ mt: 2 }}>
+          <Typography variant="body2">
+            {t('payment.customer.invoice.slippageExceededDetail', {
+              currentRate: data.metadata.slippage.rate_at_invoice || '—',
+              minRate: data.metadata.slippage.min_acceptable_rate || '—',
+            })}
+          </Typography>
+        </Alert>
+      )}
       <Box
         sx={{
           mt: isMobile ? '0 !important' : 4,
@@ -310,14 +319,29 @@ export default function CustomerInvoiceDetail() {
           <InfoMetric
             label={t('common.status')}
             value={
-              <Tooltip
-                title={data.status === 'void' ? t('payment.customer.invoice.noPaymentRequired') : ''}
-                arrow
-                placement="top">
-                <span>
-                  <Status label={data.status} color={getInvoiceStatusColor(data.status)} />
-                </span>
-              </Tooltip>
+              <Stack direction="row" spacing={1} alignItems="center">
+                <Tooltip
+                  title={data.status === 'void' ? t('payment.customer.invoice.noPaymentRequired') : ''}
+                  arrow
+                  placement="top">
+                  <span>
+                    <Status label={data.status} color={getInvoiceStatusColor(data.status)} />
+                  </span>
+                </Tooltip>
+                {data.status === 'uncollectible' && data.metadata?.slippage?.below_threshold && (
+                  <Tooltip
+                    title={t('payment.customer.invoice.slippageExceededDetail', {
+                      currentRate: data.metadata.slippage.rate_at_invoice || '—',
+                      minRate: data.metadata.slippage.min_acceptable_rate || '—',
+                    })}
+                    arrow
+                    placement="top">
+                    <span>
+                      <Status label={t('payment.customer.invoice.slippageExceeded')} color="warning" />
+                    </span>
+                  </Tooltip>
+                )}
+              </Stack>
             }
             divider
           />

package/src/pages/customer/subscription/change-payment.tsx

@@ -20,12 +20,13 @@ import {
   showStaking,
   usePaymentContext,
 } from '@blocklet/payment-react';
+import type { SlippageConfigValue } from '@blocklet/payment-react';
 import type { TCustomer, TPaymentCurrency, TPaymentMethod, TSubscriptionExpanded } from '@blocklet/payment-types';
 import { ArrowBackOutlined } from '@mui/icons-material';
 import { Alert, Box, CircularProgress, Stack, Typography } from '@mui/material';
 import { useRequest, useSetState } from 'ahooks';
 import pWaitFor from 'p-wait-for';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useMemo } from 'react';
 import { Controller, FormProvider, useForm, useFormContext, useWatch } from 'react-hook-form';
 import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
 import { joinURL } from 'ufo';
@@ -33,7 +34,7 @@ import { joinURL } from 'ufo';
 import SectionHeader from '../../../components/section/header';
 import SubscriptionDescription from '../../../components/subscription/description';
 import { goBackOrFallback } from '../../../libs/util';
-import { useUnpaidInvoicesCheckForSubscription } from '../../../hooks/subscription';
+import { useSubscriptionExchangeRate, useUnpaidInvoicesCheckForSubscription } from '../../../hooks/subscription';
 import { useArcsphere } from '../../../hooks/browser';
 
 const fetchData = async (id: string): Promise<{ subscription: TSubscriptionExpanded; customer: TCustomer }> => {
@@ -48,6 +49,28 @@ const fetchData = async (id: string): Promise<{ subscription: TSubscriptionExpan
   };
 };
 
+const defaultSlippageConfig: SlippageConfigValue = { mode: 'percent', percent: 0.5 };
+
+const normalizeSlippageConfig = (rawConfig: any): SlippageConfigValue => {
+  if (!rawConfig || typeof rawConfig !== 'object') {
+    return defaultSlippageConfig;
+  }
+  const mode = rawConfig.mode === 'rate' ? 'rate' : 'percent';
+  const percentValue = Number(rawConfig.percent);
+  const percent = Number.isFinite(percentValue) && percentValue >= 0 ? percentValue : defaultSlippageConfig.percent;
+  const minRate = typeof rawConfig.min_acceptable_rate === 'string' ? rawConfig.min_acceptable_rate : undefined;
+  const baseCurrency = typeof rawConfig.base_currency === 'string' ? rawConfig.base_currency : undefined;
+  const updatedAtMs = Number.isFinite(Number(rawConfig.updated_at_ms)) ? Number(rawConfig.updated_at_ms) : undefined;
+
+  return {
+    mode,
+    percent,
+    ...(mode === 'rate' && minRate ? { min_acceptable_rate: minRate } : {}),
+    ...(baseCurrency ? { base_currency: baseCurrency } : {}),
+    ...(updatedAtMs ? { updated_at_ms: updatedAtMs } : {}),
+  };
+};
+
 type Props = {
   subscription: TSubscriptionExpanded;
   customer: TCustomer;
@@ -83,6 +106,9 @@ function CustomerSubscriptionChangePayment({ subscription, customer, onComplete
   const { checkUnpaidInvoices } = useUnpaidInvoicesCheckForSubscription(subscription.id);
   const { control, setValue, handleSubmit } = useFormContext();
   const inArcsphere = useArcsphere();
+  const [slippageConfig, setSlippageConfig] = useState<SlippageConfigValue>(() =>
+    normalizeSlippageConfig((subscription as any)?.slippage_config)
+  );
 
   const [state, setState] = useSetState<{
     submitting: boolean;
@@ -101,7 +127,6 @@ function CustomerSubscriptionChangePayment({ subscription, customer, onComplete
     stripeContext: undefined,
     customer,
   });
-
   const payee = getStatementDescriptor(subscription.items);
   const supported = getPriceCurrencyOptions(subscription.items[0]?.price!).map((x: any) => x.currency_id);
   const currencies = flattenPaymentMethods(settings.paymentMethods).filter((x: any) => supported.includes(x.id));
@@ -119,6 +144,37 @@ function CustomerSubscriptionChangePayment({ subscription, customer, onComplete
 
   const method = settings.paymentMethods.find((x: any) => x.id === selectedMethodId) as TPaymentMethod;
   const changed = selectedCurrencyId !== subscription.currency_id;
+  const hasDynamicPricing = useMemo(
+    () =>
+      (subscription.items || []).some((item: any) => {
+        const price = item.upsell_price || item.price;
+        return price && (price as any)?.pricing_type === 'dynamic';
+      }),
+    [subscription.items]
+  );
+  const isStripePayment = method?.type === 'stripe';
+  const needsExchangeRate = hasDynamicPricing && !isStripePayment;
+  const { liveRateInfo, liveRateUnavailable } = useSubscriptionExchangeRate({
+    subscriptionId: subscription.id,
+    currencyId: selectedCurrencyId,
+    enabled: needsExchangeRate,
+  });
+  const handleSlippageChange = async (nextConfig: SlippageConfigValue) => {
+    try {
+      const payloadConfig = {
+        ...nextConfig,
+        ...(nextConfig.base_currency ? {} : { base_currency: liveRateInfo?.base_currency || 'USD' }),
+      };
+      await api.put(`/api/subscriptions/${subscription.id}/slippage`, {
+        slippage_config: payloadConfig,
+      });
+      setSlippageConfig(payloadConfig);
+      Toast.success(t('common.saved'));
+    } catch (err: any) {
+      console.error('Failed to update slippage', err);
+      Toast.error(formatError(err));
+    }
+  };
 
   const handleCompleted = async () => {
     await onComplete();
@@ -260,6 +316,12 @@ function CustomerSubscriptionChangePayment({ subscription, customer, onComplete
           trialInDays={0}
           billingThreshold={0}
           showStaking={showStaking(method, currency, !!subscription.billing_thresholds?.no_stake)}
+          liveRate={liveRateInfo}
+          rateUnavailable={needsExchangeRate && liveRateUnavailable}
+          slippageConfig={slippageConfig}
+          onSlippageChange={needsExchangeRate ? handleSlippageChange : undefined}
+          isSubscription
+          isStripePayment={isStripePayment}
         />
       </Stack>
       <Stack direction="column" spacing={2}>