@blocklet/payment-react/lib/checkout-v2/components/shared/total-display.js

Reusable react components for payment kit v2

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
module.exports = TotalDisplay;
var _jsxRuntime = require("react/jsx-runtime");
var _material = require("@mui/material");
var _context = require("@arcblock/ux/lib/Locale/context");
var _format = require("../../utils/format");
function splitPrice(total) {
  if (!total) return {
    prefix: "",
    integer: "0",
    decimal: "",
    suffix: ""
  };
  const trimmed = total.trim();
  if (trimmed.startsWith("$")) {
    const numPart = trimmed.slice(1).trim();
    const dotIdx2 = numPart.indexOf(".");
    if (dotIdx2 >= 0) {
      return {
        prefix: "$",
        integer: numPart.slice(0, dotIdx2),
        decimal: `.${numPart.slice(dotIdx2 + 1)}`,
        suffix: ""
      };
    }
    return {
      prefix: "$",
      integer: numPart,
      decimal: "",
      suffix: ""
    };
  }
  const parts = trimmed.split(/\s+/);
  const numStr = parts[0] || "0";
  const unit = parts.slice(1).join(" ");
  const dotIdx = numStr.indexOf(".");
  if (dotIdx >= 0) {
    return {
      prefix: "",
      integer: numStr.slice(0, dotIdx),
      decimal: `.${numStr.slice(dotIdx + 1)}`,
      suffix: unit
    };
  }
  return {
    prefix: "",
    integer: numStr,
    decimal: "",
    suffix: unit
  };
}
function TotalDisplay({
  label = void 0,
  total,
  usdEquivalent = void 0
}) {
  const {
    t
  } = (0, _context.useLocaleContext)();
  const {
    prefix,
    integer,
    decimal,
    suffix
  } = splitPrice(total);
  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
    sx: {
      pt: 4,
      borderTop: "1px solid",
      borderColor: "divider"
    },
    children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
      direction: "row",
      justifyContent: "space-between",
      alignItems: "flex-end",
      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
        spacing: 0.5,
        sx: {
          pb: 1
        },
        children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
          sx: {
            fontSize: 12,
            fontWeight: 700,
            letterSpacing: "0.02em",
            color: "text.disabled"
          },
          children: label || (0, _format.tSafe)(t, "payment.checkout.totalDueToday", "Total due today")
        })
      }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
        sx: {
          display: "flex",
          alignItems: "baseline",
          lineHeight: 1
        },
        children: [prefix && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
          component: "span",
          sx: {
            fontSize: 36,
            fontWeight: 500,
            color: "text.primary",
            opacity: 0.4
          },
          children: prefix
        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
          component: "span",
          sx: {
            fontSize: {
              xs: 54,
              md: 72
            },
            fontWeight: 800,
            lineHeight: 1,
            letterSpacing: "-0.04em",
            color: "text.primary"
          },
          children: integer
        }), decimal && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
          component: "span",
          sx: {
            fontSize: 36,
            fontWeight: 300,
            color: "text.primary",
            opacity: 0.3
          },
          children: decimal
        }), suffix && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
          component: "span",
          sx: {
            fontSize: 20,
            fontWeight: 700,
            color: "text.disabled",
            ml: 1,
            textTransform: "uppercase"
          },
          children: suffix
        })]
      })]
    }), usdEquivalent && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
      sx: {
        fontSize: 12,
        color: "text.disabled",
        textAlign: "right",
        mt: 0.5,
        fontWeight: 500
      },
      children: ["\u2248 ", usdEquivalent]
    })]
  });
}