From 43ce958ac2e8fee6351c681aa9a298045c4aa18d Mon Sep 17 00:00:00 2001
From: nourshoreibah <nour17372@icloud.com>
Date: Thu, 30 Jan 2025 15:05:46 -0500
Subject: [PATCH 1/4] Add group sign up box

---
 .../volunteer/signup/SignUpPage.tsx           | 228 +++++++++---------
 1 file changed, 109 insertions(+), 119 deletions(-)

diff --git a/apps/frontend/src/components/volunteer/signup/SignUpPage.tsx b/apps/frontend/src/components/volunteer/signup/SignUpPage.tsx
index 50d85d35..09182ebd 100644
--- a/apps/frontend/src/components/volunteer/signup/SignUpPage.tsx
+++ b/apps/frontend/src/components/volunteer/signup/SignUpPage.tsx
@@ -6,6 +6,7 @@ import {
   VStack,
   Button,
   IconButton,
+  Textarea,
 } from '@chakra-ui/react';
 import { Checkbox } from '@mui/material';
 import CloseIcon from '@mui/icons-material/Close';
@@ -26,20 +27,21 @@ interface CheckboxField {
 
 interface InputFieldGroup {
   fields: InputField[];
-  type?: 'single' | 'double'; // 'single' for single column, 'double' for double column row
+  type?: 'single' | 'double';
   height: string;
   width: string;
 }
 
 const personalInfoCheckboxesMap: CheckboxField[] = [
-  {
-    label: 'Signing up as a group representative?',
-  },
+  { label: 'Signing up as a group representative?' },
 ];
 
 const personalInfoInputFieldsMap: InputFieldGroup[] = [
   {
-    fields: [{ label: 'First Name', width: '250px'}, { label: 'Last Name', width: '350px' }],
+    fields: [
+      { label: 'First Name', width: '250px' },
+      { label: 'Last Name', width: '350px' },
+    ],
     type: 'double',
     height: '40px',
     width: '810px',
@@ -65,127 +67,142 @@ const personalInfoInputFieldsMap: InputFieldGroup[] = [
 ];
 
 const termsAndConditionsCheckboxesMap: CheckboxField[] = [
-  {
-    label: 'I have reviewed the General Safety Guidelines',
-  },
-  {
-    label: 'I have read and agree to the Terms of Use and Privacy Policy',
-  },
-  {
-    label: 'I have read and agree to the Release of Liability',
-  },
+  { label: 'I have reviewed the General Safety Guidelines' },
+  { label: 'I have read and agree to the Terms of Use and Privacy Policy' },
+  { label: 'I have read and agree to the Release of Liability' },
 ];
 
 function PersonalInfo() {
+  const [isGroupRepresentative, setIsGroupRepresentative] = useState(false);
+
   return (
-    <Box
-          className="personal-info-box"
-        >
+    <Box className="personal-info-box">
       <VStack spacing={0} marginBottom={'20px'} borderBottom="2px solid #000000" paddingBottom="20px">
         {personalInfoCheckboxesMap.map((field, i) => (
-          <HStack key={i} width="100%" height="100%" marginBottom={'20px'} alignItems="flex-start">
+          <HStack key={i} width="100%" marginBottom={'20px'} alignItems="flex-start">
             <Text fontSize="18px" fontWeight={600} fontFamily="Montserrat">
               {field.label}
             </Text>
             <Checkbox
+              checked={isGroupRepresentative}
+              onChange={(e) => setIsGroupRepresentative(e.target.checked)}
               sx={{
-                color: '#808080', // Grey color for the checkbox when not checked
-                '&.Mui-checked': {
-                  color: '#808080', // Grey color for the checkbox when checked
-                },
-                '& .MuiSvgIcon-root': {
-                  fontSize: 23,
-                },
+                color: '#808080',
+                '&.Mui-checked': { color: '#808080' },
+                '& .MuiSvgIcon-root': { fontSize: 23 },
                 padding: '2px',
                 marginLeft: '20px',
               }}
             />
           </HStack>
         ))}
-        {personalInfoInputFieldsMap.map((group, i) => (
-          <VStack key={i} width="100%" spacing={0} align="flex-start">
-            {group.type === 'double' ? (
-              <HStack width="100%" justifyContent="left" spacing="20%">
-                {group.fields.map((field, j) => (
-                    <VStack key={j} width={field.width}>
-                    <Text
-                      className="label"
-                      alignSelf="flex-start"
-                      fontSize="18px"
-                      fontWeight={600}
-                      marginBottom={-10}
-                      fontFamily="Montserrat"
-                    >
-                      {field.label}
-                    </Text>
-                    <Input
-                      variant="filled"
-                      height={group.height}
-                      placeholder={field.placeholder || 'example'}
-                      width="100%"
-                    />
-                  </VStack>
-                ))}
-              </HStack>
-            ) : (
-              <VStack width="100%" align="flex-start">
+
+        {/* Name Fields */}
+        <VStack width="100%" align="flex-start">
+          <HStack width="100%" justifyContent="left" spacing="20%">
+            {personalInfoInputFieldsMap[0].fields.map((field, j) => (
+              <VStack key={j} width={field.width}>
                 <Text
-                  className="label"
                   fontSize="18px"
                   fontWeight={600}
                   fontFamily="Montserrat"
                   alignSelf="flex-start"
                   marginBottom={-10}
+                >
+                  {field.label}
+                </Text>
+                <Input
+                  variant="filled"
+                  height={personalInfoInputFieldsMap[0].height}
+                  
+                  width="100%"
+                />
+              </VStack>
+            ))}
+          </HStack>
+        </VStack>
+
+        {/* Lower Section */}
+        <HStack width="100%" align="start" spacing={4} mt={4}>
+          {/* Left Column - Email/Phone/Birth Year */}
+          <VStack width="380px" align="flex-start" spacing={0}>
+            {personalInfoInputFieldsMap.slice(1).map((group, i) => (
+              <VStack key={i} width="100%" align="flex-start">
+                <Text
+                  fontSize="18px"
+                  fontWeight={600}
+                  fontFamily="Montserrat"
                   marginTop="30px"
+                  marginBottom={-10}
                 >
                   {group.fields[0].label}
                 </Text>
                 <Input
                   variant="filled"
                   height={group.height}
-                  placeholder={group.fields[0].placeholder || 'example'}
+                  
                   width={group.width}
                 />
               </VStack>
-            )}
+            ))}
           </VStack>
-        ))}
+
+          {/* Right Column - Group Members */}
+          {isGroupRepresentative && (
+            <VStack width="350px" align="flex-start" marginTop="30px" marginLeft="90px">
+              <Text
+                fontSize="18px"
+                fontWeight={600}
+                fontFamily="Montserrat"
+                marginBottom={-10}
+              >
+                Group Members
+              </Text>
+              <Textarea
+                variant="filled"
+                placeholder="First, last name..."
+                height="230px"
+                width="100%"
+                resize="none"
+                sx={{
+                  border: '1px solid #E2E8F0',
+                  _focus: {
+                    borderColor: '#3182CE',
+                    boxShadow: '0 0 0 1px #3182CE',
+                  },
+                  _hover: {
+                    borderColor: '#CBD5E0',
+                  },
+                }}
+              />
+            </VStack>
+          )}
+        </HStack>
       </VStack>
-      <HStack
-        className="circle-progress"
-        display="flex"
-        justifyContent="center"
-        alignItems="center"
-        spacing="30px"
-      >
+
+      <HStack className="circle-progress" justifyContent="center" spacing="30px">
         <CircleIcon />
         <CircleOutlinedIcon />
         <CircleOutlinedIcon />
       </HStack>
     </Box>
-  )
+  );
 }
 
 function TermsAndConditions() {
   return (
-    <Box
-          className="terms-and-conditions-box"
-        >
-      <VStack spacing={102} marginTop={'20px'} marginBottom={'20px'}  borderBottom="2px solid #000000" paddingBottom="20px">
+    <Box className="terms-and-conditions-box">
+      <VStack spacing={102} marginTop={'20px'} marginBottom={'20px'} borderBottom="2px solid #000000" paddingBottom="20px">
         {termsAndConditionsCheckboxesMap.map((field, i) => (
-          <HStack key={i} width="100%" height="100%" marginTop={'20px'} alignItems="flex-start">
-            <Text textDecoration="underline" fontSize="18px" fontWeight={600} fontFamily="Montserrat" marginTop={'4px'} >
-                {field.label}
+          <HStack key={i} width="100%" marginTop={'20px'} alignItems="flex-start">
+            <Text textDecoration="underline" fontSize="18px" fontWeight={600} fontFamily="Montserrat" marginTop={'4px'}>
+              {field.label}
             </Text>
             <Checkbox
               sx={{
-                color: '#808080', // Grey color for the checkbox when not checked
-                '&.Mui-checked': {
-                  color: '#808080', // Grey color for the checkbox when checked
-                },
-                '& .MuiSvgIcon-root': {
-                  fontSize: 32,
-                },
+                color: '#808080',
+                '&.Mui-checked': { color: '#808080' },
+                '& .MuiSvgIcon-root': { fontSize: 32 },
                 padding: '2px',
                 marginLeft: '20px',
               }}
@@ -193,13 +210,7 @@ function TermsAndConditions() {
           </HStack>
         ))}
       </VStack>
-      <HStack
-        className="circle-progress"
-        display="flex"
-        justifyContent="center"
-        alignItems="center"
-        spacing="30px"
-      >
+      <HStack className="circle-progress" justifyContent="center" spacing="30px">
         <CircleIcon />
         <CircleIcon />
         <CircleOutlinedIcon />
@@ -213,23 +224,20 @@ interface Props {
 }
 
 export default function SignUpPage({ setShowSignUp }: Props) {
-  const [isSubmitted, setIsSubmitted] = useState(false); // Step 1
+  const [isSubmitted, setIsSubmitted] = useState(false);
   const navigate = useNavigate();
 
   const closeSignUp = () => {
     setShowSignUp(false);
   };
 
-  
   const handleSubmit = () => {
-    // You can add form validation logic here if needed
     setIsSubmitted(true);
-    navigate('/success'); // Step 2
+    navigate('/success');
   };
 
   return (
     <Box
-      className="outermost-box"
       position="absolute"
       top="10%"
       left="10%"
@@ -252,7 +260,6 @@ export default function SignUpPage({ setShowSignUp }: Props) {
         <CloseIcon />
       </IconButton>
       <Box
-        className="inner-box"
         bg="#FFFDFD"
         height="90%"
         width="90%"
@@ -263,7 +270,6 @@ export default function SignUpPage({ setShowSignUp }: Props) {
         paddingTop={'30px'}
       >
         <Box
-          className="header-box"
           height="5%"
           width="90%"
           borderBottom="2px solid #000000"
@@ -271,41 +277,25 @@ export default function SignUpPage({ setShowSignUp }: Props) {
           justifyContent="center"
           alignItems="center"
         >
-          <Text
-            fontFamily="Montserrat"
-            fontSize="28px"
-            fontWeight={700}
-            paddingBottom={'30px'}
-          >
+          <Text fontFamily="Montserrat" fontSize="28px" fontWeight={700} paddingBottom={'30px'}>
             Welcome, Volunteer!
           </Text>
         </Box>
-        <Box className="input-fields-main" width="90%" mt="10px">
-          {/* Comment these in and out to display the different pop up pages */}
+        <Box width="90%" mt="10px">
           <PersonalInfo />
-          {/* <TermsAndConditions /> */}
         </Box>
 
-        {/* Conditional rendering for the submit button */}
-        {/* {!isSubmitted && (
-          <Button size="large" marginBottom="7%" fontSize="20px" onClick={handleSubmit}
+        <Button
+          size="large"
+          marginBottom="7%"
+          fontSize="20px"
+          onClick={handleSubmit}
           bottom="10%"
           left="50%"
-          transform="translateX(-50%)">
-            Submit
-          </Button>
-        )} */}
-
-        {/* Success message */}
-        {/* {isSubmitted && (
-          <Box>
-            <Text fontSize="24px" fontWeight={600}>
-              Thank you for submitting the form!
-            </Text>
-             You can add additional content for the success page 
-          </Box>
-        )} */}
-        
+          transform="translateX(-50%)"
+        >
+          Submit
+        </Button>
       </Box>
     </Box>
   );

From 2c9e863dc8357298865116e09f02487835f82fd5 Mon Sep 17 00:00:00 2001
From: nourshoreibah <nour17372@icloud.com>
Date: Thu, 30 Jan 2025 15:17:04 -0500
Subject: [PATCH 2/4] Style

---
 apps/frontend/src/components/volunteer/signup/SignUpPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/frontend/src/components/volunteer/signup/SignUpPage.tsx b/apps/frontend/src/components/volunteer/signup/SignUpPage.tsx
index 09182ebd..77fc2a57 100644
--- a/apps/frontend/src/components/volunteer/signup/SignUpPage.tsx
+++ b/apps/frontend/src/components/volunteer/signup/SignUpPage.tsx
@@ -299,4 +299,4 @@ export default function SignUpPage({ setShowSignUp }: Props) {
       </Box>
     </Box>
   );
-}
\ No newline at end of file
+}

From e8f9f7370be7683d53771dc9b8a2b19d35dd869b Mon Sep 17 00:00:00 2001
From: nourshoreibah <nour17372@icloud.com>
Date: Thu, 30 Jan 2025 15:27:45 -0500
Subject: [PATCH 3/4] Maintain old comments

---
 .../volunteer/signup/SignUpPage.tsx           | 31 ++++++++++++-------
 1 file changed, 19 insertions(+), 12 deletions(-)

diff --git a/apps/frontend/src/components/volunteer/signup/SignUpPage.tsx b/apps/frontend/src/components/volunteer/signup/SignUpPage.tsx
index 77fc2a57..0e325da8 100644
--- a/apps/frontend/src/components/volunteer/signup/SignUpPage.tsx
+++ b/apps/frontend/src/components/volunteer/signup/SignUpPage.tsx
@@ -114,7 +114,7 @@ function PersonalInfo() {
                 <Input
                   variant="filled"
                   height={personalInfoInputFieldsMap[0].height}
-                  
+                  placeholder="example"
                   width="100%"
                 />
               </VStack>
@@ -140,7 +140,7 @@ function PersonalInfo() {
                 <Input
                   variant="filled"
                   height={group.height}
-                  
+                  placeholder="example"
                   width={group.width}
                 />
               </VStack>
@@ -285,18 +285,25 @@ export default function SignUpPage({ setShowSignUp }: Props) {
           <PersonalInfo />
         </Box>
 
-        <Button
-          size="large"
-          marginBottom="7%"
-          fontSize="20px"
-          onClick={handleSubmit}
+        {/* Conditional rendering for the submit button */}
+        {/* {!isSubmitted && (
+          <Button size="large" marginBottom="7%" fontSize="20px" onClick={handleSubmit}
           bottom="10%"
           left="50%"
-          transform="translateX(-50%)"
-        >
-          Submit
-        </Button>
+          transform="translateX(-50%)">
+            Submit
+          </Button>
+        )} */}
+
+        {/* Success message */}
+        {/* {isSubmitted && (
+          <Box>
+            <Text fontSize="24px" fontWeight={600}>
+              Thank you for submitting the form!
+            </Text>
+          </Box>
+        )} */}
       </Box>
     </Box>
   );
-}
+}
\ No newline at end of file

From 3364b692766054a6c600679d034156dd846e9286 Mon Sep 17 00:00:00 2001
From: nourshoreibah <nour17372@icloud.com>
Date: Thu, 20 Feb 2025 16:08:49 -0500
Subject: [PATCH 4/4] fix merge conflicts

---
 .../volunteer/signup/SignUpPage.tsx           | 392 ++++++++++++------
 1 file changed, 255 insertions(+), 137 deletions(-)

diff --git a/apps/frontend/src/components/volunteer/signup/SignUpPage.tsx b/apps/frontend/src/components/volunteer/signup/SignUpPage.tsx
index 0e325da8..77bd072a 100644
--- a/apps/frontend/src/components/volunteer/signup/SignUpPage.tsx
+++ b/apps/frontend/src/components/volunteer/signup/SignUpPage.tsx
@@ -10,11 +10,14 @@ import {
 } from '@chakra-ui/react';
 import { Checkbox } from '@mui/material';
 import CloseIcon from '@mui/icons-material/Close';
-import React, { useState } from 'react';
+import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import CircleIcon from '@mui/icons-material/Circle';
 import CircleOutlinedIcon from '@mui/icons-material/CircleOutlined';
+import { Formik, Form, Field } from 'formik';
+import * as Yup from 'yup';
 
+// ns-add-group-signup interfaces and maps
 interface InputField {
   label: string;
   width?: string;
@@ -72,130 +75,254 @@ const termsAndConditionsCheckboxesMap: CheckboxField[] = [
   { label: 'I have read and agree to the Release of Liability' },
 ];
 
-function PersonalInfo() {
-  const [isGroupRepresentative, setIsGroupRepresentative] = useState(false);
+// Yup validation schema (from the form validation ticket)
+const validationSchema = Yup.object({
+  firstname: Yup.string().required('First name is required'),
+  lastname: Yup.string().required('Last name is required'),
+  email: Yup.string()
+    .email('Invalid email address')
+    .required('Email is required'),
+  phone: Yup.string()
+    .matches(/^[0-9]{10}$/, 'Phone number must be 10 digits')
+    .required('Phone number is required'),
+  birthyear: Yup.number()
+    .min(1900, 'Invalid birth year')
+    .max(new Date().getFullYear(), 'Invalid birth year')
+    .required('Birth year is required'),
+  groupRepresentative: Yup.boolean(),
+  // groupMembers remains optional
+});
 
-  return (
-    <Box className="personal-info-box">
-      <VStack spacing={0} marginBottom={'20px'} borderBottom="2px solid #000000" paddingBottom="20px">
-        {personalInfoCheckboxesMap.map((field, i) => (
-          <HStack key={i} width="100%" marginBottom={'20px'} alignItems="flex-start">
-            <Text fontSize="18px" fontWeight={600} fontFamily="Montserrat">
-              {field.label}
-            </Text>
-            <Checkbox
-              checked={isGroupRepresentative}
-              onChange={(e) => setIsGroupRepresentative(e.target.checked)}
-              sx={{
-                color: '#808080',
-                '&.Mui-checked': { color: '#808080' },
-                '& .MuiSvgIcon-root': { fontSize: 23 },
-                padding: '2px',
-                marginLeft: '20px',
-              }}
-            />
-          </HStack>
-        ))}
+interface PersonalInfoProps {
+  onSubmit: (values: any) => void;
+}
 
-        {/* Name Fields */}
-        <VStack width="100%" align="flex-start">
-          <HStack width="100%" justifyContent="left" spacing="20%">
-            {personalInfoInputFieldsMap[0].fields.map((field, j) => (
-              <VStack key={j} width={field.width}>
-                <Text
-                  fontSize="18px"
-                  fontWeight={600}
-                  fontFamily="Montserrat"
-                  alignSelf="flex-start"
-                  marginBottom={-10}
-                >
-                  {field.label}
-                </Text>
-                <Input
-                  variant="filled"
-                  height={personalInfoInputFieldsMap[0].height}
-                  placeholder="example"
+function PersonalInfo({ onSubmit }: PersonalInfoProps) {
+  return (
+    <Formik
+      initialValues={{
+        firstname: '',
+        lastname: '',
+        email: '',
+        phone: '',
+        birthyear: '',
+        groupRepresentative: false,
+        groupMembers: '',
+      }}
+      validationSchema={validationSchema}
+      onSubmit={onSubmit}
+    >
+      {({ values, errors, touched, setFieldValue }) => (
+        <Form>
+          <Box className="personal-info-box">
+            <VStack
+              spacing={0}
+              marginBottom="20px"
+              borderBottom="2px solid #000000"
+              paddingBottom="20px"
+            >
+              {personalInfoCheckboxesMap.map((field, i) => (
+                <HStack
+                  key={i}
                   width="100%"
-                />
-              </VStack>
-            ))}
-          </HStack>
-        </VStack>
+                  marginBottom="20px"
+                  alignItems="flex-start"
+                >
+                  <Text
+                    fontSize="18px"
+                    fontWeight={600}
+                    fontFamily="Montserrat"
+                  >
+                    {field.label}
+                  </Text>
+                  <Checkbox
+                    checked={values.groupRepresentative}
+                    onChange={(e) =>
+                      setFieldValue('groupRepresentative', e.target.checked)
+                    }
+                    sx={{
+                      color: '#808080',
+                      '&.Mui-checked': { color: '#808080' },
+                      '& .MuiSvgIcon-root': { fontSize: 23 },
+                      padding: '2px',
+                      marginLeft: '20px',
+                    }}
+                  />
+                </HStack>
+              ))}
 
-        {/* Lower Section */}
-        <HStack width="100%" align="start" spacing={4} mt={4}>
-          {/* Left Column - Email/Phone/Birth Year */}
-          <VStack width="380px" align="flex-start" spacing={0}>
-            {personalInfoInputFieldsMap.slice(1).map((group, i) => (
-              <VStack key={i} width="100%" align="flex-start">
-                <Text
-                  fontSize="18px"
-                  fontWeight={600}
-                  fontFamily="Montserrat"
-                  marginTop="30px"
-                  marginBottom={-10}
+              {/* Name Fields */}
+              <VStack width="100%" align="flex-start">
+                <HStack
+                  width="100%"
+                  justifyContent="left"
+                  spacing="20%"
                 >
-                  {group.fields[0].label}
-                </Text>
-                <Input
-                  variant="filled"
-                  height={group.height}
-                  placeholder="example"
-                  width={group.width}
-                />
+                  {personalInfoInputFieldsMap[0].fields.map((field, j) => {
+                    const fieldName =
+                      field.label === 'First Name'
+                        ? 'firstname'
+                        : 'lastname';
+                    return (
+                      <VStack key={j} width={field.width}>
+                        <Text
+                          fontSize="18px"
+                          fontWeight={600}
+                          fontFamily="Montserrat"
+                          alignSelf="flex-start"
+                          marginBottom={-10}
+                        >
+                          {field.label}
+                        </Text>
+                        <Field
+                          as={Input}
+                          name={fieldName}
+                          variant="filled"
+                          height={personalInfoInputFieldsMap[0].height}
+                          placeholder="example"
+                          width="100%"
+                        />
+                        {errors[fieldName] && touched[fieldName] && (
+                          <Text color="red" fontSize="sm">
+                            {errors[fieldName]}
+                          </Text>
+                        )}
+                      </VStack>
+                    );
+                  })}
+                </HStack>
               </VStack>
-            ))}
-          </VStack>
 
-          {/* Right Column - Group Members */}
-          {isGroupRepresentative && (
-            <VStack width="350px" align="flex-start" marginTop="30px" marginLeft="90px">
-              <Text
-                fontSize="18px"
-                fontWeight={600}
-                fontFamily="Montserrat"
-                marginBottom={-10}
-              >
-                Group Members
-              </Text>
-              <Textarea
-                variant="filled"
-                placeholder="First, last name..."
-                height="230px"
-                width="100%"
-                resize="none"
-                sx={{
-                  border: '1px solid #E2E8F0',
-                  _focus: {
-                    borderColor: '#3182CE',
-                    boxShadow: '0 0 0 1px #3182CE',
-                  },
-                  _hover: {
-                    borderColor: '#CBD5E0',
-                  },
-                }}
-              />
+              {/* Lower Section */}
+              <HStack width="100%" align="start" spacing={4} mt={4}>
+                {/* Left Column - Email/Phone/Birth Year */}
+                <VStack width="380px" align="flex-start" spacing={0}>
+                  {personalInfoInputFieldsMap.slice(1).map((group, i) => {
+                    const label = group.fields[0].label;
+                    let fieldName = '';
+                    if (label === 'Email Address') fieldName = 'email';
+                    else if (label === 'Phone Number') fieldName = 'phone';
+                    else if (label === 'Birth Year') fieldName = 'birthyear';
+                    return (
+                      <VStack key={i} width="100%" align="flex-start">
+                        <Text
+                          fontSize="18px"
+                          fontWeight={600}
+                          fontFamily="Montserrat"
+                          marginTop="30px"
+                          marginBottom={-10}
+                        >
+                          {label}
+                        </Text>
+                        <Field
+                          as={Input}
+                          name={fieldName}
+                          variant="filled"
+                          height={group.height}
+                          placeholder="example"
+                          width={group.width}
+                        />
+                      {errors[fieldName as keyof typeof errors] &&
+                        touched[fieldName as keyof typeof touched] && (
+                          <Text color="red" fontSize="sm">
+                            {errors[fieldName as keyof typeof errors]}
+                          </Text>
+                      )}
+                      </VStack>
+                    );
+                  })}
+                </VStack>
+
+                {/* Right Column - Group Members */}
+                {values.groupRepresentative && (
+                  <VStack
+                    width="350px"
+                    align="flex-start"
+                    marginTop="30px"
+                    marginLeft="90px"
+                  >
+                    <Text
+                      fontSize="18px"
+                      fontWeight={600}
+                      fontFamily="Montserrat"
+                      marginBottom={-10}
+                    >
+                      Group Members
+                    </Text>
+                    <Field
+                      as={Textarea}
+                      name="groupMembers"
+                      variant="filled"
+                      placeholder="First, last name..."
+                      height="230px"
+                      width="100%"
+                      resize="none"
+                      sx={{
+                        border: '1px solid #E2E8F0',
+                        _focus: {
+                          borderColor: '#3182CE',
+                          boxShadow: '0 0 0 1px #3182CE',
+                        },
+                        _hover: {
+                          borderColor: '#CBD5E0',
+                        },
+                      }}
+                    />
+                    {errors.groupMembers && touched.groupMembers && (
+                      <Text color="red" fontSize="sm">
+                        {errors.groupMembers}
+                      </Text>
+                    )}
+                  </VStack>
+                )}
+              </HStack>
             </VStack>
-          )}
-        </HStack>
-      </VStack>
 
-      <HStack className="circle-progress" justifyContent="center" spacing="30px">
-        <CircleIcon />
-        <CircleOutlinedIcon />
-        <CircleOutlinedIcon />
-      </HStack>
-    </Box>
+            <HStack
+              className="circle-progress"
+              justifyContent="center"
+              spacing="30px"
+            >
+              <CircleIcon />
+              <CircleOutlinedIcon />
+              <CircleOutlinedIcon />
+            </HStack>
+          </Box>
+          <Box textAlign="center" mt="20px">
+            <Button colorScheme="teal" type="submit">
+              Submit
+            </Button>
+          </Box>
+        </Form>
+      )}
+    </Formik>
   );
 }
 
 function TermsAndConditions() {
   return (
     <Box className="terms-and-conditions-box">
-      <VStack spacing={102} marginTop={'20px'} marginBottom={'20px'} borderBottom="2px solid #000000" paddingBottom="20px">
+      <VStack
+        spacing={102}
+        marginTop="20px"
+        marginBottom="20px"
+        borderBottom="2px solid #000000"
+        paddingBottom="20px"
+      >
         {termsAndConditionsCheckboxesMap.map((field, i) => (
-          <HStack key={i} width="100%" marginTop={'20px'} alignItems="flex-start">
-            <Text textDecoration="underline" fontSize="18px" fontWeight={600} fontFamily="Montserrat" marginTop={'4px'}>
+          <HStack
+            key={i}
+            width="100%"
+            marginTop="20px"
+            alignItems="flex-start"
+          >
+            <Text
+              textDecoration="underline"
+              fontSize="18px"
+              fontWeight={600}
+              fontFamily="Montserrat"
+              marginTop="4px"
+            >
               {field.label}
             </Text>
             <Checkbox
@@ -210,7 +337,11 @@ function TermsAndConditions() {
           </HStack>
         ))}
       </VStack>
-      <HStack className="circle-progress" justifyContent="center" spacing="30px">
+      <HStack
+        className="circle-progress"
+        justifyContent="center"
+        spacing="30px"
+      >
         <CircleIcon />
         <CircleIcon />
         <CircleOutlinedIcon />
@@ -224,14 +355,15 @@ interface Props {
 }
 
 export default function SignUpPage({ setShowSignUp }: Props) {
-  const [isSubmitted, setIsSubmitted] = useState(false);
+  const [isSubmitted, setIsSubmitted] = React.useState(false);
   const navigate = useNavigate();
 
   const closeSignUp = () => {
     setShowSignUp(false);
   };
 
-  const handleSubmit = () => {
+  const handleSubmit = (values: any) => {
+    console.log(values);
     setIsSubmitted(true);
     navigate('/success');
   };
@@ -246,8 +378,8 @@ export default function SignUpPage({ setShowSignUp }: Props) {
       justifyContent="center"
       bg="#D9D9D9"
       width="80%"
-      height="140%"
-      zIndex={'200'}
+      height="100%"
+      zIndex="200"
     >
       <IconButton
         aria-label="close"
@@ -267,7 +399,7 @@ export default function SignUpPage({ setShowSignUp }: Props) {
         flexDirection="column"
         alignItems="center"
         justifyContent="space-evenly"
-        paddingTop={'30px'}
+        paddingTop="30px"
       >
         <Box
           height="5%"
@@ -277,33 +409,19 @@ export default function SignUpPage({ setShowSignUp }: Props) {
           justifyContent="center"
           alignItems="center"
         >
-          <Text fontFamily="Montserrat" fontSize="28px" fontWeight={700} paddingBottom={'30px'}>
+          <Text
+            fontFamily="Montserrat"
+            fontSize="28px"
+            fontWeight={700}
+            paddingBottom="30px"
+          >
             Welcome, Volunteer!
           </Text>
         </Box>
         <Box width="90%" mt="10px">
-          <PersonalInfo />
+          <PersonalInfo onSubmit={handleSubmit} />
         </Box>
-
-        {/* Conditional rendering for the submit button */}
-        {/* {!isSubmitted && (
-          <Button size="large" marginBottom="7%" fontSize="20px" onClick={handleSubmit}
-          bottom="10%"
-          left="50%"
-          transform="translateX(-50%)">
-            Submit
-          </Button>
-        )} */}
-
-        {/* Success message */}
-        {/* {isSubmitted && (
-          <Box>
-            <Text fontSize="24px" fontWeight={600}>
-              Thank you for submitting the form!
-            </Text>
-          </Box>
-        )} */}
       </Box>
     </Box>
   );
-}
\ No newline at end of file
+}