\n \n
\n \n )\n );\n};\n\nexport default Spinner;\n","import React, { Component } from \"react\";\nimport { Link } from \"react-router-dom\";\n\nclass Footer extends Component {\n render() {\n return (\n \n );\n }\n}\n\nexport default Footer;\n","import React from \"react\";\nimport { Link } from \"react-router-dom\";\nimport {\n disableBodyScroll,\n enableBodyScroll,\n clearAllBodyScrollLocks,\n} from \"body-scroll-lock\";\nimport { debounce } from \"lodash\";\n\nconst menuLinks = [\n { title: \"Pricing\", to: \"/pricing\" },\n { title: \"Book Now\", to: \"/book\" },\n { title: \"Reviews\", to: \"/reviews\" },\n { title: \"Contact Us\", to: \"/contact-us\" },\n { title: \"FAQ\", to: \"/faq\" },\n { title: \"How To\", to: \"/howto\" },\n];\n\nclass Navigation extends React.Component {\n state = { showMenu: false };\n\n targetRef = React.createRef();\n targetElement = null;\n\n componentDidMount() {\n this.targetElement = this.targetRef.current;\n window.addEventListener(\"resize\", this.debouncedCheckMenu);\n }\n\n componentWillUnmount() {\n clearAllBodyScrollLocks();\n window.removeEventListener(\"resize\", this.debouncedCheckMenu);\n }\n\n checkMenu = () => {\n const { showMenu } = this.state;\n if (window.innerWidth >= 768 && showMenu) {\n this.closeMenu();\n }\n };\n\n debouncedCheckMenu = debounce(this.checkMenu, 500);\n\n closeMenu = () => {\n enableBodyScroll(this.targetElement);\n this.setState({ showMenu: false });\n };\n\n openMenu = () => {\n disableBodyScroll(this.targetElement);\n this.setState({ showMenu: true });\n };\n\n render() {\n const { showMenu } = this.state;\n\n return (\n \n );\n }\n}\n\nexport default Navigation;\n","import { useEffect } from \"react\";\nimport { useLocation } from \"react-router-dom\";\n\nexport default function ScrollToTop() {\n const { pathname } = useLocation();\n\n useEffect(() => {\n window.scrollTo(0, 0);\n }, [pathname]);\n\n return null;\n}\n","import {\n UPDATE_BOOK_STATE,\n RESET_BOOK_STATE,\n SELECT_BEACH,\n SET_BOOK_STATE_FOR_ADDITIONAL_ORDER\n} from './types';\n\nconst filter = 'book';\n\nexport const updateBookState = payload => ({\n filter,\n type: UPDATE_BOOK_STATE,\n payload\n});\n\nexport const selectBeach = beach => ({\n filter,\n type: SELECT_BEACH,\n payload: beach\n})\n\nexport const setBookStateForAdditionalOrder = payload => ({\n filter,\n type: SET_BOOK_STATE_FOR_ADDITIONAL_ORDER,\n payload\n});\n\nexport const resetBookState = () => ({\n filter,\n type: RESET_BOOK_STATE\n});\n","import React from \"react\";\nimport { connect } from \"react-redux\";\nimport PropTypes from \"prop-types\";\nimport axios from \"axios\";\nimport { showInfo } from \"actions/modalActions\";\nimport moment from \"moment\";\n\nimport {\n setBookStateForAdditionalOrder,\n resetBookState,\n} from \"actions/bookActions\";\n\nclass AdditionalOrder extends React.Component {\n state = {\n orderId: \"\",\n };\n\n componentDidMount() {\n const { resetBookState } = this.props;\n resetBookState();\n this.input.current.focus();\n }\n\n submit = (e) => {\n e.preventDefault();\n e.stopPropagation();\n\n const { setBookStateForAdditionalOrder, showInfo, history } = this.props;\n const { orderId } = this.state;\n\n const url = `/api/reservations/get-reservation-by-number/${orderId}`;\n\n axios\n .get(url)\n .then((response) => {\n const { data: reservation } = response;\n\n if (reservation.isCancelled) {\n return showInfo({\n html: (\n \n Your reservation was cancelled\n
\n ),\n });\n }\n\n // Check that current date is less that reservation date 2pm\n const reservationDate = moment(reservation.date, \"MM/DD/YYYY\")\n .hours(14)\n .minutes(0)\n .valueOf();\n\n const currentDate = Date.now();\n\n if (currentDate < reservationDate) {\n setBookStateForAdditionalOrder(reservation);\n\n history.push(`/book`);\n } else {\n showInfo({\n html:\n \"Sorry, you can't book any additional equipment to this reservation.\",\n });\n }\n })\n .catch((err) => {\n console.log(err);\n showInfo({\n isError: true,\n html: (\n \n {(err.response &&\n err.response.data &&\n err.response.data.message) ||\n \"Something goes wrong. Please try again\"}\n
\n ),\n });\n });\n };\n\n input = React.createRef();\n\n inputHandler = (e) => {\n const { value } = e.target;\n\n this.setState({ orderId: value });\n };\n\n render() {\n const { orderId } = this.state;\n\n return (\nChoose Beach
\n\n{beach.name}
\n \n );\n })}\n \n\n
\n \n );\n }\n}\n\nChooseBeach.propTypes = {\n isAdditionalOrder: PropTypes.bool,\n history: PropTypes.object.isRequired,\n selectedBeach: PropTypes.object,\n showInfo: PropTypes.func.isRequired,\n showConfirm: PropTypes.func.isRequired,\n selectBeach: PropTypes.func.isRequired,\n resetBookState: PropTypes.func.isRequired\n};\n\nconst mapStateToProps = ({ book }) => ({\n selectedBeach: book.beach,\n isAdditionalOrder: !!book.additionalOrder\n});\n\nexport default compose(\n withRouter,\n connect(mapStateToProps, {\n selectBeach,\n showInfo,\n showConfirm,\n resetBookState\n })\n)(ChooseBeach);\n","import moment from 'moment';\n\nexport default time => {\n let hours = moment.duration(time).hours();\n let minutes = moment.duration(time).minutes();\n\n const ampm = hours >= 12 ? 'PM' : 'AM';\n hours = hours % 12;\n hours = hours ? hours : 12;\n minutes = minutes < 10 ? '0' + minutes : minutes;\n\n return `${hours}:${minutes} ${ampm}`;\n};\n","import formatMSToTimeString from './formatMSToTimeString';\n\nexport default (from, to, interval) => {\n const timeOptions = [];\n\n for (let time = from; time <= to; time += interval) {\n timeOptions.push(formatMSToTimeString(time));\n }\n\n return timeOptions;\n};\n","import moment from \"moment\";\n\nexport default timeString => {\n if (!timeString) return 0;\n\n const [time, ampm] = timeString.split(\" \");\n let [hours, minutes] = time.split(\":\");\n\n minutes = +minutes;\n hours = +hours;\n\n if (ampm === \"PM\" && hours !== 12) {\n hours += 12;\n }\n\n if (ampm === \"AM\" && hours === 12) {\n hours = 0;\n }\n\n const duration = moment.duration({\n hours,\n minutes\n });\n\n return duration.asMilliseconds();\n};\n","import React, { Component } from \"react\";\nimport { connect } from \"react-redux\";\nimport _ from \"lodash\";\nimport PropTypes from \"prop-types\";\nimport DayPicker from \"react-day-picker\";\nimport moment from \"moment\";\n\nimport { generateTimeIntervalOptions, getMSFromTimeString } from \"utils\";\nimport { showInfo } from \"actions/modalActions\";\nimport { updateBookState } from \"actions/bookActions\";\nimport API from \"api\";\n\nconst timeInterval = 30 * 60 * 1000; // 30 minutes\nconst getDate = string => moment(string, \"MM/DD/YYYY\").toDate();\n\nclass DateTime extends Component {\n state = {\n timeOptions: [],\n availableDays: []\n };\n\n componentDidMount() {\n // Disable booking until today or tomorrow if today's time already past 14 o'clock\n const today = moment()\n .startOf(\"day\")\n .toDate();\n\n const tomorrow = moment()\n .startOf(\"day\")\n .add(1, \"days\")\n .toDate();\n\n const hoursNow = moment().hours();\n\n const disabledDays = [\n {\n before:\n hoursNow >= 14 // Disable booking same day after 14:00\n ? tomorrow\n : today\n }\n ];\n\n const {\n book: { beach, date: selectedDate },\n changeStep,\n showInfo\n } = this.props;\n\n if (!beach) {\n return showInfo({\n html: \"You should select a beach firstly\",\n cb: () => changeStep(0)\n });\n }\n\n // Get beach available days\n API.beaches.getAvailableDays(beach._id).then(datesAndTimes => {\n const filteredDatesAndTimesSets = datesAndTimes\n ? datesAndTimes.filter(({ from, to, arrival, departure }) => {\n return from && to && arrival && departure;\n })\n : [];\n\n if (!filteredDatesAndTimesSets.length) {\n return showInfo({\n html:\n \"We are sorry, there are no available dates to reserve on this beach\"\n });\n }\n\n const availableDays = filteredDatesAndTimesSets.map(set => ({\n ...set,\n from: getDate(set.from),\n to: getDate(set.to)\n }));\n\n const initialMonth =\n selectedDate && moment(selectedDate, \"MM/DD/YYYY\").toDate();\n\n this.setState(\n {\n availableDays,\n disabledDays,\n initialMonth\n },\n this.setTimeOptionsForSelectedDate\n );\n });\n }\n\n componentDidUpdate(prevProps) {\n if (prevProps.book.date !== this.props.book.date) {\n this.setTimeOptionsForSelectedDate();\n }\n }\n\n setTimeOptionsForSelectedDate = () => {\n const { availableDays } = this.state;\n const { book } = this.props;\n\n const dateObject = getDate(book.date);\n\n const currentSet = _.find(availableDays, set => {\n return dateObject >= set.from && dateObject <= set.to;\n });\n\n if (!currentSet) {\n return this.setState({ timeOptions: [] }, this.resetTime);\n }\n\n const isSelectedDateIsToday =\n dateObject.setHours(0, 0, 0, 0) === new Date().setHours(0, 0, 0, 0);\n\n const currentTimeInMS = Date.now() - new Date().setHours(0, 0, 0, 0);\n const roundedCurrentTime =\n currentTimeInMS - (currentTimeInMS % timeInterval) + timeInterval;\n\n console.log(\"currentTimeInMS\", currentTimeInMS);\n console.log(\"roundedCurrentTime\", roundedCurrentTime);\n\n const arrivalTimeInMS = getMSFromTimeString(currentSet.arrival);\n const departureTimeInMS = getMSFromTimeString(currentSet.departure);\n\n console.log(\"isSelectedDateIsToday\", isSelectedDateIsToday);\n\n const timeOptions = generateTimeIntervalOptions(\n isSelectedDateIsToday\n ? Math.max(roundedCurrentTime, arrivalTimeInMS)\n : arrivalTimeInMS,\n departureTimeInMS,\n timeInterval\n );\n\n this.setState({ timeOptions });\n\n // Check if current selected times are included in the available time options\n if (\n (book.arrivalTime &&\n getMSFromTimeString(book.arrivalTime) < arrivalTimeInMS) ||\n (book.departureTime &&\n getMSFromTimeString(book.departureTime) > departureTimeInMS)\n ) {\n return this.resetTime();\n }\n };\n\n resetTime = () => {\n this.props.updateBookState({ arrivalTime: null, departureTime: null });\n };\n\n handleArrivalTimeChange = time => {\n const { updateBookState, book } = this.props;\n const { departureTime } = book;\n\n const updatedBookState = {};\n\n if (!time) {\n return updateBookState({ arrivalTime: null, departureTime: null });\n }\n\n if (\n departureTime &&\n getMSFromTimeString(time) >= getMSFromTimeString(departureTime)\n ) {\n updatedBookState.departureTime = null;\n }\n\n updatedBookState.arrivalTime = time;\n\n updateBookState(updatedBookState);\n };\n\n handleDepartureTimeChange = time => {\n const { updateBookState } = this.props;\n updateBookState({ departureTime: time });\n };\n\n handleDayClick = (date, { available, disabled }) => {\n const {\n updateBookState,\n book: { additionalOrder }\n } = this.props;\n\n if (additionalOrder) {\n return;\n }\n\n if (available && !disabled) {\n updateBookState({\n date: moment(date.getTime()).format(\"MM/DD/YYYY\"),\n bookedEquipment: [], // Reset booked equipment if date was changed\n paymentInfo: null // Rest payment info, cause inventory was removed\n });\n }\n };\n\n render() {\n const {\n changeStep,\n book: { date, departureTime, arrivalTime, additionalOrder }\n } = this.props;\n const {\n availableDays,\n timeOptions,\n disabledDays,\n initialMonth\n } = this.state;\n\n const filteredDepartureTimeOptions = timeOptions.filter(\n time =>\n arrivalTime &&\n getMSFromTimeString(time) > getMSFromTimeString(arrivalTime)\n );\n\n return (\n <>\n \n \n Cancel\n \n\n \n Next\n \n
\n Choose Date and Times
\n\n\n
\n \n
\n\n \n Arrival time\n {\n const val = e.target.value;\n this.handleArrivalTimeChange(val);\n }}\n value={arrivalTime || \"\"}\n >\n \n {timeOptions.map(opt => (\n \n ))}\n \n
\n\n \n Departure time\n {\n const val = e.target.value;\n this.handleDepartureTimeChange(val);\n }}\n value={departureTime || \"\"}\n >\n \n {filteredDepartureTimeOptions.map(opt => (\n \n ))}\n \n
\n \n
\n \n We strongly recommend arriving as early as possible to ensure\n you find a parking spot. The Beach Butler is not affiliated with\n any parking lots/structures and cannot guarantee you a spot. The\n inability to find parking is not a condition in which we will\n provide a refund. However, we would be happy to help guide you\n towards other parking options if you contact us.\n
\n\n It is ok if you decide to leave sooner or later than the\n selected departure time. Departure time will be used by Beach\n Butler to collect the equipment. Please keep in mind the latest\n we can collect equipment is 5:00pm.\n
\n\n
\n \n );\n }\n}\n\nDateTime.propTypes = {\n book: PropTypes.object.isRequired,\n updateBookState: PropTypes.func.isRequired,\n showInfo: PropTypes.func.isRequired\n};\n\nconst mapStateToProps = ({ book }) => ({\n book\n});\n\nexport default connect(mapStateToProps, { updateBookState, showInfo })(\n DateTime\n);\n","import React, { Component } from \"react\";\nimport { connect } from \"react-redux\";\nimport PropTypes from \"prop-types\";\n\nimport { updateBookState } from \"actions/bookActions\";\nimport { showInfo } from \"actions/modalActions\";\nimport API from \"api\";\n\nfunction generateMarker(map, coords) {\n return new window.google.maps.Marker({\n position: coords,\n map,\n icon: \"/img/pin.png\",\n });\n}\n\nfunction generateCircle(map, coords) {\n return new window.google.maps.Circle({\n zIndex: 10,\n strokeColor: \"#ffffff\",\n strokeOpacity: 0.8,\n strokeWeight: 2,\n fillColor: \"#ffffff\",\n fillOpacity: 0.7,\n map,\n center: coords,\n radius: 7,\n });\n}\n\nclass MapPin extends Component {\n state = {};\n\n componentDidMount() {\n const { beachId, showInfo } = this.props;\n\n API.beaches.getById(beachId).then(({ polygons, mapInitialViewBounds }) => {\n if (!polygons || !polygons.length) {\n return showInfo({\n html: \"We are sorry, there are no available places to spot\",\n });\n }\n\n this.setState({ polygons, mapInitialViewBounds }, this.initMap);\n });\n }\n\n componentDidUpdate(prevProps) {\n const { location } = this.props;\n\n if (prevProps.location !== location) {\n this.drawPin();\n }\n }\n\n drawPin = () => {\n const { location } = this.props;\n const { marker, circle } = this.state;\n\n marker && marker.setMap(null);\n circle && circle.setMap(null);\n\n const [lat, lng] = location.replace(/[\\s()]/g, \"\").split(\",\");\n\n const coords =\n location &&\n new window.google.maps.LatLng(parseFloat(lat), parseFloat(lng));\n\n this.setState({\n marker: generateMarker(this.map, coords),\n circle: generateCircle(this.map, coords),\n });\n };\n\n initMap() {\n const { updateBookState, location, showInfo, isAdditionalOrder } =\n this.props;\n const { google } = window;\n\n const { polygons, mapInitialViewBounds } = this.state;\n\n const map = new google.maps.Map(document.getElementById(\"map\"), {\n draggable: !isAdditionalOrder,\n // disableDefaultUI: isAdditionalOrder,\n zoom: 16,\n mapTypeId: google.maps.MapTypeId.HYBRID,\n mapTypeControlOptions: {\n mapTypeIds: [],\n },\n });\n\n const bounds = new google.maps.LatLngBounds();\n\n polygons.forEach((polygon) => {\n const coordinatesObject = polygon.map((e, i) => {\n const gmCoords = new google.maps.LatLng(e[0], e[1]);\n bounds.extend(gmCoords);\n return gmCoords;\n\n // return { lat: e[0], lng: e[1] };\n });\n\n const Polygon = new google.maps.Polygon({\n paths: coordinatesObject,\n strokeColor: \"#FF007F\",\n strokeOpacity: 0.8,\n strokeWeight: 2,\n fillColor: \"#FF007F\",\n fillOpacity: 0.35,\n });\n\n Polygon.setMap(map);\n\n if (!isAdditionalOrder) {\n Polygon.addListener(\"click\", function ({ latLng }) {\n this.lastCords = latLng;\n\n if (map.zoom < 19) {\n map.setZoom(19);\n map.setCenter(latLng);\n return;\n }\n\n updateBookState({ location: latLng.toString() });\n });\n }\n });\n\n if (location) {\n const [lat, lng] = location.replace(/[\\s()]/g, \"\").split(\",\");\n map.setCenter(new google.maps.LatLng(lat, lng));\n } else {\n try {\n const newBounds = new google.maps.LatLngBounds();\n mapInitialViewBounds.split(\";\").forEach((coords) => {\n const [lat, lng] = coords.split(\",\");\n const gmCoords = new google.maps.LatLng(\n Number(lat.trim()),\n Number(lng.trim())\n );\n newBounds.extend(gmCoords);\n });\n map.fitBounds(newBounds);\n } catch (err) {\n map.setCenter(bounds.getCenter());\n }\n }\n\n if (!isAdditionalOrder) {\n map.addListener(\"click\", function (event) {\n showInfo({\n html: \"The spot you have chosen is out of range. Please select a spot within the pink shaded area.\",\n });\n map.setCenter(this.lastCords);\n });\n }\n\n this.map = map;\n\n if (location) {\n this.drawPin();\n }\n }\n\n render() {\n const { location } = this.props;\n\n return (\n \n changeStep(0)}\n >\n Back to Beaches\n \n\n changeStep(2)}\n >\n Next\n \n
\n \n
\n\n \n\n Pick Your Spot
\n\n\n
\n \n All locations are approximate and not guaranteed. Our Beach\n Butlers will do their best to set up your spot as close to your\n desired location as possible. Your spot will be marked with a\n numbered flag.\n
\n\n Use the map below to let us know approximately where you want to\n sit. Simply pick your preferred location as you zoom in within the\n pink shaded area by “dropping” the blue pin.\n
\n\n
\n \n {\n this.props.changeStep(1);\n }}\n >\n Back to Dates\n \n\n {\n this.props.changeStep(3);\n }}\n >\n Next\n \n
\n Customer Information
\n\n\n val.length < 6}\n errorMessage=\"Zip Code is not valid\"\n />\n\n {\n this.updateInfo(\"knowFromOther\", e.target.value);\n }}\n />\n\n \n {\n this.updateInfo(\"agreement\", e.target.checked);\n }}\n />\n \n I agree to the{\" \"}\n \n Beach Butler Terms & Conditions\n \n \n \n
\n\n \n \n {\n this.updateInfo(\"firstName\", e.target.value);\n }}\n />\n
\n \n \n {\n this.updateInfo(\"lastName\", e.target.value);\n }}\n />\n
\n\n \n \n {\n this.updateInfo(\"birthYear\", e.target.value);\n }}\n >\n {yearsOptions.map(year => (\n \n ))}\n \n
\n\n \n \n\n this.updateInfo('phone', value)}\n />\n
*/}\n\n \n \n \n \n \n \n \n
\n\n \n
\n \n {\n changeStep(3);\n }}\n >\n Back to Equipment\n \n\n {\n updateBookState({\n customerInfo\n });\n changeStep(5);\n }}\n >\n Next\n \n
\n \n Do you want to add {item.name}?\n\n
\n \n );\n};\n\nAdditionalEquipment.propTypes = {\n item: PropTypes.object.isRequired,\n booked: PropTypes.array.isRequired,\n changeQuantity: PropTypes.func.isRequired,\n closeHandler: PropTypes.func.isRequired\n};\n\nexport default AdditionalEquipment;\n","import React, { Component } from \"react\";\nimport { connect } from \"react-redux\";\nimport PropTypes from \"prop-types\";\nimport _ from \"lodash\";\n\nimport { showInfo, closeModal } from \"actions/modalActions\";\nimport { updateBookState } from \"actions/bookActions\";\nimport AdditionalEquipment from \"./additional-equipment/additional-equipment\";\nimport API from \"api\";\n\nclass Equipment extends Component {\n state = {\n price: 0,\n inventory: [],\n availableInventory: {},\n booked: [],\n showAdditionalModal: false,\n additionalEquip: null\n };\n\n async componentDidMount() {\n const {\n book: { date, bookedEquipment },\n changeStep,\n showInfo\n } = this.props;\n\n if (!date) {\n // return to first step\n return showInfo({\n html: \"You should pick date firstly\",\n cb: () => changeStep(1)\n });\n }\n\n const inventory = await API.inventory.fetchList();\n\n this.setState(\n {\n inventory,\n booked: [...(bookedEquipment || [])]\n },\n this.getAvailableEquipment\n );\n }\n\n getAvailableEquipment = async () => {\n const {\n book: { beach, date },\n showInfo\n } = this.props;\n\n const availableInventory = await API.beaches.getAvailableInventoryForBeachByDate(\n beach._id,\n date\n );\n\n if (!availableInventory) {\n showInfo({\n html: \"Error getting status of available inventory. Please reload page\"\n });\n }\n\n this.setState(\n { availableInventory: availableInventory || {} },\n this.checkIfAllItemsAreStillAvailable\n );\n };\n\n checkIfAllItemsAreStillAvailable = cb => {\n const {\n showInfo,\n book: { date, beach },\n updateBookState\n } = this.props;\n const { booked, inventory } = this.state;\n\n if (!booked || !booked.length) return;\n\n API.beaches\n .checkIfAvailableForBook(beach._id, date, booked)\n .then(result => {\n if (!result) {\n showInfo({\n html: (\n \n {item.name}\n ${item.price} per pack\n\n
\n \n \n\n {currentQuantity}\n\n \n
\n \n Something goes wrong.
Booked equipment will be reseted,{\" \"}\n
\n please reload page and choose again\n
\n )\n });\n\n // Reset booked equipment\n updateBookState({ bookedEquipment: [], paymentInfo: {} });\n this.setState({ booked: [] });\n cb && cb(false);\n }\n\n const { availableInventory, notEnough } = result;\n\n this.setState({\n availableInventory\n });\n\n if (notEnough.length) {\n showInfo({\n html: (\n Booked equipment will be reseted,{\" \"}\n
\n please reload page and choose again\n
\n
\n )\n });\n\n cb && cb(false);\n } else {\n cb && cb(true);\n }\n });\n };\n\n componentDidUpdate(prevProps, prevState) {\n if (prevState.booked !== this.state.booked) {\n this.updatePrice();\n }\n }\n\n componentWillUnmount() {\n this.props.closeModal();\n }\n\n updatePrice = () => {\n const { booked, inventory } = this.state;\n\n const price = _.reduce(\n booked,\n (accum, booked) => {\n const item = _.find(inventory, { _id: booked._id });\n return accum + (item.price || 0) * booked.quantity;\n },\n 0\n );\n\n this.setState({ price });\n };\n\n changeQuantity = (equipmentId, diff) => {\n const { showInfo } = this.props;\n const { booked, availableInventory, inventory } = this.state;\n\n const bookedItem = _.find(booked, { _id: equipmentId }) || {\n _id: equipmentId,\n quantity: 0\n };\n\n const previousQty = bookedItem.quantity;\n\n const newCount = previousQty + diff;\n\n const withoutCurrent = _.reject(booked, { _id: equipmentId });\n\n if (newCount <= 0) {\n // Check if has related items\n const relatedIDs = _.filter(inventory, { relatedTo: equipmentId }).map(\n i => i._id\n );\n\n const withoutCurrentAndRelated = _.filter(\n withoutCurrent,\n item => !relatedIDs.includes(item._id)\n );\n\n return this.setState({ booked: withoutCurrentAndRelated });\n }\n\n let available = availableInventory[equipmentId] || 0;\n\n if (newCount > available && newCount > previousQty) {\n return showInfo({\n html:\n available !== 0 && available !== \"0\" ? (\n \n Maximum available for today is: {available}\n \n ) : (\n \n We are sorry, we are sold out of this item today. Please try a\n different item or a different day.\n \n )\n });\n }\n\n this.setState({\n booked: [...withoutCurrent, { ...bookedItem, quantity: newCount }]\n });\n };\n\n triggerAdditionalModal = equip => {\n const currentQty = this.getCurrentQtyOfEquip(equip._id);\n\n this.setState({\n showAdditionalModal: true,\n additionalEquip: equip,\n additionalEquipInitialValue: currentQty\n });\n };\n\n getCurrentQtyOfEquip = _id => {\n const { booked } = this.state;\n const current = _.find(booked, { _id });\n const currentQty = (current && current.quantity) || 0;\n return currentQty;\n };\n\n cancelAdditionalModal = () => {\n const { additionalEquipInitialValue, additionalEquip } = this.state;\n const currentQty = this.getCurrentQtyOfEquip(additionalEquip._id);\n\n this.changeQuantity(\n additionalEquip._id,\n additionalEquipInitialValue - currentQty\n );\n this.closeAdditionalModal();\n };\n\n closeAdditionalModal = () => {\n this.setState({\n showAdditionalModal: false,\n additionalEquip: null,\n additionalEquipInitialValue: 0\n });\n };\n\n goNext = () => {\n const { updateBookState, changeStep } = this.props;\n const { booked } = this.state;\n\n // Check if inventory is still available\n this.checkIfAllItemsAreStillAvailable(isAvailable => {\n if (isAvailable) {\n updateBookState({ bookedEquipment: booked, paymentInfo: {} });\n changeStep(4);\n }\n });\n };\n\n render() {\n const { changeStep } = this.props;\n const { showAdditionalModal, additionalEquip, booked, price } = this.state;\n\n return (\n <>\n \n We are sorry, some of equipment are booked already.
{\" \"}\n Please decrease quantity of:\n
- \n {notEnough.map(equip => {\n const { _id, quantity } = equip;\n const item = _.find(inventory, { _id });\n\n return (\n
- \n {item.name} by {quantity}\n \n );\n })}\n
Choose Beach Butler Equipment
\n\n
\n\n {this.renderInventory()}\n All prices include setup, delivery and pick up.
\n\n
\n \n );\n }\n\n renderInventory = () => {\n const { booked, inventory } = this.state;\n\n return (\n \n {\n changeStep(2);\n }}\n >\n Back to Map\n \n\n \n Next\n \n
\n \n
\n\n \n {booked.length}\n
\n total sum${price || 0}\n - \n {inventory.map(item => {\n if (item.relatedTo) return null;\n\n const relatedItems = _.filter(inventory, { relatedTo: item._id });\n\n const bookedItem = _.find(booked, { _id: item._id });\n const bookedCount = (bookedItem && bookedItem.quantity) || 0;\n\n return (\n
- \n \n \n ${item.price} per day\n \n\n\n\n {!!bookedCount && !!relatedItems.length && (\n\n \n\n {bookedCount}\n\n \n\n\n {relatedItems.map(additionalItem => (\n\n )}\n \n );\n })}\n
Summary
\n\n {this.renderEquipmentTable()}\n\n\n {\n this.props.changeStep(3);\n }}\n >\n ![\"\"](\"/img/pencil-edit-button@2x.png\")
\n Edit Equipment\n \n
\n\n \n Edit Equipment\n \n \n
\n \n \n
\n {\n this.props.changeStep(4);\n }}\n >\n \n edit\n \n )}\n
\n \n ![\"\"](\"/img/user.svg\")
\n Customer Info\n
\n \n \n \n {customerInfo.firstName} {customerInfo.lastName}\n \n \n {customerInfo.zipCode}\n \n {customerInfo.birthYear}\n \n {customerInfo.phone}\n \n {customerInfo.email}\n
\n {!additionalOrder && (\n \n edit\n \n )}\n \n \n
\n\n {\n this.props.changeStep(1);\n }}\n >\n \n edit\n \n )}\n
\n \n ![\"\"](\"/img/clock-circular-outline.svg\")
\n Date\n
\n\n \n \n {book.date}\n \n {book.arrivalTime}\n \n {book.departureTime}\n
\n\n {!additionalOrder && (\n \n edit\n \n )}\n \n \n
\n\n {\n this.props.changeStep(2);\n }}\n >\n \n edit\n \n )}\n
\n \n ![\"\"](\"/img/placeholder.svg\")
\n Location\n
\n\n \n \n {book.beach.name}\n
\n\n \n\n {!additionalOrder && (\n \n edit\n \n )}\n \n
\n \n );\n }\n\n renderEquipmentTable = () => {\n const {\n book: { bookedEquipment },\n updateBookState,\n } = this.props;\n const { inventory, amount, tax, totalAmount } = this.state;\n\n if (!inventory) return;\n\n return (\n \n {\n this.props.changeStep(4);\n }}\n >\n Back to Customer Information\n \n {\n updateBookState({ paymentInfo: { amount } });\n this.props.changeStep(6); // payment\n }}\n >\n Next\n \n
\n | Equipment | \nQuantity | \nPrice | \n\n |
|---|---|---|---|
| \n | \n\n \n {equip.quantity}\n | \n\n$ {price} | \n\n\n ![\"\"](\"/img/delete.svg\") \n \n | \n
| Subtotal | \n\n | $ {amount.toFixed(2)} | \n\n |
| MA State Sales Tax | \n\n | $ {tax.toFixed(2)} | \n\n |
| Total | \n\n | $ {totalAmount.toFixed(2)} | \n\n |
\n {data && data.message ? data.message : \"Server Error\"}\n
\n )\n });\n console.log(err);\n });\n });\n };\n\n deleteDiscount = e => {\n e && e.preventDefault && e.preventDefault();\n\n const { updateBookState, book } = this.props;\n\n const paymentInfo = { ...book.paymentInfo };\n delete paymentInfo.discountId;\n delete paymentInfo.discountCode;\n delete paymentInfo.discountValue;\n updateBookState({ paymentInfo });\n };\n\n createDropInUI = () => {\n // if (this.braintreeInstance) {\n // this.braintreeInstance.teardown();\n // }\n\n axios\n .get(\"/api/reservations/get-braintree-token\")\n .then(res => {\n const { data: token } = res;\n dropin.create(\n {\n authorization: token,\n container: \"#dropin-container\",\n paypal: {\n flow: 'vault'\n },\n card: {\n overrides: {\n fields: {\n cvv: {\n // type: 'password',\n maskInput: true\n }\n }\n }\n }\n },\n (createErr, instance) => {\n if (createErr) {\n console.log(createErr);\n return;\n // return showInfo({\n // html: \"Error while creating payment container\"\n // });\n }\n\n this.braintreeInstance = instance;\n this.setState({ paymentBoxReady: true });\n }\n );\n })\n .catch(err => {\n console.log(err);\n });\n };\n\n confirmReservation = e => {\n e && e.preventDefault && e.preventDefault();\n\n const { book, showInfo, changeStep, updateBookState } = this.props;\n\n this.braintreeInstance.requestPaymentMethod((err, payload) => {\n if (err) {\n console.log(\"err\", err);\n return;\n }\n\n this.setState({ processing: true });\n\n axios\n .post(\n \"/api/reservations/create-reservation\",\n {\n book,\n paymentMethodNonce: payload.nonce\n },\n { timeout: 45000 }\n )\n .then(res => {\n this.braintreeInstance.teardown();\n this.setState({ processing: false });\n\n if (res.data.success) {\n // Update Book State\n updateBookState(res.data.reservation);\n // Go to Thank You Page\n changeStep(7);\n }\n })\n .catch(err => {\n this.braintreeInstance.teardown();\n this.setState({ processing: false });\n\n this.createDropInUI();\n\n const message =\n (err.response && err.response.data && err.response.data.message) ||\n \"Something goes wrong. Please try again\";\n\n showInfo({ html: message, isError: true });\n });\n });\n };\n\n render() {\n const { paymentBoxReady, processing } = this.state;\n\n const {\n book: { paymentInfo },\n changeStep\n } = this.props;\n\n const {\n amount,\n discountCode,\n withoutTax,\n totalAmount,\n discountAmount,\n taxAmount,\n discountValue,\n discountId\n } = paymentInfo;\n\n return (\n <>\nPayment
\n\n| Equipment | \n${amount.toFixed(2)} | \n
|---|---|
| \n Promo Code{\" \"}\n {discountId ? (\n <>\n \n ({discountCode} - {discountValue}%)\n \n | \n \n {discountId && discountAmount ? (\n `- $${discountAmount.toFixed(2)}`\n ) : (\n | \n
| Subtotal | \n${withoutTax && withoutTax.toFixed(2)} | \n
| Tax | \n${taxAmount && taxAmount.toFixed(2)} | \n
| Total | \n${totalAmount && totalAmount.toFixed(2)} | \n
\n
\n \n );\n }\n}\n\nPayment.propTypes = {\n book: PropTypes.object.isRequired,\n updateBookState: PropTypes.func.isRequired,\n showPrompt: PropTypes.func.isRequired\n};\n\nconst mapStateToProps = ({ book }) => ({\n book\n});\n\nexport default compose(\n connect(mapStateToProps, { updateBookState, showPrompt, showInfo })\n)(Payment);\n","import React, { Component } from 'react';\nimport { Link, Redirect } from 'react-router-dom';\nimport { connect } from 'react-redux';\n\nimport { resetBookState } from 'actions/bookActions';\n\nclass Thanks extends Component {\n componentWillUnmount() {\n const { resetBookState } = this.props;\n\n resetBookState();\n }\n\n render() {\n const { book } = this.props;\n\n if (!book || !book.reservationNumber) {\n return \n {\n changeStep(5);\n }}\n >\n Back to Summary\n \n {\n this.confirmReservation();\n }}\n >\n Submit\n \n
\n THANK YOU
\n \n \n {book.reservationNumber}\n \n {book.date}\n \n \n\n Back to Site\n{message}
,\n });\n });\n };\n\n updateValue = (field, val) => {\n this.setState({ [field]: val });\n };\n\n render() {\n const { email, subject, message, sendingEmail } = this.state;\n\n return (\n <>\n \n All prices include delivery, setup and pick up.\n
\n\n- \n {list &&\n list.map((equip) => {\n let price = `${equip.price} per day`;\n\n if (equip.name.toLowerCase() === \"ice\") {\n price = `${equip.price} per pack`;\n }\n\n return (\n
- \n \n {equip.name}\n \n {equip.description}\n Book\n\n {/* */}\n\n \n );\n })}\n
Frequently Asked Questions
\n\n {\n this.changeSection(1);\n }}\n >\n \n \n No, there is no need to check in with the Beach Butler when you\n arrive at the beach. Simply make your way to the beach without\n lugging all the heavy equipment! Once you are settled your Beach\n Butler will check in on you to ensure you have everything you\n need. After that initial check in, your Beach Butler will only\n approach you if you raise your flag.\n \n
\n ARRIVAL & DEPARTURE
\n RESERVATIONS
\n ISSUES
\n \n
\n The Beach, Made Easy
\n\n\n Enjoy the beach to the fullest while the Beach Butler does the heavy\n lifting.\n
\n\n \n Book Now\n \n\n
\n\n \n
\n \n
\n Maximize your beach experience with us
\n \n Tired of lugging endless supplies to the beach? Let the Beach\n Butler do the heavy lifting for you. We’re here to make your\n beach experience as enjoyable as possible by renting chairs,\n umbrellas, towels, coolers, games and more. Simply let us know\n where you want to sit, what equipment you want to have there and\n we’ll take care of the rest.\n \n\n ![\"\"](\"img/beach-experience-img.jpg\")
\n
\n \n \n
\n\n \n
\n \n
\n STEP 1
\nMake a reservation
\n \n Let us know what day and time you plan to arrive, approximately\n where you want to sit on the beach and what equipment you’d like\n to have setup.{\" \"}\n \n\n ![\"\"](\"img/home-step-1.jpg\")
\n
\n \n \n
\n\n \n
\n \n
\n STEP 2
\nArrive and enjoy
\n \n Prior to your arrival, a Beach Butler will setup your area with\n your rental equipment. We’ll mark it with an easy to find flag.\n A Beach Butler will check on you to make sure you have\n everything you need.\n \n\n ![\"\"](\"img/home-step-2.jpg\")
\n
\n \n \n
\n \n
\n \n
\n STEP 3
\nDepart worry-free
\n \n When you’re ready to leave, just pack yourselves up and leave\n the rental equipment. A Beach Butler will swing by to clean it\n all up.\n \n\n ![\"\"](\"img/step-03@2x.png\")
\n
\n \n The beach shouldn’t be stressful, it should be fun!
\n\n
\n\n \n
\n \n
\n Maximize your beach experience with us
\n \n Tired of lugging endless supplies to the beach? Let the Beach\n Butler do the heavy lifting for you. We’re here to make your\n beach experience as enjoyable as possible by renting chairs,\n umbrellas, towels, coolers, games and more. Simply let us know\n where you want to sit, what equipment you want to have there\n and we’ll take care of the rest.\n \n\n ![\"\"](\"/img/step-00@2x.png\")
\n
\n \n \n
\n\n \n
\n \n
\n STEP 1
\nMake a reservation
\n \n Let us know what day and time you plan to arrive,\n approximately where you want to sit on the beach and what\n equipment you’d like to have setup.{\" \"}\n \n\n ![\"\"](\"/img/step-01@2x.png\")
\n
\n \n \n
\n\n \n
\n \n
\n STEP 2
\nArrive and enjoy
\n \n Prior to your arrival, a Beach Butler will setup your area\n with your rental equipment. We’ll mark it with an easy to find\n flag. A Beach Butler will check on you to make sure you have\n everything you need.\n \n\n ![\"\"](\"/img/step-02@2x.png\")
\n
\n \n \n
\n \n
\n \n
\n STEP 3
\nDepart worry-free
\n \n When you’re ready to leave, just pack yourselves up and leave\n the rental equipment. A Beach Butler will swing by to clean it\n all up.\n \n\n ![\"\"](\"/img/step-03@2x.png\")
\n
\n \n The beach shouldn’t be stressful, it should be fun!
\nReviews
\n\n\n {testimonials &&\n testimonials.map((testimonial) => {\n return (\n
\n \n {testimonial.text}\n
\n );\n })}\n Privacy Policy
\n Privacy NoticeThis privacy notice discloses the\n privacy practices for www.mybeachbutler.com. This privacy notice\n applies solely to information collected by this website. It will\n notify you of the following:\n- \n
- \n What personally identifiable information is collected from you\n through the website, how it is used and with whom it may be\n shared.\n \n
- \n What choices are available to you regarding the use of your data.\n \n
- \n The security procedures in place to protect the misuse of your\n information.\n \n
- How you can correct any inaccuracies in the information. \n
- \n
- See what data we have about you, if any. \n
- Change/correct any data we have about you. \n
- Have us delete any data we have about you. \n
- Express any concern you have about our use of your data. \n
\n
\n \n \n \n \n \n \n \n\n \n \n \n
\n