From c98f5b9db1ce20ca7c972ee095f753d19a0f36bd Mon Sep 17 00:00:00 2001
From: Maximiliano forlenza <forlenzamaximiliano@gmail.com>
Date: Thu, 28 Sep 2023 10:19:44 -0300
Subject: [PATCH] fix(useSubQuestions): clean sub questions

---
 package.json                                |  2 +-
 src/components/SubQuestions/SubQuestions.js | 16 +++++++------
 src/hooks/__tests__/useSubQuestions.test.js |  6 +++++
 src/hooks/useSubQuestions.js                | 26 +++++++++++++++++----
 4 files changed, 38 insertions(+), 12 deletions(-)

diff --git a/package.json b/package.json
index 2f944ba..17b145a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@indec/form-builder",
-  "version": "2.4.6",
+  "version": "2.4.7",
   "description": "Form builder",
   "main": "index.js",
   "private": false,
diff --git a/src/components/SubQuestions/SubQuestions.js b/src/components/SubQuestions/SubQuestions.js
index bdb9200..4534fa7 100644
--- a/src/components/SubQuestions/SubQuestions.js
+++ b/src/components/SubQuestions/SubQuestions.js
@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import {Field} from 'formik';
 import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
 
 import useSubQuestions from '@/hooks/useSubQuestions';
 import subQuestionPropTypes from '@/utils/propTypes/subQuestion';
@@ -10,11 +11,13 @@ import getQuestionProps from '@/utils/getQuestionProps';
 
 function SubQuestions({values, subQuestions, name, ...props}) {
   const parentName = name.split('.')[2];
-  const {selectedQuestions} = useSubQuestions({subQuestions, value: {[parentName]: values}, name: parentName});
-  return (
-    <>
+  const {selectedQuestions} = useSubQuestions({
+    subQuestions, value: {[parentName]: values}, name: parentName, specificationsPathName: name
+  });
+  return selectedQuestions.length > 0 ? (
+    <Stack spacing={2} sx={{width: '100%'}}>
       {selectedQuestions.map(subQuestion => (
-        <Box key={subQuestion.id} mb={2}>
+        <Box key={subQuestion.id}>
           <Field
             {...getQuestionProps({question: subQuestion, name, values}).props}
             {...props}
@@ -22,12 +25,11 @@ function SubQuestions({values, subQuestions, name, ...props}) {
             name={`${name}.${subQuestion.name}.answer.value`}
             label={{text: subQuestion.label}}
             placeholder={subQuestion.placeholder}
-            sx={{minWidth: '300px'}}
           />
         </Box>
       ))}
-    </>
-  );
+    </Stack>
+  ) : null;
 }
 
 SubQuestions.propTypes = {
diff --git a/src/hooks/__tests__/useSubQuestions.test.js b/src/hooks/__tests__/useSubQuestions.test.js
index b82f7c4..d68c5d3 100644
--- a/src/hooks/__tests__/useSubQuestions.test.js
+++ b/src/hooks/__tests__/useSubQuestions.test.js
@@ -2,6 +2,12 @@ import {renderHook} from '@testing-library/react';
 
 import useSubQuestions from '../useSubQuestions';
 
+jest.mock('formik', () => ({
+  useFormikContext: jest.fn().mockReturnValue({
+    setFieldValue: jest.fn()
+  })
+}));
+
 const subQuestions = [
   {
     id: 1,
diff --git a/src/hooks/useSubQuestions.js b/src/hooks/useSubQuestions.js
index e5a22bd..a42f856 100644
--- a/src/hooks/useSubQuestions.js
+++ b/src/hooks/useSubQuestions.js
@@ -1,19 +1,37 @@
 import {useEffect, useState} from 'react';
+import {useFormikContext} from 'formik';
 
+import {getSubQuestions} from '@/utils/buildQuestions';
 import getNavigation from '@/utils/getNavigation';
 
-const useSubQuestions = ({subQuestions, value, name}) => {
+const useSubQuestions = ({subQuestions, value, name, specificationsPathName}) => {
   const [selectedQuestions, setSelectedSubQuestions] = useState([]);
+  const {setFieldValue} = useFormikContext();
+
   useEffect(() => {
-    const subQuestionsFiltered = subQuestions.filter(
+    const allSubQuestions = subQuestions.map(
       subQuestion => {
         const condition = getNavigation({
           navigation: subQuestion.navigation, answers: value, questionType: subQuestion.type
         });
-        return !condition;
+        return {...subQuestion, show: !condition};
       }
     );
-    setSelectedSubQuestions(subQuestionsFiltered);
+    const hiddenSubQuestions = allSubQuestions.filter(subQuestion => !subQuestion.show);
+    const showSubQuestions = allSubQuestions.filter(subQuestion => subQuestion.show);
+    if (hiddenSubQuestions.length > 0) {
+      setFieldValue(
+        specificationsPathName,
+        {...value?.[name]?.answer?.specifications, ...getSubQuestions(hiddenSubQuestions)}
+      );
+    }
+    if (showSubQuestions.length > 0) {
+      showSubQuestions.forEach(subQuestion => {
+        // eslint-disable-next-line no-param-reassign
+        delete subQuestion.show;
+      });
+      setSelectedSubQuestions(showSubQuestions);
+    }
   }, [value?.[name]?.answer?.value]);
 
   return {selectedQuestions};