a3cab9023f
All checks were successful
CI Trade-In / changes (pull_request) Successful in 16s
CI / changes (pull_request) Successful in 16s
CI Trade-In / backend-tests (pull_request) Has been skipped
CI / backend-tests (pull_request) Has been skipped
CI / frontend-tests (pull_request) Has been skipped
CI / openapi-codegen-check (pull_request) Has been skipped
CI Trade-In / frontend-checks (pull_request) Successful in 1m13s
- SectionOverlay: убран aria-modal (честный non-modal fullscreen-view); focus-trap теперь охватывает живой верхний nav + оверлей (query по артборду, фильтр [inert]), Tab из nav возвращается в оверлей, не в спрятанный main/footer. - Контраст 6 muted/disabled токенов затемнён до >=4.6:1 vs worst-case #dce6f1 (hue сохранён, lightness-only): muted2/3/4, hint, disabledValue/Label. - accent -> accentDeep как мелкий текст: номер секции оверлея (15px), счётчик "Мои отчёты" (10px). - Семантика заголовков: sr-only h1 «Мера — оценка квартиры» + h2 (оверлей, ResultPanel, ObjectSummary, placeholder-панели). - HeroBar «КОЭФ. ЛОКАЦИИ»: role=button + tabIndex + Enter/Space + aria-label. - Фокус после успешной оценки переносится на результат-регион (role=region, tabIndex=-1, aria-labelledby); live-region «Оценка готова» сохранён. - Инпут focus-ring усилен (2px solid accentDeep). - combobox адреса: aria-live анонс количества подсказок; aria-required на адрес + площадь; декоративные inline-SVG помечены aria-hidden.
606 lines
18 KiB
TypeScript
606 lines
18 KiB
TypeScript
"use client";
|
||
|
||
import { useState, type CSSProperties } from "react";
|
||
|
||
import { API_BASE_URL } from "@/lib/api";
|
||
import { safeUrl } from "@/lib/safeUrl";
|
||
|
||
import { tokens } from "./tokens";
|
||
import { object, report } from "./fixtures";
|
||
import type { HeroBarData } from "./mappers";
|
||
|
||
// Default presentation data (unwired usage): the existing design fixtures.
|
||
const HERO_FIXTURE: HeroBarData = { report, object };
|
||
|
||
// next/image does NOT prepend the configured basePath ("/trade-in") to a
|
||
// literal src, so an <Image src="/trade-in-v2/…"> 404s behind Caddy. A plain
|
||
// <img> with the basePath baked in resolves to /trade-in/trade-in-v2/… → 200.
|
||
const BP = process.env.NEXT_PUBLIC_BASE_PATH ?? "";
|
||
|
||
// estimate ids are server-issued UUIDs — reject anything else before it lands
|
||
// in the PDF request path so a tampered id cannot be injected.
|
||
const PDF_UUID_RE =
|
||
/^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}$/;
|
||
|
||
// Build + validate the PDF download URL for an estimate id. Returns null when
|
||
// there is no estimate yet (→ disabled button), the id is not a UUID, or the
|
||
// resolved URL fails the safeUrl scheme allowlist. API_BASE_URL is relative
|
||
// ("" in dev, "/trade-in" behind Caddy), so resolve against the document origin
|
||
// purely for the safeUrl http/https check; the <a> keeps the relative href
|
||
// (the browser resolves it against the current page, like OfferCard's link).
|
||
function pdfDownloadHref(estimateId: string | null | undefined): string | null {
|
||
if (!estimateId || !PDF_UUID_RE.test(estimateId)) return null;
|
||
const href = `${API_BASE_URL}/api/v1/trade-in/estimate/${estimateId}/pdf`;
|
||
if (typeof window === "undefined") return href;
|
||
return safeUrl(new URL(href, window.location.origin).toString())
|
||
? href
|
||
: null;
|
||
}
|
||
|
||
interface HeroBarProps {
|
||
data?: HeroBarData;
|
||
estimateId?: string | null;
|
||
// M4: when false (no real, sufficient estimate yet) the estimate-dependent
|
||
// meta/controls — the «ДЕЙСТВИТЕЛЕН ДО» validity line and «КАК РАССЧИТАНО» —
|
||
// are hidden, mirroring how the PDF control already gates on estimate presence.
|
||
hasEstimate: boolean;
|
||
onOpenInfo: () => void;
|
||
}
|
||
|
||
const pdfBtnStyle: CSSProperties = {
|
||
flex: 1,
|
||
height: 50,
|
||
background: tokens.surface.w55,
|
||
border: `1px solid ${tokens.line}`,
|
||
borderRadius: 7,
|
||
display: "flex",
|
||
alignItems: "center",
|
||
gap: 11,
|
||
padding: "0 16px",
|
||
cursor: "pointer",
|
||
fontFamily: tokens.font.sans,
|
||
color: tokens.ink,
|
||
textDecoration: "none",
|
||
transition: "all .15s",
|
||
};
|
||
|
||
export default function HeroBar({
|
||
data = HERO_FIXTURE,
|
||
estimateId,
|
||
hasEstimate,
|
||
onOpenInfo,
|
||
}: HeroBarProps) {
|
||
const pdfHref = pdfDownloadHref(estimateId);
|
||
// Hide the building photo if the asset 404s/400s so the photoBg fill shows
|
||
// instead of a broken-image icon.
|
||
const [imgFailed, setImgFailed] = useState(false);
|
||
const pdfBtnInner = (
|
||
<>
|
||
<svg width="18" height="20" viewBox="0 0 18 20" fill="none" aria-hidden="true">
|
||
<path d="M2 1h9l5 5v13H2z" stroke="#2e8bff" strokeWidth="1.2" />
|
||
<path d="M11 1v5h5" stroke="#2e8bff" strokeWidth="1.2" />
|
||
<line x1="5" y1="11" x2="13" y2="11" stroke="#6f8195" />
|
||
<line x1="5" y1="14" x2="13" y2="14" stroke="#6f8195" />
|
||
</svg>
|
||
<span style={{ fontSize: 11, fontWeight: 600, letterSpacing: "1px" }}>
|
||
СКАЧАТЬ PDF-ОТЧЁТ
|
||
</span>
|
||
</>
|
||
);
|
||
|
||
return (
|
||
<div
|
||
style={{
|
||
display: "flex",
|
||
gap: 30,
|
||
padding: "14px 2px 12px",
|
||
flex: "0 0 auto",
|
||
}}
|
||
>
|
||
<style>{`
|
||
.hero-pdf-btn:hover { border-color: ${tokens.accent}; background: rgba(46,139,255,.07); }
|
||
.hero-pdf-btn:active { transform: translateY(1px); }
|
||
.hero-calc-btn:hover { border-color: ${tokens.accent}; color: ${tokens.accent}; }
|
||
.hero-coef-row:hover { background: rgba(46,139,255,.09); }
|
||
@keyframes hero-scanv { 0% { transform: translateY(-100%); } 100% { transform: translateY(900%); } }
|
||
`}</style>
|
||
|
||
{/* LEFT: meta + buttons */}
|
||
<div
|
||
style={{
|
||
flex: 1,
|
||
minWidth: 0,
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
justifyContent: "center",
|
||
gap: 22,
|
||
}}
|
||
>
|
||
<div style={{ display: "flex", gap: 26, alignItems: "flex-start" }}>
|
||
<div>
|
||
<div
|
||
style={{
|
||
fontSize: 9,
|
||
letterSpacing: "2px",
|
||
color: tokens.muted2,
|
||
marginBottom: 6,
|
||
}}
|
||
>
|
||
ОТЧЁТ
|
||
</div>
|
||
<div
|
||
style={{
|
||
fontFamily: tokens.font.mono,
|
||
fontSize: 14,
|
||
color: tokens.ink,
|
||
}}
|
||
>
|
||
{data.report.id}
|
||
</div>
|
||
</div>
|
||
<div
|
||
style={{
|
||
borderLeft: `1px solid ${tokens.lineSoft}`,
|
||
paddingLeft: 26,
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
fontSize: 9,
|
||
letterSpacing: "2px",
|
||
color: tokens.muted2,
|
||
marginBottom: 6,
|
||
}}
|
||
>
|
||
ДАТА
|
||
</div>
|
||
<div
|
||
style={{
|
||
fontFamily: tokens.font.mono,
|
||
fontSize: 14,
|
||
color: tokens.ink,
|
||
}}
|
||
>
|
||
{data.report.date}
|
||
</div>
|
||
</div>
|
||
{hasEstimate && (
|
||
<div
|
||
style={{
|
||
borderLeft: `1px solid ${tokens.lineSoft}`,
|
||
paddingLeft: 26,
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
fontSize: 9,
|
||
letterSpacing: "2px",
|
||
color: tokens.muted2,
|
||
marginBottom: 6,
|
||
}}
|
||
>
|
||
ДЕЙСТВИТЕЛЕН ДО
|
||
</div>
|
||
<div
|
||
style={{
|
||
fontFamily: tokens.font.mono,
|
||
fontSize: 14,
|
||
color: tokens.ink,
|
||
}}
|
||
>
|
||
{data.report.validUntil}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<div style={{ display: "flex", gap: 12, width: "100%", maxWidth: 440 }}>
|
||
{pdfHref ? (
|
||
<a
|
||
className="hero-pdf-btn"
|
||
href={pdfHref}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
style={pdfBtnStyle}
|
||
>
|
||
{pdfBtnInner}
|
||
</a>
|
||
) : (
|
||
<button
|
||
type="button"
|
||
disabled
|
||
title="Отчёт станет доступен после расчёта оценки"
|
||
style={{ ...pdfBtnStyle, cursor: "not-allowed", opacity: 0.45 }}
|
||
>
|
||
{pdfBtnInner}
|
||
</button>
|
||
)}
|
||
{hasEstimate && (
|
||
<button
|
||
type="button"
|
||
className="hero-calc-btn"
|
||
onClick={onOpenInfo}
|
||
style={{
|
||
flex: 1,
|
||
height: 50,
|
||
background: tokens.surface.w40,
|
||
border: `1px solid ${tokens.line}`,
|
||
borderRadius: 7,
|
||
display: "flex",
|
||
alignItems: "center",
|
||
justifyContent: "center",
|
||
cursor: "pointer",
|
||
fontFamily: tokens.font.sans,
|
||
color: tokens.muted,
|
||
fontSize: 11,
|
||
fontWeight: 600,
|
||
letterSpacing: "1.5px",
|
||
transition: "all .15s",
|
||
}}
|
||
>
|
||
КАК РАССЧИТАНО
|
||
</button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* RIGHT: photo + overlays */}
|
||
<div
|
||
style={{
|
||
position: "relative",
|
||
width: 560,
|
||
height: 152,
|
||
flex: "0 0 auto",
|
||
border: `1px solid ${tokens.line3}`,
|
||
borderRadius: 6,
|
||
overflow: "hidden",
|
||
background: tokens.photoBg,
|
||
boxShadow: "0 6px 26px rgba(40,80,130,.10)",
|
||
}}
|
||
>
|
||
{!imgFailed && (
|
||
<img
|
||
src={`${BP}/trade-in-v2/building.png`}
|
||
alt=""
|
||
onError={() => setImgFailed(true)}
|
||
style={{
|
||
position: "absolute",
|
||
inset: 0,
|
||
width: "100%",
|
||
height: "100%",
|
||
objectFit: "contain",
|
||
objectPosition: "right center",
|
||
filter: "saturate(.25) brightness(1.06) contrast(.95)",
|
||
}}
|
||
/>
|
||
)}
|
||
{/* blue duotone tint toward HUD accent — recedes the photo (only over
|
||
the real image; skip when it 404s so the placeholder stays clean) */}
|
||
{!imgFailed && (
|
||
<div
|
||
style={{
|
||
position: "absolute",
|
||
inset: 0,
|
||
background: "rgba(46,139,255,.14)",
|
||
mixBlendMode: "multiply",
|
||
pointerEvents: "none",
|
||
}}
|
||
/>
|
||
)}
|
||
<div
|
||
style={{
|
||
position: "absolute",
|
||
inset: 0,
|
||
background:
|
||
"linear-gradient(90deg,rgba(238,244,250,.96) 0%,rgba(238,244,250,.5) 22%,transparent 40%)",
|
||
}}
|
||
/>
|
||
<div
|
||
style={{
|
||
position: "absolute",
|
||
inset: 0,
|
||
background:
|
||
"linear-gradient(0deg,rgba(230,240,250,.45),transparent 40%)",
|
||
}}
|
||
/>
|
||
<div
|
||
style={{
|
||
position: "absolute",
|
||
left: 0,
|
||
right: 0,
|
||
top: "34%",
|
||
height: 1,
|
||
background:
|
||
"linear-gradient(90deg,transparent,rgba(46,139,255,.5),transparent)",
|
||
animation: "hero-scanv 6s linear infinite",
|
||
}}
|
||
/>
|
||
|
||
{/* address card */}
|
||
<div
|
||
style={{
|
||
position: "absolute",
|
||
left: 16,
|
||
top: "50%",
|
||
transform: "translateY(-50%)",
|
||
width: 182,
|
||
background: tokens.surface.w72,
|
||
backdropFilter: "blur(5px)",
|
||
border: `1px solid ${tokens.line}`,
|
||
borderRadius: 5,
|
||
padding: "11px 13px",
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
fontSize: 9,
|
||
letterSpacing: "2.5px",
|
||
color: tokens.muted2,
|
||
marginBottom: 3,
|
||
}}
|
||
>
|
||
АДРЕС
|
||
</div>
|
||
<div style={{ fontSize: 14, fontWeight: 600, lineHeight: 1.3 }}>
|
||
{data.object.address}
|
||
<br />
|
||
<span
|
||
style={{ fontSize: 11, fontWeight: 400, color: tokens.muted }}
|
||
>
|
||
{data.object.city}
|
||
</span>
|
||
</div>
|
||
<div
|
||
style={{ height: 1, background: tokens.lineSoft, margin: "8px 0" }}
|
||
/>
|
||
<div
|
||
style={{
|
||
fontFamily: tokens.font.mono,
|
||
fontSize: 9,
|
||
color: tokens.muted,
|
||
lineHeight: 1.55,
|
||
}}
|
||
>
|
||
{data.object.streetView}
|
||
</div>
|
||
<div
|
||
style={{ height: 1, background: tokens.lineSoft, margin: "8px 0" }}
|
||
/>
|
||
<div
|
||
// role=button + tabIndex + Enter/Space (#2264 C6): keyboard-operable
|
||
// without switching the element to a <button> (which, with preflight
|
||
// off, would need a UA-chrome reset and risk the row's exact box
|
||
// geometry / negative-margin hover bleed). Opens the methodology drawer.
|
||
role="button"
|
||
tabIndex={0}
|
||
className="hero-coef-row"
|
||
onClick={onOpenInfo}
|
||
onKeyDown={(e) => {
|
||
if (e.key === "Enter" || e.key === " ") {
|
||
e.preventDefault();
|
||
onOpenInfo();
|
||
}
|
||
}}
|
||
aria-label="Пояснение к расчёту коэффициента локации"
|
||
style={{
|
||
display: "flex",
|
||
alignItems: "center",
|
||
justifyContent: "space-between",
|
||
cursor: "pointer",
|
||
borderRadius: 4,
|
||
margin: "-3px -5px",
|
||
padding: "3px 5px",
|
||
transition: "background .15s",
|
||
}}
|
||
>
|
||
<span
|
||
style={{
|
||
fontSize: "8.5px",
|
||
letterSpacing: "1.5px",
|
||
color: tokens.muted2,
|
||
}}
|
||
>
|
||
КОЭФ. ЛОКАЦИИ
|
||
</span>
|
||
<span style={{ display: "flex", alignItems: "center", gap: 6 }}>
|
||
{data.object.locationCoef === "—" ? (
|
||
<span
|
||
style={{
|
||
fontSize: "9px",
|
||
letterSpacing: ".5px",
|
||
// body2 (not muted2): муть на badgeTint давала 2.3:1 < AA;
|
||
// body2 на badgeTint ≈ 6.3:1 — читаемо, остаётся «приглушённым».
|
||
color: tokens.body2,
|
||
background: tokens.badgeTint,
|
||
border: `1px solid ${tokens.line2}`,
|
||
borderRadius: 10,
|
||
padding: "1px 8px",
|
||
}}
|
||
>
|
||
скоро
|
||
</span>
|
||
) : (
|
||
<span
|
||
style={{
|
||
fontFamily: tokens.font.mono,
|
||
fontSize: 15,
|
||
fontWeight: 500,
|
||
color: tokens.accent,
|
||
}}
|
||
>
|
||
{data.object.locationCoef}
|
||
</span>
|
||
)}
|
||
<span
|
||
style={{
|
||
display: "flex",
|
||
alignItems: "center",
|
||
justifyContent: "center",
|
||
width: 14,
|
||
height: 14,
|
||
border: `1px solid ${tokens.accent}`,
|
||
borderRadius: "50%",
|
||
fontSize: "8.5px",
|
||
color: tokens.accent,
|
||
fontWeight: 600,
|
||
}}
|
||
aria-hidden="true"
|
||
>
|
||
?
|
||
</span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* compass */}
|
||
<div
|
||
style={{
|
||
position: "absolute",
|
||
right: 16,
|
||
top: 14,
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
alignItems: "center",
|
||
gap: 2,
|
||
color: tokens.accent,
|
||
}}
|
||
>
|
||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" aria-hidden="true">
|
||
<circle cx="11" cy="11" r="10" stroke="#2e8bff" strokeWidth="1" />
|
||
<path d="M11 3 L13 11 L11 9 L9 11 Z" fill="#2e8bff" />
|
||
</svg>
|
||
<span
|
||
style={{
|
||
fontFamily: tokens.font.mono,
|
||
fontSize: 8,
|
||
letterSpacing: ".5px",
|
||
color: tokens.muted,
|
||
whiteSpace: "nowrap",
|
||
}}
|
||
>
|
||
{data.object.compass}
|
||
</span>
|
||
</div>
|
||
|
||
{/* distance scale */}
|
||
<div
|
||
style={{
|
||
position: "absolute",
|
||
left: "50%",
|
||
transform: "translateX(-50%)",
|
||
bottom: 16,
|
||
width: 170,
|
||
fontFamily: tokens.font.mono,
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
display: "flex",
|
||
justifyContent: "space-between",
|
||
alignItems: "flex-end",
|
||
height: 8,
|
||
borderBottom: "1px solid rgba(46,139,255,.55)",
|
||
}}
|
||
>
|
||
<span
|
||
style={{
|
||
width: 1,
|
||
height: 8,
|
||
background: "rgba(46,139,255,.55)",
|
||
}}
|
||
/>
|
||
<span
|
||
style={{
|
||
width: 1,
|
||
height: 5,
|
||
background: "rgba(46,139,255,.45)",
|
||
}}
|
||
/>
|
||
<span
|
||
style={{
|
||
width: 1,
|
||
height: 5,
|
||
background: "rgba(46,139,255,.45)",
|
||
}}
|
||
/>
|
||
<span
|
||
style={{
|
||
width: 1,
|
||
height: 5,
|
||
background: "rgba(46,139,255,.45)",
|
||
}}
|
||
/>
|
||
<span
|
||
style={{
|
||
width: 1,
|
||
height: 8,
|
||
background: "rgba(46,139,255,.55)",
|
||
}}
|
||
/>
|
||
</div>
|
||
<div
|
||
style={{
|
||
display: "flex",
|
||
justifyContent: "space-between",
|
||
fontSize: "7.5px",
|
||
color: tokens.muted,
|
||
marginTop: 3,
|
||
}}
|
||
>
|
||
<span>0</span>
|
||
<span>25</span>
|
||
<span>50</span>
|
||
<span>75</span>
|
||
<span>100м</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* corner brackets */}
|
||
<div
|
||
style={{
|
||
position: "absolute",
|
||
left: 8,
|
||
top: 8,
|
||
width: 14,
|
||
height: 14,
|
||
borderLeft: `1.5px solid ${tokens.accent}`,
|
||
borderTop: `1.5px solid ${tokens.accent}`,
|
||
}}
|
||
/>
|
||
<div
|
||
style={{
|
||
position: "absolute",
|
||
right: 8,
|
||
top: 8,
|
||
width: 14,
|
||
height: 14,
|
||
borderRight: `1.5px solid ${tokens.accent}`,
|
||
borderTop: `1.5px solid ${tokens.accent}`,
|
||
}}
|
||
/>
|
||
<div
|
||
style={{
|
||
position: "absolute",
|
||
left: 8,
|
||
bottom: 8,
|
||
width: 14,
|
||
height: 14,
|
||
borderLeft: `1.5px solid ${tokens.accent}`,
|
||
borderBottom: `1.5px solid ${tokens.accent}`,
|
||
}}
|
||
/>
|
||
<div
|
||
style={{
|
||
position: "absolute",
|
||
right: 8,
|
||
bottom: 8,
|
||
width: 14,
|
||
height: 14,
|
||
borderRight: `1.5px solid ${tokens.accent}`,
|
||
borderBottom: `1.5px solid ${tokens.accent}`,
|
||
}}
|
||
/>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|