diff --git a/.vscode/settings.json b/.vscode/settings.json index 53ed6715..b19cfb84 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,3 +1,6 @@ { - "cSpell.words": ["Microservices"] + "cSpell.words": [ + "HUBSPOT", + "Microservices" + ] } diff --git a/components/Common/HubSpotForm/index.jsx b/components/Common/HubSpotForm/index.jsx index d48d03a8..70300246 100644 --- a/components/Common/HubSpotForm/index.jsx +++ b/components/Common/HubSpotForm/index.jsx @@ -7,7 +7,7 @@ const SKIP_SUBMIT_TEST = false; const HUBSPOT_FORM_BASE_URL = 'https://api.hsforms.com/submissions/v3/integration/submit/'; -const HusSpotForm = ({ +const HubSpotForm = ({ children, hubSpotPortalId, hubSpotFormId, @@ -146,7 +146,7 @@ const HusSpotForm = ({ ); }; -HusSpotForm.propTypes = { +HubSpotForm.propTypes = { children: PropTypes.any, hubSpotPortalId: PropTypes.string, hubSpotFormId: PropTypes.string, @@ -154,4 +154,4 @@ HusSpotForm.propTypes = { pageName: PropTypes.string, }; -export default HusSpotForm; +export default HubSpotForm; diff --git a/components/Common/SubscribeForm/index.jsx b/components/Common/SubscribeForm/index.jsx index 9a6bad5d..20b7ebc5 100644 --- a/components/Common/SubscribeForm/index.jsx +++ b/components/Common/SubscribeForm/index.jsx @@ -1,85 +1,76 @@ -import {useState} from 'react'; +import {useState, useRef} from 'react'; +import {useRouter} from 'next/router'; import PropTypes from 'prop-types'; +const SKIP_SUBMIT_TEST = false; + +const HUBSPOT_FORM_BASE_URL = + 'https://api.hsforms.com/submissions/v3/integration/submit/'; +const HUBSPOT_PORTAL_ID = '25691669'; +const HUBSPOT_FORM_ID = '3f7e736b-6f89-4a11-94e4-eac111c43486'; + +const SUCCESS_MESSAGE = 'Thank you for signing up for our mailing list!'; +const ERROR_MESSAGE = 'Something went wrong. Please try again later.'; + const SubscribeForm = ({isCompactView}) => { - const fieldErrorMessage = 'This field is required'; - const [email, setEmail] = useState(''); - const [emailFieldError, setEmailFieldError] = useState(false); - const [name, setName] = useState(''); - const [nameFieldError, setNameFieldError] = useState(false); - const [source, setSource] = useState(''); - const [sourceFieldError, setSourceFieldError] = useState(false); - const [formSuccess, setFormSuccess] = useState(null); - const [isWaitingForResponse, setIsWaitingForResponse] = useState(false); - const [afterFormSubmitMessage, setAfterFormSubmitMessage] = useState(''); + const [successMsg, setSuccessMsg] = useState(''); + const [formIsSending, setFormIsSending] = useState(false); + const router = useRouter(); + + const form = useRef(null); const submitSubscriptionForm = async e => { e.preventDefault(); + const formData = new FormData(form.current); - setIsWaitingForResponse(true); - - // Validation - let isValid = true; - if (!email) { - isValid = false; - setEmailFieldError(true); - } else { - setEmailFieldError(false); - } - if (!name) { - isValid = false; - setNameFieldError(true); - } else { - setNameFieldError(false); - } - if (!source) { - isValid = false; - setSourceFieldError(true); - } else { - setSourceFieldError(false); - } - if (!isValid) { - setIsWaitingForResponse(false); - return; - } - setAfterFormSubmitMessage(''); - setFormSuccess(null); - - const host = '/api/subscribe'; - const body = { - EMAIL: email, - NAME: name, - SOURCE: source, - }; + const fields = []; + [...formData].forEach(item => { + if (item[1]) { + fields.push({ + name: item[0], + value: item[1], + }); + } + }); - try { - const response = await fetch(host, { - method: 'POST', - body: JSON.stringify(body), - }); - const data = await response.json(); - if (data.result !== 'success' || !('result' in data)) { - setAfterFormSubmitMessage( - 'msg' in data ? data.msg : 'Something went wrong' - ); - setFormSuccess(false); - } else { - setAfterFormSubmitMessage( - 'Thank you for signing up for our mailing list!' + setFormIsSending(true); + if (!SKIP_SUBMIT_TEST) { + try { + const response = await fetch( + `${HUBSPOT_FORM_BASE_URL}/${HUBSPOT_PORTAL_ID}/${HUBSPOT_FORM_ID}`, + { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + submittedAt: Date.now(), + fields: fields, + context: { + pageUri: router.asPath, + pageName: 'Blog Page', + }, + }), + } ); - setFormSuccess(true); + const data = await response.json(); + if (data.inlineMessage) { + setSuccessMsg(SUCCESS_MESSAGE); + } + + setFormIsSending(false); + } catch (e) { + setSuccessMsg(ERROR_MESSAGE); + console.log('error', e); } - } catch (e) { - console.log('err', e); - setAfterFormSubmitMessage('Something went wrong'); - setFormSuccess(false); + } else { + setSuccessMsg(SUCCESS_MESSAGE); } - setIsWaitingForResponse(false); }; let loaderClasses = 'w-full h-full absolute l-0 t-0 rounded-2xl transition-all opacity-50 pointer-events-none'; - loaderClasses += isWaitingForResponse + loaderClasses += formIsSending ? ' bg-purple-light z-10 pointer-events-auto' : ''; @@ -88,7 +79,7 @@ const SubscribeForm = ({isCompactView}) => { if (isCompactView) { containerClasses += ' laptop:flex-col laptop:justify-start laptop:items-stretch laptop:px-8'; - if (formSuccess) { + if (successMsg) { containerClasses += ' laptop:py-20'; } else { containerClasses += ' laptop:pt-20 laptop:pb-[120px]'; @@ -134,12 +125,12 @@ const SubscribeForm = ({isCompactView}) => {
- {formSuccess && ( + {successMsg && (

- {afterFormSubmitMessage} + {successMsg}

)} - {!formSuccess && ( + {!successMsg && ( <>
Sign up to stay up-to-date with our latest developments. We @@ -147,107 +138,27 @@ const SubscribeForm = ({isCompactView}) => {
submitSubscriptionForm(e)} + onSubmit={submitSubscriptionForm} + ref={form} > -
-
- setEmail(e.target.value)} - name="EMAIL" - placeholder="email@example.com" - className={`leading-input focus:border-purple !shadow-hidden block w-full rounded-lg border border-solid bg-purple-dark py-2 pl-3 pr-8 font-poppins text-sm text-white placeholder:text-gray ${ - emailFieldError ? '' : 'hover:border-purple' - } ${emailFieldError ? 'border-pink' : 'border-lite'}`} - /> - {email && ( - setEmail('')} - > - ✕ - - )} -
- {emailFieldError && ( - - {fieldErrorMessage} - - )} -
-
+ -
- setName(e.target.value)} - placeholder="Name" - name="NAME" - className={`leading-input focus:border-purple !shadow-hidden block w-full rounded-lg border border-solid bg-purple-dark py-2 pl-3 pr-8 font-poppins text-sm text-white placeholder:text-gray ${ - nameFieldError ? '' : 'hover:border-purple' - } ${nameFieldError ? 'border-pink' : 'border-lite'}`} - /> - {name && ( - setName('')} - > - ✕ - - )} -
- {nameFieldError && ( - - {fieldErrorMessage} - - )} -
-
-
- setSource(e.target.value)} - placeholder="How did you hear about us" - name="source" - className={`leading-input focus:border-purple !shadow-hidden block w-full rounded-lg border border-solid bg-purple-dark py-2 pl-3 pr-8 font-poppins text-sm text-white placeholder:text-gray ${ - sourceFieldError ? '' : 'hover:border-purple' - } ${sourceFieldError ? 'border-pink' : 'border-lite'}`} - /> - {source && ( - setSource('')} - > - ✕ - - )} -
- {sourceFieldError && ( - - {fieldErrorMessage} - - )} -
+ />
{ } > -
- {formSuccess === false && ( -
- )}
)} diff --git a/terraform/.terraform/modules/lb-http b/terraform/.terraform/modules/lb-http new file mode 160000 index 00000000..d98eb7c9 --- /dev/null +++ b/terraform/.terraform/modules/lb-http @@ -0,0 +1 @@ +Subproject commit d98eb7c9906423940bc73968297378290d8feecd