page.tsx

Go to the documentation of this file.

"use client";
 
import React, { useEffect, useMemo, useState } from "react";
import { apiClient } from "@/lib/client/apiClient";
 
interface Account {
  id: number;
  name: string;
  balance: number;
  email?: string;
  paymentHistory?: string;
  lastStatement?: string;
}
 
interface PaymentType {
  id: number;
  name: string;
}
 
export default function EnterPaymentPage() {
  const [searchTerm, setSearchTerm] = useState("");
  const [searchResults, setSearchResults] = useState<Account[]>([]);
  const [searchLoading, setSearchLoading] = useState(false);
  const [selectedAccount, setSelectedAccount] = useState<Account | null>(null);
 
  const [paymentTypes, setPaymentTypes] = useState<PaymentType[]>([]);
  const [paymentTypeId, setPaymentTypeId] = useState<string>("0");
  const [amount, setAmount] = useState<string>("");
  const [paymentDate, setPaymentDate] = useState<string>(() => {
    const d = new Date();
    return d.toISOString().slice(0, 10);
  });
  const [note, setNote] = useState<string>("");
 
  const [saving, setSaving] = useState(false);
  const [statusMessage, setStatusMessage] = useState<string>("");
  const [statusVariant, setStatusVariant] = useState<"success" | "error" | "info" | "">("");
 
  // Load payment types once
  useEffect(() => {
    const loadPaymentTypes = async () => {
      try {
        const response = await apiClient.getPaymentTypesList();
        if (response.success && response.data) {
          const filtered = response.data.filter((rec: any) => {
            // Align with legacy rules: exclude account debits, invisible, negative effects, rounding, sale discount
            const invisible = rec.f211 !== 0;
            const isAccountDebit = rec.f202 !== 0;
            const negativeEffect = rec.f210 !== 0;
            const rounding = rec.f100 === 7;
            const saleDiscount = rec.f100 === 11;
            return !invisible && !isAccountDebit && !negativeEffect && !rounding && !saleDiscount;
          }).map((rec: any) => ({ id: rec.f100 as number, name: rec.f101 as string }));
 
          setPaymentTypes(filtered);
 
          // Restore last selection from localStorage if present
          if (typeof window !== "undefined") {
            const last = window.localStorage.getItem("AccPay.LastPayType");
            if (last && filtered.some((p: any) => p.id.toString() === last)) {
              setPaymentTypeId(last);
            }
          }
        }
      } catch (err) {
        console.error("Failed to load payment types", err);
      }
    };
 
    loadPaymentTypes();
  }, []);
 
  // Search accounts with debounce
  useEffect(() => {
    if (searchTerm.trim().length < 2) {
      setSearchResults([]);
      return;
    }
 
    const handle = setTimeout(() => {
      const doSearch = async () => {
        setSearchLoading(true);
        try {
          const response = await apiClient.getAccounts({
            type: 'search',
            search: searchTerm.trim()
          });
          if (response.success && response.data) {
            const mapped: Account[] = response.data.map((item: any) => ({
              id: Number(item.f100),
              name: item.f101,
              balance: Number(item.f114) || 0,
              email: item.f152,
              paymentHistory: item.f1105,
              lastStatement: item.f1106,
            }));
            setSearchResults(mapped);
          }
        } catch (err) {
          console.error("Account search failed", err);
        } finally {
          setSearchLoading(false);
        }
      };
 
      doSearch();
    }, 300);
 
    return () => clearTimeout(handle);
  }, [searchTerm]);
 
  const formatCurrency = (value: number) => {
    return new Intl.NumberFormat("en-US", {
      style: "currency",
      currency: "USD",
      minimumFractionDigits: 2,
    }).format(value);
  };
 
  const canSubmit = useMemo(() => {
    return !!selectedAccount && Number(amount) > 0 && paymentTypeId !== "0" && !saving;
  }, [selectedAccount, amount, paymentTypeId, saving]);
 
  const handleSelectAccount = (account: Account) => {
    setSelectedAccount(account);
    setStatusMessage("");
  };
 
  const handleSubmit = async () => {
    if (!selectedAccount) {
      setStatusMessage("Please select an account");
      setStatusVariant("error");
      return;
    }
    if (Number(amount) <= 0) {
      setStatusMessage("Please enter a positive amount");
      setStatusVariant("error");
      return;
    }
    if (paymentTypeId === "0") {
      setStatusMessage("Please select a payment type");
      setStatusVariant("error");
      return;
    }
 
    setSaving(true);
    setStatusMessage("Saving payment...");
    setStatusVariant("info");
 
    // Persist last payment type
    if (typeof window !== "undefined") {
      window.localStorage.setItem("AccPay.LastPayType", paymentTypeId);
    }
 
    const xml = [
      "<DATI>",
      "<f8_s>retailmax.elink.account.request</f8_s>",
      "<f11_B>I</f11_B>",
      `<f100_E>${selectedAccount.id}</f100_E>`,
      "<f101_E>120</f101_E>",
      `<f150_E>${paymentTypeId}</f150_E>`,
      `<f151_s>${amount}</f151_s>`,
      `<f152_s>${paymentDate}</f152_s>`,
      note ? `<f160_s>${note}</f160_s>` : "",
      "</DATI>",
    ].join("");
 
    try {
      const response = await fetch("/DATI", {
        method: "POST",
        headers: {
          "Content-Type": "application/xml",
          Accept: "application/json",
        },
        credentials: "include",
        body: xml,
      });
 
      if (!response.ok) {
        throw new Error(`HTTP ${response.status}`);
      }
 
      setStatusMessage("Payment recorded successfully.");
      setStatusVariant("success");
      setSaving(false);
    } catch (err) {
      console.error("Failed to save payment", err);
      setStatusMessage("Payment failed. Please try again.");
      setStatusVariant("error");
      setSaving(false);
    }
  };
 
  return (
    <div className="p-6 max-w-6xl mx-auto space-y-6">
      <div className="mb-2">
        <h1 className="text-3xl font-bold text-text mb-2">Record Account Payment</h1>
        <p className="text-muted text-sm">
          Record a payment received against a customer account. Payments are saved directly to POS.
        </p>
      </div>
 
      {/* Status */}
      {statusMessage && (
        <div
          className={`rounded-lg px-4 py-3 text-sm border ${
            statusVariant === "success"
              ? "bg-green-50 border-green-200 text-green-800"
              : statusVariant === "error"
              ? "bg-red-50 border-red-200 text-red-800"
              : "bg-info/10 border-info/30 text-info"
          }`}
        >
          {statusMessage}
        </div>
      )}
 
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* Left: Search & form */}
        <div className="lg:col-span-2 space-y-4">
          <div className="bg-surface rounded-lg shadow p-4">
            <h2 className="text-lg font-semibold text-text mb-3">Select Account</h2>
            <div className="flex items-center gap-3">
              <input
                type="text"
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                placeholder="Search account by name"
                className="w-full px-3 py-2 border border-border rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-green-500"
              />
              {searchLoading && <span className="text-sm text-muted">Searching...</span>}
            </div>
            {searchResults.length > 0 && (
              <div className="mt-3 border border-border rounded-md divide-y max-h-64 overflow-y-auto">
                {searchResults.map((acc) => (
                  <button
                    key={acc.id}
                    onClick={() => handleSelectAccount(acc)}
                    className={`w-full text-left px-3 py-2 hover:bg-surface-2 flex justify-between items-center ${
                      selectedAccount?.id === acc.id ? "bg-green-50" : ""
                    }`}
                  >
                    <div>
                      <p className="text-sm font-medium text-text">{acc.name}</p>
                      <p className="text-xs text-muted">Id: {acc.id}</p>
                    </div>
                    <div className="text-sm font-semibold text-text">{formatCurrency(acc.balance)}</div>
                  </button>
                ))}
              </div>
            )}
          </div>
 
          <div className="bg-surface rounded-lg shadow p-4 space-y-4">
            <h2 className="text-lg font-semibold text-text">Payment Details</h2>
 
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <label className="block text-sm font-medium text-text mb-1">Amount</label>
                <input
                  type="number"
                  min="0"
                  step="0.01"
                  value={amount}
                  onChange={(e) => setAmount(e.target.value)}
                  className="w-full px-3 py-2 border border-border rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-green-500"
                  placeholder="0.00"
                />
              </div>
 
              <div>
                <label className="block text-sm font-medium text-text mb-1">Payment Type</label>
                <select
                  value={paymentTypeId}
                  onChange={(e) => setPaymentTypeId(e.target.value)}
                  className="w-full px-3 py-2 border border-border rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-green-500"
                >
                  <option value="0">-- Select payment type --</option>
                  {paymentTypes.map((pt) => (
                    <option key={pt.id} value={pt.id}>{pt.name}</option>
                  ))}
                </select>
              </div>
 
              <div>
                <label className="block text-sm font-medium text-text mb-1">Date</label>
                <input
                  type="date"
                  value={paymentDate}
                  onChange={(e) => setPaymentDate(e.target.value)}
                  className="w-full px-3 py-2 border border-border rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-green-500"
                />
              </div>
 
              <div>
                <label className="block text-sm font-medium text-text mb-1">Reference / Note (optional)</label>
                <input
                  type="text"
                  value={note}
                  onChange={(e) => setNote(e.target.value)}
                  className="w-full px-3 py-2 border border-border rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-green-500"
                  placeholder="Reference or note"
                />
              </div>
            </div>
 
            <div className="flex gap-3 pt-2">
              <button
                onClick={handleSubmit}
                disabled={!canSubmit}
                className="px-5 py-2 bg-[#00543b] text-white rounded-md font-semibold hover:bg-[#003d2b] disabled:bg-surface-2 disabled:cursor-not-allowed"
              >
                {saving ? "Saving..." : "Save Payment"}
              </button>
              <button
                onClick={() => {
                  setSelectedAccount(null);
                  setSearchTerm("");
                  setAmount("");
                  setPaymentTypeId("0");
                  setNote("");
                  setStatusMessage("");
                  setStatusVariant("");
                }}
                className="px-4 py-2 border border-border rounded-md text-sm text-text hover:bg-surface-2"
              >
                Clear
              </button>
            </div>
          </div>
        </div>
 
        {/* Right: Account summary */}
        <div className="bg-surface rounded-lg shadow p-4">
          <h2 className="text-lg font-semibold text-text mb-3">Account Summary</h2>
          {selectedAccount ? (
            <div className="space-y-3">
              <div>
                <p className="text-sm text-muted">Account</p>
                <p className="text-lg font-semibold text-text">{selectedAccount.name}</p>
                <p className="text-sm text-muted">Id: {selectedAccount.id}</p>
              </div>
 
              <div className="flex items-center justify-between">
                <span className="text-sm text-muted">Current Balance</span>
                <span className="text-lg font-bold text-text">{formatCurrency(selectedAccount.balance)}</span>
              </div>
 
              {selectedAccount.email && (
                <div className="flex items-center justify-between">
                  <span className="text-sm text-muted">Email</span>
                  <a href={`mailto:${selectedAccount.email}`} className="text-sm text-[#00543b] hover:underline">
                    {selectedAccount.email}
                  </a>
                </div>
              )}
 
              {selectedAccount.lastStatement && (
                <div className="flex items-center justify-between text-sm text-muted">
                  <span>Last Statement</span>
                  <span>{selectedAccount.lastStatement}</span>
                </div>
              )}
 
              {selectedAccount.paymentHistory && (
                <div>
                  <p className="text-sm text-muted mb-1">Payment History</p>
                  <div
                    className="text-sm text-text bg-surface-2 rounded p-3"
                    dangerouslySetInnerHTML={{ __html: selectedAccount.paymentHistory }}
                  />
                </div>
              )}
            </div>
          ) : (
            <p className="text-sm text-muted">Select an account to see details.</p>
          )}
        </div>
      </div>
    </div>
  );
}