chore: added edp and check to see before register

src/components/events/EventCard.jsx

@@ -21,6 +21,7 @@ import { useState } from 'react'
 import { seeMoreIcon } from '../../config'
 import { RegisteredEventModal } from './RegisteredEventModal'
 import { createPortal } from 'react-dom'
+import { toast } from 'react-toastify'
 
 EventCard.propTypes = {
   event: PropTypes.shape({
@@ -34,14 +35,16 @@ EventCard.propTypes = {
   }),
   handleSelectEvent: PropTypes.func,
   handleRegisterEvent: PropTypes.func,
-  registeredEvent: PropTypes.any
+  registeredEvent: PropTypes.any,
+  mongoId: PropTypes.string
 }
 
 export default function EventCard({
   event: { poster, id, name, subHeading, description, rules, isTeamEvent },
   handleSelectEvent,
   handleRegisterEvent,
-  registeredEvent
+  registeredEvent,
+  mongoId
 }) {
   const [openModal, setOpenModal] = useState(false)
   function genDetails(str, length) {
@@ -61,6 +64,14 @@ export default function EventCard({
     setOpenModal(true)
   }
 
+  function handleClick(id) {
+    if (!mongoId) {
+      toast.error('Please login to register for the event')
+      return
+    }
+    handleRegisterEvent(id)
+  }
+
   const overlay = document.getElementById('overlay')
 
   return (
@@ -72,6 +83,7 @@ export default function EventCard({
             isTeamEvent={isTeamEvent}
             eventId={id}
             registerdEvent={registeredEvent}
+            eventName={name}
           />
         ),
         overlay
@@ -111,7 +123,7 @@ export default function EventCard({
             <CardFooter>
               <ButtonRules onClick={redirectToRules}>Rulebook</ButtonRules>
               {!registeredEvent ? (
-                <Button onClick={() => handleRegisterEvent(id)}>Register</Button>
+                <Button onClick={() => handleClick(id)}>Register</Button>
               ) : (
                 <Button onClick={handleRegisteredEvents}>Registered</Button>
               )}

src/components/events/Events.jsx

@@ -182,6 +182,7 @@ export default function Events() {
             handleRegisterEvent={handleRegisterModalOpen}
             handlerFlagshipEvent={handleFlagshipCardModalOpen}
             swiperRef={swiperRef}
+            mongoId={mongoId}
           />
           <Arrow src={nextArrowIcon} alt="Next" onClick={handleNext} />
         </Section>

src/components/events/EventsWrapper.jsx

@@ -14,7 +14,8 @@ function EventsWrapper({
   handleSelectEvent,
   swiperRef,
   handleRegisterEvent,
-  handlerFlagshipEvent
+  handlerFlagshipEvent,
+  mongoId
 }) {
   useEffect(() => {
     if (swiperRef.current) {
@@ -63,6 +64,7 @@ function EventsWrapper({
                 event={event}
                 handleSelectEvent={handleSelectEvent}
                 handleRegisterEvent={handleRegisterEvent}
+                mongoId={mongoId}
               />
             </SwiperSlide>
           )
@@ -82,7 +84,8 @@ EventsWrapper.propTypes = {
   handleRegisterEvent: PropTypes.func.isRequired,
   handlerFlagshipEvent: PropTypes.func.isRequired,
   swiperRef: PropTypes.object.isRequired,
-  combinedArray: PropTypes.array
+  combinedArray: PropTypes.array,
+  mongoId: PropTypes.string
 }
 
 export default EventsWrapper

src/components/events/RegisteredEventModal.jsx

@@ -1,3 +1,4 @@
+import { edpEvents, edpLink } from '../../config/content/events/events'
 import {
   Button,
   ModalContainer,
@@ -6,21 +7,24 @@ import {
   TextContent,
   TextHead,
   TextHead1,
-  TextContainer2
+  TextContainer2,
+  EventName
 } from './registeredEventModal.styles'
 import { Container } from './registerModal.style'
 import PropTypes from 'prop-types'
 
-export const RegisteredEventModal = ({ closeModal, isTeamEvent, registerdEvent }) => {
+export const RegisteredEventModal = ({ closeModal, isTeamEvent, registerdEvent, eventName }) => {
+  const doesContainEDP = edpEvents.includes(eventName)
   return (
     <Container>
       <Section>
         <Button onClick={closeModal}>Back</Button>
         <ModalContainer>
+          <EventName>{eventName}</EventName>
           {isTeamEvent ? (
             <div>
               <TextContainer2>
-                <TextHead1>TeamName:&nbsp;</TextHead1>
+                <TextHead1>Team Name:&nbsp;</TextHead1>
                 {registerdEvent.teamName}
               </TextContainer2>
               {registerdEvent.users.map((user, index) => (
@@ -31,10 +35,19 @@ export const RegisteredEventModal = ({ closeModal, isTeamEvent, registerdEvent }
                   </TextContainer>
                 </div>
               ))}
+
+              {doesContainEDP && (
+                <TextContainer>
+                  <TextHead>Submit your EDPs here: </TextHead>
+                  <a href={edpLink} target="_blank" rel="noreferrer">
+                    Link
+                  </a>
+                </TextContainer>
+              )}
             </div>
           ) : (
             <TextContainer>
-              <TextContent>Congratulations you have registered!</TextContent>
+              <TextContent>Congratulations, you have registered!</TextContent>
             </TextContainer>
           )}
         </ModalContainer>
@@ -46,6 +59,6 @@ export const RegisteredEventModal = ({ closeModal, isTeamEvent, registerdEvent }
 RegisteredEventModal.propTypes = {
   closeModal: PropTypes.func.isRequired,
   isTeamEvent: PropTypes.bool.isRequired,
-  eventId: PropTypes.string.isRequired,
-  registerdEvent: PropTypes.any
+  registerdEvent: PropTypes.any,
+  eventName: PropTypes.string
 }

src/components/events/TeamEventModal.jsx

@@ -221,13 +221,8 @@ export const TeamEventModal = ({ EventId, EventTitle, hasPdfUpload, mongoId }) =
 
           {hasPdfUpload && (
             <InputContainer1>
-              <TextHead className="text-lg font-bold">Upload PDF</TextHead>
-              <FileUpload
-                type="file"
-                placeholder="Upload PDF here"
-                onChange={handleFileChange}
-                accept="application/pdf"
-              />
+              <TextHead className="text-lg font-bold">Submit your abstracts here</TextHead>
+              <FileUpload type="file" onChange={handleFileChange} accept="application/pdf" />
             </InputContainer1>
           )}
 

src/components/events/registeredEventModal.styles.jsx

@@ -1,35 +1,39 @@
 import tw from 'twin.macro'
 import styled from 'styled-components'
 
+// Styled Components
 export const Section = styled.section`
-  ${tw`  bg-[#402E32] border-4 border-black-1 relative max-w-[600px] w-full rounded-[23.06px] font-Poppins max-h-[100vh] h-auto overflow-y-auto `}
+  ${tw`bg-[#402E32] border-4 border-black-1 relative max-w-full w-full md:max-w-[600px] rounded-[23.06px] font-Poppins max-h-[100vh] h-auto overflow-y-auto p-4 md:p-6`}
 `
 
 export const ModalContainer = styled.div`
-  ${tw`p-6 flex flex-col gap-10 justify-center text-[64px] font-bold `}
+  ${tw`flex flex-col gap-6 md:gap-10 justify-center text-4xl md:text-[64px] font-bold`}
+`
+
+export const EventName = styled.h1`
+  ${tw`text-2xl md:text-[40px] mt-10 text-[#FF8911] font-semibold w-full text-center`}
 `
 
 export const TextContainer = styled.div`
-  ${tw`text-[20px] mb-4 text-[#FF8911] font-semibold flex  gap-2 capitalize`}
+  ${tw`text-lg md:text-[20px] mb-4 text-[#FF8911] font-semibold flex gap-2 capitalize`}
 `
+
 export const TextContainer2 = styled(TextContainer)`
-  ${tw`text-[26px] underline`}
+  ${tw`text-xl md:text-[26px] underline`}
 `
+
 export const TextHead = styled.div`
-  ${tw`text-[20px] text-[#FFEEDA] font-normal flex gap-2 `}
+  ${tw`text-lg md:text-[20px] text-[#FFEEDA] font-normal flex gap-2`}
 `
+
 export const TextHead1 = styled(TextHead)`
-  ${tw`text-[26px] underline`}
+  ${tw`text-xl md:text-[26px] underline`}
 `
 
 export const TextContent = styled.h1`
-  ${tw`text-[20px] text-[#FFEEDA] font-semibold w-full text-center`}
+  ${tw`text-lg md:text-[20px] text-[#FFEEDA] font-semibold w-full text-center`}
 `
 
 export const Button = styled.button`
-  ${tw`p-1 w-[20%]
-
-
-   mt-6 ml-6 mr-6  rounded-[11.53px] bg-orange-1 text-brown-5 font-semibold text-sm 
-  md:text-base  shadow-button border-brown-5 border-2 transition duration-300 ease-in-out active:transform active:translate-x-[3px] active:translate-y-[3px] active:shadow-none`}
+  ${tw`p-1 w-full md:w-[20%] mt-4 md:mt-6 mx-auto md:ml-6 md:mr-6 rounded-[11.53px] bg-orange-1 text-brown-5 font-semibold text-sm md:text-base shadow-button border-brown-5 border-2 transition duration-300 ease-in-out active:transform active:translate-x-[3px] active:translate-y-[3px] active:shadow-none`}
 `

src/config/content/events/events.js

@@ -39,7 +39,7 @@ export const staticEventsData = [
     prizeMoney: '',
     poster:
       'https://res.cloudinary.com/dhv234qct/image/upload/v1720612217/AICHE_SRC/event_icons/k-12_sys_avc6dc.svg',
-    name: 'K-12 STEM OUTREACH',
+    name: 'K-12 STEM',
     subHeading: 'Unleash the STEM genius within!',
     description: JSON.stringify([
       'The K-12 STEM Outreach Program empowers you to ignite a passion for science, technology, engineering, and math (STEM) in students from kindergarten through 12th grade.',
@@ -97,10 +97,15 @@ export const eventss = [
 
 export const eventsWithPdfs = [
   'K-12 STEM OUTREACH',
+  'K-12 STEM',
   'Student Poster Competition',
   'Student Technical Paper Competition'
 ]
 
+export const edpEvents = ['CHEM-E-CAR']
+
+export const edpLink = 'https://aiche.app.box.com/f/a00482e56d334db7846454bacc43cdce'
+
 export const seeMoreIcon =
   'https://res.cloudinary.com/dmvdbpyqk/image/upload/v1717748808/xycpeayh1uywatzl4rqa.svg'