Elementy UI/UX dla wyszukiwarki e-commerce w branży turystycznej (HTML+CSS/ReactJS)

Zlecenie zamknięte
no avatar
ddopsien
Zleceniodawca
Kategoria zlecenia:
Usługi programowania
Budżet:

Do negocjacji

Umiejętności:
html
html5
javascript
Opublikowano:
Ważne do:

Opis zlecenia

Stworzenie komponentów React-a dla pól wyszukiwania w wyszukiwarce lotów na wzór https://en.tripmydream.com/. Style elementów HTML w oparciu o Bootstrap 4 (wykorzystanie klas i mixin-ów) - czyli bez użycia bibliotek typu styled-components. W oparciu o redux-saga.

Komponenty mają być bezstanowe i odzwierciedlać interfejs na wzór w przykładzie poniżej:

<LocationPicker onChange={handleChange} value={value} />

Komponenty:

- Pole lokalizacji: wartość w formacie KOD1_KOD2_KOD3 (gdzie kody to identyfikatory lokalizacji np. lotnisk); po zainicjalizowaniu pobiera z API do stanu reduxa pełne dane wg kodów np. dla "WAW" "Warszawa Chopina (lotnisko)" i wyświetla pełną nazwę użytkownikowi; można wybrać kilka miejsc (tak jak na TripMyDream); checkboxy tak jak w TripMyDream

Po wpisaniu dowolnej litery pytamy API o sugestie lokalizacji do wpisanej frazy i wyświetlamy je

Checkboxy tak jak w TripMyDream + wybrane już lokalizacje z zaznaczonymi checkboxami na samej górze. Po wybraniu lokalizacji modal zamyka się.

Wybór destynacji - przy braku wpisanych lokalizacji można wybrać "Anywhere" - po wybraniu innej lokalizacji po Anywhere - anywhere znika.

- Pole wyboru daty: zakładki tak jak na TripMyDream; do wyboru kiedykolwiek, zakres dat, konkretna data; kalendarz z możliwością zmiany miesięcy oparty o date-fns.

Działanie data wylotu: po kliknięciu na input tak jak na TripMyDream mamy do wyboru 3 opcje (zakładki). Po kliknięciu na 1) anytime modal się zamyka 2) Zakres dat wybieramy datę początkową i końcową zakresu - po ich wybraniu modal się zamyka 3) Konkretna data - wybieramy datę 1 kliknięciem i modal się zamyka.

Data powrotna: jak w data wylotu + 4) zakładka One-way - zamyka modal 5) zakładka Length of stay - slider z przyciskiem OK.

Komponenty powinny być mobile-friendly: tak jak na TripMyDream otwiera się tryb pełnoekranowy.

Komponenty mają zostać zainstalowane do istniejącego projektu do ktorego zostanie udostępniony kod źródłowy.

Proszę o wycenę i oszacowanie czasu realizacji zamówienia.

Wymagane funkcje:

w opisie