@pisell/private-materials 6.3.14 → 6.4.1

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

@@ -0,0 +1,343 @@
+@primary-color: rgba(16, 24, 40, 0.90); // 与图片一致的深蓝灰背景
+@success-color: #47CD89; // 与图片一致的成功文字颜色
+@progress-color: #079455; // 与图片一致的进度条颜色
+@warning-color: #F79009; // 与图片一致的找零金额颜色
+@error-color: #F97066; // 失败状态的红色
+@paid-color: #47CD89; // 已支付金额的绿色（与成功颜色一致）
+@text-color-inverse: #ffffff;
+@border-radius-base: 10px; // 与图片一致的圆角
+
+
+
+.payment-result-toast {
+  width: 680px !important;
+
+  .pisell-lowcode-space-item {
+    .pisell-lowcode-dropdown-trigger {
+      width: 44px !important;
+      height: 44px !important;
+      box-sizing: content-box !important;
+      .payment-result-toast-action-icon {
+        font-size: 44px;
+      }
+    }
+  }
+
+  .pisell-lowcode-modal-content {
+    background: @primary-color !important;
+    border-radius: @border-radius-base !important;
+    padding: 0 !important;
+    overflow: hidden !important;
+    width: 680px !important;
+
+    .pisell-lowcode-modal-header {
+      display: none !important;
+    }
+
+    .pisell-lowcode-dropdown-trigger {
+      flex: 0 0 auto !important; // 更多按钮保持固定宽度，不跟随等比例分配
+      width: 60px !important; // 明确设置更多按钮的固定宽度
+      border: 1px solid @text-color-inverse !important;
+      background: transparent !important;
+      color: @text-color-inverse !important;
+      border-radius: @border-radius-base !important;
+      font-size: 20px !important;
+      font-weight: 600 !important;
+      display: flex !important;
+      align-items: center !important;
+      justify-content: center !important;
+      gap: 8px !important;
+      cursor: pointer !important;
+      transition: all 0.3s ease !important;
+      padding: 8px !important;
+      white-space: nowrap !important; // 防止文字换行
+      height: 44px !important; // 与其他按钮保持一致的高度
+
+      .anticon-more {
+        font-size: 44px;
+      }
+    }
+  }
+
+  .pisell-lowcode-modal-body {
+    padding: 0;
+    background: @primary-color;
+  }
+
+  &-content {
+    padding: 48px 32px 32px;
+    text-align: center;
+    min-height: 300px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    position: relative;
+
+    .pisell-lowcode-flex-vertical {
+      margin-bottom: 0 !important;
+    }
+  }
+
+  // 成功状态标题
+  &-success-title {
+    color: @success-color;
+    font-size: 20px; // 与图片一致
+    font-weight: 600;
+    line-height: 30px; // 与图片一致
+    margin: 0;
+  }
+
+  // 失败状态标题
+  &-failed-title {
+    color: @error-color;
+    font-size: 20px;
+    font-weight: 600;
+    line-height: 30px;
+    margin: 0;
+  }
+
+  // Wallet Pass失败状态标题
+  &-wallet-pass-failed-title {
+    color: @error-color;
+    font-size: 20px;
+    font-weight: 600;
+    line-height: 30px;
+    margin: 0;
+  }
+
+  // 副标题样式
+  &-subtitle {
+    &-text {
+      font-size: 36px; // 与图片一致
+      font-weight: 600; // 与图片一致
+      line-height: 44px; // 与图片一致
+      margin: 16px 0 0;
+      text-shadow: none; // 移除阴影
+
+      // 已支付金额样式 (成功-无找零)
+      &.paid {
+        color: @paid-color;
+      }
+
+      // 找零金额样式 (成功-有找零)
+      &.change-due {
+        color: @warning-color;
+      }
+
+      // 欠款金额样式 (失败状态)
+      &.amount-due {
+        color: @error-color;
+      }
+
+      // 部分支付金额样式
+      &.partially-paid {
+        color: @warning-color;
+      }
+    }
+  }
+
+  &-countdown {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+
+    &-text {
+      display: none; // 图片中没有显示倒计时文字
+    }
+
+    &-progress {
+      width: 100%;
+      height: 8px;
+      background: transparent;
+      position: relative;
+      border-radius: 0; // 确保无圆角
+      overflow: hidden;
+
+      &-bar {
+        height: 100%;
+        background: @progress-color; // 使用与图片一致的深绿色
+        position: relative;
+        border-radius: 0; // 确保无圆角
+        width: 100%; // 初始宽度为100%
+        transform-origin: left center; // 设置变换原点为左边
+
+        // CSS 动画：从100%宽度缩减到0%
+        &.animating {
+          animation: countdown-progress linear forwards;
+        }
+      }
+    }
+  }
+
+  &-actions {
+    display: flex;
+    gap: 16px;
+    margin-top: 24px;
+    width: 100%;
+    max-width: 500px; // 增加最大宽度以适应自适应按钮
+    justify-content: center; // 按钮居中对齐
+  }
+
+  &-action-button {
+    flex: 1; // 改为等比例分配宽度，使前三个按钮宽度相同
+    border: 1px solid @text-color-inverse;
+    background: transparent;
+    color: @text-color-inverse;
+    border-radius: @border-radius-base;
+    font-size: 20px;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    padding: 8px 16px;
+    white-space: nowrap; // 防止文字换行
+    height: 44px !important;
+    box-sizing: content-box;
+
+    .payment-result-toast-action-icon {
+      font-size: 44px;
+    }
+
+    // 重试按钮特殊样式
+    &.retry-button {
+      &:hover {
+        background: rgba(71, 205, 137, 0.1); // 成功绿色的背景
+        border-color: @success-color;
+        color: @success-color;
+      }
+    }
+
+    // 更改支付方式按钮特殊样式
+    &.change-payment-button {
+      &:hover {
+        background: rgba(240, 68, 56, 0.1); // 错误红色的背景
+        border-color: @error-color;
+        color: @error-color;
+      }
+    }
+
+    // 主要操作按钮样式（部分支付场景）
+    &.primary-button {
+      background: @success-color;
+      color: #ffffff;
+      border-color: @success-color;
+
+      &:hover {
+        background: darken(@success-color, 10%);
+        border-color: darken(@success-color, 10%);
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(71, 205, 137, 0.3);
+      }
+    }
+  }
+
+  // 菜单图标样式
+  &-menu-icon {
+    font-size: 16px;
+    margin-right: 8px;
+  }
+
+  &-more-button {
+    flex: 0 0 auto !important; // 更多按钮保持固定宽度，不跟随等比例分配
+    width: 60px !important;
+    height: 44px !important; // 与其他按钮保持一致的高度
+    border: 1px solid @text-color-inverse;
+    background: transparent;
+    color: @text-color-inverse;
+    border-radius: @border-radius-base;
+    font-size: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.3s ease;
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.1);
+      transform: translateY(-2px);
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    }
+
+    &:active {
+      transform: translateY(0);
+    }
+  }
+}
+
+
+// 动画效果
+@keyframes progress-glow {
+  from {
+    opacity: 0.3;
+  }
+
+  to {
+    opacity: 0.8;
+  }
+}
+
+// 倒计时进度条动画：从满格缩减到空
+@keyframes countdown-progress {
+  from {
+    transform: scaleX(1); // 从满格开始
+  }
+
+  to {
+    transform: scaleX(0); // 缩减到空
+  }
+}
+
+// 响应式设计
+@media (max-width: 768px) {
+  .payment-result-toast {
+    &-content {
+      padding: 32px 24px 80px; // 为底部进度条预留空间
+      min-height: 280px;
+    }
+
+    &-success-title {
+      font-size: 24px;
+    }
+
+    &-change-due {
+      &-title {
+        font-size: 28px;
+      }
+    }
+
+    &-countdown {
+      &-text {
+        display: none;
+      }
+
+      &-progress {
+        height: 6px; // 移动端稍微减小高度
+      }
+    }
+
+    &-actions {
+      flex-direction: column;
+      max-width: 100%;
+      align-items: center; // 移动端按钮居中对齐
+    }
+
+    &-action-button {
+      flex: 1; // 移动端也使用等比例分配，使前三个按钮宽度相同
+      min-width: 100px; // 移动端最小宽度
+      height: 48px;
+      font-size: 16px; // 保持与图片接近的字体大小
+    }
+
+    &-more-button {
+      flex: 0 0 auto !important; // 移动端更多按钮也保持固定宽度
+      width: 60px !important;
+      height: 48px !important; // 与其他移动端按钮保持一致的高度
+      align-self: center;
+    }
+  }
+}

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

@@ -0,0 +1,57 @@
+import React from 'react';
+import type { MenuProps, ButtonProps } from 'antd';
+/** 操作按钮配置 */
+export interface ActionButtonProps {
+    /** 按钮唯一标识 */
+    id?: string;
+    /** 是否为更多操作按钮（下拉菜单） */
+    isMore?: boolean;
+    /** 下拉菜单数据，仅在 isMore 为 true 时生效 */
+    menuData?: MenuProps['items'];
+    /** 按钮属性配置 */
+    buttonProps?: ButtonProps;
+}
+/** 操作按钮组列表，支持多行按钮组 */
+export declare type ActionButtonGroupList = ActionButtonProps[][];
+/** 状态样式类型 */
+export declare type StatusClassName = 'success' | 'failed' | 'wallet-pass-failed';
+export interface PaymentResultToastProps {
+    /** 是否可见 */
+    visible?: boolean;
+    /** 关闭回调 */
+    onClose?: () => void;
+    /** 状态样式类名，用于控制样式主题 */
+    statusClassName?: StatusClassName;
+    /** 标题文本（已计算好的显示文本） */
+    title: string;
+    /** 副标题内容（已计算好的金额显示内容，支持自定义样式） */
+    subtitle?: React.ReactNode;
+    /** 找零信息文本（已计算好的找零显示文本） */
+    changeDueText?: string;
+    /** 底部操作按钮组配置 */
+    actionButtons?: ActionButtonGroupList;
+    /** 是否启用自动关闭 */
+    autoClose?: boolean;
+    /** 倒计时秒数，控制自动关闭的时间（秒） */
+    autoCloseDelay?: number;
+    /** 是否显示倒计时进度条 */
+    showCountdownProgress?: boolean;
+    /** 倒计时完成回调 */
+    onCountdownComplete?: () => void;
+    /** 自定义样式类名，用于样式隔离和扩展 */
+    className?: string;
+}
+export interface PaymentResultToastConfig {
+    /** 弹窗宽度 */
+    width?: number;
+    /** 弹窗高度 */
+    height?: number;
+    /** 是否显示遮罩 */
+    mask?: boolean;
+    /** 是否可通过点击遮罩关闭（已由外部计算确定） */
+    maskClosable?: boolean;
+    /** 是否显示右上角关闭按钮 */
+    closable?: boolean;
+    /** 弹窗层级 */
+    zIndex?: number;
+}

package/lib/components/checkout/components/PaymentResultToast/types.js

@@ -0,0 +1,17 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/checkout/components/PaymentResultToast/types.ts
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);

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

@@ -0,0 +1,18 @@
+/**
+ * 防抖函数
+ * @param func 要防抖的函数
+ * @param wait 等待时间（毫秒）
+ * @returns 防抖后的函数
+ */
+export declare const debounce: <T extends (...args: any[]) => any>(func: T, wait: number) => (...args: Parameters<T>) => void;
+/**
+ * 获取弹窗配置的默认值
+ * @returns 默认的弹窗配置
+ */
+export declare const getDefaultModalConfig: () => {
+    width: number;
+    mask: boolean;
+    maskClosable: boolean;
+    closable: boolean;
+    zIndex: number;
+};

package/lib/components/checkout/components/PaymentResultToast/utils.js

@@ -0,0 +1,49 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/checkout/components/PaymentResultToast/utils.ts
+var utils_exports = {};
+__export(utils_exports, {
+  debounce: () => debounce,
+  getDefaultModalConfig: () => getDefaultModalConfig
+});
+module.exports = __toCommonJS(utils_exports);
+var debounce = (func, wait) => {
+  let timeout = null;
+  return (...args) => {
+    if (timeout) {
+      clearTimeout(timeout);
+    }
+    timeout = setTimeout(() => {
+      func.apply(null, args);
+    }, wait);
+  };
+};
+var getDefaultModalConfig = () => ({
+  width: 680,
+  mask: true,
+  maskClosable: false,
+  // 默认值，会根据状态动态调整
+  closable: true,
+  zIndex: 1e3
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  debounce,
+  getDefaultModalConfig
+});

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { WalletBalanceConfirmAction } from '../AmountSummary';
+interface SavePayLaterHandlerProps {
+    amountSymbol?: string;
+    walletPassData?: {
+        selectedWallet?: any[];
+        availableDiscountList?: any[];
+        selectedDiscountList?: number[];
+    };
+    onSavePayLater: (action?: WalletBalanceConfirmAction) => void;
+}
+interface SavePayLaterHandlerRef {
+    handleSavePayLaterClick: () => void;
+}
+declare const SavePayLaterHandler: React.ForwardRefExoticComponent<SavePayLaterHandlerProps & React.RefAttributes<SavePayLaterHandlerRef>>;
+export default SavePayLaterHandler;
+export type { SavePayLaterHandlerRef };

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

@@ -0,0 +1,167 @@
+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/SavePayLaterHandler/index.tsx
+var SavePayLaterHandler_exports = {};
+__export(SavePayLaterHandler_exports, {
+  default: () => SavePayLaterHandler_default
+});
+module.exports = __toCommonJS(SavePayLaterHandler_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_materials = require("@pisell/materials");
+var import_utils = require("@pisell/utils");
+var import_decimal = __toESM(require("decimal.js"));
+var import_locales = __toESM(require("../../locales"));
+var import_useEngineContext = __toESM(require("../../../../hooks/useEngineContext"));
+var SavePayLaterHandler = (0, import_react.forwardRef)(({
+  amountSymbol = "$",
+  walletPassData,
+  onSavePayLater
+}, ref) => {
+  const [showWalletBalanceConfirmModal, setShowWalletBalanceConfirmModal] = (0, import_react.useState)(false);
+  const [walletBalanceDeductAmount, setWalletBalanceDeductAmount] = (0, import_react.useState)("");
+  const context = (0, import_useEngineContext.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;
+  };
+  const getWalletTotalAmount = () => {
+    if (!(walletPassData == null ? void 0 : walletPassData.selectedWallet) || !Array.isArray(walletPassData.selectedWallet)) {
+      return 0;
+    }
+    const totalDecimal = walletPassData.selectedWallet.reduce((totalDecimal2, wallet) => {
+      const redeemValue = parseFloat(wallet.redeem) || 0;
+      const redeemDecimal = new import_decimal.default(redeemValue);
+      return totalDecimal2.plus(redeemDecimal);
+    }, new import_decimal.default(0));
+    return totalDecimal.toNumber();
+  };
+  const handleSavePayLaterClick = () => {
+    if ((walletPassData == null ? void 0 : walletPassData.selectedWallet) && walletPassData.selectedWallet.length > 0) {
+      const amount = getWalletTotalAmount();
+      const deductAmount = (0, import_utils.formatAmount)(amount, 2, amountSymbol);
+      setWalletBalanceDeductAmount(deductAmount);
+      setShowWalletBalanceConfirmModal(true);
+    } else {
+      onSavePayLater();
+    }
+  };
+  const handleWalletBalanceConfirm = (action) => {
+    setShowWalletBalanceConfirmModal(false);
+    onSavePayLater(action);
+  };
+  (0, import_react.useImperativeHandle)(ref, () => ({
+    handleSavePayLaterClick
+  }));
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+    import_materials.PisellModal,
+    {
+      visible: showWalletBalanceConfirmModal,
+      onCancel: () => handleWalletBalanceConfirm("cancel"),
+      closable: false,
+      mask: true,
+      maskClosable: false,
+      centered: true,
+      width: 500,
+      title: getText("pisell2.checkout.wallet-balance-confirm.title"),
+      footer: null,
+      className: "wallet-balance-confirm-modal",
+      styles: {
+        header: {
+          textAlign: "center",
+          borderBottom: "1px solid #EAECF0",
+          paddingBottom: "16px"
+        }
+      }
+    },
+    /* @__PURE__ */ import_react.default.createElement("div", { style: { padding: "40px 0 0 0" } }, /* @__PURE__ */ import_react.default.createElement("div", { style: { textAlign: "center", marginBottom: "32px", lineHeight: "1.5" } }, /* @__PURE__ */ import_react.default.createElement("span", { style: { color: "#533795", fontWeight: 600, fontSize: "18px" } }, walletBalanceDeductAmount), /* @__PURE__ */ import_react.default.createElement("span", { style: { color: "#101828", fontSize: "16px" } }, getText("pisell2.checkout.wallet-balance-confirm.description-before")), /* @__PURE__ */ import_react.default.createElement("span", { style: { color: "#533795", fontWeight: 600, fontSize: "16px" } }, getText("pisell2.checkout.wallet-balance-confirm.description-after"))), /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", gap: "12px", flexDirection: "row" } }, /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Button,
+      {
+        onClick: () => handleWalletBalanceConfirm("cancel"),
+        style: {
+          flex: "0 1 auto",
+          minWidth: "fit-content",
+          height: "48px",
+          borderRadius: "12px",
+          fontSize: "16px",
+          fontWeight: 500,
+          border: "1px solid #D0D5DD",
+          color: "#344054",
+          padding: "0 16px",
+          whiteSpace: "nowrap"
+        }
+      },
+      getText("pisell2.checkout.wallet-balance-confirm.cancel")
+    ), /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Button,
+      {
+        onClick: () => handleWalletBalanceConfirm("save-without-deduct"),
+        style: {
+          flex: "1 1 auto",
+          height: "48px",
+          borderRadius: "12px",
+          fontSize: "16px",
+          fontWeight: 500,
+          border: "1px solid #D0D5DD",
+          color: "#344054",
+          padding: "0 16px",
+          whiteSpace: "nowrap"
+        }
+      },
+      getText("pisell2.checkout.wallet-balance-confirm.save-without-deduct")
+    ), /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Button,
+      {
+        type: "primary",
+        style: {
+          flex: "1.2 1 auto",
+          height: "48px",
+          backgroundColor: "#533795",
+          borderColor: "#533795",
+          borderRadius: "12px",
+          fontWeight: 600,
+          fontSize: "16px",
+          border: "none",
+          boxShadow: "0px 1px 2px rgba(16, 24, 40, 0.05)",
+          padding: "0 16px",
+          whiteSpace: "nowrap"
+        },
+        onClick: () => handleWalletBalanceConfirm("apply-deduct-now")
+      },
+      getText("pisell2.checkout.wallet-balance-confirm.apply-deduct-now")
+    )))
+  ));
+});
+SavePayLaterHandler.displayName = "SavePayLaterHandler";
+var SavePayLaterHandler_default = SavePayLaterHandler;

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ScrollableListProps } from './types';
+import './index.less';
+declare const ScrollableList: React.FC<ScrollableListProps>;
+export default ScrollableList;