From a8569e7131b802b528e812e64bfe72e66319c48e Mon Sep 17 00:00:00 2001 From: Dev Date: Thu, 20 Jun 2024 18:06:00 +0530 Subject: [PATCH] notification on sumbit --- package-lock.json | 36 +++++++++++++++++ package.json | 1 + .../footer_section/ContactUs/contact_us.js | 39 ++++++++++++++++++- yarn.lock | 16 +++++++- 4 files changed, 88 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index 3dd64fc7..0462eb9b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -28,6 +28,7 @@ "react-icons": "^5.2.1", "react-router-dom": "^6.23.1", "react-scripts": "5.0.1", + "react-toastify": "^8.0.0", "styled-components": "^6.1.11", "web-vitals": "^4.1.1" } @@ -18684,6 +18685,26 @@ "node": ">=10" } }, + "node_modules/react-toastify": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-8.0.0.tgz", + "integrity": "sha512-7a5uhwbJ5Ivp5QyJN8P9M8g+7wksJt51QuYAZW0c3pDOh0Jx8lH7XzNHzzJg4NHup9n4zcqH9rwXknnyzYg2OA==", + "dependencies": { + "clsx": "^1.1.1" + }, + "peerDependencies": { + "react": ">=16", + "react-dom": ">=16" + } + }, + "node_modules/react-toastify/node_modules/clsx": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz", + "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==", + "engines": { + "node": ">=6" + } + }, "node_modules/react-transition-group": { "version": "4.4.5", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", @@ -35343,6 +35364,21 @@ } } }, + "react-toastify": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-8.0.0.tgz", + "integrity": "sha512-7a5uhwbJ5Ivp5QyJN8P9M8g+7wksJt51QuYAZW0c3pDOh0Jx8lH7XzNHzzJg4NHup9n4zcqH9rwXknnyzYg2OA==", + "requires": { + "clsx": "^1.1.1" + }, + "dependencies": { + "clsx": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz", + "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==" + } + } + }, "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 fe6411ba..255f8f88 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "react-icons": "^5.2.1", "react-router-dom": "^6.23.1", "react-scripts": "5.0.1", + "react-toastify": "^8.0.0", "styled-components": "^6.1.11", "web-vitals": "^4.1.1" }, diff --git a/src/Components/footer_section/ContactUs/contact_us.js b/src/Components/footer_section/ContactUs/contact_us.js index 0406f5de..cd3e03db 100644 --- a/src/Components/footer_section/ContactUs/contact_us.js +++ b/src/Components/footer_section/ContactUs/contact_us.js @@ -2,8 +2,30 @@ import './contact_us.css'; import React from 'react'; import { Link } from 'react-router-dom'; import homeIcon from '../../../img/homeicon.png'; +import { ToastContainer, toast, Bounce } from 'react-toastify'; +import 'react-toastify/dist/ReactToastify.css'; + function ContactUs() { + const handleSubmit = (event) => { + event.preventDefault(); + // Perform form validation or any other logic here + + // Show success toast notification + toast.success('Sent Successfully!', { + position: "top-center", + autoClose: 5000, + hideProgressBar: false, + closeOnClick: true, + pauseOnHover: false, + draggable: true, + progress: undefined, + theme: "dark", + transition: Bounce, + }); + } + + return (
@@ -44,7 +66,7 @@ function ContactUs() {

Facing any Issue? Help Us Improve!

Use the form below to get in touch. We attempt to respond to support requests within 1 business day.

-
+ @@ -56,13 +78,26 @@ function ContactUs() { - +
+ ); } diff --git a/yarn.lock b/yarn.lock index 0e991126..ab4669b6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4268,6 +4268,11 @@ cliui@^8.0.1: strip-ansi "^6.0.1" wrap-ansi "^7.0.0" +clsx@^1.1.1: + version "1.2.1" + resolved "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz" + integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg== + clsx@^2.1.0: version "2.1.1" resolved "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz" @@ -9330,7 +9335,7 @@ react-dev-utils@^12.0.1: strip-ansi "^6.0.1" text-table "^0.2.0" -react-dom@*, "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom@^17.0.0 || ^18.0.0", react-dom@^17.0.2, "react-dom@>= 16.8.0", react-dom@>=16.6.0, react-dom@>=16.8, react-dom@>=16.8.0: +react-dom@*, "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom@^17.0.0 || ^18.0.0", react-dom@^17.0.2, "react-dom@>= 16.8.0", react-dom@>=16, react-dom@>=16.6.0, react-dom@>=16.8, react-dom@>=16.8.0: version "17.0.2" resolved "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz" integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA== @@ -9449,6 +9454,13 @@ react-scripts@5.0.1: optionalDependencies: fsevents "^2.3.2" +react-toastify@^8.0.0: + version "8.0.0" + resolved "https://registry.npmjs.org/react-toastify/-/react-toastify-8.0.0.tgz" + integrity sha512-7a5uhwbJ5Ivp5QyJN8P9M8g+7wksJt51QuYAZW0c3pDOh0Jx8lH7XzNHzzJg4NHup9n4zcqH9rwXknnyzYg2OA== + dependencies: + clsx "^1.1.1" + react-transition-group@^4.4.5: version "4.4.5" resolved "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz" @@ -9459,7 +9471,7 @@ react-transition-group@^4.4.5: loose-envify "^1.4.0" prop-types "^15.6.2" -react@*, "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^17.0.0 || ^18.0.0", react@^17.0.2, "react@>= 16", "react@>= 16.8.0", react@>=16.3, react@>=16.6.0, react@>=16.8, react@>=16.8.0, react@17.0.2: +react@*, "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^17.0.0 || ^18.0.0", react@^17.0.2, "react@>= 16", "react@>= 16.8.0", react@>=16, react@>=16.3, react@>=16.6.0, react@>=16.8, react@>=16.8.0, react@17.0.2: version "17.0.2" resolved "https://registry.npmjs.org/react/-/react-17.0.2.tgz" integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==