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

[esteban-gs]

@denniswangcodes , I believe the build error will go away once you update your branch with the main branch.

[marvinsjsu]

hi @denniswangcodes, it looks like we might have a small typo in SignupNonProfit.tsx - I think we just need to change the filename from ./FocusAreas to ./focusAreas.

ERROR in src/views/SignupNonProfit.tsx:22:28
TS1261: Already included file name '/Users/marvin/Projects/external/web-app/client/src/views/FocusAreas.tsx' differs from file name '/Users/marvin/Projects/external/web-app/client/src/views/focusAreas.tsx' only in casing.
  The file is in the program because:
    Imported via './FocusAreas' from file '/Users/marvin/Projects/external/web-app/client/src/views/SignupNonProfit.tsx'
    Root file specified for compilation
    20 | import { ModalContext } from '../providers/ModalProvider';
    21 | import { useForm } from 'react-hook-form';
  > 22 | import { focusAreas } from './FocusAreas';

[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?

[esteban-gs]

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"

@denniswangcodes , @marvinsjsu we came across this in another PR. This might help:

https://github.com/Nonprofit-Exchange-Hub/web-app/pull/355/files#diff-58627174d7ef27a96ddf1421e598335d42284e257344118545e48afd88c4c753R497-R503