Merge pull request #555 from nwplus/dev

Waiver changes
nwplus · Jan 7, 2024 · 0253c54 · 0253c54
2 parents 99bb392 + b16e3c8
commit 0253c54
Show file tree

Hide file tree

Showing 5 changed files with 226 additions and 38 deletions.
diff --git a/src/components/ApplicationDashboard.js b/src/components/ApplicationDashboard.js
@@ -1,13 +1,18 @@
 import React, { useState } from 'react'
 import styled from 'styled-components'
-import { H1, A } from './Typography'
-import { Button } from './Input/Button'
-import { ANALYTICS_EVENTS, APPLICATION_STATUS, SOCIAL_LINKS, copyText } from '../utility/Constants'
-import Icon from '../components/Icon'
 import { ReactComponent as HandWave } from '../assets/hand-wave.svg'
+import Icon from '../components/Icon'
+import {
+  ANALYTICS_EVENTS,
+  APPLICATION_STATUS,
+  SOCIAL_LINKS,
+  WAIVER_LINKS,
+  copyText,
+} from '../utility/Constants'
 import { analytics } from '../utility/firebase'
 import { Checkbox } from './Input'
-import ResumeUploadBtn from './ResumeUploadBtn'
+import { Button } from './Input/Button'
+import { A, H1, P, ErrorSpan as Required } from './Typography'
 
 const Container = styled.div`
   margin: 5em auto;
@@ -130,7 +135,14 @@ const RSVPButton = styled(Button)`
   ${p => !p.shouldDisplay && 'display: none'}
 `
 
-const SafeWalkContainer = styled.div`
+// const SafeWalkContainer = styled.div`
+//   display: flex;
+//   flex-direction: column;
+//   gap: 0.5rem;
+//   padding-top: 2rem;
+// `
+
+const CheckboxContainer = styled.div`
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
@@ -174,16 +186,16 @@ const QuestionLabel = styled.div`
   font-weight: bold;
 `
 
-const WaiverUpload = styled.div`
-  padding-top: 2rem;
-  display: flex;
-  gap: 0.5rem;
-  flex-direction: column;
-`
+// const WaiverUpload = styled.div`
+//   padding-top: 2rem;
+//   display: flex;
+//   gap: 0.5rem;
+//   flex-direction: column;
+// `
 
-const WaiverUploadContext = styled.div`
-  line-height: 150%;
-`
+// const WaiverUploadContext = styled.div`
+//   line-height: 150%;
+// `
 
 export const hackerStatuses = (relevantDates, hackerName = null) => ({
   applied: {
@@ -319,6 +331,14 @@ const Dashboard = ({
   setRSVP,
   safewalkNote,
   setSafewalkInput,
+  covidWaiverCheck,
+  setCovidWaiverCheck,
+  releaseLiabilityCheck,
+  setReleaseLiabilityCheck,
+  mediaConsentCheck,
+  setMediaConsentCheck,
+  ageOfMajoritySelect,
+  setAgeOfMajoritySelect,
   username,
   editApplication,
   relevantDates,
@@ -327,13 +347,38 @@ const Dashboard = ({
   waiverName,
   waiverLoading,
 }) => {
-  const [safewalk, setSafewalkCheckbox] = useState(safewalkNote || false)
+  // const [safewalk, setSafewalkCheckbox] = useState(safewalkNote || false)
+  const [covidWaiver, setCovidWaiver] = useState(covidWaiverCheck || undefined)
+  const [releaseLiability, setReleaseLiability] = useState(releaseLiabilityCheck || undefined)
+  const [mediaConsent, setMediaConsent] = useState(mediaConsentCheck || undefined)
+  const [ageOfMajority, setAgeOfMajority] = useState(ageOfMajoritySelect || undefined)
+
   const hackerRSVPStatus = hackerStatuses()[hackerStatus]?.sidebarText
 
   const [displayUnRSVPModel, setdisplayUnRSVPModel] = useState('none')
-  const handleChange = () => {
-    setSafewalkCheckbox(!safewalk)
-    setSafewalkInput(!safewalkNote)
+  // const handleChange = () => {
+  //   setSafewalkCheckbox(!safewalk)
+  //   setSafewalkInput(!safewalkNote)
+  // }
+
+  const handleCovidWaiverChange = () => {
+    setCovidWaiver(!covidWaiver)
+    setCovidWaiverCheck(!covidWaiverCheck)
+  }
+
+  const handleReleaseLiabilityChange = () => {
+    setReleaseLiability(!releaseLiability)
+    setReleaseLiabilityCheck(!releaseLiabilityCheck)
+  }
+
+  const handleMediaConsentChange = () => {
+    setMediaConsent(!mediaConsent)
+    setMediaConsentCheck(!mediaConsentCheck)
+  }
+
+  const handleAgeOfMajoritySelectChange = e => {
+    setAgeOfMajority(e.target.value)
+    setAgeOfMajoritySelect(e.target.value)
   }
 
   return (
@@ -375,15 +420,98 @@ const Dashboard = ({
         {/* Hides this option if a user unRSVP'd */}
         {hackerRSVPStatus !== "Un-RSVP'd" && canRSVP && (
           <>
-            <SafeWalkContainer>
+            {/* <SafeWalkContainer>
               <QuestionLabel>Safewalk option</QuestionLabel>
               <Checkbox
                 checked={safewalk}
                 onChange={handleChange}
                 label="If you are planning to walk home alone on campus on the night of the 11th, would you like organizers to accompany you to your destination?"
               />
-            </SafeWalkContainer>
-            <WaiverUpload>
+            </SafeWalkContainer> */}
+
+            <CheckboxContainer>
+              <QuestionLabel>
+                Release of Liability <Required />
+              </QuestionLabel>
+              <P>
+                This waiver allows nwPlus to use any photos or videos taken during the event for
+                promotional purposes.
+              </P>
+              <A bolded color="primary" width="130px" href={WAIVER_LINKS.RELEASE_LIABILITY}>
+                Read Full Waiver.
+              </A>{' '}
+              <Checkbox
+                checked={releaseLiability}
+                onChange={handleReleaseLiabilityChange}
+                label="I have read the Release of Liability Waiver and agree to its terms."
+              />
+            </CheckboxContainer>
+
+            <CheckboxContainer>
+              <QuestionLabel>
+                COVID Liability <Required />
+              </QuestionLabel>
+              <P>This waiver clarifies that nwPlus is not liable for any COVID-19 related risks.</P>
+              <A bolded color="primary" width="130px" href={WAIVER_LINKS.COVID}>
+                Read Full Waiver.
+              </A>{' '}
+              <Checkbox
+                checked={covidWaiver}
+                onChange={handleCovidWaiverChange}
+                label="I have read the COVID Liability Waiver and agree to its terms."
+              />
+            </CheckboxContainer>
+
+            <CheckboxContainer>
+              <QuestionLabel>Media Consent</QuestionLabel>
+              <P>
+                This waiver allows nwPlus to use any photos or videos taken during the event for
+                promotional purposes.
+              </P>
+              <A bolded color="primary" width="130px" href={WAIVER_LINKS.MEDIA}>
+                Read Full Waiver.
+              </A>{' '}
+              <Checkbox
+                checked={mediaConsent}
+                onChange={handleMediaConsentChange}
+                label="I have read the Media Consent Waiver and agree to its terms."
+              />
+            </CheckboxContainer>
+
+            <div style={{ marginTop: '30px' }}>
+              <QuestionLabel>For Minors (Under 19) - REQUIRED IF YOU ARE UNDER 19 <Required /></QuestionLabel>
+              <P>
+                If you are under 19, please download the waivers, and have them signed by your
+                parent or legal guardian. Bring the signed forms with you to the event.
+              </P>
+              <div>
+                <input
+                  type="radio"
+                  id="under19"
+                  name="under19"
+                  value="under19"
+                  checked={ageOfMajority === 'under19'}
+                  onChange={handleAgeOfMajoritySelectChange}
+                />
+                <label htmlFor="under19">
+                  I am under 19 and will bring the signed waivers on the day of the event.
+                </label>
+              </div>
+
+              <div>
+                <input
+                  type="radio"
+                  id="over19"
+                  name="over19"
+                  value="over19"
+                  checked={ageOfMajority === 'over19'}
+                  onChange={handleAgeOfMajoritySelectChange}
+                />
+                <label htmlFor="over19">I am over the age of 19.</label>
+              </div>
+            </div>
+
+            {/* <WaiverUpload>
               <QuestionLabel>Waiver upload</QuestionLabel>
               <WaiverUploadContext>
                 Please upload the signed copies of your waivers here. The pages must be contained in
@@ -397,7 +525,7 @@ const Dashboard = ({
                 }}
                 hint={waiverName || ''}
               />
-            </WaiverUpload>
+            </WaiverUpload> */}
           </>
         )}
 
@@ -406,10 +534,17 @@ const Dashboard = ({
           {hackerRSVPStatus !== "Un-RSVP'd" && canRSVP && (
             <RSVPButton
               width="flex"
-              onClick={isRsvpOpen && canRSVP && waiverName && (() => setRSVP(canRSVP))}
+              onClick={
+                isRsvpOpen &&
+                canRSVP &&
+                covidWaiver &&
+                releaseLiability &&
+                ageOfMajority &&
+                (() => setRSVP(canRSVP))
+              }
               shouldDisplay={canRSVP || hackerStatus === 'acceptedAndAttending'}
               color={canRSVP ? 'primary' : 'secondary'}
-              disabled={!(isRsvpOpen && waiverName)}
+              disabled={!(isRsvpOpen && covidWaiver && releaseLiability && ageOfMajority)}
             >
               RSVP
             </RSVPButton>

diff --git a/src/components/Typography.js b/src/components/Typography.js
@@ -90,6 +90,7 @@ export const PortalLink = styled(Link)`
 export const A = styled.a`
   cursor: pointer;
   text-decoration: none;
+  width: ${p => p.width || 'auto'};
   font-weight: ${p => (p.bolded ? 600 : 400)};
   border-bottom: 1px solid ${p => (p.color ? p.theme.colors.primary : p.theme.colors.link)};
   color: #fff;

diff --git a/src/containers/Application/Dashboard.js b/src/containers/Application/Dashboard.js
@@ -1,12 +1,12 @@
-import React, { useState, useEffect } from 'react'
-import Dashboard from '../../components/ApplicationDashboard'
-import { uploadWaiverToStorage, useHackerApplication } from '../../utility/HackerApplicationContext'
-import { useAuth } from '../../utility/Auth'
+import React, { useEffect, useState } from 'react'
 import { useLocation } from 'wouter'
-import { getLivesiteDoc, livesiteDocRef, currentHackathonRef } from '../../utility/firebase'
-import Page from '../../components/Page'
+import Dashboard from '../../components/ApplicationDashboard'
 import Spinner from '../../components/Loading'
+import Page from '../../components/Page'
+import { useAuth } from '../../utility/Auth'
+import { uploadWaiverToStorage, useHackerApplication } from '../../utility/HackerApplicationContext'
 import { MAX_WAIVER_FILE_SIZE_MB } from '../../utility/Validation'
+import { currentHackathonRef, getLivesiteDoc, livesiteDocRef } from '../../utility/firebase'
 
 const ApplicationDashboardContainer = () => {
   const { application, updateApplication, forceSave } = useHackerApplication()
@@ -94,6 +94,42 @@ const ApplicationDashboardContainer = () => {
     forceSave()
   }
 
+  const setCovidWaiverCheck = covidWaiverCheck => {
+    updateApplication({
+      basicInfo: {
+        covidWaiverCheck,
+      },
+    })
+    forceSave()
+  }
+
+  const setReleaseLiabilityCheck = releaseLiabilityCheck => {
+    updateApplication({
+      basicInfo: {
+        releaseLiabilityCheck,
+      },
+    })
+    forceSave()
+  }
+
+  const setMediaConsentCheck = mediaConsentCheck => {
+    updateApplication({
+      basicInfo: {
+        mediaConsentCheck,
+      },
+    })
+    forceSave()
+  }
+
+  const setAgeOfMajoritySelect = ageOfMajoritySelect => {
+    updateApplication({
+      basicInfo: {
+        ageOfMajoritySelect,
+      },
+    })
+    forceSave()
+  }
+
   const handleWaiver = async waiver => {
     // check to make sure its under 2mb
     const size = (waiver.size / 1024 / 1024).toFixed(2)
@@ -129,6 +165,16 @@ const ApplicationDashboardContainer = () => {
         canRSVP={canRSVP}
         safewalkNote={application.basicInfo.safewalkNote || false}
         setSafewalkInput={safewalkNote => setSafewalkInput(safewalkNote)}
+        covidWaiverCheck={application.basicInfo.covidWaiverCheck || undefined}
+        setCovidWaiverCheck={covidWaiverCheck => setCovidWaiverCheck(covidWaiverCheck)}
+        releaseLiabilityCheck={application.basicInfo.releaseLiabilityCheck || undefined}
+        setReleaseLiabilityCheck={releaseLiabilityCheck =>
+          setReleaseLiabilityCheck(releaseLiabilityCheck)
+        }
+        mediaConsentCheck={application.basicInfo.mediaConsentCheck || false}
+        setMediaConsentCheck={mediaConsentCheck => setMediaConsentCheck(mediaConsentCheck)}
+        ageOfMajoritySelect={application.basicInfo.ageOfMajoritySelect || undefined}
+        setAgeOfMajoritySelect={ageOfMajoritySelect => setAgeOfMajoritySelect(ageOfMajoritySelect)}
         relevantDates={relevantDates}
         isRsvpOpen={isRsvpOpen}
         handleWaiver={handleWaiver}

diff --git a/src/pages/Home.js b/src/pages/Home.js
@@ -2,13 +2,10 @@ import React from 'react'
 import HackerCountdown from '../containers/HackerCountdown'
 // import Announcements from '../components/Announcements'
 // import { CommonLinks } from '../containers/Quicklinks'
-import Livestream from '../components/Livestream'
 import styled, { withTheme } from 'styled-components'
 import head_decal from '../assets/cmdf_bannerdecal.svg'
-import QrCode from '../components/QrCode'
-import { useAuth } from '../utility/Auth'
+import Livestream from '../components/Livestream'
 // import Hackcamp2023BG from '../components/BackgroundImage'
-import { APPLICATION_STATUS } from '../utility/Constants'
 
 const HomeContainer = styled.div`
   height: 100%;
@@ -27,7 +24,7 @@ const TopDecal = styled.img`
 `
 
 export default withTheme(({ announcements, theme }) => {
-  const { user, isAuthed } = useAuth()
+  // const { user, isAuthed } = useAuth()
 
   return (
     <HomeContainer>
@@ -39,9 +36,9 @@ export default withTheme(({ announcements, theme }) => {
       <CommonLinks />
       <Announcements announcements={announcements} /> */}
 
-      {user?.status === APPLICATION_STATUS.accepted && isAuthed && user.uid && (
+      {/* {user?.status === APPLICATION_STATUS.accepted && isAuthed && user.uid && (
         <QrCode userInfo={user} userId={user.uid} />
-      )}
+      )} */}
     </HomeContainer>
   )
 })
diff --git a/src/utility/Constants.js b/src/utility/Constants.js
@@ -21,6 +21,15 @@ export const NOTIFICATION_PERMISSIONS = Object.freeze({
   DENIED: 'denied',
 })
 
+export const WAIVER_LINKS = Object.freeze({
+  COVID:
+    'https://docs.google.com/document/d/1td2BgcwRT2CTYdUrzHji7onxpoVl8UjMiEuqIIUK7CM/edit?usp=sharing%5C',
+  RELEASE_LIABILITY:
+    'https://docs.google.com/document/d/1uqFssK4ScnbTysw0ppQKQYhZ6M-kja3R23xg8qNxf1E/edit?usp=sharing',
+  MEDIA:
+    'https://docs.google.com/document/d/1fMVtLTLnE-4awnXLl0YY6VAVvF_9xH0b250FGLbdOkI/edit?usp=sharing',
+})
+
 export const SOCIAL_LINKS = Object.freeze({
   FB: 'https://www.facebook.com/nwplusubc',
   IG: 'https://www.instagram.com/nwplusubc',