@apptimate/ui 7.1.0 → 7.3.0

package/src/common-components/PaymentSection.tsx

@@ -56,6 +56,8 @@ export interface PaymentSectionProps {
   onPaymentsChange: (payments: PaymentEntry[]) => void;
   /** Optional: show compact variant */
   compact?: boolean;
+  /** When true, initially show only Cash/Card with a 'More Options' toggle for other modes (used in POS) */
+  collapseModes?: boolean;
   /** Fetcher for payment modes */
   fetchPaymentModes: () => Promise<{ is_success: boolean; result?: any }>;
   /** Fetcher for bank accounts */
@@ -72,11 +74,12 @@ export interface PaymentSectionProps {
 
 /* ── Component ── */
 
-export function PaymentSection({ totalAmount, payments, onPaymentsChange, compact, fetchPaymentModes, fetchBankAccounts, materialTypes = [], allowedSpecialModes = [], fetchChequeLeaves, variant = "default" }: PaymentSectionProps) {
+export function PaymentSection({ totalAmount, payments, onPaymentsChange, compact, collapseModes, fetchPaymentModes, fetchBankAccounts, materialTypes = [], allowedSpecialModes = [], fetchChequeLeaves, variant = "default" }: PaymentSectionProps) {
   const [paymentModes, setPaymentModes] = useState<PaymentMode[]>([]);
   const [bankAccounts, setBankAccounts] = useState<BankAccount[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const [selectionMode, setSelectionMode] = useState<"single" | "split">("single");
+  const [showMoreModes, setShowMoreModes] = useState(false);
   const paymentsRef = useRef(payments);
 
   // Keep ref in sync
@@ -180,11 +183,14 @@ export function PaymentSection({ totalAmount, payments, onPaymentsChange, compac
 
   // ── Auto-sync single mode amount when totalAmount changes ──
   useEffect(() => {
-    if (selectionMode === "single" && payments.length === 1) {
-      updatePayment(0, { amount: totalAmount });
+    if (selectionMode === "single" && paymentsRef.current.length === 1 && totalAmount > 0) {
+      const current = paymentsRef.current[0];
+      if (current.amount !== totalAmount) {
+        onPaymentsChange([{ ...current, amount: totalAmount }]);
+      }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [totalAmount, selectionMode]); // intentionally omitting `payments` to allow manual partial payments
+  }, [totalAmount, selectionMode, payments.length]); // payments.length triggers sync after initial cash auto-selection
 
   const activateSplitMode = useCallback(() => {
     setSelectionMode("split");
@@ -214,41 +220,79 @@ export function PaymentSection({ totalAmount, payments, onPaymentsChange, compac
   return (
     <div className="space-y-3">
       {/* ── Mode Selection Buttons ── */}
-      <div className="flex flex-wrap gap-2">
-        {paymentModes
-          .filter((m) => m.is_active)
-          .map((mode) => {
-            const isActive = selectionMode === "single" && payments.length === 1 && payments[0].mode_id === mode.id;
-            return (
-              <button key={mode.id} type="button" onClick={() => selectSingleMode(mode)}
+      {(() => {
+        const activeModes = paymentModes.filter((m) => m.is_active);
+        const primaryModes = activeModes.filter((m) => ["cash", "card"].includes(m.code));
+        const secondaryModes = activeModes.filter((m) => !["cash", "card"].includes(m.code));
+        // If a secondary mode is currently selected, auto-expand
+        const isSecondaryActive = selectionMode === "single" && payments.length === 1 && secondaryModes.some(m => m.id === payments[0].mode_id);
+        const shouldShowMore = !collapseModes || showMoreModes || isSecondaryActive || selectionMode === "split";
+
+        return (
+          <div className="flex flex-wrap gap-2">
+            {primaryModes.map((mode) => {
+              const isActive = selectionMode === "single" && payments.length === 1 && payments[0].mode_id === mode.id;
+              return (
+                <button key={mode.id} type="button" onClick={() => selectSingleMode(mode)}
+                  className={cn(
+                    "inline-flex items-center gap-2 px-4 py-2.5 text-[12px] font-semibold rounded-[10px] border transition-all",
+                    isActive
+                      ? "bg-primary text-primary-foreground border-primary shadow-sm"
+                      : "bg-surface-0 border-border-subtle text-foreground-1 hover:border-primary/40 hover:bg-primary/5 hover:text-primary"
+                  )}>
+                  {getModeIcon(mode.code)}
+                  {mode.name}
+                </button>
+              );
+            })}
+
+            {/* More Options toggle */}
+            {secondaryModes.length > 0 && !shouldShowMore && (
+              <button type="button" onClick={() => setShowMoreModes(true)}
+                className="inline-flex items-center gap-1.5 px-3.5 py-2.5 text-[12px] font-semibold rounded-[10px] border border-dashed border-border-subtle text-foreground-subtle hover:border-primary/40 hover:text-primary hover:bg-primary/5 transition-all">
+                <span className="text-[14px]">···</span>
+                More Options
+              </button>
+            )}
+
+            {/* Secondary modes (shown when expanded) */}
+            {shouldShowMore && secondaryModes.map((mode) => {
+              const isActive = selectionMode === "single" && payments.length === 1 && payments[0].mode_id === mode.id;
+              return (
+                <button key={mode.id} type="button" onClick={() => selectSingleMode(mode)}
+                  className={cn(
+                    "inline-flex items-center gap-2 px-4 py-2.5 text-[12px] font-semibold rounded-[10px] border transition-all",
+                    isActive
+                      ? "bg-primary text-primary-foreground border-primary shadow-sm"
+                      : "bg-surface-0 border-border-subtle text-foreground-1 hover:border-primary/40 hover:bg-primary/5 hover:text-primary"
+                  )}>
+                  {getModeIcon(mode.code)}
+                  {mode.name}
+                </button>
+              );
+            })}
+
+            {/* Split Button (shown when expanded) */}
+            {shouldShowMore && (
+              <button type="button" onClick={activateSplitMode}
                 className={cn(
                   "inline-flex items-center gap-2 px-4 py-2.5 text-[12px] font-semibold rounded-[10px] border transition-all",
-                  isActive
+                  selectionMode === "split"
                     ? "bg-primary text-primary-foreground border-primary shadow-sm"
                     : "bg-surface-0 border-border-subtle text-foreground-1 hover:border-primary/40 hover:bg-primary/5 hover:text-primary"
                 )}>
-                {getModeIcon(mode.code)}
-                {mode.name}
+                <Split size={14} />
+                Multiple Methods
               </button>
-            );
-          })}
-        {/* Split Button */}
-        <button type="button" onClick={activateSplitMode}
-          className={cn(
-            "inline-flex items-center gap-2 px-4 py-2.5 text-[12px] font-semibold rounded-[10px] border transition-all",
-            selectionMode === "split"
-              ? "bg-primary text-primary-foreground border-primary shadow-sm"
-              : "bg-surface-0 border-border-subtle text-foreground-1 hover:border-primary/40 hover:bg-primary/5 hover:text-primary"
-          )}>
-          <Split size={14} />
-          Multiple Methods
-        </button>
-      </div>
+            )}
+          </div>
+        );
+      })()}
 
       {/* ── Single Mode: Entry with fields (no delete) ── */}
       {selectionMode === "single" && payments.length === 1 && (
         <PaymentEntryRow entry={payments[0]} mode={paymentModes.find((m) => m.id === payments[0].mode_id)}
-          bankAccounts={bankAccounts} materialTypes={materialTypes} onUpdate={(updates) => updatePayment(0, updates)} onRemove={() => {}} showRemove={false} fetchChequeLeaves={fetchChequeLeaves} />
+          bankAccounts={bankAccounts} materialTypes={materialTypes} onUpdate={(updates) => updatePayment(0, updates)} onRemove={() => { }} showRemove={false} fetchChequeLeaves={fetchChequeLeaves} />
       )}
 
       {/* ── Split Mode: Multi-entry UI ── */}
@@ -381,137 +425,138 @@ function PaymentEntryRow({ entry, mode, bankAccounts, materialTypes = [], onUpda
             }
 
             return (
-            <div key={field.key} className="flex flex-col gap-1">
-              <label className="text-[11px] text-foreground-subtle font-bold uppercase tracking-wider flex items-center">
-                {field.label}
-                {field.required && <span className="text-danger-alt ml-0.5">*</span>}
-                {field.key === "cheque_number" && fetchChequeLeaves && !!entry.metadata[field.key] && (
-                  <span className="ml-1.5 flex items-center">
-                    {entry.metadata.cheque_leaf_id ? (
-                      <HintIcon 
-                        text="Selected from your cheque book. This will be automatically issued."
-                        icon={<CheckCircle size={13} className="text-green-500" />}
-                      />
-                    ) : (
-                      <HintIcon 
-                        text="Not selected from cheque book. This cheque will not be auto-issued."
-                        icon={<AlertTriangle size={13} className="text-amber-500" />}
-                      />
-                    )}
-                  </span>
-                )}
-              </label>
-              {field.type === "bank_account_select" ? (
-                <select value={entry.metadata[field.key] || ""}
-                  onChange={(e) => onUpdate({ metadata: { ...entry.metadata, [field.key]: e.target.value ? Number(e.target.value) : "" } })}
-                  disabled={field.readonly}
-                  required={field.required}
-                  className="w-full bg-surface-1 border-[1.5px] border-border-subtle rounded-[8px] px-2.5 py-2.5 text-[12px] text-foreground-1 outline-none focus:border-primary/40 transition-all disabled:opacity-50 disabled:cursor-not-allowed">
-                  <option value="">Select...</option>
-                  {bankAccounts.map((b) => (<option key={b.id} value={b.id}>{b.bank_name} - {b.account_number}</option>))}
-                </select>
-              ) : field.type === "material_type_select" ? (
-                <select value={entry.metadata[field.key] || ""}
-                  onChange={(e) => onUpdate({ metadata: { ...entry.metadata, [field.key]: e.target.value ? Number(e.target.value) : "" } })}
-                  disabled={field.readonly}
-                  required={field.required}
-                  className="w-full bg-surface-1 border-[1.5px] border-border-subtle rounded-[8px] px-2.5 py-2.5 text-[12px] text-foreground-1 outline-none focus:border-primary/40 transition-all disabled:opacity-50 disabled:cursor-not-allowed">
-                  <option value="">Select Material...</option>
-                  {materialTypes.map((m) => (<option key={m.id} value={m.id}>{m.name}</option>))}
-                </select>
-              ) : field.type === "select" ? (
-                <select value={entry.metadata[field.key] || ""}
-                  onChange={(e) => onUpdate({ metadata: { ...entry.metadata, [field.key]: e.target.value } })}
-                  disabled={field.readonly}
-                  required={field.required}
-                  className="w-full bg-surface-1 border-[1.5px] border-border-subtle rounded-[8px] px-2.5 py-2.5 text-[12px] text-foreground-1 outline-none focus:border-primary/40 transition-all disabled:opacity-50 disabled:cursor-not-allowed">
-                  <option value="">Select...</option>
-                  {field.options?.map((o) => (<option key={o.value} value={o.value}>{o.label}</option>))}
-                </select>
-              ) : field.type === "multi_select" as any ? (
-                <AsyncSearchableSelect
-                  multiple
-                  option={{ label: 'label', value: 'value' }}
-                  defaultValue={
-                    Array.isArray(entry.metadata[field.key])
-                      ? (field.options || []).filter(o => (entry.metadata[field.key] as any).includes(o.value))
-                      : []
-                  }
-                  onChange={(val, selectedObjs: any) => {
-                    const sum = Array.isArray(selectedObjs) 
-                      ? selectedObjs.reduce((acc, curr) => acc + (curr.unapplied_amount || 0), 0)
-                      : 0;
-                    
-                    onUpdate({ 
-                      amount: sum, 
-                      metadata: { ...entry.metadata, [field.key]: val as any } 
-                    });
-                  }}
-                  disabled={field.readonly}
-                  required={field.required}
-                  placeholder="Select..."
-                  loadOptions={async () => field.options || []}
-                />
-              ) : field.key === "cheque_number" && fetchChequeLeaves ? (
-                <>
+              <div key={field.key} className="flex flex-col gap-1">
+                <label className="text-[11px] text-foreground-subtle font-bold uppercase tracking-wider flex items-center">
+                  {field.label}
+                  {field.required && <span className="text-danger-alt ml-0.5">*</span>}
+                  {field.key === "cheque_number" && fetchChequeLeaves && !!entry.metadata[field.key] && (
+                    <span className="ml-1.5 flex items-center">
+                      {entry.metadata.cheque_leaf_id ? (
+                        <HintIcon
+                          text="Selected from your cheque book. This will be automatically issued."
+                          icon={<CheckCircle size={13} className="text-green-500" />}
+                        />
+                      ) : (
+                        <HintIcon
+                          text="Not selected from cheque book. This cheque will not be auto-issued."
+                          icon={<AlertTriangle size={13} className="text-amber-500" />}
+                        />
+                      )}
+                    </span>
+                  )}
+                </label>
+                {field.type === "bank_account_select" ? (
+                  <select value={entry.metadata[field.key] || ""}
+                    onChange={(e) => onUpdate({ metadata: { ...entry.metadata, [field.key]: e.target.value ? Number(e.target.value) : "" } })}
+                    disabled={field.readonly}
+                    required={field.required}
+                    className="w-full bg-surface-1 border-[1.5px] border-border-subtle rounded-[8px] px-2.5 py-2.5 text-[12px] text-foreground-1 outline-none focus:border-primary/40 transition-all disabled:opacity-50 disabled:cursor-not-allowed">
+                    <option value="">Select...</option>
+                    {bankAccounts.map((b) => (<option key={b.id} value={b.id}>{b.bank_name} - {b.account_number}</option>))}
+                  </select>
+                ) : field.type === "material_type_select" ? (
+                  <select value={entry.metadata[field.key] || ""}
+                    onChange={(e) => onUpdate({ metadata: { ...entry.metadata, [field.key]: e.target.value ? Number(e.target.value) : "" } })}
+                    disabled={field.readonly}
+                    required={field.required}
+                    className="w-full bg-surface-1 border-[1.5px] border-border-subtle rounded-[8px] px-2.5 py-2.5 text-[12px] text-foreground-1 outline-none focus:border-primary/40 transition-all disabled:opacity-50 disabled:cursor-not-allowed">
+                    <option value="">Select Material...</option>
+                    {materialTypes.map((m) => (<option key={m.id} value={m.id}>{m.name}</option>))}
+                  </select>
+                ) : field.type === "select" ? (
+                  <select value={entry.metadata[field.key] || ""}
+                    onChange={(e) => onUpdate({ metadata: { ...entry.metadata, [field.key]: e.target.value } })}
+                    disabled={field.readonly}
+                    required={field.required}
+                    className="w-full bg-surface-1 border-[1.5px] border-border-subtle rounded-[8px] px-2.5 py-2.5 text-[12px] text-foreground-1 outline-none focus:border-primary/40 transition-all disabled:opacity-50 disabled:cursor-not-allowed">
+                    <option value="">Select...</option>
+                    {field.options?.map((o) => (<option key={o.value} value={o.value}>{o.label}</option>))}
+                  </select>
+                ) : field.type === "multi_select" as any ? (
                   <AsyncSearchableSelect
-                    defaultValue={entry.metadata[field.key] ? { cheque_number: entry.metadata[field.key] } : undefined}
-                    onChange={(val, selected: any) => {
-                      const leafObj = Array.isArray(selected) ? selected[0] : selected;
-                      const newMetadata = { ...entry.metadata, [field.key]: val, cheque_leaf_id: leafObj?.id || "" };
-                      if (leafObj?.cheque_book?.bank_account) {
-                        const ba = leafObj.cheque_book.bank_account;
-                        newMetadata.bank_account_id = ba.id;
-                        newMetadata._display_bank_name = ba.bank_name;
-                        newMetadata._display_branch = ba.branch;
-                      } else {
-                        delete newMetadata.bank_account_id;
-                        delete newMetadata._display_bank_name;
-                        delete newMetadata._display_branch;
-                      }
-                      onUpdate({ metadata: newMetadata });
-                    }}
-                    loadOptions={async (search, page) => {
-                      if (!fetchChequeLeaves) return [];
-                      const res = await fetchChequeLeaves(search, page);
-                      return res.is_success && res.result ? res.result : [];
-                    }}
-                    option={{
-                      label: "cheque_number",
-                      value: "cheque_number",
-                      renderOption: (item: any) => (
-                        <div className="flex flex-col">
-                          <span>{item.cheque_number}</span>
-                          {item.cheque_book?.bank_account?.bank_name && (
-                            <span className="text-[11px] text-foreground-subtle mt-0.5">
-                              {item.cheque_book.bank_account.bank_name} {item.cheque_book.bank_account.branch ? `— ${item.cheque_book.bank_account.branch}` : ""}
-                            </span>
-                          )}
-                        </div>
-                      )
+                    multiple
+                    option={{ label: 'label', value: 'value' }}
+                    defaultValue={
+                      Array.isArray(entry.metadata[field.key])
+                        ? (field.options || []).filter(o => (entry.metadata[field.key] as any).includes(o.value))
+                        : []
+                    }
+                    onChange={(val, selectedObjs: any) => {
+                      const sum = Array.isArray(selectedObjs)
+                        ? selectedObjs.reduce((acc, curr) => acc + (curr.unapplied_amount || 0), 0)
+                        : 0;
+
+                      onUpdate({
+                        amount: sum,
+                        metadata: { ...entry.metadata, [field.key]: val as any }
+                      });
                     }}
-                    placeholder="Search cheque number..."
                     disabled={field.readonly}
                     required={field.required}
+                    placeholder="Select..."
+                    loadOptions={async () => field.options || []}
                   />
-                  {entry.metadata._display_bank_name && (
-                    <div className="text-[11px] text-foreground-subtle mt-1 flex items-center gap-1.5 font-medium px-1">
-                      <Building size={12} className="text-foreground-disabled" />
-                      {entry.metadata._display_bank_name} {entry.metadata._display_branch ? `— ${entry.metadata._display_branch}` : ""}
-                    </div>
-                  )}
-                </>
-              ) : (
-                <input type={field.type === "number" ? "number" : field.type === "date" ? "date" : "text"}
-                  {...(field.type === "number" ? { step: "any" } : {})}
-                  value={entry.metadata[field.key] || ""}
-                  onChange={(e) => onUpdate({ metadata: { ...entry.metadata, [field.key]: e.target.value } })}
-                  readOnly={field.readonly}
-                  required={field.required}
-                  className={cn("w-full bg-surface-1 border-[1.5px] border-border-subtle rounded-[8px] px-2.5 py-2.5 text-[12px] text-foreground-1 outline-none focus:border-primary/40 transition-all [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none", field.readonly && "opacity-60 bg-surface-0 cursor-not-allowed border-border")} />
-              )}
-            </div>
-          )})}
+                ) : field.key === "cheque_number" && fetchChequeLeaves ? (
+                  <>
+                    <AsyncSearchableSelect
+                      defaultValue={entry.metadata[field.key] ? { cheque_number: entry.metadata[field.key] } : undefined}
+                      onChange={(val, selected: any) => {
+                        const leafObj = Array.isArray(selected) ? selected[0] : selected;
+                        const newMetadata = { ...entry.metadata, [field.key]: val, cheque_leaf_id: leafObj?.id || "" };
+                        if (leafObj?.cheque_book?.bank_account) {
+                          const ba = leafObj.cheque_book.bank_account;
+                          newMetadata.bank_account_id = ba.id;
+                          newMetadata._display_bank_name = ba.bank_name;
+                          newMetadata._display_branch = ba.branch;
+                        } else {
+                          delete newMetadata.bank_account_id;
+                          delete newMetadata._display_bank_name;
+                          delete newMetadata._display_branch;
+                        }
+                        onUpdate({ metadata: newMetadata });
+                      }}
+                      loadOptions={async (search, page) => {
+                        if (!fetchChequeLeaves) return [];
+                        const res = await fetchChequeLeaves(search, page);
+                        return res.is_success && res.result ? res.result : [];
+                      }}
+                      option={{
+                        label: "cheque_number",
+                        value: "cheque_number",
+                        renderOption: (item: any) => (
+                          <div className="flex flex-col">
+                            <span>{item.cheque_number}</span>
+                            {item.cheque_book?.bank_account?.bank_name && (
+                              <span className="text-[11px] text-foreground-subtle mt-0.5">
+                                {item.cheque_book.bank_account.bank_name} {item.cheque_book.bank_account.branch ? `— ${item.cheque_book.bank_account.branch}` : ""}
+                              </span>
+                            )}
+                          </div>
+                        )
+                      }}
+                      placeholder="Search cheque number..."
+                      disabled={field.readonly}
+                      required={field.required}
+                    />
+                    {entry.metadata._display_bank_name && (
+                      <div className="text-[11px] text-foreground-subtle mt-1 flex items-center gap-1.5 font-medium px-1">
+                        <Building size={12} className="text-foreground-disabled" />
+                        {entry.metadata._display_bank_name} {entry.metadata._display_branch ? `— ${entry.metadata._display_branch}` : ""}
+                      </div>
+                    )}
+                  </>
+                ) : (
+                  <input type={field.type === "number" ? "number" : field.type === "date" ? "date" : "text"}
+                    {...(field.type === "number" ? { step: "any" } : {})}
+                    value={entry.metadata[field.key] || ""}
+                    onChange={(e) => onUpdate({ metadata: { ...entry.metadata, [field.key]: e.target.value } })}
+                    readOnly={field.readonly}
+                    required={field.required}
+                    className={cn("w-full bg-surface-1 border-[1.5px] border-border-subtle rounded-[8px] px-2.5 py-2.5 text-[12px] text-foreground-1 outline-none focus:border-primary/40 transition-all [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none", field.readonly && "opacity-60 bg-surface-0 cursor-not-allowed border-border")} />
+                )}
+              </div>
+            )
+          })}
         </div>
       )}
     </div>