feat: change MyKiva TY page level name format

.storybook/preview.js

@@ -60,6 +60,8 @@ setup((app) => {
 	});
 
 	app.provide('$kvTrackEvent', () => { });
+
+	app.provide('$appConfig', { photoPath: 'https://www.development.kiva.org/img/' });
 });
 
 // add custom viewports

.storybook/stories/ThanksBadges.stories.js

@@ -97,20 +97,23 @@ export const UserLoggedInOptedInThreeLoans = story({
 });
 
 export const BadgeOld = story({
+	isGuest: false,
 	lender: mockLender,
 	loans: mockLoans,
 	receipt: mockedReceiptData,
 	badgesAchieved: [mockOldBadge],
 });
 
 export const BadgeTiered = story({
+	isGuest: false,
 	lender: mockLender,
 	loans: mockLoans,
 	receipt: mockedReceiptData,
 	badgesAchieved: [mockTieredBadge],
 });
 
 export const BadgeMultiple = story({
+	isGuest: false,
 	lender: mockLender,
 	loans: mockLoans,
 	receipt: mockedReceiptData,

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);
 

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,16 @@ 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 ?? ''),
+			// Fallback shouldn't be used but added just in case
+			tierName: getLevelName(contentfulData) || badge.challengeName,
 		};
 	};
 
@@ -347,7 +356,7 @@ export default function useBadgeData() {
 				return {
 					...badge,
 					contentfulData,
-					levelName: contentfulData.challengeName,
+					levelName: getLevelName(contentfulData),
 				};
 			}
 		} else if (badge?.achievementData?.tiers?.length) {
@@ -366,8 +375,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 +481,6 @@ export default function useBadgeData() {
 		badgeLoanIdData,
 		isBadgeKeyValid,
 		completedBadges,
+		getLevelName,
 	};
 }

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('');
+		});
+	});
 });