chore: setup registration

package.json

@@ -55,6 +55,7 @@
     "swiper": "^11.1.14",
     "three": "^0.168.0",
     "twin.macro": "^3.4.1",
+    "uuidv4": "^6.2.13",
     "zod": "^3.23.8"
   },
   "devDependencies": {

src/app/register/page.jsx

@@ -1,39 +1,47 @@
 'use client';
-import { useState, useContext } from 'react';
+import { useContext, useEffect, 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 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 SelectField from '@/components/Register/SelectField/SelectField';
+import { PrimaryButton } from '@/components/shared/Typography/Buttons';
+import { formFields, 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';
+import { REGISTER_USER } from '@/graphql/mutations/userMutations';
+import { useIsLoggedIn } from '@/hooks/useIsLoggedIn';
+import { useUserDetails } from '@/hooks/useUserDetails';
+import handleLoadingAndToast from '@/utils/handleLoadingToast';
+import { uploadToCloudinary } from '@/utils/uploadToCloudinary';
+import { useMutation } from '@apollo/client';
+
 import {
+  Moon,
+  PaymentPolicyInfo,
   RegisterContainer,
   RegisterForm,
   RegisterHeading,
-  RegsiterButton,
   RegisterInnerContainer,
-  Moon,
+  RegsiterButton,
   UndertakingLink,
-  PaymentPolicyInfo,
-  PaymentHeading,
 } from './register.styles';
-import Link from 'next/link';
-import InputField from '@/components/Register/InputField/InputField';
-import SelectField from '@/components/Register/SelectField/SelectField';
-import CheckBox from '@/components/Register/InputCheckBox/CheckBox';
-import FileInput from '@/components/Register/FileInput/FileInput';
-import { formFields, undertakingContent } from '@/config/content/Registration/details';
-import { uploadToCloudinary } from '../../utils/uploadToCloudinary';
-import handleLoadingAndToast from '../../utils/handleLoadingToast';
-import { userSchema } from '@/config/zodd/userDetailsSchema';
-import { useIsLoggedIn } from '@/hooks/useIsLoggedIn';
-import CampusAmbassador from '@/components/Register/CampusAmbassador/CampusAmbassador';
-import { PrimaryButton } from '@/components/shared/Typography/Buttons';
-import { AuthContext } from '@/context/auth-context';
-import { RegistrationModal } from './RegistrationModal';
-import toast from 'react-hot-toast';
-import { QrButton } from '@/components/Register/Qrscanner/QrButton';
 
 function Page() {
   const [userDetails, setUserDetails] = useState({
     name: '',
     email: '',
     phone: '',
     institute: '',
+    instituteId: '',
     university: '',
     rollNumber: '',
     idCard: '',
@@ -43,27 +51,32 @@ function Page() {
     payment: '',
     undertaking: false,
     campusAmbassador: false,
+    payment: '',
   });
-  const [loading, setLoading] = useState(false);
+  const getUserDetails = useUserDetails();
   const [errors, setErrors] = useState({});
   const isLoggedIn = useIsLoggedIn();
-
+  const [loading, setLoading] = useState(false);
   const { handleGoogleSignIn, authLoading } = useContext(AuthContext);
+  const [registerUser] = useMutation(REGISTER_USER);
+  const [registerCollege] = useMutation(REGISTER_ORG);
+  const router = useRouter();
+  const storedUserId = getUserDetails().uid;
 
   async function handleChange(event) {
     const { name, value, type, checked } = event.target;
     if (type === 'file') {
       try {
-        // const imageUrl = await handleLoadingAndToast(
-        //   uploadToCloudinary(event.target.files[0]),
-        //   'Uploading Image...',
-        //   `${name.toUpperCase()} uploaded successfully`,
-        //   `${name.toUpperCase()} upload failed!`,
-        //   setLoading,
-        // );
+        const imageUrl = await handleLoadingAndToast(
+          uploadToCloudinary(event.target.files[0]),
+          'Uploading Image...',
+          `${name.toUpperCase()} uploaded successfully`,
+          `${name.toUpperCase()} upload failed!`,
+          setLoading,
+        );
         setUserDetails((prev) => ({
           ...prev,
-          [name]: 'imageUrl',
+          [name]: imageUrl,
         }));
         setErrors((prev) => ({ ...prev, [name]: '' }));
       } catch (error) {
@@ -83,12 +96,6 @@ function Page() {
     }));
   }
 
-  function handleSubmit() {
-    const isFormValid = validateForm();
-    if (!isFormValid) return;
-    console.log(userDetails);
-  }
-
   function validateForm() {
     const validationResult = userSchema.safeParse(userDetails);
     if (!validationResult.success) {
@@ -151,13 +158,7 @@ function Page() {
             error={errors[field.id]}
           />
         );
-      case 'button':
-        return (
-          <>
-            <PaymentHeading>Payment Section </PaymentHeading>
-            <QrButton label={field.label} />
-          </>
-        );
+
       case 'checkbox':
         return (
           <CheckBox
@@ -174,20 +175,83 @@ function Page() {
     }
   }
 
-  const [isModalOpen, setModalOpen] = useState(true);
-
-  function handleSubmit() {
+  async function handleSubmit() {
     const isFormValid = validateForm();
     if (!isFormValid) return;
-    setModalOpen(true);
-    console.log(userDetails);
+
+    setLoading(true);
+    try {
+      let collegeID;
+      if (!userDetails.instituteId) {
+        const newCollgeDetails = await registerCollege({
+          variables: {
+            orgs: [
+              {
+                logo: userDetails.institute + userDetails.email + v4().slice(0, 8),
+                name: userDetails.institute,
+                orgType: 'MESS',
+                registrations: 0,
+              },
+            ],
+          },
+        });
+
+        collegeID = newCollgeDetails.data.createMultipleOrgs[0].id;
+      }
+
+      const res = await registerUser({
+        variables: {
+          user: {
+            uid: storedUserId,
+            name: userDetails.name,
+            email: userDetails.email,
+            mobile: userDetails.phone,
+            college: userDetails.instituteId ? userDetails.instituteId : collegeID,
+            rollNumber: userDetails.rollNumber,
+            idCard: userDetails.idCard,
+            referredBy: userDetails.referralCode,
+            gender: userDetails.gender,
+            receipt: userDetails.payment,
+            transactionID: 'demo',
+            hasPaid: false,
+          },
+        },
+      });
+      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!',
+        {
+          duration: 5000,
+        },
+      );
+      router.push('/');
+    } catch (error) {
+      console.error(error);
+      toast.error('Registration failed! Please try again');
+    } finally {
+      setLoading(false);
+    }
   }
 
+  useEffect(() => {
+    if (Cookies.get('userDataDB')) {
+      router.push('/');
+      toast.success('You have been already registered!', {
+        duration: 5000,
+      });
+    }
+  }, []);
+
   return (
     <RegisterContainer>
       <Moon />
 
-      {!isLoggedIn ? (
+      {isLoggedIn ? (
         <RegisterInnerContainer>
           <RegisterHeading>Register</RegisterHeading>
           <RegisterForm>
@@ -209,16 +273,14 @@ function Page() {
             isCampusAmbassador={userDetails.campusAmbassador}
           />
           <RegsiterButton onClick={handleSubmit} disabled={loading}>
-            Submit
+            {loading ? 'Loading...' : 'Register'}
           </RegsiterButton>
         </RegisterInnerContainer>
       ) : (
         <PrimaryButton onClick={handleGoogleSignIn} disabled={authLoading}>
           {authLoading ? 'Loading...' : 'Sign In with Google'}
         </PrimaryButton>
       )}
-
-      <RegistrationModal isOpen={isModalOpen} onClose={() => setModalOpen(false)} />
     </RegisterContainer>
   );
 }

src/components/ProfileMenu/ProfileMenu.jsx

@@ -1,26 +1,40 @@
 'use client';
-import { useUserDetails } from '@/hooks/useUserDetails';
+import { useContext, useEffect, useState } from 'react';
+
+import Cookies from 'js-cookie';
+import { usePathname, useRouter } from 'next/navigation';
+import { toast } from 'react-hot-toast';
+
 import { AuthContext } from '@/context/auth-context';
-import { useContext } from 'react';
+import { useUserDetails } from '@/hooks/useUserDetails';
+
 import {
+  CloseButton,
   Container,
+  LogoutButton,
   MenuCard,
-  CloseButton,
-  UserName,
-  UserEmail,
   MenuContent,
   MenuLinks,
-  StyledLink,
-  LogoutButton,
-  menuVariants,
   menuTransition,
+  menuVariants,
   ProfileImage,
+  StyledLink,
+  UserEmail,
+  UserName,
 } from './ProfileMenu.styles';
 
 function ProfileMenu({ handleProfileToggle, handleNavClose }) {
   const { handleSignOut } = useContext(AuthContext);
+  const [isRegistered, setIsRegistered] = useState(false);
   const getUserDetails = useUserDetails();
   const user = getUserDetails();
+  const router = useRouter();
+  const path = usePathname();
+
+  // const { data: userDataInDb } = useSuspenseQuery(
+  //   GET_USER_BY_UID,
+  //   user.uid ? { variables: { uid: user.uid } } : skipToken,
+  // );
 
   const handleLogout = () => {
     handleSignOut();
@@ -33,6 +47,24 @@ function ProfileMenu({ handleProfileToggle, handleNavClose }) {
     handleNavClose(false);
   };
 
+  useEffect(() => {
+    const mongoId = Cookies.get('userDataDB');
+
+    console.log('mongoId:', mongoId);
+    // userDataInDb?.user.data.length > 0;
+    if (mongoId) {
+      if (path === '/register') {
+        toast.success('You are already registered!');
+        router.push('/');
+      }
+      setIsRegistered(true);
+    } else {
+      setIsRegistered(false);
+    }
+
+    // console.log('userDataInDb:', userDataInDb);
+  }, []);
+
   return (
     <Container>
       <MenuCard
@@ -48,9 +80,13 @@ function ProfileMenu({ handleProfileToggle, handleNavClose }) {
           <UserName>{user?.name}</UserName>
           <UserEmail>{user?.email}</UserEmail>
           <MenuLinks>
-            <StyledLink href='/register' onClick={handleProfileToggle}>
-              Complete Your Registration
-            </StyledLink>
+            {isRegistered ? (
+              <p>Your payment is being verified! You will be mailed shortly</p>
+            ) : (
+              <StyledLink href='/register' onClick={handleProfileToggle}>
+                Complete Your Registration
+              </StyledLink>
+            )}
             <LogoutButton onClick={handleLogout}>Logout</LogoutButton>
           </MenuLinks>
         </MenuContent>

src/components/Register/CampusAmbassador/CampusAmbassador.jsx

@@ -1,16 +1,18 @@
-import CheckBox from '../InputCheckBox/CheckBox';
 import {
   beamImage,
-  campusAmbassadorInput,
   campusAbassadorPara,
+  campusAmbassadorInput,
 } from '@/config/content/Registration/details';
+
+import CheckBox from '../InputCheckBox/CheckBox';
 import {
-  Container,
   BeamImage,
-  Title,
-  Description,
   CheckBoxWrapper,
+  Container,
+  Description,
+  Title,
 } from './CampusAmbassador.styles';
+
 function CampusAmbassador({ handleChange, userReferral, isCampusAmbassador }) {
   function isUserRefferalCorrect(referralCode) {
     return referralCode.length === 10 && /^\d+$/.test(String(referralCode));
@@ -38,7 +40,7 @@ function CampusAmbassador({ handleChange, userReferral, isCampusAmbassador }) {
         >
           Your referral code is <strong>{userReferral}</strong>
           <br />
-          <p className='text-sm mt-2'>Use this while referring to your peers.</p>
+          <span className='text-sm mt-2'>Use this while referring to your peers.</span>
         </Description>
       )}
     </Container>