@pisell/private-materials 6.5.2 → 6.5.3

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

@@ -25,11 +25,90 @@ export var debounce = function debounce(func, wait) {
  */
 export var getDefaultModalConfig = function getDefaultModalConfig() {
   return {
-    width: 680,
-    mask: true,
+    width: 501,
+    // 更新为DOM节点中的宽度
+    mask: false,
     maskClosable: false,
     // 默认值，会根据状态动态调整
     closable: true,
     zIndex: 1000
   };
+};
+
+/**
+ * 一键关闭当前页面上所有的 PaymentResultToast
+ * 这个函数是对现有 clearAllPaymentResultToasts 函数的封装，
+ * 提供了更友好的 API 和额外的配置选项
+ * 
+ * 使用方法：
+ * - closeAllPaymentResultToasts() // 带动画关闭
+ * - closeAllPaymentResultToasts({ immediate: true }) // 立即关闭
+ * 
+ * @param options 配置选项
+ * @param options.immediate 是否立即关闭（跳过退出动画），默认 false
+ * @returns Promise<void> 返回 Promise，在所有 Toast 关闭完成后 resolve
+ */
+export var closeAllPaymentResultToasts = function closeAllPaymentResultToasts(options) {
+  var _ref = options || {},
+    _ref$immediate = _ref.immediate,
+    immediate = _ref$immediate === void 0 ? false : _ref$immediate;
+  return new Promise(function (resolve) {
+    try {
+      // 检查是否有 Toast 存在
+      var toastElements = document.querySelectorAll('[data-toast-id]');
+      if (toastElements.length === 0) {
+        resolve();
+        return;
+      }
+      if (immediate) {
+        // 立即关闭：直接移除所有 Toast DOM 元素
+        toastElements.forEach(function (element) {
+          if (element.parentNode) {
+            element.parentNode.removeChild(element);
+          }
+        });
+        resolve();
+      } else {
+        // 带动画关闭：添加退出动画类，然后等待动画完成
+        toastElements.forEach(function (element) {
+          element.classList.add('toast-exiting');
+        });
+
+        // 等待退出动画完成后移除元素
+        setTimeout(function () {
+          toastElements.forEach(function (element) {
+            if (element.parentNode) {
+              element.parentNode.removeChild(element);
+            }
+          });
+          resolve();
+        }, 300); // 与 CSS 退出动画时间一致
+      }
+    } catch (error) {
+      console.warn('关闭 PaymentResultToast 时发生错误:', error);
+      resolve();
+    }
+  });
+};
+
+/**
+ * 获取当前页面上 PaymentResultToast 的数量
+ * @returns number 当前显示的 Toast 数量
+ */
+export var getToastCount = function getToastCount() {
+  try {
+    var toastElements = document.querySelectorAll('[data-toast-id]');
+    return toastElements.length;
+  } catch (error) {
+    console.warn('获取 PaymentResultToast 数量时发生错误:', error);
+    return 0;
+  }
+};
+
+/**
+ * 检查当前页面是否有正在显示的 PaymentResultToast
+ * @returns boolean 是否有 Toast 正在显示
+ */
+export var hasActivePaymentResultToasts = function hasActivePaymentResultToasts() {
+  return getToastCount() > 0;
 };

package/es/components/checkout/components/SearchAndClientModule/index.js

@@ -19,11 +19,10 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { useDebounceFn } from 'ahooks';
 import { locales } from '@pisell/utils';
-import { Iconfont } from '@pisell/materials';
+import { Icon, useToast } from '@pisell/materials';
 import { SearchSection } from "../../../../pro/comprehensiveSearch/components";
 import CartClientCard from "../../../booking/info2/cartClientCard";
 import { useBookingTicket } from "../../../ticketBooking/hooks/pisellos";
-import useToast from "../../../../hooks/useToast";
 import "./index.less";
 var SearchAndClientModule = function SearchAndClientModule(props) {
   var disabledSwitch = props.disabledSwitch,
@@ -138,16 +137,17 @@ var SearchAndClientModule = function SearchAndClientModule(props) {
   }, [bookingTicket, handleSearch]);
   var Toast = useToast();
   var dropdownProps = useMemo(function () {
-    var icon = /*#__PURE__*/React.createElement(Iconfont, {
+    var icon = /*#__PURE__*/React.createElement(Icon, {
       type: 'pisell2-switch-horizontal-01',
+      size: 24,
       style: {
-        fontSize: 24,
-        color: '#7F56DA'
+        color: '#667085'
       }
     });
     var _props = {
       buttonProps: {
-        icon: icon
+        icon: icon,
+        size: 'default'
       }
     };
     if (disabledSwitch === true) {
@@ -155,6 +155,7 @@ var SearchAndClientModule = function SearchAndClientModule(props) {
         open: false,
         buttonProps: {
           icon: icon,
+          size: 'default',
           onClick: function onClick() {
             var _Toast$info4;
             // todo 根据当前订单付款情况判断是否可以切换
@@ -171,8 +172,7 @@ var SearchAndClientModule = function SearchAndClientModule(props) {
   return /*#__PURE__*/React.createElement("div", {
     style: {
       display: 'flex',
-      gap: 8,
-      marginBottom: 8
+      gap: 8
     }
   }, /*#__PURE__*/React.createElement(SearchSection, {
     value: value,
@@ -185,13 +185,13 @@ var SearchAndClientModule = function SearchAndClientModule(props) {
     searchButtonProps: {
       placement: 'inside',
       style: {
-        height: 40,
+        height: 36,
         padding: 8,
-        minWidth: 55
+        minWidth: 76
       }
     },
     cameraButtonProps: {
-      icon: ['pisell2-camera-01', 'pisell2-a-qr-code-02']
+      icon: ['pisell2-camera-01', 'pisell2-qr-code-02']
     },
     onSearch: function onSearch() {
       return handleSearch.run(value);
@@ -203,13 +203,14 @@ var SearchAndClientModule = function SearchAndClientModule(props) {
     },
     clientCardProps: {
       style: {
-        width: 240,
-        minHeight: 60,
-        height: 60,
-        borderColor: '#7F56DA'
+        width: 326,
+        minHeight: 48,
+        height: 48,
+        padding: '4px 8px',
+        borderColor: '#D0D5DD'
       },
       avatar: {
-        size: 'md'
+        size: 'sm'
       },
       dropdown: dropdownProps
     }

package/es/components/checkout/components/SearchAndClientModule/index.less

@@ -1,18 +1,39 @@
 .payment-modal-wrapper {
   .comprehensive-search__search-input-wrapper {
-    padding: 4px 8px;
-    height: 60px;
-    border: 1px solid #475467;
+    padding: 4px;
+    height: 48px;
 
-    .comprehensive-search__search-camera-wrapper {
+    .comprehensive-search__camera-activator {
       width: unset;
-      height: unset;
-      .comprehensive-search__search-camera-divider {
-        height: 30px;
+      gap: 6px;
+
+      .comprehensive-search__camera-activator-icons-divider {
+        height: 16px;
       }
       > span {
-        font-size: 30px;
+        font-size: 16px;
       }
     }
   }
+
+  .pisell-client-card__avatar-wrapper {
+    align-self: center !important;
+  }
+
+  .pisell-client-card__details {
+    gap: 0;
+
+    .pisell-client-card__name {
+      font-size: 14px;
+    }
+
+    .pisell-lowcode-tag {
+      font-size: 12px;
+    }
+
+    .pisell-client-card__contact {
+      font-size: 12px;
+      line-height: 18px;
+    }
+  }
 }

package/es/components/checkout/components/WalletPassModule/components/WalletPassHeader/index.js

@@ -23,7 +23,9 @@ var WalletPassHeader = function WalletPassHeader(_ref) {
       __html: ((_locales$getText = locales.getText('wallet-pass-module-cards-vouchers-in-wallet')) === null || _locales$getText === void 0 ? void 0 : _locales$getText("<span class=\"theme-color wallet-pass-module-customer\">".concat(customerName, "</span>"))) || ''
     }
   }), /*#__PURE__*/React.createElement("span", {
-    className: classnames('theme-color')
+    style: {
+      color: '#475467'
+    }
   }, (_locales$getText2 = locales.getText('wallet-pass-module-applied')) === null || _locales$getText2 === void 0 ? void 0 : _locales$getText2(selectedCount)), /*#__PURE__*/React.createElement("span", {
     className: classnames('error-color', 'pointer', 'underline'),
     onClick: onExpiredClick

package/es/components/checkout/components/WalletPassModule/index.less

@@ -4,12 +4,12 @@
   }
 }
 .wallet-pass-module {
-  padding: 8px;
+  border: none;
+  margin-top: 8px;
+  padding: 0px;
   display: flex;
   flex-direction: column;
   gap: 8px;
-  border-radius: 8px;
-  border: 1px solid var(--00_Pisell-pp, #7f56da);
   background: #fff;
   --theme-color: #7f56da;
 }

package/es/components/checkout/hooks/useWalletPass.js

@@ -21,10 +21,10 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { useState, useEffect, useMemo, useRef } from 'react';
 import { useMemoizedFn } from 'ahooks';
 import { uniqueByKey, locales } from '@pisell/utils';
+import { useToast } from '@pisell/materials';
 import dayjs from 'dayjs';
 import { usePisellOS } from "../../../hooks/useEngineContext";
 import { formatDiscountWalletData, formatMachineCodeServer2CardList, isSameContent } from "../components/WalletPassModule/utils";
-import useToast from "../../../hooks/useToast";
 import usePaymentLogger from "./usePaymentLogger";
 import { isWalkIn } from "../../booking/utils";
 

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

@@ -1,5 +1,5 @@
 export { default as PaymentModal } from './PaymentModal';
 export { PaymentProvider, usePaymentModal } from './PaymentProvider';
 export type { PaymentModalProps, PaymentModalData } from './PaymentModal';
-export { default as PaymentResultToast, PaymentResultToastProvider, usePaymentResultToast, showPaymentResultToastSuccess, showPaymentResultToastFailed, showPaymentResultToastWalletPassFailed, showPaymentResultToast, closePaymentResultToast } from './components/PaymentResultToast';
+export { default as PaymentResultToast, PaymentResultToastProvider, usePaymentResultToast, showPaymentResultToastSuccess, showPaymentResultToastFailed, showPaymentResultToastWalletPassFailed, showPaymentResultToast, closePaymentResultToast, setTillButton } from './components/PaymentResultToast';
 export type { ShowPaymentResultToastConfig, PaymentResultToastContextType, PaymentResultToastProps, PaymentResultToastConfig, ActionButtonProps, ActionButtonGroupList, StatusClassName } from './components/PaymentResultToast';

package/es/components/checkout/index.js

@@ -2,4 +2,4 @@
 export { default as PaymentModal } from "./PaymentModal";
 export { PaymentProvider, usePaymentModal } from "./PaymentProvider";
 // 导出支付结果弹窗相关组件和方法
-export { default as PaymentResultToast, PaymentResultToastProvider, usePaymentResultToast, showPaymentResultToastSuccess, showPaymentResultToastFailed, showPaymentResultToastWalletPassFailed, showPaymentResultToast, closePaymentResultToast } from "./components/PaymentResultToast";
+export { default as PaymentResultToast, PaymentResultToastProvider, usePaymentResultToast, showPaymentResultToastSuccess, showPaymentResultToastFailed, showPaymentResultToastWalletPassFailed, showPaymentResultToast, closePaymentResultToast, setTillButton } from "./components/PaymentResultToast";

package/es/components/checkout/index.less

@@ -1,4 +1,38 @@
 .payment-modal-wrapper {
+  .pisell-lowcode-modal-close {
+    display: none;
+  }
+
+  .pisell-lowcode-modal-header {
+    padding: 8px 16px !important;
+  }
+
+  // CustomHeader 样式
+  .payment-modal-custom-header {
+    display: grid;
+    grid-template-columns: 1fr 2fr 1fr;
+    align-items: center;
+    width: 100%;
+
+    .header__center {
+      text-align: center;
+      font-size: 20px;
+      height: 30px;
+      line-height: 30px;
+    }
+
+    .header__right {
+      display: flex;
+      justify-content: flex-end;
+
+      button span {
+        font-size: 16px;
+        font-weight: 600;
+        text-decoration: underline;
+      }
+    }
+  }
+
   // 控制模态框最大高度和自适应 - 现在通过JavaScript设置一致的百分比基准
   .pisell-lowcode-modal {
     // JavaScript设置: maxHeight: '90%' (基于视口)
@@ -18,45 +52,29 @@
 
   .pisell-lowcode-modal {
     .pisell-lowcode-modal-body {
-      padding: 0 24px 24px 24px!important;
+      padding: 16px !important;
     }
   }
-  
-  // 根据 showCashPayment 状态调整下边距
-  &.no-cash-payment {
-    .pisell-lowcode-modal {
-      .pisell-lowcode-modal-body {
-        padding: 0 24px 88px 24px!important;
-      }
-    }
-  }
-  .comprehensive-search__search-input-wrapper {
-    padding: 4px 8px;
-    height: 60px;
-    border: 1px solid #475467;
 
-    .comprehensive-search__search-camera-wrapper {
-      width: unset;
-      height: unset;
-      .comprehensive-search__search-camera-divider {
-        height: 30px;
-      }
-      > span {
-        font-size: 30px;
-      }
-    }
-  }
+  // 根据 showCashPayment 状态调整下边距
+  // &.no-cash-payment {
+  //   .pisell-lowcode-modal {
+  //     .pisell-lowcode-modal-body {
+  //       padding: 16px 16px 88px 16px !important;
+  //     }
+  //   }
+  // }
 
   .payment-grid-layout {
     display: grid;
     grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); // 强制等宽分配
-    grid-template-rows: 1fr 1fr;
+    grid-template-rows: auto auto;
     gap: 16px;
-    background-color: #F6F2FF;
+    background-color: #f6f2ff;
     padding: 16px 16px 0 16px;
     border-radius: 0 0 12px 12px;
     width: 100%; // 确保容器占满宽度
-    
+
     // 确保grid项不会溢出
     > div {
       min-width: 0; // 允许内容缩小
@@ -68,14 +86,14 @@
     display: flex;
     flex-direction: column;
     gap: 16px;
-    background-color: #F6F2FF;
+    background-color: #f6f2ff;
     padding: 16px 16px 0 16px;
     border-radius: 0 0 12px 12px;
     flex: 1; // 使用弹性高度而不是固定高度
     min-height: 350px; // 减少最小高度，给底部模块留空间
     max-height: calc(90% - 280px); // 设置最大高度，确保不会超出屏幕
     overflow: hidden; // 防止整体溢出
-    
+
     // 支付选项模块在弹性布局中的样式
     .payment-options-module-container {
       flex: 1; // 占用剩余空间
@@ -86,14 +104,14 @@
       flex-direction: column;
       padding-bottom: 20px;
     }
-    
+
     // 额外模块固定在底部
-    .additional-module-container {
-      flex-shrink: 0; // 不允许缩小
-      min-height: 60px; // 确保额外模块有足够的显示空间
-      position: absolute;
-      bottom: 0;
-      width: calc(100% - 80px);
-    }
+    // .additional-module-container {
+    //   flex-shrink: 0; // 不允许缩小
+    //   min-height: 60px; // 确保额外模块有足够的显示空间
+    //   position: absolute;
+    //   bottom: 0;
+    //   width: calc(100% - 80px);
+    // }
   }
 }

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

@@ -1,6 +1,7 @@
 declare const _default: {
     en: {
         'order.total': string;
+        'order.start-new-order': string;
         'pisell2.subtotal.deposit': string;
         'pisell2.subtotal.total': string;
         'pisell2.subtotal.subtotal': string;
@@ -22,6 +23,7 @@ declare const _default: {
         'balance.due': string;
         'deposit.due': string;
         'partial.paid': string;
+        'split.payment': string;
         cash: string;
         rounding: string;
         'cash.payment': string;
@@ -154,6 +156,7 @@ declare const _default: {
     };
     'zh-CN': {
         'order.total': string;
+        'order.start-new-order': string;
         'pisell2.subtotal.deposit': string;
         'pisell2.subtotal.total': string;
         'pisell2.subtotal.subtotal': string;
@@ -175,6 +178,7 @@ declare const _default: {
         'balance.due': string;
         'deposit.due': string;
         'partial.paid': string;
+        'split.payment': string;
         cash: string;
         rounding: string;
         'cash.payment': string;
@@ -307,6 +311,7 @@ declare const _default: {
     };
     'zh-HK': {
         'order.total': string;
+        'order.start-new-order': string;
         'pisell2.subtotal.deposit': string;
         'pisell2.subtotal.total': string;
         'pisell2.subtotal.subtotal': string;
@@ -328,6 +333,7 @@ declare const _default: {
         'balance.due': string;
         'deposit.due': string;
         'partial.paid': string;
+        'split.payment': string;
         cash: string;
         rounding: string;
         'cash.payment': string;

package/es/components/checkout/locales.js

@@ -2,6 +2,7 @@ export default {
   "en": {
     // Order and Payment
     'order.total': 'Total',
+    'order.start-new-order': 'Start New Order',
     // Subtotal related
     'pisell2.subtotal.deposit': 'Deposit',
     'pisell2.subtotal.total': 'Total',
@@ -26,6 +27,7 @@ export default {
     'balance.due': 'Balance Due',
     'deposit.due': 'Deposit Due',
     'partial.paid': 'Partial Paid',
+    'split.payment': 'Pay\nPartially',
     // Cash Payment
     'cash': 'Cash',
     'rounding': 'Rounding',
@@ -122,7 +124,7 @@ export default {
     // Payment Result Toast
     'payment.result.success': 'Payment Successful',
     'payment.result.failed': 'Payment Failed',
-    'payment.result.paid': 'Paid',
+    'payment.result.paid': 'Fully Paid',
     'payment.result.partiallyPaid': 'Partially Paid',
     'payment.result.amountDue': 'Amount Due',
     'payment.result.changeDue': 'Change Due',
@@ -201,6 +203,7 @@ export default {
   'zh-CN': {
     // Order and Payment
     'order.total': '订单总计',
+    'order.start-new-order': '开始新订单',
     // Subtotal related
     'pisell2.subtotal.deposit': '定金',
     'pisell2.subtotal.total': '总计',
@@ -225,6 +228,7 @@ export default {
     'balance.due': '应付金额',
     'deposit.due': '定金待支付金额',
     'partial.paid': '部分支付',
+    'split.payment': '部分付款',
     // Cash Payment
     'cash': '现金',
     'rounding': '舍入',
@@ -305,7 +309,7 @@ export default {
     // Payment Result Toast
     'payment.result.success': '支付成功',
     'payment.result.failed': '支付失败',
-    'payment.result.paid': '已支付',
+    'payment.result.paid': '全额支付',
     'payment.result.partiallyPaid': '部分支付',
     'payment.result.amountDue': '欠款金额',
     'payment.result.changeDue': '找零',
@@ -403,6 +407,7 @@ export default {
   'zh-HK': {
     // Order and Payment
     'order.total': '訂單總計',
+    'order.start-new-order': '開始新訂單',
     // Subtotal related
     'pisell2.subtotal.deposit': '定金',
     'pisell2.subtotal.total': '總計',
@@ -427,6 +432,7 @@ export default {
     'balance.due': '應付金額',
     'deposit.due': '定金待支付金額',
     'partial.paid': '部分支付',
+    'split.payment': '部分付款',
     // Cash Payment
     'cash': '現金',
     'rounding': '捨入',
@@ -526,7 +532,7 @@ export default {
     // Payment Result Toast
     'payment.result.success': '支付成功',
     'payment.result.failed': '支付失敗',
-    'payment.result.paid': '已支付',
+    'payment.result.paid': '全額支付',
     'payment.result.partiallyPaid': '部分支付',
     'payment.result.amountDue': '欠款金額',
     'payment.result.changeDue': '找零',

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

@@ -104,31 +104,31 @@ export var calculateStatusClassName = function calculateStatusClassName(status)
  * 根据支付状态计算自动关闭配置
  */
 export var calculateAutoCloseConfig = function calculateAutoCloseConfig(status, hasChangeDue) {
+  var autoCloseDelay = 30;
   switch (status) {
     case 'paid':
       return {
         autoClose: true,
-        autoCloseDelay: hasChangeDue ? 30 : 5,
-        // 有找零30秒，无找零5秒
+        autoCloseDelay: autoCloseDelay,
         maskClosable: true
       };
     case 'partially_paid':
       return {
         autoClose: true,
-        autoCloseDelay: 5,
+        autoCloseDelay: autoCloseDelay,
         maskClosable: true
       };
     case 'failed':
     case 'wallet-pass-redemption-failed':
       return {
         autoClose: false,
-        autoCloseDelay: 0,
+        autoCloseDelay: autoCloseDelay,
         maskClosable: false
       };
     default:
       return {
         autoClose: false,
-        autoCloseDelay: 5,
+        autoCloseDelay: autoCloseDelay,
         maskClosable: false
       };
   }

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

@@ -7,7 +7,7 @@ export interface PaymentResultToastConfig {
     interaction: any;
     Toast: any;
     state: any;
-    onToastClose: () => void;
+    onToastClose?: () => void;
 }
 export interface PaymentResultToastParams {
     paymentStatus: string;
@@ -29,5 +29,5 @@ export declare const calculateAutoCloseConfig: (status: string, hasChangeDue: bo
     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;
+export declare const displayPaymentResultToast: (params: PaymentResultToastParams, config: PaymentResultToastConfig) => Promise<void>;
+export declare const createShowSuccessToast: (config: PaymentResultToastConfig, getActionButtons?: ((paymentStatus: string) => ActionButtonGroupList) | undefined) => (result: any) => Promise<void>;