feat: integrate badge modal with completed state

src/components/MyKiva/BadgeCompleted.vue

@@ -86,13 +86,9 @@ const props = defineProps({
 		type: Object,
 		default: () => ({}),
 	},
-	lendingAchievement: {
-		type: Object,
-		default: () => ({}),
-	},
 });
 
-const { badge, lender, lendingAchievement } = toRefs(props);
+const { badge, lender } = toRefs(props);
 
 const isPublic = computed(() => lender.value?.public && lender.value?.publicName);
 const shareUrl = computed(() => (isPublic.value ? `/lender/${lender.value?.publicId}` : 'https://www.kiva.org'));
@@ -110,15 +106,15 @@ const badgeImage = computed(() => {
 });
 
 const badgeCategory = computed(() => badge.value?.challengeName ?? '');
-const tiers = computed(() => lendingAchievement.value?.tiers ?? []);
+const tiers = computed(() => badge.value?.tiers ?? []);
 
 const sortedTiers = computed(() => {
 	const defaultTiers = [...tiers.value];
-	return defaultTiers.sort((a, b) => b.target - a.target);
+	return defaultTiers.sort((a, b) => a.target - b.target);
 });
 
 const currentTier = computed(() => {
-	return sortedTiers.value?.findLast(tier => tier.completedDate) ?? null;
+	return sortedTiers.value?.find(tier => !tier.completedDate) ?? null;
 });
 const badgeLevel = computed(() => {
 	return currentTier.value?.target ?? 0;
@@ -139,8 +135,9 @@ const earnedDate = computed(() => `Earned ${format(new Date(currentTier.value.co
 onMounted(() => {
 	confetti({
 		origin: {
-			y: 0.2
+			y: 0.2,
 		},
+		zIndex: 1400, // tw-z-modal
 		particleCount: 150,
 		spread: 200,
 		colors: ['#6AC395', '#223829', '#95D4B3'],

src/components/MyKiva/BadgeModal.vue

@@ -1,6 +1,11 @@
 <template>
 	<KvLightbox :visible="show" :title="badge.fields.challengeName" @lightbox-closed="closeLightbox">
-		<component :is="contentComponent" :key="badge.id" :badge="badge" />
+		<component
+			:is="contentComponent"
+			:key="badge.id"
+			:badge="badge"
+			@badge-level-clicked="handleBadgeLevelClicked"
+		/>
 	</KvLightbox>
 </template>
 
@@ -15,9 +20,11 @@ import {
 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']);
+const emit = defineEmits(['badge-modal-closed', 'badge-level-clicked']);
 
 const props = defineProps({
 	show: {
@@ -28,6 +35,10 @@ const props = defineProps({
 		type: String,
 		default: STATE_JOURNEY,
 	},
+	lender: {
+		type: Object,
+		default: () => ({}),
+	},
 	/**
 	 * {
 	 *   id: '',
@@ -63,11 +74,14 @@ const closeLightbox = () => {
 	$kvTrackEvent('portfolio', 'click', 'badge-modal-closed');
 };
 
+const handleBadgeLevelClicked = e => {
+	emit('badge-level-clicked', e);
+};
+
 const contentComponent = computed(() => {
 	switch (props.state) {
-		// TODO: update with upcoming modal content components
-		case STATE_EARNED: return BadgeModalContentJourney;
-		case STATE_IN_PROGRESS: return BadgeModalContentJourney;
+		case STATE_EARNED: return BadgeCompleted;
+		case STATE_IN_PROGRESS: return BadgeInProgress;
 		case STATE_JOURNEY: default: return BadgeModalContentJourney;
 	}
 });

src/components/MyKiva/BadgeModalContentJourney.vue

@@ -143,6 +143,8 @@ const {
 } = useBadgeModal(props.badge);
 const isBadgeImageLoaded = ref(false);
 
+const emit = defineEmits(['badge-level-clicked']);
+
 const sortedTiers = computed(() => {
 	const tiers = [...(props.badge.tiers ?? [])];
 	tiers.sort((a, b) => a.target - b.target);
@@ -180,8 +182,9 @@ const getBadgeStatus = index => {
 
 const handleBadgeClick = (event, index) => {
 	// Prevent analytics being logged when non-completed tier is clicked
-	if (!sortedTiers.value[index]?.completedDate) {
+	if (!sortedTiers.value[index]?.completedDate && getBadgeStatus(index) !== BADGE_LOCKED) {
 		event.stopImmediatePropagation();
+		emit('badge-level-clicked', sortedTiers.value[index]?.completedDate);
 	}
 };
 </script>

src/pages/Portfolio/MyKiva/MyKivaPage.vue

@@ -100,7 +100,10 @@
 						v-if="selectedBadgeData"
 						:show="showBadgeModal"
 						:badge="selectedBadgeData"
-						@badge-modal-closed="showBadgeModal = false"
+						:lender="lender"
+						@badge-modal-closed="handleBadgeModalClosed"
+						:state="state"
+						@badge-level-clicked="handleBadgeLevelClicked"
 					/>
 				</div>
 			</section>
@@ -125,6 +128,7 @@ import JournalUpdatesCarousel from '#src/components/MyKiva/JournalUpdatesCarouse
 import BadgeModal from '#src/components/MyKiva/BadgeModal';
 import BadgesSection from '#src/components/MyKiva/BadgesSection';
 import MyKivaStats from '#src/components/MyKiva/MyKivaStats';
+import { STATE_JOURNEY, STATE_EARNED, STATE_IN_PROGRESS } from '#src/composables/useBadgeModal';
 
 import {
 	ref,
@@ -148,6 +152,7 @@ const showBadgeModal = ref(false);
 const selectedBadgeData = ref();
 const userAchievements = ref([]);
 const badgesData = ref([]);
+const state = ref(STATE_JOURNEY);
 
 const isLoading = computed(() => !lender.value);
 
@@ -163,6 +168,19 @@ const handleBadgeClicked = badge => {
 	showBadgeModal.value = true;
 };
 
+const handleBadgeLevelClicked = completedDate => {
+	state.value = completedDate ? STATE_EARNED : STATE_IN_PROGRESS;
+};
+
+const handleBadgeModalClosed = () => {
+	if (state.value === STATE_JOURNEY) {
+		showBadgeModal.value = false;
+		return;
+	}
+
+	state.value = STATE_JOURNEY;
+};
+
 const fetchLoanUpdates = loanId => {
 	apollo.query({ query: updatesQuery, variables: { loanId } })
 		.then(result => {