{title}
\n {subTitle &&{subTitle}
}\n \n {viewMode && onChangeViewMode && (\nWe'd love to hear from you
\n \nFill in our contact form
\nYou can contact us using our enquiry form, it’s easy and quick.
\nWe will respond to all enquiries as soon as possible.
\n\nOther ways to contact us
\n\n There are a number of ways you can contact us, but we recommend you refer to our FAQs first.\n If you cannot find the answer you are looking for here then you can chat to us online, email\n us or send us a letter. We will respond to all enquiries as soon as possible.\n
\n\nFAQS
\n\n Our frequently asked questions section contains answers to the most popular questions. Most\n questions can be answered using this guide.\n
\n\n Have a question that cannot be found in our FAQs section? Our Customer Service Team are\n always ready to answer your questions by email.\n
\nTalk to us now
\n\n Looking to book? Or have any questions about your holiday? Call one of our expert team now\n on {t('header.cs.tel')}\n
\nWrite to us
\n\n When writing to us please enclose as much information about your booking as possible\n including your contact details (email & contact number), so we can respond to you\n quickly.\n
\n \n\n BreakFree Holidays,
\n 42 Phoenix Court,
\n Hawkins Road,
\n Colchester,
\n CO2 8JY\n
Live Chat
\nWe are open Monday to Friday, 9am - 5pm.
\n\n \n 😵\n {' '}\n Oops!\n
\n\n The page you are looking for currently doesn't exist, has been changed or was removed.\n
\nBut don't panic, return to the homepage by clicking the button below.
\n \n Return to Homepage\n \n \n{!props.noTitle && props.title}
\nNetwork error. Please check your internet connection and try again.
\n )}\n {props.requestError && Array.isArray(props.requestError.errors) && (\n- \n {props.requestError.errors.map((error) => (\n
- \n {error.message}\n {props.showCodes && ` (code ${error.code})`}\n \n ))}\n
\n \n
\n \n ) : (\n <>\n \n Your password has been changed. Please click here to\n log in.\n
\n\n Please enter your details below. Your reset code can be found in the email that was\n sent to you.\n
\n{props.text}
}\n\n {props.options.map((option, i) => {\n const checked = props.values[props.name] === option.value;\n const isLast = i !== props.options.length - 1;\n\n return (\n{props.validationMessage}
}\n \n \n \n \n )}\n {config['user.optin.firstOpt'] && (\n \n \n \n )}\n {config['user.optin.thirdOpt'] && (\n
\n);\n\nContactPreferencesInputs.propTypes = {\n errors: PropTypes.object,\n values: PropTypes.object,\n onChange: PropTypes.func,\n};\n\nexport default ContactPreferencesInputs;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { Form } from 'react-bootstrap';\nimport DayPickerInput from 'react-day-picker/DayPickerInput';\nimport { dateToDDMMYYYY, DDMMYYYYToDate } from '../../utils/date';\n\nconst currentYear = new Date().getFullYear();\nconst fromMonth = new Date(currentYear - 100, 0);\nconst toMonth = new Date();\n\nexport const YearMonthForm = ({ date, localeUtils, onChange, ageGroup }) => {\n const months = localeUtils.getMonths();\n\n // Use appropriate years for age group\n let minusYears = 100;\n switch (ageGroup) {\n case 'under5s':\n minusYears = 5;\n break;\n case 'children':\n minusYears = 17;\n break;\n default:\n minusYears = 100;\n break;\n }\n const fromYear = new Date(currentYear - minusYears, 0);\n\n const years = [];\n for (let i = fromYear.getFullYear(); i <= toMonth.getFullYear(); i += 1) {\n years.push(i);\n }\n\n const handleChange = function handleChange(e) {\n const { year, month } = e.target.form;\n onChange(new Date(year.value, month.value));\n };\n\n return (\n \n );\n};\n\nexport const DateInput = (props) => {\n const [month, setMonth] = useState(new Date());\n\n const handleYearMonthChange = (newMonth) => {\n setMonth(newMonth);\n };\n\n return (\n {!props.hideTitle && t('forms.contactPrefs.title')}
\n{t('forms.contactPrefs.offers')}
\n {config['user.optin.emailOpt'] && (\n\n props.onChange('emailOpt', \"Y\")}\n />\n
\n \n props.onChange('emailOpt', \"N\")}\n />\n
\n {props.errors?.emailOpt && {props.errors?.emailOpt}
}\n \n props.onChange('smsOpt', \"Y\")}\n />\n
\n \n props.onChange('smsOpt', \"N\")}\n />\n
\n {props.errors?.smsOpt && {props.errors?.smsOpt}
}\n \n props.onChange(props.name, dateToDDMMYYYY(day))}\n parseDate={DDMMYYYYToDate}\n formatDate={dateToDDMMYYYY}\n value={props.value}\n fromMonth={fromMonth}\n toMonth={toMonth}\n keepFocus={false}\n dayPickerProps={\n props.dob\n ? {\n captionElement: ({ date, localeUtils }) => (\n
\n\n {props.invalid && \n \n
\n You're logged in!
\n{props.booking.parkName}
\n \n\n \n {t('myAccount.bookings.paid')}\n
\n )}\n {/*props.booking.amountPaid > props.booking.totalCost && (\n\n Overpaid?\n
\n )*/}\n {outstandingPayment && (\n\n \n {t('myAccount.bookings.outstandingAmount')}\n
\n )}\n \n\n {props.booking.accomodation}\n
\n\n £{props.booking.totalCost}\n
\n\n
\n );\n};\n\nSpinner.defaultProps = {\n center: false,\n message: 'Loading, please wait...',\n};\n\nSpinner.propTypes = {\n center: PropTypes.bool,\n message: PropTypes.string,\n};\n\nexport default Spinner;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Container, Row, Col } from 'react-bootstrap';\n\nimport ScrollToTop from '../ScrollToTop';\nimport Spinner from '../Spinner';\nimport t from '../../../text';\n\nconst Wrap = ({ children, useContainer }) => (\n <>\n {useContainer ? (\n {props.message}
\n\n \n {props.loadingErrorMessage || t('global.errorLoading')}\n
\n \n{t('myAccount.bookings.noBookings.title')}
\n{t('myAccount.bookings.noBookings.text')}
\n \n ) : (\n bookings.map((booking) => (\n{t('myAccount.preferences.title')}
\n{t('myAccount.preferences.updateFail')}
\n ) : (\n{t('myAccount.preferences.updateSuccess')}
\n )}\n \n )}\n{t('myAccount.yourDetails.title')}
\n{t('myAccount.yourDetails.text')}
\nThere was an error while updating your details:
\nYour details have been updated successfully.
\n )}\n \n )}\n{t('myAccount.password.title')}
\n{t('myAccount.password.text')}
\n\n {isSticky && (\n \n {t('searchResults.sticky')}\n \n )}\n {isPremium && (\n \n {t('searchResults.premium')}\n \n )}\n {SliderItems} \n
\n );\n};\n\nParkImage.propTypes = {\n channelId: PropTypes.string,\n regionId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n park: PropTypes.object,\n url: PropTypes.string,\n parkRoute: PropTypes.string,\n isSticky: PropTypes.bool,\n isPremium: PropTypes.bool,\n};\n\nexport default ParkImage;\n","import React, { useState } from 'react';\nimport { Link } from 'react-router-dom';\nimport PropTypes from 'prop-types';\nimport { slugify } from '../../utils/string';\nimport t from '../../../text';\nimport RedEye from '../../components/RedEye/RedEye';\nimport { stripProtocol } from '../../utils/string';\nimport { config, urls } from '../../../config';\nimport A from '../A';\nimport { Button, Modal, Form, Col } from 'react-bootstrap';\nimport Logo from '../Logo';\nimport ReactGa from 'react-ga';\n\nexport const ParkLink = ({ channelId, regionId, park, url, parkRoute, specialButtonClass, smallText, minPrice }) => {\n const [show, setShow] = useState(false);\n const [validated, setValidated] = useState(false);\n const [fName, setFName] = useState('');\n const [email, setEmail] = useState('');\n const [success, setSuccess] = useState(0);\n const [message, setMessage] = useState('');\n const [displayRedEye, setDisplayRedEye] = useState(false);\n\n const handleShowPartnerPopup = () => setShow(true);\n const handleHidePartnerPopup = () => setShow(false);\n const handleSubmit = (event) => {\n const form = event.currentTarget;\n event.preventDefault();\n event.stopPropagation();\n\n if (form.checkValidity() === true) {\n fetch(\n `${urls.newsletterSignup}?email=${encodeURIComponent(email)}&fname=${encodeURIComponent(\n fName,\n )}&type=OPID-${park.opId}`,\n )\n .then((response) => response.json())\n .then((data) => {\n setSuccess(data.success);\n if (data.success === 1) setMessage('');\n if (data.success === 0) {\n setMessage(data.errors[0].message);\n setDisplayRedEye(true);\n }\n })\n .catch((e) => {\n console.error('Could not fetch the content.', e);\n setDisplayRedEye(true);\n });\n }\n\n setValidated(true);\n setDisplayRedEye(true);\n };\n\n const extLinkText = (minPrice, channelId) => {\n if (+minPrice >= 1) return t('searchResults.viewPark', channelId, minPrice);\n return t('searchResults.viewPark', channelId);\n };\n\n const clickToHavenHandler = () => {\n ReactGa.event({\n category: \"External links\",\n action: \"Clicked link to the Haven website\",\n label: \"Park link on Search result\"\n })\n };\n\n if (url) {\n return (\n <>\n \n We are sending you to our trusted partner to complete your booking.
\n\n {t('parks.popup.newsletter')}\n
\n \n\n {dateMatchCount || altDateCount}\n \n {dateMatchCount ? t('searchResults.accomodationLeft', isSingleResult(dateMatchCount, altDateCount)) : t('searchResults.holidaysFoundOn', dateMatchCount, isSingleResult(dateMatchCount, altDateCount))}\n
\n {!countOnly && (\n\n {t('searchResults.from')}\n \n £{dateMatchCount ? minPrice : altDateMinPrice}\n \n
\n )}\n \n )}\n {priceOnly && (\n <>\n\n {t('searchResults.from')}\n
\n\n £{dateMatchCount ? minPrice : altDateMinPrice}\n
\n \n )}\n \n);\n\nParkResultCountPrice.propTypes = {\n dateMatchCount: PropTypes.number,\n altDateCount: PropTypes.number,\n minPrice: PropTypes.string,\n altDateMinPrice: PropTypes.string,\n specialTextClass: PropTypes.string,\n};\n\nParkResultCountPrice.defaultProps = {\n specialTextClass: 'text-primary',\n};\n\nexport default ParkResultCountPrice;\n","import React, { useState } from \"react\";\nimport { Button, Modal, Alert, Container, Row, Col } from \"react-bootstrap\";\nimport { useDispatch } from \"react-redux\";\nimport { selectRegion } from \"../../redux/search/form/actions\";\nimport NoPopupSearchBox from \"../SearchBox/NoPopupSearchBox\";\n\nexport const SearchPopup = (props) => {\n /* TODO:\n 1. Props\n - size\n - variant\n - region id (optional)\n - park id (optional)\n - op id?\n 2. Update search form params\n 3. Use existing search form?\n */\n\n const [show, setShow] = useState(false);\n const dispatch = useDispatch();\n const handleButtonClick = () => {\n // Set region if applicable\n if (props.regionId ) selectRegion(dispatch, props.regionId);\n // Set Park ID if applicable\n\n // Show the popup\n handleModal();\n }\n const handleModal = () => setShow(!show);\n\n return (\n <>\n{park.name}
\n\n \n {park.sAdd}\n
\n \n- \n {park.features.map((feature, i) => (\n \n ))}\n
\n
\n \n
\n \n \n {park.sAdd}\n
\n{park.name}
\n {availableDates && (\n\n
\n )}\n {Array.isArray(park.features) && (\n - \n {park.features.map((feature, i) => (\n \n ))}\n
{props.result.park.name}
\n{props.result.park.sAdd}
\n {!props.removeMapCardMid && (\n\n {props.result.dateMatchCount || props.result.altDateCount}{' '}\n {t(\n 'searchResults.holidaysFoundOn',\n !!props.result.dateMatchCount,\n isSingleResult(props.result.dateMatchCount, props.result.altDateCount),\n )}\n
\n {t('searchResults.from')} £\n {props.result.minPrice || props.result.altDateMinPrice}\n
\n {props.isHTML ? (\n \n {props.text}\n
\n )}\n \n \n )\n );\n};\n\nTruncatedTextAlt.defaultProps = {\n lines: 3,\n text:\n 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar, diam ut blandit efficitur, augue arcu congue urna, eu hendrerit magna tortor sit amet sem. Nunc ultrices, tellus at pretium rutrum, ex nulla ornare nibh, nec finibus nunc lacus vel eros. Quisque commodo turpis id odio facilisis, quis blandit odio rhoncus. Sed faucibus dignissim nisi vel vulputate. Duis consequat laoreet quam in sagittis. Quisque et felis ut magna lobortis elementum semper dignissim nibh. Curabitur eu convallis sem. Pellentesque non lacus nibh. Duis sed aliquam nunc. Fusce tristique, lacus sit amet viverra accumsan, tortor sem finibus dolor, quis eleifend massa ligula et orci.',\n};\n\nexport default TruncatedTextAlt;\n","import React, { useState, useEffect } from 'react';\nimport { Container, Row, Col } from 'react-bootstrap';\nimport { urls } from '../../../config';\nimport TruncatedTextAlt from '../TruncatedTextAlt';\n\nfunction FetchSeoSearchText(props) {\n const [hasText, setHasText] = useState(false);\n const [seoText, setSeoText] = useState(props.region);\n\n const Content = (seoText) => {\n return (\n \n {data[0].acf.area_seo_text.find((a) => a.area_id === props.isArea).area_text}\n
,\n );\n } else {\n setSeoText({data[0].acf.seo_text}
);\n }\n setHasText(true);\n }\n });\n return () => {\n controller.abort();\n };\n }, [props.region, props.isArea]);\n\n return hasText ? Content(seoText) : null;\n}\n\nexport default FetchSeoSearchText;\n","import { GET_FILTERS } from './action-types';\nimport { getRequestStatus } from '../../requests/selectors';\n\nexport const filters = (state) => state.data.filters.filters;\nexport const getNFilters = (state) => state.data.filters.nFilters;\nexport const getBFilters = (state) => state.data.filters.bFilters;\nexport const getfilterGroups = (state) => state.data.filters.filterGroups;\nexport const [isFetching, hasError, errorData] = getRequestStatus(GET_FILTERS);\n","import { GET_PARKS } from './action-types';\nimport { getRequestStatus } from '../../requests/selectors';\n\nexport const parks = (state) => state.data.parks.parks;\nexport const towns = (state) => state.data.parks.townList;\nexport const regionParkIds = (state) => state.data.parks.regionParkIds;\n\n// Utils to be used by other selectors\nexport const [getIsLoading, getHasFailed, getErrorData] = getRequestStatus(GET_PARKS);\nexport const getIsLoaded = (state, regionId) => !!regionParkIds(state)[regionId];\n\nexport const getSpecificParks = (state, idArr) => {\n const parks = [];\n idArr.forEach((id) => {\n const park = state.data.parks.parks[id];\n parks.push(park);\n });\n\n return parks;\n};\n","import React from 'react';\nimport { useSelector } from 'react-redux';\nimport { Link } from 'react-router-dom';\nimport { slugify } from '../../utils/string';\n\nfunction TownsList({ towns, region, channel, forwardClassNames = '' }) {\n const RegionName = useSelector((state) => state.data.regions.regions[region]?.name);\n if(RegionName !== undefined){\n return (\n\n {towns.length > 0 && (\n <>\n
\n )\n } else {\n return (<>);\n }\n}\n\nexport default TownsList;\n","import React, { useState, Suspense, useEffect, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { Container, Row, Col, Card, Form, Collapse, Button } from 'react-bootstrap';\n\nimport AppStateFilterPanel from './AppStateFilterPanel';\nimport AppStateSortPanel from './AppStateSortPanel';\nimport MultipleLocations from '../Maps/MultipleLocations';\nimport PageTitle from '../PageTitle';\n//import RangeSlider from '../Common/RangeSlider';\n\nimport { getState } from '../../redux/appState/selectors';\nimport t from '../../../text';\nimport useFilters from './useFilters';\nimport FetchSeoSearchText from '../SearchResults/FetchSeoSearchText';\nimport { getNFilters } from '../../redux/data/filters/selectors';\nimport { channels } from '../../redux/data/channels/selectors';\nimport { setState } from '../../redux/appState/actions';\nimport { towns } from '../../redux/data/parks/selectors';\nimport TownsList from './TownsList';\n//import { contentRoutes } from '../../../config';\n\n// Component\nexport const ParksListFilterView = (props) => {\n const filtersColumn = useRef();\n const dispatch = useDispatch();\n const nFiltersStateKey = 'nFiltersStateArray';\n const bFiltersStateKey = 'bFiltersStateArray';\n const [activeFilters, setActiveFilters] = useState({ nFilt: [0, 0], bFilt: [] });\n const [maxNFiltValues, setMaxNFiltValues] = useState(null);\n const [collapseFilters, setCollapseFilters] = useState(Boolean(window.innerWidth >= 992));\n const channelsData = useSelector(channels);\n const townsList = useSelector(towns);\n const correctChannel = channelsData.find((channel) => channel.code === props.channelId);\n const filterGroup = correctChannel.filterSet;\n const allFilters = useSelector((state) => state.data.filters.filters);\n const chanFilterSet = useSelector((state) => state.data.filters.filterGroups[correctChannel.filterSet]);\n const nFilt = useSelector((state) => getNFilters(state))[filterGroup];\n const selectedNFilters = useSelector((state) => getState(state, nFiltersStateKey));\n const selectedBFilters = useSelector((state) => getState(state, bFiltersStateKey));\n\n if (!Array.isArray(selectedNFilters) || selectedNFilters.length < 1) {\n setState(\n dispatch,\n nFiltersStateKey,\n Array(Object.values(allFilters).filter((o) => o.type === 'nFilt').length).fill(0),\n );\n }\n\n const updateFilters = (type, value, idx) => {\n if (window.innerWidth >= 992) {\n /* TODO:\n 1. Move this to utils\n 2. Make it a scrollTo ref function\n 3. Include viewport size options\n e.g. scroll to on lg or higher\n */\n /*filtersColumn.current.scrollIntoView({\n behavior: \"smooth\",\n block: \"start\",\n inline: \"nearest\"\n });*/\n }\n\n if (type === 'bFilt') {\n let current = selectedBFilters;\n !current.includes(parseInt(value))\n ? current.push(parseInt(value))\n : current.splice(current.indexOf(parseInt(value)), 1);\n setState(dispatch, bFiltersStateKey, current);\n }\n\n if (type === 'nFilt') {\n let current = selectedNFilters;\n current[idx] = parseInt(value);\n setState(dispatch, nFiltersStateKey, current);\n\n /*\n const onToggleFilter = (key, arrPos) => {\n if (typeof arrPos === 'number') {\n const nFiltLength = props.nFiltLength;\n key = parseInt(key);\n \n const nFilt = props.selectedFilters;\n \n const arrayPosIsKey = nFilt[arrPos] === key;\n nFilt[arrPos] = arrayPosIsKey ? -1 : key;\n \n // Ensure array is correct length and values are integer or -1\n for (let i = 0; i < nFiltLength; i++) {\n nFilt[i] = nFilt[i] || -1;\n }\n \n const newValue = [...nFilt];\n \n setState(dispatch, props.stateKey, newValue);\n }\n\n if (typeof arrPos === 'undefined') {\n if (props.selectedFilters.includes(key)) {\n setState(\n dispatch,\n props.stateKey,\n props.selectedFilters.filter((val) => val !== key),\n );\n } else {\n setState(dispatch, props.stateKey, [...props.selectedFilters, key]);\n }\n }\n };\n */\n }\n if (activeFilters) setActiveFilters([]); // Required, forces useFilters hook to run for some reason?\n };\n\n // Get an array of max values for all nFillters\n useEffect(() => {\n if (maxNFiltValues !== null) return;\n const getMaxValues = () => {\n if (!props.results.length) return [];\n\n // Setup initial array with zero values to the length of nFilts for this product type.\n const arrLength = Array.isArray(props.results[0].park.nFilt) ? props.results[0].park.nFilt.length : 0;\n let maxValues = Array(arrLength).fill(0);\n props.results.forEach((result) => {\n let neverNull = result.park.nFilt === null ? Array(arrLength).fill(0) : result.park.nFilt;\n neverNull.forEach((val, i) => {\n if (val > maxValues[i]) maxValues[i] = val;\n });\n });\n return maxValues;\n };\n setMaxNFiltValues(getMaxValues());\n }, [maxNFiltValues, props.results]);\n\n const appliedSortStateKey = props.id + 'AppliedSort';\n //const standardFiltersStateKey = props.id + 'StandardFilters';\n const operatorFiltersStateKey = props.id + 'OperatorFilters';\n const petFriendlyFiltersStateKey = props.id + 'PetFriendlyFilters';\n const appliedSort = useSelector((state) => getState(state, appliedSortStateKey));\n //const selectedStandardFilters = useSelector((state) => getState(state, standardFiltersStateKey));\n const selectedOperatorFilters = useSelector((state) => getState(state, operatorFiltersStateKey));\n const selectedPetFriendlyFilters = useSelector((state) => getState(state, petFriendlyFiltersStateKey));\n\n const [operatorFilters, petFriendlyFilters, sortOptions, filteredResults] = useFilters(\n props.results, // 0\n props.channelId, // 1\n //selectedStandardFilters, // 2\n selectedOperatorFilters, // 3\n selectedPetFriendlyFilters, // 4\n selectedNFilters, // 5\n selectedBFilters, // 6\n nFilt, // 7\n props.allowSorting ? appliedSort : false, // 8\n props.sortByName, // 9\n props.isTown, //10\n );\n\n const [viewMode, setViewMode] = useState('grid');\n const url = new URL(window.location.href);\n const petSearch = url.searchParams.get('dogs') === 'y'; // bool. Hides pet filter if true\n\n useEffect(() => {\n const showFiltersForLarge = () => {\n if (/iPad|iPhone|iPod/.test(navigator.platform)) return;\n let timeout;\n window.clearInterval(timeout);\n timeout = setTimeout(() => setCollapseFilters(Boolean(window.innerWidth >= 768)), 200); // debounce for performance\n };\n window.addEventListener('resize', showFiltersForLarge);\n return () => {\n window.removeEventListener('resize', showFiltersForLarge);\n };\n });\n\n // Get list of unique towns\n const getTowns = (fr) => {\n let temp = [];\n fr.forEach((park) => {\n if ('towns' in park.park) {\n park.park.towns.forEach((town) => {\n temp = [\n ...temp,\n {\n id: town,\n name: townsList[town],\n },\n ];\n });\n }\n });\n\n const uniq = new Set(temp.map((e) => JSON.stringify(e)));\n const res = Array.from(uniq).map((e) => JSON.parse(e));\n\n return [\n ...new Set(\n res.sort((a, b) => {\n let fa = a.name.toLowerCase();\n let fb = b.name.toLowerCase();\n if (fa < fb) return -1;\n if (fa > fb) return 1;\n return 0;\n }),\n ),\n ];\n };\n\n return (\n <>\n Towns & Cities in {RegionName}
\nUse the links below to view results for a specific area.
- \n {towns.map((t, i) => (\n
- \n {t.name}\n \n ))}\n
\n {props.allowSorting && (\n <>\n
\n \n )}\n {operatorFilters.length > 1 &&\n !['boats', 'ukcottages'].includes(correctChannel.code) &&\n !props.isTown && (\n\n {chanFilterSet[set]} \n \n {Object.values(allFilters)\n .filter(\n (f) =>\n parseInt(f.filterSet) === parseInt(filterGroup) &&\n parseInt(f.filterGroup) === parseInt(set),\n )\n .map((f, i) => {\n return (\n \n \n );\n })}\n\n {props.channelId !== 'eurocaravan' && (\n
\n \n \n )}\n {operatorFilters.length > 1 &&\n !['boats', 'ukcottages'].includes(correctChannel.code) &&\n !props.isTown && (\n
\n {'compare' in f ? ( // is Number type\n \n \n {f.name}\n \n \n \n \n updateFilters(\n f.type,\n e.target.value,\n f.value,\n )\n }\n />\n \n \n \n \n {selectedNFilters[f.value]}+\n \n \n \n
\n \n ) : (\n // is Bool type\n updateFilters(f.type, f.value)}\n />\n )}\n
\n );\n })}\n ⚠ {t('parks.filters.noResults')}
\n )}\n \n )}\n\n Loading...
}>\n We are now finding your perfect holiday
\n {_criteria && (\n\n {_criteria}\n
\n )}\n\n \n \n \n
\n \n \n {t('searchResults.errorLoadingResults')}\n
\n \n\n
\n \n \n
\n \n
\n {t('dotw.dealOfTheWeek')}
\n{t('dotw.allPricesBasedUpon')}
\n
;\n });\n }, [floorPlan]);\n\n const renderItems = (items, heading) => {\n if (!items) return null;\n return (\n \n
\n );\n };\n\n const unitFeatures = useMemo(() => renderItems(features, 'Features'), [features]);\n const unitBedrooms = useMemo(() => renderItems(bedrooms, 'Bedrooms'), [bedrooms]);\n const unitKitchen = useMemo(() => renderItems(kitchen, 'Kitchen'), [kitchen]);\n const unitLivingRoom = useMemo(() => renderItems(livingRoom, 'Living Room'), [livingRoom]);\n const unitShowerRoom = useMemo(() => renderItems(showerRoom, 'Shower Room'), [showerRoom]);\n const unitOutdoor = useMemo(() => renderItems(outdoor, 'Outdoor'), [outdoor]);\n const unitOther = useMemo(() => renderItems(other, 'Other'), [other]);\n const unitCleaning = useMemo(() => renderItems(cleaning, 'Cleaning'), [cleaning]);\n\n const hasAnyImages = images?.length > 0 || floorPlanImages?.length > 0;\n\n return (\n {heading}
\n {items.map((item) => (\n\n \n {item}\n
\n ))}\n {heading}
}\n {description && }\n {sleeps &&{sleeps}
}\n {unitFeatures}\n {unitBedrooms}\n {unitKitchen}\n {unitLivingRoom}\n {unitShowerRoom}\n {unitOutdoor}\n {unitOther}\n {unitCleaning}\n \n;\n });\n }, [holiday.image]);\n\n const lowUnitCountRemaining = +holiday.unitQuantity < 5;\n const isDiscounted = +holiday.unitPriceSave > 0;\n\n const description = [holiday.desc].flat();\n // We have to split these up otherwise there is inconsistent space on the listings\n const processedDescriptionListing = description\n .map((sentence) => `${decodeHtml(sentence)}
`)\n .join('');\n const processedDescriptionModal = description.map((sentence) => `${decodeHtml(sentence)}
`).join('');\n\n return (\n\n setShow(false)}\n show={show}\n images={unitImages}\n description={processedDescriptionModal}\n />\n )}\n \n )}\n
\n\n {holiday.unitDesc}
\n\n {' '}\n {t('park.accommodation.sleepsX', holiday.unitMaxOccupancy)}\n {holiday.unitDisabled === 'Y' && (\n \n {' '}\n {t('park.accommodation.disabledAccess')}\n \n )}\n {holiday.unitAdultsOnly === 'Y' && (\n
\n
\n \n )}\n \n {t(\n 'park.accommodation.wasX',\n (parseFloat(holiday.unitPrice) + parseFloat(holiday.unitPriceSave)).toFixed(2),\n )}\n
\n\n {t('park.accommodation.saveX', holiday.unitPriceSave)}\n
\n{props.result.units.length} {props.result.units.length > 1 ? \"Holidays\" : \"Holiday\"} found from £{lowestPrice.unitPrice}
\n{`${getDayNameFromDate(props.result.date, shortDate)} ${getDayAndMonthNameFromDate(props.result.date, shortDate)} for ${props.result.nights} nights`}
\n \n )}\n\n
\n );\n};\n\nAccommodation.propTypes = {\n onBook: PropTypes.func,\n parkDetails: PropTypes.object,\n result: PropTypes.object,\n};\n\nAccommodation.defaultProps = {};\n\nexport default Accommodation;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Card } from 'react-bootstrap';\nimport t from '../../../../text';\n\nconst HolidayDateCard = ({ clicked, day, date, year, price, selected, preferred }) => (\n {t('park.accommodation.accommodation')}
\n {t('park.accommodation.noResults')}\n\n {day}, {date}
\n {year}\n
{t('park.dates.fromX', price.toFixed(2))}
\n {selected ? (\n{t('park.dates.selectedDate')}
\n ) : (\n\n {t('park.dates.dateType', preferred)}\n
\n )}\n{t('park.dates.alternativeDates')}
\n \n{props.title}
\n- \n {props.facilities.map((facility, i) => (\n
- \n \n \n \n ))}\n
\n
\n );\n}\n\nImportantInfo.propTypes = {\n content: PropTypes.string,\n};\n\nexport default ImportantInfo;\n","import TagManager from 'react-gtm-module';\n\n/**\n * Makes a best-effort attempt to produce 'opName - ParkName' (removing duplicated operator names within park names)\n * @param {string} opName - The operator name\n * @param {string} parkName - The park name\n */\nexport function getOperatorParkNameString(opName, parkName) {\n const parts = parkName.split(opName);\n return `${opName} - ${parts.length === 2 ? parts[1].trim() : parkName}`;\n}\n\nexport function initGTM(siteCode) {\n TagManager.initialize({\n gtmId: siteCode,\n });\n}\n\nexport function tagSaleCompleted(bookingId, amountPaid, unitTypeId, operatorId, regionId, parkName, channelId) {\n TagManager.dataLayer({\n dataLayer: {\n ecommerce: {\n purchase: {\n actionField: {\n id: bookingId, // 'the booking reference' - Transaction ID. Required for purchases and refunds\n affiliation: 'BreakFree Holidays Booking', // (static)\n revenue: amountPaid, // 'Booking cost' - Total transaction value (incl. tax and shipping)\n },\n products: [\n {\n // List of productFieldObjects.\n name: unitTypeId, // 'accommodation unit name' - Name or ID is required\n id: bookingId, // 'booking reference'\n price: amountPaid, // 'booking cost'\n brand: `${operatorId} - ${regionId}`, // 'operator - region'\n category: parkName, //'park name'\n variant: channelId, //'Channel Type'\n quantity: 1,\n },\n ],\n },\n },\n },\n });\n TagManager.dataLayer({\n dataLayer: {\n event: 'gtmBFH.saleCompleted',\n },\n });\n}\n","import React from 'react';\nimport { useSelector } from 'react-redux';\n\nimport RedEye from './RedEye';\n\nimport { regions } from '../../redux/data/regions/selectors';\nimport { details, operator, processedResults as parkResults } from '../../redux/park/selectors';\nimport { params } from '../../redux/search/form/selectors';\nimport { processedResults as searchResults } from '../../redux/search/results/selectors/results';\n\nimport { getRegionById } from '../../redux/data/regions/utils';\nimport { dateToDDMMYYYY, getDepartureDate } from '../../utils/date';\nimport { stripProtocol, to2dp } from '../../utils/string';\nimport { getOperatorParkNameString } from '../../utils/tracking';\nimport { config } from '../../../config';\n\nexport const RedEyeParkResultsTag = () => {\n const _details = useSelector(details);\n const _operator = useSelector(operator);\n const _parkResults = useSelector(parkResults);\n const _region = getRegionById(useSelector(regions), _details.regn);\n const _searchParams = useSelector(params);\n const _searchResult = useSelector(searchResults).find((result) => result.parkUrn === _details.parkId);\n\n const facilitiesTags = {};\n if (Array.isArray(_details?.facilities)) {\n _details.facilities\n .filter((facility, i) => i < 4)\n .forEach((facility, i) => {\n facilitiesTags[`select_attribute${String.fromCharCode(97 + i)}`] = facility;\n });\n }\n\n const unitInfoTags = {};\n if (Array.isArray(_parkResults?.selectedDate?.units)) {\n _parkResults.selectedDate.units\n .filter((unitInfo, i) => i < 5)\n .forEach((unitInfo, i) => {\n unitInfoTags[`select_accomodation${i + 1}`] = unitInfo.unitDesc;\n unitInfoTags[`select_sleeps${i + 1}`] = unitInfo.unitMaxOccupancy;\n unitInfoTags[`select_accom_value${i + 1}`] = to2dp(unitInfo.unitPrice);\n });\n }\n\n return (\n {props.content}
\n\n 
\n
\n \n {props.name}\n - {props.date}\n
\n{props.review}
\n \n );\n}\n\nReview.propTypes = {\n date: PropTypes.string,\n name: PropTypes.string,\n rating: PropTypes.number,\n review: PropTypes.string,\n};\n\nexport default Review;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport Review from './Review';\nimport t from '../../../../text';\nimport { Card } from 'react-bootstrap';\n\nfunction Reviews({ parkDetails, reviews }) {\n let renderedReviews ={t('park.reviews.noReviews')}
;\n if (reviews?.length) {\n renderedReviews = reviews.map((rev, index) => (\n\n
\n
\n ));\n }\n\n return (\n \n
{parkDetails.name}
\n\n {`${error.message}${error.additional ? ' (' + error.additional + ')' : ''}`}\n
\n ))}\n{props.loadingErrorMessage || t('global.errorLoading')}
\n \n{props.loadingErrorMessage || t('global.errorLoading')}
\n \n {props.isPayment && \n Search for another holiday\n }\n{props.savingErrorMessage || t('global.errorSaving')}
)}\n \n )}\n \n);\n\nWithLoadingStates.defaultProps = {\n hasErrorFetching: false,\n hasErrorSaving: false,\n isFetching: false,\n isSaving: false,\n};\n\nWithLoadingStates.propTypes = {\n errorResponse: PropTypes.object,\n hasErrorFetching: PropTypes.bool,\n hasErrorSaving: PropTypes.bool,\n isFetching: PropTypes.bool,\n isSaving: PropTypes.bool,\n loadingErrorMessage: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n savingErrorMessage: PropTypes.string,\n onRetry: PropTypes.func,\n};\n\nexport default WithLoadingStates;\n","import { useSelector } from 'react-redux';\nimport PropTypes from 'prop-types';\n\nimport { getParkReviews } from '../../redux/data/park/reviews/actions';\nimport { getHasFailed, getIsLoading, getIsLoaded } from '../../redux/data/park/reviews/selectors';\n\nimport useDataLoader from '../../hooks/useDataLoader';\n\nexport function WithParkReviews(props) {\n const getData = (dispatch, force) => getParkReviews(dispatch, props.parkId, force);\n const _hasFailed = useSelector((state) => getHasFailed(state, props.parkId));\n const _isLoaded = useSelector((state) => getIsLoaded(state, props.parkId));\n const _isLoading = useSelector((state) => getIsLoading(state, props.parkId));\n const _isReady = !!props.parkId;\n\n return useDataLoader(props, getData, _hasFailed, _isLoaded, _isLoading, _isReady);\n}\n\nWithParkReviews.propTypes = {\n parkId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n};\n\nexport default WithParkReviews;\n","import { GET_PARK_REVIEWS } from './action-types';\nimport { apiRequest, checkRequestNeeded } from '../../../apiRequest';\nimport { urls } from '../../../../../config';\nimport { getIsLoaded, getIsLoading, getHasFailed } from './selectors';\n\nexport const getParkReviews = (dispatch, parkId, force = false) => {\n dispatch((d, getState) => {\n const state = getState();\n const isLoaded = getIsLoaded(state, parkId);\n const isLoading = getIsLoading(state, parkId);\n const hasFailed = getHasFailed(state, parkId);\n\n if (checkRequestNeeded(true, isLoading, isLoaded, hasFailed, force)) {\n return apiRequest( d, GET_PARK_REVIEWS, urls.parkReviews, { parkId }, parkId);\n }\n });\n};\n","import { GET_EXTRA_DATA } from './action-types';\nimport { apiRequest, checkRequestNeeded } from '../../apiRequest';\nimport { getExtraDataHasFailed, getExtraDataIsLoading, getExtraDataIsLoaded } from './selectors';\nimport { urls } from '../../../../config';\n\nconst getExtraDataUrl = (parkID) => urls.unitTypesExtraDataPID(parkID);\n\nexport const getExtraData = (dispatch, parkId, force = false) => {\n dispatch((d, getState) => {\n const state = getState();\n const isLoaded = getExtraDataIsLoaded(state, parkId);\n const isLoading = getExtraDataIsLoading(state, parkId);\n const hasFailed = getExtraDataHasFailed(state, parkId);\n const url = getExtraDataUrl(parkId);\n\n if (checkRequestNeeded(true, isLoading, isLoaded, hasFailed, force)) {\n return apiRequest(d, GET_EXTRA_DATA, url, { parkId }, parkId);\n }\n });\n};\n","import { useSelector } from 'react-redux';\nimport PropTypes from 'prop-types';\n\nimport { getExtraData } from '../../redux/data/unitTypes/actions';\nimport {\n getExtraDataHasFailed,\n getExtraDataIsLoading,\n getExtraDataIsLoaded,\n} from '../../redux/data/unitTypes/selectors';\nimport useDataLoader from '../../hooks/useDataLoader';\n\nexport function WithUnitTypesExtraData(props) {\n const { parkId, parkName, operatorName } = props;\n\n const getData = (dispatch, force) => getExtraData(dispatch, parkId, parkName, operatorName, force);\n const _hasFailed = useSelector((state) => getExtraDataHasFailed(state, parkId));\n const _isLoaded = useSelector((state) => getExtraDataIsLoaded(state, parkId));\n const _isLoading = useSelector((state) => getExtraDataIsLoading(state, parkId));\n const _isReady = parkId && parkName && operatorName;\n\n return useDataLoader(props, getData, _hasFailed, _isLoaded, _isLoading, _isReady, undefined, true);\n}\n\nWithUnitTypesExtraData.propTypes = {\n allowFailure: PropTypes.bool,\n parkId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n parkName: PropTypes.string,\n operatorName: PropTypes.string,\n};\n\nWithUnitTypesExtraData.defaultProps = {\n allowFailure: true,\n};\n\nexport default WithUnitTypesExtraData;\n","import { useEffect, useState } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport PropTypes from 'prop-types';\n\nimport { selectChannel, selectRegion } from '../../redux/search/form/actions';\nimport { channelId, regionId } from '../../redux/search/form/selectors';\n\nexport const WithUpdatedSearchParams = (props) => {\n const dispatch = useDispatch();\n const [firstRun, setFirstRun] = useState(true);\n\n const _selectedChannelId = useSelector(channelId);\n const _selectedRegionId = useSelector(regionId);\n\n useEffect(() => {\n if (firstRun) {\n if (props.channelId && props.channelId !== _selectedChannelId) {\n selectChannel(dispatch, props.channelId);\n }\n\n if (props.regionId && props.regionId !== _selectedRegionId) {\n selectRegion(dispatch, props.regionId);\n }\n\n setFirstRun(false);\n }\n }, [_selectedChannelId, _selectedRegionId, props.channelId, props.regionId, dispatch, firstRun]);\n\n return props.children || null;\n};\n\nWithUpdatedSearchParams.propTypes = {\n channelId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n regionId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n};\n\nexport default WithUpdatedSearchParams;\n","import React from 'react';\nimport { Button, Card, Col, Row } from 'react-bootstrap';\n\nexport const ThingsToDo = (props) => (\nThings To Do
\n{ttd.acf.description}
\n \n \n );\n })}\n{`Video${props.count > 1 ? 's' : ''}`}
\nQuestions and Answers
\n{props.name}
\nLocation
\nDirections
\n{props.channel === 'boats' ? 'Boats' : 'Accommodation'}
\nIf you've never been on a boating holiday before, the concept is simple. We provide you with a boat via our partners at Le Boat, which will be your home and transport for the duration of your holiday. Pick it up from one of the many bases, situated along some of the most beautiful waterways in Europe and Canada, and the rest is entirely up to you. Go where you want; do as you please. The only requirement is that you return it back to the base on time. The boats have been designed to make them easy to use, with a steering wheel for left and right and a forward and reverse throttle! No previous boating experience or a licence is required. Learn more now on our Ultimate Guide to Boating for Beginners.
';\n break;\n default:\n title = '';\n content = '';\n }\n return (\n{title}
\n\n {searchResult && (\n \n \n \n
\n \n \n )}\n\n \n \n \n {getContent()}\n \n {/* Redeye tag */}\n {showAccommodation && (\n
\n \n
\n );\n});\n\nexport default ParkInformation;\n","import React, { useEffect, useState } from 'react';\nimport { Alert, Modal, Tab, Tabs } from 'react-bootstrap';\nimport { useSelector } from 'react-redux';\nimport { useLocation } from 'react-router-dom';\nimport t from '../../../text';\n\nimport { requestParams } from '../../redux/search/form/selectors';\n\nexport const ToolsModal = () => {\n const location = useLocation();\n const _requestParams = useSelector(requestParams);\n\n const [show, setShow] = useState(false);\n\n const onClose = () => {\n setShow(false);\n };\n\n const onKeyPress = (e) => {\n if (e.keyCode === 84 && e.altKey) setShow(true); // ALT + t to show modal\n };\n\n useEffect(() => {\n document.addEventListener('keydown', onKeyPress);\n return () => {\n document.removeEventListener('keydown', onKeyPress);\n };\n });\n\n function getParkFromSearchLink(dealOfTheWeek, internal) {\n const DOTWParams = {\n ..._requestParams,\n adults: 2,\n children: 2,\n infants: 0,\n };\n const searchQuery = Object.keys(DOTWParams)\n .filter((key) => typeof DOTWParams[key] !== 'undefined')\n .filter((key) => key !== 'channel' && key !== 'region' && key !== 'partysize')\n .map((key) => `${encodeURIComponent(key)}=${encodeURIComponent(DOTWParams[key])}`)\n .join('&');\n\n let route = location.pathname.split('/');\n route[1] = dealOfTheWeek ? 'deal-of-the-week' : 'park-from-search';\n route = route.join('/');\n if (internal) return `${route}?${searchQuery}`;\n\n return `${window.location.origin}${route}?${searchQuery}`;\n }\n\n return (\n Book your next {_parkDetails.name} break
\n \n\n \n \n \n \n \n \n
\n )}\n \n Overview
\n{t('park.tools.dealOfTheWeekLink')}
\n\n{getParkFromSearchLink(true, true)}\n {getParkFromSearchLink(true)}\n \n
{t('park.tools.parkFromSearchLink')}
\n{getParkFromSearchLink()}\n {props.name}
\n\n {locationFix}\n
\n \n\n{t('booking.summary.confirmationOf', isNewBooking)}
\n \n \n )}\n\n {props.park.name}\n
\n\n \n {props.park.sAdd}\n
\n\n
\n {arrivalDate && (\n \n {props.channel !== \"ukcottages\" && props.unit.unitDesc}\n {typeof props.unit.unitPrice !== 'undefined' && (\n <>\n
£{parseFloat(props.unit.unitPrice).toFixed(2)}\n \n )}\n
\n {t('booking.summary.checkInAt', getShortDateFormat(arrivalDate))}\n
\n )}\n {departureDate && (\n\n {t('booking.summary.checkOutAt', getShortDateFormat(departureDate))}\n
\n )}\n{t('booking.summary.xNightStay', props.duration)}
\n{t('booking.breakdown.introText')}
\n| {t('booking.breakdown.accommodationPrice')} | \n£{unitPrice.toFixed(2)} | \n
| \n \n {extra.name}\n {extra.value > 1 && ` (${extra.value})`}\n \n | \n\n {extra.totalCost > 0 ? `£${extra.totalCost.toFixed(2)}` : ''}\n | \n
| \n Discount Amount-\n | \n\n £{discValue.toFixed(2)}\n | \n
\n {t('booking.breakdown.amountToPayToday')}\n
\n\n £{total.toFixed(2)}\n
\n {useDeposit && (\n\n {t(\n 'booking.breakdown.outstandingAmount',\n getDayMonthYearFromDate(DDMMYYYYToDate(dueDate)),\n totalRemaining.toFixed(2),\n )}\n
\n )}\n- \n
- \n {t('booking.breakdown.totalCost')} \n £{parseFloat(totalCost).toFixed(2)}\n \n
- \n {t('booking.breakdown.amountPaid')} \n £{parseFloat(amountPaid).toFixed(2)}\n \n
{t('booking.breakdown.amountToPayToday')}
\n£{parseFloat(remainingBalance).toFixed(2)}
\n\n {_type === 'new' ? (\n \n {props.isSaving ? t('global.pleaseWait') : props.nextButtonText}\n \n \n )}\n {!props.payment && 
} \n
\n )}\n \n {props.nextButtonTerms}
}\n\n \n
\n\n
\n\n {/* {t('booking.confirmation.youAreGoingTo', booking.operator.name, booking.park.name)}
\n\n {t('booking.confirmation.yourBookingReferenceIs')} {confirmationId}\n
\n{t('booking.confirmation.planAhead')}
\n{t('booking.confirmation.planAheadText')}
\n\n
*/}\n\n Rate your experience
\nHow was your booking experience today? Please rate your experience below and send us any comments you may have.
\n Send a review\n{t('booking.confirmation.noBookingConfirmation')}
\n \n\n {`${error.message}${error.additional ? ' (' + error.additional + ')' : ''}`}\n
\n ))}\n\n {values.discountCode}\n {' '}\n applied.\n \n \n {extra.desc && }\n \n {extra.type === 'boolean' ? (\n £${parsedCost(extra.cost)}`}\n ariaLabel={`${extra.name}: £${parsedCost(extra.cost)}`}\n checked={!!extra.value}\n onChange={(val) => props.onChange(extra.code, Number(val))}\n />\n ) : (\n <>\n props.onChange(extra.code, val)}\n />\n \n )}\n
\n \n ))\n }\n\n \n {extra.name} : {`${extra.code === 'extLUXPET' ? '' : `£${parsedCost(extra.cost)}`}`}\n
\n{t('forms.extras.introText')}
\n {groupedExtras && Object.keys(groupedExtras).map((key) => {\n const extras = groupedExtras[key];\n return (\n\n {props.label}\n
\n )}\n\n \n {/* PayPal will insert field here */}\n
\n\n {props.invalid && - \n {err.details.map((detail) => (\n
- \n {`${typeof detail.field !== 'undefined' ? detail.field.replace('/payment_source/card/', '') : 'ERROR'}`} - {detail.description} ({detail.issue})\n \n ))}\n
{msg}
;\n};\n\nexport const CardPayment = ({ disabled, onSuccess }) => {\n const [firstRun, setFirstRun] = useState(true);\n const [paymentError, setPaymentError] = useState(undefined);\n const [paypalForm, setPaypalForm] = useState(undefined);\n const [processing, setProcessing] = useState(false);\n\n const userDetails = useSelector(details);\n const { values, onChange, validate, isValid, errors, amount, bookingId, paypal } = usePaypalCardPaymentFormState(\n paypalForm,\n );\n const [{ isResolved, options }] = usePayPalScriptReducer();\n\n // Event handlers\n const handleCardFormSubmit = () => {\n validate();\n if (isValid() && paypalForm) {\n submitPaypalForm();\n }\n };\n\n const handlePaypalInit = useCallback(() => {\n if (isResolved) {\n if (checkPaypalComponentsAreLoaded(options)) {\n window.paypal.HostedFields.render({\n createOrder: function () {\n return paypal.orderId;\n },\n styles: {\n input: {\n 'font-size': '16px',\n 'font-family':\n '-apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"',\n color: '#5B5B5A',\n },\n },\n fields: {\n number: {\n selector: '#cardNumContainer',\n internalLabel: t('booking.payment.cardNumber'),\n maskInput: true,\n placeholder: 'Card Number',\n },\n expirationDate: {\n selector: '#expiryDateContainer',\n internalLabel: t('booking.payment.expirationDate'),\n maskInput: true,\n placeholder: 'Expiry Date - mm/yyyy',\n },\n cvv: {\n selector: '#cvvContainer',\n internalLabel: t('booking.payment.cardSecurityNumber'),\n type: 'password',\n placeholder: '3 Digit Security Number',\n },\n },\n }).then(function (hf) {\n setPaypalForm(hf);\n });\n }\n }\n }, [options, isResolved, paypal.orderId]);\n\n const submitPaypalForm = () => {\n const address = values.billingAddress ? values : userDetails;\n const country = values.billingAddress ? values.country : countries[userDetails.country].iso2;\n\n console.info(config['payment.enable3DSecure'] ? '✔ 3DSecure enabled!' : '❌ 3DSecure disabled.');\n\n setPaymentError(undefined);\n setProcessing(true);\n paypalForm\n .submit({\n // Cardholder Name\n cardholderName: values.name,\n // Billing Address\n billingAddress: {\n streetAddress: address.addrLn1,\n // extendedAddress: address.addrLn1, // address_line_2 - unit\n region: address.county, // admin_area_1 - state\n locality: address.town, // admin_area_2 - town / city\n postalCode: address.postCode, // postal_code - postal_code\n countryCodeAlpha2: country, // country_code - country\n },\n contingencies: config['payment.enable3DSecure'] ? ['3D_SECURE'] : [],\n })\n .then((resp) => {\n setFirstRun(false);\n setProcessing(false);\n\n if (config['payment.enable3DSecure']) {\n const passed3DSecure = get3DSecureOutcome(resp);\n\n console.info('3Dsecure response: ', resp);\n\n if (passed3DSecure.result === true) {\n console.info('3DSecure passed.');\n onSuccess(resp);\n } else {\n console.info('3DSecure failed.');\n switch (passed3DSecure.authReason) {\n //case undefined:\n // setPaymentError('3D Secure did not respond correctly, please try again.');\n // break;\n case 'ERROR':\n setPaymentError('There was an error with 3D Secure, please try again.');\n break;\n case 'FAILURE':\n setPaymentError('3D Secure authentication failed, please try again.');\n break;\n case 'SKIPPED_BY_BUYER':\n setPaymentError('3D Secure cannot be skipped, please try again.');\n break;\n default:\n setPaymentError(t('booking.payment.error3DSecure'));\n break;\n }\n }\n } else {\n console.info('3DSecure skipped. Is 3DSecure enabled?');\n onSuccess(resp);\n }\n })\n .catch(function (err) {\n setPaymentError(err);\n setFirstRun(false);\n setProcessing(false);\n });\n };\n\n // Mark as first run if booking changes / on page refresh\n useEffect(() => setFirstRun(true), [amount, bookingId]);\n\n // Re-init the form if the booking changes\n useEffect(() => handlePaypalInit(), [amount, bookingId, isResolved, handlePaypalInit]);\n\n if (isResolved) {\n return (\n <>\n{paypalError.toString()}
}\n \n );\n } else {\n return\n Payit™ is a quick and easy journey with improved control over your finances, reduced exposure to\n fraud and control over data sharing. Payit™ is securely developed by NatWest, but you don’t need\n to bank with NatWest to use it.\n
\n \n \n{t('booking.payment.errorProcessingPayment')}
\n )}\n \n{t('booking.payment.errorAccessingServer')}
\n \n \n )}\n{t('booking.booking.noBookingInProgress')}
);\n }\n\n if (hasBookingError) {\n return wrap(\n <>\n{t('booking.booking.failed')}
\n{t('booking.booking.unableToBookHoliday', prevPath)}
\n\n \n {t('booking.booking.errorLoadingData')}\n
\n \n ,\n );\n }\n\n if (isFetching) {\n return wrap(\n \n {currentStep ? (\n \n
\n ) : null}\n \n
\n )\n};\n\n\nexport default ProgressBar;\n","import React from 'react';\nimport { useSelector } from 'react-redux';\nimport { Switch, Route, Redirect, useLocation } from 'react-router-dom';\nimport { Helmet } from 'react-helmet-async';\nimport Confirmation from './Confirmation/container';\nimport Details from './Details/container';\nimport Extras from './Extras/container';\nimport Payment from './Payment/Payment';\nimport PaymentAction from './PaymentAction/PaymentAction';\n\nimport ScrollToTop from '../../components/ScrollToTop';\nimport WithBooking from '../../components/Booking/WithBooking';\nimport WithBookingLoadingStates from '../../components/Booking/WithBookingLoadingStates';\nimport WithBookingStepOrder from '../../components/Booking/WithBookingStepOrder';\nimport WithDeposit from '../../components/Booking/WithDeposit';\nimport WithParkDetails from '../../components/HOC/WithParkDetails';\nimport WithUnitTypesExtraData from '../../components/HOC/WithUnitTypesExtraData';\n\nimport { parkId } from '../../redux/booking/booking/selectors';\nimport { BOOKING_STEPS } from '../../Constants';\nimport ProgressBar from '../../components/Booking/ProgressBar';\n\nconst BookingRoutes = () => (\n {getStepTitle(currentStep)}
\n \n {currentStep.name !== BOOKING_STEPS.CONFIRMATION && (\n\n {steps.slice(0, 3).map((_, index) => {\n let stepStatus;\n if (index < currentStep.index) {\n stepStatus = \"completed\"\n } else if (index === currentStep.index) {\n stepStatus = \"active\"\n } else {\n stepStatus = \"\"\n }\n return (\n
\n \n )}\n \n \n {index !== 2 && }\n
\n )\n })}\n \n \n \n \n \n \n \n \n \n \n \n \n \n )}\n
\n \n );\n};\n\nexport default Booking;\n","import React, { useState, useEffect } from 'react';\nimport { Accordion, Card, Container } from 'react-bootstrap';\nimport { Helmet } from 'react-helmet-async';\nimport PageTitle from '../../components/PageTitle';\nimport ScrollToTop from '../../components/ScrollToTop';\nimport { config, urls } from '../../../config';\n\nfunction FAQ() {\n const [termData, setTermData] = useState([]);\n const [active, setActive] = useState('0');\n\n useEffect(() => {\n const controller = new AbortController();\n fetch(\n `${urls.cms}/faq/?_fields=title.rendered,content.rendered,acf.order&status=publish`,\n { signal: controller.signal },\n )\n .then((response) => response.json())\n .then((data) => {\n data.sort((a, b) => {\n return a.acf.order - b.acf.order;\n });\n setTermData(data);\n })\n .catch((e) => {\n console.error('Could not fetch the content.', e);\n });\n return () => {\n controller.abort();\n };\n }, []);\n\n return (\n <>\n \n The list below should answer most of the commonly raised questions. If you cannot find the\n information you’re looking for here, please check out the Terms and Conditions, which may answer\n your question. If you still need further help, click on the Contact Us button at the bottom of this\n page. Please note: Separate terms and conditions apply to our promotional offers.\n
\n{t('termsConditions.firstHeading', config)}
\n{t('termsConditions.firstText')}
\n */}\n{t('termsConditions.secondHeading', config)}
\n{t('termsConditions.secondText')}
\nPopular Locations
\n{pl.acf.description}
\n \n \n );\n })}\n'));\n }\n })\n .catch((e) => {\n console.error('Could not fetch the content.', e);\n setDescriptionData('Sorry, there was a problem fetching the content. Please try again.');\n setTitleData('Could not fetch the content.');\n });\n\n return () => {\n controller.abort();\n };\n }, [regionId]);\n\n useEffect(() => {\n selectChannel(dispatch, 'ukcaravan');\n selectRegion(dispatch, regionId);\n }, [dispatch, regionId]);\n\n // Following code is to determine data and channel codes for popular holidays,\n // done in the parent so the tab can be hidden if there are no results\n\n // This makes sure all the parks for this region are in redux\n getParks(dispatch, regionId, true);\n\n // Get available channels for this skin, filter out bad ones\n const availableChannels = useSelector(channels);\n const channelCodes = availableChannels.map((channel) => channel.code);\n const dataWithCorrectChannels = popHolsData.filter((park) => channelCodes.includes(park.channel_id));\n\n // Get the id's of the park we want and then fetch the parks from redux\n const parkIds = dataWithCorrectChannels.map((park) => parseInt(park.park_id));\n const _parksData = useSelector((state) => getSpecificParks(state, parkIds));\n\n // Get the channels of the parks we have\n const parkChannels = popHolsData.map((park) => park.channel_id);\n\n // Filter and merge the data and channels into an array of objects rather than two arrays\n let mergedData = [];\n _parksData.forEach((park, i) => {\n if (typeof park !== 'undefined' && park.regn === regionId) {\n mergedData.push({ park, channel: parkChannels[i] });\n }\n });\n\n let SliderItems = [];\n\n if (sliderItemsRaw.length > 0) {\n SliderItems = sliderItemsRaw.map((img, i) => (\n
Book your next holiday to {RegionName} today...
\n \n\n \n \n \n \n\n \n \n \n \n \n {operatorRegions.length > 0 &&\n operatorRegions.map((region) => (\n
\n \n \n \n \n
\n \n );\n};\n\nOperatorRegions.propTypes = {\n channelRegions: PropTypes.func,\n channelName: PropTypes.func,\n getChannelRegions: PropTypes.func,\n};\n\nexport default OperatorRegions;\n","import { SELECT_CHANNEL, SELECT_OPERATOR } from './action-types';\n\nexport const selectChannel = (dispatch, channelId) => {\n return dispatch({ type: SELECT_CHANNEL, payload: channelId });\n};\n\nexport const selectOperator = (dispatch, operatorId) => {\n return dispatch({ type: SELECT_OPERATOR, payload: operatorId });\n};\n","import React, { memo } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { Card } from 'react-bootstrap';\nimport { Link } from 'react-router-dom';\n\nimport NoImage from '../../assets/images/no-image.png';\n\nexport const OperatorCard = ({ channelId, operator }) => (\n \n {operator.name}
\n{channelName}
\n\n \n \n \n \n\n \n \n \n \n {_channelRegions &&\n _channelRegions.map((region) => (\n
\n \n\n \n \n
\n \n );\n};\n\nexport default Regions;\n","import { SELECT_CHANNEL } from './action-types';\n\nexport const selectChannel = (dispatch, channelId) => {\n return dispatch({ type: SELECT_CHANNEL, payload: channelId });\n};\n","import React, { useState, useEffect } from 'react';\nimport { Link } from 'react-router-dom';\nimport { Container, Row, Col, Card } from 'react-bootstrap';\nimport { Helmet } from 'react-helmet-async';\nimport NoImage from '../../assets/images/no-image.png';\nimport PageTitle from '../../components/PageTitle';\nimport ScrollToTop from '../../components/ScrollToTop';\n\nimport { decodeHtml, slugify } from '../../utils/string';\nimport { urls } from '../../../config';\n\nimport useSeoText from '../../hooks/useSeoText';\nimport TruncatedTextAlt from '../../components/TruncatedTextAlt';\nimport SearchPopup from '../../components/Browse/SearchPopup';\nimport t from '../../../text';\n\nfunction TravelGuideHome() {\n const [travelGuides, setTravelGuides] = useState([]);\n\n useEffect(() => {\n const controller = new AbortController();\n fetch(\n `${urls.cms}/travel-guides?per_page=100&_fields=title.rendered,acf.travel_guide_images,acf.region-id`,\n { signal: controller.signal },\n )\n .then((response) => response.json())\n .then((data) => {\n data.sort((a, b) => {\n return a.title.rendered.localeCompare(b.title.rendered);\n });\n setTravelGuides(data);\n })\n .catch((e) => {\n console.error('Could not fetch the content.', e);\n });\n return () => {\n controller.abort();\n };\n }, []);\n\n const [topSeoText, bottomSeoText] = useSeoText();\n\n const removeLastTwoWords = (str) => {\n return str.split(' ').slice(0, -2).join(' ');\n };\n\n return (\n <>\n Application data reset
\n\n
\n All application data has now been deleted. You will be redirected to the homepage shortly,\n please wait for the page to refresh.\n
\n \n\n {!loggedIn ? (\n <>\n \n \n ) : (\n <>\n \n {location.pathname.includes('/booking/') ? (\n \n ) : (\n \n {t('header.myAccount')}\n \n )}\n \n )}\n\n {location.pathname.includes('/booking/') && (\n \n {t('header.cs.tel')}\n \n )}\n\n \n See our reviews on 
Trustpilot\n \n
\n )\n};\n\nHeaderBar.propTypes = {\n loggedIn: PropTypes.bool,\n onLogout: PropTypes.func,\n onShowLogin: PropTypes.func,\n};\n\nexport default HeaderBar;\n","import React, { useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { Modal } from 'react-bootstrap';\nimport { useSelector } from 'react-redux';\n\nimport { loggedIn } from '../../redux/user/selectors';\n\nimport Login from './Login';\n\nexport const LoginModal = (props) => {\n const _loggedIn = useSelector(loggedIn);\n\n useEffect(() => {\n if (props.show && _loggedIn && props.onClose) props.onClose();\n }, [_loggedIn, props]);\n\n return (\n <>\n {section.title}
\n- \n {section.links.map((link, i) => {\n return (\n
- {getLink(link.text, link.url)} \n );\n })}\n
\n \n {config['global.brandName']} \n \n \n {config['awin.enable'] && (\n \n )}\n \n \n \n \n \n \n
}>\n \n \n \n \n \n \n \n
\n \n
\n \n
We are sorry but we have encountered an error.
\n\n\n Please click the button below to clear out any cached data and try again.\n
\n \n\nIf the problem persists, please contact us:
\n \n