feat: update title and subtitle on category change

src/components/MyKiva/GoalSetting/GoalSelector.vue

@@ -226,26 +226,27 @@ const titleText = computed(() => {
 	if (props.isGoalSet) {
 		return 'Success! Your goal is set!';
 	}
-	if (loansLastYear.value === 1) {
-		// eslint-disable-next-line max-len
-		return `Last year, you helped <span class="tw-text-eco-green-3">${loansLastYear.value} woman</span> shape her future!`;
-	}
-	if (loansLastYear.value > SAME_AS_LAST_YEAR_LIMIT) {
+	if (loansLastYear.value === 0 || loansLastYear.value > SAME_AS_LAST_YEAR_LIMIT) {
+		if (props.selectedCategoryId === ID_SUPPORT_ALL) {
+			return 'How many loans will you make this year?';
+		}
 		// eslint-disable-next-line max-len
-		return `Last year, you helped <span class="tw-text-eco-green-3">${loansLastYear.value} women</span> shape their futures!`;
+		return `How many loans to <span class="tw-text-eco-green-3">${props.selectedCategoryName?.toLowerCase()}</span> will you make this year?`;
 	}
 
 	return 'Lenders like you help <br><span class="tw-text-eco-green-3">3 women</span> a year';
 });
 
 const subtitleText = computed(() => {
-	let extraText = '';
+	if (props.isGoalSet) {
+		return '';
+	}
+
 	if (loansThisYear.value > 0) {
-		extraText = `You've already made ${loansThisYear.value}.`;
+		return `You've already made ${loansThisYear.value} that will count!.`;
 	}
-	return props.isGoalSet
-		? ''
-		: `How many loans will you make this year? ${extraText}`;
+
+	return '';
 });
 
 const buttonText = computed(() => {
@@ -347,7 +348,7 @@ const updateGoalOptions = () => {
 		goalOptions.value = [
 			{
 				loansNumber: suggestion1,
-				optionText: useYtdAsBase ? 'One more' : 'Same as last year',
+				optionText: useYtdAsBase ? 'One more' : `Same as ${LAST_YEAR_KEY}`,
 				selected: false
 			},
 			{

test/unit/specs/components/MyKiva/GoalSelector.spec.js

@@ -163,6 +163,63 @@ describe('GoalSelector', () => {
 		await expectCategoryOptions('category-support-all', getExpectedGoalOptions({ useDefault: true }));
 	});
 
+	it('renders the selected category name in the title when the user changes category', async () => {
+		const tieredAchievements = [
+			{
+				id: ID_WOMENS_EQUALITY,
+				progressForYear: 2,
+			},
+			{
+				id: ID_REFUGEE_EQUALITY,
+				progressForYear: 3,
+			},
+		];
+
+		const user = userEvent.setup();
+		const { getByRole, getByTestId } = render(TestWrapper, {
+			global: {
+				...globalOptions,
+				provide: {
+					...globalOptions.provide,
+					$kvTrackEvent: vi.fn(),
+				},
+			},
+			props: { tieredAchievements },
+		});
+
+		await flushPromises();
+
+		const getTitleText = () => getByRole('heading', { level: 2 }).innerHTML;
+
+		// Initial category is Women
+		expect(getTitleText()).toContain('women');
+
+		// Refugees
+		await user.click(getByTestId('category-refugees'));
+		await flushPromises();
+		expect(getTitleText()).toContain('refugees');
+
+		// Climate Action
+		await user.click(getByTestId('category-climate'));
+		await flushPromises();
+		expect(getTitleText()).toContain('climate action');
+
+		// U.S. Entrepreneurs
+		await user.click(getByTestId('category-us'));
+		await flushPromises();
+		expect(getTitleText()).toContain('u.s. entrepreneurs');
+
+		// Basic Needs
+		await user.click(getByTestId('category-basic-needs'));
+		await flushPromises();
+		expect(getTitleText()).toContain('basic needs');
+
+		// Choose as I go (support all)
+		await user.click(getByTestId('category-support-all'));
+		await flushPromises();
+		expect(getTitleText()).toBe('How many loans will you make this year?');
+	});
+
 	it('uses YTD loans as base when they exceed last year', async () => {
 		const tieredAchievements = [
 			{