Feature 288 org sign up screens

[denniswangcodes]

Dev Summary

Mocks

Test Plan

repro steps:

1. localhost:3000
2. click X button
   expected:

Resources

• stackoverflow is cool

[marvinsjsu]

TypeScript is also complaining about the expected prop types for the Select element - I was able to bypass this by adding {/* @ts-ignore */} right above line 495, <Select>.

ERROR in src/components/Users/Auth/SignUpUserAndNonprofit/SignUpUserAndNonprofit.tsx:495:28
TS2322: Type '{ children: (Element | Element[])[]; placeholder: string; variant: "outlined"; autoWidth: true; input: Element; inputProps: { 'aria-label': string; }; displayEmpty: true; ... 4 more ...; ref: RefCallBack; }' is not assignable to type 'SelectProps<string>'.
  Types of property 'onChange' are incompatible.
    Type '(event: string | ChangeEvent<Element>) => void' is not assignable to type '(event: SelectChangeEvent<string>, child: ReactNode) => void'.
      Types of parameters 'event' and 'event' are incompatible.
        Type 'SelectChangeEvent<string>' is not assignable to type 'string | ChangeEvent<Element>'.
          Type 'Event & { target: { value: string; name: string; }; }' is not assignable to type 'string | ChangeEvent<Element>'.
            Type 'Event & { target: { value: string; name: string; }; }' is missing the following properties from type 'ChangeEvent<Element>': nativeEvent, isDefaultPrevented, isPropagationStopped, persist
    493 |                         <>
    494 |                           <FormLabel>IRS Nonprofit Organization Classification</FormLabel>
  > 495 |                           <Select
        |                            ^^^^^^
    496 |                             {...field}
    497 |                             placeholder="Select classification"
    498 |                             variant="outlined"

[marvinsjsu]

Do you know if we have a list of required fields for the signup form? Asking because we may need to create a follow-up ticket to add that validation. Also, about the last step. It shows the Sign Up button after the user has gone through the workflow - do we need to ask design about removing this?

[marvinsjsu]

This is looking good. There are a couple of issues regarding a filename and TS, and I've also added a couple of suggestions. Otherwise, nice work!

[esteban-gs]

Approved once comments are addressed.

[esteban-gs]

@denniswangcodes , this should already be implemented on the main branch. See:

web-app/client/src/components/Buttons/Button.tsx

Line 38 in 14e7f56

export function CTAHeroButton({ text, onClick }: Props) {

[esteban-gs]

It'll probably be better to add these to the assets folder and save them as svg instead of JS. You can export these from figma.
Then, you can import it like this:

web-app/client/src/components/FAQs.tsx

Line 6 in d1b357a

import FAQsImage from '../assets/sign-up-finished-step.svg';