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, formatAmountWithOptions } from '@pisell/utils';
import checkoutLocales from "../../locales";
import "./index.less";
import classNames from 'classnames';
import useEngineContext from "../../../../hooks/useEngineContext";
import Decimal from 'decimal.js';

// 小计数据类型

// 小计项目的 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;
  };
  var isActivePaymentItem = function isActivePaymentItem(item) {
    return item.status !== 'voided';
  };

  // 计算已支付总额
  var getTotalPaidAmount = function getTotalPaidAmount() {
    return paymentItems.filter(isActivePaymentItem).reduce(function (total, item) {
      var amount = new Decimal(Math.abs(item.amount));
      var roundingAmount = new Decimal(Number(item.rounding_amount) > 0 ? 0 : item.rounding_amount || 0);
      return new Decimal(total).plus(amount).plus(roundingAmount).toNumber();
    }, 0);
  };

  // 计算Balance Due金额 (customAmount + 所有voucher扣减金额)
  var getBalanceDueAmount = function getBalanceDueAmount() {
    // debugger
    // const baseAmount = customAmount ? parseFloat(customAmount) : 0;
    // const voucherDeductions = getTotalVoucherAmount();
    // return baseAmount + voucherDeductions;
    return new Decimal(orderInfo.totalAmount || 0).sub(new Decimal(getTotalPaidAmount())).toNumber().toFixed(2);
  };

  // 处理 Void 按钮点击
  var handleVoidPayment = function handleVoidPayment(paymentItem) {
    console.log('Void payment:', paymentItem);
    if (voidPayment) {
      voidPayment(paymentItem);
    }
  };

  // 渲染有效支付项
  var renderPaymentItems = function renderPaymentItems() {
    var activePaymentItems = paymentItems.filter(isActivePaymentItem);
    var depositPayments = activePaymentItems.filter(function (item) {
      return item.order_payment_type === 'deposit';
    });
    var regularPayments = activePaymentItems.filter(function (item) {
      return item.order_payment_type !== 'deposit';
    });
    if (activePaymentItems.length === 0 || regularPayments.length === 0 && depositPayments.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'));
    }
    var depositPaymentSummary = depositPayments.reduce(function (acc, item) {
      return new Decimal(acc).plus(new Decimal(item.amount)).plus(new Decimal(Number(item.rounding_amount) > 0 ? 0 : item.rounding_amount || 0)).toNumber();
    }, 0);
    var regularPaymentSummary = regularPayments.reduce(function (acc, item) {
      return new Decimal(acc).plus(new Decimal(item.amount)).plus(new Decimal(Number(item.rounding_amount) > 0 ? 0 : item.rounding_amount || 0)).toNumber();
    }, 0);
    return /*#__PURE__*/React.createElement("div", {
      className: classNames('section-content')
    }, /*#__PURE__*/React.createElement("div", {
      className: classNames('payment-record-container')
    }, depositPayments.length > 0 && /*#__PURE__*/React.createElement("div", {
      className: classNames('payment-item-header')
    }, /*#__PURE__*/React.createElement("div", null, getText('pisell2.subtotal.deposit') || 'Deposit'), /*#__PURE__*/React.createElement("div", null, formatAmountWithOptions(depositPaymentSummary, amountSymbol, {
      precision: 2,
      hideDecimalForWholeNumbers: false,
      useThousandsSeparator: true,
      showCurrencySymbol: true
    }))), depositPayments.map(function (item) {
      return /*#__PURE__*/React.createElement("div", {
        key: item.uuid,
        className: classNames('payment-item')
      }, /*#__PURE__*/React.createElement("div", {
        className: classNames('payment-item-bullet')
      }), /*#__PURE__*/React.createElement("div", {
        className: classNames('payment-item-content')
      }, /*#__PURE__*/React.createElement("div", {
        className: classNames('payment-item-text')
      }, item.name, " - ", item.created_at || 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')
      }, "-", formatAmountWithOptions(new Decimal(Math.abs(item.amount)).plus(new Decimal(Number(item.rounding_amount) > 0 ? 0 : item.rounding_amount || 0)).toNumber(), amountSymbol, {
        precision: 2,
        hideDecimalForWholeNumbers: false,
        useThousandsSeparator: true,
        showCurrencySymbol: true
      })), shouldShowVoidButton(item) && /*#__PURE__*/React.createElement("button", {
        className: classNames('void-button'),
        onClick: function onClick() {
          return handleVoidPayment(item);
        },
        type: "button"
      }, getText('void') || 'Void'))));
    }), regularPayments.length > 0 && /*#__PURE__*/React.createElement("div", {
      className: classNames('payment-item-header')
    }, /*#__PURE__*/React.createElement("div", null, getText('payment.text') || 'Payment'), /*#__PURE__*/React.createElement("div", null, formatAmountWithOptions(regularPaymentSummary, amountSymbol, {
      precision: 2,
      hideDecimalForWholeNumbers: false,
      useThousandsSeparator: true,
      showCurrencySymbol: true
    }))), regularPayments.map(function (item) {
      return /*#__PURE__*/React.createElement("div", {
        key: item.uuid,
        className: classNames('payment-item')
      }, /*#__PURE__*/React.createElement("div", {
        className: classNames('payment-item-bullet')
      }), /*#__PURE__*/React.createElement("div", {
        className: classNames('payment-item-content')
      }, /*#__PURE__*/React.createElement("div", {
        className: classNames('payment-item-text')
      }, item.name, " - ", item.created_at || 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')
      }, "-", formatAmountWithOptions(new Decimal(Math.abs(item.amount)).plus(new Decimal(Number(item.rounding_amount) > 0 ? 0 : item.rounding_amount || 0)).toNumber(), amountSymbol, {
        precision: 2,
        hideDecimalForWholeNumbers: false,
        useThousandsSeparator: true,
        showCurrencySymbol: true
      })), 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 && !item.isSynced);
    // 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')}>
    //         -{formatAmountWithOptions(Math.abs(item.amount), amountSymbol, {
    //           precision: 2,
    //           hideDecimalForWholeNumbers: false,
    //           useThousandsSeparator: true,
    //           showCurrencySymbol: true,
    //         })}
    //       </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 || formatAmountWithOptions(Math.abs(wallet.savedAmount || 0), amountSymbol, {
          precision: 2,
          hideDecimalForWholeNumbers: false,
          useThousandsSeparator: true,
          showCurrencySymbol: true
        }))));
      });
    }

    // 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')
      }, formatAmountWithOptions(0, amountSymbol, {
        precision: 2,
        hideDecimalForWholeNumbers: false,
        useThousandsSeparator: true,
        showCurrencySymbol: true
      })))));
    }

    // 将项目分成两列显示
    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, formatAmountWithOptions(item.value, amountSymbol, {
        precision: 2,
        hideDecimalForWholeNumbers: false,
        useThousandsSeparator: true,
        showCurrencySymbol: true
      })));
    })), 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, formatAmountWithOptions(item.value, amountSymbol, {
        precision: 2,
        hideDecimalForWholeNumbers: false,
        useThousandsSeparator: true,
        showCurrencySymbol: true
      })));
    }))));
  };
  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')
  }, formatAmountWithOptions(getTotalAmount(), amountSymbol, {
    precision: 2,
    hideDecimalForWholeNumbers: false,
    useThousandsSeparator: true,
    showCurrencySymbol: true
  })), /*#__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')
  }, "-", formatAmountWithOptions(getTotalPaidAmount(), amountSymbol, {
    precision: 2,
    hideDecimalForWholeNumbers: false,
    useThousandsSeparator: true,
    showCurrencySymbol: true
  })), /*#__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')
  }, formatAmountWithOptions(getBalanceDueAmount(), amountSymbol, {
    precision: 2,
    hideDecimalForWholeNumbers: false,
    useThousandsSeparator: true,
    showCurrencySymbol: true
  })), /*#__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')
  }, formatAmountWithOptions(customAmount || 0, amountSymbol, {
    precision: 2,
    hideDecimalForWholeNumbers: false,
    useThousandsSeparator: true,
    showCurrencySymbol: true
  }))))));
}
export default PaymentDetailModal;