From 87e20f548efb7e7dca624b6bec58caff0296a772 Mon Sep 17 00:00:00 2001 From: Abdulmalik Yusuf <31839174+abdulmalikyusuf@users.noreply.github.com> Date: Wed, 14 Aug 2024 17:44:56 +0100 Subject: [PATCH 1/5] Fix: changed user message received when subscribing to newsletter and handled edge cases. --- src/components/layouts/footer/index.tsx | 167 +++++++++++++----------- 1 file changed, 92 insertions(+), 75 deletions(-) diff --git a/src/components/layouts/footer/index.tsx b/src/components/layouts/footer/index.tsx index 86e44ed5c..b5bcd3564 100644 --- a/src/components/layouts/footer/index.tsx +++ b/src/components/layouts/footer/index.tsx @@ -21,61 +21,62 @@ import { useToast } from "~/components/ui/use-toast"; const Footer = () => { const [email, setEmail] = useState(""); + const [error, setError] = useState(false); const [loading, setLoading] = useState(false); const { toast } = useToast(); // handle submit const handleSubmit = async () => { - setLoading(true); - if (email === "") { - toast({ - title: "Error", - description: "Please provide your email", - variant: "destructive", - }); - setLoading(false); + setError(true); return; } + setLoading(true); - // const payload = { - // email: values, - // }; - - try { - const apiUrl = await getApiUrl(); - const response = await axios.post( - `${apiUrl}/api/v1/newsletter-subscription`, + const apiUrl = await getApiUrl(); + await axios + .post( + `${apiUrl}/api/v1/news-letter`, { email }, { headers: { "Content-Type": "application/json", }, }, - ); - toast({ - title: "Success", - description: response?.data?.message, - variant: "default", - }); - setLoading(false); - setEmail(""); - } catch (error: unknown) { - if (error instanceof Error) { + ) + .then(() => { toast({ - title: "Error", - description: error.message, - variant: "destructive", + title: "Thank you for subscribing!", + description: + "You've successfully joined our newsletter. We're excited to keep you updated with our latest news and offers!", + variant: "default", }); - } else { + setLoading(false); + setEmail(""); + }) + .catch((error) => { + if (error?.response) { + const errorData = error.response.data; + if (errorData.error === "401") { + toast({ + title: "You're already subscribed!", + description: + "It looks like you're already on our list. Thank you for being part of our community!", + variant: "default", + }); + } + setLoading(false); + + return; + } toast({ - title: "Error", - description: "An unknown error occurred", + title: "Oops! Something went wrong.", + description: + "We encountered an issue while trying to subscribe you to our newsletter. Please try again later, or contact support if the problem persists.", variant: "destructive", }); - } - setLoading(false); - } + setLoading(false); + }); }; const footerLinks = [ @@ -155,27 +156,36 @@ const Footer = () => {
Sign Up For Newsletters
-
- setEmail(event.target.value)} - value={email} - /> - - {loading ? ( - - Loading{" "} +
+
+
+ setEmail(event.target.value)} + value={email} + onBlur={() => + email.length === 0 ? setError(true) : setError(false) + } + /> +
+ + {loading ? ( - - ) : ( - "Subscibe" - )} - + ) : ( + "Subscibe" + )} + +
+ {error && ( + + Please provide your email + + )}
@@ -208,27 +218,34 @@ const Footer = () => {
Sign Up For Newsletter
-
- setEmail(event.target.value)} - value={email} - /> - - {loading ? ( - - Loading{" "} +
+
+ setEmail(event.target.value)} + value={email} + onBlur={() => + email.length === 0 ? setError(true) : setError(false) + } + /> + + {loading ? ( - - ) : ( - "Subscibe" - )} - + ) : ( + "Subscibe" + )} + +
+ {error && ( + + Please provide your email + + )}
From 7817f0277c3b100863017d6b283644d3a6f0cd1e Mon Sep 17 00:00:00 2001 From: Abdulmalik Yusuf <31839174+abdulmalikyusuf@users.noreply.github.com> Date: Wed, 14 Aug 2024 17:44:56 +0100 Subject: [PATCH 2/5] Fix: changed user message received when subscribing to newsletter and handled edge cases. --- src/components/layouts/footer/index.tsx | 167 +++++++++++++----------- 1 file changed, 92 insertions(+), 75 deletions(-) diff --git a/src/components/layouts/footer/index.tsx b/src/components/layouts/footer/index.tsx index 86e44ed5c..b5bcd3564 100644 --- a/src/components/layouts/footer/index.tsx +++ b/src/components/layouts/footer/index.tsx @@ -21,61 +21,62 @@ import { useToast } from "~/components/ui/use-toast"; const Footer = () => { const [email, setEmail] = useState(""); + const [error, setError] = useState(false); const [loading, setLoading] = useState(false); const { toast } = useToast(); // handle submit const handleSubmit = async () => { - setLoading(true); - if (email === "") { - toast({ - title: "Error", - description: "Please provide your email", - variant: "destructive", - }); - setLoading(false); + setError(true); return; } + setLoading(true); - // const payload = { - // email: values, - // }; - - try { - const apiUrl = await getApiUrl(); - const response = await axios.post( - `${apiUrl}/api/v1/newsletter-subscription`, + const apiUrl = await getApiUrl(); + await axios + .post( + `${apiUrl}/api/v1/news-letter`, { email }, { headers: { "Content-Type": "application/json", }, }, - ); - toast({ - title: "Success", - description: response?.data?.message, - variant: "default", - }); - setLoading(false); - setEmail(""); - } catch (error: unknown) { - if (error instanceof Error) { + ) + .then(() => { toast({ - title: "Error", - description: error.message, - variant: "destructive", + title: "Thank you for subscribing!", + description: + "You've successfully joined our newsletter. We're excited to keep you updated with our latest news and offers!", + variant: "default", }); - } else { + setLoading(false); + setEmail(""); + }) + .catch((error) => { + if (error?.response) { + const errorData = error.response.data; + if (errorData.error === "401") { + toast({ + title: "You're already subscribed!", + description: + "It looks like you're already on our list. Thank you for being part of our community!", + variant: "default", + }); + } + setLoading(false); + + return; + } toast({ - title: "Error", - description: "An unknown error occurred", + title: "Oops! Something went wrong.", + description: + "We encountered an issue while trying to subscribe you to our newsletter. Please try again later, or contact support if the problem persists.", variant: "destructive", }); - } - setLoading(false); - } + setLoading(false); + }); }; const footerLinks = [ @@ -155,27 +156,36 @@ const Footer = () => {
Sign Up For Newsletters
-
- setEmail(event.target.value)} - value={email} - /> - - {loading ? ( - - Loading{" "} +
+
+
+ setEmail(event.target.value)} + value={email} + onBlur={() => + email.length === 0 ? setError(true) : setError(false) + } + /> +
+ + {loading ? ( - - ) : ( - "Subscibe" - )} - + ) : ( + "Subscibe" + )} + +
+ {error && ( + + Please provide your email + + )}
@@ -208,27 +218,34 @@ const Footer = () => {
Sign Up For Newsletter
-
- setEmail(event.target.value)} - value={email} - /> - - {loading ? ( - - Loading{" "} +
+
+ setEmail(event.target.value)} + value={email} + onBlur={() => + email.length === 0 ? setError(true) : setError(false) + } + /> + + {loading ? ( - - ) : ( - "Subscibe" - )} - + ) : ( + "Subscibe" + )} + +
+ {error && ( + + Please provide your email + + )}
From 272cbe5438a8c33fe29bcf1c81ccbf37c86c2ba4 Mon Sep 17 00:00:00 2001 From: Abdulmalik Yusuf <31839174+abdulmalikyusuf@users.noreply.github.com> Date: Wed, 14 Aug 2024 17:53:19 +0100 Subject: [PATCH 3/5] Fix: changed user message. --- src/components/layouts/footer/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/layouts/footer/index.tsx b/src/components/layouts/footer/index.tsx index b5bcd3564..0252fd9fa 100644 --- a/src/components/layouts/footer/index.tsx +++ b/src/components/layouts/footer/index.tsx @@ -72,7 +72,7 @@ const Footer = () => { toast({ title: "Oops! Something went wrong.", description: - "We encountered an issue while trying to subscribe you to our newsletter. Please try again later, or contact support if the problem persists.", + "We encountered an issue while trying to subscribe you to our newsletter. Check your internet connection or contact support if the problem persists.", variant: "destructive", }); setLoading(false); From 4c2f0a385d80ead7c31f7412bac46d874507070e Mon Sep 17 00:00:00 2001 From: Abdulmalik Yusuf <31839174+abdulmalikyusuf@users.noreply.github.com> Date: Thu, 15 Aug 2024 22:25:23 +0100 Subject: [PATCH 4/5] fix: lint error --- src/components/layouts/footer/index.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/components/layouts/footer/index.tsx b/src/components/layouts/footer/index.tsx index 83da275d4..e19038835 100644 --- a/src/components/layouts/footer/index.tsx +++ b/src/components/layouts/footer/index.tsx @@ -37,7 +37,6 @@ const Footer = () => { // handle submit const handleSubmit = async () => { if (email === "") { - setError(true); toast({ @@ -265,8 +264,6 @@ const Footer = () => { Please provide your email )} - - From 0e5f639704224a0706f040bc7503fda6748502c7 Mon Sep 17 00:00:00 2001 From: Abdulmalik Yusuf <31839174+abdulmalikyusuf@users.noreply.github.com> Date: Fri, 16 Aug 2024 14:43:45 +0100 Subject: [PATCH 5/5] Fix: newsletter subscription endpoint and email validation. --- src/components/layouts/footer/index.tsx | 30 ++++++++++++------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/src/components/layouts/footer/index.tsx b/src/components/layouts/footer/index.tsx index e19038835..57614c79c 100644 --- a/src/components/layouts/footer/index.tsx +++ b/src/components/layouts/footer/index.tsx @@ -32,11 +32,13 @@ const Footer = () => { ? "Veuillez fournir votre e-mail" : locale === "es" ? "Por favor, proporcione su correo electrónico" - : "Please provide your email"; + : "Please provide a valid email"; + + const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + const isValidEmail = (email: string): boolean => emailRegex.test(email); - // handle submit const handleSubmit = async () => { - if (email === "") { + if (!isValidEmail(email)) { setError(true); toast({ @@ -44,8 +46,6 @@ const Footer = () => { description: toastDesc, variant: "destructive", }); - setLoading(false); - return; } setLoading(true); @@ -53,7 +53,7 @@ const Footer = () => { const apiUrl = await getApiUrl(); await axios .post( - `${apiUrl}/api/v1/news-letter`, + `${apiUrl}/api/v1/newsletter-subscription`, { email }, { headers: { @@ -74,25 +74,25 @@ const Footer = () => { .catch((error) => { if (error?.response) { const errorData = error.response.data; - if (errorData.error === "401") { + if (errorData.status_code === 400) { toast({ title: "You're already subscribed!", description: "It looks like you're already on our list. Thank you for being part of our community!", variant: "default", }); + } else { + toast({ + title: "Oops! Something went wrong.", + description: + "We encountered an issue while trying to subscribe you to our newsletter. Check your internet connection or contact support if the problem persists.", + variant: "destructive", + }); + setLoading(false); } setLoading(false); - return; } - toast({ - title: "Oops! Something went wrong.", - description: - "We encountered an issue while trying to subscribe you to our newsletter. Check your internet connection or contact support if the problem persists.", - variant: "destructive", - }); - setLoading(false); }); };