@pisell/private-materials 6.5.4 → 6.5.5

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

@@ -41,7 +41,8 @@ var import_utils = require("@pisell/utils");
 var import_decimal = __toESM(require("decimal.js"));
 var import_locales = __toESM(require("../../locales"));
 var import_PaymentDetailModal = __toESM(require("../PaymentDetailModal"));
-var import_pisellPriceKeyboardPopover = __toESM(require("../../../../pro/pisellPriceKeyboardPopover"));
+var import_pisellSimplePriceKeyboardPopover = __toESM(require("../../../../pro/pisellSimplePriceKeyboardPopover"));
+var import_priceKeyboard = require("../../../../pro/priceKeyboard");
 var import_index = require("./index.less");
 var import_classnames = __toESM(require("classnames"));
 var import_useEngineContext = __toESM(require("../../../../hooks/useEngineContext"));
@@ -105,6 +106,7 @@ function AmountSummary({
   const [summaryData, setSummaryData] = (0, import_react.useState)([]);
   const [partialPaidAmount, setPartialPaidAmount] = (0, import_react.useState)("0");
   const checkoutModule = pisellos.getModule("checkout");
+  const [isKeyboardVisible, setIsKeyboardVisible] = (0, import_react.useState)(false);
   const labelMaps = {
     deposit: getText("pisell2.subtotal.deposit") || "Deposit",
     total: getText("pisell2.subtotal.total") || "Total",
@@ -117,13 +119,15 @@ function AmountSummary({
     expect_amount: getText("pisell2.subtotal.expect-amount") || "Expected Amount"
   };
   const getBalanceDueAmount = () => {
-    const expectAmountItem = summaryData.find(
-      (item) => item.key === "expect_amount"
-    );
-    if (expectAmountItem) {
-      return expectAmountItem.value;
+    if (paymentType === "deposit") {
+      return (orderInfo == null ? void 0 : orderInfo.depositAmount) || "0";
     }
-    return 0;
+    return (paymentItems == null ? void 0 : paymentItems.reduce((acc, item) => {
+      if (item.isSynced || !item.voucher_id) {
+        return acc;
+      }
+      return acc.plus(item.amount);
+    }, new import_decimal.default(0)).toNumber()) || 0;
   };
   const parseFormattedAmount = (formattedAmount) => {
     if (typeof formattedAmount === "number") {
@@ -155,6 +159,7 @@ function AmountSummary({
         if (Array.isArray(summary)) {
           setSummaryData(summary);
         }
+        setPaymentType(orderInfo.isDeposit ? "deposit" : "regular");
       } catch (error) {
         console.warn("Failed to get cart summary:", error);
       }
@@ -223,20 +228,10 @@ function AmountSummary({
     );
     return totalDecimal.toNumber();
   };
-  const getOrderDueAmount = () => {
-    const expectAmountItem = summaryData.find(
-      (item) => item.key === "expect_amount"
-    );
-    if (expectAmountItem) {
-      return expectAmountItem.value;
-    }
-    return paymentType === "deposit" ? 15.1 : 130.2;
-  };
   const getKeyboardLimits = () => {
     const walletTotal = getWalletTotalAmount();
-    const orderDue = getOrderDueAmount();
     const walletTotalDecimal = new import_decimal.default(walletTotal);
-    const orderDueDecimal = new import_decimal.default(orderDue);
+    const orderDueDecimal = new import_decimal.default(Number(balanceDueAmount || 0));
     const minDecimal = new import_decimal.default(0.01);
     const diffDecimal = orderDueDecimal.minus(walletTotalDecimal);
     const maxAmountDecimal = import_decimal.default.max(minDecimal, diffDecimal);
@@ -302,7 +297,7 @@ function AmountSummary({
     var _a2;
     const partialPaidAmountDecimal = new import_decimal.default(partialPaidAmount || "0");
     const voucherPaymentAmount = ((_a2 = paymentItems == null ? void 0 : paymentItems.reduce((acc, item) => {
-      if (item.voucher_id) {
+      if (item.voucher_id && !item.isSynced) {
         try {
           const amount = new import_decimal.default(item.amount || "0");
           const roundingAmount = new import_decimal.default(item.rounding_amount || "0");
@@ -314,6 +309,10 @@ function AmountSummary({
       return acc;
     }, new import_decimal.default(0))) == null ? void 0 : _a2.toNumber()) || 0;
     const totalPaidAmount = partialPaidAmountDecimal.plus(voucherPaymentAmount).toNumber();
+    const syncedPaymentItems = (paymentItems == null ? void 0 : paymentItems.filter((item) => item.isSynced && !item.voucher_id)) || [];
+    if ((syncedPaymentItems == null ? void 0 : syncedPaymentItems.length) > 0 && totalPaidAmount < totalAmount) {
+      return true;
+    }
     if (totalPaidAmount >= totalAmount) {
       return false;
     }
@@ -351,7 +350,8 @@ function AmountSummary({
       return false;
     }
     if (amount <= 0) {
-      const allItemsHaveVoucherId = paymentItems == null ? void 0 : paymentItems.every(
+      const unSyncedPaymentItems = paymentItems == null ? void 0 : paymentItems.filter((item) => !item.isSynced);
+      const allItemsHaveVoucherId = unSyncedPaymentItems == null ? void 0 : unSyncedPaymentItems.every(
         (item) => item.voucher_id
       );
       return allItemsHaveVoucherId || (((_a2 = walletPassData == null ? void 0 : walletPassData.selectedDiscountList) == null ? void 0 : _a2.length) ?? 0) > 0;
@@ -393,7 +393,7 @@ function AmountSummary({
   };
   const getMiddleContent = () => {
     if (paymentType === "deposit") {
-      return /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, /* @__PURE__ */ import_react2.default.createElement("div", { className: (0, import_classnames.default)("payment-details") }, shouldShowPartialPaidCard() && /* @__PURE__ */ import_react2.default.createElement("div", { className: (0, import_classnames.default)("partial-paid-card") }, /* @__PURE__ */ import_react2.default.createElement("span", { className: (0, import_classnames.default)("partial-paid-label") }, getText("partial.paid") || "Partial Paid"), /* @__PURE__ */ import_react2.default.createElement("span", { className: (0, import_classnames.default)("partial-paid-amount") }, (0, import_utils.formatAmountWithOptions)(partialPaidAmount, amountSymbol, {
+      return /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, /* @__PURE__ */ import_react2.default.createElement("div", { className: (0, import_classnames.default)("payment-details") }, shouldShowPartialPaidCard() && /* @__PURE__ */ import_react2.default.createElement("div", { className: (0, import_classnames.default)("partial-paid-card") }, /* @__PURE__ */ import_react2.default.createElement("span", { className: (0, import_classnames.default)("partial-paid-label") }, paymentType === "deposit" ? getText("deposit.partial.paid") || "Deposit Paid" : getText("partial.paid") || "Partial Paid"), /* @__PURE__ */ import_react2.default.createElement("span", { className: (0, import_classnames.default)("partial-paid-amount") }, (0, import_utils.formatAmountWithOptions)(partialPaidAmount, amountSymbol, {
         precision: 2,
         hideDecimalForWholeNumbers: false,
         useThousandsSeparator: true,
@@ -440,6 +440,33 @@ function AmountSummary({
       ));
     }
   };
+  const canSwitch = (0, import_react.useMemo)(() => {
+    if (Number(orderInfo == null ? void 0 : orderInfo.totalAmount) === 0) {
+      return false;
+    }
+    if (paymentType === "regular") {
+      const depositPaidAmount = paymentItems == null ? void 0 : paymentItems.reduce((acc, item) => {
+        if (item.order_payment_type === "deposit") {
+          return acc.plus(item.amount).plus(Math.abs(item.rounding_amount));
+        }
+        return acc;
+      }, new import_decimal.default(0)).toNumber();
+      const depositFlag = depositPaidAmount >= new import_decimal.default((orderInfo == null ? void 0 : orderInfo.depositAmount) || "0").toNumber() && Number(orderInfo == null ? void 0 : orderInfo.depositAmount) > 0;
+      return !(paymentItems == null ? void 0 : paymentItems.some((item) => item.order_payment_type === "normal")) && !depositFlag;
+    } else {
+      const depositPaidAmount = paymentItems == null ? void 0 : paymentItems.reduce((acc, item) => {
+        if (item.order_payment_type === "deposit") {
+          return acc.plus(item.amount);
+        }
+        return acc;
+      }, new import_decimal.default(0)).toNumber();
+      return depositPaidAmount < new import_decimal.default(totalAmount).toNumber();
+    }
+  }, [paymentItems, paymentType, totalAmount]);
+  const handleChangeDepositAmount = (value) => {
+    console.log("handleChangeDepositAmount", value);
+    checkoutModule == null ? void 0 : checkoutModule.setDepositAmountAsync(value);
+  };
   return /* @__PURE__ */ import_react2.default.createElement(
     "div",
     {
@@ -448,7 +475,7 @@ function AmountSummary({
         "amount-summary-container"
       )
     },
-    /* @__PURE__ */ import_react2.default.createElement("div", { className: (0, import_classnames.default)("left-section") }, open_deposit ? /* @__PURE__ */ import_react2.default.createElement(
+    /* @__PURE__ */ import_react2.default.createElement("div", { className: (0, import_classnames.default)("left-section") }, open_deposit && canSwitch ? /* @__PURE__ */ import_react2.default.createElement(
       import_antd.Dropdown,
       {
         menu: {
@@ -475,11 +502,35 @@ function AmountSummary({
     /* @__PURE__ */ import_react2.default.createElement("div", { className: (0, import_classnames.default)("middle-section") }, getMiddleContent()),
     /* @__PURE__ */ import_react2.default.createElement(
       "div",
-      { className: (0, import_classnames.default)("balance-due-card", {
-        "confirm-mode": shouldShowConfirmMode()
-      }) },
+      {
+        className: (0, import_classnames.default)("balance-due-card", {
+          "confirm-mode": shouldShowConfirmMode()
+        })
+      },
       // 如果应该显示确认模式，直接返回确认界面
-      shouldShowConfirmMode() ? renderConfirmMode() : /* @__PURE__ */ import_react2.default.createElement("div", { className: (0, import_classnames.default)("balance-due-info") }, /* @__PURE__ */ import_react2.default.createElement("div", { className: (0, import_classnames.default)("balance-due-label") }, paymentType === "deposit" ? getText("deposit.due") || "Deposit Due" : getText("balance.due") || "Balance Due"), /* @__PURE__ */ import_react2.default.createElement("div", { className: (0, import_classnames.default)("balance-due-amount"), onClick: () => {
+      shouldShowConfirmMode() ? renderConfirmMode() : /* @__PURE__ */ import_react2.default.createElement("div", { className: (0, import_classnames.default)("balance-due-info") }, paymentType === "deposit" ? /* @__PURE__ */ import_react2.default.createElement(
+        import_pisellSimplePriceKeyboardPopover.default,
+        {
+          value: (orderInfo == null ? void 0 : orderInfo.depositAmount) || "0",
+          onConfirm: handleChangeDepositAmount,
+          showCurrencySymbol: true,
+          useThousandsSeparator: true,
+          selectType: "dark",
+          overlayClassName: "cash-payment-keyboard-popover"
+        },
+        /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, /* @__PURE__ */ import_react2.default.createElement("div", { className: (0, import_classnames.default)("balance-due-label") }, getText("deposit.due") || "Deposit Due"), /* @__PURE__ */ import_react2.default.createElement("div", { className: (0, import_classnames.default)("balance-due-amount") }, (0, import_utils.formatAmountWithOptions)(balanceDueAmount, amountSymbol, {
+          precision: 2,
+          hideDecimalForWholeNumbers: false,
+          useThousandsSeparator: true,
+          showCurrencySymbol: true
+        }), /* @__PURE__ */ import_react2.default.createElement(
+          import_icon.Edit05,
+          {
+            className: (0, import_classnames.default)("edit-icon"),
+            style: { color: "#7F56DA" }
+          }
+        )))
+      ) : /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, /* @__PURE__ */ import_react2.default.createElement("div", { className: (0, import_classnames.default)("balance-due-label") }, getText("balance.due") || "Balance Due"), /* @__PURE__ */ import_react2.default.createElement("div", { className: (0, import_classnames.default)("balance-due-amount"), onClick: () => {
         onBalanceDueAmountClick == null ? void 0 : onBalanceDueAmountClick("manual-discount");
       } }, (0, import_utils.formatAmountWithOptions)(balanceDueAmount, amountSymbol, {
         precision: 2,
@@ -492,8 +543,8 @@ function AmountSummary({
           className: (0, import_classnames.default)("edit-icon"),
           style: { color: "#7F56DA" }
         }
-      ))),
-      /* @__PURE__ */ import_react2.default.createElement(
+      )))),
+      Number(currentAmount) > 0 && /* @__PURE__ */ import_react2.default.createElement(
         "div",
         {
           className: (0, import_classnames.default)("pay-section"),
@@ -520,20 +571,43 @@ function AmountSummary({
       )
     ),
     !shouldShowConfirmMode() && /* @__PURE__ */ import_react2.default.createElement(
-      import_pisellPriceKeyboardPopover.default,
+      import_antd.Popover,
       {
-        value: (() => {
-          try {
-            return new import_decimal.default(currentAmount || "0").toNumber();
-          } catch {
-            return 0;
+        content: /* @__PURE__ */ import_react2.default.createElement("div", { onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react2.default.createElement(
+          import_priceKeyboard.PaymentKeyboard,
+          {
+            paymentOriginalValue: balanceDueAmount,
+            paymentDefaultValue: String(customAmount || 0),
+            enableExceedMaxAmount: false,
+            payment: {
+              enable: true
+            },
+            surcharge: {
+              enable: false
+            },
+            surchargeDefaultValue: {
+              percent: "0",
+              fixed: "0"
+            },
+            selectType: "light",
+            onChange: (value) => {
+              console.log(value);
+            },
+            doneText: getText("confirm"),
+            onPay: (args) => {
+              console.log(args);
+              setIsKeyboardVisible(false);
+              handleKeyboardConfirm(args.amount);
+            }
           }
-        })(),
-        onConfirm: handleKeyboardConfirm,
-        showCurrencySymbol: true,
-        useThousandsSeparator: false,
-        selectType: "dark",
-        overlayClassName: "amount-summary-keyboard-popover"
+        )),
+        trigger: "click",
+        open: isKeyboardVisible,
+        onOpenChange: setIsKeyboardVisible,
+        placement: "bottom",
+        overlayClassName: "payment-keyboard-popover",
+        arrow: true,
+        destroyTooltipOnHide: true
       },
       /* @__PURE__ */ import_react2.default.createElement(import_antd.Button, { className: (0, import_classnames.default)("split-payment-button") }, getText("split.payment") || "拆分支付")
     ),

package/lib/components/checkout/components/CashPaymentModule/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import './index.less';
 import { CurrentOrderInfo } from '../../types';
+import './index.less';
 export interface CashPaymentModuleProps {
     amountSymbol?: string;
     orderInfo?: CurrentOrderInfo;
@@ -13,8 +13,10 @@ export interface CashPaymentModuleProps {
         roundingDifference: number;
     }>;
     balanceDueAmount?: string;
+    syncingLock?: boolean;
 }
-export declare function CashPaymentModule({ amountSymbol, orderInfo, onPaymentComplete, customAmount, amountButtons, // 按钮列表
+export declare function CashPaymentModule({ amountSymbol, orderInfo, onPaymentComplete, customAmount, amountButtons, // 按钮列表，默认5个推荐金额
 disabled, // 禁用状态
-roundingFunction, balanceDueAmount, }: CashPaymentModuleProps): JSX.Element;
+roundingFunction, balanceDueAmount, // 剩余支付金额
+syncingLock, }: CashPaymentModuleProps): JSX.Element;
 export default CashPaymentModule;

package/lib/components/checkout/components/CashPaymentModule/index.js

@@ -34,40 +34,36 @@ __export(CashPaymentModule_exports, {
 });
 module.exports = __toCommonJS(CashPaymentModule_exports);
 var import_react = __toESM(require("react"));
-var import_index = require("./index.less");
-var import_classnames = __toESM(require("classnames"));
-var import_icon = require("@pisell/icon");
-var import_pisellPriceKeyboardPopover = __toESM(require("../../../../pro/pisellPriceKeyboardPopover"));
 var import_useEngineContext = __toESM(require("../../../../hooks/useEngineContext"));
 var import_utils = require("@pisell/utils");
 var import_locales = __toESM(require("../../locales"));
 var import_useToast = __toESM(require("../../../../hooks/useToast"));
 var import_ahooks = require("ahooks");
+var import_priceKeyboard = require("../../../../pro/priceKeyboard");
+var import_index = require("./index.less");
 function CashPaymentModule({
   amountSymbol,
   orderInfo,
   onPaymentComplete,
   customAmount,
   amountButtons = [],
-  // 按钮列表
+  // 按钮列表，默认5个推荐金额
   disabled = false,
   // 禁用状态
   roundingFunction,
-  balanceDueAmount = "0"
+  balanceDueAmount = "0",
   // 剩余支付金额
+  syncingLock = false
+  // 是否锁定
 }) {
   const [amount, setAmount] = (0, import_react.useState)(customAmount || "");
   const [roundingAmount, setRoundingAmount] = (0, import_react.useState)(0);
-  const [amountList, setAmountList] = (0, import_react.useState)(amountButtons.length ? amountButtons : new Array(6).fill(0));
-  (0, import_react.useEffect)(() => {
-    setAmountList(amountButtons.length ? amountButtons : new Array(6).fill(0));
-  }, [amountButtons]);
   const context = (0, import_useEngineContext.default)();
   const Toast = (0, import_useToast.default)();
   const getText = (key, fallback) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
-    const currentLang = ((_e = (_d = (_c = (_b = (_a = context.appHelper.utils) == null ? void 0 : _a.getApp) == null ? void 0 : _b.call(_a)) == null ? void 0 : _c.locales) == null ? void 0 : _d.getLocale) == null ? void 0 : _e.call(_d)) || ((_g = (_f = context.appHelper.utils) == null ? void 0 : _f.storage) == null ? void 0 : _g.get("umi_locale")) || "en";
-    const checkoutText = (_h = import_locales.default[currentLang]) == null ? void 0 : _h[key];
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+    const currentLang = ((_f = (_e = (_d = (_c = (_b = (_a = context.appHelper) == null ? void 0 : _a.utils) == null ? void 0 : _b.getApp) == null ? void 0 : _c.call(_b)) == null ? void 0 : _d.locales) == null ? void 0 : _e.getLocale) == null ? void 0 : _f.call(_e)) || ((_h = (_g = context.appHelper.utils) == null ? void 0 : _g.storage) == null ? void 0 : _h.get("umi_locale")) || "en";
+    const checkoutText = (_i = import_locales.default[currentLang]) == null ? void 0 : _i[key];
     if (checkoutText) {
       return checkoutText;
     }
@@ -88,7 +84,12 @@ function CashPaymentModule({
     if (isAmountButtonsDisabled) return;
     if (onPaymentComplete) {
       if (Number(amount) === 0 && Math.abs(roundingAmount) === 0) {
-        Toast.fail(getText("pisell2.amount-summary.amount-cannot-be-zero", "The amount cannot be 0"));
+        Toast.fail(
+          getText(
+            "cash-payment-amount-cannot-be-zero",
+            "The amount cannot be 0"
+          )
+        );
         return;
       }
       const finalAmount = typeof amount === "number" ? amount : Number(amount) || 0;
@@ -110,11 +111,12 @@ function CashPaymentModule({
       setRoundingAmount(0);
       return;
     }
-    ;
     const finalValue = String(value);
     console.log("键盘确认:", finalValue);
     if (Number(finalValue) === 0) {
-      Toast.fail(getText("pisell2.amount-summary.amount-cannot-be-zero", "The amount cannot be 0"));
+      Toast.fail(
+        getText("cash-payment-amount-cannot-be-zero", "The amount cannot be 0")
+      );
       return;
     }
     if (finalValue === "" || finalValue === null || finalValue === void 0) {
@@ -131,9 +133,21 @@ function CashPaymentModule({
         const { roundedAmount = numValue, roundingDifference = 0 } = result || {};
         finalAmount = roundedAmount;
         roundingDiff = roundingDifference;
-        console.log("应用抹零：", numValue, "->", roundedAmount, "差额:", roundingDifference);
+        console.log(
+          "应用抹零：",
+          numValue,
+          "->",
+          roundedAmount,
+          "差额:",
+          roundingDifference
+        );
       } else {
-        console.log("不应用抹零，用户输入金额:", numValue, "剩余支付金额:", balanceDue);
+        console.log(
+          "不应用抹零，用户输入金额:",
+          numValue,
+          "剩余支付金额:",
+          balanceDue
+        );
       }
       setRoundingAmount(roundingDiff);
       if (isNaN(numValue)) {
@@ -144,126 +158,77 @@ function CashPaymentModule({
       }
     }
   };
-  const handleKeyboardCancel = () => {
-    console.log("键盘取消");
-  };
-  const handleKeyboardChange = (value) => {
-    if (isInputDisabled) return;
-    const stringValue = String(value);
-    console.log("键盘输入变化:", stringValue, "类型:", typeof stringValue);
-    setAmount(stringValue);
+  const handleReset = async () => {
+    if (isAmountButtonsDisabled) return;
+    const resetAmount = balanceDueAmount || "0";
+    const cleanValue = resetAmount.replace(/[$\s]/g, "");
+    const numValue = parseFloat(cleanValue);
+    const balanceDue = parseFloat(balanceDueAmount);
+    const shouldApplyRounding = Math.abs(numValue - balanceDue) < 0.01;
+    let finalAmount = numValue;
+    let roundingDiff = 0;
+    if (shouldApplyRounding && roundingFunction) {
+      const result = await roundingFunction(finalAmount);
+      const { roundedAmount = numValue, roundingDifference = 0 } = result || {};
+      finalAmount = roundedAmount;
+      roundingDiff = roundingDifference;
+      console.log(
+        "应用抹零：",
+        numValue,
+        "->",
+        roundedAmount,
+        "差额:",
+        roundingDifference
+      );
+    } else {
+      console.log(
+        "不应用抹零，用户输入金额:",
+        numValue,
+        "剩余支付金额:",
+        balanceDue
+      );
+    }
+    setAmount(finalAmount.toString());
+    setRoundingAmount(roundingDiff);
   };
   return /* @__PURE__ */ import_react.default.createElement(
-    "div",
+    import_priceKeyboard.CashKeyboard,
     {
-      className: (0, import_classnames.default)("cash-pay-container", {
-        "cash-pay-container--disabled": disabled
-      })
-    },
-    /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("cash-pay-header") }, /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("cash-pay-header-title") }, getText("cash") || "Cash"), Math.abs(roundingAmount) > 0 && /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("cash-pay-header-rounding") }, getText("rounding") || "Rounding", ":", " ", (0, import_utils.formatAmount)(roundingAmount, 2, amountSymbol))),
-    /* @__PURE__ */ import_react.default.createElement(
-      "div",
-      {
-        className: (0, import_classnames.default)("cash-pay-main-content", {
-          "cash-pay-main-content--disabled": disabled
-        })
+      variant: "intact",
+      originalValue: customAmount,
+      value: amount,
+      disabled,
+      hiddenChangeDue: roundingAmount > 0,
+      onChange: (value) => {
+        setAmount(value);
+        setRoundingAmount(0);
       },
-      /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("cash-pay-payment-area") }, /* @__PURE__ */ import_react.default.createElement(
-        import_pisellPriceKeyboardPopover.default,
-        {
-          value: amount || "0",
-          onConfirm: handleKeyboardConfirm,
-          onCancel: handleKeyboardCancel,
-          showCurrencySymbol: true,
-          useThousandsSeparator: true,
-          selectType: "dark",
-          overlayClassName: "cash-payment-keyboard-popover",
-          disabled: isInputDisabled
-        },
-        /* @__PURE__ */ import_react.default.createElement(
-          "div",
-          {
-            className: (0, import_classnames.default)("cash-pay-amount-input-area", {
-              "cash-pay-amount-input-area--disabled": isInputDisabled
-            })
-          },
-          /* @__PURE__ */ import_react.default.createElement(
-            import_icon.Edit05,
-            {
-              className: (0, import_classnames.default)("cash-pay-amount-edit-icon", {
-                "cash-pay-amount-edit-icon--disabled": isInputDisabled
-              })
-            }
-          ),
-          /* @__PURE__ */ import_react.default.createElement(
-            "div",
-            {
-              className: (0, import_classnames.default)("cash-pay-amount-input-wrapper", {
-                "cash-pay-amount-input-wrapper--disabled": isInputDisabled
-              })
-            },
-            /* @__PURE__ */ import_react.default.createElement(
-              "span",
-              {
-                className: (0, import_classnames.default)("cash-pay-currency-symbol", {
-                  "cash-pay-currency-symbol--disabled": isInputDisabled
-                })
-              },
-              amountSymbol
-            ),
-            /* @__PURE__ */ import_react.default.createElement(
-              "div",
-              {
-                className: (0, import_classnames.default)("cash-pay-amount-display", {
-                  "cash-pay-amount-display--disabled": isInputDisabled
-                })
-              },
-              amount || "0.00"
-            )
-          )
-        )
-      ), /* @__PURE__ */ import_react.default.createElement(
-        "div",
-        {
-          className: (0, import_classnames.default)("cash-pay-button", {
-            "cash-pay-button--disabled": isAmountButtonsDisabled
-          }),
-          ...isAmountButtonsDisabled ? {} : { onClick: handleCashPay },
-          style: { cursor: isAmountButtonsDisabled ? "not-allowed" : "pointer" }
-        },
-        /* @__PURE__ */ import_react.default.createElement(
-          "div",
-          {
-            className: (0, import_classnames.default)("cash-pay-button-text", {
-              "cash-pay-button-text--disabled": isAmountButtonsDisabled
-            })
-          },
-          getText("cash.payment") || "Cash Pay"
-        )
-      )),
-      /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("cash-pay-amount-button-grid", {
-        "cash-pay-amount-button-grid--disabled": isAmountButtonsDisabled
-      }) }, amountList.slice(0, 6).map((amount2, index) => /* @__PURE__ */ import_react.default.createElement(
-        "div",
-        {
-          key: index,
-          className: (0, import_classnames.default)("cash-pay-amount-button", {
-            "cash-pay-amount-button--disabled": isAmountButtonsDisabled
-          }),
-          ...isAmountButtonsDisabled ? {} : { onClick: () => handleAmountClick(amount2) },
-          style: { cursor: isAmountButtonsDisabled ? "not-allowed" : "pointer" }
+      titleArea: {
+        visible: true,
+        title: {
+          text: getText("cash-payment-title", "Cash Payment")
         },
-        /* @__PURE__ */ import_react.default.createElement(
-          "div",
-          {
-            className: (0, import_classnames.default)("cash-pay-amount-button-text", {
-              "cash-pay-amount-button-text--disabled": isAmountButtonsDisabled
-            })
-          },
-          (0, import_utils.formatAmount)(amount2, 2, amountSymbol)
-        )
-      )))
-    )
+        subtitle: {
+          visible: Math.abs(roundingAmount) > 0,
+          text: `${getText(
+            "cash-payment-rounding",
+            "Rounding"
+          )}: ${(0, import_utils.formatAmount)(roundingAmount, 2, amountSymbol)}`
+        }
+      },
+      style: {
+        width: "100%",
+        backgroundColor: "transparent"
+      },
+      presets: amountButtons.slice(0, 5).map((buttonAmount) => {
+        return {
+          label: (0, import_utils.formatAmount)(buttonAmount, 2, amountSymbol),
+          value: buttonAmount
+        };
+      }),
+      onReset: handleReset,
+      onEnter: syncingLock ? void 0 : handleCashPay
+    }
   );
 }
 var CashPaymentModule_default = CashPaymentModule;