feat: integrate badge modal with completed state

src/components/MyKiva/BadgeCompleted.vue

@@ -2,7 +2,7 @@
 	<div class="container">
 		<div class="badge-container tw-flex-col tw-mb-4">
 			<h2 class="tw-text-center tw-mb-2">
-				{{ badgeTitle }}
+				{{ badgeCategory }}
 			</h2>
 			<div class="tw-relative tw-z-1 tw-mb-3" :style="{ minWidth: '16rem'}">
 				<div
@@ -14,7 +14,7 @@
 				<img
 					:src="badgeImage"
 					class="badge tw-z-2"
-					:alt="badgeTitle"
+					:alt="badgeCategory"
 				>
 			</div>
 			<h2 class="tw-italic tw-font-medium tw-text-desert-rose-4 tw-mb-2 tw-text-center">
@@ -66,6 +66,7 @@
 import KvSocialShareButton from '#src/components/Kv/KvSocialShareButton';
 import MyKivaBadgeStars from '#src/components/MyKiva/MyKivaBadgeStars';
 import KvMaterialIcon from '@kiva/kv-components/vue/KvMaterialIcon';
+import useBadgeData from '#src/composables/useBadgeData';
 
 import confetti from 'canvas-confetti';
 import {
@@ -86,13 +87,16 @@ const props = defineProps({
 		type: Object,
 		default: () => ({}),
 	},
-	lendingAchievement: {
+	tier: {
 		type: Object,
 		default: () => ({}),
-	},
+	}
 });
 
-const { badge, lender, lendingAchievement } = toRefs(props);
+const { badge, lender, tier } = toRefs(props);
+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'));
@@ -106,41 +110,35 @@ const utmContent = computed(() => {
 });
 
 const badgeImage = computed(() => {
-	return badge.value.fields?.badgeImage?.fields?.file?.url ?? '';
+	return badgeData.value.contentfulData?.imageUrl ?? '';
 });
 
-const badgeCategory = computed(() => badge.value?.challengeName ?? '');
-const tiers = computed(() => lendingAchievement.value?.tiers ?? []);
-
-const sortedTiers = computed(() => {
-	const defaultTiers = [...tiers.value];
-	return defaultTiers.sort((a, b) => b.target - a.target);
-});
+const badgeCategory = computed(() => badgeData.value?.contentfulData?.challengeName ?? '');
 
-const currentTier = computed(() => {
-	return sortedTiers.value?.findLast(tier => tier.completedDate) ?? null;
-});
 const badgeLevel = computed(() => {
-	return currentTier.value?.target ?? 0;
+	return badgeData.value?.achievementData?.target ?? 0;
 });
 
-const badgeTitle = computed(() => {
-	return badge.value?.fields?.challengeName ?? '';
-});
 const funFact = computed(() => {
-	return badge.value.fields?.shareFact ?? '';
+	return badgeData.value.contentfulData?.shareFact ?? '';
 });
+
 const funFactSource = computed(() => {
-	return badge.value.fields?.shareFactFootnote ?? '';
+	return badgeData.value.contentfulData?.shareFactFootnote ?? '';
 });
-const learnMoreLink = computed(() => badge.value.shareFactUrl ?? '');
-const earnedDate = computed(() => `Earned ${format(new Date(currentTier.value.completedDate), 'MMMM do, yyyy')}`);
+const learnMoreLink = computed(() => badgeData.value.contentfulData?.shareFactUrl ?? '');
+const earnedDate = computed(() => `Earned ${
+	format(
+		new Date(badgeData.value?.achievementData?.completedDate ?? null),
+		'MMMM do, yyyy'
+	)}`);
 
 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,13 @@
 <template>
-	<KvLightbox :visible="show" :title="badge.fields.challengeName" @lightbox-closed="closeLightbox">
-		<component :is="contentComponent" :key="badge.id" :badge="badge" />
+	<KvLightbox :visible="show" :title="title" @lightbox-closed="closeLightbox">
+		<component
+			:is="contentComponent"
+			:key="badge.id"
+			:badge="badge"
+			:lender="lender"
+			:tier="tier"
+			@badge-level-clicked="handleBadgeLevelClicked"
+		/>
 	</KvLightbox>
 </template>
 
@@ -15,9 +22,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 +37,10 @@ const props = defineProps({
 		type: String,
 		default: STATE_JOURNEY,
 	},
+	lender: {
+		type: Object,
+		default: () => ({}),
+	},
 	/**
 	 * {
 	 *   id: '',
@@ -56,18 +69,32 @@ const props = defineProps({
 		type: Object,
 		required: true,
 	},
+	tier: {
+		type: Object,
+		default: () => ({}),
+	}
 });
 
 const closeLightbox = () => {
 	emit('badge-modal-closed');
 	$kvTrackEvent('portfolio', 'click', 'badge-modal-closed');
 };
 
+const handleBadgeLevelClicked = e => {
+	emit('badge-level-clicked', e);
+};
+
+const title = computed(() => {
+	if (props.state === STATE_JOURNEY) {
+		return props.badge?.contentfulData?.[props.tier]?.challengeName ?? '';
+	}
+	return null;
+});
+
 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);
@@ -179,8 +181,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]);
 	}
 };
 </script>

src/composables/useBadgeData.js

@@ -178,13 +178,32 @@ export default function useBadgeData() {
 	 */
 	const badgeData = computed(() => combineBadgeData(badgeAchievementData.value, badgeContentfulData.value));
 
+	/**
+	 * Gets the badge data with specific contentful and achievement data for the tier
+	 * @param badge The badge to get the specific tier for
+	 * @param level The level of the tier to get
+	 * @returns The badge data with specific contentful and achievement data for the tier
+	 */
+	const getTierBadgeDataByLevel = (badge, level) => {
+		const tierIndex = badge?.achievementData?.tiers?.findIndex(t => t?.level === level);
+		const achievementData = badge?.achievementData?.tiers?.[tierIndex];
+		const contentfulData = badge?.contentfulData?.[tierIndex];
+
+		return {
+			...badge,
+			contentfulData,
+			achievementData,
+		};
+	};
+
 	return {
 		fetchAchievementData,
 		fetchContentfulData,
 		combineBadgeData,
 		getContentfulLevelData,
 		getCurrentTierData,
 		badgeAchievementData,
-		badgeData
+		badgeData,
+		getTierBadgeDataByLevel,
 	};
 }

src/pages/Portfolio/MyKiva/MyKivaPage.vue

@@ -94,7 +94,11 @@
 						v-if="selectedBadgeData"
 						:show="showBadgeModal"
 						:badge="selectedBadgeData"
-						@badge-modal-closed="showBadgeModal = false"
+						:lender="lender"
+						:state="state"
+						:tier="tier"
+						@badge-modal-closed="handleBadgeModalClosed"
+						@badge-level-clicked="handleBadgeLevelClicked"
 					/>
 				</div>
 			</section>
@@ -118,6 +122,7 @@ import BadgeModal from '#src/components/MyKiva/BadgeModal';
 import BadgesSection from '#src/components/MyKiva/BadgesSection';
 import MyKivaStats from '#src/components/MyKiva/MyKivaStats';
 import useBadgeData from '#src/composables/useBadgeData';
+import { STATE_JOURNEY, STATE_EARNED, STATE_IN_PROGRESS } from '#src/composables/useBadgeModal';
 
 import {
 	ref,
@@ -146,6 +151,8 @@ const activeLoan = ref({});
 const loanUpdates = ref([]);
 const showBadgeModal = ref(false);
 const selectedBadgeData = ref();
+const state = ref(STATE_EARNED);
+const tier = ref(null);
 
 const isLoading = computed(() => !lender.value);
 
@@ -161,6 +168,20 @@ const handleBadgeClicked = badge => {
 	showBadgeModal.value = true;
 };
 
+const handleBadgeLevelClicked = clickedTier => {
+	tier.value = clickedTier;
+	state.value = clickedTier?.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 => {

test/unit/specs/composables/useBadgeData.spec.js

@@ -68,4 +68,18 @@ describe('useBadgeData.js', () => {
 			});
 		});
 	});
+
+	describe('getTierBadgeDataByLevel', () => {
+		it('should get the badge data by id and tier', () => {
+			const { getTierBadgeDataByLevel } = useBadgeData();
+			const tier = 7;
+			const sampleBadge = combinedData[0];
+
+			expect(getTierBadgeDataByLevel(sampleBadge, tier)).toEqual({
+				...sampleBadge,
+				contentfulData: sampleBadge.contentfulData?.[tier - 1],
+				achievementData: sampleBadge.achievementData?.tiers?.[tier - 1],
+			});
+		});
+	});
 });