Refactor/household data

[ivonne-hernandez]

What (if any) features are you implementing?

• Refactor the householdData components to use the new HouseholdMemberForm which utilizes react-hook-form to manage and validate state and zod for schema-based validation.

Were there any issues that arose?

• In regards to using the MultiSelectTiles component for the healthInsurance and conditions state I think that circumventing the defaultValues that we declare in each of these components is not a good practice. Once we find a solution for solving how these can be dynamically added to the defaultValues, as well our backend fields we can create a ticket to replace the current RHFOptionCards component with the MultiSelectTiles.

Is there anything that you need from your teammate?

• Please pull and test this branch to make sure that everything is working as intended.

[CalebPena]

Good job on this PR. There are a couple of bugs that need to be fixed, and a couple of features that need to be readded. Additionally, there are a couple of comments because this pr is out of date with the changes in #1388. Then there are a bunch of optional style/refactor suggestions (some of which existed in the old household member component). I tried to make as many of the changes suggestions as possible. Also, feel free to make an issue if any of the suggestions will take too long.

[CalebPena]

Can you make these components?

[ivonne-hernandez]

@sydney-devine Can you please create a ticket to have us create a HelperText component and refactor all of the helper text functions that we currently have so that it's consistent?

[sydney-devine]

@ivonne-hernandez will do

[ivonne-hernandez]

Thank you!

[CalebPena]

Suggested change

	{getIncomeStreamSourceLabel(incomeOptions, selectedIncomeStreamSource)}
	{getIncomeStreamSourceLabel(selectedIncomeStreamSource)}

[CalebPena]

What do you think about combining these into one function? Also, feel free to change the error message if you don't like it.

Suggested change

	const renderAdditionalIncomeBlockQ = (page: number) => {
	let formattedMsgId = 'incomeBlock.createIncomeBlockQuestions-questionLabel';
	let formattedMsgDefaultMsg = 'If you receive another type of income, select it below.';
	if (page !== 1) {
	formattedMsgId = 'personIncomeBlock.createIncomeBlockQuestions-questionLabel';
	formattedMsgDefaultMsg = 'If they receive another type of income, select it below.';
	}
	return (
	<div className="income-margin-bottom">
	<QuestionQuestion>
	<span className="income-stream-q-padding">
	<FormattedMessage id={formattedMsgId} defaultMessage={formattedMsgDefaultMsg} />
	</span>
	</QuestionQuestion>
	</div>
	);
	};
	const renderFirstIncomeBlockQ = (pageNumber: number) => {
	let formattedMsgId = 'questions.hasIncome-a';
	let formattedMsgDefaultMsg = 'What type of income have you had most recently?';
	if (pageNumber !== 1) {
	formattedMsgId = 'personIncomeBlock.return-questionLabel';
	formattedMsgDefaultMsg = 'What type of income have they had most recently?';
	}
	return (
	<div className="section">
	<QuestionQuestion>
	<FormattedMessage id={formattedMsgId} defaultMessage={formattedMsgDefaultMsg} />
	<HelpButton
	helpText="Answer the best you can. You will be able to include additional types of income. The more you include, the more accurate your results will be."
	helpId="personIncomeBlock.return-questionDescription"
	/>
	</QuestionQuestion>
	</div>
	);
	};
	const renderIncomeQuestion = (index: number) => {
	let question: FormattedMessageType;
	if (pageNumber === 1 && index === 0) {
	// 1st income on first person
	question = (
	<FormattedMessage id="questions.hasIncome-a" defaultMessage="What type of income have you had most recently?" />
	);
	} else if (pageNumber === 1 && index !== 0) {
	// Not 1st income on first person
	question = (
	<FormattedMessage
	id="incomeBlock.createIncomeBlockQuestions-questionLabel"
	defaultMessage="If you receive another type of income, select it below."
	/>
	);
	} else if (pageNumber !== 1 && index === 0) {
	// 1st income on not first person
	question = (
	<FormattedMessage
	id="personIncomeBlock.return-questionLabel"
	defaultMessage="What type of income have they had most recently?"
	/>
	);
	} else if (pageNumber !== 1 && index !== 0) {
	// Not 1st income on not first person
	question = (
	<FormattedMessage
	id="personIncomeBlock.createIncomeBlockQuestions-questionLabel"
	defaultMessage="If they receive another type of income, select it below."
	/>
	);
	} else {
	throw new Error(
	'this income is somehow not the first person, not not the first person, not the first income, and not not the first income. AKA, you did something silly.',
	);
	}
	return (
	<div className="income-margin-bottom">
	<QuestionQuestion>
	<span className="income-stream-q-padding">{question}</span>
	</QuestionQuestion>
	</div>
	);
	};

[CalebPena]

I am getting a type error here.

[CalebPena]

Can we us a div?

[CalebPena]

Removing all the params from the other param suggestions, and replacing the income question functions with the new function.

Suggested change

	{createAgeQuestion(pageNumber)}
	{pageNumber !== 1 && createHOfHRelationQuestion(relationshipOptions)}
	{displayHealthInsuranceBlock(pageNumber, healthInsuranceOptions)}
	{displayConditionsQuestion(pageNumber, conditionOptions)}
	<div>
	<Stack sx={{ margin: '3rem 0' }}>
	{createIncomeRadioQuestion(pageNumber)}
	{fields.map((field, index) => {
	const selectedIncomeStreamSource = watch('incomeStreams')[index].incomeStreamName;
	const selectedIncomeFrequency = watch('incomeStreams')[index].incomeFrequency;
	return (
	<div className="section-container income-block-container" key={field.id}>
	<div className={index % 2 === 0 ? 'section' : ''}>
	{index !== 0 && (
	<div className="delete-button-container">
	<CloseButton handleClose={() => remove(index)} />
	</div>
	)}
	<div>
	{index === 0 && renderFirstIncomeBlockQ(pageNumber)}
	{index !== 0 && renderAdditionalIncomeBlockQ(pageNumber)}
	{renderIncomeStreamNameSelect(index)}
	{renderIncomeFrequencySelect(incomeOptions, selectedIncomeStreamSource, index, pageNumber)}
	{selectedIncomeFrequency === 'hourly' &&
	renderHoursPerWeekTextfield(pageNumber, index, selectedIncomeStreamSource)}
	{renderIncomeAmountTextfield(
	pageNumber,
	index,
	selectedIncomeFrequency,
	selectedIncomeStreamSource,
	)}
	</div>
	</div>
	</div>
	);
	})}
	{createAgeQuestion()}
	{pageNumber !== 1 && createHOfHRelationQuestion()}
	{displayHealthInsuranceBlock()}
	{displayConditionsQuestion()}
	<div>
	<Stack sx={{ margin: '3rem 0' }}>
	{createIncomeRadioQuestion()}
	{fields.map((field, index) => {
	const selectedIncomeStreamSource = watch('incomeStreams')[index].incomeStreamName;
	const selectedIncomeFrequency = watch('incomeStreams')[index].incomeFrequency;
	return (
	<div className="section-container income-block-container" key={field.id}>
	<div className={index % 2 === 0 ? 'section' : ''}>
	{index !== 0 && (
	<div className="delete-button-container">
	<CloseButton handleClose={() => remove(index)} />
	</div>
	)}
	<div>
	{renderIncomeQuestion(index)}
	{renderIncomeStreamNameSelect(index)}
	{renderIncomeFrequencySelect(selectedIncomeStreamSource, index)}
	{selectedIncomeFrequency === 'hourly' &&
	renderHoursPerWeekTextfield(index)}
	{renderIncomeAmountTextfield(
	index,
	selectedIncomeFrequency,
	selectedIncomeStreamSource,
	)}
	</div>
	</div>
	</div>
	);
	})}