`;\n};\n\n/**\n *\n * @param slots {Array}\n * @param card {Element}\n * @param calendarSelect {Boolean}\n * @param waitListPresent {Boolean}\n * @param waitListLength {Number}\n * @param footerEl {Element}\n */\nfunction setSlots(\n slots,\n card,\n calendarSelect,\n waitListPresent,\n waitListLength,\n footerEl,\n) {\n const todaysSlots = slotsToday(slots, card);\n const tomorrowsSlots = slotsTomorrow(slots, card);\n if (todaysSlots.length > 0) {\n insertTimeSlots(card, todaysSlots, footerEl, \"Today's availability\");\n setAvailabilityPriorityAttribute(card, 1);\n } else if (waitListPresent) {\n insertWaitlistCTA(card, waitListLength, footerEl);\n setAvailabilityPriorityAttribute(card, 2);\n } else if (tomorrowsSlots.length > 0) {\n if (calendarSelect) {\n insertTimeSlots(\n card,\n tomorrowsSlots,\n footerEl,\n \"Tomorrow's availability\",\n );\n } else {\n insertNextAvailableDateMessage(card, tomorrowsSlots[0], footerEl, true);\n }\n setAvailabilityPriorityAttribute(card, 2);\n } else if (slots.length > 0) {\n const nextSlot = nextAvailableSlot(slots, card);\n insertNextAvailableDateMessage(card, nextSlot, footerEl);\n setAvailabilityPriorityAttribute(card, 3);\n } else {\n insertNoAvailabilityMessage(card, footerEl);\n setAvailabilityPriorityAttribute(card, 4);\n }\n}\n\n/**\n *\n * @param slots {Array}\n * @param card {Element}\n * @param searchDate {Object}\n * @param footerEl {Element}\n */\nfunction setSearchedSlots(slots, card, searchDate, footerEl) {\n const searchDateValue = getUTCDate(new Date(searchDate.value));\n const searchDateSlots = slotsOnDate(slots, searchDateValue, card);\n if (searchDateSlots.length > 0) {\n insertTimeSlots(\n card,\n searchDateSlots,\n footerEl,\n `${formatDate(searchDate.value)}`,\n );\n setAvailabilityPriorityAttribute(card, 1);\n } else if (slots.length > 0) {\n const nextSlot = nextAvailableSlot(slots, card);\n insertNextAvailableDateMessage(card, nextSlot, footerEl);\n setAvailabilityPriorityAttribute(card, 2);\n } else {\n insertNoAvailabilityMessage(card, footerEl);\n setAvailabilityPriorityAttribute(card, 4);\n }\n}\n\nexport const loadSlotToDom = (data, ignore_times, searchDate) => {\n const card = document.querySelector(\n `.ubs-widget-card[data-uniq-hash=\"${data.hash}\"]`,\n );\n\n if (!card) {\n return;\n }\n\n if (!(card.dataset.slotsLoaded === 'true') || ignore_times) {\n const slots = data.slots;\n const waitListAvailability = data.waitListAvailability === 'true';\n const waitListLength = data.waitListLength;\n\n if (!ignore_times) {\n updateDatePickers(slots);\n }\n const footerEl = getFooter(card);\n\n if (slots) {\n const todaysDate = new Date().toDateString();\n if (getUbsMain().dataset.displayCalendar === 'false') {\n setSlots(\n slots,\n card,\n false,\n waitListAvailability,\n waitListLength,\n footerEl,\n );\n } else if (\n dateValuePresent(searchDate) &&\n todaysDate !== dateValueToDateString(searchDate)\n ) {\n setSearchedSlots(slots, card, searchDate, footerEl);\n } else {\n setSlots(\n slots,\n card,\n true,\n waitListAvailability,\n waitListLength,\n footerEl,\n );\n }\n } else {\n insertNoAvailabilityMessage(card, footerEl);\n setAvailabilityPriorityAttribute(card, 4);\n }\n\n if (card) {\n addBookingParamsToCardLink(card, footerEl);\n }\n }\n};\n","import {\n getLocationsListingsTab,\n getLocationsListingsTabButton,\n getProvidersListingsTab,\n getProvidersListingsTabButton,\n getUbsMain,\n} from '@/components/ubs/elementUtils';\n\nconst viewClinicsTabButton = getLocationsListingsTabButton();\nconst viewProvidersTabButton = getProvidersListingsTabButton();\nconst clinicsTab = getLocationsListingsTab();\nconst providersTab = getProvidersListingsTab();\n\n/**\n * Updates the data-segment-tab-view attribute on ubs main depending on which tab is currently active\n * @param tab {string}\n */\nfunction setTabViewAttribute(tab) {\n const main = getUbsMain();\n main.dataset.segmentTabView = tab;\n}\n\nfunction showClinics() {\n if (!viewClinicsTabButton || !viewProvidersTabButton) {\n return;\n }\n providersTab.classList.add('ubs-page--hidden');\n clinicsTab.classList.remove('ubs-page--hidden');\n viewClinicsTabButton.classList.add('active');\n viewProvidersTabButton.classList.remove('active');\n setTabViewAttribute('clinics');\n}\n\nfunction showProviders() {\n if (!viewClinicsTabButton || !viewProvidersTabButton) {\n return;\n }\n clinicsTab.classList.add('ubs-page--hidden');\n providersTab.classList.remove('ubs-page--hidden');\n viewProvidersTabButton.classList.add('active');\n viewClinicsTabButton.classList.remove('active');\n setTabViewAttribute('providers');\n}\n\nfunction setUpTabsButtons() {\n if (!viewClinicsTabButton || !viewProvidersTabButton) {\n return;\n }\n viewProvidersTabButton.addEventListener('click', (e) => {\n showProviders();\n });\n\n viewClinicsTabButton.addEventListener('click', (e) => {\n showClinics();\n });\n}\n\nexport { setUpTabsButtons, showClinics, showProviders };\n","import { setParam } from '@/components/ubs/bookingTimes';\nimport { getAnonymousId } from '@/components/shared/tracking/segmentAnalytics';\nimport {\n getListingsContainerByName,\n isProviderCard,\n} from '@/components/ubs/elementUtils';\nimport { setUpDomEvents } from '@/components/shared/tracking/globalTracking';\nimport { showClinics } from '@/components/ubs/controllers/tabsController';\n\nclass MapboxMap extends HTMLElement {\n ACCESS_TOKEN = document.getElementById('envKeys').dataset.mapboxKey;\n markers = [];\n\n constructor() {\n super();\n\n const coords = JSON.parse(this.getAttribute('data-center'));\n if (coords) {\n this._center = coords.reverse();\n } else {\n this._center = [0, 0];\n }\n }\n\n connectedCallback() {\n this.innerHTML = '';\n mapboxgl.accessToken = this.ACCESS_TOKEN;\n this.map = new mapboxgl.Map({\n container: 'map',\n style: 'mapbox://styles/mapbox/streets-v11?optimize=true', // style URL\n center: this._center,\n zoom: 10,\n cooperativeGestures: true,\n });\n }\n\n set locations(locations) {\n this.renderMarkers(locations);\n }\n\n set center(center) {\n this._center = center;\n this.addCenter();\n }\n\n get center() {\n return this._center;\n }\n\n get mapObject() {\n return this.map;\n }\n\n getLocationCards() {\n return document.querySelectorAll('.ubs-widget-card');\n }\n\n renderMarkers(locations) {\n // Remove the markers if there are any to repaint\n this.clearMarkers();\n\n const bounds = this.map.getBounds();\n\n locations.forEach((locationCard) => {\n const locData = locationCard.dataset;\n const lngLat = [\n parseFloat(locData.longitude),\n parseFloat(locData.latitude),\n ];\n const markerElement = this.createMarkerFromCard(locationCard);\n if (this.showOnMap(locationCard)) {\n const marker = new mapboxgl.Marker({ element: markerElement })\n .setLngLat(lngLat)\n .setPopup(this.createPopupFromCard(locationCard))\n .addTo(this.map);\n\n // Add markers to the instance variable to keep track of them\n this.markers.push(marker);\n\n // TODO: these blocks of code could be split up into methods\n // when marker is clicked open the infowindow and set the card active\n marker._element.addEventListener('click', () => {\n // only allow a single window to be open at once\n this.removeClassFromNodes(locations, 'active');\n locationCard.classList.add('active');\n\n const idHash = locationCard.dataset.uniqHash;\n this.focusListingCard(idHash);\n });\n\n const providerCards = document.querySelectorAll(\n `.ubs-widget-card--provider[data-id-hash=\"${locData.idHash}\"]`,\n );\n const eventCards = Array.from(providerCards);\n eventCards.push(locationCard);\n eventCards.forEach((card) => {\n // when a card is hovered, open the popup\n card.addEventListener('mouseenter', () =>\n this.highlightMarker(marker, locationCard),\n );\n // when a card is focused, open the popup\n card.addEventListener('click', () =>\n this.highlightMarker(marker, locationCard),\n );\n card.addEventListener('mouseleave', () =>\n this.unHighlightMarker(marker),\n );\n });\n }\n });\n\n this.map.fitBounds(bounds, { padding: 20 });\n }\n\n focusListingCard(idHash) {\n // TODO: refactor this so that we are not managing another components state from this component\n showClinics();\n this.removeOutlineFromListingCards();\n\n // highlight listing card\n const listingCard = getListingsContainerByName('locations').querySelector(\n `[data-uniq-hash=\"${idHash}\"]`,\n );\n listingCard.classList.add('ubs-widget-card--highlighted');\n\n this.scrollToListingCard(listingCard);\n }\n\n // TODO: move this elsewhere for single responsibility\n scrollToListingCard(listingCard) {\n listingCard.scrollIntoView({\n behavior: 'smooth',\n });\n }\n\n // TODO: move this elsewhere for single responsibility\n removeOutlineFromListingCards() {\n const cards = document.querySelectorAll('.ubs-widget-card');\n cards.forEach((card) => {\n card.classList.remove('ubs-widget-card--highlighted');\n });\n }\n\n clearMarkers() {\n if (!this.markers) {\n return;\n }\n\n this.markers.forEach((marker) => {\n if (marker.getPopup() && marker.getPopup().isOpen()) {\n marker.getPopup().remove();\n }\n marker.remove();\n });\n this.markers = [];\n }\n\n addCenter() {\n // create the marker\n const markerWrapper = document.createElement('div');\n const el = document.createElement('div');\n el.classList.add('map-marker');\n el.classList.add('map-marker--center');\n markerWrapper.appendChild(el);\n const marker = new mapboxgl.Marker({\n element: markerWrapper,\n });\n\n marker.setLngLat(this._center);\n marker.addTo(this.map);\n this.markers.push(marker);\n }\n\n showOnMap(card) {\n if (!card) {\n return false;\n }\n const isTelemedOnly = card.dataset.telemed === 'true';\n const providerCard = isProviderCard(card);\n return !isTelemedOnly && !providerCard;\n }\n\n createMarkerFromCard(locationCard) {\n // create the marker\n const markerWrapper = document.createElement('div');\n const markerElement = document.createElement('div');\n markerElement.classList.add(...this.markerClasses());\n markerElement.style = `--background-image: url(\"${this.createMarkerImage(locationCard.dataset.markerColor)}\");`;\n markerWrapper.appendChild(markerElement);\n return markerWrapper;\n }\n\n createMarkerImage(color) {\n const urlSVGHeader = 'data:image/svg+xml;charset=utf-8,';\n const markerSVG =\n encodeURIComponent(``);\n return urlSVGHeader + markerSVG;\n }\n\n markerClasses() {\n return ['map-marker', 'map-marker--featured'];\n }\n\n createPopupFromCard(locationCard) {\n const locationCardNode = locationCard.cloneNode(true);\n const hrefs = locationCardNode.querySelectorAll('a');\n hrefs.forEach((a) => {\n if (a.dataset.listeningForClick) {\n delete a.dataset.listeningForClick;\n }\n });\n locationCardNode.querySelectorAll('[data-src]').forEach((el) => {\n el.src = el.dataset.src;\n });\n\n this.updateBookingUrl(locationCardNode);\n const popup = new mapboxgl.Popup({\n focusAfterOpen: false,\n offset: [0, -18],\n closeButton: false,\n });\n popup.setDOMContent(locationCardNode);\n popup.setMaxWidth('unset');\n\n popup.on('open', () => {\n setUpDomEvents();\n });\n\n return popup;\n }\n\n updateBookingUrl(card) {\n const bookingButton = card.querySelector('.ubs-widget-card__map-button');\n const bookingUrl = new URL(bookingButton.href);\n\n if (card.dataset.soonest) {\n setParam(bookingUrl, 'preferredDate', card.dataset.soonest.slice(0, 10));\n }\n\n const anonymousId = getAnonymousId();\n if (anonymousId) {\n setParam(bookingUrl, 'anonymousId', anonymousId);\n }\n\n bookingButton.href = bookingUrl;\n }\n\n highlightMarker(marker, locationCard) {\n if (!marker.getPopup().isOpen()) {\n marker.togglePopup();\n }\n const markerElement = marker._element.children[0];\n const locations = this.getLocationCards();\n markerElement.classList.add('map-marker--grow');\n this.removeClassFromNodes(locations, 'active');\n locationCard.classList.add('active');\n }\n\n unHighlightMarker(marker) {\n if (marker.getPopup().isOpen()) {\n marker.togglePopup();\n }\n const markerElement = marker._element.children[0];\n markerElement.classList.remove('map-marker--grow');\n }\n\n removeClassFromNodes(nodes, className) {\n nodes.forEach((el) => {\n el.classList.remove(className);\n });\n }\n}\n\ncustomElements.define('mapbox-map', MapboxMap);\n","export default function setUpDropdownMenus(dropDownId = '') {\n let dropdownMenuControllers = [];\n\n if (dropDownId === '') {\n dropdownMenuControllers = document.querySelectorAll(\n '[data-ubs-dropdown-controller]',\n );\n } else {\n dropdownMenuControllers = document.querySelectorAll(\n `[data-dropdown-controller-id=\"${dropDownId}\"]`,\n );\n }\n\n dropdownMenuControllers.forEach((controllerElement) => {\n const id = controllerElement.dataset.dropdownControllerId;\n const menu = document.querySelector(`[data-ubs-dropdown-menu=\"${id}\"]`);\n\n if (!menu) {\n console.error(`Dropdown menu with id ${id} not found`);\n return;\n }\n\n const activators = document.querySelectorAll(\n `[data-ubs-dropdown-activator=\"${id}\"]`,\n );\n\n const isOpen = () => {\n return !menu.classList.contains('ubs-page--hidden');\n };\n\n const closeMenu = () => {\n menu.classList.add('ubs-page--hidden');\n };\n\n const activatorsContainTarget = (target) => {\n for (let i = 0; i < activators.length; i++) {\n if (activators[i].contains(target) || activators[i] === target) {\n return true;\n }\n }\n return false;\n };\n\n const calenderBtnsContainTarget = (target) => {\n return (\n target.classList.contains('flatpickr-next-month') ||\n target.classList.contains('flatpickr-prev-month') ||\n target.tagName === 'svg' ||\n target.tagName === 'path'\n );\n };\n\n const onClickOutside = (e) => {\n if (isOpen()) {\n if (\n menu !== e.target &&\n !activatorsContainTarget(e.target) &&\n !calenderBtnsContainTarget(e.target)\n ) {\n document.removeEventListener('click', onClickOutside);\n closeMenu();\n }\n }\n };\n\n const openMenu = () => {\n menu.classList.remove('ubs-page--hidden');\n document.addEventListener('click', (e) => {\n onClickOutside(e);\n });\n };\n\n activators.forEach((activator) => {\n activator.addEventListener('click', (e) => {\n if (!activator.classList.contains('disabled')) {\n if (isOpen()) {\n closeMenu();\n } else {\n openMenu();\n }\n }\n });\n });\n\n // special case for datepicker dropdown\n if (menu.dataset.ubsDropdownMenu === 'date') {\n const dateInput = menu.querySelector('input.date-picker');\n dateInput.addEventListener('change', (e) => {\n closeMenu();\n });\n }\n\n controllerElement.addEventListener('keyup', (e) => {\n if (e.key === 'Escape') {\n closeMenu();\n }\n });\n });\n}\n","// set up map show/hide functionality for mobile\nimport {\n getCurrentlyVisibleListingsContainer,\n getCurrentlyVisibleListingsTab,\n getCurrentlyVisibleTabName,\n getHeader,\n getMapContainer,\n getMobileMapButtons,\n getRevealFiltersButtons,\n getSeeMoreWrapper,\n getTabsContainer,\n} from '@/components/ubs/elementUtils';\n\nfunction setUpShowHideMapButton(providerOnly = false) {\n const mapContainer = getMapContainer();\n const listContainer = getCurrentlyVisibleListingsContainer();\n const header = getHeader();\n const tabs = getTabsContainer();\n const filtersButtons = getRevealFiltersButtons();\n const hideClass = 'ubs-page--hidden';\n const noTabs = document\n .querySelector('[data-ubs-layout-wrapper]')\n .classList.contains('no-tabs');\n\n let buttons = [];\n\n // this is for only initializing the providers dropdown once that has gotten lazy loaded in\n if (providerOnly) {\n const practitionersTab = document.querySelector(\n '[data-dropdown-controller-id=\"filters-menu-practitioners\"]',\n );\n buttons = getMobileMapButtons(practitionersTab);\n } else {\n buttons = getMobileMapButtons();\n }\n\n buttons.forEach((btnEl) => {\n // return if the button doesn't exist. This will only happen if there are no locations\n if (!btnEl) {\n return;\n }\n\n btnEl.addEventListener('click', (e) => {\n e.preventDefault();\n toggleMapView(btnEl);\n });\n });\n window.addEventListener('resize', (e) => {\n if (\n window.innerWidth > 750 &&\n listContainer.classList.contains(hideClass)\n ) {\n listContainer.classList.remove(hideClass);\n const currentTabName = getCurrentlyVisibleTabName();\n const seeMoreWrapper = getSeeMoreWrapper(currentTabName);\n if (seeMoreWrapper) {\n seeMoreWrapper.classList.remove(hideClass);\n }\n mapContainer.classList.remove('show');\n header.classList.remove(hideClass);\n if (!noTabs) {\n tabs.classList.remove(hideClass);\n }\n document.body.classList.remove('ubs-page--disable-scroll');\n\n // ios fix\n const wrappers = document.querySelectorAll('[data-ubs-filters]');\n wrappers.forEach((wrapper) => {\n wrapper.classList.remove('hide-overflow');\n });\n\n // unhide the filters buttons\n filtersButtons.forEach((button) => {\n button.classList.remove(hideClass);\n });\n }\n });\n}\n\nfunction toggleMapView(btnEl = null) {\n if (btnEl) {\n btnEl.classList.toggle('active');\n }\n const mapContainer = getMapContainer();\n const currentListingsTab = getCurrentlyVisibleListingsTab();\n const listContainer = getCurrentlyVisibleListingsContainer();\n const hideClass = 'ubs-page--hidden';\n const currentTabName = getCurrentlyVisibleTabName();\n const seeMoreWrapper = getSeeMoreWrapper(currentTabName);\n const header = getHeader();\n const noTabs = document\n .querySelector('[data-ubs-layout-wrapper]')\n .classList.contains('no-tabs');\n const tabs = getTabsContainer();\n const filtersButtons = getRevealFiltersButtons();\n\n mapContainer.classList.toggle('show');\n currentListingsTab.classList.toggle('map-present');\n listContainer.classList.toggle(hideClass);\n if (seeMoreWrapper) {\n seeMoreWrapper.classList.toggle(hideClass);\n }\n header.classList.toggle(hideClass);\n if (!noTabs) {\n tabs.classList.toggle(hideClass);\n }\n document.body.classList.toggle('ubs-page--disable-scroll');\n\n // ios fix\n const wrappers = document.querySelectorAll('[data-ubs-filters]');\n wrappers.forEach((wrapper) => {\n wrapper.classList.toggle('hide-overflow');\n });\n\n // hide the filters buttons when we open the map\n filtersButtons.forEach((button) => {\n button.classList.toggle(hideClass);\n });\n}\n\nexport { toggleMapView, setUpShowHideMapButton };\n","import { getUbsMain } from '@/components/ubs/elementUtils';\n\nconst UBS_USER_LOCATION_KEY = 'ubsUserLocation';\nconst UBS_GEOLOCATION_KEY = 'ubsGeolocation';\nconst EXPIRY_TIME = 60 * 60 * 1000; // 60 minutes in milliseconds\n\nfunction userLocationKey() {\n const groupId = getUbsMain().dataset.ubsGroupId;\n return `${UBS_USER_LOCATION_KEY}-${groupId}`;\n}\n\nfunction geolocationKey() {\n const groupId = getUbsMain().dataset.ubsGroupId;\n return `${UBS_GEOLOCATION_KEY}-${groupId}`;\n}\n\n/**\n * Updates localstorage with the user's most recent search location\n */\nfunction setStoredUserLocation(latitude, longitude, cityId) {\n const locationInfo = {\n lat: latitude,\n lng: longitude,\n cityId,\n timestamp: Date.now(),\n };\n\n window.localStorage.setItem(userLocationKey(), JSON.stringify(locationInfo));\n}\n\nfunction deleteStoredUserLocation() {\n window.localStorage.removeItem(userLocationKey());\n}\n\n/**\n * Returns the user\n * @return {{}}\n */\nfunction getStoredUserLocation() {\n let userLocationInfo = window.localStorage.getItem(userLocationKey());\n\n userLocationInfo = JSON.parse(userLocationInfo);\n\n if (userLocationInfo === null || userLocationInfo === undefined) {\n return {};\n }\n\n return userLocationInfo;\n}\n\n/**\n * Checks if the stored user location has expired\n * @return {boolean}\n */\nfunction isUserLocationExpired() {\n const userLocationInfo = getStoredUserLocation();\n if (!userLocationInfo) {\n return true;\n }\n if (!userLocationInfo.timestamp) {\n return true;\n }\n const currentTime = Date.now();\n return currentTime - userLocationInfo.timestamp > EXPIRY_TIME;\n}\n\nfunction storeGeolocationData(latitude, longitude) {\n const locationInfo = {\n lat: latitude,\n lng: longitude,\n };\n window.localStorage.setItem(geolocationKey(), JSON.stringify(locationInfo));\n}\n\nfunction getGeolocationData() {\n let userLocationInfo = window.localStorage.getItem(geolocationKey());\n userLocationInfo = JSON.parse(userLocationInfo);\n\n if (userLocationInfo === null || userLocationInfo === undefined) {\n return {};\n }\n\n return userLocationInfo;\n}\n\nexport {\n setStoredUserLocation,\n getStoredUserLocation,\n deleteStoredUserLocation,\n storeGeolocationData,\n getGeolocationData,\n isUserLocationExpired,\n};\n","import {\n getMapComponent,\n getSearchSubmitBtn,\n getTabsContainer,\n getUbsMain,\n} from '@/components/ubs/elementUtils';\n\nexport function removeAllMapMarkers() {\n const map = getMapComponent();\n map.clearMarkers();\n}\n\nexport function displayCalendar() {\n const calendar = document.querySelector('.ubs-page__search');\n if (calendar) {\n calendar.classList.remove('ubs-page__search--no-calendar');\n }\n const mobileCalendar = document.querySelector('.ubs-page__mobile-search');\n if (mobileCalendar) {\n mobileCalendar.classList.remove('ubs-page__mobile-search--no-calendar');\n }\n}\n\nexport function hideCalendar() {\n const calendar = document.querySelector('.ubs-page__search');\n if (calendar) {\n calendar.classList.add('ubs-page__search--no-calendar');\n }\n const mobileCalendar = document.querySelector('.ubs-page__mobile-search');\n if (mobileCalendar) {\n mobileCalendar.classList.add('ubs-page__mobile-search--no-calendar');\n }\n}\n\nexport function hideSearchButton() {\n const button = getSearchSubmitBtn();\n button.classList.add('ubs-page--hidden');\n}\n\nexport function showTabsContainer() {\n const tabsContainer = getTabsContainer();\n if (tabsContainer) {\n tabsContainer.classList.remove('ubs-page--hidden');\n }\n}\n\nexport function hideTabsContainer() {\n const tabsContainer = getTabsContainer();\n if (tabsContainer) {\n tabsContainer.classList.add('ubs-page--hidden');\n }\n}\n\nexport function isInitialLoad() {\n const initialLoad = getUbsMain().dataset.ubsInitialLoad;\n return !!initialLoad;\n}\n\nexport function unsetInitialLoad() {\n getUbsMain().dataset.ubsInitialLoad = false;\n}\n","import { loadSlots } from '@/components/ubs/bookingTimes';\nimport {\n getCityIdField,\n getCitySearchFields,\n getCurrentSearchDate,\n getListingsUrl,\n getLocationsListingsTab,\n getMapContainer,\n getParamFromURL,\n getProvidersListingsTab,\n getSearchSubmitBtn,\n getVisitTypeIdHiddenField,\n updateCurrentUrl,\n getUbsMain,\n argPresent,\n getVisitTypeSearch,\n getHeader,\n openInSameTab,\n} from '@/components/ubs/elementUtils';\nimport setUpDropdownMenus from '@/components/ubs/controllers/dropdownController';\nimport { setUpFilterButtons } from '@/components/ubs/controllers/filterButtonsController';\nimport {\n showClinics,\n showProviders,\n} from '@/components/ubs/controllers/tabsController';\nimport {\n setUpShowHideMapButton,\n toggleMapView,\n} from '@/components/ubs/controllers/showHideMapButtonController';\nimport { resetDaysOnPicker } from '@/components/ubs/controllers/datepickerController';\nimport {\n getStoredUserLocation,\n isUserLocationExpired,\n} from '@/components/ubs/locationPersistenceUtils';\nimport { setMainSegmentProperties } from '@/components/ubs/segmentTrackingUtils';\n\nimport {\n removeAllMapMarkers,\n displayCalendar,\n isInitialLoad,\n unsetInitialLoad,\n hideSearchButton,\n showTabsContainer,\n hideCalendar,\n hideTabsContainer,\n} from '@/components/ubs/controllers/searchCallbacks';\n\nconst submitBtn = getSearchSubmitBtn();\nconst visitTypeSearch = getVisitTypeSearch();\nconst visitTypeIdHiddenField = getVisitTypeIdHiddenField();\nconst cityFields = getCitySearchFields();\nconst cityIdField = getCityIdField();\n\nexport const submitSearch = async () => {\n const searchUrl = buildSearchUrl();\n preparePageForSearch();\n const resp = await fetch(searchUrl, {\n method: 'GET',\n });\n const json = await resp.json();\n preparePageToRenderListings();\n renderListings(json);\n updatePageAfterListingRender(json);\n setMainSegmentProperties(json.properties);\n};\n\n/**\n *\n * @param message {string}\n * @return {string}\n */\nexport function progressWrapper(message) {\n return `
\n
\n \n
\n
${message}
\n
`;\n}\n\nfunction buildSearchUrl() {\n const searchParams = getSearchParams();\n const searchUrl = new URL(getListingsUrl());\n for (const [key, value] of Object.entries(searchParams)) {\n if (argPresent(value)) {\n searchUrl.searchParams.append(key, value);\n }\n }\n return searchUrl;\n}\n\nfunction getSearchParams() {\n let searchParams = {};\n\n addUserLocationToParams(searchParams);\n // update the current url to maintain state.\n updateCurrentUrl(searchParams);\n\n const ubsMain = getUbsMain();\n\n const cityName = cityFields[0].innerText;\n const date = getCurrentSearchDate();\n let visitTypeId = ubsMain.dataset.ubsVisitTypeId;\n\n if (visitTypeIdHiddenField && visitTypeSearch) {\n visitTypeId = visitTypeIdHiddenField.value;\n }\n\n return {\n ...searchParams,\n searchQuery: cityName,\n visitTypeId: visitTypeId,\n reasonForVisit: ubsMain.dataset.reason,\n date: date,\n gaSessionId: ubsMain.dataset.gaSessionId,\n gaClientId: ubsMain.dataset.gaClientId,\n bypass_cache: getParamFromURL('bypass_cache'),\n lang: getParamFromURL('lang'),\n initialLoad: isInitialLoad(),\n openInSameTab: openInSameTab(),\n };\n}\n\nfunction addUserLocationToParams(params) {\n const storedUserLocationInfo = getStoredUserLocation();\n let cityLat = getParamFromURL('lat');\n let cityLng = getParamFromURL('lng');\n const cityId = cityIdField.value;\n\n if (\n storedUserLocationInfo.lat &&\n storedUserLocationInfo.lng &&\n !isUserLocationExpired()\n ) {\n cityLat = storedUserLocationInfo.lat;\n cityLng = storedUserLocationInfo.lng;\n }\n\n params.lat = cityLat;\n params.lng = cityLng;\n\n if (cityId !== '' && cityId !== undefined) {\n params.city_id = cityId;\n }\n params;\n}\n\nfunction preparePageForSearch() {\n // remove the initial load status\n if (isInitialLoad()) {\n unsetInitialLoad();\n }\n\n submitBtn.classList.add('loading');\n submitBtn.innerText = '';\n submitBtn.disabled = true;\n\n getLocationsListingsTab().innerHTML = progressWrapper(\n 'Searching for clinics...',\n );\n getProvidersListingsTab().innerHTML = progressWrapper(\n 'Searching for providers...',\n );\n removeAllMapMarkers();\n\n const mapContainer = getMapContainer();\n\n if (window.innerWidth < 750 && mapContainer.classList.contains('show')) {\n mapContainer.classList.remove('show');\n }\n}\n\nfunction preparePageToRenderListings() {\n submitBtn.classList.remove('loading');\n submitBtn.innerText = 'Search';\n submitBtn.disabled = false;\n}\n\nfunction renderListings(json) {\n if (!json) {\n console.error('Could not return locations');\n return;\n }\n\n getLocationsListingsTab().innerHTML = json.locations.data;\n\n // hide practitioners tab if there are none\n if (json.practitioners.practitioners_present) {\n showTabsContainer();\n // remove the border bottom from the header\n getHeader().classList.remove('header-border');\n const wrapper = document.querySelector('[data-ubs-layout-wrapper]');\n wrapper.classList.remove('no-tabs');\n getProvidersListingsTab().innerHTML = json.practitioners.data;\n } else {\n hideTabsContainer();\n // remove the border bottom from the header\n getHeader().classList.add('header-border');\n const wrapper = document.querySelector('[data-ubs-layout-wrapper]');\n wrapper.classList.add('no-tabs');\n getProvidersListingsTab().innerHTML = json.practitioners.data;\n showClinics();\n }\n\n if (json.display_calendar) {\n displayCalendar();\n getUbsMain().dataset.displayCalendar = true;\n } else {\n hideCalendar();\n getUbsMain().dataset.displayCalendar = false;\n }\n\n const citiesDropdownActivator = document.querySelector(\n '[data-ubs-dropdown-activator=\"cities-search\"]',\n );\n const citiesMobileMenuActivator = document.querySelector(\n '[data-ubs-mobile-popup-id=\"city\"]',\n );\n if (json.show_cities_dropdown) {\n // enable the activators\n citiesDropdownActivator.classList.remove('disabled');\n citiesMobileMenuActivator.classList.remove('disabled');\n } else {\n const citiesDropdownMenu = document.querySelector(\n '[data-ubs-dropdown-menu=\"cities-search\"]',\n );\n citiesDropdownMenu.classList.add('ubs-page--hidden');\n // disable the activators\n citiesDropdownActivator.classList.add('disabled');\n citiesMobileMenuActivator.classList.add('disabled');\n }\n\n if (\n !json.practitioners.practitioners_present &&\n !json.show_cities_dropdown &&\n !json.display_calendar\n ) {\n // if we don't have any menus, don't show the search\n hideSearchButton();\n }\n}\n\nfunction updatePageAfterListingRender(json) {\n const newCityCoords = json.city_data.latlng;\n const slot = document.querySelector('.ubs-widget-card');\n\n if (slot) {\n // reinit the buttons and dropdowns for the filters, as well as the current location options\n setUpFilterButtons();\n setUpDropdownMenus('filters-menu-locations');\n setUpDropdownMenus('filters-menu-practitioners');\n setUpShowHideMapButton();\n }\n\n resetDaysOnPicker();\n\n //set up the js for the listing cards like the pagination buttons\n if (slot) {\n loadSlots();\n }\n\n const cards = document.querySelectorAll('.ubs-widget-card');\n if (cards) {\n const mapboxMap = document.querySelector('mapbox-map');\n const map = mapboxMap.mapObject;\n mapboxMap.clearMarkers();\n mapboxMap.locations = cards;\n\n // set the center\n mapboxMap.center = newCityCoords;\n\n if (json.set_page_to_provider_tab) {\n showProviders();\n map.flyTo({\n center: newCityCoords,\n essential: true,\n zoom: 5,\n });\n } else {\n map.flyTo({\n center: newCityCoords,\n essential: true,\n zoom: 10,\n });\n }\n // If we are on mobile, we check to see if we want to default to map view\n if (\n getUbsMain().dataset.ubsMobileMap == 'true' &&\n window.innerWidth < 766\n ) {\n const tabs = document.querySelectorAll('[data-ubs-listings-tab]');\n const visibleTab = Array.from(tabs).filter(\n (tab) => tab.classList.contains('ubs-page--hidden') === false,\n )[0];\n const buttonToToggle = visibleTab.querySelector('[data-ubs-map-button]');\n toggleMapView(buttonToToggle);\n const marker = markers[0];\n marker.togglePopup();\n }\n }\n}\n","import {\n getMobilePopup,\n getMobilePopupCloseButton,\n getMobilePopupControllers,\n showMobilePopupForm,\n} from '@/components/ubs/elementUtils';\n\nfunction disableScroll() {\n document.body.classList.add('ubs-page--disable-scroll');\n}\n\nfunction enableScroll() {\n document.body.classList.remove('ubs-page--disable-scroll');\n}\n\n/**\n * Opens the mobile search modal\n * @param mobileFormId {string} the form id.\n * There are three different forms: cities, type of visit, and date. This param indicates which form to show.\n */\nfunction openPopup(mobileFormId) {\n const popup = getMobilePopup();\n popup.showModal();\n disableScroll();\n showMobilePopupForm(mobileFormId);\n // this is to remove some weird behavior for focus when we open the modal, focus on first button in the form\n popup.querySelector('.dropdown-wrapper').querySelector('button').focus();\n}\n\n/**\n * Closes the search modal\n */\nfunction closePopup() {\n const popup = getMobilePopup();\n enableScroll();\n popup.close();\n}\n\n/**\n * Set up the close, hide and show behaviors of the different parts of the modal\n */\nfunction setUpModalBehavior() {\n const popupCloseBtn = getMobilePopupCloseButton();\n const mobilePopupControllers = getMobilePopupControllers();\n\n mobilePopupControllers.forEach((popupController) => {\n popupController.addEventListener('click', (e) => {\n // this conditional is here because of the \"where to find us\" link needs to open the mobile search menu if on mobile or the dropdown if on desktop\n if (\n window.innerWidth <= 750 &&\n !popupController.classList.contains('disabled')\n ) {\n const mobileFormId = popupController.dataset.ubsMobilePopupId;\n openPopup(mobileFormId);\n }\n });\n });\n\n popupCloseBtn.addEventListener('click', (e) => {\n closePopup();\n });\n\n window.addEventListener('resize', (e) => {\n if (window.innerWidth >= 750) {\n closePopup();\n }\n });\n}\n\nfunction setUpMobileSearch() {\n setUpModalBehavior();\n}\n\nexport { setUpMobileSearch, closePopup };\n","import { submitSearch } from '@/components/ubs/controllers/ubsSearchController';\nimport {\n formatDate,\n getCitySelectOptions,\n getDateHiddenFields,\n getDateSearchFields,\n getPopupControllerById,\n getVisitTypeHiddenField,\n getVisitTypeInputFields,\n getVisitTypeMenuOptions,\n updateCurrentUrl,\n getUbsMain,\n getVisitTypeSearch,\n getSearchSubmitBtn,\n getCitySearchFields,\n getVisitTypeIdHiddenField,\n getCityIdField,\n} from '@/components/ubs/elementUtils';\nimport { closePopup } from '@/components/ubs/controllers/mobileSearchController';\nimport {\n setStoredUserLocation,\n deleteStoredUserLocation,\n getGeolocationData,\n} from '@/components/ubs/locationPersistenceUtils';\nimport { manuallyTrackSegmentEvent } from '@/components/ubs/segmentTrackingUtils';\nimport { loadSlots } from '@/components/ubs/bookingTimes';\n\nconst visitTypeSearch = getVisitTypeSearch();\nconst visitTypeHiddenField = getVisitTypeHiddenField();\nconst submitBtn = getSearchSubmitBtn();\nconst cityFields = getCitySearchFields();\nconst cityIdField = getCityIdField();\n\nexport function setUpSearch() {\n setUpCitySearch();\n if (visitTypeSearch) {\n setUpTypeOfVisit();\n }\n setUpDateSelect();\n\n submitBtn.addEventListener('click', (e) => {\n if (submitBtn.disabled === false) {\n e.preventDefault();\n submitSearch();\n }\n });\n}\n\n/**\n * Sets the values of the date fields on desktop and mobile searches to the value selected on the datepicker\n */\nfunction setUpDateSelect() {\n const hiddenDateFields = getDateHiddenFields();\n hiddenDateFields.forEach((field) => {\n field.addEventListener('change', (e) => {\n const parsedDate = formatDate(e.target.value);\n updateDateSearchFields(parsedDate);\n // when a user clicks on the option, automatically submit the search, but only on mobile\n if (field.dataset.picker === 'mobile-search') {\n closePopup();\n }\n loadSlots(true);\n manuallyTrackSegmentEvent({ selectDate: true });\n });\n });\n}\n\n/**\n *\n * @param date {string}\n */\nfunction updateDateSearchFields(date) {\n const fields = getDateSearchFields();\n fields.forEach((field) => {\n field.innerText = date;\n field.classList.add('input-info');\n });\n\n const mobileSearchField = getPopupControllerById('date');\n mobileSearchField.innerText = date;\n}\n\n/**\n * Set up the type of visit options in the dropdown\n * Invokes the setUpVisitOption function for setting up the options\n */\nfunction setUpTypeOfVisit() {\n const visitTypeOptions = getVisitTypeMenuOptions();\n const visitTypeFields = getVisitTypeInputFields();\n visitTypeOptions.forEach((option) => {\n const isMobile =\n option.dataset.ubsMobileSearchVisitTypeOption !== undefined;\n setUpVisitOption(option, visitTypeFields, isMobile);\n });\n}\n\n/**\n * Set up the city search\n * When the user selects one of the city options, a few things happen:\n * The inner text for the city field gets updated along with its color by adding a class\n * The inner text on the mobile search bar gets updated\n * The value of the hidden field containing the city id is updated\n */\nfunction setUpCitySearch() {\n const citySelectOptions = getCitySelectOptions();\n citySelectOptions.forEach((option) => {\n option.addEventListener('click', (e) => {\n cityFields.forEach((field) => {\n field.innerText = option.dataset.cityName;\n field.classList.add('input-info');\n });\n const mobileSearchField = getPopupControllerById('city');\n mobileSearchField.innerText = option.dataset.cityName;\n\n const cityId = option.dataset.cityId;\n\n // If cityId is present, set the user's location to the city. If no cityId is present, they have selected \"Current Location\"\n if (cityId && cityId !== '' && cityId !== undefined) {\n cityIdField.value = cityId;\n const cityLat = option.dataset.cityLat;\n const cityLng = option.dataset.cityLng;\n setStoredUserLocation(cityLat, cityLng, cityId);\n } else {\n const geolocationData = getGeolocationData();\n if (geolocationData.lat && geolocationData.lng) {\n updateCurrentUrl(geolocationData);\n } else {\n updateCurrentUrl({});\n }\n\n deleteStoredUserLocation();\n cityIdField.value = '';\n }\n\n // close the mobile search popup only on mobile\n if (option.dataset.ubsMobileCitySelectOption !== undefined) {\n closePopup();\n }\n\n manuallyTrackSegmentEvent({ selectLocation: true });\n\n // when a user clicks on the option, automatically submit the search\n submitSearch();\n });\n });\n}\n\n/**\n * When the user selects one of the radio buttons, a few things happen:\n * The visit type's search field inner text updates to match the selection\n * The hidden fields that hold the values of the name and id of the visit type get updated\n * The color of the text is changed by adding a css class to the search field\n * Submits the form upon selecting an option on both desktop and mobile\n * @param option {}\n * @param visitTypeFields {}\n * @param isMobile {boolean}\n */\nfunction setUpVisitOption(option, visitTypeFields, isMobile) {\n let eventName = 'input';\n if (isMobile) {\n eventName = 'click';\n }\n const visitTypeIdHiddenField = getVisitTypeIdHiddenField();\n\n option.addEventListener(eventName, (e) => {\n visitTypeFields.forEach((field) => {\n field.innerText = option.dataset.visitTypeName;\n field.classList.add('input-info');\n });\n\n visitTypeIdHiddenField.value = option.dataset.visitTypeId;\n visitTypeHiddenField.value = option.dataset.visitTypeName;\n\n const mobileSearchField = getPopupControllerById('visit-type');\n mobileSearchField.innerText = option.dataset.visitTypeName;\n\n if (isMobile) {\n closePopup();\n }\n\n delete getUbsMain().dataset.reason;\n manuallyTrackSegmentEvent({ selectVisitType: true });\n\n // when a user clicks on the option, automatically submit the search\n submitSearch();\n });\n}\n","import StateService from '@/components/ubs/services/stateService';\n\n// import components\nimport './components/MapboxMap.js';\n\nimport setUpDropdownMenus from '@/components/ubs/controllers/dropdownController';\nimport { setUpFilterButtons } from '@/components/ubs/controllers/filterButtonsController';\nimport { setUpTabsButtons } from '@/components/ubs/controllers/tabsController';\nimport { setUpSearch } from '@/components/ubs/controllers/searchSetup';\nimport { setUpMobileSearch } from '@/components/ubs/controllers/mobileSearchController';\nimport { setUpDatepickers } from '@/components/ubs/controllers/datepickerController';\nimport {\n progressWrapper,\n submitSearch,\n} from '@/components/ubs/controllers/ubsSearchController';\nimport {\n appendParam,\n currentWindowHasLocationParams,\n getCardsControllers,\n getMapComponent,\n} from '@/components/ubs/elementUtils';\nimport {\n getStoredUserLocation,\n isUserLocationExpired,\n storeGeolocationData,\n} from '@/components/ubs/locationPersistenceUtils';\n\nconst GEOLOCATION_PENDING = 'UbsGeolocationPending';\n\nclass App {\n constructor() {\n // register services here\n // TODO: refactor controllers into service classes\n this.stateService = StateService;\n }\n\n async initialize() {\n this.updateHeaderLogos();\n this.browserHasGeolocation = 'geolocation' in navigator;\n\n // TODO: refactor these for their own respective classes\n setUpDropdownMenus();\n setUpFilterButtons();\n setUpTabsButtons();\n setUpSearch();\n setUpMobileSearch();\n setUpDatepickers();\n\n // TODO: refactor because ugly\n const mapViewEl = getMapComponent();\n const lookup = mapViewEl.dataset.lookup != 'false';\n if (this.browserHasGeolocation && lookup) {\n this.stateService.setState(GEOLOCATION_PENDING, true);\n } else {\n console.log(\n 'Browser does not support geolocation or location is already set',\n );\n this.stateService.setState(GEOLOCATION_PENDING, false);\n }\n\n // lookup is true if there is no lat / lng or city_id in the url params\n const cardsContainers = getCardsControllers();\n cardsContainers.forEach((container) => {\n container.innerHTML = progressWrapper('Getting clinics nearest to you');\n });\n\n const storedUserLocation = getStoredUserLocation();\n\n if (\n storedUserLocation &&\n storedUserLocation.lat &&\n storedUserLocation.lng &&\n !currentWindowHasLocationParams() &&\n !isUserLocationExpired()\n ) {\n const lat = storedUserLocation.lat;\n const lng = storedUserLocation.lng;\n this.redirectToUserLocation(lat, lng);\n } else {\n this.initiateGeolocation();\n }\n\n if (this.stateService.getState(GEOLOCATION_PENDING) === false) {\n submitSearch();\n }\n }\n\n updateHeaderLogos() {\n const logo = document.querySelector('[data-ubs-group-logo]');\n const bookAVisit = document.querySelector('[data-ubs-book-visit-headline]');\n\n if (this.isIframed()) {\n if (logo) {\n logo.classList.remove('ubs-page--hidden');\n bookAVisit.remove();\n }\n } else {\n if (logo) {\n logo.classList.add('ubs-page--hidden');\n bookAVisit.classList.remove('ubs-page--hidden');\n }\n }\n }\n\n isIframed() {\n return window.location === window.parent.location;\n }\n\n initiateGeolocation() {\n if (this.browserHasGeolocation && this.mapLookup) {\n // Geolocate and update page on page load\n this.usePreciseLocation();\n } else {\n this.stateService.setState(GEOLOCATION_PENDING, false);\n }\n }\n\n /**\n * Geolocates user and updates page based off user's location preferences.\n *\n * @returns { void }\n */\n usePreciseLocation() {\n this.getLocation()\n .then(async (data) => {\n // reload the page to get the new location as center with closest locations\n const { latitude, longitude } = data.coords;\n storeGeolocationData(latitude, longitude);\n this.redirectToUserLocation(latitude, longitude);\n })\n .catch((err) => {\n submitSearch();\n });\n }\n\n /**\n * Redirect the user based on the coordinates from their geolocation or most recent search, stored in localstorage\n * @param lat\n * @param lng\n */\n redirectToUserLocation(lat, lng) {\n const redirectUrl = new URL(window.location.href);\n appendParam(redirectUrl, 'lat', lat);\n appendParam(redirectUrl, 'lng', lng);\n appendParam(redirectUrl, 'geo', true);\n window.location.href = redirectUrl;\n }\n\n /**\n * Initializes browser's geolocation request and resolve/reject with the response\n *\n * @returns { Promise