feat: toggle what is next for all cards and fix number of loans in ca…

…rousel to match tabs

src/components/MyKiva/BorrowerCarousel.vue

@@ -83,8 +83,12 @@
 					:embla-options="{ loop: false, align: 'center'}"
 					@change="onInteractCarousel"
 				>
-					<template v-for="(loan, index) in loans" #[`slide${index+1}`] :key="loan.id || index">
-						<BorrowerStatusCard :loan="loan" class="tw-h-full" />
+					<template v-for="(loan, index) in filteredLoans" #[`slide${index+1}`] :key="loan.id || index">
+						<BorrowerStatusCard
+							:loan="loan" class="tw-h-full"
+							@toggle-what-is-next="openWhatIsNext = $event"
+							:open-what-is-next="openWhatIsNext"
+						/>
 					</template>
 				</KvCarousel>
 			</div>
@@ -156,6 +160,7 @@ const { loans, totalLoans } = toRefs(props);
 const carousel = ref(null);
 const tabs = ref(null);
 const windowWidth = ref(0);
+const openWhatIsNext = ref(false);
 
 const hasActiveLoans = computed(() => {
 	return loans.value.some(loan => [FUNDED, FUNDRAISING, PAYING_BACK, RAISED].includes(loan?.status));

src/components/MyKiva/BorrowerStatusCard.vue

@@ -98,6 +98,7 @@ import {
 	toRefs,
 	defineProps,
 	inject,
+	watch,
 } from 'vue';
 import {
 	FUNDRAISING,
@@ -111,10 +112,15 @@ const props = defineProps({
 		type: Object,
 		required: true,
 	},
+	openWhatIsNext: {
+		type: Boolean,
+		required: false,
+	}
 });
 
-const { loan } = toRefs(props);
-const open = ref(false);
+const { loan, openWhatIsNext } = toRefs(props);
+const open = ref(openWhatIsNext.value);
+const emit = defineEmits(['toggle-what-is-next']);
 
 const borrowerName = computed(() => loan.value?.name ?? '');
 const borrowerCountry = computed(() => loan.value?.geocode?.country?.name ?? '');
@@ -221,8 +227,12 @@ const toggleWhatIsNext = () => {
 	if (!open.value) {
 		$kvTrackEvent('portfolio', 'click', 'what-is-next', borrowerName.value, loan.value.id);
 	}
-	open.value = !open.value;
+	emit('toggle-what-is-next', !open.value);
 };
+
+watch(() => openWhatIsNext.value, () => {
+	open.value = openWhatIsNext.value;
+});
 </script>
 
 <style lang="postcss" scoped>