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 01/14] 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 02/14] 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 03/14] 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 04/14] 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 05/14] 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 2ba6d397b7017c01401e4efc6344abab3e55f6ff Mon Sep 17 00:00:00 2001
From: Joshua Kiwiet-Pantaleoni <joshuak@kiva.org>
Date: Mon, 25 Nov 2024 12:43:30 -0800
Subject: [PATCH 06/14] fix: link styles for personalized lend menu

---
 src/components/WwwFrame/LendMenu/LendMegaMenu.vue | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/components/WwwFrame/LendMenu/LendMegaMenu.vue b/src/components/WwwFrame/LendMenu/LendMegaMenu.vue
index 665cadd5a0..ae162dd715 100644
--- a/src/components/WwwFrame/LendMenu/LendMegaMenu.vue
+++ b/src/components/WwwFrame/LendMenu/LendMegaMenu.vue
@@ -101,8 +101,7 @@
 											v-if="favorites > 0"
 											:to="{ path: '/lend', query: { lenderFavorite: userId } }"
 											v-kv-track-event="['TopNav','click-Lend-Favorites']"
-											class="lend-menu-link tw-text-primary tw-text-left
-												tw-py-1 tw-inline-block"
+											class="lend-menu-link tw-text-primary tw-text-left tw-py-1 tw-inline-block"
 										>
 											Saved loans
 										</router-link>
@@ -118,8 +117,7 @@
 											v-if="hasSearches"
 											@click="openSection(savedSearchesTitle)"
 											:aria-pressed="isOpenSection(savedSearchesTitle) ? 'true' : 'false'"
-											class="lend-menu-link tw-text-primary tw-text-left tw-py-1 tw-inline-block
-											hover:tw-text-action-highlight hover:tw-underline"
+											class="lend-menu-link tw-text-primary tw-text-left tw-py-1 tw-inline-block"
 										>
 											{{ savedSearchesTitle }}
 										</button>
@@ -134,8 +132,7 @@
 										<a
 											href="/lend/countries-not-lent"
 											v-kv-track-event="['TopNav','click-Lend-Countries_Not_Lent']"
-											class="tw-text-primary tw-text-left hover:tw-text-action-highlight
-												tw-py-1 tw-inline-block"
+											class="lend-menu-link tw-text-primary tw-text-left tw-py-1 tw-inline-block"
 										>
 											Countries I haven't lent to
 										</a>

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 07/14] 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 08/14] 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: {

From 4217368aa7c465d657718efc989e8bb8810dd477 Mon Sep 17 00:00:00 2001
From: Roger Gutierrez <94026278+roger-in-kiva@users.noreply.github.com>
Date: Mon, 25 Nov 2024 16:24:53 -0600
Subject: [PATCH 09/14] feat: bp activity fead code clean up (#5712)

* feat: bp activity fead code clean up

* fix: activities prop removed

* fix: error message removed
---
 .storybook/stories/KvActivityRow.stories.js   |  26 --
 .../stories/KvLoanActivities.stories.js       |  67 -----
 package-lock.json                             |  59 ++--
 package.json                                  |   4 +-
 src/components/BorrowerProfile/LendCta.vue    |  45 +--
 src/components/Kv/KvActivityRow.vue           |  33 ---
 src/components/Kv/KvLoanActivities.vue        | 268 ------------------
 src/pages/BorrowerProfile/BorrowerProfile.vue |  20 --
 8 files changed, 30 insertions(+), 492 deletions(-)
 delete mode 100644 .storybook/stories/KvActivityRow.stories.js
 delete mode 100644 .storybook/stories/KvLoanActivities.stories.js
 delete mode 100644 src/components/Kv/KvActivityRow.vue
 delete mode 100644 src/components/Kv/KvLoanActivities.vue

diff --git a/.storybook/stories/KvActivityRow.stories.js b/.storybook/stories/KvActivityRow.stories.js
deleted file mode 100644
index 992653b6ab..0000000000
--- a/.storybook/stories/KvActivityRow.stories.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import KvActivityRow from '#src/components/Kv/KvActivityRow.vue';
-
-export default {
-	title: 'Kv/KvActivityRow',
-	component: KvActivityRow,
-};
-
-const activity = {
-	lenderName: 'Stephanie',
-	lenderImage: 'https://www.development.kiva.org/img/s100/26e15431f51b540f31cd9f011cc54f31.jpg',
-	text: 'Stephanie lent $25',
-};
-
-const story = (args) => {
-	const template = (_args, { argTypes }) => ({
-		props: Object.keys(argTypes),
-		components: { KvActivityRow },
-		setup() { return args; },
-		template: `<kv-activity-row
-			:activity="activity" />`,
-	})
-	template.args = args;
-	return template;
-};
-
-export const Default = story({ activity });
diff --git a/.storybook/stories/KvLoanActivities.stories.js b/.storybook/stories/KvLoanActivities.stories.js
deleted file mode 100644
index e9a068dee5..0000000000
--- a/.storybook/stories/KvLoanActivities.stories.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import KvLoanActivities from '#src/components/Kv/KvLoanActivities.vue';
-import cookieStoreStoryMixin from '../mixins/cookie-store-story-mixin';
-import activities from '../mock-data/activity-feed-data-mock';
-
-export default {
-	title: 'Kv/KvLoanActivities',
-	component: KvLoanActivities,
-};
-
-const loan = {
-	id: 1998250,
-	distributionModel: 'partner', // direct, partner, both
-	geocode: {
-		city: "Cranston",
-		state: "RI",
-		country: {
-			name: "Malawi",
-			isoCode: "MW"
-		}
-	},
-	image: {
-		hash: "d5ad26cd7acc24317edc1c04c6250074"
-	},
-	name: "Microloan Foundation Malawi",
-	sector: {
-		name: "Services"
-	},
-	whySpecial: "It helps Lending Partners withstand negative economic impacts of the COVID-19 pandemic.",
-	userProperties: {
-		lentTo: null
-	},
-	use: "this Lending Partner provide loans to women in rural Malawi during the COVID-19 crisis.",
-	status: "fundraising",
-	loanAmount: "250000.00",
-	borrowerCount: 1,
-	anonymizationLevel: "none",
-	fullLoanUse: "A loan of $250,000 helps this Lending Partner provide loans to women in rural Malawi during the COVID-19 crisis.",
-	fundraisingPercent: 0.75,
-	unreservedAmount: '600',
-	loanFundraisingInfo: {
-		fundedAmount: "218950.00",
-		reservedAmount: "0.00",
-		isExpiringSoon: false
-	},
-	plannedExpirationDate: "2020-09-10T19:30:13Z",
-	matchingText: "LISC",
-	matchRatio: 2,
-};
-
-const story = (args) => {
-	const template = (_args, { argTypes }) => ({
-		mixins: [cookieStoreStoryMixin()],
-		props: Object.keys(argTypes),
-		components: { KvLoanActivities },
-		setup() { return args; },
-		template: `
-			<div style="max-width: 400px;">
-				<kv-loan-activities
-					:loan="loan"
-					:activities="activities" />
-			</div>`,
-	})
-	template.args = args;
-	return template;
-};
-
-export const Default = story({ loan, activities });
diff --git a/package-lock.json b/package-lock.json
index 3ce97b6f1b..bc5e67383f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,10 +16,10 @@
 				"@godaddy/terminus": "^4.11.0",
 				"@graphql-tools/load": "^7.7.0",
 				"@graphql-tools/url-loader": "^7.17.18",
-				"@kiva/kv-components": "^3.109.1",
+				"@kiva/kv-components": "^3.109.3",
 				"@kiva/kv-shop": "^1.12.65",
 				"@kiva/kv-tokens": "^2.15.0",
-				"@mdi/js": "^7",
+				"@mdi/js": "^7.4.47",
 				"@opentelemetry/api": "^1.7.0",
 				"@opentelemetry/auto-instrumentations-node": "^0.40.2",
 				"@opentelemetry/exporter-metrics-otlp-proto": "^0.46.0",
@@ -5448,12 +5448,12 @@
 			"integrity": "sha512-1lNM7toQpiHWWdKrBmoXPudNLgFscU8rnk4nyBQQhbnlhSLzbjbsCcWWnA+IqXkgOCVysSpI7yEi7fuU6uLMYg=="
 		},
 		"node_modules/@kiva/kv-components": {
-			"version": "3.109.1",
-			"resolved": "https://registry.npmjs.org/@kiva/kv-components/-/kv-components-3.109.1.tgz",
-			"integrity": "sha512-z/Me8Kdp0RrpUdG1ilodSbPQBtczth8XgISC7apSR/tojiHYZREynkhHo9rdPn17SAJxfFATFSocM9bInEdyYw==",
+			"version": "3.109.3",
+			"resolved": "https://registry.npmjs.org/@kiva/kv-components/-/kv-components-3.109.3.tgz",
+			"integrity": "sha512-zFjzCIVAf2mq7hRiu5+zVsnOlxL5cWsDdeC3vNUehgqwTcFUqf1Ij2MQ8IwqLHxeCVluR3UVRwBoDH8RDcm5OA==",
 			"dependencies": {
-				"@kiva/kv-tokens": "^2.15.0",
-				"@mdi/js": "^5.9.55",
+				"@kiva/kv-tokens": "^2.16.0",
+				"@mdi/js": "^7.4.47",
 				"@vueuse/integrations": "^7.6.0",
 				"aria-hidden": "^1.1.3",
 				"change-case": "^4.1.2",
@@ -5477,11 +5477,6 @@
 				}
 			}
 		},
-		"node_modules/@kiva/kv-components/node_modules/@mdi/js": {
-			"version": "5.9.55",
-			"resolved": "https://registry.npmjs.org/@mdi/js/-/js-5.9.55.tgz",
-			"integrity": "sha512-BbeHMgeK2/vjdJIRnx12wvQ6s8xAYfvMmEAVsUx9b+7GiQGQ9Za8jpwp17dMKr9CgKRvemlAM4S7S3QOtEbp4A=="
-		},
 		"node_modules/@kiva/kv-components/node_modules/vue-demi": {
 			"version": "0.14.7",
 			"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz",
@@ -5556,9 +5551,9 @@
 			}
 		},
 		"node_modules/@kiva/kv-tokens": {
-			"version": "2.15.0",
-			"resolved": "https://registry.npmjs.org/@kiva/kv-tokens/-/kv-tokens-2.15.0.tgz",
-			"integrity": "sha512-V+XSN/V/Qs1HPcRtXmyKVywGWf999pe+FvsZfZ1bSn/F9flav9bmC/WbiH+Bj2k6hOW7g8PotwziXt/8tcmLqA==",
+			"version": "2.16.0",
+			"resolved": "https://registry.npmjs.org/@kiva/kv-tokens/-/kv-tokens-2.16.0.tgz",
+			"integrity": "sha512-ebxNuJAPcb83G408a0Rh5Y89ArGTlnjDyjQYumUmbM9awqI2z+eOeAP8a2XLapaE58rg90nJbAyLtIp9U6uV0g==",
 			"dependencies": {
 				"@tailwindcss/typography": "^0.5.1",
 				"tailwindcss": "^3.4.3"
@@ -5620,9 +5615,10 @@
 			}
 		},
 		"node_modules/@mdi/js": {
-			"version": "7.0.96",
-			"resolved": "https://registry.npmjs.org/@mdi/js/-/js-7.0.96.tgz",
-			"integrity": "sha512-lNqhkV3cpPfYb/Avh+vXLFukUTbHbyHoFo4Jdc7Oc9UvURGVhamFIpgOVvEf2bNA78zvjXTZeVWExUTR+DLBfQ=="
+			"version": "7.4.47",
+			"resolved": "https://registry.npmjs.org/@mdi/js/-/js-7.4.47.tgz",
+			"integrity": "sha512-KPnNOtm5i2pMabqZxpUz7iQf+mfrYZyKCZ8QNz85czgEt7cuHcGorWfdzUMWYA0SD+a6Hn4FmJ+YhzzzjkTZrQ==",
+			"license": "Apache-2.0"
 		},
 		"node_modules/@mdx-js/react": {
 			"version": "3.0.1",
@@ -41219,12 +41215,12 @@
 			"integrity": "sha512-1lNM7toQpiHWWdKrBmoXPudNLgFscU8rnk4nyBQQhbnlhSLzbjbsCcWWnA+IqXkgOCVysSpI7yEi7fuU6uLMYg=="
 		},
 		"@kiva/kv-components": {
-			"version": "3.109.1",
-			"resolved": "https://registry.npmjs.org/@kiva/kv-components/-/kv-components-3.109.1.tgz",
-			"integrity": "sha512-z/Me8Kdp0RrpUdG1ilodSbPQBtczth8XgISC7apSR/tojiHYZREynkhHo9rdPn17SAJxfFATFSocM9bInEdyYw==",
+			"version": "3.109.3",
+			"resolved": "https://registry.npmjs.org/@kiva/kv-components/-/kv-components-3.109.3.tgz",
+			"integrity": "sha512-zFjzCIVAf2mq7hRiu5+zVsnOlxL5cWsDdeC3vNUehgqwTcFUqf1Ij2MQ8IwqLHxeCVluR3UVRwBoDH8RDcm5OA==",
 			"requires": {
-				"@kiva/kv-tokens": "^2.15.0",
-				"@mdi/js": "^5.9.55",
+				"@kiva/kv-tokens": "^2.16.0",
+				"@mdi/js": "^7.4.47",
 				"@vueuse/integrations": "^7.6.0",
 				"aria-hidden": "^1.1.3",
 				"change-case": "^4.1.2",
@@ -41239,11 +41235,6 @@
 				"vue-demi": "^0.14.7"
 			},
 			"dependencies": {
-				"@mdi/js": {
-					"version": "5.9.55",
-					"resolved": "https://registry.npmjs.org/@mdi/js/-/js-5.9.55.tgz",
-					"integrity": "sha512-BbeHMgeK2/vjdJIRnx12wvQ6s8xAYfvMmEAVsUx9b+7GiQGQ9Za8jpwp17dMKr9CgKRvemlAM4S7S3QOtEbp4A=="
-				},
 				"vue-demi": {
 					"version": "0.14.7",
 					"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz",
@@ -41275,9 +41266,9 @@
 			}
 		},
 		"@kiva/kv-tokens": {
-			"version": "2.15.0",
-			"resolved": "https://registry.npmjs.org/@kiva/kv-tokens/-/kv-tokens-2.15.0.tgz",
-			"integrity": "sha512-V+XSN/V/Qs1HPcRtXmyKVywGWf999pe+FvsZfZ1bSn/F9flav9bmC/WbiH+Bj2k6hOW7g8PotwziXt/8tcmLqA==",
+			"version": "2.16.0",
+			"resolved": "https://registry.npmjs.org/@kiva/kv-tokens/-/kv-tokens-2.16.0.tgz",
+			"integrity": "sha512-ebxNuJAPcb83G408a0Rh5Y89ArGTlnjDyjQYumUmbM9awqI2z+eOeAP8a2XLapaE58rg90nJbAyLtIp9U6uV0g==",
 			"requires": {
 				"@tailwindcss/typography": "^0.5.1",
 				"tailwindcss": "^3.4.3"
@@ -41325,9 +41316,9 @@
 			}
 		},
 		"@mdi/js": {
-			"version": "7.0.96",
-			"resolved": "https://registry.npmjs.org/@mdi/js/-/js-7.0.96.tgz",
-			"integrity": "sha512-lNqhkV3cpPfYb/Avh+vXLFukUTbHbyHoFo4Jdc7Oc9UvURGVhamFIpgOVvEf2bNA78zvjXTZeVWExUTR+DLBfQ=="
+			"version": "7.4.47",
+			"resolved": "https://registry.npmjs.org/@mdi/js/-/js-7.4.47.tgz",
+			"integrity": "sha512-KPnNOtm5i2pMabqZxpUz7iQf+mfrYZyKCZ8QNz85czgEt7cuHcGorWfdzUMWYA0SD+a6Hn4FmJ+YhzzzjkTZrQ=="
 		},
 		"@mdx-js/react": {
 			"version": "3.0.1",
diff --git a/package.json b/package.json
index 1ddaa40e46..0f96c1c5e5 100644
--- a/package.json
+++ b/package.json
@@ -43,10 +43,10 @@
 		"@godaddy/terminus": "^4.11.0",
 		"@graphql-tools/load": "^7.7.0",
 		"@graphql-tools/url-loader": "^7.17.18",
-		"@kiva/kv-components": "^3.109.1",
+		"@kiva/kv-components": "^3.109.3",
 		"@kiva/kv-shop": "^1.12.65",
 		"@kiva/kv-tokens": "^2.15.0",
-		"@mdi/js": "^7",
+		"@mdi/js": "^7.4.47",
 		"@opentelemetry/api": "^1.7.0",
 		"@opentelemetry/auto-instrumentations-node": "^0.40.2",
 		"@opentelemetry/exporter-metrics-otlp-proto": "^0.46.0",
diff --git a/src/components/BorrowerProfile/LendCta.vue b/src/components/BorrowerProfile/LendCta.vue
index 7cc4dccd4f..7976ae36fa 100644
--- a/src/components/BorrowerProfile/LendCta.vue
+++ b/src/components/BorrowerProfile/LendCta.vue
@@ -256,24 +256,6 @@
 							data-testid="bp-lend-cta-jump-links"
 						/>
 					</div>
-					<div v-if="!!activities && !isSticky">
-						<hr
-							class="tw-block tw-border-tertiary tw-w-full tw-my-2"
-						>
-						<supported-by-lenders
-							:participants="participants"
-						/>
-						<kv-loan-activities
-							class="tw-w-full"
-							:loan="loan"
-							:activities="activities"
-							:basket-items="basketItems"
-							:user-balance="userBalance"
-							:error-msg="errorMsg"
-							:is-adding="isAdding"
-							@add-to-basket="addToBasket"
-						/>
-					</div>
 				</div>
 			</kv-grid>
 
@@ -393,8 +375,6 @@ import LendAmountButton from '#src/components/LoanCards/Buttons/LendAmountButton
 import CompleteLoanWrapper from '#src/components/BorrowerProfile/CompleteLoanWrapper';
 
 import KvIcon from '#src/components/Kv/KvIcon';
-import KvLoanActivities from '#src/components/Kv/KvLoanActivities';
-import SupportedByLenders from '#src/components/BorrowerProfile/SupportedByLenders';
 import KvUiSelect from '#kv-components/KvSelect';
 import KvMaterialIcon from '#kv-components/KvMaterialIcon';
 import KvUiButton from '#kv-components/KvButton';
@@ -413,10 +393,6 @@ export default {
 			type: Boolean,
 			default: false,
 		},
-		activities: {
-			type: Object,
-			default: null,
-		},
 		enableHugeAmount: {
 			type: Boolean,
 			default: false,
@@ -436,8 +412,6 @@ export default {
 		JumpLinks,
 		LoanBookmark,
 		CompleteLoanWrapper,
-		KvLoanActivities,
-		SupportedByLenders,
 	},
 	data() {
 		return {
@@ -474,7 +448,6 @@ export default {
 			inPfp: false,
 			userBalance: undefined,
 			loan: null,
-			errorMsg: '',
 		};
 	},
 	apollo: {
@@ -575,11 +548,7 @@ export default {
 		},
 	},
 	methods: {
-		async addToBasket(lendAmount = 0) {
-			if (lendAmount) {
-				this.$kvTrackEvent('Borrower profile', 'click', 'loan-activities-lend', this.loan?.id, lendAmount);
-			}
-
+		async addToBasket() {
 			if (this.teamData?.id) {
 				const challenge = {
 					teamId: this.teamData.id,
@@ -590,8 +559,6 @@ export default {
 			}
 
 			this.isAdding = true;
-			this.errorMsg = '';
-			this.selectedOption = Number(lendAmount) || this.selectedOption;
 			setLendAmount({
 				amount: isLessThan25(this.unreservedAmount) ? this.unreservedAmount : this.selectedOption,
 				apollo: this.apollo,
@@ -608,11 +575,8 @@ export default {
 					this.$kvTrackEvent('borrower-profile', 'add-to-basket', 'Failed to add loan. Please try again.');
 				}
 				this.isAdding = false;
-				this.errorMsg = e[0]?.extensions?.code === 'reached_anonymous_basket_limit' && e[0]?.message
-					? e[0].message
-					: 'There was a problem adding the loan to your basket';
-
-				this.$showTipMsg(this.errorMsg, 'error');
+				const msg = e[0]?.extensions?.code === 'reached_anonymous_basket_limit' && e[0]?.message;
+				this.$showTipMsg(msg, 'error');
 			});
 		},
 		createWrapperObserver() {
@@ -866,9 +830,6 @@ export default {
 		isLendAmountButton() {
 			return (this.lendButtonVisibility || this.state === 'lent-to') && (isLessThan25(this.unreservedAmount)); // eslint-disable-line max-len
 		},
-		participants() {
-			return this.activities?.lend?.loan?.lendingActions ?? {};
-		}
 	},
 	mounted() {
 		this.createWrapperObserver();
diff --git a/src/components/Kv/KvActivityRow.vue b/src/components/Kv/KvActivityRow.vue
deleted file mode 100644
index 9fd1243c89..0000000000
--- a/src/components/Kv/KvActivityRow.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<template>
-	<div class="tw-flex tw-gap-x-1 tw-items-center">
-		<div>
-			<kv-user-avatar
-				:lender-name="activity.lenderName"
-				:lender-image-url="activity.lenderImage"
-				:is-small="true"
-			/>
-		</div>
-		<div>
-			<!-- eslint-disable vue/no-v-html -->
-			<p v-html="activity.text"></p>
-			<!-- eslint-enable -->
-		</div>
-	</div>
-</template>
-
-<script>
-import KvUserAvatar from '#kv-components/KvUserAvatar';
-
-export default {
-	name: 'KvActivityRow',
-	components: {
-		KvUserAvatar,
-	},
-	props: {
-		activity: {
-			type: Object,
-			required: true,
-		},
-	},
-};
-</script>
diff --git a/src/components/Kv/KvLoanActivities.vue b/src/components/Kv/KvLoanActivities.vue
deleted file mode 100644
index a6e12a29cf..0000000000
--- a/src/components/Kv/KvLoanActivities.vue
+++ /dev/null
@@ -1,268 +0,0 @@
-<template>
-	<div v-if="combinedActivities.length > 0" class="loan-activity">
-		<div class="tw-relative tw-flex tw-flex-col tw-gap-1 lg:tw-px-0">
-			<div class="tw-absolute top-0 tw-h-full tw-w-full loan-activity-overlay"></div>
-			<kv-activity-row
-				v-for="(activity, index) in shortActivity"
-				:key="index"
-				:activity="activity"
-			/>
-		</div>
-		<div class="tw-flex tw-justify-center tw-mt-1 tw-text-small">
-			<button
-				v-kv-track-event="['Borrower profile', 'click', 'see-all-activity']"
-				class="tw-text-action hover:tw-underline"
-				@click="showActivityModal"
-			>
-				See all activity
-			</button>
-		</div>
-		<kv-lightbox
-			:title="modalTitle"
-			:visible="lightboxOpen"
-			@lightbox-closed="closeLightbox"
-		>
-			<div class="tw-overflow-x-hidden tw-px-2 tw-pb-1">
-				<div
-					v-for="activity in combinedActivities"
-					:key="activity.key"
-					class="md:tw-px-8 lg:tw-px-14 tw-mt-4"
-				>
-					<h4 class="tw-text-center tw-text-h4">
-						{{ formattedDate(activity.key) }}
-					</h4>
-					<div class="tw-flex tw-flex-col tw-gap-y-1">
-						<kv-activity-row
-							v-for="(act, index) in activity.data"
-							:key="index"
-							:activity="act"
-						/>
-					</div>
-				</div>
-			</div>
-			<div>
-				<p v-if="errorMsg" class="tw-mt-1 tw-text-small tw-text-danger">
-					{{ errorMsg }}
-				</p>
-				<div class="tw-flex tw-justify-end tw-mt-4 tw-pb-2.5 md:tw-pb-4">
-					<kv-lend-cta
-						:loan="loan"
-						:is-loading="false"
-						:kv-track-function="$kvTrackEvent"
-						:get-cookie="getCookie"
-						:set-cookie="setCookie"
-						:user-balance="userBalance"
-						:basket-items="basketItems"
-						:route="$route"
-						:is-adding="isAdding"
-						@add-to-basket="addToBasket"
-					/>
-				</div>
-			</div>
-		</kv-lightbox>
-	</div>
-</template>
-
-<script>
-import { format } from 'date-fns';
-import KvLightbox from '#kv-components/KvLightbox';
-import KvLendCta from '#kv-components/KvLendCta';
-import KvActivityRow from './KvActivityRow';
-
-export default {
-	name: 'KvLoanActivities',
-	inject: ['cookieStore'],
-	components: {
-		KvActivityRow,
-		KvLightbox,
-		KvLendCta
-	},
-	emits: ['add-to-basket'],
-	props: {
-		/**
-		 * loan object coming from parent component
-		 */
-		loan: {
-			type: Object,
-			default: () => ({}),
-		},
-		/**
-		 * loan activities coming from parent component
-		 */
-		activities: {
-			type: Object,
-			default: () => ({}),
-		},
-		/**
-		 * isAdding flag coming from parent add to basket method
-		 */
-		isAdding: {
-			type: Boolean,
-			default: false
-		},
-		/**
-		 * basketItems array coming from parent component
-		 */
-		basketItems: {
-			type: Array,
-			default: () => ([]),
-		},
-		/**
-		 * userBalance string coming from parent component
-		 */
-		userBalance: {
-			type: String,
-			default: undefined
-		},
-		/**
-		 * errorMsg string coming from parent add to basket method
-		 */
-		errorMsg: {
-			type: String,
-			default: undefined
-		},
-	},
-	data() {
-		return {
-			lightboxOpen: false,
-			commentsData: this.activities?.lend?.loan?.comments?.values || [],
-			lendingActionsData: this.activities?.lend?.loan?.lendingActions?.values || [],
-		};
-	},
-	computed: {
-		combinedActivities() {
-			const activities = [];
-
-			this.lendingActionsData.forEach(action => {
-				const actionDate = new Date(action?.latestSharePurchaseDate).toDateString();
-				if (!activities.some(activity => activity.key === actionDate)) {
-					activities.push({
-						key: actionDate,
-						data: [],
-					});
-				}
-				if (action?.lender.name) {
-					const dataObject = activities.find(activity => activity.key === actionDate);
-					dataObject?.data.push({
-						lenderName: action.lender.name,
-						lenderImage: action.lender?.image?.url,
-						text: `${action.lender.name} lent`,
-						date: action.latestSharePurchaseDate,
-					});
-				}
-			});
-
-			this.commentsData.forEach(comment => {
-				const commentDate = new Date(comment?.date).toDateString();
-				if (!activities.some(activity => activity.key === commentDate)) {
-					activities.push({
-						key: commentDate,
-						data: [],
-					});
-				}
-				if (comment?.authorName) {
-					const dataObject = activities.find(activity => activity.key === commentDate);
-					dataObject?.data.push({
-						lenderName: comment.authorName,
-						lenderImage: comment.authorLendingAction?.lender?.image?.url,
-						text: comment.body
-							? `${comment.authorName} left comment <span class="tw-italic">"${comment.body}"</span>`
-							: '',
-						date: comment.date,
-					});
-				}
-			});
-
-			// Sort activities by day
-			const sortedActivities = activities.sort((a, b) => new Date(b.key).getTime() - new Date(a.key).getTime());
-
-			// Sort combined lending and comment activities within each day
-			sortedActivities.forEach(d => d.data.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())); // eslint-disable-line max-len
-
-			return sortedActivities;
-		},
-		shortActivity() {
-			const activities = [];
-			this.combinedActivities.forEach(activity => {
-				activity.data.forEach(element => {
-					activities.push(element);
-				});
-			});
-
-			return activities.slice(0, 3);
-		},
-		modalTitle() {
-			return `Activity for ${this.loan?.name}`;
-		},
-	},
-	methods: {
-		getCookie(name) {
-			return this.cookieStore.get(name);
-		},
-		setCookie(name, value, options) {
-			return this.cookieStore.set(name, value, options);
-		},
-		addToBasket(lendAmount) {
-			this.$emit('add-to-basket', lendAmount);
-		},
-		formattedDate(date) {
-			const dateObj = new Date(date);
-			return format(dateObj, 'MMM d, yyyy');
-		},
-		showActivityModal() {
-			this.lightboxOpen = true;
-		},
-		closeLightbox() {
-			this.lightboxOpen = false;
-		},
-	},
-};
-</script>
-
-<style scoped lang="postcss">
-.loan-activity-overlay {
-	background: linear-gradient(0deg, #f5f5f5 0%, rgb(255 255 255 / 0%) 100%);
-}
-
-@screen lg {
-	.loan-activity-overlay {
-		background: linear-gradient(0deg, #fff 0%, rgb(245 245 245 / 0%) 60%);
-	}
-}
-
-.loan-activity :deep(#kvLightboxBody) {
-	@apply tw-flex tw-flex-col tw-px-0 tw-pb-0;
-}
-
-.loan-activity :deep(#kvLightboxBody) div {
-	box-shadow: none;
-}
-
-.loan-activity :deep(#kvLightboxBody) > div:first-child {
-	@apply tw-px-4;
-}
-
-.loan-activity :deep([role=dialog]) {
-	min-width: 840px;
-	max-width: 840px !important;
-
-	@media (width <= calc(840px + 2rem)) {
-		min-width: 100%;
-		max-width: 100% !important;
-	}
-}
-
-.loan-activity :deep(#kvLightboxBody) > div:nth-child(2) {
-	@apply tw-px-4;
-
-	box-shadow: var(--kiva-negative-box-shadow);
-}
-
-.loan-activity :deep(div) > div > div > div > div:first-child {
-	box-shadow: var(--kiva-box-shadow);
-}
-
-.loan-activity :deep(div) > div > div > div > div:first-child > div {
-	box-shadow: none;
-}
-</style>
diff --git a/src/pages/BorrowerProfile/BorrowerProfile.vue b/src/pages/BorrowerProfile/BorrowerProfile.vue
index 41bced5294..43319b9231 100644
--- a/src/pages/BorrowerProfile/BorrowerProfile.vue
+++ b/src/pages/BorrowerProfile/BorrowerProfile.vue
@@ -46,7 +46,6 @@
 						:loan-id="loanId"
 						:enable-five-dollars-notes="enableFiveDollarsNotes"
 						:enable-huge-amount="enableHugeLendAmount"
-						:activities="activities"
 						:team-data="teamData"
 					>
 						<template #sharebutton>
@@ -179,7 +178,6 @@ import JournalUpdates from '#src/components/BorrowerProfile/JournalUpdates';
 import { fireHotJarEvent } from '#src/util/hotJarUtils';
 import _throttle from 'lodash/throttle';
 import BorrowerEducationPlacement from '#src/components/BorrowerProfile/BorrowerEducationPlacement';
-import loanActivitiesQuery from '#src/graphql/query/loanActivities.graphql';
 import experimentVersionFragment from '#src/graphql/fragments/experimentVersion.graphql';
 import lenderPublicProfileQuery from '#src/graphql/query/lenderPublicProfile.graphql';
 import TeamInfoFromId from '#src/graphql/query/teamInfoFromId.graphql';
@@ -190,7 +188,6 @@ const getPublicId = route => route?.query?.utm_content ?? route?.query?.name ??
 
 const SHARE_LANGUAGE_EXP = 'share_language_bp';
 const EDUCATION_PLACEMENT_EXP = 'education_placement_bp';
-const ACTIVITY_FEED_EXP = 'activity_feed_bp';
 const CHALLENGE_HEADER_EXP = 'filters_challenge_header';
 
 const preFetchQuery = gql`
@@ -453,7 +450,6 @@ export default {
 				'Asia',
 				'Europe'
 			],
-			activities: null,
 			enableChallengeHeader: false,
 			teamData: {},
 			shareLender: undefined,
@@ -611,22 +607,6 @@ export default {
 			}
 		}
 
-		const activityFeedExpData = trackExperimentVersion(
-			this.apollo,
-			this.$kvTrackEvent,
-			'borrower-profile',
-			ACTIVITY_FEED_EXP,
-			'EXP-ACK-1037-MAR2024',
-		);
-		if (activityFeedExpData?.version === 'b') {
-			const response = await this.apollo.query({
-				query: loanActivitiesQuery,
-				variables: { loanId: this.loanId }
-			});
-
-			this.activities = response?.data ?? null;
-		}
-
 		const challengeHeaderExpData = this.apollo.readFragment({
 			id: `Experiment:${CHALLENGE_HEADER_EXP}`,
 			fragment: experimentVersionFragment,

From 55f568af13d557ff5bb7961f1e748be8fe3948cb Mon Sep 17 00:00:00 2001
From: Casey Dyer <dyersituations@gmail.com>
Date: Mon, 25 Nov 2024 17:33:13 -0800
Subject: [PATCH 10/14] fix: add missing stories for MyKiva badge modal

---
 .../mock-data/badge-journey-data-mock.js      | 20 +++--
 .storybook/stories/BadgeModal.stories.js      | 75 +++++++++++++++++--
 2 files changed, 82 insertions(+), 13 deletions(-)

diff --git a/.storybook/mock-data/badge-journey-data-mock.js b/.storybook/mock-data/badge-journey-data-mock.js
index f6e6b559dd..a6f0e4d17e 100644
--- a/.storybook/mock-data/badge-journey-data-mock.js
+++ b/.storybook/mock-data/badge-journey-data-mock.js
@@ -7,7 +7,8 @@ export const badgeWomensEquality = {
 			"level": 1,
 			"levelName": "1",
 			"challengeName": "Women's equality",
-			"imageUrl": "//images.ctfassets.net/j0p9a6ql0rn7/3dAEh0zYSkqK5Up5q8Flv8/70d21f8db5f93b20be1581ef333dc60e/Women_10.svg"
+			"imageUrl": "//images.ctfassets.net/j0p9a6ql0rn7/3dAEh0zYSkqK5Up5q8Flv8/70d21f8db5f93b20be1581ef333dc60e/Women_10.svg",
+			"shareFact": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt."
 		},
 		{
 			"id": "womens-equality",
@@ -56,6 +57,7 @@ export const badgeWomensEquality = {
 		"__typename": "TieredLendingAchievement",
 		"id": "womens-equality",
 		"totalProgressToAchievement": 0,
+		"matchingLoans": { "filters": {} },
 		"tiers": [
 			{
 				"__typename": "Tier",
@@ -120,7 +122,8 @@ export const badgeUsEconomicEquality = {
 			"level": 1,
 			"levelName": "1",
 			"challengeName": "U.S. economic equality",
-			"imageUrl": "//images.ctfassets.net/j0p9a6ql0rn7/3C3ddaga4hEXBlb9WxsdlQ/0155bb0e9a32be6b00071afa4769b10c/US_Business_10.svg"
+			"imageUrl": "//images.ctfassets.net/j0p9a6ql0rn7/3C3ddaga4hEXBlb9WxsdlQ/0155bb0e9a32be6b00071afa4769b10c/US_Business_10.svg",
+			"shareFact": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt."
 		},
 		{
 			"id": "us-economic-equality",
@@ -169,6 +172,7 @@ export const badgeUsEconomicEquality = {
 		"__typename": "TieredLendingAchievement",
 		"id": "us-economic-equality",
 		"totalProgressToAchievement": 0,
+		"matchingLoans": { "filters": {} },
 		"tiers": [
 			{
 				"__typename": "Tier",
@@ -234,7 +238,8 @@ export const badgeClimateAction = {
 			"level": 1,
 			"levelName": "1",
 			"challengeName": "Climate action",
-			"imageUrl": "//images.ctfassets.net/j0p9a6ql0rn7/3YklKNLbiA4kAcOgk5ouaw/14b41006455dfd756f141e0217bb8e9c/Climate_10.svg"
+			"imageUrl": "//images.ctfassets.net/j0p9a6ql0rn7/3YklKNLbiA4kAcOgk5ouaw/14b41006455dfd756f141e0217bb8e9c/Climate_10.svg",
+			"shareFact": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt."
 		},
 		{
 			"id": "climate-action",
@@ -283,6 +288,7 @@ export const badgeClimateAction = {
 		"__typename": "TieredLendingAchievement",
 		"id": "climate-action",
 		"totalProgressToAchievement": 0,
+		"matchingLoans": { "filters": {} },
 		"tiers": [
 			{
 				"__typename": "Tier",
@@ -347,7 +353,8 @@ export const badgeRefugeeEquality = {
 			"level": 1,
 			"levelName": "1",
 			"challengeName": "Refugee equality",
-			"imageUrl": "//images.ctfassets.net/j0p9a6ql0rn7/1SEhQMUbYUqZopjP2o67XK/c9b1f51837d87905d2a71578c0d6c434/Refugees_10.svg"
+			"imageUrl": "//images.ctfassets.net/j0p9a6ql0rn7/1SEhQMUbYUqZopjP2o67XK/c9b1f51837d87905d2a71578c0d6c434/Refugees_10.svg",
+			"shareFact": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt."
 		},
 		{
 			"id": "refugee-equality",
@@ -396,6 +403,7 @@ export const badgeRefugeeEquality = {
 		"__typename": "TieredLendingAchievement",
 		"id": "refugee-equality",
 		"totalProgressToAchievement": 0,
+		"matchingLoans": { "filters": {} },
 		"tiers": [
 			{
 				"__typename": "Tier",
@@ -460,7 +468,8 @@ export const badgeBasicNeeds = {
 			"level": 1,
 			"levelName": "1",
 			"challengeName": "Basic needs",
-			"imageUrl": "//images.ctfassets.net/j0p9a6ql0rn7/694uSymh8om0MxbiCjWZxl/b55c8cb3f3743efdd56b56beea8dfb42/Basic_Needs_10.svg"
+			"imageUrl": "//images.ctfassets.net/j0p9a6ql0rn7/694uSymh8om0MxbiCjWZxl/b55c8cb3f3743efdd56b56beea8dfb42/Basic_Needs_10.svg",
+			"shareFact": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt."
 		},
 		{
 			"id": "basic-needs",
@@ -509,6 +518,7 @@ export const badgeBasicNeeds = {
 		"__typename": "TieredLendingAchievement",
 		"id": "basic-needs",
 		"totalProgressToAchievement": 0,
+		"matchingLoans": { "filters": {} },
 		"tiers": [
 			{
 				"__typename": "Tier",
diff --git a/.storybook/stories/BadgeModal.stories.js b/.storybook/stories/BadgeModal.stories.js
index aea25aaca8..f8b1c5ef3c 100644
--- a/.storybook/stories/BadgeModal.stories.js
+++ b/.storybook/stories/BadgeModal.stories.js
@@ -7,33 +7,92 @@ import {
 	badgeBasicNeeds,
 	badgeFirstTierComplete
 } from '../mock-data/badge-journey-data-mock';
+import { STATE_JOURNEY, STATE_EARNED, STATE_IN_PROGRESS } from '#src/composables/useBadgeModal';
+import apolloStoryMixin from '../mixins/apollo-story-mixin';
+import cookieStoreStoryMixin from '../mixins/cookie-store-story-mixin';
+import { mockLoansArray } from '../utils';
+
+const mockLoans = mockLoansArray(3);
 
 export default {
 	title: 'MyKiva/Badge Modal',
 	component: BadgeModal,
 };
 
+const queryResult = {
+	data: {
+		lend: {
+			loan: mockLoans[0]
+		},
+		fundraisingLoans: {
+			values: [
+				{
+					id: 2413188
+				},
+				{
+					id: 2411288
+				},
+				{
+					id: 2406410
+				},
+				{
+					id: 2406459
+				},
+				{
+					id: 2406956
+				},
+				{
+					id: 2408858
+				}
+			]
+		},
+	}
+}
+
 const story = (args) => {
 	const template = (_args, { argTypes }) => ({
 		props: Object.keys(argTypes),
 		components: { BadgeModal },
-		setup() { return args; },
+		mixins: [apolloStoryMixin({ queryResult }), cookieStoreStoryMixin()],
+		setup() { return { args }; },
 		template: `
-			<badge-modal :show="true" :badge="badge" />
+			<badge-modal :show="true" v-bind="args" />
 		`,
 	});
 	template.args = args;
 	return template;
 };
 
-export const WomensEquality = story({ badge: badgeWomensEquality });
+const tier = { level: 1 };
+
+export const JourneyWomensEquality = story({ badge: badgeWomensEquality, state: STATE_JOURNEY });
+
+export const JourneyUsEconomicEquality = story({ badge: badgeUsEconomicEquality, state: STATE_JOURNEY });
+
+export const JourneyClimateAction = story({ badge: badgeClimateAction, state: STATE_JOURNEY });
+
+export const JourneyRefugeeEquality = story({ badge: badgeRefugeeEquality, state: STATE_JOURNEY });
+
+export const JourneyBasicNeeds = story({ badge: badgeBasicNeeds, state: STATE_JOURNEY });
+
+export const JourneyFirstTierComplete = story({ badge: badgeFirstTierComplete, state: STATE_JOURNEY });
+
+export const InProgressWomensEquality = story({ badge: badgeWomensEquality, tier, state: STATE_IN_PROGRESS });
+
+export const InProgressUsEconomicEquality = story({ badge: badgeUsEconomicEquality, tier, state: STATE_IN_PROGRESS });
+
+export const InProgressClimateAction = story({ badge: badgeClimateAction, tier, state: STATE_IN_PROGRESS });
+
+export const InProgressRefugeeEquality = story({ badge: badgeRefugeeEquality, tier, state: STATE_IN_PROGRESS });
+
+export const InProgressBasicNeeds = story({ badge: badgeBasicNeeds, tier, state: STATE_IN_PROGRESS });
 
-export const UsEconomicEquality = story({ badge: badgeUsEconomicEquality });
+export const EarnedWomensEquality = story({ badge: badgeWomensEquality, tier, state: STATE_EARNED });
 
-export const ClimateAction = story({ badge: badgeClimateAction });
+export const EarnedUsEconomicEquality = story({ badge: badgeUsEconomicEquality, tier, state: STATE_EARNED });
 
-export const RefugeeEquality = story({ badge: badgeRefugeeEquality });
+export const EarnedClimateAction = story({ badge: badgeClimateAction, tier, state: STATE_EARNED });
 
-export const BasicNeeds = story({ badge: badgeBasicNeeds });
+export const EarnedRefugeeEquality = story({ badge: badgeRefugeeEquality, tier, state: STATE_EARNED });
 
-export const FirstTierComplete = story({ badge: badgeFirstTierComplete });
+export const EarnedBasicNeeds = story({ badge: badgeBasicNeeds, tier, state: STATE_EARNED });

From 5a1041011920c12c3bdd95de40ba5762814abf7a Mon Sep 17 00:00:00 2001
From: Casey Dyer <dyersituations@gmail.com>
Date: Tue, 26 Nov 2024 11:34:29 -0800
Subject: [PATCH 11/14] feat: hide badge tile when all tiered badges are
 completed

---
 src/pages/Portfolio/MyKiva/MyKivaPage.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/pages/Portfolio/MyKiva/MyKivaPage.vue b/src/pages/Portfolio/MyKiva/MyKivaPage.vue
index ca391d08a4..15930bc2ae 100644
--- a/src/pages/Portfolio/MyKiva/MyKivaPage.vue
+++ b/src/pages/Portfolio/MyKiva/MyKivaPage.vue
@@ -17,7 +17,7 @@
 			:is-loading="isLoading"
 		/>
 		<MyKivaContainer>
-			<section class="tw-pt-2">
+			<section v-if="!allBadgesCompleted" class="tw-pt-2">
 				<BadgeTile
 					:user-info="userInfo"
 					:badges-data="badgeData"
@@ -167,6 +167,7 @@ import {
 	watch,
 	nextTick,
 } from 'vue';
+import { defaultBadges } from '#src/util/achievementUtils';
 
 const MY_KIVA_EXP_KEY = 'my_kiva_page';
 
@@ -204,6 +205,11 @@ const isLoading = computed(() => !lender.value);
 const isAchievementDataLoaded = computed(() => !!badgeAchievementData.value);
 const userBalance = computed(() => userInfo.value?.userAccount?.balance ?? '');
 
+const allBadgesCompleted = computed(() => {
+	const tieredBadges = badgeData.value?.filter(b => defaultBadges.includes(b?.id));
+	return tieredBadges.every(b => !b.achievementData?.tiers?.find(t => !t?.completedDate));
+});
+
 const handleShowNavigation = () => {
 	showNavigation.value = true;
 	$kvTrackEvent('SecondaryNav top level', 'click', 'MyKiva-Settings-icon');

From 20ad09cb38536c5e7d690b23874cccf221ad0915 Mon Sep 17 00:00:00 2001
From: Casey Dyer <dyersituations@gmail.com>
Date: Tue, 26 Nov 2024 11:38:19 -0800
Subject: [PATCH 12/14] fix: add one more optional chaining

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

diff --git a/src/pages/Portfolio/MyKiva/MyKivaPage.vue b/src/pages/Portfolio/MyKiva/MyKivaPage.vue
index 15930bc2ae..899885fccc 100644
--- a/src/pages/Portfolio/MyKiva/MyKivaPage.vue
+++ b/src/pages/Portfolio/MyKiva/MyKivaPage.vue
@@ -207,7 +207,7 @@ const userBalance = computed(() => userInfo.value?.userAccount?.balance ?? '');
 
 const allBadgesCompleted = computed(() => {
 	const tieredBadges = badgeData.value?.filter(b => defaultBadges.includes(b?.id));
-	return tieredBadges.every(b => !b.achievementData?.tiers?.find(t => !t?.completedDate));
+	return tieredBadges?.every(b => !b.achievementData?.tiers?.find(t => !t?.completedDate));
 });
 
 const handleShowNavigation = () => {

From 124c6d037e30cd3270471d029b7c611a2bca6232 Mon Sep 17 00:00:00 2001
From: Casey Dyer <dyersituations@gmail.com>
Date: Tue, 26 Nov 2024 17:01:37 -0800
Subject: [PATCH 13/14] feat: add more to badge title caption

---
 src/components/MyKiva/BadgeTile.vue | 33 +++++++++++++++++++++++++++--
 1 file changed, 31 insertions(+), 2 deletions(-)

diff --git a/src/components/MyKiva/BadgeTile.vue b/src/components/MyKiva/BadgeTile.vue
index 3ccb3266f2..3f91675f7e 100644
--- a/src/components/MyKiva/BadgeTile.vue
+++ b/src/components/MyKiva/BadgeTile.vue
@@ -55,7 +55,13 @@ import { mdiArrowRight } from '@mdi/js';
 import { defaultBadges } from '#src/util/achievementUtils';
 import { indexIn } from '#src/util/comparators';
 import { BADGE_IN_PROGRESS, BADGE_SHAPE_OBLONG, getBadgeShape } from '#src/composables/useBadgeModal';
-import useBadgeData from '#src/composables/useBadgeData';
+import useBadgeData, {
+	ID_WOMENS_EQUALITY,
+	ID_US_ECONOMIC_EQUALITY,
+	ID_CLIMATE_ACTION,
+	ID_REFUGEE_EQUALITY,
+	ID_BASIC_NEEDS,
+} from '#src/composables/useBadgeData';
 import BadgeContainer from '#src/components/MyKiva/BadgeContainer';
 import KvMaterialIcon from '#kv-components/KvMaterialIcon';
 import KvLoadingPlaceholder from '#kv-components/KvLoadingPlaceholder';
@@ -144,7 +150,30 @@ const tierCaption = computed(() => {
 	const progress = selectedTier?.value?.totalProgressToAchievement ?? '';
 	const target = selectedTier?.value?.tier?.target ?? '';
 
-	return `${progress} of ${target} loans`;
+	let subtitle;
+
+	switch (selectedTier?.value?.badge?.id) {
+		case ID_WOMENS_EQUALITY:
+			subtitle = 'to women';
+			break;
+		case ID_US_ECONOMIC_EQUALITY:
+			subtitle = 'to U.S. entrepreneurs';
+			break;
+		case ID_CLIMATE_ACTION:
+			subtitle = 'to climate action';
+			break;
+		case ID_REFUGEE_EQUALITY:
+			subtitle = 'to refugees';
+			break;
+		case ID_BASIC_NEEDS:
+			subtitle = 'for fundamental needs';
+			break;
+		default:
+			subtitle = '';
+			break;
+	}
+
+	return `${progress} of ${target} loans${subtitle ? ` ${subtitle}` : ''}`;
 });
 
 const badgeClicked = () => {

From 2d5dacfccf3f16abecec344185e63e709c1799c4 Mon Sep 17 00:00:00 2001
From: Casey Dyer <dyersituations@gmail.com>
Date: Tue, 26 Nov 2024 17:46:47 -0800
Subject: [PATCH 14/14] fix: revert code for experiment ACK-469

---
 src/pages/BorrowerProfile/BorrowerProfile.vue | 51 ++-----------------
 1 file changed, 4 insertions(+), 47 deletions(-)

diff --git a/src/pages/BorrowerProfile/BorrowerProfile.vue b/src/pages/BorrowerProfile/BorrowerProfile.vue
index 43319b9231..f5322022de 100644
--- a/src/pages/BorrowerProfile/BorrowerProfile.vue
+++ b/src/pages/BorrowerProfile/BorrowerProfile.vue
@@ -186,7 +186,6 @@ import KvLoadingPlaceholder from '#kv-components/KvLoadingPlaceholder';
 
 const getPublicId = route => route?.query?.utm_content ?? route?.query?.name ?? route?.query?.lender ?? '';
 
-const SHARE_LANGUAGE_EXP = 'share_language_bp';
 const EDUCATION_PLACEMENT_EXP = 'education_placement_bp';
 const CHALLENGE_HEADER_EXP = 'filters_challenge_header';
 
@@ -199,12 +198,6 @@ const preFetchQuery = gql`
 		$imgDefaultSize: String = "w480h360",
 		$imgRetinaSize: String = "w960h720"
 	) {
-		general {
-			uiExperimentSetting(key: "share_language_bp") {
-				key
-				value
-			}
-		}
 		lend {
 			loan(id: $loanId) {
 				id
@@ -215,7 +208,6 @@ const preFetchQuery = gql`
 				}
 				geocode {
 					city
-					state
 					country {
 						id
 						name
@@ -434,9 +426,6 @@ export default {
 			partnerName: '',
 			partnerCountry: '',
 			isoCode: '',
-			shareLanguageExpVersion: 'a',
-			city: '',
-			state: '',
 			isMobile: false,
 			isLoading: true,
 			regionBelongsToExp: false,
@@ -508,7 +497,6 @@ export default {
 					}
 
 					return Promise.all([
-						client.query({ query: experimentAssignmentQuery, variables: { id: SHARE_LANGUAGE_EXP } }),
 						client.query({ query: experimentAssignmentQuery, variables: { id: FIVE_DOLLARS_NOTES_EXP } }),
 						client.query({ query: experimentAssignmentQuery, variables: { id: EDUCATION_PLACEMENT_EXP } }),
 					]);
@@ -556,8 +544,6 @@ export default {
 			this.hasThreeDaysOrLessLeft = this.diffInDays <= 3;
 
 			this.isoCode = loan?.geocode?.country?.isoCode ?? '';
-			this.city = loan?.geocode?.city ?? '';
-			this.state = loan?.geocode?.state ?? '';
 			this.loanRegion = loan?.geocode?.country?.region ?? '';
 			this.regionBelongsToExp = this.expRegionList.includes(this.loanRegion);
 		},
@@ -582,18 +568,6 @@ export default {
 		this.partnerCountry = loan?.partner?.countries[0]?.name ?? '';
 		this.lender = data?.my?.userAccount ?? {};
 
-		// ACK-469 Experiment Tracking for generating the scle in utm_campaign
-		const { version } = trackExperimentVersion(
-			this.apollo,
-			this.$kvTrackEvent,
-			'borrower-profile',
-			SHARE_LANGUAGE_EXP,
-			'EXP-ACK-469-Apr2023',
-		);
-		if (version) {
-			this.shareLanguageExpVersion = version;
-		}
-
 		if (this.regionBelongsToExp) {
 			const educationExpData = trackExperimentVersion(
 				this.apollo,
@@ -657,8 +631,7 @@ export default {
 	},
 	computed: {
 		shareCampaign() {
-			// eslint-disable-next-line max-len
-			return this.inPfp ? `social_share_bp_pfp_scle_${this.shareLanguageExpVersion}` : `social_share_bp_scle_${this.shareLanguageExpVersion}`;
+			return this.inPfp ? 'social_share_bp_pfp' : 'social_share_bp';
 		},
 		loanId() {
 			return Number(this.$route.params.id || 0);
@@ -696,33 +669,17 @@ export default {
 			if (this.anonymizationLevel === 'full') {
 				return 'Can you help support this loan?';
 			}
-			if (this.shareLanguageExpVersion === 'a') {
-				// control scle
-				/** if inviterName is blank or share query param (used for sharing your own loan)
-				 * is set to true, then we don't want to use the inviter name in the share title
-				 */
-				if (this.inviterName === '' || this.$route.query.share === 'true') {
-					return `Can you help support ${this.name}?`;
-				}
-				return `Can you help ${this.inviterName} support ${this.name}?`;
-			}
-			// variant scle
 			/** if inviterName is blank or share query param (used for sharing your own loan)
 			 * is set to true, then we don't want to use the inviter name in the share title
 			 */
 			if (this.inviterName === '' || this.$route.query.share === 'true') {
-				return `Can you help support ${this.name} in ${this.city}${this.state ? `, ${this.state}` : ''}?`;
+				return `Can you help support ${this.name}?`;
 			}
-			// eslint-disable-next-line max-len
-			return `Can you help ${this.inviterName} support ${this.name} in ${this.city}${this.state ? `, ${this.state}` : ''}?`;
+			return `Can you help ${this.inviterName} support ${this.name}?`;
 		},
 		shareDescription() {
-			if (this.anonymizationLevel === 'full' || this.shareLanguageExpVersion === 'a') {
-				// eslint-disable-next-line max-len
-				return 'Kiva is a loan, not a donation. With Kiva you can lend as little as $25 and make a big change in someone\'s life.';
-			}
 			// eslint-disable-next-line max-len
-			return `Kiva is a loan, not a donation. With Kiva you can lend as little as $25 and make a big change in ${this.city}${this.state ? `, ${this.state}` : ''}`;
+			return 'Kiva is a loan, not a donation. With Kiva you can lend as little as $25 and make a big change in someone\'s life.';
 		},
 		showFundraising() {
 			return this.amountLeft && this.status === 'fundraising';