Implement modals across create flow

2026-04-17 23:45:29 -06:00
parent 36dcb79870
commit 4854c49c4a
21 changed files with 2089 additions and 318 deletions
@@ -16,23 +16,18 @@ import { useCreateFlowMdUp } from "../../hooks/useCreateFlowMdUp";
 import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
 import CardStack from "../../../components/utility/CardStack";
 import Create from "../../../components/modals/Create";
-import TextArea from "../../../components/controls/TextArea";
+import InlineTextButton from "../../../components/buttons/InlineTextButton";
 import { CreateFlowStepShell } from "../../components/CreateFlowStepShell";
 import {
  CREATE_FLOW_CARD_STACK_AREA_MAX_CLASS,
  CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS,
 } from "../../components/createFlowLayoutTokens";
+import ModalTextAreaField from "../../components/ModalTextAreaField";

 const IN_PERSON_CARD_ID = "in-person-meetings";
 const SIGNAL_CARD_ID = "signal";
 const VIDEO_MEETINGS_CARD_ID = "video-meetings";

-const ADD_PLATFORM_CARD_IDS = [
-  IN_PERSON_CARD_ID,
-  SIGNAL_CARD_ID,
-  VIDEO_MEETINGS_CARD_ID,
-] as const;
-
 const SECTION_FIELDS = [
  "corePrinciple",
  "logisticsAdmin",
@@ -50,40 +45,6 @@ const COMMUNICATION_CARD_ORDER = [
  "7",
 ] as const;

-function CreateModalSection({
-  title,
-  value: _value,
-  onChange,
-}: {
-  title: string;
-  value: string;
-  onChange: (_value: string) => void;
-}) {
-  return (
-    <div className="flex flex-col gap-2">
-      <div className="flex items-center gap-2">
-        <h3 className="text-sm font-semibold leading-tight text-[var(--color-content-default-primary)]">
-          {title}
-        </h3>
-        <span
-          className="flex h-4 w-4 shrink-0 items-center justify-center rounded-full border border-[var(--color-content-invert-brand-secondary)] bg-transparent text-[10px] font-medium leading-none text-[var(--color-content-invert-brand-secondary)]"
-          aria-hidden
-        >
-          ?
-        </span>
-      </div>
-      <TextArea
-        formHeader={false}
-        value={_value}
-        onChange={(e) => onChange(e.target.value)}
-        size="large"
-        rows={6}
-        appearance="embedded"
-      />
-    </div>
-  );
-}
-
 function AddPlatformModalContent({
  platformCardId,
 }: {
@@ -92,15 +53,15 @@ function AddPlatformModalContent({
  const { markCreateFlowInteraction } = useCreateFlow();
  const m = useMessages();
  const comm = m.create.communication;
-  const modal = comm.modals[platformCardId as keyof typeof comm.modals];
-  const defaults =
-    modal && "sections" in modal
-      ? modal.sections
-      : {
-          corePrinciple: "",
-          logisticsAdmin: "",
-          codeOfConduct: "",
-        };
+  const modal =
+    platformCardId in comm.modals
+      ? comm.modals[platformCardId as keyof typeof comm.modals]
+      : null;
+  const defaults = modal?.sections ?? {
+    corePrinciple: "",
+    logisticsAdmin: "",
+    codeOfConduct: "",
+  };

  const [sectionValues, setSectionValues] = useState<
    Record<SectionField, string>
@@ -118,14 +79,13 @@ function AddPlatformModalContent({
    [markCreateFlowInteraction],
  );

-  if (!modal || !("sections" in modal)) return null;
-
  return (
    <div className="flex flex-col gap-6">
      {SECTION_FIELDS.map((field) => (
-        <CreateModalSection
+        <ModalTextAreaField
          key={field}
-          title={comm.sectionHeadings[field]}
+          label={comm.sectionHeadings[field]}
+          rows={6}
          value={sectionValues[field]}
          onChange={(v) => updateSection(field, v)}
        />
@@ -134,13 +94,6 @@ function AddPlatformModalContent({
  );
 }

-function isAddPlatformCard(cardId: string | null): boolean {
-  return (
-    cardId !== null &&
-    (ADD_PLATFORM_CARD_IDS as readonly string[]).includes(cardId)
-  );
-}
-
 export function CommunicationMethodsScreen() {
  const m = useMessages();
  const comm = m.create.communication;
@@ -180,42 +133,55 @@ export function CommunicationMethodsScreen() {
  ) : (
    <>
      {comm.page.compactDescriptionBefore}
-      <button
-        type="button"
-        className="cursor-pointer border-none bg-transparent p-0 font-inherit text-[length:inherit] leading-[inherit] text-[var(--color-content-default-tertiary)] underline decoration-solid underline-offset-2 hover:opacity-90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-border-invert-primary)]"
+      <InlineTextButton
        onClick={() => {
          markCreateFlowInteraction();
          setExpanded(true);
        }}
      >
        {comm.page.compactDescriptionLinkLabel}
-      </button>
+      </InlineTextButton>
      {comm.page.compactDescriptionAfter}
    </>
  );

-  const modalConfig =
-    pendingCardId && pendingCardId in comm.modals
-      ? (() => {
-          const modal =
-            comm.modals[pendingCardId as keyof typeof comm.modals];
-          return {
-            title: modal.title,
-            description: modal.description,
-            nextButtonText: comm.addPlatform.nextButtonText,
-            showBackButton: false as const,
-            currentStep: undefined,
-            totalSteps: undefined,
-          };
-        })()
-      : {
-          title: comm.confirmModal.title,
-          description: comm.confirmModal.description,
-          nextButtonText: comm.confirmModal.nextButtonText,
-          showBackButton: false as const,
-          currentStep: undefined,
-          totalSteps: undefined,
-        };
+  const modalConfig = (() => {
+    if (!pendingCardId) {
+      return {
+        title: comm.confirmModal.title,
+        description: comm.confirmModal.description,
+        nextButtonText: comm.confirmModal.nextButtonText,
+        showBackButton: false as const,
+        currentStep: undefined,
+        totalSteps: undefined,
+      };
+    }
+
+    if (pendingCardId in comm.modals) {
+      const modal = comm.modals[pendingCardId as keyof typeof comm.modals];
+      return {
+        title: modal.title,
+        description: modal.description,
+        nextButtonText: comm.addPlatform.nextButtonText,
+        showBackButton: false as const,
+        currentStep: undefined,
+        totalSteps: undefined,
+      };
+    }
+
+    const cardRow =
+      pendingCardId in comm.cards
+        ? comm.cards[pendingCardId as keyof typeof comm.cards]
+        : null;
+    return {
+      title: cardRow?.label ?? comm.confirmModal.title,
+      description: cardRow?.supportText ?? comm.confirmModal.description,
+      nextButtonText: comm.addPlatform.nextButtonText,
+      showBackButton: false as const,
+      currentStep: undefined,
+      totalSteps: undefined,
+    };
+  })();

  const handleCardClick = useCallback(
    (id: string) => {
@@ -286,8 +252,9 @@ export function CommunicationMethodsScreen() {
        showBackButton={modalConfig.showBackButton}
        currentStep={modalConfig.currentStep}
        totalSteps={modalConfig.totalSteps}
+        backdropVariant="loginYellow"
      >
-        {isAddPlatformCard(pendingCardId) && pendingCardId ? (
+        {pendingCardId ? (
          <AddPlatformModalContent
            key={pendingCardId}
            platformCardId={pendingCardId}
@@ -3,6 +3,12 @@
 /**
 * `conflict-management` step — Figma compact card stack (node `20879-15979`).
 * Registry: `CREATE_FLOW_SCREEN_REGISTRY["conflict-management"]`.
+ *
+ * Card click opens the Figma "Add Approach" create modal (node `20874-172292`) with four
+ * controls: Core Principle, Applicable Scope (capsules), Process Protocol, and Restoration
+ * & Fallbacks. Section defaults are sourced from
+ * `messages/en/create/conflictManagement.json` and will be replaced with DB-driven
+ * content; labels are hard-coded per the Figma design.
 */

 import { useState, useCallback, useMemo } from "react";
@@ -12,11 +18,14 @@ import { useCreateFlowMdUp } from "../../hooks/useCreateFlowMdUp";
 import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
 import CardStack from "../../../components/utility/CardStack";
 import Create from "../../../components/modals/Create";
+import InlineTextButton from "../../../components/buttons/InlineTextButton";
 import { CreateFlowStepShell } from "../../components/CreateFlowStepShell";
 import {
  CREATE_FLOW_CARD_STACK_AREA_MAX_CLASS,
  CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS,
 } from "../../components/createFlowLayoutTokens";
+import ModalTextAreaField from "../../components/ModalTextAreaField";
+import ApplicableScopeField from "../../components/ApplicableScopeField";

 const CONFLICT_CARD_ORDER = [
  "peer-mediation",
@@ -29,6 +38,92 @@ const CONFLICT_CARD_ORDER = [
  "8",
 ] as const;

+type ConflictModalSections = {
+  corePrinciple: string;
+  applicableScope: string[];
+  selectedApplicableScope: string[];
+  processProtocol: string;
+  restorationFallbacks: string;
+};
+
+function AddConflictApproachModalContent({
+  approachCardId,
+}: {
+  approachCardId: string;
+}) {
+  const { markCreateFlowInteraction } = useCreateFlow();
+  const m = useMessages();
+  const cm = m.create.conflictManagement;
+  const modal =
+    approachCardId in cm.modals
+      ? cm.modals[approachCardId as keyof typeof cm.modals]
+      : null;
+  const modalSections = modal?.sections;
+  const defaults: ConflictModalSections = {
+    corePrinciple: modalSections?.corePrinciple ?? "",
+    applicableScope: modalSections?.applicableScope ?? [],
+    selectedApplicableScope: [],
+    processProtocol: modalSections?.processProtocol ?? "",
+    restorationFallbacks: modalSections?.restorationFallbacks ?? "",
+  };
+
+  const [sections, setSections] = useState<ConflictModalSections>(() => ({
+    corePrinciple: defaults.corePrinciple,
+    applicableScope: [...defaults.applicableScope],
+    selectedApplicableScope: [...defaults.selectedApplicableScope],
+    processProtocol: defaults.processProtocol,
+    restorationFallbacks: defaults.restorationFallbacks,
+  }));
+
+  const patch = useCallback(
+    <K extends keyof ConflictModalSections>(
+      key: K,
+      value: ConflictModalSections[K],
+    ) => {
+      markCreateFlowInteraction();
+      setSections((prev) => ({ ...prev, [key]: value }));
+    },
+    [markCreateFlowInteraction],
+  );
+
+  return (
+    <div className="flex flex-col gap-6">
+      <ModalTextAreaField
+        label={cm.sectionHeadings.corePrinciple}
+        value={sections.corePrinciple}
+        onChange={(v) => patch("corePrinciple", v)}
+      />
+      <ApplicableScopeField
+        label={cm.sectionHeadings.applicableScope}
+        addLabel={cm.scopeAddButtonLabel}
+        scopes={sections.applicableScope}
+        selectedScopes={sections.selectedApplicableScope}
+        onToggleScope={(scope) =>
+          patch(
+            "selectedApplicableScope",
+            sections.selectedApplicableScope.includes(scope)
+              ? sections.selectedApplicableScope.filter((s) => s !== scope)
+              : [...sections.selectedApplicableScope, scope],
+          )
+        }
+        onAddScope={(scope) =>
+          patch("applicableScope", [...sections.applicableScope, scope])
+        }
+      />
+      <ModalTextAreaField
+        label={cm.sectionHeadings.processProtocol}
+        value={sections.processProtocol}
+        onChange={(v) => patch("processProtocol", v)}
+      />
+      <ModalTextAreaField
+        label={cm.sectionHeadings.restorationFallbacks}
+        value={sections.restorationFallbacks}
+        onChange={(v) => patch("restorationFallbacks", v)}
+      />
+    </div>
+  );
+}
+
 export function ConflictManagementScreen() {
  const m = useMessages();
  const cm = m.create.conflictManagement;
@@ -68,41 +163,55 @@ export function ConflictManagementScreen() {
  ) : (
    <>
      {cm.page.compactDescriptionBefore}
-      <button
-        type="button"
-        className="cursor-pointer border-none bg-transparent p-0 font-inherit text-[length:inherit] leading-[inherit] text-[var(--color-content-default-tertiary)] underline decoration-solid underline-offset-2 hover:opacity-90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-border-invert-primary)]"
+      <InlineTextButton
        onClick={() => {
          markCreateFlowInteraction();
          setExpanded(true);
        }}
      >
        {cm.page.compactDescriptionLinkLabel}
-      </button>
+      </InlineTextButton>
      {cm.page.compactDescriptionAfter}
    </>
  );

-  const modalConfig =
-    pendingCardId && pendingCardId in cm.modals
-      ? (() => {
-          const modal = cm.modals[pendingCardId as keyof typeof cm.modals];
-          return {
-            title: modal.title,
-            description: modal.description,
-            nextButtonText: cm.confirmModal.nextButtonText,
-            showBackButton: false as const,
-            currentStep: undefined,
-            totalSteps: undefined,
-          };
-        })()
-      : {
-          title: cm.confirmModal.title,
-          description: cm.confirmModal.description,
-          nextButtonText: cm.confirmModal.nextButtonText,
-          showBackButton: false as const,
-          currentStep: undefined,
-          totalSteps: undefined,
-        };
+  const modalConfig = (() => {
+    if (!pendingCardId) {
+      return {
+        title: cm.confirmModal.title,
+        description: cm.confirmModal.description,
+        nextButtonText: cm.confirmModal.nextButtonText,
+        showBackButton: false as const,
+        currentStep: undefined,
+        totalSteps: undefined,
+      };
+    }
+
+    if (pendingCardId in cm.modals) {
+      const modal = cm.modals[pendingCardId as keyof typeof cm.modals];
+      return {
+        title: modal.title,
+        description: modal.description,
+        nextButtonText: cm.addApproach.nextButtonText,
+        showBackButton: false as const,
+        currentStep: undefined,
+        totalSteps: undefined,
+      };
+    }
+
+    const cardRow =
+      pendingCardId in cm.cards
+        ? cm.cards[pendingCardId as keyof typeof cm.cards]
+        : null;
+    return {
+      title: cardRow?.label ?? cm.confirmModal.title,
+      description: cardRow?.supportText ?? cm.confirmModal.description,
+      nextButtonText: cm.addApproach.nextButtonText,
+      showBackButton: false as const,
+      currentStep: undefined,
+      totalSteps: undefined,
+    };
+  })();

  const handleCardClick = useCallback(
    (id: string) => {
@@ -173,7 +282,15 @@ export function ConflictManagementScreen() {
        showBackButton={modalConfig.showBackButton}
        currentStep={modalConfig.currentStep}
        totalSteps={modalConfig.totalSteps}
-      />
+        backdropVariant="loginYellow"
+      >
+        {pendingCardId ? (
+          <AddConflictApproachModalContent
+            key={pendingCardId}
+            approachCardId={pendingCardId}
+          />
+        ) : null}
+      </Create>
    </CreateFlowStepShell>
  );
 }
@@ -3,6 +3,12 @@
 /**
 * `membership-methods` step — Figma compact card stack (node `20858-13947`).
 * Registry: `CREATE_FLOW_SCREEN_REGISTRY["membership-methods"]`.
+ *
+ * Card click opens the Figma create modal (node `20858-13948`) with three
+ * editable sections — Eligibility & Philosophy, Joining Process, and
+ * Expectations & Removal. Section defaults come from
+ * `messages/en/create/membership.json` and will be replaced with DB-driven
+ * content.
 */

 import { useState, useCallback, useMemo } from "react";
@@ -12,11 +18,20 @@ import { useCreateFlowMdUp } from "../../hooks/useCreateFlowMdUp";
 import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
 import CardStack from "../../../components/utility/CardStack";
 import Create from "../../../components/modals/Create";
+import InlineTextButton from "../../../components/buttons/InlineTextButton";
 import { CreateFlowStepShell } from "../../components/CreateFlowStepShell";
 import {
  CREATE_FLOW_CARD_STACK_AREA_MAX_CLASS,
  CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS,
 } from "../../components/createFlowLayoutTokens";
+import ModalTextAreaField from "../../components/ModalTextAreaField";
+
+const SECTION_FIELDS = [
+  "eligibility",
+  "joiningProcess",
+  "expectations",
+] as const;
+type SectionField = (typeof SECTION_FIELDS)[number];

 const MEMBERSHIP_CARD_ORDER = [
  "open-access",
@@ -29,6 +44,55 @@ const MEMBERSHIP_CARD_ORDER = [
  "8",
 ] as const;

+function AddMembershipModalContent({
+  membershipCardId,
+}: {
+  membershipCardId: string;
+}) {
+  const { markCreateFlowInteraction } = useCreateFlow();
+  const m = useMessages();
+  const mem = m.create.membership;
+  const modal =
+    membershipCardId in mem.modals
+      ? mem.modals[membershipCardId as keyof typeof mem.modals]
+      : null;
+  const defaults = modal?.sections ?? {
+    eligibility: "",
+    joiningProcess: "",
+    expectations: "",
+  };
+
+  const [sectionValues, setSectionValues] = useState<
+    Record<SectionField, string>
+  >(() => ({
+    eligibility: defaults.eligibility,
+    joiningProcess: defaults.joiningProcess,
+    expectations: defaults.expectations,
+  }));
+
+  const updateSection = useCallback(
+    (key: SectionField, value: string) => {
+      markCreateFlowInteraction();
+      setSectionValues((prev) => ({ ...prev, [key]: value }));
+    },
+    [markCreateFlowInteraction],
+  );
+
+  return (
+    <div className="flex flex-col gap-6">
+      {SECTION_FIELDS.map((field) => (
+        <ModalTextAreaField
+          key={field}
+          label={mem.sectionHeadings[field]}
+          rows={6}
+          value={sectionValues[field]}
+          onChange={(v) => updateSection(field, v)}
+        />
+      ))}
+    </div>
+  );
+}
+
 export function MembershipMethodsScreen() {
  const m = useMessages();
  const mem = m.create.membership;
@@ -68,41 +132,55 @@ export function MembershipMethodsScreen() {
  ) : (
    <>
      {mem.page.compactDescriptionBefore}
-      <button
-        type="button"
-        className="cursor-pointer border-none bg-transparent p-0 font-inherit text-[length:inherit] leading-[inherit] text-[var(--color-content-default-tertiary)] underline decoration-solid underline-offset-2 hover:opacity-90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-border-invert-primary)]"
+      <InlineTextButton
        onClick={() => {
          markCreateFlowInteraction();
          setExpanded(true);
        }}
      >
        {mem.page.compactDescriptionLinkLabel}
-      </button>
+      </InlineTextButton>
      {mem.page.compactDescriptionAfter}
    </>
  );

-  const modalConfig =
-    pendingCardId && pendingCardId in mem.modals
-      ? (() => {
-          const modal = mem.modals[pendingCardId as keyof typeof mem.modals];
-          return {
-            title: modal.title,
-            description: modal.description,
-            nextButtonText: mem.confirmModal.nextButtonText,
-            showBackButton: false as const,
-            currentStep: undefined,
-            totalSteps: undefined,
-          };
-        })()
-      : {
-          title: mem.confirmModal.title,
-          description: mem.confirmModal.description,
-          nextButtonText: mem.confirmModal.nextButtonText,
-          showBackButton: false as const,
-          currentStep: undefined,
-          totalSteps: undefined,
-        };
+  const modalConfig = (() => {
+    if (!pendingCardId) {
+      return {
+        title: mem.confirmModal.title,
+        description: mem.confirmModal.description,
+        nextButtonText: mem.confirmModal.nextButtonText,
+        showBackButton: false as const,
+        currentStep: undefined,
+        totalSteps: undefined,
+      };
+    }
+
+    if (pendingCardId in mem.modals) {
+      const modal = mem.modals[pendingCardId as keyof typeof mem.modals];
+      return {
+        title: modal.title,
+        description: modal.description,
+        nextButtonText: mem.addPlatform.nextButtonText,
+        showBackButton: false as const,
+        currentStep: undefined,
+        totalSteps: undefined,
+      };
+    }
+
+    const cardRow =
+      pendingCardId in mem.cards
+        ? mem.cards[pendingCardId as keyof typeof mem.cards]
+        : null;
+    return {
+      title: cardRow?.label ?? mem.confirmModal.title,
+      description: cardRow?.supportText ?? mem.confirmModal.description,
+      nextButtonText: mem.addPlatform.nextButtonText,
+      showBackButton: false as const,
+      currentStep: undefined,
+      totalSteps: undefined,
+    };
+  })();

  const handleCardClick = useCallback(
    (id: string) => {
@@ -173,7 +251,15 @@ export function MembershipMethodsScreen() {
        showBackButton={modalConfig.showBackButton}
        currentStep={modalConfig.currentStep}
        totalSteps={modalConfig.totalSteps}
-      />
+        backdropVariant="loginYellow"
+      >
+        {pendingCardId ? (
+          <AddMembershipModalContent
+            key={pendingCardId}
+            membershipCardId={pendingCardId}
+          />
+        ) : null}
+      </Create>
    </CreateFlowStepShell>
  );
 }