\n\n
\n {\n React.createElement(\n getMapWrapperComponent(),\n {\n defaultCenter: { lat, lng },\n defaultZoom: zoom,\n clusters: clusters,\n parks: bookableParks,\n zoomControl: false\n }\n )\n }\n \n\n
\n
\n {place.showFilters && !isUserOnMobile &&\n
\n
\n }\n\n
\n
\n {breadCrumbItems && !isUserOnMobile &&\n
\n
\n }\n\n
\n
{place.seoHeading}\n {type === 'subscription' &&\n \n - \n }\n \n {filteredParks.length > 0 &&\n \n - \n }\n \n\n {place.shortDescription &&\n
\n }\n
\n\n {parks && parks.length > 0 &&
}\n
\n\n {parks && parks.length > 0 &&\n
\n
\n
\n
\n {poiPlaces && poiPlaces.length > 0 &&\n
\n }\n
\n
\n }\n
\n\n {place.childrenPlace &&\n
\n {place.childrenPlace.map((place, i) => (\n
\n ))}\n
\n }\n\n {parks && parks.length === 0 && poiPlaces && poiPlaces.length > 0 &&\n
\n }\n\n {breadCrumbItems && isUserOnMobile && (\n
\n
\n )}\n\n {parks.some(park => getDiscount(park).discountRate < 0) &&\n
\n
\n }\n\n {\n place.subtitle && (\n
\n {place.subtitle} \n
\n )\n }\n\n {place.showDescription &&\n
\n
\n {place.topic &&\n
\n }\n
\n }\n {!this.state.isOpenedFirstTime && canShowBackdrop && parks && parks.length > 0 && !isUserOnMobile &&\n
{ e.target.hidden = true }} />\n }\n
\n
\n )\n }\n}\n\nconst mapStateToProps = ({\n railsContext: {\n currentSite: { iso: country }\n },\n search: { clusters, parks, params: { lat, lng, type }, zoom, bookableParks, filteredParks },\n resources: { localePrefix, defaultImage }\n}) => {\n return {\n bookableParks,\n clusters,\n country,\n defaultImage,\n lat,\n lng,\n type,\n localePrefix,\n parks,\n filteredParks,\n zoom\n }\n}\n\nexport default connect(mapStateToProps)(Place)\n","import React from 'react'\nimport URLSearchParams from 'url-search-params'\n\nimport ModalOp from '../../components/ModalOp'\nimport OpI18n from '../../components/OpI18n'\nimport { localePrefix } from '../../helpers/authentication'\nimport { Login } from '../Connection/components/Login'\nimport { PasswordRecoveryTunnel } from '../Connection/components/PasswordRecoveryTunnel'\n\nconst PopupRouterWithContext = (props, railsContext) => (\n
\n \n)\n\nconst LOGIN_FORM_DIALOG_ID = 'connect'\nconst FORGOTTEN_PASSWORD_DIALOG_ID = 'forgotten-password'\nconst SEND_PASSWORD_DIALOG_ID = 'sent-password'\nconst allowedModals = [\n LOGIN_FORM_DIALOG_ID,\n FORGOTTEN_PASSWORD_DIALOG_ID,\n SEND_PASSWORD_DIALOG_ID\n]\n\nclass PopupRouterComponent extends React.Component {\n constructor (props) {\n super(props)\n\n this.state = {\n params: new URLSearchParams(window.location.search.slice(1))\n }\n }\n\n componentDidMount () {\n const { params } = this.state\n\n const modal = params.get('modal')\n if (modal && allowedModals.includes(modal)) {\n $('#' + modal).modal('show')\n }\n }\n\n render () {\n const { params } = this.state\n const { railsContext, isUserSignedIn } = this.props\n const prefix = localePrefix.call(this)\n let urlSource = new URLSearchParams(window.location.search).get('origin')\n urlSource = urlSource === 'email' ? urlSource : ''\n\n const pathname = document.location.pathname\n const modalParam = params.get('modal')\n\n if (isUserSignedIn && [LOGIN_FORM_DIALOG_ID, FORGOTTEN_PASSWORD_DIALOG_ID, SEND_PASSWORD_DIALOG_ID].includes(modalParam)) {\n return null\n }\n\n if (modalParam === LOGIN_FORM_DIALOG_ID && pathname !== `${prefix}/connect`) {\n return (\n
\n \n )\n } else if ([FORGOTTEN_PASSWORD_DIALOG_ID, SEND_PASSWORD_DIALOG_ID].includes(modalParam) &&\n ![`${prefix}/forgotten-password`, `${prefix}/sent-password`].includes(document.location.pathname)) {\n return (\n
\n \n )\n } else {\n return null\n }\n }\n}\n\nexport default PopupRouterWithContext\n","export const moveToConfirmationPage = (transactionJson, history, localePrefix, type) => {\n history.push({\n pathname: `${localePrefix}/purchases/${transactionJson.purchase.id}/confirmation`,\n search: `?utm_nooverride=true&success=true${type === 'subscription' ? '&type=subscription' : ''}`,\n state: { purchase: transactionJson.purchase, purchaseState: transactionJson.purchase_state }\n })\n}\n\nexport const translatedErrorMessage = (error, intl) => {\n const prefix = 'stripe.errors'\n const translations = intl.messages\n if (error.code === 'card_declined') {\n const specificDeclineMessage = translations[`${prefix}.${error.decline_code}`]\n if (specificDeclineMessage) return specificDeclineMessage\n }\n\n return translations[`${prefix}.${error.code}`] ||\n translations[`${prefix}.${error.type}`] ||\n error.message\n}\n\nexport const isMultipleEntriesParamSet = (storagePrefix) => {\n const valueFromStorage = sessionStorage.getItem(`${storagePrefix}-isMultipleEntriesOption`)\n if (valueFromStorage !== null) return (valueFromStorage === 'true')\n\n const urlParams = new URLSearchParams(location.search)\n return urlParams.get('multiple_entries') === 'true'\n}\n","import { datalayerPush, datalayerPushGTM, datalayerPushTransaction } from 'Helpers/application'\nimport { moveToConfirmationPage, translatedErrorMessage } from 'Helpers/purchaseTunnel'\nimport { persistStore } from 'redux-persist'\n\nexport class PurchaseHelper {\n constructor ({ callerProps, stripeObject, setErrors, unsetLoading, backendPostUrl, backendPostParams }) {\n this.props = callerProps\n this.stripeObject = stripeObject\n this.unsetLoading = unsetLoading\n this.setErrors = setErrors\n\n // Summary/index: `${localePrefix}/purchases/create_react`\n // EditChanges: `${localePrefix}/offers/${offerBuilder.id}/purchases`\n this.backendPostUrl = backendPostUrl\n this.backendPostParams = backendPostParams\n }\n\n setThreedsError = () => {\n this.setErrors({ threedsError: true, purchaseError: false, stripeError: false, errorWithDateRedirect: false })\n }\n\n setPaymentError = ({ purchaseError, errorWithDateRedirect, scrollToTop }) => {\n this.setErrors({ purchaseError, errorWithDateRedirect, threedsError: false, stripeError: false, scrollToTop })\n }\n\n setStripeError = (stripeErrorMessage) => {\n this.setErrors({ stripeError: stripeErrorMessage, threedsError: false, purchaseError: false, errorWithDateRedirect: false })\n }\n\n fetchCompleteBookingResponse = () => {\n return fetch(this.backendPostUrl, {\n method: 'POST',\n credentials: 'include',\n headers: {\n 'Accept': 'application/json',\n 'Content-Type': 'application/json',\n 'X-CSRF-Token': $('meta[name=\"csrf-token\"]').attr('content')\n },\n body: JSON.stringify(this.backendPostParams)\n }).then(backendResponse => backendResponse.json())\n }\n\n gtmPushParamsOnError = (json) => {\n const park = (json.purchase && json.purchase.park) || {}\n const { offerBuilder } = this.props\n const pushParams = {\n event: 'payment_error',\n ep_vehicle_type: '4W',\n ep_new_customer: `${json.new_customer}`,\n currency: 'EUR',\n value: (offerBuilder.multipleEntries.allowSelected ? offerBuilder.amount.totalWithOptions : offerBuilder.amount.totalWithoutOptions),\n transaction_id: `${json.purchase && json.purchase.booking && json.purchase.booking.id}`,\n item_id: `${park.id}`,\n item_name: park.name,\n up_language: (window._oneparkDatas.up_language || null),\n up_locale: (window._oneparkDatas.up_locale || null)\n }\n if (window._oneparkDatas.up_user_id != null && window._oneparkDatas.up_user_id.length !== 0) {\n pushParams.up_user_id = window._oneparkDatas.up_user_id\n }\n return pushParams\n }\n\n proceedPurchase = async (json) => {\n const transactionResult = await fetch(`${this.props.localePrefix}/payment/transactions/${json.billable_id}`, {\n method: 'PATCH',\n body: JSON.stringify({ payment_intent_id: json.payment_intent && json.payment_intent.id }),\n credentials: 'include',\n headers: {\n 'Accept': 'application/json',\n 'Content-Type': 'application/json',\n 'X-CSRF-Token': $('meta[name=\"csrf-token\"]').attr('content')\n }\n })\n const transactionJson = await transactionResult.json()\n if (transactionResult.ok && transactionJson.purchase) {\n datalayerPushGTM('form-tracking', 'Users', 'purchase/success', transactionJson.purchase.id)\n if (window.Cookies.get('new_purchase_confirmation') !== undefined) {\n datalayerPushTransaction(transactionJson.purchase)\n datalayerPushGTM('serverEventTransaction')\n window.ga('send', 'event', 'purchase', 'transaction/success', this.props.user.id)\n }\n persistStore(this.props).purge()\n\n window.scrollTo(0, 0)\n\n return transactionJson\n } else {\n datalayerPushGTM('form-tracking', 'Users', 'purchase/error', transactionJson.error)\n datalayerPush(this.gtmPushParamsOnError(json))\n\n this.setPaymentError({\n purchaseError: transactionJson.error, errorWithDateRedirect: transactionJson.error_with_date_redirect, scrollToTop: true\n })\n this.unsetLoading()\n\n return false\n }\n }\n\n cancelTransaction = async (transactionId) => {\n await fetch(`${this.props.localePrefix}/payment/transactions/${transactionId}`, {\n method: 'DELETE',\n credentials: 'include',\n headers: {\n 'Accept': 'application/json',\n 'Content-Type': 'application/json',\n 'X-CSRF-Token': $('meta[name=\"csrf-token\"]').attr('content')\n }\n })\n\n this.unsetLoading()\n }\n\n completeBooking = async () => {\n const { history, localePrefix, type } = this.props\n\n const jsonBackendResponse = await this.fetchCompleteBookingResponse()\n\n if (jsonBackendResponse.error || !jsonBackendResponse.payment_intent) {\n datalayerPushGTM('form-tracking', 'Users', 'purchase/error', jsonBackendResponse.error || 'no payment_intent')\n datalayerPush(this.gtmPushParamsOnError(jsonBackendResponse))\n\n this.setPaymentError({ purchaseError: jsonBackendResponse.error, errorWithDateRedirect: jsonBackendResponse.error_with_date_redirect })\n this.unsetLoading()\n\n return\n }\n\n if (jsonBackendResponse.payment_intent.status === 'succeeded') {\n const purchaseConfirmedResult = await this.proceedPurchase(jsonBackendResponse)\n if (purchaseConfirmedResult) moveToConfirmationPage(purchaseConfirmedResult, history, localePrefix, type)\n return\n }\n\n if (jsonBackendResponse.payment_intent.status !== 'requires_action') {\n Sentry.captureException(new Error(`payment intent has unexpected status ${jsonBackendResponse.payment_intent.status}.`))\n return\n }\n\n const handleError = async () => {\n await this.cancelTransaction(jsonBackendResponse.billable_id)\n datalayerPush(this.gtmPushParamsOnError(jsonBackendResponse))\n }\n\n try {\n const stripeResponse = await this.stripeObject.handleNextAction({ clientSecret: jsonBackendResponse.payment_intent.client_secret })\n\n if (stripeResponse && stripeResponse.paymentIntent && stripeResponse.paymentIntent.status === 'succeeded') {\n const purchaseConfirmedResult = await this.proceedPurchase(jsonBackendResponse)\n moveToConfirmationPage(purchaseConfirmedResult, history, localePrefix, type)\n return\n }\n\n if (stripeResponse.error && stripeResponse.error.code === 'payment_intent_authentication_failure') {\n this.setThreedsError()\n await handleError()\n } else {\n this.setStripeError(translatedErrorMessage(stripeResponse.error, this.props.intl))\n await handleError()\n }\n } catch (error) {\n await handleError()\n Sentry.captureException(error)\n }\n }\n}\n","export const jsonFetch = (url, { body, ...options } = {}) =>\n fetch(url, {\n credentials: 'include',\n headers: {\n 'Accept': 'application/json',\n 'X-CSRF-Token': $('meta[name=\"csrf-token\"]').attr('content'),\n ...(body ? { 'Content-Type': 'application/json' } : {})\n },\n ...(body ? { body: JSON.stringify(body) } : {}),\n ...options\n })\n\nexport const bookingDuplicateCheck = (url, switchOffLoading, setDuplicateType, completeBooking) => {\n fetch(url, {\n method: 'GET',\n credentials: 'include',\n headers: {\n 'Accept': 'application/json',\n 'Content-Type': 'application/json',\n 'X-CSRF-Token': $('meta[name=\"csrf-token\"]').attr('content')\n }\n })\n .then((response) => {\n if (!response.ok) {\n throw new Error('Network response was not ok.')\n }\n return response.json()\n })\n .then((data) => {\n if (data.duplicate) {\n setDuplicateType(data.duplicate)\n $('#duplicate-booking-modal').modal('show')\n window.dataLayer.push({\n event: 'form-tracking',\n gaCategory: 'General',\n gaAction: 'Payment',\n gaLabel: 'Double booking warning'\n })\n switchOffLoading()\n } else {\n completeBooking()\n }\n })\n .catch((error) => {\n console.error('Error:', error)\n switchOffLoading()\n })\n}\n","import React, { Component } from 'react'\nimport ModalOp from 'Components/ModalOp'\nimport { FormattedMessage } from 'react-intl'\n\nconst SAME_PARK_TYPE = 'same_park'\nconst OTHER_PARKS_TYPE = 'other_parks'\n\nexport class DuplicateBookingModal extends Component {\n handleCancel = () => {\n $('#duplicate-booking-modal').modal('hide')\n }\n\n handleContinue = () => {\n this.props.handleContinue()\n $('#duplicate-booking-modal').modal('hide')\n }\n\n render () {\n const duplicateType = this.props.duplicateType\n\n return (\n
\n \n
\n
\n
\n \n \n
\n {duplicateType === SAME_PARK_TYPE &&\n
\n
\n }\n {duplicateType === OTHER_PARKS_TYPE &&\n
\n
\n }\n
\n
\n
\n
\n
\n
\n )\n }\n}\n","export const TRAVEL_INFOS_UPDATE = 'PURCHASE/TRAVEL_INFOS_UPDATE'\nexport const DISCOUNT_CODE_UPDATE = 'PURCHASE/DISCOUNT_CODE_UPDATE'\nexport const PARTNER_CARD_UPDATE = 'PURCHASE/PARTNER_CARD_UPDATE'\nexport const OFFER_WITH_MULTIPLE_ENTRIES_UPDATE = 'PURCHASE/OFFER_WITH_MULTIPLE_ENTRIES_UPDATE'\nexport const DISCOUNT_CODE_AND_OFFER_WITH_MULTIPLE_ENTRIES_UPDATE = 'PURCHASE/DISCOUNT_CODE_AND_OFFER_WITH_MULTIPLE_ENTRIES_UPDATE'\nexport const PARTNER_CARD_AND_OFFER_WITH_MULTIPLE_ENTRIES_UPDATE = 'PURCHASE/PARTNER_CARD_AND_OFFER_WITH_MULTIPLE_ENTRIES_UPDATE'\n","import * as types from '../types/PurchaseTypes'\n\nexport const updateTravelInfos = (travelInfos) => ({ type: types.TRAVEL_INFOS_UPDATE, travelInfos })\nexport const updateDiscountCode = (discountCode) => ({ type: types.DISCOUNT_CODE_UPDATE, discountCode })\nexport const updatePartnerCard = (partnerCard) => ({ type: types.PARTNER_CARD_UPDATE, partnerCard })\nexport const updateOfferBuilder = (offerBuilder) => ({ type: types.OFFER_WITH_MULTIPLE_ENTRIES_UPDATE, offerBuilder })\nexport const updateDiscountCodeAndOfferBuilder = (discountCode, offerBuilder) => ({ type: types.DISCOUNT_CODE_AND_OFFER_WITH_MULTIPLE_ENTRIES_UPDATE, discountCode, offerBuilder })\nexport const updatePartnerCardAndOfferBuilder = (partnerCard, offerBuilder) => ({ type: types.PARTNER_CARD_AND_OFFER_WITH_MULTIPLE_ENTRIES_UPDATE, partnerCard, offerBuilder })\n","import React, { Component } from 'react'\nimport { FormattedMessage, FormattedNumber } from 'react-intl'\nimport { bindActionCreators } from 'redux'\nimport { connect } from 'react-redux'\nimport classNames from 'classnames'\n\nimport TooltipComponent from 'Components/TooltipComponent'\nimport * as PurchaseActions from 'Actions/PurchaseActions'\n\nclass MultipleEntriesSection extends Component {\n state = {\n multipleEntries: false\n }\n\n componentDidMount () {\n this.setState({ multipleEntries: this.props.isMultipleEntriesChecked })\n\n this.updateOfferBuilder(this.props.isMultipleEntriesChecked)\n }\n\n handleChangeMultipleEntries = async (e) => {\n this.setState({ multipleEntries: e.target.checked })\n this.props.handleMultipleEntriesChange(e)\n\n await this.updateOfferBuilder(e.target.checked)\n }\n\n updateOfferBuilder = async (isChecked) => {\n const { localePrefix, offerId, discountCode } = this.props\n\n const discountCodeParams = discountCode ? `&discount_code=${discountCode.code}` : ''\n\n const res = await fetch(`${localePrefix}/purchases/summary?offer_id=${offerId}&multiple_entries=${isChecked}${discountCodeParams}`, {\n method: 'GET',\n credentials: 'include',\n headers: {\n 'Accept': 'application/json',\n 'Content-Type': 'application/json',\n 'X-CSRF-Token': $('meta[name=\"csrf-token\"]').attr('content')\n }\n })\n const json = await res.json()\n\n this.props.actions.updateOfferBuilder({ ...json.offerBuilder })\n }\n\n render () {\n const { multipleEntries } = this.state\n const { optionsPrice } = this.props\n\n return (\n
\n
\n
\n \n {\n !multipleEntries &&\n \n
\n
\n
\n
\n
\n {\n multipleEntries &&\n
\n
\n )\n }\n}\n\nconst mapDispatchToProps = (dispatch) => ({ actions: bindActionCreators({ ...PurchaseActions }, dispatch) })\n\nexport default connect(null, mapDispatchToProps)(MultipleEntriesSection)\n","import React from 'react'\n\nexport const CustomFormattedCurrency = ({ value, currency }) => {\n const formattedNumber = new Intl.NumberFormat('en', {\n style: 'currency',\n currency: currency,\n currencyDisplay: 'symbol',\n minimumFractionDigits: 2,\n maximumFractionDigits: 2\n }).format(value)\n\n const formattedWithCurrencyAtStart = `${currency}:${'\\u00A0'}${formattedNumber.replace(currency, '').trim()}`\n\n return
({formattedWithCurrencyAtStart}) \n}\n","import React from 'react'\nimport { FormattedMessage, FormattedNumber } from 'react-intl'\nimport { connect } from 'react-redux'\nimport MultipleEntriesSection from '../../Purchase/Summary/MultipleEntriesSection'\n\nimport TooltipComponent from '../../components/TooltipComponent'\nimport { CustomFormattedCurrency } from 'Components/CustomFormattedCurrency'\n\nconst BestOfferAndAmountComponent = ({\n onSitePrice,\n parkBestOffer,\n discountCode,\n displayPriceBeforeDiscount = true,\n showOptionPrice,\n offerAmount,\n type,\n bigTotal,\n showMultipleEntriesChoice,\n localePrefix,\n offerId,\n optionsPrice,\n handleMultipleEntriesChange,\n isMultipleEntriesChecked,\n showNewAmount,\n totalAmountSectionClasses,\n toolTipBemModifier\n}) => {\n const bookingAmount = parkBestOffer.originalOffer ? parkBestOffer.originalOffer.bookingAmount : parkBestOffer.amount.bookingAmount\n const serviceFeeAmount = parkBestOffer.originalOffer ? parkBestOffer.originalOffer.serviceFeeAmount : parkBestOffer.amount.serviceFee\n let totalAmount = 0\n\n if (parkBestOffer.originalOffer) {\n totalAmount = parkBestOffer.originalOffer.totalAmount\n } else {\n if (!discountCode && parkBestOffer.amount.discountPrice) {\n totalAmount = parseFloat(parkBestOffer.amount.discountPrice, 10) + offerAmount\n } else {\n totalAmount = offerAmount\n }\n }\n\n const displayMultiplePriceText = (showOptionPrice && parkBestOffer.multipleEntries.allow) ||\n parkBestOffer.multipleEntries.include || parkBestOffer.multipleEntries.allowSelected\n const entriesCountMessageId = `pages.park.description.caracteristics.${displayMultiplePriceText ? 'multiple_entries' : 'single_entry'}`\n const entriesTooltipMessageId = `pages.park.booking_panel.${displayMultiplePriceText ? 'multiple_entries_tooltip' : 'single_entry_tooltip'}`\n\n return (\n
\n
\n
\n {parkBestOffer.amount.ref\n ? <>\n {displayPriceBeforeDiscount &&\n
\n
\n {onSitePrice ?
\n\n
\n
\n
\n }\n\n
\n \n :
\n
\n {type === 'package' && parkBestOffer.title}\n {type === 'subscription' &&
\n\n
\n
\n
\n }\n\n
\n
\n \n {message => {message} }\n \n
\n\n
\n {serviceFeeAmount > 0\n ?
\n
\n\n
\n {!showMultipleEntriesChoice &&\n <>\n
\n \n {message => {message} }\n \n
\n\n
\n {(showOptionPrice && optionsPrice > 0) && (parkBestOffer.multipleEntries.allow || parkBestOffer.multipleEntries.include) &&\n
\n \n }\n {\n showMultipleEntriesChoice &&\n
\n }\n
\n\n {discountCode && discountCode.name &&\n
\n
\n {discountCode.name}\n
\n
\n {\n discountCode.type === 'service_fee'\n ?
\n
\n }\n
\n
\n {\n !bigTotal &&\n <>\n
\n {showNewAmount &&
\n\n
\n\n {parkBestOffer.amountWithSecondaryCurrency &&\n \n \n }\n\n \n \n
\n \n }\n {\n bigTotal &&\n
\n
\n {showNewAmount &&
\n\n
\n {parkBestOffer.amountWithSecondaryCurrency &&\n CustomFormattedCurrency({\n currency: parkBestOffer.amountWithSecondaryCurrency.unit,\n value: parkBestOffer.amountWithSecondaryCurrency.total\n })}\n \n { \n
}\n
\n
\n
\n )\n}\n\nconst mapStateToProps = ({ search: { params: { type } } }) => ({ type })\n\nexport const BestOfferAndAmount = connect(mapStateToProps)(BestOfferAndAmountComponent)\n","export default {\n id: \"calendar-arrow-right-usage\",\n viewBox: \"0 0 16 12\",\n url: __webpack_public_path__ + \"assets/sprite-aa024e1f.svg#calendar-arrow-right\",\n toString: function () {\n return this.url;\n }\n }","export default {\n id: \"calendar-arrow-right-hover-usage\",\n viewBox: \"0 0 16 12\",\n url: __webpack_public_path__ + \"assets/sprite-aa024e1f.svg#calendar-arrow-right-hover\",\n toString: function () {\n return this.url;\n }\n }","import React, { Component } from 'react'\nimport { FormattedMessage, FormattedNumber } from 'react-intl'\nimport moment from 'moment'\nimport classNames from 'classnames'\n\nimport { BestOfferAndAmount } from '../Park/BookingPanel/BestOfferAndAmount'\nimport { ParkCard } from 'Components/ParkCard'\n\nimport iconArrow from 'Assets/images/svg-on-react/calendar-arrow-right.svg'\nimport iconGreenArrow from 'Assets/images/svg-on-react/calendar-arrow-right-hover.svg'\nimport SvgImage from 'Components/SvgImage'\nimport { CustomFormattedCurrency } from 'Components/CustomFormattedCurrency'\n\nclass ParkOfferSummary extends Component {\n render () {\n const { beginDate, discountCode, endDate, offerBuilder, park, displayPriceBeforeDiscount, showOptionPrice, offerAmount, offerType, showItinerary,\n showMultipleEntriesChoice, localePrefix, offerId, optionsPrice, handleMultipleEntriesChange, isMultipleEntriesChecked, oldPrice,\n paidPriceAlternativeCurrency\n } = this.props\n const oldBeginDate = moment(this.props.oldBeginDate)\n const oldEndDate = moment(this.props.oldEndDate)\n const showOldValues = typeof oldPrice !== 'undefined' && oldPrice !== null\n\n return (\n
\n
\n
\n {!showOldValues &&\n
\n
\n {offerType === 'package' &&\n <>\n {f => beginDate.tz(park.timezoneName).format(f).toUpperCase()} \n
\n
\n
\n
\n {offerType === 'package' &&\n <>\n {f => endDate.tz(park.timezoneName).format(f).toUpperCase()} \n {f => beginDate.tz(park.timezoneName).format(f).toUpperCase()} \n \n }\n
\n
\n }\n
\n {showOldValues &&\n
\n
\n
\n
\n
\n {offerType === 'package' &&\n <>\n {f => oldBeginDate.tz(park.timezoneName).format(f).toUpperCase()} \n
\n
\n
\n
\n {offerType === 'package' &&\n <>\n {f => oldEndDate.tz(park.timezoneName).format(f).toUpperCase()} \n {f => oldBeginDate.tz(park.timezoneName).format(f).toUpperCase()} \n \n }\n
\n
\n
\n
\n \n {paidPriceAlternativeCurrency &&\n CustomFormattedCurrency({\n currency: paidPriceAlternativeCurrency.unit,\n value: paidPriceAlternativeCurrency.total\n })}\n \n \n
\n
\n
\n }\n\n
\n {showOldValues &&\n <>\n
\n
\n\n
\n
\n {offerType === 'package' &&\n <>\n {f => beginDate.tz(park.timezoneName).format(f).toUpperCase()} \n
\n
\n
\n
\n {offerType === 'package' &&\n <>\n {f => endDate.tz(park.timezoneName).format(f).toUpperCase()} \n {f => beginDate.tz(park.timezoneName).format(f).toUpperCase()} \n \n }\n
\n
\n \n }\n\n
\n
\n
\n
\n )\n }\n}\n\nexport default ParkOfferSummary\n","export default {\n id: \"icon-pencil-usage\",\n viewBox: \"0 0 26 26\",\n url: __webpack_public_path__ + \"assets/sprite-aa024e1f.svg#icon-pencil\",\n toString: function () {\n return this.url;\n }\n }","import React, { Component } from 'react'\nimport { FormattedMessage } from 'react-intl'\nimport Collapsible from 'react-collapsible'\n\nimport SvgImage from '../../components/SvgImage'\nimport iconEdit from 'Assets/images/svg-on-react/icon-pencil.svg'\nimport { EDIT_URL_KEY } from 'Constants/application'\n\nclass AccountSection extends Component {\n componentDidMount () {\n sessionStorage.removeItem(EDIT_URL_KEY)\n }\n\n handleEditBillingInfo = () => {\n const { localePrefix, offerBuilder } = this.props\n if (this.props.saveUrl) { sessionStorage.setItem(EDIT_URL_KEY, window.location.href) }\n\n window.location = `${localePrefix}/member/billing-informations?offer_id=${offerBuilder.id}&action=edit&origin=booking`\n }\n\n render () {\n const { user } = this.props\n\n return (\n
\n
\n {(message) => (\n \n \n \n
\n
\n {user.company &&
{user.company.name}
}\n
{user.name}
\n
{user.address}
\n
{user.zipCode} {user.city}
\n
{user.mobilePhone}
\n
\n
\n
\n
\n )}\n \n
\n )\n }\n}\n\nexport default AccountSection\n","import React, { Component } from 'react'\nimport { FormattedMessage } from 'react-intl'\nimport { bindActionCreators } from 'redux'\nimport { connect } from 'react-redux'\nimport Select from 'react-select'\nimport { datalayerPushGTM } from '../../helpers/application'\n\nimport FormInput from 'Components/Form/FormInput'\nimport {\n performValidation,\n genericDiscountCodeValidation,\n genericPartnerValidation,\n genericPartnerNumberValidation,\n getErrorFieldName\n} from '../../helpers/formValidations'\nimport { isMultipleEntriesParamSet } from 'Helpers/purchaseTunnel'\n\nimport * as PurchaseActions from 'Actions/PurchaseActions'\n\nclass DiscountPartnerForm extends Component {\n state = {\n discountCode: this.props.discountCode ? this.props.discountCode.code : '',\n partner: '',\n partnerNumber: '',\n loading: false\n }\n\n handleSet = (name, value) => this.setState({ [name]: value })\n\n validateField = (name, value) => performValidation.call(this, validatorByName[name], value, getErrorFieldName(name))\n\n handleCheckDiscountCode = async () => {\n this.setState({ loading: true })\n\n const { discountCode, partnerNumber } = this.state\n const { offerBuilder, railsContext: { localePrefix } } = this.props\n const validation = this.validateField('discountCode', discountCode)\n const multipleEntriesParam = this.props.isMultipleEntriesOption ? '&multiple_entries=true' : ''\n\n if (validation && !partnerNumber) {\n const res = await fetch(`${localePrefix}/check_discount_code`, {\n method: 'POST',\n credentials: 'include',\n headers: {\n 'Accept': 'application/json',\n 'Content-Type': 'application/json',\n 'X-CSRF-Token': $('meta[name=\"csrf-token\"]').attr('content')\n },\n body: JSON.stringify({\n discount_code: discountCode,\n user_duration: offerBuilder.userDuration,\n offer_id: offerBuilder.id\n })\n })\n\n const json = await res.json()\n\n if (json.error) {\n this.setState({\n partnerError: null,\n partnerNumberError: null,\n discountCodeError: `purchase.discount_partner.errors.${json.error}`,\n loading: false\n })\n datalayerPushGTM('form-tracking', 'Forms', 'Discount-informations', `errors.${json.error}`)\n } else {\n const action = (offerBuilder) => {\n this.props.actions.updateDiscountCodeAndOfferBuilder({ ...json.discount }, { ...offerBuilder })\n }\n\n this.handleUpdateOfferBuilder(\n `discount_code=${json.discount.code}${multipleEntriesParam}`,\n action\n ).then(this.props.validateCallback).then(() => {\n this.setState({ loading: false })\n })\n datalayerPushGTM('form-tracking', 'Users', 'discount-informations/success', offerBuilder.id)\n }\n } else if (partnerNumber) {\n this.setState({\n partnerError: null,\n partnerNumberError: null,\n discountCodeError: 'purchase.discount_partner.errors.dont_cumulate_discount',\n loading: false\n })\n datalayerPushGTM('form-tracking', 'Forms', 'Discount-informations', `errors.dont_cumulate_discount`)\n }\n }\n\n handleCheckPartnerNumber = async () => {\n this.setState({ loading: true })\n\n const { discountCode, partner, partnerNumber } = this.state\n const { offerBuilder, railsContext: { localePrefix } } = this.props\n\n const partnerValidation = this.validateField('partner', partner)\n const partnerNumberValidation = this.validateField('partnerNumber', partnerNumber)\n\n if (partnerValidation && partnerNumberValidation && !discountCode) {\n const res = await fetch(`${localePrefix}/partner_loyalty_programs/${partner}/check_partner_loyalty_code`, {\n method: 'POST',\n credentials: 'include',\n headers: {\n 'Accept': 'application/json',\n 'Content-Type': 'application/json',\n 'X-CSRF-Token': $('meta[name=\"csrf-token\"]').attr('content')\n },\n body: JSON.stringify({\n partner_loyalty_number: partnerNumber.replace(/\\W/g, '')\n })\n })\n\n const json = await res.json()\n\n if (json.error) {\n this.setState({\n discountCodeError: null,\n partnerNumberError: `purchase.discount_partner.errors.${json.error}`,\n loading: false\n })\n datalayerPushGTM('form-tracking', 'Forms', 'Partnership-informations', `errors.${json.error}`)\n } else {\n const action = (offerBuilder) => {\n this.props.actions.updatePartnerCardAndOfferBuilder({ ...json.partner }, { ...offerBuilder })\n }\n\n this.handleUpdateOfferBuilder(`partner=${json.partner.id}&partner_loyalty_number=${partnerNumber}`, action)\n .then(this.props.validateCallback)\n .then(() => {\n this.setState({ loading: false })\n })\n\n datalayerPushGTM('form-tracking', 'Users', 'partnership-informations/success', offerBuilder.id)\n }\n } else if (discountCode) {\n this.setState({\n discountCodeError: null,\n partnerNumberError: 'purchase.discount_partner.errors.dont_cumulate_discount',\n loading: false\n })\n datalayerPushGTM('form-tracking', 'Forms', 'Partnership-informations', `errors.dont_cumulate_discount`)\n }\n }\n\n handleEnterPartnerCardNumber = (name, value) => {\n if (this.getCurrentPartner() === null) { return this.handleSet(name, '') }\n let formattedValue\n const re = new RegExp(this.getCurrentPartner()['validation_regex'])\n if (value && re.test(value)) {\n // Split input string into chunks by 4 symbols, then insert whitespaces between them\n formattedValue = value.match(new RegExp('.{1,4}', 'g')).join(' ')\n } else {\n // Remove all non-word or non-numeric symbols if user not finished editing partner number yet\n const guardRegexp = this.getCurrentPartner()['input_type'] === 'number' ? /\\D/g : /\\W/g\n formattedValue = value.replace(guardRegexp, '')\n }\n this.handleSet(name, formattedValue)\n };\n\n handleUpdateOfferBuilder = async (params, action) => {\n const { railsContext: { localePrefix }, offerBuilder } = this.props\n\n const res = await fetch(`${localePrefix}/purchases/summary?offer_id=${offerBuilder.id}&${params}`, {\n method: 'GET',\n credentials: 'include',\n headers: {\n 'Accept': 'application/json',\n 'Content-Type': 'application/json',\n 'X-CSRF-Token': $('meta[name=\"csrf-token\"]').attr('content')\n }\n })\n\n const json = await res.json()\n\n await action(json.offerBuilder)\n }\n\n getCurrentPartner = () => {\n return this.props.partnersOptions.find((e) => { return e['id'] === this.state.partner }) || null\n }\n\n render () {\n const { discountCode, partner, partnerNumber, loading } = this.state\n const { partnersOptions } = this.props\n\n return (\n
\n
\n
\n
\n this.handleSet('discountCode', value)}\n withoutValidate\n inputValue={discountCode}\n errorMessage={this.state[getErrorFieldName('discountCode')]}\n placeholderKey='purchase.discount_partner.label.discount'\n >\n {\n \n
\n
\n
\n
\n
this.handleSet('partner', value)}\n withoutValidate\n inputValue={partner}\n errorMessage={this.state[getErrorFieldName('partner')]}\n placeholderKey='purchase.discount_partner.label.partner'\n >\n ({ label: partner['name'], value: partner['id'] }))}\n />\n \n \n this.handleEnterPartnerCardNumber('partnerNumber', value)}\n withoutValidate\n inputValue={partnerNumber}\n errorMessage={this.state[getErrorFieldName('partnerNumber')]}\n placeholderKey='purchase.discount_partner.label.partner_loyalty_number'\n placeholder={this.getCurrentPartner() ? this.getCurrentPartner()['placeholder'] : null}\n >\n {\n \n
\n \n
\n )\n }\n}\n\nconst validatorByName = {\n discountCode: genericDiscountCodeValidation,\n partner: genericPartnerValidation,\n partnerNumber: genericPartnerNumberValidation\n}\n\nconst mapStateToProps = ({\n purchase: { discountCode, partnersOptions, offer: { offerBuilder } }, railsContext\n}) => ({\n discountCode, offerBuilder, partnersOptions, railsContext\n})\n\nconst mapDispatchToProps = (dispatch) => ({ actions: bindActionCreators({ ...PurchaseActions }, dispatch) })\n\nexport default connect(mapStateToProps, mapDispatchToProps)(DiscountPartnerForm)\n","import React, { Component } from 'react'\nimport { connect } from 'react-redux'\nimport { FormattedMessage } from 'react-intl'\nimport { withRouter } from 'react-router-dom'\nimport { bindActionCreators } from 'redux'\nimport Collapsible from 'react-collapsible'\n\nimport * as PurchaseActions from '../../../../actions/PurchaseActions'\n\nimport DiscountPartnerForm from './DiscountPartnerForm'\n\nimport SvgImage from '../../components/SvgImage'\nimport iconEdit from 'Assets/images/svg-on-react/icon-pencil.svg'\n\nclass DiscountPartnerSection extends Component {\n state = {\n showForm: !this.props.discountCode && !this.props.partnerCard\n }\n\n handleEdit = () => {\n const { discountCode, partnerCard, localePrefix } = this.props\n\n if (partnerCard) {\n this.props.actions.updatePartnerCard(null)\n this.setState({ showForm: true })\n } else if (discountCode) {\n this.props.actions.updateDiscountCode(null)\n\n fetch(`${localePrefix}/remove_discount_code`, {\n method: 'get',\n credentials: 'include',\n headers: {\n 'X-CSRF-Token': $('meta[name=\"csrf-token\"]').attr('content')\n }\n }).then(\n () => {\n this.setState({ showForm: true })\n }\n )\n }\n }\n\n validateCallback = () => {\n this.setState({ showForm: false })\n }\n\n render () {\n const { discountCode, partnerCard } = this.props\n const { showForm } = this.state\n\n return (\n
\n
\n {(message) => (\n \n {showForm &&\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\nconst mapStateToProps = ({ purchase: { discountCode, partnerCard }, resources: { localePrefix } }) => ({\n discountCode, partnerCard, localePrefix\n})\n\nconst mapDispatchToProps = (dispatch) => ({ actions: bindActionCreators({ ...PurchaseActions }, dispatch) })\n\nexport default withRouter(connect(mapStateToProps, mapDispatchToProps)(DiscountPartnerSection))\n","import React, { Component } from 'react'\nimport { FormattedMessage } from 'react-intl'\nimport Collapsible from 'react-collapsible'\nimport moment from 'moment'\nimport { connect } from 'react-redux'\nimport classNames from 'classnames'\n\nimport PaymentInfoPanel from '../PaymentInfoPanel'\nimport SvgImage from '../../components/SvgImage'\n\nimport iconEdit from 'Assets/images/svg-on-react/icon-pencil.svg'\nimport { emitGa4PageView } from '../../../../libs/google_analytics_helpers'\n\nclass PaymentSection extends Component {\n componentDidMount () {\n if (this.props.showPaymentForm) emitGa4PageView('cc_registration')\n }\n\n componentDidUpdate () {\n if (this.props.showPaymentForm) emitGa4PageView('cc_registration')\n }\n\n render () {\n const { billingIdentity, showPaymentForm, mobilePurchaseTunnelPaymentInside, forwardedRef, warning } = this.props\n const blockClassName = classNames('purchase-summary__block row', {\n 'purchase-summary__block--orange': warning\n })\n\n return (\n
\n { (mobilePurchaseTunnelPaymentInside || billingIdentity) &&\n
\n {(message) => (\n \n { !showPaymentForm && billingIdentity &&\n \n
\n
{billingIdentity.cardNumber}
\n
{billingIdentity.ownerName}
\n
\n \n {f =>\n \n
\n
\n
\n
\n
\n )}\n \n }\n
\n )\n }\n}\n\nconst mapStateToProps = ({\n purchase,\n resources: { localePrefix },\n railsContext: { location }\n}) => ({ localePrefix, location, purchase })\n\nexport default connect(mapStateToProps)(PaymentSection)\n","export default {\n id: \"icon-cancel-usage\",\n viewBox: \"0 0 32 32\",\n url: __webpack_public_path__ + \"assets/sprite-aa024e1f.svg#icon-cancel\",\n toString: function () {\n return this.url;\n }\n }","export default {\n id: \"icon-calendar3-usage\",\n viewBox: \"0 0 18 18\",\n url: __webpack_public_path__ + \"assets/sprite-aa024e1f.svg#icon-calendar3\",\n toString: function () {\n return this.url;\n }\n }","export default {\n id: \"icon-coins-usage\",\n viewBox: \"0 0 33 33\",\n url: __webpack_public_path__ + \"assets/sprite-aa024e1f.svg#icon-coins\",\n toString: function () {\n return this.url;\n }\n }","export default {\n id: \"icon-cancel-subscription-usage\",\n viewBox: \"0 0 25 26\",\n url: __webpack_public_path__ + \"assets/sprite-aa024e1f.svg#icon-cancel-subscription\",\n toString: function () {\n return this.url;\n }\n }","import React from 'react'\nimport { FormattedMessage, FormattedHTMLMessage } from 'react-intl'\nimport moment from 'moment'\n\nimport { toHumanDuration } from 'Helpers/date'\nimport SvgImage from 'Components/SvgImage'\n\nimport iconCancel from 'Assets/images/svg-on-react/icon-cancel.svg'\nimport iconCalendar from 'Assets/images/svg-on-react/icon-calendar3.svg'\nimport iconSecuredPayment from 'Assets/images/svg-on-react/icon-secure-payment.svg'\nimport iconCoins from 'Assets/images/svg-on-react/icon-coins.svg'\nimport iconCancelSubscription from 'Assets/images/svg-on-react/icon-cancel-subscription.svg'\n\nexport const SummaryReassurancePanel = ({ maxCancellationDelay, maxModificationDelay, renewalDate, isSubscription, intl }) => {\n const locale = intl.locale\n const timeFormat = 'D MMMM YYYY'\n\n return (\n
\n
\n {isSubscription &&\n <>\n
\n
\n\n
\n
\n \n }\n\n {!isSubscription &&\n <>\n
\n
\n
\n
\n \n }\n\n
\n
\n
\n
\n )\n}\n","import React, { Component } from 'react'\nimport { connect } from 'react-redux'\nimport { FormattedMessage, injectIntl } from 'react-intl'\nimport { withRouter } from 'react-router-dom'\nimport Select from 'react-select'\nimport { bindActionCreators } from 'redux'\nimport { datalayerPushGTM, datalayerPush } from 'Helpers/application'\nimport classNames from 'classnames'\n\nimport FormInput from 'Components/Form/FormInput'\nimport FormInputDateTimePicker from 'Components/Form/FormInputDateTimePicker'\nimport Loader from 'Components/Loader'\nimport * as PurchaseActions from 'Actions/PurchaseActions'\nimport AttributeCheckbox from 'Components/VehicleInformation/AttributeCheckbox'\nimport { Warning } from 'Components/VehicleInformation/Warning'\nimport { LicensePlateField } from 'Components/VehicleInformation/LicensePlateField'\nimport { valueToMomentInTimezone } from 'Helpers/date'\n\nimport {\n performValidation,\n genericComingFromValidation,\n genericFlightNumberArrivalValidation,\n genericFlightNumberDepartureValidation,\n genericLicensePlateValidation,\n genericMeetingPlaceArrivalValidation,\n genericMeetingPlaceDepartureValidation,\n genericVehicleModelValidation,\n genericRealTimeArrivalValidation,\n genericPassengerNumberValidation,\n genericPassportNumberValidation,\n genericTrainNumberExitValidation,\n getErrorFieldName\n} from 'Helpers/formValidations'\n\nimport carIcon from 'ClientAssets/images/vehicletypes/car.png'\nimport motorcycleIcon from 'ClientAssets/images/vehicletypes/motorcycle.png'\nimport { LICENSE_PLATE_COUNTRIES } from 'Components/VehicleInformation/constants'\nimport { scrolledToFirstInvalid } from 'Helpers/form'\n\nclass TravelInformationsForm extends Component {\n setupDisabledAfter = () => {\n if (this.props.offerEndDate) {\n return valueToMomentInTimezone({ value: this.props.offerEndDate, timezone: this.props.timezone })\n } else if (this.props.endDate) {\n return valueToMomentInTimezone({ value: this.props.endDate, timezone: this.props.timezone })\n }\n\n return null\n }\n\n state = {\n loading: false,\n disabledBefore: valueToMomentInTimezone({ value: this.props.beginDate, timezone: this.props.timezone }),\n disabledAfter: this.setupDisabledAfter(),\n country: LICENSE_PLATE_COUNTRIES.find(item => item.id === this.props.travelInfos.license_plate_country_id) || {},\n travelInfoRef: React.createRef(),\n ...this.props.travelInfos\n }\n\n componentDidMount = () => {\n datalayerPush({ event: 'page_name', page_name: 'travel_informations' })\n datalayerPushGTM('hitVirtualPageView')\n }\n\n handleSet = (name, value) => {\n this.setState({ [name]: value })\n }\n\n handleSetLicensePlate = (name, value) => {\n const snakeCasedName = name.replace(/[A-Z]/g, match => '_' + match.toLowerCase())\n\n this.handleSet(snakeCasedName, value)\n }\n\n handleLicensePlateValidation = (value) => this.validateField('license_plate', value)\n\n fieldValidations = () => this.getFieldsToValidate().map(name => [ name, this.validateField(name, this.state[name]) ])\n\n allFieldsAreValid = () => this.fieldValidations().every(nameValidTuple => nameValidTuple[1])\n\n handleSubmit = async (event) => {\n event.preventDefault()\n\n if (scrolledToFirstInvalid(this.fieldValidations())) return\n\n const travelInfosAccumulated = {\n license_plate: this.state.license_plate,\n vehicle_model: this.state.vehicle_model,\n electric_vehicle: this.state.electric_vehicle,\n motorcycle: this.state.motorcycle,\n motorcycleMayChange: this.state.motorcycleMayChange,\n isUnknownLicensePlateDisabled: this.state.isUnknownLicensePlateDisabled,\n unknown_license_plate: this.state.unknown_license_plate,\n license_plate_country_id: this.state.country.id,\n ...this.props.mandatoryInfos.reduce((accumulator, { name }) => {\n accumulator[name] = this.state[name]\n return accumulator\n }, {})\n }\n await this.props.actions.updateTravelInfos(travelInfosAccumulated)\n this.props.protectFromReload('travelInfos', JSON.stringify(travelInfosAccumulated))\n\n datalayerPushGTM('form-tracking', 'Users', 'travel-informations/success', this.props.user.id)\n this.props.disableEditMode()\n this.props.turnoffWarning()\n }\n\n validateField = (name, value) => {\n if (name === 'license_plate') {\n return this.licenseRef.current.validate()\n }\n\n const validator = validatorByName[name]\n\n return !validator || performValidation.call(this, validator, value, getErrorFieldName(name))\n }\n\n handleCountryChange = (newCountry) => {\n this.setState({ country: newCountry }, () => {\n this.licenseRef.current.validate()\n })\n }\n\n getFieldsToValidate = () => {\n const fields = ['vehicle_model', ...this.props.mandatoryInfos.map(({ name }) => name)]\n\n if (!this.state.unknown_license_plate && LICENSE_PLATE_COUNTRIES.some(({ id }) => id === this.state.country.id)) {\n fields.push('license_plate')\n }\n\n return fields\n }\n\n renderDateTimePicker ({ name }) {\n const { timezone } = this.props\n const { disabledBefore, disabledAfter } = this.state\n const modifierName = name.split('_').join('-').toLowerCase()\n\n return (\n
\n this.handleSet(name, value)}\n validateCallback={(value) => this.validateField(name, value)}\n placeholderDateKey='purchase.travel_informations.attributes.real_time_arrival_date'\n placeholderTimeKey='purchase.travel_informations.attributes.real_time_arrival_time'\n disabledBefore={disabledBefore}\n disabledAfter={disabledAfter}\n timezone={timezone}\n additionalErrorClass='input-error--reduced-height'\n />\n
\n )\n }\n\n renderField ({ id, name, iconLeft, labelId, inputType, uppercase }) {\n const modifierName = name.split('_').join('-').toLowerCase()\n const inputClassNames = classNames('travel-info-form__input', `travel-info-form__input--${modifierName}`,\n {\n 'travel-info-form__input--with-icon': iconLeft\n })\n\n return (\n
\n this.handleSet(name, value)}\n validateCallback={(value) => this.validateField(name, value)}\n inputValue={this.state[name] || ''}\n errorMessage={this.state[getErrorFieldName(name)]}\n iconLeft={iconLeft}\n required\n placeholderKey={`purchase.travel_informations.attributes.${labelId}`}\n uppercase={uppercase || false}\n additionalErrorClass='input-error--reduced-height'\n >\n {
\n )\n }\n\n renderSelect ({ name, labelId, options }) {\n const modifierName = name.split('_').join('-').toLowerCase()\n const wrapperId = `${name}__select-wrapper`\n\n return (\n
\n this.handleSet(name, value)}\n validateCallback={(value) => this.validateField(name, value)}\n inputValue={this.state[name]}\n errorMessage={this.state[getErrorFieldName(name)]}\n required\n placeholderKey={`purchase.travel_informations.attributes.${labelId}`}\n additionalErrorClass='input-error--reduced-height'\n >\n document.getElementById(wrapperId).scrollIntoView({ behavior: 'smooth', block: 'center' })}\n />\n \n
\n )\n }\n\n licenseRef = React.createRef()\n\n buttonTextId () {\n const urlParams = new URLSearchParams(this.props.railsContext.location.split('?')[1])\n const editMode = urlParams.get('action') === 'edit'\n if (this.props.disableEditMode) { return 'authentication.save' }\n return editMode ? 'authentication.validate' : 'authentication.continue'\n }\n\n render () {\n const { mandatoryInfos, meetingPlaces, licensePlateRecognition } = this.props\n const { loading, country, electric_vehicle: electricVehicle, unknown_license_plate: unknownLicensePlate, motorcycle, motorcycleMayChange, isUnknownLicensePlateDisabled } = this.state\n\n const vehicleModelIcon = motorcycle ? motorcycleIcon : carIcon\n const displayEmptyLicensePlateWarning = !isUnknownLicensePlateDisabled && licensePlateRecognition &&\n (this.state.unknown_license_plate || country.id === null)\n\n return (\n <>\n
\n
\n {isUnknownLicensePlateDisabled && (\n
\n )}\n
\n\n
\n \n )\n }\n}\n\nconst validatorByName = {\n coming_from: genericComingFromValidation,\n flight_number_arrival: genericFlightNumberArrivalValidation,\n flight_number_departure: genericFlightNumberDepartureValidation,\n meeting_place_arrival: genericMeetingPlaceArrivalValidation,\n meeting_place_departure: genericMeetingPlaceDepartureValidation,\n license_plate: genericLicensePlateValidation,\n passenger_number: genericPassengerNumberValidation,\n vehicle_model: genericVehicleModelValidation,\n train_number_exit: genericTrainNumberExitValidation,\n real_time_arrival: genericRealTimeArrivalValidation,\n real_time_arrival_airport: genericRealTimeArrivalValidation,\n real_time_arrival_station: genericRealTimeArrivalValidation,\n real_time_arrival_harbour: genericRealTimeArrivalValidation,\n id_passport_number: genericPassportNumberValidation\n}\n\nconst mapStateToProps = ({\n purchase: { mandatoryInfos, meetingPlaces,\n offer: { beginDate, endDate, offerEndDate, offerBuilder, timezone }, licensePlateRecognition\n },\n railsContext,\n user\n}) => ({\n beginDate, endDate, offerEndDate, offerBuilder, timezone, mandatoryInfos, meetingPlaces, railsContext, user, licensePlateRecognition\n})\n\nconst mapDispatchToProps = (dispatch) => ({ actions: bindActionCreators({ ...PurchaseActions }, dispatch) })\n\n// Circumvents the broken refs issue https://github.com/formatjs/formatjs/issues/1211\nconst withRouterAndRef = (WrappedComponent) => {\n class InnerComponentWithRef extends React.Component {\n render () {\n const { forwardRef, ...rest } = this.props\n return
\n }\n }\n\n const ComponentWithRouter = withRouter(InnerComponentWithRef, { withRef: true })\n return React.forwardRef((props, ref) => {\n return
\n })\n}\n\nconst withIntlAndRef = (Component) => {\n class Wrapper extends React.Component {\n render () {\n const { innerRef, ...props } = this.props\n return (\n
\n )\n }\n }\n\n const IntlWrapper = injectIntl(Wrapper)\n return React.forwardRef((props, ref) => (\n
\n ))\n}\n\nexport default withRouterAndRef(withIntlAndRef(connect(mapStateToProps, mapDispatchToProps, null, { forwardRef: true })(TravelInformationsForm)))\n","import React, { Component } from 'react'\nimport { FormattedMessage } from 'react-intl'\nimport moment from 'moment'\nimport Collapsible from 'react-collapsible'\nimport classNames from 'classnames'\n\nimport SvgImage from '../../components/SvgImage'\nimport iconEdit from 'Assets/images/svg-on-react/icon-pencil.svg'\nimport TravelInformationsForm from '../TravelInformationsForm'\n\nclass TravelInformationsSection extends Component {\n enableEditMode = () => {\n if (this.props.travelInfoEditModeSwitcher) { this.props.travelInfoEditModeSwitcher(true) }\n }\n\n disableEditMode = () => {\n if (this.props.travelInfoEditModeSwitcher) { this.props.travelInfoEditModeSwitcher(false) }\n }\n\n constructor (props) {\n super(props)\n this.state = {\n editMode: false,\n open: this.warning == null ? true : this.warning\n }\n }\n\n dateInTimezone = (dateTime, timeZone) => {\n const dateTimeInTimezone = moment(dateTime).tz(timeZone)\n return (\n
\n \n {datePattern => dateTimeInTimezone.format(datePattern)}\n \n {' '}\n \n \n )\n }\n\n render () {\n const { mandatoryInfos, forwardedRef, formRef, warning, storagePrefix } = this.props\n const { open } = this.state\n const sectionTitleId = mandatoryInfos.length > 0\n ? 'purchase.purchase_summary.travel_informations.title'\n : 'purchase.purchase_summary.travel_informations.title_vehicle'\n\n const blockClassName = classNames('purchase-summary__block row', {\n 'purchase-summary__block--orange': warning\n })\n\n const storedTravelInfos = sessionStorage.getItem(`${storagePrefix}-travelInfos`)\n const travelInfos = storedTravelInfos ? JSON.parse(storedTravelInfos) : this.props.travelInfos\n\n return (\n
\n
\n {(message) => (\n \n {this.props.editMode &&\n \n
\n
\n
\n \n \n {' : '}\n {travelInfos.unknown_license_plate ? '--' : travelInfos.license_plate}\n
\n
\n \n \n \n {':'}\n \n {travelInfos.vehicle_model}\n
\n\n { mandatoryInfos.map((mandatoryInfo, i) => (\n
\n \n \n {' : '}\n {mandatoryInfo['type'] === 'datetime_picker'\n ? this.dateInTimezone(travelInfos[mandatoryInfo['name']], this.props.parkTimezone)\n : travelInfos[mandatoryInfo['name']]}\n
\n ))}\n
\n
\n
\n
\n )}\n \n
\n )\n }\n}\n\nexport default TravelInformationsSection\n","import React, { Component } from 'react'\nimport { FormattedMessage } from 'react-intl'\nimport { Alert } from 'react-bootstrap'\n\nexport class Warning extends Component {\n closeWarning = () => {\n this.props.toggleWarning(false)\n }\n\n componentDidMount () {\n setTimeout(() => { this.closeWarning() }, 10000)\n }\n\n render () {\n const { messageId, bgStyle, className } = this.props\n\n return (\n
\n )\n }\n}\n","import { Info3dSecureDialog } from 'Components/Info3dSecureDialog'\nimport { OnPurchase3dSecureErrorDialog } from 'Components/OnPurchase3dSecureErrorDialog'\nimport { OnRegistration3dSecureErrorDialog } from 'Components/OnRegistration3dSecureErrorDialog'\nimport { PurchaseHelper } from 'Helpers/purchaseHelper'\nimport React, { Component } from 'react'\nimport { canEditTravelInfoInitial, scrollToElementWithFooterAdjustment } from 'Helpers/form'\nimport { loadStripe } from '@stripe/stripe-js'\nimport { bookingDuplicateCheck } from 'Helpers/api'\nimport { FormattedMessage } from 'react-intl'\nimport { DuplicateBookingModal } from './DuplicateBookingModal'\nimport ParkOfferSummary from './ParkOfferSummary'\nimport AccountSection from './Summary/AccountSection'\nimport DiscountPartnerSection from './Summary/DiscountPartnerSection'\nimport PaymentSection from './Summary/PaymentSection'\nimport { SummaryReassurancePanel } from './Summary/SummaryReassurancePanel'\nimport TravelInformationsSection from './Summary/TravelInformationsSection'\nimport { Warning } from './Summary/Warning'\nimport { isMultipleEntriesParamSet } from 'Helpers/purchaseTunnel'\nimport { PendingPaymentMethodModal } from 'Components/PendingPaymentMethodModal'\nimport { getCookieValue, removeCookie } from 'Helpers/application'\n\nexport class CommonSummary extends Component {\n static storagePrefix = (_props) => {\n return 'shared-parent-component-prefix'\n }\n\n locallyStored = () => {\n const storagePrefix = this.constructor.storagePrefix(this.props)\n return {\n acceptTerms: sessionStorage.getItem(`${storagePrefix}-acceptTerms`) === 'true',\n professionalUse: sessionStorage.getItem(`${storagePrefix}-professionalUse`) === 'true',\n isMultipleEntriesOption: isMultipleEntriesParamSet(storagePrefix)\n }\n }\n\n state = {\n ...this.locallyStored(),\n showPaymentForm: !this.props.user.billingIdentity,\n billingIdentity: this.props.user.billingIdentity,\n userConsent: this.props.userConsent,\n purchaseError: false,\n errorWithDateRedirect: false,\n threedsError: false,\n loading: false,\n travelInfoEditing: canEditTravelInfoInitial(this.props.travelInfos, this.props.mandatoryInfos),\n stripe: null,\n warningVisible: false,\n registerPaymentMethodTimedOut: false,\n registerPaymentMethodSuccess: false,\n summaryError: '',\n highlightTerms: false,\n stripeCompleted: false,\n stripeError: false\n }\n\n travelInfoEditModeSwitcher = (value) => {\n this.setState({ travelInfoEditing: value })\n }\n\n toggleWarning = (value) => {\n this.setState({ warningVisible: value })\n }\n\n travelInfoSectionRef = React.createRef()\n paymentSectionRef = React.createRef()\n travelFormRef = React.createRef()\n footerRef = React.createRef()\n stripeErrorRef = React.createRef()\n threedsErrorRef = React.createRef()\n\n sectionRefs = {\n travelInformationSection: this.travelInfoSectionRef,\n paymentSection: this.paymentSectionRef\n }\n\n highlightSection = (section, messageId) => {\n scrollToElementWithFooterAdjustment(this.sectionRefs[section].current, this.footerRef.current)\n if (!messageId) return\n\n this.toggleWarning(true)\n this.setState({ summaryError: messageId })\n }\n\n highlightMissingTerms = () => {\n this.setState({ highlightTerms: true })\n }\n\n protectFromReload = (name, value) => {\n if (window === undefined) return\n sessionStorage.setItem(`${this.constructor.storagePrefix(this.props)}-${name}`, value.toString())\n }\n\n componentDidMountComponentSpecific = () => { }\n\n componentDidMount = async () => {\n this.checkCardAddedNoticeFromCookies()\n this.componentDidMountComponentSpecific()\n const stripe = await loadStripe(this.props.stripePublicKey, { apiVersion: '2022-11-15' })\n this.setState({ stripe })\n }\n\n checkCardAddedNoticeFromCookies = () => {\n if (getCookieValue('card_added_on_payment_info_step')) {\n removeCookie('card_added_on_payment_info_step')\n this.toggleRegisterPaymentMethodSuccess(true)\n }\n }\n\n duplicateBookingUrl = () => {\n throw new Error('duplicateBookingUrl should be redefined on inheritance, returning a string')\n }\n\n checkDuplicateBooking = () => {\n const switchOffLoading = () => this.setState({ loading: false })\n const setDuplicateType = (type) => this.setState({ duplicateType: type })\n\n bookingDuplicateCheck(this.duplicateBookingUrl(), switchOffLoading, setDuplicateType, this.completeBooking)\n }\n\n handleSubmitPurchase = async event => {\n if (event) { event.preventDefault() }\n\n const { acceptTerms, travelInfoEditing, showPaymentForm } = this.state\n if (!acceptTerms) { return this.highlightMissingTerms() }\n\n const travelInfoIsValid = this.travelFormRef.current && this.travelFormRef.current.allFieldsAreValid()\n if (this.travelFormRef.current && ((travelInfoEditing && travelInfoIsValid) || !travelInfoIsValid)) {\n this.highlightSection('travelInformationSection', 'purchase.purchase_summary.warning_vehicle_travel')\n this.setState({ travelWarning: true })\n scrollToElementWithFooterAdjustment(this.travelFormRef.current, this.footerRef.current)\n return\n }\n\n if (showPaymentForm) {\n this.setState({ paymentWarning: true })\n this.highlightSection('paymentSection', 'purchase.purchase_summary.warning_payment')\n\n const stripeSubmitButton = document.getElementById('payment-details-submit-button')\n if (!this.state.stripeCompleted && stripeSubmitButton) { stripeSubmitButton.click() }\n\n return\n }\n\n this.toggleWarning(false)\n this.setState({ loading: true })\n await this.checkDuplicateBooking()\n }\n\n backendPostParams = () => {\n throw new Error('backendPostParams should be redefined on inheritance, returning an object')\n }\n\n handleMultipleEntriesChange = (event) => {\n const newOfferAmount = this.getOfferAmount()\n\n this.setState({ isMultipleEntriesOption: event.target.checked, offerAmount: newOfferAmount })\n this.protectFromReload('isMultipleEntriesOption', event.target.checked)\n this.protectFromReload('offerAmount', newOfferAmount)\n }\n\n getOfferAmount = () => {\n const offerAmount = this.state.isMultipleEntriesOption\n ? this.props.offerBuilder.amount.totalWithOptions : this.props.offerBuilder.amount.totalWithoutOptions\n return parseFloat(offerAmount)\n }\n\n handleShowPaymentForm = () => {\n const { showPaymentForm } = this.state\n this.setState({ showPaymentForm: !showPaymentForm })\n }\n\n renderTermsLink (type, path) {\n return (\n
\n \n )\n }\n\n show3dsInfo = (event) => { event.preventDefault(); $('#info-3d-secure').modal('show') }\n\n backendPostUrl = () => {\n throw new Error('backendPostUrl should be redefined on inheritance, returning a string')\n }\n\n setErrors = ({ threedsError, purchaseError, stripeError, errorWithDateRedirect, scrollToTop }) => {\n this.setState({ threedsError, purchaseError, stripeError, errorWithDateRedirect })\n\n if (scrollToTop) return window.scrollTo({ top: 0, left: 0, behavior: 'smooth', block: 'start' })\n if (threedsError) return this.threedsErrorRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' })\n if (stripeError) return this.stripeErrorRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' })\n if (purchaseError) return this.highlightSection('paymentSection')\n }\n\n setStripeError = (stripeErrorMessage) => {\n this.setState({\n stripeError: stripeErrorMessage,\n threedsError: false,\n purchaseError: false,\n errorWithDateRedirect: false\n })\n this.stripeErrorRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' })\n }\n\n unsetLoading = () => this.setState({ loading: false })\n\n completeBooking = async () => {\n const purchaseHelper = new PurchaseHelper({\n callerProps: this.props,\n stripeObject: this.state.stripe,\n setErrors: this.setErrors,\n unsetLoading: this.unsetLoading,\n backendPostUrl: this.backendPostUrl(),\n backendPostParams: this.backendPostParams()\n })\n await purchaseHelper.completeBooking()\n }\n\n toggleRegisterPaymentMethodSuccess = value => this.setState({ registerPaymentMethodSuccess: value })\n\n toggleRegisterPaymentMethodTimedOut = value => this.setState({ registerPaymentMethodTimedOut: value })\n\n modalWindows = () => {\n return <>\n
\n
\n
\n
{\n this.setState({ loading: true })\n this.completeBooking()\n }}\n duplicateType={this.state.duplicateType} />\n {this.state.warningVisible && \n
\n }\n\n editableSection = ({ saveUrl }) => {\n const {\n localePrefix, mandatoryInfos, offerBuilder, travelInfos, user, provider, mobilePurchaseTunnelPaymentInside, mobilePurchaseTunnel\n } = this.props\n return <>\n this.setState({ travelWarning: false })} />\n this.setState({ paymentWarning: false })}\n handleStripeChange={(complete) => this.setState({ stripeCompleted: complete })}\n handleStripeError={() => this.setState({\n threedsError: false,\n purchaseError: false,\n errorWithDateRedirect: false\n })}\n green\n />\n \n }\n\n nonPaymentErrorsWithRedirectSection = () => {\n const { purchaseError, errorWithDateRedirect } = this.state\n const errorParts = purchaseError && errorWithDateRedirect && purchaseError.split('. ')\n if (!errorParts) return\n\n const { localePrefix, offerBuilder, type } = this.props\n const parkUrl = `${localePrefix}/parkings/${offerBuilder.park.id}${type === 'subscription' ? `/?type=${type}` : ''}`\n return (\n \n )\n }\n\n paymentErrorsSection = () => {\n const { stripeError, threedsError, purchaseError, errorWithDateRedirect } = this.state\n return <>\n {\n stripeError &&\n \n }\n\n \n {threedsError && !purchaseError &&\n
\n
\n \n \n \n \n
\n
\n }\n
\n {!threedsError && !purchaseError &&\n
\n \n \n \n \n \n
}\n
\n\n {purchaseError && !errorWithDateRedirect &&\n
\n
\n
\n {purchaseError}\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 {highlightTerms &&\n <>\n
\n \n }\n
\n
\n
\n
\n {this.modalWindows()}\n\n
\n
\n\n
\n
\n \n \n\n {this.nonPaymentErrorsWithRedirectSection()}\n\n
\n
\n
\n
\n
\n
\n {this.parkOfferSummary()}\n\n {this.reassurancePanel()}\n
\n
\n
\n
\n {this.editableSection({ saveUrl: false })}\n\n {this.paymentErrorsSection()}\n
\n
\n
\n {user.billingIdentity &&\n
\n
\n\n {this.checkboxesSection('purchase-summary__checkbox--padded-left')}\n\n
\n \n {loading && \n \n \n
\n
\n }\n
\n
\n
\n {\n PROGRESS_STATES.includes(purchaseState) &&\n
\n\n
\n {\n purchaseState === CONFIRMED_STATE &&\n
\n
\n }\n
\n
\n \n \n
\n\n
\n {DESCRIPTIONS[purchaseState] &&\n DESCRIPTIONS[purchaseState].map((messageId) => {\n const descriptionTextClasses = classNames('registration-progress__textblock--longword', {\n 'registration-progress__textblock--left': CONFIRMED_STATE.includes(purchaseState),\n 'registration-progress__textblock--centered': !CONFIRMED_STATE.includes(purchaseState)\n })\n return (
\n
\n )\n })\n }\n
\n\n {\n ERROR_STATE.includes(purchaseState) &&\n <>\n
\n \n
\n \n }\n
\n
\n {showRegistrationProgress &&\n
\n }\n\n {!showRegistrationProgress &&\n
\n \n }\n\n { showUsefulPhoneNumbers &&\n
\n }\n\n {purchaseState !== 'error' &&\n <>\n
\n {offerType === 'package' &&\n
\n {f => offerEndDate.format(f)},\n time: \n }}\n />\n
\n }\n
\n
\n
\n
\n
\n\n {purchaseState === 'confirmed' &&\n <>\n
\n \n }\n \n }\n
\n\n
\n\n {purchaseState !== 'error' &&\n
\n {offerType === 'package' &&\n
\n {f => offerEndDate.format(f)},\n time: \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 {history.location.search.includes('success=true')\n ?
\n :
\n }\n
\n
\n
\n
\n {this.modalWindows()}\n\n
\n
\n
\n
\n\n {this.nonPaymentErrorsWithRedirectSection()}\n\n
\n
\n
\n
\n
\n
\n {this.parkOfferSummary({\n oldBeginDate: this.props.oldBeginAt,\n oldEndDate: this.props.oldEndAt,\n paidPriceAlternativeCurrency: this.props.paidPriceAlternativeCurrency,\n oldPrice: this.props.oldAmount\n })}\n\n {this.reassurancePanel()}\n
\n
\n
\n
\n
\n
\n {this.editableSection({ saveUrl: true })}\n\n {this.paymentErrorsSection()}\n
\n
\n
\n {user.billingIdentity &&\n <>\n
\n
\n\n {this.checkboxesSection()}\n\n
\n {loading &&\n
\n
\n }\n {!loading &&\n <>\n
\n \n \n \n \n \n \n \n }\n \n
\n \n }\n
\n
\n \n \n
\n \n\nexport default PurchaseTunnel\n","export default {\n id: \"icon-user-usage\",\n viewBox: \"0 0 18 19\",\n url: __webpack_public_path__ + \"assets/sprite-aa024e1f.svg#icon-user\",\n toString: function () {\n return this.url;\n }\n }","import React, { Component } from 'react'\nimport { FormattedMessage } from 'react-intl'\nimport ReactDOM from 'react-dom'\nimport moment from 'moment'\nimport FormInput from '../../../components/Form/FormInput'\nimport FormInputPassword from '../../../components/Form/FormInputPassword'\nimport Loader from '../../../components/Loader'\nimport { datalayerPushGTM, datalayerPush } from '../../../helpers/application'\nimport { localePrefix } from '../../../helpers/authentication'\nimport { performValidation, performPasswordValidation, genericUserBlankValidation, genericEmailValidation,\n genericNewPasswordValidation, genericConfirmPasswordValidation\n} from '../../../helpers/formValidations'\nimport iconMail from '../../../../../../../app/assets/images/svg-on-react/icon-mail.svg'\nimport iconUser from '../../../../../../../app/assets/images/svg-on-react/icon-user.svg'\nimport OpI18n from '../../../components/OpI18n'\nimport { PasswordRecoveryTunnel } from '../../Connection/components/PasswordRecoveryTunnel'\n\nclass RegistrationAccountStepForm extends Component {\n constructor (props) {\n super(props)\n\n this.state = { ...{\n firstName: '',\n firstNameError: false,\n lastName: '',\n lastNameError: false,\n email: '',\n emailError: false,\n newPassword: '',\n newPasswordError: false,\n matchPasswordError: false,\n confirmPassword: '',\n confirmPasswordError: false,\n loading: false\n },\n ...this.props.defaults }\n }\n\n componentDidMount () {\n if (this.state.provider === 'facebook') { this.performValidations() }\n }\n\n performValidations () {\n // Todo: refactor code\n const inputValidations = [\n performValidation.call(this, genericUserBlankValidation, this.state.firstName, 'firstNameError', 'first_name'),\n performValidation.call(this, genericUserBlankValidation, this.state.lastName, 'lastNameError', 'last_name'),\n performValidation.call(this, genericEmailValidation, this.state.email, 'emailError')\n ]\n\n if (this.state.provider !== 'facebook') {\n inputValidations.push(performPasswordValidation.call(this, genericNewPasswordValidation, this.state.newPassword, ['newPasswordError', 'confirmPasswordError']))\n inputValidations.push(performPasswordValidation.call(this, genericConfirmPasswordValidation, this.state.confirmPassword, ['confirmPasswordError', 'newPasswordError']))\n }\n\n return inputValidations\n }\n\n submitSignUp = () => {\n const { firstName, lastName, email, newPassword, confirmPassword } = this.state\n const { source } = this.props\n const prefix = localePrefix.call(this)\n\n this.setState({ loading: true })\n return fetch(`${prefix}/users`, {\n method: 'POST',\n credentials: 'include',\n headers: {\n 'Accept': 'application/json',\n 'Content-Type': 'application/json',\n 'X-CSRF-Token': $('meta[name=\"csrf-token\"]').attr('content')\n },\n body: JSON.stringify({\n user: {\n first_name: firstName,\n last_name: lastName,\n email: email,\n password: newPassword,\n password_confirmation: confirmPassword,\n terms_of_service: '1'\n }\n })\n }).then((response) => {\n return response.json()\n }).then((json) => {\n const errors = json.errors\n if (errors) {\n this.setState({\n emailError: errors.email[0],\n loading: false\n })\n for (const error in json.errors) {\n if (error !== 'email') {\n datalayerPushGTM('form-tracking', 'Forms', 'Registration', json.errors[error][0])\n } else {\n datalayerPushGTM('form-tracking', 'Forms', 'Registration', errors.email[0])\n }\n }\n } else {\n datalayerPushGTM('form-tracking', 'Users', 'signup/success/email', json.id)\n\n const pushParams = {\n event: 'sign_up',\n ep_method: 'email',\n up_language: (window._oneparkDatas.up_language || null),\n up_locale: (window._oneparkDatas.up_locale || null),\n up_user_id: json.google_analytics_user_id\n }\n datalayerPush(pushParams)\n\n window.location.href = `${prefix}/member/billing-informations?origin=${source}`\n }\n })\n }\n\n handleSubmit = (e) => {\n e.preventDefault()\n\n const inputValidations = this.performValidations()\n\n if (!inputValidations.includes(false)) {\n this.submitSignUp(this.state)\n }\n }\n\n isEmailTakenError = (emailError) => {\n return emailError && emailError.indexOf('{email_taken}') >= 0\n }\n\n handleClickResetPassword = () => {\n const { railsContext, source } = this.props\n const { email } = this.state\n\n window.Cookies.set('password_recovery_email', email, { expires: moment().add(15, 'minutes').toDate() })\n\n ReactDOM.render(\n (\n ),\n document.getElementById('password-recovery-modal-body')\n )\n }\n\n render () {\n const { firstName, firstNameError, lastName, lastNameError,\n email, emailError, newPassword, newPasswordError, confirmPassword,\n confirmPasswordError, loading, provider, source } = this.state\n const { cguLink } = this.props\n const prefix = localePrefix.call(this)\n\n return (\n \n )\n }\n}\n\nexport default RegistrationAccountStepForm\n","import React, { Component } from 'react'\nimport { FormattedMessage } from 'react-intl'\nimport { resizeWindow } from '../helpers/resizeWindow'\nimport { localePrefix, renderLoginModal } from '../../../helpers/authentication'\nimport RegistrationAccountStepForm from './RegistrationAccountStepForm'\nimport Provider from '../../components/Provider'\nimport SwitchAuthentication from '../../components/SwitchAuthentication'\n\nclass RegistrationAccountStep extends Component {\n constructor (props) {\n super(props)\n\n this.state = { ...this.props.defaults }\n }\n\n componentDidMount () { resizeWindow() }\n\n componentDidUpdate () { resizeWindow() }\n\n handleClickConnectButton = (e) => {\n e.preventDefault()\n const { railsContext, source } = this.props\n renderLoginModal(railsContext, source)\n }\n\n renderProvider = () => {\n const { source, railsContext } = this.props\n return (\n \n\n
\n
\n \n \n\n
\n\n
\n\n {this.renderProvider()}\n\n
\n
\n
{country.name} \n \n
{country.phone_prefix} \n
\n
\n
\n this.handleSelectChange(newValue)}\n />\n
\n
\n
\n \n {phoneNumberValue ? (\n \n \n ) : placeholder}\n \n
\n
\n {!editMode &&\n
\n
\n }\n\n
\n {editMode &&\n
\n
\n }\n
\n
\n \n × \n \n }\n \n {(!mobilePurchaseTunnel || source === 'header') &&
}\n
\n\n
\n
\n
\n \n \n \n \n \n \n )\n }\n}\n\nexport default RegistrationCarouselWithContext\n","import React, { Component } from 'react'\nimport { FormattedMessage } from 'react-intl'\nimport FormInputPassword from '../../../components/Form/FormInputPassword'\nimport Loader from '../../../components/Loader'\nimport {\n performPasswordValidation,\n genericConfirmPasswordValidation,\n genericNewPasswordValidation\n} from '../../../helpers/formValidations'\nimport { getParam, datalayerPushGTM } from '../../../helpers/application'\nimport { localePrefix } from '../../../helpers/authentication'\n\nclass ResetPassword extends Component {\n state = {\n newPassword: '',\n confirmPassword: '',\n resetPasswordToken: getParam()['reset_password_token'],\n newPasswordError: false,\n confirmPasswordError: false,\n loading: false\n }\n\n formSubmitted (e) {\n e.preventDefault()\n\n // Todo: refactor code\n const inputValidations = [\n performPasswordValidation.call(this, genericNewPasswordValidation, this.state.newPassword, ['newPasswordError', 'confirmPasswordError']),\n performPasswordValidation.call(this, genericConfirmPasswordValidation, this.state.confirmPassword, ['confirmPasswordError', 'newPasswordError'])\n ]\n\n if (!inputValidations.includes(false)) { this.doReinitialise() }\n }\n\n doReinitialise () {\n const { newPassword, confirmPassword, resetPasswordToken } = this.state\n const prefix = localePrefix.call(this)\n\n this.setState({ loading: true })\n fetch(`${prefix}/users/password`, {\n method: 'PUT',\n credentials: 'include',\n headers: {\n 'Accept': 'application/json',\n 'Content-Type': 'application/json',\n 'X-CSRF-Token': $('meta[name=\"csrf-token\"]').attr('content')\n },\n body: JSON.stringify({\n user: {\n password: newPassword,\n password_confirmation: confirmPassword,\n reset_password_token: resetPasswordToken\n }\n })\n }).then((response) => {\n if (response.status === 204) {\n datalayerPushGTM('form-tracking', 'Users', 'password-reset/success', response.id)\n window.location.replace('/')\n } else { return response.json() }\n }).then((json) => {\n let msg = ''\n if (json && json.errors) {\n for (const error in json.errors) {\n msg += json.errors[error][0]\n }\n this.setState({\n confirmPasswordError: msg,\n loading: false\n })\n datalayerPushGTM('form-tracking', 'Forms', 'Password-reset', msg)\n }\n })\n }\n\n render () {\n const { newPassword, confirmPassword,\n newPasswordError, confirmPasswordError, loading } = this.state\n const { cguLink } = this.props\n\n const inputNewPasswordConfig = {\n id: 'user_new_password',\n setCallback: (value) => this.setState({ newPassword: value }),\n validateCallback: (value) => performPasswordValidation.call(this, genericNewPasswordValidation, value, ['newPasswordError', 'confirmPasswordError']),\n errorMessage: newPasswordError,\n inputValue: newPassword,\n placeholderKey: 'authentication.connection.reset_password.new_password'\n }\n\n const inputConfirmPasswordConfig = {\n id: 'user_confirm_password',\n setCallback: (value) => this.setState({ confirmPassword: value }),\n validateCallback: (value) => performPasswordValidation.call(this, genericConfirmPasswordValidation, value, ['confirmPasswordError', 'newPasswordError']),\n errorMessage: confirmPasswordError,\n inputValue: confirmPassword,\n placeholderKey: 'authentication.connection.reset_password.confirm_password'\n }\n\n return (\n \n )\n }\n}\n\nexport default ResetPassword\n","import React, { Component } from 'react'\nimport { connect } from 'react-redux'\nimport { bindActionCreators } from 'redux'\n\nimport * as FilterActions from 'Actions/FilterActions'\nimport { FiltersPanel } from 'Components/FiltersPanel'\n\nclass ConnectedDesktopFiltersModal extends Component {\n handleClickApplyFilters = async (newFilters) => {\n const { updateParkFilters } = this.props.actions\n await updateParkFilters(newFilters)\n this.props.onClose()\n }\n\n render () {\n const { showAllFilters } = this.props.showAllFilters\n\n return (\n \n \n × \n \n
\n )\n }\n}\n\nconst mapDispatchToProps = (dispatch) => ({ actions: bindActionCreators({ ...FilterActions }, dispatch) })\n\nexport const DesktopFiltersModal = connect(null, mapDispatchToProps)(ConnectedDesktopFiltersModal)\n","import React, { Component } from 'react'\nimport { connect } from 'react-redux'\nimport { bindActionCreators } from 'redux'\nimport { FormattedMessage } from 'react-intl'\nimport Observed from 'react-observed'\nimport _scrollIntoView from 'scroll-into-view-if-needed'\nimport _smoothScrollIntoView from 'smooth-scroll-into-view-if-needed'\n\nimport { MobileFiltersModal } from 'Components/MobileFiltersModal'\nimport { DesktopFiltersModal } from 'Components/DesktopFiltersModal'\nimport * as SearchActions from '../../../actions/SearchActions'\nimport DropdownButton from '../components/DropdownButton'\nimport HistoryModalOp from '../components/HistoryModalOp'\nimport ModalOp from 'Components/ModalOp'\nimport { ParkCard } from 'Components/ParkCard'\nimport { isMobile } from '../helpers/browser'\nimport { locationHasParam, removeParamFromLocation } from '../helpers/application'\nimport { getMapWrapperComponent } from '../../../libs/map'\nimport { getDiscount } from '../helpers/park'\n\nconst FILTERS_MODAL_NAME = 'filters_search'\nconst MAP_MODAL_NAME = 'map_search'\nconst PARK_ID_PREFIX = 'park-'\n\nclass SearchPage extends Component {\n state = {\n activeMarkerId: null,\n activeInfoWindowId: null,\n initModalMap: false,\n initModalFilters: false\n }\n\n componentDidMount () {\n this.calculatePosition()\n $(window).on('scroll', this.handleScroll)\n $(window).on('resize', this.handleResize)\n $(window).on('toggleSearch', this.handleToogleSearch)\n $(window).on('orientationchange', this.handleOrientationChange)\n\n this.props.actions.loadBestOffers()\n\n if ([FILTERS_MODAL_NAME, MAP_MODAL_NAME].some(name => locationHasParam('modal', name))) {\n history.replaceState({}, '', removeParamFromLocation('modal'))\n }\n }\n\n componentWillUnmount () {\n $(window).off('scroll', this.handleScroll)\n $(window).off('resize', this.handleResize)\n $(window).off('toggleSearch', this.handleToogleSearch)\n $(window).off('orientationchange', this.handleOrientationChange)\n }\n\n handleResize = () => requestAnimationFrame(this.calculatePosition)\n\n handleScroll = () => requestAnimationFrame(this.calculatePosition)\n\n handleToogleSearch = () => requestAnimationFrame(this.calculatePosition)\n\n handleOrientationChange = () => {\n if (navigator.platform === 'iPad') { // iPad does not trigger resize event after orientation change\n setTimeout(() => this.handleResize(), 250)\n }\n }\n\n calculatePosition = () => {\n const controlsElement = document.querySelector('.search-page__parks__desktop-controls')\n if (controlsElement) {\n // Top and bottom positions from getBoundingClientRect have negative values...\n const { top: navTop, bottom: navBottom } = document.querySelector('#header-on-react .header__nav').getBoundingClientRect()\n const { top: searchTop, bottom: searchBottom } = document.getElementById('search-wrapper').getBoundingClientRect()\n const navHeight = navBottom - navTop\n const searchHeight = searchBottom - searchTop\n\n const searchOpen = searchHeight > 0\n\n const top = searchOpen ? searchHeight + navHeight : navHeight\n controlsElement.style.top = `${top}px`\n\n const isStuck = searchOpen ? $(window).scrollTop() > navHeight : $(window).scrollTop() > 0\n if (isStuck) {\n controlsElement.style['border-bottom'] = 'solid 1px #E3E3E3'\n controlsElement.style['box-shadow'] = '-1px 0px 3px rgba(0, 0, 0, .15)'\n } else {\n controlsElement.style['border-bottom'] = null\n controlsElement.style['box-shadow'] = null\n }\n }\n }\n\n handleClickOpenMap = () => {\n this.setState({ initModalMap: true }, () => $('#react-map-modal').modal('show'))\n }\n\n handleClickFilters = () => {\n this.setState({ initModalFilters: true }, () => $('#react-filters-modal').modal('show'))\n }\n\n handleClickMobileFilters = () => {\n this.setState({ initModalFilters: true }, () => $('#react-mobile-filters-modal').modal('show'))\n }\n\n handleClickOpenSearch = () => {\n $('.icon-search:not(.active)').click()\n }\n\n handleCloseMobileFilters = () => {\n $('#react-mobile-filters-modal').modal('hide')\n }\n\n handleCloseFilters = () => {\n $('#react-filters-modal').modal('hide')\n }\n\n handleMarkerMouseOver = (id) => {\n if (!this.state.activeInfoWindowId) {\n this.setState({ activeMarkerId: id })\n }\n }\n\n handleMarkerMouseOut = (id) => {\n if (!this.state.activeInfoWindowId) {\n this.setState({ activeMarkerId: null })\n }\n }\n\n handleMapMounted = (ref) => {\n this.map = ref\n }\n\n handleSelectPark = async (id, shouldScrollIntoView) => {\n const { activeMarkerId } = this.state\n const activeCard = document.querySelector(`#${PARK_ID_PREFIX}${id}`)\n if (activeCard) {\n if (shouldScrollIntoView) {\n const scrollIntoView = 'scrollBehavior' in document.documentElement.style ? _scrollIntoView : _smoothScrollIntoView\n scrollIntoView(activeCard, { behavior: 'smooth', block: 'center' })\n } else if (!shouldScrollIntoView && id !== activeMarkerId) {\n this.centerMapOnPark(id)\n }\n }\n\n this.setState({ activeMarkerId: id, activeInfoWindowId: id })\n\n if (!this.props.parks.find(park => park.id === id).services) {\n this.props.actions.loadParkSummary(id)\n }\n }\n\n handleUnselectPark = (id) => {\n this.setState({ activeMarkerId: null, activeInfoWindowId: null })\n }\n\n handleSortBy = (sortBy) => this.props.actions.updateSorting(sortBy)\n\n centerMapOnPark (id) {\n const park = this.props.parks.find(park => park.id === id)\n if (park && this.map) {\n const { lat, lng } = park.address\n // GMap\n if (this.map.panTo) {\n this.map.panTo({ lat, lng })\n }\n // Mapbox\n if (this.map.flyTo) {\n this.map.flyTo({\n center: [lng, lat],\n easing: (t) => t\n })\n }\n }\n }\n\n render () {\n const { lat, lng, clusters, bookableParks, parks, queryState, type, zoom, isUserOnMobile } = this.props\n const sortBy = this.props.sortBy\n const { activeMarkerId, activeInfoWindowId, initModalMap, initModalFilters } = this.state\n const sortOptions = [\n { id: 'distance', label: \n
\n
\n\n {parks.length === 0 &&\n
\n \n \n
\n }\n {parks.map((park, i) =>\n
{\n if (!isMobile()) {\n e.preventDefault()\n this.handleSelectPark(park.id)\n }\n }}\n showAddress\n showBookingButtons\n />)}\n\n {parks.some(park => getDiscount(park).discountRate < 0) &&\n \n
\n }\n \n\n
\n \n \n \n \n
\n\n {\n initModalMap &&\n
\n {\n React.createElement(\n getMapWrapperComponent(),\n {\n autoSearch: true,\n defaultCenter: { lat, lng },\n defaultZoom: zoom,\n clusters,\n isSubscription: type === 'subscription',\n isUserOnMobile: isUserOnMobile,\n parks: bookableParks,\n showMainMarker: true,\n zoomControl: false\n }\n )\n }\n \n }\n\n {\n initModalFilters && isUserOnMobile &&\n
\n \n }\n\n {\n initModalFilters && !isUserOnMobile &&\n
\n \n }\n\n
\n
\n {({ isInView, mapRef }) => (\n \n {isInView && (\n React.createElement(\n getMapWrapperComponent(),\n {\n activeInfoWindowId,\n autoSearch: true,\n defaultCenter: { lat, lng },\n defaultZoom: zoom,\n clusters,\n isSubscription: type === 'subscription',\n isUserOnMobile: isUserOnMobile,\n onMarkerMouseOver: this.handleMarkerMouseOver,\n onMarkerMouseOut: this.handleMarkerMouseOut,\n onMapMounted: this.handleMapMounted,\n onSelectPark: this.handleSelectPark,\n onUnselectPark: this.handleUnselectPark,\n parks,\n showMainMarker: true,\n zoomControl: true\n }\n )\n )}\n
\n )}\n \n
\n
\n
\n )\n }\n}\n","import React, { Component } from 'react'\nimport classNames from 'classnames'\nimport { FormattedMessage, injectIntl } from 'react-intl'\nimport franceNewFormat from '../../../../../assets/images/plates/franceNewFormat.png'\nimport franceOldFormat from '../../../../../assets/images/plates/franceOldFormat.png'\nimport belgiumNewFormat from '../../../../../assets/images/plates/belgiumNewFormat.png'\nimport belgiumOldFormat from '../../../../../assets/images/plates/belgiumOldFormat.png'\nimport spainNewFormat from '../../../../../assets/images/plates/spainNewFormat.png'\nimport spainOldFormat from '../../../../../assets/images/plates/spainOldFormat.png'\nimport germanyNewFormat from '../../../../../assets/images/plates/germanyNewFormat.png'\nimport switzerlandNewFormat from '../../../../../assets/images/plates/switzerlandNewFormat.png'\nimport italyNewFormat from '../../../../../assets/images/plates/italyNewFormat.png'\nimport italyOldFormat from '../../../../../assets/images/plates/italyOldFormat.png'\nimport netherlandsNewFormat from '../../../../../assets/images/plates/netherlandsNewFormat.png'\nimport netherlandsOldFormat from '../../../../../assets/images/plates/netherlandsOldFormat.png'\nimport portugalNewFormat from '../../../../../assets/images/plates/portugalNewFormat.png'\nimport portugalOldFormat from '../../../../../assets/images/plates/portugalOldFormat.png'\nimport {\n COUNTRIES_WITH_CUSTOM_TOOLTIP,\n FRANCE_COUNTRY_ID,\n GERMANY_COUNTRY_ID,\n BELGIUM_COUNTRY_ID,\n ITALY_COUNTRY_ID,\n LICENSE_PLATE_NEW_FORMATS,\n NETHERLANDS_COUNTRY_ID,\n PORTUGAL_COUNTRY_ID,\n SPAIN_COUNTRY_ID,\n SWITZERLAND_COUNTRY_ID\n} from './constants'\n\nexport class HelpTooltip extends Component {\n state = {\n tooltipRef: React.createRef()\n }\n\n render () {\n const { country, intl, isOpened, setIsOpened } = this.props\n const tooltipClasses = classNames('tooltip-op__box', 'tootltip-op-arrow', 'tooltip-op__box--top-right', { hide: !isOpened })\n const newFormat = LICENSE_PLATE_NEW_FORMATS[country.id]\n\n const newLicensePlateFormats = {\n [FRANCE_COUNTRY_ID]: franceNewFormat,\n [SPAIN_COUNTRY_ID]: spainNewFormat,\n [BELGIUM_COUNTRY_ID]: belgiumNewFormat,\n [NETHERLANDS_COUNTRY_ID]: netherlandsNewFormat,\n [PORTUGAL_COUNTRY_ID]: portugalNewFormat,\n [ITALY_COUNTRY_ID]: italyNewFormat,\n [GERMANY_COUNTRY_ID]: germanyNewFormat,\n [SWITZERLAND_COUNTRY_ID]: switzerlandNewFormat\n }\n\n const oldLicensePlateFormats = {\n [FRANCE_COUNTRY_ID]: franceOldFormat,\n [BELGIUM_COUNTRY_ID]: belgiumOldFormat,\n [SPAIN_COUNTRY_ID]: spainOldFormat,\n [NETHERLANDS_COUNTRY_ID]: netherlandsOldFormat,\n [PORTUGAL_COUNTRY_ID]: portugalOldFormat,\n [ITALY_COUNTRY_ID]: italyOldFormat\n }\n\n return (\n \n )\n }\n}\n\nexport default injectIntl(HelpTooltip)\n","import React, { Component } from 'react'\nimport PropTypes from 'prop-types'\nimport { Dropdown } from './Dropdown'\nimport { LicensePlateComponent } from './LicensePlateComponent'\nimport TooltipComponent from 'Components/TooltipComponent'\nimport AttributeCheckbox from './AttributeCheckbox'\nimport { Warning } from './Warning'\nimport { FormattedMessage, injectIntl } from 'react-intl'\nimport { COUNTRY_LICENSE_PLATE_REGEX, LICENSE_PLATE_SAMPLES, LICENSE_PLATE_COUNTRIES, OTHER_COUNTRY } from './constants'\nimport HelpTooltip from './HelpTooltip'\nimport { LicensePlateHelpModal } from './LicensePlateHelpModal'\n\nclass VehicleCard extends Component {\n state = {\n licensePlateValue: this.props.licensePlateValue || '',\n country: LICENSE_PLATE_COUNTRIES.find(item => item.id === this.props.countryId),\n validLicensePlate: null,\n isHelpTooltipOpened: false,\n electricVehicle: this.props.electricVehicle || false,\n motorcycle: this.props.motorcycle,\n motorcycleMayChange: this.props.motorcycleMayChange,\n isUnknownLicensePlateDisabled: this.props.isUnknownLicensePlateDisabled,\n unknownLicensePlate: this.props.unknownLicensePlate || false,\n vehicleModel: this.props.vehicleModel || '',\n travelInfoRef: React.createRef(),\n isMobile: false\n }\n\n componentDidMount () {\n // having empty field is ok until the user submits/blurs from it\n if (this.state.licensePlateValue !== '') this.validateLicensePlate()\n this.setState({ isMobile: window.innerWidth < 768 })\n }\n\n handleCountryChange = (newCountry) => {\n this.setState({ country: newCountry }, function () {\n this.validateLicensePlate()\n })\n }\n\n setIsHelpTooltipOpened = (isHelpTooltipOpened) => {\n this.setState({ isHelpTooltipOpened })\n }\n\n handleLicensePlateInputChange = (value) => {\n this.setState({ licensePlateValue: value })\n }\n\n handleInputFocus = () => {\n this.setState({ validLicensePlate: null, isHelpTooltipOpened: false })\n }\n\n handleInputBlur = () => {\n this.validateLicensePlate()\n }\n\n validateLicensePlate = () => {\n const { licensePlateValue, country, unknownLicensePlate } = this.state\n\n if (unknownLicensePlate) {\n this.setState({ validLicensePlate: null })\n return\n }\n\n const normalizedLicensePlateValue = licensePlateValue.trim()\n\n if (normalizedLicensePlateValue === '') {\n this.setState({ validLicensePlate: false })\n return\n }\n\n // TODO: to be changed when new requirements appears after [OPDEV-2150]\n const validLicensePlate = new RegExp(COUNTRY_LICENSE_PLATE_REGEX[null], 'gm').test(normalizedLicensePlateValue)\n\n this.setState({ validLicensePlate, isHelpTooltipOpened: !validLicensePlate })\n }\n\n handleCheckboxChange = (name, value) => {\n const attributeName = name.replace(/_([a-z])/g, (_, letter) => letter.toUpperCase())\n\n this.setState({ [attributeName]: value })\n }\n\n handleChange = (key) => (event) => {\n this.setState({ [key]: event.target.value })\n }\n\n handleUnknownLicensePlateSet = (name, value) => {\n const attributeName = name.replace(/_([a-z])/g, (_, letter) => letter.toUpperCase())\n\n this.setState({ [attributeName]: value }, () => this.validateLicensePlate())\n }\n\n render () {\n const { licensePlateValue, country, validLicensePlate, electricVehicle, motorcycle, unknownLicensePlate, vehicleModel, motorcycleMayChange, isUnknownLicensePlateDisabled } = this.state\n const licensePlateRecognition = this.props.licensePlateRecognition\n const { isMobile } = this.state\n\n return (\n \n {(!isUnknownLicensePlateDisabled && licensePlateRecognition && (unknownLicensePlate || country.id === null)) &&\n
}\n\n
\n
\n\n {isUnknownLicensePlateDisabled && (\n
\n )}\n\n
\n\n
\n\n
\n
\n
\n \n \n
\n {!unknownLicensePlate &&
}\n
\n
\n
\n \n { (country.id !== OTHER_COUNTRY) &&\n \n )\n }\n
\n
\n {!unknownLicensePlate && (!isMobile ? (\n
\n
\n ) : (\n
\n
$(`#license-plate-help-modal`).modal('show')}\n >\n \n ))}\n
\n \n
\n \n
\n
\n
\n
\n
\n
\n
\n \n \n
\n
\n )\n }\n}\n","import PropTypes from 'prop-types'\nimport React, { Component } from 'react'\nimport stickybits from 'stickybits'\n\nexport default class Affix extends Component {\n static propTypes = {\n offsetTop: PropTypes.number.isRequired,\n className: PropTypes.string\n }\n\n sticky = null\n\n componentDidMount () {\n $(window).on('scroll resize', this.handleResize)\n $(window).on('orientationchange', this.handleOrientationChange)\n this.sticky = stickybits(this.el, { stickyBitStickyOffset: this.props.offsetTop, useStickyClasses: true })\n }\n\n componentWillUnmount () {\n $(window).off('scroll resize', this.handleResize)\n $(window).off('orientationchange', this.handleOrientationChange)\n this.sticky.cleanup()\n }\n\n handleResize = () => requestAnimationFrame(() => this.sticky.update())\n\n handleOrientationChange = () => {\n // iPad does not trigger resize event after orientation change\n if (navigator.platform === 'iPad') {\n setTimeout(() => this.sticky.update(), 250)\n }\n }\n\n render () {\n const { className, children } = this.props\n return (\n { this.el = el }}>\n {children}\n
\n )\n }\n}\n","import React, { Component } from 'react'\nimport { FormattedMessage } from 'react-intl'\n\nimport Affix from '../components/Affix'\nimport { hasDescription } from '../helpers/park'\n\nexport default class NavTabs extends Component {\n componentDidMount () {\n $('body').scrollspy({ target: '#park-navigation-affix', offset: getNavBarHeight() })\n\n const $innerMenu = $('#park-navigation-affix').find('.park-navigation__inner')\n $('#park-navigation-affix').on('activate.bs.scrollspy', (event) => {\n const leftPos = $(event.target).offset().left + $innerMenu.scrollLeft() - 20\n $innerMenu.animate({ scrollLeft: leftPos < 0 ? 0 : leftPos }, 500)\n })\n\n // When the navbar becomes stuck, it's removed from the page. This causes the div below to jump\n // and disturbs the scroll on navbar items click\n // https://stackoverflow.com/questions/20652581/bootstrap-affix-nav-causes-div-below-to-jump-up\n this.el.style.minHeight = getNavBarHeight() + 'px'\n }\n\n componentWillUnMount () {\n $('#park-navigation-affix').off('activate.bs.scrollspy')\n }\n\n render () {\n return (\n \n { this.el = el }}>\n
\n {this.getItemsListElement()}\n
\n
\n )\n }\n\n getItemsListElement () {\n return (\n \n )\n }\n\n getMenuKeys () {\n return this.props.park.isSeo\n ? [...(hasDescription(this.props.park) ? ['description'] : []), 'location']\n : ['description', 'access', 'location', 'reviews']\n }\n}\n\nexport const smoothScrollTo = sectionId => {\n const scrollTop = $('#' + sectionId).offset().top - getNavBarHeight() + 2\n $('html, body').animate({ scrollTop }, 300, 'swing')\n}\n\nconst getNavBarHeight = () => document.getElementById('park-navigation-affix').clientHeight\n","import React from 'react'\n\nimport { smoothScrollTo } from '../NavTabs'\n\nconst AddressItem = ({ park }) => (\n {\n e.preventDefault()\n smoothScrollTo('park-location')\n }}\n >\n {park.address.address}, {park.address.zipcode} {park.address.city}
\n \n)\n\nexport default AddressItem\n","export default {\n id: \"icon-arrow-down-white-usage\",\n viewBox: \"0 0 53 32\",\n url: __webpack_public_path__ + \"assets/sprite-aa024e1f.svg#icon-arrow-down-white\",\n toString: function () {\n return this.url;\n }\n }","import PropTypes from 'prop-types'\nimport React, { Component } from 'react'\n\nimport SvgImage from './SvgImage'\nimport iconArrowDown from '../../../../../app/assets/images/svg-on-react/icon-arrow-down-white.svg'\n\nconst modalAnimationDuration = 300 // ms\n\nexport default class SlideShow extends Component {\n static propTypes = {\n images: PropTypes.arrayOf(PropTypes.shape({ url: PropTypes.string.isRequired })).isRequired\n }\n\n arrows = { left: null, right: null }\n\n state = {\n showArrows: { left: false, right: false },\n currentIndex: 0,\n currentImg: null,\n hideImage: true\n }\n\n componentDidMount () {\n const newShowArrows = {\n left: this.props.images.length > 1 && this.state.currentIndex !== 0,\n right: this.props.images.length > 1 && this.props.images.length !== (this.state.current_index + 1)\n }\n\n setTimeout(() => this.setState({ ...this.state, showArrows: newShowArrows }), modalAnimationDuration)\n }\n\n render () {\n const { images } = this.props\n const { url, alt } = images[this.state.currentIndex]\n\n return (\n \n
e.stopPropagation()}>\n
\n {this.renderArrow('left')}\n
\n\n
\n
\n
\n
\n\n
\n
{`${this.state.currentIndex + 1} / ${images.length}`}
\n
\n
\n
\n {this.renderArrow('right')}\n
\n
\n
\n \n )\n }\n\n handleClickNext = () => {\n const nextIndex = this.state.currentIndex + 1\n\n this.loadImage(nextIndex)\n }\n\n handleClickPrev = () => {\n const prevIndex = this.state.currentIndex - 1\n\n this.loadImage(prevIndex)\n }\n\n handleLoadCurrent = (e) => {\n this.setState({ ...this.state, hideImage: false })\n }\n\n loadImage = (index) => {\n const { url, alt } = this.props.images[index]\n\n const newShowArrows = {\n left: this.props.images.length > 1 && index !== 0,\n right: this.props.images.length > 1 && this.props.images.length !== (index + 1)\n }\n\n this.setState({ ...this.state, currentImg: { ...this.state.currentImg, alt: alt, src: url }, currentIndex: index, showArrows: newShowArrows, hideImage: true })\n }\n}\n","import PropTypes from 'prop-types'\nimport React, { Component } from 'react'\nimport { LazyLoadImage } from 'react-lazy-load-image-component'\n\nexport class MobileSlideShow extends Component {\n static propTypes = {\n images: PropTypes.arrayOf(\n PropTypes.shape({\n url: PropTypes.string.isRequired\n })\n ).isRequired\n }\n\n render () {\n const { images } = this.props\n\n return (\n event.stopPropagation()}>\n { images.map(image => { return (
\n )\n }\n}\n","import PropTypes from 'prop-types'\nimport React, { Component } from 'react'\n\nexport default class TransparentModal extends Component {\n static propTypes = {\n id: PropTypes.string,\n desktopOnly: PropTypes.bool,\n mobileOnly: PropTypes.bool,\n autoHideOnResize: PropTypes.bool\n }\n\n componentDidMount () {\n const { onModalClosed } = this.props\n if (onModalClosed) {\n this.$el.on('hidden.bs.modal', this.props.onModalClosed)\n }\n\n $(window).on('scroll resize', this.handleResize)\n $(window).on('orientationchange', this.handleOrientationChange)\n\n this.handleResize()\n requestAnimationFrame(() => $(document).find('.modal-backdrop').css({ 'background-color': '#101010', opacity: '0.85' }))\n }\n\n componentWillUnmount () {\n const { onModalClosed } = this.props\n if (onModalClosed) {\n this.$el.off('hidden.bs.modal', onModalClosed)\n }\n\n $(window).off('scroll resize', this.handleResize)\n $(window).off('orientationchange', this.handleOrientationChange)\n }\n\n handleResize = () => requestAnimationFrame(() => {\n const { autoHideOnResize, mobileOnly, desktopOnly } = this.props\n\n if ($(window).width() < 992) {\n if (desktopOnly && autoHideOnResize) {\n this.$el.modal('hide')\n }\n } else if (mobileOnly && autoHideOnResize) {\n this.$el.modal('hide')\n }\n })\n\n handleOrientationChange = () => {\n // iPad does not trigger resize event after orientation change\n if (navigator.platform === 'iPad') {\n setTimeout(() => this.handleResize, 250)\n }\n }\n\n render () {\n const { children, id } = this.props\n return (\n { this.$el = $(el) }}\n onClick={e => this.$el.modal('hide')}\n >\n \n \n × \n \n
\n \n