Business Onboarding Form - Break it up + Full CSS

[Madhu2244]

Overview

"Computer programmers obtain quasi-magical, superhuman coding ability when they have a blood alcohol concentration percentage between 0.129% and 0.138%" - Former CEO of Microsoft

The Business Onboarding form is a way for businesses to sign up. We are going to lowkey recreate what we have previously.

Running the program

1. Clone the repo through git clone
2. Navigate to the directory of your fph-frontend repo using the cd command.
3. Run git checkout dev and then git pull.
4. Create a branch off the dev branch in fph-frontend. For the name of the branch, use what the title of this issue as. Use git checkout -b <insert_branch_name>.
5. Install the necessary dependencies through running yarn. Test that your application works by running yarn format followed by yarn dev
6. Create your necessary code through creating files within the component folder.
7. Run the code with yarn (to install), yarn format (to format the code), and yarn start (to start the program).
8. Access localhost:3000/.

Task

https://www.figma.com/file/VkH80LtHkl1Ck76v88fTvk/FPH-Wireframes?type=design&node-id=2165-23652&mode=design&t=VAPwAh6JSU6ww3vy-4

Alright jits, listen carefully, this is probably going to be one of the most beautiful tasks I have ever written. Currently, we have this:

But now we are going to scrap this thing and redo it. We are going to make a master file called BusinessForm.jsx and in this file, we will have a nested state (one state with substates like so:

  const [formData, setFormData] = useState({
    thing1: null,
    thing2: null,
    ...
  });

Then we are going to have a state to indicate what step you are on (this will be a numeric state). Then based on the step we are on, we are going to show that specific component. So if we are on step 0, we will show the first form. When we show the first form, we are going to pass in the setStep function, we will pass in the handleChange function and update the form accordingly. The handleChange function should only be defined once and in the master file. The names of the has to match what the substate is called.

So say that there are 6 different forms to fill out, we will have 8 different files, where 6 are the different subforms, and the 7th file is the master form, and the 8th file is the "Make an Impact" thing that is on the left hand side of the page. To be clear, you are also creating the Terms & Conditions file.

  const handleChange = event => {
    const name = event.target.name;
    var value = event.target.value;

    if (event.target.type === 'number') {
      value = value ? parseInt(value, 10) : '';
    }
    setFormData(prevState => ({ ...prevState, [name]: value }));
  };

<Input
          id="thing1"
          placeholder="Enter your thing1"
          size="lg"
          name="thing1"
          onChange={handleChange}
        />

Then pressing the "Next" button will setStep(currentStep + 1).

Word of Advice

This task might seem daunting and code heavy, but it really is not if you functionalize your components, and reuse them as much as possible. I outlined in high detail how to do this in the instructions, so please please pllease please please reach out to me ifyou are confused.

Support

Feel free to reach out to Madhu and Josh on Slack/Messenger for assistance.