feat: mp-2855-goal copy updates

src/components/GoalSetting/GoalSettingContainer.vue

@@ -83,6 +83,7 @@
 					:goal-progress="goalProgress"
 					:is-goal-completed="isGoalCompleted"
 					show-goal-value-props-copy
+					use-direct-question-title
 					@set-goal-target="setTarget($event)"
 					@set-goal="setGoal($event)"
 					@update-goal="updateGoal($event)"

src/components/MyKiva/FeaturedGoalCard.vue

@@ -28,8 +28,10 @@
 			>
 				<div class="tw-flex tw-flex-col md:tw-w-full">
 					<h3 class="tw-text-title tw-pb-1" v-html="noGoalTitle"></h3>
-					<p class="tw-text-small md:tw-text-base tw-pb-3 md:tw-pb-2">
-						{{ goalCopy.TITLE_HOW_MANY_LOANS_GENERIC }}
+					<p
+						class="tw-text-small md:tw-text-base tw-pb-3 md:tw-pb-2"
+						v-html="noGoalSubtitle"
+					>
 					</p>
 					<KvButton
 						class="featured-goal-card__cta featured-goal-card__cta--set-goal tw-w-full"
@@ -197,6 +199,10 @@ const props = defineProps({
 		type: String,
 		default: '',
 	},
+	prevYearLoans: {
+		type: Number,
+		default: 0,
+	},
 	suppressCompletionConfetti: {
 		type: Boolean,
 		default: false,
@@ -213,7 +219,8 @@ const resolvedState = computed(() => (
 	VALID_STATES.includes(props.state) ? props.state : STATE_NO_GOAL
 ));
 
-const noGoalTitle = computed(() => goalCopy.titleNoGoalYetWomensDefault());
+const noGoalTitle = computed(() => goalCopy.titleGoalSignupWomensLastYear(props.prevYearLoans));
+const noGoalSubtitle = goalCopy.subtitleNoGoalYetEntrypoint();
 
 const visibleProgress = computed(() => Math.min(props.goalProgress, props.goalTarget));
 

src/components/MyKiva/GoalSetting/GoalSelector.vue

@@ -1,5 +1,8 @@
 <template>
-	<div class="tw-flex tw-flex-col tw-justify-center tw-gap-0 lg:tw-gap-1.5 tw-items-center">
+	<div
+		class="tw-flex tw-flex-col tw-justify-center tw-gap-0 lg:tw-gap-1.5 tw-items-center"
+		:class="{ 'goal-selector--compact': compactLayout }"
+	>
 		<!-- Goal Progress Ring (shown after goal is set) -->
 		<GoalProgressRing
 			v-if="isGoalSet && !editGoalFromSettings"
@@ -21,7 +24,7 @@
 			<img
 				v-if="!isGoalTileExperimentEnabled"
 				:src="HandsPlant"
-				class="lg:tw-mb-1 tw-w-10 lg:tw-w-12.5"
+				class="goal-selector__image lg:tw-mb-1 tw-w-10 lg:tw-w-12.5"
 			>
 			<KvLoadingPlaceholder
 				v-if="isLoadingData"
@@ -33,11 +36,10 @@
 				<img
 					v-if="isGoalTileExperimentEnabled && !isGoalSet && !isLarge"
 					:src="HandsPlant"
-					class="lg:tw-mb-1 tw-w-10 lg:tw-w-12.5 tw-mx-auto"
+					class="goal-selector__image lg:tw-mb-1 tw-w-10 lg:tw-w-12.5 tw-mx-auto"
 				>
 				<h2
-					class="tw-text-headline tw-px-4 lg:tw-px-7 tw-text-center"
-					style="line-height: 125%;"
+					class="goal-selector__title tw-text-headline tw-px-4 lg:tw-px-7 tw-text-center"
 					v-html="titleText"
 				>
 				</h2>
@@ -50,20 +52,31 @@
 
 			<p
 				v-if="showLoanQuestionPrompt"
-				class="tw-text-base lg:tw-text-subhead tw-my-1.5 lg:tw-mb-1 lg:tw-mt-2 tw-text-center"
+				v-html="loanQuestionPrompt"
+				class="goal-selector__prompt tw-text-base lg:tw-text-subhead tw-my-1.5 lg:tw-mb-1 lg:tw-mt-2
+					tw-text-center"
 			>
-				How many loans will you make this year?
 			</p>
 
 			<p
 				v-if="showGoalValuePropsCopy"
 				v-html="subtitleText"
-				class="tw-text-base lg:tw-text-subhead tw-my-1.5 lg:tw-mb-1 lg:tw-mt-2 tw-text-center"
+				class="goal-selector__prompt tw-text-base lg:tw-text-subhead tw-my-1.5 lg:tw-mb-1 lg:tw-mt-2
+					tw-text-center"
+			>
+			</p>
+
+			<p
+				v-if="subtitleText && !showGoalValuePropsCopy && progressSubtitleBeforeOptions"
+				v-html="subtitleText"
+				class="goal-selector__prompt tw-text-base lg:tw-text-subhead tw-my-1.5 lg:tw-mb-1 lg:tw-mt-2
+					tw-text-center"
 			>
 			</p>
 
 			<div
-				class="tw-w-full tw-flex tw-flex-col lg:tw-flex-row tw-gap-1 lg:tw-gap-1.5 tw-my-1"
+				class="goal-selector__options tw-w-full tw-flex tw-flex-col lg:tw-flex-row tw-gap-1 lg:tw-gap-1.5
+					tw-my-1"
 			>
 				<template v-if="loadingCurrentYear || isLoadingData">
 					<KvLoadingPlaceholder
@@ -212,7 +225,7 @@
 			</template>
 
 			<p
-				v-if="subtitleText && !showGoalValuePropsCopy"
+				v-if="subtitleText && !showGoalValuePropsCopy && !progressSubtitleBeforeOptions"
 				v-html="subtitleText"
 				class="tw-my-1.5 lg:tw-mb-1 lg:tw-mt-2 tw-text-center"
 			>
@@ -257,8 +270,8 @@ import {
 	KvButton, KvMaterialIcon, KvLoadingPlaceholder, KvAccordionItem
 } from '@kiva/kv-components';
 
-import { ID_WOMENS_EQUALITY, ID_SUPPORT_ALL, ID_US_ECONOMIC_EQUALITY } from '#src/composables/useBadgeData';
-import HandsPlant from '#src/assets/images/thanks-page/hands-plant.gif';
+import { ID_WOMENS_EQUALITY, ID_SUPPORT_ALL } from '#src/composables/useBadgeData';
+import HandsPlant from '#src/assets/images/thanks-page/hands-plant-v3.png';
 import LoanNumberSelector from '#src/components/MyKiva/GoalSetting/LoanNumberSelector';
 import GoalProgressRing from '#src/components/MyKiva/GoalProgressRing';
 import GoalCustomAmountInput from '#src/components/MyKiva/GoalSetting/GoalCustomAmountInput';
@@ -385,6 +398,34 @@ const props = defineProps({
 		type: Boolean,
 		default: false,
 	},
+	/**
+	 * Whether the selector should use the direct loan question instead of entrypoint-style headline copy.
+	 */
+	useDirectQuestionTitle: {
+		type: Boolean,
+		default: false,
+	},
+	/**
+	 * Whether the no-goal-yet intro line should render smaller than the main title.
+	 */
+	compactNoGoalYetTitle: {
+		type: Boolean,
+		default: false,
+	},
+	/**
+	 * Whether to use the tighter thank-you page goal selector spacing.
+	 */
+	compactLayout: {
+		type: Boolean,
+		default: false,
+	},
+	/**
+	 * Whether the current-year progress subtitle should render before the loan options.
+	 */
+	progressSubtitleBeforeOptions: {
+		type: Boolean,
+		default: false,
+	},
 });
 
 const emit = defineEmits([
@@ -441,11 +482,19 @@ const loansLastYear = computed(() => {
 });
 
 const showLoanQuestionPrompt = computed(() => {
+	if (props.useDirectQuestionTitle) return false;
 	return goalSignupCopyVariant === GOAL_SIGNUP_COPY_NO_GOAL_YET
 		|| (!props.showGoalValuePropsCopy
 			&& (loansLastYear.value > 0 || props.selectedCategoryId === ID_WOMENS_EQUALITY));
 });
 
+const loanQuestionPrompt = computed(() => {
+	if (goalSignupCopyVariant === GOAL_SIGNUP_COPY_NO_GOAL_YET && !props.useDirectQuestionTitle) {
+		return goalCopy.titleLoanQuestionForCategory(props.selectedCategoryId, props.selectedCategoryName);
+	}
+	return goalCopy.TITLE_HOW_MANY_LOANS_GENERIC;
+});
+
 // Use progressForCurrentYear from tieredAchievements if available (set on Thanks page),
 // otherwise use fetched current year data (for MyKiva goal-setting page and modal)
 const loansThisYear = computed(() => {
@@ -485,8 +534,14 @@ const loadLoansThisYear = async () => {
 };
 
 const titleText = computed(() => {
+	if (props.useDirectQuestionTitle) {
+		return goalCopy.titleLoanQuestionForCategory(props.selectedCategoryId, props.selectedCategoryName, {
+			splitQuestion: true,
+		});
+	}
+
 	if (goalSignupCopyVariant === GOAL_SIGNUP_COPY_NO_GOAL_YET) {
-		return goalCopy.CARD_NO_GOAL_YET_EXPERIMENT;
+		return goalCopy.titleNoGoalYetSelectorEntrypoint({ compactIntro: props.compactNoGoalYetTitle });
 	}
 
 	// Default title if no lending history and category is ID_WOMENS_EQUALITY
@@ -503,14 +558,7 @@ const titleText = computed(() => {
 		return goalCopy.titleLastYearForCategory(loansLastYear.value, props.selectedCategoryId, props.selectedCategoryName);
 	}
 
-	// Support All is not a specific category, so use generic language
-	if (props.selectedCategoryId === ID_SUPPORT_ALL) {
-		return goalCopy.TITLE_HOW_MANY_LOANS_GENERIC;
-	}
-	if (props.selectedCategoryId === ID_US_ECONOMIC_EQUALITY) {
-		return goalCopy.TITLE_US_ENTREPRENEURS_HOW_MANY_LOANS;
-	}
-	return goalCopy.titleCategoryHowManyLoans(props.selectedCategoryName?.toLowerCase());
+	return goalCopy.titleLoanQuestionForCategory(props.selectedCategoryId, props.selectedCategoryName);
 });
 
 const subtitleText = computed(() => {
@@ -778,6 +826,50 @@ watch(() => props.selectedCategoryId, async newCategory => {
 </script>
 
 <style lang="postcss" scoped>
+.goal-selector__title {
+	line-height: 1.25;
+
+	@screen lg {
+		font-size: 2rem;
+		line-height: 1.2;
+	}
+}
+
+.goal-selector--compact {
+	@apply lg:tw-gap-0.5;
+}
+
+.goal-selector--compact .goal-selector__image {
+	width: 4.5rem;
+}
+
+.goal-selector--compact .goal-selector__title {
+	/* Same values as the @screen lg rule above, applied at all breakpoints in compact mode */
+	font-size: 2rem;
+	line-height: 1.2;
+}
+
+.goal-selector--compact .goal-selector__prompt {
+	@apply tw-my-1;
+
+	font-size: 0.875rem;
+	line-height: 1.25;
+}
+
+.goal-selector--compact .goal-selector__options {
+	@apply tw-my-1.5 lg:tw-gap-1;
+}
+
+.goal-selector--compact .buttons {
+	@apply tw-gap-1;
+
+	max-width: 19rem;
+}
+
+.goal-selector--compact .buttons :deep(button:first-child) {
+	@apply tw-mt-1;
+}
+
 .edit-goal-button :deep(span) {
 	@apply tw-flex;
 }

src/components/MyKiva/GoalSetting/LoanNumberSelector.vue

@@ -19,7 +19,7 @@
 						tw-text-eco-green-3 lg:!tw-flex-row lg:!tw-items-baseline lg:tw-gap-0.5"
 		>
 			<span
-				class="tw-text-display tw-text-center !tw-text-headline"
+				class="loan-number-selector__number tw-text-display tw-text-center !tw-text-headline"
 				style="line-height: 1;"
 			>
 				{{ loansNumber }}
@@ -33,7 +33,7 @@
 			>
 				{{ highlightedText }}
 			</div>
-			<div class="tw-text-primary !tw-font-medium tw-text-label tw-text-center">
+			<div class="tw-text-primary !tw-font-medium tw-text-label tw-text-center lg:tw-whitespace-nowrap">
 				{{ optionText }}
 			</div>
 		</div>

src/components/MyKiva/GoalSettingModal.vue

@@ -5,6 +5,7 @@
 			'goal-tile-modal': showGoalTile && !showRecommendLoanArea,
 			'goal-tile-modal-expanded': showGoalTile && showCategories && !showRecommendLoanArea,
 			'goal-tile-modal-recommend-loan': showRecommendLoanArea,
+			'goal-selector-modal-compact': showGoalSelector && !showGoalTile && !showRecommendLoanArea && !isThanksPage,
 		}"
 		title=""
 		:visible="show"
@@ -204,6 +205,9 @@
 					:is-loading-data="isLoadingData || isLoadingRecommendedLoan"
 					:is-goal-tile-experiment-enabled="isGoalTileExperimentEnabled"
 					:show-goal-value-props-copy="showGoalValuePropsCopy && !isGoalTileExperimentEnabled"
+					:compact-layout="isStandardSelectorLayout"
+					:progress-subtitle-before-options="isStandardSelectorLayout"
+					use-direct-question-title
 					@set-goal-target="setGoalTarget"
 					@set-goal="onGoalSelectorSetGoal"
 					@update-goal="onGoalSelectorUpdateGoal"
@@ -305,7 +309,7 @@ import GoalSelector from '#src/components/MyKiva/GoalSetting/GoalSelector';
 import RecommendLoanForGoalContent from '#src/components/LoanCards/RecommendLoanForGoal/RecommendLoanForGoalContent';
 import RecommendLoanForGoalFooter from '#src/components/LoanCards/RecommendLoanForGoal/RecommendLoanForGoalFooter';
 import RecommendLoanForGoalHeader from '#src/components/LoanCards/RecommendLoanForGoal/RecommendLoanForGoalHeader';
-import HandsPlant from '#src/assets/images/thanks-page/hands-plant.gif';
+import HandsPlant from '#src/assets/images/thanks-page/hands-plant-v3.png';
 import { mdiCheckBold, mdiCheckCircle, mdiClose } from '@mdi/js';
 
 const CategoryForm = defineAsyncComponent(() => import('#src/components/MyKiva/GoalSetting/CategoryForm'));
@@ -528,6 +532,10 @@ const showGoalTile = computed(() => {
 	return props.isGoalTileExperimentEnabled && isLarge.value;
 });
 
+const isStandardSelectorLayout = computed(
+	() => !showGoalTile.value && !showRecommendLoanArea.value && !props.isThanksPage
+);
+
 const recommendLoanForGoalContentRef = ref(null);
 
 const addToBasket = () => {
@@ -689,6 +697,62 @@ watch(show, async newVal => {
 	@apply tw-text-headline;
 }
 
+.goal-selector-modal-compact :deep {
+	[data-test=kv-lightbox],
+	[data-testid=kv-lightbox] {
+		@screen lg {
+			width: 44rem !important;
+			max-width: 44rem !important;
+		}
+	}
+
+	#kvLightboxBody {
+		@apply lg:!tw-px-4 lg:!tw-pt-0 lg:!tw-pb-2;
+
+		overflow: visible !important;
+	}
+
+	.goal-selector-container {
+		@apply lg:tw-mx-auto;
+
+		max-width: 40rem !important;
+
+		@screen lg {
+			transform: translateY(-1.75rem);
+		}
+	}
+
+	/* compact-layout prop handles image width; only modal-specific margins remain */
+	.goal-selector__image {
+		@screen lg {
+			margin-top: 0;
+			margin-bottom: 0.25rem;
+		}
+	}
+
+	.goal-selector__options > div {
+		@apply lg:tw-min-h-8;
+
+		@screen lg {
+			padding-right: 1rem;
+			padding-left: 1rem;
+		}
+	}
+
+	.goal-selector__options :deep(.loan-number-selector__number) {
+		@screen lg {
+			font-size: 2.375rem;
+		}
+	}
+
+	/* compact-layout handles gap and mt; only modal-specific sizing remains */
+	.buttons {
+		@apply lg:tw-mx-auto;
+
+		max-width: 31rem;
+	}
+}
+
 /* Style for components when Goal Tile experiment is enabled */
 :deep(.goal-modal-controls) {
 	@apply tw-mx-auto tw-my-0;