From 91bee783314994c7d73f4c925f1b72e5fd626936 Mon Sep 17 00:00:00 2001
From: crisT <cristhiant@kiva.org>
Date: Wed, 28 Jan 2026 16:32:15 -0500
Subject: [PATCH 1/6] feat: [MP-2376] - done events and impact insights modal
 feature

---
 .../MyKivaImpactInsightModal.stories.js       |  51 ++++
 .../Contentful/JourneyCardCarousel.vue        |   3 +-
 .../MyKivaImpactInsightModal.vue              | 220 ++++++++++++++++++
 .../MyKivaImpactInsightScreen1.vue            |  34 +--
 .../MyKivaImpactInsightScreen2.vue            |  33 +--
 .../MyKivaImpactInsightScreen3.vue            |  32 +--
 .../MyKivaImpactInsightScreen4.vue            |  26 +--
 src/components/MyKiva/LendingStats.vue        |  17 ++
 .../MyKiva/MyKivaLatestLoanCard.vue           |   8 +-
 9 files changed, 363 insertions(+), 61 deletions(-)
 create mode 100644 .storybook/stories/MyKivaImpactInsightModal.stories.js
 create mode 100644 src/components/MyKiva/ImpactInsight/MyKivaImpactInsightModal.vue

diff --git a/.storybook/stories/MyKivaImpactInsightModal.stories.js b/.storybook/stories/MyKivaImpactInsightModal.stories.js
new file mode 100644
index 00000000000..fd76957f3c9
--- /dev/null
+++ b/.storybook/stories/MyKivaImpactInsightModal.stories.js
@@ -0,0 +1,51 @@
+import MyKivaImpactInsightModal from '#src/components/MyKiva/ImpactInsight/MyKivaImpactInsightModal.vue';
+
+export default {
+    title: 'MyKiva/ImpactInsight/ImpactInsightModal',
+	component: MyKivaImpactInsightModal,
+};
+
+const story = (args) => {
+	const template = (_args, { argTypes }) => ({
+		props: Object.keys(argTypes),
+		components: { MyKivaImpactInsightModal },
+		setup() { return { args }; },
+		template: `
+			<div>
+				<MyKivaImpactInsightModal
+					v-bind="args"
+				/>
+			</div>
+		`,
+	});
+	template.args = args;
+	return template;
+};
+
+export const Default = 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'
+	},
+});
diff --git a/src/components/Contentful/JourneyCardCarousel.vue b/src/components/Contentful/JourneyCardCarousel.vue
index 0da928c26fa..8bee9ec1404 100644
--- a/src/components/Contentful/JourneyCardCarousel.vue
+++ b/src/components/Contentful/JourneyCardCarousel.vue
@@ -96,6 +96,7 @@
 				<MyKivaLatestLoanCard
 					v-else-if="slide?.isLatestLoan"
 					:loan="latestLoan"
+					@open-impact-insight-modal="$emit('open-impact-insight-modal')"
 				/>
 				<MyKivaCard
 					v-else-if="isCustomCard(slide)"
@@ -185,7 +186,7 @@ const {
 
 const { getCategoryLoansLastYear } = useGoalData();
 
-const emit = defineEmits(['update-journey', 'open-goal-modal']);
+const emit = defineEmits(['update-journey', 'open-goal-modal', 'open-impact-insight-modal']);
 
 const props = defineProps({
 	userInfo: {
diff --git a/src/components/MyKiva/ImpactInsight/MyKivaImpactInsightModal.vue b/src/components/MyKiva/ImpactInsight/MyKivaImpactInsightModal.vue
new file mode 100644
index 00000000000..561d6154f5f
--- /dev/null
+++ b/src/components/MyKiva/ImpactInsight/MyKivaImpactInsightModal.vue
@@ -0,0 +1,220 @@
+<template>
+	<KvLightbox
+		:visible="show"
+		title=""
+		@lightbox-closed="handleClose"
+		class="impact-insight-modal"
+	>
+		<template #header>
+			<h2
+				v-if="!isMobile"
+				class="tw-mb-3 !tw-text-left"
+			>
+				A closer look at <u>{{ borrowerName }} world</u>
+			</h2>
+		</template>
+		<h2
+			v-if="isMobile"
+			class="tw-mb-3 !tw-text-left"
+		>
+			A closer look at <u>{{ borrowerName }} world</u>
+		</h2>
+		<div class="tw-flex tw-flex-col tw-items-center tw-w-full">
+			<KvCarousel
+				ref="carouselRef"
+				:is-dotted="true"
+				:new-index="carouselIndex"
+				:slide-max-width="''"
+				:controls-top-right="false"
+				:multiple-slides-visible="false"
+				:embla-options="{ loop: false, startIndex: 0 }"
+				class="impact-insight-carousel"
+				@change="handleUserInteraction"
+			>
+				<template #slide1>
+					<MyKivaImpactInsightScreen1 :latest-loan="latestLoan" />
+				</template>
+				<template #slide2>
+					<MyKivaImpactInsightScreen2 :latest-loan="latestLoan" />
+				</template>
+				<template #slide3>
+					<MyKivaImpactInsightScreen3 :latest-loan="latestLoan" />
+				</template>
+				<template #slide4>
+					<MyKivaImpactInsightScreen4 :latest-loan="latestLoan" />
+				</template>
+				<!-- dots class: "tw-flex tw-justify-start tw-items-center tw-max-w-xl tw-gap-3 tw-absolute",
+					style: "bottom: 13rem; left: 26%;" -->
+			</KvCarousel>
+
+			<div
+				class="tw-static tw-w-full impact-insight-footer"
+			>
+				<div
+					class="tw-flex tw-justify-self-end tw-w-full tw-h-6
+							tw-gap-2 tw-float-end secondary-navigation-buttons"
+				>
+					<button
+						v-if="currentSlide > 0"
+						class="tw-w-11 tw-text-center tw-border tw-rounded-lg
+								tw-bg-white tw-text-gray-900 tw-font-medium"
+						:disabled="currentSlide === 0"
+						@click="goToPrev"
+					>
+						Back
+					</button>
+					<button
+						class="tw-w-11 tw-text-center tw-rounded-lg tw-bg-action tw-text-white
+								tw-font-medium hover:tw-bg-action-highlight"
+						@click="handleNextOrDone"
+					>
+						{{ isLastSlide ? 'Done' : 'Next' }}
+					</button>
+				</div>
+			</div>
+		</div>
+	</KvLightbox>
+</template>
+
+<script setup lang="ts">
+import {
+	ref, computed, defineProps, defineEmits,
+	inject, onMounted
+} from 'vue';
+
+import { KvLightbox, KvCarousel } from '@kiva/kv-components';
+
+import { MOBILE_BREAKPOINT } from '#src/composables/useBadgeModal';
+import useIsMobile from '#src/composables/useIsMobile';
+import { formatPossessiveName } from '#src/util/stringParserUtils';
+import MyKivaImpactInsightScreen1 from './MyKivaImpactInsightScreen1';
+import MyKivaImpactInsightScreen2 from './MyKivaImpactInsightScreen2';
+import MyKivaImpactInsightScreen3 from './MyKivaImpactInsightScreen3';
+import MyKivaImpactInsightScreen4 from './MyKivaImpactInsightScreen4';
+
+const props = defineProps({
+	show: {
+		type: Boolean,
+		default: false,
+	},
+	latestLoan: {
+		type: Object,
+		default: null,
+	},
+});
+
+const emit = defineEmits(['close']);
+const $kvTrackEvent = inject('$kvTrackEvent');
+
+const currentSlide = ref(0);
+const carouselRef = ref(null);
+
+const carouselIndex = computed(() => currentSlide.value);
+
+const totalSlides = 4;
+const { isMobile } = useIsMobile(MOBILE_BREAKPOINT);
+
+const borrowerName = computed(() => {
+	return formatPossessiveName(props.latestLoan?.name) || '';
+});
+
+const isLastSlide = computed(() => currentSlide.value === totalSlides - 1);
+
+const handleTrackEvent = () => {
+	$kvTrackEvent('portfolio', 'view', `impact-education-screen-${currentSlide.value + 1}`);
+};
+
+const handleClose = () => {
+	emit('close');
+	currentSlide.value = 0;
+};
+
+const goToPrev = () => {
+	if (currentSlide.value > 0) {
+		currentSlide.value -= 1;
+		$kvTrackEvent('portfolio', 'click', 'next-step-impact-education-back');
+		handleTrackEvent();
+	}
+};
+
+const goToNext = () => {
+	if (currentSlide.value < totalSlides - 1) {
+		currentSlide.value += 1;
+	}
+};
+
+const handleNextOrDone = () => {
+	if (isLastSlide.value) {
+		handleClose();
+	} else {
+		goToNext();
+		$kvTrackEvent('portfolio', 'click', 'next-step-impact-education-next');
+		handleTrackEvent();
+	}
+};
+
+const handleUserInteraction = interaction => {
+	const newIndex = interaction.value;
+	if (typeof newIndex === 'number' && newIndex !== currentSlide.value) {
+		currentSlide.value = newIndex;
+		handleTrackEvent();
+	}
+};
+
+onMounted(() => {
+	$kvTrackEvent('portfolio', 'view', 'impact-education-screen-1');
+});
+
+</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
+	}
+
+	.impact-insight-carousel div:first-child {
+		@apply !tw-items-center;
+	}
+
+	.tw-bg-primary:has(#kvLightboxBody) {
+		max-height: 528px;
+	}
+
+	.kv-carousel__controls {
+		/* width: auto;
+		left: 25%; */
+		gap: 10px;
+		flex-wrap: wrap;
+		max-width: 50%;
+
+		@apply tw-flex tw-items-center tw-gap-1 tw-z-sticky md:!tw-mt-5;
+	}
+
+	.impact-insight-footer {
+		/* min-height: 64px; */
+		max-height: 48px;
+
+		.secondary-navigation-buttons {
+			width: auto;
+
+			@apply md:!tw-absolute;
+
+			@screen md {
+				bottom: 21%;
+			}
+
+		}
+	}
+}
+</style>
diff --git a/src/components/MyKiva/ImpactInsight/MyKivaImpactInsightScreen1.vue b/src/components/MyKiva/ImpactInsight/MyKivaImpactInsightScreen1.vue
index 1f0d9244c08..96bc459ffa6 100644
--- a/src/components/MyKiva/ImpactInsight/MyKivaImpactInsightScreen1.vue
+++ b/src/components/MyKiva/ImpactInsight/MyKivaImpactInsightScreen1.vue
@@ -1,13 +1,9 @@
 <template>
-	<section class="tw-w-full tw-px-2 md:!tw-py-10 md:!tw-px-10">
-		<div class="tw-mx-auto tw-max-w-6xl">
-			<!-- Title -->
-			<h2 class="">
-				A closer look at <u>{{ borrowerName }} world</u>
-			</h2>
+	<section class="tw-w-full tw-px-2 md:!tw-pr-3 impact-insight-slide">
+		<div class="tw-mx-auto md:!tw-max-w-4xl">
 			<div
-				class="tw-mt-10 tw-flex tw-flex-col tw-items-center tw-gap-10
-						md:tw-mt-14 md:tw-flex-row md:tw-items-center md:!tw-justify-center"
+				class="tw-flex tw-flex-col tw-items-center
+						md:tw-flex-row md:tw-items-center md:!tw-justify-center"
 			>
 				<div
 					class="tw-flex tw-items-center tw-justify-center tw-rounded-full tw-border-4 tw-border-brand-500
@@ -35,7 +31,7 @@
 					</div>
 				</div>
 				<div
-					class="tw-w-full tw-max-w-xl tw-px-4 md:!tw-px-0"
+					class="tw-px-4 md:!tw-px-0 screen-description"
 				>
 					<p
 						v-html="loanDescription"
@@ -55,8 +51,6 @@ import {
 import { computed } from 'vue';
 import numeral from 'numeral';
 
-import { formatPossessiveName } from '#src/util/stringParserUtils';
-
 const props = defineProps({
 	latestLoan: {
 		type: Object,
@@ -64,10 +58,6 @@ const props = defineProps({
 	}
 });
 
-const borrowerName = computed(() => {
-	return formatPossessiveName(props.latestLoan?.name) || '';
-});
-
 const name = computed(() => {
 	return props.latestLoan?.name || '';
 });
@@ -134,4 +124,18 @@ const loanDescription = computed(() => {
 		width: 60px;
 	}
 }
+
+.impact-insight-slide {
+	@screen md {
+		padding-left: 130px;
+	}
+}
+
+div:has(.screen-description) {
+	gap: 10rem;
+}
+
+.screen-description {
+	width: 400px;
+}
 </style>
diff --git a/src/components/MyKiva/ImpactInsight/MyKivaImpactInsightScreen2.vue b/src/components/MyKiva/ImpactInsight/MyKivaImpactInsightScreen2.vue
index 76139a57774..26015181801 100644
--- a/src/components/MyKiva/ImpactInsight/MyKivaImpactInsightScreen2.vue
+++ b/src/components/MyKiva/ImpactInsight/MyKivaImpactInsightScreen2.vue
@@ -1,12 +1,9 @@
 <template>
-	<section class="tw-w-full tw-px-2 md:!tw-py-10 md:!tw-px-10">
-		<div class="tw-mx-auto tw-max-w-6xl">
-			<h2 class="">
-				A closer look at <u>{{ borrowerName }} world</u>
-			</h2>
+	<section class="tw-w-full tw-px-2 md:!tw-pr-3 impact-insight-slide">
+		<div class="tw-mx-auto md:!tw-max-w-4xl">
 			<div
-				class="tw-mt-10 tw-flex tw-flex-col tw-items-center tw-gap-10
-						md:tw-mt-14 md:tw-flex-row md:tw-items-center md:!tw-justify-center"
+				class="tw-flex tw-flex-col tw-items-center
+						md:tw-flex-row md:tw-items-center md:!tw-justify-center"
 			>
 				<div
 					class="tw-flex tw-items-center tw-justify-center tw-rounded-full tw-border-4 tw-border-marigold
@@ -32,7 +29,7 @@
 					</div>
 				</div>
 				<div
-					class="tw-w-full tw-max-w-xl tw-px-4 md:!tw-px-0"
+					class="tw-px-4 md:!tw-px-0 screen-description"
 				>
 					<p
 						class="tw-rounded-2xl tw-bg-slate-100 tw-py-2 tw-px-2 md:!tw-px-3
@@ -51,8 +48,6 @@
 import IconHeartBgWhite from '#src/assets/images/icon-heart-bg-white.svg';
 import { computed } from 'vue';
 
-import { formatPossessiveName } from '#src/util/stringParserUtils';
-
 const props = defineProps({
 	latestLoan: {
 		type: Object,
@@ -60,10 +55,6 @@ const props = defineProps({
 	}
 });
 
-const borrowerName = computed(() => {
-	return formatPossessiveName(props.latestLoan?.name) || '';
-});
-
 const whySpecial = computed(() => {
 	return props.latestLoan?.whySpecial || '';
 });
@@ -90,4 +81,18 @@ const whySpecial = computed(() => {
 		min-width: 168px;
 	}
 }
+
+.impact-insight-slide {
+	@screen md {
+		padding-left: 104px;
+	}
+}
+
+div:has(.screen-description) {
+	gap: 138px;
+}
+
+.screen-description {
+	width: 400px;
+}
 </style>
diff --git a/src/components/MyKiva/ImpactInsight/MyKivaImpactInsightScreen3.vue b/src/components/MyKiva/ImpactInsight/MyKivaImpactInsightScreen3.vue
index 37188834cba..4017ec83788 100644
--- a/src/components/MyKiva/ImpactInsight/MyKivaImpactInsightScreen3.vue
+++ b/src/components/MyKiva/ImpactInsight/MyKivaImpactInsightScreen3.vue
@@ -1,12 +1,9 @@
 <template>
-	<section class="tw-w-full tw-px-2 md:!tw-py-10 md:!tw-px-10">
-		<div class="tw-mx-auto tw-max-w-6xl">
-			<h2 class="">
-				A closer look at <u>{{ borrowerName }} world</u>
-			</h2>
+	<section class="tw-w-full tw-px-2 md:!tw-pr-3 impact-insight-slide">
+		<div class="tw-mx-auto md:!tw-max-w-4xl">
 			<div
-				class="tw-mt-10 tw-flex tw-flex-col tw-items-center tw-gap-10
-						md:tw-mt-14 md:tw-flex-row md:tw-items-center md:!tw-justify-center"
+				class="tw-flex tw-flex-col tw-items-center
+						md:tw-flex-row md:tw-items-center md:!tw-justify-center"
 			>
 				<div
 					class="tw-flex tw-items-center tw-justify-center tw-rounded-full tw-border-4 tw-border-desert-rose-2
@@ -38,7 +35,7 @@
 					</div>
 				</div>
 				<div
-					class="tw-w-full tw-max-w-xl tw-px-4 md:!tw-px-0"
+					class="tw-px-4 md:!tw-px-0 screen-description"
 				>
 					<p
 						class="tw-rounded-2xl tw-bg-slate-100 tw-py-2 tw-px-2 md:!tw-px-3
@@ -59,7 +56,6 @@ import numeral from 'numeral';
 import { computed } from 'vue';
 
 import IconFarmBgWhite from '#src/assets/images/icon-farm-bg-white.svg';
-import { formatPossessiveName } from '#src/util/stringParserUtils';
 
 const props = defineProps({
 	latestLoan: {
@@ -68,10 +64,6 @@ const props = defineProps({
 	}
 });
 
-const borrowerName = computed(() => {
-	return formatPossessiveName(props.latestLoan?.name) || '';
-});
-
 const name = computed(() => {
 	return props.latestLoan?.name || '';
 });
@@ -113,4 +105,18 @@ const helpedPeopleInCountry = computed(() => {
 		min-width: 168px;
 	}
 }
+
+.impact-insight-slide {
+	@screen md {
+		padding-left: 79px;
+	}
+}
+
+div:has(.screen-description) {
+	gap: 7rem;
+}
+
+.screen-description {
+	width: 400px;
+}
 </style>
diff --git a/src/components/MyKiva/ImpactInsight/MyKivaImpactInsightScreen4.vue b/src/components/MyKiva/ImpactInsight/MyKivaImpactInsightScreen4.vue
index 60608ad75e3..5945ded575b 100644
--- a/src/components/MyKiva/ImpactInsight/MyKivaImpactInsightScreen4.vue
+++ b/src/components/MyKiva/ImpactInsight/MyKivaImpactInsightScreen4.vue
@@ -1,12 +1,9 @@
 <template>
-	<section class="tw-w-full tw-px-2 md:!tw-py-10 md:!tw-px-10">
-		<div class="tw-mx-auto tw-max-w-6xl">
-			<h2 class="">
-				A closer look at <u>{{ borrowerName }} world</u>
-			</h2>
+	<section class="tw-w-full tw-px-2 md:!tw-pl-7 md:!tw-pr-3 impact-insight-slide">
+		<div class="tw-mx-auto md:!tw-max-w-4xl">
 			<div
-				class="tw-mt-10 tw-flex tw-flex-col tw-items-center tw-gap-10
-						md:tw-mt-14 md:tw-flex-row md:tw-items-center md:!tw-justify-center"
+				class="tw-flex tw-flex-col tw-items-center
+						md:tw-flex-row md:tw-items-center md:!tw-justify-center"
 			>
 				<div
 					class="tw-flex tw-items-center tw-justify-center tw-rounded-full tw-border-4 tw-border-stone-2
@@ -43,7 +40,7 @@
 					</div>
 				</div>
 				<div
-					class="tw-w-full tw-max-w-xl tw-px-4 md:!tw-px-0"
+					class="tw-px-4 md:!tw-px-0 screen-description"
 				>
 					<p
 						v-html="description"
@@ -60,7 +57,6 @@
 import { computed } from 'vue';
 
 import IconGlobeDark from '#src/assets/images/icon-globe-dark.svg';
-import { formatPossessiveName } from '#src/util/stringParserUtils';
 
 const props = defineProps({
 	latestLoan: {
@@ -69,10 +65,6 @@ const props = defineProps({
 	}
 });
 
-const borrowerName = computed(() => {
-	return formatPossessiveName(props.latestLoan?.name) || '';
-});
-
 const description = computed(() => {
 	let text = '';
 	if (props.latestLoan?.gender === 'female') {
@@ -130,4 +122,12 @@ const description = computed(() => {
 		min-width: 168px;
 	}
 }
+
+div:has(.screen-description) {
+	gap: 5.5rem;
+}
+
+.screen-description {
+	width: 400px;
+}
 </style>
diff --git a/src/components/MyKiva/LendingStats.vue b/src/components/MyKiva/LendingStats.vue
index 9bfdd74c343..7df8dfc524c 100644
--- a/src/components/MyKiva/LendingStats.vue
+++ b/src/components/MyKiva/LendingStats.vue
@@ -32,6 +32,7 @@
 					:user-info="userInfo"
 					:show-post-lending-next-steps-cards="showPostLendingNextStepsCards"
 					@open-goal-modal="showGoalModal = true"
+					@open-impact-insight-modal="showImpactInsightsModal = true"
 				/>
 			</div>
 			<div class="stats-wrapper tw-bg-white tw-rounded tw-shadow tw-p-1 md:tw-p-2 tw-w-full tw-flex tw-flex-col">
@@ -164,6 +165,7 @@
 			:user-info="userInfo"
 			:show-post-lending-next-steps-cards="showPostLendingNextStepsCards"
 			@open-goal-modal="showGoalModal = true"
+			@open-impact-insight-modal="showImpactInsightsModal = true"
 		/>
 		<GoalSettingModal
 			v-if="isNextStepsExpEnabled && showGoalModal"
@@ -177,6 +179,12 @@
 			@close-goal-modal="closeGoalModal"
 			@set-goal="setGoal"
 		/>
+		<MyKivaImpactInsightModal
+			v-if="showPostLendingNextStepsCards && postLendingNextStepsEnable && showImpactInsightsModal"
+			:show="showImpactInsightsModal"
+			:latest-loan="latestLoan"
+			@close="closeImpactInsightsModal"
+		/>
 	</div>
 </template>
 
@@ -202,6 +210,7 @@ import useDelayUntilVisible from '#src/composables/useDelayUntilVisible';
 import JourneyCardCarousel from '#src/components/Contentful/JourneyCardCarousel';
 
 import { checkPostLendingCardCookie, removePostLendingCardCookie } from '#src/util/myKivaUtils';
+import MyKivaImpactInsightModal from '#src/components/MyKiva/ImpactInsight/MyKivaImpactInsightModal';
 import GoalSettingModal from './GoalSettingModal';
 
 export default {
@@ -210,6 +219,7 @@ export default {
 		GlobeSearchIcon,
 		JourneyCardCarousel,
 		GoalSettingModal,
+		MyKivaImpactInsightModal,
 		KvCheckbox,
 		KvMaterialIcon,
 	},
@@ -280,6 +290,7 @@ export default {
 			interval: null,
 			disconnectRegionWatcher: null,
 			showGoalModal: false,
+			showImpactInsightsModal: false,
 			checkedArr: this.regionsData.map(() => false),
 			isGoalSet: false,
 			recordedGoalSet: false,
@@ -432,6 +443,12 @@ export default {
 				this.recordedGoalSet = true;
 			}
 		},
+		closeImpactInsightsModal() {
+			if (this.showImpactInsightsModal) {
+				this.showImpactInsightsModal = false;
+				this.$kvTrackEvent('portfolio', 'click', 'next-step-close-education');
+			}
+		},
 	},
 };
 </script>
diff --git a/src/components/MyKiva/MyKivaLatestLoanCard.vue b/src/components/MyKiva/MyKivaLatestLoanCard.vue
index 931926c0697..75a01d47124 100644
--- a/src/components/MyKiva/MyKivaLatestLoanCard.vue
+++ b/src/components/MyKiva/MyKivaLatestLoanCard.vue
@@ -54,7 +54,7 @@
 				variant="secondary"
 				v-kv-track-event="['portfolio', 'click', 'next-step-impact-education']"
 				class="tw-w-full tw-mt-1"
-				@click="openModal"
+				@click="$emit('open-impact-insight-modal')"
 			>
 				View impact insights
 			</KvButton>
@@ -71,6 +71,8 @@ import { computed, inject, onMounted } from 'vue';
 import { formatPossessiveName } from '#src/util/stringParserUtils';
 import kvTokensPrimitives from '@kiva/kv-tokens';
 
+defineEmits(['open-impact-insight-modal']);
+
 const $kvTrackEvent = inject('$kvTrackEvent');
 
 const props = defineProps({
@@ -122,10 +124,6 @@ const countriesData = computed(() => {
 	}];
 });
 
-const openModal = () => {
-	// TODO: Implement modal opening logic
-};
-
 onMounted(() => {
 	$kvTrackEvent('portfolio', 'view', 'next-step-impact-education');
 });

From d361e0bfa832fbd5cf897b655d16be0e0c27cefb Mon Sep 17 00:00:00 2001
From: crisT <cristhiant@kiva.org>
Date: Wed, 28 Jan 2026 16:43:28 -0500
Subject: [PATCH 2/6] feat: [MP-2376] - use carousel ref instead of prop
 drilling

---
 .../MyKiva/ImpactInsight/MyKivaImpactInsightModal.vue  | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/MyKiva/ImpactInsight/MyKivaImpactInsightModal.vue b/src/components/MyKiva/ImpactInsight/MyKivaImpactInsightModal.vue
index 561d6154f5f..b55ed1ff5b0 100644
--- a/src/components/MyKiva/ImpactInsight/MyKivaImpactInsightModal.vue
+++ b/src/components/MyKiva/ImpactInsight/MyKivaImpactInsightModal.vue
@@ -109,8 +109,6 @@ const $kvTrackEvent = inject('$kvTrackEvent');
 const currentSlide = ref(0);
 const carouselRef = ref(null);
 
-const carouselIndex = computed(() => currentSlide.value);
-
 const totalSlides = 4;
 const { isMobile } = useIsMobile(MOBILE_BREAKPOINT);
 
@@ -131,7 +129,9 @@ const handleClose = () => {
 
 const goToPrev = () => {
 	if (currentSlide.value > 0) {
-		currentSlide.value -= 1;
+		const newIndex = currentSlide.value - 1;
+		carouselRef.value?.goToSlide(newIndex);
+		currentSlide.value = newIndex;
 		$kvTrackEvent('portfolio', 'click', 'next-step-impact-education-back');
 		handleTrackEvent();
 	}
@@ -139,7 +139,9 @@ const goToPrev = () => {
 
 const goToNext = () => {
 	if (currentSlide.value < totalSlides - 1) {
-		currentSlide.value += 1;
+		const newIndex = currentSlide.value + 1;
+		carouselRef.value?.goToSlide(newIndex);
+		currentSlide.value = newIndex;
 	}
 };
 

From aeaa46399c0d500be8f0d9539a4521629bc70327 Mon Sep 17 00:00:00 2001
From: crisT <cristhiant@kiva.org>
Date: Wed, 28 Jan 2026 16:44:47 -0500
Subject: [PATCH 3/6] feat: [MP-2376] - clean code

---
 .../MyKiva/ImpactInsight/MyKivaImpactInsightModal.vue          | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/components/MyKiva/ImpactInsight/MyKivaImpactInsightModal.vue b/src/components/MyKiva/ImpactInsight/MyKivaImpactInsightModal.vue
index b55ed1ff5b0..e9f9d65e9b2 100644
--- a/src/components/MyKiva/ImpactInsight/MyKivaImpactInsightModal.vue
+++ b/src/components/MyKiva/ImpactInsight/MyKivaImpactInsightModal.vue
@@ -194,8 +194,6 @@ onMounted(() => {
 	}
 
 	.kv-carousel__controls {
-		/* width: auto;
-		left: 25%; */
 		gap: 10px;
 		flex-wrap: wrap;
 		max-width: 50%;
@@ -204,7 +202,6 @@ onMounted(() => {
 	}
 
 	.impact-insight-footer {
-		/* min-height: 64px; */
 		max-height: 48px;
 
 		.secondary-navigation-buttons {

From c5f22f15eacbce6be61a6f8191041db364e028c0 Mon Sep 17 00:00:00 2001
From: crisT <cristhiant@kiva.org>
Date: Wed, 28 Jan 2026 17:43:21 -0500
Subject: [PATCH 4/6] feat: [MP-2375] - fixed mobile design

---
 .../MyKivaImpactInsightModal.vue              | 31 +++++++++++--------
 .../MyKivaImpactInsightScreen1.vue            | 12 +++++--
 .../MyKivaImpactInsightScreen2.vue            | 12 +++++--
 .../MyKivaImpactInsightScreen3.vue            | 12 +++++--
 .../MyKivaImpactInsightScreen4.vue            | 16 +++++++---
 5 files changed, 60 insertions(+), 23 deletions(-)

diff --git a/src/components/MyKiva/ImpactInsight/MyKivaImpactInsightModal.vue b/src/components/MyKiva/ImpactInsight/MyKivaImpactInsightModal.vue
index e9f9d65e9b2..20686cdba88 100644
--- a/src/components/MyKiva/ImpactInsight/MyKivaImpactInsightModal.vue
+++ b/src/components/MyKiva/ImpactInsight/MyKivaImpactInsightModal.vue
@@ -55,7 +55,7 @@
 							tw-gap-2 tw-float-end secondary-navigation-buttons"
 				>
 					<button
-						v-if="currentSlide > 0"
+						v-if="currentSlide > 0 && !isMobile"
 						class="tw-w-11 tw-text-center tw-border tw-rounded-lg
 								tw-bg-white tw-text-gray-900 tw-font-medium"
 						:disabled="currentSlide === 0"
@@ -64,7 +64,7 @@
 						Back
 					</button>
 					<button
-						class="tw-w-11 tw-text-center tw-rounded-lg tw-bg-action tw-text-white
+						class="tw-w-full md:tw-w-11 tw-text-center tw-rounded-lg tw-bg-action tw-text-white
 								tw-font-medium hover:tw-bg-action-highlight"
 						@click="handleNextOrDone"
 					>
@@ -84,8 +84,7 @@ import {
 
 import { KvLightbox, KvCarousel } from '@kiva/kv-components';
 
-import { MOBILE_BREAKPOINT } from '#src/composables/useBadgeModal';
-import useIsMobile from '#src/composables/useIsMobile';
+import useBreakpoints from '#src/composables/useBreakpoints';
 import { formatPossessiveName } from '#src/util/stringParserUtils';
 import MyKivaImpactInsightScreen1 from './MyKivaImpactInsightScreen1';
 import MyKivaImpactInsightScreen2 from './MyKivaImpactInsightScreen2';
@@ -110,7 +109,7 @@ const currentSlide = ref(0);
 const carouselRef = ref(null);
 
 const totalSlides = 4;
-const { isMobile } = useIsMobile(MOBILE_BREAKPOINT);
+const { isMobile } = useBreakpoints();
 
 const borrowerName = computed(() => {
 	return formatPossessiveName(props.latestLoan?.name) || '';
@@ -185,31 +184,37 @@ onMounted(() => {
 		@apply md:!tw-mb-2
 	}
 
-	.impact-insight-carousel div:first-child {
-		@apply !tw-items-center;
-	}
-
 	.tw-bg-primary:has(#kvLightboxBody) {
 		max-height: 528px;
 	}
 
+	.impact-insight-carousel div:has(.impact-insight-slide) {
+		@apply tw-self-start md:tw-self-auto;
+	}
+
+	.impact-insight-carousel div:first-child {
+		@apply !tw-items-center;
+	}
+
 	.kv-carousel__controls {
 		gap: 10px;
 		flex-wrap: wrap;
-		max-width: 50%;
 
-		@apply tw-flex tw-items-center tw-gap-1 tw-z-sticky md:!tw-mt-5;
+		@apply !tw-flex tw-items-center tw-gap-1 tw-mb-1.5 tw-z-sticky md:!tw-mt-5 md:!tw-mb-0;
+
+		@screen md {
+			max-width: 50%;
+		}
 	}
 
 	.impact-insight-footer {
 		max-height: 48px;
 
 		.secondary-navigation-buttons {
-			width: auto;
-
 			@apply md:!tw-absolute;
 
 			@screen md {
+				width: auto;
 				bottom: 21%;
 			}
 
diff --git a/src/components/MyKiva/ImpactInsight/MyKivaImpactInsightScreen1.vue b/src/components/MyKiva/ImpactInsight/MyKivaImpactInsightScreen1.vue
index 96bc459ffa6..787d9d1d7c7 100644
--- a/src/components/MyKiva/ImpactInsight/MyKivaImpactInsightScreen1.vue
+++ b/src/components/MyKiva/ImpactInsight/MyKivaImpactInsightScreen1.vue
@@ -132,10 +132,18 @@ const loanDescription = computed(() => {
 }
 
 div:has(.screen-description) {
-	gap: 10rem;
+	gap: 105px;
+
+	@screen md {
+		gap: 10rem;
+	}
 }
 
 .screen-description {
-	width: 400px;
+	width: 289px;
+
+	@screen md {
+		width: 400px;
+	}
 }
 </style>
diff --git a/src/components/MyKiva/ImpactInsight/MyKivaImpactInsightScreen2.vue b/src/components/MyKiva/ImpactInsight/MyKivaImpactInsightScreen2.vue
index 26015181801..f16b5d0dfd8 100644
--- a/src/components/MyKiva/ImpactInsight/MyKivaImpactInsightScreen2.vue
+++ b/src/components/MyKiva/ImpactInsight/MyKivaImpactInsightScreen2.vue
@@ -89,10 +89,18 @@ const whySpecial = computed(() => {
 }
 
 div:has(.screen-description) {
-	gap: 138px;
+	gap: 80px;
+
+	@screen md {
+		gap: 138px;
+	}
 }
 
 .screen-description {
-	width: 400px;
+	width: 289px;
+
+	@screen md {
+		width: 400px;
+	}
 }
 </style>
diff --git a/src/components/MyKiva/ImpactInsight/MyKivaImpactInsightScreen3.vue b/src/components/MyKiva/ImpactInsight/MyKivaImpactInsightScreen3.vue
index 4017ec83788..b84ae0b07bf 100644
--- a/src/components/MyKiva/ImpactInsight/MyKivaImpactInsightScreen3.vue
+++ b/src/components/MyKiva/ImpactInsight/MyKivaImpactInsightScreen3.vue
@@ -113,10 +113,18 @@ const helpedPeopleInCountry = computed(() => {
 }
 
 div:has(.screen-description) {
-	gap: 7rem;
+	gap: 3.5rem;
+
+	@screen md {
+		gap: 7rem;
+	}
 }
 
 .screen-description {
-	width: 400px;
+	width: 289px;
+
+	@screen md {
+		width: 400px;
+	}
 }
 </style>
diff --git a/src/components/MyKiva/ImpactInsight/MyKivaImpactInsightScreen4.vue b/src/components/MyKiva/ImpactInsight/MyKivaImpactInsightScreen4.vue
index 5945ded575b..faabb9b65bf 100644
--- a/src/components/MyKiva/ImpactInsight/MyKivaImpactInsightScreen4.vue
+++ b/src/components/MyKiva/ImpactInsight/MyKivaImpactInsightScreen4.vue
@@ -1,5 +1,5 @@
 <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-pl-7 md:tw-pr-3 impact-insight-slide">
 		<div class="tw-mx-auto md:!tw-max-w-4xl">
 			<div
 				class="tw-flex tw-flex-col tw-items-center
@@ -40,7 +40,7 @@
 					</div>
 				</div>
 				<div
-					class="tw-px-4 md:!tw-px-0 screen-description"
+					class="tw-px-0 screen-description"
 				>
 					<p
 						v-html="description"
@@ -124,10 +124,18 @@ const description = computed(() => {
 }
 
 div:has(.screen-description) {
-	gap: 5.5rem;
+	gap: 2rem;
+
+	@screen md {
+		gap: 5.5rem;
+	}
 }
 
 .screen-description {
-	width: 400px;
+	width: 289px;
+
+	@screen md {
+		width: 400px;
+	}
 }
 </style>

From ab2dd819c533641103b171792e5788ae7a286945 Mon Sep 17 00:00:00 2001
From: crisT <cristhiant@kiva.org>
Date: Wed, 28 Jan 2026 18:48:00 -0500
Subject: [PATCH 5/6] feat: [MP-2376] - better option to locate secondary
 buttons

---
 .../MyKivaImpactInsightModal.vue              | 40 ++++++++++---------
 .../MyKivaImpactInsightScreen4.vue            | 16 +++-----
 2 files changed, 27 insertions(+), 29 deletions(-)

diff --git a/src/components/MyKiva/ImpactInsight/MyKivaImpactInsightModal.vue b/src/components/MyKiva/ImpactInsight/MyKivaImpactInsightModal.vue
index 20686cdba88..8dcb11fdb67 100644
--- a/src/components/MyKiva/ImpactInsight/MyKivaImpactInsightModal.vue
+++ b/src/components/MyKiva/ImpactInsight/MyKivaImpactInsightModal.vue
@@ -19,7 +19,7 @@
 		>
 			A closer look at <u>{{ borrowerName }} world</u>
 		</h2>
-		<div class="tw-flex tw-flex-col tw-items-center tw-w-full">
+		<div class="tw-flex tw-flex-col tw-items-center tw-w-full md:!tw-relative">
 			<KvCarousel
 				ref="carouselRef"
 				:is-dotted="true"
@@ -48,28 +48,32 @@
 			</KvCarousel>
 
 			<div
-				class="tw-static tw-w-full impact-insight-footer"
+				class="tw-static tw-w-full md:tw-w-auto md:tw-absolute tw-self-end tw-bottom-0"
 			>
 				<div
-					class="tw-flex tw-justify-self-end tw-w-full tw-h-6
-							tw-gap-2 tw-float-end secondary-navigation-buttons"
+					class="tw-relative tw-justify-end tw-items-end tw-gap-1.5 tw-w-xs impact-insight-footer"
 				>
-					<button
-						v-if="currentSlide > 0 && !isMobile"
-						class="tw-w-11 tw-text-center tw-border tw-rounded-lg
-								tw-bg-white tw-text-gray-900 tw-font-medium"
-						:disabled="currentSlide === 0"
-						@click="goToPrev"
+					<div
+						class="tw-flex tw-justify-self-end tw-w-full tw-h-6
+							tw-gap-2 tw-float-end secondary-navigation-buttons"
 					>
-						Back
-					</button>
-					<button
-						class="tw-w-full md:tw-w-11 tw-text-center tw-rounded-lg tw-bg-action tw-text-white
+						<button
+							v-if="currentSlide > 0 && !isMobile"
+							class="tw-w-11 tw-text-center tw-border tw-rounded-lg
+								tw-bg-white tw-text-gray-900 tw-font-medium"
+							:disabled="currentSlide === 0"
+							@click="goToPrev"
+						>
+							Back
+						</button>
+						<button
+							class="tw-w-full md:tw-w-11 tw-text-center tw-rounded-lg tw-bg-action tw-text-white
 								tw-font-medium hover:tw-bg-action-highlight"
-						@click="handleNextOrDone"
-					>
-						{{ isLastSlide ? 'Done' : 'Next' }}
-					</button>
+							@click="handleNextOrDone"
+						>
+							{{ isLastSlide ? 'Done' : 'Next' }}
+						</button>
+					</div>
 				</div>
 			</div>
 		</div>
diff --git a/src/components/MyKiva/ImpactInsight/MyKivaImpactInsightScreen4.vue b/src/components/MyKiva/ImpactInsight/MyKivaImpactInsightScreen4.vue
index faabb9b65bf..dd2810b2083 100644
--- a/src/components/MyKiva/ImpactInsight/MyKivaImpactInsightScreen4.vue
+++ b/src/components/MyKiva/ImpactInsight/MyKivaImpactInsightScreen4.vue
@@ -66,18 +66,12 @@ const props = defineProps({
 });
 
 const description = computed(() => {
-	let text = '';
-	if (props.latestLoan?.gender === 'female') {
-		text += '<strong class="tw-text-brand">8 out of 10 women</strong> '
-		+ 'earned more income after getting their loan';
-	} else {
-		text += '<strong class="tw-text-brand">89%</strong> of people said their '
-		+ '<strong class="tw-text-brand">quality of life improved</strong> after their loan';
-	}
-
-	text += '.';
+	const text = props.latestLoan?.gender === 'female'
+		? '<strong class="tw-text-brand">8 out of 10 women</strong> earned more income after getting their loan'
+		// eslint-disable-next-line max-len
+		: '<strong class="tw-text-brand">89%</strong> of people said their <strong class="tw-text-brand">quality of life improved</strong> after their loan';
 
-	return text;
+	return `${text}.`;
 });
 
 </script>

From 238cb58af46bdd956edc28fb74f86838c909fa51 Mon Sep 17 00:00:00 2001
From: crisT <cristhiant@kiva.org>
Date: Wed, 28 Jan 2026 22:39:36 -0500
Subject: [PATCH 6/6] feat: [MP-2375] - remove comments

---
 .../MyKiva/ImpactInsight/MyKivaImpactInsightModal.vue           | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/MyKiva/ImpactInsight/MyKivaImpactInsightModal.vue b/src/components/MyKiva/ImpactInsight/MyKivaImpactInsightModal.vue
index 8dcb11fdb67..617fa848edd 100644
--- a/src/components/MyKiva/ImpactInsight/MyKivaImpactInsightModal.vue
+++ b/src/components/MyKiva/ImpactInsight/MyKivaImpactInsightModal.vue
@@ -43,8 +43,6 @@
 				<template #slide4>
 					<MyKivaImpactInsightScreen4 :latest-loan="latestLoan" />
 				</template>
-				<!-- dots class: "tw-flex tw-justify-start tw-items-center tw-max-w-xl tw-gap-3 tw-absolute",
-					style: "bottom: 13rem; left: 26%;" -->
 			</KvCarousel>
 
 			<div