fix: more issues resolved for the MyKiva TY flow

src/components/Thanks/MyKiva/OptInModule.vue

@@ -8,7 +8,7 @@
 						v-for="loan, index in loansToDisplay"
 						:key="loan.id"
 						:lender-name="loan?.name"
-						:lender-image-url="loan?.image?.url"
+						:lender-image-url="getLoanImageUrl(loan)"
 						class="borrower-image tw-rounded-full tw-shadow"
 						:class="{
 							'centered-borrower-image' : index === 1 && loansToDisplay.length === 3,
@@ -62,6 +62,7 @@ import {
 	MOBILE_BREAKPOINT,
 } from '#src/composables/useBadgeModal';
 import KvUserAvatar from '#kv-components/KvUserAvatar';
+import { getKivaImageUrl } from '#src/util/imageUtils';
 import OptInNotification from './OptInNotification';
 
 const props = defineProps({
@@ -81,6 +82,7 @@ const props = defineProps({
 
 const apollo = inject('apollo');
 const $kvTrackEvent = inject('$kvTrackEvent');
+const $appConfig = inject('$appConfig');
 const newConsentAnswered = ref(false);
 const receiveNews = ref(false);
 
@@ -167,6 +169,15 @@ const updateOptIn = value => {
 	newConsentAnswered.value = true;
 	receiveNews.value = value;
 };
+
+const getLoanImageUrl = loan => {
+	return getKivaImageUrl({
+		height: 500,
+		width: 500,
+		base: $appConfig.photoPath,
+		hash: loan?.image?.hash,
+	});
+};
 </script>
 
 <style lang="postcss" scoped>

src/components/Thanks/MyKiva/ThanksBadges.vue

@@ -12,12 +12,12 @@
 		/>
 		<!-- Badges module -->
 		<div
-			v-if="isLoading || hasBadgeData"
+			v-if="(badgesAchieved.length || isGuest) && (isLoading || hasBadgeData)"
 			class="content-box tw-flex tw-flex-col tw-items-center tw-gap-1.5 tw-text-center tw-overflow-hidden"
 			:class="{ 'tw-relative' : showBadgeRays }"
 		>
 			<!-- BG Rays -->
-			<div v-show="showBadgeRays" class="ray_box">
+			<div v-show="!isLoading && showBadgeRays" class="ray_box">
 				<div class="ray ray1"></div>
 				<div class="ray ray2"></div>
 				<div class="ray ray3"></div>

src/composables/useBadgeData.js

@@ -346,13 +346,20 @@ export default function useBadgeData() {
 			}
 		} else if (badge?.achievementData?.tiers?.length) {
 			const tiers = JSON.parse(JSON.stringify(badge.achievementData.tiers));
-			tiers.sort((a, b) => new Date(a.completedDate) - new Date(b.completedDate));
+			// Sort by completed date descending
+			tiers.sort((a, b) => {
+				// Handle when tiers were achieved at the same time
+				if (a.completedDate === b.completedDate) {
+					return b.level - a.level;
+				}
+				return new Date(b.completedDate) - new Date(a.completedDate);
+			});
 			const levelIndex = tiers[0].level - 1;
 			const contentfulData = badge.contentfulData[levelIndex];
 			return {
 				...badge,
 				contentfulData,
-				achievementData: tiers[levelIndex],
+				achievementData: tiers[0],
 				// eslint-disable-next-line max-len
 				levelName: `${(contentfulData.challengeName ?? '')}${(contentfulData.levelName ? ' ' : '')}${(contentfulData.levelName ?? '')}`
 			};

src/graphql/query/postCheckoutAchievements.graphql

@@ -3,6 +3,8 @@ query PostCheckoutAchievements($loanIds: [Int!]!) {
 		overallProgress {
 			id
 			achievementId
+			preCheckoutTier
+			postCheckoutTier
 		}
 	}
 }

src/main.js

@@ -67,6 +67,7 @@ export default function createApp({
 	app.provide('kvAuth0', kvAuth0);
 	app.provide('locale', locale);
 	app.provide('$kvTrackEvent', app.config.globalProperties.$kvTrackEvent); // provide kvTrackEvent for composition api
+	app.provide('$appConfig', appConfig); // provide appConfig for composition api
 
 	// Provide application config to all components
 	app.config.globalProperties.$appConfig = appConfig;

src/pages/Thanks/ThanksPage.vue

@@ -625,7 +625,7 @@ export default {
 		this.optedIn = data?.my?.communicationSettings?.lenderNews || this.$route.query?.optedIn === 'true';
 
 		// MyKiva Badges Experiment
-		if (!this.landedOnUSLoan && !this.printableKivaCards.length) {
+		if (!this.landedOnUSLoan && !this.printableKivaCards.length && hasLentBefore) {
 			this.myKivaEnabled = getIsMyKivaEnabled(
 				this.apollo,
 				this.$kvTrackEvent,
@@ -641,6 +641,8 @@ export default {
 						variables: { loanIds: getLoanIds(this.loans) },
 					});
 					this.badgesAchieved = response?.postCheckoutAchievements?.overallProgress ?? [];
+					// Don't show badges without a new tier achieved
+					this.badgesAchieved = this.badgesAchieved.filter(b => b.preCheckoutTier !== b.postCheckoutTier);
 					// MyKiva view only shown if user is not opted-in or checkout achieved badges
 					this.myKivaEnabled = !this.optedIn || this.badgesAchieved.length > 0;
 				} catch (e) {

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

@@ -452,9 +452,32 @@ describe('useBadgeData.js', () => {
 
 			expect(getLastCompletedBadgeLevelData(badge)).toEqual({
 				...badge,
-				contentfulData: badge.contentfulData[0],
-				achievementData: badge.achievementData.tiers[0],
-				levelName: 'Basic needs 1'
+				contentfulData: badge.contentfulData[1],
+				achievementData: badge.achievementData.tiers[1],
+				levelName: 'Basic needs 2'
+			});
+		});
+
+		it('should return the last completed badge level data when tiers have same completed date', () => {
+			const { getLastCompletedBadgeLevelData } = useBadgeData();
+			const badge = {
+				achievementData: {
+					tiers: [
+						{ level: 1, completedDate: '2024-10-22T18:49:21Z' },
+						{ level: 2, completedDate: '2024-10-22T18:49:21Z' }
+					]
+				},
+				contentfulData: [
+					{ challengeName: 'Basic needs', levelName: '1' },
+					{ challengeName: 'Basic needs', levelName: '2' }
+				]
+			};
+
+			expect(getLastCompletedBadgeLevelData(badge)).toEqual({
+				...badge,
+				contentfulData: badge.contentfulData[1],
+				achievementData: badge.achievementData.tiers[1],
+				levelName: 'Basic needs 2'
 			});
 		});