#399 Invoice Payment Split Calculator with Tax Deduction (#523)

Author: Sensei-Victor

package.json

@@ -7,7 +7,8 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "test": "vitest",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "test:e2e": "playwright test"
   },
   "dependencies": {
@@ -33,6 +34,7 @@
     "remark-gfm": "^4.0.1",
     "web-push": "^3.6.7",
     "swr": "^2.4.2",
+    "zod": "^3.23.0",
     "zustand": "^5.0.14"
   },
   "overrides": {

src/__tests__/duplicate-invoice.test.tsx

@@ -110,6 +110,37 @@ vi.mock("@/lib/invoiceHistory", () => ({
   recordInvoiceHistory: vi.fn(),
 }));
 
+vi.mock("@/components/SplitCalculator", () => ({
+  __esModule: true,
+  default: () => null,
+}));
+
+vi.mock("@/hooks/useOfflineDraftAutosave", () => ({
+  useOfflineDraftAutosave: () => ({
+    isOffline: false,
+    discardDraft: vi.fn(),
+  }),
+}));
+
+vi.mock("@/lib/offlineDraftDB", () => ({
+  getOrCreateLocalUserId: () => "local-user-id",
+  listDraftsForUser: vi.fn().mockResolvedValue([]),
+}));
+
+vi.mock("@/components/invoice/DraftRecoveryBanner", () => ({
+  __esModule: true,
+  default: () => null,
+}));
+
+vi.mock("@/components/invoice/TxImportPanel", () => ({
+  __esModule: true,
+  default: () => null,
+}));
+
+vi.mock("@/lib/templateSharing", () => ({
+  decodeTemplate: vi.fn(),
+}));
+
 describe("NewInvoicePage — URL pre-fill (clone mode)", () => {
   beforeEach(() => {
     mockSearchParams.clear();

src/app/api/invoices/[id]/route.ts

@@ -0,0 +1,85 @@
+import { NextRequest, NextResponse } from "next/server";
+import { safeParseSplitMeta, type SplitMetaInput } from "@/lib/splitMetaSchema";
+
+interface SplitMetaStore {
+  [invoiceId: string]: SplitMetaInput;
+}
+
+let memoryStore: SplitMetaStore = {};
+
+export async function PATCH(
+  request: NextRequest,
+  { params }: { params: { id: string } }
+) {
+  try {
+    const invoiceId = params.id;
+    const rawBody = await request.json();
+
+    const { splitMeta } = rawBody as { splitMeta?: unknown };
+
+    if (splitMeta === undefined || splitMeta === null) {
+      return NextResponse.json(
+        { error: "Missing splitMeta in request body" },
+        { status: 400 }
+      );
+    }
+
+    const parseResult = safeParseSplitMeta(splitMeta);
+    if (!parseResult.success) {
+      return NextResponse.json(
+        {
+          error: "Invalid splitMeta payload",
+          details: parseResult.error?.issues,
+        },
+        { status: 422 }
+      );
+    }
+
+    memoryStore[invoiceId] = parseResult.data!;
+
+    return NextResponse.json(
+      {
+        success: true,
+        invoiceId,
+        splitMeta: parseResult.data,
+      },
+      { status: 200 }
+    );
+  } catch (error) {
+    console.error("SplitMeta save error:", error);
+    return NextResponse.json(
+      {
+        error: "Failed to persist splitMeta",
+        details: error instanceof Error ? error.message : String(error),
+      },
+      { status: 500 }
+    );
+  }
+}
+
+export async function GET(
+  _request: NextRequest,
+  { params }: { params: { id: string } }
+) {
+  try {
+    const invoiceId = params.id;
+    const splitMeta = memoryStore[invoiceId];
+
+    return NextResponse.json(
+      {
+        invoiceId,
+        splitMeta: splitMeta ?? null,
+      },
+      { status: 200 }
+    );
+  } catch (error) {
+    console.error("SplitMeta fetch error:", error);
+    return NextResponse.json(
+      {
+        error: "Failed to fetch splitMeta",
+        details: error instanceof Error ? error.message : String(error),
+      },
+      { status: 500 }
+    );
+  }
+}

src/app/invoice/[id]/page.tsx

@@ -35,6 +35,7 @@ import RecipientPayoutTracker from "@/components/RecipientPayoutTracker";
 import CloneLineageTree from "@/components/CloneLineageTree";
 import CountdownTimer from "@/components/CountdownTimer";
 import SplitCalculator from "@/components/SplitCalculator";
+import type { SplitMeta } from "@/hooks/useSplitCalculator";
 import ActivityFeed from "@/components/ActivityFeed";
 import InstallmentTracker from "@/components/InstallmentTracker";
 import InstallmentPanel from "@/components/InstallmentPanel";
@@ -92,6 +93,7 @@ export default function InvoiceDetailPage({ params }: Props) {
   const [publicKey, setPublicKey] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
   const [loading, setLoading] = useState(true);
+  const [loadedSplitMeta, setLoadedSplitMeta] = useState<SplitMeta | null>(null);
 
   // Live stream
   const {
@@ -187,6 +189,15 @@ export default function InvoiceDetailPage({ params }: Props) {
     }
     const inv = await splitClient.getInvoice(id);
     setInvoice(inv);
+    try {
+      const res = await fetch(`/api/invoices/${id}`);
+      if (res.ok) {
+        const json = await res.json();
+        if (json.splitMeta) setLoadedSplitMeta(json.splitMeta);
+      }
+    } catch {
+      // ignore splitMeta fetch failures; invoice still loads
+    }
     setLoading(false);
   };
 
@@ -668,7 +679,10 @@ export default function InvoiceDetailPage({ params }: Props) {
       </InvoiceSection>
 
       {/* Split Calculator */}
-      {invoice.status === "Pending" && <SplitCalculator invoice={invoice} />}
+      <SplitCalculator
+        splitMeta={loadedSplitMeta ?? ((invoice as any).splitMeta as SplitMeta | undefined)}
+        readOnly
+      />
 
       <ActivityFeed
         invoice={{
@@ -769,16 +783,19 @@ export default function InvoiceDetailPage({ params }: Props) {
           invoice={invoice}
           total={total}
           publicKey={publicKey}
-          onPay={async (amount, email) => {
-            const result = await splitClient.pay({ payer: publicKey, invoiceId: id, amount });
+          onPay={async (amount, email, options, mfaToken) => {
+            const result = await splitClient.pay({
+              payer: publicKey,
+              invoiceId: id,
+              amount,
+              metadata: mfaToken ? { mfaToken } : undefined,
+            });
             fetch("/api/cron/funding-thresholds", {
               method: "POST",
               headers: { "Content-Type": "application/json" },
               body: JSON.stringify({ invoiceId: id }),
             }).catch(() => null);
             return result;
-          onPay={async (amount, email, options, mfaToken) => {
-            return splitClient.pay({ payer: publicKey, invoiceId: id, amount, metadata: mfaToken ? { mfaToken } : undefined });
           }}
           onClose={() => setShowPayModal(false)}
         />

src/app/invoice/new/page.tsx

@@ -24,6 +24,11 @@ import {
   listDraftsForUser,
   type StoredDraft,
 } from "@/lib/offlineDraftDB";
+import SplitCalculator from "@/components/SplitCalculator";
+import {
+  calculateSplit,
+  type SplitMeta,
+} from "@/hooks/useSplitCalculator";
 
 const RecipientForm = dynamic(() => import("@/components/RecipientForm"), { ssr: false });
 const TemplateManager = dynamic(() => import("@/components/TemplateManager"), { ssr: false });
@@ -99,6 +104,7 @@ function NewInvoiceForm() {
   const [recurring, setRecurring] = useState(false);
   const [intervalDays, setIntervalDays] = useState<7 | 30>(7);
   const [submitting, setSubmitting] = useState(false);
+  const [splitMeta, setSplitMeta] = useState<SplitMeta | null>(null);
 
   const fromId = searchParams.get("from");
   const deadlineParam = searchParams.get("deadline");
@@ -142,6 +148,7 @@ function NewInvoiceForm() {
     deadlineDays,
     recurring,
     intervalDays,
+    splitMeta,
   };
 
   const { isOffline: draftOffline, discardDraft } = useOfflineDraftAutosave(
@@ -157,6 +164,9 @@ function NewInvoiceForm() {
     setDeadlineDays(recoveredDraft.data.deadlineDays);
     setRecurring(recoveredDraft.data.recurring);
     setIntervalDays(recoveredDraft.data.intervalDays);
+    if ((recoveredDraft.data as any).splitMeta) {
+      setSplitMeta((recoveredDraft.data as any).splitMeta);
+    }
     if (draftUserId) {
       import("@/lib/offlineDraftDB").then(({ deleteDraft }) =>
         deleteDraft(draftUserId, recoveredDraft.draftId)
@@ -363,6 +373,16 @@ function NewInvoiceForm() {
           setStepErrors((prev) => ({ ...prev, [s]: "Each recipient needs a valid G... address and positive amount" }));
           return false;
         }
+        if (splitMeta && splitMeta.recipients.length > 0) {
+          const splitResult = calculateSplit(splitMeta.totalAmount, splitMeta.recipients, splitMeta.assetCode);
+          if (!splitResult.validation.isValid) {
+            setStepErrors((prev) => ({
+              ...prev,
+              [s]: splitResult.validation.errorMessage ?? "Split calculator has invalid configuration",
+            }));
+            return false;
+          }
+        }
         setStepErrors((prev) => ({ ...prev, [s]: null }));
         return true;
       }
@@ -421,6 +441,13 @@ function NewInvoiceForm() {
           recipients.map((r) => ({ address: r.address, amount: r.amount }))
         );
         addToast(`Invoice #${invoiceId} created`, "success");
+        if (splitMeta && splitMeta.recipients.length > 0) {
+          fetch(`/api/invoices/${invoiceId}`, {
+            method: "PATCH",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ splitMeta }),
+          }).catch(() => null);
+        }
         setTxModal({ txHash, invoiceId });
       } else {
         const { invoiceId, txHash } = await splitClient.createInvoice({
@@ -440,6 +467,13 @@ function NewInvoiceForm() {
             amount: equalSplit ? (perRecipientAmount ?? "0") : r.amount,
           }))
         );
+        if (splitMeta && splitMeta.recipients.length > 0) {
+          fetch(`/api/invoices/${invoiceId}`, {
+            method: "PATCH",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ splitMeta }),
+          }).catch(() => null);
+        }
         setTxModal({ txHash, invoiceId });
       }
       discardDraft();
@@ -680,6 +714,11 @@ function NewInvoiceForm() {
           />
         </ChangedField>
       </div>
+
+      <SplitCalculator
+        initialTotal={equalSplit ? totalAmount : recipients.reduce((s, r) => s + parseFloat(r.amount || "0"), 0).toFixed(7)}
+        onSplitMetaChange={setSplitMeta}
+      />
     </div>
   );