@blocklet/payment-react 1.24.4 → 1.25.0

package/lib/libs/util.js

@@ -14,7 +14,10 @@ exports.formatCouponTerms = void 0;
 exports.formatCreditAmount = formatCreditAmount;
 exports.formatCreditForCheckout = formatCreditForCheckout;
 exports.formatDateTime = formatDateTime;
+exports.formatDynamicPrice = formatDynamicPrice;
 exports.formatError = void 0;
+exports.formatExchangeRate = formatExchangeRate;
+exports.formatExchangeRateDisplay = formatExchangeRateDisplay;
 exports.formatLineItemPricing = formatLineItemPricing;
 exports.formatLinkWithLocale = formatLinkWithLocale;
 exports.formatLocale = void 0;
@@ -26,16 +29,19 @@ exports.formatQuantityInventory = formatQuantityInventory;
 exports.formatRecurring = formatRecurring;
 exports.formatSubscriptionProduct = formatSubscriptionProduct;
 exports.formatSubscriptionStatus = formatSubscriptionStatus;
+exports.formatThenValue = formatThenValue;
 exports.formatTime = formatTime;
 exports.formatToDate = formatToDate;
 exports.formatToDatetime = formatToDatetime;
 exports.formatTotalPrice = formatTotalPrice;
 exports.formatUpsellSaving = formatUpsellSaving;
+exports.formatUsdAmount = formatUsdAmount;
 exports.getCheckoutAmount = getCheckoutAmount;
 exports.getCustomerAvatar = getCustomerAvatar;
 exports.getFreeTrialTime = getFreeTrialTime;
 exports.getInvoiceDescriptionAndReason = getInvoiceDescriptionAndReason;
 exports.getInvoiceStatusColor = getInvoiceStatusColor;
+exports.getLineItemAmounts = getLineItemAmounts;
 exports.getLineTimeInfo = void 0;
 exports.getPaymentIntentStatusColor = getPaymentIntentStatusColor;
 exports.getPaymentKitComponent = getPaymentKitComponent;
@@ -44,6 +50,7 @@ exports.getPrefix = void 0;
 exports.getPriceCurrencyOptions = getPriceCurrencyOptions;
 exports.getPriceUintAmountByCurrency = getPriceUintAmountByCurrency;
 exports.getQueryParams = getQueryParams;
+exports.getQuoteLockInfo = getQuoteLockInfo;
 exports.getRecurringPeriod = getRecurringPeriod;
 exports.getRefundStatusColor = getRefundStatusColor;
 exports.getStatementDescriptor = getStatementDescriptor;
@@ -52,6 +59,8 @@ exports.getSubscriptionStatusColor = getSubscriptionStatusColor;
 exports.getSubscriptionTimeSummary = void 0;
 exports.getTokenBalanceLink = getTokenBalanceLink;
 exports.getTxLink = void 0;
+exports.getUsdAmountFromBaseAmount = getUsdAmountFromBaseAmount;
+exports.getUsdAmountFromTokenUnits = getUsdAmountFromTokenUnits;
 exports.getUserProfileLink = getUserProfileLink;
 exports.getWebhookStatusColor = getWebhookStatusColor;
 exports.getWordBreakStyle = getWordBreakStyle;
@@ -256,6 +265,87 @@ function formatNumber(n, precision = 6, trim = true, thousandSeparated = true) {
   const [left, right] = result.split(".");
   return right ? [left, (0, _trimEnd.default)(right, "0")].filter(Boolean).join(".") : left;
 }
+function formatDynamicPrice(n, isDynamic, precision = 6, trim = true, thousandSeparated = true) {
+  if (!isDynamic) {
+    return formatNumber(n, precision, trim, thousandSeparated);
+  }
+  const num = Number(n);
+  if (!Number.isFinite(num)) {
+    return formatNumber(n, precision, trim, thousandSeparated);
+  }
+  const abs = Math.abs(num);
+  const targetPrecision = abs > 0 && abs < 0.01 ? precision : 2;
+  return formatNumber(n, targetPrecision, trim, thousandSeparated);
+}
+const USD_DECIMALS = 8;
+function getUsdAmountFromBaseAmount(amount, quantity, scale = BASE_AMOUNT_SCALE) {
+  if (amount === void 0 || amount === null || !quantity || quantity <= 0) {
+    return null;
+  }
+  const scaled = toScaledBaseAmount(amount, quantity, scale);
+  return formatScaledAmount(scaled, scale);
+}
+function getUsdAmountFromTokenUnits(tokenAmount, tokenDecimals, exchangeRate) {
+  if (!exchangeRate && exchangeRate !== "0") {
+    return null;
+  }
+  if (tokenDecimals === void 0 || tokenDecimals === null) {
+    return null;
+  }
+  try {
+    const amountBN = tokenAmount instanceof _util.BN ? tokenAmount : new _util.BN(tokenAmount || "0");
+    const tokenScale = new _util.BN(10).pow(new _util.BN(tokenDecimals));
+    if (tokenScale.isZero()) {
+      return null;
+    }
+    const rateBN = new _util.BN(exchangeRate.replace(".", ""));
+    const rateDecimalPlaces = exchangeRate.includes(".") ? exchangeRate.split(".")[1]?.length || 0 : 0;
+    const rateScale = new _util.BN(10).pow(new _util.BN(rateDecimalPlaces));
+    const usdPrecisionScale = new _util.BN(10).pow(new _util.BN(USD_DECIMALS));
+    const usdUnit = amountBN.mul(rateBN).mul(usdPrecisionScale).div(tokenScale.mul(rateScale));
+    return (0, _util.fromUnitToToken)(usdUnit.toString(), USD_DECIMALS);
+  } catch {
+    return null;
+  }
+}
+function formatUsdAmount(amount, locale = "en") {
+  if (!amount && amount !== "0") {
+    return null;
+  }
+  const num = Number(amount);
+  if (!Number.isFinite(num)) {
+    return null;
+  }
+  return new Intl.NumberFormat(locale, {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  }).format(num);
+}
+function formatExchangeRate(amount) {
+  if (!amount && amount !== "0") {
+    return null;
+  }
+  const value = String(amount);
+  const num = Number(value);
+  if (!Number.isFinite(num)) {
+    return null;
+  }
+  return value;
+}
+function formatExchangeRateDisplay(rate, currency = "USD", decimals = 2) {
+  if (rate === null || rate === void 0) {
+    return null;
+  }
+  const num = Number(rate);
+  if (!Number.isFinite(num)) {
+    return null;
+  }
+  const formattedValue = num.toFixed(decimals);
+  if (currency === "USD") {
+    return `$${formattedValue}`;
+  }
+  return `${formattedValue} ${currency}`;
+}
 const formatPrice = (price, currency, unit_label, quantity = 1, bn = true, locale = "en") => {
   if (!currency) {
     return "";
@@ -263,6 +353,22 @@ const formatPrice = (price, currency, unit_label, quantity = 1, bn = true, local
   if (price.custom_unit_amount) {
     return `Custom (${currency.symbol})`;
   }
+  if (price.pricing_type === "dynamic" && price.base_amount && price.base_currency === "USD") {
+    const baseAmount = price.base_amount;
+    const usdAmount = Number(baseAmount) * quantity;
+    const formattedUsd = formatUsdAmount(usdAmount.toString(), locale);
+    if (price?.type === "recurring" && price.recurring) {
+      const recurring = formatRecurring(price.recurring, false, "slash", locale);
+      if (unit_label) {
+        return `$${formattedUsd} / ${unit_label} ${recurring}`;
+      }
+      if (price.recurring.usage_type === "metered") {
+        return `$${formattedUsd} / unit ${recurring}`;
+      }
+      return `$${formattedUsd} ${recurring}`;
+    }
+    return `$${formattedUsd}`;
+  }
   const unit = getPriceUintAmountByCurrency(price, currency);
   const amount = bn ? (0, _util.fromUnitToToken)(new _util.BN(unit).mul(new _util.BN(quantity)), currency.decimal).toString() : +unit * quantity;
   if (price?.type === "recurring" && price.recurring) {
@@ -278,10 +384,25 @@ const formatPrice = (price, currency, unit_label, quantity = 1, bn = true, local
   return `${amount} ${currency.symbol}`;
 };
 exports.formatPrice = formatPrice;
-const formatPriceAmount = (price, currency, unit_label, quantity = 1, bn = true) => {
+const formatPriceAmount = (price, currency, unit_label, quantity = 1, bn = true, locale = "en") => {
   if (!currency) {
     return "";
   }
+  if (price.pricing_type === "dynamic" && price.base_amount && price.base_currency === "USD") {
+    const baseAmount = price.base_amount;
+    const usdAmount = Number(baseAmount) * quantity;
+    const formattedUsd = formatUsdAmount(usdAmount.toString(), locale);
+    if (price?.type === "recurring" && price.recurring) {
+      if (unit_label) {
+        return `$${formattedUsd} / ${unit_label}`;
+      }
+      if (price.recurring.usage_type === "metered") {
+        return `$${formattedUsd} / unit`;
+      }
+      return `$${formattedUsd}`;
+    }
+    return `$${formattedUsd}`;
+  }
   const unit = getPriceUintAmountByCurrency(price, currency);
   const amount = bn ? (0, _util.fromUnitToToken)(new _util.BN(unit).mul(new _util.BN(quantity)), currency.decimal).toString() : +unit * quantity;
   if (price?.type === "recurring" && price.recurring) {
@@ -363,9 +484,113 @@ function getPriceCurrencyOptions(price) {
     tiers: null
   }];
 }
+const BASE_AMOUNT_SCALE = 8;
+function formatScaledAmount(value, scale = BASE_AMOUNT_SCALE) {
+  const isNegative = value.isNeg();
+  const absValue = value.abs();
+  const str = absValue.toString().padStart(scale + 1, "0");
+  const integerPart = str.slice(0, str.length - scale) || "0";
+  const fraction = str.slice(-scale).replace(/0+$/, "");
+  const formatted = fraction ? `${integerPart}.${fraction}` : integerPart;
+  return isNegative ? `-${formatted}` : formatted;
+}
+function toScaledBaseAmount(amount, quantity, scale = BASE_AMOUNT_SCALE) {
+  if (!amount || !quantity) {
+    return new _util.BN(0);
+  }
+  const normalized = String(amount);
+  const [integer = "0", fraction = ""] = normalized.split(".");
+  const frac = `${fraction}`.padEnd(scale, "0").slice(0, scale);
+  const digits = `${integer.replace("-", "")}${frac}` || "0";
+  const scaled = new _util.BN(digits).mul(new _util.BN(quantity));
+  return normalized.startsWith("-") ? scaled.neg() : scaled;
+}
+function getLineItemAmounts(item, currency, {
+  useUpsell = true,
+  exchangeRate = null
+} = {}) {
+  if (!currency) {
+    return {
+      unitAmount: new _util.BN(0),
+      totalAmount: new _util.BN(0),
+      isDynamicQuote: false
+    };
+  }
+  const price = useUpsell ? item.upsell_price || item.price : item.price;
+  const quantity = new _util.BN(item.quantity || 0);
+  const quoteAmount = item?.quoted_amount;
+  const quoteCurrencyId = item?.quote_currency_id;
+  const isDynamicPrice = price?.pricing_type === "dynamic";
+  const isQuoteValidForCurrency = isDynamicPrice && quoteAmount && quoteCurrencyId === currency.id;
+  if (isQuoteValidForCurrency) {
+    const totalAmount = new _util.BN(quoteAmount || "0");
+    const unitAmount2 = quantity.gt(new _util.BN(0)) ? totalAmount.add(quantity).sub(new _util.BN(1)).div(quantity) : new _util.BN(0);
+    return {
+      unitAmount: unitAmount2,
+      totalAmount,
+      isDynamicQuote: true
+    };
+  }
+  if (isDynamicPrice && exchangeRate && price?.base_amount) {
+    const rate = Number(exchangeRate);
+    if (rate > 0 && Number.isFinite(rate)) {
+      const baseAmountUsd = Number(price.base_amount);
+      if (baseAmountUsd > 0 && Number.isFinite(baseAmountUsd)) {
+        const tokenAmount = baseAmountUsd / rate;
+        const unitAmount2 = (0, _util.fromTokenToUnit)(tokenAmount.toFixed(currency.decimal || 8), currency.decimal || 8);
+        return {
+          unitAmount: unitAmount2,
+          totalAmount: unitAmount2.mul(quantity),
+          isDynamicQuote: false
+        };
+      }
+    }
+  }
+  const unitAmount = new _util.BN(getPriceUintAmountByCurrency(price, currency));
+  return {
+    unitAmount,
+    totalAmount: unitAmount.mul(quantity),
+    isDynamicQuote: false
+  };
+}
+function getQuoteLockInfo(items, currency) {
+  if (!items?.length || !currency) {
+    return null;
+  }
+  const dynamicItems = items.filter(item => {
+    const price = item.upsell_price || item.price;
+    return price?.pricing_type === "dynamic" && item?.quoted_amount;
+  });
+  if (!dynamicItems.length) {
+    return null;
+  }
+  let totalBaseAmount = new _util.BN(0);
+  let totalTokenAmount = new _util.BN(0);
+  let expiresAt = null;
+  dynamicItems.forEach(item => {
+    const price = item.upsell_price || item.price;
+    const quoteAmount = new _util.BN(item?.quoted_amount || "0");
+    totalTokenAmount = totalTokenAmount.add(quoteAmount);
+    const baseAmount = price?.base_amount;
+    if (baseAmount) {
+      totalBaseAmount = totalBaseAmount.add(toScaledBaseAmount(baseAmount, item.quantity));
+    }
+    if (item?.expires_at) {
+      expiresAt = expiresAt === null ? item?.expires_at : Math.min(expiresAt, item?.expires_at);
+    }
+  });
+  return {
+    baseAmount: formatScaledAmount(totalBaseAmount, BASE_AMOUNT_SCALE),
+    baseCurrency: (dynamicItems[0]?.upsell_price || dynamicItems[0]?.price)?.base_currency || "USD",
+    tokenAmount: (0, _util.fromUnitToToken)(totalTokenAmount, currency.decimal).toString(),
+    tokenSymbol: currency.symbol,
+    expiresAt
+  };
+}
 function formatLineItemPricing(item, currency, {
   trialEnd,
-  trialInDays
+  trialInDays,
+  exchangeRate = null
 }, locale = "en") {
   if (!currency) {
     return {
@@ -375,15 +600,32 @@ function formatLineItemPricing(item, currency, {
     };
   }
   const price = item.upsell_price || item.price;
+  if (!price) {
+    return {
+      primary: "",
+      secondary: "",
+      quantity: ""
+    };
+  }
   let quantity = (0, _locales.t)("common.qty", locale, {
     count: item.quantity
   });
   if (price.recurring?.usage_type === "metered" || +item.quantity === 1) {
     quantity = "";
   }
-  const unitValue = new _util.BN(getPriceUintAmountByCurrency(price, currency));
-  const total = `${(0, _util.fromUnitToToken)(unitValue.mul(new _util.BN(item.quantity)), currency.decimal)} ${currency.symbol}`;
-  const unit = `${(0, _util.fromUnitToToken)(unitValue, currency.decimal)} ${currency.symbol}`;
+  const {
+    unitAmount,
+    totalAmount
+  } = getLineItemAmounts(item, currency, {
+    exchangeRate
+  });
+  const isDynamic = price?.pricing_type === "dynamic";
+  const formatLineItemAmount = bn => {
+    const value = (0, _util.fromUnitToToken)(bn, currency.decimal);
+    return formatDynamicPrice(value, isDynamic, 6);
+  };
+  const total = `${formatLineItemAmount(totalAmount)} ${currency.symbol}`;
+  const unit = `${formatLineItemAmount(unitAmount)} ${currency.symbol}`;
   const trialResult = getFreeTrialTime({
     trialInDays,
     trialEnd
@@ -505,8 +747,13 @@ function getWebhookStatusColor(status) {
       return "default";
   }
 }
-function getCheckoutAmount(items, currency, trialing = false, upsell = true) {
-  if (items.find(x => (x.upsell_price || x.price).custom_unit_amount) && items.length > 1) {
+function getCheckoutAmount(items, currency, trialing = false, upsell = true, {
+  exchangeRate = null
+} = {}) {
+  if (items.find(x => {
+    const price = upsell ? x.upsell_price || x.price : x.price;
+    return price?.custom_unit_amount;
+  }) && items.length > 1) {
     throw new Error("Multiple items with custom unit amount are not supported");
   }
   let renew = new _util.BN(0);
@@ -514,18 +761,20 @@ function getCheckoutAmount(items, currency, trialing = false, upsell = true) {
     const price = upsell ? x.upsell_price || x.price : x.price;
     return price != null;
   }).reduce((acc, x) => {
-    if (x.custom_amount) {
+    const quoteCurrencyId = x?.quote_currency_id;
+    const isQuoteForDifferentCurrency = quoteCurrencyId && quoteCurrencyId !== currency.id;
+    if (x.custom_amount && !isQuoteForDifferentCurrency) {
       return acc.add(new _util.BN(x.custom_amount));
     }
     const price = upsell ? x.upsell_price || x.price : x.price;
-    const unitPrice = getPriceUintAmountByCurrency(price, currency);
-    if (price.custom_unit_amount) {
-      if (unitPrice) {
-        return acc.add(new _util.BN(unitPrice).mul(new _util.BN(x.quantity)));
-      }
-    }
+    const {
+      totalAmount
+    } = getLineItemAmounts(x, currency, {
+      useUpsell: upsell,
+      exchangeRate
+    });
     if (price?.type === "recurring") {
-      renew = renew.add(new _util.BN(unitPrice).mul(new _util.BN(x.quantity)));
+      renew = renew.add(totalAmount);
       if (trialing) {
         return acc;
       }
@@ -533,12 +782,12 @@ function getCheckoutAmount(items, currency, trialing = false, upsell = true) {
         return acc;
       }
     }
-    return acc.add(new _util.BN(unitPrice).mul(new _util.BN(x.quantity)));
+    return acc.add(totalAmount);
   }, new _util.BN(0)).toString();
   return {
     subtotal: total,
     total,
-    renew: renew.toString(),
+    renew: formatDynamicPrice(renew.toString(), !!exchangeRate),
     discount: "0",
     shipping: "0",
     tax: "0"
@@ -569,7 +818,7 @@ function formatUpsellSaving(items, currency) {
   if (items[0]?.upsell_price_id) {
     return "0";
   }
-  if (!items[0]?.price.upsell?.upsells_to) {
+  if (!items[0]?.price?.upsell?.upsells_to) {
     return "0";
   }
   const from = getCheckoutAmount(items, currency, false, false);
@@ -600,6 +849,14 @@ function formatMeteredThen(subscription, recurring, hasMetered, locale = "en") {
     recurring
   });
 }
+function formatThenValue(subscription, recurring, hasMetered, locale = "en") {
+  if (hasMetered) {
+    return (0, _locales.t)("payment.checkout.metered", locale, {
+      recurring
+    });
+  }
+  return [subscription, recurring].filter(Boolean).join(" ");
+}
 function formatPriceDisplay({
   amount,
   then,
@@ -665,11 +922,15 @@ function getFreeTrialTime({
 function formatCheckoutHeadlines(items, currency, {
   trialInDays,
   trialEnd
-}, locale = "en") {
+}, locale = "en", {
+  exchangeRate = null
+} = {}) {
   const brand = getStatementDescriptor(items);
   const {
     total
-  } = getCheckoutAmount(items, currency, trialInDays > 0);
+  } = getCheckoutAmount(items, currency, trialInDays > 0, true, {
+    exchangeRate
+  });
   const actualAmount = (0, _util.fromUnitToToken)(total, currency.decimal);
   const amount = `${(0, _util.fromUnitToToken)(total, currency.decimal)} ${currency.symbol}`;
   const trialResult = getFreeTrialTime({
@@ -687,10 +948,10 @@ function formatCheckoutHeadlines(items, currency, {
   }
   const {
     name
-  } = items[0]?.price.product || {
+  } = items[0]?.price?.product || {
     name: ""
   };
-  if (items.every(x => x.price.type === "one_time")) {
+  if (items.every(x => x.price?.type === "one_time")) {
     const action = (0, _locales.t)("payment.checkout.pay", locale, {
       payee: brand
     });
@@ -710,19 +971,24 @@ function formatCheckoutHeadlines(items, currency, {
       priceDisplay: amount
     };
   }
-  const item = items.find(x => x.price.type === "recurring");
+  const item = items.find(x => x.price?.type === "recurring");
   const recurring = formatRecurring((item?.upsell_price || item?.price)?.recurring, false, "per", locale);
-  const hasMetered = items.some(x => x.price.type === "recurring" && x.price.recurring?.usage_type === "metered");
+  const hasMetered = items.some(x => x.price?.type === "recurring" && x.price?.recurring?.usage_type === "metered");
   const differentRecurring = hasMultipleRecurringIntervals(items);
-  if (items.every(x => x.price.type === "recurring")) {
-    const subscription2 = [hasMetered ? (0, _locales.t)("payment.checkout.least", locale) : "", (0, _util.fromUnitToToken)(items.reduce((acc, x) => {
-      if (x.price.recurring?.usage_type === "metered") {
+  if (items.every(x => x.price?.type === "recurring")) {
+    const subscription2 = [hasMetered ? (0, _locales.t)("payment.checkout.least", locale) : "", formatDynamicPrice((0, _util.fromUnitToToken)(items.reduce((acc, x) => {
+      const price = x.upsell_price || x.price;
+      if (price?.recurring?.usage_type === "metered") {
         return acc;
       }
-      return acc.add(new _util.BN(getPriceUintAmountByCurrency(x.upsell_price || x.price, currency)).mul(new _util.BN(x.quantity)));
-    }, new _util.BN(0)), currency.decimal), currency.symbol].filter(Boolean).join(" ");
+      return acc.add(getLineItemAmounts(x, currency, {
+        exchangeRate
+      }).totalAmount);
+    }, new _util.BN(0)), currency.decimal), !!exchangeRate), currency.symbol].filter(Boolean).join(" ");
     if (items.length > 1) {
       if (trialResult.count > 0) {
+        const thenDisplay4 = formatMeteredThen(subscription2, recurring, hasMetered && Number(subscription2) === 0, locale);
+        const thenValue4 = formatThenValue(subscription2, recurring, hasMetered && Number(subscription2) === 0, locale);
         const result4 = {
           action: (0, _locales.t)("payment.checkout.try2", locale, {
             name,
@@ -732,33 +998,51 @@ function formatCheckoutHeadlines(items, currency, {
             count: trialResult.count,
             interval: trialResult.interval
           }),
-          then: formatMeteredThen(subscription2, recurring, hasMetered && Number(subscription2) === 0, locale),
+          then: thenDisplay4,
+          thenValue: thenValue4,
           showThen: true,
           actualAmount: "0"
         };
         return {
           ...result4,
-          priceDisplay: formatPriceDisplay(result4, recurring, hasMetered, locale)
+          priceDisplay: formatPriceDisplay({
+            amount: result4.amount,
+            then: thenDisplay4,
+            actualAmount: result4.actualAmount,
+            showThen: result4.showThen
+          }, recurring, hasMetered, locale)
         };
       }
+      const thenDisplay3 = hasMetered ? (0, _locales.t)("payment.checkout.meteredThen", locale, {
+        recurring
+      }) : recurring;
+      const thenValue3 = hasMetered ? (0, _locales.t)("payment.checkout.metered", locale, {
+        recurring
+      }) : recurring;
       const result3 = {
         action: (0, _locales.t)("payment.checkout.sub2", locale, {
           name,
           count: items.length - 1
         }),
         amount,
-        then: hasMetered ? (0, _locales.t)("payment.checkout.meteredThen", locale, {
-          recurring
-        }) : recurring,
+        then: thenDisplay3,
+        thenValue: thenValue3,
         showThen: hasMetered,
         actualAmount
       };
       return {
         ...result3,
-        priceDisplay: formatPriceDisplay(result3, recurring, hasMetered, locale)
+        priceDisplay: formatPriceDisplay({
+          amount: result3.amount,
+          then: thenDisplay3,
+          actualAmount: result3.actualAmount,
+          showThen: result3.showThen
+        }, recurring, hasMetered, locale)
       };
     }
     if (trialResult.count > 0) {
+      const thenDisplay3 = formatMeteredThen(subscription2, recurring, hasMetered && Number(subscription2) === 0, locale);
+      const thenValue3 = formatThenValue(subscription2, recurring, hasMetered && Number(subscription2) === 0, locale);
       const result3 = {
         action: (0, _locales.t)("payment.checkout.try1", locale, {
           name
@@ -767,53 +1051,87 @@ function formatCheckoutHeadlines(items, currency, {
           count: trialResult.count,
           interval: trialResult.interval
         }),
-        then: formatMeteredThen(subscription2, recurring, hasMetered && Number(subscription2) === 0, locale),
+        then: thenDisplay3,
+        thenValue: thenValue3,
         showThen: true,
         actualAmount: "0"
       };
       return {
         ...result3,
-        priceDisplay: formatPriceDisplay(result3, recurring, hasMetered, locale)
+        priceDisplay: formatPriceDisplay({
+          amount: result3.amount,
+          then: thenDisplay3,
+          actualAmount: result3.actualAmount,
+          showThen: result3.showThen
+        }, recurring, hasMetered, locale)
       };
     }
+    const thenDisplay2 = hasMetered ? (0, _locales.t)("payment.checkout.meteredThen", locale, {
+      recurring
+    }) : recurring;
+    const thenValue2 = hasMetered ? (0, _locales.t)("payment.checkout.metered", locale, {
+      recurring
+    }) : recurring;
     const result2 = {
       action: (0, _locales.t)("payment.checkout.sub1", locale, {
         name
       }),
       amount,
-      then: hasMetered ? (0, _locales.t)("payment.checkout.meteredThen", locale, {
-        recurring
-      }) : recurring,
+      then: thenDisplay2,
+      thenValue: thenValue2,
       showThen: hasMetered && !differentRecurring,
       actualAmount
     };
     return {
       ...result2,
-      priceDisplay: formatPriceDisplay(result2, recurring, hasMetered, locale)
+      priceDisplay: formatPriceDisplay({
+        amount: result2.amount,
+        then: thenDisplay2,
+        actualAmount: result2.actualAmount,
+        showThen: result2.showThen
+      }, recurring, hasMetered, locale)
     };
   }
-  const subscription = (0, _util.fromUnitToToken)(items.filter(x => x.price.type === "recurring").reduce((acc, x) => {
-    if (x.price.recurring?.usage_type === "metered") {
+  const subscription = (0, _util.fromUnitToToken)(items.filter(x => x.price?.type === "recurring").reduce((acc, x) => {
+    if (x.price?.recurring?.usage_type === "metered") {
       return acc;
     }
-    return acc.add(new _util.BN(getPriceUintAmountByCurrency(x.price, currency)).mul(new _util.BN(x.quantity)));
+    return acc.add(getLineItemAmounts(x, currency, {
+      useUpsell: false,
+      exchangeRate
+    }).totalAmount);
   }, new _util.BN(0)), currency.decimal);
+  const thenDisplay = formatMeteredThen(`${subscription} ${currency.symbol}`, recurring, hasMetered && Number(subscription) === 0, locale);
+  const thenValue = formatThenValue(`${subscription} ${currency.symbol}`, recurring, hasMetered && Number(subscription) === 0, locale);
   const result = {
     action: (0, _locales.t)("payment.checkout.pay", locale, {
       payee: brand
     }),
     amount,
-    then: formatMeteredThen(`${subscription} ${currency.symbol}`, recurring, hasMetered && Number(subscription) === 0, locale),
+    then: thenDisplay,
+    thenValue,
     showThen: !differentRecurring,
     actualAmount
   };
   return {
     ...result,
-    priceDisplay: formatPriceDisplay(result, recurring, hasMetered, locale)
+    priceDisplay: formatPriceDisplay({
+      amount: result.amount,
+      then: thenDisplay,
+      actualAmount: result.actualAmount,
+      showThen: result.showThen
+    }, recurring, hasMetered, locale)
   };
 }
-function formatAmount(amount, decimals) {
-  return (0, _util.fromUnitToToken)(amount, decimals);
+function formatAmount(amount, decimals, precision = 2) {
+  const tokenAmount = (0, _util.fromUnitToToken)(amount, decimals);
+  const numericValue = Number(tokenAmount);
+  if (!Number.isFinite(numericValue)) {
+    return formatBNStr(amount, decimals, precision, true, false);
+  }
+  const abs = Math.abs(numericValue);
+  const targetPrecision = abs > 0 && abs < 0.01 ? decimals : 2;
+  return formatNumber(tokenAmount, targetPrecision, true, false);
 }
 function findCurrency(methods, currencyId) {
   for (const method of methods) {
@@ -1306,7 +1624,7 @@ function showStaking(method, currency, noStake) {
   if (noStake) {
     return false;
   }
-  if (method.type === "arcblock") {
+  if (method && method.type === "arcblock") {
     return currency.type !== "credit";
   }
   return false;