@blocklet/payment-react/lib/checkout-v2/components/right/currency-grid.js

Reusable react components for payment kit v2

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
module.exports = CurrencyGrid;
var _jsxRuntime = require("react/jsx-runtime");
var _material = require("@mui/material");
var _styles = require("@mui/material/styles");
const CurrencyRoot = (0, _styles.styled)("section")`
  display: grid;
  width: 100%;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

  .cko-payment-card {
    position: relative;
    border: 1px solid ${({
  theme
}) => theme.palette.primary.main};
    padding: 4px 8px;
    cursor: pointer;
    background: ${({
  theme
}) => theme.palette.grey[50]};
  }

  .cko-payment-card-unselect {
    border: 1px solid ${({
  theme
}) => theme.palette.divider};
    padding: 4px 8px;
    cursor: pointer;
    background: ${({
  theme
}) => theme.palette.grey[50]};
  }
`;
function CurrencyGrid({
  currencies,
  selectedId,
  onSelect
}) {
  if (!currencies?.length) return null;
  return /* @__PURE__ */(0, _jsxRuntime.jsx)(CurrencyRoot, {
    style: {
      display: currencies.length > 1 ? "grid" : "block"
    },
    children: currencies.map(cur => {
      const selected = cur.id === selectedId;
      const methodName = cur.method?.name || cur.name || "";
      return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Card, {
        variant: "outlined",
        onClick: () => onSelect(cur.id),
        className: selected ? "cko-payment-card" : "cko-payment-card-unselect",
        children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
          direction: "row",
          sx: {
            alignItems: "center",
            position: "relative"
          },
          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Avatar, {
            src: cur.logo,
            alt: cur.name,
            sx: {
              width: 40,
              height: 40,
              mr: "12px"
            }
          }), /* @__PURE__ */(0, _jsxRuntime.jsxs)("div", {
            children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
              sx: {
                fontSize: 16,
                color: "text.primary",
                fontWeight: 500
              },
              children: cur.symbol
            }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
              sx: {
                color: "text.secondary",
                fontSize: 14
              },
              children: methodName
            })]
          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Radio, {
            checked: selected,
            sx: {
              position: "absolute",
              right: 0
            }
          })]
        })
      }, cur.id);
    })
  });
}