@escapenavigator/hooks 2.1.23 → 2.1.24

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

@@ -48,6 +48,7 @@ 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"));
@@ -56,11 +57,23 @@ const lib_1 = require("./lib");
 const use_lead_t_1 = require("./use-lead-t");
 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)();
@@ -74,6 +87,61 @@ 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)
@@ -84,6 +152,9 @@ const LeadForm = ({ form, source, language, profileCountry, submit, prefill, con
         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);
@@ -118,18 +189,34 @@ 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);
+    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 },
-            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' }, title),
-            !!description && (react_1.default.createElement(ui_1.Typography.Text, { view: 'primary-small', color: 'secondary' }, description)))),
+            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),
-        react_1.default.createElement("div", { className: index_module_css_1.default.fields }, form.fields
-            .filter((field) => (0, lib_1.isVisible)(field, values))
-            .map((field) => (react_1.default.createElement("div", { key: field.id, className: index_module_css_1.default.fieldCard, "data-field-type": field.type },
+        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("div", { className: index_module_css_1.default.footer },
+        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)
@@ -138,6 +225,6 @@ const LeadForm = ({ form, source, language, profileCountry, submit, prefill, con
             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')))));
+            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

@@ -26,6 +26,15 @@ const DEFAULTS = {
     '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.',
@@ -41,6 +50,15 @@ const DEFAULTS = {
 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 = () => {
     var _a;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@escapenavigator/hooks",
-  "version": "2.1.23",
+  "version": "2.1.24",
   "publishConfig": {
     "access": "public"
   },
@@ -14,9 +14,9 @@
     "test": "jest"
   },
   "dependencies": {
-    "@escapenavigator/services": "^2.1.23",
-    "@escapenavigator/types": "^2.1.23",
-    "@escapenavigator/utils": "^2.1.23",
+    "@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": "533e344e432372b89b80d81c0ce35bc27463b677"
+  "gitHead": "153992d51e958b46acefa16ab49c9a0c1f727150"
 }