@pisell/private-materials 6.5.2 → 6.5.3

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

@@ -226,13 +226,18 @@
     border-radius: 16px;
     padding: 0 16px 0 16px;
     color: #1a1a1a;
-    width: 348px;
+    width: 350px;
     min-width: 200px;
     height: 80px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 8px;
+
+    // 确认模式下的特殊样式
+    &.confirm-mode {
+      width: 420px;
+    }
   }
 
   .balance-due-info {
@@ -250,10 +255,12 @@
   }
 
   .balance-due-amount {
-    font-size: 16px;
+    font-size: 14px;
     font-weight: 400;
     color: #7f56da;
     line-height: 0.75;
+    text-decoration: underline;
+    text-underline-offset: 4px;
   }
 
   .pay-section {
@@ -272,17 +279,16 @@
   .pay-amount {
     font-size: 32px;
     font-weight: 400;
-    color: #7f56da;
+    color: #1e1830;
     line-height: 0.75;
-    text-decoration: underline;
-    text-underline-offset: 6px;
   }
 
   .edit-icon {
-    width: 24px;
-    height: 24px;
+    width: 20px;
+    height: 20px;
     flex-shrink: 0;
-    font-size: 24px;
+    font-size: 20px;
+    margin-left: 8px;
   }
 
   /* 覆盖下拉菜单选项的hover和active状态 */
@@ -401,7 +407,7 @@
   border: none !important;
   border-radius: 12px !important;
   height: 48px !important;
-  padding: 12px 32px !important;
+  padding: 12px 0 !important;
   font-size: 16px !important;
   font-weight: 600 !important;
   color: white !important;
@@ -468,3 +474,15 @@
     }
   }
 }
+
+.split-payment-button {
+  padding: 0 8px;
+  background: #079455;
+  color: white;
+  font-size: 14px;
+  border: 1px solid #C3B2E7;
+  height: 80px;
+  white-space: pre-line; // 让换行符(\n)生效
+  text-align: left; // 确保文本居中对齐
+  min-width: 68px;
+}

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

@@ -15,8 +15,6 @@
 /* 标题栏 */
 .cash-pay-header {
   align-self: stretch;
-  padding-left: 8px;
-  padding-right: 8px;
   justify-content: space-between;
   display: inline-flex;
   width: 100%;

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

@@ -7,7 +7,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import React, { useState } from 'react';
 import { ChevronUp, HelpCircle } from '@pisell/icon';
 // @ts-ignore - @pisell/utils types not available
-import { locales, formatAmount } from '@pisell/utils';
+import { locales, formatAmountWithOptions } from '@pisell/utils';
 import checkoutLocales from "../../locales";
 import "./index.less";
 import classNames from 'classnames';
@@ -159,7 +159,12 @@ function PaymentDetailModal(_ref) {
         className: classNames('payment-item-actions')
       }, /*#__PURE__*/React.createElement("div", {
         className: classNames('payment-item-amount')
-      }, "-", formatAmount(Math.abs(item.amount), 2, amountSymbol)), shouldShowVoidButton(item) && /*#__PURE__*/React.createElement("button", {
+      }, "-", formatAmountWithOptions(Math.abs(item.amount), amountSymbol, {
+        precision: 2,
+        hideDecimalForWholeNumbers: false,
+        useThousandsSeparator: true,
+        showCurrencySymbol: true
+      })), shouldShowVoidButton(item) && /*#__PURE__*/React.createElement("button", {
         className: classNames('void-button'),
         onClick: function onClick() {
           return handleVoidPayment(item);
@@ -200,7 +205,12 @@ function PaymentDetailModal(_ref) {
           className: classNames('balance-item-text')
         }, wallet.name || wallet.product_name || getText('wallet.pass') || 'Wallet Pass'), /*#__PURE__*/React.createElement("div", {
           className: classNames('balance-item-amount')
-        }, "-", wallet.redeem || formatAmount(Math.abs(wallet.savedAmount || 0), 2, amountSymbol))));
+        }, "-", wallet.redeem || formatAmountWithOptions(Math.abs(wallet.savedAmount || 0), amountSymbol, {
+          precision: 2,
+          hideDecimalForWholeNumbers: false,
+          useThousandsSeparator: true,
+          showCurrencySymbol: true
+        }))));
       });
     }
 
@@ -288,7 +298,12 @@ function PaymentDetailModal(_ref) {
         className: classNames('order-row-text')
       }, getText('no.items.found') || 'No items found'), /*#__PURE__*/React.createElement("div", {
         className: classNames('order-row-amount')
-      }, formatAmount(0, 2, amountSymbol)))));
+      }, formatAmountWithOptions(0, amountSymbol, {
+        precision: 2,
+        hideDecimalForWholeNumbers: false,
+        useThousandsSeparator: true,
+        showCurrencySymbol: true
+      })))));
     }
 
     // 将项目分成两列显示
@@ -311,7 +326,12 @@ function PaymentDetailModal(_ref) {
         className: classNames('order-row-label')
       }, getDisplayLabel(item)), /*#__PURE__*/React.createElement("div", {
         className: classNames('order-row-amount')
-      }, prefix, formatAmount(item.value, 2, amountSymbol)));
+      }, prefix, formatAmountWithOptions(item.value, amountSymbol, {
+        precision: 2,
+        hideDecimalForWholeNumbers: false,
+        useThousandsSeparator: true,
+        showCurrencySymbol: true
+      })));
     })), rightItems.length > 0 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
       className: classNames('divider-vertical')
     }), /*#__PURE__*/React.createElement("div", {
@@ -329,7 +349,12 @@ function PaymentDetailModal(_ref) {
         className: classNames('order-row-label')
       }, getDisplayLabel(item)), /*#__PURE__*/React.createElement("div", {
         className: classNames('order-row-amount')
-      }, prefix, formatAmount(item.value, 2, amountSymbol)));
+      }, prefix, formatAmountWithOptions(item.value, amountSymbol, {
+        precision: 2,
+        hideDecimalForWholeNumbers: false,
+        useThousandsSeparator: true,
+        showCurrencySymbol: true
+      })));
     }))));
   };
   return /*#__PURE__*/React.createElement("div", {
@@ -351,7 +376,12 @@ function PaymentDetailModal(_ref) {
     className: classNames('section-right')
   }, /*#__PURE__*/React.createElement("div", {
     className: classNames('section-amount')
-  }, formatAmount(getTotalAmount(), 2, amountSymbol)), /*#__PURE__*/React.createElement(CollapseIcon, {
+  }, formatAmountWithOptions(getTotalAmount(), amountSymbol, {
+    precision: 2,
+    hideDecimalForWholeNumbers: false,
+    useThousandsSeparator: true,
+    showCurrencySymbol: true
+  })), /*#__PURE__*/React.createElement(CollapseIcon, {
     expanded: orderTotalExpanded
   }))), orderTotalExpanded && /*#__PURE__*/React.createElement("div", {
     className: classNames('section-content')
@@ -374,7 +404,12 @@ function PaymentDetailModal(_ref) {
     className: classNames('section-right')
   }, /*#__PURE__*/React.createElement("div", {
     className: classNames('section-amount')
-  }, "-", formatAmount(getTotalPaidAmount(), 2, amountSymbol)), /*#__PURE__*/React.createElement(CollapseIcon, {
+  }, "-", formatAmountWithOptions(getTotalPaidAmount(), amountSymbol, {
+    precision: 2,
+    hideDecimalForWholeNumbers: false,
+    useThousandsSeparator: true,
+    showCurrencySymbol: true
+  })), /*#__PURE__*/React.createElement(CollapseIcon, {
     expanded: orderPaidExpanded
   }))), orderPaidExpanded && renderPaymentItems())), /*#__PURE__*/React.createElement("div", {
     className: classNames('balance-to-pay-section')
@@ -393,7 +428,12 @@ function PaymentDetailModal(_ref) {
     className: classNames('balance-to-pay-right')
   }, /*#__PURE__*/React.createElement("div", {
     className: classNames('balance-to-pay-amount')
-  }, formatAmount(getBalanceDueAmount(), 2, amountSymbol)), /*#__PURE__*/React.createElement(CollapseIcon, {
+  }, formatAmountWithOptions(getBalanceDueAmount(), amountSymbol, {
+    precision: 2,
+    hideDecimalForWholeNumbers: false,
+    useThousandsSeparator: true,
+    showCurrencySymbol: true
+  })), /*#__PURE__*/React.createElement(CollapseIcon, {
     expanded: balanceToPayExpanded,
     color: "#7F56DA"
   }))), balanceToPayExpanded && /*#__PURE__*/React.createElement("div", {
@@ -406,6 +446,11 @@ function PaymentDetailModal(_ref) {
     className: classNames('balance-due-title')
   }, getText('balance.due') || 'Balance Due'), /*#__PURE__*/React.createElement("div", {
     className: classNames('balance-due-amount')
-  }, formatAmount(customAmount || 0, 2, amountSymbol))))));
+  }, formatAmountWithOptions(customAmount || 0, amountSymbol, {
+    precision: 2,
+    hideDecimalForWholeNumbers: false,
+    useThousandsSeparator: true,
+    showCurrencySymbol: true
+  }))))));
 }
 export default PaymentDetailModal;

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

@@ -11,6 +11,7 @@ interface ExtendedPaymentOptionsModuleProps extends PaymentOptionsModuleProps {
     title?: string;
     onClick?: (method: ExtendedPaymentMethod) => void;
     disabled?: boolean;
+    showCashPayment?: boolean;
 }
-declare function PaymentOptionsModule({ amountSymbol, orderInfo, onClick, paymentMethods, customAmount, title, disabled, }: ExtendedPaymentOptionsModuleProps): JSX.Element;
+declare function PaymentOptionsModule({ amountSymbol, orderInfo, onClick, paymentMethods, customAmount, title, disabled, showCashPayment, }: ExtendedPaymentOptionsModuleProps): JSX.Element;
 export default PaymentOptionsModule;

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

@@ -18,11 +18,6 @@ import checkoutLocales from "../../locales";
 
 // 扩展 PaymentOptionsModule Props 接口
 
-// import CashIcon from './icons/cash.svg';
-// import CreditCardIcon from './icons/credit_card.svg';
-// import CustomIcon from './icons/custom.svg';
-// import EftposIcon from './icons/eftpos.png';
-
 var SHOW_METHODS_CODE = ['EFTPOS_LINKLY', 'EFTPOS', 'EFTPOS_TYRO', 'EFTPOS_WINDCAVE', 'EFTPOS_PAYO'];
 function PaymentOptionsModule(_ref) {
   var _context$appHelper, _context$appHelper$ge, _context$appHelper$ge2, _context$appHelper$ut;
@@ -34,7 +29,9 @@ function PaymentOptionsModule(_ref) {
     customAmount = _ref.customAmount,
     title = _ref.title,
     _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$showCashPayment = _ref.showCashPayment,
+    showCashPayment = _ref$showCashPayment === void 0 ? false : _ref$showCashPayment;
   var context = useEngineContext();
 
   // 初始化国际化
@@ -92,32 +89,47 @@ function PaymentOptionsModule(_ref) {
     handlePaymentClick = _useDebounceFn.run;
   var renderPaymentIcon = function renderPaymentIcon(method) {
     if (method.code === 'EFTPOS') {
-      return /*#__PURE__*/React.createElement(Iconfont, {
-        type: "pisell2-credit-card-02",
+      return /*#__PURE__*/React.createElement("div", {
+        className: classnames('payment-options-module-icon-container'),
+        style: {
+          background: '#FE8279'
+        }
+      }, /*#__PURE__*/React.createElement(Iconfont, {
+        type: "pisell2-credit",
         style: {
-          fontSize: '36px',
-          color: '#7F56DA'
+          fontSize: '26px',
+          color: '#ffffff'
         }
-      });
+      }));
     }
     switch (String(method.type)) {
       case 'credit-card':
       case 'eftpos':
-        return /*#__PURE__*/React.createElement(Iconfont, {
-          type: "pisell2-credit-card-02",
+        return /*#__PURE__*/React.createElement("div", {
+          className: classnames('payment-options-module-icon-container'),
+          style: {
+            background: '#FE8279'
+          }
+        }, /*#__PURE__*/React.createElement(Iconfont, {
+          type: "pisell2-credit",
           style: {
-            fontSize: '36px',
-            color: '#7F56DA'
+            fontSize: '26px',
+            color: '#ffffff'
           }
-        });
+        }));
       default:
-        return /*#__PURE__*/React.createElement(Iconfont, {
-          type: "pisell2-a-wallet-021",
+        return /*#__PURE__*/React.createElement("div", {
+          className: classnames('payment-options-module-icon-container'),
+          style: {
+            background: '#D277E4'
+          }
+        }, /*#__PURE__*/React.createElement(Iconfont, {
+          type: "pisell2-custom",
           style: {
-            fontSize: '36px',
-            color: '#7F56DA'
+            fontSize: '26px',
+            color: '#ffffff'
           }
-        });
+        }));
     }
   };
   return /*#__PURE__*/React.createElement("div", {
@@ -131,18 +143,21 @@ function PaymentOptionsModule(_ref) {
   }, /*#__PURE__*/React.createElement(ScrollableList, {
     height: "100%" // 占满剩余空间
     ,
-    maxHeight: 400,
+    maxHeight: 330,
     gradientColor: "rgba(139, 92, 246, 0.1)",
     gradientHeight: 50,
-    columnCount: 1,
+    columnCount: showCashPayment ? 1 : 2,
     rowGap: 7,
+    columnGap: 8,
     containerStyle: {
       width: '100%',
       flex: 1,
       // 使用flex来占用剩余空间
       minHeight: 0,
       // 允许缩小
-      position: 'relative' // 确保定位上下文
+      position: 'relative',
+      // 确保定位上下文
+      paddingBottom: 8
     }
   }, filteredPaymentMethods.map(function (method) {
     return /*#__PURE__*/React.createElement("button", {
@@ -171,7 +186,7 @@ function PaymentOptionsModule(_ref) {
       className: classnames('payment-options-module-surcharge-text')
     }, getText('pisell2.payment-options.surcharge-label', 'Surcharge'), ":", formatAmount(calculateSurcharge(method), 2, amountSymbol))))), /*#__PURE__*/React.createElement("div", {
       className: classnames('payment-options-module-payment-method-right')
-    }, /*#__PURE__*/React.createElement("div", {
+    }, method.code !== 'EFTPOS' && method.type !== 'eftpos' && /*#__PURE__*/React.createElement("div", {
       className: classnames('payment-options-module-amount', 'payment-options-module-theme-color')
     }, formatAmount(calculateTotalAmount(method), 2, amountSymbol)), /*#__PURE__*/React.createElement("div", {
       className: classnames('payment-options-module-selection-button', {

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

@@ -34,10 +34,10 @@
 /* 支付方式项样式 */
 .payment-options-module-payment-method-item {
   width: 100%;
-  height: 72px;
-  padding: 14px;
+  height: 62px;
+  padding: 8px 16px;
   background: white;
-  border-radius: 16px;
+  border-radius: 8px;
   border: 1px var(--theme-color, #7f56da) solid;
   cursor: pointer;
   justify-content: space-between;
@@ -118,7 +118,7 @@
 /* 选择按钮禁用状态样式 */
 .payment-options-module-selection-button-disabled {
   color: #D0D5DD;
-  
+
   .iconfont {
     color: #D0D5DD !important;
   }
@@ -197,7 +197,12 @@
 
 /* PaymentIcon 样式 */
 .payment-options-module-icon-container {
-  width: 40px;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   img {
     width: 100%;
   }
@@ -252,4 +257,4 @@
     color: #101828;
     /* 标题保持正常颜色 */
   }
-}
+}

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

@@ -21,16 +21,20 @@ interface ShowPaymentResultToastConfig {
     onCountdownComplete?: () => void;
     /** 自定义关闭回调 */
     onClose?: () => void;
+    /** 是否显示右上角关闭按钮 */
+    closable?: boolean;
 }
 interface PaymentResultToastContextType {
     /** 显示成功弹窗 */
-    showSuccess: (config: Omit<ShowPaymentResultToastConfig, 'statusClassName'>) => void;
+    showSuccess: (config: Omit<ShowPaymentResultToastConfig, 'statusClassName'>) => string;
     /** 显示失败弹窗 */
-    showFailed: (config: Omit<ShowPaymentResultToastConfig, 'statusClassName'>) => void;
+    showFailed: (config: Omit<ShowPaymentResultToastConfig, 'statusClassName'>) => string;
     /** 显示钱包通行证失败弹窗 */
-    showWalletPassFailed: (config: Omit<ShowPaymentResultToastConfig, 'statusClassName'>) => void;
+    showWalletPassFailed: (config: Omit<ShowPaymentResultToastConfig, 'statusClassName'>) => string;
+    /** 显示部分支付弹窗 */
+    showPartiallyPaid: (config: Omit<ShowPaymentResultToastConfig, 'statusClassName'>) => string;
     /** 显示自定义状态弹窗 */
-    showToast: (config: ShowPaymentResultToastConfig) => void;
+    showToast: (config: ShowPaymentResultToastConfig) => string;
     /** 关闭弹窗 */
     closeToast: () => void;
     /** 是否正在显示弹窗 */
@@ -40,9 +44,38 @@ 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;
+declare class GlobalToastManager {
+    private instances;
+    private nextId;
+    private readonly TOAST_HEIGHT;
+    private readonly TOAST_MARGIN;
+    private readonly BOTTOM_OFFSET;
+    private readonly LEFT_OFFSET;
+    private cachedBottomOffset;
+    private cachedCenterOffset;
+    private tillButton;
+    setTillButton(tillButton: any): void;
+    private generateId;
+    private calculateAndCacheBottomOffset;
+    private calculateAndCacheCenterOffset;
+    private resetBottomOffsetCache;
+    private calculateBottomPosition;
+    private updatePositions;
+    addToast(config: ShowPaymentResultToastConfig): string;
+    removeToast(id: string): void;
+    clearAll(): void;
+    getCount(): number;
+    initializeResizeListener(): () => void;
+}
+declare const globalToastManager: GlobalToastManager;
+export declare const showPaymentResultToastSuccess: (config: Omit<ShowPaymentResultToastConfig, 'statusClassName'>) => Promise<string>;
+export declare const showPaymentResultToastFailed: (config: Omit<ShowPaymentResultToastConfig, 'statusClassName'>) => Promise<string>;
+export declare const showPaymentResultToastWalletPassFailed: (config: Omit<ShowPaymentResultToastConfig, 'statusClassName'>) => Promise<string>;
+export declare const showPaymentResultToastPartiallyPaid: (config: Omit<ShowPaymentResultToastConfig, 'statusClassName'>) => Promise<string>;
+export declare const showPaymentResultToast: (config: ShowPaymentResultToastConfig) => Promise<string>;
+export declare const closePaymentResultToast: (id?: string) => void;
+export declare const clearAllPaymentResultToasts: () => void;
+export declare const getPaymentResultToastCount: () => number;
 export type { ShowPaymentResultToastConfig, PaymentResultToastContextType };
+export declare const setTillButton: (tillButton: any) => void;
+export { globalToastManager };