Обратный звонок на React

"use client";
import {useEffect, useRef, useState} from 'react';

const ENDPOINT = "YOUR_FORM_ENDPOINT";
const styles = "\n.priletela-embedded{max-width:560px;width:100%;margin:0 auto;padding:16px;box-sizing:border-box;font:16px/1.5 Arial,sans-serif;color:#111412;letter-spacing:0}\n.priletela-embedded form{display:grid;gap:16px;margin:0;padding:0}\n.priletela-embedded label{display:block;margin:0;font:inherit}\n.priletela-embedded input,.priletela-embedded textarea,.priletela-embedded button{box-sizing:border-box;max-width:100%;min-width:0;font:inherit;border-radius:6px}\n.priletela-embedded input:not([type=checkbox]),.priletela-embedded textarea{display:block;width:100%;margin:6px 0 0;padding:12px;border:1px solid #99aaa1;background:#fff;color:#111412}\n.priletela-embedded textarea{min-height:120px;resize:vertical}\n.priletela-embedded input[type=checkbox]{width:18px;height:18px;margin:0 8px 0 0;vertical-align:middle;accent-color:#0b6b50}\n.priletela-embedded input[hidden]{display:none}\n.priletela-embedded button{justify-self:start;min-height:44px;padding:10px 20px;border:0;background:#0b6b50;color:#fff;cursor:pointer}\n.priletela-embedded button:disabled{opacity:.6;cursor:wait}\n.priletela-embedded a{color:#0b6b50;text-decoration:underline}\n.priletela-embedded :focus-visible{outline:2px solid #0b6b50;outline-offset:3px}\n.priletela-embedded [data-priletela-status]{margin:0;overflow-wrap:anywhere}\n";

function createSubmissionClient(endpoint, onBusy, onStatus) {
  let attempt = null, pending = false, disposed = false, controller = null, timer = null;
  return {
    async submit(form) {
      if (disposed || pending || !form.reportValidity()) return;
      const body = new URLSearchParams(new FormData(form)).toString();
      for (const [name, value] of new URLSearchParams(body)) {
        if (name !== 'website' && value.trim().length > 20000) {
          onStatus('Поле «' + name + '» превышает 20000 символов. Сократите текст.');
          return;
        }
      }
      if (new TextEncoder().encode(body).byteLength > 512 * 1024) {
        onStatus('Объём заявки превышает 512 КБ. Сократите текст. Поля сохранены.');
        return;
      }
      if (attempt && attempt.body !== body && !window.confirm(
        'Данные изменены. Предыдущая заявка могла сохраниться. Отправить новое обращение?'
      )) return;
      try {
        if (!attempt || attempt.body !== body) {
          const bytes = new Uint8Array(16);
          window.crypto.getRandomValues(bytes);
          attempt = {body, key: Array.from(bytes, b => b.toString(16).padStart(2, '0')).join('')};
        }
      } catch {
        onStatus('Браузер не поддерживает безопасную отправку. Обновите браузер.');
        return;
      }
      pending = true;
      onBusy(true);
      onStatus('Отправляем заявку…');
      controller = new AbortController();
      timer = setTimeout(() => controller.abort(), 25000);
      try {
        const response = await fetch(endpoint, {
          method: 'POST', credentials: 'omit', signal: controller.signal,
          headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8', 'Idempotency-Key': attempt.key},
          body: attempt.body
        });
        if (response.status === 429) throw new Error('Слишком много попыток. Подождите минуту и повторите отправку.');
        if (response.status === 409) throw new Error('Ключ отправки связан с другими данными. Свяжитесь с владельцем сайта.');
        if (response.status === 404) throw new Error('Форма недоступна. Свяжитесь с владельцем сайта.');
        if (response.status === 413) throw new Error('Объём заявки превышает 512 КБ. Сократите текст. Поля сохранены.');
        const result = await response.json();
        if (response.status === 400 && typeof result?.error === 'string') throw new Error(result.error);
        if (!response.ok || result?.ok !== true) throw new Error('Не удалось отправить заявку. Поля сохранены; повторите попытку.');
        if (disposed) return;
        form.reset();
        attempt = null;
        onStatus(result.test ? 'Пробная заявка принята. Вернитесь в мастер подключения.' : 'Спасибо! Ваша заявка принята.');
      } catch (error) {
        if (!disposed) onStatus(error instanceof Error && error.name === 'Error'
          ? error.message
          : 'Подтверждение не получено. Поля сохранены. Повторите без изменения данных: будет использован тот же ключ.');
      } finally {
        clearTimeout(timer);
        controller = null;
        pending = false;
        if (!disposed) onBusy(false);
      }
    },
    dispose() { disposed = true; clearTimeout(timer); controller?.abort(); }
  };
}

export default function PriletelaForm() {
  const client = useRef(null);
  const [ready, setReady] = useState(false);
  const [busy, setBusy] = useState(false);
  const [status, setStatus] = useState('Отправка пока недоступна. Дождитесь загрузки JavaScript.');
  useEffect(() => {
    const connection = createSubmissionClient(ENDPOINT, setBusy, setStatus);
    client.current = connection;
    setReady(true);
    setStatus('');
    return () => { connection.dispose(); client.current = null; };
  }, []);
  return <div className="priletela-embedded">
    <style>{styles}</style>
    <form method="POST" action={ENDPOINT} aria-busy={busy} onSubmit={event => {
      event.preventDefault();
      client.current?.submit(event.currentTarget);
    }}>
      <fieldset disabled={!ready || busy} style={{border: 0, padding: 0, margin: 0, minWidth: 0, display: 'grid', gap: 16}}>
        <label>{"Ваше имя"} <input type="text" name={"name"} maxLength={20000} /></label>
        <label>{"Телефон"} <input type="tel" name={"phone"} maxLength={20000} required /></label>
        <input type="text" name="website" hidden tabIndex={-1} autoComplete="off" aria-hidden="true" />
        <label><input type="checkbox" name="consent" value="yes" required /> Согласен на обработку данных на условиях <a href="YOUR_POLICY_URL" target="_blank" rel="noopener noreferrer">политики владельца сайта</a></label>
        <button type="submit">{busy ? 'Отправляем…' : 'Отправить'}</button>
      </fieldset>
      <p data-priletela-status role="status" aria-live="polite" aria-atomic="true">{status}</p>
    </form>
  </div>;
}