use children and caregivers information in review form

frontend/src/components/intake/IndividualDetails.tsx

@@ -1,11 +1,12 @@
 import React from "react";
 import { Button, VStack, Text, HStack, Icon, Divider } from "@chakra-ui/react";
 import { ArrowRight } from "react-feather";
-import { IndividualDetailsOverview } from "./PromptBox";
+import { Children } from "./child-information/AddChildPage";
+import { Caregivers } from "./NewCaregiverModal";
 
 type IndividualDetailsProps = {
-  childrenDetails: IndividualDetailsOverview[];
-  caregiverDetails: IndividualDetailsOverview[];
+  childrenDetails: Children;
+  caregiverDetails: Caregivers;
 };
 
 const IndividualDetails = ({
@@ -29,10 +30,12 @@ const IndividualDetails = ({
             <HStack w="full">
               <VStack align="flex-start" w="full" spacing="0px">
                 <HStack>
-                  <Text textStyle="title-small">{indiv.name}</Text>
+                  <Text textStyle="title-small">
+                    {indiv.childDetails.childName}
+                  </Text>
                 </HStack>
                 <Text color="gray.600" textStyle="body-medium">
-                  {indiv.fileNumber}
+                  {indiv.childDetails.cpinFileNumber}
                 </Text>
               </VStack>
               <Button
@@ -66,10 +69,10 @@ const IndividualDetails = ({
             <HStack w="full">
               <VStack align="flex-start" w="full" spacing="0px">
                 <HStack>
-                  <Text textStyle="title-small">{indiv.name}</Text>
+                  <Text textStyle="title-small">{indiv.caregiverName}</Text>
                 </HStack>
                 <Text color="gray.600" textStyle="body-medium">
-                  {indiv.fileNumber}
+                  {indiv.relationship}
                 </Text>
               </VStack>
               <Button

frontend/src/components/intake/ReviewCaseForm.tsx

@@ -7,6 +7,8 @@ import CourtInformationForm, { CourtDetails } from "./CourtInformationForm";
 import ProgramForm, { ProgramDetails } from "./ProgramForm";
 import IntakeSteps from "./intakeSteps";
 import IntakeFooter from "./IntakeFormFooter";
+import { Children } from "./child-information/AddChildPage";
+import { Caregivers } from "./NewCaregiverModal";
 
 type ReviewFormProps = {
   referralDetails: ReferralDetails;
@@ -20,6 +22,8 @@ type ReviewFormProps = {
   setReviewHeader: React.Dispatch<React.SetStateAction<boolean>>;
   isReviewOnly: boolean;
   setIsReviewOnly: React.Dispatch<React.SetStateAction<boolean>>;
+  childrens: Children;
+  caregivers: Caregivers;
 };
 
 const ReviewForm = ({
@@ -34,6 +38,8 @@ const ReviewForm = ({
   setReviewHeader,
   isReviewOnly,
   setIsReviewOnly,
+  childrens,
+  caregivers,
 }: ReviewFormProps): React.ReactElement => {
   const onNextStep = () => {
     nextStep(); // TODO: Add functionality for nextStep (Currently we pass in empty nextStep() prop)
@@ -101,7 +107,10 @@ const ReviewForm = ({
           </Text>
           {editSectionButton(IntakeSteps.INDIVIDUAL_DETAILS)};
         </HStack>
-        <IndividualDetails childrenDetails={[]} caregiverDetails={[]} />
+        <IndividualDetails
+          childrenDetails={childrens}
+          caregiverDetails={caregivers}
+        />
       </Stack>
 
       <Stack padding="32px" spacing="16px">

frontend/src/components/pages/IntakePage.tsx

@@ -126,6 +126,8 @@ const Intake = (): React.ReactElement => {
               setReviewHeader={setReviewHeader}
               isReviewOnly={isReviewOnly}
               setIsReviewOnly={setIsReviewOnly}
+              childrens={children}
+              caregivers={caregivers}
             />
           </Box>
         );