\n {day}, {date}
\n {year}\n
{t('park.dates.fromX', price.toFixed(2))}
\n {selected ? (\n{t('park.dates.selectedDate')}
\n ) : (\n{t('park.dates.dateType', preferred)}
\n )}\nBook your next {parkDetails.name} break
\n \n\n Check-in: {checkIn}\n
\n )}\n {checkOut && (\n\n Check-out: {checkOut}\n
\n )}\n >\n );\n};\n","import PropTypes from 'prop-types';\nimport { forwardRef, useEffect, useState } from 'react';\nimport { Col, Container, Row } from 'react-bootstrap';\n\nimport { useSelector } from 'react-redux';\nimport t from '../../../text';\nimport { BREAKPOINTS } from '../../Constants';\nimport { ControlledAccordion } from '../../components/Common';\nimport { WithParkReviews } from '../../components/HOC/WithParkReviews';\nimport { WithUpdatedSearchParams } from '../../components/HOC/WithUpdatedSearchParams';\nimport { ParkInformationTabs } from '../../components/ParkPage/ParkInformation';\nimport RedEyeParkResultsTag from '../../components/RedEye/RedEyeParkResultsTag';\nimport { usePageWidth } from '../../hooks/usePageWidth';\nimport { regionsSelector } from '../../redux/data/regions/selectors';\nimport { channelIdSelector, detailsSelector, parkIdSelector } from '../../redux/park/selectors';\nimport AlternativeDatesSection from './AlternativeDatesSection';\nimport { BookYourNextParkBreak } from './BookYourNextParkBreak';\nimport { useTabConfigurations } from './useTabConfigurations';\nimport { ParkOverview } from '../../components/ParkPage/ParkInformation/ParkOverview';\n\nexport const ParkInformation = forwardRef(({ searchResult }, ref) => {\n const _channelId = useSelector(channelIdSelector);\n const _parkDetails = useSelector(detailsSelector);\n const _parkId = useSelector(parkIdSelector);\n const _regions = useSelector(regionsSelector);\n const isBoat = _channelId === 'boats';\n\n const { tabConfigurations } = useTabConfigurations();\n\n const { width } = usePageWidth();\n const isDesktop = width > BREAKPOINTS.lg;\n\n // We have to store mobile and desktop separately as mobile can be multiple\n const [activeMobileTabs, setActiveMobileTabs] = useState([searchResult ? '1' : '0']);\n\n // Generate the available tabs\n const availableTabs = tabConfigurations.filter(({ condition }) => condition);\n const firstTab = availableTabs[0].key;\n const [activeDesktopTab, setActiveDesktopTab] = useState(isDesktop ? firstTab : '0');\n\n const handleMenuClick = (key) => {\n setActiveDesktopTab(key);\n };\n\n const handleAlternativeDatesClick = () => {\n // Switch to accommodation tab\n setActiveDesktopTab('1');\n setActiveMobileTabs(['1']);\n };\n\n if (!isBoat) {\n const metaDescription = document.querySelector('meta[name=\"description\"]');\n\n if (metaDescription) {\n // Update the content attribute\n metaDescription.content = t('park.info.metaDescription', _parkDetails.name, _regions[_parkDetails.regn].name);\n }\n }\n\n const currentDesktopTabData = availableTabs.find((tab) => tab.key === activeDesktopTab);\n\n const accordionItems = availableTabs.map((tab) => ({\n title: tab.tabName,\n content:\n {locationFix}\n
\n \n\n{numberOfImages}
\n