@usefillo/dom 0.5.4 → 0.6.0

package/dist/index.js

@@ -18,9 +18,10 @@ import {
   parsePhone,
   pipeBlock,
   provisionWorkspace,
+  needsExplicitSubmit,
+  shouldAutoSubmit,
   syncCodeForm,
   toE164,
-  validateResponse,
   visibleFields
 } from "@usefillo/core";
 var FIELD_INPUT_PREFIX = "fillo-";
@@ -992,44 +993,12 @@ var DEFAULT_COMPONENTS = {
   signature,
   file_upload: fileUpload
 };
-function isAutoSubmitBlock(block) {
-  return isField(block) && (block.kind === "select" || block.kind === "dropdown" || block.kind === "checkbox" || block.kind === "rating" || block.kind === "linear_scale");
-}
-function needsExplicitSubmit(visible) {
-  const interactive = visible.filter((b) => !(isField(b) && b.kind === "hidden"));
-  if (interactive.length === 0) return false;
-  if (interactive.length > 1) return true;
-  return !isAutoSubmitBlock(interactive[0]);
-}
 function defaultFieldRenderer(context) {
   if (context.field.kind === "hidden") return null;
   if (context.field.kind === "custom") return null;
   const renderer = DEFAULT_COMPONENTS[context.field.kind];
   return renderer ? renderer(context) : null;
 }
-function shouldAutoSubmit(field, value, api, uploading) {
-  if (api.form.settings.submitMode !== "auto") return false;
-  if (!api.isLastPage || api.status !== "idle" || uploading) return false;
-  const hasDiscreteAnswer = (() => {
-    switch (field.kind) {
-      case "select":
-      case "dropdown":
-        return typeof value === "string" && field.options.some((option) => option.id === value);
-      case "checkbox":
-        return value === true;
-      case "rating":
-      case "linear_scale":
-        return typeof value === "number";
-      default:
-        return false;
-    }
-  })();
-  if (!hasDiscreteAnswer) return false;
-  const nextData = { ...api.data, [field.id]: value };
-  const interactive = visibleFields(api.form, nextData).filter((f) => f.kind !== "hidden");
-  if (interactive.length !== 1 || interactive[0]?.id !== field.id) return false;
-  return validateResponse(api.form, nextData).ok;
-}
 var DomFormController = class {
   constructor(target, options) {
     this.target = target;
@@ -1104,22 +1073,43 @@ var DomFormController = class {
       submit: () => this.submit()
     };
   }
+  resolveFormIdFn;
+  /** Prod-only: the code form is an unpublished draft — submissions would 404. */
+  notLive = false;
   async resolve() {
     try {
       const codeForm = isCodeForm(this.options.form) ? this.options.form : null;
       if (codeForm) {
+        const client = this.options.client;
+        if (client?.key) {
+          this.resolveFormIdFn = () => syncCodeForm(client, codeForm, { bypassCache: true }).then((r) => r.formId);
+        }
         this.setSchema(codeForm.schema, this.options.theme ?? codeForm.theme, this.options.formId);
-        if (this.options.client?.key) {
-          syncCodeForm(this.options.client, codeForm).then(({ formId, branding }) => {
+        if (client?.key) {
+          syncCodeForm(client, codeForm).then(({ formId, branding, staged, status, warning }) => {
             this.formId = formId;
             this.engine?.setContext({ formId });
+            if (warning) console.warn(`[fillo] ${warning}`);
+            if (staged) {
+              console.info(`[fillo] "${codeForm.id}" changes staged as a draft \u2014 publish them in your Fillo dashboard`);
+            } else if (status === "draft") {
+              console.info(`[fillo] "${codeForm.id}" is a draft \u2014 it renders here but won't accept responses until published`);
+              if (!isDevEnv()) {
+                this.notLive = true;
+                this.render();
+              }
+            }
             if (branding) {
               this.fetchedPoweredBy = branding.poweredBy;
               this.fetchedBrandLabel = branding.label;
               this.fetchedBrandHref = branding.href;
               this.render();
             }
-          }).catch((error) => this.handleError(toFilloError(error)));
+          }).catch((error) => {
+            const err = toFilloError(error);
+            console.warn("[fillo] form sync failed:", err.message);
+            this.options.onError?.(err);
+          });
         }
         return;
       }
@@ -1159,7 +1149,16 @@ var DomFormController = class {
       onChange: this.options.onChange,
       onSubmitted: this.options.onSubmitted,
       getHoneypot: () => this.hpValue,
-      surface: "default"
+      surface: "default",
+      resolveFormId: this.resolveFormIdFn
+    });
+    let lastStatus = this.engine.getState().status;
+    this.engine.subscribe(() => {
+      const status = this.engine?.getState().status;
+      if (status !== void 0 && status !== lastStatus) {
+        lastStatus = status;
+        this.queueRender();
+      }
     });
     this.phase = this.closed ? "closed" : "ready";
     this.render();
@@ -1192,7 +1191,9 @@ var DomFormController = class {
     try {
       await pending;
     } catch (error) {
-      this.handleError(toFilloError(error));
+      this.options.onError?.(toFilloError(error));
+      this.focusIntent = "error";
+      this.render();
       return;
     }
     if (this.hasErrors()) this.focusIntent = "error";
@@ -1396,6 +1397,13 @@ var DomFormController = class {
       this.element.appendChild(closed);
       return;
     }
+    if (this.notLive) {
+      const panel = el("div", { className: `fillo-form fillo-form--closed ${this.options.className ?? ""}` });
+      themeStyle(panel, this.theme);
+      panel.appendChild(el("p", { className: "fillo-closed", text: "This form isn't live yet." }));
+      this.element.appendChild(panel);
+      return;
+    }
     if (!this.schema) return;
     if (this.engine?.getState().status === "submitted") {
       const api = this.api();
@@ -1439,7 +1447,7 @@ var DomFormController = class {
       });
       progress.appendChild(el("div", { className: "fillo-progress-fill" }));
       progress.firstElementChild?.style.setProperty(
-        "width",
+        "--fillo-progress-value",
         `${(api.pageIndex + 1) / api.pageCount * 100}%`
       );
       form.appendChild(progress);
@@ -1459,10 +1467,24 @@ var DomFormController = class {
     }
     form.appendChild(blocks);
     const hp = el("input", { className: "fillo-hp", attrs: { type: "text", name: "fillo_hp_field", tabindex: "-1", autocomplete: "off", "aria-hidden": "true" } });
+    hp.style.position = "absolute";
+    hp.style.left = "-9999px";
+    hp.style.top = "auto";
+    hp.style.width = "1px";
+    hp.style.height = "1px";
+    hp.style.opacity = "0";
+    hp.style.overflow = "hidden";
+    hp.style.pointerEvents = "none";
     hp.addEventListener("input", () => {
       this.hpValue = hp.value;
     });
     form.appendChild(hp);
+    const submitError = api.status === "error" ? "This form can't submit right now. Please try again in a moment." : this.engine?.getState().submitError;
+    if (submitError) {
+      form.appendChild(
+        el("p", { className: "fillo-submit-error", attrs: { role: "alert" }, text: submitError })
+      );
+    }
     const autoSubmit = api.form.settings.submitMode === "auto";
     const showPrimaryButton = !autoSubmit || !api.isLastPage || needsExplicitSubmit(visibleFields(api.form, api.data));
     const showFooter = showPrimaryButton || api.pageCount > 1 && !api.isFirstPage;
@@ -1495,7 +1517,15 @@ var DomFormController = class {
     const setValue = (value, options) => {
       this.setValueInternal(block.id, value, options);
       if (options?.render === false) return;
-      if (shouldAutoSubmit(block, value, api, this.uploadProgress.size > 0)) void this.submit();
+      const autoCtx = {
+        form: api.form,
+        data: api.data,
+        // dom's status union adds render phases; non-"idle" is a no anyway.
+        status: api.status,
+        isLastPage: api.isLastPage,
+        uploading: this.uploadProgress.size > 0
+      };
+      if (shouldAutoSubmit(block, value, autoCtx)) void this.submit();
     };
     const context = {
       field: block,