\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 AreaFilter;\n","import React, { Fragment, useContext, useEffect, useState } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { apiProvider } from \"../../../api/core\";\nimport { requestBuilder } from \"../../../api/httpService\";\nimport { SvgIco } from '../../SharedComponents/Icons';\nimport { Context } from \"../index\";\n\nimport './index.sass';\n\n\nconst BottomSeo = () => {\n\n const {\n headerData,\n initialKinds,\n keywords,\n requestParams,\n setHeaderData,\n showSeo,\n siteKey,\n } = useContext(Context);\n\n const { descriptionWithAssets, extendedDescription, rating, streetName, seoStatistics } = headerData;\n const { avgScore, rateableId, ratingCreatePath, showRating, votesCount } = rating;\n const { geoName } = keywords;\n\n const [hoveredRatingStar, setHoveredRatingStar] = useState(null);\n\n const currentScore = +avgScore;\n const locationsKind = initialKinds && initialKinds.length === 1 ? '.' + initialKinds[0] : '';\n const count = requestParams.locationsCount === 1 ? 'one' : 'other';\n\n // {locationsKind === '.parking'} Related to Danish translation aspects\n const kind = I18n.t(`global.models.location.kinds${locationsKind}${locationsKind === '.parking' ? '.seo_statistics' : '.normal'}`);\n const translatedKinds = kind[count] ? kind[count] : kind;\n const ratingHeadline = I18n.t('generic.rating_text', {\n selected_kinds: translatedKinds,\n selected_area: geoName,\n });\n\n // isCoworkingDk - related to Danish translation aspects\n const isCoworkingDk = siteKey === 'dk' && locationsKind === '.coworking' && true;\n const declinedLocationKinds =\n isCoworkingDk\n ? I18n.t(`global.models.location.kinds${locationsKind}.seo_statistics`)\n : translatedKinds;\n\n const availableLocationsLinkI18n = I18n.t(\n 'apps.lb_showroom.bottom_seo.overview_link',\n {\n pdf_link: seoStatistics && seoStatistics.fullOverviewLink,\n location_kinds: declinedLocationKinds,\n location: geoName,\n },\n );\n\n const topVievedLocationsHeadline = I18n.t(\n 'apps.lb_showroom.bottom_seo.table_top_locations_headline',\n {\n locations_count: seoStatistics && seoStatistics.topViewed.length,\n location_kinds: declinedLocationKinds,\n location: geoName,\n },\n ).replace(/\\u00A0/g, ' ');\n\n\n useEffect(() => {\n initYouTubeVideos();\n }, []);\n\n\n const updateAreaRating = (score) => {\n const requestParams = {\n kind: 'list_view',\n load_stars_widget: 'false',\n id: rateableId,\n score,\n };\n\n apiProvider\n .post(ratingCreatePath, requestBuilder(requestParams))\n .then(response => response &&\n setHeaderData(prevData => ({\n ...prevData,\n rating: {\n ...prevData.rating,\n avgScore: response.rating_data.avg_score,\n votesCount: response.rating_data.votes_count,\n }\n }))\n );\n };\n\n\n const handleRatingHover = (e) =>\n setHoveredRatingStar(e.target.id);\n\n\n const handleRatingOut = () =>\n setHoveredRatingStar(null);\n\n\n const initYouTubeVideos = () => {\n const labnolIframe = (div) => {\n const iframe = document.createElement('iframe');\n iframe.setAttribute('src', 'https://www.youtube.com/embed/' + div.dataset.id + '?autoplay=1&rel=0');\n iframe.setAttribute('frameborder', '0');\n iframe.setAttribute('allowfullscreen', '1');\n iframe.setAttribute('autoplay', '1');\n iframe.setAttribute('allow', 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture');\n div.parentNode.replaceChild(iframe, div);\n };\n\n const playerElements = document.getElementsByClassName('youtube-player');\n\n if (playerElements && playerElements.length) {\n for (let n = 0; n < playerElements.length; n++) {\n const videoId = playerElements[n].dataset.id;\n const div = document.createElement('div');\n\n div.setAttribute('data-id', videoId);\n\n const thumbNode = document.createElement('img');\n\n thumbNode.src = 'https://i.ytimg.com/vi/ID/hqdefault.jpg'.replace('ID', videoId);\n div.appendChild(thumbNode);\n\n const playButton = document.createElement('div');\n\n playButton.setAttribute('class', 'play');\n div.appendChild(playButton);\n div.onclick = function () {\n labnolIframe(this);\n };\n\n playerElements[n].appendChild(div);\n }\n }\n };\n\n\n const capitalize = (text) =>\n text.charAt(0).toUpperCase() + text.substring(1);\n\n\n const diffIcon = (diff) =>\n diff > 0\n ?
↑\n : (diff < 0 ?
↓ :
);\n\n\n const videoFrame = (url) => {\n const videoId = url.split('/').pop();\n\n return
;\n };\n\n\n if (showSeo && !streetName) {\n return (\n
\n { showRating ? (\n
\n
\n
\n\n
\n {ratingHeadline}\n \n\n
\n updateAreaRating(e.target.id)}\n onMouseOver={handleRatingHover}\n onMouseOut={handleRatingOut}>\n \n \n\n updateAreaRating(e.target.id)}\n onMouseOver={handleRatingHover}\n onMouseOut={handleRatingOut}>\n { !hoveredRatingStar\n ? = 2 ? 'star' : currentScore > 1 ? 'star-half' : 'star-outlined' } size={20} />\n : = 2 ? 'star' : 'star-outlined' } size={20} />\n }\n \n updateAreaRating(e.target.id)}\n onMouseOver={handleRatingHover}\n onMouseOut={handleRatingOut}>\n { !hoveredRatingStar\n ? = 3 ? 'star' : currentScore > 2 ? 'star-half' : 'star-outlined' } size={20} />\n : = 3 ? 'star' : 'star-outlined' } size={20} />\n }\n \n updateAreaRating(e.target.id)}\n onMouseOver={handleRatingHover}\n onMouseOut={handleRatingOut}\n >\n { !hoveredRatingStar\n ? = 4 ? 'star' : currentScore > 3 ? 'star-half' : 'star-outlined' } size={20} />\n : = 4 ? 'star' : 'star-outlined' } size={20} />\n }\n \n updateAreaRating(e.target.id)}\n onMouseOver={handleRatingHover}\n onMouseOut={handleRatingOut}\n >\n { !hoveredRatingStar\n ? 4 ? 'star-half' : 'star-outlined' } size={20} />\n : = 5 ? 'star' : 'star-outlined' } size={20} />\n }\n \n \n { currentScore + ` (${votesCount} ${I18n.t('generic.star_rating_votes')})`}\n \n
\n
\n
\n
\n ) : null }\n\n { descriptionWithAssets && descriptionWithAssets.length > 0\n ?\n
\n { descriptionWithAssets.map((section, index) => (\n
\n
\n { section.headline }\n
\n
\n { section.asset &&\n section.asset.url &&\n (section.asset.type === 'img' ||\n section.asset.type === 'map') && (\n
\n )}\n
\n { section.asset &&\n section.asset.url &&\n section.asset.type === 'video' && (\n
\n { videoFrame(section.asset.url) }\n
\n )}\n
\n
\n ))}\n
\n : extendedDescription &&\n
\n }\n\n { seoStatistics && (\n
\n
\n { isCoworkingDk\n ? I18n.t(\n 'apps.lb_showroom.bottom_seo.headline_coworking_dk',\n { location_kinds: translatedKinds, location: geoName },\n )\n : I18n.t('apps.lb_showroom.bottom_seo.table_headline', {\n location_kinds: translatedKinds,\n location: geoName,\n })\n }\n
\n\n
\n
\n
\n
\n { isCoworkingDk\n ? I18n.t(\n 'apps.lb_showroom.bottom_seo.headline_paragraph_coworking_dk',\n {\n location_kinds: translatedKinds,\n location: geoName,\n },\n )\n : I18n.t(\n 'apps.lb_showroom.bottom_seo.table_headline_paragraph',\n {\n location_kinds: translatedKinds,\n location: geoName,\n },\n )}\n
\n
\n
\n
\n\n
\n
\n
\n \n \n | \n { capitalize(translatedKinds) }: {geoName}\n | \n \n { seoStatistics.headline[0] }\n | \n
\n { seoStatistics.rowsContent.map((content, indexRows) => (\n \n | {content.description} | \n { content.cells.map(\n (cell, index) =>\n index === 0 && {cell} | ,\n )}\n
\n ))}\n \n
\n\n
\n \n\n \n | \n { capitalize(translatedKinds) }: { geoName }\n | \n\n { seoStatistics.headline.map((headline, index) => (\n \n { index === seoStatistics.headline.length - 1\n ?\n \n \n { I18n.t('apps.lb_showroom.bottom_seo.table_change') }\n \n \n ({ headline })\n \n \n :\n headline\n }\n | \n ))}\n
\n\n { seoStatistics.rowsContent.map((content, indexRows) => (\n \n | {content.description} | \n { content.cells.map((cell, index) =>\n index === content.cells.length - 1\n ?\n \n { cell } { diffIcon(content.percentageChange) }\n | \n :\n {cell} | \n ,\n )}\n
\n ))}\n \n
\n
\n
\n \n\n
\n
\n )}\n
\n );\n } else {\n return null;\n }\n}\n\nexport default BottomSeo;\n\nBottomSeo.propTypes = {\n showSeo: PropTypes.bool,\n};\n\nBottomSeo.defaultProps = {\n showSeo: true,\n};\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 HeaderSection = () => {\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 HeaderSection;\n\nHeaderSection.propTypes = {\n showSeo: PropTypes.bool,\n};\n\nHeaderSection.defaultProps = {\n showSeo: true,\n}\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 LocationsContent = () => {\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
\n )\n};\n\n\nexport default LocationsContent;\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