Merge pull request #2 from dscnitrourkela/main

Feat: add custom fields for Nitr students  (dscnitrourkela#227)

src/app/loading.js

@@ -1,28 +1,6 @@
 'use client';
-import { Container, Message } from '@/components/Loading/loading.styles';
-import { motion, AnimatePresence } from 'framer-motion';
+import Loader from '@/components/Loading/Loader';
 
 export default function Loading() {
-  return (
-    <AnimatePresence>
-      <Container>
-        <motion.span
-          className='loader'
-          initial={{ opacity: 0, scale: 0.5 }}
-          animate={{ opacity: 1, scale: 1 }}
-          exit={{ opacity: 0, scale: 0.5 }}
-          transition={{ duration: 0.5 }}
-        />
-        <Message
-          as={motion.div}
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          exit={{ opacity: 0 }}
-          transition={{ duration: 0.5, delay: 0.2 }}
-        >
-          Loading...
-        </Message>
-      </Container>
-    </AnimatePresence>
-  );
+  return <Loader className={'bg-gray-900'} />;
 }

src/app/register/page.jsx

@@ -1,21 +1,26 @@
 'use client';
-import { useContext, useEffect, useState } from 'react';
+import { useContext, useLayoutEffect, useState } from 'react';
 
 import Cookies from 'js-cookie';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import toast from 'react-hot-toast';
 import { v4 } from 'uuid';
 
-import { MerchantInfo } from '@/components/Register/PaymentComponents/MerchantInfo';
-import { Qr } from '@/components/Register/PaymentComponents/Qr';
 import CampusAmbassador from '@/components/Register/CampusAmbassador/CampusAmbassador';
 import FileInput from '@/components/Register/FileInput/FileInput';
 import CheckBox from '@/components/Register/InputCheckBox/CheckBox';
 import InputField from '@/components/Register/InputField/InputField';
+import { MerchantInfo } from '@/components/Register/PaymentComponents/MerchantInfo';
+import { Qr } from '@/components/Register/PaymentComponents/Qr';
 import SelectField from '@/components/Register/SelectField/SelectField';
 import { PrimaryButton } from '@/components/shared/Typography/Buttons';
-import { formFields, undertakingContent } from '@/config/content/Registration/details';
+import {
+  formFields,
+  nitrID,
+  notNitrFields,
+  undertakingContent,
+} from '@/config/content/Registration/details';
 import { userSchema } from '@/config/zodd/userDetailsSchema';
 import { AuthContext } from '@/context/auth-context';
 import { REGISTER_ORG } from '@/graphql/mutations/organizationMutations';
@@ -27,16 +32,16 @@ import { uploadToCloudinary } from '@/utils/uploadToCloudinary';
 import { useMutation } from '@apollo/client';
 
 import {
+  DisclaimerPara,
   Moon,
+  PaymentHeading,
   PaymentPolicyInfo,
   RegisterContainer,
   RegisterForm,
   RegisterHeading,
   RegisterInnerContainer,
   RegsiterButton,
   UndertakingLink,
-  PaymentHeading,
-  DisclaimerPara,
 } from './register.styles';
 
 function Page() {
@@ -55,7 +60,6 @@ function Page() {
     payment: '',
     undertaking: false,
     campusAmbassador: false,
-    payment: '',
     transactionID: '',
   });
   const getUserDetails = useUserDetails();
@@ -67,6 +71,7 @@ function Page() {
   const [registerCollege] = useMutation(REGISTER_ORG);
   const router = useRouter();
   const storedUserId = getUserDetails().uid;
+  const isNitR = userDetails.instituteId === nitrID;
 
   async function handleChange(event) {
     const { name, value, type, checked } = event.target;
@@ -102,7 +107,19 @@ function Page() {
   }
 
   function validateForm() {
-    const validationResult = userSchema.safeParse(userDetails);
+    let updatedUserDetails = userDetails;
+    if (isNitR) {
+      updatedUserDetails = {
+        ...updatedUserDetails,
+        university: 'NIT Rourkela',
+        transactionID: 'NITR',
+        payment: 'https://www.nitrkl.ac.in/',
+        permission: true,
+        undertaking: true,
+      };
+    }
+
+    const validationResult = userSchema.safeParse(updatedUserDetails);
     if (!validationResult.success) {
       const fieldErrors = validationResult.error.errors.reduce((acc, err) => {
         acc[err.path[0]] = err.message;
@@ -165,15 +182,15 @@ function Page() {
         );
 
       case 'head':
-        return <PaymentHeading>{field.content}</PaymentHeading>;
+        return <PaymentHeading key={field.id}>{field.content}</PaymentHeading>;
 
       case 'title':
-        return <MerchantInfo label={field.label} labelInfo={field.content} />;
+        return <MerchantInfo label={field.label} labelInfo={field.content} key={field.id} />;
       case 'image':
-        return <Qr QrUrl={field.QrUrl} />;
+        return <Qr QrUrl={field.QrUrl} key={field.id} />;
 
       case 'disclaimer':
-        return <DisclaimerPara>{field.content}</DisclaimerPara>;
+        return <DisclaimerPara key={field.id}>{field.content}</DisclaimerPara>;
 
       case 'checkbox':
         return (
@@ -225,38 +242,48 @@ function Page() {
             college: userDetails.instituteId ? userDetails.instituteId : collegeID,
             rollNumber: userDetails.rollNumber,
             idCard: userDetails.idCard,
-            referredBy: userDetails.referralCode,
+            referredBy: isNitR ? null : userDetails.referralCode,
             gender: userDetails.gender,
-            receipt: userDetails.payment,
-            transactionID: userDetails.transactionID,
+            receipt: isNitR ? null : userDetails.payment,
+            transactionID: isNitR ? null : userDetails.transactionID,
             hasPaid: false,
           },
         },
       });
+
+      const newCookies = JSON.parse(Cookies.get('userData'));
+      Cookies.set('userData', JSON.stringify({ ...newCookies, isNitR }), {
+        expires: 7,
+        sameSite: 'strict',
+      });
+
       Cookies.set('userDataDB', res.data.createUser.id, {
         expires: 7,
         sameSite: 'strict',
       });
 
-      console.log(res);
       toast.success(
-        'Registration successful! You will recieve confirmation email within 4-5 days!',
+        isNitR
+          ? 'Registration successful!'
+          : 'Registration successful! You will recieve confirmation email within 4-5 days!',
         {
           duration: 5000,
         },
       );
       setTimeout(() => {
         router.push('/');
-      }, 1000);
+      }, 1300);
     } catch (error) {
       console.error(error);
-      toast.error('Registration failed! Please try again');
+      toast.error('Registration failed! If the issue persists, try logging in again.', {
+        duration: 5000,
+      });
     } finally {
       setLoading(false);
     }
   }
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (Cookies.get('userDataDB')) {
       router.push('/');
       toast.success('You have been already registered!', {
@@ -274,22 +301,33 @@ function Page() {
           <RegisterHeading>Register</RegisterHeading>
           <RegisterForm>
             {formFields.map((field) => {
+              if (isNitR && notNitrFields.includes(field.id)) {
+                return null;
+              }
               return returnFormFields(field);
             })}
           </RegisterForm>
-          <UndertakingLink href={undertakingContent.link} target='_blank'>
-            {undertakingContent.text}
-          </UndertakingLink>
-          <PaymentPolicyInfo>
-            <Link href='/refundPolicy'>Please review the Payment Policy before registering.</Link>
-            <br />
-            NOTE: Registration Fees (₹899)
-          </PaymentPolicyInfo>
-          <CampusAmbassador
-            handleChange={handleChange}
-            userReferral={userDetails.phone}
-            isCampusAmbassador={userDetails.campusAmbassador}
-          />
+
+          {!isNitR && (
+            <>
+              <UndertakingLink href={undertakingContent.link} target='_blank'>
+                {undertakingContent.text}
+              </UndertakingLink>
+              <PaymentPolicyInfo>
+                <Link href='/refundPolicy'>
+                  Please review the Payment Policy before registering.
+                </Link>
+                <br />
+                NOTE: Registration Fees (₹899)
+              </PaymentPolicyInfo>
+              <CampusAmbassador
+                handleChange={handleChange}
+                userReferral={userDetails.phone}
+                isCampusAmbassador={userDetails.campusAmbassador}
+              />
+            </>
+          )}
+
           <RegsiterButton onClick={handleSubmit} disabled={loading}>
             {loading ? 'Loading...' : 'Register'}
           </RegsiterButton>

src/components/HeroSection/Hero.jsx

@@ -1,7 +1,10 @@
 import './Hero.css';
+
+import { motion } from 'framer-motion';
+import Cookies from 'js-cookie';
 import Image from 'next/image';
 import Link from 'next/link';
-import { motion } from 'framer-motion';
+
 import { HeroGreenPrimaryButton, HeroLogoText, HeroPrimaryButton } from './styles';
 
 export const Hero = () => {
@@ -15,12 +18,7 @@ export const Hero = () => {
     visible: { scale: 1, opacity: 1, transition: { duration: 1.2, ease: 'easeOut' } },
   };
 
-  const buttonVariants = {
-    hover: {
-      scale: 1.1,
-      transition: { yoyo: Infinity },
-    },
-  };
+  const isRegistered = Cookies.get('userDataDB');
 
   return (
     <div className='relative h-screen overflow-hidden md:h-[105vh] flex-col justify-center items-center'>
@@ -94,18 +92,16 @@ export const Hero = () => {
           animate={{ opacity: 1 }}
           transition={{ duration: 1, delay: 1 }}
         >
-          <Link href='/register'>
-            <motion.div variants={buttonVariants} whileHover='hover'>
+          {!isRegistered && (
+            <Link href='/register'>
               <HeroPrimaryButton>Register</HeroPrimaryButton>
-            </motion.div>
-          </Link>
+            </Link>
+          )}
           <Link
             href='https://drive.google.com/file/d/1jglpl2SzbmpRc73ML80zREhnpxxQF4qx/view?usp=sharing'
             target='_blank'
           >
-            <motion.div variants={buttonVariants} whileHover='hover'>
-              <HeroGreenPrimaryButton>Brochure</HeroGreenPrimaryButton>
-            </motion.div>
+            <HeroGreenPrimaryButton>Brochure</HeroGreenPrimaryButton>
           </Link>
         </motion.div>
       </motion.div>

src/components/Loading/Loader.jsx

@@ -0,0 +1,32 @@
+'use client';
+import { AnimatePresence, motion } from 'framer-motion';
+
+import { Container, Message } from '@/components/Loading/loading.styles';
+
+function Loader({ className }) {
+  return (
+    <AnimatePresence mode='wait'>
+      <Container className={className}>
+        <motion.span
+          key='loader'
+          className='loader'
+          initial={{ opacity: 0, scale: 0.5 }}
+          animate={{ opacity: 1, scale: 1 }}
+          exit={{ opacity: 0, scale: 0.5 }}
+          transition={{ duration: 0.5 }}
+        />
+        <Message
+          as={motion.div}
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          transition={{ duration: 0.5, delay: 0.2 }}
+        >
+          Loading...
+        </Message>
+      </Container>
+    </AnimatePresence>
+  );
+}
+
+export default Loader;

src/components/Loading/loading.styles.jsx

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 import tw from 'twin.macro';
 
 const Container = styled.div`
-  ${tw`flex flex-col items-center justify-center min-h-screen bg-gray-900 text-gray-100 font-orbitron`}
+  ${tw`flex flex-col items-center justify-center min-h-screen  text-gray-100 font-orbitron`}
 `;
 
 const Message = styled.p`
@@ -13,4 +13,4 @@ const Spinner = styled.span`
   ${tw`w-12 h-12 border-4 border-gray-100 border-t-transparent border-solid rounded-full animate-spin`}
 `;
 
-export { Container, Spinner, Message };
+export { Container, Message, Spinner };