@blocklet/payment-react/lib/components/auto-topup/product-card.js

Reusable react components for payment kit v2

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
module.exports = AutoTopupProductCard;
var _jsxRuntime = require("react/jsx-runtime");
var _material = require("@mui/material");
var _context = require("@arcblock/ux/lib/Locale/context");
var _react = require("react");
var _productCard = _interopRequireDefault(require("../../payment/product-card"));
var _util = require("../../libs/util");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function AutoTopupProductCard({
  product,
  price,
  currency,
  quantity,
  onQuantityChange,
  maxQuantity = 99,
  minQuantity = 1,
  creditCurrency
}) {
  const {
    t
  } = (0, _context.useLocaleContext)();
  const [localQuantity, setLocalQuantity] = (0, _react.useState)(quantity);
  const localQuantityNum = Number(localQuantity) || 0;
  const handleQuantityChange = newQuantity => {
    if (!newQuantity) {
      setLocalQuantity(void 0);
      return;
    }
    if (newQuantity >= minQuantity && newQuantity <= maxQuantity) {
      setLocalQuantity(newQuantity);
      onQuantityChange(newQuantity);
    }
  };
  const handleQuantityInputChange = event => {
    const value = parseInt(event.target.value || "0", 10);
    if (!Number.isNaN(value)) {
      handleQuantityChange(value);
    }
  };
  const creditUnitAmount = Number(price.metadata?.credit_config?.credit_amount || 0);
  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Card, {
    variant: "outlined",
    sx: {
      p: 2
    },
    children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
      direction: "row",
      spacing: 2,
      sx: {
        flexDirection: {
          xs: "column",
          sm: "row"
        },
        alignItems: {
          xs: "flex-start",
          sm: "center"
        },
        justifyContent: {
          xs: "flex-start",
          sm: "space-between"
        }
      },
      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
        direction: "row",
        spacing: 2,
        sx: {
          alignItems: "center",
          flex: 1
        },
        children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_productCard.default, {
          name: product?.name || "",
          description: t("payment.autoTopup.creditsIncluded", {
            name: creditCurrency?.name,
            num: (0, _util.formatNumber)(creditUnitAmount * localQuantityNum)
          }),
          logo: product?.images?.[0],
          size: 40
        })
      }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
        direction: "row",
        spacing: 1,
        sx: {
          alignItems: "center",
          alignSelf: {
            xs: "flex-end",
            sm: "center"
          }
        },
        children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
          variant: "body2",
          sx: {
            color: "text.secondary",
            minWidth: "fit-content"
          },
          children: [t("common.quantity"), ":"]
        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.TextField, {
          size: "small",
          value: localQuantity,
          onChange: handleQuantityInputChange,
          type: "number",
          sx: {
            "& .MuiInputBase-root": {
              height: 32
            }
          },
          slotProps: {
            htmlInput: {
              min: 0,
              max: maxQuantity,
              style: {
                textAlign: "center",
                padding: "4px 8px"
              }
            }
          }
        })]
      })]
    }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
      direction: "row",
      sx: {
        justifyContent: "space-between",
        alignItems: "center",
        mt: 2,
        pt: 2,
        borderTop: "1px solid",
        borderColor: "divider"
      },
      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
        variant: "body2",
        sx: {
          color: "text.secondary"
        },
        children: t("payment.autoTopup.rechargeAmount")
      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
        variant: "h6",
        sx: {
          fontWeight: 600,
          color: "text.primary"
        },
        children: (0, _util.formatPrice)(price, currency, product?.unit_label, localQuantity, true)
      })]
    })]
  });
}