Feature 288 org sign up screens (#348)

* added IRS classification dropdown to new org signup UI

* updated steps to Figma design 90% similarity

* minor text rearrangement

* repurposed 306-sign-in-modal modal logic for signup.tsx

* added back sample.env file

* Put back old code in signupuserandnonprofit.tsk to resolve conflict

* Modal working, test modal opens closes successfully

* Modal handleClickOutisde still not working, otherwise removed paths to login/signup page and now all pages show modal correctly

* finalized css of the modal, added handleClose function on URL change or when the X on the top right is used

* resolved comments, removed google and facebook buttons, changed colors to theme.palette

* fixed merge conflicts and typescritp conflicts

* added modal for join now in header

* fixed bug login.tsk path undefined

* Linked modal logic to home page's Join Now CTA Button

* Fixed styling of pop up modal buttons and divider

* refactored steps UI to match figma text fields

* decluttered imports

* added org online contact information page

* decluttered imports and updated text in signupmodal

* added already have account and display signup profile logic

* improved inut label appearance & sign in click

* changed signinmodal.tsx signup button

* added disable next until fields completed logic

* added chip select color change logic

* refined next button logic

* removed sign up button on final page

* added ts ignore 405

* test

* refactored view and component file structure

* updated focusAreas tsx to FocusArea tsx

* refactoring to parent child structure

* finished refactoring parent child component structure

* removed unused things

* removed linter for unused things

* completed refactoring of all five steps children components

* minor cleanup after refactor

---------

Co-authored-by: etokruto <[email protected]>

client/src/components/BannerSection.tsx

@@ -1,9 +1,10 @@
+import React, { useContext } from 'react';
 import { Grid, Typography, Box } from '@mui/material';
 import { makeStyles } from 'tss-react/mui';
 import type { Theme } from '@mui/material/styles';
 import MainImage from '../assets/banner-section-main.svg';
 import { CTAHeroButton } from './Buttons/Button';
-import { useHistory } from 'react-router-dom';
+import { ModalContext } from './../providers/ModalProvider';
 
 const useStyles = makeStyles()((theme: Theme) => ({
   gridTitle: {
@@ -44,15 +45,23 @@ function BannerText() {
 
 function BannerSection() {
   const { classes } = useStyles();
-  const history = useHistory();
+  const modalContext = useContext(ModalContext);
+  const { openModal } = modalContext;
 
+  const handleOpenModal = (modalType: 'SignIn' | 'SignUp') => {
+    if (modalType === 'SignIn') {
+      openModal('SignIn');
+    } else if (modalType === 'SignUp') {
+      openModal('SignUp');
+    }
+  };
   return (
     <Box>
       <Grid container spacing={3} sx={{ height: '600px' }}>
         <Grid xs={6} item justifyContent="center" sx={{ display: 'flex' }}>
           <Box sx={{ width: '550px', mt: '180px', mb: '66px', ml: '40px' }}>
             <BannerText />
-            <CTAHeroButton text="Join Now" onClick={() => history.push('/signup-citizen')} />
+            <CTAHeroButton text="Join Now" onClick={() => handleOpenModal('SignUp')} />
           </Box>
         </Grid>
         <Grid

client/src/components/Buttons/CTAButton.tsx

@@ -0,0 +1,45 @@
+import { makeStyles } from 'tss-react/mui';
+import { Typography } from '@mui/material';
+import type { Theme } from '@mui/material/styles';
+import React, { useContext } from 'react';
+import { ModalContext } from '../../providers/ModalProvider';
+
+const useStyles = makeStyles()((theme: Theme) => ({
+  CTAButton: {
+    color: 'white',
+    backgroundColor: '#EF6A60',
+    borderRadius: '10px',
+    fontFamily: 'Poppins',
+    fontWeight: 'semi-bold',
+    border: 'none',
+    '&:hover': {
+      backgroundColor: '#EF6A60',
+      cursor: 'pointer',
+    },
+  },
+}));
+
+type Props = {
+  text: string;
+};
+
+function CTAButton({ text }: Props) {
+  const { classes } = useStyles();
+  const modalContext = useContext(ModalContext);
+  const { openModal } = modalContext;
+
+  return (
+    <button onClick={() => openModal('SignUp')} className={classes.CTAButton}>
+      <Typography
+        sx={{
+          fontSize: '22px',
+          padding: '15px 25px 15px 25px',
+        }}
+      >
+        {text}
+      </Typography>
+    </button>
+  );
+}
+
+export default CTAButton;

client/src/components/Header.tsx

@@ -109,7 +109,7 @@ function Header() {
   const modalContext = useContext(ModalContext);
   const { openModal } = modalContext;
 
-  const handleoOpenModal = (modalType: 'SignIn' | 'SignUp') => {
+  const handleOpenModal = (modalType: 'SignIn' | 'SignUp') => {
     if (modalType === 'SignIn') {
       openModal('SignIn');
     } else if (modalType === 'SignUp') {
@@ -489,12 +489,11 @@ function Header() {
             </>
           ) : (
             <>
-              {/* TODO: Use () => handleoOpenModal('SignUp') when implemented */}
               <PrimaryCTAButton
                 text="Join Now"
-                onClick={() => history.push('/signup-citizen')}
+                onClick={() => handleOpenModal('SignUp')}
               ></PrimaryCTAButton>
-              <Button className={classes.signInButton} onClick={() => handleoOpenModal('SignIn')}>
+              <Button className={classes.signInButton} onClick={() => handleOpenModal('SignIn')}>
                 Sign In
               </Button>
             </>