fix: changes to website (#97)

* chore: payment changes

* fix: hero section

* feat: add priority

config/content/payment.js

@@ -17,6 +17,7 @@ export const PaymentContent = {
   warning: 'Note: Registration fee is non-refundable.',
   info: 'Check your details before proceeding to payment.',
   endNote: 'For any queries, contact us at: +91 1234567890',
+  caption: 'Early Bird Registration Fee',
   proceed: 'Proceed to Payment',
   cancel: 'Cancel',
   termsLink: 'https://www.google.com/',

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

src/components/Payment/PaymentCard.jsx

@@ -18,7 +18,8 @@ import Button from '../shared/Button';
 
 const PaymentCard = () => {
   const { userData, token } = useContext(AuthContext);
-  const { title, description, endNote, info, proceed, termsLink, warning } = PaymentContent;
+  const { title, description, endNote, info, proceed, termsLink, warning, caption } =
+    PaymentContent;
   const [agreed, setAgreed] = useState(false);
 
   const api = Api.getInstance();
@@ -67,6 +68,20 @@ const PaymentCard = () => {
       </Consent>
 
       <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'

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 />}

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`

src/components/marginals/Navbar/styles.jsx

@@ -13,7 +13,7 @@ const fadeDown = keyframes`
 `;
 
 export const NavSection = styled.header`
-  position: sticky;
+  position: fixed;
   top: 0;
   width: 100%;
   background-color: #2c2c2ccc;

src/pages/events.js

@@ -74,7 +74,7 @@ const EventPage = () => {
   };
 
   return (
-    <div>
+    <div style={{ marginTop: '100px' }}>
       <TypeSelectWrapper>
         {_eventPage.map(({ type: _type, image, title }) => (
           <TypeSelector onClick={() => handleTypeChange(_type)} key={_type} active={_type === type}>

src/pages/payment.js

@@ -1,9 +1,19 @@
-import React, { useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
+import { navigate } from 'gatsby';
 import { PaymentCard, PrivateRoute, SuccessCard } from '../components';
+import { AuthContext } from '../utils/Auth';
 
 const PaymentPage = () => {
   const [paymentStatus, setPaymentStatus] = useState(false);
+  const { userData } = useContext(AuthContext);
+
+  useEffect(() => {
+    if (!userData) {
+      toast.error('Please register first');
+      navigate('/register');
+    }
+  }, [userData]);
 
   useEffect(() => {
     const params = new URLSearchParams(window.location.search);
@@ -23,16 +33,19 @@ const PaymentPage = () => {
   return (
     <PrivateRoute>
       {/* Payment form here */}
-      <div
-        style={{
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-          justifyContent: 'center',
-        }}
-      >
-        {paymentStatus ? <SuccessCard /> : <PaymentCard />}
-      </div>
+      {userData && (
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            marginTop: '7rem',
+          }}
+        >
+          {paymentStatus ? <SuccessCard /> : <PaymentCard />}
+        </div>
+      )}
     </PrivateRoute>
   );
 };

src/utils/useEvents.js

@@ -12,7 +12,8 @@ const useEvents = (eventName) => {
 
   const events = useMemo(
     () =>
-      data?.data?.filter((event) => event?.status === 'ACTIVE')
+      data?.data
+        ?.filter((event) => event?.status === 'ACTIVE')
         ?.map((event) => {
           const description = JSON.parse(event.description);
           const date = new Date(event.startDate);
@@ -32,9 +33,16 @@ const useEvents = (eventName) => {
             venue: 'LA',
             prizes: event.prizeMoney,
             poster: event.poster ? event.poster : 'TODO://link',
+            priority: event.priority,
           };
         })
-        .sort((a, b) => +a.date - +b.date),
+        // sort by priority and then by date
+        ?.sort((a, b) => {
+          if (a.priority === b.priority) {
+            return a.date - b.date;
+          }
+          return b.priority - a.priority;
+        }),
     [data],
   );