@pisell/private-materials 6.3.15 → 6.4.2

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

@@ -0,0 +1,411 @@
+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, { useState } from 'react';
+import { ChevronUp, HelpCircle } from '@pisell/icon';
+// @ts-ignore - @pisell/utils types not available
+import { locales, formatAmount } from '@pisell/utils';
+import checkoutLocales from "../../locales";
+import "./index.less";
+import classNames from 'classnames';
+import useEngineContext from "../../../../hooks/useEngineContext";
+
+// 小计数据类型
+
+// 小计项目的 key 类型
+
+// 支付项数据类型
+
+function PaymentDetailModal(_ref) {
+  var amountSymbol = _ref.amountSymbol,
+    orderInfo = _ref.orderInfo,
+    cartData = _ref.cartData,
+    onClose = _ref.onClose,
+    _ref$summaryData = _ref.summaryData,
+    summaryData = _ref$summaryData === void 0 ? [] : _ref$summaryData,
+    labelMaps = _ref.labelMaps,
+    _ref$paymentItems = _ref.paymentItems,
+    paymentItems = _ref$paymentItems === void 0 ? [] : _ref$paymentItems,
+    customAmount = _ref.customAmount,
+    voidPayment = _ref.voidPayment,
+    walletPassData = _ref.walletPassData,
+    clientInfo = _ref.clientInfo;
+  console.log('🔄 PaymentDetailModal: orderInfo', orderInfo, cartData);
+  // 创建本地翻译函数，优先使用 checkout 语言包
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    orderTotalExpanded = _useState2[0],
+    setOrderTotalExpanded = _useState2[1];
+  var _useState3 = useState(true),
+    _useState4 = _slicedToArray(_useState3, 2),
+    orderPaidExpanded = _useState4[0],
+    setOrderPaidExpanded = _useState4[1];
+  var _useState5 = useState(true),
+    _useState6 = _slicedToArray(_useState5, 2),
+    balanceToPayExpanded = _useState6[0],
+    setBalanceToPayExpanded = _useState6[1];
+  var context = useEngineContext();
+  var getText = function getText(key, fallback) {
+    var _context$appHelper$ut, _context$appHelper$ut2, _context$appHelper$ut3, _context$appHelper$ut4, _checkoutLocales;
+    var currentLang = ((_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 checkoutText = (_checkoutLocales = checkoutLocales[currentLang]) === null || _checkoutLocales === void 0 ? void 0 : _checkoutLocales[key];
+    if (checkoutText) {
+      return checkoutText;
+    }
+
+    // 回退到全局语言包
+    return locales.getText(key) || fallback;
+  };
+
+  // 获取客户信息，类似 PaymentModal 中的实现
+  var getCustomerInfo = function getCustomerInfo() {
+    var _client$contacts;
+    var client = clientInfo || {};
+    // 修复逻辑：只有在 undefined 或 null 时才使用默认值，空字符串应该保留
+    var getValidName = function getValidName(value) {
+      return value !== undefined && value !== null && String(value).trim() !== '' ? String(value).trim() : null;
+    };
+    var displayName = getValidName(client === null || client === void 0 ? void 0 : client.display_name) || getValidName(client === null || client === void 0 ? void 0 : client.name) || getText('pisell2.checkout.customer.default-name') || 'Customer';
+    return {
+      nickname: client !== null && client !== void 0 && client.nickname && (client === null || client === void 0 ? void 0 : client.nickname) !== 'Select a customer' ? client === null || client === void 0 ? void 0 : client.nickname : locales.getText('pisell2.checkout.customer.default-name'),
+      display_name: displayName,
+      email: (client === null || client === void 0 ? void 0 : client.email) || (client === null || client === void 0 || (_client$contacts = client.contacts) === null || _client$contacts === void 0 ? void 0 : _client$contacts.email) || ''
+    };
+  };
+
+  // 折叠图标组件
+  var CollapseIcon = function CollapseIcon(_ref2) {
+    var expanded = _ref2.expanded,
+      _ref2$color = _ref2.color,
+      color = _ref2$color === void 0 ? 'black' : _ref2$color;
+    return /*#__PURE__*/React.createElement("div", {
+      className: classNames('collapse-icon', {
+        expanded: expanded
+      })
+    }, /*#__PURE__*/React.createElement(ChevronUp, {
+      style: {
+        color: color,
+        fontSize: '24px'
+      }
+    }));
+  };
+
+  // 检查是否应该显示 Void 按钮
+  var shouldShowVoidButton = function shouldShowVoidButton(item) {
+    return (item.code === 'cash' || item.type === 'custom') && !item.isSynced;
+  };
+
+  // 计算已支付总额 (只计算不带voucher_id的支付项)
+  var getTotalPaidAmount = function getTotalPaidAmount() {
+    return paymentItems.filter(function (item) {
+      return !item.voucher_id;
+    }).reduce(function (total, item) {
+      return total + Math.abs(item.amount);
+    }, 0);
+  };
+
+  // 计算优惠券扣减总额 (只计算带voucher_id的支付项)
+  var getTotalVoucherAmount = function getTotalVoucherAmount() {
+    return paymentItems.filter(function (item) {
+      return item.voucher_id;
+    }).reduce(function (total, item) {
+      return total + Math.abs(item.amount);
+    }, 0);
+  };
+
+  // 计算Balance Due金额 (customAmount + 所有voucher扣减金额)
+  var getBalanceDueAmount = function getBalanceDueAmount() {
+    var baseAmount = customAmount ? parseFloat(customAmount) : 0;
+    var voucherDeductions = getTotalVoucherAmount();
+    return baseAmount + voucherDeductions;
+  };
+
+  // 处理 Void 按钮点击
+  var handleVoidPayment = function handleVoidPayment(paymentItem) {
+    console.log('Void payment:', paymentItem);
+    if (voidPayment) {
+      voidPayment(paymentItem);
+    }
+  };
+
+  // 渲染支付项 (只渲染不带voucher_id的支付项)
+  var renderPaymentItems = function renderPaymentItems() {
+    var regularPayments = paymentItems.filter(function (item) {
+      return !item.voucher_id;
+    });
+    if (!paymentItems || paymentItems.length === 0 || regularPayments.length === 0) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: classNames('section-content')
+      }, /*#__PURE__*/React.createElement("div", {
+        className: classNames('no-payment-text')
+      }, getText('no.payments.recorded') || 'No payments recorded'));
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      className: classNames('section-content')
+    }, /*#__PURE__*/React.createElement("div", {
+      className: classNames('payment-record-container')
+    }, regularPayments.map(function (item) {
+      return /*#__PURE__*/React.createElement("div", {
+        key: item.uuid,
+        className: classNames('payment-item')
+      }, /*#__PURE__*/React.createElement("div", {
+        className: classNames('payment-item-content')
+      }, /*#__PURE__*/React.createElement("div", {
+        className: classNames('payment-item-text')
+      }, item.name, " - ", new Date().toLocaleDateString(), ' ', getText('pisell2.checkout.payment-detail.by') || 'by', ' ', getCustomerInfo().nickname), /*#__PURE__*/React.createElement("div", {
+        className: classNames('payment-item-actions')
+      }, /*#__PURE__*/React.createElement("div", {
+        className: classNames('payment-item-amount')
+      }, "-", formatAmount(Math.abs(item.amount), 2, amountSymbol)), shouldShowVoidButton(item) && /*#__PURE__*/React.createElement("button", {
+        className: classNames('void-button'),
+        onClick: function onClick() {
+          return handleVoidPayment(item);
+        },
+        type: "button"
+      }, getText('void') || 'Void'))));
+    })));
+  };
+
+  // 渲染Balance to Pay部分的优惠券项目 (包含 paymentItems 中的voucher和钱包卡券)
+  var renderVoucherItems = function renderVoucherItems() {
+    var _walletPassData$selec;
+    var items = [];
+
+    // 1. 添加 paymentItems 中带 voucher_id 的支付项
+    // 这块先不用 下面钱包卡券应该包含了
+    // const voucherPayments = paymentItems.filter(item => item.voucher_id);
+    // voucherPayments.forEach((item) => {
+    //   items.push(
+    //     <div key={`payment-${item.uuid}`} className={classNames('balance-item-row')}>
+    //       <div className={classNames('balance-item-text')}>
+    //         {item.name} - {item.voucher_id}
+    //       </div>
+    //       <div className={classNames('balance-item-amount')}>
+    //         -${Math.abs(item.amount).toFixed(2)}
+    //       </div>
+    //     </div>
+    //   );
+    // });
+
+    // 2. 添加选中的钱包卡券 (商品券、储值卡等)
+    if (walletPassData !== null && walletPassData !== void 0 && (_walletPassData$selec = walletPassData.selectedWallet) !== null && _walletPassData$selec !== void 0 && _walletPassData$selec.length) {
+      walletPassData.selectedWallet.forEach(function (wallet) {
+        items.push( /*#__PURE__*/React.createElement("div", {
+          key: "wallet-".concat(wallet.id),
+          className: classNames('balance-item-row')
+        }, /*#__PURE__*/React.createElement("div", {
+          className: classNames('balance-item-text')
+        }, wallet.name || wallet.product_name || getText('wallet.pass') || 'Wallet Pass'), /*#__PURE__*/React.createElement("div", {
+          className: classNames('balance-item-amount')
+        }, "-", wallet.redeem || formatAmount(Math.abs(wallet.savedAmount || 0), 2, amountSymbol))));
+      });
+    }
+
+    // 3. 添加选中的折扣卡
+    // if (
+    //   walletPassData?.availableDiscountList?.length &&
+    //   walletPassData?.selectedDiscountList?.length
+    // ) {
+    //   const selectedDiscounts = walletPassData.availableDiscountList.filter(
+    //     (discount) => walletPassData.selectedDiscountList?.includes(discount.id)
+    //   );
+
+    //   selectedDiscounts.forEach((discount) => {
+    //     items.push(
+    //       <div
+    //         key={`discount-${discount.id}`}
+    //         className={classNames('balance-item-row')}
+    //       >
+    //         <div className={classNames('balance-item-text')}>
+    //           {discount.name ||
+    //             discount.product_name ||
+    //             getText('discount.card') ||
+    //             'Discount Card'}
+    //         </div>
+    //         <div className={classNames('balance-item-amount')}>
+    //           -
+    //           {discount.savedAmount
+    //             ? formatAmount(Math.abs(discount.savedAmount), 2, amountSymbol)
+    //             : formatAmount(0, 2, amountSymbol)}
+    //         </div>
+    //       </div>
+    //     );
+    //   });
+    // }
+
+    if (items.length === 0) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: classNames('balance-item-row', 'empty-state')
+      }, /*#__PURE__*/React.createElement("div", {
+        className: classNames('balance-item-text', 'empty-text')
+      }, getText('pisell2.checkout.payment-detail.no-wallet-pass-items') || 'No WalletPass payment items'));
+    }
+    return /*#__PURE__*/React.createElement(React.Fragment, null, items);
+  };
+
+  // 信息图标组件
+  var InfoIcon = function InfoIcon() {
+    return /*#__PURE__*/React.createElement("div", {
+      className: classNames('info-icon')
+    }, /*#__PURE__*/React.createElement(HelpCircle, {
+      style: {
+        color: '#667085',
+        fontSize: '16px'
+      }
+    }));
+  };
+
+  // 获取显示标签
+  var getDisplayLabel = function getDisplayLabel(item) {
+    return item.label || labelMaps && labelMaps[item.key] || item.key;
+  };
+
+  // 获取总金额
+  var getTotalAmount = function getTotalAmount() {
+    var totalItem = summaryData.find(function (item) {
+      return item.key === 'sub_total';
+    });
+    if (totalItem) {
+      return totalItem.value;
+    }
+    // 降级方案：如果没有找到 total，返回默认值或计算值
+    return 0;
+  };
+
+  // 渲染小计项目
+  var renderSummaryItems = function renderSummaryItems() {
+    if (!summaryData || summaryData.length === 0) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: classNames('order-details-grid')
+      }, /*#__PURE__*/React.createElement("div", {
+        className: classNames('order-details-column')
+      }, /*#__PURE__*/React.createElement("div", {
+        className: classNames('order-row')
+      }, /*#__PURE__*/React.createElement("div", {
+        className: classNames('order-row-text')
+      }, getText('no.items.found') || 'No items found'), /*#__PURE__*/React.createElement("div", {
+        className: classNames('order-row-amount')
+      }, formatAmount(0, 2, amountSymbol)))));
+    }
+
+    // 将项目分成两列显示
+    var leftItems = summaryData.slice(0, Math.ceil(summaryData.length / 2));
+    var rightItems = summaryData.slice(Math.ceil(summaryData.length / 2));
+    return /*#__PURE__*/React.createElement("div", {
+      className: classNames('order-details-grid')
+    }, /*#__PURE__*/React.createElement("div", {
+      className: classNames('order-details-column')
+    }, leftItems.map(function (item) {
+      var prefix = '';
+      // 折扣项不显示正负号
+      if ((item === null || item === void 0 ? void 0 : item.key) !== 'discount') {
+        prefix = item.value >= 0 ? '+' : '';
+      }
+      return /*#__PURE__*/React.createElement("div", {
+        key: item.key,
+        className: classNames('order-row')
+      }, /*#__PURE__*/React.createElement("div", {
+        className: classNames('order-row-label')
+      }, getDisplayLabel(item)), /*#__PURE__*/React.createElement("div", {
+        className: classNames('order-row-amount')
+      }, prefix, formatAmount(item.value, 2, amountSymbol)));
+    })), rightItems.length > 0 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: classNames('divider-vertical')
+    }), /*#__PURE__*/React.createElement("div", {
+      className: classNames('order-details-column')
+    }, rightItems.map(function (item) {
+      var prefix = '';
+      // 折扣项不显示正负号
+      if ((item === null || item === void 0 ? void 0 : item.key) !== 'discount') {
+        prefix = item.value >= 0 ? '+' : '';
+      }
+      return /*#__PURE__*/React.createElement("div", {
+        key: item.key,
+        className: classNames('order-row')
+      }, /*#__PURE__*/React.createElement("div", {
+        className: classNames('order-row-label')
+      }, getDisplayLabel(item)), /*#__PURE__*/React.createElement("div", {
+        className: classNames('order-row-amount')
+      }, prefix, formatAmount(item.value, 2, amountSymbol)));
+    }))));
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames('payment-detail-modal')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames('main-content')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames('section-container')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames('section-header'),
+    onClick: function onClick() {
+      return setOrderTotalExpanded(!orderTotalExpanded);
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames('section-title-container')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames('section-title')
+  }, getText('order.total') || 'Order Total')), /*#__PURE__*/React.createElement("div", {
+    className: classNames('section-right')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames('section-amount')
+  }, formatAmount(getTotalAmount(), 2, amountSymbol)), /*#__PURE__*/React.createElement(CollapseIcon, {
+    expanded: orderTotalExpanded
+  }))), orderTotalExpanded && /*#__PURE__*/React.createElement("div", {
+    className: classNames('section-content')
+  }, renderSummaryItems())), /*#__PURE__*/React.createElement("div", {
+    className: classNames('divider-horizontal')
+  }), /*#__PURE__*/React.createElement("div", {
+    className: classNames('section-container')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames('section-header'),
+    onClick: function onClick() {
+      return setOrderPaidExpanded(!orderPaidExpanded);
+    },
+    role: "button",
+    tabIndex: 0
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames('section-title-container')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames('section-title')
+  }, getText('order.paid') || 'Order Paid')), /*#__PURE__*/React.createElement("div", {
+    className: classNames('section-right')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames('section-amount')
+  }, "-", formatAmount(getTotalPaidAmount(), 2, amountSymbol)), /*#__PURE__*/React.createElement(CollapseIcon, {
+    expanded: orderPaidExpanded
+  }))), orderPaidExpanded && renderPaymentItems())), /*#__PURE__*/React.createElement("div", {
+    className: classNames('balance-to-pay-section')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames('balance-to-pay-header'),
+    onClick: function onClick() {
+      return setBalanceToPayExpanded(!balanceToPayExpanded);
+    },
+    role: "button",
+    tabIndex: 0
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames('section-title-container')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames('balance-to-pay-title')
+  }, getText('balance.to.pay') || 'Balance to Pay')), /*#__PURE__*/React.createElement("div", {
+    className: classNames('balance-to-pay-right')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames('balance-to-pay-amount')
+  }, formatAmount(getBalanceDueAmount(), 2, amountSymbol)), /*#__PURE__*/React.createElement(CollapseIcon, {
+    expanded: balanceToPayExpanded,
+    color: "#7F56DA"
+  }))), balanceToPayExpanded && /*#__PURE__*/React.createElement("div", {
+    className: classNames('balance-to-pay-content')
+  }, renderVoucherItems()), /*#__PURE__*/React.createElement("div", {
+    className: classNames('balance-due-section')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames('balance-due-header')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames('balance-due-title')
+  }, getText('balance.due') || 'Balance Due'), /*#__PURE__*/React.createElement("div", {
+    className: classNames('balance-due-amount')
+  }, formatAmount(customAmount || 0, 2, amountSymbol))))));
+}
+export default PaymentDetailModal;