@bacano/sdk 1.2.1 → 1.2.3

package/react/forms.js

@@ -2,10 +2,10 @@
 import {
   useCallback as useCallback2,
   useEffect as useEffect3,
-  useId,
+  useId as useId2,
   useMemo as useMemo2,
   useRef as useRef3,
-  useState as useState2
+  useState as useState3
 } from "react";
 
 // libs/sdk/src/errors.ts
@@ -22,11 +22,124 @@ var WebsiteError = class extends Error {
   }
 };
 
-// libs/sdk/src/react/form-field-control.tsx
+// libs/sdk/src/form-conditions.ts
+function formRootFields(definition) {
+  return [
+    ...definition.fields,
+    ...definition.sections.flatMap((section) => section.fields),
+    ...definition.steps.flatMap((step) => [
+      ...step.fields,
+      ...step.sections.flatMap((section) => section.fields)
+    ])
+  ];
+}
+function visibleFormFields(fields, values) {
+  return fields.flatMap((field) => [
+    field,
+    ...visibleFormFields(
+      field.branches?.find((branch) => branch.value === values[field.key])?.fields ?? [],
+      values
+    )
+  ]);
+}
+function allFormFields(fields) {
+  return fields.flatMap((field) => [
+    field,
+    ...allFormFields((field.branches ?? []).flatMap((branch) => branch.fields))
+  ]);
+}
+function activeFormValues(definition, values) {
+  const keys = new Set(
+    visibleFormFields(formRootFields(definition), values).map(
+      (field) => field.key
+    )
+  );
+  return Object.fromEntries(
+    Object.entries(values).filter(([key]) => keys.has(key))
+  );
+}
+
+// libs/sdk/src/react/form-scale-control.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
+function FormScaleControl({
+  field,
+  id,
+  value,
+  onChange,
+  className
+}) {
+  const scale = field.scale;
+  if (!scale) return null;
+  const options = Array.from(
+    { length: Math.max(0, Math.min(11, scale.max - scale.min + 1)) },
+    (_, index) => scale.min + index
+  );
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "radiogroup",
+        "aria-labelledby": `${id}-label`,
+        style: { display: "flex", flexWrap: "wrap", gap: 12 },
+        children: options.map((number) => /* @__PURE__ */ jsxs(
+          "label",
+          {
+            style: { display: "inline-flex", alignItems: "center", gap: 4 },
+            children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  className,
+                  type: "radio",
+                  name: id,
+                  value: String(number),
+                  checked: value === String(number),
+                  required: field.required,
+                  onChange: () => onChange(String(number)),
+                  "aria-label": `${number} de ${scale.max}`
+                }
+              ),
+              scale.display === "stars" ? /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  style: {
+                    fontSize: 24,
+                    color: Number(value) >= number ? "var(--accent, #b45309)" : "var(--muted, #6b7280)"
+                  },
+                  children: "\u2605"
+                }
+              ) : number
+            ]
+          },
+          number
+        ))
+      }
+    ),
+    (scale.minLabel || scale.maxLabel) && /* @__PURE__ */ jsxs("p", { children: [
+      scale.minLabel,
+      " \u2014 ",
+      scale.maxLabel
+    ] })
+  ] });
+}
+
+// libs/sdk/src/react/form-field-control.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function BacanoFormFieldControl(props) {
   const { field, className, value, onChange } = props;
   const controlId = props.id ?? field.key;
+  if (field.type === "scale")
+    return /* @__PURE__ */ jsx2(
+      FormScaleControl,
+      {
+        field,
+        id: controlId,
+        value,
+        onChange,
+        className
+      }
+    );
   const common = {
     id: controlId,
     name: field.key,
@@ -34,7 +147,7 @@ function BacanoFormFieldControl(props) {
     className
   };
   if (field.type === "textarea") {
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx2(
       "textarea",
       {
         ...common,
@@ -48,7 +161,7 @@ function BacanoFormFieldControl(props) {
   }
   if (field.type === "select" || field.type === "multi_select") {
     const isMultiple = field.type === "multi_select";
-    return /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsxs2(
       "select",
       {
         ...common,
@@ -61,15 +174,15 @@ function BacanoFormFieldControl(props) {
           ) : event.target.value
         ),
         children: [
-          !isMultiple ? /* @__PURE__ */ jsx("option", { value: "", children: field.placeholder ?? "Selecciona una opci\xF3n" }) : null,
-          (field.options ?? []).map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value))
+          !isMultiple ? /* @__PURE__ */ jsx2("option", { value: "", children: field.placeholder ?? "Selecciona una opci\xF3n" }) : null,
+          (field.options ?? []).map((option) => /* @__PURE__ */ jsx2("option", { value: option.value, children: option.label }, option.value))
         ]
       }
     );
   }
   if (field.type === "radio") {
-    return /* @__PURE__ */ jsx("div", { role: "radiogroup", "aria-labelledby": `${controlId}-label`, children: (field.options ?? []).map((option) => /* @__PURE__ */ jsxs("label", { children: [
-      /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx2("div", { role: "radiogroup", "aria-labelledby": `${controlId}-label`, children: (field.options ?? []).map((option) => /* @__PURE__ */ jsxs2("label", { children: [
+      /* @__PURE__ */ jsx2(
         "input",
         {
           type: "radio",
@@ -84,7 +197,7 @@ function BacanoFormFieldControl(props) {
     ] }, option.value)) });
   }
   if (field.type === "checkbox") {
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx2(
       "input",
       {
         ...common,
@@ -94,7 +207,7 @@ function BacanoFormFieldControl(props) {
       }
     );
   }
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     "input",
     {
       ...common,
@@ -111,13 +224,13 @@ function BacanoFormFieldControl(props) {
 }
 
 // libs/sdk/src/react/form-sections.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs3 } 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(
+    return /* @__PURE__ */ jsxs3("div", { className: props.classNames?.field, children: [
+      /* @__PURE__ */ jsx3(
         "label",
         {
           id: `${controlId}-label`,
@@ -126,7 +239,7 @@ function FormFields(props) {
           children: field.label
         }
       ),
-      /* @__PURE__ */ jsx2(
+      /* @__PURE__ */ jsx3(
         BacanoFormFieldControl,
         {
           field,
@@ -136,15 +249,18 @@ function FormFields(props) {
           onChange: (nextValue) => props.onChange(field.key, nextValue)
         }
       ),
-      field.helpText ? /* @__PURE__ */ jsx2("p", { className: props.classNames?.helpText, children: field.helpText }) : null
+      field.helpText ? /* @__PURE__ */ jsx3("p", { className: props.classNames?.helpText, children: field.helpText }) : null,
+      field.branches?.map(
+        (branch) => branch.value === props.values[field.key] ? /* @__PURE__ */ jsx3("div", { "data-bacano-form-branch": branch.value, children: /* @__PURE__ */ jsx3(FormFields, { ...props, fields: branch.fields }) }, branch.value) : 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(
+  return props.sections.map((section) => /* @__PURE__ */ jsxs3("section", { className: props.classNames?.section, children: [
+    /* @__PURE__ */ jsx3("h3", { className: props.classNames?.sectionTitle, children: section.title }),
+    section.description ? /* @__PURE__ */ jsx3("p", { className: props.classNames?.sectionDescription, children: section.description }) : null,
+    /* @__PURE__ */ jsx3(
       FormFields,
       {
         fields: section.fields,
@@ -284,8 +400,82 @@ function useBacanoState() {
   return useContext2(BacanoReactContext);
 }
 
+// libs/sdk/src/react/flow-form.tsx
+import { useId, useState as useState2 } from "react";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function BacanoFlowForm({
+  form,
+  onSubmit,
+  onRefresh,
+  classNames
+}) {
+  const id = useId();
+  const [values, setValues] = useState2(
+    () => activeFormValues(form.definition, form.initialValues ?? {})
+  );
+  const [error, setError] = useState2("");
+  const [busy, setBusy] = useState2(false);
+  const common = {
+    idPrefix: id,
+    values,
+    classNames,
+    onChange: (key, value) => setValues(
+      (current) => activeFormValues(form.definition, { ...current, [key]: value })
+    )
+  };
+  return /* @__PURE__ */ jsxs4(
+    "form",
+    {
+      className: classNames?.root,
+      onSubmit: async (event) => {
+        event.preventDefault();
+        if (busy) return;
+        setBusy(true);
+        setError("");
+        try {
+          await onSubmit(activeFormValues(form.definition, values), form);
+        } catch (reason) {
+          setError(
+            reason instanceof Error ? reason.message : "No fue posible enviar la respuesta."
+          );
+        } finally {
+          setBusy(false);
+        }
+      },
+      children: [
+        form.correction && /* @__PURE__ */ jsxs4("p", { role: "status", children: [
+          "Cargamos tus respuestas anteriores para que puedas corregirlas.",
+          form.correction.formChanged && " Las preguntas cambiaron; revisa los campos antes de enviar."
+        ] }),
+        /* @__PURE__ */ jsx4(FormFields, { ...common, fields: form.definition.fields }),
+        /* @__PURE__ */ jsx4(FormSections, { ...common, sections: form.definition.sections }),
+        form.definition.steps.map((step) => /* @__PURE__ */ jsxs4("section", { className: classNames?.section, children: [
+          /* @__PURE__ */ jsx4("h3", { className: classNames?.sectionTitle, children: step.title }),
+          /* @__PURE__ */ jsx4("p", { children: step.description }),
+          /* @__PURE__ */ jsx4(FormFields, { ...common, fields: step.fields }),
+          /* @__PURE__ */ jsx4(FormSections, { ...common, sections: step.sections })
+        ] }, step.key)),
+        error && /* @__PURE__ */ jsxs4("div", { role: "alert", children: [
+          /* @__PURE__ */ jsx4("p", { children: error === "FLOW_FORM_CHANGED" ? "El formulario cambi\xF3. Actualiza las preguntas y revisa tus respuestas antes de enviarlas." : error }),
+          /* @__PURE__ */ jsx4(
+            "button",
+            {
+              type: "button",
+              onClick: () => void onRefresh().catch(
+                () => setError("No se pudo actualizar el formulario.")
+              ),
+              children: "Actualizar preguntas sin borrar mis respuestas"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx4("button", { type: "submit", disabled: busy, className: classNames?.button, children: busy ? "Guardando\u2026" : form.definition.submitLabel })
+      ]
+    }
+  );
+}
+
 // libs/sdk/src/react/forms.tsx
-import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 var EMPTY_FORM_FIELDS = [];
 var EMPTY_FORM_SECTIONS = [];
 var EMPTY_FORM_STEPS = [];
@@ -297,11 +487,11 @@ function useBacanoForm(formKey, options) {
   } = useBacanoState();
   const enabled = options?.enabled ?? true;
   const initialForm = options?.initialForm?.key === formKey ? options.initialForm : null;
-  const [form, setForm] = useState2(initialForm);
+  const [form, setForm] = useState3(initialForm);
   const formRef = useRef3(initialForm);
   const requestVersion = useRef3(0);
-  const [loading, setLoading] = useState2(enabled && !initialForm);
-  const [error, setError] = useState2(null);
+  const [loading, setLoading] = useState3(enabled && !initialForm);
+  const [error, setError] = useState3(null);
   const load = useCallback2(
     async (force = false) => {
       if (!enabled || !client) return;
@@ -346,18 +536,18 @@ function useBacanoForm(formKey, options) {
   };
 }
 function BacanoFormInstance(props) {
-  const reactId = useId();
+  const reactId = useId2();
   const idPrefix = `${props.formKey}-${reactId.replace(/:/g, "")}`;
   const { client } = useBacanoState();
   const { form, loading, error } = useBacanoForm(props.formKey, {
     initialForm: props.initialForm
   });
-  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 [internalValues, setValues] = useState3({});
+  const [step, setStep] = useState3(0);
+  const [submitting, setSubmitting] = useState3(false);
+  const [submitted, setSubmitted] = useState3(false);
+  const [submissionError, setSubmissionError] = useState3(null);
+  const [honeypot, setHoneypot] = useState3("");
   const tracking = useBacanoFormTracking(props.formKey, {
     visible: (props.visible ?? true) && !loading && form?.status === "ACTIVE" && !submitted
   });
@@ -367,22 +557,23 @@ function BacanoFormInstance(props) {
   const steps = form?.definition.steps ?? EMPTY_FORM_STEPS;
   const fieldKeys = useMemo2(
     () => new Set(
-      [
+      allFormFields([
         ...fields,
         ...sections.flatMap((section) => section.fields),
         ...steps.flatMap((formStep) => [
           ...formStep.fields,
           ...formStep.sections.flatMap((section) => section.fields)
         ])
-      ].map((field) => field.key)
+      ]).map((field) => field.key)
     ),
     [fields, sections, steps]
   );
-  const values = Object.fromEntries(
+  const rawValues = Object.fromEntries(
     Object.entries(props.values ?? internalValues).filter(
       ([key]) => fieldKeys.has(key)
     )
   );
+  const values = form ? activeFormValues(form.definition, props.values ?? internalValues) : rawValues;
   useEffect3(() => {
     setStep(0);
     setValues(
@@ -395,15 +586,15 @@ function BacanoFormInstance(props) {
     setHoneypot("");
     idempotencyKey.current = crypto.randomUUID();
   }, [fieldKeys, form?.version]);
-  if (loading) return /* @__PURE__ */ jsx3(Fragment, { children: props.loadingFallback ?? null });
+  if (loading) return /* @__PURE__ */ jsx5(Fragment, { children: props.loadingFallback ?? null });
   if (error && !form)
-    return /* @__PURE__ */ jsx3(Fragment, { children: props.errorFallback?.(error) ?? props.unavailableFallback ?? null });
-  if (!form) return /* @__PURE__ */ jsx3(Fragment, { children: props.unavailableFallback ?? null });
+    return /* @__PURE__ */ jsx5(Fragment, { children: props.errorFallback?.(error) ?? props.unavailableFallback ?? null });
+  if (!form) return /* @__PURE__ */ jsx5(Fragment, { children: props.unavailableFallback ?? null });
   if (form.status === "PAUSED") {
-    return /* @__PURE__ */ jsx3("div", { className: props.classNames?.message, "data-bacano-form-unavailable": true, children: props.unavailableFallback ?? form.definition.unavailableMessage });
+    return /* @__PURE__ */ jsx5("div", { className: props.classNames?.message, "data-bacano-form-unavailable": true, children: props.unavailableFallback ?? form.definition.unavailableMessage });
   }
   if (submitted) {
-    return /* @__PURE__ */ jsx3("div", { className: props.classNames?.message, "data-bacano-form-success": true, children: form.definition.successMessage });
+    return /* @__PURE__ */ jsx5("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;
@@ -411,7 +602,10 @@ function BacanoFormInstance(props) {
   const setFieldValue = (key, value) => {
     if (value !== "" && value !== false && (!Array.isArray(value) || value.length > 0))
       tracking.start();
-    const nextValues = { ...values, [key]: value };
+    const nextValues = activeFormValues(form.definition, {
+      ...values,
+      [key]: value
+    });
     setValues(nextValues);
     props.onValuesChange?.(nextValues);
   };
@@ -467,7 +661,7 @@ function BacanoFormInstance(props) {
       setSubmitting(false);
     }
   };
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs5(
     "form",
     {
       noValidate: true,
@@ -476,7 +670,7 @@ function BacanoFormInstance(props) {
       "data-bacano-form-version": form.version,
       onSubmit: (event) => void submit(event),
       children: [
-        /* @__PURE__ */ jsxs3(
+        /* @__PURE__ */ jsxs5(
           "div",
           {
             "aria-hidden": "true",
@@ -488,8 +682,8 @@ function BacanoFormInstance(props) {
               clip: "rect(0 0 0 0)"
             },
             children: [
-              /* @__PURE__ */ jsx3("label", { htmlFor: `${form.key}-company-website`, children: "Empresa" }),
-              /* @__PURE__ */ jsx3(
+              /* @__PURE__ */ jsx5("label", { htmlFor: `${form.key}-company-website`, children: "Empresa" }),
+              /* @__PURE__ */ jsx5(
                 "input",
                 {
                   id: `${form.key}-company-website`,
@@ -503,12 +697,12 @@ function BacanoFormInstance(props) {
             ]
           }
         ),
-        /* @__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(
+        /* @__PURE__ */ jsx5("h2", { className: props.classNames?.title, children: form.name }),
+        form.description ? /* @__PURE__ */ jsx5("p", { className: props.classNames?.description, children: form.description }) : null,
+        activeStep ? /* @__PURE__ */ jsxs5("section", { className: props.classNames?.step, "data-bacano-form-step": true, children: [
+          /* @__PURE__ */ jsx5("h3", { className: props.classNames?.stepTitle, children: activeStep.title }),
+          activeStep.description ? /* @__PURE__ */ jsx5("p", { className: props.classNames?.stepDescription, children: activeStep.description }) : null,
+          /* @__PURE__ */ jsx5(
             FormFields,
             {
               fields: activeStep.fields,
@@ -518,7 +712,7 @@ function BacanoFormInstance(props) {
               onChange: setFieldValue
             }
           ),
-          /* @__PURE__ */ jsx3(
+          /* @__PURE__ */ jsx5(
             FormSections,
             {
               sections: activeStep.sections,
@@ -528,8 +722,8 @@ function BacanoFormInstance(props) {
               onChange: setFieldValue
             }
           )
-        ] }) : /* @__PURE__ */ jsxs3(Fragment, { children: [
-          /* @__PURE__ */ jsx3(
+        ] }) : /* @__PURE__ */ jsxs5(Fragment, { children: [
+          /* @__PURE__ */ jsx5(
             FormFields,
             {
               fields,
@@ -539,7 +733,7 @@ function BacanoFormInstance(props) {
               onChange: setFieldValue
             }
           ),
-          /* @__PURE__ */ jsx3(
+          /* @__PURE__ */ jsx5(
             FormSections,
             {
               sections,
@@ -550,8 +744,8 @@ function BacanoFormInstance(props) {
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs3("div", { className: props.classNames?.actions, children: [
-          isMultiStep && step > 0 ? /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsxs5("div", { className: props.classNames?.actions, children: [
+          isMultiStep && step > 0 ? /* @__PURE__ */ jsx5(
             "button",
             {
               type: "button",
@@ -559,7 +753,7 @@ function BacanoFormInstance(props) {
               children: "Anterior"
             }
           ) : null,
-          /* @__PURE__ */ jsx3(
+          /* @__PURE__ */ jsx5(
             "button",
             {
               type: "submit",
@@ -569,7 +763,7 @@ function BacanoFormInstance(props) {
             }
           )
         ] }),
-        submissionError ? /* @__PURE__ */ jsx3(
+        submissionError ? /* @__PURE__ */ jsx5(
           "div",
           {
             role: "alert",
@@ -583,9 +777,10 @@ function BacanoFormInstance(props) {
   );
 }
 function BacanoForm(props) {
-  return /* @__PURE__ */ jsx3(BacanoFormInstance, { ...props }, props.formKey);
+  return /* @__PURE__ */ jsx5(BacanoFormInstance, { ...props }, props.formKey);
 }
 export {
+  BacanoFlowForm,
   BacanoForm,
   useBacanoForm,
   useBacanoFormTracking