From 522fa7e15f48863f127c70bd039d0d2c5619069e Mon Sep 17 00:00:00 2001 From: Casey Dyer Date: Mon, 26 Jan 2026 12:15:31 -0800 Subject: [PATCH 1/3] fix: adjust copy for goals --- src/components/MyKiva/NextYearGoalCard.vue | 1 + .../Thanks/SingleVersion/GoalCompleted.vue | 15 ++++++++---- .../Thanks/SingleVersion/GoalInProgress.vue | 23 +++++++++++-------- .../Thanks/ThanksPageSingleVersion.vue | 3 --- src/composables/useGoalData.js | 14 +++++++---- .../specs/composables/useGoalData.spec.js | 10 ++++---- 6 files changed, 38 insertions(+), 28 deletions(-) diff --git a/src/components/MyKiva/NextYearGoalCard.vue b/src/components/MyKiva/NextYearGoalCard.vue index 8e33676f982..811cce81f12 100644 --- a/src/components/MyKiva/NextYearGoalCard.vue +++ b/src/components/MyKiva/NextYearGoalCard.vue @@ -179,6 +179,7 @@ const goalDescription = computed(() => { switch (props.userGoal?.category) { case ID_BASIC_NEEDS: case ID_CLIMATE_ACTION: + return `${goalLoans.value} ${categoryName.value} loans`; case ID_SUPPORT_ALL: return `${goalLoans.value} ${categoryName.value}`; default: diff --git a/src/components/Thanks/SingleVersion/GoalCompleted.vue b/src/components/Thanks/SingleVersion/GoalCompleted.vue index a3c9d0d47a8..a6496a4d7b9 100644 --- a/src/components/Thanks/SingleVersion/GoalCompleted.vue +++ b/src/components/Thanks/SingleVersion/GoalCompleted.vue @@ -47,18 +47,18 @@ import { import HighFive from '#src/assets/images/thanks-page/hi-five.svg'; import BadgeContainer from '#src/components/MyKiva/BadgeContainer'; import BgRays from '#src/components/Thanks/BgRays'; +import useGoalData from '#src/composables/useGoalData'; +import { ID_BASIC_NEEDS, ID_CLIMATE_ACTION } from '#src/composables/useBadgeData'; const $kvTrackEvent = inject('$kvTrackEvent'); +const { getGoalDisplayName } = useGoalData({}); + const props = defineProps({ currentGoal: { type: Object, default: null, }, - getGoalDisplayName: { - type: Function, - required: true, - }, loading: { type: Boolean, default: false, @@ -67,7 +67,12 @@ const props = defineProps({ const goalDisplayName = computed(() => { const category = props.currentGoal?.category || ''; - return category ? props.getGoalDisplayName(props.currentGoal?.target, category) : 'loans'; + if (!category) return 'loans'; + const name = getGoalDisplayName(props.currentGoal?.target, category); + if (category === ID_BASIC_NEEDS || category === ID_CLIMATE_ACTION) { + return `${name} loans`; + } + return name; }); const handleContinue = () => { diff --git a/src/components/Thanks/SingleVersion/GoalInProgress.vue b/src/components/Thanks/SingleVersion/GoalInProgress.vue index e4a359fb1d3..ffbab48d54c 100644 --- a/src/components/Thanks/SingleVersion/GoalInProgress.vue +++ b/src/components/Thanks/SingleVersion/GoalInProgress.vue @@ -31,10 +31,13 @@ import { } from '@kiva/kv-components'; import { mdiArrowRight } from '@mdi/js'; import HandsPlant from '#src/assets/images/thanks-page/hands-plant-v2.png'; -import { ID_SUPPORT_ALL } from '#src/composables/useBadgeData'; +import { ID_BASIC_NEEDS, ID_CLIMATE_ACTION, ID_SUPPORT_ALL } from '#src/composables/useBadgeData'; +import useGoalData from '#src/composables/useGoalData'; const $kvTrackEvent = inject('$kvTrackEvent'); +const { getGoalDisplayName } = useGoalData({}); + const props = defineProps({ loading: { type: Boolean, @@ -52,10 +55,6 @@ const props = defineProps({ type: Object, default: null, }, - getGoalDisplayName: { - type: Function, - required: true, - }, targetLoansAmount: { type: Number, default: 0, @@ -66,7 +65,7 @@ const loanImageUrl = computed(() => props.loan?.image?.url ?? ''); const goalDisplayName = computed(() => { const category = props.currentGoal?.category || ''; - return category ? props.getGoalDisplayName(props.targetLoansAmount, category) : ''; + return category ? getGoalDisplayName(props.targetLoansAmount, category) : ''; }); const moduleTitle = computed(() => { @@ -76,11 +75,15 @@ const moduleTitle = computed(() => { } if (props.targetLoansAmount > 0) { - if (props.currentGoal?.category === ID_SUPPORT_ALL) { - title += `You’re making progress towards your goal of making ${props.targetLoansAmount} loans this year`; + const category = props.currentGoal?.category; + const count = props.targetLoansAmount; + const name = goalDisplayName.value; + if (category === ID_SUPPORT_ALL) { + title += `You're making progress towards your goal of making ${count} loans this year`; + } else if (category === ID_BASIC_NEEDS || category === ID_CLIMATE_ACTION) { + title += `You're making progress towards your goal of making ${count} ${name} loans this year.`; } else { - // eslint-disable-next-line max-len - title += `You’re making progress towards your goal of making ${props.targetLoansAmount} loans to ${goalDisplayName.value} this year.`; + title += `You're making progress towards your goal of making ${count} loans to ${name} this year.`; } return title; } diff --git a/src/components/Thanks/ThanksPageSingleVersion.vue b/src/components/Thanks/ThanksPageSingleVersion.vue index e4a8ba2ed6e..dc0f89ed030 100644 --- a/src/components/Thanks/ThanksPageSingleVersion.vue +++ b/src/components/Thanks/ThanksPageSingleVersion.vue @@ -22,7 +22,6 @@ @@ -61,7 +60,6 @@ :is-opted-in="isOptedIn" :loan="loanForComment" :current-goal="userGoal" - :get-goal-display-name="getGoalDisplayName" :target-loans-amount="goalTargetLoansAmount" class="tw-mb-2.5" /> @@ -214,7 +212,6 @@ const currGoalProgress = ref(0); const { checkCompletedGoal, - getGoalDisplayName, getPostCheckoutProgressByLoans, loadGoalData, loading: goalDataLoading, diff --git a/src/composables/useGoalData.js b/src/composables/useGoalData.js index 478cbf1b87c..771fcd9f50d 100644 --- a/src/composables/useGoalData.js +++ b/src/composables/useGoalData.js @@ -28,8 +28,8 @@ import basicNeedsImg from '#src/assets/images/my-kiva/goal-setting/basic-needs.s import supportAllImg from '#src/assets/images/my-kiva/goal-setting/support-all.svg?url'; const GOAL_DISPLAY_MAP = { - [ID_BASIC_NEEDS]: 'basic needs loans', - [ID_CLIMATE_ACTION]: 'eco friendly loans', + [ID_BASIC_NEEDS]: 'basic needs', + [ID_CLIMATE_ACTION]: 'eco friendly', [ID_REFUGEE_EQUALITY]: 'refugees', [ID_SUPPORT_ALL]: 'borrowers', [ID_US_ECONOMIC_EQUALITY]: 'US entrepreneurs', @@ -37,8 +37,8 @@ const GOAL_DISPLAY_MAP = { }; const GOAL_1_DISPLAY_MAP = { - [ID_BASIC_NEEDS]: 'basic needs loan', - [ID_CLIMATE_ACTION]: 'eco friendly loan', + [ID_BASIC_NEEDS]: 'basic needs', + [ID_CLIMATE_ACTION]: 'eco friendly', [ID_REFUGEE_EQUALITY]: 'refugee', [ID_SUPPORT_ALL]: 'borrower', [ID_US_ECONOMIC_EQUALITY]: 'US entrepreneur', @@ -237,7 +237,11 @@ export default function useGoalData({ apollo } = {}) { function getCtaHref(selectedGoalNumber, categoryId, router, currentLoanCount = 0) { const { getLoanFindingUrl } = useBadgeData(); const remaining = Math.max(0, selectedGoalNumber - currentLoanCount); - const categoryHeader = getGoalDisplayName(remaining, categoryId); + const categoryName = getGoalDisplayName(remaining, categoryId); + // Add "loans" suffix for basic needs and climate action categories + const categoryHeader = (categoryId === ID_BASIC_NEEDS || categoryId === ID_CLIMATE_ACTION) + ? `${categoryName} loans` + : categoryName; const string = `Support ${remaining} more ${categoryHeader} to reach your goal`; const encodedHeader = encodeURIComponent(string); const loanFindingUrl = getLoanFindingUrl(categoryId, router.currentRoute.value); diff --git a/test/unit/specs/composables/useGoalData.spec.js b/test/unit/specs/composables/useGoalData.spec.js index b4fe9953364..0d871f57fab 100644 --- a/test/unit/specs/composables/useGoalData.spec.js +++ b/test/unit/specs/composables/useGoalData.spec.js @@ -111,8 +111,8 @@ describe('useGoalData', () => { describe('getGoalDisplayName', () => { it('should return plural display name for target > 1', () => { - expect(composable.getGoalDisplayName(5, ID_BASIC_NEEDS)).toBe('basic needs loans'); - expect(composable.getGoalDisplayName(10, ID_CLIMATE_ACTION)).toBe('eco friendly loans'); + expect(composable.getGoalDisplayName(5, ID_BASIC_NEEDS)).toBe('basic needs'); + expect(composable.getGoalDisplayName(10, ID_CLIMATE_ACTION)).toBe('eco friendly'); expect(composable.getGoalDisplayName(3, ID_REFUGEE_EQUALITY)).toBe('refugees'); expect(composable.getGoalDisplayName(2, ID_SUPPORT_ALL)).toBe('borrowers'); expect(composable.getGoalDisplayName(100, ID_US_ECONOMIC_EQUALITY)).toBe('US entrepreneurs'); @@ -120,8 +120,8 @@ describe('useGoalData', () => { }); it('should return singular display name for target = 1', () => { - expect(composable.getGoalDisplayName(1, ID_BASIC_NEEDS)).toBe('basic needs loan'); - expect(composable.getGoalDisplayName(1, ID_CLIMATE_ACTION)).toBe('eco friendly loan'); + expect(composable.getGoalDisplayName(1, ID_BASIC_NEEDS)).toBe('basic needs'); + expect(composable.getGoalDisplayName(1, ID_CLIMATE_ACTION)).toBe('eco friendly'); expect(composable.getGoalDisplayName(1, ID_REFUGEE_EQUALITY)).toBe('refugee'); expect(composable.getGoalDisplayName(1, ID_SUPPORT_ALL)).toBe('borrower'); expect(composable.getGoalDisplayName(1, ID_US_ECONOMIC_EQUALITY)).toBe('US entrepreneur'); @@ -137,7 +137,7 @@ describe('useGoalData', () => { }); it('should handle falsy target as plural', () => { - expect(composable.getGoalDisplayName(0, ID_BASIC_NEEDS)).toBe('basic needs loans'); + expect(composable.getGoalDisplayName(0, ID_BASIC_NEEDS)).toBe('basic needs'); expect(composable.getGoalDisplayName(null, ID_WOMENS_EQUALITY)).toBe('women'); }); }); From 25ff64b61f86f3655fd696d95a4a2ac2d4d52bdb Mon Sep 17 00:00:00 2001 From: Casey Dyer Date: Mon, 26 Jan 2026 12:35:57 -0800 Subject: [PATCH 2/3] fix: simplify solution --- src/components/MyKiva/NextYearGoalCard.vue | 21 +++++++------------ .../Thanks/SingleVersion/GoalCompleted.vue | 7 +------ .../Thanks/SingleVersion/GoalInProgress.vue | 8 +++---- src/composables/useGoalData.js | 14 +++++-------- .../specs/composables/useGoalData.spec.js | 10 ++++----- 5 files changed, 23 insertions(+), 37 deletions(-) diff --git a/src/components/MyKiva/NextYearGoalCard.vue b/src/components/MyKiva/NextYearGoalCard.vue index 811cce81f12..314282f8748 100644 --- a/src/components/MyKiva/NextYearGoalCard.vue +++ b/src/components/MyKiva/NextYearGoalCard.vue @@ -119,11 +119,7 @@ const $kvTrackEvent = inject('$kvTrackEvent'); const router = useRouter(); const goalData = inject('goalData'); -const { - ID_BASIC_NEEDS, - ID_CLIMATE_ACTION, - ID_SUPPORT_ALL -} = useBadgeData(); +const { ID_SUPPORT_ALL } = useBadgeData(); const { getCtaHref, getGoalDisplayName, @@ -176,15 +172,14 @@ const categoryName = computed(() => { }); const goalDescription = computed(() => { - switch (props.userGoal?.category) { - case ID_BASIC_NEEDS: - case ID_CLIMATE_ACTION: - return `${goalLoans.value} ${categoryName.value} loans`; - case ID_SUPPORT_ALL: - return `${goalLoans.value} ${categoryName.value}`; - default: - return `${goalLoans.value} loans to ${categoryName.value}`; + const name = categoryName.value; + if (props.userGoal?.category === ID_SUPPORT_ALL) { + return `${goalLoans.value} ${name}`; + } + if (name.endsWith('loans')) { + return `${goalLoans.value} ${name}`; } + return `${goalLoans.value} loans to ${name}`; }); const ctaHref = computed(() => { diff --git a/src/components/Thanks/SingleVersion/GoalCompleted.vue b/src/components/Thanks/SingleVersion/GoalCompleted.vue index a6496a4d7b9..01d71a8fb4c 100644 --- a/src/components/Thanks/SingleVersion/GoalCompleted.vue +++ b/src/components/Thanks/SingleVersion/GoalCompleted.vue @@ -48,7 +48,6 @@ import HighFive from '#src/assets/images/thanks-page/hi-five.svg'; import BadgeContainer from '#src/components/MyKiva/BadgeContainer'; import BgRays from '#src/components/Thanks/BgRays'; import useGoalData from '#src/composables/useGoalData'; -import { ID_BASIC_NEEDS, ID_CLIMATE_ACTION } from '#src/composables/useBadgeData'; const $kvTrackEvent = inject('$kvTrackEvent'); @@ -68,11 +67,7 @@ const props = defineProps({ const goalDisplayName = computed(() => { const category = props.currentGoal?.category || ''; if (!category) return 'loans'; - const name = getGoalDisplayName(props.currentGoal?.target, category); - if (category === ID_BASIC_NEEDS || category === ID_CLIMATE_ACTION) { - return `${name} loans`; - } - return name; + return getGoalDisplayName(props.currentGoal?.target, category); }); const handleContinue = () => { diff --git a/src/components/Thanks/SingleVersion/GoalInProgress.vue b/src/components/Thanks/SingleVersion/GoalInProgress.vue index ffbab48d54c..cc964c01702 100644 --- a/src/components/Thanks/SingleVersion/GoalInProgress.vue +++ b/src/components/Thanks/SingleVersion/GoalInProgress.vue @@ -31,7 +31,7 @@ import { } from '@kiva/kv-components'; import { mdiArrowRight } from '@mdi/js'; import HandsPlant from '#src/assets/images/thanks-page/hands-plant-v2.png'; -import { ID_BASIC_NEEDS, ID_CLIMATE_ACTION, ID_SUPPORT_ALL } from '#src/composables/useBadgeData'; +import { ID_SUPPORT_ALL } from '#src/composables/useBadgeData'; import useGoalData from '#src/composables/useGoalData'; const $kvTrackEvent = inject('$kvTrackEvent'); @@ -79,9 +79,9 @@ const moduleTitle = computed(() => { const count = props.targetLoansAmount; const name = goalDisplayName.value; if (category === ID_SUPPORT_ALL) { - title += `You're making progress towards your goal of making ${count} loans this year`; - } else if (category === ID_BASIC_NEEDS || category === ID_CLIMATE_ACTION) { - title += `You're making progress towards your goal of making ${count} ${name} loans this year.`; + title += `You're making progress towards your goal of making ${count} loans this year.`; + } else if (name.endsWith('loans')) { + title += `You're making progress towards your goal of making ${count} ${name} this year.`; } else { title += `You're making progress towards your goal of making ${count} loans to ${name} this year.`; } diff --git a/src/composables/useGoalData.js b/src/composables/useGoalData.js index 771fcd9f50d..4372500865b 100644 --- a/src/composables/useGoalData.js +++ b/src/composables/useGoalData.js @@ -28,8 +28,8 @@ import basicNeedsImg from '#src/assets/images/my-kiva/goal-setting/basic-needs.s import supportAllImg from '#src/assets/images/my-kiva/goal-setting/support-all.svg?url'; const GOAL_DISPLAY_MAP = { - [ID_BASIC_NEEDS]: 'basic needs', - [ID_CLIMATE_ACTION]: 'eco friendly', + [ID_BASIC_NEEDS]: 'basic needs loans', + [ID_CLIMATE_ACTION]: 'eco friendly loans', [ID_REFUGEE_EQUALITY]: 'refugees', [ID_SUPPORT_ALL]: 'borrowers', [ID_US_ECONOMIC_EQUALITY]: 'US entrepreneurs', @@ -37,8 +37,8 @@ const GOAL_DISPLAY_MAP = { }; const GOAL_1_DISPLAY_MAP = { - [ID_BASIC_NEEDS]: 'basic needs', - [ID_CLIMATE_ACTION]: 'eco friendly', + [ID_BASIC_NEEDS]: 'basic needs loan', + [ID_CLIMATE_ACTION]: 'eco friendly loan', [ID_REFUGEE_EQUALITY]: 'refugee', [ID_SUPPORT_ALL]: 'borrower', [ID_US_ECONOMIC_EQUALITY]: 'US entrepreneur', @@ -238,11 +238,7 @@ export default function useGoalData({ apollo } = {}) { const { getLoanFindingUrl } = useBadgeData(); const remaining = Math.max(0, selectedGoalNumber - currentLoanCount); const categoryName = getGoalDisplayName(remaining, categoryId); - // Add "loans" suffix for basic needs and climate action categories - const categoryHeader = (categoryId === ID_BASIC_NEEDS || categoryId === ID_CLIMATE_ACTION) - ? `${categoryName} loans` - : categoryName; - const string = `Support ${remaining} more ${categoryHeader} to reach your goal`; + const string = `Support ${remaining} more ${categoryName} to reach your goal`; const encodedHeader = encodeURIComponent(string); const loanFindingUrl = getLoanFindingUrl(categoryId, router.currentRoute.value); return `${loanFindingUrl}?header=${encodedHeader}`; diff --git a/test/unit/specs/composables/useGoalData.spec.js b/test/unit/specs/composables/useGoalData.spec.js index 0d871f57fab..b4fe9953364 100644 --- a/test/unit/specs/composables/useGoalData.spec.js +++ b/test/unit/specs/composables/useGoalData.spec.js @@ -111,8 +111,8 @@ describe('useGoalData', () => { describe('getGoalDisplayName', () => { it('should return plural display name for target > 1', () => { - expect(composable.getGoalDisplayName(5, ID_BASIC_NEEDS)).toBe('basic needs'); - expect(composable.getGoalDisplayName(10, ID_CLIMATE_ACTION)).toBe('eco friendly'); + expect(composable.getGoalDisplayName(5, ID_BASIC_NEEDS)).toBe('basic needs loans'); + expect(composable.getGoalDisplayName(10, ID_CLIMATE_ACTION)).toBe('eco friendly loans'); expect(composable.getGoalDisplayName(3, ID_REFUGEE_EQUALITY)).toBe('refugees'); expect(composable.getGoalDisplayName(2, ID_SUPPORT_ALL)).toBe('borrowers'); expect(composable.getGoalDisplayName(100, ID_US_ECONOMIC_EQUALITY)).toBe('US entrepreneurs'); @@ -120,8 +120,8 @@ describe('useGoalData', () => { }); it('should return singular display name for target = 1', () => { - expect(composable.getGoalDisplayName(1, ID_BASIC_NEEDS)).toBe('basic needs'); - expect(composable.getGoalDisplayName(1, ID_CLIMATE_ACTION)).toBe('eco friendly'); + expect(composable.getGoalDisplayName(1, ID_BASIC_NEEDS)).toBe('basic needs loan'); + expect(composable.getGoalDisplayName(1, ID_CLIMATE_ACTION)).toBe('eco friendly loan'); expect(composable.getGoalDisplayName(1, ID_REFUGEE_EQUALITY)).toBe('refugee'); expect(composable.getGoalDisplayName(1, ID_SUPPORT_ALL)).toBe('borrower'); expect(composable.getGoalDisplayName(1, ID_US_ECONOMIC_EQUALITY)).toBe('US entrepreneur'); @@ -137,7 +137,7 @@ describe('useGoalData', () => { }); it('should handle falsy target as plural', () => { - expect(composable.getGoalDisplayName(0, ID_BASIC_NEEDS)).toBe('basic needs'); + expect(composable.getGoalDisplayName(0, ID_BASIC_NEEDS)).toBe('basic needs loans'); expect(composable.getGoalDisplayName(null, ID_WOMENS_EQUALITY)).toBe('women'); }); }); From 063cea2b82b22c71c8ffe78ca097806e53ba2dca Mon Sep 17 00:00:00 2001 From: Casey Dyer Date: Mon, 26 Jan 2026 13:00:29 -0800 Subject: [PATCH 3/3] fix: minor cleanup --- src/components/MyKiva/NextYearGoalCard.vue | 5 +---- src/composables/useGoalData.js | 4 ++-- 2 files changed, 3 insertions(+), 6 deletions(-) diff --git a/src/components/MyKiva/NextYearGoalCard.vue b/src/components/MyKiva/NextYearGoalCard.vue index 314282f8748..ce57776b230 100644 --- a/src/components/MyKiva/NextYearGoalCard.vue +++ b/src/components/MyKiva/NextYearGoalCard.vue @@ -173,10 +173,7 @@ const categoryName = computed(() => { const goalDescription = computed(() => { const name = categoryName.value; - if (props.userGoal?.category === ID_SUPPORT_ALL) { - return `${goalLoans.value} ${name}`; - } - if (name.endsWith('loans')) { + if (props.userGoal?.category === ID_SUPPORT_ALL || name.endsWith('loans')) { return `${goalLoans.value} ${name}`; } return `${goalLoans.value} loans to ${name}`; diff --git a/src/composables/useGoalData.js b/src/composables/useGoalData.js index 4372500865b..478cbf1b87c 100644 --- a/src/composables/useGoalData.js +++ b/src/composables/useGoalData.js @@ -237,8 +237,8 @@ export default function useGoalData({ apollo } = {}) { function getCtaHref(selectedGoalNumber, categoryId, router, currentLoanCount = 0) { const { getLoanFindingUrl } = useBadgeData(); const remaining = Math.max(0, selectedGoalNumber - currentLoanCount); - const categoryName = getGoalDisplayName(remaining, categoryId); - const string = `Support ${remaining} more ${categoryName} to reach your goal`; + const categoryHeader = getGoalDisplayName(remaining, categoryId); + const string = `Support ${remaining} more ${categoryHeader} to reach your goal`; const encodedHeader = encodeURIComponent(string); const loanFindingUrl = getLoanFindingUrl(categoryId, router.currentRoute.value); return `${loanFindingUrl}?header=${encodedHeader}`;