diff --git a/tradein-mvp/frontend/src/app/mera-public/_components/v3/AccuracyV3.tsx b/tradein-mvp/frontend/src/app/mera-public/_components/v3/AccuracyV3.tsx new file mode 100644 index 00000000..a240140b --- /dev/null +++ b/tradein-mvp/frontend/src/app/mera-public/_components/v3/AccuracyV3.tsx @@ -0,0 +1,154 @@ +/** + * AccuracyV3 — «Точность»: KPI-плитки + таблица сверок прогноза с фактом + * сделки (макет v3, ~строки 231-283, id="accuracy"). Серверный компонент. + * + * KPI-значения — из `ACCURACY_PLACEHOLDER` (marketing-v3.ts), не хардкод: это + * плейсхолдерные маркетинговые величины, гейтящиеся `noindex` до подтверждения + * замером (см. шапку файла). + * + * Таблица сверок — `PROOF_ROWS_PLACEHOLDER`. В самом макете под неё не было + * заполнено ни одной реальной строки (только `{{ r.addr }}`-шаблон), поэтому + * строки — витринный пример формата отчёта, а не факт. Ровно поэтому подпись + * под таблицей ЗАМЕНЕНА: в макете там было «ДАННЫЕ ОБЕЗЛИЧЕНЫ · …» — фраза, + * прямо утверждающая, что за строками стоят настоящие обезличенные сделки. + * Мы этого утверждать не можем (строки придуманы для примера), поэтому подпись + * честно называет таблицу иллюстрацией формата, а вторую половину исходной + * фразы («"выше средней цены" — разница со средней ценой сделки по похожим + * квартирам в районе») сохраняет — она объясняет, ЧТО значит колонка, а не + * заявляет что-то о происхождении данных. + * + * Таблица размечена ARIA role="table/row/columnheader/cell" (а не ): + * на мобильном брейке (см. landing-v3.module.css) она превращается в карточки + * без горизонтального скролла, а implicit table-роли всё равно снимаются + * Safari при смене display у настоящей
— тот же квирк, что уже описан + * в HowItWorks.tsx для списков, только для таблиц его обходят явные роли, а + * не CSS-костыль. + */ + +import { + ACCURACY_PERIOD_LABEL, + ACCURACY_PLACEHOLDER, + PROOF_ROWS_PLACEHOLDER, +} from "../../marketing-v3"; +import styles from "../../landing-v3.module.css"; + +const KPI_TILES = [ + { + value: ACCURACY_PLACEHOLDER.priceError, + label: "средняя ошибка по цене", + note: ACCURACY_PLACEHOLDER.priceErrorNote, + }, + { + value: ACCURACY_PLACEHOLDER.daysError, + label: "точность по сроку продажи", + note: ACCURACY_PLACEHOLDER.daysErrorNote, + }, + { + value: ACCURACY_PLACEHOLDER.coverage, + label: "сделок попали в диапазон", + note: ACCURACY_PLACEHOLDER.coverageNote, + }, +] as const; + +export function AccuracyV3() { + return ( +
+
+
+ +

+ Мы сверяем каждый прогноз с реальной сделкой +

+

+ {`Когда квартира продана, мы возвращаемся к своему прогнозу и считаем расхождение. Вот сводка за ${ACCURACY_PERIOD_LABEL}.`} +

+
+ + + +
+
+ Объект + Мера сказала + Факт сделки + Расхождение + + Выше средней цены по району + +
+ {PROOF_ROWS_PLACEHOLDER.map((row) => ( +
+
+ {row.addr} + {row.meta} +
+
+ {row.said} +
+
+ {row.fact} +
+
+ {row.err} +
+
+
+
{row.gain}
+
{row.gainPct}
+
+
+
+ ))} +
+

+ Таблица иллюстрирует формат отчёта, это не список конкретных сделок. + «Выше средней цены» — разница со средней ценой сделки по похожим + квартирам в районе. +

+
+
+ ); +} diff --git a/tradein-mvp/frontend/src/app/mera-public/_components/v3/CityPicker.tsx b/tradein-mvp/frontend/src/app/mera-public/_components/v3/CityPicker.tsx new file mode 100644 index 00000000..7ef9ee8d --- /dev/null +++ b/tradein-mvp/frontend/src/app/mera-public/_components/v3/CityPicker.tsx @@ -0,0 +1,140 @@ +"use client"; + +/** + * CityPicker — выбор города в шапке лэндинга v3 (макет ~ строки 47-73). + * + * Презентационный клиентский остров: сегодня публичный расчёт выключен + * (`PUBLIC_ESTIMATE_ENABLED = false` в content.ts), поэтому выбранный здесь + * город никуда не отправляется — состояние живёт только в этом компоненте и + * показывает посетителю, что сервис знает больше одного города области. + * Когда форма расчёта откроется, сюда нужно будет добавить проброс выбора + * наружу (проп/контекст) — в этом заходе scope ограничен шапкой/подвалом/ + * sticky-баром, самой формы здесь нет. + * + * Список городов и деление на «полное покрытие» / «данных меньше» берутся из + * `OBLAST_CITIES` / `PRIMARY_CITY` (content.ts, тот же реестр, что честно + * объясняет разницу в покрытии в Hero.tsx). Макет показывал числовые «веса» + * по городам (тысячи объявлений) — мы их не повторяем: таких цифр в коде нет, + * а гадать нельзя (правило честности в content.ts). + */ + +import { useEffect, useId, useRef, useState } from "react"; + +import { DEFAULT_CITY, OBLAST_CITIES } from "@/lib/city-registry"; + +import { PRIMARY_CITY, REGION_NAME } from "../../content"; +import styles from "../../landing-v3.module.css"; + +export function CityPicker() { + const [open, setOpen] = useState(false); + const [query, setQuery] = useState(""); + const [city, setCity] = useState(DEFAULT_CITY.label); + const wrapRef = useRef(null); + const buttonRef = useRef(null); + const panelId = useId(); + + // Клик вне панели — закрыть. Тот же паттерн, что components/auth/UserMenu.tsx. + useEffect(() => { + if (!open) return; + function handleClick(e: MouseEvent) { + if (wrapRef.current && !wrapRef.current.contains(e.target as Node)) { + setOpen(false); + } + } + document.addEventListener("mousedown", handleClick); + return () => document.removeEventListener("mousedown", handleClick); + }, [open]); + + // Escape — закрыть и вернуть фокус на кнопку. + useEffect(() => { + if (!open) return; + function handleKey(e: KeyboardEvent) { + if (e.key === "Escape") { + setOpen(false); + buttonRef.current?.focus(); + } + } + document.addEventListener("keydown", handleKey); + return () => document.removeEventListener("keydown", handleKey); + }, [open]); + + const normalizedQuery = query.trim().toLowerCase(); + const filtered = normalizedQuery + ? OBLAST_CITIES.filter((c) => + c.label.toLowerCase().includes(normalizedQuery), + ) + : OBLAST_CITIES; + + return ( +
+ + + {open ? ( +
+
+ setQuery(e.target.value)} + placeholder="Поиск города" + aria-label="Поиск города" + /> +
+
+ {filtered.length > 0 ? ( + filtered.map((c) => ( + + )) + ) : ( +

+ Города нет в списке. Мы работаем там, где хватает данных по + сделкам — напишите нам, и добавим. +

+ )} +
+
+ ДАННЫЕ ПО {OBLAST_CITIES.length} ГОРОДАМ:{" "} + {REGION_NAME.toUpperCase()} +
+
+ ) : null} +
+ ); +} diff --git a/tradein-mvp/frontend/src/app/mera-public/_components/v3/CostOfErrorV3.tsx b/tradein-mvp/frontend/src/app/mera-public/_components/v3/CostOfErrorV3.tsx new file mode 100644 index 00000000..b7281015 --- /dev/null +++ b/tradein-mvp/frontend/src/app/mera-public/_components/v3/CostOfErrorV3.tsx @@ -0,0 +1,52 @@ +/** + * CostOfErrorV3 — «Цена ошибки»: три плитки про стоимость неверной цены + * (макет v3, ~строки 376-400, без id). Серверный компонент. + * + * Значения и подписи — из `COST_OF_ERROR_PLACEHOLDER` (marketing-v3.ts), + * заголовок цитирует `SERVICE_PRICE_RUB` (content.ts) — тот же источник + * правды, что и у цены отчёта во всём остальном лэндинге, а не отдельный + * литерал «150». + */ + +import { SERVICE_PRICE_RUB } from "../../content"; +import { COST_OF_ERROR_PLACEHOLDER } from "../../marketing-v3"; +import styles from "../../landing-v3.module.css"; + +export function CostOfErrorV3() { + return ( +
+
+
+ +

+ {`${SERVICE_PRICE_RUB} ₽ против двух месяцев вашей жизни`} +

+
+ +
    + {COST_OF_ERROR_PLACEHOLDER.map((tile, index) => { + const dark = index === COST_OF_ERROR_PLACEHOLDER.length - 1; + return ( +
  • +
    {tile.value}
    +
    {tile.title}
    +

    + {tile.text} +

    +
    • + ); + })} +
+
+
+ ); +} diff --git a/tradein-mvp/frontend/src/app/mera-public/_components/v3/FooterV3.tsx b/tradein-mvp/frontend/src/app/mera-public/_components/v3/FooterV3.tsx new file mode 100644 index 00000000..1ff10d5d --- /dev/null +++ b/tradein-mvp/frontend/src/app/mera-public/_components/v3/FooterV3.tsx @@ -0,0 +1,145 @@ +/** + * FooterV3 — подвал лэндинга v3 (макет ~ строки 470-516): четыре колонки + + * нижняя строка с реквизитами. + * + * РЕКВИЗИТЫ И ДОКУМЕНТЫ — НЕ из макета (там маска «ООО «МЕРА» · ИНН + * 66700XXXXX», это не настоящие данные), а из content.ts: `LEGAL_ENTITY`, + * `SUPPORT_EMAIL`, `OFFER_PATH`, `REFUND_PATH`, `PRIVACY_PATH` — тот же набор, + * что уже рендерит `_components/SiteFooter.tsx` (подвал v1/v2), только в + * другой сетке. Документы включают Политику возврата и почту поддержки: + * макет их не показывал, а это обязательные элементы платного контура + * (маркировка эквайера, идентифицируемость оператора по 152-ФЗ). + * + * Способы оплаты (МИР / СБП / VISA / MASTERCARD в макете) НЕ рендерятся: + * приём платежей не подключён (см. TODO у нижней строки) — заявлять способы + * оплаты, которых нет, подпадает под ст. 5 ФЗ «О рекламе». + * + * «Статьи» в «Разделах» неактивны тем же образом, что в шапке (HeaderV3): + * раздела нет в коде. «Проверить квартиру» ведёт на #check (форма в Hero на + * этой же странице) — отдельного маршрута отчёта не существует. Оба + * внутренних якоря — через `/mera-public#...`: подвал рендерится и на + * оферте/возврате/ПДн, где голый `#check` никуда не долистал бы. + */ + +import Link from "next/link"; + +import { safeUrl } from "@/lib/safeUrl"; + +import { + LEGAL_ENTITY, + OFFER_PATH, + PRIVACY_PATH, + REFUND_PATH, + REGION_NAME, + SUPPORT_EMAIL, + SUPPORT_TELEGRAM_LABEL, + SUPPORT_TELEGRAM_URL, +} from "../../content"; +import styles from "../../landing-v3.module.css"; + +export function FooterV3() { + const telegramHref = safeUrl(SUPPORT_TELEGRAM_URL); + const year = new Date().getFullYear(); + + return ( +
+
+
+
+
+

+ Оценка квартир на вторичном рынке по сделкам и объявлениям.{" "} + {REGION_NAME}. +

+
+ +
+

Разделы

+
+ + Главная + + + Проверить квартиру + + + Статьи + + + МЕРА для бизнеса + +
+
+ +
+

Связаться

+

+ Почта:{" "} + + {SUPPORT_EMAIL} + +

+ {telegramHref ? ( +

+ Поддержка в Telegram:{" "} + + {SUPPORT_TELEGRAM_LABEL} + +

+ ) : null} +
+ +
+

Документы

+
+ + Публичная оферта + + + Политика возврата + + + Обработка персональных данных + +
+
+
+ +
+
+ © {year} МЕРА + {LEGAL_ENTITY ? ( + + {LEGAL_ENTITY.name}, ИНН {LEGAL_ENTITY.inn}, ОГРН{" "} + {LEGAL_ENTITY.ogrn}, {LEGAL_ENTITY.address} + + ) : null} + + Оценка носит информационный характер и не является офертой или + отчётом об оценке. + +
+ {/* TODO(платёжный контур): бейджи способов оплаты (МИР / СБП / VISA / + MASTERCARD, как в макете) — рендерить только когда приём оплаты + будет подключён backend'ом. Сегодня `PUBLIC_ESTIMATE_ENABLED = + false`, оплаты нет вовсе, а заявлять способы оплаты, которых нет, + — нарушение ст. 5 ФЗ «О рекламе». Гейт G6, см. + mera-b2c-paid-flow-decision.md. */} +
+
+ ); +} diff --git a/tradein-mvp/frontend/src/app/mera-public/_components/v3/FreeCheckCard.tsx b/tradein-mvp/frontend/src/app/mera-public/_components/v3/FreeCheckCard.tsx new file mode 100644 index 00000000..2adf9381 --- /dev/null +++ b/tradein-mvp/frontend/src/app/mera-public/_components/v3/FreeCheckCard.tsx @@ -0,0 +1,303 @@ +"use client"; + +/** + * FreeCheckCard — карточка «Бесплатная проверка» на первом экране (макет v3, + * `МЕРА для себя v3.dc.html` строки ~129-170). + * + * ЧТО ОНА ДЕЛАЕТ СЕГОДНЯ И ПОЧЕМУ. Ровно то же, чем ограничена + * `../AddressForm.tsx` в закрытом v2-контуре, и по той же причине: + * `rbac_guard` (backend/app/core/rbac.py) не пускает анонима на + * `/api/v1/geocode/suggest` и `/api/v1/trade-in/estimate` — их нет в + * `_PUBLIC_PATHS`. Открытие анонимного периметра — отдельный backend-PR, вне + * границ этой задачи. Поэтому здесь: честная валидация 5 обязательных полей + * на клиенте + прямое сообщение «проверка ещё не открыта» вместо макетного + * сценария «спиннер 1100 мс → готовый результат». Тот сценарий на живом + * сайте отдавал бы одинаковые «14 объявлений / 47 дней» на любой введённый + * адрес — не продающая формулировка, а обман конкретного человека (см. шапку + * `../../marketing-v3.ts`). + * + * Раздел «шаг 1 из 2» / полоска прогресса / ярлык рынка (`{{ cityMarket }}`, + * `{{ stepLabel }}`) из макета сюда сознательно НЕ перенесены: они требуют + * состояния города, которым владеет шапка сайта — вне участка этой задачи + * («первый экран: герой и карточка»), и вносили бы числовые литералы (33%, + * 66%, 100%), которых нет ни в макете-константах, ни в `marketing-v3.ts`. + * + * Ветка результата ПОСТРОЕНА (`FreeResultV3.tsx`), но не подключена — см. + * TODO у `PUBLIC_ESTIMATE_ENABLED` ниже и JSDoc в `FreeResultV3.tsx`. + */ + +import { useId, useRef, useState } from "react"; +import type { FormEvent } from "react"; + +import { PRIMARY_CITY, PUBLIC_ESTIMATE_ENABLED } from "../../content"; +import styles from "../../landing-v3.module.css"; + +/** Три состояния квартиры — дословно из макета (строка 734 исходника). */ +const CONDITIONS = ["Требует ремонта", "Хорошее", "Отличное"] as const; +type Condition = (typeof CONDITIONS)[number]; + +type FieldName = "address" | "area" | "rooms" | "floor" | "condition"; + +type Feedback = + | { kind: "none" } + | { kind: "error"; field: FieldName; text: string } + | { kind: "info"; title: string; lines: readonly string[] }; + +const NONE: Feedback = { kind: "none" }; + +export function FreeCheckCard() { + const addressId = useId(); + const areaId = useId(); + const roomsId = useId(); + const floorId = useId(); + const conditionLabelId = useId(); + const feedbackId = useId(); + + const [address, setAddress] = useState(""); + const [area, setArea] = useState(""); + const [rooms, setRooms] = useState(""); + const [floor, setFloor] = useState(""); + const [condition, setCondition] = useState(""); + const [feedback, setFeedback] = useState(NONE); + + const addressRef = useRef(null); + const areaRef = useRef(null); + const roomsRef = useRef(null); + const floorRef = useRef(null); + const conditionGroupRef = useRef(null); + + function clearFeedback() { + setFeedback(NONE); + } + + function handleSubmit(event: FormEvent) { + event.preventDefault(); + + const trimmedAddress = address.trim(); + const trimmedArea = area.trim(); + const trimmedRooms = rooms.trim(); + const trimmedFloor = floor.trim(); + + if (!trimmedAddress) { + setFeedback({ + kind: "error", + field: "address", + text: "Укажите адрес — улицу и номер дома.", + }); + addressRef.current?.focus(); + return; + } + + if (!trimmedArea) { + setFeedback({ + kind: "error", + field: "area", + text: "Укажите площадь квартиры в квадратных метрах.", + }); + areaRef.current?.focus(); + return; + } + + if (!trimmedRooms) { + setFeedback({ + kind: "error", + field: "rooms", + text: "Укажите количество комнат.", + }); + roomsRef.current?.focus(); + return; + } + + if (!trimmedFloor) { + setFeedback({ + kind: "error", + field: "floor", + text: "Укажите этаж, например «7/16».", + }); + floorRef.current?.focus(); + return; + } + + if (!condition) { + setFeedback({ + kind: "error", + field: "condition", + text: "Выберите состояние квартиры.", + }); + conditionGroupRef.current?.focus(); + return; + } + + if (PUBLIC_ESTIMATE_ENABLED) { + // TODO(backend-периметр): здесь появится реальный запрос к + // POST /trade-in/coverage. По успешному ответу — переключить карточку в + // ветку результата и отрендерить `FreeResultV3` с полученными + // analogs/days (НЕ константами из marketing-v3.ts). Отдельный PR. + return; + } + + setFeedback({ + kind: "info", + title: "Бесплатную проверку по адресу мы пока не открыли", + lines: [ + `Дом принят: ${trimmedArea} м², ${trimmedRooms}-комн., этаж ${trimmedFloor}, состояние «${condition}». Но онлайн-расчёт ещё не запущен — сервис работает по доступу для партнёров.`, + "Проверка появится на этой же странице. Если вопрос срочный — напишите нам в поддержку, ссылка в подвале.", + ], + }); + } + + const errorField = feedback.kind === "error" ? feedback.field : null; + const describedBy = feedback.kind === "none" ? undefined : feedbackId; + + return ( +
+
+ Бесплатная проверка +
+ +
+
+ + +
+ + + + + +
+ +
+ + Состояние + +
+ {CONDITIONS.map((name) => ( + + ))} +
+
+ + +

+ БЕЗ РЕГИСТРАЦИИ · БЕЗ ЗВОНКОВ · 30 СЕКУНД +

+ + {/* Живая область держим в DOM постоянно — регион, добавленный в + момент ошибки, часть скринридеров не озвучивает (тот же приём, + что в ../AddressForm.tsx). */} +
+ {feedback.kind === "error" && ( +
+

{feedback.text}

+
+ )} + {feedback.kind === "info" && ( +
+

{feedback.title}

+ {feedback.lines.map((line) => ( +

+ {line} +

+ ))} +
+ )} +
+ +
+
+ ); +} diff --git a/tradein-mvp/frontend/src/app/mera-public/_components/v3/FreeResultV3.tsx b/tradein-mvp/frontend/src/app/mera-public/_components/v3/FreeResultV3.tsx new file mode 100644 index 00000000..5cbd9c78 --- /dev/null +++ b/tradein-mvp/frontend/src/app/mera-public/_components/v3/FreeResultV3.tsx @@ -0,0 +1,100 @@ +/** + * FreeResultV3 — ветка «результат» карточки «Бесплатная проверка» (макет v3, + * строки ~176-204 `МЕРА для себя v3.dc.html`). + * + * НЕ ВЫЗЫВАЕТСЯ СЕГОДНЯ НИОТКУДА. Компонент собран и типизирован, но нигде не + * рендерится в живом дереве: `FreeCheckCard.tsx` при сабмите (см. TODO рядом с + * `PUBLIC_ESTIMATE_ENABLED` там) всегда остаётся в форме и честно говорит, что + * онлайн-проверки ещё нет — потому что анонимных ручек `/geocode/suggest` и + * `/trade-in/estimate` не существует (см. `../../content.ts`). Как только + * появится `POST /trade-in/coverage`, эту ветку нужно подключить: завести + * `phase`-состояние в `FreeCheckCard`, по успешному ответу переключаться в + * `"result"` и рендерить этот компонент с РЕАЛЬНЫМИ `analogs`/`days` из ответа + * ручки — не константами. + * + * Данные приходят пропсами, а не читаются из `marketing-v3.ts` внутри + * компонента, — вызывающий код сегодня мог бы по ошибке подставить туда + * `FREE_SAMPLE_PLACEHOLDER` для любого адреса, и тогда «14 похожих объявлений» + * увидел бы каждый посетитель независимо от того, что он ввёл. Это уже не + * продающая формулировка, а обман конкретного человека — см. шапку + * `marketing-v3.ts`. Пропсовый контракт держит эту ответственность на + * вызывающей стороне и делает её явной в диффе, когда придёт время подключать + * реальные данные. + * + * Замыленная рублёвая цифра из макета («9,75 млн ₽», `filter: blur`) сюда + * НЕ перенесена вообще — вместо неё абстрактная плашка-скелет без единой + * цифры (см. `.heroResultSkeleton*` в `landing-v3.module.css`). + */ + +import styles from "../../landing-v3.module.css"; + +export interface FreeResultV3Props { + /** Число похожих объявлений — крупная цифра первой плитки, напр. "14". */ + analogs: string; + /** Подпись под числом объявлений. */ + analogsLabel: string; + /** Средний срок продажи — крупная цифра второй плитки, напр. "47 дн.". */ + days: string; + /** Подпись под сроком продажи. */ + daysLabel: string; + /** Клик по «Проверить другую квартиру» — вернуть карточку к форме. */ + onBack: () => void; +} + +export function FreeResultV3({ + analogs, + analogsLabel, + days, + daysLabel, + onBack, +}: FreeResultV3Props) { + return ( +
+

ГОТОВО · БЕСПЛАТНАЯ ЧАСТЬ

+ +
+
+
{analogs}
+
{analogsLabel}
+
+
+
{days}
+
{daysLabel}
+
+
+ +
+ {/* Скелет без единой цифры: замыленную сумму из макета намеренно не + переносим, см. JSDoc выше. */} +