feat: my kiva badges section (#5607)

* feat: my kiva badges section added

* fix: pr comments tweaks

src/components/MyKiva/BadgesSection.vue

@@ -0,0 +1,128 @@
+<template>
+	<div class="tw-w-full tw-inline-flex tw-flex-wrap tw-justify-center tw-gap-2.5">
+		<div
+			v-for="badge in badgesArray"
+			:key="badge.fields.key"
+			class="badge-container tw-flex tw-flex-col tw-justify-between tw-p-1.5 tw-rounded"
+			:class="{
+				'tw-bg-white': badge.hasStarted,
+				'tw-border-4 tw-border-tertiary tw-border-dashed': !badge.hasStarted
+			}"
+		>
+			<span class="tw-text-base !tw-font-medium tw-text-center tw-mb-1">
+				{{ getBadgeTitle(badge) }}
+			</span>
+			<div
+				class="tw-p-1"
+				:class="{
+					'tw-grayscale': !badge.hasStarted
+				}"
+				style="height: 148px;"
+			>
+				<img
+					:src="getBadgeImgUrl(badge)"
+					class="tw-h-full tw-mx-auto"
+				>
+			</div>
+			<div class="tw-flex tw-flex-col tw-gap-0.5 tw-mt-2 tw-font-medium">
+				<span
+					v-if="badge.hasStarted"
+					class="tw-mx-auto"
+				>
+					Level {{ badge.level }}/5
+				</span>
+				<button
+					class="tw-text-action hover:tw-underline"
+					v-kv-track-event="[
+						'portfolio',
+						'click',
+						badge.hasStarted ? 'Continue' : 'Start this journey',
+						getBadgeTitle(badge),
+						badge.level
+					]"
+					@click="() => $emit('badge-clicked', badge)"
+				>
+					{{ badge.hasStarted ? 'Continue' : 'Start this journey' }}
+				</button>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import { computed, toRefs } from 'vue';
+
+const WOMEN_KEY = 'womens-equality';
+const US_EQUALITY_KEY = 'us-economic-equality';
+const CLIMATE_KEY = 'climate-action';
+const REFUGEE_KEY = 'refugee-equality';
+const BASIC_NEEDS_KEY = 'basic-needs';
+
+const defaultBadges = [
+	WOMEN_KEY,
+	US_EQUALITY_KEY,
+	BASIC_NEEDS_KEY,
+	CLIMATE_KEY,
+	REFUGEE_KEY,
+];
+
+defineEmits(['badge-clicked']);
+
+const props = defineProps({
+	badgesData: {
+		type: Array,
+		default: () => ([])
+	},
+	userAchievements: {
+		type: Array,
+		default: () => ([])
+	}
+});
+
+const { badgesData, userAchievements } = toRefs(props);
+
+const badgesArray = computed(() => {
+	const badges = [];
+	if (badgesData.value.length > 0) {
+		defaultBadges.forEach(badgeKey => {
+			let badgeFound = badgesData.value.find(entry => entry.fields.key === `${badgeKey}-level-1`);
+			const userAchievement = userAchievements.value.find(entry => entry.id === badgeKey);
+
+			if (!userAchievement) {
+				badgeFound = {
+					...badgeFound,
+					hasStarted: false,
+					level: 0,
+				};
+			} else {
+				const hasStarted = userAchievement.status !== 'NO_PROGRESS';
+				// TODO: Change this to level when we have the data from the backend
+				const level = userAchievement.totalProgressToAchievement;
+				badgeFound = {
+					...badgeFound,
+					hasStarted,
+					level,
+					status: userAchievement.status,
+				};
+			}
+
+			badges.push(badgeFound);
+		});
+	}
+	return badges;
+});
+
+const getBadgeTitle = badge => badge?.fields?.challengeName ?? '';
+
+const getBadgeImgUrl = badge => badge?.fields?.badgeImage?.fields?.file?.url ?? '';
+</script>
+
+<style scoped>
+.badge-container {
+    width: 175px;
+
+    @screen md {
+        width: 220px;
+    }
+}
+</style>

src/graphql/query/contentfulEntries.graphql

@@ -4,12 +4,14 @@ query contentfulEntries(
 	$contentType: String!
 	$contentKey: String
 	$preview: Boolean
+	$limit: Int
 ) {
 	contentful {
 		entries(
 			contentType: $contentType
 			contentKey: $contentKey
 			preview: $preview
+			limit: $limit
 		)
 	}
 }

src/graphql/query/userAchievementProgress.graphql

@@ -0,0 +1,16 @@
+query UserAchievementProgress {
+  userAchievementProgress {
+    id
+    tieredLendingAchievements {
+      id
+      status
+      totalProgressToAchievement
+      tiers {
+        target
+        tierStatement
+        completedDate
+        learnMoreURL
+      }
+    }
+  }
+}

src/pages/Portfolio/MyKiva/MyKivaPage.vue

@@ -57,12 +57,16 @@
 						BADGES AND ACHIEVEMENTS
 					</span>
 				</div>
-				<div>
-					<button
-						@click="showBadgeModal = true"
+				<div class="tw-mt-3">
+					<h3
+						class="tw-text-center tw-mb-2"
 					>
-						Show Modal
-					</button>
+						My impact journeys
+					</h3>
+					<BadgesSection
+						:badges-data="badgesData"
+						:user-achievements="userAchievements"
+					/>
 
 					<BadgeModal
 						:show-lightbox="showBadgeModal"
@@ -81,12 +85,15 @@ import WwwPage from '#src/components/WwwFrame/WwwPage';
 import MyKivaNavigation from '#src/components/MyKiva/MyKivaNavigation';
 import myKivaQuery from '#src/graphql/query/myKiva.graphql';
 import updatesQuery from '#src/graphql/query/loanUpdates.graphql';
+import userAchievementProgressQuery from '#src/graphql/query/userAchievementProgress.graphql';
+import contentfulEntriesQuery from '#src/graphql/query/contentfulEntries.graphql';
 import MyKivaHero from '#src/components/MyKiva/MyKivaHero';
 import MyKivaProfile from '#src/components/MyKiva/MyKivaProfile';
 import MyKivaContainer from '#src/components/MyKiva/MyKivaContainer';
 import MyKivaBorrowerCarousel from '#src/components/MyKiva/BorrowerCarousel';
 import JournalUpdatesCarousel from '#src/components/MyKiva/JournalUpdatesCarousel';
 import BadgeModal from '#src/components/MyKiva/BadgeModal';
+import BadgesSection from '#src/components/MyKiva/BadgesSection';
 
 import {
 	ref,
@@ -107,6 +114,8 @@ const loans = ref([]);
 const activeLoan = ref({});
 const loanUpdates = ref([]);
 const showBadgeModal = ref(false);
+const userAchievements = ref([]);
+const badgesData = ref([]);
 
 const isLoading = computed(() => !lender.value);
 
@@ -133,6 +142,30 @@ const handleSelectedLoan = loan => {
 	fetchLoanUpdates(activeLoan.value.id);
 };
 
+const fetchUserAchievements = () => {
+	apollo.query({ query: userAchievementProgressQuery })
+		.then(result => {
+			userAchievements.value = result.data?.userAchievementProgress?.tieredLendingAchievements ?? [];
+		}).catch(e => {
+			logReadQueryError(e, 'MyKivaPage userAchievementProgressQuery');
+		});
+};
+
+const fetchBadgesData = () => {
+	apollo.query({
+		query: contentfulEntriesQuery,
+		variables: {
+			contentType: 'challenge',
+			limit: 200,
+		}
+	})
+		.then(result => {
+			badgesData.value = result.data?.contentful?.entries?.items ?? [];
+		}).catch(e => {
+			logReadQueryError(e, 'MyKivaPage contentfulEntriesQuery');
+		});
+};
+
 apollo.query({ query: myKivaQuery })
 	.then(result => {
 		userInfo.value = result.data?.my ?? {};
@@ -157,5 +190,8 @@ onMounted(() => {
 	);
 
 	$kvTrackEvent('portfolio', 'view', 'new-my-kiva');
+
+	fetchBadgesData();
+	fetchUserAchievements();
 });
 </script>