//widgetType: 'Basic' (props) => { const [inputValue1, setInputValue1] = useState(''); const [inputValue2, setInputValue2] = useState(''); const [activeDropdown, setActiveDropdown] = useState(null); const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); const [isSearchOpen, setIsSearchOpen] = useState(false); const [showTypeahead, setShowTypeahead] = useState(false); const [suggestions, setSuggestions] = useState([]); const [showSuggestions, setShowSuggestions] = useState(false); const [loading, setLoading] = useState(false); const [locationOptions, setLocationOptions] = useState([]); const [isLocationLoading, setIsLocationLoading] = useState(false); const [location, setLocation] = useState(''); const debounceTimeoutRef = useRef(null); const router = useRouter() const navigationItems = [ { label: 'Working here', hasDropdown: false, link: '/working-here' }, { label: 'Career opportunities & growth', hasDropdown: false, link: '/career-opportunities-growth' }, { label: 'Students & grads', hasDropdown: true, link: '#', subItems: [ { label: 'Student programs', link: '/students' }, { label: 'Graduate careers', link: '/banfield-new-opportunities' }, ] }, { label: 'Locations', hasDropdown: false, link: '/locations' }, { label: 'Meet & connect', hasDropdown: true, link: '#', subItems: [ { label: 'Meet the team', link: '/meet-the-team' }, { label: 'Events', link: '/banfield-events' }, // { label: 'Blogs', link: '#' } ] }, // { label: 'Job alerts', hasDropdown: false, link: '/jobs' }, { label: 'Saved jobs', hasDropdown: false, link: '/saved-jobs', isHighlighted: true } ]; const debounce = (func, wait) => { let timeout; return function (...args) { clearTimeout(timeout); timeout = setTimeout(() => func(...args), wait); }; }; const handleTypeahead = useCallback(async (query) => { if (!query.trim()) { setSuggestions([]); setShowSuggestions(false); setLoading(false); return; } setLoading(true); setShowSuggestions(true); try { const params = new URLSearchParams({ field: 'title', value: query, type: 'STRING' }).toString(); const response = await fetch( `/jobs-api/v4/clients/0nx7468ahmnk6/jobs/type-ahead?${params}`, { method: 'POST', headers: { "Content-Type": "application/json", }, body: JSON.stringify({ filterIds: [] }), // required by your curl } ); if (!response.ok) { console.error('Typeahead API error:', response.status); setSuggestions([]); return; } const result = await response.json(); console.log("result", result); // const keywordData = result || []; const keywordData = Array.isArray(result) ? result.map(item => item.value) // extract only the value : []; // const uniqueSuggestions = [...new Set(keywordData)].slice(0, 4); setSuggestions(keywordData); console.log("suggestions", suggestions) } catch (error) { console.error('Error fetching suggestions:', error); setSuggestions([]); } finally { setLoading(false); } }, []); const debouncedTypeahead = useCallback( (query) => { if (debounceTimeoutRef.current) clearTimeout(debounceTimeoutRef.current); debounceTimeoutRef.current = setTimeout(() => handleTypeahead(query), 300); }, [handleTypeahead] ); const handleInputChange1 = (e) => { const value = e.target.value; setInputValue1(value); if (value.trim().length > 0) debouncedTypeahead(value); else { setSuggestions([]); setShowSuggestions(false); setLoading(false); } }; const handleSuggestionClick = (suggestion) => { setInputValue1(suggestion); setShowSuggestions(false); setSuggestions([]); }; const handleInputFocus = () => { if (suggestions.length > 0) setShowSuggestions(true); }; const handleInputBlur = () => { setTimeout(() => setShowSuggestions(false), 200); }; const onLocationTypeahead = useCallback( debounce(async (query) => { if (!query || query.length < 2) { setLocationOptions([]); setShowTypeahead(false); return; } setIsLocationLoading(true); setLocationOptions([]); try { const payload = { query: query.trim(), // 👈 what you type in the input bar level: "city", exp: true, size: 20, country: "us" }; const response = await fetch('/v2/locations/typeahead', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' }, body: JSON.stringify(payload) }); if (response.ok) { const data = await response.json(); const results = data || []; const formattedLocations = results.map( (loc) => `${loc.city || ''}, ${loc.state ||''}, ${loc.country || "" }--${loc.latitude || 0}--${loc.longitude || 0}` ); console.log("formattedLocations",formattedLocations, results, data) // const enriched = data.map(item => ({ // ...item, // value: `${item.city}, ${item.state}, ${item.country}`, // })); setLocationOptions(formattedLocations); // setLocationOptions(data); } else { const err = await response.text(); console.error('Typeahead error:', response.status, err); setLocationOptions([]); } } catch (error) { console.error('Location API error:', error); setLocationOptions([]); } finally { setIsLocationLoading(false); setShowTypeahead(true); } }, 400), [] ); const handleInputChange2 = (e) => { const value = e.target.value; setInputValue2(value); onLocationTypeahead(value); }; const handleLocationSelect = (location) => { setInputValue2(location.split('--')[0]); setLocation(location); setShowTypeahead(false); }; // const handleSearch = () => { // const params = new URLSearchParams(); // params.set("radius", 10); // params.set("page", 1); // // Keyword exists // if (inputValue1?.trim()) { // params.set("keyword", inputValue1.trim()); // } // // Location exists // if (location?.trim()) { // // const encodedLocation = encodeURIComponent( // // `${location}` // // ); // // Encode commas and replace spaces with + // // const encodedLocation = location.replace(/,/g, '%2C').replace(/ /g, '+'); // params.set("location", location); // } // // const queryString = params.toString(); // // const url = queryString ? `/jobs?${queryString}` : '/jobs'; // router.push(`/jobs?${params.toString()}`); // // router.push(url) // }; async function searchJobsAPI({ searchTerm, latitude, longitude, pageNumber = 0 }) { const body = { searchTerm, orderBy: [ { key: "startDate", entity: "job", order: "DESC", type: "DATE" } ], searchFields: { title: 10, country: 9, category: 8 }, filters: [ { field: "point", type: "GEO_LOCATION", entity: "job", operator: "GEO_LOCATION_WITHIN", combination: "OR", filterValue: { latitude, longitude, distance: 10, distanceUnit: "Miles" } } ], facetFields: ["category", "normalisedFields.city", "normalisedFields.state"], pageSize: 10, pageNumber, filterIds: [] }; const response = await fetch( "https://banfield-uat-h56cui.joveo.site/jobs-api/v2/clients/0nagj9yzd13eb/jobs/search", { method: "POST", headers: { "Content-Type": "application/json", "Accept": "*/*" }, body: JSON.stringify(body), credentials: "include" } ); return response.json(); } const handleSearch = async() => { const params = new URLSearchParams(); params.set("radius", 10); params.set("page", 1); // Only add keyword if it exists if (inputValue1?.trim()) { params.set("keyword", inputValue1.trim()); } // Only add location if it exists if (location?.trim()) { params.set("location", location); } console.log("location",location) // Build the final URL const queryString = params.toString(); const url = queryString ? `/jobs?${queryString}` : '/jobs'; const isJobsPage = window.location.pathname === "/jobs"; if (isJobsPage) { window.location.href = url; return; } else { // 🔄 Not on /jobs → navigate normally router.push(url); } // router.push(url); // normal navigation // router.push(url); }; // ---------- Navigation ---------- // const handleItemClick = (index, hasDropdown, link) => { // if (hasDropdown) setActiveDropdown(activeDropdown === index ? null : index); // else if (link) console.log('Navigate to:', link); // }; const handleItemClick = (index, hasDropdown, link) => { if (hasDropdown) { setActiveDropdown(activeDropdown === index ? null : index); } else if (link) { router.push(link); setIsMobileMenuOpen(false); setActiveDropdown(null); // Navigate to the link } }; const handleSubItemClick = (link) => { if (link) { router.push(link); setIsMobileMenuOpen(false); setActiveDropdown(null); // Navigate to the link } else{ setActiveDropdown(null);} }; const handleMobileMenuToggle = () => setIsMobileMenuOpen(!isMobileMenuOpen); const handleSearchToggle = () => setIsSearchOpen(!isSearchOpen); const handleClickOutside = useCallback((event) => { if (!event.target.closest('[data-dropdown-container]')) setActiveDropdown(null); }, []); useEffect(() => { document.addEventListener('click', handleClickOutside); return () => document.removeEventListener('click', handleClickOutside); }, [handleClickOutside]); return ( {/* Class of 2026: Banfield covers your final year tuition!{' '} Click to Learn More! */} {/* HEADER */} {/* LOGO */} {/* Banfield Pet Hospital

router.push('/')} /> */}

router.push('/')} style={{ height: '60px', width: '160px', backgroundImage: 'url("https://d3f70emg10ruwo.cloudfront.net/0nagj9yzd13eb/banfield%20Logo--6ef80eb9-25db-438e-b960-7d427164276a.webp")', backgroundSize: 'contain', backgroundRepeat: 'no-repeat', backgroundPosition: 'center', cursor: 'pointer' }} >

{/* DESKTOP INPUTS */} {/* Keyword Input */} Keyword {showSuggestions && ( {loading && ( Loading... )} {!loading && suggestions.length === 0 && inputValue1.trim() && ( No suggestions found )} {!loading && suggestions?.map((s, i) => ( handleSuggestionClick(s)} sx={{ p: 2, cursor: 'pointer', borderBottom: i < suggestions.length - 1 ? '1px solid #f0f0f0' : 'none', '&:hover': { backgroundColor: 'gray.lightest' } }} > {s} ))} )} {/* Location Input */} Location {showTypeahead && ( {isLocationLoading && ( Loading suggestions... )} {!isLocationLoading && locationOptions.length === 0 && inputValue2.length >= 2 && ( No locations found )} {console.log("Location Options", locationOptions)} {!isLocationLoading && locationOptions.map((loc, i) => ( handleLocationSelect(loc)} sx={{ p: 2, cursor: 'pointer', borderBottom: i < locationOptions.length - 1 ? '1px solid #f0f0f0' : 'none', '&:hover': { backgroundColor: 'gray.lightest' } }} > {loc.split('--')[0]} {/* {loc.split('--')[0]} */} ))} )} {/* Search Button */} {/* MOBILE/TABLET CONTROLS */} {/* Row 1: Logo + Hamburger */} {/* Logo */} {/* Banfield Pet Hospital

router.push('/home')} /> */}

{/* Row 2: Centered Search Text with caret */} {isSearchOpen && ( {/* First Input Box with Mobile Typeahead */} Keyword {showSuggestions && ( {loading && ( Loading... )} {!loading && suggestions.length === 0 && inputValue1.trim() && ( No suggestions found )} {!loading && suggestions.map((suggestion, index) => ( handleSuggestionClick(suggestion)} sx={{ p: 2, cursor: 'pointer', borderBottom: index < suggestions.length - 1 ? '1px solid #f0f0f0' : 'none', '&:hover': { backgroundColor: 'gray.lightest' } }} > {suggestion} ))} )} {/* Second Input Box with Mobile Typeahead */} Location {showTypeahead && ( {isLocationLoading && ( Loading suggestions... )} {!isLocationLoading && locationOptions.length === 0 && inputValue2.length >= 2 && ( No locations found )} {!isLocationLoading && locationOptions.map((loc, i) => ( handleLocationSelect(loc)} sx={{ p: 2, cursor: 'pointer', borderBottom: i < locationOptions.length - 1 ? '1px solid #f0f0f0' : 'none', '&:hover': { backgroundColor: 'gray.lightest' } }} > {loc.split('--')[0]} ))} )} {/* Search Button */} )} {/* Desktop Navigation Section */} {navigationItems.map((item, index) => ( { e.preventDefault(); e.stopPropagation(); handleItemClick(index, item.hasDropdown, item.link); }} sx={{ color: item.isHighlighted ? 'primary.main' : 'gray.dark', cursor: 'pointer', fontSize: '14px', fontWeight: 500, display: 'flex', alignItems: 'center', gap: 1.5, transition: 'color 0.2s ease', position: 'relative', pb: 0.5, '&:hover': { color: item.isHighlighted ? 'primary.dark' : 'primary.main', '&::after': { transform: 'scaleX(1)' } }, ...(activeDropdown === index && { color: 'primary.main', '&::after': { transform: 'scaleX(1)' } }), '&::after': { content: '""', position: 'absolute', bottom: 0, left: 0, right: 0, height: '2px', backgroundColor: item.isHighlighted ? 'primary.main' : 'primary.main', transform: 'scaleX(0)', transition: 'transform 0.2s ease', transformOrigin: 'center' } }} > {item.label} {item.hasDropdown && (

{ e.preventDefault(); e.stopPropagation(); handleItemClick(index, item.hasDropdown, item.link); }} /> )} {item.hasDropdown && item.subItems && activeDropdown === index && ( e.stopPropagation()} data-dropdown-container > {item.subItems.map((subItem, subIndex) => ( { e.preventDefault(); e.stopPropagation(); handleSubItemClick(subItem.link); }} sx={{ color: 'gray.dark', cursor: 'pointer', py: 1.5, fontSize: '14px', transition: 'color 0.2s ease', '&:hover': { color: 'primary.main' } }} > {subItem.label} ))} )} ))} {/* Mobile Navigation Menu (FIXED TOGGLE + CLICK-OUTSIDE SAFE) */} {isMobileMenuOpen && ( {navigationItems.map((item, index) => ( { e.preventDefault(); e.stopPropagation(); // keep dropdown open when tapping label handleItemClick(index, item.hasDropdown, item.link); }} sx={{ color: item.isHighlighted ? 'error.main' : 'gray.dark', cursor: 'pointer', fontSize: '16px', fontWeight: 500, py: 2, display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderBottom: '1px solid', borderColor: 'gray.lighter', '&:hover': { color: item.isHighlighted ? 'error.dark' : 'primary.main' } }} data-dropdown-container > {item.label} {item.hasDropdown && (

{ e.preventDefault(); e.stopPropagation(); // ensure arrow click doesn't bubble out handleItemClick(index, item.hasDropdown, item.link); }} /> )} {item.hasDropdown && item.subItems && activeDropdown === index && ( e.stopPropagation()} data-dropdown-container > {item.subItems.map((subItem, subIndex) => ( { e.preventDefault(); e.stopPropagation(); handleSubItemClick(subItem.link); }} sx={{ color: 'gray.dark', cursor: 'pointer', py: 1.5, fontSize: '14px', pl: 2, borderLeft: '2px solid', borderColor: 'gray.lighter', '&:hover': { color: 'primary.main', borderColor: 'primary.main' } }} data-dropdown-container > {subItem.label} ))} )} ))} )} ); };

Search Results :

We couldn't find any jobs matching your search!