56 lines
3.3 KiB
TypeScript
56 lines
3.3 KiB
TypeScript
import type { Opportunity } from "../../domain/types";
|
|
import { useI18n } from "../../i18n/I18nContext";
|
|
import { Badge, Button } from "../ui";
|
|
import { ProductMatchDetails } from "./ProductMatchDetails";
|
|
|
|
type Props = {
|
|
opportunity: Opportunity;
|
|
onClose: () => void;
|
|
onAccept?: (opportunity: Opportunity) => void;
|
|
onComplete?: (opportunity: Opportunity) => void;
|
|
busy?: boolean;
|
|
};
|
|
|
|
export function OpportunityDetailDrawer({ opportunity, onClose, onAccept, onComplete, busy = false }: Props) {
|
|
const { t } = useI18n();
|
|
const pending = (opportunity.review_state || "pending") === "pending";
|
|
const accepted = opportunity.status === "accepted" || Boolean(opportunity.contact_id);
|
|
return (
|
|
<aside className="hb-opp-drawer" role="dialog" aria-modal="true" aria-label={t("radar.drawer.aria")}>
|
|
<div className="hb-opp-drawer__head">
|
|
<div>
|
|
<span className="hb-radar-section__hint">{t("radar.drawer.title")}</span>
|
|
<h2>{opportunity.primary_product_label || t("radar.drawer.noProduct")}</h2>
|
|
</div>
|
|
<Button type="button" variant="ghost" aria-label={t("radar.drawer.closeAria")} onClick={onClose}>{t("radar.drawer.close")}</Button>
|
|
</div>
|
|
<div className="hb-opp-drawer__body">
|
|
<p className="hb-opp-card__text">{opportunity.text}</p>
|
|
<div className="hb-opp-card__meta">
|
|
<Badge tone="brand">{t("radar.drawer.intent", { n: opportunity.intent_score })}</Badge>
|
|
{opportunity.priority_score !== undefined ? <Badge tone="warning">{t("radar.drawer.priority", { n: opportunity.priority_score })}</Badge> : null}
|
|
<span>@{opportunity.author_handle || t("radar.card.unknownAuthor")}</span>
|
|
</div>
|
|
{opportunity.demand_evidence?.length ? (
|
|
<section className="hb-opp-drawer__section"><h3>{t("radar.drawer.evidence")}</h3><ul>{opportunity.demand_evidence.map((item) => <li key={item}>{item}</li>)}</ul></section>
|
|
) : null}
|
|
<section className="hb-opp-drawer__section">
|
|
<h3>{t("radar.drawer.matches")}</h3>
|
|
{opportunity.product_matches?.length ? opportunity.product_matches.map((match) => <ProductMatchDetails key={match.product_id} match={match} />) : <p className="hb-radar-section__hint">{t("radar.drawer.generic")}</p>}
|
|
</section>
|
|
{opportunity.reasons.length ? <section className="hb-opp-drawer__section"><h3>{t("radar.drawer.judge")}</h3><div className="hb-opp-reasons">{opportunity.reasons.map((reason) => <div className="hb-opp-reason" key={reason.dimension}><strong>{reason.dimension}</strong><span>{reason.score}</span><span>{reason.reason}</span></div>)}</div></section> : null}
|
|
<div className="hb-opp-drawer__actions">
|
|
{pending && onComplete ? (
|
|
<Button type="button" disabled={busy} onClick={() => onComplete(opportunity)}>{t("radar.card.keep")}</Button>
|
|
) : null}
|
|
{pending && !accepted && onAccept ? (
|
|
<Button type="button" variant="ghost" disabled={busy} onClick={() => onAccept(opportunity)}>{t("radar.card.accept")}</Button>
|
|
) : null}
|
|
<a className="hb-btn hb-btn--ghost" href={opportunity.permalink} target="_blank" rel="noreferrer">{t("radar.drawer.openOriginal")}</a>
|
|
</div>
|
|
{pending ? <p className="hb-field__hint">{t("radar.drawer.hint")}</p> : null}
|
|
</div>
|
|
</aside>
|
|
);
|
|
}
|