Guest application formik context #630

app/package.json

@@ -32,6 +32,7 @@
     "@mui/material": "^5.8.6",
     "@mui/x-data-grid": "^6.15.0",
     "@reduxjs/toolkit": "^1.8.3",
+    "date-fns": "^2.30.0",
     "formik": "^2.2.9",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

app/src/components/common/GuestApplicationButtons.tsx

@@ -0,0 +1,37 @@
+import {Button, Stack} from '@mui/material';
+
+export const NavButtons = ({
+  next,
+  prev,
+  saveAndExit,
+}: {
+  next: () => void;
+  prev: () => void;
+  saveAndExit: () => void;
+}) => {
+  return (
+    <Stack gap={2}>
+      <Button fullWidth size="medium" variant="contained" onClick={next}>
+        Continue
+      </Button>
+      <Button
+        fullWidth
+        size="medium"
+        variant="outlined"
+        onClick={prev}
+        sx={{color: 'black', border: 2, borderColor: 'primary.main'}}
+      >
+        Back
+      </Button>
+      <Button
+        fullWidth
+        size="medium"
+        onClick={saveAndExit}
+        variant="text"
+        sx={{color: 'black'}}
+      >
+        Save and Exit
+      </Button>
+    </Stack>
+  );
+};

app/src/components/common/GuestApplicationContext.tsx

@@ -0,0 +1,134 @@
+import {Box, Stack} from '@mui/material';
+import {Formik} from 'formik';
+import {useEffect, useState} from 'react';
+import {Outlet} from 'react-router-dom';
+import ProgressBar from './ProgressBar';
+import {GuestApplicationSchema} from '../../utils/GuestApplicationSchema';
+import {NavButtons} from './GuestApplicationButtons';
+import {useNavigate} from 'react-router-dom';
+
+export interface formInputValues {
+  fullName: string;
+  dateOfBirth: string;
+  gender: string;
+  email: string;
+  phoneNumber: string;
+  contactPrefrence: string;
+  nameOfGuest: Array<string>;
+  typeOfPet: Array<string>;
+  currentlyEmployed: string;
+  employmentSearch: string;
+  employmentDescription: string;
+  educationEnrollment: string;
+  educationEnrollmentSearch: string;
+  educationProgramName: string;
+  multilingual: string;
+  spokenLanguages: string;
+  cigarettesUse: string;
+  alcoholUse: string;
+  otherSubstanceUse: string;
+  mentalIllness: string;
+  programGoals: string;
+  hostRelationshipGoal: string;
+  potentialChallenges: string;
+}
+export const stepToRouteMapping: {[key: number]: string} = {
+  1: '',
+};
+export const initialValues = {
+  fullName: '',
+  dateOfBirth: '',
+  gender: '',
+  email: '',
+  phoneNumber: '',
+  contactPrefrence: '',
+  nameOfGuest: [''],
+  typeOfPet: [''],
+  currentlyEmployed: '',
+  employmentSearch: '',
+  employmentDescription: '',
+  educationEnrollment: '',
+  educationEnrollmentSearch: '',
+  educationProgramName: '',
+  multilingual: '',
+  spokenLanguages: '',
+  cigarettesUse: '',
+  alcoholUse: '',
+  otherSubstanceUse: '',
+  mentalIllness: '',
+  programGoals: '',
+  hostRelationshipGoal: '',
+  potentialChallenges: '',
+};
+
+export const GuestApplicationContext = () => {
+  const TOTALPAGES = 10; /*Once all forms are made and added to "stepToRouteMapping", make this number change based on "stepToRouteMapping"*/
+  const storedStep = localStorage.getItem('currentStep');
+  const initialStep = storedStep ? parseInt(storedStep, 10) : 1;
+  const [step, setStep] = useState<number>(initialStep);
+  const progressBarValue = (step / TOTALPAGES) * 100;
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    navigate(stepToRouteMapping[step]);
+  }, []);
+  useEffect(() => {
+    localStorage.setItem('currentStep', step.toString());
+  }, [step]);
+  function saveData() {
+    //add logic to save current data
+    console.log('data saving features not implemented');
+  }
+  function nextStep() {
+    saveData();
+    const newStep = step + 1;
+    if (stepToRouteMapping[newStep] !== undefined) {
+      setStep(newStep);
+      navigate(stepToRouteMapping[newStep]);
+    } else {
+      alert('Form not complete!');
+    }
+  }
+  function prevStep() {
+    const newStep = step - 1;
+    if (step > 1) {
+      setStep(newStep);
+      navigate(stepToRouteMapping[newStep]);
+    } else {
+      navigate('/guest');
+    }
+  }
+  function saveAndExit() {
+    saveData();
+    navigate('/guest');
+  }
+
+  return (
+    <Formik
+      initialValues={initialValues}
+      onSubmit={() => console.log('Parent wrapper submit')}
+      validationSchema={GuestApplicationSchema[step - 1]}
+    >
+      <Box padding={2} gap={0} height={'95vh'}>
+        <Stack>
+          <ProgressBar progressBarValue={progressBarValue} />
+        </Stack>
+        <Stack
+          marginTop={2}
+          overflow={'scroll'}
+          minHeight={'72%'}
+          maxHeight={'72%'}
+        >
+          <Outlet />
+        </Stack>
+        <Stack>
+          <NavButtons
+            next={nextStep}
+            prev={prevStep}
+            saveAndExit={saveAndExit}
+          />
+        </Stack>
+      </Box>
+    </Formik>
+  );
+};

app/src/components/common/ProgressBar.tsx

@@ -0,0 +1,29 @@
+import {styled} from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import LinearProgress, {
+  linearProgressClasses,
+} from '@mui/material/LinearProgress';
+
+const BorderLinearProgress = styled(LinearProgress)(({theme}) => ({
+  height: 10,
+  borderRadius: 5,
+  [`&.${linearProgressClasses.colorPrimary}`]: {
+    backgroundColor: theme.palette.grey[300],
+  },
+  [`& .${linearProgressClasses.bar}`]: {
+    borderRadius: 5,
+    backgroundColor: theme.palette.primary,
+  },
+}));
+
+export default function ProgressBar({
+  progressBarValue,
+}: {
+  progressBarValue: number;
+}) {
+  return (
+    <Box sx={{flexGrow: 1}}>
+      <BorderLinearProgress variant="determinate" value={progressBarValue} />
+    </Box>
+  );
+}

app/src/components/layout/GuestDashboardLayout.tsx

@@ -16,6 +16,7 @@ const navItems = [
   },
   {title: 'My Contacts', icon: <ContactsOutlined />, href: '/guest/contacts'},
   {title: 'Settings', icon: <SettingsOutlined />, href: '/guest/settings'},
+  {title: 'Application', icon: <TaskOutlined />, href: '/guest/application'},
 ];
 
 export const GuestDashboardLayout = () => {

app/src/main.tsx

@@ -39,6 +39,7 @@ import {
   CoordinatorDashboardLayout,
   GuestDashboardLayout,
 } from './components/layout';
+import {GuestApplicationContext} from './components/common/GuestApplicationContext';
 
 function HuuApp() {
   const [session] = useSessionMutation();
@@ -94,6 +95,10 @@ function HuuApp() {
           <Route path="contacts" element={<GuestContacts />} />
           <Route path="tasks" element={<GuestTasks />} />
           <Route path="settings" element={<GuestSettings />} />
+          <Route
+            path="application"
+            element={<GuestApplicationContext />}
+          ></Route>
         </Route>
         <Route
           path="/coordinator"

app/src/utils/GuestApplicationSchema.ts

@@ -0,0 +1,89 @@
+import {parse, isDate} from 'date-fns';
+import {array, date, object, string} from 'yup';
+
+export const GuestApplicationSchema = [
+  //validation is based on step
+  object({
+    fullName: string().required('Name is required'),
+    dateOfBirth: date()
+      .transform(parseDateString)
+      .typeError('Please use correct format')
+      .required('Date of Birth is required')
+      .min(new Date('01/01/1900'), 'Set a valid date')
+      .max(new Date(), 'Date cannot be in the future'),
+    gender: string().required('Select an option'),
+  }),
+  object({
+    email: string().email('Invalid email format').required('Email is required'),
+    phoneNumber: string()
+      .required()
+      .matches(
+        /^((\\+[1-9]{1,4}[ \\-]*)|(\\([0-9]{2,3}\\)[ \\-]*)|([0-9]{2,4})[ \\-]*)*?[0-9]{3,4}?[ \\-]*[0-9]{3,4}?$/,
+        'Phone number is not valid.',
+      )
+      .required('Phone number is required'),
+    contactPrefrence: string().required('Select an option'),
+  }),
+  object({
+    nameOfGuestArray: array().of(
+      object({
+        nameOfGuest: string().required('Name is Required'),
+      }),
+    ),
+    typeOfPetArray: array().of(
+      object({
+        typeOfPet: string().required('Pet Type is Required'),
+      }),
+    ),
+  }),
+  object({
+    currentlyEmployed: string().required('Select an option'),
+    employmentSearch: string().when('currentlyEmployed', {
+      is: (currentlyEmployed: string) => currentlyEmployed === 'No',
+      then: string().required('Field is required'),
+    }),
+    employmentDescription: string().when('currentlyEmployed', {
+      is: (currentlyEmployed: string) => currentlyEmployed === 'Yes',
+      then: string().required('Field is required'),
+    }),
+  }),
+  object({
+    educationEnrollment: string().required('Select an option'),
+    educationEnrollmentSearch: string().when('educationEnrollment', {
+      is: (educationEnrollment: string) => educationEnrollment === 'No',
+      then: string().required('Field is required'),
+    }),
+    educationProgramName: string().when('educationEnrollment', {
+      is: (educationEnrollment: string) => educationEnrollment === 'Yes',
+      then: string().required('Field is required'),
+    }),
+  }),
+  object({
+    multilingual: string().required('Select an option'),
+    spokenLanguages: string().when('multilingual', {
+      is: (multilingual: string) => multilingual === 'Yes',
+      then: string().required('Field is required'),
+    }),
+  }),
+  object({
+    cigarettesUse: string().required('Select an option'),
+    alcoholUse: string().required('Select an option'),
+    otherSubstanceUse: string().required('Select an option'),
+  }),
+  object({
+    mentalIllness: string().required('Select an option'),
+  }),
+  object({
+    programGoals: string().required('Field is required'),
+    hostRelationshipGoal: string().required('Field is required'),
+    potentialChallenges: string().required('Field is required'),
+  }),
+];
+
+function parseDateString(value: string, originalValue: string) {
+  const parsedDate = isDate(originalValue)
+    ? originalValue
+    : parse(originalValue, 'MM/dd/yyyy', new Date());
+
+  return parsedDate;
+}