[#391] Handle new user journey when prev case doesn't have any segmen…

…ts yet

frontend/src/pages/cases/Case.js

@@ -95,16 +95,14 @@ const SegmentTabsWrapper = ({ children, setbackfunction, setnextfunction }) => {
 
   // set default active segmentId
   useEffect(() => {
-    if (!activeSegmentId && !isEmpty(currentCase.segments)) {
-      CaseUIState.update((s) => ({
-        ...s,
-        general: {
-          ...s.general,
-          activeSegmentId: currentCase.segments?.[0]?.id || null,
-        },
-      }));
-    }
-  }, [activeSegmentId, currentCase.segments]);
+    CaseUIState.update((s) => ({
+      ...s,
+      general: {
+        ...s.general,
+        activeSegmentId: currentCase.segments?.[0]?.id || null,
+      },
+    }));
+  }, [currentCase.segments]);
 
   const segmentTabItems = useMemo(() => {
     return currentCase.segments.map((segment) => ({
@@ -133,7 +131,13 @@ const SegmentTabsWrapper = ({ children, setbackfunction, setnextfunction }) => {
                 : null
             ),
     }));
-  }, [currentCase, children, setbackfunction, setnextfunction, childrenCount]);
+  }, [
+    currentCase.segments,
+    children,
+    setbackfunction,
+    setnextfunction,
+    childrenCount,
+  ]);
 
   return (
     <Row id="steps" gutter={[20, 20]}>
@@ -285,6 +289,7 @@ const Case = () => {
         .catch((e) => {
           const { status } = e.response;
           updateStepIncomeTargetState("regionOptionStatus", status);
+          updateStepIncomeTargetState("regionOptions", []);
         })
         .finally(() => {
           updateStepIncomeTargetState("regionOptionLoading", false);

frontend/src/pages/cases/Cases.js

@@ -30,6 +30,7 @@ import { api } from "../../lib";
 import { isEmpty } from "lodash";
 import { adminRole } from "../../store/static";
 import { stepPath } from "./store";
+import { resetCurrentCaseState } from "./store/current_case";
 
 const { Search } = Input;
 
@@ -260,6 +261,11 @@ const Cases = () => {
     },
   ];
 
+  useEffect(() => {
+    // reset currentCase state
+    resetCurrentCaseState();
+  }, []);
+
   useEffect(() => {
     if (userID || refresh) {
       const { country, commodity, tags, year, email } = filters;

frontend/src/pages/cases/layout/CaseWrapper.js

@@ -1,7 +1,7 @@
 import React, { useState, useRef } from "react";
 import "./case-wrapper.scss";
 import { useNavigate } from "react-router-dom";
-import { Row, Col, Steps, Layout, Affix, Button, Space } from "antd";
+import { Row, Col, Steps, Layout, Affix, Button, Space, Alert } from "antd";
 import { ContentLayout } from "../../../components/layout";
 import {
   ArrowLeftOutlined,
@@ -107,10 +107,18 @@ const CaseWrapper = ({ children, step, caseId, currentCase }) => {
                   </Button>
                 }
               >
-                {React.cloneElement(children, {
-                  setbackfunction: (fn) => (backFunctionRef.current = fn),
-                  setnextfunction: (fn) => (nextFunctionRef.current = fn),
-                })}
+                {currentCase.segments.filter((s) => s.id).length ? (
+                  React.cloneElement(children, {
+                    setbackfunction: (fn) => (backFunctionRef.current = fn),
+                    setnextfunction: (fn) => (nextFunctionRef.current = fn),
+                  })
+                ) : (
+                  // Show alert if current case doesn't have any segments
+                  <Alert
+                    message="Unable to load the page. Please add segments in the Case settings first."
+                    type="warning"
+                  />
+                )}
               </ContentLayout>
             </Content>
           </Col>

frontend/src/pages/cases/steps/SetIncomeTarget.js

@@ -18,7 +18,6 @@ import {
   PrevCaseState,
   stepPath,
 } from "../store";
-import { resetCurrentCaseState } from "../store/current_case";
 import { yesNoOptions } from "../../../store/static";
 import {
   InputNumberThousandFormatter,
@@ -384,7 +383,6 @@ const SetIncomeTarget = ({ segment, setbackfunction, setnextfunction }) => {
   ]);
 
   const backFunction = useCallback(() => {
-    resetCurrentCaseState();
     navigate("/cases");
   }, [navigate]);