payment-kit 1.24.3 → 1.25.0

package/src/components/invoice/table.tsx

@@ -5,12 +5,16 @@ import {
   Table,
   getPriceUintAmountByCurrency,
   formatNumber,
+  formatTime,
+  formatExchangeRate,
+  getUsdAmountFromTokenUnits,
+  formatUsdAmount,
   formatCreditForCheckout,
 } from '@blocklet/payment-react';
 import type { TInvoiceExpanded, TInvoiceItem } from '@blocklet/payment-types';
 import { InfoOutlined } from '@mui/icons-material';
 import { Box, Stack, Tooltip, Typography } from '@mui/material';
-import { toBN } from '@ocap/util';
+import { toBN, fromUnitToToken, fromTokenToUnit, BN } from '@ocap/util';
 import { useSetState } from 'ahooks';
 
 import { styled } from '@mui/system';
@@ -37,6 +41,11 @@ type InvoiceDetailItem = {
   quantity: number;
   rawQuantity: number;
   price: string;
+  referencePrice?: {
+    amount: string;
+    currency: string;
+    decimals: number;
+  } | null;
   amount: string;
   raw: TInvoiceItem;
   price_id: string;
@@ -45,8 +54,11 @@ type InvoiceDetailItem = {
 
 type InvoiceSummaryItem = {
   key: string;
-  value: string;
+  value: string | React.ReactNode;
   color: string;
+  usdReference?: string; // ≈ $X.XX format
+  tooltip?: React.ReactNode;
+  desc?: React.ReactNode;
 };
 
 export function getAppliedBalance(invoice: TInvoiceExpanded) {
@@ -71,11 +83,54 @@ export function getAppliedBalance(invoice: TInvoiceExpanded) {
   return '0';
 }
 
-export function getInvoiceRows(invoice: TInvoiceExpanded, t: (key: string) => string) {
+export function getInvoiceRows(invoice: TInvoiceExpanded, t: (key: string) => string, locale?: string) {
   const detail: InvoiceDetailItem[] = invoice.lines.map((line) => {
-    const price = line.quantity
-      ? toBN(line.amount).div(toBN(line.quantity)).toString()
-      : getPriceUintAmountByCurrency(line.price, invoice.paymentCurrency) || line.amount;
+    // Calculate actual payment unit price (in payment currency)
+    // line.amount is in unit format (smallest unit)
+    // line.quantity can be fractional (e.g., 0.5)
+    let actualUnitPrice: string;
+    if (line.quantity) {
+      if (Number.isInteger(line.quantity)) {
+        // If quantity is integer, use BN for precision
+        actualUnitPrice = toBN(line.amount).div(toBN(line.quantity)).toString();
+      } else {
+        // If quantity is fractional, use floating point division
+        const amountToken = fromUnitToToken(line.amount, invoice.paymentCurrency.decimal);
+        const unitPriceToken = (Number(amountToken) / line.quantity).toFixed(invoice.paymentCurrency.decimal);
+        const unitPriceResult = fromTokenToUnit(unitPriceToken, invoice.paymentCurrency.decimal);
+        actualUnitPrice = typeof unitPriceResult === 'string' ? unitPriceResult : unitPriceResult.toString();
+      }
+    } else {
+      actualUnitPrice = getPriceUintAmountByCurrency(line.price, invoice.paymentCurrency) || line.amount;
+    }
+
+    // Get quote info from metadata if available (for dynamic pricing)
+    const quoteInfo = (line.metadata as any)?.quote;
+    let referencePrice: { amount: string; currency: string; decimals: number } | null = null;
+
+    if (quoteInfo?.base_amount && quoteInfo?.quantity) {
+      // Calculate USD unit price from quote
+      // base_amount is in USD with 8 decimals (token format, e.g., "10.50")
+      // quantity can be fractional (e.g., 0.5)
+      const USD_DECIMALS = 8;
+      const baseAmount = Number(quoteInfo.base_amount);
+      const quantity = Number(quoteInfo.quantity);
+
+      if (quantity > 0 && !Number.isNaN(baseAmount)) {
+        // Use floating point division for accuracy with fractional quantities
+        const unitPriceToken = (baseAmount / quantity).toFixed(USD_DECIMALS);
+        // Convert from token format to unit format (smallest unit)
+        const unitPriceUnitResult = fromTokenToUnit(unitPriceToken, USD_DECIMALS);
+        const unitPriceUnit =
+          typeof unitPriceUnitResult === 'string' ? unitPriceUnitResult : unitPriceUnitResult.toString();
+
+        referencePrice = {
+          amount: unitPriceUnit,
+          currency: quoteInfo.base_currency || 'USD',
+          decimals: USD_DECIMALS,
+        };
+      }
+    }
 
     const creditInfo = (line.price as any).credit;
     let credits: { total: number; currency: string } | undefined;
@@ -89,25 +144,143 @@ export function getInvoiceRows(invoice: TInvoiceExpanded, t: (key: string) => st
 
     return {
       id: line.id,
-      product: `${line.description} ${
-        line.price.product.unit_label ? ` (per ${line.price.product.unit_label})` : ''
-      }`.trim(),
+      product: line.description.trim(),
       credits,
       quantity: line.quantity,
       rawQuantity: line.metadata?.quantity || 0,
-      price: !line.proration ? formatAmount(price, invoice.paymentCurrency.decimal) : '',
-      amount: formatAmount(line.amount, invoice.paymentCurrency.decimal),
+      price: !line.proration
+        ? `${formatAmount(actualUnitPrice, invoice.paymentCurrency.decimal)} ${invoice.paymentCurrency.symbol}`
+        : '',
+      referencePrice, // Add reference price (USD)
+      amount: `${formatAmount(line.amount, invoice.paymentCurrency.decimal)} ${invoice.paymentCurrency.symbol}`,
       raw: line,
       price_id: line.price.id,
       product_id: line.price.product.id,
     };
   });
 
+  const quoteLine = invoice.lines.find((line) => (line.metadata as any)?.quote?.exchange_rate);
+  const quoteInfo = quoteLine ? (quoteLine.metadata as any).quote : null;
+
+  // Calculate USD amount and exchange rate for subtotal
+  let subtotalUsdAmount: string | null = null;
+  let formattedRate: string | null = null;
+  let rateLine: string | null = null;
+  let exchangeRateTooltip: React.ReactNode = null;
+
+  if (quoteInfo) {
+    const providers = quoteInfo?.providers || [];
+    const providerNames = providers.map((provider: any) => provider.provider_name).filter(Boolean);
+    // Unified provider display format: "provider_name (n sources)" for multiple, specific name for single
+    let providerDisplay: string;
+    if (providers.length > 1) {
+      providerDisplay = `${providerNames[0] || providers[0]?.provider_id || 'data'} (${providers.length} sources)`;
+    } else if (providers.length === 1) {
+      providerDisplay = providerNames[0] || providers[0]?.provider_id || '—';
+    } else {
+      providerDisplay = quoteInfo?.rate_provider_name || quoteInfo?.rate_provider_id;
+    }
+    const rateTimestamp = quoteInfo?.rate_timestamp_ms ? formatTime(quoteInfo.rate_timestamp_ms) : '—';
+
+    // Calculate USD amount
+    if (quoteInfo.exchange_rate && invoice.subtotal) {
+      const calculatedUsd = getUsdAmountFromTokenUnits(
+        new BN(invoice.subtotal),
+        invoice.paymentCurrency.decimal,
+        quoteInfo.exchange_rate
+      );
+      if (calculatedUsd) {
+        subtotalUsdAmount = formatUsdAmount(calculatedUsd, locale);
+      }
+    }
+
+    // Format exchange rate
+    formattedRate = formatExchangeRate(quoteInfo.exchange_rate || null);
+    if (formattedRate) {
+      const currencyMap = {
+        USD: '$',
+        CNY: '¥',
+      };
+      const currencySymbol = currencyMap[quoteInfo.base_currency as keyof typeof currencyMap];
+      rateLine = `1 ${invoice.paymentCurrency.symbol} ≈ ${currencySymbol ? `${currencySymbol}${formattedRate}` : `${formattedRate} ${quoteInfo.base_currency || 'USD'}`}`;
+    }
+
+    // Create tooltip content (same style as list.tsx)
+    exchangeRateTooltip = (
+      <Stack spacing={0.5} sx={{ p: 1 }}>
+        <Stack direction="row" justifyContent="space-between" spacing={2}>
+          <Typography variant="caption" sx={{ color: 'text.secondary' }}>
+            {t('payment.customer.invoice.quote.providers')}:
+          </Typography>
+          <Typography variant="caption" sx={{ color: 'text.primary' }}>
+            {providerDisplay || '—'}
+          </Typography>
+        </Stack>
+        {rateLine && (
+          <Stack direction="row" justifyContent="space-between" spacing={2}>
+            <Typography variant="caption" sx={{ color: 'text.secondary' }}>
+              {t('payment.customer.invoice.quote.exchangeRate')}:
+            </Typography>
+            <Typography variant="caption" sx={{ color: 'text.primary' }}>
+              {rateLine}
+            </Typography>
+          </Stack>
+        )}
+        <Stack direction="row" justifyContent="space-between" spacing={2}>
+          <Typography variant="caption" sx={{ color: 'text.secondary' }}>
+            {t('payment.customer.invoice.quote.rateTimestamp')}:
+          </Typography>
+          <Typography variant="caption" sx={{ color: 'text.primary' }}>
+            {rateTimestamp}
+          </Typography>
+        </Stack>
+      </Stack>
+    );
+  }
+
+  // Build subtotal value with USD reference
+  const subtotalValue = (() => {
+    if (!subtotalUsdAmount || !rateLine) {
+      return null;
+    }
+    const rateText = (t as any)('payment.customer.invoice.quote.atPaymentRate', { rate: rateLine });
+    return (
+      <Stack alignItems="flex-end" sx={{ minWidth: '100px', textAlign: 'right' }}>
+        <Tooltip
+          title={exchangeRateTooltip}
+          placement="top"
+          arrow
+          slotProps={{
+            tooltip: {
+              sx: {
+                backgroundColor: 'background.paper',
+                boxShadow: 1,
+              },
+            },
+          }}>
+          <Typography
+            component="span"
+            variant="caption"
+            sx={{
+              color: 'text.secondary',
+              fontSize: '0.75rem',
+              fontWeight: 400,
+              lineHeight: 1.2,
+              cursor: 'help',
+            }}>
+            ≈ ${subtotalUsdAmount} {rateText}
+          </Typography>
+        </Tooltip>
+      </Stack>
+    );
+  })();
+
   const summary: InvoiceSummaryItem[] = [
     {
       key: 'common.subtotal',
-      value: formatAmount(invoice.subtotal, invoice.paymentCurrency.decimal),
+      value: `${formatAmount(invoice.subtotal, invoice.paymentCurrency.decimal)} ${invoice.paymentCurrency.symbol}`,
       color: 'text.secondary',
+      desc: subtotalValue,
     },
   ];
 
@@ -149,7 +322,7 @@ export function getInvoiceRows(invoice: TInvoiceExpanded, t: (key: string) => st
 
           summary.push({
             key: discountLabel,
-            value: `-${formattedDiscountAmount}`,
+            value: `-${formattedDiscountAmount} ${invoice.paymentCurrency.symbol}`,
             color: 'text.secondary',
           });
         }
@@ -159,13 +332,13 @@ export function getInvoiceRows(invoice: TInvoiceExpanded, t: (key: string) => st
 
   summary.push({
     key: 'common.total',
-    value: formatAmount(invoice.total, invoice.paymentCurrency.decimal),
+    value: `${formatAmount(invoice.total, invoice.paymentCurrency.decimal)} ${invoice.paymentCurrency.symbol}`,
     color: 'text.secondary',
   });
   if (invoice.amount_paid !== '0') {
     summary.push({
       key: 'payment.customer.invoice.amountPaid',
-      value: formatAmount(invoice.amount_paid, invoice.paymentCurrency.decimal),
+      value: `${formatAmount(invoice.amount_paid, invoice.paymentCurrency.decimal)} ${invoice.paymentCurrency.symbol}`,
       color: 'text.secondary',
     });
   }
@@ -174,13 +347,13 @@ export function getInvoiceRows(invoice: TInvoiceExpanded, t: (key: string) => st
   if (appliedBalance !== '0') {
     summary.push({
       key: 'payment.customer.invoice.amountApplied',
-      value: formatAmount(appliedBalance, invoice.paymentCurrency.decimal),
+      value: `${formatAmount(appliedBalance, invoice.paymentCurrency.decimal)} ${invoice.paymentCurrency.symbol}`,
       color: 'text.secondary',
     });
   }
   summary.push({
     key: 'payment.customer.invoice.amountDue',
-    value: formatAmount(invoice.amount_remaining, invoice.paymentCurrency.decimal),
+    value: `${formatAmount(invoice.amount_remaining, invoice.paymentCurrency.decimal)} ${invoice.paymentCurrency.symbol}`,
     color: invoice.amount_remaining !== '0' ? 'text.primary' : 'text.secondary',
   });
 
@@ -194,7 +367,7 @@ export default function InvoiceTable({ invoice, simple = false, emptyNodeText =
   const { t, locale } = useLocaleContext();
   const isAdmin = mode === 'admin';
   const navigate = useNavigate();
-  const { detail, summary } = getInvoiceRows(invoice, t);
+  const { detail, summary } = getInvoiceRows(invoice, t, locale);
   const [state, setState] = useSetState({
     subscriptionId: '',
     subscriptionItemId: '',
@@ -225,6 +398,7 @@ export default function InvoiceTable({ invoice, simple = false, emptyNodeText =
       options: {
         customBodyRenderLite: (_: string, index: number) => {
           const item = detail[index] as InvoiceDetailItem;
+
           return (
             <Box>
               <Typography
@@ -301,31 +475,20 @@ export default function InvoiceTable({ invoice, simple = false, emptyNodeText =
       name: 'price',
       width: 200,
       align: 'right',
-    },
-
-    {
-      label: t('common.discount'),
-      name: 'discount',
-      width: 200,
-      align: 'right',
       options: {
         customBodyRenderLite: (_: string, index: number) => {
           const item = detail[index] as InvoiceDetailItem;
-          // Calculate discount amount for this line item
-          let itemDiscountAmount = toBN(0);
-          if (item.raw.discount_amounts && item.raw.discount_amounts.length > 0) {
-            item.raw.discount_amounts.forEach((discount: any) => {
-              if (discount.amount) {
-                itemDiscountAmount = itemDiscountAmount.add(toBN(discount.amount));
-              }
-            });
-          }
-
           return (
-            <Typography component="span" sx={{ color: 'text.secondary' }}>
-              {itemDiscountAmount.gt(toBN(0))
-                ? `-${formatAmount(itemDiscountAmount.toString(), invoice.paymentCurrency.decimal)}`
-                : '-'}
+            <Typography
+              component="div"
+              variant="body2"
+              sx={{
+                textAlign: {
+                  xs: 'left',
+                  md: 'right',
+                },
+              }}>
+              {item.price}
             </Typography>
           );
         },
@@ -344,6 +507,7 @@ export default function InvoiceTable({ invoice, simple = false, emptyNodeText =
         },
       },
     },
+
     ...(isAdmin
       ? [
           {
@@ -384,6 +548,34 @@ export default function InvoiceTable({ invoice, simple = false, emptyNodeText =
           },
         ]
       : []),
+    {
+      label: t('common.discount'),
+      name: 'discount',
+      width: 200,
+      align: 'right',
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = detail[index] as InvoiceDetailItem;
+          // Calculate discount amount for this line item
+          let itemDiscountAmount = toBN(0);
+          if (item.raw.discount_amounts && item.raw.discount_amounts.length > 0) {
+            item.raw.discount_amounts.forEach((discount: any) => {
+              if (discount.amount) {
+                itemDiscountAmount = itemDiscountAmount.add(toBN(discount.amount));
+              }
+            });
+          }
+
+          return (
+            <Typography component="span" sx={{ color: 'text.secondary' }}>
+              {itemDiscountAmount.gt(toBN(0))
+                ? `-${formatAmount(itemDiscountAmount.toString(), invoice.paymentCurrency.decimal)} ${invoice.paymentCurrency.symbol}`
+                : '-'}
+            </Typography>
+          );
+        },
+      },
+    },
     ...(simple
       ? []
       : [
@@ -447,40 +639,53 @@ export default function InvoiceTable({ invoice, simple = false, emptyNodeText =
             const showDivider = isTotal && index > 0;
 
             return (
-              <Stack
-                key={line.key}
-                direction="row"
-                sx={{
-                  justifyContent: 'flex-end',
-                  width: '100%',
-                  py: 0.5,
-
-                  ...(showDivider && {
-                    borderTop: '1px solid',
-                    borderTopColor: 'divider',
-                    pt: 1,
-                    mt: 0.5,
-                  }),
-                }}>
-                <Typography
-                  variant="body2"
+              <>
+                <Stack
+                  key={line.key}
+                  direction="row"
                   sx={{
-                    color: 'text.primary',
-                    fontWeight: isTotal ? 500 : 400,
+                    justifyContent: 'flex-end',
+                    width: '100%',
+                    py: 0.5,
+                    gap: 2,
+
+                    ...(showDivider && {
+                      borderTop: '1px solid',
+                      borderTopColor: 'divider',
+                      pt: 1,
+                      mt: 0.5,
+                    }),
                   }}>
-                  {line.key.startsWith('common.') || line.key.startsWith('payment.') ? t(line.key) : line.key}
-                </Typography>
-                <Typography
-                  variant="body2"
-                  sx={{
-                    color: 'text.primary',
-                    fontWeight: isTotal ? 500 : 400,
-                    minWidth: '80px',
-                    textAlign: 'right',
-                  }}>
-                  {line.value}
-                </Typography>
-              </Stack>
+                  <Typography
+                    variant="body2"
+                    sx={{
+                      color: 'text.primary',
+                      fontWeight: isTotal ? 500 : 400,
+                    }}>
+                    {line.key.startsWith('common.') || line.key.startsWith('payment.') ? t(line.key) : line.key}
+                  </Typography>
+                  <Typography
+                    variant="body2"
+                    sx={{
+                      color: 'text.primary',
+                      fontWeight: isTotal ? 500 : 400,
+                      minWidth: '100px',
+                      textAlign: 'right',
+                    }}>
+                    {line.value}
+                  </Typography>
+                </Stack>
+                {(() => {
+                  if (line.tooltip && line.desc) {
+                    return (
+                      <Tooltip title={line.tooltip} placement="top" arrow>
+                        <Box component="span">{line.desc}</Box>
+                      </Tooltip>
+                    );
+                  }
+                  return line.desc;
+                })()}
+              </>
             );
           })}
         </Box>

package/src/components/invoice-pdf/template.tsx

@@ -125,9 +125,7 @@ export function InvoiceTemplate({ data, t }: InvoicePDFProps) {
               <span style={composeStyles('dark right')}>{line.quantity}</span>
             </div>
             <div style={composeStyles('w-15 p-4-8 pb-15')}>
-              <span style={composeStyles('dark right')}>
-                {line.price ? `${line.price} ${data.paymentCurrency.symbol}` : ''}
-              </span>
+              <span style={composeStyles('dark right')}>{line.price || ''}</span>
             </div>
             <div style={composeStyles('w-15 p-4-8 pb-15')}>
               <span style={composeStyles('dark right')}>
@@ -139,9 +137,7 @@ export function InvoiceTemplate({ data, t }: InvoicePDFProps) {
               </span>
             </div>
             <div style={composeStyles('w-17 p-4-8 pb-15')}>
-              <span style={composeStyles('dark right')}>
-                {line.amount} {data.paymentCurrency.symbol}
-              </span>
+              <span style={composeStyles('dark right')}>{line.amount}</span>
             </div>
           </div>
         );
@@ -212,7 +208,7 @@ export function InvoiceTemplate({ data, t }: InvoicePDFProps) {
                     ...composeStyles('bold dark text-right'),
                     minWidth: '80px',
                   }}>
-                  {line.value} {data.paymentCurrency.symbol}
+                  {line.value}
                 </span>
               </div>
             </div>

package/src/components/metadata/form.tsx

@@ -294,15 +294,13 @@ export default function MetadataForm({
                     <Tooltip
                       title={formatError || t('common.metadata.formatJson')}
                       placement="top"
-                      componentsProps={{
+                      slotProps={{
                         tooltip: {
-                          sx: formatError
-                            ? {
-                                maxWidth: 300,
-                                backgroundColor: 'error.main',
-                                opacity: 0.8,
-                              }
-                            : {},
+                          sx: {
+                            maxWidth: 300,
+                            backgroundColor: 'error.main',
+                            opacity: 0.8,
+                          },
                         },
                       }}>
                       <IconButton