@blocklet/payment-react/lib/components/quote-lock-banner.js

Reusable react components for payment kit v2

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
module.exports = QuoteLockBanner;
var _jsxRuntime = require("react/jsx-runtime");
var _context = require("@arcblock/ux/lib/Locale/context");
var _iconsMaterial = require("@mui/icons-material");
var _material = require("@mui/material");
var _react = require("react");
var _util = require("../libs/util");
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 expiresAt = null;
  let exchangeRate = null;
  dynamicItems.forEach(item => {
    if (item?.expires_at) {
      expiresAt = expiresAt === null ? item?.expires_at : Math.min(expiresAt, item?.expires_at);
    }
    if (!exchangeRate) {
      exchangeRate = item?.exchange_rate || null;
    }
  });
  return {
    exchangeRate,
    tokenSymbol: currency.symbol,
    baseCurrency: (dynamicItems[0]?.upsell_price || dynamicItems[0]?.price)?.base_currency || "USD",
    expiresAt
  };
}
function QuoteLockBanner({
  items,
  currency
}) {
  const {
    t
  } = (0, _context.useLocaleContext)();
  const quoteLockInfo = (0, _react.useMemo)(() => getQuoteLockInfo(items, currency), [items, currency]);
  if (!quoteLockInfo || !quoteLockInfo.exchangeRate) {
    return null;
  }
  const formattedRateValue = (0, _util.formatExchangeRate)(quoteLockInfo.exchangeRate);
  let formattedRate = "";
  if (formattedRateValue) {
    formattedRate = quoteLockInfo.baseCurrency === "USD" ? `$${formattedRateValue}` : `${formattedRateValue} ${quoteLockInfo.baseCurrency}`;
  }
  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
    sx: {
      bgcolor: "action.hover",
      border: "1px solid",
      borderColor: "divider",
      borderRadius: 1,
      px: 2,
      py: 1.5,
      mb: 2
    },
    children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
      sx: {
        display: "flex",
        alignItems: "center",
        gap: 1.5,
        flexWrap: "wrap"
      },
      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.LockOutlined, {
        sx: {
          fontSize: "1rem",
          color: "success.main"
        }
      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
        sx: {
          fontSize: "0.875rem",
          color: "text.primary",
          flex: 1
        },
        children: t("payment.checkout.quote.dynamicPricingInfo", {
          symbol: quoteLockInfo.tokenSymbol,
          rate: formattedRate,
          currency: ""
        })
      })]
    })
  });
}