@blocklet/payment-react 1.24.4 → 1.25.0

package/lib/history/invoice/list.js

@@ -14,12 +14,13 @@ var _ahooks = require("ahooks");
 var _react = _interopRequireWildcard(require("react"));
 var _reactRouterDom = require("react-router-dom");
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
+var _util = require("@ocap/util");
 var _status = _interopRequireDefault(require("../../components/status"));
 var _payment = require("../../contexts/payment");
 var _subscription = require("../../hooks/subscription");
 var _api = _interopRequireDefault(require("../../libs/api"));
 var _stripePaymentAction = _interopRequireDefault(require("../../components/stripe-payment-action"));
-var _util = require("../../libs/util");
+var _util2 = require("../../libs/util");
 var _table = _interopRequireDefault(require("../../components/table"));
 var _navigation = require("../../libs/navigation");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -38,13 +39,27 @@ const groupByDate = items => {
 };
 const fetchData = (params = {}) => {
   const search = new URLSearchParams();
-  Object.keys(params).forEach(key => {
-    if (params[key]) {
-      search.set(key, String(params[key]));
+  const mergedParams = {
+    include_quote: true,
+    ...params
+  };
+  Object.keys(mergedParams).forEach(key => {
+    if (mergedParams[key]) {
+      search.set(key, String(mergedParams[key]));
     }
   });
   return _api.default.get(`/api/invoices?${search.toString()}`).then(res => res.data);
 };
+const getInvoiceQuoteInfo = invoice => {
+  const lines = invoice.lines || [];
+  for (const line of lines) {
+    const quote = line.metadata?.quote;
+    if (quote?.exchange_rate) {
+      return quote;
+    }
+  }
+  return null;
+};
 const getInvoiceLink = (invoice, action) => {
   if (invoice.id.startsWith("in_")) {
     const path = `/customer/invoice/${invoice.id}${invoice.status === "uncollectible" && action ? `?action=${action}` : ""}`;
@@ -55,7 +70,7 @@ const getInvoiceLink = (invoice, action) => {
   }
   return {
     connect: false,
-    link: (0, _navigation.createLink)((0, _util.getTxLink)(invoice.paymentMethod, invoice.metadata?.payment_details).link, true)
+    link: (0, _navigation.createLink)((0, _util2.getTxLink)(invoice.paymentMethod, invoice.metadata?.payment_details).link, true)
   };
 };
 const linkStyle = {
@@ -160,14 +175,129 @@ const InvoiceTable = _react.default.memo(props => {
       customBodyRenderLite: (_, index) => {
         const invoice = data?.list[index];
         const isVoid = invoice.status === "void";
+        const quoteInfo = getInvoiceQuoteInfo(invoice);
+        const providers = quoteInfo?.providers || [];
+        const providerNames = providers.map(provider => provider.provider_name).filter(Boolean);
+        const providerDisplay = providerNames.length > 0 ? providerNames.join(", ") : quoteInfo?.rate_provider_name || quoteInfo?.rate_provider_id || "\u2014";
+        const providerRates = quoteInfo?.providers?.map(provider => {
+          const name = provider.provider_name || provider.provider_id || "\u2014";
+          return provider.rate ? `${name}` : name;
+        }).filter(Boolean) || [];
+        const rateTimestamp = quoteInfo?.rate_timestamp_ms ? (0, _util2.formatTime)(quoteInfo.rate_timestamp_ms) : "\u2014";
+        const formattedRate = (0, _util2.formatExchangeRate)(quoteInfo?.exchange_rate || null);
+        const rateLine = formattedRate ? (() => {
+          const currencyMap = {
+            USD: "$",
+            CNY: "\xA5"
+          };
+          const currencySymbol = currencyMap[quoteInfo?.base_currency];
+          return `1 ${invoice.paymentCurrency.symbol} \u2248 ${currencySymbol ? `${currencySymbol}${formattedRate}` : `${formattedRate} ${quoteInfo?.base_currency || "USD"}`}`;
+        })() : null;
+        let usdAmount = null;
+        if (quoteInfo?.base_amount) {
+          usdAmount = (0, _util2.formatUsdAmount)(quoteInfo.base_amount, locale);
+        } else if (quoteInfo?.exchange_rate && invoice.total) {
+          const calculatedUsd = (0, _util2.getUsdAmountFromTokenUnits)(new _util.BN(invoice.total), invoice.paymentCurrency.decimal, quoteInfo.exchange_rate);
+          if (calculatedUsd) {
+            usdAmount = (0, _util2.formatUsdAmount)(calculatedUsd, locale);
+          }
+        }
+        const tooltipContent = quoteInfo ? /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+          spacing: 0.5,
+          sx: {
+            p: 1
+          },
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+            direction: "row",
+            justifyContent: "space-between",
+            spacing: 2,
+            children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+              variant: "caption",
+              sx: {
+                color: "text.secondary"
+              },
+              children: [t("payment.customer.invoice.quote.providers"), ":"]
+            }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+              variant: "caption",
+              sx: {
+                color: "text.primary"
+              },
+              children: (providerRates.length > 0 ? providerRates.join(", ") : providerDisplay) || "\u2014"
+            })]
+          }), rateLine && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+            direction: "row",
+            justifyContent: "space-between",
+            spacing: 2,
+            children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+              variant: "caption",
+              sx: {
+                color: "text.secondary"
+              },
+              children: [t("payment.customer.invoice.quote.exchangeRate"), ":"]
+            }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+              variant: "caption",
+              sx: {
+                color: "text.primary"
+              },
+              children: rateLine
+            })]
+          }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+            direction: "row",
+            justifyContent: "space-between",
+            spacing: 2,
+            children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+              variant: "caption",
+              sx: {
+                color: "text.secondary"
+              },
+              children: [t("payment.customer.invoice.quote.rateTimestamp"), ":"]
+            }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+              variant: "caption",
+              sx: {
+                color: "text.primary"
+              },
+              children: rateTimestamp
+            })]
+          })]
+        }) : null;
         return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
           onClick: e => handleLinkClick(e, invoice),
           sx: linkStyle,
-          children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
-            sx: isVoid ? {
-              textDecoration: "line-through"
-            } : {},
-            children: [(0, _util.formatBNStr)(invoice.total, invoice.paymentCurrency.decimal), "\xA0", invoice.paymentCurrency.symbol]
+          children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+            spacing: 0.25,
+            alignItems: "flex-end",
+            children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+              sx: isVoid ? {
+                textDecoration: "line-through"
+              } : {},
+              children: [(0, _util2.formatAmount)(invoice.total, invoice.paymentCurrency.decimal), "\xA0", invoice.paymentCurrency.symbol]
+            }), (usdAmount || rateLine) && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Tooltip, {
+              title: tooltipContent,
+              placement: "top",
+              arrow: true,
+              slotProps: {
+                tooltip: {
+                  sx: {
+                    backgroundColor: "background.paper",
+                    boxShadow: 1
+                  }
+                }
+              },
+              children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
+                spacing: 0.25,
+                alignItems: "flex-end",
+                children: usdAmount && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+                  variant: "caption",
+                  sx: {
+                    color: "text.secondary",
+                    fontSize: "0.75rem",
+                    fontWeight: 400,
+                    lineHeight: 1.2
+                  },
+                  children: ["\u2248 $", usdAmount]
+                })
+              })
+            })]
           })
         });
       }
@@ -206,7 +336,7 @@ const InvoiceTable = _react.default.memo(props => {
           onClick: e => handleLinkClick(e, invoice),
           sx: linkStyle,
           children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_status.default, {
-            label: (0, _util.getInvoiceDescriptionAndReason)(invoice, locale)?.type
+            label: (0, _util2.getInvoiceDescriptionAndReason)(invoice, locale)?.type
           })
         });
       }
@@ -308,7 +438,7 @@ const InvoiceTable = _react.default.memo(props => {
             const quantity = Number(line.quantity || 0);
             const totalAmount = creditAmount * (Number.isFinite(quantity) && quantity > 0 ? quantity : 1);
             const currencySymbol = getCurrency(creditConfig?.currency_id)?.symbol || creditConfig?.currency_id || "Credits";
-            pushCreditItem("amount", `+${(0, _util.formatCreditAmount)(String(totalAmount), currencySymbol)}`);
+            pushCreditItem("amount", `+${(0, _util2.formatCreditAmount)(String(totalAmount), currencySymbol)}`);
             return;
           }
           const scheduleConfig = creditConfig?.schedule;
@@ -317,14 +447,14 @@ const InvoiceTable = _react.default.memo(props => {
             const quantity = Number(line.quantity || 0);
             const totalAmount = scheduledAmount * (Number.isFinite(quantity) && quantity > 0 ? quantity : 1);
             const currencySymbol = getCurrency(creditConfig?.currency_id)?.symbol || creditConfig?.currency_id || "Credits";
-            pushCreditItem("schedule", `+${(0, _util.formatCreditAmount)(String(totalAmount), currencySymbol)}`);
+            pushCreditItem("schedule", `+${(0, _util2.formatCreditAmount)(String(totalAmount), currencySymbol)}`);
             return;
           }
           const creditInfo = line.price?.credit;
           const creditInfoAmount = Number(creditInfo?.amount || 0);
           if (creditInfoAmount > 0) {
             const currencySymbol = creditInfo.currency?.symbol || "Credits";
-            pushCreditItem("credit", `+${(0, _util.formatCreditAmount)(String(creditInfoAmount), currencySymbol)}`);
+            pushCreditItem("credit", `+${(0, _util2.formatCreditAmount)(String(creditInfoAmount), currencySymbol)}`);
           }
         });
         if (creditItems.length === 0) {
@@ -352,7 +482,7 @@ const InvoiceTable = _react.default.memo(props => {
         return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
           onClick: e => handleLinkClick(e, invoice),
           sx: linkStyle,
-          children: (0, _util.formatToDate)(invoice.created_at, locale, relatedSubscription ? "YYYY-MM-DD HH:mm" : "YYYY-MM-DD HH:mm:ss")
+          children: (0, _util2.formatToDate)(invoice.created_at, locale, relatedSubscription ? "YYYY-MM-DD HH:mm" : "YYYY-MM-DD HH:mm:ss")
         });
       }
     }
@@ -424,12 +554,12 @@ const InvoiceTable = _react.default.memo(props => {
             children: /* @__PURE__ */(0, _jsxRuntime.jsx)("span", {
               children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_status.default, {
                 label: invoice.status,
-                color: (0, _util.getInvoiceStatusColor)(invoice.status)
+                color: (0, _util2.getInvoiceStatusColor)(invoice.status)
               })
             })
           }) : /* @__PURE__ */(0, _jsxRuntime.jsx)(_status.default, {
             label: invoice.status,
-            color: (0, _util.getInvoiceStatusColor)(invoice.status)
+            color: (0, _util2.getInvoiceStatusColor)(invoice.status)
           })
         });
       }
@@ -573,7 +703,7 @@ const InvoiceList = _react.default.memo(props => {
           my: 0.5
         },
         children: t("payment.customer.invoice.next", {
-          date: (0, _util.formatToDatetime)(data.subscription.current_period_end * 1e3)
+          date: (0, _util2.formatToDatetime)(data.subscription.current_period_end * 1e3)
         })
       });
     }
@@ -613,6 +743,9 @@ const InvoiceList = _react.default.memo(props => {
           connect
         } = getInvoiceLink(invoice, action);
         const isVoid = invoice.status === "void";
+        const quoteInfo = getInvoiceQuoteInfo(invoice);
+        const formattedRate = (0, _util2.formatExchangeRate)(quoteInfo?.exchange_rate || null);
+        const rateLine = formattedRate ? `1 ${invoice.paymentCurrency.symbol} \u2248 ${formattedRate} ${quoteInfo?.base_currency || "USD"}` : null;
         return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
           direction: "row",
           sx: {
@@ -655,24 +788,31 @@ const InvoiceList = _react.default.memo(props => {
                 })]
               })
             })
-          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+          }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
             sx: {
               flex: 1,
               textAlign: "right"
             },
-            children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+            children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
               sx: isVoid ? {
                 textDecoration: "line-through"
               } : {},
-              children: [(0, _util.formatBNStr)(invoice.total, invoice.paymentCurrency.decimal), "\xA0", invoice.paymentCurrency.symbol]
-            })
+              children: [(0, _util2.formatAmount)(invoice.total, invoice.paymentCurrency.decimal), "\xA0", invoice.paymentCurrency.symbol]
+            }), rateLine && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+              variant: "caption",
+              sx: {
+                color: "text.secondary",
+                display: "block"
+              },
+              children: rateLine
+            })]
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
             sx: {
               flex: 1,
               textAlign: "right"
             },
             children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-              children: (0, _util.formatToDate)(invoice.created_at, locale, "HH:mm:ss")
+              children: (0, _util2.formatToDate)(invoice.created_at, locale, "HH:mm:ss")
             })
           }), !action && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
             className: "invoice-description",
@@ -739,12 +879,12 @@ const InvoiceList = _react.default.memo(props => {
               children: /* @__PURE__ */(0, _jsxRuntime.jsx)("span", {
                 children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_status.default, {
                   label: invoice.status,
-                  color: (0, _util.getInvoiceStatusColor)(invoice.status)
+                  color: (0, _util2.getInvoiceStatusColor)(invoice.status)
                 })
               })
             }) : /* @__PURE__ */(0, _jsxRuntime.jsx)(_status.default, {
               label: invoice.status,
-              color: (0, _util.getInvoiceStatusColor)(invoice.status)
+              color: (0, _util2.getInvoiceStatusColor)(invoice.status)
             })
           })]
         }, invoice.id);
@@ -812,7 +952,7 @@ function CustomerInvoiceList(rawProps) {
       action: "collect",
       saveConnect: false,
       locale,
-      useSocket: (0, _util.isCrossOrigin)() === false,
+      useSocket: (0, _util2.isCrossOrigin)() === false,
       messages: {
         scan: "",
         title: t(`payment.customer.invoice.${action || "pay"}`),
@@ -840,7 +980,7 @@ function CustomerInvoiceList(rawProps) {
         setState({
           paying: ""
         });
-        _Toast.default.error((0, _util.formatError)(err));
+        _Toast.default.error((0, _util2.formatError)(err));
       }
     });
   };

package/lib/hooks/dynamic-pricing.d.ts

@@ -0,0 +1,102 @@
+/**
+ * useDynamicPricing Hook
+ *
+ * Extracts and centralizes all dynamic pricing related calculations
+ * for the checkout summary component.
+ *
+ * Final Freeze Architecture: Quotes are created at Submit time only.
+ * This hook handles preview-time display calculations.
+ */
+import type { TCheckoutSession, TLineItemExpanded, TPaymentCurrency, TPaymentIntent } from '@blocklet/payment-types';
+export interface LiveRateInfo {
+    rate?: string;
+    provider_id?: string;
+    provider_name?: string;
+    provider_display?: string;
+    base_currency?: string;
+    timestamp_ms?: number;
+    fetched_at?: number;
+}
+export interface LiveQuoteSnapshot {
+    id: string;
+    quoted_amount: string;
+    exchange_rate: string;
+    expires_at: number;
+    rate_timestamp_ms?: number | null;
+    renewed?: boolean;
+}
+export interface DiscountInfo {
+    promotion_code?: string;
+    coupon?: string;
+    discount_amount?: string;
+    coupon_details?: {
+        percent_off?: number;
+        amount_off?: string;
+        currency_id?: string;
+        currency_options?: Record<string, {
+            amount_off?: string;
+        }>;
+    };
+}
+export interface DynamicPricingOptions {
+    items: TLineItemExpanded[];
+    currency: TPaymentCurrency;
+    liveRate?: LiveRateInfo;
+    liveQuoteSnapshot?: LiveQuoteSnapshot;
+    checkoutSession?: TCheckoutSession;
+    paymentIntent?: TPaymentIntent | null;
+    locale?: string;
+    isStripePayment?: boolean;
+    isSubscription?: boolean;
+    slippageConfig?: {
+        mode?: 'percent' | 'rate';
+        percent?: number | null;
+        min_acceptable_rate?: string;
+        base_currency?: string;
+    };
+    trialInDays?: number;
+    trialEnd?: number;
+    discounts?: DiscountInfo[];
+}
+export interface RateInfo {
+    exchangeRate: string | null;
+    baseCurrency: string;
+    providerName: string | null;
+    providerId: string | null;
+    timestampMs: number | null;
+    fetchedAt: number | null;
+}
+export interface QuoteMeta {
+    exchangeRate: string | null;
+    baseCurrency: string;
+    expiresAt: number | null;
+    providerName: string | null;
+    providerId: string | null;
+    rateTimestampMs: number | null;
+    slippagePercent: number | null;
+}
+/**
+ * Custom hook for dynamic pricing calculations
+ */
+export declare function useDynamicPricing(options: DynamicPricingOptions): {
+    hasDynamicPricing: boolean;
+    isPriceLocked: boolean;
+    lockExpired: boolean;
+    quoteMeta: QuoteMeta | null;
+    rateInfo: RateInfo;
+    quoteLockedAt: number | null;
+    calculatedTokenAmount: string | null;
+    calculatedDiscountAmount: any;
+    currentSlippagePercent: number;
+    rateDisplay: string | null;
+    providerDisplay: string;
+    formatTotalDisplay: (totalAmountValue: string, fallback?: string) => string;
+    calculateUsdDisplay: (totalAmountValue: string) => string | null;
+    buildQuoteDetailRows: (t: (key: string) => string) => {
+        label: string;
+        value: string | React.ReactNode;
+        isSlippage?: boolean;
+        tooltip?: string;
+    }[];
+};
+export default useDynamicPricing;