@blocklet/payment-react/lib/payment/form/currency.js

Reusable react components for payment kit v2

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
module.exports = CurrencySelector;
var _jsxRuntime = require("react/jsx-runtime");
var _material = require("@mui/material");
var _system = require("@mui/system");
function CurrencySelector({
  value,
  currencies,
  onChange
}) {
  return /* @__PURE__ */(0, _jsxRuntime.jsx)(Root, {
    className: "cko-currency-selector",
    count: currencies.length,
    style: {
      display: currencies.length > 1 ? "grid" : "block",
      width: "100%",
      gap: 12,
      gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))"
    },
    children: currencies.map(x => {
      const selected = x.id === value;
      return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Card, {
        variant: "outlined",
        onClick: () => onChange(x.id, x.method?.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: x.logo,
            alt: x.name,
            sx: {
              width: 40,
              height: 40,
              marginRight: "12px"
            }
          }), /* @__PURE__ */(0, _jsxRuntime.jsxs)("div", {
            children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
              variant: "h5",
              component: "div",
              sx: {
                fontSize: "16px",
                color: "text.primary",
                fontWeight: "500"
              },
              children: x.symbol
            }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
              gutterBottom: true,
              sx: {
                color: "text.lighter",
                fontSize: 14
              },
              children: x.method.name
            })]
          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Radio, {
            checked: selected,
            sx: {
              position: "absolute",
              right: 0
            }
          })]
        })
      }, x.id);
    })
  });
}
const Root = (0, _system.styled)("section")`
  .cko-payment-card {
    position: relative;
    border: 1px solid;
    border-color: ${({
  theme
}) => theme.palette.primary.main};
    padding: 4px 8px;
    cursor: pointer;
    background: ${({
  theme
}) => theme.palette.grey[50]};
  }

  .cko-payment-card-unselect {
    border: 1px solid;
    border-color: ${({
  theme
}) => theme.palette.divider};
    padding: 4px 8px;
    cursor: pointer;
    background: ${({
  theme
}) => theme.palette.grey[50]};
  }
`;