Show the payment status pill on the invoices table
React · React · intermediate · greenfield
Adds the status pill as a lookup table plus a one-line fallback. Three known statuses, one neutral fallback for whatever the billing provider invents next, design-system classes for the styling. Deliberately no enum, no context, no theming indirection — it's a leaf cell in a table.
Requirements
- Build `StatusPill({ status })` for the invoices table; `status` is a string straight from the billing API.
- The three known statuses map to fixed labels and styles: `paid` → “Paid” with the success pill style, `pending` → “Pending” with the warning style, `failed` → “Failed” with the danger style.
- Any other status value (the billing provider adds new ones without notice) renders the status text itself (trimmed) in the neutral pill style; an empty or whitespace-only status renders the literal text `Unknown` — never crash, never render an empty pill.
- Pill styles come from the design system's existing `pill`/`pill-*` CSS classes; this component adds no styles of its own.
- Keep it small: this is one leaf component of a table cell, rendered up to 100 times per page.
Files touched
- src/components/StatusPill.jsx
--- src/components/StatusPill.jsx
+const STATUS_STYLES = {
+ paid: { label: 'Paid', className: 'pill pill-success' },
+ pending: { label: 'Pending', className: 'pill pill-warning' },
+ failed: { label: 'Failed', className: 'pill pill-danger' },
+};
+
+export function StatusPill({ status }) {
+ const entry = Object.hasOwn(STATUS_STYLES, status)
+ ? STATUS_STYLES[status]
+ : { label: status.trim() || 'Unknown', className: 'pill' };
+ return <span className={entry.className}>{entry.label}</span>;
+}
+