feat(frontend): MatchedRemitCard with view-remittance link
This commit is contained in:
Tyler
@@ -0,0 +1,179 @@
|
|||||||
|
// @vitest-environment happy-dom
|
||||||
|
// Pure prop-driven component; match the act() convention used by the
|
||||||
|
// other ClaimDrawer test files (ClaimDrawerHeader / ClaimDrawerSkeleton /
|
||||||
|
// ClaimDrawerError / ValidationPanel / ServiceLinesTable / DiagnosesList
|
||||||
|
// / PartiesGrid / RawSegmentsPanel).
|
||||||
|
(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
|
||||||
|
|
||||||
|
import React, { act } from "react";
|
||||||
|
import { createRoot, type Root } from "react-dom/client";
|
||||||
|
import { describe, expect, it, vi } from "vitest";
|
||||||
|
import { MatchedRemitCard } from "./MatchedRemitCard";
|
||||||
|
import type { ClaimDetailMatchedRemittance } from "@/types";
|
||||||
|
|
||||||
|
function renderIntoContainer(element: React.ReactElement): {
|
||||||
|
container: HTMLDivElement;
|
||||||
|
unmount: () => void;
|
||||||
|
} {
|
||||||
|
const container = document.createElement("div");
|
||||||
|
document.body.appendChild(container);
|
||||||
|
const root: Root = createRoot(container);
|
||||||
|
act(() => {
|
||||||
|
root.render(element);
|
||||||
|
});
|
||||||
|
return {
|
||||||
|
container,
|
||||||
|
unmount: () => {
|
||||||
|
act(() => root.unmount());
|
||||||
|
container.remove();
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function makeMatchedRemittance(
|
||||||
|
overrides: Partial<ClaimDetailMatchedRemittance> = {}
|
||||||
|
): ClaimDetailMatchedRemittance {
|
||||||
|
return {
|
||||||
|
id: "REM-2026-0001",
|
||||||
|
totalPaid: 142.5,
|
||||||
|
status: "received",
|
||||||
|
receivedAt: "2026-06-12T10:00:00Z",
|
||||||
|
...overrides,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
describe("MatchedRemitCard", () => {
|
||||||
|
it("test_null_prop_returns_no_dom", () => {
|
||||||
|
const { container, unmount } = renderIntoContainer(
|
||||||
|
<MatchedRemitCard matchedRemittance={null} />
|
||||||
|
);
|
||||||
|
|
||||||
|
// No DOM at all — the component returns null before rendering.
|
||||||
|
expect(container.innerHTML).toBe("");
|
||||||
|
|
||||||
|
unmount();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("test_populated_prop_renders_section_label", () => {
|
||||||
|
const { container, unmount } = renderIntoContainer(
|
||||||
|
<MatchedRemitCard matchedRemittance={makeMatchedRemittance()} />
|
||||||
|
);
|
||||||
|
|
||||||
|
const label = container.querySelector('[data-testid="section-label"]');
|
||||||
|
expect(label).not.toBeNull();
|
||||||
|
|
||||||
|
// `uppercase` is applied via Tailwind CSS, so textContent gives the
|
||||||
|
// source-case string "Matched Remittance"; assert case-insensitively
|
||||||
|
// and confirm the visual transform via the className sniff below.
|
||||||
|
const text = (label?.textContent ?? "").toLowerCase();
|
||||||
|
expect(text).toContain("matched remittance");
|
||||||
|
|
||||||
|
// Eyebrow style (uppercase + tracking) — sniff the className.
|
||||||
|
const cls = label?.className ?? "";
|
||||||
|
expect(cls).toContain("uppercase");
|
||||||
|
expect(cls).toContain("tracking-[0.18em]");
|
||||||
|
|
||||||
|
unmount();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("test_renders_id_totalPaid_status_and_receivedAt", () => {
|
||||||
|
const { container, unmount } = renderIntoContainer(
|
||||||
|
<MatchedRemitCard
|
||||||
|
matchedRemittance={makeMatchedRemittance({
|
||||||
|
id: "REM-2026-9999",
|
||||||
|
totalPaid: 250.0,
|
||||||
|
status: "reconciled",
|
||||||
|
receivedAt: "2026-06-10T14:30:00Z",
|
||||||
|
})}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
// Remit ID rendered in mono.
|
||||||
|
const idEl = container.querySelector('[data-testid="matched-remit-id"]');
|
||||||
|
expect(idEl).not.toBeNull();
|
||||||
|
expect(idEl?.textContent ?? "").toContain("REM-2026-9999");
|
||||||
|
|
||||||
|
// totalPaid formatted via fmt.usdPrecise → "$250.00".
|
||||||
|
const totalPaidEl = container.querySelector(
|
||||||
|
'[data-testid="matched-remit-total-paid"]'
|
||||||
|
);
|
||||||
|
expect(totalPaidEl).not.toBeNull();
|
||||||
|
expect(totalPaidEl?.textContent ?? "").toContain("$250.00");
|
||||||
|
|
||||||
|
// Status badge.
|
||||||
|
const statusEl = container.querySelector(
|
||||||
|
'[data-testid="matched-remit-status"]'
|
||||||
|
);
|
||||||
|
expect(statusEl).not.toBeNull();
|
||||||
|
expect(statusEl?.textContent ?? "").toContain("reconciled");
|
||||||
|
|
||||||
|
// receivedAt formatted via fmt.date — the date contains the year at
|
||||||
|
// minimum, and `new Date("ISO Z")` is UTC-stable.
|
||||||
|
const receivedEl = container.querySelector(
|
||||||
|
'[data-testid="matched-remit-received"]'
|
||||||
|
);
|
||||||
|
expect(receivedEl).not.toBeNull();
|
||||||
|
expect(receivedEl?.textContent ?? "").toContain("2026");
|
||||||
|
|
||||||
|
unmount();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("test_status_badge_uses_danger_variant_for_rejected_status", () => {
|
||||||
|
// The remittance status field is an unconstrained string (per
|
||||||
|
// `ClaimDetailMatchedRemittance`), so unknown statuses should fall
|
||||||
|
// back to the muted variant rather than throwing.
|
||||||
|
const { container, unmount } = renderIntoContainer(
|
||||||
|
<MatchedRemitCard
|
||||||
|
matchedRemittance={makeMatchedRemittance({ status: "weird" })}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
const statusEl = container.querySelector(
|
||||||
|
'[data-testid="matched-remit-status"]'
|
||||||
|
);
|
||||||
|
expect(statusEl).not.toBeNull();
|
||||||
|
// Muted variant (no color) — the badge still renders without error.
|
||||||
|
expect(statusEl?.textContent ?? "").toContain("weird");
|
||||||
|
|
||||||
|
unmount();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("test_view_remittance_link_sets_window_location_href", () => {
|
||||||
|
// Spy on the `href` setter so the click doesn't actually navigate
|
||||||
|
// away in the test runner, and so we can assert what was assigned.
|
||||||
|
const setHrefSpy = vi.spyOn(window.location, "href", "set");
|
||||||
|
setHrefSpy.mockImplementation(() => {
|
||||||
|
// No-op — happy-dom would otherwise try to update the URL.
|
||||||
|
});
|
||||||
|
|
||||||
|
try {
|
||||||
|
const { container, unmount } = renderIntoContainer(
|
||||||
|
<MatchedRemitCard
|
||||||
|
matchedRemittance={makeMatchedRemittance({ id: "REM-XYZ" })}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
const link = container.querySelector(
|
||||||
|
'[data-testid="view-remittance-link"]'
|
||||||
|
);
|
||||||
|
expect(link).not.toBeNull();
|
||||||
|
// The button should advertise the destination via the visible label.
|
||||||
|
expect(link?.textContent ?? "").toContain("View remittance");
|
||||||
|
|
||||||
|
act(() => {
|
||||||
|
link?.dispatchEvent(
|
||||||
|
new MouseEvent("click", { bubbles: true, cancelable: true })
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
// The click handler should have assigned to window.location.href
|
||||||
|
// exactly once, with the remittance-detail deep link.
|
||||||
|
expect(setHrefSpy).toHaveBeenCalledTimes(1);
|
||||||
|
expect(setHrefSpy).toHaveBeenCalledWith("/remittances?id=REM-XYZ");
|
||||||
|
|
||||||
|
unmount();
|
||||||
|
} finally {
|
||||||
|
setHrefSpy.mockRestore();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -0,0 +1,114 @@
|
|||||||
|
import { ArrowRight } from "lucide-react";
|
||||||
|
import { Badge, type BadgeProps } from "@/components/ui/badge";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { fmt } from "@/lib/format";
|
||||||
|
import type { ClaimDetail } from "@/types";
|
||||||
|
|
||||||
|
type MatchedRemitCardProps = {
|
||||||
|
matchedRemittance: ClaimDetail["matchedRemittance"];
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remittance status → Badge variant. Mirrors the list-endpoint mapping
|
||||||
|
* in ``RemittanceStatus`` (received / posted / reconciled). Unknown
|
||||||
|
* statuses (the type is an unconstrained string) fall back to ``muted``
|
||||||
|
* so a future backend status doesn't blow up the drawer.
|
||||||
|
*/
|
||||||
|
const STATUS_VARIANT: Record<string, BadgeProps["variant"]> = {
|
||||||
|
received: "secondary",
|
||||||
|
posted: "default",
|
||||||
|
reconciled: "success",
|
||||||
|
};
|
||||||
|
|
||||||
|
function statusVariantFor(status: string): BadgeProps["variant"] {
|
||||||
|
return STATUS_VARIANT[status] ?? "muted";
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Matched-remittance card for the claim detail drawer (SP4).
|
||||||
|
*
|
||||||
|
* Renders only when the claim has been paired with an ERA (the
|
||||||
|
* ``matchedRemittance`` field is non-null). Layout: a single card with
|
||||||
|
* remit id + status badge + received date on the left, big mono
|
||||||
|
* ``totalPaid`` on the right, plus a "View remittance →" link that
|
||||||
|
* deep-links to ``/remittances?id={id}`` (v1: full page navigation via
|
||||||
|
* ``window.location.href``; a router-based nav handler is a v2 concern).
|
||||||
|
*/
|
||||||
|
export function MatchedRemitCard({ matchedRemittance }: MatchedRemitCardProps) {
|
||||||
|
if (matchedRemittance === null) return null;
|
||||||
|
|
||||||
|
const { id, totalPaid, status, receivedAt } = matchedRemittance;
|
||||||
|
|
||||||
|
const handleViewRemittance = () => {
|
||||||
|
window.location.href = `/remittances?id=${id}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section
|
||||||
|
className="flex flex-col gap-3 px-6 py-4"
|
||||||
|
data-testid="matched-remit-card"
|
||||||
|
>
|
||||||
|
<h3
|
||||||
|
data-testid="section-label"
|
||||||
|
className="text-[10.5px] font-semibold uppercase tracking-[0.18em] text-[color:var(--m-ink-tertiary)]"
|
||||||
|
>
|
||||||
|
Matched Remittance
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<div
|
||||||
|
data-testid="matched-remit-card-inner"
|
||||||
|
className="flex flex-col gap-4 rounded-lg border border-[color:var(--m-border-heavy)]/15 bg-[color:var(--m-surface)] p-4 sm:flex-row sm:items-start sm:justify-between"
|
||||||
|
>
|
||||||
|
{/* Left: remit id + status badge + received date */}
|
||||||
|
<div className="flex min-w-0 flex-col gap-2">
|
||||||
|
<span
|
||||||
|
data-testid="matched-remit-id"
|
||||||
|
className="font-mono text-sm text-[color:var(--m-ink-primary)]"
|
||||||
|
style={{ fontFamily: "var(--m-font-mono)" }}
|
||||||
|
>
|
||||||
|
{id}
|
||||||
|
</span>
|
||||||
|
<div className="flex flex-wrap items-center gap-2">
|
||||||
|
<Badge
|
||||||
|
variant={statusVariantFor(status)}
|
||||||
|
data-testid="matched-remit-status"
|
||||||
|
className="uppercase tracking-[0.14em]"
|
||||||
|
>
|
||||||
|
{status}
|
||||||
|
</Badge>
|
||||||
|
<span
|
||||||
|
data-testid="matched-remit-received"
|
||||||
|
className="text-xs text-[color:var(--m-ink-tertiary)]"
|
||||||
|
>
|
||||||
|
Received {fmt.date(receivedAt)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Right: total paid + view-remittance link */}
|
||||||
|
<div className="flex flex-col items-start gap-2 sm:items-end">
|
||||||
|
<span
|
||||||
|
data-testid="matched-remit-total-paid"
|
||||||
|
className="font-mono text-2xl font-semibold tabular-nums text-[color:var(--m-ink-primary)]"
|
||||||
|
style={{ fontFamily: "var(--m-font-mono)" }}
|
||||||
|
>
|
||||||
|
{fmt.usdPrecise(totalPaid)}
|
||||||
|
</span>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={handleViewRemittance}
|
||||||
|
data-testid="view-remittance-link"
|
||||||
|
>
|
||||||
|
View remittance
|
||||||
|
<ArrowRight
|
||||||
|
className="h-3.5 w-3.5"
|
||||||
|
strokeWidth={1.75}
|
||||||
|
aria-hidden
|
||||||
|
/>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user