@blocklet/payment-react/lib/checkout-v2/components/left/promotion-input.js

Reusable react components for payment kit v2

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
module.exports = PromotionInput;
var _jsxRuntime = require("react/jsx-runtime");
var _react = require("react");
var _Add = _interopRequireDefault(require("@mui/icons-material/Add"));
var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
var _LocalOffer = _interopRequireDefault(require("@mui/icons-material/LocalOffer"));
var _material = require("@mui/material");
var _context = require("@arcblock/ux/lib/Locale/context");
var _util = require("../../../libs/util");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function PromotionInput({
  promotion,
  discounts,
  discountAmount,
  currency = null,
  initialShowInput = false,
  isAmountLoading = false
}) {
  const {
    t,
    locale
  } = (0, _context.useLocaleContext)();
  const [showInput, setShowInput] = (0, _react.useState)(false);
  const [code, setCode] = (0, _react.useState)("");
  const [applying, setApplying] = (0, _react.useState)(false);
  const [error, setError] = (0, _react.useState)("");
  const effectiveShowInput = initialShowInput || showInput;
  const handleApply = async () => {
    if (!code.trim()) return;
    setApplying(true);
    setError("");
    const result = await promotion.apply(code.trim());
    if (!result.success) {
      setError(result.error || "Invalid code");
    } else {
      setCode("");
      setShowInput(false);
    }
    setApplying(false);
  };
  const handleKeyPress = event => {
    if (event.key === "Enter" && !applying && code.trim()) {
      handleApply();
    }
  };
  if (discounts?.length > 0) {
    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
      children: discounts.map((disc, i) => {
        const discCode = disc.promotion_code_details?.code || disc.verification_data?.code || disc.promotion_code || "";
        const coupon = disc.coupon_details || {};
        const description = coupon && currency ? (0, _util.formatCouponTerms)(coupon, currency, locale) : "";
        return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
          direction: "row",
          justifyContent: "space-between",
          alignItems: "center",
          children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
            direction: "row",
            alignItems: "center",
            spacing: 0.5,
            sx: {
              bgcolor: theme => theme.palette.mode === "dark" ? "rgba(18,184,134,0.1)" : "#ebfef5",
              px: 1.5,
              py: 0.5,
              borderRadius: "8px",
              border: "1px solid",
              borderColor: theme => theme.palette.mode === "dark" ? "rgba(18,184,134,0.2)" : "#d3f9e8"
            },
            children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_LocalOffer.default, {
              sx: {
                color: "#12b886",
                fontSize: 14
              }
            }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
              sx: {
                fontWeight: 700,
                fontSize: 13,
                color: "#12b886"
              },
              children: discCode
            }), description && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
              sx: {
                fontSize: 12,
                color: "#12b886",
                fontWeight: 500,
                opacity: 0.8
              },
              children: ["\xB7 ", description]
            }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.IconButton, {
              size: "small",
              onClick: promotion.remove,
              sx: {
                width: 18,
                height: 18,
                ml: 0.25
              },
              children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_Close.default, {
                sx: {
                  fontSize: 12,
                  color: "#12b886"
                }
              })
            })]
          }), isAmountLoading ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {
            variant: "text",
            width: 80,
            height: 22
          }) : /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
            sx: {
              color: "text.primary",
              fontWeight: 600,
              fontSize: 14
            },
            children: ["-", discountAmount || "0"]
          })]
        }, disc.promotion_code || disc.coupon || i);
      })
    });
  }
  if (!promotion.active) return null;
  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
    sx: {
      minHeight: 36
    },
    children: effectiveShowInput ? /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
      onBlur: e => {
        if (initialShowInput) return;
        if (!e.currentTarget.contains(e.relatedTarget) && !code.trim()) {
          setShowInput(false);
        }
      },
      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.TextField, {
        fullWidth: true,
        size: "small",
        value: code,
        onChange: e => setCode(e.target.value),
        onKeyPress: handleKeyPress,
        placeholder: t("payment.checkout.promotion.placeholder"),
        disabled: applying,
        autoFocus: true,
        slotProps: {
          input: {
            endAdornment: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.InputAdornment, {
              position: "end",
              children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
                size: "small",
                onClick: handleApply,
                disabled: !code.trim() || applying,
                variant: "text",
                sx: {
                  color: "primary.main",
                  fontSize: 13,
                  textTransform: "none",
                  minWidth: "auto",
                  fontWeight: 600
                },
                children: applying ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.CircularProgress, {
                  size: 16
                }) : t("payment.checkout.promotion.apply")
              })
            })
          }
        },
        sx: {
          "& .MuiOutlinedInput-root": {
            pr: 1,
            borderRadius: "8px",
            height: 36
          },
          "& .MuiOutlinedInput-input": {
            py: "6px",
            fontSize: 13
          }
        }
      }), error && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Alert, {
        severity: "error",
        sx: {
          mt: 0.5,
          py: 0,
          fontSize: 12,
          borderRadius: "6px"
        },
        children: error
      })]
    }) : /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
      onClick: () => setShowInput(true),
      startIcon: /* @__PURE__ */(0, _jsxRuntime.jsx)(_Add.default, {
        sx: {
          fontSize: 18
        }
      }),
      variant: "text",
      sx: {
        fontWeight: 600,
        fontSize: 13,
        textTransform: "none",
        justifyContent: "flex-start",
        p: 0,
        height: 36,
        color: "primary.main",
        "&:hover": {
          backgroundColor: "transparent",
          textDecoration: "underline"
        }
      },
      children: t("payment.checkout.promotion.add_code")
    })
  });
}