Merge pull request #68 from blockfuselabs/frontend-newsletter-subscription

Implement Newsletter Subscription

Author: Cyberking99

blockfuse-website/services/http.ts

@@ -105,7 +105,7 @@ class BaseUrl {
     }
   }
 
-  async httpPostContactUs(data) {
+  async httpPostContactUs(data: any) {
     try {
       const response = await AxiosInstance.post(routes.CONTACTUS, data);
       console.log("API Response:", response.data);
@@ -116,7 +116,7 @@ class BaseUrl {
     }
   }
 
-  async httpSubmitWeb2Application(formData) {
+  async httpSubmitWeb2Application(formData: any) {
     try {
       const response = await AxiosInstance.post(routes.WEB2, formData, {
         headers: { 'Content-Type': 'multipart/form-data' },
@@ -128,10 +128,10 @@ class BaseUrl {
     }
   }
 
-  async httpSubmitWeb3Application(formData) {
+  async httpSubmitWeb3Application(formData: any) {
     try {
       const response = await AxiosInstance.post(routes.WEB3, formData, {
-        headers: { 'Content-Type': 'multipart/form-data' },
+        headers: { 'Content-Type': 'application/json' },
       });
       return response.data;
     } catch (error) {
@@ -191,6 +191,18 @@ class BaseUrl {
       throw error;
     }
   };
+
+  async httpNewsletterSubscription(formData: any) {
+    try {
+      const response = await AxiosInstance.post(routes.NEWSLETTER, formData, {
+        headers: { 'Content-Type': 'application/json' },
+      });
+      return response;
+    } catch (error) {
+      console.error('Submission error:', error);
+      throw error;
+    }
+  }
 }
 
 export default new BaseUrl();

blockfuse-website/services/routes.ts

@@ -13,5 +13,6 @@ export default Object.freeze({
   TEAMARTICLES: "team/articles",
   CONTACTUS: "/contact-us",
   WEB2: "/web2",
-  WEB3: "/web3"
+  WEB3: "/web3",
+  NEWSLETTER: "/newsletter/"
 });

blockfuse-website/src/App.tsx

@@ -31,6 +31,7 @@ import ScrollToTopButton, { useScrollToTop } from './components/ScrollToTopButto
 
 import { Web3Provider } from "./components/WalletConnect/Web3Provider";
 import { ConnectKitButton } from "connectkit";
+import { ToastContainer } from 'react-toastify';
 
 
 
@@ -43,6 +44,7 @@ function App() {
       <ScrollToTopButton />
     <Router>
     <div className="App noise dark:bg-[#131316] bg-[#fafafa] flex flex-col min-h-screen">
+      <ToastContainer />
       {/* Navbar */}
       <Navbar />
 

blockfuse-website/src/pages/Hero.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { FormEvent, useState } from "react";
 import Button from "../components/Buttons";
 import { MoveRight, ChevronLeft, ChevronRight } from "lucide-react";
 import Imageone from "../assets/images/Frame-10.png";
@@ -12,20 +12,40 @@ import Diamond from "../assets/svgs/diamond.svg";
 import Testimonial from "../assets/images/Frame-3676.png";
 import TestimonialsSection from "../components/TestimonialCarousel";
 import Zigzag from "../assets/svgs/zigzag.svg";
-import useFAQSQuery from "../../hooks/useFaqsQuery";
 import { Helmet } from "react-helmet";
 import  PartnerCarousel from "../components/PartnerCarousel"
-
+import BaseUrl from "../../services/http";
+import { toast } from "react-toastify";
+import { Loader2 } from "lucide-react";
 
 
 const Hero = () => {
   const [email, setEmail] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleSubmit = async() => {
+    setIsSubmitting(true);
+    try {
+      console.log("Subscription submitted:", email);
+      if(!email) {
+        throw new Error("Please submit an email.")
+      }
 
-  const handleSubmit = (e) => {
-    e.preventDefault();
-    console.log("Subscription submitted:", email);
-    setEmail("");
+      const response = await BaseUrl.httpNewsletterSubscription({email});
+      if (response.status === 200 || response.status === 201) {
+        toast.success("You have successfully subscribed to our newsletter.");
+        setEmail("");
+      } else {
+        toast.error(response.statusText);
+      }
+      return;
+    } catch(error) {
+      toast.error(error as any)
+    } finally {
+      setIsSubmitting(false);
+    }
   };
+
   return (
     <>
       <Helmet>
@@ -495,7 +515,7 @@ const Hero = () => {
               </p>
             </div>
 
-            <form onSubmit={handleSubmit} className="space-y-3">
+            <div className="space-y-3">
               <div className="flex justify-center">
                 <input
                   type="email"
@@ -507,17 +527,43 @@ const Hero = () => {
                 />
               </div>
               <div className="flex justify-center">
-                <Button
-                  type="submit"
+                <button
+                  type="button"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    handleSubmit();
+                  }}
+                  className={`
+                    bg-gradient-to-r from-purple-600 to-purple-400
+                    hover:from-purple-700 hover:to-purple-500
+                    text-white
+                    py-3 px-6
+                    w-72
+                    transition-colors
+                    duration-300
+                    ease-in-out
+                    flex 
+                    gap-3
+                    items-center
+                    justify-center
+                  `}
+                  disabled={isSubmitting}
                   style={{
                     width: "100%",
                     maxWidth: "800px",
                   }}
                 >
-                  Subscribe
-                </Button>
+                  {isSubmitting ? (
+                    <>
+                      <Loader2 className="animate-spin duration-300" style={{ animationDuration: '0.5s' }} size={18} />
+                      Submitting
+                    </>
+                  ) : (
+                    "Subscribe"
+                  )}
+                </button>
               </div>
-            </form>
+            </div>
           </div>
         </section>
       </main>