§4.1.24.1/.2: filter label hidden on mobile; date locked until departure set

- Hide `.flights-map-filter-header` on mobile via `@include screen.mobile`
  so the "Найдите свой маршрут" label is absent on phone (R7).
- Disable the PrimeReact Calendar and DayQuickPick when `Город вылета` is
  empty; date picker must not be selectable without a departure city (R16).
- Add `disabled?` prop to DayQuickPick so callers can block the quick-day
  buttons on mobile (R16 mobile quick-day parity).
This commit is contained in:
2026-04-22 02:08:43 +03:00
parent a94b01cee9
commit f5dfa14eab
3 changed files with 19 additions and 1 deletions
@@ -289,10 +289,14 @@ export const FlightsMapFilter: FC<FlightsMapFilterProps> = ({
<div className="flights-map-filter__field">
<label htmlFor="fm-date">{t("SHARED.FLIGHT_DATE")}</label>
{/* TZ §4.1.24.2 Table 69 R16: calendar days must not be selectable
until Город вылета is filled. Pass `disabled` to both the quick-
pick shortcuts and the full calendar picker. */}
<DayQuickPick
value={value.date ? yyyymmddToDate(value.date) : null}
locale={language}
onChange={handleDateChange}
disabled={!value.departure}
/>
<Calendar
value={value.date ? yyyymmddToDate(value.date) : null}
@@ -303,6 +307,7 @@ export const FlightsMapFilter: FC<FlightsMapFilterProps> = ({
dateFormat="dd.mm.yy"
placeholder={t("SHARED.DATE_FORMAT")}
showIcon
disabled={!value.departure}
className="input--filter"
inputId="fm-date"
data-testid="fm-date-input"
@@ -177,6 +177,12 @@
h3 {
margin: 0;
}
// TZ §4.1.24.2 R7: mobile version must not show the filter label
// "Найдите свой маршрут". Desktop/tablet retain it.
@include screen.mobile {
display: none;
}
}
&__field {
+8 -1
View File
@@ -10,6 +10,11 @@ export interface DayQuickPickProps {
count?: number;
/** Called with the chosen Date on click. */
onChange: (date: Date) => void;
/**
* When true, all quick-pick buttons are disabled and non-interactive.
* TZ §4.1.24.2 R16: days must not be selectable until Город вылета is set.
*/
disabled?: boolean;
}
function addDays(base: Date, n: number): Date {
@@ -40,6 +45,7 @@ export const DayQuickPick: FC<DayQuickPickProps> = ({
locale,
count = 3,
onChange,
disabled = false,
}) => {
const today = new Date();
today.setHours(0, 0, 0, 0);
@@ -69,8 +75,9 @@ export const DayQuickPick: FC<DayQuickPickProps> = ({
<button
key={i}
type="button"
className={`day-quick-pick__btn${selected ? " day-quick-pick__btn--selected" : ""}`}
className={`day-quick-pick__btn${selected ? " day-quick-pick__btn--selected" : ""}${disabled ? " day-quick-pick__btn--disabled" : ""}`}
aria-pressed={selected}
disabled={disabled}
onClick={() => onChange(d)}
data-testid={`day-quick-pick-${i}`}
>