add robotics url params to prefill FIRST/Robotics (#1646)

components/fiscal-sponsorship/apply/application-form.js

@@ -1,5 +1,5 @@
 import { useRouter } from 'next/router'
-import { useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { Alert, Button, Text } from 'theme-ui'
 import FormContainer from './form-container'
 import OrganizationInfoForm from './org-form'
@@ -11,8 +11,10 @@ import MultiStepForm from './multi-step-form'
 export default function ApplicationForm() {
   const router = useRouter()
   const formContainer = useRef()
+  const roboticsPriorityCheckbox = useRef(null)
   const [formError, setFormError] = useState(null)
   const [isSubmitting, setIsSubmitting] = useState(false)
+  const [roboticsPriorityEnabled, setRoboticsPriorityEnabled] = useState(false)
 
   const requiredFields = {
     // Key: form field name
@@ -58,6 +60,30 @@ export default function ApplicationForm() {
     </Button>
   )
 
+  // Prefill hidden Robotics Priority field from query params or saved progress
+  useEffect(() => {
+    if (!roboticsPriorityCheckbox.current || !router.isReady) return
+
+    const queryValueRaw = router.query['robotics-priority']
+    const queryValue = Array.isArray(queryValueRaw)
+      ? queryValueRaw[queryValueRaw.length - 1]
+      : queryValueRaw
+
+    const shouldCheck =
+      typeof queryValue === 'string' &&
+      ['true', '1', 'yes', 'on'].includes(queryValue.toLowerCase())
+
+    roboticsPriorityCheckbox.current.checked = shouldCheck
+    setRoboticsPriorityEnabled(shouldCheck)
+
+    if (typeof window !== 'undefined') {
+      sessionStorage.setItem(
+        'bank-signup-robotics-priority',
+        shouldCheck ? 'true' : 'false'
+      )
+    }
+  }, [router.isReady, router.query])
+
   return (
     <FormContainer
       ref={formContainer}
@@ -73,6 +99,16 @@ export default function ApplicationForm() {
         })
       }
     >
+      <input type="hidden" name="robotics-priority" value="false" />
+      <input
+        ref={roboticsPriorityCheckbox}
+        type="checkbox"
+        name="robotics-priority"
+        value="true"
+        style={{ display: 'none' }}
+        tabIndex={-1}
+        aria-hidden="true"
+      />
       <MultiStepForm
         submitButton={submitButton}
         validationErrors={
@@ -86,15 +122,20 @@ export default function ApplicationForm() {
         {/* Step 1 */}
         <MultiStepForm.Step title="Let's get started">
           <Text as="p" variant="caption" sx={{ marginBottom: '1rem' }}>
-            Fill out this quick application to run your project on HCB. If you
-            are a teenager, there is a very high likelihood we will accept your
-            project. We just need to collect a few pieces of information first.
+            Fill out this quick application to run your{' '}
+            {roboticsPriorityEnabled ? 'robotics team' : 'project'} on HCB. If
+            you are a teenager, there is a very high likelihood we will accept{' '}
+            your project. We just need to collect a few pieces of information
+            first.
           </Text>
           <TeenagerOrAdultForm requiredFields={requiredFields} />
         </MultiStepForm.Step>
         {/* Step 2 */}
         <MultiStepForm.Step>
-          <OrganizationInfoForm requiredFields={requiredFields} />
+          <OrganizationInfoForm
+            requiredFields={requiredFields}
+            roboticsPriorityEnabled={roboticsPriorityEnabled}
+          />
         </MultiStepForm.Step>
         {/* Step 3 */}
         <MultiStepForm.Step title="Personal details">

components/fiscal-sponsorship/apply/org-form.js

@@ -7,8 +7,24 @@ import useOrganizationI18n from '../organizationI18n'
 import OrganizationAdultForm from './org-adult-form'
 import { useTeenagerLedContext } from './teenager-led-context'
 
-export default function OrganizationInfoForm({ requiredFields }) {
+export default function OrganizationInfoForm({
+  requiredFields,
+  roboticsPriorityEnabled = false
+}) {
   const org = useOrganizationI18n()
+  const nameLabel = roboticsPriorityEnabled ? 'Team name and number' : `${org} name`
+  const descriptionLabel = roboticsPriorityEnabled
+    ? 'Tell us about your robotics team'
+    : `Tell us about your ${org.toLowerCase()}`
+  const descriptionCaption = roboticsPriorityEnabled
+    ? "What leagues are you in? Are you affiliated with any schools? What's the history of your robotics team?"
+    : 'Are you running a hackathon, robotics team, organizing a nonprofit, building a project, etc.?'
+  const websiteQuestionLabel = roboticsPriorityEnabled
+    ? 'Does your robotics team have a website?'
+    : 'Does your project have a website?'
+  const websiteFieldLabel = roboticsPriorityEnabled
+    ? 'Team website'
+    : `${org} website`
 
   const { teenagerLed } = useTeenagerLedContext()
 
@@ -50,25 +66,26 @@ export default function OrganizationInfoForm({ requiredFields }) {
     <>
       <Field
         name="eventName"
-        label={`${org} name`}
+        label={nameLabel}
         requiredFields={requiredFields}
       >
         <Input
           name="eventName"
           id="eventName"
-          placeholder="Shelburne School Hackathon"
+          placeholder={
+            roboticsPriorityEnabled
+              ? '#4225 The Hackers'
+              : 'Shelburne School Hackathon'
+          }
         />
       </Field>
 
       <Field
         name="eventDescription"
-        label={`Tell us about your ${org.toLowerCase()}`}
+        label={descriptionLabel}
         requiredFields={requiredFields}
       >
-        <Text variant="caption">
-          Are you running a hackathon, robotics team, organizing a nonprofit,
-          building a project, etc.?
-        </Text>
+        <Text variant="caption">{descriptionCaption}</Text>
         <Textarea
           name="eventDescription"
           id="eventDescription"
@@ -80,7 +97,7 @@ export default function OrganizationInfoForm({ requiredFields }) {
       </Field>
 
       <Field
-        label="Does your project have a website?"
+        label={websiteQuestionLabel}
         name="eventHasWebsite"
         requiredFields={requiredFields}
       >
@@ -99,7 +116,7 @@ export default function OrganizationInfoForm({ requiredFields }) {
       {hasWebsite ? (
         <Field
           name="eventWebsite"
-          label={`${org} website`}
+          label={websiteFieldLabel}
           requiredFields={requiredFields}
         >
           <Input

pages/api/fiscal-sponsorship/apply.js

@@ -16,6 +16,7 @@ export default async function handler(req, res) {
   }
 
   const data = req.body
+  const roboticsPriority = data['robotics-priority'] === 'true'
 
   await fetch('https://hcb.hackclub.com/api/v1/events/create_demo', {
     body: JSON.stringify({
@@ -66,7 +67,8 @@ export default async function handler(req, res) {
         'Referral Code': data.referralCode,
         Tubs: tub_programs.includes(data.tub_program)
           ? data.tub_program
-          : undefined
+          : undefined,
+        'Org Type': roboticsPriority ? 'FIRST/Robotics' : undefined
       })
       res.status(200).end()
     })

pages/fiscal-sponsorship/apply/index.js

@@ -1,6 +1,7 @@
 import { Box, Flex, Grid, Heading, Text } from 'theme-ui'
 import Head from 'next/head'
 import Link from 'next/link'
+import { useRouter } from 'next/router'
 import Icon from '@hackclub/icons'
 import Meta from '@hackclub/meta'
 import ForceTheme from '../../../components/force-theme'
@@ -11,6 +12,18 @@ import ApplicationForm from '../../../components/fiscal-sponsorship/apply/applic
 import { MultiStepProvider } from '../../../components/fiscal-sponsorship/apply/multi-step-context'
 
 export default function Apply() {
+  const router = useRouter()
+  const roboticsPriorityRaw = router?.query?.['robotics-priority']
+  const roboticsPriorityValue = Array.isArray(roboticsPriorityRaw)
+    ? roboticsPriorityRaw[roboticsPriorityRaw.length - 1]
+    : roboticsPriorityRaw
+  const roboticsPriorityEnabled =
+    typeof roboticsPriorityValue === 'string' &&
+    ['true', '1', 'yes', 'on'].includes(roboticsPriorityValue.toLowerCase())
+  const heroCaption = roboticsPriorityEnabled
+    ? 'Use HCB to raise nonprofit dollars to fund your robotics team.'
+    : 'Use HCB to raise nonprofit dollars to fund your project.'
+
   return (
     <>
       <Meta as={Head} title="Apply for HCB" />
@@ -88,9 +101,7 @@ export default function Apply() {
                   HCB
                 </Flex>
               </Heading>
-              <Text variant="caption">
-                Use HCB to raise nonprofit dollars to fund your project.
-              </Text>
+              <Text variant="caption">{heroCaption}</Text>
             </Box>
             <HCBInfo />
             <ContactBanner