@pisell/private-materials 6.7.6 → 6.7.8

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

@@ -0,0 +1,3 @@
+import React from "react";
+declare const PaymentPlugin: () => React.JSX.Element;
+export default PaymentPlugin;

package/es/components/{systemSettings/registry/components/GroupModal.js → checkout/PaymentPlugin.js}

@@ -8,153 +8,192 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import React, { useEffect } from 'react';
-import { Drawer, Form, Input, Space } from 'antd';
-import { Button, BaseTranslation } from '@pisell/materials';
-import { locales } from '@pisell/utils';
-import localesData from "../locales";
+import { useRef, useEffect, useState } from "react";
+import { Button } from "antd";
+import { CloseOutlined } from "@ant-design/icons";
+import useModal from "../../hooks/useModal";
+import Checkout from "./content";
+import { locales } from "@pisell/utils";
+import checkoutLocales from "./locales";
+import useEngineContext from "../../hooks/useEngineContext";
+import React from "react";
 
-// 创建本地的 getText 函数
-var getText = function getText(key) {
-  // 先尝试使用 locales.getText，如果没有找到再使用本地数据
-  var globalText = locales.getText(key);
-  if (globalText !== key) {
-    return globalText;
-  }
+// 添加样式来覆盖Modal的默认padding
+var modalStyle = document.createElement('style');
+modalStyle.textContent = "\n  :where(.payment-modal-wrapper) .ant-modal .ant-modal-content,\n  .payment-modal-wrapper .ant-modal .ant-modal-content,\n  .payment-modal-wrapper .ant-modal-content {\n    padding: 12px 36px 36px 36px !important;\n  }\n";
+if (!document.querySelector('.payment-modal-style')) {
+  modalStyle.className = 'payment-modal-style';
+  document.head.appendChild(modalStyle);
+}
+var PaymentPlugin = function PaymentPlugin() {
+  var _context$appHelper;
+  var context = useEngineContext();
+  var _context$appHelper$ut = (_context$appHelper = context.appHelper) === null || _context$appHelper === void 0 ? void 0 : _context$appHelper.utils,
+    pisellos = _context$appHelper$ut.pisellos;
+  var paymentRef = useRef();
+  var callback = useRef();
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    totalAmount = _useState2[0],
+    setTotalAmount = _useState2[1];
+  // 创建本地翻译函数，优先使用 checkout 语言包
+  var translation = function translation(key, fallback) {
+    var _checkoutLocales;
+    var currentLang = locales.locale || 'en';
+    var checkoutText = (_checkoutLocales = checkoutLocales[currentLang]) === null || _checkoutLocales === void 0 ? void 0 : _checkoutLocales[key];
+    if (checkoutText) {
+      return checkoutText;
+    }
 
-  // 使用本地多语言数据
-  var currentLocale = locales.locale || 'zh-CN'; // 默认使用中文
-  var localeData = localesData[currentLocale] || localesData['en'] || {};
-  return localeData[key] || key;
-};
-var GroupModal = function GroupModal(_ref) {
-  var open = _ref.open,
-    type = _ref.type,
-    data = _ref.data,
-    onOk = _ref.onOk,
-    onCancel = _ref.onCancel;
-  var _Form$useForm = Form.useForm(),
-    _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
-    form = _Form$useForm2[0];
+    // 回退到全局语言包
+    return locales.getText(key) || fallback;
+  };
+  var handlePaymentComplete = function handlePaymentComplete(result) {
+    var _callback$current;
+    console.log("Payment completed:", result);
+    (_callback$current = callback.current) === null || _callback$current === void 0 || _callback$current.call(callback, result);
+    hideModal(); // 支付完成后关闭弹窗
+  };
+  var handlePaymentCancel = function handlePaymentCancel() {
+    var _callback$current2;
+    console.log("Payment cancelled");
+    hideModal();
+    (_callback$current2 = callback.current) === null || _callback$current2 === void 0 || _callback$current2.call(callback, {
+      status: "cancelled"
+    });
+  };
 
-  // 当模态框打开时，初始化表单数据
-  useEffect(function () {
-    if (open) {
-      if (type === 'edit' && data) {
-        form.setFieldsValue({
-          title: data.title,
-          code: data.code
-        });
-      } else {
-        form.resetFields();
+  // 自定义头部组件
+  var CustomHeader = function CustomHeader() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        padding: "16px 0",
+        marginBottom: "16px",
+        borderBottom: "1px solid #f0f0f0",
+        backgroundColor: "#fafafa",
+        margin: "-12px -36px 16px -36px",
+        // 扩展到modal边缘
+        paddingLeft: "36px",
+        paddingRight: "36px"
       }
-    }
-  }, [open, type, data, form]);
-
-  // 处理确认
-  var handleOk = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-      var values;
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: "12px"
+      }
+    }, "\u786C\u4EF6\u72B6\u6001"), /*#__PURE__*/React.createElement("div", null, translation("order.total"), "\uFF1A", totalAmount), /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: "8px"
+      }
+    }, /*#__PURE__*/React.createElement(Button, {
+      type: "text",
+      size: "small",
+      icon: /*#__PURE__*/React.createElement(CloseOutlined, null),
+      onClick: handlePaymentCancel,
+      style: {
+        color: "#8c8c8c",
+        border: "none",
+        boxShadow: "none"
+      }
+    })));
+  };
+  var _useModal = useModal({
+      title: null,
+      // 移除默认标题，使用自定义头部
+      children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CustomHeader, null), /*#__PURE__*/React.createElement(Checkout, {
+        paymentData: paymentRef.current,
+        moduleConfig: {
+          showWalletPass: true,
+          showCashPayment: true,
+          showAdditionalModule: true,
+          showPaymentOptions: true
+        },
+        onPaymentComplete: handlePaymentComplete,
+        onPaymentCancel: handlePaymentCancel,
+        onStatusChange: function onStatusChange(status) {
+          return console.log("Status changed:", status);
+        },
+        open_deposit: true // 开启押金选择功能
+      })),
+      width: 880,
+      // 808px 内容宽度 + 36px 左右内边距
+      destroyOnClose: true,
+      maskClosable: false,
+      footer: null,
+      // 移除默认的确定/取消按钮，让组件内部处理
+      closeIcon: null,
+      // 移除默认关闭图标，使用自定义的
+      onCancel: handlePaymentCancel,
+      wrapClassName: "payment-modal-wrapper"
+    }),
+    showModal = _useModal.showModal,
+    hideModal = _useModal.hideModal,
+    content = _useModal.content;
+  var onOpen = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(props) {
+      var checkout, _props$data, _props$data2, orderInfo;
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
-            _context.prev = 0;
-            _context.next = 3;
-            return form.validateFields();
-          case 3:
-            values = _context.sent;
-            _context.next = 6;
-            return onOk(values);
+            // 获取 checkout 模块并处理订单数据
+            checkout = pisellos.getModule("checkout");
+            if (!checkout) {
+              _context.next = 6;
+              break;
+            }
+            _context.next = 4;
+            return checkout.createLocalOrderAsync({
+              orderData: (_props$data = props.data) === null || _props$data === void 0 ? void 0 : _props$data.order_info,
+              cartSummary: (_props$data2 = props.data) === null || _props$data2 === void 0 || (_props$data2 = _props$data2.subtotal_info) === null || _props$data2 === void 0 ? void 0 : _props$data2.subTotalList,
+              autoPayment: true
+            });
+          case 4:
+            // 获取订单总金额
+            orderInfo = checkout.getCurrentOrderInfo();
+            if (orderInfo && orderInfo.totalAmount) {
+              setTotalAmount(orderInfo.totalAmount);
+            }
           case 6:
-            form.resetFields();
-            _context.next = 12;
-            break;
+            paymentRef.current = props === null || props === void 0 ? void 0 : props.data;
+            callback.current = props === null || props === void 0 ? void 0 : props.callback;
+            showModal(); // 打开弹窗
           case 9:
-            _context.prev = 9;
-            _context.t0 = _context["catch"](0);
-            console.error('Validation failed:', _context.t0);
-          case 12:
           case "end":
             return _context.stop();
         }
-      }, _callee, null, [[0, 9]]);
+      }, _callee);
     }));
-    return function handleOk() {
-      return _ref2.apply(this, arguments);
+    return function onOpen(_x) {
+      return _ref.apply(this, arguments);
     };
   }();
-
-  // 处理取消
-  var handleCancel = function handleCancel() {
-    form.resetFields();
-    onCancel();
+  var onClose = function onClose() {
+    hideModal();
   };
-  var title = locales.getText(type === 'add' ? 'registry.modal.add.group' : 'registry.modal.edit.group');
-  return /*#__PURE__*/React.createElement(Drawer, {
-    title: title,
-    open: open,
-    onClose: handleCancel,
-    width: 400,
-    destroyOnClose: true,
-    footer: /*#__PURE__*/React.createElement("div", {
-      style: {
-        textAlign: 'right'
-      }
-    }, /*#__PURE__*/React.createElement(Space, {
-      size: "small"
-    }, /*#__PURE__*/React.createElement(Button, {
-      onClick: handleCancel
-    }, locales.getText('registry.button.cancel')), /*#__PURE__*/React.createElement(Button, {
-      type: "primary",
-      onClick: handleOk
-    }, locales.getText('registry.button.save'))))
-  }, /*#__PURE__*/React.createElement(Form, {
-    form: form,
-    layout: "vertical",
-    requiredMark: true
-  }, /*#__PURE__*/React.createElement(Form.Item, {
-    name: "title",
-    label: locales.getText('registry.form.title'),
-    rules: [{
-      required: true,
-      message: locales.getText('registry.message.required')
-    }]
-  }, /*#__PURE__*/React.createElement(BaseTranslation, {
-    placeholder: locales.getText('registry.form.name.placeholder')
-  })), /*#__PURE__*/React.createElement(Form.Item, {
-    name: "code",
-    label: locales.getText('registry.form.code'),
-    rules: [{
-      required: true,
-      message: locales.getText('registry.message.required')
-    }, {
-      validator: function validator(_, value) {
-        if (!value) return Promise.resolve();
-
-        // 格式检查：只能包含小写字母、数字、点和下划线
-        if (!/^[a-z0-9\._]+$/.test(value)) {
-          return Promise.reject(new Error(getText('registry.message.code.format')));
-        }
-
-        // 开头规则检查：必须以字母开头
-        if (!/^[a-z]/.test(value)) {
-          return Promise.reject(new Error(getText('registry.message.code.start')));
-        }
-
-        // 结尾规则检查：不能以点或下划线结尾
-        if (/[\._]$/.test(value)) {
-          return Promise.reject(new Error(getText('registry.message.code.end')));
-        }
 
-        // 连续特殊字符检查：不能使用连续的点或下划线
-        if (/[\.]{2,}|[\_]{2,}/.test(value)) {
-          return Promise.reject(new Error(getText('registry.message.code.consecutive')));
-        }
-        return Promise.resolve();
-      }
-    }]
-  }, /*#__PURE__*/React.createElement(Input, {
-    placeholder: locales.getText('registry.form.code.placeholder')
-  }))));
+  /**
+   * @title: 初始化, 注入插件
+   * @description:
+   * @return {*}
+   * @Author: zhiwei.Wang
+   * @Date: 2023-09-13 09:41
+   */
+  var init = function init() {
+    var state = {
+      open: onOpen,
+      close: onClose
+    };
+    console.log("PaymentPlugin", state);
+  };
+  useEffect(function () {
+    init();
+  }, []);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, content);
 };
-export default GroupModal;
+export default PaymentPlugin;

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import './index.less';
 import { CurrentOrderInfo } from '../../types';
 interface AdditionalModuleProps {
@@ -8,8 +8,6 @@ interface AdditionalModuleProps {
     hasOrderNote?: boolean;
     disabled?: boolean;
     showCashPayment?: boolean;
-    isFullWidth?: boolean;
-    showMore?: boolean;
 }
-declare function AdditionalModule({ orderInfo, customAmount, handleButtonClick, hasOrderNote, disabled, showCashPayment, isFullWidth, showMore }: AdditionalModuleProps): JSX.Element;
+declare function AdditionalModule({ orderInfo, customAmount, handleButtonClick, hasOrderNote, disabled, showCashPayment, }: AdditionalModuleProps): React.JSX.Element;
 export default AdditionalModule;

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

@@ -18,11 +18,7 @@ function AdditionalModule(_ref) {
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     _ref$showCashPayment = _ref.showCashPayment,
-    showCashPayment = _ref$showCashPayment === void 0 ? false : _ref$showCashPayment,
-    _ref$isFullWidth = _ref.isFullWidth,
-    isFullWidth = _ref$isFullWidth === void 0 ? false : _ref$isFullWidth,
-    _ref$showMore = _ref.showMore,
-    showMore = _ref$showMore === void 0 ? true : _ref$showMore;
+    showCashPayment = _ref$showCashPayment === void 0 ? false : _ref$showCashPayment;
   // 初始化国际化
   locales.init(localeTexts, getLocale());
 
@@ -31,12 +27,6 @@ function AdditionalModule(_ref) {
     key: 'send-link',
     label: locales.getText('pisell2.text.send-link'),
     icon: /*#__PURE__*/React.createElement(LinkOutlined, null)
-  }, {
-    key: 'print-receipt',
-    label: locales.getText('pisell2.text.print-receipt'),
-    icon: /*#__PURE__*/React.createElement(Icon, {
-      type: "pisell2-printer"
-    })
   }];
   var Toast = useToast();
   return /*#__PURE__*/React.createElement("div", {
@@ -45,9 +35,9 @@ function AdditionalModule(_ref) {
     className: "additional-module-title"
   }, locales.getText('pisell2.text.others')), /*#__PURE__*/React.createElement("div", {
     className: "additional-module-buttons-container"
-  }, showCashPayment && !isFullWidth ?
+  }, showCashPayment ?
   /*#__PURE__*/
-  // Grid布局模式：两行布局（显示现金支付模块且非全宽时）
+  // Grid布局模式：两行布局（显示现金支付模块时）
   React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "additional-module-button-row"
   }, /*#__PURE__*/React.createElement(Button, {
@@ -67,14 +57,14 @@ function AdditionalModule(_ref) {
   }))), /*#__PURE__*/React.createElement(Button, {
     className: "additional-module-button-base purple-theme",
     onClick: function onClick() {
-      handleButtonClick('split-payment');
+      handleButtonClick('print-receipt');
     },
     icon: /*#__PURE__*/React.createElement(Icon, {
-      type: "pisell2-coins-01",
+      type: "pisell2-printer",
       className: "additional-module-button-icon"
     }),
     size: "large"
-  }, locales.getText('split.payment'))), /*#__PURE__*/React.createElement("div", {
+  }, locales.getText('pisell2.text.print-receipt'))), /*#__PURE__*/React.createElement("div", {
     className: "additional-module-button-row"
   }, /*#__PURE__*/React.createElement(Button, {
     className: "additional-module-button-base purple-theme",
@@ -96,7 +86,7 @@ function AdditionalModule(_ref) {
     icon: /*#__PURE__*/React.createElement(ClockCircleOutlined, {
       className: "additional-module-button-icon"
     })
-  }, locales.getText('pisell2.text.save-pay-later')), showMore && /*#__PURE__*/React.createElement(Dropdown, {
+  }, locales.getText('pisell2.text.save-pay-later')), /*#__PURE__*/React.createElement(Dropdown, {
     menu: {
       items: moreMenuItems,
       onClick: function onClick(_ref2) {
@@ -108,12 +98,6 @@ function AdditionalModule(_ref) {
           } else {
             Toast.fail(locales.getText('pisell2.text.order-no-payment-cannot-send-link'));
           }
-        } else if (key === 'print-receipt') {
-          handleButtonClick('print-receipt');
-        } else if (key === 'split-payment') {
-          handleButtonClick('split-payment');
-        } else if (key === 'print-receipt') {
-          handleButtonClick('print-receipt');
         }
       }
     },
@@ -134,29 +118,9 @@ function AdditionalModule(_ref) {
       type: "pisell2-dots-vertical",
       size: 20
     })
-  }))), !showMore && /*#__PURE__*/React.createElement("div", {
-    className: "additional-module-button-row"
-  }, /*#__PURE__*/React.createElement(Button, {
-    className: "additional-module-button-base purple-theme",
-    onClick: function onClick() {
-      handleButtonClick('send-link');
-    },
-    disabled: disabled,
-    size: "large",
-    icon: /*#__PURE__*/React.createElement(LinkOutlined, null)
-  }, locales.getText('pisell2.text.send-link')), /*#__PURE__*/React.createElement(Button, {
-    className: "additional-module-button-base purple-theme",
-    onClick: function onClick() {
-      handleButtonClick('print-receipt');
-    },
-    disabled: disabled,
-    size: "large",
-    icon: /*#__PURE__*/React.createElement(Icon, {
-      type: "pisell2-printer"
-    })
-  }, locales.getText('pisell2.text.print-receipt')))) :
+  })))) :
   /*#__PURE__*/
-  // Flex布局模式：一行布局（不显示现金支付模块或强制全宽时）
+  // Flex布局模式：一行布局（不显示现金支付模块时）
   React.createElement("div", {
     className: "additional-module-button-row"
   }, /*#__PURE__*/React.createElement(Button, {
@@ -176,14 +140,14 @@ function AdditionalModule(_ref) {
   }))), /*#__PURE__*/React.createElement(Button, {
     className: "additional-module-button-base purple-theme",
     onClick: function onClick() {
-      handleButtonClick('split-payment');
+      handleButtonClick('print-receipt');
     },
     size: "large",
     icon: /*#__PURE__*/React.createElement(Icon, {
-      type: "pisell2-coins-01",
+      type: "pisell2-printer",
       className: "additional-module-button-icon"
     })
-  }, locales.getText('split.payment')), /*#__PURE__*/React.createElement(Button, {
+  }, locales.getText('pisell2.text.print-receipt')), /*#__PURE__*/React.createElement(Button, {
     className: "additional-module-button-base purple-theme",
     onClick: function onClick() {
       handleButtonClick('manual-discount');
@@ -215,10 +179,6 @@ function AdditionalModule(_ref) {
           } else {
             Toast.fail(locales.getText('pisell2.text.order-no-payment-cannot-send-link'));
           }
-        } else if (key === 'split-payment') {
-          handleButtonClick('split-payment');
-        } else if (key === 'print-receipt') {
-          handleButtonClick('print-receipt');
         }
       }
     },

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

@@ -1,6 +1,6 @@
-/// <reference types="react" />
 import './index.less';
 import { CurrentOrderInfo } from '../../types';
+import React from 'react';
 interface AmountSummaryProps {
     amountSymbol?: string;
     orderInfo?: CurrentOrderInfo;
@@ -22,5 +22,5 @@ interface AmountSummaryProps {
     totalAmount?: number;
 }
 export declare type WalletBalanceConfirmAction = 'cancel' | 'save-without-deduct' | 'apply-deduct-now';
-declare function AmountSummary({ amountSymbol, orderInfo, open_deposit, customAmount, balanceDueAmount, clientInfo, onAmountChange, onDepositStatusChange, onBalanceDueAmountClick, onConfirm, paymentItems, cartData, walletPassData, totalAmount, }: AmountSummaryProps): JSX.Element;
+declare function AmountSummary({ amountSymbol, orderInfo, open_deposit, customAmount, balanceDueAmount, clientInfo, onAmountChange, onDepositStatusChange, onBalanceDueAmountClick, onConfirm, paymentItems, cartData, walletPassData, totalAmount, }: AmountSummaryProps): React.JSX.Element;
 export default AmountSummary;

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

@@ -9,7 +9,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { useState, useEffect, useMemo } from 'react';
-import { Button, Dropdown } from 'antd';
+import { Button, Dropdown, Popover } from 'antd';
 import { CheckCircleOutlined, PieChartOutlined } from '@ant-design/icons';
 import { Edit05 } from '@pisell/icon';
 import { PisellModal } from '@pisell/materials';
@@ -18,8 +18,7 @@ import Decimal from 'decimal.js';
 import checkoutLocales from "../../locales";
 import PaymentDetailModal from "../PaymentDetailModal";
 import PisellPriceKeyboardPopover from "../../../../pro/pisellSimplePriceKeyboardPopover";
-// import { PaymentKeyboard } from '../../../../pro/priceKeyboard';
-
+import { PaymentKeyboard } from "../../../../pro/priceKeyboard";
 import "./index.less";
 import classNames from 'classnames';
 import useEngineContext from "../../../../hooks/useEngineContext";
@@ -504,12 +503,12 @@ function AmountSummary(_ref2) {
     var syncedVoucherAmount = paymentItems === null || paymentItems === void 0 ? void 0 : paymentItems.reduce(function (acc, item) {
       // 如果当前是普通支付，则减去order_payment_type不为 deposit的支付项
       // 如果当前是定金支付，则减去order_payment_type为 deposit的支付项
-      if ((item.isSynced || item.voucher_id) && (paymentType === 'regular' && item.order_payment_type !== 'deposit' || paymentType === 'deposit' && item.order_payment_type === 'deposit')) {
+      if (item.isSynced && (paymentType === 'regular' && item.order_payment_type !== 'deposit' || paymentType === 'deposit' && item.order_payment_type === 'deposit')) {
         return acc.plus(item.amount).plus(Number(item.rounding_amount) > 0 ? 0 : item.rounding_amount || 0);
       }
       return acc;
     }, new Decimal(0)).toNumber();
-    balanceDecimal = new Decimal(Math.abs(balanceDecimal.minus(new Decimal(syncedVoucherAmount)).toNumber()));
+    balanceDecimal = balanceDecimal.minus(syncedVoucherAmount);
     // if (walletPassData?.selectedDiscountList && walletPassData.selectedDiscountList.length > 0) {
     //   walletPassData?.availableDiscountList?.forEach((discountItem: any) => {
     //     discountItem.appliedProductDetails?.forEach((productDetail: any) => {
@@ -640,9 +639,8 @@ function AmountSummary(_ref2) {
     return balanceDueAmount !== customAmount && Number(balanceDueAmount) > 0 && Number(customAmount) > 0;
   }, [customAmount, balanceDueAmount]);
   var handleChangeDepositAmount = function handleChangeDepositAmount(value) {
-    var valueStr = String(value);
-    console.log('handleChangeDepositAmount', valueStr);
-    checkoutModule === null || checkoutModule === void 0 || checkoutModule.setDepositAmountAsync(valueStr);
+    console.log('handleChangeDepositAmount', value);
+    checkoutModule === null || checkoutModule === void 0 || checkoutModule.setDepositAmountAsync(value);
   };
   var hasDepositPayment = useMemo(function () {
     return paymentItems === null || paymentItems === void 0 ? void 0 : paymentItems.some(function (item) {
@@ -780,7 +778,76 @@ function AmountSummary(_ref2) {
     hideDecimalForWholeNumbers: false,
     useThousandsSeparator: true,
     showCurrencySymbol: true
-  })))), /*#__PURE__*/React.createElement(PisellModal, {
+  })))), !shouldShowConfirmMode() && (showCancelSplitPayment ? /*#__PURE__*/React.createElement(Button, {
+    className: classNames('cancel-split-payment-button'),
+    onClick: function onClick() {
+      return onAmountChange === null || onAmountChange === void 0 ? void 0 : onAmountChange(balanceDueAmount);
+    }
+  }, getText('split.cancel') || '取消部\n分支付') : /*#__PURE__*/React.createElement(Popover, {
+    content: /*#__PURE__*/React.createElement("div", {
+      onClick: function onClick(e) {
+        return e.stopPropagation();
+      }
+    }, /*#__PURE__*/React.createElement(PaymentKeyboard
+    // 原始值：此支付阶段的待支付金额，reset时还原为此值
+    , {
+      paymentOriginalValue: balanceDueAmount,
+      paymentDefaultValue: String(customAmount || 0),
+      enableExceedMaxAmount: false,
+      payment: {
+        enable: true
+      },
+      surcharge: {
+        enable: false
+      },
+      surchargeDefaultValue: {
+        percent: '0',
+        fixed: '0'
+      },
+      selectType: "light",
+      onChange: function onChange(value) {
+        console.log(value);
+      },
+      doneText: getText('confirm'),
+      onPay: function onPay(args) {
+        console.log(args);
+        // 处理支付逻辑
+        setIsKeyboardVisible(false);
+        handleKeyboardConfirm(args.amount);
+      }
+    })),
+    trigger: "click",
+    open: isKeyboardVisible,
+    onOpenChange: setIsKeyboardVisible,
+    placement: "bottom",
+    overlayClassName: "payment-keyboard-popover",
+    arrow: true,
+    destroyTooltipOnHide: true
+  }, /*#__PURE__*/React.createElement(Button, {
+    className: classNames('split-payment-button')
+  }, getText('split.payment') || '拆分支付')))
+  // <PisellPriceKeyboardPopover
+  //   value={(() => {
+  //     try {
+  //       return new Decimal(currentAmount || '0').toNumber();
+  //     } catch {
+  //       return 0;
+  //     }
+  //   })()}
+  //   // onChange={handleKeyboardConfirm}
+  //   onConfirm={handleKeyboardConfirm}
+  //   // onCancel={handleKeyboardCancel}
+  //   showCurrencySymbol={true}
+  //   useThousandsSeparator={false}
+  //   selectType="dark"
+  //   overlayClassName="amount-summary-keyboard-popover"
+  // >
+  //   {/* 右侧： 拆分支付按钮 */}
+  //   <Button className={classNames('split-payment-button')}>
+  //     {getText('split.payment') || '拆分支付'}
+  //   </Button>
+  // </PisellPriceKeyboardPopover>
+  , /*#__PURE__*/React.createElement(PisellModal, {
     open: isPaymentDetailOpen,
     onCancel: handlePaymentDetailClose,
     footer: null,

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

@@ -226,7 +226,7 @@
     border-radius: 16px;
     padding: 0 16px 0 16px;
     color: #1a1a1a;
-    width: 400px;
+    width: 350px;
     min-width: 200px;
     height: 80px;
     display: flex;
@@ -248,6 +248,7 @@
 
   .balance-due-label {
     font-size: 16px;
+    color: #7f56da;
     font-weight: 400;
     line-height: 1.5;
     margin-bottom: 4px;
@@ -255,7 +256,7 @@
 
   .balance-due-amount {
     font-size: 14px;
-    font-weight: 600;
+    font-weight: 400;
     color: #7f56da;
     line-height: 0.75;
     text-decoration: underline;
@@ -271,13 +272,13 @@
   .pay-text {
     font-size: 16px;
     font-weight: 500;
+    color: #7f56da;
     letter-spacing: 0.09375em;
-    margin-top: 12px;
   }
 
   .pay-amount {
-    font-size: 36px;
-    font-weight: 600;
+    font-size: 32px;
+    font-weight: 400;
     color: #1e1830;
     line-height: 0.75;
   }