@blocklet/payment-react/lib/payment/header.js

Reusable react components for payment kit v2

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
module.exports = PaymentHeader;
var _jsxRuntime = require("react/jsx-runtime");
var _Theme = require("@arcblock/ux/lib/Theme");
var _material = require("@mui/material");
var _ahooks = require("ahooks");
var _livemode = _interopRequireDefault(require("../components/livemode"));
var _util = require("../libs/util");
var _addon = _interopRequireDefault(require("./form/addon"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function PaymentHeader({
  checkoutSession
}) {
  const [livemode] = (0, _ahooks.useLocalStorageState)("livemode", {
    defaultValue: true
  });
  const brand = (0, _util.getStatementDescriptor)(checkoutSession.line_items);
  const theme = (0, _Theme.useTheme)();
  const domSize = (0, _ahooks.useSize)(document.body);
  const isColumnLayout = (0, _ahooks.useCreation)(() => {
    if (domSize) {
      if (domSize?.width <= theme.breakpoints.values.md) {
        return true;
      }
    }
    return false;
  }, [domSize, theme]);
  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
    className: "cko-header",
    direction: "row",
    spacing: 1,
    sx: {
      alignItems: "center",
      justifyContent: "space-between"
    },
    children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
      direction: "row",
      spacing: 1,
      sx: {
        alignItems: "center"
      },
      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Avatar, {
        variant: "square",
        src: window.blocklet.appLogo,
        sx: {
          width: 32,
          height: 32
        },
        alt: window.blocklet?.appName || "Logo"
      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
        sx: {
          color: "text.primary",
          fontWeight: 600
        },
        children: brand
      }), !livemode && /* @__PURE__ */(0, _jsxRuntime.jsx)(_livemode.default, {})]
    }), isColumnLayout ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_addon.default, {}) : null]
  });
}