From 430d23e995046e73473227ee89301c4d43e3cc22 Mon Sep 17 00:00:00 2001 From: Adarsh Date: Fri, 8 Mar 2024 06:21:58 +0000 Subject: [PATCH 1/2] Fixed Mail Validation In Subscribe Newsletter --- components/NewsletterSubscribe.js | 88 ++++++++++++++++++------------- locales/en/common.json | 4 +- package-lock.json | 7 ++- 3 files changed, 58 insertions(+), 41 deletions(-) diff --git a/components/NewsletterSubscribe.js b/components/NewsletterSubscribe.js index 9dd91979325d..1dc3ed5733a0 100644 --- a/components/NewsletterSubscribe.js +++ b/components/NewsletterSubscribe.js @@ -5,6 +5,10 @@ import TextLink from "./typography/TextLink"; import Paragraph from "./typography/Paragraph"; import Loader from "./Loader"; import { useTranslation } from "../lib/i18n"; +import axios from "axios"; +import dotenv from "dotenv"; + +require('dotenv').config(); export default function NewsletterSubscribe({ className = 'p-8 text-center', @@ -19,11 +23,11 @@ export default function NewsletterSubscribe({ const [status, setStatus] = useState("normal"); const { t } = useTranslation('common'); - + const headTextColor = dark ? 'text-white' : '' const paragraphTextColor = dark ? 'text-gray-300' : '' - const handleSubmit = (e) => { + const handleSubmit = async (e) => { setStatus("loading"); e.preventDefault() const data = { @@ -31,21 +35,38 @@ export default function NewsletterSubscribe({ email: email, interest: type } + + // email validation abstract api key here -- + const api_key = ""; - fetch("/.netlify/functions/newsletter_subscription", { - method: "POST", - body: JSON.stringify(data), - headers: { - 'Content-Type': 'application/json', - } - }).then((res) => { - if (res.status === 200) { - setFormStatus("success"); - } else { - setFormStatus("error"); - } - return res.json() - }).then((data) => console.log(data)) + axios.get(`https://emailvalidation.abstractapi.com/v1/?api_key=${api_key}&email=${data.email}`) + .then(res => { + if (res.status === 200) { + if (res.data.deliverability !== "DELIVERABLE") { + setFormStatus("invalid"); + } else { + fetch("/.netlify/functions/newsletter_subscription", { + method: "POST", + body: JSON.stringify(data), + headers: { + 'Content-Type': 'application/json', + } + }).then((res) => { + if (res.status === 200) { + setFormStatus("success"); + } else { + setFormStatus("error"); + } + return res.json() + }).then((data) => console.log(data)) + } + } else { + setFormStatus("error"); + } + }) + .catch(error => { + console.log(error); + }) } const setFormStatus = (formResponse) => { @@ -55,25 +76,7 @@ export default function NewsletterSubscribe({ }, 10000); } - if (status === "success") { - return ( -
- - {t('newsletterCTA.successTitle')} - - - {t('newsletterCTA.subtitle')} - -
- ) - } - - if (status === "error") { + if (status !== "normal") { return (
- {t('newsletterCTA.errorTitle')} - + {status === "success" && t('newsletterCTA.successTitle')} + {status === "error" && t('newsletterCTA.errorTitle')} + {status === "invalid" && t('newsletterCTA.invalidTitle')} + - {t('newsletterCTA.errorSubtitle')}{' '}{t('newsletterCTA.errorLinkText')} + {status === "success" && t('newsletterCTA.subtitle')} + {status === "error" && ( + <> + {t('newsletterCTA.errorSubtitle')}{' '} + {t('newsletterCTA.errorLinkText')} + + )} + {status === "invalid" && t('newsletterCTA.invalidSubtitle')}
) diff --git a/locales/en/common.json b/locales/en/common.json index 28fc28df539d..05701023aabe 100644 --- a/locales/en/common.json +++ b/locales/en/common.json @@ -8,7 +8,9 @@ "successTitle": "Thank you for subscribing!", "errorTitle": "Something went wrong", "errorSubtitle": "Subscription failed, please let us know about it by submitting a bug", - "errorLinkText": "here" + "errorLinkText": "here", + "invalidTitle": "Enter the Correct Email!", + "invalidSubtitle": "Please verify if you have entered the correct email address. If there's a mistake, kindly correct it." }, "newsroomSection": { "title": "Latest news and blogs", diff --git a/package-lock.json b/package-lock.json index ca186ad48fe3..40f7184c62d5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -31,7 +31,7 @@ "axios": "^1.6.0", "clsx": "^1.1.1", "cssnano": "^5.1.12", - "dotenv": "^8.2.0", + "dotenv": "^8.6.0", "fuse.js": "^6.6.2", "googleapis": "^100.0.0", "gray-matter": "^4.0.2", @@ -5190,7 +5190,10 @@ "node_modules/dotenv": { "version": "8.6.0", "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.6.0.tgz", - "integrity": "sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==" + "integrity": "sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==", + "engines": { + "node": ">=10" + } }, "node_modules/ecc-jsbn": { "version": "0.1.2", From 9bdfdc53d44b16d0cb0509d0939da18f8c190759 Mon Sep 17 00:00:00 2001 From: Adarsh Date: Fri, 8 Mar 2024 06:28:17 +0000 Subject: [PATCH 2/2] Removed unnecessary import and async --- components/NewsletterSubscribe.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/components/NewsletterSubscribe.js b/components/NewsletterSubscribe.js index 1dc3ed5733a0..0efe9b5af8ae 100644 --- a/components/NewsletterSubscribe.js +++ b/components/NewsletterSubscribe.js @@ -6,9 +6,6 @@ import Paragraph from "./typography/Paragraph"; import Loader from "./Loader"; import { useTranslation } from "../lib/i18n"; import axios from "axios"; -import dotenv from "dotenv"; - -require('dotenv').config(); export default function NewsletterSubscribe({ className = 'p-8 text-center', @@ -27,7 +24,7 @@ export default function NewsletterSubscribe({ const headTextColor = dark ? 'text-white' : '' const paragraphTextColor = dark ? 'text-gray-300' : '' - const handleSubmit = async (e) => { + const handleSubmit = (e) => { setStatus("loading"); e.preventDefault() const data = {