From 32c8b3c470bd3202123d598fea26c5050c41ebb4 Mon Sep 17 00:00:00 2001 From: Casey Dyer Date: Wed, 4 Dec 2024 14:57:39 -0800 Subject: [PATCH 1/5] fix: don't how badges without new tier achieved, only show MyKiva TY when loans checked out --- src/graphql/query/postCheckoutAchievements.graphql | 2 ++ src/pages/Thanks/ThanksPage.vue | 4 +++- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/graphql/query/postCheckoutAchievements.graphql b/src/graphql/query/postCheckoutAchievements.graphql index cc682748b3..47b974c9c1 100644 --- a/src/graphql/query/postCheckoutAchievements.graphql +++ b/src/graphql/query/postCheckoutAchievements.graphql @@ -3,6 +3,8 @@ query PostCheckoutAchievements($loanIds: [Int!]!) { overallProgress { id achievementId + preCheckoutTier + postCheckoutTier } } } diff --git a/src/pages/Thanks/ThanksPage.vue b/src/pages/Thanks/ThanksPage.vue index d96cff8117..9bf7b2fd92 100644 --- a/src/pages/Thanks/ThanksPage.vue +++ b/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) { From 4fb6ae902c1f19135ca73672e39be790145a76bb Mon Sep 17 00:00:00 2001 From: Casey Dyer Date: Wed, 4 Dec 2024 14:59:12 -0800 Subject: [PATCH 2/5] fix: only show badges module when badges achieved or guest, don't show rays on loading --- src/components/Thanks/MyKiva/ThanksBadges.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Thanks/MyKiva/ThanksBadges.vue b/src/components/Thanks/MyKiva/ThanksBadges.vue index 0bb9d35232..3458717b74 100644 --- a/src/components/Thanks/MyKiva/ThanksBadges.vue +++ b/src/components/Thanks/MyKiva/ThanksBadges.vue @@ -12,12 +12,12 @@ />
-
+
From 7d05a89f2b48d704db6d537f0800c1f801cfc0a2 Mon Sep 17 00:00:00 2001 From: Casey Dyer Date: Wed, 4 Dec 2024 15:22:09 -0800 Subject: [PATCH 3/5] fix: get the correct completed tier, handle when tiers completed at the same time --- src/composables/useBadgeData.js | 9 ++++-- .../specs/composables/useBadgeData.spec.js | 29 +++++++++++++++++-- 2 files changed, 33 insertions(+), 5 deletions(-) diff --git a/src/composables/useBadgeData.js b/src/composables/useBadgeData.js index aa40abf81b..a100f6cfbc 100644 --- a/src/composables/useBadgeData.js +++ b/src/composables/useBadgeData.js @@ -346,13 +346,18 @@ 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)); + tiers.sort((a, b) => { + 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 ?? '')}` }; diff --git a/test/unit/specs/composables/useBadgeData.spec.js b/test/unit/specs/composables/useBadgeData.spec.js index 2ba53f21e8..b87a18fec5 100644 --- a/test/unit/specs/composables/useBadgeData.spec.js +++ b/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' }); }); From d4e9dad4434c1694157dcf170ac5fd6affc447d7 Mon Sep 17 00:00:00 2001 From: Casey Dyer Date: Wed, 4 Dec 2024 15:29:27 -0800 Subject: [PATCH 4/5] fix: add clarifying comment --- src/composables/useBadgeData.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/composables/useBadgeData.js b/src/composables/useBadgeData.js index a100f6cfbc..340a914b81 100644 --- a/src/composables/useBadgeData.js +++ b/src/composables/useBadgeData.js @@ -346,7 +346,9 @@ export default function useBadgeData() { } } else if (badge?.achievementData?.tiers?.length) { const tiers = JSON.parse(JSON.stringify(badge.achievementData.tiers)); + // 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; } From c795c3e49df086695f538b60fedde80acaabac4a Mon Sep 17 00:00:00 2001 From: Casey Dyer Date: Wed, 4 Dec 2024 15:54:31 -0800 Subject: [PATCH 5/5] fix: enhance image quality --- src/components/Thanks/MyKiva/OptInModule.vue | 13 ++++++++++++- src/main.js | 1 + 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/src/components/Thanks/MyKiva/OptInModule.vue b/src/components/Thanks/MyKiva/OptInModule.vue index 419d16f43f..2676179332 100644 --- a/src/components/Thanks/MyKiva/OptInModule.vue +++ b/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, + }); +};