Skip to content

feat: [mp-2445] - adjust screen 03 impact insights #6610

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
cristhianDt merged 4 commits into from
Jan 30, 2026
+132 −35
Merged

feat: [mp-2445] - adjust screen 03 impact insights #6610

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
28e0aeb
feat: [MP-2445] - done make modal slides dynamic if it is a loanPartn…
cristhianDt Jan 30, 2026
2f02b2b
feat: [MP-2445] - clean code
cristhianDt Jan 30, 2026
b8e6b34
feat: [MP-2445] - missed commit
cristhianDt Jan 30, 2026
29c7a0f
feat: [MP-2445] - PR fdb use classes instead of rules
cristhianDt Jan 30, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 36 additions & 2 deletions .storybook/stories/MyKivaImpactInsightModal.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,40 @@ export const Default = story({
whySpecial: 'She is a community leader.',
gender: 'female',
otherLoans: [],
amount: '-75.00'
},
amount: '-75.00',
partner: {
id: 123,
loansPosted: 4567,
__typename: 'LoanPartner',
},
},
});

export const NonPartner = story({
visible: true,
latestLoan: {
id: 1975833,
name: 'Mayram',
image: {
hash: '9673d0722a7675b9b8d11f90849d9b44',
},
geocode: {
country: {
geocode:{
latitude: -16,
longitude: 167
},
id: 231,
isoCode: 'VU',
name: 'Vanuatu',
ppp: '$89,599'
}
},
amount: 100,
whySpecial: 'She is a community leader.',
gender: 'female',
otherLoans: [],
amount: '-75.00',
partner: null,
},
});
35 changes: 19 additions & 16 deletions src/components/MyKiva/ImpactInsight/MyKivaImpactInsightModal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,9 +38,16 @@
<MyKivaImpactInsightScreen2 :latest-loan="latestLoan" />
</template>
<template #slide3>
<MyKivaImpactInsightScreen3 :latest-loan="latestLoan" />
<MyKivaImpactInsightScreen3
v-if="isLoanPartner"
:latest-loan="latestLoan"
/>
<MyKivaImpactInsightScreen4
v-else
:latest-loan="latestLoan"
/>
</template>
<template #slide4>
<template v-if="isLoanPartner" #slide4>
<MyKivaImpactInsightScreen4 :latest-loan="latestLoan" />
</template>
</KvCarousel>
Expand Down Expand Up @@ -110,14 +117,19 @@ const $kvTrackEvent = inject('$kvTrackEvent');
const currentSlide = ref(0);
const carouselRef = ref(null);

const totalSlides = 4;
const { isMobile } = useBreakpoints();

const isLoanPartner = computed(() => {
return !!props.latestLoan?.partner?.loansPosted;
});

const totalSlides = computed(() => (isLoanPartner.value ? 4 : 3));

const borrowerName = computed(() => {
return formatPossessiveName(props.latestLoan?.name) || '';
});

const isLastSlide = computed(() => currentSlide.value === totalSlides - 1);
const isLastSlide = computed(() => currentSlide.value === totalSlides.value - 1);

const handleTrackEvent = () => {
$kvTrackEvent('portfolio', 'view', `impact-education-screen-${currentSlide.value + 1}`);
Expand All @@ -139,7 +151,7 @@ const goToPrev = () => {
};

const goToNext = () => {
if (currentSlide.value < totalSlides - 1) {
if (currentSlide.value < totalSlides.value - 1) {
const newIndex = currentSlide.value + 1;
carouselRef.value?.goToSlide(newIndex);
currentSlide.value = newIndex;
Expand Down Expand Up @@ -171,23 +183,14 @@ onMounted(() => {
</script>

<style lang="postcss">
.impact-insight-modal ::v-deep #kvLightboxBody {
height: 771px;
width: 100%;

@screen md {
height: 384px;
width: 952px;
}
}

.impact-insight-modal {
.impact-insight-carousel {
@apply md:!tw-mb-2
}

.tw-bg-primary:has(#kvLightboxBody) {
max-height: 528px;
#kvLightboxBody {
@apply tw-overflow-x-hidden;
}

.impact-insight-carousel div:has(.impact-insight-slide) {
Expand Down
2 changes: 1 addition & 1 deletion src/components/MyKiva/ImpactInsight/MyKivaImpactInsightScreen1.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
</div>
</div>
<div
class="tw-px-4 md:!tw-px-0 screen-description"
class="tw-px-0 screen-description"
>
<p
v-html="loanDescription"
Expand Down
2 changes: 1 addition & 1 deletion src/components/MyKiva/ImpactInsight/MyKivaImpactInsightScreen2.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
</div>
</div>
<div
class="tw-px-4 md:!tw-px-0 screen-description"
class="tw-px-0 screen-description"
>
<p
class="tw-rounded-2xl tw-bg-slate-100 tw-py-2 tw-px-2 md:!tw-px-3
Expand Down
12 changes: 6 additions & 6 deletions src/components/MyKiva/ImpactInsight/MyKivaImpactInsightScreen3.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,15 +35,16 @@
</div>
</div>
<div
class="tw-px-4 md:!tw-px-0 screen-description"
class="tw-px-0 screen-description"
>
<p
class="tw-rounded-2xl tw-bg-slate-100 tw-py-2 tw-px-2 md:!tw-px-3
tw-text-base tw-leading-relaxed tw-bg-gray-100 tw-rounded-md md:tw-text-lg"
>
{{ name }} isn't on this journey alone. They're working with a
Kiva lending partner that's already helped
<strong class="tw-text-brand">{{ helpedPeopleInCountry }}</strong> people in their region.
Kiva lending partner that's already given
<strong class="tw-text-brand">{{ loansPosted }}</strong> loans to
support their region.
</p>
</div>
</div>
Expand All @@ -68,9 +69,8 @@ const name = computed(() => {
return props.latestLoan?.name || '';
});

const helpedPeopleInCountry = computed(() => {
// pending BE change to get helpedPeopleInCountry field, on MP-2431 (update storybook when done)
return numeral(46716).format('0,0[.]00');
const loansPosted = computed(() => {
return numeral(props.latestLoan?.partner?.loansPosted || 0).format('0,0[.]00');
});

</script>
Expand Down
74 changes: 65 additions & 9 deletions src/components/MyKiva/ImpactInsight/MyKivaImpactInsightScreen4.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,17 @@
<template>
<section class="tw-w-full tw-px-2 md:tw-pl-7 md:tw-pr-3 impact-insight-slide">
<section
class="tw-w-full tw-px-2 md:tw-pr-3 impact-insight-slide"
:class="isLoanPartner ? 'md:tw-pl-7' : 'md:tw-pl-10'"
>
<div class="tw-mx-auto md:!tw-max-w-4xl">
<div
class="tw-flex tw-flex-col tw-items-center
md:tw-flex-row md:tw-items-center md:!tw-justify-center"
:class="isLoanPartner ? 'tw-gap-4 md:tw-gap-11' : 'tw-gap-4 md:tw-gap-14'"
>
<!-- 4 rings layout (when partner exists) -->
<div
v-if="isLoanPartner"
class="tw-flex tw-items-center tw-justify-center tw-rounded-full tw-border-4 tw-border-stone-2
tw-bg-stone-1 tw-text-center min-stone-circle-size"
>
Expand Down Expand Up @@ -39,6 +45,37 @@
</div>
</div>
</div>
<!-- 3 rings layout (when no partner) -->
<div
v-else
class="tw-flex tw-items-center tw-justify-center tw-rounded-full tw-border-4 tw-border-desert-rose-2
tw-bg-danger-highlight tw-text-center min-ext-circle-size"
>
<div
class="tw-flex tw-items-center tw-justify-center tw-rounded-full tw-border-4 tw-border-marigold
tw-text-center min-big-circle-size"
>
<div
class="tw-flex tw-items-center tw-justify-center tw-rounded-full
tw-border-4 tw-border-brand-500 tw-text-center min-circle-size"
>
<div class="tw-items-center tw-gap-3">
<div
class="tw-h-6.5 tw-w-6.5 tw-overflow-hidden tw-my-0
tw-mx-auto md:!tw-h-8 md:!tw-w-8"
>
<IconGlobeDark
class="tw-w-full tw-h-full tw-object-cover" viewBox="0 0 56 56"
/>
</div>

<div class="tw-text-lg tw-font-semibold tw-text-slate-900">
<strong>Global change</strong>
</div>
</div>
</div>
</div>
</div>
<div
class="tw-px-0 screen-description"
>
Expand All @@ -65,6 +102,10 @@ const props = defineProps({
}
});

const isLoanPartner = computed(() => {
return !!props.latestLoan?.partner?.loansPosted;
});

const description = computed(() => {
const text = props.latestLoan?.gender === 'female'
? '<strong class="tw-text-brand">8 out of 10 women</strong> earned more income after getting their loan'
Expand All @@ -77,6 +118,7 @@ const description = computed(() => {
</script>

<style lang="postcss" scoped>
/* 4 rings styles */
.min-stone-circle-size {
min-height: 291px;
min-width: 291px;
Expand Down Expand Up @@ -107,21 +149,35 @@ const description = computed(() => {
}
}

.min-circle-size {
min-height: 145px;
min-width: 145px;
/* 3 rings styles (same as Screen3) */
.min-ext-circle-size {
min-height: 243px;
min-width: 243px;

@screen md {
min-height: 168px;
min-width: 168px;
min-height: 268px;
min-width: 268px;
}
}

div:has(.screen-description) {
gap: 2rem;
.min-big-circle-size {
min-height: 194px;
min-width: 194px;

@screen md {
gap: 5.5rem;
min-height: 218px;
min-width: 218px;
}
}

/* Shared inner circle */
.min-circle-size {
min-height: 145px;
min-width: 145px;

@screen md {
min-height: 168px;
min-width: 168px;
}
}

Expand Down
4 changes: 4 additions & 0 deletions src/graphql/query/myKiva.graphql
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -155,6 +155,10 @@ query myKivaQuery {
borrowerCount
... on LoanPartner {
themes
partner {
id
loansPosted
}
}
}
}
Expand Down
Loading