Merge pull request #741 from CityOfDetroit/feature/add-eligibility-di…

…sclaimer

Feature/add eligibility disclaimer

sites/public/__tests__/eligibility_questionnaire/EligibilityAge.test.tsx

@@ -49,6 +49,16 @@ describe("<EligibilityAge>", () => {
     expect(mockRouter.push.mock.calls[0][0]).toBe("/eligibility/disability")
   })
 
+  it("Clicks the Finish button", async () => {
+    await act(async () => {
+      render(<EligibilityAge />)
+      fireEvent.click(screen.getByRole("button", { name: "Finish" }))
+    })
+
+    expect(mockRouter.push.mock.calls.length).toBe(1)
+    expect(mockRouter.push.mock.calls[0][0]).toBe("/eligibility/disclaimer")
+  })
+
   afterEach(() => {
     jest.clearAllMocks()
   })

sites/public/__tests__/eligibility_questionnaire/EligibilityDisability.test.tsx

@@ -49,6 +49,16 @@ describe("<EligibilityDisability>", () => {
     expect(mockRouter.push.mock.calls[0][0]).toBe("/eligibility/income")
   })
 
+  it("Clicks the Finish button", async () => {
+    await act(async () => {
+      render(<EligibilityDisability />)
+      fireEvent.click(screen.getByRole("button", { name: "Finish" }))
+    })
+
+    expect(mockRouter.push.mock.calls.length).toBe(1)
+    expect(mockRouter.push.mock.calls[0][0]).toBe("/eligibility/disclaimer")
+  })
+
   afterEach(() => {
     jest.clearAllMocks()
   })

sites/public/__tests__/eligibility_questionnaire/EligibilityDisclaimer.test.tsx

@@ -0,0 +1,35 @@
+import { render, fireEvent, screen } from "@testing-library/react"
+import EligibilityIncome from "../../pages/eligibility/income"
+import React from "react"
+import { act } from "react-dom/test-utils"
+import userEvent from "@testing-library/user-event"
+import EligibilityDisclaimer from "../../pages/eligibility/disclaimer"
+
+const mockRouter = {
+  push: jest.fn(),
+}
+jest.mock("next/router", () => ({
+  useRouter() {
+    return mockRouter
+  },
+}))
+
+describe("<EligibilityDisclaimer>", () => {
+  it("Renders Disclaimer page of eligibility questionnaire", () => {
+    act(() => {
+      render(<EligibilityDisclaimer />)
+    })
+    expect(screen.getByRole("heading", { name: "Disclaimer" })).toBeInTheDocument()
+    expect(screen.getByRole("button", { name: "View Listings" })).toBeInTheDocument()
+  })
+
+  it("Clicks the Finish button", async () => {
+    await act(async () => {
+      render(<EligibilityDisclaimer />)
+      fireEvent.click(screen.getByRole("button", { name: "View Listings" }))
+    })
+
+    expect(mockRouter.push.mock.calls.length).toBe(1)
+    expect(mockRouter.push.mock.calls[0][0]).toContain("/listings")
+  })
+})

sites/public/__tests__/eligibility_questionnaire/EligibilityHouseholdSize.test.tsx

@@ -40,4 +40,19 @@ describe("<EligibilityHouseholdSize>", () => {
     expect(mockRouter.push.mock.calls.length).toBe(1)
     expect(mockRouter.push.mock.calls[0][0]).toBe("/eligibility/age")
   })
+
+  it("Clicks the Finish button", async () => {
+    await act(async () => {
+      render(<EligibilityHouseholdSize />)
+      userEvent.selectOptions(screen.getByRole("combobox"), "two")
+      fireEvent.click(screen.getByRole("button", { name: "Finish" }))
+    })
+
+    expect(mockRouter.push.mock.calls.length).toBe(1)
+    expect(mockRouter.push.mock.calls[0][0]).toBe("/eligibility/disclaimer")
+  })
+
+  afterEach(() => {
+    jest.clearAllMocks()
+  })
 })

sites/public/__tests__/eligibility_questionnaire/EligibilityIncome.test.tsx

@@ -21,17 +21,17 @@ describe("<EligibilityIncome>", () => {
     expect(
       screen.getByRole("heading", { name: "What is your total household annual income?" })
     ).toBeInTheDocument()
-    expect(screen.getByRole("button", { name: "Done" })).toBeInTheDocument()
+    expect(screen.getByRole("button", { name: "Finish" })).toBeInTheDocument()
   })
 
-  it("Clicks the Done button", async () => {
+  it("Clicks the Finish button", async () => {
     await act(async () => {
       render(<EligibilityIncome />)
       userEvent.selectOptions(screen.getByRole("combobox"), "10kTo20k")
-      fireEvent.click(screen.getByRole("button", { name: "Done" }))
+      fireEvent.click(screen.getByRole("button", { name: "Finish" }))
     })
 
     expect(mockRouter.push.mock.calls.length).toBe(1)
-    expect(mockRouter.push.mock.calls[0][0]).toContain("/listings")
+    expect(mockRouter.push.mock.calls[0][0]).toContain("/eligibility/disclaimer")
   })
 })

sites/public/cypress/integration/eligibility-questionnaire.ts

@@ -41,11 +41,12 @@ describe("Verifying the eligibility questionnaire flow", () => {
     // Select "$30k to $40k"
     cy.get("select").select("30kTo40k")
 
-    // Click "Done"
-    cy.contains("Done").click()
+    // Click "Finish"
+    cy.contains("Finish").click()
+    cy.url().should("include", "/eligibility/disclaimer")
 
-    // TODO: once the "Done" button is implemented, verify that it takes the user to the correct
-    // view.
+    cy.contains("View Listings").click()
+    cy.url().should("include", "/listings")
   })
 
   // TODO: consider adding tests for incorrect inputs in the Eligibility Questionnaire.

sites/public/lib/constants.ts

@@ -1,3 +1,4 @@
 export const DATE_FORMAT = "MMMM D, YYYY"
 export const ELIGIBILITY_SECTIONS = ["welcome", "household", "age", "disability", "income"]
 export const ELIGIBILITY_ROUTE = "eligibility"
+export const ELIGIBILITY_DISCLAIMER_ROUTE = `/${ELIGIBILITY_ROUTE}/disclaimer`

sites/public/pages/eligibility/age.tsx

@@ -16,7 +16,7 @@ import { useForm } from "react-hook-form"
 import styles from "./EligibilityAge.module.scss"
 import React, { useContext } from "react"
 import { useRouter } from "next/router"
-import { ELIGIBILITY_SECTIONS } from "../../lib/constants"
+import { ELIGIBILITY_DISCLAIMER_ROUTE, ELIGIBILITY_SECTIONS } from "../../lib/constants"
 import { AgeRangeType, EligibilityContext } from "../../lib/EligibilityContext"
 import FormBackLink from "../../src/forms/applications/FormBackLink"
 import { eligibilityRoute } from "../../lib/helpers"
@@ -37,7 +37,7 @@ const EligibilityAge = () => {
 
   const onClick = async (data) => {
     eligibilityRequirements.setAge(data.age)
-    await router.push(getFilterUrlLink(eligibilityRequirements))
+    await router.push(ELIGIBILITY_DISCLAIMER_ROUTE)
   }
 
   const ageValues = [
@@ -113,7 +113,7 @@ const EligibilityAge = () => {
                 className="mx-2 mt-6"
                 styleType={AppearanceStyleType.primary}
               >
-                {t("t.viewListings")}
+                {t("t.finish")}
               </Button>
             </div>
           </div>

sites/public/pages/eligibility/disability.tsx

@@ -15,7 +15,7 @@ import FormsLayout from "../../layouts/forms"
 import { useForm } from "react-hook-form"
 import React, { useContext } from "react"
 import { useRouter } from "next/router"
-import { ELIGIBILITY_SECTIONS } from "../../lib/constants"
+import { ELIGIBILITY_DISCLAIMER_ROUTE, ELIGIBILITY_SECTIONS } from "../../lib/constants"
 import { EligibilityContext } from "../../lib/EligibilityContext"
 import { eligibilityRoute } from "../../lib/helpers"
 import FormBackLink from "../../src/forms/applications/FormBackLink"
@@ -41,7 +41,7 @@ const EligibilityDisability = () => {
 
   const onClick = async (data) => {
     eligibilityRequirements.setDisability(data.disability)
-    await router.push(getFilterUrlLink(eligibilityRequirements))
+    await router.push(ELIGIBILITY_DISCLAIMER_ROUTE)
   }
 
   const disabilityValues = [
@@ -107,7 +107,7 @@ const EligibilityDisability = () => {
                 className="mx-2 mt-6"
                 styleType={AppearanceStyleType.primary}
               >
-                {t("t.viewListings")}
+                {t("t.finish")}
               </Button>
             </div>
           </div>

sites/public/pages/eligibility/disclaimer.tsx

@@ -0,0 +1,38 @@
+/*
+Eligibility Disclaimer
+Disclaimer about filtering and waitlists.
+*/
+import { AppearanceStyleType, Button, FormCard, t, Form } from "@bloom-housing/ui-components"
+import FormsLayout from "../../layouts/forms"
+import { useForm } from "react-hook-form"
+import React, { useContext } from "react"
+import { useRouter } from "next/router"
+import { EligibilityContext } from "../../lib/EligibilityContext"
+import { getFilterUrlLink } from "../../lib/filterUrlLink"
+
+const EligibilityDisclaimer = () => {
+  const router = useRouter()
+  const { eligibilityRequirements } = useContext(EligibilityContext)
+
+  /* Form Handler */
+  const { handleSubmit } = useForm()
+  const onSubmit = async (data) => {
+    await router.push(getFilterUrlLink(eligibilityRequirements))
+  }
+
+  return (
+    <FormsLayout>
+      <header className="eligibility-disclaimer-header">
+        <h1 className="form-card__header_title">{t("eligibility.progress.sections.disclaimer")}</h1>
+      </header>
+      <div className="form-card__pager-row px-16">
+        <p className="field-note py-2">{t("eligibility.disclaimer.description")}</p>
+      </div>
+      <Form className="eligibility-disclaimer-submit-container" onSubmit={handleSubmit(onSubmit)}>
+        <Button styleType={AppearanceStyleType.primary}>{t("t.viewListings")}</Button>
+      </Form>
+    </FormsLayout>
+  )
+}
+
+export default EligibilityDisclaimer

sites/public/pages/eligibility/household.tsx

@@ -15,11 +15,10 @@ import FormsLayout from "../../layouts/forms"
 import { useForm } from "react-hook-form"
 import React, { useContext } from "react"
 import { useRouter } from "next/router"
-import { ELIGIBILITY_SECTIONS } from "../../lib/constants"
+import { ELIGIBILITY_DISCLAIMER_ROUTE, ELIGIBILITY_SECTIONS } from "../../lib/constants"
 import { EligibilityContext } from "../../lib/EligibilityContext"
 import FormBackLink from "../../src/forms/applications/FormBackLink"
 import { eligibilityRoute } from "../../lib/helpers"
-import { getFilterUrlLink } from "../../lib/filterUrlLink"
 
 const EligibilityHouseholdSize = () => {
   const router = useRouter()
@@ -42,7 +41,7 @@ const EligibilityHouseholdSize = () => {
 
   const onClick = async (data) => {
     eligibilityRequirements.setHouseholdSizeCount(data.householdSize)
-    await router.push(getFilterUrlLink(eligibilityRequirements))
+    await router.push(ELIGIBILITY_DISCLAIMER_ROUTE)
   }
 
   if (eligibilityRequirements.completedSections <= CURRENT_PAGE) {
@@ -97,7 +96,7 @@ const EligibilityHouseholdSize = () => {
                 className="mx-2 mt-6"
                 styleType={AppearanceStyleType.primary}
               >
-                {t("t.viewListings")}
+                {t("t.finish")}
               </Button>
             </div>
           </div>

sites/public/pages/eligibility/income.tsx

@@ -7,7 +7,7 @@ import React, { useContext } from "react"
 import { FormCard } from "@bloom-housing/ui-components/src/blocks/FormCard"
 import { t } from "@bloom-housing/ui-components/src/helpers/translator"
 import { ProgressNav } from "@bloom-housing/ui-components/src/navigation/ProgressNav"
-import { ELIGIBILITY_SECTIONS } from "../../lib/constants"
+import { ELIGIBILITY_DISCLAIMER_ROUTE, ELIGIBILITY_SECTIONS } from "../../lib/constants"
 import { Form } from "@bloom-housing/ui-components/src/forms/Form"
 import { Button } from "@bloom-housing/ui-components/src/actions/Button"
 import { AppearanceStyleType, Select } from "@bloom-housing/ui-components"
@@ -34,7 +34,7 @@ const EligibilityIncome = () => {
   })
   const onSubmit = async (data) => {
     eligibilityRequirements.setIncome(data.income)
-    await router.push(getFilterUrlLink(eligibilityRequirements))
+    await router.push(ELIGIBILITY_DISCLAIMER_ROUTE)
   }
 
   if (eligibilityRequirements.completedSections <= CURRENT_PAGE) {
@@ -81,7 +81,7 @@ const EligibilityIncome = () => {
           </div>
           <div className="form-card__pager">
             <div className="form-card__pager-row primary">
-              <Button styleType={AppearanceStyleType.primary}>{t("t.done")}</Button>
+              <Button styleType={AppearanceStyleType.primary}>{t("t.finish")}</Button>
             </div>
           </div>
         </Form>

sites/public/styles/overrides.scss

@@ -252,3 +252,12 @@ a.button.is-primary:hover {
     border-left-width: 0;
   }
 }
+
+.eligibility-disclaimer-header {
+  padding: 20px 80px;
+}
+
+.eligibility-disclaimer-submit-container {
+  text-align: center;
+  padding-bottom: 40px;
+}

ui-components/src/locales/ar.json

@@ -1222,6 +1222,7 @@
         "filter": "منقي",
         "edit": "يحرر",
         "email": "بريد إلكتروني",
+        "finish": "ينهي",
         "floor": "الأرض",
         "floors": "طوابق",
         "getDirections": "احصل على الاتجاهات",
@@ -1396,7 +1397,8 @@
                 "household": "أسرة",
                 "age": "عمر",
                 "disability": "عجز",
-                "income": "دخل"
+                "income": "دخل",
+                "disclaimer": "تنصل"
             }
         },
         "welcome": {
@@ -1440,6 +1442,9 @@
                 "over50k": "أكثر من 50000 دولار"
             }
         },
+        "disclaimer": {
+            "description": "شكرًا لك على التحقق من مدى أهليتك للحصول على سكن ميسور التكلفة. نظرًا لأنه يمكن حجز مساكن ميسورة التكلفة لفئات عمرية معينة أو مستويات دخل معينة ، فقد قمنا بتصفية قوائم العقارات لدينا بناءً على خصائص أسرتك. نأمل أن تجد المسكن الذي يلبي احتياجاتك. من المهم ملاحظة أن جزءًا كبيرًا من الإسكان الميسور التكلفة به قائمة انتظار ، لكن الاتصال بالعقارات التي تهتم بها يعد طريقة جيدة للحصول على قوائم الانتظار أو التعرف على الفتحات الفورية."
+        },
         "preferNotToSay": "افضل عدم القول"
     }
 }

ui-components/src/locales/bn.json

@@ -1222,6 +1222,7 @@
         "filter": "ছাঁকনি",
         "edit": "সম্পাদনা করুন",
         "email": "ইমেইল",
+        "finish": "শেষ করুন",
         "floor": "মেঝে",
         "floors": "মেঝে",
         "getDirections": "দিকনির্দেশ পান",
@@ -1396,7 +1397,8 @@
                 "household": "পরিবার",
                 "age": "আগে",
                 "disability": "অক্ষমতা",
-                "income": "আয়"
+                "income": "আয়",
+                "disclaimer": "দাবিত্যাগ"
             }
         },
         "welcome": {
@@ -1440,6 +1442,9 @@
                 "over50k": "$ 50,000 এরও বেশি"
             }
         },
+        "disclaimer": {
+            "description": "আপনি কীভাবে সাশ্রয়ী মূল্যের আবাসনের জন্য যোগ্য তা পরীক্ষা করার জন্য আপনাকে ধন্যবাদ। যেহেতু সাশ্রয়ী মূল্যের আবাসন নির্দিষ্ট বয়স গোষ্ঠী বা আয় স্তরের জন্য সংরক্ষিত হতে পারে, আমরা আপনার পরিবারের বৈশিষ্ট্যের উপর ভিত্তি করে আমাদের সম্পত্তি তালিকা ফিল্টার করেছি। আমরা আশা করি আপনি এমন আবাসন পাবেন যা আপনার চাহিদা পূরণ করে। এটি লক্ষ করা গুরুত্বপূর্ণ যে সাশ্রয়ী মূল্যের আবাসনের একটি ভাল অংশে একটি অপেক্ষা তালিকা রয়েছে, তবে আপনি আগ্রহী এমন বৈশিষ্ট্যগুলিকে কল করা অপেক্ষা তালিকায় যাওয়ার বা তাত্ক্ষণিক খোলার বিষয়ে শেখার একটি ভাল উপায়।"
+        },
         "preferNotToSay": "না বলা পছন্দ"
     }
 }

ui-components/src/locales/es.json

@@ -1097,6 +1097,7 @@
         "filter": "Filtrar",
         "edit": "Editar",
         "email": "Correo electrónico",
+        "finish": "Terminar",
         "floor": "piso",
         "floors": "pisos",
         "getDirections": "Obtener las direcciones",
@@ -1271,7 +1272,8 @@
                 "household": "Hogar",
                 "age": "Edad",
                 "disability": "Invalidez",
-                "income": "Ingreso"
+                "income": "Ingreso",
+                "disclaimer": "Descargo de responsabilidad"
             }
         },
         "welcome": {
@@ -1315,6 +1317,9 @@
                 "over50k": "Más de $ 50,000"
             }
         },
+        "disclaimer": {
+            "description": "Gracias por verificar cómo califica para una vivienda asequible. Debido a que las viviendas asequibles se pueden reservar para ciertos grupos de edad o niveles de ingresos, hemos filtrado nuestros listados de propiedades en función de las características de su hogar. Esperamos que encuentre una vivienda que satisfaga sus necesidades. Es importante tener en cuenta que una buena parte de las viviendas asequibles tiene una lista de espera, pero llamar a las propiedades que le interesan es una buena manera de ingresar a las listas de espera o conocer las vacantes inmediatas."
+        },
         "preferNotToSay": "Prefiero no decirlo"
     }
 }