Merge remote-tracking branch 'origin/staging' into production

.storybook/stories/BadgeModal.stories.js

@@ -1,5 +1,12 @@
 import BadgeModal from '#src/components/MyKiva/BadgeModal.vue';
-import { badgeNoProgress, badgeFirstTierComplete } from '../mock-data/badge-journey-data-mock';
+import {
+	badgeWomensEquality,
+	badgeUsEconomicEquality,
+	badgeClimateAction,
+	badgeRefugeeEquality,
+	badgeBasicNeeds,
+	badgeFirstTierComplete
+} from '../mock-data/badge-journey-data-mock';
 
 export default {
 	title: 'MyKiva/Badge Modal',
@@ -19,12 +26,14 @@ const story = (args) => {
 	return template;
 };
 
-const badgeWithLineVariations = JSON.parse(JSON.stringify(badgeNoProgress));
-badgeWithLineVariations.id = 'us-economic-equality';
-badgeWithLineVariations.fields.badgeImage.fields.file.url = 'https://images.ctfassets.net/j0p9a6ql0rn7/3dAEh0zYSkqK5Up5q8Flv8/04ddc29a4cda74e10357a3716e8ec187/Women_Level_1.svg';
+export const WomensEquality = story({ badge: badgeWomensEquality });
 
-export const Default = story({ badge: { ...badgeNoProgress, id: 'us-economic-equality' } });
+export const UsEconomicEquality = story({ badge: badgeUsEconomicEquality });
 
-export const LineVariations = story({ badge: { ...badgeWithLineVariations, id: 'womens-equality' } });
+export const ClimateAction = story({ badge: badgeClimateAction });
 
-export const FirstTierComplete = story({ badge: { ...badgeFirstTierComplete, id: 'us-economic-equality' } });
+export const RefugeeEquality = story({ badge: badgeRefugeeEquality });
+
+export const BasicNeeds = story({ badge: badgeBasicNeeds });
+
+export const FirstTierComplete = story({ badge: badgeFirstTierComplete });

CHANGELOG.md

@@ -1,3 +1,42 @@
+## [3.2.0-rc.1](https://github.com/kiva/ui/compare/v3.1.0...v3.2.0-rc.1) (2024-10-29)
+
+### 🎉 New Features
+
+* badge in progress content component ([652de6f](https://github.com/kiva/ui/commit/652de6ffc58f7fa8e6c584f5d71e98ce2adc07b1))
+* composable for tiered badge data ([90a5086](https://github.com/kiva/ui/commit/90a5086bba0ea5ebdf3f99ef79b27acdaffd7b8c))
+* integrate badge modal with completed state ([b998eaf](https://github.com/kiva/ui/commit/b998eafb8ca172be4d4da1f415239e66ee057ec6))
+* mechanism for getting and displaying current tier badge data ([3fbc8d3](https://github.com/kiva/ui/commit/3fbc8d3d69e2614276aee0cf4d325cd084249d74))
+* modify component to match new badge structure ([e5874ab](https://github.com/kiva/ui/commit/e5874aba85c79a59b60a6ffae850cc51614a2842))
+* stories for all current badges and styles adjusted accordingly ([50e41a0](https://github.com/kiva/ui/commit/50e41a07df7d489a4038dc00469f06951eac1a71))
+* user achievements query updated ([#5615](https://github.com/kiva/ui/issues/5615)) ([71160c0](https://github.com/kiva/ui/commit/71160c02ec5e9675250809f1a3eb6d28c861b6a7))
+
+### 🐛 Bugfixes
+
+* add additional error signature filter for pinterest tag ([ea98843](https://github.com/kiva/ui/commit/ea98843806b66bbcdec95f28c50d65a83192758e))
+* add more tests and todo description ([309ba85](https://github.com/kiva/ui/commit/309ba85fc5ca45ee068ebb2300e296004d43fea9))
+* added basic testing for new badge composable, consolidated tier date fixing ([9e31b28](https://github.com/kiva/ui/commit/9e31b28edf1ae5cc098472dab7060ff68e89ad8a))
+* adjust to new square badges ([6f251c0](https://github.com/kiva/ui/commit/6f251c0704b0c0dfa5c7e0b27a21e9a0834727b8))
+* combine old and new badge data ([1e07b9d](https://github.com/kiva/ui/commit/1e07b9dcf7074575bdb50985319cd74da2cd3171))
+* conflicts ([2040c1a](https://github.com/kiva/ui/commit/2040c1a42fbe33eb885d5d8ea45ac18c0c6ec980))
+* hide title in badge completed state ([d15c5f3](https://github.com/kiva/ui/commit/d15c5f3d15d2100eef4c0817120e72c9054f167a))
+* hold all achievement data ([fa64544](https://github.com/kiva/ui/commit/fa6454467ce9005a915f1d747045e033fe505e4c))
+* lint ([b720162](https://github.com/kiva/ui/commit/b720162f38877525e538f4055e658685951934b0))
+* remove px filter, filter out external failed load sentry events ([f5425d0](https://github.com/kiva/ui/commit/f5425d08fe697c70bfc50b840750299d72edddb3))
+* renamed file appropriately ([338cc28](https://github.com/kiva/ui/commit/338cc28e5f289dd027ccd3dc2f52183ccd406f13))
+* resolve comments and add todos ([72e8fbf](https://github.com/kiva/ui/commit/72e8fbf1d0e57f3cc5fc0d0cbd8542ad2da0cca1))
+* small adjustment ([494b698](https://github.com/kiva/ui/commit/494b698961b3fe0912e505ee53e3b722b5e72ed9))
+* solve comments ([b105684](https://github.com/kiva/ui/commit/b1056841bf70e332eea2559419d37638ef63899f))
+* update method name ([f9ce0b0](https://github.com/kiva/ui/commit/f9ce0b0aedfbc658d7f0692a0a1b5f8562119efb))
+* update params for climate action and basic needs ([a74f0ab](https://github.com/kiva/ui/commit/a74f0ab7215188033c96f6efc9d9d6bd9ea1ec19))
+
+### 🪚 Refactors
+
+* create new method to get specific level data from badge ([598f59b](https://github.com/kiva/ui/commit/598f59bfd3d467fe58b125abb213786a25e74c91))
+
+### 🧹 Chores
+
+* filter out addition Failed to fetch calls from 3rd party scripts ([f4d802a](https://github.com/kiva/ui/commit/f4d802acff13ddb7def94154a839990bcacb4efd))
+
 ## [3.1.0](https://github.com/kiva/ui/compare/v3.0.3...v3.1.0) (2024-10-24)
 
 ### 🎉 New Features

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "kvue",
-	"version": "3.1.0",
+	"version": "3.2.0-rc.1",
 	"description": "The Kiva ui",
 	"author": "braincrave",
 	"private": true,

src/client-entry.js

@@ -132,8 +132,17 @@ async function setupSentry(app, router) {
 				&& eventAsString.indexOf('pagead') !== -1) {
 				return false;
 			}
-			// Skip sending failed loads of pX
-			if (eventAsString.indexOf("Cannot set property 'PX1065' of undefined") !== -1) {
+			// Skip Load failed caused by failed fetch calls in 3rd party libraries
+			// NOTE: we do see failed loads for our own async modules, this doesn't filter those out
+			// Sentry Event Link: https://kiva.sentry.io/issues/3808313433/events/427b92cf47ed4aaeb321caf20783eba0/
+			if ((eventAsString.indexOf('Load failed') !== -1
+				|| eventAsString.indexOf('Failed to fetch') !== -1
+				|| eventAsString.indexOf('TypeError') !== -1)
+				&& (
+					(eventAsString.indexOf('ct.pinterest') !== -1)
+					|| (eventAsString.indexOf('rum.management') !== -1)
+				)
+			) {
 				return false;
 			}
 			// Skip sending errors from CefSharp

src/components/LenderProfile/LenderBadges.vue

@@ -1,5 +1,5 @@
 <template>
-	<async-lender-section @visible="() => isLoading = false">
+	<async-lender-section @visible="fetchUserAchievements">
 		<section v-if="completedAchievements.length > 0">
 			<h2
 				v-if="!isLoading"
@@ -22,34 +22,47 @@
 </template>
 
 <script>
+import { gql } from 'graphql-tag';
+import logReadQueryError from '#src/util/logReadQueryError';
 import BadgesList from '#src/pages/Portfolio/LendingStats/BadgesList';
 import KvLoadingPlaceholder from '@kiva/kv-components/vue/KvLoadingPlaceholder';
 import AsyncLenderSection from './AsyncLenderSection';
 
+const userAchievementProgressQuery = gql`query userAchievementProgress( $publicId: String!) {
+	userAchievementProgress(publicId: $publicId) {
+		id
+		lendingAchievements {
+			id
+			milestoneProgress {
+				id
+				milestoneStatus
+			}
+		}
+	}
+}`;
+
 export default {
 	name: 'LenderBadges',
+	inject: ['apollo', 'cookieStore'],
 	components: {
 		BadgesList,
 		KvLoadingPlaceholder,
 		AsyncLenderSection,
 	},
 	props: {
-		completedAchievements: {
-			type: Array,
-			default: () => ([])
-		},
-		totalPossibleBadges: {
-			type: Number,
-			default: 0
-		},
 		lenderInfo: {
 			type: Object,
 			default: () => ({})
 		},
+		publicId: {
+			type: String,
+			required: true,
+		},
 	},
 	data() {
 		return {
-			isLoading: true
+			isLoading: true,
+			allAchievements: [],
 		};
 	},
 	computed: {
@@ -60,7 +73,32 @@ export default {
 			return this.lenderInfo?.name
 				? `${this.lenderInfo.name}'s badges`
 				: 'Badges';
-		}
-	}
+		},
+		completedAchievements() {
+			return this.allAchievements.filter(
+				achievement => achievement.milestoneProgress?.[0]?.milestoneStatus === 'COMPLETE'
+			);
+		},
+		totalPossibleBadges() {
+			return this.allAchievements?.length ?? 0;
+		},
+	},
+	methods: {
+		async fetchUserAchievements() {
+			try {
+				const { data } = await this.apollo.query({
+					query: userAchievementProgressQuery,
+					variables: {
+						publicId: this.publicId,
+					},
+				});
+
+				this.allAchievements = data?.userAchievementProgress?.lendingAchievements ?? [];
+				this.isLoading = false;
+			} catch (e) {
+				logReadQueryError(e, 'LenderBadges userAchievementsProgress');
+			}
+		},
+	},
 };
 </script>

src/components/LenderProfile/LenderProfileWrapper.vue

@@ -11,9 +11,8 @@
 		/>
 
 		<lender-badges
-			:total-possible-badges="allAchievements.length"
-			:completed-achievements="completedAchievements"
 			:lender-info="lenderInfo"
+			:public-id="publicId"
 		/>
 
 		<lender-dedications-list

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/BadgeContainer.vue

@@ -8,8 +8,8 @@
 		<component
 			v-if="isInProgress"
 			:is="outlineComponent"
-			class="tw-absolute tw-h-full"
-			style="height: 105%; width: 105%; top: -4px; left: -4px;"
+			class="tw-absolute tw-h-full tw-top-0"
+			:style="outlineStyles"
 		/>
 		<component v-else-if="isLocked" :is="solidComponent" class="tw-absolute tw-h-full tw-top-0" />
 		<div
@@ -102,6 +102,21 @@ const solidComponent = computed(() => {
 	}
 });
 
+const outlineStyles = computed(() => {
+	switch (props.shape) {
+		case BADGE_SHAPE_ARCH:
+			return { width: '90%', left: '5%' };
+		case BADGE_SHAPE_OBLONG:
+			return { height: '96%', top: '2%' };
+		case BADGE_SHAPE_OVAL:
+			return { width: '103%', left: '-1%' };
+		case BADGE_SHAPE_RECTANGLE:
+			return { width: '94%', left: '3%' };
+		default:
+			return { width: '97%', left: '2%' };
+	}
+});
+
 const handleBadgeClick = () => {
 	if (isLocked.value) {
 		animateLock.value = true;