change review form to allow return to dashboard

uwblueprint · Aug 28, 2023 · 25c20e7 · 25c20e7
1 parent 4755aaf
commit 25c20e7
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 47 deletions.
diff --git 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
@@ -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,29 +32,38 @@ 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">
         <HStack w="full" display="flex" justifyContent="space-between">
           <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
@@ -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
@@ -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,