\n
this.trigger = el}>\n
\n { placeholder }\n \n { names.length > 0 && ` (${names.length})` }\n \n
\n
\n { names.length > 0 &&\n
\n { names.join(', ') }\n
\n }\n
\n { !isOpened ? : }\n
\n
\n
\n\n { (isOpened || isMobileMenu) &&\n
\n\n
\n \n this.handleSearch(e.target.value)}\n placeholder={`${I18n.t('apps.lb_showroom.showroom.area_filter.search_label')}...`}\n type=\"text\"\n value={searchQuery}\n />\n
\n\n
\n { data.map((item) => {\n const sectionIsSelected = selectedSectionIds.indexOf(item.id) >= 0;\n const sortedAreasArray = item.areas.sort((a,b) => a.name.localeCompare(b.name));\n const areaIsSelected = selectedData[item.id] && selectedData[item.id].length > 0;\n const checkboxClasses = areaIsSelected ? 'dropdown-selector__item-icon-checked' : 'dropdown-selector__item-checkbox';\n const submenuClasses = classNames('dropdown-selector__item-submenu', {'opened': sectionIsSelected});\n const submenuStyles = sectionIsSelected ? {maxHeight: `${(item.areas.length + 1) * 60}px`} : {};\n const itemClasses = classNames('dropdown-selector__item main',\n { 'dropdown-selector__item--selected': sectionIsSelected },\n { 'sticky': toggleIsSticky && sectionIsSelected },\n { 'dropdown-selector__item--active': selectedData[item.id] });\n\n return (\n
\n { item.count > 0 && (\n
\n
\n
deselectAll(item.id) : () => this.selectAll(item)} className={checkboxClasses}>\n \n
\n
sortedAreasArray.length ? this.toggleSelectSection(item.id) : null}>\n \n { areaIsSelected &&\n { selectedData[item.id].length } {I18n.t('lb_showroom.showroom.list.chosen')}\n }\n
\n
\n
this.toggleSelectSection(item.id)}>\n { sectionIsSelected ? : }\n \n
\n )}\n\n
\n
\n
this.selectAll(item)}>{ I18n.t('search_agent.select_all') }
\n
deselectAll(item.id)}>{ I18n.t('search_agent.deselect_all') }
\n
\n\n { sortedAreasArray.map(area => {\n const areaIsSelected = selectedData[item.id] && selectedData[item.id].indexOf(area.id) >= 0;\n const submenuItemClasses = classNames('dropdown-selector__item', {'dropdown-selector__item--checked': areaIsSelected});\n const submenuCheckboxClasses = areaIsSelected ? 'dropdown-selector__item-icon-checked' : 'dropdown-selector__item-checkbox';\n\n\n return (\n
\n { area.total_sum > 0 && (\n this.selectAction(item.id, area.id)}>\n
\n
\n
\n
\n )\n })}\n
\n
\n
\n )\n })}\n { searchQuery && !data.length &&\n
\n
\n
\n
{ I18n.t('apps.lb_showroom.showroom.area_filter.no_results.first') }
\n
\n
\n { I18n.t('apps.lb_showroom.showroom.area_filter.no_results.second') }\n
\n
\n }\n
\n
\n
\n }\n\n
\n );\n }\n}\n\nexport default ListViewAreaSelector;\n","import React, { useContext, Fragment } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { SvgIco } from '../../SharedComponents/Icons';\nimport { Context } from \"../index\";\n\nimport './index.sass';\n\n\nconst ListViewHeader = () => {\n\n const {\n contactInfoPhone,\n contactInfoPhoneWithoutCode,\n country,\n headerData,\n keywords,\n requestParams,\n showSeo,\n siteKey,\n subSite,\n totalLocationsCount,\n } = useContext(Context);\n\n const { locationsCount, sections } = keywords;\n\n const {\n description,\n descriptionWithAssets,\n extendedDescription,\n headline,\n streetName,\n cityName\n } = headerData;\n\n\n const findPos = (obj) => {\n let curtop = 0;\n if (obj.offsetParent) {\n do {\n curtop += obj.offsetTop;\n } while (obj = obj.offsetParent);\n return curtop\n }\n return undefined;\n };\n\n\n const scrollToSeoText = () => {\n const seoTextElement = document.getElementById('seo-text-description');\n const topMenuHeight = document.getElementById('top-menu').offsetHeight;\n const targetTop = findPos(seoTextElement) - topMenuHeight - 100;\n scrollTo({ top: targetTop, left: document.body, behavior: \"smooth\" });\n };\n\n\n const additionalTextSalesSection = () => {\n if (subSite === 'sales') {\n switch (true) {\n case (sections[0] === 'foreclosure' && sections.length < 2):\n return 'til salg på tvangsauktion';\n break;\n case (sections[0] === 'own_use' && sections.length < 2):\n return '- brugerejendomme til salg';\n break;\n case (sections[0] === 'investment' && sections.length < 2):\n return 'til investering';\n break;\n default:\n return 'til salg'\n }\n } else {\n return null\n }\n };\n\n\n const count = (locationsCount) => {\n switch (true) {\n case locationsCount === 1:\n return \"one\";\n case locationsCount > 1 && locationsCount < 5:\n return \"few\";\n case locationsCount >= 5:\n return \"many\";\n default:\n return \"other\";\n }\n };\n\n\n const locationsKind = requestParams.kinds && requestParams.kinds.length === 1 ? '.' + requestParams.kinds[0] : '';\n const kind = I18n.t(`global.models.location.kinds${locationsKind}.normal`);\n // const currentTotalLocationsCount = totalLocationsCount || locationsCount;\n const currentTotalLocationsCount = totalLocationsCount || totalLocationsCount === 0 ? totalLocationsCount : locationsCount;\n const translatedKinds = kind[count(currentTotalLocationsCount)] ? kind[count(currentTotalLocationsCount)] : kind['other'];\n const phoneNumber = siteKey === 'global' ? contactInfoPhone : contactInfoPhoneWithoutCode;\n\n\n return (\n
\n
\n
\n
\n { headline ?\n
\n \n
\n {/*{ !(totalLocationsCount === 0) ? totalLocationsCount : locationsCount } */}\n { currentTotalLocationsCount } { showSeo } { translatedKinds }\n { additionalTextSalesSection() }\n { showSeo ? ': ' : ' ' }\n {((streetName && requestParams.street_id) ? streetName : (cityName ? cityName : (showSeo ? headline : I18n.t(`apps.lb_showroom.header.results`))))}\n
\n { !streetName && !cityName &&\n
\n { showSeo ? description : I18n.t('apps.lb_showroom.header.subheader') }\n { showSeo && (extendedDescription || (descriptionWithAssets && descriptionWithAssets.length > 0)) && (\n
\n { I18n.t('generic.read_more') }\n
\n )}\n
\n }\n
\n
\n
\n \n \n { I18n.t(`apps.entry_page.search_area.value_points.lease.first`) }\n \n
\n\n { !contactInfoPhone &&\n
\n \n \n { I18n.t(`apps.entry_page.search_area.value_points.lease.third`) }\n \n
\n }\n\n
\n
\n
\n { siteKey === 'dk'\n ? \n : I18n.t(`apps.entry_page.search_area.value_points.lease.second`, {'country_name': country})\n }\n \n
\n\n { contactInfoPhone &&\n
\n }\n\n
\n
\n :
{ I18n.t('apps.lb_showroom.showroom.list.empty_search_result') }
\n }\n
\n
\n
\n
\n );\n}\n\n\nexport default ListViewHeader;\n\nListViewHeader.propTypes = {\n showSeo: PropTypes.bool,\n};\n\nListViewHeader.defaultProps = {\n showSeo: true,\n}\n","import React, { Component } from 'react';\nimport Sticky from 'react-stickynode';\n\nclass StickyFilterBar extends Component {\n\n state ={\n previousScrollY: null,\n showStickyBar: false,\n };\n\n componentDidMount() {\n this.setState({previousScrollY: window.pageYOffset})\n window.addEventListener('scroll', this.handleStickyBarRender);\n };\n\n componentDidUpdate(prevProps, prevState) {\n const { open: mapIsOpen } = this.props.mapOptions;\n\n mapIsOpen !== prevProps.mapOptions.open && !mapIsOpen && this.setState({ showStickyBar: false });\n };\n\n handleStickyBarRender = () => {\n if (!this.state.mobileFiltersOn) {\n const { previousScrollY } = this.state;\n const currentScrollY = window.pageYOffset;\n\n\n // We need this additional check for Safari and Firefox\n // to prevent appearance of Sticky-bar at the end of the page caused by overscroll\n window.pageYOffset + window.innerHeight < document.body.clientHeight &&\n this.setState({\n showStickyBar: previousScrollY > currentScrollY,\n previousScrollY: currentScrollY,\n });\n }\n };\n\n\n render() {\n return (\n
\n {this.props.children}\n \n );\n }\n}\n\nexport default StickyFilterBar;\n","import React, { useContext, useEffect, useRef, useState, Fragment, Suspense } from 'react';\nimport \"scroll-behavior-polyfill\";\nimport PropTypes from 'prop-types';\nimport queryString from 'query-string';\nimport update from 'immutability-helper';\nimport classNames from 'classnames';\nimport { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';\nimport { debounce } from \"throttle-debounce\";\n\nimport { queryParseHelper } from '../../../utils/queryParseHelper';\nimport { SvgIco } from '../../SharedComponents/Icons';\nimport { getObjectIndexInArray } from '../../helpers/array';\nimport { locationsCountByKinds } from '../../helpers/coundByKindLocation';\nimport LocationSearch from '../../LocationSearch/index';\nimport ListViewAreaSelector from '../ListViewAreaSelector';\nimport StickyFilterBar from './StickyFilterBar';\nimport { Context } from \"../index\";\n\nconst DropDownContainer = React.lazy(() => import('../../SharedComponents/DropDownContainer'));\nconst DropdownSelector = React.lazy(() => import('../DropdownSelector'));\nconst EnergyRatingFilter = React.lazy(() => import('../EnergyRatingFilter'));\nconst FacilitiesFilter = React.lazy(() => import('../FacilitiesFilter'));\nconst NoLinearRangeSlider = React.lazy(() => import('../../SharedComponents/NonLinearRangeSelector'));\nconst RangeSelector = React.lazy(() => import('../../SharedComponents/RangeSelector'));\nconst SpaceCalculator = React.lazy(() => import('../../SharedComponents/SpaceCalculator'));\nconst SuitableForFilter = React.lazy(() => import('../SuitableForFilter'));\n\nimport './index.sass';\n\n\nfunction yieldToMain () {\n return new Promise(resolve => {\n setTimeout(resolve, 0);\n });\n}\n\n\nconst ListViewMainFilter = () => {\n\n const debounceKinds = debounce(600, (func) => {\n func();\n });\n\n const {\n areaId,\n areaType,\n filterAreas,\n filterAreaList,\n filterLocationsByPrice,\n filterLocationsBySquare,\n getInitialListLocationByDistricts,\n getEnergyRatings,\n getKinds,\n getFacilitiesList,\n getListLocationByDistrictsArea,\n getListLocationMobileFilters,\n getSuitableForKinds,\n groupedPostalDistrictsIds,\n initialPostalDistrictsIds,\n keywords,\n kindFilterToggle,\n locationKinds,\n mapMarkers,\n mapOptions,\n onlyInternalLocations,\n requestParams,\n selectedEnergyRatings,\n selectedFacilities,\n selectedSuitableFor,\n setRequestParams,\n setSelectedEnergyRatings,\n setSelectedFacilities,\n setSelectedSuitableFor,\n siteKey,\n subSite,\n suitableForStructuredTypes,\n toggleMap,\n windowWidth,\n } = useContext(Context);\n\n const {\n area_max,\n area_min,\n energy_rating,\n facilities,\n kinds,\n rent_max,\n rent_min,\n suitable_for,\n } = requestParams;\n\n const {\n apiAutocompletePath,\n countryAlpha2,\n defaultKinds,\n frontendLeasePrices,\n initialPostalDistrictIds,\n maxArea,\n newSearchAgentPath,\n provinceId,\n saleMaxPrice,\n sections,\n slidersDefaultCurrencyFormatted,\n yearlyPerM2MaxPrice,\n } = keywords;\n\n const [clearFacilities, setClearFacilities] = useState(false);\n const [clearSuitableFor, setClearSuitableFor] = useState(false);\n const [filtersMobileScroll, setFiltersMobileScroll] = useState(0);\n const [filtersModalIsOpen, setFiltersModalIsOpen] = useState(false);\n const [mobileFiltersOn, setMobileFiltersOn] = useState(false);\n const [parsedData, setParsedData] = useState([]);\n const [prevSelectedFacilities, setPrevSelectedFacilities] = useState(null);\n const [prevSelectedFilters, setPrevSelectedFilters] = useState({});\n const [selectedAreaIds, setSelectedAreaIds] = useState({});\n const [selectedMeters, setSelectedMeters] = useState({ max: Number(area_max) || 999999, min: Number(area_min) || 0 });\n const [selectedPrice, setSelectedPrice] = useState({ max: Number(rent_max) || 1000, min: Number(rent_min) || 0 });\n const [selectedTypes, setSelectedTypes] = useState([]);\n const [showApplyFiltersButton, setShowApplyFiltersButton] = useState(false);\n const [showClearFiltersButton, setShowClearFiltersButton] = useState(false);\n\n const filterWrapper = useRef();\n\n\n useEffect(() => {\n // An approach to avoid long tasks\n const tasks = [\n () => getKinds(requestParams),\n () => getEnergyRatings(requestParams),\n () => filterAreas(),\n () => getSuitableForKinds(requestParams),\n () => getFacilitiesList(requestParams),\n ];\n\n (async function saveSettings () {\n while (tasks.length > 0) {\n // Shift the first task off the tasks array:\n const task = tasks.shift();\n\n // Run the task:\n task();\n\n // Yield to the main thread:\n await yieldToMain();\n }\n })();\n }, []);\n\n\n useEffect(() => {\n window.onpopstate = () => onBackButtonEvent();\n window.addEventListener(\"orientationchange\", handleMobilesFiltersOn);\n\n return () => {\n window.removeEventListener(\"orientationchange\", handleMobilesFiltersOn);\n };\n }, []);\n\n\n useEffect(() => {\n (Number(rent_max) !== Number(selectedPrice.max) || Number(rent_min) !== Number(selectedPrice.min))\n && setSelectedPrice({ max: Number(rent_max), min: Number(rent_min) });\n }, [rent_max, rent_min]);\n\n\n useEffect(() => {\n (Number(area_max) !== Number(selectedMeters.max) || Number(area_min) !== Number(selectedMeters.min))\n && setSelectedMeters({ max: Number(area_max), min: Number(area_min) });\n }, [area_max, area_min]);\n\n\n useEffect(() => {\n setSelectedTypes(kinds\n ? kinds.map(elem => {\n const translatedKind = I18n.t(`global.models.location.kinds.${elem}.normal`);\n const name = translatedKind['one'] ? translatedKind['one'] : translatedKind;\n return { id: elem, name };\n })\n : []);\n }, [kinds]);\n\n\n useEffect(() => {\n // We need to save default data for mobile menu in case we shut down the menu without applying filters,\n // and to have an ability to compare states in order to show/not show Apply Filters Button\n if (mobileFiltersOn) {\n setPrevSelectedFilters({\n selectedTypes: JSON.parse(JSON.stringify(selectedTypes)),\n selectedAreaIds: JSON.parse(JSON.stringify(selectedAreaIds)),\n selectedPrice: JSON.parse(JSON.stringify(selectedPrice)),\n selectedMeters: JSON.parse(JSON.stringify(selectedMeters)),\n selectedEnergyRatings,\n });\n setPrevSelectedFacilities({ selectedSuitableFor, selectedFacilities });\n handleClearFiltersButton();\n }\n }, [mobileFiltersOn]);\n\n\n useEffect(() => {\n if (mobileFiltersOn) {\n handleClearFiltersButton();\n handleApplyFiltersButton();\n }\n }, [requestParams]);\n\n\n useEffect(() => {\n const newData = Object.values(filterAreaList);\n\n const filterEmptyPostalDistrict = newData.reduce((elem, currentValue) => {\n const filterByTotalSum = currentValue.postal_districts.filter(area => (area.total_sum > 0));\n const updated = {...currentValue, postal_districts: filterByTotalSum};\n elem.push(updated);\n return elem;\n }, []);\n\n const parsedData = filterEmptyPostalDistrict.map(elem => {\n const getTotalSum = elem.postal_districts.reduce((accum, currentValue) => {\n return accum + currentValue.total_sum\n }, 0);\n let added = { ...elem, count: getTotalSum };\n const { postal_districts: areas, ...rest } = added;\n return { areas, ...rest }\n });\n\n setParsedData(parsedData);\n\n if (!provinceId) {\n const selectedAllIds = parsedData.reduce((accum, currentValue) => {\n accum[currentValue.id] = currentValue.areas.map(elem => elem.id)\n return accum\n }, {});\n\n setSelectedAreaIds(selectedAllIds);\n } else {\n\n let newSelectedIds = {};\n\n parsedData.map(item => {\n const selectedIds = [];\n\n item.areas.map(area => initialPostalDistrictsIds.indexOf(area.id) >= 0 && selectedIds.push(area.id));\n\n if (selectedIds.length) newSelectedIds[item.id] = selectedIds;\n });\n\n setSelectedAreaIds(newSelectedIds);\n }\n }, [filterAreaList, initialPostalDistrictsIds]);\n\n\n const onBackButtonEvent = () => {\n const getPath = queryString.parse(window.location.search);\n const getPathBack = history.state ? queryString.parse(history.state.query) : {};\n let newRequestParams = { ...requestParams };\n\n\n let defaultParams = {\n sections: sections,\n rent_min: 0,\n rent_max: sections.includes('lease') ? yearlyPerM2MaxPrice : saleMaxPrice,\n area_min: 0,\n area_max: maxArea,\n postal_districts: initialPostalDistrictIds,\n kinds: defaultKinds,\n page: 1,\n energy_rating: [],\n };\n\n newRequestParams.postal_districts = Object.keys(initialPostalDistrictIds).reduce((acc, province) => acc.concat(initialPostalDistrictIds[province]), []);\n delete newRequestParams.suitable_for;\n delete newRequestParams.facilities;\n defaultParams = queryParseHelper(defaultParams, getPath)\n\n if (!Object.keys(getPath).length > 0) {\n newRequestParams.postal_districts = areaType === 'Province'\n ? groupedPostalDistrictsIds[areaId]\n : areaType === \"PostalDistrict\"\n ? [areaId]\n : parsedData.reduce((acc, province) => acc.concat(province.areas.map(district => district.id)), []);\n\n delete newRequestParams.suitable_for;\n delete newRequestParams.facilities;\n }\n\n newRequestParams = queryParseHelper(newRequestParams, getPathBack, true, defaultParams);\n getInitialListLocationByDistricts(newRequestParams, getPathBack.search_id, true);\n mapMarkers(newRequestParams);\n setRequestParams({ ...newRequestParams });\n\n const selectedTypes = newRequestParams.kinds\n ? mapSelectedKinds(newRequestParams.kinds.includes('cafe') ? ['store']: newRequestParams.kinds)\n : [];\n\n setSelectedTypes(selectedTypes);\n setSelectedPrice(prevData =>({ ...prevData, max: Number(newRequestParams.rent_max), min: Number(newRequestParams.rent_min) }));\n setSelectedMeters(prevData =>({ ...prevData, max: Number(newRequestParams.area_max), min: Number(newRequestParams.area_min) }));\n setSelectedEnergyRatings([ ...newRequestParams.energy_rating ]);\n };\n\n\n const mapSelectedKinds = (selectedKinds) => {\n return selectedKinds.map(elem => {\n const translatedKind = I18n.t(`global.models.location.kinds.${elem}.normal`);\n const name = translatedKind['one'] ? translatedKind['one'] : translatedKind;\n\n return { id: elem, name };\n });\n };\n\n\n const filterLocationByPrice = (price, shouldSubmit) => {\n const currentPrice = price || selectedPrice;\n\n price && setSelectedPrice(price);\n\n if (shouldSubmit) {\n // Google Analytics\n window.dataLayer = window.dataLayer || [];\n window.dataLayer.push({\n event: 'ga4-price-filter-change',\n eventCategory: 'price-filter-change-list-view',\n eventAction: 'price-filter-change-list-view',\n });\n\n mobileFiltersOn\n ? setRequestParams(prevParams => ({ ...prevParams, rent_min: currentPrice.min, rent_max: currentPrice.max }))\n : filterLocationsByPrice(currentPrice);\n };\n };\n\n\n const filterLocationBySquare = (square, shouldSubmit) => {\n const currentSquare = square || selectedMeters;\n\n square && setSelectedMeters(square);\n\n if (shouldSubmit) {\n mobileFiltersOn\n ? setRequestParams(prevParams => ({ ...prevParams, area_min: currentSquare.min, area_max: currentSquare.max, }))\n : filterLocationsBySquare(currentSquare);\n }\n };\n\n\n const filterLocationByArea = (updatedAreas) => {\n const newSelectedAreasIds = [];\n\n setSelectedAreaIds(updatedAreas);\n Object.keys(updatedAreas).map(elem => updatedAreas[elem].map(item => newSelectedAreasIds.push(item)));\n mobileFiltersOn\n ? setRequestParams(prevParams => ({ ...prevParams, postal_districts: newSelectedAreasIds }))\n : getListLocationByDistrictsArea(newSelectedAreasIds);\n };\n\n\n const selectType = (e, item) => {\n const index = getObjectIndexInArray(selectedTypes, 'id', item.id);\n const typeIsSelected = (index >= 0);\n const newRequestParams = { ...requestParams };\n const newSelectedTypes = typeIsSelected ? update(selectedTypes, {$splice: [[index, 1]] }) : update(selectedTypes, {$push: [item]});\n\n setSelectedTypes(newSelectedTypes);\n\n const filterKinds = () => {\n const suitableForTypesAreSelected = newSelectedTypes.some(type =>\n type.id === 'office' || type.id === 'warehouse' || type.id === 'coworking' || type.id === 'store' || type.id === 'business_center'\n );\n\n if (newSelectedTypes && newSelectedTypes.length && requestParams.suitable_for && suitableForTypesAreSelected) {\n let newSuitableForList = [];\n let sortedSuitableForByKinds = [];\n\n newSelectedTypes\n .map(type =>\n suitableForStructuredTypes[type.id] && suitableForStructuredTypes[type.id].map(suitableForKind =>\n !sortedSuitableForByKinds.includes(suitableForKind) && sortedSuitableForByKinds.push(suitableForKind))\n );\n\n newSuitableForList = requestParams.suitable_for.filter(elem => sortedSuitableForByKinds.includes(elem));\n setRequestParams(prevParams => ({ ...prevParams, suitable_for: newSuitableForList }));\n newRequestParams.suitable_for = newSuitableForList;\n setSelectedSuitableFor(newSuitableForList);\n };\n\n\n // In case last of the suitable_for type is deleted while there are others selected\n if (!suitableForTypesAreSelected && requestParams.suitable_for && requestParams.suitable_for.length && newSelectedTypes.length > 0) {\n setRequestParams(prevParams => ({ ...prevParams, suitable_for: [] }));\n delete newRequestParams.suitable_for;\n setSelectedSuitableFor([]);\n }\n\n !mobileFiltersOn && kindFilterToggle(newSelectedTypes, newRequestParams);\n setRequestParams(prevParams => ({ ...prevParams, kinds: newSelectedTypes.map(elem => elem.id) }));\n newRequestParams.kinds = newSelectedTypes.map(elem => elem.id);\n };\n\n // Debounce kinds filtering on desktop to prevent unnecessary requests and rendering in case of multiple kinds selection\n mobileFiltersOn ? filterKinds() : debounceKinds(() => filterKinds());\n };\n\n\n const toggleAreaSelect = (parentID, areaID) => {\n let selectedAreas = { ...selectedAreaIds };\n let selectedProvince = selectedAreas[parentID];\n\n selectedProvince\n ? (selectedProvince.indexOf(areaID) >= 0 ? selectedProvince.splice(selectedProvince.indexOf(areaID), 1) : selectedProvince.push(areaID))\n : selectedAreas[parentID] = [areaID];\n\n selectedAreas[parentID].length === 0 && delete selectedAreas[parentID];\n filterLocationByArea(selectedAreas);\n };\n\n\n const selectAll = (province, parsedData) => {\n let selectedAreas = { ...selectedAreaIds };\n\n parsedData.forEach(section => {\n if(section.id === province.id) {\n selectedAreas[province.id] = section.areas.map(area => area.id);\n }\n });\n\n filterLocationByArea(selectedAreas);\n };\n\n\n const deselectAll = (parentID) => {\n let selectedAreas = { ...selectedAreaIds };\n\n delete selectedAreas[parentID];\n filterLocationByArea(selectedAreas);\n };\n\n\n const handleMobilesFiltersOn = () => {\n setTimeout(() => {\n if (window.innerWidth > 992 && mobileFiltersOn) {\n toggleMobileFilters(false);\n }\n }, 1);\n };\n\n\n const handleMobilesFiltersSubmit = () => {\n setMobileFiltersOn(false);\n setShowApplyFiltersButton(false);\n document.getElementById('top-menu').classList.remove('hidden');\n enableBodyScroll(document.getElementById('filtersWrapper'));\n getListLocationMobileFilters();\n setSelectedFacilities(facilities || []);\n setSelectedSuitableFor(suitable_for || [])\n window.scroll({ top: 0, behavior: 'smooth' });\n };\n\n\n const toggleMobileFilters = (open) => {\n // we take this element before user close mobile filter because after react don't render it and it will be null\n const removeScrollListenerElement = document.getElementById('filtersWrapper');\n const filtersWrapper = document.getElementById('filtersWrapper');\n const mobileFiltersOnState = open;\n\n setMobileFiltersOn(mobileFiltersOnState);\n\n if (mobileFiltersOnState) {\n document.getElementById('top-menu').classList.add('hidden');\n disableBodyScroll(filtersWrapper);\n\n // Google Analytics\n window.dataLayer = window.dataLayer || [];\n window.dataLayer.push({\n event: 'ga4-filters-toggle',\n eventCategory: 'filters-toggle-list-view',\n eventAction: 'filters-toggle-list-view',\n });\n } else {\n setShowApplyFiltersButton(false);\n\n const selectedAreasIds = [];\n\n prevSelectedFilters.selectedAreaIds && Object.keys(prevSelectedFilters.selectedAreaIds)\n .map(elem => prevSelectedFilters.selectedAreaIds[elem].map(item => selectedAreasIds.push(item)));\n\n const prevParams = {\n ...requestParams,\n sections: keywords.sections,\n rent_min: prevSelectedFilters.selectedPrice.min,\n rent_max: prevSelectedFilters.selectedPrice.max,\n area_min: prevSelectedFilters.selectedMeters.min,\n area_max: prevSelectedFilters.selectedMeters.max,\n postal_districts: selectedAreasIds,\n kinds: prevSelectedFilters.selectedTypes.map(type => type.id),\n suitable_for: prevSelectedFacilities.selectedSuitableFor,\n facilities: prevSelectedFacilities.selectedFacilities,\n energy_rating: prevSelectedFilters.selectedEnergyRatings,\n };\n\n setRequestParams(prevState => ({ ...prevState, ...prevParams }));\n setSelectedFacilities(facilities || []);\n setSelectedSuitableFor(suitable_for || []);\n document.getElementById('top-menu').classList.remove('hidden');\n enableBodyScroll(removeScrollListenerElement);\n }\n };\n\n\n const handleClearFilters = () => {\n const defaultParams = {\n ...requestParams,\n sections: sections,\n rent_min: 0,\n rent_max: sections.includes('lease') ? yearlyPerM2MaxPrice : saleMaxPrice,\n area_min: 0,\n area_max: maxArea,\n postal_districts: [],\n kinds: [],\n suitable_for: [],\n facilities: [],\n energy_rating: [],\n };\n\n setSelectedMeters({ min: 0, max: maxArea });\n setSelectedPrice({ min: 0, max: sections.includes('lease') ? yearlyPerM2MaxPrice : saleMaxPrice });\n setSelectedTypes([]);\n setSelectedAreaIds({});\n setRequestParams(prevParams => ({ ...prevParams, ...defaultParams }));\n setClearFacilities(prevState => !prevState);\n setClearSuitableFor(prevState => !prevState);\n };\n\n\n // For Clear Filters button, show if any filter is selected\n const handleClearFiltersButton = () => {\n const showClearFiltersButton = !!(\n selectedTypes.length\n || energy_rating.length\n || Object.keys(selectedAreaIds).length\n || selectedPrice.min > 0\n || selectedPrice.max !== (sections.includes('lease') ? yearlyPerM2MaxPrice : saleMaxPrice)\n || selectedMeters.min > 0\n || selectedMeters.max !== maxArea\n || (suitable_for && suitable_for.length)\n || (facilities && facilities.length));\n\n setShowClearFiltersButton(showClearFiltersButton);\n };\n\n\n // For apply filters button, show if there is any difference between before-opening chosen filters and current\n const handleApplyFiltersButton = () => {\n const selectedAreas = [];\n const prevSelectedAreas = [];\n const suitableFor = suitable_for || [];\n const currentFacilities = facilities || [];\n const selectedEnergyRatings = energy_rating;\n\n Object.keys(selectedAreaIds).map(elem => selectedAreaIds[elem].map(item => selectedAreas.push(item)));\n prevSelectedFilters.selectedAreaIds && Object.keys(prevSelectedFilters.selectedAreaIds).map(elem => prevSelectedFilters.selectedAreaIds[elem].map(item => prevSelectedAreas.push(item)));\n\n const showApplyFiltersButton = !(\n selectedTypes.length === prevSelectedFilters.selectedTypes.length\n && selectedTypes.every(type => prevSelectedFilters.selectedTypes.find(prevType => prevType.id === type.id))\n && selectedAreas.length === prevSelectedAreas.length\n && selectedAreas.every(area => prevSelectedAreas.indexOf(area) >= 0)\n && selectedPrice.min === prevSelectedFilters.selectedPrice.min\n && selectedPrice.max === prevSelectedFilters.selectedPrice.max\n && selectedMeters.min === prevSelectedFilters.selectedMeters.min\n && selectedMeters.max === prevSelectedFilters.selectedMeters.max\n && suitableFor.length === prevSelectedFacilities.selectedSuitableFor.length\n && suitableFor.every(suitableFor => prevSelectedFacilities.selectedSuitableFor.indexOf(suitableFor) >= 0)\n && currentFacilities.length === prevSelectedFacilities.selectedFacilities.length\n && currentFacilities.every(facility => prevSelectedFacilities.selectedFacilities.indexOf(facility) >= 0)\n && selectedEnergyRatings.length === prevSelectedFilters.selectedEnergyRatings.length\n && selectedEnergyRatings.every(rating => prevSelectedFilters.selectedEnergyRatings.indexOf(rating) >= 0)\n );\n\n setShowApplyFiltersButton(showApplyFiltersButton);\n };\n\n\n const openFiltersModal = () => {\n setFiltersModalIsOpen(true);\n window.addEventListener('click', handleClickOutside);\n document.body.classList.toggle('modal-open');\n\n // Google Analytics\n window.dataLayer = window.dataLayer || [];\n window.dataLayer.push({\n event: 'ga4-filters-toggle',\n eventCategory: 'filters-toggle-list-view',\n eventAction: 'filters-toggle-list-view',\n });\n };\n\n\n const closeFiltersModal = () => {\n setFiltersModalIsOpen(false);\n window.removeEventListener('click', handleClickOutside);\n document.body.classList.toggle('modal-open');\n };\n\n\n const handleClickOutside = (e) => {\n if (filterWrapper && filterWrapper.current) {\n const target = e.target;\n const isModal = filterWrapper.current.contains(target);\n const filterToggle = document.getElementById('filterToggle');\n const isFilterButton = filterToggle === target || filterToggle.contains(target);\n\n !isModal && !isFilterButton && closeFiltersModal();\n }\n };\n\n\n const setSearchAgentUrl = () => {\n const getPath = queryString.parse(window.location.search);\n const { area_max, area_min, rent_max, rent_min, search_id } = getPath;\n const currentKinds = mobileFiltersOn ? (prevSelectedFilters && prevSelectedFilters.selectedTypes && prevSelectedFilters.selectedTypes) || null : selectedTypes;\n\n const searchAgentDefaultParams = {\n area_max,\n area_min,\n rent_max,\n rent_min,\n ['kinds[]']: (currentKinds && Object.keys(currentKinds).length && currentKinds.map(type => type.id)) || null ,\n };\n\n search_id && (searchAgentDefaultParams.search_id = search_id);\n subSite === 'sales' && sections.length < 3 && (searchAgentDefaultParams['sections[]'] = sections);\n\n const searchAgentParams = Object.fromEntries(Object.entries(searchAgentDefaultParams).filter(([key, value]) => !!value));\n const searchAgentQueryString = new URLSearchParams(searchAgentParams).toString();\n\n return searchAgentQueryString ? `${subSite === 'sales' ? '&' : '?'}${searchAgentQueryString}` : '';\n };\n\n\n const handleMobileScroll = () => {\n const modalFiltersWrapper = document.getElementById('mobile-filters-scroll-target');\n const rect = modalFiltersWrapper && modalFiltersWrapper.getBoundingClientRect();\n const wrapperTop = rect && rect.top;\n\n rect && setFiltersMobileScroll(wrapperTop);\n };\n\n\n // const disableMap = onlyInternalLocations && (siteKey === 'dk' || countryAlpha2 === 'dk');\n const mapIsOpen = mapOptions.open;\n const maxPrice = sections[0] === 'lease' ? yearlyPerM2MaxPrice : saleMaxPrice;\n const mainFilterClasses = classNames('main-filter', { 'main-filter--top': mapIsOpen });\n const filtersWrapperClasses = classNames('lv-filter__filters-wrapper', { 'mobile-active': mobileFiltersOn }, { 'with-button': showApplyFiltersButton });\n const isUsa = countryAlpha2 === 'us';\n const areaFilterIcon = isUsa ? 'area_ft2' : 'area_m2';\n const areaUnit = isUsa ? 'ft²' : 'm²';\n const areaFilterTitle = isUsa ? I18n.t('apps.list_view.filter.area.title.ft2') : I18n.t('apps.list_view.filter.area.title.m2');\n const areaFilterText = isUsa ? I18n.t('apps.list_view.filter.area.text.ft2') : I18n.t('apps.list_view.filter.area.text.m2');\n const isMobileMenu = windowWidth < 992;\n const selectedPriceTooltip = frontendLeasePrices && (selectedPrice.min > 0 || selectedPrice.max !== maxPrice) && `${selectedPrice.min} - ${selectedPrice.max} ${slidersDefaultCurrencyFormatted}`;\n const selectedSizeTooltip = (selectedMeters.min > 0 || selectedMeters.max !== maxArea)\n && `${selectedMeters.min} - ${selectedMeters.max} m², ${Math.round(selectedMeters.min / 15)} - ${Math.round(selectedMeters.max / 15)} ${I18n.t('search_agent.configuration.employees.selector_currency')}`;\n\n let duplicateParsedData = JSON.parse(JSON.stringify(parsedData));\n let selectedKinds = requestParams.kinds;\n const hideSquareFilter = selectedKinds && selectedKinds.length === 1 && selectedKinds[0] === 'parking';\n const showOfficeSpaceCalculator = siteKey === 'dk' && (selectedKinds.length === 0 || selectedKinds.includes('office'));\n\n selectedKinds === undefined || selectedKinds.length === 0\n ? parsedData.map(elem => elem.count = elem.areas.reduce((accum, currentValue) => accum+currentValue.total_sum, 0))\n : duplicateParsedData.map(elem => {\n elem.areas.map(elem => elem.total_sum = locationsCountByKinds(selectedKinds, elem.sums));\n elem.count = elem.areas.reduce((accum, currentValue) => accum + currentValue.total_sum, 0);\n return elem;\n });\n\n\n return (\n \n
\n \n
\n
\n
\n
\n\n
\n \n
\n\n
\n
\n selectAll(e, duplicateParsedData)}\n />\n
\n\n
\n
toggleMobileFilters(true) : openFiltersModal}>\n
\n
\n
{ I18n.t('properties.filter.tab_toggle_button') }
\n
\n
\n\n { showOfficeSpaceCalculator &&\n
\n \n \n }\n
\n\n { ((onlyInternalLocations && mapIsOpen) || !onlyInternalLocations) &&\n
\n { mapIsOpen\n ?
\n :
\n }\n
{ mapIsOpen ? 'List' : I18n.t(\"lb_showroom.showroom.list.map\") }
\n
\n }\n\n
\n
\n
\n
\n
\n
\n\n { (filtersModalIsOpen || mobileFiltersOn) &&\n\n
\n
\n
\n
toggleMobileFilters(false) : () => closeFiltersModal}\n size={isMobileMenu ? 24 : 32}\n />\n { I18n.t('properties.filter.tab_toggle_button') }
\n { showClearFiltersButton &&\n \n { I18n.t('apps.lb_showroom.filters.clear_filters') }\n
\n }\n \n\n
\n }>\n\n
\n \n
\n\n
setClearSuitableFor(prevState => !prevState)}\n />\n\n \n selectAll(e, duplicateParsedData)}\n />\n
\n\n { frontendLeasePrices\n ? \n \n \n \n
\n : null\n }\n\n { !hideSquareFilter &&\n \n\n
\n \n
{areaFilterTitle}
\n
\n
\n
{ I18n.t('activemodel.attributes.service_request.employee_count') }
\n
{areaFilterText}
\n\n
\n
\n\n
\n\n
setClearFacilities(prevState => !prevState)}\n />\n\n\n { mobileFiltersOn &&\n \n \n\n { showApplyFiltersButton &&\n \n
\n \n { I18n.t('lb_showroom.showroom.list.apply_filters') }\n
\n
\n
\n
\n );\n};\n\nListViewMainFilter.propTypes = {\n requestedParams: PropTypes.oneOfType([PropTypes.object]),\n};\n\nListViewMainFilter.defaultProps = {\n requestParams: {}\n};\n\nexport default React.memo(ListViewMainFilter);\n","import React, { Suspense, useContext, useEffect, useState } from 'react';\nimport classNames from 'classnames';\nimport Select from \"react-select\";\nimport Switch from \"react-switch\";\nimport { isMobileOnly } from 'react-device-detect';\nimport 'react-dropdown/style.css';\n\nimport { SvgIco } from '../../SharedComponents/Icons';\nimport { Context } from \"../index\";\n\nimport './index.sass';\n\n\nconst ListViewSortBar = () => {\n\n const {\n changePerPage,\n keywords,\n listViewAsList,\n mapOptions,\n onlyInternalLocations,\n requestParams,\n section,\n setListViewAsList,\n // siteKey,\n sortLocationsBy,\n tawkIsLoaded,\n toggleMap,\n } = useContext(Context);\n\n const { kinds: selectedKinds, per_page: perPage, sort_by: sortBy } = requestParams;\n const { countryAlpha2, frontendLeasePrices, } = keywords;\n\n // const disableMap = onlyInternalLocations && (siteKey === 'dk' || countryAlpha2 === 'dk');\n const listViewSwitcherClasses = classNames(\"sort-bar__layout-switcher-pill\", { \"active\": listViewAsList });\n const gridViewSwitcherClasses = classNames(\"sort-bar__layout-switcher-pill\", { \"active\": !listViewAsList });\n const mapIsOpen = mapOptions.open;\n\n const quantityOptions = [\n {value: \"12\", label:`12 ${ I18n.t('lb_showroom.showroom.list.per_page') }`},\n {value: \"30\", label:`30 ${ I18n.t('lb_showroom.showroom.list.per_page') }`},\n {value: \"60\", label:`60 ${ I18n.t('lb_showroom.showroom.list.per_page') }`},\n {value: \"90\", label:`90 ${ I18n.t('lb_showroom.showroom.list.per_page') }`},\n ];\n\n const sortTypeOptions = [\n {value: 'created_at|desc', label: I18n.t('generic.date')},\n {value: 'area_from|asc', label: `${I18n.t('generic.area')}, ${I18n.t('generic.low_to_high')}`},\n {value: 'area_from|desc', label: `${I18n.t('generic.area')}, ${I18n.t('generic.high_to_low')}`},\n {value: 'address_line_1|asc', label: `${I18n.t('generic.address')} ${I18n.t('generic.alphabet_order')}`},\n {value: 'address_line_1|desc', label: `${I18n.t('generic.address')} ${I18n.t('generic.alphabet_order_reverse')}`},\n {value: 'virtual_tour|desc', label:I18n.t('locations.scores.virtual_tour')},\n {value: 'energy_rating|asc', label: `${I18n.t('activerecord.attributes.property.energy_rating')}, A -> G`},\n {value: 'energy_rating|desc', label: `${I18n.t('activerecord.attributes.property.energy_rating')}, G -> A`},\n {value: 'score|desc', label:I18n.t('locations.sort_by.score'), className: !selectedSortType ? ' is-selected' : '' },\n ];\n\n const sortingPriceFieldName = section === 'lease' ? 'yearly_rent_per_m2_amount_from' : 'sale_price';\n\n frontendLeasePrices && sortTypeOptions.splice(3, 0,\n {value: sortingPriceFieldName + '|asc', label: `${I18n.t('generic.price')}, ${I18n.t('generic.low_to_high')}`},\n {value: sortingPriceFieldName + '|desc', label: `${I18n.t('generic.price')}, ${I18n.t('generic.high_to_low')}`},\n );\n\n const [selectedSortType, setSelectedSortType] = useState(sortBy ? sortTypeOptions.filter(option => sortBy === option.value)[0] : sortTypeOptions[0]);\n const [selectedPerPage, setSelectedPerPage] = useState(perPage ? quantityOptions.filter(option => option.value === perPage)[0] : quantityOptions[0]);\n\n\n useEffect(() => {\n // need to rewrite and remove react-select\n const perPageLabel = document.createElement(\"P\");\n const perPageLabelContent = document.createTextNode(`${I18n.t('views.locations.show.per_page_label')}:`);\n const sortByLabel = document.createElement(\"P\");\n const sortByLabelContent = document.createTextNode(`${I18n.t('lb_showroom.showroom.list.sort_by')}:`);\n\n perPageLabel.appendChild(perPageLabelContent);\n document.querySelector('.per-page__control').insertBefore(perPageLabel, document.querySelector('.per-page__control').childNodes[0]);\n\n sortByLabel.appendChild(sortByLabelContent);\n document.querySelector('.sort-by__control').insertBefore(sortByLabel, document.querySelector('.sort-by__control').childNodes[0]);\n }, []);\n\n\n useEffect(() => {\n sortBy !== selectedSortType.value && setSelectedSortType(sortBy ? sortTypeOptions.filter(option => sortBy === option.value)[0] : sortTypeOptions[0]);\n }, [sortBy]);\n\n useEffect(() => {\n perPage !== selectedSortType.value && setSelectedPerPage(perPage ? quantityOptions.filter(option => option.value === perPage)[0] : quantityOptions[0]);\n }, [perPage]);\n\n\n useEffect(() => {\n // remove-tawk-chat-when-open-map\n if (tawkIsLoaded) {\n // In case there's going to be a problem with API or internet\n // to avoid main thread overwork\n let counter = 200;\n\n (function toggleTawk() {\n try {\n if (Tawk_API.onLoaded) {\n mapIsOpen ? Tawk_API.hideWidget() : Tawk_API.showWidget();\n } else {\n if (counter !== 0) {\n counter = --counter;\n setTimeout(toggleTawk, 100);\n }\n }\n } catch (error) {\n if (counter !== 0) {\n counter = --counter;\n setTimeout(toggleTawk, 100);\n }\n }\n })();\n }\n }, [tawkIsLoaded]);\n\n\n const handleListView = () => {\n setListViewAsList(true);\n localStorage && localStorage.setItem('viewedAsList', 'true');\n };\n\n\n const handleGridView = () => {\n setListViewAsList(false);\n localStorage && localStorage.setItem('viewedAsList', 'false');\n };\n\n\n const changeSortType = (e) => {\n setSelectedSortType(sortTypeOptions.filter(option => e.value === option.value)[0]);\n sortLocationsBy(e.value);\n };\n\n\n const handleChangePerPage = (e) => {\n setSelectedPerPage(quantityOptions.filter(option => option.value === e.value)[0]);\n changePerPage(e.value);\n };\n\n\n const selectedSortTypeOption = () => {\n // To prevent page fall in case sort decrease change in url string\n const strictSelectedOption = sortTypeOptions.filter(option => selectedSortType === option.value);\n const selectedSortTypeValue = selectedSortType && selectedSortType.value;\n\n if (strictSelectedOption.length) {\n return strictSelectedOption[0];\n } else {\n const optionalSelect = sortTypeOptions.filter(option => option.value.includes(selectedSortTypeValue.slice(0, selectedSortTypeValue.indexOf('|'))));\n return optionalSelect.length ? optionalSelect[0] : null;\n }\n };\n\n\n const defaultSortType = (selectedSortType && selectedSortTypeOption()) || sortTypeOptions[sortTypeOptions.length - 1];\n const defaultQuantity = perPage ? quantityOptions.filter(option => option.value === perPage)[0] : quantityOptions[0];\n\n\n return (\n
\n
\n
\n { !isMobileOnly && !mapIsOpen &&\n
\n }\n\n
\n\n
\n
\n
\n \n \n
\n\n
\n\n
\n \n
\n
\n
\n\n { ((onlyInternalLocations && mapIsOpen) || !onlyInternalLocations) &&\n
\n
\n
\n }\n
\n
\n
\n
\n );\n};\n\n\nexport default ListViewSortBar;\n","import React, { Fragment, Suspense, useContext, useEffect, useState } from 'react';\nimport ReactPaginate from 'react-paginate';\nimport { debounce } from 'throttle-debounce';\nimport { isMobileOnly } from 'react-device-detect';\n\nimport { SvgIco } from '../../SharedComponents/Icons';\nimport { Context } from \"../index\";\n\nimport './index.sass';\n\nconst MapSection = React.lazy(() => import('../MapSection'));\nconst GridViewItemList = React.lazy(() => import('../GridViewItem/GridViewItemList'));\nconst ListViewItemsList = React.lazy(() => import('../ListViewItems/ListViewItemsList'));\n\n\nconst SortComponent = () => {\n\n const {\n changePage,\n hoveredLocationId,\n isLoaded,\n keywords,\n listViewAsList,\n locationsByPostalDistricts,\n mapOptions,\n nearbyLocationsLimit,\n requestParams,\n serverErrorListView,\n setHoveredLocationId,\n totalLocationsCount,\n windowWidth,\n } = useContext(Context);\n\n const [showBottomPagination, setShowBottomPagination] = useState(false);\n\n const { newSearchAgentPath } = keywords;\n\n\n useEffect(() => {\n window.addEventListener('scroll', debounce(15, () => handleBottomPagination()));\n }, []);\n\n\n const handleBottomPagination = () => {\n const paginationElem = document.getElementById('main-pagination');\n const paginationBottom = paginationElem && paginationElem.getBoundingClientRect().bottom;\n const currentScreenTop = window.screenTop;\n\n currentScreenTop > paginationBottom\n ? setShowBottomPagination(true)\n : setShowBottomPagination(false);\n };\n\n\n const handlePageClick = (data) => {\n changePage(data.selected + 1);\n setTimeout(() => window.scrollTo(0, 0), 10);\n };\n\n\n const generatePaginationLink = (page) => {\n const { origin, pathname } = window.location;\n\n return `${origin}${pathname}${page > 1 ? `?page=${page}` : ''}`;\n };\n\n\n const defaultItemsPerPage = 12;\n const mapIsOpen = mapOptions.open;\n const mapLoaded = mapOptions.loaded;\n const perPage = requestParams.per_page ? requestParams.per_page : defaultItemsPerPage;\n const initialPage = requestParams.page ? (Number(requestParams.page) - 1) : 1;\n const showPagination = locationsByPostalDistricts && locationsByPostalDistricts.length > 0 && totalLocationsCount + nearbyLocationsLimit > perPage;\n const mapClass = `list-view-map ${ mapOptions.root } ${mapIsOpen ? 'col-12 col-lg-4' : 'hidden'}`;\n const styles = {\n spinnerMargin: !listViewAsList ? { paddingBottom: '30px' } : null,\n containerMargin: (listViewAsList && showPagination) ? { marginTop: '32px' } : {marginTop: '64px'}\n };\n\n const SkeletonLoader = ({ className, count }) =>\n
\n { Array.apply('test', Array(count)).map((elem, index) =>\n
\n )}\n
;\n\n\n const skeletonGridViewLoader =\n
\n
\n { Array.apply('test', Array(perPage)).map((key, index) =>\n
\n \n
\n )}\n
\n
;\n\n\n const skeletonListViewLoader =\n
\n { Array.apply('test', Array(perPage)).map((key, index) =>\n
\n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n
\n )}\n
;\n\n\n const locationsAsGrid =\n
\n \n ;\n\n\n const locationsAsList =\n
\n { windowWidth >= 768\n ? \n \n \n : locationsAsGrid\n }\n ;\n\n\n const pagination = showPagination &&\n
\n }\n previousLabel={}\n onPageChange={handlePageClick}\n pageCount={Math.ceil((totalLocationsCount + nearbyLocationsLimit) / perPage)}\n pageRangeDisplayed={isMobileOnly ? 1 : 2}\n hrefBuilder={(page) => generatePaginationLink(page)}\n />\n
;\n\n\n return (\n
\n\n
\n\n { isLoaded\n ? ( locationsByPostalDistricts.length\n ?\n ( listViewAsList && !mapIsOpen ? locationsAsList : locationsAsGrid )\n :\n
\n
\n
{ I18n.t('apps.lb_showroom.seach_area.no_results_title') }
\n
\n
\n
\n )\n : ( serverErrorListView\n ?\n
\n { serverErrorListView === 'server'\n ? I18n.t('generic.network-error')\n : I18n.t('generic.internet-issue-error')\n }\n \n { I18n.t('general.refresh-page') }\n \n
\n : !listViewAsList && !mapIsOpen\n ? skeletonGridViewLoader\n : skeletonListViewLoader\n )\n }\n\n
\n { pagination }\n
\n\n { showBottomPagination && !mapIsOpen && showPagination &&\n
\n { pagination }\n
\n }\n
\n\n { (mapIsOpen || mapLoaded) &&\n
\n }>\n
\n \n
\n }\n\n