Manage stakeholders implemented

2026-05-09 23:07:59 -06:00
parent 534c6c7c0e
commit 9f2141a62d
43 changed files with 2082 additions and 93 deletions
@@ -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}
@@ -0,0 +1,218 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import Button from "../../../../components/buttons/Button";
+import TextInput from "../../../../components/controls/TextInput";
+import { useTranslation } from "../../../../contexts/MessagesContext";
+import {
+  addRuleStakeholder,
+  deleteRuleStakeholder,
+  fetchRuleStakeholders,
+  resendRuleStakeholderInvite,
+  type RuleStakeholderListItem,
+} from "../../../../../lib/create/api";
+
+const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+export function PublishedStakeholdersManagePanel({
+  ruleId,
+}: {
+  ruleId: string;
+}) {
+  const t = useTranslation("create.reviewAndComplete.confirmStakeholders");
+  const [items, setItems] = useState<RuleStakeholderListItem[] | null>(null);
+  const [loadError, setLoadError] = useState(false);
+  const [email, setEmail] = useState("");
+  const [fieldError, setFieldError] = useState("");
+  const [bannerError, setBannerError] = useState("");
+  const [addBusy, setAddBusy] = useState(false);
+  const [busyId, setBusyId] = useState<string | null>(null);
+
+  const load = useCallback(async () => {
+    setLoadError(false);
+    const list = await fetchRuleStakeholders(ruleId);
+    if (list === null) {
+      setLoadError(true);
+      setItems([]);
+      return;
+    }
+    setItems(list);
+  }, [ruleId]);
+
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  const handleAdd = async () => {
+    setBannerError("");
+    setFieldError("");
+    const trimmed = email.trim().toLowerCase();
+    if (!EMAIL_PATTERN.test(trimmed)) {
+      setFieldError(t("managePublished.invalidEmail"));
+      return;
+    }
+    setAddBusy(true);
+    const res = await addRuleStakeholder(ruleId, trimmed);
+    setAddBusy(false);
+    if (res.ok === true) {
+      setEmail("");
+      void load();
+      return;
+    }
+    if (res.retryAfterMs != null && res.retryAfterMs > 0) {
+      const seconds = Math.ceil(res.retryAfterMs / 1000);
+      setBannerError(
+        t("managePublished.rateLimited").replace("{seconds}", String(seconds)),
+      );
+      return;
+    }
+    setBannerError(
+      res.error.trim() !== "" ? res.error : t("managePublished.actionFailed"),
+    );
+  };
+
+  const handleRemove = async (id: string) => {
+    setBannerError("");
+    setBusyId(id);
+    const res = await deleteRuleStakeholder(ruleId, id);
+    setBusyId(null);
+    if (res.ok === true) {
+      void load();
+      return;
+    }
+    setBannerError(
+      res.error.trim() !== "" ? res.error : t("managePublished.actionFailed"),
+    );
+  };
+
+  const handleResend = async (id: string) => {
+    setBannerError("");
+    setBusyId(id);
+    const res = await resendRuleStakeholderInvite(ruleId, id);
+    setBusyId(null);
+    if (res.ok === true) {
+      return;
+    }
+    if (res.retryAfterMs != null && res.retryAfterMs > 0) {
+      const seconds = Math.ceil(res.retryAfterMs / 1000);
+      setBannerError(
+        t("managePublished.rateLimited").replace("{seconds}", String(seconds)),
+      );
+      return;
+    }
+    setBannerError(
+      res.error.trim() !== "" ? res.error : t("managePublished.actionFailed"),
+    );
+  };
+
+  return (
+    <section className="flex w-full flex-col gap-4 pt-1 pb-2">
+      {bannerError ? (
+        <p
+          className="font-inter text-sm text-[var(--color-border-default-utility-negative)]"
+          role="alert"
+        >
+          {bannerError}
+        </p>
+      ) : null}
+
+      {loadError ? (
+        <p className="font-inter text-sm text-[var(--color-border-default-utility-negative)]">
+          {t("managePublished.loadFailed")}
+        </p>
+      ) : items === null ? (
+        <p className="font-inter text-sm text-[var(--color-content-default-secondary)]">
+          {t("managePublished.loading")}
+        </p>
+      ) : items.length === 0 ? (
+        <p className="font-inter text-sm text-[var(--color-content-default-tertiary)]">
+          {t("managePublished.empty")}
+        </p>
+      ) : (
+        <ul className="flex flex-col gap-3">
+          {items.map((row) => (
+            <li
+              key={row.id}
+              className="flex flex-col gap-2 rounded-lg bg-black/5 px-3 py-3 md:flex-row md:items-center md:justify-between"
+            >
+              <div className="flex min-w-0 flex-col gap-1">
+                <span className="truncate font-inter text-sm font-medium text-[var(--color-content-default-primary)] md:text-base">
+                  {row.email}
+                </span>
+                <span className="font-inter text-xs text-[var(--color-content-default-tertiary)] md:text-sm">
+                  {row.status === "pending"
+                    ? t("managePublished.pending")
+                    : t("managePublished.accepted")}
+                </span>
+              </div>
+              <div className="flex flex-wrap gap-2">
+                {row.status === "pending" ? (
+                  <Button
+                    type="button"
+                    size="small"
+                    buttonType="outline"
+                    palette="default"
+                    disabled={busyId === row.id}
+                    onClick={() => void handleResend(row.id)}
+                    ariaLabel={t("managePublished.resendAria").replace(
+                      "{email}",
+                      row.email,
+                    )}
+                  >
+                    {t("managePublished.resend")}
+                  </Button>
+                ) : null}
+                <Button
+                  type="button"
+                  size="small"
+                  buttonType="outline"
+                  palette="default"
+                  disabled={busyId === row.id}
+                  onClick={() => void handleRemove(row.id)}
+                  ariaLabel={t("managePublished.removeAria").replace(
+                    "{email}",
+                    row.email,
+                  )}
+                >
+                  {t("managePublished.remove")}
+                </Button>
+              </div>
+            </li>
+          ))}
+        </ul>
+      )}
+
+      <div className="flex flex-col gap-3 md:flex-row md:items-end md:gap-3">
+        <div className="min-w-0 flex-1">
+          <TextInput
+            id="published-stakeholder-email"
+            type="email"
+            inputSize="small"
+            showHelpIcon={false}
+            label={t("managePublished.emailLabel")}
+            placeholder={t("managePublished.emailPlaceholder")}
+            value={email}
+            onChange={(e) => {
+              setEmail(e.target.value);
+              setFieldError("");
+            }}
+            error={Boolean(fieldError)}
+            textHint={fieldError || false}
+            autoComplete="email"
+          />
+        </div>
+        <Button
+          type="button"
+          size="small"
+          buttonType="filled"
+          palette="default"
+          className="md:mb-[2px]"
+          disabled={addBusy || items === null}
+          onClick={() => void handleAdd()}
+        >
+          {t("managePublished.addInvite")}
+        </Button>
+      </div>
+    </section>
+  );
+}