Merge branch 'main' into content-and-styling

dscnitrourkela · Oct 15, 2023 · da578bc · da578bc
2 parents 31a8a9a + 4d03d07
commit da578bc
Show file tree

Hide file tree

Showing 20 changed files with 273 additions and 144 deletions.
diff --git a/config/content/AboutUs.js b/config/content/AboutUs.js
@@ -1,6 +1,7 @@
 /* eslint-disable max-len */
 export default {
   title: 'Innovision 2k23',
-  desc: `Innovision stands as one of Eastern India's most prominent technical festivals. It offers an immersive exploration of science and technology, embodying key themes in innovation and advancement. Innovision, entirely driven by the NIT Rourkela student body, provides an expansive platform encompassing competitive events, illuminating guest lectures, hands-on technical workshops, and captivating exhibitions. This dynamic fest beckons technology enthusiasts to display their intelligence and ingenuity. As a collective, these elements contribute to the cultivation of advanced technologies that continually evolve, learn, and interact with their surroundings in ever more sophisticated ways.`,
+  desc: `Innovision stands as one of Eastern India's most prominent technical festivals. It offers an immersive exploration of science and technology, embodying key themes in innovation and advancement. Innovision, entirely driven by the NIT Rourkela student body, provides an expansive platform encompassing competitive events, illuminating guest lectures, hands-on technical workshops, and captivating exhibitions. This dynamic fest beckons technology enthusiasts to display their intelligence and ingenuity. As a collective, these elements contribute to the cultivation of advanced technologies that continually evolve, learn, and interact with their surroundings in ever more sophisticated ways.
+    `,
   link: 'https://www.youtube.com/embed/DrIwRpGM35I',
 };
diff --git a/config/content/Navigation.js b/config/content/Navigation.js
@@ -12,7 +12,7 @@ export default {
     },
     {
       name: 'Events',
-      id: 'events',
+      link: '/events',
     },
     {
       name: 'Sponsors',
@@ -23,4 +23,24 @@ export default {
       id: 'faq',
     },
   ],
+  otherPagesNavItems: [
+    {
+      name: 'Home',
+      link: '/',
+    },
+    {
+      name: 'Events',
+      link: '/events',
+    },
+    {
+      name: 'Register',
+      link: '/register',
+      authenticated: false,
+    },
+    {
+      name: 'Profile',
+      link: '/profile',
+      authenticated: true,
+    },
+  ],
 };
diff --git a/config/content/payment.js b/config/content/payment.js
@@ -4,7 +4,7 @@ export const PaymentDetails = ({ email, name, mobile }) => {
   return {
     purpose: 'INNOVISION 2023 | Registration Fee',
     date: date.toDateString(),
-    amount: 750,
+    amount: 899,
     email,
     buyerName: name,
     phone: mobile,
@@ -16,8 +16,34 @@ export const PaymentContent = {
   description: 'Pay the registration fee to complete your registration.',
   warning: 'Note: Registration fee is non-refundable.',
   info: 'Check your details before proceeding to payment.',
-  endNote: 'For any queries, contact us at: +91 1234567890',
+  endNote: 'For any queries, contact us at: reachus.inno@gmail.com',
+  caption: 'Early Bird Registration Fee',
   proceed: 'Proceed to Payment',
   cancel: 'Cancel',
-  termsLink: 'https://www.google.com/',
+  terms: [
+    {
+      id: 'privacy',
+      term: 'I have read and agree to the ',
+      linkText: 'Privacy Policy',
+      link: 'https://www.google.com',
+    },
+    {
+      id: 'code',
+      term: 'I have read and agree to the ',
+      linkText: 'Code of Conduct',
+      link: 'https://www.google.com',
+    },
+    {
+      id: 'refund',
+      term: 'I have read and agree to the ',
+      linkText: 'Refund Policy',
+      link: 'https://www.google.com',
+    },
+    {
+      id: 'terms',
+      term: 'I have read and agree to the ',
+      linkText: 'Terms and Conditions',
+      link: 'https://www.google.com',
+    },
+  ],
 };
diff --git a/config/content/sponsors.js b/config/content/sponsors.js
@@ -1,9 +1,9 @@
 export default {
   title: 'Past Sponsors',
-  footer: 'Want to sponsor us?',
+  footer: 'Want to sponsor us? ',
   link:
-    'https://docs.google.com/forms/d/e/' +
-    '1FAIpQLSfV6ZclXiO7K5vVWFjR6_ZtqjrQ1HpTQ4-Lk9WAu4VA9PuI_g/viewform?usp=sharing',
+    'https://docs.google.com/forms/d/e/1FAIpQLSfV6ZclXiO7K5vVWFjR6_' +
+    'ZtqjrQ1HpTQ4-Lk9WAu4VA9PuI_g/viewform?usp=sharing',
   id: 'sponsors',
 
   titleSponsor: [

diff --git a/config/content/tempCodeRunnerFile.js b/config/content/tempCodeRunnerFile.js
@@ -0,0 +1,7 @@
+/* eslint-disable max-len */
+export default {
+  title: 'Innovision 2k23',
+  desc: `Innovision stands as one of Eastern India's most prominent technical festivals. It offers an immersive exploration of science and technology, embodying key themes in innovation and advancement. Innovision, entirely driven by the NIT Rourkela student body, provides an expansive platform encompassing competitive events, illuminating guest lectures, hands-on technical workshops, and captivating exhibitions. This dynamic fest beckons technology enthusiasts to display their intelligence and ingenuity. As a collective, these elements contribute to the cultivation of advanced technologies that continually evolve, learn, and interact with their surroundings in ever more sophisticated ways.
+    `,
+  link: 'https://www.youtube.com/embed/DrIwRpGM35I',
+};
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -19,7 +19,7 @@ module.exports = {
         // Add any options here
       },
     },
-    `gatsby-plugin-offline`,
+    // `gatsby-plugin-offline`,
     {
       resolve: `gatsby-plugin-google-analytics`,
       options: {

diff --git a/src/components/EventCard/Card.jsx b/src/components/EventCard/Card.jsx
@@ -81,7 +81,6 @@ const EventCard = ({ event, registered }) => {
               <Circle />
               {time}
               <Circle />
-              {venue}
             </EventTimeVenue>
           </CardTitleContainer>
           <CardTitleContainer>
@@ -118,7 +117,7 @@ const EventCard = ({ event, registered }) => {
             <BackDescription key={id}>{desc}</BackDescription>
           ))}
         </BackDescriptionContainer>
-        <Body2>Contact: {contact?.join(', ')}</Body2>
+        {contact ? <Body2>Contact: {contact?.join(', ')}</Body2> : null}
         <CardButtonContainer>
           <KnowButton text='Back' onClick={bringToFront} />
           <EventRegisterButton

diff --git a/src/components/EventSection/index.jsx b/src/components/EventSection/index.jsx
@@ -6,7 +6,7 @@ import useEvents from '../../utils/useEvents';
 import { _event } from '../../../config/content';
 
 const EventSection = () => {
-  const { events } = useEvents('Technical');
+  const { events } = useEvents();
 
   return (
     <SectionLayout

diff --git a/src/components/HeroSection/HeroButton.jsx b/src/components/HeroSection/HeroButton.jsx
@@ -1,8 +1,10 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import styled from 'styled-components';
+import { navigate } from 'gatsby';
 import Arrow from '../../../images/Arrow.svg';
 import HeroBtnTop from '../../../images/HeroBtnTop.svg';
 import HeroBtnBelow from '../../../images/HeroBtnBelow.svg';
+import { AuthContext } from '../../utils/Auth';
 
 const ButtonTop = styled.div`
   display: flex;
@@ -52,12 +54,37 @@ const ButtonText = styled.div`
   }
 `;
 
+const enumButtonText = {
+  registered: 'Go to Profile',
+  paymentPending: 'Pay Now',
+  notRegistered: 'Register Now',
+};
+
 function HeroButton() {
+  const { userData } = useContext(AuthContext);
+
+  const isRegistered = userData?.rollNumber || userData?.festID?.includes('innovision-2023');
+  const isPaymentPending =
+    !userData?.rollNumber && !userData?.festID?.includes('innovision-2023') && userData?.id;
+
+  let buttonText = enumButtonText.notRegistered;
+  let buttonLink = '/register';
+
+  if (isRegistered) {
+    buttonText = enumButtonText.registered;
+    buttonLink = '/profile';
+  }
+
+  if (isPaymentPending) {
+    buttonText = enumButtonText.paymentPending;
+    buttonLink = '/payment';
+  }
+
   return (
-    <ButtonContainer type='submit'>
+    <ButtonContainer type='submit' onClick={() => navigate(buttonLink)}>
       <ButtonTop>
         <ButtonText>
-          REGISTER NOW
+          {buttonText}
           <img src={Arrow} alt='arrow' className='md:w-[16px]' />
         </ButtonText>
         <img src={HeroBtnTop} alt='Hero-Btn' />

diff --git a/src/components/Payment/PaymentCard.jsx b/src/components/Payment/PaymentCard.jsx
@@ -18,12 +18,23 @@ import Button from '../shared/Button';
 
 const PaymentCard = () => {
   const { userData, token } = useContext(AuthContext);
-  const { title, description, endNote, info, proceed, termsLink, warning } = PaymentContent;
-  const [agreed, setAgreed] = useState(false);
+  const { title, description, endNote, info, proceed, terms, warning, caption } = PaymentContent;
+  const [checkboxValues, setCheckboxValues] = useState(
+    terms.reduce((acc, { id }) => ({ ...acc, [id]: false }), {}),
+  );
 
   const api = Api.getInstance();
   const details = useMemo(() => PaymentDetails(userData), [userData]);
 
+  const handleCheckboxChange = (event) => {
+    const { name, checked } = event.target;
+    setCheckboxValues((prev) => {
+      const newValues = { ...prev };
+      newValues[name] = checked;
+      return newValues;
+    });
+  };
+
   const handlePayment = () => {
     toast.promise(
       api.initiatePayment({
@@ -52,30 +63,52 @@ const PaymentCard = () => {
           </PaymentDetailsListItem>
         ))}
       </PaymentDetailsList>
-      <Consent>
-        <input
-          type='checkbox'
-          id='consent'
-          name='consent'
-          onClick={() => setAgreed((prev) => !prev)}
-          value={agreed}
-        />
-        {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
-        <label htmlFor='consent' aria-label='consent' aria-selected={agreed}>
-          I agree to the <Link to={termsLink}>terms and conditions</Link>
-        </label>
-      </Consent>
+
+      <ul style={{ listStyle: 'none', padding: '0', marginTop: '20px', marginBottom: '20px' }}>
+        {terms.map(({ id, term, linkText, link }) => (
+          <Consent key={id}>
+            <input
+              type='checkbox'
+              id={id}
+              name={id}
+              onClick={handleCheckboxChange}
+              value={checkboxValues[id]}
+            />
+            <label htmlFor={id} aria-label={id} aria-selected={checkboxValues[id]}>
+              {term} <Link to={link}>{linkText}</Link>
+            </label>
+          </Consent>
+        ))}
+      </ul>
 
       <Warning>{warning}</Warning>
+      {/* TODO: Remove afterwards */}
+      <Body2 style={{ margin: '8px', display: 'flex', gap: '8px', justifyContent: 'center' }}>
+        {caption}:<b style={{ textDecoration: 'line-through' }}> ₹1000</b>
+        <b
+          style={{
+            background: 'var(--brand-gradient)',
+            backgroundClip: 'text',
+            WebkitBackgroundClip: 'text',
+            WebkitTextFillColor: 'transparent',
+          }}
+        >
+          ₹750
+        </b>
+      </Body2>
 
       <Button
         type='submit'
         variant='filled'
         text={proceed}
         width='350px'
-        disabled={!agreed}
+        disabled={!Object.values(checkboxValues).every((value) => value)}
         onClick={handlePayment}
-        tooltip={!agreed ? 'Please agree to the terms and conditions' : ''}
+        tooltip={
+          !Object.values(checkboxValues).every((value) => value)
+            ? 'Please agree to the terms and conditions'
+            : ''
+        }
       />
 
       <CaptionText style={{ marginTop: '16px' }}>{endNote}</CaptionText>

diff --git a/src/components/Registration/index.jsx b/src/components/Registration/index.jsx
@@ -15,6 +15,7 @@ const RegistrationSection = () => {
         alignItems: 'center',
         justifyContent: 'center',
         width: '100%',
+        marginTop: '100px',
       }}
     >
       {stage === STAGES.TYPE_OF_USER && <ChoiceStage />}

diff --git a/src/components/UserProfile/styles.js b/src/components/UserProfile/styles.js
@@ -5,6 +5,7 @@ export const DetailWrapper = styled.div`
   ${tw`
     w-[90%]
     mx-[auto]
+    mt-28
   `}
 `;
 export const DetailContainer = styled.div`

diff --git a/src/components/marginals/Navbar/DesktopNav.jsx b/src/components/marginals/Navbar/DesktopNav.jsx
@@ -3,35 +3,16 @@ import React, { useContext } from 'react';
 import { AuthContext } from '../../../utils/Auth';
 import { nav } from '../../../../config/content';
 import Heading4 from '../../shared/Typography/Heading4';
-import { Container, NavText } from '../../shared';
+import { Container } from '../../shared';
 import { NavCenter, NavRight, NavSection, NavWrapper, StyledHamburger } from './styles';
 import { MenuContext } from './MenuContext';
 import Button from '../../shared/Button';
-
-// Function Returning new scroll object
-const newScrollObject = () => {
-  // eslint-disable-next-line
-  const SmoothScroll = require('smooth-scroll');
-  return new SmoothScroll('', {
-    offset: () => 100,
-  });
-};
-
-const handleScroll = (id) => {
-  if (typeof window !== 'undefined' && id) {
-    const isHome = window.location.pathname === '/';
-    if (isHome) {
-      const scroll = newScrollObject();
-      const anchor = document.getElementById(id);
-      scroll.animateScroll(anchor);
-    }
-  }
-};
+import NavList from './NavList';
 
 function DesktopNav() {
   const menuContext = useContext(MenuContext);
-  const { toggleMenuOpen, menuopen } = menuContext;
   const authContext = useContext(AuthContext);
+  const { toggleMenuOpen, menuopen } = menuContext;
   const { authenticated, login, logout } = authContext;
 
   return (
@@ -45,28 +26,12 @@ function DesktopNav() {
           </div>
           <NavCenter>
             <StyledHamburger menuopen={menuopen} onClick={toggleMenuOpen} />
-            <ul className='navLinkList'>
-              {nav.navItems.map(({ id, name, link }) => (
-                <li
-                  key={id}
-                  onClick={() => !link && handleScroll(id)}
-                  onKeyPress={() => !link && handleScroll(id)}
-                  id={name}
-                  role='menuitem'
-                  tabIndex='0'
-                  className='navLinkItem'
-                >
-                  <Link style={{ textDecoration: 'none' }} to={link}>
-                    <NavText className='navLink'>{name}</NavText>
-                  </Link>
-                </li>
-              ))}
-            </ul>
+            <NavList />
           </NavCenter>
           <NavRight>
             <Button
               variant='outline'
-              text={authenticated ? 'logout' : 'Register'}
+              text={authenticated ? 'logout' : 'login'}
               onClick={authenticated ? logout : login}
             />
           </NavRight>