Refactor Form(s) to Multi-Step Implementation

[shon-button]

Forms to implement:

• Operations form
  • Status is set to Pending on submit

[shon-button]

Description of the Tech Debt

Currently, the application features a single-page form where all the form fields are displayed at once. While functional, this approach can result in a lengthy and potentially overwhelming user experience, especially for complex forms. Implementing a multi-step form can enhance user experience and make the form more user-friendly.

Proposed Solution:

Formik is an open-source React form library used to build scalable form components ranging from simple to complex with ease.

Formik offers React Context powered components:

<Formik />, <Form />, <Field />, <FieldArray/>, and <ErrorMessage />. 

These components use React Context to connect with the form state/methods and make the form boilerplate less complex.This makes the form component you build with Formik easy to develop, debug and test.

What are the advantages of using Formik?

Scalability: Formik is a good fit for a complete solution, including validation and handling form submission; we can also keep form state localized and managed by Formik, which is suitable for building multi-step forms.
Size: Size has been one of the most significant advantages of Formik; with its minified gzipped size of 12.7kB, Formik still has the capacity of archiving form state with minimal APIs.
Complementary Packages: Formik extends its capabilities by allowing complementary packages to come into play. One can integrate Yup with Formik for validation, or while using Redux State Management, you can also implement Formik for your form state (which is not possible when it comes to Redux form).
Also, let’s compare Formik with other top-rated form tools in React concerning their Performance, Development Experience, Components, Boilerplate, Popularity Contest, and more.

Integrations: A form library like Redux Form doesn’t allow integrations, unlike Formik/React Hook Form. Formik and React Hook Form can integrate with any 3rd party app (especially Yup and Redux) for validations, and you can also use HTML5 inputs with Formik for the form field.
Boilerplate: Boilerplate is something developers don’t want to get caught up with. Form tool libraries such as Redux Form/Final Form are faced with these issues, imagine you have to use a form tool like Final Form, and the whole place is covered with boilerplate; I guess that’s not an excellent way to start a form. On the other hand, Formik and React Hook Form constitute less boilerplate on your codes.
Popularity: Formik is leading the race with over 30k Github stars and, most importantly, 2M+ weekly downloads, a massive win for Formik. Formik is an excellent tool to work with, although the rest of the libraries also have good features.

Dynamic Multi-Step Forms With Formik

Proposed Changes:

1. Multi-Step Form Structure:

Refactor the existing single-page form into a multi-step form with separate sections or steps. Each step should logically group related fields, breaking down the form into manageable parts.
2. Step Navigation:

Implement a clear and intuitive navigation mechanism that allows users to move forward and backward between form steps. This can be achieved with "Next" and "Back" buttons or a similar approach.
3. Form Validation:

Enhance the form validation logic to validate each step individually. Users should be able to progress to the next step only when the current step's fields are correctly filled out.
4. Progress Indicator:

Add a progress indicator to provide users with a visual cue of their position within the multi-step form. This can be in the form of a progress bar, step icons, or a similar UI element.
5. Conditional Logic:

If the form contains fields with conditional visibility (i.e., certain fields are displayed based on user choices), ensure that conditional logic works seamlessly within the multi-step structure.
6. Accessibility and Error Handling:

Verify that the multi-step form maintains accessibility standards and provides clear error messages and guidance for users encountering validation errors.
7. Testing and Test Coverage:

Write unit tests for the individual form steps and validation logic. Also, perform end-to-end testing to ensure a smooth transition between steps and proper form submission.
8. Documentation:

Update documentation, including code comments and any user documentation, to reflect the changes and provide clear instructions on using the multi-step form.

###Tech Debt Triage#
The purpose of our technical debt triage process is to analyze technical debt to determine risk level of the technical debt and the value in tackling that technical debt.

Risk Value Scoring:

Level	Value
High	3
Medium	2
Low	1

Technical Debt - Risk Types	Level	Value
Business Area Risk - Risk of business area visibility / damage to user experience
Developer Fault Risk - How likely will this tech debt cause a future error related to coding on top of it
System Fault Risk - Risk of system errors or application downtime
Time Scale Risk - Compound risk effect if left alone. How much more difficult to fix or dangerous will this become over time?
Time Sink Risk - How much will this tech debt slow the development process down
TOTAL SCORE:

[hannavovk]

Awesome, thanks! @marcellmueller