App reorganization

2026-04-18 14:12:49 -06:00
parent f866d11ff8
commit e9dab04b34
288 changed files with 2698 additions and 5029 deletions
@@ -0,0 +1,61 @@
+"use client";
+
+import RuleCard from "../../../../components/cards/RuleCard";
+import { useTranslation } from "../../../../contexts/MessagesContext";
+import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
+import { useCreateFlow } from "../../context/CreateFlowContext";
+import { useCreateFlowLgUp } from "../../hooks/useCreateFlowLgUp";
+import { CreateFlowStepShell } from "../../components/CreateFlowStepShell";
+import {
+  CREATE_FLOW_MD_UP_GRID_CELL_CLASS,
+  CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS,
+} from "../../components/createFlowLayoutTokens";
+
+/** Create Community review — Figma `19706:12135` (`/create/review`; two columns from `lg:`; column caps in `createFlowLayoutTokens`). */
+export function CommunityReviewScreen() {
+  const lgUp = useCreateFlowLgUp();
+  const t = useTranslation("create.review");
+  const { state } = useCreateFlow();
+
+  const cardTitle =
+    typeof state.title === "string" && state.title.trim().length > 0
+      ? state.title.trim()
+      : t("ruleCard.title");
+  const cardDescription =
+    typeof state.communityContext === "string" &&
+    state.communityContext.trim().length > 0
+      ? state.communityContext.trim()
+      : t("ruleCard.description");
+
+  return (
+    <CreateFlowStepShell
+      variant="wideGridLoosePadding"
+      contentTopBelowMd="space-1400"
+    >
+      <div
+        className={`flex w-full min-w-0 flex-col items-center gap-6 lg:mx-auto lg:w-full lg:grid lg:grid-cols-2 lg:items-center lg:justify-items-center lg:gap-x-[var(--measures-spacing-1200,48px)] lg:gap-y-6 ${CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS}`}
+      >
+        <div
+          className={`flex flex-col justify-center lg:min-h-[212px] ${CREATE_FLOW_MD_UP_GRID_CELL_CLASS}`}
+        >
+          <CreateFlowHeaderLockup
+            title={t("header.title")}
+            description={t("header.description")}
+          />
+        </div>
+        <div className={CREATE_FLOW_MD_UP_GRID_CELL_CLASS}>
+          <RuleCard
+            title={cardTitle}
+            description={cardDescription}
+            size={lgUp ? "L" : "M"}
+            expanded={false}
+            backgroundColor="bg-[var(--color-teal-teal50,#c9fef9)]"
+            logoUrl="/assets/Vector_MutualAid.svg"
+            logoAlt={cardTitle}
+            className="rounded-[24px]"
+          />
+        </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>
+  );
+}