@pisell/private-materials 6.3.15 → 6.4.2

package/lib/components/checkout/components/CashPaymentModule/index.js

@@ -0,0 +1,269 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/checkout/components/CashPaymentModule/index.tsx
+var CashPaymentModule_exports = {};
+__export(CashPaymentModule_exports, {
+  CashPaymentModule: () => CashPaymentModule,
+  default: () => CashPaymentModule_default
+});
+module.exports = __toCommonJS(CashPaymentModule_exports);
+var import_react = __toESM(require("react"));
+var import_index = require("./index.less");
+var import_classnames = __toESM(require("classnames"));
+var import_icon = require("@pisell/icon");
+var import_pisellPriceKeyboardPopover = __toESM(require("../../../../pro/pisellPriceKeyboardPopover"));
+var import_useEngineContext = __toESM(require("../../../../hooks/useEngineContext"));
+var import_utils = require("@pisell/utils");
+var import_locales = __toESM(require("../../locales"));
+var import_useToast = __toESM(require("../../../../hooks/useToast"));
+function CashPaymentModule({
+  amountSymbol,
+  orderInfo,
+  onPaymentComplete,
+  customAmount,
+  amountButtons = [],
+  // 按钮列表
+  disabled = false,
+  // 禁用状态
+  roundingFunction,
+  balanceDueAmount = "0"
+  // 剩余支付金额
+}) {
+  const [amount, setAmount] = (0, import_react.useState)(customAmount || "");
+  const [roundingAmount, setRoundingAmount] = (0, import_react.useState)(0);
+  const [amountList, setAmountList] = (0, import_react.useState)(amountButtons.length ? amountButtons : new Array(6).fill(0));
+  (0, import_react.useEffect)(() => {
+    setAmountList(amountButtons.length ? amountButtons : new Array(6).fill(0));
+  }, [amountButtons]);
+  const context = (0, import_useEngineContext.default)();
+  const Toast = (0, import_useToast.default)();
+  const getText = (key, fallback) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const currentLang = ((_e = (_d = (_c = (_b = (_a = context.appHelper.utils) == null ? void 0 : _a.getApp) == null ? void 0 : _b.call(_a)) == null ? void 0 : _c.locales) == null ? void 0 : _d.getLocale) == null ? void 0 : _e.call(_d)) || ((_g = (_f = context.appHelper.utils) == null ? void 0 : _f.storage) == null ? void 0 : _g.get("umi_locale")) || "en";
+    const checkoutText = (_h = import_locales.default[currentLang]) == null ? void 0 : _h[key];
+    if (checkoutText) {
+      return checkoutText;
+    }
+    return import_utils.locales.getText(key) || fallback;
+  };
+  (0, import_react.useEffect)(() => {
+    handleKeyboardConfirm(customAmount || "");
+  }, [customAmount, balanceDueAmount]);
+  const isAmountButtonsDisabled = disabled || Number(customAmount || 0) === 0;
+  const isInputDisabled = disabled || Number(customAmount || 0) === 0;
+  const handleAmountClick = (clickedAmount) => {
+    if (isAmountButtonsDisabled) return;
+    const amountStr = clickedAmount.toString();
+    setAmount(amountStr);
+    setRoundingAmount(0);
+  };
+  const handleCashPay = () => {
+    if (isAmountButtonsDisabled) return;
+    if (onPaymentComplete) {
+      if (Number(amount) === 0 && Math.abs(roundingAmount) === 0) {
+        Toast.fail(getText("pisell2.amount-summary.amount-cannot-be-zero", "The amount cannot be 0"));
+        return;
+      }
+      const finalAmount = typeof amount === "number" ? amount : Number(amount) || 0;
+      onPaymentComplete({
+        type: "cash",
+        amount: finalAmount,
+        totalAmount: Number(customAmount) || 0,
+        change: finalAmount - (Number(customAmount) || 0),
+        roundingAmount
+      });
+    }
+  };
+  const handleKeyboardConfirm = async (value) => {
+    if (isInputDisabled) {
+      setAmount("0.00");
+      setRoundingAmount(0);
+      return;
+    }
+    ;
+    const finalValue = String(value);
+    console.log("键盘确认:", finalValue);
+    if (Number(finalValue) === 0) {
+      Toast.fail(getText("pisell2.amount-summary.amount-cannot-be-zero", "The amount cannot be 0"));
+      return;
+    }
+    if (finalValue === "" || finalValue === null || finalValue === void 0) {
+      setAmount("");
+    } else {
+      const cleanValue = finalValue.replace(/[$\s]/g, "");
+      const numValue = parseFloat(cleanValue);
+      const balanceDue = parseFloat(balanceDueAmount);
+      const shouldApplyRounding = Math.abs(numValue - balanceDue) < 0.01;
+      let finalAmount = numValue;
+      let roundingDiff = 0;
+      if (shouldApplyRounding && roundingFunction) {
+        const result = await roundingFunction(numValue);
+        const { roundedAmount = numValue, roundingDifference = 0 } = result || {};
+        finalAmount = roundedAmount;
+        roundingDiff = roundingDifference;
+        console.log("应用抹零：", numValue, "->", roundedAmount, "差额:", roundingDifference);
+      } else {
+        console.log("不应用抹零，用户输入金额:", numValue, "剩余支付金额:", balanceDue);
+      }
+      setRoundingAmount(roundingDiff);
+      if (isNaN(numValue)) {
+        setAmount("");
+      } else {
+        setAmount(finalAmount.toString());
+        console.log("设置金额为:", finalAmount);
+      }
+    }
+  };
+  const handleKeyboardCancel = () => {
+    console.log("键盘取消");
+  };
+  const handleKeyboardChange = (value) => {
+    if (isInputDisabled) return;
+    const stringValue = String(value);
+    console.log("键盘输入变化:", stringValue, "类型:", typeof stringValue);
+    setAmount(stringValue);
+  };
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: (0, import_classnames.default)("cash-pay-container", {
+        "cash-pay-container--disabled": disabled
+      })
+    },
+    /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("cash-pay-header") }, /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("cash-pay-header-title") }, getText("cash") || "Cash"), Math.abs(roundingAmount) > 0 && /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("cash-pay-header-rounding") }, getText("rounding") || "Rounding", ":", " ", (0, import_utils.formatAmount)(roundingAmount, 2, amountSymbol))),
+    /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: (0, import_classnames.default)("cash-pay-main-content", {
+          "cash-pay-main-content--disabled": disabled
+        })
+      },
+      /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("cash-pay-payment-area") }, /* @__PURE__ */ import_react.default.createElement(
+        import_pisellPriceKeyboardPopover.default,
+        {
+          value: amount || "0",
+          onConfirm: handleKeyboardConfirm,
+          onCancel: handleKeyboardCancel,
+          showCurrencySymbol: true,
+          useThousandsSeparator: true,
+          selectType: "dark",
+          overlayClassName: "cash-payment-keyboard-popover",
+          disabled: isInputDisabled
+        },
+        /* @__PURE__ */ import_react.default.createElement(
+          "div",
+          {
+            className: (0, import_classnames.default)("cash-pay-amount-input-area", {
+              "cash-pay-amount-input-area--disabled": isInputDisabled
+            })
+          },
+          /* @__PURE__ */ import_react.default.createElement(
+            import_icon.Edit05,
+            {
+              className: (0, import_classnames.default)("cash-pay-amount-edit-icon", {
+                "cash-pay-amount-edit-icon--disabled": isInputDisabled
+              })
+            }
+          ),
+          /* @__PURE__ */ import_react.default.createElement(
+            "div",
+            {
+              className: (0, import_classnames.default)("cash-pay-amount-input-wrapper", {
+                "cash-pay-amount-input-wrapper--disabled": isInputDisabled
+              })
+            },
+            /* @__PURE__ */ import_react.default.createElement(
+              "span",
+              {
+                className: (0, import_classnames.default)("cash-pay-currency-symbol", {
+                  "cash-pay-currency-symbol--disabled": isInputDisabled
+                })
+              },
+              amountSymbol
+            ),
+            /* @__PURE__ */ import_react.default.createElement(
+              "div",
+              {
+                className: (0, import_classnames.default)("cash-pay-amount-display", {
+                  "cash-pay-amount-display--disabled": isInputDisabled
+                })
+              },
+              amount || "0.00"
+            )
+          )
+        )
+      ), /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          className: (0, import_classnames.default)("cash-pay-button", {
+            "cash-pay-button--disabled": isAmountButtonsDisabled
+          }),
+          ...isAmountButtonsDisabled ? {} : { onClick: handleCashPay },
+          style: { cursor: isAmountButtonsDisabled ? "not-allowed" : "pointer" }
+        },
+        /* @__PURE__ */ import_react.default.createElement(
+          "div",
+          {
+            className: (0, import_classnames.default)("cash-pay-button-text", {
+              "cash-pay-button-text--disabled": isAmountButtonsDisabled
+            })
+          },
+          getText("cash.payment") || "Cash Pay"
+        )
+      )),
+      /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("cash-pay-amount-button-grid", {
+        "cash-pay-amount-button-grid--disabled": isAmountButtonsDisabled
+      }) }, amountList.slice(0, 6).map((amount2, index) => /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          key: index,
+          className: (0, import_classnames.default)("cash-pay-amount-button", {
+            "cash-pay-amount-button--disabled": isAmountButtonsDisabled
+          }),
+          ...isAmountButtonsDisabled ? {} : { onClick: () => handleAmountClick(amount2) },
+          style: { cursor: isAmountButtonsDisabled ? "not-allowed" : "pointer" }
+        },
+        /* @__PURE__ */ import_react.default.createElement(
+          "div",
+          {
+            className: (0, import_classnames.default)("cash-pay-amount-button-text", {
+              "cash-pay-amount-button-text--disabled": isAmountButtonsDisabled
+            })
+          },
+          (0, import_utils.formatAmount)(amount2, 2, amountSymbol)
+        )
+      )))
+    )
+  );
+}
+var CashPaymentModule_default = CashPaymentModule;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CashPaymentModule
+});

package/lib/components/checkout/components/CashPaymentModule/index.less

@@ -0,0 +1,320 @@
+/* CashPaymentModule 组件样式 */
+
+/* 主容器 */
+.cash-pay-container {
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  gap: 8px;
+  display: inline-flex;
+  flex-shrink: 0;
+}
+
+/* 标题栏 */
+.cash-pay-header {
+  align-self: stretch;
+  padding-left: 8px;
+  padding-right: 8px;
+  justify-content: space-between;
+  display: inline-flex;
+  width: 100%;
+}
+
+.cash-pay-header-title {
+  text-align: left;
+  justify-content: center;
+  display: flex;
+  flex-direction: column;
+  color: #101828;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px;
+  word-wrap: break-word;
+}
+
+.cash-pay-header-rounding {
+  text-align: right;
+  justify-content: center;
+  display: flex;
+  flex-direction: column;
+  color: #5D3F9F;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  word-wrap: break-word;
+}
+
+/* 主内容区域 */
+.cash-pay-main-content {
+  align-self: stretch;
+  padding: 8px;
+  background: white;
+  border-radius: 8px;
+  outline: 1px #7F56DA solid;
+  outline-offset: -1px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+  display: flex;
+}
+
+/* 金额输入和支付按钮区域 */
+.cash-pay-payment-area {
+  align-self: stretch;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  background: white;
+  overflow: hidden;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+  display: flex;
+}
+
+.cash-pay-amount-input-area {
+  flex: 1;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 8px;
+  display: flex;
+  min-width: 0;
+  overflow: hidden;
+}
+
+/* 编辑图标 */
+.cash-pay-edit-icon {
+  width: 24px;
+  height: 24px;
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+}
+
+.cash-pay-edit-icon-inner {
+  width: 20.12px;
+  height: 20.12px;
+  left: 2px;
+  top: 1.88px;
+  position: absolute;
+  outline: 2px #475467 solid;
+  outline-offset: -1px;
+  border-radius: 2px;
+}
+
+.cash-pay-amount-edit-icon {
+  font-size: 24px;
+  color: #475467;
+}
+
+/* 金额输入包装器 */
+.cash-pay-amount-input-wrapper {
+  display: inline-flex;
+  align-items: baseline;
+  position: relative;
+  cursor: pointer;
+  border-bottom: 1px solid #475467;
+  padding-bottom: 2px;
+  transition: border-color 0.2s ease;
+
+  &:hover {
+    border-bottom-color: #7F56DA;
+  }
+}
+
+/* 货币符号 */
+.cash-pay-currency-symbol {
+  color: #475467;
+  font-size: 20px;
+  font-weight: 400;
+  line-height: 24px;
+  margin-right: 2px;
+}
+
+/* 金额显示 */
+.cash-pay-amount-display {
+  color: #475467;
+  font-size: 20px;
+  font-weight: 400;
+  line-height: 24px;
+  margin-left: 2px;
+  user-select: none;
+  white-space: nowrap;
+}
+
+/* Cash Pay 按钮 */
+.cash-pay-button {
+  height: 48px;
+  padding-left: 20px;
+  padding-right: 20px;
+  padding-top: 12px;
+  padding-bottom: 12px;
+  background: #7F56DA;
+  box-shadow: 0px 1.03px 2.06px rgba(16, 24, 40, 0.05);
+  overflow: hidden;
+  border-radius: 8px;
+  outline: 1px #EEE5FF solid;
+  outline-offset: -1px;
+  justify-content: center;
+  align-items: center;
+  gap: 8.24px;
+  display: flex;
+  cursor: pointer;
+  /* 设置宽度与栅格按钮保持一致 */
+  width: calc((100% - 16px) / 3);
+  white-space: nowrap;
+}
+
+.cash-pay-button-text {
+  color: white;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px;
+  word-wrap: break-word;
+  white-space: nowrap;
+}
+
+/* 金额按钮栅格布局 */
+.cash-pay-amount-button-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 8px;
+  align-self: stretch;
+  width: 100%;
+}
+
+/* 响应式设计：在较小屏幕上改为2列 */
+@media (max-width: 480px) {
+  .cash-pay-amount-button-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+/* 在超小屏幕上改为1列 */
+@media (max-width: 320px) {
+  .cash-pay-amount-button-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* 金额按钮 */
+.cash-pay-amount-button {
+  flex: 1;
+  height: 48px;
+  padding: 16px 20px;
+  background: #EEE5FF;
+  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
+  border-radius: 8px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.cash-pay-amount-button-text {
+  color: #7F56DA;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+  word-wrap: break-word;
+}
+
+/* 键盘模态框样式重置 */
+:global(.keyboard-modal-wrapper .ant-modal) {
+  height: auto !important;
+  min-height: auto !important;
+}
+
+:global(.keyboard-modal-wrapper .ant-modal-content) {
+  padding: 0 !important;
+  background: transparent !important;
+  box-shadow: none !important;
+  border-radius: 0 !important;
+}
+
+:global(.keyboard-modal-wrapper .ant-modal-body) {
+  padding: 0 !important;
+  margin: 0 !important;
+}
+
+/* 更高优先级的Modal内容样式覆盖 */
+:global(.keyboard-modal-wrapper .ant-modal-header) {
+  display: none !important;
+}
+
+/* 更高优先级的Modal内容样式覆盖 */
+:global(.keyboard-modal-wrapper .ant-modal-content) {
+  padding: 0 !important;
+}
+
+/* 数字键盘样式 */
+:global(.pisell-number-keyboard-wrap.pisell-number-keyboard-dark) {
+  padding: 10px !important;
+  border-radius: 10px !important;
+}
+
+/* 禁用状态样式 */
+.cash-pay-container--disabled {
+  pointer-events: none;
+}
+
+.cash-pay-main-content--disabled {
+  background: white;
+  border-radius: 8px;
+  outline: 1px #D0D5DD solid;
+  outline-offset: -1px;
+}
+
+.cash-pay-amount-input-area--disabled {
+  pointer-events: none;
+}
+
+.cash-pay-amount-edit-icon--disabled {
+  color: #475467;
+}
+
+.cash-pay-amount-input-wrapper--disabled {
+  border-bottom-color: #475467;
+  
+  &:hover {
+    border-bottom-color: #475467;
+  }
+}
+
+.cash-pay-currency-symbol--disabled {
+  color: #475467;
+}
+
+.cash-pay-amount-display--disabled {
+  color: #475467;
+}
+
+.cash-pay-button--disabled {
+  background: #D0D5DD;
+  box-shadow: 0px 1.03px 2.06px rgba(16, 24, 40, 0.05);
+  outline: 1px #EEE5FF solid;
+  outline-offset: -1px;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.cash-pay-button-text--disabled {
+  color: white;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px;
+}
+
+.cash-pay-amount-button--disabled {
+  background: #D0D5DD;
+  cursor: not-allowed;
+  pointer-events: none;
+  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
+}
+
+.cash-pay-amount-button-text--disabled {
+  color: white;
+}

package/lib/components/checkout/components/PaymentDetailModal/index.d.ts

@@ -0,0 +1,38 @@
+/// <reference types="react" />
+import './index.less';
+interface SummaryItem {
+    key: string;
+    value: number;
+    label?: string;
+    hidden?: boolean;
+    tax?: any;
+}
+declare type SubTotalKey = 'deposit' | 'total' | 'sub_total' | 'tax' | 'delivery_fee' | 'discount' | 'point_deduction' | 'member_deduction' | 'expect_amount';
+interface PaymentItem {
+    uuid: string;
+    amount: number;
+    code: string;
+    name: string;
+    status: string;
+    voucher_id?: string;
+    [key: string]: any;
+}
+interface PaymentDetailModalProps {
+    amountSymbol?: string;
+    orderInfo?: any;
+    onClose: () => void;
+    summaryData?: SummaryItem[];
+    labelMaps?: Record<SubTotalKey, string>;
+    paymentItems?: PaymentItem[];
+    customAmount?: string;
+    voidPayment?: (paymentItem: PaymentItem) => void;
+    cartData?: any;
+    walletPassData?: {
+        selectedWallet?: any[];
+        availableDiscountList?: any[];
+        selectedDiscountList?: number[];
+    };
+    clientInfo?: any;
+}
+declare function PaymentDetailModal({ amountSymbol, orderInfo, cartData, onClose, summaryData, labelMaps, paymentItems, customAmount, voidPayment, walletPassData, clientInfo, }: PaymentDetailModalProps): JSX.Element;
+export default PaymentDetailModal;