{"version":3,"sources":["Shared/MobileQuickSearch/MobileQuickSearch.tsx","Shared/MenuButton/MenuButton.tsx","Shared/Icons/SearchIconWhite.tsx","Shared/SearchButton/SearchButton.tsx","Shared/Models/Headers/MobileHeader/MobileHeader.tsx"],"names":["Container","styled","div","height","width","backgroundColor","theme","lighterDarkGray","display","alignItems","padding","x","spacing","overflow","transition","duration","timings","oneThird","property","timingFunction","pseudo","paddingTop","paddingBottom","MobileQuickSearch","isOpen","setSearchOpen","useState","searchResult","setSearchResult","isSearchInputActive","setIsSearchInputActive","currentSearchPhrase","setCurrentSearchPhrase","searchRef","useRef","useOutsideClick","onSearchResultChange","useCallback","res","searchPhrase","ref","data-isopen","SearchInput","isActive","setIsActive","inputValue","setInputValue","SearchModal","setInputActive","Button","button","menuButtonWidth","menuButtonHeight","Hamburger","position","transform","transformOrigin","BarTop","span","white","borderRadius","smaller","left","top","primaryBlue","BarMid","BarBot","bottom","opacity","MenuButton","onClick","EventDispatcher","dispatch","ON_MOBILE_MENU_OPEN_CHANGE","compose","Svg","css","xmlns","d","fillRule","StyledSearchButton","paddingRight","paddingLeft","StyledSearchIconWhite","SearchIconWhite","fill","StyledSearchIconBlue","iconLightBlue","SearchButton","searchIsOpen","ON_MOBILE_SEARCH_OPEN_CHANGE","MobileHeader","useAppSettingsData","languageRoute","translations","contactLabel","signInLabel","signOutLabel","myPagesLabel","cartLabel","staticPages","loginPage","contactUs","myPage","authenticated","useUserStateData","onMenuOpenChange","isMenuActive","setIsMenuActive","searchOpen","miniCartIsOpen","setMiniCartIsOpen","useEffect","onSearchOpenChange","subscribe","onMiniCartOpenChange","ON_MINICART_OPEN_CHANGE","unsubscribe","boundOnMenuOpenChange","bind","Placeholder","Header","id","MobileHeaderContainer","MobileHeaderTopSection","HeaderIconLink","linkType","LinkType","MyPages","label","href","Contact","MiniCart","SignOut","SignIn","MobileHeaderBottomSection","data-menuisopen","ImageWrapper","KexLink","Logo","src","alt","BottomSectionButtonsWrapper","mobileHeaderHeight","right","zIndex","darkGray","header","HeaderMobile","mobileHeaderTopSectionHeight","y","medium","justifyContent","mobileHeaderBottomSectionHeight","threeTenths","img"],"mappings":"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","file":"Dist/build-client/static/js/MobileHeader-MobileHeader.a40c5837.chunk.js","sourcesContent":["import React, { useState, useCallback, useRef } from 'react';\r\nimport { theme, styled } from '../../Theme';\r\nimport useOutsideClick from '../Hooks/useOutsideClick';\r\nimport { pseudo } from '@glitz/core';\r\nimport SearchModal from '../../SearchModal/SearchModal';\r\n\r\nimport SearchInput from '../../SearchPage/SearchInput';\r\nimport FullSearchResult from '../../Search/Models/FullSearchResult.interface';\r\n\r\ntype PropTypes = {\r\n  isOpen: boolean;\r\n  setSearchOpen: any;\r\n};\r\n\r\nfunction MobileQuickSearch({ isOpen, setSearchOpen }: PropTypes) {\r\n  const [searchResult, setSearchResult] = useState<FullSearchResult>();\r\n  const [isSearchInputActive, setIsSearchInputActive] = useState(false);\r\n  const [currentSearchPhrase, setCurrentSearchPhrase] = useState('');\r\n\r\n  const searchRef = useRef<HTMLDivElement>(null);\r\n\r\n  useOutsideClick(searchRef, () => {\r\n    isOpen && setSearchOpen(false);\r\n  });\r\n\r\n  const onSearchResultChange = useCallback((res, searchPhrase) => {\r\n    setCurrentSearchPhrase(searchPhrase);\r\n    setSearchResult(res);\r\n  }, []);\r\n\r\n  return (\r\n    <>\r\n      <Container ref={searchRef} data-isopen={isOpen}>\r\n        {isOpen && (\r\n          <SearchInput\r\n            onSearchResultChange={onSearchResultChange}\r\n            isActive={isSearchInputActive}\r\n            setIsActive={setIsSearchInputActive}\r\n            inputValue={currentSearchPhrase}\r\n            setInputValue={setCurrentSearchPhrase}\r\n          />\r\n        )}\r\n      </Container>\r\n      {isOpen && (\r\n        <SearchModal\r\n          searchResult={searchResult}\r\n          isOpen={isSearchInputActive}\r\n          currentSearchPhrase={currentSearchPhrase}\r\n          setInputActive={setIsSearchInputActive}\r\n          onSearchResultChange={onSearchResultChange}\r\n        />\r\n      )}\r\n    </>\r\n  );\r\n}\r\n\r\nconst Container = styled.div({\r\n  height: 0,\r\n  width: '100%',\r\n  backgroundColor: theme.lighterDarkGray,\r\n  display: 'flex',\r\n  alignItems: 'center',\r\n  padding: { x: theme.spacing(4) },\r\n  overflow: 'hidden',\r\n  transition: {\r\n    duration: theme.timings.oneThird,\r\n    property: 'all',\r\n    timingFunction: 'ease-out',\r\n  },\r\n  ...pseudo([':nth-child(n)[data-isopen=\"true\"]'], {\r\n    height: '77px',\r\n    paddingTop: theme.spacing(1),\r\n    paddingBottom: theme.spacing(5),\r\n  }),\r\n});\r\n\r\nexport default MobileQuickSearch;\r\n","import React from 'react';\r\n\r\nimport { styled, theme } from '../../Theme';\r\nimport { pseudo } from '@glitz/core';\r\n\r\nimport {\r\n  EventDispatcher,\r\n  ON_MOBILE_MENU_OPEN_CHANGE,\r\n} from '../../Shared/Common/EventDispatcher';\r\n\r\ntype PropTypes = {\r\n  isOpen: boolean;\r\n};\r\n\r\nfunction MenuButton({ isOpen }: PropTypes) {\r\n  return (\r\n    <Button\r\n      onClick={() =>\r\n        EventDispatcher.dispatch(ON_MOBILE_MENU_OPEN_CHANGE, !isOpen)\r\n      }\r\n    >\r\n      <Hamburger data-isopen={isOpen}>\r\n        <BarTop data-isopen={isOpen} />\r\n        <BarMid data-isopen={isOpen} />\r\n        <BarBot data-isopen={isOpen} />\r\n      </Hamburger>\r\n    </Button>\r\n  );\r\n}\r\n\r\nconst Button = styled.button({\r\n  width: theme.menuButtonWidth,\r\n  height: theme.menuButtonHeight,\r\n});\r\n\r\nconst Hamburger = styled.div({\r\n  position: 'relative',\r\n  height: '100%',\r\n  width: '100%',\r\n  transition: {\r\n    property: 'transform',\r\n    timingFunction: '$main-timing-function',\r\n    duration: '0.3s',\r\n  },\r\n  ...pseudo([':nth-child(n)[data-isopen=\"true\"]'], {\r\n    transform: 'rotate(45deg)',\r\n    transformOrigin: 'center',\r\n  }),\r\n});\r\n\r\nconst BarTop = styled.span({\r\n  backgroundColor: theme.white,\r\n  display: 'block',\r\n  position: 'absolute',\r\n  borderRadius: theme.smaller,\r\n  height: theme.smaller,\r\n  width: '100%',\r\n  left: '50%',\r\n  top: 0,\r\n  transform: 'translateX(-50%)',\r\n  ...pseudo([':nth-child(n)[data-isopen=\"true\"]'], {\r\n    backgroundColor: theme.primaryBlue,\r\n    position: 'absolute',\r\n    transform: 'rotate(90deg) translate(-50%, -50%)',\r\n    transformOrigin: 'left top',\r\n    top: '50%',\r\n  }),\r\n});\r\n\r\nconst BarMid = styled.span({\r\n  backgroundColor: theme.white,\r\n  display: 'block',\r\n  position: 'absolute',\r\n  borderRadius: theme.smaller,\r\n  height: theme.smaller,\r\n  width: '100%',\r\n  left: '50%',\r\n  top: '50%',\r\n  transform: 'translate(-50%, -50%)',\r\n  ...pseudo([':nth-child(n)[data-isopen=\"true\"]'], {\r\n    backgroundColor: theme.primaryBlue,\r\n  }),\r\n});\r\n\r\nconst BarBot = styled.span({\r\n  backgroundColor: theme.white,\r\n  display: 'block',\r\n  position: 'absolute',\r\n  borderRadius: theme.smaller,\r\n  height: theme.smaller,\r\n  width: '100%',\r\n  left: '50%',\r\n  bottom: 0,\r\n  transform: 'translateX(-50%)',\r\n  ...pseudo([':nth-child(n)[data-isopen=\"true\"]'], {\r\n    opacity: 0,\r\n  }),\r\n});\r\n\r\nexport default MenuButton;\r\n","import React from 'react';\r\nimport { styled } from '../../Theme';\r\nimport { StyledProps } from '@glitz/react';\r\n\r\nfunction SearchIconWhite({ compose }: StyledProps) {\r\n  return (\r\n    <styled.Svg css={compose()} xmlns=\"http://www.w3.org/2000/svg\">\r\n      <path\r\n        d=\"M8.95 17.9C4.028 17.9 0 13.89 0 8.95 0 4.028 4.028 0 8.95 0a8.952 8.952 0 0 1 8.95 8.95 8.935 8.935 0 0 1-2.084 5.715l6.946 6.946a.814.814 0 0 1-1.151 1.15l-6.946-6.945A8.788 8.788 0 0 1 8.95 17.9zm0-16.5C4.796 1.4 1.4 4.796 1.4 8.95s3.376 7.55 7.55 7.55a7.545 7.545 0 0 0 7.55-7.55c0-4.154-3.376-7.55-7.55-7.55z\"\r\n        fillRule=\"nonzero\"\r\n      />\r\n    </styled.Svg>\r\n  );\r\n}\r\n\r\nexport default styled(SearchIconWhite);\r\n","import React from 'react';\r\n\r\nimport { styled, theme } from '../../Theme';\r\nimport { pseudo } from '@glitz/core';\r\nimport SearchIconWhite from '../Icons/SearchIconWhite';\r\n\r\nimport {\r\n  EventDispatcher,\r\n  ON_MOBILE_SEARCH_OPEN_CHANGE,\r\n} from '../../Shared/Common/EventDispatcher';\r\n\r\ntype PropTypes = {\r\n  searchIsOpen: boolean;\r\n};\r\n\r\nfunction SearchButton({ searchIsOpen }: PropTypes) {\r\n  return (\r\n    <StyledSearchButton\r\n      onClick={() =>\r\n        EventDispatcher.dispatch(ON_MOBILE_SEARCH_OPEN_CHANGE, !searchIsOpen)\r\n      }\r\n    >\r\n      {searchIsOpen ? <StyledSearchIconBlue /> : <StyledSearchIconWhite />}\r\n    </StyledSearchButton>\r\n  );\r\n}\r\n\r\nconst StyledSearchButton = styled.button({\r\n  paddingRight: theme.spacing(8),\r\n  paddingLeft: theme.spacing(5),\r\n});\r\n\r\nconst StyledSearchIconWhite = styled(SearchIconWhite, {\r\n  height: '26px',\r\n  width: '26px',\r\n  fill: theme.white,\r\n  ...pseudo([':nth-child(n)[data-menuisopen=\"true\"]'], {\r\n    display: 'none',\r\n  }),\r\n});\r\n\r\nconst StyledSearchIconBlue = styled(SearchIconWhite, {\r\n  height: '26px',\r\n  width: '26px',\r\n  fill: theme.iconLightBlue,\r\n  ...pseudo([':nth-child(n)[data-menuisopen=\"true\"]'], {\r\n    display: 'none',\r\n  }),\r\n});\r\n\r\nexport default SearchButton;\r\n","import React, { useEffect, useState } from 'react';\r\n\r\nimport { styled, theme } from '../../../../Theme';\r\nimport { pseudo } from '@glitz/core';\r\nimport MobileQuickSearch from '../../../MobileQuickSearch/MobileQuickSearch';\r\nimport KexLink from '../../../KexLink/KexLink';\r\nimport { useAppSettingsData } from '../../../AppSettingsProvider/AppSettingsProvider';\r\nimport HeaderIconLink from '../HeaderIconLink/HeaderIconLink';\r\nimport { LinkType } from '../../../../Enums/LinkType.enum';\r\nimport MenuButton from '../../../../Shared/MenuButton/MenuButton';\r\nimport SearchButton from '../../../../Shared/SearchButton/SearchButton';\r\n\r\nimport {\r\n  EventDispatcher,\r\n  ON_MOBILE_MENU_OPEN_CHANGE,\r\n  ON_MOBILE_SEARCH_OPEN_CHANGE,\r\n  ON_MINICART_OPEN_CHANGE,\r\n} from '../../../../Shared/Common/EventDispatcher';\r\nimport { useUserStateData } from '../../../UserContextProvider/UserContextProvider';\r\n\r\nfunction MobileHeader() {\r\n  const {\r\n    languageRoute,\r\n    translations: {\r\n      'common/contact': contactLabel,\r\n      'account/signIn': signInLabel,\r\n      'account/signOut': signOutLabel,\r\n      'common/myPages': myPagesLabel,\r\n      'common/cart': cartLabel,\r\n    },\r\n    staticPages: { loginPage, contactUs, myPage },\r\n  } = useAppSettingsData();\r\n\r\n  const { authenticated } = useUserStateData();\r\n\r\n  const logoUrl = '/Dist/img/pictura-logo.png';\r\n\r\n  const onMenuOpenChange = (setIsActive: any, isOpen: boolean) => {\r\n    setIsActive(isOpen);\r\n  };\r\n\r\n  const [isMenuActive, setIsMenuActive] = useState(false);\r\n  const [searchOpen, setSearchOpen] = useState(false);\r\n  const [miniCartIsOpen, setMiniCartIsOpen] = useState(false);\r\n\r\n  useEffect(() => {\r\n    const onSearchOpenChange = (isOpen: boolean) => {\r\n      setSearchOpen(isOpen);\r\n    };\r\n\r\n    EventDispatcher.subscribe(ON_MOBILE_SEARCH_OPEN_CHANGE, onSearchOpenChange);\r\n\r\n    const onMiniCartOpenChange = (miniCartIsOpen: boolean) => {\r\n      setMiniCartIsOpen(miniCartIsOpen);\r\n    };\r\n\r\n    EventDispatcher.subscribe(ON_MINICART_OPEN_CHANGE, onMiniCartOpenChange);\r\n\r\n    return () => {\r\n      EventDispatcher.unsubscribe(\r\n        ON_MOBILE_SEARCH_OPEN_CHANGE,\r\n        onSearchOpenChange\r\n      );\r\n      EventDispatcher.unsubscribe(\r\n        ON_MINICART_OPEN_CHANGE,\r\n        onMiniCartOpenChange\r\n      );\r\n    };\r\n  }, []);\r\n\r\n  useEffect(() => {\r\n    const boundOnMenuOpenChange = onMenuOpenChange.bind(null, setIsMenuActive);\r\n    EventDispatcher.subscribe(\r\n      ON_MOBILE_MENU_OPEN_CHANGE,\r\n      boundOnMenuOpenChange\r\n    );\r\n\r\n    return () =>\r\n      EventDispatcher.unsubscribe(\r\n        ON_MOBILE_MENU_OPEN_CHANGE,\r\n        boundOnMenuOpenChange\r\n      );\r\n  }, [isMenuActive]);\r\n\r\n  const iconLinkOnClink = () => {\r\n    //useOutsideClick sometimes glitches when clicking icon links, therefore this is needed\r\n    isMenuActive &&\r\n      EventDispatcher.dispatch(ON_MOBILE_MENU_OPEN_CHANGE, !isMenuActive);\r\n    searchOpen &&\r\n      EventDispatcher.dispatch(ON_MOBILE_SEARCH_OPEN_CHANGE, !searchOpen);\r\n  };\r\n\r\n  return (\r\n    <>\r\n      <Placeholder />\r\n      <Header id=\"header\">\r\n        <MobileHeaderContainer>\r\n          <MobileHeaderTopSection onClick={iconLinkOnClink}>\r\n            {authenticated && (\r\n              <HeaderIconLink\r\n                linkType={LinkType.MyPages}\r\n                label={myPagesLabel}\r\n                href={myPage}\r\n              />\r\n            )}\r\n            <HeaderIconLink\r\n              linkType={LinkType.Contact}\r\n              label={contactLabel}\r\n              href={contactUs}\r\n            />\r\n            {authenticated && (\r\n              <HeaderIconLink\r\n                linkType={LinkType.MiniCart}\r\n                label={cartLabel}\r\n                miniCartIsOpen={miniCartIsOpen}\r\n              />\r\n            )}\r\n            <HeaderIconLink\r\n              linkType={!authenticated ? LinkType.SignIn : LinkType.SignOut}\r\n              label={!authenticated ? signInLabel : signOutLabel}\r\n              href={!authenticated ? loginPage : ''}\r\n            />\r\n          </MobileHeaderTopSection>\r\n          <MobileHeaderBottomSection data-menuisopen={isMenuActive}>\r\n            <ImageWrapper data-menuisopen={isMenuActive}>\r\n              <KexLink href={`/${languageRoute}/`}>\r\n                <Logo src={logoUrl} alt={'logo'} />\r\n              </KexLink>\r\n            </ImageWrapper>\r\n            <BottomSectionButtonsWrapper>\r\n              {!isMenuActive && <SearchButton searchIsOpen={searchOpen} />}\r\n              <MenuButton isOpen={isMenuActive} />\r\n            </BottomSectionButtonsWrapper>\r\n          </MobileHeaderBottomSection>\r\n          <MobileQuickSearch\r\n            isOpen={searchOpen}\r\n            setSearchOpen={setSearchOpen}\r\n          />\r\n        </MobileHeaderContainer>\r\n      </Header>\r\n    </>\r\n  );\r\n}\r\n\r\nexport default MobileHeader;\r\n\r\nconst Placeholder = styled.div({\r\n  width: '100%',\r\n  padding: { top: theme.mobileHeaderHeight },\r\n});\r\n\r\nconst Header = styled.div({\r\n  position: 'fixed',\r\n  top: 0,\r\n  left: 0,\r\n  right: 0,\r\n  zIndex: theme.zIndex.Header,\r\n  backgroundColor: theme.darkGray,\r\n});\r\n\r\nconst MobileHeaderContainer = styled.header({\r\n  width: '100%',\r\n  zIndex: theme.zIndex.HeaderMobile,\r\n});\r\n\r\nconst MobileHeaderTopSection = styled.div({\r\n  display: 'flex',\r\n  backgroundColor: theme.darkGray,\r\n  zIndex: theme.zIndex.HeaderMobile,\r\n  height: theme.mobileHeaderTopSectionHeight,\r\n  padding: { x: '15px', y: theme.medium },\r\n});\r\n\r\nconst MobileHeaderBottomSection = styled.div({\r\n  display: 'flex',\r\n  justifyContent: 'space-between',\r\n  height: theme.mobileHeaderBottomSectionHeight,\r\n  backgroundColor: theme.lighterDarkGray,\r\n  padding: { x: '15px', y: '12px' },\r\n  alignItems: 'center',\r\n  transition: {\r\n    property: 'all',\r\n    duration: theme.timings.threeTenths,\r\n    timingFunction: 'ease',\r\n  },\r\n  ...pseudo([':nth-child(n)[data-menuisopen=\"true\"]'], {\r\n    backgroundColor: theme.white,\r\n    justifyContent: 'flex-end',\r\n  }),\r\n});\r\n\r\nconst ImageWrapper = styled.div({\r\n  transition: {\r\n    property: 'all',\r\n    duration: theme.timings.threeTenths,\r\n    timingFunction: 'ease',\r\n  },\r\n  ...pseudo([':nth-child(n)[data-menuisopen=\"true\"]'], {\r\n    display: 'none',\r\n  }),\r\n});\r\n\r\nconst BottomSectionButtonsWrapper = styled.div({\r\n  display: 'flex',\r\n  alignItems: 'center',\r\n});\r\n\r\nconst Logo = styled.img({\r\n  height: '48px',\r\n});\r\n"],"sourceRoot":""}