From 25c20e779ce373cccaf8aeea2de5cb1a6001deb3 Mon Sep 17 00:00:00 2001
From: bowenzhu1 <bowenzhus@hotmail.com>
Date: Mon, 28 Aug 2023 06:02:07 -0400
Subject: [PATCH] change review form to allow return to dashboard

---
 .../src/components/dashboard/StatusModal.tsx  |  3 +-
 .../src/components/intake/ReviewCaseForm.tsx  | 71 +++++++------------
 frontend/src/components/pages/IntakePage.tsx  | 12 +++-
 frontend/src/contexts/IntakeValueContext.tsx  |  8 +++
 4 files changed, 47 insertions(+), 47 deletions(-)

diff --git a/frontend/src/components/dashboard/StatusModal.tsx b/frontend/src/components/dashboard/StatusModal.tsx
index c0b0a11cf..5cec75f60 100644
--- a/frontend/src/components/dashboard/StatusModal.tsx
+++ b/frontend/src/components/dashboard/StatusModal.tsx
@@ -52,6 +52,7 @@ const StatusModal = ({
 
   const {
     setStep,
+    setIsReviewOnly,
     setReferralDetails,
     setCourtDetails,
     setProgramDetails,
@@ -89,7 +90,7 @@ const StatusModal = ({
     setReferralDetails(mockReferralDetails);
     setCourtDetails(mockCourtDetails);
     setProgramDetails(mockProgramDetails);
-
+    setIsReviewOnly(true);
     goToIntake();
   }
   return (
diff --git a/frontend/src/components/intake/ReviewCaseForm.tsx b/frontend/src/components/intake/ReviewCaseForm.tsx
index 64cc72f84..81419c46e 100644
--- a/frontend/src/components/intake/ReviewCaseForm.tsx
+++ b/frontend/src/components/intake/ReviewCaseForm.tsx
@@ -18,6 +18,8 @@ type ReviewFormProps = {
   nextStep: () => void;
   setStep: React.Dispatch<React.SetStateAction<number>>;
   setReviewHeader: React.Dispatch<React.SetStateAction<boolean>>;
+  isReviewOnly: boolean;
+  setIsReviewOnly: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
 const ReviewForm = ({
@@ -30,11 +32,30 @@ const ReviewForm = ({
   nextStep,
   setStep,
   setReviewHeader,
+  isReviewOnly,
+  setIsReviewOnly,
 }: ReviewFormProps): React.ReactElement => {
   const onNextStep = () => {
     nextStep(); // TODO: Add functionality for nextStep (Currently we pass in empty nextStep() prop)
   };
 
+  const editSectionButton = (targetStep: IntakeSteps): React.ReactElement => {
+    return (
+      <Button
+        textStyle="button-medium"
+        variant="primary"
+        rightIcon={<Icon as={Edit2} h="16px" />}
+        onClick={() => {
+          setStep(targetStep);
+          setReviewHeader(true);
+          setIsReviewOnly(false);
+        }}
+      >
+        Edit
+      </Button>
+    );
+  };
+
   return (
     <>
       <Stack padding="32px" spacing="16px">
@@ -42,17 +63,7 @@ const ReviewForm = ({
           <Text color="b&w.black" textStyle="header-large">
             Case referral
           </Text>
-          <Button
-            textStyle="button-medium"
-            variant="primary"
-            rightIcon={<Icon as={Edit2} h="16px" />}
-            onClick={() => {
-              setStep(IntakeSteps.CASE_REFERRAL);
-              setReviewHeader(true);
-            }}
-          >
-            Edit
-          </Button>
+          {editSectionButton(IntakeSteps.CASE_REFERRAL)};
         </HStack>
         <ReferralForm
           referralDetails={referralDetails}
@@ -70,17 +81,7 @@ const ReviewForm = ({
           <Text color="b&w.black" textStyle="header-large">
             Court information
           </Text>
-          <Button
-            textStyle="button-medium"
-            variant="primary"
-            rightIcon={<Icon as={Edit2} h="16px" />}
-            onClick={() => {
-              setStep(IntakeSteps.COURT_INFORMATION);
-              setReviewHeader(true);
-            }}
-          >
-            Edit
-          </Button>
+          {editSectionButton(IntakeSteps.COURT_INFORMATION)};
         </HStack>
         <CourtInformationForm
           courtDetails={courtDetails}
@@ -98,17 +99,7 @@ const ReviewForm = ({
           <Text color="b&w.black" textStyle="header-large">
             Individual details
           </Text>
-          <Button
-            textStyle="button-medium"
-            variant="primary"
-            rightIcon={<Icon as={Edit2} h="16px" />}
-            onClick={() => {
-              setStep(IntakeSteps.INDIVIDUAL_DETAILS);
-              setReviewHeader(true);
-            }}
-          >
-            Edit
-          </Button>
+          {editSectionButton(IntakeSteps.INDIVIDUAL_DETAILS)};
         </HStack>
         <IndividualDetails childrenDetails={[]} caregiverDetails={[]} />
       </Stack>
@@ -118,17 +109,7 @@ const ReviewForm = ({
           <Text color="b&w.black" textStyle="header-large">
             Program details
           </Text>
-          <Button
-            textStyle="button-medium"
-            variant="primary"
-            rightIcon={<Icon as={Edit2} h="16px" />}
-            onClick={() => {
-              setStep(IntakeSteps.PROGRAM_DETAILS);
-              setReviewHeader(true);
-            }}
-          >
-            Edit
-          </Button>
+          {editSectionButton(IntakeSteps.PROGRAM_DETAILS)};
         </HStack>
         <ProgramForm
           programDetails={programDetails}
@@ -142,7 +123,7 @@ const ReviewForm = ({
       </Stack>
 
       <IntakeFooter
-        nextButtonText="Submit case"
+        nextButtonText={isReviewOnly ? "Return to Dashboard" : "Submit case"}
         isStepComplete={() => true} // TODO: validate form
         registrationLoading={false}
         nextStepCallBack={onNextStep}
diff --git a/frontend/src/components/pages/IntakePage.tsx b/frontend/src/components/pages/IntakePage.tsx
index 8e6a65ac3..c46946b8d 100644
--- a/frontend/src/components/pages/IntakePage.tsx
+++ b/frontend/src/components/pages/IntakePage.tsx
@@ -38,6 +38,7 @@ const Intake = (): React.ReactElement => {
   } = useDisclosure();
 
   const { step, setStep } = useStepValueContext();
+  const { isReviewOnly, setIsReviewOnly } = useStepValueContext();
   const [reviewHeader, setReviewHeader] = useState(false);
   const { referralDetails, setReferralDetails } = useStepValueContext();
   const { courtDetails, setCourtDetails } = useStepValueContext();
@@ -52,7 +53,14 @@ const Intake = (): React.ReactElement => {
   const [allProviders, setAllProviders] = useState<Providers>([]);
   const [selectedIndexChild, setSelectedIndexChild] = useState(-1);
 
-  const nextStep = () => setStep(step + 1);
+  const nextStep = () => {
+    if (isReviewOnly) {
+      setIsReviewOnly(false);
+      history.push("/");
+    } else {
+      setStep(step + 1);
+    }
+  };
 
   const renderDetailsForm = () => {
     switch (step) {
@@ -116,6 +124,8 @@ const Intake = (): React.ReactElement => {
               nextStep={nextStep}
               setStep={setStep}
               setReviewHeader={setReviewHeader}
+              isReviewOnly={isReviewOnly}
+              setIsReviewOnly={setIsReviewOnly}
             />
           </Box>
         );
diff --git a/frontend/src/contexts/IntakeValueContext.tsx b/frontend/src/contexts/IntakeValueContext.tsx
index 75036d884..a7039f512 100644
--- a/frontend/src/contexts/IntakeValueContext.tsx
+++ b/frontend/src/contexts/IntakeValueContext.tsx
@@ -16,6 +16,8 @@ interface IntakeValueProviderProps {
 interface IntakeStepContext {
   step: number;
   setStep: React.Dispatch<React.SetStateAction<number>>;
+  isReviewOnly: boolean;
+  setIsReviewOnly: React.Dispatch<React.SetStateAction<boolean>>;
   referralDetails: ReferralDetails;
   setReferralDetails: React.Dispatch<React.SetStateAction<ReferralDetails>>;
   courtDetails: CourtDetails;
@@ -27,6 +29,8 @@ interface IntakeStepContext {
 const StepValueContext = createContext<IntakeStepContext>({
   step: 0,
   setStep: () => {},
+  isReviewOnly: false,
+  setIsReviewOnly: () => {},
   referralDetails: DEFAULT_REFFERAL_DETAILS,
   setReferralDetails: () => {},
   courtDetails: DEFAULT_COURT_DETAILS,
@@ -44,6 +48,7 @@ export const IntakeValueProvider: React.FC<IntakeValueProviderProps> = ({
 }: IntakeValueProviderProps) => {
   const location = useLocation();
 
+  const [isReviewOnly, setIsReviewOnly] = useState<boolean>(false);
   const [referralDetails, setReferralDetails] = useState<ReferralDetails>(
     DEFAULT_REFFERAL_DETAILS,
   );
@@ -59,6 +64,7 @@ export const IntakeValueProvider: React.FC<IntakeValueProviderProps> = ({
   useEffect(() => {
     if (step !== reviewCaseDetailsStep) {
       setStep(0);
+      setIsReviewOnly(false);
       setReferralDetails(DEFAULT_REFFERAL_DETAILS);
       setCourtDetails(DEFAULT_COURT_DETAILS);
       setProgramDetails(DEFAULT_PROGRAM_DETAILS);
@@ -69,6 +75,8 @@ export const IntakeValueProvider: React.FC<IntakeValueProviderProps> = ({
   const intakeValues = {
     step,
     setStep,
+    isReviewOnly,
+    setIsReviewOnly,
     referralDetails,
     setReferralDetails,
     courtDetails,