adilallo
97 lines
3.2 KiB
TypeScript
97 lines
3.2 KiB
TypeScript
"use client";
|
|
|
|
import { useMemo, useState } from "react";
|
|
import Image from "next/image";
|
|
import Rule from "../Rule";
|
|
import type { Category, RuleProps } from "../Rule";
|
|
import { getAssetPath } from "../../../../lib/assetUtils";
|
|
import type { RuleTemplateDto } from "../../../../lib/create/fetchTemplates";
|
|
import {
|
|
templateBodyToReviewData,
|
|
templateSummaryFromBody,
|
|
} from "../../../../lib/create/templateReviewMapping";
|
|
import {
|
|
getGovernanceTemplateCatalogEntry,
|
|
} from "../../../../lib/templates/governanceTemplateCatalog";
|
|
import { TEMPLATE_GRID_FALLBACK_PRESENTATION } from "../../../../lib/templates/templateGridPresentation";
|
|
import { TemplateChipDetailModal } from "./TemplateChipDetailModal";
|
|
|
|
export interface TemplateReviewCardProps {
|
|
template: RuleTemplateDto;
|
|
/** Merged onto Rule `className` (e.g. final-review desktop vs mobile radius/padding). */
|
|
ruleCardClassName?: string;
|
|
/** Rule size; create-flow passes `L` at/above `md`, `M` below (640px). */
|
|
size?: RuleProps["size"];
|
|
}
|
|
|
|
/**
|
|
* Expanded Rule for template review: surfaces + icon from Figma catalog (21764-16435);
|
|
* tag rows from API `body`. Chip clicks open a read-only detail modal per
|
|
* facet group (values / communication / membership / decision-making / conflict
|
|
* management) so reviewers can see what each chip means without editing.
|
|
*/
|
|
export function TemplateReviewCard({
|
|
template,
|
|
ruleCardClassName = "",
|
|
size = "L",
|
|
}: TemplateReviewCardProps) {
|
|
const catalog = getGovernanceTemplateCatalogEntry(template.slug);
|
|
const pres = catalog ?? TEMPLATE_GRID_FALLBACK_PRESENTATION;
|
|
const { categories: rawCategories, chipDetailsByChipId } = useMemo(
|
|
() => templateBodyToReviewData(template.body),
|
|
[template.body],
|
|
);
|
|
const summary = templateSummaryFromBody(template.description, template.body);
|
|
|
|
const [activeChipId, setActiveChipId] = useState<string | null>(null);
|
|
|
|
const categories = useMemo<Category[]>(
|
|
() =>
|
|
rawCategories.map((category) => ({
|
|
...category,
|
|
onChipClick: (_categoryName, chipId) => {
|
|
setActiveChipId(chipId);
|
|
},
|
|
})),
|
|
[rawCategories, setActiveChipId],
|
|
);
|
|
|
|
const activeDetail =
|
|
activeChipId !== null ? chipDetailsByChipId[activeChipId] ?? null : null;
|
|
|
|
return (
|
|
<>
|
|
<Rule
|
|
title={template.title}
|
|
description={summary}
|
|
expanded
|
|
size={size}
|
|
categories={categories}
|
|
backgroundColor={pres.backgroundColor}
|
|
className={ruleCardClassName}
|
|
onClick={() => {}}
|
|
hideCategoryAddButton
|
|
icon={
|
|
<Image
|
|
src={getAssetPath(pres.iconPath)}
|
|
alt={template.title}
|
|
width={90}
|
|
height={90}
|
|
className="
|
|
max-[639px]:w-[40px] max-[639px]:h-[40px]
|
|
min-[640px]:max-[1023px]:w-[56px] min-[640px]:max-[1023px]:h-[56px]
|
|
min-[1024px]:max-[1439px]:w-[56px] min-[1024px]:max-[1439px]:h-[56px]
|
|
min-[1440px]:w-[90px] min-[1440px]:h-[90px]
|
|
"
|
|
/>
|
|
}
|
|
/>
|
|
<TemplateChipDetailModal
|
|
isOpen={activeChipId !== null}
|
|
onClose={() => setActiveChipId(null)}
|
|
detail={activeDetail}
|
|
/>
|
|
</>
|
|
);
|
|
}
|