Skip to content

Commit

Permalink
feat(lead poup): create pop up for mindshare articles
Browse files Browse the repository at this point in the history
  • Loading branch information
@jomarmontuya
jomarmontuya committed Jan 15, 2024
1 parent 552bf52 commit 247fd4a
Show file tree
Hide file tree
Showing 2 changed files with 334 additions and 1 deletion.
329 changes: 329 additions & 0 deletions src/components/marketing/PopupLeadCapture/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,329 @@
import { Box, Button, TextField, Typography, useTheme } from '@mui/material';
import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import { useState } from 'react';
import CloseIcon from '@mui/icons-material/Close';
import { ErrorMessage, Field, Form, Formik } from 'formik';

import * as Yup from 'yup';
import {
getLeadObjectZOHO,
postToZOHO,
subscribeToZoho,
} from 'revamp/utils/helper';
import getLastVisitedPathAndUrl from 'revamp/utils/getLastVisitedPathAndUrl';
import { useRouter } from 'next/router';

const validationSchema = Yup.object().shape({
firstName: Yup.string().required('First Name is required *'),
lastName: Yup.string().required('Last Name is required * '),
email: Yup.string().email('Invalid email').required('Email is required * '),
});

export default function PopUpLeadCapture() {
const [isExpanded, setIsExpanded] = useState(true);
const [downloadClick, setDownloadClick] = useState(false);
const theme = useTheme();
return (
<Box
sx={{
position: 'fixed',
right: '0',
bottom: '0',
zIndex: 0,
width: '100%',
maxWidth: 290,
height: '100%',
display: 'flex',
height: isExpanded ? 120 : 50,
justifyContent: 'flex-end',
alignItems: 'flex-end',
background: theme.palette.zesty.zestyBlue,
borderRadius: '20px 0 0 0px',
transition: 'height 0.1s ease-in-out',
}}
>
<Box
sx={{
p: 1,
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
textAlign: 'center',
width: '100%',
gap: 2,
}}
>
<Box sx={{ display: 'flex' }}>
<Typography
sx={{
color: theme.palette.zesty.zestyWhite,
fontWeight: 'bold',
letterSpacing: 0.1,
lineHeight: '16px',
}}
>
FREE CONVERSION RATE OPTIMIZATION KIT
</Typography>

{isExpanded ? (
<KeyboardArrowDownIcon
onClick={() => setIsExpanded(!isExpanded)}
sx={{ color: 'white', cursor: 'pointer', fontSize: 18 }}
/>
) : (
<KeyboardArrowUpIcon
onClick={() => setIsExpanded(!isExpanded)}
sx={{ color: 'white', cursor: 'pointer', fontSize: 18 }}
/>
)}
</Box>

{isExpanded && (
<Button
onClick={() => setDownloadClick(!downloadClick)}
variant="contained"
color="secondary"
>
Download Now
</Button>
)}
<PopUpForm
setDownloadClick={setDownloadClick}
height={downloadClick ? 425 : 0}
/>
</Box>
</Box>
);
}

function PopUpForm({ height, setDownloadClick }) {
const theme = useTheme();
const router = useRouter();
const { lastVisitedPath, lastVisitedURL } = getLastVisitedPathAndUrl();
const [success, setSuccess] = useState(false);

const onSubmit = async (values) => {
let payload = getLeadObjectZOHO(
values,
values?.inquiryReason,
'Mindshare Pop Up Form',
'',
'Website', // leadsource
lastVisitedPath,
lastVisitedURL,
);

// post to leads section
await postToZOHO(payload);

//post to email marketing signup
if (payload.newsletter_signup) {
await subscribeToZoho(payload);
}

setSuccess(true);

return values;
};
return (
<Box
sx={{
position: 'fixed',
right: '0',
bottom: '0',
zIndex: 0,
width: '100%',
maxWidth: 290,
height: '100%',
height: height ? height : 0,
background: theme.palette.zesty.zestyBlue,
borderRadius: '20px 0 0 0px',
transition: 'height 0.1s ease-in-out',
display: 'flex',
}}
>
<Box sx={{ p: 2 }}>
{height ? (
<CloseIcon
onClick={() => setDownloadClick(false)}
sx={{
color: 'white',
cursor: 'pointer',
position: 'absolute',
top: 10,
right: 10,
fontSize: 18,
}}
/>
) : null}

{!success ? (
<>
{' '}
<Box sx={{ mt: 2 }}>
<Typography
sx={{
letterSpacing: 1,
lineHeight: '16px',
color: theme.palette.zesty.zestyWhite,
fontWeight: 'bold',
}}
>
DOWNLOAD CONVERSION RATE OPTIMIZATION FREE E-BOOK
</Typography>
</Box>
<Box sx={{ mt: 2 }}>
<Formik
initialValues={{
firstName: '',
lastName: '',
email: '',
}}
validationSchema={validationSchema}
onSubmit={onSubmit}
>
{({ isSubmitting }) => (
<Form>
<Box
sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}
>
<Box>
<Field name="firstName">
{({ field }) => (
<TextField
{...field}
sx={{
width: '100%',
background: 'white',
borderRadius: 2,
}}
color="primary"
label="First Name"
variant="filled"
type="text"
/>
)}
</Field>
<ErrorMessage
name="firstName"
component="div"
style={{
fontSize: 10,
color: 'white',
textAlign: 'left',
marginTop: 2,
}}
/>
</Box>
<Box>
<Field name="lastName">
{({ field }) => (
<TextField
{...field}
sx={{
width: '100%',
background: 'white',
borderRadius: 2,
}}
color="primary"
label="Last Name"
variant="filled"
type="text"
/>
)}
</Field>
<ErrorMessage
style={{
fontSize: 10,
color: 'white',
textAlign: 'left',
marginTop: 2,
}}
name="lastName"
component="div"
/>
</Box>
<Box>
<Field name="email">
{({ field }) => (
<TextField
{...field}
sx={{
width: '100%',
background: 'white',
borderRadius: 2,
}}
color="primary"
label="Email"
variant="filled"
type="email"
/>
)}
</Field>
<ErrorMessage
style={{
fontSize: 10,
color: 'white',
textAlign: 'left',
marginTop: 2,
}}
name="email"
component="div"
/>
</Box>
<Button
variant="contained"
sx={{ width: '100%' }}
color="secondary"
type="submit"
disabled={isSubmitting}
>
Download Now
</Button>
</Box>
</Form>
)}
</Formik>
</Box>
</>
) : (
<>
{height ? (
<Box
sx={{
height: '100%',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'column',
gap: 2,
}}
>
<Typography
sx={{
color: 'white',
fontSize: 16,
}}
>
Thank you for downloading our guide. Reach out to us for a
free discovery call, demo call or a free trial.
</Typography>

<Button
onClick={() => router.push('/demos')}
size="small"
variant="contained"
color="secondary"
>
Book A Demo
</Button>
</Box>
) : null}
</>
)}
</Box>
</Box>
);
}
6 changes: 5 additions & 1 deletion src/views/zesty/Article.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ import AuthorSection from 'revamp/ui/AuthorSection';
import useFetch from 'components/hooks/useFetch';
import BlogContent from 'revamp/ui/BlogContent';
import { CtaWithInputField } from 'blocks/cta';
import PopUpLeadCapture from 'components/marketing/PopupLeadCapture';

function Article({ content }) {
const [newContent, setNewContent] = useState(content.article);
Expand Down Expand Up @@ -110,7 +111,7 @@ function Article({ content }) {
}, []);

return (
<Box>
<Box sx={{ position: 'relative' }}>
<ThemeProvider theme={() => revampTheme(palette.mode)}>
<Stack>
<BlogHero
Expand Down Expand Up @@ -604,6 +605,9 @@ function Article({ content }) {
/>
</Container>
)}

{/* Side PopUp */}
<PopUpLeadCapture />
</Box>
);
}
Expand Down

0 comments on commit 247fd4a

Please sign in to comment.