Review Registration Personal Info (#223)

* Rebase

* Address PR comments, organize code to remove duplication

* Lint

* Rebase

* Address PR comments, organize code to remove duplication

* Lint

* Lint

* Add visited verification on review summary page.

* Add new dependency after resolving merge conflict.

* Address comments

Author: twilkhoo

frontend/src/components/common/GeneralAccordionButton.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { AccordionButton, AccordionIcon, Box, Text } from "@chakra-ui/react";
+
+type GeneralAccordionButtonProps = {
+  title: string;
+};
+
+const GeneralAccordionButton = ({
+  title,
+}: GeneralAccordionButtonProps): React.ReactElement => {
+  return (
+    <AccordionButton
+      borderRadius="20px"
+      bg="primary.green.600"
+      _hover={{ bg: "primary.green.600" }}
+    >
+      <Box flex="1" textAlign="left">
+        <Text
+          color="text.white.100"
+          textStyle={{
+            sm: "xSmallMedium",
+            md: "bodyBold",
+            lg: "displayLarge",
+          }}
+          p={2}
+        >
+          {title}
+        </Text>
+      </Box>
+      <AccordionIcon color="white" fontSize="2.5em" />
+    </AccordionButton>
+  );
+};
+
+export default GeneralAccordionButton;

frontend/src/components/common/formQuestions/QuestionsAccordionItem.tsx

@@ -1,19 +1,13 @@
 import React from "react";
 
-import {
-  AccordionButton,
-  AccordionIcon,
-  AccordionItem,
-  AccordionPanel,
-  Box,
-  Text,
-} from "@chakra-ui/react";
+import { AccordionItem, AccordionPanel } from "@chakra-ui/react";
 
 import {
   CreateFormQuestionRequest,
   FormQuestion,
 } from "../../../types/CampsTypes";
 import QuestionCard from "./QuestionCard";
+import GeneralAccordionButton from "../GeneralAccordionButton";
 import RegistrationQuestionCard from "../../pages/CampCreation/RegistrationForm/RegistrationQuestionCard";
 import NoRegistrationQuestionsCard from "../../pages/CampCreation/RegistrationForm/NoRegistrationQuestionsCard";
 
@@ -42,18 +36,7 @@ const QuestionsAccordionItem = ({
 
   return (
     <AccordionItem border="none" marginBottom="40px">
-      <AccordionButton
-        borderRadius="20px"
-        bg="primary.green.600"
-        _hover={{ bg: "primary.green.600" }}
-      >
-        <Box flex="1" textAlign="left">
-          <Text color="text.white.100" textStyle="heading" p={2}>
-            {accordionTitle}
-          </Text>
-        </Box>
-        <AccordionIcon color="white" fontSize="2.5em" />
-      </AccordionButton>
+      <GeneralAccordionButton title={accordionTitle} />
 
       {isTemplatePage ? (
         <AccordionPanel>

frontend/src/components/pages/RegistrantExperience/RegistrationSteps/PersonalInfo/personalInfoReducer.tsx

@@ -151,6 +151,59 @@ export const checkRelationToCamper = (relation: string): boolean => {
   return !!relation;
 };
 
+export const checkCamperCardComplete = (
+  camp: CampResponse,
+  camper: RegistrantExperienceCamper,
+): boolean => {
+  return (
+    checkFirstName(camper.firstName) &&
+    checkLastName(camper.lastName) &&
+    checkAge(camper.age, camp.ageUpper, camp.ageLower)
+  );
+};
+
+export const checkContactCardComplete = (
+  camper: RegistrantExperienceCamper,
+): boolean => {
+  if (camper.contacts.length > 2 || camper.contacts.length < 1) {
+    return false; // Need to have either 1 or 2 contacts only
+  }
+  // Check primary contact card
+  const primaryContact = camper.contacts[0];
+  if (
+    !(
+      checkFirstName(primaryContact.firstName) &&
+      checkLastName(primaryContact.lastName) &&
+      checkEmail(primaryContact.email) &&
+      checkPhoneNumber(primaryContact.phoneNumber) &&
+      checkRelationToCamper(primaryContact.relationshipToCamper)
+    )
+  ) {
+    return false;
+  }
+  // Check secondary contact card
+  if (camper.contacts.length > 1) {
+    const secondaryContact = camper.contacts[1];
+    if (
+      (secondaryContact.firstName ||
+        secondaryContact.lastName ||
+        secondaryContact.email ||
+        secondaryContact.phoneNumber ||
+        secondaryContact.relationshipToCamper) &&
+      !(
+        checkFirstName(secondaryContact.firstName) &&
+        checkLastName(secondaryContact.lastName) &&
+        checkEmail(secondaryContact.email) &&
+        checkPhoneNumber(secondaryContact.phoneNumber) &&
+        checkRelationToCamper(secondaryContact.relationshipToCamper)
+      )
+    ) {
+      return false;
+    }
+  }
+  return true;
+};
+
 export const checkPersonalInfoFilled = (
   campers: RegistrantExperienceCamper[],
   camp: CampResponse | undefined,
@@ -162,53 +215,14 @@ export const checkPersonalInfoFilled = (
 
   /* eslint-disable-next-line */
   for (const camper of campers) {
-    // Check camper card
-    if (
-      !(
-        checkFirstName(camper.firstName) &&
-        checkLastName(camper.lastName) &&
-        checkAge(camper.age, camp.ageUpper, camp.ageLower)
-      )
-    )
-      return false;
-
-    // Check contact cards
-    if (camper.contacts.length > 2 || camper.contacts.length < 1) {
-      return false; // Need to have either 1 or 2 contacts only
-    }
-    // Check primary contact card
-    const primaryContact = camper.contacts[0];
     if (
       !(
-        checkFirstName(primaryContact.firstName) &&
-        checkLastName(primaryContact.lastName) &&
-        checkEmail(primaryContact.email) &&
-        checkPhoneNumber(primaryContact.phoneNumber) &&
-        checkRelationToCamper(primaryContact.relationshipToCamper)
+        checkCamperCardComplete(camp, camper) &&
+        checkContactCardComplete(camper)
       )
     ) {
       return false;
     }
-    // Check secondary contact card
-    if (camper.contacts.length > 1) {
-      const secondaryContact = camper.contacts[1];
-      if (
-        (secondaryContact.firstName ||
-          secondaryContact.lastName ||
-          secondaryContact.email ||
-          secondaryContact.phoneNumber ||
-          secondaryContact.relationshipToCamper) &&
-        !(
-          checkFirstName(secondaryContact.firstName) &&
-          checkLastName(secondaryContact.lastName) &&
-          checkEmail(secondaryContact.email) &&
-          checkPhoneNumber(secondaryContact.phoneNumber) &&
-          checkRelationToCamper(secondaryContact.relationshipToCamper)
-        )
-      ) {
-        return false;
-      }
-    }
   }
 
   // Check required personal info and contact info questions

frontend/src/components/pages/RegistrantExperience/RegistrationSteps/RegistrationFooter.tsx

@@ -8,6 +8,7 @@ export type RegistrationFooterProps = {
   isCurrentStepCompleted: boolean;
   registrationLoading: boolean;
   handleStepNavigation: (stepsToMove: number) => void;
+  isPaymentSummary: boolean;
   isWaitlistRegistration: boolean;
 };
 
@@ -17,6 +18,7 @@ const RegistrationFooter = ({
   isCurrentStepCompleted,
   registrationLoading,
   handleStepNavigation,
+  isPaymentSummary,
   isWaitlistRegistration,
 }: RegistrationFooterProps): React.ReactElement => {
   const toast = useToast();
@@ -75,7 +77,8 @@ const RegistrationFooter = ({
         loadingText="Submitting"
         onClick={onNextStep}
       >
-        {currentStep === RegistrantExperienceSteps.ReviewRegistrationPage
+        {currentStep === RegistrantExperienceSteps.ReviewRegistrationPage &&
+        isPaymentSummary
           ? "Go to checkout"
           : "Next"}
       </Button>