index bf email

import React from 'react'
import styles from './styles.css'
import Link from '@components/Link'
import useScreenSize from '@hooks/useScreenSize'
import Image from '@components/Image'
import UnderlineCTALink from '@components/NFA/UnderlineCTALink'
import LegalCopy from '@components/NFA/TextStyling/LegalCopy'
import getCleanedGclid from '@lib/getCleanedGclid'
import useHasMounted from '@hooks/useHasMounted'
import { useForm } from 'react-hook-form'
import { yupResolver } from '@hookform/resolvers/yup'
import { object, string } from 'yup'
import SectionHeading from '@components/NFA/TextStyling/SectionHeading'
import Input from '@components/NFA/Input'
import { useAuthState } from '@lib/firebase/auth'
import useAnalytics from '@lib/analytics'

const schema = object({
  email: string().email().required()
})

export type PostEmailSignUpProps = {
  url: string

  customContainerClass?: string
  buttonMsg?: string
  buttonStyles?: object
  formPlacement?: string
  linkStyle?: object
  header?: string
}

const BlackFridayEmailCta = () => {
  const hasMounted = useHasMounted()
  const screenSize = useScreenSize()
  const isMobile = hasMounted && ['xsmall'].includes(screenSize)

  const {
    register,
    formState: { isSubmitSuccessful, errors },
    handleSubmit
  } = useForm({
    resolver: yupResolver(schema)
  })

  const [user] = useAuthState()
  const analytics = useAnalytics()
  const analyticsData = {
    type: 'CTA',
    formPlacement: 'BF Signup Widget'
  }

  const MobileEmailGraphic = () => {
    return (
      <>
        <style jsx>{styles}</style>
        <div className="mobile-email-graphic">
          <div className={'mobile-image-wrapper'}>
            <Image
              src={'/assets/black-friday/email-capture-phone-asset-2.png'}
              alt={'Email CTA Graphic'}
              fit={'contain'}
            />
          </div>
        </div>
      </>
    )
  }

  return (
    <>
      <style jsx>{styles}</style>
      <div className="email-padding">
        <div className="email-cta">
          <div className="email-input-container">
            {!isSubmitSuccessful ? (
              <>
                <div className="bf-cta-title">
                  Save big with <br /> <strong>BLACK FRIDAY DEALS</strong>
                </div>
                <form className="email-input-submit">
                  <div className="input-wrapper">
                    <Input
                      className="input"
                      placeholder="Email address"
                      label="Enter your email address"
                      helperText={errors.email?.message}
                      error={!!errors.email}
                      {...register('email')}
                    />
                  </div>
                  <div className={'bf-cta-button-wrapper'}>
                    <UnderlineCTALink
                      as={'button'}
                      textColor={'--kcl-yellow'}
                      transitionColor={'--kcl-brown'}
                      onClick={handleSubmit(data => {
                        const GCLID = getCleanedGclid()
                        const contentfulId =
                          sessionStorage.getItem('contentfulId')
                        analytics.trackEmailSignup(
                          'Email signup',
                          {
                            uid: user?.uid,
                            email: data.email,
                            GCLID,
                            contentfulId,
                            ...analyticsData
                          },
                          user
                        )
                      })}
                    >
                      Sign Me Up
                    </UnderlineCTALink>
                  </div>
                </form>
                <div className={'legal-copy-wrapper'}>
                  <LegalCopy
                    headingStyles={{
                      colorValue: '--kcl-yellow'
                    }}
                  >
                    Will be used in accordance with our{' '}
                    <Link href="/krazy-coupon-lady-privacy-policy" newWindow>
                      <span className="privacy-link">Privacy Policy</span>
                    </Link>
                  </LegalCopy>
                </div>
              </>
            ) : (
              <>
                <div className={'response-message-header-wrapper'}>
                  <SectionHeading colorValue={'--kcl-black'}>
                    Thanks for signing up
                  </SectionHeading>
                </div>
                <div className={'message-copy'}>
                  <span className="message-copy-larger">
                    {' '}
                    <strong>DEALS</strong> are on the way!{' '}
                  </span>
                  <br />
                  Want more? Text <strong>SAVE</strong> to{' '}
                  <strong>57299</strong>
                </div>
              </>
            )}
          </div>
          <MobileEmailGraphic />
        </div>
      </div>
    </>
  )
}

export default BlackFridayEmailCta