Fix: Persist data from Personal Info in Available Sessions Page

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

@@ -6,6 +6,8 @@ import React, {
   useRef,
   useEffect,
   useMemo,
+  SetStateAction,
+  Dispatch,
 } from "react";
 import { CampResponse, CampSession } from "../../../../types/CampsTypes";
 import {
@@ -43,6 +45,8 @@ import { EDLP_PLACEHOLDER_TIMESLOT } from "../../../../constants/RegistrationCon
 
 type RegistrationStepsProps = {
   camp: CampResponse;
+  campers: RegistrantExperienceCamper[];
+  setCampers: Dispatch<SetStateAction<RegistrantExperienceCamper[]>>;
   orderedSelectedSessions: CampSession[];
   waiver: WaiverType;
   waitlistedCamper?: WaitlistedCamper;
@@ -52,6 +56,8 @@ type RegistrationStepsProps = {
 
 const RegistrationSteps = ({
   camp,
+  campers,
+  setCampers,
   orderedSelectedSessions: selectedSessions,
   waiver,
   onClickBack,
@@ -71,30 +77,6 @@ const RegistrationSteps = ({
 
   const [isEditing, setIsEditing] = useState(0);
 
-  const [campers, setCampers] = useState<RegistrantExperienceCamper[]>([
-    {
-      firstName: "",
-      lastName: "",
-      age: NaN,
-      contacts: [
-        {
-          firstName: "",
-          lastName: "",
-          email: "",
-          phoneNumber: "",
-          relationshipToCamper: "",
-        },
-        {
-          firstName: "",
-          lastName: "",
-          email: "",
-          phoneNumber: "",
-          relationshipToCamper: "",
-        },
-      ],
-      optionalClauses: [],
-    },
-  ]);
 
   const [
     requireEarlyDropOffLatePickup,

frontend/src/components/pages/RegistrantExperience/index.tsx

@@ -11,7 +11,7 @@ import RegistrationResultPage from "./RegistrationResult";
 import RegistrationSteps from "./RegistrationSteps";
 import SessionSelection from "./SessionSelection";
 import AdminAPIClient from "../../../APIClients/AdminAPIClient";
-import { WaitlistedCamper } from "../../../types/CamperTypes";
+import { CreateWaitlistedCamperDTO, RegistrantExperienceCamper, WaitlistedCamper } from "../../../types/CamperTypes";
 import { Waiver as WaiverType } from "../../../types/AdminTypes";
 import { sortSessions } from "../../../utils/CampUtils";
 import WaitlistExperiencePage from "../WaitlistExperience";
@@ -59,6 +59,43 @@ const RegistrantExperiencePage = (): React.ReactElement => {
     CheckoutData | undefined
   >(undefined);
 
+  const [campers, setCampers] = useState<RegistrantExperienceCamper[]>([
+    {
+      firstName: "",
+      lastName: "",
+      age: NaN,
+      contacts: [
+        {
+          firstName: "",
+          lastName: "",
+          email: "",
+          phoneNumber: "",
+          relationshipToCamper: "",
+        },
+        {
+          firstName: "",
+          lastName: "",
+          email: "",
+          phoneNumber: "",
+          relationshipToCamper: "",
+        },
+      ],
+      optionalClauses: [],
+    },
+  ]);
+
+  const [waitlistedCampers, setWaitlistedCampers] = useState<CreateWaitlistedCamperDTO[]>([
+    {
+      firstName: "",
+      lastName: "",
+      age: NaN,
+      contactEmail: "",
+      contactFirstName: "",
+      contactLastName: "",
+      contactNumber: "",
+    },
+  ]);
+
   const getCurrentStep = () => {
     switch (currentStep) {
       case "loading":
@@ -82,6 +119,8 @@ const RegistrantExperiencePage = (): React.ReactElement => {
         return (
           <RegistrationSteps
             camp={camp as CampResponse}
+            campers={campers}
+            setCampers={setCampers}
             orderedSelectedSessions={sortSessions(
               (camp as CampResponse).campSessions.filter((session) =>
                 selectedSessions.has(session.id),
@@ -97,6 +136,8 @@ const RegistrantExperiencePage = (): React.ReactElement => {
         return (
           <WaitlistExperiencePage
             camp={camp as CampResponse}
+            campers={waitlistedCampers}
+            setCampers={setWaitlistedCampers}
             selectedCampSessions={(camp as CampResponse).campSessions.filter(
               (session) => selectedSessions.has(session.id),
             )}

frontend/src/components/pages/WaitlistExperience/index.tsx

@@ -1,5 +1,5 @@
 import { Box, Center, Flex, Spinner, useToast } from "@chakra-ui/react";
-import React, { useRef, useState } from "react";
+import React, { Dispatch, SetStateAction, useRef, useState } from "react";
 import CamperAPIClient from "../../../APIClients/CamperAPIClient";
 import { CreateWaitlistedCamperDTO } from "../../../types/CamperTypes";
 import { CampResponse, CampSession } from "../../../types/CampsTypes";
@@ -13,6 +13,8 @@ import WaitlistFooter from "./WaitlistFooter";
 
 interface WaitlistExperiencePageProps {
   camp: CampResponse;
+  campers: CreateWaitlistedCamperDTO[];
+  setCampers: Dispatch<SetStateAction<CreateWaitlistedCamperDTO[]>>
   selectedCampSessions: CampSession[];
   onClickBack: () => void;
 }
@@ -22,6 +24,8 @@ waitListNextStepTxtMap.set(WaitListExperienceSteps.PersonalInfoPage, "Submit");
 
 const WaitlistExperiencePage = ({
   camp,
+  campers,
+  setCampers,
   selectedCampSessions,
   onClickBack,
 }: WaitlistExperiencePageProps): React.ReactElement => {
@@ -31,17 +35,6 @@ const WaitlistExperiencePage = ({
     WaitListExperienceSteps.PersonalInfoPage,
   );
   const toast = useToast();
-  const [campers, setCampers] = useState<CreateWaitlistedCamperDTO[]>([
-    {
-      firstName: "",
-      lastName: "",
-      age: NaN,
-      contactEmail: "",
-      contactFirstName: "",
-      contactLastName: "",
-      contactNumber: "",
-    },
-  ]);
 
   if (!camp)
     return (