- Restructure PageLayout to render header row (tabs + title) and content row separately
- Update OnlineBoardStartPage and ScheduleStartPage to pass tabs as headerLeft
- Update search and details pages to use new headerLeft/title props
- Delete conflicting compiled JS files (page-layout.js, old index.tsx)
- Convert PageLayout from single-row to two-row structure (header row + content row)
- Move tabs to headerLeft prop to appear in proper header row
- Update all page components (OnlineBoardStartPage, ScheduleStartPage, search pages, detail pages)
- Update SCSS to use page-layout__row and page-layout__column-left/right classes
- Ensure pixel-perfect layout parity with Angular version
- Convert page-layout from CSS Grid to Flexbox to match Angular layout structure
- Use flex-direction: row with sticky left sidebar positioning
- Apply exact sidebar width (285px) and spacing (1.5% margin-right)
- Implement responsive breakpoints matching Angular media queries
- Set max-width: 1440px container with proper padding
- Standardize route-filter spacing using Angular spacing variables
- Update gap values: 16px → 10px (match $space-m)
- Update padding: 16px 0 → 20px (full padding around content)
- Update label margins: 8px gap → proper Angular spacing
- Adjust trip options gap: 16px → 20px ($space-xl)
- Update passenger/cabin controls gaps and padding to match Angular
- Fix online-board-filter accordion padding
- Remove top padding (5px → 0) for proper accordion content spacing
- Keep side/bottom padding at 20px to match Angular layout
This fixes paddings, margins, labels positioning, and gaps to achieve pixel-perfect parity with Angular.
The src/public directory contained older i18n JSON files missing many keys including
SHARED namespace translations. Copied the updated files from public/assets/i18n to
src/public/assets/i18n to ensure Vite serves the complete translation data.
- Expose native input field with data-testid support for test control
- Support clearing dates with empty value (null/undefined)
- Add ISO date format parsing (YYYY-MM-DD) for string inputs
- Sync native input with Calendar selection automatically
- Update styling to show native input with calendar icon button
- Display elements (selected-departure-date, selected-return-date) now disappear when date is cleared
- Add 'suggestion-list' test ID to dropdown container
- Add 'suggestion-item' test ID to individual airport suggestions
- Update dropdown styling with proper positioning, borders, and hover effects
- Suggestions display as absolute-positioned list below input
- Each suggestion shows airport code and name (e.g. 'SVO - Moscow Sheremetyevo')
- List is hidden when input is empty or user loses focus
- Items are clickable to select and populate the input field
- Add three error display elements with test IDs: departure-error, same-city-error, validation-error
- Add validation state management: departureError, arrivalError, sameAirportError, searchValidationError
- Add validateDepartureInput() function for input validation (reuses validateCityCode)
- Implement same-city validation in useEffect to detect duplicate departure/arrival
- Update handleSearch() to check all required fields and show validation-error when missing
- Add error styling: .route-filter__error with red text (#d32f2f), light red background (#ffebee), and left border
- Same-city error shows inline below arrival input
- Search validation error displays below action buttons
- Errors automatically clear when conditions are fixed
- Extend tripType state to include 'multi-city' option alongside 'one-way' and 'round-trip'
- Add third radio button for multi-city selection with test ID trip-type-multicity
- Update test IDs for existing radio buttons: trip-type-oneway (was trip-type-one-way) and trip-type-round (was trip-type-round-trip)
- Show additional-segments container only when multi-city is selected
- Display example segment with departure→arrival route and date
- Add comprehensive SCSS styling for multi-city UI elements:
- .route-filter__multicity-message for instruction text
- .route-filter__additional-segments for container
- .route-filter__segment for individual segment display
- .route-filter__segment-label, route, and date styles
- handleSearch callback already passes all tripType options including new 'multi-city'
- Maintains existing one-way and round-trip functionality unchanged
- Add cabinClass state with type 'economy' | 'business' | 'first' (default: economy)
- Add showCabinDropdown state to control visibility
- Add cabin-class-dropdown button to toggle visibility
- Add cabin-economy, cabin-business, cabin-first selection buttons
- Add cabin-class-display div showing selected cabin class
- Pass cabinClass in handleSearch callback
- Update RouteFilterProps with initialCabinClass prop
- Add SCSS styling for cabin class dropdown and options
- Integrate into OnlineBoardFilter to pass initialCabinClass
- Integrate into OnlineBoardSearchPage to decode cabinClass from URL params
CRITICAL ISSUE #1: Callback Signature Mismatch
- Updated handleRouteSearch callback to include passengers parameter
- Added passengers to params encoding in navigation state
- Updated OnlineBoardFilterProps to include passengers in initialSearchParams
CRITICAL ISSUE #2: Missing Validation on initialPassengers
- Added validatePassengerCounts function to validate and sanitize passenger counts
- Ensures all values are in valid range (0-9) and total doesn't exceed 9
- Updated state initialization to use validated passenger counts
- Removed unnecessary type assertion from handleSearch callback
Changes:
- online-board-filter.tsx: Updated callback signature and params encoding
- route-filter.tsx: Added passenger validation function and updated state init
- Add PassengerCounts interface for type safety
- Add adults, children, infants state variables (default: 1, 0, 0)
- Add passengers-dropdown button to toggle visibility
- Add increment/decrement buttons for each passenger type
- Display passenger counts in dedicated elements
- Enforce maximum 9 passengers total constraint
- Disable add buttons when max reached
- Pass passenger counts in handleSearch callback
- Add SCSS styling for dropdown and controls
- Support initialPassengers prop for pre-filling values
Import PrimeReact and PrimeIcons CSS libraries at the app entry point
to ensure styling is loaded. This matches the Angular app which imports
these libraries in angular.json.
- primereact/resources/primereact.min.css: Base component styles
- primeicons/primeicons.css: Icon library styles
This fixes missing component styling that was relying only on custom
overrides without the base theme.
- Auto-trigger search when departure or arrival city is selected
- Add display elements for selected cities (departure-display, arrival-display)
- Add display elements for selected dates (selected-departure-date, selected-return-date)
- Pass search params to filter component on search results page
- Support round-trip date selection with return date field
- Pass return date and trip type through navigation params
This fixes the first two search-filter tests (departure and arrival city searches).
Fixes#1 and #2 of the search-filter test suite.
- Updated feature card grid from CSS Grid to Flexbox (2x2 layout with 50% width)
- Added background image and title icon SVGs for visual parity
- Changed card title colors from dark gray to blue (#0066cc) matching Angular links
- Fixed padding and spacing to match Angular (50px sections, 65px icon offset)
- Added data-testid attributes for E2E testing
- Created comprehensive visual design alignment report documenting changes
- Update backstop configs to test React app at /ru-ru/onlineboard
- Generate reference screenshot from Angular version
- Run visual test: 47.31% mismatch identified (layout/styling differences)
- Identify key differences for design alignment
- Update i18n language detection to extract language code from URL (/ru-ru/ → 'ru')
- Move public assets to src/public/ to match Vite root directory
- Add missing translation keys: SHARED.DATE, SHARED.FROM, SHARED.TO, SHARED.DEPARTURE, SHARED.ROUTE
- Fix router configuration to use relative paths for language-prefixed routes
- App now loads at /ru-ru/onlineboard with full Russian translations
- Changed default activeTab from 0 to 1 to show Route Filter accordion tab by default
- This makes departure/arrival inputs visible for e2e tests
- Matches test expectations where inputs are directly accessible on start page
- Replaced PrimeReact TabView with custom tab buttons for better test compatibility
- Added proper 'active' class styling to tab buttons based on activeTab state
- Enhanced API mock data with complete flight information (all fields)
- Added 3 sample flights with different statuses (ON_TIME, DELAYED, BOARDING)
- Included departure/arrival details, boarding times, gates, and aircraft info
- Added TabView to OnlineBoardSearchPage with Departures/Arrivals tabs
- Updated RouteFilter test IDs to match test expectations (departure-input, arrival-input, search-button)
- Integrated BoardSearchResult component for flight list display
- Added proper tab state management and data-testid attributes
- Changed root route (/) to show OnlineBoardStartPage directly instead of redirecting
- Updated component tests to visit /components route
- Fixed button component test assertions (CSS checks and disabled state verification)
- Created 8 core shared components: Card, PageLayout, PageTabs, DayTabs, CalendarInput, TimeSelector, CityAutocomplete, SearchHistory, PageLoader, PageEmptyList
- Fixed SCSS circular dependency: removed self-imports in components/modules-components/index.scss and modules-pages/index.scss
- Updated page exports to use feature-based implementations
- Added City interface to CityAutocomplete with mock city data
- App now loads at localhost:3001 without SCSS errors
- Fixed all component SCSS files using single '../' to use '../../' to properly reach root styles directory
- Replaced incorrect './src/styles/' absolute-style paths with proper relative paths
- Fixed page directory imports with incorrect depth (../../../pages to ../../)
- All files in src/styles/components/* now use '../../' to reach framework, colors, variables, etc
- All files in src/styles/pages/* now use correct relative depth to reach sibling directories
- 86 SCSS files corrected
gnezim