@blocklet/payment-react 1.24.4 → 1.25.1

package/src/history/invoice/list.tsx

@@ -16,21 +16,26 @@ import React, { useEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import debounce from 'lodash/debounce';
+import { BN } from '@ocap/util';
 import Status from '../../components/status';
 import { usePaymentContext } from '../../contexts/payment';
 import { useSubscription } from '../../hooks/subscription';
 import api from '../../libs/api';
 import StripePaymentAction from '../../components/stripe-payment-action';
 import {
-  formatBNStr,
   formatCreditAmount,
   formatError,
   formatToDate,
   formatToDatetime,
+  formatTime,
+  formatExchangeRate,
   getInvoiceDescriptionAndReason,
   getInvoiceStatusColor,
   getTxLink,
   isCrossOrigin,
+  getUsdAmountFromTokenUnits,
+  formatUsdAmount,
+  formatAmount,
 } from '../../libs/util';
 import Table from '../../components/table';
 import { createLink, handleNavigation, LinkInfo } from '../../libs/navigation';
@@ -51,14 +56,26 @@ const groupByDate = (items: TInvoiceExpanded[]) => {
 
 const fetchData = (params: Record<string, any> = {}): Promise<Result> => {
   const search = new URLSearchParams();
-  Object.keys(params).forEach((key) => {
-    if (params[key]) {
-      search.set(key, String(params[key]));
+  const mergedParams: Record<string, any> = { include_quote: true, ...params };
+  Object.keys(mergedParams).forEach((key) => {
+    if (mergedParams[key]) {
+      search.set(key, String(mergedParams[key]));
     }
   });
   return api.get(`/api/invoices?${search.toString()}`).then((res: any) => res.data);
 };
 
+const getInvoiceQuoteInfo = (invoice: TInvoiceExpanded) => {
+  const lines = (invoice as any).lines || [];
+  for (const line of lines) {
+    const quote = (line.metadata as any)?.quote;
+    if (quote?.exchange_rate) {
+      return quote;
+    }
+  }
+  return null;
+};
+
 type Props = {
   customer_id?: string;
   subscription_id?: string;
@@ -199,12 +216,119 @@ const InvoiceTable = React.memo((props: Props & { onPay: (invoiceId: string) =>
         customBodyRenderLite: (_: string, index: number) => {
           const invoice = data?.list[index] as TInvoiceExpanded;
           const isVoid = invoice.status === 'void';
+          const quoteInfo = getInvoiceQuoteInfo(invoice);
+          const providers = quoteInfo?.providers || [];
+          const providerNames = providers.map((provider: any) => provider.provider_name).filter(Boolean);
+          const providerDisplay =
+            providerNames.length > 0
+              ? providerNames.join(', ')
+              : quoteInfo?.rate_provider_name || quoteInfo?.rate_provider_id || '—';
+          const providerRates =
+            quoteInfo?.providers
+              ?.map((provider: any) => {
+                const name = provider.provider_name || provider.provider_id || '—';
+                return provider.rate ? `${name}` : name;
+              })
+              .filter(Boolean) || [];
+          const rateTimestamp = quoteInfo?.rate_timestamp_ms ? formatTime(quoteInfo.rate_timestamp_ms) : '—';
+          const formattedRate = formatExchangeRate(quoteInfo?.exchange_rate || null);
+          const rateLine = formattedRate
+            ? (() => {
+                const currencyMap = {
+                  USD: '$',
+                  CNY: '¥',
+                };
+                const currencySymbol = currencyMap[quoteInfo?.base_currency as keyof typeof currencyMap];
+                return `1 ${invoice.paymentCurrency.symbol} ≈ ${
+                  currencySymbol
+                    ? `${currencySymbol}${formattedRate}`
+                    : `${formattedRate} ${quoteInfo?.base_currency || 'USD'}`
+                }`;
+              })()
+            : null;
+
+          let usdAmount: string | null = null;
+          if (quoteInfo?.base_amount) {
+            usdAmount = formatUsdAmount(quoteInfo.base_amount, locale);
+          } else if (quoteInfo?.exchange_rate && invoice.total) {
+            const calculatedUsd = getUsdAmountFromTokenUnits(
+              new BN(invoice.total),
+              invoice.paymentCurrency.decimal,
+              quoteInfo.exchange_rate
+            );
+            if (calculatedUsd) {
+              usdAmount = formatUsdAmount(calculatedUsd, locale);
+            }
+          }
+
+          const tooltipContent = quoteInfo ? (
+            <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' }}>
+                  {(providerRates.length > 0 ? providerRates.join(', ') : 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>
+          ) : null;
+
           return (
             <Box onClick={(e) => handleLinkClick(e, invoice)} sx={linkStyle}>
-              <Typography sx={isVoid ? { textDecoration: 'line-through' } : {}}>
-                {formatBNStr(invoice.total, invoice.paymentCurrency.decimal)}&nbsp;
-                {invoice.paymentCurrency.symbol}
-              </Typography>
+              <Stack spacing={0.25} alignItems="flex-end">
+                <Typography sx={isVoid ? { textDecoration: 'line-through' } : {}}>
+                  {formatAmount(invoice.total, invoice.paymentCurrency.decimal)}&nbsp;
+                  {invoice.paymentCurrency.symbol}
+                </Typography>
+                {(usdAmount || rateLine) && (
+                  <Tooltip
+                    title={tooltipContent}
+                    placement="top"
+                    arrow
+                    slotProps={{
+                      tooltip: {
+                        sx: {
+                          backgroundColor: 'background.paper',
+                          boxShadow: 1,
+                        },
+                      },
+                    }}>
+                    <Stack spacing={0.25} alignItems="flex-end">
+                      {usdAmount && (
+                        <Typography
+                          variant="caption"
+                          sx={{
+                            color: 'text.secondary',
+                            fontSize: '0.75rem',
+                            fontWeight: 400,
+                            lineHeight: 1.2,
+                          }}>
+                          ≈ ${usdAmount}
+                        </Typography>
+                      )}
+                    </Stack>
+                  </Tooltip>
+                )}
+              </Stack>
             </Box>
           );
         },
@@ -638,6 +762,11 @@ const InvoiceList = React.memo((props: Props & { onPay: (invoiceId: string) => v
           {invoices.map((invoice) => {
             const { link, connect } = getInvoiceLink(invoice, action);
             const isVoid = invoice.status === 'void';
+            const quoteInfo = getInvoiceQuoteInfo(invoice);
+            const formattedRate = formatExchangeRate(quoteInfo?.exchange_rate || null);
+            const rateLine = formattedRate
+              ? `1 ${invoice.paymentCurrency.symbol} ≈ ${formattedRate} ${quoteInfo?.base_currency || 'USD'}`
+              : null;
             return (
               <Stack
                 key={invoice.id}
@@ -687,9 +816,14 @@ const InvoiceList = React.memo((props: Props & { onPay: (invoiceId: string) => v
                     textAlign: 'right',
                   }}>
                   <Typography sx={isVoid ? { textDecoration: 'line-through' } : {}}>
-                    {formatBNStr(invoice.total, invoice.paymentCurrency.decimal)}&nbsp;
+                    {formatAmount(invoice.total, invoice.paymentCurrency.decimal)}&nbsp;
                     {invoice.paymentCurrency.symbol}
                   </Typography>
+                  {rateLine && (
+                    <Typography variant="caption" sx={{ color: 'text.secondary', display: 'block' }}>
+                      {rateLine}
+                    </Typography>
+                  )}
                 </Box>
                 <Box
                   sx={{