@pisell/private-materials 6.3.14 → 6.4.1

package/es/components/checkout/payment-modal-utils.js

@@ -0,0 +1,135 @@
+import React from 'react';
+import { formatAmount } from '@pisell/utils';
+/**
+ * 格式化货币金额
+ */
+export var formatCurrency = function formatCurrency(amount) {
+  var amountSymbol = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '$';
+  return formatAmount(amount, 2, amountSymbol);
+};
+
+/**
+ * 根据支付状态计算标题
+ */
+export var calculateTitle = function calculateTitle(status, failureReason) {
+  var getText = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : function () {
+    return '';
+  };
+  switch (status) {
+    case 'paid':
+    case 'partially_paid':
+      return getText('payment.result.success');
+    case 'failed':
+      var reason = failureReason ? " - ".concat(failureReason) : '';
+      return "".concat(getText('payment.result.failed')).concat(reason);
+    case 'wallet-pass-redemption-failed':
+      return getText('pisell2.checkout.wallet-pass.redemption-failed') || 'Wallet pass redeem failed';
+    default:
+      return getText('payment.result.success');
+  }
+};
+
+/**
+ * 生成副标题CSS类名的辅助函数
+ */
+export var getSubtitleClassName = function getSubtitleClassName(colorClass) {
+  return "payment-result-toast-subtitle-text ".concat(colorClass);
+};
+
+/**
+ * 根据支付状态和金额计算副标题
+ */
+export var calculateSubtitle = function calculateSubtitle(status, amount, gapAmount) {
+  var getText = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : function () {
+    return '';
+  };
+  var amountSymbol = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : '$';
+  var text;
+  var colorClass;
+  switch (status) {
+    case 'paid':
+      if (gapAmount) {
+        // 找零金额不为0，显示找零金额
+        text = "".concat(getText('payment.result.changeDue') || 'Change Due', " ").concat(formatCurrency(Math.abs(gapAmount), amountSymbol));
+        colorClass = 'partially-paid'; // 橙色
+      } else {
+        text = "".concat(getText('payment.result.paid') || 'Paid', " ").concat(formatCurrency(amount, amountSymbol));
+        colorClass = 'paid'; // 绿色
+      }
+      break;
+    case 'partially_paid':
+      var displayAmount = gapAmount !== null && gapAmount !== void 0 ? gapAmount : amount;
+      text = "".concat(getText('payment.result.partiallyPaid') || 'Partially Paid', " ").concat(formatCurrency(displayAmount, amountSymbol));
+      colorClass = 'partially-paid'; // 橙色
+      break;
+    case 'failed':
+      text = "".concat(getText('payment.result.amountDue') || 'Amount Due', " ").concat(formatCurrency(amount, amountSymbol));
+      colorClass = 'amount-due'; // 红色
+      break;
+    case 'wallet-pass-redemption-failed':
+      var successAmount = gapAmount !== null && gapAmount !== void 0 ? gapAmount : amount;
+      text = "".concat(getText('payment.result.partiallyPaid') || 'Partially Paid', " ").concat(formatCurrency(successAmount, amountSymbol));
+      colorClass = 'partially-paid'; // 绿色
+      break;
+    default:
+      return null;
+  }
+
+  // 返回带样式的JSX元素，包含完整的结构和样式
+  return /*#__PURE__*/React.createElement('div', {
+    className: 'payment-result-toast-subtitle'
+  }, /*#__PURE__*/React.createElement('h1', {
+    className: getSubtitleClassName(colorClass)
+  }, text));
+};
+
+/**
+ * 根据支付状态计算StatusClassName
+ */
+export var calculateStatusClassName = function calculateStatusClassName(status) {
+  switch (status) {
+    case 'paid':
+    case 'partially_paid':
+      return 'success';
+    case 'failed':
+      return 'failed';
+    case 'wallet-pass-redemption-failed':
+      return 'wallet-pass-failed';
+    default:
+      return 'success';
+  }
+};
+
+/**
+ * 根据支付状态计算自动关闭配置
+ */
+export var calculateAutoCloseConfig = function calculateAutoCloseConfig(status, hasChangeDue) {
+  switch (status) {
+    case 'paid':
+      return {
+        autoClose: true,
+        autoCloseDelay: hasChangeDue ? 30 : 5,
+        // 有找零30秒，无找零5秒
+        maskClosable: true
+      };
+    case 'partially_paid':
+      return {
+        autoClose: true,
+        autoCloseDelay: 5,
+        maskClosable: true
+      };
+    case 'failed':
+    case 'wallet-pass-redemption-failed':
+      return {
+        autoClose: false,
+        autoCloseDelay: 0,
+        maskClosable: false
+      };
+    default:
+      return {
+        autoClose: false,
+        autoCloseDelay: 5,
+        maskClosable: false
+      };
+  }
+};

package/es/components/checkout/styles.d.ts

@@ -0,0 +1,67 @@
+export declare const checkoutStyles: {
+    readonly container: {
+        readonly display: "flex";
+        readonly flexDirection: "column";
+        readonly minHeight: 0;
+        readonly overflowY: "auto";
+        readonly maxHeight: "90%";
+    };
+    readonly walletPassSearchRow: {
+        readonly display: "flex";
+        readonly gap: 8;
+    };
+    readonly moduleBase: {
+        readonly backgroundColor: "#ff4d4f";
+        readonly borderRadius: "8px";
+        readonly padding: "16px";
+        readonly marginBottom: "12px";
+        readonly color: "white";
+        readonly transition: "all 0.3s ease";
+    };
+    readonly moduleTitle: {
+        readonly fontSize: "16px";
+        readonly fontWeight: "500";
+        readonly color: "#4096ff";
+        readonly marginBottom: "8px";
+    };
+    readonly moduleDescription: {
+        readonly fontSize: "12px";
+        readonly opacity: 0.8;
+        readonly marginBottom: "8px";
+    };
+    readonly button: {
+        readonly backgroundColor: "rgba(255,255,255,0.2)";
+        readonly border: "1px solid rgba(255,255,255,0.3)";
+        readonly borderRadius: "4px";
+        readonly color: "white";
+        readonly padding: "6px 12px";
+        readonly fontSize: "12px";
+        readonly cursor: "pointer";
+        readonly transition: "background-color 0.2s ease";
+    };
+    readonly buttonHover: {
+        readonly backgroundColor: "rgba(255,255,255,0.3)";
+    };
+    readonly statusButton: {
+        readonly backgroundColor: "#ff4d4f";
+        readonly color: "white";
+        readonly border: "none";
+        readonly borderRadius: "4px";
+        readonly padding: "8px 16px";
+        readonly cursor: "pointer";
+        readonly fontSize: "14px";
+        readonly transition: "background-color 0.2s ease";
+    };
+    readonly amountDisplay: {
+        readonly fontSize: "24px";
+        readonly fontWeight: "bold";
+        readonly marginBottom: "8px";
+        readonly textAlign: "center";
+    };
+};
+export declare const calculateModalHeight: (moduleConfig: {
+    showWalletPass?: boolean;
+    showCashPayment?: boolean;
+    showAdditionalModule?: boolean;
+    showPaymentOptions?: boolean;
+}) => number;

package/es/components/checkout/styles.js

@@ -0,0 +1,75 @@
+// Checkout 组件的样式定义
+export var checkoutStyles = {
+  container: {
+    display: 'flex',
+    flexDirection: 'column',
+    minHeight: 0,
+    // 允许缩小
+    overflowY: 'auto',
+    // 允许垂直滚动
+    maxHeight: '90%'
+  },
+  walletPassSearchRow: {
+    display: 'flex',
+    gap: 8
+  },
+  moduleBase: {
+    backgroundColor: '#ff4d4f',
+    borderRadius: '8px',
+    padding: '16px',
+    marginBottom: '12px',
+    color: 'white',
+    transition: 'all 0.3s ease'
+  },
+  moduleTitle: {
+    fontSize: '16px',
+    fontWeight: '500',
+    color: '#4096ff',
+    marginBottom: '8px'
+  },
+  moduleDescription: {
+    fontSize: '12px',
+    opacity: 0.8,
+    marginBottom: '8px'
+  },
+  button: {
+    backgroundColor: 'rgba(255,255,255,0.2)',
+    border: '1px solid rgba(255,255,255,0.3)',
+    borderRadius: '4px',
+    color: 'white',
+    padding: '6px 12px',
+    fontSize: '12px',
+    cursor: 'pointer',
+    transition: 'background-color 0.2s ease'
+  },
+  buttonHover: {
+    backgroundColor: 'rgba(255,255,255,0.3)'
+  },
+  statusButton: {
+    backgroundColor: '#ff4d4f',
+    color: 'white',
+    border: 'none',
+    borderRadius: '4px',
+    padding: '8px 16px',
+    cursor: 'pointer',
+    fontSize: '14px',
+    transition: 'background-color 0.2s ease'
+  },
+  amountDisplay: {
+    fontSize: '24px',
+    fontWeight: 'bold',
+    marginBottom: '8px',
+    textAlign: 'center'
+  }
+};
+
+// 动态高度计算辅助函数
+export var calculateModalHeight = function calculateModalHeight(moduleConfig) {
+  var baseHeight = 200; // 基础高度（状态区 + 金额汇总）
+
+  if (moduleConfig.showWalletPass) baseHeight += 80;
+  if (moduleConfig.showCashPayment) baseHeight += 100;
+  if (moduleConfig.showAdditionalModule) baseHeight += 80;
+  if (moduleConfig.showPaymentOptions) baseHeight += 120;
+  return Math.min(baseHeight, window.innerHeight * 0.9); // 最大不超过屏幕高度的90%
+};

package/es/components/checkout/types.d.ts

@@ -0,0 +1,129 @@
+/// <reference types="react" />
+export interface CurrentOrderInfo {
+    /** 订单UUID */
+    uuid?: string;
+    /** 订单ID */
+    orderId?: string;
+    /** 订单状态 */
+    status?: string;
+    /** 当前步骤 */
+    step?: string;
+    /** 订单总金额 */
+    totalAmount?: string;
+    /** 待付金额 */
+    remainingAmount?: string;
+    /** 支付状态 */
+    paymentStatus?: string;
+    /** 是否为定金订单 */
+    isDeposit?: boolean;
+    /** 定金金额 */
+    depositAmount?: string;
+    /** 订单类型 */
+    orderType?: 'virtual' | 'appointment_booking';
+    /** 平台类型 */
+    platform?: 'pc' | 'h5';
+    /** 创建时间 */
+    createdAt?: string;
+    /** 商品数量 */
+    itemCount?: number;
+    /** 是否有本地订单数据 */
+    hasLocalOrderData?: boolean;
+}
+export interface PaymentData {
+    orderId?: string | number;
+    totalAmount?: number;
+    currency?: string;
+    customerId?: string | number;
+    customerName?: string;
+    description?: string;
+    items?: PaymentItem[];
+}
+export interface PaymentItem {
+    id: string | number;
+    name: string;
+    quantity: number;
+    price: number;
+    total: number;
+}
+export interface ModuleConfig {
+    showWalletPass?: boolean;
+    showCashPayment?: boolean;
+    showAdditionalModule?: boolean;
+    showPaymentOptions?: boolean;
+}
+export interface StatusConfig {
+    leftStatus?: string;
+    rightStatus?: string;
+}
+export interface PaymentResult {
+    type: 'cash' | 'walletpass' | 'etfpos' | 'custom' | 'mx51';
+    amount?: number;
+    status: 'success' | 'failed' | 'cancelled' | 'pending';
+    orderId?: string | number;
+    transactionId?: string;
+    message?: string;
+    timestamp?: number;
+    roundingAmount?: number;
+}
+export interface CheckoutCallbacks {
+    onPaymentComplete?: (result: PaymentResult) => void;
+    onPaymentCancel?: () => void;
+    onStatusChange?: (status: string) => void;
+}
+export interface CheckoutProps {
+    paymentData?: PaymentData;
+    moduleConfig?: ModuleConfig;
+    statusConfig?: StatusConfig;
+    cashAmountButtons?: number[];
+    onPaymentComplete?: (result: PaymentResult) => void;
+    onPaymentCancel?: () => void;
+    onStatusChange?: (status: string) => void;
+}
+export interface StatusSectionProps {
+    config?: StatusConfig;
+    onStatusChange?: (status: string) => void;
+}
+export interface AmountSummaryProps {
+    orderInfo?: CurrentOrderInfo;
+    open_deposit?: boolean;
+    customAmount?: string;
+    onAmountChange?: (amount: string) => void;
+}
+export interface WalletPassModuleProps {
+    orderInfo?: CurrentOrderInfo;
+}
+export interface CashPaymentModuleProps {
+    orderInfo?: CurrentOrderInfo;
+    onPaymentComplete?: (result: PaymentResult) => void;
+    amountButtons?: number[];
+}
+export interface PaymentOptionsModuleProps {
+    orderInfo?: CurrentOrderInfo;
+    onClick?: (method: PaymentMethod) => void;
+}
+export interface AdditionalModuleProps {
+    orderInfo?: CurrentOrderInfo;
+    customAmount?: string;
+    handleButtonClick: (key: string) => void;
+    hasOrderNote?: boolean;
+}
+export interface PaymentMethod {
+    id: string;
+    name: string;
+    nameEn?: string;
+    surcharge: string;
+    surchargeAmount?: number;
+    icon?: string;
+    iconComponent?: React.ReactNode;
+    color?: string;
+    enabled?: boolean;
+    code: string;
+    type: string;
+    fixed?: number;
+    percentage?: number;
+}
+export interface PaymentMethodSelection {
+    method: PaymentMethod;
+    amount: number;
+    totalWithSurcharge: number;
+}

package/es/components/checkout/types.js

@@ -0,0 +1 @@
+export {};

package/es/components/checkout/utils/PaymentResultToastUtils.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { StatusClassName, ActionButtonGroupList } from '../components/PaymentResultToast';
+export interface PaymentResultToastConfig {
+    context: any;
+    pisellos: any;
+    getData: (key: string) => any;
+    interaction: any;
+    Toast: any;
+    state: any;
+    onToastClose: () => void;
+}
+export interface PaymentResultToastParams {
+    paymentStatus: string;
+    orderTotalAmount: number;
+    gapAmount: number;
+    failureReason?: string;
+    autoCloseConfig?: {
+        autoClose: boolean;
+        autoCloseDelay: number;
+    };
+    actionButtons?: ActionButtonGroupList;
+}
+export declare const formatCurrency: (amount: number, amountSymbol?: string) => string | number;
+export declare const calculateTitle: (status: string, failureReason?: string) => string;
+export declare const calculateSubtitle: (status: string, amount: number, gapAmount?: number, getData?: ((key: string) => any) | undefined) => React.ReactNode;
+export declare const calculateStatusClassName: (status: string) => StatusClassName;
+export declare const calculateAutoCloseConfig: (status: string, hasChangeDue: boolean) => {
+    autoClose: boolean;
+    autoCloseDelay: number;
+    maskClosable: boolean;
+};
+export declare const displayPaymentResultToast: (params: PaymentResultToastParams, config: PaymentResultToastConfig) => void;
+export declare const createShowSuccessToast: (config: PaymentResultToastConfig, getActionButtons?: ((paymentStatus: string) => ActionButtonGroupList) | undefined) => (result: any) => void;

package/es/components/checkout/utils/PaymentResultToastUtils.js

@@ -0,0 +1,190 @@
+import React from 'react';
+import { locales, formatAmount } from '@pisell/utils';
+import { showPaymentResultToastSuccess, showPaymentResultToastFailed } from "../components/PaymentResultToast";
+
+// 支付结果Toast工具类的配置参数接口
+
+// 支付结果Toast显示参数接口
+
+// 格式化货币金额
+export var formatCurrency = function formatCurrency(amount) {
+  var amountSymbol = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '$';
+  return formatAmount(amount, 2, amountSymbol);
+};
+
+// 根据支付状态和参数计算标题
+export var calculateTitle = function calculateTitle(status, failureReason) {
+  switch (status) {
+    case 'paid':
+    case 'partially_paid':
+      return locales.getText('payment.result.success');
+    case 'failed':
+      var reason = failureReason ? " - ".concat(failureReason) : '';
+      return "".concat(locales.getText('payment.result.failed')).concat(reason);
+    case 'wallet-pass-redemption-failed':
+      return locales.getText('pisell2.checkout.wallet-pass.redemption-failed') || 'Wallet pass redeem failed';
+    default:
+      return locales.getText('payment.result.success');
+  }
+};
+
+// 根据支付状态和金额计算副标题
+export var calculateSubtitle = function calculateSubtitle(status, amount, gapAmount, getData) {
+  // 生成CSS类名的辅助函数
+  var getSubtitleClassName = function getSubtitleClassName(colorClass) {
+    return "payment-result-toast-subtitle-text ".concat(colorClass);
+  };
+  var text;
+  var colorClass;
+  var amountSymbol = (getData === null || getData === void 0 ? void 0 : getData('shop_symbol')) || '$';
+  switch (status) {
+    case 'paid':
+      if (gapAmount) {
+        // 找零金额不为0，显示找零金额
+        text = "".concat(locales.getText('payment.result.changeDue') || 'Change Due', " ").concat(formatCurrency(Math.abs(gapAmount), amountSymbol));
+        colorClass = 'partially-paid'; // 橙色
+      } else {
+        text = "".concat(locales.getText('payment.result.paid') || 'Paid', " ").concat(formatCurrency(amount, amountSymbol));
+        colorClass = 'paid'; // 绿色
+      }
+      break;
+    case 'partially_paid':
+      var displayAmount = gapAmount !== null && gapAmount !== void 0 ? gapAmount : amount;
+      text = "".concat(locales.getText('payment.result.partiallyPaid') || 'Partially Paid', " ").concat(formatCurrency(displayAmount, amountSymbol));
+      colorClass = 'partially-paid'; // 橙色
+      break;
+    case 'failed':
+      text = "".concat(locales.getText('payment.result.amountDue') || 'Amount Due', " ").concat(formatCurrency(amount, amountSymbol));
+      colorClass = 'amount-due'; // 红色
+      break;
+    case 'wallet-pass-redemption-failed':
+      var successAmount = gapAmount !== null && gapAmount !== void 0 ? gapAmount : amount;
+      text = "".concat(locales.getText('payment.result.partiallyPaid') || 'Partially Paid', " ").concat(formatCurrency(successAmount, amountSymbol));
+      colorClass = 'partially-paid'; // 绿色
+      break;
+    default:
+      return null;
+  }
+  // 返回带样式的JSX元素，包含完整的结构和样式
+  return /*#__PURE__*/React.createElement("div", {
+    className: "payment-result-toast-subtitle"
+  }, /*#__PURE__*/React.createElement("h1", {
+    className: getSubtitleClassName(colorClass)
+  }, text));
+};
+
+// 根据支付状态计算StatusClassName
+export var calculateStatusClassName = function calculateStatusClassName(status) {
+  switch (status) {
+    case 'paid':
+    case 'partially_paid':
+      return 'success';
+    case 'failed':
+      return 'failed';
+    case 'wallet-pass-redemption-failed':
+      return 'wallet-pass-failed';
+    default:
+      return 'success';
+  }
+};
+
+// 根据支付状态计算自动关闭配置
+export var calculateAutoCloseConfig = function calculateAutoCloseConfig(status, hasChangeDue) {
+  switch (status) {
+    case 'paid':
+      return {
+        autoClose: true,
+        autoCloseDelay: hasChangeDue ? 30 : 5,
+        // 有找零30秒，无找零5秒
+        maskClosable: true
+      };
+    case 'partially_paid':
+      return {
+        autoClose: true,
+        autoCloseDelay: 5,
+        maskClosable: true
+      };
+    case 'failed':
+    case 'wallet-pass-redemption-failed':
+      return {
+        autoClose: false,
+        autoCloseDelay: 0,
+        maskClosable: false
+      };
+    default:
+      return {
+        autoClose: false,
+        autoCloseDelay: 5,
+        maskClosable: false
+      };
+  }
+};
+
+// 封装toast显示逻辑
+export var displayPaymentResultToast = function displayPaymentResultToast(params, config) {
+  var paymentStatus = params.paymentStatus,
+    orderTotalAmount = params.orderTotalAmount,
+    gapAmount = params.gapAmount,
+    failureReason = params.failureReason,
+    autoCloseConfig = params.autoCloseConfig,
+    actionButtons = params.actionButtons;
+  var getData = config.getData,
+    onToastClose = config.onToastClose;
+  if (paymentStatus === 'paid') {
+    // 成功支付的 toast
+    showPaymentResultToastSuccess({
+      title: calculateTitle(paymentStatus),
+      subtitle: calculateSubtitle(paymentStatus, orderTotalAmount, gapAmount, getData),
+      autoClose: (autoCloseConfig === null || autoCloseConfig === void 0 ? void 0 : autoCloseConfig.autoClose) || false,
+      autoCloseDelay: (autoCloseConfig === null || autoCloseConfig === void 0 ? void 0 : autoCloseConfig.autoCloseDelay) || 3000,
+      showCountdownProgress: true,
+      actionButtons: actionButtons || [],
+      onClose: onToastClose
+    });
+  } else if (paymentStatus === 'partially_paid') {
+    showPaymentResultToastSuccess({
+      title: calculateTitle(paymentStatus),
+      subtitle: calculateSubtitle(paymentStatus, orderTotalAmount, gapAmount, getData),
+      autoClose: (autoCloseConfig === null || autoCloseConfig === void 0 ? void 0 : autoCloseConfig.autoClose) || false,
+      actionButtons: actionButtons || [],
+      onClose: onToastClose
+    });
+  } else if (paymentStatus === 'failed' || paymentStatus === 'error') {
+    // 失败支付的 toast
+    showPaymentResultToastFailed({
+      title: calculateTitle(paymentStatus, failureReason),
+      subtitle: calculateSubtitle(paymentStatus, orderTotalAmount / 100, gapAmount, getData),
+      autoClose: (autoCloseConfig === null || autoCloseConfig === void 0 ? void 0 : autoCloseConfig.autoClose) || false,
+      actionButtons: actionButtons || [],
+      onClose: onToastClose
+    });
+  }
+};
+
+// 显示成功Toast的包装方法
+export var createShowSuccessToast = function createShowSuccessToast(config, getActionButtons) {
+  return function (result) {
+    var _result$response;
+    // 获取支付状态和相关信息
+    var responseData = (_result$response = result.response) === null || _result$response === void 0 ? void 0 : _result$response.data;
+    // 获取支付状态
+    var paymentStatus = responseData === null || responseData === void 0 ? void 0 : responseData.payment_status;
+    // 获取订单总金额
+    var orderTotalAmount = Number((responseData === null || responseData === void 0 ? void 0 : responseData.total_amount) || 0);
+    var gapAmount = Number((responseData === null || responseData === void 0 ? void 0 : responseData.amount_gap) || 0);
+    // 计算自动关闭配置
+    var autoCloseConfig = calculateAutoCloseConfig(paymentStatus, !!gapAmount);
+
+    // 获取按钮配置
+    var actionButtons = getActionButtons ? getActionButtons(paymentStatus) : [];
+
+    // 调用封装的toast显示方法
+    displayPaymentResultToast({
+      paymentStatus: paymentStatus,
+      orderTotalAmount: orderTotalAmount,
+      gapAmount: gapAmount,
+      autoCloseConfig: autoCloseConfig,
+      actionButtons: actionButtons
+    }, config);
+  };
+};

package/es/components/checkout/utils.d.ts

@@ -0,0 +1 @@
+export declare const getShopWalletPassId: (interaction: any) => Promise<string | null>;