@pisell/private-materials 6.3.15 → 6.4.2

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

@@ -0,0 +1,247 @@
+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/PaymentOptionsModule/index.tsx
+var PaymentOptionsModule_exports = {};
+__export(PaymentOptionsModule_exports, {
+  default: () => PaymentOptionsModule_default
+});
+module.exports = __toCommonJS(PaymentOptionsModule_exports);
+var import_ScrollableList = __toESM(require("../ScrollableList/index"));
+var import_react = __toESM(require("react"));
+var import_classnames = __toESM(require("classnames"));
+var import_index = require("./index.less");
+var import_utils = require("@pisell/utils");
+var import_materials = require("@pisell/materials");
+var import_ahooks = require("ahooks");
+var import_useEngineContext = __toESM(require("../../../../hooks/useEngineContext"));
+var import_locales = __toESM(require("../../locales"));
+var SHOW_METHODS_CODE = [
+  "EFTPOS_LINKLY",
+  "EFTPOS",
+  "EFTPOS_TYRO",
+  "EFTPOS_WINDCAVE",
+  "EFTPOS_PAYO"
+];
+function PaymentOptionsModule({
+  amountSymbol,
+  orderInfo,
+  onClick,
+  paymentMethods = [],
+  customAmount,
+  title,
+  disabled = false
+}) {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  const context = (0, import_useEngineContext.default)();
+  import_utils.locales.init(
+    import_locales.default,
+    ((_f = (_e = (_d = (_c = (_b = (_a = context.appHelper) == null ? void 0 : _a.utils) == null ? void 0 : _b.getApp) == null ? void 0 : _c.call(_b)) == null ? void 0 : _d.locales) == null ? void 0 : _e.getLocale) == null ? void 0 : _f.call(_e)) || ((_h = (_g = context.appHelper.utils) == null ? void 0 : _g.storage) == null ? void 0 : _h.get("umi_locale")) || "en"
+  );
+  const getText = (key, fallback) => {
+    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i;
+    const currentLang = ((_f2 = (_e2 = (_d2 = (_c2 = (_b2 = (_a2 = context.appHelper) == null ? void 0 : _a2.utils) == null ? void 0 : _b2.getApp) == null ? void 0 : _c2.call(_b2)) == null ? void 0 : _d2.locales) == null ? void 0 : _e2.getLocale) == null ? void 0 : _f2.call(_e2)) || ((_h2 = (_g2 = context.appHelper.utils) == null ? void 0 : _g2.storage) == null ? void 0 : _h2.get("umi_locale")) || "en";
+    const checkoutText = (_i = import_locales.default[currentLang]) == null ? void 0 : _i[key];
+    if (checkoutText) {
+      return checkoutText;
+    }
+    return import_utils.locales.getText(key) || fallback;
+  };
+  const displayTitle = typeof title === "string" ? title : title ? String(title) : getText("cards.and.digitals", "Cards & Digitals");
+  const filteredPaymentMethods = paymentMethods.filter(
+    (item) => !(item.type === "app" && item.code === "EFTPOS_LINKLY") && (["custom"].includes(item.type) || SHOW_METHODS_CODE.includes(item.code))
+  );
+  const calculateSurcharge = (method) => {
+    if (!(method == null ? void 0 : method.is_surcharge)) return 0;
+    const baseAmount = Number(customAmount) || 0;
+    if (Number(method.percentage)) {
+      return baseAmount * Number(method.percentage) + Number(method.fixed || 0);
+    }
+    return Number(method.fixed || 0);
+  };
+  const calculateTotalAmount = (method) => {
+    const baseAmount = Number(customAmount) || 0;
+    const surcharge = calculateSurcharge(method);
+    return baseAmount + surcharge;
+  };
+  const { run: handlePaymentClick } = (0, import_ahooks.useDebounceFn)(
+    (method) => {
+      if (disabled) {
+        return;
+      }
+      if (typeof onClick === "function") {
+        onClick({
+          ...method,
+          surcharge: String((0, import_utils.formatAmount)(calculateSurcharge(method), 2, amountSymbol))
+        });
+      }
+    },
+    {
+      wait: 500
+      // 500ms 防抖延迟
+    }
+  );
+  const renderPaymentIcon = (method) => {
+    if (method.code === "EFTPOS") {
+      return /* @__PURE__ */ import_react.default.createElement(import_materials.Iconfont, { type: "pisell2-credit-card-02", style: { fontSize: "36px", color: "#7F56DA" } });
+    }
+    switch (String(method.type)) {
+      case "credit-card":
+      case "eftpos":
+        return /* @__PURE__ */ import_react.default.createElement(import_materials.Iconfont, { type: "pisell2-credit-card-02", style: { fontSize: "36px", color: "#7F56DA" } });
+      default:
+        return /* @__PURE__ */ import_react.default.createElement(import_materials.Iconfont, { type: "pisell2-a-wallet-021", style: { fontSize: "36px", color: "#7F56DA" } });
+    }
+  };
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: (0, import_classnames.default)("payment-options-module", {
+        "payment-options-module-disabled": disabled
+      })
+    },
+    /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("payment-options-module-title") }, /* @__PURE__ */ import_react.default.createElement("span", null, displayTitle)),
+    /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("payment-options-module-list-container") }, /* @__PURE__ */ import_react.default.createElement(
+      import_ScrollableList.default,
+      {
+        height: "100%",
+        maxHeight: 400,
+        gradientColor: "rgba(139, 92, 246, 0.1)",
+        gradientHeight: 50,
+        columnCount: 1,
+        rowGap: 7,
+        containerStyle: {
+          width: "100%",
+          flex: 1,
+          // 使用flex来占用剩余空间
+          minHeight: 0,
+          // 允许缩小
+          position: "relative"
+          // 确保定位上下文
+        }
+      },
+      filteredPaymentMethods.map((method) => /* @__PURE__ */ import_react.default.createElement(
+        "button",
+        {
+          key: method.id,
+          onClick: (e) => {
+            e.preventDefault();
+            handlePaymentClick(method);
+          },
+          className: (0, import_classnames.default)(
+            "payment-options-module-payment-method-item",
+            {
+              "payment-options-module-pointer": !disabled,
+              "payment-options-module-disabled": disabled
+            }
+          ),
+          type: "button",
+          disabled
+        },
+        /* @__PURE__ */ import_react.default.createElement(
+          "div",
+          {
+            className: (0, import_classnames.default)(
+              "payment-options-module-payment-method-left"
+            )
+          },
+          /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("payment-options-module-icon-container") }, renderPaymentIcon(method)),
+          /* @__PURE__ */ import_react.default.createElement(
+            "div",
+            {
+              className: (0, import_classnames.default)("payment-options-module-payment-info")
+            },
+            /* @__PURE__ */ import_react.default.createElement(
+              "div",
+              {
+                className: (0, import_classnames.default)(
+                  "payment-options-module-payment-info-inner"
+                )
+              },
+              /* @__PURE__ */ import_react.default.createElement(
+                "div",
+                {
+                  className: (0, import_classnames.default)(
+                    "payment-options-module-payment-name"
+                  )
+                },
+                method.name
+              ),
+              !!(method == null ? void 0 : method.is_surcharge) && calculateSurcharge(method) !== 0 && /* @__PURE__ */ import_react.default.createElement(
+                "div",
+                {
+                  className: (0, import_classnames.default)(
+                    "payment-options-module-surcharge-text"
+                  )
+                },
+                getText("pisell2.payment-options.surcharge-label", "Surcharge"),
+                ":",
+                (0, import_utils.formatAmount)(
+                  calculateSurcharge(method),
+                  2,
+                  amountSymbol
+                )
+              )
+            )
+          )
+        ),
+        /* @__PURE__ */ import_react.default.createElement(
+          "div",
+          {
+            className: (0, import_classnames.default)(
+              "payment-options-module-payment-method-right"
+            )
+          },
+          /* @__PURE__ */ import_react.default.createElement(
+            "div",
+            {
+              className: (0, import_classnames.default)(
+                "payment-options-module-amount",
+                "payment-options-module-theme-color"
+              )
+            },
+            (0, import_utils.formatAmount)(calculateTotalAmount(method), 2, amountSymbol)
+          ),
+          /* @__PURE__ */ import_react.default.createElement(
+            "div",
+            {
+              className: (0, import_classnames.default)(
+                "payment-options-module-selection-button",
+                {
+                  "payment-options-module-selection-button-disabled": disabled
+                }
+              )
+            },
+            /* @__PURE__ */ import_react.default.createElement(import_materials.Iconfont, { type: "pisell2-a-arrow-circle-right2", style: { fontSize: "30px", color: "#7F56DA" } })
+          )
+        )
+      ))
+    ))
+  );
+}
+var PaymentOptionsModule_default = PaymentOptionsModule;

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

@@ -0,0 +1,255 @@
+/* PaymentOptionsModule 样式 */
+.payment-options-module {
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  --theme-color: #7f56da;
+}
+
+.payment-options-module-title {
+  color: #101828;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  flex-shrink: 0;
+}
+
+
+.payment-options-module-list-container {
+  flex: 1;
+  width: 100%;
+  min-height: 0;
+  overflow: hidden; /* 确保不会溢出 */
+  display: flex;
+  flex-direction: column;
+}
+
+
+/* 支付方式项样式 */
+.payment-options-module-payment-method-item {
+  width: 100%;
+  height: 72px;
+  padding: 14px;
+  background: white;
+  border-radius: 16px;
+  border: 1px var(--theme-color, #7f56da) solid;
+  cursor: pointer;
+  justify-content: space-between;
+  align-items: center;
+  display: flex;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+
+.payment-options-module-payment-method-left {
+  justify-content: flex-start;
+  align-items: center;
+  gap: 8px;
+  display: flex;
+}
+
+
+.payment-options-module-payment-info {
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  gap: 8px;
+  display: flex;
+  height: 100%;
+}
+
+
+.payment-options-module-payment-info-inner {
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-start;
+  display: flex;
+}
+
+
+.payment-options-module-payment-name {
+  color: #101828;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 17.96px;
+}
+
+
+.payment-options-module-surcharge-text {
+  color: #667085;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 18px;
+}
+
+
+.payment-options-module-payment-method-right {
+  justify-content: flex-end;
+  align-items: center;
+  gap: 8px;
+  display: flex;
+}
+
+
+.payment-options-module-amount {
+  text-align: right;
+  color: var(--theme-color, #7f56da);
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 28px;
+}
+
+/* 选择按钮样式 */
+.payment-options-module-selection-button {
+  width: 36px;
+  height: 37px;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 8px;
+  display: flex;
+}
+
+/* 选择按钮禁用状态样式 */
+.payment-options-module-selection-button-disabled {
+  color: #D0D5DD;
+  
+  .iconfont {
+    color: #D0D5DD !important;
+  }
+}
+
+.payment-options-module-selection-circle {
+  width: 36px;
+  height: 36px;
+  position: relative;
+}
+
+.payment-options-module-selection-circle::before {
+  content: '';
+  width: 30px;
+  height: 30px;
+  position: absolute;
+  left: 3px;
+  top: 3px;
+  background: var(--theme-color, #7f56da);
+  border: 1.72px white solid;
+  border-radius: 50%;
+}
+
+
+.payment-options-module-credit-card-body {
+  width: 20px;
+  height: 16px;
+  background: #2e90fa;
+  border-radius: 2px;
+  position: relative;
+}
+
+
+.payment-options-module-credit-card-stripe {
+  width: 20px;
+  height: 2px;
+  background: black;
+  position: absolute;
+  top: 2px;
+  left: 0;
+}
+
+
+.payment-options-module-credit-card-chip {
+  width: 8px;
+  height: 2px;
+  background: white;
+  border-radius: 2px;
+  position: absolute;
+  bottom: 2px;
+  left: 1px;
+}
+
+
+.payment-options-module-credit-card-circle {
+  width: 12px;
+  height: 12px;
+  background: #47cd89;
+  border-radius: 50%;
+  position: absolute;
+  bottom: -6px;
+  right: -6px;
+}
+
+
+.payment-options-module-credit-card-circle-inner {
+  width: 6px;
+  height: 6px;
+  background: white;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+
+/* PaymentIcon 样式 */
+.payment-options-module-icon-container {
+  width: 40px;
+  img {
+    width: 100%;
+  }
+}
+
+
+/* 通用样式类 */
+.payment-options-module-theme-color {
+  color: var(--theme-color, #7f56da);
+}
+
+
+.payment-options-module-error-color {
+  color: var(--Error-500, #f04438);
+}
+
+
+.payment-options-module-pointer {
+  cursor: pointer;
+}
+
+/* Disabled state styles */
+.payment-options-module-disabled {
+  cursor: unset !important;
+  pointer-events: unset !important;
+
+  .payment-options-module-payment-method-item {
+    background: white;
+    border: 1px #D0D5DD solid;
+    cursor: unset !important;
+    pointer-events: unset !important;
+
+    .payment-options-module-payment-name {
+      color: #D0D5DD;
+    }
+
+    .payment-options-module-surcharge-text {
+      color: #D0D5DD;
+    }
+
+    .payment-options-module-amount {
+      color: #D0D5DD;
+    }
+
+    .payment-options-module-selection-circle::before {
+      background: #D0D5DD;
+      border: 2px white solid;
+    }
+  }
+
+  .payment-options-module-title {
+    color: #101828;
+    /* 标题保持正常颜色 */
+  }
+}

package/lib/components/checkout/components/PaymentResultToast/PaymentResultToastProvider.d.ts

@@ -0,0 +1,48 @@
+import React from 'react';
+import { StatusClassName, ActionButtonGroupList } from './types';
+interface ShowPaymentResultToastConfig {
+    /** 状态样式类名 */
+    statusClassName: StatusClassName;
+    /** 标题 */
+    title: string;
+    /** 副标题 */
+    subtitle?: React.ReactNode;
+    /** 找零文本 */
+    changeDueText?: string;
+    /** 操作按钮 */
+    actionButtons?: ActionButtonGroupList;
+    /** 自动关闭配置 */
+    autoClose?: boolean;
+    /** 自动关闭延迟时间（秒） */
+    autoCloseDelay?: number;
+    /** 是否显示倒计时进度 */
+    showCountdownProgress?: boolean;
+    /** 倒计时完成回调 */
+    onCountdownComplete?: () => void;
+    /** 自定义关闭回调 */
+    onClose?: () => void;
+}
+interface PaymentResultToastContextType {
+    /** 显示成功弹窗 */
+    showSuccess: (config: Omit<ShowPaymentResultToastConfig, 'statusClassName'>) => void;
+    /** 显示失败弹窗 */
+    showFailed: (config: Omit<ShowPaymentResultToastConfig, 'statusClassName'>) => void;
+    /** 显示钱包通行证失败弹窗 */
+    showWalletPassFailed: (config: Omit<ShowPaymentResultToastConfig, 'statusClassName'>) => void;
+    /** 显示自定义状态弹窗 */
+    showToast: (config: ShowPaymentResultToastConfig) => void;
+    /** 关闭弹窗 */
+    closeToast: () => void;
+    /** 是否正在显示弹窗 */
+    isVisible: boolean;
+}
+export declare const PaymentResultToastProvider: React.FC<{
+    children: React.ReactNode;
+}>;
+export declare const usePaymentResultToast: () => PaymentResultToastContextType;
+export declare const showPaymentResultToastSuccess: (config: Omit<ShowPaymentResultToastConfig, 'statusClassName'>) => void;
+export declare const showPaymentResultToastFailed: (config: Omit<ShowPaymentResultToastConfig, 'statusClassName'>) => void;
+export declare const showPaymentResultToastWalletPassFailed: (config: Omit<ShowPaymentResultToastConfig, 'statusClassName'>) => void;
+export declare const showPaymentResultToast: (config: ShowPaymentResultToastConfig) => void;
+export declare const closePaymentResultToast: () => void;
+export type { ShowPaymentResultToastConfig, PaymentResultToastContextType };