feat: add registration starting soon modal and fix payment policy modal

src/app/register/RegistrationModal.jsx

@@ -0,0 +1,37 @@
+// RegistrationModal.js
+import { Modal, ModalContent, ModalBody, Button } from '@nextui-org/react';
+import Image from 'next/image';
+import { closeIcon } from '@/config/content/Footer';
+
+export const RegistrationModal = ({ isOpen, onClose }) => {
+  return (
+    <Modal
+      size='sm'
+      isOpen={isOpen}
+      onClose={onClose}
+      backdrop='opaque'
+      hideCloseButton={true}
+      placement='center'
+      className='backdrop-blur-xl border-2 border-green-200'
+    >
+      <ModalContent className='relative bg-[#0000002a] h-[50vh]'>
+        <Button
+          color='danger'
+          variant='light'
+          onPress={onClose}
+          className='absolute top-1 right-0 z-10'
+        >
+          <Image src={closeIcon} alt='close' width={30} height={30} />
+        </Button>
+        <ModalBody className='px-[30px] py-[50px] text-monteserrat h-full flex flex-col justify-center items-center'>
+          <p className='tracking-wider text-center text-[18px] lg:text-[23px]' id='modal-title'>
+            🚀 Coming Soon
+          </p>
+          <p className='text-center tracking-wide text-[14px] lg:text-[21px]'>
+            Stay tuned for exciting updates! Registration will open soon.
+          </p>
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  );
+};

src/app/register/page.jsx

@@ -20,6 +20,7 @@ import { useUserDetails } from '@/hooks/useUserDetails';
 import CampusAmbassador from '@/components/Register/CampusAmbassador/CampusAmbassador';
 import { PrimaryButton } from '@/components/shared/Typography/Buttons';
 import { AuthContext } from '@/context/auth-context';
+import { RegistrationModal } from './RegistrationModal';
 function Page() {
   const [userDetails, setUserDetails] = useState({
     name: '',
@@ -161,10 +162,21 @@ function Page() {
     }
   }
 
+  const [isModalOpen, setModalOpen] = useState(false);
+
+  function handleSubmit() {
+    const isFormValid = validateForm();
+    if (!isFormValid) return;
+    setModalOpen(true);
+    console.log(userDetails);
+  }
+
   return (
     <RegisterContainer>
       <Moon />
-      {isLoggedIn ? (
+
+      {/* //---------------------commented out google auth part--------------------- */}
+      {/* {isLoggedIn ? (
         <RegisterInnerContainer>
           <RegisterHeading>Register</RegisterHeading>
           <RegisterForm>
@@ -185,7 +197,26 @@ function Page() {
         <PrimaryButton onClick={handleGoogleSignIn} disabled={authLoading}>
           {authLoading ? 'Loading...' : 'Sign In with Google'}
         </PrimaryButton>
-      )}
+      )} */}
+      {/* //---------------------commented out google auth part--------------------- */}
+
+      <RegisterInnerContainer>
+        <RegisterHeading>Register</RegisterHeading>
+        <RegisterForm>
+          {formFields.map((field) => {
+            return returnFormFields(field);
+          })}
+        </RegisterForm>
+        <CampusAmbassador
+          handleChange={handleChange}
+          userReferral={userDetails.phone}
+          isCampusAmbassador={userDetails.campusAmbassador}
+        />
+        <RegsiterButton onClick={handleSubmit} disabled={loading}>
+          Submit
+        </RegsiterButton>
+      </RegisterInnerContainer>
+      <RegistrationModal isOpen={isModalOpen} onClose={() => setModalOpen(false)} />
     </RegisterContainer>
   );
 }

src/components/Marginals/Footer/Footer.jsx

@@ -25,29 +25,15 @@ import {
   FooterGradient,
   ListTitle,
   SocialImageContainer,
-  Overlay,
-  Modal,
 } from './styles';
 import { LogoText2 } from '../../shared/Typography/Headings';
-// import { createPortal } from 'react-dom';
 import { PaymentPolicyModal } from './PaymentPolicyModel';
-import { useEffect, useState } from 'react';
-import { createPortal } from 'react-dom';
-// import { Modal } from 'flowbite-react';
+import { useState } from 'react';
 
 export const Footer = () => {
   const [isRegisterModalOpen, setIsRegisterModalOpen] = useState(false);
-  const [modalRoot, setModalRoot] = useState(null);
-
   const handleRegisterModalOpen = () => setIsRegisterModalOpen(true);
   const handleRegisterModalClose = () => setIsRegisterModalOpen(false);
-
-  useEffect(() => {
-    const root = document.getElementById('modal-root');
-    if (root) {
-      setModalRoot(root);
-    }
-  }, []);
   return (
     <>
       <FooterContainer id='contact'>
@@ -123,17 +109,7 @@ export const Footer = () => {
           </FooterBottom>
         </FooterWrapper>
       </FooterContainer>
-
-      {modalRoot &&
-        isRegisterModalOpen &&
-        createPortal(
-          <Overlay>
-            <Modal>
-              <PaymentPolicyModal isClose={handleRegisterModalClose} />
-            </Modal>
-          </Overlay>,
-          modalRoot,
-        )}
+      <PaymentPolicyModal isOpen={isRegisterModalOpen} onClose={handleRegisterModalClose} />
     </>
   );
 };

src/components/Marginals/Footer/PaymentPolicyModel.jsx

@@ -1,15 +1,30 @@
-// import { Modal, Overlay } from '../eventCardComponents/eventCard.style';
-// import { ModalExit, ModalText } from './registerModal.styles';
+import { Modal, ModalContent, ModalBody, Button } from '@nextui-org/react';
+import { closeIcon } from '@/config/content/Footer';
+import Image from 'next/image';
+import { ModalText, Para } from './styles';
 
-// import { Modal } from "flowbite-react";
-import { Paragraph, SmallParagraph } from '../../shared/Typography/Paragraphs';
-import { Modal, ModalExit, ModalText, Overlay, Para } from './styles';
-
-export const PaymentPolicyModal = ({ isClose }) => {
+export const PaymentPolicyModal = ({ isOpen, onClose }) => {
   return (
-    <>
-      <Overlay>
-        <Modal>
+    <Modal
+      size='lg'
+      isOpen={isOpen}
+      onClose={onClose}
+      backdrop='opaque'
+      hideCloseButton={true}
+      placement='center'
+      className='backdrop-blur-2xl border-2 border-[#00FFD1] p-5'
+      scrollBehavior='normal'
+    >
+      <ModalContent className='relative bg-[#0000002a] max-h-[90vh]'>
+        <Button
+          color='danger'
+          variant='light'
+          onPress={onClose}
+          className='absolute top-1 right-0 z-10'
+        >
+          <Image src={closeIcon} alt='close' width={30} height={30} />
+        </Button>
+        <ModalBody className='px-[30px] py-[50px] text-monteserrat h-full flex flex-col justify-center items-center'>
           <ModalText>Pricing</ModalText>
           <Para>
             The registration fees for Innovision 2024 is ₹899 for all the students from outside NIT
@@ -25,11 +40,8 @@ export const PaymentPolicyModal = ({ isClose }) => {
             There will be no refund of the registration fees under any circumstances unless the fest
             is cancelled by team Innovision.
           </Para>
-          <ModalExit className='text-4xl' onClick={isClose}>
-            close
-          </ModalExit>
-        </Modal>
-      </Overlay>
-    </>
+        </ModalBody>
+      </ModalContent>
+    </Modal>
   );
 };