Merge pull request #665 from DevGajjar28/notification

contact us notification

package.json

@@ -34,6 +34,7 @@
  "react-router-dom": "^6.23.1",
  "react-scripts": "^5.0.1",
  "react-scroll": "^1.9.0",
+ "react-toastify": "^10.0.5",
  "styled-components": "^6.1.11"
  },
  "devDependencies": {

src/Components/Contact/Contact.css

@@ -66,11 +66,10 @@
  margin: 20px 0;
 }
 /*Added the hover effct here on submit button */
-.btn-div .btn:hover{
-
+.btn-div .btn:hover {
  display: flex;
- background-color:rgb(111, 111, 160);
- color:white;
+ background-color: rgb(111, 111, 160);
+ color: white;
  justify-content: center;
 }
 
@@ -85,9 +84,9 @@
  width:70vw;
 } */
 
- .btn:hover{
- background-color:rgb(111, 111, 160);
- color:white;
+.btn:hover {
+ background-color: rgb(111, 111, 160);
+ color: white;
 }
 /* Media query for Smart Phone */
 @media (max-width: 600px) {
@@ -134,13 +133,14 @@
  } */
 }
 
+/* ToastStyles.css */
+
 @media (max-width: 370px) {
- .contact-col form{
+ .contact-col form {
  width: 80vw;
- }
- .contact-col form input, .contact-col form textarea{
+ }
+ .contact-col form input,
+ .contact-col form textarea {
  width: 80vw;
- }
-
-
+ }
 }

src/Components/Contact/Contact.jsx

@@ -1,17 +1,21 @@
 import React from "react";
-import "./Contact.css";
-import msg_icon from "../../assets/msg-icon.png";
+import { useSelector } from "react-redux";
+import { Slide, ToastContainer, toast } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+import black_arrow from "../../assets/dark-arrow.png";
+import location_icon from "../../assets/location-icon.png";
 import mail_icon from "../../assets/mail-icon.png";
+import msg_icon from "../../assets/msg-icon.png";
 import phone_icon from "../../assets/phone-icon.png";
-import location_icon from "../../assets/location-icon.png";
 import white_arrow from "../../assets/white-arrow.png";
-import black_arrow from "../../assets/dark-arrow.png";
-import { useSelector } from "react-redux";
+import "./Contact.css";
 
 const Contact = () => {
  const theme = useSelector((state) => state.theme.value) ? "dark" : "light";
- const reversetheme = useSelector((state) => state.theme.value) ? "light" : "dark";
- const arrowImage = theme === 'light' ? white_arrow : black_arrow;
+ const reversetheme = useSelector((state) => state.theme.value)
+ ? "light"
+ : "dark";
+ const arrowImage = theme === "light" ? white_arrow : black_arrow;
  const [emailError, setEmailError] = React.useState("");
 
  const [result, setResult] = React.useState("");
@@ -38,9 +42,9 @@ const Contact = () => {
  const email = formData.get("email");
 
  if (!validateEmail(email)) {
-  setEmailError("Please enter a valid email address.");
-  setResult("");
-  return;
+ setEmailError("Please enter a valid email address.");
+ setResult("");
+ return;
  }
 
  formData.append("access_key", "5759d7fc-28f1-473a-a904-ab8d5f981280");
@@ -54,15 +58,54 @@ const Contact = () => {
 
  if (data.success) {
  setResult("Form Submitted Successfully");
+ toast("✅Form Submitted Successfully!", {
+ position: "top-center",
+ autoClose: 5000,
+ hideProgressBar: false,
+ pauseOnHover: true,
+ draggable: true,
+ progress: undefined,
+ theme: "light",
+ closeButton: false,
+ transition: Slide,
+ className: "custom-toast",
+ bodyClassName: "custom-toast-body",
+ });
  event.target.reset();
  } else {
  console.log("Error", data);
  setResult(data.message);
+ toast.error("🚫 Form Submission Failed!", {
+ position: "top-center",
+ autoClose: 5000,
+ hideProgressBar: false,
+ pauseOnHover: true,
+ draggable: true,
+ progress: undefined,
+ closeButton: false,
+ theme: "light",
+ transition: Slide,
+ className: "custom-toast",
+ bodyClassName: "custom-toast-body",
+ });
  }
  };
 
  return (
  <div className={`contact ${theme}`} id="contact">
+ <ToastContainer
+ position="top-center"
+ autoClose={5000}
+ hideProgressBar={false}
+ newestOnTop={false}
+ rtl={false}
+ pauseOnFocusLoss
+ draggable
+ pauseOnHover
+ closeButton:false
+ theme="light"
+ transition={Slide}
+ />
  <div className="contact-col">
  <h3 className="send">
  Send us a message<img src={msg_icon} alt=""></img>