@graph8/sdk 0.362.0 → 0.373.0

package/blocks/sequencer/components/sequence-builder.tsx

@@ -6,17 +6,26 @@
  * is launched (SequenceList does that).
  *
  * SDK operations, in order:
- *   create:  1. listMailboxes         GET  /mailboxes               (read; the sender)
+ *   create:  1. listMailboxes         GET  /mailboxes               (read; the email sender, with `source`)
  *            2. listLists             GET  /lists                   (read; the audience, becomes associated_list_id)
- *            3. createSequence        POST /sequences               (external tier: confirmed; steps + sender in ONE call)
- *   edit:    1. getSequence / listSequenceSteps  GET /sequences/{id}, /sequences/{id}/steps  (read)
- *            2. addSequenceSteps      POST   /sequences/{id}/steps            (write; appended steps)
- *            3. updateSequenceStep    PATCH  /sequences/{id}/steps/{step_id}  (external: confirmed; replaces step_data)
- *            4. deleteSequenceStep    DELETE /sequences/{id}/steps/{step_id}  (destructive: confirmed)
+ *            3. listSequencerPhoneNumbers   GET /sequencer/channels/phone_numbers     (read; only with call steps)
+ *               listLinkedinAccounts        GET /sequencer/channels/linkedin_accounts (read; only with LinkedIn steps)
+ *            4. createSequence        POST /sequences               (external tier: confirmed; steps + senders in ONE call)
+ *   edit:    1. getSequence / listSequenceSteps / listSequenceChannels  GET /sequences/{id}, /steps, /channels  (read)
+ *            2. addSequenceChannels   POST   /sequences/{id}/channels         (write; a sender new steps need, if picked)
+ *            3. addSequenceSteps      POST   /sequences/{id}/steps            (write; appended steps)
+ *            4. updateSequenceStep    PATCH  /sequences/{id}/steps/{step_id}  (external: confirmed; replaces step_data)
+ *            5. deleteSequenceStep    DELETE /sequences/{id}/steps/{step_id}  (destructive: confirmed)
  *
- * Ids passed between steps: the chosen mailbox `id` + `email` become the sequence channel; the list `id` becomes
- * `associated_list_id`; createSequence returns the new sequence `id` (handed to `onSaved`). Changing a LIVE
- * sequence's copy changes what real people receive, which is why the update dialog says so.
+ * Every step type needs its own sender or POST /sequences/{id}/run refuses the launch with 400: email steps a
+ * mailbox, AI call steps a Voice AI number, call tasks a dialer number, LinkedIn steps a LinkedIn account. The
+ * builder asks for each one the steps need and will not create the draft without them. The audience list is
+ * required too: the API has no way to set it later, and a sequence without one cannot launch.
+ *
+ * Ids passed between steps: the chosen mailbox `id` + `email` (channel type from its `source`), phone `id` +
+ * `phone_number`, LinkedIn account `id` become the sequence channels; the list `id` becomes `associated_list_id`;
+ * createSequence returns the new sequence `id` (handed to `onSaved`). Changing a LIVE sequence's copy changes
+ * what real people receive, which is why the update dialog says so.
  */
 
 import { useRef, useState } from "react";
@@ -25,23 +34,29 @@ import { g8Delete, g8Get, g8Patch, g8Post } from "@/g8/lib/g8-client";
 import { useG8Query } from "@/g8/hooks/use-g8-query";
 import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
 import { ApiError } from "@/g8/components/api-error";
+import { ListSelect } from "@/g8/crm/components/list-select";
+import { FirstNotice } from "@/g8/components/paging-notices";
 import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
 import type { ConfirmTier } from "@/g8/components/confirm-spend-dialog";
 import { StepEditor } from "./step-editor";
 import {
-  channelTypeFor,
   fromApiStep,
   KIND_LABEL,
   KINDS,
   listOf,
+  mailboxChannelType,
+  mailboxUnsupportedReason,
   newIdempotencyKey,
   newStep,
   objectOf,
+  requiredSenders,
   statusGroup,
   stepIssues,
   toApiStep,
 } from "../lib/sequencer-utils";
 import type { ApiStep, DraftStep, StepKind } from "../lib/sequencer-utils";
+import { pluralWord } from "@/g8/lib/plural";
+import { useBrand } from "@/g8/hooks/use-brand";
 
 export interface SequenceBuilderProps {
   /** Edit this sequence's steps. Omit to build a new draft. */
@@ -57,12 +72,40 @@ interface MailboxOption {
   id: string;
   email: string | null;
   provider?: string | null;
+  source?: string | null;
+}
+interface PhoneOption {
+  id: number | string;
+  phone_number: string;
+  /** "ai" (Voice AI) or "dialer"; the API matches AI call steps to "ai" and call tasks to "dialer". */
+  inbound_type?: string | null;
+}
+interface LinkedinOption {
+  id: number | string;
+  name?: string | null;
+  display_name?: string | null;
+  public_identifier?: string | null;
+  account_id?: string | null;
+  email?: string | null;
+}
+interface SenderChannel {
+  channel_id: number;
+  channel_value: string;
+  channel_type: string;
 }
-interface ListOption {
-  id: number;
-  title: string;
-  contact_count?: number | null;
+
+/** Every bucket of a picker response (available, active, drafted), each id once. */
+function bucketed<T extends { id: number | string }>(envelope: unknown, keys: string[]): T[] {
+  const data = objectOf(envelope);
+  const all = keys.flatMap((k) => (Array.isArray(data[k]) ? (data[k] as T[]) : []));
+  return all.filter((item, i) => all.findIndex((o) => String(o.id) === String(item.id)) === i);
 }
+const PHONE_KEYS = ["phone_numbers", "active_phone_numbers", "drafted_phone_numbers"];
+const LINKEDIN_KEYS = ["linkedin_accounts", "active_linkedin_accounts", "drafted_linkedin_accounts"];
+const phoneFits = (p: PhoneOption, type: "ai" | "dialer") => !p.inbound_type || p.inbound_type === type;
+const linkedinLabel = (a: LinkedinOption) => a.name || a.display_name || a.public_identifier || a.email || `Account ${a.id}`;
+/** The mailboxes API has no paging: a full read is announced under the sender dropdown. */
+const MAILBOX_LIMIT = 200;
 type Pending = { kind: "create" } | { kind: "update" | "delete"; step: DraftStep };
 
 function describe(p: Pending, live: boolean): { tier: ConfirmTier; title: string; description: string; label: string } {
@@ -70,7 +113,7 @@ function describe(p: Pending, live: boolean): { tier: ConfirmTier; title: string
     return {
       tier: "external",
       title: "Create this sequence as a draft",
-      description: "Saves the steps and sender. Nobody is contacted until you launch it.",
+      description: "Saves the steps, the audience list and a sender for every step type. Nobody is contacted until you launch it.",
       label: "Create draft",
     };
   if (p.kind === "update")
@@ -91,9 +134,13 @@ function describe(p: Pending, live: boolean): { tier: ConfirmTier; title: string
 }
 
 export function SequenceBuilder({ sequenceId, defaultListId, ownerEmail, onSaved, className }: SequenceBuilderProps) {
+  const brand = useBrand();
   const editing = Boolean(sequenceId);
   const [name, setName] = useState("");
   const [mailboxId, setMailboxId] = useState("");
+  const [aiPhoneId, setAiPhoneId] = useState("");
+  const [dialerPhoneId, setDialerPhoneId] = useState("");
+  const [linkedinId, setLinkedinId] = useState("");
   const [listId, setListId] = useState(defaultListId ? String(defaultListId) : "");
   const [steps, setSteps] = useState<DraftStep[]>([]);
   const [loadedFor, setLoadedFor] = useState<string | null>(null);
@@ -106,9 +153,10 @@ export function SequenceBuilder({ sequenceId, defaultListId, ownerEmail, onSaved
     if (keys.current[slot]?.sig !== sig) keys.current[slot] = { sig, value: newIdempotencyKey() };
     return keys.current[slot].value;
   };
+  // Senders already attached in edit mode by an earlier (failed) append: never attach them twice.
+  const attached = useRef<Set<string>>(new Set());
 
-  const mailboxes = useG8Query((signal) => g8Get("/mailboxes", { limit: 200 }, { signal }), [], { enabled: !editing });
-  const lists = useG8Query((signal) => g8Get("/lists", { limit: 100 }, { signal }), [], { enabled: !editing });
+  const mailboxes = useG8Query((signal) => g8Get("/mailboxes", { limit: MAILBOX_LIMIT }, { signal }), [], { enabled: !editing });
   const existing = useG8Query(
     async (signal) => {
       const [seq, list] = await Promise.all([
@@ -120,24 +168,71 @@ export function SequenceBuilder({ sequenceId, defaultListId, ownerEmail, onSaved
     [sequenceId],
     { enabled: editing },
   );
+  // Which senders the sequence already has (edit mode). Unknown when this read fails: nothing is then asked for.
+  const current = useG8Query(
+    async (signal) => listOf<{ channel_type?: string | null }>(await g8Get(`/sequences/${sequenceId}/channels`, undefined, { signal })),
+    [sequenceId],
+    { enabled: editing },
+  );
   if (editing && existing.data && loadedFor !== sequenceId) {
     setLoadedFor(sequenceId ?? null);
     setSteps(existing.data.steps);
   }
   const live = statusGroup(existing.data?.status) === "live";
 
+  // The senders the steps being written need. In edit mode only new steps count, minus what is attached.
+  const fresh = steps.filter((s) => !s.id);
+  const has = new Set((current.data ?? []).map((c) => (c.channel_type ?? "").toUpperCase()));
+  const want = requiredSenders((editing ? fresh : steps).map((s) => s.kind));
+  const need = editing
+    ? {
+        // Mailboxes are attached with the sequence; edit mode has no mailbox picker (the launch check names the gap).
+        email: false,
+        aiPhone: want.aiPhone && Boolean(current.data) && !has.has("PHONE"),
+        dialerPhone: want.dialerPhone && Boolean(current.data) && !has.has("PHONE"),
+        linkedin: want.linkedin && Boolean(current.data) && !has.has("LINKEDIN") && !has.has("LINKEDIN_NETRION"),
+      }
+    : want;
+  const phones = useG8Query((signal) => g8Get("/sequencer/channels/phone_numbers", undefined, { signal }), [], {
+    enabled: need.aiPhone || need.dialerPhone,
+  });
+  const linkedin = useG8Query((signal) => g8Get("/sequencer/channels/linkedin_accounts", undefined, { signal }), [], {
+    enabled: need.linkedin,
+  });
+  const provider = String(objectOf(linkedin.data).provider ?? "HEYREACH").toUpperCase();
+  const linkedinStepType = provider === "NETRION" ? "NETRION" : "HEYREACH";
+  const phoneOptions = bucketed<PhoneOption>(phones.data, PHONE_KEYS);
+  const linkedinOptions = bucketed<LinkedinOption>(linkedin.data, LINKEDIN_KEYS);
+
+  /** The sender channels picked for what `need` asks, in the shape POST /sequences and /channels take. */
+  const senderChannels = (): SenderChannel[] => {
+    const out: SenderChannel[] = [];
+    const mailbox = listOf<MailboxOption>(mailboxes.data).find((m) => m.id === mailboxId);
+    const type = mailbox ? mailboxChannelType(mailbox) : null;
+    if (mailbox && type) out.push({ channel_id: Number(mailbox.id), channel_value: mailbox.email ?? "", channel_type: type });
+    for (const id of new Set([need.aiPhone ? aiPhoneId : "", need.dialerPhone ? dialerPhoneId : ""].filter(Boolean))) {
+      const phone = phoneOptions.find((p) => String(p.id) === id);
+      if (phone) out.push({ channel_id: Number(phone.id), channel_value: phone.phone_number, channel_type: "PHONE" });
+    }
+    const account = need.linkedin ? linkedinOptions.find((a) => String(a.id) === linkedinId) : undefined;
+    if (account)
+      out.push({
+        channel_id: Number(account.id),
+        channel_value: provider === "NETRION" ? (account.public_identifier ?? account.display_name ?? account.account_id ?? "") : linkedinLabel(account),
+        channel_type: provider === "NETRION" ? "LINKEDIN_NETRION" : "LINKEDIN",
+      });
+    return out;
+  };
+
   const run = useG8Mutation(async (p: Pending) => {
     if (p.kind === "create") {
-      const mailbox = listOf<MailboxOption>(mailboxes.data).find((m) => m.id === mailboxId);
       const body = {
         name: name.trim(),
         user_email: ownerEmail,
         associated_list_id: listId ? Number(listId) : undefined,
         finish_on_reply: true,
-        steps: steps.map((s, i) => toApiStep(s, i + 1)),
-        channels: mailbox
-          ? [{ channel_id: Number(mailbox.id), channel_value: mailbox.email ?? "", channel_type: channelTypeFor(mailbox.provider) }]
-          : [],
+        steps: steps.map((s, i) => toApiStep(s, i + 1, linkedinStepType)),
+        channels: senderChannels(),
       };
       const res = await g8Post<{ id: string }>("/sequences", body, { idempotencyKey: keyFor("create", body) });
       setSaved(`Draft "${body.name}" created. Launch it from the sequence list.`);
@@ -157,9 +252,22 @@ export function SequenceBuilder({ sequenceId, defaultListId, ownerEmail, onSaved
     }
   });
   const append = useG8Mutation(async () => {
+    // Attach the senders the new steps need first (each one once, even across retries), then the steps.
+    const channels = senderChannels().filter((c) => !attached.current.has(`${c.channel_type}:${c.channel_id}`));
+    if (channels.length > 0) {
+      await g8Post(`/sequences/${sequenceId}/channels`, { channels });
+      channels.forEach((c) => attached.current.add(`${c.channel_type}:${c.channel_id}`));
+      void current.refetch();
+    }
     const fresh = steps.filter((s) => !s.id);
     const offset = steps.length - fresh.length;
-    const body = { steps: fresh.map((s, i) => toApiStep(s, offset + i + 1)) };
+    // New LinkedIn steps follow the sequence's own provider: an existing LinkedIn step's type, else the LinkedIn
+    // sender already attached, else the org's provider. A HEYREACH step next to a LINKEDIN_NETRION sender
+    // (or the reverse) could never launch.
+    const existingLinkedin = steps.find((s) => s.id && s.kind === "linkedin")?.step_type;
+    const sequenceLinkedin =
+      existingLinkedin ?? (has.has("LINKEDIN_NETRION") ? "NETRION" : has.has("LINKEDIN") ? "HEYREACH" : linkedinStepType);
+    const body = { steps: fresh.map((s, i) => toApiStep(s, offset + i + 1, sequenceLinkedin)) };
     await g8Post(`/sequences/${sequenceId}/steps`, body, { idempotencyKey: keyFor("append", body) });
     // The steps are saved: drop the unsaved copies at once so a second click cannot append them again,
     // then reload the real list (with ids) instead of trusting the response shape.
@@ -179,53 +287,99 @@ export function SequenceBuilder({ sequenceId, defaultListId, ownerEmail, onSaved
       return next;
     });
   const invalid = steps.some((s) => stepIssues(s).length > 0);
-  const canCreate = name.trim() && steps.length > 0 && !invalid && mailboxId;
-  const fresh = steps.filter((s) => !s.id);
+  // What is still missing before the draft can be created (shown under the button, so it is never a mystery).
+  const missing = [
+    !name.trim() && "a name",
+    !listId && "an audience list",
+    steps.length === 0 && "a step",
+    need.email && !mailboxId && "a mailbox for the email steps",
+    need.aiPhone && !aiPhoneId && "a Voice AI number for the AI call steps",
+    need.dialerPhone && !dialerPhoneId && "a dialer number for the call tasks",
+    need.linkedin && !linkedinId && "a LinkedIn account for the LinkedIn steps",
+  ].filter(Boolean) as string[];
+  const canCreate = missing.length === 0 && !invalid;
 
   if (editing && existing.error) return <ApiError error={existing.error} onRetry={() => void existing.refetch()} className={className} />;
   if (editing && existing.loading && !existing.data) return <Skeleton className={`h-48 w-full ${className ?? ""}`} />;
   const copy = pending ? describe(pending, live) : null;
+  const select = "h-9 rounded-md border border-border bg-background px-2 text-sm";
 
   return (
     <div className={`space-y-4 ${className ?? ""}`}>
       {!editing ? (
         <div className="grid gap-2 sm:grid-cols-3">
           <Input aria-label="Sequence name" placeholder="Q4 outbound" value={name} onChange={(e) => setName(e.target.value)} />
-          <select
-            aria-label="Send from"
-            className="h-9 rounded-md border border-gray-300 px-2 text-sm"
-            value={mailboxId}
-            onChange={(e) => setMailboxId(e.target.value)}
-          >
-            <option value="">Send from...</option>
-            {listOf<MailboxOption>(mailboxes.data).map((m) => (
-              <option key={m.id} value={m.id}>
-                {m.email}
-              </option>
-            ))}
+          <select aria-label="Send from" className={select} value={mailboxId} onChange={(e) => setMailboxId(e.target.value)}>
+            <option value="">{steps.length > 0 && !want.email ? "Mailbox (no email steps)" : "Send from..."}</option>
+            {listOf<MailboxOption>(mailboxes.data).map((m) => {
+              const reason = mailboxUnsupportedReason(m);
+              return (
+                <option key={m.id} value={m.id} disabled={Boolean(reason)} title={reason ?? undefined}>
+                  {m.email}
+                  {reason ? ` (${reason})` : ""}
+                </option>
+              );
+            })}
           </select>
-          <select
-            aria-label="Audience list"
-            className="h-9 rounded-md border border-gray-300 px-2 text-sm"
+          <ListSelect
+            label="Audience list"
+            emptyOption="Audience list (required)"
+            optionLabel={(l) => `${l.title}${l.contact_count != null ? ` (${l.contact_count})` : ""}`}
+            pageSize={100}
             value={listId}
-            onChange={(e) => setListId(e.target.value)}
-          >
-            <option value="">Audience list (optional)</option>
-            {listOf<ListOption>(lists.data).map((l) => (
-              <option key={l.id} value={l.id}>
-                {l.title}
-                {l.contact_count != null ? ` (${l.contact_count})` : ""}
-              </option>
-            ))}
-          </select>
+            valueLabel={defaultListId ? `List ${defaultListId}` : undefined}
+            selectClassName={select}
+            onChange={(l) => setListId(l ? String(l.id) : "")}
+          />
+          <FirstNotice className="sm:col-span-3" shown={listOf<MailboxOption>(mailboxes.data).length} limit={MAILBOX_LIMIT} noun="mailboxes" />
+        </div>
+      ) : null}
+      {need.aiPhone || need.dialerPhone || need.linkedin ? (
+        <div className="grid gap-2 sm:grid-cols-3">
+          {need.aiPhone ? (
+            <select aria-label="AI call number" className={select} value={aiPhoneId} onChange={(e) => setAiPhoneId(e.target.value)}>
+              <option value="">{phones.loading ? "Loading numbers..." : "Voice AI number for AI calls..."}</option>
+              {phoneOptions.filter((p) => phoneFits(p, "ai")).map((p) => (
+                <option key={p.id} value={String(p.id)}>
+                  {p.phone_number}
+                </option>
+              ))}
+            </select>
+          ) : null}
+          {need.dialerPhone ? (
+            <select aria-label="Dialer number" className={select} value={dialerPhoneId} onChange={(e) => setDialerPhoneId(e.target.value)}>
+              <option value="">{phones.loading ? "Loading numbers..." : "Dialer number for call tasks..."}</option>
+              {phoneOptions.filter((p) => phoneFits(p, "dialer")).map((p) => (
+                <option key={p.id} value={String(p.id)}>
+                  {p.phone_number}
+                </option>
+              ))}
+            </select>
+          ) : null}
+          {need.linkedin ? (
+            <select aria-label="LinkedIn account" className={select} value={linkedinId} onChange={(e) => setLinkedinId(e.target.value)}>
+              <option value="">{linkedin.loading ? "Loading accounts..." : "LinkedIn account to send from..."}</option>
+              {linkedinOptions.map((a) => (
+                <option key={a.id} value={String(a.id)}>
+                  {linkedinLabel(a)}
+                </option>
+              ))}
+            </select>
+          ) : null}
         </div>
       ) : null}
-      {mailboxes.error || lists.error ? (
+      {need.linkedin && linkedin.data && linkedinOptions.length === 0 ? (
+        <p className="text-sm text-muted-foreground">
+          {String(objectOf(linkedin.data).message ?? "No LinkedIn account is connected.")} Connect one in the {brand.linkLabel} app.
+        </p>
+      ) : null}
+      {mailboxes.error || phones.error || linkedin.error ? (
         <ApiError
-          error={mailboxes.error ?? lists.error}
+          error={mailboxes.error ?? phones.error ?? linkedin.error}
           onRetry={() => {
             void mailboxes.refetch();
-            void lists.refetch();
+            if (need.aiPhone || need.dialerPhone) void phones.refetch();
+            if (need.linkedin) void linkedin.refetch();
           }}
         />
       ) : null}
@@ -258,13 +412,13 @@ export function SequenceBuilder({ sequenceId, defaultListId, ownerEmail, onSaved
             </div>
           </div>
         ))}
-        {steps.length === 0 ? <p className="text-sm text-gray-500">No steps yet. Add the first touch below.</p> : null}
+        {steps.length === 0 ? <p className="text-sm text-muted-foreground">No steps yet. Add the first touch below.</p> : null}
       </div>
 
       <div className="flex flex-wrap items-center gap-2">
         {KINDS.map((k) => (
           <Button key={k} size="sm" variant="outline" onClick={() => add(k)}>
-            Add {KIND_LABEL[k].toLowerCase()}
+            Add {KIND_LABEL[k].split(" ").map((w) => (/^[A-Z]{2,}$/.test(w) ? w : w.toLowerCase())).join(" ")}
           </Button>
         ))}
       </div>
@@ -274,17 +428,27 @@ export function SequenceBuilder({ sequenceId, defaultListId, ownerEmail, onSaved
           disabled={fresh.length === 0 || fresh.some((s) => stepIssues(s).length > 0) || append.loading}
           onClick={() => void append.mutate(undefined)}
         >
-          Add {fresh.length} new step{fresh.length === 1 ? "" : "s"}
+          Add {fresh.length} new {pluralWord(fresh.length, "step")}
         </Button>
       ) : (
-        <Button disabled={!canCreate} onClick={() => setPending({ kind: "create" })}>
-          Create draft sequence
-        </Button>
+        <div className="space-y-1">
+          <Button disabled={!canCreate} onClick={() => setPending({ kind: "create" })}>
+            Create draft sequence
+          </Button>
+          {missing.length > 0 && (name.trim() || steps.length > 0) ? (
+            <p className="text-xs text-muted-foreground">Still needed: {missing.join(", ")}.</p>
+          ) : null}
+        </div>
       )}
+      {editing && (need.aiPhone || need.dialerPhone || need.linkedin) ? (
+        <p className="text-xs text-muted-foreground">
+          This sequence has no sender for the new steps yet. Pick one above, or it cannot launch.
+        </p>
+      ) : null}
       {run.error ? <ApiError error={run.error} onRetry={run.reset} /> : null}
       {append.error ? <ApiError error={append.error} onRetry={append.reset} /> : null}
       {saved ? (
-        <p role="status" className="text-sm text-green-700">
+        <p role="status" className="text-sm text-positive-foreground">
           {saved}
         </p>
       ) : null}