Merge branch 'main' into feat/payment

dscnitrourkela · May 3, 2024 · f309d80 · f309d80
2 parents 97471d6 + bd5f7ad
commit f309d80
Show file tree

Hide file tree

Showing 25 changed files with 386 additions and 215 deletions.
diff --git a/package.json b/package.json
@@ -21,6 +21,8 @@
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-router-dom": "^6.21.3",
+		"react-toastify": "^10.0.5",
+		"smooth-scroll": "^16.1.3",
 		"tailwind-merge": "^2.2.2"
 	},
 	"devDependencies": {

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/index.jsx b/src/app/index.jsx
@@ -4,14 +4,28 @@ import { Routes } from 'react-router-dom';
 import { Route } from 'react-router-dom';
 import Pages from '../pages';
 import { AuthProvider } from '../context/AuthContext';
+import { ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
 
 export default function App() {
 	return (
 		<>
 			<AuthProvider>
+				<ToastContainer
+					position='top-right'
+					autoClose={3000}
+					hideProgressBar={false}
+					newestOnTop={false}
+					closeOnClick
+					rtl={false}
+					pauseOnFocusLoss
+					draggable
+					pauseOnHover
+				/>
 				<Suspense fallback={<PageLoader />}>
 					<Routes>
 						<Route exact path='/' element={<Pages.Home />} />
+						<Route path='/register' element={<Pages.Register />} />
 						<Route path='/play' element={<Pages.Playground />} />
 						<Route path='/payment' element={<Pages.Payment />} />
 					</Routes>

diff --git a/src/components/AboutUs.jsx b/src/components/AboutUs.jsx
@@ -3,8 +3,8 @@ import aboutUsData from '../data/aboutUsData.js';
 
 export default function AboutUs() {
 	return (
-		<section>
-			<div className='container py-6 flex flex-col items-center md:pb-[30px] sm:pb-[51px]'>
+		<>
+			<section className='container py-6 flex flex-col items-center md:pb-[30px] sm:pb-[51px]' id='about'>
 				<Paragraph variant='body2' className='text-center font-semibold'>
 					{aboutUsData.tag1}
 					<br />
@@ -17,7 +17,7 @@ export default function AboutUs() {
 						{aboutUsData.tag3}
 					</Paragraph>
 				</Paragraph>
-			</div>
+			</section>
 
 			<div className='justify-between px-[0px] sm:px-[77px] md:px-[115px] lg:px-[175px] grid grid-cols-1 sm:grid-cols-3 gap-3 pb-[40px] sm:pb-[130px] md:pb-[135px]'>
 				{aboutUsData.lists.map((list, index) => (
@@ -43,6 +43,6 @@ export default function AboutUs() {
 				<span className='font-syne text-left text-base sm:text-3.5xl font-bold mr-[15px]'> {aboutUsData.content2}</span>
 				<img src={aboutUsData.star_img_url} alt='star' className='sm:h-[76px] sm:w-[76px] h-[45px] inline-block align-top' />
 			</Paragraph>
-		</section>
+		</>
 	);
 }
diff --git a/src/components/FaqSection/faq.jsx b/src/components/FaqSection/faq.jsx
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import faqData from '../../config/content/faqData.js';
+import faqData from '../../data/faqData';
 import { PersonalizedText, Heading, Paragraph } from '../shared/index.js';
 
 function FAQ() {
@@ -16,7 +16,7 @@ function FAQ() {
 	};
 
 	return (
-		<div className='md:w-[76%] w-[92%] justify-items-center mt-[10px] mb-[44px] mx-auto'>
+		<section className='md:w-[76%] w-[92%] justify-items-center mt-[10px] mb-[44px] mx-auto' id='faq'>
 			<div className='flex flex-col items-center justify-center mb-[40px]'>
 				<Heading
 					variant='h1'
@@ -56,7 +56,7 @@ function FAQ() {
 					</div>
 				))}
 			</div>
-		</div>
+		</section>
 	);
 }
 

diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx
@@ -2,10 +2,12 @@ import { PersonalizedText, Text } from './shared/typography';
 import { HeroText1 } from './shared/typography';
 import { HeroText2 } from './shared/typography';
 import { imgURLs } from '../data/eventsData';
+import Button from './shared/Button';
+import { Link } from 'react-router-dom';
 
 const Hero = () => {
 	return (
-		<div className='mx-5 lg:mx-14 xl:max-w-[1483px] -z-1 relative'>
+		<section className='lg:mx-14 xl:max-w-[1483px] -z-1 relative p-5 xl:mx-auto' id='hero'>
 			<div className='flex flex-col md:flex-row justify-center items-center min-h-screen gap-20 lg:gap-10'>
 				<div className='w-[100%] md:w-1/2 h-fit'>
 					<div className='flex flex-col justify-end ml-2 text-primary-foreground'>
@@ -16,13 +18,11 @@ const Hero = () => {
 						Lorem Ipsum Dolar <HeroText2 style={{ display: 'inline-block' }}> sit Amet</HeroText2> luyto
 					</HeroText1>
 
-					<button
-						className='px-4 py-2 rounded-md border border-solid border-black bg-orange-500 shadow-button mt-5'
-						style={{
-							boxShadow: '2px 2px 0px 0px #000, 3px 4px 9.2px 0px rgba(222, 222, 222, 0.48) inset',
-						}}>
-						<Text variant='button'>Register Now</Text>
-					</button>
+					<Link to='/register'>
+						<Button variant='primary' size='medium' className='mt-5'>
+							<Text variant='button'>Register Now</Text>
+						</Button>
+					</Link>
 				</div>
 				<div
 					className={`w-[100%] xl:w-1/2 md:w-2/3  flex items-center justify-center relative h-[100%]
@@ -85,7 +85,7 @@ const Hero = () => {
 					</div>
 				</div>
 			</div>
-		</div>
+		</section>
 	);
 };
 export default Hero;
diff --git a/src/components/form/FormContainer.jsx b/src/components/form/FormContainer.jsx
@@ -8,16 +8,23 @@ import { donation, feeCoverage, initialContent, inputContent, lastPartContent }
 import { storeFormData } from '../../firebase/registration';
 import { toCloudinary } from './uploadingFiles';
 import { registrationOptions, branchOptions } from '../../data/formInformation';
-import { redirect } from 'next/navigation';
+
+
+
+import { toast } from 'react-toastify';
+import Button from '../shared/Button';
+
 
 const FormContainer = () => {
 	const { userInfo } = useContext(AuthContext);
-	var [currentUser, userData] = userInfo;
+	const [currentUser, userData] = userInfo;
 
+	const [errorMessage, setErrorMessage] = useState('');
+	const [formData, setFormData] = useState({});
+	const verifiedEmail = currentUser?.email ? true : false;
 	const [isValid, setValid] = useState({
-		recRollNumber: false,
-		name: false,
-		email: false,
+		recRollNumber: true,
+		name: true,
 		country: true,
 		state: true,
 		city: true,
@@ -26,31 +33,31 @@ const FormContainer = () => {
 		regType: true,
 		profileImage: true,
 	});
-	const [isEmpty, setEmpty] = useState({
-		recRollNumber: true,
-		name: true,
-		email: true,
-		country: false,
-		state: false,
-		city: false,
-		prefix: false,
-		mobile: false,
-		regType: false,
-		profileImage: false,
-	});
-	var checkValidity = Object.values(isValid).every(value => value);
-	var checkIfEmpty = Object.values(isEmpty).some(value => value);
 
-	var notAllowed = !checkValidity || checkIfEmpty;
-	const [errorMessage, setErrorMessage] = useState('');
+	const checkValidity = Object.values(isValid).every(value => value) && verifiedEmail;
+	const checkIfEmpty = Object.entries(formData).some(
+		([key, value]) =>
+			value === '' &&
+			inputContent.find(item => {
+				if (Array.isArray(item.id)) {
+					return item.id.includes(key);
+				} else {
+					return item.id === key;
+				}
+			})?.required
+	);
 
-	const [formData, setFormData] = useState({});
+	const notAllowed = !checkValidity || checkIfEmpty;
 
 	const setInputValue = async (key, value, file) => {
 		if (!key) return;
 
 		if (key === 'profileImage') {
-			var imgURL = await toCloudinary(file);
+			const imgURL = await toast.promise(toCloudinary(file), {
+				loading: 'Uploading image...',
+				success: 'Image uploaded successfully',
+				error: 'Error uploading image',
+			});
 			setFormData(prev => ({
 				...prev,
 				profileImage: imgURL,
@@ -67,32 +74,38 @@ const FormContainer = () => {
 		if (userData) {
 			setFormData({
 				uid: currentUser?.uid?.toString() || '',
-				recRollNumber: userData?.rollNumber || '',
-				branch: userData?.branch || '',
+				recRollNumber: userData?.recRollNumber || '',
+				branch: userData?.branch || branchOptions[0],
 				name: userData?.name || '',
-				email: userData?.email || '',
-				county: userData?.county || '',
+				email: currentUser?.email || '',
+				country: userData?.country || '',
 				state: userData?.state || '',
 				city: userData?.city || '',
 				prefix: userData?.prefix || '',
 				mobile: userData?.mobile || '',
-				regType: userData?.regType || '',
+				regType: userData?.regType || registrationOptions[0],
 				profileImage: userData?.profileImage || '',
 				testimonial: userData?.testimonial || '',
-				googlName: currentUser?.name || '',
-				googleMail: currentUser?.email || '',
 			});
 		}
-	}, [userData]);
+	}, [userData, currentUser]);
 
 	const registerUser = async e => {
 		if (notAllowed) {
-			return;
+			toast.error('Please fill all the required fields');
 		}
 		e.preventDefault();
 		try {
-			const documentId = await storeFormData(formData);
-			redirect('/payment');
+
+
+
+
+
+			const documentId = await toast.promise(storeFormData(formData), {
+				loading: 'Registering...',
+				success: 'Registration successful',
+				error: 'Error registering',
+			});
 
 			return documentId;
 		} catch (error) {
@@ -162,7 +175,12 @@ const FormContainer = () => {
 					}}>
 					Choose your Branch
 				</Paragraph>{' '}
-				<DropDown options={branchOptions} key='branch' onChange={e => setInputValue('branch', e.target.value)} />
+				<DropDown
+					options={branchOptions}
+					key='branch'
+					onChange={e => setInputValue('branch', e.target.value)}
+					value={formData.branch}
+				/>
 				{inputContent.map(item => (
 					<React.Fragment key={item.key}>
 						<Paragraph
@@ -183,15 +201,17 @@ const FormContainer = () => {
 									className='inline mr-3 w-[31.3%]'
 									onChange={e => setInputValue(id, e.target.value, e.target.validated)}
 									validated={setValid}
-									checkEmpty={setEmpty}
 									errormsg={setErrorMessage}
 									formData={{
 										type: item.type[idx],
 										minLength: item.minLength[idx],
 										maxLength: item.maxLength[idx],
 										regex: item.regex[idx],
+										value: item.type[idx] === 'number' ? parseInt(formData[id]) : formData[id] || '',
 										id: id,
-										placeholder: formData?.id || item.placeholder[idx],
+										placeholder: item.placeholder[idx],
+										disabled: item.id === 'email' && verifiedEmail ? true : false,
+										verified: verifiedEmail,
 									}}
 								/>
 							))
@@ -202,7 +222,6 @@ const FormContainer = () => {
 									setInputValue(item.id, e.target.value, e.target.files ? e.target.files[0] : null, e.target.validated)
 								}
 								validated={setValid}
-								checkEmpty={setEmpty}
 								errormsg={setErrorMessage}
 								formData={{
 									type: item.type,
@@ -211,6 +230,9 @@ const FormContainer = () => {
 									regex: item.regex,
 									id: item.id,
 									placeholder: item.placeholder,
+									value: formData[item.id],
+									verified: verifiedEmail,
+									disabled: item.id === 'email' && verifiedEmail ? true : false,
 								}}
 								required={item.required}
 							/>
@@ -227,7 +249,12 @@ const FormContainer = () => {
 					}}>
 					Registration Type
 				</Paragraph>{' '}
-				<DropDown options={registrationOptions} key='regType' onChange={e => setInputValue('regType', e.target.value)} />
+				<DropDown
+					options={registrationOptions}
+					key='regType'
+					onChange={e => setInputValue('regType', e.target.value)}
+					value={formData.regType}
+				/>
 				<Paragraph
 					variant='body2'
 					className=' shadow-white px-2'
@@ -242,17 +269,22 @@ const FormContainer = () => {
 				<Paragraph variant='body3' className='mb-6 mt-10 text-xl'>
 					{lastPartContent}
 				</Paragraph>
-				<button
-					{...(notAllowed ? 'disabled' : '')}
+				<Button
+					variant={'primary'}
+					onClick={registerUser}
+					disabled={notAllowed}
 					className={
-						'bg-[#FF7647] text-black rounded-md p-2 mt-6 w-[100%]' + (notAllowed ? ' cursor-not-allowed, bg-[#80584a]' : '')
+						'bg-[#FF7647] text-black rounded-md p-2 mt-6 w-[100%]' + (notAllowed ? ' cursor-not-allowed bg-[#715d56]' : '')
 					}
 					style={{ boxShadow: '2px 2px 0px 0px #FFF6F6' }}>
-					{' '}
-					<Paragraph variant='body3' className='inline mx-auto text-xl' onClick={registerUser}>
-						Register Now
+					<Paragraph variant='body3' className='inline mx-auto text-xl'>
+						{notAllowed
+							? 'Please fill all the required fields'
+							: userInfo[1].recRollNumber
+								? 'Update your details'
+								: 'Register'}
 					</Paragraph>
-				</button>
+				</Button>
 				{notAllowed ? (
 					<Paragraph variant='body3' className='my-2 text-red-600'>
 						{errorMessage}