[#391] Debugging with test full case data for current complete new us…

…er journey
akvo · Jan 17, 2025 · 3af78ff · 3af78ff
1 parent ca35141
commit 3af78ff
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 27 deletions.
diff --git a/frontend/src/pages/cases/Case.js b/frontend/src/pages/cases/Case.js
@@ -93,17 +93,6 @@ const SegmentTabsWrapper = ({ children, setbackfunction, setnextfunction }) => {
   const { activeSegmentId } = CaseUIState.useState((s) => s.general);
   const childrenCount = React.Children.count(children);
 
-  // set default active segmentId
-  useEffect(() => {
-    CaseUIState.update((s) => ({
-      ...s,
-      general: {
-        ...s.general,
-        activeSegmentId: currentCase.segments?.[0]?.id || null,
-      },
-    }));
-  }, [currentCase.segments]);
-
   const segmentTabItems = useMemo(() => {
     return currentCase.segments.map((segment) => ({
       label: segment.name,
@@ -203,6 +192,14 @@ const Case = () => {
           const { data } = res;
           CurrentCaseState.update((s) => ({ ...s, ...data }));
           PrevCaseState.update((s) => ({ ...s, ...data }));
+          // set default active segmentId
+          CaseUIState.update((s) => ({
+            ...s,
+            general: {
+              ...s.general,
+              activeSegmentId: data.segments?.[0]?.id || null,
+            },
+          }));
         })
         .catch((e) => {
           console.error("Error fetching case data", e);
@@ -378,11 +375,11 @@ const Case = () => {
         });
 
         const totalCurrentIncomeAnswer = totalIncomeQuestions
-          .map((qs) => segment.answers[`current-${qs}`])
+          .map((qs) => segment?.answers?.[`current-${qs}`] || 0)
           .filter((a) => a)
           .reduce((acc, a) => acc + a, 0);
         const totalFeasibleIncomeAnswer = totalIncomeQuestions
-          .map((qs) => segment.answers[`feasible-${qs}`])
+          .map((qs) => segment?.answers?.[`feasible-${qs}`] || 0)
           .filter((a) => a)
           .reduce((acc, a) => acc + a, 0);
 

diff --git a/frontend/src/pages/cases/Cases.js b/frontend/src/pages/cases/Cases.js
@@ -368,7 +368,7 @@ const Cases = () => {
       title="Cases"
       wrapperId="case"
       titleRighContent={
-        <Space>
+        <Space wrap>
           <Search className="search" allowClear {...searchProps} />
           <Dropdown
             trigger="click"

diff --git a/frontend/src/pages/cases/components/CaseSettings.js b/frontend/src/pages/cases/components/CaseSettings.js
@@ -279,6 +279,7 @@ const CaseSettings = ({ open = false, handleCancel = () => {} }) => {
       onCancel={handleCancel}
       width="65%"
       className="case-settings-modal-container"
+      maskClosable={false}
     >
       {contextHolder}
       <Form

diff --git a/frontend/src/pages/cases/components/EnterIncomeDataForm.js b/frontend/src/pages/cases/components/EnterIncomeDataForm.js
@@ -248,6 +248,14 @@ const EnterIncomeDataDriver = ({
     }));
   };
 
+  const initialDriverValues = useMemo(() => {
+    if (!isEmpty(segment?.answers)) {
+      return segment.answers;
+    }
+    return {};
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const onValuesChange = (changedValue, allValues) => {
     // Extract the key and parse its components
     const key = Object.keys(changedValue)[0];
@@ -325,11 +333,12 @@ const EnterIncomeDataDriver = ({
 
   useEffect(() => {
     // recalculate totalValues onLoad initial data
-    if (!isEmpty(segment.answers)) {
+    if (!isEmpty(initialDriverValues)) {
       setTimeout(() => {
-        Object.keys(segment.answers).forEach((key) => {
-          const value = segment.answers[key];
-          onValuesChange({ [key]: value }, form.getFieldsValue());
+        Object.keys(initialDriverValues).forEach((key) => {
+          const value = initialDriverValues[key];
+          // TODO :: Fix this onLoad function, this make the initial value rerender into 0 onLoad
+          // onValuesChange({ [key]: value }, form.getFieldsValue());
         });
       }, 500);
     }
@@ -375,7 +384,7 @@ const EnterIncomeDataDriver = ({
           layout="vertical"
           form={form}
           onValuesChange={onValuesChange}
-          initialValues={segment?.answers ? segment.answers : {}}
+          initialValues={initialDriverValues}
         >
           {group?.questions
             ? orderBy(group.questions, ["id"]).map((question) => (

diff --git a/frontend/src/pages/cases/steps/SetIncomeTarget.js b/frontend/src/pages/cases/steps/SetIncomeTarget.js
@@ -61,15 +61,18 @@ const SetIncomeTarget = ({ segment, setbackfunction, setnextfunction }) => {
     const values = {};
     Object.keys(segment).map((key) => {
       const value = segment[key];
-      if (key === "region" && value) {
+      if (key === "region" && value && segment.target !== null) {
         values[`${segment.id}-set_target_yourself`] = 0; // set income value by benchmark
       }
+      if (key === "region" && !value && segment.target !== null) {
+        values[`${segment.id}-set_target_yourself`] = 1; // set income value by manual
+      }
       if (["target", "region", "adult", "child"].includes(key)) {
         values[`${segment.id}-${key}`] = value;
       }
     });
     return values;
-  }, [segment]);
+  }, []);
 
   const updateCurrentSegmentState = useCallback(
     (updatedSegmentValue) => {
@@ -216,19 +219,19 @@ const SetIncomeTarget = ({ segment, setbackfunction, setnextfunction }) => {
   };
 
   const handleChangeManualTarget = (value) => {
-    form.setFieldsValue({
-      [`${segment.id}-region`]: null,
-      [`${segment.id}-adult`]: null,
-      [`${segment.id}-child`]: null,
-      [`${segment.id}-target`]: value,
-    });
     updateCurrentSegmentState({
       region: null,
       benchmark: null,
       adult: null,
       child: null,
       target: value,
     });
+    form.setFieldsValue({
+      [`${segment.id}-region`]: null,
+      [`${segment.id}-adult`]: null,
+      [`${segment.id}-child`]: null,
+      [`${segment.id}-target`]: value,
+    });
   };
 
   const handleChangeAdultChildField = (key, value) => {