{"version":3,"file":"autocompleteController-0181b105.js","sources":["../../../../app/frontend/components/shared/controllers/autocompleteController.js"],"sourcesContent":["import { debounce } from 'lodash';\nimport { trackSegmentEvent, getContextProperties, getElementProperties } from '~/components/shared/tracking/segmentAnalytics';\n\n// these need to be outside the controllerElement loop scope in order to keep track of data selected from the inputs\nconst submitBtns = document.querySelectorAll('[data-target=\"submit-btn\"]');\nlet apiSelection = null;\nlet locationSelection = null;\nconst directoryInput = document.querySelector('[data-search-input=\"directory\"]');\nconst locationInput = document.querySelector('[data-search-input=\"city\"]');\n\nconst defaultSuggestions = [\n {\n \"type\": \"keyword\",\n \"name\": \"Urgent Care\",\n \"id\": \"kwidx_provider_type_uc\",\n },\n {\n \"type\": \"service\",\n \"name\": \"Rapid COVID test\",\n \"id\": \"Olq1m9,Ord20g_rapid_covid_test_urgent_care\",\n },\n {\n \"type\": \"service\",\n \"name\": \"COVID test\",\n \"id\": \"9nvZo9,Olq1m9,Ord20g,p3MME9,pPooAg,pvN7yp_covid_test_urgent_care\",\n },\n {\n \"type\": \"service\",\n \"name\": \"Flu Shot\",\n \"id\": \"n9wG9K_flu_shot_urgent_care\",\n },\n {\n \"type\": \"symptom\",\n \"name\": \"Fever\",\n \"id\": \"urgent_care_Fever_Fever\",\n },\n {\n \"type\": \"symptom\",\n \"name\": \"Urinary tract infection\",\n \"id\": \"urgent_care_Uti_Urinary_tract_infection\",\n },\n {\n \"type\": \"symptom\",\n \"name\": \"Flu, cold, or cough\",\n \"id\": \"\",\n },\n {\n \"type\": \"symptom\",\n \"name\": \"Ear ache\",\n \"id\": \"\",\n },\n {\n \"type\": \"symptom\",\n \"name\": \"Rash\",\n \"id\": \"urgent_care_Rash_Rash\",\n },\n {\n \"type\": \"symptom\",\n \"name\": \"Sore throat\",\n \"id\": \"urgent_care_Sore_throat_Sore_throat\",\n },\n];\n\n// data tracking for autocomplete\nsubmitBtns.forEach(btn => {\n btn.addEventListener('click', (e) => {\n trackSegmentEvent('Directory Search CTA Clicked', {\n ...getContextProperties(),\n ...getElementProperties(btn),\n action: 'clicked',\n });\n });\n});\nif (directoryInput) {\n directoryInput.addEventListener('click', (e) => {\n trackSegmentEvent('Directory Search Selector Clicked', {\n ...getContextProperties(),\n action: 'clicked',\n });\n });\n}\nif (locationInput) {\n locationInput.addEventListener('click', (e) => {\n trackSegmentEvent('Directory Search Location Clicked', {\n ...getContextProperties(),\n action: 'clicked',\n });\n });\n}\n\ndocument.querySelectorAll('[data-controller=\"autocomplete\"]')\n .forEach(controllerElement => {\n const idInputTarget = controllerElement.querySelector('[data-autocomplete-target=\"id-input\"]');\n const suggestionsTarget = controllerElement.querySelector('[data-autocomplete-target=\"suggestions\"]');\n const autocompleteInputTarget = controllerElement.querySelector('[data-autocomplete-target=\"autocomplete-input\"]');\n const searchPathValue = controllerElement.dataset.autocompleteSearchPathValue;\n const queryKeyValue = controllerElement.dataset.autocompleteQueryKeyValue;\n const selectedClass = 'results__item--selected';\n let results = [];\n\n // change this to an env variable\n const baseUrl = \"https://solvhealth.com/r/search\";\n let type = \"\";\n let name = \"\";\n let serviceIds = \"\";\n let location = \"\";\n let lat = \"\";\n let lng = \"\";\n let state = \"\";\n\n const buildQueryString = (query) => `${searchPathValue}?${queryKeyValue}=${query}`;\n\n const parameterizeQueryString_1 = (string) => {\n let temp = string;\n return temp.replace(/\\s+/g, '-').toLowerCase();\n }\n\n const parameterizeQueryString_2 = (string) => {\n let temp = string;\n return encodeURIComponent(temp).replace('%20', '+');\n }\n\n const setSearchButtonHref = (href) => {\n // submitBtn.setAttribute('href', href);\n submitBtns.forEach(btn => btn.setAttribute('href', href));\n }\n\n const buildSRPUrl = () => {\n\n if (apiSelection !== null) {\n type = apiSelection.dataset.type;\n name = apiSelection.dataset.name;\n serviceIds = apiSelection.dataset.id;\n }\n\n if (locationSelection !== null) {\n location = locationSelection.dataset.name;\n lat = locationSelection.dataset.coordLat;\n lng = locationSelection.dataset.coordLong;\n state = locationSelection.dataset.state;\n }\n\n //begin building the url\n let href = `${baseUrl}?patient=adult`;\n\n if (type === \"symptom\") {\n href += `&query=${parameterizeQueryString_2(name)}`;\n }\n else if (type === \"service\") {\n href += `&query=${parameterizeQueryString_2(name)}&service_ids=${parameterizeQueryString_2(serviceIds)}`;\n }\n else if (type === \"location\") { // the type called location is different from the city selected from the second input\n state = apiSelection.dataset.state;\n href = `https://www.solvhealth.com/${parameterizeQueryString_1(name)}-${state}-${serviceIds}`;\n window.location = href; // redirect to the location page upon selection\n }\n else {\n if (apiSelection !== null)\n href += `&query=${parameterizeQueryString_2(name)}`;\n else if (directoryInput.value !== \"\") {\n href += `&query=${parameterizeQueryString_2(directoryInput.value)}`;\n }\n else\n href += `&query=Urgent+Care`;\n }\n\n // add the rest of the parameters\n href += `&time=asap&modality=any`;\n\n if (location !== \"\")\n href += `&location=${parameterizeQueryString_2(location)}&lat=${lat}&lng=${lng}`;\n else\n href += `&location=&lat=&lng=`; // when the user is redirected, the solv app will automatically use the user's location in the browser, so we can leave these blank\n\n if (state !== \"\")\n href += `&state=${state}`;\n\n setSearchButtonHref(href);\n }\n\n // in case the user types in but does not select anything from the menu\n if (directoryInput) {\n directoryInput.addEventListener('input', (e) => {\n buildSRPUrl();\n });\n }\n const closeSuggestionsPanel = () => {\n suggestionsTarget.parentElement.classList.add('autocomplete__results--hidden');\n }\n\n const onClickOutside = (e) => {\n e.stopPropagation();\n const isOutside = !controllerElement.contains(e.target) && e.target !== controllerElement;\n if (isOutside) {\n closeSuggestionsPanel();\n document.removeEventListener('click', onClickOutside)\n }\n }\n\n const getSelectedResult = () => {\n if (results.length === 0) {\n return null;\n }\n return suggestionsTarget.querySelector(`.${selectedClass}`);\n }\n\n const setSelection = (index) => {\n getSelectedResult()?.classList.remove(selectedClass);\n if (index > -1) {\n const newSelection = suggestionsTarget.querySelector(`[data-index='${index}']`);\n newSelection.classList.add(selectedClass);\n idInputTarget.value = newSelection.dataset.id;\n autocompleteInputTarget.value = newSelection.dataset.name;\n }\n }\n\n const onResultClick = (e) => {\n let selection = e.target;\n // there are divs and img inside the results, so we need to check if the user clicked on those instead of the li\n if (e.target.tagName === 'DIV' || e.target.tagName === 'IMG')\n selection = e.target.parentElement;\n\n const index = parseInt(selection.dataset.index);\n setSelection(index);\n\n // we need to set the global variables in order to use them in the buildSRPUrl function for building the url\n if (selection.dataset.location)\n locationSelection = selection;\n else\n apiSelection = selection;\n\n if (directoryInput) {\n buildSRPUrl();\n }\n\n closeSuggestionsPanel();\n }\n\n const openSuggestionsPanel = () => {\n suggestionsTarget.parentElement.classList.remove('autocomplete__results--hidden');\n document.addEventListener('click', onClickOutside)\n }\n\n const addHandlersToSuggestions = () => {\n suggestionsTarget.querySelectorAll('.results__item')\n .forEach(el => {\n el.addEventListener('click', onResultClick)\n el.addEventListener('keyup', e => {\n if (e.key === 'Enter' || e.key === 'Return') {\n onResultClick(e);\n }\n })\n });\n }\n\n const buildAPISuggestionHTML = (suggestion, index) => {\n if (suggestion.name === \"Urgent Care\") {\n return `