Commit ca8b65e2 by jaymehta
2 parents e9dcc47e 25eaa001
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>
<div className="container-fluid"> <div className="container-fluid">
<div className="row"> <div className="row">
<div className="col-md-9"> <div className="col-md-9">
<div className="footer-logo"> <div className="footer-logo">
<span className="image-container"> <span className="image-container">
<Image layout="fill" className="image img-fluid" alt="" src="/images/Zango-logo-footer.svg" /> <Image layout="fill" className="image img-fluid" alt="" src="/images/Zango-logo-footer.svg" />
</span> </span>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor </div>
</div> </div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor </div> <div className="col-md-3">
</div> <div className="footer-link">
<div className="col-md-3"> <h3>VENDOR SIGN UP</h3>
<div className="footer-link"> <div className="">
<h3>VENDOR SIGN UP</h3> <Button href="/login/vendor" variant="light me-3">
<div className=""> Log In
<Button href="/login/vendor" variant="light me-3">Log In</Button> </Button>
<Button href="/signup/vendor" variant="primary">Sign Up</Button> <Button href="/signup/vendor" variant="primary">
Sign Up
</Button>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> <div className="row">
<div className="row"> <div className="col-12">
<div className="col-12"> <hr />
<hr />
</div>
</div>
<div className="row">
<div className="col-md-3">
<div className="footer-link mtp-0">
<h3>QUICK LINKS</h3>
<ul>
<li>
<a href="/about-us">About Us</a>
</li>
<li>
<a href="/contact-us">Contact Us</a>
</li>
<li>
<a href="">Corporate Programs</a>
</li>
<li>
<a href="">Private Events</a>
</li>
<li>
<a href="">Promo T & Cs</a>
</li>
<li>
<a href="">Gifting</a>
</li>
</ul>
</div> </div>
</div> </div>
<div className="col-md-3"> <div className="row">
<div className="footer-link"> <div className="col-md-3">
<h3>CONTACT </h3> <div className="footer-link mtp-0">
<div className="icon-text"> <h3>QUICK LINKS</h3>
<span className="image-container"> <ul>
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/location.svg" /> <li>
</span> <a href="/about-us">About Us</a>
<div className="text"> </li>
<a href="">Lorem ipsum dolor sit amet</a> <li>
</div> <a href="/contact-us">Contact Us</a>
</li>
<li>
<a href="">Corporate Programs</a>
</li>
<li>
<a href="">Private Events</a>
</li>
<li>
<a href="">Promo T & Cs</a>
</li>
<li>
<a href="">Gifting</a>
</li>
</ul>
</div> </div>
<div className="icon-text"> </div>
<span className="image-container"> <div className="col-md-3">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/email.svg" /> <div className="footer-link">
</span> <h3>CONTACT </h3>
<div className="text"> <div className="icon-text">
<a href="mailTo:zango@gmail.com">zango@gmail.com</a> <span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/location.svg" />
</span>
<div className="text">
<a href="">Lorem ipsum dolor sit amet</a>
</div>
</div> </div>
</div> <div className="icon-text">
<div className="icon-text"> <span className="image-container">
<span className="image-container"> <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/email.svg" />
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/phone-call.svg" /> </span>
</span> <div className="text">
<div className="text"> <a href="mailTo:zango@gmail.com">zango@gmail.com</a>
<a href="">+91-8798798798</a> </div>
</div>
<div className="icon-text">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/phone-call.svg" />
</span>
<div className="text">
<a href="">+91-8798798798</a>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> <div className="col-md-3">
<div className="col-md-3"> <div className="footer-link">
<div className="footer-link"> <h3>HELP</h3>
<h3>HELP</h3> <ul>
<ul> <li>
<li> <a href="/terms-and-conditions">Terms & Policy</a>
<a href="/terms-and-conditions">Terms & Policy</a> </li>
</li> <li>
<li> <a href="/privacy-policy">Privacy Policy</a>
<a href="/privacy-policy">Privacy Policy</a> </li>
</li> <li>
<li> <a href="">Careers</a>
<a href="">Careers</a> </li>
</li> <li>
<li> <a href="">FAQs</a>
<a href="">FAQs</a> </li>
</li> </ul>
</ul> </div>
</div> </div>
</div> <div className="col-md-3">
<div className="col-md-3"> <div className="footer-link mb-3">
<div className="footer-link mb-3"> <h3>FOLLOW US ON</h3>
<h3>FOLLOW US ON</h3> <div className="social-icon">
<div className="social-icon">
<a href=""> <a href="">
<span className="image-container"> <span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/facebook.svg" /> <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/facebook.svg" />
</span> </span>
</a> </a>
<a href=""> <a href="">
<span className="image-container"> <span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/twitter.svg" /> <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/twitter.svg" />
</span> </span>
</a> </a>
<a href=""> <a href="">
<span className="image-container"> <span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/instagram.svg" /> <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/instagram.svg" />
</span> </span>
</a> </a>
</div>
</div> </div>
</div> <div className="footer-link">
<div className="footer-link"> <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 onSubmit={handleSubmit}>
<form action=""> <div className="row">
<div className="row"> <div className="col-12">
<div className="col-12"> <input
<input id="subscribe" type="text" placeholder="Email Address"/> id="subscribe"
<label htmlFor="subscribe"><Button variable="primary">Subscribe </Button></label> onChange={e => {
</div> 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>
</form> </form>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </footer>
</footer> <div className="copyright">
<div className="copyright">
<div className="container"> <div className="container">
<div className="row"> <div className="row">
<div className="col-12"> <div className="col-12">
<div>Copyright © 2024 ZanGO. All Rights Reserved</div> <div>Copyright © 2024 ZanGO. All Rights Reserved</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</> </>
); );
}; };
......
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) {}
};
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!