tyler/cyclone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(frontend): PartiesGrid with billing provider/subscriber/payer cards

Browse Source
This commit is contained in:
Tyler
2026-06-20 11:38:51 -06:00
parent 042597217f
commit 94a39e9dd6
2 changed files with 437 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ClaimDrawer/PartiesGrid.test.tsx
+281
View File
@@ -0,0 +1,281 @@
// @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).
(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 } from "vitest";
import { PartiesGrid } from "./PartiesGrid";
import type {
ClaimDetailAddress,
ClaimDetailParties,
} 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 makeAddress(
overrides: Partial<ClaimDetailAddress> = {}
): ClaimDetailAddress {
return {
line1: "100 Main St",
line2: null,
city: "Springfield",
state: "IL",
zip: "62701",
...overrides,
};
}
function makeParties(
overrides: Partial<ClaimDetailParties> = {}
): ClaimDetailParties {
return {
billingProvider: {
name: "Acme Medical Group",
npi: "1234567890",
taxId: "12-3456789",
address: makeAddress(),
},
subscriber: {
firstName: "Jane",
lastName: "Doe",
memberId: "MEM12345",
dob: "1980-05-15",
gender: "F",
},
payer: {
name: "Aetna",
id: "PAYER01",
},
...overrides,
};
}
describe("PartiesGrid", () => {
it("test_section_label_is_parties", () => {
const { container, unmount } = renderIntoContainer(
<PartiesGrid parties={makeParties()} />
);
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 "Parties"; assert case-insensitively and
// confirm the visual transform via the className sniff below.
const text = (label?.textContent ?? "").toLowerCase();
expect(text).toContain("parties");
// Eyebrow style (uppercase + tracking) — sniff the className.
const cls = label?.className ?? "";
expect(cls).toContain("uppercase");
expect(cls).toContain("tracking-[0.18em]");
unmount();
});
it("test_three_cards_rendered_for_each_party", () => {
const { container, unmount } = renderIntoContainer(
<PartiesGrid parties={makeParties()} />
);
const billing = container.querySelector('[data-testid="party-billing-provider"]');
const subscriber = container.querySelector('[data-testid="party-subscriber"]');
const payer = container.querySelector('[data-testid="party-payer"]');
expect(billing).not.toBeNull();
expect(subscriber).not.toBeNull();
expect(payer).not.toBeNull();
unmount();
});
it("test_billing_provider_card_shows_name_npi_taxId_and_address", () => {
const { container, unmount } = renderIntoContainer(
<PartiesGrid parties={makeParties()} />
);
const card = container.querySelector(
'[data-testid="party-billing-provider"]'
);
expect(card).not.toBeNull();
const text = card?.textContent ?? "";
expect(text).toContain("Acme Medical Group");
expect(text).toContain("1234567890");
expect(text).toContain("12-3456789");
// Address components.
expect(text).toContain("100 Main St");
expect(text).toContain("Springfield");
expect(text).toContain("IL");
expect(text).toContain("62701");
unmount();
});
it("test_subscriber_card_shows_first_last_memberId_and_gender", () => {
const { container, unmount } = renderIntoContainer(
<PartiesGrid parties={makeParties()} />
);
const card = container.querySelector('[data-testid="party-subscriber"]');
expect(card).not.toBeNull();
const text = card?.textContent ?? "";
expect(text).toContain("Jane");
expect(text).toContain("Doe");
expect(text).toContain("MEM12345");
expect(text).toContain("F");
// DOB is also present in this fixture.
expect(text).toContain("1980");
unmount();
});
it("test_subscriber_card_omits_dob_when_null", () => {
const { container, unmount } = renderIntoContainer(
<PartiesGrid
parties={makeParties({
subscriber: {
firstName: "John",
lastName: "Smith",
memberId: "MEM99999",
dob: null,
gender: "M",
},
})}
/>
);
const card = container.querySelector('[data-testid="party-subscriber"]');
expect(card).not.toBeNull();
const text = (card?.textContent ?? "").toLowerCase();
// Still renders the identity pieces.
expect(text).toContain("john");
expect(text).toContain("smith");
expect(text).toContain("mem99999");
expect(text).toContain("m");
// No "undefined" or "null" stringification for the absent DOB.
expect(text).not.toContain("undefined");
expect(text).not.toContain("null");
unmount();
});
it("test_payer_card_shows_name_and_id", () => {
const { container, unmount } = renderIntoContainer(
<PartiesGrid parties={makeParties()} />
);
const card = container.querySelector('[data-testid="party-payer"]');
expect(card).not.toBeNull();
const text = card?.textContent ?? "";
expect(text).toContain("Aetna");
expect(text).toContain("PAYER01");
unmount();
});
it("test_billing_provider_address_line2_rendered_when_present", () => {
const { container, unmount } = renderIntoContainer(
<PartiesGrid
parties={makeParties({
billingProvider: {
name: "Suite Clinic",
npi: "1111111111",
taxId: "99-9999999",
address: makeAddress({
line1: "200 Oak Ave",
line2: "Suite 300",
city: "Portland",
state: "OR",
zip: "97201",
}),
},
})}
/>
);
const card = container.querySelector(
'[data-testid="party-billing-provider"]'
);
const text = card?.textContent ?? "";
expect(text).toContain("200 Oak Ave");
expect(text).toContain("Suite 300");
expect(text).toContain("Portland");
expect(text).toContain("OR");
expect(text).toContain("97201");
unmount();
});
it("test_empty_address_object_does_not_render_garbage", () => {
// The backend can return `{}` for a missing address (per the
// ClaimDetailBillingProvider type's `Record<string, never>` branch).
// The component must not stringify an empty object.
const { container, unmount } = renderIntoContainer(
<PartiesGrid
parties={makeParties({
billingProvider: {
name: "Addrless Clinic",
npi: "2222222222",
taxId: "11-1111111",
address: {},
},
})}
/>
);
const card = container.querySelector(
'[data-testid="party-billing-provider"]'
);
const text = (card?.textContent ?? "").toLowerCase();
expect(text).toContain("addrless clinic");
expect(text).toContain("2222222222");
expect(text).not.toContain("[object object]");
expect(text).not.toContain("undefined");
expect(text).not.toContain("null");
unmount();
});
it("test_responsive_grid_uses_3_columns_on_desktop", () => {
const { container, unmount } = renderIntoContainer(
<PartiesGrid parties={makeParties()} />
);
// The section follows the established `flex flex-col gap-3 px-6 py-4`
// pattern; the responsive grid is the inner wrapper that holds the
// three party cards. Sniff its className.
const grid = container.querySelector('[data-testid="parties-grid-inner"]');
expect(grid).not.toBeNull();
const cls = grid?.className ?? "";
expect(cls).toContain("grid");
expect(cls).toContain("grid-cols-1");
expect(cls).toContain("md:grid-cols-3");
expect(cls).toContain("gap-4");
unmount();
});
});
src/components/ClaimDrawer/PartiesGrid.tsx
+156
View File
@@ -0,0 +1,156 @@
import type { ClaimDetail } from "@/types";
type PartiesGridProps = {
parties: ClaimDetail["parties"];
};
type AddressLike = ClaimDetail["parties"]["billingProvider"]["address"];
/**
* Address can come back as `ClaimDetailAddress` (line1/line2/city/...) or
* `{}` (the backend's `Record<string, never>` shape for "missing"). The
* latter is structurally a regular object with no keys, so a single
* `Object.keys(addr).length === 0` check is the safe way to detect it
* without resorting to `'line1' in addr`.
*/
function isEmptyAddress(addr: AddressLike | null | undefined): boolean {
if (addr === null || addr === undefined) return true;
return Object.keys(addr).length === 0;
}
function AddressBlock({ address }: { address: AddressLike }) {
if (isEmptyAddress(address)) return null;
// After the empty check the cast is safe; the alternative `ClaimDetailAddress`
// shape has all the fields we read.
const a = address as ClaimDetail["parties"]["billingProvider"]["address"] & {
line1: string;
line2: string | null;
city: string;
state: string;
zip: string;
};
return (
<div
className="text-xs leading-relaxed text-[color:var(--m-ink-secondary)]"
data-testid="party-address"
>
<div>{a.line1}</div>
{a.line2 ? <div>{a.line2}</div> : null}
<div>
{a.city}, {a.state} {a.zip}
</div>
</div>
);
}
/**
* Single party card: eyebrow label, name, identity mono line(s), and
* an optional address block. The card is just a light surface with a
* border — no shadow, no hover; the drawer is read-only detail content.
*/
function PartyCard({
testId,
label,
name,
identity,
address,
}: {
testId: string;
label: string;
name: string;
identity: React.ReactNode;
address?: AddressLike;
}) {
return (
<div
data-testid={testId}
className="flex flex-col gap-2 rounded-lg border border-[color:var(--m-border-heavy)]/15 bg-[color:var(--m-surface)] px-4 py-3"
>
<span className="text-[10px] font-semibold uppercase tracking-[0.14em] text-[color:var(--m-ink-tertiary)]">
{label}
</span>
<div className="text-base font-medium text-[color:var(--m-ink-primary)]">
{name}
</div>
<div
className="font-mono text-[13px] text-[color:var(--m-ink-secondary)] tabular-nums"
style={{ fontFamily: "var(--m-font-mono)" }}
>
{identity}
</div>
{address ? <AddressBlock address={address} /> : null}
</div>
);
}
/**
* Parties section of the claim detail drawer (SP4).
*
* Three stacked cards on mobile (`grid-cols-1`), 3-up grid on desktop
* (`md:grid-cols-3`). Billing provider carries the full identity + tax
* id + address; subscriber shows the member record; payer is the slim
* name+id card. All optional fields (subscriber DOB, line2) are
* conditionally rendered so a missing value doesn't become "null" in
* the rendered text.
*/
export function PartiesGrid({ parties }: PartiesGridProps) {
const { billingProvider, subscriber, payer } = parties;
return (
<section
className="flex flex-col gap-3 px-6 py-4"
data-testid="parties-grid"
>
<h3
data-testid="section-label"
className="text-[10.5px] font-semibold uppercase tracking-[0.18em] text-[color:var(--m-ink-tertiary)]"
>
Parties
</h3>
<div
data-testid="parties-grid-inner"
className="grid grid-cols-1 md:grid-cols-3 gap-4"
>
<PartyCard
testId="party-billing-provider"
label="Billing provider"
name={billingProvider.name}
identity={
<>
<div>NPI {billingProvider.npi}</div>
{billingProvider.taxId ? (
<div>Tax ID {billingProvider.taxId}</div>
) : null}
</>
}
address={billingProvider.address}
/>
<PartyCard
testId="party-subscriber"
label="Subscriber"
name={`${subscriber.firstName} ${subscriber.lastName}`}
identity={
<>
<div>Member ID {subscriber.memberId}</div>
{subscriber.gender ? <div>Gender {subscriber.gender}</div> : null}
{subscriber.dob ? <div>DOB {subscriber.dob}</div> : null}
</>
}
/>
<PartyCard
testId="party-payer"
label="Payer"
name={payer.name}
identity={
<>
<div>ID {payer.id}</div>
</>
}
/>
</div>
</section>
);
}