@bacano/sdk 1.1.15 → 1.1.18

package/react/forms.js

@@ -0,0 +1,446 @@
+// libs/sdk/src/react/forms.tsx
+import {
+  useCallback as useCallback2,
+  useEffect as useEffect2,
+  useId,
+  useMemo,
+  useRef as useRef2,
+  useState as useState2
+} from "react";
+
+// libs/sdk/src/react/form-field-control.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function BacanoFormFieldControl(props) {
+  const { field, className, value, onChange } = props;
+  const controlId = props.id ?? field.key;
+  const common = {
+    id: controlId,
+    name: field.key,
+    required: field.required,
+    className
+  };
+  if (field.type === "textarea") {
+    return /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ...common,
+        value: typeof value === "string" ? value : "",
+        placeholder: field.placeholder ?? void 0,
+        minLength: field.validation?.minLength ?? void 0,
+        maxLength: field.validation?.maxLength ?? void 0,
+        onChange: (event) => onChange(event.target.value)
+      }
+    );
+  }
+  if (field.type === "select" || field.type === "multi_select") {
+    const isMultiple = field.type === "multi_select";
+    return /* @__PURE__ */ jsxs(
+      "select",
+      {
+        ...common,
+        multiple: isMultiple,
+        value: isMultiple && Array.isArray(value) ? value : String(value ?? ""),
+        onChange: (event) => onChange(
+          isMultiple ? Array.from(
+            event.target.selectedOptions,
+            (option) => option.value
+          ) : 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))
+        ]
+      }
+    );
+  }
+  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(
+        "input",
+        {
+          type: "radio",
+          name: field.key,
+          value: option.value,
+          checked: value === option.value,
+          required: field.required,
+          onChange: (event) => onChange(event.target.value)
+        }
+      ),
+      option.label
+    ] }, option.value)) });
+  }
+  if (field.type === "checkbox") {
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        ...common,
+        type: "checkbox",
+        checked: value === true,
+        onChange: (event) => onChange(event.target.checked)
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      ...common,
+      type: field.type === "phone" ? "tel" : field.type,
+      value: typeof value === "string" ? value : "",
+      placeholder: field.placeholder ?? void 0,
+      min: field.validation?.min ?? void 0,
+      max: field.validation?.max ?? void 0,
+      minLength: field.validation?.minLength ?? void 0,
+      maxLength: field.validation?.maxLength ?? void 0,
+      onChange: (event) => onChange(event.target.value)
+    }
+  );
+}
+
+// libs/sdk/src/react/hooks.ts
+import { useCallback, useContext, useEffect, useRef, useState } from "react";
+
+// libs/sdk/src/react/context-registry.ts
+import { createContext } from "react";
+var REACT_CONTEXT_REGISTRY = /* @__PURE__ */ Symbol.for(
+  "@bacano/sdk/react-context-registry/v1"
+);
+function getReactContextRegistry() {
+  const globalRegistry = globalThis;
+  const existing = globalRegistry[REACT_CONTEXT_REGISTRY];
+  if (existing instanceof Map) {
+    return existing;
+  }
+  const registry = /* @__PURE__ */ new Map();
+  globalRegistry[REACT_CONTEXT_REGISTRY] = registry;
+  return registry;
+}
+function getOrCreateReactContext(key, defaultValue) {
+  const registry = getReactContextRegistry();
+  const existing = registry.get(key);
+  if (existing) {
+    return existing;
+  }
+  const context = createContext(defaultValue);
+  registry.set(key, context);
+  return context;
+}
+
+// libs/sdk/src/react/context.ts
+var BacanoReactContext = getOrCreateReactContext("bacano-client-v1", {
+  client: null,
+  loading: true,
+  error: null
+});
+
+// libs/sdk/src/react/hooks.ts
+function useBacanoState() {
+  return useContext(BacanoReactContext);
+}
+
+// libs/sdk/src/react/forms.tsx
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var EMPTY_FORM_FIELDS = [];
+var EMPTY_FORM_SECTIONS = [];
+var EMPTY_FORM_STEPS = [];
+function useBacanoForm(formKey, options) {
+  const {
+    client,
+    loading: clientLoading,
+    error: clientError
+  } = useBacanoState();
+  const enabled = options?.enabled ?? true;
+  const initialForm = options?.initialForm?.key === formKey ? options.initialForm : null;
+  const [form, setForm] = useState2(initialForm);
+  const formRef = useRef2(initialForm);
+  const [loading, setLoading] = useState2(enabled && !initialForm);
+  const [error, setError] = useState2(null);
+  const load = useCallback2(
+    async (force = false) => {
+      if (!enabled || !client) return;
+      setLoading(formRef.current === null);
+      setError(null);
+      try {
+        const nextForm = await client.forms.getDefinition(formKey, { force });
+        formRef.current = nextForm;
+        setForm(nextForm);
+      } catch (loadError) {
+        if (!formRef.current) setForm(null);
+        setError(
+          loadError instanceof Error ? loadError : new Error(String(loadError))
+        );
+      } finally {
+        setLoading(false);
+      }
+    },
+    [client, enabled, formKey]
+  );
+  useEffect2(() => {
+    if (!enabled) {
+      formRef.current = null;
+      setForm(null);
+      setLoading(false);
+      setError(null);
+      return;
+    }
+    if (client) void load();
+  }, [client, enabled, load]);
+  return {
+    form,
+    loading: enabled && form === null && (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) {
+  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 [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 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(
+    () => new Set(
+      [
+        ...fields,
+        ...sections.flatMap((section) => section.fields),
+        ...steps.flatMap((formStep) => [
+          ...formStep.fields,
+          ...formStep.sections.flatMap((section) => section.fields)
+        ])
+      ].map((field) => field.key)
+    ),
+    [fields, sections, steps]
+  );
+  useEffect2(() => {
+    setStep(0);
+    setValues(
+      (current) => Object.fromEntries(
+        Object.entries(current).filter(([key]) => fieldKeys.has(key))
+      )
+    );
+    setSubmitted(false);
+    setSubmissionError(null);
+    setHoneypot("");
+    idempotencyKey.current = crypto.randomUUID();
+  }, [fieldKeys, form?.version]);
+  if (loading) return /* @__PURE__ */ jsx2(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 });
+  if (form.status === "PAUSED") {
+    return /* @__PURE__ */ jsx2("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 });
+  }
+  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 submit = async (event) => {
+    event.preventDefault();
+    if (!isLastStep) {
+      setStep((current) => current + 1);
+      return;
+    }
+    setSubmitting(true);
+    setSubmissionError(null);
+    try {
+      let responseId = null;
+      if (props.onSubmit) {
+        await props.onSubmit(values, form);
+      } else {
+        if (!client) throw new Error("Bacano client is not ready");
+        const result = await client.forms.submitResponse({
+          formKey: form.key,
+          formVersion: form.version,
+          definitionHash: form.definitionHash,
+          idempotencyKey: idempotencyKey.current,
+          values,
+          honeypot
+        });
+        if (!result.accepted) throw new Error(result.message);
+        responseId = result.responseId;
+      }
+      setSubmitted(true);
+      props.onSubmitted?.(responseId);
+    } catch (submitError) {
+      setSubmissionError(
+        submitError instanceof Error ? submitError : new Error(String(submitError))
+      );
+    } finally {
+      setSubmitting(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs2(
+    "form",
+    {
+      className: props.classNames?.root,
+      "data-bacano-form": form.key,
+      "data-bacano-form-version": form.version,
+      onSubmit: (event) => void submit(event),
+      children: [
+        /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            "aria-hidden": "true",
+            style: {
+              position: "absolute",
+              width: 1,
+              height: 1,
+              overflow: "hidden",
+              clip: "rect(0 0 0 0)"
+            },
+            children: [
+              /* @__PURE__ */ jsx2("label", { htmlFor: `${form.key}-company-website`, children: "Empresa" }),
+              /* @__PURE__ */ jsx2(
+                "input",
+                {
+                  id: `${form.key}-company-website`,
+                  name: "company_website",
+                  tabIndex: -1,
+                  autoComplete: "off",
+                  value: honeypot,
+                  onChange: (event) => setHoneypot(event.target.value)
+                }
+              )
+            ]
+          }
+        ),
+        /* @__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(
+            FormFields,
+            {
+              fields: activeStep.fields,
+              idPrefix,
+              values,
+              classNames: props.classNames,
+              onChange: setFieldValue
+            }
+          ),
+          /* @__PURE__ */ jsx2(
+            FormSections,
+            {
+              sections: activeStep.sections,
+              idPrefix,
+              values,
+              classNames: props.classNames,
+              onChange: setFieldValue
+            }
+          )
+        ] }) : /* @__PURE__ */ jsxs2(Fragment, { children: [
+          /* @__PURE__ */ jsx2(
+            FormFields,
+            {
+              fields,
+              idPrefix,
+              values,
+              classNames: props.classNames,
+              onChange: setFieldValue
+            }
+          ),
+          /* @__PURE__ */ jsx2(
+            FormSections,
+            {
+              sections,
+              idPrefix,
+              values,
+              classNames: props.classNames,
+              onChange: setFieldValue
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { className: props.classNames?.actions, children: [
+          isMultiStep && step > 0 ? /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              onClick: () => setStep((current) => current - 1),
+              children: "Anterior"
+            }
+          ) : null,
+          /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "submit",
+              className: props.classNames?.button,
+              disabled: submitting,
+              children: isLastStep ? form.definition.submitLabel : "Continuar"
+            }
+          )
+        ] }),
+        submissionError ? /* @__PURE__ */ jsx2(
+          "div",
+          {
+            role: "alert",
+            className: props.classNames?.message,
+            "data-bacano-form-error": true,
+            children: submissionError.message
+          }
+        ) : null
+      ]
+    }
+  );
+}
+export {
+  BacanoForm,
+  useBacanoForm
+};

package/react.cjs

@@ -68,10 +68,10 @@ var WebsiteError = class extends Error {
   }
 };
 var RateLimitError = class extends WebsiteError {
-  constructor(message, retryAfterSeconds) {
+  constructor(message, retryAfterSeconds2) {
     super(message, "RATE_LIMITED", {
       status: 429,
-      retryAfterSeconds
+      retryAfterSeconds: retryAfterSeconds2
     });
     this.name = "RateLimitError";
   }
@@ -6497,6 +6497,171 @@ function createContentModule(graphqlUrl, getHeaders, getContext, storageUrl) {
   };
 }
 
+// libs/sdk/src/modules/forms.ts
+function retryAfterSeconds(response) {
+  const value = Number(response.headers.get("Retry-After") ?? "1");
+  return Number.isFinite(value) && value >= 0 ? Math.ceil(value) : 1;
+}
+function isFormKey(value) {
+  return /^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(value);
+}
+function createFormsModule(apiUrl, websiteSlug, getContext) {
+  const cache = /* @__PURE__ */ new Map();
+  function getServerOrigin() {
+    if (typeof window !== "undefined") return null;
+    const domain = getContext().domain?.trim();
+    if (!domain) return null;
+    try {
+      return new URL(domain.includes("://") ? domain : `https://${domain}`).origin;
+    } catch {
+      return null;
+    }
+  }
+  return {
+    async getDefinition(formKey, options) {
+      const normalizedKey = formKey.trim();
+      if (!isFormKey(normalizedKey)) {
+        throw new WebsiteError(
+          "formKey has an invalid format",
+          "INVALID_FORM_KEY"
+        );
+      }
+      const cached = cache.get(normalizedKey);
+      if (!options?.force && cached && cached.expiresAt > Date.now()) {
+        return cached.value;
+      }
+      const url = new URL(
+        `${apiUrl.replace(/\/+$/, "")}/api/v1/website/forms/definition`
+      );
+      url.searchParams.set("websiteSlug", websiteSlug);
+      url.searchParams.set("formKey", normalizedKey);
+      let response;
+      try {
+        const serverOrigin = getServerOrigin();
+        const headers = new Headers();
+        if (serverOrigin) headers.set("Origin", serverOrigin);
+        if (cached?.etag) headers.set("If-None-Match", cached.etag);
+        response = await fetch(url, {
+          ...serverOrigin || cached?.etag ? { headers } : {},
+          ...options?.force ? { cache: "no-cache" } : {}
+        });
+      } catch (error) {
+        throw new WebsiteError(
+          `Could not load the website form: ${error instanceof Error ? error.message : String(error)}`,
+          "NETWORK_ERROR"
+        );
+      }
+      if (response.status === 304 && cached) {
+        cache.set(normalizedKey, {
+          ...cached,
+          expiresAt: Date.now() + 3e4
+        });
+        return cached.value;
+      }
+      if (response.status === 404) {
+        cache.set(normalizedKey, {
+          etag: null,
+          expiresAt: Date.now() + 15e3,
+          value: null
+        });
+        return null;
+      }
+      if (response.status === 429) {
+        throw new RateLimitError(
+          "Rate limit exceeded. Please try again later.",
+          retryAfterSeconds(response)
+        );
+      }
+      if (!response.ok) {
+        throw new WebsiteError(
+          `Could not load the website form (status ${response.status})`,
+          response.status === 403 ? "ORIGIN_NOT_ALLOWED" : "FORM_DEFINITION_ERROR",
+          { status: response.status }
+        );
+      }
+      const value = await response.json();
+      if (value.schemaVersion !== 1 || value.key !== normalizedKey || !Array.isArray(value.definition?.fields) || !Array.isArray(value.definition?.sections) || !Array.isArray(value.definition?.steps)) {
+        throw new WebsiteError(
+          "Website form returned an invalid definition",
+          "INVALID_FORM_DEFINITION"
+        );
+      }
+      cache.set(normalizedKey, {
+        etag: response.headers.get("ETag"),
+        expiresAt: Date.now() + 3e4,
+        value
+      });
+      return value;
+    },
+    async submitResponse(input) {
+      const normalizedKey = input.formKey.trim();
+      if (!isFormKey(normalizedKey)) {
+        throw new WebsiteError(
+          "formKey has an invalid format",
+          "INVALID_FORM_KEY"
+        );
+      }
+      const context = getContext();
+      const attribution = getWebsiteMarketingAttribution(context.websiteId);
+      const pageUrl = typeof window !== "undefined" ? window.location.href : void 0;
+      const referrerUrl = typeof document !== "undefined" && document.referrer ? document.referrer : void 0;
+      let response;
+      try {
+        response = await fetch(
+          `${apiUrl.replace(/\/+$/, "")}/api/v1/website/forms/responses`,
+          {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+              websiteSlug,
+              formKey: normalizedKey,
+              formVersion: input.formVersion,
+              definitionHash: input.definitionHash,
+              idempotencyKey: input.idempotencyKey,
+              source: input.source ?? "WEBSITE",
+              values: input.values,
+              pageUrl,
+              referrerUrl,
+              attribution: attribution ? serializeWebsiteMarketingAttribution(attribution) : null,
+              honeypot: input.honeypot ?? ""
+            })
+          }
+        );
+      } catch (error) {
+        throw new WebsiteError(
+          `Could not submit the website form: ${error instanceof Error ? error.message : String(error)}`,
+          "NETWORK_ERROR"
+        );
+      }
+      if (response.status === 429) {
+        throw new RateLimitError(
+          "Rate limit exceeded. Please try again later.",
+          retryAfterSeconds(response)
+        );
+      }
+      const result = await response.json().catch(() => null);
+      if (!response.ok) {
+        throw new WebsiteError(
+          result?.message ?? `Could not submit the website form (status ${response.status})`,
+          result?.code ?? (response.status === 403 ? "ORIGIN_NOT_ALLOWED" : "FORM_RESPONSE_ERROR"),
+          { status: response.status }
+        );
+      }
+      if (typeof result?.accepted !== "boolean" || typeof result.message !== "string") {
+        throw new WebsiteError(
+          "Website form returned an invalid response",
+          "INVALID_RESPONSE"
+        );
+      }
+      return {
+        accepted: result.accepted,
+        responseId: typeof result.responseId === "string" ? result.responseId : null,
+        message: result.message
+      };
+    }
+  };
+}
+
 // libs/sdk/src/modules/marketing.ts
 function readRetryAfter(response) {
   const value = Number(response.headers.get("Retry-After") ?? "1");
@@ -7023,6 +7188,7 @@ function createBacanoClient(config) {
     config.websiteSlug,
     getContext
   );
+  const formsModule = createFormsModule(apiUrl, config.websiteSlug, getContext);
   return {
     async init() {
       if (context) return;
@@ -7075,6 +7241,10 @@ function createBacanoClient(config) {
       getByTag: contentModule.getByTag.bind(contentModule),
       getForProduct: contentModule.getForProduct.bind(contentModule)
     },
+    forms: {
+      getDefinition: formsModule.getDefinition.bind(formsModule),
+      submitResponse: formsModule.submitResponse.bind(formsModule)
+    },
     cart: {
       getOrCreate: cartModule.getOrCreate.bind(cartModule),
       startCheckout: cartModule.startCheckout.bind(cartModule),