[Eligibility Questionnaire] Add form validation (#327)

housingbayarea · Aug 5, 2021 · 1bd7556 · 1bd7556
1 parent 7320e38
commit 1bd7556
Show file tree

Hide file tree

Showing 11 changed files with 42 additions and 46 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,6 +12,7 @@ All notable changes to this project will be documented in this file. The format
 
 - Added:
   - Added fields to Listing and Property to accommodate Detroit listing data ([#311](https://github.com/CityOfDetroit/bloom/pull/311))
+  - Add eligibility questionnaire validation ([#327](https://github.com/CityOfDetroit/bloom/pull/327))
 
 ## Detroit Team M8
 

diff --git a/sites/public/pages/eligibility/age.tsx b/sites/public/pages/eligibility/age.tsx
@@ -20,11 +20,23 @@ import { ELIGIBILITY_ROUTE, ELIGIBILITY_SECTIONS } from "../../lib/constants"
 
 const EligibilityAge = () => {
   const router = useRouter()
+  // Check if they need to be 18 or older to apply?
+  const MIN_AGE = 0
+  const MAX_AGE = 120
 
   /* Form Handler */
-  const { handleSubmit, register } = useForm()
-  const onSubmit = () => {
-    // Not yet implemented.
+  // eslint-disable-next-line @typescript-eslint/unbound-method
+  const { handleSubmit, register, errors, setError } = useForm()
+  const onSubmit = (data) => {
+    if (isAgeValid(data.age)) {
+      void router.push(`/${ELIGIBILITY_ROUTE}/${ELIGIBILITY_SECTIONS[3]}`)
+    } else {
+      setError("age", { type: "manual", message: "" })
+    }
+  }
+
+  function isAgeValid(age: number) {
+    return age >= MIN_AGE && age <= MAX_AGE
   }
 
   return (
@@ -53,18 +65,16 @@ const EligibilityAge = () => {
               describedBy="age-description"
               isLabelAfterField={true}
               inputProps={{ maxLength: 3 }}
+              type={"number"}
               validation={{ required: true }}
+              error={errors.age}
+              errorMessage={t("eligibility.age.error")}
               register={register}
             />
           </div>
           <div className="form-card__pager">
             <div className="form-card__pager-row primary">
-              <Button
-                styleType={AppearanceStyleType.primary}
-                onClick={() => router.push(`/${ELIGIBILITY_ROUTE}/${ELIGIBILITY_SECTIONS[3]}`)}
-              >
-                {t("t.next")}
-              </Button>
+              <Button styleType={AppearanceStyleType.primary}>{t("t.next")}</Button>
             </div>
           </div>
         </Form>

diff --git a/sites/public/pages/eligibility/bedrooms.tsx b/sites/public/pages/eligibility/bedrooms.tsx
@@ -21,9 +21,10 @@ const EligibilityBedrooms = () => {
   const router = useRouter()
 
   /* Form Handler */
+  // eslint-disable-next-line @typescript-eslint/unbound-method
   const { handleSubmit, register, errors } = useForm()
   const onSubmit = () => {
-    // Not yet implemented.
+    void router.push(`/${ELIGIBILITY_ROUTE}/${ELIGIBILITY_SECTIONS[2]}`)
   }
 
   const preferredUnitOptions = [
@@ -64,12 +65,7 @@ const EligibilityBedrooms = () => {
           </div>
           <div className="form-card__pager">
             <div className="form-card__pager-row primary">
-              <Button
-                styleType={AppearanceStyleType.primary}
-                onClick={() => router.push(`/${ELIGIBILITY_ROUTE}/${ELIGIBILITY_SECTIONS[2]}`)}
-              >
-                {t("t.next")}
-              </Button>
+              <Button styleType={AppearanceStyleType.primary}>{t("t.next")}</Button>
             </div>
           </div>
         </Form>

diff --git a/sites/public/pages/eligibility/disability.tsx b/sites/public/pages/eligibility/disability.tsx
@@ -21,9 +21,10 @@ const EligibilityDisability = () => {
   const router = useRouter()
 
   /* Form Handler */
+  // eslint-disable-next-line @typescript-eslint/unbound-method
   const { handleSubmit, register, errors } = useForm()
   const onSubmit = () => {
-    // Not yet implemented.
+    void router.push(`/${ELIGIBILITY_ROUTE}/${ELIGIBILITY_SECTIONS[4]}`)
   }
 
   const disabilityValues = [
@@ -75,12 +76,7 @@ const EligibilityDisability = () => {
           </div>
           <div className="form-card__pager">
             <div className="form-card__pager-row primary">
-              <Button
-                styleType={AppearanceStyleType.primary}
-                onClick={() => router.push(`/${ELIGIBILITY_ROUTE}/${ELIGIBILITY_SECTIONS[4]}`)}
-              >
-                {t("t.next")}
-              </Button>
+              <Button styleType={AppearanceStyleType.primary}>{t("t.next")}</Button>
             </div>
           </div>
         </Form>

diff --git a/sites/public/pages/eligibility/income.tsx b/sites/public/pages/eligibility/income.tsx
@@ -20,9 +20,10 @@ const EligibilityIncome = () => {
   const incomeRanges = ["below10k", "10kTo20k", "30kTo40k", "40kTo50k", "over50k"]
 
   /* Form Handler */
+  // eslint-disable-next-line @typescript-eslint/unbound-method
   const { handleSubmit, register } = useForm()
   const onSubmit = () => {
-    // Not yet implemented.
+    void router.push(`/${ELIGIBILITY_ROUTE}/${ELIGIBILITY_SECTIONS[5]}`)
   }
 
   return (
@@ -49,7 +50,7 @@ const EligibilityIncome = () => {
               label={t("eligibility.income.label")}
               describedBy="income-description"
               validation={{ required: true }}
-              defaultValue={t("eligibility.income.ranges")}
+              defaultValue={t("eligibility.income.ranges.below10k")}
               register={register}
               controlClassName="control"
               options={incomeRanges}
@@ -58,12 +59,7 @@ const EligibilityIncome = () => {
           </div>
           <div className="form-card__pager">
             <div className="form-card__pager-row primary">
-              <Button
-                styleType={AppearanceStyleType.primary}
-                onClick={() => router.push(`/${ELIGIBILITY_ROUTE}/${ELIGIBILITY_SECTIONS[5]}`)}
-              >
-                {t("t.next")}
-              </Button>
+              <Button styleType={AppearanceStyleType.primary}>{t("t.next")}</Button>
             </div>
           </div>
         </Form>

diff --git a/sites/public/pages/eligibility/section8.tsx b/sites/public/pages/eligibility/section8.tsx
@@ -15,6 +15,7 @@ import { useForm } from "react-hook-form"
 
 const EligibilitySection8 = () => {
   /* Form Handler */
+  // eslint-disable-next-line @typescript-eslint/unbound-method
   const { handleSubmit, register, errors } = useForm()
   const onSubmit = () => {
     // Not yet implemented.
@@ -63,10 +64,7 @@ const EligibilitySection8 = () => {
           </div>
           <div className="form-card__pager">
             <div className="form-card__pager-row primary">
-              {/*TODO: Implement onClick method to display results.*/}
-              <Button styleType={AppearanceStyleType.primary} onClick={() => {}}>
-                {t("t.done")}
-              </Button>
+              <Button styleType={AppearanceStyleType.primary}>{t("t.done")}</Button>
             </div>
           </div>
         </Form>

diff --git a/sites/public/pages/eligibility/welcome.tsx b/sites/public/pages/eligibility/welcome.tsx
@@ -22,7 +22,7 @@ const EligibilityWelcome = () => {
   /* Form Handler */
   const { handleSubmit } = useForm()
   const onSubmit = () => {
-    // Not implemented yet.
+    void router.push(`/${ELIGIBILITY_ROUTE}/${ELIGIBILITY_SECTIONS[1]}`)
   }
 
   return (
@@ -44,12 +44,7 @@ const EligibilityWelcome = () => {
         <Form onSubmit={handleSubmit(onSubmit)}>
           <div className="form-card__pager">
             <div className="form-card__pager-row primary">
-              <Button
-                styleType={AppearanceStyleType.primary}
-                onClick={() => router.push(`/${ELIGIBILITY_ROUTE}/${ELIGIBILITY_SECTIONS[1]}`)}
-              >
-                {t("t.next")}
-              </Button>
+              <Button styleType={AppearanceStyleType.primary}>{t("t.next")}</Button>
             </div>
           </div>
         </Form>

diff --git a/ui-components/src/locales/ar.json b/ui-components/src/locales/ar.json
@@ -1240,7 +1240,8 @@
         "age": {
             "prompt": "كم عمرك؟",
             "description": "تقبل بعض العقارات الأفراد الذين تزيد أعمارهم عن 62 عامًا فقط.",
-            "label": "سنة"
+            "label": "سنة",
+            "error": "الرجاء إدخال عمر صالح."
         },
         "disability": {
             "prompt": "هل لديك اعاقة؟",

diff --git a/ui-components/src/locales/bn.json b/ui-components/src/locales/bn.json
@@ -1240,7 +1240,8 @@
         "age": {
             "prompt": "আপনার বয়স কত?",
             "description": "কিছু বৈশিষ্ট্য শুধুমাত্র 62 বছরের বেশি বয়সী ব্যক্তিদের গ্রহণ করে।",
-            "label": "বছর পুরনো"
+            "label": "বছর পুরনো",
+            "error": "দয়া করে একটি বৈধ বয়স লিখুন"
         },
         "disability": {
             "prompt": "আপনি একটি অক্ষমতা আছে?",

diff --git a/ui-components/src/locales/es.json b/ui-components/src/locales/es.json
@@ -1240,7 +1240,8 @@
         "age": {
             "prompt": "¿Cuántos años tienes?",
             "description": "Algunas propiedades solo aceptan personas mayores de 62 años.",
-            "label": "años"
+            "label": "años",
+            "error": "Ingrese una edad válida."
         },
         "disability": {
             "prompt": "¿Tienes alguna discapacidad?",

diff --git a/ui-components/src/locales/general.json b/ui-components/src/locales/general.json
@@ -1288,7 +1288,8 @@
     "age" : {
       "prompt": "How old are you?",
       "description": "Some properties only accept individuals over 62 years of age.",
-      "label": "years old"
+      "label": "years old",
+      "error": "Please enter a valid age."
     },
     "disability" : {
       "prompt" : "Do you have a disability?",
-Original file line number
+Diff line change
@@ Expand Up @@
     - Added:
       - Added fields to Listing and Property to accommodate Detroit listing data ([#311](https://github.com/CityOfDetroit/bloom/pull/311))
+      - Add eligibility questionnaire validation ([#327](https://github.com/CityOfDetroit/bloom/pull/327))
     ## Detroit Team M8
@@ Expand Down @@