feat: my kiva first login for guest claim flow

src/graphql/query/myKiva.graphql

@@ -53,6 +53,7 @@ query myKivaQuery {
         id
         url
       }
+      memberSince
     }
     userAccount {
       id

src/pages/Portfolio/MyKiva/MyKivaPage.vue

@@ -156,7 +156,7 @@ import useBadgeData, { MY_IMPACT_JOURNEYS_ID, MY_ACHIEVEMENTS_ID } from '#src/co
 import EarnedBadgesSection from '#src/components/MyKiva/EarnedBadgesSection';
 import { STATE_JOURNEY, STATE_EARNED, STATE_IN_PROGRESS } from '#src/composables/useBadgeModal';
 import useUserPreferences from '#src/composables/useUserPreferences';
-import { hasLoanFunFactFootnote } from '#src/util/myKivaUtils';
+import { hasLoanFunFactFootnote, isFirstLogin } from '#src/util/myKivaUtils';
 import {
 	ref,
 	computed,
@@ -170,6 +170,7 @@ const MY_KIVA_EXP_KEY = 'my_kiva_page';
 
 const apollo = inject('apollo');
 const $kvTrackEvent = inject('$kvTrackEvent');
+const kvAuth0 = inject('kvAuth0');
 
 const {
 	fetchAchievementData,
@@ -301,6 +302,46 @@ const saveMyKivaToUserPreferences = () => {
 	}
 };
 
+const badgesAchieved = computed(() => {
+	const completedBadgesArr = [];
+
+	badgeData.value.forEach(badge => {
+		if (badge.achievementData?.tiers?.length) {
+			const { tiers } = badge.achievementData;
+			tiers.forEach(tierObj => {
+				if (tierObj.completedDate) {
+					completedBadgesArr.push(badge);
+				}
+			});
+		}
+		if (badge.achievementData?.milestoneProgress?.length) {
+			const earnedAtDate = badge.achievementData?.milestoneProgress?.[0]?.earnedAtDate;
+			if (earnedAtDate) {
+				completedBadgesArr.push(badge);
+			}
+		}
+	});
+
+	return completedBadgesArr;
+});
+
+const scrollToTarget = target => {
+	const targetElement = document.getElementById(target);
+	if (targetElement) {
+		targetElement.scrollIntoView({ behavior: 'smooth' });
+	}
+};
+
+const checkGuestAchievementsToScroll = () => {
+	const lastLogin = kvAuth0.user?.exp;
+	const memberSince = lender.value?.memberSince;
+	if (isFirstLogin(lastLogin, memberSince)) {
+		const numberOfBadges = badgesAchieved.value.length;
+		const sectionToScrollTo = numberOfBadges.value === 1 ? MY_IMPACT_JOURNEYS_ID : MY_ACHIEVEMENTS_ID;
+		scrollToTarget(sectionToScrollTo);
+	}
+};
+
 onMounted(async () => {
 	trackExperimentVersion(
 		apollo,
@@ -323,10 +364,8 @@ watch(isAchievementDataLoaded, () => {
 		nextTick(() => {
 			// Scroll to section once async data is loaded
 			const targetId = window?.location?.hash?.replace('#', '');
-			const targetElement = document?.getElementById(targetId);
-			if (targetElement) {
-				targetElement.scrollIntoView({ behavior: 'smooth' });
-			}
+			if (targetId) scrollToTarget(targetId);
+			checkGuestAchievementsToScroll();
 		});
 	}
 });

src/util/myKivaUtils.js

@@ -1,3 +1,7 @@
+import { differenceInMinutes, fromUnixTime } from 'date-fns';
+
+const FIRST_LOGIN_THRESHOLD = 5;
+
 /**
  * Determines whether the provided loan needs a footnote
  *
@@ -19,3 +23,22 @@ export const hasLoanFunFactFootnote = loan => {
 			return false;
 	}
 };
+
+/**
+ * Determines whether is first login for the user
+ *
+ * @param lastLogin last login time from token access
+ * @param memberSince member since time from user data
+ * @returns Whether the user is logging in for the first time
+ */
+export const isFirstLogin = (lastLogin, memberSince) => {
+	const lastLoginDate = fromUnixTime(lastLogin);
+	lastLoginDate.setHours(lastLoginDate.getHours() - 1);
+
+	const minutesDiff = differenceInMinutes(
+		lastLoginDate,
+		new Date(memberSince),
+	);
+
+	return minutesDiff < FIRST_LOGIN_THRESHOLD;
+};

test/unit/specs/util/myKivaUtils.spec.js

@@ -1,4 +1,5 @@
-import { hasLoanFunFactFootnote } from '#src/util/myKivaUtils';
+import { getUnixTime } from 'date-fns';
+import { hasLoanFunFactFootnote, isFirstLogin } from '#src/util/myKivaUtils';
 
 describe('myKivaUtils.js', () => {
 	describe('hasLoanFunFactFootnote', () => {
@@ -88,4 +89,28 @@ describe('myKivaUtils.js', () => {
 			expect(result).toBe(false);
 		});
 	});
+
+	describe('isFirstLogin', () => {
+		it('should return true for first login user', () => {
+			const memberSince = new Date();
+			let lastLogin = new Date(memberSince);
+			lastLogin.setMinutes(lastLogin.getMinutes() + 62);
+			lastLogin = getUnixTime(lastLogin);
+
+			const result = isFirstLogin(lastLogin, memberSince);
+
+			expect(result).toBe(true);
+		});
+
+		it('should return false if not first login user', () => {
+			const memberSince = new Date();
+			let lastLogin = new Date(memberSince);
+			lastLogin.setMinutes(lastLogin.getMinutes() + 82);
+			lastLogin = getUnixTime(lastLogin);
+
+			const result = isFirstLogin(lastLogin, memberSince);
+
+			expect(result).toBe(false);
+		});
+	});
 });