Refactor/household data

src/App.tsx

@@ -8,26 +8,26 @@ import QuestionComponentContainer from './Components/QuestionComponentContainer/
 import Confirmation from './Components/Confirmation/Confirmation';
 import Results from './Components/Results/Results';
 import Disclaimer from './Components/Steps/Disclaimer/Disclaimer.tsx';
-import HouseholdDataBlock from './Components/HouseholdDataBlock/HouseholdDataBlock.js';
 import ProgressBar from './Components/ProgressBar/ProgressBar';
 import JeffcoLandingPage from './Components/JeffcoComponents/JeffcoLandingPage/JeffcoLandingPage';
-import SelectLanguagePage from './Components/Steps/SelectLanguagePage.tsx';
+import SelectLanguagePage from './Components/Steps/SelectLanguage.tsx';
 import { updateScreen, updateUser } from './Assets/updateScreen.ts';
 import { STARTING_QUESTION_NUMBER, useStepNumber, useStepDirectory } from './Assets/stepDirectory';
 import Box from '@mui/material/Box';
-import { Expense, HealthInsurance, HouseholdData, IncomeStream, SignUpInfo } from './Types/FormData.js';
+import { Expense, HealthInsurance, SignUpInfo } from './Types/FormData.js';
 import { BrandedFooter, BrandedHeader } from './Components/Referrer/Referrer.tsx';
 import { useErrorController } from './Assets/validationFunctions.tsx';
 import dataLayerPush from './Assets/analytics.ts';
 import { OTHER_PAGE_TITLES } from './Assets/pageTitleTags.ts';
 import { isCustomTypedLocationState } from './Types/FormData.ts';
 LicenseInfo.setLicenseKey(process.env.REACT_APP_MUI_LICENSE_KEY + '=');
-import './App.css';
 import CcigLandingPage from './Components/CcigComponents/CcigLandingPage';
 import languageRouteWrapper from './Components/RouterUtil/LanguageRouter';
 import SelectStatePage from './Components/Steps/SelectStatePage';
 import RedirectToWhiteLabel from './Components/RouterUtil/RedirectToWhiteLabel';
 import CurrentBenefits from './Components/CurrentBenefits/CurrentBenefits';
+import HouseholdMemberForm from './Components/Steps/HouseholdMembers/HouseholdMemberForm.tsx';
+import './App.css';
 
 const App = () => {
   const navigate = useNavigate();
@@ -42,6 +42,7 @@ const App = () => {
     setTheme: changeTheme,
     pageIsLoading,
     getReferrer,
+    configLoading,
   } = useContext(Context);
 
   const stepDirectory = useStepDirectory();
@@ -161,12 +162,6 @@ const App = () => {
     }
   };
 
-  const handleRadioButtonChange = (event: Event) => {
-    const { name, value } = event.target as HTMLInputElement;
-    let boolValue = value === 'true';
-    setFormData({ ...formData, [name]: boolValue });
-  };
-
   const handleNoAnswerChange = (event: Event) => {
     const { name, value } = event.target as HTMLInputElement;
     setFormData({ ...formData, [name]: value });
@@ -218,33 +213,6 @@ const App = () => {
     }
   };
 
-  const handleIncomeStreamsSubmit = (validatedIncomeStreams: IncomeStream[], stepId: number, uuid: string) => {
-    const updatedFormData = { ...formData, incomeStreams: validatedIncomeStreams };
-    updateScreen(uuid, updatedFormData, locale);
-    setFormData(updatedFormData);
-    navigate(`/${formData.whiteLabel}/${uuid}/step-${stepId + 1}`);
-  };
-
-  const handleExpenseSourcesSubmit = (validatedExpenseSources: Expense[], stepId: number, uuid: string) => {
-    const isComingFromConfirmationPg = isCustomTypedLocationState(location.state)
-      ? location.state.routedFromConfirmationPg
-      : false;
-    const updatedFormData = { ...formData, expenses: validatedExpenseSources };
-    updateScreen(uuid, updatedFormData, locale);
-    setFormData(updatedFormData);
-    isComingFromConfirmationPg
-      ? navigate(`/${formData.whiteLabel}/${uuid}/confirm-information`)
-      : navigate(`/${formData.whiteLabel}/${uuid}/step-${stepId + 1}`);
-  };
-
-  const handleHouseholdDataSubmit = (memberData: HouseholdData, stepId: number, uuid: string) => {
-    const updatedMembers = [...formData.householdData];
-    updatedMembers[stepId] = memberData;
-    const updatedFormData = { ...formData, householdData: updatedMembers };
-    updateScreen(uuid, updatedFormData, locale);
-    setFormData(updatedFormData);
-  };
-
   if (pageIsLoading) {
     return (
       <ThemeProvider theme={theme}>
@@ -316,12 +284,7 @@ const App = () => {
                   <Route path="step-2" element={<Disclaimer />} />
                   <Route
                     path={`step-${householdMemberStepNumber}/:page`}
-                    element={
-                      <HouseholdDataBlock
-                        key={window.location.href}
-                        handleHouseholdDataSubmit={handleHouseholdDataSubmit}
-                      />
-                    }
+                    element={<HouseholdMemberForm key={window.location.href} />}
                   />
                   <Route
                     path="step-:id"
@@ -330,10 +293,7 @@ const App = () => {
                         key={window.location.href}
                         handleTextfieldChange={handleTextfieldChange}
                         handleContinueSubmit={handleContinueSubmit}
-                        handleRadioButtonChange={handleRadioButtonChange}
                         handleNoAnswerChange={handleNoAnswerChange}
-                        handleIncomeStreamsSubmit={handleIncomeStreamsSubmit}
-                        handleExpenseSourcesSubmit={handleExpenseSourcesSubmit}
                         handleCheckboxChange={handleCheckboxChange}
                       />
                     }

src/Assets/questions.tsx

@@ -1,71 +1,13 @@
 import {
-  radiofieldHasError,
   householdAssetsHasError,
-  benefitsHasError,
-  selectHasError,
-  displayReferralSourceHelperText,
   signUpOptionsHaveError,
-  acuteHHConditionsHasError,
-  displayBenefitsHelperText,
   displayHouseholdAssetsHelperText,
-  otherReferalSourceHelperText,
 } from './validationFunctions.tsx';
 import { FormattedMessage } from 'react-intl';
 import type { QuestionName, Question } from '../Types/Questions.ts';
 import HelpButton from '../Components/HelpBubbleIcon/HelpButton.tsx';
 
 const questions: Record<QuestionName, Question> = {
-  householdData: {
-    name: 'householdData',
-    componentDetails: {
-      componentType: 'HouseholdDataBlock',
-      ariaLabel: 'questions.householdData-ariaLabel',
-      inputName: 'householdData',
-    },
-  },
-  hasExpenses: {
-    name: 'hasExpenses',
-    header: <FormattedMessage id="qcc.about_household" defaultMessage="Tell us about your household" />,
-    question: (
-      <>
-        <div style={{ marginBottom: '-16px' }}>
-          <FormattedMessage id="questions.hasExpenses" defaultMessage="Does your household have any expenses?" />
-          <HelpButton
-            helpText="Add up expenses for everyone who lives in your home. This includes costs like child care, child support, rent, medical expenses, heating bills, and more. We will ask only about expenses that may affect benefits. We will not ask about expenses such as food since grocery bills do not affect benefits."
-            helpId="questions.hasExpenses-description"
-          />
-        </div>
-      </>
-    ),
-    questionDescription: (
-      <FormattedMessage
-        id="questions.hasExpenses-description-additional"
-        defaultMessage="Expenses can affect benefits! We can be more accurate if you tell us key expenses like your rent or mortgage, utilities, and child care."
-      />
-    ),
-    componentDetails: {
-      componentType: 'Radiofield',
-      ariaLabel: 'questions.hasExpenses-ariaLabel',
-      inputName: 'hasExpenses',
-      inputError: radiofieldHasError,
-    },
-    followUpQuestions: [
-      {
-        question: (
-          <FormattedMessage
-            id="questions.hasExpenses-a"
-            defaultMessage="What type of expense has your household had most recently?"
-          />
-        ),
-        name: 'expenses',
-        componentDetails: {
-          componentType: 'ExpenseBlock',
-          ariaLabel: 'questions.hasExpenses-a-ariaLabel',
-          inputName: 'expenses',
-        },
-      },
-    ],
-  },
   householdAssets: {
     name: 'householdAssets',
     header: <FormattedMessage id="qcc.about_household" defaultMessage="Tell us about your household" />,
@@ -93,26 +35,6 @@ const questions: Record<QuestionName, Question> = {
       required: true,
     },
   },
-  acuteHHConditions: {
-    name: 'acuteHHConditions',
-    header: (
-      <FormattedMessage
-        id="qcc.tell-us-final-text"
-        defaultMessage="Tell us some final information about your household."
-      />
-    ),
-    question: (
-      <FormattedMessage
-        id="questions.acuteHHConditions"
-        defaultMessage="Is anyone in your household in immediate need of help with any of the following?"
-      />
-    ),
-    componentDetails: {
-      componentType: 'OptionCardGroup',
-      inputName: 'acuteHHConditions',
-      inputError: acuteHHConditionsHasError,
-    },
-  },
   signUpInfo: {
     name: 'signUpInfo',
     header: (