dispatch(toggleShowFullForm())}>
\r\n - \r\n {result &&\r\n result.map((item, index, array) => {\r\n const { category, showAll, url, hasImage, imageSource, name } = item;\r\n const imageVisible = hasImage && imageSource;\r\n\r\n return (\r\n
- {category} \r\n }\r\n {name &&\r\n
{name}
\r\n \r\n \r\n }\r\n \r\n \r\n dispatch(toggleShowFullForm())}>\r\n \r\n {translate('general.search')}\r\n \r\n \r\n \r\n {\r\n const text = encodeURIComponent(event.target.value);\r\n dispatch(setSearchQuery(text));\r\n debouncedQuery(dispatch, text);\r\n }}\r\n onKeyDown={(event) => dispatch(handleKeyDown(event, { searchUrl }))}\r\n onClick={handleInputClick}\r\n ref={searchInput}\r\n />\r\n {\r\n e.preventDefault();\r\n dispatch(handleClickSearch({ searchUrl }));\r\n }}\r\n >\r\n \r\n {translate('general.search')}\r\n \r\n\r\n {showResult && (\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default QuickSearch;\r\n","import React, { Fragment } from 'react';\nimport { useDispatch } from 'react-redux';\nimport {\n toggleShowFullForm,\n} from '../Actions/QuickSearch.action';\n\nconst QSR = 'quick-search-result-hs';\nconst QSR_ITEM = `${QSR}__item`;\n\nconst sameCategory = (item, index, array) =>\n (index > 0 && array[index - 1].category === array[index].category) || item.showAll;\n\nconst hasLinkDisabledClass = (url) => {\n return !url ? `${QSR}__link--disabled` : ``;\n};\n\nconst itemLinkClassName = (showAll, url) =>\n `${QSR}${showAll ? '__show-all' : '__link ' + hasLinkDisabledClass(url)}`;\n\nconst selectedItemClassName = (selectedItem, index) => {\n return (selectedItem === index) ? `${QSR_ITEM}--selected` : ``;\n};\n\nconst QuickSearchResult = ({ result, selectedItem, searchUrl }) => {\n const dispatch = useDispatch();\n return (\n <>\n dispatch(toggleShowFullForm())}>
\n - \n {result &&\n result.map((item, index, array) => {\n const { category, showAll, url, hasImage, imageSource, name } = item;\n const imageVisible = hasImage && imageSource;\n\n return (\n
- {category} \n }\n {name &&\n
{name}
\n \n \n }\n \n \n dispatch(toggleShowFullForm())}>\n \n {translate('hs.general.search')}\n \n \n \n {\n const text = encodeURIComponent(event.target.value);\n dispatch(setSearchQuery(text));\n debouncedQuery(dispatch, text);\n }}\n onKeyDown={(event) => dispatch(handleKeyDown(event, { searchUrl }))}\n onClick={handleInputClick}\n ref={searchInput} \n />\n {\n e.preventDefault();\n dispatch(handleClickSearch({ searchUrl }));\n }}\n >\n {/**/}\n {/*{translate('general.search')}*/}\n \n\n {showResult && (\n
\n \n );\n};\n\nexport default QuickSearch;\n","import React from 'react';\nimport { useSelector } from 'react-redux';\n\nconst GlobeItem = () => {\n const marketLanguageItems = useSelector(\n (state) => state.navigation.marketLanguageItems\n );\n\n const handleLanguageChange = (e) => {\n const { value } = e.target;\n window.location = value;\n };\n\n return (\n <>\n {marketLanguageItems && marketLanguageItems.length > 1 && (\n \n s.isSelected)[0].url}\n >\n {marketLanguageItems.map((i, k) => (\n \n {i.name}\n \n ))}\n \n \n
\n )}\n \n );\n};\n\nexport default GlobeItem;\n\n","import React, { useState, useRef, useEffect } from 'react';\r\nimport { translate } from '../Services/translation';\r\nimport { useSelector } from 'react-redux';\r\nimport GlobeItem from './GlobeItem';\r\n\r\n\r\nconst NavigationItem = ({\r\n links = [],\r\n contentLink = null,\r\n renderAddiontalLinks = true,\r\n}) => {\r\n const topLinks = useSelector((state) => state.navigation.topLinkList);\r\n const marketLanguageItems = useSelector(\r\n (state) => state.navigation.marketLanguageItems\r\n );\r\n\r\n const [isMenuOpen, setIsMenuOpen] = useState(false);\r\n\r\n useEffect(() => {\r\n const body = document.querySelector(\".js-body\");\r\n if (isMenuOpen) {\r\n body.classList.add(\"disable-scroll--mobile\");\r\n }\r\n else {\r\n body.classList.remove(\"disable-scroll--mobile\");\r\n }\r\n }, [isMenuOpen]);\r\n\r\n\r\n const menuRef = useRef(null);\r\n const toggleMenu = (e, toggleIsMenuOpen) => {\r\n e.preventDefault();\r\n menuRef.current.classList.toggle('navbar__menu--show');\r\n if (toggleIsMenuOpen) {\r\n setIsMenuOpen(!isMenuOpen);\r\n }\r\n };\r\n\r\n const bannerTitle = contentLink && contentLink.bannerTitle ? contentLink.bannerTitle : null;\r\n const bannerImage = contentLink && contentLink.bannerImageUrl != null ? contentLink.bannerImageUrl : null;\r\n const bannerBannerHeaderTextcolor = contentLink && contentLink.bannerTitleColor != null ? contentLink.bannerTitleColor : '';\r\n const bannerBannerCTAColorSettings = contentLink && contentLink.bannerCTAColorSettings != null ? contentLink.bannerCTAColorSettings : '';\r\n const bannerCTAPlacement = contentLink && contentLink.bannerCTAPlacement != null ? contentLink.bannerCTAPlacement : '';\r\n const bannerLinkToPage = contentLink && contentLink.bannerLinkToPage != null ? contentLink.bannerLinkToPage : '';\r\n const bannerCTA = contentLink && contentLink.bannerCTA != null ? contentLink.bannerCTA : '';\r\n\r\n const boldColumnText = contentLink && contentLink.fontWeightBold ? 'font-bold' : 'font-regular';\r\n\r\n const showColumns = contentLink && contentLink.showMegaMenuColumns ? true : false;\r\n\r\n const showNavigationClass = showColumns ? 'navigation-row' : 'navigation-col';\r\n\r\n //url for column header\r\n const columnHeaderCategoryUrl = contentLink && contentLink.useCategoryLinkForColumnHeader ? contentLink.categoryLinkToColumnHeader : null;\r\n const columnHeaderPageUrl = contentLink && !contentLink.useCategoryLinkForColumnHeader ? contentLink.pageLinkToColumnHeader : null;\r\n\r\n let columnHeaderUrl = \"#\";\r\n\r\n if (columnHeaderCategoryUrl != null || columnHeaderPageUrl != null) {\r\n columnHeaderUrl = columnHeaderCategoryUrl != null ? columnHeaderCategoryUrl : columnHeaderPageUrl;\r\n }\r\n\r\n //url for banner\r\n const bannerCategoryUrl = contentLink && contentLink.useCategoryLinkForBanner ? contentLink.bannerLinkToCategory : null;\r\n const bannerPageUrl = contentLink && !contentLink.useCategoryLinkForBanner ? contentLink.bannerLinkToPage : null;\r\n\r\n let bannerUrl = \"#\";\r\n\r\n if (bannerCategoryUrl != null || bannerPageUrl != null) {\r\n bannerUrl = bannerCategoryUrl != null ? bannerCategoryUrl : bannerPageUrl;\r\n }\r\n\r\n const additionClassColumnHeader =\r\n contentLink && contentLink.attributesColumnHeader\r\n ? contentLink.attributesColumnHeader.cssValue\r\n : null;\r\n\r\n const additionClass =\r\n contentLink && contentLink.attributes\r\n ? contentLink.attributes.cssValue\r\n : null;\r\n const selectedClass =\r\n contentLink && contentLink.isSelected ? 'navbar__link--selected' : '';\r\n const hasChildrenClass = links.length > 0 ? 'has-children' : null;\r\n const hasNameOrChildren = (link) =>\r\n link.name || (link.links || []).length > 0 || bannerTitle != null;\r\n const hideSubSubLinksClass =\r\n contentLink && contentLink.showSubSubLinks ? \"\" : \"hide-third-level\";\r\n let navbarStateIcon = `navbar__icon${isMenuOpen ? '--close' : '--menu'}`;\r\n\r\n const handleLanguageChange = (e) => {\r\n const { value } = e.target;\r\n window.location = value;\r\n };\r\n\r\n document.addEventListener('DOMContentLoaded', function () {\r\n const navigationRows = document.querySelectorAll('.navigation-row');\r\n\r\n navigationRows.forEach(function (row) {\r\n const navigationBannerDesktop = row.querySelector('.navigation-banner-desktop');\r\n\r\n if (navigationBannerDesktop) {\r\n row.classList.add('contain-banner');\r\n }\r\n });\r\n });\r\n\r\n return (\r\n <>\r\n {!contentLink ? (\r\n \r\n
\r\n \r\n )}\r\n\r\n {bannerTitle == null || bannerTitle == undefined ? (\r\n links.length > 0 &&\r\n \r\n 
\r\n
\r\n {bannerTitle}
\r\n {bannerCTA.length > 0 &&\r\n\r\n \r\n
\r\n }\r\n \r\n
\r\n ) : (\r\n /*Banner content*/\r\n \r\n \r\n {!contentLink ? (\r\n toggleMenu(e)}\r\n >\r\n ) : (\r\n <>\r\n toggleMenu(e)}\r\n\r\n >\r\n toggleMenu(e)}\r\n dangerouslySetInnerHTML={{\r\n __html: contentLink.name,\r\n }}\r\n >\r\n \r\n )}\r\n
\r\n - \r\n {links.length > 0 &&\r\n links.map(\r\n (link, index) =>\r\n hasNameOrChildren(link) && (\r\n
- \r\n
\r\n \r\n
\r\n \r\n )}\r\n \r\n );\r\n};\r\n\r\nexport default NavigationItem;\r\n","import React from 'react';\r\nimport NavigationItem from './NavigationItem';\r\nimport { useSelector } from 'react-redux';\r\n\r\nconst Navigation = () => {\r\n const contentLinks = useSelector((state) => state.navigation.contentLinks);\r\n const topLinks = useSelector((state) => state.navigation.topLinkList);\r\n\r\n return {bannerTitle}
\r\n {bannerCTA.length > 0 &&\r\n\r\n \r\n
\r\n }\r\n \n
\n );\n};\nexport default FilterSlider;\n","import React, { Fragment, useCallback, useEffect, useRef } from 'react';\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport { translate } from '../Services/translation';\r\nimport { query, searchFacetChange } from '../Actions/FacetedSearch.action';\r\nimport { useStateWithCallbackLazy } from 'use-state-with-callback';\r\nimport FilterSlider from '../Haki/Components/FilterSlider';\r\n\r\nconst FacetedSearchGroup = ({ group }) => {\r\n const [collapsed, setCollapsed] = useStateWithCallbackLazy(false);\r\n const showLessItemCount = useRef(5);\r\n const list = useRef(null);\r\n const showLess = useRef(null);\r\n const showMore = useRef(null);\r\n const listTop = useRef(null);\r\n const showLessBottom = useRef(null);\r\n const showMoreBottom = useRef(null);\r\n const firstRender = useRef(true);\r\n\r\n const toggleShowMore = useCallback(() => {\r\n setCollapsed(\r\n (prevState) => !prevState,\r\n (collapsed) => {\r\n list.current.style.height = `${\r\n (collapsed ? showLessBottom.current : showMoreBottom.current) -\r\n listTop.current\r\n }px`;\r\n }\r\n );\r\n }, [setCollapsed]);\r\n\r\n useEffect(() => {\r\n // Make sure it is executed only once.\r\n // firstRender is used to prevent eslint warning when having empty dependencies array\r\n if (!firstRender.current) return;\r\n\r\n firstRender.current = false;\r\n\r\n const {\r\n height: listHeight,\r\n top: listPosTop,\r\n } = list.current.getBoundingClientRect();\r\n\r\n listTop.current = listPosTop;\r\n showLessBottom.current = showLess.current\r\n ? showLess.current.getBoundingClientRect().bottom\r\n : null;\r\n showMoreBottom.current = showMore.current.getBoundingClientRect().bottom;\r\n\r\n const visible = listHeight !== 0;\r\n const tooMuchItem = group.options.length > showLessItemCount.current;\r\n visible && tooMuchItem && toggleShowMore();\r\n }, [group, toggleShowMore]);\r\n\r\n return (\r\n <>\r\n \n \n \n
\n \n
\n - \r\n
{group.label}
\r\n\r\n {group.options &&\r\n group.options.map((item, itemIndex, array) => {\r\n return (\r\n \r\n
\r\n )\r\n );\r\n};\r\n\r\nexport default FacetedSearch;\r\n","import React from 'react';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { translate } from '../Services/translation';\r\nimport {\r\n submitSearchFacet,\r\n toggleVisibleDropdownMenu,\r\n} from '../Actions/FacetedSearch.action';\r\n\r\nconst FacetedSearchCompact = ({ facetFilters, onFacetChange }) => {\r\n const dispatch = useDispatch();\r\n const { visibleDropdownMenu } = useSelector((state) => state.facetedSearch);\r\n\r\n return (\r\n Filter
\r\n {facetFilters.map((group, groupIndex) => (\r\n- \r\n {facetFilters &&\r\n facetFilters.map(\r\n (group, groupIndex, array) =>\r\n group.options &&\r\n group.options.length > 0 && (\r\n
- \r\n
- \r\n {group.options &&\r\n group.options.map((item, itemIndex, array) => (\r\n
\r\n handleClickHeader(index)}\r\n >\r\n {accordion.props.header || ''}\r\n
\r\n \r\n ));\r\n\r\n const panels = accordions.map((accordion, index) => (\r\n \r\n \r\n {panels}\r\n
\r\n );\r\n};\r\n","import React, { Fragment } from 'react';\r\n\r\nconst SubNavCompact = ({ subNavigation }) => (\r\n \r\n);\r\n\r\nconst displaySubNav = (subnav) =>\r\n subnav && (\r\n - \r\n {subnav.map(({ name, url, isSelected, links }, index) => (\r\n
\r\n (window.location = event.target.value)}\r\n >\r\n {sortCriteria &&\r\n sortCriteria.map(({ text, value, selected }, index) => (\r\n \r\n ))}\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default SortCriteriaCompact;\r\n","import React from 'react';\r\nimport { useDispatch } from 'react-redux';\r\nimport { searchFacetChange } from '../Actions/FacetedSearch.action';\r\nimport { translate } from '../Services/translation';\r\n\r\nconst SELECTED_FILTER = \"selected-filter\"\r\n\r\nconst FilterTags = ({ facetFilters, navigationTheme }) => {\r\n const dispatch = useDispatch();\r\n\r\n const selectedFacetGroup = facetFilters.filter(\r\n (filter) => filter.selectedOptions.length > 0\r\n );\r\n\r\n const selectedFacetOption = selectedFacetGroup.reduce(\r\n (accumulator, group) => {\r\n if (!group) return accumulator;\r\n \r\n const { options, selectedOptions } = group;\r\n const groupOptions = options\r\n .filter((option) => selectedOptions.includes(option.id))\r\n .map((option) => ({ ...option, group }));\r\n return [...accumulator, ...groupOptions];\r\n },\r\n []\r\n );\r\n\r\n const handleFilterTagClick = () => dispatch(searchFacetChange(option.group, option))\r\n const handleFacetClick = () => dispatch(searchFacetChange(group))\r\n\r\n if (selectedFacetGroup.length === 0) return null;\r\n\r\n return (\r\n \r\n \r\n {translate('search.yourfilter')} : \r\n {selectedFacetGroup &&\r\n selectedFacetGroup.map((group, index) => (\r\n \r\n {` ${group.label} `}\r\n \r\n ))}\r\n \r\n {navigationTheme === 'category' && (\r\n \r\n {translate('search.yourfilter')} : \r\n {selectedFacetOption &&\r\n selectedFacetOption.map((option, index) => (\r\n \r\n {` ${option.label} `}\r\n \r\n ))}\r\n \r\n )}\r\n
\r\n );\r\n};\r\n\r\nexport default FilterTags;\r\n","import React, {\r\n Fragment,\r\n useCallback,\r\n useState,\r\n useEffect,\r\n useRef,\r\n} from 'react';\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport FacetedSearchCompact from './FacetedSearchCompact';\r\nimport { AccordionPanel, Accordion } from '../Components/Accordion';\r\nimport { query } from '../Actions/FacetedSearch.action';\r\nimport SubNav from './SubNavCompact';\r\nimport SortCriteriaCompact from './SortCriteriaCompact';\r\nimport FilterTag from './FilterTags';\r\nimport { translate } from '../Services/translation';\r\nimport { updateFilterOption } from '../Actions/FacetedSearch.action';\r\nimport { PRODUCT_VIEW_CACHED } from '../constants';\r\n\r\nconst FacetedSearchCompactContainer = () => {\r\n const dispatch = useDispatch();\r\n const {\r\n subNavigation,\r\n sortCriteria,\r\n facetFilters: globalFacetFilters,\r\n navigationTheme,\r\n productsViewCachedId,\r\n } = useSelector((state) => state.facetedSearch);\r\n\r\n const [facetFilters, setFacetFilters] = useState(globalFacetFilters || []);\r\n const previousCachedId = useRef(productsViewCachedId);\r\n useEffect(() => {\r\n if (previousCachedId.current !== productsViewCachedId) {\r\n setFacetFilters(globalFacetFilters);\r\n previousCachedId.current = productsViewCachedId;\r\n }\r\n }, [globalFacetFilters, productsViewCachedId]);\r\n\r\n useEffect(() => {\r\n dispatch(query(window.location.search.substr(1) || '', false));\r\n }, [dispatch]);\r\n\r\n const onFacetChange = useCallback(\r\n (filter, option) => {\r\n setFacetFilters((prevFacetFilters) => {\r\n return updateFilterOption(prevFacetFilters, filter, option);\r\n });\r\n },\r\n [setFacetFilters]\r\n );\r\n\r\n const onSearchResultDataChange = (dom) => {\r\n if ([null, undefined].includes(dom)) {\r\n return;\r\n }\r\n const container = document.createElement('div');\r\n container.innerHTML = dom;\r\n const existingResult = document.querySelector('#search-result');\r\n const tempResult = container.querySelector('#search-result');\r\n const existingFilter = existingResult.querySelector(\r\n '#facetedSearchCompact'\r\n );\r\n const tempFilter = tempResult.querySelector('#facetedSearchCompact');\r\n const replace = (node, newNode) =>\r\n node.parentNode.replaceChild(newNode, node);\r\n // move existingFilter from existingResult to tempResult\r\n replace(tempFilter, existingFilter);\r\n // replace existingResult with tempResult ( newResult )\r\n replace(existingResult, tempResult);\r\n // bootstrap react components if any exists in the search result\r\n window.__litium.bootstrapComponents();\r\n };\r\n\r\n useEffect(() => {\r\n const productViewCached = window.__litium.cache\r\n ? window.__litium.cache[PRODUCT_VIEW_CACHED] || {}\r\n : {};\r\n if (!productViewCached.used) {\r\n productViewCached.used = true;\r\n const dom = productViewCached.productsView;\r\n dom && onSearchResultDataChange(dom);\r\n }\r\n });\r\n\r\n const empty = (array) => !(array && array.length);\r\n\r\n const subNavigations = !subNavigation ? null : [subNavigation];\r\n const sortCriterias =\r\n !sortCriteria || !sortCriteria.sortItems\r\n ? null\r\n : sortCriteria.sortItems;\r\n\r\n const hidden = [subNavigations, facetFilters, sortCriterias].every((arr) =>\r\n empty(arr)\r\n );\r\n\r\n return hidden ? null : (\r\n \r\n
\r\n )}\r\n \n
\n\n {newsLetterSignUpTitle}
\n{newsLetterSignUpText}
\n {!signupDone ?\n setEmail(event.target.value)} />\n \n
\n :\n \n {errorMessage && (\n \n \n
\n {errorMessage}
\n )}\n\n
\n\n }\n {translate('newsletter.signup.confirmation')}
\n\n
\n );\n };\n\n const mapLinkItems = ({ href, text }) => (\n \n
\n \n 
\n
\n {translate('countryselector.header')}
\n {'>'}\n\n
\n \n
\n {translate('countryselector.expand.header')}
\n \n {countrySelectorOptionsState && countrySelectorOptionsState.length > 0 &&\n countrySelectorOptionsState.map((country, index) => (\n country.url != null && country.name != null &&\n \n ))\n }\n\n \n {text}\n \n
\n );\n\n const getSectionText = ({ value }) => (\n \n );\n\n const mapSectionList = (i, k) =>\n k < 3 ? renderColumn(i, k) : renderFullWidth(i);\n\n const renderColumn = (\n { sectionTitle, sectionSubTitle, sectionLinkList, sectionText },\n index\n ) => (\n{sectionTitle}
\n{sectionSubTitle}
\n {getSectionText(sectionText)}\n{sectionLinkList?.map(mapLinkItems)}
\n {index === 1 && (\n \n {socialMediaLinks?.map(mapSocialMediaLinks)}\n
\n )}\n \n );\n\n const renderFullWidth = ({ sectionTitle, sectionLinkList }) => (\n \n
\n \n {sectionTitle != null && \n
\n {sectionTitle}
\n }\n {sectionLinkList?.map(({ href, text }) => (\n href =! null && text != null &&\n \n {text}\n \n \n ))}\n \n\n \n {text}\n \n
\n );\n\n const getSectionText = ({ value }) => (\n \n );\n\n const mapSectionList = (i, k) =>\n k < 3 ? renderColumn(i, k) : renderFullWidth(i);\n\n const renderColumn = (\n { sectionTitle, sectionSubTitle, sectionLinkList, sectionText },\n index\n ) => (\n{sectionTitle}
\n{sectionSubTitle}
\n {getSectionText(sectionText)}\n{sectionLinkList?.map(mapLinkItems)}
\n {index === 1 && (\n \n {socialMediaLinks?.map(mapSocialMediaLinks)}\n
\n )}\n \n );\n\n const renderFullWidth = ({ sectionTitle, sectionLinkList }) => (\n \n
\n ) :\n url != null && quantity > 0 ? (\n \n
\n \n \n {name}\n
\n \n {translate('product.information.documenttext')} ({fileExtension}) {fileSize}\n
\n \n
\n ) : (name && \n \n \n {articleNumber}\n {name}\n {quantity} {translate('content.product-bundle.quantity-show')}\n \n
\n\n
\n )\n};\n\nexport default Content;\n","import React from 'react';\nimport Content from './Content';\nimport { translate } from '../../../../Services/translation';\nimport {ACCORDION_PANEL_MEASUREMENTS} from \"../../../Constants\"\n\nconst AccordionTab = ({ id, type, isOpen, title, data, onClick }) => {\n const handleClick = () => onClick && onClick(id);\n\n const icon = isOpen ? '-' : '+';\n\n const renderData = () =>\n data.map((props, k) => \n {name}\n {value}\n
\n\n \n {title}\n {icon}\n \n {isOpen && (\n
\n );\n};\n\nexport default AccordionTab;\n","import React, { useState } from 'react';\nimport { useSelector } from 'react-redux';\nimport AccordionTab from './Tab';\nimport { translate } from '../../../Services/translation';\n\nconst Accordion = ({}) => {\n const acc = useSelector((state) => state.productPage.accordians);\n const _accordions = acc\n .filter((a) => a.data != null && a.data.length > 0)\n .map((a) => ({ ...a, isOpen: false }));\n const [accordions, setAccordions] = useState(_accordions);\n\n const handleClick = (id) => {\n const newAccordions = accordions.map((a, i) => {\n const isOpen = !a.isOpen && id === i;\n return { ...a, isOpen };\n });\n setAccordions(newAccordions);\n };\n\n return (\n <>\n \n {type === ACCORDION_PANEL_MEASUREMENTS ? (\n
\n )}\n - {renderData()}
\n
\n {renderData()}\n :\n <>{renderData()}\n )}\n \n {translate('product.information.paket.articleNumber')}\n {translate('product.information.paket.name')}\n {translate('product.information.paket.quantity')}\n
\n {translate('accordion.specification')}
\n {accordions.map(({ type, title, data, isOpen }, k) => (\n\n \n \n
\n );\n } else {\n return null;\n }\n\n};\n\nexport default ScrollButtons;\n","import { post, get } from '../Services/http';\n\nexport const verifyRecaptcha = (token) => {\n return post('/api/recaptcha/verifyRecaptcha', token);\n}\n\nexport const getSiteKey = async () => {\n const response = await get('/api/recaptcha/getsitekey')\n return response.text();\n}\n\n","import React, {useEffect, useState} from 'react';\nimport {getSiteKey, verifyRecaptcha} from \"../../Actions/Recaptcha.action\";\nimport {translate} from \"../../Services/translation\";\n\nconst Recaptcha = (props) => {\n\n const [showError, setShowError] = useState(false);\n\n useEffect(() => {\n let inputElement = document.getElementById(props.submitId)\n inputElement.disabled = true;\n }, []);\n\n useEffect(async () => {\n let siteKey = await getSiteKey();\n grecaptcha.ready(function () {\n grecaptcha.render(\"recaptcha-container\", {\n \"sitekey\": siteKey,\n \"callback\": onRecaptchaCallback\n });\n });\n }, []);\n\n const onRecaptchaCallback = (token) => {\n let inputElement = document.getElementById(props.submitId)\n verifyRecaptcha(token)\n .then((response) => response.json())\n .then((data) => {\n if (data.success) {\n inputElement.disabled = false;\n } else {\n setShowError(true);\n }\n })\n }\n\n return (\n <>\n {showError\n ? {translate('recaptcha.error')}
\n : \n }\n \n );\n}\n\nexport default Recaptcha;","import React, { useState, useRef, Fragment } from 'react';\nimport {translate} from \"../../Services/translation\";\nimport { useElementHeight } from '../Hooks/useElementHeight.js';\n\nconst CategoryHeader = (props) => {\n const [isVisible, setIsVisible] = useState(false);\n const mainElement = document.getElementById(\"categoryDescription\");\n\n const textRef = useRef();\n let textHeight = useElementHeight(textRef);\n \n if (textHeight > 75) {\n mainElement.classList.add(\"hide-text\");\n }\n\n const toggleText = () => {\n setIsVisible(!isVisible)\n const text = document.getElementById('categoryDescription'); \n if (!isVisible) {\n text.classList.add('show');\n }\n else {\n text.classList.remove('show');\n }\n }\n\n return (\n \n
\n )\n}\n\nexport default CategoryHeader;","import { useState, useEffect } from 'react';\n\nexport const useElementHeight = (elementRef) => {\n const [elementHeight, setElementHeight] = useState(0);\n\n useEffect(() => {\n if (!elementRef) return;\n if (!elementRef.current) return;\n\n setElementHeight(elementRef.current.clientHeight);\n\n const handleResize = () => \n setElementHeight(elementRef.current.clientHeight);\n \n\n window.addEventListener('resize', handleResize);\n handleResize();\n\n return () => window.removeEventListener('resize', handleResize);\n }, [elementRef]);\n\n return elementHeight;\n};\n","import React, { Fragment, useEffect, useState } from 'react';\nimport { useDispatch } from 'react-redux';\nimport { translate } from '../Services/translation';\nimport { get } from '../Services/http';\n\nconst RenderPrivateOrBusinessFooterSelector = () => {\n const dispatch = useDispatch();\n const [showPriceWithVatValue, setShowPriceWithVatValue] = useState();\n const [dataReady, setDataReady] = useState(false);\n\n useEffect(() => {\n const fetchData = async () => {\n const incVat = document.getElementById('footer').getAttribute('data-including-vat');\n if (incVat == \"True\") {\n setShowPriceWithVatValue(true);\n } else {\n setShowPriceWithVatValue(false);\n } \n setDataReady(true);\n };\n fetchData();\n }, []);\n\n const showPrivate = () => {\n setShowPriceWithVatValue(true)\n onSelect(true)\n }\n\n const showBusiness = () => {\n setShowPriceWithVatValue(false)\n onSelect(false)\n }\n\n const onSelect = (type) => {\n get(`/api/v1/setCustomerType?useVat=${type}`).then(() =>\n window.location.reload()\n );\n };\n\n return (\n <>\n {dataReady && (\n \n {props.description &&\n
\n toggleText()}>{translate('category.page.read.more')}\n toggleText()}>{translate('category.page.show.less')}\n \n {props.description}\n
\n }\n - \n {props.usps && props.usps.map((usp, index) => (\n
{store.getState()}
\r\n * }\r\n */\n\nexport function useReduxContext() {\n var contextValue = useContext(ReactReduxContext);\n\n if (process.env.NODE_ENV !== 'production' && !contextValue) {\n throw new Error('could not find react-redux context value; please ensure the component is wrapped in a {store.getState()}
\r\n * }\r\n */\n\nexport var useStore = /*#__PURE__*/createStoreHook();","import { ReactReduxContext } from '../components/Context';\nimport { useStore as useDefaultStore, createStoreHook } from './useStore';\n/**\r\n * Hook factory, which creates a `useDispatch` hook bound to a given context.\r\n *\r\n * @param {React.Context} [context=ReactReduxContext] Context passed to your `\r\n * {value}\r\n * \r\n *
\r\n * )\r\n * }\r\n */\n\nexport var useDispatch = /*#__PURE__*/createDispatchHook();","import { useReducer, useRef, useMemo, useContext, useDebugValue } from 'react';\nimport { useReduxContext as useDefaultReduxContext } from './useReduxContext';\nimport Subscription from '../utils/Subscription';\nimport { useIsomorphicLayoutEffect } from '../utils/useIsomorphicLayoutEffect';\nimport { ReactReduxContext } from '../components/Context';\n\nvar refEquality = function refEquality(a, b) {\n return a === b;\n};\n\nfunction useSelectorWithStoreAndSubscription(selector, equalityFn, store, contextSub) {\n var _useReducer = useReducer(function (s) {\n return s + 1;\n }, 0),\n forceRender = _useReducer[1];\n\n var subscription = useMemo(function () {\n return new Subscription(store, contextSub);\n }, [store, contextSub]);\n var latestSubscriptionCallbackError = useRef();\n var latestSelector = useRef();\n var latestStoreState = useRef();\n var latestSelectedState = useRef();\n var storeState = store.getState();\n var selectedState;\n\n try {\n if (selector !== latestSelector.current || storeState !== latestStoreState.current || latestSubscriptionCallbackError.current) {\n var newSelectedState = selector(storeState); // ensure latest selected state is reused so that a custom equality function can result in identical references\n\n if (latestSelectedState.current === undefined || !equalityFn(newSelectedState, latestSelectedState.current)) {\n selectedState = newSelectedState;\n } else {\n selectedState = latestSelectedState.current;\n }\n } else {\n selectedState = latestSelectedState.current;\n }\n } catch (err) {\n if (latestSubscriptionCallbackError.current) {\n err.message += \"\\nThe error may be correlated with this previous error:\\n\" + latestSubscriptionCallbackError.current.stack + \"\\n\\n\";\n }\n\n throw err;\n }\n\n useIsomorphicLayoutEffect(function () {\n latestSelector.current = selector;\n latestStoreState.current = storeState;\n latestSelectedState.current = selectedState;\n latestSubscriptionCallbackError.current = undefined;\n });\n useIsomorphicLayoutEffect(function () {\n function checkForUpdates() {\n try {\n var _newSelectedState = latestSelector.current(store.getState());\n\n if (equalityFn(_newSelectedState, latestSelectedState.current)) {\n return;\n }\n\n latestSelectedState.current = _newSelectedState;\n } catch (err) {\n // we ignore all errors here, since when the component\n // is re-rendered, the selectors are called again, and\n // will throw again, if neither props nor store state\n // changed\n latestSubscriptionCallbackError.current = err;\n }\n\n forceRender();\n }\n\n subscription.onStateChange = checkForUpdates;\n subscription.trySubscribe();\n checkForUpdates();\n return function () {\n return subscription.tryUnsubscribe();\n };\n }, [store, subscription]);\n return selectedState;\n}\n/**\r\n * Hook factory, which creates a `useSelector` hook bound to a given context.\r\n *\r\n * @param {React.Context} [context=ReactReduxContext] Context passed to your `{counter}
\r\n * }\r\n */\n\nexport var useSelector = /*#__PURE__*/createSelectorHook();","import Provider from './components/Provider';\nimport connectAdvanced from './components/connectAdvanced';\nimport { ReactReduxContext } from './components/Context';\nimport connect from './connect/connect';\nimport { useDispatch, createDispatchHook } from './hooks/useDispatch';\nimport { useSelector, createSelectorHook } from './hooks/useSelector';\nimport { useStore, createStoreHook } from './hooks/useStore';\nimport { setBatch } from './utils/batch';\nimport { unstable_batchedUpdates as batch } from './utils/reactBatchedUpdates';\nimport shallowEqual from './utils/shallowEqual';\nsetBatch(batch);\nexport { Provider, connectAdvanced, ReactReduxContext, connect, batch, useDispatch, createDispatchHook, useSelector, createSelectorHook, useStore, createStoreHook, shallowEqual };","/** @license React v17.0.2\n * react.production.min.js\n *\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n'use strict';var l=require(\"object-assign\"),n=60103,p=60106;exports.Fragment=60107;exports.StrictMode=60108;exports.Profiler=60114;var q=60109,r=60110,t=60112;exports.Suspense=60113;var u=60115,v=60116;\nif(\"function\"===typeof Symbol&&Symbol.for){var w=Symbol.for;n=w(\"react.element\");p=w(\"react.portal\");exports.Fragment=w(\"react.fragment\");exports.StrictMode=w(\"react.strict_mode\");exports.Profiler=w(\"react.profiler\");q=w(\"react.provider\");r=w(\"react.context\");t=w(\"react.forward_ref\");exports.Suspense=w(\"react.suspense\");u=w(\"react.memo\");v=w(\"react.lazy\")}var x=\"function\"===typeof Symbol&&Symbol.iterator;\nfunction y(a){if(null===a||\"object\"!==typeof a)return null;a=x&&a[x]||a[\"@@iterator\"];return\"function\"===typeof a?a:null}function z(a){for(var b=\"https://reactjs.org/docs/error-decoder.html?invariant=\"+a,c=1;c