Add friendlier validation error and fix slackUsername validation

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

@@ -15,21 +15,22 @@ export default function ApplicationForm() {
   const [formError, setFormError] = useState(null)
   const [isSubmitting, setIsSubmitting] = useState(false)
 
-  const requiredFields = [
-    'eventName',
-    'eventLocation',
-    'eventPostalCode',
-    'eventDescription',
-    'eventTeenagerLed',
-    'eventPoliticalActivity',
-    'eventAnnualBudget',
-    'firstName',
-    'lastName',
-    'userEmail',
-    'userPhone',
-    'userBirthday',
-    'slackUsername'
-  ]
+  const requiredFields = {
+    // Key: form field name
+    // Value: humanize field name used in error message
+    eventName: 'organization name',
+    eventLocation: 'organization country',
+    eventPostalCode: 'organization zip/postal code',
+    eventDescription: 'organization description',
+    eventTeenagerLed: 'are you a teenager?',
+    eventPoliticalActivity: "organization's political activity",
+    eventAnnualBudget: 'organization annual budget',
+    firstName: 'first name',
+    lastName: 'last name',
+    userEmail: 'email',
+    userPhone: 'phone number',
+    userBirthday: 'birthday',
+  }
 
   const submitButton = (
     <Button

components/fiscal-sponsorship/apply/field.js

@@ -11,7 +11,7 @@ export default function Field({
   children
 }) {
   const router = useRouter()
-  const isRequired = requiredFields.includes(name)
+  const isRequired = Object.keys(requiredFields).includes(name)
 
   /* Fill in the field input element with the value from sessionStorage.
     Note: the custom checkbox component does this in its own useEffect hook. */

components/fiscal-sponsorship/apply/submit.js

@@ -1,3 +1,5 @@
+import _ from 'lodash'
+
 async function sendApplication() {
   // Get the form data from sessionStorage
   const data = {}
@@ -22,6 +24,8 @@ async function sendApplication() {
   }
 }
 
+const isBlank = string => !string || string.trim() === ''
+
 export function onSubmit({
   event,
   router,
@@ -32,28 +36,38 @@ export function onSubmit({
   setIsSubmitting
 }) {
   event.preventDefault()
-  /* Don't return from inside the loop since
-        we want all input values to be saved every time */
-  let wasError = false
-
   const formData = new FormData(form.current)
+  const missingFields = []
+
+  const conditionalRequiredFields = _.cloneDeep(requiredFields) // Deep clone to prevent modification from leaking
+  if (formData.get('contactOption') === 'Slack') {
+    // If contact option is Slack, they must provide a Slack username
+    conditionalRequiredFields.slackUsername = 'slack username'
+  }
+
+  console.log({ conditionalRequiredFields })
 
-  // Save form data
   formData.forEach((value, key) => {
+    // Save form data
     sessionStorage.setItem('bank-signup-' + key, value)
 
     // Check if there are empty required fields.
     if (
-      ((!value || value.trim() === '') && requiredFields.includes(key)) ||
-      (formData.get('contactOption') === 'slack' &&
-        (!formData.get('slackUsername') != null ||
-          formData.get('slackUsername') === '')) // I'm so sorry for this
+      isBlank(value) &&
+      Object.keys(conditionalRequiredFields).includes(key)
     ) {
-      setFormError('Please fill out all required fields.')
-      wasError = true
+      missingFields.push(conditionalRequiredFields[key])
     }
   })
-  if (wasError) return
+
+  if (missingFields.length !== 0) {
+    console.log({ missingFields })
+
+    setFormError(
+      `Please fill out all required fields: ${missingFields.join(', ')}`
+    )
+    return // Don't submit application
+  }
 
   if (!formError) {
     setIsSubmitting(true)