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

Reusable react components for payment kit v2

import { jsx, jsxs } from "react/jsx-runtime";
import { Stack, Typography } from "@mui/material";
import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
import { tSafe } from "../../utils/format.js";
export default function ScenarioBadge({ livemode, label = void 0 }) {
  const { t } = useLocaleContext();
  return /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, sx: { mb: 1.5 }, children: [
    /* @__PURE__ */ jsx(
      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 || tSafe(t, "payment.checkout.orderSummary", "Order Summary")
      }
    ),
    !livemode && /* @__PURE__ */ jsx(
      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")
      }
    )
  ] });
}