\r\n {userToken && (\r\n \r\n {ReactHtmlParser(MyProfile)}\r\n\r\n \r\n )}\r\n
\r\n );\r\n}\r\n\r\nconst HoverStyleWrapper = styled.div`\r\n${({\r\n theme: {\r\n breakpoints: { tablet, tabletLarge, mobileLarge, mobileMax },\r\n },\r\n}) => `\r\n position: relative;\r\n z-index: 1;\r\n padding: 12px;\r\n \r\n &: hover {\r\n background-color: #f2f2f2;\r\n }\r\n \r\n span {\r\n color: #333;\r\n text-transform: capitalize;\r\n font-size: 16px;\r\n // line-height: 26px;\r\n font-weight: bold;\r\n cursor: pointer;\r\n }\r\n\r\n @media (max-width: ${mobileMax}px){\r\n font-size: 14px;\r\n padding: 5px;\r\n }\r\n\r\n > div {\r\n background-color: #fff;\r\n position: absolute;\r\n top: 50px;\r\n right: 0;\r\n box-shadow: 0 0 10px #00000029;\r\n ul {\r\n padding: 0;\r\n margin: 0;\r\n li {\r\n a {\r\n white-space: nowrap;\r\n }\r\n }\r\n }\r\n\r\n @media (min-width: 1200px) {\r\n display: none !important;\r\n }\r\n }\r\n\r\n &:hover > div {\r\n @media (min-width: 1200px) {\r\n display: block !important;\r\n }\r\n }\r\n\r\n &:hover > div::before {\r\n content: '';\r\n position: absolute;\r\n width: 100%;\r\n height: 30px;\r\n top: -30px;\r\n }\r\n\r\n > div ul li {\r\n list-style-type: none;\r\n\r\n a {\r\n display: block;\r\n padding: 15px 10px;\r\n text-decoration: none;\r\n color: rgb(106, 106, 106);\r\n font-size: 1.5rem;\r\n position: relative;\r\n letter-spacing: 1px;\r\n transition: all 0.2s;\r\n\r\n :hover {\r\n background-color: rgb(228, 225, 225);\r\n text-decoration: none;\r\n }\r\n }\r\n\r\n &:not(:last-child) {\r\n border-bottom: 1px solid #ddd;\r\n }\r\n }\r\n `}\r\n`;\r\n","import { Auth } from 'components/context/AuthContext';\r\nimport { DeliveryStatus } from 'components/_icons/Icon.stories.js';\r\nimport { logoutApi } from 'helpers/utilities.js';\r\nimport React, { useContext, useState } from 'react';\r\nimport { Link } from 'react-router-dom';\r\nimport styled, { css } from 'styled-components';\r\nimport ReactHtmlParser from 'react-html-parser';\r\nimport { NavIcon } from '../../global-nav/GlobalNav.styles.js';\r\n\r\nexport default function SearchBarNav({ SearchText }) {\r\n const searchParams = new URLSearchParams(document.location.search)\r\n\r\n const [isOpen, setIsOpen] = useState(false);\r\n\r\n const handleClick = e => {\r\n if (!isOpen) {\r\n setIsOpen(true);\r\n document.getElementById('searchBar_Form').style.display = 'block';\r\n } else {\r\n setIsOpen(false);\r\n document.getElementById('searchBar_Form').style.display = 'none';\r\n }\r\n };\r\n return (\r\n \r\n
\r\n - \r\n {links?.map(item => {\r\n if (item.url === '#b2c-log-out') {\r\n return (\r\n
- \r\n \r\n {ReactHtmlParser(item.title)}\r\n \r\n
\r\n \r\n );\r\n } else if (item.url === '#b2c-edit-profile') {\r\n return (\r\n - \r\n
\r\n \r\n );\r\n } else if (item.url === '#b2c-edit_profile_edit_phone') {\r\n return (\r\n - \r\n
\r\n \r\n );\r\n } else if (item.url === '#b2c-edit_password') {\r\n return (\r\n - \r\n
\r\n \r\n );\r\n } else if (item.isExternal) {\r\n return (\r\n - \r\n \r\n {ReactHtmlParser(item.title)}\r\n \r\n
\r\n \r\n );\r\n } else {\r\n return (\r\n - \r\n \r\n {ReactHtmlParser(item.title)}\r\n \r\n
\r\n \r\n );\r\n }\r\n })}\r\n
\r\n {ReactHtmlParser(warningHeader.WarningMessage)}\r\n
\r\n\r\n {\r\n e.preventDefault();\r\n localStorage.setItem(\"PP_warningHeader_\" + (new Date()).getDate(), \"hide\");\r\n window.location.reload();\r\n }}>\r\n \r\n \r\n \r\n {ReactHtmlParser(parentLinks?.title)}\r\n
\r\n- \r\n {parentLinks?.childLinks?.map(item => {\r\n return (\r\n
- \r\n {item.isExternal ? (\r\n
\r\n \r\n )}\r\n \r\n );\r\n })}\r\n
\r\n {ReactHtmlParser(dataChild?.title)}\r\n
\r\n- \r\n {dataChild?.childSubLinks &&\r\n dataChild?.childSubLinks?.map(item => {\r\n return (\r\n
- \r\n {item.isExternal ? (\r\n getSubChiled(item.title)}>\r\n\r\n )}\r\n
\r\n \r\n );\r\n })}\r\n
\r\n \r\n {ReactHtmlParser(name)} \r\n {jobTitle && {ReactHtmlParser(jobTitle)} }\r\n {titleCompany && {ReactHtmlParser(titleCompany)} }\r\n \r\n
\r\n \r\n {ReactHtmlParser(placeholder)}\r\n
\r\n\r\n {selectOptions?.map((item, index) => {\r\n const { value, key } = item;\r\n return (\r\n \r\n )\r\n })}\r\n {ReactHtmlParser(item)}
\r\n ))}\r\n\r\n {item}\r\n
\r\n ))}\r\n \r\n );\r\n };\r\n return (\r\n\r\n {ReactHtmlParser(title)} \r\n \r\n {isEllipsisMessage}\r\n \r\n \r\n
\r\n \"))}
\r\n \r\n \r\n
\r\n { ReactHtmlParser(header) }
\r\n\r\n
\r\n :null\r\n }\r\n \r\n
\r\n\r\n { ReactHtmlParser(header) + \" : \" + url.q }
\r\n\r\n {searchResult?.map((resultItem, indexSearch) => {\r\n return (\r\n
\r\n \r\n \r\n
\r\n )\r\n })}\r\n { ReactHtmlParser(resultItem.content?.title)}
\r\n \r\n\r\n {resultItem?.content?.main?.components?.map((component, indexComponent) => {\r\n return (\r\n component.templateLabel == \"Header Template\" && component.header != resultItem.content.title?\r\n
\r\n {component.header}
\r\n \r\n : null\r\n )\r\n}\r\n\r\nconst SearchComponent_Tiles = ({ component, url, brand, langFolder, pageID }) => {\r\n return (\r\n component.tiles?.map((tile, indexTile) => {\r\n\r\n if(!tile.icon) { tile.icon = {src: '#'}; }\r\n return (tile.IsAuthorized && (\r\n tile.navigation?.alt?.toLowerCase().indexOf(url.q.toLowerCase()) != -1 ||\r\n tile.navigation?.url?.toLowerCase().indexOf(url.q.toLowerCase()) != -1 ||\r\n tile.label?.toLowerCase().indexOf(url.q.toLowerCase()) != -1\r\n )?\r\n <>\r\n {\r\n tile.label?\r\n {tile.label}\r\n :tile.navigation?.url.toLowerCase().indexOf('kverneland') != -1? Kverneland\r\n\r\n :tile.navigation?.url.toLowerCase().indexOf('kubota') != -1? Kubota\r\n\r\n :tile.navigation?.url.toLowerCase().indexOf('vicon') != -1? Vicon\r\n\r\n :null\r\n }\r\n {/*{tile.label}
\r\n{tile.navigation?.alt}
\r\n{tile.navigation?.url}
*/}\r\n \r\n : null\r\n )\r\n })\r\n )\r\n}\r\n\r\nconst SearchComponent_Cards = ({ component, url }) => {\r\n return (\r\n\r\n {card.name}({card.emailAddress})\r\n
\r\n \r\n : null\r\n )\r\n })\r\n }\r\n \r\n
\r\n\r\n : sourceType == \"internal\" ?\r\n \r\n \r\n
\r\n : sourceType == \"external\" ?\r\n \r\n \r\n
\r\n\r\n : null\r\n }\r\n \r\n \r\n
\r\n No component found for {templateLabel}
;\r\n }\r\n \r\n return\r\n
\r\n );\r\n }\r\n\r\n // dynamically adding in colours for theming of\r\n // different brands. This brand comes from BE\r\n // which comes from UMS.\r\n\r\n const brand = page?.brand || 'default';\r\n\r\n const newColours = { ...theme.colours, ...brands[brand] };\r\n\r\n theme.colours = newColours;\r\n\r\n return (\r\n