@blocklet/payment-react/lib/checkout-v2/components/shared/scenario-badge.js

Reusable react components for payment kit v2

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
module.exports = ScenarioBadge;
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 ScenarioBadge({
  livemode,
  label = void 0
}) {
  const {
    t
  } = (0, _context.useLocaleContext)();
  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
    direction: "row",
    alignItems: "center",
    spacing: 1,
    sx: {
      mb: 1.5
    },
    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
      component: "span",
      sx: {
        fontSize: 10,
        fontWeight: 700,
        letterSpacing: "0.1em",
        lineHeight: 1,
        textTransform: "uppercase",
        color: "primary.main",
        bgcolor: theme => theme.palette.mode === "dark" ? `${theme.palette.primary.main}1A` : `${theme.palette.primary.main}0D`,
        px: 1,
        py: 0.5,
        borderRadius: "4px"
      },
      children: label || (0, _format.tSafe)(t, "payment.checkout.orderSummary", "Order Summary")
    }), !livemode && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
      component: "span",
      sx: {
        fontSize: 10,
        fontWeight: 700,
        letterSpacing: "0.1em",
        lineHeight: 1,
        textTransform: "uppercase",
        color: theme => theme.palette.mode === "dark" ? theme.palette.grey[500] : theme.palette.grey[400],
        bgcolor: theme => theme.palette.mode === "dark" ? "rgba(255,255,255,0.06)" : theme.palette.grey[100],
        px: 1,
        py: 0.5,
        borderRadius: "4px"
      },
      children: t("common.livemode")
    })]
  });
}