index bf email
dom
plain_text
10 months ago
5.1 kB
2
Indexable
Never
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