@blocklet/payment-react
Version:
Reusable react components for payment kit v2
60 lines (59 loc) • 1.9 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import { useTheme } from "@arcblock/ux/lib/Theme";
import { Avatar, Stack, Typography } from "@mui/material";
import { useCreation, useLocalStorageState, useSize } from "ahooks";
import Livemode from "../components/livemode.js";
import { getStatementDescriptor } from "../libs/util.js";
import UserButtons from "./form/addon.js";
export default function PaymentHeader({ checkoutSession }) {
const [livemode] = useLocalStorageState("livemode", { defaultValue: true });
const brand = getStatementDescriptor(checkoutSession.line_items);
const theme = useTheme();
const domSize = useSize(document.body);
const isColumnLayout = useCreation(() => {
if (domSize) {
if (domSize?.width <= theme.breakpoints.values.md) {
return true;
}
}
return false;
}, [domSize, theme]);
return /* @__PURE__ */ jsxs(
Stack,
{
className: "cko-header",
direction: "row",
spacing: 1,
sx: {
alignItems: "center",
justifyContent: "space-between"
},
children: [
/* @__PURE__ */ jsxs(
Stack,
{
direction: "row",
spacing: 1,
sx: {
alignItems: "center"
},
children: [
/* @__PURE__ */ jsx(
Avatar,
{
variant: "square",
src: window.blocklet.appLogo,
sx: { width: 32, height: 32 },
alt: window.blocklet?.appName || "Logo"
}
),
/* @__PURE__ */ jsx(Typography, { sx: { color: "text.primary", fontWeight: 600 }, children: brand }),
!livemode && /* @__PURE__ */ jsx(Livemode, {})
]
}
),
isColumnLayout ? /* @__PURE__ */ jsx(UserButtons, {}) : null
]
}
);
}