\n Important Booking Information\n
\n\n \n Close\n \n
\n \n );\n}\n","import React, { useEffect, useState } from 'react';\nimport { Button, Col } from 'antd';\nimport ArrowLeft from '../../../assets/images/fishery_profile/icons/ArrowLeft.png';\nimport ArrowRight from '../../../assets/images/fishery_profile/icons/ArrowRight.png';\n\nimport Carousel from 'react-multi-carousel';\nimport 'react-multi-carousel/lib/styles.css';\nimport '../../common/components/sliders/assets/css/sliders.css';\nimport { useGlobalState } from './GlobalState';\nimport axios from 'axios';\nimport moment from 'moment-timezone';\nimport { exotic_fishery } from '../../common/Utils';\nimport { toUTCDate } from '../../../utils/date';\nimport { emptyDatesObject } from '../../availability_calendar/AvailabilityCalendar';\nimport { notification } from '../../../utils/messaging';\nimport { useIsAnglerLoggedInQuery } from '../../user_profile/userProfileSlice';\nimport UserLoginForm from '../../common/UserLoginForm';\nimport MenuDrawer from '../../common/components/menu/MenuDrawer';\n\nconst HideLake1 = 'Suite Management';\nconst HideLake2 = 'The Fishing Lake';\nexport default function SelectLake({\n setMaxGuestPerAngler,\n fishery_id,\n scrollToRef,\n disabled = false,\n}) {\n const [lakeInfo] = useGlobalState('lakeInfo');\n const [lakeDetails, setLakeDetails] = useGlobalState('lakeDetails');\n\n const [userSelectedLakeId, setUserSelectedLakeId] =\n useGlobalState('userSelectedLakeId');\n const [, setUserSelectedLakeName] = useGlobalState('userSelectedLakeName');\n const [, setDisabledDates] = useGlobalState('disabledDates');\n const [, setLimitedDates] = useGlobalState('limitedDates');\n const [, setBookingsLoading] = useGlobalState('bookingsLoading');\n const [, setBookingDates] = useGlobalState('bookingDates');\n const [userSelectedPakage, setUserSelectedPakage] =\n useGlobalState('userSelectedPakage');\n const selectedPackageId =\n lakeDetails?.custom_slot_days?.[userSelectedPakage - 1]?.id;\n\n const [userSelectedAnglers, setUserSelectedAnglers] = useGlobalState(\n 'userSelectedAnglers'\n );\n const [userSelectedRods, setUserSelectedRods] =\n useGlobalState('userSelectedRods');\n const [, setAccommodation] = useGlobalState('accommodation');\n\n const [, setAvailableTime] = useGlobalState('availableTime');\n const [, setArrivalTime] = useGlobalState('arrivalTime');\n const [, setDepartureTime] = useGlobalState('departureTime');\n\n const [, setLakeType] = useGlobalState('lakeType');\n const [, setGuestAllowed] = useGlobalState('guestAllowed');\n const [, setIsLakeExclusive] = useGlobalState('isLakeExclusive');\n const [, setBookingOverlay] = useGlobalState('bookingOverlay');\n const [, setTicketAvailable] = useGlobalState('ticketsAvailable');\n const [, setHowToBook] = useGlobalState('howToBook');\n const [, setEstimatedPricing] = useGlobalState('estimatedPricing');\n const [, setUserSelectedSwims] = useGlobalState('userSelectedSwims');\n const [, setUserBookingData] = useGlobalState('userBookingData');\n const [, setUserSelectedDoubleSwim] = useGlobalState(\n 'userSelectedDoubleSwim'\n );\n const [, setLoading] = useState('loading');\n const [, setMaxRod] = useGlobalState('maxRod');\n const [, setLakeExclusive] = useGlobalState('lakeExclusive');\n const [bookingType, setBookingType] = useGlobalState('bookingType');\n\n const [showSignInDrawer, setShowSignInDrawer] = useState(false);\n const { data: isLoggedIn } = useIsAnglerLoggedInQuery();\n\n // For Floor lake slider\n const responsive = {\n all: {\n breakpoint: { max: 10000, min: 0 },\n items: 1,\n slidesToSlide: 1,\n },\n };\n\n const [carouselNeed, setCarouselNeed] = useState(false);\n\n const ButtonGroup = ({ next, previous, goToSlide, ...rest }) => {\n const {\n carouselState: { totalItems, slidesToShow },\n } = rest;\n\n if (totalItems > slidesToShow && totalItems !== slidesToShow) {\n setCarouselNeed(true);\n } else {\n setCarouselNeed(false);\n }\n\n return (\n carouselNeed && (\n <>\n \n {bookingInfo}\n
\n \n !disabled && previous()}\n >\n 
\n \n !disabled && next()}\n >\n 
\n \n
\n \n )\n );\n };\n\n const getBookingsInfo = (lake_id, lake_exclusive_only = false) => {\n setBookingsLoading(true);\n const axios_config = {\n headers: {\n Accept: 'application/json',\n 'Content-Type': 'application/json',\n },\n withCredentials: true,\n };\n\n let payload_data = {\n anglers: userSelectedAnglers,\n guest: userSelectedRods,\n lake_id: lake_id,\n date: moment(new Date()).format('YYYY-MM-DD'),\n book_lake_exclusive: lake_exclusive_only,\n custom_slot_id: selectedPackageId,\n booking_type: bookingType,\n };\n\n axios\n .post('booking/lake/details', payload_data, axios_config)\n .then((res) => {\n if (res.status === 200) {\n const _result = res.data.result;\n setDisabledDates(_result.fully_booked_dates.map(toUTCDate));\n setLimitedDates(\n _result?.limited_availability_dates?.map((ld) => ({\n ...ld,\n date: toUTCDate(ld.date),\n })) || []\n );\n setLakeDetails(_result);\n setGuestAllowed(_result.guest_allowed);\n setIsLakeExclusive(_result?.lake_exclusive_enabled);\n setLakeType(_result.lake_type);\n setTicketAvailable(_result.swims_tickets_available);\n setMaxRod(_result.max_rod_per_angler);\n setHowToBook(_result.how_to_book);\n setMaxGuestPerAngler(_result.guest_limit_per_angler);\n\n if (lake_id && scrollToRef?.current) {\n scrollToRef.current.scrollIntoView({\n block: 'start',\n inline: 'nearest',\n smooth: true,\n });\n }\n setBookingsLoading(false);\n } else {\n notification.error({\n description: 'Error processing result',\n });\n setBookingsLoading(false);\n setUserSelectedLakeId(null);\n setLoading(false);\n }\n })\n .catch((err) => {\n setUserSelectedLakeId(null);\n if (err && err.response) {\n if (err.response.status === 500) {\n notification.error({\n description: 'Server Response failed. Please try again later',\n });\n } else if (err.response.status === 401) {\n notification.error({\n description:\n 'Your action will not be saved. Please Login and try again!',\n });\n } else if (err.response.status === 400) {\n notification.error({\n description: err.response.data['detail'],\n });\n } else if (err.response.status === 422) {\n if (err.response.data['detail'] === 'Signature has expired') {\n notification.error({\n description:\n 'Login session has been expired. Please Login to continue!',\n });\n } else {\n notification.error({\n description:\n \"OOPS! Server didn't like the request. If this persists please contact support team\",\n });\n }\n } else if (err.response.status === 423) {\n notification.error({\n description:\n 'Sorry ! this booking slot has been booked by another user, Try different booking!',\n });\n }\n }\n setBookingsLoading(false);\n setLoading(false);\n });\n };\n\n const checkUserCanBookLake = (lakeId) => {\n const axios_config = {\n headers: {\n Accept: 'application/json',\n 'Content-Type': 'application/json',\n },\n withCredentials: true,\n params: {\n lake_id: lakeId,\n },\n };\n\n axios\n .get('booking/user_can_book', axios_config)\n .then((res) => {\n const { can_book = false, detail = 'Something went wrong!' } =\n res?.data;\n if (res.status !== 200 || !can_book) {\n notification.error({\n description: detail,\n });\n setUserSelectedLakeId(null);\n setUserSelectedLakeName(null);\n setLakeDetails([]);\n }\n })\n .catch((err) => {\n notification.error({\n description: err?.response?.data?.['detail'],\n });\n });\n };\n\n const handleLakeChange = (e, lakeDetails) => {\n if (disabled) {\n return;\n }\n const { id, name: lakeName = '', lake_exclusive_only } = lakeDetails;\n if (userSelectedLakeId !== id) {\n checkUserCanBookLake(id);\n // Reset Form\n setAccommodation(false);\n setAvailableTime(null);\n setEstimatedPricing(null);\n // setUserSelectedSwims(null);\n setUserSelectedAnglers(1);\n setUserSelectedRods(0);\n setLakeExclusive(false);\n // setUserSelectedLakeId(null);\n setBookingDates([{ ...emptyDatesObject }]);\n setArrivalTime(null);\n setDepartureTime(null);\n setUserSelectedPakage(null);\n // setDateText(`${new Date()}reset`);\n setBookingType('');\n }\n setUserSelectedLakeId(id);\n setAccommodation(lakeDetails?.accommodation);\n setUserSelectedLakeName(lakeName);\n getBookingsInfo(id, lake_exclusive_only);\n setUserSelectedSwims([]);\n setUserSelectedDoubleSwim([]);\n setUserBookingData({});\n setBookingOverlay(false);\n };\n\n useEffect(() => {\n if (lakeInfo && lakeInfo.length === 1) {\n handleLakeChange('', lakeInfo[0]);\n }\n }, [lakeInfo]);\n const idsToRemove = [HideLake1, HideLake2];\n const filteredItems =\n fishery_id.toString() === exotic_fishery\n ? lakeInfo?.filter((item) => !idsToRemove.includes(item.name))\n : lakeInfo;\n\n return (\n <>\n \n {lake.name}\n
\n \n {showMemberOnly && (\n\n \n
\n \n )}\n \n );\n })\n : ''}\n \n Member-only Lake!
\n\n
There was an issue!
,\n style: { border: '1px #D34545 solid' },\n placement: window?.innerWidth <= 500 ? 'bottom' : 'topRight',\n className: 'gRegular br10',\n description: 'Error processing result',\n });\n }\n })\n .catch((err) => {\n console.error(err);\n if (err.response) {\n if (err.response.status === 500) {\n notification.error({\n message: There was an issue!
,\n style: { border: '1px #D34545 solid' },\n placement: window?.innerWidth <= 500 ? 'bottom' : 'topRight',\n className: 'gRegular br10',\n description: 'Server Response failed. Please try again later',\n });\n } else if (err.response.status === 401) {\n notification.error({\n message: There was an issue!
,\n style: { border: '1px #D34545 solid' },\n placement: window?.innerWidth <= 500 ? 'bottom' : 'topRight',\n className: 'gRegular br10',\n description:\n 'Your action will not be saved. Please Login and try again!',\n });\n } else if (err.response.status === 400) {\n notification.error({\n message: There was an issue!
,\n style: { border: '1px #D34545 solid' },\n placement: window?.innerWidth <= 500 ? 'bottom' : 'topRight',\n className: 'gRegular br10',\n description: err.response.data['detail'],\n });\n } else if (err.response.status === 422) {\n if (err.response.data['detail'] === 'Signature has expired') {\n notification.error({\n message: There was an issue!
,\n style: { border: '1px #D34545 solid' },\n placement: window?.innerWidth <= 500 ? 'bottom' : 'topRight',\n className: 'gRegular br10',\n description:\n 'Login session has been expired. Please Login to continue!',\n });\n } else {\n notification.error({\n message: There was an issue!
,\n style: { border: '1px #D34545 solid' },\n placement: window?.innerWidth <= 500 ? 'bottom' : 'topRight',\n className: 'gRegular br10',\n description:\n \"OOPS! Server didn't like the request. If this persists please contact support team\",\n });\n }\n } else if (err.response.status === 423) {\n notification.error({\n message: There was an issue!
,\n style: { border: '1px #D34545 solid' },\n placement: window?.innerWidth <= 500 ? 'bottom' : 'topRight',\n className: 'gRegular br10',\n description:\n 'Sorry ! this booking slot has been booked by another user, Try different booking!',\n });\n }\n } else {\n notification.error({\n message: There was an issue!
,\n style: { border: '1px #D34545 solid' },\n placement: window?.innerWidth <= 500 ? 'bottom' : 'topRight',\n className: 'gRegular br10',\n description: 'Error processing result',\n });\n }\n })\n .finally(() => {\n setBookingsLoading(false);\n setLoading(false);\n });\n };\n\n const handleAnglerChange = (value) => {\n setUserSelectedAnglers(value);\n setUserBookingData({});\n setUserSelectedSwims([]);\n setUserSelectedDoubleSwim([]);\n setEstimatedPricing(null);\n\n setUserSelectedLakeId(userSelectedLakeId);\n\n userSelectedLakeId &&\n getBookingsInfo(\n userSelectedLakeId,\n value,\n false,\n bookingType,\n lakeDetails?.custom_slot_days &&\n lakeDetails?.custom_slot_days[userSelectedPakage - 1]?.id\n );\n\n // Reset Form\n setAvailableTime(null);\n setLakeExclusive(false);\n // setUserSelectedSwims(null);\n // setUserSelectedLakeId(null);\n setBookingDates([{ ...emptyDatesObject }]);\n setArrivalTime(null);\n setDepartureTime(null);\n };\n\n const handleRodChange = (value) => {\n setUserSelectedRods(value);\n setLakeExclusive(false);\n };\n\n const generateNumAnglersList = (maxAngler) => {\n const isManorFishing = is_manor && !accommodation;\n const maximumAngler = isManorFishing || is_woolpack ? 1 : maxAngler;\n let list = [];\n for (let i = 1; i <= maximumAngler; i++) {\n list.push(i);\n }\n return list;\n };\n\n useEffect(() => {\n const MaxGuest = userSelectedAnglers * maxGuestPerAngler;\n const list = [];\n for (let i = 0; i <= MaxGuest; i++) {\n list.push(i);\n }\n setGuestOptions(list);\n }, [maxGuestPerAngler, userSelectedAnglers]);\n\n const { resetIdentity } = useUserIdentification();\n const logOutUser = () => {\n const axios_config = {\n headers: {\n Accept: 'application/json',\n 'Content-Type': 'application/json',\n },\n withCredentials: true,\n };\n\n axios\n .get('/angler/refresh-revoke', axios_config)\n .then(() => {})\n .catch(() => {})\n .finally(() => {\n axios\n .get('/angler/access-revoke', axios_config)\n .then(() => {\n resetIdentity();\n })\n .catch(() => {})\n .finally(() => window?.location?.reload?.());\n });\n };\n\n const getBookingInfo = () => {\n let getParams = { fishery_id: props.fishery_id };\n\n const axios_config = {\n headers: {\n Accept: 'application/json',\n 'Content-Type': 'application/x-www-form-urlencoded',\n },\n withCredentials: true,\n params: getParams,\n };\n\n axios\n .get('booking/details', axios_config)\n .then((res) => {\n if (res.status === 200) {\n let _result = res.data.result;\n if (_result.lakes.length > 0) {\n setLakeInfo(_result.lakes);\n setFisheryInfo(_result.fishery_info);\n }\n setLoading(false);\n } else {\n console.error(res);\n notification.error({\n message: There was an issue!
,\n style: { border: '1px #D34545 solid' },\n placement: window?.innerWidth <= 500 ? 'bottom' : 'topRight',\n className: 'gRegular br10',\n description: 'Error processing request',\n });\n setLoading(false);\n }\n })\n .catch((err) => {\n console.error(err);\n if (err.response) {\n if (\n err.response.status === 401 ||\n (err.response.status === 422 &&\n err.response.data.detail === 'Signature has expired')\n ) {\n if (\n err.response.data.detail === 'Signature has expired' &&\n isInsideWidget\n ) {\n logOutUser();\n } else {\n notification.error({\n message: There was an issue!
,\n style: { border: '1px #D34545 solid' },\n placement: window?.innerWidth <= 500 ? 'bottom' : 'topRight',\n className: 'gRegular br10',\n description: 'Please login to continue',\n });\n history.push(`/fishery/${props.fishery_id}`);\n }\n }\n } else {\n notification.error({\n message: There was an issue!
,\n style: { border: '1px #D34545 solid' },\n placement: window?.innerWidth <= 500 ? 'bottom' : 'topRight',\n className: 'gRegular br10',\n description: 'Error processing result',\n });\n }\n setLoading(false);\n });\n };\n\n const logUser = (username, password) => {\n const instance = axios.create({\n withCredentials: true,\n crossDomain: true,\n baseURL: `${process.env.REACT_APP_AXIOS_URL}`,\n 'Access-Control-Allow-Origin': '*',\n sameSite: null,\n secure: false,\n });\n\n const config = {\n headers: {\n Accept: 'application/json',\n 'Content-Type': 'application/x-www-form-urlencoded',\n },\n };\n\n const formData = new FormData();\n formData.append('username', username);\n formData.append('password', password);\n\n instance\n .post('login', formData, config)\n .then((res) => {\n if (res.status === 200) {\n window.location.reload(true);\n } else {\n notification.error({\n message: There was an issue!
,\n style: { border: '1px #D34545 solid' },\n placement: window?.innerWidth <= 500 ? 'bottom' : 'topRight',\n className: 'gRegular br10',\n description: 'Incorrect Details. Please try again.',\n });\n }\n })\n .catch((err) => {\n notification.error({\n message: There was an issue!
,\n style: { border: '1px #D34545 solid' },\n placement: window?.innerWidth <= 500 ? 'bottom' : 'topRight',\n className: 'gRegular br10',\n description: 'Incorrect Details. Please try again.',\n });\n if (err.response) {\n if (err.response.status !== 401 && err.response.status !== 200) {\n notification.error({\n message: There was an issue!
,\n style: { border: '1px #D34545 solid' },\n placement: window?.innerWidth <= 500 ? 'bottom' : 'topRight',\n className: 'gRegular br10',\n description: 'Incorrect Details. Please try again.',\n });\n }\n }\n })\n .finally(() => {});\n };\n\n // Similar to componentDidMount and componentDidUpdate:\n useEffect(() => {\n window.scrollTo(0, 0);\n // Update the document title using the browser API\n if (loginChecked) {\n getBookingInfo();\n }\n }, [loginChecked]);\n\n useEffect(() => {\n if (lakeDetails.lake_exclusive_only) {\n setLakeExclusive(true);\n }\n }, [lakeDetails]);\n\n const handlePackage = (value) => {\n const isExclusive =\n lakeDetails?.custom_slot_days[value - 1]?.booking_type ===\n 'lake_exclusive';\n setLakeExclusive(isExclusive);\n\n getBookingsInfo(\n userSelectedLakeId,\n userSelectedAnglers,\n isExclusive,\n bookingType,\n lakeDetails?.custom_slot_days[value - 1]?.id\n );\n setBookingDates([{ ...emptyDatesObject }]);\n\n setUserSelectedPakage(value);\n setUserSelectedAnglers(1);\n setUserSelectedRods(0);\n\n setEstimatedPricing(null);\n setAvailableTime(null);\n setArrivalTime(null);\n setDepartureTime(null);\n };\n\n useEffect(() => {\n if (window) {\n const search = window.location.search;\n const params = new URLSearchParams(search);\n const paramData = params.get('details');\n\n if (paramData) {\n const cryptkey = CryptoJS.enc.Utf8.parse(\n process.env.REACT_APP_PRIVATE_KEY\n );\n const cryptiv = CryptoJS.enc.Utf8.parse(process.env.REACT_APP_IV);\n\n // Decryption\n const crypted = CryptoJS.enc.Base64.parse(\n decodeURIComponent(paramData.toString())\n );\n var decrypt = CryptoJS.AES.decrypt({ ciphertext: crypted }, cryptkey, {\n iv: cryptiv,\n mode: CryptoJS.mode.CTR,\n });\n const decryptedValue = decrypt.toString(CryptoJS.enc.Utf8).split(':');\n\n const axios_config = {\n headers: {\n Accept: 'application/json',\n // 'Content-Type': 'application/x-www-form-urlencoded',\n 'Content-Type': 'application/json',\n },\n withCredentials: true,\n };\n\n if (decryptedValue.length === 2) {\n axios\n .get('auth', axios_config)\n .then((res) => {\n if (res.status === 200) {\n setLoginChecked(true);\n } else {\n logUser(decryptedValue[0], decryptedValue[1]);\n }\n })\n .catch(() => {\n logUser(decryptedValue[0], decryptedValue[1]);\n });\n }\n } else {\n setLoginChecked(true);\n }\n }\n }, []);\n\n const disableNonLakeExclusiveControls = isLakeExclusive && lakeExclusive;\n\n const ticketTypeName =\n (is_exotic_fishery && !is_exotic_arapaima_lake) || accommodation\n ? 'Guests'\n : lakeType.toLowerCase() === 'ticket'\n ? 'Tickets'\n : 'Anglers';\n\n const anglersControl = (\n <>\n \n {`Total No. of ${ticketTypeName}: `}\n
\nChoose Your Booking Type:
\n\n {is_exotic_fishery && !is_exotic_arapaima_lake\n ? 'How many Guests will be fishing?:'\n : ' Non-Angling Guests:'}\n
\nChoose Your Package:
\n\n {\n handleLakeExclusiveCheckboxChanged(e.target.checked);\n }}\n style={{ width: '30px', height: '30px' }}\n />\n \n
\n );\n\n const accomodationControl = (\n \n
Book Lake Exclusive
\n\n {`(Up To ${\n lakeDetails?.lake_exclusive_anglers_allowed ?? '10'\n } Anglers Allowed)`}\n
\n \n\n {\n handleLakeExclusiveCheckboxChanged(e.target.checked);\n }}\n style={{ width: '30px', height: '30px' }}\n />\n \n
\n );\n\n console.log(accommodation, lakeExclusive);\n\n return (\n \n
Book Accommodation
\n\n {`(Up To ${\n lakeDetails?.lake_exclusive_anglers_allowed ?? '10'\n } Guests Allowed)`}\n
\n \n\n \n \n
\n \n
\n\n
\n )}\n \n )}\n \n \n {is_exotic_fishery\n ? 'Great! Let’s book your Exotic Fishing package.'\n : 'Great! Let’s begin your booking session.'}\n
\n\n
\n \n \n
\n ) : (\n \n
\n )}\n\n \n Select your lake first\n
\n \n {lakeDetails?.lake_type === 'Swim-Ticket' ? (\n <>\n \n {!lakeDetails.lake_exclusive_only && (\n <>\n \n OR\n
\n \n )}\n\n \n {bookingTypeControl}\n {bookingType === 'lake_exclusive' && !accommodation && (\n <>{lakeExclusiveControl}\n )}\n {lakeExclusive && accommodation && <>{accomodationControl}}\n {(bookingType === 'swim' || bookingType === 'ticket') && (\n <>\n \n {generateNumAnglersList(ticketAvailable).map((id) => {\n return (\n \n );\n })}\n \n \n {guestOptions.map((id) => {\n return (\n \n );\n })}\n \n \n )}\n
\n \n ) : (\n <>\n {lakeDetails?.custom_slot_booking && !userSelectedPakage ? (\n \n {is_exotic_fishery || accommodation\n ? 'Total Number of Guests'\n : `Total No. of ${ticketTypeName}: `}\n
\n\n {is_exotic_fishery && !is_exotic_arapaima_lake\n ? 'How many Guests will be fishing?:'\n : ' Non-Angling Guests:'}\n
\n\n {customPackageControl}\n
\n ) : lakeDetails?.custom_slot_booking && lakeExclusive ? (\n <>\n \n {customPackageControl}\n
\n\n \n
\n \n ) : !lakeDetails?.custom_slot_booking && isLakeExclusive ? (\n \n
\n {DynamicText?.is_active ? (\n DynamicText?.properties?.booking_step_1\n ?.lake_exclusive_label\n ) : (\n <>\n {accommodation ? 'Accommodation' : 'Lake Exclusive'}{' '}\n {`(Up To ${\n lakeDetails?.lake_exclusive_anglers_allowed ??\n '10'\n } ${\n accommodation ? 'Guests' : 'Anglers'\n })`}{' '}\n \n )}\n
\n \n\n
\n\n \n Book Ticket(s):\n
\n\n {anglersControl}\n {guestsControl}\n
\n \n
\n \n Book Whole Lake:\n
\n {lakeExclusiveControl}\n\n {lakeDetails?.custom_slot_days && customPackageControl}\n {anglersControl}\n {guestsControl}\n
\n )}\n {userSelectedPakage &&\n lakeDetails?.custom_slot_days &&\n lakeDetails?.custom_slot_days[userSelectedPakage - 1]\n ?.description && (\n \n \n
\n \n {\n lakeDetails?.custom_slot_days[userSelectedPakage - 1]\n ?.description\n }\n
\n There was an issue!
,\n style: { border: '1px #D34545 solid' },\n placement: window?.innerWidth <= 500 ? 'bottom' : 'topRight',\n className: 'gRegular br10',\n description: 'Please login to continue',\n });\n }\n } else {\n notification.error({\n message: There was an issue!
,\n style: { border: '1px #D34545 solid' },\n placement: window?.innerWidth <= 500 ? 'bottom' : 'topRight',\n className: 'gRegular br10',\n description: 'Error processing result',\n });\n }\n })\n .finally(() => {});\n };\n\n const handleOnclickEvent = (\n e,\n isSelectedDates,\n isUnClickable,\n swim_id,\n date\n ) => {\n if (isSelectedDates) {\n if (isUnClickable) {\n } else {\n handleSwimChange(e, swim_id, date);\n }\n }\n };\n\n const isSelectedDates = selectedDates.indexOf(date) !== -1;\n const isAdjacentDate =\n selectedDates.indexOf(addToDateString(date, -1)) !== -1 ||\n selectedDates.indexOf(addToDateString(date, 1)) !== -1;\n if (\n swimAvailableData.booked_dates &&\n swimAvailableData.booked_dates[swim_id] &&\n swimAvailableData.booked_dates[swim_id].indexOf(date) > -1\n ) {\n return (\n \n 
\n
\n \n );\n } else {\n const isUnClickable =\n unSelectableSwimIds && unSelectableSwimIds.indexOf(swim_id) > -1;\n const userSelectedIcon =\n userSelectedDoubleSwim.indexOf(swim_id) > -1 && isSelectedDates\n ? UserDoubleBlueIcon\n : userSelectedSwims.indexOf(swim_id) > -1 && isSelectedDates\n ? UserBlueIcon\n : UserImage;\n\n const userDoubleSelect =\n userSelectedDoubleSwim.indexOf(swim_id) > -1 && isSelectedDates;\n\n return (\n \n
\n \n );\n }\n}\n","import { Button, Modal } from 'antd';\nimport '../assets/css/calendar-colours-modal.css';\nimport bookingKey from '../assets/images/BookingKey.png';\nimport React from 'react';\n\nexport default function SwimKeyModal({ visible, onClose }) {\n return (\n There was an issue!
,\n style: { border: '1px #D34545 solid' },\n placement: window?.innerWidth <= 500 ? 'bottom' : 'topRight',\n className: 'gRegular br10',\n description: 'Server Response failed. Please try again later',\n });\n } else if (err.response.status === 401) {\n notification.error({\n message: There was an issue!
,\n style: { border: '1px #D34545 solid' },\n placement: window?.innerWidth <= 500 ? 'bottom' : 'topRight',\n className: 'gRegular br10',\n description:\n 'Your action will not be saved. Please Login and try again!',\n });\n } else if (err.response.status === 400) {\n notification.error({\n message: There was an issue!
,\n style: { border: '1px #D34545 solid' },\n placement: window?.innerWidth <= 500 ? 'bottom' : 'topRight',\n className: 'gRegular br10',\n description: err.response.data['detail'],\n });\n } else if (err.response.status === 422) {\n if (err.response.data['detail'] === 'Signature has expired') {\n notification.error({\n message: There was an issue!
,\n style: { border: '1px #D34545 solid' },\n placement: window?.innerWidth <= 500 ? 'bottom' : 'topRight',\n className: 'gRegular br10',\n description:\n 'Login session has been expired. Please Login to continue!',\n });\n } else {\n notification.error({\n message: There was an issue!
,\n style: { border: '1px #D34545 solid' },\n placement: window?.innerWidth <= 500 ? 'bottom' : 'topRight',\n className: 'gRegular br10',\n description:\n \"OOPS! Server didn't like the request. If this persists please contact support team\",\n });\n }\n } else if (err.response.status === 423) {\n notification.error({\n message: There was an issue!
,\n style: { border: '1px #D34545 solid' },\n placement: window?.innerWidth <= 500 ? 'bottom' : 'topRight',\n className: 'gRegular br10',\n description:\n 'Sorry ! this booking slot has been booked by another user, Try different booking!',\n });\n }\n } else {\n notification.error({\n message: There was an issue!
,\n style: { border: '1px #D34545 solid' },\n placement: window?.innerWidth <= 500 ? 'bottom' : 'topRight',\n className: 'gRegular br10',\n description: 'Error processing result',\n });\n }\n })\n .finally(() => {});\n };\n\n const reformatTableDate = (_date) => {\n return moment(new Date(_date)).format('Do MMM').toString();\n };\n\n useEffect(() => {\n window.scrollTo(0, 0);\n getSwimAvailability();\n }, []);\n\n const selectedDates = swimAvailableData?.selected_dates || [];\n const isSelectedDate = (date) => selectedDates.indexOf(date) !== -1;\n const isAdjacentDate = (date) =>\n selectedDates.indexOf(addToDateString(date, -1)) !== -1 ||\n selectedDates.indexOf(addToDateString(date, 1)) !== -1;\n\n return (\n \n \n \n \n {generateSlideImages(swimImages).map((x) => {\n return (\n setShowKeyModal(false)}\n />\n \n setShowKeyModal(true)}\n >\n Click here to show the booking key\n \n \n \n
\n \n ) : (\n ''\n )}\n
\n );\n}\n","var _path;\nvar _excluded = [\"title\", \"titleId\"];\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\nimport * as React from \"react\";\nfunction SvgInfo(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, _excluded);\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n xmlns: \"http://www.w3.org/2000/svg\",\n width: 15,\n height: 15,\n viewBox: \"0 0 15 15\",\n fill: \"none\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M7.49996 0.416656C6.09901 0.416656 4.72952 0.832087 3.56467 1.61041C2.39983 2.38874 1.49194 3.49501 0.955816 4.78932C0.419695 6.08362 0.279421 7.50785 0.552733 8.88188C0.826045 10.2559 1.50067 11.518 2.49129 12.5087C3.48191 13.4993 4.74404 14.1739 6.11807 14.4472C7.49211 14.7205 8.91633 14.5803 10.2106 14.0441C11.5049 13.508 12.6112 12.6001 13.3895 11.4353C14.1679 10.2704 14.5833 8.90094 14.5833 7.49999C14.5833 6.56979 14.4001 5.6487 14.0441 4.78932C13.6881 3.92993 13.1664 3.14907 12.5086 2.49132C11.8509 1.83357 11.07 1.31181 10.2106 0.955843C9.35125 0.599872 8.43016 0.416656 7.49996 0.416656ZM8.2083 11.0417C8.2083 11.2295 8.13367 11.4097 8.00083 11.5425C7.86799 11.6754 7.68782 11.75 7.49996 11.75C7.3121 11.75 7.13193 11.6754 6.9991 11.5425C6.86626 11.4097 6.79163 11.2295 6.79163 11.0417V6.79166C6.79163 6.60379 6.86626 6.42363 6.9991 6.29079C7.13193 6.15795 7.3121 6.08332 7.49996 6.08332C7.68782 6.08332 7.86799 6.15795 8.00083 6.29079C8.13367 6.42363 8.2083 6.60379 8.2083 6.79166V11.0417ZM7.49996 4.66666C7.28982 4.66666 7.0844 4.60434 6.90967 4.48759C6.73494 4.37084 6.59876 4.2049 6.51834 4.01076C6.43792 3.81661 6.41688 3.60298 6.45788 3.39687C6.49887 3.19077 6.60007 3.00145 6.74866 2.85286C6.89725 2.70426 7.08657 2.60307 7.29268 2.56207C7.49878 2.52108 7.71242 2.54212 7.90656 2.62253C8.10071 2.70295 8.26665 2.83914 8.3834 3.01386C8.50015 3.18859 8.56246 3.39401 8.56246 3.60416C8.56246 3.88595 8.45052 4.1562 8.25126 4.35546C8.05201 4.55471 7.78175 4.66666 7.49996 4.66666Z\",\n fill: \"#5C6166\"\n })));\n}\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgInfo);\nexport default __webpack_public_path__ + \"static/media/info.924debddec3a7d50e294505d521aa48a.svg\";\nexport { ForwardRef as ReactComponent };","import * as React from 'react';\n\nconst AddIcon = (props) => (\n \n {` Perfect! Time to select your ${\n is_exotic_fishery && !is_exotic_arapaima_lake ? 'room(s)' : 'swim(s)'\n }!`}\n
\n\n 
\n {fishery_id !== exotic_fishery && (\n
\n );\n })}\n \n \n {x.description}
\n )}\n\n \n \n | \n {swimAvailableData\n ? swimAvailableData.display_dates.map((date, index) => {\n return (\n \n {reformatTableDate(date)}\n \n );\n })\n : ''}\n \n {/* */}\n {swimAvailableData\n ? swimAvailableData.swims.map((swim, index) => {\n return (\n \n | \n {' '}\n | \n {swimAvailableData.display_dates.map((date, i) => {\n return (\n \n );\n })\n : ''}\n {/* */}\n \n
\n \n {swim.name}{' '}\n {swim?.swim_type?.toLowerCase() !== 'standard'\n ? swim?.swim_type\n : swim?.swim_size}\n
\n\n {' '}\n {swim?.swim_type?.toLowerCase() !== 'standard'\n ? swim.swim_size\n : ''}\n
\n\n \n {name}\n
\n \n {image && (\n
\n \n £{price.toFixed(2)}\n
\n \n {description}\n
\n \n setInfoVisible(false)}\n >\n Close\n \n
\n \n \n \n {' '}\n No Image\n
\n )}\n \n
\n \n {name}\n {description && (\n setInfoVisible(true)}\n />\n )}\n
\n \n £{price.toFixed(2)}\n
\n \n \n \n = max_quantity}\n >\n = max_quantity\n ? '#CCD3D9'\n : '#5C6166'\n : '#5C6166'\n }\n />\n \n \n \n
\n {quantity}
\n \n Select your booking add-ons:\n
\n \n \n
\n );\n}\n\nexport default UserBookingNavButtons;\n","import * as React from 'react';\n\nconst SvgUserBox = (props) => (\n \n {helpText}\n
\n There was an issue!
,\n style: { border: '1px #D34545 solid' },\n placement: window?.innerWidth <= 500 ? 'bottom' : 'topRight',\n className: 'gRegular br10',\n description: message,\n });\n\n const handleGetAnglerDetailsError = useCallback(\n (err) => {\n if (err.response) {\n if (err.response.status === 500) {\n showErrorNotification(\n 'Server Response failed. Please try again later'\n );\n } else if (\n err.response.status === 422 &&\n err.response.data.detail === 'Signature has expired'\n ) {\n showErrorNotification('Please login to continue');\n if (isInsideWidget) {\n sendWidgetMessage({ type: 'widgetCollapse' });\n } else {\n history.push(`/fishery/${fishery_id}`);\n }\n } else if (err.response.status === 422) {\n showErrorNotification(\n \"OOPS! Server didn't like the request. If this persists please contact support team\"\n );\n } else if (err.response.status === 423) {\n showErrorNotification(\n 'Sorry ! this booking slot has been booked by another user, Try different booking!'\n );\n }\n }\n },\n [fishery_id, history]\n );\n\n const copyAsAbove = (index) => {\n if (memberSetting?.enforce_unique_angler) {\n notification.error({\n message: There was an issue!
,\n style: { border: '1px #D34545 solid' },\n placement: window?.innerWidth <= 500 ? 'bottom' : 'topRight',\n className: 'gRegular br10',\n description:\n 'This venue requires you to enter unique details for each angler in your booking. Please edit your details to proceed.',\n });\n return;\n }\n\n if (isSeasonTicketHolder) {\n notification.error({\n message: There was an issue!
,\n style: { border: '1px #D34545 solid' },\n placement: window?.innerWidth <= 500 ? 'bottom' : 'topRight',\n className: 'gRegular br10',\n description:\n \"As a season ticket holder, you can't use your details for multiple anglers in your party. Please enter different details in order to proceed.\",\n });\n return;\n }\n if (\n !memberSetting?.is_duplicate_permitted &&\n lakeDetails?.access_type === 'Member only'\n ) {\n notification.error({\n message: There was an issue!
,\n style: { border: '1px #D34545 solid' },\n placement: window?.innerWidth <= 500 ? 'bottom' : 'topRight',\n className: 'gRegular br10',\n description:\n 'This member lake requires you to enter different details for every angler. Please ensure all anglers are registered members.',\n });\n return;\n }\n const value = form.getFieldsValue(true);\n value.angler_details[index].first_name =\n value.angler_details[index - 1].first_name;\n value.angler_details[index].last_name =\n value.angler_details[index - 1].last_name;\n value.angler_details[index].email = value.angler_details[index - 1].email;\n value.angler_details[index].concession =\n value.angler_details[index - 1].concession;\n value.angler_details[index].num_rod =\n value.angler_details[index - 1].num_rod;\n value.angler_details[index].phone_number =\n value.angler_details[index - 1].phone_number;\n form.setFieldsValue({\n angler_details: value.angler_details,\n });\n updatePricing();\n };\n const copyForAll = () => {\n if (memberSetting?.enforce_unique_angler) {\n notification.error({\n message: There was an issue!
,\n style: { border: '1px #D34545 solid' },\n placement: window?.innerWidth <= 500 ? 'bottom' : 'topRight',\n className: 'gRegular br10',\n description:\n 'This venue requires you to enter unique details for each angler in your booking. Please edit your details to proceed.',\n });\n return;\n }\n\n if (isSeasonTicketHolder) {\n notification.error({\n message: There was an issue!
,\n style: { border: '1px #D34545 solid' },\n placement: window?.innerWidth <= 500 ? 'bottom' : 'topRight',\n className: 'gRegular br10',\n description:\n \"As a season ticket holder, you can't use your details for multiple anglers in your party. Please enter different details in order to proceed.\",\n });\n return;\n }\n\n if (\n !memberSetting?.is_duplicate_permitted &&\n lakeDetails?.access_type === 'Member only'\n ) {\n notification.error({\n message: There was an issue!
,\n style: { border: '1px #D34545 solid' },\n placement: window?.innerWidth <= 500 ? 'bottom' : 'topRight',\n className: 'gRegular br10',\n description:\n 'This member lake requires you to enter different details for every angler. Please ensure all anglers are registered members.',\n });\n return;\n }\n const value = form.getFieldsValue(true);\n for (let index = 1; index < value.angler_details.length; index++) {\n value.angler_details[index].first_name =\n value.angler_details[0].first_name;\n value.angler_details[index].last_name = value.angler_details[0].last_name;\n value.angler_details[index].email = value.angler_details[0].email;\n value.angler_details[index].concession =\n value.angler_details[0].concession;\n value.angler_details[index].num_rod = value.angler_details[0].num_rod;\n value.angler_details[index].phone_number =\n value.angler_details[0].phone_number;\n }\n form.setFieldsValue({\n angler_details: value.angler_details,\n });\n updatePricing();\n };\n\n const generateList = (maxAngler) => {\n let list = [];\n if (userSelectedLakeId === process.env.REACT_APP_ORCHID_LAKE) {\n for (let i = 2; i <= maxAngler; i++) {\n list.push(i);\n }\n } else {\n for (let i = 1; i <= maxAngler; i++) {\n list.push(i);\n }\n }\n\n return list;\n };\n\n const generateAnglerList = useCallback(\n (anglerInfo = undefined) => {\n let list = [];\n\n list.push({\n first_name: anglerInfo?.first_name,\n last_name: anglerInfo?.last_name,\n email: anglerInfo?.email,\n phone_number: anglerInfo?.contact,\n ...(lakeExclusive || fishery_id === exotic_fishery || accommodation\n ? {}\n : { num_rod: '' }),\n concession: false,\n });\n\n for (let i = 1; i <= userSelectedAnglers - 1; i++) {\n list.push({\n first_name: '',\n last_name: '',\n email: '',\n phone_number: '',\n num_rod: '',\n ...(fishery_id === exotic_fishery || accommodation\n ? {}\n : { num_rod: '' }),\n concession: false,\n });\n }\n form.setFieldsValue({\n angler_details: list,\n });\n return list;\n },\n [form, fishery_id, lakeExclusive, userSelectedAnglers]\n );\n\n const getAnglerDetails = useCallback(() => {\n const axios_config = {\n headers: {\n Accept: 'application/json',\n 'Content-Type': 'application/json',\n },\n withCredentials: true,\n };\n\n let data = [];\n axios\n .get('user', axios_config)\n .then((res) => {\n if (res.status === 200) {\n data = res.data.result;\n setUserInfo(data);\n setLoading(false);\n generateAnglerList(data);\n }\n })\n .catch(handleGetAnglerDetailsError);\n }, [generateAnglerList, handleGetAnglerDetailsError, setUserInfo]);\n\n const onFinish = (formData) => {\n console.log(formData);\n const validAnglerDetails = isNotDuplicated(formData?.angler_details);\n\n if (memberSetting?.enforce_unique_angler && !validAnglerDetails) {\n notification.error({\n message: There was an issue!
,\n style: { border: '1px #D34545 solid' },\n placement: window?.innerWidth <= 500 ? 'bottom' : 'topRight',\n className: 'gRegular br10',\n description:\n 'This venue requires you to enter unique details for each angler in your booking. Please edit your details to proceed.',\n });\n return;\n }\n\n if (isSeasonTicketHolder && !validAnglerDetails) {\n notification.error({\n message: There was an issue!
,\n style: { border: '1px #D34545 solid' },\n placement: window?.innerWidth <= 500 ? 'bottom' : 'topRight',\n className: 'gRegular br10',\n description:\n \"As a season ticket holder, you can't use your details for multiple anglers in your party. Please enter different details in order to proceed.\",\n });\n return;\n }\n\n if (!isFormValid) {\n notification.error({\n message: There was an issue!
,\n style: { border: '1px #D34545 solid' },\n placement: window?.innerWidth <= 500 ? 'bottom' : 'topRight',\n className: 'gRegular br10',\n description:\n 'Please fill all additional booking information in order to proceed to summary.',\n });\n return;\n }\n\n if (\n !memberSetting?.is_duplicate_permitted &&\n !validAnglerDetails &&\n lakeDetails?.access_type === 'Member only'\n ) {\n notification.error({\n message: There was an issue!
,\n style: { border: '1px #D34545 solid' },\n placement: window?.innerWidth <= 500 ? 'bottom' : 'topRight',\n className: 'gRegular br10',\n description:\n 'This member lake requires you to enter different details for every angler. Please ensure all anglers are registered members.',\n });\n return;\n }\n\n setUserBookingData({\n ...formData,\n vehicle_registration_number: registerationNumber,\n proceedSummary: true,\n });\n };\n\n const onchangeFname = () => {};\n\n useEffect(() => {\n if (!userBookingData?.angler_details) {\n window.scrollTo(0, 0);\n // New booking: Initialise angler list with current user's details\n generateAnglerList();\n getAnglerDetails();\n } else {\n // Editing previously entered booking information\n let userAnglerDetails = userBookingData.angler_details;\n\n if (userAnglerDetails.length !== userSelectedAnglers) {\n // Ensure number of anglers matches userSelectedAnglers\n userAnglerDetails = userAnglerDetails.slice(0, userSelectedAnglers);\n for (let i = userAnglerDetails.length; i < userSelectedAnglers; i++) {\n userAnglerDetails.push({\n first_name: '',\n last_name: '',\n email: '',\n phone_number: '',\n ...(fishery_id === exotic_fishery || accommodation\n ? {}\n : { num_rod: '' }),\n concession: false,\n });\n }\n }\n setRegistrationNumber(userBookingData?.vehicle_registration_number);\n form.setFieldsValue({\n angler_details: userAnglerDetails,\n notes: userBookingData?.notes,\n vehicle_registration_number:\n userBookingData?.vehicle_registration_number,\n });\n }\n }, [\n form,\n fishery_id,\n generateAnglerList,\n getAnglerDetails,\n userBookingData,\n userSelectedAnglers,\n ]);\n\n const updatePricing = useCallback(() => {\n setUserBookingData(form.getFieldsValue(true));\n }, [form]);\n\n const isFormValid = customPropertyDetails.every(\n (item) => item.field_value && item.field_value.trim() !== ''\n );\n const updateButtonDisable = () => {\n const termsAndConditionsAgreed = Boolean(\n (accommodation || form?.getFieldValue('agreement')) &&\n form?.getFieldValue('agreement2')\n );\n const priceLoaded = Boolean(estimatedPricing?.amount !== 0);\n setDisableNext(!termsAndConditionsAgreed || !priceLoaded);\n };\n\n const termsText = (\n \n By completing this booking, you agree that all anglers have read and agree\n to comply with the fishery rules and agree with the{' '}\n
\n \n \n \n {(fields) => (\n <>\n {fields.map((field, index) => (\n \n \n \n
\n\n onchangeFname(e)}\n rules={[\n { required: true, message: 'Missing first name' },\n ]}\n >\n \n \n \n \n updatePricing()}\n >\n {generateList(maxRod).map((id) => {\n return (\n \n {id}\n \n );\n })}\n \n \n {!lakeDetails?.is_same_price && (\n \n \n
\n );\n })}\n \n )}\n {!accommodation && (\n \n Almost there! Please enter the booking details!\n
\n\n\n {!isSeasonTicketHolder &&\n !memberSetting?.enforce_unique_angler && (\n <>\n \n Same details for all:\n \n copyForAll(index)}\n style={{ border: 'none' }}\n >\n Apply\n \n \n )}\n
\n ) : (\n \n {!isSeasonTicketHolder &&\n !memberSetting?.enforce_unique_angler && (\n <>\n \n Same details as above:\n \n copyAsAbove(index)}\n style={{ border: 'none' }}\n >\n Apply\n \n \n )}\n
\n )\n ) : (\n ''\n )}\n \n Note**: Concession tickets will be checked upon arrival.\n Please check fishery rules if you are unsure if you qualify\n for concession.\n
\n )}\n \n {cartItems?.length > 0 &&\n \n
\n\n {customPropertyDetails?.map((item, i) => {\n return (\n \n \n {item?.field_name}:\n
\n \n
\n \n {item?.field_type === 'Dropdown' ||\n item?.field_name === 'Country' ? (\n {\n const updatedDetails = [...customPropertyDetails];\n updatedDetails[i] = {\n ...updatedDetails[i],\n field_value: v,\n };\n setCustomPropertyDetails(updatedDetails);\n }}\n className=' gMedium fs-16 w-full'\n popupClassName={\n 'admin-manage-booking-steps-select-list'\n }\n >\n {item?.field_name === 'Country'\n ? countryOptions?.map((item) => {\n return (\n \n {item?.label}\n \n );\n })\n : item?.field_options?.map((id) => {\n return (\n \n {id}\n \n );\n })}\n \n ) : item?.field_type === 'text' ||\n item?.field_type === 'number' ? (\n {\n const updatedDetails = [...customPropertyDetails];\n updatedDetails[i] = {\n ...updatedDetails[i],\n field_value: e.target.value,\n };\n\n setCustomPropertyDetails(updatedDetails);\n }}\n />\n ) : item?.field_type === 'note' ? (\n {\n const updatedDetails = [...customPropertyDetails];\n updatedDetails[i] = {\n ...updatedDetails[i],\n field_value: e.target.value,\n };\n setCustomPropertyDetails(updatedDetails);\n }}\n className='fs-16'\n />\n ) : item?.field_type === 'date' ? (\n \n {\n const updatedDetails = [\n ...customPropertyDetails,\n ];\n updatedDetails[i] = {\n ...updatedDetails[i],\n field_value:\n dayjs(value).format('YYYY-MM-DD'),\n };\n setCustomPropertyDetails(updatedDetails);\n }}\n slotProps={{\n textField: {\n size: 'small',\n InputLabelProps: { shrink: false }, // Prevent the label from taking up space\n sx: {\n '.MuiInputLabel-root': {\n display: 'none', // Hide label\n },\n\n float: 'right',\n height: '32px', // Set desired height\n '.MuiInputBase-root': {\n fontFamily: 'gMedium',\n marginTop: 0, // Remove top margin\n height: '32px', // Adjust height of the input\n },\n },\n },\n }}\n className='br5 fs-16 bg-white gRegular w-full '\n id='gRegular'\n format='DD/MM/YYYY'\n >\n \n ) : (\n ''\n )}\n
\n \n {userSelectedLakeId === alderLakeId\n ? \"Enter the FULL NAMES of all anglers in the party + Lead Angler's Full Address [REQUIRED]\"\n : +fishery_id === 12060\n ? 'Non Angling Guests Details'\n : +fishery_id === comptonsLake\n ? 'Please add Lead Angler’s Address + total number and full names of people in your party'\n : lakeExclusive || fishery_id == lane_fishery_id\n ? \"Enter Estimated Number of Anglers and Lead Angler's Full Address [Required]\"\n : 'Notes'}\n
\n \n\n Please enter your vehicle registration plate. *\n
\n \n\n
\n \n \n )}\n \n {lakeExclusive && (\n \n {\n if (e.target.value.length < 13) {\n setRegistrationNumber(e.target.value.toUpperCase());\n }\n }}\n type='text'\n style={{\n borderRadius: '0 5px 5px 0',\n border: 'none',\n padding: '0 16px',\n background: '#FBC239',\n width: '190px',\n fontSize: '20px',\n }}\n />\n
\n \n e.g XXXX-XXX{' '}\n
\n \n
\n )}\n \n \n {DynamicText?.is_active &&\n DynamicText?.properties?.booking_step_3?.lake_exclusive_header\n ? DynamicText?.properties?.booking_step_3\n ?.lake_exclusive_header\n : `${accommodation ? 'Booking ' : 'Lake Exclusive '}\n Information: (PLEASE READ)`}\n \n
\n\n \n \n
\n \n You will be sent a reminder email when the balance is due.{' '}\n \n \n )}\n \n \n {' '}\n {costString(estimatedTotal)}\n \n
\n {isEstimateDiscounted && (\n \n
\n )}\n {!accommodation && (\n \n
\n )}\n
\n \n \n
\n
\n {estimatedBalance > 0 && (\n \n {DynamicText?.is_active\n ? DynamicText?.properties?.booking_step_3\n ?.header_anglers_info\n : `(Lake Exclusive for up to ${\n lakeDetails?.lake_exclusive_anglers_allowed\n ? lakeDetails.lake_exclusive_anglers_allowed\n : 'X'\n } anglers)`}\n
\n )}\n {lakeDetails?.lake_exclusive_balance_due_reminder > 0 &&\n estimatedBalance > 0 && (\n \n Due{' '}\n \n {lakeDetails?.lake_exclusive_balance_due_reminder\n ? lakeDetails.lake_exclusive_balance_due_reminder\n : '28'}\n {' '}\n days before booking commencement date.{' '}\n \n )}\n \n {userSelectedPakage && (\n\n
\n \n Accept terms and proceed to checkout:\n
\n\n {userSelectedLakeName}\n
\n )}\n\n {fisheryInfo?.venue_name}\n
\n \n \n );\n}\n\nexport default SummaryFisheryMasthead;\n","import * as React from 'react';\n\nconst SvgSummary = (props) => (\n\n
\n );\n}\n\nexport default function UserBookingSideSummary({ fisheryId }) {\n const USER_BOOKING_STEP_ORDER = [\n 'lake',\n 'dates',\n 'swims',\n 'anglers',\n 'summary',\n 'payment',\n 'success',\n 'failure',\n ];\n const { data: DynamicText } = useGetDynamicBookingTextQuery(fisheryId);\n\n const HideFishery = process.env.REACT_APP_FISHERY_PRICE_HIDE;\n const [bookingDates] = useGlobalState('bookingDates');\n const [userSelectedLakeId] = useGlobalState('userSelectedLakeId');\n const [userSelectedAnglers] = useGlobalState('userSelectedAnglers');\n const [userSelectedRods] = useGlobalState('userSelectedRods');\n const [userSelectedSwims] = useGlobalState('userSelectedSwims');\n const [userSelectedDoubleSwim] = useGlobalState('userSelectedDoubleSwim');\n const [userBookingData, setUserBookingData] =\n useGlobalState('userBookingData');\n const [estimatedPricing, setEstimatedPricing] =\n useGlobalState('estimatedPricing');\n\n const [guestAllowed] = useGlobalState('guestAllowed');\n const [lakeExclusive] = useGlobalState('lakeExclusive');\n const [lakeDetails] = useGlobalState('lakeDetails');\n const [arrivalTime] = useGlobalState('arrivalTime');\n const [departureTime] = useGlobalState('departureTime');\n const [bookingType] = useGlobalState('bookingType');\n const [addedProductItems] = useGlobalState('addedProductItem');\n const [userSelectedPakage] = useGlobalState('userSelectedPakage');\n const [accommodation] = useGlobalState('accommodation');\n const [lakeType] = useGlobalState('lakeType');\n const [isArrivalFixed, setIsArrivalFixed] = useGlobalState('isArrivalFixed');\n const [isDepartureFixed, setIsDepartureFixed] =\n useGlobalState('isDepartureFixed');\n const is_exotic_fishery = fisheryId === exotic_fishery;\n const is_exotic_arapaima_lake =\n userSelectedLakeId === 'a4688274-3f67-40a5-be8d-a8dc51c053b3';\n const [current, setCurrent] = useGlobalState('current');\n\n const subTitleStyle = 'gSemiBold mg-bottom-2';\n const summaryTitleStyle = 'gSemiBold mg-bottom-2 fs-18';\n const itemStyle = 'sb-grey2 mg-bottom-10';\n const paddingClass = 'pd-15';\n\n const hideGuests =\n lakeExclusive || is_exotic_fishery || guestAllowed === 'no';\n const hidePrice = fisheryId === HideFishery;\n\n const anglersWord =\n is_exotic_fishery && !is_exotic_arapaima_lake ? 'Guest' : 'Angler';\n\n const {\n total: estimatedTotal,\n advance: estimatedDeposit,\n isDiscounted: isEstimateDiscounted,\n discountedTotal: estimatedDiscountedTotal,\n payable: estimatedPayable,\n } = getSummaryCosts(\n lakeExclusive,\n is_exotic_fishery && !is_exotic_arapaima_lake,\n estimatedPricing\n );\n const estimatedPayableTotal = isEstimateDiscounted\n ? estimatedDiscountedTotal\n : estimatedTotal;\n\n const anglersCost =\n estimatedPricing?.pricing_details?.pricing_breakdown?.anglers?.reduce(\n (acc, { price }) => acc + price,\n 0\n );\n const guestsCost = estimatedTotal - anglersCost;\n\n const updatePricing = useCallback(() => {\n const axios_config = {\n headers: {\n Accept: 'application/json',\n 'Content-Type': 'application/json',\n },\n withCredentials: true,\n };\n\n if (\n !userSelectedLakeId ||\n !arrivalTime ||\n !departureTime ||\n !userSelectedAnglers ||\n (!(\n lakeType.toLowerCase() === 'ticket' ||\n bookingType === 'ticket' ||\n lakeExclusive\n ) &&\n current !== USER_BOOKING_STEP_ORDER.indexOf('swims') &&\n userSelectedSwims.concat(userSelectedDoubleSwim).length == 0)\n ) {\n return;\n }\n\n const payload_data = {\n lake_id: userSelectedLakeId,\n arrival_timestamp: arrivalTime,\n departure_timestamp: departureTime,\n num_anglers: userSelectedAnglers,\n num_guest: userSelectedRods,\n swim_ids: userSelectedSwims.concat(userSelectedDoubleSwim),\n angler_details: userBookingData?.angler_details || [],\n booking_type: lakeExclusive ? 'lake_exclusive' : bookingType,\n apply_promotion: true,\n add_on_details: addedProductItems,\n ...(userSelectedPakage && {\n custom_slot_id:\n lakeDetails?.custom_slot_days[userSelectedPakage - 1]?.id,\n }),\n };\n\n axios\n .post('booking/lake/booking/cost', payload_data, axios_config)\n .then((res) => {\n if (res.status === 200) {\n setEstimatedPricing(res.data.result);\n if (userBookingData?.proceedSummary) {\n setCurrent(USER_BOOKING_STEP_ORDER.indexOf('summary'));\n setUserBookingData({\n ...userBookingData,\n\n proceedSummary: false,\n });\n }\n }\n })\n .catch((err) => {\n if (err.response) {\n if (\n err.response.status === 401 ||\n (err.response.status === 422 &&\n err.response.data.detail === 'Signature has expired')\n ) {\n notification.error({\n message: \n {parsedDate.isValid()\n ? parsedDate.format('MMMM Do YYYY')\n : 'Please select a date'}\n
\n {parsedTime.isValid() && (\n\n {isFixedTime ? isFixedTime : parsedTime.format('HH:mm a')}\n
\n )}\nThere was an issue!
,\n style: { border: '1px #D34545 solid' },\n placement: window?.innerWidth <= 500 ? 'bottom' : 'topRight',\n className: 'gRegular br10',\n description: 'Please login to continue',\n });\n } else if (err.response.status === 400) {\n if (err.response.data.detail) {\n notification.error({\n description: err.response.data.detail,\n });\n }\n }\n }\n })\n .finally(() => {});\n }, [\n addedProductItems,\n arrivalTime,\n bookingType,\n departureTime,\n lakeDetails?.custom_slot_days,\n lakeExclusive,\n setEstimatedPricing,\n userBookingData?.angler_details,\n userSelectedAnglers,\n userSelectedDoubleSwim,\n userSelectedLakeId,\n userSelectedPakage,\n userSelectedRods,\n userSelectedSwims,\n ]);\n\n useEffect(() => {\n updatePricing();\n }, [updatePricing]);\n\n let totalHelpText;\n if (accommodation) {\n totalHelpText = '';\n } else if (DynamicText?.is_active) {\n totalHelpText =\n DynamicText?.properties?.booking_step_1?.lake_exclusive_label;\n } else if (lakeExclusive) {\n totalHelpText = `For Up To ${\n lakeDetails?.lake_exclusive_anglers_allowed ?? '10'\n } Anglers`;\n } else {\n totalHelpText = `For ${userSelectedAnglers} ${anglersWord}${\n userSelectedAnglers !== 1 ? 's' : ''\n }`;\n if (!hideGuests) {\n totalHelpText += ` & ${userSelectedRods} Guest${\n userSelectedRods !== 1 ? 's' : ''\n }`;\n }\n }\n\n return (\n \n \n \n
\n )}\n \n );\n}\n","import React, { useCallback, useEffect, useState } from 'react';\nimport { Button, Divider, message, Spin } from 'antd';\nimport { useGlobalState } from '../GlobalState';\nimport { formatDate, formatDateWithTime } from '../../../../utils/date';\nimport axios from 'axios';\nimport { USER_BOOKING_STEP_ORDER } from '../../index';\nimport moment from 'moment';\nimport Moment from 'moment';\nimport InfoIcon from '../../../../assets/images/Icons/SVG/InfoIcon';\nimport CalendarIcon from '../../../../assets/images/Icons/SVG/CalendarIcon';\nimport SummaryFisheryMasthead from './SummaryFisheryMasthead';\nimport { exotic_fishery } from '../../../common/Utils';\nimport { LoadingOutlined } from '@ant-design/icons';\nimport { notification } from '../../../../utils/messaging';\nimport {\n useGetDynamicBookingTextQuery,\n useGetUserHasSubscriptionQuery,\n useGetUserWalletQuery,\n useReevaluateEngagementMutation,\n} from '../../../user_profile/userProfileSlice';\nimport UserBookingPaymentTotal from './UserBookingPaymentTotal';\nimport { apiSlice } from '../../../../store/apiSlice';\nimport { useDispatch } from 'react-redux';\nimport { getSummaryCosts } from '../../../../utils/cost';\nimport BoxIcon from '../../../../assets/images/Icons/SVG/BoxIcon';\nimport SummaryDivider from './SummaryDivider';\n\nconst handleNewBookingError = (err) => {\n if (err.response) {\n if (err.response.status === 401 || err.response.status === 422) {\n if (err.response.data.detail[0].msg && err.response.status === 422) {\n notification.error({\n description: err.response.data.detail[0].msg,\n });\n }\n } else if (err.response.status === 400 || err.response.status === 423) {\n notification.error({\n description: err.response.data.detail,\n });\n } else {\n }\n } else {\n notification.error({\n description: 'Error processing booking result',\n });\n }\n};\n\nconst spinIcon = (\n \n
\n {!hidePrice && (\n Arrival:
\nDeparture:
\nDetails:
\n {lakeExclusive && (\n\n
\n )}\n {!lakeExclusive && (\n \n {DynamicText?.is_active &&\n DynamicText?.properties?.booking_step_1\n ?.booking_summary_booking_type\n ? DynamicText?.properties?.booking_step_1\n ?.booking_summary_booking_type\n : 'Lake Exclusive'}\n
\n{costString(estimatedTotal)}
\n\n
\n )}\n {!hideGuests && (\n \n {userSelectedAnglers} x {anglersWord}\n {userSelectedAnglers !== 1 ? 's' : ''}\n
\n{costString(anglersCost)}
\n\n
\n )}\n \n )}\n \n {userSelectedRods} x Guest{userSelectedRods !== 1 ? 's' : ''}\n
\n{costString(guestsCost)}
\n\n \n {costString(estimatedTotal)}\n \n
\n {isEstimateDiscounted && (\n Total:
\n\n
\n )}\n {Boolean(estimatedDeposit) &&\n estimatedDeposit < estimatedPayableTotal && (\n \n Promotion Applied:\n
\n\n {costString(estimatedDiscountedTotal)}\n
\n\n
\n )}\n Deposit:
\n\n {costString(estimatedDeposit)}\n
\n{totalHelpText}
\n\n {DynamicText?.is_active &&\n DynamicText?.properties?.booking_step_2?.booking_type ? (\n ''\n ) : (\n \n {accommodation ? 'Booked' : 'Lake'}:\n \n )}\n {userSelectedLakeName}\n
\n )}\n {!accommodation && (\n\n \n {DynamicText?.is_active &&\n DynamicText?.properties?.booking_summary?.lake_text\n ? DynamicText?.properties?.booking_summary?.lake_text\n : 'Selected'}\n :\n {' '}\n {DynamicText?.is_active &&\n DynamicText?.properties?.booking_summary?.lake_text\n ? lakeDetails?.custom_slot_days[userSelectedPakage - 1]?.name\n : lakeExclusive\n ? 'Lake Exclusive'\n : numSwims\n ? nameListToString(selectedSwimNames)\n : `${numTickets} Ticket${numTickets > 1 ? 's' : ''}`}\n
\n )}\n {(!lakeExclusive || lakeDetails?.lake_exclusive_anglers_allowed) &&\n !accommodation && (\n\n {DynamicText?.is_active ? (\n DynamicText?.properties?.booking_step_1?.lake_exclusive_label\n ) : (\n <>\n \n {lakeExclusive ? 'Max ' : ''}\n {is_exotic_fishery && !is_exotic_arapaima_lake\n ? 'No. of Guests:'\n : 'No. of Anglers:'}\n \n {lakeExclusive\n ? lakeDetails.lake_exclusive_anglers_allowed\n : userSelectedAnglers}\n \n )}\n
\n )}\n {!lakeExclusive && !accommodation && !is_exotic_arapaima_lake && (\n\n \n {fisheryPublicId !== exotic_fishery\n ? 'No. of Guests:'\n : 'No. of Anglers:'}\n {' '}\n {userSelectedRods}\n
\n )}\n\n Arrival Details:{' '}\n {isArrivalFixed\n ? `${formatDate(arrivalTime)} ${isArrivalFixed}`\n : formatDateWithTime(arrivalTime)}\n
\n\n Departure Details:{' '}\n {isDepartureFixed\n ? `${formatDate(departureTime)} ${isDepartureFixed}`\n : formatDateWithTime(departureTime)}\n
\n {hasAddOns && (\n <>\n\n {quantity}x {name}\n
\n ))}\n \n )}\n\n
\n ) : (\n \n \n
\n \n \n );\n}\n\nexport default UserBookingSummary;\n","import React from 'react';\nimport { useGlobalState } from '../GlobalState';\nimport { USER_BOOKING_STEP_ORDER } from '../../index';\n\nimport PaymentPage from './PaymentPage';\n\nfunction UserBookingPaymentPage() {\n const [bookingId] = useGlobalState('bookingId');\n const [fisheryInfo] = useGlobalState('fisheryInfo');\n const [, setCurrent] = useGlobalState('current');\n const [finalPricing] = useGlobalState('finalPricing');\n const [isInsideWidget] = useGlobalState('isInsideWidget');\n const [reservationExpiryTime, setReservationExpiryTime] = useGlobalState(\n 'reservationExpiryTime'\n );\n\n const onPaymentSuccess = () =>\n setCurrent(USER_BOOKING_STEP_ORDER.indexOf('success'));\n\n const onPaymentFailure = () =>\n setCurrent(USER_BOOKING_STEP_ORDER.indexOf('failure'));\n\n return (\n \n You could have earned cashback on that booking!\n
\n\n Wait! Have you heard about\n swimbooker+?\n
\n\n (\n \n
\n \n );\n\n if (paymentSuccessRedirect) {\n return (\n and far more...
\n\n
\n );\n }\n\n return (\n \n \n {\n if (isInsideWidget) {\n sendWidgetMessage({ type: 'widgetCollapse' });\n }\n }}\n >\n {isInsideWidget ? 'Close Booking Widget' : 'Return to Profile'}\n \n {!isInsideWidget && !userHasSubscription && swimbookerPlusBanner}\n \n
\n );\n}\n\nexport default UserBookingSuccessPage;\n","import { Button } from 'antd';\nimport React from 'react';\nimport { useGlobalState } from './GlobalState';\nimport { USER_BOOKING_STEP_ORDER } from '../index';\nimport { sendWidgetMessage } from '../../../utils/widgetUtils';\nimport PaymentFailure from './payment_page/PaymentFailure';\n\nfunction UserBookingFailurePage({ fisheryPublicId }) {\n const [bookingId] = useGlobalState('bookingId');\n const [isInsideWidget] = useGlobalState('isInsideWidget');\n const [, setCurrent] = useGlobalState('current');\n\n const [finalPricing] = useGlobalState('finalPricing');\n const isFreeBooking = parseFloat(finalPricing) === 0;\n\n return (\n \n
\n );\n}\n\nexport default function CalendarColoursModal({ visible, onClose }) {\n return (\n \n
\n {name}
\n{description}
\n Booking Help
\n\n \n If a date is a showing as red, it indicates that there are no\n available arrival or departure times for the number of tickets\n selected.\n \n }\n />\n \n If a date is showing as orange, it indicates that all day sessions\n are fully booked for the number of tickets selected. However, you\n can still select it as the previous or following night session\n might still be available.\n \n }\n />\n \n If a date is showing as green, it indicates that all time slots\n for that date are available to be booked.\n \n }\n />\n \n If a green date is showing with a small red marker, it indicates\n that the night session of that date is fully booked for the number\n of tickets selected. You can still select this date for a day\n session.\n \n }\n />\n \n Close\n \n
\n \n );\n}\n","import React, { useCallback, useMemo, useState } from 'react';\nimport { useGlobalState } from '../GlobalState';\nimport { Button, notification } from 'antd';\nimport axios from 'axios';\nimport { getFullDate, toUTCDate } from '../../../../utils/date';\nimport { exotic_fishery } from '../../../common/Utils';\nimport SvgCalendar from '../../../../assets/images/Icons/SVG/Calendar';\nimport CalendarColoursModal from './CalendarColoursModal';\nimport LakeBookingInformationModal from './LakeBookingInformationModal';\nimport SvgUserBox from '../../assets/images/UserBox';\nimport AvailabilityCalendar, {\n emptyDatesObject,\n} from '../../../availability_calendar/AvailabilityCalendar';\nimport moment from 'moment';\nimport { useLocalStorage } from '../../../../utils/hooks';\nimport { useGetDynamicBookingTextQuery } from '../../../user_profile/userProfileSlice';\n\nconst errorNotification = ({\n message = 'There was an issue!',\n description = undefined,\n}) =>\n notification.error({\n message: {message}
,\n style: { border: '1px #D34545 solid' },\n placement: window?.innerWidth <= 500 ? 'bottom' : 'topRight',\n className: 'gRegular br10',\n description: description,\n });\n\nconst warningNotification = ({\n message = 'Please be aware!',\n description = undefined,\n}) =>\n notification.warning({\n message: {message}
,\n style: { border: '1px #F7C046 solid' },\n placement: window?.innerWidth <= 500 ? 'bottom' : 'topRight',\n className: 'gRegular br10',\n description: description,\n });\n\nexport default function SelectDate({\n maxVisibleDate,\n maxBookableDate,\n maxBookableErrorMessage,\n fishery_id,\n customSlotId,\n registerTimeRequest,\n unregisterTimeRequest,\n}) {\n const [bookingDates, setBookingDates] = useGlobalState('bookingDates');\n const [userSelectedPakage] = useGlobalState('userSelectedPakage');\n const [disabledDates, setDisabledDates] = useGlobalState('disabledDates');\n const [limitedDates, setLimitedDates] = useGlobalState('limitedDates');\n const [accommodation] = useGlobalState('accommodation');\n const [, setAvailableTime] = useGlobalState('availableTime');\n const [, setArrivalTime] = useGlobalState('arrivalTime');\n const [, setDepartureTime] = useGlobalState('departureTime');\n const [, setEstimatedPricing] = useGlobalState('estimatedPricing');\n const [, setUserBookingData] = useGlobalState('userBookingData');\n const [, setUserSelectedSwims] = useGlobalState('userSelectedSwims');\n const [, setUserSelectedDoubleSwim] = useGlobalState(\n 'userSelectedDoubleSwim'\n );\n const [userSelectedRods] = useGlobalState('userSelectedRods');\n const [loading, setBookingsLoading] = useGlobalState('bookingsLoading');\n const [, setTicketAvailable] = useGlobalState('ticketsAvailable');\n const [dateText] = useGlobalState('dateText');\n\n const [howToBook] = useGlobalState('howToBook');\n const [userSelectedLakeId] = useGlobalState('userSelectedLakeId');\n const [userSelectedAnglers] = useGlobalState('userSelectedAnglers');\n const [current, setCurrent] = useGlobalState('current');\n const [lakeExclusive] = useGlobalState('lakeExclusive');\n const [lakeDetails, setLakeDetails] = useGlobalState('lakeDetails');\n const [bookingType] = useGlobalState('bookingType');\n const is_exotic_arapaima_lake =\n userSelectedLakeId === 'a4688274-3f67-40a5-be8d-a8dc51c053b3';\n const { data: DynamicText } = useGetDynamicBookingTextQuery(fishery_id);\n const axios_config = {\n headers: {\n Accept: 'application/json',\n 'Content-Type': 'application/json',\n },\n withCredentials: true,\n };\n\n const getTimeAvailability = (data) => {\n registerTimeRequest();\n axios\n .post(\n 'booking/lake/availability',\n {\n ...data,\n ...(userSelectedPakage && {\n custom_slot_id:\n lakeDetails?.custom_slot_days[userSelectedPakage - 1]?.id,\n }),\n },\n axios_config\n )\n .then((res) => {\n if (res.status === 200) {\n let res_data = res.data.result;\n\n if (res_data.is_available) {\n setAvailableTime(res_data);\n } else {\n warningNotification({\n description: res_data.message,\n });\n }\n }\n })\n .catch((err) => {\n if (err.response) {\n if (err.response.status === 500) {\n errorNotification({\n description: 'Server Response failed. Please try again later',\n });\n } else if (err.response.status === 401) {\n warningNotification({\n description:\n 'Your action will not be saved. Please Login and try again!',\n });\n } else if (err.response.status === 400) {\n warningNotification({\n description: err.response.data['detail'],\n });\n } else if (err.response.status === 422) {\n if (err.response.data['detail'] === 'Signature has expired') {\n errorNotification({\n description:\n 'Login session has been expired. Please Login to continue!',\n });\n } else {\n errorNotification({\n description:\n \"OOPS! Server didn't like the request. If this persists please contact support team\",\n });\n }\n } else if (err.response.status === 423) {\n errorNotification({\n description:\n 'Sorry ! this booking slot has been booked by another user, Try different booking!',\n });\n }\n } else {\n errorNotification({\n message: 'Error processing result',\n });\n }\n })\n .finally(() => {\n unregisterTimeRequest();\n });\n };\n\n const handleDateChange = (selectedRange) => {\n // Reset timing\n setAvailableTime(null);\n setArrivalTime(null);\n setDepartureTime(null);\n setEstimatedPricing(null);\n\n const startDate = getFullDate(selectedRange.startDate);\n\n const endDate = getFullDate(selectedRange.endDate);\n\n if (moment(selectedRange.startDate).isSame(selectedRange.endDate, 'day')) {\n const noNightDate = limitedDates\n .filter((ld) => ld.type === 'no-night')\n .find((ld) =>\n moment(ld.date).isSame(toUTCDate(selectedRange.startDate), 'day')\n );\n if (noNightDate) {\n warningNotification({\n description:\n 'The next night session is fully booked. You can still select this date for a day session.',\n });\n }\n }\n\n let payload_data = {\n anglers: userSelectedAnglers,\n guest: userSelectedRods,\n start_date: startDate,\n end_date: endDate,\n lake_id: userSelectedLakeId,\n book_lake_exclusive: lakeExclusive,\n booking_type: bookingType,\n };\n // Keeps array reference invariant to prevent calendar month reset\n bookingDates[0] = selectedRange;\n setBookingDates(bookingDates);\n getTimeAvailability(payload_data);\n setUserBookingData({});\n setUserSelectedSwims([]);\n setUserSelectedDoubleSwim([]);\n };\n\n const getBlockedBookingDates = (date) => {\n let _date = moment(date).format('YYYY-MM-DD');\n // return;\n setBookingsLoading(true);\n const axios_config = {\n headers: {\n Accept: 'application/json',\n 'Content-Type': 'application/json',\n },\n withCredentials: true,\n };\n\n let payload_data = {\n anglers: userSelectedAnglers,\n guest: userSelectedRods,\n lake_id: userSelectedLakeId,\n date: _date,\n book_lake_exclusive: lakeExclusive,\n custom_slot_id: customSlotId,\n booking_type: bookingType,\n };\n\n axios\n .post('booking/lake/details', payload_data, axios_config)\n .then((res) => {\n if (res.status === 200) {\n const _result = res.data.result;\n setDisabledDates([\n ...disabledDates,\n ..._result.fully_booked_dates.map(toUTCDate).filter(\n /* Don't add dates which have already been stored */\n (d) =>\n !disabledDates.some(\n (prevDate) => prevDate.toISOString() === d.toISOString()\n )\n ),\n ]);\n setLimitedDates([\n ...limitedDates,\n ...(\n _result?.limited_availability_dates?.map((ld) => ({\n ...ld,\n date: toUTCDate(ld.date),\n })) || []\n ).filter(\n /* Don't add dates which have already been stored */\n (ld) =>\n !limitedDates.some(\n (prevLDate) =>\n prevLDate.date.toISOString() === ld.date.toISOString()\n )\n ),\n ]);\n setLakeDetails(_result);\n setTicketAvailable(_result.swims_tickets_available);\n } else {\n errorNotification({\n description: 'Error processing result',\n });\n }\n })\n .catch((err) => {\n console.error(err);\n if (err.response) {\n if (err.response.status === 401 || err.response.status === 422) {\n errorNotification({\n description: 'Please login to continue',\n });\n }\n } else {\n errorNotification({\n description: 'Error processing result',\n });\n }\n })\n .finally(() => setBookingsLoading(false));\n };\n\n const clearSelectedDates = () => {\n if (!bookingDates?.[0]?.startDate) {\n return;\n }\n // Keeps the object reference invariant to prevent calendar re-render (weird bug with DateRangePicker)\n bookingDates[0] = { ...emptyDatesObject };\n setBookingDates(bookingDates);\n setEstimatedPricing(null);\n setAvailableTime(null);\n setArrivalTime(null);\n setDepartureTime(null);\n };\n\n const wordAndCount = (word, count) =>\n `${count} ${word}${count === 1 ? '' : 's'}`;\n\n const anglerCountNotice = (\n \n
\n );\n\n const explanationLinkStyle = 'txt-underline blue-2 gSemiBold fs-15 cp';\n\n const [showColoursExplanationModal, setShowColoursExplanationModal] =\n useState(false);\n const coloursExplanation = (\n <>\n \n
\n \n \n
\n \n {anglerCountNotice}\n {!accommodation && coloursExplanation}\n {bookingInformationExplanation}\n
\n \n {hasSelectedDates ? (\n
\n \n );\n}\n","import React, { useEffect, useMemo, useState } from 'react';\nimport { Col, Row } from 'antd';\nimport { useGlobalState } from '../GlobalState';\nimport SelectDate from './SelectDate';\nimport SelectTime from './SelectTime';\nimport moment from 'moment/moment';\n\nexport default function SelectDatesAndTimes({ fishery_id }) {\n const [userSelectedLakeId] = useGlobalState('userSelectedLakeId');\n const [fisheryInfo] = useGlobalState('fisheryInfo');\n const [lakeDetails] = useGlobalState('lakeDetails');\n const [userSelectedPakage] = useGlobalState('userSelectedPakage');\n const [lakeExclusive] = useGlobalState('lakeExclusive');\n const [lakeInfo] = useGlobalState('lakeInfo');\n\n const [inFlightTimeRequests, setInFlightTimeRequests] = useState(0);\n const registerTimeRequest = () => setInFlightTimeRequests((prev) => prev + 1);\n const unregisterTimeRequest = () =>\n setInFlightTimeRequests((prev) => Math.max(prev - 1, 0));\n\n useEffect(() => {\n window.scrollTo(0, 0);\n }, []);\n const is_exotic_arapaima_lake =\n userSelectedLakeId === 'a4688274-3f67-40a5-be8d-a8dc51c053b3';\n const [maxBookableDate, maxBookableMessage] = useMemo(() => {\n let messageReason = '';\n let max_date = new Date();\n if (fisheryInfo?.booking_days_is_active && lakeExclusive) {\n lakeInfo.forEach((lake) => {\n if (lake.id === userSelectedLakeId) {\n max_date.setDate(\n max_date.getDate() + lake.lake_exclusive_booking_days\n );\n }\n });\n } else if (\n fisheryInfo?.booking_days_is_active &&\n fisheryInfo?.booking_days > 0\n ) {\n max_date.setDate(max_date.getDate() + fisheryInfo.booking_days);\n messageReason = `${fisheryInfo.booking_days} days in advance`;\n } else if (\n fisheryInfo?.booking_date_is_active &&\n fisheryInfo?.booking_date\n ) {\n max_date = new Date(fisheryInfo.booking_date);\n } else if (fishery_id === '10201' || fishery_id === '10832') {\n const currentYear = new Date().getFullYear();\n // Dec. 31st next year\n max_date = new Date(currentYear + 1, 11, 31);\n } else {\n // 1 year from now\n max_date.setFullYear(max_date.getFullYear() + 1);\n }\n if (!messageReason) {\n messageReason = `up to ${moment(max_date).format('Do MMMM YYYY')}`;\n }\n const message = `At ${fisheryInfo.venue_name}, you can only book ${messageReason}. Please select different dates.`;\n return [max_date, message];\n }, [fisheryInfo, fishery_id, lakeExclusive, lakeInfo, userSelectedLakeId]);\n\n const maxAvailabilityDate = useMemo(() => {\n let max_date = new Date();\n if (\n fisheryInfo?.availability_days_is_active &&\n fisheryInfo?.availability_days > 0\n ) {\n max_date.setDate(max_date.getDate() + fisheryInfo?.availability_days);\n } else if (\n fisheryInfo?.availability_date_is_active &&\n fisheryInfo?.availability_date\n ) {\n max_date = new Date(fisheryInfo?.availability_date);\n } else {\n max_date.setFullYear(max_date.getFullYear() + 1);\n }\n return max_date;\n }, [fisheryInfo]);\n\n return (\n \n Available Times Will Load After Selecting Dates\n
\n )}\n \n \n
\n );\n}\n","import React from 'react';\nimport { TERMS_AND_CONDITIONS_URL } from '../../../../AppConstants';\n\nfunction LicenceInfo({ fisheryId }) {\n const comptonsLake = 11833;\n\n return (\n \n Almost there! Time to select your{' '}\n {is_exotic_arapaima_lake ? 'date!' : 'dates and times.'}\n
\n\n
\n );\n}\n\nexport default LicenceInfo;\n","var _g;\nvar _excluded = [\"title\", \"titleId\"];\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\nimport * as React from \"react\";\nfunction SvgAlarm(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, _excluded);\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 66,\n height: 69,\n viewBox: \"0 0 66 69\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _g || (_g = /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group\"\n }, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group_2\"\n }, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group_3\"\n }, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group_4\"\n }, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group_5\"\n }, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group_6\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n id: \"Vector\",\n d: \"M59.04 44.8V53.76C59.04 62.02 47.28 68.88 33 68.88C18.58 68.88 6.95999 62.16 6.95999 53.76V44.8H59.04Z\",\n fill: \"#3D3D3D\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Vector_2\",\n d: \"M33 59.92C47.3815 59.92 59.04 53.1505 59.04 44.8C59.04 36.4495 47.3815 29.68 33 29.68C18.6185 29.68 6.95999 36.4495 6.95999 44.8C6.95999 53.1505 18.6185 59.92 33 59.92Z\",\n fill: \"#686868\"\n }))))), /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group_7\"\n }, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group_8\"\n }, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group_9\"\n }, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group_10\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n id: \"Vector_3\",\n d: \"M55.54 40.6V43.82C55.54 50.96 45.46 56.84 33 56.84C20.54 56.84 10.32 50.96 10.32 43.82V40.6H55.54Z\",\n fill: \"#929393\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Vector_4\",\n d: \"M33 53.62C45.4485 53.62 55.54 47.7907 55.54 40.6C55.54 33.4093 45.4485 27.58 33 27.58C20.5515 27.58 10.46 33.4093 10.46 40.6C10.46 47.7907 20.5515 53.62 33 53.62Z\",\n fill: \"#BFBFBF\"\n }))))), /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group_11\"\n }, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group_12\"\n }, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group_13\"\n }, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group_14\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n id: \"Vector_5\",\n d: \"M53.3 39.34C53.3 45.92 44.2 51.24 33 51.24C21.8 51.24 12.7 45.92 12.7 39.48C12.7 38.5 12.98 37.52 13.4 36.54L17.6 13.44H48.4L52.74 36.54C53.16 37.38 53.3 38.36 53.3 39.34Z\",\n fill: \"#E22020\"\n }), /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group_15\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n id: \"Vector_6\",\n d: \"M48.4 13.44C48.4 18.2 41.12 21.98 33 21.98C24.88 21.98 17.6 18.06 17.6 13.44C17.6 8.82 24.88 4.9 33 4.9C41.12 4.9 48.4 8.68 48.4 13.44Z\",\n fill: \"#FF413C\"\n }))))))), /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group_16\"\n }, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group_17\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n id: \"Vector_7\",\n d: \"M64.64 29.82C65.62 30.38 65.62 31.22 64.64 31.78C63.66 32.34 62.26 32.34 61.28 31.78L53.3 27.16C52.32 26.6 52.32 25.76 53.3 25.2C54.28 24.64 55.68 24.64 56.66 25.2L64.64 29.82Z\",\n fill: \"#FF413C\"\n })), /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group_18\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n id: \"Vector_8\",\n d: \"M12.7 5.04C13.68 5.6 13.68 6.44 12.7 7C11.72 7.56 10.32 7.56 9.34 7L1.36 2.38C0.38 1.82 0.38 0.98 1.36 0.42C2.34 -0.14 3.74 -0.14 4.72 0.42L12.7 5.04Z\",\n fill: \"#FF413C\"\n }))), /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group_19\"\n }, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group_20\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n id: \"Vector_9\",\n d: \"M1.36 29.82C0.38 30.38 0.38 31.22 1.36 31.78C2.34 32.34 3.74 32.34 4.72 31.78L12.7 27.16C13.68 26.6 13.68 25.76 12.7 25.2C11.72 24.64 10.32 24.64 9.34 25.2L1.36 29.82Z\",\n fill: \"#FF413C\"\n })), /*#__PURE__*/React.createElement(\"g\", {\n id: \"Group_21\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n id: \"Vector_10\",\n d: \"M53.3 5.04C52.32 5.6 52.32 6.44 53.3 7C54.28 7.56 55.68 7.56 56.66 7L64.64 2.38C65.62 1.82 65.62 0.98 64.64 0.42C63.66 -0.14 62.26 -0.14 61.28 0.42L53.3 5.04Z\",\n fill: \"#FF413C\"\n }))))));\n}\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgAlarm);\nexport default __webpack_public_path__ + \"static/media/alarm.1eed4f46d53e6579ce1ff6ffbf6463ef.svg\";\nexport { ForwardRef as ReactComponent };","import { usePreventScroll } from '../../../utils/hooks';\nimport { Button, Modal } from 'antd';\nimport { useGlobalState } from './GlobalState';\nimport React, { useRef } from 'react';\nimport alarm from '../assets/images/alarm.svg';\nimport loadingAnimation from '../assets/animations/loading-spinner.json';\nimport Lottie from 'lottie-react';\nimport { sendWidgetMessage } from '../../../utils/widgetUtils';\n\nfunction QueueModal({ open = false, fisheryPublicId }) {\n usePreventScroll('BookingQueue', open);\n const spinnerRef = useRef(null);\n const [fisheryInfo] = useGlobalState('fisheryInfo');\n const [isInsideWidget] = useGlobalState('isInsideWidget');\n\n return (\n IMPORTANT:
\n\n- \n {+fisheryId !== comptonsLake && (\n
- \n It is illegal to fish without a license in the UK. You can buy a\n fishing license from the government here (\n
- \n Any changes or cancellations to your booking after payment and\n confirmation have to be made via the fishery. For swimbooker™ booking\n policies{' '}\n \n click here\n \n .\n \n
\n 
\n {\n if (isInsideWidget) {\n sendWidgetMessage({ type: 'widgetCollapse' });\n }\n }}\n >\n {isInsideWidget\n ? 'Close Booking Widget'\n : 'Return to Fishery Profile'}\n \n {\n if (!window?.location) {\n return;\n }\n window.location.reload();\n }}\n >\n Refresh Page\n \n
\n \n );\n}\n\nexport default QueueModal;\n","import { Col, notification } from 'antd';\nimport React, { useEffect, useMemo, useState } from 'react';\n\nimport {\n matchPath,\n useHistory,\n useLocation,\n useParams,\n} from 'react-router-dom';\nimport { useGlobalState } from './components/GlobalState';\nimport SelectLakeAndTickets from './components/SelectLakeAndTickets';\nimport SelectSwims from './components/Step2';\nimport Step3 from './components/Step3';\n\nimport UserBookingSideSummary from './components/summaries/UserBookingSideSummary';\nimport '../admin/components/bookings/assets/css/admin_booking.css';\nimport './assets/css/user_bookings.css';\nimport { Helmet } from 'react-helmet';\nimport axios from 'axios';\nimport { exotic_fishery } from '../common/Utils';\nimport UserBookingSummary from './components/summaries/UserBookingSummary';\nimport UserBookingPaymentPage from './components/payment_page/UserBookingPaymentPage';\nimport UserBookingSuccessPage from './components/UserBookingSuccessPage';\nimport UserBookingFailurePage from './components/UserBookingFailurePage';\nimport UserBookingNavButtons from './components/UserBookingNavButtons';\nimport SelectDatesAndTimes from './components/date_selection/SelectDatesAndTimes';\nimport { emptyDatesObject } from '../availability_calendar/AvailabilityCalendar';\nimport SvgCalendar from '../../assets/images/Icons/SVG/Calendar';\nimport LicenceInfo from './components/summaries/LicenceInfo';\nimport { costString, getSummaryCosts } from '../../utils/cost';\n\nimport {\n useGetAddOnsQuery,\n useGetCustomPropertiesQuery,\n} from '../admin/components/bookings/bookingSlice';\nimport { useGetIsUserInBookingQueueQuery } from '../user_profile/userProfileSlice';\nimport dayjs from 'dayjs';\nimport { usePreventScroll } from '../../utils/hooks';\nimport QueueModal from './components/QueueModal';\n\nexport const USER_BOOKING_STEP_ORDER = [\n 'lake',\n 'dates',\n 'swims',\n 'anglers',\n 'summary',\n 'payment',\n 'success',\n 'failure',\n];\n\nconst HideFishery = process.env.REACT_APP_FISHERY_PRICE_HIDE;\n\nexport function UserBookings({ fisheryId, inWidget = false }) {\n const [current, setCurrent] = useGlobalState('current');\n\n const [userSelectedLakeId] = useGlobalState('userSelectedLakeId');\n const [lakeDetails] = useGlobalState('lakeDetails');\n const [lakeExclusive] = useGlobalState('lakeExclusive');\n const [userSelectedSwims] = useGlobalState('userSelectedSwims');\n const [userSelectedDoubleSwim] = useGlobalState('userSelectedDoubleSwim');\n const [userSelectedAnglers] = useGlobalState('userSelectedAnglers');\n const [userSelectedRods] = useGlobalState('userSelectedRods');\n const [userSelectedPakage] = useGlobalState('userSelectedPakage');\n const [lakeType] = useGlobalState('lakeType');\n const [, setIsInsideWidget] = useGlobalState('isInsideWidget');\n const [, setSwimImages] = useState(null);\n const [customPropertyDetails, setCustomPropertyDetails] = useGlobalState(\n 'customPropertiesDetails'\n );\n const [, setSwimAvailableData] = useGlobalState('swimAvailableData');\n const [estimatedPricing, setEstimatedPricing] =\n useGlobalState('estimatedPricing');\n const [, setunSelectableSwimIds] = useGlobalState('unSelectableSwimIds');\n const [bookingDates, setBookingDates] = useGlobalState('bookingDates');\n const [, setAvailableTime] = useGlobalState('availableTime');\n\n const [arrivalTime, setArrivalTime] = useGlobalState('arrivalTime');\n const [departureTime, setDepartureTime] = useGlobalState('departureTime');\n const [, setDateText] = useGlobalState('dateText');\n const [bookingType] = useGlobalState('bookingType');\n\n const is_exotic_fishery = fisheryId === exotic_fishery;\n const [addedItems, setAddedItems] = useGlobalState('addedProductItem');\n const [, setCartItems] = useGlobalState('productItem');\n const { data: ProductsData } = useGetAddOnsQuery(\n {\n fisheryId: fisheryId,\n packageId: userSelectedPakage\n ? lakeDetails?.custom_slot_days[userSelectedPakage - 1]?.id\n : null,\n lakeId: userSelectedLakeId,\n },\n {\n skip: !fisheryId,\n }\n );\n const { data: userIsInQueueResult, refetch: checkQueue } =\n useGetIsUserInBookingQueueQuery(fisheryId, { skip: !fisheryId });\n const isElphicks =\n (fisheryId ?? '0') === process.env.REACT_APP_FISHERY_TIME_ID;\n const isLaunchDay = dayjs().isSame(new Date(2024, 0, 2), 'day');\n\n const userIsInQueue =\n userIsInQueueResult ??\n (isElphicks &&\n isLaunchDay); /* Default to true on launch day whilst fetching */\n usePreventScroll('BookingQueue', userIsInQueue);\n const { data: customProperties } = useGetCustomPropertiesQuery(\n {\n fisheryId: fisheryId,\n bookingType: lakeExclusive ? 'lake_exclusive' : bookingType,\n lakeId: userSelectedLakeId,\n online: true,\n },\n {\n skip: !fisheryId || !userSelectedLakeId,\n }\n );\n useEffect(() => {\n let updatedProperties = customProperties?.map((item) => {\n return {\n ...item,\n field_value: '',\n };\n });\n setCustomPropertyDetails(updatedProperties);\n }, [JSON.stringify(customProperties)]);\n const isFormValid = customPropertyDetails?.every(\n (item) => item.field_value && item.field_value.trim() !== ''\n );\n useEffect(() => {\n /* Check queue status at periodic intervals */\n if (!userIsInQueue) {\n return;\n }\n const timeoutSeconds = Math.floor(Math.random() * 30 + 90);\n const t = setTimeout(() => {\n checkQueue();\n }, timeoutSeconds * 1000);\n\n return () => {\n clearTimeout(t);\n };\n });\n useEffect(() => {\n setCartItems(ProductsData?.map((item) => ({ ...item, quantity: 0 })));\n setAddedItems([]);\n }, [ProductsData]);\n\n useEffect(() => {\n /* Update isInsideWidget state if prop value changes */\n setIsInsideWidget(inWidget);\n }, [inWidget, setIsInsideWidget]);\n\n const {\n total: estimatedTotal,\n advance: estimatedDeposit,\n isDiscounted: isEstimateDiscounted,\n discountedTotal: estimatedDiscountedTotal,\n } = getSummaryCosts(lakeExclusive, is_exotic_fishery, estimatedPricing);\n const estimatedPayableTotal = isEstimateDiscounted\n ? estimatedDiscountedTotal\n : estimatedTotal;\n\n // ensures that steps here match USER_BOOKING_STEP_ORDER\n const steps = useMemo(\n () =>\n USER_BOOKING_STEP_ORDER.map((key) =>\n [\n {\n key: 'lake',\n title: 'Select Lake',\n content: (\n \n We are currently experiencing a high volume of users trying to book\n this venue.\n
\n\n You are being held in a digital queue and will be permitted to book\n once you reach the front of the queue.\n
\n\n Note: This high volume is isolated\n to{' '}\n {fisheryInfo?.venue_name ? (\n '{fisheryInfo.venue_name}'\n ) : (\n 'this fishery'\n )}\n . All other venues are live and our systems are fully operational.\n
\nThere was an issue!
,\n style: { border: '1px #D34545 solid' },\n placement: window?.innerWidth <= 500 ? 'bottom' : 'topRight',\n className: 'gRegular br10',\n description: 'Server Response failed. Please try again later',\n });\n } else if (err.response.status === 401) {\n notification.error({\n message: There was an issue!
,\n style: { border: '1px #D34545 solid' },\n placement: window?.innerWidth <= 500 ? 'bottom' : 'topRight',\n className: 'gRegular br10',\n description:\n 'Your action will not be saved. Please Login and try again!',\n });\n } else if (err.response.status === 400) {\n notification.error({\n message: There was an issue!
,\n style: { border: '1px #D34545 solid' },\n placement: window?.innerWidth <= 500 ? 'bottom' : 'topRight',\n className: 'gRegular br10',\n description: err.response.data['detail'],\n });\n } else if (err.response.status === 422) {\n if (err.response.data['detail'] === 'Signature has expired') {\n notification.error({\n message: There was an issue!
,\n style: { border: '1px #D34545 solid' },\n placement: window?.innerWidth <= 500 ? 'bottom' : 'topRight',\n className: 'gRegular br10',\n description:\n 'Login session has been expired. Please Login to continue!',\n });\n } else {\n notification.error({\n message: There was an issue!
,\n style: { border: '1px #D34545 solid' },\n placement: window?.innerWidth <= 500 ? 'bottom' : 'topRight',\n className: 'gRegular br10',\n description:\n \"OOPS! Server didn't like the request. If this persists please contact support team\",\n });\n }\n } else if (err.response.status === 423) {\n notification.error({\n message: There was an issue!
,\n style: { border: '1px #D34545 solid' },\n placement: window?.innerWidth <= 500 ? 'bottom' : 'topRight',\n className: 'gRegular br10',\n description:\n 'Sorry ! this booking slot has been booked by another user, Try different booking!',\n });\n }\n resetSelections();\n } else {\n notification.error({\n message: There was an issue!
,\n style: { border: '1px #D34545 solid' },\n placement: window?.innerWidth <= 500 ? 'bottom' : 'topRight',\n className: 'gRegular br10',\n description: 'Error processing result',\n });\n console.log(err);\n }\n })\n .finally(() => {});\n };\n\n const isNextDisabled = () => {\n return (\n userIsInQueue ||\n (current === USER_BOOKING_STEP_ORDER.indexOf('lake') &&\n (!userSelectedLakeId ||\n !userSelectedAnglers ||\n (lakeDetails?.lake_type === 'Swim-Ticket' && !bookingType) ||\n (lakeDetails?.custom_slot_booking && !userSelectedPakage))) ||\n (current === USER_BOOKING_STEP_ORDER.indexOf('dates') &&\n !(bookingDates && arrivalTime && departureTime)) ||\n (current === USER_BOOKING_STEP_ORDER.indexOf('swims') &&\n !(\n userSelectedSwims.length + userSelectedDoubleSwim.length >=\n userSelectedAnglers\n ))\n );\n };\n\n const next = () => {\n if (current === USER_BOOKING_STEP_ORDER.indexOf('lake')) {\n if (isNextDisabled()) {\n notification.error({\n message: There was an issue!
,\n style: { border: '1px #D34545 solid' },\n placement: window?.innerWidth <= 500 ? 'bottom' : 'topRight',\n className: 'gRegular br10',\n description: 'Please select all relevant fields to proceed',\n });\n } else {\n setCurrent(current + 1);\n }\n } else if (current === USER_BOOKING_STEP_ORDER.indexOf('dates')) {\n if (!isNextDisabled()) {\n getSwimAvailability();\n } else {\n if (!bookingDates?.[0]?.startDate) {\n notification.error({\n message: There was an issue!
,\n style: { border: '1px #D34545 solid' },\n placement: window?.innerWidth <= 500 ? 'bottom' : 'topRight',\n className: 'gRegular br10',\n description: 'Please select a date to proceed',\n });\n } else if (!arrivalTime) {\n notification.error({\n message: There was an issue!
,\n style: { border: '1px #D34545 solid' },\n placement: window?.innerWidth <= 500 ? 'bottom' : 'topRight',\n className: 'gRegular br10',\n description:\n 'Please select an arrival and departure time to proceed',\n });\n } else if (!departureTime) {\n notification.error({\n message: There was an issue!
,\n style: { border: '1px #D34545 solid' },\n placement: window?.innerWidth <= 500 ? 'bottom' : 'topRight',\n className: 'gRegular br10',\n description: 'Please select a departure time to proceed',\n });\n } else {\n notification.error({\n message: There was an issue!
,\n style: { border: '1px #D34545 solid' },\n placement: window?.innerWidth <= 500 ? 'bottom' : 'topRight',\n className: 'gRegular br10',\n description: 'Please select all relevant fields to proceed',\n });\n }\n }\n } else {\n if (current === USER_BOOKING_STEP_ORDER.indexOf('swims')) {\n if (!isNextDisabled()) {\n setCurrent(current + 1);\n } else {\n notification.error({\n message: There was an issue!
,\n style: { border: '1px #D34545 solid' },\n placement: window?.innerWidth <= 500 ? 'bottom' : 'topRight',\n className: 'gRegular br10',\n description: is_exotic_fishery\n ? 'Please select at least one room for all guests'\n : `Please select at least 1 swim for all anglers`,\n });\n }\n } else {\n setCurrent(current + 1);\n }\n }\n };\n\n const prev = () => {\n if (\n current === USER_BOOKING_STEP_ORDER.indexOf('anglers') &&\n (lakeType.toLowerCase() === 'ticket' || lakeExclusive)\n ) {\n setCurrent(USER_BOOKING_STEP_ORDER.indexOf('dates')); // Skip 'swims' step\n } else {\n setCurrent(current - 1);\n }\n };\n\n const htmlHeader = (\n \n Promotion Applied: {costString(estimatedDiscountedTotal)}\n
\n )}\n \n );\n\n if (current < USER_BOOKING_STEP_ORDER.indexOf('summary')) {\n return (\n <>\n {htmlHeader}\n\n
\n {fisheryId !== HideFishery && (\n \n
\n \n USER_BOOKING_STEP_ORDER.indexOf('lake') &&\n current < USER_BOOKING_STEP_ORDER.indexOf('anglers')\n }\n onPrev={prev}\n showNext={current < USER_BOOKING_STEP_ORDER.indexOf('anglers')}\n helpText={\n current === USER_BOOKING_STEP_ORDER.indexOf('lake') ? (\n
\n\n \n {steps[current].content}\n
\n \n
\n ) : undefined\n }\n onNext={next}\n nextProps={{\n className: isNextDisabled() ? 'disabled' : 'enabled',\n }}\n pageKey={steps[current].key}\n />\n \n
\n \n Total Price:\n \n {costString(estimatedTotal)}\n \n
\n {promotionAppliedMobileSummary}\n {Boolean(estimatedDeposit) &&\n estimatedDeposit < estimatedPayableTotal && (\n \n To Pay Today: {costString(estimatedDeposit)}\n
\n )}\n \n ) : is_exotic_fishery ? (\n <>\n\n 50% Deposit Price:\n \n {costString(estimatedDeposit)}\n \n
\n \n Total Price: {costString(estimatedTotal)}\n
\n {promotionAppliedMobileSummary}\n \n ) : (\n <>\n\n {current < USER_BOOKING_STEP_ORDER.indexOf('anglers')\n ? 'Estimated'\n : 'Final'}{' '}\n Price:\n \n {costString(estimatedTotal)}\n \n
\n {promotionAppliedMobileSummary}\n \n )}\n {!isEstimateDiscounted && (\n \n Calculated On Final Booking Step\n
\n )}\n \n )}\n \n );\n }\n\n // Summary or Payment pages\n return (\n\n
\n );\n}\n\nexport default function UserBookingsPage() {\n const history = useHistory();\n const { pathname } = useLocation();\n const isNewBooking = matchPath(pathname, {\n path: '/booking/new',\n exact: false,\n });\n\n const fisheryId = useParams()['fishery_id'];\n const [, setCurrent] = useGlobalState('current');\n\n useEffect(() => {\n if (isNewBooking) {\n setCurrent(0);\n history.replace(`/booking/progress/${fisheryId}`);\n }\n }, [fisheryId, history, isNewBooking, setCurrent]);\n\n return \n {htmlHeader}\n {steps[current].content}\n
\n