From e92550b0465943cc1a77b839b000bb0363285db8 Mon Sep 17 00:00:00 2001
From: Casey Dyer <dyersituations@gmail.com>
Date: Mon, 16 Dec 2024 17:18:56 -0800
Subject: [PATCH 1/2] feat: use badge name with level in parenthesis throughout
 new experience

---
 .../MyKiva/BadgeModalContentJourney.vue       |   9 +-
 src/components/MyKiva/EarnedBadgesSection.vue |  10 +-
 src/composables/useBadgeData.js               |   8 +-
 .../Portfolio/LendingStats/BadgesList.vue     |   9 +-
 .../specs/composables/useBadgeData.spec.js    | 132 ++++++++++++++++--
 5 files changed, 142 insertions(+), 26 deletions(-)

diff --git a/src/components/MyKiva/BadgeModalContentJourney.vue b/src/components/MyKiva/BadgeModalContentJourney.vue
index 78678a0a88..6c1caab081 100644
--- 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
index 15331f5198..0623ed67ed 100644
--- 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
index 20efe5d328..4c604747b2 100644
--- 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
index d11ccbf87d..46156016c4 100644
--- 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
index b87a18fec5..298a57daf1 100644
--- 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'
 			});
 		});
 	});

From ad8a29dbcfaa42043104e32657177b9c855fb412 Mon Sep 17 00:00:00 2001
From: Casey Dyer <dyersituations@gmail.com>
Date: Mon, 16 Dec 2024 17:22:55 -0800
Subject: [PATCH 2/2] fix: extra optional chaining

---
 src/composables/useBadgeData.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/composables/useBadgeData.js b/src/composables/useBadgeData.js
index 4c604747b2..429140f14a 100644
--- a/src/composables/useBadgeData.js
+++ b/src/composables/useBadgeData.js
@@ -272,7 +272,7 @@ export default function useBadgeData() {
 			// Handle both tiered and old badges (use challenge name for non-tiered)
 			tierName: contentfulData?.challengeName
 				? `${(contentfulData.challengeName)}${levelText}`
-				: badge.challengeName,
+				: (badge?.challengeName ?? ''),
 		};
 	};