diff --git a/.storybook/preview.js b/.storybook/preview.js index 7bd4a955aa..4d92bad674 100644 --- a/.storybook/preview.js +++ b/.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 diff --git a/.storybook/stories/ThanksBadges.stories.js b/.storybook/stories/ThanksBadges.stories.js index 1d1a41ad3b..09775a4ff5 100644 --- a/.storybook/stories/ThanksBadges.stories.js +++ b/.storybook/stories/ThanksBadges.stories.js @@ -97,6 +97,7 @@ export const UserLoggedInOptedInThreeLoans = story({ }); export const BadgeOld = story({ + isGuest: false, lender: mockLender, loans: mockLoans, receipt: mockedReceiptData, @@ -104,6 +105,7 @@ export const BadgeOld = story({ }); export const BadgeTiered = story({ + isGuest: false, lender: mockLender, loans: mockLoans, receipt: mockedReceiptData, @@ -111,6 +113,7 @@ export const BadgeTiered = story({ }); export const BadgeMultiple = story({ + isGuest: false, lender: mockLender, loans: mockLoans, receipt: mockedReceiptData, 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..b5b5d62b60 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,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, }; } 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(''); + }); + }); });