From 2c29b716dbc179ef2cf641e4aaf60dc933acad9a Mon Sep 17 00:00:00 2001
From: Christian Bedon <christian.bedon@contractors.kiva.org>
Date: Thu, 21 Nov 2024 19:33:37 -0500
Subject: [PATCH 1/7] feat: add tiered badges to BadgesList component

---
 src/components/LenderProfile/LenderBadges.vue | 104 +++++-------------
 src/composables/useBadgeData.js               |  53 ++++++++-
 .../query/userAchievementProgress.graphql     |   4 +-
 .../Portfolio/LendingStats/BadgesList.vue     |  85 +++++---------
 .../LendingStats/LendingStatsPage.vue         |  40 +++++--
 .../specs/composables/useBadgeData.spec.js    |  48 ++++++++
 6 files changed, 192 insertions(+), 142 deletions(-)

diff --git a/src/components/LenderProfile/LenderBadges.vue b/src/components/LenderProfile/LenderBadges.vue
index 7f73727961..4ecdb0b254 100644
--- a/src/components/LenderProfile/LenderBadges.vue
+++ b/src/components/LenderProfile/LenderBadges.vue
@@ -1,6 +1,6 @@
 <template>
 	<async-lender-section @visible="fetchUserAchievements">
-		<section v-if="completedAchievements.length > 0">
+		<section v-if="completedBadges.length > 0">
 			<h2
 				v-if="!isLoading"
 				class="data-hj-suppress"
@@ -13,7 +13,7 @@
 			/>
 			<badges-list
 				class="tw-my-4"
-				:completed-achievements="completedAchievements"
+				:completed-achievements="completedBadges"
 				:total-possible-badges="totalPossibleBadges"
 				:is-loading="isLoading"
 			/>
@@ -21,84 +21,40 @@
 	</async-lender-section>
 </template>
 
-<script>
-import { gql } from 'graphql-tag';
-import logReadQueryError from '#src/util/logReadQueryError';
+<script setup>
 import BadgesList from '#src/pages/Portfolio/LendingStats/BadgesList';
 import KvLoadingPlaceholder from '#kv-components/KvLoadingPlaceholder';
+import { computed, ref, inject } from 'vue';
+import useBadgeData from '#src/composables/useBadgeData';
 import AsyncLenderSection from './AsyncLenderSection';
 
-const userAchievementProgressQuery = gql`query userAchievementProgress( $publicId: String!) {
-	userAchievementProgress(publicId: $publicId) {
-		id
-		lendingAchievements {
-			id
-			milestoneProgress {
-				id
-				milestoneStatus
-			}
-		}
-	}
-}`;
-
-export default {
-	name: 'LenderBadges',
-	inject: ['apollo', 'cookieStore'],
-	components: {
-		BadgesList,
-		KvLoadingPlaceholder,
-		AsyncLenderSection,
-	},
-	props: {
-		lenderInfo: {
-			type: Object,
-			default: () => ({})
-		},
-		publicId: {
-			type: String,
-			required: true,
-		},
+const props = defineProps({
+	lenderInfo: {
+		type: Object,
+		default: () => ({})
 	},
-	data() {
-		return {
-			isLoading: true,
-			allAchievements: [],
-		};
+	publicId: {
+		type: String,
+		required: true,
 	},
-	computed: {
-		lenderName() {
-			return this.lenderInfo?.name ?? '';
-		},
-		badgesTitle() {
-			return this.lenderInfo?.name
-				? `${this.lenderInfo.name}'s badges`
-				: 'Badges';
-		},
-		completedAchievements() {
-			return this.allAchievements.filter(
-				achievement => achievement.milestoneProgress?.[0]?.milestoneStatus === 'COMPLETE'
-			);
-		},
-		totalPossibleBadges() {
-			return this.allAchievements?.length ?? 0;
-		},
-	},
-	methods: {
-		async fetchUserAchievements() {
-			try {
-				const { data } = await this.apollo.query({
-					query: userAchievementProgressQuery,
-					variables: {
-						publicId: this.publicId,
-					},
-				});
+});
 
-				this.allAchievements = data?.userAchievementProgress?.lendingAchievements ?? [];
-				this.isLoading = false;
-			} catch (e) {
-				logReadQueryError(e, 'LenderBadges userAchievementsProgress');
-			}
-		},
-	},
+const apollo = inject('apollo');
+
+const {
+	badgeData,
+	fetchAchievementData,
+	fetchContentfulData,
+	completedBadges,
+} = useBadgeData(apollo);
+const isLoading = ref(true);
+const badgesTitle = computed(() => (props.lenderInfo?.name ? `${props.lenderInfo.name}'s badges` : 'Badges'));
+
+const fetchUserAchievements = async () => {
+	await fetchAchievementData(apollo, props.publicId);
+	await fetchContentfulData(apollo);
+	isLoading.value = false;
 };
+
+const totalPossibleBadges = computed(() => badgeData.value?.length ?? 0);
 </script>
diff --git a/src/composables/useBadgeData.js b/src/composables/useBadgeData.js
index 7f93611da4..a44ff87640 100644
--- a/src/composables/useBadgeData.js
+++ b/src/composables/useBadgeData.js
@@ -51,8 +51,8 @@ export default function useBadgeData() {
 	 *
 	 * @param apollo The current instance of Apollo
 	 */
-	const fetchAchievementData = apollo => {
-		apollo.query({ query: userAchievementProgressQuery })
+	const fetchAchievementData = (apollo, publicId = null) => {
+		apollo.query({ query: userAchievementProgressQuery, variables: { publicId } })
 			.then(result => {
 				badgeAchievementData.value = [
 					...(result.data?.userAchievementProgress?.lendingAchievements ?? []),
@@ -388,6 +388,53 @@ export default function useBadgeData() {
 		return displayedBadge ?? {};
 	};
 
+	/**
+	 * Get completed badges of a user
+	 *
+	 * @param badges The badges to get the completed badges from
+	 * @returns Completed badges
+	 */
+	const getCompletedBadges = badges => {
+		const completedBadgesArr = [];
+
+		badges?.forEach(badge => {
+			if (badge.achievementData?.tiers?.length) {
+				const { tiers } = badge.achievementData;
+				tiers.forEach(tier => {
+					if (tier.completedDate) {
+						completedBadgesArr.push({
+							...badge,
+							earnedAtDate: tier.completedDate,
+							level: tier.level,
+						});
+					}
+				});
+			}
+			if (badge?.achievementData?.milestoneProgress?.length) {
+				const earnedAtDate = badge.achievementData?.milestoneProgress?.[0]?.earnedAtDate;
+				if (earnedAtDate) {
+					completedBadgesArr.push({
+						...badge,
+						earnedAtDate,
+						level: 0,
+					});
+				}
+			}
+		});
+
+		return completedBadgesArr;
+	};
+
+	const completedBadges = computed(() => {
+		const completedBadgesArr = getCompletedBadges(badgeData.value);
+
+		completedBadgesArr.sort((a, b) => {
+			return new Date(a.earnedAtDate) - new Date(b.earnedAtDate);
+		});
+
+		return completedBadgesArr;
+	});
+
 	return {
 		fetchAchievementData,
 		fetchContentfulData,
@@ -400,9 +447,11 @@ export default function useBadgeData() {
 		getBadgeWithVisibleTiers,
 		getLastCompletedBadgeLevelData,
 		getHighestPriorityDisplayBadge,
+		getCompletedBadges,
 		badgeAchievementData,
 		badgeData,
 		badgeLoanIdData,
 		isBadgeKeyValid,
+		completedBadges,
 	};
 }
diff --git a/src/graphql/query/userAchievementProgress.graphql b/src/graphql/query/userAchievementProgress.graphql
index 319de66b97..7450817ca1 100644
--- a/src/graphql/query/userAchievementProgress.graphql
+++ b/src/graphql/query/userAchievementProgress.graphql
@@ -1,5 +1,5 @@
-query UserAchievementProgress {
-  userAchievementProgress {
+query UserAchievementProgress($publicId: String) {
+  userAchievementProgress(publicId: $publicId) {
     id
     lendingAchievements {
       id
diff --git a/src/pages/Portfolio/LendingStats/BadgesList.vue b/src/pages/Portfolio/LendingStats/BadgesList.vue
index 8ae5a04a3b..812751c0c6 100644
--- a/src/pages/Portfolio/LendingStats/BadgesList.vue
+++ b/src/pages/Portfolio/LendingStats/BadgesList.vue
@@ -22,16 +22,21 @@
 		</p>
 		<div
 			v-else
-			v-for="(challenge, index) in challengeDataContentful"
-			:key="index"
+			v-for="badge in completedAchievements"
+			:key="badge.id"
 			class="tw-flex tw-w-full tw-gap-1"
 			:class="{'tw-items-center': !inPortfolio }"
 		>
-			<img :src="challenge.badgeSvg" class="tw-h-10 tw-flex-none tw-mx-auto">
+			<img
+				:src="getBadgeImgUrl(badge)"
+				class="tw-h-10 tw-flex-none tw-mx-auto"
+			>
 			<div class="tw-w-full">
-				<span class="tw-font-medium">{{ challenge.challengeName }}</span>
-				<p v-if="shouldShowBadgeDate(challenge)" class="tw-text-secondary tw-text-small">
-					{{ challenge.dateTagline }}
+				<span class="tw-font-medium">
+					{{ getBadgeTitle(badge) }}
+				</span>
+				<p class="tw-text-secondary tw-text-small">
+					{{ getBadgeDate(badge) }}
 				</p>
 			</div>
 		</div>
@@ -39,9 +44,8 @@
 </template>
 
 <script>
-import { formatMediaAssetArray } from '#src/util/contentfulUtils';
-import { gql } from 'graphql-tag';
 import KvLoadingPlaceholder from '#kv-components/KvLoadingPlaceholder';
+import { format } from 'date-fns';
 
 export default {
 	name: 'BadgesList',
@@ -63,63 +67,30 @@ export default {
 			default: false
 		},
 	},
-	data() {
-		return {
-			challengeDataContentful: [],
-		};
-	},
 	computed: {
-		/* Challenge keys for completed challenges */
-		completedChallengeKeys() {
-			return this.completedAchievements.map(achievement => achievement.id).join(',');
-		},
 		inPortfolio() {
 			return this.$route?.name?.includes('portfolio');
 		},
 	},
-	watch: {
-		// When this prop has loaded we can load the badges content from contentful
-		totalPossibleBadges: {
-			handler(next) {
-				if (next !== 0) {
-					this.loadBadgesContent();
-				}
-			},
-			immediate: true
-		}
-	},
 	methods: {
-		loadBadgesContent() {
-			if (this.completedChallengeKeys !== '') {
-				const filterFields = `fields.key[in]=${this.completedChallengeKeys}`;
-				this.apollo.query({
-					query: gql`query contentfulDefinitions($customFields: String) {
-					contentful {
-						entries(contentType: "challenge", customFields: $customFields)
-					}
-				}`,
-					variables: {
-						customFields: filterFields
-					},
-				}).then(result => {
-					const contentfulData = result.data?.contentful?.entries?.items ?? null;
-					if (contentfulData) {
-						this.challengeDataContentful = contentfulData.map(item => {
-							return {
-								...item.fields,
-								badgeSvg: formatMediaAssetArray([item.fields.badgeImage])?.[0]?.file?.url,
-							};
-						});
-					}
-				}).catch(err => {
-					console.error(err);
-					this.$showTipMsg('There was a problem loading badges', 'error');
-				});
+		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}` ?? '';
 		},
-		shouldShowBadgeDate(challenge) {
-			// Lifetime badges currently have an "n/a" date tagline
-			return challenge?.dateTagline?.toLowerCase() !== 'n/a';
+		getBadgeImgUrl(badge) {
+			if (badge.level === 0) {
+				return badge?.contentfulData?.[0]?.imageUrl ?? '';
+			}
+			const badgeData = badge?.contentfulData?.find(data => data.level === badge.level);
+			return badgeData?.imageUrl ?? '';
+		},
+
+		getBadgeDate(badge) {
+			const earnedAtDate = badge.earnedAtDate ? Date.parse(badge.earnedAtDate) : new Date();
+			return format(earnedAtDate, 'MMM yyyy');
 		},
 	},
 };
diff --git a/src/pages/Portfolio/LendingStats/LendingStatsPage.vue b/src/pages/Portfolio/LendingStats/LendingStatsPage.vue
index 92a98f2632..6d4cf01c3a 100644
--- a/src/pages/Portfolio/LendingStats/LendingStatsPage.vue
+++ b/src/pages/Portfolio/LendingStats/LendingStatsPage.vue
@@ -23,7 +23,7 @@
 					</p>
 					<hr class="tw-border-tertiary tw-my-4">
 					<badges-section
-						:total-possible-badges="allAchievements.length"
+						:total-possible-badges="badgesData.length"
 						:completed-achievements="completedAchievements"
 					/>
 					<hr class="tw-border-tertiary tw-my-4">
@@ -88,12 +88,13 @@
 import _differenceBy from 'lodash/differenceBy';
 import _sortBy from 'lodash/sortBy';
 import lendingStatsQuery from '#src/graphql/query/myLendingStats.graphql';
-import userAchievementProgressQuery from '#src/graphql/query/userAchievementProgress.graphql';
 import WwwPage from '#src/components/WwwFrame/WwwPage';
 import TheMyKivaSecondaryMenu from '#src/components/WwwFrame/Menus/TheMyKivaSecondaryMenu';
 import ThePortfolioTertiaryMenu from '#src/components/WwwFrame/Menus/ThePortfolioTertiaryMenu';
 import KvGrid from '#kv-components/KvGrid';
 import KvPageContainer from '#kv-components/KvPageContainer';
+import lenderProfileBadgeDataQuery from '#src/graphql/query/lenderProfileBadgeData.graphql';
+import useBadgeData from '#src/composables/useBadgeData';
 import BadgesSection from './BadgesSection';
 import StatsSection from './StatsSection';
 
@@ -124,6 +125,7 @@ export default {
 			partnersNotLentTo: [],
 			userId: null,
 			allAchievements: [],
+			badgesData: [],
 		};
 	},
 	apollo: {
@@ -157,19 +159,43 @@ export default {
 	},
 	created() {
 		this.apollo.query({
-			query: userAchievementProgressQuery,
+			query: lenderProfileBadgeDataQuery,
+			variables: {
+				contentType: 'challenge',
+				limit: 200,
+			}
 		}).then(({ data }) => {
-			this.allAchievements = data?.userAchievementProgress?.lendingAchievements ?? [];
+			this.allAchievements = data ?? {};
 		});
 	},
 	computed: {
 		completedAchievements() {
-			return this.allAchievements.filter(
-				achievement => achievement.milestoneProgress?.[0]?.milestoneStatus === 'COMPLETE'
-			);
+			const completedBadgesArr = this.getBadgesData();
+
+			completedBadgesArr.sort((a, b) => {
+				return new Date(a.earnedAtDate) - new Date(b.earnedAtDate);
+			});
+
+			return completedBadgesArr;
 		},
 	},
 	methods: {
+		getBadgesData() {
+			const {
+				combineBadgeData, getCompletedBadges, getContentfulLevelData
+			} = useBadgeData();
+
+			const badgeAchievementData = [
+				...(this.allAchievements?.userAchievementProgress?.lendingAchievements ?? []),
+				...(this.allAchievements?.userAchievementProgress?.tieredLendingAchievements ?? [])
+			];
+			const badgeContentfulData = (this.allAchievements?.contentful?.entries?.items ?? [])
+				.map(entry => getContentfulLevelData(entry));
+
+			this.badgesData = combineBadgeData(badgeAchievementData, badgeContentfulData);
+
+			return getCompletedBadges(this.badgesData);
+		},
 		iconForSector(sector) {
 			return `sector-${sector.name.toLowerCase().replace(' ', '-')}`;
 		}
diff --git a/test/unit/specs/composables/useBadgeData.spec.js b/test/unit/specs/composables/useBadgeData.spec.js
index c22c00ee3a..185404c50e 100644
--- a/test/unit/specs/composables/useBadgeData.spec.js
+++ b/test/unit/specs/composables/useBadgeData.spec.js
@@ -502,4 +502,52 @@ describe('useBadgeData.js', () => {
 			expect(getHighestPriorityDisplayBadge(badges)).toEqual({ id: ID_CLIMATE_ACTION, level: 3 });
 		});
 	});
+
+	describe('getCompletedBadges', () => {
+		it('should return the completed badges', () => {
+			const { getCompletedBadges } = useBadgeData();
+			const badges = [
+				{
+					achievementData: {
+						milestoneProgress: [
+							{ earnedAtDate: '2024-10-22T18:49:21Z' }
+						]
+					},
+				},
+				{
+					achievementData: {
+						milestoneProgress: []
+					},
+				},
+				{
+					achievementData: {
+						milestoneProgress: [
+							{ earnedAtDate: '2024-10-23T18:49:21Z' }
+						]
+					},
+				},
+			];
+
+			expect(getCompletedBadges(badges)).toEqual([
+				{
+					achievementData: {
+						milestoneProgress: [
+							{ earnedAtDate: '2024-10-22T18:49:21Z' }
+						]
+					},
+					earnedAtDate: '2024-10-22T18:49:21Z',
+					level: 0,
+				},
+				{
+					achievementData: {
+						milestoneProgress: [
+							{ earnedAtDate: '2024-10-23T18:49:21Z' }
+						]
+					},
+					earnedAtDate: '2024-10-23T18:49:21Z',
+					level: 0,
+				}
+			]);
+		});
+	});
 });

From 233535fa47d625c32b74a11ca7dcc1c00ebfaed2 Mon Sep 17 00:00:00 2001
From: Christian Bedon <christian.bedon@contractors.kiva.org>
Date: Thu, 21 Nov 2024 19:38:22 -0500
Subject: [PATCH 2/7] fix: adding publicId param to jsdoc

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

diff --git a/src/composables/useBadgeData.js b/src/composables/useBadgeData.js
index a44ff87640..3f6f4bc741 100644
--- a/src/composables/useBadgeData.js
+++ b/src/composables/useBadgeData.js
@@ -50,6 +50,7 @@ export default function useBadgeData() {
 	 * Calls Apollo to get the badge achievement service data
 	 *
 	 * @param apollo The current instance of Apollo
+	 * @param publicId Whether to get achievement data for a specific user
 	 */
 	const fetchAchievementData = (apollo, publicId = null) => {
 		apollo.query({ query: userAchievementProgressQuery, variables: { publicId } })

From 112cfa0d5b9b803e421f815a4d0a4f4d449bed07 Mon Sep 17 00:00:00 2001
From: Christian Bedon <christian.bedon@contractors.kiva.org>
Date: Fri, 22 Nov 2024 13:55:36 -0500
Subject: [PATCH 3/7] fix: resolve comments and total possible badges count

---
 src/components/LenderProfile/LenderBadges.vue | 10 ++++----
 src/composables/useBadgeData.js               |  7 +++++-
 .../Portfolio/LendingStats/BadgesList.vue     |  5 ----
 .../LendingStats/LendingStatsPage.vue         |  7 +++++-
 .../specs/composables/useBadgeData.spec.js    | 23 +++++++++++++++++++
 5 files changed, 39 insertions(+), 13 deletions(-)

diff --git a/src/components/LenderProfile/LenderBadges.vue b/src/components/LenderProfile/LenderBadges.vue
index 4ecdb0b254..5646944d61 100644
--- a/src/components/LenderProfile/LenderBadges.vue
+++ b/src/components/LenderProfile/LenderBadges.vue
@@ -14,7 +14,6 @@
 			<badges-list
 				class="tw-my-4"
 				:completed-achievements="completedBadges"
-				:total-possible-badges="totalPossibleBadges"
 				:is-loading="isLoading"
 			/>
 		</section>
@@ -42,7 +41,6 @@ const props = defineProps({
 const apollo = inject('apollo');
 
 const {
-	badgeData,
 	fetchAchievementData,
 	fetchContentfulData,
 	completedBadges,
@@ -51,10 +49,10 @@ const isLoading = ref(true);
 const badgesTitle = computed(() => (props.lenderInfo?.name ? `${props.lenderInfo.name}'s badges` : 'Badges'));
 
 const fetchUserAchievements = async () => {
-	await fetchAchievementData(apollo, props.publicId);
-	await fetchContentfulData(apollo);
+	await Promise.all([
+		fetchAchievementData(apollo, props.publicId),
+		fetchContentfulData(apollo),
+	]);
 	isLoading.value = false;
 };
-
-const totalPossibleBadges = computed(() => badgeData.value?.length ?? 0);
 </script>
diff --git a/src/composables/useBadgeData.js b/src/composables/useBadgeData.js
index 3f6f4bc741..11bc34ba5f 100644
--- a/src/composables/useBadgeData.js
+++ b/src/composables/useBadgeData.js
@@ -344,7 +344,7 @@ export default function useBadgeData() {
 					levelName: contentfulData.challengeName,
 				};
 			}
-		} else if (badge.achievementData?.tiers?.length) {
+		} else if (badge?.achievementData?.tiers?.length) {
 			const tiers = JSON.parse(JSON.stringify(badge.achievementData.tiers));
 			tiers.sort((a, b) => new Date(a.completedDate) - new Date(b.completedDate));
 			const levelIndex = tiers[0].level - 1;
@@ -426,6 +426,11 @@ export default function useBadgeData() {
 		return completedBadgesArr;
 	};
 
+	/**
+	 * Get completed badges sorted by earned date
+	 *
+	 * @returns Completed badges sorted by earned date
+	 */
 	const completedBadges = computed(() => {
 		const completedBadgesArr = getCompletedBadges(badgeData.value);
 
diff --git a/src/pages/Portfolio/LendingStats/BadgesList.vue b/src/pages/Portfolio/LendingStats/BadgesList.vue
index 812751c0c6..d11ccbf87d 100644
--- a/src/pages/Portfolio/LendingStats/BadgesList.vue
+++ b/src/pages/Portfolio/LendingStats/BadgesList.vue
@@ -58,10 +58,6 @@ export default {
 			type: Array,
 			default: () => ([])
 		},
-		totalPossibleBadges: {
-			type: Number,
-			default: 0
-		},
 		isLoading: {
 			type: Boolean,
 			default: false
@@ -87,7 +83,6 @@ export default {
 			const badgeData = badge?.contentfulData?.find(data => data.level === badge.level);
 			return badgeData?.imageUrl ?? '';
 		},
-
 		getBadgeDate(badge) {
 			const earnedAtDate = badge.earnedAtDate ? Date.parse(badge.earnedAtDate) : new Date();
 			return format(earnedAtDate, 'MMM yyyy');
diff --git a/src/pages/Portfolio/LendingStats/LendingStatsPage.vue b/src/pages/Portfolio/LendingStats/LendingStatsPage.vue
index 6d4cf01c3a..8aee83472a 100644
--- a/src/pages/Portfolio/LendingStats/LendingStatsPage.vue
+++ b/src/pages/Portfolio/LendingStats/LendingStatsPage.vue
@@ -23,7 +23,7 @@
 					</p>
 					<hr class="tw-border-tertiary tw-my-4">
 					<badges-section
-						:total-possible-badges="badgesData.length"
+						:total-possible-badges="totalPossibleBadges"
 						:completed-achievements="completedAchievements"
 					/>
 					<hr class="tw-border-tertiary tw-my-4">
@@ -178,6 +178,11 @@ export default {
 
 			return completedBadgesArr;
 		},
+		totalPossibleBadges() {
+			return this.badgesData.reduce((acc, badge) => {
+				return acc + (badge?.contentfulData?.length ?? 0);
+			}, 0);
+		}
 	},
 	methods: {
 		getBadgesData() {
diff --git a/test/unit/specs/composables/useBadgeData.spec.js b/test/unit/specs/composables/useBadgeData.spec.js
index 185404c50e..5bc2114cf5 100644
--- a/test/unit/specs/composables/useBadgeData.spec.js
+++ b/test/unit/specs/composables/useBadgeData.spec.js
@@ -549,5 +549,28 @@ describe('useBadgeData.js', () => {
 				}
 			]);
 		});
+		it('should return empty array when not badges', () => {
+			const { getCompletedBadges } = useBadgeData();
+			expect(getCompletedBadges(null)).toEqual([]);
+		});
+		it('should return empty array when badges are not well formatted', () => {
+			const { getCompletedBadges } = useBadgeData();
+			expect(getCompletedBadges([
+				{
+					achievementData: {
+						milestoneProgress: [
+							{ earnedAtDate: null }
+						]
+					},
+				},
+				{
+					achievementData: {
+						milestoneProgress: [
+							{ earnedAtDate: undefined }
+						]
+					},
+				}
+			])).toEqual([]);
+		});
 	});
 });

From 36e8e0f98261dc193529d2338b2a6f818e8efa03 Mon Sep 17 00:00:00 2001
From: Christian Bedon <christian.bedon@contractors.kiva.org>
Date: Mon, 25 Nov 2024 14:23:04 -0500
Subject: [PATCH 4/7] feat: remove totalPossibleBadges from start of badges
 section

---
 src/pages/Portfolio/LendingStats/BadgesSection.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Portfolio/LendingStats/BadgesSection.vue b/src/pages/Portfolio/LendingStats/BadgesSection.vue
index b04df51c3b..449143a99b 100644
--- a/src/pages/Portfolio/LendingStats/BadgesSection.vue
+++ b/src/pages/Portfolio/LendingStats/BadgesSection.vue
@@ -6,7 +6,7 @@
 				v-if="!isLoading"
 				class="tw-text-base tw-bg-brand tw-text-white tw-py-0.5 tw-px-1 tw-self-center"
 			>
-				{{ badgesObtained }}/{{ totalPossibleBadges }}
+				{{ badgesObtained }}
 			</span>
 			<kv-loading-placeholder
 				v-else

From 90517bfc57ee2df07ad0af0a89e5e077acef4c42 Mon Sep 17 00:00:00 2001
From: Christian Bedon <christian.bedon@contractors.kiva.org>
Date: Mon, 25 Nov 2024 15:04:00 -0500
Subject: [PATCH 5/7] fix: missing 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 11bc34ba5f..245389aacc 100644
--- a/src/composables/useBadgeData.js
+++ b/src/composables/useBadgeData.js
@@ -399,7 +399,7 @@ export default function useBadgeData() {
 		const completedBadgesArr = [];
 
 		badges?.forEach(badge => {
-			if (badge.achievementData?.tiers?.length) {
+			if (badge?.achievementData?.tiers?.length) {
 				const { tiers } = badge.achievementData;
 				tiers.forEach(tier => {
 					if (tier.completedDate) {

From cbced40904352da30bdf678776e5019879440c9d Mon Sep 17 00:00:00 2001
From: Christian Bedon <christian.bedon@contractors.kiva.org>
Date: Mon, 25 Nov 2024 15:51:40 -0500
Subject: [PATCH 6/7] fix: remove totalPossibleBadges prop

---
 src/pages/Portfolio/LendingStats/BadgesSection.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/Portfolio/LendingStats/BadgesSection.vue b/src/pages/Portfolio/LendingStats/BadgesSection.vue
index 449143a99b..67745f107c 100644
--- a/src/pages/Portfolio/LendingStats/BadgesSection.vue
+++ b/src/pages/Portfolio/LendingStats/BadgesSection.vue
@@ -16,7 +16,6 @@
 		</h2>
 		<badges-list
 			:completed-achievements="completedAchievements"
-			:total-possible-badges="totalPossibleBadges"
 			:is-loading="isLoading"
 		/>
 	</section>

From e2414fbb8f4e9e33efdf486f583e47d9215b012a Mon Sep 17 00:00:00 2001
From: Christian Bedon <christian.bedon@contractors.kiva.org>
Date: Mon, 25 Nov 2024 16:44:41 -0500
Subject: [PATCH 7/7] fix: badges loading indicator

---
 src/pages/Portfolio/LendingStats/BadgesSection.vue    | 10 +++-------
 src/pages/Portfolio/LendingStats/LendingStatsPage.vue |  8 +++-----
 2 files changed, 6 insertions(+), 12 deletions(-)

diff --git a/src/pages/Portfolio/LendingStats/BadgesSection.vue b/src/pages/Portfolio/LendingStats/BadgesSection.vue
index 67745f107c..15256aa850 100644
--- a/src/pages/Portfolio/LendingStats/BadgesSection.vue
+++ b/src/pages/Portfolio/LendingStats/BadgesSection.vue
@@ -38,10 +38,9 @@ export default {
 			type: Array,
 			default: () => []
 		},
-		/* total number of possible badges */
-		totalPossibleBadges: {
-			type: Number,
-			default: 0
+		isLoading: {
+			type: Boolean,
+			default: false
 		},
 	},
 	components: {
@@ -52,9 +51,6 @@ export default {
 		badgesObtained() {
 			return this.completedAchievements.length ?? 0;
 		},
-		isLoading() {
-			return this.totalPossibleBadges === 0;
-		},
 	},
 };
 </script>
diff --git a/src/pages/Portfolio/LendingStats/LendingStatsPage.vue b/src/pages/Portfolio/LendingStats/LendingStatsPage.vue
index 8aee83472a..cfa6900d1a 100644
--- a/src/pages/Portfolio/LendingStats/LendingStatsPage.vue
+++ b/src/pages/Portfolio/LendingStats/LendingStatsPage.vue
@@ -23,7 +23,7 @@
 					</p>
 					<hr class="tw-border-tertiary tw-my-4">
 					<badges-section
-						:total-possible-badges="totalPossibleBadges"
+						:is-loading="badgesLoading"
 						:completed-achievements="completedAchievements"
 					/>
 					<hr class="tw-border-tertiary tw-my-4">
@@ -178,10 +178,8 @@ export default {
 
 			return completedBadgesArr;
 		},
-		totalPossibleBadges() {
-			return this.badgesData.reduce((acc, badge) => {
-				return acc + (badge?.contentfulData?.length ?? 0);
-			}, 0);
+		badgesLoading() {
+			return !this.badgesData.length;
 		}
 	},
 	methods: {