feat: load more updates (#5706)

* feat: load more cta added to my kiva journal updates

* feat: more journal updates work

* fix: lint issues fixed

* fix: updates offset fixed

.storybook/stories/JournalUpdatesCarousel.stories.js

@@ -72,4 +72,5 @@ const story = (args = {}) => {
 };
 
 export const Default = story({ loan: mockLoans[0], updates, lender, totalUpdates: 4 });
+export const LoadMore = story({ loan: mockLoans[0], updates, lender, totalUpdates: 6 });
 export const SingleUpdate = story({ loan: mockLoans[0], updates: [updates[0]], lender, totalUpdates: 1 });

src/components/MyKiva/JournalUpdatesCarousel.vue

@@ -5,9 +5,10 @@
 		</h3>
 		<KvCarousel
 			class="tw-w-full updates-carousel md:tw-overflow-visible"
+			:key="updates.length"
 			:multiple-slides-visible="true"
 			slides-to-scroll="visible"
-			:embla-options="{ loop: false }"
+			:embla-options="{ loop: false, startIndex: carouselIndex }"
 			@interact-carousel="interactCarousel"
 		>
 			<template v-for="(update, index) in updates" #[`slide${index}`] :key="update.id">
@@ -19,6 +20,20 @@
 					@share-loan-clicked="shareLoanClicked"
 				/>
 			</template>
+			<template v-if="showLoadMore" #view-more>
+				<div
+					:key="`view-more-card`"
+					class="tw-flex tw-items-center tw-h-full tw-pr-3"
+				>
+					<kv-button
+						class="tw-mt-2"
+						variant="secondary"
+						@click="loadMoreUpdates"
+					>
+						Load more<br>updates
+					</kv-button>
+				</div>
+			</template>
 		</KvCarousel>
 		<KvLightbox
 			:visible="isLightboxVisible"
@@ -48,6 +63,7 @@ import KvCarousel from '#kv-components/KvCarousel';
 import JournalUpdateCard from '#src/components/MyKiva/JournalUpdateCard';
 import KvLightbox from '#kv-components/KvLightbox';
 import ShareButton from '#src/components/BorrowerProfile/ShareButton';
+import KvButton from '#kv-components/KvButton';
 import {
 	ref,
 	toRefs,
@@ -78,13 +94,16 @@ const props = defineProps({
 	},
 });
 
-const { loan, updates } = toRefs(props);
+const { loan, updates, totalUpdates } = toRefs(props);
+
+const emit = defineEmits(['load-more-updates']);
 
 const isLightboxVisible = ref(false);
 const clickedUpdate = ref(0);
 const updateSubject = ref('');
 const updateBody = ref('');
 const shareLoan = ref(false);
+const carouselIndex = ref(0);
 
 const inPfp = computed(() => loan.value?.inPfp ?? false);
 
@@ -96,6 +115,8 @@ const pfpMinLenders = computed(() => loan.value?.pfpMinLenders ?? 0);
 
 const numLenders = computed(() => loan.value?.lenders?.numLenders ?? 0);
 
+const showLoadMore = computed(() => updates.value?.length < totalUpdates.value);
+
 const openLightbox = updateId => {
 	clickedUpdate.value = updateId;
 	const update = props.updates.find(u => u.id === updateId);
@@ -118,11 +139,24 @@ const interactCarousel = () => {
 	$kvTrackEvent('portfolio', 'click', 'update-carousel');
 };
 
-watch(() => updates, () => {
-	if (updates.value.length > 0) {
-		$kvTrackEvent('portfolio', 'view', 'At least one journal update viewed');
-	}
-});
+const loadMoreUpdates = () => {
+	$kvTrackEvent('portfolio', 'click', 'borrower-update-load-more');
+	emit('load-more-updates');
+};
+
+watch(
+	() => updates,
+	() => {
+		if (updates.value.length > 0 && updates.value.length < 3) {
+			$kvTrackEvent('portfolio', 'view', 'At least one journal update viewed');
+			carouselIndex.value = 0;
+		}
+		if (updates.value.length > 3) {
+			carouselIndex.value = updates.value.length - 2;
+		}
+	},
+	{ deep: true },
+);
 </script>
 
 <style lang="postcss" scoped>

src/pages/Portfolio/MyKiva/MyKivaPage.vue

@@ -54,6 +54,7 @@
 						:updates="loanUpdates"
 						:lender="lender"
 						:total-updates="totalUpdates"
+						@load-more-updates="loadMoreUpdates"
 					/>
 				</div>
 			</section>
@@ -196,6 +197,8 @@ const tier = ref(null);
 const isEarnedSectionModal = ref(false);
 const showLoanFootnote = ref(false);
 const totalLoans = ref(0);
+const updatesLimit = ref(3);
+const updatesOffset = ref(0);
 
 const isLoading = computed(() => !lender.value);
 const isAchievementDataLoaded = computed(() => !!badgeAchievementData.value);
@@ -255,18 +258,32 @@ const handleBackToJourney = () => {
 };
 
 const fetchLoanUpdates = loanId => {
-	apollo.query({ query: updatesQuery, variables: { loanId } })
+	apollo.query({
+		query: updatesQuery,
+		variables: {
+			loanId,
+			limit: updatesLimit.value,
+			offset: updatesOffset.value
+		}
+	})
 		.then(result => {
-			loanUpdates.value = result.data?.lend?.loan?.updates?.values ?? [];
 			totalUpdates.value = result.data?.lend?.loan?.updates?.totalCount ?? 0;
+			const updates = result.data?.lend?.loan?.updates?.values ?? [];
+			loanUpdates.value = loanUpdates.value.concat(updates);
 		}).catch(e => {
 			logReadQueryError(e, 'MyKivaPage updatesQuery');
 		});
 };
 
+const loadMoreUpdates = () => {
+	updatesOffset.value += updatesLimit.value;
+	fetchLoanUpdates(activeLoan.value.id);
+};
+
 const showSingleArray = computed(() => loans.value.length === 1 && loanUpdates.value.length === 1);
 
 const handleSelectedLoan = loan => {
+	updatesOffset.value = 0;
 	activeLoan.value = loan;
 	fetchLoanUpdates(activeLoan.value.id);
 };