updated

components/layout/Footer.js

 import Image from "next/image";
 import Image from "next/image";
-import React from "react";
+import React, { useState } from "react";
 import { Button } from "react-bootstrap";
 import { Button } from "react-bootstrap";
+import { newsletter } from "../../redux/actions/newsletterAction";
+import { toast } from "react-toastify";
 
 
 const Footer = () => {
 const Footer = () => {
+  const [email, setEmail] = useState('');
+  const [isValidEmail, setIsValidEmail] = useState(true);
+
+  const validateEmail = () => {
+    // Regular expression for email validation
+    const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return regex.test(email);
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (validateEmail()) {
+      // Email is valid, perform your action (e.g., subscribe)
+      const res = await newsletter(email);
+      console.log("res", res.data);
+      // Reset email input field after successful submission
+      setEmail('');
+      setIsValidEmail(true);
+      toast.success("Subscribed successful!");
+    } else {
+      // Email is not valid, show error message or handle as you wish
+      setIsValidEmail(false);
+    }
+  };
   return (
   return (
     <>
     <>
       <footer>
       <footer>
@@ -20,8 +46,12 @@ const Footer = () => {
               <div className="footer-link">
               <div className="footer-link">
                 <h3>VENDOR SIGN UP</h3>
                 <h3>VENDOR SIGN UP</h3>
                 <div className="">
                 <div className="">
-                <Button href="/login/vendor" variant="light me-3">Log In</Button>
-                <Button href="/signup/vendor" variant="primary">Sign Up</Button>
+                  <Button href="/login/vendor" variant="light me-3">
+                    Log In
+                  </Button>
+                  <Button href="/signup/vendor" variant="primary">
+                    Sign Up
+                  </Button>
                 </div>
                 </div>
               </div>
               </div>
             </div>
             </div>
@@ -130,11 +160,26 @@ const Footer = () => {
                 <h3>JOIN OUR COMMUNITY</h3>
                 <h3>JOIN OUR COMMUNITY</h3>
                 <div>Subscribe to gt information, latest news and other interesting offers</div>
                 <div>Subscribe to gt information, latest news and other interesting offers</div>
                 <div className="subscribe">
                 <div className="subscribe">
-                  <form action="">
+                <form onSubmit={handleSubmit}>
                     <div className="row">
                     <div className="row">
                       <div className="col-12">
                       <div className="col-12">
-                            <input id="subscribe" type="text" placeholder="Email Address"/>
-                            <label htmlFor="subscribe"><Button variable="primary">Subscribe </Button></label>
+                        <input
+                          id="subscribe"
+                          onChange={e => {
+                            setEmail(e.target.value);
+                            setIsValidEmail(true);
+                          }}
+                          type="text"
+                          value={email}
+                          placeholder="Email Address"
+                        />
+                        
+                        <label htmlFor="subscribe">
+                          <Button variable="primary" type="submit">Subscribe </Button>
+                        </label>
+                        {!isValidEmail && (
+                              <span style={{ color: 'red' }}>Please enter a valid email address.</span>
+                            )}
                       </div>
                       </div>
                     </div>
                     </div>
                   </form>
                   </form>

redux/actions/newsletterAction.js

+import axios from "axios";
+import qs from "qs";
+import { GET_TESTIMONIAL_FAIL, GET_TESTIMONIAL_REQUEST, GET_TESTIMONIAL_SUCCESS } from "../constants/testimonialConstants";
+
+export const newsletter = async email => {
+  try {
+    console.log("email", email);
+    const config = {
+      headers: {
+        "Content-Type": "application/json"
+      }
+    };
+
+    const data = {
+      data: {
+        email: email
+      }
+    };
+    const response = await axios.post(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/newsletters`, data, config);
+    console.log("response > ", response.data);
+
+    return response.data;
+  } catch (error) {}
+};