@blocklet/payment-react/lib/payment/summary-section/total-section.js

Reusable react components for payment kit v2

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
module.exports = TotalSection;
var _jsxRuntime = require("react/jsx-runtime");
var _context = require("@arcblock/ux/lib/Locale/context");
var _material = require("@mui/material");
var _amount = _interopRequireDefault(require("../amount"));
var _quoteDetailsPanel = _interopRequireDefault(require("../../components/quote-details-panel"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function TotalSection({
  totalAmountText,
  totalUsdDisplay,
  currency,
  hasDynamicPricing,
  rateDisplay,
  rateInfo,
  quoteDetailRows,
  currentSlippagePercent,
  slippageConfig = void 0,
  isPriceLocked,
  isSubscription,
  completed = false,
  onSlippageChange = void 0,
  isStripePayment = false,
  thenInfo = "",
  isRateLoading = false
}) {
  const {
    t
  } = (0, _context.useLocaleContext)();
  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
      sx: {
        display: "flex",
        justifyContent: "space-between",
        flexDirection: "row",
        alignItems: "flex-start",
        width: "100%"
      },
      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
        className: "base-label",
        children: t("common.total")
      }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
        sx: {
          alignItems: "flex-end"
        },
        children: [isRateLoading ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {
          variant: "text",
          width: 100,
          height: 24
        }) : /* @__PURE__ */(0, _jsxRuntime.jsx)(_amount.default, {
          amount: totalAmountText,
          sx: {
            fontSize: "16px"
          }
        }), hasDynamicPricing && !isStripePayment && !isRateLoading && (totalUsdDisplay ? /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
          sx: {
            fontSize: "0.7875rem",
            color: "text.lighter"
          },
          children: ["\u2248 $", totalUsdDisplay]
        }) : /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Tooltip, {
          title: t("payment.checkout.quote.referenceUnavailable"),
          placement: "top",
          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
            component: "span",
            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
              sx: {
                fontSize: "0.7875rem",
                color: "text.lighter"
              },
              children: "\u2248 \u2014"
            })
          })
        })), hasDynamicPricing && !isStripePayment && /* @__PURE__ */(0, _jsxRuntime.jsx)(_quoteDetailsPanel.default, {
          rateLine: rateDisplay ? t("payment.checkout.quote.rateLine", {
            symbol: currency.symbol,
            rate: rateDisplay
          }) : "",
          rows: quoteDetailRows,
          isSubscription,
          slippageValue: currentSlippagePercent,
          slippageConfig,
          onSlippageChange: !completed && onSlippageChange ? onSlippageChange : void 0,
          exchangeRate: rateInfo.exchangeRate,
          baseCurrency: rateInfo.baseCurrency,
          disabled: isPriceLocked
        })]
      })]
    }), thenInfo && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
      sx: {
        display: "flex",
        justifyContent: "space-between",
        flexDirection: "row",
        alignItems: "flex-start",
        width: "100%",
        borderTop: "1px solid",
        borderColor: "divider",
        pt: 1,
        mt: 1
      },
      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
        className: "base-label",
        children: t("common.nextCharge")
      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
        sx: {
          fontSize: "16px",
          color: "text.secondary"
        },
        children: thenInfo
      })]
    })]
  });
}