Merge pull request #823 from UofT-Frosh-Orientation/retreat-accessibi…

…lity

Retreat Registration Requirements

client/src/pages/FroshRetreat/FroshRetreat.jsx

@@ -19,6 +19,24 @@ export const FroshRetreat = () => {
   const { setSnackbar } = useContext(SnackbarContext);
   const navigate = useNavigate();
   const isRegistered = useSelector(registeredSelector);
+  const { user } = useSelector(userSelector);
+  const accountObj = {
+    firstName: user.firstName || '',
+    lastName: user.lastName || '',
+    preferredName: user.preferredName || '',
+    phoneNumber: user.phoneNumber || '',
+    phoneNumberCountryCode: user.phoneNumberCountryCode || '',
+    emergencyContactName: user.emergencyContactName || '',
+    emergencyContactRelationship: user.emergencyContactRelationship || '',
+    emergencyContactCountryCode: user.emergencyContactCountryCode || '',
+    emergencyContactNumber: user.emergencyContactNumber || '',
+    email: user.email || '',
+    allergies: user.allergies || [],
+    allergiesOther: user.allergiesOther || '',
+    medicalInfo: user.medicalInfo || '',
+    specficMedicalInfo: user.specficMedicalInfo || '',
+    medication: user.medication || '',
+  };
 
   const remainingTicketsSetter = async () => {
     setRemainingTickets(await getRemainingTickets(setSnackbar));
@@ -28,11 +46,11 @@ export const FroshRetreat = () => {
     remainingTicketsSetter();
   }, []);
 
-  useEffect(() => {
-    if (!isRegistered) {
-      navigate('/profile');
-    }
-  }, [isRegistered]);
+  // useEffect(() => {
+  //   if (!isRegistered) {
+  //     navigate('/profile');
+  //   }
+  // }, [isRegistered]);
 
   return (
     <div className="frosh-retreat-page">
@@ -193,13 +211,18 @@ const RetreatRegistration = () => {
   const [viewedWaiver, setViewedWaiver] = useState(false);
   const [waiverValue, setWaiverValue] = useState();
   const [buttonClicked, setButtonClicked] = useState(false);
+  const isRegistered = useSelector(registeredSelector);
 
   const waiverLink = '../../assests/retreatWaiver/frosh-retreat-2T4-waiver.pdf';
 
   const { user } = useSelector(userSelector);
   const { setSnackbar } = useContext(SnackbarContext);
   const { axios } = useAxios();
   const isRetreat = user?.isRetreat === true;
+  const isWaiverUploaded = user?.waiver?.filename !== undefined;
+
+  const [file, setFile] = useState(null);
+  const [isUploaded, setIsUploaded] = useState(false);
 
   const [outOfTickets, setOutOfTickets] = useState(false);
 
@@ -211,12 +234,61 @@ const RetreatRegistration = () => {
     outOfTicketsSetter();
   }, []);
 
+  useEffect(() => {
+    if (isWaiverUploaded) {
+      setViewedWaiver(true);
+      setIsUploaded(true);
+    }
+  }, [isWaiverUploaded]);
+
+  const handleFileChange = (event) => {
+    setFile(event.target.files[0]);
+  };
+
+  const handleUpload = async () => {
+    if (!file) {
+      setSnackbar('Please select a PDF file to upload.');
+      return;
+    }
+    const formData = new FormData();
+    formData.append('waiver', file);
+    formData.append('username', user.firstName);
+
+    try {
+      const response = await axios.post('/frosh/upload-waiver', formData, {
+        headers: { 'content-type': 'multipart/form-data' },
+      });
+      setSnackbar('File uploaded successfully!');
+      setIsUploaded(true);
+    } catch (error) {
+      console.error('File upload failed:', error);
+      setSnackbar('File upload failed. Please try again.');
+      setIsUploaded(false);
+    }
+  };
+
+  const handleViewWaiver = async () => {
+    try {
+      const { axios } = useAxios();
+      const response = await axios.get(`/frosh/view-waiver/`, {
+        responseType: 'blob', //  handling binary data
+      });
+      const blob = new Blob([response.data], { type: 'application/pdf' });
+      const url = window.URL.createObjectURL(blob);
+      window.open(url);
+    } catch (e) {
+      console.error(e);
+      setSnackbar('Error viewing waiver', true);
+    }
+  };
+
   return (
     <div style={{ margin: '0 20px' }}>
       <p style={{ textAlign: 'center' }}>
         In order to register, the following information will be collected from your account. Please
         ensure this information is accurate and up to date. If any information needs to be modified,
-        please edit your information <Link to={'/profile-edit'}>here</Link>.
+        please edit your information{' '}
+        <Link to={isRegistered ? '/profile-edit' : '/profile-edit-unregistered'}>here</Link>.
       </p>
       <div className="retreat-registration-form">
         <div className="display-field">
@@ -273,37 +345,47 @@ const RetreatRegistration = () => {
             }}
             style={{ marginBottom: '25px' }}
           />
-          <h3>I HAVE READ AND AGREE TO THE FROSH RETREAT WAIVER.</h3>
-          <h4>
-            <i>
-              By pressing &apos;Yes&apos; you/a guardian if you are under 18 have digitally signed
-              the waiver.
-            </i>
-          </h4>
-          <div style={{ height: '10px' }} />
-          {viewedWaiver ? (
-            <RadioButtons
-              initialSelectedIndex={1}
-              values={['Yes', 'No']}
-              onSelected={(value) => {
-                setWaiverValue(value);
-                if (value === 'Yes') setSnackbar('Thanks for reading the waiver!');
-              }}
+
+          <div className="display-field">
+            <h3>UPLOAD SIGNED WAIVER:</h3>
+            <p>Only PDF files under 1 MB are accepted</p>
+            {viewedWaiver ? (
+              <>
+                <input type="file" accept=".pdf" onChange={handleFileChange} />
+                <Button
+                  label="Upload PDF"
+                  isSecondary
+                  onClick={handleUpload}
+                  style={{ marginTop: '10px' }}
+                />
+              </>
+            ) : (
+              <p>Please view the waiver before uploading the signed copy.</p>
+            )}
+          </div>
+
+          {isWaiverUploaded ? (
+            <Button
+              label="View Uploaded Waiver"
+              isSecondary
+              onClick={handleViewWaiver}
+              style={{ marginBottom: '25px' }}
             />
           ) : (
             <></>
           )}
         </div>
+
         {isRetreat ? (
-          <h2>You have already payed for Frosh Retreat!</h2>
+          <h2>You have already paid for Frosh Retreat!</h2>
         ) : outOfTickets ? (
           <h2>Sorry there are no more tickets available!</h2>
         ) : viewedWaiver ? (
           <Button
             label={'Continue to Payment'}
-            isDisabled={waiverValue !== 'Yes' || buttonClicked}
+            isDisabled={!isUploaded || buttonClicked}
             onClick={() => {
-              if (waiverValue === 'Yes') {
+              if (isUploaded) {
                 setButtonClicked(true);
                 axios
                   .post('/payment/frosh-retreat-payment')

client/src/pages/PagePaymentSuccess/PagePaymentSuccess.jsx

@@ -9,9 +9,9 @@ export const PagePaymentSuccess = ({ title, message }) => {
     <>
       <div className="navbar-space-top"></div>
       <div className="payment-success-page">
-        <h1>{title}</h1>
+        <h1>{title.toUpperCase()}</h1>
         <p>Payment Successful!</p>
-        <h3>{message}</h3>
+        <h3 className='proxima-nova-text'>{message}</h3>
         <div>
           <Link to={'/profile'} className="no-link-style">
             <Button label="Profile" />

client/src/pages/PagePaymentSuccess/PagePaymentSuccess.scss

@@ -1,5 +1,10 @@
 @import '../../scssStyles/mixins';
 
+@font-face {
+  font-family: 'Proxima Nova';
+  src: url('../../../../client/assets/fonts/proximanova_regular.ttf') format('opentype');
+}
+
 .payment-success-page {
   color: var(--text-dynamic);
   text-align: center;
@@ -19,6 +24,9 @@
     font-size: 22px;
     margin-bottom: 20px;
   }
+  h3 .proxima-nova-text{
+    font-family: 'Proxima Nova', sans-serif;
+  }
   @for $i from 1 to 4 {
     :nth-child(#{$i}) {
       transform: translateY(100px) scale(0.8);

client/src/pages/Profile/PageProfileFrosh.jsx

@@ -193,6 +193,9 @@ const ProfilePageFroshHeader = ({ editButton }) => {
   const lastDigitF = gradYear.toString().slice(-1);
   let froshYear = `${firstDigitF}T${lastDigitF}`;
 
+  console.log('ProfilePageFroshHeader user:', user);
+  console.log('ProfilePageFroshHeader isRegistered:', isRegistered);
+
   return (
     <>
       <div className="profile-page-header">
@@ -224,10 +227,14 @@ const ProfilePageFroshHeader = ({ editButton }) => {
             <p>Class of</p>
             <h2>{froshYear}</h2>
           </div>
-          {editButton !== false && isRegistered ? (
-            <Link to={'/profile-edit'} className={'profile-edit-icon-link no-link-style'}>
+          {editButton !== false ? (
+          // {editButton !== false && isRegistered ? (
+            <Link to={isRegistered ? '/profile-edit' : '/profile-edit-unregistered'} className={'profile-edit-icon-link no-link-style'}>
               <img src={EditIcon} alt={'edit'} className={'profile-edit-icon'} />
             </Link>
+            // <Link to={'/profile-edit'} className={'profile-edit-icon-link no-link-style'}>
+            //   <img src={EditIcon} alt={'edit'} className={'profile-edit-icon'} />
+            // </Link>
           ) : null}
         </div>
       </div>

client/src/pages/ProfileEdit/ProfileEdit.jsx

@@ -24,6 +24,16 @@ const PageProfileEdit = () => {
     dispatch(updateUserInfo({ setSnackbar, newInfo, navigate, isRegistered }));
   };
 
+  useEffect(() => {
+    if (!user) {
+      console.log('User not found, fetching user info...');
+      dispatch(getUserInfo(navigate));
+    }
+  }, [user]);
+
+  console.log('PageProfileEdit user:', user);
+  console.log('PageProfileEdit isRegistered:', isRegistered);
+
   useEffect(() => {
     if (!isRegistered) {
       navigate('/profile');
@@ -35,7 +45,7 @@ const PageProfileEdit = () => {
       <Suspense>
         <ProfilePageFroshHeader editButton={false} />
         <div className="edit-form-container">
-          <PageRegistrationForm editFieldsPage={true} initialValues={user} onEditSubmit={submit} />
+            <PageRegistrationForm editFieldsPage={true} initialValues={user} onEditSubmit={submit} />
         </div>
       </Suspense>
     );