\n {/* Brands */}\n
\n {/* ABE (car model variants) */}\n {variants && Object.keys(variants).length > 1 && (\n \n \n
\n\n {/* Series */}\n \n onSelectChange({ brand: value })}\n options={getSelectOptions(brands)}\n placeholder={translate(\n 'advanced-search.car-model.choose-brand'\n )}\n />\n
\n \n \n
\n\n {/* Models */}\n \n \n onSelectChange({\n brand: selectedBrandSystemId,\n series: value,\n })\n }\n options={series?.map((s) => ({\n value: s,\n label: s,\n }))}\n placeholder={translate(\n 'advanced-search.car-model.choose-series'\n )}\n />\n
\n \n \n
\n \n \n onSelectChange({\n brand: selectedBrandSystemId,\n series: selectedSeries,\n model: value,\n })\n }\n options={getSelectOptions(models)}\n placeholder={translate(\n 'advanced-search.car-model.choose-model'\n )}\n />\n
\n \n \n
\n )}\n \n )}\n \n ) : null;\n};\n\nexport default AdvancedSearchCarModel;\n","import React, { lazy, useCallback } from 'react';\nimport IconBase from './IconBase';\n\nconst SvgIcon = (props) => {\n // const svg = useCallback(\n // lazy(() => import(`../../../images/${props.name}.svg`)),\n // [props.name]\n // );\n const svg = require(`../../../images/${props.name}.svg`).default;\n return svg ? \n \n onSelectChange({\n brand: selectedBrandSystemId,\n series: selectedSeries,\n model: selectedModelSystemId,\n variant: value,\n })\n }\n options={getSelectOptions(variants)}\n placeholder={translate('wheel-builder.select-abe')}\n />\n
\n \n {!isCollapsedState && (\n <>\n
\n {canSearchRearDimensions && (\n \n
\n \n setReset(true)}\n >\n {translate('general.reset')}\n
\n )}\n \n {categories?.length > 0 && 1}\n {translate('advanced-search.enter-dimensions')}\n
\n {(validDimension || validRearDimension) && (\n\n setWidth(value)}\n suffix=\"/\"\n isLoading={isLoading}\n ref={widthRef}\n />\n setProfile(value)}\n suffix=\"R\"\n isLoading={isLoading}\n ref={profileRef}\n />\n setRimDiameter(value)}\n isLoading={isLoading}\n ref={rimDiameterRef}\n shouldSearchOnEnter={true}\n setPerformSearchByEnter={setPerformSearchByEnter}\n />\n {isSpecificCategory && (\n performSearch(true, true)}\n disabled={isLoading}\n >\n {!isLoading &&\n translate('advanced-search.search-for-dimension')}\n {isLoading &&
\n \n \n
\n )}\n {canSearchRearDimensions && showRearDimSearch && (\n \n
\n )}\n \n )}\n {!isCollapsedState && !isSpecificCategory && (\n \n setRearWidth(value)}\n suffix=\"/\"\n isLoading={isLoading}\n showOptions={false}\n ref={rearWidthRef}\n />\n setRearProfile(value)}\n suffix=\"R\"\n isLoading={isLoading}\n showOptions={false}\n ref={rearProfileRef}\n />\n setRearRimDiameter(value)}\n isLoading={isLoading}\n showOptions={false}\n ref={rearRimDiameterRef}\n />\n
\n \n
\n )}\n {isCollapsedState && (\n <>\n \n 2\n {translate('advanced-search.choose-category')}\n
\n\n {categories.map((cat) => (\n 0 ? cat.url : null}\n >\n {cat.icon && (\n
\n \n {cat.name}\n \n ({cat.hits} {translate('general.products')})\n \n
\n \n ))}\n {isLoading && \n 0}\n value={value}\n highlightedIndex={highlightedIndex}\n options={filteredOptions}\n onOptionSelected={(o) => onChange(o.id)}\n />\n )}\n
\n );\n }\n);\n\nconst InputFilterDropdown = ({\n options,\n onOptionSelected,\n highlightedIndex,\n visible,\n}) => {\n return options ? (\n \n onFocus(e.target)}\n onBlur={() => setTimeout(() => setHasFocus(false), 50)}\n placeholder={placeholder}\n onChange={(e) => onChange(e.target.value)}\n onKeyDown={onKeyDown}\n />\n {suffix && {suffix}}\n
\n \n {showOptions && (\n - \n
\n {!isCollapsedState && (\n <>\n \n {licensePlateNumber} ({carName})\n \n }\n buttonText={translate('advanced-search.change-license-plate-no')}\n onClick={() => {\n setRegNo(null);\n setIsCollapsedState(false);\n }}\n />\n
\n ) : null;\n};\n\nexport default AdvancedSearchLicensePlate;\n","import React, { useEffect, useState } from 'react';\nimport { useSelector } from 'react-redux';\nimport { Clock } from 'phosphor-react';\nimport { ADVANCED_SEARCH_SEARCH_HISTORY } from './AdvancedSearch';\nimport { translate } from '../../Services/translation';\nimport SideMenu from '../SideMenu';\n\nconst ADVANCED_SEARCH_HISTORY = 'ADVANCED_SEARCH_HISTORY';\n\nconst AdvancedSearchSearchHistory = () => {\n const { activeTab } = useSelector((state) => state.advancedSearch);\n\n const [open, setSideMenuOpen] = useState(false);\n const [searchHistory, setSearchHistory] = useState([]);\n const searchHistorySummary = searchHistory.slice(0, 5);\n\n useEffect(() => {\n const storedHistory = localStorage.getItem(ADVANCED_SEARCH_HISTORY);\n if (storedHistory) {\n var history = JSON.parse(storedHistory)\n setSearchHistory(history.reverse());\n }\n }, []);\n\n const isActive = activeTab == ADVANCED_SEARCH_SEARCH_HISTORY;\n\n const openSearchHistory = () => {\n setSideMenuOpen(true);\n };\n\n const onClosed = () => {\n setSideMenuOpen(false);\n };\n\n const searchHistorySummaryItems = searchHistorySummary.map(\n (request, index) => {\n var item = JSON.parse(request);\n return (\n \n setRegNo(value)}\n onEnterKey={(value) => {\n setRegNo(value);\n performSearch();\n }}\n />\n performSearch()}\n disabled={isLoading}\n >\n {!isLoading && translate('general.search')}\n {isLoading &&
\n\n {SearchNotFound === 'Error' ? (\n {translate('advanced-search.search-license-plate')}
\n\n
\n ) : null}\n\n {carName && (\n {carName}
\n )}\n {carModelVariants?.length > 1 && (\n \n \n onCarModelVariantSelected(value)}\n options={carModelVariants.map((model) => ({\n value: model.systemId,\n label: `${model.name ? model.name + ' ' : ''}(${\n model.boltPattern\n }) ${model.abe}`,\n }))}\n isDisabled={isLoading}\n />\n
\n )}\n \n )}\n {isCollapsedState && (\n <>\n \n
\n \n {item.type}: {item.query}\n \n \n );\n }\n );\n\n const searchHistoryItems = searchHistory.map((request, index) => {\n var item = JSON.parse(request);\n return (\n \n
\n \n {item.type}: {item.query}\n \n \n );\n });\n\n return isActive ? (\n <>\n \n {searchHistorySummaryItems}\n {searchHistoryItems && searchHistoryItems.length > 5 && (\n openSearchHistory()}\n >\n {translate('general.showmore')}\n \n )}\n
\n \n
\n {translate('advancedsearch.history')}
\n {searchHistoryItems}\n\n
\n );\n};\n\nconst AdvancedSearchTab = ({ active, title, onClick, className }) => (\n \n {isTabAvailable(ADVANCED_SEARCH_DIMENSIONS) && (\n setActiveTab(ADVANCED_SEARCH_DIMENSIONS)}\n />\n )}\n {isTabAvailable(ADVANCED_SEARCH_LICENSE_PLATE) && (\n setActiveTab(ADVANCED_SEARCH_LICENSE_PLATE)}\n />\n )}\n {isTabAvailable(ADVANCED_SEARCH_CAR_MODEL) && (\n setActiveTab(ADVANCED_SEARCH_CAR_MODEL)}\n />\n )}\n {isTabAvailable(ADVANCED_SEARCH_SEARCH_HISTORY) && (\n setActiveTab(ADVANCED_SEARCH_SEARCH_HISTORY)}\n />\n )}\n
\n \n {showLoadingUrlMessage && (\n \n
\n \n {translate('advanced-search.loading-url-message')}\n
\n \n )}\n {isTabAvailable(ADVANCED_SEARCH_DIMENSIONS) && (\n \n
\n );\n};\n\nexport default LicensePlateInput;\n","import React from 'react';\n\nexport default ({ size, color }) => {\n return (\n \n ![](\"/ui/images/registration-se.svg\")
\n onChange(v)}\n placeholder={placeholder ?? 'ABC 123'}\n onKeyDown={(e) =>\n e.key == 'Enter' && onEnterKey(e.target.value.replace(' ', ''))\n }\n />\n
\n \n