\r\n {notification.message}\r\n
\r\n ) : (\r\n{notification.message}
\r\n )}\r\n \r\n \r\n )\r\n}\r\nexport default NotificationsPanel\r\n\r\nfunction notificationLevel(notification) {\r\n switch (notification.level) {\r\n case NotificationLevel.ERROR:\r\n return 'danger'\r\n case NotificationLevel.SUCCESS:\r\n return 'success'\r\n case NotificationLevel.WARNING:\r\n default:\r\n return 'warning'\r\n }\r\n}\r\n","import { useEffect } from 'react'\r\n\r\nconst DynamicDataLayer = () => {\r\n useEffect(() => {\r\n window.dl = window.dl || []\r\n }, [])\r\n\r\n return null\r\n}\r\nexport default DynamicDataLayer","import React, { useContext, useRef } from 'react'\r\nimport LocaleContext from '../../contexts/localeContext'\r\nimport { useHeaderI18n } from '../../hooks/i18n/useHeaderI18n'\r\nimport { buildLoginUrl, buildReturnUrl } from '../../services/urlService'\r\nimport { logException } from '../../services/loggingService'\r\nimport { useNavigationHome } from '../../hooks/useNavigationHome'\r\nimport UserContext from '../../contexts/userContext'\r\nimport { Link, navigate } from 'gatsby'\r\nimport { useAccountSlug } from '../../hooks/slugs/useAccountSlug'\r\nimport { getI18nText } from '../../services/i18nService'\r\nimport SearchContext from '../../contexts/searchContext'\r\nimport { useState } from 'react'\r\nimport { Spinner } from 'react-bootstrap'\r\n\r\nconst Login = ({ isMobile, toggleLoginOffCanvasCallback }) => {\r\n const locale = useContext(LocaleContext)\r\n const { email } = useContext(UserContext)\r\n const classes = isMobile ? '' : 'header__toplinks--item d-none d-md-block'\r\n\r\n return (\r\n\r\n \r\n \r\n \r\n {getI18nText(microcopy, 'header.account')}\r\n
\r\n ) : (\r\n <>\r\n \r\n \r\n \r\n {getI18nText(microcopy, 'header.login')}\r\n
\r\n \r\n ) : hasBeenClicked ? (\r\n \r\n
\r\n ) : (\r\n <>\r\n \r\n
\r\n )\r\n}\r\n\r\nfunction isEmpty(value) {\r\n if (value === null || value === undefined || value === '') {\r\n return true\r\n }\r\n\r\n return false\r\n}\r\n\r\nexport default Search\r\n","import React, { useContext } from 'react'\r\nimport LocaleContext from '../../contexts/localeContext'\r\nimport { useNavigationHome } from '../../hooks/useNavigationHome'\r\nimport { useLanguageI18n } from '../../hooks/i18n/useLanguageI18n'\r\nimport { Link } from 'gatsby'\r\nimport { getI18nText } from '../../services/i18nService'\r\nimport { useLanguages } from '../../hooks/useLanguages'\r\n\r\nconst Languages = ({ onClick }) => {\r\n const locale = useContext(LocaleContext)\r\n const microcopy = useLanguageI18n(locale)\r\n const linkPath = '/' + useNavigationHome(locale).slug\r\n const languages = useLanguages(locale)\r\n\r\n return (\r\n <>\r\n {languages && languages.length > 1 ? (\r\n \r\n \r\n \r\n
\r\n \r\n \r\n {getI18nText(contactMicrocopy, 'contact.contact')}\r\n
\r\n ) : (\r\n <>\r\n \r\n \r\n \r\n \r\n {getI18nText(contactMicrocopy, 'contact.contact')}\r\n \r\n \r\n \r\n )}\r\n \r\n \r\n {getI18nText(microcopy, 'header.distributors')}\r\n
\r\n ) : (\r\n <>\r\n \r\n \r\n
\r\n {suggestionDescription}
\r\n{productId}
\r\n{description}
\r\n{productId}
\r\n{productId}
\r\n{value}
\r\n{name}
\r\n\r\n
\r\n \r\n ) : null\r\n}\r\n\r\nexport default Suggestions\r\n\r\nconst ProductSuggestionsContent = ({ suggestions, microcopy }) =>\r\n suggestions && suggestions.length > 0 ? (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n ) : null\r\n\r\nconst DatasheetsSuggestionsContent = ({ suggestions, microcopy }) =>\r\n suggestions && suggestions.length > 0 ? (\r\n {getI18nText(microcopy, 'search.products')}
\r\n- \r\n {suggestions.map((suggestion) => {\r\n return (\r\n
\r\n
\r\n ) : null\r\n\r\nconst PartNumberSuggestionsContent = ({ suggestions, microcopy }) =>\r\n suggestions && suggestions.length > 0 ? (\r\n {getI18nText(microcopy, 'search.datasheets')}
\r\n- \r\n {suggestions.map((suggestion) => {\r\n return (\r\n
\r\n
\r\n ) : null\r\n\r\nconst CategoriesSuggestionsContent = ({ suggestions, microcopy }) =>\r\n suggestions && suggestions.length > 0 ? (\r\n {getI18nText(microcopy, 'search.partnumbers')}
\r\n- \r\n {suggestions.map((suggestion) => {\r\n return
\r\n
\r\n ) : null\r\n\r\nconst ContentSuggestionsContent = ({ suggestions, microcopy }) =>\r\n suggestions && suggestions.length > 0 ? (\r\n {getI18nText(microcopy, 'search.categories')}
\r\n- \r\n {suggestions.map((suggestion) => {\r\n return (\r\n
\r\n
\r\n ) : null\r\n","import { useStaticQuery, graphql } from 'gatsby'\r\nimport { resolveNodesFromResourcesQueryResultForLocale } from '../services/microcopyService'\r\n\r\nconst resourcesQuery = graphql`\r\n query {\r\n en: allContentfulFredhopperFacets(\r\n filter: { node_locale: { eq: \"en\" }, title: { eq: \"Suggest\" } }\r\n ) {\r\n nodes {\r\n ...CoreFredhopperFacetsFields\r\n }\r\n }\r\n de: allContentfulFredhopperFacets(\r\n filter: { node_locale: { eq: \"de\" }, title: { eq: \"Suggest\" } }\r\n ) {\r\n nodes {\r\n ...CoreFredhopperFacetsFields\r\n }\r\n }\r\n nl: allContentfulFredhopperFacets(\r\n filter: { node_locale: { eq: \"nl\" }, title: { eq: \"Suggest\" } }\r\n ) {\r\n nodes {\r\n ...CoreFredhopperFacetsFields\r\n }\r\n }\r\n fr: allContentfulFredhopperFacets(\r\n filter: { node_locale: { eq: \"fr\" }, title: { eq: \"Suggest\" } }\r\n ) {\r\n nodes {\r\n ...CoreFredhopperFacetsFields\r\n }\r\n }\r\n it: allContentfulFredhopperFacets(\r\n filter: { node_locale: { eq: \"it\" }, title: { eq: \"Suggest\" } }\r\n ) {\r\n nodes {\r\n ...CoreFredhopperFacetsFields\r\n }\r\n }\r\n es: allContentfulFredhopperFacets(\r\n filter: { node_locale: { eq: \"es\" }, title: { eq: \"Suggest\" } }\r\n ) {\r\n nodes {\r\n ...CoreFredhopperFacetsFields\r\n }\r\n }\r\n enUS: allContentfulFredhopperFacets(\r\n filter: { node_locale: { eq: \"en-US\" }, title: { eq: \"Suggest\" } }\r\n ) {\r\n nodes {\r\n ...CoreFredhopperFacetsFields\r\n }\r\n }\r\n cs: allContentfulFredhopperFacets(\r\n filter: { node_locale: { eq: \"cs\" }, title: { eq: \"Suggest\" } }\r\n ) {\r\n nodes {\r\n ...CoreFredhopperFacetsFields\r\n }\r\n }\r\n pl: allContentfulFredhopperFacets(\r\n filter: { node_locale: { eq: \"pl\" }, title: { eq: \"Suggest\" } }\r\n ) {\r\n nodes {\r\n ...CoreFredhopperFacetsFields\r\n }\r\n }\r\n pt: allContentfulFredhopperFacets(\r\n filter: { node_locale: { eq: \"pt\" }, title: { eq: \"Suggest\" } }\r\n ) {\r\n nodes {\r\n ...CoreFredhopperFacetsFields\r\n }\r\n }\r\n }\r\n`\r\nexport const useSuggestFacet = (locale) => {\r\n return resolveNodesFromResourcesQueryResultForLocale(useStaticQuery(resourcesQuery), locale)[0].fredhopper_url.fredhopper_url\r\n}\r\n","import React, { useContext, useState, useEffect, useRef } from 'react'\r\nimport { Link } from 'gatsby'\r\nimport LocaleContext from '../../contexts/localeContext'\r\nimport { useNavigationHome } from '../../hooks/useNavigationHome'\r\nimport { buildCrumbsFromChildPages } from '../breadcrumb'\r\nimport LiveChat from './liveChat'\r\nimport Distributors from './distributors'\r\nimport Login from './login'\r\nimport MobileNavContext from '../../contexts/mobileNavContext'\r\nimport { useOnScroll } from '../../hooks/useOnScroll'\r\nimport { useOnResize } from '../../hooks/useOnResize'\r\nimport { useHeaderI18n } from '../../hooks/i18n/useHeaderI18n'\r\nimport StandardButton, { StandardButtonArrowIcon } from '../widgets/standardButton'\r\nimport { useBlogs } from '../../hooks/useBlogs'\r\nimport { getI18nText } from '../../services/i18nService'\r\nimport SearchContext from '../../contexts/searchContext'\r\n\r\nconst Navigation = ({ id }) => {\r\n const myOnScrollRef = useRef(null)\r\n const myOnResizeRef = useRef(null)\r\n const locale = useContext(LocaleContext)\r\n const blogs = useBlogs(locale)\r\n const { isMobileNavOpen, setIsMobileNavOpen, subNavId, setSubNavId } =\r\n useContext(MobileNavContext)\r\n const { suggestionsOpen } = useContext(SearchContext)\r\n const home = useNavigationHome(locale)\r\n const [isIE, setIsIE] = useState(false)\r\n\r\n const [activeIds, setActiveIds] = useState([home.id])\r\n const [classes, setClasses] = useState('row header__secondary d-none no-gutter d-lg-block')\r\n const [homeClasses, setHomeClasses] = useState('header__nav--primary-item d-none d-lg-block')\r\n const [ulClasses, setUlClasses] = useState('d-flex')\r\n\r\n useEffect(() => {\r\n if (isMobileNavOpen === false) {\r\n setSubNavId(null)\r\n }\r\n var msie = window.navigator.userAgent.indexOf('Trident/')\r\n setIsIE(msie > 0)\r\n }, [isMobileNavOpen])\r\n\r\n useEffect(() => {\r\n let myActiveIds = [home.id]\r\n let myHomeClasses = 'header__nav--primary-item d-none d-lg-block'\r\n\r\n const myClasses = isMobileNavOpen\r\n ? 'row header__secondary d-lg-block no-gutter'\r\n : suggestionsOpen\r\n ? 'row header__secondary no-gutter d-none'\r\n : 'row header__secondary d-lg-block no-gutter d-none'\r\n const myUlClasses = 'd-flex'\r\n\r\n if (id === home.id) {\r\n if (isMobileNavOpen === false) {\r\n myHomeClasses = `${myHomeClasses} is-active`\r\n }\r\n } else {\r\n let crumbs = {}\r\n buildCrumbsFromChildPages(crumbs, [], home.childPages, blogs)\r\n let currentCrumbs = crumbs[id]\r\n if (currentCrumbs && currentCrumbs.length > 0) {\r\n myActiveIds = currentCrumbs.map((i) => i.id)\r\n } else {\r\n if (isMobileNavOpen === false) {\r\n myHomeClasses = `${myHomeClasses} is-active`\r\n }\r\n }\r\n }\r\n\r\n setActiveIds(myActiveIds)\r\n setClasses(myClasses)\r\n setHomeClasses(myHomeClasses)\r\n setUlClasses(myUlClasses)\r\n }, [id, isMobileNavOpen, subNavId, home, blogs, suggestionsOpen])\r\n\r\n useOnScroll([myOnScrollRef], () => {\r\n let header = document.querySelector('header')\r\n if (isIE === false) {\r\n let scrolled = document.scrollingElement.scrollTop\r\n\r\n if (scrolled > 1) {\r\n header.classList.add('is-scrolled')\r\n return true\r\n } else {\r\n header.classList.remove('is-scrolled')\r\n return false\r\n }\r\n }\r\n })\r\n\r\n useOnResize([myOnResizeRef], () => {\r\n const windowWidth = window.innerWidth\r\n\r\n if (windowWidth >= 1194) {\r\n setIsMobileNavOpen(false)\r\n }\r\n })\r\n\r\n return (\r\n {getI18nText(microcopy, 'search.content')}
\r\n- \r\n {suggestions.map((suggestion) => {\r\n return (\r\n
\r\n
\r\n )\r\n}\r\n\r\nexport default Navigation\r\n\r\nconst PrimaryNavLink = ({ topLevelChildPage, activeIds }) => {\r\n const { isMobileNavOpen, subNavId, setSubNavId } = useContext(MobileNavContext)\r\n const locale = useContext(LocaleContext)\r\n const microcopy = useHeaderI18n(locale)\r\n const home = useNavigationHome(locale)\r\n const [hasChildPages, setHasChildPages] = useState(false)\r\n const [mainClasses, setMainClasses] = useState('header__nav--primary-item')\r\n const [linkClasses, setLinkClasses] = useState('')\r\n const parentPath = `/${home.slug}/${topLevelChildPage.slug}`\r\n\r\n useEffect(() => {\r\n let myChildNavIds = []\r\n\r\n if (topLevelChildPage.childPages) {\r\n for (let index = 0; index < topLevelChildPage.childPages.length; index++) {\r\n const element = topLevelChildPage.childPages[index]\r\n if (element.hideInNavigationMenu === false) {\r\n myChildNavIds.push(element.id)\r\n }\r\n }\r\n }\r\n\r\n const myHasChildPages = myChildNavIds.length > 0\r\n\r\n function buildClasses() {\r\n let classes = 'header__nav--primary-item'\r\n\r\n if (myHasChildPages) {\r\n classes = `${classes} has-children`\r\n }\r\n\r\n if (isMobileNavOpen === true) {\r\n classes = `${classes} is-hovered`\r\n\r\n if (subNavId === topLevelChildPage.id) {\r\n classes = `${classes} subnav-open`\r\n setLinkClasses('is-backlink')\r\n } else {\r\n setLinkClasses('')\r\n }\r\n\r\n if (subNavId !== null && myChildNavIds.includes(subNavId)) {\r\n classes = `${classes} subnav-open`\r\n setLinkClasses('d-none')\r\n }\r\n } else {\r\n if (activeIds.includes(topLevelChildPage.id)) {\r\n classes = `${classes} is-active`\r\n }\r\n\r\n if (subNavId === null) {\r\n //classes = `${classes} is-hovered`\r\n } else if (subNavId === topLevelChildPage.id) {\r\n classes = `${classes} is-hovered`\r\n }\r\n }\r\n\r\n setMainClasses(classes)\r\n }\r\n\r\n setHasChildPages(myHasChildPages)\r\n\r\n buildClasses()\r\n }, [topLevelChildPage, isMobileNavOpen, subNavId])\r\n\r\n function onTopLevelLinkClick(e) {\r\n const header = document.querySelector('header')\r\n e.preventDefault()\r\n if (subNavId && subNavId === topLevelChildPage.id) {\r\n setSubNavId(null)\r\n header.classList.remove('nav-open')\r\n } else {\r\n setSubNavId(topLevelChildPage.id)\r\n header.classList.add('nav-open')\r\n }\r\n }\r\n\r\n return topLevelChildPage.hideInNavigationMenu === false && topLevelChildPage.slug ? (\r\n \r\n
\r\n \r\n
\r\n - \r\n
- \r\n \r\n \r\n \r\n \r\n {home.childPages.map((topLevelChildPage) => {\r\n return (\r\n
\r\n
\r\n \r\n
\r\n )\r\n}\r\n\r\nconst SecondaryNavLink = ({ locale, topLevelChildPage, secondLevelChildPage, activeIds }) => {\r\n const home = useNavigationHome(locale)\r\n const { isMobileNavOpen, setIsMobileNavOpen, subNavId, setSubNavId } =\r\n useContext(MobileNavContext)\r\n const [hasChildPages, setHasChildPages] = useState(false)\r\n const [linkClasses, setLinkClasses] = useState('d-flex align-items-center')\r\n const [linkTitle, setLinkTitle] = useState()\r\n const [linkPath, setLinkPath] = useState()\r\n const [listClasses, setListClasses] = useState('header__nav--secondary-item')\r\n const path = `/${home.slug}/${topLevelChildPage.slug}/${secondLevelChildPage.slug}`\r\n const backLinkPath = `/${home.slug}/${topLevelChildPage.slug}`\r\n\r\n useEffect(() => {\r\n let myChildNavIds = []\r\n\r\n if (secondLevelChildPage.childPages) {\r\n for (let index = 0; index < secondLevelChildPage.childPages.length; index++) {\r\n const element = secondLevelChildPage.childPages[index]\r\n if (element.hideInNavigationMenu === false) {\r\n myChildNavIds.push(element.id)\r\n }\r\n }\r\n }\r\n\r\n function buildClasses() {\r\n let myLinkClasses = 'd-flex align-items-center'\r\n let myListClasses = 'header__nav--secondary-item'\r\n\r\n if (activeIds.includes(secondLevelChildPage.id)) {\r\n myListClasses = `${myListClasses} is-hovered`\r\n }\r\n\r\n if (myChildNavIds.length > 0) {\r\n myListClasses = `${myListClasses} has-children`\r\n }\r\n\r\n if (isMobileNavOpen === true) {\r\n if (subNavId === secondLevelChildPage.id) {\r\n myListClasses = `${myListClasses} subnav-open`\r\n myLinkClasses = `${myLinkClasses} is-backlink`\r\n setLinkTitle(topLevelChildPage.name)\r\n setLinkPath(backLinkPath)\r\n } else {\r\n setLinkTitle(secondLevelChildPage.name)\r\n setLinkPath(path)\r\n }\r\n } else {\r\n myLinkClasses = `${myLinkClasses}`\r\n setLinkTitle(secondLevelChildPage.name)\r\n setLinkPath(path)\r\n }\r\n\r\n setLinkClasses(myLinkClasses)\r\n setListClasses(myListClasses)\r\n }\r\n\r\n setHasChildPages(myChildNavIds.length > 0)\r\n buildClasses()\r\n }, [topLevelChildPage, secondLevelChildPage, subNavId, isMobileNavOpen])\r\n\r\n function handleShowMobileTertiaryNav(e) {\r\n if (isMobileNavOpen === true) {\r\n if (hasChildPages === true) {\r\n setSubNavId(secondLevelChildPage.id)\r\n e.preventDefault()\r\n } else {\r\n setIsMobileNavOpen(false)\r\n setSubNavId(null)\r\n }\r\n }\r\n }\r\n\r\n function handleClearMobileTertiaryNav(e) {\r\n if (isMobileNavOpen === true) {\r\n setSubNavId(topLevelChildPage.id)\r\n e.preventDefault()\r\n }\r\n }\r\n\r\n return secondLevelChildPage.hideInNavigationMenu === false && secondLevelChildPage.slug ? (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {topLevelChildPage.name}\r\n \r\n
\r\n {topLevelChildPage.shortSummary}
\r\n\r\n \r\n {topLevelChildPage.name}\r\n \r\n
\r\n - \r\n {topLevelChildPage.childPages.map((secondLevelChildPage) => (\r\n
- \r\n \r\n {getI18nText(microcopy, 'header.navviewall')}\r\n \r\n \r\n
\r\n \r\n {secondLevelChildPage.name}\r\n \r\n
\r\n )\r\n}\r\n\r\nconst TertiaryNavLink = ({ element, path }) => {\r\n const { setIsMobileNavOpen, setSubNavId } = useContext(MobileNavContext)\r\n const navPath = `${path}/${element.slug}`\r\n\r\n function onClick() {\r\n setSubNavId(null)\r\n setIsMobileNavOpen(false)\r\n }\r\n\r\n return (\r\n - \r\n {secondLevelChildPage.childPages &&\r\n secondLevelChildPage.childPages.map((element) => {\r\n if (element.hideInNavigationMenu === false && element.slug) {\r\n return
- \r\n \r\n {getI18nText(microcopy, 'header.navviewall')}\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n )\r\n}\r\n\r\nexport default LanguagesSelect\r\n","import { Link } from 'gatsby'\r\nimport React, { useContext } from 'react'\r\nimport LocaleContext from '../../contexts/localeContext'\r\nimport MobileNavContext from '../../contexts/mobileNavContext'\r\nimport { useHeaderI18n } from '../../hooks/i18n/useHeaderI18n'\r\nimport { useNavigationHome } from '../../hooks/useNavigationHome'\r\nimport { getI18nText } from '../../services/i18nService'\r\nimport SearchContext from '../../contexts/searchContext'\r\n\r\nconst MobileMenu = () => {\r\n const openIcon = 'header__toplinks--icon icon-Menu-Hamburger-Search'\r\n const closeIcon = 'header__toplinks--icon icon-Close'\r\n const linkClasses =\r\n 'header__toplinks--click d-flex flex-column justify-content-center text-center'\r\n const locale = useContext(LocaleContext)\r\n const { isMobileNavOpen, setIsMobileNavOpen } = useContext(MobileNavContext)\r\n const home = useNavigationHome(locale)\r\n const microcopy = useHeaderI18n(locale)\r\n const {showSuggestions, setSearchValue} = useContext(SearchContext)\r\n const homePath = '/' + home.slug\r\n\r\n function onClick(e) {\r\n e.preventDefault()\r\n if (showSuggestions) {\r\n setSearchValue('')\r\n }\r\n setIsMobileNavOpen(!isMobileNavOpen)\r\n }\r\n\r\n return (\r\n {getI18nText(microcopy, 'header.languages')}
\r\n {languages.current.map((value) => {\r\n const path = languageDic[value.slug]\r\n\r\n if (path === undefined) {\r\n return null\r\n }\r\n\r\n return (\r\n\r\n })
\r\n
\r\n {value.title}\r\n \r\n \r\n )\r\n })}\r\n \r\n \r\n {({ accountNumber, accountType, email, isDistributor, firstName, lastName }) => {\r\n return (\r\n <>\r\n \r\n
\r\n {isDistributor ? (\r\n <>\r\n\r\n \r\n
\r\n \r\n )\r\n}\r\n\r\nexport default LoggedInOffCanvas\r\n","import React, { useState, useContext } from 'react'\r\nimport { Link } from 'gatsby'\r\nimport { Spinner } from 'react-bootstrap'\r\nimport LocaleContext from '../../contexts/localeContext'\r\nimport { getI18nText } from '../../services/i18nService'\r\nimport { useNavigationHome } from '../../hooks/useNavigationHome'\r\nimport { useRegisterSlug } from '../../hooks/slugs/useRegisterSlug'\r\nimport { performLogIn } from '../header/login'\r\nimport { useHeaderI18n } from '../../hooks/i18n/useHeaderI18n'\r\nimport { useRegisterI18n } from '../../hooks/i18n/useRegisterI18n'\r\nimport { useLoginI18n } from '../../hooks/i18n/useLoginI18n'\r\n\r\nconst LoginOffCanvas = ({ toggle, open }) => {\r\n const locale = useContext(LocaleContext)\r\n const [loginButtonHasBeenClicked, setLoginButtonHasBeenClicked] = useState(false)\r\n const headerMicrocopy = useHeaderI18n(locale)\r\n const registerMicrocopy = useRegisterI18n(locale)\r\n const loginMicrocopy = useLoginI18n(locale)\r\n const home = useNavigationHome(locale)\r\n const registerSlug = useRegisterSlug(locale)\r\n const registerUrl = `/${home.slug}/${registerSlug}`\r\n\r\n const onLoginClick = (e) => {\r\n e.preventDefault()\r\n performLogIn(loginButtonHasBeenClicked, setLoginButtonHasBeenClicked, home.slug)\r\n }\r\n\r\n return (\r\n {getI18nText(microcopy, 'header.account')}
\r\n{getI18nText(microcopy, 'header.welcomeback')}
\r\n\r\n
\r\n \r\n {email} {accountType === AccountTypeErp ? <>({accountNumber}) : null}\r\n
\r\n\r\n {isDistributor ? (\r\n <>\r\n
\r\n {getI18nText(accountMicrocopy, 'account.distributorportal')}\r\n
\r\n\r\n
\r\n \r\n {getI18nText(\r\n accountMicrocopy,\r\n 'account.accesspersonaliseddistributorportal'\r\n )}\r\n
\r\n\r\n {getI18nText(accountMicrocopy, 'account.distributorportal')}\r\n
\r\n \r\n \r\n ) : (\r\n <>\r\n \r\n {getI18nText(accountMicrocopy, 'account.myaccount')}\r\n
\r\n\r\n
\r\n \r\n {getI18nText(accountMicrocopy, 'account.viewyouraccount')}
\r\n\r\n {getI18nText(accountMicrocopy, 'account.viewaccount')}\r\n
\r\n \r\n \r\n )}\r\n \r\n )\r\n }}\r\n \r\n <>\r\n \r\n
\r\n\r\n
\r\n \r\n )\r\n}\r\n\r\nexport default LoginOffCanvas\r\n","import React, { useContext, useEffect, useRef, useState } from 'react'\r\nimport Login from '../header/login'\r\nimport Search from '../header/search'\r\nimport Languages from '../header/languages'\r\nimport Basket from '../header/basket'\r\nimport LiveChat from '../header/liveChat'\r\nimport Distributors from '../header/distributors'\r\nimport Suggestions from '../header/suggestions'\r\nimport Navigation from '../header/navigation'\r\nimport LanguagesSelect from '../header/languagesSelect'\r\nimport LocaleContext from '../../contexts/localeContext'\r\nimport { useNavigationHome } from '../../hooks/useNavigationHome'\r\nimport { navigate } from 'gatsby'\r\nimport MobileMenu from '../header/mobileMenu'\r\nimport MobileNavContext from '../../contexts/mobileNavContext'\r\nimport SearchContext from '../../contexts/searchContext'\r\nimport { BasketContextBrowsing } from '../../services/backendApiService'\r\nimport WhoAmI from '../header/whoAmI'\r\nimport LoggedInOffCanvas from '../offcanvas/loggedinOffcanvas'\r\nimport LoginOffCanvas from '../offcanvas/loginOffcanvas'\r\n\r\nconst StandardHeader = ({ darkTheme, id, skipGetBasket, showAccountOffCanvas }) => {\r\n const locale = useContext(LocaleContext)\r\n const { isMobileNavOpen, subNavId, setSubNavId } = useContext(MobileNavContext)\r\n const searchContext = useRef(useContext(SearchContext))\r\n const { suggestionsOpen } = useContext(SearchContext)\r\n\r\n const home = useNavigationHome(locale)\r\n const [languageOpen, setLanguageOpen] = useState(false)\r\n const [accountOffCanvasOpen, setAccountOffCanvasOpen] = useState(false)\r\n const [loginOffCanvasOpen, setLoginOffCanvasOpen] = useState(false)\r\n const [headerClasses, setHeaderClasses] = useState('header position-fixed w-100')\r\n\r\n useEffect(() => {\r\n setAccountOffCanvasOpen(showAccountOffCanvas)\r\n }, [showAccountOffCanvas])\r\n\r\n useEffect(() => {\r\n let myHeaderClasses = 'header position-fixed w-100'\r\n\r\n myHeaderClasses = darkTheme ? `${myHeaderClasses} theme-dark` : myHeaderClasses\r\n\r\n if (isMobileNavOpen === true) {\r\n myHeaderClasses = `${myHeaderClasses} mobilenav-open`\r\n\r\n if (subNavId !== null) {\r\n myHeaderClasses = `${myHeaderClasses} hide-extramenu`\r\n }\r\n }\r\n\r\n if (suggestionsOpen === true) {\r\n myHeaderClasses = `${myHeaderClasses} search-open`\r\n }\r\n\r\n setHeaderClasses(myHeaderClasses)\r\n }, [isMobileNavOpen, subNavId, suggestionsOpen])\r\n\r\n function languageOnClick() {\r\n searchContext.current.closeSuggestions()\r\n setLanguageOpen(!languageOpen)\r\n }\r\n\r\n function toggle() {\r\n setAccountOffCanvasOpen(!accountOffCanvasOpen)\r\n }\r\n\r\n function toggleLoginOffCanvas() {\r\n setLoginOffCanvasOpen(!loginOffCanvasOpen)\r\n }\r\n\r\n function homeLogoClicked() {\r\n searchContext.current.closeSuggestions()\r\n navigate('/' + home.slug)\r\n }\r\n\r\n function onPrimaryMouseEnter() {\r\n if (isMobileNavOpen === false) {\r\n let header = document.querySelector('header')\r\n header.classList.remove('nav-open')\r\n setSubNavId(null)\r\n }\r\n }\r\n\r\n return (\r\n {getI18nText(headerMicrocopy, 'header.account')}
\r\n{getI18nText(loginMicrocopy, 'login.login')}
\r\n\r\n
\r\n \r\n {getI18nText(loginMicrocopy, 'login.logintogainaccess')}
\r\n\r\n \r\n {getI18nText(loginMicrocopy, 'login.forgotpassword')}\r\n \r\n
\r\n\r\n {getI18nText(loginMicrocopy, 'login.login')}\r\n {loginButtonHasBeenClicked ? (\r\n
\r\n \r\n \r\n\r\n
{getI18nText(registerMicrocopy, 'register.register')}
\r\n\r\n
\r\n \r\n \r\n {getI18nText(registerMicrocopy, 'register.donothaveanaccount')} \r\n {getI18nText(registerMicrocopy, 'register.registertoaccess')}\r\n
\r\n\r\n {getI18nText(registerMicrocopy, 'register.register')}\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n {languageOpen || accountOffCanvasOpen ? (\r\n \r\n ) : null}\r\n - \r\n
\r\n
\r\n \r\n {text}\r\n <>\r\n {link ? (\r\n \r\n {linkText}\r\n \r\n \r\n ) : null}\r\n \r\n
\r\n \r\n \r\n {children}\r\n
\r\n {/* {children}
\r\n \n * {JSON.stringify(rect)}\n *
\n * )\n * ```\n *\n * @param element The DOM element to observe\n */\nexport default function useResizeObserver(element) {\n const [rect, setRect] = useState(null);\n useEffect(() => {\n if (!element) return;\n getResizeObserver().observe(element);\n setRect(element.getBoundingClientRect());\n targetMap.set(element, rect => {\n setRect(rect);\n });\n return () => {\n targetMap.delete(element);\n };\n }, [element]);\n return rect;\n}","const _excluded = [\"as\", \"disabled\"];\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\nimport * as React from 'react';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport function isTrivialHref(href) {\n return !href || href.trim() === '#';\n}\nexport function useButtonProps({\n tagName,\n disabled,\n href,\n target,\n rel,\n role,\n onClick,\n tabIndex = 0,\n type\n}) {\n if (!tagName) {\n if (href != null || target != null || rel != null) {\n tagName = 'a';\n } else {\n tagName = 'button';\n }\n }\n const meta = {\n tagName\n };\n if (tagName === 'button') {\n return [{\n type: type || 'button',\n disabled\n }, meta];\n }\n const handleClick = event => {\n if (disabled || tagName === 'a' && isTrivialHref(href)) {\n event.preventDefault();\n }\n if (disabled) {\n event.stopPropagation();\n return;\n }\n onClick == null ? void 0 : onClick(event);\n };\n const handleKeyDown = event => {\n if (event.key === ' ') {\n event.preventDefault();\n handleClick(event);\n }\n };\n if (tagName === 'a') {\n // Ensure there's a href so Enter can trigger anchor button.\n href || (href = '#');\n if (disabled) {\n href = undefined;\n }\n }\n return [{\n role: role != null ? role : 'button',\n // explicitly undefined so that it overrides the props disabled in a spread\n // e.g. \n * I'm a fade Transition!\n *
\n * )}\n * \n * \n * {state => (\n * // ...\n * )}\n * \n * \n *
\n * );\n * }\n * ```\n *\n * When the button is clicked the component will shift to the `'entering'` state\n * and stay there for 500ms (the value of `timeout`) before it finally switches\n * to `'entered'`.\n *\n * When `in` is `false` the same thing happens except the state moves from\n * `'exiting'` to `'exited'`.\n */\n\nvar Transition = /*#__PURE__*/function (_React$Component) {\n _inheritsLoose(Transition, _React$Component);\n\n function Transition(props, context) {\n var _this;\n\n _this = _React$Component.call(this, props, context) || this;\n var parentGroup = context; // In the context of a TransitionGroup all enters are really appears\n\n var appear = parentGroup && !parentGroup.isMounting ? props.enter : props.appear;\n var initialStatus;\n _this.appearStatus = null;\n\n if (props.in) {\n if (appear) {\n initialStatus = EXITED;\n _this.appearStatus = ENTERING;\n } else {\n initialStatus = ENTERED;\n }\n } else {\n if (props.unmountOnExit || props.mountOnEnter) {\n initialStatus = UNMOUNTED;\n } else {\n initialStatus = EXITED;\n }\n }\n\n _this.state = {\n status: initialStatus\n };\n _this.nextCallback = null;\n return _this;\n }\n\n Transition.getDerivedStateFromProps = function getDerivedStateFromProps(_ref, prevState) {\n var nextIn = _ref.in;\n\n if (nextIn && prevState.status === UNMOUNTED) {\n return {\n status: EXITED\n };\n }\n\n return null;\n } // getSnapshotBeforeUpdate(prevProps) {\n // let nextStatus = null\n // if (prevProps !== this.props) {\n // const { status } = this.state\n // if (this.props.in) {\n // if (status !== ENTERING && status !== ENTERED) {\n // nextStatus = ENTERING\n // }\n // } else {\n // if (status === ENTERING || status === ENTERED) {\n // nextStatus = EXITING\n // }\n // }\n // }\n // return { nextStatus }\n // }\n ;\n\n var _proto = Transition.prototype;\n\n _proto.componentDidMount = function componentDidMount() {\n this.updateStatus(true, this.appearStatus);\n };\n\n _proto.componentDidUpdate = function componentDidUpdate(prevProps) {\n var nextStatus = null;\n\n if (prevProps !== this.props) {\n var status = this.state.status;\n\n if (this.props.in) {\n if (status !== ENTERING && status !== ENTERED) {\n nextStatus = ENTERING;\n }\n } else {\n if (status === ENTERING || status === ENTERED) {\n nextStatus = EXITING;\n }\n }\n }\n\n this.updateStatus(false, nextStatus);\n };\n\n _proto.componentWillUnmount = function componentWillUnmount() {\n this.cancelNextCallback();\n };\n\n _proto.getTimeouts = function getTimeouts() {\n var timeout = this.props.timeout;\n var exit, enter, appear;\n exit = enter = appear = timeout;\n\n if (timeout != null && typeof timeout !== 'number') {\n exit = timeout.exit;\n enter = timeout.enter; // TODO: remove fallback for next major\n\n appear = timeout.appear !== undefined ? timeout.appear : enter;\n }\n\n return {\n exit: exit,\n enter: enter,\n appear: appear\n };\n };\n\n _proto.updateStatus = function updateStatus(mounting, nextStatus) {\n if (mounting === void 0) {\n mounting = false;\n }\n\n if (nextStatus !== null) {\n // nextStatus will always be ENTERING or EXITING.\n this.cancelNextCallback();\n\n if (nextStatus === ENTERING) {\n if (this.props.unmountOnExit || this.props.mountOnEnter) {\n var node = this.props.nodeRef ? this.props.nodeRef.current : ReactDOM.findDOMNode(this); // https://github.com/reactjs/react-transition-group/pull/749\n // With unmountOnExit or mountOnEnter, the enter animation should happen at the transition between `exited` and `entering`.\n // To make the animation happen, we have to separate each rendering and avoid being processed as batched.\n\n if (node) forceReflow(node);\n }\n\n this.performEnter(mounting);\n } else {\n this.performExit();\n }\n } else if (this.props.unmountOnExit && this.state.status === EXITED) {\n this.setState({\n status: UNMOUNTED\n });\n }\n };\n\n _proto.performEnter = function performEnter(mounting) {\n var _this2 = this;\n\n var enter = this.props.enter;\n var appearing = this.context ? this.context.isMounting : mounting;\n\n var _ref2 = this.props.nodeRef ? [appearing] : [ReactDOM.findDOMNode(this), appearing],\n maybeNode = _ref2[0],\n maybeAppearing = _ref2[1];\n\n var timeouts = this.getTimeouts();\n var enterTimeout = appearing ? timeouts.appear : timeouts.enter; // no enter animation skip right to ENTERED\n // if we are mounting and running this it means appear _must_ be set\n\n if (!mounting && !enter || config.disabled) {\n this.safeSetState({\n status: ENTERED\n }, function () {\n _this2.props.onEntered(maybeNode);\n });\n return;\n }\n\n this.props.onEnter(maybeNode, maybeAppearing);\n this.safeSetState({\n status: ENTERING\n }, function () {\n _this2.props.onEntering(maybeNode, maybeAppearing);\n\n _this2.onTransitionEnd(enterTimeout, function () {\n _this2.safeSetState({\n status: ENTERED\n }, function () {\n _this2.props.onEntered(maybeNode, maybeAppearing);\n });\n });\n });\n };\n\n _proto.performExit = function performExit() {\n var _this3 = this;\n\n var exit = this.props.exit;\n var timeouts = this.getTimeouts();\n var maybeNode = this.props.nodeRef ? undefined : ReactDOM.findDOMNode(this); // no exit animation skip right to EXITED\n\n if (!exit || config.disabled) {\n this.safeSetState({\n status: EXITED\n }, function () {\n _this3.props.onExited(maybeNode);\n });\n return;\n }\n\n this.props.onExit(maybeNode);\n this.safeSetState({\n status: EXITING\n }, function () {\n _this3.props.onExiting(maybeNode);\n\n _this3.onTransitionEnd(timeouts.exit, function () {\n _this3.safeSetState({\n status: EXITED\n }, function () {\n _this3.props.onExited(maybeNode);\n });\n });\n });\n };\n\n _proto.cancelNextCallback = function cancelNextCallback() {\n if (this.nextCallback !== null) {\n this.nextCallback.cancel();\n this.nextCallback = null;\n }\n };\n\n _proto.safeSetState = function safeSetState(nextState, callback) {\n // This shouldn't be necessary, but there are weird race conditions with\n // setState callbacks and unmounting in testing, so always make sure that\n // we can cancel any pending setState callbacks after we unmount.\n callback = this.setNextCallback(callback);\n this.setState(nextState, callback);\n };\n\n _proto.setNextCallback = function setNextCallback(callback) {\n var _this4 = this;\n\n var active = true;\n\n this.nextCallback = function (event) {\n if (active) {\n active = false;\n _this4.nextCallback = null;\n callback(event);\n }\n };\n\n this.nextCallback.cancel = function () {\n active = false;\n };\n\n return this.nextCallback;\n };\n\n _proto.onTransitionEnd = function onTransitionEnd(timeout, handler) {\n this.setNextCallback(handler);\n var node = this.props.nodeRef ? this.props.nodeRef.current : ReactDOM.findDOMNode(this);\n var doesNotHaveTimeoutOrListener = timeout == null && !this.props.addEndListener;\n\n if (!node || doesNotHaveTimeoutOrListener) {\n setTimeout(this.nextCallback, 0);\n return;\n }\n\n if (this.props.addEndListener) {\n var _ref3 = this.props.nodeRef ? [this.nextCallback] : [node, this.nextCallback],\n maybeNode = _ref3[0],\n maybeNextCallback = _ref3[1];\n\n this.props.addEndListener(maybeNode, maybeNextCallback);\n }\n\n if (timeout != null) {\n setTimeout(this.nextCallback, timeout);\n }\n };\n\n _proto.render = function render() {\n var status = this.state.status;\n\n if (status === UNMOUNTED) {\n return null;\n }\n\n var _this$props = this.props,\n children = _this$props.children,\n _in = _this$props.in,\n _mountOnEnter = _this$props.mountOnEnter,\n _unmountOnExit = _this$props.unmountOnExit,\n _appear = _this$props.appear,\n _enter = _this$props.enter,\n _exit = _this$props.exit,\n _timeout = _this$props.timeout,\n _addEndListener = _this$props.addEndListener,\n _onEnter = _this$props.onEnter,\n _onEntering = _this$props.onEntering,\n _onEntered = _this$props.onEntered,\n _onExit = _this$props.onExit,\n _onExiting = _this$props.onExiting,\n _onExited = _this$props.onExited,\n _nodeRef = _this$props.nodeRef,\n childProps = _objectWithoutPropertiesLoose(_this$props, [\"children\", \"in\", \"mountOnEnter\", \"unmountOnExit\", \"appear\", \"enter\", \"exit\", \"timeout\", \"addEndListener\", \"onEnter\", \"onEntering\", \"onEntered\", \"onExit\", \"onExiting\", \"onExited\", \"nodeRef\"]);\n\n return (\n /*#__PURE__*/\n // allows for nested Transitions\n React.createElement(TransitionGroupContext.Provider, {\n value: null\n }, typeof children === 'function' ? children(status, childProps) : React.cloneElement(React.Children.only(children), childProps))\n );\n };\n\n return Transition;\n}(React.Component);\n\nTransition.contextType = TransitionGroupContext;\nTransition.propTypes = process.env.NODE_ENV !== \"production\" ? {\n /**\n * A React reference to DOM element that need to transition:\n * https://stackoverflow.com/a/51127130/4671932\n *\n * - When `nodeRef` prop is used, `node` is not passed to callback functions\n * (e.g. `onEnter`) because user already has direct access to the node.\n * - When changing `key` prop of `Transition` in a `TransitionGroup` a new\n * `nodeRef` need to be provided to `Transition` with changed `key` prop\n * (see\n * [test/CSSTransition-test.js](https://github.com/reactjs/react-transition-group/blob/13435f897b3ab71f6e19d724f145596f5910581c/test/CSSTransition-test.js#L362-L437)).\n */\n nodeRef: PropTypes.shape({\n current: typeof Element === 'undefined' ? PropTypes.any : function (propValue, key, componentName, location, propFullName, secret) {\n var value = propValue[key];\n return PropTypes.instanceOf(value && 'ownerDocument' in value ? value.ownerDocument.defaultView.Element : Element)(propValue, key, componentName, location, propFullName, secret);\n }\n }),\n\n /**\n * A `function` child can be used instead of a React element. This function is\n * called with the current transition status (`'entering'`, `'entered'`,\n * `'exiting'`, `'exited'`), which can be used to apply context\n * specific props to a component.\n *\n * ```jsx\n *