@escapenavigator/hooks 2.1.22 → 2.1.24

package/dist/consent-checkboxes/build-consent-urls.d.ts

@@ -15,11 +15,15 @@ type BuildConsentUrlsParams = {
 export type ConsentUrls = {
     agreementUrl: string;
     policyUrl: string;
+    /** Согласие на обработку ПДн площадки (нужно только площадкам из РФ). */
+    pdConsentUrl: string;
 };
 /**
  * Строит публичные ссылки для блока согласий:
  *  - агримент: `/company/:slug/terms-of-services` (пусто, если нет slug);
- *  - политика: `/documents/privacy_policy/:language`.
+ *  - политика: `/company/:slug/privacy-policy` — оператор ПДн площадка,
+ *    без slug (или без своей политики) — `/documents/privacy_policy/:language`;
+ *  - согласие на ПДн: `/company/:slug/personal-data-consent`.
  */
 export declare const buildConsentUrls: ({ baseUrl, slug, language, }: BuildConsentUrlsParams) => ConsentUrls;
 export {};

package/dist/consent-checkboxes/build-consent-urls.js

@@ -4,14 +4,20 @@ exports.buildConsentUrls = void 0;
 /**
  * Строит публичные ссылки для блока согласий:
  *  - агримент: `/company/:slug/terms-of-services` (пусто, если нет slug);
- *  - политика: `/documents/privacy_policy/:language`.
+ *  - политика: `/company/:slug/privacy-policy` — оператор ПДн площадка,
+ *    без slug (или без своей политики) — `/documents/privacy_policy/:language`;
+ *  - согласие на ПДн: `/company/:slug/personal-data-consent`.
  */
 const buildConsentUrls = ({ baseUrl, slug, language, }) => {
     const base = (baseUrl || '').replace(/\/+$/, '');
     const lang = language || 'en';
+    const company = slug ? `${base}/company/${slug}` : '';
     return {
-        agreementUrl: slug ? `${base}/company/${slug}/terms-of-services` : '',
-        policyUrl: `${base}/documents/privacy_policy/${lang}`,
+        agreementUrl: company ? `${company}/terms-of-services` : '',
+        policyUrl: company
+            ? `${company}/privacy-policy`
+            : `${base}/documents/privacy_policy/${lang}`,
+        pdConsentUrl: company ? `${company}/personal-data-consent` : '',
     };
 };
 exports.buildConsentUrls = buildConsentUrls;

package/dist/consent-checkboxes/index.d.ts

@@ -2,16 +2,24 @@ import React from 'react';
 import { buildConsentUrls, ConsentUrls } from './build-consent-urls';
 export type { ConsentUrls };
 export { buildConsentUrls };
-export type ConsentField = 'agreeTerms' | 'agreePolicy' | 'sendAds';
+export type ConsentField = 'agreeTerms' | 'agreePolicy' | 'sendAds' | 'pdConsent';
 export type ConsentValues = Record<ConsentField, boolean>;
 export declare const INITIAL_CONSENT_VALUES: ConsentValues;
-/** Обязательные согласия отмечены — можно подтверждать заказ/подпись. */
+/**
+ * Обязательные согласия отмечены — можно подтверждать заказ/подпись.
+ * `pdConsent` без отдельной галочки (вне РФ) ставится вместе с основной.
+ */
 export declare const areRequiredConsentsAccepted: (values: ConsentValues) => boolean;
 type Props = {
     /** Ссылка на клиентское соглашение оператора. */
     agreementUrl: string;
     /** Ссылка на политику конфиденциальности. */
     policyUrl: string;
+    /**
+     * Ссылка на согласие на обработку ПДн. Передаётся только площадкам из РФ:
+     * по 152-ФЗ согласие — отдельная галочка, не смешанная с другими документами.
+     */
+    pdConsentUrl?: string;
     values: ConsentValues;
     onChange: (field: ConsentField, checked: boolean) => void;
     /**

package/dist/consent-checkboxes/index.js

@@ -8,6 +8,7 @@ exports.ConsentCheckboxes = exports.areRequiredConsentsAccepted = exports.INITIA
 const ui_1 = require("@alphakits/ui");
 const react_1 = __importDefault(require("react"));
 const react_i18next_1 = require("react-i18next");
+const personal_data_consent_1 = require("../personal-data-consent");
 const build_consent_urls_1 = require("./build-consent-urls");
 Object.defineProperty(exports, "buildConsentUrls", { enumerable: true, get: function () { return build_consent_urls_1.buildConsentUrls; } });
 const index_module_css_1 = __importDefault(require("./index.module.css"));
@@ -15,20 +16,28 @@ exports.INITIAL_CONSENT_VALUES = {
     agreeTerms: false,
     agreePolicy: false,
     sendAds: false,
+    pdConsent: false,
 };
-/** Обязательные согласия отмечены — можно подтверждать заказ/подпись. */
-const areRequiredConsentsAccepted = (values) => values.agreeTerms && values.agreePolicy;
+/**
+ * Обязательные согласия отмечены — можно подтверждать заказ/подпись.
+ * `pdConsent` без отдельной галочки (вне РФ) ставится вместе с основной.
+ */
+const areRequiredConsentsAccepted = (values) => values.agreeTerms && values.agreePolicy && values.pdConsent;
 exports.areRequiredConsentsAccepted = areRequiredConsentsAccepted;
 const labelColor = (invalid) => invalid ? 'negative' : 'secondary';
-const ConsentCheckboxes = ({ agreementUrl, policyUrl, values, onChange, hideMarketing, showRequiredError, }) => {
+const ConsentCheckboxes = ({ agreementUrl, policyUrl, pdConsentUrl, values, onChange, hideMarketing, showRequiredError, }) => {
     const { t } = (0, react_i18next_1.useTranslation)('common');
+    const separatePdConsent = !!pdConsentUrl;
     // Агримент + политику объединили в одну обязательную галочку: меньше
     // «трения» на экране оплаты. Обе ссылки внутри одной переводимой строки.
     const requiredAccepted = values.agreeTerms && values.agreePolicy;
     const requiredInvalid = !!showRequiredError && !requiredAccepted;
+    const pdConsentInvalid = !!showRequiredError && !values.pdConsent;
     const setRequired = (checked) => {
         onChange('agreeTerms', checked);
         onChange('agreePolicy', checked);
+        if (!separatePdConsent)
+            onChange('pdConsent', checked);
     };
     return (react_1.default.createElement("div", { className: [index_module_css_1.default.wrapper, showRequiredError ? index_module_css_1.default.shake : ''].join(' ').trim() },
         react_1.default.createElement(ui_1.FlexColumns, { columns: 1, gr: 8 },
@@ -37,6 +46,8 @@ const ConsentCheckboxes = ({ agreementUrl, policyUrl, values, onChange, hideMark
                             react_1.default.createElement(ui_1.Link, { key: 'agreement', size: 's', target: '_blank', rel: 'noreferrer', className: index_module_css_1.default.link, href: agreementUrl }),
                             react_1.default.createElement(ui_1.Link, { key: 'policy', size: 's', target: '_blank', rel: 'noreferrer', className: index_module_css_1.default.link, href: policyUrl }),
                         ] })) }),
+            separatePdConsent && (react_1.default.createElement(ui_1.Checkbox, { size: 's', align: 'start', block: true, checked: values.pdConsent, onChange: (_e, { checked }) => onChange('pdConsent', checked), label: react_1.default.createElement(ui_1.Typography.Text, { view: 'caps', color: labelColor(pdConsentInvalid) },
+                    react_1.default.createElement(personal_data_consent_1.PersonalDataConsentLabel, { consentUrl: pdConsentUrl })) })),
             !hideMarketing && (react_1.default.createElement(ui_1.Checkbox, { size: 's', align: 'start', block: true, checked: values.sendAds, onChange: (_e, { checked }) => onChange('sendAds', checked), label: react_1.default.createElement(ui_1.Typography.Text, { view: 'caps', color: 'secondary' }, t('consent.marketing', "I'd like to receive special offers, promotions and news — no spam, unsubscribe anytime")) })),
             showRequiredError && (react_1.default.createElement(ui_1.Typography.Text, { view: 'caps', color: 'negative' }, t('consent.required', 'Please accept the required agreements to continue'))))));
 };

package/dist/index.d.ts

@@ -3,6 +3,7 @@ export * from './functional-popover';
 export * from './input-tel';
 export * from './lazy-with-retry';
 export * from './lead-form';
+export * from './personal-data-consent';
 export * from './players-and-variation-picker';
 export * from './use-debounced-value';
 export * from './use-localstore-state';

package/dist/index.js

@@ -19,6 +19,7 @@ __exportStar(require("./functional-popover"), exports);
 __exportStar(require("./input-tel"), exports);
 __exportStar(require("./lazy-with-retry"), exports);
 __exportStar(require("./lead-form"), exports);
+__exportStar(require("./personal-data-consent"), exports);
 __exportStar(require("./players-and-variation-picker"), exports);
 __exportStar(require("./use-debounced-value"), exports);
 __exportStar(require("./use-localstore-state"), exports);

package/dist/lead-form/lead-field.js

@@ -9,6 +9,7 @@ const MinusM_1 = __importDefault(require("@alphakits/icons/dist/MinusM"));
 const PlusM_1 = __importDefault(require("@alphakits/icons/dist/PlusM"));
 const ui_1 = require("@alphakits/ui");
 const lead_field_type_enum_1 = require("@escapenavigator/types/dist/lead/enums/lead-field-type.enum");
+const lead_time_constants_1 = require("@escapenavigator/types/dist/lead/lead-time.constants");
 const react_1 = __importDefault(require("react"));
 const input_tel_1 = require("../input-tel");
 const index_module_css_1 = __importDefault(require("./index.module.css"));
@@ -25,6 +26,20 @@ const buildTimeOptions = () => {
     return out;
 };
 const TIME_OPTIONS = buildTimeOptions();
+/** Больше трёх вариантов в ряд пилюль не влезает на мобиле — раскладываем плитками. */
+const TILES_FROM = 4;
+/**
+ * Радио и чекбоксы площадки — кнопками-вариантами: один тап вместо попадания
+ * в кружок, и форма читается как выбор, а не как анкета.
+ */
+const ChoiceGroup = ({ label, options, isSelected, onToggle, hint, error, }) => (react_1.default.createElement(ui_1.FlexColumns, { columns: 1, gr: 8 },
+    react_1.default.createElement(ui_1.Typography.Text, { view: 'primary-small', weight: 'medium', color: 'primary' }, label),
+    react_1.default.createElement("div", { role: 'group', "aria-label": label, className: options.length >= TILES_FROM ? index_module_css_1.default.choiceTiles : index_module_css_1.default.choicePills }, options.map((option) => {
+        const selected = isSelected(option.id);
+        return (react_1.default.createElement("button", { key: option.id, type: 'button', "aria-pressed": selected, className: index_module_css_1.default.choice, "data-selected": selected, "data-invalid": !!error, onClick: () => onToggle(option.id) }, option.label));
+    })),
+    hint,
+    !!error && (react_1.default.createElement(ui_1.Typography.Text, { view: 'caps', color: 'negative' }, error))));
 const LeadField = ({ field, value, error, language, profileCountry, questrooms, locations, onChange, onPhoneValidChange, }) => {
     var _a, _b;
     const t = (0, use_lead_t_1.useLeadT)();
@@ -41,6 +56,10 @@ const LeadField = ({ field, value, error, language, profileCountry, questrooms,
             hint));
     };
     const activeOptions = (field.options || []).filter((option) => option.active !== false);
+    const choiceOptions = activeOptions.map((option) => ({
+        id: option.id,
+        label: (0, lib_1.optionLabel)(option, language, option.id),
+    }));
     const referenceOptions = (items) => items.map((item) => ({ key: String(item.id), content: item.title }));
     switch (field.type) {
         case lead_field_type_enum_1.LeadFieldTypeEnum.PHONE:
@@ -53,9 +72,24 @@ const LeadField = ({ field, value, error, language, profileCountry, questrooms,
         case lead_field_type_enum_1.LeadFieldTypeEnum.DATE:
             return withHint(react_1.default.createElement(ui_1.CalendarInput, { block: true, label: label, lang: language, value: String(value || ''), error: error, onChange: (_e, payload) => onChange(payload.value) }));
         case lead_field_type_enum_1.LeadFieldTypeEnum.TIME:
-            return withHint(react_1.default.createElement(ui_1.Select, { block: true, optionsListWidth: 'field', label: label, options: value && !TIME_OPTIONS.some((option) => option.key === String(value))
-                    ? [{ key: String(value), content: String(value) }, ...TIME_OPTIONS]
-                    : TIME_OPTIONS, selected: String(value || ''), error: error, onChange: ({ selected }) => onChange(selected === null || selected === void 0 ? void 0 : selected.key) }));
+            return (react_1.default.createElement(ui_1.FlexColumns, { columns: 1, gr: 8 },
+                react_1.default.createElement(ui_1.Typography.Text, { view: 'primary-small', weight: 'medium', color: 'primary' }, label),
+                react_1.default.createElement("div", { className: index_module_css_1.default.timeChoices },
+                    react_1.default.createElement(ui_1.Select, { block: true, optionsListWidth: 'field', options: value &&
+                            value !== lead_time_constants_1.LEAD_TIME_UNDECIDED_VALUE &&
+                            !TIME_OPTIONS.some((option) => option.key === String(value))
+                            ? [
+                                { key: String(value), content: String(value) },
+                                ...TIME_OPTIONS,
+                            ]
+                            : TIME_OPTIONS, selected: value === lead_time_constants_1.LEAD_TIME_UNDECIDED_VALUE ? '' : String(value || ''), error: error, onChange: ({ selected }) => onChange(selected === null || selected === void 0 ? void 0 : selected.key) }),
+                    react_1.default.createElement("button", { type: 'button', className: index_module_css_1.default.timeUndecided, "data-selected": value === lead_time_constants_1.LEAD_TIME_UNDECIDED_VALUE, "aria-pressed": value === lead_time_constants_1.LEAD_TIME_UNDECIDED_VALUE, onClick: () => onChange(lead_time_constants_1.LEAD_TIME_UNDECIDED_VALUE) },
+                        react_1.default.createElement("span", { className: index_module_css_1.default.timeUndecidedIcon, "aria-hidden": 'true' },
+                            react_1.default.createElement("svg", { viewBox: '0 0 24 24', fill: 'none', "aria-hidden": 'true' },
+                                react_1.default.createElement("circle", { cx: '12', cy: '12', r: '8.25' }),
+                                react_1.default.createElement("path", { d: 'M12 7.75v4.6l3.05 1.8' }))),
+                        react_1.default.createElement("span", null, t('lead.timeUndecided')))),
+                hint));
         case lead_field_type_enum_1.LeadFieldTypeEnum.GUESTS: {
             const min = (_a = field.min) !== null && _a !== void 0 ? _a : 1;
             const max = (_b = field.max) !== null && _b !== void 0 ? _b : 30;
@@ -78,20 +112,12 @@ const LeadField = ({ field, value, error, language, profileCountry, questrooms,
                     content: (0, lib_1.optionLabel)(option, language, option.id),
                 })), selected: String(value || ''), error: error, onChange: ({ selected }) => onChange(selected === null || selected === void 0 ? void 0 : selected.key) }));
         case lead_field_type_enum_1.LeadFieldTypeEnum.RADIO:
-            return (react_1.default.createElement(ui_1.FlexColumns, { columns: 1, gr: 8 },
-                react_1.default.createElement(ui_1.Typography.Text, { view: 'primary-small', weight: 'medium', color: 'primary' }, label),
-                activeOptions.map((option) => (react_1.default.createElement(ui_1.Radio, { key: option.id, label: (0, lib_1.optionLabel)(option, language, option.id), checked: value === option.id, onChange: () => onChange(option.id) }))),
-                hint,
-                !!error && (react_1.default.createElement(ui_1.Typography.Text, { view: 'caps', color: 'negative' }, error))));
+            return (react_1.default.createElement(ChoiceGroup, { label: label, options: choiceOptions, isSelected: (id) => value === id, onToggle: (id) => onChange(id), hint: hint, error: error }));
         case lead_field_type_enum_1.LeadFieldTypeEnum.CHECKBOX: {
             const selected = Array.isArray(value) ? value : [];
-            return (react_1.default.createElement(ui_1.FlexColumns, { columns: 1, gr: 8 },
-                react_1.default.createElement(ui_1.Typography.Text, { view: 'primary-small', weight: 'medium', color: 'primary' }, label),
-                activeOptions.map((option) => (react_1.default.createElement(ui_1.Checkbox, { key: option.id, label: (0, lib_1.optionLabel)(option, language, option.id), checked: selected.includes(option.id), onChange: () => onChange(selected.includes(option.id)
-                        ? selected.filter((item) => item !== option.id)
-                        : [...selected, option.id]) }))),
-                hint,
-                !!error && (react_1.default.createElement(ui_1.Typography.Text, { view: 'caps', color: 'negative' }, error))));
+            return (react_1.default.createElement(ChoiceGroup, { label: label, options: choiceOptions, isSelected: (id) => selected.includes(id), onToggle: (id) => onChange(selected.includes(id)
+                    ? selected.filter((item) => item !== id)
+                    : [...selected, id]), hint: hint, error: error }));
         }
         case lead_field_type_enum_1.LeadFieldTypeEnum.QUESTROOM:
         case lead_field_type_enum_1.LeadFieldTypeEnum.LOCATION:

package/dist/lead-form/lead-form.d.ts

@@ -10,6 +10,7 @@ export type LeadFormSubmitPayload = {
     answers: SubmitLeadAnswerDto[];
     source: LeadSourceEnum;
     trap?: string;
+    pdConsent?: boolean;
 };
 /**
  * Отправку делает вызывающая сторона: из виджета заявка уходит с
@@ -41,6 +42,10 @@ type Props = {
     doneLabel?: string;
     /** Контейнер прячет свою шапку, чтобы экран успеха не конкурировал с названием. */
     onSuccess?: () => void;
+    /** Политика площадки в отношении ПДн — ссылка под формой. */
+    policyUrl?: string;
+    /** Документ согласия на обработку ПДн (галочка есть только в РФ). */
+    pdConsentUrl?: string;
 };
 export declare const LeadForm: React.FC<Props>;
 export {};

package/dist/lead-form/lead-form.js

@@ -48,13 +48,32 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LeadForm = void 0;
 const ui_1 = require("@alphakits/ui");
+const lead_field_type_enum_1 = require("@escapenavigator/types/dist/lead/enums/lead-field-type.enum");
 const react_1 = __importStar(require("react"));
+const personal_data_consent_1 = require("../personal-data-consent");
 const index_module_css_1 = __importDefault(require("./index.module.css"));
 const lead_field_1 = require("./lead-field");
 const lib_1 = require("./lib");
 const use_lead_t_1 = require("./use-lead-t");
-const LeadForm = ({ form, source, language, profileCountry, submit, prefill, contextNote, withHeader = true, onDone, doneLabel, onSuccess, }) => {
+const ArrowRight = () => (react_1.default.createElement("svg", { width: '18', height: '18', viewBox: '0 0 24 24', fill: 'none', "aria-hidden": 'true' },
+    react_1.default.createElement("path", { d: 'M5 12h14m-6-6 6 6-6 6', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round' })));
+const ArrowLeft = () => (react_1.default.createElement("svg", { width: '16', height: '16', viewBox: '0 0 24 24', fill: 'none', "aria-hidden": 'true' },
+    react_1.default.createElement("path", { d: 'M19 12H5m6 6-6-6 6-6', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round' })));
+const PLANNING_FIELD_TYPES = new Set([
+    lead_field_type_enum_1.LeadFieldTypeEnum.SELECT,
+    lead_field_type_enum_1.LeadFieldTypeEnum.RADIO,
+    lead_field_type_enum_1.LeadFieldTypeEnum.CHECKBOX,
+    lead_field_type_enum_1.LeadFieldTypeEnum.QUESTROOM,
+    lead_field_type_enum_1.LeadFieldTypeEnum.LOCATION,
+    lead_field_type_enum_1.LeadFieldTypeEnum.GUESTS,
+    lead_field_type_enum_1.LeadFieldTypeEnum.NUMBER,
+]);
+const LeadForm = ({ form, source, language, profileCountry, submit, prefill, contextNote, withHeader = true, onDone, doneLabel, onSuccess, policyUrl, pdConsentUrl, }) => {
     const t = (0, use_lead_t_1.useLeadT)();
+    const consentRequired = (0, personal_data_consent_1.requiresPersonalDataConsent)(profileCountry);
+    const [consent, setConsent] = (0, react_1.useState)(false);
+    const [showConsentError, setShowConsentError] = (0, react_1.useState)(false);
+    const [step, setStep] = (0, react_1.useState)(1);
     const [values, setValues] = (0, react_1.useState)(() => (0, lib_1.buildInitialValues)(form, prefill));
     const [errors, setErrors] = (0, react_1.useState)({});
     const [formError, setFormError] = (0, react_1.useState)();
@@ -68,14 +87,74 @@ const LeadForm = ({ form, source, language, profileCountry, submit, prefill, con
         setErrors((prev) => (prev[fieldId] ? Object.assign(Object.assign({}, prev), { [fieldId]: '' }) : prev));
         setFormError(undefined);
     };
+    const visibleFields = form.fields.filter((field) => (0, lib_1.isVisible)(field, values));
+    const planningFields = visibleFields.filter((field) => PLANNING_FIELD_TYPES.has(field.type));
+    const contactFields = visibleFields.filter((field) => !PLANNING_FIELD_TYPES.has(field.type));
+    const hasTwoSteps = planningFields.length > 0 && contactFields.length > 0;
+    const activeFields = !hasTwoSteps ? visibleFields : step === 1 ? planningFields : contactFields;
+    const planningFieldIds = new Set(planningFields.map((field) => field.id));
+    const planningSummary = planningFields
+        .map((field) => {
+        var _a, _b, _c;
+        const value = values[field.id];
+        if (value === undefined || value === '' || value === false)
+            return '';
+        if (Array.isArray(value)) {
+            return value
+                .map((id) => {
+                var _a;
+                const selected = (_a = field.options) === null || _a === void 0 ? void 0 : _a.find((item) => item.id === id);
+                return selected ? (0, lib_1.optionLabel)(selected, language, id) : id;
+            })
+                .join(', ');
+        }
+        if (typeof value === 'string' && ((_a = field.options) === null || _a === void 0 ? void 0 : _a.length)) {
+            const selected = field.options.find((item) => item.id === value);
+            return selected ? (0, lib_1.optionLabel)(selected, language, value) : value;
+        }
+        if (field.type === lead_field_type_enum_1.LeadFieldTypeEnum.QUESTROOM) {
+            return (((_b = form.questrooms.find((item) => String(item.id) === String(value))) === null || _b === void 0 ? void 0 : _b.title) || '');
+        }
+        if (field.type === lead_field_type_enum_1.LeadFieldTypeEnum.LOCATION) {
+            return (((_c = form.locations.find((item) => String(item.id) === String(value))) === null || _c === void 0 ? void 0 : _c.title) || '');
+        }
+        if (field.type === lead_field_type_enum_1.LeadFieldTypeEnum.GUESTS ||
+            field.type === lead_field_type_enum_1.LeadFieldTypeEnum.NUMBER) {
+            return `${(0, lib_1.fieldTitle)(field, language)}: ${String(value)}`;
+        }
+        return String(value);
+    })
+        .filter(Boolean);
+    const handleNext = () => {
+        const result = (0, lib_1.validate)({
+            form,
+            values,
+            phoneValid,
+            t,
+            fieldIds: planningFieldIds,
+            requireContact: false,
+        });
+        if (Object.keys(result.errors).length) {
+            setErrors(result.errors);
+            return;
+        }
+        setErrors({});
+        setFormError(undefined);
+        setStep(2);
+    };
     const handleSubmit = () => __awaiter(void 0, void 0, void 0, function* () {
         var _a;
         if (sending)
             return;
         const result = (0, lib_1.validate)({ form, values, phoneValid, t });
-        if (Object.keys(result.errors).length || result.formError) {
+        const consentMissing = consentRequired && !consent;
+        setShowConsentError(consentMissing);
+        if (Object.keys(result.errors).length || result.formError || consentMissing) {
             setErrors(result.errors);
             setFormError(result.formError);
+            if (Object.keys(result.errors).some((fieldId) => planningFieldIds.has(fieldId))) {
+                setStep(1);
+            }
             return;
         }
         setSending(true);
@@ -85,6 +164,7 @@ const LeadForm = ({ form, source, language, profileCountry, submit, prefill, con
             answers: (0, lib_1.buildAnswers)(form, values, contextNote),
             source,
             trap: trap || undefined,
+            pdConsent: consentRequired ? consent : undefined,
         });
         setSending(false);
         if (!(response === null || response === void 0 ? void 0 : response.data)) {
@@ -109,17 +189,42 @@ const LeadForm = ({ form, source, language, profileCountry, submit, prefill, con
     }
     const title = (0, lib_1.localized)(form.clientTitle, language) || t('lead.title');
     const description = (0, lib_1.localized)(form.description, language);
-    return (react_1.default.createElement(ui_1.FlexColumns, { columns: 1, gr: 16 },
-        withHeader && (react_1.default.createElement(ui_1.FlexColumns, { columns: 1, gr: 4 },
-            react_1.default.createElement(ui_1.Typography.Title, { tag: 'h1', view: 'small', weight: 'bold' }, title),
-            !!description && (react_1.default.createElement(ui_1.Typography.Text, { view: 'primary-small', color: 'secondary' }, description)))),
+    const stepLabel = step === 1 ? t('lead.stepPlanning') : t('lead.stepContacts');
+    const headerTitle = hasTwoSteps && step === 2 ? t('lead.stepContactsTitle') : title;
+    const headerDescription = hasTwoSteps && step === 2 ? t('lead.stepContactsHint') : description;
+    return (react_1.default.createElement("div", { className: index_module_css_1.default.form },
+        withHeader && (react_1.default.createElement("div", { className: index_module_css_1.default.header },
+            hasTwoSteps ? (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement("div", { className: index_module_css_1.default.stepMeta },
+                    step === 2 ? (react_1.default.createElement("button", { type: 'button', className: index_module_css_1.default.backButton, onClick: () => setStep(1) },
+                        react_1.default.createElement(ArrowLeft, null),
+                        t('lead.back'))) : (react_1.default.createElement("span", null)),
+                    react_1.default.createElement("span", null, t('lead.stepCounter', {
+                        current: step,
+                        label: stepLabel,
+                    }))),
+                react_1.default.createElement("div", { className: index_module_css_1.default.progress, "aria-hidden": 'true' },
+                    react_1.default.createElement("span", { "data-step": step })))) : (react_1.default.createElement("span", { className: index_module_css_1.default.headerAccent, "aria-hidden": 'true' })),
+            react_1.default.createElement(ui_1.Typography.Title, { tag: 'h1', view: 'small', weight: 'bold' }, headerTitle),
+            !!headerDescription && (react_1.default.createElement(ui_1.Typography.Text, { view: 'primary-small', color: 'secondary' }, headerDescription)))),
         !!formError && react_1.default.createElement(ui_1.ToastPlate, { view: 'negative' }, formError),
-        form.fields
-            .filter((field) => (0, lib_1.isVisible)(field, values))
-            .map((field) => (react_1.default.createElement(lead_field_1.LeadField, { key: field.id, field: field, value: values[field.id], error: errors[field.id], language: language, profileCountry: profileCountry, questrooms: form.questrooms, locations: form.locations, onChange: (value) => setValue(field.id, value), onPhoneValidChange: setPhoneValid }))),
+        hasTwoSteps && step === 2 && !!planningSummary.length && (react_1.default.createElement("div", { className: index_module_css_1.default.selectionSummary },
+            react_1.default.createElement("div", null,
+                react_1.default.createElement("span", null, t('lead.selection')),
+                react_1.default.createElement("strong", null, planningSummary.join(' · '))),
+            react_1.default.createElement("button", { type: 'button', onClick: () => setStep(1) }, t('lead.edit')))),
+        react_1.default.createElement("div", { key: hasTwoSteps ? step : 'single', className: index_module_css_1.default.fields, "data-step": hasTwoSteps ? step : 1 }, activeFields.map((field) => (react_1.default.createElement("div", { key: field.id, className: index_module_css_1.default.fieldCard, "data-field-type": field.type },
+            react_1.default.createElement(lead_field_1.LeadField, { field: field, value: values[field.id], error: errors[field.id], language: language, profileCountry: profileCountry, questrooms: form.questrooms, locations: form.locations, onChange: (value) => setValue(field.id, value), onPhoneValidChange: setPhoneValid }))))),
         react_1.default.createElement("input", { className: index_module_css_1.default.trap, tabIndex: -1, autoComplete: 'off', "aria-hidden": 'true', value: trap, onChange: (event) => setTrap(event.target.value) }),
-        react_1.default.createElement(ui_1.Button, { view: 'primary', size: 's', block: true, loading: sending, onClick: handleSubmit }, sending
-            ? t('lead.sending')
-            : (0, lib_1.localized)(form.submitLabel, language) || t('lead.submit'))));
+        react_1.default.createElement("div", { className: index_module_css_1.default.footer }, hasTwoSteps && step === 1 ? (react_1.default.createElement(ui_1.Button, { view: 'primary', size: 's', block: true, rightAddons: react_1.default.createElement(ArrowRight, null), onClick: handleNext }, t('lead.next'))) : (react_1.default.createElement(react_1.default.Fragment, null,
+            (consentRequired || !!policyUrl) && (react_1.default.createElement(personal_data_consent_1.PersonalDataConsent, { required: consentRequired, consentUrl: pdConsentUrl || '', policyUrl: policyUrl || '', checked: consent, showError: showConsentError, onChange: (checked) => {
+                    setConsent(checked);
+                    if (checked)
+                        setShowConsentError(false);
+                } })),
+            react_1.default.createElement(ui_1.Button, { view: 'primary', size: 's', block: true, loading: sending, rightAddons: sending ? undefined : react_1.default.createElement(ArrowRight, null), onClick: handleSubmit }, sending
+                ? t('lead.sending')
+                : (0, lib_1.localized)(form.submitLabel, language) || t('lead.submit')),
+            react_1.default.createElement(ui_1.Typography.Text, { view: 'caps', color: 'secondary', className: index_module_css_1.default.footnote, tag: 'div' }, t('lead.footnote')))))));
 };
 exports.LeadForm = LeadForm;

package/dist/lead-form/lib.d.ts

@@ -37,13 +37,17 @@ type ValidateContext = {
     /** `InputTel` сам знает, валиден ли номер для выбранной страны. */
     phoneValid: boolean;
     t: (key: string) => string;
+    /** Для перехода между шагами проверяем только поля текущего шага. */
+    fieldIds?: Set<string>;
+    /** На первом шаге контакт ещё не спрашивали — общая проверка не нужна. */
+    requireContact?: boolean;
 };
 /**
  * Валидация на клиенте — это про удобство: сервер всё равно перепроверит
  * обязательность и наличие канала связи. Возвращаем ошибки по id поля плюс
  * общую ошибку формы.
  */
-export declare const validate: ({ form, values, phoneValid, t, }: ValidateContext) => {
+export declare const validate: ({ form, values, phoneValid, t, fieldIds, requireContact, }: ValidateContext) => {
     errors: Record<string, string>;
     formError?: string;
 };

package/dist/lead-form/lib.js

@@ -101,11 +101,13 @@ const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/;
  * обязательность и наличие канала связи. Возвращаем ошибки по id поля плюс
  * общую ошибку формы.
  */
-const validate = ({ form, values, phoneValid, t, }) => {
+const validate = ({ form, values, phoneValid, t, fieldIds, requireContact = true, }) => {
     const errors = {};
     let hasPhone = false;
     let hasEmail = false;
     for (const field of form.fields) {
+        if (fieldIds && !fieldIds.has(field.id))
+            continue;
         if (!(0, exports.isVisible)(field, values))
             continue;
         const value = values[field.id];
@@ -133,7 +135,9 @@ const validate = ({ form, values, phoneValid, t, }) => {
     }
     // Заявку без телефона и почты обработать нельзя — бэкенд её отклонит,
     // так что честнее сказать это до отправки.
-    const formError = !hasPhone && !hasEmail && !Object.keys(errors).length ? t('lead.needContact') : undefined;
+    const formError = requireContact && !hasPhone && !hasEmail && !Object.keys(errors).length
+        ? t('lead.needContact')
+        : undefined;
     return { errors, formError };
 };
 exports.validate = validate;

package/dist/lead-form/lib.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/lead-form/lib.spec.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const lead_field_type_enum_1 = require("@escapenavigator/types/dist/lead/enums/lead-field-type.enum");
+const lib_1 = require("./lib");
+const form = {
+    fields: [
+        {
+            id: 'occasion',
+            type: lead_field_type_enum_1.LeadFieldTypeEnum.RADIO,
+            required: true,
+            enabled: true,
+            order: 0,
+            options: [],
+            i18n: {},
+        },
+        {
+            id: 'phone',
+            type: lead_field_type_enum_1.LeadFieldTypeEnum.PHONE,
+            required: true,
+            enabled: true,
+            order: 1,
+            i18n: {},
+        },
+    ],
+};
+describe('lead form step validation', () => {
+    it('validates only planning fields before opening the contacts step', () => {
+        const result = (0, lib_1.validate)({
+            form,
+            values: { occasion: '', phone: '' },
+            phoneValid: false,
+            t: (key) => key,
+            fieldIds: new Set(['occasion']),
+            requireContact: false,
+        });
+        expect(result).toEqual({
+            errors: { occasion: 'lead.required' },
+            formError: undefined,
+        });
+    });
+});

package/dist/lead-form/use-lead-t.js

@@ -25,8 +25,19 @@ const DEFAULTS = {
     'lead.unavailable': 'The request form is not available right now',
     'lead.guestsMinus': 'One guest less',
     'lead.guestsPlus': 'One guest more',
+    'lead.timeUndecided': 'Not sure about the time yet',
+    'lead.stepPlanning': 'Your preferences',
+    'lead.stepContacts': 'Contacts',
+    'lead.stepCounter': 'Step {{current}} of 2 · {{label}}',
+    'lead.stepContactsTitle': 'How can we contact you?',
+    'lead.stepContactsHint': 'Leave your contacts and preferred date — we will confirm the details.',
+    'lead.next': 'Next — contacts',
+    'lead.back': 'Back',
+    'lead.selection': 'Your choices',
+    'lead.edit': 'Edit',
     'lead.close': 'Close',
     'lead.another': 'Send another request',
+    'lead.footnote': 'We will contact you and suggest options. A request is not a booking yet.',
     // Кнопка «оставить заявку» рядом с расписанием.
     'lead.ctaTitle': 'Cannot find a suitable time?',
     'lead.ctaHint': 'Leave a request and we will arrange the booking for you',
@@ -35,8 +46,24 @@ const DEFAULTS = {
     'lead.certCtaTitle': 'Need help with a gift?',
     'lead.certCtaHint': 'Leave a request and we will pick a certificate for you',
 };
+/** Новые ключи, которых ещё нет в сервисе: русский аудитории показываем сразу. */
+const RU_DEFAULTS = {
+    'lead.footnote': 'Менеджер свяжется с вами и предложит варианты. Заявка пока не бронирует игру.',
+    'lead.timeUndecided': 'Пока не определился со временем',
+    'lead.stepPlanning': 'Ваши пожелания',
+    'lead.stepContacts': 'Контакты',
+    'lead.stepCounter': 'Шаг {{current}} из 2 · {{label}}',
+    'lead.stepContactsTitle': 'Как с вами связаться?',
+    'lead.stepContactsHint': 'Оставьте контакты, желаемую дату и время — мы уточним детали.',
+    'lead.next': 'Далее — контакты',
+    'lead.back': 'Назад',
+    'lead.selection': 'Вы выбрали',
+    'lead.edit': 'Изменить',
+};
 const useLeadT = () => {
-    const { t } = (0, react_i18next_1.useTranslation)();
-    return (0, react_1.useCallback)((key, options) => { var _a; return t(key, Object.assign({ defaultValue: (_a = DEFAULTS[key]) !== null && _a !== void 0 ? _a : key }, options)); }, [t]);
+    var _a;
+    const { t, i18n } = (0, react_i18next_1.useTranslation)();
+    const isRuLang = (_a = i18n.language) === null || _a === void 0 ? void 0 : _a.startsWith('ru');
+    return (0, react_1.useCallback)((key, options) => t(key, Object.assign({ defaultValue: (isRuLang && RU_DEFAULTS[key]) || DEFAULTS[key] || key }, options)), [t, isRuLang]);
 };
 exports.useLeadT = useLeadT;

package/dist/personal-data-consent/index.d.ts

@@ -0,0 +1,46 @@
+import { requiresPersonalDataConsent } from '@escapenavigator/utils/dist/personal-data-consent';
+import React from 'react';
+export { requiresPersonalDataConsent };
+/**
+ * Ключи пока не заведены в translations-сервисе, а блок видят в основном
+ * русскоязычные посетители — английский дефолт им показывать нельзя.
+ */
+declare const DEFAULTS: {
+    readonly 'consent.personalData': {
+        readonly ru: "Я даю <0>согласие на обработку персональных данных</0>";
+        readonly en: "I give my <0>consent to the processing of personal data</0>";
+    };
+    readonly 'consent.personalDataRequired': {
+        readonly ru: "Подтвердите согласие на обработку персональных данных";
+        readonly en: "Please confirm your consent to the processing of personal data";
+    };
+    readonly 'consent.privacyNotice': {
+        readonly ru: "Данные обрабатываются в соответствии с <0>политикой конфиденциальности</0>";
+        readonly en: "Your data is processed in accordance with the <0>privacy policy</0>";
+    };
+};
+type DefaultKey = keyof typeof DEFAULTS;
+export declare const usePersonalDataConsentT: () => {
+    t: import("i18next").TFunction<"common", undefined, "common">;
+    defaults: (key: DefaultKey) => "Я даю <0>согласие на обработку персональных данных</0>" | "I give my <0>consent to the processing of personal data</0>" | "Подтвердите согласие на обработку персональных данных" | "Please confirm your consent to the processing of personal data" | "Данные обрабатываются в соответствии с <0>политикой конфиденциальности</0>" | "Your data is processed in accordance with the <0>privacy policy</0>";
+};
+/** Текст галочки согласия со ссылкой на сам документ согласия. */
+export declare const PersonalDataConsentLabel: React.FC<{
+    consentUrl: string;
+}>;
+type Props = {
+    /**
+     * Нужна отдельная галочка (152-ФЗ, площадки из РФ). Иначе (GDPR) хватает
+     * уведомления со ссылкой на политику: данные нужны для заявки/договора.
+     */
+    required: boolean;
+    /** Документ согласия площадки. */
+    consentUrl: string;
+    /** Политика площадки в отношении ПДн. */
+    policyUrl: string;
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    /** Клиент пытался отправить без галочки: красим, трясём и пишем почему. */
+    showError?: boolean;
+};
+export declare const PersonalDataConsent: React.FC<Props>;

package/dist/personal-data-consent/index.js

@@ -0,0 +1,66 @@
+"use strict";
+/* eslint-disable import/no-extraneous-dependencies */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PersonalDataConsent = exports.PersonalDataConsentLabel = exports.usePersonalDataConsentT = exports.requiresPersonalDataConsent = void 0;
+const ui_1 = require("@alphakits/ui");
+const personal_data_consent_1 = require("@escapenavigator/utils/dist/personal-data-consent");
+Object.defineProperty(exports, "requiresPersonalDataConsent", { enumerable: true, get: function () { return personal_data_consent_1.requiresPersonalDataConsent; } });
+const react_1 = __importDefault(require("react"));
+const react_i18next_1 = require("react-i18next");
+const index_module_css_1 = __importDefault(require("./index.module.css"));
+/**
+ * Ключи пока не заведены в translations-сервисе, а блок видят в основном
+ * русскоязычные посетители — английский дефолт им показывать нельзя.
+ */
+const DEFAULTS = {
+    'consent.personalData': {
+        ru: 'Я даю <0>согласие на обработку персональных данных</0>',
+        en: 'I give my <0>consent to the processing of personal data</0>',
+    },
+    'consent.personalDataRequired': {
+        ru: 'Подтвердите согласие на обработку персональных данных',
+        en: 'Please confirm your consent to the processing of personal data',
+    },
+    'consent.privacyNotice': {
+        ru: 'Данные обрабатываются в соответствии с <0>политикой конфиденциальности</0>',
+        en: 'Your data is processed in accordance with the <0>privacy policy</0>',
+    },
+};
+const usePersonalDataConsentT = () => {
+    var _a;
+    const { t, i18n } = (0, react_i18next_1.useTranslation)('common');
+    const lang = ((_a = i18n.language) === null || _a === void 0 ? void 0 : _a.startsWith('ru')) ? 'ru' : 'en';
+    return {
+        t,
+        defaults: (key) => DEFAULTS[key][lang],
+    };
+};
+exports.usePersonalDataConsentT = usePersonalDataConsentT;
+const DocLink = ({ href, children }) => (react_1.default.createElement(ui_1.Link, { size: 's', target: '_blank', rel: 'noreferrer', className: index_module_css_1.default.link, href: href }, children));
+const TransWithLink = ({ i18nKey, href }) => {
+    const { t, defaults } = (0, exports.usePersonalDataConsentT)();
+    return (react_1.default.createElement(react_i18next_1.Trans, { t: t, ns: 'common', i18nKey: i18nKey, defaults: defaults(i18nKey), components: [react_1.default.createElement(DocLink, { key: 'doc', href: href })] }));
+};
+/** Текст галочки согласия со ссылкой на сам документ согласия. */
+const PersonalDataConsentLabel = ({ consentUrl }) => (react_1.default.createElement(TransWithLink, { i18nKey: 'consent.personalData', href: consentUrl }));
+exports.PersonalDataConsentLabel = PersonalDataConsentLabel;
+const PersonalDataConsent = ({ required, consentUrl, policyUrl, checked, onChange, showError, }) => {
+    const { t, defaults } = (0, exports.usePersonalDataConsentT)();
+    const invalid = required && !!showError && !checked;
+    const notice = (react_1.default.createElement(ui_1.Typography.Text, { view: 'caps', color: 'secondary' },
+        react_1.default.createElement(TransWithLink, { i18nKey: 'consent.privacyNotice', href: policyUrl })));
+    if (!required)
+        return react_1.default.createElement("div", { className: index_module_css_1.default.wrapper }, notice);
+    return (react_1.default.createElement("div", { className: [index_module_css_1.default.wrapper, invalid ? index_module_css_1.default.shake : ''].join(' ').trim() },
+        react_1.default.createElement(ui_1.FlexColumns, { columns: 1, gr: 6 },
+            react_1.default.createElement(ui_1.Checkbox, { size: 's', align: 'start', block: true, checked: checked, onChange: (_e, payload) => onChange(!!(payload === null || payload === void 0 ? void 0 : payload.checked)), label: react_1.default.createElement(ui_1.Typography.Text, { view: 'caps', color: invalid ? 'negative' : 'secondary' },
+                    react_1.default.createElement(exports.PersonalDataConsentLabel, { consentUrl: consentUrl })) }),
+            notice,
+            invalid && (react_1.default.createElement(ui_1.Typography.Text, { view: 'caps', color: 'negative' }, t('consent.personalDataRequired', {
+                defaultValue: defaults('consent.personalDataRequired'),
+            }))))));
+};
+exports.PersonalDataConsent = PersonalDataConsent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@escapenavigator/hooks",
-  "version": "2.1.22",
+  "version": "2.1.24",
   "publishConfig": {
     "access": "public"
   },
@@ -14,9 +14,9 @@
     "test": "jest"
   },
   "dependencies": {
-    "@escapenavigator/services": "^2.1.22",
-    "@escapenavigator/types": "^2.1.22",
-    "@escapenavigator/utils": "^2.1.22",
+    "@escapenavigator/services": "^2.1.24",
+    "@escapenavigator/types": "^2.1.24",
+    "@escapenavigator/utils": "^2.1.24",
     "libphonenumber-js": "^1.12.24",
     "react": "19.2.6",
     "react-phone-input-2": "^2.15.1"
@@ -32,5 +32,5 @@
     "ts-jest": "^29.1.1",
     "typescript": "^5.6"
   },
-  "gitHead": "a4d5c142ffa0a99936093b991f5ee87cf8359d7e"
+  "gitHead": "153992d51e958b46acefa16ab49c9a0c1f727150"
 }