Walk Create Community through the Figma screens and restore a chosen logo after reload, so a guest can leave without saving until they reach the email step.

app/(app)/create/screens/review/CommunityReviewScreen.tsx

@@ -4,7 +4,8 @@ import { useEffect, useRef, useState } from "react";
 import { useRouter } from "next/navigation";
 import Rule from "../../../../components/cards/Rule";
 import Button from "../../../../components/buttons/Button";
-import { useTranslation } from "../../../../contexts/MessagesContext";
+import InlineTextButton from "../../../../components/buttons/InlineTextButton";
+import { useMessages, useTranslation } from "../../../../contexts/MessagesContext";
 import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
 import { useCreateFlow } from "../../context/CreateFlowContext";
 import { useCreateFlowLgUp } from "../../hooks/useCreateFlowLgUp";
@@ -19,11 +20,67 @@ import {
 } from "../../../../../lib/assetUtils";
 import { methodSectionsPinsForHydratedSelections } from "../../../../../lib/create/publishedDocumentToCreateFlowState";
 import { CREATE_ROUTES, createFlowStepPath } from "../../utils/createFlowPaths";
+import { CREATE_FLOW_REVIEW_RETURN_QUERY_KEY } from "../../utils/flowSteps";
+import type { CreateFlowStep } from "../../types";
+
+function firstId(ids: readonly string[] | undefined): string | undefined {
+  return ids?.find((id) => id.length > 0);
+}
+
+function chipLabel(
+  id: string | undefined,
+  rows: readonly { id: string; label: string }[] | undefined,
+  snapshots: readonly { id: string; label: string }[] | undefined,
+): string | undefined {
+  if (!id) return undefined;
+  const fromSnap = snapshots?.find((row) => row.id === id)?.label.trim();
+  if (fromSnap) return fromSnap;
+  return rows?.find((row) => row.id === id)?.label;
+}
+
+function reviewSizeValue(
+  id: string | undefined,
+  sizes: readonly { id: string; label: string }[],
+  peopleTemplate: string,
+): string | undefined {
+  if (!id) return undefined;
+  const row = sizes.find((item) => item.id === id);
+  if (!row) return undefined;
+  if (id === "oneMember") return row.label;
+  return peopleTemplate.replace("{label}", row.label);
+}
+
+function CommunityReviewAnswerRow({
+  label,
+  value,
+  editLabel,
+  onEdit,
+}: {
+  label: string;
+  value: string;
+  editLabel: string;
+  onEdit: () => void;
+}) {
+  return (
+    <div className="flex w-full items-start justify-between gap-[var(--space-400)] py-[var(--space-300)]">
+      <div className="flex min-w-0 flex-1 flex-col gap-[var(--space-100)]">
+        <p className="text-small-label text-[color:var(--color-content-default-secondary)]">
+          {label}
+        </p>
+        <p className="text-medium-paragraph text-[color:var(--color-content-default-primary)]">
+          {value}
+        </p>
+      </div>
+      <InlineTextButton onClick={onEdit}>{editLabel}</InlineTextButton>
+    </div>
+  );
+}
 
 /** Create Community review — Figma `19706:12135` (`/create/review`; two columns from `lg:`; column caps in `createFlowLayoutTokens`). */
 export function CommunityReviewScreen() {
   const router = useRouter();
   const lgUp = useCreateFlowLgUp();
+  const messages = useMessages();
   const t = useTranslation("create.community.review");
   const { state, updateState } = useCreateFlow();
   /**
@@ -97,6 +154,32 @@ export function CommunityReviewScreen() {
       ? state.communityAvatarUrl.trim()
       : null;
 
+  const structure = messages.create.community.communityStructure;
+  const sizes = messages.create.community.communitySize.communitySizes;
+  const kindValue = chipLabel(
+    firstId(state.selectedOrganizationTypeIds),
+    structure.organizationTypes,
+    state.communityStructureChipSnapshots?.organizationTypes,
+  );
+  const sizeValue = reviewSizeValue(
+    firstId(state.selectedCommunitySizeIds),
+    sizes,
+    t("rows.sizePeople"),
+  );
+  const maturityValue = chipLabel(
+    firstId(state.selectedMaturityIds),
+    structure.maturityOptions,
+    state.communityStructureChipSnapshots?.maturity,
+  );
+
+  const goEdit = (step: CreateFlowStep) => {
+    router.push(
+      createFlowStepPath(step, {
+        [CREATE_FLOW_REVIEW_RETURN_QUERY_KEY]: "review",
+      }),
+    );
+  };
+
   if (state.pendingTemplateAction || !reviewReady) {
     return null;
   }
@@ -143,7 +226,7 @@ export function CommunityReviewScreen() {
             description={t("header.description")}
           />
         </div>
-        <div className={CREATE_FLOW_MD_UP_GRID_CELL_CLASS}>
+        <div className={`flex flex-col ${CREATE_FLOW_MD_UP_GRID_CELL_CLASS}`}>
           <Rule
             title={cardTitle}
             description={cardDescription}
@@ -156,6 +239,32 @@ export function CommunityReviewScreen() {
             logoAlt={cardTitle}
             className="rounded-[24px]"
           />
+          <div className="mt-[var(--space-600)] flex w-full flex-col divide-y divide-[var(--color-border-default-secondary)]">
+            {kindValue ? (
+              <CommunityReviewAnswerRow
+                label={t("rows.kind")}
+                value={kindValue}
+                editLabel={t("rows.edit")}
+                onEdit={() => goEdit("community-structure")}
+              />
+            ) : null}
+            {sizeValue ? (
+              <CommunityReviewAnswerRow
+                label={t("rows.size")}
+                value={sizeValue}
+                editLabel={t("rows.edit")}
+                onEdit={() => goEdit("community-size")}
+              />
+            ) : null}
+            {maturityValue ? (
+              <CommunityReviewAnswerRow
+                label={t("rows.maturity")}
+                value={maturityValue}
+                editLabel={t("rows.edit")}
+                onEdit={() => goEdit("community-structure")}
+              />
+            ) : null}
+          </div>
         </div>
       </div>
     </CreateFlowStepShell>