{"version":3,"file":"components-ui-builder-header-8eadaa028c6483e1592b.js","mappings":"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","sources":["webpack://www-differentdog-com/./src/components/ui-builder/header/index.tsx"],"sourcesContent":["import { Builder } from '@builder.io/react'\nimport { faBars, faX } from '@fortawesome/free-solid-svg-icons'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { Disclosure, Menu, Transition } from '@headlessui/react'\nimport { BellIcon, MenuIcon, XIcon } from '@heroicons/react/outline'\nimport { Amplify, Auth } from 'aws-amplify'\nimport { getCognitoId, getVisitorId, removeCognitoId } from 'components/util/UserId'\nimport { StaticImage } from 'gatsby-plugin-image'\nimport React, { useContext, useEffect, useState, Fragment } from 'react'\nimport { useDispatch } from 'react-redux'\nimport { updateSpoofMode } from 'state/actions/uiAction'\n//@ts-ignore\nimport awsconfig from '../../../aws-exports'\nimport LinkRoute from '../../ui/link/Link'\nimport NavbarMenu from '../../ui/navbar/NavbarMenu'\nimport LinkButton, { LinkButtonProp, LinkButtonRegisterProps } from '../common/button'\nAmplify.configure(awsconfig)\n\nimport './index.css'\nimport { Helmet } from 'react-helmet'\ninterface Navigation {\n  navName: string\n  link: string\n}\n\ninterface Props {\n  backgroundColor: string\n  fontColor: string\n  buttonOneProp: LinkButtonProp\n  buttonTwoProp: LinkButtonProp\n  logo: any\n  navigation: Navigation[]\n}\n\nconst Header = ({ navigation, logo, buttonOneProp, buttonTwoProp, fontColor, backgroundColor }: Props) => {\n  console.log('Header::Navigations', navigation)\n  console.log('Header::ButtonProps', buttonOneProp, buttonTwoProp)\n  const [isSignedIn, setIsSignedIn] = useState(false)\n  const [showNavBar, setShowNavBar] = useState(true)\n  const [_visitorId, setVisitorId] = useState('')\n  const [_cognitoId, setCognitoId] = useState('')\n  const dispatch = useDispatch()\n  const dogDetailsPage = 'dog-details'\n  if (buttonOneProp?.buttonUrl) buttonOneProp.buttonUrl = `/signup/${dogDetailsPage}`\n\n  useEffect(() => {\n    let lastScroll: number\n\n    const controlNavbar = () => {\n      if (window.scrollY > 0 && window.scrollY >= lastScroll) {\n        setShowNavBar(false)\n      } else {\n        setShowNavBar(true)\n      }\n      lastScroll = window.scrollY\n    }\n\n    window.addEventListener('scroll', controlNavbar)\n    return () => {\n      window.removeEventListener('scroll', controlNavbar)\n    }\n  }, [])\n\n  useEffect(() => {\n    const checkIfSignedIn = async () => {\n      const username = await getCognitoId()\n      if (username) {\n        setIsSignedIn(true)\n      } else {\n        setIsSignedIn(false)\n      }\n    }\n\n    document.querySelector('body')?.addEventListener('mouseover', checkIfSignedIn)\n\n    return () => {\n      document.querySelector('body')?.removeEventListener('mouseover', checkIfSignedIn)\n    }\n  }, [])\n\n  useEffect(() => {\n    if (isSignedIn) {\n      const referFriendContainer = document.getElementsByClassName(\n        'yotpo-widget-referred-friend-container'\n      )[0] as HTMLElement\n      if (referFriendContainer) {\n        const popupCloseBtn = document.getElementsByClassName('yotpo-close-button')[0] as HTMLElement\n        if (popupCloseBtn) {\n          popupCloseBtn.click()\n        }\n      }\n    }\n  }, [isSignedIn])\n\n  useEffect(() => {\n    if (isSignedIn) {\n      if (!navigation.some(nav => nav.navName === 'Rewards')) {\n        navigation.push({ navName: 'Rewards', link: '/account/rewards' })\n      }\n    }\n  }, [navigation, isSignedIn])\n\n  const handleSignOut = async () => {\n    try {\n      dispatch(updateSpoofMode(false, '', ''))\n      await Auth.signOut()\n      setIsSignedIn(false)\n      removeCognitoId()\n    } catch (err: any) {\n      console.log(err, 'error')\n    }\n  }\n\n  const renderDesktopHeaderNavs = (side: string) => {\n    const midPoint = Math.ceil(navigation.length / 2)\n    const slicedNavs = side === 'left' ? navigation.slice(0, midPoint) : navigation.slice(midPoint, navigation.length)\n    console.log(`side ${side}, mid point - ${midPoint}`, slicedNavs)\n\n    return slicedNavs.map((navItem, i) => {\n      return (\n        <LinkRoute\n          key={`${side}-${i}`}\n          href={navItem.link}\n          className=\"hover-bg-color:hover mx-2 text-sm\"\n          style={{ color: fontColor }}\n        >\n          {navItem.navName}\n        </LinkRoute>\n      )\n    })\n  }\n\n  const leftSideNavs = renderDesktopHeaderNavs('left')\n  const rightSideNavs = renderDesktopHeaderNavs('right')\n  // let maxNavNumberPerSide = (leftSideNavs.length > rightSideNavs.length) ? leftSideNavs.length: rightSideNavs.length;\n  // maxNavNumberPerSide = maxNavNumberPerSide === 1 ? 2: maxNavNumberPerSide;\n\n  useEffect(() => {\n    window.onbeforeunload = () => {\n      window.scrollTo(0, 0)\n    }\n  }, [])\n\n  useEffect(() => {\n    const callIdsForClarity = async () => {\n      setVisitorId(await getVisitorId())\n      setCognitoId(await getCognitoId())\n    }\n\n    callIdsForClarity()\n  }, [])\n\n  return (\n    <>\n      <Disclosure as=\"nav\" className=\"header-relative min-h-[64px] md:hidden\">\n        {/* header-fixed */}\n        {({ open }) => (\n          <div\n            className=\"relative\"\n            style={{\n              transition: 'top 0.5s',\n              top: open || showNavBar ? '0px' : '-144px',\n              height: open || showNavBar ? 'auto' : '0px',\n              transform: 'translateZ(0.1)'\n            }}\n          >\n            <Helmet\n              bodyAttributes={{\n                class: 'content-page'\n              }}\n            >\n              {/* {process.env.GATSBY_CLARITY_KEY && (\n                <script type=\"text/javascript\">{`\n                (function(c,l,a,r,i,t,y){\n                    c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};\n                    t=l.createElement(r);t.async=1;t.src=\"https://www.clarity.ms/tag/\"+i;\n                    y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);\n                })(window, document, \"clarity\", \"script\", \"${process.env.GATSBY_CLARITY_KEY}\");\n                ${(cognitoId || visitorId) && `window.clarity(\"identify\", \"${cognitoId}\", \"${visitorId}\");`}\n              `}</script>\n              )} */}\n            </Helmet>\n            <div\n              className=\"sticky mx-auto px-2 md:px-6 lg:px-8\"\n              style={{ backgroundColor: backgroundColor, color: fontColor }}\n            >\n              <div className=\"relative flex h-16 items-center justify-between\">\n                <div className=\"inset-y-0 left-0 mr-2 flex items-center md:hidden\">\n                  {/* Mobile menu button*/}\n                  <Disclosure.Button className=\"hover-bg-color inline-flex items-center justify-center rounded-md p-4 text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white\">\n                    <span className=\"sr-only\">Open main menu</span>\n                    <FontAwesomeIcon\n                      icon={open ? faX : faBars}\n                      style={{ color: fontColor }}\n                      className=\"block h-6 w-6\"\n                      aria-hidden=\"true\"\n                    />\n                  </Disclosure.Button>\n                </div>\n                <div className=\"flex flex-1 items-center justify-start sm:items-stretch sm:justify-start\">\n                  <div className=\"flex-shrink-1 flex items-center\">\n                    <LinkRoute href=\"/\">\n                      <StaticImage\n                        style={{ width: '100%', maxWidth: '200px' }}\n                        src=\"../../../images/logo_horizontal.svg\"\n                        alt=\"Different Dog\"\n                        placeholder=\"blurred\"\n                      />\n                    </LinkRoute>\n                  </div>\n                </div>\n                {!isSignedIn && (\n                  <>\n                    <LinkRoute\n                      date-testid=\"signup\"\n                      href={`/signup/${dogDetailsPage}`}\n                      className={`position-create-plan-btn ml-2 inline-block rounded-full border border-transparent bg-white py-2 px-2 font-medium text-indigo-600 shadow hover:bg-indigo-50 md:hidden`}\n                      style={{ backgroundColor: 'rgb(0, 102, 133)', color: 'rgb(255, 255, 255)' }}\n                      onClick={() => {\n                        if (typeof window.gtag !== 'undefined') {\n                          window.gtag('event', 'cta_button_click', {\n                            page: 'homepage'\n                          })\n                        }\n                      }}\n                    >\n                      Get Started\n                    </LinkRoute>\n                    <LinkRoute\n                      date-testid=\"signup\"\n                      href={`/signup/${dogDetailsPage}`}\n                      className={`position-create-plan-btn ml-2  rounded-full border border-transparent bg-white py-2 px-2 font-medium text-indigo-600 shadow hover:bg-indigo-50 hidden md:inline-block`}\n                      style={{ backgroundColor: 'rgb(0, 102, 133)', color: 'rgb(255, 255, 255)' }}\n                      onClick={() => {\n                        if (typeof window.gtag !== 'undefined') {\n                          window.gtag('event', 'cta_button_click', {\n                            page: 'homepage'\n                          })\n                        }\n                      }}\n                    >\n                      Create Plan\n                    </LinkRoute>\n                  </>\n                )}\n              </div>\n            </div>\n\n            <Disclosure.Panel className=\"md:hidden\">\n              <div className=\"space-y-1 px-2 pt-2 pb-3\" style={{ backgroundColor }}>\n                {navigation.map(item => (\n                  <Disclosure.Button\n                    key={item.navName}\n                    as=\"a\"\n                    href={item.link}\n                    className=\"hover-bg-color block rounded-md px-3 py-2 text-base font-medium text-gray-300 no-underline\"\n                    style={{ color: fontColor }}\n                  >\n                    {item.navName}\n                  </Disclosure.Button>\n                ))}\n                <div className=\"header-spacer\" />\n                {isSignedIn ? (\n                  <div className=\"flex w-full items-center justify-end\">\n                    <LinkRoute\n                      href={'/account'}\n                      className={`mr-2 inline-block rounded-full border border-transparent bg-white py-2 px-2 text-sm font-medium text-indigo-600 shadow hover:bg-indigo-50`}\n                      style={{ backgroundColor: 'rgb(0, 67, 85)', color: 'rgb(255, 255, 255)' }}\n                    >\n                      Account\n                    </LinkRoute>\n                    <button\n                      type=\"button\"\n                      className=\"inline-block rounded-full border border-transparent bg-white py-2 px-2 text-sm font-medium text-indigo-600 shadow hover:bg-indigo-50\"\n                      style={{ backgroundColor: 'rgb(241,140,131)', color: 'rgb(0, 67, 85)' }}\n                      onClick={handleSignOut}\n                    >\n                      Sign out\n                    </button>\n                  </div>\n                ) : (\n                  <div className=\"flex w-full items-center justify-end\">\n                    <LinkButton\n                      buttonColor={buttonOneProp?.buttonColor}\n                      buttonUrl={buttonOneProp?.buttonUrl}\n                      buttonText={buttonOneProp?.buttonText}\n                      buttonTextColor={buttonOneProp?.buttonTextColor}\n                      loggedInButtonText={buttonOneProp?.loggedInButtonText}\n                      isLink={false}\n                      classList={`inline-block text-center bg-white py-2 px-2 mr-2 border border-transparent rounded-full font-medium text-indigo-600 hover:bg-indigo-50 shadow`}\n                      onClick={() => {\n                        if (typeof window.gtag !== 'undefined') {\n                          window.gtag('event', 'cta_button_click', {\n                            page: 'homepage'\n                          })\n                        }\n                      }}\n                    />\n                    <LinkButton\n                      buttonColor={buttonTwoProp?.buttonColor}\n                      buttonUrl={buttonTwoProp?.buttonUrl}\n                      buttonText={buttonTwoProp?.buttonText}\n                      buttonTextColor={buttonTwoProp?.buttonTextColor}\n                      loggedInButtonText={buttonTwoProp?.loggedInButtonText}\n                      isLink={false}\n                      classList={`inline-block text-center bg-white py-2 px-2 border border-transparent rounded-full font-medium text-indigo-600 hover:bg-indigo-50 shadow`}\n                    />\n                  </div>\n                )}\n              </div>\n            </Disclosure.Panel>\n          </div>\n        )}\n      </Disclosure>\n      <header\n        className=\"header-relative sticky mt-0 hidden md:block\"\n        style={{\n          backgroundColor: backgroundColor,\n          color: fontColor,\n          transition: 'top 0.5s',\n          top: showNavBar ? '0px' : '-164px',\n          height: showNavBar ? 'auto' : '0px',\n          transform: 'translateZ(0.1)'\n        }}\n      >\n        <nav className=\"max-w-7 mx-auto\" aria-label=\"Top\">\n          <div className=\"flex w-full items-center py-5 px-6\">\n            <div>\n              <LinkRoute href=\"/\">\n                <span className=\"sr-only\">Different Dog</span>\n                <StaticImage\n                  style={{ width: '100%', maxWidth: '200px' }}\n                  src=\"../../../images/logo_horizontal.svg\"\n                  alt=\"Different Dog\"\n                />\n              </LinkRoute>\n            </div>\n            {isSignedIn ? (\n              <div className=\"flex w-full items-center justify-center\">\n                <div className=\"flex items-center justify-center mr-28\">\n                  <div className=\"flex items-center font-serif text-sm\">{leftSideNavs}</div>\n                  <div className=\"flex items-center font-serif text-sm\">{rightSideNavs}</div>\n                </div>\n\n                <div className=\"absolute right-0 flex items-center\">\n                  <div\n                    className=\"ml-2 mr-2 hidden flex-shrink-0 cursor-pointer rounded-full p-4 text-sm hover:bg-[white] focus:bg-[white] sm:flex\"\n                    onClick={() => {\n                      if (typeof window.zE !== 'undefined') {\n                        window.zE('webWidget', 'show')\n                        window.zE('webWidget', 'open')\n                      } else {\n                        window.setTimeout(() => {\n                          window.zE('webWidget', 'show')\n                          window.zE('webWidget', 'open')\n                        }, 1000)\n                      }\n                    }}\n                  >\n                    <StaticImage\n                      width={35}\n                      className=\"flex flex-shrink-0\"\n                      src=\"../../../images/chat.png\"\n                      alt=\"Chat with us\"\n                    />\n                  </div>\n                  <NavbarMenu isLogin={isSignedIn} handleSignOut={handleSignOut} />\n                </div>\n              </div>\n            ) : (\n              <div className=\"flex w-full items-center justify-end\">\n                <div className=\"flex w-2/3 justify-end\">\n                  <div className={`flex items-center justify-end font-serif text-sm`}>{leftSideNavs}</div>\n                  <div className={`flex items-center justify-start font-serif text-sm`}>{rightSideNavs}</div>\n                </div>\n                <div\n                  className={`ml-2 mr-2 hidden flex-shrink-0 cursor-pointer rounded-full p-4 text-sm hover:bg-[white] focus:bg-[white] sm:flex`}\n                  onClick={() => {\n                    if (typeof window.zE !== 'undefined') {\n                      window.zE('webWidget', 'show')\n                      window.zE('webWidget', 'open')\n                    } else {\n                      window.setTimeout(() => {\n                        window.zE('webWidget', 'show')\n                        window.zE('webWidget', 'open')\n                      }, 1000)\n                    }\n                  }}\n                >\n                  <StaticImage\n                    width={35}\n                    className=\"flex flex-shrink-0\"\n                    src=\"../../../images/chat.png\"\n                    alt=\"Different Dog Logo\"\n                  />\n                </div>\n                <div className=\"flex flex-shrink-0\">\n                  <LinkButton\n                    buttonColor={buttonOneProp?.buttonColor}\n                    buttonUrl={buttonOneProp?.buttonUrl}\n                    buttonText={buttonOneProp?.buttonText}\n                    buttonTextColor={buttonOneProp?.buttonTextColor}\n                    loggedInButtonText={buttonOneProp?.loggedInButtonText}\n                    isLink={false}\n                    classList={`inline-block text-center mr-4 bg-white py-2 px-2 border border-transparent rounded-full font-medium text-indigo-600 hover:bg-indigo-50 shadow`}\n                    onClick={() => {\n                      if (typeof window.gtag !== 'undefined') {\n                        window.gtag('event', 'cta_button_click', {\n                          page: 'homepage'\n                        })\n                      }\n                    }}\n                  />\n                  <LinkButton\n                    buttonColor={'transparent'}\n                    buttonUrl={buttonTwoProp?.buttonUrl}\n                    buttonText={buttonTwoProp?.buttonText}\n                    buttonTextColor={buttonTwoProp?.buttonTextColor}\n                    loggedInButtonText={buttonTwoProp?.loggedInButtonText}\n                    isLink={false}\n                    classList={`inline-block text-center bg-white py-2 px-2 border-2 border-base rounded-full font-medium text-indigo-600 hover:bg-indigo-50 shadow`}\n                  />\n                </div>\n              </div>\n            )}\n          </div>\n        </nav>\n      </header>\n    </>\n  )\n}\n\nexport default Header\n"],"names":["Amplify","configure","awsconfig","_ref","navigation","buttonOneProp","logo","buttonTwoProp","fontColor","backgroundColor","_useState","useState","isSignedIn","setIsSignedIn","_useState2","showNavBar","setShowNavBar","_useState3","setVisitorId","_useState4","setCognitoId","dispatch","useDispatch","dogDetailsPage","buttonUrl","useEffect","lastScroll","controlNavbar","window","scrollY","addEventListener","removeEventListener","_document$querySelect","checkIfSignedIn","_ref2","_asyncToGenerator","_regeneratorRuntime","_callee","username","_context","prev","next","getCognitoId","sent","stop","apply","arguments","document","querySelector","_document$querySelect2","getElementsByClassName","popupCloseBtn","click","some","nav","navName","push","link","handleSignOut","_ref3","_callee2","_context2","updateSpoofMode","Auth","signOut","removeCognitoId","t0","renderDesktopHeaderNavs","side","midPoint","Math","ceil","length","slice","map","navItem","i","React","LinkRoute","key","href","className","style","color","leftSideNavs","rightSideNavs","onbeforeunload","scrollTo","callIdsForClarity","_ref4","_callee3","_context3","getVisitorId","t1","t2","t3","Disclosure","as","_ref5","open","transition","top","height","transform","Helmet","bodyAttributes","class","Button","FontAwesomeIcon","icon","faX","faBars","StaticImage","width","maxWidth","src","alt","placeholder","__imageData","require","onClick","gtag","page","Panel","item","type","LinkButton","buttonColor","buttonText","buttonTextColor","loggedInButtonText","isLink","classList","zE","setTimeout","NavbarMenu","isLogin"],"sourceRoot":""}