From c7d0c763b81f9dc53d321b83dd00bd7d3646609e Mon Sep 17 00:00:00 2001 From: miguelcruz-am <163028971+miguelcruz-am@users.noreply.github.com> Date: Wed, 10 Jul 2024 19:05:09 +0100 Subject: [PATCH] Create pricing-form.js --- pricing-form.js | 140 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 140 insertions(+) create mode 100644 pricing-form.js diff --git a/pricing-form.js b/pricing-form.js new file mode 100644 index 0000000..fa71aa0 --- /dev/null +++ b/pricing-form.js @@ -0,0 +1,140 @@ +console.log("pricing"); +const delay = (ms) => new Promise((res) => setTimeout(res, ms)); + +document.addEventListener("DOMContentLoaded", () => { + (function (windowRef, documentRef, fileLocation, functionName) { + (function () { + let isSubmitting = false; + // Attaching BookIt process to your form submit button + const attachToForm = () => { + let registered = false; + console.log("Attempting to attach to form"); + const myForm = document.querySelector("#pricing-startup-form"); + if (myForm != null) { + registered = true; + // TODO: Verify selector below + myForm + .querySelector('input[type="submit"]') + .addEventListener("click", async (event) => { + if (!isSubmitting) { + event.preventDefault(); + + const isFormValid = myForm.checkValidity(); + + if (!isFormValid) { + myForm.reportValidity(); + return; + } + + const invalidDomains = [ + "gmail.", + "yahoo.", + "hotmail.", + "outlook.", + "msn.", + "icloud.", + "mail.", + "aol.", + "qq.", + ]; + + // validate email field + // get the email field + const email = document.querySelector("#email-startup"); + // split email at '@' character to get domain + let emailValue = email.value; + let domainPart = emailValue.split("@")[1] || ""; + + // convert the domain to lowercase before comparing, just in case the user typed it in caps + domainPart = domainPart.toLowerCase(); + // check if the domain starts with any invalid domain + let isInvalid = invalidDomains.some((invalidDomain) => + domainPart.startsWith(invalidDomain) + ); + + // if the domain exists in the invalidDomains array + if (isInvalid) { + // add the 'has-error' class to show the error message + email.classList.add("has-error"); + // focus the email field + email.focus(); + email.addEventListener("input", () => { + // remove error message when user restarts typing + email.classList.remove("has-error"); + document.querySelector(".no-pea-message").style.display = "none"; + }); + document.querySelector(".no-pea-message").style.display = "block"; + + // prevent form submission + return false; + } else { + // else if email is not invalid + const loadingScreen = document.querySelector(".loading-screen"); + const emailErrorMsg = document.querySelector(".email-form-error-message"); + loadingScreen.style.display = "flex"; + loadingScreen.style.opacity = 1; + emailErrorMsg.style.display = "none"; + email.classList.remove("has-error"); + setTimeout( + () => (loadingScreen.querySelector(".loading-text").style.opacity = 0.5), + 2000 + ); + + // remove the 'no-pea-message' class and hide the error message + document.querySelector(".no-pea-message").style.display = "none"; + + let data = null; + let emailStatus = null; + + try { + // make a POST fetch request to validate the email + const response = await fetch( + "https://app.amplemarket.com/api/v1/amplemarket_inbounds/validate_email", + { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ email: email.value }), + } + ); + // get the JSON response + data = await response.json(); + emailStatus = data?.status; + + // if the request returns a 400 status or a "valid"=false response, don't proceed any further + if (response.status === 400 || data?.valid === false) { + loadingScreen.style.display = "none"; + // set the error message + emailErrorMsg.style.display = "block"; + email.classList.add("has-error"); + // focus the email field + email.focus(); + email.addEventListener("input", () => { + // remove error message when user restarts typing + email.classList.remove("has-error"); + emailErrorMsg.style.display = "none"; + }); + return false; + } + } catch (error) { + console.log(error); + } + } + } else { + isSubmitting = false; + } + }); + } + if (!registered) { + setTimeout(() => { + attachToForm(); + }, 1000); + } + }; + + // Call the function to attach to the form + attachToForm(); + })(); + })(window, document, '', ''); +});