feat: use badge name with level in parenthesis throughout new experience

kiva · Dec 17, 2024 · e92550b · e92550b
1 parent 7653d84
commit e92550b
Show file tree

Hide file tree

Showing 5 changed files with 142 additions and 26 deletions.
diff --git a/src/components/MyKiva/BadgeModalContentJourney.vue b/src/components/MyKiva/BadgeModalContentJourney.vue
@@ -99,7 +99,7 @@ const props = defineProps({
 	},
 });
 
-const { getBadgeWithVisibleTiers } = useBadgeData();
+const { getBadgeWithVisibleTiers, getTierBadgeDataByLevel } = useBadgeData();
 
 const { isMobile } = useIsMobile(MOBILE_BREAKPOINT);
 
@@ -145,11 +145,8 @@ const getBadgeStatus = index => {
 };
 
 const getTierName = index => {
-	const contentfulData = badgeWithVisibleTiers.value.contentfulData[index];
-	if (contentfulData.challengeName && contentfulData.levelName) {
-		return `${contentfulData.challengeName} ${contentfulData.levelName}`;
-	}
-	return `Level ${index + 1}`;
+	const levelData = getTierBadgeDataByLevel(badgeWithVisibleTiers.value, index + 1);
+	return levelData.tierName;
 };
 
 const handleBadgeClick = index => {

diff --git a/src/components/MyKiva/EarnedBadgesSection.vue b/src/components/MyKiva/EarnedBadgesSection.vue
@@ -67,6 +67,7 @@ import {
 import { format } from 'date-fns';
 import KvButton from '#kv-components/KvButton';
 import MyKivaContainer from '#src/components/MyKiva/MyKivaContainer';
+import useBadgeData from '#src/composables/useBadgeData';
 
 const $kvTrackEvent = inject('$kvTrackEvent');
 
@@ -84,6 +85,8 @@ const visibleOffset = ref(1);
 
 const { badgesData } = toRefs(props);
 
+const { getTierBadgeDataByLevel } = useBadgeData();
+
 const completedBadges = computed(() => {
 	const completedBadgesArr = [];
 
@@ -123,11 +126,8 @@ const completedBadges = computed(() => {
 const visibleBadges = computed(() => completedBadges.value.slice(0, visibleLimit.value * visibleOffset.value));
 
 const getBadgeTitle = badge => {
-	if (badge.level === 0) {
-		return badge?.contentfulData?.[0]?.challengeName ?? '';
-	}
-	const badgeData = badge?.contentfulData?.find(data => data.level === badge.level);
-	return `${badgeData?.challengeName} ${badgeData?.levelName}` ?? '';
+	const levelData = getTierBadgeDataByLevel(badge, badge.level);
+	return levelData.tierName;
 };
 
 const getBadgeImgUrl = badge => {

diff --git a/src/composables/useBadgeData.js b/src/composables/useBadgeData.js
@@ -261,12 +261,18 @@ export default function useBadgeData() {
 		const tierIndex = badge?.achievementData?.tiers?.findIndex(t => t?.level === level);
 		const achievementData = badge?.achievementData?.tiers?.[tierIndex];
 		const contentfulData = badge?.contentfulData?.[tierIndex];
+		const levelText = typeof contentfulData?.levelName !== 'undefined'
+			? ` (level ${contentfulData?.levelName})`
+			: '';
 
 		return {
 			...badge,
 			contentfulData,
 			achievementData,
-			tierName: `${(contentfulData?.challengeName ?? '')} ${(contentfulData?.levelName ?? '')}`
+			// Handle both tiered and old badges (use challenge name for non-tiered)
+			tierName: contentfulData?.challengeName
+				? `${(contentfulData.challengeName)}${levelText}`
+				: badge.challengeName,
 		};
 	};
 

diff --git a/src/pages/Portfolio/LendingStats/BadgesList.vue b/src/pages/Portfolio/LendingStats/BadgesList.vue
@@ -46,6 +46,7 @@
 <script>
 import KvLoadingPlaceholder from '#kv-components/KvLoadingPlaceholder';
 import { format } from 'date-fns';
+import useBadgeData from '#src/composables/useBadgeData';
 
 export default {
 	name: 'BadgesList',
@@ -70,11 +71,9 @@ export default {
 	},
 	methods: {
 		getBadgeTitle(badge) {
-			if (badge.level === 0) {
-				return badge?.contentfulData?.[0]?.challengeName ?? '';
-			}
-			const badgeData = badge?.contentfulData?.find(data => data.level === badge.level);
-			return `${badgeData?.challengeName} ${badgeData?.levelName}` ?? '';
+			const { getTierBadgeDataByLevel } = useBadgeData();
+			const levelData = getTierBadgeDataByLevel(badge, badge.level);
+			return levelData.tierName;
 		},
 		getBadgeImgUrl(badge) {
 			if (badge.level === 0) {

diff --git a/test/unit/specs/composables/useBadgeData.spec.js b/test/unit/specs/composables/useBadgeData.spec.js
@@ -103,16 +103,130 @@ describe('useBadgeData.js', () => {
 	});
 
 	describe('getTierBadgeDataByLevel', () => {
-		it('should get the badge data by id and tier', () => {
+		it('should return the correct badge data for a given tier level with numeric level name', () => {
 			const { getTierBadgeDataByLevel } = useBadgeData();
-			const tier = 7;
-			const sampleBadge = combinedData[0];
-
-			expect(getTierBadgeDataByLevel(sampleBadge, tier)).toEqual({
-				...sampleBadge,
-				contentfulData: sampleBadge.contentfulData?.[tier - 1],
-				achievementData: sampleBadge.achievementData?.tiers?.[tier - 1],
-				tierName: `${sampleBadge.contentfulData?.[tier - 1].challengeName} ${sampleBadge.contentfulData?.[tier - 1].levelName}`,
+			const badge = {
+				id: 'basic-needs',
+				challengeName: 'Basic needs',
+				contentfulData: [
+					{ level: 1, challengeName: 'Basic needs', levelName: '1' },
+					{ level: 2, challengeName: 'Basic needs', levelName: '2' },
+					{ level: 3, challengeName: 'Basic needs', levelName: '3' }
+				],
+				achievementData: {
+					tiers: [
+						{ level: 1, completedDate: '2024-10-22T18:49:21Z' },
+						{ level: 2, completedDate: '2024-10-23T18:49:21Z' },
+						{ level: 3, completedDate: '2024-10-24T18:49:21Z' }
+					]
+				}
+			};
+			const level = 2;
+
+			expect(getTierBadgeDataByLevel(badge, level)).toEqual({
+				...badge,
+				contentfulData: badge.contentfulData[1],
+				achievementData: badge.achievementData.tiers[1],
+				tierName: 'Basic needs (level 2)'
+			});
+		});
+
+		it('should return the correct badge data for a given tier level with string level name', () => {
+			const { getTierBadgeDataByLevel } = useBadgeData();
+			const badge = {
+				id: 'basic-needs',
+				challengeName: 'Basic needs',
+				contentfulData: [
+					{ level: 1, challengeName: 'Basic needs', levelName: '1' },
+					{ level: 2, challengeName: 'Basic needs', levelName: '✨50✨' },
+					{ level: 3, challengeName: 'Basic needs', levelName: '3' }
+				],
+				achievementData: {
+					tiers: [
+						{ level: 1, completedDate: '2024-10-22T18:49:21Z' },
+						{ level: 2, completedDate: '2024-10-23T18:49:21Z' },
+						{ level: 3, completedDate: '2024-10-24T18:49:21Z' }
+					]
+				}
+			};
+			const level = 2;
+
+			expect(getTierBadgeDataByLevel(badge, level)).toEqual({
+				...badge,
+				contentfulData: badge.contentfulData[1],
+				achievementData: badge.achievementData.tiers[1],
+				tierName: 'Basic needs (level ✨50✨)'
+			});
+		});
+
+		it('should return the correct badge data for a tier level with no level name', () => {
+			const { getTierBadgeDataByLevel } = useBadgeData();
+			const badge = {
+				id: 'basic-needs',
+				challengeName: 'Basic needs',
+				contentfulData: [
+					{ level: 1, challengeName: 'Basic needs' },
+					{ level: 2, challengeName: 'Basic needs' },
+					{ level: 3, challengeName: 'Basic needs' }
+				],
+				achievementData: {
+					tiers: [
+						{ level: 1, completedDate: '2024-10-22T18:49:21Z' },
+						{ level: 2, completedDate: '2024-10-23T18:49:21Z' },
+						{ level: 3, completedDate: '2024-10-24T18:49:21Z' }
+					]
+				}
+			};
+			const level = 2;
+
+			expect(getTierBadgeDataByLevel(badge, level)).toEqual({
+				...badge,
+				contentfulData: badge.contentfulData[1],
+				achievementData: badge.achievementData.tiers[1],
+				tierName: 'Basic needs'
+			});
+		});
+
+		it('should return the correct badge data for a tier level with missing contentful data', () => {
+			const { getTierBadgeDataByLevel } = useBadgeData();
+			const badge = {
+				id: 'basic-needs',
+				challengeName: 'Basic needs',
+				contentfulData: [
+					{ level: 1, challengeName: 'Basic needs', levelName: '1' },
+					{ level: 2, challengeName: 'Basic needs', levelName: '2' }
+				],
+				achievementData: {
+					tiers: [
+						{ level: 1, completedDate: '2024-10-22T18:49:21Z' },
+						{ level: 2, completedDate: '2024-10-23T18:49:21Z' },
+						{ level: 3, completedDate: '2024-10-24T18:49:21Z' }
+					]
+				}
+			};
+			const level = 3;
+
+			expect(getTierBadgeDataByLevel(badge, level)).toEqual({
+				...badge,
+				contentfulData: undefined,
+				achievementData: badge.achievementData.tiers[2],
+				tierName: 'Basic needs'
+			});
+		});
+
+		it('should return the correct badge data for a tier level with no contentful data', () => {
+			const { getTierBadgeDataByLevel } = useBadgeData();
+			const badge = {
+				id: 'basic-needs',
+				challengeName: 'Basic needs',
+			};
+			const level = 3;
+
+			expect(getTierBadgeDataByLevel(badge, level)).toEqual({
+				...badge,
+				contentfulData: undefined,
+				achievementData: undefined,
+				tierName: 'Basic needs'
 			});
 		});
 	});