Manage stakeholders implemented

app/(app)/create/screens/select/ConfirmStakeholdersScreen.tsx

@@ -1,25 +1,82 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
 import MultiSelect from "../../../../components/controls/MultiSelect";
 import Alert from "../../../../components/modals/Alert";
 import type { ChipOption } from "../../../../components/controls/MultiSelect/MultiSelect.types";
 import { useTranslation } from "../../../../contexts/MessagesContext";
+import { MAX_STAKEHOLDER_EMAILS } from "../../../../../lib/create/stakeholderLimits";
 import { useCreateFlow } from "../../context/CreateFlowContext";
 import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
 import { CreateFlowStepShell } from "../../components/CreateFlowStepShell";
 import { CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS } from "../../components/createFlowLayoutTokens";
+import {
+  CREATE_FLOW_MANAGE_STAKEHOLDERS_QUERY,
+  CREATE_FLOW_MANAGE_STAKEHOLDERS_VALUE,
+} from "../../utils/flowSteps";
+import { createFlowStepPath } from "../../utils/createFlowPaths";
+import { PublishedStakeholdersManagePanel } from "./PublishedStakeholdersManagePanel";
+
+const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+function emailsToChipOptions(emails: string[]): ChipOption[] {
+  return emails.map((email) => ({
+    id: email,
+    label: email,
+    state: "selected" as const,
+  }));
+}
 
 export function ConfirmStakeholdersScreen() {
-  const { markCreateFlowInteraction } = useCreateFlow();
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const { state, updateState, markCreateFlowInteraction } = useCreateFlow();
   const t = useTranslation("create.reviewAndComplete.confirmStakeholders");
+
+  const manageStakeholdersIntent =
+    searchParams?.get(CREATE_FLOW_MANAGE_STAKEHOLDERS_QUERY) ===
+    CREATE_FLOW_MANAGE_STAKEHOLDERS_VALUE;
+  const editingPublishedRuleId = state.editingPublishedRuleId?.trim() ?? "";
+  const managePublishedMode =
+    manageStakeholdersIntent && editingPublishedRuleId.length > 0;
+
+  useEffect(() => {
+    if (!manageStakeholdersIntent) return;
+    if (editingPublishedRuleId.length > 0) return;
+    router.replace(createFlowStepPath("edit-rule"));
+  }, [
+    manageStakeholdersIntent,
+    editingPublishedRuleId.length,
+    router,
+  ]);
+
+  const persistedKey = (state.stakeholderEmails ?? []).join("\0");
   const [toastDismissed, setToastDismissed] = useState(false);
+  const [chipError, setChipError] = useState<string | null>(null);
   const [stakeholderOptions, setStakeholderOptions] = useState<ChipOption[]>(
-    [],
+    () => emailsToChipOptions(state.stakeholderEmails ?? []),
   );
 
+  useEffect(() => {
+    setStakeholderOptions((prev) => {
+      const inFlight = prev.filter((c) => c.state === "custom");
+      const nextPersisted = emailsToChipOptions(state.stakeholderEmails ?? []);
+      return [...nextPersisted, ...inFlight];
+    });
+  }, [persistedKey]);
+
   const handleAddStakeholder = () => {
     markCreateFlowInteraction();
+    setChipError(null);
+    const confirmed = state.stakeholderEmails ?? [];
+    const customCount = stakeholderOptions.filter(
+      (o) => o.state === "custom",
+    ).length;
+    if (confirmed.length + customCount >= MAX_STAKEHOLDER_EMAILS) {
+      setChipError(t("maxStakeholders"));
+      return;
+    }
     setStakeholderOptions((prev) => [
       ...prev,
       { id: crypto.randomUUID(), label: "", state: "custom" },
@@ -28,23 +85,72 @@ export function ConfirmStakeholdersScreen() {
 
   const handleCustomChipConfirm = (chipId: string, value: string) => {
     markCreateFlowInteraction();
+    setChipError(null);
+    const trimmed = value.trim().toLowerCase();
+    if (!EMAIL_PATTERN.test(trimmed)) {
+      setChipError(t("invalidEmail"));
+      return;
+    }
+    const current = state.stakeholderEmails ?? [];
+    if (current.includes(trimmed)) {
+      setChipError(t("duplicateEmail"));
+      setStakeholderOptions((prev) => prev.filter((opt) => opt.id !== chipId));
+      return;
+    }
+    if (current.length >= MAX_STAKEHOLDER_EMAILS) {
+      setChipError(t("maxStakeholders"));
+      setStakeholderOptions((prev) => prev.filter((opt) => opt.id !== chipId));
+      return;
+    }
     setStakeholderOptions((prev) =>
       prev.map((opt) =>
-        opt.id === chipId ? { ...opt, label: value, state: "selected" } : opt,
+        opt.id === chipId
+          ? { id: trimmed, label: trimmed, state: "selected" as const }
+          : opt,
       ),
     );
+    updateState({ stakeholderEmails: [...current, trimmed] });
   };
 
   const handleCustomChipClose = (chipId: string) => {
     markCreateFlowInteraction();
+    setChipError(null);
     setStakeholderOptions((prev) => prev.filter((opt) => opt.id !== chipId));
   };
 
   const handleChipClick = (chipId: string) => {
     markCreateFlowInteraction();
+    setChipError(null);
     setStakeholderOptions((prev) => prev.filter((opt) => opt.id !== chipId));
+    updateState({
+      stakeholderEmails: (state.stakeholderEmails ?? []).filter(
+        (e) => e !== chipId,
+      ),
+    });
   };
 
+  if (managePublishedMode) {
+    return (
+      <CreateFlowStepShell
+        variant="centeredNarrowBottomPad"
+        contentTopBelowMd="space-1400"
+      >
+        <div
+          className={`flex flex-col items-start gap-[var(--measures-spacing-300,12px)] ${CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS}`}
+        >
+          <div className="flex w-full flex-col gap-[var(--measures-spacing-200,8px)] py-[12px]">
+            <CreateFlowHeaderLockup
+              title={t("managePublished.lockupTitle")}
+              description={t("managePublished.lockupDescription")}
+              justification="left"
+            />
+          </div>
+          <PublishedStakeholdersManagePanel ruleId={editingPublishedRuleId} />
+        </div>
+      </CreateFlowStepShell>
+    );
+  }
+
   return (
     <>
       <CreateFlowStepShell
@@ -61,6 +167,14 @@ export function ConfirmStakeholdersScreen() {
               justification="left"
             />
           </div>
+          {chipError ? (
+            <p
+              className="font-inter text-sm text-[var(--color-border-default-utility-negative)]"
+              role="alert"
+            >
+              {chipError}
+            </p>
+          ) : null}
           <MultiSelect
             formHeader={false}
             showHelpIcon={false}