From 150cd44689386b8bdf8af946c5dbbca3f9255fbb Mon Sep 17 00:00:00 2001
From: Gary Tou <gary@garytou.com>
Date: Fri, 25 Oct 2024 21:21:31 -0700
Subject: [PATCH 01/10] Move "organization" I18n into a reusable hook

---
 components/fiscal-sponsorship/apply/org-form.js   |  7 ++-----
 components/fiscal-sponsorship/organizationI18n.js | 11 +++++++++++
 2 files changed, 13 insertions(+), 5 deletions(-)
 create mode 100644 components/fiscal-sponsorship/organizationI18n.js

diff --git a/components/fiscal-sponsorship/apply/org-form.js b/components/fiscal-sponsorship/apply/org-form.js
index 88025572..0ca69948 100644
--- a/components/fiscal-sponsorship/apply/org-form.js
+++ b/components/fiscal-sponsorship/apply/org-form.js
@@ -4,13 +4,10 @@ import Checkbox from './checkbox'
 import Field from './field'
 // This is using country-list instead of country-list-js as it has a smaller bundle size
 import { getNames } from 'country-list'
+import useOrganizationI18n from '../organizationI18n'
 
 export default function OrganizationInfoForm({ requiredFields }) {
-  const [org, setOrg] = useState('Organization')
-
-  useEffect(() => {
-    if (navigator.language === 'en-GB') setOrg('Organisation')
-  }, [])
+  const org = useOrganizationI18n()
 
   return (
     <>
diff --git a/components/fiscal-sponsorship/organizationI18n.js b/components/fiscal-sponsorship/organizationI18n.js
new file mode 100644
index 00000000..3cdd78f2
--- /dev/null
+++ b/components/fiscal-sponsorship/organizationI18n.js
@@ -0,0 +1,11 @@
+import { useState, useEffect } from 'react'
+
+export default function useOrganizationI18n() {
+  const [org, setOrg] = useState('Organization')
+
+  useEffect(() => {
+    if (navigator.language === 'en-GB') setOrg('Organisation')
+  }, [])
+
+  return org
+}

From 2334c882549bac406c753232b54a34ec00e975d2 Mon Sep 17 00:00:00 2001
From: Gary Tou <gary@garytou.com>
Date: Fri, 25 Oct 2024 21:21:32 -0700
Subject: [PATCH 02/10] Add form questions for adults

---
 .../apply/org-adult-form.js                   | 71 +++++++++++++++++++
 .../fiscal-sponsorship/apply/org-form.js      |  3 +
 pages/fiscal-sponsorship/apply/index.js       |  3 +
 3 files changed, 77 insertions(+)
 create mode 100644 components/fiscal-sponsorship/apply/org-adult-form.js

diff --git a/components/fiscal-sponsorship/apply/org-adult-form.js b/components/fiscal-sponsorship/apply/org-adult-form.js
new file mode 100644
index 00000000..5aa98f69
--- /dev/null
+++ b/components/fiscal-sponsorship/apply/org-adult-form.js
@@ -0,0 +1,71 @@
+import { useState } from 'react'
+import { Input, Select, Textarea } from 'theme-ui'
+import Field from './field'
+import useOrganizationI18n from '../organizationI18n'
+
+export default function OrganizationAdultForm({ requiredFields }) {
+  const org = useOrganizationI18n()
+  const [teenagerLed, setTeenagerLed] = useState('true')
+
+  const onTeenagerLedChange = e => setTeenagerLed(e.target.value)
+
+  return (
+    <>
+      <Field
+        name="eventTeenagerLed"
+        label={`Is your ${org.toLowerCase()} led by teenagers?`}
+        col={true}
+        description={`This means your ${org.toLowerCase()} was founded and is being led exclusively by teenagers.`}
+        requiredFields={requiredFields}
+      >
+        <Select
+          name="eventTeenagerLed"
+          id="eventTeenagerLed"
+          onChange={onTeenagerLedChange}
+          value={teenagerLed}
+        >
+          {Object.entries({ Yes: 'true', No: 'false' }).map(([name, value]) => (
+            <option key={name} value={value}>
+              {name}
+            </option>
+          ))}
+        </Select>
+      </Field>
+
+      {teenagerLed === 'false' && (
+        <>
+          <Field
+            name="eventPoliticalActivity"
+            label={`Please describe any political activity your ${org.toLowerCase()} is involved in`}
+            description="This includes but is not limited to protests, public demonstrations, political education, and lobbying."
+            requiredFields={requiredFields}
+          >
+            <Textarea
+              name="eventPoliticalActivity"
+              id="eventPoliticalActivity"
+              rows={3}
+              sx={{
+                resize: 'vertical'
+              }}
+            />
+          </Field>
+
+          <Field
+            name="eventAnnualBudget"
+            label="What is your estimated annual budget (USD) for this year?"
+            requiredFields={requiredFields}
+          >
+            <Input
+              name="eventAnnualBudget"
+              id="eventAnnualBudget"
+              type="number"
+              min={0}
+              step={1}
+              placeholder="10,000"
+            />
+          </Field>
+        </>
+      )}
+    </>
+  )
+}
diff --git a/components/fiscal-sponsorship/apply/org-form.js b/components/fiscal-sponsorship/apply/org-form.js
index 0ca69948..31440b22 100644
--- a/components/fiscal-sponsorship/apply/org-form.js
+++ b/components/fiscal-sponsorship/apply/org-form.js
@@ -5,6 +5,7 @@ import Field from './field'
 // This is using country-list instead of country-list-js as it has a smaller bundle size
 import { getNames } from 'country-list'
 import useOrganizationI18n from '../organizationI18n'
+import OrganizationAdultForm from './org-adult-form'
 
 export default function OrganizationInfoForm({ requiredFields }) {
   const org = useOrganizationI18n()
@@ -92,6 +93,8 @@ export default function OrganizationInfoForm({ requiredFields }) {
           }}
         />
       </Field>
+
+      <OrganizationAdultForm requiredFields={requiredFields} />
     </>
   )
 }
diff --git a/pages/fiscal-sponsorship/apply/index.js b/pages/fiscal-sponsorship/apply/index.js
index c1be86bf..91835b8e 100644
--- a/pages/fiscal-sponsorship/apply/index.js
+++ b/pages/fiscal-sponsorship/apply/index.js
@@ -25,6 +25,9 @@ export default function Apply() {
     'eventLocation',
     'eventPostalCode',
     'eventDescription',
+    'eventTeenagerLed',
+    'eventPoliticalActivity',
+    'eventAnnualBudget',
     'firstName',
     'lastName',
     'userEmail',

From 3769e5b3d764f16d8472e079aa853b46ecfa997e Mon Sep 17 00:00:00 2001
From: Gary Tou <gary@garytou.com>
Date: Fri, 25 Oct 2024 21:21:32 -0700
Subject: [PATCH 03/10] [API] Invert `if` to guard clause

---
 pages/api/fiscal-sponsorship/apply.js | 119 +++++++++++++-------------
 1 file changed, 60 insertions(+), 59 deletions(-)

diff --git a/pages/api/fiscal-sponsorship/apply.js b/pages/api/fiscal-sponsorship/apply.js
index a60e1681..d77b7890 100644
--- a/pages/api/fiscal-sponsorship/apply.js
+++ b/pages/api/fiscal-sponsorship/apply.js
@@ -8,65 +8,66 @@ const applicationsTable = new AirtablePlus({
 })
 
 export default async function handler(req, res) {
-  if (req.method === 'POST') {
-    const data = req.body
-
-    await fetch('https://hcb.hackclub.com/api/v1/events/create_demo', {
-      body: JSON.stringify({
-        email: data.userEmail,
-        name: data.eventName,
-        country: getCode(data.eventLocation) || '',
-        postal_code: data.eventPostalCode || '',
-        transparent: data.transparent,
-      }),
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        Authorization: `Bearer ${process.env.HCB_API_TOKEN || ''}`
-      }
-    })
-      .then(r => r.json())
-      .then(async r => {
-        await applicationsTable.create({
-          'First Name': data.firstName,
-          'Last Name': data.lastName,
-          'Email Address': data.userEmail,
-          'Phone Number': data.userPhone,
-          'Date of Birth': data.userBirthday,
-          'Event Name': data.eventName,
-          'Event Website': data.eventWebsite,
-          'Zip Code': data.eventPostalCode,
-          'Tell us about your event': data.eventDescription,
-          'Mailing Address': data.userAddress,
-          'Address Line 1': data.addressLine1,
-          City: data.addressCity,
-          State: data.addressState,
-          'Address Country': data.addressCountry,
-          'Address Country Code': data.addressCountryCode,
-          'Event Location': data.eventLocation,
-          'Event Country Code': data.eventCountryCode,
-          'Have you used HCB for any previous events?':
-            data.returningUser === 'true'
-              ? 'Yes, I have used HCB before'
-              : 'No, first time!',
-          'How did you hear about HCB?': data.referredBy,
-          Transparent:
-            data.transparent === 'true' ? 'Yes, please!' : 'No, thanks.',
-          'HCB account URL': `https://hcb.hackclub.com/${r.slug}`,
-          'Contact Option': data.contactOption,
-          'Slack Username': data.slackUsername,
-          Accommodations: data.accommodations,
-          'HCB ID': r.id
-        })
-        res.writeHead(302, { Location: '/hcb/apply/success' }).end()
-      })
-      .catch(error => {
-        console.error(error)
-        res.writeHead(500, {
-          Location: `/hcb/apply?step=3&airtable-error=${error}`
-        })
-      })
-  } else {
+  if (req.method !== 'POST') {
     res.status(405).json({ status: 'error', error: 'Must send POST request' })
+    return
   }
+
+  const data = req.body
+
+  await fetch('https://hcb.hackclub.com/api/v1/events/create_demo', {
+    body: JSON.stringify({
+      email: data.userEmail,
+      name: data.eventName,
+      country: getCode(data.eventLocation) || '',
+      postal_code: data.eventPostalCode || '',
+      transparent: data.transparent
+    }),
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${process.env.HCB_API_TOKEN || ''}`
+    }
+  })
+    .then(r => r.json())
+    .then(async r => {
+      await applicationsTable.create({
+        'First Name': data.firstName,
+        'Last Name': data.lastName,
+        'Email Address': data.userEmail,
+        'Phone Number': data.userPhone,
+        'Date of Birth': data.userBirthday,
+        'Event Name': data.eventName,
+        'Event Website': data.eventWebsite,
+        'Zip Code': data.eventPostalCode,
+        'Tell us about your event': data.eventDescription,
+        'Mailing Address': data.userAddress,
+        'Address Line 1': data.addressLine1,
+        City: data.addressCity,
+        State: data.addressState,
+        'Address Country': data.addressCountry,
+        'Address Country Code': data.addressCountryCode,
+        'Event Location': data.eventLocation,
+        'Event Country Code': data.eventCountryCode,
+        'Have you used HCB for any previous events?':
+          data.returningUser === 'true'
+            ? 'Yes, I have used HCB before'
+            : 'No, first time!',
+        'How did you hear about HCB?': data.referredBy,
+        Transparent:
+          data.transparent === 'true' ? 'Yes, please!' : 'No, thanks.',
+        'HCB account URL': `https://hcb.hackclub.com/${r.slug}`,
+        'Contact Option': data.contactOption,
+        'Slack Username': data.slackUsername,
+        Accommodations: data.accommodations,
+        'HCB ID': r.id
+      })
+      res.writeHead(302, { Location: '/hcb/apply/success' }).end()
+    })
+    .catch(error => {
+      console.error(error)
+      res.writeHead(500, {
+        Location: `/hcb/apply?step=3&airtable-error=${error}`
+      })
+    })
 }

From c5335b1e386cd0155aea0f26c2f17284c1da7bd9 Mon Sep 17 00:00:00 2001
From: Gary Tou <gary@garytou.com>
Date: Fri, 25 Oct 2024 21:21:32 -0700
Subject: [PATCH 04/10] Show form errors on `textarea`s

---
 components/fiscal-sponsorship/apply/form-container.js | 3 +++
 components/fiscal-sponsorship/apply/org-adult-form.js | 1 +
 2 files changed, 4 insertions(+)

diff --git a/components/fiscal-sponsorship/apply/form-container.js b/components/fiscal-sponsorship/apply/form-container.js
index d544335a..aa8707f4 100644
--- a/components/fiscal-sponsorship/apply/form-container.js
+++ b/components/fiscal-sponsorship/apply/form-container.js
@@ -13,6 +13,9 @@ const formContainer = forwardRef(({ children, ...props }, ref) => {
         minHeight: '100dvb',
         '&.has-errors div[aria-required="true"] input:placeholder-shown': {
           borderColor: 'primary'
+        },
+        '&.has-errors div[aria-required="true"] textarea:placeholder-shown': {
+          borderColor: 'primary'
         }
       }}
       {...props}
diff --git a/components/fiscal-sponsorship/apply/org-adult-form.js b/components/fiscal-sponsorship/apply/org-adult-form.js
index 5aa98f69..382c26e8 100644
--- a/components/fiscal-sponsorship/apply/org-adult-form.js
+++ b/components/fiscal-sponsorship/apply/org-adult-form.js
@@ -43,6 +43,7 @@ export default function OrganizationAdultForm({ requiredFields }) {
             <Textarea
               name="eventPoliticalActivity"
               id="eventPoliticalActivity"
+              placeholder="We are involved in..."
               rows={3}
               sx={{
                 resize: 'vertical'

From e853857ad1fb64704ce103a7e15419b15ad4d601 Mon Sep 17 00:00:00 2001
From: Gary Tou <gary@garytou.com>
Date: Fri, 25 Oct 2024 21:21:32 -0700
Subject: [PATCH 05/10] Show conditional acceptance/repeonse ETA

---
 components/fiscal-sponsorship/apply/submit.js | 7 ++++++-
 pages/fiscal-sponsorship/apply/success.js     | 7 +++++--
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/components/fiscal-sponsorship/apply/submit.js b/components/fiscal-sponsorship/apply/submit.js
index d42c36a1..cea7226e 100644
--- a/components/fiscal-sponsorship/apply/submit.js
+++ b/components/fiscal-sponsorship/apply/submit.js
@@ -58,7 +58,12 @@ export function onSubmit({
   if (!formError) {
     setIsSubmitting(true)
     sendApplication().then(() => {
-      router.push('/fiscal-sponsorship/apply/success')
+      const isAdult = formData.get('eventTeenagerLed') !== 'true'
+      const acceptanceEta = isAdult
+        ? 'within two weeks'
+        : 'within two business days'
+
+      router.push(`/fiscal-sponsorship/apply/success?eta=${acceptanceEta}`)
     })
   }
   return
diff --git a/pages/fiscal-sponsorship/apply/success.js b/pages/fiscal-sponsorship/apply/success.js
index 1ce237f5..81e89697 100644
--- a/pages/fiscal-sponsorship/apply/success.js
+++ b/pages/fiscal-sponsorship/apply/success.js
@@ -2,6 +2,7 @@ import { useEffect } from 'react'
 import { Container, Text, Link, Image } from 'theme-ui'
 import JSConfetti from 'js-confetti'
 import { Balancer } from 'react-wrap-balancer'
+import { useRouter } from 'next/router'
 
 function fireConfetti() {
   const jsConfetti = new JSConfetti()
@@ -24,6 +25,9 @@ export default function ApplicationSuccess() {
     fireConfetti()
   }, [])
 
+  const router = useRouter()
+  const eta = router.query["eta"] || "soon" // default value
+
   return (
     <Container
       variant="narrow"
@@ -51,8 +55,7 @@ export default function ApplicationSuccess() {
         </Text>
         <Text as="p" variant="lead">
           <Balancer>
-            We’ll review your application and get back to you within two
-            business days.
+            We’ll review your application and get back to you {eta}.
           </Balancer>
         </Text>
       </header>

From 9062fcf7b35ddc112803083772ddcc910fe3c237 Mon Sep 17 00:00:00 2001
From: Gary Tou <gary@garytou.com>
Date: Fri, 25 Oct 2024 21:21:32 -0700
Subject: [PATCH 06/10] [API] Drop unnecessary redirect

We `router.push` to the success screen. So, the redirect is unnecessary.
---
 pages/api/fiscal-sponsorship/apply.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/api/fiscal-sponsorship/apply.js b/pages/api/fiscal-sponsorship/apply.js
index d77b7890..4565e835 100644
--- a/pages/api/fiscal-sponsorship/apply.js
+++ b/pages/api/fiscal-sponsorship/apply.js
@@ -62,7 +62,7 @@ export default async function handler(req, res) {
         Accommodations: data.accommodations,
         'HCB ID': r.id
       })
-      res.writeHead(302, { Location: '/hcb/apply/success' }).end()
+      res.status(200).end();
     })
     .catch(error => {
       console.error(error)

From 6ebc24c982652d760c0ab6cb508046f3bbcb8f01 Mon Sep 17 00:00:00 2001
From: Gary Tou <gary@garytou.com>
Date: Fri, 25 Oct 2024 21:21:32 -0700
Subject: [PATCH 07/10] Fix bug with unsynced state on page load

---
 .../fiscal-sponsorship/apply/org-adult-form.js      | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/components/fiscal-sponsorship/apply/org-adult-form.js b/components/fiscal-sponsorship/apply/org-adult-form.js
index 382c26e8..08efeef2 100644
--- a/components/fiscal-sponsorship/apply/org-adult-form.js
+++ b/components/fiscal-sponsorship/apply/org-adult-form.js
@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { Input, Select, Textarea } from 'theme-ui'
 import Field from './field'
 import useOrganizationI18n from '../organizationI18n'
@@ -9,6 +9,17 @@ export default function OrganizationAdultForm({ requiredFields }) {
 
   const onTeenagerLedChange = e => setTeenagerLed(e.target.value)
 
+  useEffect(() => {
+    // [@garyhtou] welp... this exists because the Field component will cache
+    // input values and set them on page load. It does it by directly setting
+    // `input.value` with JavaScript; bypassing React. Because of that, the
+    // `teenagerLed` state may not be synced with the DOM input value. This code
+    // syncs `teenagerLed` with the DOM input value.
+    // NOTE: This depends on Field's useEffect hook to run first.
+    const eventTeenagerLedElm = document.getElementById('eventTeenagerLed')
+    setTeenagerLed(eventTeenagerLedElm.value)
+  }, [])
+
   return (
     <>
       <Field

From 12906ba9e8d1bf5a4a8bca55ff777359f743ec3f Mon Sep 17 00:00:00 2001
From: Gary Tou <gary@garytou.com>
Date: Fri, 25 Oct 2024 21:21:33 -0700
Subject: [PATCH 08/10] Clear session storage items of removed fields

---
 .../fiscal-sponsorship/apply/org-adult-form.js      | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/components/fiscal-sponsorship/apply/org-adult-form.js b/components/fiscal-sponsorship/apply/org-adult-form.js
index 08efeef2..db6231ef 100644
--- a/components/fiscal-sponsorship/apply/org-adult-form.js
+++ b/components/fiscal-sponsorship/apply/org-adult-form.js
@@ -7,7 +7,16 @@ export default function OrganizationAdultForm({ requiredFields }) {
   const org = useOrganizationI18n()
   const [teenagerLed, setTeenagerLed] = useState('true')
 
-  const onTeenagerLedChange = e => setTeenagerLed(e.target.value)
+  const onTeenagerLedChange = e => {
+    const newValue = e.target.value
+    setTeenagerLed(newValue)
+
+    if (newValue === 'true') {
+      // Clear cache of removed fields
+      sessionStorage.removeItem('bank-signup-eventPoliticalActivity')
+      sessionStorage.removeItem('bank-signup-eventAnnualBudget')
+    }
+  }
 
   useEffect(() => {
     // [@garyhtou] welp... this exists because the Field component will cache
@@ -43,7 +52,7 @@ export default function OrganizationAdultForm({ requiredFields }) {
         </Select>
       </Field>
 
-      {teenagerLed === 'false' && (
+      {teenagerLed !== 'true' && (
         <>
           <Field
             name="eventPoliticalActivity"

From 545c15f141b7cd723ee9d42b1249dbe4780298af Mon Sep 17 00:00:00 2001
From: Gary Tou <gary@garytou.com>
Date: Fri, 25 Oct 2024 21:21:33 -0700
Subject: [PATCH 09/10] POST new fields to Airtable

---
 pages/api/fiscal-sponsorship/apply.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/pages/api/fiscal-sponsorship/apply.js b/pages/api/fiscal-sponsorship/apply.js
index 4565e835..a10d521e 100644
--- a/pages/api/fiscal-sponsorship/apply.js
+++ b/pages/api/fiscal-sponsorship/apply.js
@@ -60,6 +60,9 @@ export default async function handler(req, res) {
         'Contact Option': data.contactOption,
         'Slack Username': data.slackUsername,
         Accommodations: data.accommodations,
+        'Teenager Led?': data.eventTeenagerLed === 'true',
+        '(Adults) Political Activity': data.eventPoliticalActivity,
+        '(Adults) Annual Budget': parseInt(data.eventAnnualBudget),
         'HCB ID': r.id
       })
       res.status(200).end();

From 80142fa86588f6c2a4071393ee5fdcc7e5b83f8b Mon Sep 17 00:00:00 2001
From: Gary Tou <gary@garytou.com>
Date: Fri, 25 Oct 2024 21:32:14 -0700
Subject: [PATCH 10/10] Default to not teenager led

---
 components/fiscal-sponsorship/apply/org-adult-form.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/fiscal-sponsorship/apply/org-adult-form.js b/components/fiscal-sponsorship/apply/org-adult-form.js
index db6231ef..4331c935 100644
--- a/components/fiscal-sponsorship/apply/org-adult-form.js
+++ b/components/fiscal-sponsorship/apply/org-adult-form.js
@@ -5,7 +5,7 @@ import useOrganizationI18n from '../organizationI18n'
 
 export default function OrganizationAdultForm({ requiredFields }) {
   const org = useOrganizationI18n()
-  const [teenagerLed, setTeenagerLed] = useState('true')
+  const [teenagerLed, setTeenagerLed] = useState('false')
 
   const onTeenagerLedChange = e => {
     const newValue = e.target.value