Guest application formik context #630

[JpadillaCoding]

Closes #630

What changes did you make?

• Made a context wrapper to track the data inputted on the form.
• Made the data Validation along with errors with Yup for each input.
• Added the context wrapper ready for use to add routes
• Created Navigation buttons with the basic functionality of going to the next page, previous page, and exiting the application.
• Made a progress bar for showing the user where they are on the application.
• Added the application to the sidebar nav for easy access in development. This will be changed later on.

Rationale behind the changes?

• Context wrapper
  • Set up the initial values to empty since we are starting with a blank form. Currently, no data retrieval since we do not have a backend setup.
  • The progress bar is currently hard coded to 10 pages per the Figma file. In the future, this should dynamically change when we know the designs are final.
  • Current step is saved to local storage for the user to return to the current step
  • Validation schema is dynamically rendered based on the state value of the step the user is on so each page is validated by itself
  • stepToRouteMapping is used to control which page is rendered. Each page that is added to the route should be added here for the stepper to know where to take the user. The name should match the path name in the main file.
  • Refer to PasswordResetContext in the main file as an example of how to add routes in the context wrapper.
• Buttons
  • The current step is updated depending on the button. Since no backend logic is made yet the buttons only navigate but we intend to make these able to handle the data inputted.
• Validation
  • Most validators are pretty straight forward with what they require, which are strings. In this case, we just check that there is something inputted in the field along with an error message.
  • Had to install a package for verifying dates due to complex edge cases along with formatting.
  • Used regex to accept valid US phone numbers.
  • Made as an array to correspond with the pages being verified

Testing done for these changes

• Used basic boilerplate code to make 2 quick forms for testing the navigation, the context wrapper stepper, and also the dynamic stepper for validating one page at a time.

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

Screen.Recording.2023-12-05.at.5.50.47.PM.mov

[erikguntner]

@JpadillaCoding this is looking great! I think this sets a solid foundation to build off of. I made some suggestions for the GuestApplicationButtons component so let me know what you think.

[erikguntner]

@JpadillaCoding This is looking good Jose. I have a couple suggestions regarding the setting of the initial step. This should be good to go after those changes are made

[JpadillaCoding]

@erikguntner Requested changes have been made.

[erikguntner]

@JpadillaCoding Thanks for getting those changes in! Everything looks good to me.