\n {!open &&\n
\n)};\n\nexport default ProductImageSlider;","import React from 'react';\nimport { useSelector } from 'react-redux';\n\nconst Profile = () => {\n const { myPage } = useSelector((state) => state.navigation);\n return (\n \n
\n }\n {open &&\n \n {value.image && \n ![]()
openlightbox(index, event)} className=\"product-category__image\" src={value.image.src}/>\n }\n {value.video && value.video.isYoutubeVideo &&
\n ))}\n \n \n
\n }\n {value.video && !value.video.isYoutubeVideo && \n \n }\n \n \n \n setopen(false)}\n onNavigationCallback={(currentIndex) =>\n console.log(`Current index: ${currentIndex}`)\n }\n />\n
\n }\n \n {myPage && myPage.text && (\n \n {myPage.text}\n \n )}\n
\n );\n};\n\nexport default Profile;\n","import { useState, useEffect } from 'react';\n\nconst useSessionStorage = (key, defaultValue) => {\n const [value, setValue] = useState(() => {\n let currentValue;\n\n try {\n currentValue = JSON.parse(\n sessionStorage.getItem(key) || String(defaultValue)\n );\n } catch (error) {\n currentValue = defaultValue;\n }\n\n return currentValue;\n });\n\n useEffect(() => {\n sessionStorage.setItem(key, JSON.stringify(value));\n }, [value, key]);\n\n return [value, setValue];\n};\n\nexport default useSessionStorage;\n","import React, { Fragment, useCallback, useEffect } from 'react';\nimport { translate } from '../Services/translation';\nimport { updateRecommendedPrice } from '../Actions/Recommendedprice.action';\nimport useSessionStorage from '../Actions/SessionStorage.action';\nimport { useSelector, useDispatch } from 'react-redux';\n\nconst RecommendedPriceToggle = (props) => {\n const dispatch = useDispatch();\n const isrecommendedprice = useSelector(\n (state) => false\n );\n const { showRecommendedPriceSection } = window.__litium.channelConfig;\n const [getShowPrice, setShowPrice] = useSessionStorage(\n 'ShowRecommendedPrice',\n isrecommendedprice\n );\n const updateRecommendedPriceValue = useCallback(\n (status) => {\n setShowPrice(status);\n dispatch(updateRecommendedPrice(status));\n },\n [dispatch, setShowPrice]\n );\n useEffect(() => {\n if (showRecommendedPriceSection) {\n dispatch(updateRecommendedPrice(getShowPrice));\n }\n }, [showRecommendedPriceSection, dispatch, getShowPrice]);\n return (\n \n \n {translate('recommendedprice.introduction')}\n \n updateRecommendedPriceValue(true)}\n >\n {translate('recommended.include')}\n \n updateRecommendedPriceValue(false)}\n >\n {translate('recommended.exclude')}\n \n
\n )}\n \n
\n )\n}\n\n\nexport default StoreList;","import React from 'react';\nimport { useSelector } from 'react-redux';\n\nconst TopLinks = () => {\n const { topLink } = useSelector((state) => state.navigation);\n return (\n {translate('storelist.title')}
\n\n {props.stores.map((store, index) => (\n
\n \n
}\n
\n ))}\n \n
\n {index !== props.stores.length - 1 && \n handleStoreClick(e, index, store)}\n >\n {translate('storelist.chosestore')}\n \n
\n \n
\n {store.shopName}
\n{store.address}
\n\n {getStockIndicator(store.stock).html}\n {props.stores.length > 0 ? \n
\n +{store.stock} {translate('storelist.isinstock')}
:\n {translate('storelist.outofstock')}
\n }\n \n {store.productAssortment && store.productAssortment.map((productAss) => (\n \n ))}\n
\n }\n
\n {topLink &&\n topLink.map((link, index) => {\n return (\n \n {link.text}\n \n );\n })}\n
\n );\n};\n\nexport default TopLinks;\n","import React, { Fragment } from \"react\";\nimport { useSelector, useDispatch } from 'react-redux';\nimport { updateAPIStatus } from '../Actions/Vat.action';\nimport { translate } from '../Services/translation';\nconst VATHeading = () => {\n const showVat = useSelector((state) => state.vat.value);\n const { showVatSection } = window.__litium.websiteConfig;\n\n const dispatch = useDispatch();\n return (\n {props.recommendedpriceexcludingvat}
\n \n {props.netpriceexcludingvat}\n
\n {props.campaignprice && (\n {props.campaignprice}
\n )}\n \n {props.recommendedpriceexcludingvat}\n
\n {props.campaignprice && (\n {props.campaignprice}
\n )}\n {props.recommendedpriceincludingvat}
\n \n {props.netpricincludingvat}\n
\n {props.campaignprice && (\n {props.campaignpriceincludingvat}
\n )}\n \n {props.recommendedpriceincludingvat}\n
\n {props.campaignprice && (\n {props.campaignpriceincludingvat}
\n )}\n \n {\n e.preventDefault();\n onToggle();\n }}\n >\n \n {quantity}\n \n \n {translate('minicart.checkout')}\n \n \n \n onToggle()}\n >\n
\n \n );\n};\n\nexport default MiniCart;\n","import React, { Fragment } from 'react';\nimport { translate } from '../Services/translation';\nimport BuyButton from './BuyButton';\n\nconst sameCategory = (item, index, array) =>\n (index > 0 && array[index - 1].category === array[index].category) ||\n item.showAll;\n\nconst QuickSearchResult = ({ result, selectedItem, searchUrl }) => {\n const showBuyButtons = window.__litium.constants.showBuyButtons;\n return (\n \n {quantity} {translate('minicart.numberofproduct')}\n
\n\n {translate('minicart.total')} {orderTotal}\n
\n \n {translate('minicart.checkout')}\n \n- \n {result &&\n result.map((item, index, array) => (\n
- \n {item.category}\n \n )}\n
\n
\n )}\n {item.hasImage == false &&\n item.categoryWithoutTransilation == 'Categories' && (\n \n )}\n \n
\n \n \n \n {item.name && (\n \n \n )}\n
\n {item.breadcrumb && (\n \n {item.name}\n
\n )}\n {showBuyButtons && item.enableBuyButton && (\n \n{item.breadcrumb}
\n )}\n {item.articleNumber && (\n \n {translate(`quicksearch.articlenumber`)}:{' '}\n {item.articleNumber}\n
\n )}\n {item.description && (\n {item.description}
\n )}\n \n {\n e.preventDefault();\n dispatch(toggleShowFullForm());\n setTimeout(() => {\n searchInput.current && searchInput.current.focus();\n }, 0);\n }}\n >\n \n \n {translate('general.search')}\n \n \n\n\n
\n \n );\n};\n\nexport default QuickSearch;\n","import React, { Fragment, useRef } from 'react';\nimport { translate } from '../Services/translation';\nimport { useSelector } from 'react-redux';\nimport CountriesList from './CountriesList';\nimport Profile from './Profile';\nimport RecommendedPriceToggle from './RecommendedPriceToggle';\nimport VATHeading from './VATHeading';\nimport TopLinks from './TopLink';\nimport LogOut from './LogOut';\n\nconst NavigationItem = ({ links = [], contentLink = null, level = 1 }) => {\n const menuRef = useRef(null);\n const megaMenuRef = useRef(null);\n const mode = useSelector((state) => state.vat.value);\n\n const toggleMenu = (toggleAll) => {\n const selectedLinks = document.querySelectorAll(\n '#navbar .navbar__link--selected'\n );\n\n if (selectedLinks.length && toggleAll) {\n for (const link of selectedLinks) {\n let closestMenu = link.closest('ul');\n closestMenu.classList.toggle('navbar__menu--show');\n }\n } else {\n menuRef.current.classList.toggle('navbar__menu--show');\n }\n\n const isMenuOpen = menuRef.current.classList.contains('navbar__menu--show');\n if (isMenuOpen) {\n document.body.classList.add('no-scroll');\n } \n };\n\n const closeMenu = () => {\n for (const menu of document.querySelectorAll('.navbar__menu--show')) {\n menu.classList.remove('navbar__menu--show');\n document.body.classList.remove('no-scroll');\n }\n };\n\n const toggleMenuClick = () => {\n if (window.matchMedia('(min-width: 1024px)').matches) {\n megaMenuRef.current.focus();\n } else {\n toggleMenu();\n }\n };\n\n const additionClass =\n contentLink && contentLink.attributes\n ? contentLink.attributes.cssValue\n : null;\n const showMegaMenuDesktop = contentLink && contentLink.showMegaMenuDesktop;\n\n const selectedClass =\n contentLink && contentLink.isSelected ? 'navbar__link--selected' : '';\n const hasChildrenClass =\n links.length > 0\n ? showMegaMenuDesktop\n ? 'has-children'\n : ''\n : 'last--selected';\n const hasNameOrChildren = (link) =>\n link.name || (link.links || []).length > 0;\n const hasMegaMenu = level === 1 && links.length;\n const showImageOnMegaMenu =\n contentLink && contentLink.showImageMegaMenu ? ' showImageonMegaMenu' : '';\n\n return (\n \n {showFullForm &&\n \n dispatch(toggleShowFullForm())}\n >\n {\n const text = encodeURIComponent(event.target.value);\n dispatch(setSearchQuery(text));\n debouncedQuery(dispatch, text);\n }}\n onKeyDown={(event) =>\n dispatch(handleKeyDown(event, { searchUrl }))\n }\n ref={searchInput}\n />\n {\n e.preventDefault();\n dispatch(handleClickSearch({ searchUrl }));\n }}\n >\n \n \n {translate('general.search')}\n \n \n {showResult && (\n
\n {\n dispatch(toggleShowFullForm());\n }}>
\n }\n \n {!contentLink ? (\n closeMenu()}\n >\n ) : (\n \n toggleMenu(false)}\n >\n {contentLink.parentName && (\n toggleMenu(false)}\n dangerouslySetInnerHTML={{\n __html: contentLink.parentName,\n }}\n >\n )}\n\n closeMenu()}\n >\n \n )}\n
\n\n {contentLink != null && (\n {group.label}
\n )}\n {group.options &&\n group.options.map((item, itemIndex, array) => (\n \n {!isNaN(item.quantity) && item.quantity != null && item.quantity > 0 && (\n \n \n )}\n
\n );\n } else {\n return (\n {item.label}
\n \n \n {!isNaN(item.quantity) && item.quantity != null && item.quantity > 0 && (\n \n )}\n
\n );\n }\n};\n\nconst FacetedSearch = ({ isSlider }) => {\n const dispatch = useDispatch();\n const { facetFilters, navigationTheme } = useSelector(\n (state) => state.facetedSearch\n );\n\n useEffect(() => {\n // listen to history events (back, forward) of window\n window.onpopstate =\n window.onpopstate ||\n ((event) => {\n dispatch(query(window.location.search.substr(1) || ''));\n });\n }, [dispatch]);\n\n let filteredFacetFilters = [];\n if (facetFilters && facetFilters.length > 0) {\n if (isSlider === 'true') {\n filteredFacetFilters = facetFilters.filter((group) =>\n group.id.includes('Expired_')\n );\n } else {\n filteredFacetFilters = facetFilters.filter(\n (group) => !group.id.includes('Expired_')\n );\n }\n }\n return (\n navigationTheme !== 'category' &&\n filteredFacetFilters &&\n filteredFacetFilters.length > 0 && (\n \n {filteredFacetFilters.map((group, groupIndex) => (\n
\n )\n );\n};\n\nexport default FacetedSearch;\n","import React from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { translate } from '../Services/translation';\n\nimport {\n submitSearchFacet,\n toggleVisibleDropdownMenu,\n} from '../Actions/FacetedSearch.action';\n\nconst FacetedSearchCompact = ({ facetFilters, onFacetChange }) => {\n const dispatch = useDispatch();\n const { visibleDropdownMenu } = useSelector((state) => state.facetedSearch);\n\n let filteredFacetFilters = [];\n if (facetFilters && facetFilters.length > 0) {\n filteredFacetFilters = facetFilters.filter(\n (group) => !group.id.includes('Expired_')\n );\n }\n\n return (\n - \n {filteredFacetFilters &&\n filteredFacetFilters.map(\n (group, groupIndex, array) =>\n group.options &&\n group.options.length > 0 && (\n
- \n
- \n {group.options &&\n group.options.map((item, itemIndex, array) => (\n
\n {!isNaN(item.quantity) && item.quantity > 0 && (\n \n )}\n
\n);\n\nexport default FacetedSearchCompact;\n","import React, { useState, useMemo } from 'react';\n\nexport const AccordionPanel = (props) => props;\n\nexport const Accordion = ({ children, className }) => {\n const [index, setIndex] = useState(-1);\n const handleClickHeader = (index) => {\n setIndex((prevIndex) => (prevIndex === index ? -1 : index));\n };\n\n const activeClass = (itemIndex) => (itemIndex === index ? 'active' : '');\n\n const accordions = useMemo(() => React.Children.toArray(children), [\n children,\n ]);\n\n const headers = accordions.map((accordion, index) => (\n \n handleClickHeader(index)}\n >\n {accordion.props.header || ''}\n
\n \n ));\n\n const panels = accordions.map((accordion, index) => (\n \n \n {panels}\n
\n );\n};\n","import React, { Fragment } from 'react';\n\nconst SortCriteriaCompact = ({ sortCriteria }) => {\n const selectedOption = [\n ...sortCriteria.filter((sort) => sort.selected === true),\n {},\n ][0];\n return (\n \n (window.location = event.target.value)}\n >\n {sortCriteria &&\n sortCriteria.map(({ text, value, selected }, index) => (\n \n ))}\n \n
\n );\n};\n\nexport default SortCriteriaCompact;\n","import React from 'react';\nimport { useDispatch } from 'react-redux';\nimport { searchFacetChange } from '../Actions/FacetedSearch.action';\nimport { translate } from '../Services/translation';\n\nconst FilterTags = ({ facetFilters, navigationTheme }) => {\n const dispatch = useDispatch();\n\n const selectedFacetGroup = facetFilters.filter(\n (filter) => filter.selectedOptions.length > 0\n );\n const selectedFacetOption = selectedFacetGroup.reduce(\n (accumulator, group) => {\n if (!group) {\n return accumulator;\n }\n const { options, selectedOptions } = group;\n const groupOptions = options\n .filter((option) => selectedOptions.includes(option.id))\n .map((option) => ({ ...option, group }));\n return [...accumulator, ...groupOptions];\n },\n []\n );\n return selectedFacetGroup.length === 0 ? null : (\n \n \n {translate('search.yourfilter')} : \n {selectedFacetGroup &&\n selectedFacetGroup.map((group, index) => (\n \n dispatch(searchFacetChange(group))\n }\n key={`group-${index}`}\n >\n {' '}\n {group.label}{' '}\n \n ))}\n \n {navigationTheme === 'category' && (\n \n {translate('search.yourfilter')} : \n {selectedFacetOption &&\n selectedFacetOption.map((option, index) => (\n \n dispatch(\n searchFacetChange(option.group, option)\n )\n }\n key={`option-${index}`}\n >\n {' '}\n {option.label}{' '}\n \n ))}\n \n )}\n
\n );\n};\n\nexport default FilterTags;\n","import React, {\n Fragment,\n useCallback,\n useState,\n useEffect,\n useRef,\n} from 'react';\nimport { useSelector, useDispatch } from 'react-redux';\nimport FacetedSearchCompact from './FacetedSearchCompact';\nimport { AccordionPanel, Accordion } from '../Components/Accordion';\nimport { query } from '../Actions/FacetedSearch.action';\nimport SubNav from './SubNavCompact';\nimport SortCriteriaCompact from './SortCriteriaCompact';\nimport FilterTag from './FilterTags';\nimport { translate } from '../Services/translation';\nimport { updateFilterOption } from '../Actions/FacetedSearch.action';\nimport { PRODUCT_VIEW_CACHED } from '../constants';\n\nconst FacetedSearchCompactContainer = () => {\n const dispatch = useDispatch();\n const {\n subNavigation,\n sortCriteria,\n facetFilters: globalFacetFilters,\n navigationTheme,\n productsViewCachedId,\n } = useSelector((state) => state.facetedSearch);\n\n const [facetFilters, setFacetFilters] = useState(globalFacetFilters || []);\n const previousCachedId = useRef(productsViewCachedId);\n useEffect(() => {\n if (previousCachedId.current !== productsViewCachedId) {\n setFacetFilters(globalFacetFilters);\n previousCachedId.current = productsViewCachedId;\n }\n }, [globalFacetFilters, productsViewCachedId]);\n\n useEffect(() => {\n dispatch(query(window.location.search.substr(1) || '', false));\n }, [dispatch]);\n\n const onFacetChange = useCallback(\n (filter, option) => {\n setFacetFilters((prevFacetFilters) => {\n return updateFilterOption(prevFacetFilters, filter, option);\n });\n },\n [setFacetFilters]\n );\n\n const onSearchResultDataChange = (dom) => {\n if ([null, undefined].includes(dom)) {\n return;\n }\n const container = document.createElement('div');\n container.innerHTML = dom;\n const existingResult = document.querySelector('#search-result');\n const tempResult = container.querySelector('#search-result');\n const existingFilter = existingResult.querySelector(\n '#facetedSearchCompact'\n );\n const tempFilter = tempResult.querySelector('#facetedSearchCompact');\n const replace = (node, newNode) =>{ \n if(node!=null)\n {\n if(node.parentNode!=null)\n {\n node.parentNode.replaceChild(newNode, node);\n }\n } \n } \n if(tempFilter!=null&existingFilter!=null)\n {\n // move existingFilter from existingResult to tempResult\n replace(tempFilter, existingFilter);\n // replace existingResult with tempResult ( newResult )\n replace(existingResult, tempResult);\n } \n \n // bootstrap react components if any exists in the search result\n window.__litium.bootstrapComponents();\n };\n\n useEffect(() => {\n const productViewCached = window.__litium.cache\n ? window.__litium.cache[PRODUCT_VIEW_CACHED] || {}\n : {};\n if (!productViewCached.used) {\n productViewCached.used = true;\n const dom = productViewCached.productsView;\n dom && onSearchResultDataChange(dom);\n }\n });\n\n const empty = (array) => !(array && array.length);\n\n const subNavigations = !subNavigation ? null : [subNavigation];\n const sortCriterias =\n !sortCriteria || !sortCriteria.sortItems\n ? null\n : sortCriteria.sortItems;\n\n const hidden = [subNavigations, facetFilters, sortCriterias].every((arr) =>\n empty(arr)\n );\n\n return hidden ? null : (\n \n
\n )}\n