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..429140f14a 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' }); }); });