@nodii/onboarding 0.1.0 → 0.2.0

package/dist/{chunk-IPAKPLIF.js → chunk-OVULPWNZ.js}

@@ -1,8 +1,10 @@
-import { createContactFormState } from './chunk-U6AXKGYQ.js';
-import { defaultSpecCache, fetchOnboardingSpec, diffSpecFields } from './chunk-F75ZJERM.js';
-import { createSignupStepper, optionValue } from './chunk-KQTS47FC.js';
-import { computePayloadFingerprint, generateIdempotencyKey, submitLead, computeSignupFingerprint, submitSignup } from './chunk-BMQINH6O.js';
-import { OnboardingBotChallengeError, OnboardingRateLimitError, OnboardingSpecStaleError, OnboardingConsentStaleError, OnboardingConsentIncompleteError } from './chunk-XJTJPBJB.js';
+import { createContactFormState } from './chunk-DWFZA5T6.js';
+import { fetchOnboardingSpec, OnboardingSpecCache, defaultSpecCache, diffSpecFields } from './chunk-KFHVZGX6.js';
+import { createSignupStepper, optionValue } from './chunk-A3DE2IAH.js';
+import { isNavigableUrl } from './chunk-NDSBIB3N.js';
+import { computePayloadFingerprint, generateIdempotencyKey, submitLead, computeSignupFingerprint, submitSignup } from './chunk-UHOFGWI7.js';
+import { contactFormSchema } from './chunk-WKN4U7QF.js';
+import { OnboardingBotChallengeError, OnboardingRateLimitError, OnboardingSpecStaleError, OnboardingConsentStaleError, OnboardingConsentIncompleteError, OnboardingSubdomainTakenError, OnboardingValidationError } from './chunk-XJTJPBJB.js';
 import { loadRecaptcha, executeRecaptcha } from './chunk-7NS7ENJV.js';
 
 // src/widget/dom-utils.ts
@@ -219,6 +221,35 @@ var DEFAULT_WIDGET_CSS = `
   margin-bottom: var(--_spacing);
 }
 
+fieldset.nodii-onboarding-field {
+  border: none;
+  padding: 0;
+  margin-inline: 0;
+}
+
+.nodii-onboarding-choices {
+  display: flex;
+  flex-wrap: wrap;
+  gap: calc(var(--_spacing) * 0.5);
+}
+
+.nodii-onboarding-choice {
+  display: inline-flex;
+  align-items: center;
+  gap: calc(var(--_spacing) * 0.375);
+  padding: calc(var(--_spacing) * 0.375) calc(var(--_spacing) * 0.75);
+  border: 1px solid var(--_border);
+  border-radius: 999px;
+  background: var(--_input-bg);
+  font-size: 0.875rem;
+  color: var(--_label);
+  cursor: pointer;
+}
+
+fieldset.nodii-onboarding-field.has-error .nodii-onboarding-choice {
+  border-color: var(--_error);
+}
+
 .nodii-onboarding-consent-row {
   display: flex;
   align-items: flex-start;
@@ -456,30 +487,32 @@ function el(tag, attrs = {}, children = []) {
   }
   return element;
 }
+function errorSlot(id) {
+  return el("div", {
+    class: "nodii-onboarding-field-error",
+    id: `${id}-error`,
+    role: "alert",
+    "aria-live": "polite"
+  });
+}
 function createFieldEl(id, label, input, required) {
   const labelEl = el(
     "label",
     { for: id, class: `nodii-onboarding-label${required ? " required" : ""}` },
     [label]
   );
-  const errorEl = el("div", {
-    class: "nodii-onboarding-field-error",
-    id: `${id}-error`,
-    role: "alert",
-    "aria-live": "polite"
-  });
-  const field = el("div", { class: "nodii-onboarding-field" }, [
+  return el("div", { class: "nodii-onboarding-field" }, [
     labelEl,
     input,
-    errorEl
+    errorSlot(id)
   ]);
-  return field;
 }
 function setFieldError(container, fieldId, message) {
   const errorEl = container.querySelector(idSelector(`${fieldId}-error`));
   if (errorEl) errorEl.textContent = message;
   const inputEl = container.querySelector(idSelector(fieldId));
   if (inputEl) inputEl.classList.add("has-error");
+  return errorEl !== null;
 }
 function clearFieldErrors(container) {
   for (const el4 of container.querySelectorAll(
@@ -493,24 +526,91 @@ function clearFieldErrors(container) {
 }
 function applyErrors(container, errors) {
   clearFieldErrors(container);
+  let unplaced = 0;
   for (const err of errors) {
-    setFieldError(container, `nodii-${err.path}`, err.message);
+    const field = err.path.split(".")[0] ?? err.path;
+    if (!setFieldError(container, `nodii-${field}`, err.message)) unplaced++;
   }
+  return unplaced;
+}
+function assertHostValues(options) {
+  if (options.privacyUrl !== void 0 && !isNavigableUrl(options.privacyUrl)) {
+    throw new OnboardingValidationError(
+      "mountContactForm: invalid privacyUrl: must be an http(s) URL, absolute or relative"
+    );
+  }
+  const shape = contactFormSchema.shape;
+  for (const [name, schema, value] of [
+    ["intakeKind", shape.intakeKind, options.intakeKind],
+    ["attribution", shape.attribution, options.attribution]
+  ]) {
+    if (value === void 0) continue;
+    const parsed = schema.safeParse(value);
+    if (!parsed.success) {
+      const issue = parsed.error.issues[0];
+      throw new OnboardingValidationError(
+        `mountContactForm: invalid ${[name, ...issue?.path ?? []].join(".")}: ${issue?.message ?? "invalid"}`
+      );
+    }
+  }
+}
+var DEFAULT_SPEC_REFRESH_MS = 5 * 60 * 1e3;
+function privacyDocumentUrl(spec) {
+  const url = spec?.consentPack?.documents.find(
+    (d) => d.docType === "privacy"
+  )?.downloadUrl;
+  return url && isNavigableUrl(url) ? url : void 0;
+}
+function choicesOf(spec, key) {
+  const field = spec?.forms.contact.fields.find((f) => f.key === key);
+  return (field?.options ?? []).map((option) => {
+    const value = optionValue(option);
+    const label = option !== null && typeof option === "object" && typeof option.label === "string" ? option.label : value;
+    return { value, label };
+  });
+}
+function isRequired(spec, key) {
+  return spec?.forms.contact.fields.find((f) => f.key === key)?.required === true;
+}
+function labelOf(spec, key, fallback) {
+  const label = spec?.forms.contact.fields.find((f) => f.key === key)?.label;
+  return label?.trim() ? label : fallback;
 }
 function mountContactForm(host, options) {
+  assertHostValues(options);
   injectWidgetStyles();
-  const formControl = createContactFormState();
-  if (options.siteKey) {
-    loadRecaptcha(options.siteKey).catch(() => {
+  const spec = options.spec;
+  const interests = choicesOf(spec, "interestModules");
+  const sizes = choicesOf(spec, "sizeBand");
+  const interestRequired = interests.length > 0 && isRequired(spec, "interestModules");
+  const privacyUrl = options.privacyUrl ?? privacyDocumentUrl(spec);
+  const siteKey = options.siteKey ?? spec?.botChallenge?.siteKey;
+  const formControl = createContactFormState({
+    requireInterest: interestRequired
+  });
+  formControl.setValue("intakeKind", options.intakeKind ?? "enquiry");
+  if (options.attribution) {
+    formControl.setValue("attribution", options.attribution);
+  }
+  if (siteKey) {
+    loadRecaptcha(siteKey).catch(() => {
     });
   }
   const wrapper = el("div", { class: "nodii-onboarding-widget" });
-  const nameInput = el("input", {
+  const companyInput = el("input", {
+    type: "text",
+    id: "nodii-companyName",
+    name: "companyName",
+    class: "nodii-onboarding-input",
+    autocomplete: "organization",
+    maxlength: "200",
+    required: "required"
+  });
+  const contactInput = el("input", {
     type: "text",
-    id: "nodii-name",
-    name: "name",
+    id: "nodii-contactName",
+    name: "contactName",
     class: "nodii-onboarding-input",
-    placeholder: "Your name",
     autocomplete: "name",
     maxlength: "200",
     required: "required"
@@ -529,8 +629,8 @@ function mountContactForm(host, options) {
     id: "nodii-phone",
     name: "phone",
     class: "nodii-onboarding-input",
-    placeholder: "+1 555 000 0000",
-    autocomplete: "tel"
+    autocomplete: "tel",
+    maxlength: "40"
   });
   const messageInput = el("textarea", {
     id: "nodii-message",
@@ -540,6 +640,34 @@ function mountContactForm(host, options) {
     maxlength: "4000",
     rows: "4"
   });
+  const interestBoxes = interests.map(
+    (choice) => el("input", {
+      type: "checkbox",
+      name: "interestModules",
+      value: choice.value
+    })
+  );
+  const sizeSelect = el(
+    "select",
+    { id: "nodii-sizeBand", name: "sizeBand", class: "nodii-onboarding-input" },
+    [
+      el("option", { value: "" }, ["Choose\u2026"]),
+      ...sizes.map(
+        (choice) => el("option", { value: choice.value }, [choice.label])
+      )
+    ]
+  );
+  const privacyBox = el("input", {
+    type: "checkbox",
+    id: "nodii-privacyNoticeAcknowledged",
+    name: "privacyNoticeAcknowledged",
+    required: "required"
+  });
+  const marketingBox = el("input", {
+    type: "checkbox",
+    id: "nodii-marketingOptIn",
+    name: "marketingOptIn"
+  });
   const serverErrorEl = el("div", {
     class: "nodii-onboarding-server-error",
     role: "alert",
@@ -563,60 +691,165 @@ function mountContactForm(host, options) {
     },
     [options.submitLabel ?? "Get in touch"]
   );
-  const recaptchaNotice = el(
-    "p",
-    { class: "nodii-onboarding-recaptcha-notice" },
-    [
-      "Protected by reCAPTCHA. ",
-      Object.assign(
-        el("a", {
-          href: "https://policies.google.com/privacy",
-          target: "_blank",
-          rel: "noopener noreferrer"
-        }),
-        { textContent: "Privacy" }
-      ),
-      " & ",
-      Object.assign(
-        el("a", {
-          href: "https://policies.google.com/terms",
-          target: "_blank",
-          rel: "noopener noreferrer"
-        }),
-        { textContent: "Terms" }
-      )
-    ]
-  );
   const form = el("form", {
     novalidate: "true",
     "aria-label": "Contact us"
   });
-  form.appendChild(createFieldEl("nodii-name", "Name", nameInput, true));
-  form.appendChild(createFieldEl("nodii-email", "Email", emailInput, true));
   form.appendChild(
-    createFieldEl("nodii-phone", "Phone (optional)", phoneInput, false)
+    createFieldEl(
+      "nodii-companyName",
+      labelOf(spec, "companyName", "Company name"),
+      companyInput,
+      true
+    )
+  );
+  form.appendChild(
+    createFieldEl(
+      "nodii-contactName",
+      labelOf(spec, "contactName", "Your name"),
+      contactInput,
+      true
+    )
+  );
+  form.appendChild(
+    createFieldEl(
+      "nodii-email",
+      labelOf(spec, "email", "Email"),
+      emailInput,
+      true
+    )
+  );
+  form.appendChild(
+    createFieldEl(
+      "nodii-phone",
+      `${labelOf(spec, "phone", "Phone")} (optional)`,
+      phoneInput,
+      false
+    )
+  );
+  if (interests.length > 0) {
+    form.appendChild(
+      el(
+        "fieldset",
+        { id: "nodii-interestModules", class: "nodii-onboarding-field" },
+        [
+          el(
+            "legend",
+            {
+              class: `nodii-onboarding-label${interestRequired ? " required" : ""}`
+            },
+            [labelOf(spec, "interestModules", "What are you interested in?")]
+          ),
+          el(
+            "div",
+            { class: "nodii-onboarding-choices" },
+            interests.map(
+              (choice, i) => el("label", { class: "nodii-onboarding-choice" }, [
+                interestBoxes[i],
+                choice.label
+              ])
+            )
+          ),
+          errorSlot("nodii-interestModules")
+        ]
+      )
+    );
+  }
+  if (sizes.length > 0) {
+    form.appendChild(
+      createFieldEl(
+        "nodii-sizeBand",
+        `${labelOf(spec, "sizeBand", "Team size")} (optional)`,
+        sizeSelect,
+        false
+      )
+    );
+  }
+  form.appendChild(
+    createFieldEl(
+      "nodii-message",
+      `${labelOf(spec, "message", "Message")} (optional)`,
+      messageInput,
+      false
+    )
   );
+  const privacyLabel = ["I have read the "];
+  let privacyLink = null;
+  if (privacyUrl) {
+    privacyLink = Object.assign(
+      el("a", {
+        href: privacyUrl,
+        target: "_blank",
+        rel: "noopener noreferrer"
+      }),
+      { textContent: "privacy notice" }
+    );
+    privacyLabel.push(privacyLink);
+  } else {
+    privacyLabel.push("privacy notice");
+  }
   form.appendChild(
-    createFieldEl("nodii-message", "Message (optional)", messageInput, false)
+    el("div", { class: "nodii-onboarding-field" }, [
+      el("label", { class: "nodii-onboarding-consent-row" }, [
+        privacyBox,
+        el("span", {}, privacyLabel)
+      ]),
+      errorSlot("nodii-privacyNoticeAcknowledged")
+    ])
+  );
+  form.appendChild(
+    el("label", { class: "nodii-onboarding-consent-row" }, [
+      marketingBox,
+      el("span", {}, [
+        labelOf(spec, "marketingOptIn", "Send me occasional product updates")
+      ])
+    ])
   );
   form.appendChild(serverErrorEl);
   form.appendChild(submitBtn);
-  form.appendChild(recaptchaNotice);
+  if (siteKey) {
+    form.appendChild(
+      el("p", { class: "nodii-onboarding-recaptcha-notice" }, [
+        "Protected by reCAPTCHA. ",
+        Object.assign(
+          el("a", {
+            href: "https://policies.google.com/privacy",
+            target: "_blank",
+            rel: "noopener noreferrer"
+          }),
+          { textContent: "Privacy" }
+        ),
+        " & ",
+        Object.assign(
+          el("a", {
+            href: "https://policies.google.com/terms",
+            target: "_blank",
+            rel: "noopener noreferrer"
+          }),
+          { textContent: "Terms" }
+        )
+      ])
+    );
+  }
   wrapper.appendChild(successEl);
   wrapper.appendChild(form);
   host.appendChild(wrapper);
-  nameInput.addEventListener("input", () => {
-    formControl.setValue("name", nameInput.value);
-  });
-  emailInput.addEventListener("input", () => {
+  function syncValues() {
+    formControl.setValue("companyName", companyInput.value);
+    formControl.setValue("contactName", contactInput.value);
     formControl.setValue("email", emailInput.value);
-  });
-  phoneInput.addEventListener("input", () => {
     formControl.setValue("phone", phoneInput.value || void 0);
-  });
-  messageInput.addEventListener("input", () => {
     formControl.setValue("message", messageInput.value || void 0);
-  });
+    formControl.setValue(
+      "interestModules",
+      interestBoxes.filter((box) => box.checked).map((box) => box.value)
+    );
+    formControl.setValue("sizeBand", sizeSelect.value || void 0);
+    formControl.setValue("privacyNoticeAcknowledged", privacyBox.checked);
+    formControl.setValue("marketingOptIn", marketingBox.checked);
+  }
+  form.addEventListener("input", syncValues);
+  form.addEventListener("change", syncValues);
   const submitLabel = options.submitLabel ?? "Get in touch";
   function renderSubmitButton(submitting) {
     while (submitBtn.firstChild) {
@@ -634,9 +867,10 @@ function mountContactForm(host, options) {
   const unsubscribe = formControl.subscribe((state) => {
     submitBtn.disabled = state.status === "submitting";
     renderSubmitButton(state.status === "submitting");
-    applyErrors(wrapper, state.errors);
-    if (state.serverError) {
-      serverErrorEl.textContent = state.serverError;
+    const unplaced = applyErrors(wrapper, state.errors);
+    const formError = state.serverError ?? (unplaced > 0 ? "This form can\u2019t be sent right now." : null);
+    if (formError) {
+      serverErrorEl.textContent = formError;
       serverErrorEl.style.display = "";
     } else {
       serverErrorEl.style.display = "none";
@@ -650,10 +884,7 @@ function mountContactForm(host, options) {
   let lastFingerprint = null;
   form.addEventListener("submit", async (event) => {
     event.preventDefault();
-    formControl.setValue("name", nameInput.value);
-    formControl.setValue("email", emailInput.value);
-    formControl.setValue("phone", phoneInput.value || void 0);
-    formControl.setValue("message", messageInput.value || void 0);
+    syncValues();
     const valid = formControl.validate();
     if (!valid) return;
     formControl.setSubmitting();
@@ -664,9 +895,9 @@ function mountContactForm(host, options) {
       lastFingerprint = fingerprint;
     }
     let firstToken;
-    if (options.siteKey) {
+    if (siteKey) {
       try {
-        firstToken = await executeRecaptcha(options.siteKey, "contact_submit", {
+        firstToken = await executeRecaptcha(siteKey, "contact_submit", {
           timeoutMs: options.timeoutMs
         });
       } catch (recaptchaErr) {
@@ -683,14 +914,14 @@ function mountContactForm(host, options) {
         usedFirst = true;
         return firstToken;
       }
-      return executeRecaptcha(options.siteKey, "contact_submit", {
+      return executeRecaptcha(siteKey, "contact_submit", {
         timeoutMs: options.timeoutMs
       });
     };
     try {
       await submitLead(values, {
         baseUrl: options.baseUrl,
-        ...options.siteKey ? { botToken: tokenProvider } : {},
+        ...siteKey ? { botToken: tokenProvider } : {},
         idempotencyKey,
         fetch: options.fetch,
         timeoutMs: options.timeoutMs
@@ -717,21 +948,45 @@ function mountContactForm(host, options) {
       }
     }
   });
+  const refreshMs = options.specRefreshMs ?? DEFAULT_SPEC_REFRESH_MS;
+  let refreshing = false;
+  const specRefresh = privacyLink && !options.privacyUrl && refreshMs > 0 ? setInterval(() => {
+    if (refreshing || !wrapper.isConnected) return;
+    refreshing = true;
+    fetchOnboardingSpec({
+      baseUrl: options.baseUrl,
+      onboarder: options.onboarder,
+      fetch: options.fetch,
+      timeoutMs: options.timeoutMs,
+      cache: new OnboardingSpecCache()
+    }).then(
+      (fresh) => {
+        const url = privacyDocumentUrl(fresh);
+        if (url && privacyLink) privacyLink.href = url;
+      },
+      () => {
+      }
+    ).finally(() => {
+      refreshing = false;
+    });
+  }, refreshMs) : void 0;
   return {
     unmount() {
+      clearInterval(specRefresh);
       unsubscribe();
       host.removeChild(wrapper);
     },
     reset() {
       idempotencyKey = null;
       lastFingerprint = null;
+      form.reset();
       formControl.reset();
+      formControl.setValue("intakeKind", options.intakeKind ?? "enquiry");
+      if (options.attribution) {
+        formControl.setValue("attribution", options.attribution);
+      }
       form.style.display = "";
       successEl.style.display = "none";
-      nameInput.value = "";
-      emailInput.value = "";
-      phoneInput.value = "";
-      messageInput.value = "";
     }
   };
 }
@@ -840,7 +1095,7 @@ function buildGateAffordance(control, doc, opts) {
       "Loading document\u2026"
     ])
   );
-  const importViewer = opts.importViewer ?? (() => import('./render-DC7P2BGQ.js'));
+  const importViewer = opts.importViewer ?? (() => import('./render-EWQXF73I.js'));
   const loadViewer = () => {
     void (async () => {
       try {
@@ -1491,6 +1746,12 @@ function mountSignupForm(host, options) {
         control.validateAll();
         control.setError("Please accept all required documents to continue.");
         options.onError?.(err);
+      } else if (err instanceof OnboardingSubdomainTakenError) {
+        control.setAccountError(
+          "subdomain",
+          "This workspace address is already taken. Choose another one."
+        );
+        options.onError?.(err);
       } else if (err instanceof OnboardingBotChallengeError) {
         control.setError(
           "Bot protection check failed. Please refresh the page and try again."
@@ -1656,5 +1917,5 @@ var OnboardingWidget = {
 };
 
 export { DEFAULT_WIDGET_CSS, OnboardingWidget, consentDocElementId, cssEscape, idSelector, injectWidgetStyles, mountContactForm, mountSignupForm, renderConsentStep, updateConsentStep };
-//# sourceMappingURL=chunk-IPAKPLIF.js.map
-//# sourceMappingURL=chunk-IPAKPLIF.js.map
+//# sourceMappingURL=chunk-OVULPWNZ.js.map
+//# sourceMappingURL=chunk-OVULPWNZ.js.map