Merge pull request #5674 from kiva/MP-1027-fe-journeys-section-should…

…-show-in-progress-badge-state fix: several MyKiva UI fixes
kiva · Nov 12, 2024 · 0fec833 · 0fec833
2 parents e7abcc9 + 542c06c
commit 0fec833
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 9 deletions.
diff --git a/src/components/MyKiva/BadgesSection.vue b/src/components/MyKiva/BadgesSection.vue
@@ -20,18 +20,18 @@
 			<span class="tw-text-base !tw-font-medium tw-text-center tw-mb-1">
 				{{ badge.challengeName }}
 			</span>
-			<div
-				class="tw-p-1"
-				:class="{
-					'tw-grayscale': !badge.hasStarted
-				}"
-				style="height: 148px;"
+			<BadgeContainer
+				:status="getBadgeStatus(badge)"
+				:shape="getBadgeShape(badge.id)"
+				class="tw-self-start tw-mx-auto"
+				style="height: 133px;"
 			>
 				<img
 					:src="getActiveTierData(badge).imageUrl"
+					:alt="badge.challengeName"
 					class="tw-h-full tw-mx-auto"
 				>
-			</div>
+			</BadgeContainer>
 			<div class="tw-flex tw-flex-col tw-gap-0.5 tw-font-medium tw-grow">
 				<span
 					v-if="badge.hasStarted"
@@ -54,6 +54,8 @@ import { computed } from 'vue';
 import { defaultBadges } from '#src/util/achievementUtils';
 import { indexIn } from '#src/util/comparators';
 import useBadgeData from '#src/composables/useBadgeData';
+import { getBadgeShape, BADGE_COMPLETED, BADGE_IN_PROGRESS } from '#src/composables/useBadgeModal';
+import BadgeContainer from './BadgeContainer';
 
 defineEmits(['badge-clicked']);
 
@@ -75,6 +77,14 @@ const visibleBadges = computed(() => {
 const levelCaption = badge => {
 	return `Level ${getActiveTierData(badge).level}/${getBadgeWithVisibleTiers(badge).achievementData.tiers.length}`;
 };
+
+const getBadgeStatus = badge => {
+	const activeTier = getActiveTierData(badge);
+	if (activeTier?.level === badge?.achievementData?.tiers?.length) {
+		return BADGE_COMPLETED;
+	}
+	return BADGE_IN_PROGRESS;
+};
 </script>
 
 <style lang="postcss" scoped>

diff --git a/src/components/MyKiva/MyKivaHero.vue b/src/components/MyKiva/MyKivaHero.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="tw-w-full landscape tw-relative">
 		<MyKivaContainer>
-			<div class="tw-bg-white tw-rounded-b tw-absolute tw-top-0 tw-px-1.5 tw-py-2">
+			<div class="tw-bg-white tw-rounded-b tw-absolute tw-top-0 tw-p-1.5">
 				<h3>Welcome back 👋</h3>
 				<div
 					v-if="isBorrower || isTrustee"
@@ -37,7 +37,7 @@
 				@click="$emit('show-navigation')"
 			>
 				<kv-material-icon
-					class="tw-absolute tw-right-0 tw-bg-white tw-p-0.5 tw-rounded-full tw-mt-2 tw-shadow-lg"
+					class="tw-absolute tw-right-0 tw-bg-white tw-p-0.5 tw-rounded-full tw-shadow-lg tw-top-1"
 					name="settings"
 					:icon="mdiCogOutline"
 				/>