@bacano/sdk 1.1.19 → 1.2.1

package/react/forms.js

@@ -1,13 +1,27 @@
 // libs/sdk/src/react/forms.tsx
 import {
   useCallback as useCallback2,
-  useEffect as useEffect2,
+  useEffect as useEffect3,
   useId,
-  useMemo,
-  useRef as useRef2,
+  useMemo as useMemo2,
+  useRef as useRef3,
   useState as useState2
 } from "react";
 
+// libs/sdk/src/errors.ts
+var WebsiteError = class extends Error {
+  code;
+  status;
+  retryAfterSeconds;
+  constructor(message, code = "WEBSITE_ERROR", options) {
+    super(message);
+    this.name = "WebsiteError";
+    this.code = code;
+    this.status = options?.status ?? null;
+    this.retryAfterSeconds = options?.retryAfterSeconds ?? null;
+  }
+};
+
 // libs/sdk/src/react/form-field-control.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 function BacanoFormFieldControl(props) {
@@ -96,8 +110,110 @@ function BacanoFormFieldControl(props) {
   );
 }
 
-// libs/sdk/src/react/hooks.ts
-import { useCallback, useContext, useEffect, useRef, useState } from "react";
+// libs/sdk/src/react/form-sections.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function FormFields(props) {
+  return props.fields.map((field) => {
+    const controlId = `${props.idPrefix}-${field.key}`;
+    const value = props.values[field.key] ?? (field.type === "checkbox" ? false : field.type === "multi_select" ? [] : "");
+    return /* @__PURE__ */ jsxs2("div", { className: props.classNames?.field, children: [
+      /* @__PURE__ */ jsx2(
+        "label",
+        {
+          id: `${controlId}-label`,
+          htmlFor: field.type === "radio" ? void 0 : controlId,
+          className: props.classNames?.label,
+          children: field.label
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        BacanoFormFieldControl,
+        {
+          field,
+          id: controlId,
+          value,
+          className: props.classNames?.input,
+          onChange: (nextValue) => props.onChange(field.key, nextValue)
+        }
+      ),
+      field.helpText ? /* @__PURE__ */ jsx2("p", { className: props.classNames?.helpText, children: field.helpText }) : null
+    ] }, field.key);
+  });
+}
+function FormSections(props) {
+  return props.sections.map((section) => /* @__PURE__ */ jsxs2("section", { className: props.classNames?.section, children: [
+    /* @__PURE__ */ jsx2("h3", { className: props.classNames?.sectionTitle, children: section.title }),
+    section.description ? /* @__PURE__ */ jsx2("p", { className: props.classNames?.sectionDescription, children: section.description }) : null,
+    /* @__PURE__ */ jsx2(
+      FormFields,
+      {
+        fields: section.fields,
+        idPrefix: props.idPrefix,
+        values: props.values,
+        classNames: props.classNames,
+        onChange: props.onChange
+      }
+    )
+  ] }, section.key));
+}
+
+// libs/sdk/src/react/form-tracking.ts
+import { useContext, useEffect, useMemo, useRef } from "react";
+
+// libs/sdk/src/marketing/interactions.ts
+function newMarketingEventId() {
+  return typeof crypto !== "undefined" && "randomUUID" in crypto ? crypto.randomUUID() : `evt_${Date.now()}_${Math.random().toString(16).slice(2)}`;
+}
+
+// libs/sdk/src/marketing/form-interactions.ts
+function createFormInteractionTracker(getRuntime, formKey) {
+  let visible = false;
+  let started = false;
+  let attempt = null;
+  const completedSteps = /* @__PURE__ */ new Set();
+  function emit(eventName, context = {}) {
+    try {
+      getRuntime().track({ eventName, formKey, ...context });
+    } catch {
+    }
+  }
+  return {
+    setVisible(next) {
+      if (next && !visible && getRuntime().enabled) emit("form_open");
+      visible = next;
+    },
+    start() {
+      if (started || !getRuntime().enabled) return;
+      started = true;
+      emit("form_start");
+    },
+    stepComplete(stepKey) {
+      if (completedSteps.has(stepKey) || !getRuntime().enabled) return;
+      completedSteps.add(stepKey);
+      emit("form_step_complete", { stepKey });
+    },
+    beginSubmit() {
+      if (attempt) return false;
+      attempt = newMarketingEventId();
+      emit("form_submit_attempt", { eventId: attempt });
+      return true;
+    },
+    fail(errorCategory) {
+      if (!attempt) return;
+      emit("form_submit_error", { eventId: attempt, errorCategory });
+      attempt = null;
+    },
+    complete(result) {
+      if (!attempt) return;
+      if (result?.accepted && typeof result.responseId === "string" && /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(
+        result.responseId
+      )) {
+        emit("form_submit_success", { eventId: result.responseId });
+      }
+      attempt = null;
+    }
+  };
+}
 
 // libs/sdk/src/react/context-registry.ts
 import { createContext } from "react";
@@ -125,6 +241,37 @@ function getOrCreateReactContext(key, defaultValue) {
   return context;
 }
 
+// libs/sdk/src/react/marketing-context.ts
+var NOOP_MARKETING_RUNTIME = {
+  enabled: false,
+  track: () => void 0,
+  captureAttribution: () => null,
+  getAttribution: () => null,
+  destroy: () => void 0
+};
+var BacanoMarketingContext = getOrCreateReactContext(
+  "bacano-marketing-v1",
+  NOOP_MARKETING_RUNTIME
+);
+
+// libs/sdk/src/react/form-tracking.ts
+function useBacanoFormTracking(formKey, options = {}) {
+  const runtime = useContext(BacanoMarketingContext);
+  const current = useRef(runtime);
+  current.current = runtime;
+  const tracker = useMemo(
+    () => createFormInteractionTracker(() => current.current, formKey),
+    [formKey]
+  );
+  useEffect(() => {
+    tracker.setVisible((options.visible ?? true) && runtime.enabled);
+  }, [tracker, options.visible, runtime.enabled]);
+  return tracker;
+}
+
+// libs/sdk/src/react/hooks.ts
+import { useCallback, useContext as useContext2, useEffect as useEffect2, useRef as useRef2, useState } from "react";
+
 // libs/sdk/src/react/context.ts
 var BacanoReactContext = getOrCreateReactContext("bacano-client-v1", {
   client: null,
@@ -134,11 +281,11 @@ var BacanoReactContext = getOrCreateReactContext("bacano-client-v1", {
 
 // libs/sdk/src/react/hooks.ts
 function useBacanoState() {
-  return useContext(BacanoReactContext);
+  return useContext2(BacanoReactContext);
 }
 
 // libs/sdk/src/react/forms.tsx
-import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var EMPTY_FORM_FIELDS = [];
 var EMPTY_FORM_SECTIONS = [];
 var EMPTY_FORM_STEPS = [];
@@ -151,30 +298,34 @@ function useBacanoForm(formKey, options) {
   const enabled = options?.enabled ?? true;
   const initialForm = options?.initialForm?.key === formKey ? options.initialForm : null;
   const [form, setForm] = useState2(initialForm);
-  const formRef = useRef2(initialForm);
+  const formRef = useRef3(initialForm);
+  const requestVersion = useRef3(0);
   const [loading, setLoading] = useState2(enabled && !initialForm);
   const [error, setError] = useState2(null);
   const load = useCallback2(
     async (force = false) => {
       if (!enabled || !client) return;
+      const version = ++requestVersion.current;
       setLoading(formRef.current === null);
       setError(null);
       try {
         const nextForm = await client.forms.getDefinition(formKey, { force });
+        if (version !== requestVersion.current) return;
         formRef.current = nextForm;
         setForm(nextForm);
       } catch (loadError) {
+        if (version !== requestVersion.current) return;
         if (!formRef.current) setForm(null);
         setError(
           loadError instanceof Error ? loadError : new Error(String(loadError))
         );
       } finally {
-        setLoading(false);
+        if (version === requestVersion.current) setLoading(false);
       }
     },
     [client, enabled, formKey]
   );
-  useEffect2(() => {
+  useEffect3(() => {
     if (!enabled) {
       formRef.current = null;
       setForm(null);
@@ -183,76 +334,38 @@ function useBacanoForm(formKey, options) {
       return;
     }
     if (client) void load();
+    return () => {
+      requestVersion.current += 1;
+    };
   }, [client, enabled, load]);
   return {
-    form,
-    loading: enabled && form === null && (clientLoading || loading),
+    form: enabled ? form?.key === formKey ? form : initialForm : null,
+    loading: enabled && form?.key !== formKey && !initialForm && (clientLoading || loading),
     error: clientError ?? error,
     refresh: async () => load(true)
   };
 }
-function FormFields(props) {
-  return props.fields.map((field) => {
-    const controlId = `${props.idPrefix}-${field.key}`;
-    const value = props.values[field.key] ?? (field.type === "checkbox" ? false : field.type === "multi_select" ? [] : "");
-    return /* @__PURE__ */ jsxs2("div", { className: props.classNames?.field, children: [
-      /* @__PURE__ */ jsx2(
-        "label",
-        {
-          id: `${controlId}-label`,
-          htmlFor: field.type === "radio" ? void 0 : controlId,
-          className: props.classNames?.label,
-          children: field.label
-        }
-      ),
-      /* @__PURE__ */ jsx2(
-        BacanoFormFieldControl,
-        {
-          field,
-          id: controlId,
-          value,
-          className: props.classNames?.input,
-          onChange: (nextValue) => props.onChange(field.key, nextValue)
-        }
-      ),
-      field.helpText ? /* @__PURE__ */ jsx2("p", { className: props.classNames?.helpText, children: field.helpText }) : null
-    ] }, field.key);
-  });
-}
-function FormSections(props) {
-  return props.sections.map((section) => /* @__PURE__ */ jsxs2("section", { className: props.classNames?.section, children: [
-    /* @__PURE__ */ jsx2("h3", { className: props.classNames?.sectionTitle, children: section.title }),
-    section.description ? /* @__PURE__ */ jsx2("p", { className: props.classNames?.sectionDescription, children: section.description }) : null,
-    /* @__PURE__ */ jsx2(
-      FormFields,
-      {
-        fields: section.fields,
-        idPrefix: props.idPrefix,
-        values: props.values,
-        classNames: props.classNames,
-        onChange: props.onChange
-      }
-    )
-  ] }, section.key));
-}
-function BacanoForm(props) {
+function BacanoFormInstance(props) {
   const reactId = useId();
   const idPrefix = `${props.formKey}-${reactId.replace(/:/g, "")}`;
   const { client } = useBacanoState();
   const { form, loading, error } = useBacanoForm(props.formKey, {
     initialForm: props.initialForm
   });
-  const [values, setValues] = useState2({});
+  const [internalValues, setValues] = useState2({});
   const [step, setStep] = useState2(0);
   const [submitting, setSubmitting] = useState2(false);
   const [submitted, setSubmitted] = useState2(false);
   const [submissionError, setSubmissionError] = useState2(null);
   const [honeypot, setHoneypot] = useState2("");
-  const idempotencyKey = useRef2(crypto.randomUUID());
+  const tracking = useBacanoFormTracking(props.formKey, {
+    visible: (props.visible ?? true) && !loading && form?.status === "ACTIVE" && !submitted
+  });
+  const idempotencyKey = useRef3(crypto.randomUUID());
   const fields = form?.definition.fields ?? EMPTY_FORM_FIELDS;
   const sections = form?.definition.sections ?? EMPTY_FORM_SECTIONS;
   const steps = form?.definition.steps ?? EMPTY_FORM_STEPS;
-  const fieldKeys = useMemo(
+  const fieldKeys = useMemo2(
     () => new Set(
       [
         ...fields,
@@ -265,7 +378,12 @@ function BacanoForm(props) {
     ),
     [fields, sections, steps]
   );
-  useEffect2(() => {
+  const values = Object.fromEntries(
+    Object.entries(props.values ?? internalValues).filter(
+      ([key]) => fieldKeys.has(key)
+    )
+  );
+  useEffect3(() => {
     setStep(0);
     setValues(
       (current) => Object.fromEntries(
@@ -277,23 +395,37 @@ function BacanoForm(props) {
     setHoneypot("");
     idempotencyKey.current = crypto.randomUUID();
   }, [fieldKeys, form?.version]);
-  if (loading) return /* @__PURE__ */ jsx2(Fragment, { children: props.loadingFallback ?? null });
+  if (loading) return /* @__PURE__ */ jsx3(Fragment, { children: props.loadingFallback ?? null });
   if (error && !form)
-    return /* @__PURE__ */ jsx2(Fragment, { children: props.errorFallback?.(error) ?? props.unavailableFallback ?? null });
-  if (!form) return /* @__PURE__ */ jsx2(Fragment, { children: props.unavailableFallback ?? null });
+    return /* @__PURE__ */ jsx3(Fragment, { children: props.errorFallback?.(error) ?? props.unavailableFallback ?? null });
+  if (!form) return /* @__PURE__ */ jsx3(Fragment, { children: props.unavailableFallback ?? null });
   if (form.status === "PAUSED") {
-    return /* @__PURE__ */ jsx2("div", { className: props.classNames?.message, "data-bacano-form-unavailable": true, children: props.unavailableFallback ?? form.definition.unavailableMessage });
+    return /* @__PURE__ */ jsx3("div", { className: props.classNames?.message, "data-bacano-form-unavailable": true, children: props.unavailableFallback ?? form.definition.unavailableMessage });
   }
   if (submitted) {
-    return /* @__PURE__ */ jsx2("div", { className: props.classNames?.message, "data-bacano-form-success": true, children: form.definition.successMessage });
+    return /* @__PURE__ */ jsx3("div", { className: props.classNames?.message, "data-bacano-form-success": true, children: form.definition.successMessage });
   }
   const isMultiStep = steps.length > 0;
   const activeStep = isMultiStep ? steps[step] : null;
   const isLastStep = !isMultiStep || step === steps.length - 1;
-  const setFieldValue = (key, value) => setValues((current) => ({ ...current, [key]: value }));
+  const setFieldValue = (key, value) => {
+    if (value !== "" && value !== false && (!Array.isArray(value) || value.length > 0))
+      tracking.start();
+    const nextValues = { ...values, [key]: value };
+    setValues(nextValues);
+    props.onValuesChange?.(nextValues);
+  };
   const submit = async (event) => {
     event.preventDefault();
+    if (submitting || submitted) return;
+    if (isLastStep && !tracking.beginSubmit()) return;
+    if (!event.currentTarget.checkValidity()) {
+      if (isLastStep) tracking.fail("validation");
+      event.currentTarget.reportValidity();
+      return;
+    }
     if (!isLastStep) {
+      if (activeStep) tracking.stepComplete(activeStep.key);
       setStep((current) => current + 1);
       return;
     }
@@ -301,8 +433,12 @@ function BacanoForm(props) {
     setSubmissionError(null);
     try {
       let responseId = null;
+      let officialResult;
       if (props.onSubmit) {
-        await props.onSubmit(values, form);
+        officialResult = await props.onSubmit(values, form);
+        if (officialResult && !officialResult.accepted)
+          throw new Error(officialResult.message);
+        responseId = officialResult?.responseId ?? null;
       } else {
         if (!client) throw new Error("Bacano client is not ready");
         const result = await client.forms.submitResponse({
@@ -314,11 +450,16 @@ function BacanoForm(props) {
           honeypot
         });
         if (!result.accepted) throw new Error(result.message);
+        officialResult = result;
         responseId = result.responseId;
       }
+      tracking.complete(officialResult);
       setSubmitted(true);
       props.onSubmitted?.(responseId);
     } catch (submitError) {
+      tracking.fail(
+        submitError instanceof WebsiteError && submitError.code === "NETWORK_ERROR" ? "network" : "rejected"
+      );
       setSubmissionError(
         submitError instanceof Error ? submitError : new Error(String(submitError))
       );
@@ -326,15 +467,16 @@ function BacanoForm(props) {
       setSubmitting(false);
     }
   };
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs3(
     "form",
     {
+      noValidate: true,
       className: props.classNames?.root,
       "data-bacano-form": form.key,
       "data-bacano-form-version": form.version,
       onSubmit: (event) => void submit(event),
       children: [
-        /* @__PURE__ */ jsxs2(
+        /* @__PURE__ */ jsxs3(
           "div",
           {
             "aria-hidden": "true",
@@ -346,8 +488,8 @@ function BacanoForm(props) {
               clip: "rect(0 0 0 0)"
             },
             children: [
-              /* @__PURE__ */ jsx2("label", { htmlFor: `${form.key}-company-website`, children: "Empresa" }),
-              /* @__PURE__ */ jsx2(
+              /* @__PURE__ */ jsx3("label", { htmlFor: `${form.key}-company-website`, children: "Empresa" }),
+              /* @__PURE__ */ jsx3(
                 "input",
                 {
                   id: `${form.key}-company-website`,
@@ -361,12 +503,12 @@ function BacanoForm(props) {
             ]
           }
         ),
-        /* @__PURE__ */ jsx2("h2", { className: props.classNames?.title, children: form.name }),
-        form.description ? /* @__PURE__ */ jsx2("p", { className: props.classNames?.description, children: form.description }) : null,
-        activeStep ? /* @__PURE__ */ jsxs2("section", { className: props.classNames?.step, "data-bacano-form-step": true, children: [
-          /* @__PURE__ */ jsx2("h3", { className: props.classNames?.stepTitle, children: activeStep.title }),
-          activeStep.description ? /* @__PURE__ */ jsx2("p", { className: props.classNames?.stepDescription, children: activeStep.description }) : null,
-          /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsx3("h2", { className: props.classNames?.title, children: form.name }),
+        form.description ? /* @__PURE__ */ jsx3("p", { className: props.classNames?.description, children: form.description }) : null,
+        activeStep ? /* @__PURE__ */ jsxs3("section", { className: props.classNames?.step, "data-bacano-form-step": true, children: [
+          /* @__PURE__ */ jsx3("h3", { className: props.classNames?.stepTitle, children: activeStep.title }),
+          activeStep.description ? /* @__PURE__ */ jsx3("p", { className: props.classNames?.stepDescription, children: activeStep.description }) : null,
+          /* @__PURE__ */ jsx3(
             FormFields,
             {
               fields: activeStep.fields,
@@ -376,7 +518,7 @@ function BacanoForm(props) {
               onChange: setFieldValue
             }
           ),
-          /* @__PURE__ */ jsx2(
+          /* @__PURE__ */ jsx3(
             FormSections,
             {
               sections: activeStep.sections,
@@ -386,8 +528,8 @@ function BacanoForm(props) {
               onChange: setFieldValue
             }
           )
-        ] }) : /* @__PURE__ */ jsxs2(Fragment, { children: [
-          /* @__PURE__ */ jsx2(
+        ] }) : /* @__PURE__ */ jsxs3(Fragment, { children: [
+          /* @__PURE__ */ jsx3(
             FormFields,
             {
               fields,
@@ -397,7 +539,7 @@ function BacanoForm(props) {
               onChange: setFieldValue
             }
           ),
-          /* @__PURE__ */ jsx2(
+          /* @__PURE__ */ jsx3(
             FormSections,
             {
               sections,
@@ -408,8 +550,8 @@ function BacanoForm(props) {
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs2("div", { className: props.classNames?.actions, children: [
-          isMultiStep && step > 0 ? /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsxs3("div", { className: props.classNames?.actions, children: [
+          isMultiStep && step > 0 ? /* @__PURE__ */ jsx3(
             "button",
             {
               type: "button",
@@ -417,7 +559,7 @@ function BacanoForm(props) {
               children: "Anterior"
             }
           ) : null,
-          /* @__PURE__ */ jsx2(
+          /* @__PURE__ */ jsx3(
             "button",
             {
               type: "submit",
@@ -427,7 +569,7 @@ function BacanoForm(props) {
             }
           )
         ] }),
-        submissionError ? /* @__PURE__ */ jsx2(
+        submissionError ? /* @__PURE__ */ jsx3(
           "div",
           {
             role: "alert",
@@ -440,7 +582,11 @@ function BacanoForm(props) {
     }
   );
 }
+function BacanoForm(props) {
+  return /* @__PURE__ */ jsx3(BacanoFormInstance, { ...props }, props.formKey);
+}
 export {
   BacanoForm,
-  useBacanoForm
+  useBacanoForm,
+  useBacanoFormTracking
 };

package/react/marketing-provider.d.ts

@@ -6,5 +6,6 @@ export interface BacanoMarketingProviderProps {
     children: ReactNode;
     scriptLoadStrategy?: WebsiteMarketingScriptLoadStrategy;
     diagnostic?: (diagnostic: WebsiteMarketingDiagnostic) => void;
+    measurementAllowed?: boolean;
 }
-export declare function BacanoMarketingProvider({ publicConfig, children, scriptLoadStrategy, diagnostic, }: BacanoMarketingProviderProps): JSX.Element;
+export declare function BacanoMarketingProvider({ publicConfig, children, scriptLoadStrategy, diagnostic, measurementAllowed, }: BacanoMarketingProviderProps): JSX.Element;