Initial commit: Aeroflot Flights Web Angular 12 application

ClientApp/src/app/components/city-autocomplete/cities-search-service/cities-search.service.spec.ts

@@ -0,0 +1,121 @@
+import { TestBed } from '@angular/core/testing';
+import { getDictionariesServiceMock } from '@modules/components/page-filters/services/dictionaries-service.mock';
+import { DictionariesService } from '@modules/components/page-filters/services/dictionaries-service';
+import { Language } from '@shared/enumerators';
+import { sortStrings } from '@shared/helpers/sorterts';
+import { LocalizationService } from '@shared/services';
+
+import { CitiesSearchService } from './cities-search.service';
+
+describe('CitiesSearchService', () => {
+    let service: CitiesSearchService;
+    let dictService: DictionariesService;
+    let localizationService: LocalizationService;
+
+    beforeEach(async () => {
+        dictService = getDictionariesServiceMock();
+        localizationService = {
+            Language: Language.ru,
+        } as any;
+
+        TestBed.configureTestingModule({
+            providers: [
+                CitiesSearchService,
+                { provide: LocalizationService, useValue: localizationService },
+                { provide: DictionariesService, useValue: dictService },
+            ],
+        });
+        service = TestBed.inject(CitiesSearchService);
+
+        await dictService.ready$;
+    });
+
+    it('should sort results', () => {
+        const input = 'М';
+        const result = service.findCitiesByNameUnprocessed(input);
+        const citiesNames = result.map((city) => city.name);
+        const citiesNamesSorted = citiesNames.sort(sortStrings);
+
+        expect(citiesNamesSorted).toEqual(citiesNames);
+    });
+
+    it('should return 10 cities that start with "М"', () => {
+        const input = 'М';
+        const result = service.findCitiesByNameUnprocessed(input);
+
+        expect(result.length).toBe(11);
+
+        for (const item of result) {
+            expect(item.name[0]).toBe(input);
+        }
+    });
+
+    it('should return 3 cities. First should start with "Мо", other should include it', () => {
+        const input = 'Мо';
+        const inputLowerCase = input.toLowerCase();
+
+        const result = service.findCitiesByNameUnprocessed(input);
+
+        expect(result.length).toBe(3);
+
+        const names = result.map((city) => city.name.toLowerCase());
+        expect(names[0].indexOf(inputLowerCase)).toBe(0);
+        expect(names[1].indexOf(inputLowerCase)).not.toBe(0);
+        expect(names[1].includes(inputLowerCase)).toBeTruthy();
+        expect(names[2].indexOf(inputLowerCase)).not.toBe(0);
+        expect(names[2].includes(inputLowerCase)).toBeTruthy();
+    });
+
+    it('should return Moscow for "Мос" input', () => {
+        const input = 'Мос';
+
+        const result = service.findCitiesByNameUnprocessed(input);
+
+        expect(result.length).toBe(1);
+
+        expect(result[0].name).toBe('Москва');
+    });
+
+    it('should be case insensitive', () => {
+        function assertResult(input: string) {
+            const result = service.findCitiesByNameUnprocessed(input);
+
+            expect(result.length).toBe(1);
+            expect(result[0].name).toBe('Москва');
+        }
+
+        assertResult('Мос');
+        assertResult('МОС');
+        assertResult('МоС');
+    });
+
+    it('should add airports to found city', () => {
+        const input = 'Мос';
+        const result = service.findCitiesByName(input);
+
+        expect(result.length).toBe(3);
+        expect(result[0].name).toBe('Москва');
+        expect(result[1].name).toBe('Внуково');
+        expect(result[2].name).toBe('Шереметьево');
+    });
+
+    it('should find city by city code', () => {
+        const code = 'MOW';
+        const result = service.findCitiesByCode(code);
+
+        expect(result.length).toBe(3);
+        expect(result[0].name).toBe('Москва');
+        expect(result[1].name).toBe('Внуково');
+        expect(result[2].name).toBe('Шереметьево');
+    });
+
+    it('should find city by airport code', () => {
+        const code = 'VKO';
+        const result = service.findCitiesByAirportCode(code);
+
+        expect(result.length).toBe(3);
+        expect(result[0].name).toBe('Москва');
+        expect(result[1].name).toBe('Внуково');
+        expect(result[2].name).toBe('Шереметьево');
+    });
+});

ClientApp/src/app/components/city-autocomplete/cities-search-service/cities-search.service.ts

@@ -0,0 +1,149 @@
+import { Injectable } from '@angular/core';
+import {
+    AirportModel,
+    CityModel,
+} from '@modules/components/page-filters/models';
+import { DictionariesService } from '@modules/components/page-filters/services/dictionaries-service';
+import { Language } from '@shared/enumerators';
+import { sortByName } from '@shared/helpers/sorterts';
+import { LocalizationService } from '@shared/services';
+
+type AutocompleteItem = CityModel | AirportModel;
+
+@Injectable()
+export class CitiesSearchService {
+    private MAX_ITEMS_COUNT = 10;
+    private CODE_LENGTH = 3;
+    private lang: Language;
+
+    constructor(
+        private localizationService: LocalizationService,
+        private dictService: DictionariesService,
+    ) {
+        this.lang = localizationService.Language;
+    }
+
+    private static addAirportsToCities(
+        cities: CityModel[],
+    ): AutocompleteItem[] {
+        return cities.reduce((result, city) => {
+            const airports = city.airports
+                .filter((airport: AirportModel) => {
+                    return airport.code !== city.code;
+                })
+                .sort(sortByName);
+
+            return [...result, city, ...airports];
+        }, [] as AutocompleteItem[]);
+    }
+
+    private static removeDuplicates(cities: CityModel[]): CityModel[] {
+        const citiesMap = new Map(cities.map((city) => [city.name, city]));
+
+        return Array.from(citiesMap, (mapItem) => mapItem[1]);
+    }
+
+    private findAirportsByName(airportName: string) {
+        return this.dictService.airportsAll
+            .filter((airport) => {
+                return (
+                    airport.name
+                        .toLowerCase()
+                        .indexOf(airportName.toLowerCase()) === 0
+                );
+            })
+            .sort(sortByName);
+    }
+
+    private findCitiesStartedWith(cityNamePart: string) {
+        return this.dictService.citiesAll
+            .filter((city) => {
+                return (
+                    city.name
+                        .toLowerCase()
+                        .indexOf(cityNamePart.toLowerCase()) === 0
+                );
+            })
+            .sort(sortByName);
+    }
+
+    private findCitiesThatIncludes(citiNamePart: string) {
+        return this.dictService.citiesAll
+            .filter((city) => {
+                return city.name
+                    .toLowerCase()
+                    .includes(citiNamePart.toLowerCase());
+            })
+            .sort(sortByName);
+    }
+
+    private findCitiesByAirportName(airportName) {
+        return this.findAirportsByName(airportName).map((airport) => {
+            return this.dictService.getCityByCode(airport.city_code);
+        });
+    }
+
+    private findAirportByCode(code: string): AirportModel | null {
+        if (code.length !== this.CODE_LENGTH) {
+            return null;
+        }
+
+        return this.dictService.getAirportByCode(code);
+    }
+
+    private processResult(cities: CityModel[]): AutocompleteItem[] {
+        const prepared = cities.slice(0, this.MAX_ITEMS_COUNT);
+
+        return CitiesSearchService.addAirportsToCities(prepared);
+    }
+
+    public findCitiesByNameUnprocessed(cityNamePart: string): CityModel[] {
+        const startsWith = this.findCitiesStartedWith(cityNamePart);
+
+        if (startsWith.length > this.MAX_ITEMS_COUNT) {
+            return startsWith;
+        }
+
+        const includes = this.findCitiesThatIncludes(cityNamePart);
+        const foundByCitiesNamePart = CitiesSearchService.removeDuplicates([
+            ...startsWith,
+            ...includes,
+        ]);
+
+        if (foundByCitiesNamePart.length > this.MAX_ITEMS_COUNT) {
+            return foundByCitiesNamePart;
+        }
+
+        const byAirports = this.findCitiesByAirportName(cityNamePart);
+        const notStartsWith = [...includes, ...byAirports].sort(sortByName);
+        return CitiesSearchService.removeDuplicates([
+            ...startsWith,
+            ...notStartsWith,
+        ]);
+    }
+
+    public findCitiesByName(cityNamePart: string) {
+        return this.processResult(
+            this.findCitiesByNameUnprocessed(cityNamePart),
+        );
+    }
+
+    public findCitiesByAirportCode(code): AutocompleteItem[] {
+        const airport = this.findAirportByCode(code);
+        if (!airport) {
+            return [];
+        }
+
+        return this.findCitiesByCode(airport.city_code);
+    }
+
+    public findCitiesByCode(code: string): AutocompleteItem[] {
+        if (code.length !== this.CODE_LENGTH) {
+            return [];
+        }
+
+        const city = this.dictService.getCityByCode(code);
+
+        return city ? this.processResult([city]) : [];
+    }
+}

ClientApp/src/app/components/city-autocomplete/city-autocomplete-item/city-autocomplete-item.component.html

@@ -0,0 +1,9 @@
+<div class="city-autocomplete__item" *ngIf="$any(item).countryName; else elseBlock">
+    <span class="city">{{ item.name }},</span>
+    <span class="country">&nbsp;{{ $any(item).countryName }}</span>
+</div>
+<ng-template #elseBlock>
+    <div class="city-autocomplete__item city-autocomplete__item--airport">
+        <span class="airport">{{ item.name }}</span>
+    </div>
+</ng-template>

ClientApp/src/app/components/city-autocomplete/city-autocomplete-item/city-autocomplete-item.component.scss

@@ -0,0 +1,33 @@
+@use "src/styles/framework" as *;
+
+.city-autocomplete__item {
+  white-space: nowrap;
+  height: $button-height;
+  border-bottom: 1.5px solid $border-input !important;
+  display: flex;
+  align-items: center;
+  padding-left: 0.429em;
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &--airport {
+    padding-left: $space-xl;
+  }
+
+  .city {
+    white-space: nowrap;
+    font-weight: $font-bold;
+  }
+
+  .country {
+    white-space: nowrap;
+    color: $gray;
+  }
+
+  .airport {
+    white-space: nowrap;
+    color: $gray;
+  }
+}

ClientApp/src/app/components/city-autocomplete/city-autocomplete-item/city-autocomplete-item.component.ts

@@ -0,0 +1,14 @@
+import { Component, Input } from '@angular/core';
+import {
+    AirportModel,
+    CityModel,
+} from '@modules/components/page-filters/models';
+
+@Component({
+    selector: 'city-autocomplete-item',
+    templateUrl: './city-autocomplete-item.component.html',
+    styleUrls: ['./city-autocomplete-item.component.scss'],
+})
+export class CityAutocompleteItemComponent {
+    @Input() item: CityModel | AirportModel;
+}

ClientApp/src/app/components/city-autocomplete/city-autocomplete.component.html

@@ -0,0 +1,50 @@
+<div class="city-autocomplete">
+    <div class="city-autocomplete__labels-container">
+        <label class="city-autocomplete__label">{{ label | translate }}</label>
+        <label class="city-autocomplete__label" data-testid="city-code">{{ city?.code }}</label>
+    </div>
+
+    <tooltip *ngIf="error">
+        {{ error | translate }}
+    </tooltip>
+
+    <div
+        class="city-autocomplete__input"
+        [ngClass]="{ 'city-autocomplete__input--has-value': city, 'city-autocomplete__input--has-error': error }"
+    >
+        <p-autoComplete
+            #autocomplite
+            [(ngModel)]="city"
+            (ngModelChange)="onCityChange()"
+            [autoHighlight]="true"
+            [suggestions]="items"
+            (completeMethod)="filterCity($event)"
+            field="name"
+            [size]="30"
+            [minLength]="1"
+            (onSelect)="selectLocation(city)"
+            (onKeyUp)="inputChange()"
+            placeholder="{{ placeholder | translate }}"
+            data-testid="city-autocomplete-input"
+        >
+            <ng-template let-value pTemplate="item">
+                <city-autocomplete-item [item]="value"></city-autocomplete-item>
+            </ng-template>
+        </p-autoComplete>
+
+        <!-- //todo: remove button-clear styles; create component instead -->
+        <button pButton label=" " class="button-clear" (click)="clearInput()" data-testid="autocomplete-clear-input"></button>
+        <button
+            pButton
+            label=" "
+            class="city-autocomplete__search-button"
+            [ngClass]="{ 'city-autocomplete__search-button--opened': openedPopup }"
+            (click)="openPopUp()"
+            data-testid="autocomplete-popup-button"
+        ></button>
+    </div>
+</div>
+
+<div class="city-autocomplete-popup-wrapper" *ngIf="openedPopup">
+    <city-select [city]="city" (selectLocation)="selectLocation($event)" (locate)="onLocate()"></city-select>
+</div>

ClientApp/src/app/components/city-autocomplete/city-autocomplete.component.scss

@@ -0,0 +1,60 @@
+@use "src/styles/framework" as *;
+
+.city-autocomplete {
+  display: flex;
+  flex-direction: column;
+
+  &__labels-container {
+    justify-content: space-between;
+    margin-bottom: $space-m;
+    width: 100%;
+
+    display: flex;
+    align-items: center;
+  }
+
+  &__label {
+    @include font-overflow();
+    @include font-small($gray);
+  }
+
+  &__input {
+    display: flex;
+    flex-direction: row;
+    position: relative;
+    align-items: center;
+    width: 100%;
+
+    @include control-border-shadow();
+  }
+
+  &__search-button {
+    width: $buttons-width !important;
+    min-width: $buttons-width;
+    border-radius: 0 $border-radius $border-radius 0 !important;
+    border: none !important;
+    border-left: 1px solid white !important;
+    background-color: transparent !important;
+    height: $standard-button-height - 2px;
+
+    &:hover {
+      background-color: $white !important;
+      border-left-color: $border-input !important;
+    }
+  }
+
+  &__input--has-value {
+    .button-clear {
+      display: block !important;
+    }
+
+    .city-autocomplete__search-button {
+      border-left: 1px solid $border-input !important;
+    }
+  }
+
+  &__input--has-error {
+    border-color: $red;
+  }
+}
+

ClientApp/src/app/components/city-autocomplete/city-autocomplete.component.spec.ts

@@ -0,0 +1,94 @@
+import { ElementRef, NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { CitiesSearchService } from '@components/city-autocomplete/cities-search-service/cities-search.service';
+import { CityAutocompleteComponent } from '@components/city-autocomplete/city-autocomplete.component';
+import { DictionariesService } from '@modules/components/page-filters/services/dictionaries-service';
+import { getDictionariesServiceMock } from '@modules/components/page-filters/services/dictionaries-service.mock';
+import { Language } from '@shared/enumerators';
+import { getMockPipe } from '@shared/pipes/pipe.mock';
+import { GeoService, LocalizationService } from '@shared/services';
+
+describe('CityAutocompleteComponent', () => {
+    let component: CityAutocompleteComponent;
+    let fixture: ComponentFixture<CityAutocompleteComponent>;
+    let citiesSearchService: CitiesSearchService;
+    let dictService: DictionariesService;
+    let elementRef: ElementRef;
+    let geoService: GeoService;
+    let localizationService: LocalizationService;
+
+    beforeEach(async () => {
+        dictService = getDictionariesServiceMock();
+        localizationService = {
+            Language: Language.ru,
+        } as any;
+        citiesSearchService = new CitiesSearchService(
+            localizationService,
+            dictService,
+        );
+        elementRef = {
+            nativeElement: {
+                contains: jasmine.createSpy(),
+            },
+        };
+        geoService = {
+            getPosition: () => {
+                return Promise.resolve({
+                    latitude: 1,
+                    longitude: 1,
+                });
+            },
+        } as any;
+
+        TestBed.configureTestingModule({
+            declarations: [CityAutocompleteComponent, getMockPipe('translate')],
+            providers: [
+                { provide: LocalizationService, useValue: localizationService },
+                { provide: DictionariesService, useValue: dictService },
+                { provide: CitiesSearchService, useValue: citiesSearchService },
+                { provide: ElementRef, useValue: elementRef },
+                { provide: GeoService, useValue: geoService },
+            ],
+            schemas: [NO_ERRORS_SCHEMA],
+        });
+
+        await dictService.ready$;
+    });
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(CityAutocompleteComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+
+        component.autocomplite = {
+            hide: jasmine.createSpy(),
+        } as any;
+    });
+
+    it('should set items', () => {
+        const event = { query: 'Мос' };
+        component.filterCity(event);
+
+        expect(component.items.length).not.toBe(0);
+    });
+
+    it("should set items even if keyboard layout isn't russian", () => {
+        const event = { query: 'Vjc' }; // Vjc === Мос
+        component.filterCity(event);
+
+        expect(component.items.length).not.toBe(0);
+    });
+
+    it('should city if there is full match', () => {
+        const event = { query: 'Москва' }; // Vjc === Мос
+        jasmine.clock().install();
+
+        component.filterCity(event);
+        jasmine.clock().tick(100);
+
+        expect(component.items).toBe(undefined);
+        expect(component.city.name).toBe(event.query);
+
+        jasmine.clock().uninstall();
+    });
+});

ClientApp/src/app/components/city-autocomplete/city-autocomplete.component.ts

@@ -0,0 +1,192 @@
+import {
+    Component,
+    ElementRef,
+    EventEmitter,
+    forwardRef,
+    HostListener,
+    Input,
+    Output,
+    ViewChild,
+    ViewEncapsulation,
+} from '@angular/core';
+import { CitiesSearchService } from './cities-search-service/cities-search.service';
+import { Language } from '@shared/enumerators';
+import { LocalizationService } from '@shared/services';
+import { DictionariesService } from '@modules/components/page-filters/services/dictionaries-service';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { AutoComplete } from 'primeng/autocomplete';
+import { Destroyable } from '@shared/destroyable';
+import {
+    AirportModel,
+    CityModel,
+} from '@modules/components/page-filters/models';
+import { ruKeyboardLayout } from '@shared/helpers/keyboardLayoutConverter';
+
+type AutocompleteItem = CityModel | AirportModel;
+
+@Component({
+    selector: 'city-autocomplete',
+    templateUrl: 'city-autocomplete.component.html',
+    styleUrls: ['./city-autocomplete.component.scss'],
+    encapsulation: ViewEncapsulation.None,
+    providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => CityAutocompleteComponent), // replace name as appropriate
+            multi: true,
+        },
+    ],
+})
+export class CityAutocompleteComponent
+    extends Destroyable
+    implements ControlValueAccessor
+{
+    openedPopup = false;
+
+    items: AutocompleteItem[];
+    regions: any[];
+    countres: any[];
+    airports: any[];
+    city: CityModel | AirportModel;
+
+    @Input() label: string;
+    @Input() placeholder: string;
+    @Input() error: string;
+    @Output() errorChange = new EventEmitter<string>();
+
+    @ViewChild('autocomplite') autocomplite: AutoComplete;
+
+    @HostListener('document:click', ['$event'])
+    clickout(event) {
+        if (!this.eRef.nativeElement.contains(event.target)) {
+            this.focusOut();
+        }
+    }
+
+    constructor(
+        private localizationService: LocalizationService,
+        private dictService: DictionariesService,
+        private eRef: ElementRef,
+        private citiesSearch: CitiesSearchService,
+    ) {
+        super();
+    }
+
+    writeValue(value: string) {
+        this.city = this.dictService.getCityOrAirport(value);
+    }
+
+    onTouched = () => {};
+    onChange = (_: string) => {};
+
+    registerOnChange(fn: (value: string) => void) {
+        this.onChange = fn;
+    }
+
+    registerOnTouched(fn: () => void) {
+        this.onTouched = fn;
+    }
+
+    async onLocate() {
+        const city = await this.dictService.locate();
+        if (city) {
+            this.selectLocation(city);
+        }
+    }
+
+    onCityChange() {
+        if (!this.city || typeof this.city === 'string') {
+            this.onChange(undefined);
+        }
+    }
+
+    focusOut() {
+        this.openedPopup = false;
+    }
+
+    filterCity(event) {
+        const text: string = event.query;
+        //this.onChange(text);
+
+        if (!this.dictService.citiesAll) {
+            return;
+        }
+
+        if (text.length === 3) {
+            const byCityCode = this.citiesSearch.findCitiesByCode(text);
+            if (byCityCode.length) {
+                this.items = byCityCode;
+                return;
+            }
+        }
+
+        const byName = this.citiesSearch.findCitiesByName(
+            this.convertText(text),
+        );
+
+        // If there is full match - select city and hide autocomplete menu
+        if (
+            byName.length &&
+            text.toLowerCase() === byName[0].name.toLowerCase()
+        ) {
+            setTimeout(() => {
+                this.autocomplite.hide();
+
+                this.selectLocation(byName[0]);
+                this.autocomplite.loading = false;
+            }, 100);
+
+            return;
+        }
+
+        if (byName.length) {
+            this.items = byName;
+            return;
+        }
+
+        const byCityCode = this.citiesSearch.findCitiesByCode(text);
+        if (byCityCode.length) {
+            this.items = byCityCode;
+            return;
+        }
+
+        this.items = this.citiesSearch.findCitiesByAirportCode(text);
+    }
+
+    convertText(text: string) {
+        return this.localizationService.Language === Language.ru
+            ? ruKeyboardLayout.fromEn(text)
+            : text;
+    }
+
+    selectLocation(value?: CityModel | AirportModel) {
+        this.city = value;
+        this.onChange(value?.code);
+        this.openedPopup = false;
+
+        if (!value) {
+            return;
+        }
+
+        this.resetError();
+    }
+
+    openPopUp() {
+        this.openedPopup = !this.openedPopup;
+        this.resetError();
+    }
+
+    clearInput() {
+        this.selectLocation(null);
+    }
+
+    inputChange() {
+        this.openedPopup = false;
+        this.resetError();
+    }
+
+    private resetError() {
+        this.error = undefined;
+        this.errorChange.emit(undefined);
+    }
+}

ClientApp/src/app/components/city-autocomplete/city-autocomplete.module.ts

@@ -0,0 +1,28 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { CitiesSearchService } from '@components/city-autocomplete/cities-search-service/cities-search.service';
+import { CityAutocompleteItemComponent } from '@components/city-autocomplete/city-autocomplete-item/city-autocomplete-item.component';
+import { CitySelectComponent } from '@components/city-autocomplete/city-select/city-select.component';
+import { AutoCompleteModule } from 'primeng/autocomplete';
+import { ToolkitModule } from '@toolkit/toolkit.module';
+import { ScrollPanelModule } from 'primeng/scrollpanel';
+import { CityAutocompleteComponent } from './city-autocomplete.component';
+
+@NgModule({
+    declarations: [
+        CityAutocompleteComponent,
+        CityAutocompleteItemComponent,
+        CitySelectComponent,
+    ],
+    providers: [CitiesSearchService],
+    exports: [CityAutocompleteComponent],
+    imports: [
+        CommonModule,
+        FormsModule,
+        AutoCompleteModule,
+        ToolkitModule,
+        ScrollPanelModule,
+    ],
+})
+export class CityAutocompleteModule {}

ClientApp/src/app/components/city-autocomplete/city-select/city-select.component.html

@@ -0,0 +1,81 @@
+<div class="city-autocomplete-popup">
+    <div class="tabs">
+        <button
+            pButton
+            *ngFor="let item of dictService.regions"
+            [ngClass]="{ active: item.id == currentRegion.id }"
+            type="button"
+            role="tab"
+            aria-selected="true"
+            label="{{ item.name }}"
+            class="tab-button"
+            (click)="loadRegion(item)"
+        ></button>
+    </div>
+
+    <div class="content">
+        <p-scrollPanel #sp class="content--scroll-panel" [style]="{ width: '100%', height: '350px' }">
+            <div *ngFor="let item of currentRegion.countries" class="row" [ngClass]="{ 'country-start-row': item.name }">
+                <div class="cell contry">
+                    <div>
+                        {{ item.name }}
+                    </div>
+                </div>
+                <div
+                    *ngIf="item.city1.airports.length == 1"
+                    class="cell city"
+                    [ngClass]="{ 'city-active': item.city1 == city }"
+                    attr.data-testid="city-name-cell-{{ item.city1.name }}"
+                >
+                    <div class="city--item" (click)="onLocationSelect(item.city1)">
+                        {{ item.city1.name }}
+                    </div>
+                </div>
+                <div *ngIf="item.city1.airports.length == 1" class="cell city" [ngClass]="{ 'city-active': item.city2 == city }">
+                    <div
+                        class="city--item"
+                        *ngIf="item.city2"
+                        (click)="onLocationSelect(item.city2)"
+                        attr.data-testid="city-name-cell-{{ item.city2.name }}"
+                    >
+                        {{ item.city2.name }}
+                    </div>
+                </div>
+                <div *ngIf="item.city1.airports.length > 1" class="cell city" [ngClass]="{ 'city-active': item.city1 == city }">
+                    <div class="city--item" (click)="onLocationSelect(item.city1)" attr.data-testid="city-name-cell-{{ item.city1.name }}">
+                        {{ item.city1.name }}
+                    </div>
+
+                    <div class="airports-column">
+                        <div
+                            *ngFor="let airport of item.city1.airports"
+                            pTooltip="{{ airport.name }}"
+                            tooltipPosition="top"
+                            class="city--item"
+                            (click)="onLocationSelect(airport)"
+                            attr.data-testid="airport-name-cell-{{ airport.name }}"
+                        >
+                            <!--[ngClass]="{'city-active':airport.code==city.code}"-->
+                            {{ airport.name }}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </p-scrollPanel>
+    </div>
+
+    <div *ngIf="featureFlags.FIND_MY_LOCATION_BUTTON" class="city-autocomplete-popup-footer">
+        <div class="gps-contaner">
+            <button
+                class="gps-button color blue-light"
+                pButton
+                type="button"
+                label="{{ 'BOARD.GPS-BUTTON' | translate }}"
+                (click)="onLocate()"
+            ></button>
+            <div class="gps-label-help">
+                {{ 'BOARD.GPS-HELP' | translate }}
+            </div>
+        </div>
+    </div>
+</div>

ClientApp/src/app/components/city-autocomplete/city-select/city-select.component.scss

@@ -0,0 +1,136 @@
+@use 'sass:math';
+@use "src/styles/framework" as *;
+
+.city-autocomplete-popup {
+  position: absolute;
+  width: 630px;
+  background: #ffffff;
+  border-radius: $border-radius;
+  opacity: 1;
+  @include control-border-shadow();
+  z-index: 10000;
+  margin-top: $space-s;
+
+  .tabs {
+    display: flex;
+    align-items: stretch;
+
+    .tab-button {
+      height: auto;
+      flex-grow: 1;
+      border-radius: 0;
+      background-color: $blue-extra-light;
+      border: none;
+      border-right: 1px solid $border;
+      border-bottom: 1px solid $border;
+
+      &:hover {
+        background-color: $blue-extra-light;
+        border-right: 1px solid $border;
+        border-bottom: 1px solid $border;
+
+        .p-button-label {
+          color: $text-color;
+        }
+      }
+
+      &.active {
+        background-color: $white;
+        border-bottom: 1px solid $white;
+
+        .p-button-label {
+          color: $text-color;
+        }
+      }
+
+      &:first-child {
+        border-radius: $border-radius 0 0 0;
+      }
+
+      &:last-child {
+        border-radius: 0 $border-radius 0 0;
+        border-right: none;
+      }
+
+      .p-button-label {
+        color: $blue;
+        font-weight: $font-bold;
+        font-size: 14px;
+        padding: 10px !important;
+      }
+    }
+  }
+
+  .city-autocomplete-popup-footer {
+    width: 100%;
+    background: #f3f9ff;
+
+    .gps-contaner {
+      width: 100%;
+      padding: $space-xl;
+      border-top: 1px solid $border;
+
+      .gps-button {
+        height: $standard-button-height;
+        width: 100%;
+        background-color: $blue-light;
+
+        .p-button-label {
+          font-size: $font-size-m;
+        }
+      }
+
+      .gps-label-help {
+        margin-top: $space-l;
+        @include font-small($gray);
+      }
+    }
+  }
+
+  .cell {
+    &.contry {
+      align-self: flex-start;
+      color: $text-color;
+      font-weight: $font-bold;
+      padding: 7.5px $space-m 7.5px 7.5px;
+      width: 30%;
+    }
+
+    &.city {
+      flex: 1;
+      padding-right: $space-m;
+      @include font-overflow();
+
+      .city--item {
+        width: auto;
+        max-width: 100%;
+        cursor: pointer;
+        @include font-overflow();
+        display: inline-block;
+        border-radius: $border-radius;
+        padding: math.div($space-l, 2) math.div($space-l, 2);
+        transition-duration: 0.1s;
+
+        &:hover {
+          background-color: $blue-extra-light;
+        }
+      }
+
+      .airports-column {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        margin-bottom: $space-m;
+
+        .city--item {
+          color: $light-gray;
+          margin-right: $space-m;
+        }
+      }
+
+      &:last-child {
+        padding-right: 0;
+      }
+    }
+  }
+}

ClientApp/src/app/components/city-autocomplete/city-select/city-select.component.ts

@@ -0,0 +1,65 @@
+import {
+    Component,
+    EventEmitter,
+    Input,
+    OnInit,
+    Output,
+    ViewChild,
+    ViewEncapsulation,
+} from '@angular/core';
+import {
+    AirportModel,
+    CityModel,
+    RegionFlatModel,
+} from '@modules/components/page-filters/models';
+import { DictionariesService } from '@modules/components/page-filters/services/dictionaries-service';
+import { FeatureFlagsService } from '@shared/services/feature-flags.service';
+import { ScrollPanel } from 'primeng/scrollpanel';
+
+@Component({
+    selector: 'city-select',
+    templateUrl: './city-select.component.html',
+    styleUrls: ['./city-select.component.scss'],
+    encapsulation: ViewEncapsulation.None,
+})
+export class CitySelectComponent implements OnInit {
+    currentRegion: RegionFlatModel;
+    @Input() city: CityModel | AirportModel;
+    @Output() selectLocation: EventEmitter<CityModel | AirportModel> =
+        new EventEmitter<CityModel | AirportModel>();
+    @Output() locate = new EventEmitter();
+
+    @ViewChild('sp', { static: false }) scrollPanel: ScrollPanel;
+
+    constructor(
+        public dictService: DictionariesService,
+        public featureFlags: FeatureFlagsService,
+    ) {}
+
+    ngOnInit() {
+        this.currentRegion = this.dictService.regions.find(
+            (x) => x.id == 500374,
+        );
+    }
+
+    loadRegion(region) {
+        this.currentRegion = region;
+
+        this.scrollPanel.scrollTop(0);
+    }
+
+    getRegionData() {
+        if (this.currentRegion) {
+            return this.currentRegion;
+        }
+        return [];
+    }
+
+    onLocationSelect(model: CityModel | AirportModel) {
+        this.selectLocation.emit(model);
+    }
+
+    onLocate() {
+        this.locate.emit();
+    }
+}

ClientApp/src/app/components/components.module.ts

@@ -0,0 +1,33 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CityAutocompleteModule } from '@components/city-autocomplete/city-autocomplete.module';
+import { DayTabsComponent } from '@components/dates-selectors/day-tabs/day-tabs.component';
+import { WeekTabsComponent } from '@components/dates-selectors/week-tabs/week-tabs.component';
+import { PageModule } from '@components/page/page.module';
+import { SearchHistoryModule } from '@components/search-history/search-history.module';
+import { ToolkitModule } from '@toolkit/toolkit.module';
+import { SameUrlNavigationDetectorComponent } from './same-url-navigation-detector/same-url-navigation-detector.component';
+
+@NgModule({
+    declarations: [
+        WeekTabsComponent,
+        DayTabsComponent,
+        SameUrlNavigationDetectorComponent,
+    ],
+    imports: [
+        CommonModule,
+        ToolkitModule,
+        PageModule,
+        CityAutocompleteModule,
+        SearchHistoryModule,
+    ],
+    exports: [
+        PageModule,
+        WeekTabsComponent,
+        DayTabsComponent,
+        SameUrlNavigationDetectorComponent,
+        CityAutocompleteModule,
+        SearchHistoryModule,
+    ],
+})
+export class ComponentsModule {}

ClientApp/src/app/components/dates-selectors/date-selector-base.ts

@@ -0,0 +1,87 @@
+import {
+    Component,
+    EventEmitter,
+    Input,
+    OnChanges,
+    OnInit,
+    Output,
+    SimpleChanges,
+} from '@angular/core';
+import { IDateTab } from '@toolkit/date-tabs/date-tabs.component';
+import { areSame, isSameOrBefore } from '@utils/date';
+import { DatesTranslationService } from '@shared/services/dates-translation.service';
+
+@Component({
+    selector: 'date-selector-base',
+    template: '',
+})
+export abstract class DateSelectorBaseComponent<T = unknown>
+    implements OnInit, OnChanges
+{
+    @Input() caption!: string;
+    @Input() selectedDate!: Date;
+    @Input() dateFrom!: Date;
+    @Input() dateTo!: Date;
+    @Input() minDate: Date;
+    @Input() maxDate: Date;
+    @Input() tabsPerPage = 7;
+
+    @Output() tabClick = new EventEmitter<T>();
+
+    tabs: IDateTab<T>[] = [];
+
+    protected constructor(
+        protected translationService: DatesTranslationService,
+    ) {}
+
+    ngOnInit() {
+        this.translationService.init().then(() => {
+            this.tabs = this.generateTabs();
+        });
+    }
+
+    ngOnChanges(changes: SimpleChanges) {
+        this.updateTabs();
+    }
+
+    public onTabClick(value: T) {
+        this.tabClick.emit(value);
+    }
+
+    protected isActive(date: Date) {
+        if (!this.selectedDate || !date) {
+            return false;
+        }
+
+        return areSame(this.selectedDate, date);
+    }
+
+    protected generateTabs(): IDateTab<T>[] {
+        const tabs = [];
+        let date = this.computeFirstDate();
+
+        // eslint-disable-next-line no-constant-condition
+        while (true) {
+            const tab = this.generateTab(date);
+
+            tabs.push(tab);
+            date = this.computeNextDate(date);
+
+            // generate tabs until we reach this.dateTo and
+            // can fulfill integer number of pages
+            if (
+                !isSameOrBefore(date, this.dateTo) &&
+                tabs.length % this.tabsPerPage === 0
+            ) {
+                break;
+            }
+        }
+
+        return tabs;
+    }
+
+    protected abstract updateTabs();
+    protected abstract generateTab(date: Date): IDateTab<T>;
+    protected abstract computeNextDate(date: Date): Date;
+    protected abstract computeFirstDate(): Date;
+}

ClientApp/src/app/components/dates-selectors/day-tabs/day-tabs.component.html

@@ -0,0 +1,6 @@
+<date-tabs
+    [tabs]="tabs"
+    [caption]="caption"
+    [tabsPerPage]="tabsPerPage"
+    (tabClick)="onTabClick($any($event))"
+></date-tabs>

ClientApp/src/app/components/dates-selectors/day-tabs/day-tabs.component.ts

@@ -0,0 +1,99 @@
+import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { DateSelectorBaseComponent } from '../date-selector-base';
+import { IDateTab } from '@toolkit/date-tabs/date-tabs.component';
+import { DatesTranslationService } from '@shared/services/dates-translation.service';
+import * as moment from 'moment';
+import { FlightModel, getFirstLeg, Leg } from '../../../shared/models-legacy';
+
+@Component({
+    selector: 'day-tabs',
+    templateUrl: './day-tabs.component.html',
+})
+export class DayTabsComponent extends DateSelectorBaseComponent<Date>
+    implements OnInit, OnChanges {
+
+    @Input() disabledDates: Date[];
+    @Input() flight: FlightModel | null;
+    departure: Leg;
+
+    ngOnChanges(changes: SimpleChanges) {
+        if ('flight' in changes && this.flight) {
+            this.departure = getFirstLeg(this.flight);
+        }
+
+        super.ngOnChanges(changes);
+    }
+
+    constructor(protected translationService: DatesTranslationService) {
+        super(translationService);
+    }
+
+    protected computeNextDate(date: Date): Date {
+        return moment(date).add(1, 'day').toDate();
+    }
+
+    protected computeFirstDate(): Date {
+        return this.dateFrom;
+    }
+
+    protected updateTabs() {
+        this.tabs = this.tabs.map((tab) => {
+            var dayForTab = moment(tab.value).format('YYYYMMDD');
+
+            const isTabActive = this.isActive(tab.value);
+            let isTabDisabled = !this.isEnabled(tab.value);
+
+            if (this.departure?.daysForTabs) {
+                isTabDisabled = !this.departure.daysForTabs.includes(dayForTab) || isTabDisabled;
+            }
+
+            if (this.disabledDates) {
+                isTabDisabled ||= this.disabledDates.findIndex((x)=>moment(x).format('YYYYMMDD')==dayForTab) > -1;
+            }
+
+            return {
+                ...tab,
+                active: isTabActive,
+                disabled: isTabDisabled,
+            };
+        });
+    }
+
+    protected generateTab(day: Date): IDateTab<Date> {
+        var dayForTab = moment(day).format('YYYYMMDD');
+
+        const isTabActive = this.isActive(day);
+        let isTabDisabled = !this.isEnabled(day);
+
+        if (this.departure?.daysForTabs) {
+            isTabDisabled = !this.departure.daysForTabs.includes(dayForTab) || isTabDisabled;
+        }
+
+        if (this.disabledDates) {
+            isTabDisabled ||= this.disabledDates.findIndex((x)=>moment(x).format('YYYYMMDD')==dayForTab) > -1;
+        }
+
+        return {
+            label: this.getTabLabel(day, isTabActive),
+            mobileLabel: this.getTabMobileLabel(day),
+            value: day,
+            active: isTabActive,
+            disabled: isTabDisabled,
+        };
+    }
+
+    private getTabMobileLabel(day: Date) {
+        return this.translationService.getFullDateString(day, true);
+    }
+
+    private getTabLabel(day: Date, isTabActive: boolean) {
+        const shortDateString = this.translationService.getShortDateString(day);
+        const fullDateString = this.translationService.getFullDateString(day);
+
+        return isTabActive ? fullDateString.toLowerCase() : shortDateString;
+    }
+
+    private isEnabled(day: Date) {
+        return moment(day).isBetween(this.minDate, this.maxDate, 'day', '[]');
+    }
+}

ClientApp/src/app/components/dates-selectors/week-tabs/week-tabs.component.html

@@ -0,0 +1,6 @@
+<date-tabs
+    [tabs]="tabs"
+    [caption]="caption"
+    [tabsPerPage]="tabsPerPage"
+    (tabClick)="onTabClick($any($event))"
+></date-tabs>

ClientApp/src/app/components/dates-selectors/week-tabs/week-tabs.component.ts

@@ -0,0 +1,94 @@
+import { Component, OnChanges, OnInit } from '@angular/core';
+import { getSunday, getStartOfTheWeek } from '@utils/date';
+import { DateSelectorBaseComponent } from '../date-selector-base';
+import { IDateTab } from '@toolkit/date-tabs/date-tabs.component';
+import { DatesTranslationService } from '@shared/services/dates-translation.service';
+import * as moment from 'moment';
+
+export type IWeekTabValue = {
+    dateFrom: Date;
+    dateTo: Date;
+};
+
+@Component({
+    selector: 'week-tabs',
+    templateUrl: './week-tabs.component.html',
+})
+export class WeekTabsComponent
+    extends DateSelectorBaseComponent<IWeekTabValue>
+    implements OnChanges, OnInit {
+
+    ngOnInit() {
+        super.ngOnInit();
+    }
+
+    constructor(protected translationService: DatesTranslationService) {
+        super(translationService);
+    }
+
+    protected updateTabs() {
+        this.tabs = this.tabs.map((tab) => {
+            const sunday = tab.value.dateTo;
+            const monday = tab.value.dateFrom;
+            const isTabActive = this.isActive(monday);
+            const isTabDisabled = !this.isEnabled(monday, sunday);
+
+            return {
+                ...tab,
+                active: isTabActive,
+                disabled: isTabDisabled,
+            };
+        });
+    }
+    protected computeNextDate(date: Date): Date {
+        return moment(date).add(1, 'week').toDate();
+    }
+
+    protected computeFirstDate(): Date {
+        return getStartOfTheWeek(this.dateFrom);
+    }
+
+    protected generateTab(monday: Date): IDateTab<IWeekTabValue> {
+        const isTabActive = this.isActive(monday);
+        const sunday = getSunday(monday);
+        const isTabDisabled = !this.isEnabled(monday, sunday);
+
+        return {
+            label: this.getTabLabel(monday, sunday),
+            mobileLabel: this.getTabMobileLabel(monday, sunday),
+            value: {
+                dateFrom: monday,
+                dateTo: sunday,
+            },
+            active: isTabActive,
+            disabled: isTabDisabled,
+        };
+    }
+
+    private getTabLabel(monday: Date, sunday: Date) {
+        const mondayShortDateString =
+            this.translationService.getShortDateString(monday);
+
+        const sundayShortDateString =
+            this.translationService.getShortDateString(sunday);
+
+        return `${mondayShortDateString} - ${sundayShortDateString}`;
+    }
+
+    private getTabMobileLabel(monday: Date, sunday: Date) {
+        const mondayFullDateString =
+            this.translationService.getFullDateString(monday);
+
+        const sundayFullDateString =
+            this.translationService.getFullDateString(sunday);
+
+        return `${mondayFullDateString} - ${sundayFullDateString}`;
+    }
+
+    private isEnabled(monday: Date, sunday: Date) {
+        return (
+            moment(monday).isSameOrAfter(this.minDate) &&
+            moment(sunday).isSameOrBefore(this.maxDate)
+        );
+    }
+}

ClientApp/src/app/components/meta-base/meta-base.component.ts

@@ -0,0 +1,39 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { DictionariesService } from '@modules/components/page-filters/services/dictionaries-service';
+
+@Component({
+    selector: 'meta-base',
+    template: '',
+})
+export abstract class MetaBaseComponent implements OnInit {
+    title = '';
+    description = '';
+
+    protected paramsName = 'params';
+
+    protected constructor(
+        protected route: ActivatedRoute,
+        protected dictionaries: DictionariesService,
+    ) {}
+
+    protected abstract translateTitle(params: string): string;
+    protected abstract translateDescription(params: string): string;
+
+    protected getCity(cityCode: string) {
+        return this.dictionaries.getCityOrAirport(cityCode)?.name || '';
+    }
+
+    ngOnInit(): void {
+        this.route.params.subscribe({
+            next: (routerParams) => {
+                const params = routerParams[this.paramsName];
+
+                this.dictionaries.ready$.then(() => {
+                    this.title = this.translateTitle(params);
+                    this.description = this.translateDescription(params);
+                });
+            },
+        });
+    }
+}

ClientApp/src/app/components/page/breadcrumds/page-breadcrumbs.component.html

@@ -0,0 +1 @@
+<p-breadcrumb [model]="items"></p-breadcrumb>

ClientApp/src/app/components/page/breadcrumds/page-breadcrumbs.component.spec.ts

@@ -0,0 +1,63 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ActivatedRoute } from '@angular/router';
+import { PageBreadcrumbsComponent } from '@components/page/breadcrumds/page-breadcrumbs.component';
+import { TranslateService } from '@ngx-translate/core';
+import { IRouteData } from '@typings/common/route';
+import { BehaviorSubject } from 'rxjs';
+
+describe('PageBreadcrumbsComponent', () => {
+    let fixture: ComponentFixture<PageBreadcrumbsComponent>;
+    let component: PageBreadcrumbsComponent;
+
+    const data: IRouteData = {};
+
+    const instantMock = jasmine.createSpy('instant');
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            declarations: [PageBreadcrumbsComponent],
+            providers: [
+                {
+                    provide: TranslateService,
+                    useValue: {
+                        instant: instantMock,
+                    },
+                },
+                {
+                    provide: ActivatedRoute,
+                    useValue: {
+                        data: new BehaviorSubject(data),
+                    },
+                },
+            ],
+        }).compileComponents();
+    });
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(PageBreadcrumbsComponent);
+        component = fixture.componentInstance;
+
+        data.breadcrumbs = undefined;
+        instantMock.calls.reset();
+    });
+
+    it('should contain only default breadcrumb item', () => {
+        component.ngOnInit();
+        expect(component.items.length).toBe(1);
+    });
+
+    it('should contain default breadcrumb item and items from data.breadcrumbs', () => {
+        data.breadcrumbs = [
+            {
+                label: 'breadcrumb 1',
+                url: 'url1',
+            },
+            {
+                label: 'breadcrumb 2',
+                url: 'url2',
+            },
+        ];
+        component.ngOnInit();
+        expect(component.items.length).toBe(3);
+    });
+});

ClientApp/src/app/components/page/breadcrumds/page-breadcrumbs.component.ts

@@ -0,0 +1,42 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { TranslateService } from '@ngx-translate/core';
+import { IRouteData } from '@typings/common/route';
+import { MenuItem } from 'primeng/api';
+
+export type IBreadCrumbItem = Required<Pick<MenuItem, 'label' | 'url'>>;
+const defaultMenuItem: IBreadCrumbItem = {
+    label: 'SHARED.MAIN',
+    url: 'https://www.aeroflot.ru',
+};
+
+@Component({
+    selector: 'flights-page-breadcrumbs',
+    templateUrl: './page-breadcrumbs.component.html',
+})
+export class PageBreadcrumbsComponent implements OnInit {
+    items: IBreadCrumbItem[] = [];
+
+    constructor(
+        private translation: TranslateService,
+        private route: ActivatedRoute,
+    ) {}
+
+    ngOnInit() {
+        this.route.data.subscribe((data: IRouteData) => {
+            let items = [defaultMenuItem];
+            if (data.breadcrumbs) {
+                items = items.concat(data.breadcrumbs);
+            }
+
+            this.items = this.translate(items);
+        });
+    }
+
+    private translate(items: IBreadCrumbItem[]) {
+        return items.map((item) => ({
+            ...item,
+            label: this.translation.instant(item.label) || item.label,
+        }));
+    }
+}

ClientApp/src/app/components/page/feedback/button/feedback-button.component.html

@@ -0,0 +1,4 @@
+<button class="feedback-button" (click)="showForm()">
+    {{ 'SHARED.FEEDBACK' | translate }}
+</button>
+<feedback-form *ngIf="formVisible" (clickOutside)="hideForm()"></feedback-form>

ClientApp/src/app/components/page/feedback/button/feedback-button.component.scss

@@ -0,0 +1,21 @@
+@use 'src/styles/framework' as *;
+
+.feedback-button {
+  box-sizing: border-box;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  padding: 3px 10px;
+  height: 25px;
+  min-height: 25px;
+
+  border-radius: 3px;
+  border: none;
+  background-color: $orange--hover;
+  color: $white;
+
+  font-size: $font-size-s;
+  line-height: 1.6;
+}

ClientApp/src/app/components/page/feedback/button/feedback-button.component.ts

@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'feedback-button',
+    templateUrl: './feedback-button.component.html',
+    styleUrls: ['./feedback-button.component.scss'],
+})
+export class FeedbackButtonComponent {
+    formVisible = false;
+
+    showForm() {
+        this.formVisible = true;
+    }
+
+    hideForm() {
+        this.formVisible = false;
+    }
+}

ClientApp/src/app/components/page/feedback/form/feedback-form.component.html

@@ -0,0 +1,23 @@
+<div class="feedback-form" (click)="handleWrapperClick()">
+    <button class="feedback-form__close">
+        <!-- inlined from assets/img/close.svg to change fill color -->
+        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
+            <path
+                id="close"
+                d="M19,6.41,17.59,5,12,10.59,6.41,5,5,6.41,10.59,12,5,17.59,6.41,19,12,13.41,17.59,19,19,17.59,13.41,12Z"
+                transform="translate(-5 -5)"
+                fill="#FFFFFF"
+            />
+        </svg>
+    </button>
+    <iframe
+        class="feedback-form__iframe"
+        src="https://forms.office.com/Pages/ResponsePage.aspx?id=DQSIkWdsW0yxEjajBLZtrQAAAAAAAAAAAAN__pz85X5UQ1dYVjA0RklSVlYwT0czWlhNSTZXWDA2Uy4u&embed=true"
+        style="border: none; max-width: 100%; max-height: 100vh"
+        allowfullscreen
+        webkitallowfullscreen
+        mozallowfullscreen
+        msallowfullscreen
+    >
+    </iframe>
+</div>

ClientApp/src/app/components/page/feedback/form/feedback-form.component.scss

@@ -0,0 +1,58 @@
+@use "src/styles/framework" as *;
+
+.feedback-form {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+
+  z-index: 1009;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  padding: 24px;
+
+  background-color: $dark-blue-opacity;
+
+  @include mobile() {
+    padding: $space-m;
+  }
+
+  &__iframe {
+    width: 640px;
+    height: 480px;
+
+    @include mobile() {
+      height: 100%;
+    }
+  }
+
+  &__close {
+    position: absolute;
+    top: 24px;
+    right: 24px;
+
+    display: none;
+    width: 40px;
+    height: 40px;
+
+    background-color: transparent;
+
+    border: none;
+    color: white;
+
+    @include mobile() {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    svg {
+      width: 28px;
+      height: 28px;
+    }
+  }
+}

ClientApp/src/app/components/page/feedback/form/feedback-form.component.ts

@@ -0,0 +1,15 @@
+import { Component, EventEmitter, Output } from '@angular/core';
+
+@Component({
+    selector: 'feedback-form',
+    templateUrl: './feedback-form.component.html',
+    styleUrls: ['./feedback-form.component.scss'],
+})
+export class FeedbackFormComponent {
+    @Output() clickOutside: EventEmitter<undefined> =
+        new EventEmitter<undefined>();
+
+    handleWrapperClick() {
+        this.clickOutside.emit();
+    }
+}

ClientApp/src/app/components/page/layout/page-layout.component.html

@@ -0,0 +1,28 @@
+<div class="page-layout__row page-layout__header">
+    <aside class="page-layout__column-left page-layout__header-left">
+        <ng-content select="[header-left]"></ng-content>
+    </aside>
+    <div class="page-layout__column-right page-layout__header-right">
+        <div [ngClass]="pageLayoutTitleClasses">
+            <flights-page-breadcrumbs></flights-page-breadcrumbs>
+            <ng-content select="[title]"></ng-content>
+        </div>
+        <feedback-button
+            *ngIf="featureFlags.FEEDBACK_BUTTON_AVAILABLE"
+            class="page-layout__feedback-button"
+        ></feedback-button>
+    </div>
+</div>
+<div class="page-layout__row page-layout__content">
+    <aside class="page-layout__column-left">
+        <ng-content select="[content-left]"></ng-content>
+    </aside>
+    <main class="page-layout__column-right">
+        <div class="page-layout__sticky-content">
+            <ng-content select="[sticky-content]"></ng-content>
+        </div>
+        <scroll-up-button *ngIf="withScrollUp"></scroll-up-button>
+        <ng-content></ng-content>
+    </main>
+</div>
+<div *ngIf="withScrollOverlay" class="page-layout__scroll-overlay"></div>

ClientApp/src/app/components/page/layout/page-layout.component.scss

@@ -0,0 +1,164 @@
+@use "src/styles/framework" as *;
+@use "src/styles/positioning";
+
+.page-layout {
+  &__row {
+    position: relative;
+
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: flex-start;
+
+    margin: 0 auto;
+    width: 100%;
+    max-width: $site-width;
+
+    @include print {
+      width: 100% !important;
+      padding: 0 !important;
+      margin: 0 !important;
+      max-width: 100% !important;
+    }
+
+    @include smTablet {
+      flex-flow: column wrap;
+    }
+  }
+
+  &__column-left {
+    position: sticky;
+    top: 20px;
+    bottom: 20px;
+    z-index: 1001;
+
+    flex-shrink: 0;
+    margin-left: 0;
+    margin-right: 1.5%;
+    width: $left-aside-width;
+
+    @media (max-width: $media-breakpoint-desktop) {
+      width: $left-aside-width-desktop;
+    }
+
+    @media (max-width: $media-breakpoint-tablet) {
+      position: relative;
+      top: 0;
+
+      width: 100%;
+      margin-right: 0;
+    }
+  }
+
+  &__column-right {
+    position: relative;
+    width: calc(100% - #{$left-aside-width} - #{$column-spacing});
+
+    @include print {
+      width: 100% !important;
+      margin-top: 20px !important;
+    }
+
+    @media (max-width: $media-breakpoint-desktop) {
+      width: calc(100% - #{$left-aside-width-desktop} - 1.5%);
+    }
+
+    @media (max-width: $media-breakpoint-tablet) {
+      width: 100%;
+    }
+  }
+
+  &__header-right {
+    margin-top: auto;
+    display: flex;
+    justify-content: space-between;
+
+    @include smTablet {
+      flex-direction: column;
+      order: 1;
+    }
+  }
+
+  &__header-left {
+    margin-top: auto;
+
+    @include smTablet {
+      order: 2;
+    }
+  }
+
+  &__title {
+    width: calc(100% - 120px);
+  }
+
+  &__title--fullwidth {
+    width: 100%;
+  }
+
+  &__header {
+    position: relative;
+    z-index: 1001;
+
+    padding-top: $space-top-site;
+    margin-bottom: $space-xl;
+
+    @include mobile {
+      margin-bottom: $space-m;
+    }
+  }
+
+  &__content &__column-left{
+    @include smTablet {
+      margin-bottom: $space-xl;
+    }
+
+    @include mobile {
+      margin-bottom: $space-m;
+    }
+  }
+
+  &__content &__column-left:empty {
+    @include smTablet {
+      margin-bottom: 0;
+    }
+  }
+
+  &__feedback-button {
+    margin-top: auto;
+    flex-shrink: 0;
+
+    @include smTablet {
+      margin-bottom: $space-m;
+    }
+
+    @include print {
+      display: none;
+    }
+  }
+
+  &__scroll-overlay {
+    @include mobile {
+      display: none;
+    }
+
+    position: fixed;
+    z-index: positioning.$sticky-elements-z-index - 1;
+    top: 0;
+    left: 0;
+
+    width: calc(100% - 20px); // set width less than viewport to prevent scroll clipping on windows
+    height: positioning.$sticky-threshold + 5px; // increase height to prevent content revealing when sticky element corners rounded
+
+    background-color: $blue-dark !important;
+    background-image: url('~src/assets/img/background.jpg');
+    background-repeat: no-repeat;
+    background-size: 100vw;
+  }
+
+  &__sticky-content {
+    @include gt-mobile {
+      position: sticky;
+      z-index: positioning.$sticky-elements-z-index;
+      top: positioning.$sticky-threshold;
+    }
+  }
+}

ClientApp/src/app/components/page/layout/page-layout.component.spec.ts

@@ -0,0 +1,106 @@
+import { ChangeDetectorRef } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ActivatedRoute } from '@angular/router';
+import { PageBreadcrumbsComponent } from '@components/page/breadcrumds/page-breadcrumbs.component';
+import { FeedbackButtonComponent } from '@components/page/feedback/button/feedback-button.component';
+import { FeedbackFormComponent } from '@components/page/feedback/form/feedback-form.component';
+import { PageLayoutComponent } from '@components/page/layout/page-layout.component';
+import { TranslateService } from '@ngx-translate/core';
+import { getMockPipe } from '@shared/pipes/pipe.mock';
+import { FeatureFlagsService } from '@shared/services/feature-flags.service';
+import { TitleComponent } from '@toolkit/title/title.component';
+import { BreadcrumbModule } from 'primeng/breadcrumb';
+import { TooltipModule } from 'primeng/tooltip';
+import { BehaviorSubject } from 'rxjs';
+
+describe('PageLayoutComponent', () => {
+    let component: PageLayoutComponent;
+    let fixture: ComponentFixture<PageLayoutComponent>;
+    let featureFlags: FeatureFlagsService;
+    let hostElement: HTMLElement;
+
+    const instantMock = jasmine.createSpy('instant');
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            declarations: [
+                PageLayoutComponent,
+                PageBreadcrumbsComponent,
+                FeedbackButtonComponent,
+                FeedbackFormComponent,
+                TitleComponent,
+                getMockPipe('translate'),
+            ],
+            providers: [
+                FeatureFlagsService,
+                {
+                    provide: TranslateService,
+                    useValue: {
+                        instant: instantMock,
+                    },
+                },
+                {
+                    provide: ActivatedRoute,
+                    useValue: {
+                        data: new BehaviorSubject({}),
+                    },
+                },
+            ],
+            imports: [BreadcrumbModule, TooltipModule],
+        }).compileComponents();
+    });
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(PageLayoutComponent);
+        component = fixture.componentInstance;
+        hostElement = fixture.nativeElement;
+        featureFlags = TestBed.inject(FeatureFlagsService);
+
+        instantMock.calls.reset();
+    });
+
+    it('should return object with page-layout__title class if feedback feature is enabled', () => {
+        featureFlags.FEEDBACK_BUTTON_AVAILABLE = true;
+
+        expect(component.pageLayoutTitleClasses).toEqual({
+            'page-layout__title': true,
+            'page-layout__title--fullwidth': false,
+        });
+    });
+
+    it('should return object with all classes if feedback feature is disabled', () => {
+        expect(component.pageLayoutTitleClasses).toEqual({
+            'page-layout__title': true,
+            'page-layout__title--fullwidth': true,
+        });
+    });
+
+    it('should not render feedback button component', () => {
+        const button = hostElement.querySelector('feedback-button');
+        expect(button).toBe(null);
+    });
+
+    it('should render feedback button component', () => {
+        featureFlags.FEEDBACK_BUTTON_AVAILABLE = true;
+        fixture.detectChanges();
+
+        const button = hostElement.querySelector('feedback-button');
+        expect(button).not.toBe(null);
+    });
+
+    it('should not render scroll overlay if withScrollOverlay is false', () => {
+        fixture.detectChanges();
+        let overlay = hostElement.querySelector('.page-layout__scroll-overlay');
+        expect(overlay).toBeDefined();
+
+        component.withScrollOverlay = false;
+        const changeDetectorRef =
+            fixture.debugElement.injector.get<ChangeDetectorRef>(
+                ChangeDetectorRef,
+            );
+        changeDetectorRef.detectChanges();
+
+        overlay = hostElement.querySelector('.page-layout__scroll-overlay');
+        expect(overlay).toBe(null);
+    });
+});

ClientApp/src/app/components/page/layout/page-layout.component.ts

@@ -0,0 +1,23 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { FeatureFlagsService } from '@shared/services/feature-flags.service';
+
+@Component({
+    selector: 'page-layout',
+    templateUrl: './page-layout.component.html',
+    styleUrls: ['./page-layout.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PageLayoutComponent {
+    @Input() withScrollOverlay = true;
+    @Input() withScrollUp = true;
+
+    constructor(public featureFlags: FeatureFlagsService) {}
+
+    get pageLayoutTitleClasses() {
+        return {
+            'page-layout__title': true,
+            'page-layout__title--fullwidth':
+                !this.featureFlags.FEEDBACK_BUTTON_AVAILABLE,
+        };
+    }
+}

ClientApp/src/app/components/page/page.module.ts

@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FeedbackFormComponent } from '@components/page/feedback/form/feedback-form.component';
+import { ToolkitModule } from '@toolkit/toolkit.module';
+import { TranslateModule } from '@ngx-translate/core';
+import { BreadcrumbModule } from 'primeng/breadcrumb';
+import { PageBreadcrumbsComponent } from './breadcrumds/page-breadcrumbs.component';
+import { FeedbackButtonComponent } from './feedback/button/feedback-button.component';
+import { PageLayoutComponent } from './layout/page-layout.component';
+import { ScrollUpButtonComponent } from './scroll-up-button/scroll-up-button.component';
+
+@NgModule({
+    declarations: [
+        PageLayoutComponent,
+        FeedbackButtonComponent,
+        FeedbackFormComponent,
+        PageBreadcrumbsComponent,
+        ScrollUpButtonComponent,
+    ],
+    imports: [CommonModule, ToolkitModule, TranslateModule, BreadcrumbModule],
+    exports: [PageLayoutComponent],
+})
+export class PageModule {}

ClientApp/src/app/components/page/scroll-up-button/scroll-up-button.component.html

@@ -0,0 +1,4 @@
+<div id="observer-target"></div>
+<div [ngClass]="buttonClasses">
+    <div class="scroll-up__button" (click)="handleClick()"></div>
+</div>

ClientApp/src/app/components/page/scroll-up-button/scroll-up-button.component.scss

@@ -0,0 +1,45 @@
+@use "./src/styles/colors";
+@use "./src/styles/screen";
+
+.scroll-up {
+  display: none;
+
+  &--visible {
+    display: block;
+    position: fixed;
+    right: 30px;
+    bottom: 80px;
+    z-index: 2000;
+  }
+
+  &__button {
+    position: static;
+    margin: 0;
+
+    width: 40px;
+    height: 40px;
+
+    background-color: colors.$extra-blue;
+    background-image: url("~src/assets/img/arrow-up.svg");
+    background-repeat: no-repeat;
+    background-position: center center;
+
+    border-radius: 50%;
+    border: 1px solid colors.$blue-extra-light;
+    box-sizing: border-box;
+    cursor: pointer;
+  }
+}
+
+#observer-target {
+  position: absolute;
+
+  @include screen.gt-mobile {
+    top: -20px;
+
+    width: 10px;
+    height: 70px;
+    
+    visibility: hidden;
+  }
+}

ClientApp/src/app/components/page/scroll-up-button/scroll-up-button.component.ts

@@ -0,0 +1,83 @@
+import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+
+@Component({
+    selector: 'scroll-up-button',
+    templateUrl: './scroll-up-button.component.html',
+    styleUrls: ['./scroll-up-button.component.scss'],
+})
+export class ScrollUpButtonComponent implements OnInit, OnDestroy {
+    buttonVisible = false;
+    observer: IntersectionObserver;
+    interval: number;
+
+    constructor(private cdRef: ChangeDetectorRef) {}
+
+    ngOnInit(): void {
+        this.observer = new IntersectionObserver(
+            this.handleIntersection.bind(this),
+            {
+                root: null,
+                rootMargin: '0px',
+                threshold: [1],
+            },
+        );
+
+        this.observer.observe(document.querySelector('#observer-target'));
+
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        this.interval = setInterval(() => {
+            // need to check if visibility changed because of programmatic scroll in scrollTo directive
+            this.checkVisibility();
+        }, 500);
+    }
+
+    ngOnDestroy() {
+        this.observer.disconnect();
+        clearInterval(this.interval);
+    }
+
+    setButtonVisible(visible: boolean) {
+        this.buttonVisible = visible;
+        this.cdRef.detectChanges();
+    }
+
+    checkVisibility() {
+        if (this.buttonVisible) {
+            return;
+        }
+
+        const header = document.querySelector('.page-layout__header');
+        const { bottom } = header.getBoundingClientRect();
+
+        this.setButtonVisible(bottom < 0);
+    }
+
+    handleIntersection(entries: IntersectionObserverEntry[]) {
+        const entry = entries[0];
+
+        // entry.boundingClientRect.top < 0 means that observable target crossed
+        // top of the viewport. If top > 0 - target crossed the bottom of the
+        // viewport, and we don't need to show button.
+        const visible =
+            entry.intersectionRatio !== 1 && entry.boundingClientRect.top < 0;
+        this.setButtonVisible(visible);
+    }
+
+    handleClick() {
+        const body = document.querySelector('body');
+        // const bannerTop = document.querySelector('.wrapper-header');
+        const flightsRoot = document.querySelector('flights-root');
+        const { top } = flightsRoot.getBoundingClientRect();
+
+        body.scrollTo(0, body.scrollTop + top);
+        this.setButtonVisible(false);
+    }
+
+    get buttonClasses() {
+        return {
+            'scroll-up': true,
+            'scroll-up--visible': this.buttonVisible,
+        };
+    }
+}

ClientApp/src/app/components/same-url-navigation-detector/same-url-navigation-detector.component.ts

@@ -0,0 +1,40 @@
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { ActivatedRoute, UrlSegment } from '@angular/router';
+
+@Component({
+    selector: 'same-url-navigation-detector',
+    template: '<ng-container></ng-container>',
+})
+export class SameUrlNavigationDetectorComponent implements OnInit {
+    private segments: UrlSegment[] = [];
+
+    @Output() sameUrlNavigation = new EventEmitter<void>();
+
+    constructor(protected route: ActivatedRoute) {}
+
+    ngOnInit(): void {
+        this.observeSameUrlNavigation();
+    }
+
+    private observeSameUrlNavigation() {
+        this.route.url.subscribe({
+            next: (segments) => {
+                if (this.areSegmentsEqual(segments)) {
+                    this.sameUrlNavigation.emit();
+                }
+
+                this.segments = segments;
+            },
+        });
+    }
+
+    private areSegmentsEqual(newSegments: UrlSegment[]) {
+        if (this.segments.length !== newSegments.length) {
+            return false;
+        }
+
+        return this.segments.every((segment, index) => {
+            return segment.path === newSegments[index].path;
+        });
+    }
+}

ClientApp/src/app/components/search-history/components/online-board-flight-number-history-item/online-board-flight-number-history-item.component.html

@@ -0,0 +1,6 @@
+<div class="row-city">SU {{ params.flightNumber }}{{ params.suffix }}</div>
+<div class="description-row">
+    <span class="description">
+        {{ params.date | aflDate }}
+    </span>
+</div>

ClientApp/src/app/components/search-history/components/online-board-flight-number-history-item/online-board-flight-number-history-item.component.ts

@@ -0,0 +1,16 @@
+import { Component, Input, ViewEncapsulation } from '@angular/core';
+import { ISearchHistoryItem } from '@shared/services/history/search-history.service';
+import { IParsedFlightId } from '@typings/flight/flight-id';
+
+@Component({
+    selector: 'online-board-flight-number-history-item',
+    templateUrl: './online-board-flight-number-history-item.component.html',
+    encapsulation: ViewEncapsulation.None,
+})
+export class OnlineBoardFlightNumberHistoryItemComponent {
+    @Input() item: ISearchHistoryItem;
+
+    get params() {
+        return this.item.params as IParsedFlightId;
+    }
+}

ClientApp/src/app/components/search-history/components/online-board-item/online-board-history-item.component.html

@@ -0,0 +1,8 @@
+<online-board-route-history-item
+    *ngIf="!isFlightNumberSearch"
+    [item]="item"
+></online-board-route-history-item>
+<online-board-flight-number-history-item
+    *ngIf="isFlightNumberSearch"
+    [item]="item"
+></online-board-flight-number-history-item>

ClientApp/src/app/components/search-history/components/online-board-item/online-board-history-item.component.ts

@@ -0,0 +1,18 @@
+import { Component, Input, ViewEncapsulation } from '@angular/core';
+import { ISearchHistoryItem } from '@shared/services/history/search-history.service';
+import { IParsedFlightId } from '@typings/flight/flight-id';
+
+@Component({
+    selector: 'online-board-history-item',
+    templateUrl: './online-board-history-item.component.html',
+    encapsulation: ViewEncapsulation.None,
+})
+export class OnlineBoardHistoryItemComponent {
+    @Input() item: ISearchHistoryItem;
+
+    get isFlightNumberSearch(): boolean {
+        const params = this.item.params as IParsedFlightId;
+
+        return !!params.flightNumber;
+    }
+}

ClientApp/src/app/components/search-history/components/online-board-route-history-item/online-board-route-history-item.component.html

@@ -0,0 +1,20 @@
+<div class="row-city" *ngIf="arrival && departure">
+    {{ departure | cityName }} —
+    {{ arrival | cityName }}
+</div>
+<div class="row-city" *ngIf="arrival && !departure">
+    <span class="description">{{ 'BOARD.ARRIVAL' | translate }}</span>
+    {{ arrival | cityName }}
+</div>
+<div class="row-city" *ngIf="!arrival && departure">
+    <span class="description">{{ 'BOARD.DEPARTURE' | translate }}</span>
+    {{ departure | cityName }}
+</div>
+<div class="description-row">
+    <span class="description">
+        {{ date | aflDate }}
+    </span>
+    <span class="description" *ngIf="timeRange">
+        &nbsp;<span>{{ timeRange | timeRange }}</span>
+    </span>
+</div>

ClientApp/src/app/components/search-history/components/online-board-route-history-item/online-board-route-history-item.component.ts

@@ -0,0 +1,39 @@
+import { Component, Input, ViewEncapsulation } from '@angular/core';
+import { IOnlineBoardRoutePageUrlParams } from '@online-board/services/url/types';
+import { ISearchHistoryItem } from '@shared/services/history/search-history.service';
+import { IUrlTimeRange } from '@typings/common/url';
+
+@Component({
+    selector: 'online-board-route-history-item',
+    templateUrl: './online-board-route-history-item.component.html',
+    encapsulation: ViewEncapsulation.None,
+})
+export class OnlineBoardRouteHistoryItemComponent {
+    @Input() item: ISearchHistoryItem;
+
+    get params() {
+        return this.item.params as IOnlineBoardRoutePageUrlParams;
+    }
+
+    get arrival() {
+        return this.params.arrival;
+    }
+
+    get departure() {
+        return this.params.departure;
+    }
+
+    get date() {
+        return this.params.date;
+    }
+
+    get timeRange(): IUrlTimeRange {
+        const { timeTo, timeFrom } = this.params;
+        return timeFrom && timeTo
+            ? {
+                  timeFrom,
+                  timeTo,
+              }
+            : undefined;
+    }
+}

ClientApp/src/app/components/search-history/components/schedule-item/schedule-history-item.component.html

@@ -0,0 +1,18 @@
+<div class="description-row">
+    <span class="description">{{ title }}</span>
+</div>
+<div class="row-city">
+    {{ departure | cityName }} —
+    {{ arrival | cityName }}
+</div>
+<div class="description-row">
+    <span class="description">
+        {{ params.outbound.dateFrom | aflDate }} -
+        {{ params.outbound.dateTo | aflDate }}
+        <ng-container *ngIf="params.inbound">&nbsp;/&nbsp;</ng-container>
+    </span>
+    <span class="description" *ngIf="params.inbound">
+        {{ params.inbound.dateFrom | aflDate }} -
+        {{ params.inbound.dateTo | aflDate }}
+    </span>
+</div>

ClientApp/src/app/components/search-history/components/schedule-item/schedule-history-item.component.ts

@@ -0,0 +1,51 @@
+import { Component, Input, OnChanges, ViewEncapsulation } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+import { IScheduleRouteParams } from '@schedule/services/url/types';
+import { ISearchHistoryItem } from '@shared/services/history/search-history.service';
+
+@Component({
+    selector: 'schedule-history-item',
+    templateUrl: './schedule-history-item.component.html',
+    encapsulation: ViewEncapsulation.None,
+})
+export class ScheduleHistoryItemComponent implements OnChanges {
+    @Input() item: ISearchHistoryItem;
+
+    title: string;
+
+    constructor(private translate: TranslateService) {}
+
+    ngOnChanges() {
+        this.title = this.getTitle();
+    }
+
+    get params() {
+        return this.item.params as IScheduleRouteParams;
+    }
+
+    get arrival() {
+        return this.params.outbound.arrival;
+    }
+
+    get departure() {
+        return this.params.outbound.departure;
+    }
+
+    getTitle(): string {
+        const { outbound, inbound } = this.params;
+
+        let result = this.translate.instant('SCHEDULE.TITLE');
+
+        if (!inbound) {
+            result += ', ' + this.translate.instant('SHARED.PART_ONE_WAY');
+        } else {
+            result += ', ' + this.translate.instant('SHARED.THERE_AND_BACK');
+        }
+
+        if (outbound.connections === 0) {
+            result += ', ' + this.translate.instant('SHARED.ONLY_DIRECT');
+        }
+
+        return result;
+    }
+}

ClientApp/src/app/components/search-history/components/search-history-item/search-history-item.component.html

@@ -0,0 +1,26 @@
+<div class="row search-history-item">
+    <div class="row-icon search-history-item__icon">
+        <plane-icon
+            *ngIf="item.type !== 'schedule-route'"
+            pTooltip="{{ 'SHARED.LAST-SEARCH-BOARD' | translate }}"
+            tooltipPosition="top"
+            tooltipStyleClass="afl-tooltip"
+        ></plane-icon>
+        <alarm-clock-icon
+            *ngIf="item.type === 'schedule-route'"
+            pTooltip="{{ 'SHARED.LAST-SEARCH-SCHEDULE' | translate }}"
+            tooltipPosition="top"
+            tooltipStyleClass="afl-tooltip"
+        ></alarm-clock-icon>
+    </div>
+    <div class="row-data search-history-item__data">
+        <schedule-history-item
+            *ngIf="item.type === 'schedule-route'"
+            [item]="item"
+        ></schedule-history-item>
+        <online-board-history-item
+            *ngIf="item.type !== 'schedule-route'"
+            [item]="item"
+        ></online-board-history-item>
+    </div>
+</div>

ClientApp/src/app/components/search-history/components/search-history-item/search-history-item.component.scss

@@ -0,0 +1,29 @@
+@use 'src/styles/colors';
+
+.search-history-item {
+  display: flex !important;
+
+  &:hover .search-history-item__icon svg {
+    fill: colors.$blue;
+  }
+
+  &__icon {
+    display: flex !important;
+    align-items: center;
+    flex-grow: 0;
+  }
+
+  &__data {
+    display: flex !important;
+    flex-direction: column;
+    flex-grow: 1;
+
+    .description-row {
+      flex-wrap: wrap;
+    }
+
+    .description {
+      white-space: normal;
+    }
+  }
+}

ClientApp/src/app/components/search-history/components/search-history-item/search-history-item.component.ts

@@ -0,0 +1,12 @@
+import { Component, Input, ViewEncapsulation } from '@angular/core';
+import { ISearchHistoryItem } from '@shared/services/history/search-history.service';
+
+@Component({
+    selector: 'search-history-item',
+    templateUrl: './search-history-item.component.html',
+    styleUrls: ['./search-history-item.component.scss'],
+    encapsulation: ViewEncapsulation.None,
+})
+export class SearchHistoryItemComponent {
+    @Input() item: ISearchHistoryItem;
+}

ClientApp/src/app/components/search-history/search-history.component.html

@@ -0,0 +1,19 @@
+<section class="frame search-history" *ngIf="historyItems.length">
+    <p-accordion expandIcon="" collapseIcon="">
+        <p-accordionTab>
+            <p-header>
+                {{ 'BOARD.YOU_SEARCH' | translate }}
+                <arrow-down-icon></arrow-down-icon>
+            </p-header>
+
+            <div class="search-history__content">
+                <div
+                    *ngFor="let item of historyItems"
+                    (click)="openHistoryUrl(item)"
+                >
+                    <search-history-item [item]="item"></search-history-item>
+                </div>
+            </div>
+        </p-accordionTab>
+    </p-accordion>
+</section>

ClientApp/src/app/components/search-history/search-history.component.scss

@@ -0,0 +1,21 @@
+@use "src/styles/variables" as *;
+@use "src/styles/screen" as *;
+
+.search-history {
+  margin: $space-xl 0;
+
+  @include tablets() {
+    margin-bottom: 0;
+  }
+
+  @include mobile() {
+    margin-top: $space-m;
+    margin-bottom: 0;
+  }
+
+  &__content {
+    max-height: 600px;
+
+    overflow-y: scroll;
+  }
+}

ClientApp/src/app/components/search-history/search-history.component.ts

@@ -0,0 +1,37 @@
+import { Component, Inject, ViewEncapsulation } from '@angular/core';
+import { Router } from '@angular/router';
+import {
+    FlightRequestType,
+    ViewType,
+} from '@shared/enumerators/flight-request-type.enum';
+import { AppSettings } from '@shared/models-legacy';
+import { APP_SETTINGS } from '@shared/services';
+import {
+    ISearchHistoryItem,
+    SearchHistoryService,
+} from '@shared/services/history/search-history.service';
+
+@Component({
+    selector: 'search-history',
+    templateUrl: './search-history.component.html',
+    styleUrls: ['./search-history.component.scss'],
+    encapsulation: ViewEncapsulation.None,
+})
+export class SearchHistoryComponent {
+    ViewType = ViewType;
+    FlightRequestType = FlightRequestType;
+
+    constructor(
+        @Inject(APP_SETTINGS) public settings: AppSettings,
+        private historyService: SearchHistoryService,
+        private router: Router,
+    ) {}
+
+    get historyItems() {
+        return this.historyService.items;
+    }
+
+    openHistoryUrl(item: ISearchHistoryItem) {
+        return this.router.navigateByUrl(item.url);
+    }
+}

ClientApp/src/app/components/search-history/search-history.module.ts

@@ -0,0 +1,25 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { SearchHistoryComponent } from '@components/search-history/search-history.component';
+import { PipesModule } from '@shared/pipes/pipes.module';
+import { ToolkitModule } from '@toolkit/toolkit.module';
+import { AccordionModule } from 'primeng/accordion';
+import { OnlineBoardHistoryItemComponent } from './components/online-board-item/online-board-history-item.component';
+import { ScheduleHistoryItemComponent } from './components/schedule-item/schedule-history-item.component';
+import { SearchHistoryItemComponent } from './components/search-history-item/search-history-item.component';
+import { OnlineBoardRouteHistoryItemComponent } from './components/online-board-route-history-item/online-board-route-history-item.component';
+import { OnlineBoardFlightNumberHistoryItemComponent } from './components/online-board-flight-number-history-item/online-board-flight-number-history-item.component';
+
+@NgModule({
+    declarations: [
+        SearchHistoryComponent,
+        OnlineBoardHistoryItemComponent,
+        ScheduleHistoryItemComponent,
+        SearchHistoryItemComponent,
+        OnlineBoardRouteHistoryItemComponent,
+        OnlineBoardFlightNumberHistoryItemComponent,
+    ],
+    exports: [SearchHistoryComponent],
+    imports: [CommonModule, ToolkitModule, AccordionModule, PipesModule],
+})
+export class SearchHistoryModule {}

ClientApp/src/app/components/title-base/details-title-base.ts

@@ -0,0 +1,68 @@
+import { Component, Input, OnChanges } from '@angular/core';
+import { TranslatePipe } from '@ngx-translate/core';
+import { RouteType } from '@typings/enums';
+import { IFlight } from '@typings/flight/flight';
+import { UrlBuilderService } from '@shared/services/url/url-builder.service';
+import { getFlightArrivalCity } from '@utils/flight/arrival/city';
+import { getFlightDepartureCity } from '@utils/flight/departure/city';
+
+@Component({
+    selector: 'details-title-base',
+    template: '',
+})
+export abstract class DetailsTitleBase implements OnChanges {
+    @Input() flight: IFlight;
+    title: string;
+
+    protected constructor(
+        protected translatePipe: TranslatePipe,
+        protected urlService: UrlBuilderService,
+    ) {}
+
+    ngOnChanges() {
+        this.title = this.translate();
+    }
+
+    protected abstract get titleKey(): string;
+    protected abstract get pluralTitleKey(): string;
+    protected abstract translatePluralTitle(): string;
+    protected abstract translateTitle(): string;
+
+    protected get base() {
+        return this.isConnecting
+            ? this.translatePipe.transform(this.pluralTitleKey)
+            : this.translatePipe.transform(this.titleKey);
+    }
+
+    protected get flightInfo() {
+        if (this.flight.routeType !== RouteType.CONNECTING) {
+            return this.urlService.formatFlightId(this.flight.flightId);
+        }
+
+        return this.flight.flights
+            .map((flight) => this.urlService.formatFlightId(flight.flightId))
+            .join(', ');
+    }
+
+    protected get departure() {
+        return getFlightDepartureCity(this.flight);
+    }
+
+    protected get arrival() {
+        return getFlightArrivalCity(this.flight);
+    }
+
+    private translate(): string {
+        if (!this.flight) {
+            return '';
+        }
+
+        return this.isConnecting
+            ? this.translatePluralTitle()
+            : this.translateTitle();
+    }
+
+    private get isConnecting() {
+        return this.flight.routeType === RouteType.CONNECTING;
+    }
+}