strapi-plugin-hubspot 0.15.0 → 0.16.1

package/dist/_chunks/{Forms-B7eIm0Fi.mjs → Forms-DEoZGrEt.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-BSJAhj8r.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-gKM4jVf8.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-CrYRzsqe.mjs";
-import { u as useHubspotSchema } from "./useHubspotSchema-CBF4GkmK.mjs";
+import { o as objectLabel } from "./objectLabels-DQpSLUaJ.mjs";
+import { u as useHubspotSchema } from "./useHubspotSchema-CE7tJgOM.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",
@@ -774,11 +849,32 @@ const FormEditor = () => {
     setBusy(true);
     setFeedback(null);
     try {
-      await post(`/${PLUGIN_ID}/builder/forms/${documentId}/publish${query}`);
+      const { data } = await post(`/${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 ?? []);
@@ -848,14 +944,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,
                   {
@@ -931,95 +1041,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,
                           {
@@ -1040,7 +1144,7 @@ const FormEditor = () => {
                 )
               },
               step.id
-            ))
+            )) })
           }
         ),
         /* @__PURE__ */ jsx(

package/dist/_chunks/{HubspotFormInput-Do7F83V6.js → HubspotFormInput-4ZMYXWM_.js}

@@ -5,7 +5,7 @@ const React = require("react");
 const index = require("./index-DkTxsEqL.js");
 const designSystem = require("@strapi/design-system");
 const admin = require("@strapi/strapi/admin");
-const index$1 = require("./index-BpcilDy1.js");
+const index$1 = require("./index-ciliGv0E.js");
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });

package/dist/_chunks/{HubspotFormInput-cZAiaAaq.mjs → HubspotFormInput-CPep55GL.mjs}

@@ -3,7 +3,7 @@ import * as React from "react";
 import { u as useIntl } from "./index-CEh8vkxY.mjs";
 import { Field, Flex, Loader, Combobox, ComboboxOption } from "@strapi/design-system";
 import { useFetchClient } from "@strapi/strapi/admin";
-import { P as PLUGIN_ID, g as getTranslation } from "./index-BSJAhj8r.mjs";
+import { P as PLUGIN_ID, g as getTranslation } from "./index-gKM4jVf8.mjs";
 const HubspotFormInput = React.forwardRef(
   ({ name, value, onChange, disabled, error, required, label, hint, labelAction }, ref) => {
     const { formatMessage } = useIntl();

package/dist/_chunks/{HubspotObjectInput-DWqk2C26.js → HubspotObjectInput-BTqYXJIa.js}

@@ -4,9 +4,9 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const index = require("./index-DkTxsEqL.js");
 const designSystem = require("@strapi/design-system");
-const index$1 = require("./index-BpcilDy1.js");
-const objectLabels = require("./objectLabels-CYXXFpNB.js");
-const useHubspotSchema = require("./useHubspotSchema-Ba6xZUCL.js");
+const index$1 = require("./index-ciliGv0E.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" } });

package/dist/_chunks/{HubspotObjectInput-ZZk_7hWq.mjs → HubspotObjectInput-CQszIx1W.mjs}

@@ -2,9 +2,9 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { u as useIntl } from "./index-CEh8vkxY.mjs";
 import { Field, Flex, Loader, SingleSelect, SingleSelectOption } from "@strapi/design-system";
-import { g as getTranslation } from "./index-BSJAhj8r.mjs";
-import { o as objectLabel } from "./objectLabels-CrYRzsqe.mjs";
-import { u as useHubspotSchema } from "./useHubspotSchema-CBF4GkmK.mjs";
+import { g as getTranslation } from "./index-gKM4jVf8.mjs";
+import { o as objectLabel } from "./objectLabels-DQpSLUaJ.mjs";
+import { u as useHubspotSchema } from "./useHubspotSchema-CE7tJgOM.mjs";
 const HubspotObjectInput = React.forwardRef(
   ({ name, value, onChange, disabled, error, required, label, hint, labelAction }, ref) => {
     const intl = useIntl();

package/dist/_chunks/{HubspotPropertyInput-v9B3wb1a.js → HubspotPropertyInput-2MgIKlR_.js}

@@ -6,9 +6,9 @@ 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 objectLabels = require("./objectLabels-CYXXFpNB.js");
-const useHubspotSchema = require("./useHubspotSchema-Ba6xZUCL.js");
+const index$1 = require("./index-ciliGv0E.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" } });

package/dist/_chunks/{HubspotPropertyInput-5bkDGmGo.mjs → HubspotPropertyInput-ClNph0f1.mjs}

@@ -4,9 +4,9 @@ import { u as useIntl } from "./index-CEh8vkxY.mjs";
 import { Field, Flex, Loader, Combobox, ComboboxOption, IconButton, Button, Typography, Link } from "@strapi/design-system";
 import { ArrowClockwise } from "@strapi/icons";
 import { useField } from "@strapi/strapi/admin";
-import { g as getTranslation } from "./index-BSJAhj8r.mjs";
-import { o as objectLabel } from "./objectLabels-CrYRzsqe.mjs";
-import { u as useHubspotSchema } from "./useHubspotSchema-CBF4GkmK.mjs";
+import { g as getTranslation } from "./index-gKM4jVf8.mjs";
+import { o as objectLabel } from "./objectLabels-DQpSLUaJ.mjs";
+import { u as useHubspotSchema } from "./useHubspotSchema-CE7tJgOM.mjs";
 const oneLine = {
   display: "block",
   whiteSpace: "nowrap",

package/dist/_chunks/{Settings-QcFbm3s5.mjs → Settings-CZ-qQSKT.mjs}

@@ -1,11 +1,11 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { u as useIntl } from "./index-CEh8vkxY.mjs";
-import { Flex, Divider, Typography, Button, Box, Link, Badge, Loader, Field, SingleSelect, SingleSelectOption } from "@strapi/design-system";
+import { Flex, Divider, Typography, Button, Box, Link, Badge, Loader, Field, SingleSelect, SingleSelectOption, Checkbox } from "@strapi/design-system";
 import { useFetchClient } from "@strapi/strapi/admin";
-import { g as getTranslation, P as PLUGIN_ID } from "./index-BSJAhj8r.mjs";
+import { g as getTranslation, P as PLUGIN_ID } from "./index-gKM4jVf8.mjs";
 import { Link as Link$1 } from "react-router-dom";
-import { o as objectLabel } from "./objectLabels-CrYRzsqe.mjs";
+import { o as objectLabel } from "./objectLabels-DQpSLUaJ.mjs";
 const AuditSection = ({ configured }) => {
   const intl = useIntl();
   const { formatMessage } = intl;
@@ -181,6 +181,9 @@ const HubspotSettings = () => {
   const [portalId, setPortalId] = React.useState("");
   const [region, setRegion] = React.useState("eu1");
   const [defaultFormId, setDefaultFormId] = React.useState("");
+  const [submissionMode, setSubmissionMode] = React.useState("auto");
+  const [writeExtraProperties, setWriteExtraProperties] = React.useState(true);
+  const [syncFieldsOnPublish, setSyncFieldsOnPublish] = React.useState(false);
   const [forms, setForms] = React.useState([]);
   const [busy, setBusy] = React.useState(false);
   const [feedback, setFeedback] = React.useState(
@@ -192,6 +195,9 @@ const HubspotSettings = () => {
     setPortalId(data.portalId ?? "");
     setRegion(data.region || "eu1");
     setDefaultFormId(data.defaultFormId ?? "");
+    setSubmissionMode(data.submissionMode === "crm" || data.submissionMode === "forms" ? data.submissionMode : "auto");
+    setWriteExtraProperties(data.writeExtraProperties !== false);
+    setSyncFieldsOnPublish(data.syncFieldsOnPublish === true);
     setForms(Array.isArray(data.forms) ? data.forms : []);
   };
   const load = React.useCallback(async () => {
@@ -211,7 +217,10 @@ const HubspotSettings = () => {
         ...apiKey.trim() ? { apiKey: apiKey.trim() } : {},
         portalId,
         region,
-        defaultFormId
+        defaultFormId,
+        submissionMode,
+        writeExtraProperties,
+        syncFieldsOnPublish
       });
       setApiKey("");
       await load();
@@ -381,7 +390,71 @@ const HubspotSettings = () => {
             sourceHint(settings.formSource)
           ]
         }
-      )
+      ),
+      /* @__PURE__ */ jsx(Typography, { variant: "delta", children: t("settings.policy.title", "How submissions reach HubSpot") }),
+      /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: t(
+        "settings.policy.hint",
+        "Pick the policy that matches this portal. Defaults stay safe for every install: conversions when a form is linked, leftover answers still written on the contact, HubSpot forms never mutated unless you ask."
+      ) }),
+      /* @__PURE__ */ jsxs(
+        Field.Root,
+        {
+          name: "submissionMode",
+          hint: t(
+            "settings.mode.hint",
+            "Automatic uses the marketing form when one is linked, otherwise a CRM upsert. CRM-only never counts as a conversion. Forms-only prefers the Forms API and falls back to the CRM if HubSpot refuses the submit."
+          ),
+          children: [
+            /* @__PURE__ */ jsx(Field.Label, { children: t("settings.mode.label", "Submission path") }),
+            /* @__PURE__ */ jsxs(
+              SingleSelect,
+              {
+                value: submissionMode,
+                onChange: (value) => {
+                  const next = String(value);
+                  if (next === "crm" || next === "forms" || next === "auto") setSubmissionMode(next);
+                },
+                children: [
+                  /* @__PURE__ */ jsx(SingleSelectOption, { value: "auto", children: t("settings.mode.auto", "Automatic — form conversion if linked, else CRM") }),
+                  /* @__PURE__ */ jsx(SingleSelectOption, { value: "forms", children: t("settings.mode.forms", "Marketing form — native HubSpot conversions") }),
+                  /* @__PURE__ */ jsx(SingleSelectOption, { value: "crm", children: t("settings.mode.crm", "CRM only — upsert the contact, no form conversion") })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(Field.Hint, {})
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          checked: writeExtraProperties,
+          onCheckedChange: (checked) => setWriteExtraProperties(checked === true),
+          children: t(
+            "settings.extra.label",
+            "After a conversion, also write mapped contact fields that the HubSpot form doesn't have"
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: t(
+        "settings.extra.hint",
+        "The Forms API drops unknown fields (they 400 the submit). With this on, leftovers still land on the contact. Turn it off if HubSpot must only receive what the marketing form declares."
+      ) }),
+      /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          checked: syncFieldsOnPublish,
+          onCheckedChange: (checked) => setSyncFieldsOnPublish(checked === true),
+          children: t(
+            "settings.sync.label",
+            "On publish, add mapped contact fields that are missing on the HubSpot form"
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: t(
+        "settings.sync.hint",
+        "Strapi-first installs: a field added here appears on the HubSpot form next publish. HubSpot-first installs should leave this off — importing a form already carries its fields. Properties themselves are never created; map to ones that exist in the portal."
+      ) })
     ] }) }),
     /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
       /* @__PURE__ */ jsx(Button, { onClick: save, loading: busy, children: t("settings.save", "Save") }),