strapi-plugin-hubspot 0.11.1 → 0.13.1

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # Changelog
 
+## Unreleased
+
+## 0.13.1 — 2026-09-21
+
+### Added
+- **GDPR proof on submissions.** `meta.consent` / `meta.consentedAt` sent by
+  the frontend are stored on the submission row and written on the HubSpot
+  timeline note. They are not CRM properties — an unknown HubSpot key would
+  fail the whole upsert. Rebuild HubSpot's native legal-consent block as a
+  required checkbox named `consent` (see README).
+
+## 0.13.0 — 2026-08-31
+
+### Added
+- **Drag & drop in the builder** (@dnd-kit): steps reorder among themselves,
+  fields reorder within their step — grab the grip handle; an 8px activation
+  distance keeps plain clicks selecting as before. The arrow buttons stay:
+  they remain the accessible path and the way to slide a field into the
+  neighbouring step.
+
+### Also in this release — anti-spam & frozen contract
+- **Per-IP rate limiting** on the public routes (sliding window, in-memory):
+  submissions 6/min, company searches 30/min — `forms.rateLimit`
+  config, `0` disables one. Over the limit → `429`.
+- **Honeypot**: a submission whose hidden `__hp` key is filled gets a normal
+  success and is neither sent nor stored — no signal for the bot to adapt to.
+  (Frontends: render a visually hidden `__hp` input.)
+- **Contract test suite** freezing the 1.0 public surface: public form
+  payload keys, CRM mappings never leaked, submission conventions
+  (`__siret`/`__company`/`__hp`, structured `missingRequired`), the 12
+  condition operators. A failure there means "bump the major".
+- README: *Stability & versioning* section documenting the frozen contract
+  and the `version: 2` migration promise.
+
 ## 0.11.1 — 2026-08-29
 
 Ships the company-search sharpening that missed the 0.11.0 tarball (the

package/README.md

@@ -66,6 +66,33 @@ Every submission is stored in **HubSpot form submissions** (Content Manager),
 synced or not, with the CRM ids when the sync succeeded — the source of truth
 lives in your database, not in HubSpot's availability.
 
+### GDPR consent
+
+HubSpot's native *legal consent* block is **not** a CRM field. Importing a
+HubSpot form skips it (you'll see "rebuild it as a field") because this
+builder maps answers onto Contact/Company properties, and an unknown property
+makes HubSpot reject the whole upsert.
+
+To connect consent so the CRM and Strapi both keep a proof:
+
+1. **In HubSpot** (Settings → Properties → Contact), create a checkbox
+   property, e.g. `rgpd_consent`. Optionally a datetime `rgpd_consented_at`.
+2. **In the form builder** (Admin → HubSpot Forms), last step: add a
+   **Checkbox**, name it `consent` (that name is what the site recognizes —
+   it will not inject a second box), mark it **required**.
+3. **Map it**: Object = Contact, property = `rgpd_consent`. The visitor's tick
+   then lands on the contact. Leave `consentedAt` unmapped; the frontend
+   sends it in `meta.consentedAt`, stored on the submission and on the
+   timeline note.
+4. **Publish** the form. The public submit pipeline already refuses a payload
+   without consent when the site is in front (Nuxt BFF). Direct calls to
+   `/api/hubspot/forms/:slug/submit` still accept a form that has no consent
+   field — add the checkbox so required-field validation covers them too.
+
+The newsletter block on the site is **not** a HubSpot form: it upserts the
+email as a contact and writes a timeline note with the consent timestamp.
+No form to create in the builder for that one.
+
 ### Browsing submissions
 
 The **Submissions** button on the forms list (also reachable from a form's
@@ -342,6 +369,24 @@ authenticated admin, since the picker needs it in the Content Manager.
 > reaches the browser, but treat it like any other secret in your database. Use
 > `HUBSPOT_API_KEY` if your deployment already manages secrets properly.
 
+## Stability & versioning
+
+From 1.0 onward this plugin follows semver against a **frozen public
+contract**, enforced by a dedicated test suite (`contract.test.ts`):
+
+- the **definition document** (`version: 1`): steps → fields → `visibleIf`
+  conditions, the 12 operators, stable `stp_`/`fld_` ids;
+- the **public API payloads**: `GET /forms/:slug` (rendering props served,
+  CRM mappings never), `POST /forms/:slug/submit` and its structured 422,
+  `GET /company-search`;
+- the **submission conventions**: values keyed by field `name`, company
+  companion keys `<name>__siret` / `<name>__company`, honeypot `__hp`;
+- the exported types (`strapi-plugin-hubspot/types`).
+
+Anything else — admin UI, internals, HubSpot plumbing — may improve in minor
+versions. Breaking any of the above means a major version, and a `version: 2`
+definition would ship with an automatic migration from `version: 1`.
+
 ## Install
 
 ```bash

package/dist/_chunks/{Forms-DadTbe9Q.mjs → Forms-CHB-sKem.mjs}

@@ -3,11 +3,14 @@ import { useParams, useSearchParams, Link, useNavigate, Routes, Route } from "re
 import * as React from "react";
 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, ArrowUp, ArrowDown, List, Duplicate, Download } from "@strapi/icons";
+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-DA31TY2n.mjs";
-import { o as objectLabel } from "./objectLabels-Bl7sO5pb.mjs";
-import { u as useHubspotSchema } from "./useHubspotSchema-BlDilCHc.mjs";
+import { g as getTranslation, P as PLUGIN_ID } from "./index-BE2ribUL.mjs";
+import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, closestCenter } from "@dnd-kit/core";
+import { sortableKeyboardCoordinates, SortableContext, verticalListSortingStrategy, useSortable, arrayMove } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { o as objectLabel } from "./objectLabels-DGJxYjKz.mjs";
+import { u as useHubspotSchema } from "./useHubspotSchema-e31UsYb2.mjs";
 const OPERATORS = [
   "eq",
   "neq",
@@ -150,6 +153,48 @@ const ConditionEditor = ({ condition, candidates, onChange }) => {
     ] })
   ] });
 };
+function SortableList({
+  ids,
+  onReorder,
+  children
+}) {
+  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 }) });
+}
+function SortableItem({
+  id,
+  children
+}) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id
+  });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: setNodeRef,
+      style: {
+        transform: CSS.Transform.toString(transform),
+        transition,
+        opacity: isDragging ? 0.5 : void 0,
+        zIndex: isDragging ? 2 : void 0,
+        position: "relative"
+      },
+      children: children({ attributes, listeners })
+    }
+  );
+}
 const FIELD_TYPES = [
   "text",
   "email",
@@ -672,6 +717,10 @@ const FormEditor = () => {
     }
     return next;
   });
+  function reorderByIds(items, ids) {
+    const byId = new Map(items.map((item) => [item.id, item]));
+    return ids.map((id) => byId.get(id)).filter((item) => Boolean(item));
+  }
   const moveStep = (stepIndex, delta) => patchDefinition((steps) => {
     const target = stepIndex + delta;
     if (target < 0 || target >= steps.length) return steps;
@@ -793,154 +842,202 @@ const FormEditor = () => {
     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,
+        /* @__PURE__ */ jsx(
+          SortableList,
           {
-            background: "neutral0",
-            hasRadius: true,
-            shadow: "tableShadow",
-            padding: 4,
-            onClick: () => setSelection({ kind: "step", stepId: step.id }),
-            style: { cursor: "pointer" },
-            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,
+            ids: definition.steps.map((s) => s.id),
+            onReorder: (ids) => patchDefinition((steps) => reorderByIds(steps, ids)),
+            children: definition.steps.map((step, stepIndex) => /* @__PURE__ */ jsx(
+              SortableItem,
+              {
+                id: step.id,
+                children: (stepHandle) => /* @__PURE__ */ jsxs(
+                  Box,
                   {
-                    gap: 2,
-                    alignItems: "center",
+                    background: "neutral0",
+                    hasRadius: true,
+                    shadow: "tableShadow",
+                    padding: 4,
                     onClick: () => setSelection({ kind: "step", stepId: step.id }),
                     style: { cursor: "pointer" },
+                    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(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, onClick: (e) => e.stopPropagation(), 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: (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(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, { 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__ */ jsx(
+                                "span",
+                                {
+                                  ...stepHandle.attributes,
+                                  ...stepHandle.listeners,
+                                  onClick: (e) => e.stopPropagation(),
+                                  style: { cursor: "grab", display: "inline-flex", color: "inherit" },
+                                  "aria-label": t("editor.drag-step", "Drag to reorder the step"),
+                                  children: /* @__PURE__ */ jsx(Drag, {})
+                                }
+                              ),
+                              /* @__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, 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,
+                              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.field-down", "Move down"),
-                              onClick: () => moveField(stepIndex, fieldIndex, 1),
-                              disabled: stepIndex === definition.steps.length - 1 && fieldIndex === step.fields.length - 1,
+                              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.field-delete", "Delete the field"),
+                              label: t("editor.step-delete", "Delete the step and its fields"),
                               onClick: () => {
                                 setSelection({ kind: "form" });
-                                patchStep(step.id, {
-                                  fields: step.fields.filter((f) => f.id !== field.id)
-                                });
+                                patchDefinition((steps) => steps.filter((s) => s.id !== step.id));
                               },
                               children: /* @__PURE__ */ jsx(Trash, {})
                             }
                           )
                         ] })
+                      ] }),
+                      /* @__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,
+                                {
+                                  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
+                              );
+                            })
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Button,
+                          {
+                            variant: "tertiary",
+                            startIcon: /* @__PURE__ */ jsx(Plus, {}),
+                            onClick: (e) => {
+                              e.stopPropagation();
+                              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")
+                          }
+                        )
                       ] })
-                    },
-                    field.id
-                  );
-                }),
-                /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    variant: "tertiary",
-                    startIcon: /* @__PURE__ */ jsx(Plus, {}),
-                    onClick: (e) => {
-                      e.stopPropagation();
-                      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
-        )),
+              },
+              step.id
+            ))
+          }
+        ),
         /* @__PURE__ */ jsx(
           Button,
           {