Merge pull request #164 from therealjhay/fix/issue#85386#87

Fix/issue#85386#87

Author: K1NGD4VID

.github/workflows/ci.yml

@@ -1,6 +1,7 @@
 name: CI Build & Verify
 
 on:
+  workflow_dispatch:
   push:
     branches: [ main ]
   pull_request:

apps/web/app/invoice/[invoiceId]/InvoiceDetailClient.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useEffect, useMemo, useState } from 'react';
-import { useParams, useRouter } from 'next/navigation';
+import { useRouter } from 'next/navigation';
 import { PageLayout } from '@/components/shared/PageLayout';
 import { useInvoice, useInvoices } from '@/hooks/useInvoices';
 import { useWalletStore } from '@/store/wallet';

apps/web/app/invoice/[invoiceId]/page.tsx

@@ -1,11 +1,8 @@
 import type { Metadata } from 'next';
-import { Inter } from 'next/font/google';
 import { Invoice } from '@/types';
 import { formatAmount } from '@/lib/assets';
 import InvoiceDetailClient from './InvoiceDetailClient';
 
-const inter = Inter({ subsets: ['latin'] });
-
 const getIndexerApiUrl = () => {
   return process.env.NEXT_PUBLIC_INDEXER_API_URL || 'http://localhost:8080';
 };

apps/web/components/invoice/InvoiceCard.test.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { InvoiceCard } from './InvoiceCard';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+// Mock the hooks
+vi.mock('@/store/wallet', () => ({
+  useWalletStore: vi.fn(() => ({ address: 'GACR43ILX6H4PGAOO5QKSZLU4ZJMGT3E66EAUDPLM5J6YTP4Y3PSHWGB' }))
+}));
+
+vi.mock('@/hooks/useProfile', () => ({
+  useProfile: vi.fn(() => ({ isVerified: true }))
+}));
+
+const mockInvoice = {
+  id: 'abcd',
+  status: 'Created',
+  issuer: 'GACR43ILX6H4PGAOO5QKSZLU4ZJMGT3E66EAUDPLM5J6YTP4Y3PSHWGB',
+  buyer: 'GACR43ILX6H4PGAOO5QKSZLU4ZJMGT3E66EAUDPLM5J6YTP4Y3PSHWGB',
+  faceValue: 10000000000n, // 1000.00 USDC
+  dueDate: 1234567890
+};
+
+const queryClient = new QueryClient();
+
+const renderWithQueryClient = (ui: React.ReactElement) => {
+  return render(
+    <QueryClientProvider client={queryClient}>
+      {ui}
+    </QueryClientProvider>
+  );
+};
+
+describe('InvoiceCard', () => {
+  it('renders invoice details correctly', () => {
+    renderWithQueryClient(<InvoiceCard invoice={mockInvoice as any} />);
+    expect(screen.getByText(/1,000.00 USDC/)).toBeInTheDocument();
+  });
+
+  it('renders correct action buttons for created status (issuer)', () => {
+    renderWithQueryClient(<InvoiceCard invoice={{...mockInvoice, status: 'Created'} as any} role="issuer" />);
+    // Issuer can list for financing when created
+    expect(screen.getByText(/Configure financing terms/i)).toBeInTheDocument();
+  });
+
+  it('renders correct action buttons for listed status (lp)', () => {
+    renderWithQueryClient(<InvoiceCard invoice={{...mockInvoice, status: 'Listed'} as any} role="lp" />);
+    // LP can fund when listed
+    expect(screen.getByText(/FUND INVOICE/i)).toBeInTheDocument();
+  });
+
+  it('renders correct action buttons for funded status (issuer)', () => {
+    renderWithQueryClient(<InvoiceCard invoice={{...mockInvoice, status: 'Funded'} as any} role="issuer" />);
+    // Issuer can mark shipped when funded
+    expect(screen.getByText(/MARK GOODS SHIPPED/i)).toBeInTheDocument();
+  });
+
+  it('renders correct action buttons for shipped status (buyer)', () => {
+    renderWithQueryClient(<InvoiceCard invoice={{...mockInvoice, status: 'Active'} as any} role="buyer" />);
+    // Buyer can confirm delivery when shipped (in contract it's Active)
+    expect(screen.getByText(/CONFIRM DELIVERY/i)).toBeInTheDocument();
+  });
+
+  it('renders correct action buttons for delivered status (buyer)', () => {
+    renderWithQueryClient(<InvoiceCard invoice={{...mockInvoice, status: 'Confirmed'} as any} role="buyer" />);
+    // Buyer can repay when delivered (in contract it's Confirmed)
+    expect(screen.getByText(/REPAY INVOICE/i)).toBeInTheDocument();
+  });
+});

apps/web/components/invoice/InvoiceForm.test.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { InvoiceForm } from './InvoiceForm';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+vi.mock('@/hooks/useRole', () => ({
+  useRole: () => ({ role: 'issuer' })
+}));
+vi.mock('@/hooks/useWallet', () => ({
+  useWallet: () => ({ address: 'GACR43ILX6H4PGAOO5QKSZLU4ZJMGT3E66EAUDPLM5J6YTP4Y3PSHWGB' })
+}));
+
+const queryClient = new QueryClient();
+
+const renderWithQueryClient = (ui: React.ReactElement) => {
+  return render(
+    <QueryClientProvider client={queryClient}>
+      {ui}
+    </QueryClientProvider>
+  );
+};
+
+describe('InvoiceForm', () => {
+  it('renders the first step of the wizard', () => {
+    renderWithQueryClient(<InvoiceForm />);
+    expect(screen.getByText(/Buyer Wallet Address/i)).toBeInTheDocument();
+    expect(screen.getByText(/Face Value/i)).toBeInTheDocument();
+  });
+
+  it('validates form fields before proceeding', async () => {
+    renderWithQueryClient(<InvoiceForm />);
+    const buyerInput = screen.getByPlaceholderText(/GBBD47IF6L/i);
+    fireEvent.change(buyerInput, { target: { value: 'invalid_address' } });
+    
+    const nextButton = screen.getByText(/REVIEW FINANCING TERMS/i);
+    fireEvent.submit(nextButton);
+    expect(await screen.findByText(/Buyer must be a valid Stellar public key/i)).toBeInTheDocument();
+  });
+
+  it('proceeds to step 2 when valid and shows simulation state', async () => {
+    renderWithQueryClient(<InvoiceForm />);
+    const buyerInput = screen.getByPlaceholderText(/GBBD47IF6L/i);
+    const valueInput = screen.getByPlaceholderText(/50,000.00/i);
+    
+    fireEvent.change(buyerInput, { target: { value: 'GACR43ILX6H4PGAOO5QKSZLU4ZJMGT3E66EAUDPLM5J6YTP4Y3PSHWGB' } });
+    fireEvent.change(valueInput, { target: { value: '1000' } });
+    
+    const nextButton = screen.getByText(/REVIEW FINANCING TERMS/i);
+    fireEvent.click(nextButton);
+    
+    expect(await screen.findByText(/Invoice Face Value/i)).toBeInTheDocument();
+  });
+});

apps/web/components/invoice/InvoiceStatus.test.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { InvoiceStatus } from './InvoiceStatus';
+
+describe('InvoiceStatus', () => {
+  it('renders correctly for created status', () => {
+    render(<InvoiceStatus status="created" />);
+    expect(screen.getByText(/Created/i)).toBeInTheDocument();
+  });
+
+  it('renders correctly for listed status', () => {
+    render(<InvoiceStatus status="listed" />);
+    expect(screen.getByText(/Listed/i)).toBeInTheDocument();
+  });
+
+  it('renders correctly for funded status', () => {
+    render(<InvoiceStatus status="funded" />);
+    expect(screen.getByText(/Funded/i)).toBeInTheDocument();
+  });
+
+  it('renders correctly for shipped status', () => {
+    render(<InvoiceStatus status="shipped" />);
+    expect(screen.getByText(/Shipped/i)).toBeInTheDocument();
+  });
+
+  it('renders correctly for delivered status', () => {
+    render(<InvoiceStatus status="delivered" />);
+    expect(screen.getByText(/Delivered/i)).toBeInTheDocument();
+  });
+
+  it('renders correctly for repaid status', () => {
+    render(<InvoiceStatus status="repaid" />);
+    expect(screen.getByText(/Repaid/i)).toBeInTheDocument();
+  });
+});

apps/web/components/invoice/InvoiceTable.test.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { InvoiceTable } from './InvoiceTable';
+
+const mockInvoices = [
+  {
+    id: '1',
+    status: 'created',
+    issuer: 'GACR43ILX6H4PGAOO5QKSZLU4ZJMGT3E66EAUDPLM5J6YTP4Y3PSHWGB',
+    buyer: 'GACR43ILX6H4PGAOO5QKSZLU4ZJMGT3E66EAUDPLM5J6YTP4Y3PSHWGB',
+    faceValue: 10000000000n, // 1000.00 USDC
+    dueDate: 1234567890
+  },
+  {
+    id: '2',
+    status: 'Funded',
+    issuer: 'GACR43ILX6H4PGAOO5QKSZLU4ZJMGT3E66EAUDPLM5J6YTP4Y3PSHWGB',
+    buyer: 'GACR43ILX6H4PGAOO5QKSZLU4ZJMGT3E66EAUDPLM5J6YTP4Y3PSHWGB',
+    faceValue: 20000000000n, // 2000.00 USDC
+    dueDate: 1234567891
+  }
+];
+
+describe('InvoiceTable', () => {
+  it('renders a list of invoices', () => {
+    render(<InvoiceTable invoices={mockInvoices as any} />);
+    expect(screen.getByText(/1,000.00 USDC/)).toBeInTheDocument();
+    expect(screen.getByText(/2,000.00 USDC/)).toBeInTheDocument();
+  });
+
+  it('renders empty state when no invoices', () => {
+    render(<InvoiceTable invoices={[]} />);
+    expect(screen.getByText(/No invoices found/i)).toBeInTheDocument();
+  });
+});

apps/web/components/invoice/StatusTimeline.test.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { StatusTimeline } from './StatusTimeline';
+
+describe('StatusTimeline', () => {
+  it('renders all timeline steps', () => {
+    render(<StatusTimeline status="Created" timestamps={{ created: 1620000000 }} />);
+    expect(screen.getByText(/Created/i)).toBeInTheDocument();
+    expect(screen.getByText(/Listed/i)).toBeInTheDocument();
+    expect(screen.getByText(/Funded/i)).toBeInTheDocument();
+    expect(screen.getByText(/Active/i)).toBeInTheDocument();
+    expect(screen.getByText(/Confirmed/i)).toBeInTheDocument();
+    expect(screen.getByText(/Repaid/i)).toBeInTheDocument();
+  });
+
+  it('marks steps up to currentStatus as active or completed', () => {
+    const { container } = render(<StatusTimeline status="Funded" timestamps={{ created: 1620000000, listed: 1620000001, funded: 1620000002 }} />);
+    // Testing specific active/completed visual states would depend on the implementation
+    // But we ensure it renders without crashing for a mid-way status
+    expect(container).toBeInTheDocument();
+  });
+});

apps/web/components/shared/TransactionPending.test.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { TransactionPending } from './TransactionPending';
+
+describe('TransactionPending', () => {
+  it('renders loading state correctly', () => {
+    render(<TransactionPending isOpen={true} txHash="0x123" statusText="Processing... Please wait" />);
+    expect(screen.getByText(/Processing... Please wait/i)).toBeInTheDocument();
+    expect(screen.getByText(/TRANSACTION SIGNED/i)).toBeInTheDocument();
+    expect(screen.getByText(/0x123/i)).toBeInTheDocument();
+  });
+
+  it('renders empty state correctly (not pending)', () => {
+    const { container } = render(<TransactionPending isOpen={false} txHash={null} />);
+    expect(container).toBeEmptyDOMElement();
+  });
+});

apps/web/components/shared/WalletConnect.test.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { WalletConnect } from './WalletConnect';
+import { useWallet } from '@/hooks/useWallet';
+
+vi.mock('@/hooks/useWallet', () => {
+  const state = 'disconnected';
+  return {
+    useWallet: vi.fn(() => ({
+      connected: state === 'connected',
+      loading: state === 'connecting',
+      address: state === 'connected' ? 'GACR43ILX6H4PGAOO5QKSZLU4ZJMGT3E66EAUDPLM5J6YTP4Y3PSHWGB' : null,
+      error: state === 'error' ? 'Connection failed' : null,
+      connectWallet: vi.fn(),
+      disconnectWallet: vi.fn(),
+    }))
+  };
+});
+
+describe('WalletConnect', () => {
+  it('renders disconnected state', () => {
+    vi.mocked(useWallet).mockReturnValue({ connected: false, loading: false, address: null, error: null } as any);
+    render(<WalletConnect />);
+    expect(screen.getByText(/Connect Wallet/i)).toBeInTheDocument();
+  });
+
+  it('renders connecting state', () => {
+    vi.mocked(useWallet).mockReturnValue({ connected: false, loading: true, address: null, error: null } as any);
+    render(<WalletConnect />);
+    expect(screen.getByText(/Connecting.../i)).toBeInTheDocument();
+  });
+
+  it('renders connected state', () => {
+    vi.mocked(useWallet).mockReturnValue({ connected: true, loading: false, address: 'GACR43ILX6H4PGAOO5QKSZLU4ZJMGT3E66EAUDPLM5J6YTP4Y3PSHWGBYZ', error: null } as any);
+    render(<WalletConnect />);
+    expect(screen.getByText(/GACR43\.\.\.GBYZ/i)).toBeInTheDocument();
+  });
+
+  it('renders error state', () => {
+    vi.mocked(useWallet).mockReturnValue({ connected: false, loading: false, address: null, error: 'Connection failed' } as any);
+    render(<WalletConnect />);
+    expect(screen.getByText(/Connection failed/i)).toBeInTheDocument();
+  });
+});