strapi-plugin-hubspot 0.15.0 → 0.16.1

package/CHANGELOG.md

@@ -2,6 +2,27 @@
 
 ## Unreleased
 
+## 0.16.1 — 2026-09-22
+
+### Changed
+- Fields in the builder can be dragged from one step to another (the grip
+  handle is no longer limited to reordering inside the current step). Arrow
+  buttons still move a field into the neighbouring step.
+
+## 0.16.0 — 2026-09-22
+
+### Added — submission policies
+The plugin no longer assumes one HubSpot workflow. **Settings → HubSpot**
+(and `forms.*` in `config/plugins.ts`) now expose three independent choices:
+
+- **`submissionMode`** (`auto` / `forms` / `crm`): native marketing-form
+  conversions when a GUID is linked, CRM upsert only, or automatic.
+- **`writeExtraProperties`** (default `true`): after a Forms API conversion,
+  leftover mapped contact fields still land on the contact via CRM upsert.
+- **`syncFieldsOnPublish`** (default `false`): on publish, PATCH missing
+  mapped contact fields onto the linked HubSpot form. Off so HubSpot-first
+  installs aren't mutated. CRM properties are never created.
+
 ## 0.15.0 — 2026-09-21
 
 ### Added — account settings in the admin

package/README.md

@@ -44,14 +44,25 @@ Permissions**):
 | `GET` | `/api/hubspot/forms/:slug?locale=` | The published form — meta, steps, fields, conditions. The CRM mapping is stripped: the browser never learns your property names |
 | `POST` | `/api/hubspot/forms/:slug/submit` | Validates (bounds, conditions, required), maps server-side, syncs HubSpot, stores the submission |
 
-The submit pipeline, in order: HubSpot **Forms API** (native conversion —
-Original Source, workflows, lead-center notifications) when a marketing form
-GUID is set on the builder form or via `forms.defaultFormId`; the visitor's
-`hutk` is forwarded so attribution sticks. Then the contact is looked up by
-email and, when the address is on a corporate domain, the company is
-found-or-created and associated. A CRM contact upsert is the **fallback**
-when no GUID is configured — it does not count as a form conversion.
-Timeline notes are opt-in and only used on that fallback.
+The submit pipeline is a **policy**, not a single path. Settings → HubSpot
+(or `forms.*` in `config/plugins.ts`) pick how this install talks to HubSpot —
+so a portal that wants native conversions and a portal that only wants CRM
+upserts can share the same plugin:
+
+| Setting | Default | What it does |
+|---|---|---|
+| `forms.submissionMode` | `auto` | `auto`: Forms API when a marketing GUID is linked, else CRM upsert. `forms`: always try the Forms API. `crm`: never count as a conversion |
+| `forms.writeExtraProperties` | `true` | After a conversion, CRM-write mapped contact fields the HubSpot form dropped (they 400 the Forms API) |
+| `forms.syncFieldsOnPublish` | `false` | On publish, PATCH missing mapped **contact** fields onto the HubSpot form. Off by default so HubSpot-first installs aren't mutated |
+
+The visitor's `hutk` is forwarded so attribution sticks. Then the contact is
+looked up by email and, when the address is on a corporate domain, the company
+is found-or-created and associated. Timeline notes are opt-in and only used
+on the CRM-upsert path.
+
+CRM properties are **never created**. Map to properties that already exist in
+the portal; opting into field sync only adds form fields that point at those
+properties.
 
 Portal id, region and form GUIDs are configuration. A test portal today,
 production tomorrow: swap `portalId` / `region` / the GUID, no code change.
@@ -66,6 +77,9 @@ hubspot: {
       companyFromDomain: true, // Company by corporate domain + association
       timelineNote: false,     // recap note on the CRM-upsert fallback only
       defaultFormId: env("HUBSPOT_DEFAULT_FORM_ID", ""),
+      submissionMode: "auto",  // auto | forms | crm
+      writeExtraProperties: true,
+      syncFieldsOnPublish: false,
     },
   },
 }
@@ -365,11 +379,12 @@ its equivalent per object you send to).
 
 ### A settings screen
 
-**Settings → HubSpot** holds the private app token **and** the HubSpot account
-that receives conversions: portal id, region (`eu1` / `na1`), and the default
-marketing form (picked from the connected portal). Values saved here override
-`config/plugins.ts` and env — switching test → production is an admin change,
-not a deploy.
+**Settings → HubSpot** holds the private app token, the HubSpot account that
+receives conversions (portal id, region, default marketing form), **and** the
+submission policy: conversion vs CRM upsert, leftover contact writes, form
+field sync on publish. Values saved here override `config/plugins.ts` and env
+— switching test → production, or switching HubSpot-first ↔ Strapi-first, is
+an admin change, not a deploy.
 
 The token is stored server-side and never returned to the browser: the UI only
 receives whether a key exists, where it comes from, and its last four

package/dist/_chunks/{Forms-ClyI4MJ1.js → Forms-D0QXkYAN.js}

@@ -7,12 +7,12 @@ const index = require("./index-DkTxsEqL.js");
 const designSystem = require("@strapi/design-system");
 const icons = require("@strapi/icons");
 const admin = require("@strapi/strapi/admin");
-const index$1 = require("./index-BpcilDy1.js");
+const index$1 = require("./index-ciliGv0E.js");
 const core = require("@dnd-kit/core");
 const sortable = require("@dnd-kit/sortable");
 const utilities = require("@dnd-kit/utilities");
-const objectLabels = require("./objectLabels-CYXXFpNB.js");
-const useHubspotSchema = require("./useHubspotSchema-Ba6xZUCL.js");
+const objectLabels = require("./objectLabels-BjYfdhRB.js");
+const useHubspotSchema = require("./useHubspotSchema-KKVppjC2.js");
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -173,32 +173,107 @@ const ConditionEditor = ({ condition, candidates, onChange }) => {
     ] })
   ] });
 };
-function SortableList({
-  ids,
-  onReorder,
-  children
+function relocateField(steps, fieldId, overId) {
+  const next = steps.map((step) => ({ ...step, fields: [...step.fields] }));
+  let fromStep = -1;
+  let fromIndex = -1;
+  for (let i = 0; i < next.length; i += 1) {
+    const index2 = next[i].fields.findIndex((field2) => field2.id === fieldId);
+    if (index2 !== -1) {
+      fromStep = i;
+      fromIndex = index2;
+      break;
+    }
+  }
+  if (fromStep === -1) return steps;
+  let toStep = -1;
+  let toIndex = -1;
+  const containerId = overId.startsWith("container:") ? overId.slice("container:".length) : "";
+  if (containerId) {
+    toStep = next.findIndex((step) => step.id === containerId);
+    toIndex = toStep === -1 ? -1 : next[toStep].fields.length;
+  } else {
+    for (let i = 0; i < next.length; i += 1) {
+      const index2 = next[i].fields.findIndex((field2) => field2.id === overId);
+      if (index2 !== -1) {
+        toStep = i;
+        toIndex = index2;
+        break;
+      }
+    }
+    if (toStep === -1) {
+      toStep = next.findIndex((step) => step.id === overId);
+      toIndex = toStep === -1 ? -1 : next[toStep].fields.length;
+    }
+  }
+  if (toStep === -1 || toIndex === -1) return steps;
+  if (fromStep === toStep) {
+    if (fromIndex === toIndex) return steps;
+    next[fromStep].fields = sortable.arrayMove(next[fromStep].fields, fromIndex, toIndex);
+    return next;
+  }
+  const [field] = next[fromStep].fields.splice(fromIndex, 1);
+  if (!field) return steps;
+  next[toStep].fields.splice(toIndex, 0, field);
+  return next;
+}
+const collisionDetection = (args) => {
+  const type = args.active.data.current?.type;
+  const droppableContainers = args.droppableContainers.filter((container) => {
+    const other = container.data.current?.type;
+    if (type === "step") return other === "step";
+    if (type === "field") return other === "field" || other === "container";
+    return true;
+  });
+  return core.closestCorners({ ...args, droppableContainers });
+};
+function SortableBoard({
+  children,
+  onDragEnd
 }) {
   const sensors = core.useSensors(
     // An 8px activation distance keeps clicks (selection!) from starting drags.
     core.useSensor(core.PointerSensor, { activationConstraint: { distance: 8 } }),
     core.useSensor(core.KeyboardSensor, { coordinateGetter: sortable.sortableKeyboardCoordinates })
   );
-  const handleDragEnd = (event) => {
-    const { active, over } = event;
-    if (!over || active.id === over.id) return;
-    const from = ids.indexOf(String(active.id));
-    const to = ids.indexOf(String(over.id));
-    if (from === -1 || to === -1) return;
-    onReorder(sortable.arrayMove(ids, from, to));
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(core.DndContext, { sensors, collisionDetection: core.closestCenter, onDragEnd: handleDragEnd, children: /* @__PURE__ */ jsxRuntime.jsx(sortable.SortableContext, { items: ids, strategy: sortable.verticalListSortingStrategy, children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(core.DndContext, { sensors, collisionDetection, onDragEnd, children });
+}
+function SortableGroup({
+  ids,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(sortable.SortableContext, { items: ids, strategy: sortable.verticalListSortingStrategy, children });
+}
+function SortableContainer({
+  stepId,
+  children
+}) {
+  const { setNodeRef, isOver } = core.useDroppable({
+    id: `container:${stepId}`,
+    data: { type: "container", stepId }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: setNodeRef,
+      style: {
+        minHeight: 8,
+        borderRadius: 4,
+        outline: isOver ? "2px dashed currentColor" : void 0,
+        outlineOffset: 4
+      },
+      children
+    }
+  );
 }
 function SortableItem({
   id,
+  data,
   children
 }) {
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = sortable.useSortable({
-    id
+    id,
+    data
   });
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -794,11 +869,32 @@ const FormEditor = () => {
     setBusy(true);
     setFeedback(null);
     try {
-      await post(`/${index$1.PLUGIN_ID}/builder/forms/${documentId}/publish${query}`);
+      const { data } = await post(`/${index$1.PLUGIN_ID}/builder/forms/${documentId}/publish${query}`);
       setPublished(true);
       setErrors([]);
       setProblems([]);
-      setFeedback({ tone: "success", text: t("editor.published", "Form published.") });
+      const added = Array.isArray(data?.addedFields) ? data.addedFields.length : 0;
+      if (data?.syncWarning) {
+        setFeedback({
+          tone: "success",
+          text: t(
+            "editor.published-sync-warn",
+            "Form published. HubSpot field sync failed: {error}",
+            { error: data.syncWarning }
+          )
+        });
+      } else if (added) {
+        setFeedback({
+          tone: "success",
+          text: t(
+            "editor.published-synced",
+            "Form published. {count, plural, one {# field added} other {# fields added}} to the HubSpot form.",
+            { count: added }
+          )
+        });
+      } else {
+        setFeedback({ tone: "success", text: t("editor.published", "Form published.") });
+      }
     } catch (err) {
       const data = err.response?.data;
       setErrors(data?.errors ?? []);
@@ -868,14 +964,28 @@ const FormEditor = () => {
     /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 6, alignItems: "flex-start", children: [
       /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { flex: "1", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 4, children: [
         /* @__PURE__ */ jsxRuntime.jsx(
-          SortableList,
+          SortableBoard,
           {
-            ids: definition.steps.map((s) => s.id),
-            onReorder: (ids) => patchDefinition((steps) => reorderByIds(steps, ids)),
-            children: definition.steps.map((step, stepIndex) => /* @__PURE__ */ jsxRuntime.jsx(
+            onDragEnd: ({ active, over }) => {
+              if (!over || active.id === over.id) return;
+              const kind = active.data.current?.type;
+              if (kind === "step") {
+                const ids = definition.steps.map((s) => s.id);
+                const from = ids.indexOf(String(active.id));
+                const to = ids.indexOf(String(over.id));
+                if (from === -1 || to === -1) return;
+                patchDefinition((steps) => reorderByIds(steps, sortable.arrayMove(ids, from, to)));
+                return;
+              }
+              if (kind === "field") {
+                patchDefinition((steps) => relocateField(steps, String(active.id), String(over.id)));
+              }
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(SortableGroup, { ids: definition.steps.map((s) => s.id), children: definition.steps.map((step, stepIndex) => /* @__PURE__ */ jsxRuntime.jsx(
               SortableItem,
               {
                 id: step.id,
+                data: { type: "step" },
                 children: (stepHandle) => /* @__PURE__ */ jsxRuntime.jsxs(
                   designSystem.Box,
                   {
@@ -951,95 +1061,89 @@ const FormEditor = () => {
                         ] })
                       ] }),
                       /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 2, children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          SortableList,
-                          {
-                            ids: step.fields.map((f) => f.id),
-                            onReorder: (ids) => patchStep(step.id, { fields: reorderByIds(step.fields, ids) }),
-                            children: step.fields.map((field, fieldIndex) => {
-                              const flags = fieldFlags(field.id);
-                              const isSelected = selection.kind === "field" && selection.fieldId === field.id;
-                              return /* @__PURE__ */ jsxRuntime.jsx(
-                                SortableItem,
+                        /* @__PURE__ */ jsxRuntime.jsx(SortableContainer, { stepId: step.id, children: /* @__PURE__ */ jsxRuntime.jsx(SortableGroup, { ids: step.fields.map((f) => f.id), children: step.fields.map((field, fieldIndex) => {
+                          const flags = fieldFlags(field.id);
+                          const isSelected = selection.kind === "field" && selection.fieldId === field.id;
+                          return /* @__PURE__ */ jsxRuntime.jsx(
+                            SortableItem,
+                            {
+                              id: field.id,
+                              data: { type: "field", stepId: step.id },
+                              children: (fieldHandle) => /* @__PURE__ */ jsxRuntime.jsx(
+                                designSystem.Box,
                                 {
-                                  id: field.id,
-                                  children: (fieldHandle) => /* @__PURE__ */ jsxRuntime.jsx(
-                                    designSystem.Box,
-                                    {
-                                      background: isSelected ? "primary100" : "neutral100",
-                                      hasRadius: true,
-                                      padding: 3,
-                                      onClick: (e) => {
-                                        e.stopPropagation();
-                                        setSelection({ kind: "field", fieldId: field.id });
-                                      },
-                                      style: { cursor: "pointer" },
-                                      children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "center", children: [
-                                        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, alignItems: "center", wrap: "wrap", children: [
-                                          /* @__PURE__ */ jsxRuntime.jsx(
-                                            "span",
-                                            {
-                                              ...fieldHandle.attributes,
-                                              ...fieldHandle.listeners,
-                                              onClick: (e) => e.stopPropagation(),
-                                              style: { cursor: "grab", display: "inline-flex" },
-                                              "aria-label": t("editor.drag-field", "Drag to reorder the field"),
-                                              children: /* @__PURE__ */ jsxRuntime.jsx(icons.Drag, {})
-                                            }
-                                          ),
-                                          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "semiBold", children: field.label || field.name || "—" }),
-                                          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { children: field.type }),
-                                          field.required && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { backgroundColor: "neutral150", textColor: "neutral600", children: t("editor.required", "required") }),
-                                          field.hubspot?.property && /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Badge, { backgroundColor: "primary100", textColor: "primary700", children: [
-                                            field.hubspot.object ?? "contact",
-                                            ".",
-                                            field.hubspot.property
-                                          ] }),
-                                          field.visibleIf?.rules?.length ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { backgroundColor: "alternative100", textColor: "alternative700", children: t("editor.conditional", "Conditional") }) : null,
-                                          (flags.error || flags.problem) && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { backgroundColor: "danger100", textColor: "danger700", children: flags.error?.code ?? flags.problem?.code })
-                                        ] }),
-                                        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 1, onClick: (e) => e.stopPropagation(), children: [
-                                          /* @__PURE__ */ jsxRuntime.jsx(
-                                            designSystem.IconButton,
-                                            {
-                                              label: t("editor.field-up", "Move up"),
-                                              onClick: () => moveField(stepIndex, fieldIndex, -1),
-                                              disabled: stepIndex === 0 && fieldIndex === 0,
-                                              children: /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowUp, {})
-                                            }
-                                          ),
-                                          /* @__PURE__ */ jsxRuntime.jsx(
-                                            designSystem.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__ */ jsxRuntime.jsx(icons.ArrowDown, {})
-                                            }
-                                          ),
-                                          /* @__PURE__ */ jsxRuntime.jsx(
-                                            designSystem.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__ */ jsxRuntime.jsx(icons.Trash, {})
-                                            }
-                                          )
-                                        ] })
-                                      ] })
-                                    }
-                                  )
-                                },
-                                field.id
-                              );
-                            })
-                          }
-                        ),
+                                  background: isSelected ? "primary100" : "neutral100",
+                                  hasRadius: true,
+                                  padding: 3,
+                                  onClick: (e) => {
+                                    e.stopPropagation();
+                                    setSelection({ kind: "field", fieldId: field.id });
+                                  },
+                                  style: { cursor: "pointer" },
+                                  children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "center", children: [
+                                    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, alignItems: "center", wrap: "wrap", children: [
+                                      /* @__PURE__ */ jsxRuntime.jsx(
+                                        "span",
+                                        {
+                                          ...fieldHandle.attributes,
+                                          ...fieldHandle.listeners,
+                                          onClick: (e) => e.stopPropagation(),
+                                          style: { cursor: "grab", display: "inline-flex" },
+                                          "aria-label": t("editor.drag-field", "Drag to move the field, including to another step"),
+                                          children: /* @__PURE__ */ jsxRuntime.jsx(icons.Drag, {})
+                                        }
+                                      ),
+                                      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "semiBold", children: field.label || field.name || "—" }),
+                                      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { children: field.type }),
+                                      field.required && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { backgroundColor: "neutral150", textColor: "neutral600", children: t("editor.required", "required") }),
+                                      field.hubspot?.property && /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Badge, { backgroundColor: "primary100", textColor: "primary700", children: [
+                                        field.hubspot.object ?? "contact",
+                                        ".",
+                                        field.hubspot.property
+                                      ] }),
+                                      field.visibleIf?.rules?.length ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { backgroundColor: "alternative100", textColor: "alternative700", children: t("editor.conditional", "Conditional") }) : null,
+                                      (flags.error || flags.problem) && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { backgroundColor: "danger100", textColor: "danger700", children: flags.error?.code ?? flags.problem?.code })
+                                    ] }),
+                                    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 1, onClick: (e) => e.stopPropagation(), children: [
+                                      /* @__PURE__ */ jsxRuntime.jsx(
+                                        designSystem.IconButton,
+                                        {
+                                          label: t("editor.field-up", "Move up"),
+                                          onClick: () => moveField(stepIndex, fieldIndex, -1),
+                                          disabled: stepIndex === 0 && fieldIndex === 0,
+                                          children: /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowUp, {})
+                                        }
+                                      ),
+                                      /* @__PURE__ */ jsxRuntime.jsx(
+                                        designSystem.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__ */ jsxRuntime.jsx(icons.ArrowDown, {})
+                                        }
+                                      ),
+                                      /* @__PURE__ */ jsxRuntime.jsx(
+                                        designSystem.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__ */ jsxRuntime.jsx(icons.Trash, {})
+                                        }
+                                      )
+                                    ] })
+                                  ] })
+                                }
+                              )
+                            },
+                            field.id
+                          );
+                        }) }) }),
                         /* @__PURE__ */ jsxRuntime.jsx(
                           designSystem.Button,
                           {
@@ -1060,7 +1164,7 @@ const FormEditor = () => {
                 )
               },
               step.id
-            ))
+            )) })
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(