From abbc34d0846f2be8cab76a0736d6b4c141d7be8e Mon Sep 17 00:00:00 2001
From: Christian Bedon <christian.bedon@contractors.kiva.org>
Date: Fri, 27 Sep 2024 11:49:04 -0500
Subject: [PATCH 01/10] feat: my kiva carousel component for borrower status
 card

---
 .../stories/BorrowerStatusCarousel.stories.js |  39 ++++
 src/components/MyKiva/BorrowerCarousel.vue    | 167 ++++++++++++++++++
 src/graphql/query/myKiva.graphql              |  39 ++++
 3 files changed, 245 insertions(+)
 create mode 100644 .storybook/stories/BorrowerStatusCarousel.stories.js
 create mode 100644 src/components/MyKiva/BorrowerCarousel.vue

diff --git a/.storybook/stories/BorrowerStatusCarousel.stories.js b/.storybook/stories/BorrowerStatusCarousel.stories.js
new file mode 100644
index 0000000000..0d41c4dbcd
--- /dev/null
+++ b/.storybook/stories/BorrowerStatusCarousel.stories.js
@@ -0,0 +1,39 @@
+import BorrowerCarousel from '#src/components/MyKiva/BorrowerCarousel.vue';
+import { mockLoansArray } from '../utils';
+import apolloStoryMixin from "../mixins/apollo-story-mixin";
+import cookieStoreStoryMixin from '../mixins/cookie-store-story-mixin';
+
+export default {
+	title: 'MyKiva/BorrowerCarousel',
+	component: BorrowerCarousel,
+};
+
+const mockLoans = mockLoansArray(3);
+
+const queryResult = {
+	data: {
+		lend: {
+			loan: mockLoans[0]
+		}
+	}
+};
+
+const story = (args = {}) => {
+	const template = (_args, { argTypes }) => ({
+		props: Object.keys(argTypes),
+		components: { BorrowerCarousel },
+		mixins: [apolloStoryMixin({ queryResult }), cookieStoreStoryMixin()],
+		setup() { return { args }; },
+		template: `
+			<borrower-carousel v-bind="args" />
+		`,
+	});
+	template.args = args;
+	return template;
+};
+
+export const Default = story({ loans: [mockLoans[0], mockLoans[1], mockLoans[2]] });
+export const OneLoan = story({ loans: [mockLoans[0]] });
+export const MoreThanLimit = story({ loans: [...mockLoans, mockLoans[0]] });
+export const NoActiveLoans = story({ loans: [mockLoans[0], mockLoans[1], mockLoans[2]], hasActiveLoans: false });
+export const Empty = story({ loans: [] });
diff --git a/src/components/MyKiva/BorrowerCarousel.vue b/src/components/MyKiva/BorrowerCarousel.vue
new file mode 100644
index 0000000000..482583299a
--- /dev/null
+++ b/src/components/MyKiva/BorrowerCarousel.vue
@@ -0,0 +1,167 @@
+<template>
+	<MyKivaContainer>
+		<h2 v-html="title" class="tw-mb-3.5"></h2>
+		<div :class="{'tw-flex tw-justify-center': !loans.length }">
+			<KvButton v-if="!loans.length || !hasActiveLoans" :to="link">
+				{{ btnCta }}
+			</KvButton>
+		</div>
+		<div v-if="hasActiveLoans">
+			<KvTabs @tab-changed="handleChange" v-if="loans.length > 1" class="tabs">
+				<template #tabNav>
+					<KvTab v-for="(loan, index) in filteredLoans" :key="index" :label="index + 1" :for-panel="loan.id">
+						<div class="tw-flex tw-flex-col tw-justify-center">
+							<div
+								class="tw-w-8 tw-h-8 tw-mx-auto md:tw-mx-0 tw-border-white tw-border-4
+									tw-rounded-full tw-shadow"
+							>
+								<BorrowerImage
+									class="tw-w-full tw-rounded-full tw-bg-brand"
+									:alt="getBorrowerName(loan)"
+									:aspect-ratio="1"
+									:default-image="{ width: 80, faceZoom: 50 }"
+									:hash="getBorrowerHash(loan)"
+									:images="[
+										{ width: 80, faceZoom: 50, viewSize: 1024 },
+										{ width: 72, faceZoom: 50, viewSize: 734 },
+										{ width: 64, faceZoom: 50 },
+									]"
+								/>
+							</div>
+							<h5 class="tw-text-center">
+								{{ getBorrowerName(loan) }}
+							</h5>
+						</div>
+					</KvTab>
+					<KvTab>
+						<a href="/portfolio/loans">View all</a>
+					</KvTab>
+				</template>
+				<template #tabPanels>
+					<kv-tab-panel v-for="(loan, index) in loans" :key="index" :id="loan.id">
+						<p class="tw-hidden" :id="loan.id"></p>
+					</kv-tab-panel>
+				</template>
+			</KvTabs>
+			<div class="carousel-container">
+				<KvCarousel
+					ref="carousel"
+					class="borrower-carousel tw-w-full md:tw-overflow-visible"
+					:multiple-slides-visible="true"
+					:slide-max-width="singleSlideWidth"
+					:embla-options="{ loop: false, align: 'center'}"
+				>
+					<template v-for="(loan, index) in loans" #[`slide${index+1}`] :key="loan.id || index">
+						<BorrowerStatusCard :loan="loan" />
+					</template>
+				</KvCarousel>
+			</div>
+		</div>
+	</MyKivaContainer>
+</template>
+
+<script setup>
+import KvTabs from '@kiva/kv-components/vue/KvTabs';
+import KvTab from '@kiva/kv-components/vue/KvTab';
+import KvCarousel from '@kiva/kv-components/vue/KvCarousel';
+import KvButton from '@kiva/kv-components/vue/KvButton';
+import BorrowerImage from '#src/components/BorrowerProfile/BorrowerImage';
+import { defineProps, ref, computed } from 'vue';
+import MyKivaContainer from '#src/components/MyKiva/MyKivaContainer';
+import BorrowerStatusCard from './BorrowerStatusCard';
+
+const props = defineProps({
+	/**
+   * Array of loans
+   * */
+	loans: {
+		type: Array,
+		default: () => ([]),
+		required: true,
+	},
+	hasActiveLoans: {
+		type: Boolean,
+		default: true,
+	},
+});
+
+const { loans, hasActiveLoans } = props;
+
+const carousel = ref(null);
+
+const handleChange = event => {
+	carousel.value.goToSlide(event);
+};
+
+const getBorrowerName = loan => {
+	return loan?.name ?? '';
+};
+
+const getBorrowerHash = loan => {
+	return loan?.image?.hash ?? '';
+};
+
+const title = computed(() => {
+	if (!hasActiveLoans) {
+		return `You changed <u>${loans.length} lives</u>!`;
+	}
+	if (loans.length) {
+		if (loans.length === 1) {
+			return 'You’re changing a life right now!';
+		}
+		return `You’re <u>changing ${loans.length} liv</u>es right now!`;
+	}
+	return 'Change a life <u>today</u>!';
+});
+
+const btnCta = computed(() => {
+	if (!hasActiveLoans) {
+		return 'See previously supported borrowers';
+	}
+	return 'Make a loan';
+});
+
+const link = computed(() => {
+	if (!hasActiveLoans) {
+		return '/portfolio';
+	}
+	return '/lend-by-category';
+});
+
+const filteredLoans = computed(() => {
+	return loans.slice(0, 9);
+});
+
+const singleSlideWidth = computed(() => {
+	const viewportWidth = typeof window !== 'undefined' ? window.innerWidth : 520;
+
+	if (viewportWidth < 768) {
+		return '288px';
+	} if (window.innerWidth < 1024) {
+		return '468px';
+	}
+	return '520px';
+});
+
+</script>
+
+<style lang="postcss" scoped>
+
+.carousel-container {
+	max-width: 100%;
+
+	@screen md {
+		max-width: 468px;
+	}
+
+	@screen lg {
+		max-width: 520px;
+	}
+}
+:deep(.borrower-carousel) div.kv-carousel__controls {
+	@apply tw-hidden;
+}
+:deep(.tabs) div[role="tablist"] {
+	@apply md:tw-gap-3.5;
+}
+</style>
diff --git a/src/graphql/query/myKiva.graphql b/src/graphql/query/myKiva.graphql
index a922a4d4b1..0efc1f9286 100644
--- a/src/graphql/query/myKiva.graphql
+++ b/src/graphql/query/myKiva.graphql
@@ -1,6 +1,45 @@
 query ftdQuery {
 	my {
     id
+    loans(limit: 10) {
+      values {
+        id
+        name
+        gender
+        image {
+          id
+          url
+          hash
+        }
+        geocode {
+          city
+          state
+          country {
+            name
+            isoCode
+            region
+          }
+        }
+        plannedExpirationDate
+        terms {
+          currency
+          currencyFullName
+          lossLiabilityNonpayment
+          lossLiabilityCurrencyExchange
+          loanAmount
+          disbursalDate
+          disbursalAmount
+          flexibleFundraisingEnabled
+          lenderRepaymentTerm
+          expectedPayments {
+            amount
+            localAmount
+            dueToKivaDate
+            effectiveDate
+          }
+        }
+      }
+    }
     lender {
       id
       name

From 894d4c557bfcbf3c09c404822f60228ce748fb86 Mon Sep 17 00:00:00 2001
From: Christian Bedon <christian.bedon@contractors.kiva.org>
Date: Fri, 27 Sep 2024 14:46:37 -0500
Subject: [PATCH 02/10] feat: get active loans

---
 src/components/MyKiva/BorrowerCarousel.vue | 2 +-
 src/graphql/query/myKiva.graphql           | 1 +
 src/pages/Portfolio/MyKiva/MyKivaPage.vue  | 7 +++++++
 3 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/MyKiva/BorrowerCarousel.vue b/src/components/MyKiva/BorrowerCarousel.vue
index 482583299a..3300b7b2d1 100644
--- a/src/components/MyKiva/BorrowerCarousel.vue
+++ b/src/components/MyKiva/BorrowerCarousel.vue
@@ -33,7 +33,7 @@
 							</h5>
 						</div>
 					</KvTab>
-					<KvTab>
+					<KvTab v-if="loans.length > 9">
 						<a href="/portfolio/loans">View all</a>
 					</KvTab>
 				</template>
diff --git a/src/graphql/query/myKiva.graphql b/src/graphql/query/myKiva.graphql
index 0efc1f9286..862b07abf1 100644
--- a/src/graphql/query/myKiva.graphql
+++ b/src/graphql/query/myKiva.graphql
@@ -6,6 +6,7 @@ query ftdQuery {
         id
         name
         gender
+        status
         image {
           id
           url
diff --git a/src/pages/Portfolio/MyKiva/MyKivaPage.vue b/src/pages/Portfolio/MyKiva/MyKivaPage.vue
index d77b517298..0d68fb9fa1 100644
--- a/src/pages/Portfolio/MyKiva/MyKivaPage.vue
+++ b/src/pages/Portfolio/MyKiva/MyKivaPage.vue
@@ -9,6 +9,7 @@
 			@show-navigation="handleShowNavigation"
 		/>
 		<MyKivaProfile :lender="lender" />
+		<MyKivaBorrowerCarousel :loans="loans" :has-active-loans="hasActiveLoans" />
 	</www-page>
 </template>
 
@@ -19,6 +20,7 @@ import MyKivaNavigation from '#src/components/MyKiva/MyKivaNavigation';
 import myKivaQuery from '#src/graphql/query/myKiva.graphql';
 import MyKivaHero from '#src/components/MyKiva/MyKivaHero';
 import MyKivaProfile from '#src/components/MyKiva/MyKivaProfile';
+import { isLoanFundraising } from '#src/util/loanUtils';
 
 const MY_KIVA_EXP_KEY = 'my_kiva_page';
 
@@ -36,6 +38,7 @@ export default {
 			lender: null,
 			showNavigation: false,
 			userInfo: {},
+			loans: [],
 		};
 	},
 	apollo: {
@@ -44,6 +47,7 @@ export default {
 		result(result) {
 			this.userInfo = result.data?.my ?? {};
 			this.lender = result.data?.my?.lender ?? null;
+			this.loans = result.data?.my?.loans ?? [];
 		},
 	},
 	computed: {
@@ -56,6 +60,9 @@ export default {
 		lenderImageUrl() {
 			return this.lender?.image?.url ?? '';
 		},
+		hasActiveLoans() {
+			return this.loans?.some(loan => loan.status === 'repaying' || isLoanFundraising(loan));
+		}
 	},
 	methods: {
 		handleShowNavigation() {

From d1f80c2d3f1822cc0a91a2b3f8c7986318cb9d3e Mon Sep 17 00:00:00 2001
From: Christian Bedon <christian.bedon@contractors.kiva.org>
Date: Fri, 27 Sep 2024 15:22:43 -0500
Subject: [PATCH 03/10] fix: lint

---
 src/components/MyKiva/BorrowerCarousel.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/MyKiva/BorrowerCarousel.vue b/src/components/MyKiva/BorrowerCarousel.vue
index 3300b7b2d1..6aec880c28 100644
--- a/src/components/MyKiva/BorrowerCarousel.vue
+++ b/src/components/MyKiva/BorrowerCarousel.vue
@@ -158,10 +158,12 @@ const singleSlideWidth = computed(() => {
 		max-width: 520px;
 	}
 }
+
 :deep(.borrower-carousel) div.kv-carousel__controls {
 	@apply tw-hidden;
 }
-:deep(.tabs) div[role="tablist"] {
+
+:deep(.tabs) div[role=tablist] {
 	@apply md:tw-gap-3.5;
 }
 </style>

From 9971d6d0a1ee306777f27168104dc7f680fa0a1e Mon Sep 17 00:00:00 2001
From: Christian Bedon <christian.bedon@contractors.kiva.org>
Date: Tue, 1 Oct 2024 15:46:56 -0500
Subject: [PATCH 04/10] fix: reactive loans

---
 src/components/MyKiva/BorrowerCarousel.vue | 29 ++++++++++++----------
 src/graphql/query/myKiva.graphql           |  8 +++++-
 src/pages/Portfolio/MyKiva/MyKivaPage.vue  |  7 +++---
 3 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/src/components/MyKiva/BorrowerCarousel.vue b/src/components/MyKiva/BorrowerCarousel.vue
index 6aec880c28..674364ebc4 100644
--- a/src/components/MyKiva/BorrowerCarousel.vue
+++ b/src/components/MyKiva/BorrowerCarousel.vue
@@ -10,7 +10,7 @@
 			<KvTabs @tab-changed="handleChange" v-if="loans.length > 1" class="tabs">
 				<template #tabNav>
 					<KvTab v-for="(loan, index) in filteredLoans" :key="index" :label="index + 1" :for-panel="loan.id">
-						<div class="tw-flex tw-flex-col tw-justify-center">
+						<div class="tw-flex tw-flex-col tw-justify-center tw-items-center">
 							<div
 								class="tw-w-8 tw-h-8 tw-mx-auto md:tw-mx-0 tw-border-white tw-border-4
 									tw-rounded-full tw-shadow"
@@ -38,9 +38,9 @@
 					</KvTab>
 				</template>
 				<template #tabPanels>
-					<kv-tab-panel v-for="(loan, index) in loans" :key="index" :id="loan.id">
+					<KvTabPanel v-for="(loan, index) in loans" :key="index" :id="loan.id">
 						<p class="tw-hidden" :id="loan.id"></p>
-					</kv-tab-panel>
+					</KvTabPanel>
 				</template>
 			</KvTabs>
 			<div class="carousel-container">
@@ -63,11 +63,14 @@
 <script setup>
 import KvTabs from '@kiva/kv-components/vue/KvTabs';
 import KvTab from '@kiva/kv-components/vue/KvTab';
+import KvTabPanel from '@kiva/kv-components/vue/KvTabPanel';
 import KvCarousel from '@kiva/kv-components/vue/KvCarousel';
 import KvButton from '@kiva/kv-components/vue/KvButton';
 import BorrowerImage from '#src/components/BorrowerProfile/BorrowerImage';
-import { defineProps, ref, computed } from 'vue';
 import MyKivaContainer from '#src/components/MyKiva/MyKivaContainer';
+import {
+	defineProps, ref, computed, toRefs
+} from 'vue';
 import BorrowerStatusCard from './BorrowerStatusCard';
 
 const props = defineProps({
@@ -85,7 +88,7 @@ const props = defineProps({
 	},
 });
 
-const { loans, hasActiveLoans } = props;
+const { loans, hasActiveLoans } = toRefs(props);
 
 const carousel = ref(null);
 
@@ -102,34 +105,34 @@ const getBorrowerHash = loan => {
 };
 
 const title = computed(() => {
-	if (!hasActiveLoans) {
-		return `You changed <u>${loans.length} lives</u>!`;
+	if (!hasActiveLoans.value) {
+		return `You changed <u>${loans.value.length} lives</u>!`;
 	}
-	if (loans.length) {
-		if (loans.length === 1) {
+	if (loans.value.length) {
+		if (loans.value.length === 1) {
 			return 'You’re changing a life right now!';
 		}
-		return `You’re <u>changing ${loans.length} liv</u>es right now!`;
+		return `You’re <u>changing ${loans.value.length} liv</u>es right now!`;
 	}
 	return 'Change a life <u>today</u>!';
 });
 
 const btnCta = computed(() => {
-	if (!hasActiveLoans) {
+	if (!hasActiveLoans.value) {
 		return 'See previously supported borrowers';
 	}
 	return 'Make a loan';
 });
 
 const link = computed(() => {
-	if (!hasActiveLoans) {
+	if (!hasActiveLoans.value) {
 		return '/portfolio';
 	}
 	return '/lend-by-category';
 });
 
 const filteredLoans = computed(() => {
-	return loans.slice(0, 9);
+	return loans.value.slice(0, 9);
 });
 
 const singleSlideWidth = computed(() => {
diff --git a/src/graphql/query/myKiva.graphql b/src/graphql/query/myKiva.graphql
index 862b07abf1..bcc8ffa233 100644
--- a/src/graphql/query/myKiva.graphql
+++ b/src/graphql/query/myKiva.graphql
@@ -1,4 +1,4 @@
-query ftdQuery {
+query myKivaQuery {
 	my {
     id
     loans(limit: 10) {
@@ -21,6 +21,12 @@ query ftdQuery {
             region
           }
         }
+        loanAmount
+        loanFundraisingInfo {
+          fundedAmount
+          reservedAmount
+          isExpiringSoon
+        }
         plannedExpirationDate
         terms {
           currency
diff --git a/src/pages/Portfolio/MyKiva/MyKivaPage.vue b/src/pages/Portfolio/MyKiva/MyKivaPage.vue
index e38faa2b0e..2b010ff645 100644
--- a/src/pages/Portfolio/MyKiva/MyKivaPage.vue
+++ b/src/pages/Portfolio/MyKiva/MyKivaPage.vue
@@ -20,6 +20,7 @@ import MyKivaNavigation from '#src/components/MyKiva/MyKivaNavigation';
 import myKivaQuery from '#src/graphql/query/myKiva.graphql';
 import MyKivaHero from '#src/components/MyKiva/MyKivaHero';
 import MyKivaProfile from '#src/components/MyKiva/MyKivaProfile';
+import MyKivaBorrowerCarousel from '#src/components/MyKiva/BorrowerCarousel';
 import { isLoanFundraising } from '#src/util/loanUtils';
 
 import {
@@ -50,11 +51,11 @@ apollo.query({ query: myKivaQuery })
 	.then(result => {
 		userInfo.value = result.data?.my ?? {};
 		lender.value = result.data?.my?.lender ?? null;
-		loans.value = result.data?.my?.loans ?? [];
+		loans.value = result.data?.my?.loans?.values ?? [];
 	});
 
-const hasActiveLoans = () => computed(() => {
-	return this.loans?.some(loan => loan.status === 'repaying' || isLoanFundraising(loan));
+const hasActiveLoans = computed(() => {
+	return loans.value.some(loan => loan?.status === 'repaying' || isLoanFundraising(loan));
 });
 
 onMounted(() => {

From 8a1ba24ce5569c887e33423bccf3f8d8218319f2 Mon Sep 17 00:00:00 2001
From: Christian Bedon <christian.bedon@contractors.kiva.org>
Date: Tue, 1 Oct 2024 16:59:30 -0500
Subject: [PATCH 05/10] fix: missing tracking and buttons

---
 src/components/MyKiva/BorrowerCarousel.vue   | 77 +++++++++++++++++---
 src/components/MyKiva/BorrowerStatusCard.vue |  2 +-
 src/pages/Portfolio/MyKiva/MyKivaPage.vue    | 11 ++-
 3 files changed, 72 insertions(+), 18 deletions(-)

diff --git a/src/components/MyKiva/BorrowerCarousel.vue b/src/components/MyKiva/BorrowerCarousel.vue
index 674364ebc4..c6a0441b21 100644
--- a/src/components/MyKiva/BorrowerCarousel.vue
+++ b/src/components/MyKiva/BorrowerCarousel.vue
@@ -2,7 +2,14 @@
 	<MyKivaContainer>
 		<h2 v-html="title" class="tw-mb-3.5"></h2>
 		<div :class="{'tw-flex tw-justify-center': !loans.length }">
-			<KvButton v-if="!loans.length || !hasActiveLoans" :to="link">
+			<KvButton
+				v-kv-track-event="[
+					'portfolio',
+					'click',
+					btnEventLabel
+				]" v-if="!loans.length || !hasActiveLoans"
+				:to="link"
+			>
 				{{ btnCta }}
 			</KvButton>
 		</div>
@@ -10,7 +17,7 @@
 			<KvTabs @tab-changed="handleChange" v-if="loans.length > 1" class="tabs">
 				<template #tabNav>
 					<KvTab v-for="(loan, index) in filteredLoans" :key="index" :label="index + 1" :for-panel="loan.id">
-						<div class="tw-flex tw-flex-col tw-justify-center tw-items-center">
+						<div class="tw-flex tw-flex-col tw-justify-start tw-items-center tw-w-10">
 							<div
 								class="tw-w-8 tw-h-8 tw-mx-auto md:tw-mx-0 tw-border-white tw-border-4
 									tw-rounded-full tw-shadow"
@@ -28,13 +35,19 @@
 									]"
 								/>
 							</div>
-							<h5 class="tw-text-center">
+							<h5 class="tw-text-center tw-text-ellipsis tw-line-clamp-2 tw-whitespace-normal">
 								{{ getBorrowerName(loan) }}
 							</h5>
 						</div>
 					</KvTab>
 					<KvTab v-if="loans.length > 9">
-						<a href="/portfolio/loans">View all</a>
+						<a
+							href="/portfolio/loans" v-kv-track-event="[
+								'portfolio',
+								'click',
+								'view-all'
+							]"
+						>View all</a>
 					</KvTab>
 				</template>
 				<template #tabPanels>
@@ -56,6 +69,16 @@
 					</template>
 				</KvCarousel>
 			</div>
+			<div class="tw-text-right" v-if="hasCompletedBorrowers">
+				<a
+					class="tw-text-h5"
+					href="/portfolio/loans" v-kv-track-event="[
+						'portfolio',
+						'click',
+						'see-all-borrowers'
+					]"
+				>See all borrowers</a>
+			</div>
 		</div>
 	</MyKivaContainer>
 </template>
@@ -68,9 +91,19 @@ import KvCarousel from '@kiva/kv-components/vue/KvCarousel';
 import KvButton from '@kiva/kv-components/vue/KvButton';
 import BorrowerImage from '#src/components/BorrowerProfile/BorrowerImage';
 import MyKivaContainer from '#src/components/MyKiva/MyKivaContainer';
+import { isLoanFundraising } from '#src/util/loanUtils';
 import {
-	defineProps, ref, computed, toRefs
+	defineProps,
+	ref,
+	computed,
+	toRefs,
+	inject,
+	onMounted
 } from 'vue';
+import {
+	PAYING_BACK,
+	REFUNDED,
+} from '#src/api/fixtures/LoanStatusEnum';
 import BorrowerStatusCard from './BorrowerStatusCard';
 
 const props = defineProps({
@@ -82,17 +115,20 @@ const props = defineProps({
 		default: () => ([]),
 		required: true,
 	},
-	hasActiveLoans: {
-		type: Boolean,
-		default: true,
-	},
 });
 
-const { loans, hasActiveLoans } = toRefs(props);
+const $kvTrackEvent = inject('$kvTrackEvent');
+const emit = defineEmits(['selected-loan']);
 
+const { loans } = toRefs(props);
 const carousel = ref(null);
 
+const hasActiveLoans = computed(() => {
+	return loans.value.some(loan => loan?.status === PAYING_BACK || isLoanFundraising(loan));
+});
+
 const handleChange = event => {
+	emit('selected-loan', loans.value[event]);
 	carousel.value.goToSlide(event);
 };
 
@@ -131,6 +167,13 @@ const link = computed(() => {
 	return '/lend-by-category';
 });
 
+const btnEventLabel = computed(() => {
+	if (!hasActiveLoans.value) {
+		return 'see-previously-supported-borrowers';
+	}
+	return 'Make-a-loan-no-loans-state';
+});
+
 const filteredLoans = computed(() => {
 	return loans.value.slice(0, 9);
 });
@@ -146,6 +189,18 @@ const singleSlideWidth = computed(() => {
 	return '520px';
 });
 
+const hasCompletedBorrowers = computed(() => {
+	return loans.value.some(loan => loan?.status === REFUNDED);
+});
+
+onMounted(() => {
+	if (!hasActiveLoans.value) {
+		$kvTrackEvent('portfolio', 'view', 'no-active-borrowers');
+	} else {
+		$kvTrackEvent('portfolio', 'view', 'active-borrowers', loans.value.length);
+	}
+});
+
 </script>
 
 <style lang="postcss" scoped>
@@ -167,6 +222,6 @@ const singleSlideWidth = computed(() => {
 }
 
 :deep(.tabs) div[role=tablist] {
-	@apply md:tw-gap-3.5;
+	@apply md:tw-gap-3.5 tw-items-baseline;
 }
 </style>
diff --git a/src/components/MyKiva/BorrowerStatusCard.vue b/src/components/MyKiva/BorrowerStatusCard.vue
index 713bb8d880..9ae48b3ee1 100644
--- a/src/components/MyKiva/BorrowerStatusCard.vue
+++ b/src/components/MyKiva/BorrowerStatusCard.vue
@@ -24,7 +24,7 @@
 							]"
 						/>
 					</div>
-					<h3 class="tw-text-center md:tw-text-left tw-mb-1">
+					<h3 class="tw-text-center md:tw-text-left tw-mb-1 tw-line-clamp-2">
 						{{ title }}
 					</h3>
 					<p class="tw-text-center md:tw-text-left">
diff --git a/src/pages/Portfolio/MyKiva/MyKivaPage.vue b/src/pages/Portfolio/MyKiva/MyKivaPage.vue
index 2b010ff645..c5a415718c 100644
--- a/src/pages/Portfolio/MyKiva/MyKivaPage.vue
+++ b/src/pages/Portfolio/MyKiva/MyKivaPage.vue
@@ -9,7 +9,7 @@
 			@show-navigation="handleShowNavigation"
 		/>
 		<MyKivaProfile :lender="lender" />
-		<MyKivaBorrowerCarousel :loans="loans" :has-active-loans="hasActiveLoans" />
+		<MyKivaBorrowerCarousel :loans="loans" @selected-loan="handleSelectedLoan" />
 	</www-page>
 </template>
 
@@ -21,7 +21,6 @@ import myKivaQuery from '#src/graphql/query/myKiva.graphql';
 import MyKivaHero from '#src/components/MyKiva/MyKivaHero';
 import MyKivaProfile from '#src/components/MyKiva/MyKivaProfile';
 import MyKivaBorrowerCarousel from '#src/components/MyKiva/BorrowerCarousel';
-import { isLoanFundraising } from '#src/util/loanUtils';
 
 import {
 	ref,
@@ -47,6 +46,10 @@ const handleShowNavigation = () => {
 	$kvTrackEvent('SecondaryNav top level', 'click', 'MyKiva-Settings-icon');
 };
 
+const handleSelectedLoan = () => {
+	// TODO: work with updates
+};
+
 apollo.query({ query: myKivaQuery })
 	.then(result => {
 		userInfo.value = result.data?.my ?? {};
@@ -54,10 +57,6 @@ apollo.query({ query: myKivaQuery })
 		loans.value = result.data?.my?.loans?.values ?? [];
 	});
 
-const hasActiveLoans = computed(() => {
-	return loans.value.some(loan => loan?.status === 'repaying' || isLoanFundraising(loan));
-});
-
 onMounted(() => {
 	trackExperimentVersion(
 		apollo,

From b730d3bcb1d3007513b67b37804dc756604c90d4 Mon Sep 17 00:00:00 2001
From: Christian Bedon <christian.bedon@contractors.kiva.org>
Date: Wed, 2 Oct 2024 14:10:25 -0500
Subject: [PATCH 06/10] fix: definition of completed loans

---
 src/components/MyKiva/BorrowerCarousel.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/MyKiva/BorrowerCarousel.vue b/src/components/MyKiva/BorrowerCarousel.vue
index c6a0441b21..cd927267c4 100644
--- a/src/components/MyKiva/BorrowerCarousel.vue
+++ b/src/components/MyKiva/BorrowerCarousel.vue
@@ -102,7 +102,8 @@ import {
 } from 'vue';
 import {
 	PAYING_BACK,
-	REFUNDED,
+	ENDED,
+	DEFAULTED
 } from '#src/api/fixtures/LoanStatusEnum';
 import BorrowerStatusCard from './BorrowerStatusCard';
 
@@ -190,7 +191,7 @@ const singleSlideWidth = computed(() => {
 });
 
 const hasCompletedBorrowers = computed(() => {
-	return loans.value.some(loan => loan?.status === REFUNDED);
+	return loans.value.some(loan => loan?.status === ENDED || loan?.status === DEFAULTED);
 });
 
 onMounted(() => {

From c90519714c2684210a23251939ee4be77573b631 Mon Sep 17 00:00:00 2001
From: Christian Bedon <christian.bedon@contractors.kiva.org>
Date: Thu, 3 Oct 2024 14:43:07 -0500
Subject: [PATCH 07/10] fix: style issues and loading placeholder

---
 src/components/MyKiva/BorrowerCarousel.vue   | 44 +++++++++++++-------
 src/components/MyKiva/BorrowerStatusCard.vue | 12 +++---
 src/pages/Portfolio/MyKiva/MyKivaPage.vue    |  3 +-
 3 files changed, 37 insertions(+), 22 deletions(-)

diff --git a/src/components/MyKiva/BorrowerCarousel.vue b/src/components/MyKiva/BorrowerCarousel.vue
index cd927267c4..9c175d73e7 100644
--- a/src/components/MyKiva/BorrowerCarousel.vue
+++ b/src/components/MyKiva/BorrowerCarousel.vue
@@ -1,19 +1,25 @@
 <template>
 	<MyKivaContainer>
-		<h2 v-html="title" class="tw-mb-3.5"></h2>
-		<div :class="{'tw-flex tw-justify-center': !loans.length }">
-			<KvButton
-				v-kv-track-event="[
-					'portfolio',
-					'click',
-					btnEventLabel
-				]" v-if="!loans.length || !hasActiveLoans"
-				:to="link"
-			>
-				{{ btnCta }}
-			</KvButton>
-		</div>
-		<div v-if="hasActiveLoans">
+		<template v-if="isLoading">
+			<KvLoadingPlaceholder class="tw-mb-2 lg:tw-mb-3" :style="{width: '20rem', height: '5rem'}" />
+			<KvLoadingPlaceholder class="tw-mb-2 lg:tw-mb-3 tw-mx-auto" :style="{width: '15rem', height: '3rem'}" />
+		</template>
+		<template v-else>
+			<h2 v-html="title" class="tw-mb-3.5"></h2>
+			<div :class="{'tw-flex tw-justify-center': !loans.length }">
+				<KvButton
+					v-kv-track-event="[
+						'portfolio',
+						'click',
+						btnEventLabel
+					]" v-if="!loans.length || !hasActiveLoans"
+					:to="link"
+				>
+					{{ btnCta }}
+				</KvButton>
+			</div>
+		</template>
+		<div v-if="hasActiveLoans && !isLoading">
 			<KvTabs @tab-changed="handleChange" v-if="loans.length > 1" class="tabs">
 				<template #tabNav>
 					<KvTab v-for="(loan, index) in filteredLoans" :key="index" :label="index + 1" :for-panel="loan.id">
@@ -91,6 +97,7 @@ import KvCarousel from '@kiva/kv-components/vue/KvCarousel';
 import KvButton from '@kiva/kv-components/vue/KvButton';
 import BorrowerImage from '#src/components/BorrowerProfile/BorrowerImage';
 import MyKivaContainer from '#src/components/MyKiva/MyKivaContainer';
+import KvLoadingPlaceholder from '@kiva/kv-components/vue/KvLoadingPlaceholder';
 import { isLoanFundraising } from '#src/util/loanUtils';
 import {
 	defineProps,
@@ -116,6 +123,13 @@ const props = defineProps({
 		default: () => ([]),
 		required: true,
 	},
+	/**
+	 * Data is loading
+	 * */
+	isLoading: {
+		type: Boolean,
+		default: false,
+	},
 });
 
 const $kvTrackEvent = inject('$kvTrackEvent');
@@ -147,7 +161,7 @@ const title = computed(() => {
 	}
 	if (loans.value.length) {
 		if (loans.value.length === 1) {
-			return 'You’re changing a life right now!';
+			return 'You’re <u>changing a life</u> right now!';
 		}
 		return `You’re <u>changing ${loans.value.length} liv</u>es right now!`;
 	}
diff --git a/src/components/MyKiva/BorrowerStatusCard.vue b/src/components/MyKiva/BorrowerStatusCard.vue
index 9ae48b3ee1..8062cf4b8a 100644
--- a/src/components/MyKiva/BorrowerStatusCard.vue
+++ b/src/components/MyKiva/BorrowerStatusCard.vue
@@ -3,8 +3,8 @@
 		<div class="tw-bg-white tw-absolute tw-top-1 tw-left-1 tw-rounded tw-px-1 tw-py-0.5 tw-font-medium">
 			🎉 {{ loanStatus }}
 		</div>
-		<div class="tw-top-0 tw-h-full tw-w-full tw-overflow-hidden">
-			<HeroBackground style="height: 96px;" class="!tw-block tw-rounded-t" />
+		<div class="tw-top-0 tw-h-full tw-w-full tw-overflow-hidden tw-rounded-t">
+			<HeroBackground style="height: 96px;" class="!tw-block" />
 			<div class="tw-flex tw-justify-center tw-gap-1.5 tw-flex-col md:tw-flex-row tw-px-1.5 md:tw-px-2.5">
 				<div class="tw-flex-1">
 					<div
@@ -124,7 +124,7 @@ const loanFunFact = computed(() => {
 		switch (borrowerCountry.value) {
 			case 'United States':
 
-				return '3 in 5 U.S. business owners felt less stressed about finances after support from Kiva.**';
+				return '3 in 5 U.S. business owners felt less stressed about finances after support from Kiva.*';
 			case 'Puerto Rico':
 				// eslint-disable-next-line max-len
 				return 'Small businesses are a crucial part of Puerto Rico\'s economy, employing around 44% of Puerto Rico\'s workforce.';
@@ -145,13 +145,13 @@ const loanFunFact = computed(() => {
 	switch (region) {
 		case 'Central America':
 			// eslint-disable-next-line max-len
-			return 'In Central America, 95% of people surveyed said their quality of life improved as a result of their loan.**';
+			return 'In Central America, 95% of people surveyed said their quality of life improved as a result of their loan.*';
 		case 'South America':
 			// eslint-disable-next-line max-len
 			return 'People living in poverty in South America has decreased from ~30% in 2002 to less than 20% by 2020.';
 		case 'Africa':
 			// eslint-disable-next-line max-len
-			return 'In Africa, 92% of people surveyed said their confidence in their own abilities improved as a result of their loan.**';
+			return 'In Africa, 92% of people surveyed said their confidence in their own abilities improved as a result of their loan.*';
 		case 'Middle East':
 			// eslint-disable-next-line max-len
 			return 'The number of people with bank accounts is on the rise in the Middle East, a vital step in driving economic opportunity.';
@@ -160,7 +160,7 @@ const loanFunFact = computed(() => {
 			return 'Eastern European countries have made progress in reducing poverty levels over the past decade through social protection programs.';
 		case 'Asia':
 			// eslint-disable-next-line max-len
-			return 'In Asia, 86% of people surveyed were better able to manage their finances as a result of their loan.**';
+			return 'In Asia, 86% of people surveyed were better able to manage their finances as a result of their loan.*';
 		default:
 			// eslint-disable-next-line max-len
 			return 'In areas of Oceania like Fiji, the gender gap is improving—with more women able to access financial services.';
diff --git a/src/pages/Portfolio/MyKiva/MyKivaPage.vue b/src/pages/Portfolio/MyKiva/MyKivaPage.vue
index c5a415718c..6f0b092c79 100644
--- a/src/pages/Portfolio/MyKiva/MyKivaPage.vue
+++ b/src/pages/Portfolio/MyKiva/MyKivaPage.vue
@@ -9,7 +9,7 @@
 			@show-navigation="handleShowNavigation"
 		/>
 		<MyKivaProfile :lender="lender" />
-		<MyKivaBorrowerCarousel :loans="loans" @selected-loan="handleSelectedLoan" />
+		<MyKivaBorrowerCarousel :loans="loans" @selected-loan="handleSelectedLoan" :is-loading="isLoading" />
 	</www-page>
 </template>
 
@@ -38,6 +38,7 @@ const lender = ref(null);
 const showNavigation = ref(false);
 const userInfo = ref({});
 const loans = ref([]);
+const isLoading = computed(() => !lender.value);
 
 const userBalance = computed(() => userInfo.value?.userAccount?.balance ?? '');
 

From 4becfd968553baaefb314468b3051f4b1965b3cb Mon Sep 17 00:00:00 2001
From: Christian Bedon <christian.bedon@contractors.kiva.org>
Date: Thu, 3 Oct 2024 15:51:40 -0500
Subject: [PATCH 08/10] fix: loading placeholder and handle negative dates

---
 src/components/MyKiva/BorrowerCarousel.vue   | 7 ++-----
 src/components/MyKiva/BorrowerStatusCard.vue | 2 +-
 2 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/components/MyKiva/BorrowerCarousel.vue b/src/components/MyKiva/BorrowerCarousel.vue
index 9c175d73e7..885121edf3 100644
--- a/src/components/MyKiva/BorrowerCarousel.vue
+++ b/src/components/MyKiva/BorrowerCarousel.vue
@@ -1,8 +1,8 @@
 <template>
 	<MyKivaContainer>
 		<template v-if="isLoading">
-			<KvLoadingPlaceholder class="tw-mb-2 lg:tw-mb-3" :style="{width: '20rem', height: '5rem'}" />
-			<KvLoadingPlaceholder class="tw-mb-2 lg:tw-mb-3 tw-mx-auto" :style="{width: '15rem', height: '3rem'}" />
+			<KvLoadingPlaceholder class="tw-my-2 lg:tw-mb-4" :style="{width: '10rem', height: '3rem'}" />
+			<KvLoadingPlaceholder class="tw-mb-2 lg:tw-mb-3" :style="{width: '17rem', height: '17rem'}" />
 		</template>
 		<template v-else>
 			<h2 v-html="title" class="tw-mb-3.5"></h2>
@@ -123,9 +123,6 @@ const props = defineProps({
 		default: () => ([]),
 		required: true,
 	},
-	/**
-	 * Data is loading
-	 * */
 	isLoading: {
 		type: Boolean,
 		default: false,
diff --git a/src/components/MyKiva/BorrowerStatusCard.vue b/src/components/MyKiva/BorrowerStatusCard.vue
index 8062cf4b8a..02f6ce73ef 100644
--- a/src/components/MyKiva/BorrowerStatusCard.vue
+++ b/src/components/MyKiva/BorrowerStatusCard.vue
@@ -200,7 +200,7 @@ const weeksToRepay = computed(() => {
 	const minDate = differenceInWeeks(addMonths(today, 1), today);
 	const maxDate = differenceInWeeks(addMonths(expDate, 1), today);
 
-	if (minDate === maxDate) {
+	if (minDate === maxDate || maxDate < 0) {
 		return `${minDate} weeks`;
 	}
 

From 096637a9e8c2369c1afb9b67bb0eeed11334292a Mon Sep 17 00:00:00 2001
From: Christian Bedon <christian.bedon@contractors.kiva.org>
Date: Thu, 3 Oct 2024 16:28:10 -0500
Subject: [PATCH 09/10] fix: calculate next payment date

---
 src/components/MyKiva/BorrowerStatusCard.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/MyKiva/BorrowerStatusCard.vue b/src/components/MyKiva/BorrowerStatusCard.vue
index 02f6ce73ef..c7d3323a8d 100644
--- a/src/components/MyKiva/BorrowerStatusCard.vue
+++ b/src/components/MyKiva/BorrowerStatusCard.vue
@@ -188,8 +188,10 @@ const currentStep = computed(() => {
 });
 
 const weeksToRepay = computed(() => {
-	const date = loan.value?.terms?.expectedPayments?.[0]?.dueToKivaDate ?? null;
 	const today = new Date();
+	const date = loan.value?.terms?.expectedPayments
+		?.find(payment => differenceInWeeks(Date.parse(payment?.dueToKivaDate), today) > 0)
+		?.dueToKivaDate ?? null;
 	if (date) {
 		// Get the number of weeks between the first repayment date (in the future) and now
 		return `${differenceInWeeks(Date.parse(date), today)} weeks`;

From abc2c50174302ed71a5de9c753555ef8c5b4a555 Mon Sep 17 00:00:00 2001
From: Christian Bedon <christian.bedon@contractors.kiva.org>
Date: Thu, 3 Oct 2024 16:43:46 -0500
Subject: [PATCH 10/10] fix: checking status to know if a loan is fundraising

---
 src/components/MyKiva/BorrowerCarousel.vue   | 8 +++++---
 src/components/MyKiva/BorrowerStatusCard.vue | 6 ++++--
 src/graphql/query/myKiva.graphql             | 5 -----
 3 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/components/MyKiva/BorrowerCarousel.vue b/src/components/MyKiva/BorrowerCarousel.vue
index 885121edf3..421492fc4f 100644
--- a/src/components/MyKiva/BorrowerCarousel.vue
+++ b/src/components/MyKiva/BorrowerCarousel.vue
@@ -98,7 +98,6 @@ import KvButton from '@kiva/kv-components/vue/KvButton';
 import BorrowerImage from '#src/components/BorrowerProfile/BorrowerImage';
 import MyKivaContainer from '#src/components/MyKiva/MyKivaContainer';
 import KvLoadingPlaceholder from '@kiva/kv-components/vue/KvLoadingPlaceholder';
-import { isLoanFundraising } from '#src/util/loanUtils';
 import {
 	defineProps,
 	ref,
@@ -110,7 +109,10 @@ import {
 import {
 	PAYING_BACK,
 	ENDED,
-	DEFAULTED
+	DEFAULTED,
+	FUNDED,
+	FUNDRAISING,
+	RAISED
 } from '#src/api/fixtures/LoanStatusEnum';
 import BorrowerStatusCard from './BorrowerStatusCard';
 
@@ -136,7 +138,7 @@ const { loans } = toRefs(props);
 const carousel = ref(null);
 
 const hasActiveLoans = computed(() => {
-	return loans.value.some(loan => loan?.status === PAYING_BACK || isLoanFundraising(loan));
+	return loans.value.some(loan => [FUNDED, FUNDRAISING, PAYING_BACK, RAISED].includes(loan?.status));
 });
 
 const handleChange = event => {
diff --git a/src/components/MyKiva/BorrowerStatusCard.vue b/src/components/MyKiva/BorrowerStatusCard.vue
index c7d3323a8d..aab9424e5e 100644
--- a/src/components/MyKiva/BorrowerStatusCard.vue
+++ b/src/components/MyKiva/BorrowerStatusCard.vue
@@ -81,7 +81,6 @@ import {
 import KvExpandable from '#src/components/Kv/KvExpandable';
 import LoanNextSteps from '#src/components/Thanks/LoanNextSteps';
 import { addMonths, differenceInWeeks } from 'date-fns';
-import { isLoanFundraising } from '#src/util/loanUtils';
 import KvMaterialIcon from '@kiva/kv-components/vue/KvMaterialIcon';
 import {
 	ref,
@@ -91,6 +90,9 @@ import {
 	inject,
 	onMounted,
 } from 'vue';
+import {
+	FUNDRAISING,
+} from '#src/api/fixtures/LoanStatusEnum';
 
 const $kvTrackEvent = inject('$kvTrackEvent');
 
@@ -167,7 +169,7 @@ const loanFunFact = computed(() => {
 	}
 });
 
-const isFundraising = computed(() => isLoanFundraising(loan.value));
+const isFundraising = computed(() => loan.value?.status === FUNDRAISING);
 
 const loanStatus = computed(() => {
 	if (isFundraising.value) {
diff --git a/src/graphql/query/myKiva.graphql b/src/graphql/query/myKiva.graphql
index bcc8ffa233..55e4ec4f96 100644
--- a/src/graphql/query/myKiva.graphql
+++ b/src/graphql/query/myKiva.graphql
@@ -22,11 +22,6 @@ query myKivaQuery {
           }
         }
         loanAmount
-        loanFundraisingInfo {
-          fundedAmount
-          reservedAmount
-          isExpiringSoon
-        }
         plannedExpirationDate
         terms {
           currency