strapi-plugin-hubspot 0.16.0 → 0.16.2

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 ## Unreleased
 
+## 0.16.2 — 2026-09-22
+
+### Added
+- **Resync from HubSpot** in the form editor (and a safer list re-import):
+  mapped fields update in place (label, type, required, options), new HubSpot
+  fields append to the last step, Strapi steps / conditions / extra fields
+  stay. Matching uses the linked form GUID rather than the slug.
+
+## 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

package/README.md

@@ -174,10 +174,10 @@ the portal. The translation carries over what the builder can express:
 - dependent fields become `visibleIf` conditions (value lists are expanded
   into OR'd/AND'd rules).
 
-Everything else — file uploads, hidden fields, content blocks, GDPR consent
-blocks, an operator with no equivalent — is **skipped and reported** after the
-import, so nothing is silently half-migrated. The HubSpot original is never
-modified; re-importing overwrites the draft, never the published version.
+The HubSpot original is never modified. Re-importing (or **Resync from HubSpot**
+in the editor) updates mapped fields in place and appends new ones — Strapi
+steps, conditions and extra fields stay. Matching is by HubSpot form GUID,
+then slug. The published version is never touched.
 
 ### i18n and publishing
 

package/dist/_chunks/{Forms-6EoEYzAc.mjs → Forms-BOQWely0.mjs}

@@ -5,12 +5,12 @@ import { u as useIntl } from "./index-CEh8vkxY.mjs";
 import { Typography, Flex, Box, SingleSelect, SingleSelectOption, MultiSelect, MultiSelectOption, TextInput, IconButton, Button, Combobox, ComboboxOption, Field, Textarea, Checkbox, Divider, Loader, Badge, Table, Thead, Tr, Th, Tbody, Td, Modal } from "@strapi/design-system";
 import { Trash, Plus, ArrowClockwise, ArrowLeft, Drag, ArrowUp, ArrowDown, List, Duplicate, Download } from "@strapi/icons";
 import { useFetchClient } from "@strapi/strapi/admin";
-import { g as getTranslation, P as PLUGIN_ID } from "./index-7cL9PRh1.mjs";
-import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, closestCenter } from "@dnd-kit/core";
-import { sortableKeyboardCoordinates, SortableContext, verticalListSortingStrategy, useSortable, arrayMove } from "@dnd-kit/sortable";
+import { g as getTranslation, P as PLUGIN_ID } from "./index-CLAy5dVN.mjs";
+import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, useDroppable, closestCorners } from "@dnd-kit/core";
+import { arrayMove, sortableKeyboardCoordinates, SortableContext, verticalListSortingStrategy, useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
-import { o as objectLabel } from "./objectLabels-Dnj14fsp.mjs";
-import { u as useHubspotSchema } from "./useHubspotSchema-BsmQgJgx.mjs";
+import { o as objectLabel } from "./objectLabels--zOmqsfm.mjs";
+import { u as useHubspotSchema } from "./useHubspotSchema-Bz2o1BU-.mjs";
 const OPERATORS = [
   "eq",
   "neq",
@@ -153,32 +153,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 index = next[i].fields.findIndex((field2) => field2.id === fieldId);
+    if (index !== -1) {
+      fromStep = i;
+      fromIndex = index;
+      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 index = next[i].fields.findIndex((field2) => field2.id === overId);
+      if (index !== -1) {
+        toStep = i;
+        toIndex = index;
+        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 = 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 closestCorners({ ...args, droppableContainers });
+};
+function SortableBoard({
+  children,
+  onDragEnd
 }) {
   const sensors = useSensors(
     // An 8px activation distance keeps clicks (selection!) from starting drags.
     useSensor(PointerSensor, { activationConstraint: { distance: 8 } }),
     useSensor(KeyboardSensor, { coordinateGetter: 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(arrayMove(ids, from, to));
-  };
-  return /* @__PURE__ */ jsx(DndContext, { sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, children: /* @__PURE__ */ jsx(SortableContext, { items: ids, strategy: verticalListSortingStrategy, children }) });
+  return /* @__PURE__ */ jsx(DndContext, { sensors, collisionDetection, onDragEnd, children });
+}
+function SortableGroup({
+  ids,
+  children
+}) {
+  return /* @__PURE__ */ jsx(SortableContext, { items: ids, strategy: verticalListSortingStrategy, children });
+}
+function SortableContainer({
+  stepId,
+  children
+}) {
+  const { setNodeRef, isOver } = useDroppable({
+    id: `container:${stepId}`,
+    data: { type: "container", stepId }
+  });
+  return /* @__PURE__ */ 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 } = useSortable({
-    id
+    id,
+    data
   });
   return /* @__PURE__ */ jsx(
     "div",
@@ -824,6 +899,40 @@ const FormEditor = () => {
       setBusy(false);
     }
   };
+  const resync = async () => {
+    if (dirty && !await save()) return;
+    setBusy(true);
+    setFeedback(null);
+    try {
+      const { data } = await post(`/${PLUGIN_ID}/builder/forms/${documentId}/resync${query}`);
+      if (data.form) {
+        setEntry(data.form);
+        setDirty(false);
+      }
+      const added = data.added?.length ?? 0;
+      const updated = data.updated?.length ?? 0;
+      const skipped = data.skipped?.length ?? 0;
+      setFeedback({
+        tone: "success",
+        text: skipped > 0 ? t(
+          "editor.resynced-gaps",
+          "Resynced from HubSpot — {updated, plural, one {# updated} other {# updated}}, {added, plural, one {# added} other {# added}}, {skipped, plural, one {# skipped} other {# skipped}}.",
+          { updated, added, skipped }
+        ) : t(
+          "editor.resynced",
+          "Resynced from HubSpot — {updated, plural, one {# field updated} other {# fields updated}}, {added, plural, one {# added} other {# added}}.",
+          { updated, added }
+        )
+      });
+    } catch {
+      setFeedback({
+        tone: "danger",
+        text: t("editor.resync-error", "Could not resync from HubSpot — is the form still linked?")
+      });
+    } finally {
+      setBusy(false);
+    }
+  };
   const fieldFlags = (fieldId) => ({
     error: errors.find((e) => e.fieldId === fieldId),
     problem: problems.find((p) => p.fieldId === fieldId)
@@ -861,6 +970,15 @@ const FormEditor = () => {
           }
         ),
         /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: save, disabled: busy || !dirty, children: t("editor.save", "Save") }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "tertiary",
+            onClick: resync,
+            disabled: busy || !entry.hubspotFormId,
+            children: t("editor.resync", "Resync from HubSpot")
+          }
+        ),
         /* @__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") })
       ] })
@@ -869,14 +987,28 @@ const FormEditor = () => {
     /* @__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: [
         /* @__PURE__ */ jsx(
-          SortableList,
+          SortableBoard,
           {
-            ids: definition.steps.map((s) => s.id),
-            onReorder: (ids) => patchDefinition((steps) => reorderByIds(steps, ids)),
-            children: definition.steps.map((step, stepIndex) => /* @__PURE__ */ 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, arrayMove(ids, from, to)));
+                return;
+              }
+              if (kind === "field") {
+                patchDefinition((steps) => relocateField(steps, String(active.id), String(over.id)));
+              }
+            },
+            children: /* @__PURE__ */ jsx(SortableGroup, { ids: definition.steps.map((s) => s.id), children: definition.steps.map((step, stepIndex) => /* @__PURE__ */ jsx(
               SortableItem,
               {
                 id: step.id,
+                data: { type: "step" },
                 children: (stepHandle) => /* @__PURE__ */ jsxs(
                   Box,
                   {
@@ -952,95 +1084,89 @@ const FormEditor = () => {
                         ] })
                       ] }),
                       /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 2, children: [
-                        /* @__PURE__ */ 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__ */ jsx(
-                                SortableItem,
+                        /* @__PURE__ */ jsx(SortableContainer, { stepId: step.id, children: /* @__PURE__ */ 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__ */ jsx(
+                            SortableItem,
+                            {
+                              id: field.id,
+                              data: { type: "field", stepId: step.id },
+                              children: (fieldHandle) => /* @__PURE__ */ jsx(
+                                Box,
                                 {
-                                  id: field.id,
-                                  children: (fieldHandle) => /* @__PURE__ */ jsx(
-                                    Box,
-                                    {
-                                      background: isSelected ? "primary100" : "neutral100",
-                                      hasRadius: true,
-                                      padding: 3,
-                                      onClick: (e) => {
-                                        e.stopPropagation();
-                                        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(
-                                            "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__ */ jsx(Drag, {})
-                                            }
-                                          ),
-                                          /* @__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
-                              );
-                            })
-                          }
-                        ),
+                                  background: isSelected ? "primary100" : "neutral100",
+                                  hasRadius: true,
+                                  padding: 3,
+                                  onClick: (e) => {
+                                    e.stopPropagation();
+                                    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(
+                                        "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__ */ jsx(Drag, {})
+                                        }
+                                      ),
+                                      /* @__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,
                           {
@@ -1061,7 +1187,7 @@ const FormEditor = () => {
                 )
               },
               step.id
-            ))
+            )) })
           }
         ),
         /* @__PURE__ */ jsx(
@@ -1228,7 +1354,7 @@ const FormEditor = () => {
           ),
           /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: t(
             "editor.hubspot-form-hint",
-            "Submissions go through HubSpot’s Forms API so they count as conversions. Switch the connected portal (test → production) and pick the matching form — nothing is hardcoded."
+            "Submissions go through HubSpot’s Forms API so they count as conversions. After you change the form in HubSpot, use Resync from HubSpot — mapped fields update in place, new ones are appended, your steps stay."
           ) })
         ] }),
         /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: t(
@@ -1407,7 +1533,7 @@ const FormsList = () => {
           /* @__PURE__ */ jsx(Typography, { variant: "delta", tag: "h2", children: t("forms.import-hubspot-title", "Import from your HubSpot portal") }),
           /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", tag: "p", children: t(
             "forms.import-hubspot-hint",
-            "Translates a form built in HubSpot into a draft here, CRM mapping included. What the builder can't express is skipped and reported. Re-importing overwrites the draft."
+            "Translates a form built in HubSpot into a draft here, CRM mapping included. What the builder can't express is skipped and reported. Re-importing updates mapped fields in place and appends new ones."
           ) })
         ] }),
         /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [