Fix: show 'Search in progress' derived status on opportunity card #402

[lourooo]

Fix: show 'Search in progress' derived status on opportunity card #402

Description

Adds statusMatch display to the opportunity card and opportunity profile header, mirroring how volunteer profiles show matching status. The field is read directly from the API response via type cast until SDK PR #89 lands.

Related Issues

Closes #402

Changes

• OpportunityCard— added statusMatch badge alongside the existing statusOpportunity badge
• OpportunityHeader — added statusMatch row between "Current status" and "Volunteer type", matching the volunteer header layout
• OpportunityCard.helpers.tsx — added matchStatusColorMap and matchStatusIconMap for all 4 values (vol-no-matches, vol-pending-match, vol-matched, vol-past)
• Translations (EN/DE) — added matchStatus keys under dashboard.opportunities and dashboard.opportunityProfile

Screenshots / Demos

Checklist

• WITHIN THE SCOPE OF AN ISSUE; No unnecessary files included
• Tests added/updated
• Documentation updated
• CI passes

[nadavosa]

PR #410 Review: Show statusMatch on opportunity card/header

The OpportunityCard path is correct — it uses its own matchStatusColorMap/matchStatusIconMap keyed on "vol-*" strings. One main issue in OpportunityHeader:

High: Unsafe type cast to StatusValue in OpportunityHeader will silently produce broken badge styling
statusMatch as StatusValue | undefined is passed to StatusRowField/ProfileStatusBadge. Those components look up the value in statusColorMap/statusIconMap (keyed on e.g. OpportunityMatchStatus.UNMATCHED = "unmatched"), which have no "vol-*" keys. The badge will silently fall back to the default background color and show no icon — the label renders but it looks unstyled.

Fix: Wire OpportunityHeader through the same matchStatusColorMap/matchStatusIconMap used by OpportunityCard, or add the "vol-*" keys to statusColorMap/statusIconMap in src/components/Dashboard/Profile/common/statusMaps.ts.

Low: PR description references SDK PR #88 and BE PR #414, but code TODOs reference SDK PR #89
One of these is wrong — please clarify so reviewers can track the right PRs.

Info: Translation key convention inconsistency
OpportunityCard uses dashboard.opportunities.matchStatus.vol-no-matches (with vol- prefix), OpportunityHeader uses dashboard.opportunityProfile.matchStatus.noMatches (camelCase). Both exist in the locale files, so no bug — but a comment explaining the distinction would help future maintainers.

[lourooo]

Updated

[nadavosa]

OpportunityCard is now correct — good. But OpportunityHeader still has the styling bug:

<StatusRowField
  status={statusMatch}   // runtime value: "vol-no-matches", "vol-matched", etc.
  ...
/>

StatusRowField passes status to ProfileStatusBadge, which looks it up in the global statusColorMap/statusIconMap. Those maps contain entries for VolunteerStateMatchType enum values (e.g. "no-matches") — not for "vol-*" strings. The badge will render with no color and no icon.

You already defined matchStatusColorMap/matchStatusIconMap with the right "vol-*" keys in OpportunityCard.helpers.tsx. The fix is to not use StatusRowField for this field in OpportunityHeader, and instead render the match badge directly using those maps — the same way OpportunityCard does.

[lourooo]

Updated