Merge branch 'main' into crashFixes

package.json

@@ -22,6 +22,7 @@
     "ldrs": "^1.0.2",
     "prop-types": "^15.8.1",
     "react": "^18.3.1",
+    "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^18.3.1",
     "react-fast-marquee": "^1.6.4",
     "react-helmet": "^6.1.0",

src/components/events/EventCard.jsx

@@ -36,15 +36,17 @@ EventCard.propTypes = {
   handleSelectEvent: PropTypes.func,
   handleRegisterEvent: PropTypes.func,
   registeredEvent: PropTypes.any,
-  mongoId: PropTypes.string
+  mongoId: PropTypes.string,
+  userSrcId: PropTypes.string
 }
 
 export default function EventCard({
   event: { poster, id, name, subHeading, description, rules, isTeamEvent },
   handleSelectEvent,
   handleRegisterEvent,
   registeredEvent,
-  mongoId
+  mongoId,
+  userSrcId
 }) {
   const [openModal, setOpenModal] = useState(false)
   function genDetails(str, length) {
@@ -66,9 +68,15 @@ export default function EventCard({
 
   function handleClick(id) {
     if (!mongoId) {
-      toast.error('Please login to register for the event')
+      toast.info('Please complete your profile to register for the event')
       return
     }
+
+    if (!userSrcId) {
+      toast.info('Please complete your payment to register for the event')
+      return
+    }
+
     handleRegisterEvent(id)
   }
 
@@ -120,6 +128,7 @@ export default function EventCard({
                 <SeemoreIcon src={seeMoreIcon} />
               </CardModalBtn>
             </CardBody>
+
             <CardFooter>
               <ButtonRules onClick={redirectToRules}>Rulebook</ButtonRules>
               {!registeredEvent ? (

src/components/events/Events.jsx

@@ -24,6 +24,7 @@ export default function Events() {
   const [event, setEvent] = useState(null)
   const [events, setEvents] = useState([])
   const [mongoId, setMongoId] = useState(null)
+  const [userSrcId, setUserSrcId] = useState(null)
   const [soloRegistration, setSoloRegistration] = useState([])
   const [teamRegistration, setTeamRegistration] = useState([])
   const [combinedRegistrations, setCombinedRegistrations] = useState([])
@@ -169,7 +170,12 @@ export default function Events() {
       )}
       {createPortal(
         isRegisterModalOpen && (
-          <RegisterModal mongoId={mongoId} closeModal={handleRegisterModalClose} event={event} />
+          <RegisterModal
+            mongoId={mongoId}
+            closeModal={handleRegisterModalClose}
+            userSrcId={userSrcId}
+            event={event}
+          />
         ),
         overlay
       )}
@@ -191,6 +197,7 @@ export default function Events() {
             handlerFlagshipEvent={handleFlagshipCardModalOpen}
             swiperRef={swiperRef}
             mongoId={mongoId}
+            userSrcId={userSrcId}
           />
           <Arrow src={nextArrowIcon} alt="Next" onClick={handleNext} />
         </Section>

src/components/events/EventsWrapper.jsx

@@ -15,7 +15,8 @@ function EventsWrapper({
   swiperRef,
   handleRegisterEvent,
   handlerFlagshipEvent,
-  mongoId
+  mongoId,
+  userSrcId
 }) {
   useEffect(() => {
     if (swiperRef.current) {
@@ -65,6 +66,7 @@ function EventsWrapper({
                 handleSelectEvent={handleSelectEvent}
                 handleRegisterEvent={handleRegisterEvent}
                 mongoId={mongoId}
+                userSrcId={userSrcId}
               />
             </SwiperSlide>
           )
@@ -85,7 +87,8 @@ EventsWrapper.propTypes = {
   handlerFlagshipEvent: PropTypes.func.isRequired,
   swiperRef: PropTypes.object.isRequired,
   combinedArray: PropTypes.array,
-  mongoId: PropTypes.string
+  mongoId: PropTypes.string,
+  userSrcId: PropTypes.string
 }
 
 export default EventsWrapper

src/components/events/IndividualEventModal.jsx

@@ -22,8 +22,15 @@ import {
 } from './teamRegistrationModal'
 import { RegistrationSchema } from '../../config/content/teamRegistration/registerSchema'
 
-export const IndiEventModal = ({ EventId, EventTitle, mongoId, hasPdfUpload, handleScroll }) => {
-  const [aicheID, setAicheID] = useState('')
+export const IndiEventModal = ({
+  EventId,
+  EventTitle,
+  mongoId,
+  hasPdfUpload,
+  handleScroll,
+  userSrcId
+}) => {
+  const [aicheID, setAicheID] = useState(userSrcId)
   const [show, setShow] = useState(true)
   const [error, setError] = useState(null)
   const [pdf, setPdf] = useState(null)
@@ -121,7 +128,7 @@ export const IndiEventModal = ({ EventId, EventTitle, mongoId, hasPdfUpload, han
         <Container onScroll={handleScroll}>
           <Text>{EventTitle}</Text>
           <TextSub>(*single member Participation*)</TextSub>
-          <TextHead className="text-lg font-bold">User ID</TextHead>
+          <TextHead className="text-lg font-bold">Enter srcID</TextHead>
           <InputContainer1>
             <Input
               type="text"
@@ -177,5 +184,6 @@ IndiEventModal.propTypes = {
   closeRegisterModal: PropTypes.func,
   mongoId: PropTypes.string,
   hasPdfUpload: PropTypes.bool,
-  handleScroll: PropTypes.func
+  handleScroll: PropTypes.func,
+  userSrcId: PropTypes.string
 }

src/components/events/Register2Modal.jsx

@@ -9,7 +9,8 @@ import { ProgressBar } from './eventModal.styles'
 export const RegisterModal = ({
   event: { id, name, isTeamEvent, maxTeamSize },
   closeModal,
-  mongoId
+  mongoId,
+  userSrcId
 }) => {
   const [scrollPosition, setScrollPosition] = useState(0)
 
@@ -34,6 +35,7 @@ export const RegisterModal = ({
             mongoId={mongoId}
             maxTeamSize={maxTeamSize}
             hasPdfUpload={hasPdfUpload}
+            userSrcId={userSrcId}
           />
         ) : (
           <IndiEventModal
@@ -43,6 +45,7 @@ export const RegisterModal = ({
             mongoId={mongoId}
             maxTeamSize={maxTeamSize}
             hasPdfUpload={hasPdfUpload}
+            userSrcId={userSrcId}
           />
         )}
       </Section>
@@ -58,5 +61,6 @@ RegisterModal.propTypes = {
     maxTeamSize: PropTypes.number
   }),
   closeModal: PropTypes.func,
-  mongoId: PropTypes.string
+  mongoId: PropTypes.string,
+  userSrcId: PropTypes.string
 }

src/components/events/TeamEventModal.jsx

@@ -34,11 +34,12 @@ export const TeamEventModal = ({
   maxTeamSize,
   hasPdfUpload,
   mongoId,
-  handleScroll
+  handleScroll,
+  userSrcId
 }) => {
   const [formData, setFormData] = useState({
     teamname: '',
-    teamleadid: '',
+    teamleadid: userSrcId,
     userIds: ['']
   })
 
@@ -197,10 +198,10 @@ export const TeamEventModal = ({
                 />
               </div>
               <div>
-                <TextHead>Team Lead ID</TextHead>
+                <TextHead>Team Lead srcID</TextHead>
                 <Input
                   type="text"
-                  placeholder="Enter Team Lead ID"
+                  placeholder="Enter Team Lead srcID"
                   value={formData.teamleadid}
                   onChange={(e) => handleChange('teamleadid', e.target.value)}
                 />
@@ -217,7 +218,7 @@ export const TeamEventModal = ({
             <Grid2>
               {formData.userIds.map((userId, index) => (
                 <div className="flex" key={index}>
-                  <TextHead>{`Member ${index + 1} ID`}</TextHead>
+                  <TextHead>{`Member ${index + 1} srcID`}</TextHead>
                   <Input2
                     type="text"
                     placeholder={`Enter Member ${index + 1}'s ID`}
@@ -267,7 +268,8 @@ TeamEventModal.propTypes = {
   hasPdfUpload: PropTypes.bool,
   mongoId: PropTypes.string,
   maxTeamSize: PropTypes.number,
-  handleScroll: PropTypes.func
+  handleScroll: PropTypes.func,
+  userSrcId: PropTypes.string
 }
 
 export default TeamEventModal

src/components/marginals/Nav_Hero/Description.jsx

@@ -12,9 +12,37 @@ import { ButtonWrapper } from './Description.styles'
 import { useContext } from 'react'
 import { AuthContext } from '../../../context/AuthContext'
 import { Link } from 'react-router-dom'
+import { useQuery } from '@apollo/client'
+import { GET_USER_BY_ID } from '../../../graphQL/queries/userQueries'
+import { useEffect, useState } from 'react'
 
 const Description = () => {
+  const orgId = '668bd9deff0327a608b9b6ea'
   const { userInfo } = useContext(AuthContext)
+  const [uid, setUid] = useState(null)
+  const [user, setUser] = useState(null)
+  const { refetch: refetchUser } = useQuery(GET_USER_BY_ID, {
+    variables: { uid: uid, orgId },
+    skip: true
+  })
+
+  useEffect(() => {
+    if (userInfo.uid) {
+      setUid(userInfo.uid)
+      getUserData()
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [userInfo, uid])
+
+  async function getUserData() {
+    try {
+      const { data } = await refetchUser({ uid: userInfo.uid, orgId })
+      setUser(data.getUser)
+    } catch (err) {
+      console.log('Error fetching user data', err)
+      // console.log('Error fetching user data', err)
+    }
+  }
 
   function redirect() {
     window.open(DescriptionContent.brochureLink, '_blank')
@@ -27,11 +55,13 @@ const Description = () => {
         <ButtonContainer>
           <HelpButton onClick={redirect}>{DescriptionContent.HeroButton}</HelpButton>
           {userInfo.name ? (
-            <PaymentButton>
-              <Link target="_blank" to={DescriptionContent.paymentLink}>
-                Pay Now
-              </Link>
-            </PaymentButton>
+            !user?.srcID && (
+              <PaymentButton>
+                <Link target="_blank" to={DescriptionContent.paymentLink}>
+                  Pay Now
+                </Link>
+              </PaymentButton>
+            )
           ) : (
             <Link to="/register">
               <RegisterButton>{DescriptionContent.RegisterButton}</RegisterButton>

src/components/marginals/Nav_Hero/ProfileMenu.styles.jsx

@@ -153,11 +153,23 @@ export const PaymentButton = styled.button`
   active:scale-95
   `}
 `
+
 export const LoaderContainer = styled.div`
   ${tw`
   flex
   items-center
   justify-center
-  mb-5
+  mb-5`}`
+
+export const CopyButton = styled.button`
+  ${tw`
+  cursor-pointer
+  bg-[#FFEEDA]
+  text-[#1D1D1D]
+  rounded-md
+  p-2
+  mx-2
+  hover:bg-orange-1
+  hover:text-[#FFEEDA]
   `}
 `

src/components/marginals/Nav_Hero/ProfileMenuDropDown.jsx

@@ -1,7 +1,11 @@
 import { useContext } from 'react'
 import { tailspin } from 'ldrs'
+import { CopyToClipboard } from 'react-copy-to-clipboard'
 import propTypes from 'prop-types'
+import { toast } from 'react-toastify'
 import { Link, useNavigate } from 'react-router-dom'
+import { MdContentCopy } from 'react-icons/md'
+
 import { XIcon } from '../../../config/content/events/events'
 import { AuthContext } from '../../../context/AuthContext'
 import {
@@ -14,7 +18,8 @@ import {
   ProfileDropDownItem,
   Value,
   PaymentButton,
-  LoaderContainer
+  LoaderContainer,
+  CopyButton
 } from './ProfileMenu.styles'
 
 import { DescriptionContent } from '../../../config/index'
@@ -52,16 +57,35 @@ function ProfileMenuDropDown({ setProfileOpen, user, loading }) {
           </LoaderContainer>
         ) : userDetails[0].value ? (
           <>
-            {userDetails.map((detail, index) => (
-              <ProfileDropDownItem key={index}>
-                <Label>{detail.label}:</Label> <Value>{detail.value}</Value>
-              </ProfileDropDownItem>
-            ))}
-            <PaymentButton>
-              <Link target="_blank" to={DescriptionContent.paymentLink}>
-                Pay Now
-              </Link>
-            </PaymentButton>
+            {userDetails.map((detail, index) =>
+              detail.label == 'Src Id' ? (
+                <ProfileDropDownItem key={index}>
+                  <Label>{detail.label}: </Label> <br />
+                  <Value>{detail.value}</Value>
+                  <CopyToClipboard
+                    text={user.srcID || detail.value}
+                    onCopy={() => {
+                      toast.success('SrcID copied to clipboard')
+                    }}
+                  >
+                    <CopyButton>
+                      <MdContentCopy />
+                    </CopyButton>
+                  </CopyToClipboard>
+                </ProfileDropDownItem>
+              ) : (
+                <ProfileDropDownItem key={index}>
+                  <Label>{detail.label}: </Label> <Value>{detail.value}</Value>
+                </ProfileDropDownItem>
+              )
+            )}
+            {!user.srcID && (
+              <PaymentButton>
+                <Link target="_blank" to={DescriptionContent.paymentLink}>
+                  Pay Now
+                </Link>
+              </PaymentButton>
+            )}
             <LogoutButton onClick={logout}>Logout</LogoutButton>
           </>
         ) : (