From e2aaadb2311b1b12da6f9e486f4e9ac5304d9ae7 Mon Sep 17 00:00:00 2001
From: Casey Dyer <dyersituations@gmail.com>
Date: Tue, 29 Oct 2024 14:50:00 -0700
Subject: [PATCH 1/3] fix: badge closed event wasn't required and closed event
 gets called twice by lightbox

---
 src/components/MyKiva/BadgeModal.vue | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/src/components/MyKiva/BadgeModal.vue b/src/components/MyKiva/BadgeModal.vue
index 11cf985ad4..389e48a7f1 100644
--- a/src/components/MyKiva/BadgeModal.vue
+++ b/src/components/MyKiva/BadgeModal.vue
@@ -13,19 +13,13 @@
 
 <script setup>
 import KvLightbox from '@kiva/kv-components/vue/KvLightbox';
-import {
-	defineProps,
-	inject,
-	defineAsyncComponent,
-	computed,
-} from 'vue';
+import { defineProps, defineAsyncComponent, computed } from 'vue';
 import { STATE_JOURNEY, STATE_EARNED, STATE_IN_PROGRESS } from '#src/composables/useBadgeModal';
 
 const BadgeModalContentJourney = defineAsyncComponent(() => import('#src/components/MyKiva/BadgeModalContentJourney'));
 const BadgeInProgress = defineAsyncComponent(() => import('#src/components/MyKiva/BadgeInProgress'));
 const BadgeCompleted = defineAsyncComponent(() => import('#src/components/MyKiva/BadgeCompleted'));
 
-const $kvTrackEvent = inject('$kvTrackEvent');
 const emit = defineEmits(['badge-modal-closed', 'badge-level-clicked']);
 
 const props = defineProps({
@@ -53,7 +47,6 @@ const props = defineProps({
 
 const closeLightbox = () => {
 	emit('badge-modal-closed');
-	$kvTrackEvent('portfolio', 'click', 'badge-modal-closed');
 };
 
 const handleBadgeLevelClicked = e => {

From 9e63b57a9f3af96aab4f3d319973048ab640efcd Mon Sep 17 00:00:00 2001
From: Casey Dyer <dyersituations@gmail.com>
Date: Tue, 29 Oct 2024 16:06:36 -0700
Subject: [PATCH 2/3] fix: resolve issues with badge modal click analytics

---
 .../MyKiva/BadgeModalContentJourney.vue       | 30 +++++--------------
 src/pages/Portfolio/MyKiva/MyKivaPage.vue     | 18 ++++++++---
 2 files changed, 22 insertions(+), 26 deletions(-)

diff --git a/src/components/MyKiva/BadgeModalContentJourney.vue b/src/components/MyKiva/BadgeModalContentJourney.vue
index fb7e06977b..0bdc193a14 100644
--- a/src/components/MyKiva/BadgeModalContentJourney.vue
+++ b/src/components/MyKiva/BadgeModalContentJourney.vue
@@ -22,23 +22,14 @@
 					'tw-self-start': isMobile && position === 0,
 					'tw-self-center': isMobile && position === 1,
 					'tw-self-end': isMobile && position === 2,
-					'tw-cursor-pointer': !!badge.achievementData.tiers[index].completedDate,
 				}"
 				:style="{
 					marginTop: `${isMobile || position == 0 ? 0 : (position === 1 ? 100 : 200)}px`,
 					zIndex: positions.length - index,
 					width: '133px',
 				}"
-				v-kv-track-event="[
-					'portfolio',
-					'click',
-					'Already earned badge modal',
-					badge.challengeName,
-					index + 1
-				]"
-				@click="event => handleBadgeClick(event, index)"
 			>
-				<div class="tw-relative tw-text-center tw-bg-white">
+				<div class="tw-relative tw-text-center tw-bg-white tw-cursor-pointer" @click="handleBadgeClick(index)">
 					<BadgeContainer :status="getBadgeStatus(index)" :shape="getBadgeShape()">
 						<component
 							v-if="index > 0"
@@ -74,13 +65,7 @@
 							'tw-invisible': index !== positions.length - 1 && !showEarnBadge(index),
 							'tw-hidden': (!isMobile || index === positions.length - 1) && !showEarnBadge(index),
 						}"
-						v-kv-track-event="[
-							'portfolio',
-							'click',
-							'Earn a badge - within badge journey map modal',
-							badge.challengeName,
-							index + 1
-						]"
+						@click="handleBadgeClick(index)"
 					>
 						Earn badge
 					</KvButton>
@@ -151,11 +136,12 @@ const getBadgeStatus = index => {
 	return BADGE_LOCKED;
 };
 
-const handleBadgeClick = (event, index) => {
-	// Prevent analytics being logged when non-completed tier is clicked
-	if (!props.badge.achievementData.tiers[index]?.completedDate && getBadgeStatus(index) !== BADGE_LOCKED) {
-		event.stopImmediatePropagation();
-		emit('badge-level-clicked', props.badge.achievementData.tiers[index]);
+const handleBadgeClick = index => {
+	if (getBadgeStatus(index) !== BADGE_LOCKED) {
+		emit('badge-level-clicked', {
+			challengeName: props.badge.challengeName,
+			tier: props.badge.achievementData.tiers[index]
+		});
 	}
 };
 </script>
diff --git a/src/pages/Portfolio/MyKiva/MyKivaPage.vue b/src/pages/Portfolio/MyKiva/MyKivaPage.vue
index e8baf59807..01255f0162 100644
--- a/src/pages/Portfolio/MyKiva/MyKivaPage.vue
+++ b/src/pages/Portfolio/MyKiva/MyKivaPage.vue
@@ -88,7 +88,7 @@
 					>
 						My impact journeys
 					</h3>
-					<BadgesSection :badge-data="badgeData" @badge-clicked="handleBadgeClicked" />
+					<BadgesSection :badge-data="badgeData" @badge-clicked="handleBadgeSectionClicked" />
 
 					<BadgeModal
 						v-if="selectedBadgeData"
@@ -98,7 +98,7 @@
 						:state="state"
 						:tier="tier"
 						@badge-modal-closed="handleBadgeModalClosed"
-						@badge-level-clicked="handleBadgeLevelClicked"
+						@badge-level-clicked="handleBadgeJourneyLevelClicked"
 					/>
 				</div>
 			</section>
@@ -163,15 +163,25 @@ const handleShowNavigation = () => {
 	$kvTrackEvent('SecondaryNav top level', 'click', 'MyKiva-Settings-icon');
 };
 
-const handleBadgeClicked = badge => {
+const handleBadgeSectionClicked = badge => {
 	state.value = STATE_JOURNEY;
 	selectedBadgeData.value = badge;
 	showBadgeModal.value = true;
 };
 
-const handleBadgeLevelClicked = clickedTier => {
+const handleBadgeJourneyLevelClicked = payload => {
+	const { challengeName, tier: clickedTier } = payload;
+
 	tier.value = clickedTier;
 	state.value = clickedTier?.completedDate ? STATE_EARNED : STATE_IN_PROGRESS;
+
+	$kvTrackEvent(
+		'portfolio',
+		'click',
+		state.value === STATE_EARNED ? 'Already earned badge modal' : 'Earn a badge - within badge journey map modal',
+		challengeName,
+		clickedTier.level,
+	);
 };
 
 const handleBadgeModalClosed = () => {

From 9d50c46eac9a57c1d76ce540616515121ca60773 Mon Sep 17 00:00:00 2001
From: Casey Dyer <dyersituations@gmail.com>
Date: Tue, 29 Oct 2024 16:14:57 -0700
Subject: [PATCH 3/3] fix: resolve minor issues with earned modal

---
 src/components/MyKiva/BadgeCompleted.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/MyKiva/BadgeCompleted.vue b/src/components/MyKiva/BadgeCompleted.vue
index 8ae63e6d5f..4aafe1cb36 100644
--- a/src/components/MyKiva/BadgeCompleted.vue
+++ b/src/components/MyKiva/BadgeCompleted.vue
@@ -99,7 +99,7 @@ const { getTierBadgeDataByLevel } = useBadgeData();
 const badgeData = computed(() => getTierBadgeDataByLevel(badge.value, tier.value?.level));
 
 const isPublic = computed(() => lender.value?.public && lender.value?.publicName);
-const shareUrl = computed(() => (isPublic.value ? `/lender/${lender.value?.publicId}` : 'https://www.kiva.org'));
+const shareUrl = computed(() => (isPublic.value ? `/lender/${lender.value?.publicId}` : ''));
 // eslint-disable-next-line max-len
 const shareMessage = "It's not everyday you change a life! Thank you, from all of us at Kiva and the millions of lives changed around the world.";
 
@@ -150,7 +150,7 @@ onMounted(() => {
 <style lang="postcss" scoped>
 
 .container {
-	@apply tw-mx-auto tw-bg-white tw-p-4.5 tw-rounded;
+	@apply tw-mx-auto tw-bg-white tw-pt-4.5 md:tw-pt-0 tw-px-4.5 tw-pb-4.5 tw-rounded;
 }
 
 .badge-container {