{OPP_PARTNER.name} has passed your application to {product.provider}. We'll track it and update you here.
{[
[`${product.provider} reviews your application`, '1 to 2 business days'],
['You may be asked for documents', 'Salary certificate or bank statement'],
['Track progress in Himma', 'Home · Activity tracker'],
].map(([t, s], i) => (
{i + 1}
{t}
{s}
))}
{primaryBtn('Done', onClose)}
)}
);
}
// ── Tap-to-expand disclosure (collapsed detail behind a toggle) ──────────────
function OppDisclosure({ theme, accent, label, children }) {
const [open, setOpen] = React.useState(false);
return (
{open &&
{children}
}
);
}
// ── Collapsible "why it matters" row: title always shown, body behind a tap ──
function OppWhyItem({ theme, accent, title, body, last }) {
const [open, setOpen] = React.useState(false);
return (
{open && (
{body}
)}
);
}
// ── Generic opportunity detail screen ────────────────────────────────────────
// Renders the shared skeleton (hero → situation → AI reco with Apply CTAs →
// comparison → assumptions → marketplace CTA) from an OPPORTUNITIES entry.
// Card rewards keeps its own bespoke screen; the other 8 use this.
function OpportunityDetailScreen({ theme, accent, onBack, onAskHimma, onNav, opp }) {
const [applyProduct, setApplyProduct] = React.useState(null);
const [reminderSet, setReminderSet] = React.useState(false);
const products = OPP_MARKETPLACES[opp.category].products;
const alternatives = products.filter((p) => p.eligible && !p.isCurrent);
const openMarketplace = () => onNav && onNav('marketplace', { category: opp.category, returnTo: opp.route });
return (
{/* 1 · Hero — stat hero by default, or a gap hero (icon + context rows) */}
{opp.gapHero ? (
) : (
{opp.hero.twoStat && (
)}
)}
{/* 2a · Why this matters (optional check-bullet rationale) */}
{opp.why && (
{opp.why.map(([t, b], i, arr) => (
opp.whyCollapsible ? (
) : (
{opp.compare.rows.map((r, i) => {
// Long word-values (e.g. "Comprehensive") overflow the fixed column
// and collide; drop their size a step so each stays inside its cell.
const vFont = (String(r.a).length > 9 || String(r.b).length > 9) ? 10 : 11.5;
return (