| 1 | import { forwardRef } from "react"; |
| 2 | import { completionSummaryNeedsAttention } from "../lib/completionSummary"; |
| 3 | import { |
| 4 | completionGapLabel, |
| 5 | completionReviewLabel, |
| 6 | } from "../lib/completionSummaryDisplay"; |
| 7 | import { useT } from "../lib/i18n"; |
| 8 | import type { WireCompletionSummary } from "../lib/types"; |
| 9 | import { TurnCheckDetails } from "./TurnCheckDetails"; |
| 10 | |
| 11 | export const WORKSPACE_TURN_VERIFICATION_ID = "workspace-turn-verification"; |
| 12 | |
| 13 | export const WorkspaceTurnVerification = forwardRef<HTMLElement, { |
| 14 | summary: WireCompletionSummary; |
| 15 | tabId?: string; |
| 16 | sessionPath?: string; |
| 17 | }>( |
| 18 | function WorkspaceTurnVerification({ summary, tabId, sessionPath }, ref) { |
| 19 | const t = useT(); |
| 20 | return ( |
| 21 | <section |
| 22 | ref={ref} |
| 23 | id={WORKSPACE_TURN_VERIFICATION_ID} |
| 24 | className={`workspace-note workspace-completion-summary${completionSummaryNeedsAttention(summary) ? " workspace-completion-summary--attention" : ""}`} |
| 25 | aria-labelledby={`${WORKSPACE_TURN_VERIFICATION_ID}-title`} |
| 26 | > |
| 27 | <div className="workspace-completion-summary__head"> |
| 28 | <h3 id={`${WORKSPACE_TURN_VERIFICATION_ID}-title`} className="workspace-completion-summary__title">{t("completion.panelTitle")}</h3> |
| 29 | </div> |
| 30 | <TurnCheckDetails summary={summary} tabId={tabId} sessionPath={sessionPath} /> |
| 31 | {summary.receipt?.assessmentKind !== "facts" && <div className="workspace-completion-summary__details"> |
| 32 | <span>{t("completion.historicalAssessment")}</span> |
| 33 | <span>{t("completion.review", { status: completionReviewLabel(summary.review, t) })}</span> |
| 34 | {(summary.gap_kinds?.length ?? 0) > 0 && ( |
| 35 | <span>{t("completion.gaps", { gaps: summary.gap_kinds!.map((gap) => completionGapLabel(gap, t)).join(t("notice.deliveryRequirementSeparator")) })}</span> |
| 36 | )} |
| 37 | {summary.constraint_degraded && <span>{t("completion.constraintsLimited")}</span>} |
| 38 | </div>} |
| 39 | </section> |
| 40 | ); |
| 41 | }, |
| 42 | ); |
| 43 |