\n
\n );\n};\n\nPerson.defaultProps = {\n id: null,\n firstName: null,\n middleName: null,\n lastName: null,\n birthday: null,\n confidencePercentage: null,\n showConfidencePercentage: false,\n};\n\nPerson.propTypes = {\n id: PropTypes.number,\n confidencePercentage: PropTypes.string,\n showConfidencePercentage: PropTypes.bool,\n onSelect: PropTypes.func.isRequired,\n firstName: PropTypes.string,\n middleName: PropTypes.string,\n lastName: PropTypes.string,\n birthday: PropTypes.string,\n emailAddresses: PropTypes.arrayOf(\n PropTypes.shape({\n email: PropTypes.string,\n alreadyExists: PropTypes.bool,\n emailType: PropTypes.string,\n }),\n ).isRequired,\n phoneNumbers: PropTypes.arrayOf(\n PropTypes.shape({ number: PropTypes.string, numberType: PropTypes.string }),\n ).isRequired,\n addresses: PropTypes.arrayOf(\n PropTypes.shape({\n line1: PropTypes.string,\n zipCode: PropTypes.string,\n city: PropTypes.string,\n countryCode: PropTypes.string,\n country: PropTypes.string,\n }),\n ).isRequired,\n};\n\nclass MatchTraveler extends React.Component {\n constructor(props) {\n super(props);\n\n const people = [];\n if (props.traveler.person) {\n people.push(props.traveler.person);\n }\n\n this.state = { searching: false, people, decision: null };\n }\n\n componentDidMount() {\n if (this.state.people.length === 0) {\n return this.searchPeople('', true);\n }\n return Promise.resolve();\n }\n\n onDecision = () => {\n this.props.onDecision({\n ...this.state.decision,\n id: this.props.id,\n context: 'refresh_booking',\n });\n };\n\n searchPeople = (query, force) => {\n if (query.length < 3 && !force) return Promise.resolve();\n\n this.setState({ searching: true });\n\n const attributes = this.props.traveler.personAttributes;\n const params = {\n q: query,\n first_name: attributes.firstName,\n middle_name: attributes.middleName,\n last_name: attributes.lastName,\n birthday: attributes.birthday,\n salutation: attributes.salutation,\n 'emails[]': attributes.emailAddresses.map(address => address.email),\n };\n return httpClient.get(routes.admin.people.list(params)).then(({ data }) => {\n this.setState({ people: data.people, searching: false });\n });\n };\n\n decideForNewCustomer = () =>\n this.setState({\n decision: {\n action: 'create',\n attributes: this.props.traveler.personAttributes,\n },\n });\n\n decideForExistingCustomer = id =>\n this.setState({\n decision: {\n action: 'link',\n person_id: id,\n },\n });\n\n render() {\n const { personAttributes } = this.props.traveler;\n\n return (\n \n
\n \n props.onSelect(event.target.value)}\n />\n
\n \n
\n \n
\n \n
\n \n {props.firstName} {props.middleName} {props.lastName}\n
\n {props.showConfidencePercentage && (\n \n = 90,\n 'match-traveler__match-confidence--neutral':\n props.confidencePercentage < 90 && props.confidencePercentage >= 50,\n 'match-traveler__match-confidence--bad': props.confidencePercentage < 50,\n })}\n >\n {props.confidencePercentage}%\n \n
\n )}\n \n
\n {props.birthday}
\n {emails}
\n {phoneNumbers}
\n \n
\n {address.line1}
\n \n {address.zipCode} {address.city}\n
\n {address.country}
\n \n
\n );\n }\n}\n\nMatchTraveler.propTypes = {\n id: PropTypes.string.isRequired,\n onDecision: PropTypes.func.isRequired,\n disabled: PropTypes.bool.isRequired,\n traveler: PropTypes.shape({\n person: PropTypes.shape({\n firstName: PropTypes.string,\n middleName: PropTypes.string,\n lastName: PropTypes.string,\n birthday: PropTypes.string,\n salutation: PropTypes.string,\n emailAddresses: PropTypes.arrayOf(\n PropTypes.shape({\n email: PropTypes.string,\n alreadyExists: PropTypes.bool,\n emailType: PropTypes.string,\n }),\n ).isRequired,\n phoneNumbers: PropTypes.arrayOf(\n PropTypes.shape({ number: PropTypes.string, numberType: PropTypes.string }),\n ).isRequired,\n addresses: PropTypes.arrayOf(\n PropTypes.shape({\n line1: PropTypes.string,\n zipCode: PropTypes.string,\n city: PropTypes.string,\n countryCode: PropTypes.string,\n country: PropTypes.string,\n }),\n ).isRequired,\n }),\n personAttributes: PropTypes.shape({\n firstName: PropTypes.string,\n middleName: PropTypes.string,\n lastName: PropTypes.string,\n birthday: PropTypes.string,\n salutation: PropTypes.string,\n emailAddresses: PropTypes.arrayOf(\n PropTypes.shape({\n email: PropTypes.string,\n alreadyExists: PropTypes.bool,\n emailType: PropTypes.string,\n }),\n ).isRequired,\n phoneNumbers: PropTypes.arrayOf(\n PropTypes.shape({ number: PropTypes.string, numberType: PropTypes.string }),\n ).isRequired,\n addresses: PropTypes.arrayOf(\n PropTypes.shape({\n line1: PropTypes.string,\n zipCode: PropTypes.string,\n city: PropTypes.string,\n countryCode: PropTypes.string,\n country: PropTypes.string,\n }),\n ).isRequired,\n }).isRequired,\n }).isRequired,\n};\n\nexport default hot(module)(MatchTraveler);\n","import React, { Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport { hot } from 'react-hot-loader';\nimport Icon from '@wtag/rcl-icon';\nimport { TYPE_SEAT } from 'sharedWebpack/helpers/itemTypes';\nimport journeyElementTypeIcons from '../helpers/journeyElementTypeIcons';\nimport PriceLabel from './PriceLabel';\nimport { OLD_STATE } from '../IssueBooking/constants';\nimport { ValuesShape } from './Shapes/index';\n\nconst AncillaryPriceChangesContent = ({ values, state, style }) => {\n const { journeyElementType, ancillariesTitle } = values;\n const showOldPrice = state === OLD_STATE;\n const valuesByState = values[state];\n const grossPrice = showOldPrice ? valuesByState.grossPrice : valuesByState[style].grossPrice;\n const isSeatType = journeyElementType === TYPE_SEAT;\n const iconLabel = isSeatType\n ? I18n.t('admin.components.orders.overview.seat', {\n number: ancillariesTitle,\n })\n : ancillariesTitle;\n\n return (\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n\n \n {this.state.searching && (\n
\n \n
\n )}\n {!this.state.searching &&\n this.state.people.map(person => (\n \n
\n ))}\n \n
\n \n
\n \n
\n ))}\n \n {trip.airports.map((airport, airportIndex) => {\n const nextAirport = trip.airports[airportIndex + 1];\n return (\n \n {nextAirport ? (\n \n \n ) : null}\n \n );\n })}\n
\n \n
\n \n {airport.code}\n
\n \n
\n \n {nextAirport.code}\n
\n \n {I18n.t('components.ibe.flight_service_selection.service_header_text', {\n originPlaceName: currentOrigin.placeName,\n originCountryName: currentOrigin.countryName,\n destinationPlaceName: currentDestination.placeName,\n destinationCountryName: currentDestination.countryName,\n })}\n
\n {fareExpired && isJourneyElementAncillaries && (\n \n
\n )}\n \n
\n \n \n {journeyDetail}\n
\n \n {fareExpired\n ? I18n.t('admin.order_items.issue_ticket.can_not_issue.fare_expired.old')\n : I18n.t('admin.components.refresh_booking.before')}\n
\n \n {priceChangesContent(OLD_STATE)}\n {!fareExpired && (\n
\n \n \n this.decide(true)}\n disabled={disabled}\n size=\"small\"\n />\n
\n )}\n \n \n {journeyDetail}\n
\n \n {fareExpired\n ? I18n.t('admin.order_items.issue_ticket.can_not_issue.fare_expired.new')\n : I18n.t('admin.components.refresh_booking.after')}\n
\n \n {priceChangesContent(NEW_STATE)}\n {!fareExpired && (\n
\n \n \n \n this.decide(false)}\n />\n
\n )}\n \n
\n \n
\n);\n\nPriceLabel.propTypes = {\n label: PropTypes.string.isRequired,\n currency: PropTypes.string.isRequired,\n value: PropTypes.number.isRequired,\n};\n\nexport default hot(module)(PriceLabel);\n","import MatchTraveler from './MatchTraveler';\n\nimport './styles.scss';\n\nexport default MatchTraveler;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { hot } from 'react-hot-loader';\n\nimport routes from 'agentRoutes';\nimport httpClient from 'agentHTTPClient';\n\nimport IconButton from '@wtag/rcl-icon-button';\nimport Icon from '@wtag/rcl-icon';\nimport Button from '@wtag/rcl-button';\nimport { Spinner } from '@wtag/react-comp-lib';\nimport classNames from 'classnames';\nimport Modal from 'sharedWebpack/Modal';\nimport MatchTraveler from '../MatchTraveler';\nimport ConfirmAttributeChanges from './ConfirmAttributeChanges';\n\nconst initialState = {\n processing: false,\n isModalVisible: false,\n refreshInProgress: false,\n confirmableChanges: [],\n decisions: [],\n displayedValues: {},\n journeyElementId: '',\n journeyElementType: '',\n trips: [],\n};\n\nclass RefreshBooking extends React.Component {\n constructor(props) {\n super(props);\n this.state = { ...initialState };\n this.state.isModalVisible = !this.props.useButtonToStart;\n\n this.callAPI = this.callAPI.bind(this);\n this.fetchJourneyElement = this.fetchJourneyElement.bind(this);\n }\n\n componentDidMount() {\n if (!this.props.useButtonToStart) {\n this.refreshBooking();\n }\n\n if (this.props.journeyElementId) {\n this.fetchJourneyElement();\n }\n }\n\n onDecision = decision => {\n const decisions = this.state.decisions;\n decisions.push(decision);\n\n if (decisions.length === this.state.confirmableChanges.length) {\n this.callAPI(decisions);\n } else {\n this.setState({\n decisions,\n displayedValues: this.state.confirmableChanges[decisions.length],\n });\n }\n };\n\n callAPI(decisions) {\n this.setState({ processing: true, refreshInProgress: true });\n const params = { id: this.props.id };\n return httpClient\n .put(routes.admin.bookings.refresh(params), { decisions })\n .then(() => {\n if (this.props.redirectTo) {\n window.location.href = this.props.redirectTo;\n } else {\n window.location.reload(false);\n }\n this.setState({ refreshInProgress: false });\n })\n .catch(error => {\n const { status, data } = error.response;\n if (status === 409) {\n this.setState({\n refreshInProgress: false,\n decisions: [],\n confirmableChanges: data,\n displayedValues: data[0],\n processing: false,\n isModalVisible: true,\n });\n } else {\n this.setState({ processing: false, refreshInProgress: false });\n throw error;\n }\n });\n }\n\n fetchJourneyElement = async () => {\n const { data } = await httpClient.get(\n routes.api.fetchJourneyElement({\n type: this.props.journeyElementType,\n id: this.props.journeyElementId,\n }),\n );\n\n if (data && Array.isArray(data.trips)) {\n this.setState({ trips: data.trips });\n }\n };\n\n reset = () => {\n this.setState(initialState);\n };\n\n refreshBooking = () => {\n this.callAPI();\n };\n\n render() {\n const buttonProps = {\n onClick: this.refreshBooking,\n disabled: this.props.disabled || this.state.processing || this.state.isModalVisible,\n };\n\n let button = (\n {label}
\n \n
\n \n \n
\n );\n\n if (this.props.textButton) {\n button = (\n \n );\n }\n\n if (!this.state.confirmableChanges.length) return button;\n\n let decisionComponent = null;\n\n switch (this.state.displayedValues.type) {\n case 'confirm_attribute_changes':\n decisionComponent = (\n \n
\n \n \n
\n );\n\n return (\n \n {I18n.t('admin.components.refresh_booking.title')}\n
\n {this.state.decisions.length !== this.state.confirmableChanges.length && (\n \n {I18n.t('admin.components.confirm_changes.step', {\n current: this.state.decisions.length + 1,\n total: this.state.confirmableChanges.length,\n })}\n
\n )}\n \n \n \n \n
\n );\n }\n return node;\n};\n\nconst Heading = ({ buttonUrl, buttonText, currentNavigation, rightNode, leftNode, border }) => (\n \n
}\n
\n);\n\nHeading.defaultProps = {\n buttonUrl: '',\n buttonText: '',\n leftNode: null,\n rightNode: null,\n border: true,\n};\n\nHeading.propTypes = {\n currentNavigation: PropTypes.string.isRequired,\n buttonUrl: PropTypes.string,\n buttonText: PropTypes.string,\n leftNode: PropTypes.node,\n rightNode: PropTypes.node,\n border: PropTypes.bool,\n};\n\nexport default Heading;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { hot } from 'react-hot-loader';\nimport 'react-responsive-carousel/lib/styles/carousel.min.css';\nimport { Carousel } from 'react-responsive-carousel';\n\nimport slider1 from '../../../../../apps/public/app/assets/images/public/landing-sliders/slider1.jpg';\nimport slider2 from '../../../../../apps/public/app/assets/images/public/landing-sliders/slider2.jpg';\nimport slider3 from '../../../../../apps/public/app/assets/images/public/landing-sliders/slider3.jpg';\nimport slider4 from '../../../../../apps/public/app/assets/images/public/landing-sliders/slider4.jpg';\n\nimport './styles.scss';\n\nconst ImageSlider = ({ images }) => {\n const settings = {\n infiniteLoop: true,\n stopOnHover: false,\n autoPlay: true,\n transitionTime: 1000,\n interval: 5000,\n emulateTouch: true,\n showThumbs: false,\n showArrows: false,\n showStatus: false,\n };\n\n const fallbackImageArray = [];\n\n fallbackImageArray.push(\n { id: 1, imageUrl: slider1 },\n { id: 2, imageUrl: slider2 },\n { id: 3, imageUrl: slider3 },\n { id: 4, imageUrl: slider4 },\n );\n\n return (\n \n
\n {border && \n {leftNode || I18n.t(`public.application.account_navigation.${currentNavigation}`)}\n
\n {renderNode(buttonUrl, buttonText, rightNode)}
\n }\n
\n \n {images.length > 0\n ? images.map(image => (\n \n
\n );\n};\n\nImageSlider.propTypes = {\n images: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.number,\n imageUrl: PropTypes.string,\n }),\n ).isRequired,\n};\n\nexport default hot(module)(ImageSlider);\n","import React, { Fragment } from 'react';\nimport { EmphasisTag } from '@wtag/react-comp-lib';\nimport Avatar from '@wtag/rcl-avatar';\nimport PropTypes from 'prop-types';\n\nexport const SingleTraveler = ({ traveler }) => {\n const { firstName, lastName, avatarUrl, name, type, email } = traveler;\n const travelersName = name || [firstName, lastName].filter(Boolean).join(' ');\n\n return (\n \n 
\n
\n ))\n : fallbackImageArray.map(image => (\n \n \n
\n ))}\n \n
\n );\n};\n\nconst TravelersList = ({ travelers, numberOfItemsToShow }) => (\n \n
\n \n
\n \n {travelersName}\n
\n {email}
\n \n {I18n.t('admin.components.orders.overview.show_less')}\n
\n \n {I18n.t('admin.components.orders.overview.show_travellers', {\n count: remainingTravellers,\n })}\n
\n \n \n \n {I18n.t('admin.components.orders.overview.amount_calculation.voucher_code')}\n \n {order.redemptionVouchers.map(voucher => (\n
\n }\n type=\"inverse\"\n >\n \n {voucher.code}\n \n
\n ))}\n \n {!fromApprovalRequest && (\n
\n \n \n \n \n \n \n
\n )}\n \n
\n \n
\n \n {I18n.t('admin.components.orders.left_panel.titles.booking_date')}\n
\n \n {order && order.bookingDate ? (\n
\n \n \n \n
\n \n
\n \n
\n \n {I18n.t('admin.components.orders.left_panel.titles.departure_date')}\n
\n \n {order && order.departureDate ? (\n
\n \n {I18n.t('public.components.orders.no_departure')}\n
\n )}\n \n \n \n
\n \n
\n \n
\n \n {I18n.t('admin.components.orders.left_panel.titles.arrival_date')}\n
\n \n {order && order.arrivalDate ? (\n
\n \n {I18n.t('public.components.orders.no_arrival')}\n
\n )}\n \n \n
\n )}\n \n \n
\n ))}\n {servicesAndCharges() > 0 && (\n \n \n setIsProductPopoverVisible(prevProductPopoverState => !prevProductPopoverState)\n }\n onOutsideClick={() => setIsProductPopoverVisible(false)}\n >\n {order.products.map(type => (\n
\n \n {I18n.t('admin.components.orders.tabs.overview')}\n
\n {order && order.products && (\n \n {showLoaders() ? (\n
\n \n {travellers && (\n
\n )}\n \n checkShowAll(!showAll)}\n >\n {showMoreText()}\n \n )}\n
\n )}\n \n {I18n.t('admin.components.orders.overview.trips', {\n count: travellers.length,\n })}\n
\n \n {showLoaders() ? (\n \n {fees.map(\n fee =>\n fee.visible && (\n \n
\n ),\n )}\n {paymentMethodSurcharges.map(paymentMethodSurcharge => (\n \n \n \n
\n ))}\n \n ))}\n {fees && (\n \n {I18n.t('admin.components.orders.overview.total_price')}\n
\n \n {order && orderAccounting && (\n
\n {itemsToShow() &&\n itemsToShow().map(item => (\n \n
\n {item.subItem &&\n item.subItems.map(subItem => (\n \n
\n \n
\n \n {findTitleForItem(item)}: {item.title}\n
\n \n
\n \n
\n \n
\n \n {' '}\n {I18n.t('admin.components.orders.overview.seat', {\n number: subItem.title,\n })}\n
\n \n
\n \n
\n \n
\n \n {fee.name}\n
\n \n
\n \n
\n \n
\n \n {paymentMethodSurcharge.title}\n
\n \n
\n \n
\n )}\n \n )}\n\n \n
\n \n
\n \n {I18n.t('admin.components.orders.overview.fees')}\n
\n \n
\n \n
\n\n {order && order.redemptionVouchers && order.redemptionVouchers.length > 0 && (\n \n
\n \n
\n \n {I18n.t('admin.components.orders.overview.tax')}\n
\n \n {order && orderAccounting && (\n
\n \n
\n )}\n\n \n
\n\n \n {I18n.t('admin.components.orders.overview.amount_calculation.subtotal')}\n
\n \n
\n \n
\n \n {I18n.t(\n 'admin.components.orders.overview.amount_calculation.voucher_applied',\n )}\n {redemptionVouchersContent()}\n
\n \n
\n \n
\n \n
\n \n {I18n.t('admin.components.orders.overview.amount_calculation.total_amount')}\n
\n \n {order &&
\n {travelPlanCard()}
\n \n );\n};\n\nOverviewTab.defaultProps = {\n isCartItemsLoading: true,\n cartItems: null,\n fromApprovalRequest: false,\n cartFees: [],\n layman: false,\n};\n\nOverviewTab.propTypes = {\n order: PropTypes.shape({\n id: PropTypes.number,\n currency: PropTypes.string,\n bookingDate: PropTypes.string,\n departureDate: PropTypes.string,\n arrivalDate: PropTypes.string,\n accounting: PropTypes.shape({\n totalAmount: PropTypes.string,\n taxes: PropTypes.string,\n servicesAmount: PropTypes.string,\n }),\n items: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.string,\n currency: PropTypes.string,\n title: PropTypes.string,\n grossAmount: PropTypes.string,\n }),\n ),\n travellers: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.string,\n name: PropTypes.string,\n firstName: PropTypes.string,\n lastName: PropTypes.string,\n avatarUrl: PropTypes.string,\n type: PropTypes.string,\n }),\n ),\n products: PropTypes.arrayOf(PropTypes.string).isRequired,\n paymentMethodSurcharges: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.number,\n title: PropTypes.string,\n amount: PropTypes.string,\n currency: PropTypes.string,\n }),\n ),\n }).isRequired,\n isCartItemsLoading: PropTypes.bool,\n cartItems: PropTypes.arrayOf(\n PropTypes.shape({\n currency: PropTypes.string,\n grossAmount: PropTypes.string,\n title: PropTypes.string,\n }),\n ),\n fromApprovalRequest: PropTypes.bool,\n cartFees: PropTypes.arrayOf(\n PropTypes.shape({\n name: PropTypes.string,\n grossTotal: PropTypes.string,\n }),\n ),\n layman: PropTypes.bool,\n};\n\nexport default withQueryParamsProvider(OverviewTab);\n","import React, { Fragment, useState } from 'react';\nimport { Link } from '@wtag/react-comp-lib';\nimport Avatar from '@wtag/rcl-avatar';\nimport Modal from 'sharedWebpack/Modal';\nimport Card from '@wtag/rcl-card';\nimport Icon from '@wtag/rcl-icon';\nimport ContentLoaderPlaceholder from '@wtag/rcl-content-loader-placeholder';\nimport PropTypes from 'prop-types';\nimport './styles.scss';\n\nconst OrdersLeftPanel = ({ owner, arranger, billingContact, tenant, currentPersonId, loading }) => {\n const [copyState, setCopyState] = useState(false);\n const [isModalVisible, setIsModalVisible] = useState(false);\n\n const copyTextToClipboard = async text => {\n const textField = document.createElement('textarea');\n textField.innerText = text;\n document.body.appendChild(textField);\n textField.select();\n document.execCommand('copy');\n textField.remove();\n setCopyState(true);\n setTimeout(() => {\n setCopyState(false);\n }, 1000);\n };\n\n const modalTitleContent = (\n \n
\n \n );\n };\n\n return (\n \n {arranger.email ||\n I18n.t('admin.components.channels.list.table.unavailable_text.email')}\n {copyButton(arranger.email)}\n
\n \n {arranger.phone ||\n I18n.t('admin.components.orders.left_panel.travel_arranger.no_phone')}\n {copyButton(arranger.phone)}\n
\n \n
\n );\n};\n\nOrdersLeftPanel.defaultProps = {\n arranger: null,\n billingContact: null,\n tenant: null,\n};\n\nOrdersLeftPanel.propTypes = {\n owner: PropTypes.shape({\n id: PropTypes.number,\n firstName: PropTypes.string,\n lastName: PropTypes.string,\n name: PropTypes.string,\n avatarUrl: PropTypes.string,\n email: PropTypes.string,\n }).isRequired,\n arranger: PropTypes.shape({\n id: PropTypes.number,\n firstName: PropTypes.string,\n lastName: PropTypes.string,\n name: PropTypes.string,\n avatarUrl: PropTypes.string,\n email: PropTypes.string,\n phone: PropTypes.string,\n }),\n billingContact: PropTypes.shape({\n id: PropTypes.number,\n name: PropTypes.string,\n avatarUrl: PropTypes.string,\n email: PropTypes.string,\n }),\n tenant: PropTypes.shape({\n logo: PropTypes.string,\n name: PropTypes.string,\n }),\n currentPersonId: PropTypes.number.isRequired,\n loading: PropTypes.bool.isRequired,\n};\n\nexport default OrdersLeftPanel;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Icon from '@wtag/rcl-icon';\nimport classNames from 'classnames';\nimport './style.scss';\n\nconst AirportChangeIndicator = ({ className, changedAirportCodeText }) => (\n \n {loading ? (\n \n {arranger && arranger.id && (\n \n )}\n
\n \n \n \n
\n )}\n\n \n {I18n.t('admin.components.orders.left_panel.travel_arranger.title')}\n
\n \n
\n {renderModal()}\n \n
\n \n \n
\n \n setIsModalVisible(true)}\n disabled={!arranger.email}\n >\n
\n \n setIsModalVisible(true)}\n disabled={!arranger.phone}\n >\n
\n \n
\n \n {I18n.t('admin.components.orders.left_panel.titles.owner')}\n
\n \n
\n {owner.email}
\n \n {loading ? (\n \n {(billingContact || tenant) && (\n \n {billingContact && (\n \n \n )}\n \n )}\n \n )}\n
\n \n
\n )}\n {tenant && (\n \n {I18n.t('activerecord.attributes.order.billing_contact')}\n
\n \n
\n \n {billingContact.email}\n
\n \n
\n \n
\n \n {I18n.t('admin.components.orders.left_panel.titles.ordered_with')}\n
\n {tenant.name}\n \n
\n);\n\nAirportChangeIndicator.defaultProps = {\n className: null,\n};\n\nAirportChangeIndicator.propTypes = {\n className: PropTypes.node,\n changedAirportCodeText: PropTypes.string.isRequired,\n};\n\nexport default AirportChangeIndicator;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport Icon from '@wtag/rcl-icon';\nimport './style.scss';\n\nconst AirportChangeSegment = ({\n className,\n isBackgroundTransparent,\n destinationAirportDetails,\n changedAirportDetails,\n}) => (\n \n
\n \n);\n\nAirportChangeSegment.defaultProps = {\n className: null,\n isBackgroundTransparent: false,\n};\n\nAirportChangeSegment.propTypes = {\n className: PropTypes.string,\n isBackgroundTransparent: PropTypes.bool,\n destinationAirportDetails: PropTypes.shape({\n code: PropTypes.string.isRequired,\n name: PropTypes.string.isRequired,\n placeName: PropTypes.string.isRequired,\n countryName: PropTypes.string.isRequired,\n }).isRequired,\n changedAirportDetails: PropTypes.shape({\n code: PropTypes.string.isRequired,\n name: PropTypes.string.isRequired,\n placeName: PropTypes.string.isRequired,\n countryName: PropTypes.string.isRequired,\n }).isRequired,\n};\n\nexport default AirportChangeSegment;\n","import React from 'react';\nimport RCLAlert from '@wtag/rcl-alert';\nimport PropTypes from 'prop-types';\n\nconst AlertComponentWrapper = props => {\n const {\n children,\n isVisible,\n className,\n hideClose,\n title,\n type,\n onClose,\n isBackgroundVisible,\n isIconVisible,\n } = props;\n\n return (\n \n
\n \n
\n \n {I18n.t('components.flight.stopover.airport_change')}{' '}\n \n {destinationAirportDetails.code}\n \n
\n \n {destinationAirportDetails.name}, {destinationAirportDetails.placeName},{' '}\n {destinationAirportDetails.countryName} ({destinationAirportDetails.code}){' '}\n {I18n.t('components.flight.stopover.airport_change_to')} {changedAirportDetails.name},{' '}\n {changedAirportDetails.placeName}, {changedAirportDetails.countryName} (\n {changedAirportDetails.code})\n
\n \n \n {order.approvalRequestStatus\n ? I18n.t(order.approvalRequestStatus, {\n scope: 'public.orders.show.approval.status',\n })\n : I18n.t('public.orders.show.approval.intro')}\n \n setOpenSidePanel(true)}\n />\n )}\n
\n \n );\n};\n\nApprovalRequestBar.propTypes = {\n orderID: PropTypes.number.isRequired,\n order: PropTypes.shape({\n requiresApproval: PropTypes.bool,\n approvalRequestStatus: PropTypes.string,\n }).isRequired,\n startApprovalProcess: PropTypes.func.isRequired,\n};\n\nexport default ApprovalRequestBar;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport Button from '@wtag/rcl-button';\nimport Avatar from '@wtag/rcl-avatar';\nimport Input from '@wtag/rcl-input';\nimport Icon from '@wtag/rcl-icon';\nimport { CheckBox } from '@wtag/react-comp-lib';\nimport './style.scss';\n\nconst ChangeApproversSidePanelBody = ({\n mandatoryApprovers,\n optionalApprovers,\n potentialApprovers,\n minimumApproverCount,\n selectedOptionalApprovers,\n setSelectedOptionalApprovers,\n startApprovalProcess,\n hideSidePanel,\n}) => {\n const NUMBER_OF_APPROVER_TO_SHOW = 5;\n\n const [approverSearch, setApproverSearch] = useState('');\n\n const nameCompare = (a, b) => {\n const nameA = a.name.toLowerCase();\n const nameB = b.name.toLowerCase();\n if (nameA < nameB) {\n return -1;\n }\n if (nameA > nameB) {\n return 1;\n }\n\n return 0;\n };\n\n const filteredApprovalList = () => {\n let approvers = optionalApprovers\n .sort(nameCompare)\n .concat(potentialApprovers.sort(nameCompare));\n if (approverSearch !== null) {\n const searchText = approverSearch.toLowerCase();\n approvers = approvers.filter(\n approver =>\n approver.name.toLowerCase().includes(searchText) ||\n (approver.email !== null && approver.email.toLowerCase().includes(searchText)),\n );\n }\n\n return approvers.slice(0, NUMBER_OF_APPROVER_TO_SHOW);\n };\n\n const selectedApproverIds = selectedOptionalApprovers.map(approver => approver.id);\n\n const isSelected = approver => selectedApproverIds.includes(approver.id);\n\n const selectAllApprovers = selectAll => {\n let allApprovers = [];\n if (selectAll) {\n allApprovers = optionalApprovers.concat(potentialApprovers);\n }\n setSelectedOptionalApprovers(allApprovers);\n };\n\n const isAllApproverSelected = () => {\n const allApprovers = optionalApprovers.concat(potentialApprovers);\n return allApprovers.length === selectedOptionalApprovers.length;\n };\n\n const onCheckBoxClick = approver => {\n let newSelectedApprovers;\n\n if (isSelected(approver)) {\n newSelectedApprovers = selectedOptionalApprovers.filter(\n selectedApprover => approver.id !== selectedApprover.id,\n );\n } else {\n newSelectedApprovers = selectedOptionalApprovers.concat([approver]);\n }\n\n setSelectedOptionalApprovers(newSelectedApprovers);\n };\n\n const optionalApproverCount = () => {\n if (minimumApproverCount > mandatoryApprovers.length) {\n return minimumApproverCount - mandatoryApprovers.length\n }\n return 0\n }\n\n const filteredApprovals = filteredApprovalList();\n return (\n \n \n {I18n.t('approval_process.side_panel.subtitle')}\n \n\n {mandatoryApprovers.length > 0 && (\n
\n );\n};\n\nChangeApproversSidePanelBody.propTypes = {\n minimumApproverCount: PropTypes.number.isRequired,\n mandatoryApprovers: PropTypes.arrayOf(\n PropTypes.shape({\n avatarUrl: PropTypes.string,\n middleName: PropTypes.string,\n firstName: PropTypes.string.isRequired,\n lastName: PropTypes.string.isRequired,\n name: PropTypes.string.isRequired,\n }),\n ).isRequired,\n optionalApprovers: PropTypes.arrayOf(\n PropTypes.shape({\n avatarUrl: PropTypes.string,\n firstName: PropTypes.string.isRequired,\n middleName: PropTypes.string,\n lastName: PropTypes.string.isRequired,\n name: PropTypes.string.isRequired,\n }),\n ).isRequired,\n potentialApprovers: PropTypes.arrayOf(\n PropTypes.shape({\n avatarUrl: PropTypes.string,\n firstName: PropTypes.string.isRequired,\n middleName: PropTypes.string,\n lastName: PropTypes.string.isRequired,\n name: PropTypes.string.isRequired,\n }),\n ).isRequired,\n selectedOptionalApprovers: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\n hideSidePanel: PropTypes.func.isRequired,\n setSelectedOptionalApprovers: PropTypes.func.isRequired,\n startApprovalProcess: PropTypes.func.isRequired,\n};\n\nexport default ChangeApproversSidePanelBody;\n","import React, { Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport { hot } from 'react-hot-loader';\nimport ContentLoaderPlaceholder from '@wtag/rcl-content-loader-placeholder';\nimport Icon from '@wtag/rcl-icon';\nimport { EmphasisTag } from '@wtag/react-comp-lib';\nimport Avatar from '@wtag/rcl-avatar';\nimport Tooltip from '@wtag/rcl-tooltip';\n\nconst deniedIcons = reason => {\n if (reason) {\n return (\n \n
\n )}\n\n {(optionalApprovers.length > 0 || potentialApprovers.length > 0) && (\n \n {I18n.t('approval_process.side_panel.mandatory', { count: mandatoryApprovers.length })}\n
\n {mandatoryApprovers.map(person => (\n \n
\n ))}\n \n
\n )}\n \n {I18n.t('approval_process.side_panel.optional', {\n count: optionalApproverCount(),\n })}\n
\n \n selectAllApprovers(!isAllApproverSelected())}\n label={I18n.t('approval_process.side_panel.all_approvers')}\n />\n
\n \n
\n \n {filteredApprovals.map(optionalApprover => (\n
\n \n onCheckBoxClick(optionalApprover)}\n />\n
\n ))}\n \n startApprovalProcess()}\n primary={true}\n disabled={(mandatoryApprovers.length + selectedOptionalApprovers.length) < minimumApproverCount}\n />\n hideSidePanel()}\n />\n
\n \n
\n );\n }\n\n return \n \n \n
\n \n
\n);\n\nApprover.propTypes = {\n confirmation: PropTypes.shape({\n id: PropTypes.string.isRequired,\n name: PropTypes.string.isRequired,\n firstName: PropTypes.string.isRequired,\n lastName: PropTypes.string.isRequired,\n profilePictureUrl: PropTypes.string,\n mandatory: PropTypes.bool.isRequired,\n }).isRequired,\n};\n\nconst renderLoader = (confirmations, fetchingRequest) => {\n if (confirmations === 0 && !fetchingRequest) {\n return (\n \n
\n\n \n
\n {confirmation.name}
\n\n {confirmation.mandatory && (\n {renderStatus(confirmation)}
\n \n {I18n.t('public.components.approvals.requests.no_executive_approver')}\n
\n );\n }\n return \n {I18n.t(confirmationLabel, {\n scope: 'public.components.approvals.approvers',\n count: confirmations.length,\n })}\n
\n\n {minApprovals && (\n \n {I18n.t('public.components.approvals.requests.min_approvals', { count: minApprovals })}\n
\n )}\n\n {confirmations.length > 0 && !fetchingRequest\n ? confirmations.map(confirmation => \n {\n setSwapId(selectedOption ? selectedOption.value : null);\n }}\n value={\n approversOptions &&\n approversOptions.length &&\n approversOptions.find(selectedApprover => selectedApprover.value === swapId)\n }\n />\n
\n \n {\n setSwapWithId(selectedOption ? selectedOption.value : null);\n }}\n value={\n potentialApproversOptions &&\n potentialApproversOptions.length &&\n potentialApproversOptions.find(\n selectedApprover => selectedApprover.value === swapWithId,\n )\n }\n />\n
\n\n \n
\n {I18n.t('public.components.approvals.requests.exchange_approvers.title')}
\n \n
\n \n );\n return (\n \n
\n );\n};\n\nLeftPanel.defaultProps = {\n confirmations: [],\n executiveConfirmations: [],\n arranger: null,\n potentialApprovers: [],\n minApprovals: null,\n layman: false,\n};\n\nLeftPanel.propTypes = {\n requestId: PropTypes.number.isRequired,\n confirmations: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.string.isRequired,\n name: PropTypes.string.isRequired,\n firstName: PropTypes.string.isRequired,\n lastName: PropTypes.string.isRequired,\n avatarUrl: PropTypes.string.isRequired,\n mandatory: PropTypes.bool.isRequired,\n }),\n ),\n executiveConfirmations: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.string.isRequired,\n name: PropTypes.string.isRequired,\n firstName: PropTypes.string.isRequired,\n lastName: PropTypes.string.isRequired,\n avatarUrl: PropTypes.string.isRequired,\n mandatory: PropTypes.bool.isRequired,\n }),\n ),\n owner: PropTypes.shape({\n id: PropTypes.number.isRequired,\n email: PropTypes.string.isRequired,\n firstName: PropTypes.string.isRequired,\n lastName: PropTypes.string.isRequired,\n }).isRequired,\n arranger: PropTypes.shape({\n avatarUrl: PropTypes.string.isRequired,\n firstName: PropTypes.string.isRequired,\n id: PropTypes.number.isRequired,\n }),\n billingContact: PropTypes.number.isRequired,\n tenant: PropTypes.shape({\n name: PropTypes.string.isRequired,\n logo: PropTypes.string.isRequired,\n }).isRequired,\n ordersLeftPanelLoading: PropTypes.bool.isRequired,\n approversLoading: PropTypes.bool.isRequired,\n approvers: PropTypes.arrayOf(\n PropTypes.shape({\n name: PropTypes.string.isRequired,\n id: PropTypes.number.isRequired,\n }).isRequired,\n ).isRequired,\n potentialApprovers: PropTypes.arrayOf(\n PropTypes.shape({\n name: PropTypes.string.isRequired,\n id: PropTypes.number.isRequired,\n }).isRequired,\n ),\n approverSwappable: PropTypes.bool.isRequired,\n fetchRequestDetails: PropTypes.func.isRequired,\n minApprovals: PropTypes.number,\n isApprovalRequest: PropTypes.bool.isRequired,\n fetchingRequest: PropTypes.bool.isRequired,\n layman: PropTypes.bool,\n};\n\nexport default hot(module)(withQueryParamsProvider(LeftPanel));\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { EmphasisTag, Link } from '@wtag/react-comp-lib';\nimport Avatar from '@wtag/rcl-avatar';\nimport Icon from '@wtag/rcl-icon';\nimport Card from '@wtag/rcl-card';\nimport ProductIcon from 'sharedWebpack/ProductIcon';\nimport IconButton from '@wtag/rcl-icon-button';\n\nconst TravellerCard = ({ traveller, layman }) => (\n \n
\n \n \n {approversLoading ? (\n \n \n )}\n\n {layman && approverSwappable && isApprovalRequest && (\n \n
\n \n
\n
\n \n
\n setIsModalVisible(true)}\n />\n setIsModalVisible(false)}\n >\n
\n )}\n \n
\n
\n \n
\n {I18n.t('public.components.approvals.requests.exchange_approvers.title')}\n
\n \n {I18n.t('public.components.approvals.requests.exchange_approvers.details')}\n
\n \n
\n \n \n {owner && (\n
\n \n
\n \n
\n \n \n \n
\n \n {traveller.orderItems && traveller.orderItems.length > 0 && (\n \n {I18n.t('admin.components.orders.travellers_tab.type_information.items', {\n count: traveller.orderItems.length,\n })}\n \n )}\n \n \n \n \n )}\n
\n \n
\n \n
\n \n {traveller &&\n traveller.orderItems &&\n traveller.orderItems.length > 0 &&\n traveller.orderItems.map(item => (\n
\n \n
\n ))}\n \n
\n {item.title}
\n \n {item.booking &&\n `${I18n.t(item.booking.channel, { scope: 'channels' })} ${\n item.booking.identifier\n }`}\n
\n \n
\n \n
\n \n {traveller.age\n ? traveller.age\n : I18n.t('admin.components.orders.travellers_tab.information.not_available')}\n
\n \n {I18n.t('admin.components.orders.travellers_tab.information.age')}\n
\n \n
\n \n
\n \n {traveller.primaryDocument\n ? I18n.t(traveller.primaryDocument.documentType, {\n scope: 'simple_form.options.person.identification_documents.document_type',\n })\n : I18n.t('admin.components.orders.travellers_tab.information.not_available')}\n
\n \n {I18n.t('admin.components.orders.travellers_tab.information.document')}\n
\n \n
\n ) : (\n I18n.t('admin.components.orders.travellers_tab.information.no_travellers')\n )}\n {`${adultChildInfo()} ${I18n.t(\n 'admin.components.orders.travellers_tab.type_information.in_order',\n )}`}
\n {travellersVisaCheck() > 0 ? (\n \n
\n ) : (\n \n
\n )}\n \n \n {item.totalAmount}\n \n
\n \n
\n \n {(item.journeyElementId || item.productId) && (\n
\n {item.outOfPolicyJustification && (\n {I18n.t('public.components.approvals.confirmations.decline_reason')}
\n \n
\n \n );\n\n const confirmationSection = () => (\n \n {request.bookingDate && (\n
\n );\n\n const requestHeadingStatusTagLength = text =>\n text.length > 13\n ? 'request__heading-button request__heading-button--cancel--long'\n : 'request__heading-button request__heading-button--cancel--short';\n\n const requestsSection = (type, text, iconName) => (\n \n
\n )}\n \n
\n \n setIsModalVisible(true)}\n />\n setIsModalVisible(false)}\n >\n
\n \n setDeclineReason(event.target.value)}\n />\n
\n \n
\n \n \n \n
\n \n );\n\n const checkStatus = () => {\n if (confirmationId) {\n const allConfirmations = [...confirmations, ...executiveConfirmations];\n const confirmation = allConfirmations.find(obj => obj.id === confirmationId);\n return confirmation.status;\n }\n\n return request.status;\n };\n\n const renderStatus = () => {\n const status = checkStatus();\n let iconName;\n let type;\n let text;\n switch (status) {\n case 'pending':\n iconName = 'loading';\n type = 'warning';\n text = I18n.t('public.components.approvals.requests.status.pending');\n break;\n case 'approved':\n iconName = 'preference';\n type = 'success';\n text = I18n.t('public.components.approvals.requests.status.approved');\n break;\n case 'denied':\n iconName = 'closeCircle';\n type = 'danger';\n text = I18n.t('public.components.approvals.requests.status.denied');\n break;\n\n default:\n break;\n }\n\n if (confirmationId) {\n text = I18n.t(status, {\n scope: 'public.approvals.confirmations.show.status',\n });\n if (status === 'pending') {\n return confirmationSection();\n }\n\n return (\n \n window.location.assign(request.urls.booking)}\n />\n
\n )}\n \n {approversLoading || fetchingRequest ? (\n {!fetchingRequest && renderStatus()}
}\n leftNode={leftHeaderText()}\n />\n )}\n \n
\n \n
\n \n );\n};\n\nApprovalRequestShow.defaultProps = {\n requestId: null,\n confirmationId: null,\n orderId: null,\n cartId: null,\n layman: false,\n};\n\nApprovalRequestShow.propTypes = {\n requestId: PropTypes.number,\n confirmationId: PropTypes.string,\n orderId: PropTypes.number,\n cartId: PropTypes.string,\n layman: PropTypes.bool,\n fetchUrl: PropTypes.string.isRequired,\n};\n\nexport default hot(module)(withQueryParamsProvider(ApprovalRequestShow));\n","import React, { useState, Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport { AvatarUpload } from '@wtag/react-comp-lib';\nimport Modal from '@wtag/rcl-modal';\nimport Icon from '@wtag/rcl-icon';\nimport IconButton from '@wtag/rcl-icon-button';\n\nconst AvatarModal = props => {\n const { className, fetchInstance, updateAvatar } = props;\n const [isModalVisible, setIsModalVisible] = useState(false);\n\n const onModalOpen = () => setIsModalVisible(true);\n const onModalClose = () => setIsModalVisible(false);\n\n const saveAvatar = async image => {\n const formData = new FormData();\n formData.append('avatar', image);\n\n updateAvatar(formData).then(data => {\n if (data.error === null) {\n onModalClose();\n fetchInstance();\n }\n });\n };\n\n const onAvatarSave = image => {\n const file = new File([image], image.name, { type: image.type });\n saveAvatar(file);\n };\n\n return (\n \n
\n \n \n {getVerticalMenuItems()}\n \n
\n {verticalMenuItems[selectedTabIndex].tabContent}
\n \n
\n );\n};\n\nRoomListEmptyPlaceholder.propTypes = {\n header: PropTypes.string.isRequired,\n message: PropTypes.string.isRequired,\n};\n\nexport default RoomListEmptyPlaceholder;\n","export const AGENCY = 'agency';\nexport const TRAVEL_ARRANGER = 'travelArrenger';\nexport const TRAVEL_ARRANGEMENT_CLIENTS = 'travelArrangementClients';\nexport const NOTIFICATION = 'notification';\nexport const AGENCY_NOTIFICATIONS = 'agencyNotifications';\n","/* global I18n */\nimport React, { Component, Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport Icon from '@wtag/rcl-icon';\nimport { Spinner } from '@wtag/react-comp-lib';\nimport Avatar from '@wtag/rcl-avatar';\nimport Input from '@wtag/rcl-input';\nimport Badge from '@wtag/rcl-badge';\nimport AppContext from '../AppContext';\nimport SanitizedHTML from '../../SanitizedHTML';\nimport MarkDown from '../MarkDown';\nimport RoomListEmptyPlaceholder from '../RoomListEmptyPlaceholder';\n\nimport {\n AGENCY,\n TRAVEL_ARRANGER,\n TRAVEL_ARRANGEMENT_CLIENTS,\n AGENCY_NOTIFICATIONS,\n} from './categories';\nimport TimeAgo from '../../TimeAgo';\n\nclass RoomList extends Component {\n constructor(props) {\n super(props);\n\n this.laymanMode = this.props.context.laymanMode;\n\n this.state = {\n searchText: null,\n };\n }\n\n getAgencyCategoryRooms = () => {\n const customerRooms = this.filterByRoomType(AGENCY, this.props.rooms);\n const notificationChannel = this.filterByRoomType(AGENCY_NOTIFICATIONS, this.props.rooms);\n return [...customerRooms, ...notificationChannel];\n };\n\n getTravelArrangingCategoryRooms = () => {\n if (this.laymanMode) {\n const travelArrangerCategory = this.filterByRoomType(TRAVEL_ARRANGER, this.props.rooms);\n const travelArrangementClientCategory = this.filterByRoomType(\n TRAVEL_ARRANGEMENT_CLIENTS,\n this.props.rooms,\n );\n\n return [...travelArrangerCategory, ...travelArrangementClientCategory];\n }\n\n return [];\n };\n\n getNotifications = room => {\n if (\n room.messageUnseen.length + room.messageMentions.length === 0 ||\n !this.props.showNotifications\n ) {\n return null;\n }\n const count = this.countNotifications(room);\n if (count === 0) return null;\n let showNotifications = count;\n if (count > 9) {\n showNotifications = '9+';\n }\n return {showNotifications};\n };\n\n countNotifications = room => {\n const context = this.props.context;\n if (this.laymanMode) {\n const unseenMessageIds = new Set();\n room.messageUnseen.forEach(message => unseenMessageIds.add(message.messageId));\n room.messageMentions.forEach(message => unseenMessageIds.add(message.messageId));\n return unseenMessageIds.size;\n }\n\n return room.messageMentions.filter(mention => mention.userId === context.currentUserId).length;\n };\n\n agencyRooms = () => this.sortRooms(this.getAgencyCategoryRooms());\n\n travelArrangingRooms = () => this.sortRooms(this.getTravelArrangingCategoryRooms());\n\n searchHandler(query) {\n this.setState({\n searchText: query && query.toLowerCase(),\n });\n }\n\n matchingRooms = rooms => {\n if (this.state.searchText) {\n return rooms.filter(room => {\n const searchValue = room.title.toLowerCase();\n return searchValue.indexOf(this.state.searchText) !== -1;\n });\n }\n return rooms;\n };\n\n filterByRoomType = category => this.props.rooms.filter(room => room.type === category);\n\n handleRoomClick = room => {\n this.props.handleRoomClick(room);\n };\n\n listingRooms = rooms => {\n const roomSet = new Set();\n const duplicateRoomIds = [];\n\n const filterRooms = rooms.filter(room => {\n const duplicateRoom = roomSet.has(room.uid);\n roomSet.add(room.uid);\n if (duplicateRoom) duplicateRoomIds.push(room.uid);\n if (!this.laymanMode && room.type === AGENCY_NOTIFICATIONS) {\n return false;\n }\n return !duplicateRoom;\n });\n\n const addTagTextIntoAnElement = message => {\n let messageWithoutHtmlTag = message.replace(/[\\s]+ | <[^>]+>/g, '');\n messageWithoutHtmlTag = messageWithoutHtmlTag.replace(/[\\n]/g, ' ');\n const updatedString = MarkDown(this.props.context.laymanMode).convert(messageWithoutHtmlTag);\n return updatedString;\n };\n\n const roomList = filterRooms.map(room => {\n const activeClass = this.props.activeRoom && this.props.activeRoom.uid === room.uid;\n\n const roomBasicInformation = this.props.context.roomBasicInformation(room);\n\n const isAllMessagesSeen = room.messageUnseen.length + room.messageMentions.length === 0;\n\n return (\n \n
\n {header}
\n {message}
\n \n
\n \n
\n \n \n );\n });\n return roomList;\n };\n\n sortRooms = rooms =>\n rooms.sort((roomA, roomB) => {\n if (roomA.lastMessageTimestamp.length === 0) {\n return 0;\n }\n return Number(roomA.lastMessageTimestamp) < Number(roomB.lastMessageTimestamp) ? 1 : -1;\n });\n\n roomSearchField = () => {\n const placeholder = this.laymanMode\n ? I18n.t('chat.search_people')\n : I18n.t('chat.search_travellers');\n return (\n \n {room.title}\n {room.lastMessage && (\n \n
\n \n {room.lastMessage && (\n \n
\n\n {!activeClass && this.getNotifications(room)}\n \n this.searchHandler(value)}\n preIcon={
\n );\n };\n\n render() {\n const { context } = this.props;\n const agencyRoomlist = this.listingRooms(\n this.laymanMode ? this.agencyRooms() : this.matchingRooms(this.agencyRooms()),\n );\n const travelArrangingRoomList = this.listingRooms(\n this.matchingRooms(this.travelArrangingRooms()),\n );\n\n const isLoading = this.props.isLoading;\n\n const roomListEmptyPlaceholderContent = (\n - {travelArrangingRoomList}
\n
\n ) : (\n \n
\n )}\n \n {this.laymanMode && this.roomSearchField()}\n {!context.laymanMode && this.roomSearchField()}\n
\n \n {agencyRoomListChatsSection || travelArrangingRoomListChatsSection ? (\n \n {agencyRoomListChatsSection}\n {travelArrangingRoomListChatsSection}\n \n ) : (\n roomListEmptyPlaceholderContent\n )}\n
\n (ref.current[id] = el)}>\n {showQuotedReply && (\n \n
\n )}\n\n \n
\n \n
\n \n
\n {!isSending && (\n \n
\n )}\n \n
\n \n \n );\n});\n\nChatMessage.defaultProps = {\n isSending: false,\n isFailedToSend: false,\n errors: [],\n};\n\nChatMessage.propTypes = {\n errors: PropTypes.arrayOf(\n PropTypes.shape({ key: PropTypes.string, characterLimit: PropTypes.string }),\n ),\n context: PropTypes.shape({\n connected: PropTypes.bool,\n currentUserAvatar: PropTypes.string,\n currentUserId: PropTypes.number,\n currentUserName: PropTypes.string,\n laymanMode: PropTypes.bool,\n tenant: PropTypes.string,\n messageInputRef: PropTypes.shape({}),\n focusMessageInput: PropTypes.func,\n }).isRequired,\n markdown: PropTypes.shape().isRequired,\n sender: PropTypes.shape({\n firstName: PropTypes.string,\n lastName: PropTypes.string,\n avatarUrl: PropTypes.string,\n name: PropTypes.string,\n }).isRequired,\n isCustomer: PropTypes.bool.isRequired,\n currentUserId: PropTypes.number.isRequired,\n timestamp: PropTypes.string.isRequired,\n text: PropTypes.string.isRequired,\n senderId: PropTypes.number.isRequired,\n senderName: PropTypes.string.isRequired,\n laymanMode: PropTypes.bool.isRequired,\n id: PropTypes.number.isRequired,\n roomUsers: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.number,\n name: PropTypes.string,\n tenant: PropTypes.string,\n }),\n ).isRequired,\n replyHandler: PropTypes.func.isRequired,\n quotedMessage: PropTypes.shape({\n id: PropTypes.string.isRequired,\n senderId: PropTypes.string.isRequired,\n isCustomer: PropTypes.string.isRequired,\n text: PropTypes.string.isRequired,\n }).isRequired,\n tenant: PropTypes.string.isRequired,\n focusToQuotedMessage: PropTypes.func.isRequired,\n isSending: PropTypes.bool,\n isFailedToSend: PropTypes.bool,\n sendChatMessage: PropTypes.func.isRequired,\n messageIndex: PropTypes.number.isRequired,\n};\n\nconst ChatMessageWithContext = forwardRef((props, ref) => (\n \n {!isMyMessage &&
\n {isSending && (\n {sender.name}
}\n {I18n.t('chat.sending')}
\n )}\n {isFailedToSend && (\n \n {errors && errors.length > 0 ? (\n \n
\n )}\n {!isFailedToSend && !isSending ? (\n \n
\n ) : null}\n \n
,\n );\n }\n\n return fetchedMessages;\n};\n\nMessageList.defaultProps = {\n tenant: null,\n};\n\nMessageList.propTypes = {\n tenant: PropTypes.string,\n fetchMoreHistory: PropTypes.func.isRequired,\n currentUserId: PropTypes.number.isRequired,\n messages: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.number,\n timestamp: PropTypes.string,\n title: PropTypes.string,\n text: PropTypes.string,\n tenant: PropTypes.string,\n roomId: PropTypes.string,\n senderId: PropTypes.number,\n senderName: PropTypes.string,\n }),\n ).isRequired,\n roomUsers: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.number,\n name: PropTypes.string,\n tenant: PropTypes.string,\n }),\n ).isRequired,\n context: PropTypes.shape({\n connected: PropTypes.bool,\n currentUserAvatar: PropTypes.string,\n currentUserId: PropTypes.number,\n currentUserName: PropTypes.string,\n laymanMode: PropTypes.bool,\n tenant: PropTypes.string,\n messageInputRef: PropTypes.shape({}),\n focusMessageInput: PropTypes.func,\n }).isRequired,\n};\n\nconst MessageListWithContext = props => (\n \n \n
\n )}\n \n
\n \n \n {this.props.repliedMessage && (\n \n
\n )}\n\n \n
\n \n {I18n.t('admin.components.chat.replying_header')}{' '}\n \n {this.props.repliedMessage.isMyMessage\n ? I18n.t('admin.components.chat.yourself')\n : senderName}\n \n
\n \n
\n \n
\n \n );\n }\n}\n\nMessageInput.propTypes = {\n sendChatMessage: PropTypes.func.isRequired,\n sendTyping: PropTypes.func.isRequired,\n roomUsers: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.number,\n name: PropTypes.string,\n tenant: PropTypes.string,\n }),\n ).isRequired,\n context: PropTypes.shape().isRequired,\n readOnly: PropTypes.bool.isRequired,\n laymanMode: PropTypes.bool.isRequired,\n repliedMessage: PropTypes.shape({\n messageId: PropTypes.number.isRequired,\n senderId: PropTypes.number.isRequired,\n senderName: PropTypes.string.isRequired,\n text: PropTypes.string.isRequired,\n isMyMessage: PropTypes.bool.isRequired,\n }).isRequired,\n onClose: PropTypes.func.isRequired,\n addNewMessage: PropTypes.func.isRequired,\n};\n\nconst MessageInputWithContext = props => (\n \n
\n \n
\n );\n};\n\nTypingIndicator.propTypes = {\n context: PropTypes.shape({\n connected: PropTypes.bool,\n currentUserAvatar: PropTypes.string,\n currentTenantLogoUrl: PropTypes.string,\n currentUserId: PropTypes.number,\n currentUserName: PropTypes.string,\n laymanMode: PropTypes.bool,\n tenant: PropTypes.string,\n messageInputRef: PropTypes.shape({}),\n focusMessageInput: PropTypes.func,\n isAlien: PropTypes.bool,\n }).isRequired,\n typerInfo: PropTypes.shape({\n id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,\n roomId: PropTypes.string.isRequired,\n isCustomer: PropTypes.bool.isRequired,\n }).isRequired,\n typerCount: PropTypes.number.isRequired,\n roomUsers: PropTypes.shape({\n agency: PropTypes.shape({}),\n customers: PropTypes.shape({}),\n }).isRequired,\n roomUid: PropTypes.string.isRequired,\n};\n\nexport default TypingIndicator;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Icon from '@wtag/rcl-icon';\nimport { AGENCY, AGENCY_NOTIFICATIONS } from './categories';\n\nconst ActiveRoomEmptyPlaceholder = props => {\n const { type, title, laymanMode } = props;\n let emptyChatRoomPlaceholderData;\n\n const channelName = laymanMode && type === AGENCY ? 'agencyChannel' : type;\n const iconName = type === AGENCY_NOTIFICATIONS ? 'notification' : 'emptyChat';\n\n switch (channelName) {\n case 'agencyChannel':\n emptyChatRoomPlaceholderData = {\n header: I18n.t('chat.empty_card.agency.header'),\n message: I18n.t('chat.empty_card.agency.text'),\n };\n break;\n case AGENCY_NOTIFICATIONS:\n emptyChatRoomPlaceholderData = {\n header: I18n.t('chat.empty_card.notifications.header'),\n message: '',\n };\n break;\n default:\n emptyChatRoomPlaceholderData = {\n header: I18n.t('chat.empty_card.travel_arranger.header'),\n message: I18n.t('chat.empty_card.travel_arranger.text', {\n user: title,\n }),\n };\n }\n\n const { header, message } = emptyChatRoomPlaceholderData;\n\n return (\n \n
\n \n
\n \n
\n \n
\n {typerCount > 1 && (\n \n {I18n.t('chat.more_people_typing_text', { count: typerCount - 1 })}\n
\n )}\n \n
\n );\n};\n\nActiveRoomEmptyPlaceholder.propTypes = {\n laymanMode: PropTypes.bool.isRequired,\n type: PropTypes.string.isRequired,\n title: PropTypes.string.isRequired,\n};\n\nexport default ActiveRoomEmptyPlaceholder;\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport { Spinner } from '@wtag/react-comp-lib';\nimport Avatar from '@wtag/rcl-avatar';\nimport Tooltip from '@wtag/rcl-tooltip';\nimport IconButton from '@wtag/rcl-icon-button';\nimport Icon from '@wtag/rcl-icon';\nimport AppContext from '../AppContext';\nimport MessageList from '../messages/MessageList';\nimport MessageInput from '../messages/MessageInput';\nimport TypingIndicator from '../TypingIndicator';\nimport { AGENCY, AGENCY_NOTIFICATIONS } from './categories';\nimport ActiveRoomEmptyPlaceholder from './ActiveRoomEmptyPlaceholder';\n\nconst SCROLLBAR_NEAR_TO_TOP_ELEMENT = 10;\nconst MAX_MESSAGES_LIST_LENGTH = 10;\n\nexport class ActiveRoom extends Component {\n constructor(props) {\n super(props);\n\n this.messageListHolderRef = React.createRef();\n this.focusRef = React.createRef();\n\n this.state = {\n messages: [],\n lastSeenMessageTimestamp: null,\n typers: {},\n isPossibleToFetchMore: true,\n isPossibleToFetchQuotedMessagesUpwards: false,\n repliedMessage: null,\n isLoading: true,\n isLoadingFirstTime: true,\n isFetchingRoomUsers: true,\n users: [],\n roomUsersHash: { customers: {}, agency: {} },\n isPossibleToFetchOnUpwards: true,\n quotedMessages: [],\n enableArrowDownButton: false,\n isFocusingToQuotedMessage: false,\n /*\n This state refers that we have already clicked on a quoteMessage and the backend is fetching the QuotedMessageList\n */\n isScrolledToPreviousMessages: false,\n };\n\n this.sendChatMessage = this.sendChatMessage.bind(this);\n this.fetchMoreHistory = this.fetchMoreHistory.bind(this);\n this.sendTyping = this.sendTyping.bind(this);\n }\n\n componentDidMount() {\n this.prepareRoomUsers();\n this.props.context.client.then(client => {\n client.receiveTyping(data => {\n const hashIdOfTyper = `${data.roomId}-${data.typerId}-${Number(data.isCustomer)}`;\n const isSender =\n this.props.context.currentUserId === data.typerId &&\n data.isCustomer === this.props.context.laymanMode;\n\n if (!isSender && data.roomId === this.props.room.uid) {\n const timerId = setTimeout(() => {\n this.removeTyperFromState(hashIdOfTyper);\n }, 2000);\n\n this.addTyperToState(hashIdOfTyper, data, timerId);\n }\n });\n client.onMessageReceived(this.messageReceiveCallback);\n this.fetchMoreHistory();\n });\n }\n\n componentDidUpdate(oldProps, oldState) {\n const isScrolled =\n this.messageListHolderRef.current &&\n this.messageListHolderRef.current.scrollHeight ===\n this.messageListHolderRef.current.offsetHeight;\n\n const isScrollbarInvisible =\n !this.state.isLoadingFirstTime && !this.state.isFetchingRoomUsers && isScrolled;\n\n const isMessagesChanged = oldState.messages.length !== this.state.messages.length;\n const agencyMessageReadableOnChatOpen =\n oldProps.context.isChatOpen !== this.props.context.isChatOpen &&\n this.props.context.isChatOpen === true &&\n !this.props.context.laymanMode;\n\n if (this.props.room !== oldProps.room) {\n this.prepareRoomUsers();\n }\n\n if (oldProps.room.uid !== this.props.room.uid) {\n this.props.context.client.then(client => {\n client.leaveRoom(oldProps.roomId);\n client.joinRoom(this.props.room.uid).then(() => {\n this.fetchMoreHistory(true);\n });\n });\n } else if (\n oldProps.context.isConnecting !== this.props.context.isConnecting &&\n !this.props.context.isConnecting\n ) {\n this.onConnectionChange();\n } else if (isScrollbarInvisible && isMessagesChanged && this.state.isPossibleToFetchMore) {\n /*\n Currently, we get 10 entities of messages on each api call. But after rendering first ten messages\n if the scrollbar is not visible then we need to fetch more messages to make the scrollbar visible\n otherwise user can not load their messages history and\n also we don't want two api call at a time as we use lastMessagesTimestamp to fetch histories\n */\n this.fetchMoreHistory();\n } else if (agencyMessageReadableOnChatOpen) {\n this.props.onRoomOpen(this.props.room);\n }\n }\n\n componentWillUnmount() {\n this.props.context.client.then(client => {\n client.disableOnMessageReceived(this.messageReceiveCallback);\n });\n }\n\n // eslint-disable-next-line react/sort-comp\n prepareRoomUsers = () => {\n this.props.context.client.then(client => {\n this.setState({ isFetchingRoomUsers: true });\n if (!this.props.context.laymanMode) {\n const user = this.props.room.users.find(roomUser => roomUser.isCustomer);\n client.getRoomUsers(this.props.room.uid, user).then(roomUsers => {\n this.restructureRoomUsers(roomUsers);\n this.setState({ users: roomUsers });\n });\n } else {\n this.restructureRoomUsers(this.props.room.users);\n }\n });\n };\n\n onMessageReceived = message => {\n const isMyMessage =\n message.senderId === this.props.context.currentUserId &&\n message.isCustomer === this.props.context.laymanMode;\n\n if (message.roomId === this.props.room.uid) {\n const hashIdOfSender = `${message.roomId}-${message.senderId}-${Number(message.isCustomer)}`;\n\n // Receiving only messages that are sent to me\n if (!isMyMessage) {\n this.updateMessages([...this.state.messages, message], () => {\n const isScrollingToQuotedMessageList = this.state.quotedMessages.length !== 0;\n\n if (!isScrollingToQuotedMessageList) {\n this.scrollMessageHolderToBottom();\n } else {\n this.removeQuotedMessageList();\n }\n });\n }\n this.removeTyperFromState(hashIdOfSender);\n }\n };\n\n // eslint-disable-next-line react/sort-comp\n fetchQuotedMessagesListDownwards = () => {\n const lastQuotedMessageTimeStamp = new Date(\n this.state.quotedMessages[this.state.quotedMessages.length - 1].timestamp,\n );\n lastQuotedMessageTimeStamp.setSeconds(lastQuotedMessageTimeStamp.getSeconds() + 1);\n\n const lastMessageTimeStamp = this.state.messages[0].timestamp;\n /*\n fetching the oldest 10 messages between the latest message of the quotedMessagesList and the oldest message from the previously fetch messagesList\n */\n this.props.context.client.then(client => {\n client\n .getChatHistory(this.props.room.uid, lastMessageTimeStamp, lastQuotedMessageTimeStamp)\n .then(messages => {\n if (messages.length > 0) {\n this.setState(\n prevState => ({\n quotedMessages: [...prevState.quotedMessages, ...messages],\n isLoading: false,\n }),\n () => {\n /*\n Moving the Scrollbar 2% up from the inputField so that it doesn't make another unnecessary event to fetch messages on downwards direction\n And multiplying by -1 as we are rendering messageList in reverse order\n */\n this.messageListHolderRef.current.scrollTop =\n (2 / 100) *\n (this.messageListHolderRef.current &&\n this.messageListHolderRef.current.scrollHeight * -1);\n },\n );\n } else {\n /*\n scrolling ended with the latest message that's why we are consolidating these arrays\n */\n this.setState(prevState => ({\n messages: [...prevState.quotedMessages, ...prevState.messages],\n /*\n Generally quotedMessagesList always holds the oldest messages what we have in frontend. As\n we are consolidating two arrays and 0th index is holding the most oldest message that's why we are setting\n the oth index message as lastSeenMessageTimestamp\n */\n lastSeenMessageTimestamp: prevState.quotedMessages[0].timestamp,\n quotedMessages: [],\n isLoading: false,\n }));\n }\n });\n });\n };\n\n fetchQuotedMessageAssociatedList(quotedMessageTimeStamp = null, callback) {\n const lastMessageTimestamp =\n this.state.quotedMessages.length > 0\n ? this.state.quotedMessages[0].timestamp\n : this.state.lastSeenMessageTimestamp;\n\n this.props.context.client.then(client => {\n client\n .getChatHistory(this.props.room.uid, lastMessageTimestamp, quotedMessageTimeStamp)\n .then(messages => {\n if (\n this.state.quotedMessages.length === 0 &&\n messages.length % MAX_MESSAGES_LIST_LENGTH !== 0\n ) {\n /*\n The distance between the latest messages and the focused quotedMessage is less than 10 Messages\n that's why we are consolidating these messages\n */\n const quotedMessagesList = [...messages, ...this.state.quotedMessages];\n this.setState(prevState => ({\n messages: [...quotedMessagesList, ...prevState.messages],\n quotedMessages: [],\n lastSeenMessageTimestamp: quotedMessagesList[0].timestamp,\n isPossibleToFetchMore: true,\n isLoading: false,\n }));\n\n callback(messages, false);\n } else {\n callback(messages, true);\n }\n });\n });\n }\n\n fetchQuotedMessagesUpwards() {\n this.fetchQuotedMessageAssociatedList(null, (messages, isNeededToInsert) => {\n if (isNeededToInsert) {\n this.setState(prevState => ({\n quotedMessages: [...messages, ...prevState.quotedMessages],\n isPossibleToFetchQuotedMessagesUpwards: messages.length === 10,\n isLoading: false,\n }));\n }\n });\n }\n\n showOrHideArrowDownButton = () => {\n if (this.state.quotedMessages.length > 0) {\n return;\n }\n /*\n multiplying the scrollTop by -1 as we render messagesList in reversing order\n */\n const isScrolledUpMoreThanVisibleArea =\n this.messageListHolderRef.current.scrollTop * -1 >\n this.messageListHolderRef.current.offsetHeight;\n\n if (isScrolledUpMoreThanVisibleArea && !this.state.enableArrowDownButton) {\n this.setState({ enableArrowDownButton: true });\n } else if (!isScrolledUpMoreThanVisibleArea && this.state.enableArrowDownButton) {\n this.setState({ enableArrowDownButton: false });\n }\n };\n\n onScrollFetchHistory = () => {\n const totalScrolledArea =\n this.messageListHolderRef.current.scrollTop * -1 +\n this.messageListHolderRef.current.offsetHeight;\n\n const distanceBetweenTopAndScrolledArea =\n this.messageListHolderRef.current &&\n this.messageListHolderRef.current.scrollHeight - totalScrolledArea;\n\n this.showOrHideArrowDownButton();\n\n if (\n distanceBetweenTopAndScrolledArea > SCROLLBAR_NEAR_TO_TOP_ELEMENT &&\n this.state.isScrolledToPreviousMessages\n ) {\n /*\n Otherwise on clicking the arrowDown Icon, an event will be fired to fetch latest messages\n as the scrollbar in Top direction.\n */\n this.setState({ isScrolledToPreviousMessages: false });\n }\n\n if (\n this.state.isLoading ||\n this.state.isFocusingToQuotedMessage ||\n this.state.isScrolledToPreviousMessages\n ) {\n return;\n }\n\n const isPossibleToFetchUpwards =\n distanceBetweenTopAndScrolledArea < SCROLLBAR_NEAR_TO_TOP_ELEMENT &&\n this.state.isPossibleToFetchMore;\n\n if (\n totalScrolledArea - this.messageListHolderRef.current.offsetHeight <\n SCROLLBAR_NEAR_TO_TOP_ELEMENT &&\n this.state.quotedMessages.length > 0\n ) {\n /*\n The scrollbar is near to the bottom and we are scrolling on the quotedMessageList\n */\n this.setState({ isLoading: true });\n this.fetchQuotedMessagesListDownwards();\n } else if (\n this.state.quotedMessages.length > 0 &&\n distanceBetweenTopAndScrolledArea < SCROLLBAR_NEAR_TO_TOP_ELEMENT &&\n this.state.isPossibleToFetchQuotedMessagesUpwards\n ) {\n /*\n The scrollbar is near to the top and we are scrolling on the quotedMessageList\n */\n this.setState({ isLoading: true });\n this.fetchQuotedMessagesUpwards();\n } else if (this.state.quotedMessages.length === 0 && isPossibleToFetchUpwards) {\n this.setState({ isLoading: true });\n this.fetchMoreHistory();\n }\n };\n\n onClose = () => {\n this.setState({ repliedMessage: null });\n };\n\n // eslint-disable-next-line react/sort-comp\n sendTyping() {\n this.props.context.client.then(client => client.sendTyping(this.props.room.uid));\n }\n\n sendChatMessage(messagePayload) {\n this.props.context.client.then(client => {\n client.sendMessage(this.props.room.uid, messagePayload, status => {\n const currentMessagesLength = this.state.messages.length;\n\n // search for newMessage by id from the approximate index of newMessage to the last index of the message list\n for (let index = messagePayload.messageIndex; index < currentMessagesLength; index += 1) {\n if (this.state.messages[index].id === messagePayload.id) {\n this.setState(\n prevState => {\n const newMessageList = [...prevState.messages];\n\n // Adding my message to the state\n newMessageList[index] = {\n ...newMessageList[index],\n id: status.messageId,\n isFailedToSend: !status.sent,\n isSending: false,\n errors: status.errors,\n };\n\n return {\n messages: newMessageList,\n };\n },\n () => {\n const isScrollingToQuotedMessageList = this.state.quotedMessages.length !== 0;\n\n if (isScrollingToQuotedMessageList) {\n this.removeQuotedMessageList();\n } else {\n this.scrollMessageHolderToBottom();\n }\n },\n );\n\n break;\n }\n }\n });\n });\n }\n\n fetchMoreHistory(roomChanged = false) {\n const lastSeenTimestamp = roomChanged ? null : this.state.lastSeenMessageTimestamp;\n this.props.context.client.then(client => {\n client.getChatHistory(this.props.room.uid, lastSeenTimestamp).then(messages => {\n const newMessageList = roomChanged ? messages : [...messages, ...this.state.messages];\n const lastSeenMessageTimestamp = (newMessageList[0] && newMessageList[0].timestamp) || null;\n const typingObject = roomChanged ? { userTyping: false } : {};\n this.setState({\n isLoadingFirstTime: false,\n isLoading: false,\n messages: newMessageList,\n lastSeenMessageTimestamp,\n isPossibleToFetchMore: newMessageList.length !== this.state.messages.length,\n ...typingObject,\n });\n });\n });\n }\n\n onConnectionChange = () => {\n // on client changes we need to make sure, the fetching more histories is possible\n this.setState({ isLoading: false });\n\n if (!this.state.messages.length) {\n // at the time of disconnection if the user already clicked on a room, we need to make sure it's fetching initial messages on reconnecting\n this.fetchMoreHistory();\n }\n };\n\n removeTyperFromState = typerHashId => {\n if (this.state.typers[typerHashId]) {\n clearTimeout(this.state.typers[typerHashId].timerId);\n }\n\n this.setState(prevState => {\n const newState = { ...prevState };\n\n delete newState.typers[typerHashId];\n\n return newState;\n });\n };\n\n addTyperToState = (typerHashId, typerInfo, timerId) => {\n if (this.state.typers[typerHashId]) {\n clearTimeout(this.state.typers[typerHashId].timerId);\n }\n\n this.setState(prevState => {\n const newState = { ...prevState };\n\n newState.typers[typerHashId] = {\n id: typerInfo.typerId,\n roomId: typerInfo.roomId,\n isCustomer: typerInfo.isCustomer,\n timerId,\n };\n\n return newState;\n });\n };\n\n restructureRoomUsers = users => {\n const roomUsers = { customers: {}, agency: {} };\n users.forEach(user => {\n if (user.isCustomer) {\n roomUsers.customers[user.id] = user;\n } else {\n roomUsers.agency[user.id] = user;\n }\n });\n this.setState({ roomUsersHash: roomUsers, isFetchingRoomUsers: false });\n };\n\n messageReceiveCallback = message => {\n this.onMessageReceived(message);\n if (message.roomId !== this.props.room.uid || !this.props.context.isChatOpen) {\n return;\n }\n this.props.context.client.then(client => {\n client.removeMentionInRoom(\n message.roomId,\n this.props.context.currentUserId,\n message.id,\n () => {},\n );\n client.removeUnseenInRoom(\n message.roomId,\n this.props.context.currentUserId,\n message.id,\n () => {},\n );\n });\n };\n\n updateMessages = (messages, callback) => {\n this.setState({ messages }, callback);\n };\n\n hideTitle = laymanMode => {\n if (laymanMode) {\n return this.props.room.type === AGENCY;\n }\n\n return this.props.room.type === AGENCY_NOTIFICATIONS;\n };\n\n roomAvatar = (customerImage, isUserOnline) => {\n if (this.props.context.laymanMode && this.props.room.type === AGENCY) return null;\n\n return (\n \n
\n {header}
\n {message}
\n \n 
\n
\n );\n };\n\n replyHandler = repliedMessage => {\n this.setState({ repliedMessage });\n };\n\n roomUsers = () => {\n if (this.props.context.laymanMode) {\n return this.props.room.users;\n }\n\n return this.state.users;\n };\n\n scrollMessageHolderToBottom = () => {\n if (!this.messageListHolderRef.current) {\n return;\n }\n this.messageListHolderRef.current.scrollTop = this.messageListHolderRef.current.scrollHeight;\n };\n\n removeQuotedMessageList = () => {\n if (this.state.quotedMessages.length > 0) {\n this.setState(\n {\n quotedMessages: [],\n isScrolledToPreviousMessages: true,\n },\n () => {\n this.scrollMessageHolderToBottom();\n },\n );\n return;\n }\n this.scrollMessageHolderToBottom();\n };\n\n disableFocusingQuotedMessage = () => {\n this.setState({ isFocusingToQuotedMessage: false });\n };\n\n OnClickFetchQuotedMessageAssociatedList = quotedMessage => {\n this.focusRef.current.scrollIntoView();\n this.fetchQuotedMessageAssociatedList(quotedMessage.timestamp, (messages, isNeededToInsert) => {\n if (isNeededToInsert) {\n this.setState({\n quotedMessages: [...messages],\n isPossibleToFetchQuotedMessagesUpwards: messages.length === 10,\n isLoading: false,\n });\n }\n });\n };\n\n focusToQuotedMessage = quotedMessage => {\n this.setState({ isFocusingToQuotedMessage: true, quotedMessages: [] }, () => {\n this.OnClickFetchQuotedMessageAssociatedList(quotedMessage);\n });\n };\n\n addMyMessage = (newMessage, callback) => {\n const messagesAmountBeforeSaving = this.state.messages.length;\n\n this.setState({ messages: [...this.state.messages, { ...newMessage }] }, () => {\n const newMessageIndex =\n messagesAmountBeforeSaving > 0\n ? messagesAmountBeforeSaving - 1\n : messagesAmountBeforeSaving;\n\n // sending the approximate index of newMessage\n callback(newMessageIndex);\n });\n };\n\n render() {\n const { laymanMode } = this.props.context;\n const isUserOnline = this.props.isUserOnline;\n\n const roomUsers = this.roomUsers();\n const roomBasicInformation = this.props.context.roomBasicInformation(this.props.room);\n\n const hideTitle = this.hideTitle(laymanMode);\n\n const firstTyperInfo = Object.values(this.state.typers)[0];\n const typerCount = Object.keys(this.state.typers).length;\n\n const messageInput = (\n \n {!hideTitle && (\n
\n\n {!this.state.isFetchingRoomUsers && this.props.context.isAlien && (\n \n
\n )}\n \n
\n \n
\n {this.props.room.title}
\n \n {isUserOnline ? I18n.t('chat.online') : I18n.t('chat.offline')}\n \n \n {(this.state.quotedMessages.length > 0 || this.state.enableArrowDownButton) && (\n \n {this.state.quotedMessages.length > 0 && this.state.isLoading && (\n 0\n ? this.state.quotedMessages\n : this.state.messages\n }\n tenant={this.props.context.tenant}\n roomUsers={this.state.roomUsersHash}\n fetchMoreHistory={this.fetchMoreHistory}\n currentUserId={this.props.context.currentUserId}\n replyHandler={this.replyHandler}\n focusToQuotedMessage={this.focusToQuotedMessage}\n disableFocusingQuotedMessage={this.disableFocusingQuotedMessage}\n sendChatMessage={this.sendChatMessage}\n />\n ) : (\n
\n )}\n \n
\n )}\n {this.state.isLoadingFirstTime || this.state.isFetchingRoomUsers ? (\n \n
\n ) : (\n \n
\n )}\n {typerCount > 0 && (\n \n
\n )}\n \n \n \n
\n )}\n\n {!this.state.isFetchingRoomUsers && !this.props.context.isAlien && (\n {messageInput}
\n \n {messageInput}
\n )}\n \n );\n }\n}\n\nActiveRoom.defaultProps = {\n currentUserId: null,\n toggleChat: () => {},\n onRoomOpen: () => {},\n};\n\nActiveRoom.propTypes = {\n context: PropTypes.shape().isRequired,\n isUserOnline: PropTypes.bool.isRequired,\n currentUserId: PropTypes.number,\n room: PropTypes.shape().isRequired,\n toggleChat: PropTypes.func,\n onRoomOpen: PropTypes.func,\n};\n\nconst RoomWithContext = props => (\n \n
\n );\n};\n\nNotifications.propTypes = {\n closeToast: PropTypes.func.isRequired,\n context: PropTypes.shape().isRequired,\n message: PropTypes.shape().isRequired,\n room: PropTypes.shape().isRequired,\n markMessageAsRead: PropTypes.func.isRequired,\n onReply: PropTypes.func.isRequired,\n};\n\nconst NotificationsWithContext = props => (\n {placeholder}
\n \n
\n \n
\n \n
\n \n
\n {sender.name}
\n \n
\n \n {!context.isAlien && (\n \n {I18n.t('chat.mark_as_read')}\n \n )}\n\n \n {I18n.t('chat.reply')}\n \n
\n Something went wrong.
;\n }\n return this.props.children;\n }\n}\n\nRootErrorBoundary.propTypes = {\n children: PropTypes.node.isRequired,\n};\n\nexport default RootErrorBoundary;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport App from './App';\nimport RootErrorBoundry from './RootErrorBoundary';\n\nconst Chat = props => (\n\n {fileUploadPreviewModalTitle && (\n \n {fileUploadPreviewModalTitle}\n \n )}\n
\n );\n\n const fileUploadPreviewContent = (\n \n
\n );\n\n return (\n \n \n 
\n \n
\n {fileName}
\n \n );\n }\n\n if (fileName) {\n return {fileName}
;\n }\n\n if (errorMsg) {\n return {errorMsg}
;\n }\n\n return (\n \n {I18n.t('admin.shared.action.no_file')}\n
\n );\n };\n\n const fileLabel = getFileLabel();\n const hasFileData = showFileName && fileName;\n\n return (\n \n {maximumNumberOfCardsAdded ? (\n \n {content}\n \n ) : (\n content\n )}\n
\n );\n};\nAddNewCreditCardPanel.defaultProps = {\n currentTab: null,\n};\n\nAddNewCreditCardPanel.propTypes = {\n maximumNumberOfCardsAdded: PropTypes.bool.isRequired,\n triggerResetCardAddressForm: PropTypes.bool.isRequired,\n setTriggerResetCardAddressForm: PropTypes.func.isRequired,\n resetCreditCardBillingAddressForm: PropTypes.func.isRequired,\n setQuery: PropTypes.func.isRequired,\n currentTab: PropTypes.number,\n};\n\nexport default withQueryParamsProvider(AddNewCreditCardPanel);\n","const customStyles = {\n base: {\n background: '#fff',\n border: '1px solid #dbe2f1',\n 'border-radius': '3px',\n 'box-shadow': '0 1px 3px rgb(75 115 167 / 16%)',\n 'box-sizing': 'border-box',\n color: '#182146',\n 'font-size': '14px',\n height: '35px',\n padding: '10px 12px',\n width: '100%',\n 'margin-bottom': '20px',\n },\n base_select: {\n border: '1px solid #dbe2f1',\n 'border-radius': '3px',\n 'box-shadow': '0 1px 3px rgb(75 115 167 / 16%)',\n 'box-sizing': 'border-box',\n color: '#182146',\n 'font-size': '14px',\n height: '35px',\n padding: '8px 15px',\n width: '100%',\n 'margin-bottom': '20px',\n },\n submit_button: {\n 'align-items': 'center',\n background: '#c44a47',\n 'border-radius': '3px',\n border: '1px solid #e2e8f1',\n 'box-sizing': 'border-box',\n color: '#fff',\n cursor: 'pointer',\n display: 'inline-flex',\n 'font-family': 'Roboto,sans-serif',\n 'font-size': '14px',\n 'font-weight': '400',\n 'justify-content': 'center',\n 'line-height': '18px',\n padding: '6px 12px',\n 'text-align': 'center',\n 'text-decoration': 'none',\n 'white-space': 'nowrap',\n },\n credit_card_form__row: {\n 'align-items': 'center',\n 'justify-content': 'space-between',\n display: 'flex',\n },\n credit_card_form__field_left: {\n 'padding-right': '6px',\n },\n credit_card_form__field_right: {\n 'padding-left': '6px',\n },\n three_ds_iframe: {\n width: '350px',\n height: '500px',\n 'border-radius': '3px',\n border: '1px solid #E2E8F1',\n margin: '6px auto auto',\n },\n invalid: {\n 'border-color': '#ff5555',\n 'margin-top': '6px',\n },\n three_ds_container: {\n display: 'block',\n },\n};\n\nexport default customStyles;\n","/* global I18n */\nimport React from 'react';\nimport Alert from 'sharedWebpack/Alert';\nimport { CheckBox, PhoneNumber } from '@wtag/react-comp-lib';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport httpV3Client from 'agentHTTPV3Client';\nimport routes from 'agentRoutes';\nimport Input from '@wtag/rcl-input';\nimport Icon from '@wtag/rcl-icon';\nimport Radio from '@wtag/rcl-radio';\nimport Button from '@wtag/rcl-button';\nimport ContentLoaderPlaceholder from '@wtag/rcl-content-loader-placeholder';\nimport ProductIcon from 'sharedWebpack/ProductIcon';\nimport fetchPhoneCountryCodes from 'sharedWebpack/fetchPhoneCountryCodes';\nimport paymentMethodName from '../../IBE/Payment/helpers/paymentMethodName';\nimport FormattedAmount from '../../Amount';\nimport CountrySelectorContainer from '../../IBE/components/CountrySelector';\nimport reduxFormShape from '../../IBE/Payment/shapes/reduxForm';\nimport { isChannelPresent } from '../../IBE/lib/validations/commonBookingValidations';\nimport { NEW_TOKEN_KEY } from '../helpers/authenticationButtonLabelOptions';\nimport customStyles from './customStyles';\nimport { TYPE_SEAT } from '../../helpers/itemTypes';\nimport findLabelValue from '../../IBE/helpers/findLabelValue';\nimport './style.scss';\n\nclass WellDevBookingComponent extends React.Component {\n constructor(props, context) {\n super(props, context);\n this.state = {\n billingAddress: null,\n ccvError: false,\n validationError: false,\n cardTypeValidationError: false,\n challengeLoading: false,\n isEmptyFieldSelected: false,\n isTravellerAddressSelected: true,\n isAgencyAddressSelected: false,\n isTravellerChecked: true,\n tenantSetting: null,\n error: null,\n phoneCountryCodes: [],\n };\n }\n\n componentDidMount() {\n this.addOwnersBillingAddressAsBillingAddress();\n this.getPhoneCountryCodes();\n }\n\n componentDidUpdate(prevProps) {\n const propChanged =\n this.props.ownersBillingAddress.city !== prevProps.ownersBillingAddress.city;\n const addressFormGotReset =\n this.props.ownersBillingAddress.city &&\n !this.props.fields.cardholderAddress.city.value &&\n this.state.isTravellerAddressSelected &&\n !this.state.isAgencyAddressSelected &&\n !this.state.isEmptyFieldSelected;\n\n if (propChanged || addressFormGotReset) {\n this.addOwnersBillingAddressAsBillingAddress();\n }\n }\n\n onSubmit = values => {\n if (this.props.valid) {\n this.setState({\n billingAddress: values.cardholderAddress,\n isEmptyFieldSelected: false,\n isAgencyAddressSelected: false,\n });\n }\n };\n\n getPhoneCountryCodes = async () => {\n const data = await fetchPhoneCountryCodes();\n\n this.setState({ phoneCountryCodes: data });\n };\n\n setItemProperties = (item, typeKey, nameKey, priceKey, currencyKey) => ({\n currentItemType: item[typeKey],\n currentItemName: item[nameKey],\n currentItemPrice: item[priceKey],\n currentItemCurrency: item[currencyKey],\n });\n\n addOwnersBillingAddressAsBillingAddress = () => {\n this.handleAddresses(\n this.props.ownersBillingAddress.city,\n this.props.ownersBillingAddress.street,\n this.props.ownersBillingAddress.state,\n this.props.ownersBillingAddress.country,\n this.props.ownersBillingAddress.zip,\n this.props.ownersBillingAddress.email,\n this.props.ownersBillingAddress.phoneCountryCode,\n this.props.ownersBillingAddress.phoneNumber,\n );\n };\n\n resetBillingAddress = () => {\n this.handleAddresses('', '', '', '', '', '', '', '');\n };\n\n fetchTenantSettings = async () => {\n try {\n const { data } = await httpV3Client.get(routes.api.settings());\n this.setState({ tenantSetting: data }, () => {\n const tenantSetting = this.state.tenantSetting;\n this.handleAddresses(\n tenantSetting.city,\n tenantSetting.street,\n tenantSetting.state,\n tenantSetting.countryCode,\n tenantSetting.zipCode,\n tenantSetting.email,\n tenantSetting.phoneCountryCode,\n tenantSetting.phone,\n );\n });\n } catch ({ response }) {\n this.setState({\n error: response.data.error,\n });\n }\n };\n\n discardForm = () => {\n this.setState({\n billingAddress: null,\n ccvError: false,\n validationError: false,\n cardTypeValidationError: false,\n });\n };\n\n updateCcvErrorStatus = status => {\n this.setState({\n ccvError: status,\n });\n };\n\n updateValidationErrorStatus = status => {\n this.setState({\n validationError: status,\n });\n };\n\n saveCreditCardInBackendAndSetStatus = (data, callbackParams) => {\n this.updateCcvErrorStatus(false);\n this.updateValidationErrorStatus(false);\n this.props\n .saveCreditCardInBackend(\n this.props.cartId,\n data,\n this.state.billingAddress,\n callbackParams,\n this.props.setCardDataAvailableByToken,\n )\n .then(() => {\n this.props.toggleModal();\n });\n };\n\n validateCardType = data => {\n if (this.props.currentTab === 0) {\n return this.props.commonCreditCardTypes.includes(data.type);\n }\n return this.props.availableCreditCardTypes.includes(data.type);\n };\n\n creditCardTokenHandler = data => {\n const callbackParams = this.props.callbackParams || this.context.callbackParams;\n\n if (data && data.status === 'token.create.successful') {\n if (\n !isChannelPresent('auto_europe', this.props.itemChannels) ||\n data.fullname.toLowerCase() === this.props.fullName.toLowerCase()\n ) {\n if (this.props.forPostBooking) {\n this.saveCreditCardInBackendAndSetStatus(data, callbackParams);\n } else if (this.validateCardType(data)) {\n this.setState({ cardTypeValidationError: false });\n this.saveCreditCardInBackendAndSetStatus(data, callbackParams);\n } else {\n this.setState({ cardTypeValidationError: true });\n }\n } else {\n this.updateValidationErrorStatus(true);\n }\n } else if (data && data.status === 'token.create.failed') {\n this.updateCcvErrorStatus(true);\n }\n };\n\n threeDSAuthenticationStatusHandler = data => {\n if (data.threeDsAuthenticationStatus === 'threeds2.authentication.initiated') {\n this.setState({ challengeLoading: true });\n } else if (data.threeDsAuthenticationStatus === 'threeds2.authentication.challenge_loaded') {\n this.setState({ challengeLoading: false });\n } else if (data.threeDsAuthenticationStatus === 'threeds2.authentication.successful') {\n this.props.threeDsStatusCallback(this.props.ccToken, data.encodedRequest, true);\n } else if (data.threeDsAuthenticationStatus === 'threeds2.authentication.unsuccessful') {\n this.props.threeDsStatusCallback(this.props.ccToken, data.encodedRequest, false);\n }\n };\n\n handleAddresses = (city, street, state, country, zip, email, phoneCountryCode, phoneNumber) => {\n this.props.fields.cardholderAddress.city.onChange({\n value: city || '',\n });\n this.props.fields.cardholderAddress.street.onChange({\n value: street || '',\n });\n this.props.fields.cardholderAddress.state.onChange({\n value: state || '',\n });\n this.props.fields.cardholderAddress.country.onChange({\n value: country || '',\n });\n this.props.fields.cardholderAddress.zip.onChange({\n value: zip || '',\n });\n this.props.fields.cardholderAddress.email.onChange({\n value: email || '',\n });\n this.props.fields.cardholderAddress.phoneCountryCode.onChange({\n value: phoneCountryCode || '',\n });\n this.props.fields.cardholderAddress.phoneNumber.onChange({\n value: phoneNumber || '',\n });\n };\n\n findItem = (items, authReq) => items.find(item => item.encodedPaymentRequestPayload === authReq);\n\n render() {\n const WellDevBooking = window.WellDevCreditCardActions;\n let content;\n let maskedNumber;\n let cardType;\n let totalAuthCount;\n let currentAuthIndex;\n let itemProperties = {};\n let cardDetails;\n const withCreditCardToken = !!this.props.ccToken;\n const laymanMode = this.props.laymanMode === true || this.context.laymanMode === true;\n const ccvURL = this.props.ccvURL || this.context.ccvURL;\n const ccvPublicToken = this.props.ccvPublicToken || this.context.ccvPublicToken;\n const tenantIdentifier = this.props.tenantIdentifier || this.context.tenantIdentifier;\n const {\n fields: {\n cardholderAddress: {\n city,\n country,\n street,\n state,\n zip,\n email,\n phoneCountryCode,\n phoneNumber,\n },\n },\n submitting,\n handleSubmit,\n touched,\n } = this.props;\n\n if (withCreditCardToken) {\n cardDetails = this.props.allCreditCards.find(card => card.token === this.props.ccToken);\n }\n if (\n withCreditCardToken &&\n cardDetails &&\n this.props.bookingRequestsEncoded &&\n this.props.toBeAuthenticatedReq\n ) {\n maskedNumber = cardDetails.maskedNumber;\n cardType = cardDetails.cardType;\n totalAuthCount = this.props.bookingRequestsEncoded.length;\n const currentAuthReq = this.props.toBeAuthenticatedReq;\n currentAuthIndex = this.props.bookingRequestsEncoded.indexOf(currentAuthReq) + 1;\n const { cartItems, orderItems, postBookingContent } = this.props;\n\n if (cartItems && cartItems.length > 0) {\n const currentItem = this.findItem(cartItems, currentAuthReq);\n\n if (currentItem) {\n itemProperties = this.setItemProperties(\n currentItem,\n 'journeyElementType',\n 'itemTitle',\n 'grossTotalIncludingSubItems',\n 'currency',\n );\n }\n } else if (orderItems && orderItems.length > 0) {\n const currentItem = this.findItem(orderItems, currentAuthReq);\n\n if (currentItem) {\n itemProperties = this.setItemProperties(\n currentItem,\n 'journeyElementType',\n 'title',\n 'grossPriceWithOpenSubItems',\n 'currency',\n );\n }\n } else if (postBookingContent && postBookingContent.items.length > 0) {\n const currentItem = this.findItem(postBookingContent.items, currentAuthReq);\n\n if (currentItem) {\n itemProperties = this.setItemProperties(\n { type: TYPE_SEAT, ...currentItem },\n 'type',\n 'title',\n 'totalPrice',\n 'currency',\n );\n }\n }\n }\n\n if (WellDevBooking == null) {\n content = (\n \n
\n );\n } else if (this.state.billingAddress || withCreditCardToken) {\n const header = withCreditCardToken\n ? I18n.t('ibe.payment.credit_card.auth_step')\n : I18n.t('ibe.payment.credit_card.step_2');\n let token;\n if (withCreditCardToken) {\n token = this.props.ccToken;\n } else {\n token = NEW_TOKEN_KEY;\n }\n if (header !== this.props.sidePanelTitle) {\n this.props.setSidePanelTitleByToken(prevState => {\n const newState = Object.assign({}, prevState);\n newState[token] = header;\n\n return newState;\n });\n }\n\n const getAlertText = () => {\n if (this.state.cardTypeValidationError) {\n return I18n.t('ibe.payment.credit_card.card_not_supported');\n } else if (this.state.validationError) {\n return I18n.t('components.ibe.car.validations.card_holder_name');\n }\n\n return I18n.t('ibe.payment.credit_card.error');\n };\n\n content = (\n {I18n.t('components.credit_card.error')}
\n\n \n {getAlertText()}\n \n {withCreditCardToken ? (\n \n {this.state.challengeLoading && (\n
\n \n \n \n )}\n
\n ) : (\n \n {I18n.t('ibe.payment.credit_card.auth_sub_header')}\n
\n \n
\n {this.props.bookingRequestsEncoded && (\n \n
\n {maskedNumber}\n \n {I18n.t('ibe.payment.credit_card.auth_info', {\n item_count: this.props.bookingRequestsEncoded.length,\n })}\n
\n \n {I18n.t('ibe.payment.credit_card.auth_challenge_header', {\n index: currentAuthIndex,\n count: totalAuthCount,\n })}\n
\n \n
\n \n
\n \n {I18n.t('ibe.payment.credit_card.item_name')}\n
\n \n
\n \n {I18n.t('ibe.payment.credit_card.price')}\n
\n \n {I18n.t('ibe.payment.credit_card.card_info')}\n
\n )}\n \n
\n )}\n \n \n {\n this.setState(\n {\n isTravellerAddressSelected: !this.state.isTravellerAddressSelected,\n },\n () => {\n if (this.state.isTravellerAddressSelected) {\n this.setState({\n isAgencyAddressSelected: false,\n isEmptyFieldSelected: false,\n });\n this.addOwnersBillingAddressAsBillingAddress();\n }\n },\n );\n }}\n label={I18n.t('ibe.payment.credit_card.address.traveller', {\n traveller: this.props.fullName,\n })}\n />\n
\n \n {\n this.setState(\n {\n isAgencyAddressSelected: !this.state.isAgencyAddressSelected,\n },\n () => {\n if (this.state.isAgencyAddressSelected) {\n this.setState({\n isTravellerAddressSelected: false,\n isEmptyFieldSelected: false,\n });\n this.fetchTenantSettings();\n }\n },\n );\n }}\n label={I18n.t('ibe.payment.credit_card.address.travel_agency')}\n />\n
\n \n {\n this.setState(\n {\n isEmptyFieldSelected: !this.state.isEmptyFieldSelected,\n },\n () => {\n if (this.state.isEmptyFieldSelected) {\n this.setState({\n isTravellerAddressSelected: false,\n isAgencyAddressSelected: false,\n });\n this.resetBillingAddress();\n }\n },\n );\n }}\n label={I18n.t('ibe.payment.credit_card.address.new_address')}\n />\n
\n \n {\n this.setState(\n {\n isTravellerChecked: !this.state.isTravellerChecked,\n isEmptyFieldSelected: !this.state.isEmptyFieldSelected,\n },\n () => {\n if (this.state.isTravellerChecked) {\n this.addOwnersBillingAddressAsBillingAddress();\n } else {\n this.resetBillingAddress();\n }\n },\n );\n }}\n size=\"medium\"\n />\n
\n );\n\n content = (\n \n );\n }\n\n return {content}
;\n }\n}\n\nWellDevBookingComponent.defaultProps = {\n touched: false,\n};\n\nWellDevBookingComponent.propTypes = {\n ...reduxFormShape,\n saveCreditCardInBackend: PropTypes.func.isRequired,\n fields: PropTypes.shape().isRequired,\n ownersBillingAddress: PropTypes.shape({\n city: PropTypes.string,\n country: PropTypes.string,\n street: PropTypes.string,\n zip: PropTypes.string,\n state: PropTypes.string,\n email: PropTypes.string,\n phoneCountryCode: PropTypes.string,\n phoneNumber: PropTypes.string,\n }).isRequired,\n touched: PropTypes.bool,\n setCardDataAvailableByToken: PropTypes.func.isRequired,\n setShowCardAddedConfirmation: PropTypes.func.isRequired,\n};\n\nWellDevBookingComponent.contextTypes = {\n ccvPublicToken: PropTypes.string.isRequired,\n ccvURL: PropTypes.string.isRequired,\n tenantIdentifier: PropTypes.string.isRequired,\n callbackParams: PropTypes.shape().isRequired,\n laymanMode: PropTypes.bool,\n};\n\nexport default WellDevBookingComponent;\n","import React, { useRef, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport WellDevBookingComponent from './WellDevBookingComponent';\n\nconst WellDevBookingComponentWrapper = props => {\n const ref = useRef(null);\n\n useEffect(() => {\n const values = Object.values(props.values.cardholderAddress);\n const allValuesUndefined = values.every(value => value === undefined);\n if (allValuesUndefined) {\n ref.current.discardForm();\n }\n }, [props.values.cardholderAddress]);\n\n return \n {\n setIsFilterVisible(false);\n }}\n >\n \n
\n }\n size=\"small\"\n onClick={() => {\n setIsFilterVisible(previousIsVisibleState => !previousIsVisibleState);\n }}\n />\n \n \n );\n};\n\nDateFilterWrapper.defaultProps = {\n isVisible: false,\n selectedDateLabel: null,\n startDate: null,\n endDate: null,\n enablePastDates: true,\n enableDateRangeSelection: false,\n disableFutureDates: true,\n onChange: () => {},\n};\n\nDateFilterWrapper.propTypes = {\n isVisible: PropTypes.bool,\n selectedDateLabel: PropTypes.string,\n startDate: PropTypes.string,\n endDate: PropTypes.string,\n enablePastDates: PropTypes.bool,\n enableDateRangeSelection: PropTypes.bool,\n disableFutureDates: PropTypes.bool,\n onChange: PropTypes.func,\n};\n\nexport default DateFilterWrapper;\n","import DatePicker from '@wtag/rcl-date-picker';\nimport PropTypes from 'prop-types';\nimport React, { useState } from 'react';\nimport { v4 as uuidv4 } from 'uuid';\n\nconst DatePickerWithFocusedStateWrapper = props => {\n const { onFocusChange, error, ...otherProps } = props;\n const [isFocused, setIsFocused] = useState(false);\n\n const toggleFocusChange = value => {\n setIsFocused(value);\n onFocusChange(value);\n };\n\n const errorMessage = () => {\n if (!Array.isArray(error) || error.length < 2) {\n return {error};\n }\n\n return (\n - \n {error.map(item => (\n
- \n {item}\n \n ))}\n
\n \n \n
\n );\n};\n\nDocumentForm.defaultProps = {\n attachmentId: null,\n layman: false,\n fetchAction: () => {},\n};\n\nDocumentForm.propTypes = {\n performAssignedAction: PropTypes.func.isRequired,\n orderId: PropTypes.number.isRequired,\n attachmentId: PropTypes.number,\n attachmentTypes: PropTypes.arrayOf(PropTypes.string).isRequired,\n redirectUrl: PropTypes.string.isRequired,\n layman: PropTypes.bool,\n fetchAction: PropTypes.func,\n};\n\nexport default DocumentForm;\n","import React, { Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport TimeAgo from 'sharedWebpack/TimeAgo';\nimport Icon from '@wtag/rcl-icon';\nimport { Table, TableBody, TableData, TableHeader, TableHead, TableRow } from '@wtag/rcl-table';\nimport { I18nText, Link, EmphasisTag } from '@wtag/react-comp-lib';\nimport EmptyTableContent from 'sharedWebpack/EmptyTableContent';\nimport TablePlaceHolder from 'sharedWebpack/Placeholder/TablePlaceholder';\n\nconst DocumentsTable = ({ documents, layman, type, deleteAction, isLoading }) =>\n !isLoading && !documents.length ? (\n \n {attachmentId\n ? I18n.t('admin.components.attachments.update_document')\n : I18n.t('admin.components.attachments.create_new_document')}\n
\n \n {isLoading ? (\n
\n \n
\n ) : (\n \n
\n )}\n \n setTitle(value)}\n value={title}\n size=\"tiny\"\n required={true}\n error={error.title}\n touched={!!error.title}\n />\n
\n \n selectFile(value)}\n />\n
\n \n setDescription(value)}\n value={description}\n size=\"tiny\"\n />\n
\n \n
\n \n
\n \n setAttachmentType(selectedOption)}\n value={attachmentType}\n isClearable={false}\n required={true}\n />\n
\n \n {!layman && (\n setVisible(value => !value)}\n checked={visible}\n label={I18n.t('admin.components.attachments.visible_to_traveller')}\n />\n )}\n
\n \n {attachmentId ? (\n window.location.assign(redirectUrl)}\n label={I18n.t('admin.shared.action.cancel')}\n version=\"v2\"\n size=\"small\"\n />\n
\n \n
\n );\n }\n return form;\n };\n\n useEffect(() => {\n setInitialValues();\n }, [relatedInstance]);\n\n return (\n \n setEmailType(emailTypeSelected.value)}\n width=\"full\"\n value={{\n label: I18n.t(emailType, {\n scope: 'email_addresses.types',\n }),\n value: emailType,\n }}\n errorMsg={error.emailType}\n />\n
\n \n setEmail(value)}\n touched={!!error.email}\n error={error.email}\n required={true}\n />\n
\n \n setPrimary(event.target.checked)}\n />\n
\n\n \n
\n \n \n {editing ? (\n
\n {renderEditForm()}\n\n {showConfirmation && (\n \n {I18n.t('admin.components.organizations.edit.email_and_phone.email.edit')}\n
\n ) : (\n \n
\n )}\n {email}
\n \n {!editing && (\n \n \n )}\n
\n \n
\n );\n }\n return form;\n };\n\n useEffect(() => {\n setInitialValues();\n }, [relatedInstance]);\n\n return (\n \n
\n\n \n setNumberType(selectedNumberType.value)}\n width=\"full\"\n value={{\n label: I18n.t(numberType, {\n scope: 'phone_numbers.types',\n }),\n value: numberType,\n }}\n errorMsg={error.numberType}\n />\n
\n \n setNumber(inputParam)}\n onCountryChange={setSelectedCountry}\n inputValue={number}\n selectedCountry={selectedCountry}\n error={error.number}\n isInputTouched={error.number !== null}\n countryPlaceholder=\"(+41)\"\n isRequired={true}\n />\n
\n \n setPrimary(event.target.checked)}\n />\n
\n \n
\n \n \n {editing ? (\n
\n {renderEditForm()}\n\n {showConfirmation && (\n \n {I18n.t('admin.components.organizations.edit.email_and_phone.phone.edit')}\n
\n ) : (\n \n
\n )}\n {`+${countryCodeValue}${number}`}
\n \n {!editing && (\n \n \n )}\n
\n \n
\n \n
\n \n setEmailType(emailTypeSelected.value)}\n width=\"full\"\n value={\n emailType && {\n label: I18n.t(emailType, {\n scope: 'email_addresses.types',\n }),\n value: emailType,\n }\n }\n errorMsg={emailError.emailType}\n required={true}\n />\n
\n \n setEmail(value)}\n touched={!!emailError.email}\n error={emailError.email}\n required={true}\n />\n
\n \n setEmailPrimary(event.target.checked)}\n />\n
\n \n
\n \n
\n \n
\n \n setNumberType(selectedNumberType.value)}\n width=\"full\"\n value={\n numberType && {\n label: I18n.t(numberType, {\n scope: 'phone_numbers.types',\n }),\n value: numberType,\n }\n }\n errorMsg={numberError.numberType}\n required={true}\n />\n
\n \n \n {I18n.t(\n 'admin.components.organizations.edit.email_and_phone.phone.label.phone_number',\n )}\n \n }\n onChange={setNumber}\n onCountryChange={option => setCountryCode(option)}\n error={numberError.number}\n selectedCountry={countryCode}\n inputValue={number || ''}\n isInputTouched={numberError.number !== null}\n countryPlaceholder=\"(+41)\"\n />\n
\n \n setNumberPrimary(event.target.checked)}\n />\n
\n \n
\n \n \n {hasEmailAdresses &&\n emailAddresses.map(emailAddress => (\n \n \n )}\n\n {!hasEmailAdresses && !showEmailAddress && (\n \n ) : (\n
\n \n
\n {hasEmailAndPhoneNumber ? (\n \n
\n\n {showEmailAddress && !hasEmailAdresses && (\n \n {I18n.t('admin.components.organizations.edit.email_and_phone.email.header')}\n\n {hasEmailAndPhoneNumber && !showEmailAddress && (\n
\n \n
\n
\n \n
\n
\n \n {I18n.t('admin.components.organizations.edit.email_and_phone.email.add')}\n
\n \n
\n )}\n \n {I18n.t('admin.components.organizations.edit.email_and_phone.email.no_email')}\n
\n \n
\n )}\n \n \n {hasPhoneNumbers &&\n phoneNumbers.map(phoneNumber => (\n \n \n )}\n\n {!hasPhoneNumbers && !showNumberAddress && (\n \n ) : (\n
\n \n
\n {hasEmailAndPhoneNumber ? (\n \n
\n\n {showNumberAddress && !hasPhoneNumbers && (\n \n {I18n.t('admin.components.organizations.edit.email_and_phone.phone.header')}\n\n {hasEmailAndPhoneNumber && !showNumberAddress && (\n
\n \n
\n
\n \n
\n
\n \n {I18n.t('admin.components.organizations.edit.email_and_phone.phone.add')}\n
\n \n
\n )}\n \n {I18n.t('admin.components.organizations.edit.email_and_phone.phone.no_phone')}\n
\n \n
\n )}\n \n
\n );\n};\n\nEmergencyContactForm.defaultProps = {\n error: {},\n phoneCountryCode: '',\n number: '',\n lastName: '',\n firstName: '',\n};\n\nEmergencyContactForm.propTypes = {\n phoneCountryCode: PropTypes.string,\n number: PropTypes.string,\n lastName: PropTypes.string,\n firstName: PropTypes.string,\n setPhoneCountryCode: PropTypes.func.isRequired,\n setNumber: PropTypes.func.isRequired,\n setFirstName: PropTypes.func.isRequired,\n setLastName: PropTypes.func.isRequired,\n phoneCountryCodeOptions: PropTypes.arrayOf(\n PropTypes.shape({\n label: PropTypes.string,\n value: PropTypes.string,\n }),\n ).isRequired,\n error: PropTypes.shape({\n firstName: PropTypes.string,\n lastName: PropTypes.string,\n phoneCountryCodeOptions: PropTypes.string,\n number: PropTypes.string,\n }),\n};\n\nexport default EmergencyContactForm;\n","import React, { useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport httpClient from 'agentHTTPClient';\nimport routes from 'agentRoutes';\nimport { Link } from '@wtag/react-comp-lib';\nimport Icon from '@wtag/rcl-icon';\nimport Button from '@wtag/rcl-button';\nimport ConfirmationModal from 'sharedWebpack/ConfirmationModal';\nimport EmergencyContactForm from './EmergencyContactForm';\n\nconst EmergencyContact = props => {\n const {\n personId,\n emergencyContact,\n phoneCountryCodeOptions,\n fetchEmergencyContacts,\n layman,\n } = props;\n\n const [editing, setEditing] = useState(false);\n const [error, setError] = useState({});\n\n const [phoneCountryCode, setPhoneCountryCode] = useState(null);\n const [number, setNumber] = useState(null);\n const [firstName, setFirstName] = useState(null);\n const [lastName, setLastName] = useState(null);\n const [isShowConfirmation, setIsShowConfirmation] = useState(false);\n\n let emergencyContactsRoutes;\n\n const toggleShowConfirmation = () => {\n setIsShowConfirmation(prev => !prev);\n };\n\n const setRoutes = emergencyContactId => {\n if (layman) {\n emergencyContactsRoutes = {\n update: routes.public.emergencyContacts.update({ id: emergencyContactId }),\n delete: routes.public.emergencyContacts.delete({ id: emergencyContactId }),\n };\n } else {\n emergencyContactsRoutes = {\n update: routes.admin.people.emergencyContacts.update({ personId, emergencyContactId }),\n delete: routes.admin.people.emergencyContacts.delete({ personId, emergencyContactId }),\n };\n }\n };\n\n const updateEmergencyContacts = async emergencyContactId => {\n setRoutes(emergencyContactId);\n const emergencyContactParams = {\n phone_country_code: phoneCountryCode,\n number,\n first_name: firstName,\n last_name: lastName,\n };\n const { data } = await httpClient.patch(emergencyContactsRoutes.update, {\n emergency_contact: emergencyContactParams,\n });\n\n if (data.error === null) {\n fetchEmergencyContacts();\n setEditing(false);\n }\n };\n\n const onUpdateEmergencyContacts = emergencyContactId => {\n updateEmergencyContacts(emergencyContactId).catch(({ response }) => {\n if (response.status === 422) {\n setError(response.data.error);\n }\n });\n };\n\n const deleteEmergencyContact = async emergencyContactId => {\n setRoutes(emergencyContactId);\n\n const { data } = await httpClient.delete(emergencyContactsRoutes.delete);\n if (data.error === null) {\n fetchEmergencyContacts();\n setEditing(false);\n }\n };\n\n const onDeleteEmergencyContact = emergencyContactId => {\n deleteEmergencyContact(emergencyContactId).catch(({ response }) => {\n if (response.status === 422) {\n setError(response.data.error);\n }\n });\n toggleShowConfirmation();\n };\n\n useEffect(() => {\n setPhoneCountryCode(emergencyContact.phoneCountryCode);\n setNumber(emergencyContact.number);\n setFirstName(emergencyContact.firstName);\n setLastName(emergencyContact.lastName);\n }, [emergencyContact]);\n\n useEffect(() => {\n setError({});\n }, [editing]);\n\n return (\n \n
\n \n setFirstName(value)}\n required={true}\n />\n
\n \n setLastName(value)}\n required={true}\n />\n
\n \n \n {I18n.t(\n 'admin.components.organizations.edit.email_and_phone.phone.label.phone_number',\n )}\n \n }\n onChange={input => setNumber(input)}\n onCountryChange={input => setPhoneCountryCode(input.value)}\n inputValue={number || ''}\n selectedCountry={\n (phoneCountryCode &&\n countryCodeOptions.find(countryCode => countryCode.value === phoneCountryCode)) ||\n null\n }\n error={error.number}\n isInputTouched={error.number !== null}\n countryPlaceholder=\"(+41)\"\n />\n
\n \n {editing ? (\n \n \n ) : (\n \n \n )}\n\n {isShowConfirmation && (\n onDeleteEmergencyContact(emergencyContact.id)}\n onReject={toggleShowConfirmation}\n />\n )}\n
\n );\n};\n\nEmergencyContact.defaultProps = {\n emergencyContact: {},\n layman: false,\n};\n\nEmergencyContact.propTypes = {\n personId: PropTypes.number.isRequired,\n emergencyContact: PropTypes.shape({\n id: PropTypes.number,\n phoneCountryCode: PropTypes.string,\n number: PropTypes.string,\n firstName: PropTypes.bool,\n lastName: PropTypes.string,\n }),\n phoneCountryCodeOptions: PropTypes.arrayOf(\n PropTypes.shape({\n label: PropTypes.string,\n value: PropTypes.string,\n }),\n ).isRequired,\n fetchEmergencyContacts: PropTypes.func.isRequired,\n layman: PropTypes.bool,\n};\n\nexport default EmergencyContact;\n","import React, { useState, useEffect, Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport Button from '@wtag/rcl-button';\nimport Icon from '@wtag/rcl-icon';\nimport httpClient from 'agentHTTPClient';\nimport routes from 'agentRoutes';\nimport { hot } from 'react-hot-loader';\nimport ContentLoaderPlaceholder from '@wtag/rcl-content-loader-placeholder';\nimport EmergencyContactForm from './EmergencyContactForm';\nimport EmergencyContact from './EmergencyContact';\n\nconst EmergencyContactsSection = props => {\n const { personId, phoneCountryCodeOptions, layman } = props;\n\n const [error, setError] = useState({});\n const [phoneCountryCode, setPhoneCountryCode] = useState(null);\n const [number, setNumber] = useState(null);\n const [firstName, setFirstName] = useState(null);\n const [lastName, setLastName] = useState(null);\n const [emergencyContacts, setEmergencyContacts] = useState([]);\n const [isLoading, setIsLoading] = useState(true);\n const [isShowForm, setIsShowForm] = useState(false);\n const hasAddress = emergencyContacts.length > 0;\n\n let emergencyContactsRoutes;\n if (layman) {\n emergencyContactsRoutes = {\n fetch: routes.public.emergencyContacts.list({}),\n create: routes.public.emergencyContacts.create({}),\n };\n } else {\n emergencyContactsRoutes = {\n fetch: routes.admin.people.emergencyContacts.list({ personId }),\n create: routes.admin.people.emergencyContacts.create({ personId }),\n };\n }\n\n const fetchEmergencyContacts = async () => {\n setIsLoading(true);\n const { data } = await httpClient.get(emergencyContactsRoutes.fetch);\n setEmergencyContacts(data.emergencyContacts);\n setIsLoading(false);\n };\n\n const createEmergencyContact = async () => {\n const emergencyContactParams = {\n phone_country_code: phoneCountryCode,\n number,\n first_name: firstName,\n last_name: lastName,\n };\n\n const { data } = await httpClient.post(emergencyContactsRoutes.create, {\n emergency_contact: emergencyContactParams,\n });\n\n if (data.error === null) {\n setPhoneCountryCode(null);\n setNumber('');\n setFirstName('');\n setLastName('');\n fetchEmergencyContacts();\n setError({});\n }\n };\n\n const onCreateEmergencyContacts = () => {\n createEmergencyContact()\n .then(() => {\n setIsShowForm(false);\n })\n .catch(({ response }) => {\n if (response.status === 422) {\n setError(response.data.error);\n }\n });\n };\n\n const emergencyForm = () => (\n \n {I18n.t('admin.components.travellers.edit.emergency_contacts.update')}\n
\n \n setEditing(false)}\n />\n onUpdateEmergencyContacts(emergencyContact.id)}\n />\n
\n \n
\n \n
\n\n \n
\n \n {`${emergencyContact.firstName} ${emergencyContact.lastName}`}\n
\n\n {`+${emergencyContact.phoneCountryCode}${emergencyContact.number}`}\n
\n \n
\n \n \n setEditing(true)}\n >\n \n \n \n \n
\n \n {I18n.t('admin.components.travellers.edit.emergency_contacts.add')}\n
\n )}\n \n setIsShowForm(false)}\n />\n
\n \n
\n );\n};\n\nEmergencyContactsSection.defaultProps = {\n layman: false,\n};\n\nEmergencyContactsSection.propTypes = {\n personId: PropTypes.number.isRequired,\n phoneCountryCodeOptions: PropTypes.arrayOf(\n PropTypes.shape({\n label: PropTypes.string,\n value: PropTypes.string,\n }),\n ).isRequired,\n layman: PropTypes.bool,\n};\n\nexport default hot(module)(EmergencyContactsSection);\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport Icon from '@wtag/rcl-icon';\nimport { Link } from '@wtag/react-comp-lib';\n\nimport './styles.scss';\n\nconst EmptyTableContent = props => {\n const { iconSize, iconName, iconColor, emptyText, fullHeight, showIconBackGround, createNewUrl } =\n props;\n\n const icon = (\n \n {I18n.t('admin.components.travellers.edit.tabs.emergency_contacts')}\n\n {!isShowForm && !isLoading && (\n setIsShowForm(true)}\n />\n )}\n
\n\n {isShowForm && !hasAddress && emergencyForm()}\n\n \n {isLoading ? (\n \n {emergencyContacts.map(emergencyContact => (\n \n )}\n\n {isShowForm && hasAddress && (\n \n \n )}\n\n {!hasAddress && !isLoading && !isShowForm && (\n
\n \n
\n ) : (\n \n
\n
\n {emergencyForm()}\n \n
\n
\n )}\n \n {I18n.t('admin.components.orders.left_panel.emergency_contacts.no_contacts')}\n
\n \n {createNewUrl ? (\n \n {icon}\n \n ) : (\n icon\n )}\n
\n {emptyText || I18n.t('admin.shared.no_result')}
\n \n );\n};\n\nEmptyTableContent.defaultProps = {\n iconSize: 'medium',\n iconName: 'add',\n iconColor: 'tertiary',\n emptyText: null,\n fullHeight: false,\n showIconBackGround: true,\n createNewUrl: null,\n};\n\nEmptyTableContent.propTypes = {\n iconSize: PropTypes.string,\n iconName: PropTypes.string,\n iconColor: PropTypes.string,\n emptyText: PropTypes.string,\n fullHeight: PropTypes.bool,\n showIconBackGround: PropTypes.bool,\n createNewUrl: PropTypes.string,\n};\nexport default EmptyTableContent;\n","import PropTypes from 'prop-types';\nimport React from 'react';\nimport Alert from 'sharedWebpack/Alert';\n\nconst FlashMessage = ({ text, status }) => (\n \n \n
\n );\n};\n\nFlexiblePaymentTag.defaultProps = {\n matrixCard: null,\n};\n\nFlexiblePaymentTag.propTypes = {\n matrixCard: PropTypes.string,\n};\n\nexport default FlexiblePaymentTag;\n","export const humanReadableDuration = durationInMinutes => {\n const hours = Math.floor(durationInMinutes / 60);\n const minutes = durationInMinutes % 60;\n\n if (hours > 24) {\n const days = Math.floor(hours / 24);\n const remainingHours = hours % 24;\n const daysRemainingString =\n days < 2 ? I18n.t('duration.long.days.one') : I18n.t('duration.long.days.other');\n\n if (remainingHours) {\n return `${days} ${daysRemainingString} ${remainingHours}h`;\n }\n\n return `${days} ${daysRemainingString}`;\n }\n\n if (hours && minutes) {\n return `${hours}h ${minutes}m`;\n }\n if (hours && !minutes) {\n return `${hours}h`;\n }\n return `${minutes}m`;\n};\n\nexport default humanReadableDuration;\n","import React, { Fragment, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { I18nText } from '@wtag/react-comp-lib';\nimport ConfirmationModal from 'sharedWebpack/ConfirmationModal';\nimport IconButton from '@wtag/rcl-icon-button';\nimport Icon from '@wtag/rcl-icon';\n\nconst RemoveItemButton = ({ isCartLocked, itemId, onConfirm, frozen, className }) => {\n const [isButtonDisabled, setIsButtonDisabled] = useState(false);\n const [isModalOpen, setIsModalOpen] = useState(false);\n\n const openModal = () => {\n setIsModalOpen(true);\n };\n\n const closeModal = () => {\n setIsModalOpen(false);\n };\n\n const handleOnConfirm = () => {\n setIsButtonDisabled(true);\n onConfirm(itemId);\n closeModal();\n };\n\n const buttonDisabled = isCartLocked || frozen || isButtonDisabled;\n\n return (\n \n
\n )}\n {contentCopiedToClipboard && (\n \n
\n );\n};\n\nCarItemLabels.defaultProps = {\n journeyElement: null,\n item: {\n cancelPenalty: null,\n changePenalty: null,\n },\n itemDetails: { available: false },\n};\n\nCarItemLabels.contextTypes = {\n frozen: PropTypes.bool.isRequired,\n};\n\nCarItemLabels.propTypes = {\n isCartLocked: PropTypes.bool.isRequired,\n itemNo: PropTypes.number.isRequired,\n item: PropTypes.shape(itemShape),\n journeyElement: PropTypes.shape({\n name: PropTypes.string,\n vendorName: PropTypes.string,\n destinationCode: PropTypes.string,\n fareRulePresent: PropTypes.bool,\n id: PropTypes.number,\n originCode: PropTypes.string,\n refundable: PropTypes.bool,\n }),\n removeFromCart: PropTypes.func.isRequired,\n itemDetails: PropTypes.shape({\n instantTicket: PropTypes.bool.isRequired,\n }),\n flightServicesByResultId: PropTypes.shape({}).isRequired,\n travelers: PropTypes.arrayOf(PropTypes.shape()).isRequired,\n};\n\nexport default CarItemLabels;\n","/* eslint-disable react/require-default-props */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport Icon from '@wtag/rcl-icon';\nimport { Spinner } from '@wtag/react-comp-lib';\nimport Tooltip from '@wtag/rcl-tooltip';\nimport useViewMode from 'sharedWebpack/useViewMode';\nimport { DESKTOP_DEVICE } from '../../../old/libraries/responsiveHelpers';\nimport './styles.scss';\n\nconst Availability = props => {\n const isLargeScreen = useViewMode() === DESKTOP_DEVICE;\n\n switch (props.available) {\n case true:\n return \n
\n \n
\n \n
\n {pendingConfirmation && (\n \n
\n \n \n {I18n.t('components.ibe.cart.item', {\n number: itemNo,\n })}\n \n {!!removeFromCart && (\n
\n \n
\n )}\n \n {itemDetails?.instantTicket && (\n
\n \n
\n );\n }\n};\n\nAvailability.propTypes = {\n available: PropTypes.oneOf([true, false, null]),\n unavailableHint: PropTypes.node.isRequired,\n};\n\nexport default Availability;\n","import React, { Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { I18nText } from '@wtag/react-comp-lib';\nimport Amount from 'sharedWebpack/Amount';\nimport Availability from '../../components/Availability';\nimport ShowGrossTotalPrice from '../../../ShowGrossTotalPrice';\nimport './styles.scss';\n\nconst ItemPricing = props => {\n const { available, item, itemStatus, pendingConfirmation } = props;\n const { priceChanged, oldGrossTotal, grossTotal, currency } = item;\n\n let availability = available;\n if (itemStatus) {\n const { status } = itemStatus;\n availability = null;\n if (status === 'success' || status === 'failed' || status === 'pending') {\n availability = status === 'success' || status === 'pending';\n }\n }\n const showAvailabilityIcon = !pendingConfirmation;\n\n const availabilityIcon = showAvailabilityIcon && (\n \n
\n )}\n \n
\n \n }\n isModalVisible={this.state.isModalVisible}\n onOutsideClick={this.onModalClose}\n >\n \n
\n );\n};\n\nItemLabels.defaultProps = {\n journeyElement: null,\n itemStatus: null,\n showServices: true,\n item: {\n cancelPenalty: null,\n changePenalty: null,\n },\n travelerCount: {\n adults: [],\n children: [],\n infants: [],\n },\n};\n\nItemLabels.contextTypes = {\n allowBookingOfUnapprovedItems: PropTypes.bool.isRequired,\n laymanMode: PropTypes.bool.isRequired,\n callbackParams: PropTypes.shape().isRequired,\n offerOnly: PropTypes.bool.isRequired,\n travelerHasOrganization: PropTypes.bool.isRequired,\n frozen: PropTypes.bool.isRequired,\n};\n\nItemLabels.propTypes = {\n showServices: PropTypes.bool,\n itemStatus: PropTypes.shape({\n status: PropTypes.string.isRequired,\n }),\n services: PropTypes.shape({\n seatMaps: PropTypes.arrayOf(),\n }).isRequired,\n itemNo: PropTypes.number.isRequired,\n item: PropTypes.shape({\n id: PropTypes.number.isRequired,\n productId: PropTypes.number.isRequired,\n type: PropTypes.string.isRequired,\n formOfPayment: PropTypes.shape().isRequired,\n currency: PropTypes.string.isRequired,\n total: PropTypes.string.isRequired,\n available: PropTypes.bool,\n journeyElementType: PropTypes.string.isRequired,\n account: PropTypes.string.isRequired,\n channel: PropTypes.string.isRequired,\n outOfPolicy: PropTypes.bool.isRequired,\n approvalRequired: PropTypes.bool.isRequired,\n instantTicket: PropTypes.bool.isRequired,\n itemStatus: PropTypes.arrayOf(),\n bookingAttributes: PropTypes.shape({\n resultId: PropTypes.number.isRequired,\n productId: PropTypes.number.isRequired,\n }),\n cancelPenalty: PropTypes.shape({\n amount: PropTypes.number.isRequired,\n currency: PropTypes.number.isRequired,\n }),\n changePenalty: PropTypes.shape({\n amount: PropTypes.number.isRequired,\n currency: PropTypes.string.isRequired,\n }),\n }),\n journeyElement: PropTypes.shape({\n name: PropTypes.string,\n vendorName: PropTypes.string,\n destinationCode: PropTypes.string,\n fareRulePresent: PropTypes.bool,\n id: PropTypes.number,\n originCode: PropTypes.string,\n refundable: PropTypes.bool,\n trips: PropTypes.arrayOf(\n PropTypes.shape({\n originCode: PropTypes.string.isRequired,\n segments: PropTypes.arrayOf(\n PropTypes.shape({\n aircraftType: PropTypes.string.isRequired,\n destinationCode: PropTypes.string.isRequired,\n operatingCarrierCode: PropTypes.string.isRequired,\n operatingFlightNumber: PropTypes.string.isRequired,\n originCode: PropTypes.string.isRequired,\n }),\n ).isRequired,\n }),\n ).isRequired,\n }),\n staticProduct: staticProductShape.isRequired,\n flightServicesByResultId: PropTypes.shape({}).isRequired,\n flightResultDetailsById: PropTypes.arrayOf().isRequired,\n pendingConfirmation: PropTypes.bool.isRequired,\n travelerCount: PropTypes.shape({\n adults: PropTypes.arrayOf(PropTypes.shape({})),\n children: PropTypes.arrayOf(PropTypes.shape({})),\n infants: PropTypes.arrayOf(PropTypes.shape({})),\n }),\n shouldLockScroll: PropTypes.bool.isRequired,\n setShouldLockScroll: PropTypes.func.isRequired,\n travelers: PropTypes.arrayOf(\n PropTypes.shape({\n firstName: PropTypes.string,\n }),\n ).isRequired,\n};\n\nexport default ItemLabels;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { I18nText } from '@wtag/react-comp-lib';\nimport ConfirmationModal from 'sharedWebpack/ConfirmationModal';\nimport Button from '@wtag/rcl-button';\n\nclass RemoveFromCartButton extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n buttonDisabled: false,\n isModalOpen: false,\n };\n }\n\n onConfirm = () => {\n this.setState(prevState => ({\n ...prevState,\n buttonDisabled: true,\n }));\n this.props.onConfirm(this.props.itemId);\n };\n\n setModalOpen = () => {\n this.setState(prevState => ({\n ...prevState,\n isModalOpen: true,\n }));\n };\n setModalClose = () => {\n this.setState(prevState => ({\n ...prevState,\n isModalOpen: false,\n }));\n };\n\n render() {\n const buttonDisabled =\n this.props.isCartLocked || this.context.frozen || this.state.buttonDisabled;\n\n return (\n \n
\n \n
\n \n {itemWithNumber()} | {itemName(item.journeyElementType || item.type)}\n
\n {pendingConfirmation && (\n \n
\n )}\n {itemDetails && itemDetails.instantTicket && (\n \n
\n )}\n \n
\n \n
\n {showServices && item.journeyElementType === TYPE_FLIGHT && (\n \n {!context.laymanMode && !productId && identifier !== WELLTRAVEL && (\n
\n {item.type !== TYPE_STATIC_PRODUCT && (\n \n
\n )}\n \n {(!context.laymanMode || context.travelerHasOrganization) && item.outOfPolicy && (\n
\n \n {(!context.laymanMode || context.travelerHasOrganization) && item.approvalRequired && (\n
\n \n {item.changePenalty && (\n
\n )}\n \n {I18n.t('components.ibe.fare_basis_info.penalty.change_penalty')}:{' '}\n {penaltyMessage(item.changePenalty)}\n
\n )}\n {item.cancelPenalty && (\n \n {I18n.t('components.ibe.fare_basis_info.penalty.cancel_penalty')}:{' '}\n {penaltyMessage(item.cancelPenalty)}\n
\n )}\n \n
\n )}\n \n
\n \n {journeyElement && journeyElement.fareRulePresent && (\n
\n \n
\n {trips.length > 0 && (\n \n
\n )}\n \n
\n \n {journeyElement && journeyElement.refundable && (\n
\n \n {leftSide && (\n \n \n {item.search && item.search.identifier && !itemStatus && goToSearch}\n
\n {showConfirmButton && (\n {leftSide}
\n )}\n \n
\n )}\n \n
\n \n \n \n
\n);\n\nconst AirportsShape = PropTypes.shape({\n [PropTypes.string]: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n});\n\nconst TripShape = PropTypes.shape({\n origin: PropTypes.string,\n originCode: PropTypes.string,\n destinationCode: PropTypes.string,\n destination: PropTypes.string,\n});\n\nTripSummaryDetails.defaultProps = {\n text: null,\n};\n\nTripSummaryDetails.propTypes = {\n airports: AirportsShape.isRequired,\n trips: PropTypes.arrayOf(TripShape).isRequired,\n text: PropTypes.node,\n};\n\nexport default TripSummaryDetails;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport './styles.scss';\n\nconst CarDetails = ({ className, vendorName, location }) => (\n \n
\n {text && {text}}\n \n
\n);\n\nCarDetails.defaultProps = {\n className: null,\n};\n\nCarDetails.propTypes = {\n className: PropTypes.string,\n vendorName: PropTypes.string.isRequired,\n location: PropTypes.string.isRequired,\n};\n\nexport default CarDetails;\n","import React, { Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport { EmphasisTag, I18nText } from '@wtag/react-comp-lib';\nimport ProductIcon from 'sharedWebpack/ProductIcon';\nimport RemoveItemButton from './RemoveItemButton';\nimport FlightServicesFareRules from './flight/FlightServicesFareRules';\nimport BookingLabelWithHint from '../../SearchResult/flight/BookingLabelWithHint';\nimport { itemShape } from '../shapes';\nimport CopyButton from './CopyButton';\nimport { TYPE_FLIGHT } from '../../../helpers/itemTypes';\nimport './styles.scss';\n\nconst CartItemLabels = (props, context) => {\n const {\n isCartLocked,\n item,\n journeyElement,\n itemNo,\n removeFromCart,\n itemDetails,\n flightServicesByResultId,\n travelers,\n } = props;\n\n const {\n pendingConfirmation,\n journeyElementType,\n type,\n approvalRequired,\n id,\n bookingAttributes,\n } = item;\n const journeyType = journeyElementType || type;\n const disableCopyButton =\n journeyElementType === TYPE_FLIGHT && !(itemDetails && itemDetails.available);\n const showFareRules = journeyElement && journeyElement.fareRulePresent;\n const { instantTicket } = itemDetails || {};\n const { refundable } = journeyElement || {};\n const { resultId } = bookingAttributes;\n\n const handleRemoveItemFromCart = cartItemId => {\n removeFromCart(cartItemId);\n };\n\n return (\n {vendorName}
\n{location}
\n \n
\n );\n};\n\nCartItemLabels.defaultProps = {\n journeyElement: null,\n item: {\n cancelPenalty: null,\n changePenalty: null,\n },\n itemDetails: { available: false },\n flightServicesByResultId: null,\n travelers: null,\n};\n\nCartItemLabels.contextTypes = {\n frozen: PropTypes.bool.isRequired,\n};\n\nCartItemLabels.propTypes = {\n isCartLocked: PropTypes.bool.isRequired,\n itemNo: PropTypes.number.isRequired,\n item: PropTypes.shape(itemShape),\n journeyElement: PropTypes.shape({\n name: PropTypes.string,\n vendorName: PropTypes.string,\n destinationCode: PropTypes.string,\n fareRulePresent: PropTypes.bool,\n id: PropTypes.number,\n originCode: PropTypes.string,\n refundable: PropTypes.bool,\n }),\n removeFromCart: PropTypes.func.isRequired,\n itemDetails: PropTypes.shape({\n instantTicket: PropTypes.bool.isRequired,\n available: PropTypes.bool.isRequired,\n }),\n flightServicesByResultId: PropTypes.shape({}),\n travelers: PropTypes.arrayOf(PropTypes.shape({})),\n journeyElementType: PropTypes.string.isRequired,\n};\n\nexport default CartItemLabels;\n","import React, { Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport CartItemLabels from '../CartItemLabels';\nimport ItemPricing from '../ItemPricing';\nimport './styles.scss';\n\nconst HotelCartItemHeader = ({\n isCartLocked,\n item,\n itemNo,\n journeyElement,\n removeFromCart,\n itemDetails,\n status,\n}) => {\n const { journeyElementType, available, pendingConfirmation, type } = item;\n\n return (\n \n
\n \n
\n {pendingConfirmation && (\n \n
\n \n \n {I18n.t('components.ibe.cart.item', {\n number: String(itemNo),\n })}\n \n {!!removeFromCart && (\n
\n {showFareRules && (\n \n \n
\n )}\n \n {showFareRules && (\n \n \n {instantTicket && (\n \n
\n \n
\n \n
\n \n
\n );\n};\n\nHotelSummaryDetails.defaultProps = {\n street: '',\n city: '',\n countryCode: '',\n stars: '',\n itemDetails: {},\n};\n\nHotelSummaryDetails.propTypes = {\n itemTitle: PropTypes.string.isRequired,\n street: PropTypes.string,\n city: PropTypes.string,\n countryCode: PropTypes.string,\n stars: PropTypes.string,\n item: PropTypes.shape({\n itemTitle: PropTypes.string,\n type: PropTypes.string,\n journeyElementType: PropTypes.string,\n available: PropTypes.bool,\n pendingConfirmation: PropTypes.bool.isRequired,\n approvalRequired: PropTypes.bool.isRequired,\n }).isRequired,\n itemDetails: PropTypes.shape({\n instantTicket: PropTypes.bool.isRequired,\n }),\n journeyElement: PropTypes.shape({\n refundable: PropTypes.bool,\n durationInDays: PropTypes.number,\n rooms: PropTypes.arrayOf(\n PropTypes.shape({\n name: PropTypes.string,\n }),\n ),\n }).isRequired,\n status: PropTypes.shape({}).isRequired,\n};\n\nexport default HotelSummaryDetails;\n","import React, { Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { hot } from 'react-hot-loader';\nimport ItemWrapper from 'sharedWebpack/ItemWrapper/new';\nimport { Link } from 'react-router-dom';\nimport { I18nText } from '@wtag/react-comp-lib';\nimport QuantitySelector from '@wtag/rcl-quantity-selector';\nimport withJourneyElement from '../../lib/decorators/withJourneyElement';\nimport CarItemLabels from './car/CarItemLabels';\nimport ItemLabels from './ItemLabels';\nimport ItemPricing from './ItemPricing';\nimport ItemRemoveAndSearch from './ItemRemoveAndSearch';\nimport TripSummaryDetails from '../../TripSummaryDetails';\nimport CarDetails from '../../CarDetails';\nimport CartItemLabels from './CartItemLabels';\nimport OutOfPolicyJustificationEdit from './OutOfPolicyJustificationEdit';\nimport staticProductShape from '../../Search/static/shapes/staticProduct';\nimport { TYPE_CAR, TYPE_FLIGHT, TYPE_HOTEL } from '../../../helpers/itemTypes';\nimport getTripType from '../../lib/helpers/getTripType';\nimport { ROUNDTRIP } from '../../lib/helpers/tripTypes';\nimport BookingLabelWithHint from '../../SearchResult/flight/BookingLabelWithHint';\nimport searchURL from '../../lib/helpers/searchURL';\nimport ChannelListTag from '../../helpers/ChannelListTag';\nimport { WELLTRAVEL } from '../../lib/helpers/welltravel_channel';\nimport HotelCartItemHeader from './HotelCartItemHeader';\nimport HotelSummaryDetails from '../../HotelSummaryDetails';\nimport './styles.scss';\n\nconst PRODUCT_TYPE_INSURANCE = 'insurance';\n\nconst RemoveItem = ({\n journeyElementType,\n item,\n isCartLocked,\n available,\n status,\n removeFromCart,\n journeyElement,\n pendingConfirmation,\n confirmAddition,\n staticProduct,\n setStaticProductQuantity,\n id,\n quantity,\n frozen,\n}) => {\n const { type, search } = item;\n\n if ([TYPE_FLIGHT, TYPE_HOTEL, TYPE_CAR].includes(journeyElementType)) {\n return (\n \n
\n \n
\n {itemTitle}
\n \n {isStarsAvailable && (\n
\n \n
\n )}\n {isHorizontalBarVisible && }\n {hotelAddress}\n \n
\n \n
\n
\n );\n }\n\n if (journeyElementType === TYPE_HOTEL) {\n return (\n \n
\n )}\n \n
\n );\n }\n\n return (\n \n
\n \n
\n )}\n {journeyElementType === TYPE_CAR && (\n \n
\n \n
\n )}\n {journeyElementType === TYPE_HOTEL && (\n \n
\n \n
\n )}\n {hasBookingLabelHints && (\n \n {approvalRequired && (\n
\n )}\n {showServices && staticProduct && staticProduct.productType !== PRODUCT_TYPE_INSURANCE && (\n \n setStaticProductQuantity(id, value)}\n value={item && parseInt(quantity, 10)}\n disabled={context.frozen}\n size=\"tiny\"\n min={1}\n />\n
\n )}\n {(journeyElementId || productId) && (\n \n
\n
\n \n
\n\n {title}
\n {editing ? (\n \n
\n ) : (\n \n {editable && (\n
\n )}\n \n {editing ? (\n setValue(event.target.value)}\n error={!value && I18n.t('components.ibe.validations.presence')}\n touched={!value}\n />\n ) : (\n {value}\n )}\n
\n {text}
\n);\n\nEmptyServicePlaceholder.propTypes = {\n text: PropTypes.string.isRequired,\n};\n\nexport default EmptyServicePlaceholder;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport Popover from '@wtag/rcl-popover';\nimport CheckBox from '@wtag/rcl-check-box';\nimport Icon from '@wtag/rcl-icon';\nimport './styles.scss';\n\nconst TravelerAssignment = ({\n travelers,\n travelerIndices,\n onChange,\n handleQuantityChange,\n maximumPerGroup,\n assignedTravelersOfGroup,\n max,\n}) => {\n const [isPopoverVisible, setIsPopoverVisible] = useState(false);\n\n const togglePopoverVisibility = () => {\n setIsPopoverVisible(prevState => !prevState);\n };\n\n const popoverPlaceholders = travelerIndices.map(index =>\n I18n.t('components.ibe.flight_service_selection.traveler.short', {\n index: index + 1,\n }),\n );\n\n const isTravelerSelectionDisabled = index => {\n const isTravelerExists = travelerIndices.indexOf(index) < 0;\n const isLimitReached = travelerIndices.length >= max;\n const isMaximumPerGroupReached =\n maximumPerGroup &&\n assignedTravelersOfGroup.filter(assignedIndex => assignedIndex === index).length >=\n maximumPerGroup;\n\n return isTravelerExists && (isLimitReached || isMaximumPerGroupReached);\n };\n\n return (\n \n
\n }\n >\n \n {I18n.t('components.ibe.flight_service_selection.select_travelers')}\n
\n \n {travelers.map(({ index, name }) => (\n onChange(event.target.checked, index)}\n name={`traveler-${index}`}\n isChecked={travelerIndices.indexOf(index) >= 0}\n disabled={isTravelerSelectionDisabled(index)}\n label={name}\n />\n ))}\n
\n \n {popoverPlaceholders.join(', ')}\n
\n \n
\n );\n};\n\nService.propTypes = {\n service: PropTypes.shape({\n assignedTravelersOfGroup: PropTypes.arrayOf(PropTypes.number).isRequired,\n description: PropTypes.string.isRequired,\n quantity: PropTypes.number.isRequired,\n currency: PropTypes.string.isRequired,\n price: PropTypes.string.isRequired,\n travelerIndices: PropTypes.arrayOf(PropTypes.number).isRequired,\n limitations: PropTypes.shape({\n maximumPerGroup: PropTypes.number,\n maximumScope: PropTypes.oneOf(['traveler', 'booking']),\n }).isRequired,\n quantityInGroup: PropTypes.number.isRequired,\n }).isRequired,\n travelers: PropTypes.arrayOf(\n PropTypes.shape({\n index: PropTypes.number.isRequired,\n name: PropTypes.node.isRequired,\n }),\n ).isRequired,\n onChange: PropTypes.func.isRequired,\n};\n\nexport default Service;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { EmphasisTag } from '@wtag/react-comp-lib';\nimport JourneySummaryIndicator from 'sharedWebpack/JourneySummaryIndicator';\nimport EmptyServicePlaceholder from '../EmptyServicePlaceholder';\nimport Service from '../Service';\nimport { SUCCESS, DISABLED } from '../../../../../lib/helpers/componentStates';\nimport './styles.scss';\n\nconst SegmentServices = ({\n id,\n originDetails,\n destinationDetails,\n services,\n onChange,\n travelers,\n}) => {\n const serviceCount = services.length;\n const { placeName: originPlaceName, countryName: originCountryName } = originDetails;\n const {\n placeName: destinationPlaceName,\n countryName: destinationCountryName,\n } = destinationDetails;\n\n return (\n \n
\n {description}
\n \n {isTravelerAssignmentVisible && (\n
\n \n
\n \n
\n );\n};\n\nSegmentServices.propTypes = {\n id: PropTypes.number.isRequired,\n originDetails: PropTypes.shape({\n code: PropTypes.string.isRequired,\n countryName: PropTypes.string.isRequired,\n countryFlag: PropTypes.string.isRequired,\n placeName: PropTypes.string.isRequired,\n }).isRequired,\n destinationDetails: PropTypes.shape({\n code: PropTypes.string,\n countryName: PropTypes.string,\n countryFlag: PropTypes.string,\n placeName: PropTypes.string.isRequired,\n }).isRequired,\n services: PropTypes.arrayOf(\n PropTypes.shape({\n description: PropTypes.string,\n currency: PropTypes.string,\n price: PropTypes.string,\n }),\n ).isRequired,\n travelers: PropTypes.arrayOf(\n PropTypes.shape({\n index: PropTypes.number.isRequired,\n name: PropTypes.node.isRequired,\n }),\n ).isRequired,\n onChange: PropTypes.func.isRequired,\n};\n\nexport default SegmentServices;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport SegmentServices from '../SegmentServices';\nimport getSegmentServices from '../../../../helpers/getSegmentServices';\n\nconst SegmentServiceWrapper = ({ services, segments, airportDetails, onChange, travelers }) =>\n segments.map((segment, index) => {\n const segmentOriginDetails = {\n code: segment.originCode,\n countryFlag: airportDetails[segment.originCode].countryFlag,\n countryName: airportDetails[segment.originCode].countryName,\n placeName: airportDetails[segment.originCode].placeName,\n };\n\n const segmentDestinationDetails = {\n code: segment.destinationCode,\n countryFlag: airportDetails[segment.destinationCode].countryFlag,\n countryName: airportDetails[segment.destinationCode].countryName,\n placeName: airportDetails[segment.destinationCode].placeName,\n };\n\n const segmentServices = getSegmentServices(\n services,\n segment.originCode,\n segment.destinationCode,\n );\n\n return (\n \n {I18n.t('components.ibe.flight_service_selection.segment_number', { number: `0${id + 1}` })}\n
\n \n
\n {serviceCount === 0 ? (\n \n
\n \n {I18n.t('components.ibe.flight_service_selection.service_header_text', {\n originPlaceName,\n originCountryName,\n destinationPlaceName,\n destinationCountryName,\n })}\n
\n \n 0 ? SUCCESS : DISABLED}\n size=\"tiny\"\n />\n
\n \n {services.map(service => (\n \n onChange(service.id, quantity, price, travelerIndices)\n }\n travelers={travelers}\n service={service}\n />\n ))}\n
\n )}\n \n \n {trips.map(trip => {\n const { originCode, destinationCode } = trip;\n const tripServices = getTripServices(services, trip.originCode, trip.destinationCode);\n const segmentCount = trip.segments.length;\n const serviceCount = tripServices.length;\n const segmentServiceCount = getSegmentServicesCount([...trip.segments]);\n const originDetails = {\n ...airportDetails[originCode],\n code: originCode,\n };\n const destinationDetails = {\n ...airportDetails[destinationCode],\n code: destinationCode,\n };\n\n const getSegmentServicesCountText = () => {\n if (segmentServiceCount > 0) {\n return ` ${I18n.t('components.ibe.flight_service_selection.segment_service_count', {\n count: segmentServiceCount,\n })} ${I18n.t('components.ibe.flight_service_selection.segment_count', {\n count: segmentCount,\n })}`;\n }\n\n return I18n.t('components.ibe.flight_service_selection.segment_service_count', {\n count: segmentServiceCount,\n });\n };\n\n return (\n \n
\n }\n >\n \n {I18n.t('components.ibe.flight_service_selection.trip_services')}\n
\n \n
\n \n {I18n.t('components.ibe.flight_service_selection.service_header_text', {\n originPlaceName: originDetails.placeName,\n originCountryName: originDetails.countryName,\n destinationPlaceName: destinationDetails.placeName,\n destinationCountryName: destinationDetails.countryName,\n })}\n
\n \n 0 ? SUCCESS : DISABLED}\n size=\"tiny\"\n />\n 0 ? SUCCESS : DISABLED}\n size=\"tiny\"\n />\n
\n \n {I18n.t('components.ibe.flight_service_selection.available_trip_services')}\n
\n \n {serviceCount === 0 ? (\n
\n \n {tripServices.map(service => (\n \n onChange(service.id, quantity, price, travelerIndices)\n }\n travelers={travelers}\n service={service}\n />\n ))}\n
\n )}\n \n {I18n.t('components.ibe.flight_service_selection.available_segment_services')}\n
\n \n
\n \n );\n })}\n \n \n );\n};\n\nTripServices.propTypes = {\n trips: PropTypes.arrayOf(\n PropTypes.shape({\n originCode: PropTypes.string,\n destinationCode: PropTypes.string,\n airports: PropTypes.arrayOf(\n PropTypes.shape({ countryFlag: PropTypes.string, countryName: PropTypes.string }),\n ),\n }),\n ).isRequired,\n services: PropTypes.arrayOf(\n PropTypes.shape({\n trip: PropTypes.shape({\n origin: PropTypes.string,\n destination: PropTypes.string,\n }),\n }),\n ).isRequired,\n airportDetails: PropTypes.shape({\n code: PropTypes.string,\n countryName: PropTypes.string,\n countryFlag: PropTypes.string,\n }).isRequired,\n travelers: PropTypes.arrayOf(\n PropTypes.shape({\n index: PropTypes.number.isRequired,\n name: PropTypes.node.isRequired,\n }),\n ).isRequired,\n onChange: PropTypes.func.isRequired,\n};\n\nexport default TripServices;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { Accordion, AccordionItem } from '@wtag/rcl-accordion';\nimport { EmphasisTag } from '@wtag/react-comp-lib';\nimport JourneySummaryIndicator from 'sharedWebpack/JourneySummaryIndicator';\nimport EmptyServicePlaceholder from '../EmptyServicePlaceholder';\nimport Service from '../Service';\nimport { SUCCESS, DISABLED } from '../../../../../lib/helpers/componentStates';\nimport './styles.scss';\n\nconst ItemServices = ({ services, originDetails, destinationDetails, onChange, travelers }) => {\n const [isAccordionActive, setIsAccordionActive] = useState(false);\n const serviceCount = services.length;\n\n const toggleAccordion = () => {\n setIsAccordionActive(prev => !prev);\n };\n\n return (\n \n \n \n
\n }\n >\n \n {I18n.t('components.ibe.flight_service_selection.item_services')}\n
\n \n
\n {I18n.t('components.ibe.flight_service_selection.add_to_whole_item')}
\n \n 0 ? SUCCESS : DISABLED}\n size=\"tiny\"\n />\n
\n \n {I18n.t('components.ibe.flight_service_selection.available_item_services')}\n
\n \n {serviceCount === 0 ? (\n
\n \n \n \n );\n};\n\nItemServices.propTypes = {\n services: PropTypes.arrayOf(\n PropTypes.shape({\n quantity: PropTypes.number.isRequired,\n price: PropTypes.string.isRequired,\n currency: PropTypes.string.isRequired,\n travelerIndices: PropTypes.arrayOf(PropTypes.number).isRequired,\n }),\n ).isRequired,\n originDetails: PropTypes.shape({\n code: PropTypes.string.isRequired,\n countryName: PropTypes.string.isRequired,\n countryFlag: PropTypes.string.isRequired,\n }).isRequired,\n destinationDetails: PropTypes.shape({\n code: PropTypes.string,\n countryName: PropTypes.string,\n countryFlag: PropTypes.string,\n }).isRequired,\n onChange: PropTypes.func.isRequired,\n travelers: PropTypes.arrayOf(\n PropTypes.shape({\n index: PropTypes.number.isRequired,\n name: PropTypes.node.isRequired,\n }),\n ).isRequired,\n};\n\nexport default ItemServices;\n","import React, { Fragment, useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport Button from '@wtag/rcl-button';\nimport Icon from '@wtag/rcl-icon';\nimport IconButton from '@wtag/rcl-icon-button';\nimport Link from '@wtag/rcl-link';\nimport Modal from 'sharedWebpack/Modal';\nimport Amount from 'sharedWebpack/Amount';\nimport getTripOriginDetails from 'sharedWebpack/IBE/helpers/getTripOriginDetails';\nimport getTripDestinationDetails from 'sharedWebpack/IBE/helpers/getTripDestinationDetails';\nimport JourneySummaryIndicatorWrapper from 'sharedWebpack/JourneySummaryIndicator/JourneySummaryIndicatorWrapper';\nimport useBodyScrollLock from '../../../../../../shared/useBodyScrollLock';\nimport TripServices from './TripServices';\nimport ItemServices from './ItemServices';\nimport getTripType from '../../../../lib/helpers/getTripType';\nimport './styles.scss';\n\nconst FlightServiceSelection = ({\n services,\n travelers,\n trips,\n ensureServiceInCart,\n title,\n item,\n setShouldLockScroll,\n callbackParams,\n}) => {\n const [modalOpen, setModalOpen] = useState(false);\n const [selectedServices, setSelectedServices] = useState({});\n const [isProcessing, setIsProcessing] = useState(false);\n const { lockBodyScroll, unlockBodyScroll } = useBodyScrollLock();\n\n const getSelectedServices = () => {\n const mapped = {};\n\n services\n .filter(service => service.quantity > 0)\n .forEach(service => {\n mapped[service.id] = {\n price: service.price,\n quantity: service.quantity,\n travelerIndices: service.travelerIndices,\n limitationGroup: service.limitations.group,\n };\n });\n\n return mapped;\n };\n\n const onModalOpen = () => {\n setShouldLockScroll(true);\n setModalOpen(true);\n setSelectedServices(getSelectedServices());\n };\n\n const onModalClose = () => {\n setShouldLockScroll(false);\n setModalOpen(false);\n };\n\n const quantitiesOfGroup = group =>\n Object.values(selectedServices)\n .filter(service => group === service.limitationGroup)\n .reduce((memo, service) => memo + service.quantity, 0);\n\n const listOfAssignedTravelers = group => {\n const travelerList = Object.values(selectedServices)\n .filter(service => group === service.limitationGroup)\n .map(service => service.travelerIndices);\n\n return [].concat(...travelerList); // Array flating to support for old browsers\n };\n\n const getServices = () => {\n if (!services) return [];\n\n return services.map(service => ({\n ...service,\n ...selectedServices[service.id],\n quantityInGroup: quantitiesOfGroup(service.limitations.group),\n assignedTravelersOfGroup: listOfAssignedTravelers(service.limitations.group),\n }));\n };\n\n const onChange = (serviceId, quantity, price, travelerIndices) => {\n const newSelectedServices = { ...selectedServices };\n const changedService = getServices().find(service => service.id === serviceId);\n const modifiedService = services.find(service => service.id === serviceId);\n const isQuantityChanged = modifiedService.quantity !== quantity;\n const isTravelerChanged =\n modifiedService.travelerIndices.length !== travelerIndices.length ||\n !modifiedService.travelerIndices.every(value => travelerIndices.includes(value));\n\n newSelectedServices[serviceId] = {\n quantity,\n travelerIndices,\n price,\n changed: isQuantityChanged || isTravelerChanged,\n limitationGroup: changedService.limitations.group,\n };\n\n setSelectedServices(newSelectedServices);\n };\n\n const ensureServiceWithProperQuantity = serviceId => {\n const { quantity, travelerIndices } = selectedServices[serviceId];\n let quantityValue = quantity;\n\n if (travelerIndices.length < quantity) {\n quantityValue = travelerIndices.length;\n }\n\n return ensureServiceInCart(serviceId, quantityValue, travelerIndices, callbackParams);\n };\n\n const confirmSelection = () => {\n setIsProcessing(true);\n\n Promise.all(\n Object.keys(selectedServices).map(serviceId => ensureServiceWithProperQuantity(serviceId)),\n ).then(() => {\n setIsProcessing(false);\n onModalClose();\n });\n };\n\n const resetSelection = () => {\n if (services.filter(service => service.quantity > 0).length === 0) setSelectedServices({});\n else {\n const prevSelectedServices = {};\n services.forEach(service => {\n prevSelectedServices[service.id] = { ...service };\n });\n\n setSelectedServices({ ...prevSelectedServices });\n }\n };\n\n const getItemServices = () => getServices().filter(service => !service.trip && !service.segment);\n\n const totalPrice = () => {\n let total = 0.0;\n\n Object.values(selectedServices).forEach(service => {\n total += service.quantity * service.price;\n });\n\n return total;\n };\n\n const totalCurrency = (services && services.length > 0 && services[0].currency) || item.currency;\n const airportDetails = trips\n .flatMap(trip => trip.airports)\n .reduce((acc, airport) => {\n acc[airport.code] = airport;\n\n return acc;\n }, {});\n const tripType = getTripType(trips);\n\n const originDetails = getTripOriginDetails(trips, airportDetails);\n const destinationDetails = getTripDestinationDetails(trips, airportDetails);\n const isButtonDisabled =\n Object.values(selectedServices).filter(service => service.changed).length === 0 || isProcessing;\n\n useEffect(() => {\n if (modalOpen) {\n lockBodyScroll();\n } else {\n unlockBodyScroll();\n }\n\n return () => {\n unlockBodyScroll();\n };\n }, [modalOpen]);\n\n return (\n \n {services.map(service => (\n \n onChange(service.id, quantity, price, travelerIndices)\n }\n travelers={travelers}\n service={service}\n />\n ))}\n
\n )}\n {title}
\n \n
\n \n }\n >\n \n
\n \n \n
\n \n
\n \n \n {I18n.t('components.ibe.flight_service_selection.total')}\n \n
\n \n
\n );\n};\n\nFareBasisInfo.defaultProps = {\n segments: [],\n};\n\nFareBasisInfo.propTypes = {\n segments: PropTypes.arrayOf(\n PropTypes.shape({\n marketingCarrierCode: PropTypes.string.isRequired,\n marketingFlightNumber: PropTypes.string.isRequired,\n originCountryFlag: PropTypes.string.isRequired,\n originCode: PropTypes.string.isRequired,\n destinationCountryFlag: PropTypes.string.isRequired,\n destinationCode: PropTypes.string.isRequired,\n departureLocaltime: PropTypes.string.isRequired,\n bookingClass: PropTypes.string.isRequired,\n airlineLogo: PropTypes.string.isRequired,\n fare: PropTypes.shape({\n brand: PropTypes.string,\n basisCode: PropTypes.string.isRequired,\n }).isRequired,\n }),\n ),\n info: PropTypes.shape({\n rules: PropTypes.arrayOf(\n PropTypes.shape({\n category: PropTypes.string.isRequired,\n text: PropTypes.string.isRequired,\n }),\n ).isRequired,\n }).isRequired,\n penalties: PropTypes.shape({\n cancel: PropTypes.shape({\n amount: PropTypes.string.isRequired,\n currency: PropTypes.string.isRequired,\n }).isRequired,\n change: PropTypes.shape({\n amount: PropTypes.string.isRequired,\n currency: PropTypes.string.isRequired,\n }).isRequired,\n }).isRequired,\n};\n\nexport default FareBasisInfo;\n","import React, { Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport Icon from '@wtag/rcl-icon';\nimport { Text } from '@wtag/rcl-typography';\nimport { I18nText, Spinner } from '@wtag/react-comp-lib';\n\nimport { fetchFareBasisInfo } from '../../../actions/flight';\n\nimport FareBasisInfo from './FareBasisInfo';\n\nconst filterFareBasisInfo = (fareBasisInfo, filterSegments) => {\n if (!filterSegments) {\n return fareBasisInfo;\n }\n\n const filteredFareBasisInfo = [];\n\n fareBasisInfo.forEach(fareBasis => {\n const eligibleSegments = fareBasis.segments.filter(\n segment =>\n filterSegments.indexOf(`${segment.marketingCarrierCode}${segment.marketingFlightNumber}`) >=\n 0,\n );\n if (eligibleSegments.length) {\n filteredFareBasisInfo.push({ ...fareBasis, segments: eligibleSegments });\n }\n });\n\n return filteredFareBasisInfo;\n};\n\nclass FareBasisInfoList extends React.Component {\n componentDidMount() {\n this.props.fetchFareBasisInfo(this.props.id);\n }\n render() {\n if (!this.props.fareBasisInfo) {\n return (\n {penalties && penaltiesInformation()}
\n \n \n \n ))}\n \n {info.rules.map(rule => (\n \n {rule.text}\n \n ))}\n \n
\n \n {I18n.t('components.ibe.fare_basis_info.segment.title')}\n
{' '}\n \n {I18n.t('components.ibe.fare_basis_info.segment', { count: segments.length })}\n \n {segments.map(segment => (\n \n
\n \n
\n\n \n 
\n
\n \n 
\n {segment.originCode}\n 
\n {segment.destinationCode}\n
\n \n
\n \n
\n \n {`${segment.marketingCarrierCode}${segment.marketingFlightNumber}` ||\n I18n.t('components.ibe.not_available.short_form')}\n
\n \n {I18n.t('components.ibe.fare_basis_info.flight_number')}\n
\n \n
\n \n {segment.bookingClass || I18n.t('components.ibe.not_available.short_form')}\n
\n \n {I18n.t('components.ibe.fare_basis_info.booking_class')}\n
\n \n
\n \n {segment.fare.basisCode || I18n.t('components.ibe.not_available.short_form')}\n
\n\n \n {I18n.t('components.ibe.fare_basis_info.code')}\n
\n \n
\n \n {segment.fare.brand || I18n.t('components.ibe.not_available.short_form')}\n
\n\n \n {I18n.t('components.ibe.fare_basis_info.brand')}\n
\n \n
\n \n
\n );\n }\n if (this.props.fareBasisInfo.length <= 0) {\n return (\n \n
\n );\n }\n return (\n \n
\n \n \n {I18n.t('components.ibe.fare_basis_info.failed.header')}\n \n \n {I18n.t('components.ibe.fare_basis_info.failed.subheader')}\n \n
\n \n
\n );\n};\n\nFlightSeatIndicator.propTypes = {\n sectionWithSeat: PropTypes.shape({\n cabinClass: PropTypes.string.isRequired,\n }).isRequired,\n layman: PropTypes.bool.isRequired,\n};\n\nexport default FlightSeatIndicator;\n","import React, { Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport { I18nText } from '@wtag/react-comp-lib';\nimport DateTime from 'sharedWebpack/DateTime';\nimport { DATE_FORMAT_SHORT_WITH_TIME } from 'sharedWebpack/helpers/dateTime';\nimport ContentLoaderPlaceholder from '@wtag/rcl-content-loader-placeholder';\nimport JourneySummaryIndicator from 'sharedWebpack/JourneySummaryIndicator';\n\nconst FlightInfoSummary = ({ segment, airlineMap, airportMap, flightNumber }) => {\n const { destinationCode, departureLocaltimeInUserTz, originCode, operatingCarrierCode } = segment;\n const originDetails = airportMap[originCode];\n const destinationDetails = airportMap[destinationCode];\n\n return (\n \n {`${I18n.t('components.flight_seat_map.legends')} `}\n {sectionWithSeat && I18n.t(sectionWithSeat.cabinClass, { scope: 'cabin_classes_seatmap' })}\n
\n \n \n {I18n.t('components.flight_seat_map.avaibility_info.available')}\n
\n\n \n {I18n.t('components.flight_seat_map.avaibility_info.selected')}\n
\n\n \n {I18n.t('components.flight_seat_map.avaibility_info.free')}\n
\n\n \n {I18n.t('components.flight_seat_map.avaibility_info.occupied')}\n
\n\n \n {I18n.t('components.flight_seat_map.avaibility_info.absent')}\n
\n\n \n \n {I18n.t('components.flight_seat_map.avaibility_info.not_supported')}\n \n
\n
\n ) : (\n \n {I18n.t('components.ibe.flight_service_selection.service_header_text', {\n originPlaceName: originDetails.placeName,\n originCountryName: originDetails.countryName,\n destinationPlaceName: destinationDetails.placeName,\n destinationCountryName: destinationDetails.countryName,\n })}\n
\n \n
\n ) : (\n \n {flightNumber}\n \n
\n ) : (\n \n
\n );\n }\n\n return (\n \n {originPlaceName}, {originCountryName} {I18n.t('components.ibe.flight.to')}{' '}\n {destinationPlaceName}, {destinationCountryName}\n
\n \n
\n );\n };\n\n return (\n \n
\n);\n\nexport default SeatMapUnavailableCard;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { EmphasisTag } from '@wtag/react-comp-lib';\nimport Radio from '@wtag/rcl-radio';\n\nconst SeatOption = ({ disabled, passenger, setTravelerIndex, bookedFor, name, selectedSeatNumber }) => {\n const onClick = () => {\n if (!disabled && bookedFor !== passenger.value) {\n setTravelerIndex(passenger.value);\n }\n };\n\n return (\n \n {I18n.t('components.flight_seat_map.no_seat_header')}\n
\n\n {I18n.t('components.flight_seat_map.no_seat_info')}\n
\n{tags}
: null;\n };\n\n restrictedMessages = passengerType => {\n switch (passengerType) {\n case 'infant':\n return this.props.infantRestricted ? (\n \n {I18n.t('components.ibe.seat_map.infant_restriction')}\n
\n ) : null;\n case 'child':\n return this.props.childRestricted ? (\n \n {I18n.t('components.ibe.seat_map.child_restriction')}\n
\n ) : null;\n default:\n return null;\n }\n };\n\n seatOptions = passenger => {\n const { flight, seatsInCart } = this.props;\n const disabled = this.disableSeat(passenger.type);\n\n const existingSeat = seatsInCart.find(\n seat => seat.travelerIndex === passenger.value && this.getSegmentId(seat.id) === flight,\n );\n\n const selectedSeatNumber = existingSeat ? existingSeat.itemTitle : null;\n\n return (\n - \n
- \n
{I18n.t('components.ibe.seat_map.occupied_message')}
\n );\n }\n\n return (\n \n
\n );\n }\n}\n\nSeatDetails.defaultProps = {\n pricing: { amount: 0, currency: null },\n infantRestricted: false,\n childRestricted: false,\n bookedFor: null,\n};\n\nSeatDetails.propTypes = {\n row: PropTypes.string.isRequired,\n exit: PropTypes.bool.isRequired,\n aisle: PropTypes.bool.isRequired,\n window: PropTypes.bool.isRequired,\n name: PropTypes.string.isRequired,\n bookedFor: PropTypes.number,\n chargeable: PropTypes.bool.isRequired,\n occupied: PropTypes.oneOf([true, false]).isRequired,\n free: PropTypes.oneOf([true, false]).isRequired,\n pricing: PropTypes.shape({\n amount: PropTypes.string.isRequired,\n currency: PropTypes.string.isRequired,\n }),\n infantRestricted: PropTypes.bool,\n childRestricted: PropTypes.bool,\n passengers: PropTypes.arrayOf(\n PropTypes.shape({\n value: PropTypes.number.isRequired,\n type: PropTypes.string.isRequired,\n }),\n ).isRequired,\n seatsInCart: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.string.isRequired,\n mainItemId: PropTypes.number.isRequired,\n travelerIndex: PropTypes.number.isRequired,\n itemTitle: PropTypes.string.isRequired,\n }),\n ).isRequired,\n flight: PropTypes.string.isRequired,\n seatItemID: PropTypes.arrayOf(PropTypes.number).isRequired,\n removeSeat: PropTypes.func.isRequired,\n setTravelerIndex: PropTypes.func.isRequired,\n removeTravelerIndex: PropTypes.func.isRequired,\n};\n\nSeatDetails.contextTypes = {\n muiTheme: PropTypes.shape().isRequired,\n};\n\nexport default SeatDetails;\n","import { connect } from 'react-redux';\n\nimport { addSeatToCart, removeSeatsFromCart } from '../../../../actions/flight';\n\nimport SeatDetails from './SeatDetails';\n\nconst mapStateToProps = (state, ownProps) => {\n const { adults, children, infants } = state.common.travelerCount;\n const adultCount = adults.length;\n const childrenCount = children.length;\n const infantCount = infants.length;\n const passengers = [];\n let i = 0;\n\n for (let loopIndex = 0; loopIndex < adultCount; loopIndex += 1) {\n passengers.push({ value: i, type: 'adult' });\n i += 1;\n }\n\n for (let loopIndex = 0; loopIndex < childrenCount; loopIndex += 1) {\n passengers.push({ value: i, type: 'child' });\n i += 1;\n }\n\n for (let loopIndex = 0; loopIndex < infantCount; loopIndex += 1) {\n passengers.push({ value: i, type: 'infant' });\n i += 1;\n }\n\n const seatItemID = [];\n state.common.cart.items\n .filter(item => item.id === ownProps.mainItemId)\n .forEach(item =>\n item.subItems\n .filter(\n subItem => subItem.type === 'seat' && subItem.bookingAttributes.seatId === ownProps.id,\n )\n .forEach(seat => {\n seatItemID.push(seat.id);\n }),\n );\n\n return {\n seatItemID,\n passengers,\n };\n};\n\nconst mapDispatchToProps = (dispatch, ownProps) => ({\n selectSeat: (travelerIndex, callbackParams) =>\n dispatch(addSeatToCart(travelerIndex, ownProps.id, callbackParams)),\n removeSeat: seatItemID => dispatch(removeSeatsFromCart(seatItemID)),\n});\n\nexport default connect(mapStateToProps, mapDispatchToProps)(SeatDetails);\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport SeatDetails from './SeatDetailsContainer';\n\nconst SeatMapSeatPopoverContent = props => {\n const { layman, absentOrNullPrice, isRestrictedSeat, ...otherProps } = props;\n\n if (isRestrictedSeat) {\n return (\n \n
\n {this.seatTags()}\n {this.props.passengers.map(passenger => this.restrictedMessages(passenger.type))}\n {this.props.pricing.amount !== null && (\n \n {I18n.t('components.ibe.seat_map.seat', { name })}\n
\n\n {seatType}
\n \n {price}\n
\n {assignSeatForm}
\n )}\n \n {I18n.t(layman ? 'travel_app' : 'agent', {\n scope: 'components.ibe.seat_map.not_supported_seat_message',\n })}\n
\n );\n }\n if (!absentOrNullPrice) {\n return (\n \n
\n );\n }\n\n return (\n \n {I18n.t('components.ibe.seat_map.absent_seat_message')}\n
\n );\n};\n\nSeatMapSeatPopoverContent.defaultProps = {\n absent: true,\n aisle: false,\n booked: false,\n bookedFor: null,\n chargeable: false,\n childRestricted: false,\n exit: false,\n infantRestricted: false,\n mainItemId: null,\n occupied: false,\n reclineRestricted: false,\n window: false,\n pricing: {\n amount: null,\n currency: null,\n },\n layman: false,\n};\n\nSeatMapSeatPopoverContent.propTypes = {\n absent: PropTypes.bool,\n absentOrNullPrice: PropTypes.bool.isRequired,\n aisle: PropTypes.bool,\n booked: PropTypes.bool,\n bookedFor: PropTypes.number,\n chargeable: PropTypes.bool,\n childRestricted: PropTypes.bool,\n exit: PropTypes.bool,\n flight: PropTypes.string.isRequired,\n free: PropTypes.bool.isRequired,\n infantRestricted: PropTypes.bool,\n isRestrictedSeat: PropTypes.bool.isRequired,\n isUpdating: PropTypes.bool.isRequired,\n layman: PropTypes.bool,\n mainItemId: PropTypes.number,\n occupied: PropTypes.bool,\n pricing: PropTypes.shape({\n amount: PropTypes.string,\n currency: PropTypes.string,\n }),\n reclineRestricted: PropTypes.bool,\n removeTravelerIndex: PropTypes.func.isRequired,\n row: PropTypes.string.isRequired,\n selectSeat: PropTypes.func.isRequired,\n setTravelerIndex: PropTypes.func.isRequired,\n window: PropTypes.bool,\n};\n\nexport default SeatMapSeatPopoverContent;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport Popover from '@wtag/rcl-popover';\nimport { Spinner } from '@wtag/react-comp-lib';\nimport SeatMapSeatPopoverContent from './SeatMapSeatPopoverContent';\n\nclass SeatMapSeat extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n isPopoverOpen: false,\n isLoading: false,\n travelerIndex: null,\n };\n }\n\n componentDidUpdate(prevProps) {\n if (this.props.bookedFor !== prevProps.bookedFor) {\n this.stopLoader();\n }\n }\n\n setTravelerIndex = value => {\n if (this.props.bookedFor !== value) {\n this.setState({ isPopoverOpen: false, isLoading: true, travelerIndex: value }, () => {\n this.props.selectSeat(this.state.travelerIndex, this.context);\n });\n } else {\n this.hidePopover();\n }\n };\n\n removeTravelerIndex = removeSeatCallback => {\n this.setState({ isPopoverOpen: false, isLoading: true, travelerIndex: null }, () => {\n removeSeatCallback();\n });\n };\n\n stopLoader = () => {\n this.setState({ isLoading: false });\n };\n\n hidePopover = () => {\n this.setState({ isPopoverOpen: false });\n };\n\n togglePopoverDisplay = () => {\n this.setState({ isPopoverOpen: !this.state.isPopoverOpen });\n };\n\n absentOrNullPrice = () => this.props.absent || !this.props.pricing.amount;\n\n isFree = () =>\n !this.absentOrNullPrice() &&\n !this.props.chargeable &&\n !this.props.occupied &&\n this.props.pricing &&\n Number(this.props.pricing.amount) === 0;\n\n render() {\n const linkText = this.props.booked ? `T${this.props.bookedFor + 1}` : '';\n const { chargeable, supportedByWelltravel } = this.props;\n const { layman } = this.context.callbackParams;\n\n const isRestrictedSeat = chargeable && !supportedByWelltravel && !this.absentOrNullPrice();\n\n const classes = classNames({\n seat: true,\n not_supported: isRestrictedSeat,\n chargeable: chargeable && supportedByWelltravel,\n reclineRestricted: this.props.reclineRestricted,\n free: this.isFree(),\n occupied: this.props.occupied,\n absent: this.absentOrNullPrice(),\n infantRestricted: this.props.infantRestricted,\n childRestricted: this.props.childRestricted,\n window: this.props.window,\n active: this.state.isPopoverOpen,\n booked: this.props.booked && !this.state.isLoading,\n updating: this.props.isUpdating,\n });\n\n return (\n \n
\n );\n};\n\nSeatMapRow.propTypes = {\n rowIndex: PropTypes.number.isRequired,\n groupMap: PropTypes.shape({}).isRequired,\n resultId: PropTypes.string.isRequired,\n seats: PropTypes.arrayOf(seatShape).isRequired,\n exit: PropTypes.bool.isRequired,\n wing: PropTypes.bool.isRequired,\n number: PropTypes.string.isRequired,\n flight: PropTypes.string.isRequired,\n};\n\nexport default SeatMapRow;\n","import PropTypes from 'prop-types';\n\nimport seatShape from './seatShape';\n\nexport default PropTypes.shape({\n exit: PropTypes.bool.isRequired,\n wing: PropTypes.bool.isRequired,\n seats: PropTypes.arrayOf(seatShape).isRequired,\n});\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport SeatMapUnavailableCard from 'sharedWebpack/SeatMapUnavailableCard';\nimport Row from './SeatMapRow';\nimport seatMapRowShape from '../shapes/seatMapRowShape';\n\nconst SeatMap = ({ rows, columns, aisleColumns, flight, resultId }) => {\n const groupMap = {};\n const flatGroupMap = {};\n\n const handleGroup = (previousRow, rowIndex, property, groupName) => {\n if (previousRow === undefined || groupMap[property] === undefined) {\n groupMap[property] = {\n postions: [rowIndex],\n groupName,\n };\n } else if (previousRow && previousRow[property] === false) {\n groupMap[property].postions.push(rowIndex);\n }\n };\n\n rows.forEach((row, index) => {\n const previousRow = rows[index - 1];\n const { wing, exit } = row;\n\n if (wing) {\n handleGroup(previousRow, index, wing, I18n.t('components.ibe.seat_map.wing_rows'));\n }\n if (exit) {\n handleGroup(previousRow, index, exit, I18n.t('components.ibe.seat_map.exit'));\n }\n });\n\n Object.values(groupMap).forEach(item => {\n item.postions.forEach(position => {\n flatGroupMap[position] = item.groupName;\n });\n });\n\n const seatRows = rows.map((row, index) => (\n \n
\n {props.number}
\n {props.groupMap[props.rowIndex] && (\n {props.groupMap[props.rowIndex]}\n )}\n {seats}\n \n
\n );\n};\n\nSeatMap.propTypes = {\n resultId: PropTypes.string.isRequired,\n columns: PropTypes.arrayOf(PropTypes.string).isRequired,\n aisleColumns: PropTypes.arrayOf(PropTypes.string).isRequired,\n rows: PropTypes.arrayOf(seatMapRowShape).isRequired,\n flight: PropTypes.string.isRequired,\n};\n\nexport default SeatMap;\n","import React, { useMemo } from 'react';\nimport PropTypes from 'prop-types';\n\nimport SeatMap from './SeatMap';\nimport seatMapShape from '../shapes/seatMap';\n\nconst SeatMapList = props => {\n const seatMaps = useMemo(\n () =>\n props.seatMaps.map(seatMap => (\n \n \n
\n {seatRows}\n {seatNumbers}
\n {seatMaps}
;\n};\n\nSeatMapList.propTypes = {\n resultId: PropTypes.string.isRequired,\n seatMaps: PropTypes.arrayOf(seatMapShape).isRequired,\n flightNumber: PropTypes.string.isRequired,\n};\n\nexport default SeatMapList;\n","import PropTypes from 'prop-types';\n\nimport seatMapRowShape from './seatMapRowShape';\n\nexport default PropTypes.shape({\n rows: PropTypes.arrayOf(seatMapRowShape),\n});\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nconst SelectedSeatInfo = ({\n selected,\n item,\n bookedSeatMap,\n isFree,\n formattedPrice,\n traveler,\n currency,\n}) => (\n \n {`${I18n.t('components.ibe.deals.label.traveler')} ${traveler}`}\n {selected ? (\n \n {`(${I18n.t('components.ibe.deals.label.seat')} ${item.row}${item.seat})`}\n \n ) : (\n {I18n.t('components.ibe.deals.label.no_seat_selected')}\n )}\n {selected ? (\n \n {bookedSeatMap[item.id] ? formattedPrice(bookedSeatMap[item.id].price) : ''}\n \n ) : (\n {currency} 00.00\n )}\n
\n);\n\nSelectedSeatInfo.defaultProps = {\n item: {},\n};\n\nSelectedSeatInfo.propTypes = {\n item: PropTypes.shape({\n row: PropTypes.string.isRequired,\n seat: PropTypes.string.isRequired,\n id: PropTypes.number.isRequired,\n }),\n bookedSeatMap: PropTypes.shape({\n price: PropTypes.number.isRequired,\n travelerIndex: PropTypes.number.isRequired,\n }).isRequired,\n selected: PropTypes.bool.isRequired,\n isFree: PropTypes.func.isRequired,\n traveler: PropTypes.number.isRequired,\n formattedPrice: PropTypes.func.isRequired,\n currency: PropTypes.string.isRequired,\n};\n\nexport default SelectedSeatInfo;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { I18nText } from '@wtag/react-comp-lib';\nimport { connect } from 'react-redux';\nimport Amount from 'sharedWebpack/Amount';\nimport JourneySummaryIndicator from 'sharedWebpack/JourneySummaryIndicator';\nimport SelectedSeatInfo from './SelectedSeatInfo';\n\nconst FlightSeatSummary = ({\n segmentMap,\n bookedSeatMap,\n airportMap,\n origin,\n destination,\n travelerCount,\n currency,\n}) => {\n const totalTravelerscount = Object.values(travelerCount).reduce(\n (previousValue, currentValue) => previousValue + currentValue.length,\n 0,\n );\n\n const originCountryInfo = airportMap[origin];\n const destinationCountryInfo = airportMap[destination];\n\n const formattedPrice = price =>\n price ? (\n \n \n
\n );\n};\n\nFlightSeatSummary.propTypes = {\n currency: PropTypes.string.isRequired,\n segmentMap: PropTypes.shape({\n seats: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.number.isRequired,\n row: PropTypes.string.isRequired,\n seat: PropTypes.string.isRequired,\n segment_id: PropTypes.number.isRequired,\n }),\n ).isRequired,\n }).isRequired,\n bookedSeatMap: PropTypes.shape({\n travelerIndex: PropTypes.number.isRequired,\n price: PropTypes.string.isRequired,\n }).isRequired,\n airportMap: PropTypes.instanceOf({\n countryFlag: PropTypes.string.isRequired,\n countryName: PropTypes.string.isRequired,\n }).isRequired,\n origin: PropTypes.string.isRequired,\n destination: PropTypes.string.isRequired,\n travelerCount: PropTypes.instanceOf({\n adults: PropTypes.arrayOf(\n PropTypes.instanceOf({\n name: PropTypes.string,\n }),\n ),\n children: PropTypes.arrayOf(\n PropTypes.instanceOf({\n name: PropTypes.string,\n }),\n ),\n infant: PropTypes.arrayOf(\n PropTypes.instanceOf({\n name: PropTypes.string,\n }),\n ),\n }).isRequired,\n};\n\nconst mapStateToProps = state => ({\n travelerCount: state.common.travelerCount,\n});\n\nexport default connect(mapStateToProps)(FlightSeatSummary);\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport Icon from '@wtag/rcl-icon';\nimport { I18nText } from '@wtag/react-comp-lib';\nimport Popover from '@wtag/rcl-popover';\nimport JourneySummaryIndicatorWrapper from 'sharedWebpack/JourneySummaryIndicator/JourneySummaryIndicatorWrapper';\nimport Amount from 'sharedWebpack/Amount';\nimport FlightSeatSummary from './FlightSeatSummary';\n\nconst FlightBookedSeatSummary = ({\n trips,\n segmentMap,\n airportMap,\n seatMaps,\n bookedSeatMap,\n currency,\n}) => {\n const [isPopoverVisible, setIsPopoverVisible] = useState(false);\n\n const getTotalSeatFee = () => {\n let total = 0;\n\n seatMaps.forEach(seatMap => {\n segmentMap[`${seatMap.origin}-${seatMap.destination}`].seats.forEach(item => {\n if (bookedSeatMap[item.id] && bookedSeatMap[item.id].price) {\n total += Number(bookedSeatMap[item.id].price);\n }\n });\n });\n\n return total;\n };\n\n return (\n {travelerMap()}
\n \n \n
\n );\n};\n\nFlightBookedSeatSummary.propTypes = {\n trips: PropTypes.arrayOf(\n PropTypes.shape({\n originCode: PropTypes.string.isRequired,\n destinationCode: PropTypes.string.isRequired,\n segments: PropTypes.arrayOf(\n PropTypes.shape({\n aircraftType: PropTypes.string.isRequired,\n destinationCode: PropTypes.string.isRequired,\n operatingCarrierCode: PropTypes.string.isRequired,\n operatingFlightNumber: PropTypes.string.isRequired,\n originCode: PropTypes.string.isRequired,\n }),\n ).isRequired,\n }),\n ).isRequired,\n segment: PropTypes.shape({\n originCode: PropTypes.string.isRequired,\n operatingCarrierCode: PropTypes.string.isRequired,\n destinationCode: PropTypes.string.isRequired,\n departureLocaltime: PropTypes.string.isRequired,\n }).isRequired,\n seatMaps: PropTypes.arrayOf(\n PropTypes.shape({\n origin: PropTypes.string.isRequired,\n destination: PropTypes.string.isRequired,\n flightNumber: PropTypes.string.isRequired,\n }),\n ).isRequired,\n airportMap: PropTypes.shape({}).isRequired,\n seatMap: PropTypes.shape({ flightNumber: PropTypes.string.isRequired }).isRequired,\n bookedSeatMap: PropTypes.shape({\n travelerIndex: PropTypes.number.isRequired,\n price: PropTypes.number.isRequired,\n }).isRequired,\n segmentMap: PropTypes.shape({}).isRequired,\n currency: PropTypes.string.isRequired,\n};\n\nexport default FlightBookedSeatSummary;\n","import React, { Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport Icon from '@wtag/rcl-icon';\nimport Button from '@wtag/rcl-button';\nimport Link from '@wtag/rcl-link';\nimport { I18nText } from '@wtag/react-comp-lib';\nimport { Tabs as Rtabs } from '@wtag/rcl-rtabs';\nimport Modal from 'sharedWebpack/Modal';\nimport SeatMapUnavailableCard from 'sharedWebpack/SeatMapUnavailableCard';\nimport FlightInfoSummary from './FlightInfoSummary';\nimport FlightJourneyIndicator from '../Indicators/FlightJourneyIndicator';\nimport FlightSeatIndicator from '../Indicators/FlightSeatIndicator';\nimport SeatMapList from './SeatMapList';\nimport FlightBookedSeatSummary from './FlightBookedSeatSummary';\nimport FlightInfoSummaryPopover from './FlightInfoSummaryPopover';\nimport '../../styles.scss';\n\nclass FlightSeatMap extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n isModalVisible: false,\n selectedTabKey: 0,\n };\n this.computed = {\n airlineMap: {},\n airportMap: {},\n segmentMap: {},\n bookedSeatMap: {},\n };\n }\n\n componentDidMount() {\n if (this.state.isModalVisible || this.props.shouldLockScroll) {\n document.body.style.overflow = 'hidden';\n } else {\n document.body.style.overflow = 'auto';\n }\n }\n\n componentDidUpdate() {\n if (this.state.isModalVisible || this.props.shouldLockScroll) {\n document.body.style.overflow = 'hidden';\n } else {\n document.body.style.overflow = 'auto';\n }\n }\n\n onModalOpen = () => {\n this.setState({\n isModalVisible: true,\n });\n };\n\n onModalClose = () => {\n this.setState({\n isModalVisible: false,\n });\n };\n\n setSelectedTabKeyOnClick = key => {\n this.setState({\n selectedTabKey: key,\n });\n };\n\n mapPropsData = propsData => {\n const airlineMap = {};\n const airportMap = {};\n const segmentMap = {};\n const bookedSeatMap = {};\n\n propsData.trips.forEach(trip => {\n trip.airlines.forEach(airline => {\n if (airline && airline.code) airlineMap[airline.code] = airline;\n });\n\n trip.airports.forEach(airport => {\n if (airport && airport.code) airportMap[airport.code] = airport;\n });\n trip.segments.forEach(segment => {\n segmentMap[`${segment.originCode}-${segment.destinationCode}`] = segment;\n });\n });\n propsData.cart.items.forEach(item => {\n if (Array.isArray(item.subItems))\n item.subItems.forEach(subItem => {\n if (subItem.journeyElementId && subItem.type === 'seat') {\n bookedSeatMap[subItem.journeyElementId] = {\n travelerIndex: subItem.bookingAttributes.travelerIndex,\n price: Number(subItem.grossTotal),\n };\n }\n });\n });\n\n this.computed = {\n airlineMap,\n airportMap,\n segmentMap,\n bookedSeatMap,\n };\n };\n\n seatInfo = seatMaps => {\n const { layman } = this.context.callbackParams;\n\n const sectionWithSeat = seatMaps.find(seatmap => seatmap.sections.length > 0).sections[0];\n return \n setIsPopoverVisible(false)}\n content={seatMaps.map(seatMap => (\n setIsPopoverVisible(prevState => !prevState)}\n role=\"button\"\n tabIndex={0}\n onKeyPress={() => setIsPopoverVisible(prevState => !prevState)}\n >\n
\n \n
\n \n
\n\n \n
\n );\n };\n\n seatServiceAvailable = () =>\n this.props.seatMaps.length > 0 &&\n this.props.seatMaps.filter(seatmap => seatmap.sections.length > 0).length > 0;\n\n confirmSelection = () => {\n this.setState({ isModalVisible: !this.state.isModalVisible });\n };\n\n deleteSelections = () => {\n const seatItemIDs = this.props.seatItemIDs;\n if (seatItemIDs.length) {\n this.props.removeSeatsFromCart(seatItemIDs);\n }\n };\n\n showSeatButtonLink = () => (\n \n
\n ),\n getContent: () =>\n seatMap.sections.length > 0 ? (\n \n
\n ) : (\n {this.seatInfo(seatMaps)}
\n \n
\n \n
\n \n
\n {this.flightInfo()}
\n \n \n
\n \n \n {trips.length && trips[0].originCode && airportMap[trips[0].originCode] && (\n
\n {I18n.t('ibe.payment.instant_ticket_card.header.item_without_fop')}
\n ) : (\n {I18n.t('ibe.payment.instant_ticket_card.header.item_with_fop')}
\n );\n\n return (\n {headerText}
\n \n
\n ))}\n \n
\n\n \n {item.itemTitle}\n
\n\n \n
\n \n {I18n.t(item.formOfPayment.type, { scope: 'components.order_item.fop' })}\n
\n \n {I18n.t('ibe.payment.confirmation_message.instant_ticket.sub_header')}\n
\n {instantTicketWithFOP.length > 0 && (\n \n
\n );\n};\n\nAcceptableFOP.defaultProps = {\n selectedPilTabKey: 0,\n};\n\nAcceptableFOP.propTypes = {\n fops: PropTypes.arrayOf(PropTypes.string).isRequired,\n selectedPilTabKey: PropTypes.number,\n containerWidth: PropTypes.number.isRequired,\n};\n\nexport default AcceptableFOP;\n","import { useState, useEffect } from 'react';\n\nconst useElementSize = elementRef => {\n const [elementSize, setElementSize] = useState({\n width: elementRef && elementRef.current ? elementRef.current.offsetWidth : 0,\n height: elementRef && elementRef.current ? elementRef.current.offsetHeight : 0,\n });\n\n const listener = () => {\n if (elementRef && elementRef.current) {\n setElementSize({\n width: elementRef.current.offsetWidth,\n height: elementRef.current.offsetHeight,\n });\n }\n };\n\n useEffect(() => {\n listener();\n window.addEventListener('resize', listener);\n return () => {\n window.removeEventListener('resize', listener);\n };\n }, []);\n\n return elementSize;\n};\n\nexport default useElementSize;\n","import toCamelCase from 'to-camel-case';\nimport {\n CASH_FORM_OF_PAYMENT,\n CREDIT_CARD_FORM_OF_PAYMENT,\n IATA_FORM_OF_PAYMENT,\n NONE_FORM_OF_PAYMENT,\n WALLET_FORM_OF_PAYMENT,\n} from '../../lib/helpers/fop_options';\n\nconst getFopItems = (availableFormOfPayment, laymanMode, creditCards) => {\n const supportedPayments = [];\n const CamelCasedCreditCard = toCamelCase(CREDIT_CARD_FORM_OF_PAYMENT);\n const CamelCasedWallet = toCamelCase(WALLET_FORM_OF_PAYMENT);\n\n const pushSupportedCreditCards = fop => {\n if (availableFormOfPayment[fop].supported) {\n const supportedCards = availableFormOfPayment.creditCard.supportedCards.map(\n supportedCard => supportedCard.cardType,\n );\n\n Object.values(creditCards).forEach(creditCard => {\n if (supportedCards.includes(creditCard.cardType)) {\n supportedPayments.push({\n type: creditCard.cardType,\n card: creditCard,\n });\n }\n });\n }\n };\n\n const pushSupportedFops = fop => {\n if (availableFormOfPayment[fop].supported) {\n supportedPayments.push({\n type: fop === CamelCasedWallet ? WALLET_FORM_OF_PAYMENT : fop,\n card: null,\n });\n }\n };\n\n Object.keys(availableFormOfPayment).forEach(fop => {\n if (laymanMode) {\n switch (fop) {\n case CASH_FORM_OF_PAYMENT:\n supportedPayments.push({ type: CASH_FORM_OF_PAYMENT, card: null });\n break;\n\n case CamelCasedCreditCard:\n pushSupportedCreditCards(fop);\n break;\n\n default:\n }\n } else {\n switch (fop) {\n case CASH_FORM_OF_PAYMENT:\n pushSupportedFops(fop);\n break;\n\n case IATA_FORM_OF_PAYMENT:\n pushSupportedFops(fop);\n break;\n case NONE_FORM_OF_PAYMENT:\n pushSupportedFops(fop);\n break;\n case CamelCasedCreditCard:\n pushSupportedCreditCards(fop);\n break;\n case CamelCasedWallet:\n pushSupportedFops(fop);\n break;\n default:\n }\n }\n });\n\n return supportedPayments;\n};\n\nexport default getFopItems;\n","import paymentMethodName from './paymentMethodName';\n\nconst paymentMethodLocaleName = (type, laymanMode = false) =>\n I18n.t(paymentMethodName(type, laymanMode), {\n scope: 'ibe.payment.payment_type',\n });\n\nexport default paymentMethodLocaleName;\n","import { FORM_OF_PAYMENT_MULTIPLE } from '../../lib/helpers/fop_options';\n\nfunction creditCardIconName(cardType, laymanMode = true) {\n switch (cardType) {\n case 'cash':\n return laymanMode ? 'invoiceWord' : 'cash';\n\n case 'iata':\n return 'iata';\n\n case 'none':\n return 'receipt';\n\n case FORM_OF_PAYMENT_MULTIPLE:\n return 'multipleFOP';\n\n case 'visa':\n return 'visa';\n\n case 'visa_corporate':\n return 'visa';\n\n case 'visa_electron':\n return 'visaElectron';\n\n case 'visa_debit':\n return 'visa';\n\n case 'visa_corporate_debit':\n return 'visa';\n\n case 'visa_electron_debit':\n return 'visaElectron';\n\n case 'master_card':\n return 'mastercard';\n\n case 'mastercard':\n return 'mastercard';\n\n case 'master_card_debit':\n return 'mastercard';\n\n case 'master_card_corporate':\n return 'mastercard';\n\n case 'master_card_corporate_debit':\n return 'mastercard';\n\n case 'uatp':\n return 'uatp';\n\n case 'uatp_debit':\n return 'uatp';\n\n case 'amex':\n return 'amex';\n\n case 'amex_debit':\n return 'amex';\n\n case 'amex_corporate':\n return 'amex';\n\n case 'amex_corporate_debit':\n return 'amex';\n\n case 'diners_club':\n return 'dinersClub';\n\n case 'diners_club_debit':\n return 'dinersClub';\n\n case 'diners_club_corporate':\n return 'dinersClub';\n\n case 'diners_club_corporate_debit':\n return 'dinersClub';\n\n case 'discover':\n return 'discover';\n\n case 'discover_debit':\n return 'discover';\n\n case 'discover_corporate':\n return 'discover';\n\n case 'discover_corporate_debit':\n return 'discover';\n\n case 'airplus':\n return 'uatp';\n\n case 'jcb':\n return 'jcb';\n\n case 'jcb_debit':\n return 'jcb';\n\n case 'twint':\n return 'twint';\n\n case 'post_finance':\n return 'postFinance';\n\n case 'american_express':\n return 'amex';\n\n case 'boncard':\n return 'boncard';\n\n case 'china_union_pay':\n return 'chinaUnionPay';\n\n case 'cb':\n return 'visaCB';\n\n case 'dankort':\n return 'dankort';\n\n case 'rupay':\n return 'rupay';\n\n case 'visa_v_pay':\n return 'visaVPay';\n\n case 'mastercard_maestro':\n return 'mastercardMaestro';\n\n case 'elo_master_card':\n return 'elo';\n\n case 'elo_visa':\n return 'elo';\n\n case 'mastercard_bancontact':\n return 'mastercardBancontact';\n\n case 'lunch_check':\n return 'lunchCheck';\n\n case 'welltravel_wallet':\n case 'welltravelWallet':\n return 'walletBalance';\n\n default:\n return 'visa';\n }\n}\n\nexport default creditCardIconName;\n","import paymentMethodName from './paymentMethodName';\nimport { CASH_FORM_OF_PAYMENT } from '../../lib/helpers/fop_options';\n\nconst supportedFopIcons = (availableFops, laymanMode) => {\n const uniqueIconList = new Set();\n const cardFop = 'creditCard';\n\n Object.keys(availableFops).forEach(fop => {\n if (availableFops[fop].supported && fop === cardFop) {\n availableFops.creditCard.supportedCards.forEach(creditCard => {\n uniqueIconList.add(paymentMethodName(creditCard.cardType, laymanMode));\n });\n } else if (availableFops[fop].supported && !laymanMode) {\n uniqueIconList.add(paymentMethodName(fop, laymanMode));\n } else if (laymanMode && fop === CASH_FORM_OF_PAYMENT) {\n uniqueIconList.add(paymentMethodName(CASH_FORM_OF_PAYMENT, laymanMode));\n }\n });\n\n return [...uniqueIconList];\n};\n\nexport default supportedFopIcons;\n","import PropTypes from 'prop-types';\n\nexport default {\n submitting: PropTypes.bool,\n invalid: PropTypes.bool,\n handleSubmit: PropTypes.func.isRequired,\n};\n","import PayFastForm from '../gateway/PayFastForm';\nimport PayGateForm from '../gateway/PayGateForm';\nimport PostFinanceForm from '../gateway/PostFinance';\n\nexport const PAYMENT_PROVIDER_FORM_MAPPING = {\n pay_fast: PayFastForm,\n pay_gate: PayGateForm,\n post_finance: PostFinanceForm,\n};\n\nexport const ORDER_STYLES = {\n NEW: 'new',\n EXISTING: 'existing',\n};\nexport const BOOKING_STYLES = {\n QUOTE: 'quote',\n OPTION: 'option',\n REAL: 'real',\n};\n\nexport const PROCEDURE_MAPPING = {\n [ORDER_STYLES.NEW]: {\n [BOOKING_STYLES.QUOTE]: 'createOrderAsQuote',\n [BOOKING_STYLES.OPTION]: 'createOption',\n [BOOKING_STYLES.REAL]: 'createOrder',\n },\n [ORDER_STYLES.EXISTING]: {\n [BOOKING_STYLES.QUOTE]: 'attachToOrderAsQuote',\n [BOOKING_STYLES.OPTION]: 'attachToOrderAsOption',\n [BOOKING_STYLES.REAL]: 'attachToOrder',\n },\n};\n\nconst CREDIT_CARD_FOP = 'credit_card';\n\nexport const cartItemsWithCreditCard = cartItems =>\n cartItems.filter(\n cartItem => cartItem.formOfPayment && cartItem.formOfPayment.type === CREDIT_CARD_FOP,\n );\n\nexport const matchCCTokenWithItems = (cartItems, ccToken) =>\n cartItems.filter(cartItem => cartItem.formOfPayment.cardDetails.token === ccToken);\n\nexport const cartHasItemWithCreditCard = cartItems => {\n if (cartItems.some(cartItem => Object.keys(cartItem).length === 0)) {\n return false;\n }\n\n return cartItemsWithCreditCard(cartItems).length > 0;\n};\n\nexport const getEncodedBookingRequests = itemsFromCCToken => {\n const encodedBookingRequests = itemsFromCCToken.map(item => item.encodedPaymentRequestPayload);\n\n return encodedBookingRequests;\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst PayFastForm = props => {\n const attributes = props.attributes;\n const inputFields = Object.keys(attributes).map(attribute => (\n \n ));\n\n return (\n \n {dividerContent}\n \n {selectedPilTabKey === 0\n ? I18n.t('admin.components.orders.items_tab.label.pay_once_supported_text')\n : I18n.t('admin.components.orders.items_tab.label.pay_individually_supported_text')}\n \n {dividerContent}\n
\n \n {fops.slice(0, fopsToShowCount).map(type => (\n \n \n {fops.map(type => (\n \n ))}\n \n
\n \n
\n);\n\nexport default AirportOption;\n","import AirportOption from '../AirportOption';\n\nconst fetchDataSource = (suggestions, whitelistedAirports) => {\n const dataSource = [];\n suggestions.forEach(suggestion => {\n if (whitelistedAirports !== undefined && whitelistedAirports.length > 0) {\n if (!whitelistedAirports.includes(suggestion.code)) {\n return false;\n }\n }\n const countryFlag = suggestion.countryFlag;\n const text = suggestion.name;\n const secondaryText = `(${suggestion.code}), ${suggestion.placeName}, ${suggestion.countryName}`;\n\n dataSource.push({\n value: suggestion.code,\n label: AirportOption(countryFlag, text, secondaryText),\n });\n\n return null;\n });\n return dataSource;\n};\n\nexport default fetchDataSource;\n","import React, { useEffect, useRef, useState } from 'react';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\nimport Tooltip from '@wtag/rcl-tooltip';\nimport './styles.scss';\n\nconst TripDetailsItem = ({ className, title, subtitle }) => {\n const [isShowTooltip, setIsShowTooltip] = useState(false);\n const titleRef = useRef(null);\n\n useEffect(() => {\n setIsShowTooltip(\n titleRef.current && titleRef.current.scrollWidth > titleRef.current.offsetWidth,\n );\n }, [titleRef]);\n\n return (\n \n 
\n
\n \n
\n \n {text}\n
\n \n {secondaryText}\n
\n \n {title}\n {isShowTooltip ? (\n \n \n ) : (\n
\n );\n};\n\nTripDetailsItem.defaultProps = {\n className: null,\n};\n\nTripDetailsItem.propTypes = {\n className: PropTypes.string,\n title: PropTypes.string.isRequired,\n subtitle: PropTypes.oneOfType([PropTypes.shape({}), PropTypes.string]).isRequired,\n};\n\nexport default TripDetailsItem;\n","import snakeCaseKeys from 'snakecase-keys';\nimport moment from 'moment';\n\nexport function form2api(formParams, callbackParams) {\n let pickUpTime;\n let dropOffTime;\n if (formParams.pickUpTime || formParams.dropOffTime) {\n pickUpTime = moment(\n `${moment(formParams.pickUpDate).format('YYYY/MM/DD')} ${formParams.pickUpTime}`,\n ).format('YYYY-MM-DDTHH:mm:ss');\n dropOffTime = moment(\n `${moment(formParams.dropOffDate).format('YYYY/MM/DD')} ${formParams.dropOffTime}`,\n ).format('YYYY-MM-DDTHH:mm:ss');\n } else {\n pickUpTime = formParams.pickUpDate;\n dropOffTime = formParams.dropOffDate;\n }\n\n let searchLocations = {};\n if (formParams.airportSearch) {\n searchLocations = {\n airport_search: formParams.airportSearch,\n pick_up_location_airport_code: formParams.pickUpLocationAirportCode,\n drop_off_location_airport_code: formParams.dropOffLocationAirportCode,\n };\n } else {\n searchLocations = {\n airport_search: formParams.airportSearch,\n pick_up_geo_location: {\n address: formParams.pickUpGeoLocationAddress,\n latitude: formParams.pickUpGeoLocationLatitude,\n longitude: formParams.pickUpGeoLocationLongitude,\n },\n drop_off_geo_location: {\n address: formParams.dropOffGeoLocationAddress,\n latitude: formParams.dropOffGeoLocationLatitude,\n longitude: formParams.dropOffGeoLocationLongitude,\n },\n };\n }\n\n const searchParams = {\n ...searchLocations,\n pick_up_time: pickUpTime,\n drop_off_time: dropOffTime,\n driver_age: formParams.driverAge,\n currency: formParams.currency,\n callback_params: callbackParams,\n accounts: formParams.accountSettings,\n preselect_travelers: formParams.preselectTravelers,\n };\n\n if (\n formParams.vendorPreferences &&\n formParams.vendorPreferences.codes &&\n formParams.vendorPreferences.codes.length > 0\n ) {\n searchParams.vendor_preferences = {\n vendor_code: formParams.vendorPreferences.codes.map(code => code.value),\n type: formParams.vendorPreferences.type,\n };\n }\n\n return searchParams;\n}\n\nexport function api2form(apiParams) {\n const newParams = { ...apiParams };\n\n const pickUpTime = moment(newParams.pickUpTime);\n const dropOffTime = moment(newParams.dropOffTime);\n\n newParams.pickUpTime = pickUpTime.format('HH:mm');\n newParams.dropOffTime = dropOffTime.format('HH:mm');\n newParams.pickUpDate = pickUpTime.format('YYYY/MM/DD');\n newParams.dropOffDate = dropOffTime.format('YYYY/MM/DD');\n\n if (newParams.vendorPreferences) {\n newParams.vendorPreferences.codes = newParams.vendorPreferences.vendorCode?.map(code => ({\n value: code,\n label: code,\n }));\n\n delete newParams.vendorPreferences.vendorCode;\n }\n\n if (newParams.airportSearch) {\n newParams.pickUpLocationAirportCode = newParams.pickUpLocationId;\n newParams.dropOffLocationAirportCode = newParams.dropOffLocationId;\n delete newParams.pickUpLocationId;\n delete newParams.dropOffLocationId;\n } else {\n newParams.pickUpGeoLocationAddress = newParams.pickUpGeoLocation.address;\n newParams.pickUpGeoLocationLatitude = newParams.pickUpGeoLocation.latitude;\n newParams.pickUpGeoLocationLongitude = newParams.pickUpGeoLocation.longitude;\n newParams.dropOffGeoLocationAddress = newParams.dropOffGeoLocation.address;\n newParams.dropOffGeoLocationLatitude = newParams.dropOffGeoLocation.latitude;\n newParams.dropOffGeoLocationLongitude = newParams.dropOffGeoLocation.longitude;\n\n delete newParams.pickUpGeoLocation;\n delete newParams.dropOffGeoLocation;\n }\n\n if (newParams.accounts) {\n newParams.accountSettings = snakeCaseKeys(newParams.accounts);\n delete newParams.accounts;\n }\n\n return newParams;\n}\n","import snakeCaseKeys from 'snakecase-keys';\n\nexport function form2api(formParams, callbackParams) {\n const searchParams = {\n trips: formParams.trips.map(trip => ({\n origin: trip.origin,\n destination: trip.destination,\n date: trip.date,\n departure_time: trip.departureTime === 'anytime' ? null : trip.departureTime,\n arrival_time: trip.arrivalTime === '' ? null : trip.arrivalTime,\n cabin_class: trip.cabinClass,\n booking_class: trip.bookingClass,\n alliance_preferences: trip.alliancePreferences,\n })),\n adults: formParams.adults,\n children: formParams.children,\n infants: formParams.infants,\n currency: formParams.currency,\n accounts: formParams.accountSettings,\n flexible: formParams.flexible,\n itinerary_search: formParams.itinerarySearch,\n non_stop: formParams.nonStop,\n only_flexible_flight: formParams.onlyFlexibleFlight,\n only_bag_included_flight: formParams.onlyBagIncludedFlight,\n exclude_codeshare_flights: formParams.excludeCodeShareFlight,\n booking_id: formParams.bookingId,\n callback_params: callbackParams,\n preselect_travelers: formParams.preselectTravelers,\n include_welltravel_results: formParams.includeWelltravelResults,\n passenger_type_code: formParams.passengerTypeCode,\n };\n if (\n formParams.airlinePreferences &&\n formParams.airlinePreferences.carriers &&\n formParams.airlinePreferences.carriers.length\n ) {\n searchParams.airline_preferences = {\n carriers: formParams.airlinePreferences.carriers.map(carrier => carrier.value),\n type: formParams.airlinePreferences.type,\n };\n }\n\n return searchParams;\n}\n\nexport function api2form(apiParams) {\n const { adults, children, infants } = apiParams;\n const totalTravelerCount = adults + children + infants;\n\n const newParams = {\n ...apiParams,\n trips: apiParams.trips.map(trip => ({\n ...trip,\n departureTime: trip.departureTime ? trip.departureTime : 'anytime',\n identifier: trip.id,\n })),\n totalTravelerCount,\n };\n newParams.excludeCodeShareFlight = apiParams.excludeCodeshareFlights;\n delete newParams.excludeCodeshareFlights;\n delete newParams.includeDuplicates;\n\n if (newParams.accounts) {\n newParams.accountSettings = snakeCaseKeys(newParams.accounts);\n delete newParams.accounts;\n }\n\n return newParams;\n}\n","const cabinClassOptions = () => [\n { label: I18n.t('cabin_classes.economy'), value: 'economy' },\n { label: I18n.t('cabin_classes.premium_economy'), value: 'premium_economy' },\n { label: I18n.t('cabin_classes.business'), value: 'business' },\n { label: I18n.t('cabin_classes.first'), value: 'first' },\n];\n\nconst bookingClassOptionsByRule = {\n first: [\n { label: 'A', value: 'A' },\n { label: 'F', value: 'F' },\n ],\n business: [\n { label: 'J', value: 'J' },\n { label: 'C', value: 'C' },\n { label: 'D', value: 'D' },\n { label: 'I', value: 'I' },\n { label: 'Z', value: 'Z' },\n ],\n premium_economy: [\n { label: 'W', value: 'W' },\n { label: 'E', value: 'E' },\n ],\n economy: [\n { label: 'B', value: 'B' },\n { label: 'E', value: 'E' },\n { label: 'H', value: 'H' },\n { label: 'K', value: 'K' },\n { label: 'L', value: 'L' },\n { label: 'M', value: 'M' },\n { label: 'N', value: 'N' },\n { label: 'O', value: 'O' },\n { label: 'Q', value: 'Q' },\n { label: 'S', value: 'S' },\n { label: 'T', value: 'T' },\n { label: 'U', value: 'U' },\n { label: 'V', value: 'V' },\n { label: 'W', value: 'W' },\n { label: 'X', value: 'X' },\n { label: 'Y', value: 'Y' },\n ],\n};\n\nconst preferredAllianceOptions = () => [\n { label: I18n.t('alliance_preference.star_alliance'), value: 'star_alliance' },\n { label: I18n.t('alliance_preference.sky_team'), value: 'sky_team' },\n { label: I18n.t('alliance_preference.one_world'), value: 'one_world' },\n];\n\nconst filterTypeOptions = () => [\n { value: 'preferred', label: I18n.t('components.ibe.search_form.flight.label.preferred') },\n { value: 'exclusive', label: I18n.t('components.ibe.search_form.flight.label.exclusive') },\n];\n\nexport {\n filterTypeOptions,\n preferredAllianceOptions,\n bookingClassOptionsByRule,\n cabinClassOptions,\n};\n","import snakeCaseKeys from 'snakecase-keys';\n\nexport function form2api(formParams, callbackParams) {\n const childrenData = formParams.childrenData || formParams.children;\n const searchParams = {\n check_in: formParams.checkIn,\n check_out: formParams.checkOut,\n number_of_rooms: formParams.numberOfRooms,\n adults: formParams.adults,\n children: childrenData,\n currency: formParams.currency,\n callback_params: callbackParams,\n accounts: formParams.accountSettings,\n preselect_travelers: formParams.preselectTravelers,\n };\n\n if (formParams.latitude && formParams.longitude) {\n searchParams.geo_location = {\n address: formParams.address,\n latitude: formParams.latitude,\n longitude: formParams.longitude,\n };\n } else {\n searchParams.place_id = formParams.placeId;\n }\n\n return searchParams;\n}\n\nexport function api2form(apiParams) {\n const newParams = { ...apiParams };\n if (newParams.geoLocation) {\n newParams.address = newParams.geoLocation.address;\n newParams.latitude = newParams.geoLocation.latitude;\n newParams.longitude = newParams.geoLocation.longitude;\n delete newParams.geoLocation;\n }\n\n if (newParams.accounts) {\n newParams.accountSettings = snakeCaseKeys(newParams.accounts);\n delete newParams.accounts;\n }\n\n newParams.childrenData = newParams.children;\n newParams.children = newParams.childrenData.length;\n\n return newParams;\n}\n","import PropTypes from 'prop-types';\n\nconst AirportShape = PropTypes.shape({\n name: PropTypes.string.isRequired,\n code: PropTypes.string.isRequired,\n placeName: PropTypes.string.isRequired,\n countryName: PropTypes.string.isRequired,\n});\n\nexport default AirportShape;\n","import PropTypes from 'prop-types';\n\nexport default PropTypes.shape({\n id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n name: PropTypes.string.isRequired,\n pictureUrl: PropTypes.string.isRequired,\n description: PropTypes.string.isRequired,\n price: PropTypes.string.isRequired,\n currency: PropTypes.string.isRequired,\n vatPercentage: PropTypes.string.isRequired,\n vatAmount: PropTypes.string.isRequired,\n});\n","import React, { useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport Card from '@wtag/rcl-card';\nimport { SidePanel } from '@wtag/react-comp-lib';\nimport { FormatDateTime, DATE_FORMAT_SHORT_WITH_TIME } from 'sharedWebpack/helpers/dateTime';\nimport DateTimeLocaleInterpolationWrapper from 'sharedWebpack/DateTimeLocaleInterpolationWrapper';\nimport AirportChangeSegment from 'sharedWebpack/AirportChangeSegment';\n\nconst StopoverSidePanel = props => {\n const { stopovers, airports, findAirport, showStopovers, onClick } = props;\n\n const [airportChangeMap, setAirportChangeMap] = useState(new Map());\n\n const viewAirportDetails = airport => {\n let airportDetails = airport.name;\n\n if (airport.placeName) {\n airportDetails += `, ${airport.placeName}`;\n }\n\n if (airport.countryName) {\n airportDetails += `, ${airport.countryName}`;\n }\n\n return airportDetails;\n };\n\n const stopoversWithAirportChanges = stopovers\n .filter(stopover => stopover.airportChange)\n .map(stopover => stopover.airportChange);\n\n useEffect(() => {\n const newAirportChangeMap = new Map();\n\n stopoversWithAirportChanges.forEach(stopover => {\n newAirportChangeMap.set(stopover.departureAirportCode, {\n arrival: stopover.arrivalAirportCode,\n departure: stopover.departureAirportCode,\n });\n });\n\n setAirportChangeMap(newAirportChangeMap);\n }, [stopovers]);\n\n return (\n {subtitle}
\n \n {subtitle}\n
\n )}\n \n
\n {airport && airport.name && (\n \n {airport && (\n
\n \n {viewAirportDetails(airport)}\n
\n )}\n \n
\n {hasAirportChange && (\n \n
\n );\n};\n\nAmenity.propTypes = {\n amenity: PropTypes.string.isRequired,\n};\n\nexport default Amenity;\n","import React, { useState } from 'react';\nimport Button from '@wtag/rcl-button';\nimport { Textarea } from '@wtag/react-comp-lib';\nimport Icon from '@wtag/rcl-icon';\nimport Modal from 'sharedWebpack/Modal';\nimport PropTypes from 'prop-types';\nimport './styles.scss';\n\nconst OutOfPolicyJustificationModal = ({\n modalOpen,\n setModalOpen,\n onConfirm,\n multipleApplicability,\n}) => {\n const [value, setValue] = useState('');\n\n const onModalClose = () => {\n setModalOpen(false);\n };\n\n return (\n \n
\n \n {I18n.t(`components.ibe.amenities.${props.amenity}`)}\n
\n \n
\n \n }\n isModalVisible={modalOpen}\n onOutsideClick={onModalClose}\n footer={\n \n setValue(event.target.value)}\n />\n
\n \n );\n};\n\nOutOfPolicyJustificationModal.defaultProps = {\n multipleApplicability: false,\n};\n\nOutOfPolicyJustificationModal.propTypes = {\n modalOpen: PropTypes.bool.isRequired,\n setModalOpen: PropTypes.func.isRequired,\n onConfirm: PropTypes.func.isRequired,\n multipleApplicability: PropTypes.bool,\n};\n\nexport default OutOfPolicyJustificationModal;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nconst CarAttributeItem = ({ header, value, className }) => (\n \n {I18n.t('components.ibe.out_of_policy_reason.modal_hint')}\n
\n {multipleApplicability && (\n \n {I18n.t('components.ibe.out_of_policy_reason.multiple_out_of_policy')}\n
\n )}\n \n {header}\n {value}\n
\n);\n\nCarAttributeItem.defaultProps = {\n className: null,\n};\n\nCarAttributeItem.propTypes = {\n className: PropTypes.string,\n header: PropTypes.string.isRequired,\n value: PropTypes.oneOfType([PropTypes.node, PropTypes.string]).isRequired,\n};\n\nexport default CarAttributeItem;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { I18nText } from '@wtag/react-comp-lib';\nimport Button from '@wtag/rcl-button';\nimport Icon from '@wtag/rcl-icon';\nimport DateTime from 'sharedWebpack/DateTime';\nimport getCarInformation from 'sharedWebpack/IBE/lib/helpers/getCarInformation';\nimport getCarChannelIdentifier from 'sharedWebpack/IBE/lib/helpers/getCarChannelIdentifier';\nimport WELLTRAVEL from 'sharedWebpack/IBE/lib/helpers/welltravelChannel';\nimport ChannelListTag from 'sharedWebpack/IBE/helpers/ChannelListTag';\nimport useViewMode from 'sharedWebpack/useViewMode';\nimport { DATE_FORMAT_NUMERICAL_SHORT_WITH_TIME } from 'sharedWebpack/helpers/dateTime';\nimport { DESKTOP_DEVICE } from 'sharedWebpack/old/libraries/responsiveHelpers';\nimport CarPriceWithLabel from '../CarPriceWithLabel';\nimport CarAttributeItem from '../CarAttributeItem';\nimport CarType from '../CarType';\n\nconst CarAccordionItemHeader = ({\n isAlreadySelectedInCart,\n onContinueButtonClick,\n carInformation,\n pickUpDate,\n dropOffDate,\n vendorName,\n priceDetails,\n source,\n laymanMode,\n isAccordionActive,\n}) => {\n const { make, name, category, acrissCode } = carInformation;\n const { currency, ratePerDay } = priceDetails;\n\n const isWellTravelChannel = source.supplier === WELLTRAVEL;\n const channelIdentifier = getCarChannelIdentifier(source);\n const isChannelTagDisplayed = !laymanMode && !!channelIdentifier;\n const isLargeScreen = useViewMode() === DESKTOP_DEVICE;\n\n const buttonText = () => {\n if (isAlreadySelectedInCart) {\n return \n {isChannelTagDisplayed && (\n
\n \n \n );\n};\n\nCarAccordionItemHeader.propTypes = {\n isAlreadySelectedInCart: PropTypes.bool.isRequired,\n onContinueButtonClick: PropTypes.func.isRequired,\n carInformation: PropTypes.shape({\n make: PropTypes.string,\n name: PropTypes.string,\n category: PropTypes.string,\n acrissCode: PropTypes.string,\n }).isRequired,\n pickUpDate: PropTypes.string.isRequired,\n dropOffDate: PropTypes.string.isRequired,\n vendorName: PropTypes.string.isRequired,\n priceDetails: PropTypes.shape({\n currency: PropTypes.string,\n ratePerDay: PropTypes.string,\n }).isRequired,\n source: PropTypes.shape({\n supplier: PropTypes.string,\n }).isRequired,\n laymanMode: PropTypes.bool.isRequired,\n isAccordionActive: PropTypes.bool.isRequired,\n};\n\nexport default CarAccordionItemHeader;\n","import React, { Fragment, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { hot } from 'react-hot-loader';\nimport classNames from 'classnames';\nimport { AccordionItem } from '@wtag/rcl-accordion';\nimport CarImage from '../CarImage';\nimport CarAccordionItemHeader from '../CarAccordionItemHeader';\nimport CarLocationDetails from '../CarLocationDetails';\nimport InsurancesAndLiabilities from '../InsurancesAndLiabilities';\nimport SearchCarInfo from '../SearchCarInfo';\nimport FacilityItemLinks from '../FacilityItemLinks';\nimport Mileage from '../Mileage';\nimport OutOfPolicyJustificationModal from '../../OutOfPolicyJustificationModal';\nimport { carDetailsShape } from '../../../config/shapes';\nimport './styles.scss';\n\nconst CarCompactView = ({\n details,\n onCarSelect,\n onSelect,\n setSidePanelTitle,\n setSidePanelBody,\n setOpenSidePanel,\n laymanMode,\n isAlreadySelectedInCart,\n}) => {\n const {\n id,\n facilities,\n vendor,\n car,\n pickUp,\n dropOff,\n currency,\n ratePerDay,\n source,\n corporateDeal,\n labels,\n policiesReasons,\n approvalRequired,\n payLater,\n } = details;\n\n const {\n insurances,\n liability,\n otherFacilities,\n mileage,\n seats,\n doors,\n airConditioned,\n fuelType,\n airBag,\n } = facilities;\n\n const carInformationGroup = {\n approvalRequired,\n payLater,\n policiesReasons,\n labels,\n corporateDeal,\n };\n\n const carFacilities = {\n seats,\n doors,\n airConditioned,\n fuelType,\n airBag,\n };\n\n const [isAccordionActive, setIsAccordionActive] = useState(false);\n const [isPolicyJustificationModalOpen, setIsPolicyJustificationModalOpen] = useState(false);\n\n const isOutOfPolicy = labels.outOfPolicy;\n const hasMileage = mileage && mileage.length > 0;\n\n const handleAccordionClick = () => {\n setIsAccordionActive(previousState => !previousState);\n };\n\n const handleContinueToCart = (justification = null) => {\n onCarSelect(true);\n onSelect(details, justification);\n };\n\n const handleContinueButtonClick = event => {\n event.stopPropagation();\n\n if (isOutOfPolicy) {\n setIsPolicyJustificationModalOpen(true);\n } else {\n handleContinueToCart();\n }\n };\n\n const handleShowSidePanel = (sidePanelTitle, sidePanelBody) => {\n setSidePanelTitle(sidePanelTitle);\n setSidePanelBody(sidePanelBody);\n setOpenSidePanel();\n };\n\n const facilityItemLinksInMobileView = (\n \n
\n )}\n \n \n \n
\n \n {vendorName}\n {getCarInformation(name, make)}\n
\n \n \n
\n \n
\n )}\n \n
\n \n );\n};\n\nCarCompactView.propTypes = {\n details: PropTypes.shape(carDetailsShape).isRequired,\n isAlreadySelectedInCart: PropTypes.bool.isRequired,\n onCarSelect: PropTypes.func.isRequired,\n onSelect: PropTypes.func.isRequired,\n laymanMode: PropTypes.bool.isRequired,\n setOpenSidePanel: PropTypes.func.isRequired,\n setSidePanelBody: PropTypes.func.isRequired,\n setSidePanelTitle: PropTypes.func.isRequired,\n};\n\nconst CarCompactViewWithContext = (props, context) => \n
\n \n
\n \n
\n \n
\n {hasMileage && (\n \n
\n \n
\n \n
\n )}\n {facilityItemLinksInMobileView}
\n \n
\n );\n};\n\nCarLocationAndTime.propTypes = {\n displayDateTime: PropTypes.bool.isRequired,\n label: PropTypes.string.isRequired,\n locationDetails: PropTypes.shape(LocationDetailsShape).isRequired,\n};\n\nconst CarLocationDetails = ({ displayDateTimeHeader, pickUpDetails, dropOffDetails }) => (\n \n
\n {label}
\n {displayDateTime && (\n \n
\n )}\n {location}
\n \n
\n);\n\nCarLocationDetails.defaultProps = {\n displayDateTimeHeader: false,\n};\n\nCarLocationDetails.propTypes = {\n displayDateTimeHeader: PropTypes.bool,\n pickUpDetails: PropTypes.shape(LocationDetailsShape).isRequired,\n dropOffDetails: PropTypes.shape(LocationDetailsShape).isRequired,\n};\n\nexport default CarLocationDetails;\n","import React, { Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport Amount from 'sharedWebpack/Amount';\n\nconst CarPriceWithLabel = ({ label, currency, price }) => (\n \n
\n \n
\n \n {label}\n
\n);\n\nMenuLabel.defaultProps = {\n className: null,\n};\n\nMenuLabel.propTypes = {\n className: PropTypes.string,\n label: PropTypes.node.isRequired,\n onClick: PropTypes.func.isRequired,\n};\n\nconst PriceMenu = ({ label, children }) => {\n const [isPriceMenuVisible, setIsPriceMenuVisible] = useState(false);\n\n const handlePriceMenuOutsideClick = () => {\n setIsPriceMenuVisible(false);\n };\n\n const toggleLabelClick = () => {\n setIsPriceMenuVisible(previousState => !previousState);\n };\n\n return (\n {children}
\n \n );\n};\n\nPriceMenu.defaultProps = {\n children: null,\n};\n\nPriceMenu.propTypes = {\n label: PropTypes.node.isRequired,\n children: PropTypes.node,\n};\n\nexport default PriceMenu;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { I18nText } from '@wtag/react-comp-lib';\nimport Amount from 'sharedWebpack/Amount';\nimport './styles.scss';\n\nconst PriceMenuItem = ({ label, amount, currency, isPriceBold, isFree }) => (\n \n {label}\n {isFree ? (\n
\n);\n\nPriceMenuItem.defaultProps = {\n isPriceBold: false,\n isFree: false,\n};\n\nPriceMenuItem.propTypes = {\n label: PropTypes.oneOfType([PropTypes.node, PropTypes.string]).isRequired,\n amount: PropTypes.string.isRequired,\n currency: PropTypes.string.isRequired,\n isPriceBold: PropTypes.bool,\n isFree: PropTypes.bool,\n};\n\nexport default PriceMenuItem;\n","import React, { Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport PriceMenu from '../../PriceMenu';\nimport PriceMenuItem from '../../PriceMenuItem';\nimport CarPriceWithLabel from '../CarPriceWithLabel';\nimport './styles.scss';\n\nconst CarPriceWithBreakdown = ({ className, breakdownDetails, laymanMode }) => {\n const {\n currency,\n ratePerDay,\n durationInDays,\n grossTaxes,\n marginBreakdown,\n grossTotal,\n car,\n } = breakdownDetails;\n\n const { category, acrissCode } = car;\n const hasCarDetailsAndRatePerDay = category && acrissCode && ratePerDay;\n const hasDurationInDaysAndGrossTotal = durationInDays && grossTotal;\n\n return (\n \n
\n );\n};\n\nCarPriceWithBreakdown.defaultProps = {\n className: null,\n};\n\nCarPriceWithBreakdown.propTypes = {\n className: PropTypes.string,\n laymanMode: PropTypes.bool.isRequired,\n breakdownDetails: PropTypes.shape({\n currency: PropTypes.string,\n ratePerDay: PropTypes.string,\n durationInDays: PropTypes.number,\n grossTaxes: PropTypes.string,\n marginBreakdown: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.string,\n name: PropTypes.string,\n currency: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,\n total: PropTypes.string,\n }),\n ).isRequired,\n grossTotal: PropTypes.string,\n car: PropTypes.shape({\n category: PropTypes.string,\n acrissCode: PropTypes.string,\n }).isRequired,\n }).isRequired,\n};\n\nexport default CarPriceWithBreakdown;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport getCarInformation from 'sharedWebpack/IBE/lib/helpers/getCarInformation';\nimport CarType from '../CarType';\nimport CarLocationDetails from '../CarLocationDetails';\nimport './styles.scss';\n\nconst CarStandardDetails = ({ className, carInformation, pickUpDetails, dropOffDetails }) => {\n const { make, name, category, acrissCode } = carInformation;\n const carInformationTitle = getCarInformation(name, make);\n\n return (\n \n \n {category}\n \n {I18n.t(\n 'admin.components.products.options.automation_style.acriss_code_with_per_day.label',\n {\n acriss_code: acrissCode,\n },\n )}\n \n }\n currency={currency}\n amount={ratePerDay}\n />\n )}\n {hasDurationInDaysAndGrossTotal && (\n
\n \n
\n );\n};\n\nconst LocationDetailsShape = {\n location: PropTypes.string,\n localtime: PropTypes.string,\n};\n\nCarStandardDetails.defaultProps = {\n className: null,\n};\n\nCarStandardDetails.propTypes = {\n className: PropTypes.string,\n carInformation: PropTypes.string.isRequired,\n pickUpDetails: PropTypes.shape(LocationDetailsShape).isRequired,\n dropOffDetails: PropTypes.shape(LocationDetailsShape).isRequired,\n};\n\nexport default CarStandardDetails;\n","import React, { Fragment, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { hot } from 'react-hot-loader';\nimport Card from '@wtag/rcl-card';\nimport { I18nText } from '@wtag/react-comp-lib';\nimport Button from '@wtag/rcl-button';\nimport ChannelListTag from 'sharedWebpack/IBE/helpers/ChannelListTag';\nimport WELLTRAVEL from 'sharedWebpack/IBE/lib/helpers/welltravelChannel';\nimport getCarImageUrl from 'sharedWebpack/IBE/lib/helpers/getCarImageUrl';\nimport getCarChannelIdentifier from 'sharedWebpack/IBE/lib/helpers/getCarChannelIdentifier';\nimport FacilityItemLinks from '../FacilityItemLinks';\nimport CarImage from '../CarImage';\nimport CarPriceWithBreakdown from '../CarPriceWithBreakdown';\nimport OutOfPolicyJustificationModal from '../../OutOfPolicyJustificationModal';\nimport CarStandardDetails from '../CarStandardDetails';\nimport Mileage from '../Mileage';\nimport SearchCarInfo from '../SearchCarInfo';\nimport CarType from '../CarType';\nimport { carDetailsShape } from '../../../config/shapes';\nimport InsurancesAndLiabilities from '../InsurancesAndLiabilities';\nimport './styles.scss';\n\nconst CarStandardView = ({\n details,\n onCarSelect,\n onSelect,\n setSidePanelTitle,\n setSidePanelBody,\n setOpenSidePanel,\n laymanMode,\n isAlreadySelectedInCart,\n}) => {\n const {\n id,\n facilities,\n vendor,\n car,\n pickUp,\n dropOff,\n currency,\n ratePerDay,\n durationInDays,\n grossRate,\n grossTaxes,\n marginBreakdown,\n grossTotal,\n source,\n corporateDeal,\n labels,\n policiesReasons,\n approvalRequired,\n payLater,\n } = details;\n\n const { category, acrissCode } = car;\n\n const {\n insurances,\n liability,\n otherFacilities,\n mileage,\n seats,\n doors,\n airConditioned,\n fuelType,\n airBag,\n } = facilities;\n\n const breakdownDetails = {\n currency,\n ratePerDay,\n durationInDays,\n grossRate,\n grossTaxes,\n marginBreakdown,\n grossTotal,\n car,\n };\n\n const informationLabelGroup = {\n approvalRequired,\n payLater,\n policiesReasons,\n labels,\n corporateDeal,\n };\n\n const [isPolicyJustificationModalOpen, setIsPolicyJustificationModalOpen] = useState(false);\n\n const isOutOfPolicy = labels.outOfPolicy;\n const isWellTravelChannel = source.supplier === WELLTRAVEL;\n const channelIdentifier = getCarChannelIdentifier(source);\n const hasMileage = mileage && mileage.length > 0;\n\n const continueToCart = (justification = null) => {\n onCarSelect(true);\n onSelect(details, justification);\n };\n\n const buttonText = () => {\n if (isAlreadySelectedInCart) {\n return \n
\n {carInformationTitle}
\n\n {carInformationTitle}\n
\n \n
\n \n
\n );\n\n const priceBreakdownWithActionsInMobileView = (\n \n
\n {hasMileage && (\n \n
\n \n
\n )}\n \n
\n \n
\n \n
\n )}\n \n
\n \n ({I18n.t('admin.components.products.options.automation_style.per_day.label')})\n
\n \n
\n \n \n \n
\n );\n};\n\nCarStandardView.propTypes = {\n details: PropTypes.shape(carDetailsShape).isRequired,\n isAlreadySelectedInCart: PropTypes.bool.isRequired,\n onCarSelect: PropTypes.func.isRequired,\n onSelect: PropTypes.func.isRequired,\n laymanMode: PropTypes.bool.isRequired,\n setOpenSidePanel: PropTypes.func.isRequired,\n setSidePanelBody: PropTypes.func.isRequired,\n setSidePanelTitle: PropTypes.func.isRequired,\n};\n\nconst CarStandardViewWithContext = (props, context) => \n
\n \n \n })
\n \n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n {priceBreakdownInDesktopView}\n
\n {priceBreakdownWithActionsInMobileView}
\n {!laymanMode && !!channelIdentifier && (\n \n
\n )}\n \n
\n );\n } else if (amount !== '0.0' && modifierType === null) {\n return (\n \n
\n );\n }\n else if(modifierType === 'percentage'){\n return (\n \n {I18n.t('components.ibe.car.facilities.modifiers.percentage', {amount})} \n
\n ); \n }\n return (\n \n
\n );\n } else if (amount === null && modifierType === 'self_insured') {\n return (\n \n
\n );\n } else if (amount === null && modifierType === 'full_value') {\n return I18n.t(modifierType, { scope: 'components.ibe.car.facilities.modifiers' });\n }\n return I18n.t('components.ibe.search_results.car.label.price_not_provided');\n };\n\n return checkModifier(props.amount, props.currency, props.modifierType);\n};\n\nModifierDetails.propTypes = {\n currency: PropTypes.string.isRequired,\n amount: PropTypes.string.isRequired,\n modifierType: PropTypes.string.isRequired,\n};\n\nexport default ModifierDetails;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Icon from '@wtag/rcl-icon';\nimport ModifierDetails from './ModifierDetails';\n\nimport './styles.scss';\n\nconst Facility = props => {\n const typeToIconMapper = {\n insurance: 'fareBrandIcon',\n facilities: 'bookingClass',\n liabilities: 'singlePolicy',\n };\n\n let iconColor;\n\n if (props.type === 'liabilities') {\n iconColor = 'warning';\n } else if (props.amount === '0.0') {\n iconColor = 'success';\n } else {\n iconColor = 'default';\n }\n\n return (\n \n
\n );\n};\n\nFacility.defaultProps = {\n modifier: null,\n type: 'facilities',\n};\n\nFacility.propTypes = {\n facility: PropTypes.string.isRequired,\n amount: PropTypes.string.isRequired,\n currency: PropTypes.string.isRequired,\n modifier: PropTypes.string,\n type: PropTypes.string,\n};\n\nexport default Facility;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Link from '@wtag/rcl-link';\nimport Icon from '@wtag/rcl-icon';\nimport classNames from 'classnames';\n\nconst FacilityItemLink = ({\n className,\n label,\n onClick,\n sidePanelTitle,\n sidePanelBody,\n showIcon,\n iconLabel,\n}) => {\n const handleOnClick = () => {\n onClick(sidePanelTitle, sidePanelBody);\n };\n\n return (\n \n
\n \n {props.facility}\n \n \n \n
\n \n {showIcon && (\n
\n );\n};\n\nFacilityItemLink.defaultProps = {\n className: null,\n sidePanelTitle: null,\n sidePanelBody: null,\n onClick: () => {},\n showIcon: false,\n iconLabel: null,\n};\n\nFacilityItemLink.propTypes = {\n className: PropTypes.string,\n label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,\n onClick: PropTypes.func,\n sidePanelTitle: PropTypes.oneOfType([\n PropTypes.node,\n PropTypes.string,\n PropTypes.instanceOf(null),\n ]),\n sidePanelBody: PropTypes.oneOfType([\n PropTypes.node,\n PropTypes.string,\n PropTypes.instanceOf(null),\n ]),\n showIcon: PropTypes.bool,\n iconLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),\n};\n\nexport default FacilityItemLink;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { I18nText } from '@wtag/react-comp-lib';\nimport FacilityListItem from '../FacilityListItem';\nimport FuelType from '../FuelType';\nimport { FacilitiesItemShape } from '../shapes/facilities';\n\nconst FacilityItemsList = ({ className, facilities }) => {\n const { seats, doors, airConditioned, fuelType, airBag } = facilities;\n\n return (\n \n \n
\n );\n};\n\nFacilityItemsList.defaultProps = {\n className: null,\n};\n\nFacilityItemsList.propTypes = {\n className: PropTypes.string,\n facilities: FacilitiesItemShape.isRequired,\n};\n\nexport default FacilityItemsList;\n","import PropTypes from 'prop-types';\n\nexport const FacilitiesItemShape = PropTypes.shape({\n seats: PropTypes.number,\n doors: PropTypes.number,\n airConditioned: PropTypes.bool,\n fuelType: PropTypes.string,\n airBag: PropTypes.bool,\n});\n\nexport const OtherFacilitiesItemShape = PropTypes.shape({\n amount: PropTypes.string,\n currency: PropTypes.string,\n modifier: PropTypes.string,\n type: PropTypes.string,\n});\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport Popover from '@wtag/rcl-popover';\nimport Link from '@wtag/rcl-link';\nimport { I18nText } from '@wtag/react-comp-lib';\nimport FacilityItemsList from '../FacilityItemsList';\nimport FacilityItemLink from '../FacilityItemLink';\nimport FacilityTypeList from '../FacilityTypeList';\nimport GenericFacility from '../GenericFacility';\nimport { FacilitiesItemShape, OtherFacilitiesItemShape } from '../shapes/facilities';\n\nconst FacilityItemLinks = ({ className, facilities, otherFacilities, onShowSidePanel }) => {\n const [isPopoverVisible, setIsPopoverVisible] = useState(false);\n\n const hasFacilities = !!facilities;\n const hasOtherFacilities = otherFacilities && otherFacilities.length > 0;\n\n if (!hasFacilities && !hasOtherFacilities) {\n return null;\n }\n\n const toggleFacilitiesVisibility = () => {\n setIsPopoverVisible(prevSetIsPopoverVisible => !prevSetIsPopoverVisible);\n };\n\n return (\n \n
\n \n {seats && (\n
\n \n {hasFacilities && (\n
\n );\n};\n\nFacilityItemLinks.defaultProps = {\n className: null,\n onShowSidePanel: () => {},\n};\n\nFacilityItemLinks.propTypes = {\n className: PropTypes.string,\n facilities: PropTypes.arrayOf(FacilitiesItemShape).isRequired,\n otherFacilities: PropTypes.arrayOf(OtherFacilitiesItemShape).isRequired,\n onShowSidePanel: PropTypes.func,\n};\n\nexport default FacilityItemLinks;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Icon from '@wtag/rcl-icon';\n\nconst FacilityListItem = ({ className, label }) => (\n \n \n
\n )}\n {hasOtherFacilities && (\n \n
\n )}\n \n
\n );\n};\n\nSearchCarInfo.defaultProps = {\n className: null,\n laymanMode: false,\n onShowSidePanel: () => {},\n};\n\nSearchCarInfo.propTypes = {\n className: PropTypes.string,\n group: PropTypes.shape({\n cabinClasses: PropTypes.string.isRequired,\n bookingClasses: PropTypes.string.isRequired,\n overnight: PropTypes.bool.isRequired,\n policiesReasons: PropTypes.shape({\n preferred: PropTypes.string,\n outOfPolicy: PropTypes.string,\n approvalRequired: PropTypes.string,\n }),\n payLater: PropTypes.bool.isRequired,\n approvalRequired: PropTypes.bool.isRequired,\n labels: PropTypes.shape({\n preferred: PropTypes.bool,\n outOfPolicy: PropTypes.bool,\n }),\n corporateDeal: PropTypes.bool,\n }).isRequired,\n facilities: PropTypes.arrayOf(PropTypes.shape()).isRequired,\n otherFacilities: PropTypes.arrayOf(PropTypes.shape()).isRequired,\n laymanMode: PropTypes.bool,\n onShowSidePanel: PropTypes.func,\n};\n\nexport default SearchCarInfo;\n","import React, { useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport Icon from '@wtag/rcl-icon';\nimport { connect } from 'react-redux';\nimport { fetchAirlineInformations } from '../../actions/flight';\nimport LogoChip from './LogoChip';\nimport AirlinesPopup from './AirlinesPopup';\nimport { airlineCodeItemShape, airlineInformationItemShape } from './shapes';\n\nconst AirlineStandardLogos = ({\n className,\n airlineInformations,\n carriers,\n codes,\n onFetchAirlineInformations,\n maximumVisibleLogosCount,\n}) => {\n const availableCarriers = [...new Set(carriers)];\n\n const visibleLogos = availableCarriers\n .slice(0, maximumVisibleLogosCount)\n .filter(code => airlineInformations[code])\n .map(code => airlineInformations[code]);\n\n const visibleCodes = codes.slice(0, maximumVisibleLogosCount);\n\n const hiddenLogos = availableCarriers.length - maximumVisibleLogosCount;\n const hasHiddenLogos = hiddenLogos > 0;\n\n const hiddenCodes = codes.length - maximumVisibleLogosCount;\n const hasHiddenCodes = hiddenCodes > 0;\n\n useEffect(() => {\n availableCarriers.forEach(carrierCode => {\n if (!airlineInformations[carrierCode]) {\n onFetchAirlineInformations(carrierCode);\n }\n });\n }, []);\n\n return (\n \n
\n \n {bookingStatusLabels.map(({ iconName, iconColor, text, hint }) => (\n
\n )}\n \n {visibleLogos.map(item => (\n
\n );\n};\n\nAirlineStandardLogos.defaultProps = {\n className: null,\n maximumVisibleLogosCount: 3,\n};\n\nAirlineStandardLogos.propTypes = {\n className: PropTypes.string,\n carriers: PropTypes.arrayOf(PropTypes.string).isRequired,\n codes: PropTypes.arrayOf(PropTypes.shape(airlineCodeItemShape)).isRequired,\n airlineInformations: PropTypes.shape(airlineInformationItemShape).isRequired,\n onFetchAirlineInformations: PropTypes.func.isRequired,\n maximumVisibleLogosCount: PropTypes.number,\n};\n\nconst mapStateToProps = state => ({\n airlineInformations: state.flights.airlineInformations,\n});\n\nconst mapDispatchToProps = dispatch => ({\n onFetchAirlineInformations: code => dispatch(fetchAirlineInformations(code)),\n});\n\nexport default connect(mapStateToProps, mapDispatchToProps)(AirlineStandardLogos);\n","import React, { useState } from 'react';\nimport { connect } from 'react-redux';\nimport PropTypes from 'prop-types';\nimport Popover from '@wtag/rcl-popover';\nimport LogoChip from './LogoChip';\nimport { airlineCodeItemShape, airlineInformationItemShape } from './shapes';\n\nconst AirlinePopup = ({ title, codes, showAirlineCode, airlineInformations }) => {\n const [isPopoverVisible, setIsPopoverVisible] = useState(false);\n\n const togglePopover = event => {\n setIsPopoverVisible(prevState => !prevState);\n event.stopPropagation();\n };\n\n const getPopupLogoItem = (logo, code) => {\n const popupLogoInformation = airlineInformations[logo];\n\n if (!popupLogoInformation) {\n return null;\n }\n\n const airlineCode = showAirlineCode ? code : popupLogoInformation.code;\n\n return (\n \n
\n )}\n |
\n {visibleCodes.map(item => (\n \n
\n ))}\n {hasHiddenCodes && visibleCodes.length > 0 && (\n \n {popupLogoInformation &&
\n );\n };\n\n return (\n \n {popupLogoInformation && popupLogoInformation.name && (\n
\n {popupLogoInformation.name}
\n )}\n {airlineCode &&{airlineCode}
}\n\n {\n setIsVisible(false);\n }}\n size=\"tiny\"\n content={\n
\n \n );\n};\n\nBookingLabelWithHint.defaultProps = {\n iconColor: 'default',\n};\n\nBookingLabelWithHint.propTypes = {\n text: PropTypes.node.isRequired,\n hint: PropTypes.node.isRequired,\n iconName: PropTypes.string.isRequired,\n iconColor: PropTypes.string,\n};\n\nexport default BookingLabelWithHint;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport ClassNames from 'classnames';\nimport Amount from 'sharedWebpack/Amount';\n\nconst FareBrandItem = ({ id, className, label, currency, price }) => (\n \n
\n }\n direction=\"bottom\"\n >\n \n {text}
\n{hint}
\n\n
\n);\n\nFareBrandItem.defaultProps = {\n className: null,\n};\n\nFareBrandItem.propTypes = {\n className: PropTypes.string,\n id: PropTypes.string.isRequired,\n label: PropTypes.string.isRequired,\n currency: PropTypes.string.isRequired,\n price: PropTypes.string.isRequired,\n};\n\nexport default FareBrandItem;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport ClassNames from 'classnames';\n\nconst FareBrandList = ({ className, children }) => (\n {label}
\n {children}
\n);\n\nFareBrandList.defaultProps = {\n className: null,\n};\n\nFareBrandList.propTypes = {\n className: PropTypes.string,\n children: PropTypes.node.isRequired,\n};\n\nexport default FareBrandList;\n","import React, { useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport DateTime from 'sharedWebpack/DateTime';\nimport { connect } from 'react-redux';\nimport { fetchAirportDetails } from '../../../actions/flight';\nimport './style.scss';\n\nconst getAirportDetailsText = ({ name, placeName, country }) => {\n let airportDetailsText = '';\n\n if (name) {\n airportDetailsText = name;\n\n if (placeName && country) {\n airportDetailsText += `, ${placeName}, ${country}`;\n }\n }\n\n return airportDetailsText;\n};\n\nconst AirportStandardDetails = ({ airports, code, localTime, fetchAirportDetail }) => {\n const airport = airports[code];\n const name = airport && airport.name;\n const placeName = airport && airport.placeName;\n const country = airport && airport.countryName;\n const flag = airport && airport.countryFlag;\n\n useEffect(() => {\n if (!airport) {\n fetchAirportDetail(code);\n }\n }, [airport]);\n\n const airportDetailsText = getAirportDetailsText({ name, placeName, country });\n\n return (\n \n
\n );\n};\n\nconst mapStateToProps = state => ({\n airports: state.common.airports,\n});\n\nconst mapDispatchToProps = dispatch => ({\n fetchAirportDetail: code => dispatch(fetchAirportDetails(code)),\n});\n\nAirportStandardDetails.defaultProps = {\n airports: {},\n};\n\nAirportStandardDetails.propTypes = {\n code: PropTypes.string.isRequired,\n localTime: PropTypes.string.isRequired,\n airports: PropTypes.objectOf(\n PropTypes.shape({\n name: PropTypes.string.isRequired,\n countryName: PropTypes.string.isRequired,\n countryFlag: PropTypes.string.isRequired,\n placeName: PropTypes.string.isRequired,\n }),\n ),\n fetchAirportDetail: PropTypes.func.isRequired,\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(AirportStandardDetails);\n","import { connect } from 'react-redux';\nimport FlightDurationAndStopOvers from '.';\nimport {\n fetchAircraftType,\n fetchAirlineInformations,\n fetchAirportDetails,\n} from '../../../actions/flight';\n\nconst mapStateToProps = state => ({\n airports: state.common.airports,\n aircraftInformation: state.flights.aircraftTypes,\n airlineInformation: state.flights.airlineInformations,\n});\n\nconst mapDispatchToProps = dispatch => ({\n fetchAirportDetails: code => dispatch(fetchAirportDetails(code)),\n fetchAircraftType: code => dispatch(fetchAircraftType(code)),\n fetchAirlineInformation: code => dispatch(fetchAirlineInformations(code)),\n});\n\nexport default connect(mapStateToProps, mapDispatchToProps)(FlightDurationAndStopOvers);\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport AirportDetails from './AirportDetails/AirportStandardDetails';\nimport FlightDurationAndStopOvers from './FlightDurationAndStopOversStandard/FlightDurationAndStopOversStandard';\n\nconst FlightDetails = ({\n setSidePanelBody,\n setSidePanelTitle,\n setOpenSidePanel,\n group: {\n destinationTerminal,\n arrivalTime,\n destinationCode,\n tripDurationInMinutes,\n id,\n stopovers,\n segments,\n originTerminal,\n departureTime,\n originCode,\n },\n}) => (\n \n
\n \n
\n \n {code}\n 
\n
\n {!!airportDetailsText && (\n \n
\n )}\n {airportDetailsText}
\n \n
\n);\n\nFlightDetails.defaultProps = {\n setSidePanelBody: () => {},\n setSidePanelTitle: () => {},\n setOpenSidePanel: () => {},\n};\n\nFlightDetails.propTypes = {\n setSidePanelBody: PropTypes.func,\n setSidePanelTitle: PropTypes.func,\n setOpenSidePanel: PropTypes.func,\n group: PropTypes.shape({\n id: PropTypes.number.isRequired,\n originCode: PropTypes.string.isRequired,\n destinationCode: PropTypes.string.isRequired,\n segments: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\n stopovers: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\n arrivalTime: PropTypes.string.isRequired,\n departureTime: PropTypes.string.isRequired,\n originTerminal: PropTypes.string.isRequired,\n destinationTerminal: PropTypes.string.isRequired,\n tripDurationInMinutes: PropTypes.string.isRequired,\n }).isRequired,\n};\n\nexport default FlightDetails;\n","import React, { useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport Card from '@wtag/rcl-card';\nimport RclLink from '@wtag/rcl-link';\nimport withQueryParamsProvider from 'sharedWebpack/withQueryParamsProvider';\nimport { hot } from 'react-hot-loader';\nimport humanReadableDuration from 'sharedWebpack/HumanReadableDuration';\nimport { FormatDateTime, DATE_FORMAT_SHORT_WITH_TIME } from 'sharedWebpack/helpers/dateTime';\nimport DateTimeLocaleInterpolationWrapper from 'sharedWebpack/DateTimeLocaleInterpolationWrapper';\nimport JourneyPath from 'sharedWebpack/ItemWrapper/Flight/jounryPath';\nimport AirportChangeIndicator from 'sharedWebpack/AirportChangeIndicator';\nimport AirportChangeSegment from 'sharedWebpack/AirportChangeSegment';\nimport './style.scss';\nimport getFlightStopsCountLabel from '../../../../helpers/calculateStopoverStops';\nimport { LONG_TRANSIT_TIME } from '../../../../helpers/stopoverConstants';\n\nconst FlightDurationAndStopOvers = ({\n fetchAirportDetails,\n stopovers,\n airports,\n durationInMinutes,\n setSidePanelBody,\n setSidePanelTitle,\n setOpenSidePanel,\n}) => {\n const [airportChangeMap, setAirportChangeMap] = useState(new Map());\n const transitGapCount = getFlightStopsCountLabel(stopovers);\n\n const findAirport = airportCode =>\n (airports && airports[airportCode]) || fetchAirportDetails(airportCode);\n\n const viewAirportDetails = airport => {\n let airportDetails = airport.name;\n\n if (airport.placeName) {\n airportDetails += `, ${airport.placeName}`;\n }\n\n if (airport.countryName) {\n airportDetails += `, ${airport.countryName}`;\n }\n\n return airportDetails;\n };\n\n const stopoversDetails = () =>\n stopovers.map(stopover => {\n const airport = findAirport(stopover.airportCode);\n const airportCode = airport && airport.code;\n const hasAirportChange = airportChangeMap.has(airportCode);\n const airportChangeData = hasAirportChange && airportChangeMap.get(airportCode);\n const stopoverArrivalLocaltime =\n stopover.arrivalLocaltime || stopover.arrivalLocaltimeInUserTz;\n\n return (\n \n
\n \n
\n \n
\n \n
\n {airport && airport.name && (\n \n {airport && (\n
\n \n {viewAirportDetails(airport)}\n
\n )}\n \n
\n {hasAirportChange && (\n \n \n \n )}\n
\n );\n};\n\nFlightDurationAndStopOvers.propTypes = {\n setSidePanelBody: PropTypes.func.isRequired,\n setSidePanelTitle: PropTypes.func.isRequired,\n setOpenSidePanel: PropTypes.func.isRequired,\n airports: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\n stopovers: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\n durationInMinutes: PropTypes.string.isRequired,\n fetchAirportDetails: PropTypes.func.isRequired,\n};\n\nexport default hot(module)(withQueryParamsProvider(FlightDurationAndStopOvers));\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Card from '@wtag/rcl-card';\nimport { FormatDateTime, DATE_FORMAT_SHORT_WITH_TIME } from 'sharedWebpack/helpers/dateTime';\nimport DateTimeLocaleInterpolationWrapper from 'sharedWebpack/DateTimeLocaleInterpolationWrapper';\nimport AirportChangeSegment from 'sharedWebpack/AirportChangeSegment';\nimport './styles.scss';\n\nconst StopoverDetails = ({ findAirport, stopover, airportChangeMap }) => {\n const { airportCode, arrivalLocaltime, arrivalLocaltimeInUserTz } = stopover;\n const stopoverArrivalLocaltime = arrivalLocaltime || arrivalLocaltimeInUserTz;\n\n const viewAirportDetails = airport => {\n const { name, placeName, countryName } = airport;\n const values = [name, placeName, countryName].filter(value => !!value);\n return values.join(', ');\n };\n\n const airport = findAirport(airportCode);\n const updatedAirportCode = airport && airport.code;\n const hasAirportChange = airportChangeMap.has(updatedAirportCode);\n const airportChangeData = hasAirportChange && airportChangeMap.get(updatedAirportCode);\n\n return (\n \n {I18n.t('components.flight.duration')}:{' '}\n {humanReadableDuration(durationInMinutes)}\n
\n {stopovers.length > 0 && (\n \n \n {transitGapCount}\n \n
\n )}\n {stopovers.length > 0 && (\n \n
\n )}\n {stopovers.length > 0 && (\n \n {stopovers.map(stopOver => stopOver.airportCode).join(', ')} |{' '}\n {humanReadableDuration(tripTransitDurationInMinutes)}\n
\n \n {transitType >= LONG_TRANSIT_TIME\n ? I18n.t('components.flight.transit.long')\n : I18n.t('components.flight.transit.short')}\n
\n {!!changedAirportCodeText && (\n \n
\n {airport && airport.name && (\n \n {airport && (\n
\n {viewAirportDetails(airport)}
\n )}\n \n
\n {hasAirportChange && (\n \n \n {duration}\n {airportCode}\n {transitLabel}\n
\n);\n\nFlightStopover.defaultProps = {\n className: null,\n};\n\nFlightStopover.propTypes = {\n className: PropTypes.string,\n airportCode: PropTypes.string.isRequired,\n duration: PropTypes.string.isRequired,\n transitLabel: PropTypes.number.isRequired,\n};\n\nconst FlightDurationAndStopOvers = ({\n id,\n airlineInformation,\n aircraftInformation,\n fetchAirportDetails,\n segments,\n stopovers,\n airports,\n durationInMinutes,\n fetchAircraftType,\n fetchAirlineInformation,\n setSidePanelBody,\n setSidePanelTitle,\n setOpenSidePanel,\n}) => {\n const [query, setQuery] = useQueryParams({\n openedSidePanel: withDefault(StringParam, ''),\n });\n const [airportChangeMap, setAirportChangeMap] = useState(new Map());\n\n const transitGapCount = getFlightStopsCountLabel(stopovers);\n\n const findAirport = airportCode =>\n (airports && airports[airportCode]) || fetchAirportDetails(airportCode);\n\n const findAirline = airlineCode =>\n (airlineInformation &&\n Object.values(airlineInformation).find(airline => airline.code === airlineCode)) ||\n fetchAirlineInformation(airlineCode);\n\n const sidePanelKeyFromQuery = `segment-${id}`;\n const segmentSidePanelVisible = query.openedSidePanel === sidePanelKeyFromQuery;\n\n const showSegmentSidePanel = () => {\n setQuery({ openedSidePanel: sidePanelKeyFromQuery }, QUERY_UPDATE_TYPE);\n };\n\n const hideSidePanel = () => {\n setQuery({ openedSidePanel: '' }, QUERY_UPDATE_TYPE);\n };\n\n const stopoversWithAirportChanges = stopovers\n .filter(stopover => stopover.airportChange)\n .map(stopover => stopover.airportChange);\n\n const changedAirportCodeText = stopoversWithAirportChanges\n .map(airportItem => airportItem.arrivalAirportCode)\n .join(', ');\n\n const getTransitLabel = transitDuration => {\n const isTransitDurationLong = transitDuration >= LONG_TRANSIT_TIME;\n const transitLabel = isTransitDurationLong\n ? I18n.t('components.flight.transit.long')\n : I18n.t('components.flight.transit.short');\n\n return (\n\n
\n );\n};\n\nFlightDurationAndStopOvers.defaultProps = {\n setSidePanelBody: () => {},\n setSidePanelTitle: () => {},\n setOpenSidePanel: () => {},\n};\n\nFlightDurationAndStopOvers.propTypes = {\n setSidePanelBody: PropTypes.func,\n setSidePanelTitle: PropTypes.func,\n setOpenSidePanel: PropTypes.func,\n id: PropTypes.number.isRequired,\n airlineInformation: PropTypes.shape(airlineDataShape).isRequired,\n aircraftInformation: PropTypes.shape(airlineDataShape).isRequired,\n segments: PropTypes.arrayOf(PropTypes.shape(segmentItemShape)).isRequired,\n airports: PropTypes.arrayOf(PropTypes.shape(airportItemShape)).isRequired,\n stopovers: PropTypes.arrayOf(\n PropTypes.shape({\n airportCode: PropTypes.string,\n arrivalLocalTime: PropTypes.string,\n transitDurationsInMinutes: PropTypes.number,\n }),\n ).isRequired,\n durationInMinutes: PropTypes.string.isRequired,\n fetchAirportDetails: PropTypes.func.isRequired,\n fetchAircraftType: PropTypes.func.isRequired,\n fetchAirlineInformation: PropTypes.func.isRequired,\n};\n\nexport default hot(module)(withQueryParamsProvider(FlightDurationAndStopOvers));\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport ClassNames from 'classnames';\nimport Alert from 'sharedWebpack/Alert';\nimport Icon from '@wtag/rcl-icon';\nimport Tooltip from '@wtag/rcl-tooltip';\nimport './style.scss';\n\n/*\n \nkey properties meaning under flightSeatAlertStatus map,\n\n 'insufficientFlightSeatCount' means available seats = travellers\n 'noFlightSeatCount' means available seats status is not present\n 'lowOnFlightSeatCount' means available seats = travellers + 1\n 'sufficientFlightSeatCount' means available seats > travellers + 1\n\n*/\n\nconst flightSeatAlertStatus = {\n insufficientFlightSeatCount: {\n alertType: 'danger-light',\n alertIconType: 'danger',\n },\n noFlightSeatCount: {\n alertType: 'neutral',\n alertIconType: 'neutral',\n },\n lowOnFlightSeatCount: {\n alertType: 'warning-light',\n alertIconType: 'warning',\n },\n sufficientFlightSeatCount: {\n alertType: 'success-light',\n alertIconType: 'success',\n },\n};\n\nconst FlightSeatCountTag = ({ className, seatCount, travellerCount }) => {\n let alertText;\n let flightSeatStatus;\n let tooltipContent;\n let hasNoFlightSeatCount = false;\n let hasSufficientFlightSeats = false;\n\n if (seatCount !== null) {\n if (seatCount === travellerCount || seatCount < travellerCount) {\n flightSeatStatus = 'insufficientFlightSeatCount';\n tooltipContent = I18n.t('components.ibe.seat_status.insufficient_seat_details');\n } else if (seatCount === travellerCount + 1) {\n flightSeatStatus = 'lowOnFlightSeatCount';\n tooltipContent = I18n.t('components.ibe.seat_status.low_seat_details');\n } else if (seatCount > travellerCount + 1) {\n flightSeatStatus = 'sufficientFlightSeatCount';\n hasSufficientFlightSeats = true;\n }\n\n if (seatCount > 0 && hasSufficientFlightSeats) {\n alertText = I18n.t('components.ibe.seat_status.sufficient_seats_left', {\n count: seatCount,\n });\n } else if (seatCount > 0) {\n alertText = I18n.t('components.ibe.seat_status.seats_left', { count: seatCount });\n }\n } else {\n alertText = I18n.t('components.ibe.seat_status.no_seat_information');\n flightSeatStatus = 'noFlightSeatCount';\n hasNoFlightSeatCount = true;\n tooltipContent = I18n.t('components.ibe.seat_status.no_seat_details');\n }\n\n const flightSeatAlertStatusType = flightSeatAlertStatus[flightSeatStatus];\n\n if (flightSeatAlertStatusType) {\n return (\n \n \n {transitGapCount}\n \n \n ) : (\n \n {transitGapCount}\n \n )}\n
\n {humanReadableDuration(durationInMinutes)}
\n {stopovers.length > 0 ? (\n \n\n {stopovers.map(({ airportCode, transitDurationsInMinutes }) => (\n \n {I18n.t('admin.components.orders.items_tab.placeholder.show_itinerary')}\n \n \n
\n \n
\n {!laymanMode && (\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n {filteredFareBrands.slice(0, 3).map(fareBrandItem => (\n \n )}\n
\n \n
\n {totalFilteredFareBrands > 0 && (\n \n
\n \n
\n \n {totalFilteredFareBrands > 0 && (\n \n {filteredFareBrands\n .slice(0, 2)\n .map(({ id: fareBrandId, fareBrands, price: fareBrandPrice }) => (\n \n )}\n
\n \n
\n \n
\n \n
\n \n {updatedArray.length > 0 &&
\n )}\n \n \n );\n};\n\nGroupedFlightStandard.propTypes = {\n disableCard: PropTypes.bool.isRequired,\n selectedTripMap: PropTypes.shape({\n [PropTypes.number]: PropTypes.string,\n }).isRequired,\n group: PropTypes.shape({\n fareCalculations: PropTypes.arrayOf(\n PropTypes.shape({\n currency: PropTypes.string,\n legPrice: PropTypes.string,\n passengerType: PropTypes.oneOf(['adult', 'child', 'infant']),\n price: PropTypes.string,\n }),\n ).isRequired,\n price: PropTypes.shape(priceItemShape),\n id: PropTypes.string.isRequired,\n channelTitle: PropTypes.arrayOf(PropTypes.string).isRequired,\n marketingAirlineLogos: PropTypes.arrayOf(PropTypes.string).isRequired,\n availableSeatCount: PropTypes.oneOfType([PropTypes.instanceOf(null), PropTypes.number]),\n }).isRequired,\n laymanMode: PropTypes.bool.isRequired,\n totalTravelerCount: PropTypes.number.isRequired,\n isItemSelected: PropTypes.bool.isRequired,\n setOpenSidePanel: PropTypes.func.isRequired,\n setSidePanelBody: PropTypes.func.isRequired,\n setSidePanelTitle: PropTypes.func.isRequired,\n price: PropTypes.number.isRequired,\n totalFilteredFareBrands: PropTypes.number.isRequired,\n filteredFareBrands: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.string.isRequired,\n fareBrands: PropTypes.string.isRequired,\n price: PropTypes.shape({\n currencyCode: PropTypes.string,\n grossLegPrice: PropTypes.string,\n }),\n }),\n ).isRequired,\n lowestFareBrandTitle: PropTypes.string.isRequired,\n disableSelect: PropTypes.bool.isRequired,\n onDeselect: PropTypes.func.isRequired,\n disableItem: PropTypes.bool.isRequired,\n selectCallback: PropTypes.func.isRequired,\n marketingAirlineQCodes: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\n people: PropTypes.shape({\n adults: PropTypes.number,\n children: PropTypes.number,\n infants: PropTypes.number,\n }).isRequired,\n};\n\nexport default hot(module)(GroupedFlightStandard);\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nconst LogoChip = ({ className, logo }) => (\n \n 
\n
\n);\n\nLogoChip.defaultProps = {\n className: null,\n};\n\nLogoChip.propTypes = {\n logo: PropTypes.string.isRequired,\n className: PropTypes.string,\n};\n\nexport default LogoChip;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport ClassNames from 'classnames';\n\nconst MoreFareBrandsLabel = ({ className, count }) => (\n \n {I18n.t('components.ibe.results.more_options', {\n count,\n })}\n \n);\n\nMoreFareBrandsLabel.defaultProps = {\n className: null,\n};\n\nMoreFareBrandsLabel.propTypes = {\n className: PropTypes.string,\n count: PropTypes.number.isRequired,\n};\n\nexport default MoreFareBrandsLabel;\n","import React, { useState, Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport Icon from '@wtag/rcl-icon';\nimport Modal from 'sharedWebpack/Modal';\nimport FareBasisInfo from '../../Cart/Items/flight/FareBasisInfoContainer';\n\nconst FareRulesLink = ({ searchResultId, airlineCodes }) => {\n const [isModalVisible, setIsModalVisible] = useState(false);\n\n const onModalOpen = () => {\n setIsModalVisible(true);\n };\n\n const onModalClose = () => {\n setIsModalVisible(false);\n };\n\n return (\n \n
\n \n }\n isModalVisible={isModalVisible}\n onOutsideClick={onModalClose}\n >\n \n
\n {ticketTravler.name}
\n {ticket.number}
\n \n
\n );\n }\n return null;\n });\n\n return (\n \n {tripSegmentWithNumber(segment, segmentIndex)}\n
\n {tripSegmentEtickets(segment)}\n \n
\n \n ));\n\nconst BookingClassLabels = ({ getBookingClassLabels }) =>\n getBookingClassLabels.map(({ iconName, iconColor, iconLabel }) => (\n \n \n
\n );\n};\n\nSearchFlightInfo.defaultProps = {\n className: null,\n laymanMode: false,\n eTicketsPresent: false,\n};\n\nSearchFlightInfo.propTypes = {\n className: PropTypes.string,\n group: PropTypes.shape({\n resultId: PropTypes.string.isRequired,\n cabinClasses: PropTypes.string.isRequired,\n bookingClasses: PropTypes.string.isRequired,\n overnight: PropTypes.bool.isRequired,\n multiTicket: PropTypes.bool.isRequired,\n policiesReasons: PropTypes.shape({\n preferred: PropTypes.string,\n outOfPolicy: PropTypes.string,\n approvalRequired: PropTypes.string,\n }),\n fareRulePresent: PropTypes.bool,\n payLater: PropTypes.bool.isRequired,\n segments: PropTypes.arrayOf(\n PropTypes.shape({\n baggagePiecesIncluded: PropTypes.shape({\n count: PropTypes.oneOfType([PropTypes.instanceOf(null), PropTypes.number]),\n kgPerPiece: PropTypes.oneOfType([PropTypes.instanceOf(null), PropTypes.number]),\n }),\n }),\n ).isRequired,\n instantTicket: PropTypes.bool.isRequired,\n approvalRequired: PropTypes.bool.isRequired,\n punctuality: PropTypes.number.isRequired,\n fareTypes: PropTypes.string.isRequired,\n airlineCodes: PropTypes.arrayOf(PropTypes.string),\n labels: PropTypes.shape({\n preferred: PropTypes.bool,\n outOfPolicy: PropTypes.bool,\n }),\n }).isRequired,\n laymanMode: PropTypes.bool,\n eTicketsPresent: PropTypes.bool,\n tripId: PropTypes.string.isRequired,\n tripSegments: PropTypes.arrayOf(PropTypes.shape()).isRequired,\n};\n\nBookingClassStatusLabels.PropTypes = {\n getBookingStatusLabels: PropTypes.arrayOf(\n PropTypes.shape({\n iconName: PropTypes.string,\n iconColor: PropTypes.string,\n label: PropTypes.node,\n }),\n ).isRequired,\n};\n\nBookingClassLabels.PropTypes = {\n getBookingClassLabels: PropTypes.arrayOf(\n PropTypes.shape({\n iconName: PropTypes.string,\n iconColor: PropTypes.string,\n iconLabel: PropTypes.node,\n }),\n ).isRequired,\n};\n\nexport default SearchFlightInfo;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport Icon from '@wtag/rcl-icon';\nimport { WARNING, DANGER, SUCCESS, DEFAULT } from '../../../lib/helpers/componentStates';\nimport './style.scss';\n\n/*\n\nicon types reference to the seat count number,\n\n DANGER means available seats < travellers\n WARNING means available seats = travellers + 1\n SUCCESS means available seats > travellers + 1\n DEFAULT means available seats status is not present\n\n*/\n\nconst SeatCountLabel = ({ count }) => {\n if (count === null) {\n return I18n.t('components.ibe.seat_status.no_seat_information');\n }\n\n return I18n.t('components.ibe.seat_status.seats_left', { count });\n};\n\nSeatCountLabel.defaultProps = {\n count: null,\n};\n\nSeatCountLabel.propTypes = {\n count: PropTypes.number,\n};\n\nconst SeatCountIconWithLabel = ({ className, seatCount, travellerCount, isShowBgColor }) => {\n const hasSeatCountInformation = seatCount !== null;\n\n const getIconColor = () => {\n if (hasSeatCountInformation) {\n if (seatCount === travellerCount || seatCount < travellerCount) {\n return DANGER;\n }\n\n if (seatCount === travellerCount + 1) {\n return WARNING;\n }\n\n return SUCCESS;\n }\n\n return DEFAULT;\n };\n\n return (\n \n
\n \n
\n \n
\n \n {leftSidedHotelBookingStatus.map(({ iconName, iconColor, iconLabel }) => (\n
\n );\n};\n\nLeftSidedHotelBookingStatus.propTypes = {\n corporateDeal: PropTypes.bool.isRequired,\n preferred: PropTypes.bool.isRequired,\n};\n\nexport default LeftSidedHotelBookingStatus;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\n\nimport { fetchCountries } from '../actions/common';\n\nclass CountryComponent extends React.Component {\n componentDidMount() {\n if (this.props.countries.length < 1) {\n this.props.fetchCountries();\n }\n }\n\n render() {\n const { countries, code } = this.props;\n const countryCodeInLowerCase = code && code.toLowerCase();\n const countryData = countries.find(\n country => country.code && country.code.toLowerCase() === countryCodeInLowerCase,\n );\n\n return countryData ? countryData.name : code;\n }\n}\n\nCountryComponent.propTypes = {\n code: PropTypes.string.isRequired,\n countries: PropTypes.arrayOf(\n PropTypes.shape({\n name: PropTypes.string.isRequired,\n code: PropTypes.string.isRequired,\n }),\n ).isRequired,\n fetchCountries: PropTypes.func.isRequired,\n};\n\nconst mapStateToProps = state => ({\n countries: state.common.countries,\n});\n\nconst mapDispatchToProps = dispatch => ({\n fetchCountries: () => dispatch(fetchCountries()),\n});\n\nexport { CountryComponent };\nexport default connect(mapStateToProps, mapDispatchToProps)(CountryComponent);\n","const getNameFormat = (nameDetails, namePrefixList) => {\n if (\n !nameDetails ||\n Object.keys(nameDetails).length === 0 ||\n !namePrefixList ||\n Object.keys(namePrefixList).length === 0\n ) {\n return null;\n }\n\n const { namePrefix, firstName, middleName, lastName } = nameDetails;\n\n const nameParts = [firstName, middleName, lastName]\n .filter(({ value }) => value)\n .reduce((parts, { value }) => {\n parts.push(value);\n return parts;\n }, []);\n\n const prefix = namePrefixList.find(element => element.value === namePrefix.value);\n\n if (prefix) {\n nameParts.unshift(prefix.label);\n }\n\n return nameParts.join(' ');\n};\n\nexport default getNameFormat;\n","const getNameValidationErrorMessage = (attributeName, nameDetails) => {\n if (!nameDetails || Object.keys(nameDetails).length === 0) {\n return null;\n }\n\n if (attributeName) {\n return I18n.t('components.ibe.traveler_details.attributes.cannot_be_blank', {\n attribute: I18n.t(`components.ibe.traveler_details.form.fields.${attributeName}`),\n });\n }\n\n const { firstName, middleName, lastName } = nameDetails;\n\n return firstName.error || middleName.error || lastName.error;\n};\n\nexport default getNameValidationErrorMessage;\n","const getInvalidNameAttribute = nameDetails => {\n if (!nameDetails || Object.keys(nameDetails).length === 0) {\n return null;\n }\n\n const { namePrefix, firstName, lastName } = nameDetails;\n\n if (!firstName.value) {\n return 'first_name';\n }\n\n if (!lastName.value) {\n return 'last_name';\n }\n\n if (!namePrefix.value) {\n return 'title';\n }\n\n return null;\n};\n\nexport default getInvalidNameAttribute;\n","import React from 'react';\nimport ContentLoaderPlaceholder from '@wtag/rcl-content-loader-placeholder';\nimport Card from '@wtag/rcl-card';\n\nconst TravelerInformationLoader = () => (\n \n
\n ))}\n \n
\n \n
\n \n
\n \n
\n );\n }\n\n return (\n \n {attribute.value}\n
\n \n \n \n
\n {attribute.value}
\n );\n };\n\n showName = attributeName => {\n const { namePrefix, firstName, middleName, lastName } = this.props.fields;\n const nameDetails = { namePrefix, firstName, middleName, lastName };\n const name = getNameFormat(nameDetails, this.props.namePrefixList);\n\n if (!name) {\n return (\n \n {I18n.t('components.ibe.traveler_details.attributes.not_provided', {\n attribute: attributeName,\n })}\n
\n );\n } else if (namePrefix.invalid || firstName.invalid || middleName.invalid || lastName.invalid) {\n const invalidAttributeName = getInvalidNameAttribute(nameDetails);\n const errorMessage = getNameValidationErrorMessage(invalidAttributeName, nameDetails);\n\n return (\n \n
\n );\n }\n\n return {name}
\n \n \n \n
\n {name}
;\n };\n\n showBirthday = (birthday, attributeName) => {\n if (this.state.isLoading) {\n return \n {I18n.t('components.ibe.traveler_details.attributes.not_provided', {\n attribute: attributeName,\n })}\n
\n );\n } else if (invalid) {\n return (\n \n
\n );\n }\n\n return (\n \n
\n \n \n \n
\n \n
\n );\n };\n\n render() {\n const {\n fields: {\n birthday,\n email,\n isTravelArrangerEmailUsed,\n travelArrangerEmail,\n phone,\n residenceAddress,\n },\n setSingleTravelerShowPage,\n showHintForTravelerArrangerEmail,\n myBooking,\n editable,\n isTravelerInformationLoading,\n } = this.props;\n\n if (isTravelerInformationLoading) {\n return \n
\n\n \n {I18n.t('components.ibe.traveler_details.general')}\n
\n \n {myBooking ? (\n setSingleTravelerShowPage('edit_traveler_information')}\n onReject={() => this.setModalOpen(false)}\n withAction={true}\n type=\"danger\"\n />\n
\n \n
\n \n \n
\n\n \n
\n\n \n {I18n.t('components.ibe.traveler_details.attributes.name')}\n
\n {this.showName(I18n.t('components.ibe.traveler_details.attributes.name'))}\n \n
\n\n \n {I18n.t('components.ibe.traveler_details.attributes.birthday')}\n
\n {this.showBirthday(\n birthday,\n I18n.t('components.ibe.traveler_details.attributes.birthday'),\n )}\n \n
\n\n \n {I18n.t('components.ibe.traveler_details.attributes.email')}\n {showHintForTravelerArrangerEmail && (\n
\n {this.showFieldValue(\n travelerCartEmail,\n I18n.t('components.ibe.traveler_details.attributes.email'),\n )}\n \n
\n \n {I18n.t('components.ibe.traveler_details.attributes.phone')}\n
\n {this.showFieldValue(\n phone,\n I18n.t('components.ibe.traveler_details.attributes.phone'),\n )}\n \n
\n \n
\n\n \n {I18n.t('components.ibe.traveler_details.attributes.street')}\n
\n {this.showFieldValue(\n residenceAddress.street,\n I18n.t('components.ibe.traveler_details.attributes.street'),\n )}\n \n
\n\n \n {I18n.t('components.ibe.traveler_details.attributes.zip')}\n
\n {this.showFieldValue(\n residenceAddress.zip,\n I18n.t('components.ibe.traveler_details.attributes.zip'),\n )}\n \n
\n\n \n {I18n.t('components.ibe.traveler_details.attributes.city')}\n
\n {this.showFieldValue(\n residenceAddress.city,\n I18n.t('components.ibe.traveler_details.attributes.city'),\n )}\n \n
\n \n {I18n.t('components.ibe.traveler_details.attributes.state')}\n
\n {this.showFieldValue(\n residenceAddress.state,\n I18n.t('components.ibe.traveler_details.attributes.state'),\n )}\n \n \n {I18n.t('components.ibe.traveler_details.attributes.not_provided', {\n attribute: I18n.t('components.ibe.traveler_details.attributes.country'),\n })}\n
\n )}\n \n {I18n.t('components.ibe.traveler_details.attributes.country')}\n
\n {residenceAddress.country.value && residenceAddress.country.invalid ? (\n \n
\n ) : (\n \n
\n \n \n
\n \n
\n )}\n {!residenceAddress.country.value && (\n \n
\n \n {isTravelerInformationLoading ? (\n \n {hasFirstName ? (\n \n )}\n {isTravelerInformationLoading ? (\n \n \n \n ) : (\n \n {hasFirstName && (\n \n )}\n
\n {showSwitchingButton && !isTravelerInformationLoading && (\n \n
\n ) : (\n \n
\n )}\n \n {I18n.t('components.ibe.traveler_details.traveler', {\n value: travelerIndex + 1,\n })}\n
\n \n {`${selectedCustomer.firstName} ${selectedCustomer.middleName || ''} ${selectedCustomer.lastName}`}\n
\n )}\n \n {guestUser ? (\n openConfirmationModalForAction('my_booking')}\n />\n ) : (\n openConfirmationModalForAction('guest_booking')}\n />\n )}\n
\n )}\n \n {visaAdvisories && isVisaAdvisoryUnavailable && (\n \n {I18n.t('components.ibe.visa_advisory.unavailable')}\n \n )}\n {visaAdvisories &&\n !isVisaAdvisoryUnavailable &&\n visaAdvisories.map(\n visaAdvisory =>\n visaAdvisory.requirements &&\n visaAdvisory.requirements.map(requirement => (\n \n
\n );\n }\n}\n\nVisaAdvisories.propTypes = {\n visaAdvisoriesByCitizenshipAndDestination: PropTypes.objectOf(\n PropTypes.objectOf(\n PropTypes.shape({\n citizenshipCountryCode: PropTypes.string,\n destinationCountryCode: PropTypes.string,\n notes: PropTypes.string,\n requirements: PropTypes.arrayOf(\n PropTypes.shape({\n allowedStay: PropTypes.string,\n visaPolicy: PropTypes.string,\n visaCategory: PropTypes.string,\n }),\n ),\n flagUrls: PropTypes.shape({\n small: PropTypes.string,\n medium: PropTypes.string,\n large: PropTypes.string,\n }),\n }),\n ).isRequired,\n ).isRequired,\n citizenshipCountryCode: PropTypes.string.isRequired,\n fetchVisaAdvisory: PropTypes.func.isRequired,\n};\n\nexport default VisaAdvisories;\n","import { connect } from 'react-redux';\nimport VisaAdvisories from './VisaAdvisories';\nimport { fetchVisaAdvisory } from '../../actions/common/visaAdvisory';\n\nconst mapStateToProps = state => ({\n visaAdvisoriesByCitizenshipAndDestination:\n state.common.cart.visaAdvisoriesByCitizenshipAndDestination,\n});\n\nconst mapDispatchToProps = dispatch => ({\n fetchVisaAdvisory: citizenshipCountryCode => dispatch(fetchVisaAdvisory(citizenshipCountryCode)),\n});\n\nexport default connect(mapStateToProps, mapDispatchToProps)(VisaAdvisories);\n","/* eslint-disable max-len */\n/* eslint-disable no-multi-spaces */\n/* eslint-disable key-spacing */\n\nconst documentTypeLabelValuePair = id => ({\n value: id,\n label: I18n.t(id, {\n scope: 'components.ibe.traveler_details.identification_document_types',\n }),\n});\n\nexport default function documentTypesBuilder() {\n return [\n documentTypeLabelValuePair('passport'),\n documentTypeLabelValuePair('identity_card'),\n documentTypeLabelValuePair('permanent_resident_card'),\n documentTypeLabelValuePair('alien_resident_card'),\n ];\n}\n","import React from 'react';\nimport { injectIntl } from 'react-intl';\nimport { connect } from 'react-redux';\nimport classnames from 'classnames';\nimport routes from 'agentRoutes';\nimport httpClient from 'agentHTTPClient';\nimport PropTypes from 'prop-types';\nimport { I18nText } from '@wtag/react-comp-lib';\nimport Alert from 'sharedWebpack/Alert';\nimport DateTime from 'sharedWebpack/DateTime';\nimport Tooltip from '@wtag/rcl-tooltip';\nimport Icon from '@wtag/rcl-icon';\nimport VisaAdvisory from '../../VisaAdvisories/VisaAdvisoriesContainer';\nimport documentTypesBuilder from '../../../Search/flight/helpers/documentTypesBuilder';\nimport { customerSelected } from '../../../actions/flight';\n\nclass IdentificationDocumentInformation extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n countryData: {},\n nationalityData: {},\n };\n\n const { fields } = this.props;\n\n if (fields.country.value !== '') {\n this.searchAndSetCountry(fields.country.value);\n }\n if (fields.nationality.value !== '') {\n this.searchAndSetNationality(fields.nationality.value);\n }\n }\n\n componentDidMount() {\n const { fields, selectedCustomer, travelerIndex, onCustomerSelected } = this.props;\n\n if (\n fields &&\n selectedCustomer &&\n selectedCustomer.document &&\n fields.id.value !== selectedCustomer.document.id\n ) {\n const { id, type, number, country, nationality, validity } = fields;\n\n const updatedSelectedCustomer = {\n ...selectedCustomer,\n\n document: {\n id: id.value,\n type: type.value,\n number: number.value,\n country: country.value,\n nationality: nationality.value,\n validity: validity.value,\n },\n };\n onCustomerSelected(travelerIndex, updatedSelectedCustomer);\n }\n }\n\n countrySearchUrl = code => routes.api.country({ code });\n\n searchAndSetCountry = code =>\n httpClient\n .get(this.countrySearchUrl(code))\n .then(({ data }) => this.setState({ countryData: data }));\n\n searchAndSetNationality = code =>\n httpClient\n .get(this.countrySearchUrl(code))\n .then(({ data }) => this.setState({ nationalityData: data }));\n\n showDocumentInformation = (countryData, number) => {\n if (countryData.name) {\n return (\n \n \n 
\n \n {requirement.visaPolicy}\n \n \n \n
\n \n {this.visaRequirementAllowedStay(requirement.allowedStay)}\n {visaAdvisory && visaAdvisory.notes && (\n
\n \n )),\n )}\n \n \n
\n )}\n \n
\n \n );\n }\n return null;\n };\n\n showDocumentType = (attributeName, type) => {\n const DOCUMENT_TYPES = documentTypesBuilder();\n const label = type.value && DOCUMENT_TYPES.find(element => element.value === type.value).label;\n if (!label) {\n return (\n \n 
\n
\n \n \n {I18n.t('components.ibe.traveler_details.attributes.not_provided', {\n attribute: I18n.t('components.ibe.traveler_details.attributes.number'),\n })}\n
\n )}\n \n {countryData && countryData.name}\n
\n {number && number.value ? (\n \n {number.value}\n
\n ) : (\n \n
\n );\n }\n\n return {label}
\n \n \n \n
\n {label}
;\n };\n\n showNationality = (attributeName, nationality) => {\n if (!nationality.value) {\n return (\n \n
\n );\n }\n\n return (\n \n {this.state.nationalityData && this.state.nationalityData.name}\n
\n \n \n \n
\n \n {this.state.nationalityData && this.state.nationalityData.nationality}\n
\n );\n };\n\n showValidity = (attributeName, validity) => {\n if (!validity.value) {\n return (\n \n
\n );\n }\n\n return (\n \n
\n \n \n \n
\n \n
\n );\n };\n\n render() {\n const {\n fields: { number, country, type, nationality, validity },\n } = this.props;\n\n const { countryData } = this.state;\n\n return (\n \n \n {I18n.t('components.ibe.traveler_details.attributes.invalid_document')}\n
\n )}\n\n \n {I18n.t('components.ibe.traveler_details.identification_document')}\n
\n {country.value ? (\n this.showDocumentInformation(countryData, number)\n ) : (\n \n
\n\n \n {I18n.t('components.ibe.traveler_details.attributes.document_type')}\n
\n {this.showDocumentType(\n I18n.t('components.ibe.traveler_details.attributes.document_type'),\n type,\n )}\n \n
\n\n \n {I18n.t('components.ibe.traveler_details.attributes.nationality')}\n
\n {this.showNationality(\n I18n.t('components.ibe.traveler_details.attributes.nationality'),\n nationality,\n )}\n \n
\n\n {this.context.enableVisaAdvisory && (type.value !== 'passport' || !country.value) && (\n \n {I18n.t('components.ibe.traveler_details.attributes.validity')}\n
\n {this.showValidity(\n I18n.t('components.ibe.traveler_details.attributes.validity'),\n validity,\n )}\n \n \n \n \n \n
\n )}\n {this.context.enableVisaAdvisory && type.value === 'passport' && country.value && (\n \n {I18n.t('components.ibe.traveler_details.attributes.not_provided', {\n attribute: I18n.t('components.ibe.traveler_details.attributes.number'),\n })}\n
\n );\n } else if (invalid) {\n return (\n \n
\n );\n }\n\n return \n
\n {value}
\n \n \n \n
\n {value}
;\n };\n\n showFrequentFlyerContent = () => {\n const { carrierData } = this.state;\n const { logo, code, name } = carrierData;\n\n if (this.frequentFlyerNumberNotProvided()) {\n return (\n \n \n {I18n.t('components.ibe.traveler_details.attributes.not_selected', {\n attribute: I18n.t('components.ibe.traveler_details.attributes.ffn'),\n })}\n \n \n {I18n.t('components.ibe.traveler_details.attributes.available_ffn', {\n count: this.props.frequentFlyerNumbersList.length,\n })}\n \n
\n );\n }\n\n return (\n \n {logo && (\n
\n );\n };\n\n render() {\n return (\n \n \n
\n )}\n {name && (\n \n
\n )}\n {name}
\n {this.showCarrierNumber()}\n \n
\n );\n }\n}\n\nFrequentFlyerNumberInformation.defaultProps = {\n frequentFlyerNumbersList: [],\n};\n\nFrequentFlyerNumberInformation.propTypes = {\n fields: PropTypes.shape().isRequired,\n frequentFlyerNumbersList: PropTypes.arrayOf(PropTypes.shape({})),\n};\n\nexport default FrequentFlyerNumberInformation;\n","const messages = id =>\n I18n.t(id, {\n scope: 'components.ibe.traveler_details.meal',\n });\n\nexport default function mealRequestsBuilder(mealCodes) {\n const mealRequestOptions = [];\n if (mealCodes && mealCodes.length > 0) {\n mealCodes.forEach(code => {\n mealRequestOptions.push({ value: code, label: messages(code) });\n });\n }\n\n return mealRequestOptions;\n}\n","import React from 'react';\nimport { injectIntl } from 'react-intl';\nimport PropTypes from 'prop-types';\nimport mealRequestsBuilder from '../../../Search/flight/helpers/mealRequestsBuilder';\n\nconst MealRequestsInformation = props => {\n const {\n fields: { mealRequests },\n flightResults,\n } = props;\n\n const segmentCodes = [];\n\n if (flightResults && flightResults.length) {\n flightResults.forEach(result => {\n const segments = [];\n result.trips.forEach(trip => {\n trip.segments.forEach(segment => {\n segments.push({\n carrierCode: segment.operatingCarrierCode,\n flightNumber: segment.operatingFlightNumber,\n });\n segmentCodes.push({\n originCode: segment.originCode,\n destinationCode: segment.destinationCode,\n });\n });\n });\n });\n }\n\n const showMealRequest = () => {\n const mealRequestWithSegments = mealRequests.value.map((meal, index) => {\n const mealCodeArray = meal.code.split();\n const mealRequestsData = mealRequestsBuilder(mealCodeArray);\n\n return (\n \n {I18n.t('components.ibe.traveler_details.frequent_flyer_program')}\n
\n {this.state.isLoading ? (\n \n
\n );\n });\n\n return mealRequestWithSegments;\n };\n\n const mealRequestNotAvailable =\n mealRequests.value === '' ||\n mealRequests.value.length <= 0 ||\n mealRequests.value.every(meal => meal.code === null);\n\n return (\n \n {`${segmentCodes[index].originCode} - ${segmentCodes[index].destinationCode}`}\n
\n \n {mealRequestsData &&\n mealRequestsData.map(mealOptions => (\n
\n \n {`${mealOptions.label} (${mealOptions.value})`}\n
\n ))}\n \n
\n );\n};\n\nMealRequestsInformation.propTypes = {\n fields: PropTypes.shape().isRequired,\n flightResults: PropTypes.arrayOf(PropTypes.shape).isRequired,\n};\n\nMealRequestsInformation.contextTypes = {\n enableVisaAdvisory: PropTypes.bool,\n};\n\nexport default injectIntl(MealRequestsInformation);\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport IconButton from '@wtag/rcl-icon-button';\nimport Card from '@wtag/rcl-card';\nimport Icon from '@wtag/rcl-icon';\nimport ConfirmationModal from 'sharedWebpack/ConfirmationModal';\nimport IdentificationDocumentInformation from './IdentificationDocumentInformation/index';\nimport FrequentFlyerNumberInformation from './FrequentFlyerNumberInformation';\nimport MealRequestsInformation from './MealRequestsInformation';\nimport TravelerInformationLoader from '../TravelerInformationLoader';\n\nclass TravelInformationCard extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n modalOpen: false,\n };\n }\n\n setModalOpen = isOpen => {\n this.setState({ modalOpen: isOpen });\n };\n\n render() {\n const {\n fields: { frequentFlyerNumber, document, assistanceRequests },\n flightResults,\n setSingleTravelerShowPage,\n myBooking,\n frequentFlyerNumbersList,\n selectedCustomer,\n index,\n isTravelerInformationLoading,\n } = this.props;\n\n if (isTravelerInformationLoading) {\n return \n {I18n.t('components.ibe.traveler_details.dietary_meal_requests')}\n
\n\n {mealRequestNotAvailable ? (\n \n {I18n.t('components.ibe.traveler_details.attributes.not_selected', {\n attribute: I18n.t('components.ibe.traveler_details.attributes.meal_request'),\n })}\n
\n ) : (\n {showMealRequest()}
\n )}\n \n {I18n.t('components.ibe.traveler_details.attributes.not_selected', {\n attribute: attributeName,\n })}\n
\n );\n }\n return assistanceRequests.value.map(request => (\n \n *\n
\n ));\n };\n\n return (\n \n {I18n.t(request.toLowerCase(), {\n scope: 'components.ibe.traveler_details.assistance_requests',\n })}\n
\n \n
\n\n \n {I18n.t('components.ibe.traveler_details.travel_information')}\n
\n \n {myBooking ? (\n setSingleTravelerShowPage('edit_travel_information')}\n onReject={() => this.setModalOpen(false)}\n withAction={true}\n type=\"danger\"\n />\n
\n \n
\n \n
\n\n \n
\n \n
\n \n {I18n.t('components.ibe.traveler_details.assistance_request')}\n
\n {showAssistanceRequests(I18n.t('components.ibe.traveler_details.assistance_request'))}\n \n \n selectedOption && this.onNamePrefixChange(selectedOption.value, namePrefixField)\n }\n value={findLabelValue(this.NAME_PREFIX, namePrefixField.value)}\n isDisabled={this.props.disabled}\n touched={this.props.touched}\n errorMsg={namePrefixField.error}\n size=\"tiny\"\n width=\"full\"\n placeholderText={I18n.t('components.ibe.traveler_details.form.placeholders.title')}\n required={true}\n isClearable={false}\n />\n
\n );\n\n renderUserTravelArrangerEmailCheckbox = () => {\n const {\n index,\n fields: { guestUser },\n selectedCustomer,\n onCustomerSelected,\n } = this.props;\n const { travelArrangerDefaultEmail } = this.context;\n\n const handleTravelArrangerCheckboxClick = isTravelArrangerEmailUsed => {\n const updatedSelectedCustomer = {\n ...selectedCustomer,\n isTravelArrangerEmailUsed,\n };\n\n this.props.fields.isTravelArrangerEmailUsed.onChange(isTravelArrangerEmailUsed);\n\n if (isTravelArrangerEmailUsed) {\n updatedSelectedCustomer.travelArrangerEmail = travelArrangerDefaultEmail;\n\n this.props.fields.travelArrangerEmail.onChange(this.context.travelArrangerDefaultEmail);\n this.props.fields.email.onChange();\n }\n\n onCustomerSelected(index, updatedSelectedCustomer);\n };\n\n if (guestUser.value && this.props.editable) {\n return (\n \n
\n );\n }\n return null;\n };\n\n render() {\n const {\n fields: {\n namePrefix,\n firstName,\n middleName,\n lastName,\n birthday,\n email,\n travelArrangerEmail,\n isTravelArrangerEmailUsed,\n phone,\n adjustProfileData,\n associateOrganization,\n residenceAddress: { street, city, zip, state, country },\n splitPrimaryPhoneNumber: { countryCode, number },\n },\n disabled,\n touched,\n flightPresent,\n isAssociatedToOrganization,\n showHintForTravelerArrangerEmail,\n index,\n isEditForm,\n onCustomerSelected,\n selectedCustomer,\n } = this.props;\n\n const showContactInformation = index === 0 || this.state.addIndividualContactInformation;\n const travelerCartEmail = isTravelArrangerEmailUsed.value ? travelArrangerEmail : email;\n\n const onBirthDayChange = value => {\n birthday.onChange(value);\n\n const updatedSelectedCustomer = {\n ...selectedCustomer,\n birthday: value,\n };\n onCustomerSelected(index, updatedSelectedCustomer);\n };\n\n const onFirstNameChange = value => {\n firstName.onChange(value);\n\n const updatedSelectedCustomer = {\n ...selectedCustomer,\n firstName: value,\n };\n onCustomerSelected(index, updatedSelectedCustomer);\n };\n\n const onMiddleNameChange = value => {\n middleName.onChange(value);\n\n const updatedSelectedCustomer = {\n ...selectedCustomer,\n middleName: value,\n };\n onCustomerSelected(index, updatedSelectedCustomer);\n };\n\n const onLastNameChange = value => {\n lastName.onChange(value);\n\n const updatedSelectedCustomer = {\n ...selectedCustomer,\n lastName: value,\n };\n onCustomerSelected(index, updatedSelectedCustomer);\n };\n\n const onEmailChange = value => {\n email.onChange(value);\n\n const updatedSelectedCustomer = {\n ...selectedCustomer,\n email: value,\n };\n onCustomerSelected(index, updatedSelectedCustomer);\n };\n\n const onAdjustCustomerProfileDataChange = profileChangeEvent => {\n const { checked: value } = profileChangeEvent.target;\n const updatedSelectedCustomer = {\n ...selectedCustomer,\n adjustProfileData: value,\n };\n\n adjustProfileData.onChange(value);\n onCustomerSelected(index, updatedSelectedCustomer);\n };\n\n const onAssociateOrganizationChange = organizationChangeEvent => {\n const { checked: value } = organizationChangeEvent.target;\n const updatedSelectedCustomer = {\n ...selectedCustomer,\n associateOrganization: value,\n };\n\n associateOrganization.onChange(value);\n onCustomerSelected(index, updatedSelectedCustomer);\n };\n\n const onPhoneNumberChange = async value => {\n number.onChange(value);\n const updatedSelectedCustomer = {\n ...selectedCustomer,\n splitPrimaryPhoneNumber: {\n ...selectedCustomer.splitPrimaryPhoneNumber,\n number: value,\n },\n };\n await onCustomerSelected(index, updatedSelectedCustomer);\n if (countryCode.value) {\n this.onPhoneOrCountryChange(countryCode.value[1], value);\n }\n };\n\n const onPhoneCountryChange = async input => {\n const countryCodeArray = this.props.countryCodes.find(\n countryDetails => countryDetails[1] === input.value,\n );\n countryCode.onChange(countryCodeArray);\n const updatedSelectedCustomer = {\n ...selectedCustomer,\n splitPrimaryPhoneNumber: {\n ...selectedCustomer.splitPrimaryPhoneNumber,\n countryCode: countryCodeArray,\n },\n };\n await onCustomerSelected(index, updatedSelectedCustomer);\n if (number.value) {\n this.onPhoneOrCountryChange(input.value, number.value);\n }\n };\n\n const onStreetChange = value => {\n street.onChange(value);\n\n const updatedSelectedCustomer = {\n ...selectedCustomer,\n residenceAddress: { ...selectedCustomer.residenceAddress, street: value },\n address: { ...selectedCustomer.address, street: value },\n };\n onCustomerSelected(index, updatedSelectedCustomer);\n };\n\n const onCityChange = value => {\n city.onChange(value);\n\n const updatedSelectedCustomer = {\n ...selectedCustomer,\n residenceAddress: { ...selectedCustomer.residenceAddress, city: value },\n address: { ...selectedCustomer.address, city: value },\n };\n onCustomerSelected(index, updatedSelectedCustomer);\n };\n\n const onZipChange = value => {\n zip.onChange(value);\n\n const updatedSelectedCustomer = {\n ...selectedCustomer,\n residenceAddress: { ...selectedCustomer.residenceAddress, zip: value },\n address: { ...selectedCustomer.address, zip: value },\n };\n onCustomerSelected(index, updatedSelectedCustomer);\n };\n\n const onStateChange = value => {\n state.onChange(value);\n\n const updatedSelectedCustomer = {\n ...selectedCustomer,\n residenceAddress: { ...selectedCustomer.residenceAddress, state: value },\n address: { ...selectedCustomer.address, state: value },\n };\n onCustomerSelected(index, updatedSelectedCustomer);\n };\n\n const onCountryChange = value => {\n country.onChange(value);\n\n const updatedSelectedCustomer = {\n ...selectedCustomer,\n residenceAddress: { ...selectedCustomer.residenceAddress, country: value },\n address: { ...selectedCustomer.address, country: value },\n };\n onCustomerSelected(index, updatedSelectedCustomer);\n };\n\n const hasUpdateAbility = travelerId => {\n const foundAbility = this.props.travelerUpdateAbilities.find(\n ability => ability.id === travelerId,\n );\n return foundAbility ? foundAbility.currentUserHasUpdateAbility : false;\n };\n\n return (\n \n
\n ) : (\n \n {I18n.t('components.ibe.traveler_details.updating_general_information')}\n
\n \n {I18n.t('components.ibe.traveler_details.hints.update_traveler_text')}\n
\n \n
\n )}\n {showHintForTravelerArrangerEmail && (\n \n
\n \n {I18n.t('components.ibe.traveler_details.traveler', {\n value: index + 1,\n })}\n
\n \n {I18n.t('components.ibe.traveler_details.create_new_traveler_page', {\n page: 1,\n total: flightPresent ? 2 : 1,\n })}\n
\n \n {I18n.t('components.ibe.traveler_details.hints.create_form_text')}\n
\n \n \n \n
\n )}\n {isAssociatedToOrganization && (\n \n
\n )}\n\n \n \n \n \n ) : null}\n \n )}\n
\n\n \n onFirstNameChange(value)}\n />\n
\n \n {}}\n onChange={value => onMiddleNameChange(value)}\n />\n
\n \n {}}\n onChange={value => onLastNameChange(value)}\n />\n
\n {this.renderSalutation({ ...namePrefix, onBlur: () => {} })}\n \n value && onBirthDayChange(moment(value).format('YYYY-MM-DD'))}\n maxDate={moment()}\n disabled={disabled}\n touched={touched}\n required={true}\n onBlur={() => {}}\n hideNavButtons={false}\n />\n
\n {index !== 0 && (\n \n
\n )}\n\n {showContactInformation && (\n \n
\n \n
\n \n {\n this.props.travelerEmailValidate();\n }}\n onChange={value => onEmailChange(value)}\n />\n {this.renderUserTravelArrangerEmailCheckbox()}\n
\n \n onPhoneNumberChange(input)}\n onCountryChange={input => onPhoneCountryChange(input)}\n inputValue={number.value}\n disabled={disabled}\n selectedCountry={\n countryCode.value &&\n this.phoneCountryCodes.find(code => code.value === countryCode.value[1])\n }\n error={phone.error}\n isInputTouched={!!phone.error}\n onBlur={() => this.props.phoneNumberValidate()}\n countryPlaceholder=\"(+41)\"\n numberPlaceHolder={I18n.t(\n 'components.ibe.traveler_details.form.placeholders.phone',\n )}\n />\n
\n\n \n {}}\n onChange={value => onStreetChange(value)}\n />\n
\n \n {}}\n onChange={value => onZipChange(value)}\n />\n
\n \n {}}\n onChange={value => onCityChange(value)}\n />\n
\n \n {}}\n onChange={value => onStateChange(value)}\n />\n
\n \n {}}\n onChange={value => onCountryChange(value)}\n />\n
\n {isEditForm &&\n this.props.fields.id.value !== '' &&\n (this.props.travelerUpdateAbilities.length === 0 ||\n hasUpdateAbility(this.props.fields.id.value)) ? (\n \n
\n \n {flightPresent && !isEditForm ? (\n this.saveTraveler()}\n size=\"small\"\n type=\"primary\"\n label={\n isEditForm\n ? I18n.t('components.ibe.traveler_details.buttons.update')\n : I18n.t('components.ibe.traveler_details.buttons.create')\n }\n />\n )}\n
\n \n this.resetTraveler()}\n size=\"small\"\n label={I18n.t('components.ibe.traveler_details.buttons.cancel')}\n />\n
\n \n
\n );\n};\n\nAssistanceRequests.propTypes = {\n assistanceRequests: PropTypes.shape().isRequired,\n fields: PropTypes.shape().isRequired,\n onCustomerSelected: PropTypes.func.isRequired,\n selectedCustomer: PropTypes.shape({}).isRequired,\n travelerIndex: PropTypes.number.isRequired,\n};\n\nexport default AssistanceRequests;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport SelectBox from '@wtag/rcl-select-box';\nimport domOnlyProps from '../lib/domOnlyProps';\nimport findLabelValue from '../helpers/findLabelValue';\n\nclass NationalitySelectorContainer extends React.Component {\n componentDidMount() {\n this.props.fetchNationalities();\n }\n\n onNationalityChange = nationality => {\n const { onDocumentNationalityChange, ...other } = this.props;\n\n if (onDocumentNationalityChange) onDocumentNationalityChange(nationality);\n other.onChange(nationality);\n };\n\n mapNationality = () => {\n const { nationalities } = this.props;\n return (\n nationalities &&\n nationalities.map(country => ({\n value: country.value,\n label: country.nationality,\n }))\n );\n };\n\n render() {\n const { disabled, error, placeholder, required, title, ...other } = this.props;\n const errorText = (error && error[0]) || undefined;\n\n return (\n \n {assistanceRequestsAvailableForAllItems ? (\n displayableAssistancRequests.map((request, index) => {\n const paddingClass = classNames(\n 'col-12',\n index % 2 === 0 ? 'col-bleed' : 'col-bleed-x',\n );\n return (\n {I18n.t('components.assistance_requests.not_supported')} \n )}\n
\n \n \n toggleAssistanceRequest(\n request.value,\n fields.assistanceRequests.value.indexOf(request.value) < 0,\n )\n }\n />\n
\n );\n })\n ) : (\n \n
\n );\n }\n}\n\nIdentificationDocument.defaultProps = {\n disabled: false,\n touched: false,\n};\n\nIdentificationDocument.propTypes = {\n intl: intlShape.isRequired, // eslint-disable-line react/no-typos\n fields: PropTypes.shape().isRequired,\n identificationDocumentsList: PropTypes.shape().isRequired,\n disabled: PropTypes.bool,\n touched: PropTypes.bool,\n onCustomerSelected: PropTypes.func.isRequired,\n selectedCustomer: PropTypes.shape({ document: PropTypes.shape({}) }).isRequired,\n travelerIndex: PropTypes.number.isRequired,\n};\n\nexport default injectIntl(IdentificationDocument);\n","import React, { Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport { injectIntl } from 'react-intl';\nimport IconButton from '@wtag/rcl-icon-button';\nimport Tooltip from '@wtag/rcl-tooltip';\nimport Icon from '@wtag/rcl-icon';\nimport { Radio, EmphasisTag, Link } from '@wtag/react-comp-lib';\nimport moment from 'moment';\nimport DateTime from 'sharedWebpack/DateTime';\nimport documentTypesBuilder from '../../../../../Search/flight/helpers/documentTypesBuilder';\n\nclass IdentificationDocumentCard extends React.Component {\n constructor(props) {\n super(props);\n this.state = { expand: false };\n }\n\n render() {\n const { document, isSelected, setSelection, index, isInvalid, validityError } = this.props;\n const DOCUMENT_TYPES = documentTypesBuilder();\n const documentType = DOCUMENT_TYPES.find(type => type.value === document.documentType).label;\n const isExpired = moment(document.validity).diff(moment().format('YYYY-MM-DD'), 'days') <= 0;\n const isValidationEnabled = isInvalid && isSelected && isExpired;\n\n return (\n \n
\n \n \n selectedOption && this.onDocumentTypeChange(selectedOption.value)\n }\n errorMsg={type.error}\n size=\"tiny\"\n width=\"full\"\n required={true}\n placeholderText={I18n.t(\n 'components.ibe.traveler_details.form.placeholders.document_type',\n )}\n isClearable={false}\n value={findLabelValue(this.DOCUMENT_TYPES, type.value)}\n onBlur={() => {}}\n />\n
\n \n {}}\n onChange={value => this.onDocumentNumberChange(value)}\n />\n
\n\n \n \n value && this.onDocumentValidityChange(moment(value).format('YYYY-MM-DD'))\n }\n disabled={disabled}\n required={this.checkIfValidityRequired(type)}\n onBlur={() => {}}\n hideNavButtons={false}\n />\n
\n\n \n {}}\n onDocumentCountryChange={this.onDocumentCountryChange}\n />\n
\n \n {}}\n onDocumentNationalityChange={this.onDocumentNationalityChange}\n />\n
\n \n
\n );\n }\n}\n\nIdentificationDocumentCard.defaultProps = {\n validityError: [],\n isInvalid: false,\n};\n\nIdentificationDocumentCard.propTypes = {\n index: PropTypes.number.isRequired,\n document: PropTypes.shape().isRequired,\n isSelected: PropTypes.bool.isRequired,\n setSelection: PropTypes.func.isRequired,\n validityError: PropTypes.arrayOf([PropTypes.node]),\n isInvalid: PropTypes.bool,\n};\n\nexport default injectIntl(IdentificationDocumentCard);\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport IdentificationDocumentCard from './IdentificationDocumentCard';\n\nclass IdentificationDocumentLists extends React.Component {\n constructor(props) {\n super(props);\n this.state = { selectedIndex: props.fields.id.value };\n }\n\n injectOnSelect = (element, index, isEditAction = false) => {\n this.props.fields.id.onChange(element.id);\n this.props.fields.type.onChange(element.documentType);\n this.props.fields.number.onChange(element.number);\n this.props.fields.country.onChange(element.country);\n this.props.fields.nationality.onChange(element.nationality);\n this.props.fields.validity.onChange(element.validity);\n this.setState({ selectedIndex: index });\n\n const updatedSelectedCustomer = {\n ...this.props.selectedCustomer,\n\n document: {\n id: element.id,\n type: element.documentType,\n number: element.number,\n country: element.country,\n nationality: element.nationality,\n validity: element.validity,\n },\n };\n this.props.onCustomerSelected(this.props.travelerIndex, updatedSelectedCustomer);\n\n if (isEditAction) {\n this.props.identificationDocumentEditAction();\n }\n };\n\n isDocumentSelected = (documentId, index) =>\n index === this.state.selectedIndex || documentId === this.props.fields.id.value;\n\n render() {\n const { fields, identificationDocumentsList } = this.props;\n\n return (\n \n
\n\n {this.state.expand && (\n \n \n \n )}\n
\n\n \n setSelection(document, index)}\n />\n
\n \n
\n \n {document.countryName && (\n \n \n )}\n
\n \n 
\n
\n \n {document.countryName}\n
\n {document.number}
\n {isValidationEnabled && (\n \n
\n \n
\n )}\n\n \n
\n\n \n {I18n.t('components.ibe.traveler_details.attributes.document_type')}\n
\n \n {documentType}\n
\n \n
\n\n \n {I18n.t('components.ibe.traveler_details.attributes.country')}\n
\n \n {document.countryName}\n
\n \n
\n\n \n {I18n.t('components.ibe.traveler_details.attributes.nationality')}\n
\n \n {document.nationalityName}\n
\n \n
\n\n \n {I18n.t('components.ibe.traveler_details.attributes.number')}\n
\n \n {document.number}\n
\n \n
\n \n {I18n.t('components.ibe.traveler_details.attributes.validity')}\n
\n {isValidationEnabled ? (\n \n
\n ) : (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n this.setState(prevState => ({\n expand: !prevState.expand,\n }))\n }\n type=\"tiny\"\n modifier=\"tertiary\"\n >\n {this.state.expand ? (\n
\n \n {I18n.t('components.ibe.traveler_details.buttons.hide')}\n
\n ) : (\n \n {I18n.t('components.ibe.traveler_details.buttons.show')}\n
\n )}\n \n \n {identificationDocumentsList.map((document, index) => (\n
\n );\n }\n}\n\nIdentificationDocumentLists.propTypes = {\n identificationDocumentEditAction: PropTypes.func.isRequired,\n fields: PropTypes.shape().isRequired,\n identificationDocumentsList: PropTypes.shape([]).isRequired,\n onCustomerSelected: PropTypes.func.isRequired,\n selectedCustomer: PropTypes.shape({}).isRequired,\n travelerIndex: PropTypes.number.isRequired,\n};\n\nexport default IdentificationDocumentLists;\n","const DefaultCarriers = [\n { code: 'E5', name: 'AIR ARABIA EGYPT' },\n { code: '3O', name: 'AIR ARABIA MAROC' },\n { code: 'I6', name: 'AIR INDUS (PVT.) LTD.' },\n { code: 'ML', name: 'AIR MEDITERRANEE' },\n];\n\nexport default DefaultCarriers;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { intlShape, injectIntl } from 'react-intl';\nimport debounce from 'throttle-debounce/debounce';\nimport routes from 'agentRoutes';\nimport httpClient from 'agentHTTPClient';\nimport SelectBox from '@wtag/rcl-select-box';\nimport Input from '@wtag/rcl-input';\n\nimport findLabelValue from '../../../../helpers/findLabelValue';\nimport DefaultCarriers from '../../../../lib/helpers/defaultCarrierList';\n\nclass FrequentFlyerNumber extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n carriers:\n this.debouncedSearchCarrier(props.frequentFlyerNumber.carrier.value) || DefaultCarriers,\n };\n }\n\n searchCarrier = value => {\n const url = routes.api.airlines({ q: value });\n httpClient.get(url).then(({ data }) => this.setState({ carriers: data }));\n };\n\n debouncedSearchCarrier = debounce(300, query => this.searchCarrier(query));\n\n carrierSelected = carrier => {\n const { frequentFlyerNumber, selectedCustomer, onCustomerSelected, travelerIndex } = this.props;\n\n frequentFlyerNumber.carrier.onChange(carrier);\n const updatedSelectedCustomer = {\n ...selectedCustomer,\n frequentFlyerNumber: {\n ...selectedCustomer.frequentFlyerNumber,\n carrier,\n },\n };\n\n onCustomerSelected(travelerIndex, updatedSelectedCustomer);\n };\n\n numberSelected = number => {\n const { frequentFlyerNumber, selectedCustomer, onCustomerSelected, travelerIndex } = this.props;\n\n frequentFlyerNumber.number.onChange(number);\n const updatedSelectedCustomer = {\n ...selectedCustomer,\n frequentFlyerNumber: {\n ...selectedCustomer.frequentFlyerNumber,\n number,\n },\n };\n\n onCustomerSelected(travelerIndex, updatedSelectedCustomer);\n };\n\n carriers = () =>\n this.state.carriers.map(airline => ({\n label: airline.name,\n value: airline.code,\n }));\n\n render() {\n const {\n frequentFlyerNumber: { carrier, number },\n disabled,\n touched,\n } = this.props;\n\n return (\n \n
\n );\n }\n}\n\nFrequentFlyerNumber.defaultProps = {\n disabled: false,\n touched: false,\n};\n\nFrequentFlyerNumber.propTypes = {\n intl: intlShape.isRequired, // eslint-disable-line react/no-typos\n frequentFlyerNumber: PropTypes.shape().isRequired,\n disabled: PropTypes.bool,\n touched: PropTypes.bool,\n onCustomerSelected: PropTypes.func.isRequired,\n selectedCustomer: PropTypes.shape({ frequentFlyerNumber: PropTypes.shape({}) }).isRequired,\n travelerIndex: PropTypes.number.isRequired,\n};\n\nexport default injectIntl(FrequentFlyerNumber);\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport Card from '@wtag/rcl-card';\nimport IconButton from '@wtag/rcl-icon-button';\nimport Icon from '@wtag/rcl-icon';\nimport { Radio } from '@wtag/react-comp-lib';\n\nconst FrequentFlyerNumberLists = props => {\n const {\n frequentFlyerNumbersList,\n fields,\n frequentFlyerEditAction,\n selectedCustomer,\n travelerIndex,\n onCustomerSelected,\n } = props;\n\n const [selectedIndex, setSelectedIndex] = useState(-1);\n\n const injectOnSelect = (flyerNumber, index, isEditAction = false) => {\n fields.number.onChange(flyerNumber.number);\n fields.carrier.onChange(flyerNumber.carrierCode);\n const updatedSelectedCustomer = {\n ...selectedCustomer,\n frequentFlyerNumber: { number: flyerNumber.number, carrier: flyerNumber.carrierCode },\n };\n\n onCustomerSelected(travelerIndex, updatedSelectedCustomer);\n setSelectedIndex(index);\n\n if (isEditAction) {\n frequentFlyerEditAction();\n }\n };\n\n const isFlyerSelected = (carrierCode, number, index) =>\n index === selectedIndex ||\n (carrierCode === fields.carrier.value && number === fields.number.value);\n\n return (\n \n
\n \n this.debouncedSearchCarrier(value)}\n onChange={selectedOption =>\n selectedOption && this.carrierSelected(selectedOption.value)\n }\n errorMsg={carrier.error}\n size=\"tiny\"\n width=\"full\"\n value={findLabelValue(this.carriers(), carrier.value)}\n required={true}\n isClearable={false}\n onBlur={() => {}}\n />\n
\n \n {\n this.numberSelected(value);\n }}\n onBlur={() => {}}\n />\n
\n \n {frequentFlyerNumbersList.map((flyerNumber, index) => (\n \n
\n );\n};\n\nFrequentFlyerNumberLists.propTypes = {\n onCustomerSelected: PropTypes.func.isRequired,\n frequentFlyerEditAction: PropTypes.func.isRequired,\n fields: PropTypes.shape().isRequired,\n frequentFlyerNumbersList: PropTypes.shape().isRequired,\n selectedCustomer: PropTypes.shape({\n frequentFlyerNumber: PropTypes.shape({\n carrier: PropTypes.string,\n number: PropTypes.string,\n }),\n }).isRequired,\n travelerIndex: PropTypes.number.isRequired,\n};\n\nexport default FrequentFlyerNumberLists;\n","import PropTypes from 'prop-types';\n\nexport default PropTypes.shape({\n value: PropTypes.string.isRequired,\n touched: PropTypes.bool,\n name: PropTypes.string.isRequired,\n});\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { intlShape, injectIntl } from 'react-intl';\nimport { I18nText } from '@wtag/react-comp-lib';\nimport SelectBox from '@wtag/rcl-select-box';\nimport mealRequestsBuilder from '../../../../Search/flight/helpers/mealRequestsBuilder';\nimport reduxFieldShape from '../../../helpers/reduxField';\nimport findLabelValue from '../../../../helpers/findLabelValue';\n\nclass MealRequests extends React.Component {\n setMealRequest = (carrier, flightNumber, code) => {\n let currentMealRequests = this.props.fields.mealRequests.value;\n if (!currentMealRequests.push) {\n currentMealRequests = [];\n }\n\n const currentMealRequestIndex = currentMealRequests.findIndex(\n request => request.carrier === carrier && request.flightNumber === flightNumber,\n );\n\n if (currentMealRequestIndex >= 0) {\n currentMealRequests.splice(currentMealRequestIndex, 1);\n }\n\n if (typeof code !== 'undefined' && code !== null) {\n currentMealRequests.push({ resultId: this.props.resultId, carrier, flightNumber, code });\n }\n const updatedSelectedCustomer = {\n ...this.props.selectedCustomer,\n mealRequests: currentMealRequests,\n };\n this.props.onCustomerSelected(this.props.travelerIndex, updatedSelectedCustomer);\n this.props.fields.mealRequests.onChange(currentMealRequests);\n };\n\n mealRequestValueForSegment = (carrier, flightNumber) => {\n if (!this.props.fields.mealRequests.value.find) {\n return '';\n }\n\n const currentMealRequest = this.props.fields.mealRequests.value.find(\n request => request.carrier === carrier && request.flightNumber === flightNumber,\n );\n\n if (!currentMealRequest) {\n return '';\n }\n\n return currentMealRequest.code;\n };\n\n render() {\n const { segments, mealRequestOption } = this.props;\n\n const mealRequestSelectors = [];\n let mealRequestSupported = false;\n let MEAL_REQUESTS = [];\n const mealRequestsAvailable =\n typeof mealRequestOption !== 'undefined' &&\n mealRequestOption !== null &&\n Object.keys(mealRequestOption).length > 0 &&\n mealRequestOption.supported;\n\n if (mealRequestsAvailable) {\n mealRequestSupported = true;\n const mealCodes = mealRequestOption.availableCodes;\n MEAL_REQUESTS = mealRequestsBuilder(mealCodes);\n }\n\n segments.forEach(segment => {\n const flightNumber = `${segment.carrierCode}${segment.flightNumber}`;\n mealRequestSelectors.push(\n \n
\n \n ))}\n \n
\n \n injectOnSelect(flyerNumber, index)}\n />\n
\n \n 
\n
\n \n {flyerNumber.carrierName}\n
\n {flyerNumber.number}
\n \n
\n \n {mealRequestSupported ? (\n
\n ,\n );\n });\n\n return (\n \n {\n this.setMealRequest(\n segment.carrierCode,\n segment.flightNumber,\n selectedOption && selectedOption.value,\n );\n }}\n size=\"tiny\"\n width=\"full\"\n />\n
\n ) : (\n \n
\n )}\n {flightNumber}
\n \n
\n );\n }\n}\n\nMealRequests.propTypes = {\n fields: intlShape.isRequired, // eslint-disable-line react/no-typos\n resultId: PropTypes.string.isRequired,\n segments: PropTypes.arrayOf(\n PropTypes.shape({\n carrierCode: PropTypes.string.isRequired,\n flightNumber: PropTypes.string.isRequired,\n }).isRequired,\n ).isRequired,\n mealRequests: reduxFieldShape.isRequired,\n mealRequestOption: PropTypes.shape({\n availableCodes: PropTypes.arrayOf(PropTypes.string),\n supported: PropTypes.bool,\n }).isRequired,\n onCustomerSelected: PropTypes.func.isRequired,\n selectedCustomer: PropTypes.shape({}).isRequired,\n travelerIndex: PropTypes.number.isRequired,\n};\n\nexport default injectIntl(MealRequests);\n","import React, { Fragment } from 'react';\nimport { injectIntl } from 'react-intl';\nimport PropTypes from 'prop-types';\nimport MealRequests from './Requests';\n\nconst MealRequestsForm = ({\n mealRequests,\n fields,\n flightResults,\n disabled,\n onCustomerSelected,\n selectedCustomer,\n travelerIndex,\n}) => {\n const segmentCodes = [];\n const mealRequestSelection = [];\n if (flightResults && flightResults.length) {\n flightResults.forEach(result => {\n const segments = [];\n result.trips.forEach(trip => {\n trip.segments.forEach(segment => {\n segments.push({\n carrierCode: segment.operatingCarrierCode,\n flightNumber: segment.operatingFlightNumber,\n });\n segmentCodes.push({\n originCode: segment.originCode,\n destinationCode: segment.destinationCode,\n });\n });\n });\n\n const key = `${result.id}`;\n mealRequestSelection.push(\n {mealRequestSelectors}
\n \n
\n ) : (\n \n {I18n.t('components.ibe.traveler_details.updating_travel_information')}\n
\n \n {I18n.t('components.ibe.traveler_details.hints.update_travel_information')}\n
\n \n
\n )}\n\n \n
\n \n {I18n.t('components.ibe.traveler_details.traveler', {\n value: index + 1,\n })}\n
\n \n {I18n.t('components.ibe.traveler_details.create_new_traveler_page', {\n page: 2,\n total: 2,\n })}\n
\n \n {I18n.t('components.ibe.traveler_details.hints.create_form_text')}\n
\n \n \n {hasIdentificationDocumentsList() && (\n \n )}\n
\n\n \n
\n {openIdentificationDocumentForm && (\n \n {I18n.t('components.ibe.traveler_details.hints.identification_document_optional', {\n count: index + 1,\n })}\n
\n \n setAddNewIdentificationDocument(prevState => !prevState)}\n label={I18n.t('components.ibe.traveler_details.buttons.select_from_existing')}\n />\n addIdentificationDocument(fields.document)}\n label={I18n.t('components.ibe.traveler_details.buttons.add_a_new')}\n />\n
\n )}\n \n {renderIdentificationForm()}\n
\n \n \n {hasFrequentFlyerNumbersList() && (\n \n )}\n
\n\n \n
\n {openFrequentFlyerNumberForm && (\n \n {I18n.t('components.ibe.traveler_details.hints.frequent_flyer_program', {\n count: index + 1,\n })}\n
\n \n setAddNewFrequentFlyerNumber(prevState => !prevState)}\n label={I18n.t('components.ibe.traveler_details.buttons.select_from_existing')}\n />\n addFrequentFlyerNumber(frequentFlyerNumber)}\n label={I18n.t('components.ibe.traveler_details.buttons.add_a_new')}\n />\n
\n )}\n \n {renderFrequentFlyerForm()}\n
\n \n
\n\n \n
\n {openMealRequestForm && (\n \n {I18n.t('components.ibe.traveler_details.hints.dietary_meal_requests', {\n count: index + 1,\n })}\n
\n \n
\n )}\n \n
\n\n \n
\n {openAssistanceRequestForm && (\n \n {I18n.t('components.ibe.traveler_details.hints.assistance_request', {\n count: index + 1,\n })}\n
\n \n
\n )}\n \n
\n \n {isEditForm ? (\n
\n \n
\n \n setModalOpen(false)}\n onKeyDown={() => setModalOpen(false)}\n role=\"presentation\"\n >\n
\n \n );\n\n return (\n {I18n.t('public.session.log_in')}
\n \n setModalOpen(false)}\n >\n
\n );\n};\n\nTravelerLoginModal.propTypes = {\n modalOpen: PropTypes.bool.isRequired,\n setModalOpen: PropTypes.func.isRequired,\n};\n\nexport default TravelerLoginModal;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Radio, Link, I18nText } from '@wtag/react-comp-lib';\nimport Avatar from '@wtag/rcl-avatar';\nimport Icon from '@wtag/rcl-icon';\nimport { Table, TableHead, TableHeader, TableBody, TableData, TableRow } from '@wtag/rcl-table';\n\nimport './styles.scss';\n\nconst returnStringOnly = true;\n\nconst CustomerTableColumnHeaders = [\n \n
\n \n \n \n {error}\n \n
\n \n setEmail(value)}\n value={email}\n />\n
\n \n setPassword(value)}\n value={password}\n />\n
\n \n
\n \n
\n ) : (\n \n
\n \n {customer.email}\n
\n \n {I18n.t('components.ibe.traveler_details.hints.no_email')}\n
\n )}\n \n
\n ) : (\n \n
\n \n {customer.organization}\n
\n \n {I18n.t('components.ibe.traveler_details.hints.no_organization')}\n
\n )}\n \n \n
\n
\n );\n};\n\nCustomerTable.propTypes = {\n customers: PropTypes.arrayOf(PropTypes.shape()).isRequired,\n onChange: PropTypes.func.isRequired,\n selectedCustomers: PropTypes.arrayOf(PropTypes.shape()).isRequired,\n};\n\nexport default CustomerTable;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport debounce from 'throttle-debounce/debounce';\nimport Icon from '@wtag/rcl-icon';\nimport Button from '@wtag/rcl-button';\nimport Card from '@wtag/rcl-card';\nimport Input from '@wtag/rcl-input';\n\nimport { searchCustomer } from '../../actions/common';\nimport { mapCustomerData } from '../../lib/helpers/mapCustomerData';\nimport CustomerTable from './CustomerTable';\n\nclass TravelersSearchAutoComplete extends React.Component {\n constructor(props) {\n super(props);\n this.state = { value: '' };\n }\n\n onUpdateInput = query => {\n this.setState({ value: query });\n this.debouncedSearchCustomers(query);\n };\n\n customerSelected = customer => {\n this.props.onChange(customer);\n };\n\n searchCustomer = query => {\n this.props.searchCustomer(this.props.index, query, this.props.callbackParams);\n };\n\n debouncedSearchCustomers = debounce(300, query =>\n this.searchCustomer(query, this.props.callbackParams),\n );\n\n render() {\n const { customers, setNewTravelerFormPage, selectedCustomers } = this.props;\n\n return (\n \n \n \n \n \n
\n );\n }\n}\n\nTravelersSearchAutoComplete.propTypes = {\n customers: PropTypes.shape([]).isRequired,\n selectedCustomers: PropTypes.arrayOf(PropTypes.shape()).isRequired,\n index: PropTypes.number.isRequired,\n searchCustomer: PropTypes.func.isRequired,\n onChange: PropTypes.func.isRequired,\n setNewTravelerFormPage: PropTypes.func.isRequired,\n callbackParams: PropTypes.shape({}).isRequired,\n};\n\nconst mapStateToProps = (state, ownProps) => ({\n customers: mapCustomerData(state.common.customerSearchResults[ownProps.index]),\n selectedCustomers: state.common.selectedCustomers,\n});\n\nconst mapDispatchToProps = dispatch => ({\n searchCustomer: (index, query, callbackParams) =>\n dispatch(searchCustomer(index, query, callbackParams)),\n});\n\nexport default connect(mapStateToProps, mapDispatchToProps)(TravelersSearchAutoComplete);\n","import React, { Fragment, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport Button from '@wtag/rcl-button';\nimport Icon from '@wtag/rcl-icon';\nimport { I18nText } from '@wtag/react-comp-lib';\nimport TravelerLoginModal from 'sharedWebpack/TravelerLoginModal/index';\n\nimport TravelersSearchAutoComplete from '../../TravelersSearchAutoComplete';\nimport TravelerInformationLoader from '../../TravelerInformationLoader';\n\nconst SearchTravelerForm = props => {\n const {\n travelerIndex,\n customerSelected,\n reset,\n hasRightToSearch,\n setNewTravelerFormPage,\n callbackParams,\n isTravelerInformationLoading,\n } = props;\n\n const [isModalVisible, setIsModalVisible] = useState(false);\n\n if (isTravelerInformationLoading) {\n return \n
\n\n {customers.length > 0 && (\n \n {I18n.t('components.ibe.traveler_details.hints.search_existing')}\n
\n \n this.onUpdateInput(value)}\n preIcon={
\n \n
\n \n {I18n.t('components.ibe.traveler_details.hints.add_new_traveler')}\n
\n \n setNewTravelerFormPage('traveler_information')}\n size=\"small\"\n label={I18n.t('components.ibe.traveler_details.buttons.add_new_traveler')}\n />\n
\n \n
\n )}\n \n setIsModalVisible(prev => !prev)}\n size=\"small\"\n label={I18n.t('components.ibe.traveler_details.buttons.login_to_existing_account')}\n />\n setNewTravelerFormPage('traveler_information')}\n size=\"small\"\n label={I18n.t('components.ibe.traveler_details.buttons.add_new_traveler')}\n />\n
\n \n
\n {newTravelerFormContent}
;\n } else if (this.props.visible) {\n let travelerCardContent;\n\n switch (this.state.singleTravelerShowPage) {\n case 'show':\n travelerCardContent = (\n \n
\n )}\n {travelerCardContent}
;\n }\n\n return (\n \n \n {I18n.t('components.ibe.traveler_details.hints.not_allowed')}\n \n\n {this.showTravelerResetButton(this.props.index, !this.props.disableComponent) && (\n
\n );\n }\n}\n\nSingleTravelerInformations.defaultProps = {\n selectedCustomer: {\n frequentFlyerNumbersList: [],\n frequentFlyerNumber: null,\n },\n flightResults: [],\n disabled: false,\n editable: false,\n visible: true,\n currentCustomer: {},\n};\n\nSingleTravelerInformations.propTypes = {\n index: PropTypes.number.isRequired,\n templateTraveler: PropTypes.shape().isRequired,\n fields: PropTypes.shape().isRequired,\n selectedCustomer: PropTypes.shape({\n frequentFlyerNumbersList: PropTypes.arrayOf(PropTypes.shape({})),\n frequentFlyerNumber: PropTypes.shape({}),\n guestUser: PropTypes.shape({\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n }),\n }),\n flightResults: PropTypes.arrayOf(PropTypes.shape),\n disabled: PropTypes.bool,\n visible: PropTypes.bool,\n editable: PropTypes.bool,\n resetForGuest: PropTypes.func.isRequired,\n fetchCurrentCustomer: PropTypes.func.isRequired,\n customerSelected: PropTypes.func.isRequired,\n internationalFlight: PropTypes.bool.isRequired,\n currentCustomer: PropTypes.shape(),\n phoneNumberValidate: PropTypes.func.isRequired,\n travelerEmailValidate: PropTypes.func.isRequired,\n mealRequests: PropTypes.shape({\n availableCodes: PropTypes.arrayOf(PropTypes.string),\n supported: PropTypes.bool,\n }).isRequired,\n toggleDisabled: PropTypes.bool.isRequired,\n reset: PropTypes.func.isRequired,\n disableComponent: PropTypes.bool.isRequired,\n enableIdDocOptional: PropTypes.bool.isRequired,\n identificationDocumentsRequired: PropTypes.bool.isRequired,\n countryCodes: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string)).isRequired,\n operatingCarriers: PropTypes.arrayOf(PropTypes.string).isRequired,\n assistanceRequests: PropTypes.shape().isRequired,\n isCarAdded: PropTypes.bool.isRequired,\n isTravelerInformationLoading: PropTypes.bool.isRequired,\n allTravelers: PropTypes.arrayOf(\n PropTypes.shape({\n guestUser: PropTypes.shape({\n value: PropTypes.string,\n }),\n }).isRequired,\n ).isRequired,\n travelerUpdateAbilities: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.number,\n currentUseHasUpdateAbility: PropTypes.bool,\n }),\n ).isRequired,\n};\n\nSingleTravelerInformations.contextTypes = {\n laymanMode: PropTypes.bool.isRequired,\n travelerLoggedIn: PropTypes.bool.isRequired,\n callbackParams: PropTypes.shape().isRequired,\n travelArranger: PropTypes.shape({\n customerInformationVisible: PropTypes.bool.isRequired,\n customerInformationEditable: PropTypes.bool.isRequired,\n }).isRequired,\n travelArrangerDefaultEmail: PropTypes.string.isRequired,\n};\n\nexport default SingleTravelerInformations;\n","import React, { useMemo } from 'react';\nimport PropTypes from 'prop-types';\nimport { v4 as uuidv4 } from 'uuid';\nimport Icon from '@wtag/rcl-icon';\nimport Button from '@wtag/rcl-button';\nimport classNames from 'classnames';\nimport Card from '@wtag/rcl-card';\nimport Tooltip from '@wtag/rcl-tooltip';\nimport { CheckBox, I18nText, Link, ContentLoaderPlaceholder } from '@wtag/react-comp-lib';\nimport Avatar from '@wtag/rcl-avatar';\nimport dividerContent from '../../dividerContent';\n\nconst TravelersDetails = props => {\n const { index, selectedTravelerIndex, setActiveTraveler, details } = props;\n const memoizedUuid = useMemo(() => uuidv4(), []);\n\n return (\n \n
\n )}\n \n {details.imageDetails}\n
\n \n {details.status}\n \n );\n};\n\nTravelersDetails.propTypes = {\n setActiveTraveler: PropTypes.func.isRequired,\n selectedTravelerIndex: PropTypes.number.isRequired,\n index: PropTypes.number.isRequired,\n details: PropTypes.string.isRequired,\n};\n\nclass SelectTravelers extends React.Component {\n showCustomerSearch = () => !(this.context.laymanMode && !this.context.travelerLoggedIn);\n\n travelerInfo = (traveler, travelerIndex) => {\n const newUserPresent = traveler.firstName.value !== '' || traveler.newUser.value !== '';\n if (traveler.id.value !== '' || newUserPresent) {\n return {\n name: \n {details.name} {details.type}\n
\n {traveler.firstName.value}
,\n imageDetails: (\n \n \n
\n ) : (\n \n
\n ),\n };\n }\n return {\n name: I18n.t('components.ibe.traveler_details.traveler', {\n value: travelerIndex + 1,\n }),\n imageDetails: (\n \n
\n ),\n type: ({I18n.t(traveler.type.value, { scope: 'passenger.types' })}),\n };\n };\n\n resetTraveler = index => {\n const allFields = this.props.fields[index];\n Object.keys(allFields).forEach(key => {\n if (\n allFields[key] &&\n key !== 'type' &&\n key !== 'itemChannels' &&\n typeof allFields[key].value !== 'undefined'\n ) {\n allFields[key].onChange('');\n }\n });\n this.props.resetTraveler(index);\n };\n\n handleContactInformationPass = isChecked => {\n this.props.setResoOptionEmail(isChecked);\n this.props.setResoOptionPhone(isChecked);\n };\n\n customerSelected = (selectedEntry, index) => {\n this.props.customerSelected(index, selectedEntry);\n };\n\n clearAll = () => {\n let index = 0;\n this.props.fields.forEach(() => {\n if (\n index === 0 &&\n this.context.laymanMode &&\n this.context.travelerLoggedIn && !this.props.fields[index].guestUser.value\n ) {\n index += 1;\n } else {\n this.resetTraveler(index);\n index += 1;\n }\n });\n };\n\n render() {\n return (\n \n \n \n
\n );\n }\n}\n\nSelectTravelers.contextTypes = {\n laymanMode: PropTypes.bool.isRequired,\n callbackParams: PropTypes.shape().isRequired,\n travelerLoggedIn: PropTypes.bool.isRequired,\n};\n\nSelectTravelers.defaultProps = {\n selectedCustomers: [],\n setResoOptionEmail: () => {},\n setResoOptionPhone: () => {},\n};\n\nSelectTravelers.propTypes = {\n setActiveTraveler: PropTypes.func.isRequired,\n selectedTravelerIndex: PropTypes.number.isRequired,\n resetTraveler: PropTypes.func.isRequired,\n customerSelected: PropTypes.func.isRequired,\n fields: PropTypes.arrayOf(PropTypes.shape).isRequired,\n selectedCustomers: PropTypes.arrayOf(PropTypes.shape),\n travelerHasErrors: PropTypes.func.isRequired,\n disableComponent: PropTypes.bool.isRequired,\n setResoOptionEmail: PropTypes.func,\n setResoOptionPhone: PropTypes.func,\n passEmailToAirline: PropTypes.bool.isRequired,\n passPhoneToAirline: PropTypes.bool.isRequired,\n flightPresent: PropTypes.bool.isRequired,\n isTravelerDataLoading: PropTypes.bool.isRequired,\n};\n\nexport default SelectTravelers;\n","import { connect } from 'react-redux';\n\nimport SelectTravelers from './SelectTravelers';\n\nimport { customerSelected, resetTravelerDetails, saveTravelerDetails } from '../actions/common';\n\nconst mapStateToProps = state => ({\n selectedCustomers: state.common.selectedCustomers,\n});\n\nconst mapDispatchToProps = dispatch => ({\n customerSelected: (index, query) => dispatch(customerSelected(index, query)),\n resetTraveler: index => {\n dispatch(resetTravelerDetails(index));\n },\n saveTravelerDetails: (index, data) => dispatch(saveTravelerDetails(index, data)),\n});\n\nexport default connect(mapStateToProps, mapDispatchToProps)(SelectTravelers);\n","import React, { useEffect, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport Button from '@wtag/rcl-button';\nimport httpClient from 'agentHTTPClient';\nimport routes from 'agentRoutes';\nimport { SidePanel, I18nText } from '@wtag/react-comp-lib';\nimport ChangeApproversSidePanelBody from '../../../ApprovalRequests/ChangeApproversSidePanelBody';\n\nconst RequestApproval = ({ cartId, sendApprovalRequest, disabled }) => {\n const [openSidePanel, setOpenSidePanel] = useState(false);\n const [mandatoryApprovers, setMandatoryApprovers] = useState([]);\n const [optionalApprovers, setOptionalApprovers] = useState([]);\n const [potentialApprovers, setPotentialApprovers] = useState([]);\n const [selectedOptionalApprovers, setSelectedOptionalApprovers] = useState([]);\n const [minimumApproverCount, setMinimumApproverCount] = useState(1);\n\n const hideSidePanel = () => {\n setOpenSidePanel(false);\n };\n const fetchCartApprovers = async () => {\n const { data } = await httpClient.get(routes.api.carts.expectedApprovers({ cartId }));\n\n setMandatoryApprovers(data.approvers.mandatory);\n setOptionalApprovers(data.approvers.optional);\n setPotentialApprovers(data.approvers.potential);\n setSelectedOptionalApprovers(data.approvers.optional);\n setMinimumApproverCount(data.minimumApprovals);\n };\n\n useEffect(() => {\n fetchCartApprovers();\n }, []);\n\n const selectedApproverIds = selectedOptionalApprovers.map(approver => approver.id);\n const optionalApproverIds = optionalApprovers.map(approver => approver.id);\n const optionalApproverUnchanged = () => {\n if (selectedApproverIds.length !== optionalApproverIds.length) {\n return false;\n }\n\n const newApproverIds = selectedApproverIds.filter(\n selectedApproverId => !optionalApproverIds.includes(selectedApproverId),\n );\n\n return newApproverIds.length === 0;\n };\n\n const startApprovalProcess = () => {\n let newOptionalApproverIds = null;\n if (!optionalApproverUnchanged()) {\n newOptionalApproverIds = selectedApproverIds;\n }\n sendApprovalRequest(newOptionalApproverIds);\n };\n return (\n \n
\n\n \n
\n \n {I18n.t('components.ibe.traveler_details.traveler', {\n value: this.props.selectedTravelerIndex + 1,\n })}\n
\n \n {I18n.t('components.ibe.traveler_details.out_of_traveler', {\n count: this.props.fields.length,\n })}\n
\n \n {I18n.t('components.ibe.traveler_details.to_be_selected_traveler', {\n count: this.props.fields.length,\n })}\n
\n - \n {this.props.fields.map((traveler, index) => (\n
- \n {dividerContent()}\n\n {I18n.t('components.ibe.cart.share_traveler_information')}\n\n \n {this.props.isTravelerDataLoading ? (\n \n )}\n
- \n {this.props.fields.length > 1 && !this.props.disableComponent && (\n \n\n )}\n \n
\n
\n );\n};\nRequestApproval.propTypes = {\n cartId: PropTypes.number.isRequired,\n sendApprovalRequest: PropTypes.func.isRequired,\n disabled: PropTypes.bool.isRequired,\n};\nexport default RequestApproval;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { hot } from 'react-hot-loader';\nimport { I18nText, Spinner } from '@wtag/react-comp-lib';\nimport Tooltip from '@wtag/rcl-tooltip';\nimport Alert from 'sharedWebpack/Alert';\nimport SingleTravelerInformations from './SingleTravelerInformations';\nimport SelectTravelers from './SelectTravelersContainer';\nimport CheckoutProgress from '../components/CheckoutProgress';\nimport RequestApproval from './RequestApproval';\nimport './styles.scss';\n\nclass TravelerDetails extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n activeTravelerIndex: 0,\n proceedToPaymentButtonClicked: false,\n approvalButtonDisabled: false,\n customerRequirersApproval: false,\n };\n }\n\n componentDidMount() {\n const {\n formValues,\n fields: { travelers },\n fetchCurrentCustomer,\n fetchCartPeople,\n cartId,\n customerSelected,\n totalTravelerCount,\n initializeForm,\n } = this.props;\n\n const firstTraveler = travelers[0];\n const { driverAge } = formValues.travelers[0];\n\n if (driverAge) {\n firstTraveler.driverAge.onChange(driverAge);\n }\n\n if (firstTraveler.guestUser && !firstTraveler.guestUser.value) {\n fetchCurrentCustomer(this.context.callbackParams).then(customer => {\n const mappedCustomer = customer;\n if (this.context.laymanMode && mappedCustomer && !mappedCustomer.email) {\n mappedCustomer.email = this.context.travelArrangerDefaultEmail;\n }\n\n fetchCartPeople(cartId, this.context.callbackParams).then(cartTravelers => {\n if (cartTravelers.data.length > 0) {\n return this.mapAndSelectExistingCartTravelers(cartTravelers, mappedCustomer);\n }\n return customerSelected(0, mappedCustomer);\n });\n });\n }\n if (totalTravelerCount !== travelers.length) {\n initializeForm(formValues);\n }\n }\n\n setActiveTraveler = index => {\n this.setState({ activeTravelerIndex: index });\n };\n\n sendApprovalRequest = (optionalApproverIds = []) => {\n this.setState({ approvalButtonDisabled: true });\n this.props.saveApprovalRequest(this.context.callbackParams, optionalApproverIds);\n };\n\n mapAndSelectExistingCartTravelers = (cartTravelers, currentCustomer) => {\n cartTravelers.data.map((traveler, index) => {\n let travelerData = {\n ...traveler,\n address: traveler.residenceAddress,\n meal: traveler.mealRequests,\n };\n if (index === 0 && !traveler.guestUser && currentCustomer) {\n // InCase cart was created for another customer in Agent\n // then opened on Traveler app for different logged in customer\n travelerData = {\n ...currentCustomer,\n meal: traveler.mealRequests,\n assistanceRequests: traveler.assistanceRequests,\n };\n }\n return this.props.customerSelected(index, travelerData);\n });\n };\n\n fieldsHasErrors = fields =>\n Object.values(fields).some(field => {\n if (typeof field.invalid !== 'undefined') return field.invalid;\n return Object.values(field).some(nestedField => nestedField.invalid);\n });\n\n haveError = () =>\n Object.values(this.props.fields.travelers).some(field => this.fieldsHasErrors(field));\n\n fieldsDataChanged = field => {\n if (field.dirty !== undefined && field.dirty === true) return true;\n\n if (field.dirty === undefined && field !== null) {\n return Object.values(field).some(nestedValue => this.fieldsDataChanged(nestedValue.dirty));\n }\n return false;\n };\n\n // We are checking whether the first traveler was changed or any of it's data was changed\n isCartOwnerDataChanged = () =>\n this.props.fields.travelers[0].guestUser.value ||\n Object.values(this.props.fields.travelers[0]).some(value => this.fieldsDataChanged(value));\n\n travelArrangerWithReadPermission = () =>\n this.context.travelArranger &&\n this.context.travelArranger.customerInformationVisible &&\n !this.context.travelArranger.customerInformationEditable;\n\n // For Travel arranger with read permission, if the traveller was not changed and\n // if any of the data was changed we will call a different API. We are detecting that case here.\n // For context please see https://github.com/wtag/agent/pull/5297#discussion_r1471803193\n readOnlyTravelArrangerWithUnchangedData = () =>\n this.travelArrangerWithReadPermission() && !this.isCartOwnerDataChanged();\n\n phoneNumberValidate = () => {\n this.props.asyncPhoneNumberValidate(this.props.fields);\n };\n\n travelerEmailValidate = async () => {\n if (this.props.laymanMode) {\n await this.props.asyncTravelerEmailValidate(this.props.fields);\n }\n };\n\n resetTraveler = index => {\n this.setState({\n customerRequirersApproval: false,\n });\n this.props.resetTraveler(index);\n };\n\n handleSubmit = () =>\n this.props.saveTravelers(\n this.props.formValues,\n this.context.callbackParams,\n this.readOnlyTravelArrangerWithUnchangedData(),\n );\n\n checkOwnerRequiresApproval = () => {\n this.props.fetchCart(this.props.cartId, this.context.callbackParams).then(data => {\n this.props.updateTravelerSavingStatus(false);\n if (data.requiresApproval) {\n this.setState({\n customerRequirersApproval: data.requiresApproval,\n proceedToPaymentButtonClicked: false,\n });\n } else {\n this.props.proceedToPayment();\n }\n });\n };\n\n saveTravelersOnClick = () => {\n this.setState({ proceedToPaymentButtonClicked: true });\n this.props.updateTravelerSavingStatus(true);\n this.props.resetTravelersError();\n this.props.updateProceedToPaymentPageView(true);\n this.handleSubmit().then(() => {\n if (this.props.travelersError.errorList.length > 0) {\n this.setState({ proceedToPaymentButtonClicked: false });\n this.props.updateProceedToPaymentPageView(false);\n }\n this.checkOwnerRequiresApproval();\n });\n };\n\n hintsForStepperButton = () => {\n if (!this.props.bookingPossible) {\n return \n
\n \n );\n }\n\n if (\n this.context.travelerLoggedIn &&\n !this.props.selectedCustomers[0] &&\n !this.props.fields.travelers[0].guestUser.value\n ) {\n return (\n \n
\n \n );\n }\n\n return null;\n };\n\n render() {\n const flightPresent =\n typeof this.props.flightResults !== 'undefined' && this.props.flightResults.length > 0;\n const disabled =\n this.context.travelArranger && !this.context.travelArranger.customerInformationEditable;\n const visible =\n !this.context.travelArranger || this.context.travelArranger.customerInformationVisible;\n const editable =\n this.context.travelArranger &&\n this.context.travelArranger.customerInformationEditable &&\n this.context.travelArranger.customerInformationVisible;\n\n const sortedTravelerError = this.props.travelersError.errorList.sort(\n (a, b) => a.travelerIndex - b.travelerIndex,\n );\n\n const isTravelerDataLoading = this.checkTravelerDataLoading();\n\n return (\n \n );\n }\n}\n\nTravelerDetails.propTypes = {\n bookingPossible: PropTypes.bool.isRequired,\n saveTravelers: PropTypes.func.isRequired,\n cartId: PropTypes.string.isRequired,\n fields: PropTypes.shape().isRequired,\n formValues: PropTypes.shape().isRequired,\n selectedCustomers: PropTypes.shape().isRequired,\n customerSelected: PropTypes.func.isRequired,\n setResoOptionEmail: PropTypes.func.isRequired,\n setResoOptionPhone: PropTypes.func.isRequired,\n internationalFlight: PropTypes.bool.isRequired,\n passEmailToAirline: PropTypes.bool.isRequired,\n passPhoneToAirline: PropTypes.bool.isRequired,\n fetchCurrentCustomer: PropTypes.func.isRequired,\n resetForGuest: PropTypes.func.isRequired,\n totalTravelerCount: PropTypes.number.isRequired,\n initializeForm: PropTypes.func.isRequired,\n fetchCartPeople: PropTypes.func.isRequired,\n flightResults: PropTypes.arrayOf(\n PropTypes.shape({\n trips: PropTypes.arrayOf(\n PropTypes.shape({\n segments: PropTypes.arrayOf(\n PropTypes.shape({\n operatingCarrierCode: PropTypes.string.isRequired,\n operatingFlightNumber: PropTypes.string.isRequired,\n }).isRequired,\n ),\n }).isRequired,\n ),\n }),\n ),\n currentCustomer: PropTypes.shape(),\n asyncPhoneNumberValidate: PropTypes.func.isRequired,\n asyncTravelerEmailValidate: PropTypes.func.isRequired,\n resetTravelersError: PropTypes.func.isRequired,\n updateTravelerSavingStatus: PropTypes.func.isRequired,\n proceedToPayment: PropTypes.func.isRequired,\n travelersError: PropTypes.shape({\n status: PropTypes.bool,\n errorList: PropTypes.arrayOf(\n PropTypes.shape({\n errorMessage: PropTypes.string.isRequired,\n travelerIndex: PropTypes.number.isRequired,\n }),\n ),\n }),\n mealRequests: PropTypes.shape({\n availableCodes: PropTypes.arrayOf(PropTypes.string),\n supported: PropTypes.bool,\n }).isRequired,\n assistanceRequests: PropTypes.shape().isRequired,\n resetTraveler: PropTypes.func.isRequired,\n forceApprovalRequest: PropTypes.func.isRequired,\n saveApprovalRequest: PropTypes.func.isRequired,\n enableIdDocOptional: PropTypes.bool.isRequired,\n laymanMode: PropTypes.bool,\n fetchCart: PropTypes.func.isRequired,\n identificationDocumentsRequired: PropTypes.bool.isRequired,\n countryCodes: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string)).isRequired,\n operatingCarriers: PropTypes.arrayOf(PropTypes.string).isRequired,\n isCarAdded: PropTypes.bool.isRequired,\n totalCartItems: PropTypes.number,\n isTravelerInformationLoading: PropTypes.bool.isRequired,\n isFetchingVisaAdvisory: PropTypes.bool.isRequired,\n isSavingTravelerDetails: PropTypes.bool.isRequired,\n updateProceedToPaymentPageView: PropTypes.bool.isRequired,\n proceedToPaymentPageView: PropTypes.bool.isRequired,\n travelerUpdateAbilities: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.number,\n currentUseHasUpdateAbility: PropTypes.bool,\n }),\n ).isRequired,\n};\n\nTravelerDetails.defaultProps = {\n flightResults: [],\n currentCustomer: {},\n travelersError: {\n status: false,\n errorList: [],\n },\n laymanMode: false,\n totalCartItems: 0,\n};\n\nTravelerDetails.contextTypes = {\n laymanMode: PropTypes.bool.isRequired,\n travelerLoggedIn: PropTypes.bool.isRequired,\n callbackParams: PropTypes.shape().isRequired,\n travelArranger: PropTypes.shape({\n customerInformationVisible: PropTypes.bool.isRequired,\n customerInformationEditable: PropTypes.bool.isRequired,\n }).isRequired,\n travelArrangerDefaultEmail: PropTypes.string.isRequired,\n};\n\nexport default hot(module)(TravelerDetails);\n","import routes from 'agentRoutes';\nimport httpClient from 'agentHTTPClient';\nimport { stopAsyncValidation, startAsyncValidation } from 'redux-form';\nimport React from 'react';\nimport { I18nText } from '@wtag/react-comp-lib';\n\nconst asyncPhoneNumberValidate = (formValue, formName, dispatch) => {\n if (!formValue) return null;\n\n dispatch(startAsyncValidation(formName));\n\n const phoneErrors = formValue.travelers.map(traveler => {\n const number = traveler.phone.value;\n if (number) {\n return httpClient\n .get(routes.validations.phoneNumber({ number }))\n .then(response => {\n if (response.data.message) {\n return {\n phone: \n
\n );\n }\n return (\n \n
\n );\n};\n\nStepper.defaultProps = {\n className: null,\n finishButtonLabel: 'Finish',\n showFinishButton: true,\n nextButtonLabel: 'Next Step',\n previousButtonLabel: 'Previous Step',\n disableMoveForward: false,\n disableMoveBackward: false,\n onFinish: () => {},\n onMoveBack: () => {},\n onMoveNext: () => {},\n definedNextButton: null,\n nextStepButtonHint: null,\n errors: {},\n completedStepIndex: null,\n};\n\nStepper.propTypes = {\n definedNextButton: PropTypes.node,\n className: PropTypes.string,\n errors: PropTypes.shape(),\n nextStepButtonHint: PropTypes.string,\n showFinishButton: PropTypes.bool,\n finishButtonLabel: PropTypes.string,\n steps: PropTypes.arrayOf(\n PropTypes.shape({\n stepName: PropTypes.oneOfType([PropTypes.node, PropTypes.string]).isRequired,\n stepHint: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),\n }),\n ).isRequired,\n activeStepIndex: PropTypes.number.isRequired,\n nextButtonLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),\n previousButtonLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),\n disableMoveForward: PropTypes.bool,\n disableMoveBackward: PropTypes.bool,\n onFinish: PropTypes.func,\n onMoveBack: PropTypes.func,\n onMoveNext: PropTypes.func,\n completedStepIndex: PropTypes.number,\n};\n\nexport default Stepper;\n","import React, { useImperativeHandle, forwardRef } from 'react';\nimport PropTypes from 'prop-types';\nimport { I18nText } from '@wtag/react-comp-lib';\nimport RclLink from '@wtag/rcl-link';\nimport useWindowWidth from 'sharedWebpack/useWindowWidth';\nimport Stepper from '../../Stepper';\nimport history from '../../lib/history';\n\nimport './styles.scss';\n\nconst OrderSummaryLink = ({ scrollToRef, displayLink }) => {\n const handleOnLinkClick = () => {\n if (scrollToRef.current) {\n scrollToRef.current.scrollIntoView();\n }\n };\n\n if (displayLink) {\n return (\n \n
\n {renderNextButton()}\n \n {steps.map((step, index) => (\n
\n \n
\n \n
\n \n \n {I18n.t('components.ibe.check_out_progress.total_cart_items', {\n count: totalCartItems,\n })}\n \n
\n \n {text}\n {\n setIsVisible(false);\n }}\n size=\"large\"\n content={\n
\n );\n};\n\nLabelWithHint.propTypes = {\n text: PropTypes.string.isRequired,\n hint: PropTypes.string.isRequired,\n};\n\nexport default LabelWithHint;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Icon from '@wtag/rcl-icon';\nimport classNames from 'classnames';\n\nimport './styles.scss';\n\nconst Stars = ({ wrapperClassName, stars, starIcon, showStarsNumber }) => {\n if (stars <= 0) {\n return null;\n }\n\n const starIcons = Array.from({ length: stars }, (_, icon) =>\n starIcon ? (\n React.cloneElement(starIcon, { key: icon })\n ) : (\n \n
\n }\n direction=\"top-right\"\n >\n \n {text}
\n{hint}
\n\n {starIcons}\n {showStarsNumber && (\n \n (\n {I18n.t('components.ibe.search_results.hotel.hotel_rating_count', {\n starCount: stars,\n })}\n )\n \n )}\n
\n );\n};\n\nStars.defaultProps = {\n wrapperClassName: null,\n stars: 0,\n starIcon: null,\n showStarsNumber: false,\n};\n\nStars.propTypes = {\n wrapperClassName: PropTypes.string,\n stars: PropTypes.number,\n starIcon: PropTypes.element,\n showStarsNumber: PropTypes.bool,\n};\n\nexport default Stars;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport { injectIntl } from 'react-intl';\nimport Snackbar from 'material-ui/Snackbar';\n\nimport { clearError, fetchStaticProducts } from './actions/common';\n\nclass App extends React.Component {\n componentDidMount() {\n this.props.fetchStaticProducts();\n }\n\n render() {\n let notification;\n if (this.props.errorPresent) {\n notification = (\n \n {this.props.children &&\n React.cloneElement(this.props.children, {\n error: this.props.error,\n errorPresent: this.props.errorPresent,\n })}\n {notification}\n
\n );\n }\n}\n\nApp.defaultProps = {\n error: null,\n};\n\nApp.propTypes = {\n children: PropTypes.node.isRequired,\n errorPresent: PropTypes.bool.isRequired,\n error: PropTypes.string,\n clearError: PropTypes.func.isRequired,\n fetchStaticProducts: PropTypes.func.isRequired,\n};\n\nconst mapStateToProps = state => ({\n error: state.common.error.message,\n errorPresent: 'message' in state.common.error,\n});\n\nconst mapDispatchToProps = dispatch => ({\n clearError: () => dispatch(clearError()),\n fetchStaticProducts: () => dispatch(fetchStaticProducts()),\n});\n\nexport default injectIntl(connect(mapStateToProps, mapDispatchToProps)(App));\n","import React from 'react';\nimport { I18nText } from '@wtag/react-comp-lib';\n\nconst NotAvailable = () => (\n \n
\n);\n\nexport default NotAvailable;\n","/* eslint-disable react/require-default-props */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport shallowEqual from 'react-redux/lib/utils/shallowEqual';\n\nfunction mapParams(paramKeys, params) {\n return paramKeys.reduce((acc, key) => Object.assign({}, acc, { [key]: params[key] }), {});\n}\n\nexport default function fetchOnUpdate(paramKeys, fn) {\n return DecoratedComponent =>\n class FetchOnUpdateDecorator extends React.Component {\n static propTypes = {\n match: PropTypes.shape({\n params: PropTypes.shape({}),\n }),\n };\n\n componentWillMount() {\n fn(mapParams(paramKeys, this.props.match.params), this.props);\n }\n\n componentDidUpdate(prevProps) {\n const params = mapParams(paramKeys, this.props.match.params);\n const prevParams = mapParams(paramKeys, prevProps.match.params);\n\n if (!shallowEqual(params, prevParams)) {\n fn(params, this.props);\n }\n }\n\n render() {\n return \n \n
\n
\n \n
\n \n
\n
\n);\n\nexport default EmptyFilterAndResult;\n","export const humanReadableDuration = durationInMinutes => {\n const hours = Math.floor(durationInMinutes / 60);\n const minutes = durationInMinutes % 60;\n\n if (hours && minutes) {\n return `${hours}h ${minutes}min`;\n }\n if (hours && !minutes) {\n return `${hours}h`;\n }\n return `${minutes}min`;\n};\n\nexport default humanReadableDuration;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Card from '@wtag/rcl-card';\n\nimport './styles.scss';\n\nconst FilterWrapper = props => {\n const { title, children, isInitiallyCollapsed, type } = props;\n\n const className = {\n primary: 'filter-wrapper--primary',\n secondary: 'filter-wrapper--secondary',\n };\n\n return (\n \n \n \n
\n \n
\n \n \n \n
\n \n \n \n
\n \n
\n );\n }\n}\n\nRangeFilter.defaultProps = {\n values: null,\n};\n\nRangeFilter.propTypes = {\n disabled: PropTypes.bool.isRequired,\n min: PropTypes.number.isRequired,\n max: PropTypes.number.isRequired,\n onChange: PropTypes.func.isRequired,\n formatLabel: PropTypes.func.isRequired,\n step: PropTypes.number,\n values: PropTypes.shape({\n min: PropTypes.number.isRequired,\n max: PropTypes.number.isRequired,\n }),\n};\n\nRangeFilter.defaultProps = {\n step: 10,\n};\n\nexport default RangeFilter;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nconst FilterAction = ({ handleCheckAll, handleUncheckAll, allOptionsChecked, checkedItems }) => (\n \n {this.props.formatLabel(this.state.values[0])} -{' '}\n {this.props.formatLabel(this.state.values[1])}\n
\n \n
\n \n \n {I18n.t('components.ibe.search_results.filters.select_all')}\n \n | \n \n {I18n.t('components.ibe.search_results.filters.reset_flight')}\n \n
\n);\n\nexport default FilterAction;\n\nFilterAction.propTypes = {\n handleCheckAll: PropTypes.func.isRequired,\n handleUncheckAll: PropTypes.func.isRequired,\n allOptionsChecked: PropTypes.bool.isRequired,\n checkedItems: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\n};\n","import React, {Fragment, useEffect, useState} from 'react';\nimport { useUpdateEffect } from 'usehooks-ts';\nimport CheckBox from '@wtag/rcl-check-box';\nimport Amount from 'sharedWebpack/Amount';\nimport { ContentLoaderPlaceholder } from '@wtag/react-comp-lib';\nimport PropTypes from 'prop-types';\nimport FilterWrapper from '../FilterWrapper';\nimport FilterAction from './FilterAction';\nimport './style.scss';\n\nexport default function FilterSection({\n filterTitle,\n allOptions,\n airlinesInformations,\n tenantCurrency,\n filterResults,\n searchParameter,\n selectedOptions,\n onSelect,\n fetchAirlineInformations,\n isDividerVisible,\n currentSelection,\n isAllChecked,\n onAllChecked,\n}) {\n const [selectedItems, setSelectedItems] = useState(selectedOptions || []);\n const [checkedItems, setCheckedItems] = useState(isAllChecked ? selectedOptions : []);\n\n const allOptionsChecked = allOptions.length === checkedItems.length;\n const allOptionsSelected = allOptions.length === selectedItems.length;\n\n useEffect(() => {\n allOptions.forEach(airline => {\n if (airline.code) {\n fetchAirlineInformations(airline.code);\n }\n });\n }, [allOptions]);\n\n const mapAllOptionsAsSelected = () =>\n allOptions.map(data => {\n if (typeof data === 'string') return data;\n if (data.identifier === 0) return 0;\n\n return data.identifier || data.code;\n });\n\n const handleCheckAll = () => {\n if (allOptions.length > 1) {\n const selectedData = mapAllOptionsAsSelected();\n\n setCheckedItems(selectedData);\n onAllChecked(true);\n setSelectedItems(selectedData);\n }\n };\n\n const handleUncheckAll = () => {\n if (selectedItems.length && allOptions.length > 1) {\n setCheckedItems([]);\n onAllChecked(false);\n setSelectedItems([]);\n }\n };\n\n const handleCheckEachChild = value => {\n const itemPreviouslyChecked = checkedItems.some(item => item === value);\n\n if (!itemPreviouslyChecked) {\n setCheckedItems(prevState => [...prevState, value]);\n\n if (allOptionsSelected) {\n setSelectedItems([]);\n }\n\n setSelectedItems(prevState => [...prevState, value]);\n } else {\n const newCheckedArray = checkedItems.filter(item => item !== value);\n\n setCheckedItems(newCheckedArray);\n setSelectedItems(newCheckedArray);\n }\n };\n\n const IsOptionChecked = data =>\n allOptions.length === 1 || checkedItems.some(item => item === data);\n\n const renderAirLineFilters = (data, index) => {\n const airlineInfo = airlinesInformations && airlinesInformations[data.code];\n\n const isAirlineChecked = IsOptionChecked(data.code);\n\n return (\n \n {airlineInfo ? (\n \n handleCheckEachChild(data.code)}\n />\n \n ) : (\n
\n );\n };\n\n const selectLabel = data => {\n if (searchParameter === 'categories') {\n return I18n.t(data, { scope: 'components.ibe.car_categories' });\n }\n if (searchParameter === 'vendors') {\n return I18n.t(data, { scope: 'components.ibe.vendors' });\n }\n\n return I18n.t(data, { scope: 'components.ibe.caterings_values' });\n };\n\n const renderFiltersWithStringTypeData = data => {\n const isItemChecked = IsOptionChecked(data);\n\n return (\n \n {I18n.t('components.ibe.search_results.filters.start_position')} \n {tenantCurrency && (\n
\n \n {data ? (\n handleCheckEachChild(data)}\n />\n ) : (\n
\n );\n };\n\n const renderFiltersWithIdentifiers = data => {\n const isItemChecked = IsOptionChecked(data.identifier);\n\n return (\n \n {data ? (\n handleCheckEachChild(data.identifier)}\n />\n ) : (\n
\n );\n };\n\n const compareSelections = () => {\n if (allOptionsSelected || checkedItems.length === 0) {\n return onSelect(null);\n }\n return onSelect(filterTitle);\n };\n\n useUpdateEffect(() => {\n filterResults(searchParameter, selectedItems, null, allOptionsChecked);\n }, [selectedItems]);\n\n useUpdateEffect(() => {\n setSelectedItems(selectedOptions)\n }, [selectedOptions]);\n\n useEffect(() => {\n onAllChecked(allOptionsChecked);\n\n compareSelections();\n }, [selectedItems]);\n\n useEffect(() => {\n if (!currentSelection) {\n if (!allOptionsChecked) {\n setCheckedItems([]);\n }\n } else {\n setCheckedItems(selectedOptions);\n }\n }, [currentSelection]);\n\n useEffect(() => {\n if (!isAllChecked && !currentSelection) {\n setCheckedItems([]);\n }\n }, [isAllChecked]);\n\n return (\n \n {allOptions.length > 1 && (\n
\n \n\n {isDividerVisible && (\n \n
\n
\n )}\n \n
\n {taggedFilters.length > 0 && (\n
\n );\n}\n\nFilterTags.defaultProps = {};\n\nFilterTags.propTypes = {\n onRemoveFilter: PropTypes.func.isRequired,\n currentFilters: PropTypes.shape().isRequired,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Card from '@wtag/rcl-card';\nimport Button from '@wtag/rcl-button';\nimport SelectBox from '@wtag/rcl-select-box';\nimport Amount from 'sharedWebpack/Amount';\nimport Tooltip from '@wtag/rcl-tooltip';\nimport Icon from '@wtag/rcl-icon';\nimport { humanReadableDuration } from '../../../lib/time_helpers';\nimport { STATS, FILTER_PARAMS } from '../../commonProps';\nimport FilterWrapper from '../../FilterWrapper';\nimport RangeFilter from '../../../components/RangeFilter';\nimport FilterSection from '../../FilterSection';\nimport FilterTags from './FilterTags';\nimport '../style.scss';\n\nclass FilterComponent extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n filterResetId: Math.random(),\n currentFilters: { ...this.props.filterParams.filters },\n isAllChecked: { ...this.props.filterParams.isAllChecked },\n filterParams: {\n stopoverCounts: [],\n baggage: [],\n caterings: [],\n airlines: [],\n multiTicket: [],\n }\n };\n }\n\n resetFilters = () => {\n this.props.resetFilters(this.props.stats);\n this.setState({ filterResetId: Math.random() });\n this.setState({\n currentFilters: {\n airlines: null,\n caterings: null,\n baggage: null,\n stopoverCounts: null,\n multiTicket: null,\n price: null,\n },\n });\n this.setState({\n isAllChecked: {\n stopoverCounts: false,\n baggage: false,\n caterings: false,\n airlines: false,\n multiTicket: false,\n },\n });\n this.setState({\n filterParams: {\n stopoverCounts: [],\n baggage: [],\n caterings: [],\n airlines: [],\n multiTicket: [],\n }\n });\n };\n\n handleFilterTripIndividualTag = (key, values, searchParam, stats, tagName) => {\n if (\n values.max.toFixed(3) === stats.max.toFixed(3) &&\n values.min.toFixed(3) === stats.min.toFixed(3)\n ) {\n this.resetTripFilter(key, tagName);\n } else {\n this.handleTripTag(tagName, key);\n }\n\n this.props.filterFlightSearch(searchParam, values, key);\n };\n\n resetTripFilter = (key, value) => {\n let changedTrips = this.state.currentFilters[`trip${key}`];\n\n if (!changedTrips) {\n return;\n }\n changedTrips = changedTrips.filter(option => option !== value);\n const newTrips = changedTrips;\n\n if (newTrips.length !== 0) {\n this.setState({\n currentFilters: {\n ...this.state.currentFilters,\n [`trip${key}`]: newTrips,\n },\n });\n } else {\n this.setState({\n currentFilters: {\n ...this.state.currentFilters,\n [`trip${key}`]: null,\n },\n });\n }\n };\n\n resetTrip = key => {\n if (key === 'price') {\n const newState = this.props.filterParams.price;\n\n const objectData = {\n changedData: newState,\n initialData: this.props.stats.price,\n key: 'price',\n };\n\n this.props.resetFiltersByKey(objectData);\n this.setState({ filterResetId: Math.random() });\n } else {\n const newState = this.props.filterParams.tripSpecific.filter(param => param.key === key);\n\n const objectData = {\n changedData: newState,\n initialData: this.props.stats.tripSpecific,\n };\n\n this.props.resetFiltersByKey(objectData);\n this.setState({ filterResetId: Math.random() });\n }\n };\n\n resetData = section => {\n if (section.includes('trip')) {\n const tripNumber = parseInt(section.charAt(section.length - 1), 10);\n this.resetTrip(tripNumber);\n } else if (section === 'price') {\n this.resetTrip('price');\n this.setState({ filterResetId: Math.random() });\n this.setState({\n currentFilters: { ...this.state.currentFilters, [section]: null },\n });\n }\n\n this.setState({\n currentFilters: { ...this.state.currentFilters, [section]: null },\n });\n this.props.filterParams.filters[section] = null;\n this.state.filterParams[section] = [];\n };\n\n formatLabel = value => {\n const hour = Math.floor(value / 60);\n const minutes = `0${value % 60}`.slice(-2);\n return `${hour}:${minutes}`;\n };\n\n handleFilterResults = (filter, value, ...args) => {\n this.state.filterParams[filter] = value\n this.props.filterFlightSearch(filter, value, ...args)\n }\n\n handleTripTag = (keyData, key) => {\n const selectedTrips = this.state.currentFilters[`trip${key}`];\n const isTripExist = selectedTrips && selectedTrips.includes(keyData);\n\n if (selectedTrips && !isTripExist) {\n const newSelectedTrips = selectedTrips.concat(keyData);\n\n this.setState({\n currentFilters: {\n ...this.state.currentFilters,\n [`trip${key}`]: newSelectedTrips,\n },\n });\n } else if (!selectedTrips) {\n this.setState({\n currentFilters: {\n ...this.state.currentFilters,\n [`trip${key}`]: [keyData],\n },\n });\n }\n };\n\n render() {\n let totalPriceFilter;\n\n if (this.props.trips.length > 1) {\n totalPriceFilter = (\n \n {`${tag} : ${selectedFilters[tag].join(', ')}`} \n ) : (\n selectedFilters[tag]\n )}\n \n {`${tag}: ${selectedFilters[tag].join(', ')}`} \n ) : (\n selectedFilters[tag]\n )}\n \n \n {!showAllTags\n ? I18n.t('components.ibe.search_results.filters.tagged_items', {\n items: taggedFilters.length - 2,\n })\n : I18n.t('components.ibe.search_results.filters.hide_tags')}\n \n )}\n \n
\n )}\n \n {I18n.t('components.ibe.search_results.filters.active_filters')}\n
\n \n {!showAllTags\n ? taggedFilters.slice(0, 2).map(tag => (\n \n \n {selectedFilters[tag].length > 0 &&\n typeof selectedFilters[tag] === 'object' ? (\n \n
\n
\n \n
\n {\n if (\n Math.ceil(values.max) === Math.ceil(this.props.stats.price.max) &&\n Math.floor(values.min) === Math.floor(this.props.stats.price.min)\n ) {\n this.setState({\n currentFilters: { ...this.state.currentFilters, price: null },\n });\n } else {\n this.setState({\n currentFilters: {\n ...this.state.currentFilters,\n price: I18n.t('components.ibe.search_results.filters.total_price'),\n },\n });\n }\n\n this.props.filterFlightSearch('price', values);\n }}\n formatLabel={value =>
\n );\n }\n\n const filters = (\n \n {I18n.t('components.ibe.search_results.filters.total_price')}\n
\n\n \n \n
\n \n
\n
\n \n
\n \n \n
\n );\n\n return \n
\n \n {I18n.t('components.ibe.search_results.filters.title')}\n
\n \n {\n this.resetData(section);\n }}\n />\n
\n\n \n {I18n.t('components.ibe.search_results.filters.sort_by')}\n this.props.filterFlightSearch('sortBy', event.value)}\n key={this.state.filterResetId}\n options={this.props.stats.availableSortOptions}\n value={this.props.stats.availableSortOptions.find(\n option => option.value === this.props.filterParams.sortBy,\n )}\n width=\"full\"\n isClearable={false}\n />\n
\n \n
\n
\n \n
\n {totalPriceFilter}\n {this.props.trips.map((trip, tripIndex) => {\n const key = trip.identifier;\n const filterParams = this.props.filterParams.tripSpecific.find(\n params => params.key === key,\n );\n const stats = this.props.stats.tripSpecific.find(params => params.key === key);\n\n if (!stats) {\n return null;\n }\n\n const selectedTripIndex = parseInt(this.props.match.params.tripId, 10) - 1;\n\n return (\n ({\n identifier: stopoverCount,\n name: I18n.t('components.ibe.results.filters.stopover_counts.values', {\n count: stopoverCount,\n }),\n }))}\n currentSelection={this.state.currentFilters.stopoverCounts}\n isAllChecked={this.state.isAllChecked.stopoverCounts}\n filterResults={this.handleFilterResults}\n searchParameter=\"stopoverCounts\"\n selectedOptions={this.state.filterParams.stopoverCounts}\n onSelect={values =>\n this.setState({\n currentFilters: { ...this.state.currentFilters, stopoverCounts: values },\n })\n }\n onAllChecked={values =>\n this.setState({\n isAllChecked: { ...this.state.isAllChecked, stopoverCounts: values },\n })\n }\n />\n\n ({\n identifier: baggage,\n name: I18n.t('components.ibe.results.filters.included_baggages.values', {\n count: baggage,\n }),\n }))}\n currentSelection={this.state.currentFilters.baggage}\n isAllChecked={this.state.isAllChecked.baggage}\n filterResults={this.handleFilterResults}\n searchParameter=\"baggage\"\n selectedOptions={this.state.filterParams.baggage}\n onSelect={values =>\n this.setState({\n currentFilters: { ...this.state.currentFilters, baggage: values },\n })\n }\n onAllChecked={values =>\n this.setState({\n isAllChecked: { ...this.state.isAllChecked, baggage: values },\n })\n }\n />\n\n {this.props.stats.catering && (\n \n this.setState({\n currentFilters: { ...this.state.currentFilters, caterings: values },\n })\n }\n onAllChecked={values =>\n this.setState({\n isAllChecked: { ...this.state.isAllChecked, caterings: values },\n })\n }\n />\n )}\n\n {this.props.stats.airline && this.props.airlineInformations && (\n \n this.setState({\n currentFilters: { ...this.state.currentFilters, airlines: values },\n })\n }\n onAllChecked={values =>\n this.setState({\n isAllChecked: { ...this.state.isAllChecked, airlines: values },\n })\n }\n fetchAirlineInformations={this.props.fetchAirlineInformations}\n />\n )}\n\n {this.props.trips.length > 1 && (\n ({\n identifier: multiTicket,\n name: I18n.t(multiTicket, { scope: 'components.ibe.multi_ticket.values' }),\n }))}\n currentSelection={this.state.currentFilters.multiTicket}\n isAllChecked={this.state.isAllChecked.multiTicket}\n filterResults={this.handleFilterResults}\n searchParameter=\"multiTicket\"\n selectedOptions={this.state.filterParams.multiTicket}\n onSelect={values =>\n this.setState({\n currentFilters: { ...this.state.currentFilters, multiTicket: values },\n })\n }\n onAllChecked={values =>\n this.setState({\n isAllChecked: { ...this.state.isAllChecked, multiTicket: values },\n })\n }\n isDividerVisible={false}\n />\n )}\n
\n \n
\n );\n })}\n\n \n \n
\n \n {I18n.t('components.ibe.search_results.filters.price')}\n \n this.handleFilterTripIndividualTag(\n key,\n values,\n 'prices',\n stats.price,\n I18n.t('components.ibe.search_results.filters.price'),\n )\n }\n formatLabel={value => (\n
\n \n {I18n.t('components.ibe.search_results.filters.duration')}\n \n this.handleFilterTripIndividualTag(\n key,\n values,\n 'tripDurationMinutes',\n stats.tripDurationMinutes,\n I18n.t('components.ibe.search_results.filters.duration'),\n )\n }\n formatLabel={value => humanReadableDuration(value)}\n />\n
\n \n {I18n.t('components.ibe.search_results.filters.departure')}\n \n this.handleFilterTripIndividualTag(\n key,\n values,\n 'departureTimes',\n stats.departureTime,\n I18n.t('components.ibe.search_results.filters.departure_time'),\n )\n }\n formatLabel={value => this.formatLabel(value)}\n />\n
\n \n {I18n.t('components.ibe.search_results.filters.arrival')}\n \n this.handleFilterTripIndividualTag(\n key,\n values,\n 'arrivalTimes',\n stats.arrivalTime,\n I18n.t('components.ibe.search_results.filters.arrival_time'),\n )\n }\n formatLabel={value => this.formatLabel(value)}\n />\n
\n \n \n
\n
\n \n
{filters}
;\n }\n}\n\nFilterComponent.defaultProps = {\n stats: null,\n filterParams: null,\n};\n\nFilterComponent.propTypes = {\n selectedFlightGroups: PropTypes.shape({}).isRequired,\n filterFlightSearch: PropTypes.func.isRequired,\n fetchAirlineInformations: PropTypes.func.isRequired,\n resetFilters: PropTypes.func.isRequired,\n resetFiltersByKey: PropTypes.func.isRequired,\n airlineInformations: PropTypes.shape().isRequired,\n stats: PropTypes.shape(STATS),\n filterParams: PropTypes.shape(FILTER_PARAMS),\n\n trips: PropTypes.arrayOf(\n PropTypes.shape({\n origin: PropTypes.string,\n destination: PropTypes.string,\n date: PropTypes.string,\n }),\n ).isRequired,\n params: PropTypes.shape({\n searchId: PropTypes.string,\n tripId: PropTypes.string,\n }).isRequired,\n currency: PropTypes.string.isRequired,\n appliedFilters: PropTypes.shape({}).isRequired,\n match: PropTypes.shape({\n params: PropTypes.shape({\n tripId: PropTypes.string,\n }),\n }).isRequired,\n};\n\nexport default FilterComponent;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport Icon from '@wtag/rcl-icon';\n\nconst PillTabsList = ({ tripCount, trip, selectedFlightGroups }) => {\n const selectedTripGroup = selectedFlightGroups[tripCount + 1];\n\n return (\n \n \n {I18n.t('components.ibe.results.trip_title', {\n count: tripCount + 1,\n origin: trip.origin,\n destination: trip.destination,\n })}\n \n \n {selectedTripGroup &&
\n );\n};\n\nPillTabsList.propTypes = {\n tripCount: PropTypes.number.isRequired,\n trip: PropTypes.shape({\n origin: PropTypes.string.isRequired,\n destination: PropTypes.string.isRequired,\n }).isRequired,\n selectedFlightGroups: PropTypes.shape({}).isRequired,\n};\n\nexport default PillTabsList;\n","import React from 'react';\nimport Alert from 'sharedWebpack/Alert';\nimport { Spinner } from '@wtag/react-comp-lib';\n\nconst Loader = () => (\n \n \n \n
\n);\n\nexport default Loader;\n","import React, { Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport { I18nText } from '@wtag/react-comp-lib';\nimport Loader from './Loader';\n\nconst PillTabsContent = ({ tripCount, searchInProgress, trip, selectedFlightGroups, children }) => (\n \n {I18n.t('components.ibe.results.loader_message')}\n
\n \n
\n \n
\n \n {selectedFlightGroups[tripCount + 1] ? (\n
\n {children}\n \n
\n);\n\nOtherAvailableFlightsWarning.propTypes = {\n isDisabled: PropTypes.bool.isRequired,\n onDeselectAll: PropTypes.func.isRequired,\n children: PropTypes.arrayOf(PropTypes.object.isRequired).isRequired,\n};\n\nexport default OtherAvailableFlightsWarning;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { I18nText } from '@wtag/react-comp-lib';\n\nconst LoadMore = ({ onLoadMore }) => (\n \n \n
\n \n
\n \n \n {I18n.t('components.ibe.results.flight_deselect_alert_message')}\n \n
\n \n {children}\n \n \n
\n \n);\n\nLoadMore.propTypes = {\n onLoadMore: PropTypes.func.isRequired,\n};\n\nexport default LoadMore;\n","import React, { Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport { PillTabs } from '@wtag/react-comp-lib';\nimport PillTabsList from './PillTabsList';\nimport PillTabsContent from './PillTabsContent';\nimport OtherAvailableFlightsWarning from './OtherAvailableFlightsWarning';\nimport LoadMore from './LoadMore';\n\nconst disableFlightGroup = (resultGroup, selectedFlightGroupsIdMap, selectedTrip) => {\n const selectedFilter =\n selectedFlightGroupsIdMap[selectedTrip] !== '' &&\n resultGroup.id === selectedFlightGroupsIdMap[selectedTrip];\n\n return selectedFilter;\n};\n\nconst ResultTabs = ({\n tripId,\n trips,\n resultGroups,\n searchInProgress,\n selectedFlightGroups,\n numberOfResultsToShow,\n numberOfMatchedResultsToShow,\n renderedResultGroup,\n selectGroup,\n deselectGroup,\n populateResults,\n resetSelectGroup,\n onShowMoreMatchedResults,\n onShowMoreOtherResults,\n onOpenConfirmationModal,\n filterExcludeMatchingTrips,\n tabChange,\n isResultAvailable,\n}) => {\n const tabs = [];\n const selectedFlightGroupIds = [];\n const selectedFlightGroupsIdMap = {};\n const selectedTrip = parseInt(tripId, 10);\n\n trips.forEach((_, index) => {\n selectedFlightGroupsIdMap[index + 1] = '';\n });\n\n Object.keys(selectedFlightGroups).forEach(value => {\n if (selectedFlightGroups[value].id) {\n selectedFlightGroupIds.push(selectedFlightGroups[value].id);\n selectedFlightGroupsIdMap[value] = selectedFlightGroups[value].id;\n }\n });\n\n trips.forEach((trip, tripCount) => {\n const selectedResults = [];\n const otherMatchedResults = [];\n const matchedResultLength = resultGroups.matches.length;\n const otherResultLength = resultGroups.others.length;\n const isDisabled = searchInProgress || selectedFlightGroupIds.length === 0;\n\n let otherResults;\n if (isResultAvailable) {\n populateResults(\n numberOfMatchedResultsToShow,\n resultGroups,\n disableFlightGroup,\n selectedFlightGroupsIdMap,\n selectedTrip,\n selectedResults,\n renderedResultGroup,\n selectGroup,\n deselectGroup,\n otherMatchedResults,\n );\n otherResults = resultGroups.others.slice(0, numberOfResultsToShow).map(resultGroup =>\n renderedResultGroup({\n resultGroup,\n selectCallback: resetSelectGroup,\n selectedTripMap: selectedFlightGroupsIdMap,\n selectedTrip,\n deselectGroup,\n disableCard: true,\n }),\n );\n }\n\n tabs.push({\n title: (\n \n
\n \n
\n \n {!laymanMode && \n
\n }\n />\n \n
\n \n
\n \n \n
\n \n {marketingAirlineCodes}\n \n
\n \n \n \n \n {totalStopoverDuration === NO_DURATION ? (\n I18n.t('admin.components.settings.search_input.label.direct')\n ) : (\n \n {humanReadableDuration(totalStopoverDuration)}\n \n {stopOverAirportCodes}\n \n \n )}\n \n }\n />\n
\n \n
\n \n
\n \n
\n \n {lowestFareBrandTitle} \n \n ({I18n.t('admin.components.products.options.automation_style.per_adult.label')})\n \n
\n \n \n
\n \n
\n \n {marketingAirlineCodes}\n
\n \n
\n \n \n \n \n
\n {humanReadableDuration(tripDurationInMinutes)}
\n \n (\n {I18n.t('components.ibe.results.filters.stopover_counts.values', {\n count: stopoverCount,\n })}\n )\n \n \n }\n />\n\n
\n \n
\n \n
\n \n {I18n.t('components.ibe.results.options', {\n count: totalFilteredFareBrands,\n })}\n \n \n {lowestFareBrandTitle} \n \n ({I18n.t('admin.components.products.options.automation_style.per_adult.label')})\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n {filteredFareBrands.slice(0, 3).map(fareBrandItem => (\n \n )}\n
\n \n
\n {totalFilteredFareBrands > 0 && (\n \n \n {I18n.t('components.ibe.results.flight_deselect_alert_message')}\n \n
\n );\n\n if (otherResults.length) {\n otherResultsElements = (\n \n
\n );\n }\n\n tabs.push({\n title: (\n \n \n {alertContent}\n \n {otherResults}\n
\n \n
\n \n \n {this.state.isLargeScreen\n ? I18n.t('components.ibe.results.trip_title', {\n count: `${tripCount + 1}`,\n origin: trip.origin,\n destination: trip.destination,\n })\n : I18n.t('components.ibe.results.only_trip_title', {\n origin: trip.origin,\n destination: trip.destination,\n })}\n \n \n {selectedFlightGroups[tripCount + 1] &&
\n ),\n getContent: () => (\n \n \n \n
\n )}\n\n \n {I18n.t('components.ibe.results.loader_message')}\n
\n \n
\n \n
\n\n {selectedResults.length === 0 &&\n otherMatchedResults.length === 0 &&\n otherResults.length === 0 &&\n I18n.t('components.ibe.results.filter_exclude_matching_trips')}\n\n {otherMatchedResults}\n {otherResultsElements}\n {this.props.resultGroups.matches.length + this.props.resultGroups.others.length >\n this.state.numberOfResultsToShow && (\n \n {selectedFlightGroups[tripCount + 1] ? (\n
\n\n {selectedResults}\n \n \n
\n \n )}\n \n {/* for pill tabs key is array item index. that's why we are decreasing the value by one to match item index i.e selectedTabKey={parseInt(this.props.match.params.tripId, 10) - 1} */}\n
\n );\n }\n\n const resultReadyToDisplay =\n this.props.searchCompleted && this.props.searchYieldedResults && this.props.tripLoaded;\n const tripsAvailable = this.props.searchCompleted && this.props.numberOfAvailableTrips > 0;\n const hasNoResultForCurrentTrip =\n tripsAvailable && !this.props.hasResultsToRender && this.props.tripLoaded;\n const hasResultForCurrentTrip = tripsAvailable && this.props.hasResultsToRender;\n const NoResultForAnyTrips =\n ((this.props.searchCompleted && !this.props.searchYieldedResults) ||\n (this.props.searchCompleted &&\n !this.props.hasResultsToRender &&\n this.props.searchYieldedResults)) &&\n this.props.tripLoaded;\n\n const filterComponent = (\n \n
\n );\n return partialResult;\n } else if (hasNoResultForCurrentTrip) {\n partialResult = (\n \n {filterComponent}\n
\n\n \n
\n \n
\n \n this.hideSidePanel()}\n />\n
\n \n
\n );\n return partialResult;\n } else if (NoResultForAnyTrips) {\n return content;\n }\n\n return \n {filterComponent}\n
\n\n \n
\n \n
\n \n
\n \n {this.state.showDeselectAllConfirmationModal && (\n
\n );\n }\n}\n\nResultsComponent.contextTypes = {\n laymanMode: PropTypes.bool.isRequired,\n};\n\nResultsComponent.defaultProps = {\n searchCompleted: false,\n tripLoaded: false,\n searchYieldedResults: false,\n hasResultsToRender: false,\n resultGroups: null,\n stats: null,\n filterParams: null,\n};\n\nResultsComponent.propTypes = {\n selectGroup: PropTypes.func.isRequired,\n resetSelectGroup: PropTypes.func.isRequired,\n selectedFlightGroups: PropTypes.shape({}).isRequired,\n resetFiltersByKey: PropTypes.func.isRequired,\n currency: PropTypes.string.isRequired,\n location: PropTypes.shape({\n search: PropTypes.string,\n }).isRequired,\n resultGroups: PropTypes.shape({\n matches: PropTypes.shape([]),\n others: PropTypes.shape([]),\n }),\n searchCompleted: PropTypes.bool,\n tripLoaded: PropTypes.bool,\n deselectGroup: PropTypes.func.isRequired,\n deselectAllGroups: PropTypes.func.isRequired,\n fetchResults: PropTypes.func.isRequired,\n filterFlightSearch: PropTypes.func.isRequired,\n fetchAirlineInformations: PropTypes.func.isRequired,\n resetFilters: PropTypes.func.isRequired,\n airlineInformations: PropTypes.shape().isRequired,\n people: PropTypes.shape({\n adults: PropTypes.arrayOf(PropTypes.shape({})),\n children: PropTypes.arrayOf(PropTypes.shape({})),\n infants: PropTypes.arrayOf(PropTypes.shape({})),\n }).isRequired,\n trips: PropTypes.arrayOf(\n PropTypes.shape({\n origin: PropTypes.string,\n destination: PropTypes.string,\n date: PropTypes.string,\n }),\n ).isRequired,\n searchYieldedResults: PropTypes.bool,\n hasResultsToRender: PropTypes.bool,\n match: PropTypes.shape({\n params: PropTypes.shape({\n searchId: PropTypes.string,\n tripId: PropTypes.string,\n }),\n }).isRequired,\n searchInProgress: PropTypes.bool.isRequired,\n totalTravelerCount: PropTypes.number.isRequired,\n stats: PropTypes.shape(STATS),\n filterParams: PropTypes.shape(FILTER_PARAMS),\n appliedFilter: PropTypes.shape({}).isRequired,\n viewMode: PropTypes.string.isRequired,\n isShowFilters: PropTypes.bool.isRequired,\n numberOfAvailableTrips: PropTypes.number.isRequired,\n};\n\nconst mapStateToProps = state => ({\n selectedFlightGroups: state.flights.selectedFlightGroups,\n});\n\nexport default connect(mapStateToProps)(ResultsComponent);\n","import { parseQueryString } from './qsMethods';\n\nconst cache = {};\nconst memoizeLocationQuery = (queryString, queryStringConfigParams) => {\n if (queryString in cache) {\n return cache[queryString];\n }\n\n cache[queryString] = parseQueryString(queryString.replace(/^\\?/, ''), queryStringConfigParams);\n return cache[queryString];\n};\n\nexport default memoizeLocationQuery;\n","import { connect } from 'react-redux';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport {\n fetchAirlineInformations,\n fetchFlightSearchResults,\n filterFlightSearch,\n resetFlightSearchFilters,\n resetFlightSearchFiltersByKey,\n resetSelectGroup,\n selectFlightGroup,\n deselectGroup,\n deselectAllGroups,\n fetchAirportDetails,\n fetchAircraftType,\n} from '../../actions/flight';\nimport fetchOnUpdate from '../../lib/decorators/fetchOnUpdate';\nimport ResultsComponent from './ResultsComponent';\nimport memoizeLocationQuery from '../../helpers/memoizeLocationQuery';\n\nconst mapStateToProps = (state, ownProps) => {\n const locationQuery = memoizeLocationQuery(ownProps.location.search);\n const { searchId, tripId } = ownProps.match.params;\n const resultGroups =\n state.flights.searchResultGroupsBySearchId[searchId] &&\n state.flights.searchResultGroupsBySearchId[searchId][tripId];\n\n const hasResultsToRender =\n !!resultGroups && (resultGroups.matches.length > 0 || resultGroups.others.length > 0);\n const searchParams = state.flights.searchParamsBySearchId[searchId];\n const searchedStats = state.flights.searchStatsBySearchId[searchId];\n const searchedParams = state.flights.searchParamsBySearchId[searchId];\n const lastSearchedParams = state.flights.searchParamsBySearchId.lastSearch;\n const currentSearchParams = searchParams || lastSearchedParams;\n const currentFilterParams = state.flights.searchFilterParamsBySearchId[searchId];\n const numberOfAvailableTrips =\n searchedStats && searchedStats.tripSpecific && searchedStats.tripSpecific.length;\n const numberOfSearchedTrips =\n searchedParams && searchedParams.trips && searchedParams.trips.length;\n const hasResultsForAllTrips = numberOfAvailableTrips === numberOfSearchedTrips;\n\n const props = {\n airlineInformations: state.flights.airlineInformations,\n aircraftInformation: state.flights.aircraftTypes,\n airports: state.common.airports,\n searchInProgress: state.flights.searchInProgress,\n searchYieldedResults:\n state.flights.totalResultsBySearchId[searchId] > 0 && hasResultsForAllTrips,\n hasResultsToRender,\n people: state.common.people,\n searchCompleted:\n !locationQuery.cached && !!state.flights.searchResultGroupsBySearchId[searchId],\n tripLoaded: !!resultGroups,\n resultGroups,\n stats: searchedStats,\n filterParams: currentFilterParams,\n lastSearchedParams,\n numberOfAvailableTrips,\n };\n\n if (currentSearchParams && Object.keys(currentSearchParams).length > 0) {\n const { adults, children, infants, totalTravelerCount } = currentSearchParams;\n props.people = { adults, children, infants };\n props.totalTravelerCount = totalTravelerCount;\n } else {\n props.people = { adults: 1, children: 0, infants: 0 };\n props.totalTravelerCount = 1;\n }\n\n if (searchParams && searchParams.trips) {\n props.trips = searchParams.trips;\n } else {\n props.trips = [];\n }\n\n return props;\n};\n\nconst mapDispatchToProps = (dispatch, ownProps) => {\n const locationQuery = memoizeLocationQuery(ownProps.location.search);\n\n return {\n selectGroup: group => dispatch(selectFlightGroup(ownProps.match.params.searchId, group)),\n resetSelectGroup: trip =>\n dispatch(\n resetSelectGroup(\n ownProps.match.params.searchId,\n trip,\n locationQuery.deal,\n locationQuery.dealGroup,\n ownProps.callbackParams,\n ownProps.exchange.bookingIdentifier,\n ),\n ),\n deselectGroup: group => dispatch(deselectGroup(group)),\n deselectAllGroups: () => dispatch(deselectAllGroups()),\n fetchAirlineInformations: code => dispatch(fetchAirlineInformations(code)),\n fetchAircraftType: code => dispatch(fetchAircraftType(code)),\n fetchAirportDetails: code => dispatch(fetchAirportDetails(code)),\n filterFlightSearch: (filter, value, key, isAllChecked) => {\n const { searchId, tripId } = ownProps.match.params;\n dispatch(filterFlightSearch(filter, value, key, searchId, tripId, isAllChecked));\n dispatch(fetchFlightSearchResults({ searchId, tripId }));\n },\n resetFilters: stats => {\n dispatch(\n resetFlightSearchFilters(\n ownProps.match.params.searchId,\n ownProps.match.params.tripId,\n stats,\n ),\n );\n },\n resetFiltersByKey: stats => {\n dispatch(\n resetFlightSearchFiltersByKey(\n ownProps.match.params.searchId,\n ownProps.match.params.tripId,\n stats,\n ),\n );\n },\n fetchResults: (searchId, tripId) => dispatch(fetchFlightSearchResults({ searchId, tripId })),\n };\n};\n\nconst ResultsWithFetchOnUpdate = fetchOnUpdate(['searchId', 'tripId'], (params, props) => {\n if (params.searchId) {\n props.fetchResults(params.searchId, params.tripId || 1);\n }\n})(ResultsComponent);\n\nconst ConnectedResults = connect(mapStateToProps, mapDispatchToProps)(ResultsWithFetchOnUpdate);\n\nconst ResultsWithContext = (props, context) => \n {this.props.isShowFilters && (\n
\n )}\n {this.props && !resultReadyToDisplay && showPartialResults()}\n \n
\n )}\n \n
\n \n {content}\n this.hideSidePanel()}\n />\n
\n \n
\n \n \n {isDone ? (\n \n {index + 1}\n \n )}\n
\n \n \n \n \n )}\n
\n );\n};\n\nMatrixStepper.defaultProps = {\n steps: [],\n footer: null,\n};\n\nMatrixStepper.propTypes = {\n steps: PropTypes.arrayOf(\n PropTypes.shape({\n key: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,\n isDone: PropTypes.bool,\n }),\n ),\n activeStepIndex: PropTypes.number.isRequired,\n footer: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n};\n\nexport default MatrixStepper;\n","import { createContext } from 'react';\n\nconst MatrixContext = createContext();\n\nexport default MatrixContext;\n","import React, { useContext } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport Icon from '@wtag/rcl-icon';\nimport { Link } from 'react-router-dom';\nimport { Header, Text } from '@wtag/rcl-typography';\nimport Button from '@wtag/rcl-button';\nimport Amount from 'sharedWebpack/Amount';\nimport MatrixContext from '../contexts/MatrixContext';\nimport searchURL from '../../../../IBE/lib/helpers/searchURL';\nimport './stepper-control-bar.styles.scss';\n\nconst StepperControllerBar = props => {\n const {\n setActiveStepIndex,\n activeTabKey,\n allResultLink,\n currency,\n totalTrips,\n activeStepIndex,\n activeTripId,\n continueToCartButton,\n price,\n withStyles,\n windowWidth,\n searchId,\n } = props;\n const { isFetchingMatrices } = useContext(MatrixContext);\n const showPreviousButton = activeTabKey === 'customize';\n const showNextButton = activeTabKey !== 'all' && activeStepIndex <= totalTrips - 2;\n const nextTripId = activeTripId + 1;\n const notLastTrip = activeStepIndex !== totalTrips - 1;\n const notFirstTrip = activeStepIndex !== 0;\n const nextStepIndex = activeStepIndex + 1;\n const previousStepIndex = activeStepIndex - 1;\n const windowSizeForMobileView = 991;\n\n return (\n \n {steps.map((step, index) => (\n
\n {footer && (\n {footer}
\n \n {windowWidth > windowSizeForMobileView ? (\n \n \n {activeTabKey === 'all'\n ? I18n.t('components.ibe.results.step_title_for_package', {\n step_index: nextStepIndex,\n })\n : I18n.t('components.ibe.results.step_title', {\n step_index: nextStepIndex,\n trip_id: activeTripId,\n })}\n \n \n {I18n.t('components.ibe.results.total_price')}\n \n \n \n {allResultLink}\n {showPreviousButton && (\n notFirstTrip && setActiveStepIndex(previousStepIndex)}\n />\n )}\n {/* As \"all\" tab only 2 steps (incl. \"Continue to Cart\"), so there is no need to render next button */}\n {/* steps.length = totalTrips + 1, and we want to hide the next button and show the \"continue to cart\" button in the last trip */}\n {showNextButton ? (\n notLastTrip && setActiveStepIndex(nextStepIndex)}\n />\n ) : (\n continueToCartButton\n )}\n
\n ) : (\n \n \n \n {activeTabKey === 'all'\n ? I18n.t('components.ibe.results.step_title_for_package', {\n step_index: nextStepIndex,\n })\n : I18n.t('components.ibe.results.step_title', {\n step_index: nextStepIndex,\n trip_id: activeTripId,\n })}\n \n
\n \n
\n \n \n {' '}\n
\n \n \n )}\n \n );\n};\n\nStepperControllerBar.defaultProps = {\n withStyles: true,\n};\n\nStepperControllerBar.propTypes = {\n setActiveStepIndex: PropTypes.func.isRequired,\n allResultLink: PropTypes.node.isRequired,\n activeTabKey: PropTypes.string.isRequired,\n price: PropTypes.oneOfType([PropTypes.string, PropTypes.string]).isRequired,\n currency: PropTypes.string.isRequired,\n totalTrips: PropTypes.number.isRequired,\n activeStepIndex: PropTypes.number.isRequired,\n activeTripId: PropTypes.number.isRequired,\n continueToCartButton: PropTypes.node.isRequired,\n withStyles: PropTypes.bool,\n windowWidth: PropTypes.number.isRequired,\n searchId: PropTypes.string.isRequired,\n};\n\nexport default StepperControllerBar;\n","/* eslint-disable react/require-default-props */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\n\nimport { fetchAirlineInformations } from '../../actions/flight';\n\nclass AirlineLogo extends React.Component {\n componentDidMount() {\n if (!this.props.airlineInformations[this.props.carrierCode]) {\n this.props.fetchAirlineInformations(this.props.carrierCode);\n }\n }\n\n render() {\n const carrier = this.props.airlineInformations[this.props.carrierCode];\n const logo = carrier && carrier.logo;\n if (logo) {\n return (\n \n \n {' '}\n
\n Total price
\n \n \n
\n );\n }\n return null;\n }\n}\n\nAirlineLogo.propTypes = {\n airlineInformations: PropTypes.objectOf(\n PropTypes.shape({\n name: PropTypes.string,\n code: PropTypes.string.isRequired,\n logo: PropTypes.string.isRequired,\n }),\n ),\n carrierCode: PropTypes.string.isRequired,\n fetchAirlineInformations: PropTypes.func.isRequired,\n className: PropTypes.string,\n};\n\n// eslint-disable-next-line no-unused-vars\nconst mapStateToProps = (state, ownProps) => ({\n airlineInformations: state.flights.airlineInformations,\n});\nconst mapDispatchToProps = dispatch => ({\n fetchAirlineInformations: code => dispatch(fetchAirlineInformations(code)),\n});\n\nexport default connect(mapStateToProps, mapDispatchToProps)(AirlineLogo);\n","import React, { Fragment, useContext } from 'react';\nimport PropTypes from 'prop-types';\nimport { Link, EmphasisTag } from '@wtag/react-comp-lib';\nimport { Text } from '@wtag/rcl-typography';\nimport Icon from '@wtag/rcl-icon';\nimport withQueryParamsProvider from 'sharedWebpack/withQueryParamsProvider';\nimport TripSegmentSidePanel from 'sharedWebpack/IBE/SearchDetails/flight/TripSegmentSidePanel';\nimport { StringParam, useQueryParams, withDefault } from 'use-query-params';\nimport MatrixContext from '../contexts/MatrixContext';\n\nconst SegmentsInformation = ({\n group,\n airlineInformation,\n airports,\n fetchAirlineInformation,\n fetchAirportDetails,\n}) => {\n const { aircraftInformation, fetchAircraftType } = useContext(MatrixContext);\n const findAirport = airportCode =>\n (airports && Object.values(airports).find(airport => airport.code === airportCode)) ||\n fetchAirportDetails(airportCode);\n const findAirline = airlineCode =>\n (airlineInformation &&\n Object.values(airlineInformation).find(airline => airline.code === airlineCode)) ||\n fetchAirlineInformation(airlineCode);\n const [query, setQuery] = useQueryParams({\n openedSidePanel: withDefault(StringParam, ''),\n });\n const sidePanelKeyFromQuery = `segment-${group.id}`;\n const segmentSidePanelVisible = query.openedSidePanel === sidePanelKeyFromQuery;\n\n const showSegmentSidePanel = () => {\n setQuery({ openedSidePanel: `segment-${group.id}` }, 'replaceIn');\n };\n\n const hideSidePanel = () => {\n setQuery({ openedSidePanel: '' }, 'replaceIn');\n };\n\n return (\n \n {group.marketingAirlineCodes.map(code => (\n \n {code}\n \n }\n size=\"tiny\"\n type=\"neutral\"\n icon={
\n \n {/* Show unique airline logos */}\n {[...new Set(trip.marketingAirlineLogos)].map(logoCode => (\n
\n \n
\n\n {windowWidth < windowSizeForMobileView && (\n \n
\n {windowWidth > windowSizeForMobileView && (\n \n {airports[trip.originCode] ? (\n \n {trip.originCode}\n \n
\n \n \n \n
\n \n \n {humanReadableDuration(trip.tripDurationInMinutes)}\n \n {trip.stopovers.length > 0 ? (\n \n \n {transitGapCount}\n \n \n ) : (\n \n {transitGapCount}\n \n )}\n
\n )}\n \n
\n \n
\n \n {airports[trip.destinationCode] ? (\n \n {trip.destinationCode}\n \n
\n \n \n \n
\n \n \n {humanReadableDuration(trip.tripDurationInMinutes)}\n \n {trip.stopovers.length > 0 ? (\n setShowStopovers(true)}\n size=\"tiny\"\n modifier=\"tertiary\"\n className=\"matrix-accordion-mobile__stopover-link\"\n >\n \n {transitGapCount}\n \n \n ) : (\n \n {transitGapCount}\n \n )}\n
\n )}\n\n \n
\n - \n {trips.map((trip, index) => (\n
\n
\n );\n};\n\nMatrixTabs.defaultProps = {\n items: [],\n onChange: () => {},\n};\n\nMatrixTabs.propTypes = {\n items: PropTypes.arrayOf(\n PropTypes.shape({\n key: PropTypes.string,\n title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n disabled: PropTypes.bool,\n content: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n disablityNote: PropTypes.shape({\n title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n body: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n }),\n }),\n ),\n activeTabKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n onChange: PropTypes.func,\n laymanMode: PropTypes.bool.isRequired,\n};\n\nexport default MatrixTabs;\n","import React, { useEffect, useContext } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport MatrixContext from '../../contexts/MatrixContext';\nimport './matrix-card.styles.scss';\n\nconst MatrixCard = props => {\n const {\n width,\n children,\n className,\n onClick,\n isSelected,\n isCheapest,\n isClickable,\n matrixId,\n } = props;\n const {\n relatedTripsHashMap,\n activeTripId,\n activeTrip,\n activeTabKey,\n setRelatedTripsHashMap,\n setTemporarySelectedTrips,\n setTtripsWithSelectedFareBrand,\n laymanMode,\n autoSelectionMode,\n setAutoSelectionMode,\n } = useContext(MatrixContext);\n\n const resetTripIdsForInactiveTabs = prevTrips => {\n const newTrips = { ...prevTrips };\n\n Object.keys(newTrips).forEach(key => {\n if (key !== activeTabKey) {\n newTrips[key] = [];\n }\n });\n\n return newTrips;\n };\n\n // this function will be invoked when an option gets selected in a trip\n // Will set the trip id as firstSelectedTripId of all the related trips if there is no value has set in firstSelectedTripId\n // It's for tracking which trips is selected first among a group of related trips (semi)\n const setFirstSelectedTripId = selectedTripId => {\n setRelatedTripsHashMap(prevMap => {\n const newMap = { ...prevMap };\n\n if (!newMap[activeTrip.id].firstSelectedTripId) {\n newMap[activeTrip.id].firstSelectedTripId = selectedTripId;\n\n newMap[activeTrip.id].relatedTrips.forEach(tripId => {\n newMap[tripId].firstSelectedTripId = selectedTripId;\n });\n }\n\n return newMap;\n });\n };\n\n const resetSelectionInRelatedTripsHashMap = () => {\n setRelatedTripsHashMap(prevMap => {\n const newMap = { ...prevMap };\n\n Object.keys(newMap).forEach(tripId => {\n newMap[tripId].firstSelectedTripId = undefined;\n });\n\n return newMap;\n });\n };\n\n const selectFareOption = () => {\n onClick();\n setTemporarySelectedTrips(resetTripIdsForInactiveTabs);\n setTtripsWithSelectedFareBrand(resetTripIdsForInactiveTabs);\n\n if (activeTabKey === 'all') {\n resetSelectionInRelatedTripsHashMap();\n } else {\n setFirstSelectedTripId(activeTrip.id);\n }\n };\n\n const onClickHandler = () => {\n if (isClickable && !isSelected) {\n selectFareOption();\n // As user clicked a result of his/her choice\n // we are disabling the autoSelectionMode\n setAutoSelectionMode(false);\n }\n };\n\n useEffect(() => {\n if (\n matrixId === activeTrip.matrixId &&\n isClickable &&\n activeTrip.hasOneFareBrandOption &&\n autoSelectionMode\n ) {\n selectFareOption();\n }\n }, [\n isClickable,\n activeTabKey,\n activeTripId,\n activeTrip.hasOneFareBrandOption,\n activeTrip.matrixId,\n activeTrip.fareBrands,\n ]);\n\n useEffect(() => {\n if (\n matrixId === activeTrip.matrixId &&\n isClickable &&\n laymanMode &&\n isCheapest &&\n autoSelectionMode\n ) {\n selectFareOption();\n }\n }, [\n isClickable,\n isCheapest,\n activeTabKey,\n activeTripId,\n activeTrip.matrixId,\n activeTrip.fareBrands,\n ]);\n\n useEffect(() => {\n // If firstSelectedTripId of all the related trips is set to trip 1 but somehow the api gets failed to select the trip as active\n // Then to keep sync with the api response, firstSelectedTripId of all the related trips will be set to undefined forcefully\n if (relatedTripsHashMap.firstSelectedTripId === activeTrip.id && !isSelected) {\n setFirstSelectedTripId(undefined);\n }\n }, [isSelected]);\n\n return (\n \n {items.map(item => {\n const isActiveTab = activeTabKey === item.key && !item.disabled;\n\n return item.disabled ? (\n \n \n {item.disablityNote.title}\n \n \n {item.disablityNote.body}\n \n \n }\n position={window.innerWidth > windowSizeForMobileView ? 'bottom' : 'bottom-left'}\n type=\"inverse\"\n >\n {\n onChange(item.key);\n }}\n type={isActiveTab ? 'secondary' : 'default'}\n />\n \n ) : (\n {\n onChange(item.key);\n }}\n type={isActiveTab ? 'secondary' : 'default'}\n />\n );\n })}\n
\n {activeItem ? activeItem.content : null}
\n \n
\n \n ) : (\n \n \n
\n \n event && handleChildElementClick(event)}\n laymanMode={laymanMode}\n />\n
\n \n \n {I18n.t('components.ibe.results.fair_info_unavailable')}\n \n
\n )}\n \n );\n};\n\nMatrixDataCard.defaultProps = {\n price: '0.00',\n currency: 'USD',\n isSelected: false,\n};\n\nMatrixDataCard.propTypes = {\n price: PropTypes.string,\n currency: PropTypes.string,\n isSelected: PropTypes.bool,\n matrixId: PropTypes.string.isRequired,\n channelId: PropTypes.string.isRequired,\n data: PropTypes.shape({\n availableSeatCount: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(null)])\n .isRequired,\n resultId: PropTypes.string.isRequired,\n grossTaxes: PropTypes.string.isRequired,\n grossAmount: PropTypes.string.isRequired,\n fareCalculations: PropTypes.shape({\n find: PropTypes.func,\n }),\n marginBreakdown: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.number,\n amount: PropTypes.string,\n currency: PropTypes.string,\n fixed_amount: PropTypes.string,\n name: PropTypes.string,\n taxes: PropTypes.string,\n total: PropTypes.string,\n }),\n ),\n }).isRequired,\n onClick: PropTypes.func.isRequired,\n people: PropTypes.shape({\n adults: PropTypes.arrayOf(PropTypes.shape({})),\n children: PropTypes.arrayOf(PropTypes.shape({})),\n infants: PropTypes.arrayOf(PropTypes.shape({})),\n }).isRequired,\n};\n\nexport default MatrixDataCard;\n","import React, { useContext } from 'react';\nimport PropTypes from 'prop-types';\nimport { Text } from '@wtag/rcl-typography';\nimport InstantTicketWrapper from 'sharedWebpack/InstantTicketWrapper';\nimport FlexiblePaymentTag from 'sharedWebpack/FlexiblePaymentTag';\nimport MatrixCard from '../MatrixCard';\nimport MatrixContext from '../../contexts/MatrixContext';\nimport './matrix-supplier-card.styles.scss';\nimport { WELLTRAVEL } from '../../../../lib/helpers/welltravel_channel';\n\nconst MatrixSupplierCard = props => {\n const { channelName, channelIdentifier, instantTicketSupported, payLaterSupported } = props;\n const { matrixRowHeaderCardWidth, suppliers } = useContext(MatrixContext);\n const showChannelName = channelName !== WELLTRAVEL;\n const SupplierLogo = suppliers[channelName].logo;\n const {\n supportManageBooking,\n supportNdcBooking,\n supportCreateQuote,\n supportFlexibleCancelation,\n supportIssueTicket,\n supportVoidTicket,\n supportRefundTicket,\n supportChangeBooking,\n supportAncillaryServices,\n supportFlightBooking,\n } = suppliers[channelName];\n\n return (\n \n
\n {showChannelName && (\n \n {instantTicketSupported &&
\n - \n {supportManageBooking && (\n
- \n \n \n \n
\n {I18n.t('components.ibe.results.supplier_features.manage_booking')}\n \n \n )}\n {supportNdcBooking && (\n - \n \n \n \n
\n {I18n.t('components.ibe.results.supplier_features.ndc_booking')}\n \n \n )}\n {supportCreateQuote && (\n - \n \n \n \n
\n {I18n.t('components.ibe.results.supplier_features.create_quote')}\n \n \n )}\n {supportFlexibleCancelation && (\n - \n \n \n \n
\n {I18n.t('components.ibe.results.supplier_features.flexible_cancellation')}\n \n \n )}\n {supportIssueTicket && (\n - \n \n \n \n
\n {I18n.t('components.ibe.results.supplier_features.issue_ticket')}\n \n \n )}\n {supportVoidTicket && (\n - \n \n \n \n
\n {I18n.t('components.ibe.results.supplier_features.void_ticket')}\n \n \n )}\n {supportRefundTicket && (\n - \n \n \n \n
\n {I18n.t('components.ibe.results.supplier_features.refund_ticket')}\n \n \n )}\n {supportChangeBooking && (\n - \n \n \n \n
\n {I18n.t('components.ibe.results.supplier_features.change_booking')}\n \n \n )}\n {supportFlightBooking && (\n - \n \n \n \n
\n {I18n.t('components.ibe.results.supplier_features.flight_booking')}\n \n \n )}\n {supportAncillaryServices && (\n - \n \n \n \n
\n {I18n.t('components.ibe.results.supplier_features.ancillary_services')}\n \n \n )}\n
\n \n {filteredFareBrands.map(fareBrand => (\n
\n ) : null;\n};\n\nMatrixChannelContentRow.propTypes = {\n channel: PropTypes.shape({\n name: PropTypes.string.isRequired,\n identifier: PropTypes.string.isRequired,\n hasSelectedFareOption: PropTypes.bool.isRequired,\n supportInstantTicket: PropTypes.bool.isRequired,\n supportPayLater: PropTypes.bool.isRequired,\n fareBrands: PropTypes.arrayOf(\n PropTypes.shape({\n price: PropTypes.string.isRequired,\n currency: PropTypes.string.isRequired,\n isSelected: PropTypes.bool.isRequired,\n }),\n ).isRequired,\n }).isRequired,\n selectFareBrandOption: PropTypes.func.isRequired,\n people: PropTypes.shape({\n adults: PropTypes.arrayOf(PropTypes.shape({})),\n children: PropTypes.arrayOf(PropTypes.shape({})),\n infants: PropTypes.arrayOf(PropTypes.shape({})),\n }).isRequired,\n};\n\nexport default MatrixChannelContentRow;\n","import React, { useContext } from 'react';\nimport PropTypes from 'prop-types';\nimport { Text } from '@wtag/rcl-typography';\nimport { I18nText } from '@wtag/react-comp-lib';\nimport MatrixCard from '../MatrixCard';\nimport MatrixContext from '../../contexts/MatrixContext';\nimport './matrix-legend-card.styles.scss';\n\nconst legends = [\n {\n color: 'success',\n description: (\n - \n {legends.map(legend => (\n
\n
\n );\n }\n\n return (\n \n
\n \n \n {I18n.t('components.ibe.fare_basis_info.failed.header')}\n \n \n {I18n.t('components.ibe.fare_basis_info.failed.subheader')}\n \n
\n \n \n {I18n.t('components.ibe.flight.fare_rules')}\n \n
\n \n
\n \n }\n >\n {Object.keys(resultIds).map(id => (\n \n
\n )}\n \n \n \n {name}\n \n \n
\n \n ) : (\n \n event && handleChildElementClick(event)}\n />\n
\n - \n {/* Bag Facility */}\n {baggageFacility !== NoInfoFound && (\n
\n
\n );\n};\n\nMatrixFareBrandsContentRow.propTypes = {\n fareBrands: PropTypes.arrayOf(\n PropTypes.shape({\n name: PropTypes.string.isRequired,\n fareBrandFacilities: PropTypes.shape({}).isRequired,\n }),\n ).isRequired,\n selectFareBrandOption: PropTypes.func.isRequired,\n windowWidth: PropTypes.number.isRequired,\n people: PropTypes.shape({\n adults: PropTypes.arrayOf(PropTypes.shape({})),\n children: PropTypes.arrayOf(PropTypes.shape({})),\n infants: PropTypes.arrayOf(PropTypes.shape({})),\n }).isRequired,\n};\n\nexport default MatrixFareBrandsContentRow;\n","import React, { Fragment, useContext } from 'react';\nimport PropTypes from 'prop-types';\nimport MatrixChannelContentRow from './MatrixChannelContentRow';\nimport MatrixFareBrandsContentRow from './MatrixFareBrandsContentRow';\nimport MatrixContext from '../contexts/MatrixContext';\nimport './matrix-content.styles.scss';\n\nconst MatrixContent = props => {\n const { selectFareBrandOption, windowWidth, people } = props;\n\n const { activeTrip, laymanMode } = useContext(MatrixContext);\n return (\n \n {!(scrollSliderToLeftBy <= 0 && scrollSliderToLeftBy >= maxSliderScrollLength) && (\n setScrollSliderToLeftBy(scrollSliderToLeftBy - matrixDataCardWidth)}\n disabled={scrollSliderToLeftBy <= 0}\n label={\n {fareBrands.map(fareBrand => (\n setScrollSliderToLeftBy(scrollSliderToLeftBy + matrixDataCardWidth)}\n disabled={scrollSliderToLeftBy >= maxSliderScrollLength}\n label={
\n \n {activeTrip && (\n \n \n )}\n
\n );\n};\n\nMatrixContent.propTypes = {\n selectFareBrandOption: PropTypes.func.isRequired,\n windowWidth: PropTypes.number.isRequired,\n people: PropTypes.shape({\n adults: PropTypes.arrayOf(PropTypes.shape({})),\n children: PropTypes.arrayOf(PropTypes.shape({})),\n infants: PropTypes.arrayOf(PropTypes.shape({})),\n }).isRequired,\n};\n\nexport default MatrixContent;\n","import React, { Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport CircularProgress from 'material-ui/CircularProgress';\nimport NavigationCheck from 'material-ui/svg-icons/navigation/check';\nimport Card from '@wtag/rcl-card';\n\nconst Progress = props => {\n let spinner = \n
\n {spinner}
\n \n
\n \n {props.title}\n
\n {props.children}
\n {content}
;\n};\n\nProgress.defaultProps = {\n completed: false,\n withCard: true,\n};\n\nProgress.propTypes = {\n title: PropTypes.node.isRequired,\n children: PropTypes.node.isRequired,\n completed: PropTypes.bool,\n withCard: PropTypes.bool,\n};\n\nexport default Progress;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Amount from 'sharedWebpack/Amount';\nimport Modal from 'sharedWebpack/Modal';\nimport Icon from '@wtag/rcl-icon';\nimport Button from '@wtag/rcl-button';\nimport Alert from 'sharedWebpack/Alert';\nimport Progress from '../../components/Progress';\n\nconst ExchangeQuote = props => {\n const fetchingExchangeQuote = () => (\n \n );\n\n const exchangeQuoteFetched = (quote, currentPrice, confirmExchangeQuote) => {\n const noPenaltyPrice = quote.pricing.totalPriceWithoutPenalty.recommendedSellingPrice;\n const penalty = quote.pricing.penalty;\n const withPenaltyPrice = quote.pricing.totalPriceWithPenalty.recommendedSellingPrice;\n\n return (\n \n \n \n
\n
\n );\n };\n\n const fetchingFailed = () => (\n | {I18n.t('components.ibe.exchange_quote.old_price')} | \n\n | \n
|---|---|
| {I18n.t('components.ibe.exchange_quote.price.no_penalty')} | \n\n | \n
| {I18n.t('components.ibe.exchange_quote.price.penalty')} | \n\n | \n
| {I18n.t('components.ibe.exchange_quote.price.with_penalty')} | \n\n | \n
\n \n {I18n.t('components.ibe.exchange_quote.fetching_failed.text')}\n \n
\n );\n\n const confirmingExchangeQuote = () => (\n \n );\n\n const exchangeQuoteConfirmed = () => (\n \n );\n\n const confirmationFailed = () => (\n \n {I18n.t('components.ibe.exchange_quote.title')}\n \n {I18n.t('components.ibe.exchange_quote.intro')}\n \n
\n \n
\n);\n\nexport default LoadingScreen;\n","/* eslint-disable */\nimport AeroCRS from '-!svg-react-loader!./supplierLogos/aeroCRS.svg';\nimport Aerticket from '-!svg-react-loader!./supplierLogos/aerticket.svg';\nimport Amadeus from '-!svg-react-loader!./supplierLogos/amadeus.svg';\nimport AmericanAirlines from '-!svg-react-loader!./supplierLogos/americanAirlines.svg';\nimport Apollo from '-!svg-react-loader!./supplierLogos/apollo.svg';\nimport AutoEurope from '-!svg-react-loader!../car/supplierLogos/autoEurope.svg';\nimport BritishAir from '-!svg-react-loader!./supplierLogos/britishAir.svg';\nimport Duffel from '-!svg-react-loader!./supplierLogos/duffel.svg';\nimport Emirates from '-!svg-react-loader!./supplierLogos/emirates.svg';\nimport FirstCarRental from '-!svg-react-loader!../car/supplierLogos/firstCarRental.svg';;\nimport FlySafari from '-!svg-react-loader!./supplierLogos/flySafari.svg';\nimport Galileo from '-!svg-react-loader!./supplierLogos/galileo.svg';\nimport Lufthansa from '-!svg-react-loader!./supplierLogos/lufthansa.svg';\nimport Mango from '-!svg-react-loader!./supplierLogos/mango.svg';\nimport Pyton from '-!svg-react-loader!./supplierLogos/pyton.svg';\nimport Sabre from '-!svg-react-loader!./supplierLogos/sabre.svg';\nimport SingapoorAirlines from '-!svg-react-loader!./supplierLogos/singapoorAirlines.svg';\nimport Travelfusion from '-!svg-react-loader!./supplierLogos/travelfusion.svg';\nimport UnitedAirlines from '-!svg-react-loader!./supplierLogos/unitedAirlines.svg';\nimport Welltravel from '-!svg-react-loader!./supplierLogos/welltravel.svg';\nimport Worldspan from '-!svg-react-loader!./supplierLogos/worldspan.svg';\n\nconst suppliers = {\n amadeus: {\n logo: Amadeus,\n supportManageBooking: true,\n supportNdcBooking: false,\n supportCreateQuote: true,\n supportFlexibleCancelation: true,\n supportIssueTicket: true,\n supportVoidTicket: true,\n supportRefundTicket: true,\n supportChangeBooking: true,\n },\n galileo: {\n logo: Galileo,\n supportManageBooking: true,\n supportNdcBooking: false,\n supportCreateQuote: true,\n supportFlexibleCancelation: true,\n supportIssueTicket: true,\n supportVoidTicket: true,\n supportRefundTicket: false,\n supportChangeBooking: false,\n },\n sabre: {\n logo: Sabre,\n supportManageBooking: true,\n supportNdcBooking: false,\n supportCreateQuote: true,\n supportFlexibleCancelation: true,\n supportIssueTicket: true,\n supportVoidTicket: true,\n supportRefundTicket: false,\n supportChangeBooking: false,\n },\n lh_group: {\n logo: Lufthansa,\n supportInstantTicket: true,\n supportManageBooking: true,\n supportNdcBooking: true,\n supportCreateQuote: true,\n supportFlexibleCancelation: true,\n supportIssueTicket: false,\n supportVoidTicket: true,\n supportRefundTicket: true,\n supportChangeBooking: true,\n },\n british_airways: {\n logo: BritishAir,\n supportInstantTicket: true,\n supportManageBooking: true,\n supportNdcBooking: true,\n supportCreateQuote: true,\n supportFlexibleCancelation: true,\n supportIssueTicket: false,\n supportVoidTicket: true,\n supportRefundTicket: true,\n supportChangeBooking: true,\n },\n american_airlines: {\n logo: AmericanAirlines,\n supportManageBooking: true,\n supportNdcBooking: true,\n supportCreateQuote: true,\n supportFlexibleCancelation: true,\n supportIssueTicket: false,\n supportVoidTicket: true,\n supportRefundTicket: true,\n supportChangeBooking: true,\n },\n pyton: {\n logo: Pyton,\n supportInstantTicket: true,\n supportManageBooking: false,\n supportNdcBooking: false,\n supportCreateQuote: false,\n supportFlexibleCancelation: false,\n supportIssueTicket: false,\n supportVoidTicket: false,\n supportRefundTicket: false,\n supportChangeBooking: false,\n },\n aero_crs: {\n logo: AeroCRS,\n supportInstantTicket: true,\n supportManageBooking: true,\n supportNdcBooking: false,\n supportCreateQuote: false,\n supportFlexibleCancelation: true,\n supportIssueTicket: true,\n supportVoidTicket: false,\n supportRefundTicket: false,\n supportChangeBooking: false,\n },\n singapore_airlines: {\n logo: SingapoorAirlines,\n supportManageBooking: true,\n supportNdcBooking: true,\n supportCreateQuote: true,\n supportFlexibleCancelation: true,\n supportIssueTicket: false,\n supportVoidTicket: true,\n supportRefundTicket: true,\n supportChangeBooking: true,\n },\n fly_safair: {\n logo: FlySafari,\n supportManageBooking: true,\n supportNdcBooking: false,\n supportCreateQuote: true,\n supportFlexibleCancelation: false,\n supportIssueTicket: false,\n supportVoidTicket: false,\n supportRefundTicket: false,\n supportChangeBooking: false,\n },\n mango: {\n logo: Mango,\n supportInstantTicket: true,\n supportManageBooking: true,\n supportNdcBooking: false,\n supportCreateQuote: true,\n supportFlexibleCancelation: true,\n supportIssueTicket: false,\n supportVoidTicket: false,\n supportRefundTicket: false,\n supportChangeBooking: false,\n },\n travelfusion: {\n logo: Travelfusion,\n supportFlexibleCancelation: false,\n supportIssueTicket: false,\n supportVoidTicket: false,\n supportRefundTicket: false,\n supportChangeBooking: false,\n supportInstantTicket: true,\n supportFlightBooking: true,\n supportAncillaryServices: true,\n },\n united_airlines: {\n logo: UnitedAirlines,\n supportManageBooking: true,\n supportNdcBooking: true,\n supportCreateQuote: true,\n supportFlexibleCancelation: true,\n supportIssueTicket: false,\n supportVoidTicket: true,\n supportRefundTicket: true,\n supportChangeBooking: true,\n },\n aer_ticket: {\n logo: Aerticket,\n supportManageBooking: true,\n supportNdcBooking: false,\n supportCreateQuote: true,\n supportFlexibleCancelation: true,\n supportIssueTicket: true,\n supportVoidTicket: true,\n supportRefundTicket: false,\n supportChangeBooking: false,\n },\n duffel: {\n logo: Duffel,\n supportManageBooking: true,\n supportNdcBooking: false,\n supportCreateQuote: true,\n supportFlexibleCancelation: true,\n supportIssueTicket: false,\n supportVoidTicket: false,\n supportRefundTicket: true,\n supportChangeBooking: false,\n },\n emirates: {\n logo: Emirates,\n supportManageBooking: true,\n supportNdcBooking: true,\n supportCreateQuote: true,\n supportFlexibleCancelation: true,\n supportIssueTicket: false,\n supportVoidTicket: true,\n supportRefundTicket: true,\n supportChangeBooking: true,\n },\n welltravel: {\n logo: Welltravel,\n supportInstantTicket: true,\n supportCreateQuote: false,\n supportFlexibleCancelation: false,\n supportIssueTicket: false,\n supportVoidTicket: false,\n supportRefundTicket: false,\n supportChangeBooking: false,\n supportAncillaryServices: false,\n supportFlightBooking: true,\n },\n worldspan: {\n logo: Worldspan,\n supportManageBooking: true,\n supportNdcBooking: false,\n supportCreateQuote: true,\n supportFlexibleCancelation: true,\n supportIssueTicket: true,\n supportVoidTicket: true,\n supportRefundTicket: true,\n supportChangeBooking: false,\n },\n apollo: {\n logo: Apollo,\n supportManageBooking: true,\n supportNdcBooking: false,\n supportCreateQuote: true,\n supportFlexibleCancelation: true,\n supportIssueTicket: true,\n supportVoidTicket: true,\n supportRefundTicket: true,\n supportChangeBooking: false,\n },\n first_car_rental: {\n logo: FirstCarRental,\n },\n auto_europe: {\n logo: AutoEurope,\n },\n};\n\nexport default suppliers;\n","import React, { Fragment, useEffect, useMemo, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { Header } from '@wtag/rcl-typography';\nimport Button from '@wtag/rcl-button';\nimport IconButton from '@wtag/rcl-icon-button';\nimport Icon from '@wtag/rcl-icon';\nimport Popover from '@wtag/rcl-popover';\nimport Card from '@wtag/rcl-card';\nimport { Link } from 'react-router-dom';\nimport useWindowWidth from 'sharedWebpack/useWindowWidth';\nimport searchURL from '../../../IBE/lib/helpers/searchURL';\nimport { parseQueryString } from '../../helpers/qsMethods';\nimport MatrixStepper from './MatrixStepper';\nimport StepperControlBar from './StepperControlBar';\nimport MatrixAccordion from './MatrixAccordion';\nimport MatrixTabs from './MatrixTabs';\nimport MatrixContent from './MatrixContent';\nimport MatrixContext from './contexts/MatrixContext';\nimport ExchangeQuote from './ExchangeQuote';\nimport RefreshBooking from '../../../../admin/Orders/Show/ItemsTab/RefreshBooking';\nimport OutOfPolicyJustificationModal from '../../SearchResult/OutOfPolicyJustificationModal';\nimport { TYPE_ADULT } from '../../../../shared/helpers/passengerTypes';\nimport './style.scss';\nimport {\n STEP_CHOOSE_NEXT_RESULT,\n READY_FOR_CART,\n STEP_GO_TO_CART,\n STEP_SHOW_EXCHANGE_QUOTE,\n} from '../../actions/flight';\nimport history from '../../lib/history';\nimport LoadingScreen from './LoadingScreen';\nimport suppliers from './suppliers';\nimport { mapMealAvailbility, mapWifiAvailbility, mapFareBrands } from './matrixHelpers';\n\nconst Matrix = ({\n location,\n currency,\n match,\n matrixesByType,\n selectedResults,\n fetchMatrixes,\n fetchSearchParams,\n selectResult,\n addSelectedFlightsToCart,\n airports,\n airlineInformations,\n laymanMode,\n exchangeQuote,\n exchange,\n exchangeQuoteStatus,\n totalTravelerCount,\n fetchExchangeQuote,\n confirmExchangeQuote,\n fetchAirportDetails,\n fetchAirlineInformations,\n fetchingFlightMatrices,\n isFetchingMatrices,\n aircraftInformation,\n fetchAircraftType,\n // the tabKeyWithSelectedFareOption prop holds the tabKey for fare option that was selected at the very last moment\n // before moving to cart page or search result page\n tabKeyWithSelectedFareOption,\n people,\n}) => {\n const { searchId } = match.params;\n const [isFareBrandSelected, setIsFareBrandSelected] = useState(false);\n const [tripLocations, setTripLocations] = useState([]);\n const [individualTrips, setIndividualTrips] = useState('');\n const [showTrips, setShowTrips] = useState(false);\n const [trips, setTrips] = useState([]);\n const [isPopoverVisible, setIsPopoverVisible] = useState(false);\n\n const [relatedTripsHashMap, setRelatedTripsHashMap] = useState(null);\n const [activeTripId, setActiveTripId] = useState(0);\n const [activeTrip, setActiveTrip] = useState(null);\n const [activeTabKey, setActiveTabKey] = useState('');\n const [maxSliderScrollLength, setMaxSliderScrollLength] = useState(0);\n const [scrollSliderToLeftBy, setScrollSliderToLeftBy] = useState(0);\n\n // This state will hold the ids of trips that have selected fare brand options\n // But it won't decide which trip will show the green tick mark\n // Visibility of the green tick mark will be decided on tripsWithSelectedFareBrand state\n const [temporarySelectedTrips, setTemporarySelectedTrips] = useState({\n all: [],\n customize: [],\n });\n const [tripsWithSelectedFareBrand, setTtripsWithSelectedFareBrand] = useState({\n all: [],\n customize: [],\n });\n const [totalPrice, setTotalPrice] = useState(0);\n const defaultMatrixData = {\n matrixRowHeaderCardWidth: 220,\n matrixDataCardWidth: 280,\n };\n const [canContinueToCart, setCanContinueToCart] = useState(false);\n const [showExchangeQuote, setShowExchangeQuote] = useState(false);\n const [showRefreshBooking, setShowRefreshBooking] = useState(false);\n const [activeStepIndex, setActiveStepIndex] = useState(0);\n // The auto selection of fare brand options will work if this state is true\n const [autoSelectionMode, setAutoSelectionMode] = useState(true);\n const [outOfPolicyItems, setOutOfPolicyItems] = useState({\n all: {},\n customize: {},\n });\n const [policyJustificationModalOpen, setPolicyJustificationModalOpen] = useState(false);\n const [isContinuToCartDisabled, setIsContinuToCartDisabled] = useState(false);\n\n const flightGroupsByTripId = {};\n const flightGroupsInURL = useMemo(() => parseQueryString(location.search).flightGroups, [\n location.search,\n ]);\n const allTripsHaveSelectedFareBrandOption = trips.every(\n trip =>\n tabKeyWithSelectedFareOption &&\n tripsWithSelectedFareBrand[tabKeyWithSelectedFareOption].includes(trip.id),\n );\n const windowSizeForMobileView = 991;\n const steps =\n activeTabKey === 'all'\n ? [\n {\n key: 1,\n title: I18n.t('components.ibe.results.select_an_option'),\n isDone: trips.every(trip => tripsWithSelectedFareBrand[activeTabKey].includes(trip.id)),\n },\n {\n key: 2,\n title: I18n.t('components.ibe.results.continue_to_cart'),\n isDone: false,\n },\n ]\n : [\n ...trips.map(trip => ({\n ...trip,\n key: trip.id,\n title: I18n.t('components.ibe.results.trip_number', { number: trip.id }),\n isDone: tripsWithSelectedFareBrand[activeTabKey].includes(trip.id),\n })),\n {\n key: trips.length + 1,\n title: I18n.t('components.ibe.results.continue_to_cart'),\n isDone: false,\n },\n ];\n\n const legendItems = [\n {\n name: I18n.t('components.ibe.search_result.farebrand_legends.included'),\n category: 'included',\n },\n {\n name: I18n.t('components.ibe.search_result.farebrand_legends.fee_needed'),\n category: 'available',\n },\n {\n name: I18n.t('components.ibe.search_result.farebrand_legends.not_available'),\n category: 'no_available',\n },\n {\n name: I18n.t('components.ibe.search_result.farebrand_legends.no_info'),\n category: 'no_info',\n },\n ];\n\n const windowWidth = useWindowWidth();\n\n useEffect(() => {\n const isSelected =\n activeTrip &&\n activeTrip.fareBrands.length > 0 &&\n activeTrip.fareBrands.some(\n fareBrand => fareBrand.cheapestOption && fareBrand.cheapestOption.isSelected === true,\n );\n setIsFareBrandSelected(isSelected);\n }, [activeTrip]);\n\n if (flightGroupsInURL) {\n flightGroupsInURL.forEach((flightGroup, index) => {\n flightGroupsByTripId[index + 1] = flightGroup;\n });\n }\n\n const confirmExchangeQuoteAndRefresh = () =>\n confirmExchangeQuote().then(success => {\n if (success) setShowRefreshBooking(true);\n });\n\n const doNextStep = nextStep => {\n switch (nextStep.step) {\n case STEP_GO_TO_CART:\n history.push(`/carts/${nextStep.cartId}`);\n break;\n\n case READY_FOR_CART:\n setCanContinueToCart(true);\n break;\n\n case STEP_CHOOSE_NEXT_RESULT:\n setCanContinueToCart(false);\n break;\n\n case STEP_SHOW_EXCHANGE_QUOTE:\n fetchExchangeQuote(exchange.bookingIdentifier, nextStep.resultId);\n setShowExchangeQuote(true);\n break;\n\n default:\n throw new Error(`Unknown nextStep '${nextStep}'`);\n }\n };\n\n const continueToCart = justification => addSelectedFlightsToCart(justification).then(doNextStep);\n\n const selectFareBrandOption = (matrix, result) => {\n // sending activeTabKey for keeping record of the tabKey of last selected fare option\n selectResult(searchId, matrix, result, activeTabKey).then(doNextStep);\n };\n\n const outOfPolicyItemCount =\n outOfPolicyItems[tabKeyWithSelectedFareOption] &&\n Object.keys(outOfPolicyItems[tabKeyWithSelectedFareOption]).length;\n\n const handleContinueButtonClick = async () => {\n setIsContinuToCartDisabled(true);\n if (!outOfPolicyItemCount && allTripsHaveSelectedFareBrandOption && canContinueToCart) {\n await continueToCart(null);\n } else {\n await setPolicyJustificationModalOpen(true);\n }\n setIsContinuToCartDisabled(false);\n };\n\n const matrixAccordion = (\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n ),\n },\n {\n key: 'customize',\n title: I18n.t('components.ibe.results.trip_individually'),\n disabled: !customizeTripsAvailable,\n disablityNote: {\n title: I18n.t('components.ibe.results.individual_trips_disability_note.title'),\n body: I18n.t('components.ibe.results.individual_trips_disability_note.body'),\n },\n content: (\n {matrixesByType && matrixAccordion}
\n \n
\n \n {matrixesByType && (\n
\n \n
\n )}\n {!laymanMode && (\n {stepperController({ withStyles: true })}
\n )}\n \n
\n ),\n },\n ];\n\n useEffect(() => {\n const originCodes = trips.map(trip => trip.originCode);\n const destinationCodes = trips.map(trip => trip.destinationCode);\n\n const mergedArray = originCodes.concat(destinationCodes);\n\n const uniqueLocations = mergedArray.filter((item, i, ar) => ar.indexOf(item) === i);\n\n setTripLocations(uniqueLocations);\n\n if (activeTripId !== 0) {\n const selectedTrip = trips.find(trip => trip.id === activeTripId);\n\n const selectedTripTitle = `Trip ${activeTripId}: ${selectedTrip.originCode} - ${selectedTrip.destinationCode}`;\n\n setIndividualTrips(selectedTripTitle);\n }\n }, [trips, activeTripId]);\n\n const sliderScrollHandler = newScrollOffset => {\n if (newScrollOffset > maxSliderScrollLength) {\n setScrollSliderToLeftBy(maxSliderScrollLength);\n } else if (newScrollOffset < 0) {\n setScrollSliderToLeftBy(0);\n } else {\n setScrollSliderToLeftBy(newScrollOffset);\n }\n };\n\n const handleTrip = () => {\n setShowTrips(!showTrips);\n };\n\n useEffect(() => {\n if (activeTrip) {\n setActiveTripId(activeTrip.id);\n }\n }, [activeTrip]);\n\n useEffect(() => {\n // Don't remove this api call as it's needed\n // for filling up the redux state state.flights.searchParamsBySearchId\n // otherwise continue to cart button won't be enabled\n fetchSearchParams(searchId);\n }, [searchId]);\n\n useEffect(() => {\n // Here we're calculating the amount of selected results for all the trips\n // If the totalSelectedResults is equal to total trips\n // it means every trips have a selected fare option\n const totalSelectedResults =\n Object.keys(selectedResults).length > 0\n ? Object.values(selectedResults).reduce((accumulator, result) => ({\n packageSize: accumulator.packageSize + result.packageSize,\n })).packageSize\n : 0;\n\n if (totalSelectedResults === trips.length) {\n // and If the totalSelectedResults is equal to total trips\n // we can create the cart\n setCanContinueToCart(true);\n }\n\n // here we are not using selectedResults as the dependency as we don't need to set canContinueToCart to true from here\n // Cause it'll be done by doNextStep() function\n // This useEffect is only for the first time mounting of Matrix component\n // If a user go to any page from the matrix page, then this useEffect checks if the user selected fare options\n // for all trips before leaving the page or not\n // As trips is an empty array during mounting, we used trip as dependency to do a proper checking\n }, [trips]);\n\n useEffect(() => {\n if (!isFetchingMatrices) {\n fetchMatrixes(\n searchId,\n flightGroupsByTripId,\n Object.values(selectedResults).map(result => result.resultId),\n );\n }\n }, []);\n\n useEffect(() => {\n const selectedResultIds = Object.values(selectedResults).filter(result => !!result.resultId);\n\n if (selectedResultIds.length > 0) {\n fetchMatrixes(\n searchId,\n flightGroupsByTripId,\n Object.values(selectedResults).map(result => result.resultId),\n );\n }\n }, [searchId, JSON.stringify(flightGroupsByTripId), JSON.stringify(selectedResults)]);\n\n useEffect(() => {\n if (matrixesByType && !activeTabKey) {\n const firstEnabledTab = tabs.find(item => !item.disabled);\n\n // Checking if there is any tab registered in the redux which is the tab of last selected fare option\n // and the tab is not disabled\n // if so then set that tab as active tab\n // It indicates user has selected one or more fare options and went back to the search result page\n // or to the cart page without any reloading the browser\n if (\n tabKeyWithSelectedFareOption &&\n tabs.find(tab => tab.key === tabKeyWithSelectedFareOption && !tab.disabled)\n ) {\n setActiveTabKey(tabKeyWithSelectedFareOption);\n } else if (firstEnabledTab) {\n // otherwise set first enabled tab as active tab\n setActiveTabKey(firstEnabledTab.key);\n }\n }\n }, [matrixesByType, activeTabKey, tabKeyWithSelectedFareOption]);\n\n useEffect(() => {\n // if the tabKeyWithSelectedFareOption has a valid value and temporarySelectedTrips has also some selected trips\n // and tripsWithSelectedFareBrand has no selected trips\n // It indicates user has selected one or more fare options and went back to the search result page\n // or to the cart page without any reloading the browser\n // then copy temporarySelectedTrips to tripsWithSelectedFareBrand\n // so that user can see his previously fair options and trips as selected without\n // opening individual trip accordion item\n if (\n tabKeyWithSelectedFareOption &&\n Object.values(temporarySelectedTrips).some(value => value.length > 0) &&\n Object.values(tripsWithSelectedFareBrand).every(value => value.length <= 0)\n ) {\n setTtripsWithSelectedFareBrand(temporarySelectedTrips);\n }\n }, [tabKeyWithSelectedFareOption, temporarySelectedTrips, tripsWithSelectedFareBrand]);\n\n useEffect(() => {\n if (matrixesByType && matrixesByType[tabKeyWithSelectedFareOption]) {\n let total = 0.0;\n\n matrixesByType[tabKeyWithSelectedFareOption].forEach(trip => {\n const id = trip.id.split(':').join('_');\n\n // Those trips have related Trips that means for 'semi' catagory\n // We only take the price of only the first selected trip among the related trips\n // As all the related trips have the same price and should be counted once\n if (\n relatedTripsHashMap &&\n relatedTripsHashMap[id] &&\n relatedTripsHashMap[id].relatedTrips.length > 0\n ) {\n if (relatedTripsHashMap[id].firstSelectedTripId === parseInt(id, 10)) {\n total += parseFloat(trip.headers.selectedTotalPrice.totalPrice || 0);\n }\n } else {\n // Those trips don't have any related trips that means for 'unpackaged' or 'packaged' catagory\n // We will take the price of every trips\n total += parseFloat(trip.headers.selectedTotalPrice.totalPrice || 0);\n }\n });\n\n setTotalPrice(total);\n }\n }, [matrixesByType, tripsWithSelectedFareBrand, tabKeyWithSelectedFareOption]);\n\n useEffect(() => {\n if (matrixesByType && matrixesByType[activeTabKey]) {\n const newTrips = [];\n const selectedTripIds = new Set();\n\n let maxGrossTaxes = 0;\n let minGrossTaxes = Infinity;\n\n matrixesByType[activeTabKey].forEach(matrix => {\n const tripIds = matrix.id.split(':');\n const fareBrands = [];\n let totalFareOptions = 0;\n const channels = matrix.content.map(channel => {\n const [name, identifier] = channel.channel.split(':');\n const channelInfo = {\n name,\n identifier,\n supportInstantTicket: channel.channelInformations.instantTicketSupported,\n supportPayLater: channel.channelInformations.payLaterSupported,\n hasSelectedFareOption: channel.options.some(option => option && option.isSelected),\n fareBrands: channel.options.map((option, index) => {\n maxGrossTaxes =\n option && option.data.grossTaxes > maxGrossTaxes\n ? option.data.grossTaxes\n : maxGrossTaxes;\n minGrossTaxes =\n option && option.data.grossTaxes < minGrossTaxes\n ? option.data.grossTaxes\n : minGrossTaxes;\n // Collecting fare brands in an array\n if (!fareBrands[index] && option) {\n fareBrands[index] = {\n matrixId: matrix.id,\n name:\n option.data.fareBrand === 'none'\n ? I18n.t('components.ibe.results.unknown_fare_brand')\n : option.data.fareBrand,\n fareBrandFacilities: {\n ...option.data.fareBrandFacilities,\n meal: mapMealAvailbility(option.data.meal),\n wifi: mapWifiAvailbility(option.data.wifi),\n },\n fareCalculations: option.data.fareCalculations,\n grossTaxes: option.data.grossTaxes || '',\n maxGrossTaxes,\n minGrossTaxes,\n fareRulePresent: false,\n currency: option.data.currencyCode || '',\n hasSelectedFareOption: false,\n bookingClasses: [],\n resultIds: {},\n isCheapestFareBrand: false,\n minPrice: undefined,\n maxPrice: '0.00',\n minPriceCalculatedInClientSide: 'Infinity',\n cheapestOption: null,\n cheapestOptionCalculatedInClientSide: null,\n };\n }\n\n // If an option is selected for a trip, user can't deselect\n // Only can change the option\n if (option && option.isSelected) {\n option.data.tripIds.forEach(tripId => selectedTripIds.add(parseInt(tripId, 10)));\n }\n\n return {\n matrixId: matrix.id,\n data: option ? option.data : {},\n price: option ? option.data.price : '',\n currency: option ? option.data.currencyCode : '',\n isSelected: option ? option.isSelected : false,\n };\n }),\n };\n\n return channelInfo;\n });\n\n // Calculating availability of selected fare options, Min and Max price for fare brands\n matrix.content.forEach(channel => {\n channel.options.forEach((option, index) => {\n if (option && option.isCheapestOption) {\n fareBrands[index].minPrice =\n option.data.fareCalculations &&\n option.data.fareCalculations.find(a => a.passengerType === TYPE_ADULT).price;\n fareBrands[index].cheapestOption = {\n ...option,\n channelId: channel.channel,\n };\n fareBrands[index].fareCalculations = option.data.fareCalculations;\n fareBrands[index].marginBreakdown = option.data.marginBreakdown;\n fareBrands[index].grossTaxes = option.data.grossTaxes;\n fareBrands[index].maxGrossTaxes = maxGrossTaxes;\n fareBrands[index].minGrossTaxes = minGrossTaxes;\n fareBrands[index].cheapestOptionCalculatedInClientSide = {\n ...option,\n channelId: channel.channel,\n };\n } else if (\n option &&\n parseFloat(\n option.data.fareCalculations &&\n option.data.fareCalculations.find(a => a.passengerType === TYPE_ADULT).price,\n ) < parseFloat(fareBrands[index].minPriceCalculatedInClientSide)\n ) {\n fareBrands[index].minPriceCalculatedInClientSide =\n option.data.fareCalculations &&\n option.data.fareCalculations.find(a => a.passengerType === TYPE_ADULT).price;\n fareBrands[index].cheapestOptionCalculatedInClientSide = {\n ...option,\n channelId: channel.channel,\n };\n }\n\n if (\n option &&\n parseFloat(\n option.data.fareCalculations &&\n option.data.fareCalculations.find(a => a.passengerType === TYPE_ADULT).price,\n ) > parseFloat(fareBrands[index].maxPrice)\n ) {\n fareBrands[index].maxPrice =\n option.data.fareCalculations &&\n option.data.fareCalculations.find(a => a.passengerType === TYPE_ADULT).price;\n }\n\n if (option && !fareBrands[index].hasSelectedFareOption && option.isSelected) {\n fareBrands[index].hasSelectedFareOption = true;\n }\n\n if (option) {\n const prevClasses = fareBrands[index].bookingClasses;\n\n fareBrands[index].bookingClasses = [\n ...new Set(...prevClasses, ...option.data.bookingClasses),\n ];\n }\n\n if (option && option.data.resultId) {\n const [channelName, identifier] = channel.channel.split(':');\n\n fareBrands[index].resultIds[option.data.resultId] = {\n channelName,\n identifier,\n };\n }\n\n if (option && option.data.fareRulePresent && !fareBrands[index].fareRulePresent) {\n fareBrands[index].fareRulePresent = option.data.fareRulePresent;\n }\n });\n });\n\n // As from the api side we always receive the cheapest farebrand in the first position\n fareBrands[0].isCheapestFareBrand = true;\n\n // Counting total valid fare otions for auto selection\n channels.forEach(channel =>\n channel.fareBrands.forEach(fareBrand => {\n if (fareBrand.price) {\n totalFareOptions += 1;\n }\n }),\n );\n\n if (matrix.headers.tripsData) {\n matrix.headers.tripsData.forEach((trip, index) => {\n newTrips.push({\n ...trip,\n id: parseInt(tripIds[index], 10),\n matrixId: matrix.id,\n groupId: trip.id,\n fareBrands: mapFareBrands(fareBrands),\n channels,\n hasOneFareBrandOption: totalFareOptions === 1,\n isOutOfPolicy: matrix.headers.labels.outOfPolicy,\n });\n });\n }\n });\n\n setTemporarySelectedTrips(prevState => ({\n ...prevState,\n [activeTabKey]: [...selectedTripIds],\n }));\n setTrips(newTrips);\n }\n }, [matrixesByType, activeTabKey]);\n\n useEffect(() => {\n if (!relatedTripsHashMap && matrixesByType) {\n const newRelatedTripsMap = {};\n\n matrixesByType.availablePackageInformation.forEach(packageInfo => {\n if (packageInfo.style === 'packaged') {\n newRelatedTripsMap[packageInfo.tripIds.join('_')] = {\n firstSelectedTripId: undefined,\n relatedTrips: [],\n };\n } else if (packageInfo.style === 'semi' || packageInfo.style === 'unpackaged') {\n packageInfo.tripIds.forEach(tripId => {\n newRelatedTripsMap[tripId] = {\n firstSelectedTripId: undefined,\n relatedTrips: packageInfo.tripIds.filter(id => id !== tripId),\n };\n });\n }\n });\n\n setRelatedTripsHashMap(newRelatedTripsMap);\n }\n }, [matrixesByType]);\n\n useEffect(() => {\n const newState = { ...outOfPolicyItems };\n\n trips.forEach(trip => {\n if (trip.isOutOfPolicy) {\n newState[activeTabKey][trip.matrixId] = true;\n }\n });\n setOutOfPolicyItems(newState);\n }, [trips]);\n\n useEffect(() => {\n setActiveStepIndex(0);\n setScrollSliderToLeftBy(0);\n }, [activeTabKey]);\n\n useEffect(() => {\n setActiveTrip(trips[activeStepIndex]);\n }, [activeStepIndex, trips]);\n\n useEffect(() => {\n setScrollSliderToLeftBy(0);\n }, [activeTripId]);\n\n return (\n {matrixesByType && matrixAccordion}
\n \n
\n \n {matrixesByType && (\n
\n \n
\n )}\n {!laymanMode && (\n {stepperController({ withStyles: true })}
\n )}\n \n \n {`${I18n.t('components.ibe.results.customise_your_flight')} -\n ${I18n.t('components.ibe.results.select_fare_brand')}`}\n \n
\n {matrixesByType && noSuitablePackageFound && (\n \n \n {I18n.t('components.ibe.results.error_on_combining')}\n \n }\n />\n
\n )}\n {!matrixesByType && (\n \n \n
\n \n
\n )}\n {matrixesByType && !noSuitablePackageFound && (\n \n
\n \n
\n \n \n {`${I18n.t('components.ibe.results.customise_your_flight')} -\n ${I18n.t('components.ibe.results.select_fare_brand')}`}\n \n
\n {matrixesByType && noSuitablePackageFound && (\n \n \n {I18n.t('components.ibe.results.error_on_combining')}\n \n }\n />\n
\n )}\n {!matrixesByType && (\n \n \n
\n \n
\n )}\n {matrixesByType && !noSuitablePackageFound && (\n \n
\n \n
\n \n \n
\n \n \n )}\n\n \n {matrixesByType && noSuitablePackageFound && (\n
\n\n \n
\n )}\n {!matrixesByType && (\n \n
\n )}\n {matrixesByType && !noSuitablePackageFound && (\n \n
\n )}\n \n
\n \n
\n \n \n
\n \n \n {I18n.t('components.flight_seat_map.legends')}\n
\n \n {legendItems.map(legend => (\n \n
\n }\n position=\"bottom-right\"\n type=\"inverse\"\n showArrow={false}\n onOutsideClick={() => setIsPopoverVisible(false)}\n >\n \n {I18n.t('components.flight_seat_map.legends')}\n
\n \n {legendItems.map(legend => (\n
\n \n
\n ))}\n \n \n \n
\n \n
\n {showTrips && (\n \n {tripLocations.map((tripLocation, index) => (\n {index === 0 ? `${tripLocation}` : ` - ${tripLocation}`} \n ))}\n
\n ) : (\n {individualTrips}
\n )}\n \n
\n )}\n \n \n {showTrips\n ? I18n.t('components.ibe.search_result.farebrand_trip_hide')\n : I18n.t('components.ibe.search_result.farebrand_trip_show')}\n \n
\n {matrixesByType && (\n \n {title}\n
\n {isTitleOverflown && (\n\n \n handleOnChangeCode(field, account, code.code, event.target.checked, account.allowance)\n }\n />\n
\n {code.code}
\n {code.organization_name && (\n \n
\n )}\n \n \n this.handleOnChangeAccount(field, account, event.target.checked, true)\n }\n />\n
\n\n \n
\n - {codes}
\n
\n\n \n {channelName(channel)}\n {isChannelSelected(channel, selectedAccounts) && selectedPtc !== null && !ptcSupportedChannels.includes(channel) &&\n \n }\n
\n {SupplierLogo && {accounts}
\n \n \n this.handleOnChangeAccount(field, account, event.target.checked, false)\n }\n />\n
\n \n
\n - {codes}
\n
\n \n
\n\n {SupplierLogo && \n {channelName(channel)}\n {isChannelSelected(channel, selectedAccounts) && selectedPtc !== null && !ptcSupportedChannels.includes(channel) &&\n \n }\n
\n {searchAccounts[channel].ndc && (\n \n
\n )}\n {accounts}
\n {text}
;\n\n return (\n \n {I18n.t('components.ibe.search_form.search_accounts.channels')}\n {allSelectedChanels && (\n
\n \n
\n )}\n \n
\n \n
\n \n {I18n.t('components.ibe.search_form.search_accounts.gds')}\n
\n {gdsChannels.length > 0 && (\n \n
\n \n {I18n.t('components.ibe.search_form.search_accounts.direct_connect')}\n
\n {directChannels.length > 0 && (\n \n
\n \n );\n }\n}\n\nSearchAccounts.defaultProps = {\n selectAll: true,\n selectedAccounts: {},\n itemType: 'select-all',\n exchangeEnabled: false,\n isChannelMissingAlertVisible: false,\n accountSettings: {},\n selectedPtc: null,\n isAnyUnsupportedChannelForPtcSelected: () => false,\n isChannelSelected: () => false,\n ptcSupportedChannels: [],\n};\n\nSearchAccounts.propTypes = {\n exchangeEnabled: PropTypes.bool,\n disabled: PropTypes.bool.isRequired,\n searchAccounts: searchAccountsShape.isRequired,\n selectedAccounts: PropTypes.objectOf(\n PropTypes.shape({\n value: PropTypes.oneOfType([\n PropTypes.arrayOf(\n PropTypes.shape({\n identifier: PropTypes.string.isRequired,\n codes: PropTypes.arrayOf(PropTypes.string).isRequired,\n }),\n ),\n PropTypes.string,\n ]).isRequired,\n onChange: PropTypes.func.isRequired,\n }).isRequired,\n ),\n selectAll: PropTypes.bool,\n selectGds: PropTypes.bool.isRequired,\n selectDirect: PropTypes.bool.isRequired,\n toggleSelectGds: PropTypes.func.isRequired,\n toggleSelectDirect: PropTypes.func.isRequired,\n itemType: PropTypes.string,\n toggleSelectAll: PropTypes.func.isRequired,\n accountSettings: PropTypes.shape(\n PropTypes.shape({\n initial: PropTypes.arrayOf(\n PropTypes.shape({\n identifier: PropTypes.string.isRequired,\n codes: PropTypes.arrayOf(PropTypes.string).isRequired,\n }),\n ),\n value: PropTypes.arrayOf(\n PropTypes.shape({\n identifier: PropTypes.string.isRequired,\n codes: PropTypes.arrayOf(PropTypes.string).isRequired,\n }),\n ),\n _isFieldValue: PropTypes.bool,\n touched: PropTypes.bool,\n }),\n ),\n isChannelMissingAlertVisible: PropTypes.bool,\n selectedPtc: PropTypes.string,\n isAnyUnsupportedChannelForPtcSelected: PropTypes.func,\n isChannelSelected: PropTypes.func,\n ptcSupportedChannels: PropTypes.arrayOf(PropTypes.string),\n};\n\nSearchAccounts.contextTypes = {\n laymanMode: PropTypes.bool.isRequired,\n};\n\nexport default SearchAccounts;\n","const token = () => {\n const tokenElement = document.getElementsByName('csrf-token')[0];\n if (tokenElement) {\n return tokenElement.content;\n }\n return null;\n};\n\nexport default token();\n","/* global I18n */\nimport React, { useState, Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport { I18nText, Spinner, Textarea } from '@wtag/react-comp-lib';\nimport Input from '@wtag/rcl-input';\nimport Button from '@wtag/rcl-button';\nimport Icon from '@wtag/rcl-icon';\nimport httpClient from 'agentHTTPClient';\nimport routes from 'agentRoutes';\nimport authenticityToken from 'sharedWebpack/old/libraries/authenticityToken';\n\nconst OfferEnquiryForm = props => {\n const { dealId, personId, setIsHeaderVisible, onEnquireModalClose } = props;\n const [description, setDescription] = useState(null);\n const [firstName, setFirstName] = useState(null);\n const [lastName, setLastName] = useState(null);\n const [email, setEmail] = useState(null);\n const [isFormVisible, setIsFormVisible] = useState(true);\n const [error, setError] = useState(null);\n const [isLoading, setIsLoading] = useState(false);\n const [touched, setTouched] = useState(false);\n\n let information;\n\n const createEnquiry = async () => {\n setIsFormVisible(false);\n setIsHeaderVisible(false);\n setIsLoading(true);\n\n const enquiryParams = {\n deal_id: dealId,\n first_name: firstName,\n last_name: lastName,\n email,\n body: description,\n person_id: personId,\n };\n\n const { data } = await httpClient.post(routes.public.offerEnquiries(), {\n offer_enquiry: enquiryParams,\n });\n\n setIsLoading(false);\n\n if (data.error) {\n setError(data.error);\n }\n };\n\n const handleSubmit = () => {\n setTouched(!description || !firstName || !lastName || !email);\n\n const isAllDataProvided = personId\n ? description\n : description && firstName && lastName && email;\n\n if (isAllDataProvided) {\n createEnquiry();\n }\n };\n\n if (personId) {\n information = ;\n } else {\n information = (\n \n {gdsChannels.length > 0\n ? gdsChannels\n : emptyCard(I18n.t('components.ibe.search_form.search_accounts.empty_gds'))}\n
\n \n {directChannels.length > 0\n ? directChannels\n : emptyCard(\n I18n.t('components.ibe.search_form.search_accounts.empty_direct_connect'),\n )}\n
\n \n {\n setFirstName(value);\n }}\n type=\"text\"\n label={I18n.t('activerecord.attributes.person.first_name')}\n error={!firstName && I18n.t('public.offer_enquiries.form.blank_title')}\n touched={touched}\n placeholder={I18n.t('simple_form.placeholders.offer_enquiry.first_name')}\n isClearable={true}\n name=\"offer_enquiry[first_name]\"\n id=\"offer_enquiry_first_name\"\n />\n
\n \n {\n setLastName(value);\n }}\n type=\"text\"\n label={I18n.t('activerecord.attributes.person.last_name')}\n error={!lastName && I18n.t('public.offer_enquiries.form.blank_title')}\n touched={touched}\n placeholder={I18n.t('simple_form.placeholders.offer_enquiry.last_name')}\n isClearable={true}\n name=\"offer_enquiry[last_name]\"\n id=\"offer_enquiry_last_name\"\n />\n
\n \n {\n setEmail(value);\n }}\n type=\"text\"\n label={I18n.t('activerecord.attributes.address.email')}\n error={!email && I18n.t('public.offer_enquiries.form.blank_title')}\n touched={touched}\n placeholder={I18n.t('simple_form.placeholders.email_addresses.email')}\n isClearable={true}\n name=\"offer_enquiry[email]\"\n id=\"offer_enquiry_email\"\n />\n
\n \n
\n );\n } else if (error) {\n return (\n \n {isFormVisible ? (\n
\n );\n};\n\nOfferEnquiryForm.defaultProps = {\n personId: null,\n setIsHeaderVisible: () => {},\n onEnquireModalClose: () => {},\n};\n\nOfferEnquiryForm.propTypes = {\n dealId: PropTypes.node.isRequired,\n personId: PropTypes.number,\n setIsHeaderVisible: PropTypes.func,\n onEnquireModalClose: PropTypes.func,\n};\n\nexport default OfferEnquiryForm;\n","import React, { Fragment } from 'react';\nimport { Link } from '@wtag/react-comp-lib';\nimport Icon from '@wtag/rcl-icon';\nimport PropTypes from 'prop-types';\nimport ProductIcon from 'sharedWebpack/ProductIcon';\nimport Amount from 'sharedWebpack/Amount';\n\nconst DealsCard = props => {\n const {\n id,\n currency,\n name,\n amount,\n favourite,\n deleteFromFavourite,\n addToFavourite,\n imageUrl,\n detailsUrl,\n itemTypes,\n currentUserId,\n favouriteCount,\n scope,\n } = props;\n\n return (\n \n \n \n {information}\n
\n ) : (\n \n {\n setDescription(event.target.value);\n }}\n name=\"offer_enquiry[body]\"\n id=\"offer_enquiry_body\"\n />\n\n
\n {baseModalContent()}
\n )}\n \n
\n );\n};\n\nDealsCard.defaultProps = {\n imageUrl: '#',\n fullWidth: false,\n favouriteCount: 0,\n scope: { showFavouriteCount: false },\n};\n\nDealsCard.propTypes = {\n id: PropTypes.number.isRequired,\n name: PropTypes.node.isRequired,\n amount: PropTypes.node.isRequired,\n currency: PropTypes.string.isRequired,\n imageUrl: PropTypes.string,\n favourite: PropTypes.bool.isRequired,\n deleteFromFavourite: PropTypes.func.isRequired,\n addToFavourite: PropTypes.func.isRequired,\n currentUserId: PropTypes.number.isRequired,\n detailsUrl: PropTypes.string.isRequired,\n teaser: PropTypes.string.isRequired,\n itemTypes: PropTypes.arrayOf(PropTypes.string).isRequired,\n fullWidth: PropTypes.bool,\n favouriteCount: PropTypes.number,\n scope: PropTypes.shape({\n showFavouriteCount: PropTypes.bool,\n }),\n};\n\nexport default DealsCard;\n","import React, { useEffect, useState } from 'react';\nimport Card from '@wtag/rcl-card';\nimport httpClient from 'agentHTTPClient';\nimport routes from 'agentRoutes';\nimport ContentLoaderPlaceholder from '@wtag/rcl-content-loader-placeholder';\nimport PropTypes from 'prop-types';\nimport Deal from './DealsCard';\n\nconst TopDeals = ({ showHeader }) => {\n const [topDeals, setTopDeals] = useState([]);\n const [isLoading, setIsLoading] = useState(false);\n\n const fetchTopDeals = async () => {\n setIsLoading(true);\n const { data } = await httpClient.get(routes.public.topDeals());\n setTopDeals(data.deals);\n setIsLoading(false);\n };\n\n const addToFavourite = async id => {\n const { data } = await httpClient.put(routes.api.deals.favourite({ dealId: id }));\n\n if (data.id) {\n fetchTopDeals();\n }\n };\n\n const deleteFromFavourite = async id => {\n const { data } = await httpClient.delete(routes.api.deals.favourite({ dealId: id }));\n\n if (data.id) {\n fetchTopDeals();\n }\n };\n\n useEffect(() => {\n fetchTopDeals();\n }, []);\n\n const dealShowPageUrl = id => {\n const url = routes.public.deal;\n return url({\n id,\n });\n };\n\n return (\n \n 
\n \n
\n \n
\n \n {I18n.t('public.components.dashboard.deals.start_from')}\n
\n \n
\n \n {itemTypes.map(type => (\n
\n \n {currentUserId && (\n \n {favourite ? (\n deleteFromFavourite(id)}\n className=\"deals-card__details-info-deal-icon-link\"\n >\n addToFavourite(id)}\n className=\"deals-card__details-info-deal-icon-link\"\n >\n \n )}\n
\n \n {name}
\n {scope.showFavouriteCount && (\n \n {I18n.t('public.deals.favourite_count', { count: favouriteCount })}\n
\n )}\n \n {showHeader && (\n
\n );\n};\n\nTopDeals.defaultProps = {\n showHeader: true,\n};\n\nTopDeals.propTypes = {\n showHeader: PropTypes.bool,\n};\n\nexport default TopDeals;\n","const addOrRemoveAgeField = (counter, data) => {\n for (let step = 0; step < Math.abs(counter); step += 1) {\n if (counter > 0) {\n data.removeField();\n } else if (counter < 0) {\n data.addField({});\n }\n }\n};\n\nexport default addOrRemoveAgeField;\n","/* eslint-disable react/prop-types */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { I18nText } from '@wtag/react-comp-lib';\nimport QuantitySelector from '@wtag/rcl-quantity-selector';\nimport SelectBox from '@wtag/rcl-select-box';\nimport Card from '@wtag/rcl-card';\nimport Alert from 'sharedWebpack/Alert';\nimport { itemCounter } from 'sharedWebpack/MultipleForm/multipleForm';\nimport addOrRemoveAgeField from '../helpers/addOrRemoveAgeField';\n\nclass SelectTravelerCount extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n childOptionsCount: 0,\n infantOptionsCount: 0,\n };\n }\n\n handleTravelerCountLabel = () => {\n const adultCount =\n this.props.travelersType.adults.value === ''\n ? 0\n : parseInt(this.props.travelersType.adults.value, 10);\n const childCount =\n this.props.travelersType.children.value === ''\n ? 0\n : parseInt(this.props.travelersType.children.value, 10);\n const infantCount =\n this.props.travelersType.infants.value === ''\n ? 0\n : parseInt(this.props.travelersType.infants.value, 10);\n return this.props.approvalRequestId\n ? I18n.t('components.ibe.deals.label.approval_item', {\n adultCount,\n childCount,\n infantCount,\n })\n : I18n.t('components.ibe.deals.label.total_traveler_count', {\n adultCount,\n childCount,\n infantCount,\n });\n };\n\n handleAdults = value =>\n Promise.all([this.props.travelersType.adults.onChange(value)]).then(() =>\n this.handleTravelerCountLabel(),\n );\n\n handleChildrenCount = () => {\n if (this.props.travelersType.childrenList.age) {\n const childCount = this.props.travelersType.childrenList.age.filter(age =>\n age.value !== '' ? age.value >= 2 && age.value <= 11 : 2,\n ).length;\n this.props.travelersType.children.onChange(childCount);\n }\n };\n\n handleInfantCount = () => {\n if (this.props.travelersType.infantList.age) {\n const infantCount = this.props.travelersType.infantList.age.filter(age =>\n age.value !== '' ? age.value >= 0 && age.value < 2 : 1,\n ).length;\n\n this.props.travelersType.infants.onChange(infantCount);\n }\n };\n\n renderChildrenAgeFields = value => {\n const childrenData = this.props.travelersType.childrenList.age;\n this.setState({ childOptionsCount: value });\n const counterDiff = childrenData.length - value;\n\n addOrRemoveAgeField(counterDiff, childrenData);\n\n return Promise.all([this.props.travelersType.childrenList.count.onChange(value)]).then(() => {\n this.props.travelersType.children.onChange(value);\n this.handleTravelerCountLabel();\n this.handleChildrenCount();\n });\n };\n\n renderInfantAgeFields = value => {\n const infantData = this.props.travelersType.infantList.age;\n this.setState({ infantOptionsCount: value });\n const counterDiff = infantData.length - value;\n\n addOrRemoveAgeField(counterDiff, infantData);\n\n return Promise.all([this.props.travelersType.infantList.count.onChange(value)]).then(() => {\n this.props.travelersType.infants.onChange(value);\n this.handleTravelerCountLabel();\n this.handleInfantCount();\n });\n };\n\n render() {\n const { travelersType, disabled } = this.props;\n\n const CHILD_AGE_OPTIONS = [...Array(12).keys()].map(age => ({\n value: age,\n label: `${age}`,\n }));\n\n const INFANT_AGE_OPTIONS = [...Array(2).keys()].map(age => ({\n value: age,\n label: `${age}`,\n }));\n\n const appendChildrenData = travelersType.childrenList.age.map((child, index) => (\n \n {I18n.t('public.homepage.top_deals')}\n
\n )}\n {isLoading && !topDeals.length > 0 && (\n \n
\n )}\n {!isLoading && !topDeals.length > 0 && (\n \n {topDeals.map(deal => (\n
\n )}\n \n deleteFromFavourite(value)}\n id={deal.id}\n name={deal.name}\n amount={deal.adAmount}\n currency={deal.currency}\n imageUrl={deal.imageUrl}\n detailsUrl={dealShowPageUrl(deal.id)}\n addToFavourite={value => addToFavourite(value)}\n favourite={deal.favourite}\n teaser={deal.teaser}\n itemTypes={deal.itemTypes}\n currentUserId={deal.currentUserId}\n favouriteCount={deal.favouriteCount}\n scope={{ showFavouriteCount: true }}\n />\n
\n ))}\n \n \n \n {error}\n \n \n ))}\n
\n );\n }\n}\n\nSelectTravelerCount.defaultProps = {\n touched: false,\n error: null,\n disabled: false,\n};\n\nSelectTravelerCount.propTypes = {\n touched: PropTypes.bool,\n error: PropTypes.string,\n travelersType: PropTypes.shape({\n adults: PropTypes.shape({\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n onChange: PropTypes.func.isRequired,\n }).isRequired,\n childrenList: PropTypes.shape({\n age: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\n count: PropTypes.shape({\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n onChange: PropTypes.func.isRequired,\n }).isRequired,\n }).isRequired,\n infantList: PropTypes.shape({\n age: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\n count: PropTypes.shape({\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n onChange: PropTypes.func.isRequired,\n }).isRequired,\n }).isRequired,\n infants: PropTypes.shape({\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n onChange: PropTypes.func.isRequired,\n }),\n children: PropTypes.shape({\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n onChange: PropTypes.func.isRequired,\n }),\n }).isRequired,\n disabled: PropTypes.bool,\n};\n\nexport default SelectTravelerCount;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport AirlineLogo from './AirlineLogoContainer';\n\nconst AirlineLogos = props => {\n const carriers = new Set(props.carriers);\n\n const logos = Array.from(carriers.values()).map(carrier => (\n \n
\n {this.handleTravelerCountLabel()}
\n \n
\n\n {travelersType.childrenList.count.value > 0 && (\n \n \n \n
\n \n
\n\n \n \n \n
\n\n \n
\n\n \n
\n \n \n \n
\n \n
\n\n \n
\n {appendChildrenData}
\n )}\n\n {travelersType.infantList.count.value > 0 && {appendInfantData}
}\n {travelersFieldError &&\n travelersFieldError.map(error => (\n {logos}
;\n};\n\nAirlineLogos.defaultProps = {\n className: null,\n};\n\nAirlineLogos.propTypes = {\n carriers: PropTypes.arrayOf(PropTypes.string).isRequired,\n className: PropTypes.string,\n};\n\nexport default AirlineLogos;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { EmphasisTag } from '@wtag/react-comp-lib';\nimport Tooltip from '@wtag/rcl-tooltip';\n\nconst ApprovalRequiredLabel = ({ className, reason }) => {\n const approvalRequiredLabelTag = (\n \n
\n );\n }\n}\n\nAirportDetails.defaultProps = {\n airports: {},\n terminal: null,\n};\n\nAirportDetails.propTypes = {\n terminal: PropTypes.string,\n code: PropTypes.string.isRequired,\n localTime: PropTypes.string.isRequired,\n airports: PropTypes.objectOf(\n PropTypes.shape({\n placeName: PropTypes.string.isRequired,\n }),\n ),\n fetchAirportDetails: PropTypes.func.isRequired,\n};\n\nexport default AirportDetails;\n","import { connect } from 'react-redux';\nimport AirportDeatils from './AirportDetails';\nimport { fetchAirportDetails } from '../../../actions/flight';\n\nconst mapStateToProps = state => ({\n airports: state.common.airports,\n});\n\nconst mapDispatchToProps = dispatch => ({\n fetchAirportDetails: code => dispatch(fetchAirportDetails(code)),\n});\n\nexport default connect(mapStateToProps, mapDispatchToProps)(AirportDeatils);\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Icon from '@wtag/rcl-icon';\nimport IconButton from '@wtag/rcl-icon-button';\nimport Amount from 'sharedWebpack/Amount';\nimport Segment from 'sharedWebpack/ItemWrapper/Flight/Segment';\nimport { EmphasisTag, Link } from '@wtag/react-comp-lib';\nimport AirlineLogos from '../SearchResult/flight/AirlineLogos';\nimport BaggageLabel from '../SearchResult/flight/BaggageLabel';\nimport ApprovalRequiredLabel from './ApprovalRequiredLabel';\nimport OutOfPolicyLabel from '../components/OutOfPolicyLabel';\nimport PreferredLabel from '../components/PreferredLabel';\nimport FlightDurationAndStopOvers from '../SearchResult/flight/FlightDurationAndStopOvers/FlightDurationAndStopOversContainer';\nimport AirportDetails from '../SearchResult/flight/AirportDetails/AirportDetailsContainer';\nimport './styles.scss';\n\nconst FlightLineItem = props => {\n const trips = props.trips.map(trip => {\n const id = trip.id;\n const stopovers = trip.stopovers;\n const durationInMin = trip.durationInMinutes;\n const originTerminal = trip.originTerminal;\n const destinationTerminal = trip.destinationTerminal;\n const segments = trip.segments;\n const cabinClass = trip.cabinClass;\n const bookingClasses = trip.bookingClasses;\n const fareType = trip.fareType;\n const punctuality = trip.punctuality;\n const overnight = trip.overnight;\n const firstSegment = segments[0];\n const lastSegment = segments[segments.length - 1];\n const origin = firstSegment.originCode;\n const departureTime = firstSegment.departureLocaltime;\n const arrivalTime = lastSegment.arrivalLocaltime;\n const destination = lastSegment.destinationCode;\n const key = `${origin}${destination}`;\n const wifiPresent = segments.map(segment => segment.wifiAvailable).includes(true);\n const cateringPresent = segments.map(segment => segment.catering.length > 0);\n const baggagePresent = segments.map(segment => segment.freeBaggageIncluded).includes(true);\n const marketingAirlineCode = segments.map(segment => segment.marketingCarrierCode);\n\n const findAirportInformation = code => trip.airports.find(info => info && info.code === code);\n\n const allSegmentDetails = () => {\n const tripSegment = trip.segments;\n return tripSegment.map(segment => (\n \n {code}\n
\n \n
\n {name}
\n \n {placeName}, {country}\n
\n \n
\n {terminal && (\n \n {I18n.t('components.flight.terminal', {\n number: terminal,\n })}\n
\n )}\n \n
\n );\n });\n return \n
\n\n \n
\n \n
\n \n
\n \n
\n\n \n\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n {segments.map(segment => (\n
\n \n
\n \n {props.item.preferred && segment.baggagePiecesIncluded)}\n />\n }\n size=\"tiny\"\n icon={\n
\n {trips}
;\n};\n\nFlightLineItem.defaultProps = {\n className: null,\n};\n\nFlightLineItem.propTypes = {\n trips: PropTypes.arrayOf(\n PropTypes.shape({\n destinationCode: PropTypes.string.isRequired,\n originCode: PropTypes.string.isRequired,\n }),\n ).isRequired,\n className: PropTypes.string,\n setSidePanelTitle: PropTypes.func.isRequired,\n setSidePanelBody: PropTypes.func.isRequired,\n setOpenSidePanel: PropTypes.func.isRequired,\n item: PropTypes.shape({\n approvalRequired: PropTypes.bool.isRequired,\n currency: PropTypes.string.isRequired,\n grossTotal: PropTypes.string.isRequired,\n preferred: PropTypes.bool.isRequired,\n outOfPolicy: PropTypes.bool.isRequired,\n channel: PropTypes.shape({\n identifier: PropTypes.string.isRequired,\n account: PropTypes.string.isRequired,\n }).isRequired,\n }).isRequired,\n};\n\nexport default FlightLineItem;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst ServiceLineItem = props => {props.description}
;\n\nServiceLineItem.defaultProps = {\n className: null,\n};\n\nServiceLineItem.propTypes = {\n className: PropTypes.string,\n description: PropTypes.string.isRequired,\n};\n\nexport default ServiceLineItem;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst SeatLineItem = props => (\n \n {props.row}\n {props.seat}\n
\n);\n\nSeatLineItem.defaultProps = {\n className: null,\n};\n\nSeatLineItem.propTypes = {\n className: PropTypes.string,\n seat: PropTypes.string.isRequired,\n row: PropTypes.string.isRequired,\n};\n\nexport default SeatLineItem;\n","export const sourceNames = {\n Mobil: 'Mobil Travel Guide Star Ratings',\n aaa: 'AAA Diamond Rating',\n northstar_crown: 'Northstar Crown Rating',\n};\n\nexport const sourceMaxes = {\n aaa: 5,\n northstar_crown: 5,\n travelbox: 10,\n Mobil: 5,\n};\n\nexport const RATING_SOURCES = ['travelbox', 'aaa', 'ntm', 'Mobil'];\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { EmphasisTag } from '@wtag/react-comp-lib';\nimport { sourceMaxes, sourceNames } from '../../../helpers/hotelRatingData';\n\nconst Rating = ({ rating, source, className }) => {\n const maxRating = sourceMaxes[source];\n const ratingText = `${rating}/${maxRating}`;\n\n return (\n \n {rating &&
\n );\n};\n\nRating.defaultProps = {\n className: null,\n rating: null,\n source: null,\n};\n\nRating.propTypes = {\n className: PropTypes.string,\n rating: PropTypes.number,\n source: PropTypes.oneOf(['travelport_rooms_and_more', 'travelbox', 'aaa', 'ntm', 'Mobil']),\n};\n\nexport default Rating;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Tooltip from '@wtag/rcl-tooltip';\nimport Amount from 'sharedWebpack/Amount';\n\nconst MarginTooltip = (props, context) => {\n if (context.laymanMode || !props.breakdown || props.breakdown.length < 1) {\n return null;\n }\n\n const labels = props.breakdown.map(margin => (\n \n {margin.name}:\n
\n ));\n\n return (\n \n \n {props.children}\n \n
\n );\n};\n\nMarginTooltip.defaultProps = {\n breakdown: [],\n position: 'bottom-right',\n};\n\nMarginTooltip.propTypes = {\n className: PropTypes.string.isRequired,\n children: PropTypes.node.isRequired,\n position: PropTypes.string,\n breakdown: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.number.isRequired,\n name: PropTypes.string.isRequired,\n total: PropTypes.string.isRequired,\n currency: PropTypes.string.isRequired,\n }),\n ),\n};\n\nMarginTooltip.contextTypes = {\n laymanMode: PropTypes.bool.isRequired,\n};\n\nexport default MarginTooltip;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nimport Stars from '../../components/Stars';\n\nexport default function HotelName(props) {\n return (\n \n \n
\n );\n}\n\nHotelName.defaultProps = {\n stars: 0,\n className: null,\n name: null,\n};\n\nHotelName.propTypes = {\n stars: PropTypes.number,\n name: PropTypes.string,\n className: PropTypes.string,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { I18nText, EmphasisTag } from '@wtag/react-comp-lib';\n\nconst Refundable = ({ refundable, className }) => {\n let refundableType = 'danger';\n let refundableText = (\n \n
\n );\n};\n\nHotelLineItem.defaultProps = {\n className: null,\n stars: null,\n rating: null,\n ratingSource: null,\n street: null,\n zipCode: null,\n city: null,\n state: null,\n pictures: [],\n corporateDeal: false,\n refundable: false,\n};\n\nHotelLineItem.propTypes = {\n stars: PropTypes.number,\n rating: PropTypes.number,\n ratingSource: PropTypes.string,\n name: PropTypes.string.isRequired,\n className: PropTypes.string,\n street: PropTypes.string,\n zipCode: PropTypes.string,\n city: PropTypes.string,\n state: PropTypes.string,\n checkIn: PropTypes.string.isRequired,\n checkOut: PropTypes.string.isRequired,\n pictures: PropTypes.node,\n corporateDeal: PropTypes.bool,\n refundable: PropTypes.bool,\n item: PropTypes.shape({\n approvalRequired: PropTypes.bool.isRequired,\n preferred: PropTypes.bool.isRequired,\n outOfPolicy: PropTypes.bool.isRequired,\n currency: PropTypes.string.isRequired,\n grossTotal: PropTypes.string.isRequired,\n perNightPrice: PropTypes.string.isRequired,\n marginBreakdown: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.number.isRequired,\n name: PropTypes.string.isRequired,\n total: PropTypes.string.isRequired,\n currency: PropTypes.string.isRequired,\n }),\n ),\n channel: PropTypes.shape({\n identifier: PropTypes.string.isRequired,\n account: PropTypes.string.isRequired,\n }).isRequired,\n }).isRequired,\n};\n\nexport default HotelLineItem;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nexport default function CarName(props) {\n return (\n \n
\n \n
\n \n {props.pictures[0] ? (\n
\n \n 
\n
\n ) : (\n \n 
\n
\n )}\n \n
\n \n
\n {props && props.stars && props.stars > 0 && \n
\n\n \n {props && props.rating && props.rating !== null && (\n
\n\n \n
\n \n {props.corporateDeal && (\n
\n {props.refundable && (\n \n
\n \n
\n \n {I18n.t('components.ibe.results.starting_from')}\n
\n \n \n
\n\n \n
\n \n
\n\n {pricePerNight && (\n \n
\n \n
\n \n
\n )}\n \n {props.category}{' '}\n ({props.acrissCode})\n
\n );\n}\n\nCarName.defaultProps = {\n className: null,\n};\n\nCarName.propTypes = {\n acrissCode: PropTypes.string.isRequired,\n category: PropTypes.string.isRequired,\n className: PropTypes.string,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Tooltip from '@wtag/rcl-tooltip';\nimport Icon from '@wtag/rcl-icon';\nimport Amount from 'sharedWebpack/Amount';\n\nconst MarginBreakdown = (props, context) => {\n if (context.laymanMode) return props.children;\n if (!props.breakdown) return props.children;\n if (props.breakdown.length < 1) return props.children;\n\n const label = props.breakdown.map(margin => (\n \n {margin.name}:
\n ));\n\n return (\n \n {props.children}\n
\n \n
\n \n
\n );\n\n return (\n \n
\n \n {isPickUp ? (\n
\n {isPickUp\n ? I18n.t('components.ibe.car_results.pick_up')\n : I18n.t('components.ibe.car_results.drop_off')}\n \n
\n {location}
\n \n
\n \n );\n};\n\nCarLineItem.defaultProps = {\n className: null,\n vendorImageUrl: null,\n carImageUrl: null,\n name: null,\n make: null,\n airConditioning: false,\n insurances: null,\n facilities: [],\n mileage: [],\n liabilities: [],\n corporateDeal: false,\n airbag: null,\n doors: null,\n seatCount: 0,\n ratePerDay: null,\n};\n\nCarLineItem.propTypes = {\n acrissCode: PropTypes.string.isRequired,\n category: PropTypes.string.isRequired,\n className: PropTypes.string,\n seatCount: PropTypes.number,\n doors: PropTypes.string,\n ratePerDay: PropTypes.string,\n vendorImageUrl: PropTypes.node,\n carImageUrl: PropTypes.node,\n name: PropTypes.node,\n make: PropTypes.node,\n airConditioning: PropTypes.bool,\n airbag: PropTypes.string,\n corporateDeal: PropTypes.bool,\n setSidePanelTitle: PropTypes.func.isRequired,\n setSidePanelBody: PropTypes.func.isRequired,\n setOpenSidePanel: PropTypes.func.isRequired,\n fuelType: PropTypes.string.isRequired,\n insurances: PropTypes.shape({\n amount: PropTypes.string,\n currency: PropTypes.string,\n modifier: PropTypes.string,\n type: PropTypes.string,\n }),\n facilities: PropTypes.shape({\n amount: PropTypes.string,\n currency: PropTypes.string,\n modifier: PropTypes.string,\n type: PropTypes.string,\n }),\n mileage: PropTypes.shape({\n amount: PropTypes.string,\n currency: PropTypes.string,\n modifier: PropTypes.string,\n type: PropTypes.string,\n }),\n liabilities: PropTypes.shape({\n amount: PropTypes.string,\n currency: PropTypes.string,\n modifier: PropTypes.string,\n type: PropTypes.string,\n }),\n pickUp: PropTypes.shape({\n localtime: PropTypes.string.isRequired,\n localtimeHour: PropTypes.string.isRequired,\n location: PropTypes.string.isRequired,\n }).isRequired,\n dropOff: PropTypes.shape({\n localtime: PropTypes.string.isRequired,\n localtimeHour: PropTypes.string.isRequired,\n location: PropTypes.string.isRequired,\n }).isRequired,\n item: PropTypes.shape({\n approvalRequired: PropTypes.bool.isRequired,\n currency: PropTypes.string.isRequired,\n preferred: PropTypes.bool.isRequired,\n outOfPolicy: PropTypes.bool.isRequired,\n grossTotal: PropTypes.string.isRequired,\n marginBreakdown: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.number.isRequired,\n name: PropTypes.string.isRequired,\n total: PropTypes.string.isRequired,\n currency: PropTypes.string.isRequired,\n }),\n ),\n channel: PropTypes.shape({\n identifier: PropTypes.string.isRequired,\n account: PropTypes.string.isRequired,\n }).isRequired,\n }).isRequired,\n};\n\nexport default CarLineItem;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Amount from 'sharedWebpack/Amount';\nimport ProductIcon from 'sharedWebpack/ProductIcon';\nimport StaticDefaultImage from 'agentSyncedImages/fallback_images/product/product_xxl_static.png';\nimport ContentLoaderPlaceholder from '@wtag/rcl-content-loader-placeholder';\n\nconst StaticLineItem = props => (\n \n
\n \n
\n \n {props.vendorImageUrl && 
}\n
\n \n
\n \n \n {props.carImageUrl ? (\n 
\n ) : (\n 
\n )}\n
\n \n
\n \n
\n\n \n {props.make} {props.name}\n
\n \n
\n \n
\n \n {locationAndTime(\n true,\n props.pickUp.localtime,\n props.pickUp.localtimeHour,\n props.pickUp.location,\n )}\n
\n {locationAndTime(\n false,\n props.dropOff.localtime,\n props.dropOff.localtimeHour,\n props.dropOff.location,\n )}\n \n {props.mileage.length > 0 &&
\n {props && props.insurances && props.insurances.length > 0 && (\n \n
\n )}\n\n {props && props.facilities && props.facilities.length > 0 && (\n \n
\n\n \n
\n \n showInsuranceSidePanel()}\n modifier=\"default\"\n size=\"tiny\"\n >\n
\n \n {props && props.liabilities && props.liabilities.length > 0 && (\n
\n )}\n \n showLiabilitiesSidePanel()}\n modifier=\"default\"\n size=\"tiny\"\n >\n
\n )}\n {props && props.facilities && props.facilities.length > 0 && (\n \n \n
\n )}\n \n
\n \n {I18n.t('components.ibe.results.starting_from')}\n
\n \n \n \n
\n \n
\n {I18n.t('components.ibe.cars_results.price_tax_info')}
\n \n
\n \n
\n \n
\n\n \n {props.seatCount !== 0 && props.seatCount && (\n setIsPopoverVisible(prevState => !prevState)}\n role=\"button\"\n tabIndex={0}\n onKeyPress={() => setIsPopoverVisible(prevState => !prevState)}\n >\n {props.airbag\n ? I18n.t('components.ibe.search_results.car.label.plus_attributes', {\n number: 2,\n })\n : I18n.t('components.ibe.search_results.car.label.plus_attributes', {\n number: 1,\n })}\n \n \n
\n \n
\n )}\n {props.doors && (\n \n
\n )}\n {props.airConditioning && (\n \n
\n )}\n\n \n \n
\n }\n size=\"small\"\n direction=\"bottom-right\"\n onOutsideClick={() => setIsPopoverVisible(false)}\n >\n \n {props.fuelType &&
\n {props.airbag && (\n \n {I18n.t('components.ibe.cars_facilities.air_bag')}\n
\n )}\n \n {props.corporateDeal && (\n
\n \n
\n )}\n {props.item && props.item.approvalRequired && (\n \n
\n )}\n {props.item && props.item.preferred && (\n \n
\n )}\n {props.item && props.item.outOfPolicy && (\n \n
\n )}\n \n {props.fetchingStaticProducts ? (\n \n \n )}\n
\n);\n\nStaticLineItem.defaultProps = {\n pictureUrl: null,\n fetchingStaticProducts: false,\n};\n\nStaticLineItem.propTypes = {\n name: PropTypes.string.isRequired,\n productType: PropTypes.string.isRequired,\n pictureUrl: PropTypes.string,\n vatPercentage: PropTypes.string.isRequired,\n currency: PropTypes.string.isRequired,\n price: PropTypes.string.isRequired,\n vatAmount: PropTypes.string.isRequired,\n fetchingStaticProducts: PropTypes.bool,\n item: PropTypes.shape({\n quantity: PropTypes.string.isRequired,\n }).isRequired,\n};\n\nexport default StaticLineItem;\n","/* eslint-disable react/prop-types */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { SidePanel } from '@wtag/react-comp-lib';\nimport FlightLineItem from './FlightLineItem';\nimport ServiceLineItem from './ServiceLineItem';\nimport SeatLineItem from './SeatLineItem';\nimport HotelLineItem from './HotelLineItem';\nimport CarLineItem from './CarLineItem';\nimport StaticLineItem from './StaticLineItem';\n\nconst availableComponents = {\n flight: FlightLineItem,\n hotel: HotelLineItem,\n static_product: StaticLineItem,\n car: CarLineItem,\n service: ServiceLineItem,\n seat: SeatLineItem,\n};\n\nclass LineItem extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n openSidePanel: false,\n sidePanelTitle: null,\n sidePanelBody: null,\n };\n }\n\n componentDidMount() {\n const item = this.props.item;\n if (item.hasJourneyElement && !this.props.journeyElement) {\n this.props.fetchJourneyElement(item.journeyElementType, item.journeyElementId);\n }\n }\n\n setSidePanelBody = body => {\n this.setState({ sidePanelBody: body });\n };\n\n setSidePanelTitle = title => {\n this.setState({ sidePanelTitle: title });\n };\n\n setOpenSidePanel = () => {\n this.setState({ openSidePanel: true });\n };\n\n hideSidePanel = () => {\n this.setState({ openSidePanel: false });\n };\n\n render() {\n let RealLineItem = availableComponents[this.props.item.journeyElementType];\n\n if (RealLineItem) {\n if (this.props.journeyElement) {\n return (\n \n
\n \n
\n \n 
\n
\n \n
\n \n
\n {props.name}
\n \n
\n \n
\n \n {I18n.t('components.ibe.price.including_vat', {\n vat: props.vatPercentage,\n })}\n
\n \n
\n );\n\n return (\n \n
\n \n {getTripType(trips)}\n {' - '}\n {I18n.t('components.ibe.search_form.label.number_of_travelers', {\n count: travelerCount,\n })}\n {' | '}\n {I18n.t(props.trips[0].cabinClass, {\n scope: 'cabin_classes',\n })}\n
\n \n {segmentString} {I18n.t('components.ibe.search_form.label.travel_date_on')}{' '}\n
\n \n {props.isDealItem ? (\n
\n );\n};\n\nFlightSearchName.defaultProps = {\n adults: null,\n children: null,\n infants: null,\n isDealItem: false,\n};\n\nFlightSearchName.propTypes = {\n trips: PropTypes.arrayOf(\n PropTypes.shape({\n origin: PropTypes.string.isRequired,\n destination: PropTypes.string.isRequired,\n date: PropTypes.string.isRequired,\n cabinClass: PropTypes.string.isRequired,\n }),\n ).isRequired,\n adults: PropTypes.number,\n children: PropTypes.number,\n infants: PropTypes.number,\n onMenuItemClick: PropTypes.func.isRequired,\n isDealItem: PropTypes.bool,\n};\n\nexport default FlightSearchName;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nclass Place extends React.Component {\n componentDidMount() {\n if (!this.place()) {\n this.props.fetchPlaceDetails(this.props.id);\n }\n }\n\n place = () => this.props.places[this.props.id];\n\n render() {\n let name = this.props.id;\n if (this.place()) {\n name = (\n \n {this.place().name}, {this.place().countryName}\n \n );\n }\n\n return {name};\n }\n}\n\nPlace.defaultProps = {\n places: null,\n};\n\nPlace.propTypes = {\n id: PropTypes.number.isRequired,\n\n places: PropTypes.shape(),\n fetchPlaceDetails: PropTypes.func.isRequired,\n};\n\nexport default Place;\n","import { connect } from 'react-redux';\nimport Place from './Place';\nimport { fetchPlaceDetails } from '../actions/common';\n\nconst mapStateToProps = state => ({\n places: state.common.places,\n});\n\nconst mapDispatchToProps = dispatch => ({\n fetchPlaceDetails: id => dispatch(fetchPlaceDetails(id)),\n});\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Place);\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { MenuItem } from '@wtag/rcl-menu';\nimport DateTimeLocaleInterpolationWrapper from 'sharedWebpack/DateTimeLocaleInterpolationWrapper';\nimport ProductIcon from 'sharedWebpack/ProductIcon';\nimport { FormatDateTime, DATE_FORMAT_SHORT } from 'sharedWebpack/helpers/dateTime';\nimport Place from '../../components/PlaceContainer';\n\nconst HotelSearchName = props => {\n const numberOfRooms = props.numberOfRooms;\n const travelerCount = props.adults + props.children;\n\n let place;\n if (props.placeId) {\n place = {flightData}
\n ) : (\n \n )}\n \n
\n );\n\n return (\n \n
\n \n {I18n.t('components.ibe.search_form.label.number_of_rooms', { count: numberOfRooms })}\n {' | '}\n {I18n.t('components.ibe.search_form.label.number_of_travelers', {\n count: travelerCount,\n })}\n
\n \n {place} \n
\n \n {props.isDealItem ? (\n
\n );\n};\n\nHotelSearchName.defaultProps = {\n address: '',\n placeId: null,\n isDealItem: false,\n};\n\nHotelSearchName.propTypes = {\n placeId: PropTypes.number,\n address: PropTypes.string,\n checkIn: PropTypes.string.isRequired,\n numberOfRooms: PropTypes.number.isRequired,\n adults: PropTypes.number.isRequired,\n children: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\n onMenuItemClick: PropTypes.func.isRequired,\n isDealItem: PropTypes.bool,\n};\n\nexport default HotelSearchName;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport ProductIcon from 'sharedWebpack/ProductIcon';\nimport { MenuItem } from '@wtag/rcl-menu';\nimport DateTime from 'sharedWebpack/DateTime';\n\nconst CarSearchName = props => {\n const { dropOffLocationAirportCode, dropOffGeoLocationAddress } = props;\n const pickUpDate = props.pickUpDate;\n const hasAirportCodeOnly =\n props.name === null && props.placeName === null && props.countryName === null;\n\n let destination = dropOffGeoLocationAddress;\n if (props.airportSearch) {\n destination = !hasAirportCodeOnly\n ? `${props.name} (${dropOffLocationAirportCode}), ${props.placeName}, ${props.countryName}`\n : (destination = `${dropOffLocationAirportCode}`);\n }\n\n const carData = (\n {hotelData}
\n ) : (\n \n )}\n \n
\n );\n\n return (\n \n
\n {destination}
\n \n
\n \n {props.isDealItem ? (\n
\n );\n};\n\nCarSearchName.defaultProps = {\n dropOffLocationAirportCode: null,\n dropOffGeoLocationAddress: null,\n name: null,\n countryName: null,\n placeName: null,\n isDealItem: false,\n};\n\nCarSearchName.propTypes = {\n airportSearch: PropTypes.bool.isRequired,\n dropOffLocationAirportCode: PropTypes.string,\n dropOffGeoLocationAddress: PropTypes.string,\n pickUpDate: PropTypes.string.isRequired,\n name: PropTypes.string,\n countryName: PropTypes.string,\n placeName: PropTypes.string,\n onMenuItemClick: PropTypes.func.isRequired,\n isDealItem: PropTypes.bool,\n};\n\nexport default CarSearchName;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport FlightSearchName from '../Search/flight/FlightSearchName';\nimport HotelSearchName from '../Search/hotel/HotelSearchName';\nimport CarSearchName from '../Search/car/CarSearchName';\nimport StaticSearchName from '../Search/static/StaticSearchName';\n\nconst availableComponents = {\n flight: FlightSearchName,\n hotel: HotelSearchName,\n static: StaticSearchName,\n car: CarSearchName,\n};\n\nconst SearchName = props => {\n const { type, ...other } = props;\n const RealSearchName = availableComponents[type];\n if (!RealSearchName) {\n return null;\n }\n\n return {carData}
\n ) : (\n \n )}\n \n
\n \n
\n {/* TODO: will be done in Agent side with Add New feature */}\n {/* \n {fee.quantity}x {fee.name}\n
\n \n
*/}\n \n \n
\n \n
\n \n {/* TODO: will be done in Agent side with Add New feature */}\n {/* {this.feeTotal(fee)}\n {!this.context.laymanMode && (\n
\n \n
\n\n \n
\n \n
\n \n {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}\n {this.context.laymanMode ? (\n \n
\n \n
\n\n {/* TODO: will be done in Agent side with Add New feature */}\n {/* {!this.context.laymanMode && (\n {this.fees()}
\n \n
\n )} */}\n \n
\n \n
\n \n
\n \n \n {this.props.feeSuggestions.map(fee => (\n
\n \n this.state.requestPossible && this.selectFee(fee)}\n />\n
\n ))}\n \n \n {allSelected && !isCartItemsLoading && Object.keys(cart).length > 0 ? (\n \n \n )}\n
\n );\n};\n\nDealTravelPlan.defaultProps = {\n allSelected: false,\n};\n\nDealTravelPlan.propTypes = {\n cartId: PropTypes.string.isRequired,\n allSelected: PropTypes.bool,\n};\n\nexport default DealTravelPlan;\n","import React from 'react';\nimport ContentLoaderPlaceholder from '@wtag/rcl-content-loader-placeholder';\n\nconst DealLoader = () => (\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n);\n\nexport default DealLoader;\n","/* eslint-disable react/prop-types */\nimport React, { Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport moment from 'moment';\nimport { v4 as uuidv4 } from 'uuid';\nimport { CopyToClipboard } from 'react-copy-to-clipboard';\nimport { I18nText, Spinner } from '@wtag/react-comp-lib';\nimport Avatar from '@wtag/rcl-avatar';\nimport StackedItems from '@wtag/rcl-stacked-items';\nimport Popover from '@wtag/rcl-popover';\nimport RclLink from '@wtag/rcl-link';\nimport { Link } from 'react-router-dom';\nimport classNames from 'classnames';\nimport Amount from 'sharedWebpack/Amount';\nimport ProductIcon from 'sharedWebpack/ProductIcon';\nimport TimeSelectBox from 'sharedWebpack/TimeSelectBox';\nimport Alert from 'sharedWebpack/Alert';\nimport Card from '@wtag/rcl-card';\nimport Button from '@wtag/rcl-button';\nimport Input from '@wtag/rcl-input';\nimport QuantitySelector from '@wtag/rcl-quantity-selector';\nimport Icon from '@wtag/rcl-icon';\nimport DatePickerWithFocusedStateWrapper from 'sharedWebpack/DatePickerWithFocusedStateWrapper';\nimport { RTabs } from '@wtag/rcl-rtabs';\nimport SelectBox from '@wtag/rcl-select-box';\nimport Modal from 'sharedWebpack/Modal';\nimport { TYPE_STATIC_PRODUCT } from 'sharedWebpack/helpers/itemTypes';\nimport searchURL from '../lib/helpers/searchURL';\nimport { stringifyQueryString } from '../helpers/qsMethods';\nimport SearchAccounts from '../components/SearchAccounts';\nimport OfferEnquiryForm from './OfferEnquiryForm';\nimport TopDeals from '../components/TopDeals';\nimport SelectTravelerCount from './SelectTravelerCount';\nimport LineItem from './LineItemContainer';\nimport SearchName from '../components/SearchName';\nimport Fees from './FeesContainer';\nimport DealTravelPlan from '../Deal/DealTravelPlan';\nimport DealLoader from './DealLoader';\nimport { multiSearchResultsSelected } from '../actions/common';\nimport { cabinClassOptions } from '../Search/flight/helpers/variousOptionsProvider';\nimport findLabelValue from '../helpers/findLabelValue';\n\nclass MultiSearch extends React.Component {\n constructor(props) {\n super(props);\n this.STATES = ['open', 'searching', 'confirming', 'available'];\n this.state = {\n selectedTabKey: 0,\n flightSelectAll: true,\n hotelSelectAll: true,\n carSelectAll: true,\n copied: false,\n isModalVisible: false,\n enquireModalOpen: false,\n selectedItems: [],\n isHeaderVisible: true,\n isPopoverVisible: false,\n isDealPopoverVisible: false,\n };\n }\n\n onCopy() {\n this.setState({ copied: true });\n }\n\n onResultSelect = (groupKey, resultId) => {\n this.props.multiSearchResultSelected(groupKey, resultId.toString());\n };\n\n onResultDeSelect = (groupKey, resultId) => {\n this.props.multiSearchResultDeSelected(groupKey, resultId.toString());\n };\n\n onModalClose = () => {\n this.setState({\n isModalVisible: false,\n });\n };\n\n onModalOpen = () => {\n this.setState({\n isModalVisible: true,\n });\n };\n\n onEnquireModalClose = () => {\n this.setState({\n enquireModalOpen: false,\n });\n };\n\n onEnquireModalOpen = () => {\n this.setState({\n enquireModalOpen: true,\n isHeaderVisible: true,\n });\n };\n\n setSelectedTabKeyOnClick = tabIndex => {\n this.setState({ selectedTabKey: tabIndex });\n };\n\n updateOptions(value) {\n let currentValues = [...this.state.selectedItems];\n\n if (currentValues.includes(value)) {\n currentValues = currentValues.filter(item => item !== value);\n } else currentValues.push(value);\n\n this.setState({ selectedItems: currentValues });\n }\n\n toggleSelectAll = itemType => {\n if (itemType === 'flight') this.setState({ flightSelectAll: !this.state.flightSelectAll });\n else if (itemType === 'hotel') this.setState({ hotelSelectAll: !this.state.hotelSelectAll });\n else this.setState({ carSelectAll: !this.state.carSelectAll });\n };\n\n readyToCheckAvailability = () => {\n const numOfGroups = Object.values(this.props.groups).length;\n const numOfResults = Object.values(this.props.selectedResults).length;\n\n return numOfGroups === numOfResults;\n };\n\n activeStep = key => {\n const state = this.props.status[key];\n return this.STATES.indexOf(state);\n };\n\n minDate = lastTripDate => {\n if (lastTripDate) {\n return lastTripDate;\n }\n return moment();\n };\n\n updateTravelerCountOnSubmit = (values, dispatch, ownProps) => {\n const { fields } = this.props;\n const { travelersType } = this.props.fields;\n\n let numOfAdultChildren = travelersType.childrenList.age.filter(\n age => age.value !== '' && age.value > 12,\n ).length;\n numOfAdultChildren += parseInt(travelersType.adults.value, 10);\n\n fields.adults.onChange(numOfAdultChildren);\n fields.infants.onChange(travelersType.infants.value);\n fields.children.onChange(travelersType.children.value);\n\n const newTravelerCount = {\n adults: numOfAdultChildren,\n children: travelersType.children.value,\n infants: travelersType.infants.value,\n };\n const finalValues = { ...values, ...newTravelerCount };\n\n return new Promise(resolve => {\n dispatch(multiSearchResultsSelected(finalValues, ownProps.groups, ownProps.callbackParams));\n resolve();\n });\n };\n\n render() {\n const groups = [];\n\n const statusValues = Object.keys(this.props.status).map(e => this.props.status[e]);\n\n function statusPresent(status) {\n return status === this.toString();\n }\n\n const isUnAvailable = statusValues.some(statusPresent, 'unavailable');\n\n const isSearching = statusValues.some(statusPresent, 'searching');\n\n const isConfirming = statusValues.some(statusPresent, 'confirming');\n\n const numberOfFlights =\n this.props.journeyElements && Object.keys(this.props.journeyElements.flight).length;\n\n const numberOfHotels =\n this.props.journeyElements && Object.keys(this.props.journeyElements.hotel).length;\n\n const numberOfCars =\n this.props.journeyElements && Object.keys(this.props.journeyElements.car).length;\n\n const pageURL = window.location.href;\n\n const shareDealLink = (\n \n
\n \n
\n \n
\n {groups}
\n \n \n
\n {!this.context.laymanMode && (\n \n
\n \n
\n \n
\n \n \n
\n \n
\n \n
\n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n );\n\n const checkOtherResults = selectedDealUnavailable && (\n \n
\n );\n\n const selectOrDeselect = () =>\n isSelectedOption\n ? this.onResultDeSelect(key, option.id)\n : this.onResultSelect(key, option.id);\n\n return (\n \n
\n \n \n
\n \n {isOptionSelected && hasOneItemPerGroup ? (\n \n \n \n \n ) : (\n \n {(isSelectedOption || loaderActive) && (\n \n \n
\n {checkOtherResults}\n \n \n )}\n \n );\n });\n\n const additionalFields = [];\n if (group.type === 'flight') {\n group.searchParams.trips.forEach((trip, index) => {\n const lastTrip = this.props.fields.groups[key].trips[index - 1];\n if (!this.props.fields.groups[key].trips[index]) {\n return;\n }\n additionalFields.push(\n {label}
\n \n \n
\n {checkOtherResults}\n \n \n
\n {label}
\n \n \n \n {\n selectOrDeselect();\n this.updateOptions(option.id);\n }}\n disabled={\n !isSelectedOption && (disableOtherOptions || selectedDealUnavailable)\n }\n />\n
\n \n
,\n );\n });\n } else if (group.type === 'hotel') {\n const numberOfRoomsError =\n this.props.fields.groups[key].numberOfRooms &&\n this.props.fields.groups[key].numberOfRooms.error;\n\n additionalFields.push(\n \n
\n \n
\n \n
\n \n \n
\n \n \n selectedCabinClass &&\n this.props.fields.groups[key].trips[index].cabinClass.onChange(\n selectedCabinClass.value,\n )\n }\n width=\"full\"\n size=\"tiny\"\n value={findLabelValue(\n cabinClassOptions(),\n this.props.fields.groups[key].trips[index].cabinClass.value,\n )}\n />\n
\n \n
\n \n
\n \n
,\n );\n } else if (group.type === 'car') {\n const { value, name, error, onChange, touched } = this.props.fields.groups[key].driverAge;\n additionalFields.push(\n \n
\n \n
\n \n {numberOfRoomsError && (\n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n {this.props.fields.groups[key].numberOfRooms.error}\n \n
\n )}\n \n
,\n );\n }\n\n let title = (\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n selectedTime &&\n this.props.fields.groups[key].pickUpTime.onChange(selectedTime.value)\n }\n errorMsg={\n this.props.fields.groups[key].pickUpTime &&\n this.props.fields.groups[key].pickUpTime.touched &&\n this.props.fields.groups[key].pickUpTime.error\n }\n value={findTimeSelectBoxValue(\n this.props.fields.groups[key].pickUpTime &&\n this.props.fields.groups[key].pickUpTime.value,\n )}\n isClearable={false}\n size=\"tiny\"\n />\n
\n \n
\n\n \n
\n \n
\n \n \n selectedTime &&\n this.props.fields.groups[key].dropOffTime.onChange(selectedTime.value)\n }\n errorMsg={\n this.props.fields.groups[key].dropOffTime &&\n this.props.fields.groups[key].dropOffTime.touched &&\n this.props.fields.groups[key].dropOffTime.error\n }\n value={findTimeSelectBoxValue(\n this.props.fields.groups[key].dropOffTime &&\n this.props.fields.groups[key].dropOffTime.value,\n )}\n isClearable={false}\n size=\"tiny\"\n />\n
\n \n
\n );\n\n groups.push(\n \n
\n \n {(group.type === 'static_product' && staticProductTitle) || title}\n
,\n );\n });\n }\n\n const {\n title,\n approvalRequestId,\n person,\n adAmount,\n currency,\n text,\n features,\n categories,\n interests,\n enquireOnly,\n favouriteDealCount, // TODO: To be implemented in a follow-up story, Story Number: AG-7200\n favouriteDealPeople, // TODO: To be implemented in a follow-up story, Story Number: AG-7200\n locations, // TODO: To be implemented in a follow-up story, Story Number: AG-7200\n featureImageGrid,\n imageList,\n } = this.props;\n\n const filterProductTypes =\n this.props.groups &&\n this.props.groups.map &&\n this.props.groups.map(productType => productType.type);\n\n const showDealFeatureImages = imageList && imageList.map(image => image.original);\n\n const dealInterests = interests ? interests.map(value => value.name) : [];\n\n const unavailableDealMessage = isUnAvailable && (\n \n {group.type !== 'static_product' && additionalFields}\n
\n {options}
\n \n {featureImageGrid && (\n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n {favouriteDealCount > 0 && (\n
\n \n
\n )}\n\n \n \n this.setState({\n isDealPopoverVisible: !this.state.isDealPopoverVisible,\n })\n }\n onOutsideClick={() =>\n this.setState({ isDealPopoverVisible: false })\n }\n >\n {favouriteDealPeople.map(traveler => (\n
\n\n \n {I18n.t('components.ibe.deal.favorite_count', {\n count: favouriteDealCount,\n })}\n
\n {title}
\n \n {filterProductTypes &&\n filterProductTypes.map &&\n filterProductTypes.map(item => (\n
\n \n
\n\n {showDealFeatureImages && (\n
\n {text}
\n \n\n {showDealFeatureImages && (\n
\n {showDealFeatureImages.map(image => (\n
\n )}\n\n {!enquireOnly && (\n \n 
\n
\n ))}\n \n
\n )}\n \n
\n \n \n \n \n
\n \n \n \n \n\n \n this.setState({ isPopoverVisible: false })}\n size=\"small\"\n content={\n this.state.copied && (\n this.setState({ isPopoverVisible: true })}\n role=\"button\"\n tabIndex={0}\n onKeyPress={() => this.setState({ isPopoverVisible: true })}\n >\n {shareDealLink}\n \n \n {this.props.favouriteOfCurrentPerson ? (\n deleteFromFavourite(this.props.id)}\n className=\"deals-card__details-info-deal-icon-link\"\n >\n addToFavourite(this.props.id)}\n className=\"deals-card__details-info-deal-icon-link\"\n >\n
\n\n \n
\n )\n }\n direction=\"bottom-right\"\n >\n \n {approvalRequestId ? (\n \n {I18n.t('components.ibe.deal_messages.status')}\n
\n \n ) : (\n \n {I18n.t('components.ibe.deal_messages.starting_price')}\n
\n \n )}\n
\n\n {locations.length > 0 && (\n \n
\n {I18n.t('components.ibe.deal_messages.approved')}\n
\n\n
\n {locations.map(location => (\n
\n )}\n\n {features.length > 0 && (\n \n
\n ))}\n \n
\n {location.name}
\n {location.countryName}
\n \n
\n )}\n {categories.length > 0 && (\n \n
\n {features.map(feature => (\n
\n {feature}
\n ))}\n \n
\n )}\n\n {dealInterests.length > 0 && (\n \n
\n {categories.map(category => (\n
\n {category}
\n ))}\n \n
\n )}\n\n {enquireOnly ? (\n \n
\n {dealInterests.map(interest => (\n
\n {interest}
\n ))}\n \n
\n ) : (\n \n
\n \n
\n )}\n \n {!this.props.allSelected &&\n !isSearching &&\n !isConfirming &&\n !isUnAvailable ? (\n
\n\n \n
\n \n
\n \n\n \n {isUnAvailable ? (\n \n \n ) : (\n \n \n )}\n
\n\n \n {isUnAvailable ? (\n
\n \n {approvalRequestId ? (\n
\n )}\n \n {rightSidedHotelBookingStatus.map(({ iconName, iconColor, label }) => (\n \n
\n ))}\n \n );\n};\n\nRightSidedHotelBookingStatus.propTypes = {\n refundable: PropTypes.bool.isRequired,\n approvalRequired: PropTypes.bool.isRequired,\n payLater: PropTypes.bool.isRequired,\n laymanMode: PropTypes.bool.isRequired,\n outOfPolicy: PropTypes.bool.isRequired,\n policiesReasons: PropTypes.shape({\n outOfPolicy: PropTypes.string,\n approvalRequired: PropTypes.string,\n }).isRequired,\n};\n\nexport default RightSidedHotelBookingStatus;\n","import React, { Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport LeftSidedHotelBookingStatus from './LeftSidedHotelBookingStatus';\nimport RightSidedHotelBookingStatus from './RightSidedHotelBookingStatus';\n\nconst HotelBookingStatus = ({ statusInformation, laymanMode }) => {\n const {\n approvalRequired,\n corporateDeal,\n labels = {},\n payLater,\n policiesReasons = {},\n refundable = null,\n } = statusInformation;\n\n const { outOfPolicy = false, preferred = false } = labels;\n\n const enableHotelBookingStatusSection =\n refundable || (payLater && !laymanMode) || outOfPolicy || preferred || approvalRequired;\n\n if (!enableHotelBookingStatusSection) return null;\n\n return (\n \n
\n \n \n
\n \n \n
\n \n
\n \n \n
\n }\n >\n \n \n {I18n.t('components.ibe.results.from')}\n \n
\n \n {priceDetails.map(\n ({ amount, labelClassName, label, isPriceBold, currency: itemCurrency }) => (\n \n {label}\n\n
\n ),\n )}\n \n \n \n ({I18n.t('components.ibe.search_form.hotel.label.per_night')})\n
\n \n );\n};\n\nHotelPriceMenu.defaultProps = {\n grossTaxes: 0,\n marginBreakdown: [],\n};\n\nHotelPriceMenu.propTypes = {\n currency: PropTypes.string.isRequired,\n durationOfStaying: PropTypes.number.isRequired,\n grossTaxes: PropTypes.string,\n grossTotal: PropTypes.string.isRequired,\n laymanMode: PropTypes.bool.isRequired,\n marginBreakdown: PropTypes.arrayOf(\n PropTypes.shape({\n name: PropTypes.string.isRequired,\n total: PropTypes.string.isRequired,\n currency: PropTypes.string.isRequired,\n }),\n ),\n netRoomRate: PropTypes.string.isRequired,\n perNightPrice: PropTypes.string.isRequired,\n requiredRooms: PropTypes.number.isRequired,\n};\n\nexport default HotelPriceMenu;\n","const getHotelAddress = hotelAddress => {\n const { city, country, street } = hotelAddress;\n let address = '';\n\n if (street || city || country) {\n if (street) {\n address = street;\n }\n\n if (city) {\n address += address ? `, ${city}` : city;\n }\n\n if (country) {\n address += address ? `, ${country}` : country;\n }\n }\n\n return address;\n};\n\nexport default getHotelAddress;\n","import PropTypes from 'prop-types';\n\nexport default {\n id: PropTypes.string.isRequired,\n source: PropTypes.shape({\n supplier: PropTypes.string.isRequired,\n account: PropTypes.string.isRequired,\n }).isRequired,\n name: PropTypes.string.isRequired,\n address: PropTypes.shape({\n street: PropTypes.string.isRequired,\n zip: PropTypes.string,\n city: PropTypes.string,\n state: PropTypes.string,\n country: PropTypes.string,\n }),\n rating: PropTypes.number,\n ratingSource: PropTypes.string,\n grossTotal: PropTypes.string.isRequired,\n perNightPrice: PropTypes.string.isRequired,\n marginAmount: PropTypes.string.isRequired,\n currency: PropTypes.string.isRequired,\n picture: PropTypes.string,\n refundable: PropTypes.bool,\n stars: PropTypes.number,\n corporateDeal: PropTypes.bool,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Link } from 'react-router-dom';\nimport Card from '@wtag/rcl-card';\nimport { I18nText } from '@wtag/react-comp-lib';\nimport HotelDefaultImage from 'agentSyncedImages/fallback_images/product/product_xxl_hotel.png';\nimport Icon from '@wtag/rcl-icon';\nimport Button from '@wtag/rcl-button';\nimport { stringifyQueryString } from '../../../helpers/qsMethods';\nimport ChannelListTag from '../../../helpers/ChannelListTag';\nimport HotelBookingStatus from '../HotelBookingStatus';\nimport HotelPriceMenu from '../HotelPriceMenu';\nimport Rating from '../Rating';\nimport resultShape from '../shapes/result';\nimport Stars from '../../../components/Stars';\nimport getHotelAddress from '../helpers/getHotelAddress';\n\nconst HotelStandardView = props => {\n const {\n address,\n deal,\n dealGroup,\n id,\n name,\n picture,\n rating,\n ratingSource,\n selectedCartItemResultIds,\n source = {},\n stars,\n laymanMode,\n } = props;\n\n const link = {\n pathname: `/hotels/details/${id}`,\n search: stringifyQueryString({ deal, dealGroup }),\n };\n\n const { supplier, account } = source;\n const hotelAddress = getHotelAddress(address);\n const supplierName = I18n.t(supplier, { scope: 'channels' });\n const supplierChannels = [`${supplierName} : ${account}`];\n const alreadySelectedInCart = selectedCartItemResultIds.includes(id);\n\n const buttonText = () => {\n if (alreadySelectedInCart) {\n return \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n {name}
\n \n
\n )}\n {rating && (\n \n
\n )}\n \n
\n \n \n
\n \n
\n \n
\n \n
\n )}\n \n
\n \n
\n \n {!laymanMode &&
\n \n
\n \n
\n {hotelName}
\n \n {stars > 0 && (\n
\n \n
\n )}\n {hotelAddress}
\n \n
\n \n
\n \n ({I18n.t('components.ibe.search_results.hotel.per_night')})\n
\n \n \n
\n \n
\n);\n\nHotelAccordionContent.defaultProps = {\n picture: null,\n rating: null,\n ratingSource: null,\n hotelAddress: '',\n};\n\nHotelAccordionContent.propTypes = {\n statusInformation: PropTypes.shape({\n refundable: PropTypes.bool,\n payLater: PropTypes.bool.isRequired,\n labels: PropTypes.shape({\n outOfPolicy: PropTypes.bool,\n preferred: PropTypes.bool,\n }).isRequired,\n approvalRequired: PropTypes.bool.isRequired,\n corporateDeal: PropTypes.bool.isRequired,\n policiesReasons: PropTypes.shape({\n outOfPolicy: PropTypes.string,\n approvalRequired: PropTypes.bool,\n }).isRequired,\n }).isRequired,\n setPlaceholderImage: PropTypes.func.isRequired,\n picture: PropTypes.string,\n rating: PropTypes.number,\n ratingSource: PropTypes.string,\n laymanMode: PropTypes.bool.isRequired,\n hotelName: PropTypes.string.isRequired,\n hotelAddress: PropTypes.string,\n stars: PropTypes.number.isRequired,\n};\n\nexport default HotelAccordionContent;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { I18nText } from '@wtag/react-comp-lib';\nimport HotelDefaultImage from 'agentSyncedImages/fallback_images/product/product_xxl_hotel.png';\nimport { AccordionItem } from '@wtag/rcl-accordion';\nimport { stringifyQueryString } from '../../../helpers/qsMethods';\nimport HotelAccordionHeader from './HotelAccordionHeader';\nimport resultShape from '../shapes/result';\nimport HotelAccordionContent from './HotelAccordionContent';\nimport getHotelAddress from '../helpers/getHotelAddress';\nimport './styles.scss';\n\nconst HotelCompactView = props => {\n const {\n id,\n deal,\n dealGroup,\n address,\n laymanMode,\n source,\n selectedCartItemResultIds,\n name,\n stars,\n currency,\n perNightPrice,\n rating,\n ratingSource,\n picture,\n approvalRequired,\n corporateDeal,\n labels = {},\n payLater,\n policiesReasons = {},\n refundable,\n } = props;\n\n const [isActiveAccordion, setIsActiveAccordion] = useState(false);\n\n const statusInformation = {\n approvalRequired,\n corporateDeal,\n labels,\n payLater,\n policiesReasons,\n refundable,\n };\n const link = {\n pathname: `/hotels/details/${id}`,\n search: stringifyQueryString({ deal, dealGroup }),\n };\n const hotelAddress = getHotelAddress(address);\n const alreadySelectedInCart = selectedCartItemResultIds.includes(id);\n const channelListText = `${source.supplier} : ${source.account}`;\n\n const buttonText = () =>\n alreadySelectedInCart ? (\n \n
\n \n {hotelName}\n
\n \n
\n )}\n {rating && (\n \n
\n )}\n \n {taggedFilters.length > 0 ? (\n
\n );\n}\n\nFilterTags.propTypes = {\n onRemoveFilter: PropTypes.func.isRequired,\n currentFilters: PropTypes.objectOf(PropTypes.shape([])).isRequired,\n};\n","import React, { useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { Link } from '@wtag/react-comp-lib';\nimport useViewMode from 'sharedWebpack/useViewMode';\nimport {\n DESKTOP_TAB_DEVICE,\n DESKTOP_DEVICE,\n LARGE_DESKTOP_DEVICE,\n} from 'sharedWebpack/old/libraries/responsiveHelpers';\nimport './styles.scss';\n\nconst FilterToggler = ({ label, onToggleFilterVisibility, onUpdateViewMode }) => {\n const viewMode = useViewMode();\n const isInDesktopView = [DESKTOP_TAB_DEVICE, DESKTOP_DEVICE, LARGE_DESKTOP_DEVICE].includes(\n viewMode,\n );\n\n useEffect(() => {\n onUpdateViewMode(viewMode);\n }, [viewMode]);\n\n if (isInDesktopView) {\n return null;\n }\n\n return (\n \n
\n ) : null}\n \n {I18n.t('components.ibe.search_results.filters.active_filters')}\n
\n \n {!showAllTags\n ? taggedFilters.slice(0, ACTIVE_FILTER_LIMIT).map(tag => (\n \n {selectedFilters[tag]}\n \n
\n
\n \n
\n \n {label}\n \n
\n );\n};\n\nFilterToggler.propTypes = {\n label: PropTypes.string.isRequired,\n onToggleFilterVisibility: PropTypes.func.isRequired,\n onUpdateViewMode: PropTypes.func.isRequired,\n};\n\nexport default FilterToggler;\n","import React from 'react';\nimport Amount from 'sharedWebpack/Amount';\nimport PropTypes from 'prop-types';\nimport RangeFilter from '../../../../components/RangeFilter';\nimport './styles.scss';\n\nconst PriceFilter = ({\n currency,\n disabled,\n max,\n min,\n onFilterResults,\n onTotalPriceChange,\n rangeFilterKey,\n step,\n values,\n}) => {\n const TOTAL_PRICE = I18n.t('components.ibe.search_results.filters.total_price');\n\n /*\n Determines whether the current filter values represent the extremes of the range. If at the extremes, removes \"total_price\" from the parent's state `currentFilters.total_price`. If not, adds \"total_price\" to the parent's state. Finally, updates the `filterResults` with the current filter values.\n */\n const onRangeChange = filterValues => {\n if (\n filterValues.max.toFixed(2) === max.toFixed(2) &&\n filterValues.min.toFixed(2) === min.toFixed(2)\n ) {\n onTotalPriceChange(null);\n } else {\n onTotalPriceChange(TOTAL_PRICE);\n }\n\n onFilterResults(filterValues);\n };\n\n const onFormatLabel = value => \n \n {I18n.t('components.ibe.search_results.filters.total_price_currency', { currency })}\n \n
\n
\n );\n};\n\nPriceFilter.defaultProps = {\n disabled: false,\n step: 0.001,\n};\n\nPriceFilter.propTypes = {\n currency: PropTypes.string.isRequired,\n disabled: PropTypes.bool,\n max: PropTypes.number.isRequired,\n min: PropTypes.number.isRequired,\n onFilterResults: PropTypes.func.isRequired,\n onTotalPriceChange: PropTypes.func.isRequired,\n rangeFilterKey: PropTypes.number.isRequired,\n step: PropTypes.number,\n values: PropTypes.shape({\n max: PropTypes.number.isRequired,\n min: PropTypes.number.isRequired,\n }).isRequired,\n};\n\nexport default PriceFilter;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Stars from '../../../../components/Stars';\n\nconst StarOptionName = ({ starCount }) => {\n if (starCount === -1) {\n return {I18n.t('components.ibe.results.filters.stars.unknown')};\n }\n\n if (starCount === 0) {\n return {I18n.t('components.ibe.results.filters.stars.none')};\n }\n\n return \n
\n \n \n \n
\n {shouldShowFilterBody && (\n \n {I18n.t('components.ibe.search_results.hotel.filter_title', {\n count: activeFilterCount,\n })}\n
\n \n
\n \n {\n this.resetData(section);\n }}\n />\n
\n \n {I18n.t('components.ibe.search_results.filters.sort_by')}\n filterResults(SORT_BY, event.value)}\n key={filterResetId}\n options={availableSortOptions}\n value={currentSortOption}\n width=\"full\"\n isClearable={false}\n />\n
\n \n
\n
\n \n
\n {results.length > 0 && (\n filterResults(PRICE, filterValues)}\n />\n )}\n\n {stars && (\n
\n {filters}
;\n }\n}\n\nFilterComponent.defaultProps = {\n stats: null,\n filterParams: null,\n};\n\nFilterComponent.propTypes = {\n selectedFlightGroups: PropTypes.shape({}).isRequired,\n selectGroup: PropTypes.func.isRequired,\n resetSelectGroup: PropTypes.func.isRequired,\n resetFilters: PropTypes.func.isRequired,\n resetFiltersByKey: PropTypes.func.isRequired,\n stats: PropTypes.shape({\n price: PropTypes.shape({\n min: PropTypes.number,\n max: PropTypes.number,\n }).isRequired,\n refundable: PropTypes.arrayOf(PropTypes.string).isRequired,\n stars: PropTypes.arrayOf(PropTypes.number).isRequired,\n availableSortOptions: PropTypes.arrayOf(\n PropTypes.shape({\n label: PropTypes.string.isRequired,\n value: PropTypes.string.isRequired,\n }),\n ).isRequired,\n }),\n results: PropTypes.arrayOf(PropTypes.shape()).isRequired,\n filterParams: PropTypes.shape({\n price: PropTypes.shape({\n min: PropTypes.number,\n max: PropTypes.number,\n }).isRequired,\n refundable: PropTypes.arrayOf(PropTypes.string).isRequired,\n stars: PropTypes.arrayOf(PropTypes.number).isRequired,\n sortBy: PropTypes.string.isRequired,\n }),\n params: PropTypes.shape({\n searchId: PropTypes.string,\n tripId: PropTypes.string,\n }).isRequired,\n filterResults: PropTypes.func.isRequired,\n currency: PropTypes.string.isRequired,\n};\n\nexport default FilterComponent;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Link, I18nText } from '@wtag/react-comp-lib';\nimport Card from '@wtag/rcl-card';\nimport { Header } from '@wtag/rcl-typography';\nimport Icon from '@wtag/rcl-icon';\nimport classNames from 'classnames';\nimport { parseQueryString } from '../../helpers/qsMethods';\nimport HotelStandardView from './HotelStandardView';\nimport HotelCompactView from './HotelCompactView';\nimport { TYPE_COMPACT, TYPE_STANDARD } from '../../../helpers/viewType';\nimport resultShape from './shapes/result';\nimport FilterComponent from './Filter';\nimport EmptyFilterAndResult from '../flight/SearchLoadingScreen/EmptyFilterAndResult';\nimport './styles.scss';\n\nclass Results extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n numberOfHotelsToShow: this.props.viewMode === TYPE_COMPACT ? 12 : 6,\n };\n this.locationQuery = parseQueryString(this.props.location.search);\n }\n\n componentDidUpdate(prevProps) {\n if (this.props.location.search !== prevProps.location.search) {\n this.locationQuery = parseQueryString(this.props.location.search);\n }\n }\n\n setNumberOfHotelsToShow = () => {\n this.setState({ numberOfHotelsToShow: this.state.numberOfHotelsToShow + 6 });\n };\n\n render() {\n let filters = null;\n let content = null;\n\n if (this.props.searchYieldedResults) {\n filters = (\n \n
\n );\n if (this.props.results.length) {\n const results = this.props.results.slice(0, this.state.numberOfHotelsToShow).map(result => {\n let ResultComponent;\n\n switch (this.props.viewMode) {\n case TYPE_STANDARD:\n ResultComponent = HotelStandardView;\n break;\n case TYPE_COMPACT:\n ResultComponent = HotelCompactView;\n break;\n default:\n ResultComponent = HotelStandardView;\n }\n\n return (\n {results}
;\n } else {\n content = (\n \n {this.props.searchCompleted ? (\n
\n ) : (\n \n
\n \n {filters ? (\n \n \n
\n \n {filters}\n
\n ) : null}\n {content}
\n {this.props.results.length - this.state.numberOfHotelsToShow > 0 && (\n \n {I18n.t('shared.actions.load_more')}\n
\n \n )}\n \n \n
\n\n {!noPreview && (\n \n \n {images.map(image => (\n setFocusedImage(image)}\n type=\"default\"\n >\n \n
\n )}\n \n );\n};\n\nHotelImageGallery.defaultProps = {\n images: [],\n};\n\nHotelImageGallery.propTypes = {\n travelAppLayout: PropTypes.bool.isRequired,\n images: PropTypes.arrayOf(\n PropTypes.shape({\n original: PropTypes.string,\n thumbnail: PropTypes.string,\n }),\n ),\n};\n\nexport default HotelImageGallery;\n","/* eslint-disable react/prop-types */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport Icon from '@wtag/rcl-icon';\nimport moment from 'moment';\nimport Amount from 'sharedWebpack/Amount';\nimport DateTimeLocaleInterpolationWrapper from 'sharedWebpack/DateTimeLocaleInterpolationWrapper';\nimport { FormatDateTime } from 'sharedWebpack/helpers/dateTime';\nimport { DATE_FORMAT_SHORT } from '../../../helpers/dateTime';\n\nconst isToday = date => moment(date).diff(Date.now(), 'days') === 0;\n\nconst CancellationPolicies = ({ policies, amount, currency }) => {\n const [firstPolicy] = policies;\n const firstPolicyStartDate = firstPolicy && firstPolicy.startDate;\n const hasNoPolicies = policies.length === 0;\n const singlePolicyToday = policies.length === 1 && isToday(firstPolicyStartDate);\n const singlePolicyTodayMatchesFee = singlePolicyToday && firstPolicy.fee === amount;\n const policyElements = [];\n\n if (hasNoPolicies || singlePolicyTodayMatchesFee) {\n return (\n \n
\n );\n }\n\n const getLocaleKeyAndDate = (index, startDate, endDate) => {\n if (index === 0) {\n return {\n localeKey: 'components.ibe.hotel.room.cancellation_policy.until_with_date_time',\n date: isToday(startDate) ? endDate : startDate,\n };\n }\n\n return {\n localeKey: 'components.ibe.hotel.room.cancellation_policy.starts_with_date_time',\n date: startDate,\n };\n };\n\n const getCancellationFee = (fee, converted) => {\n if (parseInt(fee, 10) === 0) {\n return I18n.t('components.ibe.hotel.room.cancellation_policy.free');\n } else if (converted) {\n return I18n.t('components.ibe.apx');\n }\n\n return \n
\n );\n};\n\nCancellationPolicies.defaultProps = {\n amount: null,\n policies: [],\n};\n\nCancellationPolicies.propTypes = {\n amount: PropTypes.string,\n policies: PropTypes.arrayOf(\n PropTypes.shape({\n startDate: PropTypes.string.isRequired,\n fee: PropTypes.string.isRequired,\n currency: PropTypes.string.isRequired,\n }),\n ),\n};\n\nexport default CancellationPolicies;\n","import React, { useState } from 'react';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\nimport { Menu } from '@wtag/rcl-menu';\nimport Amount from 'sharedWebpack/Amount';\nimport getPriceDetails from '../../SearchResult/hotel/helpers/getPriceDetails';\n\nconst PriceDetails = ({ amount, labelClassName, label, isPriceBold, currency: itemCurrency }) => (\n \n {I18n.t('components.ibe.hotel.room.cancellation_policy.title')}\n
\n - {policyElements}
\n {label}\n
\n);\n\nconst RoomPriceMenu = ({ room, amountLabel, durationOfStaying, laymanMode, requiredRooms }) => {\n const [isPriceMenuVisible, setIsPriceMenuVisible] = useState(false);\n const { currency } = room;\n const priceDetailsArgs = {\n ...room,\n durationOfStaying,\n laymanMode,\n requiredRooms,\n };\n const priceDetails = getPriceDetails(priceDetailsArgs);\n\n const handlePriceMenuOutsideClick = () => {\n setIsPriceMenuVisible(false);\n };\n\n const toggleHotelMenuVisibility = () => {\n setIsPriceMenuVisible(prevIsHotelMenuVisibilityState => !prevIsHotelMenuVisibilityState);\n };\n\n return (\n \n {priceDetails.map(details => (\n
\n \n );\n};\n\nPriceDetails.propTypes = {\n amount: PropTypes.string.isRequired,\n labelClassName: PropTypes.string.isRequired,\n label: PropTypes.string.isRequired,\n isPriceBold: PropTypes.bool.isRequired,\n currency: PropTypes.string.isRequired,\n};\n\nRoomPriceMenu.propTypes = {\n room: PropTypes.shape({\n currency: PropTypes.string.isRequired,\n grossTaxes: PropTypes.string.isRequired,\n grossTotal: PropTypes.string.isRequired,\n marginBreakdown: PropTypes.arrayOf(\n PropTypes.shape({\n name: PropTypes.string.isRequired,\n total: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n currency: PropTypes.string.isRequired,\n }),\n ).isRequired,\n netRoomRate: PropTypes.string.isRequired,\n perNightPrice: PropTypes.string.isRequired,\n }).isRequired,\n amountLabel: PropTypes.string.isRequired,\n durationOfStaying: PropTypes.number.isRequired,\n laymanMode: PropTypes.bool.isRequired,\n requiredRooms: PropTypes.number.isRequired,\n};\n\nexport default RoomPriceMenu;\n","import React, { useState, Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport Button from '@wtag/rcl-button';\nimport Icon from '@wtag/rcl-icon';\nimport Card from '@wtag/rcl-card';\nimport Amount from 'sharedWebpack/Amount';\nimport CancellationPolicies from './CancellationPolicies';\nimport OutOfPolicyJustificationModal from '../../SearchResult/OutOfPolicyJustificationModal';\nimport RoomPriceMenu from './RoomPriceMenu';\nimport { NONE } from '../../../helpers/constants/common';\nimport { DEFAULT, SUCCESS } from '../../lib/helpers/componentStates';\n\nconst ICON_PREFERENCE = 'preference';\nconst ICON_CHECK_CIRCLE_OUTLINE = 'checkCircleOutline';\n\nconst Rooms = ({ rooms, requiredRooms, laymanMode, durationOfStaying, addToCart }) => {\n const [policyJustificationModalOpen, setPolicyJustificationModalOpen] = useState(false);\n const [selectedRoomId, setSelectedRoomId] = useState(null);\n const [isSelectingRoom, setIsSelectingRoom] = useState(false);\n\n const roomsWithCards = rooms.map(room => {\n const {\n id,\n labels,\n grossTotal,\n currency,\n perNightPrice,\n roomTypes,\n cancellationPolicies,\n total,\n } = room;\n\n const { outOfPolicy } = labels;\n\n const handleContinueButtonClick = () => {\n if (outOfPolicy) {\n setSelectedRoomId(id);\n setPolicyJustificationModalOpen(true);\n } else {\n setIsSelectingRoom(true);\n\n addToCart(id, null).then(() => {\n setIsSelectingRoom(false);\n });\n }\n };\n\n const roomDescription = roomTypes.map(({ type, noOfRooms }) => (\n {type}
\n \n {noOfRooms} {type}\n
\n \n
\n );\n });\n\n return (\n \n
\n \n
\n \n
\n \n
\n {roomDescription}
\n \n {renderMealInfo}\n
\n \n
\n {roomsWithCards}
\n \n
\n - \n {amenitiesToShow.map(amenity => (\n
- \n
\n \n ))}\n
\n {I18n.t('components.ibe.search_results.hotel.rating', {\n rating,\n max_rating: maxRating,\n source,\n })}\n
\n );\n};\n\nHotelRating.defaultProps = {\n rating: null,\n ratingSource: null,\n};\n\nHotelRating.propTypes = {\n rating: PropTypes.number,\n ratingSource: PropTypes.oneOf(RATING_SOURCES),\n};\n\nconst HotelTitle = ({ name, address, stars, rating, ratingSource }) => (\n {name}
\n \n \n \n \n )}\n
\n {address}
\n {rating && (\n \n
\n );\n};\n\nHotelDescription.defaultProps = {\n previewCharLimit: PREVIEW_CHAR_LIMIT,\n previewCharLimitInMobileView: PREVIEW_CHAR_LIMIT_IN_MOBILE_VIEW,\n hotelDescription: I18n.t('components.ibe.search_results.hotel.details_not_provided'),\n};\n\nHotelDescription.propTypes = {\n hotelDescription: PropTypes.string,\n previewCharLimit: PropTypes.number,\n previewCharLimitInMobileView: PropTypes.number,\n};\n\nexport default HotelDescription;\n","export const PREVIEW_CHAR_LIMIT = 500;\nexport const PREVIEW_CHAR_LIMIT_IN_MOBILE_VIEW = 200;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { I18nText } from '@wtag/react-comp-lib';\n\nconst HotelServices = ({ airportShuttle, wifi }) => {\n const services = [\n {\n serviceName: \n {I18n.t('components.ibe.hotel.details.description')}\n
\n {description}
\n \n
\n );\n};\n\nconst HotelConditions = ({ conditions }) => (\n \n
\n - \n {services.map(({ serviceName, serviceInfo }) => (\n
- \n {serviceName} ({serviceInfo})\n \n ))}\n
\n
\n);\n\nconst HotelAdditionalInformation = ({ hotelPolicies }) => (\n \n
\n - \n {conditions.map(condition => (\n
- \n {I18n.t(condition, {\n scope: 'components.ibe.hotel.conditions',\n })}\n \n ))}\n
\n
\n);\n\nconst HotelInformation = ({ facilities, hotelPolicies }) => {\n const { conditions, airportShuttle, wifi } = facilities;\n\n return (\n \n {I18n.t('components.ibe.search_results.hotel.additional_information')}\n
\n - \n
- {hotelPolicies} \n
\n
\n );\n};\n\nHotelInformation.propTypes = {\n facilities: PropTypes.shape({\n conditions: PropTypes.arrayOf(PropTypes.string),\n airportShuttle: PropTypes.shape({\n pickUp: PropTypes.string,\n dropOff: PropTypes.string,\n }),\n wifi: PropTypes.string,\n }).isRequired,\n hotelPolicies: PropTypes.string,\n};\n\nHotelInformation.defaultProps = { hotelPolicies: null };\n\nHotelConditions.propTypes = {\n conditions: PropTypes.arrayOf(PropTypes.string).isRequired,\n};\n\nHotelServices.propTypes = {\n airportShuttle: PropTypes.shape({\n pickUp: PropTypes.string,\n dropOff: PropTypes.string,\n }),\n wifi: PropTypes.string,\n};\n\nHotelServices.defaultProps = { airportShuttle: null, wifi: null };\n\nHotelAdditionalInformation.propTypes = {\n hotelPolicies: PropTypes.string,\n};\n\nHotelAdditionalInformation.defaultProps = { hotelPolicies: null };\n\nexport default HotelInformation;\n","import React from 'react';\nimport Card from '@wtag/rcl-card';\nimport ContentLoaderPlaceholder from '@wtag/rcl-content-loader-placeholder';\n\nconst LoadingScreen = () => (\n \n \n \n\n \n \n\n \n \n
\n);\n\nexport default LoadingScreen;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport requiredIf from 'react-required-if';\nimport Button from '@wtag/rcl-button';\nimport { I18nText } from '@wtag/react-comp-lib';\nimport { Link } from 'react-router-dom';\nimport Card from '@wtag/rcl-card';\nimport Map from '@wtag/rcl-map';\nimport { Accordion, AccordionItem } from '@wtag/rcl-accordion';\nimport HotelDefaultImage from 'agentSyncedImages/fallback_images/product/product_xxl_hotel.png';\nimport HotelRoomDefaultImage from 'agentSyncedImages/fallback_images/hotel-room-fallback.jpg'; // eslint-disable-line import/extensions\nimport searchURL from '../../../IBE/lib/helpers/searchURL';\nimport { parseQueryString } from '../../helpers/qsMethods';\nimport ImageGallery from './ImageGallery';\nimport history from '../../lib/history';\nimport Rooms from './Rooms';\nimport HotelAmenities from './HotelAmenities';\nimport HotelTitle from './HotelTitle';\nimport HotelDescription from './HotelDescription';\nimport HotelInformation from './HotelInformation';\nimport LoadingScreen from './LoadingScreen';\n\nimport './styles.scss';\n\nclass Details extends React.Component {\n constructor(props) {\n super(props);\n this.locationQuery = parseQueryString(props.location.search);\n this.state = {\n isMapAccordionActive: false,\n };\n }\n\n componentDidUpdate(prevProps) {\n if (this.props.location.search !== prevProps.location.search) {\n this.locationQuery = parseQueryString(this.props.location.search);\n }\n }\n\n continue = (roomId, justification) => {\n if (this.locationQuery.dealGroup) {\n return this.props.selectInMultiSearch(\n this.locationQuery.dealGroup,\n this.props.details,\n roomId,\n );\n }\n return this.props.addToCart(this.props.details, roomId, justification).then(cartItem => {\n history.push(`/carts/${cartItem.cartId}`);\n });\n };\n\n toggleMapAccordion = () => {\n this.setState(prevState => ({\n isMapAccordionActive: !prevState.isMapAccordionActive,\n }));\n };\n\n render() {\n if (!this.props.dataFetched) {\n return (\n \n
\n\n \n
\n\n \n \n \n
\n \n \n \n
\n \n
\n );\n }\n\n // geographical centre of all land surfaces on Earth: İskilip, Turkey\n const defaultMapCenter = { latitude: 40.73528, longitude: 34.47389 };\n\n const {\n searchId,\n hotelInformation,\n hotelFacilities,\n location,\n name,\n checkIn,\n checkOut,\n stars,\n durationOfStaying,\n requiredRooms,\n rooms,\n pictures,\n refundable,\n rating,\n ratingSource,\n } = this.props.details;\n\n const images = pictures.map(image => ({\n original: image.url,\n thumbnail: image.thumbnailUrl,\n }));\n if (images.length === 0) {\n images.push({\n original: HotelDefaultImage,\n thumbnail: HotelDefaultImage,\n });\n images.push({\n original: HotelRoomDefaultImage,\n thumbnail: HotelRoomDefaultImage,\n });\n }\n\n const { street, zip, city } = this.props.details.address;\n let address = street;\n if (zip || city) {\n address += ',';\n if (zip) {\n address += ` ${zip}`;\n }\n if (city) {\n address += ` ${city}`;\n }\n }\n\n const hotelMapCenter = () => {\n if (location) {\n return {\n latitude: location.lat,\n longitude: location.lon,\n };\n }\n return defaultMapCenter;\n };\n\n let hotelInformationForMap;\n if (location) {\n hotelInformationForMap = [\n {\n title: name,\n checkIn,\n checkOut,\n latitude: location.lat,\n longitude: location.lon,\n },\n ];\n }\n\n const ACCORDION = 'accordion';\n const CARD = 'card';\n\n const renderMap = key => (\n \n \n \n \n \n \n\n \n \n
\n );\n }\n}\n\nDetails.defaultProps = {\n details: null,\n};\n\nDetails.propTypes = {\n dataFetched: PropTypes.bool.isRequired,\n details: requiredIf(\n PropTypes.shape({\n pictures: PropTypes.arrayOf(\n PropTypes.shape({\n url: PropTypes.string.isRequired,\n thumbnailUrl: PropTypes.string.isRequired,\n }),\n ),\n id: PropTypes.string,\n searchId: PropTypes.string,\n placeId: PropTypes.number,\n stars: PropTypes.number,\n address: PropTypes.shape({\n street: PropTypes.string.isRequired,\n zip: PropTypes.string.isRequired,\n city: PropTypes.string.isRequired,\n }),\n name: PropTypes.string,\n hotelInformation: PropTypes.shape({\n beforeDepartureInformation: PropTypes.string,\n checkInInstructions: PropTypes.string,\n checkInTime: PropTypes.string,\n checkOutTime: PropTypes.string,\n propertyInformation: PropTypes.string,\n }),\n }),\n props => props.dataFetched,\n ),\n addToCart: PropTypes.func.isRequired,\n selectInMultiSearch: PropTypes.func.isRequired,\n location: PropTypes.shape({\n search: PropTypes.string,\n }).isRequired,\n};\n\nDetails.contextTypes = {\n laymanMode: PropTypes.bool.isRequired,\n};\n\nexport default Details;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport fetchOnUpdate from '../../lib/decorators/fetchOnUpdate';\nimport { fetchHotelDetails, addHotelToCart, fetchHotelSearchResults } from '../../actions/hotel';\nimport { selectHotelResultInMultiSearch, showError } from '../../actions/common';\n\nimport Details from './Details';\n\nconst mapStateToProps = (state, ownProps) => {\n const details = state.hotels.hotelDetailsByResultId[ownProps.match.params.resultId] || {};\n const stats = state.hotels.searchStatsBySearchId[details.searchId] || {};\n const results = state.hotels.searchResultsBySearchId[details.searchId] || [];\n return {\n dataFetched: !!Object.keys(details).length,\n details,\n stats,\n results,\n };\n};\n\nconst mapDispatchToProps = (dispatch, ownProps) => ({\n fetchDetails: id => dispatch(fetchHotelDetails(id, ownProps.callbackParams)),\n addToCart: (details, roomId, justification) =>\n dispatch(addHotelToCart(details, roomId, ownProps.callbackParams, justification)),\n selectInMultiSearch: (groupKey, result, roomId) =>\n dispatch(selectHotelResultInMultiSearch(groupKey, result, roomId, ownProps.callbackParams)),\n fetchHotelSearch: searchId => dispatch(fetchHotelSearchResults({ searchId })),\n showFetchError: () => dispatch(showError(I18n.t('components.ibe.hotel.detail_fetching_failed'))),\n});\n\nconst DetailsWithFetchOnUpdate = fetchOnUpdate(['resultId'], (params, props) => {\n props.fetchDetails(params.resultId).then(details => {\n if (details === null) {\n props.showFetchError();\n } else {\n props.fetchHotelSearch(details.searchId);\n }\n });\n})(Details);\n\nconst ConnectedDetails = connect(mapStateToProps, mapDispatchToProps)(DetailsWithFetchOnUpdate);\n\nconst DetailsWithContext = (props, context) => \n
\n \n
\n \n
\n\n \n
\n\n \n \n {renderMap(CARD)}\n \n
\n\n \n \n \n {renderMap(ACCORDION)}\n \n \n
\n \n {hotelInformation && hotelInformation.description && (\n
\n \n
\n )}\n\n \n
\n \n
\n\n \n
\n \n {taggedFilters.length > 0 ? (\n
\n );\n}\n\nFilterTags.propTypes = {\n onRemoveFilter: PropTypes.func.isRequired,\n currentFilters: PropTypes.objectOf(PropTypes.shape([])).isRequired,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Amount from 'sharedWebpack/Amount';\nimport Card from '@wtag/rcl-card';\nimport Button from '@wtag/rcl-button';\nimport SelectBox from '@wtag/rcl-select-box';\nimport RangeFilter from '../../../components/RangeFilter';\nimport FilterSection from '../../FilterSection';\nimport FilterTags from './FilterTags';\n\nimport './../styles.scss';\n\nclass FilterComponent extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n filterResetId: Math.random(),\n currentFilters: {\n categories: null,\n vendors: null,\n total_price: null,\n },\n isAllChecked: {\n categories: false,\n vendors: false,\n },\n };\n }\n\n resetFilters = () => {\n this.props.resetFilters(this.props.stats);\n this.setState({ filterResetId: Math.random() });\n this.setState({\n currentFilters: {\n categories: null,\n vendors: null,\n },\n });\n this.setState({\n isAllChecked: {\n categories: false,\n vendors: false,\n },\n });\n };\n\n resetTrip = key => {\n const newState = this.props.filterParams.price;\n\n const objectData = {\n changedData: newState,\n initialData: this.props.stats.price,\n key,\n };\n\n this.props.resetFiltersByKey(objectData);\n this.setState({ filterResetId: Math.random() });\n };\n\n resetData = section => {\n if (section === 'total_price') {\n this.resetTrip('total_price');\n this.setState({\n filterResetId: Math.random(),\n currentFilters: { ...this.state.currentFilters, [section]: null },\n });\n }\n\n this.setState({\n currentFilters: { ...this.state.currentFilters, [section]: null },\n });\n };\n\n selectGroup = group => {\n this.props.selectGroup(group).then(nextStep => this.doNextStep(nextStep));\n };\n\n resetSelectGroup = group => {\n this.props.resetSelectGroup(group).then(nextStep => this.doNextStep(nextStep));\n };\n\n render() {\n let totalPriceFilter;\n const stepValue = 0.001;\n\n if (this.props.results.length > 0) {\n totalPriceFilter = (\n \n
\n ) : null}\n \n {I18n.t('components.ibe.search_results.filters.active_filters')}\n
\n \n {!showAllTags\n ? taggedFilters.slice(0, 2).map(tag => (\n \n {selectedFilters[tag]}\n \n
\n
\n \n
\n {\n const isPriceEqual =\n values.max.toFixed(2) === this.props.stats.price.max.toFixed(2) &&\n values.min.toFixed(2) === this.props.stats.price.min.toFixed(2);\n\n this.setState({\n currentFilters: {\n ...this.state.currentFilters,\n total_price: isPriceEqual ? null : 'Total Price',\n },\n });\n\n this.props.filterResults('price', values);\n }}\n formatLabel={value =>
\n );\n }\n\n const filters = (\n \n {I18n.t('components.ibe.search_results.filters.price')}\n
\n\n \n
\n
\n \n
\n \n \n
\n );\n\n return \n
\n \n {I18n.t('components.ibe.search_results.filters.title')}\n
\n \n {\n this.resetData(section);\n }}\n />\n
\n\n \n {I18n.t('components.ibe.search_results.filters.sort_by')}\n this.props.filterResults('sortBy', event.value)}\n key={this.state.filterResetId}\n options={this.props.stats.availableSortOptions}\n value={this.props.stats.availableSortOptions.find(\n option => option.value === this.props.filterParams.sortBy,\n )}\n width=\"full\"\n isClearable={false}\n />\n
\n\n \n
\n
\n \n
\n {totalPriceFilter}\n\n {this.props.stats.categories && (\n \n this.setState({\n currentFilters: { ...this.state.currentFilters, categories: values },\n })\n }\n onAllChecked={values =>\n this.setState({\n isAllChecked: { ...this.state.isAllChecked, categories: values },\n })\n }\n />\n )}\n\n {this.props.stats.vendors && (\n \n this.setState({\n currentFilters: { ...this.state.currentFilters, vendors: values },\n })\n }\n onAllChecked={values =>\n this.setState({\n isAllChecked: { ...this.state.isAllChecked, vendors: values },\n })\n }\n isDividerVisible={false}\n />\n )}\n
\n {filters}
;\n }\n}\n\nFilterComponent.defaultProps = {\n stats: null,\n filterParams: null,\n};\n\nFilterComponent.propTypes = {\n selectedFlightGroups: PropTypes.shape({}).isRequired,\n selectGroup: PropTypes.func.isRequired,\n resetSelectGroup: PropTypes.func.isRequired,\n resetFilters: PropTypes.func.isRequired,\n resetFiltersByKey: PropTypes.func.isRequired,\n stats: PropTypes.shape({\n price: PropTypes.shape({\n min: PropTypes.number,\n max: PropTypes.number,\n }).isRequired,\n categories: PropTypes.arrayOf(PropTypes.string).isRequired,\n vendors: PropTypes.arrayOf(PropTypes.number).isRequired,\n availableSortOptions: PropTypes.arrayOf(\n PropTypes.shape({\n label: PropTypes.string.isRequired,\n value: PropTypes.string.isRequired,\n }),\n ).isRequired,\n }),\n results: PropTypes.arrayOf(PropTypes.shape()).isRequired,\n filterParams: PropTypes.shape({\n price: PropTypes.shape({\n min: PropTypes.number,\n max: PropTypes.number,\n }).isRequired,\n categories: PropTypes.arrayOf(PropTypes.string).isRequired,\n vendors: PropTypes.arrayOf(PropTypes.number).isRequired,\n sortBy: PropTypes.string.isRequired,\n }),\n params: PropTypes.shape({\n searchId: PropTypes.string,\n tripId: PropTypes.string,\n }).isRequired,\n filterResults: PropTypes.func.isRequired,\n currency: PropTypes.string.isRequired,\n};\n\nexport default FilterComponent;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { SidePanel, I18nText } from '@wtag/react-comp-lib';\nimport Card from '@wtag/rcl-card';\nimport Icon from '@wtag/rcl-icon';\nimport classNames from 'classnames';\nimport CarStandardView from './CarStandardView';\nimport CarCompactView from './CarCompactView';\nimport EmptyFilterAndResult from '../flight/SearchLoadingScreen/EmptyFilterAndResult';\nimport resultShape from './shapes/result';\nimport history from '../../lib/history';\nimport { parseQueryString } from '../../helpers/qsMethods';\n\nimport '../hotel/styles.scss';\nimport './styles.scss';\nimport FilterComponent from './Filter';\nimport { TYPE_STANDARD } from '../../../helpers/viewType';\n\nclass Results extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n openSidePanel: false,\n sidePanelTitle: null,\n sidePanelBody: null,\n numberOfResultsToShow: 10,\n };\n this.locationQuery = parseQueryString(props.location.search);\n }\n\n componentDidUpdate(prevProps) {\n if (this.props.location.search !== prevProps.location.search) {\n this.locationQuery = parseQueryString(this.props.location.search);\n }\n }\n\n onShowMoreClick = () => {\n this.setState({ numberOfResultsToShow: this.state.numberOfResultsToShow + 10 });\n };\n\n setSidePanelBody = body => {\n this.setState({ sidePanelBody: body });\n };\n\n setSidePanelTitle = title => {\n this.setState({ sidePanelTitle: title });\n };\n\n setOpenSidePanel = () => {\n this.setState({ openSidePanel: true });\n };\n\n hideSidePanel = () => {\n this.setState({ openSidePanel: false });\n };\n\n render() {\n let filters = null;\n let content = null;\n\n if (this.props.searchYieldedResults) {\n filters = (\n \n
\n );\n\n if (this.props.results.length) {\n const continueAction = (details, justification) => {\n if (this.locationQuery.dealGroup) {\n return this.props.selectInMultiSearch(this.locationQuery.dealGroup, details);\n }\n return this.props.addToCart(details, justification).then(cartItem => {\n history.push(`/carts/${cartItem.cartId}`);\n });\n };\n\n const CarView = this.props.viewMode === TYPE_STANDARD ? CarStandardView : CarCompactView;\n const results = this.props.results\n .slice(0, this.state.numberOfResultsToShow)\n .map(result => (\n \n {results}\n this.hideSidePanel()}\n />\n {this.props.results.length > this.state.numberOfResultsToShow && (\n
\n )}\n \n );\n } else {\n content = (\n \n \n
\n \n \n
\n
\n );\n }\n } else if (this.props.searchCompleted && !this.props.searchYieldedResults) {\n content = (\n \n
\n \n {this.props.searchCompleted ? (\n
\n );\n }\n}\n\nResults.defaultProps = {\n searchYieldedResults: false,\n searchCompleted: false,\n};\n\nResults.propTypes = {\n fetchAirportDetails: PropTypes.func.isRequired,\n selectedItemResultIds: PropTypes.arrayOf(PropTypes.string).isRequired,\n results: PropTypes.arrayOf(resultShape).isRequired,\n location: PropTypes.shape({\n search: PropTypes.string,\n }).isRequired,\n selectInMultiSearch: PropTypes.func.isRequired,\n addToCart: PropTypes.func.isRequired,\n searchYieldedResults: PropTypes.bool,\n searchCompleted: PropTypes.bool,\n airports: PropTypes.shape().isRequired,\n onCarSelect: PropTypes.func.isRequired,\n searchInformation: PropTypes.shape({\n airportSearch: PropTypes.bool,\n driverAge: PropTypes.number,\n dropOffDate: PropTypes.string,\n dropOffGeoLocationAddress: PropTypes.string,\n dropOffGeoLocationLatitude: PropTypes.number,\n dropOffGeoLocationLongitude: PropTypes.number,\n dropOffLocationAirportCode: PropTypes.string,\n dropOffTime: PropTypes.string,\n pickUpDate: PropTypes.string,\n pickUpGeoLocationAddress: PropTypes.string,\n pickUpGeoLocationLatitude: PropTypes.number,\n pickUpGeoLocationLongitude: PropTypes.number,\n pickUpLocationAirportCode: PropTypes.string,\n pickUpTime: PropTypes.string,\n }).isRequired,\n viewMode: PropTypes.string.isRequired,\n};\n\nexport default Results;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport memoizeLocationQuery from '../../helpers/memoizeLocationQuery';\nimport fetchOnUpdate from '../../lib/decorators/fetchOnUpdate';\nimport {\n fetchCarSearchResults,\n filterCarSearch,\n resetCarSearchFilters,\n resetCarSearchFiltersByKey,\n addCarToCart,\n carAdded,\n} from '../../actions/car';\nimport { fetchAirportDetails, selectCarResultInMultiSearch } from '../../actions/common';\n\nimport Results from './Results';\n\nconst mapStateToProps = (state, ownProps) => {\n const locationQuery = memoizeLocationQuery(ownProps.location.search);\n const searchId = ownProps.match.params.searchId;\n const results = state.cars.searchResultsBySearchId[searchId] || [];\n const currency = (results.length && results[0].currency) || '';\n const selectedItemResultIds = state.common.cart.items.map(\n item => item.bookingAttributes.resultId,\n );\n\n let searchParamsId = 'lastSearch';\n\n if (searchId && !locationQuery.cached && state.cars.searchParamsBySearchId[searchId]) {\n searchParamsId = searchId;\n }\n\n const searchInformation = state.cars.searchParamsBySearchId[searchParamsId];\n const airports = state.common.airports;\n\n return {\n results,\n stats: state.cars.searchStatsBySearchId[searchId],\n filterParams: state.cars.searchFilterParamsBySearchId[searchId],\n searchYieldedResults: state.cars.totalResultsBySearchId[searchId] > 0,\n searchCompleted: !!state.cars.searchResultsBySearchId[searchId],\n currency,\n searchInformation,\n airports,\n selectedItemResultIds,\n };\n};\nconst mapDispatchToProps = (dispatch, ownProps) => ({\n fetchResults: searchId => dispatch(fetchCarSearchResults({ searchId })),\n filterResults: (filter, value) =>\n dispatch(filterCarSearch(filter, value, ownProps.match.params.searchId)),\n resetFilters: stats => dispatch(resetCarSearchFilters(ownProps.match.params.searchId, stats)),\n resetFiltersByKey: stats => {\n dispatch(resetCarSearchFiltersByKey(ownProps.match.params.searchId, stats));\n },\n addToCart: (details, justification) =>\n dispatch(addCarToCart(details, ownProps.callbackParams, justification)),\n selectInMultiSearch: (groupKey, result) =>\n dispatch(selectCarResultInMultiSearch(groupKey, result, ownProps.callbackParams)),\n fetchAirportDetails: id => dispatch(fetchAirportDetails(id)),\n onCarSelect: isCarAdded => dispatch(carAdded(isCarAdded)),\n});\n\nconst ResultsWithFetchOnUpdate = fetchOnUpdate(['searchId'], (params, props) => {\n if (params.searchId) {\n props.fetchResults(params.searchId);\n }\n})(Results);\n\nconst ConnectedResults = connect(mapStateToProps, mapDispatchToProps)(ResultsWithFetchOnUpdate);\n\nconst ResultsWithContext = (props, context) => \n
\n ) : (\n \n {filters ? (\n
\n \n {filters}\n
\n ) : null}\n \n
\n {content}
\n \n
\n );\n};\n\nPreselectTravelersForm.defaultProps = {\n type: null,\n traveler: null,\n formType: TYPE_FLIGHT,\n};\n\nPreselectTravelersForm.propTypes = {\n onDeleteClick: PropTypes.func.isRequired,\n onChangeTraveler: PropTypes.func.isRequired,\n onTypeChange: PropTypes.func.isRequired,\n traveler: PropTypes.shape({}),\n type: PropTypes.shape({}),\n count: PropTypes.string.isRequired,\n isDeleteDisabled: PropTypes.bool.isRequired,\n callbackParams: PropTypes.shape({\n laymanMode: PropTypes.bool,\n order_id: PropTypes.string,\n }).isRequired,\n formType: PropTypes.string,\n};\n\nexport default PreselectTravelersForm;\n","export const DECISION_SELF = 'self';\nexport const DECISION_GUEST = 'guest';\n","import routes from 'agentRoutes';\nimport httpClient from 'agentHTTPClient';\nimport { useEffect, useState } from 'react';\nimport { TYPE_ADULT, TYPE_CHILD, TYPE_INFANT } from '../../../helpers/passengerTypes';\nimport { DECISION_SELF } from '../../../helpers/decisionTypes';\n\nconst usePreselectTraveler = ({\n laymanMode,\n travelerLoggedIn,\n preselectDecision,\n preselectTravelers,\n callbackParams,\n updatePreselectTravelers,\n adults = 1,\n children = 0,\n infants = 0,\n shouldPreselect = true,\n}) => {\n const [currentTraveler, setCurrentTraveler] = useState({});\n const preselectTravelersLength = preselectTravelers.length;\n\n const orderOwnerPresent = !laymanMode && callbackParams && callbackParams.order_id;\n const currentCustomerRetrievable =\n (travelerLoggedIn || orderOwnerPresent) && preselectTravelersLength === 0;\n\n const fetchCurrentUser = async () => {\n const { data } = await httpClient.get(routes.api.customers.currentCustomer({ callbackParams }));\n setCurrentTraveler(data);\n };\n\n const getInitialTravelers = (isAdultOptionDisabled = true) => {\n if (preselectDecision === DECISION_SELF && currentTraveler && currentTraveler.id) {\n return [\n {\n traveler: {\n value: currentTraveler,\n label: currentTraveler.infoDropdownTitle,\n },\n type: {\n label: I18n.t('components.ibe.preselect_traveler.label.type.adult'),\n value: TYPE_ADULT,\n isDisabled: isAdultOptionDisabled,\n },\n },\n ];\n }\n\n return [{}];\n };\n\n const updatePreselectTravelersStore = travelers => {\n const travelersData =\n travelers && Object.keys(travelers[0]).length ? travelers : getInitialTravelers();\n\n const travelersWithData = travelersData.filter(\n traveler => traveler.traveler && traveler.traveler.value,\n );\n const travelersWithType = travelersWithData.filter(\n traveler => traveler.type && traveler.type.value,\n );\n updatePreselectTravelers(travelersWithType);\n\n return travelersWithType;\n };\n\n const getFilteredTravelers = () => {\n const adultTravelers = preselectTravelers\n .filter(traveler => traveler.type && traveler.type.value === TYPE_ADULT)\n .slice(0, adults);\n const childTravelers = preselectTravelers\n .filter(traveler => traveler.type && traveler.type.value === TYPE_CHILD)\n .slice(0, children);\n const infantTravelers = preselectTravelers\n .filter(traveler => traveler.type && traveler.type.value === TYPE_INFANT)\n .slice(0, infants);\n const filteredTravelers = [...adultTravelers, ...childTravelers, ...infantTravelers];\n\n return filteredTravelers;\n };\n\n useEffect(() => {\n if (shouldPreselect) {\n updatePreselectTravelers(getFilteredTravelers());\n }\n }, [adults, children, infants]);\n\n useEffect(() => {\n if (currentCustomerRetrievable && shouldPreselect) {\n fetchCurrentUser();\n }\n }, [callbackParams, travelerLoggedIn]);\n\n useEffect(() => {\n if (\n preselectTravelersLength === 0 &&\n currentTraveler &&\n currentTraveler.id &&\n shouldPreselect\n ) {\n updatePreselectTravelersStore();\n }\n }, [preselectDecision, currentTraveler]);\n\n return {\n currentTraveler,\n setCurrentTraveler,\n updatePreselectTravelersStore,\n getFilteredTravelers,\n getInitialTravelers,\n };\n};\n\nexport default usePreselectTraveler;\n","import React, { useEffect, useState, Fragment } from 'react';\nimport { createPortal } from 'react-dom';\nimport PropTypes from 'prop-types';\nimport { Link, SidePanel, Radio } from '@wtag/react-comp-lib';\nimport Button from '@wtag/rcl-button';\nimport Tooltip from '@wtag/rcl-tooltip';\nimport snakeCaseKeys from 'snakecase-keys';\nimport routes from 'agentRoutes';\nimport httpClient from 'agentHTTPClient';\nimport {\n addToCollection,\n updateCollection,\n removeFromCollection,\n itemCounter,\n} from 'sharedWebpack/MultipleForm/multipleForm';\nimport PreselectTravelersForm from './PreselectTravelersForm';\nimport { TYPE_CAR } from '../../../helpers/itemTypes';\nimport { DECISION_GUEST, DECISION_SELF } from '../../../helpers/decisionTypes';\nimport usePreselectTraveler from '../../helpers/hooks/usePreselectTraveler';\nimport './styles.scss';\n\nconst PreselectTravelersSidePanel = ({\n laymanMode,\n travelerLoggedIn,\n adults,\n children,\n infants,\n callbackParams,\n updatePreselectTravelers,\n preselectTravelers,\n type,\n preselectDecision,\n updatePreselectDecision,\n resetBookingAppContext,\n updatePreselectedTravelersBookingAppContext,\n setIsPreselectTravellerVisible,\n onAdultChange,\n onChildrenChange,\n onInfantChange,\n selectedTotalNumberOfTravelers,\n}) => {\n const {\n currentTraveler,\n updatePreselectTravelersStore,\n getFilteredTravelers,\n getInitialTravelers,\n } = usePreselectTraveler({\n laymanMode,\n travelerLoggedIn,\n preselectDecision,\n preselectTravelers,\n callbackParams,\n updatePreselectTravelers,\n resetBookingAppContext,\n adults,\n children,\n infants,\n });\n const [isVisible, setIsVisible] = useState(false);\n const [travelers, setTravelers] = useState([{}]);\n const MAX_TRAVELER_COUNT = 9;\n const isAddMoreTravelerDisabled = travelers.length >= MAX_TRAVELER_COUNT || type === TYPE_CAR;\n const totalAdults = travelers.filter(\n traveler => traveler.type && traveler.type.value === 'adult',\n );\n const totalChildren = travelers.filter(\n traveler => traveler.type && traveler.type.value === 'child',\n );\n const totalInfants = travelers.filter(\n traveler => traveler.type && traveler.type.value === 'infant',\n );\n const totalNumberOfTravelerOnSidePanel =\n totalAdults.length + totalChildren.length + totalInfants.length;\n\n const isAdultOptionDisabled = totalAdults.length === adults;\n const isDecisionSelf = preselectDecision === DECISION_SELF;\n const isDecisionGuest = preselectDecision === DECISION_GUEST;\n const preselectTravelersLength = preselectTravelers.length;\n const isDisabled = laymanMode && !travelerLoggedIn;\n\n const FIRST_TRAVELER_INDEX = 0;\n\n const showPreselectTraveller = () => {\n setIsVisible(true);\n setIsPreselectTravellerVisible(true);\n };\n\n const preselectButton = (\n \n
\n \n {I18n.t('components.ibe.preselect_traveler.label.travelers_counter', {\n count,\n })}\n
\n \n
\n \n \n {preselectTravelersLength > 0\n ? I18n.t('components.ibe.preselect_traveler.label.button', {\n count: preselectTravelersLength,\n })\n : I18n.t('components.ibe.preselect_traveler.title')}\n \n
\n );\n\n const updateBookingAppContextOnPreselectTravlers = async filteredTravelers => {\n const owner = filteredTravelers[0].traveler.value;\n const ownerId = owner.id;\n const { data } = await httpClient.get(\n routes.admin.preselectTravelersProperties({ id: ownerId }),\n );\n const preselectTravelerIds = filteredTravelers.map(\n filteredTraveler => filteredTraveler.traveler.value.id,\n );\n const preselectedTravelersBookingAppContext = {\n preselectTravelerIds,\n ownerId,\n isOwnerPresent: !!owner,\n ownerAge: owner.age,\n allowBookingOfUnapprovedItems: data.allowBookingOfUnapprovedItems,\n citizenshipCountryCode: data.citizenshipCountryCode,\n globalPolicyPreferences: data.globalPolicyPreferences,\n searchAccounts: snakeCaseKeys(data.searchAccounts, { deep: true }),\n };\n\n updatePreselectedTravelersBookingAppContext(preselectedTravelersBookingAppContext);\n };\n\n const updatePreselectTravelersStoreWithContext = () => {\n const travelersWithType = updatePreselectTravelersStore(travelers);\n\n if (travelersWithType.length > 0 && !laymanMode) {\n updateBookingAppContextOnPreselectTravlers(travelersWithType);\n } else {\n resetBookingAppContext();\n }\n };\n\n const onSidePanelClose = () => {\n updatePreselectTravelersStoreWithContext();\n setIsVisible(false);\n setIsPreselectTravellerVisible(false);\n if (selectedTotalNumberOfTravelers <= totalNumberOfTravelerOnSidePanel) {\n onAdultChange(Math.max(1, totalAdults.length));\n onChildrenChange(totalChildren.length);\n onInfantChange(totalInfants.length);\n }\n };\n\n const restorePreviouslySelected = () => {\n if (preselectTravelersLength > 0) {\n setTravelers(preselectTravelers);\n } else {\n setTravelers([{}]);\n }\n };\n\n const initialTravelers = [];\n\n const travelerTypes = [\n { label: I18n.t('components.ibe.preselect_traveler.label.type.adult'), value: 'adult' },\n { label: I18n.t('components.ibe.preselect_traveler.label.type.child'), value: 'child' },\n { label: I18n.t('components.ibe.preselect_traveler.label.type.infant'), value: 'infant' },\n ];\n\n const filterPreselectTravelers = () => {\n const filteredTravelers = getFilteredTravelers();\n\n if (filteredTravelers.length > 0) {\n setTravelers(filteredTravelers);\n updatePreselectTravelers(filteredTravelers);\n } else {\n setTravelers(initialTravelers);\n updatePreselectTravelers([]);\n }\n };\n\n useEffect(() => {\n setTravelers(getInitialTravelers(isAdultOptionDisabled));\n }, [preselectDecision, currentTraveler]);\n\n useEffect(() => {\n if (preselectTravelersLength === 0 && currentTraveler && currentTraveler.id) {\n updatePreselectTravelersStoreWithContext();\n }\n }, [travelers]);\n\n useEffect(() => {\n restorePreviouslySelected();\n }, [type]);\n\n useEffect(() => {\n filterPreselectTravelers();\n [adults, children, infants].forEach((count, index) => {\n for (let travelerIndex = 0; travelerIndex < count; travelerIndex += 1) {\n initialTravelers.push({\n type: travelerTypes[index],\n });\n }\n });\n }, [adults, children, infants]);\n\n return (\n \n {I18n.t('components.ibe.preselect_traveler.header')}\n
\n \n {I18n.t('components.ibe.preselect_traveler.label.travelers', {\n count: travelers.length,\n })}\n
\n \n {laymanMode && (\n \n \n event.target.checked\n ? updatePreselectDecision(DECISION_GUEST)\n : updatePreselectDecision(DECISION_SELF)\n }\n checked={isDecisionGuest}\n label={I18n.t('components.ibe.preselect_traveler.label.book_for.guest')}\n />\n \n )}\n {travelers.map((item, index) => (\n removeFromCollection(setTravelers, index)}\n traveler={item.traveler}\n onChangeTraveler={value =>\n updateCollection(setTravelers, index, 'traveler', value)\n }\n onTypeChange={value => updateCollection(setTravelers, index, 'type', value)}\n type={item.type}\n count={itemCounter(index)}\n isDeleteDisabled={index === FIRST_TRAVELER_INDEX}\n callbackParams={callbackParams}\n formType={type}\n />\n ))}\n
\n }\n isOpened={isVisible}\n onClick={onSidePanelClose}\n />,\n document.body,\n )}\n \n );\n};\n\nPreselectTravelersSidePanel.defaultProps = {\n adults: 1,\n children: 0,\n infants: 0,\n updatePreselectedTravelersBookingAppContext: () => {},\n resetBookingAppContext: () => {},\n setIsPreselectTravellerVisible: () => {},\n onAdultChange: () => {},\n onChildrenChange: () => {},\n onInfantChange: () => {},\n selectedTotalNumberOfTravelers: 1,\n};\n\nPreselectTravelersSidePanel.propTypes = {\n laymanMode: PropTypes.bool.isRequired,\n travelerLoggedIn: PropTypes.bool.isRequired,\n adults: PropTypes.number,\n children: PropTypes.number,\n infants: PropTypes.number,\n callbackParams: PropTypes.shape({\n laymanMode: PropTypes.bool,\n order_id: PropTypes.string,\n }).isRequired,\n updatePreselectTravelers: PropTypes.func.isRequired,\n preselectTravelers: PropTypes.arrayOf(\n PropTypes.shape({\n traveler: PropTypes.shape({\n value: PropTypes.shape({\n firstName: PropTypes.string.isRequired,\n middleName: PropTypes.string,\n lastName: PropTypes.string.isRequired,\n phoneNumbers: PropTypes.arrayOf(PropTypes.string).isRequired,\n emailAddresses: PropTypes.arrayOf(PropTypes.string).isRequired,\n age: PropTypes.number.isRequired,\n }),\n }),\n }),\n ).isRequired,\n type: PropTypes.string.isRequired,\n updatePreselectDecision: PropTypes.func.isRequired,\n preselectDecision: PropTypes.string.isRequired,\n updatePreselectedTravelersBookingAppContext: PropTypes.func,\n resetBookingAppContext: PropTypes.func,\n setIsPreselectTravellerVisible: PropTypes.func,\n onAdultChange: PropTypes.func,\n onChildrenChange: PropTypes.func,\n onInfantChange: PropTypes.func,\n selectedTotalNumberOfTravelers: PropTypes.number,\n};\n\nexport default PreselectTravelersSidePanel;\n","import React from 'react';\nimport { connect } from 'react-redux';\nimport PropTypes from 'prop-types';\nimport { injectIntl } from 'react-intl';\n\nimport {\n updatePreselectTravelers,\n updatePreselectDecision,\n} from '../../actions/common/preselectTraveler';\nimport PreselectTravelersSidePanel from './PreselectTravelersSidePanel';\n\nconst mapStateToProps = (state, props) => {\n let params;\n const flightSearchForm = state.form && state.form.flightSearchForm;\n const hotelSearchForm = state.form && state.form.hotelSearchForm;\n switch (props.type) {\n case 'flight':\n params = {\n adults: flightSearchForm && flightSearchForm.adults && flightSearchForm.adults.value,\n children: flightSearchForm && flightSearchForm.children && flightSearchForm.children.value,\n infants: flightSearchForm && flightSearchForm.infants && flightSearchForm.infants.value,\n };\n break;\n case 'hotel':\n params = {\n adults: hotelSearchForm && hotelSearchForm.adults && hotelSearchForm.adults.value,\n children: hotelSearchForm && hotelSearchForm.children && hotelSearchForm.children.value,\n };\n break;\n case 'car':\n // since car does not require adults, children and infant to search we will be taking 1 adult traveler just for driver.\n params = { adults: 1 };\n break;\n default:\n }\n\n return {\n ...params,\n preselectTravelers: state.common.preselectTravelers.travelers,\n preselectDecision: state.common.preselectTravelers.decision,\n cartHasItems: state.common.cart.items.length > 0,\n };\n};\n\nconst mapDispatchToProps = dispatch => ({\n updatePreselectTravelers: travelers => dispatch(updatePreselectTravelers(travelers)),\n updatePreselectDecision: travelers => dispatch(updatePreselectDecision(travelers)),\n});\n\nconst PreselectTravelersSidePanelWithContext = (props, context) => (\n \n \n event.target.checked\n ? updatePreselectDecision(DECISION_SELF)\n : updatePreselectDecision(DECISION_GUEST)\n }\n checked={isDecisionSelf}\n label={I18n.t('components.ibe.preselect_traveler.label.book_for.self')}\n />\n
\n \n addToCollection(setTravelers)}\n modifier=\"default\"\n size=\"tiny\"\n disabled={isAddMoreTravelerDisabled}\n >\n {I18n.t('components.ibe.preselect_traveler.label.add_more')}\n \n
\n \n
\n \n \n \n \n
\n \n {I18n.t('components.ibe.search_form.hotel.search.title')}\n
\n\n \n
\n \n \n \n {numberOfRooms.error}\n \n \n \n
\n \n
\n \n
\n \n {I18n.t('components.ibe.search_form.hotel.label.rooms')}\n
\n \n \n \n {adults.error}\n \n \n {I18n.t('components.ibe.search_form.error.change_number_of_travelers')}\n \n \n \n
\n \n
\n {children.value > 0 && (\n \n
\n \n {I18n.t('admin.components.organizations.overview.tabs.traveller.title')}\n
\n {isPreSelectTravelerButtonVisible && (\n \n
\n \n {I18n.t('components.ibe.search_form.hotel.label.adults')}\n\n
\n \n {I18n.t('components.ibe.search_form.hotel.label.adults_age_range')}\n
\n \n
\n \n {I18n.t('components.ibe.search_form.hotel.label.children')}\n
\n \n {I18n.t('components.ibe.search_form.hotel.label.children_age_range')}\n
\n \n {I18n.t('components.ibe.search_form.traveler_note')}\n
\n \n \n {childrenData.map(({ age }, index) => (\n
\n )}\n \n \n selectedOption && age.onChange(selectedOption.value)\n }\n value={getSelectValueByAge(age)}\n size=\"tiny\"\n width=\"full\"\n label={I18n.t('components.ibe.search_form.hotel.label.child_age', {\n count: itemCounter(index),\n })}\n errorMsg={age.touched && age.error}\n isClearable={false}\n />\n
\n ))}\n \n
\n \n );\n};\n\nSearchForm.defaultProps = {\n laymanMode: false,\n searchAccounts: null,\n selectAll: true,\n setIsCollapsed: () => {},\n resetBookingAppContext: () => {},\n};\n\nSearchForm.propTypes = {\n searchHotels: PropTypes.func.isRequired,\n fields: PropTypes.shape({\n checkIn: PropTypes.shape({\n onChange: PropTypes.func.isRequired,\n touched: PropTypes.bool,\n error: PropTypes.arrayOf(PropTypes.shape()),\n value: PropTypes.string,\n }),\n checkOut: PropTypes.shape({\n onChange: PropTypes.func.isRequired,\n touched: PropTypes.bool,\n error: PropTypes.arrayOf(PropTypes.shape()),\n value: PropTypes.string,\n }),\n address: PropTypes.shape({\n onChange: PropTypes.func.isRequired,\n touched: PropTypes.bool,\n error: PropTypes.arrayOf(PropTypes.shape()),\n value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n }),\n latitude: PropTypes.shape({\n onChange: PropTypes.func.isRequired,\n value: PropTypes.number.isRequired,\n }),\n longitude: PropTypes.shape({\n onChange: PropTypes.func.isRequired,\n }),\n children: PropTypes.shape({\n onChange: PropTypes.func.isRequired,\n touched: PropTypes.bool,\n value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n }),\n childrenData: PropTypes.arrayOf(\n PropTypes.shape({\n onChange: PropTypes.func.isRequired,\n }),\n ),\n numberOfRooms: PropTypes.shape({\n onChange: PropTypes.func.isRequired,\n touched: PropTypes.bool,\n error: PropTypes.arrayOf(PropTypes.shape()),\n value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n valid: PropTypes.bool,\n }),\n adults: PropTypes.shape({\n onChange: PropTypes.func.isRequired,\n touched: PropTypes.bool,\n error: PropTypes.arrayOf(PropTypes.shape()),\n value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n valid: PropTypes.bool,\n }),\n accountSettings: PropTypes.shape({\n cars: PropTypes.arrayOf(PropTypes.string),\n hotels: PropTypes.arrayOf(PropTypes.string),\n flights: PropTypes.arrayOf(PropTypes.string),\n }),\n }).isRequired,\n forceAdvancedSearch: PropTypes.bool.isRequired,\n submitting: PropTypes.bool.isRequired,\n handleSubmit: PropTypes.func.isRequired,\n cartHasItems: PropTypes.bool.isRequired,\n availableChannels: availableChannelsShape.isRequired, // eslint-disable-line react/no-typos\n laymanMode: PropTypes.bool,\n defaultSearchParams: PropTypes.shape({}).isRequired,\n cartOverrides: PropTypes.shape({}).isRequired,\n initializeForm: PropTypes.func.isRequired,\n pristine: PropTypes.bool.isRequired,\n searchAccounts: searchAccountsShape,\n selectAll: PropTypes.string,\n toggleSelectAll: PropTypes.func.isRequired,\n resetApp: PropTypes.func.isRequired,\n searchForm: PropTypes.shape({\n accountSettings: searchAccountsShape.hotel,\n }).isRequired,\n preselectTravelers: PropTypes.arrayOf(\n PropTypes.shape({\n traveler: PropTypes.shape({\n value: PropTypes.shape({\n firstName: PropTypes.string.isRequired,\n middleName: PropTypes.string,\n lastName: PropTypes.string.isRequired,\n phoneNumbers: PropTypes.arrayOf(PropTypes.string).isRequired,\n emailAddresses: PropTypes.arrayOf(PropTypes.string).isRequired,\n age: PropTypes.number.isRequired,\n }),\n }),\n }),\n ).isRequired,\n setIsCollapsed: PropTypes.func,\n formWithoutChildren: PropTypes.bool.isRequired,\n selectGds: PropTypes.bool.isRequired,\n selectDirect: PropTypes.bool.isRequired,\n toggleSelectGds: PropTypes.func.isRequired,\n toggleSelectDirect: PropTypes.func.isRequired,\n resetBookingAppContext: PropTypes.func,\n travelArrangerPresent: PropTypes.bool.isRequired,\n travelerLoggedIn: PropTypes.bool.isRequired,\n preselectDecision: PropTypes.string.isRequired,\n callbackParams: PropTypes.shape().isRequired,\n updatePreselectTravelers: PropTypes.func.isRequired,\n};\n\nexport default SearchForm;\n","const generateCartOverrides = (itemCount, travelerCount, type) => {\n const { adults, children, infants } = travelerCount;\n const cartHasItems = itemCount > 0;\n\n if (cartHasItems && typeof adults !== 'undefined') {\n let cartOverrides;\n if (type === 'flight') {\n cartOverrides = {\n adults: adults.length,\n children: children.length,\n infants: infants.length,\n };\n } else {\n const childrenCount = children.length + infants.length;\n cartOverrides = {\n adults: adults.length,\n children: childrenCount,\n childrenData: new Array(childrenCount).fill({}),\n };\n }\n\n return cartOverrides;\n }\n\n return {};\n};\n\nexport default generateCartOverrides;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { reduxForm } from 'redux-form';\nimport { injectIntl } from 'react-intl';\nimport moment from 'moment';\nimport { startFromCart, endFromCart } from '../../lib/datesFromCart';\n\nimport { validateAllSearchParams } from './helpers/validate';\n\nimport SearchForm from './SearchForm';\n\nimport deepClone from '../../lib/deepClone';\nimport searchAccountValues from '../../helpers/searchAccountValues';\nimport generateCartOverrides from '../../helpers/generateCartOverrides';\nimport { searchHotels } from '../../actions/hotel';\nimport { resetApp } from '../../actions/common';\n\nconst initialFields = [\n 'checkIn',\n 'checkOut',\n 'numberOfRooms',\n 'adults',\n 'children',\n 'childrenData[].age',\n 'latitude',\n 'longitude',\n 'address',\n];\n\nconst reduxFormConfig = {\n form: 'hotelSearchForm',\n destroyOnUnmount: false,\n fields: [],\n};\n\nconst mapStateToProps = (state, ownProps) => {\n const infants = state.common.travelerCount.infants;\n const infantCount = typeof infants !== 'undefined' && infants ? infants.length : 0;\n const allTravelerIds =\n ownProps.callbackParams && ownProps.callbackParams.all_traveler_ids\n ? ownProps.callbackParams.all_traveler_ids\n : [];\n const fields = deepClone(initialFields);\n const cartOverrides = generateCartOverrides(\n state.common.cart.items.length,\n state.common.travelerCount,\n 'hotel',\n );\n if (ownProps.searchAccounts && ownProps.searchAccounts.hotels) {\n Object.keys(ownProps.searchAccounts.hotels).forEach(key =>\n fields.push(`accountSettings.${key}`),\n );\n }\n const startDateFromCart = startFromCart(state);\n const endDateFromCart = endFromCart(state);\n\n const defaultSearchParams = {\n accountSettings: searchAccountValues(ownProps.searchAccounts.hotels),\n adults: allTravelerIds.length > 0 ? allTravelerIds.length : 1,\n children: 0,\n childrenData: [],\n numberOfRooms: allTravelerIds.length > 0 ? allTravelerIds.length : 1,\n checkIn:\n startDateFromCart ||\n state.hotels.defaultHotelSearchParams.checkIn ||\n moment()\n .add(7, 'days')\n .startOf('day')\n .format('YYYY-MM-DD'),\n checkOut: endDateFromCart || state.hotels.defaultHotelSearchParams.checkOut,\n };\n\n const searchForm = state.form.hotelSearchForm;\n const preselectTravelers = state.common.preselectTravelers.travelers;\n\n return {\n fields,\n cartHasItems: state.common.cart.items.length > 0,\n initialValues: {\n ...defaultSearchParams,\n ...ownProps.searchParams,\n ...state.hotels.defaultHotelSearchParams,\n ...cartOverrides,\n },\n validate: validateAllSearchParams(\n ownProps.availableChannels.hotels,\n ownProps.minHoursInFuture,\n infantCount,\n ),\n defaultSearchParams,\n cartOverrides,\n searchForm,\n preselectTravelers,\n };\n};\n\nconst mapDispatchToProps = dispatch => ({\n searchHotels: (params, callbacks) => dispatch(searchHotels(params, callbacks)),\n resetApp: () => dispatch(resetApp('/hotels')),\n});\n\nconst ReduxForm = reduxForm(reduxFormConfig, mapStateToProps, mapDispatchToProps)(SearchForm);\n\nconst SearchFormWithContext = (props, context) => \n \n \n {I18n.t('components.ibe.search_form.car.label.title')}\n \n
\n )}\n \n \n
\n \n
\n \n \n \n {I18n.t('components.ibe.search_form.error.change_number_of_travelers')}\n \n \n \n
\n \n
\n \n
\n \n {I18n.t('components.ibe.search_form.car.label.driver')}\n
\n {isPreSelectTravelerButtonVisible && (\n \n
\n \n {I18n.t('components.ibe.search_form.car.label.adults')}\n
\n \n
\n \n
\n \n
\n \n \n
\n \n filter.value === vendorPreferences.type.value,\n )}\n isDisabled={\n disableVendorPreference || vendorPreferences.codes.value.length <= 0\n }\n options={filterTypeOptions}\n onChange={selectedOption =>\n vendorPreferences.type.onChange(\n selectedOption ? selectedOption.value : '',\n )\n }\n placeholderText={I18n.t('components.ibe.search_form.car.label.filter_type')}\n isClearable={false}\n />\n
\n \n vendorPreferences.codes.onChange(value || [])}\n errorMsg={\n vendorPreferences.codes.error && vendorPreferences.codes.error[0]\n }\n isMulti={true}\n width=\"full\"\n size=\"tiny\"\n placeholderText={I18n.t(\n 'components.ibe.search_form.car.label.choose_vendor',\n )}\n isDisabled={disableVendorPreference}\n />\n
\n \n {airportSearch.value ? (\n \n
\n \n
\n ) : (\n \n
\n \n
\n \n \n
\n \n \n onDateRangeChange(date)}\n startDatePlaceholderText={I18n.t(\n 'components.ibe.search_form.car.label.pick_up.date',\n )}\n endDatePlaceholderText={I18n.t(\n 'components.ibe.search_form.car.label.drop_off.date',\n )}\n canSelectPastDates={false}\n fullWidth={true}\n startDate={pickUpDate.value}\n endDate={dropOffDate.value}\n error={showInvalidDateError(pickUpDate) || showInvalidDateError(dropOffDate)}\n isBoundToAYear={false}\n />\n
\n\n \n \n \n selectedOption && pickUpTime.onChange(selectedOption.value)\n }\n errorMsg={pickUpTime.touched && pickUpTime.error}\n value={findTimeSelectBoxValue(pickUpTime.value)}\n isClearable={false}\n size=\"small\"\n />\n
\n \n
\n \n {I18n.t('components.ibe.search_form.flight.label.reset')}\n \n \n \n );\n};\n\nSearchForm.defaultProps = {\n laymanMode: false,\n searchAccounts: null,\n selectAll: true,\n setIsCollapsed: () => {},\n resetBookingAppContext: () => {},\n};\n\nSearchForm.propTypes = {\n forceAdvancedSearch: PropTypes.bool.isRequired,\n createCarSearch: PropTypes.func.isRequired,\n cartHasCar: PropTypes.bool.isRequired,\n fields: PropTypes.shape({\n airportSearch: PropTypes.shape({\n onChange: PropTypes.func.isRequired,\n value: PropTypes.string.isRequired,\n }).isRequired,\n pickUpLocationAirportCode: PropTypes.shape({\n onChange: PropTypes.func.isRequired,\n touched: PropTypes.bool.isRequired,\n error: PropTypes.arrayOf(PropTypes.shape()).isRequired,\n value: PropTypes.string.isRequired,\n }).isRequired,\n pickUpTime: PropTypes.shape({\n onChange: PropTypes.func.isRequired,\n touched: PropTypes.bool.isRequired,\n error: PropTypes.arrayOf(PropTypes.shape()).isRequired,\n value: PropTypes.string.isRequired,\n }).isRequired,\n dropOffTime: PropTypes.shape({\n onChange: PropTypes.func.isRequired,\n touched: PropTypes.bool.isRequired,\n error: PropTypes.arrayOf(PropTypes.shape()).isRequired,\n value: PropTypes.string.isRequired,\n }).isRequired,\n driverAge: PropTypes.shape({\n onChange: PropTypes.func.isRequired,\n touched: PropTypes.bool.isRequired,\n error: PropTypes.arrayOf(PropTypes.shape()).isRequired,\n value: PropTypes.string.isRequired,\n valid: PropTypes.bool,\n }).isRequired,\n pickUpDate: PropTypes.shape({\n onChange: PropTypes.func.isRequired,\n touched: PropTypes.bool.isRequired,\n error: PropTypes.arrayOf(PropTypes.shape()).isRequired,\n value: PropTypes.string.isRequired,\n }).isRequired,\n pickUpGeoLocationAddress: PropTypes.shape({\n onChange: PropTypes.func.isRequired,\n touched: PropTypes.bool.isRequired,\n error: PropTypes.arrayOf(PropTypes.shape()).isRequired,\n value: PropTypes.string.isRequired,\n }).isRequired,\n pickUpGeoLocationLatitude: PropTypes.shape({\n onChange: PropTypes.func.isRequired,\n value: PropTypes.number.isRequired,\n }).isRequired,\n pickUpGeoLocationLongitude: PropTypes.shape({\n onChange: PropTypes.func.isRequired,\n }).isRequired,\n dropOffDate: PropTypes.shape({\n onChange: PropTypes.func.isRequired,\n touched: PropTypes.bool.isRequired,\n error: PropTypes.arrayOf(PropTypes.shape()).isRequired,\n value: PropTypes.string.isRequired,\n }).isRequired,\n dropOffLocationAirportCode: PropTypes.shape({\n onChange: PropTypes.func.isRequired,\n value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,\n touched: PropTypes.bool.isRequired,\n error: PropTypes.arrayOf(PropTypes.shape()).isRequired,\n }).isRequired,\n dropOffGeoLocationAddress: PropTypes.shape({\n onChange: PropTypes.func.isRequired,\n touched: PropTypes.bool.isRequired,\n value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,\n error: PropTypes.arrayOf(PropTypes.shape()).isRequired,\n }).isRequired,\n dropOffGeoLocationLatitude: PropTypes.shape({\n onChange: PropTypes.func.isRequired,\n value: PropTypes.number.isRequired,\n }).isRequired,\n dropOffGeoLocationLongitude: PropTypes.shape({\n onChange: PropTypes.func.isRequired,\n }).isRequired,\n vendorPreferences: PropTypes.shape({\n codes: {\n onChange: PropTypes.func.isRequired,\n },\n type: {\n onChange: PropTypes.func.isRequired,\n },\n }),\n accountSettings: PropTypes.shape(),\n }).isRequired,\n submitting: PropTypes.bool.isRequired,\n handleSubmit: PropTypes.func.isRequired,\n availableChannels: availableChannelsShape.isRequired, // eslint-disable-line react/no-typos\n laymanMode: PropTypes.bool,\n defaultSearchParams: PropTypes.shape({}).isRequired,\n initializeForm: PropTypes.func.isRequired,\n pristine: PropTypes.bool.isRequired,\n globalPolicyPreferences: PropTypes.shape({\n airlines: PropTypes.arrayOf(PropTypes.number).isRequired,\n carRentalCompanies: PropTypes.arrayOf(PropTypes.number).isRequired,\n }).isRequired,\n searchAccounts: searchAccountsShape,\n selectAll: PropTypes.string,\n toggleSelectAll: PropTypes.func.isRequired,\n preselectTravelers: PropTypes.arrayOf(\n PropTypes.shape({\n traveler: PropTypes.shape({\n value: PropTypes.shape({\n firstName: PropTypes.string.isRequired,\n middleName: PropTypes.string,\n lastName: PropTypes.string.isRequired,\n phoneNumbers: PropTypes.arrayOf(PropTypes.string).isRequired,\n emailAddresses: PropTypes.arrayOf(PropTypes.string).isRequired,\n age: PropTypes.number.isRequired,\n }),\n }),\n }),\n ).isRequired,\n resetApp: PropTypes.func.isRequired,\n searchForm: PropTypes.shape({\n accountSettings: searchAccountsShape.cars,\n }).isRequired,\n setIsCollapsed: PropTypes.func,\n cartHasItems: PropTypes.bool.isRequired,\n formWithoutChildren: PropTypes.bool.isRequired,\n selectGds: PropTypes.bool.isRequired,\n selectDirect: PropTypes.bool.isRequired,\n toggleSelectGds: PropTypes.func.isRequired,\n toggleSelectDirect: PropTypes.func.isRequired,\n resetBookingAppContext: PropTypes.func,\n travelArrangerPresent: PropTypes.bool.isRequired,\n travelerLoggedIn: PropTypes.bool.isRequired,\n airportSuggestions: PropTypes.shape(AirportShape).isRequired,\n callbackParams: PropTypes.shape().isRequired,\n preselectDecision: PropTypes.string.isRequired,\n updatePreselectTravelers: PropTypes.func.isRequired,\n};\n\nexport default SearchForm;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { reduxForm } from 'redux-form';\nimport moment from 'moment';\nimport { startFromCart, endFromCart } from '../../lib/datesFromCart';\n\nimport { validateAllSearchParams } from './helpers/validate';\nimport cartOverride from './helpers/cartOverride';\nimport deepClone from '../../lib/deepClone';\nimport SearchForm from './SearchForm';\nimport searchAccountValues from '../../helpers/searchAccountValues';\nimport { createCarSearch } from '../../actions/car';\nimport { resetApp } from '../../actions/common';\n\nconst initialFields = [\n 'pickUpDate',\n 'dropOffDate',\n 'pickUpTime',\n 'dropOffTime',\n 'airportSearch',\n 'pickUpLocationAirportCode',\n 'pickUpGeoLocationAddress',\n 'pickUpGeoLocationLatitude',\n 'pickUpGeoLocationLongitude',\n 'dropOffLocationAirportCode',\n 'dropOffGeoLocationAddress',\n 'dropOffGeoLocationLatitude',\n 'dropOffGeoLocationLongitude',\n 'driverAge',\n 'vendorPreferences.codes',\n 'vendorPreferences.type',\n];\n\nconst reduxFormConfig = {\n form: 'carSearchForm',\n destroyOnUnmount: false,\n fields: [],\n};\n\nconst mapStateToProps = (state, ownProps) => {\n const { adults } = state.common.travelerCount;\n const fields = deepClone(initialFields);\n const cartHasCar = state.common.cart.items.some(item => item.type === 'car');\n if (ownProps.searchAccounts && ownProps.searchAccounts.cars) {\n Object.keys(ownProps.searchAccounts.cars).forEach(key => fields.push(`accountSettings.${key}`));\n }\n const startDateFromCart = startFromCart(state);\n const endDateFromCart = endFromCart(state);\n let vendorsPreferences = [];\n\n if (ownProps.globalPolicyPreferences.carRentalCompanies.length > 0) {\n vendorsPreferences = ownProps.globalPolicyPreferences.carRentalCompanies;\n }\n\n const defaultSearchParams = {\n accountSettings: searchAccountValues(ownProps.searchAccounts.cars),\n airportSearch: false,\n driverAge: ownProps.currentUserAge || 32,\n pickUpDate:\n startDateFromCart ||\n state.cars.defaultCarSearchParams.pickUpDate ||\n moment()\n .add(7, 'days')\n .startOf('day')\n .format('YYYY-MM-DD'),\n dropOffDate: endDateFromCart || state.cars.defaultCarSearchParams.dropOffDate,\n pickUpTime: '12:00',\n dropOffTime: '11:00',\n vendorPreferences: state.cars.defaultCarSearchParams.vendorPreferences || {\n codes: vendorsPreferences,\n type: 'exclusive',\n },\n };\n\n const searchForm = state.form.carSearchForm;\n\n const preselectTravelers = state.common.preselectTravelers.travelers;\n const cartHasItems = state.common.cart.items.length > 0;\n\n return {\n fields,\n cartHasCar,\n initialValues: {\n ...defaultSearchParams,\n ...ownProps.searchParams,\n ...state.cars.defaultCarSearchParams,\n ...cartOverride(adults),\n },\n validate: validateAllSearchParams(ownProps.availableChannels.cars, ownProps.minHoursInFuture),\n defaultSearchParams,\n preselectTravelers,\n searchForm,\n cartHasItems,\n travelerLoggedIn: ownProps.travelerLoggedIn,\n airportSuggestions: state.common.airportSuggestions,\n };\n};\n\nconst mapDispatchToProps = dispatch => ({\n createCarSearch: (params, callbacks) => dispatch(createCarSearch(params, callbacks)),\n resetApp: () => dispatch(resetApp('/cars')),\n});\n\nconst ReduxForm = reduxForm(reduxFormConfig, mapStateToProps, mapDispatchToProps)(SearchForm);\n\nconst SearchFormWithContext = (props, context) => - \n {airlines.map(option => {\n const { label, value, isChecked } = option;\n\n return (\n
- \n
\n {I18n.t('components.ibe.search_form.flight.label.no_airlines')}\n
\n );\n};\n\nconst MIN_SEARCH_QUERY_LENGTH = 2;\nconst MAX_AIRLINE_LENGTH = 2;\nconst SEARCH_DELAY_MS = 1000;\n\nconst AirlineSelection = props => {\n const {\n onSearchAirlines,\n searchedAirlines,\n preferredAirlines,\n onAirlinesSelect,\n isEmptySearchQuery,\n onClearSearchQuery,\n } = props;\n\n const [searchQuery, setSearchQuery] = useState('');\n const [airlineOptions, setAirlineOptions] = useState([]);\n const [selectedAirlines, setSelectedAirlines] = useState(preferredAirlines);\n\n const availableAirlines = () => {\n if (!searchedAirlines || !Object.keys(searchedAirlines).length) {\n return preferredAirlines;\n }\n\n return Object.values(searchedAirlines).map(({ name, code }) => ({\n label: `${name} (${code})`,\n value: code,\n isChecked: false,\n }));\n };\n\n const searchResult = useMemo(availableAirlines, [searchedAirlines]);\n\n const updateSelectedAirlines = newAirlines => {\n setSelectedAirlines(newAirlines);\n onAirlinesSelect(newAirlines);\n };\n\n const handleAddAirlinePreference = option => {\n const { label, value, isChecked } = option;\n const airline = {\n label,\n value,\n isChecked: !isChecked,\n };\n const newAirlines = [...selectedAirlines, airline];\n\n updateSelectedAirlines(newAirlines);\n setAirlineOptions(prevOptions => prevOptions.filter(prevOption => prevOption.value !== value));\n };\n\n const handleSelectedAirlineRemove = ({ value }) => {\n const filteredAirlines = selectedAirlines.filter(airline => airline.value !== value);\n updateSelectedAirlines(filteredAirlines);\n };\n\n const handleResetAll = () => {\n updateSelectedAirlines([]);\n setSearchQuery('');\n };\n\n const searchCarrier = useCallback(\n input => {\n if (input && input.length >= MIN_SEARCH_QUERY_LENGTH) {\n onClearSearchQuery(false);\n onSearchAirlines(input);\n }\n },\n [onSearchAirlines],\n );\n\n const numberOfSelectedAirlines = selectedAirlines.length;\n const numberOfAirlineOptions = airlineOptions.length;\n const isAirlineLengthExceeded = numberOfSelectedAirlines > MAX_AIRLINE_LENGTH;\n\n const uniqueAirlineCodes = new Set(selectedAirlines.map(option => option.value));\n\n useEffect(() => {\n if (numberOfSelectedAirlines === 0) {\n setAirlineOptions(searchResult);\n } else {\n const filteredOptions = searchResult.filter(option => !uniqueAirlineCodes.has(option.value));\n setAirlineOptions(filteredOptions);\n }\n }, [searchResult]);\n\n useEffect(() => {\n if (isAirlineLengthExceeded || numberOfAirlineOptions === 0) {\n setSearchQuery('');\n }\n }, [airlineOptions]);\n\n useEffect(() => {\n const timer = setTimeout(() => {\n searchCarrier(searchQuery);\n }, SEARCH_DELAY_MS);\n\n if (searchQuery === '') {\n setAirlineOptions([]);\n }\n\n return () => clearTimeout(timer);\n }, [searchQuery]);\n\n return (\n \n \n {I18n.t('components.ibe.search_form.flight.label.reset_all')}\n
\n \n )}\n \n
\n );\n};\n\nPreferredAirlineSwitcher.propTypes = {\n onPreferredChange: PropTypes.func.isRequired,\n value: PropTypes.oneOf([PREFERRED_OPTION, EXCLUSIVE_OPTION]).isRequired,\n};\n\nexport default PreferredAirlineSwitcher;\n","const getFilteredAirportSuggestions = (airportSuggestions, origin, destination) => {\n const suggestions = airportSuggestions[destination];\n\n if (!Array.isArray(suggestions)) {\n return [];\n }\n\n return suggestions.filter(item => item.code !== origin);\n};\n\nexport default getFilteredAirportSuggestions;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport IconButton from '@wtag/rcl-icon-button';\nimport Icon from '@wtag/rcl-icon';\nimport moment from 'moment';\nimport classNames from 'classnames';\nimport DateRangePicker from '@wtag/rcl-date-range-picker';\nimport DatePickerWithFocusedStateWrapper from 'sharedWebpack/DatePickerWithFocusedStateWrapper';\nimport SelectBox from '@wtag/rcl-select-box';\nimport AirportAutoComplete from '../../../AirportAutoComplete';\nimport { MULTICITY, ROUNDTRIP } from '../../../../lib/helpers/tripTypes';\n\nconst AdvancedFlightFormTrips = props => {\n const {\n tripType,\n onTripRemove,\n tripIcon,\n trip,\n searchInputConfiguration,\n getFilteredAirportSuggestions,\n airportSuggestions,\n setNextTripDate,\n minDate,\n showInvalidDateError,\n cabinClassOptions,\n findLabelValue,\n preferredAllianceOptions,\n allianceOptionFinder,\n bookingClassOptionsByRule,\n handleTripDestinationChange,\n setCustomStartDate,\n setCustomEndDate,\n index,\n handleTripOriginChange,\n customStartDate,\n customEndDate,\n firstTrip,\n secondTrip,\n isAdvancedForm,\n laymanMode,\n } = props;\n\n const alliancePreferenceValue =\n trip.alliancePreferences && trip.alliancePreferences.value\n ? trip.alliancePreferences.value.map(value => allianceOptionFinder(value))\n : [];\n\n const bookingClassValue =\n trip.bookingClass && trip.bookingClass.value\n ? trip.bookingClass.value.map(value => ({\n label: value,\n value,\n }))\n : [];\n\n const onDateRangeChange = date => {\n const { startDate, endDate } = date;\n const formattedStartDate = startDate || null;\n const formattedEndDate = endDate || null;\n setCustomStartDate(formattedStartDate);\n setCustomEndDate(formattedEndDate);\n\n firstTrip.date.onChange(formattedStartDate);\n if (secondTrip && secondTrip.date) {\n secondTrip.date.onChange(formattedEndDate);\n }\n };\n\n const onCabinClassChange = selectedOption => {\n if (selectedOption) {\n if (tripType === ROUNDTRIP) {\n [trip, firstTrip, secondTrip].forEach(tripField =>\n tripField.cabinClass.onChange(selectedOption.value),\n );\n } else {\n trip.cabinClass.onChange(selectedOption.value);\n }\n }\n };\n\n const onDateChange = date => {\n if (!date) {\n trip.date.onChange('');\n } else {\n setCustomEndDate(moment.utc(date).format());\n setNextTripDate(index, moment.utc(date).format());\n }\n };\n\n const onSelectBoxChange = (selectedOptions, fieldName, tripField) =>\n selectedOptions && selectedOptions.length > 0\n ? tripField[fieldName].onChange(selectedOptions.map(option => option.value))\n : tripField[fieldName].onChange([]);\n\n const handleMultiSelectBoxChange = (selectedOptions, fieldName) => {\n if (tripType === ROUNDTRIP) {\n [trip, firstTrip, secondTrip].forEach(tripField => {\n onSelectBoxChange(selectedOptions, fieldName, tripField);\n });\n } else {\n onSelectBoxChange(selectedOptions, fieldName, trip);\n }\n };\n\n const dateRangeError =\n tripType === ROUNDTRIP &&\n ((!(customEndDate || customStartDate) && I18n.t('public.offer_enquiries.form.blank_title')) ||\n firstTrip.date.error ||\n (secondTrip && secondTrip.date && secondTrip.date.error));\n\n const dateRangeTouched =\n tripType === ROUNDTRIP &&\n ((firstTrip.date && firstTrip.date.touched) ||\n (secondTrip && secondTrip.date && secondTrip.date.touched));\n\n const dateRangeStartDate =\n tripType === ROUNDTRIP &&\n firstTrip.date &&\n (moment(firstTrip.date.value).isValid() ? customStartDate : null);\n\n const dateRangeEndDate =\n tripType === ROUNDTRIP &&\n firstTrip.date &&\n (moment(firstTrip.date.value).isValid() &&\n secondTrip &&\n secondTrip.date &&\n moment(secondTrip.date.value).isValid()\n ? customEndDate\n : null);\n\n return (\n \n {tripType === MULTICITY && (\n
\n \n \n \n {I18n.t('components.flight.trip_number', {\n number: index + 1,\n })}\n \n
\n )}\n \n \n handleTripDestinationChange(index, code)}\n fullWidth={true}\n whitelistedAirports={searchInputConfiguration.whitelistedAirports}\n suggestions={\n getFilteredAirportSuggestions(\n airportSuggestions,\n trip.origin.value,\n trip.destination.value,\n ) || []\n }\n iconName=\"stopOver\"\n />\n
\n \n 0,\n },\n )}\n >\n handleTripOriginChange(index, code)}\n fullWidth={true}\n whitelistedAirports={searchInputConfiguration.whitelistedAirports}\n suggestions={airportSuggestions[trip.origin.value] || []}\n iconName=\"takeOff\"\n />\n
\n\n \n \n {tripType === ROUNDTRIP ? (\n onDateRangeChange(date)}\n required={true}\n minDate={minDate(index)}\n startDatePlaceholderText={I18n.t(\n 'components.ibe.search_form.flight.label.departure',\n )}\n endDatePlaceholderText={I18n.t('components.ibe.search_form.flight.label.return')}\n fullWidth={true}\n isBoundToAYear={false}\n startDate={dateRangeStartDate}\n endDate={dateRangeEndDate}\n touched={dateRangeTouched}\n error={dateRangeError}\n />\n ) : (\n onDateChange(date)}\n fullWidth={true}\n showClearDate={true}\n minDate={minDate(index)}\n hideMonthsAndYearsWithNoActiveDates={true}\n date={trip.date.value}\n locale={moment().utc()}\n initialDate={trip.date.value}\n id={Math.random()}\n onFocusChange={trip.date.onFocus}\n touched={trip.date.touched}\n error={showInvalidDateError(trip.date)}\n hideNavButtons={false}\n />\n )}\n
\n \n
\n \n \n \n handleMultiSelectBoxChange(selectedOptions, 'bookingClass')\n }\n width=\"full\"\n isMulti={true}\n value={bookingClassValue}\n isClearable={true}\n />\n
\n )}\n \n \n \n );\n};\n\nAdvancedFlightFormTrips.defaultProps = {\n customStartDate: null,\n customEndDate: null,\n firstTrip: {},\n secondTrip: {},\n laymanMode: false,\n};\n\nAdvancedFlightFormTrips.propTypes = {\n tripType: PropTypes.string.isRequired,\n tripsLength: PropTypes.number.isRequired,\n onTripRemove: PropTypes.func.isRequired,\n tripIcon: PropTypes.string.isRequired,\n trip: PropTypes.shape({\n origin: PropTypes.shape({\n onChange: PropTypes.func,\n error: PropTypes.arrayOf(PropTypes.node),\n value: PropTypes.string,\n }),\n destination: PropTypes.shape({\n onChange: PropTypes.func,\n error: PropTypes.arrayOf(PropTypes.node),\n value: PropTypes.string,\n }),\n date: PropTypes.shape({\n onChange: PropTypes.func,\n onFocus: PropTypes.func,\n touched: PropTypes.bool,\n value: PropTypes.string,\n }),\n cabinClass: PropTypes.shape({\n onChange: PropTypes.func,\n value: PropTypes.string,\n }),\n alliancePreferences: PropTypes.shape({\n onChange: PropTypes.func,\n value: PropTypes.string,\n }),\n bookingClass: PropTypes.shape({\n onChange: PropTypes.func,\n value: PropTypes.arrayOf(PropTypes.shape({ label: PropTypes.string })),\n }),\n }).isRequired,\n searchInputConfiguration: PropTypes.shape({\n whitelistedAirports: PropTypes.arrayOf().isRequired,\n showAlliancePreferences: PropTypes.bool,\n showBookingClass: PropTypes.bool,\n }).isRequired,\n getFilteredAirportSuggestions: PropTypes.func.isRequired,\n airportSuggestions: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\n setNextTripDate: PropTypes.func.isRequired,\n minDate: PropTypes.func.isRequired,\n showInvalidDateError: PropTypes.func.isRequired,\n cabinClassOptions: PropTypes.func.isRequired,\n findLabelValue: PropTypes.func.isRequired,\n preferredAllianceOptions: PropTypes.func.isRequired,\n allianceOptionFinder: PropTypes.func.isRequired,\n bookingClassOptionsByRule: PropTypes.shape({}).isRequired,\n handleTripDestinationChange: PropTypes.func.isRequired,\n setCustomStartDate: PropTypes.func.isRequired,\n setCustomEndDate: PropTypes.func.isRequired,\n index: PropTypes.number.isRequired,\n handleTripOriginChange: PropTypes.func.isRequired,\n customStartDate: PropTypes.string,\n customEndDate: PropTypes.string,\n firstTrip: PropTypes.shape({\n date: PropTypes.shape({\n error: PropTypes.arrayOf(PropTypes.node),\n onChange: PropTypes.func,\n touched: PropTypes.bool,\n value: PropTypes.string,\n }),\n }),\n secondTrip: PropTypes.shape({\n date: PropTypes.shape({\n error: PropTypes.arrayOf(PropTypes.node),\n onChange: PropTypes.func,\n touched: PropTypes.bool,\n value: PropTypes.string,\n }),\n }),\n isAdvancedForm: PropTypes.bool.isRequired,\n laymanMode: PropTypes.bool,\n};\n\nexport default AdvancedFlightFormTrips;\n","import React, { Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport moment from 'moment';\nimport getFilteredAirportSuggestions from '../helpers/getFilteredAirportSuggestions';\nimport {\n bookingClassOptionsByRule,\n cabinClassOptions,\n preferredAllianceOptions,\n} from '../helpers/variousOptionsProvider';\nimport showInvalidDateError from '../../../helpers/showInvalidDateError';\nimport findLabelValue from '../../../helpers/findLabelValue';\nimport { MULTICITY, ROUNDTRIP } from '../../../lib/helpers/tripTypes';\nimport AdvancedFlightFormTrips from './AdvancedFlightFormTrips';\nimport usePropState from '../../../../usePropState';\nimport './styles.scss';\n\nconst TRIP_COUNT_TWO = 2;\n\nconst AdvancedFlightForm = ({\n trips,\n searchInputConfiguration,\n airportSuggestions,\n actionBars,\n dropdownBar,\n laymanMode,\n tripType,\n onTripRemove,\n isAdvancedForm,\n}) => {\n const [firstTrip, secondTrip] = trips;\n const [customStartDate, setCustomStartDate] = usePropState(\n firstTrip ? firstTrip.date.value : null,\n );\n const [customEndDate, setCustomEndDate] = usePropState(secondTrip ? secondTrip.date.value : null);\n\n const isShowDaterangeError =\n !moment(customStartDate).isValid() || !moment(customEndDate).isValid();\n\n // For the roundtrip we will show roundtrip icon but for the singleTrip and multiCity we need to show oneWay icon as it will be separated for each trip.\n const tripIcon = tripType === ROUNDTRIP ? 'roundTrip' : 'oneWay';\n // This function will be called when the origin code is updated.\n const handleTripOriginChange = (currentTripIndex, value) => {\n trips[currentTripIndex].origin.onChange(value);\n\n const nextTrip = trips[currentTripIndex + 1];\n\n if (!nextTrip) {\n return;\n }\n\n if (trips.length === TRIP_COUNT_TWO && tripType !== MULTICITY) {\n nextTrip.destination.onChange(value);\n }\n };\n\n // This function will be called when the destination code is updated.\n const handleTripDestinationChange = (currentTripIndex, value) => {\n trips[currentTripIndex].destination.onChange(value);\n\n const nextTrip = trips[currentTripIndex + 1];\n\n if (!nextTrip) {\n return;\n }\n\n nextTrip.origin.onChange(value);\n };\n\n // When date of first trip changes it will update nextTrip date with difference of 7 days.\n const setNextTripDate = (currentIndex, value) => {\n trips[currentIndex].date.onChange(value);\n const index = currentIndex + 1;\n if (!trips[index] || trips[index].date.touched) {\n return;\n }\n\n const nextValue = moment\n .utc(value)\n .add(7, 'days')\n .toISOString();\n trips[index].date.onChange(nextValue);\n };\n\n // After searching alliances this function will be called.\n const allianceOptionFinder = value =>\n preferredAllianceOptions().find(option => option.value === value);\n\n const tripDate = index => {\n if (trips[index]) {\n return trips[index].date.value;\n }\n\n return undefined;\n };\n\n const lastTripDate = currentIndex => {\n const index = currentIndex - 1;\n\n return tripDate(index);\n };\n\n // This functions handles the case where we can not add a date before pervious trip.\n const minDate = currentIndex => {\n if (currentIndex === 0) {\n return moment\n .utc(new Date())\n .add(-1, 'days')\n .format();\n }\n\n const previousIndex = currentIndex - 1;\n\n if (trips[previousIndex] && !trips[previousIndex].date.value) {\n return minDate(previousIndex);\n }\n return lastTripDate(currentIndex);\n };\n\n const showingTrips =\n tripType === ROUNDTRIP && firstTrip ? (\n \n {dropdownBar}\n {showingTrips}\n {actionBars}\n
\n \n {showPlusMinusThreeDays && (\n flexible.onChange(isInputChecked)}\n isChecked={!!flexible.value}\n label={\n \n
\n ) : (\n \n \n
\n )}\n \n
\n )}\n \n {showPlusMinusThreeDays && (\n flexible.onChange(isInputChecked)}\n isChecked={!!flexible.value}\n label={
\n \n {showNonStop && (\n
\n {wtsEnabled && canExcludeWtsContent && (\n \n \n
\n )}\n \n \n
\n )}\n \n
\n \n );\n\n const actionBars = trips.length > 0 && (\n \n
\n \n \n {!props.exchange.enabled && (\n \n \n {error}\n \n \n ))}\n \n {I18n.t('components.ibe.search_form.error.change_number_of_travelers')}\n \n \n \n
\n )}\n {props.searchInputConfiguration.showAirlinePreference && (\n \n \n
\n {travelersFieldError &&\n travelersFieldError.map(error => (\n \n
\n )}\n \n
\n {isPtcLoading ? (\n \n {I18n.t('admin.components.organizations.overview.tabs.traveller.title')}\n
\n {isPreSelectTravelerButtonVisible && !isPtcSelected && (\n \n \n updatePassengerTypeCodeQuantity(val, code)}\n />\n
\n ))}\n {!laymanMode && (\n \n
\n \n {I18n.t('components.ibe.search_form.flight.label.adults')}\n
\n \n {I18n.t('components.ibe.search_form.flight.label.adults_age_range')}\n
\n \n
\n \n {I18n.t('components.ibe.search_form.flight.label.children')}\n
\n \n {I18n.t('components.ibe.search_form.flight.label.children_age_range')}\n
\n \n
\n \n {I18n.t('components.ibe.search_form.flight.label.infants')}\n
\n \n {I18n.t('components.ibe.search_form.flight.label.infants_age_range')}\n
\n \n {I18n.t('components.ibe.search_form.traveler_note')}\n
\n {passengerTypeCodesList?.map(({ name, code }) => (\n {`${name} (${code})`}
\n \n
\n )}\n \n {I18n.t('components.ibe.search_form.ptc_note')}\n Settings\n
\n \n
\n )}\n \n
\n \n \n
\n \n {laymanMode && (\n \n \n
\n \n )}\n \n {I18n.t(\n `components.ibe.search_form.flight.label.${\n isAdvancedForm ? 'hide_advance_search' : 'advance_search'\n }`,\n )}\n
\n \n
\n \n {!laymanMode && (\n \n {I18n.t('components.ibe.search_form.flight.label.add_trips')}\n
\n \n {formToShow}\n {channelsToShow}\n
\n \n {\n resetApp();\n resetBookingAppContext();\n }}\n >\n {I18n.t('components.ibe.search_form.flight.label.reset')}\n \n
\n \n \n );\n};\n\nSearchFormComponent.defaultProps = {\n searchAccounts: null,\n searchForm: null,\n searchInputConfiguration: {\n showDepartureTime: true,\n showPlusMinusThreeDays: true,\n showNonStop: true,\n showAirlinePreference: true,\n showOnlyFlexibleFlight: true,\n showBookingClass: true,\n showAlliancePreferences: true,\n showOnlyBagIncludedFlight: true,\n showExcludeCodeShareFlights: true,\n whitelistedAirports: [],\n },\n exchange: {\n enabled: false,\n },\n selectAll: true,\n accountSettings: {},\n setIsCollapsed: () => {},\n resetBookingAppContext: () => {},\n isMultiCitySelected: false,\n setIsMultiCitySelected: () => {},\n wtsEnabled: false,\n isFromLastSearch: false,\n passengerTypeCodes: {\n passengerTypeCodesList: [],\n isPtcLoading: false,\n },\n searchParams: {\n adults: null,\n passengerTypeCode: '',\n passengerCode: '',\n },\n setPTC: () => {},\n};\n\nSearchFormComponent.propTypes = {\n toggleDrawer: PropTypes.func.isRequired,\n airportSuggestionList: PropTypes.arrayOf(PropTypes.string).isRequired,\n availableChannels: availableChannelsShape.isRequired,\n setAdvancedForm: PropTypes.func.isRequired,\n resetApp: PropTypes.func.isRequired,\n advancedForm: PropTypes.bool.isRequired,\n defaultSearchParams: PropTypes.shape().isRequired,\n cartOverrides: PropTypes.shape().isRequired,\n fields: PropTypes.shape().isRequired,\n submitting: PropTypes.bool.isRequired,\n cartHasItems: PropTypes.bool.isRequired,\n initializeForm: PropTypes.func.isRequired,\n laymanMode: PropTypes.bool.isRequired,\n forceAdvancedSearch: PropTypes.bool.isRequired,\n handleSubmit: PropTypes.func.isRequired,\n searchForm: PropTypes.shape({\n accountSettings: PropTypes.shape(),\n adults: PropTypes.shape({\n initial: PropTypes.number,\n value: PropTypes.number,\n }),\n passengerTypeCode: PropTypes.shape({\n initial: PropTypes.number,\n value: PropTypes.number,\n }),\n }),\n searchAccounts: searchAccountsShape,\n accountSettings: searchAccountsShape.flights,\n searchInputConfiguration: PropTypes.shape({\n showDepartureTime: PropTypes.bool,\n showPlusMinusThreeDays: PropTypes.bool,\n showNonStop: PropTypes.bool,\n showAirlinePreference: PropTypes.bool,\n showOnlyFlexibleFlight: PropTypes.bool,\n showBookingClass: PropTypes.bool,\n showAlliancePreferences: PropTypes.bool,\n showOnlyBagIncludedFlight: PropTypes.bool,\n showExcludeCodeShareFlights: PropTypes.bool,\n whitelistedAirports: PropTypes.arrayOf(PropTypes.string),\n }),\n searchParams: PropTypes.shape({\n adults: PropTypes.number,\n passengerTypeCode: PropTypes.string,\n passengerCode: PropTypes.string,\n }),\n minHoursInFuture: PropTypes.number.isRequired,\n exchange: PropTypes.shape({\n enabled: PropTypes.bool.isRequired,\n }),\n selectAll: PropTypes.string,\n toggleSelectAll: PropTypes.func.isRequired,\n globalPolicyPreferences: PropTypes.shape().isRequired,\n preselectTravelers: PropTypes.arrayOf(\n PropTypes.shape({\n traveler: PropTypes.shape({\n value: PropTypes.shape({\n firstName: PropTypes.string.isRequired,\n middleName: PropTypes.string,\n lastName: PropTypes.string.isRequired,\n phoneNumbers: PropTypes.arrayOf(PropTypes.string).isRequired,\n emailAddresses: PropTypes.arrayOf(PropTypes.string).isRequired,\n age: PropTypes.number.isRequired,\n }),\n }),\n }),\n ).isRequired,\n setIsCollapsed: PropTypes.func,\n formWithoutChildren: PropTypes.bool.isRequired,\n selectGds: PropTypes.bool.isRequired,\n selectDirect: PropTypes.bool.isRequired,\n toggleSelectGds: PropTypes.func.isRequired,\n toggleSelectDirect: PropTypes.func.isRequired,\n resetBookingAppContext: PropTypes.func,\n travelArrangerPresent: PropTypes.bool.isRequired,\n travelerLoggedIn: PropTypes.bool.isRequired,\n airportSuggestions: PropTypes.shape(AirportShape).isRequired,\n isMultiCitySelected: PropTypes.bool,\n setIsMultiCitySelected: PropTypes.func,\n wtsEnabled: PropTypes.bool,\n isAdvancedForm: PropTypes.bool.isRequired,\n tripType: PropTypes.string.isRequired,\n setTripType: PropTypes.func.isRequired,\n isFromLastSearch: PropTypes.bool,\n setIsFromLastSearch: PropTypes.func.isRequired,\n canExcludeWtsContent: PropTypes.bool.isRequired,\n preselectDecision: PropTypes.string.isRequired,\n passengerTypeCodes: {\n passengerTypeCodesList: PropTypes.arrayOf(\n PropTypes.shape({\n code: PropTypes.string.isRequired,\n id: PropTypes.number.isRequired,\n name: PropTypes.string.isRequired,\n }),\n ),\n isPtcLoading: PropTypes.bool,\n },\n setPTC: PropTypes.func,\n callbackParams: PropTypes.shape().isRequired,\n updatePreselectTravelers: PropTypes.func.isRequired,\n};\n\nexport default SearchFormComponent;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { reduxForm } from 'redux-form';\nimport moment from 'moment';\n\nimport deepClone from '../../lib/deepClone';\nimport { validateAllSearchParams } from './helpers/validate';\nimport generateCartOverrides from '../../helpers/generateCartOverrides';\nimport { fetchPassengerTypeCodes } from '../../actions/flight';\n\nimport searchAccountValues from '../../helpers/searchAccountValues';\nimport availableChannelsShape from '../../shapes/availableChannels';\n\nimport SearchForm from './SearchForm';\n\nconst initialFields = [\n 'trips[].origin',\n 'trips[].destination',\n 'trips[].date',\n 'trips[].departureTime',\n 'trips[].cabinClass',\n 'trips[].bookingClass',\n 'trips[].alliancePreferences',\n 'flexible',\n 'airlinePreferences.carriers',\n 'airlinePreferences.type',\n 'nonStop',\n 'onlyFlexibleFlight',\n 'onlyBagIncludedFlight',\n 'excludeCodeShareFlight',\n];\n\nconst reduxFormConfig = {\n form: 'flightSearchForm',\n destroyOnUnmount: false,\n fields: [],\n};\n\nconst mapStateToProps = (state, ownProps) => {\n const searchForm = state.form.flightSearchForm;\n const cartOverrides = generateCartOverrides(\n state.common.cart.items.length,\n state.common.travelerCount,\n 'flight',\n );\n const cartHasItems = state.common.cart.items.length > 0;\n const allTravelerIds =\n ownProps.callbackParams && ownProps.callbackParams.all_traveler_ids\n ? ownProps.callbackParams.all_traveler_ids\n : [];\n const fields = deepClone(initialFields);\n if (ownProps.searchAccounts && ownProps.searchAccounts.flights) {\n Object.keys(ownProps.searchAccounts.flights).forEach(key =>\n fields.push(`accountSettings.${key}`),\n );\n }\n\n fields.push(`welltravelChannel`);\n fields.push('adults');\n fields.push('children');\n fields.push('infants');\n fields.push('isShowTravelfusionAlert');\n fields.push('passengerTypeCode');\n\n if (ownProps.exchange.enabled) {\n fields.push('bookingId');\n } else {\n fields.push('itinerarySearch');\n }\n\n const defaultSearchParams = {\n trips: [\n {\n date: moment()\n .add(7, 'days')\n .startOf('day')\n .format(),\n cabinClass: 'economy',\n bookingClass: [],\n alliancePreferences: [],\n departureTime: 'anytime',\n },\n {\n date: moment()\n .add(13, 'days')\n .startOf('day')\n .format(),\n cabinClass: 'economy',\n bookingClass: [],\n alliancePreferences: [],\n departureTime: 'anytime',\n },\n ],\n adults: allTravelerIds.length > 0 ? allTravelerIds.length : 1,\n children: 0,\n infants: 0,\n isShowTravelfusionAlert: false,\n airlinePreferences: {\n type: 'preferred',\n carriers: [],\n },\n nonStop: false,\n itinerarySearch: ownProps.searchInputConfiguration.enableSearchItineraryOnly,\n welltravelChannel: !ownProps.laymanMode,\n\n ...ownProps.initialSearchParams.flights,\n };\n\n const accountSettings = searchAccountValues(ownProps.searchAccounts.flights);\n\n const initialValues = {\n accountSettings,\n ...defaultSearchParams,\n ...ownProps.searchParams,\n ...state.flights.defaultFlightSearchParams,\n ...cartOverrides,\n };\n\n const preselectTravelers = state.common.preselectTravelers.travelers;\n const passengerTypeCodes = state.flights.passengerTypeCodes;\n\n return {\n fields,\n initialValues,\n cartOverrides,\n accountSettings,\n defaultSearchParams,\n searchForm,\n cartHasItems,\n airportSuggestionList: Object.keys(state.common.airports),\n validate: validateAllSearchParams(\n ownProps.availableChannels.flights,\n ownProps.exchange.enabled,\n ownProps.minHoursInFuture,\n ownProps.searchInputConfiguration.showDepartureTime,\n ),\n preselectTravelers,\n travelerLoggedIn: ownProps.travelerLoggedIn,\n airportSuggestions: state.common.airportSuggestions,\n passengerTypeCodes,\n };\n};\n\nconst mapDispatchToProps = dispatch => ({\n setPTC: dispatch(fetchPassengerTypeCodes()),\n});\n\nconst ReduxForm = reduxForm(reduxFormConfig, mapStateToProps, mapDispatchToProps)(SearchForm);\n\nconst SearchFormWithContext = (props, context) => \n
\n );\n\n return (\n \n
\n\n \n addToCart(product)}\n size=\"small\"\n label={I18n.t('components.ibe.shared.add_to_cart')}\n disabled={product.inStock === 0}\n />\n
\n \n {product.inStock\n ? I18n.t('components.ibe.search_form.static.in_stock', {\n in_stock: product.inStock,\n })\n : I18n.t('components.ibe.search_form.static.no_stock')}\n
\n \n
\n \n \n
\n \n \n {I18n.t('components.ibe.price.including_vat', {\n vat: product.vatPercentage,\n })}\n \n
\n \n
\n {product.name}
\n \n
\n \n }\n isModalVisible={isModalOpen}\n onOutsideClick={closeModal}\n footer={footerContent}\n >\n \n
\n \n );\n};\n\nStaticProductDescription.defaultProps = {\n addToCart: null,\n closeModal: null,\n interests: null,\n};\n\nStaticProductDescription.propTypes = {\n addToCart: PropTypes.func,\n isModalOpen: PropTypes.bool.isRequired,\n closeModal: PropTypes.func,\n product: staticProductShape.isRequired,\n laymanMode: PropTypes.bool.isRequired,\n interests: PropTypes.arrayOf(PropTypes.string),\n};\n\nexport default StaticProductDescription;\n","import React, { Fragment, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport Card from '@wtag/rcl-card';\nimport Button from '@wtag/rcl-button';\nimport Amount from 'sharedWebpack/Amount';\nimport { Title, Text } from '@wtag/rcl-typography';\nimport { EmphasisTag } from '@wtag/react-comp-lib';\nimport classNames from 'classnames';\nimport ProductIcon from 'sharedWebpack/ProductIcon';\nimport staticProductShape from '../shapes/staticProduct';\nimport StaticProductDescription from './ProductDescription';\n\nconst StaticProductCard = props => {\n const [isModalOpen, setIsModalOpen] = useState(false);\n\n const openModal = () => {\n setIsModalOpen(true);\n };\n\n const closeModal = () => {\n setIsModalOpen(false);\n };\n\n const product = props.details;\n\n const interests = product.interests ? product.interests.map(value => value.name) : [];\n\n const onClickProduct = () => {\n props.addToCart(product, props.callbackParams, () => {\n props.setOnSearchStarted(true);\n });\n };\n\n return (\n \n
\n \n {product.locations && product.locations.length > 0 && (\n
\n \n {product.locations.map(location => (\n
\n )}\n \n
\n ))}\n {location}
\n \n
\n {I18n.t('components.ibe.search_form.static.description')}
\n \n\n
\n \n {interests &&\n interests.map(interest => (\n
\n\n {product.pdfName && (\n \n )}\n \n \n
\n \n \n \n \n {product.inStock === 0 && (\n \n
\n )}\n\n \n \n
\n {product.vatPercentage && (\n \n \n {I18n.t('components.ibe.price.including_vat', {\n vat: product.vatPercentage,\n })}\n \n
\n )}\n \n \n {product.name}\n \n
\n \n
\n \n \n
\n \n
\n \n
\n \n
\n );\n\n const actionBars = laymanMode && (\n \n \n {I18n.t('components.ibe.search_form.static.available', {\n available: productsList.length,\n })}\n \n
\n\n \n
\n \n {I18n.t('components.ibe.search_form.static.available', {\n available: productsList.length,\n })}\n
\n )}\n\n \n
\n \n )}\n \n \n );\n\n const staticProductsList = useMemo(\n () =>\n laymanMode && !advancedForm\n ? productsList\n .slice(0, 2)\n .map(product => (\n \n {advancedForm\n ? I18n.t('components.ibe.search_form.static.hide')\n : I18n.t('components.ibe.search_form.static.see')}\n
\n \n
\n );\n\n return (\n \n
\n )}\n \n
\n \n);\n\nclass LastSearches extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n isVisible: false,\n };\n }\n\n componentDidUpdate() {\n if (this.props.params && this.props.params[`${this.props.type}s`]) {\n if (this.props.type === 'flight') {\n this.props.params.flights.forEach(flight =>\n this.props.fetchAirportDetails(flight.trips[0].origin),\n );\n }\n if (this.props.type === 'car') {\n this.props.params.cars.forEach(car => {\n if (car.airportSearch) {\n this.props.fetchAirportDetails(car.pickUpLocationAirportCode);\n }\n });\n }\n if (this.props.type === 'hotel') {\n this.props.params.hotels.forEach(hotel => {\n if (hotel.placeId) {\n this.props.fetchPlaceDetails(hotel.placeId);\n }\n });\n }\n }\n }\n\n setDefaultSearchParams = params => {\n const { carRentalCompanies, airlines } = this.context.globalPolicyPreferences;\n const modifiedParams = this.removeDeletedCorporateCodes(params);\n if (this.props.type === 'hotel') {\n const childrenData = [];\n for (let step = 0; step < params.children; step += 1) {\n childrenData.push({});\n }\n modifiedParams.childrenData = childrenData;\n this.props.setDefaultSearchParams(this.props.type, modifiedParams);\n } else if (this.props.type === 'car') {\n if (carRentalCompanies.length > 0) {\n modifiedParams.vendorPreferences = { codes: carRentalCompanies, type: 'exclusive' };\n }\n if (!params.pickUpDate || !params.dropOffDate) {\n modifiedParams.pickUpDate = params.pickUpTime;\n modifiedParams.dropOffDate = params.dropOffTime;\n }\n this.props.setDefaultSearchParams(this.props.type, modifiedParams);\n } else {\n if (airlines.length > 0) {\n modifiedParams.airlinePreferences = { carriers: airlines, type: 'exclusive' };\n }\n this.props.setDefaultSearchParams(this.props.type, modifiedParams);\n }\n };\n\n getAvailableCorporateCodes = (channel, credential) => {\n const availableCorporateCodes = [];\n const searchAccounts = this.props.searchAccounts;\n searchAccounts[`${this.props.type}s`][channel].credentials.forEach(entry => {\n const { identifier, codes } = entry;\n codes.forEach(corporateCode => {\n if (credential.identifier === identifier && credential.codes.includes(corporateCode.code)) {\n availableCorporateCodes.push(corporateCode.code);\n }\n });\n });\n\n return availableCorporateCodes;\n };\n\n removeDeletedCorporateCodes = params => {\n const filteredParams = params;\n if (this.props.type === 'flight') {\n if (filteredParams.accountSettings) {\n Object.entries(filteredParams.accountSettings).forEach(entry => {\n const [channel, credentials] = entry;\n const channelAvailable =\n this.props.searchAccounts[`${this.props.type}s`] &&\n this.props.searchAccounts[`${this.props.type}s`][channel];\n const channelNotAvailable =\n this.props.searchAccounts[`${this.props.type}s`] &&\n !this.props.searchAccounts[`${this.props.type}s`][channel];\n\n if (channelNotAvailable) {\n delete filteredParams.accountSettings[channel];\n } else if (channelAvailable && credentials.length > 0) {\n credentials.forEach(credential => {\n const filteredCredential = credential;\n filteredCredential.codes = this.getAvailableCorporateCodes(channel, credential);\n });\n }\n });\n }\n }\n\n return filteredParams;\n };\n\n render() {\n const { params, type, setIsFromLastSearch, setIsMultiCitySelected } = this.props;\n\n const onOutsideClick = () => {\n this.setState({ isVisible: false });\n };\n\n const onLastSearchClick = () => this.setState({ isVisible: !this.state.isVisible });\n\n const allTravelerIds =\n (this.context.callbackParams && this.context.callbackParams.all_traveler_ids) || [];\n if (params && params[`${type}s`] && params[`${type}s`].length > 0) {\n const display = params[`${type}s`].map(param => {\n const modifiedParam = param;\n if (allTravelerIds.length > 0) {\n if (type === TYPE_FLIGHT) {\n modifiedParam.adults = allTravelerIds.length;\n } else if (type === TYPE_HOTEL) {\n modifiedParam.adults = allTravelerIds.length;\n modifiedParam.numberOfRooms = allTravelerIds.length;\n }\n }\n return (\n \n
\n \n
\n );\n\n const sharedCartsComponent =\n carts.length > 0 ? (\n \n {I18n.t('components.ibe.search_form.empty_shared_carts')}\n
\n \n );\n\n const content = isLoading ? contentLoader : sharedCartsComponent;\n\n useEffect(() => {\n fetchSharedCarts();\n }, []);\n\n return (\n \n setIsVisible(false)}\n label={\n
\n );\n};\n\nSharedCarts.propTypes = {\n laymanMode: PropTypes.bool.isRequired,\n setShowBottomComponents: PropTypes.func.isRequired,\n callbackParams: PropTypes.shape().isRequired,\n};\n\nexport default SharedCarts;\n","import React, { Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport IconButton from '@wtag/rcl-icon-button';\nimport Icon from '@wtag/rcl-icon';\nimport Badge from '@wtag/rcl-badge';\nimport { RTabsWithURL } from '@wtag/rcl-rtabs';\nimport LastSearchesContainer from '../../components/LastSearchesContainer';\nimport SharedCarts from '../../components/SharedCarts';\nimport history from '../../lib/history';\nimport './styles.scss';\n\nconst STATIC_TAB = 3;\nconst SearchFormTab = ({\n tabs,\n currentTab,\n setCurrentTab,\n openCorrectForm,\n formType,\n searchAccounts,\n setShowBottomComponents,\n laymanMode,\n callbackParams,\n advancedForm,\n cartId,\n cartItemsCount,\n iframeMode,\n travelerLoggedIn,\n setIsMultiCitySelected,\n setIsFromLastSearch,\n}) => {\n const setSelectedTabKeyOnClick = tabIndex => {\n setCurrentTab(tabIndex);\n openCorrectForm(tabIndex);\n };\n\n const showSharedCarts = () => {\n if (laymanMode) {\n return !iframeMode && travelerLoggedIn;\n }\n\n return true;\n };\n\n const onCartClick = () => {\n setShowBottomComponents(false);\n history.push(`/carts/${cartId}`);\n };\n\n return (\n \n
\n );\n};\n\nSearchFormTabTitle.propTypes = {\n iconName: PropTypes.string.isRequired,\n title: PropTypes.string.isRequired,\n laymanMode: PropTypes.bool.isRequired,\n};\n\nexport default SearchFormTabTitle;\n","function getMiddle(values) {\n const min = Math.min(...values);\n const max = Math.max(...values);\n\n const result = (min + max) / 2;\n\n return result;\n}\n\nfunction findCenter(markers) {\n const allLats = markers.map(m => m.lat);\n const allLngs = markers.map(m => m.lng);\n return {\n lat: getMiddle(allLats),\n lng: getMiddle(allLngs),\n };\n}\n\nconst calculateCenterCoordinates = cordinates => {\n const locations = [];\n cordinates.forEach(cordinate => {\n locations.push({\n lng: cordinate.start.longitude,\n lat: cordinate.start.latitude,\n });\n locations.push({\n lng: cordinate.stop.longitude,\n lat: cordinate.stop.latitude,\n });\n });\n const center = findCenter(locations);\n return {\n latitude: center.lat,\n longitude: center.lng,\n };\n};\n\nexport default calculateCenterCoordinates;\n","function zoomLevel(lat1, lon1, lat2, lon2) {\n const MAX_ZOOM_LEVEL=10\n const MIN_ZOOM_LEVEL=1\n const EARTH_RADIUS = 6371e3; // metres\n\n // Converting lat and lon to radians\n const radianLat1 = (lat1 * Math.PI) / 180; \n const radianLat2 = (lat2 * Math.PI) / 180;\n const deltaLat = ((lat2 - lat1) * Math.PI) / 180;\n const deltaLng = ((lon2 - lon1) * Math.PI) / 180;\n \n // The formula for circle distance in any map is\n // a = sin²(Δφ/2) + cos φ1 ⋅ cos φ2 ⋅ sin²(Δλ/2)\n // c = 2 ⋅ atan2( √a, √(1−a) )\n // d = EARTH_RADIUS ⋅ c\n // where\tφ is latitude, λ is longitude, \n // note that angles need to be in radians to pass to trig functions!\n // Refer to formula https://www.movable-type.co.uk/scripts/latlong.html\n \n const a =\n Math.sin(deltaLat / 2) * Math.sin(deltaLat / 2) +\n Math.cos(radianLat1) * Math.cos(radianLat2) * Math.sin(deltaLng / 2) * Math.sin(deltaLng / 2);\n const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));\n\n // 1 MegaMeter = 1000000 meters, EARTH_RADIUS*c provides answer in meter\n // we are converting it to MegaMeter for map distance calculations\n const distance = (EARTH_RADIUS * c)/1000000;\n\n // We are converting the distance in Megameter to adjust to our\n // Zoom support in map\n const level = MAX_ZOOM_LEVEL - Math.trunc(distance);\n\n // when the distance is 10 or more it means our map needs to zoomed out\n // Completely. And the opposite is also true\n if(level > MIN_ZOOM_LEVEL)\n {\n return level\n }\n\n return 1\n}\n\nconst calculateZoomLevel = cordinates => {\n const zoomLevels = [];\n cordinates.forEach(cordinate => {\n zoomLevels.push(\n zoomLevel(\n cordinate.start.latitude,\n cordinate.start.longitude,\n cordinate.stop.latitude,\n cordinate.stop.longitude,\n ),\n );\n });\n return Math.min(...zoomLevels);\n};\n\nexport default calculateZoomLevel;\n","import React, { Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport Card from '@wtag/rcl-card';\nimport { AnimatedProgressbar, DateTime } from '@wtag/react-comp-lib';\nimport Icon from '@wtag/rcl-icon';\nimport Map from '@wtag/rcl-map';\nimport calculateCenterCoordinates from 'sharedWebpack/helpers/calculateCenterCoordinates';\nimport calculateZoomLevel from 'sharedWebpack/helpers/calculateZoomLevel';\nimport getTripType from '../../../../lib/helpers/getTripType';\nimport { MULTICITY, ROUNDTRIP } from '../../../../lib/helpers/tripTypes';\nimport './style.scss';\n\nconst LoadingInformationCard = ({ searchInformation, searchCompleted, airports, expand }) => {\n const { trips, adults, children, infants } = searchInformation;\n const firstAirport = trips[0] && airports[trips[0].origin];\n const [firstTrip] = trips;\n const lastTrip = trips[trips.length - 1];\n const updatedTrips = firstTrip && [\n { originCode: firstTrip.origin, destinationCode: firstTrip.destination },\n ];\n if (trips.length > 1) {\n updatedTrips.push({\n originCode: lastTrip.origin,\n destinationCode: lastTrip.destination,\n });\n }\n const tripType = trips.length > 2 ? MULTICITY : getTripType(updatedTrips);\n const lastAirport =\n tripType && airports[tripType === ROUNDTRIP ? lastTrip.origin : lastTrip.destination];\n const departureDate = trips[0] && trips[0].date;\n const cabinClass = trips[0] && trips[0].cabinClass;\n\n const mapCoordinates =\n airports &&\n trips &&\n trips.map(trip => {\n const segmentOriginCoordinations = airports[trip.origin];\n const segmentDestinationCoordinations = airports[trip.destination];\n if (segmentOriginCoordinations && segmentDestinationCoordinations) {\n return {\n start: {\n date: trip.date,\n latitude: segmentOriginCoordinations.latitude,\n longitude: segmentOriginCoordinations.longitude,\n title: segmentOriginCoordinations.name,\n },\n stop: {\n date: trip.date,\n latitude: segmentDestinationCoordinations.latitude,\n longitude: segmentDestinationCoordinations.longitude,\n title: segmentDestinationCoordinations.name,\n },\n };\n }\n return null;\n });\n\n const numberOfTravelers = adults + children + infants;\n\n return (\n \n \n {expand && (\n \n {!searchCompleted && (\n \n )}\n \n
\n );\n};\n\nLoadingInformationCard.defaultProps = {\n airports: [],\n};\n\nLoadingInformationCard.propTypes = {\n searchInformation: PropTypes.shape({\n trips: PropTypes.arrayOf(\n PropTypes.shape({\n origin: PropTypes.string.isRequired,\n destination: PropTypes.string.isRequired,\n date: PropTypes.string.isRequired,\n cabinClass: PropTypes.string.isRequired,\n }),\n ).isRequired,\n adults: PropTypes.number.isRequired,\n children: PropTypes.number.isRequired,\n infants: PropTypes.number.isRequired,\n }).isRequired,\n searchCompleted: PropTypes.bool.isRequired,\n airports: PropTypes.arrayOf(\n PropTypes.shape({\n placeName: PropTypes.string.isRequired,\n countryFlag: PropTypes.string.isRequired,\n countryName: PropTypes.string.isRequired,\n }),\n ),\n expand: PropTypes.bool.isRequired,\n};\n\nexport default LoadingInformationCard;\n","import { connect } from 'react-redux';\nimport LoadingInformationCard from '.';\n\nconst mapStateToProps = state => ({\n airports: state.common.airports,\n});\n\nexport default connect(mapStateToProps)(LoadingInformationCard);\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport LoadingInformationCard from './LoadingInformationCard/LoadingInformationCardContainer';\n\nconst SearchLoadingScreen = ({ searchInformation, searchCompleted, expand }) => (\n \n
\n )}\n \n {I18n.t('components.ibe.search_loading.hotel.searching_for_best_options')}\n
\n \n
\n \n
\n {mapCoordinates[0] && (\n \n {I18n.t(tripType, {\n scope: 'components.ibe.search_loading.flight.searched_for',\n })}\n
\n {firstAirport && lastAirport && (\n \n \n {I18n.t('components.ibe.search_loading.flight.journey_title', {\n origin: `${firstAirport.placeName}, ${firstAirport.countryName}`,\n destination: `${lastAirport.placeName}, ${lastAirport.countryName}`,\n })}\n \n
\n )}\n \n
\n \n
\n \n {I18n.t('components.ibe.search_loading.flight.departure')}:\n
\n \n
\n \n {I18n.t('components.ibe.search_loading.hotel.travelers_count', {\n count: numberOfTravelers,\n })}\n {` | ${I18n.t(cabinClass, {\n scope: 'cabin_classes',\n })}`}\n
\n \n
\n \n
\n \n
\n \n {I18n.t('components.ibe.search_loading.search_loading_text.hold_tight')}\n
\n \n {I18n.t('components.ibe.search_loading.search_loading_text.superior_search')}\n
\n \n
\n )}\n \n {searchInformation.trips && (\n
\n);\nSearchLoadingScreen.propTypes = {\n searchInformation: PropTypes.shape({\n trips: PropTypes.arrayOf(\n PropTypes.shape({\n origin: PropTypes.string.isRequired,\n destination: PropTypes.string.isRequired,\n date: PropTypes.string.isRequired,\n cabinClass: PropTypes.string.isRequired,\n }),\n ).isRequired,\n adults: PropTypes.number.isRequired,\n children: PropTypes.number.isRequired,\n infants: PropTypes.number.isRequired,\n }).isRequired,\n searchCompleted: PropTypes.bool.isRequired,\n expand: PropTypes.bool.isRequired,\n};\n\nexport default SearchLoadingScreen;\n","const getCarLocationDetails = (airports, locationAttributes, isAirportSearchEnabled) => {\n let address;\n let dropOffAddress;\n let pickUpLatitude;\n let pickUpLongitude;\n let dropOffLatitude;\n let dropOffLongitude;\n\n if (isAirportSearchEnabled) {\n const { pickUpLocationAirportCode, dropOffLocationAirportCode } = locationAttributes;\n\n const pickUpAirport = airports[pickUpLocationAirportCode];\n const dropOffAirport = airports[dropOffLocationAirportCode];\n\n if (pickUpAirport && dropOffAirport) {\n address = `${pickUpAirport.name} (${pickUpAirport.code})`;\n dropOffAddress = `${dropOffAirport.name} (${dropOffAirport.code})`;\n pickUpLatitude = pickUpAirport.latitude;\n pickUpLongitude = pickUpAirport.longitude;\n dropOffLatitude = dropOffAirport.latitude;\n dropOffLongitude = dropOffAirport.longitude;\n }\n } else {\n const {\n pickUpGeoLocationAddress,\n dropOffGeoLocationAddress,\n pickUpGeoLocationLatitude,\n pickUpGeoLocationLongitude,\n dropOffGeoLocationLatitude,\n dropOffGeoLocationLongitude,\n } = locationAttributes;\n\n address = pickUpGeoLocationAddress;\n dropOffAddress = dropOffGeoLocationAddress;\n pickUpLatitude = pickUpGeoLocationLatitude;\n pickUpLongitude = pickUpGeoLocationLongitude;\n dropOffLatitude = dropOffGeoLocationLatitude;\n dropOffLongitude = dropOffGeoLocationLongitude;\n }\n\n return {\n address,\n dropOffAddress,\n pickUpLatitude,\n pickUpLongitude,\n dropOffLatitude,\n dropOffLongitude,\n };\n};\n\nexport default getCarLocationDetails;\n","import React from 'react';\nimport { AnimatedProgressbar, I18nText } from '@wtag/react-comp-lib';\n\nconst AnimationBar = () => (\n \n
\n);\n\nexport default AnimationBar;\n","import React from 'react';\nimport Icon from '@wtag/rcl-icon';\nimport { I18nText } from '@wtag/react-comp-lib';\n\nconst InformationMessage = () => (\n \n
\n \n
\n);\n\nexport default InformationMessage;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { I18nText } from '@wtag/react-comp-lib';\nimport DateTime from 'sharedWebpack/DateTime';\nimport { DATE_FORMAT_SHORT_WITH_TIME } from 'sharedWebpack/helpers/dateTime';\n\nconst DateTimeWithLabel = ({ label, dateTime }) => (\n \n
\n \n
\n \n
\n \n
\n \n
\n);\n\nDateTimeWithLabel.propTypes = {\n label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n dateTime: PropTypes.string.isRequired,\n};\n\nconst CarRentalDuration = ({ pickUpDateTime, dropOffDateTime }) => (\n {label}:
\n \n
\n \n
\n);\n\nCarRentalDuration.propTypes = {\n pickUpDateTime: PropTypes.string.isRequired,\n dropOffDateTime: PropTypes.string.isRequired,\n};\n\nexport default CarRentalDuration;\n","import React, { useEffect, Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport moment from 'moment';\nimport Card from '@wtag/rcl-card';\nimport { I18nText } from '@wtag/react-comp-lib';\nimport Map from '@wtag/rcl-map';\nimport getCarLocationDetails from 'sharedWebpack/IBE/Search/car/helpers/getCarLocationDetails';\nimport AnimationBar from './subComponents/AnimationBar';\nimport InformationMessage from './subComponents/InformationMessage';\nimport CarRentalDuration from './subComponents/CarRentalDuration';\n\nconst LoadingInformationCard = ({\n searchInformation,\n searchCompleted,\n airports,\n fetchAirportDetails,\n expand,\n}) => {\n const {\n airportSearch,\n driverAge,\n dropOffDate,\n dropOffGeoLocationAddress,\n dropOffGeoLocationLatitude,\n dropOffGeoLocationLongitude,\n dropOffLocationAirportCode,\n dropOffTime,\n pickUpDate,\n pickUpGeoLocationAddress,\n pickUpGeoLocationLatitude,\n pickUpGeoLocationLongitude,\n pickUpLocationAirportCode,\n pickUpTime,\n } = searchInformation;\n\n const locationAttributes = {\n pickUpGeoLocationAddress,\n dropOffGeoLocationAddress,\n pickUpGeoLocationLatitude,\n pickUpGeoLocationLongitude,\n dropOffGeoLocationLatitude,\n dropOffGeoLocationLongitude,\n pickUpLocationAirportCode,\n dropOffLocationAirportCode,\n };\n\n const locationDetails = getCarLocationDetails(airports, locationAttributes, airportSearch);\n\n const {\n address,\n dropOffAddress,\n pickUpLatitude,\n pickUpLongitude,\n dropOffLatitude,\n dropOffLongitude,\n } = locationDetails;\n\n const formatDate = (date, time) =>\n moment(date)\n .add(moment.duration(time))\n .format('lll');\n\n const formattedPickUpDate = formatDate(pickUpDate, pickUpTime);\n const formattedDropOffDate = formatDate(dropOffDate, dropOffTime);\n\n const locationData = [\n {\n pickUp: {\n date: formattedPickUpDate,\n latitude: pickUpLatitude,\n longitude: pickUpLongitude,\n title: address,\n },\n dropOff: {\n date: formattedDropOffDate,\n latitude: dropOffLatitude,\n longitude: dropOffLongitude,\n title: dropOffAddress,\n },\n },\n ];\n\n useEffect(() => {\n if (airportSearch) {\n fetchAirportDetails(pickUpLocationAirportCode);\n fetchAirportDetails(dropOffLocationAirportCode);\n }\n }, []);\n\n return (\n \n \n {expand && (\n \n {!searchCompleted && \n )}\n \n
\n );\n};\n\nLoadingInformationCard.propTypes = {\n expand: PropTypes.bool.isRequired,\n fetchAirportDetails: PropTypes.func.isRequired,\n airports: PropTypes.arrayOf(\n PropTypes.shape({\n code: PropTypes.string,\n name: PropTypes.string,\n latitude: PropTypes.number,\n longitude: PropTypes.number,\n }),\n ).isRequired,\n searchInformation: PropTypes.shape({\n airportSearch: PropTypes.bool,\n driverAge: PropTypes.number,\n dropOffDate: PropTypes.string,\n dropOffGeoLocationAddress: PropTypes.string,\n dropOffGeoLocationLatitude: PropTypes.number,\n dropOffGeoLocationLongitude: PropTypes.number,\n dropOffLocationAirportCode: PropTypes.string,\n dropOffTime: PropTypes.string,\n pickUpDate: PropTypes.string,\n pickUpGeoLocationAddress: PropTypes.string,\n pickUpGeoLocationLatitude: PropTypes.number,\n pickUpGeoLocationLongitude: PropTypes.number,\n pickUpLocationAirportCode: PropTypes.string,\n pickUpTime: PropTypes.string,\n }).isRequired,\n searchCompleted: PropTypes.bool.isRequired,\n};\n\nexport default LoadingInformationCard;\n","import { connect } from 'react-redux';\nimport LoadingInformationCard from './LoadingInformationCard';\nimport { fetchAirportDetails } from '../../../../actions/common';\n\nconst mapStateToProps = state => ({\n airports: state.common.airports,\n});\n\nconst mapDispatchToProps = dispatch => ({\n fetchAirportDetails: code => dispatch(fetchAirportDetails(code)),\n});\n\nexport default connect(mapStateToProps, mapDispatchToProps)(LoadingInformationCard);\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport LoadingInformationCard from './LoadingInformationCardContainer';\n\nconst SearchLoadingScreen = ({ searchInformation, searchCompleted, expand }) => (\n \n
\n \n
\n \n
\n {address}
\n \n
\n \n
\n \n
\n);\n\nSearchLoadingScreen.propTypes = {\n searchInformation: PropTypes.shape({\n airportSearch: PropTypes.bool,\n driverAge: PropTypes.number,\n dropOffDate: PropTypes.string,\n dropOffGeoLocationAddress: PropTypes.string,\n dropOffGeoLocationLatitude: PropTypes.number,\n dropOffGeoLocationLongitude: PropTypes.number,\n dropOffLocationAirportCode: PropTypes.string,\n dropOffTime: PropTypes.string,\n pickUpDate: PropTypes.string,\n pickUpGeoLocationAddress: PropTypes.string,\n pickUpGeoLocationLatitude: PropTypes.number,\n pickUpGeoLocationLongitude: PropTypes.number,\n pickUpLocationAirportCode: PropTypes.string,\n pickUpTime: PropTypes.string,\n }).isRequired,\n searchCompleted: PropTypes.bool.isRequired,\n expand: PropTypes.bool.isRequired,\n};\n\nexport default SearchLoadingScreen;\n","import React, { Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport Card from '@wtag/rcl-card';\nimport { AnimatedProgressbar } from '@wtag/react-comp-lib';\nimport Icon from '@wtag/rcl-icon';\nimport Map from '@wtag/rcl-map';\nimport { FormatDateTime, DATE_FORMAT_SHORT } from 'sharedWebpack/helpers/dateTime';\nimport DateTimeLocaleInterpolationWrapper from 'sharedWebpack/DateTimeLocaleInterpolationWrapper';\n\nconst LoadingInformationCard = ({ searchInformation, searchCompleted }) => {\n const isSearchInformationEmpty = Object.keys(searchInformation).length === 0;\n\n if (isSearchInformationEmpty) return null;\n\n const {\n address,\n adults,\n checkIn,\n checkOut,\n children,\n latitude,\n longitude,\n numberOfRooms,\n } = searchInformation;\n\n const numberOfTravelers = adults + children;\n const animatedProgressBarText = [\n I18n.t('components.ibe.search_loading.search_loading_text.request_hotel'),\n I18n.t('components.ibe.search_loading.search_loading_text.check'),\n I18n.t('components.ibe.search_loading.search_loading_text.fetch'),\n I18n.t('components.ibe.search_loading.search_loading_text.prepare'),\n ];\n const hotelDataForMap = [\n {\n title: address,\n checkIn,\n checkOut,\n latitude,\n longitude,\n },\n ];\n const bookingInformationText = `${I18n.t('components.ibe.search_loading.hotel.travelers_count', {\n count: numberOfTravelers,\n })} | ${I18n.t('components.ibe.search_loading.hotel.rooms_count', {\n count: numberOfRooms,\n })}`;\n\n const getFormattedDate = (date, localeKey) => (\n \n \n \n \n {!searchCompleted && (\n \n \n
\n );\n};\n\nLoadingInformationCard.propTypes = {\n searchInformation: PropTypes.shape({\n address: PropTypes.string.isRequired,\n adults: PropTypes.number.isRequired,\n checkIn: PropTypes.string.isRequired,\n checkOut: PropTypes.string.isRequired,\n children: PropTypes.number.isRequired,\n latitude: PropTypes.number.isRequired,\n longitude: PropTypes.number.isRequired,\n numberOfRooms: PropTypes.number.isRequired,\n }).isRequired,\n searchCompleted: PropTypes.bool.isRequired,\n};\n\nexport default LoadingInformationCard;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport LoadingInformationCard from './LoadingInformationCard';\n\nconst SearchLoadingScreen = ({ searchInformation, searchCompleted }) => (\n \n
\n )}\n \n {I18n.t('components.ibe.search_loading.hotel.searching_for_best_options')}\n
\n \n
\n \n
\n \n {I18n.t('components.ibe.search_loading.hotel.searched_for')}\n
\n {address}
\n \n
\n \n
\n \n {getFormattedDate(checkIn, 'components.ibe.search_loading.hotel.check_in')}\n
\n \n
\n \n {getFormattedDate(checkOut, 'components.ibe.search_loading.hotel.check_out')}\n
\n \n {bookingInformationText}\n
\n \n
\n \n
\n \n
\n \n {I18n.t('components.ibe.search_loading.search_loading_text.hold_tight')}\n
\n \n {I18n.t('components.ibe.search_loading.search_loading_text.superior_search')}\n
\n \n
\n \n
\n);\n\nSearchLoadingScreen.propTypes = {\n searchInformation: PropTypes.shape({\n trips: PropTypes.arrayOf(\n PropTypes.shape({\n origin: PropTypes.string.isRequired,\n destination: PropTypes.string.isRequired,\n date: PropTypes.string.isRequired,\n cabinClass: PropTypes.string.isRequired,\n }),\n ).isRequired,\n adults: PropTypes.number.isRequired,\n children: PropTypes.number.isRequired,\n infants: PropTypes.number.isRequired,\n }).isRequired,\n searchCompleted: PropTypes.bool.isRequired,\n};\n\nexport default SearchLoadingScreen;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Icon from '@wtag/rcl-icon';\nimport Tooltip from '@wtag/rcl-tooltip';\nimport { Link } from 'react-router-dom';\nimport searchURL from '../../lib/helpers/searchURL';\nimport './styles.scss';\n\nconst SearchedOptions = ({\n formType,\n searchParamsId,\n totalOptionsFound,\n totalOptionsPerSupplier,\n laymanMode,\n}) => {\n const isShowTooltip = !laymanMode && totalOptionsPerSupplier.length > 0;\n\n return (\n \n \n {totalOptionsFound}\n \n {isShowTooltip && (\n \n \n \n \n )}\n
\n );\n};\n\nSearchedOptions.propTypes = {\n formType: PropTypes.string.isRequired,\n searchParamsId: PropTypes.string.isRequired,\n totalOptionsFound: PropTypes.string.isRequired,\n totalOptionsPerSupplier: PropTypes.arrayOf(PropTypes.node).isRequired,\n laymanMode: PropTypes.bool.isRequired,\n};\n\nexport default SearchedOptions;\n","export const SORT_BY_PRICE_LOWEST = 'price_asc';\nexport const SORT_BY_ARRIVAL_EARLIEST = 'arrival_asc';\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { fetchFlightSearchResults, filterFlightSearch } from 'sharedWebpack/IBE/actions/flight';\nimport { connect } from 'react-redux';\nimport Button from '@wtag/rcl-button';\nimport classNames from 'classnames';\nimport { SORT_BY_ARRIVAL_EARLIEST, SORT_BY_PRICE_LOWEST } from '../../../helpers/flightSortTypes';\nimport './styles.scss';\n\nconst FilterButton = ({ sortBy, sortFlightSearch }) => (\n \n sortFlightSearch('sortBy', SORT_BY_PRICE_LOWEST)}\n />\n sortFlightSearch('sortBy', SORT_BY_ARRIVAL_EARLIEST)}\n />\n
\n);\n\nFilterButton.propTypes = {\n sortBy: PropTypes.string.isRequired,\n sortFlightSearch: PropTypes.func.isRequired,\n};\n\nconst mapStateToProps = (state, ownProps) => {\n let searchParamsId = 'lastSearch';\n if (ownProps.match.params.searchId) {\n searchParamsId = ownProps.match.params.searchId;\n }\n\n return {\n sortBy:\n searchParamsId !== 'lastSearch' &&\n state.flights &&\n state.flights.searchFilterParamsBySearchId[searchParamsId]\n ? state.flights.searchFilterParamsBySearchId[searchParamsId].sortBy\n : SORT_BY_PRICE_LOWEST,\n };\n};\n\nconst mapDispatchToProps = (dispatch, ownProps) => ({\n sortFlightSearch: (filter, value, key, isAllChecked) => {\n const { searchId, tripId } = ownProps.match.params;\n dispatch(filterFlightSearch(filter, value, key, searchId, tripId, isAllChecked));\n dispatch(fetchFlightSearchResults({ searchId, tripId }));\n },\n});\n\nexport default connect(mapStateToProps, mapDispatchToProps)(FilterButton);\n","import React, { useEffect, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport Card from '@wtag/rcl-card';\nimport IconButton from '@wtag/rcl-icon-button';\nimport Icon from '@wtag/rcl-icon';\nimport classNames from 'classnames';\nimport useViewMode from 'sharedWebpack/useViewMode';\nimport SearchedOptions from '../SearchedOptions';\nimport FilterButton from '../../helpers/FilterButton';\nimport { TYPE_COMPACT, TYPE_STANDARD } from '../../../helpers/viewType';\nimport { DESKTOP_DEVICE } from '../../../old/libraries/responsiveHelpers';\nimport { HOTEL_SEARCH_TAB } from '../../../helpers/getSearchTabIndex';\nimport './styles.scss';\n\nconst SearchSubHeader = ({\n totalResultsCount = 0,\n match,\n searchParamsId,\n laymanMode,\n totalOptionsPerSupplier,\n isSearchCompleted,\n viewMode,\n updateViewMode,\n}) => {\n const [currentTab, setCurrentTab] = useState(0);\n const tabToLastSearchMapper = ['flight', 'hotel', 'car'];\n const currentPath = `/${match.path.split('/')[1]}`;\n const tabToFormMapper = ['/flights', '/hotels', '/cars', '/static'];\n const totalOptionsFound = I18n.t('components.ibe.search_form.label.total_results', {\n count: totalResultsCount,\n });\n const isLargeScreen = useViewMode() === DESKTOP_DEVICE;\n const iconButtonSize = isLargeScreen ? 'xs' : 'xxs';\n\n useEffect(() => {\n const currentTabIndex = tabToFormMapper.indexOf(currentPath);\n setCurrentTab(currentTabIndex);\n }, []);\n\n const formType = tabToLastSearchMapper[currentTab];\n\n return (\n \n
\n ) : (\n \n {I18n.t('components.ibe.search_form.label.searching')}\n \n )}\n \n {totalOptionsPerSupplier && (\n
\n \n \n \n {I18n.t('components.ibe.search_results.filters.results_by')}\n \n
\n )}\n \n \n {I18n.t('components.ibe.search_results.filters.layout')}\n \n
\n \n onCarSearchResultSort(SORT_BY_FILTER_KEY, SORT_BY_PRICE_CHEAPEST)}\n />\n onCarSearchResultSort(SORT_BY_FILTER_KEY, SORT_BY_PRICE_HIGHEST)}\n />\n
\n);\n\nCarFilterButton.propTypes = {\n sortBy: PropTypes.string.isRequired,\n onCarSearchResultSort: PropTypes.func.isRequired,\n};\n\nconst mapStateToProps = (state, ownProps) => {\n let searchParamsId = LAST_SEARCH;\n if (ownProps.match.params.searchId) {\n searchParamsId = ownProps.match.params.searchId;\n }\n\n const carSearchFilterParams = state.cars.searchFilterParamsBySearchId[searchParamsId];\n const shouldSortByCarSearchFilterParams = searchParamsId !== LAST_SEARCH && carSearchFilterParams;\n const sortBy = shouldSortByCarSearchFilterParams\n ? carSearchFilterParams.sortBy\n : SORT_BY_PRICE_CHEAPEST;\n\n return {\n sortBy,\n };\n};\n\nconst mapDispatchToProps = (dispatch, ownProps) => ({\n onCarSearchResultSort: (filter, value) =>\n dispatch(filterCarSearch(filter, value, ownProps.match.params.searchId)),\n});\n\nexport default connect(mapStateToProps, mapDispatchToProps)(CarFilterButton);\n","import React, { useEffect, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport Card from '@wtag/rcl-card';\nimport IconButton from '@wtag/rcl-icon-button';\nimport Icon from '@wtag/rcl-icon';\nimport useViewMode from 'sharedWebpack/useViewMode';\nimport { TYPE_COMPACT, TYPE_STANDARD } from 'sharedWebpack/helpers/viewType';\nimport { DESKTOP_DEVICE } from 'sharedWebpack/old/libraries/responsiveHelpers';\nimport { TYPE_FLIGHT, TYPE_HOTEL, TYPE_CAR } from 'sharedWebpack/helpers/itemTypes';\nimport SearchedOptions from '../../SearchedOptions';\nimport CarFilterButton from '../CarFilterButton';\nimport './styles.scss';\n\nconst CarSearchSubHeader = ({\n totalResultsCount = 0,\n match,\n searchParamsId,\n laymanMode,\n totalOptionsPerSupplier,\n isSearchCompleted,\n viewMode,\n onUpdateViewMode,\n}) => {\n const [currentTab, setCurrentTab] = useState(0);\n const tabToLastSearchMapper = [TYPE_FLIGHT, TYPE_HOTEL, TYPE_CAR];\n const currentPath = `/${match.path.split('/')[1]}`;\n const tabToFormMapper = ['/flights', '/hotels', '/cars', '/static'];\n const totalOptionsFoundText = I18n.t('components.ibe.search_form.label.total_results', {\n count: totalResultsCount,\n });\n const isLargeScreen = useViewMode() === DESKTOP_DEVICE;\n const iconButtonSize = isLargeScreen ? 'xs' : 'xxs';\n\n useEffect(() => {\n const currentTabIndex = tabToFormMapper.indexOf(currentPath);\n setCurrentTab(currentTabIndex);\n }, []);\n\n const formType = tabToLastSearchMapper[currentTab];\n\n return (\n \n
\n ) : (\n \n {I18n.t('components.ibe.search_form.label.searching')}\n \n )}\n \n {totalOptionsPerSupplier && (\n
\n \n \n \n {I18n.t('components.ibe.search_results.filters.results_by')}\n \n
\n \n \n {I18n.t('components.ibe.search_results.filters.layout')}\n \n
\n \n \n \n ) : (\n
\n )}\n \n \n {code}\n
\n {isShowTooltipOfAirportCountry ? (\n {airportCountry}
\n \n {airportCountry}\n
\n )}\n \n
\n );\n};\n\nTripRouteInformation.propTypes = {\n firstTrip: PropTypes.shape({\n origin: PropTypes.string.isRequired,\n destination: PropTypes.string.isRequired,\n }).isRequired,\n lastTrip: PropTypes.shape({\n origin: PropTypes.string.isRequired,\n destination: PropTypes.string.isRequired,\n }).isRequired,\n tripType: PropTypes.string.isRequired,\n};\n\nexport default TripRouteInformation;\n","import React, { Fragment } from 'react';\nimport Card from '@wtag/rcl-card';\nimport Button from '@wtag/rcl-button';\nimport Badge from '@wtag/rcl-badge';\nimport PropTypes from 'prop-types';\nimport Icon from '@wtag/rcl-icon';\nimport IconButton from '@wtag/rcl-icon-button';\nimport { DateTime } from '@wtag/react-comp-lib';\nimport useViewMode from 'sharedWebpack/useViewMode';\nimport TripRouteInformation from '../TripRouteInformation';\nimport TripDetailsItem from '../TripDetailsItem';\nimport getTripType from '../../lib/helpers/getTripType';\nimport { ROUNDTRIP } from '../../lib/helpers/tripTypes';\nimport { DESKTOP_DEVICE } from '../../../old/libraries/responsiveHelpers';\nimport './styles.scss';\n\nconst ShoppingCart = ({ cartId, cartItemsCount }) => (\n \n
\n \n
\n \n onModifySearch(!isCollapsed)}\n version=\"v2\"\n size=\"tiny\"\n label={isLargeScreen ? modifyButtonLabel :
\n \n
\n );\n }\n\n const iconWithLabel = (\n \n
\n );\n\n if (isTooltipVisible) {\n return (\n \n
\n);\n\nCarHeaderAttributeItem.propTypes = {\n header: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,\n};\n\nconst CarSearchHeader = ({\n isCollapsed,\n onModifySearch,\n searchParams,\n expand,\n onExpand,\n cartId,\n cartItemsCount,\n onCartClick,\n showContinueButton,\n onMatrixPageRender,\n airports,\n onFetchAirportDetails,\n}) => {\n const {\n pickUpLocationAirportCode,\n dropOffLocationAirportCode,\n pickUpGeoLocationAddress,\n dropOffGeoLocationAddress,\n pickUpDate,\n dropOffDate,\n driverAge,\n airportSearch,\n } = searchParams;\n\n const isLargeScreen = useViewMode() === DESKTOP_DEVICE;\n const chevronIconName = expand ? 'iconUpChevron' : 'iconDownChevron';\n const modifyButtonLabelInDesktopView = isCollapsed\n ? I18n.t('components.ibe.search_form.label.modify_search')\n : I18n.t('components.ibe.search_form.label.hide_search');\n const modifyButtonLabelInMobileView = isCollapsed\n ? I18n.t('components.ibe.search_form.label.modify')\n : I18n.t('components.ibe.search_form.label.hide');\n\n const headerButtonLabel = isLargeScreen\n ? modifyButtonLabelInDesktopView\n : modifyButtonLabelInMobileView;\n const continueButtonLabel = isLargeScreen ? (\n I18n.t('components.ibe.search_form.label.continue')\n ) : (\n {header}
\n {value ? (\n {value}
\n ) : (\n \n
\n \n
\n \n
\n \n onModifySearch(!isCollapsed)}\n version=\"v2\"\n size=\"tiny\"\n label={headerButtonLabel}\n />\n {showContinueButton && (\n
\n \n
\n);\n\nHotelLocation.propTypes = { address: PropTypes.string.isRequired };\n\nexport default HotelLocation;\n","import { FormatDateTime, DATE_FORMAT_SHORT } from 'sharedWebpack/helpers/dateTime';\nimport moment from 'moment';\n\nconst getFormattedDate = date =>\n FormatDateTime({\n dateTime: date,\n displayWithoutConversion: true,\n format: DATE_FORMAT_SHORT,\n });\n\nconst getHotelStayInformation = (\n checkIn,\n checkOut,\n numberOfRooms,\n traveler,\n isHotelDetailsPage,\n) => {\n const checkInTime = getFormattedDate(checkIn);\n const checkOutTime = getFormattedDate(checkOut);\n const numberOfNights = moment(checkOut).diff(moment(checkIn), 'days');\n const durationOfStay = `${checkInTime} - ${checkOutTime}\n (${I18n.t(\n 'admin.components.orders.overview.travel_plan.hotel.header.duration_of_stays.number_of_nights',\n {\n count: numberOfNights,\n },\n )})`;\n\n const hotelStayInformation = [];\n\n if (isHotelDetailsPage) {\n hotelStayInformation.push({\n title: I18n.t(\n 'admin.components.orders.overview.travel_plan.hotel.header.duration_of_stays.label',\n {\n count: numberOfNights,\n },\n ),\n subtitle: durationOfStay,\n });\n } else {\n hotelStayInformation.push(\n {\n title: I18n.t('admin.components.orders.overview.travel_plan.hotel.header.check_in.label'),\n subtitle: checkInTime,\n },\n {\n title: I18n.t('admin.components.orders.overview.travel_plan.hotel.header.check_out.label'),\n subtitle: checkOutTime,\n },\n );\n }\n\n hotelStayInformation.push(\n {\n title: I18n.t('admin.components.orders.overview.travel_plan.hotel.header.room.label'),\n subtitle: I18n.t('components.ibe.search_form.hotel.label.number_of_rooms', {\n count: numberOfRooms,\n }),\n },\n {\n title: I18n.t('simple_form.labels.order_search.traveler'),\n subtitle: traveler,\n },\n );\n\n return hotelStayInformation;\n};\n\nexport default getHotelStayInformation;\n","import React, { Fragment } from 'react';\nimport Card from '@wtag/rcl-card';\nimport Button from '@wtag/rcl-button';\nimport Badge from '@wtag/rcl-badge';\nimport PropTypes from 'prop-types';\nimport Icon from '@wtag/rcl-icon';\nimport IconButton from '@wtag/rcl-icon-button';\nimport useViewMode from 'sharedWebpack/useViewMode';\nimport TripDetailsItem from '../TripDetailsItem';\nimport { DESKTOP_DEVICE } from '../../../old/libraries/responsiveHelpers';\nimport HotelLocation from '../HotelLocation';\nimport getHotelStayInformation from './getHotelStayInformation';\nimport './styles.scss';\n\nconst ShoppingCart = ({ cartId, cartItemsCount }) => (\n \n {I18n.t('admin.components.orders.overview.travel_plan.hotel.header.location.label')}\n
\n {address}
\n \n
\n \n {hotelStayInformation.map(({ title, subtitle }) => (\n
\n \n onModifySearch(!isCollapsed)}\n version=\"v2\"\n size=\"small\"\n label={modifySearchButtonLabel}\n />\n
\n \n {exchangeEnabled\n ? I18n.t('components.ibe.search_form.exchange_unavailable_subheader')\n : I18n.t('components.ibe.search_form.search_unavailable_subheader')}\n
\n )}\n {!laymanMode && (\n \n \n {I18n.t(supplier.key, { scope: 'channels' })}\n \n \n {`: ${supplier.docCount} ${I18n.t('components.ibe.search_form.label.options')}`}\n \n
\n \n ));\n\n const totalOptionsFound = I18n.t('components.ibe.search_form.label.total_results', {\n count: totalResultsCount,\n });\n\n const flightForm = {\n key: 0,\n tabNum: 0,\n url: '/flights',\n title: (\n \n setIsCollapsed(true)}\n formWithoutChildren={formWithoutChildren}\n resetBookingAppContext={resetBookingAppContext}\n travelArrangerPresent={travelArrangerPresent}\n travelerLoggedIn={travelerLoggedIn}\n laymanMode={laymanMode}\n isMultiCitySelected={isMultiCitySelected}\n setIsMultiCitySelected={setIsMultiCitySelected}\n wtsEnabled={wtsEnabled}\n tripType={tripType}\n setTripType={setTripType}\n isFromLastSearch={isFromLastSearch}\n setIsFromLastSearch={setIsFromLastSearch}\n canExcludeWtsContent={canExcludeWtsContent}\n callbackParams={callbackParams}\n preselectDecision={preselectDecision}\n updatePreselectTravelers={updatePreselectTravelers}\n />\n
\n ),\n };\n\n const hotelForm = {\n key: 1,\n tabNum: 1,\n url: '/hotels',\n title: (\n \n setIsCollapsed(true)}\n formWithoutChildren={formWithoutChildren}\n resetBookingAppContext={resetBookingAppContext}\n travelArrangerPresent={travelArrangerPresent}\n travelerLoggedIn={travelerLoggedIn}\n callbackParams={callbackParams}\n preselectDecision={preselectDecision}\n updatePreselectTravelers={updatePreselectTravelers}\n />\n
\n ),\n };\n\n const carForm = {\n key: 2,\n tabNum: 2,\n url: '/cars',\n title: (\n \n setIsCollapsed(true)}\n formWithoutChildren={formWithoutChildren}\n resetBookingAppContext={resetBookingAppContext}\n travelArrangerPresent={travelArrangerPresent}\n travelerLoggedIn={travelerLoggedIn}\n callbackParams={callbackParams}\n preselectDecision={preselectDecision}\n updatePreselectTravelers={updatePreselectTravelers}\n />\n
\n ),\n };\n\n const staticProductsForm = {\n key: 3,\n tabNum: 3,\n url: '/static',\n title: (\n \n
\n ),\n };\n\n const tabs = [];\n\n if (flightChannelsAvailable) {\n tabs.push(flightForm);\n }\n if (hotelChannelsAvailable) {\n tabs.push(hotelForm);\n }\n if (carChannelsAvailable) {\n tabs.push(carForm);\n }\n if (!exchangeEnabled && props.hasStaticProducts) {\n tabs.push(staticProductsForm);\n }\n\n useEffect(() => {\n window.scrollTo(0, 0);\n }, [location]);\n\n useEffect(() => {\n const currentTabIndex = tabToFormMapper.indexOf(currentPath);\n\n // Checking if static product is missing or not after page refresh. If missing it will render to the flight form.\n setCurrentTab(\n !props.hasStaticProducts && currentTabIndex === STATIC_PRODUCT_SEARCH_TAB\n ? FLIGHT_SEARCH_TAB\n : currentTabIndex,\n );\n setShowBottomComponents(true);\n }, [props.hasStaticProducts]);\n\n useEffect(() => {\n setAdvancedForm(!props.laymanMode || props.forceAdvancedSearch);\n }, [props.laymanMode, props.forceAdvancedSearch]);\n\n useEffect(() => {\n if (tripType === MULTICITY) setAdvancedForm(true);\n }, [tripType]);\n\n useEffect(() => {\n if (!advancedForm) setIsMultiCitySelected(false);\n }, [advancedForm]);\n\n useEffect(() => {\n if (formWithoutChildren) {\n props.setOnSearchStarted(false);\n } else {\n props.setOnSearchStarted(true);\n }\n }, [props.children]);\n\n useEffect(() => {\n setExpanded(!isSearchCompleted);\n }, [isSearchCompleted]);\n\n const onCartClick = () => {\n setShowBottomComponents(false);\n history.push(`/carts/${cartId}`);\n };\n\n const groupOfSelectedFlightsKeys = groupOfSelectedFlights && Object.keys(groupOfSelectedFlights);\n\n const goToMatrixPage = () => {\n const selectedFlights = {};\n groupOfSelectedFlightsKeys.forEach(flightGroupKey => {\n selectedFlights[flightGroupKey] = groupOfSelectedFlights[flightGroupKey].id;\n });\n\n history.push(\n `/flights/searches/${searchParamsId}/matrix${stringifyQueryString(\n {\n flightGroups: selectedFlights,\n },\n { arrayFormat: 'repeat' },\n )}`,\n );\n };\n\n let searchResultHeader;\n\n switch (currentTab) {\n case FLIGHT_SEARCH_TAB:\n searchResultHeader = (\n \n {isFlightSearchParamsAvailable && (\n
\n );\n break;\n\n case HOTEL_SEARCH_TAB:\n searchResultHeader = (\n \n {isHotelSearchParamsAvailable && (\n
\n );\n break;\n\n case CAR_SEARCH_TAB:\n searchResultHeader = (\n \n
\n );\n break;\n\n default:\n searchResultHeader = (\n \n {isSearchCompleted ? (\n
\n );\n }\n\n let form;\n if (formWithoutChildren) {\n form = (\n \n \n {totalResultsCount > 0 && (\n {totalOptionsFound}\n )}\n \n \n {!laymanMode && totalOptionsPerSupplier.length > 0 && (\n \n \n )}\n \n
\n ) : (\n \n {I18n.t('components.ibe.search_form.label.searching')}\n \n )}\n \n setIsCollapsed(prev => !prev)}\n version=\"v2\"\n size=\"tiny\"\n label={\n isCollapsed\n ? I18n.t('components.ibe.search_form.label.modify_search')\n : I18n.t('components.ibe.search_form.label.hide_search')\n }\n />\n {showContinueButton && (\n
\n \n \n
\n \n
\n )}\n \n
\n \n
\n )}\n \n \n );\n } else {\n form = !isMatrixPage ? (\n \n {searchResultHeader}\n {!isCollapsed && tabs[currentTab] && (\n \n {tabs[currentTab].getContent()}\n
\n )}\n {lastSearchedParams && expanded && currentTab === FLIGHT_SEARCH_TAB && (\n \n
\n );\n}\n\nTotalPriceContainer.propTypes = {\n currency: PropTypes.string.isRequired,\n totalPrice: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n};\n\nexport default memo(TotalPriceContainer);\n","import React, { memo } from 'react';\nimport PropTypes from 'prop-types';\nimport ProductIcon from 'sharedWebpack/ProductIcon';\nimport Icon from '@wtag/rcl-icon';\nimport Amount from 'sharedWebpack/Amount';\n\nconst getTitle = type => {\n if (type === 'static_product') {\n return I18n.t('components.ibe.summary.static_product');\n }\n\n if (type === 'additionalCharges') {\n return I18n.t('components.ibe.summary.taxes_services_and_charges');\n }\n\n return I18n.t(type, { scope: 'components.ibe.summary.title' });\n};\n\nfunction CartSummaryAccordionItemHeader(props) {\n const { totalPrice, currency, type, onClick, isActive } = props;\n\n return (\n \n {I18n.t('components.ibe.cart_summary_total')}\n
\n \n
\n {getTitle(type)}
\n \n
\n \n );\n}\n\nCartSummaryAccordionItemHeader.defaultProps = {\n isActive: false,\n onClick: () => {},\n};\n\nCartSummaryAccordionItemHeader.propTypes = {\n type: PropTypes.string.isRequired,\n currency: PropTypes.string.isRequired,\n totalPrice: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n isActive: PropTypes.bool,\n onClick: PropTypes.func,\n};\n\nexport default memo(CartSummaryAccordionItemHeader);\n","import React, { memo } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nfunction CartSummaryAccordionItemBody(props) {\n const { children, isVisible } = props;\n\n return (\n \n
\n );\n}\n\nCar.defaultProps = {\n category: null,\n acrissCode: null,\n duration: 1,\n};\n\nCar.propTypes = {\n currency: PropTypes.string.isRequired,\n price: PropTypes.string.isRequired,\n category: PropTypes.string,\n acrissCode: PropTypes.string,\n duration: PropTypes.number,\n};\n\nexport default Car;\n","/* eslint-disable react/prop-types */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport formattedAmount from './formattedAmount';\n\nfunction Hotel(props) {\n const { price, duration, currency, rooms } = props;\n\n return (\n \n \n {category} {acrissCode}\n \n \n {formattedAmount(price / duration, currency)}{' '}\n {I18n.t('components.ibe.summary.per_day_avg')}\n \n
\n \n {rooms.map(room => (\n
\n );\n}\n\nHotel.defaultProps = {\n duration: 1,\n rooms: [],\n};\n\nHotel.propTypes = {\n currency: PropTypes.string.isRequired,\n price: PropTypes.string.isRequired,\n duration: PropTypes.number,\n rooms: PropTypes.arrayOf(PropTypes.shape()),\n};\n\nexport default Hotel;\n","/* eslint-disable react/prop-types */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport ContentLoaderPlaceholder from '@wtag/rcl-content-loader-placeholder';\nimport formattedAmount from './formattedAmount';\n\nfunction Seat(props) {\n const { currency, seatList, segmentsWithSeatId } = props;\n const countryIndicatorHandler = value =>\n value ? (\n `(${value.originCode} - ${value.destinationCode})`\n ) : (\n \n {room.name}\n \n {formattedAmount(price / duration, currency)}{' '}\n {I18n.t('components.ibe.summary.per_day_avg')}\n \n
\n ))}\n \n {seatList.map(seat => (\n
\n );\n}\n\nSeat.defaultProps = {\n seatList: [],\n segmentsWithSeatId: null,\n};\n\nSeat.propTypes = {\n currency: PropTypes.string.isRequired,\n seatList: PropTypes.arrayOf(PropTypes.shape()),\n segmentsWithSeatId: PropTypes.shape(),\n};\n\nexport default Seat;\n","/* eslint-disable react/prop-types */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport formattedAmount from './formattedAmount';\n\nfunction StaticProduct(props) {\n const { currency, quantity, unitPrice } = props;\n\n return (\n \n {seat.itemTitle}\n \n {countryIndicatorHandler(segmentsWithSeatId[seat.journeyElementId])}\n \n {formattedAmount(seat.grossTotal, currency)}\n
\n ))}\n \n \n {parseFloat(quantity)} x {formattedAmount(unitPrice, currency)}\n \n
\n );\n}\n\nStaticProduct.defaultProps = {\n unitPrice: '0.0',\n quantity: '0.0',\n};\n\nStaticProduct.propTypes = {\n currency: PropTypes.string.isRequired,\n unitPrice: PropTypes.string,\n quantity: PropTypes.string,\n};\n\nexport default StaticProduct;\n","/* eslint-disable react/prop-types */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport formattedAmount from './formattedAmount';\n\nfunction Service(props) {\n const { currency, quantity, unitPrice } = props;\n\n return (\n \n \n {parseInt(quantity, 10)} x {formattedAmount(unitPrice, currency)}\n \n
\n );\n}\n\nService.defaultProps = {\n unitPrice: '0.0',\n};\n\nService.propTypes = {\n currency: PropTypes.string.isRequired,\n unitPrice: PropTypes.string,\n};\n\nexport default Service;\n","/* eslint-disable react/prop-types */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport formattedAmount from './formattedAmount';\n\nfunction Fee(props) {\n const { currency, quantity, unitPrice } = props;\n\n return (\n \n \n {parseFloat(quantity)} x {formattedAmount(unitPrice, currency)}\n \n
\n );\n}\n\nFee.defaultProps = {\n unitPrice: '0.0',\n quantity: '0.0',\n};\n\nFee.propTypes = {\n currency: PropTypes.string.isRequired,\n unitPrice: PropTypes.string,\n quantity: PropTypes.string,\n};\n\nexport default Fee;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst Voucher = props => (\n \n {props.number}\n
\n);\n\nVoucher.propTypes = {\n number: PropTypes.string.isRequired,\n};\n\nexport default Voucher;\n","/* eslint-disable react/prop-types */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport Car from './Car';\nimport Hotel from './Hotel';\nimport Seat from './Seat';\nimport StaticProduct from './StaticProduct';\nimport Service from './Service';\nimport Fee from './Fee';\nimport Voucher from './Voucher';\n\nfunction ChildRow(props) {\n const {\n isVisible,\n journeyElementType,\n type,\n category,\n acrissCode,\n price,\n duration,\n currency,\n rooms,\n quantity,\n unitPrice,\n seatList,\n segmentsWithSeatId,\n number,\n } = props;\n\n return (\n \n \n
\n {props.name}
\n\n {props.pendingConfirmation && (\n \n
\n )}\n \n
\n \n \n {formattedPrice}\n
\n \n {count} x {I18n.t(passengerType, { scope: 'traveler.types' })}\n
\n \n {count} x
\n \n \n );\n };\n\n const travelerCountByType = type => {\n if (travelerCount && travelerCount[type]) return Number(travelerCount[type].length);\n\n return 0;\n };\n\n const showPriceBreakdown = () => {\n const adultsCount = travelerCountByType('adults');\n const childrenCount = travelerCountByType('children');\n const infantsCount = travelerCountByType('infants');\n\n return (\n \n (\n \n {trip.originCode} \n \n )}\n
\n );\n}\n\nFlight.defaultProps = {\n travelerCount: { adults: [{}], children: [], infants: [] },\n};\n\nFlight.propTypes = {\n travelerCount: PropTypes.shape({\n adults: PropTypes.arrayOf(PropTypes.shape({})),\n children: PropTypes.arrayOf(PropTypes.shape({})),\n infants: PropTypes.arrayOf(PropTypes.shape({})),\n }),\n item: PropTypes.shape({\n currency: PropTypes.string.isRequired,\n total: PropTypes.string.isRequired,\n available: PropTypes.bool,\n }).isRequired,\n journeyElement: PropTypes.shape({\n trips: PropTypes.arrayOf(\n PropTypes.shape({\n segments: PropTypes.arrayOf(\n PropTypes.shape({\n aircraftType: PropTypes.string.isRequired,\n destinationCode: PropTypes.string.isRequired,\n operatingCarrierCode: PropTypes.string.isRequired,\n operatingFlightNumber: PropTypes.string.isRequired,\n originCode: PropTypes.string.isRequired,\n }),\n ).isRequired,\n }),\n ).isRequired,\n fareCalculations: PropTypes.arrayOf(\n PropTypes.shape({\n currency: PropTypes.string,\n passengerType: PropTypes.string,\n price: PropTypes.string,\n }),\n ).isRequired,\n }).isRequired,\n};\nexport default withJourneyElement(Flight);\n","/* eslint-disable react/prop-types */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport Icon from '@wtag/rcl-icon';\nimport withJourneyElement from '../../../lib/decorators/withJourneyElement';\nimport Row from '../Row';\n\nconst countRooms = rooms =>\n rooms.reduce((roomA, roomB) => ({\n x: roomA.quantity + roomB.quantity,\n })).quantity;\n\nfunction Hotel(props) {\n const { journeyElement, item } = props;\n\n if (!journeyElement) return null;\n\n return (\n \n
\n );\n}\n\nHotel.propTypes = {\n item: PropTypes.shape({\n currency: PropTypes.string.isRequired,\n total: PropTypes.string.isRequired,\n available: PropTypes.bool,\n }).isRequired,\n journeyElement: PropTypes.shape({\n trips: PropTypes.arrayOf(\n PropTypes.shape({\n segments: PropTypes.arrayOf(\n PropTypes.shape({\n aircraftType: PropTypes.string.isRequired,\n destinationCode: PropTypes.string.isRequired,\n operatingCarrierCode: PropTypes.string.isRequired,\n operatingFlightNumber: PropTypes.string.isRequired,\n originCode: PropTypes.string.isRequired,\n }),\n ).isRequired,\n }),\n ).isRequired,\n }).isRequired,\n};\nexport default withJourneyElement(Hotel);\n","/* eslint-disable react/prop-types */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport withJourneyElement from '../../../lib/decorators/withJourneyElement';\nimport Row from '../Row';\n\nfunction Car(props) {\n const { journeyElement, item } = props;\n\n if (!journeyElement) return null;\n\n return (\n \n
\n );\n}\n\nCar.propTypes = {\n item: PropTypes.shape({\n currency: PropTypes.string.isRequired,\n total: PropTypes.string.isRequired,\n available: PropTypes.bool,\n }).isRequired,\n journeyElement: PropTypes.shape({\n trips: PropTypes.arrayOf(\n PropTypes.shape({\n segments: PropTypes.arrayOf(\n PropTypes.shape({\n aircraftType: PropTypes.string.isRequired,\n destinationCode: PropTypes.string.isRequired,\n operatingCarrierCode: PropTypes.string.isRequired,\n operatingFlightNumber: PropTypes.string.isRequired,\n originCode: PropTypes.string.isRequired,\n }),\n ).isRequired,\n }),\n ).isRequired,\n }).isRequired,\n};\nexport default withJourneyElement(Car);\n","/* eslint-disable react/prop-types */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport Icon from '@wtag/rcl-icon';\nimport classNames from 'classnames';\n\nimport Row from '../Row';\n\nfunction StaticProduct(props) {\n const { item } = props;\n\n return (\n \n
\n );\n}\n\nFee.propTypes = {\n item: PropTypes.shape({\n currency: PropTypes.string.isRequired,\n name: PropTypes.string.isRequired,\n grossAmount: PropTypes.string.isRequired,\n type: PropTypes.string.isRequired,\n quantity: PropTypes.string.isRequired,\n grossPrice: PropTypes.string.isRequired,\n }).isRequired,\n};\nexport default Fee;\n","/* eslint-disable react/prop-types */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport Row from '../Row';\n\nfunction Payment(props) {\n const { item } = props;\n\n return (\n \n
\n );\n}\n\nPayment.propTypes = {\n item: PropTypes.shape({\n currency: PropTypes.string.isRequired,\n name: PropTypes.string.isRequired,\n grossAmount: PropTypes.string.isRequired,\n type: PropTypes.string.isRequired,\n quantity: PropTypes.string.isRequired,\n grossPrice: PropTypes.string.isRequired,\n }).isRequired,\n};\nexport default Payment;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport withJourneyElement from '../../lib/decorators/withJourneyElement';\nimport FlightItem from './Items/Flight';\nimport HotelItem from './Items/Hotel';\nimport CarItem from './Items/Car';\nimport StaticProduct from './Items/StaticProduct';\nimport Fee from './Items/Fee';\nimport Payment from './Items/Payment';\nimport './styles.scss';\n\nconst CartItemWrapper = props => {\n const { item } = props;\n const availableComponents = {\n flight: FlightItem,\n hotel: HotelItem,\n car: CarItem,\n static_product: StaticProduct,\n fee: Fee,\n payment: Payment,\n };\n const SummaryItem = availableComponents[item.type];\n\n return item.type ? (\n \n
\n \n
\n \n \n onAccordionHeaderClickHandler(type)}\n />\n\n \n {typeBasedItems[type].items.length > 0 &&\n typeBasedItems[type].items.map((item, index) => (\n \n
\n ),\n )}\n {voucher && voucher.number && (\n \n
\n \n \n
\n \n
\n )}\n {openedAccordionProductType.length > 0 && (\n \n
\n \n {text}\n {isVisible && (\n \n {isCopying && \n )}\n
\n);\n\nCopyLinkLabel.defaultProps = {\n isCopying: false,\n isCopiedToClipboard: false,\n isVisible: false,\n};\n\nCopyLinkLabel.propTypes = {\n isCopying: PropTypes.bool,\n isCopiedToClipboard: PropTypes.bool,\n isVisible: PropTypes.bool,\n text: PropTypes.string.isRequired,\n};\n\nexport default CopyLinkLabel;\n","const COPY_LINK_TYPE = 'link';\nconst COPY_CONTENT_TYPE = 'content';\nconst SEND_EMAIL_TYPE = 'email';\n\nexport { COPY_LINK_TYPE, COPY_CONTENT_TYPE, SEND_EMAIL_TYPE };\n","import React, { Fragment } from 'react';\nimport Icon from '@wtag/rcl-icon';\nimport PropTypes from 'prop-types';\nimport Button from '@wtag/rcl-button';\nimport SelectBox from '@wtag/rcl-select-box';\nimport Alert from 'sharedWebpack/Alert';\nimport CopyLinkLabel from './CopyLinkLabel';\nimport { COPY_LINK_TYPE, COPY_CONTENT_TYPE, SEND_EMAIL_TYPE } from '../helpers/constants/copyTypes';\n\n// Will be uncommented and used in a followup story\n// const socials = [\n// { label: 'Facebook', icon: 'facebookRectangular' },\n// { label: 'WhatsApp', icon: 'whatsapp' },\n// { label: 'LinkedIn', icon: 'linkedinRectangular' },\n// { label: 'Twitter', icon: 'twitterRectangular' },\n// { label: 'Instagram', icon: 'instagramRectangular' },\n// { label: 'Slack', icon: 'slack' },\n// { label: 'Skype', icon: 'skype' },\n// { label: 'Discord', icon: 'discord' },\n// ];\n\nconst ShareableLinks = ({\n cartTitle,\n emails,\n emailAddressSectionOpen,\n setEmailAddressSectionOpen,\n onEmailsChange,\n onCreateEmailOptions,\n error,\n onErrorAlertClose,\n onCancelEmailEdit,\n isCopyContentDisabled,\n onShareableLinkClick,\n isCartSharing,\n isCartShared,\n shareType,\n}) => (\n \n
\n \n onShareableLinkClick(SEND_EMAIL_TYPE)}\n disabled={(!!emails && emails.length === 0) || cartTitle.length === 0}\n />\n
\n);\n\nEmailSection.defaultProps = {\n emails: [],\n};\n\nEmailSection.propTypes = {\n cartTitle: PropTypes.string.isRequired,\n emails: PropTypes.arrayOf(\n PropTypes.shape({ label: PropTypes.string.isRequired, value: PropTypes.string.isRequired })\n .isRequired,\n ),\n onEmailsChange: PropTypes.func.isRequired,\n onCreateEmailOptions: PropTypes.func.isRequired,\n onCancelEmailEdit: PropTypes.func.isRequired,\n onShareableLinkClick: PropTypes.func.isRequired,\n emailError: PropTypes.string.isRequired,\n};\n\nexport default ShareableLinks;\n","const generateErrorMessages = response => {\n const errorsList = {};\n const errors = response?.data?.errors || {};\n\n if (errors.cartTitle) {\n errorsList.cartTitle = I18n.t('cart.cart_share.error.cart_title');\n }\n\n if (errors.emailAddresses) {\n errorsList.email = I18n.t('cart.cart_share.error.email');\n }\n\n if (Object.keys(errorsList).length === 0) {\n errorsList.generic = I18n.t('cart.cart_share.error.generic');\n }\n\n return errorsList;\n};\n\nexport default generateErrorMessages;\n","// the purpose of this function is to return true when the availabilty check is still running for flight items.\n// while the availabilty check is completed for all the items,\n// this function returns false as the item details are ready and the copy content button will be enabled\n\nimport { TYPE_FLIGHT } from '../../../helpers/itemTypes';\n\nconst isCopyContentDisabled = (items, flightResultDetailsById) => {\n const availability = items.map(item => {\n const itemDetails =\n item.bookingAttributes &&\n flightResultDetailsById &&\n flightResultDetailsById[item.bookingAttributes.resultId];\n\n // returns true only if it's a flight and details are missing, false otherwise\n return item.journeyElementType === TYPE_FLIGHT && !itemDetails;\n });\n\n // if in the availability array atleast one value is true that means\n // we have atleast one flight item which doesn't have details yet\n // hence this returns true and we'll disable the copy content until all the flight item details are available\n return availability.some(available => available);\n};\n\nexport default isCopyContentDisabled;\n","const getItemHeader = index =>\n `${index > 0 ? '\\n\\n' : ''}${I18n.t('components.ibe.search_results.item_header', {\n itemNo: index + 1,\n })}\\n`;\n\nexport default getItemHeader;\n","const getCartTitle = traveler =>\n traveler\n ? `${I18n.t('components.ibe.search_results.copy_content_title', {\n name: traveler.firstName,\n })}\\n\\n`\n : '';\n\nexport default getCartTitle;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport httpClient from 'agentHTTPClient';\nimport routes from 'agentRoutes';\nimport ConfirmationModal from 'sharedWebpack/ConfirmationModal';\nimport Alert from 'sharedWebpack/Alert';\nimport Input from '@wtag/rcl-input';\nimport itemShape from '../../../../admin/Orders/Show/ItemsTab/SetPaymentInformationSidePanel/shapes';\nimport ShareableLinks from './ShareableLinks';\nimport generateErrorMessages from './generateErrorMessages';\nimport isCopyContentDisabled from '../helpers/isCopyContentDisabled';\nimport copyTextToClipboard from '../helpers/copyTextToClipboard';\nimport getItemHeader from '../helpers/getItemHeader';\nimport getCartTitle from '../helpers/getCartTitle';\nimport prepareCartContent from '../helpers/prepareCartContent';\nimport { TYPE_STATIC_PRODUCT } from '../../../helpers/itemTypes';\nimport { COPY_CONTENT_TYPE, COPY_LINK_TYPE, SEND_EMAIL_TYPE } from '../helpers/constants/copyTypes';\nimport './styles.scss';\n\nconst CartShare = ({\n items,\n journeyElements,\n flightServicesByResultId,\n flightResultDetailsById,\n travelers,\n cartId,\n cartUrl,\n title,\n sharedTitle,\n callbackParams,\n}) => {\n const [emails, setEmails] = useState([]);\n const [cartTitle, setCartTitle] = useState(sharedTitle || title || '');\n const [emailSent, setEmailSent] = useState(false);\n const [emailAddressSectionOpen, setEmailAddressSectionOpen] = useState(false);\n const [isModalOpen, setIsModalOpen] = useState(false);\n const [error, setError] = useState({});\n const [isCartSharing, setIsCartSharing] = useState(false);\n const [isCartShared, setIsCartShared] = useState(false);\n const [shareType, setShareType] = useState('');\n const formattedEmails = emails.map(email => email.value);\n const disclaimerText = `\\n---\\n${I18n.t('components.ibe.search_results.disclaimer_text')}`;\n\n const getShareCartParams = isSharingCartProfile => {\n if (shareType === SEND_EMAIL_TYPE) {\n return {\n cart_title: cartTitle,\n share_profile_information: isSharingCartProfile,\n email_addresses: formattedEmails,\n };\n }\n\n if (shareType === COPY_LINK_TYPE) {\n return {\n cart_title: cartTitle,\n share_profile_information: isSharingCartProfile,\n callback_params: callbackParams,\n };\n }\n\n return {\n cart_title: cartTitle,\n share_profile_information: isSharingCartProfile,\n callback_params: callbackParams,\n };\n };\n\n const getCartContent = () => {\n let content = getCartTitle(travelers[0]);\n\n items.forEach((item, index) => {\n const { type, journeyElementId } = item;\n\n if (items.length > 1) {\n content += getItemHeader(index);\n }\n\n if (type === TYPE_STATIC_PRODUCT) {\n content += prepareCartContent(item);\n } else {\n const journeyElement = journeyElements[type][journeyElementId];\n content += prepareCartContent(item, journeyElement, travelers, flightServicesByResultId);\n }\n });\n\n content += disclaimerText;\n\n return content;\n };\n\n const clearInputFields = () => {\n setEmails([]);\n };\n\n const onCartShare = (type, isSharingCartProfile) => {\n setIsModalOpen(false);\n setIsCartSharing(true);\n\n const params = getShareCartParams(isSharingCartProfile);\n\n httpClient\n .put(routes.api.carts.share({ cartId }), params)\n .then(() => {\n setIsCartSharing(false);\n setIsCartShared(true);\n\n if (type === SEND_EMAIL_TYPE) {\n setEmailSent(true);\n setEmailAddressSectionOpen(false);\n clearInputFields();\n } else {\n const textToCopy = type === COPY_LINK_TYPE ? cartUrl : getCartContent();\n copyTextToClipboard(textToCopy);\n }\n\n setTimeout(() => {\n setIsCartShared(false);\n }, 2000);\n })\n .catch(({ response }) => {\n setIsCartSharing(false);\n setError(generateErrorMessages(response));\n });\n };\n\n const onShareableLinkClick = type => {\n setShareType(type);\n\n if (type !== COPY_CONTENT_TYPE) {\n setIsModalOpen(true);\n } else {\n onCartShare(type, true);\n }\n };\n\n const clearErrorOfType = type => {\n if (error[type]) {\n const newError = { ...error };\n delete newError[type];\n setError(newError);\n }\n };\n\n const onCartTitleChange = value => {\n setCartTitle(value);\n clearErrorOfType('cartTitle');\n };\n\n const onCreateEmailOptions = createdEmail => {\n setEmails(prevState => [...prevState, { label: createdEmail, value: createdEmail }]);\n clearErrorOfType('email');\n };\n\n const onEmailsChange = selectedEmails => {\n setEmails(selectedEmails || []);\n clearErrorOfType('email');\n };\n\n const onCancelEmailEdit = () => {\n setEmailAddressSectionOpen(false);\n setEmails([]);\n clearErrorOfType('email');\n };\n\n const onErrorAlertClose = () => {\n setError(prev => ({ ...prev, generic: '' }));\n };\n\n return (\n \n
\n \n setEmailSent(false)}\n >\n {I18n.t('cart.cart_share.email.sent')}\n \n {\n setIsCartSharing(false);\n setIsModalOpen(false);\n }}\n onConfirm={() => onCartShare(shareType, true)}\n onReject={() => onCartShare(shareType, false)}\n />\n
\n );\n};\n\nCartShare.defaultProps = {\n title: '',\n sharedTitle: '',\n flightResultDetailsById: null,\n};\n\nCartShare.propTypes = {\n items: PropTypes.arrayOf(itemShape).isRequired,\n journeyElements: PropTypes.shape({\n flight: PropTypes.shape({}),\n hotel: PropTypes.shape({}),\n car: PropTypes.shape({}),\n }).isRequired,\n travelers: PropTypes.arrayOf(\n PropTypes.shape({\n firstName: PropTypes.string,\n lastName: PropTypes.string,\n type: PropTypes.string,\n birthday: PropTypes.string,\n }),\n ).isRequired,\n cartId: PropTypes.string.isRequired,\n cartUrl: PropTypes.string.isRequired,\n title: PropTypes.string,\n sharedTitle: PropTypes.string,\n callbackParams: PropTypes.shape().isRequired,\n flightServicesByResultId: PropTypes.shape({}).isRequired,\n flightResultDetailsById: PropTypes.shape({}),\n};\n\nexport default CartShare;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { I18nText, Textarea } from '@wtag/react-comp-lib';\nimport Button from '@wtag/rcl-button';\nimport Input from '@wtag/rcl-input';\nimport Icon from '@wtag/rcl-icon';\nimport Tooltip from '@wtag/rcl-tooltip';\nimport Modal from 'sharedWebpack/Modal';\nimport './styles.scss';\n\nclass CartDeal extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n isModalVisible: false,\n };\n }\n\n onModalOpen = () => {\n this.setState({ isModalVisible: true });\n };\n\n onModalClose = () => {\n this.setState({ isModalVisible: false });\n };\n\n setName = value => {\n this.props.setDealName(value);\n };\n\n setTeaser = event => {\n this.props.setDealTeaser(event.target.value);\n };\n\n createDeal = () => {\n this.props.saveDeal(this.context.callbackParams);\n };\n\n buttonType = () => {\n if (this.props.forceDeal) {\n return 'danger';\n }\n return 'primary';\n };\n\n render() {\n let renderOptions = {\n dealButton: this.props.hasAutomaticallyAddedStaticProducts ? (\n {I18n.t('cart.cart_share.label')}
\n {I18n.t('cart.cart_share.description')}
\n \n
\n \n
\n \n {!this.context.offerOnly ? (\n
\n \n );\n }\n}\n\nCartDeal.propTypes = {\n dealName: PropTypes.string.isRequired,\n dealTeaser: PropTypes.string.isRequired,\n setDealName: PropTypes.func.isRequired,\n setDealTeaser: PropTypes.func.isRequired,\n dealSaveAvailable: PropTypes.bool.isRequired,\n saveDeal: PropTypes.func.isRequired,\n forceDeal: PropTypes.bool.isRequired,\n hasAutomaticallyAddedStaticProducts: PropTypes.bool.isRequired,\n items: PropTypes.shape([]).isRequired,\n};\n\nCartDeal.contextTypes = {\n callbackParams: PropTypes.shape().isRequired,\n offerOnly: PropTypes.bool.isRequired,\n};\n\nexport default CartDeal;\n","import React from 'react';\nimport { Link } from 'react-router-dom';\nimport PropTypes from 'prop-types';\nimport Icon from '@wtag/rcl-icon';\nimport './styles.scss';\n\nconst AddOnService = ({ linkTo, iconName, title }) => (\n \n \n
\n
\n ) : (\n \n
\n \n
\n \n
\n
\n )}\n\n \n
\n \n {dealButton}\n \n {dealHeader}\n
\n }\n footer={\n \n
\n \n
\n \n \n
\n {title}
\n \n);\n\nAddOnService.propTypes = {\n linkTo: PropTypes.string.isRequired,\n iconName: PropTypes.string.isRequired,\n title: PropTypes.string.isRequired,\n};\n\nexport default AddOnService;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { I18nText } from '@wtag/react-comp-lib';\nimport Card from '@wtag/rcl-card';\nimport accountTypeAvailable from '../../lib/accountTypeAvailable';\nimport AddOnService from './AddOnService';\nimport './styles.scss';\n\nclass AddButtons extends React.Component {\n shouldEnableFor = type =>\n !this.context.laymanMode || accountTypeAvailable(this.context.availableChannels, type);\n\n flightEnabled = () => this.shouldEnableFor('flights');\n hotelEnabled = () => this.shouldEnableFor('hotels');\n carEnabled = () => this.shouldEnableFor('cars');\n\n render() {\n return (\n\n {this.flightEnabled() && (\n
\n \n \n );\n }\n}\nAddButtons.defaultProps = {\n hasStaticProducts: false,\n isCartLocked: false,\n};\nAddButtons.propTypes = {\n hasStaticProducts: PropTypes.bool,\n isCartLocked: PropTypes.bool,\n};\nAddButtons.contextTypes = {\n laymanMode: PropTypes.bool,\n availableChannels: PropTypes.shape(),\n};\n\nexport default AddButtons;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Alert from 'sharedWebpack/Alert';\n\nconst PaymentError = ({ messageKey }) => {\n let errorMessage;\n switch (messageKey) {\n case 'invalid_transaction':\n errorMessage = I18n.t('public.shared.paygate_payment.invalid_transaction');\n break;\n case 'unprocessed_transaction':\n errorMessage = I18n.t('public.shared.paygate_payment.unprocessed_transaction');\n break;\n case 'cancelled':\n errorMessage = I18n.t('public.shared.paygate_payment.cancelled');\n break;\n case 'failed':\n errorMessage = I18n.t('public.shared.postfinance_payment.failed');\n break;\n case 'declined':\n errorMessage = I18n.t('public.shared.postfinance_payment.declined');\n break;\n case 'unsaved_card':\n errorMessage = I18n.t('public.shared.payment_gateway.unsaved_card');\n break;\n default:\n errorMessage = I18n.t('public.shared.payment_gateway.unknown_error');\n }\n return (\n \n \n {errorMessage}\n \n
\n );\n};\nPaymentError.propTypes = {\n messageKey: PropTypes.string.isRequired,\n};\n\nexport default PaymentError;\n","import React from 'react';\nimport Card from '@wtag/rcl-card';\nimport Icon from '@wtag/rcl-icon';\n\nconst EmptyCart = () => (\n \n
\n);\n\nexport default EmptyCart;\n","import React, { createRef } from 'react';\nimport PropTypes from 'prop-types';\nimport { intlShape } from 'react-intl';\nimport Card from '@wtag/rcl-card';\nimport Button from '@wtag/rcl-button';\nimport { I18nText } from '@wtag/react-comp-lib';\nimport Alert from 'sharedWebpack/Alert';\nimport feeList from '../lib/feeList';\nimport CartItemWrapper from './Items/CartItemWrapper';\nimport Summary from './Summary';\nimport CartShare from './CartShare';\nimport CartDeal from './CartDeal';\nimport AddButtons from './Items/AddButtons';\nimport PaymentError from './PaymentMessage/PaymentError';\nimport EmptyCart from './Items/EmptyCart';\nimport staticProductShape from '../Search/static/shapes/staticProduct';\nimport CheckoutProgress from '../components/CheckoutProgress';\nimport { stringifyQueryString, parseQueryString } from '../helpers/qsMethods';\nimport history from '../lib/history';\nimport {\n CART_STATUS_BOOKED,\n CART_STATUS_PAID,\n CART_STATUS_OPEN,\n CART_STATUS_LOCKED,\n} from '../actions/common';\n\nimport './styles.scss';\n\nclass Cart extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n shouldLockScroll: false,\n };\n this.locationQuery = parseQueryString(props.location.search);\n this.orderSummaryRef = createRef();\n }\n\n componentDidMount() {\n window.scrollTo(0, 0);\n\n if (!this.props.fees.length) {\n this.props.fetchFees(this.context.callbackParams);\n }\n }\n\n componentDidUpdate(prevProps) {\n if (this.props.location.search !== prevProps.location.search) {\n this.locationQuery = parseQueryString(this.props.location.search);\n }\n }\n\n setFirstConfirmableItem = node => {\n if (node) {\n this.firstConfirmableItem = node;\n }\n };\n\n cartSharingPossible = () => {\n if (this.context.iframeMode) {\n return false;\n }\n\n if (this.props.expiredAt) {\n return false;\n }\n\n return true;\n };\n\n checkoutProgressAttributes = () => {\n const conditionToDisableNextButton =\n !this.props.allItemsAvailable ||\n this.props.items.length <= 0 ||\n this.props.cartState !== CART_STATUS_OPEN ||\n this.props.cartState === CART_STATUS_LOCKED ||\n (!this.props.continuePossible && this.props.canBookQuoteItems) ||\n this.props.hasItemsWithPendingConfirmation ||\n !!this.props.expiredAt;\n\n const attributes = {\n cartId: this.props.match.params.id,\n currentStep: 'cart',\n cartError: this.props.flightServicesFetched && !this.props.allItemsAvailable,\n nextButtonDisabled: conditionToDisableNextButton,\n totalCartItems: this.props.totalCartItems,\n orderSummaryRef: this.orderSummaryRef,\n };\n\n if (this.props.forceDeal) {\n attributes.nextButton = (\n \n {I18n.t('components.ibe.cart_used')} \n
\n );\n\n duplicateItemOfSameSearchExist = () => {\n if (this.props.items.length !== 0) {\n const searchIds = this.props.items.map(item => item.search.id);\n return new Set(searchIds).size !== searchIds.length;\n }\n return false;\n };\n\n viewAlertTextForSharedCart = sharedByCurrentPerson => {\n if (sharedByCurrentPerson) {\n return I18n.t('cart.cart_share.layman_mode.cart_shared_alert.owner');\n }\n\n return I18n.t('cart.cart_share.layman_mode.cart_shared_alert.non_owner');\n };\n\n render() {\n const fromSharedCarts = this.locationQuery.fromSharedCarts;\n const isCartBooked =\n this.props.cartState === CART_STATUS_BOOKED || this.props.cartState === CART_STATUS_PAID;\n const isCartLocked = this.props.cartState === CART_STATUS_LOCKED;\n const isPassengerCodeAvailable = this.props.items.some(item => item.passengerCode);\n\n if (isCartBooked && !!fromSharedCarts) {\n history.push({\n pathname: `/orders/${this.props.cartId}/booking`,\n search: stringifyQueryString({ fromSharedCarts }),\n });\n }\n\n if (this.props.cartState !== CART_STATUS_OPEN && this.props.cartState !== CART_STATUS_LOCKED)\n return this.usedCart();\n\n return (\n \n
\n \n );\n }\n}\n\nCart.defaultProps = {\n canBookQuoteItems: false,\n expiredAt: null,\n flightResultDetailsById: {},\n staticProducts: [],\n cartState: null,\n title: '',\n sharedTitle: '',\n fareBasisInfo: [],\n showServices: true,\n paymentMethodSurcharge: null,\n totalCartItems: 0,\n};\n\nCart.propTypes = {\n journeyElements: PropTypes.shape({\n flight: PropTypes.shape({}),\n hotel: PropTypes.shape({}),\n car: PropTypes.shape({}),\n }).isRequired,\n showServices: PropTypes.bool,\n canBookQuoteItems: PropTypes.bool,\n match: PropTypes.shape({\n params: PropTypes.shape({\n id: PropTypes.string,\n }),\n }).isRequired,\n totalCartItems: PropTypes.number,\n expiredAt: PropTypes.string,\n frozen: PropTypes.bool.isRequired,\n items: PropTypes.shape([]).isRequired,\n isShared: PropTypes.bool.isRequired,\n sharedByCurrentPerson: PropTypes.bool.isRequired,\n flightServicesByResultId: PropTypes.shape([]).isRequired,\n voucher: PropTypes.shape().isRequired,\n intl: intlShape.isRequired, // eslint-disable-line react/no-typos\n taxes: PropTypes.shape([]).isRequired,\n fees: PropTypes.shape([]).isRequired,\n cartFees: PropTypes.shape([]).isRequired,\n total: PropTypes.string.isRequired,\n title: PropTypes.string,\n sharedTitle: PropTypes.string,\n currency: PropTypes.string.isRequired,\n grossTotalsByGroup: PropTypes.string.isRequired,\n isFetchingFop: PropTypes.string.isRequired,\n dealName: PropTypes.string.isRequired,\n dealTeaser: PropTypes.string.isRequired,\n setDealName: PropTypes.func.isRequired,\n fetchFees: PropTypes.func.isRequired,\n setDealTeaser: PropTypes.func.isRequired,\n dealSaveAvailable: PropTypes.bool.isRequired,\n saveDeal: PropTypes.func.isRequired,\n saveApprovalRequest: PropTypes.func.isRequired,\n removeFromCart: PropTypes.func.isRequired,\n forceDeal: PropTypes.bool.isRequired,\n cartId: PropTypes.string.isRequired,\n cartUrl: PropTypes.string.isRequired,\n forceApprovalRequest: PropTypes.bool.isRequired,\n continuePossible: PropTypes.bool.isRequired,\n addStaticProductToCart: PropTypes.func.isRequired,\n allItemsAvailable: PropTypes.bool.isRequired,\n travelerCount: PropTypes.objectOf(\n PropTypes.shape({\n adults: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\n children: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\n infants: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\n }),\n ).isRequired,\n flightResultDetailsById: PropTypes.objectOf(\n PropTypes.shape({\n available: PropTypes.oneOf([true, false, null]),\n }),\n ),\n fetchStaticProducts: PropTypes.func.isRequired,\n setQuantity: PropTypes.func.isRequired,\n staticProducts: PropTypes.arrayOf(staticProductShape),\n cartText: PropTypes.string.isRequired,\n setCartText: PropTypes.func.isRequired,\n cartState: PropTypes.oneOf(['open', 'paid', 'booked']),\n hasStaticProducts: PropTypes.bool.isRequired,\n flightServicesFetched: PropTypes.bool.isRequired,\n fareBasisInfo: PropTypes.arrayOf(PropTypes.shape({})),\n hasItemsWithPendingConfirmation: PropTypes.bool.isRequired,\n hasAutomaticallyAddedStaticProducts: PropTypes.bool.isRequired,\n location: PropTypes.shape({\n search: PropTypes.string.isRequired,\n }).isRequired,\n paymentMethodSurcharge: PropTypes.shape({\n title: PropTypes.string,\n amount: PropTypes.string,\n currency: PropTypes.string,\n }),\n confirmAddition: PropTypes.func.isRequired,\n setOutOfPolicyJustification: PropTypes.func.isRequired,\n totalWithoutVoucherReduction: PropTypes.string.isRequired,\n travelers: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\n};\n\nCart.contextTypes = {\n allowBookingOfUnapprovedItems: PropTypes.bool.isRequired,\n laymanMode: PropTypes.bool.isRequired,\n iframeMode: PropTypes.bool.isRequired,\n travelerLoggedIn: PropTypes.bool.isRequired,\n callbackParams: PropTypes.shape().isRequired,\n offerOnly: PropTypes.bool.isRequired,\n travelerHasOrganization: PropTypes.bool.isRequired,\n frozen: PropTypes.bool.isRequired,\n};\n\nexport default Cart;\n","import { fetchFlightServices } from '../flight';\nimport { fetchHotelDetails } from '../hotel';\nimport { fetchCarSearchResults } from '../car';\nimport { checkCartItemsAvailability } from './cart';\n\nexport const FETCHING_SERVICES = 'FETCHING_SERVICES';\nfunction fetchingServices(cart) {\n return { type: FETCHING_SERVICES, cart };\n}\nexport default function fetchServices(cart, callbackParams) {\n return dispatch => {\n dispatch(fetchingServices(cart));\n const cartPromises = cart.items.map(item => {\n switch (item.type) {\n case 'flight':\n return dispatch(fetchFlightServices(item.bookingAttributes.resultId, callbackParams));\n case 'hotel':\n dispatch(fetchHotelDetails(item.bookingAttributes.resultId, callbackParams));\n return Promise.resolve();\n case 'car':\n dispatch(fetchCarSearchResults({ searchId: item.search.identifier }));\n return Promise.resolve();\n default:\n return Promise.resolve();\n }\n });\n return Promise.all(cartPromises).then(() => {\n dispatch(checkCartItemsAvailability(callbackParams));\n });\n };\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport { injectIntl } from 'react-intl';\n\nimport {\n setDealName,\n setDealTeaser,\n saveDeal,\n removeFromCart,\n confirmCartItemAddition,\n fetchCart,\n fetchStaticProducts,\n addStaticProductToCart,\n setQuantity,\n fetchFees,\n addFeeToCart,\n setCartText,\n fetchApprovalRequest,\n setOutOfPolicyJustification,\n} from '../actions/common';\nimport Cart from './index';\nimport fetchOnUpdate from '../lib/decorators/fetchOnUpdate';\nimport fetchServices from '../actions/common/fetchServices';\n\nconst forceDeal = state =>\n state.common.cart.items.length > 0 &&\n state.common.cart.items.every(item => item.type === 'static_product');\n\nconst mapStateToProps = state => {\n const { name, teaser } = state.common.deal;\n const { items } = state.common.cart;\n const travelerCount = state.common.travelerCount;\n const staticProducts = state.common.staticProducts;\n return {\n allItemsAvailable: state.common.cart.allItemsAvailable,\n approvalRequestId: state.common.approvalRequest.id,\n flightResultDetailsById: state.flights.resultDetailsById,\n flightServicesByResultId: state.flights.servicesByResultId,\n flightServicesFetched: state.common.cart.flightServicesFetched,\n items,\n cartState: state.common.cart.state,\n cartId: state.common.cart.id,\n continuePossible: state.common.cart.bookingPossible,\n voucher: state.common.cart.voucher,\n grossTotalsByGroup: state.common.cart.grossTotalsByGroup,\n isFetchingFop: state.common.cart.isFetchingFop,\n dealName: name,\n dealTeaser: teaser,\n dealSaveAvailable: name.length > 0 && teaser.length > 0 && items.length > 0,\n forceDeal: forceDeal(state),\n fees: state.common.fees,\n cartUrl: state.common.cart.cartUrl,\n isShared: state.common.cart.isShared,\n sharedByCurrentPerson: state.common.cart.sharedByCurrentPerson,\n staticProducts,\n cartText: state.common.cart.text,\n cartFees: state.common.cart.fees,\n journeyElements: state.common.journeyElements,\n total: state.common.cart.total,\n taxes: state.common.cart.taxes,\n title: state.common.cart.title,\n sharedTitle: state.common.cart.sharedTitle,\n currency: state.common.cart.currency,\n travelerCount,\n hasStaticProducts: staticProducts && Object.keys(staticProducts).length > 0,\n canBookQuoteItems: state.common.cart.canBookQuoteItems,\n fareBasisInfo: state.flights.fareBasisInfoByResultId,\n paymentMethodSurcharge: state.common.cart.paymentMethodSurcharge,\n hasItemsWithPendingConfirmation: state.common.cart.hasItemsWithPendingConfirmation,\n hasAutomaticallyAddedStaticProducts: state.common.cart.hasAutomaticallyAddedStaticProducts,\n totalWithoutVoucherReduction: state.common.cart.totalWithoutVoucherReduction,\n onlyOneItemFromSearch: state.common.cart.onlyOneItemFromSearch,\n travelers: state.common.cart.travelers,\n };\n};\n\nconst mapDispatchToProps = dispatch => ({\n setDealName: name => dispatch(setDealName(name)),\n setDealTeaser: teaser => dispatch(setDealTeaser(teaser)),\n saveDeal: callbackParams => dispatch(saveDeal(callbackParams)),\n removeFromCart: (itemId, callbackParams) => dispatch(removeFromCart(itemId, callbackParams)),\n fetchCart: (cartId, callbackParams) => dispatch(fetchCart(cartId, callbackParams)),\n fetchApprovalRequest: (requestId, callbackParams) =>\n dispatch(fetchApprovalRequest(requestId, callbackParams)),\n fetchStaticProducts: () => dispatch(fetchStaticProducts()),\n fetchFees: callbackParams => dispatch(fetchFees(callbackParams)),\n addStaticProductToCart: (product, callbackParams) =>\n dispatch(addStaticProductToCart(product, callbackParams)),\n addFeeToCart: fee => dispatch(addFeeToCart(fee)),\n setQuantity: (itemId, quantity, callbackParams) =>\n dispatch(setQuantity(itemId, quantity, callbackParams)),\n setCartText: text => dispatch(setCartText(text)),\n fetchServices: (cart, callbackParams) => dispatch(fetchServices(cart, callbackParams)),\n confirmAddition: (itemId, callbackParams) =>\n dispatch(confirmCartItemAddition(itemId, callbackParams)),\n setOutOfPolicyJustification: (itemId, justification, callbackParams) =>\n dispatch(setOutOfPolicyJustification(itemId, justification, callbackParams)),\n});\n\nconst CartWithFetchOnUpdate = fetchOnUpdate(['id'], (params, props) => {\n if (params.id) {\n props.fetchCart(params.id, props.callbackParams).then(fetchedCart => {\n if (fetchedCart.approvalRequestId !== props.approvalRequestId) {\n props.fetchApprovalRequest(fetchedCart.approvalRequestId, props.callbackParams);\n }\n\n props.fetchServices(fetchedCart, props.callbackParams);\n });\n }\n})(Cart);\n\nconst CartWithContext = (props, context) => \n \n {I18n.t('components.ibe.cart_locked')}\n \n \n {this.viewAlertTextForSharedCart(this.props.sharedByCurrentPerson)}\n \n \n {I18n.t('cart.cart_share.layman_mode.cart_expired_alert', {\n date: I18n.l('date.formats.date_month_year_short', this.props.expiredAt),\n })}\n \n {this.locationQuery.paymentError && (\n
\n \n
\n \n {this.props.hasItemsWithPendingConfirmation && (\n \n \n this.setState({ shouldLockScroll: state })}\n travelers={this.props.travelers}\n />\n
\n ))\n ) : (\n \n {\n this.firstConfirmableItem.scrollIntoView({ behavior: 'smooth' });\n }}\n label={\n
\n \n )}\n {this.duplicateItemOfSameSearchExist() && this.props.canBookQuoteItems && (\n \n \n \n
\n )}\n\n {this.props.items.length ? (\n this.props.items.map((item, index) => (\n \n \n \n {this.cartSharingPossible() && this.props.items.length > 0 && (\n \n \n )}\n {!this.context.laymanMode && !this.context.offerOnly && (\n \n \n )}\n
\n \n {margin.name}
\n ));\n return (\n \n
\n );\n};\n\nTotalMarginBreakdown.propTypes = {\n marginBreakdown: PropTypes.shape({\n map: PropTypes.shape({}),\n length: PropTypes.number,\n }).isRequired,\n journeyElement: PropTypes.shape({\n originCode: PropTypes.string,\n destinationCode: PropTypes.string,\n vendorName: PropTypes.string,\n name: PropTypes.string,\n }).isRequired,\n journeyElementType: PropTypes.string.isRequired,\n};\n\nexport default TotalMarginBreakdown;\n","import React, { useState, Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport Amount from 'sharedWebpack/Amount';\nimport { Menu } from '@wtag/rcl-menu';\nimport Icon from '@wtag/rcl-icon';\nimport TotalMarginBreakdown from './TotalMarginBreakdown';\n\nimport '../styles.scss';\n\nconst TotalMargin = ({ items, journeyElements, currency, marginTotal }) => {\n const [isMenuVisible, setIsMenuVisible] = useState(false);\n\n const onOutsideClick = () => {\n setIsMenuVisible(false);\n };\n\n const amountContent = \n {journeyElementType === 'flight'\n ? `${journeyElement.originCode} - ${journeyElement.destinationCode}`\n : journeyElement.vendorName || journeyElement.name}\n
\n {marginBreakdowns}\n \n setIsMenuVisible(prevState => !prevState)}\n onKeyPress={() => setIsMenuVisible(prevState => !prevState)}\n >\n {I18n.t('activerecord.attributes.order_item.margin')}\n {amountContent}\n
\n }\n >\n {items.map(item => (\n \n {I18n.t('activerecord.attributes.order_item.total')} \n {amountContent}\n
\n \n \n );\n};\n\nTotalMargin.propTypes = {\n items: PropTypes.shape({\n map: PropTypes.shape({}),\n }).isRequired,\n journeyElements: PropTypes.shape({}).isRequired,\n currency: PropTypes.string.isRequired,\n marginTotal: PropTypes.string.isRequired,\n};\n\nexport default TotalMargin;\n","import React, { Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport routes from 'agentRoutes';\nimport classNames from 'classnames';\nimport httpClient from 'agentHTTPClient';\nimport IconButton from '@wtag/rcl-icon-button';\nimport Icon from '@wtag/rcl-icon';\nimport Button from '@wtag/rcl-button';\nimport Card from '@wtag/rcl-card';\nimport Amount from 'sharedWebpack/Amount';\nimport DateTime from 'sharedWebpack/DateTime';\nimport Modal from 'sharedWebpack/Modal';\nimport { PercentageMarker, EmphasisTag } from '@wtag/react-comp-lib';\nimport Input from '@wtag/rcl-input';\n\nclass CostCenter extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n allocatedPercentage: props.usedCostCenter.allocatedPercentage,\n value: props.usedCostCenter.costCenter.value,\n isModalVisible: false,\n deleteButtonDisabled: false,\n };\n }\n\n onModalOpen = () => {\n this.setState({\n isModalVisible: true,\n allocatedPercentage: this.props.usedCostCenter.allocatedPercentage,\n value: this.props.usedCostCenter.costCenter.value,\n });\n };\n\n onModalClose = () => {\n this.setState({ isModalVisible: false });\n };\n\n setAllocatedPercentage = givenAllocatedPercentage => {\n let allocatedPercentage = givenAllocatedPercentage;\n\n if (allocatedPercentage > 100) {\n allocatedPercentage = 100;\n }\n if (allocatedPercentage < 0) {\n allocatedPercentage = 0;\n }\n\n this.setState({ allocatedPercentage });\n };\n\n removeCostCenter = () => {\n this.setState({ deleteButtonDisabled: true });\n const costCenterID = this.props.costCenter.id || this.props.costCenter.value;\n if (this.props.removeCostCenterFromCart) {\n this.props.removeCostCenterFromCart(costCenterID, this.props.costCenter.accountingTypeId);\n }\n\n if (this.props.canRemoveOrderCostCenter) {\n httpClient\n .delete(routes.api.orders.costCenters.remove({ orderId: this.props.costCenter.orderId }), {\n cost_center_id: this.props.costCenter.id || this.props.costCenter.value,\n accounting_type_id: this.props.costCenter.accountingTypeId,\n })\n .then(() => window.location.reload(false));\n }\n };\n\n updateCostCenter = () => {\n const newCostCenter = this.props.costCenter;\n newCostCenter.percentage = this.state.allocatedPercentage\n ? this.state.allocatedPercentage\n : this.props.usedCostCenter.allocatedPercentage;\n const existingValue = newCostCenter.id || newCostCenter.value;\n\n newCostCenter.prevId = existingValue;\n if (newCostCenter.prevId !== this.state.value) {\n newCostCenter.id = this.state.value;\n newCostCenter.custom = true;\n } else {\n newCostCenter.id = existingValue;\n }\n if (this.props.updateCartCostCenter) {\n this.props.updateCartCostCenter(newCostCenter);\n }\n if (this.props.canUpdateOrderCostCenter) {\n httpClient\n .patch(routes.api.orders.costCenters.update({ orderId: this.props.costCenter.orderId }), {\n cost_center_id: newCostCenter.id,\n custom: newCostCenter.custom,\n allocated_percentage: newCostCenter.percentage,\n accounting_type_id: newCostCenter.accountingTypeId,\n prev_cost_center_id: newCostCenter.prevId,\n })\n .then(() => window.location.reload(false));\n }\n\n this.onModalClose();\n };\n\n render() {\n const hasRightToUpdate = this.props.updateCartCostCenter || this.props.canUpdateOrderCostCenter;\n const hasRightToDelete =\n this.props.removeCostCenterFromCart || this.props.canRemoveOrderCostCenter;\n\n return (\n \n \n
\n \n\n {this.props.costCenter.budget && (\n \n
\n \n
\n )}\n \n
\n \n {I18n.t('components.cost_center.allocated_percentage_value', {\n percentage: this.props.usedCostCenter.allocatedPercentage,\n })}\n
\n \n
\n \n {this.props.costCenter.accountingType} ({this.props.costCenter.typeHuman})\n
\n \n {this.props.costCenter.value ? (\n
\n \n {(hasRightToUpdate || hasRightToDelete) && (\n
\n \n
\n \n
\n }\n isModalVisible={this.state.isModalVisible}\n onOutsideClick={this.onModalClose}\n footer={\n \n {hasRightToUpdate && (\n \n \n {I18n.t('components.shared.edit')}\n \n
\n \n this.setAllocatedPercentage(value)}\n />\n this.setState({ value })}\n />\n
\n \n \n )}\n {hasRightToDelete && (\n \n \n \n
\n \n {I18n.t('components.cost_center.active_budget')}\n
\n \n {this.props.costCenter.budget.name} ({this.props.costCenter.typeHuman})\n
\n {I18n.t('components.cost_center.validity')}
\n \n
\n \n\n \n {I18n.t('components.cost_center.association_type')}\n
\n {this.props.costCenter.typeHuman}
\n \n \n \n
\n \n \n
\n \n
\n \n {I18n.t('components.cost_center.total_amount')}\n
\n \n
\n \n \n
\n \n
\n \n {I18n.t('components.cost_center.available')}\n
\n \n
\n \n \n \n )}\n \n \n );\n }\n}\n\nCostCenter.defaultProps = {\n updateCartCostCenter: null,\n canUpdateOrderCostCenter: false,\n removeCostCenterFromCart: null,\n canRemoveOrderCostCenter: false,\n};\n\nCostCenter.propTypes = {\n updateCartCostCenter: PropTypes.func,\n canUpdateOrderCostCenter: PropTypes.bool,\n removeCostCenterFromCart: PropTypes.func,\n canRemoveOrderCostCenter: PropTypes.bool,\n tenantCurrency: PropTypes.string.isRequired,\n reviewBookingPage: PropTypes.bool.isRequired,\n usedCostCenter: PropTypes.shape().isRequired,\n costCenter: PropTypes.shape({\n id: PropTypes.number.isRequired,\n orderId: PropTypes.number,\n prevId: PropTypes.number,\n custom: PropTypes.bool,\n accountingType: PropTypes.string.isRequired,\n percentage: PropTypes.number.isRequired,\n typeHuman: PropTypes.string.isRequired,\n value: PropTypes.string.isRequired,\n accountingTypeId: PropTypes.number.isRequired,\n budget: PropTypes.shape({\n availableAmount: PropTypes.string.isRequired,\n convertedAmount: PropTypes.string.isRequired,\n name: PropTypes.string.isRequired,\n currentPeriodStart: PropTypes.string.isRequired,\n currentPeriodEnd: PropTypes.string.isRequired,\n }),\n }).isRequired,\n};\n\nexport default CostCenter;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Button from '@wtag/rcl-button';\nimport { I18nText } from '@wtag/react-comp-lib';\nimport SelectBox from '@wtag/rcl-select-box';\nimport Input from '@wtag/rcl-input';\nimport Icon from '@wtag/rcl-icon';\nimport Modal from 'sharedWebpack/Modal';\nimport './style.scss';\n\nclass AccountingType extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n selectedAccountingType: null,\n selectedCostCenter: null,\n customCostCenterList: [],\n allocatedPercentage: 100,\n isModalVisible: false,\n };\n }\n\n onModalOpen = () => {\n this.setState({\n isModalVisible: true,\n });\n };\n\n onModalClose = () => {\n this.setState({\n isModalVisible: false,\n });\n };\n\n onAccountingTypeChange = selectedOption => {\n if (selectedOption) {\n this.setAccountingTypeAndFetchCostCenter(selectedOption.value);\n } else {\n this.setState({ selectedAccountingType: null, selectedCostCenter: null });\n }\n };\n\n onCostCenterChange = selectedOption => {\n if (selectedOption) {\n this.setCostCenter(selectedOption.value);\n } else {\n this.setState({ selectedCostCenter: null });\n }\n };\n\n setAccountingTypeAndFetchCostCenter = accountingTypeID => {\n const selectedOption = this.accountingTypeOptions().find(\n accType => accType.value === accountingTypeID,\n );\n this.setState({ selectedAccountingType: selectedOption, selectedCostCenter: null });\n this.props.fetchCostCenterOfAccountingType(accountingTypeID);\n };\n\n setCostCenter = costCenterValue => {\n const costCenterList = this.costCenterOptions();\n const selectedOption = costCenterList.find(costCenter => costCenter.value === costCenterValue);\n this.setState({ selectedCostCenter: selectedOption });\n };\n\n setallocatedPercentage = value => {\n let newValue = value;\n\n if (newValue > 100) {\n newValue = 100;\n }\n\n if (newValue < 0) {\n newValue = 0;\n }\n\n this.setState({ allocatedPercentage: newValue });\n };\n\n handleCreate = inputValue => {\n const customCostCenterList = this.state.customCostCenterList;\n customCostCenterList.unshift({ label: inputValue, value: inputValue });\n this.setState({ customCostCenterList });\n this.setCostCenter(inputValue);\n };\n\n accountingTypeOptions = () =>\n this.props.accountingTypes.map(accType => ({\n label: accType.name,\n value: accType.id,\n }));\n\n costCenterOptions = () => {\n const costcenters = this.props.costCenters.map(costCenter => ({\n label: costCenter.value,\n value: costCenter.id,\n }));\n return [...costcenters, ...this.state.customCostCenterList];\n };\n createCustomCostCenter = (options, search) => {\n if (search.length === 0 || options.map(option => option.label).indexOf(search) > -1) {\n return null;\n }\n return { label: search, value: search };\n };\n\n addCostCenter = () => {\n let customUsed = true;\n let selectedCostCenter = null;\n if (this.state.selectedCostCenter) {\n customUsed = this.state.customCostCenterList.some(\n costCenter => costCenter.value === this.state.selectedCostCenter.value,\n );\n selectedCostCenter = this.state.selectedCostCenter.value;\n }\n this.props.addCostCenter({\n id: selectedCostCenter,\n accountingTypeId: this.state.selectedAccountingType.value,\n custom: customUsed,\n allocatedPercentage: this.state.allocatedPercentage,\n });\n this.setState({\n isModalVisible: false,\n selectedAccountingType: null,\n selectedCostCenter: null,\n customCostCenterList: [],\n allocatedPercentage: 100,\n });\n };\n\n render() {\n const footerContent = (\n \n
\n \n
\n \n {I18n.t('components.cost_center.after_booking')}\n
\n \n \n
\n }\n footer={footerContent}\n alignFooter=\"left\"\n >\n \n
\n \n
\n \n !this.props.checkIfCostCenterExists({ value: option.label }),\n )}\n label={
\n \n
\n \n \n );\n }\n}\n\nAccountingType.defaultProps = {\n costCenters: [],\n accountingTypes: [],\n};\nAccountingType.propTypes = {\n costCenters: PropTypes.arrayOf(\n PropTypes.shape({\n label: PropTypes.string,\n value: PropTypes.number,\n }),\n ),\n accountingTypes: PropTypes.arrayOf(\n PropTypes.shape({\n label: PropTypes.string,\n value: PropTypes.number,\n }),\n ),\n fetchCostCenterOfAccountingType: PropTypes.func.isRequired,\n addCostCenter: PropTypes.func.isRequired,\n checkIfCostCenterExists: PropTypes.func.isRequired,\n};\n\nexport default AccountingType;\n","import { connect } from 'react-redux';\n\nimport AccountingType from './AccountingType';\n\nimport { fetchCostCenterOfAccountingType } from '../actions/common';\n\nconst mapStateToProps = state => {\n const costCenters = state.common.costCenters;\n\n return {\n costCenters,\n };\n};\n\nconst mapDispatchToProps = dispatch => ({\n fetchCostCenterOfAccountingType: accountingTypeId =>\n dispatch(fetchCostCenterOfAccountingType(accountingTypeId)),\n});\n\nexport default connect(mapStateToProps, mapDispatchToProps)(AccountingType);\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport routes from 'agentRoutes';\nimport httpClient from 'agentHTTPClient';\nimport Card from '@wtag/rcl-card';\nimport ToolTip from '@wtag/rcl-tooltip';\nimport Icon from '@wtag/rcl-icon';\nimport { I18nText } from '@wtag/react-comp-lib';\nimport CostCenter from './CostCenter';\n\nimport AccountingType from './AccountingTypeContainer';\n\nimport './style.scss';\n\nconst checkIfCostCenterExists = (costCenter, usedCostCenters) => {\n if (usedCostCenters) {\n return usedCostCenters.some(\n cartCostCenter => cartCostCenter.costCenter.value === costCenter.value,\n );\n }\n return false;\n};\n\nconst addCostCenterToOrder = (costCenter, orderId) => {\n httpClient\n .post(routes.api.orders.costCenters.add({ orderId }), {\n cost_center_id: costCenter.id,\n allocated_percentage: costCenter.allocatedPercentage,\n custom: costCenter.custom,\n accounting_type_id: costCenter.accountingTypeId,\n })\n .then(() => window.location.reload(false));\n};\n\nconst canAddCostCenter = props =>\n (props.canAddOrderCostCenter || props.addCostCenterToCart) && !!props.accountingTypes.length;\n\nconst addCostCenter = (costCenter, canAddOrderCostCenter, orderId, addCostCenterToCart) =>\n canAddOrderCostCenter\n ? addCostCenterToOrder(costCenter, orderId)\n : addCostCenterToCart(costCenter);\n\nconst message = entry => (\n \n \n
\n \n
\n \n
\n \n
\n \n {I18n.t('ibe.cost_center.accounting')}\n {!props.individualAccountingTypeEnabled && (\n \n \n )}\n
\n \n
\n {!props.allocationPerAccountingType.length && (\n \n {canAddCostCenter(props) && (\n \n \n addCostCenter(\n costCenter,\n props.canAddOrderCostCenter,\n props.orderId,\n props.addCostCenterToCart,\n )\n }\n checkIfCostCenterExists={costCenter =>\n checkIfCostCenterExists(costCenter, props.usedCostCenters)\n }\n />\n \n )}\n
\n \n
\n )}\n \n
\n \n {sortedAllocationPerAccountingTypes(props.allocationPerAccountingType).map(accounting => (\n
\n \n {message(accounting)}\n {sortedUsedCostCenters(props.usedCostCenters).map(usedCostCenter => {\n if (usedCostCenter.costCenter.accountingTypeId === accounting.id) {\n return (\n
\n ))}\n \n {surchargeUnknown ? (\n I18n.t('components.ibe.payment.charge_may_apply')\n ) : (\n \n {I18n.t('components.ibe.payment.charge')}\n \n )}\n
\n );\n};\n\nSurchargeAmount.propTypes = {\n currency: PropTypes.string.isRequired,\n charges: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.any])).isRequired,\n};\n\nexport default SurchargeAmount;\n","import React, { Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport maskedNumberNormalizer from '../helpers/maskedNumberNormalizer';\nimport SurchargeAmount from '../SurchargeAmount';\nimport './styles.scss';\n\nconst CreditCardDetails = props => {\n const { card, charges, currency } = props;\n const { fullname, maskedNumber } = card;\n\n return (\n {fullname}
\n {maskedNumberNormalizer(maskedNumber)}
\n {charges.length > 0 && \n {paymentMethodLocaleName(type, laymanMode)}\n
\n );\n };\n\n return (\n \n
\n );\n};\n\nPayIndividuallyOption.propTypes = {\n currency: PropTypes.string.isRequired,\n fop: PropTypes.shape().isRequired,\n laymanMode: PropTypes.bool.isRequired,\n onPaymentMethodChange: PropTypes.func.isRequired,\n isChecked: PropTypes.bool.isRequired,\n isFopLoading: PropTypes.bool.isRequired,\n supportedCards: PropTypes.arrayOf(\n PropTypes.shape({\n amount: PropTypes.string,\n cardType: PropTypes.string,\n }),\n ).isRequired,\n};\n\nexport default PayIndividuallyOption;\n","import React, { Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport AcceptableFOP from '../AcceptableFOP';\nimport PayIndividuallyOption from './PayIndividuallyOption';\nimport supportedFopIcons from '../../helpers/supportedFopIcons';\nimport getFopItems from '../../helpers/getFopItems';\nimport {\n CASH_FORM_OF_PAYMENT,\n IATA_FORM_OF_PAYMENT,\n NONE_FORM_OF_PAYMENT,\n WALLET_FORM_OF_PAYMENT,\n} from '../../../lib/helpers/fop_options';\n\nimport './styles.scss';\n\nconst PayIndividually = ({\n id,\n availableFormOfPayment,\n creditCards,\n currency,\n laymanMode,\n selectedPilTabKey,\n setFormOfPaymentToCreditCard,\n setFormOfPaymentToCash,\n setFormOfPaymentToWelltravelWallet,\n setFormOfPaymentToIATA,\n setFormOfPaymentToNone,\n selectedCardToken,\n setIsFopLoading,\n isFopLoading,\n setSelectedItemId,\n containerWidth,\n walletBalance,\n grossTotal,\n}) => {\n const onPaymentMethodChange = async fop => {\n setSelectedItemId(id);\n setIsFopLoading(true);\n\n switch (fop.type) {\n case CASH_FORM_OF_PAYMENT:\n await setFormOfPaymentToCash(id);\n break;\n\n case IATA_FORM_OF_PAYMENT:\n await setFormOfPaymentToIATA(id);\n break;\n\n case NONE_FORM_OF_PAYMENT:\n await setFormOfPaymentToNone(id);\n break;\n\n case WALLET_FORM_OF_PAYMENT:\n await setFormOfPaymentToWelltravelWallet(id);\n break;\n\n default:\n await setFormOfPaymentToCreditCard(fop.card, id);\n }\n\n setIsFopLoading(false);\n setSelectedItemId('');\n };\n\n const isSelected = fop => {\n if (selectedCardToken === fop.type || (fop.card && selectedCardToken === fop.card.token))\n return true;\n\n return false;\n };\n\n return (\n \n {getFopItems(availableFormOfPayment, laymanMode, creditCards).map(fop => (\n parseFloat(walletBalance),\n })}\n >\n onPaymentMethodChange(fop)}\n isFopLoading={isFopLoading}\n supportedCards={availableFormOfPayment.creditCard.supportedCards}\n currency={currency}\n />\n
\n ))}\n \n \n
\n );\n } else if (card) {\n const charges = items.flatMap(item => {\n const { supportedCards } = item.availableFormOfPayment.creditCard;\n return getCardChargesByType(supportedCards, card.cardType);\n });\n\n return \n {I18n.t('ibe.payment.powered_by')}\n
\n \n {I18n.t('ibe.payment.surcharge')}\n {': '}\n {surcharge.type === STATIC_SURCHARGE_TYPE && (\n
\n )}\n \n {paymentMethodLocaleName(type, laymanMode)}\n
\n );\n };\n\n const showPaymentOptions =\n gateWayDetails ||\n card ||\n type === CASH_FORM_OF_PAYMENT ||\n type === WALLET_FORM_OF_PAYMENT ||\n type === NONE_FORM_OF_PAYMENT ||\n (type === IATA_FORM_OF_PAYMENT && !laymanMode);\n\n const walletContainer = () => (\n \n \n {descriptionText}\n \n
\n );\n\n const payOnceContent = () => (\n \n \n
\n \n
\n \n \n {contentLoader}\n
\n ) : (\n \n selectForAll(availableWallet[0])}\n isSelectedForAll={selectedForAll(availableWallet[0])}\n type={availableWallet[0].type}\n card={availableWallet[0].card}\n laymanMode={laymanMode}\n isFopLoading={isFopLoading}\n walletBalance={balance}\n walletCurrency={welltravelWalletCurrency}\n isDeactivated={!requiredBalance || parseFloat(requiredBalance) > balance}\n />\n
\n {walletActionContent(payAllAtOnceOptionWalletDescription())}\n \n {dividerContent()}\n \n {I18n.t('components.match_traveler.or')}\n \n {dividerContent()}\n
\n \n {I18n.t('admin.components.orders.items_tab.label.pay_once_hint_text')}\n
\n {!paymentDisabled ? (\n allowInvoiceAlongWith3rdParty()\n ) : (\n \n \n {I18n.t('admin.components.orders.items_tab.label.wallet')}\n \n \n {I18n.t('admin.components.orders.items_tab.label.remaining_wallet')}\n \n
\n );\n\n const payIndividuallyWalletContent = isLoading ? (\n {contentLoader}
\n ) : (\n \n
\n {walletActionContent(payIndividuallyWalletDescription())}\n \n {I18n.t('admin.components.orders.items_tab.label.pay_individually_hint_text')}\n
\n {availableWallet.length > 0 && payIndividuallyWalletContent}\n\n \n
\n );\n };\n\n return (\n \n
\n {journeyElementType}
\n {itemTitle}
\n \n
\n {paymentMethod()}
\n {I18n.t('ibe.payment.left_panel_header')}
\n \n \n {I18n.t('ibe.payment.voucher.discount')}{' '}\n {this.text()}\n
\n \n
\n \n
\n \n
\n \n );\n }\n}\n\nVoucher.propTypes = {\n voucher: PropTypes.shape({\n number: PropTypes.string.isRequired,\n reductionType: PropTypes.oneOf(['amount', 'percentage']),\n amount: PropTypes.string,\n currency: PropTypes.string,\n percentage: PropTypes.number,\n reductionAmount: PropTypes.string,\n reductionCurrency: PropTypes.string,\n valid: PropTypes.bool,\n numberFormField: PropTypes.string,\n contentInvalid: PropTypes.bool,\n contentMessage: PropTypes.string,\n }).isRequired,\n setVoucherInCart: PropTypes.func.isRequired,\n};\n\nexport default Voucher;\n","import { connect } from 'react-redux';\nimport { setVoucherInCart } from '../../actions/common';\n\nimport Voucher from './';\n\nconst mapStateToProps = state => ({\n voucher: state.common.cart.voucher,\n});\n\nconst mapDispatchToProps = dispatch => ({\n setVoucherInCart: number => dispatch(setVoucherInCart(number)),\n});\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Voucher);\n","const messages = type =>\n I18n.t(type, {\n scope: 'components.ibe.remark_types',\n });\n\nconst remarkTypeBuilder = types => types.map(type => ({ value: type, label: messages(type) }));\n\nexport default remarkTypeBuilder;\n","import remarkTypeBuilder from './remarkTypeBuilder';\n\nconst travelportRemarkTypes = [\n 'alpha',\n 'basic',\n 'historical',\n 'invoice',\n 'itinerary',\n 'vendor',\n 'confidential',\n];\nconst remarkTypeMapping = {\n galileo: [...travelportRemarkTypes],\n amadeus: ['corporate', 'confidential', 'general', 'quality_control'],\n sabre: [\n 'general',\n 'historical',\n 'invoice',\n 'itinerary',\n 'alpha',\n 'client_address',\n 'corporate',\n 'delivery_address',\n 'group_name',\n 'hidden',\n ],\n worldspan: [...travelportRemarkTypes, 'fop_comment'],\n apollo: [...travelportRemarkTypes],\n lh_group: ['general'],\n american_airlines: ['general'],\n};\n\nconst generalRemarkTypes = channel => remarkTypeBuilder(remarkTypeMapping[channel]);\n\nexport default generalRemarkTypes;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Selectbox from '@wtag/rcl-select-box';\nimport debounce from 'throttle-debounce/debounce';\nimport { Textarea } from '@wtag/react-comp-lib';\n\nclass Remarks extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n value: props.value || '',\n remarkType: props.selectedType || props.remarkTypes[0].value,\n typeTouched: false,\n };\n }\n\n onChangeContent = event => {\n const val = event.target.value.toUpperCase();\n this.setRemarks(this.state.remarkType, val);\n this.setState({ value: val });\n };\n\n onChangeType = remarkType => {\n this.setRemarks(remarkType, this.state.value);\n this.setState({ remarkType });\n };\n\n setRemarks = debounce(300, (type, value) =>\n this.props.setRemarks(type, value, this.props.resultId, this.context.callbackParams),\n );\n\n render() {\n if (!this.props.remarkTypes.length) {\n return null;\n }\n const remarkTypeSelection = (\n \n
\n \n
\n );\n }\n}\n\nRemarks.defaultProps = {\n value: null,\n selectedType: null,\n};\n\nRemarks.propTypes = {\n setRemarks: PropTypes.func.isRequired,\n value: PropTypes.string,\n resultId: PropTypes.string.isRequired,\n remarkTypes: PropTypes.arrayOf(\n PropTypes.shape({\n value: PropTypes.string.isRequired,\n label: PropTypes.node.isRequired,\n }).isRequired,\n ).isRequired,\n selectedType: PropTypes.string,\n};\n\nexport default Remarks;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport { injectIntl } from 'react-intl';\nimport { setGeneralRemarks } from '../../../actions/common';\n\nimport generalRemarkTypes from '../../helpers/generalRemarkTypes';\nimport Remarks from './Remarks';\n\nconst GeneralRemarks = ({ channel, resultId, setRemarks, value, type, onConfirm }) => (\n \n {I18n.t('components.ibe.remarks.subtitle')}\n
\n {this.props.remarkTypes.length > 0 && remarkTypeSelection}\n\n \n \n
\n
\n );\n }\n}\n\nQueuePlacement.defaultProps = {\n account: null,\n queue: null,\n};\n\nQueuePlacement.propTypes = {\n setQueuePlacement: PropTypes.func.isRequired,\n account: PropTypes.string,\n queue: PropTypes.string,\n resultId: PropTypes.string.isRequired,\n};\n\nexport default QueuePlacement;\n","import { connect } from 'react-redux';\nimport QueuePlacement from './QueuePlacement';\nimport { setQueuePlacement } from '../../../actions/common';\n\nconst mapStateToProps = (state, ownProps) => {\n const queuePlacement = state.common.queuePlacement[ownProps.resultId];\n\n if (queuePlacement) {\n return {\n account: queuePlacement.account || ownProps.defaultAccount,\n queue: queuePlacement.queue,\n };\n }\n return {\n account: ownProps.defaultAccount,\n queue: null,\n };\n};\n\nconst mapDispatchToProps = dispatch => ({\n setQueuePlacement: (queue, account, resultId, callbackParams) =>\n dispatch(setQueuePlacement(queue, account, resultId, callbackParams)),\n});\n\nexport default connect(mapStateToProps, mapDispatchToProps)(QueuePlacement);\n","/* eslint-disable react/prop-types */\nimport React, { Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport Icon from '@wtag/rcl-icon';\nimport Button from '@wtag/rcl-button';\nimport Modal from 'sharedWebpack/Modal';\nimport GeneralRemarks from './GeneralRemarksContainer';\nimport AccountingRemarks from './AccountingRemarksContainer';\nimport QueuePlacement from './QueuePlacementContainer';\nimport './style.scss';\n\nclass QueuesAndRemarks extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n queueModalOpen: false,\n generalRemarksModalOpen: false,\n accRemarksModalOpen: false,\n };\n }\n\n onQueueModalOpen = () => {\n this.setState({\n queueModalOpen: true,\n });\n };\n\n onGeneralRemarksModalOpen = () => {\n this.setState({\n generalRemarksModalOpen: true,\n });\n };\n\n onAccRemarksModalOpen = () => {\n this.setState({\n accRemarksModalOpen: true,\n });\n };\n\n onQueueModalClose = () => {\n this.setState({ queueModalOpen: false });\n };\n\n onGeneralRemarksModalClose = () => {\n this.setState({ generalRemarksModalOpen: false });\n };\n\n onAccRemarksModalClose = () => {\n this.setState({ accRemarksModalOpen: false });\n };\n\n confirmQueueSelection = () => {\n this.setState({ queueModalOpen: !this.state.queueModalOpen });\n };\n\n confirmGeneralRemarksSelection = () => {\n this.setState({ generalRemarksModalOpen: !this.state.generalRemarksModalOpen });\n };\n\n confirmAccRemarksSelection = () => {\n this.setState({ accRemarksModalOpen: !this.state.accRemarksModalOpen });\n };\n\n render() {\n const context = this.context;\n const props = this.props;\n if (context.laymanMode) return null;\n if (props.channelsWithQueuesAndRemarks.includes(props.item.channel.identifier)) {\n return (\n \n \n
\n \n
\n \n this.setState({ queueModalOpen: true })}\n />\n \n {I18n.t('components.ibe.queue_placement.title')}\n \n
\n \n }\n isModalVisible={this.state.queueModalOpen}\n onOutsideClick={this.onQueueModalClose}\n footer={\n {title}
;\n };\n\n const channelIdentifier = getCarChannelIdentifier(channel);\n const isWellTravelChannel = channel.identifier === WELLTRAVEL;\n const isJourneyElementOfCarType = journeyElementType === TYPE_CAR;\n\n return (\n \n {getFopContent()}\n
\n {isJourneyElementOfCarType ? (\n getCarItemTitle(itemTitle)\n ) : (\n {itemTitle}
\n )}\n \n
\n )}\n \n );\n};\n\nItemDetails.propTypes = {\n item: PropTypes.shape({\n bookingAttributes: PropTypes.shape({ resultId: PropTypes.string }),\n journeyElementType: PropTypes.string,\n journeyElementId: PropTypes.number,\n formOfPayment: PropTypes.shape(),\n productId: PropTypes.number,\n id: PropTypes.number,\n hasJourneyElement: PropTypes.bool,\n channel: PropTypes.shape({\n identifier: PropTypes.string,\n account: PropTypes.string,\n }),\n itemTitle: PropTypes.string,\n }).isRequired,\n journeyElement: PropTypes.shape({\n trips: PropTypes.arrayOf(\n PropTypes.shape({\n segments: PropTypes.arrayOf(\n PropTypes.shape({\n aircraftType: PropTypes.string.isRequired,\n destinationCode: PropTypes.string.isRequired,\n operatingCarrierCode: PropTypes.string.isRequired,\n operatingFlightNumber: PropTypes.string.isRequired,\n originCode: PropTypes.string.isRequired,\n }),\n ).isRequired,\n }).isRequired,\n ).isRequired,\n fareRulePresent: PropTypes.bool.isRequired,\n fareBasisInfo: PropTypes.arrayOf(PropTypes.shape()),\n }).isRequired,\n channelsWithQueuesAndRemarks: PropTypes.arrayOf(PropTypes.string).isRequired,\n laymanMode: PropTypes.bool.isRequired,\n cardType: PropTypes.string.isRequired,\n paymentDisabled: PropTypes.bool.isRequired,\n paymentOptions: PropTypes.shape({}).isRequired,\n selectedItemId: PropTypes.string.isRequired,\n isFopLoading: PropTypes.bool.isRequired,\n};\n\nexport default withJourneyElement(withQueryParamsProvider(ItemDetails));\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { StringParam, useQueryParams, withDefault } from 'use-query-params';\nimport { SidePanel, CheckBox } from '@wtag/react-comp-lib';\nimport Button from '@wtag/rcl-button';\n\nimport withQueryParamsProvider from 'sharedWebpack/withQueryParamsProvider';\nimport './style.scss';\n\nconst AddNewFee = ({ feeSuggestions, requestingForFees, selectedFees, selectFee }) => {\n const [query, setQuery] = useQueryParams({\n openFeesPanel: withDefault(StringParam, ''),\n });\n const { openFeesPanel } = query;\n const feesPanelVisible = openFeesPanel === 'fees_panel';\n const showFeesPanel = () => {\n setQuery({ openFeesPanel: 'fees_panel' }, 'replaceIn');\n };\n const hideSidePanel = () => {\n setQuery({ openFeesPanel: '' }, 'replaceIn');\n };\n const feeSelected = fee => selectedFees.findIndex(selectedFee => selectedFee.id === fee.id) > -1;\n const requestNotPossible = fee =>\n requestingForFees.findIndex(feeId => feeId === fee.id) > -1;\n const feeSuggestionsBody = () => (\n \n
\n );\n\n return (\n \n {I18n.t('ibe.payment.add_remove_service_charge')}\n
\n {feeSuggestions.map(fee => (\n \n {\n if (!requestNotPossible(fee)) {\n selectFee(fee);\n }\n }}\n disabled={requestNotPossible(fee)}\n />\n
\n ))}\n \n hideSidePanel()}\n />\n
\n );\n};\n\nAddNewFee.propTypes = {\n feeSuggestions: PropTypes.arrayOf(\n PropTypes.shape({\n name: PropTypes.string,\n id: PropTypes.number,\n }),\n ).isRequired,\n requestingForFees: PropTypes.arrayOf(PropTypes.number).isRequired,\n selectedFees: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.number,\n }),\n ).isRequired,\n selectFee: PropTypes.func.isRequired,\n};\n\nexport default withQueryParamsProvider(AddNewFee);\n","import React, { Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport { injectIntl, intlShape } from 'react-intl';\nimport Card from '@wtag/rcl-card';\nimport Input from '@wtag/rcl-input';\nimport Icon from '@wtag/rcl-icon';\nimport { LabelHint } from '@wtag/react-comp-lib';\nimport IconButton from '@wtag/rcl-icon-button';\nimport Amount from 'sharedWebpack/Amount';\nimport AddNewFee from './AddNewFee';\nimport feeList from '../../lib/feeList';\n\nimport './style.scss';\n\nclass FeesAndServices extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n requestingForFees: [],\n };\n }\n\n componentDidMount() {\n if (!this.props.fees.length) {\n this.props.fetchFees(this.context.callbackParams);\n }\n if (!this.props.feeSuggestions.length) {\n this.props.fetchFeeSuggestions(this.context.callbackParams);\n }\n }\n\n setSelectedFee = fee => {\n const requestingForFees = new Set([...this.state.requestingForFees]);\n requestingForFees.add(fee.id);\n this.setState({ requestingForFees: [...requestingForFees] });\n };\n\n deleteSelectedFee = fee => {\n const requestingForFees = new Set([...this.state.requestingForFees]);\n requestingForFees.delete(fee.id);\n this.setState({ requestingForFees: [...requestingForFees] });\n };\n\n feeSelected = fee => this.props.selected.findIndex(selectedFee => selectedFee.id === fee.id) > -1;\n\n selectFee = fee => {\n this.setSelectedFee(fee);\n\n if (this.feeSelected(fee)) {\n this.props.onRemove(fee).then(() => this.deleteSelectedFee(fee));\n } else {\n this.props.onAdd(fee).then(() => this.deleteSelectedFee(fee));\n }\n };\n\n feeTotal = fee => {\n const grossAmount = (\n \n {fee.name}
\n \n {this.quantityWithField(fee, false)}\n
\n {this.feeTotal(fee)}
\n \n {!this.context.laymanMode && (\n
\n \n {this.props.paymentMethodSurcharge.title}\n
\n \n {this.quantityWithField(\n {\n quantity: 1,\n },\n true,\n )}\n
\n \n
\n \n
\n );\n }\n}\n\nFeesAndServices.defaultProps = {\n totalFeesAndPaymentMethodSurcharges: '',\n selected: [],\n paymentMethodSurcharge: null,\n};\n\nFeesAndServices.propTypes = {\n onAdd: PropTypes.func.isRequired,\n onRemove: PropTypes.func.isRequired,\n fees: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.number.isRequired,\n name: PropTypes.string.isRequired,\n currency: PropTypes.string.isRequired,\n grossPrice: PropTypes.string.isRequired,\n }),\n ).isRequired,\n feeSuggestions: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.number.isRequired,\n name: PropTypes.string.isRequired,\n currency: PropTypes.string.isRequired,\n grossPrice: PropTypes.string.isRequired,\n }),\n ).isRequired,\n selected: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.number.isRequired,\n name: PropTypes.string,\n currency: PropTypes.string,\n grossPrice: PropTypes.string.isRequired,\n }),\n ),\n fetchFees: PropTypes.func.isRequired,\n fetchFeeSuggestions: PropTypes.func.isRequired,\n setQuantity: PropTypes.func.isRequired,\n totalFeesAndPaymentMethodSurcharges: PropTypes.string,\n intl: intlShape.isRequired,\n paymentMethodSurcharge: PropTypes.shape({\n title: PropTypes.string.isRequired,\n amount: PropTypes.string.isRequired,\n currency: PropTypes.string.isRequired,\n }),\n};\n\nFeesAndServices.contextTypes = {\n laymanMode: PropTypes.bool.isRequired,\n callbackParams: PropTypes.shape().isRequired,\n currency: PropTypes.string,\n};\n\nexport default injectIntl(FeesAndServices);\n","import { connect } from 'react-redux';\nimport {\n fetchFees,\n addFeeToCart,\n removeFeeFromCart,\n setFeeQuantity,\n fetchFeeSuggestions,\n} from '../../actions/common';\n\nimport FeesAndServices from './';\n\nconst mapStateToProps = state => ({\n fees: state.common.fees,\n feeSuggestions: state.common.feeSuggestions,\n selected: state.common.cart.fees,\n totalFeesAndPaymentMethodSurcharges: state.common.cart.totalFeesAndPaymentMethodSurcharges,\n paymentMethodSurcharge: state.common.cart.paymentMethodSurcharge,\n});\n\nconst mapDispatchToProps = dispatch => ({\n fetchFees: callbackParams => dispatch(fetchFees(callbackParams)),\n fetchFeeSuggestions: callbackParams => dispatch(fetchFeeSuggestions(callbackParams)),\n onAdd: fee => dispatch(addFeeToCart(fee)),\n onRemove: fee => dispatch(removeFeeFromCart(fee.id)),\n setQuantity: (fee, quantity) => dispatch(setFeeQuantity(fee.id, quantity)),\n});\n\nexport default connect(mapStateToProps, mapDispatchToProps)(FeesAndServices);\n","import React from 'react';\nimport routes from 'agentRoutes';\nimport httpClient from 'agentHTTPClient';\nimport PropTypes from 'prop-types';\nimport Card from '@wtag/rcl-card';\nimport Button from '@wtag/rcl-button';\nimport Alert from 'sharedWebpack/Alert';\nimport Amount from 'sharedWebpack/Amount';\nimport ProductIcon from 'sharedWebpack/ProductIcon';\nimport ConfirmationModal from 'sharedWebpack/ConfirmationModal';\nimport ItemMargin from 'sharedWebpack/Margin/ItemMargin';\nimport TotalMargin from 'sharedWebpack/Margin/TotalMargin';\nimport CheckoutProgress from '../components/CheckoutProgress';\nimport CostCenters from '../CostCenters';\nimport PaymentSidebar from './PaymentSidebar';\nimport RedemptionVoucher from './Voucher/VoucherContainer';\nimport ItemDetails from './ItemDetails';\nimport FeesAndServices from './FeesAndServices/FeesAndServicesContainer';\nimport history from '../lib/history';\nimport InstantTicketWrapper from '../../InstantTicketWrapper';\nimport InstantTicketCard from './InstantTicketCard';\nimport { CREDIT_CARD_FORM_OF_PAYMENT } from '../lib/helpers/fop_options';\nimport { DANGER, SUCCESS, WARNING } from '../lib/helpers/walletConditions';\nimport ShowGrossTotalPrice from '../../ShowGrossTotalPrice';\nimport './styles.scss';\n\nclass Payment extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n acknowledgedToInstantTicket: false,\n isModalOpen: false,\n isThreeDsConfirmModalOpen: false,\n isSkipThreeDsConfirmModalOpen: false,\n showLostCardDataAlert: false,\n isFopLoading: false,\n isLoading: false,\n selectedItemId: '',\n welltravelWalletDetails: {},\n };\n this.checkoutProgressRef = React.createRef();\n }\n\n componentDidMount() {\n if (\n this.props.travelers[0] &&\n this.props.travelers[0].id &&\n (this.context.travelerLoggedIn || !this.context.laymanMode)\n ) {\n this.props.fetchAccountingTypesForCart(this.context.callbackParams);\n } else if (this.props.cartId && (this.context.travelerLoggedIn || !this.context.laymanMode)) {\n this.props.fetchCartPeople(this.context.callbackParams);\n this.props.fetchAccountingTypesForCart(this.context.callbackParams);\n }\n\n if (this.shouldResetPaymentMethod()) {\n this.props.resetFormOfPayment();\n }\n\n this.fetchWellTravelWallet();\n }\n\n componentDidUpdate() {\n if (this.props.cartId === null) {\n history.push(`/carts/${this.props.match.params.id}`);\n } else if (this.props.cartId && !this.state.showLostCardDataAlert && !this.state.isFopLoading) {\n let setAlert = false;\n const setFopPromises = [];\n this.props.items.forEach(cartItem => {\n let fopPromise;\n\n const conditionToReset =\n cartItem.formOfPayment.type === CREDIT_CARD_FORM_OF_PAYMENT &&\n this.props.cardDataAvailableByToken[cartItem.formOfPayment.cardDetails.token] !== true &&\n cartItem.formOfPayment.cardDetails.storedInCcv !== true;\n\n if (conditionToReset) {\n this.setState({ isFopLoading: true });\n if (this.context.laymanMode) {\n fopPromise = Promise.resolve(this.props.setFormOfPaymentToCash(cartItem.id));\n } else {\n fopPromise = Promise.resolve(this.props.setFormOfPaymentToNone(cartItem.id));\n }\n\n if (fopPromise) setFopPromises.push(fopPromise);\n setAlert = true;\n }\n });\n\n if (setAlert) {\n Promise.all(setFopPromises).then(() => {\n this.setState({ isFopLoading: false });\n });\n\n /* eslint-disable-next-line react/no-did-update-set-state */\n this.setState({ showLostCardDataAlert: true });\n }\n }\n }\n\n people = this.props.travelerCount;\n numberOfAdult = this.people && this.people.adults && this.people.adults.length;\n numberOfChildren = this.people && this.people.children && this.people.children.length;\n numberOfInfant = this.people && this.people.infants && this.people.infants.length;\n totalNumberOfTravelers = this.numberOfAdult + this.numberOfChildren + this.numberOfInfant;\n\n shouldResetPaymentMethod = () => {\n if (!this.props.cartId) {\n return false;\n }\n\n if (!this.context.paymentDisabled) {\n return true;\n }\n\n return this.props.items.some(({ formOfPayment }) => formOfPayment.cardDetails);\n };\n\n fetchWellTravelWallet = async () => {\n const { cartId } = this.props;\n const { laymanMode } = this.context;\n\n if (!cartId || laymanMode) {\n return;\n }\n\n this.setState({ isLoading: true });\n\n try {\n const { data } = await httpClient.get(routes.api.carts.cartWalletDetails({ cartId }));\n this.setState({ welltravelWalletDetails: data });\n } catch (error) {\n throw error;\n } finally {\n this.setState({ isLoading: false });\n }\n };\n\n havingAnyInstantTicket = () =>\n this.props.flightResultDetailsById &&\n Object.values(this.props.flightResultDetailsById).some(\n itemDetails => itemDetails.instantTicket,\n );\n\n triggerCreditCardItemsThreeDs = () => {\n this.setState({ isThreeDsConfirmModalOpen: false });\n this.props.triggerCreditCardItemsThreeDs();\n };\n\n triggerCreditCardItemsSkipThreeDs = () => {\n this.setState({ isSkipThreeDsConfirmModalOpen: false });\n this.props.skipAuthenticationForAllItems();\n };\n\n nextStepButtonClicked = () => {\n if (this.havingAnyInstantTicket() && !this.state.acknowledgedToInstantTicket) {\n this.setState({ isModalOpen: true });\n }\n };\n\n threeDsAuthenticationMessage = haveFailedThreeDsStatuses => {\n if (this.props.threeDsAuthenticationSkipped) {\n return I18n.t('ibe.payment.skip_three_ds_message.authenticate_info');\n } else if (haveFailedThreeDsStatuses) {\n return I18n.t('ibe.payment.three_ds_message.test_failed');\n }\n\n return I18n.t('ibe.payment.three_ds_message.authenticate_info');\n };\n\n fopAlertType = haveFailedThreeDsStatuses => {\n if (!haveFailedThreeDsStatuses && !this.props.threeDsAuthenticationSkipped) {\n return 'warning-light';\n } else if (this.props.needToRunThreeDsChecks && haveFailedThreeDsStatuses) {\n return 'danger-light';\n }\n\n return 'neutral';\n };\n\n acknowledgedToInstantTicket = () => {\n this.setState({ acknowledgedToInstantTicket: true }, () => {\n this.checkoutProgressRef.current.moveNextStep();\n });\n this.setState({ isModalOpen: false });\n };\n\n isAllowedInstantTicket = item =>\n item.bookingAttributes &&\n this.props.flightResultDetailsById &&\n this.props.flightResultDetailsById[item.bookingAttributes.resultId] &&\n this.props.flightResultDetailsById[item.bookingAttributes.resultId].instantTicket;\n\n itemMarginWrapper = item => (\n \n {I18n.t('ibe.payment.services_and_charges')}\n
\n \n
\n {this.allAvailableFees().length ? (\n {this.allAvailableFees()}
\n ) : (\n \n {I18n.t('ibe.payment.no_services_and_charges')}\n
\n )}\n {!this.context.laymanMode && (\n \n
\n );\n }\n}\n\nPayment.contextTypes = {\n currency: PropTypes.string,\n paymentOptions: PropTypes.shape(),\n paymentDisabled: PropTypes.bool,\n allowPaymentViaInvoice: PropTypes.bool,\n laymanMode: PropTypes.bool.isRequired,\n travelerLoggedIn: PropTypes.bool.isRequired,\n individualAccountingTypeEnabled: PropTypes.bool.isRequired,\n callbackParams: PropTypes.shape().isRequired,\n};\n\nPayment.defaultProps = {\n itemsTotal: null,\n creditCards: null,\n paymentGateway: null,\n allocationPerAccountingType: [],\n flightResultDetailsById: null,\n cartId: null,\n totalCartItems: 0,\n};\n\nPayment.propTypes = {\n showCardAddedConfirmation: PropTypes.bool.isRequired,\n setShowCardAddedConfirmation: PropTypes.func.isRequired,\n needToRunThreeDsChecks: PropTypes.bool.isRequired,\n threeDsStatusesByToken: PropTypes.shape().isRequired,\n triggerCreditCardItemsThreeDs: PropTypes.func.isRequired,\n match: PropTypes.shape({\n params: {\n id: PropTypes.string,\n },\n }).isRequired,\n items: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\n cardDataAvailableByToken: PropTypes.shape().isRequired,\n bookingRequestsEncodedByToken: PropTypes.shape().isRequired,\n itemsTotal: PropTypes.string,\n totalCartItems: PropTypes.number,\n channelsWithQueuesAndRemarks: PropTypes.arrayOf(PropTypes.string).isRequired,\n threeDsAuthenticationMandatory: PropTypes.bool.isRequired,\n threeDsAuthenticationSkipped: PropTypes.bool.isRequired,\n skipAuthenticationForAllItems: PropTypes.func.isRequired,\n creditCards: PropTypes.shape({}),\n setFormOfPaymentToCash: PropTypes.func.isRequired,\n setFormOfPaymentToWelltravelWallet: PropTypes.func.isRequired,\n setFormOfPaymentToCreditCard: PropTypes.func.isRequired,\n setFormOfPaymentToIATA: PropTypes.func.isRequired,\n setFormOfPaymentToNone: PropTypes.func.isRequired,\n setFormOfPaymentForAllItems: PropTypes.func.isRequired,\n set3rdPartyPaymentMethod: PropTypes.func.isRequired,\n cartId: PropTypes.string,\n configurePaymentGateway: PropTypes.func.isRequired,\n paymentGateway: PropTypes.shape(),\n travelers: PropTypes.arrayOf(PropTypes.shape).isRequired,\n cartCostCenters: PropTypes.arrayOf(PropTypes.shape).isRequired,\n addCostCenterToCart: PropTypes.func.isRequired,\n updateCartCostCenter: PropTypes.func.isRequired,\n fetchAccountingTypesForCart: PropTypes.func.isRequired,\n fetchCostCenterOfAccountingType: PropTypes.func.isRequired,\n removeCostCenterFromCart: PropTypes.func.isRequired,\n fetchCartPeople: PropTypes.func.isRequired,\n accountingTypes: PropTypes.arrayOf(PropTypes.shape).isRequired,\n allocationPerAccountingType: PropTypes.arrayOf(PropTypes.shape),\n flightResultDetailsById: PropTypes.shape(),\n maximumNumberOfCardsAdded: PropTypes.bool.isRequired,\n ccTokensThatNeedToBook: PropTypes.arrayOf(PropTypes.string).isRequired,\n showTestPassedConfirmation: PropTypes.bool.isRequired,\n setShowTestPassedConfirmation: PropTypes.func.isRequired,\n triggerResetCardAddressForm: PropTypes.bool.isRequired,\n travelerCount: PropTypes.objectOf(\n PropTypes.shape({\n adults: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\n children: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\n infants: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\n }),\n ).isRequired,\n setTriggerResetCardAddressForm: PropTypes.func.isRequired,\n resetCreditCardBillingAddressForm: PropTypes.func.isRequired,\n availableFOPsForAll: PropTypes.shape().isRequired,\n resetFormOfPayment: PropTypes.func.isRequired,\n people: PropTypes.shape({\n adults: PropTypes.arrayOf(PropTypes.shape({})),\n children: PropTypes.arrayOf(PropTypes.shape({})),\n infants: PropTypes.arrayOf(PropTypes.shape({})),\n }).isRequired,\n journeyElements: PropTypes.shape({ flight: PropTypes.shape({}).isRequired }).isRequired,\n setQuery: PropTypes.func.isRequired,\n fetchCart: PropTypes.func.isRequired,\n affiliatesBillingUrl: PropTypes.string.isRequired,\n marginTotal: PropTypes.string.isRequired,\n};\n\nexport default Payment;\n","import { connect } from 'react-redux';\nimport { reset } from 'redux-form';\nimport {\n setFormOfPaymentToCreditCard,\n setFormOfPaymentForAllItems,\n configurePaymentGateway,\n fetchAccountingTypesForCart,\n addCostCenterToCart,\n updateCartCostCenter,\n removeCostCenterFromCart,\n setFormOfPaymentToCash,\n setFormOfPaymentToWelltravelWallet,\n setFormOfPaymentToIATA,\n setFormOfPaymentToNone,\n fetchCartPeople,\n set3rdPartyPaymentMethod,\n fetchCart,\n resetFormOfPayment,\n} from '../actions/common';\nimport Payment from '.';\n\nconst channelsWithQueuesAndRemarks = [\n 'galileo',\n 'apollo',\n 'worldspan',\n 'amadeus',\n 'sabre',\n 'lh_group',\n 'american_airlines',\n];\n\nconst mapStateToProps = (state, ownProps) => {\n const cart = state.common.cart;\n const currency = cart.currency;\n const items = cart.items;\n const availableFOPsForAll = cart.availableFormOfPayment;\n const journeyElements = state.common.journeyElements;\n const itemsTotal = cart.total;\n const people = state.common.people;\n const creditCards = Object.assign({}, state.common.newCreditCard);\n\n const { laymanMode, cardDataAvailableByToken } = ownProps;\n Object.keys(creditCards).forEach(token => {\n if (cardDataAvailableByToken[token] !== true && creditCards[token].storedInCcv !== true) {\n delete creditCards[token];\n }\n });\n const cartId = cart.id;\n const travelers = cart.travelers;\n const costCenters = state.common.costCenters;\n const accountingTypes = state.common.accountingTypes;\n const cartCostCenters = cart.costCenters;\n const staticProducts = state.common.staticProducts;\n const allCCTokens = Object.values(state.common.newCreditCard).map(creditCard => creditCard.token);\n const uniqueCCTokens = [...new Set(allCCTokens)];\n const marginTotal = cart.totalMargin;\n\n // The three ds authentication is mandatory-\n // when the booking happens in the travel app, or when there is an authentication-required item in the cart\n const threeDsAuthenticationMandatory =\n laymanMode || availableFOPsForAll.creditCard.requiredFields.threeDsAuthenticationRequired;\n\n return {\n availableFOPsForAll,\n allocationPerAccountingType: state.common.cart.allocationPerAccountingType,\n items,\n uniqueCCTokens,\n flightResultDetailsById: state.flights.resultDetailsById,\n journeyElements,\n itemsTotal,\n channelsWithQueuesAndRemarks,\n creditCards,\n paymentGateway: state.common.paymentGateway,\n cartId,\n threeDsAuthenticationMandatory,\n travelers,\n travelerCount: state.common.travelerCount,\n costCenters,\n accountingTypes,\n cartCostCenters,\n currency,\n staticProducts,\n people,\n marginTotal,\n };\n};\n\nconst mapDispatchToProps = dispatch => ({\n addCostCenterToCart: costCenter => dispatch(addCostCenterToCart(costCenter)),\n updateCartCostCenter: costCenter => dispatch(updateCartCostCenter(costCenter)),\n removeCostCenterFromCart: (costCenterId, accountingTypeId) =>\n dispatch(removeCostCenterFromCart(costCenterId, accountingTypeId)),\n setFormOfPaymentToCreditCard: (formData, itemId) =>\n dispatch(setFormOfPaymentToCreditCard(formData, itemId)),\n setFormOfPaymentToNone: itemId => dispatch(setFormOfPaymentToNone(itemId)),\n setFormOfPaymentToCash: itemId => dispatch(setFormOfPaymentToCash(itemId)),\n setFormOfPaymentToWelltravelWallet: itemId =>\n dispatch(setFormOfPaymentToWelltravelWallet(itemId)),\n setFormOfPaymentToIATA: itemId => dispatch(setFormOfPaymentToIATA(itemId)),\n setFormOfPaymentForAllItems: (formData, itemsWithFOP) =>\n dispatch(setFormOfPaymentForAllItems(formData, itemsWithFOP)),\n configurePaymentGateway: paymentGateway => dispatch(configurePaymentGateway(paymentGateway)),\n fetchCartPeople: () => dispatch(fetchCartPeople()),\n fetchAccountingTypesForCart: callbackParams =>\n dispatch(fetchAccountingTypesForCart(callbackParams)),\n set3rdPartyPaymentMethod: (method, callbackParams) =>\n dispatch(set3rdPartyPaymentMethod(method, callbackParams)),\n resetCreditCardBillingAddressForm: () => dispatch(reset('card-details')),\n fetchCart: (cartId, callbackParams) => dispatch(fetchCart(cartId, callbackParams)),\n resetFormOfPayment: () => dispatch(resetFormOfPayment()),\n});\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Payment);\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { Link } from '@wtag/react-comp-lib';\nimport { Header } from '@wtag/rcl-typography';\nimport Icon from '@wtag/rcl-icon';\nimport Modal from 'sharedWebpack/Modal';\nimport history from '../lib/history';\n\nconst AncillariesUnavailabilityModal = ({\n unavailableServices,\n modalOpen,\n cartId,\n fetchJourneyElement,\n onContinueBooking,\n removeItems,\n}) => {\n const [disableButton, setDisableButton] = useState(false);\n\n const unavailableAncillaryServices = Object.values(unavailableServices);\n\n const ancillaryServicesIds = () => {\n const subItemIds = new Set();\n unavailableAncillaryServices.forEach(ancillaryServicesBySegment => {\n ancillaryServicesBySegment.items.forEach(subItem => subItemIds.add(subItem.subItemId));\n });\n\n return [...subItemIds];\n };\n\n const removeUnavailableAncillaryServices = () => {\n setDisableButton(true);\n removeItems(ancillaryServicesIds())\n .then(() => {\n const journeyElementIDs = new Set();\n const promises = [];\n unavailableAncillaryServices.forEach(unavailableServicesBySegment =>\n journeyElementIDs.add(unavailableServicesBySegment.flightId),\n );\n journeyElementIDs.forEach(journeyElementID => {\n promises.push(fetchJourneyElement('flight', journeyElementID));\n });\n return Promise.all(promises);\n })\n .then(() => {\n history.push(`/carts/${cartId}`);\n });\n };\n\n const onContinue = () => {\n setDisableButton(true);\n onContinueBooking(ancillaryServicesIds());\n };\n\n return (\n \n
\n )}\n \n {\n if (this.props.showCardAddedConfirmation) {\n this.props.setShowCardAddedConfirmation(false);\n }\n }}\n withAction={false}\n type=\"success\"\n />\n
\n \n {\n if (this.props.showTestPassedConfirmation) {\n this.props.setShowTestPassedConfirmation(false);\n }\n }}\n withAction={false}\n type=\"success\"\n />\n
\n \n
\n \n item.hasJourneyElement)}\n resetFormOfPayment={this.props.resetFormOfPayment}\n isFopLoading={this.state.isFopLoading}\n setIsFopLoading={state => this.setState({ isFopLoading: state })}\n selectedItemId={this.state.selectedItemId}\n setSelectedItemId={id => this.setState({ selectedItemId: id })}\n cardDataAvailableByToken={this.props.cardDataAvailableByToken}\n walletType={walletType()}\n refreshBalance={refreshBalance}\n isLoading={this.state.isLoading}\n affiliatesBillingUrl={this.props.affiliatesBillingUrl}\n />\n
\n \n {this.state.showLostCardDataAlert && (\n this.setState({ showLostCardDataAlert: false })}\n type=\"warning-light\"\n >\n \n {this.context.laymanMode\n ? I18n.t('ibe.payment.three_ds_message.card_data_lost.invoice')\n : I18n.t('ibe.payment.three_ds_message.card_data_lost.pay_later')}\n \n \n )}\n {havePassedAllThreeDsStatuses && !this.props.needToRunThreeDsChecks && (\n \n {I18n.t('ibe.payment.three_ds_message.test_passed')}\n \n )}\n {openCreditCardAlertContainer && (\n \n this.setState({ isThreeDsConfirmModalOpen: false })}\n withAction={true}\n type=\"warning\"\n />\n this.setState({ isSkipThreeDsConfirmModalOpen: false })}\n withAction={true}\n type=\"warning\"\n />\n \n \n\n {this.props.accountingTypes.length > 0 && (\n \n \n )}\n
\n \n {this.threeDsAuthenticationMessage()}\n this.setState({ isThreeDsConfirmModalOpen: true })}\n />\n {!this.props.threeDsAuthenticationMandatory &&\n !this.props.threeDsAuthenticationSkipped && (\n this.setState({ isSkipThreeDsConfirmModalOpen: true })}\n />\n )}\n
\n \n )}\n \n
\n \n {I18n.t('ibe.payment.total_payment_due')}\n
\n \n item.hasJourneyElement)}\n journeyElements={this.props.journeyElements}\n currency={this.context.currency}\n marginTotal={this.props.marginTotal}\n />\n )}\n
\n \n
\n {!laymanMode && (\n \n
\n ))}\n \n
\n \n
\n \n
\n )}\n \n
\n \n
\n \n
\n ))}\n \n \n \n \n {ancillaryService.type === 'seat' ? (\n
\n ))}\n \n \n {I18n.t('components.unavailable_ancillary_services.header')}\n \n
\n \n {I18n.t('components.unavailable_ancillary_services.description')}\n
\n {unavailableAncillaryServices &&\n unavailableAncillaryServices.map(ancillaryServices => (\n \n \n
\n {ancillaryServices.items.map(ancillaryService => (\n \n \n {I18n.t('components.unavailable_ancillary_services.action.continue_anyway')}\n \n \n {I18n.t('components.unavailable_ancillary_services.action.select_another')}\n \n
\n \n \n \n );\n};\n\nAncillariesUnavailabilityModal.defaultProps = {\n unavailableServices: {},\n};\n\nAncillariesUnavailabilityModal.propTypes = {\n unavailableServices: PropTypes.shape(),\n modalOpen: PropTypes.bool.isRequired,\n cartId: PropTypes.number.isRequired,\n fetchJourneyElement: PropTypes.func.isRequired,\n onContinueBooking: PropTypes.func.isRequired,\n removeItems: PropTypes.func.isRequired,\n};\n\nexport default AncillariesUnavailabilityModal;\n","import React, { Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport { Spinner } from '@wtag/react-comp-lib';\n\nconst ButtonWithSpinner = ({ isLoading, text }) => (\n \n
\n );\n\n if (isProcessing) {\n if (!noMessage) {\n return (\n \n
\n \n \n {label}\n \n
\n \n
\n \n
\n );\n }\n } else if (this.props.loadingBookingServices) {\n bookButton = servicesLoadingSpinner;\n } else {\n bookButton = (\n \n
\n );\n }\n\n const allButtons = (\n \n {this.props.showQuoteButton && (\n
\n );\n return (\n \n
\n )}\n {this.renderBookButton(bookButton)}\n {allButtons}
\n \n
\n );\n });\n\nBookingOption.propTypes = {\n options: PropTypes.arrayOf(\n PropTypes.shape({\n iconName: PropTypes.string.isRequired,\n text: PropTypes.string.isRequired,\n buttonLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,\n disabled: PropTypes.bool,\n onClick: PropTypes.func.isRequired,\n children: PropTypes.string,\n }),\n ).isRequired,\n};\n\nexport default BookingOption;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { I18nText } from '@wtag/react-comp-lib';\nimport DateTime from 'sharedWebpack/DateTime';\nimport productIcon from '../../../shared/ProductIcon';\n\nconst PayLaterItem = ({ item }) => (\n \n
\n {text}
\n \n
\n {children && {children}
}\n \n {productIcon({ productType: item.type, showBGColor: true, size: 'tiny' })}\n
\n);\n\nPayLaterItem.propTypes = {\n item: PropTypes.shape({\n type: PropTypes.string.isRequired,\n itemTitle: PropTypes.string.isRequired,\n journeySummaryHuman: PropTypes.string.isRequired,\n startsAt: PropTypes.string.isRequired,\n endsAt: PropTypes.string.isRequired,\n }).isRequired,\n};\n\nexport default PayLaterItem;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport PayLaterItem from '../../PayLaterItem';\nimport './styles.scss';\n\nconst PayLaterInfo = ({ disableBooking, payLaterItemsToBeQuoted }) => {\n if (!disableBooking && payLaterItemsToBeQuoted.length === 0) {\n return null;\n }\n\n const renderSupportStatusMessage = () => {\n if (disableBooking) {\n return I18n.t('components.ibe.booking.pay_later.all_not_supported');\n }\n\n if (payLaterItemsToBeQuoted.length > 0) {\n return I18n.t('components.ibe.booking.pay_later.some_not_supported');\n }\n\n return null;\n };\n\n const supportMessage = renderSupportStatusMessage();\n\n return (\n \n
\n\n {item.itemTitle}
\n \n
\n {item.journeySummaryHuman}
\n \n
\n -
\n \n
\n );\n};\n\nPayLaterInfo.defaultProps = {\n payLaterItemsToBeQuoted: [],\n};\n\nPayLaterInfo.propTypes = {\n disableBooking: PropTypes.bool.isRequired,\n payLaterItemsToBeQuoted: PropTypes.arrayOf(\n PropTypes.shape({\n itemTitle: PropTypes.string.isRequired,\n }),\n ),\n};\n\nexport default PayLaterInfo;\n","import routes from 'agentRoutes';\n\nexport const displayColumns = {\n id: true,\n title: true,\n destination: true,\n travellers: true,\n products: true,\n state: true,\n total: true,\n startDate: true,\n endDate: true,\n actions: false,\n selectAction: true,\n};\n\nexport const urlsPath = {\n new: routes.admin.newOrder(),\n};\n\nexport const ordersPath = routes.admin.orders();\n\nexport const displaySortingPills = {\n id: true,\n destination: true,\n lastUpdated: false,\n startDate: true,\n};\n","import React, { Fragment } from 'react';\nimport Input from '@wtag/rcl-input';\nimport PropTypes from 'prop-types';\nimport OrderList from 'sharedWebpack/Orders/List';\nimport Icon from '@wtag/rcl-icon';\nimport Modal from 'sharedWebpack/Modal';\nimport IconButton from '@wtag/rcl-icon-button';\nimport { ORDER_STYLES, BOOKING_STYLES } from '../../helpers/booking';\nimport BookingOption from '../BookingOption/';\nimport PayLaterInfo from '../PayLaterInfo/';\nimport ButtonWithSpinner from '../ButtonWithSpinner';\nimport { displayColumns, urlsPath, displaySortingPills, ordersPath } from '../constants';\n\nconst BookingModal = ({\n isModalOpen,\n onModalClose,\n modalHeader,\n createNewOrder,\n setOrderListOrderId,\n createQuote,\n orderTitle,\n onOrderTitleChange,\n orderStyle,\n orderId,\n error,\n loadIframe,\n payLaterItemsToBeQuoted,\n disableBooking,\n setLoadIframe,\n handleOrderStyleSelection,\n createOptionPossible,\n disabled: buttonDisabled,\n isQuoteButtonClicked,\n}) => {\n const isBookingDisabled = Object.keys(error).length > 0;\n\n const stepOneOptions = [\n {\n iconName: 'add',\n text: I18n.t('components.ibe.check_out_progress.texts.new_order_text'),\n buttonLabel: (\n \n {supportMessage && (\n
\n {supportMessage}
\n )}\n\n {!disableBooking && payLaterItemsToBeQuoted.length > 0 && (\n \n {payLaterItemsToBeQuoted.map(item => (\n
\n )}\n \n
\n );\n } else if (orderStyle === ORDER_STYLES.EXISTING && !orderId) {\n content = (\n \n {!orderId && (\n
\n );\n }\n\n return content;\n };\n\n return (\n \n
\n )}\n\n \n
\n );\n }\n}\n\nAgentBookButton.defaultProps = {\n isBookingButtonClicked: false,\n};\n\nAgentBookButton.propTypes = {\n cartItems: PropTypes.shape([]).isRequired,\n onlyOneItemFromSearch: PropTypes.bool.isRequired,\n cartTitle: PropTypes.string.isRequired,\n cartId: PropTypes.string.isRequired,\n bookingPossible: PropTypes.bool.isRequired,\n checkCartAvailability: PropTypes.func.isRequired,\n ccTokensThatNeedToBook: PropTypes.arrayOf(PropTypes.string).isRequired,\n disabled: PropTypes.bool.isRequired,\n startBooking: PropTypes.func.isRequired,\n prepareForBooking: PropTypes.func.isRequired,\n createOptionPossible: PropTypes.bool.isRequired,\n isBookingButtonClicked: PropTypes.bool,\n setIsBookingButtonClicked: PropTypes.func.isRequired,\n bookingComponentRefByToken: PropTypes.node.isRequired,\n fetchJourneyElement: PropTypes.func.isRequired,\n removeItems: PropTypes.func.isRequired,\n resetFormOfPayment: PropTypes.func.isRequired,\n showQuoteButton: PropTypes.bool.isRequired,\n isQuoteButtonClicked: PropTypes.bool.isRequired,\n setIsQuoteButtonClicked: PropTypes.func.isRequired,\n};\n\nAgentBookButton.contextTypes = {\n callbackParams: PropTypes.shape({\n order_id: PropTypes.string,\n }).isRequired,\n};\n\nexport default AgentBookButton;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { I18nText } from '@wtag/react-comp-lib';\n\nconst HeaderElement = props => (\n \n \n {bookNowButton}\n \n ) : (\n bookNowButton\n )}\n {bookingModalComponent()}\n
\n \n
\n);\n\nHeaderElement.propTypes = {\n textId: PropTypes.string.isRequired,\n};\nexport default HeaderElement;\n","import React, { Fragment, useState } from 'react';\nimport '@wtag/rcl-accordion/dist/styles.min.css';\nimport PropTypes from 'prop-types';\nimport { Accordion, AccordionItem } from '@wtag/rcl-accordion';\nimport { I18nText } from '@wtag/react-comp-lib';\nimport Icon from '@wtag/rcl-icon';\nimport Modal from 'sharedWebpack/Modal';\nimport HeaderElement from './HeaderElement';\n\nconst LegalPapers = props => {\n const [activeAccordionKey, setActiveAccordionKey] = useState([]);\n const onAccordionClick = id => {\n const filteredActiveKeys = activeAccordionKey.includes(id)\n ? activeAccordionKey.filter(item => item !== id)\n : [...activeAccordionKey, id];\n\n setActiveAccordionKey(filteredActiveKeys);\n };\n\n const accordionItems = () => {\n const items = [];\n if (props.legalPapers.length > 0) {\n items.push(\n
\n \n );\n};\n\nLegalPapers.propTypes = {\n legalPapers: PropTypes.arrayOf(PropTypes.shape()).isRequired,\n airlineTermsAndConditions: PropTypes.arrayOf(PropTypes.shape()).isRequired,\n onLegalPapersModalOpen: PropTypes.func.isRequired,\n legalPapersModalOpen: PropTypes.bool.isRequired,\n};\nexport default LegalPapers;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Button from '@wtag/rcl-button';\nimport { I18nText } from '@wtag/react-comp-lib';\nimport Card from '@wtag/rcl-card';\nimport IconButton from '@wtag/rcl-icon-button';\nimport Icon from '@wtag/rcl-icon';\nimport SelectBox from '@wtag/rcl-select-box';\nimport debounce from 'throttle-debounce/debounce';\nimport reduxFormShape from '../../Payment/shapes/reduxForm';\n\nimport '../styles.scss';\n\nclass FriendsShare extends React.Component {\n addRecipientFromSearch = item => {\n const newRecipients = [...this.props.recipients];\n newRecipients.push(JSON.parse(item.value));\n this.props.updateConfirmationMailRecipients(newRecipients);\n this.props.resetForm('friendsShareForm');\n };\n\n removeRow = recipient => {\n const index = this.props.recipients.indexOf(recipient);\n const newRecipients = [...this.props.recipients];\n newRecipients.splice(index, 1);\n this.props.updateConfirmationMailRecipients(newRecipients);\n this.props.resetForm('friendsShareForm');\n };\n\n handleQuery = query => {\n this.debouncedSearchRecipients(query);\n };\n\n searchRecipients = query => {\n this.props.confirmationMailRecipientSearch(query);\n };\n\n debouncedSearchRecipients = debounce(300, query => this.searchRecipients(query));\n\n dataSource = () =>\n this.props.recipientSearchResults.map(recipient => ({\n label: `${recipient.name} (${recipient.email})`,\n value: JSON.stringify(recipient),\n }));\n\n render() {\n let table = null;\n if (this.props.recipients.length > 0) {\n table = (\n \n
\n \n props.onLegalPapersModalOpen(true)}\n role=\"button\"\n tabIndex={0}\n onKeyDown={() => props.onLegalPapersModalOpen(true)}\n >\n \n props.onLegalPapersModalOpen(false)}\n onKeyDown={() => props.onLegalPapersModalOpen(false)}\n role=\"presentation\"\n >\n
\n \n }\n isModalVisible={props.legalPapersModalOpen}\n onOutsideClick={() => props.onLegalPapersModalOpen(false)}\n >\n \n {accordionItems()} \n
\n \n \n {this.props.recipients.map(recipient => (\n
\n );\n }\n const {\n fields: { recipientSearch },\n errors,\n } = this.props;\n\n return (\n \n \n \n
\n ))}\n \n
\n \n {recipient.name} ({recipient.email})\n
\n \n
\n \n
\n );\n }\n}\n\nFriendsShare.propTypes = {\n updateConfirmationMailRecipients: PropTypes.func.isRequired,\n confirmationMailRecipientSearch: PropTypes.func.isRequired,\n recipients: PropTypes.arrayOf(\n PropTypes.shape({\n name: PropTypes.string,\n email: PropTypes.string,\n }),\n ).isRequired,\n recipientSearchResults: PropTypes.arrayOf(\n PropTypes.shape({\n name: PropTypes.string,\n email: PropTypes.string,\n }),\n ).isRequired,\n resetForm: PropTypes.func.isRequired,\n ...reduxFormShape,\n};\n\nexport default FriendsShare;\n","import { injectIntl } from 'react-intl';\nimport { reduxForm, reset } from 'redux-form';\n\nimport FriendsShare from './FriendsShare';\nimport {\n updateConfirmationMailRecipients,\n searchConfirmationMailRecipient,\n} from '../../actions/common';\nimport { validate, duplicateValidation } from '../../lib/validations';\n\nconst mapConfirmationMailRecipient = recipients => {\n const mappedRecipient = [];\n if (recipients && recipients.length > 0) {\n recipients.forEach(recipient => {\n if (recipient && recipient.email) {\n mappedRecipient.push({\n name: `${recipient.firstName} ${recipient.lastName}`,\n email: recipient.email,\n });\n }\n return mappedRecipient;\n });\n }\n return mappedRecipient;\n};\n\nconst validateFields = (values, list) => {\n let recipients = list.map(item => item.email);\n let recipientSearch;\n if (values.recipientSearch && values.recipientSearch.value) {\n recipientSearch = JSON.parse(values.recipientSearch.value).email;\n recipients = recipients.concat(recipientSearch);\n }\n\n if (values.email) {\n recipients = recipients.concat(values.email);\n }\n const message = I18n.t('components.ibe.validations.duplicate_email');\n\n const constraints = {\n recipientSearch: { ...duplicateValidation(recipientSearch, recipients, message) },\n };\n return {\n ...validate(values, constraints),\n };\n};\n\nconst validateAllFields = list => params => validateFields(params, list);\n\nconst reduxFormConfig = {\n form: 'friendsShareForm',\n fields: ['recipientSearch'],\n};\n\nconst mapStateToProps = state => ({\n recipientSearchResults: mapConfirmationMailRecipient(\n state.common.confirmationMail.recipientSearchResults,\n ),\n recipients: state.common.confirmationMail.recipients,\n validate: validateAllFields(state.common.confirmationMail.recipients),\n });\n\nconst mapDispatchToProps = dispatch => ({\n updateConfirmationMailRecipients: recipients =>\n dispatch(updateConfirmationMailRecipients(recipients)),\n confirmationMailRecipientSearch: query => dispatch(searchConfirmationMailRecipient(query)),\n resetForm: form => dispatch(reset(form)),\n});\n\nconst ReduxForm = reduxForm(reduxFormConfig, mapStateToProps, mapDispatchToProps)(FriendsShare);\nexport default injectIntl(ReduxForm);\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Button from '@wtag/rcl-button';\nimport Card from '@wtag/rcl-card';\nimport { I18nText } from '@wtag/react-comp-lib';\nimport Input from '@wtag/rcl-input';\nimport IconButton from '@wtag/rcl-icon-button';\nimport Icon from '@wtag/rcl-icon';\nimport reduxFormShape from '../../Payment/shapes/reduxForm';\n\nimport '../styles.scss';\n\nclass EmailShare extends React.Component {\n removeRow = recipient => {\n const index = this.props.recipients.indexOf(recipient);\n const newRecipients = [...this.props.recipients];\n newRecipients.splice(index, 1);\n this.props.updateConfirmationMailRecipients(newRecipients);\n this.props.resetForm('emailShareForm');\n };\n\n addNewRecipient = (name, email) => {\n const newRecipients = [...this.props.recipients];\n newRecipients.push({ name: name.value, email: email.value });\n this.props.updateConfirmationMailRecipients(newRecipients);\n this.props.resetForm('emailShareForm');\n };\n\n render() {\n let table = null;\n if (this.props.recipients.length > 0) {\n table = (\n \n
\n \n
\n \n \n {table}\n
\n \n
\n \n
\n \n this.addRecipientFromSearch(recipientSearch.value)}\n disabled={\n !recipientSearch.valid ||\n recipientSearch.value === '' ||\n recipientSearch.value == null\n }\n />\n
\n \n
\n \n {this.props.recipients.map(recipient => (\n
\n );\n }\n const {\n fields: { email, name },\n } = this.props;\n return (\n \n \n \n
\n ))}\n \n
\n \n {recipient.name} ({recipient.email})\n
\n \n
\n \n
\n );\n }\n}\n\nEmailShare.propTypes = {\n updateConfirmationMailRecipients: PropTypes.func.isRequired,\n confirmationMailRecipientSearch: PropTypes.func.isRequired,\n recipients: PropTypes.arrayOf(\n PropTypes.shape({\n name: PropTypes.string,\n email: PropTypes.string,\n }),\n ).isRequired,\n recipientSearchResults: PropTypes.arrayOf(\n PropTypes.shape({\n name: PropTypes.string,\n email: PropTypes.string,\n }),\n ).isRequired,\n resetForm: PropTypes.func.isRequired,\n ...reduxFormShape,\n};\n\nexport default EmailShare;\n","import React from 'react';\nimport { I18nText } from '@wtag/react-comp-lib';\nimport { injectIntl } from 'react-intl';\nimport { reduxForm, reset } from 'redux-form';\n\nimport EmailShare from './EmailShare';\nimport { updateConfirmationMailRecipients } from '../../actions/common';\nimport {\n validate,\n emailValidation,\n duplicateValidation,\n transliterateValidation,\n} from '../../lib/validations';\nimport { nameCommonValidation } from '../../lib/validations/commonBookingValidations';\n\nconst mapConfirmationMailRecipient = recipients => {\n const mappedRecipient = [];\n if (recipients && recipients.length > 0) {\n recipients.forEach(recipient => {\n if (recipient && recipient.email) {\n mappedRecipient.push({\n name: `${recipient.firstName ? recipient.firstName : recipient.name } ${recipient.lastName ? recipient.lastName : ''}`,\n email: recipient.email,\n });\n }\n return mappedRecipient;\n });\n }\n return mappedRecipient;\n};\n\nconst validateFields = (values, list) => {\n let recipients = list.map(item => item.email);\n let recipientSearch;\n if (values.recipientSearch) {\n recipientSearch = JSON.parse(values.recipientSearch).email;\n recipients = recipients.concat(recipientSearch);\n }\n\n if (values.email) {\n recipients = recipients.concat(values.email);\n }\n const message = \n
\n \n
\n \n \n {table}\n
\n \n
\n \n \n
\n \n {I18n.t('components.ibe.confirmation_mail.name')}\n
\n \n \n
\n \n
\n \n
\n \n
\n );\n};\n\nexport default withQueryParamsProvider(FriendsSharePanel);\n","import React, { useEffect, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport Card from '@wtag/rcl-card';\nimport { I18nText, AnimatedProgressbar } from '@wtag/react-comp-lib';\n\nconst BookingProgressBar = props => {\n const { isBookingPendingByThirdParty } = props;\n\n const [isTakingMoreThanThreeMinutes, setIsTakingMoreThanThreeMinutes] = useState(false);\n\n const bookingProgressBarHeader = () => {\n if (!isBookingPendingByThirdParty) {\n return \n
\n \n \n
\n
\n \n
\n \n
\n \n
\n
\n \n
\n \n
\n \n
\n \n
\n \n \n
\n );\n};\n\nBookingProgressBar.propTypes = {\n isBookingPendingByThirdParty: PropTypes.bool.isRequired,\n};\n\nexport default BookingProgressBar;\n","/* eslint-disable react/prop-types */\nimport React, { createRef } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport debounce from 'throttle-debounce/debounce';\nimport Card from '@wtag/rcl-card';\nimport Button from '@wtag/rcl-button';\nimport { I18nText, CheckBox } from '@wtag/react-comp-lib';\nimport Alert from '@wtag/rcl-alert';\n\nimport feeList from '../lib/feeList';\nimport CartItemWrapper from '../Cart/Items/CartItemWrapper';\nimport Progress from '../components/Progress';\nimport Summary from '../Cart/Summary';\nimport CheckoutProgress from '../components/CheckoutProgress';\n\nimport history from '../lib/history';\nimport CostCenters from '../CostCenters';\n\nimport LaymanBookButton from './BookButtons/LaymanBookButton';\nimport AgentBookButton from './BookButtons/AgentBookButton';\nimport LegalPapers from './LegalPapers';\nimport SharePanel from './ShareSideBar/SharePanel';\nimport BookingProgressBar from './BookingProgressBar';\nimport { parseQueryString } from '../helpers/qsMethods';\nimport {\n CART_STATUS_OPEN,\n CART_STATUS_BOOKED,\n CART_STATUS_PAID,\n CART_STATUS_LOCKED,\n} from '../actions/common';\nimport { getViewportName, DESKTOP_DEVICE } from '../../old/libraries/responsiveHelpers';\nimport './styles.scss';\n\nclass ReviewBooking extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n termsAndConditionsRequired: null,\n privacyPolicyRequired: null,\n bookButtonDisabled: false,\n legalPapers: null,\n airlineTermsAndConditions: null,\n airlineTermsAndConditionsRequired: null,\n legalPapersFetched: false,\n legalPapersModalOpen: false,\n isBookingReceived: false,\n isBookingButtonClicked: false,\n isQuoteButtonClicked: false,\n checkingAvailabilityInLaymanMode: false,\n isLargeScreen: false,\n };\n this.locationQuery = parseQueryString(this.props.location.search);\n this.orderSummaryRef = createRef();\n }\n\n componentDidMount() {\n if (this.props.cartId && this.props.travelers.length > 0) this.fetchLegalPapers();\n\n if (!this.props.fees.length) {\n this.props.fetchFees(this.context.callbackParams);\n }\n\n this.handleResize();\n window.addEventListener('resize', this.handleResize);\n }\n\n componentDidUpdate(prevProps) {\n if (this.props.location.search !== prevProps.location.search) {\n this.locationQuery = parseQueryString(this.props.location.search);\n }\n\n if (\n this.context.iframeMode &&\n this.props.bookingCompleted &&\n prevProps.bookingCompleted !== this.props.bookingCompleted\n ) {\n window.parent.postMessage({ status: 'bookingCompleted' }, '*');\n }\n\n if (this.props.paymentFailureReason) {\n this.redirectToCart(this.props.paymentFailureReason);\n }\n\n if (this.locationQuery.paymentGateway && this.locationQuery.redirectToCart) {\n if (this.locationQuery.error) {\n this.redirectToCart(this.locationQuery.error);\n } else {\n this.redirectToCart();\n }\n }\n\n if (this.props.cartId !== prevProps.cartId && this.props.travelers.length > 0) {\n this.fetchLegalPapers();\n }\n\n if (this.props.flightServicesNeeded !== prevProps.flightServicesNeeded) {\n if (this.props.flightServicesNeeded && !this.props.flightServicesFetched) {\n this.props.fetchServices(this.props.cart, this.context.callbackParams);\n }\n }\n\n if (this.props.cartId) {\n this.props.cartItems.forEach(cartItem => {\n const conditionToRedirect =\n cartItem.formOfPayment &&\n cartItem.formOfPayment.type === 'credit_card' &&\n this.props.cardDataAvailableByToken[cartItem.formOfPayment.cardDetails.token] !== true &&\n cartItem.formOfPayment.cardDetails.storedInCcv !== true;\n if (conditionToRedirect) {\n this.redirectToCart('unsaved_card');\n }\n });\n }\n }\n\n componentWillUnmount() {\n window.removeEventListener('resize', this.handleResize);\n }\n\n onLegalPapersModalOpen = value => {\n this.setState({ legalPapersModalOpen: value });\n };\n\n setIsBookingButtonClicked = inputState => {\n this.setState({ isBookingButtonClicked: inputState });\n };\n\n setIsQuoteButtonClicked = inputState => {\n this.setState({ isQuoteButtonClicked: inputState });\n };\n\n setCheckingAvailabilityInLaymanMode = inputState => {\n this.setState({ checkingAvailabilityInLaymanMode: inputState });\n };\n\n setLegalPaperAcceptance = event => {\n if (!this.state.legalPapersModalOpen) {\n const checked = event.target.checked;\n const papers = [];\n\n if (this.state.termsAndConditionsRequired) papers.push('termsAndConditions');\n if (this.state.privacyPolicyRequired) papers.push('privacyPolicy');\n if (this.state.airlineTermsAndConditionsRequired) papers.push('airlineTermsAndConditions');\n this.props\n .setLegalPaperAcceptance(papers, checked)\n .then(() => this.props.fetchCart(this.props.cartId, this.context.callbackParams));\n }\n };\n\n shouldRenderPreviousButton = () => {\n if (this.context.laymanMode) {\n return !this.state.isBookingButtonClicked && !this.state.checkingAvailabilityInLaymanMode;\n }\n\n return !this.state.isBookingButtonClicked;\n };\n\n shouldDisablePreviousButton = () => {\n if (this.context.laymanMode) {\n return this.state.isBookingButtonClicked || this.state.checkingAvailabilityInLaymanMode;\n }\n\n return this.state.isBookingButtonClicked;\n };\n\n redirectToCart = (reason = null) => {\n this.props.resetPayment();\n if (reason) {\n history.push({ pathname: `/carts/${this.props.cartId}`, search: `?paymentError=${reason}` });\n } else {\n history.push(`/carts/${this.props.params.id}`);\n }\n };\n\n makeBookButtonDisabled = () => {\n this.setState({ bookButtonDisabled: true });\n };\n\n bookWithDebounce = debounce(10000, true, options => this.props.book(options));\n\n fetchLegalPapers = () => {\n this.props.fetchLegalPapers(this.context.laymanMode).then(data => {\n const termsAndConditions = data.states.termsAndConditions;\n const privacyPolicy = data.states.privacyPolicy;\n const airlineTermsAndConditions = data.states.airlineTermsAndConditions;\n const legalPapers = data.legalPapers;\n this.setState({\n termsAndConditionsRequired: termsAndConditions && termsAndConditions.required,\n privacyPolicyRequired: privacyPolicy && privacyPolicy.required,\n airlineTermsAndConditionsRequired:\n airlineTermsAndConditions && airlineTermsAndConditions.required,\n legalPapers,\n airlineTermsAndConditions: data.airlineTermsAndConditions,\n legalPapersFetched: true,\n });\n });\n };\n\n allLegalPapersAccepted = () => {\n const acceptances = this.props.legalPaperAcceptances;\n if (this.state.termsAndConditionsRequired && !acceptances.termsAndConditions) return false;\n if (this.state.privacyPolicyRequired && !acceptances.privacyPolicy) return false;\n if (this.state.airlineTermsAndConditionsRequired && !acceptances.airlineTermsAndConditions)\n return false;\n return true;\n };\n\n prepareForBooking = (callbackParams, procedure) => {\n this.makeBookButtonDisabled();\n return Promise.all([this.props.storeCartRecipientData()]).then(() => {\n this.setState({ isBookingReceived: true });\n return this.props.createOrder(callbackParams, procedure);\n });\n };\n\n loadingBookingServices = () =>\n !this.props.flightServicesFetched || !this.state.legalPapersFetched;\n\n bookingButtonDisabled = () =>\n !this.props.bookingPossible ||\n this.state.bookButtonDisabled ||\n !this.props.allItemsAvailable ||\n this.props.isBooking ||\n (this.props.cartState === 'booked' && this.props.redirectURL === null) ||\n !this.allLegalPapersAccepted();\n\n checkCartAvailability = () =>\n this.props.fetchCartAllItemsAvailability(this.context.callbackParams);\n\n removeAllTheSubItems = subItemIds =>\n Promise.all(\n subItemIds.map(subItemId =>\n this.props.removeSubItem(subItemId, { layman: this.context.laymanMode }, false),\n ),\n ).then(() => this.props.fetchCart(this.props.cartId, this.context.callbackParams));\n\n handleResize = () => {\n const viewPortName = getViewportName();\n this.setState({ isLargeScreen: viewPortName === DESKTOP_DEVICE });\n };\n render() {\n const OPEN = 'open';\n const isBookingCompleted = this.props.bookingCompleted || this.props.cartState === 'booked';\n const isBookingPendingByThirdParty =\n this.locationQuery.paymentGateway === 'true' && !isBookingCompleted;\n\n const disablePreviousButton =\n this.props.bookingFailed ||\n this.props.bookingCompleted ||\n this.props.cartState !== 'open' ||\n this.locationQuery.paymentGateway === 'true' ||\n this.shouldDisablePreviousButton();\n\n const fromSharedCarts = this.locationQuery.fromSharedCarts;\n\n const emailConfirmation =\n this.props.cartState === OPEN &&\n ((this.context.confirmationMailForTravelApp && this.context.laymanMode) ||\n (!this.context.laymanMode && this.context.confirmationMailForAgent));\n\n let text;\n\n if (this.props.isBooking || this.props.itemsBookingInProgress || isBookingPendingByThirdParty) {\n text = {bookingProgressBarHeader()}
\n{bookingProgressBarText()}
\n\n
\n );\n }\n\n let bookButton;\n if (\n !this.props.bookingFailed &&\n !this.props.bookingCompleted &&\n !this.props.itemsBookingInProgress &&\n !fromSharedCarts\n ) {\n if (this.context.laymanMode) {\n if (this.props.cartState && this.props.cartState !== 'paid') {\n bookButton = (\n \n \n {I18n.t('cart.cart_share.layman_mode.cart_booked_alert')}\n \n
\n \n );\n }\n}\n\nReviewBooking.defaultProps = {\n cartState: null,\n redirectURL: null,\n travelers: [],\n cartCostCenters: [],\n allItemsAvailable: false,\n itemsBookingInProgress: false,\n allItemsBookingConfirmed: false,\n bookingQuoted: false,\n location: {\n query: {\n error: null,\n },\n },\n allocationPerAccountingType: [],\n disableBooking: false,\n};\n\nReviewBooking.propTypes = {\n isBooking: PropTypes.bool.isRequired,\n canBookQuoteItems: PropTypes.bool.isRequired,\n bookingPossible: PropTypes.bool.isRequired,\n onlyOneItemFromSearch: PropTypes.bool.isRequired,\n flightServicesFetched: PropTypes.bool.isRequired,\n canProceedWithPayment: PropTypes.bool.isRequired,\n bookingFailed: PropTypes.bool.isRequired,\n bookingError: PropTypes.string.isRequired,\n bookingCompleted: PropTypes.bool.isRequired,\n cartState: PropTypes.oneOf(['open', 'paid', 'booked']),\n cartStatus: PropTypes.arrayOf(PropTypes.string).isRequired,\n redirectURL: PropTypes.string,\n uniqueCCTokens: PropTypes.arrayOf(PropTypes.string).isRequired,\n book: PropTypes.func.isRequired,\n prepareForExternalPayment: PropTypes.func.isRequired,\n params: PropTypes.shape({ id: PropTypes.string.isRequired }).isRequired,\n currency: PropTypes.string.isRequired,\n total: PropTypes.string.isRequired,\n storeCartRecipientData: PropTypes.func.isRequired,\n createOptionPossible: PropTypes.bool.isRequired,\n paymentGateway: PropTypes.shape().isRequired,\n flightResultDetailsById: PropTypes.shape().isRequired,\n cartItems: PropTypes.shape([]).isRequired,\n fees: PropTypes.shape([]).isRequired,\n cartFees: PropTypes.shape([]).isRequired,\n voucher: PropTypes.shape().isRequired,\n intl: PropTypes.shape().isRequired,\n travelerCount: PropTypes.shape().isRequired,\n staticProducts: PropTypes.arrayOf(PropTypes.shape).isRequired,\n taxes: PropTypes.string.isRequired,\n travelers: PropTypes.arrayOf(PropTypes.shape),\n cartId: PropTypes.string.isRequired,\n cartCostCenters: PropTypes.arrayOf(PropTypes.shape),\n costCenters: PropTypes.arrayOf(PropTypes.shape).isRequired,\n setLegalPaperAcceptance: PropTypes.func.isRequired,\n fetchCart: PropTypes.func.isRequired,\n fetchFees: PropTypes.func.isRequired,\n legalPaperAcceptances: PropTypes.shape({\n termsAndConditions: PropTypes.bool,\n privacyPolicy: PropTypes.bool,\n }).isRequired,\n setQuantity: PropTypes.func.isRequired,\n itemsBookingInProgress: PropTypes.bool,\n allItemsAvailable: PropTypes.bool,\n createOrder: PropTypes.func.isRequired,\n allItemsBookingConfirmed: PropTypes.bool,\n bookingQuoted: PropTypes.bool,\n fetchPaymentGatewayInfo: PropTypes.func.isRequired,\n fetchCartAllItemsAvailability: PropTypes.func.isRequired,\n fetchLegalPapers: PropTypes.func.isRequired,\n location: PropTypes.shape({\n query: PropTypes.shape({\n error: PropTypes.string,\n }),\n }),\n allocationPerAccountingType: PropTypes.arrayOf(PropTypes.shape()),\n setOutOfPolicyJustification: PropTypes.func.isRequired,\n disableBooking: PropTypes.bool,\n payLaterItemsToBeQuoted: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types\n removeSubItem: PropTypes.func.isRequired,\n resetPayment: PropTypes.func.isRequired,\n};\n\nReviewBooking.contextTypes = {\n travelArranger: PropTypes.shape({\n enabled: PropTypes.bool.isRequired,\n allowContinueToOrder: PropTypes.bool.isRequired,\n }).isRequired,\n iframeMode: PropTypes.bool.isRequired,\n laymanMode: PropTypes.bool.isRequired,\n callbackParams: PropTypes.shape().isRequired,\n paymentDisabled: PropTypes.bool.isRequired,\n confirmationMailForTravelApp: PropTypes.bool.isRequired,\n confirmationMailForAgent: PropTypes.bool.isRequired,\n fetchJourneyElement: PropTypes.func.isRequired,\n};\n\nexport default ReviewBooking;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport { injectIntl } from 'react-intl';\nimport memoizeLocationQuery from '../helpers/memoizeLocationQuery';\nimport Booking from './';\nimport fetchOnUpdate from '../lib/decorators/fetchOnUpdate';\nimport {\n createOrder,\n bookCart,\n prepareForExternalPayment,\n fetchCartItemsAvailability,\n fetchCartAllItemsAvailability,\n fetchCart,\n storeCartRecipientData,\n setLegalPaperAcceptance,\n fetchCartStatus,\n retrackBooking,\n fetchFormOfPayment,\n fetchPaymentGatewayInfo,\n fetchLegalPapers,\n fetchFOPandCardDetails,\n fetchCartPeople,\n fetchFees,\n setOutOfPolicyJustification,\n resetPayment,\n fetchJourneyElement,\n removeSubItem,\n resetFormOfPayment,\n} from '../actions/common';\nimport fetchServices from '../actions/common/fetchServices';\nimport { NONE_FORM_OF_PAYMENT, CREDIT_CARD_FORM_OF_PAYMENT } from '../lib/helpers/fop_options';\n\nconst GDSChannels = ['amadeus', 'galileo', 'sabre'];\n\nconst mapStateToProps = (state, ownProps) => {\n const cart = state.common.cart;\n const fopWithCreditCard = cart.items.filter(\n item => item.hasJourneyElement && item.formOfPayment.type === CREDIT_CARD_FORM_OF_PAYMENT,\n );\n const allCCTokens = fopWithCreditCard.map(item => item.formOfPayment.cardDetails.token);\n const uniqueCCTokens = [...new Set(allCCTokens)];\n const travelers = cart.travelers;\n const cartItems = cart.items;\n const cartId = cart.id;\n const costCenters = state.common.costCenters;\n const cartCostCenters = cart.costCenters;\n const bookingPossible = state.common.cart.bookingPossible;\n const onlyOneItemFromSearch = state.common.cart.onlyOneItemFromSearch;\n const canBookQuoteItems = state.common.cart.canBookQuoteItems;\n const allItemsAvailable = state.common.cart.allItemsAvailable;\n const flightServicesFetched =\n Object.keys(state.common.journeyElements.flight).length === 0 ||\n state.common.cart.flightServicesFetched;\n const flightServicesNeeded = Object.keys(state.common.journeyElements.flight).length >= 1;\n let canProceedWithPayment = true;\n canProceedWithPayment = cartItems.every(\n item => !item.priceChanged || item.oldGrossTotal === item.grossTotal,\n );\n\n const itemsWhichPreventOption = cartItems.filter(\n item => item.type !== 'flight' && !item.mainItemId,\n );\n const allFlightsOnGDS = cartItems\n .filter(item => item.type === 'flight')\n .every(item => GDSChannels.indexOf(item.channel.identifier) >= 0);\n const createOptionPossible = itemsWhichPreventOption.length === 0 && allFlightsOnGDS;\n\n const cartStatus = cart.status;\n const itemsBookingInProgress =\n cartStatus && cartStatus.cartItems.some(cartItem => cartItem.status === 'in_progress');\n\n const bookingQuoted =\n cartStatus &&\n (cartStatus.forQuoteOnly ||\n cartStatus.cartItems.some(cartItem => cartItem.status === 'failed'));\n\n const allItemsBookingConfirmed = cartStatus && cartStatus.allItemsConfirmed;\n\n const itemsBookingDone =\n cart.status &&\n cart.status.cartItems.every(\n cartItem => cartItem.status === 'success' || cartItem.status === 'failed',\n );\n\n // None selected as form of payment, but not supported from supplier\n const payLaterItemsToBeQuoted = cartItems.filter(\n item =>\n item.formOfPayment &&\n item.formOfPayment.type === NONE_FORM_OF_PAYMENT &&\n item.availableFormOfPayment.none.supportedBySupplier === false,\n );\n\n // If every reservation item is selected pay later and does not support pay later, we disable the booking.\n const disableBooking =\n payLaterItemsToBeQuoted.length === cartItems.filter(item => item.hasJourneyElement).length;\n\n return {\n payLaterItemsToBeQuoted,\n disableBooking,\n cart,\n bookingCompleted: state.common.bookingCompleted,\n bookingFailed: state.common.bookingFailed,\n bookingError: state.common.bookingError,\n allItemsBookingConfirmed,\n bookingQuoted,\n bookingPossible,\n onlyOneItemFromSearch,\n allItemsAvailable,\n flightServicesFetched,\n flightServicesNeeded,\n canProceedWithPayment,\n cartFees: cart.fees,\n cartItems,\n totalCartItems: ownProps.totalCartItems,\n uniqueCCTokens,\n cartState: cart.state,\n cartStatus,\n itemsBookingInProgress,\n itemsBookingDone,\n createOptionPossible,\n currency: cart.currency,\n fees: state.common.fees,\n flightResultDetailsById: state.flights.resultDetailsById,\n isBooking: state.common.isBooking,\n paymentGateway: state.common.paymentGateway,\n paymentFailureReason: state.common.paymentFailureReason,\n redirectURL: state.common.redirectURL,\n staticProducts: state.common.staticProducts,\n total: cart.total,\n travelerCount: state.common.travelerCount,\n voucher: state.common.cart.voucher,\n grossTotalsByGroup: cart.grossTotalsByGroup,\n isFetchingFop: cart.isFetchingFop,\n taxes: state.common.cart.taxes,\n cartId,\n travelers,\n costCenters,\n cartCostCenters,\n legalPaperAcceptances: state.common.cart.legalPaperAcceptances,\n allocationPerAccountingType: state.common.cart.allocationPerAccountingType,\n canBookQuoteItems,\n paymentMethodSurcharge: state.common.cart.paymentMethodSurcharge,\n totalWithoutVoucherReduction: cart.totalWithoutVoucherReduction,\n };\n};\n\nconst mapDispatchToProps = dispatch => ({\n resetPayment: () => dispatch(resetPayment()),\n fetchCart: (id, callbackParams) => dispatch(fetchCart(id, callbackParams)),\n book: (results, callbackParams) => dispatch(bookCart(results, callbackParams)),\n createOrder: (callbackParams, procedure) => dispatch(createOrder(callbackParams, procedure)),\n prepareForExternalPayment: (callbackParams, procedure) =>\n dispatch(prepareForExternalPayment(callbackParams, procedure)),\n fetchCartItemsAvailability: callbackParams =>\n dispatch(fetchCartItemsAvailability(callbackParams)),\n fetchCartAllItemsAvailability: callbackParams =>\n dispatch(fetchCartAllItemsAvailability(callbackParams)),\n fetchJourneyElement: (type, id) => dispatch(fetchJourneyElement(type, id, true)),\n storeCartRecipientData: () => dispatch(storeCartRecipientData()),\n setLegalPaperAcceptance: (paper, value) => dispatch(setLegalPaperAcceptance(paper, value)),\n fetchCartStatus: (cartId, callbackParams) => dispatch(fetchCartStatus(cartId, callbackParams)),\n retrackBooking: cartId => dispatch(retrackBooking(cartId)),\n fetchFormOfPayment: () => dispatch(fetchFormOfPayment()),\n fetchPaymentGatewayInfo: (paygateType, paymentMethod, cartId, redirectTo, baseUrl, iframe) =>\n dispatch(\n fetchPaymentGatewayInfo(paygateType, paymentMethod, cartId, redirectTo, baseUrl, iframe),\n ),\n fetchLegalPapers: callbackParams => dispatch(fetchLegalPapers(callbackParams)),\n removeSubItem: (itemId, callbackParams) => dispatch(removeSubItem(itemId, callbackParams)),\n fetchServices: (cart, callbackParams) => dispatch(fetchServices(cart, callbackParams)),\n fetchCreditCardDetails: () => dispatch(fetchFOPandCardDetails()),\n fetchCartPeople: callbackParams => dispatch(fetchCartPeople(callbackParams)),\n fetchFees: callbackParams => dispatch(fetchFees(callbackParams)),\n setOutOfPolicyJustification: (itemId, reason) =>\n dispatch(setOutOfPolicyJustification(itemId, reason)),\n resetFormOfPayment: () => dispatch(resetFormOfPayment()),\n});\n\nconst BookingWithFetchOnUpdate = fetchOnUpdate(['id'], (params, props) => {\n const locationQuery = memoizeLocationQuery(props.location.search);\n props.fetchCartStatus(params.id, props.callbackParams).then(response => {\n const itemsBookingInProgress = response.status.cartItems.some(\n cartItem => cartItem.status === 'in_progress',\n );\n\n if (\n (!props.isBooking && itemsBookingInProgress) ||\n locationQuery.thirdPartyDelayedTransaction === 'true'\n ) {\n // Start tracking progress of booking if its refreshed or redirect back from 3rd party payment\n props.retrackBooking(params.id);\n }\n });\n\n props.fetchCart(params.id, props.callbackParams).then(() => {\n props.fetchCreditCardDetails().then(() => {\n props.fetchFormOfPayment();\n });\n });\n})(Booking);\n\nconst BookingWithFetchOnUpdateWithContext = (props, context) => (\n {currentNextButton}
\n \n
\n \n
\n \n \n {bookingReceivedText}\n \n {text}\n {this.props.cartItems.length > 0 &&\n this.props.cartItems.map((cartItem, index) => (\n
\n \n {this.props.bookingFailed && (\n \n \n
\n )}\n \n \n {this.props.bookingError}\n \n
\n )}\n {!isCartReadOnly &&\n this.state.legalPapersFetched &&\n (this.state.legalPapers.length > 0 ||\n this.state.airlineTermsAndConditions.length > 0) && (\n \n
\n ))}\n \n
\n \n
\n \n \n {emailConfirmation && (\n \n \n )}\n {this.props.cartCostCenters.length > 0 && (\n
\n \n
\n \n
\n )}\n \n (\n (\n {\n hideSidePanel();\n toggleCardAddressFormState(true);\n }}\n currentTab={currentTab}\n />\n
\n );\n};\n\nFinalBookingSteps.defaultProps = {\n cartExpiredAt: null,\n uniqueCCTokens: [],\n};\n\nFinalBookingSteps.propTypes = {\n ...ccvPaymentProps,\n cartExpiredAt: PropTypes.string,\n children: PropTypes.node.isRequired,\n allCreditCards: PropTypes.arrayOf(creditCardItemShape).isRequired,\n uniqueCCTokens: PropTypes.arrayOf(PropTypes.string),\n cartItems: PropTypes.arrayOf(cartItemShape).isRequired,\n cardStoredStatusByToken: PropTypes.shape(byTokenShape).isRequired,\n laymanMode: PropTypes.bool.isRequired,\n affiliatesBillingUrl: PropTypes.string.isRequired,\n callbackParams: PropTypes.shape(callbackParamsShape).isRequired,\n};\n\nconst withQueryParams = withQueryParamsProvider(FinalBookingSteps);\n\nexport default withCCVPaymentHandle(withQueryParams);\n","import { connect } from 'react-redux';\nimport FinalBookingSteps from './FinalBookingSteps';\n\nconst mapStateToProps = (state, ownProps) => {\n const laymanMode = ownProps.laymanMode;\n const cart = state.common.cart;\n const cardStoredStatusByToken = {};\n const allCreditCards = Object.values(state.common.newCreditCard);\n const allCCTokens = allCreditCards.map(creditCard => {\n cardStoredStatusByToken[creditCard.token] = creditCard.storedInCcv;\n return creditCard.token;\n });\n\n const uniqueCCTokens = [...new Set(allCCTokens)];\n const cartItems = cart.items;\n const totalCartItems = cartItems && cartItems.length;\n const cartExpiredAt = cart.expiredAt;\n return {\n totalCartItems,\n uniqueCCTokens,\n cartItems,\n cartExpiredAt,\n cardStoredStatusByToken,\n allCreditCards,\n laymanMode,\n };\n};\n\nexport default connect(mapStateToProps)(FinalBookingSteps);\n","const mapAvailableChannels = (searchAccounts, initialAvailableChannels) => {\n let modifiedAvailableChannels = initialAvailableChannels;\n if (!modifiedAvailableChannels || Object.keys(modifiedAvailableChannels).length === 0) {\n modifiedAvailableChannels = {\n flights: Object.keys(searchAccounts.flights).filter(\n channel => searchAccounts.flights[channel].credentials.length > 0,\n ),\n hotels: Object.keys(searchAccounts.hotels).filter(\n channel => searchAccounts.hotels[channel].credentials.length > 0,\n ),\n cars: Object.keys(searchAccounts.cars).filter(\n channel => searchAccounts.cars[channel].credentials.length > 0,\n ),\n };\n }\n return modifiedAvailableChannels;\n};\n\nexport default mapAvailableChannels;\n","const mapTravelArranger = travelArrangerPermissionLevel => {\n let enabled;\n let customerInformationVisible;\n let customerInformationEditable;\n let allowContinueToOrder;\n\n switch (travelArrangerPermissionLevel) {\n case 'booking':\n enabled = true;\n customerInformationVisible = false;\n customerInformationEditable = false;\n allowContinueToOrder = false;\n break;\n\n case 'read':\n enabled = true;\n customerInformationVisible = true;\n customerInformationEditable = false;\n allowContinueToOrder = true;\n break;\n\n case 'write':\n enabled = true;\n customerInformationVisible = true;\n customerInformationEditable = true;\n allowContinueToOrder = true;\n break;\n\n case 'admin':\n enabled = true;\n customerInformationVisible = true;\n customerInformationEditable = true;\n allowContinueToOrder = true;\n break;\n\n // someone not in travel arranger mode (Agent or customer directly)\n default:\n enabled = false;\n customerInformationVisible = true;\n customerInformationEditable = true;\n allowContinueToOrder = true;\n break;\n }\n\n return {\n enabled,\n customerInformationVisible,\n customerInformationEditable,\n allowContinueToOrder,\n };\n};\n\nexport default mapTravelArranger;\n","import mapAvailableChannels from './availableChannelsMapping';\nimport mapTravelArranger from './travelArrangerMapping';\n\nconst mapBookingAppContext = ibeProps => ({\n allowBookingOfUnapprovedItems: ibeProps.allowBookingOfUnapprovedItems,\n availableChannels: mapAvailableChannels(ibeProps.searchAccounts, ibeProps.availableChannels),\n callbackParams: ibeProps.callbackParams,\n currency: ibeProps.currency,\n laymanMode: ibeProps.laymanMode,\n iframeMode: ibeProps.forceAdvancedSearch,\n creditCardEnabled: ibeProps.creditCardEnabled,\n paymentDisabled: ibeProps.paymentDisabled,\n allowPaymentViaInvoice: ibeProps.allowPaymentViaInvoice,\n paymentOptions: ibeProps.paymentOptions,\n searchAccounts: ibeProps.searchAccounts,\n travelArranger: mapTravelArranger(ibeProps.travelArrangerPermissionLevel),\n travelArrangerDefaultEmail: ibeProps.travelArrangerDefaultEmail,\n travelArrangerPresent: ibeProps.travelArrangerPresent,\n confirmationMailForTravelApp: ibeProps.confirmationMailForTravelApp,\n confirmationMailForAgent: ibeProps.confirmationMailForAgent,\n currentUserAge: ibeProps.currentUserAge,\n travelerLoggedIn: ibeProps.travelerLoggedIn,\n travelerHasOrganization: ibeProps.travelerHasOrganization,\n citizenshipCountryCode: ibeProps.citizenshipCountryCode,\n enableVisaAdvisory: ibeProps.enableVisaAdvisory,\n enableIdDocOptional: ibeProps.enableIdDocOptional,\n exchange: ibeProps.exchange,\n initialSearchParams: ibeProps.initialSearchParams,\n countryCodes: ibeProps.countryCodes,\n searchInputConfiguration: {\n showDepartureTime: ibeProps.searchInputConfiguration.showDepartureTime,\n showPlusMinusThreeDays: ibeProps.searchInputConfiguration.showPlusMinusThreeDays,\n showNonStop: ibeProps.searchInputConfiguration.showNonStop,\n showAirlinePreference: ibeProps.searchInputConfiguration.showAirlinePreference,\n showOnlyFlexibleFlight: ibeProps.searchInputConfiguration.showOnlyFlexibleFlight,\n showBookingClass: ibeProps.searchInputConfiguration.showBookingClass,\n showAlliancePreferences: ibeProps.searchInputConfiguration.showAlliancePreferences,\n showOnlyBagIncludedFlight: ibeProps.searchInputConfiguration.showOnlyBagIncludedFlight,\n showExcludeCodeShareFlights: ibeProps.searchInputConfiguration.showExcludeCodeShareFlights,\n enableSearchItineraryOnly: ibeProps.searchInputConfiguration.enableSearchItineraryOnly,\n whitelistedAirports: ibeProps.searchInputConfiguration.whitelistedAirports,\n },\n ccvPublicToken: ibeProps.ccvPublicToken,\n ccvURL: ibeProps.ccvURL,\n minHoursInFuture: ibeProps.minHoursInFuture,\n tenantIdentifier: ibeProps.tenantIdentifier,\n offerOnly: ibeProps.offerOnly,\n globalPolicyPreferences: ibeProps.globalPolicyPreferences,\n individualAccountingTypeEnabled: ibeProps.individualAccountingTypeEnabled,\n frozen: ibeProps.frozen,\n wtsEnabled: ibeProps.wtsEnabled,\n viewMode: ibeProps.viewMode,\n isShowFilters: ibeProps.isShowFilters,\n canExcludeWtsContent: ibeProps.canExcludeWtsContent,\n});\n\nexport default mapBookingAppContext;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Provider } from 'react-redux';\nimport { IntlProvider } from 'react-intl';\nimport { hot } from 'react-hot-loader';\nimport { Router, Route, Redirect, Switch } from 'react-router-dom';\nimport { createHashHistory } from 'history';\nimport Card from '@wtag/rcl-card';\nimport { Link } from '@wtag/react-comp-lib';\nimport CommonApp from '../App';\nimport NotAvailable from '../components/NotAvailable';\nimport FlightResults from '../SearchResult/flight/ResultsContainer';\nimport FlightMatrix from '../SearchDetails/flight/MatrixContainer';\n\nimport Deal from '../Deal/DealContainer';\nimport ApprovalRequest from '../ApprovalRequest/ApprovalRequestContainer';\nimport closeWindow from '../ReviewBooking/closeWindow';\n\nimport HotelResults from '../SearchResult/hotel/ResultsContainer';\nimport HotelDetails from '../SearchDetails/hotel/DetailsContainer';\n\nimport CarResults from '../SearchResult/car/ResultsContainer';\n\nimport Search from '../Search';\n\nimport FinalBookingSteps from './FinalBookingStepsContainer';\n\nimport mapBookingAppContext from '../helpers/bookingAppContextMapping';\nimport mapAvailableChannels from '../helpers/availableChannelsMapping';\nimport {\n availableChannelsShape,\n initialSearchParamsShape,\n searchInputConfigurationShape,\n callbackParamsShape,\n searchAccountsShape,\n globalPolicyPreferenceShape,\n countryCodeShape,\n exchangeShape,\n} from './shapes';\nimport FilterButton from '../helpers/FilterButton';\nimport { TYPE_STANDARD } from '../../helpers/viewType';\nimport './styles.scss';\n\nconst hashHistory = createHashHistory();\n\nclass BookingApp extends React.Component {\n constructor(props) {\n super(props);\n this.state = { ...mapBookingAppContext(props) };\n }\n getChildContext() {\n return { ...this.state };\n }\n\n updatePreselectedTravelersBookingAppContext = preselectedTravelersBookingAppContext => {\n const {\n preselectTravelerIds,\n ownerId,\n ownerAge,\n isOwnerPresent,\n allowBookingOfUnapprovedItems,\n citizenshipCountryCode,\n globalPolicyPreferences,\n searchAccounts,\n } = preselectedTravelersBookingAppContext;\n this.setState({\n callbackParams: {\n ...this.state.callbackParams,\n all_traveler_ids: preselectTravelerIds,\n person_id: ownerId,\n },\n currentUserAge: ownerAge,\n travelerLoggedIn: isOwnerPresent,\n allowBookingOfUnapprovedItems,\n citizenshipCountryCode,\n globalPolicyPreferences,\n searchAccounts,\n availableChannels: mapAvailableChannels(searchAccounts, this.state.availableChannels),\n });\n };\n\n updateViewMode = value => {\n this.setState({ viewMode: value });\n };\n\n updateIsShowFilters = () => {\n this.setState({ isShowFilters: !this.state.isShowFilters });\n };\n\n resetBookingAppContext = () => this.setState({ ...mapBookingAppContext(this.props) });\n\n render() {\n const filterButtonTag = this.state.isShowFilters\n ? I18n.t('components.ibe.search_results.filters.hide_all_filters')\n : I18n.t('components.ibe.search_results.filters.show_all_filters');\n return (\n \n \n \n \n \n \n (\n \n (\n \n (\n \n \n \n {filterButtonTag}\n \n \n (\n \n (\n (\n \n (\n \n (\n \n (\n (\n \n (\n \n (\n (\n (\n (\n \n )}\n />\n \n \n \n \n \n
\n );\n }\n}\n\nBookingApp.propTypes = {\n affiliatesUrl: PropTypes.string,\n affiliatesBillingUrl: PropTypes.string,\n setShowBottomComponents: PropTypes.func.isRequired,\n setOnSearchStarted: PropTypes.func.isRequired,\n allowBookingOfUnapprovedItems: PropTypes.bool,\n availableChannels: PropTypes.shape(availableChannelsShape),\n callbackParams: PropTypes.shape(callbackParamsShape),\n currency: PropTypes.string.isRequired,\n language: PropTypes.string,\n laymanMode: PropTypes.bool,\n forceAdvancedSearch: PropTypes.bool,\n displayTitle: PropTypes.bool,\n creditCardEnabled: PropTypes.bool,\n paymentDisabled: PropTypes.bool,\n allowPaymentViaInvoice: PropTypes.bool,\n paymentOptions: PropTypes.shape(),\n searchAccounts: PropTypes.shape(searchAccountsShape),\n travelArrangerPermissionLevel: PropTypes.oneOf(['booking', 'read', 'write', 'admin']),\n countryCodes: PropTypes.arrayOf(countryCodeShape).isRequired,\n travelArrangerDefaultEmail: PropTypes.string,\n travelArrangerPresent: PropTypes.objectOf(PropTypes.string),\n confirmationMailForTravelApp: PropTypes.bool,\n confirmationMailForAgent: PropTypes.bool,\n store: PropTypes.shape({\n [PropTypes.string]: PropTypes.shape(),\n }).isRequired,\n messages: PropTypes.objectOf(PropTypes.string).isRequired,\n currentUserAge: PropTypes.number,\n travelerLoggedIn: PropTypes.bool,\n travelerHasOrganization: PropTypes.bool,\n citizenshipCountryCode: PropTypes.string,\n enableVisaAdvisory: PropTypes.bool,\n enableIdDocOptional: PropTypes.bool,\n exchange: PropTypes.shape(exchangeShape),\n initialSearchParams: PropTypes.shape(initialSearchParamsShape),\n searchInputConfiguration: PropTypes.shape(searchInputConfigurationShape),\n ccvPublicToken: PropTypes.string.isRequired,\n ccvURL: PropTypes.string.isRequired,\n minHoursInFuture: PropTypes.number.isRequired,\n tenantIdentifier: PropTypes.string.isRequired,\n offerOnly: PropTypes.bool,\n globalPolicyPreferences: PropTypes.shape(globalPolicyPreferenceShape),\n individualAccountingTypeEnabled: PropTypes.bool.isRequired,\n frozen: PropTypes.bool,\n images: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.number,\n imageUrl: PropTypes.string,\n }),\n ).isRequired,\n wtsEnabled: PropTypes.bool.isRequired,\n viewMode: PropTypes.string,\n isShowFilters: PropTypes.bool,\n canExcludeWtsContent: PropTypes.bool,\n};\n\nBookingApp.defaultProps = {\n affiliatesUrl: null,\n affiliatesBillingUrl: null,\n allowBookingOfUnapprovedItems: false,\n availableChannels: null,\n callbackParams: {},\n language: 'en',\n laymanMode: true,\n forceAdvancedSearch: false,\n displayTitle: true,\n creditCardEnabled: true,\n paymentDisabled: false,\n allowPaymentViaInvoice: true,\n paymentOptions: {},\n searchAccounts: {},\n travelArrangerPermissionLevel: null,\n travelArrangerDefaultEmail: null,\n travelArrangerPresent: [],\n confirmationMailForTravelApp: true,\n confirmationMailForAgent: false,\n currentUserAge: null,\n travelerLoggedIn: false,\n travelerHasOrganization: true,\n citizenshipCountryCode: null,\n enableVisaAdvisory: true,\n enableIdDocOptional: true,\n exchange: {\n enabled: false,\n },\n initialSearchParams: {\n flights: null,\n },\n searchInputConfiguration: {\n showDepartureTime: true,\n showPlusMinusThreeDays: true,\n showNonStop: true,\n showAirlinePreference: true,\n showOnlyFlexibleFlight: true,\n showOnlyBagIncludedFlight: true,\n showBookingClass: true,\n showAlliancePreferences: true,\n showExcludeCodeShareFlights: true,\n enableSearchItineraryOnly: false,\n whitelistedAirports: [],\n },\n offerOnly: false,\n globalPolicyPreferences: null,\n frozen: false,\n viewMode: TYPE_STANDARD,\n isShowFilters: true,\n canExcludeWtsContent: false,\n};\n\nBookingApp.childContextTypes = {\n allowBookingOfUnapprovedItems: PropTypes.bool,\n availableChannels: PropTypes.shape(availableChannelsShape),\n callbackParams: PropTypes.shape(callbackParamsShape),\n currency: PropTypes.string,\n travelArranger: PropTypes.shape({\n enabled: PropTypes.bool,\n customerInformationVisible: PropTypes.bool,\n customerInformationEditable: PropTypes.bool,\n allowContinueToOrder: PropTypes.bool,\n }),\n countryCodes: PropTypes.arrayOf(countryCodeShape).isRequired,\n travelArrangerDefaultEmail: PropTypes.string.isRequired,\n travelArrangerPresent: PropTypes.objectOf(PropTypes.string).isRequired,\n confirmationMailForTravelApp: PropTypes.bool,\n confirmationMailForAgent: PropTypes.bool,\n laymanMode: PropTypes.bool,\n iframeMode: PropTypes.bool,\n forceAdvancedSearch: PropTypes.bool,\n creditCardEnabled: PropTypes.bool,\n paymentDisabled: PropTypes.bool,\n allowPaymentViaInvoice: PropTypes.bool,\n paymentOptions: PropTypes.objectOf(PropTypes.any),\n searchAccounts: PropTypes.shape(searchAccountsShape),\n currentUserAge: PropTypes.number,\n travelerLoggedIn: PropTypes.bool,\n travelerHasOrganization: PropTypes.bool,\n citizenshipCountryCode: PropTypes.string,\n enableVisaAdvisory: PropTypes.bool,\n enableIdDocOptional: PropTypes.bool,\n exchange: PropTypes.shape(exchangeShape),\n initialSearchParams: PropTypes.shape(initialSearchParamsShape),\n searchInputConfiguration: PropTypes.shape(searchInputConfigurationShape),\n ccvPublicToken: PropTypes.string,\n ccvURL: PropTypes.string,\n minHoursInFuture: PropTypes.number,\n tenantIdentifier: PropTypes.string,\n offerOnly: PropTypes.bool,\n globalPolicyPreferences: PropTypes.shape(globalPolicyPreferenceShape),\n individualAccountingTypeEnabled: PropTypes.bool,\n frozen: PropTypes.bool,\n wtsEnabled: PropTypes.bool,\n viewMode: PropTypes.string,\n isShowFilters: PropTypes.bool,\n canExcludeWtsContent: PropTypes.bool,\n};\n\nexport default hot(module)(BookingApp);\n","import PropTypes from 'prop-types';\nimport requiredIf from 'react-required-if';\nimport {\n availableFormOfPaymentShape,\n creditCardItemShape,\n} from 'sharedWebpack/CreditCardVaultPayment/shapes';\n\nconst accountShape = {\n account: PropTypes.string,\n identifier: PropTypes.string,\n};\n\nconst amountShape = {\n amount: PropTypes.string,\n currency: PropTypes.string,\n};\n\nexport const availableChannelsShape = {\n car: PropTypes.arrayOf(PropTypes.string),\n flights: PropTypes.arrayOf(PropTypes.string),\n hotels: PropTypes.arrayOf(PropTypes.string),\n};\n\nexport const countryCodeShape = PropTypes.shape([PropTypes.string, PropTypes.string]);\n\nexport const callbackParamsShape = {\n all_traveler_ids: PropTypes.arrayOf(PropTypes.string),\n layman: PropTypes.bool,\n order_id: PropTypes.string,\n person_id: PropTypes.string,\n};\n\nexport const searchAccountsShape = {\n cars: PropTypes.shape({\n [PropTypes.string]: {\n credentials: PropTypes.arrayOf({\n allowance: PropTypes.number,\n code: PropTypes.arrayOf(PropTypes.string),\n identifier: PropTypes.string,\n }),\n ndc: PropTypes.bool,\n },\n }),\n};\n\nexport const globalPolicyPreferenceShape = {\n airlines: PropTypes.arrayOf(PropTypes.shape()),\n carRentalCompanies: PropTypes.arrayOf(PropTypes.shape()),\n};\n\nexport const initialSearchParamsShape = {\n flights: PropTypes.shape({\n adults: PropTypes.number,\n children: PropTypes.number,\n infants: PropTypes.number,\n trips: PropTypes.arrayOf(\n PropTypes.shape({\n origin: PropTypes.string,\n destination: PropTypes.string,\n date: PropTypes.string,\n cabinClass: PropTypes.string,\n }),\n ),\n }),\n};\n\nexport const searchInputConfigurationShape = {\n showDepartureTime: PropTypes.bool,\n showPlusMinusThreeDays: PropTypes.bool,\n showNonStop: PropTypes.bool,\n showAirlinePreference: PropTypes.bool,\n showOnlyFlexibleFlight: PropTypes.bool,\n showBookingClass: PropTypes.bool,\n showAlliancePreferences: PropTypes.bool,\n showOnlyBagIncludedFlight: PropTypes.bool,\n showExcludeCodeShareFlights: PropTypes.bool,\n enableSearchItineraryOnly: PropTypes.bool,\n whitelistedAirports: PropTypes.arrayOf(PropTypes.string),\n};\n\nexport const exchangeShape = {\n enabled: PropTypes.bool.isRequired,\n type: requiredIf(PropTypes.string, props => props.exchange && props.exchange.enabled),\n bookingId: requiredIf(PropTypes.number, props => props.exchange && props.exchange.enabled),\n bookingIdentifier: requiredIf(\n PropTypes.string,\n props => props.exchange && props.exchange.enabled,\n ),\n currentPrice: requiredIf(\n PropTypes.shape({\n net: PropTypes.shape(amountShape).isRequired,\n gross: PropTypes.shape(amountShape).isRequired,\n margin: PropTypes.shape(amountShape).isRequired,\n }),\n props => props.exchange && props.exchange.enabled,\n ),\n};\n\nexport const cartItemShape = {\n approvalRequired: PropTypes.bool,\n available: PropTypes.bool,\n availableFormOfPayment: PropTypes.shape(availableFormOfPaymentShape),\n bookingAttributes: PropTypes.shape({\n resultId: PropTypes.string,\n }),\n cancelPenalty: PropTypes.shape(amountShape),\n cartId: PropTypes.string,\n changePenalty: PropTypes.shape(amountShape),\n channel: PropTypes.shape(accountShape),\n conversionInfo: PropTypes.shape({\n converted: PropTypes.bool,\n sourceAmount: PropTypes.string,\n }),\n currency: PropTypes.string,\n endsAt: PropTypes.string,\n formOfPayment: {\n cardDetails: PropTypes.shape(creditCardItemShape),\n type: PropTypes.string,\n },\n grossAmount: PropTypes.string,\n grossTaxes: PropTypes.string,\n grossTaxesIncludingSubItems: PropTypes.string,\n grossTotal: PropTypes.string,\n grossTotalIncludingSubItems: PropTypes.string,\n grossTotalMinorUnit: PropTypes.string,\n hasJourneyElement: PropTypes.bool,\n id: PropTypes.number,\n itemTitle: PropTypes.string,\n journeyElementId: PropTypes.number,\n journeyElementType: PropTypes.string,\n journeySummaryHuman: PropTypes.string,\n mainItemId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n marginBreakdown: PropTypes.arrayOf(\n PropTypes.shape({\n amount: PropTypes.string,\n currency: PropTypes.string,\n id: PropTypes.number,\n marginId: PropTypes.number,\n name: PropTypes.string,\n taxes: PropTypes.string,\n total: PropTypes.string,\n }),\n ),\n oldGrossAmount: PropTypes.string,\n oldGrossTaxes: PropTypes.string,\n oldGrossTotal: PropTypes.string,\n outOfPolicy: PropTypes.bool,\n outOfPolicyJustification: PropTypes.string,\n overAllGrossAmount: PropTypes.string,\n overAllGrossTax: PropTypes.string,\n pendingConfirmation: PropTypes.bool,\n preferred: PropTypes.bool,\n priceChanged: PropTypes.bool,\n productId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n quantity: PropTypes.string,\n search: PropTypes.shape({\n id: PropTypes.number,\n identifier: PropTypes.string,\n }),\n startsAt: PropTypes.string,\n subItems: PropTypes.arrayOf(PropTypes.any).isRequired,\n supplier: PropTypes.shape(accountShape),\n totalMargin: PropTypes.string,\n type: PropTypes.string,\n};\n\nconst facilityItemShape = PropTypes.shape({\n amount: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(null)]),\n currency: PropTypes.string,\n modifier: PropTypes.string,\n type: PropTypes.string,\n});\n\nconst carShape = {\n acrissCode: PropTypes.string,\n category: PropTypes.string,\n condition: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(null)]),\n description: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(null)]),\n drivenWheel: PropTypes.string,\n imageUrl: PropTypes.shape({\n url: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(null)]),\n }),\n make: PropTypes.string,\n name: PropTypes.string,\n rating: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(null)]),\n type: PropTypes.string,\n};\n\nconst carLocationShape = {\n localtime: PropTypes.string,\n localtimeHour: PropTypes.string,\n location: PropTypes.string,\n};\n\nexport const carDetailsShape = {\n id: PropTypes.string,\n facilities: PropTypes.shape({\n airbag: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(null)]),\n airConditioned: PropTypes.bool,\n doors: PropTypes.string,\n fuelPolicy: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(null)]),\n fuelType: PropTypes.string,\n insurances: PropTypes.arrayOf(facilityItemShape),\n liability: PropTypes.arrayOf(facilityItemShape),\n otherFacilities: PropTypes.arrayOf(facilityItemShape),\n mileage: PropTypes.arrayOf(\n PropTypes.shape({\n amount: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(null)]),\n currency: PropTypes.string,\n modifier: PropTypes.string,\n packageSize: PropTypes.string,\n type: PropTypes.string,\n }),\n ),\n seats: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(null)]),\n vendor: PropTypes.shape({\n imageUrl: PropTypes.shape({\n url: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(null)]),\n }),\n }),\n laymanMode: PropTypes.bool,\n car: PropTypes.shape(carShape),\n pickUp: PropTypes.shape(carLocationShape),\n dropOff: PropTypes.shape(carLocationShape),\n currency: PropTypes.string,\n ratePerDay: PropTypes.string,\n source: PropTypes.shape({\n account: PropTypes.string,\n supplier: PropTypes.string,\n }),\n corporateDeal: PropTypes.bool,\n labels: PropTypes.shape({\n outOfPolicy: PropTypes.bool,\n preferred: PropTypes.bool,\n }),\n policiesReasons: PropTypes.shape({}),\n approvalRequired: PropTypes.bool,\n payLater: PropTypes.bool,\n }),\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { EmphasisTag } from '@wtag/react-comp-lib';\n\nconst ChannelListTag = ({ channels, type, identifier }) => {\n const channelsListText = identifier || channels.join(' | ');\n\n return {I18n.t('ibe.payment.instant_ticket_warning')}
;\n }\n\n return (\n \n {label}\n {priceTag}\n
\n);\n\nPriceBreakdownItem.defaultProps = {\n className: null,\n isPriceTagBold: false,\n};\n\nPriceBreakdownItem.propTypes = {\n className: PropTypes.string,\n isPriceTagBold: PropTypes.bool,\n label: PropTypes.string.isRequired,\n priceTag: PropTypes.node.isRequired,\n};\n\nconst FlightPriceBreakdownStandard = ({\n fareCalculations,\n grossTaxes,\n marginBreakdown,\n travelerCount,\n grossAmount,\n currency,\n fromResult,\n fareBrandTitle,\n laymanMode,\n}) => {\n const getPriceAndCurrencyForTravelerType = type => {\n const selectedFare =\n fareCalculations && fareCalculations.find(fare => fare.passengerType === type);\n const price =\n selectedFare && parseFloat(fromResult ? selectedFare.legPrice : selectedFare.price);\n const currencyForTravelerType = selectedFare && selectedFare.currency;\n\n return { price, currency: currencyForTravelerType };\n };\n\n const getPriceTagForTravelerType = type => {\n const { price, currency: currencyForTravelerType } = getPriceAndCurrencyForTravelerType(type);\n\n if (price === 0) {\n return \n {fareBrandTitle && (\n
\n );\n};\n\nFlightPriceBreakdownStandard.defaultProps = {\n travelerCount: {\n adults: PropTypes.number,\n children: PropTypes.number,\n infants: PropTypes.number,\n },\n fromResult: false,\n fareBrandTitle: null,\n grossTaxes: null,\n marginBreakdown: null,\n};\n\nFlightPriceBreakdownStandard.propTypes = {\n marginBreakdown: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.number,\n name: PropTypes.string,\n currency: PropTypes.string,\n total: PropTypes.string,\n }),\n ),\n grossTaxes: PropTypes.number,\n grossAmount: PropTypes.number.isRequired,\n currency: PropTypes.string.isRequired,\n travelerCount: PropTypes.shape({\n adults: PropTypes.number,\n children: PropTypes.number,\n infants: PropTypes.number,\n }),\n fareCalculations: PropTypes.arrayOf(\n PropTypes.shape({\n price: PropTypes.string,\n currency: PropTypes.string,\n passengerType: PropTypes.string,\n }),\n ).isRequired,\n fromResult: PropTypes.bool,\n fareBrandTitle: PropTypes.string,\n laymanMode: PropTypes.bool.isRequired,\n};\nexport default FlightPriceBreakdownStandard;\n","import React, { useState, useEffect } from 'react';\nimport classNames from 'classnames';\nimport httpClient from 'agentHTTPClient';\nimport routes from 'agentRoutes';\nimport Popover from '@wtag/rcl-popover';\nimport ContentLoaderPlaceholder from '@wtag/rcl-content-loader-placeholder';\nimport Amount from 'sharedWebpack/Amount';\nimport PropTypes from 'prop-types';\nimport { hot } from 'react-hot-loader';\nimport FlightPriceBreakdown from './FlightPriceBreakdownStandard';\nimport calculateAndAddTaxWithPrice from '../../IBE/helpers/calculateAndAddTaxWithPrice';\nimport { TYPE_ADULT } from '../../helpers/passengerTypes';\n\nconst FlightPricePerAdult = ({\n className,\n availabilityIcon,\n currency,\n numberOfAdult,\n numberOfChildren,\n numberOfInfant,\n grossAmount,\n grossTaxes,\n marginBreakdown,\n laymanMode,\n fareCalculations,\n fromResult,\n adultPrice,\n journeyElementType,\n journeyElementId,\n fareBrandTitle,\n onPriceLabelClick,\n removePrefixText,\n}) => {\n const [flightJourneyElement, setflightJourneyElement] = useState(null);\n const [isLoading, setIsLoading] = useState(false);\n const [isPopoverVisible, setIsPopoverVisible] = useState(false);\n\n const grossAmountZero = grossAmount && parseFloat(grossAmount) === 0;\n\n const fareCalculationsPresent =\n (fareCalculations && fareCalculations.length > 0) ||\n (flightJourneyElement &&\n flightJourneyElement.fareCalculations &&\n flightJourneyElement.fareCalculations.length > 0);\n\n const adultPriceInOrder =\n flightJourneyElement &&\n flightJourneyElement.fareCalculations &&\n flightJourneyElement.fareCalculations.find(traveler => traveler.passengerType === TYPE_ADULT) &&\n flightJourneyElement.fareCalculations.find(traveler => traveler.passengerType === TYPE_ADULT)\n .price;\n\n const price =\n grossAmountZero || !fareCalculationsPresent\n ? grossAmount\n : calculateAndAddTaxWithPrice(\n adultPrice || adultPriceInOrder,\n grossTaxes,\n numberOfAdult,\n numberOfChildren,\n );\n\n const openPriceBreakdownPopover = () => {\n setIsPopoverVisible(true);\n onPriceLabelClick();\n };\n\n const fetchJourneyElement = async () => {\n setIsLoading(true);\n\n const { data } = await httpClient.get(\n routes.api.fetchJourneyElement({\n type: journeyElementType,\n id: journeyElementId,\n }),\n );\n\n setflightJourneyElement(data);\n setIsLoading(false);\n };\n\n useEffect(() => {\n if (journeyElementId) {\n fetchJourneyElement();\n }\n }, [journeyElementId, journeyElementType]);\n\n const travelerCount = {\n adults: numberOfAdult,\n children: numberOfChildren,\n infants: numberOfInfant,\n };\n\n const currentFareCalculations =\n (fareCalculations && fareCalculations.length > 0 && fareCalculations) ||\n (flightJourneyElement && flightJourneyElement.fareCalculations);\n\n return (\n {fareBrandTitle}
\n )}\n {filteredTravelerTypesWithPriceDetails.map(({ type }) => (\n \n
\n ))}\n \n
\n \n \n {getTravelerCountText(travelerTypesMap)}\n \n
\n \n 0 ? (\n
\n {!laymanMode && marginBreakdown && marginBreakdown.length > 0 && (\n \n {marginBreakdown.map(({ id, name, currency: marginCurrency, total }) => (\n
\n )}\n \n
\n \n
\n \n \n {isLoading ? (\n
\n )}\n \n
\n ) : (\n \n
\n \n
\n \n {!removePrefixText && (\n \n {I18n.t('components.ibe.results.from')}\n \n )}\n {currentFareCalculations ? (\n {\n setIsPopoverVisible(false);\n }}\n direction=\"bottom-right\"\n content={\n
\n \n ) : (\n \n {availabilityIcon}\n \n
\n \n {fareBrandTitle} \n \n ({I18n.t('admin.components.products.options.automation_style.per_adult.label')})\n \n
\n \n
\n );\n\n return (\n \n
\n \n {isBording\n ? I18n.t('admin.components.orders.items_tab.placeholder.boarding')\n : I18n.t('admin.components.orders.items_tab.placeholder.off_boarding')}\n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n {locationTimeObj.location}\n
\n \n
\n );\n};\n\nIndex.propTypes = {\n journeyElementId: PropTypes.number.isRequired,\n journeyElementType: PropTypes.string.isRequired,\n};\n\nexport default Index;\n","import React, { useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport DateTime from 'sharedWebpack/DateTime';\nimport Icon from '@wtag/rcl-icon';\nimport httpClient from 'agentHTTPClient';\nimport routes from 'agentRoutes';\n\nimport './styles.scss';\n\nconst Index = props => {\n const { journeyElementId, journeyElementType } = props;\n\n const [journeyElement, setJourneyElement] = useState({});\n\n const fetchJourneyElement = async () => {\n const { data } = await httpClient.get(\n routes.api.fetchJourneyElement({\n id: journeyElementId,\n type: journeyElementType,\n }),\n );\n\n setJourneyElement(data);\n };\n\n useEffect(() => {\n if (journeyElementId) {\n fetchJourneyElement();\n }\n }, [journeyElementId, journeyElementType]);\n\n const locationAndTime = (locationTimeObj, isStarts) => (\n \n
\n {journeyElement.cruiseName}
\n {journeyElement.roomType && (\n \n {I18n.t('admin.components.orders.items_tab.tag.room_type', {\n room_type: journeyElement.roomType,\n })}\n
\n )}\n \n {journeyElement.boarding && locationAndTime(journeyElement.boarding, true)}\n {journeyElement.offBoarding && locationAndTime(journeyElement.offBoarding, false)}\n
\n {journeyElement.food && (\n \n {I18n.t('admin.components.orders.items_tab.tag.food_name', {\n food_name: journeyElement.food,\n })}\n
\n )}\n \n
\n \n {journeyElement.facilities &&\n I18n.t('admin.components.orders.items_tab.tag.facilities', {\n facilities: journeyElement.facilities,\n })}\n
\n {journeyElement.shipName}
\n \n
\n );\n\n return (\n \n
\n \n {isStarts\n ? I18n.t('admin.components.orders.items_tab.placeholder.event_starts')\n : I18n.t('admin.components.orders.items_tab.placeholder.event_ends')}\n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n {locationTimeObj.location}\n
\n \n
\n );\n};\n\nIndex.propTypes = {\n journeyElementId: PropTypes.number.isRequired,\n journeyElementType: PropTypes.string.isRequired,\n};\n\nexport default Index;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport DateTime from 'sharedWebpack/DateTime';\n\nconst TechnicalStop = ({ duration, arrivalLocaltime, airportName, count }) => (\n \n
\n {journeyElement.name}
\n \n {journeyElement.starts && locationAndTime(journeyElement.starts, true)}\n {journeyElement.ends && locationAndTime(journeyElement.ends, false)}\n
\n \n
\n \n {journeyElement.facilities &&\n I18n.t('admin.components.orders.items_tab.tag.facilities', {\n facilities: journeyElement.facilities,\n })}\n
\n {journeyElement.organizer}
\n \n {duration && (\n \n {duration}\n \n )}\n \n {I18n.t('components.flight_info.segment.technical_stop', {\n count,\n })}\n \n
\n);\n\nTechnicalStop.defaultProps = {\n duration: null,\n arrivalLocaltime: null,\n airportName: null,\n};\n\nTechnicalStop.propTypes = {\n duration: PropTypes.string,\n arrivalLocaltime: PropTypes.string,\n airportName: PropTypes.string,\n count: PropTypes.string.isRequired,\n};\n\nexport default TechnicalStop;\n","import React, { Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport Card from '@wtag/rcl-card';\nimport Icon from '@wtag/rcl-icon';\nimport { EmphasisTag } from '@wtag/react-comp-lib';\nimport HumanReadableDuration from 'sharedWebpack/HumanReadableDuration';\nimport DateTime from 'sharedWebpack/DateTime';\nimport TechnicalStop from './TechnicalStop';\nimport BaggageLabel from '../../../IBE/SearchResult/flight/BaggageLabel';\n\nconst SegmentCard = ({\n events,\n operatingAirline,\n issuedAirline,\n segment,\n findFromfetchedAircrafts,\n}) => {\n let aircraftDetails;\n if (segment.aircraftDetails) {\n aircraftDetails = segment.aircraftDetails;\n } else {\n aircraftDetails = findFromfetchedAircrafts(segment.aircraftType);\n }\n\n const marketingFlight =\n segment.marketingFlight || segment.marketingCarrierCode + segment.marketingFlightNumber;\n\n return (\n \n {arrivalLocaltime &&
\n \n
\n \n {HumanReadableDuration(segment.flightDurationInMinutes)}\n
\n \n {segment.baggagePiecesIncluded && (\n
\n {events.map((event, index) => (\n \n \n \n \n
\n {event.isTechnicalStop ? (\n \n
\n \n {event.airport && event.airport.code}\n
\n \n {event.airport && (\n \n {event.airport.name}\n {`, ${event.airport.placeName}`}\n {`, ${event.airport.countryName}`}\n \n )}\n
\n \n \n {I18n.t('components.flight.terminal', {\n number: event.terminal,\n })}\n
\n )}\n \n )}\n \n {event.isTechnicalStop && events[index + 1].isTechnicalStop && (\n \n
\n )}\n \n \n
\n \n
\n \n
\n {issuedAirline.code !== operatingAirline.code && (\n \n {I18n.t('components.flight_info.segment.issued_by')}\n
\n {issuedAirline.logo && (\n\n 
\n
\n )}\n \n
\n )}\n \n {I18n.t('components.flight_info.segment.operated_by')}\n
\n {operatingAirline.logo && (\n\n 
\n
\n )}\n \n
\n )}\n \n
\n {changedAirportDetails &&\n changedAirportDetails.arrival &&\n changedAirportDetails.departure && (\n \n
\n \n \n {HumanReadableDuration(segmentStopover.transitDurationsInMinutes)}\n \n \n
\n {segmentStopoverAirport && (\n \n {segmentStopoverAirport.name}\n
\n )}\n \n = LONG_TRANSIT_TIME\n ? I18n.t('components.flight.transit.long')\n : I18n.t('components.flight.transit.short')\n }\n size=\"tiny\"\n type=\"warning\"\n />\n
\n \n
\n);\n\nAirportInformations.propTypes = {\n airport: PropTypes.shape({\n code: PropTypes.string,\n countryFlag: PropTypes.string,\n countryName: PropTypes.string,\n placeName: PropTypes.string,\n name: PropTypes.string,\n }).isRequired,\n date: PropTypes.string.isRequired,\n terminal: PropTypes.string.isRequired,\n};\n\nexport default AirportInformations;\n","import React, { useMemo } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { StringParam, useQueryParams, withDefault } from 'use-query-params';\nimport { SidePanel, Link, EmphasisTag } from '@wtag/react-comp-lib';\nimport Avatar from '@wtag/rcl-avatar';\nimport Icon from '@wtag/rcl-icon';\nimport Card from '@wtag/rcl-card';\nimport RclLink from '@wtag/rcl-link';\nimport withQueryParamsProvider from 'sharedWebpack/withQueryParamsProvider';\nimport IconButton from '@wtag/rcl-icon-button';\nimport { hot } from 'react-hot-loader';\nimport HumanReadableDuration from 'sharedWebpack/HumanReadableDuration';\nimport AirportChangeIndicator from 'sharedWebpack/AirportChangeIndicator';\nimport StopoverSidePanel from 'sharedWebpack/IBE/SearchDetails/flight/StopoverSidePanel';\nimport TripSegmentSidePanel from 'sharedWebpack/IBE/SearchDetails/flight/TripSegmentSidePanel';\nimport FlightSeatCountTag from '../../IBE/SearchResult/flight/FlightSeatCountTag';\nimport JourneyPath from './jounryPath';\nimport AirportInformations from './AirportInformations';\nimport BaggageLabel from '../../IBE/SearchResult/flight/BaggageLabel';\nimport FlexiblePaymentTag from '../../FlexiblePaymentTag';\nimport getFlightStopsCountLabel from '../../helpers/calculateStopoverStops';\nimport getTransitType from '../../helpers/getTransitType';\nimport './style.scss';\n\nconst Trip = ({\n trip,\n index,\n flightServices,\n showFlightSeatsStatus,\n showMinimalInfo,\n totalTravelerCount,\n payLater,\n laymanMode,\n}) => {\n const [query, setQuery] = useQueryParams({\n openedSidePanel: withDefault(StringParam, ''),\n });\n\n const eTicketSidePanelVisible = query.openedSidePanel === `eticket-${trip.id}`;\n const seatSidePanelVisible = query.openedSidePanel === `seat-${trip.id}`;\n const wifiSidePanelVisible = query.openedSidePanel === `wifi-${trip.id}`;\n const mealSidePanelVisible = query.openedSidePanel === `meal-${trip.id}`;\n const baggageSidePanelVisible = query.openedSidePanel === `baggage-${trip.id}`;\n const stopoverSidePanelVisible = query.openedSidePanel === `stopover-${trip.id}`;\n const segmentSidePanelVisible = query.openedSidePanel === `segment-${trip.id}`;\n const segments = (trip && trip.segments) || [];\n const stopovers = (trip && trip.stopovers) || [];\n\n const stopoversWithAirportChanges = stopovers\n .filter(stopover => stopover.airportChange)\n .map(stopover => stopover.airportChange);\n\n const showMarketingCarriersList = Array.from(\n new Set(\n [...new Set(segments.reduce((a, c) => [...a, c.marketingAirlineInfo], []))].map(\n JSON.stringify,\n ),\n ),\n ).map(JSON.parse);\n\n const showSegmentSidePanel = () => {\n setQuery({ openedSidePanel: `segment-${trip.id}` }, 'replaceIn');\n };\n\n const showStopoverSidePanel = () => {\n setQuery({ openedSidePanel: `stopover-${trip.id}` }, 'replaceIn');\n };\n\n const showEticketSidePanel = () => {\n setQuery({ openedSidePanel: `eticket-${trip.id}` }, 'replaceIn');\n };\n\n const showSeatSidePanel = () => {\n setQuery({ openedSidePanel: `seat-${trip.id}` }, 'replaceIn');\n };\n\n const showWifiSidePanel = () => {\n setQuery({ openedSidePanel: `wifi-${trip.id}` }, 'replaceIn');\n };\n\n const showMealSidePanel = () => {\n setQuery({ openedSidePanel: `meal-${trip.id}` }, 'replaceIn');\n };\n\n const showBaggageSidePanel = () => {\n setQuery({ openedSidePanel: `baggage-${trip.id}` }, 'replaceIn');\n };\n\n const hideSidePanel = () => {\n setQuery({ openedSidePanel: '' }, 'replaceIn');\n };\n\n const findAirportInformation = code => trip.airports.find(info => info && info.code === code);\n const findAirline = code => {\n trip.airlines.find(airline => airline && airline.code === code);\n };\n\n const tripTransitDurationInMinutes = trip.stopovers\n .map(stopover => stopover.transitDurationsInMinutes)\n .reduce((a, b) => a + b, 0);\n\n const maxTransitDuration = Math.max(\n ...stopovers.map(stopover => stopover.transitDurationsInMinutes),\n );\n\n const segmentWithNumber = (segment, segmentIndex) =>\n I18n.t('components.flight.segment_details', {\n number: String(segmentIndex + 1),\n origin_code: segment.originCode,\n destination_code: segment.destinationCode,\n });\n\n const tripWithNumber = () =>\n I18n.t('components.flight.trip_number', {\n number: String(index + 1),\n });\n\n const eticketsPresent = () => segments.some(segment => segment.tickets.length > 0);\n\n const segmentEtickets = segment =>\n segment.tickets.map(ticket => {\n const ticketTravler = ticket.traveler || {};\n return (\n \n {airport.code}\n
\n \n
\n {airport.name}
\n \n {airport.placeName}, {airport.countryName}\n
\n \n
\n {terminal && (\n \n {I18n.t('components.flight.terminal', {\n number: terminal,\n })}\n
\n )}\n \n
\n {ticketTravler.name}
\n {ticket.number}
\n \n
\n );\n }\n return null;\n });\n\n const seatsPresent = () => segments.some(segment => segment.seats.length > 0);\n\n const segmentSeat = segment =>\n segment.seats.map(seat => (\n \n {segmentWithNumber(segment, segmentIndex)}\n
\n {segmentEtickets(segment)}\n \n
\n {seat.traveler.name}
\n \n {seat.row}\n {seat.seat}\n
\n \n
\n );\n }\n return null;\n });\n\n const servicesPresent = () =>\n flightServices.length > 0 ||\n trip.services.length > 0 ||\n segments.some(segment => segment.services.length > 0);\n\n const serviceCard = service => (\n \n {segmentWithNumber(segment, segmentIndex)}\n
\n {segmentSeat(segment)}\n {service.description}
\n );\n\n const services = () => {\n let itemLevelServices = null;\n\n if (flightServices.length > 0) {\n itemLevelServices = (\n \n {flightServices.map(service => serviceCard(service))}\n
\n );\n }\n let tripLevelServices = null;\n if (trip.services.length > 0) {\n tripLevelServices = (\n \n {trip.services.map(service => serviceCard(service))}\n
\n );\n }\n\n const segmentLevelServices = segments.map((segment, segmentIndex) => {\n if (segment.services.length > 0) {\n return (\n \n
\n );\n }\n return null;\n });\n\n return (\n \n {segmentWithNumber(segment, segmentIndex)}\n
\n {segment.services.map(service => serviceCard(service))}\n {tripWithNumber()}
\n {itemLevelServices}\n {tripLevelServices}\n {segmentLevelServices}\n \n
\n ));\n\n const airportChangeText =\n stopoversWithAirportChanges &&\n stopoversWithAirportChanges.map(airportItem => airportItem.arrivalAirportCode).join(', ');\n const transitGapCount = getFlightStopsCountLabel(stopovers);\n\n const airports = useMemo(() => {\n const stopoverAirports = {};\n\n stopovers.forEach(stopover => {\n stopoverAirports[stopover.airportCode] = findAirportInformation(stopover.airportCode);\n });\n\n return stopoverAirports;\n }, [stopovers]);\n\n return (\n \n {segmentWithNumber(segment, segmentIndex)}\n
\n\n {segment.wifiAvailable ? (\n \n
\n ) : (\n \n
\n )}\n \n
\n \n
\n \n \n {tripWithNumber()}\n
\n {showFlightSeatsStatus && (\n \n
\n\n \n
\n {!showMinimalInfo && (\n \n {showMarketingCarriersList &&\n showMarketingCarriersList.map(carrier => (\n
\n \n 
\n
\n ))}\n \n \n hideSidePanel()}\n />\n hideSidePanel()}\n />\n\n hideSidePanel()}\n />\n\n This is Eticket}\n isOpened={mealSidePanelVisible}\n onClick={() => hideSidePanel()}\n />\n\n hideSidePanel()}\n />\n
\n )}\n \n
\n \n
\n\n \n
\n\n \n \n \n )}\n
\n \n {I18n.t('components.flight.duration')}:{' '}\n {HumanReadableDuration(trip.durationInMinutes)}\n
\n {stopovers.length > 0 && (\n \n \n {transitGapCount}\n \n hideSidePanel()}\n />\n
\n )}\n \n
\n {segments.length > 1 && (\n \n {trip.stopovers.map(stopOver => stopOver.airportCode).join(', ')} |{' '}\n {HumanReadableDuration(tripTransitDurationInMinutes)}\n
\n \n {getTransitType(maxTransitDuration)}\n
\n {!!airportChangeText && (\n \n
\n \n
\n \n
\n
\n \n
\n
\n \n );\n};\n\nTrip.defaultProps = {\n showMinimalInfo: false,\n showFlightSeatsStatus: false,\n payLater: false,\n};\n\nTrip.propTypes = {\n trip: PropTypes.shape({\n id: PropTypes.string,\n cabinClass: PropTypes.string,\n bookingClasses: PropTypes.arrayOf(PropTypes.string),\n fareType: PropTypes.string,\n originCode: PropTypes.string,\n startsAtInUserTz: PropTypes.string,\n endsAtInUserTz: PropTypes.string,\n originTerminal: PropTypes.string,\n durationInMinutes: PropTypes.string,\n destinationCode: PropTypes.string,\n destinationTerminal: PropTypes.string,\n services: PropTypes.arrayOf(\n PropTypes.shape({\n description: PropTypes.string,\n }),\n ),\n airlines: PropTypes.arrayOf(\n PropTypes.shape({\n code: PropTypes.string,\n }),\n ),\n airports: PropTypes.arrayOf(\n PropTypes.shape({\n code: PropTypes.string,\n }),\n ),\n stopovers: PropTypes.arrayOf(\n PropTypes.shape({\n airport_code: PropTypes.string,\n }),\n ),\n segments: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.number,\n }),\n ),\n availableSeatCount: PropTypes.number,\n }).isRequired,\n flightServices: PropTypes.arrayOf(\n PropTypes.shape({\n description: PropTypes.string,\n }),\n ).isRequired,\n index: PropTypes.number.isRequired,\n showMinimalInfo: PropTypes.bool,\n showFlightSeatsStatus: PropTypes.bool,\n totalTravelerCount: PropTypes.number.isRequired,\n payLater: PropTypes.bool,\n laymanMode: PropTypes.bool.isRequired,\n};\n\nexport default hot(module)(withQueryParamsProvider(Trip));\n","import React, { useEffect, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { hot } from 'react-hot-loader';\nimport httpClient from 'agentHTTPClient';\nimport ContentLoaderPlaceholder from '@wtag/rcl-content-loader-placeholder';\nimport routes from 'agentRoutes';\nimport Trip from './Trip';\nimport './style.scss';\n\nconst FlightItem = ({\n journeyElementId,\n journeyElementType,\n showMinimalInfo,\n showFlightSeatsStatus,\n fetchedJourneyElement,\n refetchJourneyElement,\n totalTravelerCount,\n payLater,\n laymanMode,\n}) => {\n const [flightJourneyElement, setflightJourneyElement] = useState(fetchedJourneyElement);\n const [isLoading, setIsLoading] = useState(false);\n\n const fetchJourneyElement = async () => {\n setIsLoading(true);\n const { data } = await httpClient.get(\n routes.api.fetchJourneyElement({\n type: journeyElementType,\n id: journeyElementId,\n }),\n );\n\n setflightJourneyElement(data);\n setIsLoading(false);\n };\n\n useEffect(() => {\n setflightJourneyElement(fetchedJourneyElement);\n }, [fetchedJourneyElement]);\n\n useEffect(() => {\n if ((journeyElementId && !fetchedJourneyElement) || refetchJourneyElement) {\n fetchJourneyElement();\n }\n }, [journeyElementId, journeyElementType, refetchJourneyElement]);\n\n return (\n \n {segments.map(segment => (\n hideSidePanel()}\n />\n
\n {!showMinimalInfo && (\n \n segment.baggagePiecesIncluded)}\n />\n }\n size=\"tiny\"\n icon={
\n )}\n \n {isLoading ? (\n
\n );\n};\n\nFlightItem.defaultProps = {\n showMinimalInfo: false,\n fetchedJourneyElement: null,\n refetchJourneyElement: false,\n showFlightSeatsStatus: false,\n payLater: false,\n};\n\nFlightItem.propTypes = {\n flightItem: PropTypes.shape({\n totalAmount: PropTypes.string,\n cancelPenaltyCurrency: PropTypes.string,\n cancelPenaltyAmount: PropTypes.string,\n refundable: PropTypes.bool,\n status: PropTypes.string,\n identifier: PropTypes.string,\n title: PropTypes.string,\n channel: PropTypes.string,\n pnrPath: PropTypes.string,\n groupLabel: PropTypes.string,\n journeyElementId: PropTypes.number,\n journeyElementType: PropTypes.string,\n }).isRequired,\n travellers: PropTypes.shape({\n id: PropTypes.number,\n }).isRequired,\n journeyElementId: PropTypes.number.isRequired,\n journeyElementType: PropTypes.string.isRequired,\n showMinimalInfo: PropTypes.bool,\n fetchedJourneyElement: PropTypes.shape({}),\n refetchJourneyElement: PropTypes.bool,\n showFlightSeatsStatus: PropTypes.bool,\n totalTravelerCount: PropTypes.number.isRequired,\n payLater: PropTypes.bool,\n laymanMode: PropTypes.bool.isRequired,\n};\nexport default hot(module)(FlightItem);\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Icon from '@wtag/rcl-icon';\nimport './style.scss';\n\nconst GraphicElement = ({ stopoverAirportCodes, changedAirportCodes }) => {\n const changedAirportCodesSet = new Set(changedAirportCodes);\n\n const renderStopoverGraphic = stopoverAirportCode => {\n if (changedAirportCodesSet.has(stopoverAirportCode)) {\n return (\n \n
\n );\n }\n\n return ;\n };\n\n return (\n \n {stopoverAirportCodes.map(code => renderStopoverGraphic(code))}\n
\n );\n};\n\nGraphicElement.propTypes = {\n stopoverAirportCodes: PropTypes.shape([PropTypes.string]).isRequired,\n changedAirportCodes: PropTypes.shape([PropTypes.string]).isRequired,\n};\n\nexport default GraphicElement;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport GraphicElement from './GraphicElement';\n\nconst JourneyPath = ({ stopovers }) => {\n const stopoverAirportCodes = stopovers.map(stopover => stopover.airportCode);\n const changedAirportCodes = stopovers\n .filter(stopover => stopover.airportChange)\n .map(stopover => stopover.airportChange.departureAirportCode);\n\n return (\n \n
\n );\n};\n\nHotelRoomInfo.defaultProps = {\n payLater: false,\n preferred: false,\n};\n\nHotelRoomInfo.propTypes = {\n payLater: PropTypes.bool,\n room: PropTypes.shape({\n id: PropTypes.number.isRequired,\n name: PropTypes.string.isRequired,\n boardType: PropTypes.shape({\n key: PropTypes.string,\n label: PropTypes.string,\n }),\n }).isRequired,\n\n laymanMode: PropTypes.bool.isRequired,\n journeyElement: PropTypes.shape({\n pictures: PropTypes.arrayOf(PropTypes.string).isRequired,\n wifiAvailability: PropTypes.shape({\n key: PropTypes.string,\n label: PropTypes.string,\n }).isRequired,\n corporateDeal: PropTypes.bool.isRequired,\n }).isRequired,\n preferred: PropTypes.bool,\n checkIn: PropTypes.string.isRequired,\n checkOut: PropTypes.string.isRequired,\n};\n\nexport default HotelRoomInfo;\n","import React, { useEffect, useRef, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport Tooltip from '@wtag/rcl-tooltip';\nimport './styles.scss';\n\nconst HotelItemDetail = ({ title, subtitle }) => {\n const [displayTitleTooltip, setDisplayTitleTooltip] = useState(false);\n const [displaySubtitleTooltip, setDisplaySubtitleTooltip] = useState(false);\n\n const titleRef = useRef(null);\n const subTitleRef = useRef(null);\n\n useEffect(() => {\n setDisplayTitleTooltip(\n titleRef && titleRef.current && titleRef.current.scrollWidth > titleRef.current.offsetWidth,\n );\n }, [titleRef]);\n\n useEffect(() => {\n setDisplaySubtitleTooltip(subTitleRef.current.scrollWidth > subTitleRef.current.offsetWidth);\n }, [subTitleRef]);\n\n return (\n \n
\n {displayStatusSeparator && }\n \n
\n \n
\n {room.name}
\n \n
\n \n {I18n.t('admin.components.orders.items_tab.placeholder.check_in')}\n \n
\n \n {I18n.t('admin.components.orders.items_tab.placeholder.check_out')}\n \n
\n \n {isWifiAvailable && (\n
\n \n
\n )}\n {isBreakfastAvailable && (\n \n
\n )}\n \n
\n \n
\n {payLater && !laymanMode && (\n \n
\n )}\n \n {displayTitleTooltip ? (\n \n {title}\n \n ) : (\n \n {title}\n \n )}\n {displaySubtitleTooltip ? (\n \n {subtitle}\n \n ) : (\n \n {subtitle}\n \n )}\n
\n );\n};\n\nHotelItemDetail.propTypes = {\n title: PropTypes.string.isRequired,\n subtitle: PropTypes.string.isRequired,\n};\n\nexport default HotelItemDetail;\n","import React, { Fragment } from 'react';\nimport DateTime from 'sharedWebpack/DateTime';\nimport PropTypes from 'prop-types';\nimport HotelItemDetail from './HotelItemDetail';\nimport './styles.scss';\n\nconst HotelRoomInfoCompactView = ({ checkIn, checkOut, nightCount, quantity, name }) => {\n const roomInformation = `${quantity} ${name}`;\n\n return (\n \n
\n \n
\n\n \n
\n\n \n {product.description}\n
\n );\n }\n\n return (\n \n
\n );\n};\n\nStaticProductItem.propTypes = {\n productId: PropTypes.string.isRequired,\n};\n\nexport default StaticProductItem;\n","import React, { useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport DateTime from 'sharedWebpack/DateTime';\nimport Icon from '@wtag/rcl-icon';\nimport httpClient from 'agentHTTPClient';\nimport routes from 'agentRoutes';\n\nimport './styles.scss';\n\nconst Index = props => {\n const { journeyElementId, journeyElementType } = props;\n\n const [journeyElement, setJourneyElement] = useState({});\n\n const fetchJourneyElement = async () => {\n const { data } = await httpClient.get(\n routes.api.fetchJourneyElement({\n id: journeyElementId,\n type: journeyElementType,\n }),\n );\n\n setJourneyElement(data);\n };\n\n useEffect(() => {\n if (journeyElementId) {\n fetchJourneyElement();\n }\n }, [journeyElementId, journeyElementType]);\n\n const locationAndTime = (locationTimeObj, isPickUp) => (\n \n
\n \n 
\n
\n \n
\n \n {product.inStock} {I18n.t('admin.components.orders.items_tab.tag.quantity')}\n
\n \n {product.description}\n
\n \n
\n );\n\n return (\n \n
\n \n {isPickUp\n ? I18n.t('admin.components.orders.items_tab.placeholder.pick_up')\n : I18n.t('admin.components.orders.items_tab.placeholder.drop_off')}\n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n {locationTimeObj.location}\n
\n \n
\n );\n};\n\nIndex.propTypes = {\n journeyElementId: PropTypes.number.isRequired,\n journeyElementType: PropTypes.string.isRequired,\n};\n\nexport default Index;\n","import React, { useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { EmphasisTag, Link, SidePanel, I18nText } from '@wtag/react-comp-lib';\nimport DateTime from 'sharedWebpack/DateTime';\nimport Icon from '@wtag/rcl-icon';\nimport httpClient from 'agentHTTPClient';\nimport routes from 'agentRoutes';\nimport withQueryParamsProvider from 'sharedWebpack/withQueryParamsProvider';\nimport { StringParam, useQueryParams, withDefault } from 'use-query-params';\n\nimport CarFallbackImage from '../../../../assets/images/synced/fallback_images/product/product_xxl_car.png';\nimport Facility from '../../IBE/SearchResult/car/Facility';\nimport Insurance from '../../IBE/SearchResult/car/Insurance';\nimport FlexiblePaymentTag from '../../FlexiblePaymentTag';\n\nimport './styles.scss';\n\nconst Index = props => {\n const {\n journeyElementId,\n journeyElementType,\n fetchedJourneyElement,\n payLater,\n laymanMode,\n } = props;\n\n const [journeyElement, setJourneyElement] = useState(fetchedJourneyElement);\n\n const [query, setQuery] = useQueryParams({\n openedSidePanel: withDefault(StringParam, ''),\n });\n const responsiblityWaiverSidePanelVisible = query.openedSidePanel === 'responsiblityWaiver';\n\n const showresponsiblityWaiverSidePanel = () => {\n setQuery({ openedSidePanel: 'responsiblityWaiver' }, 'replaceIn');\n };\n\n const hideSidePanel = () => {\n setQuery({ openedSidePanel: '' }, 'replaceIn');\n };\n\n const fetchJourneyElement = async () => {\n const { data } = await httpClient.get(\n routes.api.fetchJourneyElement({\n id: journeyElementId,\n type: journeyElementType,\n }),\n );\n\n setJourneyElement(data);\n };\n\n useEffect(() => {\n if (journeyElementId && !fetchedJourneyElement) {\n fetchJourneyElement();\n }\n }, [journeyElementId, journeyElementType]);\n\n const locationAndTime = (isPickUp, date, location) => (\n \n {journeyElement.pickUp && locationAndTime(journeyElement.pickUp, true)}\n {journeyElement.dropOff && locationAndTime(journeyElement.dropOff, false)}\n
\n \n
\n );\n\n const insurances = () =>\n journeyElement.insurances.map(insurance => (\n \n
\n \n {isPickUp ? (\n
\n {isPickUp\n ? I18n.t('admin.components.orders.items_tab.placeholder.pick_up')\n : I18n.t('admin.components.orders.items_tab.placeholder.drop_off')}\n \n
\n {location}
\n \n
\n );\n};\n\nIndex.defaultProps = {\n fetchedJourneyElement: null,\n payLater: false,\n};\n\nIndex.propTypes = {\n journeyElementId: PropTypes.number.isRequired,\n journeyElementType: PropTypes.string.isRequired,\n fetchedJourneyElement: PropTypes.shape({}),\n payLater: PropTypes.bool,\n laymanMode: PropTypes.bool.isRequired,\n};\n\nexport default withQueryParamsProvider(Index);\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport StaticProductItem from './StaticProduct';\nimport CarItem from './CarItem';\nimport HotelItem from './HotelItem';\nimport FlightItem from './Flight';\nimport TransferItem from './TransferItem';\nimport CruiseItem from './CruiseItem';\nimport EventItem from './EventItem';\nimport { TYPE_FLIGHT } from '../helpers/itemTypes';\n\nconst ItemWrapper = ({\n journeyElementId,\n journeyElementType,\n fetchedJourneyElement,\n productId,\n showMinimalInfo,\n refetchJourneyElement,\n showFlightSeatsStatus,\n totalTravelerCount,\n payLater,\n laymanMode,\n item,\n}) => {\n const availableItem = {\n flight: FlightItem,\n hotel: HotelItem,\n car: CarItem,\n transfer: TransferItem,\n cruise: CruiseItem,\n event: EventItem,\n };\n const ItemBasedOnType = availableItem[journeyElementType];\n\n if (journeyElementType === TYPE_FLIGHT && showFlightSeatsStatus) {\n return (\n \n {journeyElement && journeyElement.category && journeyElement.acrissCode && (\n
\n \n
\n )}\n {journeyElement && journeyElement.seatCount > 0 && (\n \n
\n )}\n {journeyElement && journeyElement.doors && (\n \n
\n )}\n {journeyElement && journeyElement.airConditioning && (\n \n
\n \n {journeyElement && journeyElement.carImageUrl ? (\n 
\n ) : (\n 
\n )}\n
\n \n {journeyElement && journeyElement.make && (\n
\n \n {viewJourneyElementMakeInformation(journeyElement.make, journeyElement.name)}\n
\n )}\n \n {journeyElement &&\n journeyElement.pickUp &&\n locationAndTime(\n true,\n journeyElement.pickUp.localtimeInUserTz,\n journeyElement.pickUp.location,\n )}\n {journeyElement &&\n journeyElement.dropOff &&\n locationAndTime(\n false,\n journeyElement.dropOff.localtimeInUserTz,\n journeyElement.dropOff.location,\n )}\n
\n \n
\n {payLater && !laymanMode && (\n \n
\n \n {journeyElement && journeyElement.insurances && journeyElement.insurances.length > 0 ? (\n
\n \n {I18n.t('admin.components.orders.items_tab.placeholder.responsibility_waiver')}\n
\n ) : (\n \n {I18n.t('admin.components.orders.items_tab.placeholder.no_responsibility_waiver')}\n
\n )}\n \n {journeyElement && journeyElement.insurances && journeyElement.insurances.length > 0 && (\n
\n \n \n hideSidePanel()}\n />\n
\n )}\n \n
\n \n \n {journeyElement && journeyElement.vendorImageUrl && (\n 
\n )}\n
\n \n
\n )}\n \n
\n \n {visibleAirlineLogos.map(({ logo }) => (\n
\n \n {humanReadableDuration(durationInMinutes)}}\n />\n
\n \n
\n \n {humanReadableDuration(durationInMinutes)}}\n />\n
\n \n {visibleAirlineLogos.map(({ logo }) => (\n
\n \n
\n {header}
\n {popoverContent}\n \n }\n onOutsideClick={onPopoverClose}\n >\n {hiddenElementsCount > 0 && (\n\n {visibleAncillaries}\n\n {ancillariesLength > MAX_ANCILLARIES_TO_SHOW && (\n
\n );\n};\n\nAncillaryItemWrapper.propTypes = {\n ancillaries: PropTypes.arrayOf(\n PropTypes.shape({\n status: PropTypes.string,\n title: PropTypes.string,\n }),\n ).isRequired,\n isItemAvailable: PropTypes.bool.isRequired,\n type: PropTypes.string.isRequired,\n};\n\nexport default AncillaryItemWrapper;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { hot } from 'react-hot-loader';\nimport { SidePanel } from '@wtag/react-comp-lib';\nimport { TYPE_SERVICE, TYPE_SEAT } from 'sharedWebpack/helpers/itemTypes';\nimport { AccordionItem } from '@wtag/rcl-accordion';\nimport FlightDetails from 'sharedWebpack/IBE/SearchResult/flight/FlightDetails';\nimport SearchFlightInfo from 'sharedWebpack/IBE/SearchResult/flight/SearchFlightInfo';\nimport AirlineStandardLogos from 'sharedWebpack/IBE/SearchResult/flight/AirlineStandardLogos';\nimport SeatCountIconWithLabel from 'sharedWebpack/IBE/SearchResult/flight/SeatCountIconWithLabel';\nimport AncillaryServices from 'sharedWebpack/IBE/Cart/Items/flight/AncillaryServices';\nimport FlightSeatMap from 'sharedWebpack/IBE/Cart/Items/flight/SeatDetails/FlightSeatMapContainer';\nimport getServices from 'sharedWebpack/IBE/Cart/helpers/getServices';\nimport getSegmentServicesByTripWithQuantities from 'sharedWebpack/IBE/Cart/helpers/getSegmentServicesByTripWithQuantities';\nimport getTripServicesWithQuantities from 'sharedWebpack/IBE/Cart/helpers/getTripServicesWithQuantities';\nimport getItemServicesWithQuantities from 'sharedWebpack/IBE/Cart/helpers/getItemServicesWithQuantities';\nimport getSegmentSeatsBySeatId from 'sharedWebpack/IBE/Cart/helpers/getSegmentSeatsBySeatId';\nimport TripDetailsHeader from '../TripDetailsHeader';\nimport getServiceList from './helpers/getServiceList';\nimport getSeatList from './helpers/getSeatList';\nimport AncillaryItemWrapper from './AncillaryItemWrapper';\nimport './styles.scss';\n\nconst getUniqueFlightServicesItems = flightServices => {\n if (!Array.isArray(flightServices)) {\n return [];\n }\n\n const flightServicesMapItems = {};\n flightServices.forEach(({ id, description }) => {\n flightServicesMapItems[id] = description;\n });\n\n return Object.values(flightServicesMapItems);\n};\n\nconst Trip = ({\n item,\n flightServicesByResultId,\n tripList,\n trip,\n flightServices,\n showFlightSeatsStatus,\n totalTravelerCount,\n payLater,\n shouldLockScroll,\n setShouldLockScroll,\n showMinimalInfo,\n laymanMode,\n isPostBooking,\n}) => {\n const { subItems, bookingAttributes, id: itemId } = item || {};\n const [activeAccordionKey, setActiveAccordionKey] = useState(false);\n const handleAccordionClick = () => {\n setActiveAccordionKey(prev => !prev);\n };\n\n const {\n id,\n originCode,\n startsAtInUserTz,\n endsAtInUserTz,\n originTerminal,\n segments,\n stopovers,\n durationInMinutes,\n destinationCode,\n destinationTerminal,\n availableSeatCount,\n cabinClass: cabinClasses,\n bookingClasses,\n overnight,\n fareType: fareTypes,\n } = trip;\n const [sidePanelTitle, setSidePanelTitle] = useState(null);\n const [sidePanelBody, setSidePanelBody] = useState(null);\n const [openSidePanel, setOpenSidePanel] = useState(false);\n\n const hideSidePanel = () => {\n setOpenSidePanel(false);\n };\n\n const bookingClassesText = bookingClasses.join(', ');\n const tripAirlineLogos = segments.map(({ marketingAirlineInfo }) => marketingAirlineInfo);\n const tripAirlineCarriers = tripAirlineLogos.map(({ code }) => code);\n const marketingAirlineCodes = segments.map(({ marketingFlightNumber, marketingCarrierCode }) => ({\n code: `${marketingCarrierCode}${marketingFlightNumber}`,\n logo: marketingCarrierCode,\n }));\n\n const allSeatsIDsBySegment = segments.flatMap(({ seats }) =>\n seats.map(({ id: seatId }) => seatId),\n );\n const services = flightServicesByResultId && flightServicesByResultId[bookingAttributes.resultId];\n const seatMaps = services && services.seatMaps;\n const allSeats = getSegmentSeatsBySeatId(subItems, allSeatsIDsBySegment);\n const availableFlightServices = services && getServices(services);\n\n const tripSegmentServices = getSegmentServicesByTripWithQuantities(\n availableFlightServices,\n subItems,\n originCode,\n destinationCode,\n );\n\n const wholeTripServices = getTripServicesWithQuantities(\n availableFlightServices,\n subItems,\n originCode,\n destinationCode,\n );\n\n const flightItemServices = getItemServicesWithQuantities(availableFlightServices, subItems);\n const allItemServices = [...tripSegmentServices, ...wholeTripServices, ...flightItemServices];\n const isSeatAvailable =\n seatMaps &&\n seatMaps.length > 0 &&\n seatMaps.filter(seatmap => seatmap.sections.length > 0).length > 0;\n\n const baggagesPiecesListFromSegments = segments\n .filter(({ baggagePiecesIncluded: { count, kgPerPiece } }) => count && kgPerPiece)\n .map(({ baggagePiecesIncluded: { count, kgPerPiece } }) =>\n I18n.t(\n 'activerecord.attributes.journey_element/flight_segment.baggage_pieces_included_count_with_weight',\n { count, unit_weight: kgPerPiece },\n ),\n );\n\n const uniqueBaggagePiecesTextList = baggagesPiecesListFromSegments.filter(\n (text, index) => baggagesPiecesListFromSegments.indexOf(text) === index,\n );\n\n const flightServicesItems = getUniqueFlightServicesItems(flightServices);\n const eTicketsPresent = segments.some(segment => segment.tickets.length > 0);\n\n const isServiceAvailable = !!(\n uniqueBaggagePiecesTextList.length ||\n flightServicesItems?.length ||\n availableFlightServices?.length\n );\n\n const seatAmountsAndTitles = allSeats.map(({ grossAmount, itemTitle }) => ({\n grossAmount,\n itemTitle,\n }));\n\n return (\n \n
\n \n
\n {showFlightSeatsStatus && (\n \n
\n )}\n \n
\n )}\n \n );\n};\n\nTrip.defaultProps = { laymanMode: false, showMinimalInfo: false, item: {}, isPostBooking: false };\n\nTrip.propTypes = {\n item: PropTypes.shape({\n subItems: PropTypes.arrayOf(PropTypes.shape({})),\n bookingAttributes: PropTypes.shape({ resultId: PropTypes.string }),\n id: PropTypes.number,\n }),\n flightServicesByResultId: PropTypes.shape().isRequired,\n tripList: PropTypes.arrayOf(PropTypes.shape()).isRequired,\n trip: PropTypes.shape().isRequired,\n flightServices: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.number,\n description: PropTypes.string,\n }),\n ).isRequired,\n showFlightSeatsStatus: PropTypes.bool.isRequired,\n totalTravelerCount: PropTypes.number.isRequired,\n payLater: PropTypes.bool.isRequired,\n shouldLockScroll: PropTypes.bool.isRequired,\n setShouldLockScroll: PropTypes.func.isRequired,\n laymanMode: PropTypes.bool,\n showMinimalInfo: PropTypes.bool,\n isPostBooking: PropTypes.bool,\n};\n\nexport default hot(module)(Trip);\n","import { ONEWAY, ROUNDTRIP, MULTICITY } from 'sharedWebpack/IBE/lib/helpers/tripTypes';\n\nconst getDestinationByTripType = (tripType, destinations) => {\n if (!Array.isArray(destinations) || destinations.length === 0 || !tripType) {\n return '';\n }\n\n if ([ONEWAY, ROUNDTRIP].includes(tripType)) {\n return destinations[0];\n }\n\n if (tripType === MULTICITY) {\n return destinations[destinations.length - 1];\n }\n\n return '';\n};\n\nexport default getDestinationByTripType;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Amount from 'sharedWebpack/Amount';\nimport getTripType from '../../../../IBE/lib/helpers/getTripType';\nimport getDestinationByTripType from '../../../../IBE/lib/helpers/getDestinationByTripType';\nimport JourneySummaryIndicator from '../../../../JourneySummaryIndicator';\nimport './styles.scss';\n\nconst RouteInfoWithPrice = ({ trips, currency, grossAmount, supplierReservationIdentifier }) => {\n const tripType = getTripType(trips);\n const originCode = trips[0]?.originCode;\n const destinations = trips.map(({ destinationCode }) => destinationCode);\n const destinationCode = getDestinationByTripType(tripType, destinations);\n const allAirports = trips.flatMap(({ airports }) => airports);\n const originCountryInfo = allAirports.find(airport => airport.code === originCode);\n const destinationCountryInfo = allAirports.find(airport => airport.code === destinationCode);\n\n return (\n \n
\n \n \n
\n \n
\n );\n};\n\nRouteInfoWithPrice.defaultProps = {\n supplierReservationIdentifier: '',\n};\n\nRouteInfoWithPrice.propTypes = {\n trips: PropTypes.arrayOf(\n PropTypes.shape({ originCode: PropTypes.string, destinationCode: PropTypes.string }),\n ).isRequired,\n currency: PropTypes.string.isRequired,\n grossAmount: PropTypes.string.isRequired,\n supplierReservationIdentifier: PropTypes.string,\n};\n\nexport default RouteInfoWithPrice;\n","import React, { Fragment, useEffect, useState } from 'react';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\nimport { hot } from 'react-hot-loader';\nimport httpClient from 'agentHTTPClient';\nimport ContentLoaderPlaceholder from '@wtag/rcl-content-loader-placeholder';\nimport routes from 'agentRoutes';\nimport Trip from './Trip';\nimport RouteInfoWithPrice from './RouteInfoWithPrice';\nimport './style.scss';\n\nconst FlightItem = ({\n item,\n className,\n flightServicesByResultId,\n journeyElementId,\n journeyElementType,\n showMinimalInfo,\n showFlightSeatsStatus,\n fetchedJourneyElement,\n refetchJourneyElement,\n totalTravelerCount,\n payLater,\n laymanMode,\n shouldLockScroll,\n setShouldLockScroll,\n isRouteInfoVisible,\n currency,\n grossAmount,\n supplierReservationIdentifier,\n isPostBooking,\n}) => {\n const [flightJourneyElement, setflightJourneyElement] = useState(fetchedJourneyElement);\n const [isLoading, setIsLoading] = useState(false);\n\n const fetchJourneyElement = async () => {\n setIsLoading(true);\n const { data } = await httpClient.get(\n routes.api.fetchJourneyElement({\n type: journeyElementType,\n id: journeyElementId,\n }),\n );\n\n setflightJourneyElement(data);\n setIsLoading(false);\n };\n\n useEffect(() => {\n setflightJourneyElement(fetchedJourneyElement);\n }, [fetchedJourneyElement]);\n\n useEffect(() => {\n if ((journeyElementId && !fetchedJourneyElement) || refetchJourneyElement) {\n fetchJourneyElement();\n }\n }, [journeyElementId, journeyElementType, refetchJourneyElement]);\n\n return (\n \n
\n \n {isLoading ? (\n \n {isRouteInfoVisible && (\n \n )\n )}\n
\n );\n};\n\nFlightItem.defaultProps = {\n className: null,\n showMinimalInfo: false,\n fetchedJourneyElement: null,\n refetchJourneyElement: false,\n showFlightSeatsStatus: false,\n payLater: false,\n isRouteInfoVisible: false,\n supplierReservationIdentifier: '',\n isPostBooking: false,\n};\n\nFlightItem.propTypes = {\n item: PropTypes.shape().isRequired,\n className: PropTypes.string,\n flightServicesByResultId: PropTypes.shape().isRequired,\n flightItem: PropTypes.shape({\n totalAmount: PropTypes.string,\n cancelPenaltyCurrency: PropTypes.string,\n cancelPenaltyAmount: PropTypes.string,\n refundable: PropTypes.bool,\n status: PropTypes.string,\n identifier: PropTypes.string,\n title: PropTypes.string,\n channel: PropTypes.string,\n pnrPath: PropTypes.string,\n groupLabel: PropTypes.string,\n journeyElementId: PropTypes.number,\n journeyElementType: PropTypes.string,\n }).isRequired,\n travellers: PropTypes.shape({\n id: PropTypes.number,\n }).isRequired,\n journeyElementId: PropTypes.number.isRequired,\n journeyElementType: PropTypes.string.isRequired,\n showMinimalInfo: PropTypes.bool,\n fetchedJourneyElement: PropTypes.shape({}),\n refetchJourneyElement: PropTypes.bool,\n showFlightSeatsStatus: PropTypes.bool,\n totalTravelerCount: PropTypes.number.isRequired,\n payLater: PropTypes.bool,\n laymanMode: PropTypes.bool.isRequired,\n shouldLockScroll: PropTypes.bool.isRequired,\n setShouldLockScroll: PropTypes.func.isRequired,\n isRouteInfoVisible: PropTypes.bool,\n currency: PropTypes.string.isRequired,\n grossAmount: PropTypes.string.isRequired,\n supplierReservationIdentifier: PropTypes.string,\n isPostBooking: PropTypes.bool,\n};\nexport default hot(module)(FlightItem);\n","import React, { useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport Tooltip from '@wtag/rcl-tooltip';\nimport classNames from 'classnames';\n\nconst CarAttributeItem = ({ header, value, className }) => {\n const attributeRef = useRef(null);\n\n const attributeContent = (\n \n \n {header}\n \n {value}\n \n \n
\n );\n\n return attributeContent;\n};\n\nCarAttributeItem.defaultProps = {\n className: null,\n};\n\nCarAttributeItem.propTypes = {\n className: PropTypes.string,\n header: PropTypes.string.isRequired,\n value: PropTypes.node.isRequired,\n};\n\nexport default CarAttributeItem;\n","import React, { Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport Category from 'sharedWebpack/IBE/SearchResult/car/Category';\n\nconst CarType = ({ category, acrissCode }) => (\n \n
\n );\n};\n\nCarAccordionItemHeader.defaultProps = {\n vendorName: null,\n make: null,\n name: null,\n};\n\nCarAccordionItemHeader.propTypes = {\n carInformation: PropTypes.shape({\n category: PropTypes.string,\n acrissCode: PropTypes.string,\n }).isRequired,\n pickUpDate: PropTypes.string.isRequired,\n dropOffDate: PropTypes.string.isRequired,\n vendorImageUrl: PropTypes.string.isRequired,\n vendorName: PropTypes.string,\n make: PropTypes.string,\n name: PropTypes.string,\n isAccordionActive: PropTypes.bool.isRequired,\n};\n\nexport default CarAccordionItemHeader;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport FacilityListItem from 'sharedWebpack/IBE/SearchResult/car/FacilityListItem';\nimport FuelType from 'sharedWebpack/IBE/SearchResult/car/FuelType';\n\nconst CarFacilitiesItems = ({ list }) => {\n const { seatCount, doors, airConditioning, fuelType, airBag } = list;\n\n return (\n \n
\n \n \n })
\n \n
\n \n {vendorName}\n \n {getCarInformation(name, make)}\n \n
\n \n
\n \n
\n \n
\n \n {seatCount > 0 && (\n
\n );\n};\n\nCarFacilitiesItems.propTypes = {\n list: PropTypes.shape({\n seatCount: PropTypes.number,\n doors: PropTypes.string,\n airConditioning: PropTypes.bool,\n fuelType: PropTypes.string,\n airBag: PropTypes.bool,\n }).isRequired,\n};\n\nexport default CarFacilitiesItems;\n","import { useState } from 'react';\n\nconst useCarFacilitiesItemWithSidePanel = () => {\n const [isFacilitiesSidePanelOpen, setIsFacilitiesSidePanelOpen] = useState(false);\n const [facilitiesSidePanelTitle, setFacilitiesSidePanelTitle] = useState(null);\n const [facilitiesSidePanelBody, setFacilitiesSidePanelBody] = useState(null);\n\n const handleOpenFacilitiesSidePanel = (currentSidePanelTitle, currentSidePanelBody) => {\n setFacilitiesSidePanelTitle(currentSidePanelTitle);\n setFacilitiesSidePanelBody(currentSidePanelBody);\n setIsFacilitiesSidePanelOpen(true);\n };\n\n const handleCloseFacilitiesSidePanel = () => setIsFacilitiesSidePanelOpen(false);\n\n return {\n isFacilitiesSidePanelOpen,\n facilitiesSidePanelTitle,\n facilitiesSidePanelBody,\n handleOpenFacilitiesSidePanel,\n handleCloseFacilitiesSidePanel,\n };\n};\n\nexport default useCarFacilitiesItemWithSidePanel;\n","import React, { Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport SidePanel from '@wtag/rcl-sidepanel';\nimport FacilityItemLinks from '../../../../IBE/SearchResult/car/FacilityItemLinks';\nimport useCarFacilitiesItemWithSidePanel from './useCarFacilitiesItemWithSidePanel';\n\nconst CarFacilitiesItemWithSidePanel = ({ facilities }) => {\n const {\n isFacilitiesSidePanelOpen,\n facilitiesSidePanelTitle,\n facilitiesSidePanelBody,\n handleOpenFacilitiesSidePanel,\n handleCloseFacilitiesSidePanel,\n } = useCarFacilitiesItemWithSidePanel();\n\n return (\n \n
\n \n );\n};\n\nIndex.defaultProps = {\n journeyElementId: null,\n fetchedJourneyElement: null,\n displayFacilitiesItems: false,\n};\n\nIndex.propTypes = {\n journeyElementId: PropTypes.number,\n journeyElementType: PropTypes.string.isRequired,\n fetchedJourneyElement: PropTypes.shape(journeyElementShape),\n displayFacilitiesItems: PropTypes.bool,\n};\n\nexport default withQueryParamsProvider(Index);\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport StaticProductItem from '../StaticProduct';\nimport CarItem from './Car';\nimport HotelItem from '../HotelItem';\nimport FlightItem from './Flight';\nimport TransferItem from '../TransferItem';\nimport CruiseItem from '../CruiseItem';\nimport EventItem from '../EventItem';\nimport { TYPE_CAR, TYPE_FLIGHT } from '../../helpers/itemTypes';\n\nconst ItemWrapper = ({\n className,\n item,\n trips,\n journeyElementId,\n journeyElementType,\n fetchedJourneyElement,\n productId,\n showMinimalInfo,\n refetchJourneyElement,\n showFlightSeatsStatus,\n totalTravelerCount,\n flightServicesByResultId,\n payLater,\n laymanMode,\n shouldLockScroll,\n setShouldLockScroll,\n displayCarFacilitiesItems,\n isRouteInfoVisible,\n currency,\n grossAmount,\n supplierReservationIdentifier,\n isPostBooking,\n}) => {\n const availableItem = {\n flight: FlightItem,\n hotel: HotelItem,\n car: CarItem,\n transfer: TransferItem,\n cruise: CruiseItem,\n event: EventItem,\n };\n const ItemBasedOnType = availableItem[journeyElementType];\n\n if (journeyElementType === TYPE_FLIGHT && showFlightSeatsStatus) {\n return (\n \n
\n \n
\n \n
\n \n
\n \n {getCarInformation(name, make)}\n
\n\n \n \n \n
\n \n
\n {displayFacilitiesItems && hasCarFacilitiesItems && (\n \n
\n \n
\n \n
\n )}\n \n \n
\n);\n\nCountryWithFlag.propTypes = {\n code: PropTypes.string.isRequired,\n flag: PropTypes.string.isRequired,\n name: PropTypes.string.isRequired,\n};\n\nexport default CountryWithFlag;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Icon from '@wtag/rcl-icon';\nimport classNames from 'classnames';\nimport tripTypeIconMapper from 'sharedWebpack/helpers/tripTypeIconMapper';\nimport { EmphasisTag } from '@wtag/react-comp-lib';\nimport getTripType from 'sharedWebpack/IBE/lib/helpers/getTripType';\nimport { countryShape } from '../../admin/Orders/Show/helpers/shapes';\nimport CountryWithFlag from '../CountryWithFlag';\n\nconst JourneySummaryIndicator = ({\n originCountryInfo,\n destinationCountryInfo,\n trips,\n className,\n}) => {\n const {\n code: originCode,\n countryFlag: originFlag,\n countryName: originCountryName,\n } = originCountryInfo;\n const tripType = getTripType(trips);\n\n const {\n code: destinationCode,\n countryFlag: destinationFlag,\n countryName: destinationCountryName,\n } = destinationCountryInfo;\n\n return (\n {code}
\n \n
\n );\n};\n\nJourneySummaryIndicator.defaultProps = {\n className: '',\n};\n\nJourneySummaryIndicator.propTypes = {\n originCountryInfo: PropTypes.shape(countryShape).isRequired,\n destinationCountryInfo: PropTypes.shape(countryShape).isRequired,\n trips: PropTypes.arrayOf(\n PropTypes.shape({\n destinationCode: PropTypes.string,\n originCode: PropTypes.string,\n }),\n ).isRequired,\n className: PropTypes.string,\n};\n\nexport default JourneySummaryIndicator;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport PlacesAutocomplete, { geocodeByAddress, getLatLng } from 'react-places-autocomplete';\nimport { v4 as uuidv4 } from 'uuid';\nimport Input from '@wtag/rcl-input';\nimport Icon from '@wtag/rcl-icon';\nimport './styles.scss';\n\nconst googleCallbackName = `autoCompletePlaces_${uuidv4()}`;\n\nconst LocationSearchInput = ({\n onAddressChange,\n onLatitudeChange,\n onLongitudeChange,\n address,\n label,\n icon,\n isRequired,\n error,\n placeholder,\n onSelect,\n size,\n selectedLocation,\n ...other\n}) => {\n window.googleMapsCallBacks.push(googleCallbackName);\n const [inputValue, setInputValue] = useState('');\n\n const renderFunc = ({ getInputProps, getSuggestionItemProps, suggestions }) => {\n const inputProps = getInputProps();\n const { onChange } = inputProps;\n\n delete inputProps.onChange;\n\n const onInputChange = value => {\n onChange({ target: { value } });\n setInputValue(value);\n };\n\n return (\n \n
\n );\n };\n\n const handleChange = changedAddress => {\n onAddressChange(changedAddress);\n onLatitudeChange(undefined);\n onLongitudeChange(undefined);\n };\n\n const handleSelect = async selected => {\n const response = await geocodeByAddress(selected);\n const { lat, lng } = await getLatLng(response[0]);\n onLatitudeChange(lat);\n onLongitudeChange(lng);\n onAddressChange(selected);\n onSelect(selected, lat, lng);\n };\n\n return (\n \n
\n {suggestions.length > 0 && (\n \n {suggestions.map(suggestion => {\n const className = 'location-search-input__suggestion-key';\n\n return (\n
\n )}\n\n {inputValue.length > 3 && !selectedLocation && suggestions.length === 0 && (\n \n
\n );\n })}\n \n
\n \n
\n \n {suggestion.formattedSuggestion.mainText}\n
\n \n {suggestion.formattedSuggestion.secondaryText}\n
\n \n
\n )}\n \n {I18n.t('components.ibe.search_form.hotel.label.loading')}\n
\n \n \n {I18n.t('activerecord.attributes.order_item.margin')}\n
\n }\n >\n {marginBreakdown.map(margin => (\n \n {margin.name}
\n ))}\n \n {I18n.t('activerecord.attributes.order_item.total')} \n
\n \n \n );\n};\n\nItemMargin.defaultProps = {\n iconSize: 'small',\n};\n\nItemMargin.propTypes = {\n marginBreakdown: PropTypes.shape({\n map: PropTypes.shape({}),\n reduce: PropTypes.shape({}),\n }).isRequired,\n currency: PropTypes.string.isRequired,\n totalMargin: PropTypes.string.isRequired,\n iconSize: PropTypes.string,\n};\n\nexport default ItemMargin;\n","import React from 'react';\nimport RCLModal from '@wtag/rcl-modal';\nimport PropTypes from 'prop-types';\n\nconst Modal = props => {\n const {\n isModalVisible,\n className,\n children,\n title,\n footer,\n onOutsideClick,\n timeout,\n onTimeout,\n alignTitle,\n alignContent,\n alignFooter,\n } = props;\n\n return (\n \n {isLoading ? (\n \n {alertTextOnUpdate.message && (\n \n {I18n.t('admin.components.settings.personal_settings.reminder_time.alert')}\n \n \n {I18n.t(\n 'admin.components.settings.personal_settings.alert.chat_notification_disabled',\n )}\n \n \n )}\n
\n \n
\n )}\n \n \n {I18n.t('admin.components.settings.personal_settings.header')}\n \n
\n \n saveUserSettings()}\n label={I18n.t('admin.components.settings.personal_settings.saveButton.label')}\n disabled={isAlien}\n />\n
\n \n
\n \n {I18n.t('admin.components.settings.personal_settings.label.chat')}\n
\n \n
\n \n {I18n.t('admin.components.settings.personal_settings.explanation_text.chat')}\n
\n \n
\n \n
\n {(timeOption && timeOption.value) === timeOptions[4].value && (\n \n
\n )}\n \n
\n );\n\n const toolTipRender = () => (\n \n {urls ? (\n \n {title}\n \n ) : (\n title\n )}\n
\n \n
\n \n
\n );\n\nOrderFilterLabel.propTypes = {\n label: PropTypes.string.isRequired,\n};\n\nexport default OrderFilterLabel;\n","import React, { useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { CheckBoxFilter } from '@wtag/react-comp-lib';\n\nconst OrderFilterWrapper = props => {\n const { onChange, options, selectedValues, label, placeholderText, onSearch, searchable } = props;\n\n const [localOptions, setLocalOptions] = useState([]);\n const [selectedOptions, setSelectedOptions] = useState([]);\n const [searchParam, setSearchParam] = useState('');\n\n const handleSelectedOption = selectedOption => {\n const remainingOptions = [...selectedOptions];\n\n if (remainingOptions.includes(selectedOption)) {\n const indexOfSelectedOption = selectedOptions.indexOf(selectedOption);\n remainingOptions.splice(indexOfSelectedOption, 1);\n } else {\n remainingOptions.push(selectedOption);\n }\n\n setSelectedOptions(remainingOptions);\n onChange(remainingOptions.map(remainingOption => remainingOption.value));\n };\n\n const handleSearch = query => {\n onSearch(query);\n setSearchParam(query);\n };\n\n useEffect(() => {\n if (options.length > 0) {\n let list = [...options, ...selectedOptions];\n list = list.filter(\n (item, index, array) => array.findIndex(obj => obj.value === item.value) === index,\n );\n setLocalOptions(list);\n\n const uniqueSelectedValues = selectedValues.filter(\n (item, index, array) => array.indexOf(item) === index,\n );\n setSelectedOptions(\n uniqueSelectedValues.map(\n value => list.filter(option => option.value.toString() === value)[0],\n ),\n );\n } else {\n setLocalOptions(options);\n }\n }, [options, selectedValues]);\n\n return (\n \n
\n \n
\n \n
\n\n \n
\n\n \n {displaySortingPills.id && (\n
\n \n
\n )}\n {displaySortingPills.destination && (\n \n
\n )}\n {displaySortingPills.lastUpdated && (\n \n
\n )}\n\n {displaySortingPills.bookingDate && (\n \n
\n )}\n\n {displaySortingPills.startDate && (\n \n
\n )}\n \n
\n \n setDateRangeAndFilter(dates, 'travel_starts')}\n />\n handleListFilter('onTravelDate', date.format('YYYY-MM-DD'))}\n />\n setDateRangeAndFilter(dates, 'travel_ends')}\n />\n\n
\n {(!hideArchived || !hideCreateOrder) && (\n \n handleListFilter('travelerIds', ids)}\n onSearch={debouncedSearchTraveler}\n label={\n
\n \n
\n }\n placeholderText={I18n.t('public.components.orders.filters.placeholder_text')}\n />\n \n
\n {I18n.t('public.components.orders.filters.travellers')}\n \n handleListFilter('destinationList', destination)}\n onSearch={debouncedSearchDestination}\n label={\n
\n \n
\n }\n placeholderText={I18n.t('public.components.orders.filters.placeholder_text')}\n />\n \n
\n {I18n.t('public.components.orders.filters.destination')}\n \n handleListFilter('travelArrangerPersonIds', arrangers)}\n onSearch={debouncedSearchTravelArrangerPerson}\n label={\n
\n {!layman && (\n \n
\n }\n placeholderText={I18n.t('public.components.orders.filters.placeholder_text')}\n />\n \n
\n {I18n.t('public.components.orders.filters.travel_arrangers')}\n \n handleListFilter('travelArrangerAgentIds', agents)}\n onSearch={debouncedSearchTravelArrangerAgent}\n label={\n
\n )}\n \n handleListFilter('currentStates', state)}\n label={\n
\n\n {showFilterReset && (\n \n
\n }\n />\n \n
\n {I18n.t('public.components.orders.filters.state')}\n \n
\n )}\n \n {!hideArchived && (\n \n {I18n.t('admin.components.orders.list.actions.archived')}\n \n )}\n {!hideCreateOrder && (\n \n {displayColumns.selectAction\n ? I18n.t('admin.orders.actions.add_new_order')\n : I18n.t('admin.components.orders.list.actions.create')}\n \n )}\n
\n )}\n \n
\n \n {\n setIsLoading(true);\n setQuery({ page: newPage });\n }}\n />\n
\n \n );\n};\n\nList.defaultProps = {\n actionsRenderer: null,\n hideArchived: false,\n withTopPadding: false,\n hideCreateOrder: false,\n personId: null,\n organizationId: null,\n tableProps: undefined,\n urls: {},\n lessPage: false,\n setOrderId: null,\n displaySortingPills: {\n id: true,\n destination: true,\n lastUpdated: true,\n bookingDate: false,\n startDate: false,\n },\n additionalQueryParams: null,\n displayColumns: {\n id: true,\n title: true,\n destination: true,\n travellers: true,\n products: true,\n state: true,\n netAmount: true,\n startDate: false,\n endDate: false,\n actions: true,\n selectAction: false,\n },\n layman: false,\n};\n\nList.propTypes = {\n actionsRenderer: PropTypes.func,\n hideArchived: PropTypes.bool,\n hideCreateOrder: PropTypes.bool,\n personId: PropTypes.number,\n lessPage: PropTypes.bool,\n displaySortingPills: PropTypes.shape({\n id: PropTypes.bool,\n destination: PropTypes.bool,\n lastUpdated: PropTypes.bool,\n bookingDate: PropTypes.bool,\n startDate: PropTypes.bool,\n }),\n tableProps: PropTypes.shape({\n id: PropTypes.bool,\n title: PropTypes.bool,\n destination: PropTypes.bool,\n travellers: PropTypes.bool,\n products: PropTypes.bool,\n state: PropTypes.bool,\n netAmount: PropTypes.bool,\n startDate: PropTypes.bool,\n endDate: PropTypes.bool,\n }),\n additionalQueryParams: PropTypes.shape({\n scope: PropTypes.string,\n }),\n displayColumns: PropTypes.shape({\n id: PropTypes.bool,\n orderId: PropTypes.bool,\n travellers: PropTypes.bool,\n invoiceDate: PropTypes.bool,\n dueDate: PropTypes.bool,\n amount: PropTypes.bool,\n actions: PropTypes.bool,\n selectAction: PropTypes.bool,\n }),\n ordersPath: PropTypes.string.isRequired,\n withTopPadding: PropTypes.bool,\n organizationId: PropTypes.bool,\n urls: PropTypes.string,\n setOrderId: PropTypes.func,\n layman: PropTypes.bool,\n};\n\nexport default hot(module)(withQueryParamsProvider(List));\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { EmphasisTag } from '@wtag/react-comp-lib';\n\nconst StateEmphasisTag = ({ currentState, stateSize }) => {\n const stateEmphasisTagType = state => {\n switch (state) {\n case 'issued':\n return 'success';\n case 'open':\n return 'warning';\n case 'ordered':\n return 'important';\n case 'cancelled':\n return 'danger';\n case 'pending':\n return 'neutral';\n case 'refunded':\n return 'accent';\n case 'offered':\n return 'accent';\n case 'paid':\n return 'success';\n case 'reserved':\n return 'warning';\n case 'archived':\n return 'danger';\n case 'voided':\n return 'accent';\n default:\n return 'disabled';\n }\n };\n\n return (\n \n {availabilityIcon && availabilityIcon}\n
\n);\n\nShowGrossTotalPrice.defaultProps = {\n availabilityIcon: null,\n};\n\nShowGrossTotalPrice.propTypes = {\n availabilityIcon: PropTypes.node,\n currency: PropTypes.string.isRequired,\n grossTotal: PropTypes.string.isRequired,\n};\n\nexport default ShowGrossTotalPrice;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport Icon from '@wtag/rcl-icon';\n\nimport './styles.scss';\n\nconst ShowMore = props => {\n const { numberOfItemIsShowed, onShowMoreClick, numberOfItemsShouldBeIncreased } = props;\n\n return (\n \n {\n onShowMoreClick(numberOfItemIsShowed + numberOfItemsShouldBeIncreased);\n }}\n >\n {I18n.t('admin.shared.action.show_more')}\n
\n \n );\n};\nShowMore.defaultProps = {\n numberOfItemsShouldBeIncreased: 4\n};\n\nShowMore.propTypes = {\n numberOfItemIsShowed: PropTypes.number.isRequired,\n onShowMoreClick: PropTypes.func.isRequired,\n numberOfItemsShouldBeIncreased: PropTypes.number,\n};\nexport default ShowMore;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Icon from '@wtag/rcl-icon';\nimport Tooltip from '@wtag/rcl-tooltip';\n\nconst SocialMediaShow = ({ socialMediaLinks }) => {\n const socialMediaIcon = media => {\n const icons = {\n facebook: 'facebookRectangular',\n youtube: 'youtubeRectangular',\n twitter: 'twitterRectangular',\n linkedin: 'linkedinRectangular',\n pinterest: 'pinterestRectangular',\n instagram: 'instagramRectangular'\n };\n\n return icons[media] || 'web';\n };\n return (\n \n
\n \n
\n );\n }\n return form;\n };\n\n const setInitialValues = () => {\n setSelectedSocialMedia(socialMediaName);\n setMediaUrl(url);\n setEditing(false);\n };\n\n useEffect(() => {\n setInitialValues();\n }, []);\n\n return (\n \n media.value === selectedSocialMedia)\n .label,\n value: selectedSocialMedia,\n }\n : ''\n }\n onChange={selectedOption =>\n selectedOption && setSelectedSocialMedia(selectedOption.value)\n }\n errorMsg={error.media}\n required={true}\n />\n
\n \n setMediaUrl(value || '')}\n error={error.url}\n touched={!!error.url}\n required={true}\n />\n
\n \n
\n );\n};\n\nSocialMediaCard.defaultProps = {\n layman: false,\n};\n\nSocialMediaCard.propTypes = {\n socialMediaName: PropTypes.string.isRequired,\n url: PropTypes.string.isRequired,\n fetchSocialMedia: PropTypes.func.isRequired,\n ownerKey: PropTypes.string.isRequired,\n ownerId: PropTypes.number.isRequired,\n socialMediaID: PropTypes.number.isRequired,\n socialMediaOptions: PropTypes.arrayOf(\n PropTypes.shape({\n label: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),\n value: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),\n }),\n ).isRequired,\n layman: PropTypes.bool,\n};\n\nexport default SocialMediaCard;\n","import React, { useState, useEffect, Fragment } from 'react';\nimport SelectBox from '@wtag/rcl-select-box';\nimport Button from '@wtag/rcl-button';\nimport Input from '@wtag/rcl-input';\nimport Icon from '@wtag/rcl-icon';\nimport PropTypes from 'prop-types';\nimport httpClient from 'agentHTTPClient';\nimport routes from 'agentRoutes';\nimport ContentLoaderPlaceholder from '@wtag/rcl-content-loader-placeholder';\nimport SocialMediaCard from './SocialMediaCard';\nimport './style.scss';\n\nconst SocialMediaSection = ({ type, id, socialMediaOptions, layman }) => {\n const [mediaName, setMediaName] = useState(null);\n const [mediaUrl, setMediaUrl] = useState('');\n const [error, setError] = useState({});\n const [socialMedia, setSocialMedia] = useState([]);\n const [isLoading, setIsLoading] = useState(true);\n\n const ownerKey = `${type}_id`;\n\n const fetchSocialMediaUrl = layman\n ? routes.public.socialMedia.list()\n : routes.admin.socialMedia.list({ [ownerKey]: id });\n\n const createSocialMediumUrl = layman\n ? routes.public.socialMedia.create()\n : routes.admin.socialMedia.create({ [ownerKey]: id });\n\n const mediaOptions = socialMediaOptions\n ? socialMediaOptions.map(medium => ({\n value: medium,\n label: I18n.t(medium, {\n scope: 'social_media',\n }),\n }))\n : [];\n\n const fetchSocialMedia = async () => {\n const { data } = await httpClient.get(fetchSocialMediaUrl);\n\n setSocialMedia(data.socialMedia);\n setIsLoading(false);\n };\n\n const createSocialMedium = async () => {\n setError({});\n const socialMediumParams = {\n media: mediaName,\n url: mediaUrl,\n };\n\n const { data } = await httpClient.post(createSocialMediumUrl, {\n social_medium: socialMediumParams,\n });\n\n if (data.error === null) {\n setMediaName(null);\n setMediaUrl('');\n fetchSocialMedia();\n }\n };\n\n const onCreateSocialMedium = () =>\n createSocialMedium().catch(({ response }) => {\n if (response.status === 422) {\n setError(response.data.error);\n }\n });\n\n const onMediaNameChange = selectedOption => {\n setMediaName(selectedOption && selectedOption.value);\n setError({});\n setMediaUrl('');\n };\n\n useEffect(() => {\n if (type && id) {\n fetchSocialMedia();\n }\n }, [type, id]);\n\n return (\n \n {editing ? (\n
\n {renderEditForm()}\n \n {I18n.t('admin.components.travellers.edit.social.sub_header')}\n
\n ) : (\n \n
\n )}\n \n {editing ? (\n \n \n )}\n
\n \n
\n ) : (\n \n \n {socialMedia.length > 0 ? (\n socialMedia.map(medium => (\n \n )}\n
\n );\n};\n\nSocialMediaSection.defaultProps = {\n layman: false,\n};\n\nSocialMediaSection.propTypes = {\n type: PropTypes.string.isRequired,\n id: PropTypes.number.isRequired,\n socialMediaOptions: PropTypes.arrayOf(PropTypes.string).isRequired,\n layman: PropTypes.bool,\n};\n\nexport default SocialMediaSection;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { SortingPill } from '@wtag/react-comp-lib';\n\nconst WrappedSortingPill = ({\n name,\n thisSortColumn,\n currentSortColumn,\n currentSortDirection,\n onChange,\n size,\n}) => (\n \n
\n {isLoading ? (\n \n
\n \n {I18n.t('admin.components.travellers.edit.social.header')}\n
\n \n
\n \n
\n \n
\n\n \n
\n \n onMediaNameChange(selectedOption)}\n width=\"full\"\n errorMsg={error.media}\n isClearable={false}\n value={\n mediaName\n ? {\n label: mediaOptions.find(\n selectedMedia => selectedMedia.value === mediaName,\n ).label,\n value: mediaName,\n }\n : ''\n }\n />\n
\n \n setMediaUrl(value)}\n error={error.url}\n required={true}\n touched={!!error.url}\n />\n
\n \n
\n \n
\n ) : (\n \n
\n )}\n \n {I18n.t('admin.components.travellers.edit.social.no_url')}\n
\n \n \n
\n);\n\nTaskPriorityCard.propTypes = {\n task: PropTypes.shape({\n totalCount: PropTypes.number,\n high: PropTypes.number,\n medium: PropTypes.number,\n low: PropTypes.number,\n }).isRequired,\n objectToRenderToolTip: PropTypes.string.isRequired,\n};\n\nexport default TaskPriorityCard;\n","import React, { useEffect, useRef, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport ReactQuill from 'react-quill';\nimport Icon from '@wtag/rcl-icon';\nimport Tooltip from '@wtag/rcl-tooltip';\n\nimport './styles.scss';\n\nconst CustomToolbar = React.forwardRef(({ error, hideToolbars, disabled }, ref) => (\n \n
\n \n }\n type=\"inverse\"\n position=\"top\"\n showArrow={false}\n >\n {objectToRenderToolTip}\n \n \n {I18n.t('admin.components.orders.table.tasks.overview')}\n
\n \n
\n \n
\n \n
\n \n
\n \n {!hideToolbars.bold && }\n {!hideToolbars.italic && }\n {!hideToolbars.underline && (\n \n )}\n {!hideToolbars.strike && }\n {!hideToolbars.link && }\n {!hideToolbars.orderedList && (\n \n )}\n {!hideToolbars.bulletList && (\n \n )}\n \n {error && (\n \n \n
\n));\n\nCustomToolbar.defaultProps = {\n error: null,\n disabled: false,\n hideToolbars: {\n bold: false,\n italic: false,\n underline: false,\n strike: false,\n link: false,\n orderedList: false,\n bulletList: false,\n },\n};\n\nCustomToolbar.propTypes = {\n error: PropTypes.string,\n disabled: PropTypes.bool,\n hideToolbars: PropTypes.shape({\n bold: PropTypes.bool,\n italic: PropTypes.bool,\n underline: PropTypes.bool,\n strike: PropTypes.bool,\n link: PropTypes.bool,\n orderedList: PropTypes.bool,\n bulletList: PropTypes.bool,\n }),\n};\n\nconst TextEditor = ({\n value,\n onChange,\n placeholder,\n label,\n error,\n isRequired,\n hideToolbars,\n disabled,\n preview,\n}) => {\n const toolbar = useRef(null);\n const [container, setContainer] = useState(null);\n\n useEffect(() => {\n if (!toolbar.current) {\n return;\n }\n\n setContainer(`#${toolbar.current.id}`);\n }, [toolbar]);\n\n return (\n \n \n
\n \n );\n};\n\nTextEditor.defaultProps = {\n placeholder: null,\n isRequired: null,\n error: null,\n hideToolbars: {},\n disabled: false,\n preview: false,\n};\n\nTextEditor.propTypes = {\n value: PropTypes.string.isRequired,\n onChange: PropTypes.func.isRequired,\n label: PropTypes.string.isRequired,\n placeholder: PropTypes.string,\n isRequired: PropTypes.bool,\n disabled: PropTypes.bool,\n preview: PropTypes.bool,\n error: PropTypes.string,\n hideToolbars: PropTypes.shape(),\n};\n\nexport default TextEditor;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport TimeAgo from 'timeago-react';\n\nimport { register } from 'timeago.js';\nimport moment from 'moment';\nimport { DateTime } from '@wtag/react-comp-lib';\n\n// number: the timeago / timein number;\n// index: the index of array below;\n\nconst localeFunc = (_number, index) =>\n [\n [I18n.t('components.time_ago.index.just_now'), I18n.t('components.time_ago.index.right_now')],\n [\n I18n.t('components.time_ago.index.few_seconds_ago', { time: _number }),\n I18n.t('components.time_ago.index.in_few_seconds', { time: _number }),\n ],\n [\n I18n.t('components.time_ago.index.one_minute_ago'),\n I18n.t('components.time_ago.index.in_one_minute'),\n ],\n [\n I18n.t('components.time_ago.index.few_minutes_ago', { time: _number }),\n I18n.t('components.time_ago.index.in_few_minutes', { time: _number }),\n ],\n [\n I18n.t('components.time_ago.index.one_hour_ago'),\n I18n.t('components.time_ago.index.in_one_hour'),\n ],\n [\n I18n.t('components.time_ago.index.few_hours_ago', { time: _number }),\n I18n.t('components.time_ago.index.in_few_hours', { time: _number }),\n ],\n [\n I18n.t('components.time_ago.index.one_day_ago'),\n I18n.t('components.time_ago.index.in_one_day'),\n ],\n [\n I18n.t('components.time_ago.index.few_days_ago', { time: _number }),\n I18n.t('components.time_ago.index.in_few_days', { time: _number }),\n ],\n [\n I18n.t('components.time_ago.index.one_week_ago'),\n I18n.t('components.time_ago.index.in_one_week'),\n ],\n [\n I18n.t('components.time_ago.index.few_weeks_ago', { time: _number }),\n I18n.t('components.time_ago.index.in_few_weeks', { time: _number }),\n ],\n [\n I18n.t('components.time_ago.index.one_month_ago'),\n I18n.t('components.time_ago.index.in_one_month'),\n ],\n [\n I18n.t('components.time_ago.index.few_months_ago', { time: _number }),\n I18n.t('components.time_ago.index.in_few_months', { time: _number }),\n ],\n [\n I18n.t('components.time_ago.index.one_year_ago'),\n I18n.t('components.time_ago.index.in_one_year'),\n ],\n [\n I18n.t('components.time_ago.index.few_years_ago', { time: _number }),\n I18n.t('components.time_ago.index.in_few_years', { time: _number }),\n ],\n ][index];\n\nregister(I18n.locale, localeFunc);\n\nconst WrappedTimeAgo = props => {\n const { datetime, withRclDateComponent, withShortFormat } = props;\n\n const mapLanguageCode = () => {\n const currentLocale = I18n.locale;\n return currentLocale.slice(0, 2);\n };\n\n const useFormattedDateTime = () => {\n const passedDate = moment(datetime);\n const currentDate = moment();\n const differenceBetweenDates = currentDate.diff(passedDate, 'days');\n let formattedDateTime;\n\n if (differenceBetweenDates <= 1) {\n const isSimilarDay = moment(datetime).format('L') === moment().format('L');\n\n if (isSimilarDay && withShortFormat) {\n formattedDateTime = {moment(datetime).format('LT')};\n } else if (!isSimilarDay && withShortFormat) {\n formattedDateTime = {moment(datetime).format('ddd, LT')};\n } else {\n formattedDateTime = \n {label}\n
\n \n
\n);\n\nToggleWrapper.defaultProps = {\n size: 'tiny',\n isChecked: false,\n};\n\nToggleWrapper.propTypes = {\n size: PropTypes.string,\n isChecked: PropTypes.bool,\n onChange: PropTypes.func.isRequired,\n};\n\nexport default ToggleWrapper;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport httpClient from 'agentHTTPClient';\nimport Form from '../Form';\n\nconst Create = ({\n availableCurrencies,\n orderId,\n travellerId,\n scope,\n urls,\n forOrderType,\n forTravellerType,\n}) => {\n const [date, setDate] = useState('');\n\n const createTravelExpense = async formData => {\n const { data } = await httpClient.post(urls.createTravelExpensePath, formData);\n\n if (data.error === null) {\n window.location.replace(urls.index);\n }\n };\n\n return (\n \n
\n );\n};\n\nCreate.defaultProps = {\n orderId: null,\n scope: 'public',\n forOrderType: false,\n forTravellerType: false,\n};\n\nCreate.propTypes = {\n availableCurrencies: PropTypes.arrayOf(PropTypes.shape([])).isRequired,\n travellerId: PropTypes.number.isRequired,\n orderId: PropTypes.number,\n scope: PropTypes.oneOf(['admin', 'public']),\n forOrderType: PropTypes.bool,\n forTravellerType: PropTypes.bool,\n urls: PropTypes.shape({\n index: PropTypes.string.isRequired,\n createTravelExpensePath: PropTypes.string.isRequired,\n }).isRequired,\n};\n\nexport default Create;\n","import React, { useEffect, useState } from 'react';\nimport httpClient from 'agentHTTPClient';\nimport PropTypes from 'prop-types';\nimport Form from '../Form';\n\nconst Edit = ({\n availableCurrencies,\n orderId,\n travellerId,\n scope,\n urls,\n forOrderType,\n forTravellerType,\n}) => {\n const [travelExpense, setTravelExpense] = useState({});\n const [date, setDate] = useState('');\n\n const fetchTravelExpense = async () => {\n const { data } = await httpClient.get(urls.travelExpensePath);\n setTravelExpense(data.travelExpense);\n setDate(data.travelExpense.date);\n };\n\n const updateTravelExpense = async params => {\n const { data } = await httpClient.put(urls.travelExpensePath, params);\n\n if (data.error === null) {\n window.location.replace(urls.index);\n }\n };\n\n useEffect(() => {\n fetchTravelExpense();\n }, []);\n\n return (\n \n createTravelExpense(value)}\n date={date}\n setDate={setDate}\n orderId={orderId}\n travellerId={travellerId}\n scope={scope}\n forOrderType={forOrderType}\n forTravellerType={forTravellerType}\n />\n
\n \n
\n );\n};\n\nEdit.defaultProps = {\n orderId: null,\n scope: 'public',\n forOrderType: false,\n forTravellerType: false,\n};\n\nEdit.propTypes = {\n availableCurrencies: PropTypes.arrayOf(PropTypes.shape([])).isRequired,\n travellerId: PropTypes.number.isRequired,\n orderId: PropTypes.number,\n scope: PropTypes.oneOf(['admin', 'public']),\n forOrderType: PropTypes.bool,\n forTravellerType: PropTypes.bool,\n urls: PropTypes.shape({\n index: PropTypes.string.isRequired,\n travelExpensePath: PropTypes.string.isRequired,\n }).isRequired,\n};\n\nexport default Edit;\n","import React, { useState, Fragment, useEffect, useMemo } from 'react';\nimport PropTypes from 'prop-types';\nimport moment from 'moment';\nimport ChooseFile from 'sharedWebpack/ChooseFile';\nimport Button from '@wtag/rcl-button';\nimport Card from '@wtag/rcl-card';\nimport Input from '@wtag/rcl-input';\nimport SelectBox from '@wtag/rcl-select-box';\nimport { CheckBox, Link, Spinner } from '@wtag/react-comp-lib';\nimport { v4 as uuidv4 } from 'uuid';\nimport httpClient from 'agentHTTPClient';\nimport routes from 'agentRoutes';\nimport DatePickerWithFocusedStateWrapper from 'sharedWebpack/DatePickerWithFocusedStateWrapper';\nimport DropDown from '../../../admin/DropDown';\nimport '../styles.scss';\n\nconst Form = ({\n availableCurrencies,\n urls,\n isEditing,\n submitText,\n submitAction,\n travelExpense,\n setDate,\n date,\n orderId,\n travellerId,\n scope,\n forOrderType,\n forTravellerType,\n}) => {\n const [name, setName] = useState('');\n const [currency, setCurrency] = useState('');\n const [amount, setAmount] = useState('');\n const [selectedOrder, setSelectedOrder] = useState(null);\n const [selectedTraveller, setSelectedTraveller] = useState(null);\n const [vatIncluded, setVatIncluded] = useState(false);\n const [showVatField, setShowVatField] = useState(false);\n const [vatPercentage, setVatPecentage] = useState('');\n const [fileName, setFileName] = useState('');\n const [file, setFile] = useState('');\n const [error, setError] = useState({});\n const [isLoading, setIsLoading] = useState(true);\n\n const travelExpenseId = travelExpense && travelExpense.id;\n const layman = scope === 'public';\n const isOrderFieldDisabled = forOrderType;\n const isTravellerFieldDisabled = forTravellerType;\n\n const currencyMenu = availableCurrencies.map(currencyItem => ({\n label: currencyItem[0],\n value: currencyItem[1],\n }));\n\n const mapTraveller = travellerObj => ({\n label: `${travellerObj.id}: ${travellerObj.name}`,\n value: travellerObj.id,\n });\n\n const mapOrder = orderObj => ({\n label: `${orderObj.id}: ${orderObj.title}`,\n value: orderObj.id,\n });\n\n const fetchTraveller = async () => {\n const { data } = await httpClient.get(routes[scope].people.show({ personId: travellerId }));\n\n if (data && data.person) {\n const fetchedTraveller = mapTraveller(data.person);\n setSelectedTraveller(fetchedTraveller);\n }\n };\n\n const fetchOrder = async () => {\n const { data } = await httpClient.get(routes[scope].order({ id: orderId }));\n\n if (data && data.order) {\n const fetchedOrder = mapOrder(data.order);\n setSelectedOrder(fetchedOrder);\n }\n };\n\n const findSelectBoxContent = (options, value) => {\n const selectedOption = options.find(option => value === option.value);\n\n return selectedOption;\n };\n\n const selectFile = selectedFile => {\n setFileName(selectedFile.name);\n setFile(selectedFile);\n };\n\n const onSubmit = () => {\n const formData = new FormData();\n if (file) {\n formData.append('travel_expense[file]', file);\n }\n formData.append('travel_expense[name]', name);\n formData.append('travel_expense[date]', date);\n formData.append('travel_expense[amount]', amount);\n formData.append('travel_expense[currency]', currency);\n formData.append('travel_expense[vat_percentage]', vatPercentage);\n formData.append('travel_expense[vat_included]', vatIncluded);\n formData.append(\n 'travel_expense[person_id]',\n (selectedTraveller && selectedTraveller.value) || '',\n );\n formData.append('travel_expense[order_id]', (selectedOrder && selectedOrder.value) || '');\n\n submitAction(formData).catch(({ response }) => {\n if (response.status === 422) {\n setError(response.data.error);\n }\n });\n };\n\n const setInitialValues = async () => {\n setName(travelExpense.name);\n setDate(travelExpense.date);\n setAmount(travelExpense.amount);\n setCurrency(travelExpense.currency);\n setVatIncluded(travelExpense.vatIncluded);\n setShowVatField(travelExpense.vatIncluded);\n setVatPecentage(travelExpense.vatPercentage);\n setFileName(travelExpense.fileName);\n };\n\n useEffect(() => {\n const fetchFormData = async () => {\n if (travelExpenseId) {\n await setInitialValues();\n }\n\n if (orderId) {\n await fetchOrder();\n }\n\n if (travellerId) {\n await fetchTraveller();\n }\n setIsLoading(false);\n };\n\n fetchFormData();\n }, [travelExpenseId, orderId, travellerId]);\n\n const memoizedUuid = useMemo(() => uuidv4(), []);\n\n return (\n \n {date && (\n updateTravelExpense(value)}\n travelExpense={travelExpense}\n date={date}\n setDate={setDate}\n orderId={orderId}\n travellerId={travellerId}\n scope={scope}\n forOrderType={forOrderType}\n forTravellerType={forTravellerType}\n />\n )}\n
\n \n \n \n
\n ) : (\n \n {isEditing\n ? I18n.t('admin.components.travel_expenses.actions.edit')\n : I18n.t('admin.components.travel_expenses.title')}\n
\n \n
\n \n value && setDate(moment(value).format('YYYY-MM-DD'))}\n error={error.date}\n hideNavButtons={false}\n />\n
\n \n setName(value)}\n error={error.name}\n required={true}\n touched={!!error.name}\n />\n
\n \n selectFile(value)}\n required={true}\n />\n
\n \n
\n {!layman && (\n \n setCurrency(selectedOption && selectedOption.value)}\n options={currencyMenu}\n required={true}\n value={findSelectBoxContent(currencyMenu, currency)}\n errorMsg={error.currency}\n />\n
\n \n setAmount(value)}\n error={error.amount}\n required={true}\n touched={!!error.amount}\n />\n
\n \n
\n )}\n \n
\n \n
\n \n setShowVatField(!showVatField)}\n />\n
\n {showVatField && (\n \n
\n )}\n \n setVatPecentage(value)}\n error={error.vatPercentage}\n touched={!!error.vatPercentage}\n />\n
\n \n setVatIncluded(!vatIncluded)}\n />\n
\n \n
\n \n
\n )}\n {I18n.t('admin.components.travel_expenses.export.header')}
\n \n
\n \n );\n\n return (\n \n
\n \n \n {I18n.t('admin.components.travel_expenses.export.explanation')}\n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n
\n \n
\n {isResetVisible && (\n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n
\n }\n startDate={startDate && moment(startDate)}\n endDate={endDate && moment(endDate)}\n enablePastDates={true}\n disableFutureDates={false}\n enableDateRangeSelection={true}\n onChange={dates => setDateRange(dates)}\n />\n \n
\n {I18n.t('admin.components.travel_expenses.date_range')}\n \n \n
\n }\n options={ordersTypeOptions}\n onChange={filterByOrderRelation}\n value={selectedOrdersRelation}\n selected={selectedOrdersRelation}\n isSearchable={false}\n popoverMenuPosition=\"bottom-left\"\n />\n \n
\n {I18n.t('admin.components.tasks.order')}\n \n
\n )}\n\n \n
\n \n \n {I18n.t('admin.shared.action.new')}\n \n
\n \n {urls.export && (\n \n setIsModalVisible(true)}\n onKeyDown={() => setIsModalVisible(true)}\n role=\"presentation\"\n >\n {I18n.t('admin.components.travel_expenses.export_report')}\n \n \n )}\n
\n \n
\n \n \n {I18n.t('admin.components.travel_expenses.total_expenses')}\n \n {totalExpensesAmount}\n
\n \n
\n \n setQuery({ page: newPage })}\n />\n
\n \n );\n};\n\nTravelExpensesTab.propTypes = {\n travelExpensesPath: PropTypes.string.isRequired,\n};\n\nexport default withQueryParamsProvider(TravelExpensesTab);\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport HumanReadableDuration from 'sharedWebpack/HumanReadableDuration';\nimport DateTime from 'sharedWebpack/DateTime';\nimport AirportChangeSegment from 'sharedWebpack/AirportChangeSegment';\nimport Card from '@wtag/rcl-card';\nimport { EmphasisTag } from '@wtag/react-comp-lib';\nimport Icon from '@wtag/rcl-icon';\nimport {\n MAX_STOPOVER_TIME,\n LAYOVER_TYPE_STOP,\n LAYOVER_TYPE_STOPOVER,\n} from '../../helpers/stopoverConstants';\nimport '../styles.scss';\n\nconst Flight = ({ data }) => {\n const {\n changedAirport,\n travelers,\n originDetails,\n destinationDetails,\n cabinClass,\n bookingClass,\n fareType,\n departureLocaltime,\n destinationTerminal,\n airlineLogoUrl,\n originTerminal,\n wifiAvailable,\n layoverAirport,\n airlineCarrierCode,\n flightDurationInMinutes,\n arrivalLocaltime,\n } = data;\n const hasChangedAirport = changedAirport && Object.keys(changedAirport).length > 0;\n\n const getFlightLayoverTypeLabel = layoverType => {\n const { code, name, cityName, countryName } = destinationDetails;\n return I18n.t('admin.components.orders.overview.travel_plan.flight.stop', {\n label: layoverType,\n code,\n airport_name: name,\n city: cityName,\n country: countryName,\n });\n };\n\n const getStopOrStopover = () => {\n if (layoverAirport.durationInMinutes >= MAX_STOPOVER_TIME) {\n return getFlightLayoverTypeLabel(LAYOVER_TYPE_STOPOVER);\n }\n\n return getFlightLayoverTypeLabel(LAYOVER_TYPE_STOP);\n };\n\n return (\n \n
\n );\n};\n\nFlight.propTypes = {\n data: PropTypes.shape({\n changedAirport: PropTypes.shape({\n name: PropTypes.string,\n code: PropTypes.string,\n cityName: PropTypes.string,\n countryName: PropTypes.string,\n countryFlag: PropTypes.string,\n }).isRequired,\n tripOriginDetails: PropTypes.shape({\n name: PropTypes.string,\n code: PropTypes.string,\n cityName: PropTypes.string,\n countryName: PropTypes.string,\n countryFlag: PropTypes.string,\n }),\n tripDestinationDetails: PropTypes.shape({\n name: PropTypes.string,\n code: PropTypes.string,\n cityName: PropTypes.string,\n countryName: PropTypes.string,\n countryFlag: PropTypes.string,\n }),\n departureLocaltime: PropTypes.string,\n arrivalLocaltime: PropTypes.string,\n originTerminal: PropTypes.string,\n destinationTerminal: PropTypes.string,\n cabinClass: PropTypes.string,\n wifiAvailable: PropTypes.string,\n flightDurationInMinutes: PropTypes.string,\n bookingClass: PropTypes.string,\n fareType: PropTypes.string,\n originDetails: PropTypes.shape({\n name: PropTypes.string,\n code: PropTypes.string,\n cityName: PropTypes.string,\n countryName: PropTypes.string,\n countryFlag: PropTypes.string,\n }),\n destinationDetails: PropTypes.shape({\n name: PropTypes.string,\n code: PropTypes.string,\n cityName: PropTypes.string,\n countryName: PropTypes.string,\n countryFlag: PropTypes.string,\n }),\n airlineCarrierCode: PropTypes.string,\n airlineLogoUrl: PropTypes.string,\n layoverAirport: PropTypes.shape({\n name: PropTypes.string,\n code: PropTypes.string,\n cityName: PropTypes.string,\n countryName: PropTypes.string,\n durationInMinutes: PropTypes.string,\n }),\n baggagePiecesIncluded: PropTypes.shape({\n count: PropTypes.string,\n kgPerPiece: PropTypes.string,\n }),\n travelers: PropTypes.arrayOf(\n PropTypes.shape({\n firstName: PropTypes.string,\n lastName: PropTypes.string,\n avatarUrl: PropTypes.string,\n seatNumber: PropTypes.string,\n ticketNumber: PropTypes.string,\n services: PropTypes.string,\n }),\n ),\n }).isRequired,\n};\n\nexport default Flight;\n","import React from 'react';\nimport { hot } from 'react-hot-loader';\nimport PropTypes from 'prop-types';\nimport { v4 as uuidv4 } from 'uuid';\nimport classNames from 'classnames';\nimport Flight from '../Flight';\nimport FlightTimeLine from '../FlightTimeline';\n\nconst FlightContent = ({ index, plan, flightPlanMap }) => {\n const { tripId, type, wholeDurationInMinutes, travelers } = plan;\n const flightPlan = flightPlanMap[tripId] || {};\n const hasGroupItem = Object.keys(flightPlan).length > 0;\n const { groupStartIndex, group } = flightPlan;\n\n if (hasGroupItem && index !== groupStartIndex) {\n return null;\n }\n\n const getFlightTimelineContent = () => {\n if (!hasGroupItem) {\n return \n \n \n
\n {layoverAirport && (\n \n
\n \n \n {`${originDetails && originDetails.code} - ${destinationDetails &&\n destinationDetails.code}`}\n
\n \n {data && cabinClass && (\n
\n \n
\n \n
\n \n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n {originTerminal && (\n \n {I18n.t(\n 'admin.components.orders.overview.travel_plan.flight.header.terminal',\n {\n terminal: originTerminal,\n },\n )}\n
\n )}\n \n {`${originDetails && originDetails.code} - ${originDetails &&\n originDetails.name}, ${originDetails &&\n originDetails.cityName}, ${originDetails && originDetails.countryName}`}\n
\n \n
\n \n \n
\n \n
\n \n
\n {destinationTerminal && (\n \n {I18n.t(\n 'admin.components.orders.overview.travel_plan.flight.header.terminal',\n {\n terminal: destinationTerminal,\n },\n )}\n
\n )}\n \n {`${destinationDetails && destinationDetails.code} - ${destinationDetails &&\n destinationDetails.name}, ${destinationDetails &&\n destinationDetails.cityName}, ${destinationDetails &&\n destinationDetails.countryName}`}\n
\n \n {/* Airline Image/Flight Image */}\n
\n \n
\n \n \n {I18n.t('components.flight.duration')}\n \n \n {HumanReadableDuration(flightDurationInMinutes)}\n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n {hasChangedAirport && (\n \n {HumanReadableDuration(layoverAirport.durationInMinutes)}\n
\n \n {getStopOrStopover()}\n
\n \n \n {flightTimelineContent}\n
\n \n );\n};\n\nconst planShape = PropTypes.shape({\n tripId: PropTypes.number.isRequired,\n type: PropTypes.string.isRequired,\n wholeDurationInMinutes: PropTypes.number.isRequired,\n arrivalLocaltime: PropTypes.string,\n travelers: PropTypes.arrayOf(\n PropTypes.shape({\n firstName: PropTypes.string.isRequired,\n lastName: PropTypes.string.isRequired,\n avatarUrl: PropTypes.string.isRequired,\n }),\n ),\n});\n\nFlightContent.propTypes = {\n index: PropTypes.number.isRequired,\n plan: planShape.isRequired,\n flightPlanMap: PropTypes.shape({\n [PropTypes.number]: PropTypes.shape({\n startIndex: PropTypes.number.isRequired,\n group: PropTypes.arrayOf(planShape).isRequired,\n }),\n }).isRequired,\n};\n\nexport default hot(module)(FlightContent);\n","import React, { useState } from 'react';\nimport { hot } from 'react-hot-loader';\nimport PropTypes from 'prop-types';\nimport { v4 as uuidv4 } from 'uuid';\nimport Avatar from '@wtag/rcl-avatar';\nimport StackedItems from '@wtag/rcl-stacked-items';\nimport HumanReadableDuration from 'sharedWebpack/HumanReadableDuration';\nimport ProductIcon from 'sharedWebpack/ProductIcon';\n\nconst FlightTimeLine = ({ type, wholeDurationInMinutes, travelers }) => {\n const [isTravellerPopoverVisible, setIsTravellerPopoverVisible] = useState(false);\n\n const togglePopoverVisibility = () =>\n setIsTravellerPopoverVisible(prevTravellerPopoverState => !prevTravellerPopoverState);\n\n const onOutsideClick = () => setIsTravellerPopoverVisible(false);\n\n return (\n \n
\n );\n};\n\nFlightTimeLine.propTypes = {\n type: PropTypes.string.isRequired,\n wholeDurationInMinutes: PropTypes.number.isRequired,\n travelers: PropTypes.arrayOf(\n PropTypes.shape({\n firstName: PropTypes.string,\n lastName: PropTypes.string,\n avatarUrl: PropTypes.string,\n seatNumber: PropTypes.string,\n ticketNumber: PropTypes.string,\n services: PropTypes.arrayOf(PropTypes.string),\n }),\n ).isRequired,\n};\n\nexport default hot(module)(FlightTimeLine);\n","/* eslint-disable react/prop-types */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport Map from '@wtag/rcl-map';\n\nconst PNRMap = ({ products }) => {\n // geographical centre of all land surfaces on Earth: İskilip, Turkey\n const mapCenter = { latitude: 40.73528, longitude: 34.47389 };\n\n const hotelsCoordinates =\n products.hotels &&\n products.hotels.map(hotel => ({\n checkIn: hotel.checkIn,\n checkOut: hotel.checkOut,\n title: hotel.title,\n latitude: hotel.latitude,\n longitude: hotel.longitude,\n }));\n\n const carsCoordinates =\n products.cars &&\n products.cars.map(car => ({\n pickUp: {\n date: car.pick_up.localtime,\n latitude: car.pick_up.latitude,\n longitude: car.pick_up.longitude,\n title: car.pick_up.location,\n },\n dropOff: {\n date: car.drop_off.localtime,\n latitude: car.drop_off.latitude,\n longitude: car.drop_off.longitude,\n title: car.drop_off.location,\n },\n }));\n\n const flightsCoordinates =\n products.flights &&\n products.flights.map(flight => ({\n start: {\n date: flight.startDate,\n latitude: flight.startLatitude.latitude,\n longitude: flight.startLongitude.longitude,\n title: flight.startTitle.name,\n },\n stop: {\n date: flight.stopDate,\n latitude: flight.stopLatitude.latitude,\n longitude: flight.stopLongitude.longitude,\n title: flight.stopTitle.name,\n },\n }));\n\n return (\n \n
\n \n
\n \n {I18n.t('admin.components.orders.overview.travel_plan.flight.title')}\n
\n \n {HumanReadableDuration(wholeDurationInMinutes)}\n
\n \n \n {travelers.map(({ firstName, lastName, avatarUrl }) => (\n
\n \n \n
\n \n
\n );\n};\n\nBookHotel.defaultProps = {\n dates: [],\n};\n\nBookHotel.propTypes = {\n stayingPlaceInfo: PropTypes.shape({\n currentFlightCity: PropTypes.string,\n currentFlightArrivalTime: PropTypes.shape({}),\n nextFlightDepartureTime: PropTypes.shape({}),\n }).isRequired,\n dates: PropTypes.arrayOf(\n PropTypes.shape({\n checkeIn: PropTypes.shape({}),\n checkeOut: PropTypes.shape({}),\n }),\n ),\n};\n\nexport default BookHotel;\n","import moment from 'moment';\n\nconst isSingleDayStayAtleast = (startTime, endTime) => {\n const durationInMilliseconds = endTime.diff(startTime);\n\n return moment.duration(durationInMilliseconds).asHours() >= 24;\n};\n\nexport default isSingleDayStayAtleast;\n","/* eslint-disable react/prop-types */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport DateTime from 'sharedWebpack/DateTime';\nimport Card from '@wtag/rcl-card';\nimport Icon from '@wtag/rcl-icon';\nimport { TYPE_FLIGHT } from 'sharedWebpack/helpers/itemTypes';\nimport formatAddress from './formatAddress';\nimport BookHotel from './BookHotel';\nimport isSingleDayStayAtleast from '../helpers/isSingleDayStayAtleast';\nimport './styles.scss';\n\nconst TravelplanItemFooter = ({ data, stayingPlaceInfo, hotelTimings }) => {\n const dateTimeFormat = data.type === 'hotel' ? 'short' : 'shortWithTime';\n const dates = [];\n let isHotelRequired = false;\n\n if (data.type === TYPE_FLIGHT && stayingPlaceInfo) {\n const { currentFlightArrivalTime, nextFlightDepartureTime } = stayingPlaceInfo;\n\n const isInsideFlightDuration = (startTime, endTime) =>\n startTime.isBetween(currentFlightArrivalTime, nextFlightDepartureTime, null, '[]') &&\n endTime.isBetween(currentFlightArrivalTime, nextFlightDepartureTime, null, '[]');\n\n const addHotelDate = (checkIn, checkOut) => {\n if (isSingleDayStayAtleast(checkIn, checkOut)) {\n isHotelRequired = true;\n\n dates.push({ checkIn, checkOut });\n }\n };\n\n if (hotelTimings.length === 0) {\n addHotelDate(currentFlightArrivalTime, nextFlightDepartureTime);\n } else if (hotelTimings.length === 1) {\n const { checkIn, checkOut } = hotelTimings[0];\n\n if (isInsideFlightDuration(checkIn, checkOut)) {\n addHotelDate(currentFlightArrivalTime, checkIn);\n addHotelDate(checkOut, nextFlightDepartureTime);\n }\n } else {\n // assuming one won't checkIn in a hotel before arrival and wont' checkOut after departure\n hotelTimings.forEach(({ checkIn, checkOut }, index) => {\n if (isInsideFlightDuration(checkIn, checkOut)) {\n if (index === 0) {\n addHotelDate(currentFlightArrivalTime, checkIn);\n }\n\n if (index === hotelTimings.length - 1) {\n addHotelDate(checkOut, nextFlightDepartureTime);\n }\n }\n\n if (index > 0) {\n const { checkOut: currentHotelCheckOut } = hotelTimings[index - 1];\n\n if (isInsideFlightDuration(currentHotelCheckOut, checkIn)) {\n addHotelDate(currentHotelCheckOut, checkIn);\n }\n }\n });\n }\n }\n\n const footerData = {\n flight: {\n dateTime: data.arrivalLocaltime,\n subTitle: I18n.t('admin.components.orders.overview.travel_plan.flight.footer.text', {\n code: data.destinationDetails && data.destinationDetails.code,\n name: data.destinationDetails && data.destinationDetails.name,\n city: data.destinationDetails && data.destinationDetails.cityName,\n country: data.destinationDetails && data.destinationDetails.countryName,\n }),\n cardMainTitle: I18n.t('admin.components.orders.overview.travel_plan.flight.footer.card', {\n city: data.destinationDetails && data.destinationDetails.cityName,\n country: data.destinationDetails && data.destinationDetails.countryName,\n }),\n },\n car: {\n dateTime: data.dropOffTime,\n subTitle: I18n.t('admin.components.orders.overview.travel_plan.car.footer.text', {\n location: data.dropOffLocation,\n }),\n cardMainTitle: I18n.t('admin.components.orders.overview.travel_plan.car.footer.card', {\n location: data.dropOffLocation,\n }),\n },\n cruise: {\n dateTime: data.offBoardingTime,\n subTitle: formatAddress(\n `${data.offBoardingLocation},${data.offBoardingAddress &&\n data.offBoardingAddress.city},${data.offBoardingAddress &&\n data.offBoardingAddress.country}`,\n ),\n cardMainTitle: `${I18n.t(\n 'admin.components.orders.overview.travel_plan.cruise.footer.card',\n )} ${formatAddress(\n `${data.offBoardingLocation},${data.offBoardingAddress &&\n data.offBoardingAddress.city},${data.offBoardingAddress &&\n data.offBoardingAddress.country}`,\n )}`,\n },\n event: {\n dateTime: data.endTime,\n subTitle: formatAddress(\n `${data.address && data.address.street},${data.address &&\n data.address.city},${data.address && data.address.country}`,\n ),\n cardMainTitle: `${I18n.t(\n 'admin.components.orders.overview.travel_plan.event.footer.card',\n )} ${formatAddress(\n `${data.address && data.address.street},${data.address &&\n data.address.city},${data.address && data.address.country}`,\n )}`,\n },\n hotel: {\n dateTime: data.checkOut,\n subTitle: `${data.hotelName}, ${data.address}`,\n cardMainTitle: I18n.t('admin.components.orders.overview.travel_plan.hotel.footer.card', {\n hotel_name: data.hotelName,\n address: data.address,\n }),\n },\n transfer: {\n dateTime: data.dropOffTime,\n subTitle: I18n.t('admin.components.orders.overview.travel_plan.transfer.footer.text', {\n address: data.dropOffAddress,\n }),\n cardMainTitle: I18n.t('admin.components.orders.overview.travel_plan.transfer.footer.card', {\n address: data.dropOffAddress,\n }),\n },\n };\n\n return (\n \n \n {I18n.t('admin.components.orders.overview.travel_plan.hotel.book_hotel.header', {\n night_count: nightCount,\n city_name: currentFlightCity,\n })}\n \n
\n \n {I18n.t('admin.components.orders.overview.travel_plan.hotel.book_hotel.label')}\n \n \n {dates.map(({ checkIn, checkOut }) => (\n
\n \n {I18n.t('admin.components.orders.overview.travel_plan.hotel.book_hotel.subheader', {\n check_in: formattedDateTime(checkIn),\n check_out: formattedDateTime(checkOut),\n })}\n
\n ))}\n \n
\n );\n};\n\nTravelplanItemFooter.propTypes = {\n data: PropTypes.shape({\n tripDestinationDetails: PropTypes.shape({\n name: PropTypes.string,\n code: PropTypes.string,\n cityName: PropTypes.string,\n countryName: PropTypes.string,\n countryFlag: PropTypes.string,\n }),\n departureLocaltime: PropTypes.string,\n arrivalLocaltime: PropTypes.string,\n originDetails: PropTypes.shape({\n name: PropTypes.string,\n code: PropTypes.string,\n cityName: PropTypes.string,\n countryName: PropTypes.string,\n countryFlag: PropTypes.string,\n }),\n destinationDetails: PropTypes.shape({\n name: PropTypes.string,\n code: PropTypes.string,\n cityName: PropTypes.string,\n countryName: PropTypes.string,\n countryFlag: PropTypes.string,\n }),\n }).isRequired,\n};\n\nexport default TravelplanItemFooter;\n","/* eslint-disable react/prop-types */\nimport React, { Fragment, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport ProductIcon from 'sharedWebpack/ProductIcon';\nimport DateTime from 'sharedWebpack/DateTime';\nimport Card from '@wtag/rcl-card';\nimport { EmphasisTag } from '@wtag/react-comp-lib';\nimport Avatar from '@wtag/rcl-avatar';\nimport StackedItems from '@wtag/rcl-stacked-items';\nimport Icon from '@wtag/rcl-icon';\nimport HotelRoomFallbackImage from '../../../../assets/images/synced/fallback_images/product/product_xxl_hotel.png';\nimport '../styles.scss';\n\nconst Hotel = ({ data }) => {\n const [isTravellerPopoverVisible, setIsTravellerPopoverVisible] = useState(false);\n\n return (\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n {footerData[data.type].subTitle}
\n \n \n \n
\n {isHotelRequired && \n
\n \n
\n \n {footerData[data.type].cardMainTitle}\n
\n \n
\n \n
\n \n
\n \n {I18n.t('admin.components.orders.overview.travel_plan.hotel.title')}\n
\n \n {I18n.t('admin.components.orders.overview.travel_plan.hotel.night_count', {\n night_count: data.totalNightDuration,\n })}\n
\n \n {data.travelers && data.travelers.length > 0 && (\n \n setIsTravellerPopoverVisible(\n prevTravellerPopoverState => !prevTravellerPopoverState,\n )\n }\n onOutsideClick={() => setIsTravellerPopoverVisible(false)}\n >\n {data.travelers.map(traveler => (\n
\n \n \n
\n \n
\n \n
\n \n \n \n
\n \n {data && data.hotelName}\n
\n \n \n
\n \n
\n \n
\n \n {data.checkIn &&
\n {data.checkIn && (\n \n {I18n.t(\n 'admin.components.orders.overview.travel_plan.hotel.header.check_in.label',\n )}\n
\n )}\n {data.checkOut && (\n \n {I18n.t(\n 'admin.components.orders.overview.travel_plan.hotel.header.check_out.label',\n )}\n
\n )}\n \n {`${data.hotelName}${data.address ? `, ${data.address}` : ''}`}\n
\n {data.boardType && (\n \n {data && data.pictures && data.pictures.length > 0 ? (\n 
\n )}\n
\n \n \n \n \n \n
\n \n \n
\n \n );\n};\n\nTravelplanItemHeader.defaultProps = {\n firstItem: false,\n};\n\nTravelplanItemHeader.propTypes = {\n data: PropTypes.shape({\n tripDestinationDetails: PropTypes.shape({\n name: PropTypes.string,\n code: PropTypes.string,\n cityName: PropTypes.string,\n countryName: PropTypes.string,\n countryFlag: PropTypes.string,\n }),\n departureLocaltime: PropTypes.string,\n arrivalLocaltime: PropTypes.string,\n originDetails: PropTypes.shape({\n name: PropTypes.string,\n code: PropTypes.string,\n cityName: PropTypes.string,\n countryName: PropTypes.string,\n countryFlag: PropTypes.string,\n }),\n }).isRequired,\n firstItem: PropTypes.bool,\n};\n\nexport default TravelplanItemHeader;\n","/* eslint-disable react/prop-types */\nimport React, { Fragment, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport ProductIcon from 'sharedWebpack/ProductIcon';\nimport DateTime from 'sharedWebpack/DateTime';\nimport Card from '@wtag/rcl-card';\nimport { EmphasisTag } from '@wtag/react-comp-lib';\nimport Avatar from '@wtag/rcl-avatar';\nimport StackedItems from '@wtag/rcl-stacked-items';\nimport CarFallbackImage from '../../../../assets/images/synced/fallback_images/product/product_xxl_car.png';\nimport '../styles.scss';\n\nconst Car = ({ data }) => {\n const [isTravellerPopoverVisible, setIsTravellerPopoverVisible] = useState(false);\n return (\n \n
\n \n
\n {headerData[data.type].subTitle}
\n \n \n \n
\n \n
\n \n
\n \n
\n \n {headerData[data.type].cardMainTitle}\n
\n \n {headerData[data.type].cardSubTitle}\n
\n \n
\n \n
\n \n
\n \n {I18n.t('admin.components.orders.overview.travel_plan.car.title')}\n
\n \n {I18n.t('admin.components.orders.overview.travel_plan.car.day_count', {\n day_count: data.totalDays,\n })}\n
\n \n {data.travelers && data.travelers.length > 0 && (\n \n setIsTravellerPopoverVisible(\n prevTravellerPopoverState => !prevTravellerPopoverState,\n )\n }\n onOutsideClick={() => setIsTravellerPopoverVisible(false)}\n >\n {data.travelers.map(traveler => (\n
\n \n \n
\n \n
\n \n
\n \n \n \n
\n \n {data && data.vendorImageUrl && (\n
\n \n \n {data && data.vendorName}\n {data.category && data.acrissCode && (\n
\n \n
\n \n
\n \n {data.pickUpTime && (\n
\n {data.pickUpTime && (\n \n {I18n.t(\n 'admin.components.orders.overview.travel_plan.car.header.pick_up.label',\n )}\n
\n )}\n {data.dropOffTime && (\n \n {I18n.t(\n 'admin.components.orders.overview.travel_plan.car.header.drop_off.label',\n )}\n
\n )}\n {data.pickUpLocation && (\n \n {data.pickUpLocation}\n
\n )}\n {data.dropOffLocation && (\n \n {data.dropOffLocation}\n
\n )}\n \n {data && data.carImageUrl ? (\n
\n \n
\n \n
\n \n
\n \n {I18n.t('admin.components.orders.overview.travel_plan.cruise.title')}\n
\n \n {HumanReadableDuration(data.durationInMinutes)}\n
\n \n {data.travelers && data.travelers.length > 0 && (\n \n setIsTravellerPopoverVisible(\n prevTravellerPopoverState => !prevTravellerPopoverState,\n )\n }\n onOutsideClick={() => setIsTravellerPopoverVisible(false)}\n >\n {data.travelers.map(traveler => (\n
\n \n \n
\n \n
\n \n
\n \n \n \n
\n \n {data && data.shipName}\n
\n \n \n
\n \n
\n \n {data.boardingTime && (\n
\n {data.boardingTime && (\n \n {I18n.t(\n 'admin.components.orders.overview.travel_plan.cruise.header.boarding.label',\n )}\n
\n )}\n {data.offBoardingTime && (\n \n {I18n.t(\n 'admin.components.orders.overview.travel_plan.cruise.header.off_boarding.label',\n )}\n
\n )}\n {data.boardingLocation ? (\n \n {`${data.boardingLocation ? `${data.boardingLocation}, ` : ''}${\n data.boardingAddress.city ? `${data.boardingAddress.city}, ` : ''\n }${data.boardingAddress.country ? `${data.boardingAddress.country}` : ''}`}\n
\n ) : (\n \n {`${data.offBoardingLocation ? `${data.offBoardingLocation}, ` : ''}${\n data.offBoardingAddress && data.offBoardingAddress.city\n ? `${data.offBoardingAddress.city}, `\n : ''\n }${\n data.offBoardingAddress && data.offBoardingAddress.country\n ? `${data.offBoardingAddress.country}`\n : ''\n }`}\n
\n )}\n {data.food && (\n \n {/* Cruise Image */}\n
\n \n
\n \n
\n \n
\n \n {I18n.t('admin.components.orders.overview.travel_plan.event.title')}\n
\n \n {HumanReadableDuration(data.durationInMinutes)}\n
\n \n {data.travelers && data.travelers.length > 0 && (\n \n setIsTravellerPopoverVisible(\n prevTravellerPopoverState => !prevTravellerPopoverState,\n )\n }\n onOutsideClick={() => setIsTravellerPopoverVisible(false)}\n >\n {data.travelers.map(traveler => (\n
\n \n \n
\n \n
\n \n
\n \n \n \n
\n \n {data && data.name}\n
\n \n \n
\n \n
\n \n {data.startTime && (\n
\n {data.startTime && (\n \n {I18n.t(\n 'admin.components.orders.overview.travel_plan.event.header.start.label',\n )}\n
\n )}\n {data.endTime && (\n \n {I18n.t(\n 'admin.components.orders.overview.travel_plan.event.header.end.label',\n )}\n
\n )}\n {data.startTime && (\n \n {formatAddress(\n `${data.address.street},${data.address.city},${data.address.country}`,\n )}\n
\n )}\n {data.endTime && (\n \n {formatAddress(\n `${data.address.street},${data.address.city},${data.address.country}`,\n )}\n
\n )}\n \n {/* Event Image */}\n
\n \n
\n \n
\n \n
\n \n {I18n.t('admin.components.orders.overview.travel_plan.transfer.title')}\n
\n \n {HumanReadableDuration(data.durationInMinutes)}\n
\n \n {data.travelers && data.travelers.length > 0 && (\n \n setIsTravellerPopoverVisible(\n prevTravellerPopoverState => !prevTravellerPopoverState,\n )\n }\n onOutsideClick={() => setIsTravellerPopoverVisible(false)}\n >\n {data.travelers.map(traveler => (\n
\n \n \n
\n \n
\n \n
\n \n \n \n
\n \n {I18n.t('admin.components.orders.overview.travel_plan.transfer.name')}\n
\n \n \n
\n \n
\n \n {data.pickUpTime && (\n
\n {data.pickUpTime && (\n \n {I18n.t(\n 'admin.components.orders.overview.travel_plan.transfer.header.pick_up.label',\n )}\n
\n )}\n {data.dropOffTime && (\n \n {I18n.t(\n 'admin.components.orders.overview.travel_plan.transfer.header.drop_off.label',\n )}\n
\n )}\n {data.pickAddress && (\n \n {data.pickAddress}\n
\n )}\n {data.dropOffAddress && (\n \n {data.dropOffAddress}\n
\n )}\n \n {/* Cruise Image */}\n
\n \n {travelPlanBody[type]}\n
\n );\n };\n\n return (\n \n \n \n )}\n {startDate && (\n \n \n )}\n
\n \n
\n \n {I18n.t('admin.components.orders.overview.travel_plan.title')}\n
\n {travelStartsAtHuman && (\n \n
\n {title && (\n \n {id && mapContent}\n {identifier && !id &&
\n \n
\n \n {I18n.t('admin.components.orders.overview.travel_plan.itinerary_of')}\n
\n {title}
\n \n \n
\n \n
\n \n
\n \n {I18n.t('admin.components.orders.overview.travel_plan.on_travel_date')}\n
\n \n {formattedDate(startDate)} - {formattedDate(endDate)}\n
\n \n \n
\n \n {travelPlan &&\n travelPlan.map((data, index) => (\n \n {/* Headers */}\n {data.type === 'flight' &&\n (data && data.tripOriginDetails.code) === (data && data.originDetails.code) && (\n \n ))}\n
\n \n
\n );\n\n return (\n \n 
\n
\n {coloredText}\n {hint}\n {nationality}
\n \n \n {showToolTip && (\n
\n );\n};\n\nFlagWithToolTip.defaultProps = {\n coloredText: null,\n hint: null,\n icon: null,\n};\n\nFlagWithToolTip.propTypes = {\n flagUrl: PropTypes.string.isRequired,\n coloredText: PropTypes.node,\n hint: PropTypes.node,\n showToolTip: PropTypes.bool.isRequired,\n nationality: PropTypes.string.isRequired,\n icon: PropTypes.node,\n};\n\nexport default FlagWithToolTip;\n","import React, { useState, useEffect, Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport { ProgressBar, SidePanel, EmphasisTag, Link } from '@wtag/react-comp-lib';\nimport Avatar from '@wtag/rcl-avatar';\nimport Icon from '@wtag/rcl-icon';\nimport Card from '@wtag/rcl-card';\nimport ContentLoaderPlaceholder from '@wtag/rcl-content-loader-placeholder';\nimport { StringParam, useQueryParams, withDefault } from 'use-query-params';\nimport Map from '@wtag/rcl-map';\nimport ClassNames from 'classnames';\n\nimport httpClient from 'agentHTTPClient';\nimport routes from 'agentRoutes';\n\nimport withQueryParamsProvider from 'sharedWebpack/withQueryParamsProvider';\nimport SocialMediaShow from 'sharedWebpack/SocialMediaSection/SocialMediaShow';\nimport FlagWithToolTip from '../../admin/FlagWithToolTip';\nimport './styles.scss';\n\nconst LeftPanel = props => {\n const { traveller, laymanMode, loading, progressBarColor, setShareLocationError } = props;\n const [latitude, setLatitude] = useState(null);\n const [longitude, setLongitude] = useState(null);\n\n const flagsToShow = 4;\n\n const [query, setQuery] = useQueryParams({\n openedSidePanel: withDefault(StringParam, ''),\n });\n\n const emergencySidePanelVisible = query.openedSidePanel === 'emergency';\n const viewPhonesSidePanelVisible = query.openedSidePanel === 'phones';\n const viewAddressSidePanelVisible = query.openedSidePanel === 'address';\n const documentSidePanelVisible = query.openedSidePanel === 'document';\n\n const showEmergencySidePanel = () => {\n setQuery({ openedSidePanel: 'emergency' }, 'replaceIn');\n };\n\n const showPhonesSidePanel = () => {\n setQuery({ openedSidePanel: 'phones' }, 'replaceIn');\n };\n\n const showAddressSidePanel = () => {\n setQuery({ openedSidePanel: 'address' }, 'replaceIn');\n };\n\n const showDocumentSidePanel = () => {\n setQuery({ openedSidePanel: 'document' }, 'replaceIn');\n };\n\n const updateLocation = async (lat, lon) => {\n await httpClient.put(\n routes.api.shareLocation({\n latitude: lat,\n longitude: lon,\n lastLocationTime: Date().toLocaleString(),\n }),\n );\n };\n\n const shareGeoLocation = () => {\n if (navigator.geolocation) {\n navigator.geolocation.getCurrentPosition(\n position => {\n const lat = position.coords.latitude;\n const lon = position.coords.longitude;\n\n setLatitude(lat);\n setLongitude(lon);\n updateLocation(lat, lon);\n },\n error => {\n setShareLocationError(error.message);\n },\n );\n }\n };\n\n const hideSidePanel = () => {\n setQuery({ openedSidePanel: '' }, 'replaceIn');\n };\n const travellerVerificationStatus = type => {\n let verificationIcon;\n\n switch (type) {\n case 'verified':\n verificationIcon = (\n \n \n {icon}\n \n
\n )}\n \n {I18n.t('admin.components.travellers.overview.left_panel.expired')}\n
\n );\n hint = (\n \n {I18n.t('admin.components.travellers.overview.left_panel.expired_hint')}\n
\n );\n icon = \n {I18n.t('admin.components.travellers.overview.left_panel.warning')}\n
\n );\n hint = (\n \n {I18n.t('admin.components.travellers.overview.left_panel.warning_hint')}\n
\n );\n icon = \n
\n \n
\n \n
\n )}\n \n {address.line1}, {address.city}, {address.zipCode}\n
\n \n
\n \n
\n \n
\n )}\n \n {email.email}\n
\n \n
\n \n
\n \n
\n )}\n \n {number.number}\n
\n \n
\n \n {contact.name}\n
\n \n {contact.number}\n
\n \n {I18n.t('admin.components.travellers.overview.left_panel.expired')}\n
\n );\n hint = (\n \n {I18n.t('admin.components.travellers.overview.left_panel.expired_hint')}\n
\n );\n icon = \n {I18n.t('admin.components.travellers.overview.left_panel.warning')}\n
\n );\n hint = (\n \n {I18n.t('admin.components.travellers.overview.left_panel.warning_hint')}\n
\n );\n icon = \n
\n \n 
\n
\n {showWarning && (\n \n {document.primary && (\n
\n \n
\n )}\n \n {icon}\n
\n {hint}\n \n {coloredText}\n
\n \n {document.nationality}\n
\n \n {document.number}\n
\n \n {/* TODO: Comment out when the feature is available */}\n {/*
\n {traveller.socialMediaLinks && (\n \n
*/}\n {traveller.id && (\n \n {I18n.t('admin.components.travellers.overview.placeholder.account_manager')}\n
\n \n {traveller.id && (\n
\n )}\n {loading && \n {laymanMode && (\n \n {travellerVerificationStatus(traveller.verificationStatus)}\n
\n \n {traveller.nickName ? `${traveller.name} (${traveller.nickName})` : traveller.name}\n
\n )}\n \n
\n )}\n \n
\n \n
\n {traveller && traveller.organization && traveller.organization.id && (\n \n
\n )}\n {!laymanMode && !traveller.organization && loading && (\n \n \n {traveller.organization.name}\n \n
\n \n
\n )}\n {traveller.id && (\n \n {I18n.t('admin.components.travellers.overview.placeholder.travel_agent')}\n
\n \n showDocumentSidePanel()}\n >\n {I18n.t('admin.components.travellers.overview.left_panel.links.documents')}\n \n hideSidePanel()}\n />\n
\n )}\n {loading && \n {I18n.t('admin.components.travellers.overview.left_panel.passport')}\n
\n {flags}
\n \n
\n )}\n {!laymanMode && (\n \n {I18n.t('admin.components.travellers.overview.left_panel.communication_preference')}\n
\n \n {traveller.preferredCommunication === 'email' && (\n \n \n )}\n {traveller.preferredCommunication === 'phone' && (\n \n \n )}\n {!traveller.preferredCommunication &&\n I18n.t(\n 'admin.components.travellers.edit.general.information.placeholder.no_preferred_communication',\n )}\n
\n \n {I18n.t('admin.components.travellers.overview.left_panel.emails_only')}\n
\n \n {I18n.t('admin.components.travellers.overview.left_panel.phones_only')}\n
\n \n \n hideSidePanel()}\n />\n
\n )}\n \n \n \n {I18n.t('admin.components.organizations.edit.email_and_phone.email.no_email')}\n \n )}\n \n {I18n.t('admin.components.organizations.edit.email_and_phone.phone.no_phone')}\n \n )}\n \n }\n isOpened={viewPhonesSidePanelVisible}\n onClick={() => hideSidePanel()}\n />\n
\n \n {I18n.t('admin.components.travellers.overview.left_panel.primary_contacts')}\n
\n \n {traveller.primaryEmailAddress && (\n \n \n )}\n {loading &&
\n \n {traveller.primaryEmailAddress.id\n ? traveller.primaryEmailAddress.email\n : I18n.t('admin.components.travellers.table.no_emails')}\n
\n \n {traveller.primaryPhoneNumber && (\n \n \n )}\n {loading &&
\n {!laymanMode && (\n \n )}\n \n {traveller.primaryPhoneNumber.id\n ? traveller.primaryPhoneNumber.number\n : I18n.t('admin.components.organizations.edit.email_and_phone.phone.no_phone')}\n
\n \n {I18n.t('admin.components.travellers.overview.left_panel.email_addresses')}\n
\n {emailAddressesBody && emailAddressesBody.length > 0 ? (\n emailAddressesBody\n ) : (\n \n {I18n.t('admin.components.travellers.overview.left_panel.phone_numbers')}\n
\n\n {phoneNumbersBody && phoneNumbersBody.length > 0 ? (\n phoneNumbersBody\n ) : (\n \n
\n \n {I18n.t('admin.components.travellers.overview.left_panel.home_address')}\n
\n \n
\n \n {traveller.primaryAddress &&\n traveller.primaryAddress.id &&\n `${traveller.primaryAddress.line1}, ${traveller.primaryAddress.city}`}\n
\n \n {(latitude || traveller.addressCoordinates) && (\n hideSidePanel()}\n />\n
\n {laymanMode && (\n \n
\n \n \n
\n \n
\n \n )}\n {laymanMode && traveller.correspondenceLanguage && (\n \n {I18n.t('admin.components.travellers.overview.left_panel.spoken_languages')}\n
\n \n {traveller.spokenLanguages.map(language => (\n \n
\n ))}\n {traveller.spokenLanguages.length === 0 &&\n I18n.t(\n 'admin.components.travellers.edit.general.information.placeholder.no_spoken_language',\n )}\n \n {language}\n
\n \n
\n )}\n {loading && \n {I18n.t('activerecord.attributes.address.correspondence_language')}\n
\n \n
\n \n
\n \n {traveller.correspondenceLanguage}\n
\n \n
\n );\n};\n\nForm.propTypes = {\n line1: PropTypes.string.isRequired,\n setLine1: PropTypes.func.isRequired,\n line2: PropTypes.string.isRequired,\n setLine2: PropTypes.func.isRequired,\n zipCode: PropTypes.string.isRequired,\n setZipCode: PropTypes.func.isRequired,\n city: PropTypes.string.isRequired,\n setCity: PropTypes.func.isRequired,\n countryCode: PropTypes.string.isRequired,\n setCountryCode: PropTypes.func.isRequired,\n countryState: PropTypes.string.isRequired,\n setCountryState: PropTypes.func.isRequired,\n type: PropTypes.number.isRequired,\n setType: PropTypes.func.isRequired,\n error: PropTypes.shape({\n addressType: PropTypes.string,\n city: PropTypes.string,\n zipCode: PropTypes.string,\n line1: PropTypes.string,\n countryState: PropTypes.string,\n countryCode: PropTypes.string,\n }).isRequired,\n primary: PropTypes.bool.isRequired,\n setPrimary: PropTypes.func.isRequired,\n addressTypesOptions: PropTypes.arrayOf(\n PropTypes.shape({\n value: PropTypes.number,\n label: PropTypes.string,\n }),\n ).isRequired,\n countryOptions: PropTypes.arrayOf(\n PropTypes.shape({\n value: PropTypes.string,\n label: PropTypes.string,\n }),\n ).isRequired,\n};\n\nexport default Form;\n","import React, { useState, useEffect, Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport { EmphasisTag } from '@wtag/react-comp-lib';\nimport Icon from '@wtag/rcl-icon';\nimport IconButton from '@wtag/rcl-icon-button';\nimport Button from '@wtag/rcl-button';\nimport ConfirmationModal from 'sharedWebpack/ConfirmationModal';\n\nimport routes from 'agentRoutes';\nimport httpClient from 'agentHTTPClient';\n\nimport Form from './Form';\n\nconst AddressCard = props => {\n const { address, fetchTraveller, addressTypesOptions, countryOptions, layman, personId } = props;\n\n const [editing, setEditing] = useState(false);\n\n const [line1, setLine1] = useState('');\n const [line2, setLine2] = useState('');\n const [zipCode, setZipCode] = useState('');\n const [city, setCity] = useState('');\n const [countryCode, setCountryCode] = useState(null);\n const [countryState, setCountryState] = useState('');\n const [type, setType] = useState(null);\n const [primary, setPrimary] = useState(false);\n const [error, setError] = useState({});\n const [isShowConfirmation, setIsShowConfirmation] = useState(false);\n\n let addressesAndLocationsUpdateRoutes;\n\n if (layman) {\n addressesAndLocationsUpdateRoutes = {\n update: routes.public.travellerAddresses.update({\n person_id: personId,\n addressId: address.id,\n }),\n delete: routes.public.travellerAddresses.delete({\n person_id: personId,\n addressId: address.id,\n }),\n };\n } else {\n addressesAndLocationsUpdateRoutes = {\n update: routes.admin.travellerAddresses.update({\n person_id: personId,\n addressId: address.id,\n }),\n delete: routes.admin.travellerAddresses.delete({\n person_id: personId,\n addressId: address.id,\n }),\n };\n }\n\n const toggleShowConfirmation = () => {\n setIsShowConfirmation(prev => !prev);\n };\n\n const resetForm = () => {\n setLine1('');\n setLine2('');\n setZipCode('');\n setCity('');\n setCountryCode(null);\n setCountryState('');\n setType(null);\n setPrimary(false);\n };\n\n const validateForm = () => {\n const formErrors = {};\n\n if (!line1) {\n formErrors.line1 = I18n.t('components.ibe.validations.presence');\n }\n\n if (!zipCode) {\n formErrors.zipCode = I18n.t('components.ibe.validations.presence');\n }\n\n if (!countryCode) {\n formErrors.countryCode = I18n.t('components.ibe.validations.presence');\n }\n\n if (!city) {\n formErrors.city = I18n.t('components.ibe.validations.presence');\n }\n\n if (!countryCode) {\n formErrors.countryCode = I18n.t('components.ibe.validations.presence');\n }\n\n if (!type) {\n formErrors.addressType = I18n.t('components.ibe.validations.presence');\n }\n\n setError(formErrors);\n\n return Object.keys(formErrors).length === 0;\n };\n\n const updateAddress = async () => {\n if (!validateForm()) {\n return;\n }\n\n const travellerParams = {\n traveler_address: {\n id: address.id,\n address_type: type,\n primary,\n line_1: line1,\n line_2: line2,\n zip_code: zipCode,\n city,\n state: countryState,\n country_code: countryCode,\n },\n };\n\n const { data } = await httpClient.patch(addressesAndLocationsUpdateRoutes.update, {\n ...travellerParams,\n });\n\n if (data.error === null) {\n fetchTraveller();\n setEditing(false);\n resetForm();\n }\n };\n\n const deleteAddress = async () => {\n toggleShowConfirmation();\n\n const { data } = await httpClient.delete(addressesAndLocationsUpdateRoutes.delete);\n if (data.error === null) {\n fetchTraveller();\n }\n };\n\n const onUpdate = () => {\n updateAddress().catch(({ response }) => {\n if (response.status === 422) {\n setError(response.data.error);\n }\n });\n };\n\n const getAddressInformation = () => (\n \n
\n \n setLine1(value)}\n required={true}\n error={error.line1}\n />\n
\n \n setLine2(value)}\n />\n
\n \n setZipCode(value)}\n required={true}\n error={error.zipCode}\n />\n
\n \n setCity(value)}\n required={true}\n error={error.city}\n />\n
\n \n setCountryState(value)}\n />\n
\n \n setCountryCode(selectedOption && selectedOption.value)}\n />\n
\n \n setType(selectedOption && selectedOption.value)}\n />\n
\n \n setPrimary(event.target.checked)}\n />\n
\n \n
\n );\n\n useEffect(() => {\n setLine1(address.line1);\n setLine2(address.line2);\n setZipCode(address.zipCode);\n setCity(address.city);\n setCountryCode(address.countryCode);\n setCountryState(address.state);\n setType(address.type);\n setPrimary(address.primary);\n }, [address]);\n\n useEffect(() => {\n setError({});\n }, [editing]);\n\n return (\n \n
\n \n {I18n.t('admin.components.travellers.edit.address.form.label.address_1')}\n
\n {address.line1}
\n \n
\n \n {address.line2 && I18n.t('admin.components.travellers.edit.address.form.label.address_2')}\n
\n {address.line2}
\n \n
\n \n {I18n.t('admin.components.travellers.edit.address.form.label.zip')}\n
\n {address.zipCode}
\n \n
\n \n {I18n.t('admin.components.travellers.edit.address.form.label.city')}\n
\n {address.city}
\n \n
\n \n {I18n.t('components.ibe.traveler_details.form.fields.state')}\n
\n {address.state}
\n \n
\n \n {I18n.t('admin.components.travellers.edit.address.form.label.country')}\n
\n {address.countryName}
\n \n \n \n ) : (\n
\n );\n};\n\nAddressCard.propTypes = {\n address: PropTypes.shape({\n city: PropTypes.string,\n countryCode: PropTypes.string,\n countryName: PropTypes.string,\n state: PropTypes.string,\n id: PropTypes.number,\n line1: PropTypes.string,\n line2: PropTypes.string,\n type: PropTypes.string,\n zipCode: PropTypes.string,\n primary: PropTypes.bool,\n }).isRequired,\n addressTypesOptions: PropTypes.arrayOf(\n PropTypes.shape({\n value: PropTypes.number,\n label: PropTypes.string,\n }),\n ).isRequired,\n countryOptions: PropTypes.arrayOf(\n PropTypes.shape({\n value: PropTypes.string,\n label: PropTypes.string,\n }),\n ).isRequired,\n fetchTraveller: PropTypes.func.isRequired,\n layman: PropTypes.bool.isRequired,\n personId: PropTypes.number.isRequired,\n};\n\nexport default AddressCard;\n","import React, { useEffect, useState, Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport Button from '@wtag/rcl-button';\nimport Icon from '@wtag/rcl-icon';\nimport ContentLoaderPlaceholder from '@wtag/rcl-content-loader-placeholder';\nimport httpClient from 'agentHTTPClient';\nimport routes from 'agentRoutes';\n\nimport Form from './Form';\nimport AddressCard from './AddressCard';\n\nconst sortItems = (x, y) => Number(y.primary) - Number(x.primary);\n\nconst AddressesAndLocationsSection = props => {\n const { addresses, fetchTraveller, addressTypes, personId, layman } = props;\n\n const [line1, setLine1] = useState('');\n const [line2, setLine2] = useState('');\n const [zipCode, setZipCode] = useState('');\n const [city, setCity] = useState('');\n const [countryCode, setCountryCode] = useState(null);\n const [countryState, setCountryState] = useState('');\n const [type, setType] = useState(null);\n const [primary, setPrimary] = useState(false);\n const [isShowForm, setIsShowForm] = useState(false);\n const [error, setError] = useState({});\n const [countryOptions, setCountryOptions] = useState([]);\n const [isFetching, setIsFetching] = useState(false);\n const hasAddress = addresses && addresses.length > 0;\n\n let addressesAndLocationsRoutes;\n\n if (layman) {\n addressesAndLocationsRoutes = {\n create: routes.public.travellerAddresses.create({ person_id: personId }),\n };\n } else {\n addressesAndLocationsRoutes = {\n create: routes.admin.travellerAddresses.create({ person_id: personId }),\n };\n }\n\n if (Array.isArray(addresses)) {\n addresses.sort(sortItems);\n }\n\n const addressTypesOptions = Object.keys(addressTypes).map(addressTypeKey => ({\n value: addressTypeKey,\n label: I18n.t(addressTypeKey, {\n scope: 'simple_form.options.person.traveler_addresses.address_type',\n }),\n }));\n\n const fetchData = () => {\n setIsFetching(true);\n fetchTraveller();\n };\n\n const fetchCountryOptions = async () => {\n let route = routes.admin.people.countryOptions;\n if (layman) {\n route = routes.public.people.countryOptions;\n }\n const { data } = await httpClient.get(route());\n setCountryOptions(data.countryOptions);\n };\n\n const resetForm = () => {\n setLine1('');\n setLine2('');\n setZipCode('');\n setCity('');\n setCountryCode(null);\n setCountryState('');\n setType(null);\n setPrimary(false);\n setError({});\n };\n\n const validateForm = () => {\n const formErrors = {};\n\n if (!line1) {\n formErrors.line1 = I18n.t('components.ibe.validations.presence');\n }\n\n if (!zipCode) {\n formErrors.zipCode = I18n.t('components.ibe.validations.presence');\n }\n\n if (!countryCode) {\n formErrors.countryCode = I18n.t('components.ibe.validations.presence');\n }\n\n if (!city) {\n formErrors.city = I18n.t('components.ibe.validations.presence');\n }\n\n if (!countryCode) {\n formErrors.countryCode = I18n.t('components.ibe.validations.presence');\n }\n\n if (!type) {\n formErrors.addressType = I18n.t('components.ibe.validations.presence');\n }\n\n setError(formErrors);\n\n return Object.keys(formErrors).length === 0;\n };\n\n const createAddress = async () => {\n if (!validateForm()) {\n return;\n }\n\n const travellerParams = {\n traveler_address: {\n address_type: type,\n primary,\n line_1: line1,\n line_2: line2,\n zip_code: zipCode,\n city,\n state: countryState,\n country_code: countryCode,\n },\n };\n\n setIsShowForm(false);\n\n const { data } = await httpClient.post(addressesAndLocationsRoutes.create, {\n ...travellerParams,\n });\n\n if (data.error === null) {\n fetchData();\n resetForm();\n }\n };\n\n const onCreate = () => {\n createAddress().catch(({ response }) => {\n if (response.status === 422) {\n setError(response.data.error);\n }\n });\n };\n\n useEffect(() => {\n resetForm();\n }, [isShowForm]);\n\n const addressForm = () => (\n \n {editing ? (\n
\n {editing ? (\n \n {I18n.t('admin.components.travellers.edit.address.form.placeholder.updating_header')}\n
\n ) : (\n \n
\n )}\n {!editing && (\n \n
\n {address.primary && (\n \n {I18n.t(address.type, {\n scope: 'simple_form.options.person.traveler_addresses.address_type',\n })}\n
\n \n
\n )}\n \n setEditing(false)}\n />\n
\n {getAddressInformation()}
\n )}\n\n {isShowConfirmation && (\n \n {hasAddress && (\n
\n );\n\n useEffect(() => {\n fetchCountryOptions();\n }, []);\n\n useEffect(() => {\n setIsFetching(false);\n }, [addresses]);\n\n return (\n \n {I18n.t('admin.components.travellers.edit.address.form.placeholder.add')}\n
\n )}\n \n setIsShowForm(false)}\n />\n
\n \n \n \n )}\n\n {addresses && addresses.length === 0 && !isFetching && !isShowForm && (\n
\n );\n};\n\nAddressesAndLocationsSection.defaultProps = {\n layman: false,\n};\n\nAddressesAndLocationsSection.propTypes = {\n addresses: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.number,\n type: PropTypes.string,\n primary: PropTypes.bool,\n line1: PropTypes.string,\n line2: PropTypes.string,\n city: PropTypes.string,\n state: PropTypes.string,\n countryCode: PropTypes.string,\n zipCode: PropTypes.string,\n }),\n ).isRequired,\n fetchTraveller: PropTypes.func.isRequired,\n addressTypes: PropTypes.shape({\n billing: PropTypes.number,\n business: PropTypes.number,\n contact: PropTypes.number,\n home: PropTypes.number,\n place_of_work: PropTypes.number,\n recipient: PropTypes.number,\n shipping: PropTypes.number,\n }).isRequired,\n personId: PropTypes.number.isRequired,\n layman: PropTypes.bool,\n};\n\nexport default AddressesAndLocationsSection;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Input from '@wtag/rcl-input';\nimport SelectBox from '@wtag/rcl-select-box';\n\nconst FrequentFlyerNumberForm = props => {\n const { carrierCodeTypes, carrierCode, setCarrierCode, number, setNumber, error } = props;\n\n const carrierCodeOptions = Object.keys(carrierCodeTypes).map(carrierCodeKey => ({\n value: carrierCodeTypes[carrierCodeKey][0],\n label: carrierCodeTypes[carrierCodeKey][1],\n }));\n\n const findSelectBoxContent = (options, value) => {\n const selectedOption = options.filter(option => value === option.value)[0];\n if (selectedOption) {\n return {\n value: selectedOption.value,\n label: selectedOption.label,\n };\n }\n\n return null;\n };\n\n return (\n \n
\n {addresses && !isFetching ? (\n addresses.map(address => (\n \n {I18n.t('admin.components.travellers.edit.address.header')}\n\n {addresses && !isShowForm && !isFetching && (\n setIsShowForm(true)}\n />\n )}\n
\n\n {isShowForm && !hasAddress && addressForm()}\n \n
\n )}\n\n {isShowForm && hasAddress && (\n \n
\n
\n {addressForm()}\n \n
\n
\n )}\n \n {I18n.t('admin.components.organizations.edit.email_and_phone.email.no_address')}\n
\n \n
\n );\n};\n\nFrequentFlyerNumberForm.defaultProps = {\n error: {},\n carrierCode: [],\n setCarrierCode: {},\n};\n\nFrequentFlyerNumberForm.propTypes = {\n carrierCodeTypes: PropTypes.shape([PropTypes.arrayOf(PropTypes.string)]).isRequired,\n carrierCode: PropTypes.arrayOf(PropTypes.shape),\n setCarrierCode: PropTypes.func,\n number: PropTypes.string.isRequired,\n setNumber: PropTypes.func.isRequired,\n error: PropTypes.shape({\n number: PropTypes.string,\n carrierCode: PropTypes.string,\n }),\n};\n\nexport default FrequentFlyerNumberForm;\n","import React, { useState, useEffect, Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport httpClient from 'agentHTTPClient';\nimport routes from 'agentRoutes';\n\nimport { Link } from '@wtag/react-comp-lib';\nimport Icon from '@wtag/rcl-icon';\nimport Card from '@wtag/rcl-card';\nimport IconButton from '@wtag/rcl-icon-button';\n\nimport FrequentFlyerNumberForm from './FrequentFlyerNumberForm';\n\nconst FrequentFlyerNumberInformation = props => {\n const { personId, frequentFlyerNumber, fetchFrequentFlyerNumbers, carrierCodes, layman } = props;\n\n const [editing, setEditing] = useState(false);\n const [error, setError] = useState({});\n const [number, setNumber] = useState('');\n const [carrierCode, setCarrierCode] = useState([]);\n\n const updateFrequentFlyerNumber = async ffnId => {\n const frequentFlyerNumberParams = {\n number,\n carrier_code: carrierCode,\n person_id: personId,\n };\n\n const updateFrequentFlyerUrl = layman\n ? routes.public.frequentFlyerNumbers.update({ id: ffnId })\n : routes.admin.frequentFlyerNumbers.update({ id: ffnId, person_id: personId });\n\n const { data } = await httpClient.patch(updateFrequentFlyerUrl, {\n frequent_flyer_number: frequentFlyerNumberParams,\n });\n if (data.error === null) {\n fetchFrequentFlyerNumbers();\n setEditing(false);\n }\n };\n\n const onUpdateFrequentFlyerNumber = ffnId =>\n updateFrequentFlyerNumber(ffnId).catch(({ response }) => {\n if (response.status === 422) {\n setError(response.data.error);\n }\n });\n\n const deleteFrequentFlyerNumber = async ffnId => {\n const deleteFrequentFlyerUrl = layman\n ? routes.public.frequentFlyerNumbers.delete({ id: ffnId })\n : routes.admin.frequentFlyerNumbers.delete({ id: ffnId, person_id: personId });\n\n const { data } = await httpClient.delete(deleteFrequentFlyerUrl);\n\n if (data.error === null) {\n fetchFrequentFlyerNumbers();\n setEditing(false);\n }\n };\n\n const onDeleteFrequentFlyerNumber = ffnId =>\n deleteFrequentFlyerNumber(ffnId).catch(({ response }) => {\n if (response.status === 422) {\n setError(response.data.error);\n }\n });\n\n useEffect(() => {\n setNumber(frequentFlyerNumber.number);\n setCarrierCode(frequentFlyerNumber.carrierCode);\n }, [frequentFlyerNumber]);\n\n return (\n \n setCarrierCode(selectedOption && selectedOption.value)}\n errorMsg={error.carrierCode}\n required={true}\n />\n
\n \n setNumber(value)}\n required={true}\n />\n
\n \n {I18n.t('admin.components.travellers.edit.frequent_flyer_numbers.update')}\n \n
\n \n
\n \n \n {frequentFlyerNumber.airline}\n \n \n {frequentFlyerNumber.number}\n \n
\n \n \n setEditing(true)}\n >\n \n \n onDeleteFrequentFlyerNumber(frequentFlyerNumber.id)}\n >\n \n
\n \n
\n \n
\n \n {I18n.t('public.people.edit.frequent_flyer_number')}\n
\n \n
\n \n
\n \n
\n \n
\n \n {isLoading ? (\n \n {frequentFlyerNumbers && frequentFlyerNumbers.length > 0 ? (\n frequentFlyerNumbers.map(frequentFlyerNumber => (\n \n )}\n
\n \n
\n ) : (\n \n
\n );\n};\n\nGeneralInformation.defaultProps = {\n traveller: {},\n layman: false,\n};\n\nGeneralInformation.propTypes = {\n traveller: PropTypes.shape({\n id: PropTypes.number,\n name: PropTypes.string,\n firstName: PropTypes.string,\n lastName: PropTypes.string,\n avatarUrl: PropTypes.string,\n birthday: PropTypes.string,\n shortCode: PropTypes.string,\n personalId: PropTypes.string,\n correspondenceLanguage: PropTypes.string,\n profileCompletionPercentage: PropTypes.number,\n socialMediaLinks: PropTypes.shape({\n facebook: PropTypes.shape({\n url: PropTypes.string,\n }),\n twitter: PropTypes.shape({\n url: PropTypes.string,\n }),\n youtube: PropTypes.shape({\n url: PropTypes.string,\n }),\n linkedin: PropTypes.shape({\n url: PropTypes.string,\n }),\n }),\n identificationDocuments: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.number,\n flagUrl: PropTypes.string,\n nationality: PropTypes.string,\n expiresIn: PropTypes.number,\n showWarning: PropTypes.bool,\n showDanger: PropTypes.bool,\n }),\n ),\n spokenLanguages: PropTypes.arrayOf(PropTypes.string),\n addresses: PropTypes.arrayOf(\n PropTypes.shape({\n line1: PropTypes.string,\n line2: PropTypes.string,\n zipCode: PropTypes.string,\n city: PropTypes.string,\n type: PropTypes.string,\n primary: PropTypes.bool,\n }),\n ),\n phoneNumbers: PropTypes.arrayOf(\n PropTypes.shape({\n primary: PropTypes.bool,\n number: PropTypes.string,\n type: PropTypes.string,\n }),\n ),\n emailAddresses: PropTypes.arrayOf(\n PropTypes.shape({\n type: PropTypes.string,\n primary: PropTypes.bool,\n email: PropTypes.string,\n }),\n ),\n preferredCommunication: PropTypes.string,\n organization: PropTypes.shape({\n id: PropTypes.number,\n avatarUrl: PropTypes.string,\n name: PropTypes.string,\n }),\n emergencyContacts: PropTypes.arrayOf(\n PropTypes.shape({\n name: PropTypes.string,\n number: PropTypes.string,\n }),\n ),\n }),\n layman: PropTypes.bool,\n};\n\nexport default GeneralInformation;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport SelectBox from '@wtag/rcl-select-box';\nimport Input from '@wtag/rcl-input';\nimport moment from 'moment';\nimport DatePickerWithFocusedStateWrapper from 'sharedWebpack/DatePickerWithFocusedStateWrapper';\n\nconst GeneralInformationForm = props => {\n const {\n salutations,\n titlePrefixes,\n preferredCommunications,\n spokenLanguages,\n correspondenceLanguageOptions,\n salutation,\n setSalutation,\n titlePrefix,\n setTitlePrefix,\n firstName,\n setFirstName,\n middleName,\n setMiddleName,\n lastName,\n setLastName,\n nickName,\n setNickName,\n dateOfBirth,\n setDateOfBirth,\n preferredCommunication,\n setPreferredCommunication,\n personalId,\n setPersonalId,\n shortCode,\n setShortCode,\n correspondenceLanguage,\n setCorrespondenceLanguage,\n spokenLanguage,\n setSpokenLanguage,\n error,\n layman,\n } = props;\n\n const salutationOptions = Object.keys(salutations).map(salutationKey => ({\n value: salutations[salutationKey],\n label: I18n.t(salutationKey, { scope: 'salutation' }),\n }));\n\n const titlePrefixesOptions = Object.keys(titlePrefixes).map(titlePrefixKey => ({\n value: titlePrefixes[titlePrefixKey],\n label: I18n.t(titlePrefixKey, { scope: 'title_prefix' }),\n }));\n\n const preferredCommunicationsOptions = Object.keys(preferredCommunications).map(\n preferredCommunicationKey => ({\n value: preferredCommunications[preferredCommunicationKey],\n label: I18n.t(preferredCommunicationKey, {\n scope: 'simple_form.options.person.preferred_communication',\n }),\n }),\n );\n\n const spokenLanguagesOptions = spokenLanguages.map(spokenLanguageKey => ({\n value: spokenLanguageKey,\n label: I18n.t(`languages_list.${spokenLanguageKey}`),\n }));\n\n const findLabelForSelectBox = (options, value) => {\n const selectedOption = options.filter(option => value === option.value)[0];\n if (selectedOption) {\n return selectedOption.label;\n }\n\n return null;\n };\n\n return (\n \n
\n \n {I18n.t('admin.components.travellers.edit.general.information.label.name')}\n
\n {traveller.name}
\n \n
\n \n {I18n.t('admin.components.travellers.edit.general.information.label.dob')}\n
\n \n {traveller.birthday\n ? traveller.birthday\n : I18n.t('admin.components.travellers.edit.general.information.placeholder.no_dob')}\n
\n \n
\n \n {I18n.t(\n 'admin.components.travellers.edit.general.information.label.preferred_communication',\n )}\n
\n \n {traveller.preferredCommunication\n ? traveller.preferredCommunication\n : I18n.t(\n 'admin.components.travellers.edit.general.information.placeholder.no_preferred_communication',\n )}\n
\n {traveller.preferredCommunication && (\n \n {traveller.preferredCommunication === 'email'\n ? I18n.t(\n 'admin.components.travellers.edit.general.information.placeholder.email_preferred',\n )\n : I18n.t(\n 'admin.components.travellers.edit.general.information.placeholder.phone_preferred',\n )}\n
\n )}\n \n
\n \n {I18n.t('admin.components.travellers.edit.general.information.label.personal_id')}\n
\n \n {traveller.personalId\n ? traveller.personalId\n : I18n.t(\n 'admin.components.travellers.edit.general.information.placeholder.no_personal_id',\n )}\n
\n \n {I18n.t(\n 'admin.components.travellers.edit.general.information.placeholder.personal_id_explanation',\n )}\n
\n \n
\n \n {I18n.t('admin.components.travellers.edit.general.information.label.short_code')}\n
\n \n {traveller.shortCode\n ? traveller.shortCode\n : I18n.t(\n 'admin.components.travellers.edit.general.information.placeholder.no_short_code',\n )}\n
\n \n {I18n.t(\n 'admin.components.travellers.edit.general.information.placeholder.short_code_explanation',\n )}\n
\n \n
\n {!layman && (\n \n {I18n.t(\n 'admin.components.travellers.edit.general.information.label.correspondence_language',\n )}\n
\n \n {traveller.correspondenceLanguage\n ? traveller.correspondenceLanguage\n : I18n.t(\n 'admin.components.travellers.edit.general.information.placeholder.no_correspondence_language',\n )}\n
\n \n
\n )}\n \n {I18n.t('admin.components.travellers.edit.general.information.label.spoken_language')}\n
\n {(traveller.spokenLanguages && traveller.spokenLanguages.length > 0) ?\n traveller.spokenLanguages.map(language => (\n \n {language}\n
\n )) : \n \n {I18n.t('admin.components.travellers.edit.general.information.placeholder.no_spoken_language')}\n
\n }\n \n
\n );\n};\n\nGeneralInformationForm.defaultProps = {\n salutation: null,\n titlePrefix: null,\n firstName: '',\n middleName: '',\n lastName: '',\n nickName: '',\n dateOfBirth: null,\n preferredCommunication: null,\n personalId: '',\n shortCode: '',\n correspondenceLanguage: null,\n layman: false,\n};\n\nGeneralInformationForm.propTypes = {\n salutations: PropTypes.shape({\n mr: PropTypes.number,\n mrs: PropTypes.number,\n ms: PropTypes.number,\n }).isRequired,\n titlePrefixes: PropTypes.shape({\n dr: PropTypes.number,\n dr_prof: PropTypes.number,\n prof: PropTypes.number,\n }).isRequired,\n preferredCommunications: PropTypes.shape({\n email: PropTypes.number,\n phone: PropTypes.number,\n }).isRequired,\n spokenLanguages: PropTypes.arrayOf(PropTypes.string).isRequired,\n correspondenceLanguageOptions: PropTypes.arrayOf(\n PropTypes.shape({\n label: PropTypes.string,\n value: PropTypes.string,\n }),\n ).isRequired,\n salutation: PropTypes.number,\n setSalutation: PropTypes.func.isRequired,\n titlePrefix: PropTypes.number,\n setTitlePrefix: PropTypes.func.isRequired,\n firstName: PropTypes.string,\n setFirstName: PropTypes.func.isRequired,\n middleName: PropTypes.string,\n setMiddleName: PropTypes.func.isRequired,\n lastName: PropTypes.string,\n setLastName: PropTypes.func.isRequired,\n nickName: PropTypes.string,\n setNickName: PropTypes.func.isRequired,\n dateOfBirth: PropTypes.string,\n setDateOfBirth: PropTypes.func.isRequired,\n preferredCommunication: PropTypes.number,\n setPreferredCommunication: PropTypes.func.isRequired,\n personalId: PropTypes.string,\n setPersonalId: PropTypes.func.isRequired,\n shortCode: PropTypes.string,\n setShortCode: PropTypes.func.isRequired,\n correspondenceLanguage: PropTypes.string,\n setCorrespondenceLanguage: PropTypes.func.isRequired,\n spokenLanguage: PropTypes.arrayOf(PropTypes.string).isRequired,\n setSpokenLanguage: PropTypes.func.isRequired,\n error: PropTypes.shape({\n firstName: PropTypes.string,\n lastName: PropTypes.string,\n shortCode: PropTypes.string,\n personalId: PropTypes.string,\n correspondenceLanguage: PropTypes.string,\n }).isRequired,\n layman: PropTypes.bool,\n};\n\nexport default GeneralInformationForm;\n","import React, { useState, useEffect, Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport Icon from '@wtag/rcl-icon';\nimport IconButton from '@wtag/rcl-icon-button';\nimport ContentLoaderPlaceholder from '@wtag/rcl-content-loader-placeholder';\n\nimport httpClient from 'agentHTTPClient';\nimport routes from 'agentRoutes';\n\nimport GeneralInformation from './GeneralInformation';\nimport GeneralInformationForm from './GeneralInformationForm';\n\nimport '../styles.scss';\n\nconst GeneralSection = props => {\n const {\n traveller,\n salutations,\n titlePrefixes,\n preferredCommunications,\n spokenLanguages,\n correspondenceLanguageOptions,\n fetchTraveller,\n layman,\n } = props;\n\n const [editing, setEditing] = useState(false);\n const [error, setError] = useState({});\n\n const [salutation, setSalutation] = useState(null);\n const [titlePrefix, setTitlePrefix] = useState(null);\n const [firstName, setFirstName] = useState('');\n const [middleName, setMiddleName] = useState('');\n const [lastName, setLastName] = useState('');\n const [nickName, setNickName] = useState('');\n const [dateOfBirth, setDateOfBirth] = useState(null);\n const [preferredCommunication, setPreferredCommunication] = useState(null);\n const [personalId, setPersonalId] = useState('');\n const [shortCode, setShortCode] = useState('');\n const [correspondenceLanguage, setCorrespondenceLanguage] = useState(null);\n const [spokenLanguage, setSpokenLanguage] = useState([]);\n const [isLoading, setIsLoading] = useState(true);\n\n const saveTravellerUrl = layman\n ? routes.public.people.update()\n : routes.admin.people.update({ personId: traveller.id });\n\n const saveTraveller = async () => {\n const travellerParams = {\n salutation,\n title_prefix: titlePrefix,\n first_name: firstName,\n middle_name: middleName,\n last_name: lastName,\n nickname: nickName,\n birthday: dateOfBirth,\n preferred_communication: preferredCommunication,\n personal_id: personalId,\n short_code: shortCode,\n correspondence_language: correspondenceLanguage,\n spoken_languages: spokenLanguage && spokenLanguage.map(value => value.toLowerCase()),\n };\n\n const { data } = await httpClient.patch(saveTravellerUrl, {\n person: travellerParams,\n });\n if (data.error === null) {\n setIsLoading(true);\n\n if (data.redirectUrl) {\n window.location.assign(data.redirectUrl);\n } else {\n await fetchTraveller();\n setEditing(false);\n }\n }\n\n setIsLoading(false);\n };\n\n const onSaveTraveller = () =>\n saveTraveller().catch(({ response }) => {\n if (response.status === 422) {\n setError(response.data.error);\n }\n });\n\n useEffect(() => {\n setSalutation(salutations[traveller.salutation]);\n setTitlePrefix(titlePrefixes[traveller.titlePrefix]);\n setFirstName(traveller.firstName);\n setMiddleName(traveller.middleName);\n setLastName(traveller.lastName);\n setNickName(traveller.nickname);\n setDateOfBirth(traveller.birthday);\n setPreferredCommunication(preferredCommunications[traveller.preferredCommunication]);\n setPersonalId(traveller.personalId);\n setShortCode(traveller.shortCode);\n const currentCorLang = correspondenceLanguageOptions.filter(\n corLan => corLan.label === traveller.correspondenceLanguage,\n );\n if (currentCorLang.length > 0) {\n setCorrespondenceLanguage(currentCorLang[0].value);\n }\n setSpokenLanguage(traveller.spokenLanguages);\n\n if (traveller && traveller.id) {\n setIsLoading(false);\n }\n }, [traveller]);\n\n return (\n \n
\n \n setSalutation(selectedOption ? selectedOption.value : '')}\n />\n
\n \n setTitlePrefix(selectedOption && selectedOption.value)}\n />\n
\n \n setFirstName(value)}\n />\n
\n \n setMiddleName(value)}\n />\n
\n \n setLastName(value)}\n />\n
\n \n setNickName(value)}\n />\n
\n \n value && setDateOfBirth(moment(value).format('YYYY-MM-DD'))}\n hideNavButtons={false}\n />\n
\n \n \n setPreferredCommunication(selectedOption && selectedOption.value)\n }\n />\n
\n \n setPersonalId(value)}\n />\n\n
\n \n {I18n.t(\n 'admin.components.travellers.edit.general.information.placeholder.personal_id_explanation',\n )}\n
\n \n setShortCode(value)}\n />\n
\n \n {I18n.t(\n 'admin.components.travellers.edit.general.information.placeholder.short_code_explanation',\n )}\n
\n \n \n setCorrespondenceLanguage(selectedOption && selectedOption.value)\n }\n errorMsg={error.correspondenceLanguage}\n />\n
\n {!layman && (\n \n ({\n value: language.toLowerCase(),\n label: language,\n }))\n }\n onChange={selectedOption =>\n setSpokenLanguage(selectedOption && selectedOption.map(status => status.value))\n }\n />\n
\n )}\n \n
\n ) : (\n \n
\n )}\n \n
\n {editing ? (\n \n {I18n.t('admin.components.travellers.edit.general.header')}\n
\n {editing ? (\n \n
\n ) : (\n \n
\n )}\n \n
\n );\n};\n\nCarLoyaltyProgramForm.defaultProps = {\n carError: {},\n program: '',\n setProgram: {},\n};\n\nCarLoyaltyProgramForm.propTypes = {\n carCompanies: PropTypes.arrayOf(PropTypes.shape([])).isRequired,\n program: PropTypes.arrayOf(PropTypes.shape),\n setProgram: PropTypes.func,\n number: PropTypes.string.isRequired,\n setNumber: PropTypes.func.isRequired,\n carError: PropTypes.shape({\n carLoyaltyNumber: PropTypes.string,\n carLoyaltyProgram: PropTypes.string,\n }),\n};\n\nexport default CarLoyaltyProgramForm;\n","import React, { useState, useEffect, Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport httpClient from 'agentHTTPClient';\n\nimport { Link } from '@wtag/react-comp-lib';\nimport Icon from '@wtag/rcl-icon';\nimport IconButton from '@wtag/rcl-icon-button';\nimport Card from '@wtag/rcl-card';\nimport CommentPlaceholder from '../../../Placeholder/CommentPlaceholder';\nimport CarLoyaltyProgramForm from './CarLoyaltyProgramForm';\n\nconst CarLoyaltyProgramCard = props => {\n const { personId, fetchCarLoyaltyPrograms, carCompanies, carLoyaltyProgram, carRoutes } = props;\n\n const [editing, setEditing] = useState(false);\n const [error, setError] = useState({});\n const [number, setNumber] = useState('');\n const [program, setProgram] = useState([]);\n const [isLoading, setIsLoading] = useState(false);\n\n const updateCarLoyaltyProgram = async Id => {\n const carLoyaltyProgramParams = {\n car_loyalty_number: number,\n car_loyalty_program: program,\n person_id: personId,\n };\n\n const { data } = await httpClient.patch(carRoutes.update({ personId, id: Id }), {\n car_loyalty_program: carLoyaltyProgramParams,\n });\n\n if (data.error === null) {\n fetchCarLoyaltyPrograms();\n setEditing(false);\n }\n };\n\n const onUpdateCarLoyaltyProgram = Id => {\n setIsLoading(true);\n updateCarLoyaltyProgram(Id)\n .catch(({ response }) => {\n if (response.status === 422) {\n setError(response.data.error);\n }\n })\n .finally(() => {\n setIsLoading(false);\n });\n };\n\n const deleteCarLoyaltyProgram = async Id => {\n setIsLoading(true);\n const { data } = await httpClient.delete(carRoutes.delete({ personId, id: Id }));\n\n if (data.error === null) {\n fetchCarLoyaltyPrograms();\n setIsLoading(false);\n setEditing(false);\n }\n };\n\n const onDeleteCarLoyaltyProgram = Id =>\n deleteCarLoyaltyProgram(Id).catch(({ response }) => {\n if (response.status === 422) {\n setError(response.data.error);\n }\n });\n\n useEffect(() => {\n setNumber(carLoyaltyProgram.number);\n setProgram(carLoyaltyProgram.program);\n }, [carLoyaltyProgram]);\n\n const renderLoaders = component => {\n if (isLoading) {\n return (\n \n selectedOption && setProgram(selectedOption.value)}\n errorMsg={carError.carLoyaltyProgram}\n required={true}\n isClearable={false}\n />\n
\n \n setNumber(value)}\n required={true}\n />\n
\n \n \n {I18n.t(\n 'admin.components.travellers.edit.loyalty_programs.car_loyalty.update.header',\n )}\n \n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n {I18n.t(carLoyaltyProgram.program, { scope: 'rental_car_agencies' })}\n \n \n {carLoyaltyProgram.number}\n \n
\n \n \n onDeleteCarLoyaltyProgram(carLoyaltyProgram.id)}\n >\n \n \n setEditing(true)}\n >\n \n
\n \n
\n );\n};\n\nHotelLoyaltyProgramForm.defaultProps = {\n hotelError: {},\n program: '',\n setProgram: {},\n};\n\nHotelLoyaltyProgramForm.propTypes = {\n hotelLoyaltyList: PropTypes.arrayOf(PropTypes.shape([])).isRequired,\n program: PropTypes.arrayOf(PropTypes.shape),\n setProgram: PropTypes.func,\n number: PropTypes.string.isRequired,\n setNumber: PropTypes.func.isRequired,\n hotelError: PropTypes.shape({\n hotelGuestNumber: PropTypes.string,\n hotelGuestProgram: PropTypes.string,\n }),\n};\n\nexport default HotelLoyaltyProgramForm;\n","import React, { useState, useEffect, Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport httpClient from 'agentHTTPClient';\n\nimport { Link } from '@wtag/react-comp-lib';\nimport Icon from '@wtag/rcl-icon';\nimport IconButton from '@wtag/rcl-icon-button';\nimport Card from '@wtag/rcl-card';\nimport CommentPlaceholder from '../../../Placeholder/CommentPlaceholder';\nimport HotelLoyaltyProgramForm from './HotelLoyaltyProgramForm';\n\nconst HotelLoyaltyProgramCard = props => {\n const {\n personId,\n fetchHotelLoyaltyPrograms,\n hotelLoyaltyList,\n hotelLoyaltyProgram,\n hotelRoutes,\n } = props;\n\n const [editing, setEditing] = useState(false);\n const [error, setError] = useState({});\n const [number, setNumber] = useState('');\n const [program, setProgram] = useState([]);\n const [isLoading, setIsLoading] = useState(false);\n\n const updateHotelLoyaltyProgram = async Id => {\n const hotelLoyaltyProgramParams = {\n hotel_guest_number: number,\n hotel_guest_program: program,\n person_id: personId,\n };\n\n const { data } = await httpClient.patch(hotelRoutes.update({ personId, id: Id }), {\n hotel_loyalty_program: hotelLoyaltyProgramParams,\n });\n\n if (data.error === null) {\n fetchHotelLoyaltyPrograms();\n setEditing(false);\n }\n };\n\n const onUpdateHotelLoyaltyProgram = Id => {\n setIsLoading(true);\n updateHotelLoyaltyProgram(Id)\n .catch(({ response }) => {\n if (response.status === 422) {\n setError(response.data.error);\n }\n })\n .finally(() => {\n setIsLoading(false);\n });\n };\n\n const deleteHotelLoyaltyProgram = async Id => {\n setIsLoading(true);\n const { data } = await httpClient.delete(hotelRoutes.delete({ personId, id: Id }));\n\n if (data.error === null) {\n fetchHotelLoyaltyPrograms();\n setEditing(false);\n setIsLoading(false);\n }\n };\n\n const onDeleteHotelLoyaltyProgram = Id =>\n deleteHotelLoyaltyProgram(Id).catch(({ response }) => {\n if (response.status === 422) {\n setError(response.data.error);\n }\n });\n\n useEffect(() => {\n setNumber(hotelLoyaltyProgram.number);\n setProgram(hotelLoyaltyProgram.program);\n }, [hotelLoyaltyProgram]);\n\n const renderLoaders = component => {\n if (isLoading) {\n return (\n \n selectedOption && setProgram(selectedOption.value)}\n errorMsg={hotelError.hotelGuestProgram}\n required={true}\n isClearable={false}\n />\n
\n \n setNumber(value)}\n required={true}\n />\n
\n \n \n {I18n.t(\n 'admin.components.travellers.edit.loyalty_programs.hotel_loyalty.update.header',\n )}\n \n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n {I18n.t(hotelLoyaltyProgram.program, {\n scope:\n 'simple_form.options.person.hotel_loyalty_programs.hotel_guest_program',\n })}\n \n \n {hotelLoyaltyProgram.number}\n \n
\n \n \n onDeleteHotelLoyaltyProgram(hotelLoyaltyProgram.id)}\n >\n \n \n setEditing(true)}\n >\n \n
\n \n
\n \n
\n \n {I18n.t('admin.components.travellers.edit.loyalty_programs.hotel_loyalty.title')}\n
\n \n
\n \n
\n \n
\n\n \n
\n \n {hotelLoyaltyPrograms && hotelLoyaltyPrograms.length > 0\n ? hotelLoyaltyPrograms.map(loyaltyProgram => (\n
\n \n
\n \n
\n \n {I18n.t('admin.components.travellers.edit.loyalty_programs.car_loyalty.title')}\n
\n \n
\n \n
\n \n
\n\n \n
\n \n {carLoyaltyPrograms && carLoyaltyPrograms.length > 0\n ? carLoyaltyPrograms.map(loyaltyProgram => (\n
\n \n \n {headerName}\n \n
\n \n
\n \n
\n \n {headerText}\n
\n \n
\n \n {placeholder}\n
\n \n setIsModalOpen(true)}\n onConfirmationModalClose={() => setIsModalOpen(false)}\n />\n \n {isLoading ? (\n \n \n \n {errors.approvalRequestReminderDays}\n \n \n )}\n \n )}\n \n
\n );\n};\n\nApprovalRequestReminder.defaultProps = {\n traveller: {},\n};\n\nApprovalRequestReminder.propTypes = {\n traveller: PropTypes.shape({\n id: PropTypes.string.isRequired,\n approvalRequestReminderActive: PropTypes.bool.isRequired,\n approvalRequestReminderDays: PropTypes.arrayOf(PropTypes.number).isRequired,\n approvalRequestReminderTime: PropTypes.string.isRequired,\n }),\n saveReminder: PropTypes.func.isRequired,\n isLoading: PropTypes.bool.isRequired,\n};\n\nexport default ApprovalRequestReminder;\n","import React, { useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport Card from '@wtag/rcl-card';\nimport { Spinner } from '@wtag/react-comp-lib';\nimport ConfirmationModal from 'sharedWebpack/ConfirmationModal';\nimport ExpiryFormHeader from '../ExpiryFormHeader';\n\nconst DocumentExpiryReminder = props => {\n const { traveller, saveReminder, isLoading } = props;\n const [documentExpiryReminderEnabled, setDocumentExpiryReminderEnabled] = useState(false);\n const [isModalOpen, setIsModalOpen] = useState(false);\n\n const onUpdateApprovalRequestReminder = async () => {\n const params = {\n document_expiry_reminder_enabled: documentExpiryReminderEnabled,\n };\n\n await saveReminder(params);\n };\n\n const onEnableReminder = () => {\n setIsModalOpen(documentExpiryReminderEnabled);\n setDocumentExpiryReminderEnabled(prevState => !prevState);\n };\n\n const onDisablingReminder = () => {\n setDocumentExpiryReminderEnabled(false);\n setIsModalOpen(false);\n };\n\n const setInitialValue = () => {\n setDocumentExpiryReminderEnabled(traveller.documentExpiryReminderEnabled);\n };\n\n useEffect(() => {\n if (traveller.id) {\n setInitialValue();\n }\n }, [traveller]);\n\n return (\n \n
\n ) : (\n \n
\n \n {I18n.t('components.approval_request_reminder.remind_me_on')}\n
\n\n {monthOptions.map((month, index) => (\n
\n \n day === index + 1)}\n onChange={event => onChangeDay(event.target.checked, index + 1)}\n />\n
\n ))}\n \n
\n \n
\n \n setIsModalOpen(true)}\n onConfirmationModalClose={() => setIsModalOpen(false)}\n />\n \n {isLoading ? (\n \n
\n );\n};\n\nDocumentExpiryReminder.defaultProps = {\n traveller: {},\n};\n\nDocumentExpiryReminder.propTypes = {\n traveller: PropTypes.shape({\n id: PropTypes.string.isRequired,\n documentExpiryReminderEnabled: PropTypes.bool.isRequired,\n }),\n saveReminder: PropTypes.func.isRequired,\n isLoading: PropTypes.bool.isRequired,\n};\n\nexport default DocumentExpiryReminder;\n","import React, { Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport NotificationEscalation from '../../../NotificationEscalation';\nimport ApprovalRequestReminder from './ApprovalRequestReminder';\nimport DocumentExpiryReminder from './DocumentExpiryReminder';\n\nimport './styles.scss';\n\nconst NotificationPreference = props => {\n const { onSaveTraveller, traveller } = props;\n const isLoading = !(Object.keys(traveller).length > 0);\n return (\n \n
\n ) : (\n \n
\n );\n};\n\nPaymentsAndPreferencesSection.defaultProps = {\n preferredPayment: null,\n layman: false,\n};\n\nPaymentsAndPreferencesSection.propTypes = {\n personId: PropTypes.number.isRequired,\n fetchTraveller: PropTypes.func.isRequired,\n preferredPayment: PropTypes.string,\n paymentTypes: PropTypes.shape({\n key: PropTypes.number,\n value: PropTypes.string,\n }).isRequired,\n layman: PropTypes.bool,\n};\n\nexport default PaymentsAndPreferencesSection;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport SelectBox from '@wtag/rcl-select-box';\n\nconst FlightPreferencesForm = props => {\n const {\n preferredCabin,\n setPreferredCabin,\n preferredSeating,\n setPreferredSeating,\n meal,\n setMeal,\n error,\n mealTypes,\n seatTypes,\n cabinTypes,\n layman,\n } = props;\n\n const cabinOptions = Object.keys(cabinTypes).map(cabinTypeKey => ({\n value: cabinTypeKey,\n label: I18n.t(cabinTypeKey, { scope: 'cabin_classes' }),\n }));\n\n const seatOptions = Object.keys(seatTypes).map(seatTypeKey => ({\n value: seatTypeKey,\n label: I18n.t(seatTypeKey, { scope: 'simple_form.options.person.preferred_seating' }),\n }));\n\n const mealOptions = Object.keys(mealTypes).map(mealTypeKey => ({\n value: mealTypeKey,\n label: I18n.t(mealTypeKey, { scope: 'simple_form.options.person.meal' }),\n }));\n\n const findSelectBoxContent = (options, value) => {\n const selectedOption = options.filter(option => value === option.value)[0];\n if (selectedOption) {\n return {\n value: selectedOption.value,\n label: selectedOption.label,\n };\n }\n\n return null;\n };\n\n return (\n \n
\n \n \n {I18n.t('admin.customers.form.payment_preferences')}\n \n {editing ? (\n \n
\n \n {editing ? (\n
\n \n setPayment(selectedOption && selectedOption.value)}\n errorMsg={error.preferredPayment}\n />\n
\n ) : (\n \n
\n )}\n \n {I18n.t('simple_form.labels.person.preferred_payment')}\n
\n \n {preferredPayment\n ? I18n.t(preferredPayment, {\n scope: 'simple_form.options.person.preferred_payment',\n })\n : I18n.t('admin.components.travellers.edit.payment.no_payment_info')}\n
\n \n {!layman && (\n
\n );\n};\n\nFlightPreferencesForm.defaultProps = {\n layman: false,\n preferredCabin: '',\n preferredSeating: '',\n meal: '',\n error: {},\n};\n\nFlightPreferencesForm.propTypes = {\n layman: PropTypes.bool,\n mealTypes: PropTypes.shape({}).isRequired,\n cabinTypes: PropTypes.shape({}).isRequired,\n seatTypes: PropTypes.shape({}).isRequired,\n preferredCabin: PropTypes.number,\n setPreferredCabin: PropTypes.func.isRequired,\n preferredSeating: PropTypes.number,\n setPreferredSeating: PropTypes.func.isRequired,\n meal: PropTypes.string,\n setMeal: PropTypes.func.isRequired,\n error: PropTypes.shape({\n preferredCabin: PropTypes.string,\n preferredSeating: PropTypes.string,\n meal: PropTypes.string,\n }),\n};\n\nexport default FlightPreferencesForm;\n","import React, { useState, useEffect, Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport IconButton from '@wtag/rcl-icon-button';\nimport Icon from '@wtag/rcl-icon';\nimport httpClient from 'agentHTTPClient';\nimport routes from 'agentRoutes';\nimport ClassNames from 'classnames';\n\nimport FlightPreferencesForm from './FlightPreferencesForm';\n\nconst FlightPreferencesInformation = props => {\n const {\n personId,\n fetchTraveller,\n flightPreferences,\n cabinTypes,\n seatTypes,\n mealTypes,\n layman,\n } = props;\n\n const [editing, setEditing] = useState(false);\n const [error, setError] = useState({});\n const [preferredCabin, setPreferredCabin] = useState(null);\n const [preferredSeating, setPreferredSeating] = useState(null);\n const [meal, setMeal] = useState(null);\n\n const saveTravellerUrl = layman\n ? routes.public.people.update()\n : routes.admin.people.update({ personId });\n\n const updateFlightPreferences = async () => {\n const flightPreferencesParams = {\n preferred_cabin: preferredCabin,\n preferred_seating: preferredSeating,\n meal,\n };\n\n const { data } = await httpClient.patch(saveTravellerUrl, {\n person: flightPreferencesParams,\n });\n\n if (data.error === null) {\n fetchTraveller();\n setEditing(false);\n }\n };\n\n const onUpdateFlightPreferences = () =>\n updateFlightPreferences().catch(({ response }) => {\n if (response.status === 422) {\n setError(response.data.error);\n }\n });\n\n useEffect(() => {\n setPreferredCabin(flightPreferences.preferredCabin);\n setPreferredSeating(flightPreferences.preferredSeating);\n setMeal(flightPreferences.meal);\n }, [flightPreferences]);\n\n return (\n \n setPreferredCabin(selectedOption && selectedOption.value)}\n errorMsg={error.preferredCabin}\n />\n
\n )}\n \n setPreferredSeating(selectedOption && selectedOption.value)}\n errorMsg={error.preferredSeating}\n />\n
\n \n setMeal(selectedOption && selectedOption.value)}\n errorMsg={error.meal}\n />\n
\n \n
\n )}\n \n \n
\n {editing ? (\n \n {I18n.t('admin.components.travellers.overview.booking_preference.title.flight')}\n
\n {editing ? (\n \n
\n ) : (\n \n
\n )}\n \n {!layman && (\n \n
\n \n
\n )}\n \n {I18n.t('simple_form.labels.person.preferred_cabin')}\n
\n \n {flightPreferences.preferredCabin\n ? I18n.t(flightPreferences.preferredCabin, { scope: 'cabin_classes' })\n : I18n.t(\n 'admin.components.travellers.overview.booking_preference.not_selected.preferred_cabin',\n )}\n
\n \n {I18n.t('simple_form.labels.person.preferred_seating')}\n
\n \n {flightPreferences.preferredSeating\n ? I18n.t(flightPreferences.preferredSeating, {\n scope: 'simple_form.options.person.preferred_seating',\n })\n : I18n.t(\n 'admin.components.travellers.overview.booking_preference.not_selected.preferred_seating',\n )}\n
\n \n
\n \n {I18n.t('simple_form.labels.person.meal')}\n
\n \n {flightPreferences.meal\n ? I18n.t(flightPreferences.meal, {\n scope: 'simple_form.options.person.meal',\n })\n : I18n.t(\n 'admin.components.travellers.overview.booking_preference.not_selected.meal',\n )}\n
\n \n
\n )}\n \n
\n \n {I18n.t('admin.components.travellers.overview.booking_preference.title.hotel')}\n
\n {editing ? (\n \n
\n ) : (\n \n
\n )}\n \n {editing ? (\n
\n \n \n setSmokingType(selectedOption && selectedOption.value)\n }\n errorMsg={error.smokingType}\n />\n
\n ) : (\n \n
\n )}\n \n {I18n.t('simple_form.labels.person.smoking_type')}\n
\n \n {hotelPreferences.smokingType\n ? I18n.t(hotelPreferences.smokingType, {\n scope: 'simple_form.options.person.smoking_type',\n })\n : I18n.t(\n 'admin.components.travellers.overview.booking_preference.not_selected.smoking_type',\n )}\n
\n \n
\n );\n};\n\nCarPreferencesForm.defaultProps = {\n preferredCarTypes: [],\n preferredCarCategories: [],\n preferredCarDrives: [],\n error: {},\n};\n\nCarPreferencesForm.propTypes = {\n preferredCarTypes: PropTypes.arrayOf(PropTypes.string),\n setPreferredCarTypes: PropTypes.func.isRequired,\n preferredCarCategories: PropTypes.arrayOf(PropTypes.string),\n setPreferredCarCategories: PropTypes.func.isRequired,\n preferredCarDrives: PropTypes.arrayOf(PropTypes.string),\n setPreferredCarDrives: PropTypes.func.isRequired,\n carTypes: PropTypes.arrayOf(PropTypes.string).isRequired,\n carDrives: PropTypes.arrayOf(PropTypes.string).isRequired,\n carCategories: PropTypes.arrayOf(PropTypes.string).isRequired,\n error: PropTypes.shape({\n preferredCarTypes: PropTypes.string,\n preferredCarDrives: PropTypes.string,\n preferredCarCategories: PropTypes.string,\n }),\n};\n\nexport default CarPreferencesForm;\n","import React, { useState, useEffect, Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport IconButton from '@wtag/rcl-icon-button';\nimport Icon from '@wtag/rcl-icon';\nimport httpClient from 'agentHTTPClient';\nimport routes from 'agentRoutes';\n\nimport CarPreferencesForm from './CarPreferencesForm';\n\nconst CarPreferencesInformation = props => {\n const {\n personId,\n fetchTraveller,\n carPreferences,\n carTypes,\n carDrives,\n carCategories,\n layman,\n } = props;\n\n const [editing, setEditing] = useState(false);\n const [error, setError] = useState({});\n const [preferredCarTypes, setPreferredCarTypes] = useState([]);\n const [preferredCarCategories, setPreferredCarCategories] = useState([]);\n const [preferredCarDrives, setPreferredCarDrives] = useState([]);\n\n const commaForMultipleElements = index => (index ? ', ' : '');\n\n const saveTravellerUrl = layman\n ? routes.public.people.update()\n : routes.admin.people.update({ personId });\n\n const updateCarPreferences = async () => {\n const carPreferencesParams = {\n preferred_car_types: preferredCarTypes,\n preferred_car_categories: preferredCarCategories,\n preferred_car_drives: preferredCarDrives,\n };\n\n const { data } = await httpClient.patch(saveTravellerUrl, {\n person: carPreferencesParams,\n });\n\n if (data.error === null) {\n fetchTraveller();\n setEditing(false);\n }\n };\n\n const onUpdateCarPreferences = () =>\n updateCarPreferences().catch(({ response }) => {\n if (response.status === 422) {\n setError(response.data.error);\n }\n });\n\n useEffect(() => {\n setPreferredCarTypes(carPreferences.preferredCarTypes);\n setPreferredCarCategories(carPreferences.preferredCarCategories);\n setPreferredCarDrives(carPreferences.preferredCarDrives);\n }, [carPreferences]);\n\n return (\n \n {\n if (selectedOption && selectedOption.length) {\n setPreferredCarTypes(selectedOption && selectedOption.map(option => option.value));\n } else {\n setPreferredCarTypes([]);\n }\n }}\n isMulti={true}\n errorMsg={error.preferredCarTypes}\n />\n
\n \n {\n if (selectedOption && selectedOption.length) {\n setPreferredCarCategories(\n selectedOption && selectedOption.map(option => option.value),\n );\n } else {\n setPreferredCarCategories([]);\n }\n }}\n isMulti={true}\n errorMsg={error.preferredCarCategories}\n />\n
\n \n {\n if (selectedOption && selectedOption.length) {\n setPreferredCarDrives(selectedOption && selectedOption.map(option => option.value));\n } else {\n setPreferredCarDrives([]);\n }\n }}\n isMulti={true}\n errorMsg={error.preferredCarDrives}\n />\n
\n \n
\n )}\n \n
\n {editing ? (\n \n {I18n.t('admin.components.travellers.overview.booking_preference.title.car')}\n
\n {editing ? (\n \n
\n ) : (\n \n
\n )}\n \n
\n )}\n \n
\n \n {I18n.t('simple_form.labels.person.preferred_car_types')}\n
\n \n {carPreferences.preferredCarTypes.length > 0\n ? preferredCarTypes &&\n preferredCarTypes.map((preferredCarType, index) => (\n \n {commaForMultipleElements(index) +\n I18n.t(preferredCarType, {\n scope: 'simple_form.options.person.preferred_car_types',\n })}\n \n ))\n : I18n.t(\n 'admin.components.travellers.overview.booking_preference.not_selected.preferred_car_types',\n )}\n
\n \n
\n \n {I18n.t('simple_form.labels.person.preferred_car_categories')}\n
\n \n {carPreferences.preferredCarCategories.length > 0\n ? preferredCarCategories &&\n preferredCarCategories.map((preferredCarCategory, index) => (\n \n {commaForMultipleElements(index) +\n I18n.t(preferredCarCategory, {\n scope: 'simple_form.options.person.preferred_car_categories',\n })}\n \n ))\n : I18n.t(\n 'admin.components.travellers.overview.booking_preference.not_selected.preferred_car_categories',\n )}\n
\n \n
\n \n {I18n.t('simple_form.labels.person.preferred_car_drives')}\n
\n \n {carPreferences.preferredCarDrives.length > 0\n ? preferredCarDrives &&\n preferredCarDrives.map((preferredCarDrive, index) => (\n \n {commaForMultipleElements(index) +\n I18n.t(preferredCarDrive, {\n scope: 'simple_form.options.person.preferred_car_drives',\n })}\n \n ))\n : I18n.t(\n 'admin.components.travellers.overview.booking_preference.not_selected.preferred_car_drives',\n )}\n
\n \n
\n );\n};\n\nTravelPreferencesSection.defaultProps = {\n layman: false,\n bookingPreferences: {\n flight: {\n meal: '',\n preferredCabin: '',\n preferredSeating: '',\n },\n hotel: {\n smokingType: '',\n },\n car: {\n preferredCarTypes: [],\n preferredCarCategories: [],\n preferredCarDrives: [],\n },\n },\n};\n\nTravelPreferencesSection.propTypes = {\n layman: PropTypes.bool,\n personId: PropTypes.number.isRequired,\n fetchTraveller: PropTypes.func.isRequired,\n mealTypes: PropTypes.shape({}).isRequired,\n cabinTypes: PropTypes.shape({}).isRequired,\n seatTypes: PropTypes.shape({}).isRequired,\n smokingTypes: PropTypes.shape({}).isRequired,\n carTypes: PropTypes.arrayOf(PropTypes.string).isRequired,\n carDrives: PropTypes.arrayOf(PropTypes.string).isRequired,\n carCategories: PropTypes.arrayOf(PropTypes.string).isRequired,\n bookingPreferences: PropTypes.shape({\n flight: PropTypes.shape({\n meal: PropTypes.string,\n preferredCabin: PropTypes.string,\n preferredSeating: PropTypes.string,\n }),\n hotel: PropTypes.shape({\n smokingType: PropTypes.string,\n }),\n car: PropTypes.shape({\n preferredCarTypes: PropTypes.arrayOf(PropTypes.string),\n preferredCarCategories: PropTypes.arrayOf(PropTypes.string),\n preferredCarDrives: PropTypes.arrayOf(PropTypes.string),\n preferredCarAirConditioning: PropTypes.string,\n }),\n }),\n};\n\nexport default TravelPreferencesSection;\n","import React, { useMemo } from 'react';\nimport PropTypes from 'prop-types';\nimport SelectBox from '@wtag/rcl-select-box';\nimport Input from '@wtag/rcl-input';\nimport { CheckBox } from '@wtag/react-comp-lib';\nimport moment from 'moment';\nimport ChooseFile from 'sharedWebpack/ChooseFile';\nimport DatePickerWithFocusedStateWrapper from 'sharedWebpack/DatePickerWithFocusedStateWrapper';\n\nconst IdentificationInformationForm = props => {\n const {\n documentId,\n documentTypes,\n countryOptions,\n nationalityOptions,\n type,\n country,\n nationality,\n number,\n validity,\n primary,\n primaryCheckDisabled,\n setType,\n setCountry,\n setNationality,\n setNumber,\n setValidity,\n setPrimary,\n identificationFileName,\n setIdentificationFileName,\n identificationFileType,\n setIdentificationFileType,\n identificationFileUploadPreviewUrl,\n setIdentificationFileUploadPreviewUrl,\n setIdentificationFile,\n setError,\n error,\n } = props;\n\n const typesWithRequiredValidity = ['passport', 'permanent_resident_card'];\n\n const idForCheckbox = useMemo(() => `checkbox-${documentId || new Date().toISOString()}`, [\n documentId,\n ]);\n const supportedFileTypes = /(image|application)\\/(png|jpg|jpeg|gif|webp|pdf)/i;\n const documentTypeOptions = Object.keys(documentTypes).map(documentTypeKey => ({\n value: documentTypeKey,\n label: I18n.t(documentTypeKey, {\n scope: 'simple_form.options.person.identification_documents.document_type',\n }),\n }));\n const isValidityRequiredForType = typesWithRequiredValidity.includes(type);\n\n const findSelectBoxContent = (options, value) => {\n const selectedOption = options.filter(option => value === option.value)[0];\n if (selectedOption) {\n return {\n value: selectedOption.value,\n label: selectedOption.label,\n };\n }\n return null;\n };\n\n const handleIdentificationDocumentType = selectedOption => {\n setError({ identificationDocumentsFile: '' });\n setType(selectedOption ? selectedOption.value : '');\n };\n\n const handleSelectedFileStates = selectedFile => {\n setIdentificationFileType(selectedFile.type);\n setIdentificationFileName(selectedFile.name);\n setIdentificationFile(selectedFile);\n setIdentificationFileUploadPreviewUrl(URL.createObjectURL(selectedFile));\n };\n\n const clearSelectedFileStates = () => {\n setIdentificationFileName('');\n setIdentificationFileType('');\n setIdentificationFile(null);\n setIdentificationFileUploadPreviewUrl(null);\n };\n\n const selectFile = selectedFile => {\n if (selectedFile) {\n if (!selectedFile.type.match(supportedFileTypes)) {\n setError({\n identificationDocumentsFile: I18n.t('admin.identification_document.file_type_error_log'),\n });\n clearSelectedFileStates();\n } else {\n setError({ identificationDocumentsFile: '' });\n handleSelectedFileStates(selectedFile);\n }\n }\n };\n\n const removeFile = () => {\n setError({ identificationDocumentsFile: '' });\n clearSelectedFileStates();\n };\n\n return (\n \n {documentId && (\n
\n );\n};\n\nIdentificationInformationForm.defaultProps = {\n error: {},\n identificationFileName: null,\n identificationFileType: '',\n identificationFileUploadPreviewUrl: '',\n documentId: null,\n};\n\nIdentificationInformationForm.propTypes = {\n documentId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n documentTypes: PropTypes.shape({\n key: PropTypes.number,\n value: PropTypes.string,\n }).isRequired,\n countryOptions: PropTypes.arrayOf(\n PropTypes.shape({\n name: PropTypes.string,\n value: PropTypes.string,\n }),\n ).isRequired,\n nationalityOptions: PropTypes.arrayOf(\n PropTypes.shape({\n name: PropTypes.string,\n value: PropTypes.string,\n }),\n ).isRequired,\n nationality: PropTypes.string.isRequired,\n type: PropTypes.string.isRequired,\n number: PropTypes.string.isRequired,\n country: PropTypes.string.isRequired,\n validity: PropTypes.string.isRequired,\n primary: PropTypes.bool.isRequired,\n primaryCheckDisabled: PropTypes.bool.isRequired,\n setType: PropTypes.func.isRequired,\n setCountry: PropTypes.func.isRequired,\n setNationality: PropTypes.func.isRequired,\n setNumber: PropTypes.func.isRequired,\n setValidity: PropTypes.func.isRequired,\n setPrimary: PropTypes.func.isRequired,\n identificationFileUploadPreviewUrl: PropTypes.string,\n setIdentificationFileUploadPreviewUrl: PropTypes.func.isRequired,\n identificationFileName: PropTypes.string,\n setIdentificationFileName: PropTypes.func.isRequired,\n identificationFileType: PropTypes.string,\n setIdentificationFileType: PropTypes.func.isRequired,\n setIdentificationFile: PropTypes.func.isRequired,\n error: PropTypes.shape({\n documentType: PropTypes.string,\n country: PropTypes.string,\n nationality: PropTypes.string,\n number: PropTypes.string,\n validity: PropTypes.string,\n identificationDocumentsFile: PropTypes.string,\n }),\n setError: PropTypes.func.isRequired,\n};\n\nexport default IdentificationInformationForm;\n","import React, { useState, useEffect, Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport httpClient from 'agentHTTPClient';\nimport routes from 'agentRoutes';\n\nimport ClassNames from 'classnames';\nimport Icon from '@wtag/rcl-icon';\nimport IconButton from '@wtag/rcl-icon-button';\nimport Button from '@wtag/rcl-button';\nimport Card from '@wtag/rcl-card';\nimport { Text } from '@wtag/rcl-typography';\nimport ConfirmationModal from 'sharedWebpack/ConfirmationModal';\nimport { EmphasisTag, Link, DateTime } from '@wtag/react-comp-lib';\nimport LazyLoad from 'react-lazyload';\nimport Modal from 'sharedWebpack/Modal';\n\nimport IdentificationInformationForm from './IdentificationInformationForm';\n\nconst IdentificationInformation = ({\n IDdocument,\n personId,\n fetchIdentificationDocuments,\n documentTypes,\n countryOptions,\n nationalityOptions,\n documentId,\n layman,\n singleIdentificationDocumentPresent,\n}) => {\n const [isEditing, setIsEditing] = useState(false);\n const [error, setError] = useState({});\n\n const [type, setType] = useState(null);\n const [country, setCountry] = useState(null);\n const [nationality, setNationality] = useState(null);\n const [number, setNumber] = useState('');\n const [validity, setValidity] = useState(null);\n const [primary, setPrimary] = useState(false);\n const [identificationFileName, setIdentificationFileName] = useState('');\n const [identificationFileType, setIdentificationFileType] = useState('');\n const [identificationFile, setIdentificationFile] = useState(null);\n const [identificationFileUploadPreviewUrl, setIdentificationFileUploadPreviewUrl] = useState(\n null,\n );\n const [viewImageModal, setViewImageModal] = useState(false);\n const [isShowConfirmation, setIsShowConfirmation] = useState(false);\n\n const toggleShowConfirmation = () => {\n setIsShowConfirmation(prev => !prev);\n };\n\n const updateIdentification = async identificationParams => {\n const updateIdentificationUrl = layman\n ? routes.public.identificationDocuments.update({ documentId })\n : routes.admin.identificationDocuments.update({ documentId, person_id: personId });\n\n const { data } = await httpClient.patch(updateIdentificationUrl, identificationParams);\n\n if (data.error === null) {\n fetchIdentificationDocuments();\n }\n };\n\n const onUpdateIdentification = async () => {\n const formData = new FormData();\n\n if (identificationFile) {\n formData.append('identification_document[file]', identificationFile);\n } else if (!identificationFileName) {\n formData.append('identification_document[remove_file]', true);\n }\n\n formData.append('identification_document[document_type]', type);\n formData.append('identification_document[country]', country);\n formData.append('identification_document[nationality]', nationality);\n formData.append('identification_document[number]', number);\n formData.append('identification_document[validity]', validity);\n formData.append('identification_document[primary]', primary);\n formData.append('identification_document[person_id]', personId);\n\n updateIdentification(formData)\n .then(() => {\n setIsEditing(false);\n })\n .catch(({ response }) => {\n if (response.status === 422) {\n setError(response.data.error);\n }\n });\n };\n\n const deleteIdentification = async () => {\n setIsEditing(false);\n\n const deleteIdentificationUrl = layman\n ? routes.public.identificationDocuments.delete({ documentId })\n : routes.admin.identificationDocuments.delete({ documentId, person_id: personId });\n\n const { data } = await httpClient.delete(deleteIdentificationUrl);\n\n if (data.error === null) {\n fetchIdentificationDocuments();\n }\n };\n\n const onDeleteIdentification = () => {\n toggleShowConfirmation();\n\n deleteIdentification().catch(({ response }) => {\n if (response.status === 422) {\n setError(response.data.error);\n }\n });\n };\n\n const setIdentificationDocumentValues = IDdocumentValues => {\n setType(IDdocumentValues.type);\n setCountry(IDdocumentValues.countryCode);\n setNationality(IDdocumentValues.nationalityCode);\n setNumber(IDdocumentValues.number);\n setValidity(IDdocumentValues.validity);\n setPrimary(IDdocumentValues.primary);\n setError({});\n setIdentificationFile(null);\n setIdentificationFileName(IDdocumentValues.fileName);\n setIdentificationFileType(IDdocumentValues.mimeType);\n setIdentificationFileUploadPreviewUrl(IDdocumentValues.fileUrl);\n };\n\n const openViewImageModal = () => {\n setViewImageModal(true);\n };\n\n const downloadFileDocument = () => {\n const downloadLink = document.createElement('a');\n downloadLink.href = identificationFileUploadPreviewUrl;\n downloadLink.download = identificationFileUploadPreviewUrl.split('/').pop();\n document.body.appendChild(downloadLink);\n downloadLink.click();\n document.body.removeChild(downloadLink);\n };\n\n useEffect(() => {\n setIdentificationDocumentValues(IDdocument);\n }, [IDdocument]);\n\n const toggleDocumentFileCallback = identificationFileUploadPreviewUrl\n ? openViewImageModal\n : undefined;\n\n const isIdentificationPdfMimeType =\n !!identificationFileType && identificationFileType.includes('pdf');\n\n const getDocumentInformation = doc => (\n \n {I18n.t('admin.identification_document.action.edit')}\n
\n )}\n \n
\n \n
\n \n setCountry(selectedOption ? selectedOption.value : '')}\n errorMsg={error.country}\n required={true}\n />\n
\n \n setNationality(selectedOption ? selectedOption.value : '')}\n errorMsg={error.nationality}\n required={true}\n />\n
\n \n setNumber(value)}\n required={true}\n />\n
\n \n value && setValidity(moment(value).format('YYYY-MM-DD'))}\n error={error.validity}\n hideNavButtons={false}\n />\n
\n \n selectFile(value)}\n removeFile={removeFile}\n showRemoveFileButton={true}\n />\n
\n \n setPrimary(event.target.checked)}\n disabled={primaryCheckDisabled}\n />\n \n {I18n.t('admin.components.travellers.edit.identification_documents.primary_label')}\n \n
\n \n
\n );\n\n const documentImageModalTitle = (\n \n
\n \n
\n \n
\n \n
\n \n {I18n.t('public.people.edit.document_type')}\n
\n \n {I18n.t(doc.type, {\n scope: 'simple_form.options.person.identification_documents.document_type',\n })}\n
\n \n
\n \n {I18n.t('public.people.edit.country')}\n
\n {doc.country}
\n \n
\n \n {I18n.t('public.people.edit.nationality')}\n
\n {doc.nationality}
\n \n
\n \n {I18n.t('public.people.edit.number')}\n
\n {doc.number}
\n \n
\n \n {I18n.t('public.people.edit.validity')}\n
\n \n {doc.validity ? (\n
\n \n \n {I18n.t('admin.identification_document.modal.title')}\n \n
\n );\n\n const documentImageModalContent = (\n \n
\n );\n\n const documentImageModal = (\n \n \n \n
\n \n {\n setIsEditing(false);\n setIdentificationDocumentValues(IDdocument);\n }}\n />\n
\n )}\n \n {IDdocument.showDanger && (\n \n
\n \n )}\n {documentImageModal}\n {getDocumentInformation(IDdocument)}\n \n )}\n\n {isShowConfirmation && (\n \n {I18n.t(IDdocument.type, {\n scope: 'admin.components.travellers.edit.identification_documents.warnings.expired',\n })}\n
\n )}\n\n \n
\n\n {isIdentificationPdfMimeType ? (\n \n \n 
\n \n \n {IDdocument.nationality}\n \n {IDdocument.primary && (\n \n
\n \n \n \n \n \n setIsEditing(true)}\n >\n \n \n \n \n
\n \n \n
\n ) : (\n \n {I18n.t('admin.shared.action.preview_pdf')}\n
\n \n \n {identificationFileUploadPreviewUrl ? (\n \n \n ) : (\n \n
\n )}\n \n
\n \n {I18n.t('admin.shared.action.unable_to_preview_file')}\n
\n \n {country && (\n
\n );\n};\n\nVisaNumberForm.defaultProps = {\n error: {},\n visaFileName: null,\n visaFileType: '',\n visaFileUploadPreviewUrl: '',\n};\n\nVisaNumberForm.propTypes = {\n visaCategories: PropTypes.arrayOf(PropTypes.string).isRequired,\n countryOptions: PropTypes.arrayOf(\n PropTypes.shape({\n name: PropTypes.string,\n value: PropTypes.string,\n }),\n ).isRequired,\n issueDate: PropTypes.string.isRequired,\n category: PropTypes.number.isRequired,\n number: PropTypes.string.isRequired,\n country: PropTypes.string.isRequired,\n expireDate: PropTypes.string.isRequired,\n setCategory: PropTypes.func.isRequired,\n setCountry: PropTypes.func.isRequired,\n setExpireDate: PropTypes.func.isRequired,\n setNumber: PropTypes.func.isRequired,\n setIssueDate: PropTypes.func.isRequired,\n setError: PropTypes.func.isRequired,\n setVisaFileType: PropTypes.func.isRequired,\n setVisaFileUploadPreviewUrl: PropTypes.func.isRequired,\n visaFileName: PropTypes.string,\n visaFileType: PropTypes.string,\n visaFileUploadPreviewUrl: PropTypes.string,\n setVisaFileName: PropTypes.func.isRequired,\n setVisaFile: PropTypes.func.isRequired,\n error: PropTypes.shape({\n country: PropTypes.string,\n category: PropTypes.string,\n expireDate: PropTypes.string,\n number: PropTypes.string,\n issueDate: PropTypes.string,\n visaNumbers: PropTypes.string,\n visaNumbersFile: PropTypes.string,\n }),\n};\n\nexport default VisaNumberForm;\n","import React, { useState, useEffect, Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport httpClient from 'agentHTTPClient';\nimport routes from 'agentRoutes';\n\nimport ClassNames from 'classnames';\nimport { EmphasisTag, Link } from '@wtag/react-comp-lib';\nimport DateTime from 'sharedWebpack/DateTime';\nimport Card from '@wtag/rcl-card';\nimport { Text } from '@wtag/rcl-typography';\nimport Icon from '@wtag/rcl-icon';\nimport IconButton from '@wtag/rcl-icon-button';\nimport Button from '@wtag/rcl-button';\nimport ConfirmationModal from 'sharedWebpack/ConfirmationModal';\nimport LazyLoad from 'react-lazyload';\nimport Modal from 'sharedWebpack/Modal';\n\nimport VisaNumberForm from './VisaNumberForm';\n\nconst VisaNumber = ({\n visaNumber,\n fetchVisaNumbers,\n visaCategories,\n visaNumberID,\n personId,\n countryOptions,\n layman,\n}) => {\n const [isEditing, setIsEditing] = useState(false);\n const [error, setError] = useState({});\n\n const [category, setCategory] = useState(null);\n const [country, setCountry] = useState(null);\n const [issueDate, setIssueDate] = useState(null);\n const [number, setNumber] = useState('');\n const [expireDate, setExpireDate] = useState(null);\n const [visaFile, setVisaFile] = useState(null);\n const [visaFileName, setVisaFileName] = useState('');\n const [visaFileType, setVisaFileType] = useState('');\n const [visaFileDocumentUrl, setVisaFileDocumentUrl] = useState('');\n const [viewImageModal, setViewImageModal] = useState(false);\n const [isShowConfirmation, setIsShowConfirmation] = useState(false);\n\n const toggleShowConfirmation = () => {\n setIsShowConfirmation(prev => !prev);\n };\n\n const updateVisaNumber = async visaParams => {\n const updateVisaNumberUrl = layman\n ? routes.public.visaNumbers.update({ visaNumberID })\n : routes.admin.visaNumbers.update({ visaNumberID, person_id: personId });\n\n const { data } = await httpClient.patch(updateVisaNumberUrl, visaParams);\n\n if (data.error === null) {\n fetchVisaNumbers();\n setIsEditing(false);\n }\n };\n\n const onUpdateVisaNumber = () => {\n const formData = new FormData();\n\n if (visaFile) {\n formData.append('visa_number[file]', visaFile);\n } else if (!visaFileName) {\n formData.append('visa_number[remove_file]', true);\n }\n\n formData.append('visa_number[category]', category);\n formData.append('visa_number[country]', country);\n formData.append('visa_number[issue_date]', issueDate);\n formData.append('visa_number[number]', number);\n formData.append('visa_number[expire_date]', expireDate);\n formData.append('visa_number[person_id]', personId);\n\n updateVisaNumber(formData).catch(({ response }) => {\n if (response.status === 422) {\n setError(response.data.error);\n }\n });\n };\n\n const deleteVisaNumber = async () => {\n toggleShowConfirmation();\n setIsEditing(false);\n const deleteVisaNumberUrl = layman\n ? routes.public.visaNumbers.delete({ visaNumberID })\n : routes.admin.visaNumbers.delete({ visaNumberID, person_id: personId });\n\n const { data } = await httpClient.delete(deleteVisaNumberUrl);\n\n if (data.error === null) {\n fetchVisaNumbers();\n }\n };\n\n const onDeleteVisaNumber = () =>\n deleteVisaNumber().catch(({ response }) => {\n if (response.status === 422) {\n setError(response.data.error);\n }\n });\n\n const openViewImageModal = () => {\n setViewImageModal(true);\n };\n\n const toggleDocumentFileCallback = visaFileDocumentUrl ? openViewImageModal : undefined;\n\n const setVisaNumberValues = visaNumberValues => {\n setCategory(visaNumberValues.category);\n setCountry(visaNumberValues.countryCode);\n setExpireDate(visaNumberValues.expireDate);\n setNumber(visaNumberValues.number);\n setIssueDate(visaNumberValues.issueDate);\n setVisaFileName(visaNumberValues.fileName);\n setVisaFileDocumentUrl(visaNumberValues.fileUrl);\n setError({});\n setVisaFile(null);\n setVisaFileType(visaNumberValues.mimeType);\n };\n\n const downloadFileDocument = () => {\n const downloadLink = document.createElement('a');\n downloadLink.href = visaFileDocumentUrl;\n downloadLink.download = visaFileDocumentUrl.split('/').pop();\n document.body.appendChild(downloadLink);\n downloadLink.click();\n document.body.removeChild(downloadLink);\n };\n\n useEffect(() => {\n setVisaNumberValues(visaNumber);\n }, [visaNumber]);\n\n const isVisaDocumentPdfMimeType = !!visaFileType && visaFileType.includes('pdf');\n\n const renderVisaNumber = () => (\n \n {I18n.t('admin.components.orders.left_panel.visa_numbers.action.edit')}\n
\n )}\n \n
\n \n setCountry(selectedOption ? selectedOption.value : '')}\n errorMsg={error.country}\n isClearable={false}\n />\n
\n \n setNumber(value)}\n />\n
\n \n value && setIssueDate(moment(value).format('YYYY-MM-DD'))}\n futureYearsCount={0}\n pastYearsCount={100}\n maxDate={moment()}\n error={error.issueDate}\n enablePastDates={true}\n disableFutureDates={true}\n hideNavButtons={false}\n />\n
\n \n value && setExpireDate(moment(value).format('YYYY-MM-DD'))}\n error={error.expireDate}\n minDate={moment()}\n futureYearsCount={100}\n pastYearsCount={0}\n enablePastDates={false}\n disableFutureDates={false}\n touched={!!error.expireDate}\n hideNavButtons={false}\n />\n
\n \n
\n \n selectFile(value)}\n removeFile={removeFile}\n showRemoveFileButton={true}\n />\n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n {I18n.t('admin.components.travellers.edit.visa_numbers.label.country')}\n
\n \n {visaNumber.country}\n
\n \n
\n \n {I18n.t('admin.components.travellers.edit.visa_numbers.label.number')}\n
\n \n {visaNumber.number}\n
\n \n
\n \n {I18n.t('admin.components.travellers.edit.visa_numbers.label.issue_date')}\n
\n \n
\n \n
\n \n {I18n.t('admin.components.travellers.edit.visa_numbers.label.expire_date')}\n
\n \n
\n \n
\n \n {I18n.t('admin.components.travellers.edit.visa_numbers.label.visa_type')}\n
\n \n {I18n.t(visaNumber.category, {\n scope: 'simple_form.options.person.visa_numbers.category',\n })}\n
\n \n \n {I18n.t('admin.visa_number.modal.title')}\n \n
\n );\n\n const documentImageModalContent = (\n \n
\n );\n\n const documentImageModal = (\n \n \n 
\n \n
\n \n {\n setVisaNumberValues(visaNumber);\n setIsEditing(false);\n }}\n />\n
\n )}\n \n {visaNumber.isExpired && (\n \n
\n \n )}\n {!!visaFileDocumentUrl &&\n !isVisaDocumentPdfMimeType &&\n renderDocumentVisaFileImageModal()}\n {renderVisaNumber()}\n \n \n {I18n.t('admin.components.travellers.edit.visa_numbers.warning')}\n
\n )}\n \n
\n {isVisaDocumentPdfMimeType ? (\n \n \n 
\n \n \n {visaNumber.country}\n \n \n
\n \n \n \n \n \n setIsEditing(true)}\n >\n \n \n \n \n
\n \n \n
\n ) : (\n \n {I18n.t('admin.shared.action.preview_pdf')}\n
\n \n \n {visaFileDocumentUrl ? (\n \n \n ) : (\n \n
\n )}\n \n
\n \n {I18n.t('admin.shared.action.unable_to_preview_file')}\n
\n \n
\n
\n \n
\n {I18n.t('admin.identification_document.action.add')}\n
\n \n
\n \n
\n
\n \n
\n {I18n.t('admin.components.orders.left_panel.visa_numbers.action.add')}\n
\n \n
\n \n setError({ ...error, identificationDocuments: false })}\n >\n {I18n.t('admin.components.travellers.edit.identification_documents.error.invalid')}\n \n\n setVisaNumberError({ ...visaNumberError, visaNumbers: false })}\n >\n {I18n.t('admin.components.travellers.edit.visa_numbers.error.invalid')}\n \n\n
\n );\n};\n\nVisasAndIdentificationsSection.defaultProps = {\n layman: false,\n};\n\nVisasAndIdentificationsSection.propTypes = {\n personId: PropTypes.number.isRequired,\n documentTypes: PropTypes.shape().isRequired,\n visaCategories: PropTypes.arrayOf(PropTypes.string).isRequired,\n layman: PropTypes.bool,\n};\n\nexport default VisasAndIdentificationsSection;\n","import React from 'react';\n\nfunction dividerContent() {\n return ;\n}\n\nexport default dividerContent;\n","import React from 'react';\nimport httpClient from 'agentHTTPClient';\nimport routes from 'agentRoutes';\nimport { CountryItem } from '@wtag/react-comp-lib';\n\nconst fetchPhoneCountryCodes = async () => {\n const { data } = await httpClient.get(routes.api.phoneCountryCodes());\n const phoneCountryCodes = data.map(({ name, phoneCode }) => ({\n label: \n
\n\n \n
\n\n {!hasIdentificationDocument && isShowIdentificationForm && identificationForm()}\n\n \n {I18n.t('admin.identification_document.title')}\n {!isShowIdentificationForm && !isIdentificationDocumentsLoading && (\n
\n \n {isIdentificationDocumentsLoading ? (\n \n {identificationDocuments.map(IDdocument => (\n \n )}\n
\n \n
\n ) : (\n \n
\n )}\n \n {I18n.t('admin.components.orders.left_panel.passport.no_passport')}\n
\n \n
\n \n
\n\n {!hasVisa && isShowVisaForm && visaForm()}\n\n \n {I18n.t('admin.components.travellers.edit.visa_numbers.title')}\n\n {!isShowVisaForm && !isVisaLoading && (\n
\n \n {isVisaLoading ? (\n \n {visaNumbers.map(visa => (\n \n )}\n
\n \n
\n ) : (\n \n
\n )}\n \n {I18n.t('admin.components.orders.left_panel.visa_numbers.no_visa')}\n
\n