strapi-plugin-hubspot 0.4.2 → 0.6.0

package/dist/_chunks/Forms-CW1KFO9U.mjs

@@ -0,0 +1,989 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { u as useIntl, o as objectLabel } from "./objectLabels-D9UEuOGr.mjs";
+import { u as useParams, a as useSearchParams, L as Link, b as useNavigate, R as Routes, c as Route } from "./index-C1UJXE_o.mjs";
+import { Typography, Flex, Box, SingleSelect, SingleSelectOption, TextInput, IconButton, Button, Field, Checkbox, Divider, Combobox, ComboboxOption, Loader, Badge, Textarea, Table, Thead, Tr, Th, Tbody, Td } from "@strapi/design-system";
+import { Trash, Plus, ArrowClockwise, ArrowLeft, ArrowUp, ArrowDown } from "@strapi/icons";
+import { useFetchClient } from "@strapi/strapi/admin";
+import { g as getTranslation, P as PLUGIN_ID } from "./index-DkGOTp8p.mjs";
+import { u as useHubspotSchema } from "./useHubspotSchema-DQkQcA_V.mjs";
+const OPERATORS = ["eq", "neq", "contains", "empty", "notEmpty", "gt", "lt"];
+const NEEDS_VALUE = /* @__PURE__ */ new Set(["eq", "neq", "contains", "gt", "lt"]);
+const ConditionEditor = ({ condition, candidates, onChange }) => {
+  const { formatMessage } = useIntl();
+  const t = (id, defaultMessage) => formatMessage({ id: getTranslation(id), defaultMessage });
+  const opLabel = {
+    eq: t("condition.op.eq", "is"),
+    neq: t("condition.op.neq", "is not"),
+    contains: t("condition.op.contains", "contains"),
+    empty: t("condition.op.empty", "is empty"),
+    notEmpty: t("condition.op.notEmpty", "is filled"),
+    gt: t("condition.op.gt", "is greater than"),
+    lt: t("condition.op.lt", "is less than")
+  };
+  const rules = condition?.rules ?? [];
+  const logic = condition?.logic ?? "and";
+  const commit = (nextRules, nextLogic = logic) => onChange(nextRules.length ? { logic: nextLogic, rules: nextRules } : null);
+  const updateRule = (index, patch) => commit(rules.map((rule, i) => i === index ? { ...rule, ...patch } : rule));
+  const addRule = () => {
+    const first = candidates[0];
+    if (!first) return;
+    commit([...rules, { field: first.id, operator: "eq", value: "" }]);
+  };
+  if (!candidates.length) {
+    return /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: t("condition.no-candidates", "Conditions can only read fields placed earlier in the form.") });
+  }
+  return /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 2, children: [
+    rules.map((rule, index) => {
+      const target = candidates.find((f) => f.id === rule.field);
+      const targetOptions = target?.options?.filter((o) => o.value) ?? [];
+      return /* @__PURE__ */ jsx(Box, { background: "neutral100", hasRadius: true, padding: 2, children: /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", wrap: "wrap", children: [
+        index > 0 && /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", children: logic === "and" ? t("condition.and", "AND") : t("condition.or", "OR") }),
+        /* @__PURE__ */ jsx(Box, { flex: "1", minWidth: "120px", children: /* @__PURE__ */ jsx(
+          SingleSelect,
+          {
+            "aria-label": t("condition.field", "Field"),
+            value: rule.field,
+            onChange: (v) => updateRule(index, { field: String(v), value: "" }),
+            children: candidates.map((f) => /* @__PURE__ */ jsx(SingleSelectOption, { value: f.id, children: f.label || f.name }, f.id))
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Box, { flex: "1", minWidth: "110px", children: /* @__PURE__ */ jsx(
+          SingleSelect,
+          {
+            "aria-label": t("condition.operator", "Operator"),
+            value: rule.operator,
+            onChange: (v) => updateRule(index, { operator: v }),
+            children: OPERATORS.map((op) => /* @__PURE__ */ jsx(SingleSelectOption, { value: op, children: opLabel[op] }, op))
+          }
+        ) }),
+        NEEDS_VALUE.has(rule.operator) && /* @__PURE__ */ jsx(Box, { flex: "1", minWidth: "110px", children: targetOptions.length ? /* @__PURE__ */ jsx(
+          SingleSelect,
+          {
+            "aria-label": t("condition.value", "Value"),
+            value: rule.value ?? "",
+            onChange: (v) => updateRule(index, { value: String(v) }),
+            children: targetOptions.map((o) => /* @__PURE__ */ jsx(SingleSelectOption, { value: o.value, children: o.label || o.value }, o.value))
+          }
+        ) : /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            "aria-label": t("condition.value", "Value"),
+            value: rule.value ?? "",
+            onChange: (e) => updateRule(index, { value: e.target.value })
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            label: t("condition.remove-rule", "Remove this rule"),
+            onClick: () => commit(rules.filter((_, i) => i !== index)),
+            children: /* @__PURE__ */ jsx(Trash, {})
+          }
+        )
+      ] }) }, index);
+    }),
+    /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
+      /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "S", startIcon: /* @__PURE__ */ jsx(Plus, {}), onClick: addRule, children: t("condition.add-rule", "Add a rule") }),
+      rules.length > 1 && /* @__PURE__ */ jsxs(
+        SingleSelect,
+        {
+          "aria-label": t("condition.logic", "Logic"),
+          value: logic,
+          onChange: (v) => commit(rules, v),
+          children: [
+            /* @__PURE__ */ jsx(SingleSelectOption, { value: "and", children: t("condition.logic-and", "All rules (AND)") }),
+            /* @__PURE__ */ jsx(SingleSelectOption, { value: "or", children: t("condition.logic-or", "At least one (OR)") })
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+const FIELD_TYPES = [
+  "text",
+  "email",
+  "tel",
+  "number",
+  "website",
+  "textarea",
+  "select",
+  "checkbox",
+  "radio"
+];
+let counter = 0;
+const makeId = (prefix) => `${prefix}_${Date.now().toString(36)}${(counter += 1).toString(36)}${Math.random().toString(36).slice(2, 6)}`;
+function fieldsBefore(definition, beforeId) {
+  const out = [];
+  for (const step of definition.steps) {
+    if (step.id === beforeId) return out;
+    for (const field of step.fields) {
+      if (field.id === beforeId) return out;
+      out.push(field);
+    }
+  }
+  return out;
+}
+const slugifyName = (label) => label.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase().replace(/[^a-z0-9]+/g, "_").replace(/^_+|_+$/g, "");
+const FieldPanel = ({ field, candidates, problem, onChange }) => {
+  const intl = useIntl();
+  const { formatMessage } = intl;
+  const { schema, refresh, refreshing } = useHubspotSchema();
+  const t = (id, defaultMessage, values) => formatMessage({ id: getTranslation(id), defaultMessage }, values);
+  const object = field.hubspot?.object || "contact";
+  const properties = (schema?.properties ?? []).filter((p) => p.object === object);
+  const selected = properties.find((p) => p.name === field.hubspot?.property);
+  const isChoice = field.type === "select" || field.type === "radio";
+  const setHubspot = (patch) => onChange({ hubspot: { ...field.hubspot, ...patch } });
+  const importOptions = () => {
+    if (!selected?.options?.length) return;
+    onChange({
+      options: selected.options.map((o) => ({ value: o.value, label: o.label ?? o.value }))
+    });
+  };
+  const deepLink = schema?.portalId && schema?.uiDomain && selected ? `https://${schema.uiDomain}/property-settings/${schema.portalId}/properties?type=0-${{ contact: 1, company: 2, deal: 3, ticket: 5 }[object] ?? 1}&search=${encodeURIComponent(selected.name)}` : null;
+  return /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 4, children: [
+    /* @__PURE__ */ jsxs(Field.Root, { children: [
+      /* @__PURE__ */ jsx(Field.Label, { children: t("panel.label", "Label") }),
+      /* @__PURE__ */ jsx(
+        TextInput,
+        {
+          value: field.label,
+          onChange: (e) => {
+            const label = e.target.value;
+            const auto = !field.name || field.name === slugifyName(field.label);
+            onChange({ label, ...auto ? { name: slugifyName(label) } : {} });
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(Field.Root, { children: [
+      /* @__PURE__ */ jsx(Field.Label, { children: t("panel.name", "Payload key") }),
+      /* @__PURE__ */ jsx(
+        TextInput,
+        {
+          value: field.name,
+          onChange: (e) => onChange({ name: slugifyName(e.target.value) || e.target.value })
+        }
+      ),
+      /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: t("panel.name-hint", "Key of the answer in the submission — unique in the form.") })
+    ] }),
+    /* @__PURE__ */ jsxs(Field.Root, { children: [
+      /* @__PURE__ */ jsx(Field.Label, { children: t("panel.type", "Type") }),
+      /* @__PURE__ */ jsx(
+        SingleSelect,
+        {
+          value: field.type,
+          onChange: (v) => onChange({ type: v }),
+          children: FIELD_TYPES.map((type) => /* @__PURE__ */ jsx(SingleSelectOption, { value: type, children: type }, type))
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(Flex, { gap: 4, children: [
+      /* @__PURE__ */ jsx(Box, { flex: "1", children: /* @__PURE__ */ jsxs(Field.Root, { children: [
+        /* @__PURE__ */ jsx(Field.Label, { children: t("panel.placeholder", "Placeholder") }),
+        /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            value: field.placeholder ?? "",
+            onChange: (e) => onChange({ placeholder: e.target.value })
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsx(Box, { flex: "1", children: /* @__PURE__ */ jsxs(Field.Root, { children: [
+        /* @__PURE__ */ jsx(Field.Label, { children: t("panel.width", "Width") }),
+        /* @__PURE__ */ jsxs(
+          SingleSelect,
+          {
+            value: field.width ?? "full",
+            onChange: (v) => onChange({ width: v }),
+            children: [
+              /* @__PURE__ */ jsx(SingleSelectOption, { value: "full", children: t("panel.width-full", "Full") }),
+              /* @__PURE__ */ jsx(SingleSelectOption, { value: "half", children: t("panel.width-half", "Half") })
+            ]
+          }
+        )
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsxs(Field.Root, { children: [
+      /* @__PURE__ */ jsx(Field.Label, { children: t("panel.help", "Help text") }),
+      /* @__PURE__ */ jsx(
+        TextInput,
+        {
+          value: field.helpText ?? "",
+          onChange: (e) => onChange({ helpText: e.target.value })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      Checkbox,
+      {
+        checked: Boolean(field.required),
+        onCheckedChange: (checked) => onChange({ required: checked === true }),
+        children: t("panel.required", "Required")
+      }
+    ),
+    isChoice && /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 2, children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", children: t("panel.options", "Choices") }),
+      (field.options ?? []).map((option, index) => /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
+        /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            "aria-label": t("panel.option-value", "Value"),
+            placeholder: t("panel.option-value", "Value"),
+            value: option.value,
+            onChange: (e) => onChange({
+              options: (field.options ?? []).map(
+                (o, i) => i === index ? { ...o, value: e.target.value } : o
+              )
+            })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            "aria-label": t("panel.option-label", "Label"),
+            placeholder: t("panel.option-label", "Label"),
+            value: option.label ?? "",
+            onChange: (e) => onChange({
+              options: (field.options ?? []).map(
+                (o, i) => i === index ? { ...o, label: e.target.value } : o
+              )
+            })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            label: t("panel.option-remove", "Remove"),
+            onClick: () => onChange({ options: (field.options ?? []).filter((_, i) => i !== index) }),
+            children: /* @__PURE__ */ jsx(Trash, {})
+          }
+        )
+      ] }, index)),
+      /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "tertiary",
+            size: "S",
+            startIcon: /* @__PURE__ */ jsx(Plus, {}),
+            onClick: () => onChange({ options: [...field.options ?? [], { value: "", label: "" }] }),
+            children: t("panel.option-add", "Add a choice")
+          }
+        ),
+        selected?.type === "enumeration" && Boolean(selected.options?.length) && /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "S", onClick: importOptions, children: t("panel.option-import", "Import the {count} options from HubSpot", {
+          count: selected.options.length
+        }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(Divider, {}),
+    /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 2, children: [
+      /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", children: t("panel.hubspot", "HubSpot") }),
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            label: t("panel.refresh", "Refresh the portal schema"),
+            onClick: refresh,
+            disabled: refreshing,
+            children: /* @__PURE__ */ jsx(ArrowClockwise, {})
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(Field.Root, { children: [
+        /* @__PURE__ */ jsx(Field.Label, { children: t("panel.object", "Object") }),
+        /* @__PURE__ */ jsx(
+          SingleSelect,
+          {
+            value: object,
+            onChange: (v) => {
+              setHubspot({ object: String(v), property: void 0 });
+            },
+            children: (schema?.objects ?? ["contact", "company"]).map((name) => /* @__PURE__ */ jsx(SingleSelectOption, { value: name, children: objectLabel(intl, name) }, name))
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(Field.Root, { children: [
+        /* @__PURE__ */ jsx(Field.Label, { children: t("panel.property", "Property") }),
+        /* @__PURE__ */ jsx(
+          Combobox,
+          {
+            value: field.hubspot?.property ?? "",
+            onChange: (v) => setHubspot({ property: v || void 0 }),
+            onClear: () => setHubspot({ property: void 0 }),
+            placeholder: t("panel.property-placeholder", "Search a property…"),
+            children: properties.map((p) => /* @__PURE__ */ jsxs(ComboboxOption, { value: p.name, children: [
+              p.group ? `${p.group} · ` : "",
+              p.label,
+              " (",
+              p.name,
+              ")"
+            ] }, p.name))
+          }
+        ),
+        problem && /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "danger600", children: t(`panel.problem-${problem.code}`, "Invalid mapping ({code})", {
+          code: problem.code
+        }) }),
+        !field.hubspot?.property && /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: t("panel.property-hint", "Without a property, the answer is sent under the payload key.") })
+      ] }),
+      deepLink && /* @__PURE__ */ jsx("a", { href: deepLink, target: "_blank", rel: "noreferrer", children: /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "primary600", children: t("panel.view-in-hubspot", "View in HubSpot ↗") }) })
+    ] }),
+    /* @__PURE__ */ jsx(Divider, {}),
+    /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 2, children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", children: t("panel.condition", "Show this field only when…") }),
+      /* @__PURE__ */ jsx(
+        ConditionEditor,
+        {
+          condition: field.visibleIf,
+          candidates,
+          onChange: (visibleIf) => onChange({ visibleIf })
+        }
+      )
+    ] })
+  ] });
+};
+const newField = (label) => ({
+  id: makeId("fld"),
+  name: "",
+  label,
+  type: "text",
+  width: "full",
+  hubspot: { object: "contact" }
+});
+const newStep = () => ({ id: makeId("stp"), title: "", fields: [] });
+const FormEditor = () => {
+  const { formatMessage } = useIntl();
+  const { get, post, put } = useFetchClient();
+  const { documentId } = useParams();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const locale = searchParams.get("locale") ?? void 0;
+  const [entry, setEntry] = React.useState(null);
+  const [published, setPublished] = React.useState(false);
+  const [locales, setLocales] = React.useState([]);
+  const [selection, setSelection] = React.useState({ kind: "form" });
+  const [dirty, setDirty] = React.useState(false);
+  const [busy, setBusy] = React.useState(false);
+  const [errors, setErrors] = React.useState([]);
+  const [problems, setProblems] = React.useState([]);
+  const [feedback, setFeedback] = React.useState(null);
+  const t = (id, defaultMessage, values) => formatMessage({ id: getTranslation(id), defaultMessage }, values);
+  const query = locale ? `?locale=${locale}` : "";
+  React.useEffect(() => {
+    get("/i18n/locales").then(({ data }) => Array.isArray(data) && setLocales(data)).catch(() => setLocales([]));
+  }, [get]);
+  React.useEffect(() => {
+    let cancelled = false;
+    setEntry(null);
+    setSelection({ kind: "form" });
+    setErrors([]);
+    setProblems([]);
+    get(
+      `/${PLUGIN_ID}/builder/forms/${documentId}${query}`
+    ).then(({ data }) => {
+      if (cancelled) return;
+      setEntry(data.form);
+      setPublished(data.published);
+      setDirty(false);
+    }).catch(async () => {
+      if (cancelled || !locale) return;
+      try {
+        const { data } = await get(
+          `/${PLUGIN_ID}/builder/forms/${documentId}`
+        );
+        if (cancelled) return;
+        setEntry({ ...data.form, locale });
+        setPublished(false);
+        setDirty(true);
+        setFeedback({
+          tone: "success",
+          text: t("editor.locale-copied", "New locale started from the default structure — save to keep it.")
+        });
+      } catch {
+        if (!cancelled) setFeedback({ tone: "danger", text: t("editor.load-error", "Could not load the form.") });
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [documentId, locale]);
+  if (!entry) {
+    return /* @__PURE__ */ jsx(Box, { padding: 8, children: /* @__PURE__ */ jsx(Loader, { children: t("editor.loading", "Loading…") }) });
+  }
+  const definition = entry.definition ?? { version: 1, steps: [] };
+  const patchEntry = (patch) => {
+    setEntry((current) => current ? { ...current, ...patch } : current);
+    setDirty(true);
+  };
+  const patchDefinition = (mutate) => patchEntry({ definition: { version: 1, steps: mutate(definition.steps) } });
+  const patchField = (fieldId, patch) => patchDefinition(
+    (steps) => steps.map((step) => ({
+      ...step,
+      fields: step.fields.map((f) => f.id === fieldId ? { ...f, ...patch } : f)
+    }))
+  );
+  const patchStep = (stepId, patch) => patchDefinition((steps) => steps.map((s) => s.id === stepId ? { ...s, ...patch } : s));
+  const moveField = (stepIndex, fieldIndex, delta) => patchDefinition((steps) => {
+    const next = steps.map((s) => ({ ...s, fields: [...s.fields] }));
+    const from = next[stepIndex];
+    const [field] = from.fields.splice(fieldIndex, 1);
+    const target = fieldIndex + delta;
+    if (target >= 0 && target <= from.fields.length) {
+      from.fields.splice(target, 0, field);
+    } else if (delta === -1 && next[stepIndex - 1]) {
+      next[stepIndex - 1].fields.push(field);
+    } else if (delta === 1 && next[stepIndex + 1]) {
+      next[stepIndex + 1].fields.unshift(field);
+    } else {
+      from.fields.splice(fieldIndex, 0, field);
+    }
+    return next;
+  });
+  const moveStep = (stepIndex, delta) => patchDefinition((steps) => {
+    const target = stepIndex + delta;
+    if (target < 0 || target >= steps.length) return steps;
+    const next = [...steps];
+    const [step] = next.splice(stepIndex, 1);
+    next.splice(target, 0, step);
+    return next;
+  });
+  const save = async () => {
+    setBusy(true);
+    setFeedback(null);
+    setErrors([]);
+    try {
+      const { data } = await put(
+        `/${PLUGIN_ID}/builder/forms/${documentId}${query}`,
+        {
+          name: entry.name,
+          title: entry.title,
+          subtitle: entry.subtitle,
+          nextLabel: entry.nextLabel,
+          submitLabel: entry.submitLabel,
+          successMessage: entry.successMessage,
+          definition
+        }
+      );
+      setProblems(data.problems ?? []);
+      setDirty(false);
+      setFeedback({ tone: "success", text: t("editor.saved", "Draft saved.") });
+      return true;
+    } catch (err) {
+      const data = err.response?.data;
+      if (data?.errors) {
+        setErrors(data.errors);
+        setFeedback({ tone: "danger", text: t("editor.invalid", "The structure has problems — see the flagged cards.") });
+      } else {
+        setFeedback({ tone: "danger", text: t("editor.save-error", "Could not save the form.") });
+      }
+      return false;
+    } finally {
+      setBusy(false);
+    }
+  };
+  const publish = async () => {
+    if (dirty && !await save()) return;
+    setBusy(true);
+    setFeedback(null);
+    try {
+      await post(`/${PLUGIN_ID}/builder/forms/${documentId}/publish${query}`);
+      setPublished(true);
+      setErrors([]);
+      setProblems([]);
+      setFeedback({ tone: "success", text: t("editor.published", "Form published.") });
+    } catch (err) {
+      const data = err.response?.data;
+      setErrors(data?.errors ?? []);
+      setProblems(data?.problems ?? []);
+      setFeedback({
+        tone: "danger",
+        text: t("editor.publish-blocked", "Publishing is blocked — fix the flagged mappings first.")
+      });
+    } finally {
+      setBusy(false);
+    }
+  };
+  const unpublish = async () => {
+    setBusy(true);
+    try {
+      await post(`/${PLUGIN_ID}/builder/forms/${documentId}/unpublish${query}`);
+      setPublished(false);
+      setFeedback({ tone: "success", text: t("editor.unpublished", "Form unpublished.") });
+    } catch {
+      setFeedback({ tone: "danger", text: t("editor.unpublish-error", "Could not unpublish.") });
+    } finally {
+      setBusy(false);
+    }
+  };
+  const fieldFlags = (fieldId) => ({
+    error: errors.find((e) => e.fieldId === fieldId),
+    problem: problems.find((p) => p.fieldId === fieldId)
+  });
+  const selectedField = selection.kind === "field" ? definition.steps.flatMap((s) => s.fields).find((f) => f.id === selection.fieldId) : void 0;
+  const selectedStep = selection.kind === "step" ? definition.steps.find((s) => s.id === selection.stepId) : void 0;
+  return /* @__PURE__ */ jsxs(Box, { padding: 6, children: [
+    /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", paddingBottom: 4, children: [
+      /* @__PURE__ */ jsxs(Flex, { gap: 3, alignItems: "center", children: [
+        /* @__PURE__ */ jsx(Link, { to: `/plugins/${PLUGIN_ID}`, children: /* @__PURE__ */ jsx(IconButton, { label: t("editor.back", "Back to the list"), tag: "span", children: /* @__PURE__ */ jsx(ArrowLeft, {}) }) }),
+        /* @__PURE__ */ jsxs(Box, { children: [
+          /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "beta", tag: "h1", children: entry.name }),
+            published ? /* @__PURE__ */ jsx(Badge, { backgroundColor: "success100", textColor: "success700", children: t("forms.published", "Published") }) : /* @__PURE__ */ jsx(Badge, { backgroundColor: "secondary100", textColor: "secondary700", children: t("forms.draft", "Draft") }),
+            dirty && /* @__PURE__ */ jsx(Badge, { backgroundColor: "warning100", textColor: "warning700", children: t("editor.unsaved", "Unsaved changes") })
+          ] }),
+          /* @__PURE__ */ jsxs(Typography, { variant: "pi", textColor: "neutral600", children: [
+            "/",
+            entry.slug
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
+        locales.length > 1 && /* @__PURE__ */ jsx(
+          SingleSelect,
+          {
+            "aria-label": t("editor.locale", "Locale"),
+            value: locale ?? locales.find((l) => l.isDefault)?.code ?? "",
+            onChange: (v) => {
+              const code = String(v);
+              const isDefault = locales.find((l) => l.isDefault)?.code === code;
+              setSearchParams(isDefault ? {} : { locale: code });
+            },
+            children: locales.map((l) => /* @__PURE__ */ jsx(SingleSelectOption, { value: l.code, children: l.name }, l.code))
+          }
+        ),
+        /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: save, disabled: busy || !dirty, children: t("editor.save", "Save") }),
+        /* @__PURE__ */ jsx(Button, { onClick: publish, disabled: busy, children: t("editor.publish", "Publish") }),
+        published && /* @__PURE__ */ jsx(Button, { variant: "tertiary", onClick: unpublish, disabled: busy, children: t("editor.unpublish", "Unpublish") })
+      ] })
+    ] }),
+    feedback && /* @__PURE__ */ jsx(Box, { paddingBottom: 4, children: /* @__PURE__ */ jsx(Typography, { textColor: feedback.tone === "success" ? "success600" : "danger600", children: feedback.text }) }),
+    /* @__PURE__ */ jsxs(Flex, { gap: 6, alignItems: "flex-start", children: [
+      /* @__PURE__ */ jsx(Box, { flex: "1", children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 4, children: [
+        definition.steps.map((step, stepIndex) => /* @__PURE__ */ jsxs(
+          Box,
+          {
+            background: "neutral0",
+            hasRadius: true,
+            shadow: "tableShadow",
+            padding: 4,
+            borderColor: selection.kind === "step" && selection.stepId === step.id ? "primary600" : void 0,
+            borderStyle: selection.kind === "step" && selection.stepId === step.id ? "solid" : void 0,
+            borderWidth: selection.kind === "step" && selection.stepId === step.id ? "1px" : void 0,
+            children: [
+              /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", paddingBottom: 2, children: [
+                /* @__PURE__ */ jsxs(
+                  Flex,
+                  {
+                    gap: 2,
+                    alignItems: "center",
+                    onClick: () => setSelection({ kind: "step", stepId: step.id }),
+                    style: { cursor: "pointer" },
+                    children: [
+                      /* @__PURE__ */ jsxs(Typography, { variant: "delta", children: [
+                        t("editor.step", "Step {n}", { n: stepIndex + 1 }),
+                        step.title ? ` — ${step.title}` : ""
+                      ] }),
+                      step.visibleIf?.rules?.length ? /* @__PURE__ */ jsx(Badge, { backgroundColor: "alternative100", textColor: "alternative700", children: t("editor.conditional", "Conditional") }) : null,
+                      errors.some((e) => e.stepId === step.id) && /* @__PURE__ */ jsx(Badge, { backgroundColor: "danger100", textColor: "danger700", children: t("editor.flag-error", "To fix") })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs(Flex, { gap: 1, children: [
+                  /* @__PURE__ */ jsx(
+                    IconButton,
+                    {
+                      label: t("editor.step-up", "Move the step up"),
+                      onClick: () => moveStep(stepIndex, -1),
+                      disabled: stepIndex === 0,
+                      children: /* @__PURE__ */ jsx(ArrowUp, {})
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    IconButton,
+                    {
+                      label: t("editor.step-down", "Move the step down"),
+                      onClick: () => moveStep(stepIndex, 1),
+                      disabled: stepIndex === definition.steps.length - 1,
+                      children: /* @__PURE__ */ jsx(ArrowDown, {})
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    IconButton,
+                    {
+                      label: t("editor.step-delete", "Delete the step and its fields"),
+                      onClick: () => {
+                        setSelection({ kind: "form" });
+                        patchDefinition((steps) => steps.filter((s) => s.id !== step.id));
+                      },
+                      children: /* @__PURE__ */ jsx(Trash, {})
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 2, children: [
+                step.fields.map((field, fieldIndex) => {
+                  const flags = fieldFlags(field.id);
+                  const isSelected = selection.kind === "field" && selection.fieldId === field.id;
+                  return /* @__PURE__ */ jsx(
+                    Box,
+                    {
+                      background: isSelected ? "primary100" : "neutral100",
+                      hasRadius: true,
+                      padding: 3,
+                      onClick: () => setSelection({ kind: "field", fieldId: field.id }),
+                      style: { cursor: "pointer" },
+                      children: /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", children: [
+                        /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", wrap: "wrap", children: [
+                          /* @__PURE__ */ jsx(Typography, { fontWeight: "semiBold", children: field.label || field.name || "—" }),
+                          /* @__PURE__ */ jsx(Badge, { children: field.type }),
+                          field.required && /* @__PURE__ */ jsx(Badge, { backgroundColor: "neutral150", textColor: "neutral600", children: t("editor.required", "required") }),
+                          field.hubspot?.property && /* @__PURE__ */ jsxs(Badge, { backgroundColor: "primary100", textColor: "primary700", children: [
+                            field.hubspot.object ?? "contact",
+                            ".",
+                            field.hubspot.property
+                          ] }),
+                          field.visibleIf?.rules?.length ? /* @__PURE__ */ jsx(Badge, { backgroundColor: "alternative100", textColor: "alternative700", children: t("editor.conditional", "Conditional") }) : null,
+                          (flags.error || flags.problem) && /* @__PURE__ */ jsx(Badge, { backgroundColor: "danger100", textColor: "danger700", children: flags.error?.code ?? flags.problem?.code })
+                        ] }),
+                        /* @__PURE__ */ jsxs(Flex, { gap: 1, onClick: (e) => e.stopPropagation(), children: [
+                          /* @__PURE__ */ jsx(
+                            IconButton,
+                            {
+                              label: t("editor.field-up", "Move up"),
+                              onClick: () => moveField(stepIndex, fieldIndex, -1),
+                              disabled: stepIndex === 0 && fieldIndex === 0,
+                              children: /* @__PURE__ */ jsx(ArrowUp, {})
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            IconButton,
+                            {
+                              label: t("editor.field-down", "Move down"),
+                              onClick: () => moveField(stepIndex, fieldIndex, 1),
+                              disabled: stepIndex === definition.steps.length - 1 && fieldIndex === step.fields.length - 1,
+                              children: /* @__PURE__ */ jsx(ArrowDown, {})
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            IconButton,
+                            {
+                              label: t("editor.field-delete", "Delete the field"),
+                              onClick: () => {
+                                setSelection({ kind: "form" });
+                                patchStep(step.id, {
+                                  fields: step.fields.filter((f) => f.id !== field.id)
+                                });
+                              },
+                              children: /* @__PURE__ */ jsx(Trash, {})
+                            }
+                          )
+                        ] })
+                      ] })
+                    },
+                    field.id
+                  );
+                }),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "tertiary",
+                    startIcon: /* @__PURE__ */ jsx(Plus, {}),
+                    onClick: () => {
+                      const field = newField(t("editor.new-field", "New field"));
+                      patchStep(step.id, { fields: [...step.fields, field] });
+                      setSelection({ kind: "field", fieldId: field.id });
+                    },
+                    children: t("editor.add-field", "Add a field")
+                  }
+                )
+              ] })
+            ]
+          },
+          step.id
+        )),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "secondary",
+            startIcon: /* @__PURE__ */ jsx(Plus, {}),
+            onClick: () => {
+              const step = newStep();
+              patchDefinition((steps) => [...steps, step]);
+              setSelection({ kind: "step", stepId: step.id });
+            },
+            children: t("editor.add-step", "Add a step")
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsx(Box, { background: "neutral0", hasRadius: true, shadow: "tableShadow", padding: 4, width: "380px", style: { flexShrink: 0 }, children: selectedField ? /* @__PURE__ */ jsx(
+        FieldPanel,
+        {
+          field: selectedField,
+          candidates: fieldsBefore(definition, selectedField.id),
+          problem: problems.find((p) => p.fieldId === selectedField.id),
+          onChange: (patch) => patchField(selectedField.id, patch)
+        }
+      ) : selectedStep ? /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 4, children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", children: t("editor.step-panel", "Step") }),
+        /* @__PURE__ */ jsxs(Field.Root, { children: [
+          /* @__PURE__ */ jsx(Field.Label, { children: t("editor.step-title", "Title") }),
+          /* @__PURE__ */ jsx(
+            TextInput,
+            {
+              value: selectedStep.title ?? "",
+              onChange: (e) => patchStep(selectedStep.id, { title: e.target.value })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(Field.Root, { children: [
+          /* @__PURE__ */ jsx(Field.Label, { children: t("editor.step-description", "Description") }),
+          /* @__PURE__ */ jsx(
+            Textarea,
+            {
+              value: selectedStep.description ?? "",
+              onChange: (e) => patchStep(selectedStep.id, { description: e.target.value })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", children: t("editor.step-condition", "Show this step only when…") }),
+        /* @__PURE__ */ jsx(
+          ConditionEditor,
+          {
+            condition: selectedStep.visibleIf,
+            candidates: fieldsBefore(definition, selectedStep.id),
+            onChange: (visibleIf) => patchStep(selectedStep.id, { visibleIf })
+          }
+        )
+      ] }) : /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 4, children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", children: t("editor.form-panel", "Form") }),
+        /* @__PURE__ */ jsxs(Field.Root, { children: [
+          /* @__PURE__ */ jsx(Field.Label, { children: t("editor.form-name", "Internal name") }),
+          /* @__PURE__ */ jsx(
+            TextInput,
+            {
+              value: entry.name,
+              onChange: (e) => patchEntry({ name: e.target.value })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(Field.Root, { children: [
+          /* @__PURE__ */ jsx(Field.Label, { children: t("editor.form-title", "Title") }),
+          /* @__PURE__ */ jsx(
+            TextInput,
+            {
+              value: entry.title ?? "",
+              onChange: (e) => patchEntry({ title: e.target.value })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(Field.Root, { children: [
+          /* @__PURE__ */ jsx(Field.Label, { children: t("editor.form-subtitle", "Subtitle") }),
+          /* @__PURE__ */ jsx(
+            Textarea,
+            {
+              value: entry.subtitle ?? "",
+              onChange: (e) => patchEntry({ subtitle: e.target.value })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
+          /* @__PURE__ */ jsx(Box, { flex: "1", children: /* @__PURE__ */ jsxs(Field.Root, { children: [
+            /* @__PURE__ */ jsx(Field.Label, { children: t("editor.form-next", "Next label") }),
+            /* @__PURE__ */ jsx(
+              TextInput,
+              {
+                value: entry.nextLabel ?? "",
+                onChange: (e) => patchEntry({ nextLabel: e.target.value })
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ jsx(Box, { flex: "1", children: /* @__PURE__ */ jsxs(Field.Root, { children: [
+            /* @__PURE__ */ jsx(Field.Label, { children: t("editor.form-submit", "Submit label") }),
+            /* @__PURE__ */ jsx(
+              TextInput,
+              {
+                value: entry.submitLabel ?? "",
+                onChange: (e) => patchEntry({ submitLabel: e.target.value })
+              }
+            )
+          ] }) })
+        ] }),
+        /* @__PURE__ */ jsxs(Field.Root, { children: [
+          /* @__PURE__ */ jsx(Field.Label, { children: t("editor.form-success", "Success message") }),
+          /* @__PURE__ */ jsx(
+            Textarea,
+            {
+              value: entry.successMessage ?? "",
+              onChange: (e) => patchEntry({ successMessage: e.target.value })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: t(
+          "editor.form-hint",
+          "Select a step or a field to edit it. The public endpoint serves this form at /api/hubspot/forms/{slug}.",
+          { slug: entry.slug }
+        ) })
+      ] }) })
+    ] })
+  ] });
+};
+const FormsList = () => {
+  const { formatMessage } = useIntl();
+  const { get, post, del } = useFetchClient();
+  const navigate = useNavigate();
+  const [rows, setRows] = React.useState(null);
+  const [name, setName] = React.useState("");
+  const [busy, setBusy] = React.useState(false);
+  const [error, setError] = React.useState(null);
+  const [sources, setSources] = React.useState([]);
+  const [sourceId, setSourceId] = React.useState("");
+  const t = (id, defaultMessage, values) => formatMessage({ id: getTranslation(id), defaultMessage }, values);
+  const load = React.useCallback(async () => {
+    const { data } = await get(`/${PLUGIN_ID}/builder/forms`);
+    setRows(data.forms);
+  }, [get]);
+  React.useEffect(() => {
+    load().catch(() => setError(t("forms.load-error", "Could not load the forms.")));
+    get(
+      `/${PLUGIN_ID}/builder/import/sources`
+    ).then(({ data }) => setSources(data.sources ?? [])).catch(() => setSources([]));
+  }, [load]);
+  const runImport = async () => {
+    if (!sourceId) return;
+    setBusy(true);
+    setError(null);
+    try {
+      const { data } = await post(`/${PLUGIN_ID}/builder/import`, {
+        documentId: sourceId
+      });
+      navigate(data.documentId);
+    } catch {
+      setError(t("forms.import-error", "Could not import the form."));
+      setBusy(false);
+    }
+  };
+  const create = async () => {
+    if (!name.trim()) return;
+    setBusy(true);
+    setError(null);
+    try {
+      const { data } = await post(
+        `/${PLUGIN_ID}/builder/forms`,
+        { name: name.trim() }
+      );
+      navigate(data.form.documentId);
+    } catch {
+      setError(t("forms.create-error", "Could not create the form."));
+      setBusy(false);
+    }
+  };
+  const remove = async (row) => {
+    if (!window.confirm(t("forms.delete-confirm", 'Delete "{name}" and all its locales?', { name: row.name }))) {
+      return;
+    }
+    setBusy(true);
+    try {
+      await del(`/${PLUGIN_ID}/builder/forms/${row.documentId}`);
+      await load();
+    } catch {
+      setError(t("forms.delete-error", "Could not delete the form."));
+    } finally {
+      setBusy(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs(Box, { padding: 8, children: [
+    /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "flex-end", paddingBottom: 6, children: [
+      /* @__PURE__ */ jsxs(Box, { children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "alpha", tag: "h1", children: t("forms.title", "HubSpot forms") }),
+        /* @__PURE__ */ jsx(Typography, { variant: "epsilon", textColor: "neutral600", tag: "p", children: t(
+          "forms.subtitle",
+          "Multi-step forms with conditional fields, mapped to your portal's real properties."
+        ) })
+      ] }),
+      /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
+        /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            "aria-label": t("forms.name-label", "Name of the new form"),
+            placeholder: t("forms.name-placeholder", "Name of the new form"),
+            value: name,
+            onChange: (e) => setName(e.target.value),
+            onKeyDown: (e) => e.key === "Enter" && create()
+          }
+        ),
+        /* @__PURE__ */ jsx(Button, { startIcon: /* @__PURE__ */ jsx(Plus, {}), onClick: create, disabled: busy || !name.trim(), children: t("forms.create", "Create") })
+      ] })
+    ] }),
+    error && /* @__PURE__ */ jsx(Box, { paddingBottom: 4, children: /* @__PURE__ */ jsx(Typography, { textColor: "danger600", children: error }) }),
+    sources.length > 0 && /* @__PURE__ */ jsx(Box, { background: "neutral0", hasRadius: true, shadow: "tableShadow", padding: 4, marginBottom: 4, children: /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "flex-end", justifyContent: "space-between", children: [
+      /* @__PURE__ */ jsxs(Box, { children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "delta", tag: "h2", children: t("forms.import-title", "Import an existing form") }),
+        /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", tag: "p", children: t(
+          "forms.import-hint",
+          "Converts a legacy content-type form (all locales) into a draft here — same slug, source untouched. Re-importing overwrites the draft."
+        ) })
+      ] }),
+      /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
+        /* @__PURE__ */ jsx(
+          SingleSelect,
+          {
+            "aria-label": t("forms.import-source", "Form to import"),
+            placeholder: t("forms.import-source", "Form to import"),
+            value: sourceId,
+            onChange: (v) => setSourceId(String(v)),
+            children: sources.map((s) => /* @__PURE__ */ jsxs(SingleSelectOption, { value: s.documentId, children: [
+              s.name,
+              " ",
+              s.slug ? `(${s.slug})` : ""
+            ] }, s.documentId))
+          }
+        ),
+        /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: runImport, disabled: busy || !sourceId, children: t("forms.import", "Import") })
+      ] })
+    ] }) }),
+    !rows ? /* @__PURE__ */ jsx(Loader, { children: t("forms.loading", "Loading…") }) : rows.length === 0 ? /* @__PURE__ */ jsx(Box, { background: "neutral0", hasRadius: true, shadow: "tableShadow", padding: 8, children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", children: t("forms.empty", "No form yet — name one above to open the builder.") }) }) : /* @__PURE__ */ jsxs(Table, { colCount: 6, rowCount: rows.length, children: [
+      /* @__PURE__ */ jsx(Thead, { children: /* @__PURE__ */ jsxs(Tr, { children: [
+        /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: t("forms.col-name", "Name") }) }),
+        /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: t("forms.col-slug", "Slug") }) }),
+        /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: t("forms.col-structure", "Structure") }) }),
+        /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: t("forms.col-status", "Status") }) }),
+        /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: t("forms.col-updated", "Updated") }) }),
+        /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: t("forms.col-actions", "") }) })
+      ] }) }),
+      /* @__PURE__ */ jsx(Tbody, { children: rows.map((row) => /* @__PURE__ */ jsxs(
+        Tr,
+        {
+          onClick: () => navigate(row.documentId),
+          style: { cursor: "pointer" },
+          children: [
+            /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { fontWeight: "semiBold", children: row.name }) }),
+            /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", children: row.slug }) }),
+            /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", children: t("forms.structure", "{steps} steps · {fields} fields", {
+              steps: row.steps,
+              fields: row.fields
+            }) }) }),
+            /* @__PURE__ */ jsx(Td, { children: row.published ? /* @__PURE__ */ jsx(Badge, { backgroundColor: "success100", textColor: "success700", children: t("forms.published", "Published") }) : /* @__PURE__ */ jsx(Badge, { backgroundColor: "secondary100", textColor: "secondary700", children: t("forms.draft", "Draft") }) }),
+            /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", children: row.updatedAt ? new Date(row.updatedAt).toLocaleString() : "—" }) }),
+            /* @__PURE__ */ jsx(Td, { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                label: t("forms.delete", "Delete"),
+                onClick: () => remove(row),
+                disabled: busy,
+                children: /* @__PURE__ */ jsx(Trash, {})
+              }
+            ) })
+          ]
+        },
+        row.documentId
+      )) })
+    ] })
+  ] });
+};
+const Forms = () => /* @__PURE__ */ jsxs(Routes, { children: [
+  /* @__PURE__ */ jsx(Route, { index: true, element: /* @__PURE__ */ jsx(FormsList, {}) }),
+  /* @__PURE__ */ jsx(Route, { path: ":documentId", element: /* @__PURE__ */ jsx(FormEditor, {}) })
+] });
+export {
+  Forms as default
+};