feat: add printable settlement receipt

src/components/settlement/SettlementReceipt.test.tsx

@@ -0,0 +1,32 @@
+/** @vitest-environment happy-dom */
+
+import { describe, expect, it, vi } from 'vitest';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { buildReceiptFilename, SettlementReceipt } from './SettlementReceipt';
+
+const data = {
+  commitmentId: 'commitment/1',
+  finalValue: '$100',
+  fees: '$2',
+  transactionHash: '0xabc',
+  settledAt: '2026-07-30T10:00:00.000Z',
+};
+
+describe('SettlementReceipt', () => {
+  it('sanitizes the printable filename', () => {
+    expect(buildReceiptFilename(data.commitmentId, data.settledAt)).toBe(
+      'settlement-receipt-commitment-1-2026-07-30',
+    );
+  });
+
+  it('renders only after success and prints from the accessible action', () => {
+    const print = vi.spyOn(window, 'print').mockImplementation(() => undefined);
+    const { rerender } = render(<SettlementReceipt status="pending" data={data} />);
+    expect(screen.queryByRole('region', { name: 'Settlement receipt' })).not.toBeInTheDocument();
+
+    rerender(<SettlementReceipt status="success" data={data} />);
+    fireEvent.click(screen.getByRole('button', { name: 'Download receipt' }));
+    expect(print).toHaveBeenCalledOnce();
+    print.mockRestore();
+  });
+});

src/components/settlement/SettlementReceipt.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+export interface SettlementReceiptData {
+  commitmentId: string;
+  finalValue: string;
+  fees: string;
+  transactionHash: string;
+  settledAt: string;
+}
+
+export function buildReceiptFilename(commitmentId: string, settledAt: string): string {
+  const safeId = commitmentId.replace(/[^a-z0-9_-]/gi, '-').slice(0, 80) || 'commitment';
+  const date = new Date(settledAt).toISOString().slice(0, 10);
+  return `settlement-receipt-${safeId}-${date}`;
+}
+
+export function printSettlementReceipt(data: SettlementReceiptData): void {
+  const previousTitle = document.title;
+  document.title = buildReceiptFilename(data.commitmentId, data.settledAt);
+  window.print();
+  window.setTimeout(() => {
+    document.title = previousTitle;
+  }, 0);
+}
+
+export function SettlementReceipt({
+  status,
+  data,
+}: {
+  status: 'pending' | 'success';
+  data: SettlementReceiptData;
+}) {
+  if (status !== 'success') return null;
+
+  return (
+    <section aria-label="Settlement receipt" className="rounded-xl border border-white/10 bg-white p-6 text-black">
+      <h2 className="text-xl font-semibold">Settlement receipt</h2>
+      <dl className="mt-4 space-y-2 text-sm">
+        <div><dt className="font-medium">Commitment</dt><dd>{data.commitmentId}</dd></div>
+        <div><dt className="font-medium">Final value</dt><dd>{data.finalValue}</dd></div>
+        <div><dt className="font-medium">Fees / penalty</dt><dd>{data.fees}</dd></div>
+        <div><dt className="font-medium">Transaction</dt><dd className="break-all">{data.transactionHash}</dd></div>
+        <div><dt className="font-medium">Settled</dt><dd>{data.settledAt}</dd></div>
+      </dl>
+      <button
+        type="button"
+        onClick={() => printSettlementReceipt(data)}
+        className="mt-5 rounded-lg bg-black px-4 py-2 text-sm text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-400"
+      >
+        Download receipt
+      </button>
+    </section>
+  );
+}