npm - @pisell/private-materials - Versions diffs - 6.5.2 → 6.5.4 - Mend

@pisell/private-materials 6.5.2 → 6.5.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (289) hide show

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

@@ -80,6 +80,7 @@ function AmountSummary({
   clientInfo,
   onAmountChange,
   onDepositStatusChange,
+  onBalanceDueAmountClick,
   onConfirm,
   paymentItems,
   cartData,
@@ -173,7 +174,12 @@ function AmountSummary({
           const roundingAmount = new import_decimal.default(item.rounding_amount);
           if (roundingAmount.isNegative()) {
             itemAmount = itemAmount.plus(roundingAmount.abs());
-            console.log("添加抹零金额到已付:", roundingAmount.abs().toNumber(), "项目:", item);
+            console.log(
+              "添加抹零金额到已付:",
+              roundingAmount.abs().toNumber(),
+              "项目:",
+              item
+            );
           }
         }
         return acc.plus(itemAmount);
@@ -204,14 +210,17 @@ function AmountSummary({
     if (!(walletPassData == null ? void 0 : walletPassData.selectedWallet) || !Array.isArray(walletPassData.selectedWallet)) {
       return 0;
     }
-    const totalDecimal = walletPassData.selectedWallet.reduce((totalDecimal2, wallet) => {
-      try {
-        const redeemDecimal = new import_decimal.default(wallet.redeem || "0");
-        return totalDecimal2.plus(redeemDecimal);
-      } catch {
-        return totalDecimal2;
-      }
-    }, new import_decimal.default(0));
+    const totalDecimal = walletPassData.selectedWallet.reduce(
+      (totalDecimal2, wallet) => {
+        try {
+          const redeemDecimal = new import_decimal.default(wallet.redeem || "0");
+          return totalDecimal2.plus(redeemDecimal);
+        } catch {
+          return totalDecimal2;
+        }
+      },
+      new import_decimal.default(0)
+    );
     return totalDecimal.toNumber();
   };
   const getOrderDueAmount = () => {
@@ -254,7 +263,12 @@ function AmountSummary({
     }
     const limits = getKeyboardLimits();
     if (numericValue === 0) {
-      Toast.fail(getText("pisell2.amount-summary.amount-cannot-be-zero", "The amount cannot be 0"));
+      Toast.fail(
+        getText(
+          "pisell2.amount-summary.amount-cannot-be-zero",
+          "The amount cannot be 0"
+        )
+      );
       return;
     }
     if (!inputStr || numericValue <= 0) {
@@ -314,7 +328,12 @@ function AmountSummary({
     const visibleItems = hasMoreItems2 ? summaryData.slice(0, maxVisibleItems) : summaryData;
     return visibleItems.map((item) => {
       const displayLabel = item.label || labelMaps[item.key] || item.key;
-      return /* @__PURE__ */ import_react2.default.createElement("div", { key: item.key, className: (0, import_classnames.default)("payment-detail-row") }, /* @__PURE__ */ import_react2.default.createElement("span", { className: (0, import_classnames.default)("payment-detail-label") }, displayLabel), /* @__PURE__ */ import_react2.default.createElement("span", { className: (0, import_classnames.default)("payment-detail-amount") }, (0, import_utils.formatAmount)(item.value, 2, amountSymbol)));
+      return /* @__PURE__ */ import_react2.default.createElement("div", { key: item.key, className: (0, import_classnames.default)("payment-detail-row") }, /* @__PURE__ */ import_react2.default.createElement("span", { className: (0, import_classnames.default)("payment-detail-label") }, displayLabel), /* @__PURE__ */ import_react2.default.createElement("span", { className: (0, import_classnames.default)("payment-detail-amount") }, (0, import_utils.formatAmountWithOptions)(item.value, amountSymbol, {
+        precision: 2,
+        hideDecimalForWholeNumbers: false,
+        useThousandsSeparator: true,
+        showCurrencySymbol: true
+      })));
     });
   };
   const hasMoreItems = () => {
@@ -352,7 +371,16 @@ function AmountSummary({
   const renderConfirmMode = () => {
     let balanceAmountValue = parseFormattedAmount(getBalanceDueAmount());
     let balanceDecimal = new import_decimal.default(balanceAmountValue);
-    const finalBalanceAmount = (0, import_utils.formatAmount)(balanceDecimal.toNumber(), 2, amountSymbol);
+    const finalBalanceAmount = (0, import_utils.formatAmountWithOptions)(
+      balanceDecimal.toNumber(),
+      amountSymbol,
+      {
+        precision: 2,
+        hideDecimalForWholeNumbers: false,
+        useThousandsSeparator: true,
+        showCurrencySymbol: true
+      }
+    );
     return /* @__PURE__ */ import_react2.default.createElement("div", { className: (0, import_classnames.default)("confirm-payment-container") }, /* @__PURE__ */ import_react2.default.createElement("div", { className: (0, import_classnames.default)("confirm-payment-content") }, /* @__PURE__ */ import_react2.default.createElement("div", { className: (0, import_classnames.default)("confirm-payment-text") }, getText("will.be.paid.in.full") || "Will be paid in full", " ", /* @__PURE__ */ import_react2.default.createElement("span", { className: (0, import_classnames.default)("amount-text") }, finalBalanceAmount), " ", getText("by.wallet") || "by Wallet"), /* @__PURE__ */ import_react2.default.createElement(
       import_antd.Button,
       {
@@ -365,7 +393,12 @@ 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.formatAmount)(partialPaidAmount, 2, amountSymbol))), renderSummaryItems(), hasMoreItems() && /* @__PURE__ */ import_react2.default.createElement(
+      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, {
+        precision: 2,
+        hideDecimalForWholeNumbers: false,
+        useThousandsSeparator: true,
+        showCurrencySymbol: true
+      }))), renderSummaryItems(), hasMoreItems() && /* @__PURE__ */ import_react2.default.createElement(
         "div",
         {
           className: (0, import_classnames.default)("more-section"),
@@ -383,7 +416,12 @@ function AmountSummary({
         )
       )));
     } else {
-      return /* @__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.formatAmount)(partialPaidAmount, 2, amountSymbol))), renderSummaryItems(), hasMoreItems() && /* @__PURE__ */ import_react2.default.createElement(
+      return /* @__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, {
+        precision: 2,
+        hideDecimalForWholeNumbers: false,
+        useThousandsSeparator: true,
+        showCurrencySymbol: true
+      }))), renderSummaryItems(), hasMoreItems() && /* @__PURE__ */ import_react2.default.createElement(
         "div",
         {
           className: (0, import_classnames.default)("more-section"),
@@ -437,50 +475,68 @@ 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") },
+      { 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") }, (0, import_utils.formatAmount)(balanceDueAmount, 2, amountSymbol))),
-      !shouldShowConfirmMode() && /* @__PURE__ */ import_react2.default.createElement(
-        import_pisellPriceKeyboardPopover.default,
+      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: () => {
+        onBalanceDueAmountClick == null ? void 0 : onBalanceDueAmountClick("manual-discount");
+      } }, (0, import_utils.formatAmountWithOptions)(balanceDueAmount, amountSymbol, {
+        precision: 2,
+        hideDecimalForWholeNumbers: false,
+        useThousandsSeparator: true,
+        showCurrencySymbol: true
+      }), /* @__PURE__ */ import_react2.default.createElement(
+        import_icon.Edit05,
         {
-          value: (() => {
+          className: (0, import_classnames.default)("edit-icon"),
+          style: { color: "#7F56DA" }
+        }
+      ))),
+      /* @__PURE__ */ import_react2.default.createElement(
+        "div",
+        {
+          className: (0, import_classnames.default)("pay-section"),
+          style: { cursor: "pointer" },
+          role: "button"
+        },
+        /* @__PURE__ */ import_react2.default.createElement("span", { className: (0, import_classnames.default)("pay-text") }, getText("pay") || "支付"),
+        /* @__PURE__ */ import_react2.default.createElement("span", { className: (0, import_classnames.default)("pay-amount") }, (0, import_utils.formatAmountWithOptions)(
+          (() => {
             try {
               return new import_decimal.default(currentAmount || "0").toNumber();
             } catch {
               return 0;
             }
           })(),
-          onConfirm: handleKeyboardConfirm,
-          showCurrencySymbol: true,
-          useThousandsSeparator: false,
-          selectType: "dark",
-          overlayClassName: "amount-summary-keyboard-popover"
-        },
-        /* @__PURE__ */ import_react2.default.createElement(
-          "div",
+          amountSymbol,
           {
-            className: (0, import_classnames.default)("pay-section"),
-            style: { cursor: "pointer" },
-            role: "button"
-          },
-          /* @__PURE__ */ import_react2.default.createElement("span", { className: (0, import_classnames.default)("pay-text") }, getText("pay") || "支付"),
-          /* @__PURE__ */ import_react2.default.createElement("span", { className: (0, import_classnames.default)("pay-amount") }, (0, import_utils.formatAmount)((() => {
-            try {
-              return new import_decimal.default(currentAmount || "0").toNumber();
-            } catch {
-              return 0;
-            }
-          })(), 2, amountSymbol)),
-          /* @__PURE__ */ import_react2.default.createElement(
-            import_icon.Edit05,
-            {
-              className: (0, import_classnames.default)("edit-icon"),
-              style: { color: "#7F56DA" }
-            }
-          )
-        )
+            precision: 2,
+            hideDecimalForWholeNumbers: false,
+            useThousandsSeparator: true,
+            showCurrencySymbol: true
+          }
+        ))
       )
     ),
+    !shouldShowConfirmMode() && /* @__PURE__ */ import_react2.default.createElement(
+      import_pisellPriceKeyboardPopover.default,
+      {
+        value: (() => {
+          try {
+            return new import_decimal.default(currentAmount || "0").toNumber();
+          } catch {
+            return 0;
+          }
+        })(),
+        onConfirm: handleKeyboardConfirm,
+        showCurrencySymbol: true,
+        useThousandsSeparator: false,
+        selectType: "dark",
+        overlayClassName: "amount-summary-keyboard-popover"
+      },
+      /* @__PURE__ */ import_react2.default.createElement(import_antd.Button, { className: (0, import_classnames.default)("split-payment-button") }, getText("split.payment") || "拆分支付")
+    ),
     /* @__PURE__ */ import_react2.default.createElement(
       import_materials.PisellModal,
       {

package/lib/components/checkout/components/AmountSummary/index.less CHANGED Viewed

@@ -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/lib/components/checkout/components/CashPaymentModule/index.js CHANGED Viewed

@@ -42,6 +42,7 @@ var import_useEngineContext = __toESM(require("../../../../hooks/useEngineContex
 var import_utils = require("@pisell/utils");
 var import_locales = __toESM(require("../../locales"));
 var import_useToast = __toESM(require("../../../../hooks/useToast"));
+var import_ahooks = require("ahooks");
 function CashPaymentModule({
   amountSymbol,
   orderInfo,
@@ -83,7 +84,7 @@ function CashPaymentModule({
     setAmount(amountStr);
     setRoundingAmount(0);
   };
-  const handleCashPay = () => {
+  const handleCashPayInternal = () => {
     if (isAmountButtonsDisabled) return;
     if (onPaymentComplete) {
       if (Number(amount) === 0 && Math.abs(roundingAmount) === 0) {
@@ -100,6 +101,9 @@ function CashPaymentModule({
       });
     }
   };
+  const { run: handleCashPay } = (0, import_ahooks.useDebounceFn)(handleCashPayInternal, {
+    wait: 1e3
+  });
   const handleKeyboardConfirm = async (value) => {
     if (isInputDisabled) {
       setAmount("0.00");

package/lib/components/checkout/components/CashPaymentModule/index.less CHANGED Viewed

@@ -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/lib/components/checkout/components/PaymentDetailModal/index.js CHANGED Viewed

@@ -108,7 +108,12 @@ function PaymentDetailModal({
     if (!paymentItems || paymentItems.length === 0 || regularPayments.length === 0) {
       return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("section-content") }, /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("no-payment-text") }, getText("no.payments.recorded") || "No payments recorded"));
     }
-    return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("section-content") }, /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("payment-record-container") }, regularPayments.map((item) => /* @__PURE__ */ import_react.default.createElement("div", { key: item.uuid, className: (0, import_classnames.default)("payment-item") }, /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("payment-item-content") }, /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("payment-item-text") }, item.name, " - ", (/* @__PURE__ */ new Date()).toLocaleDateString(), " ", getText("pisell2.checkout.payment-detail.by") || "by", " ", getCustomerInfo().nickname), /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("payment-item-actions") }, /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("payment-item-amount") }, "-", (0, import_utils.formatAmount)(Math.abs(item.amount), 2, amountSymbol)), shouldShowVoidButton(item) && /* @__PURE__ */ import_react.default.createElement(
+    return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("section-content") }, /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("payment-record-container") }, regularPayments.map((item) => /* @__PURE__ */ import_react.default.createElement("div", { key: item.uuid, className: (0, import_classnames.default)("payment-item") }, /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("payment-item-content") }, /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("payment-item-text") }, item.name, " - ", (/* @__PURE__ */ new Date()).toLocaleDateString(), " ", getText("pisell2.checkout.payment-detail.by") || "by", " ", getCustomerInfo().nickname), /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("payment-item-actions") }, /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("payment-item-amount") }, "-", (0, import_utils.formatAmountWithOptions)(Math.abs(item.amount), amountSymbol, {
+      precision: 2,
+      hideDecimalForWholeNumbers: false,
+      useThousandsSeparator: true,
+      showCurrencySymbol: true
+    })), shouldShowVoidButton(item) && /* @__PURE__ */ import_react.default.createElement(
       "button",
       {
         className: (0, import_classnames.default)("void-button"),
@@ -131,10 +136,15 @@ function PaymentDetailModal({
               className: (0, import_classnames.default)("balance-item-row")
             },
             /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("balance-item-text") }, wallet.name || wallet.product_name || getText("wallet.pass") || "Wallet Pass"),
-            /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("balance-item-amount") }, "-", wallet.redeem || (0, import_utils.formatAmount)(
+            /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("balance-item-amount") }, "-", wallet.redeem || (0, import_utils.formatAmountWithOptions)(
               Math.abs(wallet.savedAmount || 0),
-              2,
-              amountSymbol
+              amountSymbol,
+              {
+                precision: 2,
+                hideDecimalForWholeNumbers: false,
+                useThousandsSeparator: true,
+                showCurrencySymbol: true
+              }
             ))
           )
         );
@@ -158,7 +168,12 @@ function PaymentDetailModal({
   };
   const renderSummaryItems = () => {
     if (!summaryData || summaryData.length === 0) {
-      return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("order-details-grid") }, /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("order-details-column") }, /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("order-row") }, /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("order-row-text") }, getText("no.items.found") || "No items found"), /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("order-row-amount") }, (0, import_utils.formatAmount)(0, 2, amountSymbol)))));
+      return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("order-details-grid") }, /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("order-details-column") }, /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("order-row") }, /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("order-row-text") }, getText("no.items.found") || "No items found"), /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("order-row-amount") }, (0, import_utils.formatAmountWithOptions)(0, amountSymbol, {
+        precision: 2,
+        hideDecimalForWholeNumbers: false,
+        useThousandsSeparator: true,
+        showCurrencySymbol: true
+      })))));
     }
     const leftItems = summaryData.slice(0, Math.ceil(summaryData.length / 2));
     const rightItems = summaryData.slice(Math.ceil(summaryData.length / 2));
@@ -167,13 +182,23 @@ function PaymentDetailModal({
       if ((item == null ? void 0 : item.key) !== "discount") {
         prefix = item.value >= 0 ? "+" : "";
       }
-      return /* @__PURE__ */ import_react.default.createElement("div", { key: item.key, className: (0, import_classnames.default)("order-row") }, /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("order-row-label") }, getDisplayLabel(item)), /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("order-row-amount") }, prefix, (0, import_utils.formatAmount)(item.value, 2, amountSymbol)));
+      return /* @__PURE__ */ import_react.default.createElement("div", { key: item.key, className: (0, import_classnames.default)("order-row") }, /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("order-row-label") }, getDisplayLabel(item)), /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("order-row-amount") }, prefix, (0, import_utils.formatAmountWithOptions)(item.value, amountSymbol, {
+        precision: 2,
+        hideDecimalForWholeNumbers: false,
+        useThousandsSeparator: true,
+        showCurrencySymbol: true
+      })));
     })), rightItems.length > 0 && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("divider-vertical") }), /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("order-details-column") }, rightItems.map((item) => {
       let prefix = "";
       if ((item == null ? void 0 : item.key) !== "discount") {
         prefix = item.value >= 0 ? "+" : "";
       }
-      return /* @__PURE__ */ import_react.default.createElement("div", { key: item.key, className: (0, import_classnames.default)("order-row") }, /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("order-row-label") }, getDisplayLabel(item)), /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("order-row-amount") }, prefix, (0, import_utils.formatAmount)(item.value, 2, amountSymbol)));
+      return /* @__PURE__ */ import_react.default.createElement("div", { key: item.key, className: (0, import_classnames.default)("order-row") }, /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("order-row-label") }, getDisplayLabel(item)), /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("order-row-amount") }, prefix, (0, import_utils.formatAmountWithOptions)(item.value, amountSymbol, {
+        precision: 2,
+        hideDecimalForWholeNumbers: false,
+        useThousandsSeparator: true,
+        showCurrencySymbol: true
+      })));
     }))));
   };
   return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("payment-detail-modal") }, /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("main-content") }, /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("section-container") }, /* @__PURE__ */ import_react.default.createElement(
@@ -183,7 +208,12 @@ function PaymentDetailModal({
       onClick: () => setOrderTotalExpanded(!orderTotalExpanded)
     },
     /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("section-title-container") }, /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("section-title") }, getText("order.total") || "Order Total")),
-    /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("section-right") }, /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("section-amount") }, (0, import_utils.formatAmount)(getTotalAmount(), 2, amountSymbol)), /* @__PURE__ */ import_react.default.createElement(CollapseIcon, { expanded: orderTotalExpanded }))
+    /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("section-right") }, /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("section-amount") }, (0, import_utils.formatAmountWithOptions)(getTotalAmount(), amountSymbol, {
+      precision: 2,
+      hideDecimalForWholeNumbers: false,
+      useThousandsSeparator: true,
+      showCurrencySymbol: true
+    })), /* @__PURE__ */ import_react.default.createElement(CollapseIcon, { expanded: orderTotalExpanded }))
   ), orderTotalExpanded && /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("section-content") }, renderSummaryItems())), /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("divider-horizontal") }), /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("section-container") }, /* @__PURE__ */ import_react.default.createElement(
     "div",
     {
@@ -193,7 +223,12 @@ function PaymentDetailModal({
       tabIndex: 0
     },
     /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("section-title-container") }, /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("section-title") }, getText("order.paid") || "Order Paid")),
-    /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("section-right") }, /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("section-amount") }, "-", (0, import_utils.formatAmount)(getTotalPaidAmount(), 2, amountSymbol)), /* @__PURE__ */ import_react.default.createElement(CollapseIcon, { expanded: orderPaidExpanded }))
+    /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("section-right") }, /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("section-amount") }, "-", (0, import_utils.formatAmountWithOptions)(getTotalPaidAmount(), amountSymbol, {
+      precision: 2,
+      hideDecimalForWholeNumbers: false,
+      useThousandsSeparator: true,
+      showCurrencySymbol: true
+    })), /* @__PURE__ */ import_react.default.createElement(CollapseIcon, { expanded: orderPaidExpanded }))
   ), orderPaidExpanded && renderPaymentItems())), /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("balance-to-pay-section") }, /* @__PURE__ */ import_react.default.createElement(
     "div",
     {
@@ -203,7 +238,17 @@ function PaymentDetailModal({
       tabIndex: 0
     },
     /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("section-title-container") }, /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("balance-to-pay-title") }, getText("balance.to.pay") || "Balance to Pay")),
-    /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("balance-to-pay-right") }, /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("balance-to-pay-amount") }, (0, import_utils.formatAmount)(getBalanceDueAmount(), 2, amountSymbol)), /* @__PURE__ */ import_react.default.createElement(CollapseIcon, { expanded: balanceToPayExpanded, color: "#7F56DA" }))
-  ), balanceToPayExpanded && /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("balance-to-pay-content") }, renderVoucherItems()), /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("balance-due-section") }, /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("balance-due-header") }, /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("balance-due-title") }, getText("balance.due") || "Balance Due"), /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("balance-due-amount") }, (0, import_utils.formatAmount)(customAmount || 0, 2, amountSymbol))))));
+    /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("balance-to-pay-right") }, /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("balance-to-pay-amount") }, (0, import_utils.formatAmountWithOptions)(getBalanceDueAmount(), amountSymbol, {
+      precision: 2,
+      hideDecimalForWholeNumbers: false,
+      useThousandsSeparator: true,
+      showCurrencySymbol: true
+    })), /* @__PURE__ */ import_react.default.createElement(CollapseIcon, { expanded: balanceToPayExpanded, color: "#7F56DA" }))
+  ), balanceToPayExpanded && /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("balance-to-pay-content") }, renderVoucherItems()), /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("balance-due-section") }, /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("balance-due-header") }, /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("balance-due-title") }, getText("balance.due") || "Balance Due"), /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("balance-due-amount") }, (0, import_utils.formatAmountWithOptions)(customAmount || 0, amountSymbol, {
+    precision: 2,
+    hideDecimalForWholeNumbers: false,
+    useThousandsSeparator: true,
+    showCurrencySymbol: true
+  }))))));
 }
 var PaymentDetailModal_default = PaymentDetailModal;

package/lib/components/checkout/components/PaymentOptionsModule/index.d.ts CHANGED Viewed

@@ -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/lib/components/checkout/components/PaymentOptionsModule/index.js CHANGED Viewed

@@ -55,7 +55,8 @@ function PaymentOptionsModule({
   paymentMethods = [],
   customAmount,
   title,
-  disabled = false
+  disabled = false,
+  showCashPayment = false
 }) {
   var _a, _b, _c, _d, _e, _f, _g, _h;
   const context = (0, import_useEngineContext.default)();
@@ -108,14 +109,14 @@ function PaymentOptionsModule({
   );
   const renderPaymentIcon = (method) => {
     if (method.code === "EFTPOS") {
-      return /* @__PURE__ */ import_react.default.createElement(import_materials.Iconfont, { type: "pisell2-credit-card-02", style: { fontSize: "36px", color: "#7F56DA" } });
+      return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("payment-options-module-icon-container"), style: { background: "#FE8279" } }, /* @__PURE__ */ import_react.default.createElement(import_materials.Iconfont, { type: "pisell2-credit", style: { fontSize: "26px", color: "#ffffff" } }));
     }
     switch (String(method.type)) {
       case "credit-card":
       case "eftpos":
-        return /* @__PURE__ */ import_react.default.createElement(import_materials.Iconfont, { type: "pisell2-credit-card-02", style: { fontSize: "36px", color: "#7F56DA" } });
+        return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("payment-options-module-icon-container"), style: { background: "#FE8279" } }, /* @__PURE__ */ import_react.default.createElement(import_materials.Iconfont, { type: "pisell2-credit", style: { fontSize: "26px", color: "#ffffff" } }));
       default:
-        return /* @__PURE__ */ import_react.default.createElement(import_materials.Iconfont, { type: "pisell2-a-wallet-021", style: { fontSize: "36px", color: "#7F56DA" } });
+        return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("payment-options-module-icon-container"), style: { background: "#D277E4" } }, /* @__PURE__ */ import_react.default.createElement(import_materials.Iconfont, { type: "pisell2-custom", style: { fontSize: "26px", color: "#ffffff" } }));
     }
   };
   return /* @__PURE__ */ import_react.default.createElement(
@@ -130,19 +131,21 @@ function PaymentOptionsModule({
       import_ScrollableList.default,
       {
         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((method) => /* @__PURE__ */ import_react.default.createElement(
@@ -217,7 +220,7 @@ function PaymentOptionsModule({
               "payment-options-module-payment-method-right"
             )
           },
-          /* @__PURE__ */ import_react.default.createElement(
+          method.code !== "EFTPOS" && method.type !== "eftpos" && /* @__PURE__ */ import_react.default.createElement(
             "div",
             {
               className: (0, import_classnames.default)(

package/lib/components/checkout/components/PaymentOptionsModule/index.less CHANGED Viewed

@@ -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;
     /* 标题保持正常颜色 */
   }
-}
+}