feat: modify component to match new badge structure

kiva · Oct 29, 2024 · e5874ab · e5874ab
1 parent 2040c1a
commit e5874ab
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 24 deletions.
diff --git a/src/components/MyKiva/BadgeCompleted.vue b/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">
@@ -86,9 +86,13 @@ const props = defineProps({
 		type: Object,
 		default: () => ({}),
 	},
+	tier: {
+		type: Object,
+		default: () => ({}),
+	}
 });
 
-const { badge, lender } = toRefs(props);
+const { badge, lender, tier } = toRefs(props);
 
 const isPublic = computed(() => lender.value?.public && lender.value?.publicName);
 const shareUrl = computed(() => (isPublic.value ? `/lender/${lender.value?.publicId}` : 'https://www.kiva.org'));
@@ -101,32 +105,35 @@ const utmContent = computed(() => {
 	return 'anonymous';
 });
 
-const badgeImage = computed(() => {
-	return badge.value.fields?.badgeImage?.fields?.file?.url ?? '';
-});
+const tiers = computed(() => badge.value?.achievementData?.tiers ?? []);
 
-const badgeCategory = computed(() => badge.value?.challengeName ?? '');
-const tiers = computed(() => badge.value?.tiers ?? []);
+const currentTierIndex = computed(() => {
+	return tiers.value?.findIndex(t => t?.level === tier.value) ?? null;
+});
 
-const currentTier = computed(() => {
-	return tiers.value?.find(tier => !tier.completedDate) ?? null;
+const badgeImage = computed(() => {
+	return badge.value.contentfulData?.[currentTierIndex.value]?.imageUrl ?? '';
 });
 
+const badgeCategory = computed(() => badge.value?.contentfulData?.[currentTierIndex.value]?.challengeName ?? '');
+
 const badgeLevel = computed(() => {
-	return currentTier.value?.target ?? 0;
+	return tiers.value?.[currentTierIndex.value]?.target ?? 0;
 });
 
-const badgeTitle = computed(() => {
-	return badge.value?.fields?.challengeName ?? '';
-});
 const funFact = computed(() => {
-	return badge.value.fields?.shareFact ?? '';
+	return badge.value.contentfulData?.[currentTierIndex.value]?.shareFact ?? '';
 });
+
 const funFactSource = computed(() => {
-	return badge.value.fields?.shareFactFootnote ?? '';
+	return badge.value.contentfulData?.[currentTierIndex.value]?.shareFactFootnote ?? '';
 });
-const learnMoreLink = computed(() => badge.value.shareFactUrl ?? '');
-const earnedDate = computed(() => `Earned ${format(new Date(currentTier.value.completedDate), 'MMMM do, yyyy')}`);
+const learnMoreLink = computed(() => badge.value.contentfulData?.shareFactUrl ?? '');
+const earnedDate = computed(() => `Earned ${
+	format(
+		new Date(tiers.value?.[currentTierIndex.value]?.completedDate ?? null),
+		'MMMM do, yyyy'
+	)}`);
 
 onMounted(() => {
 	confetti({

diff --git a/src/components/MyKiva/BadgeModal.vue b/src/components/MyKiva/BadgeModal.vue
@@ -5,6 +5,7 @@
 			:key="badge.id"
 			:badge="badge"
 			:lender="lender"
+			:tier="tier"
 			@badge-level-clicked="handleBadgeLevelClicked"
 		/>
 	</KvLightbox>
@@ -68,6 +69,10 @@ const props = defineProps({
 		type: Object,
 		required: true,
 	},
+	tier: {
+		type: Object,
+		default: () => ({}),
+	}
 });
 
 const closeLightbox = () => {
@@ -80,7 +85,9 @@ const handleBadgeLevelClicked = e => {
 };
 
 const title = computed(() => {
-	if (props.state === STATE_JOURNEY) return props.badge.fields.challengeName;
+	if (props.state === STATE_JOURNEY) {
+		return props.badge?.contentfulData?.[props.tier]?.challengeName ?? '';
+	}
 	return null;
 });
 

diff --git a/src/components/MyKiva/BadgeModalContentJourney.vue b/src/components/MyKiva/BadgeModalContentJourney.vue
@@ -183,7 +183,7 @@ const handleBadgeClick = (event, index) => {
 	// Prevent analytics being logged when non-completed tier is clicked
 	if (!sortedTiers.value[index]?.completedDate && getBadgeStatus(index) !== BADGE_LOCKED) {
 		event.stopImmediatePropagation();
-		emit('badge-level-clicked', sortedTiers.value[index]?.completedDate);
+		emit('badge-level-clicked', sortedTiers.value[index]?.level);
 	}
 };
 </script>

diff --git a/src/pages/Portfolio/MyKiva/MyKivaPage.vue b/src/pages/Portfolio/MyKiva/MyKivaPage.vue
@@ -95,8 +95,9 @@
 						:show="showBadgeModal"
 						:badge="selectedBadgeData"
 						:lender="lender"
-						@badge-modal-closed="handleBadgeModalClosed"
 						:state="state"
+						:tier="tier"
+						@badge-modal-closed="handleBadgeModalClosed"
 						@badge-level-clicked="handleBadgeLevelClicked"
 					/>
 				</div>
@@ -150,7 +151,8 @@ const activeLoan = ref({});
 const loanUpdates = ref([]);
 const showBadgeModal = ref(false);
 const selectedBadgeData = ref();
-const state = ref(STATE_JOURNEY);
+const state = ref(STATE_EARNED);
+const tier = ref(0);
 
 const isLoading = computed(() => !lender.value);
 
@@ -166,8 +168,10 @@ const handleBadgeClicked = badge => {
 	showBadgeModal.value = true;
 };
 
-const handleBadgeLevelClicked = completedDate => {
-	state.value = completedDate ? STATE_EARNED : STATE_IN_PROGRESS;
+const handleBadgeLevelClicked = level => {
+	tier.value = level;
+	const selectedTier = badgeData?.achievementData?.tiers?.find(t => t.level === level);
+	state.value = selectedTier?.completedDate ? STATE_EARNED : STATE_IN_PROGRESS;
 };
 
 const handleBadgeModalClosed = () => {