Update create flow pages

2026-04-13 18:24:13 -06:00
parent a39b4aa04b
commit a0de78c020
66 changed files with 1028 additions and 538 deletions
@@ -0,0 +1,42 @@
+"use client";
+
+import RuleCard from "../../../components/cards/RuleCard";
+import { useTranslation } from "../../../contexts/MessagesContext";
+import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
+import { useCreateFlowMdUp } from "../../hooks/useCreateFlowMdUp";
+import { CreateFlowStepShell } from "../../components/CreateFlowStepShell";
+
+/** Create Community — frame 8 (Figma 19706-12135); URL segment `review`. */
+export function CommunityReviewScreen() {
+  const mdUp = useCreateFlowMdUp();
+  const t = useTranslation("create.review");
+
+  return (
+    <CreateFlowStepShell
+      variant="wideGridLoosePadding"
+      contentTopBelowMd="space-1400"
+    >
+      <div className="flex w-full min-w-0 flex-col gap-4 md:grid md:grid-cols-2 md:gap-[var(--measures-spacing-1200,48px)]">
+        <div className="min-w-0">
+          <CreateFlowHeaderLockup
+            title={t("header.title")}
+            description={t("header.description")}
+            justification="left"
+          />
+        </div>
+        <div className="min-w-0 w-full">
+          <RuleCard
+            title={t("ruleCard.title")}
+            description={t("ruleCard.description")}
+            size={mdUp ? "L" : "M"}
+            expanded={false}
+            backgroundColor="bg-[#c9fef9]"
+            logoUrl="/assets/Vector_MutualAid.svg"
+            logoAlt={t("ruleCard.logoAlt")}
+            className="rounded-[16px]"
+          />
+        </div>
+      </div>
+    </CreateFlowStepShell>
+  );
+}
@@ -0,0 +1,68 @@
+"use client";
+
+import { useMemo } from "react";
+import RuleCard from "../../../components/cards/RuleCard";
+import type { Category } from "../../../components/cards/RuleCard/RuleCard.types";
+import { useMessages, useTranslation } from "../../../contexts/MessagesContext";
+import { useCreateFlow } from "../../context/CreateFlowContext";
+import { useCreateFlowMdUp } from "../../hooks/useCreateFlowMdUp";
+import {
+  CREATE_FLOW_REVIEW_RULE_CARD_LAYOUT_CLASS,
+  CreateFlowLockupCardStepShell,
+} from "../../components/CreateFlowLockupCardStepShell";
+
+function buildFinalReviewCategories(
+  rows: { name: string; chips: string[] }[],
+): Category[] {
+  return rows.map((cat) => ({
+    name: cat.name,
+    chipOptions: cat.chips.map((label, idx) => ({
+      id: `${cat.name}-${idx}`,
+      label,
+      state: "unselected" as const,
+    })),
+  }));
+}
+
+export function FinalReviewScreen() {
+  const { state } = useCreateFlow();
+  const mdUp = useCreateFlowMdUp();
+  const t = useTranslation("create.finalReview");
+  const m = useMessages();
+
+  const finalReviewCategories = useMemo(
+    () => buildFinalReviewCategories(m.create.finalReview.categories),
+    [m.create.finalReview.categories],
+  );
+
+  const ruleCardTitle = useMemo(() => {
+    const raw = typeof state.title === "string" ? state.title.trim() : "";
+    return raw.length > 0 ? raw : t("ruleCardTitleFallback");
+  }, [state.title, t]);
+
+  const ruleCardDescription = useMemo(() => {
+    const raw =
+      typeof state.summary === "string" ? state.summary.trim() : "";
+    return raw.length > 0 ? raw : t("ruleCardDescriptionFallback");
+  }, [state.summary, t]);
+
+  return (
+    <CreateFlowLockupCardStepShell
+      lockupTitle={t("title")}
+      lockupDescription={t("description")}
+    >
+      <RuleCard
+        title={ruleCardTitle}
+        description={ruleCardDescription}
+        size={mdUp ? "L" : "M"}
+        expanded={true}
+        backgroundColor="bg-[#c9fef9]"
+        logoUrl="/assets/Vector_MutualAid.svg"
+        logoAlt={ruleCardTitle}
+        categories={finalReviewCategories}
+        className={CREATE_FLOW_REVIEW_RULE_CARD_LAYOUT_CLASS}
+        onClick={() => {}}
+      />
+    </CreateFlowLockupCardStepShell>
+  );
+}