{"version":3,"file":"components-ui-builder-banner-6d410f739ed1b476f3d8.js","mappings":"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","sources":["webpack://www-differentdog-com/./src/components/ui-builder/banner/index.tsx"],"sourcesContent":["import { Builder } from '@builder.io/react'\nimport { faX } from '@fortawesome/free-solid-svg-icons'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { useFeatureValue } from '@growthbook/growthbook-react'\nimport { triggerTagging } from 'components/util/common-utils'\nimport React, { useEffect, useState } from 'react'\nimport LinkRoute from '../../ui/link/Link'\nimport LinkButton, { LinkButtonProp, LinkButtonRegisterProps } from '../common/button'\n\nenum Position {\n  Bottom = 'bottom',\n  Top = 'top'\n}\ninterface Props {\n  bannerTopic: string\n  bannerTopicLong: string\n  backgroundColor: string\n  fontColor: string\n  icon: string\n  stickyBottom: boolean\n  bannerPosition: Position\n  buttonProps: LinkButtonProp\n  centered: boolean\n}\n\nconst StickyWrapper = ({ children, position }: { children: any; position: Position }) => {\n  const bannerPositionClass = position === Position.Top ? 'top-0' : 'bottom-0'\n\n  return <div className={`fixed inset-x-0 ${bannerPositionClass}`}>{children}</div>\n}\n\nconst InnerContent = ({ buttonProps, centered, bannerTopic, bannerTopicLong, fontColor }: any) => {\n  const [turboRouteComponent, setTurboRouteComponent] = useState<HTMLElement | null>(null)\n\n  useEffect(() => {\n    if (typeof window !== 'undefined') {\n      const turboRoute = document.querySelector('#turboRoute')\n      if (turboRoute) {\n        setTurboRouteComponent(turboRoute as HTMLElement)\n      }\n    }\n  }, [])\n\n  if (centered) {\n    return (\n      <>\n        <div className=\"flex items-center justify-center sm:px-16\">\n          <p className=\"text-sm font-medium sm:text-base md:mr-5 md:mb-0 \" style={{ color: fontColor }}>\n            <span className=\"md:hidden\">\n              <LinkRoute href={buttonProps.buttonUrl} className=\"text-white\">\n                {bannerTopic}\n              </LinkRoute>\n            </span>\n            <span className=\"hidden md:inline\">{bannerTopicLong}</span>\n          </p>\n          <div className=\"hidden pl-4 sm:block\">\n            <>\n              {turboRouteComponent ? (\n                <button\n                  className={`inline-block text-center bg-[#006685] text-white py-2 px-2 border border-transparent rounded-full font-medium`}\n                  style={{ backgroundColor: buttonProps.buttonColor, color: buttonProps.buttonTextColor }}\n                  onClick={() => {\n                    triggerTagging('banner_cta_create_plan_turbo_route', 'turbo_route')\n                    turboRouteComponent.scrollIntoView({ behavior: 'smooth', block: 'start' })\n                  }}\n                >\n                  {buttonProps?.buttonText}\n                </button>\n              ) : (\n                <>\n                  <LinkButton\n                    buttonColor={buttonProps.buttonColor}\n                    buttonText={buttonProps.buttonText}\n                    loggedInButtonText={buttonProps.loggedInButtonText}\n                    buttonTextColor={buttonProps.buttonTextColor}\n                    buttonUrl={buttonProps.buttonUrl}\n                    isLink={buttonProps.isLink}\n                    onClick={() => {\n                      if (typeof window.gtag !== 'undefined') {\n                        window.gtag('event', 'cta_button_click', {\n                          page: 'homepage'\n                        })\n                      }\n                    }}\n                  />\n                </>\n              )}\n            </>\n          </div>\n        </div>\n        {/* <div className=\"absolute inset-y-0 right-0 flex items-center pr-1 sm:items-center sm:pr-2\">\n          <button type=\"button\" className=\"flex rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-white\">\n            <span className=\"sr-only\">Dismiss</span>\n            <FontAwesomeIcon icon={faX} className=\"h-6 w-6 text-white\" aria-hidden=\"true\" />\n          </button>\n        </div> */}\n      </>\n    )\n  }\n\n  return (\n    <div className=\"flex flex-wrap items-center justify-between\">\n      <div className=\"flex w-0 flex-1 items-center justify-center sm:justify-start\">\n        <p\n          className=\"ml-3 truncate text-center text-sm font-medium sm:text-left sm:text-base\"\n          style={{ color: fontColor }}\n        >\n          <span className=\"md:hidden\">\n            <LinkRoute href={buttonProps.buttonUrl} className=\"text-white\">\n              {bannerTopic}\n            </LinkRoute>\n          </span>\n          <span className=\"hidden md:inline\">{bannerTopicLong}</span>\n        </p>\n      </div>\n      <div className=\"order-3 mt-2 hidden w-full flex-shrink-0 sm:order-2 sm:mt-0 sm:block sm:w-auto\">\n        <LinkButton\n          buttonColor={buttonProps.buttonColor}\n          buttonText={buttonProps.buttonText}\n          loggedInButtonText={buttonProps.loggedInButtonText}\n          buttonTextColor={buttonProps.buttonTextColor}\n          buttonUrl={buttonProps.buttonUrl}\n          isLink={buttonProps.isLink}\n          onClick={() => {\n            if (typeof window.gtag !== 'undefined') {\n              window.gtag('event', 'cta_button_click', {\n                page: 'homepage'\n              })\n            }\n          }}\n        />\n      </div>\n      <div className=\"order-2 flex-shrink-0 sm:order-3 sm:ml-3\">\n        {/* <button\n          type=\"button\"\n          className=\"-mr-1 flex p-2 rounded-md focus:outline-none focus:ring-2 focus:ring-white sm:-mr-2\"\n        >\n          <span className=\"sr-only\">Dismiss</span>\n          <XIcon className=\"h-6 w-6 \" aria-hidden=\"true\" />\n        </button> */}\n      </div>\n    </div>\n  )\n}\n\nconst Content = ({ bannerTopic, bannerTopicLong, buttonProps, centered, backgroundColor, fontColor }: any) => {\n  return (\n    <div\n      className=\"relative bg-indigo-600\"\n      style={{ backgroundColor: backgroundColor, color: fontColor, zIndex: '999' }}\n    >\n      <div className=\"mx-auto max-w-7xl py-3 px-3 sm:px-6 lg:px-8\">\n        <InnerContent\n          bannerTopic={bannerTopic}\n          bannerTopicLong={bannerTopicLong}\n          buttonProps={buttonProps}\n          centered={centered}\n          fontColor={fontColor}\n        />\n      </div>\n    </div>\n  )\n}\n\nconst Banner = ({\n  bannerTopic,\n  bannerTopicLong,\n  stickyBottom,\n  buttonProps,\n  centered,\n  backgroundColor,\n  fontColor,\n  bannerPosition\n}: Props) => {\n  const handleBtnText = () => {\n    if (window.innerWidth < 400) {\n      if (buttonProps?.buttonText) buttonProps.buttonText = 'Get Started'\n    } else {\n      if (buttonProps?.buttonText) buttonProps.buttonText = 'Create Plan'\n    }\n  }\n\n  useEffect(() => {\n    handleBtnText()\n    window.addEventListener('resize', handleBtnText)\n\n    return () => {\n      window.removeEventListener('resize', handleBtnText)\n    }\n  }, [])\n\n  if (stickyBottom) {\n    return (\n      <StickyWrapper position={bannerPosition}>\n        <Content\n          bannerTopic={bannerTopic}\n          bannerTopicLong={bannerTopicLong}\n          buttonProps={buttonProps}\n          centered={centered}\n          backgroundColor={backgroundColor}\n          fontColor={fontColor}\n        />\n      </StickyWrapper>\n    )\n  }\n\n  return (\n    <Content\n      bannerTopic={bannerTopic}\n      bannerTopicLong={bannerTopicLong}\n      buttonProps={buttonProps}\n      centered={centered}\n      backgroundColor={backgroundColor}\n      fontColor={fontColor}\n    />\n  )\n}\n\nexport default Banner\n"],"names":["Position","StickyWrapper","_ref","children","bannerPositionClass","position","Top","React","className","InnerContent","_ref2","buttonProps","centered","bannerTopic","bannerTopicLong","fontColor","_useState","useState","turboRouteComponent","setTurboRouteComponent","useEffect","window","turboRoute","document","querySelector","style","color","LinkRoute","href","buttonUrl","backgroundColor","buttonColor","buttonTextColor","onClick","triggerTagging","scrollIntoView","behavior","block","buttonText","LinkButton","loggedInButtonText","isLink","gtag","page","Content","_ref3","zIndex","_ref4","stickyBottom","bannerPosition","handleBtnText","innerWidth","addEventListener","removeEventListener"],"sourceRoot":""}