Skip to content

Commit 195ca3e

Browse files
roger-in-kivaroger-in-kiva
authored
feat: goal display name update (#6557)
1 parent 4c253e9 commit 195ca3e

File tree

5 files changed

+23
-46
lines changed

5 files changed

+23
-46
lines changed

‎src/components/MyKiva/GoalCard.vue‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ import {
8989
import { mdiCheckCircleOutline } from '@mdi/js';
9090
import { formatRichTextContent } from '#src/util/contentfulUtils';
9191
import GoalCardCareImg from '#src/assets/images/my-kiva/goal-card-care.svg';
92-
import useBadgeData, {
92+
import {
9393
ID_BASIC_NEEDS,
9494
ID_US_ECONOMIC_EQUALITY,
9595
ID_WOMENS_EQUALITY,
@@ -121,8 +121,7 @@ defineEmits(['open-goal-modal']);
121121
const $kvTrackEvent = inject('$kvTrackEvent');
122122
const router = useRouter();
123123
124-
const { getLoanFindingUrl } = useBadgeData();
125-
const { getGoalDisplayName } = useGoalData();
124+
const { getCtaHref } = useGoalData();
126125
127126
const loansToReachGoal = computed(() => props.userGoal?.target || 0);
128127
const userHasGoal = computed(() => !!props.userGoal?.category);
@@ -144,11 +143,7 @@ const getContentfulKey = category => {
144143
};
145144
146145
const ctaHref = computed(() => {
147-
const categoryHeader = getGoalDisplayName(props.userGoal?.target, props.userGoal?.category);
148-
const string = `Your goal: Support ${props.userGoal?.target} ${categoryHeader}`;
149-
const encodedHeader = encodeURIComponent(string);
150-
const loanFindingUrl = getLoanFindingUrl(props.userGoal?.category, router.currentRoute.value);
151-
return `${loanFindingUrl}?header=${encodedHeader}`;
146+
return getCtaHref(props.userGoal?.target, props.userGoal?.category, router);
152147
});
153148
154149
const achievementGoalImg = computed(() => {

‎src/components/MyKiva/MyKivaSurveyCard.vue‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<div
3-
class="card tw-w-full tw-rounded tw-shadow tw-p-2 tw-flex tw-flex-col tw-justify-between tw-bg-white
4-
tw-shrink-0 tw-overflow-hidden tw-h-full tw-select-none"
3+
class="card tw-w-full tw-rounded tw-shadow tw-p-2 tw-flex tw-flex-col tw-justify-between
4+
tw-shrink-0 tw-overflow-hidden tw-h-full tw-select-none !tw-bg-no-repeat !tw-bg-white"
55
>
66
<div>
77
<span
@@ -61,7 +61,5 @@ onMounted(() => {
6161
url('/src/assets/images/my-kiva/survey-card-mask.png'),
6262
url('/src/assets/images/my-kiva/survey-card-mask-2.png');
6363
background-position: center, bottom left, top right;
64-
65-
@apply tw-bg-no-repeat;
6664
}
6765
</style>

‎src/components/MyKiva/NextYearGoalCard.vue‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -115,14 +115,14 @@ const $kvTrackEvent = inject('$kvTrackEvent');
115115
const router = useRouter();
116116
117117
const {
118-
getLoanFindingUrl,
119118
ID_BASIC_NEEDS,
120119
ID_CLIMATE_ACTION,
121120
ID_SUPPORT_ALL
122121
} = useBadgeData();
123122
const {
124123
getGoalDisplayName,
125124
setHideGoalCardPreference,
125+
getCtaHref,
126126
} = useGoalData();
127127
128128
const userHasGoal = computed(() => !!props.userGoal && Object.keys(props.userGoal).length > 0);
@@ -189,11 +189,7 @@ const goalDescription = computed(() => {
189189
});
190190
191191
const ctaHref = computed(() => {
192-
const categoryHeader = categoryName.value;
193-
const string = `Your goal: Support ${props.userGoal?.target} ${categoryHeader}`;
194-
const encodedHeader = encodeURIComponent(string);
195-
const loanFindingUrl = getLoanFindingUrl(props.userGoal?.category, router.currentRoute.value);
196-
return `${loanFindingUrl}?header=${encodedHeader}`;
192+
return getCtaHref(props.userGoal?.target, props.userGoal?.category, router);
197193
});
198194
199195
const showConfetti = () => {

‎src/composables/useGoalData.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -28,19 +28,19 @@ import supportAllImg from '#src/assets/images/my-kiva/goal-setting/support-all.s
2828

2929
const GOAL_DISPLAY_MAP = {
3030
[ID_BASIC_NEEDS]: 'basic needs loans',
31-
[ID_CLIMATE_ACTION]: 'eco-friendly loans',
31+
[ID_CLIMATE_ACTION]: 'eco friendly loans',
3232
[ID_REFUGEE_EQUALITY]: 'refugees',
33-
[ID_SUPPORT_ALL]: 'loans',
34-
[ID_US_ECONOMIC_EQUALITY]: 'U.S. entrepreneurs',
33+
[ID_SUPPORT_ALL]: 'borrowers',
34+
[ID_US_ECONOMIC_EQUALITY]: 'US entrepreneurs',
3535
[ID_WOMENS_EQUALITY]: 'women',
3636
};
3737

3838
const GOAL_1_DISPLAY_MAP = {
3939
[ID_BASIC_NEEDS]: 'basic needs loan',
40-
[ID_CLIMATE_ACTION]: 'eco-friendly loan',
40+
[ID_CLIMATE_ACTION]: 'eco friendly loan',
4141
[ID_REFUGEE_EQUALITY]: 'refugee',
42-
[ID_SUPPORT_ALL]: 'loan',
43-
[ID_US_ECONOMIC_EQUALITY]: 'U.S. entrepreneur',
42+
[ID_SUPPORT_ALL]: 'borrower',
43+
[ID_US_ECONOMIC_EQUALITY]: 'US entrepreneur',
4444
[ID_WOMENS_EQUALITY]: 'woman',
4545
};
4646

@@ -232,7 +232,7 @@ export default function useGoalData({ apollo } = {}) {
232232
function getCtaHref(selectedGoalNumber, categoryId, router) {
233233
const { getLoanFindingUrl } = useBadgeData();
234234
const categoryHeader = getGoalDisplayName(selectedGoalNumber, categoryId);
235-
const string = `Your goal: Support ${selectedGoalNumber} ${categoryHeader}`;
235+
const string = `Support ${selectedGoalNumber} more ${categoryHeader} to reach your goal`;
236236
const encodedHeader = encodeURIComponent(string);
237237
const loanFindingUrl = getLoanFindingUrl(categoryId, router.currentRoute.value);
238238
return `${loanFindingUrl}?header=${encodedHeader}`;

‎test/unit/specs/composables/useGoalData.spec.js‎

Lines changed: 9 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -112,19 +112,19 @@ describe('useGoalData', () => {
112112
describe('getGoalDisplayName', () => {
113113
it('should return plural display name for target > 1', () => {
114114
expect(composable.getGoalDisplayName(5, ID_BASIC_NEEDS)).toBe('basic needs loans');
115-
expect(composable.getGoalDisplayName(10, ID_CLIMATE_ACTION)).toBe('eco-friendly loans');
115+
expect(composable.getGoalDisplayName(10, ID_CLIMATE_ACTION)).toBe('eco friendly loans');
116116
expect(composable.getGoalDisplayName(3, ID_REFUGEE_EQUALITY)).toBe('refugees');
117-
expect(composable.getGoalDisplayName(2, ID_SUPPORT_ALL)).toBe('loans');
118-
expect(composable.getGoalDisplayName(100, ID_US_ECONOMIC_EQUALITY)).toBe('U.S. entrepreneurs');
117+
expect(composable.getGoalDisplayName(2, ID_SUPPORT_ALL)).toBe('borrowers');
118+
expect(composable.getGoalDisplayName(100, ID_US_ECONOMIC_EQUALITY)).toBe('US entrepreneurs');
119119
expect(composable.getGoalDisplayName(7, ID_WOMENS_EQUALITY)).toBe('women');
120120
});
121121

122122
it('should return singular display name for target = 1', () => {
123123
expect(composable.getGoalDisplayName(1, ID_BASIC_NEEDS)).toBe('basic needs loan');
124-
expect(composable.getGoalDisplayName(1, ID_CLIMATE_ACTION)).toBe('eco-friendly loan');
124+
expect(composable.getGoalDisplayName(1, ID_CLIMATE_ACTION)).toBe('eco friendly loan');
125125
expect(composable.getGoalDisplayName(1, ID_REFUGEE_EQUALITY)).toBe('refugee');
126-
expect(composable.getGoalDisplayName(1, ID_SUPPORT_ALL)).toBe('loan');
127-
expect(composable.getGoalDisplayName(1, ID_US_ECONOMIC_EQUALITY)).toBe('U.S. entrepreneur');
126+
expect(composable.getGoalDisplayName(1, ID_SUPPORT_ALL)).toBe('borrower');
127+
expect(composable.getGoalDisplayName(1, ID_US_ECONOMIC_EQUALITY)).toBe('US entrepreneur');
128128
expect(composable.getGoalDisplayName(1, ID_WOMENS_EQUALITY)).toBe('woman');
129129
});
130130

@@ -1603,7 +1603,7 @@ describe('useGoalData', () => {
16031603
const router = { currentRoute: { value: {} } };
16041604

16051605
const href = composable.getCtaHref(selectedGoalNumber, categoryId, router);
1606-
const expectedString = 'Your goal: Support 1 woman';
1606+
const expectedString = 'Support 1 more woman to reach your goal';
16071607
const expectedHref = `/lend/${categoryId}?header=${encodeURIComponent(expectedString)}`;
16081608

16091609
expect(href).toBe(expectedHref);
@@ -1615,7 +1615,7 @@ describe('useGoalData', () => {
16151615
const router = { currentRoute: { value: {} } };
16161616

16171617
const href = composable.getCtaHref(selectedGoalNumber, categoryId, router);
1618-
const expectedString = 'Your goal: Support 5 basic needs loans';
1618+
const expectedString = 'Support 5 more basic needs loans to reach your goal';
16191619
const expectedHref = `/lend/${categoryId}?header=${encodeURIComponent(expectedString)}`;
16201620

16211621
expect(href).toBe(expectedHref);
@@ -1627,19 +1627,7 @@ describe('useGoalData', () => {
16271627
const router = { currentRoute: { value: {} } };
16281628

16291629
const href = composable.getCtaHref(selectedGoalNumber, categoryId, router);
1630-
const expectedString = 'Your goal: Support 10 loans';
1631-
const expectedHref = `/lend/${categoryId}?header=${encodeURIComponent(expectedString)}`;
1632-
1633-
expect(href).toBe(expectedHref);
1634-
});
1635-
1636-
it('should encode special characters in header', () => {
1637-
const selectedGoalNumber = 3;
1638-
const categoryId = ID_US_ECONOMIC_EQUALITY;
1639-
const router = { currentRoute: { value: {} } };
1640-
1641-
const href = composable.getCtaHref(selectedGoalNumber, categoryId, router);
1642-
const expectedString = 'Your goal: Support 3 U.S. entrepreneurs';
1630+
const expectedString = 'Support 10 more borrowers to reach your goal';
16431631
const expectedHref = `/lend/${categoryId}?header=${encodeURIComponent(expectedString)}`;
16441632

16451633
expect(href).toBe(expectedHref);

0 commit comments

Comments
 (0)