Microfrontends Catalog
FlightPriceCalendar Cheap Flights Calendar component that displays an outbound and return calendar showing the cheapest flight on each day and highlighting the cheapest flight(s) in the month. Details ›
FlightSearchBar Search bar component that allows you to search for flights through the entering of departure airport, arrival airport, departure date, return date (not required if making one way flight), number of adults, number of children and the ages of those children. Details ›
FlightOfferList Displays a list of flight offers with origin, destination, departure date, return date, price and a link to show all prices. A sun animation is shown whilst the component is loading. Details ›
FlightSearchResults Displays search results as a series of flight cards that display the relevant flight information on them (times, flight duration, luggage details, price, etc). Also includes an alernative flights bar and sorting bar that allows user to sort flight cards by cheapest or fastest. Details ›
confirmation Component that displays booking confirmation with all necessary data and a countdown to the booked event. Details ›
customer-reviews Customer Reviews is a MFE that holds ratings and reviews supplied by customers in the tool Qualtrics. In this component you get the average rating of the hotel and overview ratings of specific topics such as rooms, pool, drinks and food. Details ›
cta-sticky-button Component displaying a cta-button for proceed to checkout page. Displays price, pax and number of nights Details ›
excursions Component displaying excursions available for a particular hotel from the Musement API for a particular date range. Details ›
hotel-map Component displaying a map with location of the hotel. It can also display nerby hotels when proper event is fired with search data. Details ›
hotel-offers Component displaying hotel offers. Source could be from latest search stored in local storage. Or ML call with a list of giataIds. Details ›
nordic-checkout The checkout user interface for Accommodation only where the customer filles in his personal information. Details ›
nordic-search-panel Search Panel component allows user to input search criteria and sync it with query parameters. User can control which fields are visible in the component. Details ›
progress-bar Component displaying a progress bar that show in which step of the checkout out flow the customer are at. Details ›
rooms-panel This is a MFE that contains a panel that shows all rooms and offer combinations for a hotel that the customer can buy Details ›
search Micro Frontend displaying dynamic accommodation only search results with filter and sorting possibilities. Details ›
search-map Micro Fronted displaying markers with hotel information like image, price and link on a map using Google Dynamic Maps api. Details ›
sticky-navigation Component displaying a sticky-navigation bar. Add <code>tui-sticky-nav-anchor</code> classes to elements that should be treated as navigation anchors. Details ›
tripadvisor TUI Tripadvisor is a MFE that holds ratings and reviews from Tripadvisor. In this component you get the average rating of the hotel and overview ratings of specific topics such as rooms, pool, drinks and food. Details ›
Promotional Codes This MFE shows promotion codes that are associated with a customer. Promotion codes and campaign-information are delivered by an API which is accessed in a readonly manner. Details ›
TermsAndConditions Terms & Conditions information for payment methods. It is used to show specific terms & conditions for the chosen payment method and options. Details ›
BaggageCourierService Simple MFE with static text and image for Baggage Courier Service, redirects to Baggage Carrier Service when clicking on "Book now" Details ›
Disney tickets preview component Disney tickets preview component is used for the initial possibility of seeing Disney tickets option. Details ›
Disney tickets selection component Disney tickets selection component is used for showing tickets that are available for customers to book. Details ›
Login This MFE allows the user to log in to his own account. It supports multiple languages and markets. Required attributes for this MFE are "forgot-password-link", "registration-link". This MFE is used in the "my account pages" host component. Details ›
Automatic Booking Association CFE This CFE allows the user (logged in or guest) to automatically associate new bookings to his customer account. Details ›
Automatic Booking Association MFE This MFE allows the user (logged in or guest) to automatically associate new bookings to his customer account. Details ›
myHeader MFE The myHeader MFE works as a gateway to Customer Account within the Global Header, enabling the user to see his auth status or enabling login and registration through myDrawer CFE or by simply redirecting the user to CA domain. Details ›
myDrawer CFE myDrawer CFE enables the users to easily access CA functionalities like login, registration, and forgot password through a layover sliding drawer, without needing to leave the page and ultimately without disrupting any potential flow/funnel that they’re in (search, booking, payment, etc.). Details ›