Update create flow pages

tests/components/AuthModalContext.test.tsx

@@ -31,10 +31,10 @@ vi.mock("../../lib/create/api", () => ({
   requestMagicLink: vi.fn(),
 }));
 
-vi.mock("../../app/create/anonymousDraftStorage", async (importOriginal) => {
+vi.mock("../../app/create/utils/anonymousDraftStorage", async (importOriginal) => {
   const actual =
     await importOriginal<
-      typeof import("../../app/create/anonymousDraftStorage")
+      typeof import("../../app/create/utils/anonymousDraftStorage")
     >();
   return {
     ...actual,
@@ -43,7 +43,7 @@ vi.mock("../../app/create/anonymousDraftStorage", async (importOriginal) => {
 });
 
 import { requestMagicLink } from "../../lib/create/api";
-import { setTransferPendingFlag } from "../../app/create/anonymousDraftStorage";
+import { setTransferPendingFlag } from "../../app/create/utils/anonymousDraftStorage";
 
 function LoginTrigger() {
   const { openLogin, closeLogin } = useAuthModal();
@@ -57,7 +57,7 @@ function LoginTrigger() {
         onClick={() =>
           openLogin({
             variant: "saveProgress",
-            nextPath: "/create/select?syncDraft=1",
+            nextPath: "/create/community-size?syncDraft=1",
           })
         }
       >
@@ -143,7 +143,7 @@ describe("AuthModalProvider (header overlay)", () => {
     await waitFor(() => {
       expect(requestMagicLink).toHaveBeenCalledWith(
         "guest@example.com",
-        "/create/select?syncDraft=1",
+        "/create/community-size?syncDraft=1",
       );
     });
     expect(setTransferPendingFlag).toHaveBeenCalled();

tests/components/CompletedPage.test.tsx

@@ -1,16 +1,16 @@
 import { describe, it, expect } from "vitest";
 import { renderWithProviders as render, screen } from "../utils/test-utils";
 import "@testing-library/jest-dom/vitest";
-import CompletedPage from "../../app/create/completed/page";
+import { CompletedScreen } from "../../app/create/screens/completed/CompletedScreen";
 
-describe("CompletedPage", () => {
+describe("CompletedScreen", () => {
   it("renders without crashing", () => {
-    render(<CompletedPage />);
+    render(<CompletedScreen />);
     expect(screen.getByRole("heading", { level: 1 })).toBeInTheDocument();
   });
 
   it("renders HeaderLockup with expected title", () => {
-    render(<CompletedPage />);
+    render(<CompletedScreen />);
     expect(
       screen.getByRole("heading", {
         name: "Mutual Aid Mondays",
@@ -19,7 +19,7 @@ describe("CompletedPage", () => {
   });
 
   it("renders HeaderLockup with expected description", () => {
-    render(<CompletedPage />);
+    render(<CompletedScreen />);
     expect(
       screen.getByText(
         /Mutual Aid Monday is a grassroots community in Denver, founded in November 2020 by Kelsang Virya, dedicated to supporting neighbors experiencing homelessness./i,
@@ -28,7 +28,7 @@ describe("CompletedPage", () => {
   });
 
   it("renders Community Rule document with section labels", () => {
-    render(<CompletedPage />);
+    render(<CompletedScreen />);
     expect(screen.getByText("Values")).toBeInTheDocument();
     expect(screen.getByText("Communication")).toBeInTheDocument();
     expect(screen.getByText("Membership")).toBeInTheDocument();
@@ -37,7 +37,7 @@ describe("CompletedPage", () => {
   });
 
   it("renders document entry titles", () => {
-    render(<CompletedPage />);
+    render(<CompletedScreen />);
     expect(screen.getByText("Solidarity Forever")).toBeInTheDocument();
     expect(screen.getByText("Shared Leadership")).toBeInTheDocument();
     expect(screen.getByText("Organizing Offline")).toBeInTheDocument();
@@ -45,7 +45,7 @@ describe("CompletedPage", () => {
   });
 
   it("renders toast alert when page loads", () => {
-    render(<CompletedPage />);
+    render(<CompletedScreen />);
     expect(
       screen.getByText(
         "This is what folks see when you share your CommunityRule",
@@ -59,7 +59,7 @@ describe("CompletedPage", () => {
   });
 
   it("renders toast with role status", () => {
-    render(<CompletedPage />);
+    render(<CompletedScreen />);
     const statusRegions = screen.getAllByRole("status");
     expect(statusRegions.length).toBeGreaterThanOrEqual(1);
     expect(

tests/components/ConfirmStakeholdersPage.test.tsx

@@ -2,11 +2,11 @@ import { describe, it, expect } from "vitest";
 import userEvent from "@testing-library/user-event";
 import { renderWithProviders as render, screen } from "../utils/test-utils";
 import "@testing-library/jest-dom/vitest";
-import ConfirmStakeholdersPage from "../../app/create/confirm-stakeholders/page";
+import { ConfirmStakeholdersScreen } from "../../app/create/screens/select/ConfirmStakeholdersScreen";
 
-describe("ConfirmStakeholdersPage", () => {
+describe("ConfirmStakeholdersScreen", () => {
   it("renders title and description", () => {
-    render(<ConfirmStakeholdersPage />);
+    render(<ConfirmStakeholdersScreen />);
     expect(
       screen.getByRole("heading", {
         name: /Do other stakeholders need to be involved/i,
@@ -20,7 +20,7 @@ describe("ConfirmStakeholdersPage", () => {
   });
 
   it("renders Add stakeholder control", () => {
-    render(<ConfirmStakeholdersPage />);
+    render(<ConfirmStakeholdersScreen />);
     expect(
       screen.getByRole("button", { name: "Add stakeholder" }),
     ).toBeInTheDocument();
@@ -28,7 +28,7 @@ describe("ConfirmStakeholdersPage", () => {
 
   it("shows draft toast and can dismiss it", async () => {
     const user = userEvent.setup();
-    render(<ConfirmStakeholdersPage />);
+    render(<ConfirmStakeholdersScreen />);
     expect(
       screen.getByText(/Congratulations! You've drafted your CommunityRule!/i),
     ).toBeInTheDocument();

tests/components/FinalReviewPage.test.tsx

@@ -6,7 +6,7 @@ import {
   waitFor,
 } from "../utils/test-utils";
 import "@testing-library/jest-dom/vitest";
-import FinalReviewPage from "../../app/create/final-review/page";
+import { FinalReviewScreen } from "../../app/create/screens/review/FinalReviewScreen";
 import { useCreateFlow } from "../../app/create/context/CreateFlowContext";
 
 const FALLBACK_CARD_TITLE = "Your community";
@@ -24,17 +24,17 @@ function FinalReviewWithFlowState({
   useLayoutEffect(() => {
     replaceState({ title, ...(summary !== undefined ? { summary } : {}) });
   }, [replaceState, title, summary]);
-  return <FinalReviewPage />;
+  return <FinalReviewScreen />;
 }
 
-describe("FinalReviewPage", () => {
+describe("FinalReviewScreen", () => {
   it("renders without crashing", () => {
-    render(<FinalReviewPage />);
+    render(<FinalReviewScreen />);
     expect(screen.getByRole("heading", { level: 1 })).toBeInTheDocument();
   });
 
   it("renders lockup title", () => {
-    render(<FinalReviewPage />);
+    render(<FinalReviewScreen />);
     expect(
       screen.getByRole("heading", {
         name: "Review your CommunityRule",
@@ -43,7 +43,7 @@ describe("FinalReviewPage", () => {
   });
 
   it("renders lockup description", () => {
-    render(<FinalReviewPage />);
+    render(<FinalReviewScreen />);
     expect(
       screen.getByText(
         /Here's what other people will see. Make sure everything looks good before you finalize everything. Once the rule is finalized, you must use one of your decision-making mechanisms to edit it again./i,
@@ -52,12 +52,12 @@ describe("FinalReviewPage", () => {
   });
 
   it("renders RuleCard with fallback title when context has no name", () => {
-    render(<FinalReviewPage />);
+    render(<FinalReviewScreen />);
     expect(screen.getByText(FALLBACK_CARD_TITLE)).toBeInTheDocument();
   });
 
   it("renders RuleCard with fallback description when context has no summary", () => {
-    render(<FinalReviewPage />);
+    render(<FinalReviewScreen />);
     expect(
       screen.getByText(new RegExp(FALLBACK_CARD_DESCRIPTION_SNIPPET, "i")),
     ).toBeInTheDocument();
@@ -76,7 +76,7 @@ describe("FinalReviewPage", () => {
   });
 
   it("renders RuleCard as a button (card is interactive)", () => {
-    render(<FinalReviewPage />);
+    render(<FinalReviewScreen />);
     const buttons = screen.getAllByRole("button");
     expect(buttons.length).toBeGreaterThanOrEqual(1);
     expect(
@@ -85,7 +85,7 @@ describe("FinalReviewPage", () => {
   });
 
   it("renders expanded RuleCard with category labels", () => {
-    render(<FinalReviewPage />);
+    render(<FinalReviewScreen />);
     expect(screen.getByText("Values")).toBeInTheDocument();
     expect(screen.getByText("Communication")).toBeInTheDocument();
     expect(screen.getByText("Membership")).toBeInTheDocument();
@@ -94,7 +94,7 @@ describe("FinalReviewPage", () => {
   });
 
   it("renders category chips", () => {
-    render(<FinalReviewPage />);
+    render(<FinalReviewScreen />);
     expect(screen.getByText("Consciousness")).toBeInTheDocument();
     expect(screen.getByText("Signal")).toBeInTheDocument();
     expect(screen.getByText("Open Admission")).toBeInTheDocument();

tests/components/InformationalPage.test.tsx

@@ -1,11 +1,11 @@
 import { describe, it, expect } from "vitest";
 import { renderWithProviders as render, screen } from "../utils/test-utils";
 import "@testing-library/jest-dom/vitest";
-import InformationalPage from "../../app/create/informational/page";
+import { InformationalScreen } from "../../app/create/screens/informational/InformationalScreen";
 
-describe("InformationalPage", () => {
+describe("InformationalScreen", () => {
   it("renders without crashing", () => {
-    render(<InformationalPage />);
+    render(<InformationalScreen />);
     expect(
       screen.getByRole("heading", {
         name: "How CommunityRule helps groups like yours",
@@ -14,7 +14,7 @@ describe("InformationalPage", () => {
   });
 
   it("renders lockup description", () => {
-    render(<InformationalPage />);
+    render(<InformationalScreen />);
     expect(
       screen.getByText(
         /This flow will give you recommendations to improve your community/i,
@@ -23,7 +23,7 @@ describe("InformationalPage", () => {
   });
 
   it("renders first numbered list item title", () => {
-    render(<InformationalPage />);
+    render(<InformationalScreen />);
     expect(
       screen.getByText("Tell us about your organization"),
     ).toBeInTheDocument();

tests/components/LoginForm.test.tsx

@@ -32,10 +32,10 @@ vi.mock("../../lib/create/api", () => ({
   requestMagicLink: vi.fn(),
 }));
 
-vi.mock("../../app/create/anonymousDraftStorage", async (importOriginal) => {
+vi.mock("../../app/create/utils/anonymousDraftStorage", async (importOriginal) => {
   const actual =
     await importOriginal<
-      typeof import("../../app/create/anonymousDraftStorage")
+      typeof import("../../app/create/utils/anonymousDraftStorage")
     >();
   return {
     ...actual,
@@ -44,7 +44,7 @@ vi.mock("../../app/create/anonymousDraftStorage", async (importOriginal) => {
 });
 
 import { requestMagicLink } from "../../lib/create/api";
-import { setTransferPendingFlag } from "../../app/create/anonymousDraftStorage";
+import { setTransferPendingFlag } from "../../app/create/utils/anonymousDraftStorage";
 
 function renderLoginForm() {
   return renderWithProviders(
@@ -119,7 +119,7 @@ describe("LoginForm", () => {
       <Suspense fallback={null}>
         <LoginForm
           variant="saveProgress"
-          magicLinkNextPath="/create/select?syncDraft=1"
+          magicLinkNextPath="/create/community-size?syncDraft=1"
         />
       </Suspense>,
     );
@@ -133,7 +133,7 @@ describe("LoginForm", () => {
     await waitFor(() => {
       expect(requestMagicLink).toHaveBeenCalledWith(
         "save@example.com",
-        "/create/select?syncDraft=1",
+        "/create/community-size?syncDraft=1",
       );
     });
     expect(setTransferPendingFlag).toHaveBeenCalled();

tests/components/ReviewPage.test.tsx

@@ -1,16 +1,16 @@
 import { describe, it, expect } from "vitest";
 import { renderWithProviders as render, screen } from "../utils/test-utils";
 import "@testing-library/jest-dom/vitest";
-import ReviewPage from "../../app/create/review/page";
+import { CommunityReviewScreen } from "../../app/create/screens/review/CommunityReviewScreen";
 
-describe("ReviewPage", () => {
+describe("CommunityReviewScreen", () => {
   it("renders without crashing", () => {
-    render(<ReviewPage />);
+    render(<CommunityReviewScreen />);
     expect(screen.getByRole("heading", { level: 1 })).toBeInTheDocument();
   });
 
   it("renders HeaderLockup with expected title", () => {
-    render(<ReviewPage />);
+    render(<CommunityReviewScreen />);
     expect(
       screen.getByRole("heading", {
         name: "Your community is added - congrats!",
@@ -19,7 +19,7 @@ describe("ReviewPage", () => {
   });
 
   it("renders HeaderLockup with expected description", () => {
-    render(<ReviewPage />);
+    render(<CommunityReviewScreen />);
     expect(
       screen.getByText(
         /In the next section, we'll go through membership, decision-making, conflict resolution, and community values and create a custom operating manual for your organization based on the specifics you just shared./i,
@@ -28,12 +28,12 @@ describe("ReviewPage", () => {
   });
 
   it("renders RuleCard with title", () => {
-    render(<ReviewPage />);
+    render(<CommunityReviewScreen />);
     expect(screen.getByText("Mutual Aid Mondays")).toBeInTheDocument();
   });
 
   it("renders RuleCard with description", () => {
-    render(<ReviewPage />);
+    render(<CommunityReviewScreen />);
     expect(
       screen.getByText(
         /Mutual Aid Monday is a grassroots community in Denver, founded in November 2020 by Kelsang Virya, dedicated to supporting neighbors experiencing homelessness./i,
@@ -42,7 +42,7 @@ describe("ReviewPage", () => {
   });
 
   it("renders RuleCard as a button (card is interactive)", () => {
-    render(<ReviewPage />);
+    render(<CommunityReviewScreen />);
     const buttons = screen.getAllByRole("button");
     expect(buttons.length).toBeGreaterThanOrEqual(1);
     expect(

tests/components/SelectPage.test.tsx

@@ -1,20 +1,20 @@
 import { describe, it, expect } from "vitest";
 import { renderWithProviders as render, screen } from "../utils/test-utils";
 import "@testing-library/jest-dom/vitest";
-import SelectPage from "../../app/create/select/page";
+import { CommunitySizeSelectScreen } from "../../app/create/screens/select/CommunitySizeSelectScreen";
 
-describe("SelectPage", () => {
+describe("CommunitySizeSelectScreen", () => {
   it("renders HeaderLockup title", () => {
-    render(<SelectPage />);
+    render(<CommunitySizeSelectScreen />);
     expect(
       screen.getByRole("heading", {
-        name: "What is your community called?",
+        name: "How large is your community?",
       }),
     ).toBeInTheDocument();
   });
 
   it("renders MultiSelect add control", () => {
-    render(<SelectPage />);
+    render(<CommunitySizeSelectScreen />);
     const addButtons = screen.getAllByRole("button", {
       name: "Add organization type",
     });
@@ -22,8 +22,8 @@ describe("SelectPage", () => {
   });
 
   it("renders preset chip labels", () => {
-    render(<SelectPage />);
+    render(<CommunitySizeSelectScreen />);
     expect(screen.getByText("1 member")).toBeInTheDocument();
-    expect(screen.getByText("Non-profit")).toBeInTheDocument();
+    expect(screen.getByText("2-10 members")).toBeInTheDocument();
   });
 });

tests/components/TextPage.test.tsx

@@ -1,11 +1,17 @@
 import { describe, it, expect } from "vitest";
 import { renderWithProviders as render, screen } from "../utils/test-utils";
 import "@testing-library/jest-dom/vitest";
-import TextPage from "../../app/create/text/page";
+import { CreateFlowTextFieldScreen } from "../../app/create/screens/text/CreateFlowTextFieldScreen";
 
-describe("TextPage", () => {
+describe("CreateFlowTextFieldScreen (community name)", () => {
   it("renders main heading", () => {
-    render(<TextPage />);
+    render(
+      <CreateFlowTextFieldScreen
+        messageNamespace="create.communityName"
+        stateField="title"
+        maxLength={48}
+      />,
+    );
     expect(
       screen.getByRole("heading", {
         name: "What is your community called?",
@@ -14,7 +20,13 @@ describe("TextPage", () => {
   });
 
   it("renders description and text field", () => {
-    render(<TextPage />);
+    render(
+      <CreateFlowTextFieldScreen
+        messageNamespace="create.communityName"
+        stateField="title"
+        maxLength={48}
+      />,
+    );
     expect(
       screen.getByText("This will be the name of your community"),
     ).toBeInTheDocument();

tests/components/UploadPage.test.tsx

@@ -1,11 +1,11 @@
 import { describe, it, expect } from "vitest";
 import { renderWithProviders as render, screen } from "../utils/test-utils";
 import "@testing-library/jest-dom/vitest";
-import UploadPage from "../../app/create/upload/page";
+import { CommunityUploadScreen } from "../../app/create/screens/upload/CommunityUploadScreen";
 
-describe("UploadPage", () => {
+describe("CommunityUploadScreen", () => {
   it("renders HeaderLockup", () => {
-    render(<UploadPage />);
+    render(<CommunityUploadScreen />);
     expect(
       screen.getByRole("heading", {
         name: "How should conflicts be resolved?",
@@ -14,7 +14,7 @@ describe("UploadPage", () => {
   });
 
   it("renders Upload control and helper copy", () => {
-    render(<UploadPage />);
+    render(<CommunityUploadScreen />);
     expect(screen.getByRole("button", { name: "Upload" })).toBeInTheDocument();
     expect(
       screen.getByText(/Add images, PDFs, and other files to the policy/i),