We're working with community non-profits who have a Host Home or empty bedrooms initiative to develop a workflow management tool to make the process scalable (across all providers), reduce institutional bias, and effectively capture data.
Installed the @mui/x-date-pickers package to access date picker components
Added localization provider to the root of the application
Created DatePickerField component that wraps the MUI date picker and used it to collect the guest's date of birthday, as well as the additional guest's date of birth.
Created a new field type for dates along with validation schema
Created new route for review page
Created a button that redirects the user to the review page. I made a component from the existing sidebar button that I could use for the review button as well.
Rendered submit application button if the user on the profile review page.
Created the profile review page. The page iterates over all field groups and displays the corresponding responses.
Each group on the review page has an edit button that navigates the user to the corresponding section in the profile
Added and option in app/src/utils/test/handlers/profile.ts that allows you to render a full list of responses. This was used to simulate a completed application. You can comment this out in the same file to return an empty array.
Moved the functions responsible for creating initial form values and building the validation schemas into separate files.
Testing done for these changes
Simulated a completed application to render for the review page.
Screenshots of Proposed Changes Of The Website (if any, please do not screen shot code changes)
Visuals after changes are applied
### Date fields for additional guests
### Date field for guest
### Review page
https://github.com/user-attachments/assets/1c562ae1-4eaf-439a-a99a-8808a1df46a6
Closes #710 #713
What changes did you make?
@mui/x-date-pickerspackage to access date picker componentsDatePickerFieldcomponent that wraps the MUI date picker and used it to collect the guest's date of birthday, as well as the additional guest's date of birth.app/src/utils/test/handlers/profile.tsthat allows you to render a full list of responses. This was used to simulate a completed application. You can comment this out in the same file to return an empty array.Testing done for these changes
Screenshots of Proposed Changes Of The Website (if any, please do not screen shot code changes)
Visuals after changes are applied
### Date fields for additional guests