From a6c7b728ed19c69964370884977d09a4bb736a8a Mon Sep 17 00:00:00 2001 From: jomarmontuya Date: Thu, 19 Oct 2023 01:14:59 +0800 Subject: [PATCH] feat(forms): revert forms to multifield forms --- .../cta/standardFormWithSelectBackup.js | 529 ------------------ .../cta/standardFormWithSelectOld.js | 529 ++++++++++++++++++ src/revamp/ui/GetDemoSection/index.js | 161 +++--- src/revamp/utils/validation.js | 18 +- 4 files changed, 640 insertions(+), 597 deletions(-) delete mode 100644 src/components/cta/standardFormWithSelectBackup.js create mode 100644 src/components/cta/standardFormWithSelectOld.js diff --git a/src/components/cta/standardFormWithSelectBackup.js b/src/components/cta/standardFormWithSelectBackup.js deleted file mode 100644 index 1c6b815a3..000000000 --- a/src/components/cta/standardFormWithSelectBackup.js +++ /dev/null @@ -1,529 +0,0 @@ -// /* eslint-disable no-undef */ -// /* eslint-disable react/no-unescaped-entities */ -// import React, { useState } from 'react'; -// import Box from '@mui/material/Box'; - -// import { useFormik } from 'formik'; -// import * as yup from 'yup'; - -// import Typography from '@mui/material/Typography'; -// import Grid from '@mui/material/Grid'; -// import TextField from '@mui/material/TextField'; -// import Button from '@mui/material/Button'; -// import { useTheme } from '@mui/material/styles'; -// import InputLabel from '@mui/material/InputLabel'; -// import MenuItem from '@mui/material/MenuItem'; -// import FormControl from '@mui/material/FormControl'; -// import Select from '@mui/material/Select'; -// import TransitionsModal from './TransitionModal'; -// import { inputLabelClasses } from '@mui/material/InputLabel'; -// import { styled } from '@mui/material/styles'; -// import { getCookie } from 'cookies-next'; - -// /** -// * Possible field option in ZOHO https://crm.zoho.com/crm/org749642405/settings/api/modules/Leads?step=FieldsList -// * Note, if a custom field need to be added speak to todd.sabo@zesty.io -// * For testing new changes, please work with katie.moser@zesty.io -// */ - -// // for hiding of ellipis in message in mobile -// const StyledTextField = styled(TextField)({ -// [`& .${inputLabelClasses.outlined}`]: { -// whiteSpace: 'normal', -// }, -// }); - -// /* validation for form component */ - -// const getLeadObjectZOHO = ( -// obj, -// select, -// leadDetail, -// businessType, -// leadSource = 'Website', -// ) => { -// // let acLeadtype = 'Marketing Website'; -// let acRole = 'Marketer'; -// // possible values -// // "Phone": '+'+country.value + ' ' + document.querySelector('#ac-phone input').value, -// // "Current_CMS": acCMS, -// // "How_Using_Zesty_io": acHow, -// // "Website": document.querySelector('#ac-url').value, -// // 'Project_Timeline' : document.querySelector('#ac-timeline').value, -// // zoho and google click id https://help.zoho.com/portal/en/kb/crm/integrations/google/google-ads/articles/configure-google-ads-crm-integration#Step_2_Add_hidden_element_in_your_web_forms -// return { -// First_Name: obj.firstName, -// Last_Name: obj.lastName, -// Email: obj.email, -// Phone: obj.phoneNumber, -// Inquiry_Reason: select, -// Description: obj.message, -// Zesty_User_Account: obj?.user && obj.user ? true : false, -// newsletter_signup: obj.newsletter_signup, -// Lead_Source: getCookie('utm_source') ? getCookie('utm_source') : leadSource, -// Role: getCookie('persona') ? getCookie('persona') : acRole, -// Captured_URL: -// window.location.href.match(/localhost/gi) == null -// ? window.location.href -// : 'https://www.testcapurl.com', -// UTM_Campaign: getCookie('utm_campaign') -// ? getCookie('utm_campaign') -// : 'unknown', -// UTM_Source: getCookie('utm_source') ? getCookie('utm_source') : 'unknown', -// UTM_Term: getCookie('utm_term') ? getCookie('utm_term') : 'unknown', -// UTM_Medium: getCookie('utm_medium') ? getCookie('utm_medium') : 'unknown', -// $gclid: getCookie('gclid') ? getCookie('gclid') : '', -// Lead_Source_Detail: getCookie('utm_medium') -// ? getCookie('utm_medium') -// : leadDetail, -// Lead_Source_Topic: getCookie('utm_campaign') -// ? getCookie('utm_campaign') -// : 'none', -// Business_Type: businessType, -// Lead_Status: 'Not Contacted', -// Designation: obj.jobTitle, -// Company: obj.company, -// }; -// }; - -// const postToZOHO = async (payloadJSON) => { -// fetch('https://us-central1-zesty-prod.cloudfunctions.net/zoho', { -// method: 'POST', -// body: JSON.stringify(payloadJSON), -// headers: { -// 'Content-Type': 'application/json', -// }, -// }) -// .then((res) => res.json()) -// .then(() => { -// // google data -// dataLayer.push({ event: 'formCaptureSuccess', value: '1' }); -// }) -// .catch((error) => { -// throw new Error(`HTTP error: ${error}`); -// }); -// }; -// const phoneRegExp = -// /^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/im; - -// const validationSchema = yup.object({ -// firstName: yup -// .string() -// .trim() -// .min(2, 'Please enter a valid name') -// .max(50, 'Please enter a valid name') -// .required('Please specify your first name'), -// lastName: yup -// .string() -// .trim() -// .min(2, 'Please enter a valid name') -// .max(50, 'Please enter a valid name') -// .required('Please specify your last name'), -// email: yup -// .string() -// .trim() -// .email('Please enter a valid email address') -// .required('Email is required.'), -// phoneNumber: yup.string().matches(phoneRegExp, 'Phone number is not valid'), -// message: yup.string().trim(), -// }); - -// const validationSchemaForPpc = yup.object({ -// firstName: yup -// .string() -// .trim() -// .min(2, 'Please enter a valid name') -// .max(50, 'Please enter a valid name') -// .required('Please specify your first name'), -// lastName: yup -// .string() -// .trim() -// .min(2, 'Please enter a valid name') -// .max(50, 'Please enter a valid name') -// .required('Please specify your last name'), -// email: yup -// .string() -// .trim() -// .email('Please enter a valid email address') -// .required('Email is required.'), -// company: yup.string().trim().required('Please specify your company'), -// jobTitle: yup.string().trim().required('Please specify your job title'), -// phoneNumber: yup.string().matches(phoneRegExp, 'Phone number is not valid'), -// }); - -// const validationSchemaForDxp = yup.object({ -// firstName: yup -// .string() -// .trim() -// .min(2, 'Please enter a valid name') -// .max(50, 'Please enter a valid name') -// .required('Please specify your first name'), -// lastName: yup -// .string() -// .trim() -// .min(2, 'Please enter a valid name') -// .max(50, 'Please enter a valid name') -// .required('Please specify your last name'), -// email: yup -// .string() -// .trim() -// .email('Please enter a valid email address') -// .required('Email is required.'), -// newsletter_signup: yup.boolean(), -// company: yup.string().trim().required('Please specify your company'), -// jobTitle: yup.string().trim().required('Please specify your job title'), -// phoneNumber: yup.string().matches(phoneRegExp, 'Phone number is not valid'), -// }); - -// const subscribeToZoho = async (payload) => { -// const { Email, First_Name, Last_Name } = payload; -// await fetch( -// `https://us-central1-zesty-dev.cloudfunctions.net/zohoEmailSubscribe?email=${Email}&name=${First_Name}_${Last_Name}`, -// { -// method: 'GET', -// }, -// ) -// .then((res) => res.json()) -// .then(() => { -// dataLayer.push({ event: 'emailSubscribeSubmitted', value: '1' }); -// acSENT = true; -// }); -// }; - -// function StandardFormWithSelect({ -// selectedValue = 0, -// hideSelect = false, -// // hideMessage = true, -// // defaultMessage = '', -// leadDetail = 'Contact Us', -// leadSource = 'Website', -// businessType = 'Direct', -// modalTitle = 'Thank you', -// modalMessage = 'Have a great day.', -// displayMsgUnderButton = `We'll get back to you in 1-2 business days.`, -// additionalTextfield = {}, -// buttonFullWidth = false, -// hidePrivacySection = false, -// messageLabel = 'Message', -// customButtonStyle = { display: 'flex', justifyContent: 'initial' }, -// bottomCheckbox = false, -// bottomCheckboxLabel = '', -// validationType = '', -// ctaButton = 'Submit', -// downloadLink = '', -// // onClickBtn = null, -// phoneNumber = false, -// capterraTracking = null, -// cmsModel, -// }) { -// const theme = useTheme(); - -// const [open, setOpen] = useState(false); - -// let inquiryReasons = [ -// 'General', -// 'Agency Sign Up', -// 'Request a Demo', -// 'Support', -// 'Billing', -// 'Press Relations', -// ]; -// const [selectValue, setSelectValue] = useState(inquiryReasons[selectedValue]); - -// const handleChange = (event) => { -// setSelectValue(event.target.value); -// }; - -// const initialValues = { -// firstName: '', -// lastName: '', -// email: '', -// message: '', -// company: '', -// jobTitle: '', -// phoneNumber: '', -// newsletter_signup: false, -// }; - -// const onSubmit = async (values) => { -// // download link -// downloadLink && window.open(downloadLink, '_blank'); -// capterraTracking && capterraTracking(); - -// let payload = await getLeadObjectZOHO( -// values, -// selectValue, -// leadDetail, -// businessType, -// leadSource, -// ); -// // post to leads section -// await postToZOHO(payload); - -// //post to email marketing signup -// if (payload.newsletter_signup) { -// await subscribeToZoho(payload); -// } - -// cmsModel === 'Gated Content Page' -// ? setOpen(true) -// : (window.location = '/meet/'); - -// return values; -// }; - -// const formik = useFormik({ -// initialValues, -// validationSchema: -// validationType === 'dxp' -// ? validationSchemaForDxp -// : additionalTextfield.company -// ? validationSchemaForPpc -// : validationSchema, -// onSubmit, -// }); - -// return ( -// -//
-// -// -// -// -// -// -// -// {additionalTextfield.company && ( -// -// -// -// )} -// -// -// -// {phoneNumber && ( -// -// -// -// )} -// {additionalTextfield.jobTitle && ( -// -// -// -// )} -// {/* logic to hide the select */} -// {hideSelect && ( -// -// -// -// )} -// {/* logic to hide the select */} -// {!hideSelect && ( -// -// -// -// -// Inquiry Reason -// -// -// -// -// -// )} -// {/* -// {messageLabel && ( -// -// )} -// {bottomCheckbox && ( -// -// -// } -// label={bottomCheckboxLabel} -// /> -// -// )} -// */} -// -// -// -// {/* -// -// {displayMsgUnderButton} -// -// */} -// {/* -// -// */} -// -// -// -// By clicking on "submit" you agree to our{' '} -// -// Privacy Policy -// -// . -// -// -// -// -//
-// -// -// ); -// } - -// export default StandardFormWithSelect; diff --git a/src/components/cta/standardFormWithSelectOld.js b/src/components/cta/standardFormWithSelectOld.js new file mode 100644 index 000000000..0fb0a9863 --- /dev/null +++ b/src/components/cta/standardFormWithSelectOld.js @@ -0,0 +1,529 @@ +/* eslint-disable no-undef */ +/* eslint-disable react/no-unescaped-entities */ +import React, { useState } from 'react'; +import Box from '@mui/material/Box'; + +import { useFormik } from 'formik'; +import * as yup from 'yup'; + +import Typography from '@mui/material/Typography'; +import Grid from '@mui/material/Grid'; +import TextField from '@mui/material/TextField'; +import Button from '@mui/material/Button'; +import { useTheme } from '@mui/material/styles'; +import InputLabel from '@mui/material/InputLabel'; +import MenuItem from '@mui/material/MenuItem'; +import FormControl from '@mui/material/FormControl'; +import Select from '@mui/material/Select'; +import TransitionsModal from './TransitionModal'; +import { inputLabelClasses } from '@mui/material/InputLabel'; +import { styled } from '@mui/material/styles'; +import { getCookie } from 'cookies-next'; + +/** + * Possible field option in ZOHO https://crm.zoho.com/crm/org749642405/settings/api/modules/Leads?step=FieldsList + * Note, if a custom field need to be added speak to todd.sabo@zesty.io + * For testing new changes, please work with katie.moser@zesty.io + */ + +// for hiding of ellipis in message in mobile +const StyledTextField = styled(TextField)({ + [`& .${inputLabelClasses.outlined}`]: { + whiteSpace: 'normal', + }, +}); + +/* validation for form component */ + +const getLeadObjectZOHO = ( + obj, + select, + leadDetail, + businessType, + leadSource = 'Website', +) => { + // let acLeadtype = 'Marketing Website'; + let acRole = 'Marketer'; + // possible values + // "Phone": '+'+country.value + ' ' + document.querySelector('#ac-phone input').value, + // "Current_CMS": acCMS, + // "How_Using_Zesty_io": acHow, + // "Website": document.querySelector('#ac-url').value, + // 'Project_Timeline' : document.querySelector('#ac-timeline').value, + // zoho and google click id https://help.zoho.com/portal/en/kb/crm/integrations/google/google-ads/articles/configure-google-ads-crm-integration#Step_2_Add_hidden_element_in_your_web_forms + return { + First_Name: obj.firstName, + Last_Name: obj.lastName, + Email: obj.email, + Phone: obj.phoneNumber, + Inquiry_Reason: select, + Description: obj.message, + Zesty_User_Account: obj?.user && obj.user ? true : false, + newsletter_signup: obj.newsletter_signup, + Lead_Source: getCookie('utm_source') ? getCookie('utm_source') : leadSource, + Role: getCookie('persona') ? getCookie('persona') : acRole, + Captured_URL: + window.location.href.match(/localhost/gi) == null + ? window.location.href + : 'https://www.testcapurl.com', + UTM_Campaign: getCookie('utm_campaign') + ? getCookie('utm_campaign') + : 'unknown', + UTM_Source: getCookie('utm_source') ? getCookie('utm_source') : 'unknown', + UTM_Term: getCookie('utm_term') ? getCookie('utm_term') : 'unknown', + UTM_Medium: getCookie('utm_medium') ? getCookie('utm_medium') : 'unknown', + $gclid: getCookie('gclid') ? getCookie('gclid') : '', + Lead_Source_Detail: getCookie('utm_medium') + ? getCookie('utm_medium') + : leadDetail, + Lead_Source_Topic: getCookie('utm_campaign') + ? getCookie('utm_campaign') + : 'none', + Business_Type: businessType, + Lead_Status: 'Not Contacted', + Designation: obj.jobTitle, + Company: obj.company, + }; +}; + +const postToZOHO = async (payloadJSON) => { + fetch('https://us-central1-zesty-prod.cloudfunctions.net/zoho', { + method: 'POST', + body: JSON.stringify(payloadJSON), + headers: { + 'Content-Type': 'application/json', + }, + }) + .then((res) => res.json()) + .then(() => { + // google data + dataLayer.push({ event: 'formCaptureSuccess', value: '1' }); + }) + .catch((error) => { + throw new Error(`HTTP error: ${error}`); + }); +}; +const phoneRegExp = + /^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/im; + +const validationSchema = yup.object({ + firstName: yup + .string() + .trim() + .min(2, 'Please enter a valid name') + .max(50, 'Please enter a valid name') + .required('Please specify your first name'), + lastName: yup + .string() + .trim() + .min(2, 'Please enter a valid name') + .max(50, 'Please enter a valid name') + .required('Please specify your last name'), + email: yup + .string() + .trim() + .email('Please enter a valid email address') + .required('Email is required.'), + phoneNumber: yup.string().matches(phoneRegExp, 'Phone number is not valid'), + message: yup.string().trim(), +}); + +const validationSchemaForPpc = yup.object({ + firstName: yup + .string() + .trim() + .min(2, 'Please enter a valid name') + .max(50, 'Please enter a valid name') + .required('Please specify your first name'), + lastName: yup + .string() + .trim() + .min(2, 'Please enter a valid name') + .max(50, 'Please enter a valid name') + .required('Please specify your last name'), + email: yup + .string() + .trim() + .email('Please enter a valid email address') + .required('Email is required.'), + company: yup.string().trim().required('Please specify your company'), + jobTitle: yup.string().trim().required('Please specify your job title'), + phoneNumber: yup.string().matches(phoneRegExp, 'Phone number is not valid'), +}); + +const validationSchemaForDxp = yup.object({ + firstName: yup + .string() + .trim() + .min(2, 'Please enter a valid name') + .max(50, 'Please enter a valid name') + .required('Please specify your first name'), + lastName: yup + .string() + .trim() + .min(2, 'Please enter a valid name') + .max(50, 'Please enter a valid name') + .required('Please specify your last name'), + email: yup + .string() + .trim() + .email('Please enter a valid email address') + .required('Email is required.'), + newsletter_signup: yup.boolean(), + company: yup.string().trim().required('Please specify your company'), + jobTitle: yup.string().trim().required('Please specify your job title'), + phoneNumber: yup.string().matches(phoneRegExp, 'Phone number is not valid'), +}); + +const subscribeToZoho = async (payload) => { + const { Email, First_Name, Last_Name } = payload; + await fetch( + `https://us-central1-zesty-dev.cloudfunctions.net/zohoEmailSubscribe?email=${Email}&name=${First_Name}_${Last_Name}`, + { + method: 'GET', + }, + ) + .then((res) => res.json()) + .then(() => { + dataLayer.push({ event: 'emailSubscribeSubmitted', value: '1' }); + acSENT = true; + }); +}; + +function StandardFormWithSelectOld({ + selectedValue = 0, + hideSelect = false, + // hideMessage = true, + // defaultMessage = '', + leadDetail = 'Contact Us', + leadSource = 'Website', + businessType = 'Direct', + modalTitle = 'Thank you', + modalMessage = 'Have a great day.', + displayMsgUnderButton = `We'll get back to you in 1-2 business days.`, + additionalTextfield = {}, + buttonFullWidth = false, + hidePrivacySection = false, + messageLabel = 'Message', + customButtonStyle = { display: 'flex', justifyContent: 'initial' }, + bottomCheckbox = false, + bottomCheckboxLabel = '', + validationType = '', + ctaButton = 'Submit', + downloadLink = '', + // onClickBtn = null, + phoneNumber = false, + capterraTracking = null, + cmsModel, +}) { + const theme = useTheme(); + + const [open, setOpen] = useState(false); + + let inquiryReasons = [ + 'General', + 'Agency Sign Up', + 'Request a Demo', + 'Support', + 'Billing', + 'Press Relations', + ]; + const [selectValue, setSelectValue] = useState(inquiryReasons[selectedValue]); + + const handleChange = (event) => { + setSelectValue(event.target.value); + }; + + const initialValues = { + firstName: '', + lastName: '', + email: '', + message: '', + company: '', + jobTitle: '', + phoneNumber: '', + newsletter_signup: false, + }; + + const onSubmit = async (values) => { + // download link + downloadLink && window.open(downloadLink, '_blank'); + capterraTracking && capterraTracking(); + + let payload = await getLeadObjectZOHO( + values, + selectValue, + leadDetail, + businessType, + leadSource, + ); + // post to leads section + await postToZOHO(payload); + + //post to email marketing signup + if (payload.newsletter_signup) { + await subscribeToZoho(payload); + } + + cmsModel === 'Gated Content Page' + ? setOpen(true) + : (window.location = '/meet/'); + + return values; + }; + + const formik = useFormik({ + initialValues, + validationSchema: + validationType === 'dxp' + ? validationSchemaForDxp + : additionalTextfield.company + ? validationSchemaForPpc + : validationSchema, + onSubmit, + }); + + return ( + +
+ + + + + + + + {additionalTextfield.company && ( + + + + )} + + + + {phoneNumber && ( + + + + )} + {additionalTextfield.jobTitle && ( + + + + )} + {/* logic to hide the select */} + {hideSelect && ( + + + + )} + {/* logic to hide the select */} + {!hideSelect && ( + + + + + Inquiry Reason + + + + + + )} + {/* + {messageLabel && ( + + )} + {bottomCheckbox && ( + + + } + label={bottomCheckboxLabel} + /> + + )} + */} + + + + {/* + + {displayMsgUnderButton} + + */} + {/* + + */} + + + + By clicking on "submit" you agree to our{' '} + + Privacy Policy + + . + + + + +
+ + + ); +} + +export default StandardFormWithSelectOld; diff --git a/src/revamp/ui/GetDemoSection/index.js b/src/revamp/ui/GetDemoSection/index.js index f1c92f4fd..0ec2bfc22 100644 --- a/src/revamp/ui/GetDemoSection/index.js +++ b/src/revamp/ui/GetDemoSection/index.js @@ -7,7 +7,6 @@ import { contactPageValidation, } from 'revamp/utils/validation'; -import { SingleFieldForm } from './SingleFieldForm'; import { getLeadObjectZOHO, postToZOHO, @@ -86,6 +85,14 @@ const GetDemoSection = ({ return values; }; + console.log( + isLong && !isContact + ? 'validationSchema' + : isContact + ? 'contactPageValidation' + : 'shortValidationSchema', + ); + return ( + + + + G2 MOMENTUM LEADER + + + {generateAlt('')} + {generateAlt('')} + {generateAlt('')} + + @@ -284,78 +324,65 @@ const GetDemoSection = ({ {/* Save this component as backup */} {isContact ? ( - + <> + + ) : ( - + <> + {/* Singleform field component */} + {/* */} + + + )} )} - - - - G2 MOMENTUM LEADER - - - {generateAlt('')} - {generateAlt('')} - {generateAlt('')} - - diff --git a/src/revamp/utils/validation.js b/src/revamp/utils/validation.js index 3520dc7d0..a1d3c2b11 100644 --- a/src/revamp/utils/validation.js +++ b/src/revamp/utils/validation.js @@ -4,7 +4,7 @@ import * as yup from 'yup'; const phoneRegExp = '^([^0-9]*[0-9]){5}.*$'; const validEmailRegex = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/; -export const validationSchema = yup.object({ +export const validationSchemaShortForm = yup.object({ firstName: yup.string().label('First Name').trim().optional(), lastName: yup.string().label('Last Name').trim().optional(), @@ -63,6 +63,22 @@ export const contactPageValidation = yup.object({ .required(), }); +export const validationSchema = yup.object({ + firstName: yup.string().label('First Name').trim().required(), + lastName: yup.string().label('Last Name').trim().required(), + email: yup + .string() + .label('Email') + .trim() + .email('Please enter a valid email address') + .required(), + phoneNumber: yup + .string() + .label('Phone') + .trim() + .matches(phoneRegExp, 'You must enter at least 5 digits.'), +}); + export const shortValidationSchema = yup.object({ firstName: yup.string().label('First Name').trim().optional(), lastName: yup.string().label('Last Name').trim().optional(),