diff --git a/src/components/header/SearchBar.js b/src/components/header/SearchBar.js index b9735df..213dd91 100644 --- a/src/components/header/SearchBar.js +++ b/src/components/header/SearchBar.js @@ -7,16 +7,17 @@ import List from "@mui/material/List"; import ListItem from "@mui/material/ListItem"; import ListItemText from "@mui/material/ListItemText"; import Typography from "@mui/material/Typography"; -import CircularProgress from "@mui/material/CircularProgress"; import IconButton from "@mui/material/IconButton"; import SearchIcon from "@mui/icons-material/Search"; import KeyboardReturnIcon from "@mui/icons-material/KeyboardReturn"; import { useNavigate, useLocation } from "react-router-dom"; +import { useTranslation } from "react-i18next"; const SearchBar = () => { const navigate = useNavigate(); const location = useLocation(); const searchParams = new URLSearchParams(location.search); + const { t } = useTranslation(['product', 'delivery']); // State management const [searchQuery, setSearchQuery] = React.useState( @@ -25,7 +26,6 @@ const SearchBar = () => { const [suggestions, setSuggestions] = React.useState([]); const [showSuggestions, setShowSuggestions] = React.useState(false); const [selectedIndex, setSelectedIndex] = React.useState(-1); - const [loadingSuggestions, setLoadingSuggestions] = React.useState(false); // Refs for debouncing and timers const debounceTimerRef = React.useRef(null); @@ -61,12 +61,9 @@ const SearchBar = () => { if (!query || query.length < 2) { setSuggestions([]); setShowSuggestions(false); - setLoadingSuggestions(false); return; } - setLoadingSuggestions(true); - window.socketManager.emit( "getSearchProducts", { @@ -74,8 +71,6 @@ const SearchBar = () => { limit: 8, }, (response) => { - setLoadingSuggestions(false); - if (response && response.products) { // getSearchProducts returns response.products array const suggestions = response.products.slice(0, 8); // Limit to 8 suggestions @@ -184,6 +179,15 @@ const SearchBar = () => { }, 200); }; + // Get delivery days based on availability + const getDeliveryDays = (product) => { + if (product.available === 1) { + return t('delivery:times.standard2to3Days'); + } else if (product.incoming === 1 || product.availableSupplier === 1) { + return t('delivery:times.supplier7to9Days'); + } + }; + // Handle enter icon click const handleEnterClick = () => { delete window.currentSearchQuery; @@ -255,13 +259,11 @@ const SearchBar = () => { ), endAdornment: ( - {loadingSuggestions && } { left: 0, right: 0, zIndex: 1300, - maxHeight: "300px", - overflow: "auto", mt: 0.5, borderRadius: 2, }} @@ -321,6 +321,11 @@ const SearchBar = () => { {suggestion.name} } + secondary={ + + {suggestion.price?.toFixed(2)}€ ({t('product:inclVat', { vat: suggestion.vat })}) · {getDeliveryDays(suggestion)} + + } /> ))}