@drawbridge/components 0.0.78 → 0.1.1

package/dist/dashboard/form-organization-workflow.mjs

@@ -0,0 +1,1109 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import Image from "next/image";
+import Link from "./link.mjs";
+import { Fragment, useCallback, useState } from "react";
+import { request } from "@drawbridge/drawbridge-utils/fetch";
+import { useForm, useWatch, Controller } from "../shared/lib/form.mjs";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import yup, { resolver } from "../shared/lib/yup.mjs";
+import Form from "../shared/form.mjs";
+import Fieldset from "../shared/fieldset.mjs";
+import InputGroup from "../input-group.mjs";
+import Error from "../shared/error.mjs";
+import InputText from "../input-text.mjs";
+import InputUrl from "../shared/input-url.mjs";
+import InputResource from "./input-resource.mjs";
+import InputCombobox from "./input-combobox.mjs";
+import { FormNotification } from "./form-notification.mjs";
+import { InputArrayButton, InputArrayControl, InputArraySortable } from "./input-array.mjs";
+import Badge from "../shared/badge.mjs";
+import CardTask from "./card-task.mjs";
+import { LoaderDynamic } from "../shared/loader.mjs";
+import Trash from "../icons/trash.mjs";
+import Button from "../shared/button.mjs";
+const emailSteps = ["step.email.send", "step.email.digest"];
+const teamSteps = ["step.email.notify", "step.email.digest"];
+const messageSteps = [...emailSteps, "step.sms.send"];
+const defaultScore = {
+  rules: [
+    { description: "From: domain has series of non-vowel letters", score: 0.5 },
+    { description: "Informational: message was not relayed via SMTP", score: 0 },
+    { description: "Informational: message has no Received headers", score: 0 }
+  ],
+  subtotal: 0,
+  threshold: 5,
+  total: 0.5
+};
+const stepPrefills = {
+  "step.email.send": {
+    message: "Thanks for entering. We have your entry and will be in touch.",
+    score: defaultScore,
+    subject: "Thanks for entering",
+    text: "Thanks for entering. We have your entry and will be in touch."
+  },
+  // Nothing to prefill — the step writes its own copy — but the entry has to
+  // exist: an unlisted step arrives from the deep link with no settings shape
+  // and the drawer creates the workflow without it.
+  "step.email.notify": {},
+  "step.email.digest": {
+    message: "You had {{count}} new entries.",
+    score: defaultScore,
+    subject: "Your entries",
+    text: "You had {{count}} new entries."
+  }
+};
+const memberParams = {
+  filters: {
+    status: "accepted"
+  },
+  limit: 100,
+  skip: 0,
+  sort: {
+    createdAt: -1
+  }
+};
+const useOrganizationMembers = (organization) => {
+  var _a;
+  const members = useQuery({
+    queryKey: ["organization-members", organization, "options"],
+    queryFn: async () => {
+      const { result } = await request({
+        endpoint: "/organization/" + organization + "/members",
+        // limit / skip / sort are required by the route's query validation.
+        params: memberParams
+      });
+      return result;
+    },
+    enabled: Boolean(organization),
+    staleTime: Infinity
+  });
+  return {
+    items: ((_a = members.data) == null ? void 0 : _a.items) || [],
+    // isLoading, not isPending: a query disabled for want of an organization
+    // is pending forever but never loading, and must not hold the form.
+    loading: members.isLoading
+  };
+};
+const memberLabel = (member) => {
+  var _a, _b, _c;
+  return [(_a = member == null ? void 0 : member.user) == null ? void 0 : _a.firstName, (_b = member == null ? void 0 : member.user) == null ? void 0 : _b.lastName].filter(Boolean).join(" ") || (member == null ? void 0 : member.email) || ((_c = member == null ? void 0 : member.user) == null ? void 0 : _c.email) || "Member";
+};
+const useWorkflowCatalog = (organization, current) => {
+  const catalog = useQuery({
+    queryKey: ["organization-workflow-catalog", organization],
+    queryFn: async () => {
+      const { result } = await request({
+        endpoint: "/organization/" + organization + "/workflows/catalog"
+      });
+      return result;
+    },
+    enabled: Boolean(organization),
+    staleTime: Infinity
+  });
+  const catalogList = catalog.data || [];
+  const triggerGroups = catalogList.filter((item) => item.type !== "schedule" || item.trigger === current).reduce((groups, item) => {
+    const model = item.type === "schedule" ? "schedule" : item.trigger.split(".")[0];
+    if (!groups[model]) groups[model] = [];
+    groups[model].push(item);
+    return groups;
+  }, {});
+  const triggerOptions = [
+    { key: "Select a trigger", value: "" },
+    ...Object.entries(triggerGroups).sort(([a], [b]) => a.localeCompare(b)).flatMap(([model, items]) => [
+      { key: model.charAt(0).toUpperCase() + model.slice(1), header: true },
+      ...items.sort((a, b) => a.title.localeCompare(b.title)).map((item) => ({
+        image: item.image,
+        key: item.title,
+        value: item.trigger
+      }))
+    ])
+  ];
+  return { catalog, catalogList, triggerOptions };
+};
+const WorkflowTriggerField = ({ control, formState, catalogList, triggerOptions, getValues, setValue }) => /* @__PURE__ */ jsx(
+  Controller,
+  {
+    ...{
+      control,
+      name: "triggerEvent",
+      render: ({ field: { value, onChange } }) => {
+        var _a, _b;
+        return /* @__PURE__ */ jsx(
+          InputGroup,
+          {
+            ...{
+              error: (_b = (_a = formState == null ? void 0 : formState.errors) == null ? void 0 : _a.triggerEvent) == null ? void 0 : _b.message,
+              input: /* @__PURE__ */ jsx(
+                InputCombobox,
+                {
+                  ...{
+                    onChange: (val) => {
+                      onChange(val);
+                      const entry = catalogList.find((item) => item.trigger === val);
+                      if (entry) {
+                        const currentTitle = getValues("title");
+                        const catalogTitles = catalogList.map((item) => item.title);
+                        if (!currentTitle || catalogTitles.includes(currentTitle)) {
+                          setValue("title", entry.title);
+                        }
+                        ;
+                      }
+                      ;
+                    },
+                    options: triggerOptions,
+                    value: value || ""
+                  }
+                }
+              ),
+              label: "Trigger"
+            }
+          }
+        );
+      }
+    }
+  }
+);
+const WorkflowTitleField = ({ control, formState }) => /* @__PURE__ */ jsx(
+  Controller,
+  {
+    ...{
+      control,
+      name: "title",
+      render: ({ field: { value, onChange } }) => {
+        var _a, _b;
+        return /* @__PURE__ */ jsx(
+          InputGroup,
+          {
+            ...{
+              error: (_b = (_a = formState == null ? void 0 : formState.errors) == null ? void 0 : _a.title) == null ? void 0 : _b.message,
+              input: /* @__PURE__ */ jsx(
+                InputText,
+                {
+                  ...{
+                    onChange,
+                    placeholder: "Workflow name",
+                    value: value || ""
+                  }
+                }
+              ),
+              label: "Title"
+            }
+          }
+        );
+      }
+    }
+  }
+);
+const campaignFilterId = (campaign) => (campaign == null ? void 0 : campaign.id) || campaign || null;
+const WorkflowFilterField = ({
+  collection,
+  control,
+  label,
+  message,
+  model,
+  name,
+  organization,
+  resource
+}) => {
+  const queryClient = useQueryClient();
+  const id = useWatch({
+    control,
+    name
+  });
+  const selected = useQuery({
+    queryKey: ["workflow-filter", model, organization, id],
+    queryFn: async () => {
+      const { result } = await request({
+        endpoint: "/organization/" + organization + "/" + resource + "/" + id
+      }).catch(() => ({ result: null }));
+      return result;
+    },
+    enabled: Boolean(id),
+    staleTime: Infinity
+  });
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      ...{
+        control,
+        name,
+        render: ({ field: { onChange } }) => /* @__PURE__ */ jsx(
+          InputGroup,
+          {
+            ...{
+              input: /* @__PURE__ */ jsx(
+                InputResource,
+                {
+                  ...{
+                    endpoint: "/organization/" + organization + "/" + collection,
+                    model,
+                    onChange: (doc) => {
+                      if (doc == null ? void 0 : doc.id) queryClient.setQueryData(["workflow-filter", model, organization, doc.id], doc);
+                      onChange((doc == null ? void 0 : doc.id) || null);
+                    },
+                    value: selected.data || null
+                  }
+                }
+              ),
+              label,
+              message
+            }
+          }
+        )
+      }
+    }
+  );
+};
+const stepRow = (step = {}, members = []) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+  return {
+    connectionId: step.connectionId || "",
+    discount: ((_a = step.settings) == null ? void 0 : _a.discount) || null,
+    // Stored as ids, picked as documents. Hydrating through the fetched list
+    // also drops ids whose member no longer exists — a removed teammate
+    // leaves their id on the step, and an id with nothing behind it would
+    // render as an unlabelled chip nobody could identify.
+    members: (((_b = step.settings) == null ? void 0 : _b.members) || []).map((id) => members.find((member) => (member == null ? void 0 : member.id) === id)).filter(Boolean),
+    message: ((_c = step.settings) == null ? void 0 : _c.message) || "",
+    // THE LAST SPAM CHECK, RE-TAGGED WITH THE COPY IT MEASURED.
+    //
+    // The api stores a score without that copy and tests the tag again on the
+    // way back in, so seeding a bare score would fail the test and clear the
+    // stored result on every save. Putting the pair back on is the other half of
+    // a round trip the api already expects — and it is what lets the step panel
+    // open showing the last result instead of spending a request on a free
+    // service to be told what is already in the fields.
+    score: ((_d = step.settings) == null ? void 0 : _d.score) ? {
+      ...step.settings.score,
+      message: ((_e = step.settings) == null ? void 0 : _e.message) || "",
+      subject: ((_f = step.settings) == null ? void 0 : _f.subject) || ""
+    } : null,
+    slug: step.slug || "",
+    subject: ((_g = step.settings) == null ? void 0 : _g.subject) || "",
+    // The editor writes this only when the merchant touches it, so without a
+    // seed an untouched save dropped the plain rendering of the message.
+    text: ((_h = step.settings) == null ? void 0 : _h.text) || "",
+    type: step.type || "",
+    url: ((_i = step.settings) == null ? void 0 : _i.url) || ""
+  };
+};
+const FormOrganizationWorkflow = ({
+  disabled,
+  onClose,
+  onError,
+  onSuccess,
+  values
+}) => {
+  const { catalog, catalogList, triggerOptions } = useWorkflowCatalog(values == null ? void 0 : values.organization, values == null ? void 0 : values.triggerEvent);
+  const { control, formState, getValues, handleSubmit, setValue } = useForm({
+    defaultValues: {
+      title: "",
+      triggerEvent: (values == null ? void 0 : values.triggerEvent) || ""
+    },
+    resolver: resolver(
+      yup.object({
+        title: yup.string().required().max(100).label("Title"),
+        triggerEvent: yup.string().label("Trigger").required("A trigger is required")
+      })
+    )
+  });
+  const watchedTrigger = useWatch({
+    control,
+    name: "triggerEvent"
+  });
+  const onSubmit = async ({ title, triggerEvent }) => {
+    const prefill = stepPrefills[values == null ? void 0 : values.step];
+    const prefilledSteps = prefill ? [{
+      settings: { ...prefill },
+      type: values.step
+    }] : [];
+    try {
+      const response = await request({
+        body: {
+          steps: prefilledSteps,
+          title,
+          trigger: {
+            event: triggerEvent,
+            filters: {
+              // Both blank, meaning every campaign and every segment. The
+              // create drawer asks for a trigger and a title only; narrowing
+              // is done on the workflow page afterwards.
+              campaign: null,
+              segment: null
+            }
+          }
+        },
+        endpoint: "/organization/" + (values == null ? void 0 : values.organization) + "/workflow",
+        method: "POST"
+      });
+      onSuccess(response);
+      onClose == null ? void 0 : onClose();
+    } catch (error) {
+      onError(error);
+    }
+  };
+  if (catalog.isLoading) {
+    return /* @__PURE__ */ jsx(LoaderDynamic, {});
+  }
+  return /* @__PURE__ */ jsx(
+    Form,
+    {
+      ...{
+        className: "relative w-full",
+        onSubmit: handleSubmit(onSubmit)
+      },
+      children: /* @__PURE__ */ jsxs(
+        Fieldset,
+        {
+          ...{
+            disabled: disabled || (formState == null ? void 0 : formState.isSubmitting)
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              WorkflowTriggerField,
+              {
+                ...{
+                  control,
+                  formState,
+                  catalogList,
+                  triggerOptions,
+                  getValues,
+                  setValue
+                }
+              }
+            ),
+            watchedTrigger && /* @__PURE__ */ jsx(
+              WorkflowTitleField,
+              {
+                ...{
+                  control,
+                  formState
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                ...{
+                  loading: formState == null ? void 0 : formState.isSubmitting,
+                  type: "submit"
+                },
+                children: "Create workflow"
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+const FormOrganizationWorkflowEdit = ({
+  disabled,
+  onClose,
+  onError,
+  onSuccess,
+  values
+}) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
+  const { catalog, catalogList, triggerOptions } = useWorkflowCatalog(values == null ? void 0 : values.organization, (_a = values == null ? void 0 : values.trigger) == null ? void 0 : _a.event);
+  const { items: memberItems, loading: membersLoading } = useOrganizationMembers(values == null ? void 0 : values.organization);
+  const queryClient = useQueryClient();
+  const ownerEmail = queryClient.getQueryData(["organization", values == null ? void 0 : values.organization]).owner.email;
+  const commerceConnectionId = ((_b = catalogList.flatMap((item) => item.steps || []).find(
+    (s) => s.value === "step.commerce.customer.insert" || s.value === "step.commerce.code.issue"
+  )) == null ? void 0 : _b.connectionId) || null;
+  const commerceConnection = useQuery({
+    queryKey: ["commerce-connection", values == null ? void 0 : values.organization, commerceConnectionId],
+    queryFn: async () => {
+      const { result } = await request({
+        endpoint: "/organization/" + (values == null ? void 0 : values.organization) + "/connection/" + commerceConnectionId
+      });
+      return result;
+    },
+    enabled: Boolean((values == null ? void 0 : values.organization) && commerceConnectionId),
+    staleTime: Infinity
+  });
+  const commerceDomain = ((_d = (_c = commerceConnection.data) == null ? void 0 : _c.source) == null ? void 0 : _d.domain) || ((_f = (_e = commerceConnection.data) == null ? void 0 : _e.settings) == null ? void 0 : _f.domain) || null;
+  const defaultSteps = ((values == null ? void 0 : values.steps) || []).map((s) => stepRow(s, memberItems));
+  const [checking, setChecking] = useState({});
+  const checkingAny = Object.values(checking).some(Boolean);
+  const onChecking = useCallback(
+    (id, value) => setChecking(
+      (current) => Boolean(current[id]) === value ? current : { ...current, [id]: value }
+    ),
+    []
+  );
+  const { control, formState, getValues, handleSubmit, setValue } = useForm({
+    values: {
+      steps: defaultSteps,
+      filterCampaign: campaignFilterId((_h = (_g = values == null ? void 0 : values.trigger) == null ? void 0 : _g.filters) == null ? void 0 : _h.campaign),
+      // Stored and returned as a plain id — extend.workflow() $lookup-hydrates
+      // only the campaign — but read through the same reducer, so the field
+      // stays right if the segment is ever hydrated too.
+      filterSegment: campaignFilterId((_j = (_i = values == null ? void 0 : values.trigger) == null ? void 0 : _i.filters) == null ? void 0 : _j.segment),
+      title: (values == null ? void 0 : values.title) || "",
+      triggerEvent: ((_k = values == null ? void 0 : values.trigger) == null ? void 0 : _k.event) || ""
+    },
+    resolver: resolver(
+      yup.object({
+        title: yup.string().required().max(100).label("Title"),
+        triggerEvent: yup.string().label("Trigger").required("A trigger is required"),
+        steps: yup.array().of(
+          yup.object({
+            type: yup.string().label("Step").required("A step is required"),
+            url: yup.string().when("type", ([type], schema) => {
+              if (type === "step.webhook.send") {
+                return schema.url().required("URL is required").label("URL");
+              }
+              return schema;
+            }),
+            subject: yup.string().when("type", ([type], schema) => {
+              if (messageSteps.includes(type)) {
+                return schema.required("Subject is required").label("Subject");
+              }
+              return schema;
+            }),
+            message: yup.string().when("type", ([type], schema) => {
+              if (messageSteps.includes(type)) {
+                return schema.required("Message is required").label("Message");
+              }
+              return schema;
+            }),
+            // No minimum. The organization owner is always a recipient, so a
+            // step with no members chosen is complete — requiring one here
+            // made the step unsaveable for a solo merchant, who has no
+            // member documents to choose and cannot reach the members
+            // endpoint at all.
+            members: yup.array().label("Recipients"),
+            discount: yup.object().nullable().when("type", ([type], schema) => {
+              if (type === "step.commerce.code.issue") {
+                return schema.required("Discount is required").label("Discount");
+              }
+              return schema;
+            })
+          })
+        )
+      })
+    )
+  });
+  const watchedTrigger = useWatch({
+    control,
+    name: "triggerEvent"
+  });
+  const watchedSteps = useWatch({
+    control,
+    name: "steps"
+  });
+  const issueIndex = ((_l = values == null ? void 0 : values.issue) == null ? void 0 : _l.step) ? (watchedSteps || []).findIndex((step) => (step == null ? void 0 : step.type) === values.issue.step) : -1;
+  const selectedTriggerEntry = catalogList.find((item) => item.trigger === watchedTrigger) || null;
+  const getAvailableVariables = (index) => {
+    return watchedSteps.slice(0, index).flatMap((watchedStep) => {
+      const stepDef = ((selectedTriggerEntry == null ? void 0 : selectedTriggerEntry.steps) || []).find((s) => s.value === watchedStep.type);
+      return (stepDef == null ? void 0 : stepDef.returns) || [];
+    });
+  };
+  const getStepOptions = (index) => {
+    const usedTypes = watchedSteps.map((s, i) => i !== index ? s.type : null).filter(Boolean);
+    return [
+      { key: "Select a step", value: "" },
+      ...((selectedTriggerEntry == null ? void 0 : selectedTriggerEntry.steps) || []).filter((step) => !usedTypes.includes(step.value)).filter((step) => {
+        var _a2;
+        return !step.ownerOnly || step.value === ((_a2 = watchedSteps[index]) == null ? void 0 : _a2.type);
+      }).sort((a, b) => String(a.key).localeCompare(String(b.key))).map((step) => ({
+        ...step,
+        // Option values must be unique per catalog entry, not per step
+        // type. Two connections offering the same step type collide,
+        // because the select resolves its displayed option by first value
+        // match — so a disconnected step rendered as whichever entry came
+        // first. Suffix the connectionId when active, the connection slug
+        // when not.
+        //
+        // The collision that produced this was mailchimp and sendgrid both
+        // offering `step.email.send`. Neither does now — email steps are
+        // connectionless and sendgrid is gone — but the rule is about any
+        // two entries sharing a type, so it stays.
+        value: step.connectionId ? step.value + "::" + step.connectionId : step.slug ? step.value + "::" + step.slug : step.value,
+        ...step.disabled ? {
+          badge: {
+            text: "Enable connection"
+          },
+          disabled: false,
+          element: Link,
+          key: step == null ? void 0 : step.key,
+          props: {
+            href: "/organizations/" + (values == null ? void 0 : values.organization) + "/connections/" + step.slug,
+            onClick: onClose
+          }
+        } : {}
+      }))
+    ];
+  };
+  const lockedStep = (index) => ((selectedTriggerEntry == null ? void 0 : selectedTriggerEntry.steps) || []).some((s) => {
+    var _a2;
+    return s.ownerOnly && s.value === ((_a2 = watchedSteps[index]) == null ? void 0 : _a2.type);
+  });
+  const getStepValue = (field, index) => {
+    if (!field.type) return "";
+    const options = getStepOptions(index);
+    const stored = field.connectionId ? field.type + "::" + field.connectionId : field.type;
+    if (options.some((o) => o.value === stored)) return stored;
+    const sameType = options.filter((o) => o.value.split("::")[0] === field.type);
+    const match = field.slug && sameType.find((o) => o.slug === field.slug) || sameType[0];
+    return match ? match.value : "";
+  };
+  const getStepConnection = (field) => {
+    const steps = (selectedTriggerEntry == null ? void 0 : selectedTriggerEntry.steps) || [];
+    const def = field.connectionId && steps.find((s) => s.connectionId === field.connectionId) || field.slug && steps.find((s) => s.slug === field.slug && s.value === field.type) || steps.find((s) => s.value === field.type);
+    if (!def) return null;
+    const connected = Boolean(def.connectionId);
+    if (!connected && !def.disabled) return null;
+    return {
+      connected,
+      image: def.image,
+      name: def.key,
+      slug: def.slug
+    };
+  };
+  const renderStepBadge = (field) => {
+    const conn = getStepConnection(field);
+    if (!conn) return null;
+    return /* @__PURE__ */ jsx(
+      Badge,
+      {
+        ...{
+          size: "small",
+          type: conn.connected ? "success" : "error"
+        },
+        children: conn.connected ? "Connected" : "Not connected"
+      }
+    );
+  };
+  const onSubmit = async ({
+    steps,
+    filterCampaign,
+    filterSegment,
+    title,
+    triggerEvent
+  }) => {
+    try {
+      const body = {
+        steps: steps.map(({ connectionId, discount, members, message, score, slug, subject, text, type, url }, index) => {
+          const settings = {};
+          if (type === "step.webhook.send") settings.url = url;
+          if (messageSteps.includes(type)) {
+            settings.subject = subject;
+            settings.message = message;
+          }
+          if (emailSteps.includes(type)) {
+            if (score && score.subject === subject && score.message === message) settings.score = score;
+            else if (score) setValue("steps." + index + ".score", null);
+            if (text) settings.text = text;
+          }
+          if (teamSteps.includes(type)) settings.members = (members || []).map((member) => member == null ? void 0 : member.id).filter(Boolean);
+          if (type === "step.commerce.code.issue") settings.discount = discount;
+          const catalogSteps = (selectedTriggerEntry == null ? void 0 : selectedTriggerEntry.steps) || [];
+          const catalogStep = connectionId && catalogSteps.find((s) => s.connectionId === connectionId) || slug && catalogSteps.find((s) => s.slug === slug && s.value === type) || catalogSteps.find((s) => s.value === type);
+          const resolvedConnectionId = (catalogStep == null ? void 0 : catalogStep.connectionId) || connectionId || null;
+          const resolvedSlug = (catalogStep == null ? void 0 : catalogStep.slug) || slug || null;
+          return {
+            ...resolvedConnectionId && { connectionId: resolvedConnectionId },
+            ...resolvedSlug && { slug: resolvedSlug },
+            settings,
+            type
+          };
+        }),
+        title,
+        trigger: {
+          event: triggerEvent,
+          filters: {
+            campaign: filterCampaign || null,
+            segment: filterSegment || null
+          }
+        }
+      };
+      const response = await request({
+        body,
+        endpoint: "/organization/" + (values == null ? void 0 : values.organization) + "/workflow/" + values.id,
+        method: "PUT"
+      });
+      onSuccess(response);
+    } catch (error) {
+      onError(error);
+    }
+  };
+  if (catalog.isLoading || membersLoading || commerceConnection.isLoading) {
+    return /* @__PURE__ */ jsx(LoaderDynamic, {});
+  }
+  return /* @__PURE__ */ jsx(
+    Form,
+    {
+      ...{
+        className: "relative w-full",
+        onSubmit: handleSubmit(onSubmit)
+      },
+      children: /* @__PURE__ */ jsxs(
+        Fieldset,
+        {
+          ...{
+            disabled: disabled || (formState == null ? void 0 : formState.isSubmitting)
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              CardTask,
+              {
+                ...{
+                  message: "Workflows run sequences that increase action usage.",
+                  title: "Workflows count towards actions",
+                  type: "warning"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              WorkflowTriggerField,
+              {
+                ...{
+                  control,
+                  formState,
+                  catalogList,
+                  triggerOptions,
+                  getValues,
+                  setValue
+                }
+              }
+            ),
+            watchedTrigger && /* @__PURE__ */ jsx(
+              WorkflowTitleField,
+              {
+                ...{
+                  control,
+                  formState
+                }
+              }
+            ),
+            watchedTrigger === "lead.insert" && /* @__PURE__ */ jsx(
+              WorkflowFilterField,
+              {
+                ...{
+                  collection: "campaigns",
+                  control,
+                  label: "Campaign",
+                  message: "Only trigger for leads from a specific campaign. Leaving blank will trigger for all campaigns.",
+                  model: "campaign",
+                  name: "filterCampaign",
+                  organization: values == null ? void 0 : values.organization,
+                  resource: "campaign"
+                }
+              }
+            ),
+            watchedTrigger === "segment.contact.add" && /* @__PURE__ */ jsx(
+              WorkflowFilterField,
+              {
+                ...{
+                  collection: "segments",
+                  control,
+                  label: "Segment",
+                  message: "Only trigger when a contact joins a specific segment. Leaving blank will trigger for all segments.",
+                  model: "segment",
+                  name: "filterSegment",
+                  organization: values == null ? void 0 : values.organization,
+                  resource: "segment"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              InputGroup,
+              {
+                ...{
+                  error: (_n = (_m = formState == null ? void 0 : formState.errors) == null ? void 0 : _m.steps) == null ? void 0 : _n.message,
+                  input: /* @__PURE__ */ jsx(
+                    InputArraySortable,
+                    {
+                      ...{
+                        control,
+                        empty: null,
+                        name: "steps",
+                        renderButton: (append) => /* @__PURE__ */ jsx(
+                          InputArrayButton,
+                          {
+                            ...{
+                              disabled: !watchedTrigger,
+                              onClick: () => append(stepRow()),
+                              text: "Add step"
+                            }
+                          }
+                        )
+                      },
+                      children: ({ field, handle, index, remove }) => {
+                        const step = (watchedSteps == null ? void 0 : watchedSteps[index]) || field;
+                        return /* @__PURE__ */ jsxs(
+                          "div",
+                          {
+                            ...{
+                              className: "w-full bg-white border border-gray rounded p-4 space-y-3"
+                            },
+                            children: [
+                              /* @__PURE__ */ jsxs(
+                                "div",
+                                {
+                                  ...{
+                                    className: "flex items-center justify-between"
+                                  },
+                                  children: [
+                                    /* @__PURE__ */ jsxs(
+                                      "div",
+                                      {
+                                        ...{
+                                          className: "flex items-center space-x-2"
+                                        },
+                                        children: [
+                                          handle,
+                                          /* @__PURE__ */ jsxs(
+                                            "span",
+                                            {
+                                              ...{
+                                                className: "text-sm font-medium"
+                                              },
+                                              children: [
+                                                "Step ",
+                                                index + 1
+                                              ]
+                                            }
+                                          )
+                                        ]
+                                      }
+                                    ),
+                                    /* @__PURE__ */ jsxs(
+                                      "div",
+                                      {
+                                        ...{
+                                          className: "flex items-center space-x-2"
+                                        },
+                                        children: [
+                                          renderStepBadge(step),
+                                          !lockedStep(index) && /* @__PURE__ */ jsx(
+                                            InputArrayControl,
+                                            {
+                                              ...{
+                                                onClick: () => remove(index),
+                                                icon: Trash
+                                              }
+                                            },
+                                            "remove"
+                                          )
+                                        ]
+                                      }
+                                    )
+                                  ]
+                                }
+                              ),
+                              issueIndex === index && /* @__PURE__ */ jsx(
+                                Error,
+                                {
+                                  ...{
+                                    error: values.issue.message
+                                  }
+                                }
+                              ),
+                              /* @__PURE__ */ jsx(
+                                Controller,
+                                {
+                                  ...{
+                                    control,
+                                    name: `steps.${index}.type`,
+                                    render: ({ field: { onChange } }) => {
+                                      var _a2, _b2, _c2, _d2;
+                                      return /* @__PURE__ */ jsx(
+                                        InputGroup,
+                                        {
+                                          ...{
+                                            error: (_d2 = (_c2 = (_b2 = (_a2 = formState == null ? void 0 : formState.errors) == null ? void 0 : _a2.steps) == null ? void 0 : _b2[index]) == null ? void 0 : _c2.type) == null ? void 0 : _d2.message,
+                                            input: /* @__PURE__ */ jsx(
+                                              InputCombobox,
+                                              {
+                                                ...{
+                                                  onChange: (val) => {
+                                                    const [type] = val.split("::");
+                                                    const option = getStepOptions(index).find((o) => o.value === val);
+                                                    onChange(type);
+                                                    setValue(`steps.${index}.connectionId`, (option == null ? void 0 : option.connectionId) || "");
+                                                    setValue(`steps.${index}.slug`, (option == null ? void 0 : option.slug) || "");
+                                                  },
+                                                  disabled: lockedStep(index),
+                                                  options: getStepOptions(index),
+                                                  // Resolved from the WHOLE ROW, not from this path: the
+                                                  // option value carries a connection the type alone cannot
+                                                  // name.
+                                                  value: getStepValue(step, index)
+                                                }
+                                              }
+                                            ),
+                                            label: "Step"
+                                          }
+                                        }
+                                      );
+                                    }
+                                  }
+                                }
+                              ),
+                              step.type === "step.webhook.send" && /* @__PURE__ */ jsx(
+                                Controller,
+                                {
+                                  ...{
+                                    control,
+                                    name: `steps.${index}.url`,
+                                    render: ({ field: { value, onChange } }) => {
+                                      var _a2, _b2, _c2, _d2;
+                                      return /* @__PURE__ */ jsx(
+                                        InputGroup,
+                                        {
+                                          ...{
+                                            error: (_d2 = (_c2 = (_b2 = (_a2 = formState == null ? void 0 : formState.errors) == null ? void 0 : _a2.steps) == null ? void 0 : _b2[index]) == null ? void 0 : _c2.url) == null ? void 0 : _d2.message,
+                                            input: /* @__PURE__ */ jsx(
+                                              InputUrl,
+                                              {
+                                                ...{
+                                                  onChange,
+                                                  value: value || ""
+                                                }
+                                              }
+                                            ),
+                                            label: "Webhook URL"
+                                          }
+                                        }
+                                      );
+                                    }
+                                  }
+                                }
+                              ),
+                              teamSteps.includes(step.type) && lockedStep(index) && /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500", children: "Recipients are chosen by the organization owner." }),
+                              teamSteps.includes(step.type) && !lockedStep(index) && /* @__PURE__ */ jsx(
+                                Controller,
+                                {
+                                  ...{
+                                    control,
+                                    name: `steps.${index}.members`,
+                                    render: ({ field: { value, onChange } }) => {
+                                      var _a2, _b2, _c2, _d2;
+                                      return /* @__PURE__ */ jsx(
+                                        InputGroup,
+                                        {
+                                          ...{
+                                            error: (_d2 = (_c2 = (_b2 = (_a2 = formState == null ? void 0 : formState.errors) == null ? void 0 : _a2.steps) == null ? void 0 : _b2[index]) == null ? void 0 : _c2.members) == null ? void 0 : _d2.message,
+                                            input: /* @__PURE__ */ jsx(
+                                              InputResource,
+                                              {
+                                                ...{
+                                                  empty: "No members to add",
+                                                  endpoint: "/organization/" + (values == null ? void 0 : values.organization) + "/members",
+                                                  // The owner is a chip like the others, only it cannot be
+                                                  // removed: they are always a recipient and it is resolved
+                                                  // in sync. Shaped like a member so `render` labels it the
+                                                  // same way.
+                                                  fixed: [{ email: ownerEmail }],
+                                                  model: "member",
+                                                  multiple: true,
+                                                  onChange,
+                                                  params: memberParams,
+                                                  render: memberLabel,
+                                                  // The row shows the name ( memberLabel ), so the search has
+                                                  // to hit the name too. The members endpoint joins `user`
+                                                  // before its search stage, so the nested keys resolve.
+                                                  // Email stays for invitees who have not registered yet.
+                                                  // ponytail: a full "First Last" query matches neither key;
+                                                  // a $concat'd name on the API side if that comes up.
+                                                  searchKeys: ["email", "user.firstName", "user.lastName"],
+                                                  value: value || []
+                                                }
+                                              }
+                                            ),
+                                            label: "Recipients"
+                                          }
+                                        }
+                                      );
+                                    }
+                                  }
+                                }
+                              ),
+                              emailSteps.includes(step.type) && /* @__PURE__ */ jsx(
+                                FormNotification,
+                                {
+                                  ...{
+                                    control,
+                                    // As the Fieldset above: the Message editor is a
+                                    // contenteditable, which a disabled fieldset never reaches.
+                                    disabled: disabled || (formState == null ? void 0 : formState.isSubmitting),
+                                    formState,
+                                    onChecking,
+                                    setValue,
+                                    values: {
+                                      id: field.id,
+                                      name: `steps.${index}`,
+                                      organization: values == null ? void 0 : values.organization,
+                                      variables: getAvailableVariables(index)
+                                    }
+                                  }
+                                }
+                              ),
+                              step.type === "step.sms.send" && /* @__PURE__ */ jsx(
+                                Controller,
+                                {
+                                  ...{
+                                    control,
+                                    name: `steps.${index}.subject`,
+                                    render: ({ field: { value, onChange } }) => {
+                                      var _a2, _b2, _c2, _d2;
+                                      return /* @__PURE__ */ jsx(
+                                        InputGroup,
+                                        {
+                                          ...{
+                                            error: (_d2 = (_c2 = (_b2 = (_a2 = formState == null ? void 0 : formState.errors) == null ? void 0 : _a2.steps) == null ? void 0 : _b2[index]) == null ? void 0 : _c2.subject) == null ? void 0 : _d2.message,
+                                            input: /* @__PURE__ */ jsx(
+                                              InputText,
+                                              {
+                                                ...{
+                                                  onChange,
+                                                  value: value || ""
+                                                }
+                                              }
+                                            ),
+                                            label: "Subject"
+                                          }
+                                        }
+                                      );
+                                    }
+                                  }
+                                }
+                              ),
+                              step.type === "step.sms.send" && /* @__PURE__ */ jsx(
+                                Controller,
+                                {
+                                  ...{
+                                    control,
+                                    name: `steps.${index}.message`,
+                                    render: ({ field: { value, onChange } }) => {
+                                      var _a2, _b2, _c2, _d2;
+                                      return /* @__PURE__ */ jsx(
+                                        InputGroup,
+                                        {
+                                          ...{
+                                            error: (_d2 = (_c2 = (_b2 = (_a2 = formState == null ? void 0 : formState.errors) == null ? void 0 : _a2.steps) == null ? void 0 : _b2[index]) == null ? void 0 : _c2.message) == null ? void 0 : _d2.message,
+                                            input: /* @__PURE__ */ jsx(
+                                              InputText,
+                                              {
+                                                ...{
+                                                  onChange,
+                                                  value: value || ""
+                                                }
+                                              }
+                                            ),
+                                            label: "Message"
+                                          }
+                                        }
+                                      );
+                                    }
+                                  }
+                                }
+                              ),
+                              step.type === "step.commerce.code.issue" && /* @__PURE__ */ jsx(
+                                Controller,
+                                {
+                                  ...{
+                                    control,
+                                    name: `steps.${index}.discount`,
+                                    render: ({ field: { value, onChange } }) => {
+                                      var _a2, _b2, _c2, _d2;
+                                      return /* @__PURE__ */ jsx(
+                                        InputGroup,
+                                        {
+                                          ...{
+                                            error: (_d2 = (_c2 = (_b2 = (_a2 = formState == null ? void 0 : formState.errors) == null ? void 0 : _a2.steps) == null ? void 0 : _b2[index]) == null ? void 0 : _c2.discount) == null ? void 0 : _d2.message,
+                                            input: /* @__PURE__ */ jsx(
+                                              InputResource,
+                                              {
+                                                ...{
+                                                  endpoint: "/organization/" + (values == null ? void 0 : values.organization) + "/connection/" + commerceConnectionId + "/hook/browse.promotions",
+                                                  model: "discount",
+                                                  onChange,
+                                                  // A DISCOUNT THE STORE CANNOT BACK IS SHOWN AND EXPLAINED, never
+                                                  // filtered out. The merchant can see it in Shopify admin, so a row
+                                                  // missing here with no reason reads as our bug rather than their
+                                                  // setting — and the reason names the fix.
+                                                  render: (item) => /* @__PURE__ */ jsxs("div", { children: [
+                                                    /* @__PURE__ */ jsx("span", { className: (item == null ? void 0 : item.blocked) ? "text-gray" : void 0, children: item == null ? void 0 : item.title }),
+                                                    ((item == null ? void 0 : item.blocked) || (item == null ? void 0 : item.warning)) && /* @__PURE__ */ jsx("span", { className: "block text-sm text-gray", children: item.blocked || item.warning })
+                                                  ] }),
+                                                  renderButton: ({ button, item }) => (
+                                                    // The list's small inline Add, unless the list says otherwise.
+                                                    /* @__PURE__ */ jsx(
+                                                      Button,
+                                                      {
+                                                        ...{
+                                                          inline: true,
+                                                          size: "small",
+                                                          ...button.props,
+                                                          disabled: Boolean(item == null ? void 0 : item.blocked),
+                                                          title: (item == null ? void 0 : item.blocked) || void 0
+                                                        },
+                                                        children: button.text
+                                                      }
+                                                    )
+                                                  ),
+                                                  value: value || null
+                                                }
+                                              }
+                                            ),
+                                            label: "Discount",
+                                            // "Issue" means MINT, not send — this step creates the code and saves
+                                            // it to the lead, and nothing reaches them until a later email step
+                                            // names the variable. Said here because the step picker says nothing:
+                                            // QA read "Issue a discount code", built the one-step workflow that
+                                            // describes, and reported the codes as never arriving.
+                                            message: /* @__PURE__ */ jsxs(Fragment, { children: [
+                                              "Creates the code and saves it to the lead. To send it, add an email step after this one with ",
+                                              "{{shopifyDiscountCode}}",
+                                              " in the message.",
+                                              commerceDomain ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                                                " ",
+                                                /* @__PURE__ */ jsx("a", { href: "https://" + commerceDomain + "/admin/discounts", rel: "noopener noreferrer", target: "_blank", children: "Manage discounts" })
+                                              ] }) : null
+                                            ] })
+                                          }
+                                        }
+                                      );
+                                    }
+                                  }
+                                }
+                              )
+                            ]
+                          }
+                        );
+                      }
+                    }
+                  ),
+                  label: "Sequence"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                ...{
+                  disabled: checkingAny,
+                  loading: (formState == null ? void 0 : formState.isSubmitting) || checkingAny,
+                  type: "submit"
+                },
+                children: "Save"
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  FormOrganizationWorkflow,
+  FormOrganizationWorkflowEdit,
+  campaignFilterId,
+  stepRow
+};