strapi-plugin-hubspot 0.8.0 → 0.10.0

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # Changelog
 
+## 0.10.0 — 2026-08-29
+
+### Added — HubSpot-parity condition operators
+- `in` / `notIn` ("is any of" / "is none of"): one rule matching several
+  values — a multi-select over the referenced field's options in the editor
+  (comma-separated input when the field has none). Closes the gap that
+  previously required stacking OR'd `eq` rules.
+- `notContains`, `startsWith`, `endsWith` — case-insensitive, like `contains`.
+- Structural validation flags an `in`/`notIn` rule with no values, like the
+  other comparators; switching operator clears the stale value shape.
+
+Frontends mirroring the engine client-side must add the five operators (the
+typed `Operator` union in `strapi-plugin-hubspot/types` is the reference —
+the server remains the authority at submission either way).
+
+## 0.9.0 — 2026-08-29
+
+### Added
+- **Import from HubSpot**: forms built in HubSpot (marketing v3 Forms API,
+  `forms` read scope) can be translated into builder drafts — fields, options,
+  two-per-row layouts and dependent-field conditions carried over, with a
+  **CRM mapping that is valid on arrival** since a HubSpot form field is a CRM
+  property. What the builder can't express (file uploads, hidden fields,
+  content blocks, GDPR consent, exotic operators) is skipped and **reported**
+  after the import instead of silently dropped. Re-importing overwrites the
+  draft; the HubSpot original is never touched.
+- **Submissions browser**: a Submissions page in the admin (button on the
+  forms list + per-form counts in the table) — newest first, filterable by
+  form, sync state at a glance, full answers in a modal, and a per-form
+  **CSV export** whose columns follow the field order of the form (historical
+  keys appended, never dropped).
+- Admin routes: `GET/POST /hubspot/builder/import/hubspot`,
+  `GET /hubspot/builder/submissions`, `GET /hubspot/builder/submissions/export`
+  (all RBAC-gated by `plugin::hubspot.forms`); the forms list now carries a
+  `submissions` count per row.
+
 ## 0.8.0 — 2026-08-29
 
 ### Improved (builder UX pass, from a live session)

package/README.md

@@ -66,6 +66,16 @@ 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.
 
+### Browsing submissions
+
+The **Submissions** button on the forms list (also reachable from a form's
+count in the table) opens the submissions browser: every stored answer,
+newest first, filterable by form, with the sync state at a glance and the
+full answer set one click away. **Export CSV** downloads one form's whole
+history — columns follow the form's field order, and keys found only in older
+submissions (a renamed or removed field) are appended rather than dropped.
+Deleting stays in the Content Manager, where the type remains visible.
+
 Typed payloads for your frontend:
 
 ```ts
@@ -99,6 +109,24 @@ never modified, re-importing overwrites the draft only, and unpublishing rolls
 a migrated form back. Migrate form by form; the validation middleware keeps
 protecting the ones that stay.
 
+### Importing forms from HubSpot
+
+Forms built **in HubSpot itself** can be imported too — give the private app
+token the `forms` read scope and the list page offers every regular form of
+the portal. The translation carries over what the builder can express:
+
+- fields, labels, placeholders, help texts, required flags and options —
+  and since a HubSpot form field *is* a CRM property, the imported form
+  arrives with a **mapping that is already valid** for the portal;
+- two-fields-per-row layouts become two half-width fields;
+- 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.
+
 ### i18n and publishing
 
 Forms are draft & publish, localized like your content: `name` and `slug` are

package/dist/_chunks/{Forms-77Mornxt.mjs → Forms-BGdNbq-k.mjs}

@@ -1,15 +1,38 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useParams, useSearchParams, Link, useNavigate, Routes, Route } from "react-router-dom";
 import * as React from "react";
 import { u as useIntl } from "./index-CEh8vkxY.mjs";
-import { Typography, Flex, Box, SingleSelect, SingleSelectOption, TextInput, IconButton, Button, Field, Checkbox, Divider, Combobox, ComboboxOption, Loader, Badge, Textarea, Table, Thead, Tr, Th, Tbody, Td } from "@strapi/design-system";
-import { Trash, Plus, ArrowClockwise, ArrowLeft, ArrowUp, ArrowDown, Duplicate } from "@strapi/icons";
+import { Typography, Flex, Box, SingleSelect, SingleSelectOption, MultiSelect, MultiSelectOption, TextInput, IconButton, Button, Field, Checkbox, Divider, Combobox, ComboboxOption, Loader, Badge, Textarea, 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 { useFetchClient } from "@strapi/strapi/admin";
-import { g as getTranslation, P as PLUGIN_ID } from "./index-LrCSAHoH.mjs";
-import { o as objectLabel } from "./objectLabels-yNrnTOBo.mjs";
-import { u as useHubspotSchema } from "./useHubspotSchema-DccG2KbZ.mjs";
-const OPERATORS = ["eq", "neq", "contains", "empty", "notEmpty", "gt", "lt"];
-const NEEDS_VALUE = /* @__PURE__ */ new Set(["eq", "neq", "contains", "gt", "lt"]);
+import { g as getTranslation, P as PLUGIN_ID } from "./index-BpapRdHX.mjs";
+import { o as objectLabel } from "./objectLabels-DQYwGDr3.mjs";
+import { u as useHubspotSchema } from "./useHubspotSchema-DX4JTPFt.mjs";
+const OPERATORS = [
+  "eq",
+  "neq",
+  "in",
+  "notIn",
+  "contains",
+  "notContains",
+  "startsWith",
+  "endsWith",
+  "empty",
+  "notEmpty",
+  "gt",
+  "lt"
+];
+const NEEDS_VALUE = /* @__PURE__ */ new Set([
+  "eq",
+  "neq",
+  "contains",
+  "notContains",
+  "startsWith",
+  "endsWith",
+  "gt",
+  "lt"
+]);
+const NEEDS_VALUES = /* @__PURE__ */ new Set(["in", "notIn"]);
 const ConditionEditor = ({ condition, candidates, onChange }) => {
   const { formatMessage } = useIntl();
   const t = (id, defaultMessage) => formatMessage({ id: getTranslation(id), defaultMessage });
@@ -20,7 +43,12 @@ const ConditionEditor = ({ condition, candidates, onChange }) => {
     empty: t("condition.op.empty", "is empty"),
     notEmpty: t("condition.op.notEmpty", "is filled"),
     gt: t("condition.op.gt", "is greater than"),
-    lt: t("condition.op.lt", "is less than")
+    lt: t("condition.op.lt", "is less than"),
+    in: t("condition.op.in", "is any of"),
+    notIn: t("condition.op.notIn", "is none of"),
+    notContains: t("condition.op.notContains", "doesn't contain"),
+    startsWith: t("condition.op.startsWith", "starts with"),
+    endsWith: t("condition.op.endsWith", "ends with")
   };
   const rules = condition?.rules ?? [];
   const logic = condition?.logic ?? "and";
@@ -54,10 +82,31 @@ const ConditionEditor = ({ condition, candidates, onChange }) => {
           {
             "aria-label": t("condition.operator", "Operator"),
             value: rule.operator,
-            onChange: (v) => updateRule(index, { operator: v }),
+            onChange: (v) => updateRule(index, { operator: v, value: "", values: [] }),
             children: OPERATORS.map((op) => /* @__PURE__ */ jsx(SingleSelectOption, { value: op, children: opLabel[op] }, op))
           }
         ) }),
+        NEEDS_VALUES.has(rule.operator) && /* @__PURE__ */ jsx(Box, { flex: "1", minWidth: "140px", children: targetOptions.length ? /* @__PURE__ */ jsx(
+          MultiSelect,
+          {
+            "aria-label": t("condition.values", "Values"),
+            value: rule.values ?? [],
+            withTags: true,
+            onChange: (values) => updateRule(index, { values }),
+            children: targetOptions.map((o) => /* @__PURE__ */ jsx(MultiSelectOption, { value: o.value, children: o.label || o.value }, o.value))
+          }
+        ) : /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            "aria-label": t("condition.values", "Values"),
+            placeholder: t("condition.values-placeholder", "value1, value2…"),
+            defaultValue: (rule.values ?? []).join(", "),
+            onBlur: (e) => updateRule(index, {
+              values: e.target.value.split(",").map((v) => v.trim()).filter(Boolean)
+            })
+          },
+          `${index}-${rule.operator}`
+        ) }),
         NEEDS_VALUE.has(rule.operator) && /* @__PURE__ */ jsx(Box, { flex: "1", minWidth: "110px", children: targetOptions.length ? /* @__PURE__ */ jsx(
           SingleSelect,
           {
@@ -910,6 +959,12 @@ const FormsList = () => {
   const [error, setError] = React.useState(null);
   const [sources, setSources] = React.useState([]);
   const [sourceId, setSourceId] = React.useState("");
+  const [hsForms, setHsForms] = React.useState([]);
+  const [hsFormId, setHsFormId] = React.useState("");
+  const [hsError, setHsError] = React.useState(null);
+  const [report, setReport] = React.useState(
+    null
+  );
   const t = (id, defaultMessage, values) => formatMessage({ id: getTranslation(id), defaultMessage }, values);
   const load = React.useCallback(async () => {
     const { data } = await get(`/${PLUGIN_ID}/builder/forms`);
@@ -920,6 +975,17 @@ const FormsList = () => {
     get(
       `/${PLUGIN_ID}/builder/import/sources`
     ).then(({ data }) => setSources(data.sources ?? [])).catch(() => setSources([]));
+    get(`/${PLUGIN_ID}/builder/import/hubspot`).then(({ data }) => setHsForms(data.configured ? data.forms ?? [] : [])).catch(
+      () => (
+        // Reachable settings but no portal list: almost always the missing scope.
+        setHsError(
+          t(
+            "forms.hubspot-list-error",
+            "Could not list the portal's forms — the token needs the `forms` read scope."
+          )
+        )
+      )
+    );
   }, [load]);
   const runImport = async () => {
     if (!sourceId) return;
@@ -935,6 +1001,48 @@ const FormsList = () => {
       setBusy(false);
     }
   };
+  const runHubspotImport = async () => {
+    if (!hsFormId) return;
+    setBusy(true);
+    setError(null);
+    setReport(null);
+    try {
+      const { data } = await post(
+        `/${PLUGIN_ID}/builder/import/hubspot`,
+        { formId: hsFormId }
+      );
+      if (data.skipped.length) {
+        setReport(data);
+        setBusy(false);
+        await load();
+      } else {
+        navigate(data.documentId);
+      }
+    } catch {
+      setError(t("forms.import-error", "Could not import the form."));
+      setBusy(false);
+    }
+  };
+  const skippedLine = (item) => {
+    const label = item.label ?? "";
+    const detail = item.detail ?? "";
+    switch (item.code) {
+      case "field-type":
+        return t("forms.skipped-field-type", '"{label}" skipped — unsupported type ({detail})', { label, detail });
+      case "hidden-field":
+        return t("forms.skipped-hidden", '"{label}" skipped — hidden fields are not supported yet', { label });
+      case "object":
+        return t("forms.skipped-object", '"{label}" skipped — unmapped object ({detail})', { label, detail });
+      case "duplicate":
+        return t("forms.skipped-duplicate", '"{label}" skipped — the name "{detail}" is already used', { label, detail });
+      case "condition":
+        return t("forms.skipped-condition", 'Condition on "{label}" dropped — no equivalent operator ({detail})', { label, detail });
+      case "rich-text":
+        return t("forms.skipped-rich-text", "A content block was skipped — the builder has no rich-text element");
+      case "legal-consent":
+        return t("forms.skipped-consent", "The GDPR consent block was skipped — rebuild it as a field if needed");
+    }
+  };
   const create = async () => {
     if (!name.trim()) return;
     setBusy(true);
@@ -987,6 +1095,7 @@ const FormsList = () => {
         ) })
       ] }),
       /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
+        /* @__PURE__ */ jsx(Button, { variant: "tertiary", startIcon: /* @__PURE__ */ jsx(List, {}), onClick: () => navigate("submissions"), children: t("forms.submissions", "Submissions") }),
         /* @__PURE__ */ jsx(
           TextInput,
           {
@@ -1001,38 +1110,74 @@ const FormsList = () => {
       ] })
     ] }),
     error && /* @__PURE__ */ jsx(Box, { paddingBottom: 4, children: /* @__PURE__ */ jsx(Typography, { textColor: "danger600", children: error }) }),
-    sources.length > 0 && /* @__PURE__ */ jsx(Box, { background: "neutral0", hasRadius: true, shadow: "tableShadow", padding: 4, marginBottom: 4, children: /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "flex-end", justifyContent: "space-between", children: [
+    (sources.length > 0 || hsForms.length > 0 || hsError) && /* @__PURE__ */ jsx(Box, { background: "neutral0", hasRadius: true, shadow: "tableShadow", padding: 4, marginBottom: 4, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 3, children: [
+      hsForms.length > 0 && /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "flex-end", justifyContent: "space-between", children: [
+        /* @__PURE__ */ jsxs(Box, { children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "delta", tag: "h2", children: t("forms.import-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."
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
+          /* @__PURE__ */ jsx(
+            SingleSelect,
+            {
+              "aria-label": t("forms.import-hubspot-source", "HubSpot form to import"),
+              placeholder: t("forms.import-hubspot-source", "HubSpot form to import"),
+              value: hsFormId,
+              onChange: (v) => setHsFormId(String(v)),
+              children: hsForms.map((f) => /* @__PURE__ */ jsx(SingleSelectOption, { value: f.id, children: f.name }, f.id))
+            }
+          ),
+          /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: runHubspotImport, disabled: busy || !hsFormId, children: t("forms.import", "Import") })
+        ] })
+      ] }),
+      hsError && /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "warning700", children: hsError }),
+      sources.length > 0 && /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "flex-end", justifyContent: "space-between", children: [
+        /* @__PURE__ */ jsxs(Box, { children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "delta", tag: "h2", children: t("forms.import-title", "Import an existing form") }),
+          /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", tag: "p", children: t(
+            "forms.import-hint",
+            "Converts a legacy content-type form (all locales) into a draft here — same slug, source untouched. Re-importing overwrites the draft."
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
+          /* @__PURE__ */ jsx(
+            SingleSelect,
+            {
+              "aria-label": t("forms.import-source", "Form to import"),
+              placeholder: t("forms.import-source", "Form to import"),
+              value: sourceId,
+              onChange: (v) => setSourceId(String(v)),
+              children: sources.map((s) => /* @__PURE__ */ jsxs(SingleSelectOption, { value: s.documentId, children: [
+                s.name,
+                " ",
+                s.slug ? `(${s.slug})` : ""
+              ] }, s.documentId))
+            }
+          ),
+          /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: runImport, disabled: busy || !sourceId, children: t("forms.import", "Import") })
+        ] })
+      ] })
+    ] }) }),
+    report && /* @__PURE__ */ jsx(Box, { background: "warning100", hasRadius: true, padding: 4, marginBottom: 4, children: /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "flex-start", gap: 4, children: [
       /* @__PURE__ */ jsxs(Box, { children: [
-        /* @__PURE__ */ jsx(Typography, { variant: "delta", tag: "h2", children: t("forms.import-title", "Import an existing form") }),
-        /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", tag: "p", children: t(
-          "forms.import-hint",
-          "Converts a legacy content-type form (all locales) into a draft here — same slug, source untouched. Re-importing overwrites the draft."
-        ) })
+        /* @__PURE__ */ jsx(Typography, { variant: "delta", tag: "h2", textColor: "warning700", children: t("forms.report-title", "Imported with gaps") }),
+        /* @__PURE__ */ jsx(Box, { tag: "ul", paddingTop: 2, style: { listStyle: "disc", paddingLeft: 16 }, children: report.skipped.map((item, i) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "warning700", children: skippedLine(item) }) }, i)) })
       ] }),
-      /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
-        /* @__PURE__ */ jsx(
-          SingleSelect,
-          {
-            "aria-label": t("forms.import-source", "Form to import"),
-            placeholder: t("forms.import-source", "Form to import"),
-            value: sourceId,
-            onChange: (v) => setSourceId(String(v)),
-            children: sources.map((s) => /* @__PURE__ */ jsxs(SingleSelectOption, { value: s.documentId, children: [
-              s.name,
-              " ",
-              s.slug ? `(${s.slug})` : ""
-            ] }, s.documentId))
-          }
-        ),
-        /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: runImport, disabled: busy || !sourceId, children: t("forms.import", "Import") })
+      /* @__PURE__ */ jsxs(Flex, { gap: 2, shrink: 0, children: [
+        /* @__PURE__ */ jsx(Button, { variant: "tertiary", onClick: () => setReport(null), children: t("forms.report-dismiss", "Dismiss") }),
+        /* @__PURE__ */ jsx(Button, { onClick: () => navigate(report.documentId), children: t("forms.report-open", "Open the form") })
       ] })
     ] }) }),
-    !rows ? /* @__PURE__ */ jsx(Loader, { children: t("forms.loading", "Loading…") }) : rows.length === 0 ? /* @__PURE__ */ jsx(Box, { background: "neutral0", hasRadius: true, shadow: "tableShadow", padding: 8, children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", children: t("forms.empty", "No form yet — name one above to open the builder.") }) }) : /* @__PURE__ */ jsxs(Table, { colCount: 6, rowCount: rows.length, children: [
+    !rows ? /* @__PURE__ */ jsx(Loader, { children: t("forms.loading", "Loading…") }) : rows.length === 0 ? /* @__PURE__ */ jsx(Box, { background: "neutral0", hasRadius: true, shadow: "tableShadow", padding: 8, children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", children: t("forms.empty", "No form yet — name one above to open the builder.") }) }) : /* @__PURE__ */ jsxs(Table, { colCount: 7, rowCount: rows.length, children: [
       /* @__PURE__ */ jsx(Thead, { children: /* @__PURE__ */ jsxs(Tr, { children: [
         /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: t("forms.col-name", "Name") }) }),
         /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: t("forms.col-slug", "Slug") }) }),
         /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: t("forms.col-structure", "Structure") }) }),
         /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: t("forms.col-status", "Status") }) }),
+        /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: t("forms.col-submissions", "Submissions") }) }),
         /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: t("forms.col-updated", "Updated") }) }),
         /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: t("forms.col-actions", "Actions") }) })
       ] }) }),
@@ -1049,6 +1194,15 @@ const FormsList = () => {
               fields: row.fields
             }) }) }),
             /* @__PURE__ */ jsx(Td, { children: row.published ? /* @__PURE__ */ jsx(Badge, { backgroundColor: "success100", textColor: "success700", children: t("forms.published", "Published") }) : /* @__PURE__ */ jsx(Badge, { backgroundColor: "secondary100", textColor: "secondary700", children: t("forms.draft", "Draft") }) }),
+            /* @__PURE__ */ jsx(Td, { onClick: (e) => e.stopPropagation(), children: row.submissions > 0 ? /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                startIcon: /* @__PURE__ */ jsx(List, {}),
+                onClick: () => navigate(`submissions?form=${encodeURIComponent(row.slug)}`),
+                children: row.submissions
+              }
+            ) : /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", children: "—" }) }),
             /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", children: row.updatedAt ? new Date(row.updatedAt).toLocaleString() : "—" }) }),
             /* @__PURE__ */ jsx(Td, { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsxs(Flex, { gap: 1, children: [
               /* @__PURE__ */ jsx(
@@ -1077,8 +1231,169 @@ const FormsList = () => {
     ] })
   ] });
 };
+const PAGE_SIZE = 20;
+const preview = (values, max = 3) => {
+  const parts = Object.entries(values ?? {}).slice(0, max).map(([k, v]) => `${k}: ${String(v)}`);
+  const more = Object.keys(values ?? {}).length - max;
+  return parts.join(" · ") + (more > 0 ? ` · +${more}` : "");
+};
+const Submissions = () => {
+  const { formatMessage } = useIntl();
+  const { get } = useFetchClient();
+  const navigate = useNavigate();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const form = searchParams.get("form") ?? "";
+  const [forms, setForms] = React.useState([]);
+  const [rows, setRows] = React.useState(null);
+  const [total, setTotal] = React.useState(0);
+  const [page, setPage] = React.useState(1);
+  const [selected, setSelected] = React.useState(null);
+  const [error, setError] = React.useState(null);
+  const [exporting, setExporting] = React.useState(false);
+  const t = (id, defaultMessage, values) => formatMessage({ id: getTranslation(id), defaultMessage }, values);
+  React.useEffect(() => {
+    get(`/${PLUGIN_ID}/builder/forms`).then(({ data }) => setForms(data.forms)).catch(() => setForms([]));
+  }, [get]);
+  React.useEffect(() => {
+    setRows(null);
+    const query = new URLSearchParams({ page: String(page), pageSize: String(PAGE_SIZE) });
+    if (form) query.set("form", form);
+    get(
+      `/${PLUGIN_ID}/builder/submissions?${query}`
+    ).then(({ data }) => {
+      setRows(data.submissions);
+      setTotal(data.total);
+    }).catch(() => setError(t("submissions.load-error", "Could not load the submissions.")));
+  }, [get, form, page]);
+  const changeForm = (slug) => {
+    setPage(1);
+    setSearchParams(slug ? { form: slug } : {});
+  };
+  const exportCsv = async () => {
+    if (!form) return;
+    setExporting(true);
+    setError(null);
+    try {
+      const { data } = await get(
+        `/${PLUGIN_ID}/builder/submissions/export?form=${encodeURIComponent(form)}`
+      );
+      const url = URL.createObjectURL(new Blob([data.csv], { type: "text/csv;charset=utf-8" }));
+      const link = document.createElement("a");
+      link.href = url;
+      link.download = data.filename;
+      link.click();
+      URL.revokeObjectURL(url);
+    } catch {
+      setError(t("submissions.export-error", "Could not export the submissions."));
+    } finally {
+      setExporting(false);
+    }
+  };
+  const pages = Math.max(1, Math.ceil(total / PAGE_SIZE));
+  return /* @__PURE__ */ jsxs(Box, { padding: 8, children: [
+    /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "flex-end", paddingBottom: 6, children: [
+      /* @__PURE__ */ jsxs(Box, { children: [
+        /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", children: [
+          /* @__PURE__ */ jsx(IconButton, { label: t("submissions.back", "Back to the forms"), onClick: () => navigate(".."), children: /* @__PURE__ */ jsx(ArrowLeft, {}) }),
+          /* @__PURE__ */ jsx(Typography, { variant: "alpha", tag: "h1", children: t("submissions.title", "Submissions") })
+        ] }),
+        /* @__PURE__ */ jsx(Typography, { variant: "epsilon", textColor: "neutral600", tag: "p", children: t(
+          "submissions.subtitle",
+          "Every answer received by the built forms — stored whatever the CRM's mood."
+        ) })
+      ] }),
+      /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
+        /* @__PURE__ */ jsx(
+          SingleSelect,
+          {
+            "aria-label": t("submissions.filter", "Filter by form"),
+            placeholder: t("submissions.all-forms", "All forms"),
+            value: form,
+            onChange: (v) => changeForm(String(v)),
+            onClear: () => changeForm(""),
+            children: forms.map((f) => /* @__PURE__ */ jsx(SingleSelectOption, { value: f.slug, children: f.name }, f.slug))
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "secondary",
+            startIcon: /* @__PURE__ */ jsx(Download, {}),
+            onClick: exportCsv,
+            disabled: !form || exporting,
+            title: form ? void 0 : t("submissions.export-pick", "Pick a form to export"),
+            children: t("submissions.export", "Export CSV")
+          }
+        )
+      ] })
+    ] }),
+    error && /* @__PURE__ */ jsx(Box, { paddingBottom: 4, children: /* @__PURE__ */ jsx(Typography, { textColor: "danger600", children: error }) }),
+    !rows ? /* @__PURE__ */ jsx(Loader, { children: t("submissions.loading", "Loading…") }) : rows.length === 0 ? /* @__PURE__ */ jsx(Box, { background: "neutral0", hasRadius: true, shadow: "tableShadow", padding: 8, children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", children: form ? t("submissions.empty-form", "No submission for this form yet.") : t("submissions.empty", "No submission yet.") }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(Table, { colCount: 5, rowCount: rows.length, children: [
+        /* @__PURE__ */ jsx(Thead, { children: /* @__PURE__ */ jsxs(Tr, { children: [
+          /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: t("submissions.col-date", "Date") }) }),
+          /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: t("submissions.col-form", "Form") }) }),
+          /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: t("submissions.col-email", "Email") }) }),
+          /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: t("submissions.col-answers", "Answers") }) }),
+          /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: t("submissions.col-crm", "CRM") }) })
+        ] }) }),
+        /* @__PURE__ */ jsx(Tbody, { children: rows.map((row) => /* @__PURE__ */ jsxs(
+          Tr,
+          {
+            onClick: () => setSelected(row),
+            style: { cursor: "pointer" },
+            children: [
+              /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", children: row.createdAt ? new Date(row.createdAt).toLocaleString() : "—" }) }),
+              /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { children: row.formTitle || row.form }) }),
+              /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { fontWeight: "semiBold", children: row.email || "—" }) }),
+              /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", ellipsis: true, children: preview(row.values) }) }),
+              /* @__PURE__ */ jsx(Td, { children: row.hubspotSynced ? /* @__PURE__ */ jsx(Badge, { backgroundColor: "success100", textColor: "success700", children: t("submissions.synced", "Synced") }) : /* @__PURE__ */ jsx(Badge, { backgroundColor: "warning100", textColor: "warning700", children: t("submissions.not-synced", "Not synced") }) })
+            ]
+          },
+          row.documentId
+        )) })
+      ] }),
+      /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", paddingTop: 4, children: [
+        /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", children: t("submissions.count", "{total, plural, one {# submission} other {# submissions}}", {
+          total
+        }) }),
+        pages > 1 && /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
+          /* @__PURE__ */ jsx(Button, { variant: "tertiary", disabled: page <= 1, onClick: () => setPage(page - 1), children: t("submissions.prev", "Previous") }),
+          /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", children: t("submissions.page", "{page} / {pages}", { page, pages }) }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "tertiary",
+              disabled: page >= pages,
+              onClick: () => setPage(page + 1),
+              children: t("submissions.next", "Next")
+            }
+          )
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(Modal.Root, { open: Boolean(selected), onOpenChange: (open) => !open && setSelected(null), children: /* @__PURE__ */ jsxs(Modal.Content, { children: [
+      /* @__PURE__ */ jsx(Modal.Header, { children: /* @__PURE__ */ jsxs(Modal.Title, { children: [
+        selected?.formTitle || selected?.form,
+        " ",
+        selected?.createdAt ? `— ${new Date(selected.createdAt).toLocaleString()}` : ""
+      ] }) }),
+      /* @__PURE__ */ jsx(Modal.Body, { children: selected && /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 3, children: [
+        Object.entries(selected.values ?? {}).map(([key, value]) => /* @__PURE__ */ jsxs(Box, { children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", tag: "p", children: key }),
+          /* @__PURE__ */ jsx(Typography, { tag: "p", children: String(value) })
+        ] }, key)),
+        selected.meta?.pagePath && /* @__PURE__ */ jsxs(Box, { children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", tag: "p", children: t("submissions.meta-page", "Submitted from") }),
+          /* @__PURE__ */ jsx(Typography, { tag: "p", children: selected.meta.pagePath })
+        ] })
+      ] }) })
+    ] }) })
+  ] });
+};
 const Forms = () => /* @__PURE__ */ jsxs(Routes, { children: [
   /* @__PURE__ */ jsx(Route, { index: true, element: /* @__PURE__ */ jsx(FormsList, {}) }),
+  /* @__PURE__ */ jsx(Route, { path: "submissions", element: /* @__PURE__ */ jsx(Submissions, {}) }),
   /* @__PURE__ */ jsx(Route, { path: ":documentId", element: /* @__PURE__ */ jsx(FormEditor, {}) })
 ] });
 export {