diff --git a/package-lock.json b/package-lock.json index b3d7a03..850fcc4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,6 +23,7 @@ "react-router-dom": "^7.0.2", "react-slick": "^0.30.3", "slick-carousel": "^1.8.1", + "sweetalert2": "^11.15.10", "swiper": "^11.2.1", "yup": "^1.6.1" }, @@ -5437,6 +5438,16 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/sweetalert2": { + "version": "11.15.10", + "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.15.10.tgz", + "integrity": "sha512-Sjiwcd5mWiz8X0JFkHsso2EPVQHrLCjVv+xR6Ry2LKf4KY6kSi4U5pM0Tgmn1c7SMfkyDqPal2NWqwj6vck8bw==", + "license": "MIT", + "funding": { + "type": "individual", + "url": "https://github.com/sponsors/limonte" + } + }, "node_modules/swiper": { "version": "11.2.1", "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.2.1.tgz", diff --git a/package.json b/package.json index 86d4a7c..a8b8971 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "react-router-dom": "^7.0.2", "react-slick": "^0.30.3", "slick-carousel": "^1.8.1", + "sweetalert2": "^11.15.10", "swiper": "^11.2.1", "yup": "^1.6.1" }, diff --git a/src/components/ContactUs.jsx b/src/components/ContactUs.jsx index 2a0ffa8..8a2f11e 100644 --- a/src/components/ContactUs.jsx +++ b/src/components/ContactUs.jsx @@ -1,30 +1,53 @@ -import React from 'react'; +import Swal from 'sweetalert2'; +import axios from 'axios'; import * as yup from 'yup'; import { yupResolver } from '@hookform/resolvers/yup'; import { useForm } from 'react-hook-form'; +import { Contact_EndPoint } from '../utils/constants'; const ContactUs = () => { const Form_schema = yup .object({ cName: yup .string() - .min(5, 'Name must be at least 5 characters') + .min( + 5, + 'Name must be at least 5 characters', + ) .required('Name is required'), cEmail: yup .string() - .email('Enter a valid email address') + .email( + 'Enter a valid email address', + ) .required('Email is required'), cNumber: yup .number() - .typeError('Phone number must be a number') - .positive('Phone number must be positive') - .integer('Phone number must be an integer') - .required('Phone number is required'), + .typeError( + 'Phone number must be a number', + ) + .positive( + 'Phone number must be positive', + ) + .integer( + 'Phone number must be an integer', + ) + .required( + 'Phone number is required', + ), cMessage: yup .string() - .min(10, 'Message must be at least 10 characters') - .max(100, 'Message must be less than 100 characters') - .required('Message is required'), + .min( + 10, + 'Message must be at least 10 characters', + ) + .max( + 100, + 'Message must be less than 100 characters', + ) + .required( + 'Message is required', + ), }) .required(); @@ -36,49 +59,76 @@ const ContactUs = () => { resolver: yupResolver(Form_schema), }); - let onSubmit = (data) => { - + let onSubmit = async data => { console.log('data', data); + try { + let response = await axios.post( + Contact_EndPoint, + data, + ); + + if (response.data.message) { + Swal.fire({ + icon: 'success', + title: 'Success', + text: response.data.message, + }); + } + // if(response) + + if (response.data.error) { + Swal.fire({ + icon: 'error', + title: 'Oops...', + text: response.data.message, + }); + } + + console.log('response', response); + } catch (error) { + if ( + error.response.error || + error + ) { + Swal.fire({ + icon: 'error', + title: 'Oops...', + text: error.message + ? error.response.data + .message + : 'Something went wrong!', + }); + } + console.error('error', error); + console.error( + 'error response', + error.response.message, + ); + } }; - - return ( -
-
+
+

About Us

-

- Welcome to [Institute Name], - an institution dedicated to - fostering innovation, - knowledge, and personal - growth. Our mission is to - shape tomorrow’s leaders by - offering exceptional - educational opportunities and - encouraging intellectual - exploration. +

+ Welcome to [Institute Name], an institution dedicated to fostering innovation, knowledge, and personal growth. Our mission is to shape tomorrow’s leaders by offering exceptional educational opportunities and encouraging intellectual exploration.

-

+

Location

-

- Welcome to [Institute Name], - an institution dedicated to - fostering innovation, - knowledge, and personal - growth. O +

+ Welcome to [Institute Name], an institution dedicated to fostering innovation, knowledge, and personal growth.

-

+

Our Principle

- Muhammad Muneeb and vice - Principle Sammer Khan + Muhammad Muneeb and vice Principle Sammer Khan

@@ -96,12 +146,12 @@ const ContactUs = () => {

-
+ +

Feel free to ask any query

- Welcome to [Institute Name], an institution dedicated to fostering innovation, @@ -110,46 +160,69 @@ const ContactUs = () => {

- - - - {errors.cName &&

{errors.cName.message}

} + {errors.cName && ( +

+ {errors.cName.message} +

+ )} - {errors.cEmail &&

{errors.cEmail.message}

} + {errors.cEmail && ( +

+ {errors.cEmail.message} +

+ )} + {errors.cNumber && ( +

+ {errors.cNumber.message} +

+ )} -{errors.cNumber &&

{errors.cNumber.message}

} { + let value = + e.target.value; + if (isNaN(value)) { + e.target.value = + value.slice(0, -1); + } + }} + className='border-b p-1 max-[410px]:text-[3vw] text-[0.9vw] mb-[1vh] max-[830px]:text-[2.5vw] w-full border-[#A0A0A0] focus:outline-none' placeholder='Phone Number:' /> - {errors.cMessage &&

{errors.cMessage.message}

} + {errors.cMessage && ( +

+ {errors.cMessage.message} +

+ )} + -
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx index a3299a2..a7f44e1 100644 --- a/src/components/Footer.jsx +++ b/src/components/Footer.jsx @@ -5,7 +5,7 @@ import { Link } from 'react-router-dom'; const Footer = () => { return (