Forms

const { data: form, error } = await client.forms.get('kontakt');

if (error || !form) {
  // 404 for an unknown or inactive slug
}

// form.name, form.description
// form.fields: SiteFormField[]  (render by field.type, see below)
// form.settings: { submitLabel?, successMessage?, redirectUrl?, consentText?, requireConsent? }

const { data, error } = await client.forms.submit('kontakt', {
  data: { name: 'Jana', email: '[email protected]', message: 'Hello' },
  locale: 'cs',
  page: window.location.href,   // optional context for the merchant
  consent: true,                // required when settings.requireConsent
  website: honeypotValue,       // honeypot, see below
});

if (data?.ok) {
  // data.message = settings.successMessage (or null)
  // data.redirectUrl = settings.redirectUrl (or null): navigate there when set
}

import { formFieldErrors, errorMessage } from '@behio/storefront-sdk';

const { error } = await client.forms.submit('kontakt', { data });
if (error) {
  const perField = formFieldErrors(error);
  // [{ key: 'email', code: 'invalid' }, { key: 'message', code: 'required' }]
  const general = perField.length ? null : errorMessage(error, 'cs');
}

const { data: file, error } = await behio.forms.uploadFile("demand", "attachment", input.files[0]);
// error.code: be.forms.fileTypeNotAllowed | be.forms.fileTooLarge (params.maxMb)
//             | be.forms.fileRateLimited | be.forms.fileUploadIncomplete
if (file) {
  await behio.forms.submit("demand", { data: { attachment: [file.id] } });
} else {
  // Show the upload error and allow retry. Do not submit an unconfirmed id.
}

'use client';

import { useState } from 'react';
import { useSiteFormSubmit } from '@behio/storefront-sdk/react';
import type { SiteFormField, StorefrontForm } from '@behio/storefront-sdk';

export function SiteForm({ form }: { form: StorefrontForm }) {
  const [values, setValues] = useState<Record<string, unknown>>(() =>
    Object.fromEntries(form.fields.map((f) => [f.key, f.defaultValue ?? (f.type === 'multiselect' ? [] : f.type === 'checkbox' ? false : '')])),
  );
  const [consent, setConsent] = useState(false);
  const [website, setWebsite] = useState(''); // honeypot
  const submit = useSiteFormSubmit(form.slug);

  if (submit.isSuccess) {
    if (submit.result?.redirectUrl) window.location.assign(submit.result.redirectUrl);
    return <p role="status">{submit.result?.message ?? 'Thank you.'}</p>;
  }

  const set = (key: string, value: unknown) => setValues((v) => ({ ...v, [key]: value }));

  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        submit.submit({ data: values, consent, website, page: window.location.href });
      }}
      noValidate
    >
      {form.fields.map((field) => (
        <Field key={field.key} field={field} value={values[field.key]} onChange={(v) => set(field.key, v)} error={submit.fieldErrors[field.key]} />
      ))}

      <input type="text" name="website" value={website} onChange={(e) => setWebsite(e.target.value)} tabIndex={-1} autoComplete="off" aria-hidden style={{ position: 'absolute', left: '-10000px' }} />

      {form.settings.requireConsent ? (
        <label>
          <input type="checkbox" checked={consent} onChange={(e) => setConsent(e.target.checked)} />
          {form.settings.consentText}
        </label>
      ) : null}

      {submit.errorCode && !Object.keys(submit.fieldErrors).length ? <p role="alert">{submit.errorCode}</p> : null}

      <button type="submit" disabled={submit.isSubmitting}>
        {form.settings.submitLabel ?? 'Send'}
      </button>
    </form>
  );
}

function Field({ field, value, onChange, error }: { field: SiteFormField; value: unknown; onChange: (v: unknown) => void; error?: string }) {
  if (field.type === 'hidden') return <input type="hidden" name={field.key} value={String(value ?? '')} />;

  let control: React.ReactNode;
  switch (field.type) {
    case 'textarea':
      control = <textarea value={String(value ?? '')} onChange={(e) => onChange(e.target.value)} placeholder={field.placeholder} />;
      break;
    case 'select':
      control = (
        <select value={String(value ?? '')} onChange={(e) => onChange(e.target.value)}>
          <option value="">{field.placeholder ?? ''}</option>
          {field.options?.map((o) => <option key={o.value} value={o.value}>{o.label}</option>)}
        </select>
      );
      break;
    case 'radio':
      control = field.options?.map((o) => (
        <label key={o.value}><input type="radio" name={field.key} checked={value === o.value} onChange={() => onChange(o.value)} /> {o.label}</label>
      ));
      break;
    case 'multiselect': {
      const selected = Array.isArray(value) ? (value as string[]) : [];
      control = field.options?.map((o) => (
        <label key={o.value}>
          <input type="checkbox" checked={selected.includes(o.value)} onChange={(e) => onChange(e.target.checked ? [...selected, o.value] : selected.filter((v) => v !== o.value))} /> {o.label}
        </label>
      ));
      break;
    }
    case 'checkbox':
      control = <input type="checkbox" checked={value === true} onChange={(e) => onChange(e.target.checked)} />;
      break;
    default:
      control = (
        <input
          type={
            field.type === 'email' ? 'email'
            : field.type === 'phone' ? 'tel'
            : field.type === 'number' ? 'number'
            : field.type === 'date' ? 'date'
            : field.type === 'time' ? 'time'
            : field.type === 'datetime' ? 'datetime-local'
            : field.type === 'url' ? 'url'
            : 'text'
          }
          value={String(value ?? '')}
          onChange={(e) => onChange(field.type === 'number' ? e.target.valueAsNumber : e.target.value)}
          placeholder={field.placeholder}
          min={field.type === 'number' ? field.min : undefined}
          max={field.type === 'number' ? field.max : undefined}
          minLength={field.type !== 'number' ? field.min : undefined}
          maxLength={field.type !== 'number' ? field.max : undefined}
          pattern={field.pattern}
        />
      );
  }

  return (
    <div>
      <label>{field.label}{field.required ? ' *' : ''}</label>
      {control}
      {field.help ? <small>{field.help}</small> : null}
      {error ? <small role="alert">{error}</small> : null}
    </div>
  );
}

import { useSiteForm, useSiteFormSubmit } from '@behio/storefront-sdk/react';

const { data: form } = useSiteForm('kontakt');
const { submit, isSubmitting, isSuccess, result, fieldErrors, errorCode, error, reset } = useSiteFormSubmit('kontakt');