@bacano/sdk 1.1.15 → 1.1.17

package/react/forms.cjs

@@ -0,0 +1,450 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// libs/sdk/src/react/forms.tsx
+var forms_exports = {};
+__export(forms_exports, {
+  BacanoForm: () => BacanoForm,
+  useBacanoForm: () => useBacanoForm
+});
+module.exports = __toCommonJS(forms_exports);
+var import_react3 = require("react");
+
+// libs/sdk/src/react/form-field-control.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function BacanoFormFieldControl(props) {
+  const { field, className, value, onChange } = props;
+  const common = {
+    id: field.key,
+    name: field.key,
+    required: field.required,
+    className
+  };
+  if (field.type === "textarea") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("option", { value: "", children: field.placeholder ?? "Selecciona una opci\xF3n" }) : null,
+          (field.options ?? []).map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: option.value, children: option.label }, option.value))
+        ]
+      }
+    );
+  }
+  if (field.type === "radio") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { role: "radiogroup", "aria-labelledby": `${field.key}-label`, children: (field.options ?? []).map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(
+      "input",
+      {
+        ...common,
+        type: "checkbox",
+        checked: value === true,
+        onChange: (event) => onChange(event.target.checked)
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.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
+var import_react2 = require("react");
+
+// libs/sdk/src/react/context-registry.ts
+var import_react = require("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 = (0, import_react.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 (0, import_react2.useContext)(BacanoReactContext);
+}
+
+// libs/sdk/src/react/forms.tsx
+var import_jsx_runtime2 = require("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] = (0, import_react3.useState)(initialForm);
+  const formRef = (0, import_react3.useRef)(initialForm);
+  const [loading, setLoading] = (0, import_react3.useState)(enabled && !initialForm);
+  const [error, setError] = (0, import_react3.useState)(null);
+  const load = (0, import_react3.useCallback)(
+    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]
+  );
+  (0, import_react3.useEffect)(() => {
+    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 value = props.values[field.key] ?? (field.type === "checkbox" ? false : field.type === "multi_select" ? [] : "");
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: props.classNames?.field, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "label",
+        {
+          id: `${field.key}-label`,
+          htmlFor: field.type === "radio" ? void 0 : field.key,
+          className: props.classNames?.label,
+          children: field.label
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        BacanoFormFieldControl,
+        {
+          field,
+          value,
+          className: props.classNames?.input,
+          onChange: (nextValue) => props.onChange(field.key, nextValue)
+        }
+      ),
+      field.helpText ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: props.classNames?.helpText, children: field.helpText }) : null
+    ] }, field.key);
+  });
+}
+function FormSections(props) {
+  return props.sections.map((section) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("section", { className: props.classNames?.section, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h3", { className: props.classNames?.sectionTitle, children: section.title }),
+    section.description ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: props.classNames?.sectionDescription, children: section.description }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      FormFields,
+      {
+        fields: section.fields,
+        values: props.values,
+        classNames: props.classNames,
+        onChange: props.onChange
+      }
+    )
+  ] }, section.key));
+}
+function BacanoForm(props) {
+  const { client } = useBacanoState();
+  const { form, loading, error } = useBacanoForm(props.formKey, {
+    initialForm: props.initialForm
+  });
+  const [values, setValues] = (0, import_react3.useState)({});
+  const [step, setStep] = (0, import_react3.useState)(0);
+  const [submitting, setSubmitting] = (0, import_react3.useState)(false);
+  const [submitted, setSubmitted] = (0, import_react3.useState)(false);
+  const [submissionError, setSubmissionError] = (0, import_react3.useState)(null);
+  const [honeypot, setHoneypot] = (0, import_react3.useState)("");
+  const idempotencyKey = (0, import_react3.useRef)(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 = (0, import_react3.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]
+  );
+  (0, import_react3.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: props.loadingFallback ?? null });
+  if (error && !form)
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: props.errorFallback?.(error) ?? props.unavailableFallback ?? null });
+  if (!form) return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: props.unavailableFallback ?? null });
+  if (form.status === "PAUSED") {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: props.classNames?.message, "data-bacano-form-unavailable": true, children: props.unavailableFallback ?? form.definition.unavailableMessage });
+  }
+  if (submitted) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("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__ */ (0, import_jsx_runtime2.jsxs)(
+    "form",
+    {
+      className: props.classNames?.root,
+      "data-bacano-form": form.key,
+      "data-bacano-form-version": form.version,
+      onSubmit: (event) => void submit(event),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          "div",
+          {
+            "aria-hidden": "true",
+            style: {
+              position: "absolute",
+              width: 1,
+              height: 1,
+              overflow: "hidden",
+              clip: "rect(0 0 0 0)"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { htmlFor: `${form.key}-company-website`, children: "Empresa" }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "input",
+                {
+                  id: `${form.key}-company-website`,
+                  name: "company_website",
+                  tabIndex: -1,
+                  autoComplete: "off",
+                  value: honeypot,
+                  onChange: (event) => setHoneypot(event.target.value)
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h2", { className: props.classNames?.title, children: form.name }),
+        form.description ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: props.classNames?.description, children: form.description }) : null,
+        activeStep ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("section", { className: props.classNames?.step, "data-bacano-form-step": true, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h3", { className: props.classNames?.stepTitle, children: activeStep.title }),
+          activeStep.description ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: props.classNames?.stepDescription, children: activeStep.description }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            FormFields,
+            {
+              fields: activeStep.fields,
+              values,
+              classNames: props.classNames,
+              onChange: setFieldValue
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            FormSections,
+            {
+              sections: activeStep.sections,
+              values,
+              classNames: props.classNames,
+              onChange: setFieldValue
+            }
+          )
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            FormFields,
+            {
+              fields,
+              values,
+              classNames: props.classNames,
+              onChange: setFieldValue
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            FormSections,
+            {
+              sections,
+              values,
+              classNames: props.classNames,
+              onChange: setFieldValue
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: props.classNames?.actions, children: [
+          isMultiStep && step > 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: () => setStep((current) => current - 1),
+              children: "Anterior"
+            }
+          ) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "button",
+            {
+              type: "submit",
+              className: props.classNames?.button,
+              disabled: submitting,
+              children: isLastStep ? form.definition.submitLabel : "Continuar"
+            }
+          )
+        ] }),
+        submissionError ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "div",
+          {
+            role: "alert",
+            className: props.classNames?.message,
+            "data-bacano-form-error": true,
+            children: submissionError.message
+          }
+        ) : null
+      ]
+    }
+  );
+}

package/react/forms.d.ts

@@ -0,0 +1,49 @@
+import { type ReactNode } from "react";
+import type { WebsitePublishedForm } from "../types";
+export type BacanoFormValues = Record<string, string | string[] | boolean>;
+export interface UseBacanoFormOptions {
+    enabled?: boolean;
+    /** Definition embedded by a server/build to preserve Static First rendering. */
+    initialForm?: WebsitePublishedForm | null;
+}
+export interface UseBacanoFormResult {
+    form: WebsitePublishedForm | null;
+    loading: boolean;
+    error: Error | null;
+    refresh(): Promise<void>;
+}
+export declare function useBacanoForm(formKey: string, options?: UseBacanoFormOptions): UseBacanoFormResult;
+export interface BacanoFormClassNames {
+    root?: string;
+    title?: string;
+    description?: string;
+    section?: string;
+    sectionTitle?: string;
+    sectionDescription?: string;
+    step?: string;
+    stepTitle?: string;
+    stepDescription?: string;
+    field?: string;
+    label?: string;
+    input?: string;
+    helpText?: string;
+    actions?: string;
+    button?: string;
+    message?: string;
+}
+export interface BacanoFormProps {
+    formKey: string;
+    /** Definition embedded by a server/build; it is revalidated in runtime. */
+    initialForm?: WebsitePublishedForm | null;
+    /**
+     * Optional custom submission. When omitted, the official Bacano response
+     * endpoint is used. Existing storefronts may keep a custom handler.
+     */
+    onSubmit?(values: BacanoFormValues, form: WebsitePublishedForm): void | Promise<void>;
+    onSubmitted?(responseId: string | null): void;
+    classNames?: BacanoFormClassNames;
+    loadingFallback?: ReactNode;
+    unavailableFallback?: ReactNode;
+    errorFallback?: (error: Error) => ReactNode;
+}
+export declare function BacanoForm(props: BacanoFormProps): import("react").JSX.Element;