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