From d967d574a08b340501e7591e5b0f274b81931ebc Mon Sep 17 00:00:00 2001
From: Casey Dyer <dyersituations@gmail.com>
Date: Tue, 17 Dec 2024 12:15:12 -0800
Subject: [PATCH] feat: update level name util to support badge object used on
 MyKiva TY page

---
 src/components/Thanks/MyKiva/ThanksBadges.vue |  6 +++-
 src/composables/useBadgeData.js               | 30 ++++++++++-------
 .../specs/composables/useBadgeData.spec.js    | 33 +++++++++++++++++--
 3 files changed, 55 insertions(+), 14 deletions(-)

diff --git a/src/components/Thanks/MyKiva/ThanksBadges.vue b/src/components/Thanks/MyKiva/ThanksBadges.vue
index bfa9f2a5d3..fdf64361b8 100644
--- a/src/components/Thanks/MyKiva/ThanksBadges.vue
+++ b/src/components/Thanks/MyKiva/ThanksBadges.vue
@@ -249,6 +249,7 @@ const {
 	badgeData,
 	getHighestPriorityDisplayBadge,
 	getLastCompletedBadgeLevelData,
+	getTierBadgeDataByLevel,
 } = useBadgeData();
 
 const badgeIdsAchieved = ref(props.badgesAchieved.map(b => b.achievementId));
@@ -297,7 +298,10 @@ const displayedBadgeData = computed(() => {
 
 const badgeImageUrl = computed(() => displayedBadgeData.value.contentfulData?.imageUrl ?? '');
 
-const badgeLevelName = computed(() => displayedBadgeData.value.levelName ?? '');
+const badgeLevelName = computed(() => {
+	const levelData = getTierBadgeDataByLevel(displayedBadgeData.value, displayedBadgeData.value.level);
+	return levelData.tierName;
+});
 
 const hasBadgeData = computed(() => !!badgeLevelName.value);
 
diff --git a/src/composables/useBadgeData.js b/src/composables/useBadgeData.js
index 429140f14a..73de4e4bfc 100644
--- a/src/composables/useBadgeData.js
+++ b/src/composables/useBadgeData.js
@@ -250,6 +250,18 @@ export default function useBadgeData() {
 	 */
 	const badgeData = computed(() => combineBadgeData(badgeAchievementData.value, badgeContentfulData.value));
 
+	/**
+	 * Returns the formatted name for the provided Contentful data
+	 *
+	 * @param contentfulData The Contentful data for the badge and/or badge level
+	 * @returns Formatted badge and/or badge level name
+	 */
+	const getLevelName = contentfulData => {
+		const levelText = contentfulData?.levelName ? ` (level ${contentfulData?.levelName})` : '';
+		const challengeName = contentfulData?.challengeName ?? '';
+		return levelText ? `${challengeName}${levelText}` : challengeName;
+	};
+
 	/**
 	 * Gets the badge data with specific contentful and achievement data for the tier
 	 *
@@ -260,19 +272,15 @@ export default function useBadgeData() {
 	const getTierBadgeDataByLevel = (badge, level) => {
 		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})`
-			: '';
+		const contentfulData = badge?.contentfulData?.[tierIndex]
+			// The TY page provides a badge object with a single contentfulData property
+			|| (typeof badge?.contentfulData?.length === 'undefined' ? badge.contentfulData : undefined);
 
 		return {
 			...badge,
 			contentfulData,
 			achievementData,
-			// Handle both tiered and old badges (use challenge name for non-tiered)
-			tierName: contentfulData?.challengeName
-				? `${(contentfulData.challengeName)}${levelText}`
-				: (badge?.challengeName ?? ''),
+			tierName: getLevelName(contentfulData) || badge.challengeName,
 		};
 	};
 
@@ -347,7 +355,7 @@ export default function useBadgeData() {
 				return {
 					...badge,
 					contentfulData,
-					levelName: contentfulData.challengeName,
+					levelName: getLevelName(contentfulData),
 				};
 			}
 		} else if (badge?.achievementData?.tiers?.length) {
@@ -366,8 +374,7 @@ export default function useBadgeData() {
 				...badge,
 				contentfulData,
 				achievementData: tiers[0],
-				// eslint-disable-next-line max-len
-				levelName: `${(contentfulData.challengeName ?? '')}${(contentfulData.levelName ? ' ' : '')}${(contentfulData.levelName ?? '')}`
+				levelName: getLevelName(contentfulData),
 			};
 		}
 		return {};
@@ -473,5 +480,6 @@ export default function useBadgeData() {
 		badgeLoanIdData,
 		isBadgeKeyValid,
 		completedBadges,
+		getLevelName,
 	};
 }
diff --git a/test/unit/specs/composables/useBadgeData.spec.js b/test/unit/specs/composables/useBadgeData.spec.js
index 298a57daf1..7f5235a10a 100644
--- a/test/unit/specs/composables/useBadgeData.spec.js
+++ b/test/unit/specs/composables/useBadgeData.spec.js
@@ -568,7 +568,7 @@ describe('useBadgeData.js', () => {
 				...badge,
 				contentfulData: badge.contentfulData[1],
 				achievementData: badge.achievementData.tiers[1],
-				levelName: 'Basic needs 2'
+				levelName: 'Basic needs (level 2)'
 			});
 		});
 
@@ -591,7 +591,7 @@ describe('useBadgeData.js', () => {
 				...badge,
 				contentfulData: badge.contentfulData[1],
 				achievementData: badge.achievementData.tiers[1],
-				levelName: 'Basic needs 2'
+				levelName: 'Basic needs (level 2)'
 			});
 		});
 
@@ -724,4 +724,33 @@ describe('useBadgeData.js', () => {
 			])).toEqual([]);
 		});
 	});
+
+	describe('getLevelName', () => {
+		it('should return the challenge name with level name when level name is present', () => {
+			const { getLevelName } = useBadgeData();
+			const data = {
+				challengeName: 'Basic needs',
+				levelName: '1'
+			};
+			expect(getLevelName(data)).toEqual('Basic needs (level 1)');
+		});
+
+		it('should return only the challenge name when level name is not present', () => {
+			const { getLevelName } = useBadgeData();
+			const data = {
+				challengeName: 'Basic needs'
+			};
+			expect(getLevelName(data)).toEqual('Basic needs');
+		});
+
+		it('should return an empty string when contentfulData is undefined', () => {
+			const { getLevelName } = useBadgeData();
+			expect(getLevelName(undefined)).toEqual('');
+		});
+
+		it('should return an empty string when contentfulData is null', () => {
+			const { getLevelName } = useBadgeData();
+			expect(getLevelName(null)).toEqual('');
+		});
+	});
 });