\r\n
\r\n
\r\n
\r\n
\r\n {!props.selfTravel &&\r\n
\r\n }\r\n
\r\n {props.selectedHotel &&\r\n
\r\n }\r\n {props.selectedLocation &&\r\n
\r\n
\r\n }\r\n {props.occupancy && props.occupancy.map((room, index) => (\r\n
\r\n
\r\n ))}\r\n {props.ChildAges && props.ChildAges.map((room, roomIndex) =>\r\n room.ages.map((age, ageIndex) => \r\n
\r\n )\r\n )}\r\n
onSelect(index)}\r\n >\r\n {index === 0 ? infantLabel : index}\r\n \r\n )\r\n}\r\nexport default AgeOption","import React from 'react'\r\n\r\nimport AgeOption from './AgeOption';\r\n\r\nimport { generateIntArray } from '../../helpers'\r\n\r\nconst AgeSelect = ({ isOpen, onSelect, handleClose, limits, infantLabel }) => {\r\n // Generate an array of possible ages, e.g. [1, 2, 3, 4, 5, 6, 7]\r\n const infantAges = generateIntArray(0, limits.MinChildAge - 1);\r\n const childAges = generateIntArray(limits.MinChildAge, limits.MaxChildAge);\r\n return (\r\n \r\n
Select child age
\r\n {infantAges.map((index) => (\r\n
\r\n ))}\r\n {childAges.map((index) => (\r\n
\r\n ))}\r\n
\r\n
\r\n
\r\n
\r\n
{labels['Room']} {index + 1}
\r\n {index > 0 &&\r\n
removeRoom(e)}>\r\n
\r\n }\r\n
\r\n
\r\n
\r\n
\r\n Adults \r\n {labels['Adult Age Label']} \r\n
\r\n
\r\n
this.modifyAdultCount(-1)}\r\n >\r\n \r\n
{Adults} \r\n
this.modifyAdultCount(1)}\r\n >\r\n \r\n
\r\n
\r\n
\r\n
Child {childIndex + 1}
| Age {age}\r\n
\r\n
this.removeChild(age)}>\r\n
\r\n
\r\n
\r\n
Infant {infantIndex + 1}
\r\n
\r\n
this.removeInfant()}>\r\n
\r\n
this.props.openAgeSelect()}>\r\n
\r\n {labels['Add a Child']}\r\n
\r\n
\r\n
this.containerRef = el}>\r\n\t\t\t\t
{labels['Guests']} \r\n\t\t\t\t
\r\n\t\t\t\t\t
this.handleInputClick()}\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t{(hasInteracted && partyString) ? partyString : labels['Guests Placeholder']}\r\n\t\t\t\t\t \r\n\t\t\t\t\t
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t
{labels['Guests']} \r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t{hasInteracted ? partyString : ''}\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t{Array.from(Array(Occupancy.length).keys()).map((roomId) =>\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\t{(!validOccupancy || !validMaxNumberOfInfants) &&\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t{!validOccupancy &&\r\n\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t{labels[\"Max number of PAX error\"]}\r\n\t\t\t\t\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t{!validMaxNumberOfInfants &&\r\n\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t{labels[\"Max number of Infants error\"]}\r\n\t\t\t\t\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t{labels['Add a Room']}
\r\n\t\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t{labels['Apply']}\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t
\r\n
\r\n {hotelOnlyLabel} \r\n
\r\n
\r\n {directLabel} \r\n
\r\n
\r\n
\r\n onTabClick(SEARCH_TABS.SEARCH)}\r\n >\r\n {searchTabLabel}\r\n \r\n onTabClick(SEARCH_TABS.MULTICENTRE)}\r\n >\r\n {multicentreTabLabel}\r\n \r\n \r\n )\r\n}\r\n\r\nexport default Tabs","import React from 'react';\r\n\r\n// Import all components used in the full width view\r\nimport Calendar from '../includes/calendar';\r\nimport Airports from '../includes/airports';\r\nimport SubmitButton from '../includes/submit-button';\r\nimport TypeaheadSearch from '../../../Atoms/Typeahead';\r\nimport Tabs from '../components/Tabs';\r\nimport Options from '../components/Options';\r\nimport Guests from '../components/Guests/Guests';\r\nimport RecentSearches from '../components/RecentSearches';\r\nimport HiddenInputs from '../components/HiddenInputs';\r\nimport ViewManager from '../../../../../managers/view';\r\nimport { tabletBreakpoint } from '../../../../../constants/breakpoints';\r\nimport toggleStickyLayouts from '../../../../../util/modals';\r\nimport RecentSearchButton from '../components/RecentSearchButton';\r\nimport { SEARCH_SUB_TABS, SEARCH_TABS } from '../../../../../constants/search';\r\nimport SubTabs from '../components/SubTabs';\r\n\r\nexport default class FullWidth extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n multiCenterSearchComponent: null,\r\n isModal: this.props.isMobile,\r\n isModalOpen: false,\r\n prevScrolledPosition: 0,\r\n activeSubTab: this.props.selfTravel ? SEARCH_SUB_TABS.HOTEL_ONLY : SEARCH_SUB_TABS.HOLIDAY,\r\n hasScrolled: false,\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n if (this.props.selectedTab === SEARCH_TABS.MULTICENTRE) {\r\n this.onTabClick(SEARCH_TABS.MULTICENTRE);\r\n }\r\n ViewManager.on(ViewManager.EVENT_UPDATE, this.handleViewUpdate);\r\n }\r\n\r\n componentWillUnmount() {\r\n ViewManager.off(ViewManager.EVENT_UPDATE, this.handleViewUpdate);\r\n }\r\n\r\n initMultiCenterSearch = async () => {\r\n const { default: MultiCenterSearch } = await import(/* webpackChunkName: \"MultiCenterSearch\" */ '../includes/multi-center-search');\r\n this.setState({\r\n multiCenterSearchComponent: MultiCenterSearch\r\n });\r\n }\r\n\r\n // Update search bar mode when changing between breakpoints\r\n handleViewUpdate = () => {\r\n if (ViewManager.hasTransitionedAboveAndWithin(tabletBreakpoint)) {\r\n this.setState({\r\n isModal: false,\r\n });\r\n } else if (ViewManager.hasTransitionedBelow(tabletBreakpoint)) {\r\n this.setState({\r\n isModal: true,\r\n });\r\n }\r\n }\r\n\r\n onTabClick = (tabName) => {\r\n if (tabName === SEARCH_TABS.MULTICENTRE) {\r\n this.initMultiCenterSearch();\r\n this.props.changeTab(SEARCH_TABS.MULTICENTRE);\r\n } else {\r\n this.props.changeTab(SEARCH_TABS.SEARCH);\r\n }\r\n }\r\n\r\n onSubTabClick = (tab) => {\r\n const selected = Object.values(SEARCH_SUB_TABS).find(value => value === tab.text);\r\n if (SEARCH_SUB_TABS.HOLIDAY === selected) {\r\n this.props.handleSelfTravel(false);\r\n } else {\r\n this.props.handleSelfTravel(true);\r\n }\r\n\r\n this.setState({\r\n activeSubTab: selected,\r\n })\r\n }\r\n\r\n closeModal = () => {\r\n this.setState({\r\n isModalOpen: false,\r\n });\r\n toggleStickyLayouts();\r\n // Restore scroll depth\r\n scrollTo(0, this.state.prevScrolledPosition);\r\n }\r\n\r\n openModal = () => {\r\n const currentScrollDepth = window.scrollY;\r\n this.setState({\r\n isModalOpen: true,\r\n prevScrolledPosition: currentScrollDepth,\r\n })\r\n toggleStickyLayouts();\r\n }\r\n\r\n render() {\r\n const {\r\n multiCenterSearchComponent: MultiCenterSearch,\r\n isModal,\r\n isModalOpen,\r\n activeSubTab,\r\n } = this.state;\r\n\r\n const {\r\n hasSearched,\r\n selectedTab,\r\n doesOverlap,\r\n isFullWidth,\r\n labels,\r\n limits,\r\n } = this.props;\r\n\r\n const searchBarClasses = [\"SearchBar-parent\"];\r\n const wrapperClasses = [\"SearchBar_wrapper\"];\r\n const containerClasses = ['SearchBar_container'];\r\n\r\n if (doesOverlap) {\r\n wrapperClasses.push(\"SearchBar_wrapper-overlap\");\r\n }\r\n\r\n if (isFullWidth || hasSearched) {\r\n searchBarClasses.push(\"SearchBar-fullWidth\");\r\n wrapperClasses.push(\"SearchBar_wrapper-noRadius\");\r\n }\r\n\r\n if (hasSearched && !isModalOpen) {\r\n wrapperClasses.push(\"hidden\");\r\n }\r\n\r\n if (isModal) {\r\n if (isModalOpen) {\r\n searchBarClasses.push(\"SearchBar-collapsed\");\r\n searchBarClasses.push(\"SearchBar_modal-open\");\r\n wrapperClasses.push(\"SearchBar_wrapper-modal\")\r\n } else {\r\n searchBarClasses.push(\"SearchBar-collapsed\");\r\n }\r\n }\r\n\r\n const searchBarClass = searchBarClasses.join(\" \");\r\n const wrapperClass = wrapperClasses.join(\" \");\r\n const containerClass = containerClasses.join(\" \");\r\n\r\n const modalControlText = selectedTab === SEARCH_TABS.SEARCH\r\n ? labels['Find your holiday']\r\n : labels['Inspire my holiday'];\r\n\r\n const subTabs = Object.values(SEARCH_SUB_TABS).map((tab) => ({\r\n text: tab,\r\n }));\r\n\r\n return (\r\n this.props.setSearchBarRef(el)}>\r\n {isModal &&\r\n
\r\n
\r\n
\r\n
\r\n
\r\n {modalControlText} \r\n
\r\n
\r\n
0}\r\n recentSearchText={labels['Recent searches']}\r\n recentSearchCount={this.props.recentSearches.length}\r\n isFullWidth\r\n />\r\n \r\n }\r\n
\r\n
\r\n
\r\n {isModalOpen &&\r\n
\r\n {isModal && selectedTab !== SEARCH_TABS.SEARCH &&\r\n
\r\n {modalControlText}\r\n \r\n }\r\n
\r\n
\r\n
\r\n }\r\n
\r\n {!isModal && 0}\r\n recentSearchLabel={this.props.labels['Recent searches']}\r\n hotelOnlyLabel={this.props.labels['Hotel only']}\r\n directLabel={this.props.labels['Direct Flights']}\r\n recentSearchCount={this.props.recentSearches.length}\r\n />\r\n }\r\n
\r\n {selectedTab === SEARCH_TABS.SEARCH &&\r\n
\r\n }\r\n {MultiCenterSearch && selectedTab === SEARCH_TABS.MULTICENTRE &&\r\n
\r\n }\r\n
\r\n
\r\n
\r\n
\r\n
\r\n {dictionary('Direct Flights')} \r\n
\r\n );\r\n}\r\n\r\nexport default Direct;\r\n","import React from 'react';\r\n\r\nconst InvalidDates = ({\r\n shouldErrorBeShown,\r\n\r\n labels\r\n}) => {\r\n return (\r\n \r\n {shouldErrorBeShown() && {labels[\"Invalid Dates Error\"]} }\r\n
\r\n );\r\n}\r\n\r\nexport default InvalidDates;\r\n","import React from 'react';\r\n\r\nconst ChildMessage = ({\r\n labels,\r\n showInfants,\r\n childCount\r\n}) => {\r\n return (\r\n \r\n {!showInfants && childCount > 0 &&\r\n
\r\n Have infants? Call one of our travel experts to book your holiday: 01293 762 410\r\n
\r\n }\r\n
\r\n {occupancy.map((country, index) => (\r\n
\r\n
\r\n {showInfants &&\r\n [\r\n
\r\n
\r\n
{labels.Adults}
\r\n
\r\n
\r\n
\r\n
\r\n ,
\r\n
\r\n
{labels.Children}
\r\n
\r\n
\r\n
\r\n
\r\n ,
\r\n
\r\n
{labels.Infants}
\r\n
\r\n
\r\n
\r\n
\r\n ]\r\n }\r\n {!showInfants &&\r\n [\r\n
\r\n
\r\n
{labels.Adults}
\r\n
\r\n
\r\n
\r\n
\r\n ,
\r\n
\r\n
{labels.Children}
\r\n
\r\n
\r\n
\r\n
\r\n ]\r\n }\r\n
\r\n {ChildAges[index].ages.map((child, cIndex) => (\r\n
\r\n \r\n Child {cIndex + 1} age\r\n \r\n \r\n {childRange.map((age, ageIndex) => (\r\n {age} \r\n ))}\r\n \r\n
\r\n ))}\r\n
\r\n
\r\n ))}\r\n
\r\n
\r\n handleRoomSizeChange(event)} value={rooms}>\r\n {options}\r\n \r\n
\r\n {!validOccupancy &&\r\n
\r\n {labels[\"Max number of PAX error\"]} \r\n
\r\n }\r\n {!validMaxNumberOfInfants &&\r\n
\r\n {labels[\"Max number of Infants error\"]} \r\n
\r\n }\r\n
this.departureAirportRef = el}>\r\n
\r\n {selectedAirport ? selectedAirport : placeholder}\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
Choose a departure airport
\r\n {airports.map((airport) =>\r\n
this.handleAirportClick(airport)}\r\n key={airport.AirportCode}\r\n >\r\n {airport.AirportName}\r\n \r\n )}\r\n
\r\n Hotel Only \r\n
\r\n );\r\n}\r\n\r\nexport default SelfTravel;","import React from 'react';\r\nimport SelectBox from '../../../Atoms/SelectBox';\r\n\r\nconst Duration = ({\r\n handleDurationChange,\r\n\r\n availableDurations,\r\n duration,\r\n componentIdentifier\r\n}) => {\r\n return (\r\n \r\n
\r\n );\r\n}\r\n\r\nexport default Duration;\r\n","import React from 'react';\r\n\r\nconst HiddenValues = ({\r\n selectedLocation,\r\n hotelCode\r\n}) => {\r\n return (\r\n \r\n
\r\n );\r\n}\r\n\r\nexport default HiddenValues;\r\n","import React from 'react'\r\n\r\nconst TextDatePicker = ({\r\n textDates,\r\n handleTextInput,\r\n inputClick,\r\n hasDefinedTextDates,\r\n dateRangeLabel,\r\n invalidDatesLabel,\r\n startDatePlaceholder,\r\n endDatePlaceholder,\r\n checkInDateLabel,\r\n checkOutDateLabel\r\n}) => {\r\n\r\n const getInvalidClass = (date) => {\r\n if (hasDefinedTextDates && !date.isValid) {\r\n return 'DateRangePicker_textInput-invalid';\r\n }\r\n return '';\r\n }\r\n\r\n return (\r\n \r\n
\r\n
\r\n {checkInDateLabel} \r\n
\r\n
\r\n {checkOutDateLabel} \r\n
\r\n
\r\n {hasDefinedTextDates && (!textDates.startDate.isValid || !textDates.endDate.isValid) &&\r\n
\r\n {invalidDatesLabel}\r\n
\r\n }\r\n
setRef(el)}>\r\n
\r\n handleShowOtherDates(e)}\r\n />\r\n \r\n {showOtherDatesLabel ? showOtherDatesLabel : 'Show me other dates'}\r\n \r\n
\r\n
\r\n {clearLabel} \r\n {applyLabel} \r\n
\r\n
{this.state.errorMessage} \r\n );\r\n }\r\n \r\n let searchBasket = document.querySelector('[data-element=\"search-basket\"]') !== null;\r\n let selectedLocation;\r\n\r\n // If we've selected a hotel or we are on a hotel page\r\n if (this.state.hotelCode || searchBasket) {\r\n selectedLocation = {\r\n Region: \"\",\r\n Resort: \"\",\r\n ArrivalAirports: [\r\n {\r\n AirportCode: \"\"\r\n }\r\n ],\r\n GeoLocationName: \"\"\r\n }\r\n }\r\n\r\n const partyString = this.getPartyString();\r\n\r\n const occupancy = this.state.searchParams.Occupancy;\r\n const ChildAges = this.state.searchParams.ChildAges;\r\n const labels = this.state.labels;\r\n const showInfants = this.state.showInfants;\r\n const isMobile = document.body.clientWidth < tabletBreakpoint;\r\n const componentIdentifier = this.state.componentIdentifier;\r\n let adults = [];\r\n let children = [];\r\n let infants = [];\r\n let isAirportValid = false;\r\n let datepickerClass = this.state.calendarActive ? 'DateOverlay active' : 'DateOverlay';\r\n datepickerClass = this.isAppleSafari(navigator.userAgent) ? datepickerClass + ' ios' : datepickerClass;\r\n datepickerClass = isMobile ? datepickerClass : '';\r\n let startDateString = this.state.startDate === null ? '' : moment(this.state.startDate).format('DD-MM-YYYY');\r\n let fakedateStartText = this.state.startDate === null ? labels['DurationDate']: startDateString;\r\n\r\n if (this.state.airport !== '' && this.state.airport !== 'default') {\r\n isAirportValid = true;\r\n }\r\n\r\n const hasSelectedRegion = this.state.activeRegion !== 'default' && this.state.activeRegion !== '';\r\n const hasDates = !!this.state.startDate && this.state.duration !== '';\r\n\r\n const airportIsValid = this.state.selfTravel || isAirportValid;\r\n\r\n let isSubmitDisabled = !(hasSelectedRegion && hasDates && airportIsValid);\r\n\r\n for (let i=0; i < this.state.adultLimit; i++) {\r\n adults.push({i + 1} );\r\n }\r\n\r\n for (let i=0; i <= this.state.childLimit; i++) {\r\n children.push({i} );\r\n }\r\n\r\n for (let i=0; i <= this.state.infantLimit; i++) {\r\n infants.push({i} );\r\n }\r\n\r\n let hidden = '';\r\n if (this.state.hasSearched) {\r\n hidden = 'hidden';\r\n }\r\n\r\n let options = [];\r\n for (let i = 1; i < this.state.roomLimit+1; i++) {\r\n options.push(\r\n {i} Room{!(i===1) && \"s\"} \r\n );\r\n }\r\n\r\n if (searchBasket) {\r\n let hotelCode = document.querySelector('[data-hotel-code]').dataset.hotelCode;\r\n if (this.state.selectedLocation !== undefined) {\r\n selectedLocation = this.state.selectedLocation;\r\n }\r\n return (\r\n \r\n {dictionary('Direct Flights')} \r\n
\r\n );\r\n}\r\n\r\nexport default Direct;\r\n","import React from 'react';\r\n\r\nconst InvalidDates = ({\r\n shouldErrorBeShown,\r\n\r\n labels\r\n}) => {\r\n return (\r\n \r\n {shouldErrorBeShown() && {labels[\"Invalid Dates Error\"]} }\r\n
\r\n );\r\n}\r\n\r\nexport default InvalidDates;\r\n","import React from 'react';\r\n\r\nconst ChildMessage = ({\r\n labels,\r\n showInfants,\r\n childCount\r\n}) => {\r\n return (\r\n \r\n {!showInfants && childCount > 0 &&\r\n
\r\n Have infants? Call one of our travel experts to book your holiday: 01293 762 410\r\n
\r\n }\r\n
\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default SubmitButton;\r\n","import React from 'react';\r\n\r\nconst RoomsList = ({\r\n handleOccupancy,\r\n\r\n occupancy,\r\n ChildAges,\r\n labels,\r\n showInfants,\r\n childRange,\r\n isFullWidth\r\n}) => {\r\n return (\r\n \r\n {occupancy.map((country, index) => (\r\n
\r\n
\r\n {showInfants &&\r\n [\r\n
\r\n
\r\n
{labels.Adults}
\r\n
\r\n
\r\n
\r\n
\r\n ,
\r\n
\r\n
{labels.Children}
\r\n
\r\n
\r\n
\r\n
\r\n ,
\r\n
\r\n
{labels.Infants}
\r\n
\r\n
\r\n
\r\n
\r\n ]\r\n }\r\n {!showInfants &&\r\n [\r\n
\r\n
\r\n
{labels.Adults}
\r\n
\r\n
\r\n
\r\n
\r\n ,
\r\n
\r\n
{labels.Children}
\r\n
\r\n
\r\n
\r\n
\r\n ]\r\n }\r\n
\r\n {ChildAges[index].ages.map((child, cIndex) => (\r\n
\r\n \r\n Child {cIndex + 1} age\r\n \r\n \r\n {childRange.map((age, ageIndex) => (\r\n {age} \r\n ))}\r\n \r\n
\r\n ))}\r\n
\r\n
\r\n ))}\r\n
\r\n
\r\n handleRoomSizeChange(event)} value={rooms}>\r\n {options}\r\n \r\n
\r\n {!validOccupancy &&\r\n
\r\n {labels[\"Max number of PAX error\"]} \r\n
\r\n }\r\n {!validMaxNumberOfInfants &&\r\n
\r\n {labels[\"Max number of Infants error\"]} \r\n
\r\n }\r\n
\r\n
\r\n );\r\n}\r\n\r\nexport default Airports;\r\n","import React from 'react';\r\n\r\nconst SelfTravel = ({\r\n handleSelfTravel,\r\n\r\n selfTravel,\r\n isFullWidth,\r\n componentIdentifier\r\n}) => {\r\n let checkboxClass = isFullWidth ? \"form-control-static form-ui-checkbox\" : \"form-ui-checkbox\";\r\n return (\r\n \r\n Hotel Only \r\n
\r\n );\r\n}\r\n\r\nexport default SelfTravel;","import React from 'react';\r\nimport SelectBox from '../../../Atoms/SelectBox';\r\n\r\nconst Duration = ({\r\n handleDurationChange,\r\n\r\n availableDurations,\r\n duration,\r\n componentIdentifier\r\n}) => {\r\n return (\r\n \r\n
\r\n );\r\n}\r\n\r\nexport default Duration;\r\n","import moment from 'moment';\r\nimport React, { Component } from 'react';\r\nimport ShowOtherDates from './show-other-dates';\r\nimport { tabletBreakpoint } from '../../../../../constants/breakpoints';\r\n\r\nexport default class Calendar extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.dateFormat = \"DD-MM-YYYY\";\r\n\r\n this.state = {\r\n singleDatePicker: null,\r\n singleDatePickerLoaded: false,\r\n textDate: '',\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n // if user has searched then load calendar immediately\r\n if (this.props.startDate !== null) {\r\n this.setState({\r\n pageFirstLoad: true,\r\n }, () => {\r\n this.toggleCalender();\r\n });\r\n }\r\n }\r\n\r\n toggleCalender = async () => {\r\n const { SingleDatePicker } = await import(/* webpackChunkName: \"react-dates\" */ 'react-dates');\r\n\r\n if (SingleDatePicker) {\r\n this.setState({ singleDatePicker: SingleDatePicker });\r\n }\r\n\r\n if (this.props.isMobile && !this.state.pageFirstLoad) {\r\n this.props.handleCalendarToggle(true);\r\n } else if (this.props.isMobile && this.state.pageFirstLoad) {\r\n this.setState({ pageFirstLoad: false });\r\n }\r\n }\r\n\r\n componentDidUpdate() {\r\n if (this.state.singleDatePicker && !this.state.singleDatePickerLoaded) {\r\n\r\n if (this.props.startDate === null) {\r\n // display calendar when user clicks on fake datepicker.\r\n const focused = {\r\n focused: true,\r\n }\r\n this.props.onFocusChange(focused);\r\n }\r\n\r\n this.setState({ singleDatePickerLoaded: true });\r\n }\r\n }\r\n\r\n handleTextDateInput = (e) => {\r\n const { target } = e;\r\n this.setState({ textDate: target.value })\r\n if (target.value === '') return;\r\n const inputDate = moment(target.value, this.dateFormat);\r\n // more date validation\r\n const monthsFromToday = moment().add(this.props.maxCalendarMonths, 'months');\r\n const today = moment();\r\n // Using HTML5 Validation API for simple validation (using pattern attribute)\r\n if (inputDate && (today.isAfter(inputDate) || inputDate.isAfter(monthsFromToday))) {\r\n target.setCustomValidity('invalid value');\r\n return;\r\n } else {\r\n target.setCustomValidity(\"\");\r\n };\r\n if (!target.checkValidity()) return;\r\n this.props.handleDate(inputDate, false);\r\n }\r\n\r\n handleCalendarSelect = (date) => {\r\n this.props.handleDate(date);\r\n this.setState({\r\n textDate: date.format(this.dateFormat),\r\n })\r\n }\r\n\r\n // Function for duplicating the 'week header' in the calendar\r\n // This is needed as it's normally fixed, but it's needed on each\r\n // month\r\n copyWeekHeaders = () => {\r\n if (!this.props.isMobile) return;\r\n const weekHeaders = document.querySelectorAll(\".DayPicker__week-header\");\r\n if (weekHeaders.length !== 1) return;\r\n const monthElements = document.querySelectorAll('.CalendarMonth__caption');\r\n // Hide original header\r\n weekHeaders[0].style.display = 'none';\r\n monthElements.forEach((month) => {\r\n const weekHeaderClone = weekHeaders[0].cloneNode(true);\r\n weekHeaderClone.classList.add('week-header-alt')\r\n // override for style added by the library\r\n weekHeaderClone.style.marginLeft = '0';\r\n weekHeaderClone.style.display = 'flex';\r\n month.appendChild(weekHeaderClone);\r\n })\r\n }\r\n\r\n render() {\r\n const { singleDatePicker: SingleDatePicker, textDate } = this.state;\r\n\r\n const {\r\n handleCalendarToggle,\r\n onFocusChange,\r\n initialVisibleMonth,\r\n fakedateStartText,\r\n startDate,\r\n focused,\r\n isMobile,\r\n isDayBlocked,\r\n datepickerClass,\r\n maxCalendarMonths,\r\n handleShowOtherDates,\r\n showOtherDates,\r\n componentIdentifier,\r\n showOtherDatesLabel\r\n } = this.props;\r\n\r\n const formattedDate = moment(startDate).format(this.dateFormat);\r\n // Show checkbox always on desktop, but only if the calendar is active on mobile\r\n const isUnderTablet = window.innerWidth < tabletBreakpoint;\r\n const shouldShowCheckbox = (!isUnderTablet || (isUnderTablet && this.props.isCalendarActive));\r\n\r\n this.copyWeekHeaders();\r\n\r\n return (\r\n \r\n {isMobile &&\r\n
\r\n {SingleDatePicker\r\n ?\r\n
handleCalendarToggle(true)} className=\"FakeDateInput\">\r\n
\r\n
{startDate ? formattedDate : fakedateStartText}
\r\n
\r\n :\r\n
\r\n
\r\n
{startDate ? formattedDate: fakedateStartText}
\r\n
\r\n }\r\n
\r\n }\r\n
\r\n {isMobile &&\r\n
handleCalendarToggle(false)}>X
\r\n }\r\n {SingleDatePicker\r\n ?\r\n
\r\n {isMobile &&\r\n this.handleCalendarSelect(startDate)}\r\n onFocusChange={focused => onFocusChange(focused)}\r\n focused={focused}\r\n hideKeyboardShortcutsPanel={true}\r\n orientation={isMobile ? 'vertical' : 'horizontal'}\r\n displayFormat={this.dateFormat}\r\n showDefaultInputIcon={true}\r\n numberOfMonths={isMobile ? maxCalendarMonths : 1}\r\n isDayBlocked={isDayBlocked}\r\n initialVisibleMonth={initialVisibleMonth}\r\n renderCalendarInfo={() =>
\r\n :\r\n
\r\n
\r\n
\r\n
\r\n {startDate !== null ? startDate.format(this.dateFormat) : 'Date'}\r\n
\r\n
\r\n
\r\n }\r\n
\r\n
\r\n const fullWidthClass = isFullWidth ? 'SearchBar_recentSearch-full' : '';\r\n const recentSearchLabel = recentSearchText.replace(\"{0}\", recentSearchCount);\r\n return (\r\n \r\n \r\n \r\n {recentSearchLabel}\r\n \r\n
\r\n \r\n )\r\n}\r\n\r\nexport default RecentSearchButton","import React from 'react';\r\n\r\nconst SubmitButton = ({\r\n labels,\r\n isSubmitDisabled,\r\n isFullWidth\r\n}) => {\r\n if (isFullWidth) {\r\n return (\r\n \r\n
\r\n {labels.Search} \r\n
\r\n
\r\n
\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default SubmitButton;\r\n","import React from 'react';\r\nimport DepartureAirports from '../components/DepartureAirports';\r\n\r\nconst Airports = ({\r\n handleAirportChange,\r\n departureLabel,\r\n departurePlaceholderLabel,\r\n airports,\r\n selfTravel,\r\n disabled,\r\n airportDisplayName,\r\n componentIdentifier,\r\n closeMainModal,\r\n}) => {\r\n return (\r\n \r\n {departureLabel} \r\n
\r\n );\r\n}\r\n\r\nexport default Airports;\r\n","export const QUERY_PARAMS = {\r\n START_DATE: 'startDate',\r\n END_DATE: 'endDate',\r\n GEO_NAME: 'geoLocationName',\r\n SHOW_OTHER_DATES: 'showOtherDates',\r\n DURATION: 'duration',\r\n SELF_TRAVEL: 'selftravel',\r\n DIRECT: 'direct',\r\n DEPARTURE_AIRPORT: 'departureAirport',\r\n ARRIVAL_AIRPORT: 'arrivalAirport',\r\n ROOMS: 'rooms',\r\n DATE: 'date',\r\n};\r\n\r\nexport const REQUIRED_SEARCH_PARAMS = [\r\n QUERY_PARAMS.DATE,\r\n QUERY_PARAMS.DURATION,\r\n QUERY_PARAMS.ROOMS,\r\n QUERY_PARAMS.SHOW_OTHER_DATES,\r\n QUERY_PARAMS.SELF_TRAVEL,\r\n QUERY_PARAMS.DIRECT,\r\n QUERY_PARAMS.GEO_NAME,\r\n];\r\n","import moment from 'moment';\r\nimport React, { Component } from 'react';\r\nimport ShowOtherDates from './show-other-dates';\r\nimport { tabletBreakpoint } from '../../../../../constants/breakpoints';\r\nimport { DISPLAY_FORMAT } from '../../../../../constants/dates';\r\nimport TextDatePicker from '../components/TextDatePicker';\r\nimport { QUERY_PARAMS } from '../query';\r\n\r\nexport default class Calendar extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.dateFormat = \"DD-MM-YYYY\";\r\n\r\n this.possibleDateDelimiters = ['-', '/', '.'];\r\n\r\n this.state = {\r\n dateRangePicker: null,\r\n dateRangePickerLoaded: false,\r\n textDate: '',\r\n startDate: null,\r\n endDate: null,\r\n focusedInput: null,\r\n pickerIsOpen: false,\r\n tempDates: {\r\n startDate: null,\r\n endDate: null,\r\n },\r\n textDates: {\r\n startDate: '',\r\n endDate: '',\r\n }\r\n };\r\n\r\n this.flexibilityCheckboxId = 'ShowOtherDates_checkbox';\r\n this.flexibilityCheckboxLabelId = 'ShowOtherDates_checkboxLabel';\r\n this.clearButtonId = 'ShowOtherDates_button-clear';\r\n this.applyButtonId = 'ShowOtherDates_button-apply';\r\n\r\n this.footerElementIDs = [\r\n this.applyButtonId,\r\n this.clearButtonId,\r\n this.flexibilityCheckboxId,\r\n this.flexibilityCheckboxLabelId\r\n ];\r\n\r\n this.datepickerRef = null;\r\n this.pickerFooterRef = null;\r\n }\r\n\r\n componentDidMount() {\r\n // if user has searched then load calendar immediately\r\n if (this.props.startDate !== null) {\r\n this.setState({\r\n pageFirstLoad: true,\r\n }, () => {\r\n this.toggleCalendar();\r\n });\r\n };\r\n }\r\n\r\n componentDidMount = async () => {\r\n document.addEventListener(\"click\", this.hasClickedOutside, { passive: true });\r\n // If we have dates provided (from a current search) populate here\r\n const { startDate, endDate } = this.props;\r\n if (startDate && endDate) {\r\n // If we have dates provided, we need to load the calendar in to populate\r\n await this.loadCalendar();\r\n this.handleCalendarSelect(startDate, endDate);\r\n this.setState({\r\n startDate,\r\n endDate\r\n });\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n document.removeEventListener(\"click\", this.hasClickedOutside);\r\n }\r\n\r\n componentDidUpdate() {\r\n if (this.state.dateRangePicker && !this.state.dateRangePickerLoaded) {\r\n\r\n if (this.props.startDate === null || this.props.endDate === null) {\r\n // display calendar when user clicks on fake datepicker.\r\n this.props.onFocusChange('startDate');\r\n }\r\n\r\n this.setState({ dateRangePickerLoaded: true });\r\n }\r\n }\r\n\r\n hasClickedOutside = (e) => {\r\n const { id } = e.target;\r\n // Dynamic datepicker is taken out of the DOM on close, so we need to check the target directly\r\n const hasClickedOnFooterElement = this.footerElementIDs.includes(id);\r\n if ((this.datepickerRef && !this.datepickerRef.contains(e.target)) && !hasClickedOnFooterElement) {\r\n // Clicked outside datepicker and datepicker footer elements\r\n this.closeRangePicker(false);\r\n }\r\n }\r\n\r\n setFooterRef = (el) => {\r\n this.pickerFooterRef = el;\r\n }\r\n\r\n closeRangePicker = (saveChanges = true) => {\r\n this.setState({\r\n pickerIsOpen: false,\r\n });\r\n\r\n // If we are aren't saving the current values, go back to\r\n // what we had previously selected, otherwise update\r\n const {\r\n startDate,\r\n endDate,\r\n } = !saveChanges ? this.state : this.state.prevDates;\r\n\r\n this.resetDatesTo(startDate, endDate);\r\n\r\n if (this.props.isMobile) {\r\n this.props.handleCalendarToggle(false);\r\n }\r\n }\r\n\r\n clearRangePicker = (e) => {\r\n if (e) e.preventDefault();\r\n this.setState({\r\n tempDates: {\r\n startDate: null,\r\n endDate: null,\r\n },\r\n duration: 0,\r\n });\r\n this.resetDatesTo(null, null);\r\n this.props.onFocusChange('startDate');\r\n }\r\n\r\n resetDatesTo = (startDate, endDate) => {\r\n this.setState({\r\n startDate,\r\n endDate,\r\n tempDates: {\r\n startDate,\r\n endDate,\r\n },\r\n textDates: {\r\n startDate: {\r\n value: this.formatDate(startDate),\r\n isValid: !!startDate,\r\n },\r\n endDate: {\r\n value: this.formatDate(endDate),\r\n isValid: !!endDate,\r\n }\r\n }\r\n });\r\n }\r\n\r\n loadCalendar = async () => {\r\n if (this.state.dateRangePicker) return;\r\n\r\n const { DateRangePicker } = await import(/* webpackChunkName: \"react-dates\" */ 'react-dates');\r\n\r\n if (DateRangePicker) {\r\n this.setState({ dateRangePicker: DateRangePicker });\r\n }\r\n }\r\n\r\n toggleCalendar = async () => {\r\n this.props.scrollToPickers();\r\n\r\n this.loadCalendar();\r\n\r\n this.props.onFocusChange(QUERY_PARAMS.START_DATE);\r\n\r\n if (this.props.isMobile && !this.state.pageFirstLoad) {\r\n this.props.handleCalendarToggle(true);\r\n } else if (this.props.isMobile && this.state.pageFirstLoad) {\r\n this.setState({ pageFirstLoad: false });\r\n }\r\n\r\n this.setState({\r\n pickerIsOpen: !this.state.pickerIsOpen,\r\n })\r\n }\r\n\r\n handleCalendarSelect = (startDate, endDate) => { \r\n this.setState({\r\n tempDates: {\r\n startDate,\r\n endDate,\r\n },\r\n textDates: {\r\n startDate: {\r\n value: this.formatDate(startDate, DISPLAY_FORMAT),\r\n isValid: true,\r\n },\r\n endDate: {\r\n value: this.formatDate(endDate, DISPLAY_FORMAT),\r\n isValid: true,\r\n }\r\n }\r\n })\r\n };\r\n\r\n handleApply = (e) => {\r\n if (e) e.preventDefault();\r\n const { tempDates } = this.state;\r\n const { startDate, endDate } = tempDates;\r\n this.props.handleDate(startDate, endDate, false);\r\n this.props.onFocusChange(null);\r\n this.props.handleCalendarToggle(false);\r\n this.setState({\r\n startDate,\r\n endDate,\r\n });\r\n };\r\n\r\n closePicker = (e) => {\r\n if (e) e.preventDefault();\r\n this.props.handleCalendarToggle(false)\r\n }\r\n\r\n closeAll = (e) => {\r\n if (e) e.preventDefault();\r\n this.closePicker();\r\n this.props.closeMainModal();\r\n }\r\n\r\n // Function for duplicating the 'week header' in the calendar\r\n // This is needed as it's normally fixed, but it's needed on each\r\n // month\r\n copyWeekHeaders = () => {\r\n if (!this.props.isMobile) return;\r\n const weekHeaders = document.querySelectorAll(\".DayPicker__week-header\");\r\n if (weekHeaders.length !== 1) return;\r\n const monthElements = document.querySelectorAll('.CalendarMonth__caption');\r\n // Hide original header\r\n weekHeaders[0].style.display = 'none';\r\n monthElements.forEach((month) => {\r\n const weekHeaderClone = weekHeaders[0].cloneNode(true);\r\n weekHeaderClone.classList.add('week-header-alt')\r\n // override for style added by the library\r\n weekHeaderClone.style.marginLeft = '0';\r\n weekHeaderClone.style.display = 'flex';\r\n month.appendChild(weekHeaderClone);\r\n })\r\n }\r\n\r\n openPicker = () => {\r\n this.setState({\r\n pickerIsOpen: true,\r\n })\r\n }\r\n\r\n inputClick = (e) => {\r\n const { name } = e.target;\r\n this.props.onFocusChange(name);\r\n }\r\n\r\n formatDate = (date, format = DISPLAY_FORMAT) => {\r\n const momentDate = moment(date);\r\n if (!momentDate.isValid()) return '';\r\n return momentDate.format(format);\r\n }\r\n\r\n handleTextInput = (e) => {\r\n const { name, value } = e.target;\r\n const requiredLength = 10;\r\n let isValid = false;\r\n if (value.length === requiredLength) {\r\n const delimiter = this.possibleDateDelimiters.find((delimiter) => {\r\n return new RegExp(`[${delimiter}]`).test(value)\r\n })\r\n const date = moment(\r\n e.target.value,\r\n `DD${delimiter}MM${delimiter}YYYY`\r\n );\r\n isValid = date.isValid();\r\n const isBlocked = this.props.isDayBlocked(date);\r\n if (isValid && !isBlocked) {\r\n this.setState({\r\n tempDates: {\r\n ...this.state.tempDates,\r\n [name]: date,\r\n },\r\n })\r\n }\r\n }\r\n\r\n this.setState({\r\n textDates: {\r\n ...this.state.textDates,\r\n [name]: {\r\n value,\r\n isValid,\r\n },\r\n }\r\n })\r\n }\r\n\r\n render() {\r\n const { dateRangePicker: DateRangePicker } = this.state;\r\n\r\n const {\r\n handleCalendarToggle,\r\n onFocusChange,\r\n initialVisibleMonth,\r\n fakedateStartText,\r\n focused,\r\n isMobile,\r\n isDayBlocked,\r\n datepickerClass,\r\n maxCalendarMonths,\r\n handleShowOtherDates,\r\n showOtherDates,\r\n componentIdentifier,\r\n showOtherDatesLabel,\r\n isCalendarActive,\r\n clearLabel,\r\n applyLabel,\r\n dateRangeLabel,\r\n invalidDatesLabel,\r\n startDatePlaceholder,\r\n endDatePlaceholder,\r\n checkInDateLabel,\r\n checkOutDateLabel,\r\n title,\r\n placeholder\r\n } = this.props;\r\n\r\n const { startDate, endDate, textDates } = this.state;\r\n\r\n const formattedStartDate = this.formatDate(startDate, DISPLAY_FORMAT);\r\n const formattedEndDate = this.formatDate(endDate, DISPLAY_FORMAT);\r\n // Show checkbox always on desktop, but only if the calendar is active on mobile\r\n const isUnderTablet = window.innerWidth < tabletBreakpoint;\r\n const shouldShowCheckbox = (!isUnderTablet || (isUnderTablet && isCalendarActive));\r\n\r\n this.copyWeekHeaders();\r\n\r\n const displayDate = (startDate && endDate) ? `${formattedStartDate} - ${formattedEndDate}` : placeholder;\r\n\r\n const hasDefinedTextDates = textDates.startDate.value && textDates.endDate.value;\r\n\r\n return (\r\n this.datepickerRef = el}>\r\n {isMobile &&\r\n
\r\n
{title} \r\n {isCalendarActive &&\r\n
\r\n
this.closePicker()}>\r\n
\r\n
this.closeAll()}>\r\n
\r\n
\r\n }\r\n {DateRangePicker\r\n ?\r\n
handleCalendarToggle(true)}>\r\n
{displayDate}
\r\n
\r\n :\r\n
\r\n }\r\n
\r\n }\r\n
\r\n
{title} \r\n {this.props.isMobile &&
\r\n }\r\n {DateRangePicker\r\n ?
\r\n
\r\n
this.handleCalendarSelect(startDate, endDate)}\r\n focusedInput={focused}\r\n onFocusChange={focused => onFocusChange(focused)}\r\n keepOpenOnDateSelect\r\n numberOfMonths={isMobile ? maxCalendarMonths : 2}\r\n orientation={isMobile ? 'vertical' : 'horizontal'}\r\n hideKeyboardShortcutsPanel\r\n displayFormat={DISPLAY_FORMAT}\r\n isDayBlocked={isDayBlocked}\r\n initialVisibleMonth={initialVisibleMonth}\r\n renderCalendarInfo={() =>\r\n \r\n
\r\n }\r\n />\r\n \r\n
handleCalendarToggle(true)}\r\n readOnly\r\n />\r\n \r\n :
\r\n {displayDate}\r\n
\r\n }\r\n
\r\n