@pisell/private-materials 6.5.4 → 6.5.6

package/es/pro/priceKeyboard/components/discountKeyboard/locales.js

@@ -0,0 +1,44 @@
+export default {
+  en: {
+    // Discount Keyboard Module
+    'discount-keyboard-price-override': 'Price Override',
+    'discount-keyboard-discount': 'Discount',
+    'discount-keyboard-amount': 'Amount',
+    'discount-keyboard-percentage': 'Percentage',
+    'discount-keyboard-max-discount': 'Max',
+    'discount-keyboard-discount-amount': 'Discount Amount',
+    'discount-keyboard-total': 'Total',
+    'discount-keyboard-payable': 'Payable',
+    'discount-keyboard-reset': 'Reset',
+    'discount-keyboard-done': 'Done',
+    'discount-keyboard-pay': 'Pay'
+  },
+  'zh-CN': {
+    // 折扣键盘模块
+    'discount-keyboard-price-override': '一口价',
+    'discount-keyboard-discount': '折扣',
+    'discount-keyboard-amount': '金额',
+    'discount-keyboard-percentage': '百分比',
+    'discount-keyboard-max-discount': '最高',
+    'discount-keyboard-discount-amount': '折扣金额',
+    'discount-keyboard-total': '待支付金额',
+    'discount-keyboard-payable': '需支付金额',
+    'discount-keyboard-reset': '重置',
+    'discount-keyboard-done': '确认',
+    'discount-keyboard-pay': '支付'
+  },
+  'zh-HK': {
+    // 折扣鍵盤模組
+    'discount-keyboard-price-override': '一口價',
+    'discount-keyboard-discount': '折扣',
+    'discount-keyboard-amount': '金額',
+    'discount-keyboard-percentage': '百分比',
+    'discount-keyboard-max-discount': '最高',
+    'discount-keyboard-discount-amount': '折扣金額',
+    'discount-keyboard-total': '待支付金額',
+    'discount-keyboard-payable': '需支付金額',
+    'discount-keyboard-reset': '重置',
+    'discount-keyboard-done': '確認',
+    'discount-keyboard-pay': '支付'
+  }
+};

package/es/pro/priceKeyboard/components/discountKeyboard/types.d.ts

@@ -0,0 +1,17 @@
+export interface DiscountKeyboardBaseProps {
+    /** 金额符 */
+    amountSymbol?: string;
+    /** 初始值，多用于展示及计算，不同于原始值 */
+    defaultValue?: string | number;
+    /** 原始值，多用于重置 */
+    originalValue?: string | number;
+    placeholder?: string;
+    doneText?: string;
+    resetText?: string;
+    /** 键盘主题 */
+    selectType?: 'light' | 'dark';
+    onEnter?: (val: string) => void;
+    onReset?: () => void;
+    onChange?: (val: string) => void;
+    enableExceedMaxAmount?: boolean;
+}

package/es/pro/priceKeyboard/components/discountKeyboard/types.js

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

package/es/pro/priceKeyboard/components/paymentKeyboard/index.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { PaymentKeyboardBaseProps } from './types';
+import './index.less';
+interface PaymentKeyboardProps extends PaymentKeyboardBaseProps {
+    containerProps?: {
+        renderType: 'modal' | 'popover';
+        open: boolean;
+        [key: string]: any;
+    };
+}
+export declare const PaymentKeyboard: (props: PaymentKeyboardProps) => JSX.Element | null;
+export default PaymentKeyboard;

package/es/pro/priceKeyboard/components/paymentKeyboard/index.js

@@ -0,0 +1,444 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["containerProps", "children"],
+  _excluded2 = ["renderType", "open"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+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, { useCallback, useMemo, useState, useId, useEffect } from 'react';
+import Decimal from 'decimal.js';
+//@ts-ignore
+import { locales } from '@pisell/utils';
+//@ts-ignore
+import { pick, merge } from 'lodash';
+import { Segmented, Popover } from 'antd';
+import { Keyboard, VirtualInput, PisellText, PisellModal } from '@pisell/materials';
+import useRightItems from "../../hooks/rightItems";
+import useKeyActions from "../../hooks/keyActions";
+import { useControllableValue } from 'ahooks';
+import localeTexts from "./locales";
+import useEngineContext from "../../../../hooks/useEngineContext";
+import { setKeyboardTheme } from "../../utils";
+import "./index.less";
+
+// 常量定义
+var KEYS = {
+  PAYMENT: 'payment',
+  SURCHARGE: 'surcharge',
+  PERCENT: 'percent',
+  FIXED: 'fixed'
+};
+var defaultConfig = {
+  payment: {
+    enable: true
+  },
+  surcharge: {
+    enable: true
+  }
+};
+var PaymentKeyboardBase = function PaymentKeyboardBase(props) {
+  var _context$appHelper$ut, _context$appHelper$ut2, _context$appHelper$ut3, _context$appHelper$ut4, _mergedConfig$surchar2;
+  var context = useEngineContext();
+  var getData = context.appHelper.utils.getData;
+  var amountSymbol = props.amountSymbol || (getData === null || getData === void 0 ? void 0 : getData('shop_symbol')) || '$';
+  locales.init(localeTexts, ((_context$appHelper$ut = context.appHelper.utils) === null || _context$appHelper$ut === void 0 || (_context$appHelper$ut2 = _context$appHelper$ut.getApp) === null || _context$appHelper$ut2 === void 0 || (_context$appHelper$ut2 = _context$appHelper$ut2.call(_context$appHelper$ut)) === null || _context$appHelper$ut2 === void 0 || (_context$appHelper$ut2 = _context$appHelper$ut2.locales) === null || _context$appHelper$ut2 === void 0 || (_context$appHelper$ut3 = _context$appHelper$ut2.getLocale) === null || _context$appHelper$ut3 === void 0 ? void 0 : _context$appHelper$ut3.call(_context$appHelper$ut2)) || ((_context$appHelper$ut4 = context.appHelper.utils) === null || _context$appHelper$ut4 === void 0 || (_context$appHelper$ut4 = _context$appHelper$ut4.storage) === null || _context$appHelper$ut4 === void 0 ? void 0 : _context$appHelper$ut4.get('umi_locale')) || 'en');
+  var _props$enableExceedMa = props.enableExceedMaxAmount,
+    enableExceedMaxAmount = _props$enableExceedMa === void 0 ? false : _props$enableExceedMa,
+    paymentOriginalValue = props.paymentOriginalValue,
+    surchargeDefaultValue = props.surchargeDefaultValue,
+    doneText = props.doneText,
+    resetText = props.resetText,
+    onReset = props.onReset,
+    onPay = props.onPay,
+    _props$selectType = props.selectType,
+    selectType = _props$selectType === void 0 ? 'light' : _props$selectType;
+  var uniqueId = useId();
+  var uniqueKeyboardId = "virtual-keyboard-".concat(uniqueId.replace(/:/g, '-'));
+  // 设置主题
+  useEffect(function () {
+    setKeyboardTheme(selectType);
+  }, [selectType]);
+  var _useState = useState(function () {
+      var _props$payment, _props$surcharge;
+      if ((_props$payment = props.payment) !== null && _props$payment !== void 0 && _props$payment.enable) {
+        return KEYS.PAYMENT;
+      }
+      if ((_props$surcharge = props.surcharge) !== null && _props$surcharge !== void 0 && _props$surcharge.enable) {
+        return KEYS.SURCHARGE;
+      }
+      return KEYS.PAYMENT;
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    activeKey = _useState2[0],
+    setActiveKey = _useState2[1];
+  var _useState3 = useState(KEYS.PERCENT),
+    _useState4 = _slicedToArray(_useState3, 2),
+    focusedInput = _useState4[0],
+    setFocusedInput = _useState4[1];
+  var _useControllableValue = useControllableValue(props, {
+      defaultValuePropName: 'paymentDefaultValue',
+      valuePropName: 'paymentValue'
+    }),
+    _useControllableValue2 = _slicedToArray(_useControllableValue, 2),
+    internalPaymentValue = _useControllableValue2[0],
+    setInternalPaymentValue = _useControllableValue2[1];
+  var _useControllableValue3 = useControllableValue(props, {
+      defaultValue: surchargeDefaultValue || {
+        percent: '',
+        fixed: ''
+      },
+      valuePropName: 'surchargeValue'
+    }),
+    _useControllableValue4 = _slicedToArray(_useControllableValue3, 2),
+    internalSurchargeValue = _useControllableValue4[0],
+    setInternalSurchargeValue = _useControllableValue4[1];
+  // 记录是否是第一次输入
+  var _useState5 = useState(_defineProperty(_defineProperty(_defineProperty({}, KEYS.PAYMENT, true), KEYS.PERCENT, true), KEYS.FIXED, true)),
+    _useState6 = _slicedToArray(_useState5, 2),
+    firstInputStatus = _useState6[0],
+    setFirstInputStatus = _useState6[1];
+  var _onReset = useCallback(function () {
+    if (activeKey === KEYS.PAYMENT) {
+      setInternalPaymentValue(paymentOriginalValue || '');
+      setFirstInputStatus(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, KEYS.PAYMENT, true));
+      });
+    } else if (activeKey === KEYS.SURCHARGE) {
+      if (focusedInput === KEYS.PERCENT) {
+        setInternalSurchargeValue(_objectSpread(_objectSpread({}, internalSurchargeValue || {}), {}, {
+          percent: (surchargeDefaultValue === null || surchargeDefaultValue === void 0 ? void 0 : surchargeDefaultValue.percent) || ''
+        }));
+        setFirstInputStatus(function (prev) {
+          return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, KEYS.PERCENT, true));
+        });
+      } else {
+        setInternalSurchargeValue(_objectSpread(_objectSpread({}, internalSurchargeValue || {}), {}, {
+          fixed: (surchargeDefaultValue === null || surchargeDefaultValue === void 0 ? void 0 : surchargeDefaultValue.fixed) || ''
+        }));
+        setFirstInputStatus(function (prev) {
+          return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, KEYS.FIXED, true));
+        });
+      }
+    }
+    onReset === null || onReset === void 0 || onReset();
+  }, [activeKey, onReset, focusedInput, paymentOriginalValue, surchargeDefaultValue]);
+  var currentValue = useMemo(function () {
+    if (activeKey === KEYS.PAYMENT) {
+      return internalPaymentValue;
+    }
+    if (activeKey === KEYS.SURCHARGE) {
+      if (focusedInput === KEYS.FIXED) {
+        return (internalSurchargeValue || {}).fixed || '';
+      }
+      return (internalSurchargeValue || {}).percent || '';
+    }
+    return '';
+  }, [activeKey, focusedInput, internalPaymentValue, internalSurchargeValue]);
+  var _max = useMemo(function () {
+    if (activeKey === KEYS.SURCHARGE && focusedInput === KEYS.PERCENT) {
+      return 100;
+    }
+    return undefined;
+  }, [activeKey, focusedInput]);
+  var _mode = useMemo(function () {
+    if (activeKey === KEYS.PAYMENT) {
+      return firstInputStatus.payment ? 'replace' : 'append';
+    } else {
+      return firstInputStatus[focusedInput] ? 'replace' : 'append';
+    }
+  }, [firstInputStatus, activeKey, focusedInput]);
+  var _useKeyActions = useKeyActions({
+      onEnter: function onEnter() {
+        if (!enableExceedMaxAmount && new Decimal(internalPaymentValue).greaterThan(maxAmount)) {
+          return;
+        }
+        onPay === null || onPay === void 0 || onPay({
+          surcharge: internalSurchargeValue,
+          amount: internalPaymentValue
+        });
+      },
+      onReset: _onReset,
+      onChange: function onChange(v) {
+        if (activeKey === KEYS.PAYMENT) {
+          setInternalPaymentValue(v);
+          setFirstInputStatus(function (prev) {
+            return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, KEYS.PAYMENT, false));
+          });
+        } else if (activeKey === KEYS.SURCHARGE) {
+          if (focusedInput === KEYS.FIXED) {
+            setInternalSurchargeValue(_objectSpread(_objectSpread({}, internalSurchargeValue || {}), {}, {
+              fixed: v
+            }));
+            setFirstInputStatus(function (prev) {
+              return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, KEYS.FIXED, false));
+            });
+          } else {
+            setInternalSurchargeValue(_objectSpread(_objectSpread({}, internalSurchargeValue || {}), {}, {
+              percent: v
+            }));
+            setFirstInputStatus(function (prev) {
+              return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, KEYS.PERCENT, false));
+            });
+          }
+        }
+      },
+      max: _max,
+      value: currentValue,
+      scale: 2,
+      mode: _mode
+    }),
+    handleChange = _useKeyActions.handleChange;
+  var rightItems = useRightItems({
+    rightItemsStyle: {},
+    doneText: doneText || locales.getText('payment-keyboard-pay'),
+    resetText: resetText || locales.getText('payment-keyboard-reset')
+  });
+  var mergedConfig = useMemo(function () {
+    return merge({}, defaultConfig, pick(props, ['payment', 'surcharge']));
+  }, [props]);
+  var options = useMemo(function () {
+    var _mergedConfig$payment, _mergedConfig$surchar;
+    var opts = [];
+    if ((_mergedConfig$payment = mergedConfig.payment) !== null && _mergedConfig$payment !== void 0 && _mergedConfig$payment.enable) {
+      opts.push({
+        label: locales.getText('payment-keyboard-payment'),
+        value: KEYS.PAYMENT
+      });
+    }
+    if ((_mergedConfig$surchar = mergedConfig.surcharge) !== null && _mergedConfig$surchar !== void 0 && _mergedConfig$surchar.enable) {
+      opts.push({
+        label: locales.getText('payment-keyboard-surcharge'),
+        value: KEYS.SURCHARGE
+      });
+    }
+    return opts;
+  }, [mergedConfig]);
+  var amountFormatter = function amountFormatter(amount) {
+    if (amount === '' || amount === undefined) {
+      return '';
+    }
+    return "".concat(amountSymbol).concat(amount);
+  };
+
+  // 最大支付金额 balanceDueAmount
+  var maxAmount = props.paymentOriginalValue || 0;
+
+  // 手续费 根据当前支付金额计算 （输入框内金额）
+  var surchargeFee = useMemo(function () {
+    return new Decimal(internalPaymentValue || 0).mul(new Decimal((internalSurchargeValue === null || internalSurchargeValue === void 0 ? void 0 : internalSurchargeValue.percent) || 0).div(100)).plus(new Decimal((internalSurchargeValue === null || internalSurchargeValue === void 0 ? void 0 : internalSurchargeValue.fixed) || 0)).toNumber();
+  }, [internalPaymentValue, internalSurchargeValue]);
+
+  // 输入框内金额 加上手续费 （应付总额 ）
+  var totalAmountDue = useMemo(function () {
+    return new Decimal(internalPaymentValue || 0).plus(new Decimal(surchargeFee || 0)).toNumber();
+  }, [internalPaymentValue, surchargeFee]);
+
+  // 最大支付金额 减去 输入框内金额 （剩余待支付）
+  var remainingAmount = useMemo(function () {
+    return new Decimal(maxAmount || 0).minus(new Decimal(internalPaymentValue || 0)).toNumber();
+  }, [maxAmount, internalPaymentValue]);
+  var renderBottomContent = function renderBottomContent() {
+    if (enableExceedMaxAmount) {
+      // remainingAmount 为负值了，说明输入的金额大于应付金额，找零
+      if (new Decimal(remainingAmount).lessThan(0)) {
+        return /*#__PURE__*/React.createElement("div", {
+          className: "pisell-pro-price-keyboard-input-tip ellipsis"
+        }, locales.getText('payment-keyboard-change-due'), ":", ' ', /*#__PURE__*/React.createElement(PisellText.Amount, {
+          hideDecimalForWholeNumbers: false,
+          precision: 2,
+          value: Math.abs(remainingAmount)
+        }));
+      } else {
+        return /*#__PURE__*/React.createElement("div", {
+          className: "pisell-pro-price-keyboard-input-tip ellipsis"
+        }, locales.getText('payment-keyboard-remaining'), ":", ' ', /*#__PURE__*/React.createElement(PisellText.Amount, {
+          hideDecimalForWholeNumbers: false,
+          precision: 2,
+          value: remainingAmount
+        }));
+      }
+    } else {
+      return (
+        /*#__PURE__*/
+        // 不允许输入金额超过最大金额
+        React.createElement("div", {
+          className: "pisell-pro-price-keyboard-input-tip"
+        }, /*#__PURE__*/React.createElement("span", {
+          style: {
+            color: remainingAmount < 0 ? '#F04438' : '#475467'
+          }
+        }, locales.getText('payment-keyboard-max'), ":", ' ', /*#__PURE__*/React.createElement(PisellText.Amount, {
+          hideDecimalForWholeNumbers: false,
+          precision: 2,
+          value: maxAmount
+        })), ' ', "( ", locales.getText('payment-keyboard-remaining'), ":", ' ', /*#__PURE__*/React.createElement(PisellText.Amount, {
+          hideDecimalForWholeNumbers: false,
+          precision: 2,
+          value: Math.max(remainingAmount, 0)
+        }), ' ', ")")
+      );
+    }
+  };
+  var renderPaymentDisplay = function renderPaymentDisplay() {
+    return /*#__PURE__*/React.createElement(VirtualInput, {
+      focused: true,
+      value: amountFormatter(internalPaymentValue),
+      wrapperStyle: {
+        width: '100%',
+        backgroundColor: '#ffffff',
+        borderRadius: 8,
+        padding: 16
+      },
+      bottomContent: renderBottomContent(),
+      preventBlurElements: [uniqueKeyboardId]
+    });
+  };
+  var renderSurchargeDisplay = function renderSurchargeDisplay() {
+    var _internalSurchargeVal;
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'grid',
+        gridTemplateColumns: '1fr auto 1fr',
+        gap: 8,
+        alignItems: 'center'
+      }
+    }, /*#__PURE__*/React.createElement(VirtualInput, {
+      focused: focusedInput !== KEYS.FIXED,
+      value: internalSurchargeValue !== null && internalSurchargeValue !== void 0 && internalSurchargeValue.percent ? "".concat(internalSurchargeValue === null || internalSurchargeValue === void 0 ? void 0 : internalSurchargeValue.percent, "%") : '',
+      wrapperStyle: {
+        backgroundColor: '#ffffff',
+        borderRadius: 8,
+        padding: 20
+      },
+      placeholder: locales.getText('payment-keyboard-percent'),
+      style: {
+        justifyContent: 'center'
+      },
+      onFocus: function onFocus() {
+        return setFocusedInput(KEYS.PERCENT);
+      },
+      preventBlurElements: [uniqueKeyboardId]
+    }), /*#__PURE__*/React.createElement("div", {
+      style: {
+        color: '#667085',
+        fontSize: 36,
+        fontWeight: 600
+      }
+    }, "+"), /*#__PURE__*/React.createElement(VirtualInput, {
+      focused: focusedInput === KEYS.FIXED,
+      value: amountFormatter((_internalSurchargeVal = internalSurchargeValue === null || internalSurchargeValue === void 0 ? void 0 : internalSurchargeValue.fixed) !== null && _internalSurchargeVal !== void 0 ? _internalSurchargeVal : ''),
+      wrapperStyle: {
+        backgroundColor: '#ffffff',
+        borderRadius: 8,
+        padding: 20
+      },
+      placeholder: locales.getText('payment-keyboard-fixed'),
+      style: {
+        justifyContent: 'center'
+      },
+      onFocus: function onFocus() {
+        return setFocusedInput(KEYS.FIXED);
+      },
+      preventBlurElements: [uniqueKeyboardId]
+    }));
+  };
+  var customDisplay = function customDisplay() {
+    if (activeKey === KEYS.PAYMENT) {
+      return renderPaymentDisplay();
+    }
+    if (activeKey === KEYS.SURCHARGE) {
+      return renderSurchargeDisplay();
+    }
+    return null;
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "pisell-pro-price-keyboard-payment-container"
+  }, (options === null || options === void 0 ? void 0 : options.length) > 1 ? /*#__PURE__*/React.createElement(Segmented, {
+    size: "large",
+    style: {
+      padding: 6
+    },
+    block: true,
+    options: options,
+    value: activeKey,
+    onChange: function onChange(value) {
+      return setActiveKey(value.toString());
+    }
+  }) : null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: "pisell-pro-price-keyboard-title ellipsis"
+  }, locales.getText('payment-keyboard-total-amount-due'), ":", ' ', /*#__PURE__*/React.createElement(PisellText.Amount, {
+    hideDecimalForWholeNumbers: false,
+    precision: 2,
+    value: totalAmountDue
+  })), (_mergedConfig$surchar2 = mergedConfig.surcharge) !== null && _mergedConfig$surchar2 !== void 0 && _mergedConfig$surchar2.enable ? /*#__PURE__*/React.createElement("div", {
+    className: "pisell-pro-price-keyboard-subtitle ellipsis"
+  }, locales.getText('payment-keyboard-inc-surcharge'), ":", ' ', /*#__PURE__*/React.createElement(PisellText.Amount, {
+    hideDecimalForWholeNumbers: false,
+    precision: 2,
+    value: surchargeFee
+  }), ' ', "(", (internalSurchargeValue === null || internalSurchargeValue === void 0 ? void 0 : internalSurchargeValue.percent) || '0', "% +", ' ', /*#__PURE__*/React.createElement(PisellText.Amount, {
+    hideDecimalForWholeNumbers: false,
+    precision: 2,
+    value: (internalSurchargeValue === null || internalSurchargeValue === void 0 ? void 0 : internalSurchargeValue.fixed) || 0
+  }), ")") : null), /*#__PURE__*/React.createElement("div", {
+    className: "pisell-pro-price-keyboard-payment"
+  }, activeKey && customDisplay(), /*#__PURE__*/React.createElement(Keyboard, {
+    rightItems: rightItems,
+    onChange: handleChange,
+    id: uniqueKeyboardId
+  })));
+};
+export var PaymentKeyboard = function PaymentKeyboard(props) {
+  var containerProps = props.containerProps,
+    children = props.children,
+    keyboardProps = _objectWithoutProperties(props, _excluded);
+  var _ref = containerProps || {},
+    renderType = _ref.renderType,
+    open = _ref.open,
+    restProps = _objectWithoutProperties(_ref, _excluded2);
+  if (!containerProps) {
+    return /*#__PURE__*/React.createElement(PaymentKeyboardBase, keyboardProps);
+  }
+
+  // 暂时只支持受控模式
+  if (renderType === 'popover') {
+    return /*#__PURE__*/React.createElement(Popover, _extends({
+      key: "".concat(open),
+      open: open,
+      trigger: "click",
+      className: "pisell-payment-keyboard-container pisell-payment-keyboard-popover"
+    }, restProps, {
+      content: /*#__PURE__*/React.createElement(PaymentKeyboardBase, keyboardProps)
+    }), children);
+  }
+  if (renderType === 'modal') {
+    return open ? /*#__PURE__*/React.createElement(PisellModal, _extends({
+      platform: 'pc',
+      open: true,
+      width: "unset",
+      header: null,
+      footer: false,
+      mask: false,
+      maskClosable: true,
+      bodyStyle: {
+        padding: '0px',
+        backgroundColor: 'transparent'
+      },
+      closeIcon: null,
+      className: "pisell-payment-keyboard-container pisell-payment-keyboard-modal",
+      destroyOnHidden: true
+    }, restProps), /*#__PURE__*/React.createElement(PaymentKeyboardBase, keyboardProps)) : null;
+  }
+  return /*#__PURE__*/React.createElement(PaymentKeyboardBase, keyboardProps);
+};
+export default PaymentKeyboard;

package/es/pro/priceKeyboard/components/paymentKeyboard/index.less

@@ -0,0 +1,64 @@
+.pisell-pro-price-keyboard-payment-container {
+  width: 380px;
+  padding: 10px;
+  border-radius: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  background-color: var(--pisell-pro-price-keyboard-wrapper-bg-color, #ffffff);
+
+  .ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  // 复写Segmented样式
+  .pisell-lowcode-segmented {
+    background-color: var(
+      --pisell-pro-price-keyboard-bg-color-gray-200,
+      #eaecf0
+    );
+    color: var(--pisell-pro-price-keyboard-text-gray-500, #667085);
+  }
+
+  .pisell-pro-price-keyboard-title {
+    font-size: 20px;
+    font-weight: 600;
+    color: var(--pisell-pro-price-keyboard-text-gray-900, #101828);
+  }
+  .pisell-pro-price-keyboard-subtitle {
+    font-size: 16px;
+    font-weight: 400;
+    color: var(--pisell-pro-price-keyboard-text-gray-500, #667085);
+  }
+
+  .pisell-pro-price-keyboard-input-tip {
+    color: #475467;
+    font-size: 14px;
+    font-weight: 400;
+  }
+
+  .pisell-pro-price-keyboard-payment {
+    width: 100%;
+    padding: 10px;
+    border-radius: 10px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    background-color: var(
+      --pisell-pro-price-keyboard-bg-color-gray-300,
+      #d0d5dd
+    );
+  }
+}
+
+.pisell-payment-keyboard-modal {
+  .pisell-lowcode-modal-content {
+    background-color: transparent;
+  }
+
+  .pisell-lowcode-modal-close {
+    display: none;
+  }
+}

package/es/pro/priceKeyboard/components/paymentKeyboard/locales.d.ts

@@ -0,0 +1,45 @@
+declare const _default: {
+    en: {
+        'payment-keyboard-payment': string;
+        'payment-keyboard-surcharge': string;
+        'payment-keyboard-percent': string;
+        'payment-keyboard-fixed': string;
+        'payment-keyboard-max': string;
+        'payment-keyboard-remaining': string;
+        'payment-keyboard-change-due': string;
+        'payment-keyboard-total-amount-due': string;
+        'payment-keyboard-inc-surcharge': string;
+        'payment-keyboard-reset': string;
+        'payment-keyboard-done': string;
+        'payment-keyboard-pay': string;
+    };
+    'zh-CN': {
+        'payment-keyboard-payment': string;
+        'payment-keyboard-surcharge': string;
+        'payment-keyboard-percent': string;
+        'payment-keyboard-change-due': string;
+        'payment-keyboard-fixed': string;
+        'payment-keyboard-max': string;
+        'payment-keyboard-remaining': string;
+        'payment-keyboard-total-amount-due': string;
+        'payment-keyboard-inc-surcharge': string;
+        'payment-keyboard-reset': string;
+        'payment-keyboard-done': string;
+        'payment-keyboard-pay': string;
+    };
+    'zh-HK': {
+        'payment-keyboard-payment': string;
+        'payment-keyboard-surcharge': string;
+        'payment-keyboard-percent': string;
+        'payment-keyboard-fixed': string;
+        'payment-keyboard-max': string;
+        'payment-keyboard-remaining': string;
+        'payment-keyboard-change-due': string;
+        'payment-keyboard-total-amount-due': string;
+        'payment-keyboard-inc-surcharge': string;
+        'payment-keyboard-reset': string;
+        'payment-keyboard-done': string;
+        'payment-keyboard-pay': string;
+    };
+};
+export default _default;