feat: Add invoice sharing via QR code modal and resolve Next.js compi…

package.json

@@ -16,6 +16,7 @@
     "@tanstack/react-query": "5.80.7",
     "@types/canvas-confetti": "1.6.4",
     "canvas-confetti": "1.9.3",
+    "html2canvas": "^1.4.1",
     "next": "14.2.3",
     "qrcode.react": "4.2.0",
     "react": "^18.3.0",

src/__tests__/InvoiceCard.test.tsx

@@ -1,41 +1,32 @@
 import { render, screen } from '@testing-library/react';
 import InvoiceCard from '@/components/InvoiceCard';
 import type { Invoice } from '@stellar-split/sdk';
+import { vi } from 'vitest';
 
-jest.mock('@stellar-split/sdk', () => ({
-  formatAmount: (n: bigint) => `${n}`,
-  truncateAddress: (s: string) => `${s.slice(0, 4)}...${s.slice(-4)}`,
-}));
-
-jest.mock('@/components/PaymentProgress', () => {
-  const Component = () => <div data-testid="payment-progress" />;
-  Component.displayName = 'PaymentProgress';
-  return Component;
-});
-
-jest.mock('@/components/CountdownTimer', () => {
-  const Component = () => <div data-testid="countdown-timer" />;
-  Component.displayName = 'CountdownTimer';
-  return Component;
-});
-
-jest.mock('@/components/FundingProgress', () => {
-  const Component = () => <div data-testid="funding-progress" />;
-  Component.displayName = 'FundingProgress';
-  return Component;
-});
-
-jest.mock('@/components/StatusBadge', () => {
-  const Component = () => <div data-testid="status-badge">Pending</div>;
-  Component.displayName = 'StatusBadge';
-  return Component;
+vi.mock('@stellar-split/sdk', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@stellar-split/sdk')>();
+  return {
+    ...actual,
+    formatAmount: (n: bigint) => `${n}`,
+    truncateAddress: (s: string) => `${s.slice(0, 4)}...${s.slice(-4)}`,
+  };
 });
 
-jest.mock('@/components/DeadlineCountdown', () => {
-  const Component = () => <div data-testid="deadline-countdown" />;
-  Component.displayName = 'DeadlineCountdown';
-  return Component;
-});
+vi.mock('@/components/PaymentProgress', () => ({
+  default: () => <div data-testid="payment-progress" />
+}));
+vi.mock('@/components/CountdownTimer', () => ({
+  default: () => <div data-testid="countdown-timer" />
+}));
+vi.mock('@/components/FundingProgress', () => ({
+  default: () => <div data-testid="funding-progress" />
+}));
+vi.mock('@/components/StatusBadge', () => ({
+  default: () => <div data-testid="status-badge">Pending</div>
+}));
+vi.mock('@/components/DeadlineCountdown', () => ({
+  default: () => <div data-testid="deadline-countdown" />
+}));
 
 const invoice: Invoice = {
   id: '42',

src/__tests__/InvoiceShareQRModal.test.tsx

@@ -0,0 +1,60 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import InvoiceShareQRModal from '@/components/InvoiceShareQRModal';
+import { vi } from 'vitest';
+
+const mockToast = {
+  success: vi.fn(),
+  error: vi.fn(),
+  info: vi.fn(),
+  loading: vi.fn(),
+  update: vi.fn(),
+  dismiss: vi.fn(),
+};
+
+vi.mock('@/contexts/ToastContext', () => ({
+  useToast: () => mockToast,
+}));
+
+// Mock qrcode.react
+vi.mock('qrcode.react', () => ({
+  QRCodeCanvas: () => <div data-testid="mock-qr-canvas">QR Canvas</div>,
+}));
+
+describe('InvoiceShareQRModal', () => {
+  const onClose = vi.fn();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders when open is true', () => {
+    render(<InvoiceShareQRModal open={true} invoiceId="42" onClose={onClose} />);
+    expect(screen.getByText('Share via QR Code')).toBeInTheDocument();
+  });
+
+  it('does not render when open is false', () => {
+    render(<InvoiceShareQRModal open={false} invoiceId="42" onClose={onClose} />);
+    expect(screen.queryByText('Share via QR Code')).not.toBeInTheDocument();
+  });
+
+  it('calls onClose when close button or dismiss is clicked', () => {
+    render(<InvoiceShareQRModal open={true} invoiceId="42" onClose={onClose} />);
+    fireEvent.click(screen.getByLabelText('Close share QR modal'));
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it('copies link when copy link button is clicked', async () => {
+    const writeTextSpy = vi.fn().mockResolvedValue(undefined);
+    Object.assign(navigator, {
+      clipboard: {
+        writeText: writeTextSpy,
+      },
+    });
+
+    render(<InvoiceShareQRModal open={true} invoiceId="42" onClose={onClose} />);
+    fireEvent.click(screen.getByText('Copy Link'));
+
+    // Check it calls navigator.clipboard.writeText with the preview URL
+    expect(writeTextSpy).toHaveBeenCalledWith(expect.stringContaining('/invoice/42/preview'));
+  });
+});

src/app/history/page.tsx

@@ -6,6 +6,7 @@ import { splitClient } from "@/lib/stellar";
 import { getFreighterPublicKey } from "@/lib/freighter";
 import { formatAmount } from "@stellar-split/sdk";
 import InvoiceCard from "@/components/InvoiceCard";
+import InvoiceShareQRModal from "@/components/InvoiceShareQRModal";
 import { SkeletonCard } from "@/components/Skeleton";
 import type { Invoice } from "@stellar-split/sdk";
 import { loadReceipt } from "@/lib/receiptStore";
@@ -30,6 +31,7 @@ export default function HistoryPage() {
 
   // Pagination
   const [currentPage, setCurrentPage] = useState(1);
+  const [shareQRInvoiceId, setShareQRInvoiceId] = useState<string | null>(null);
 
   useEffect(() => {
     getFreighterPublicKey()
@@ -214,12 +216,17 @@ export default function HistoryPage() {
 
               return (
                 <li key={inv.id} className="flex flex-col gap-2">
-                  <Link
-                    href={`/invoice/${inv.id}`}
-                    aria-label={`View Invoice #${inv.id}`}
-                  >
-                    <InvoiceCard invoice={inv} />
-                  </Link>
+                  <div className="relative group">
+                    <Link
+                      href={`/invoice/${inv.id}`}
+                      aria-label={`View Invoice #${inv.id}`}
+                      className="absolute inset-0 rounded-xl z-0"
+                    />
+                    <InvoiceCard
+                      invoice={inv}
+                      onShareQR={() => setShareQRInvoiceId(inv.id)}
+                    />
+                  </div>
                   {storedReceipt && (
                     <Suspense fallback={null}>
                       <ReceiptPDF
@@ -267,6 +274,12 @@ export default function HistoryPage() {
           )}
         </>
       )}
+
+      <InvoiceShareQRModal
+        open={!!shareQRInvoiceId}
+        invoiceId={shareQRInvoiceId || ""}
+        onClose={() => setShareQRInvoiceId(null)}
+      />
     </main>
   );
 }