Guest form components for application process

[johnwroge]

Closes #644

What changes did you make?

• Created the first three form elements for the guest application workflow including a welcome, expectations, and basic form.

• Updated the guest application tracker to 'in progress' to allow for the application to be accessed.

• Added a route element to the guest application context wrapper to allow for the forms to be accessed within the stepper component and updated the stepper to include these forms.

• These changes were built from Jose's existing branch detailed in #640

Rationale behind the changes?

Forms are needed for guests to enter their personal information for the guest application process. They are needed to store the values in the context file to eventually be sent to the backend API when it is ready to be connected.

The routes needed for this workflow were added to the main.tsx file so they are accessible to the user and developer. I updated two components ( to allow access from both the nav bar and guest application tracker.

• Testing done for these changes

• Tests were run in the frontend and backend directories to verify no side effects with existing sections.
• Context values were tested to show they were being updated based on form input.
• Additional unit tests will need to be added in a separate pull request.

What did you learn or can share that is new?(optional)

Screenshots of Proposed Changes Of The Website (if any, please do not screen shot code changes)

Visuals before changes are applied

N/A 

Visuals after changes are applied

https://github.com/hackforla/HomeUniteUs/assets/72668920/c7047558-c19c-4068-a0e2-087bb72d48b1 

[JpadillaCoding]

Hey John, I took a look at the PR from a functionality standpoint and disregarded any design modifications since they're still being worked on.

One thing that needs to be done for each form is that we need to handle errors since the data is being validated. For example, if a user did not fill out a field or if something was not formatted correctly then the form needs to notify them of that.

I built out a schema that can be found utils/GuestApplicationSchema.ts. Note that the schema is an array with each iteration correlating to the step the form is on and would need to be modified to match the questions being asked. I've set the schema questions with the current designs, but as the design changes then the validation schema needs to be updated to match which questions are being asked per page and also what each question validates for needs to be updated. Here's an example using the error handler along with helper text that guides the user to what is wrong.

<TextField
  fullWidth                   
  id="fullName"
  name="fullName"  
  label="Full Name"           
  value={fullName}            
  onChange={handleChange}
  onBlur={handleBlur}         
  error={touched.fullName && Boolean(errors.fullName)}
  helperText={touched.fullName && errors.fullName}      
/>

This also raises the question of how the design team wants to handle showing error messages. I've made a comment on the figma file for clarification. One more thing of note is that since the schema file is an array correlating to the current step, I needed to add two nulls to the array to correlate to the welcome and expectations page so that the validation will work. Here is what adding the errors and helper text would look like.

[johnwroge]

Thanks for reviewing this Jose. I have a few questions related to how the stepper is set up and the handle submit functionality that has not been implemented.

Right now the step doesn't match the validation schema because the validation isn't needed until form 3 (basic info) so I need to find a way to start this at the right index by either adding additional objects to the guest application schema array or through another method.

The other problem is the handle submit function in forgotPassword is handled inside that component which is different from how these forms are set up. Are we trying to handle the form validation through each component where every page invokes a separate form validation function?

[erikguntner]

@johnwroge this all looks good to me. The only request I have is to please add the forgot password code tests back to the repo before we merge this. Instead, just skip them or comment them out so we still have them for the future when we get the testing issue figured out.

[johnwroge]

Thanks @erikguntner, I added the tests back in. I must have deleted that file and forgot to add it back in.

[erikguntner]

Thanks @johnwroge. All good