{"version":3,"file":"components-ui-builder-dog-name-pre-footer-217376065aed6c834097.js","mappings":"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","sources":["webpack://www-differentdog-com/./src/components/ui-builder/dog-name-pre-footer/index.tsx"],"sourcesContent":["import CdnImage from 'components/util/CdnImage'\nimport { getCognitoId } from 'components/util/UserId'\nimport { Field, Formik, useFormikContext } from 'formik'\nimport FormikErrorFocus from 'formik-error-focus'\nimport { navigate } from 'gatsby'\nimport { StaticImage } from 'gatsby-plugin-image'\nimport React, { useEffect, useState } from 'react'\nimport Clock from '../../../images/Clock.svg'\nimport LinkButton, { LinkButtonProp } from '../common/button'\n\ninterface Props {\n  backgroundColor: string\n  buttonEnabled: boolean\n  buttonProp: LinkButtonProp\n  mediaBackdropColor: string\n  formBackgroundColor: string\n  preFooterTextHeadlineOne: string\n  preFooterTextHeadlineTwo: string\n  preFooterTextOne: string\n  desktopImage: string\n  builderDesktopImage: any\n  preFooterDesktopImgAltText: string\n  mobileImage: string\n  builderMobileImage: any\n  preFooterMobileTextImgAltText: string\n  widgetBackgroundColor: string\n  widgetType: WidgetType\n  widgetTags: string\n  showRating: boolean\n  ratingTextBold: string\n  ratingTextNormalOne: string\n  ratingTextNormalTwo: string\n  builderRatingIcon: any\n  coupon: string\n}\n\nconst DogNamePreFooter = ({\n  backgroundColor,\n  buttonEnabled,\n  buttonProp,\n  mediaBackdropColor,\n  formBackgroundColor,\n  preFooterTextHeadlineOne = '',\n  preFooterTextHeadlineTwo = '',\n  preFooterTextOne = '',\n  desktopImage,\n  builderDesktopImage,\n  preFooterDesktopImgAltText = '',\n  mobileImage,\n  builderMobileImage,\n  preFooterMobileTextImgAltText = '',\n  widgetBackgroundColor,\n  widgetType,\n  widgetTags,\n  showRating,\n  ratingTextBold = '',\n  ratingTextNormalOne = '',\n  ratingTextNormalTwo = '',\n  builderRatingIcon,\n  coupon = ''\n}: Props) => {\n  const formikRef = React.useRef<any>()\n\n  const [isLoggedIn, setIsLoggedIn] = useState(false)\n  const dogDetailsPage = 'dog-details'\n\n  useEffect(() => {\n    const authenticateUser = async () => {\n      try {\n        const { username } = await getCognitoId()\n\n        if (username) {\n          setIsLoggedIn(true)\n        }\n      } catch (e) {\n        console.log(e)\n      }\n    }\n\n    authenticateUser()\n  }, [isLoggedIn])\n\n  useEffect(() => {\n    const trustWidget = document.getElementById('trust-pilot-micro-combo')\n    window.Trustpilot?.loadFromElement(trustWidget)\n  }, [widgetType])\n\n  const triggerTagging = (eventName: string) => {\n    if (typeof window.gtag !== 'undefined') {\n      window.gtag('event', eventName, {\n        page: 'home_page'\n      })\n    }\n  }\n\n  const renderDesktopImage = () => {\n    if (desktopImage?.public_id) {\n      return (\n        <CdnImage\n          className=\"index-2 height-specifier relative w-full h-full rounded-3xl object-cover\"\n          url={builderDesktopImage}\n          alt={preFooterDesktopImgAltText}\n          steps={[1000]}\n        />\n      )\n    }\n  }\n\n  const renderMobileImage = () => {\n    if (mobileImage?.public_id) {\n      return (\n        <CdnImage\n          className=\"index-2 relative h-full w-full object-cover\"\n          url={builderMobileImage}\n          alt={preFooterMobileTextImgAltText}\n          steps={[600]}\n        />\n      )\n    }\n  }\n\n  const renderRatingIcon = () => {\n    return (\n      <CdnImage\n        className=\"index-2 relative inline-block h-3 w-3\"\n        url={builderRatingIcon}\n        alt={'Dog bowl'}\n        steps={[700]}\n      />\n    )\n  }\n\n  const getWidget = () => {\n    return (\n      <div>\n        {/* <!-- TrustBox widget - Micro Combo --> */}\n        <div\n          className=\"trustpilot-widget px-8 py-4\"\n          data-locale=\"en-GB\"\n          data-template-id=\"5419b6ffb0d04a076446a9af\"\n          data-businessunit-id=\"5af423d4a3303b0001bf47c1\"\n          data-style-height=\"20px\"\n          data-style-width=\"100%\"\n          data-theme=\"light\"\n          data-stars=\"5\"\n          data-font-family=\"Montserrat\"\n          data-text-color=\"#004355\"\n          data-tags={widgetTags ? widgetTags : ''}\n          id=\"trust-pilot-micro-combo\"\n        >\n          <a href=\"https://uk.trustpilot.com/review/differentdog.com\" target=\"_blank\" rel=\"noreferrer noopener\">\n            <StaticImage objectFit=\"contain\" className=\"w-full\" src=\"../../../images/trustpilot.png\" alt=\"Trustpilot\" />\n          </a>\n        </div>\n        {/* <!-- End TrustBox widget --> */}\n      </div>\n    )\n  }\n\n  const _renderCTAButton = () => {\n    if (!buttonEnabled) {\n      return (\n        <button\n          className={`mx-auto flex w-10/12 items-center justify-center rounded-full border border-transparent bg-[#006685] px-5 py-3 text-base font-medium text-[#FFFFFF] md:mt-8 md:w-96 md:text-lg lg:my-16 lg:w-3/5`}\n          onClick={() => {\n            let eventName = isLoggedIn\n              ? 'dog_name_component_pre_footer_cta_submit_logged_in'\n              : 'dog_name_component_pre_footer_cta_submit'\n\n            if (typeof window.gtag !== 'undefined') {\n              window.gtag('event', eventName, {\n                page: 'home_page'\n              })\n            }\n            if (isLoggedIn) {\n              navigate('/account/')\n            } else {\n              window.location.href = `/signup/${dogDetailsPage}/${coupon ? `?coupon=${coupon}` : ''}`\n            }\n          }}\n        >\n          {isLoggedIn ? `${buttonProp?.loggedInButtonText}` : `${buttonProp?.buttonText}`}\n        </button>\n      )\n    }\n\n    return null\n  }\n\n  const renderDogName = () => {\n    return (\n      <Formik\n        innerRef={formikRef}\n        initialValues={{\n          name: ''\n        }}\n        onSubmit={async values => {\n          let eventName = isLoggedIn\n            ? 'dog_name_component_pre_footer_submit_logged_in'\n            : 'dog_name_component_pre_footer_submit'\n\n          if (!values.name) {\n            let url = `/signup/${dogDetailsPage}/`\n            if (coupon) url += `?coupon=${coupon}`\n            window.location.href = url\n            if (typeof window.gtag !== 'undefined') {\n              window.gtag('event', eventName, {\n                page: 'home_page'\n              })\n            }\n          } else {\n            if (typeof window.gtag !== 'undefined') {\n              window.gtag('event', eventName, {\n                page: 'home_page',\n                dog_name: values.name\n              })\n            }\n            let url = `/signup/${dogDetailsPage}/?d=${encodeURI(btoa(values.name))}`\n            if (coupon) url += `&coupon=${coupon}`\n            window.location.href = url\n          }\n        }}\n        validateOnMount={false}\n      >\n        {props => {\n          return (\n            <>\n              <FormikErrorFocus\n                formik={useFormikContext()}\n                offset={0}\n                align={'middle'}\n                focusDelay={1000}\n                ease={'linear'}\n                duration={1000}\n              />\n              <div\n                className=\"mx-auto mt-4 w-4/5 rounded-3xl p-4\"\n                style={{ backgroundColor: formBackgroundColor || '#F9F5F1' }}\n              >\n                <span className=\"text-grey-500 mb-4 flex justify-center whitespace-nowrap text-center font-serif text-lg md:text-xl\">\n                  Who are we cooking for today?\n                </span>\n                <div className=\"my-4 flex w-full items-center justify-center\">\n                  <Field\n                    type=\"text\"\n                    name=\"name\"\n                    label=\"name\"\n                    placeholder=\"Your dog's name\"\n                    className={\n                      'peer block w-[98%] rounded-3xl border border-gray-300 bg-white text-center focus:border-[#B0CDD5] focus:ring-0 md:mx-1 md:w-[90%]'\n                    }\n                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {\n                      props.setFieldValue('name', e.target.value)\n                      triggerTagging('dog_hero_pre_footer_name_entered')\n                    }}\n                    onKeyDown={e => {\n                      if (e.key === 'Enter') {\n                        triggerTagging('dog_hero_pre_footer_name_entered')\n                        props.handleSubmit()\n                      }\n                    }}\n                  />\n                  {props.errors.name && props.touched.name ? (\n                    <div className=\"text-xs text-red-500\">{props.errors.name}</div>\n                  ) : null}\n                </div>\n                <div className=\"mt-3 flex w-full items-center justify-center\">\n                  <button\n                    type=\"button\"\n                    className=\"mx-1 mb-4 flex w-full justify-center rounded-3xl border border-transparent bg-primary px-4 py-2 text-base font-medium hover:underline md:w-[90%] md:text-lg\"\n                    onClick={() => props.handleSubmit()}\n                    style={{ color: '#fff' }}\n                  >\n                    Create Your Plan\n                  </button>\n                </div>\n                <div className=\"pb-1 text-center text-xs\">\n                  <div className=\"flex flex-row justify-center\">\n                    <img className=\"mr-1\" width={14} src={Clock} alt=\"Clock\" />\n                    <span>\n                      It takes about <span className=\"font-bold\">2 mins</span>\n                    </span>\n                  </div>\n                </div>\n              </div>\n            </>\n          )\n        }}\n      </Formik>\n    )\n  }\n\n  return (\n    <>\n      <div\n        className=\"bg-image-none relative -mb-4 h-full w-full md:bg-cover md:bg-bottom md:bg-no-repeat\"\n        style={{ backgroundColor }}\n      >\n        <main className=\"mx-auto pb-8 flex h-full w-full flex-col md:pb-12 lg:container lg:flex-row 2xl:pb-20\">\n          <div className=\"mr-8 mt-8 hidden pt-8 lg:block lg:w-1/2\">\n            <div className=\"max-h-448 relative ml-5 h-448 w-4/5 rounded-lg md:mx-auto\">\n              <div\n                className=\"image-backdrop-square-wrapper absolute h-448 w-full rounded-3xl\"\n                style={{ backgroundColor: mediaBackdropColor }}\n              />\n              {renderDesktopImage()}\n            </div>\n          </div>\n          <div className=\"-mt-4 block w-full md:-mt-8 lg:hidden\">\n            <div className=\"relative block h-full w-full md:mx-auto lg:hidden\">{renderMobileImage()}</div>\n          </div>\n          <div className=\"my-6 w-full lg:mt-8 lg:w-1/2 lg:pt-8\">\n            <div className=\"h3 block text-center text-3xl lg:mt-4 lg:text-5xl\">{preFooterTextHeadlineOne}</div>\n            <div className=\"h3 mt-2 mb-10 block text-center text-3xl lg:text-5xl\">{preFooterTextHeadlineTwo}</div>\n            <div className=\" prose prose-indigo mx-auto w-4/5 text-teal-900 \">\n              <p\n                className={'enable-list-styles text-base text-center font-medium font-sans'}\n                dangerouslySetInnerHTML={{ __html: preFooterTextOne }}\n              ></p>\n            </div>\n            <div className=\"mx-auto mt-10 mb-8 lg:mt-10 lg:mb-4\"> {renderDogName()}</div>\n            {getWidget()}\n            {showRating && (\n              <div className=\"text-center text-xs lg:text-base\">\n                <span className=\"font-bold\">{ratingTextBold} </span>\n                <span>\n                  {ratingTextNormalOne} {renderRatingIcon()} {ratingTextNormalTwo}\n                </span>\n              </div>\n            )}\n          </div>\n        </main>\n      </div>\n    </>\n  )\n}\n\nexport default DogNamePreFooter\n"],"names":["_ref","backgroundColor","mediaBackdropColor","buttonEnabled","buttonProp","formBackgroundColor","_ref$preFooterTextHea","preFooterTextHeadlineOne","_ref$preFooterTextHea2","preFooterTextHeadlineTwo","_ref$preFooterTextOne","preFooterTextOne","desktopImage","builderDesktopImage","_ref$preFooterDesktop","preFooterDesktopImgAltText","mobileImage","builderMobileImage","_ref$preFooterMobileT","preFooterMobileTextImgAltText","widgetType","widgetBackgroundColor","widgetTags","showRating","_ref$ratingTextBold","ratingTextBold","_ref$ratingTextNormal","ratingTextNormalOne","_ref$ratingTextNormal2","ratingTextNormalTwo","builderRatingIcon","_ref$coupon","coupon","formikRef","React","_useState","useState","isLoggedIn","setIsLoggedIn","dogDetailsPage","useEffect","authenticateUser","_ref2","_asyncToGenerator","_regeneratorRuntime","_callee","_yield$getCognitoId","_context","prev","next","getCognitoId","sent","username","t0","stop","apply","arguments","_window$Trustpilot","trustWidget","document","getElementById","window","Trustpilot","loadFromElement","triggerTagging","eventName","gtag","page","className","style","public_id","CdnImage","url","alt","steps","renderDesktopImage","renderMobileImage","dangerouslySetInnerHTML","__html","Formik","innerRef","initialValues","name","onSubmit","_ref3","_callee2","values","_url","_context2","dog_name","encodeURI","btoa","location","href","_x","validateOnMount","props","FormikErrorFocus","formik","useFormikContext","offset","align","focusDelay","ease","duration","Field","type","label","placeholder","onChange","e","setFieldValue","target","value","onKeyDown","key","handleSubmit","errors","touched","onClick","color","width","src","Clock","id","rel","StaticImage","objectFit","__imageData","require"],"sourceRoot":""}