strapi-plugin-hubspot 0.7.0 → 0.9.0

package/dist/_chunks/{Forms-CKA6ukB6.mjs → Forms-BsKys-Hc.mjs}

@@ -1,13 +1,13 @@
-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 } from "@strapi/icons";
+import { Typography, Flex, Box, SingleSelect, SingleSelectOption, 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-FKsiOEPB.mjs";
-import { o as objectLabel } from "./objectLabels-DBKevJle.mjs";
-import { u as useHubspotSchema } from "./useHubspotSchema-BC0Od-Wl.mjs";
+import { g as getTranslation, P as PLUGIN_ID } from "./index-LTaVoyWJ.mjs";
+import { o as objectLabel } from "./objectLabels-DE2xGq7f.mjs";
+import { u as useHubspotSchema } from "./useHubspotSchema-BSKow0X3.mjs";
 const OPERATORS = ["eq", "neq", "contains", "empty", "notEmpty", "gt", "lt"];
 const NEEDS_VALUE = /* @__PURE__ */ new Set(["eq", "neq", "contains", "gt", "lt"]);
 const ConditionEditor = ({ condition, candidates, onChange }) => {
@@ -224,6 +224,43 @@ const FieldPanel = ({ field, candidates, problem, onChange }) => {
         children: t("panel.required", "Required")
       }
     ),
+    /* @__PURE__ */ jsxs(Flex, { gap: 4, children: [
+      /* @__PURE__ */ jsx(Box, { flex: "1", children: /* @__PURE__ */ jsxs(Field.Root, { children: [
+        /* @__PURE__ */ jsx(Field.Label, { children: t("panel.icon", "Icon") }),
+        /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            value: field.icon ?? "",
+            placeholder: "i-lucide-building-2",
+            onChange: (e) => onChange({ icon: e.target.value })
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsx(Box, { flex: "1", children: /* @__PURE__ */ jsxs(Field.Root, { children: [
+        /* @__PURE__ */ jsx(Field.Label, { children: t("panel.persist", "Answer memory") }),
+        /* @__PURE__ */ jsxs(
+          SingleSelect,
+          {
+            value: field.persist ?? "session",
+            onChange: (v) => onChange({ persist: v }),
+            children: [
+              /* @__PURE__ */ jsx(SingleSelectOption, { value: "session", children: t("panel.persist-session", "This visit only") }),
+              /* @__PURE__ */ jsx(SingleSelectOption, { value: "days30", children: t("panel.persist-days30", "30 days (non-identifying fields only)") })
+            ]
+          }
+        )
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsxs(Field.Root, { children: [
+      /* @__PURE__ */ jsx(Field.Label, { children: t("panel.class", "CSS classes") }),
+      /* @__PURE__ */ jsx(
+        TextInput,
+        {
+          value: field.class ?? "",
+          onChange: (e) => onChange({ class: e.target.value })
+        }
+      )
+    ] }),
     isChoice && /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 2, children: [
       /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", children: t("panel.options", "Choices") }),
       (field.options ?? []).map((option, index) => /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
@@ -370,6 +407,14 @@ const FormEditor = () => {
   const [feedback, setFeedback] = React.useState(null);
   const t = (id, defaultMessage, values) => formatMessage({ id: getTranslation(id), defaultMessage }, values);
   const query = locale ? `?locale=${locale}` : "";
+  React.useEffect(() => {
+    if (!dirty) return void 0;
+    const warn = (event) => {
+      event.preventDefault();
+    };
+    window.addEventListener("beforeunload", warn);
+    return () => window.removeEventListener("beforeunload", warn);
+  }, [dirty]);
   React.useEffect(() => {
     get("/i18n/locales").then(({ data }) => Array.isArray(data) && setLocales(data)).catch(() => setLocales([]));
   }, [get]);
@@ -462,6 +507,7 @@ const FormEditor = () => {
           nextLabel: entry.nextLabel,
           submitLabel: entry.submitLabel,
           successMessage: entry.successMessage,
+          class: entry.class,
           definition
         }
       );
@@ -567,6 +613,8 @@ const FormEditor = () => {
             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,
@@ -589,7 +637,7 @@ const FormEditor = () => {
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsxs(Flex, { gap: 1, children: [
+                /* @__PURE__ */ jsxs(Flex, { gap: 1, onClick: (e) => e.stopPropagation(), children: [
                   /* @__PURE__ */ jsx(
                     IconButton,
                     {
@@ -631,7 +679,10 @@ const FormEditor = () => {
                       background: isSelected ? "primary100" : "neutral100",
                       hasRadius: true,
                       padding: 3,
-                      onClick: () => setSelection({ kind: "field", fieldId: field.id }),
+                      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: [
@@ -689,7 +740,8 @@ const FormEditor = () => {
                   {
                     variant: "tertiary",
                     startIcon: /* @__PURE__ */ jsx(Plus, {}),
-                    onClick: () => {
+                    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 });
@@ -746,6 +798,16 @@ const FormEditor = () => {
             }
           )
         ] }),
+        /* @__PURE__ */ jsxs(Field.Root, { children: [
+          /* @__PURE__ */ jsx(Field.Label, { children: t("panel.class", "CSS classes") }),
+          /* @__PURE__ */ jsx(
+            TextInput,
+            {
+              value: selectedStep.class ?? "",
+              onChange: (e) => patchStep(selectedStep.id, { class: e.target.value })
+            }
+          )
+        ] }),
         /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", children: t("editor.step-condition", "Show this step only when…") }),
         /* @__PURE__ */ jsx(
           ConditionEditor,
@@ -819,6 +881,16 @@ const FormEditor = () => {
             }
           )
         ] }),
+        /* @__PURE__ */ jsxs(Field.Root, { children: [
+          /* @__PURE__ */ jsx(Field.Label, { children: t("panel.class", "CSS classes") }),
+          /* @__PURE__ */ jsx(
+            TextInput,
+            {
+              value: entry.class ?? "",
+              onChange: (e) => patchEntry({ class: e.target.value })
+            }
+          )
+        ] }),
         /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: t(
           "editor.form-hint",
           "Select a step or a field to edit it. The public endpoint serves this form at /api/hubspot/forms/{slug}.",
@@ -838,6 +910,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`);
@@ -848,6 +926,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;
@@ -863,6 +952,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);
@@ -878,6 +1009,19 @@ const FormsList = () => {
       setBusy(false);
     }
   };
+  const duplicate = async (row) => {
+    setBusy(true);
+    setError(null);
+    try {
+      const { data } = await post(
+        `/${PLUGIN_ID}/builder/forms/${row.documentId}/duplicate`
+      );
+      navigate(data.documentId);
+    } catch {
+      setError(t("forms.duplicate-error", "Could not duplicate the form."));
+      setBusy(false);
+    }
+  };
   const remove = async (row) => {
     if (!window.confirm(t("forms.delete-confirm", 'Delete "{name}" and all its locales?', { name: row.name }))) {
       return;
@@ -902,6 +1046,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,
           {
@@ -916,40 +1061,76 @@ 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", "") }) })
+        /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: t("forms.col-actions", "Actions") }) })
       ] }) }),
       /* @__PURE__ */ jsx(Tbody, { children: rows.map((row) => /* @__PURE__ */ jsxs(
         Tr,
@@ -959,21 +1140,41 @@ const FormsList = () => {
           children: [
             /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { fontWeight: "semiBold", children: row.name }) }),
             /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", children: row.slug }) }),
-            /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", children: t("forms.structure", "{steps} steps · {fields} fields", {
+            /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", children: t("forms.structure", "{steps, plural, one {# step} other {# steps}} · {fields, plural, one {# field} other {# fields}}", {
               steps: row.steps,
               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, { children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", children: row.updatedAt ? new Date(row.updatedAt).toLocaleString() : "—" }) }),
-            /* @__PURE__ */ jsx(Td, { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx(
-              IconButton,
+            /* @__PURE__ */ jsx(Td, { onClick: (e) => e.stopPropagation(), children: row.submissions > 0 ? /* @__PURE__ */ jsx(
+              Button,
               {
-                label: t("forms.delete", "Delete"),
-                onClick: () => remove(row),
-                disabled: busy,
-                children: /* @__PURE__ */ jsx(Trash, {})
+                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(
+                IconButton,
+                {
+                  label: t("forms.duplicate", "Duplicate"),
+                  onClick: () => duplicate(row),
+                  disabled: busy,
+                  children: /* @__PURE__ */ jsx(Duplicate, {})
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  label: t("forms.delete", "Delete"),
+                  onClick: () => remove(row),
+                  disabled: busy,
+                  children: /* @__PURE__ */ jsx(Trash, {})
+                }
+              )
+            ] }) })
           ]
         },
         row.documentId
@@ -981,8 +1182,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 {