From 54735350b40657a9c877cd2d53136bc07e5533c6 Mon Sep 17 00:00:00 2001 From: Dev Date: Thu, 1 Aug 2024 19:22:11 +0530 Subject: [PATCH] contact us notification --- package-lock.json | 21 ++++++++++ package.json | 1 + src/Components/Contact/Contact.css | 26 ++++++------ src/Components/Contact/Contact.jsx | 63 +++++++++++++++++++++++++----- 4 files changed, 88 insertions(+), 23 deletions(-) diff --git a/package-lock.json b/package-lock.json index 651042e..24efebd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -33,6 +33,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": { @@ -7639,6 +7640,14 @@ "node": ">=6" } }, + "node_modules/clsx": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", + "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", + "engines": { + "node": ">=6" + } + }, "node_modules/co": { "version": "4.6.0", "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz", @@ -18751,6 +18760,18 @@ "react-dom": "^15.5.4 || ^16.0.0 || ^17.0.0 || ^18.0.0" } }, + "node_modules/react-toastify": { + "version": "10.0.5", + "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-10.0.5.tgz", + "integrity": "sha512-mNKt2jBXJg4O7pSdbNUfDdTsK9FIdikfsIE/yUCxbAEXl4HMyJaivrVFcn3Elvt5xvCQYhUZm+hqTIu1UXM3Pw==", + "dependencies": { + "clsx": "^2.1.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + } + }, "node_modules/react-transition-group": { "version": "4.4.5", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", diff --git a/package.json b/package.json index c90b2d4..6427a1a 100644 --- a/package.json +++ b/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": { diff --git a/src/Components/Contact/Contact.css b/src/Components/Contact/Contact.css index eb18be4..e7e34d8 100644 --- a/src/Components/Contact/Contact.css +++ b/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; - } - - + } } diff --git a/src/Components/Contact/Contact.jsx b/src/Components/Contact/Contact.jsx index e43b766..8c691e6 100644 --- a/src/Components/Contact/Contact.jsx +++ b/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 (
+

Send us a message