@apptimate/ui 2.8.0 → 2.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apptimate/ui",
-  "version": "2.8.0",
+  "version": "2.9.0",
   "main": "src/index.tsx",
   "types": "src/index.tsx",
   "dependencies": {

package/src/common-components/PaymentSection.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState, useEffect, useCallback, useMemo } from "react";
+import React, { useState, useEffect, useCallback, useMemo, useRef } from "react";
 import { cn } from "@apptimate/core-lib";
 import { CreditCard, Banknote, Building, Trash2, Loader2, Split, Check, AlertCircle } from "lucide-react";
 
@@ -70,6 +70,12 @@ export function PaymentSection({ totalAmount, payments, onPaymentsChange, compac
   const [bankAccounts, setBankAccounts] = useState<BankAccount[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const [selectionMode, setSelectionMode] = useState<"single" | "split">("single");
+  const paymentsRef = useRef(payments);
+
+  // Keep ref in sync
+  useEffect(() => {
+    paymentsRef.current = payments;
+  }, [payments]);
 
   // ── Load payment modes on mount ──
   useEffect(() => {
@@ -84,7 +90,7 @@ export function PaymentSection({ totalAmount, payments, onPaymentsChange, compac
         if (bankRes.is_success) setBankAccounts(bankRes.result || []);
 
         // Auto-select cash if no payments yet
-        if (payments.length === 0 && modes.length > 0) {
+        if (paymentsRef.current.length === 0 && modes.length > 0) {
           const cashMode = modes.find((m) => m.code === "cash" && m.is_active);
           if (cashMode) {
             onPaymentsChange([{
@@ -92,12 +98,21 @@ export function PaymentSection({ totalAmount, payments, onPaymentsChange, compac
               amount: totalAmount, metadata: {},
             }]);
           }
+        } else if (paymentsRef.current.length > 1) {
+          setSelectionMode("split");
         }
       } finally { setIsLoading(false); }
     };
     load();
   }, []);
 
+  // Also sync selectionMode if payments change from outside
+  useEffect(() => {
+    if (payments.length > 1 && selectionMode === "single") {
+      setSelectionMode("split");
+    }
+  }, [payments.length, selectionMode]);
+
   // ── Calculations ──
   const isCreditPayment = useCallback((payment: PaymentEntry) => payment.mode_code === "credit", []);
   const totalPaid = useMemo(() => payments.reduce((s, p) => s + (isCreditPayment(p) ? 0 : p.amount), 0), [payments, isCreditPayment]);