@pisell/private-materials 6.3.15 → 6.4.1

package/lib/components/checkout/PaymentPlugin.d.ts

@@ -0,0 +1,2 @@
+declare const PaymentPlugin: () => JSX.Element;
+export default PaymentPlugin;

package/lib/components/checkout/PaymentPlugin.js

@@ -0,0 +1,181 @@
+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/PaymentPlugin.tsx
+var PaymentPlugin_exports = {};
+__export(PaymentPlugin_exports, {
+  default: () => PaymentPlugin_default
+});
+module.exports = __toCommonJS(PaymentPlugin_exports);
+var import_react = require("react");
+var import_antd = require("antd");
+var import_icons = require("@ant-design/icons");
+var import_useModal = __toESM(require("../../hooks/useModal"));
+var import_content = __toESM(require("./content"));
+var import_utils = require("@pisell/utils");
+var import_locales = __toESM(require("./locales"));
+var import_useEngineContext = __toESM(require("../../hooks/useEngineContext"));
+var import_react2 = __toESM(require("react"));
+var modalStyle = document.createElement("style");
+modalStyle.textContent = `
+  :where(.payment-modal-wrapper) .ant-modal .ant-modal-content,
+  .payment-modal-wrapper .ant-modal .ant-modal-content,
+  .payment-modal-wrapper .ant-modal-content {
+    padding: 12px 36px 36px 36px !important;
+  }
+`;
+if (!document.querySelector(".payment-modal-style")) {
+  modalStyle.className = "payment-modal-style";
+  document.head.appendChild(modalStyle);
+}
+var PaymentPlugin = () => {
+  var _a;
+  const context = (0, import_useEngineContext.default)();
+  const { pisellos } = (_a = context.appHelper) == null ? void 0 : _a.utils;
+  const paymentRef = (0, import_react.useRef)();
+  const callback = (0, import_react.useRef)();
+  const [totalAmount, setTotalAmount] = (0, import_react.useState)(0);
+  const translation = (key, fallback) => {
+    var _a2;
+    const currentLang = import_utils.locales.locale || "en";
+    const checkoutText = (_a2 = import_locales.default[currentLang]) == null ? void 0 : _a2[key];
+    if (checkoutText) {
+      return checkoutText;
+    }
+    return import_utils.locales.getText(key) || fallback;
+  };
+  const handlePaymentComplete = (result) => {
+    var _a2;
+    console.log("Payment completed:", result);
+    (_a2 = callback.current) == null ? void 0 : _a2.call(callback, result);
+    hideModal();
+  };
+  const handlePaymentCancel = () => {
+    var _a2;
+    console.log("Payment cancelled");
+    hideModal();
+    (_a2 = callback.current) == null ? void 0 : _a2.call(callback, { status: "cancelled" });
+  };
+  const CustomHeader = () => /* @__PURE__ */ import_react2.default.createElement("div", { style: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: "16px 0",
+    marginBottom: "16px",
+    borderBottom: "1px solid #f0f0f0",
+    backgroundColor: "#fafafa",
+    margin: "-12px -36px 16px -36px",
+    // 扩展到modal边缘
+    paddingLeft: "36px",
+    paddingRight: "36px"
+  } }, /* @__PURE__ */ import_react2.default.createElement("div", { style: {
+    display: "flex",
+    alignItems: "center",
+    gap: "12px"
+  } }, "硬件状态"), /* @__PURE__ */ import_react2.default.createElement("div", null, translation("order.total"), "：", totalAmount), /* @__PURE__ */ import_react2.default.createElement("div", { style: {
+    display: "flex",
+    alignItems: "center",
+    gap: "8px"
+  } }, /* @__PURE__ */ import_react2.default.createElement(
+    import_antd.Button,
+    {
+      type: "text",
+      size: "small",
+      icon: /* @__PURE__ */ import_react2.default.createElement(import_icons.CloseOutlined, null),
+      onClick: handlePaymentCancel,
+      style: {
+        color: "#8c8c8c",
+        border: "none",
+        boxShadow: "none"
+      }
+    }
+  )));
+  const { showModal, hideModal, content } = (0, import_useModal.default)({
+    title: null,
+    // 移除默认标题，使用自定义头部
+    children: /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, /* @__PURE__ */ import_react2.default.createElement(CustomHeader, null), /* @__PURE__ */ import_react2.default.createElement(
+      import_content.default,
+      {
+        paymentData: paymentRef.current,
+        moduleConfig: {
+          showWalletPass: true,
+          showCashPayment: true,
+          showAdditionalModule: true,
+          showPaymentOptions: true
+        },
+        onPaymentComplete: handlePaymentComplete,
+        onPaymentCancel: handlePaymentCancel,
+        onStatusChange: (status) => console.log("Status changed:", status),
+        open_deposit: true
+      }
+    )),
+    width: 880,
+    // 808px 内容宽度 + 36px 左右内边距
+    destroyOnClose: true,
+    maskClosable: false,
+    footer: null,
+    // 移除默认的确定/取消按钮，让组件内部处理
+    closeIcon: null,
+    // 移除默认关闭图标，使用自定义的
+    onCancel: handlePaymentCancel,
+    wrapClassName: "payment-modal-wrapper"
+  });
+  const onOpen = async (props) => {
+    var _a2, _b, _c;
+    const checkout = pisellos.getModule("checkout");
+    if (checkout) {
+      await checkout.createLocalOrderAsync({
+        orderData: (_a2 = props.data) == null ? void 0 : _a2.order_info,
+        cartSummary: (_c = (_b = props.data) == null ? void 0 : _b.subtotal_info) == null ? void 0 : _c.subTotalList,
+        autoPayment: true
+      });
+      const orderInfo = checkout.getCurrentOrderInfo();
+      if (orderInfo && orderInfo.totalAmount) {
+        setTotalAmount(orderInfo.totalAmount);
+      }
+    }
+    paymentRef.current = props == null ? void 0 : props.data;
+    callback.current = props == null ? void 0 : props.callback;
+    showModal();
+  };
+  const onClose = () => {
+    hideModal();
+  };
+  const init = () => {
+    const state = {
+      open: onOpen,
+      close: onClose
+    };
+    console.log("PaymentPlugin", state);
+  };
+  (0, import_react.useEffect)(() => {
+    init();
+  }, []);
+  return /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, content);
+};
+var PaymentPlugin_default = PaymentPlugin;

package/lib/components/checkout/PaymentProvider.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { PaymentModalProps } from './PaymentModal';
+interface PaymentContextType {
+    openPaymentModal: (props: PaymentModalProps) => void;
+    closePaymentModal: () => void;
+}
+export declare const PaymentProvider: React.FC<{
+    children: React.ReactNode;
+}>;
+export declare const usePaymentModal: () => PaymentContextType;
+export declare const openPaymentModal: (props: PaymentModalProps) => void;
+export declare const closePaymentModal: () => void;
+export {};

package/lib/components/checkout/PaymentProvider.js

@@ -0,0 +1,95 @@
+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/PaymentProvider.tsx
+var PaymentProvider_exports = {};
+__export(PaymentProvider_exports, {
+  PaymentProvider: () => PaymentProvider,
+  closePaymentModal: () => closePaymentModal,
+  openPaymentModal: () => openPaymentModal,
+  usePaymentModal: () => usePaymentModal
+});
+module.exports = __toCommonJS(PaymentProvider_exports);
+var import_react = __toESM(require("react"));
+var import_PaymentModal = __toESM(require("./PaymentModal"));
+var PaymentContext = (0, import_react.createContext)(null);
+var globalPaymentContext = null;
+var PaymentProvider = ({ children }) => {
+  const [modalProps, setModalProps] = (0, import_react.useState)(null);
+  const openPaymentModal2 = (0, import_react.useCallback)((props) => {
+    setModalProps(props);
+  }, []);
+  const closePaymentModal2 = (0, import_react.useCallback)(() => {
+    setModalProps(null);
+  }, []);
+  const contextValue = {
+    openPaymentModal: openPaymentModal2,
+    closePaymentModal: closePaymentModal2
+  };
+  (0, import_react.useEffect)(() => {
+    globalPaymentContext = contextValue;
+    return () => {
+      globalPaymentContext = null;
+    };
+  }, [contextValue]);
+  return /* @__PURE__ */ import_react.default.createElement(PaymentContext.Provider, { value: contextValue }, children, modalProps && /* @__PURE__ */ import_react.default.createElement(
+    import_PaymentModal.default,
+    {
+      ...modalProps,
+      onClose: closePaymentModal2
+    }
+  ));
+};
+var usePaymentModal = () => {
+  const context = (0, import_react.useContext)(PaymentContext);
+  if (!context) {
+    throw new Error("usePaymentModal must be used within a PaymentProvider");
+  }
+  return context;
+};
+var openPaymentModal = (props) => {
+  if (globalPaymentContext) {
+    globalPaymentContext.openPaymentModal(props);
+  } else {
+    console.error("PaymentProvider not found. Please wrap your app with PaymentProvider.");
+  }
+};
+var closePaymentModal = () => {
+  if (globalPaymentContext) {
+    globalPaymentContext.closePaymentModal();
+  } else {
+    console.error("PaymentProvider not found.");
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PaymentProvider,
+  closePaymentModal,
+  openPaymentModal,
+  usePaymentModal
+});

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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import './index.less';
+import { CurrentOrderInfo } from "../../types";
+interface AdditionalModuleProps {
+    orderInfo?: CurrentOrderInfo;
+    customAmount?: string;
+    handleButtonClick: (key: string) => void;
+    hasOrderNote?: boolean;
+    disabled?: boolean;
+    showCashPayment?: boolean;
+}
+declare function AdditionalModule({ orderInfo, customAmount, handleButtonClick, hasOrderNote, disabled, showCashPayment, }: AdditionalModuleProps): JSX.Element;
+export default AdditionalModule;

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

@@ -0,0 +1,209 @@
+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/AdditionalModule/index.tsx
+var AdditionalModule_exports = {};
+__export(AdditionalModule_exports, {
+  default: () => AdditionalModule_default
+});
+module.exports = __toCommonJS(AdditionalModule_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_icons = require("@ant-design/icons");
+var import_icon = require("@pisell/icon");
+var import_utils = require("@pisell/utils");
+var import_materials = require("@pisell/materials");
+var import_index = require("./index.less");
+var import_locales = require("../../../../utils/locales");
+var import_locales2 = __toESM(require("./locales"));
+var import_useToast = __toESM(require("../../../../hooks/useToast"));
+function AdditionalModule({
+  orderInfo,
+  customAmount,
+  handleButtonClick,
+  hasOrderNote = false,
+  disabled = false,
+  showCashPayment = false
+}) {
+  import_utils.locales.init(import_locales2.default, (0, import_locales.getLocale)());
+  const moreMenuItems = [
+    {
+      key: "manual-discount",
+      label: import_utils.locales.getText("pisell2.text.manual-order-discount"),
+      icon: /* @__PURE__ */ import_react.default.createElement(import_icon.Calculator, null)
+    },
+    {
+      key: "send-link",
+      label: import_utils.locales.getText("pisell2.text.send-link"),
+      icon: /* @__PURE__ */ import_react.default.createElement(import_icons.LinkOutlined, null)
+    }
+  ];
+  const Toast = (0, import_useToast.default)();
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "additional-module" }, showCashPayment && /* @__PURE__ */ import_react.default.createElement("div", { className: "additional-module-title" }, import_utils.locales.getText("pisell2.text.others")), /* @__PURE__ */ import_react.default.createElement("div", { className: "additional-module-buttons-container" }, showCashPayment ? (
+    // Grid布局模式：两行布局（显示现金支付模块时）
+    /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("div", { className: "additional-module-button-row" }, /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Button,
+      {
+        className: `additional-module-button-base purple-theme ${hasOrderNote ? "note-button" : ""}`,
+        onClick: () => {
+          handleButtonClick("order-note");
+        }
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_icons.FileTextOutlined, { className: "additional-module-button-icon" }),
+      import_utils.locales.getText("pisell2.text.order-note"),
+      hasOrderNote && /* @__PURE__ */ import_react.default.createElement("span", { className: "note-indicator" }, /* @__PURE__ */ import_react.default.createElement(import_materials.Iconfont, { type: "pisell2-info-circle2" }))
+    ), /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Button,
+      {
+        className: "additional-module-button-base purple-theme",
+        onClick: () => {
+          handleButtonClick("print-receipt");
+        }
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_icons.PrinterOutlined, { className: "additional-module-button-icon" }),
+      import_utils.locales.getText("pisell2.text.print-receipt")
+    )), /* @__PURE__ */ import_react.default.createElement("div", { className: "additional-module-button-row" }, /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Button,
+      {
+        className: `additional-module-button-base ${disabled ? "disabled-theme" : "orange-theme"}`,
+        onClick: () => {
+          handleButtonClick("save-pay-later");
+        },
+        disabled
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_icons.ClockCircleOutlined, { className: "additional-module-button-icon" }),
+      import_utils.locales.getText("pisell2.text.save-pay-later")
+    ), /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Dropdown,
+      {
+        menu: {
+          items: moreMenuItems,
+          onClick: ({ key }) => {
+            console.log("Menu item clicked:", key);
+            if (key === "send-link") {
+              if (!disabled) {
+                handleButtonClick("send-link");
+              } else {
+                Toast.fail(import_utils.locales.getText("pisell2.text.order-no-payment-cannot-send-link"));
+              }
+            }
+            if (key === "manual-discount") {
+              handleButtonClick("manual-discount");
+            }
+          }
+        },
+        trigger: ["click"],
+        placement: "bottomLeft",
+        overlayStyle: { zIndex: 9999 },
+        mouseEnterDelay: 0.1,
+        mouseLeaveDelay: 0.1,
+        onOpenChange: (open) => {
+          console.log("Dropdown state changed:", open);
+        }
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        import_antd.Button,
+        {
+          className: "additional-module-button-base more-button"
+        },
+        /* @__PURE__ */ import_react.default.createElement(import_icons.MoreOutlined, { className: "additional-module-button-icon" })
+      )
+    )))
+  ) : (
+    // Flex布局模式：一行布局（不显示现金支付模块时）
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "additional-module-button-row" }, /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Button,
+      {
+        className: `additional-module-button-base purple-theme ${hasOrderNote ? "note-button" : ""}`,
+        onClick: () => {
+          handleButtonClick("order-note");
+        }
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_icons.FileTextOutlined, { className: "additional-module-button-icon" }),
+      import_utils.locales.getText("pisell2.text.order-note"),
+      hasOrderNote && /* @__PURE__ */ import_react.default.createElement("span", { className: "note-indicator" }, /* @__PURE__ */ import_react.default.createElement(import_materials.Iconfont, { type: "pisell2-info-circle2" }))
+    ), /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Button,
+      {
+        className: "additional-module-button-base purple-theme",
+        onClick: () => {
+          handleButtonClick("print-receipt");
+        }
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_icons.PrinterOutlined, { className: "additional-module-button-icon" }),
+      import_utils.locales.getText("pisell2.text.print-receipt")
+    ), /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Button,
+      {
+        className: `additional-module-button-base ${disabled ? "disabled-theme" : "orange-theme"}`,
+        onClick: () => {
+          handleButtonClick("save-pay-later");
+        },
+        disabled
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_icons.ClockCircleOutlined, { className: "additional-module-button-icon" }),
+      import_utils.locales.getText("pisell2.text.save-pay-later")
+    ), /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Dropdown,
+      {
+        menu: {
+          items: moreMenuItems,
+          onClick: ({ key }) => {
+            console.log("Menu item clicked:", key);
+            if (key === "send-link") {
+              if (!disabled) {
+                handleButtonClick("send-link");
+              } else {
+                Toast.fail(import_utils.locales.getText("pisell2.text.order-no-payment-cannot-send-link"));
+              }
+            }
+            if (key === "manual-discount") {
+              handleButtonClick("manual-discount");
+            }
+          }
+        },
+        trigger: ["click"],
+        placement: "bottomLeft",
+        overlayStyle: { zIndex: 9999 },
+        mouseEnterDelay: 0.1,
+        mouseLeaveDelay: 0.1,
+        onOpenChange: (open) => {
+          console.log("Dropdown state changed:", open);
+        }
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        import_antd.Button,
+        {
+          className: "additional-module-button-base more-button"
+        },
+        /* @__PURE__ */ import_react.default.createElement(import_icons.MoreOutlined, { className: "additional-module-button-icon" })
+      )
+    ))
+  )));
+}
+var AdditionalModule_default = AdditionalModule;