diff --git a/.storybook/stories/JournalUpdatesCarousel.stories.js b/.storybook/stories/JournalUpdatesCarousel.stories.js
index 70c9d53244..fda5c081cd 100644
--- a/.storybook/stories/JournalUpdatesCarousel.stories.js
+++ b/.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 });
diff --git a/src/components/MyKiva/JournalUpdatesCarousel.vue b/src/components/MyKiva/JournalUpdatesCarousel.vue
index 998f5975c1..334906a6bd 100644
--- a/src/components/MyKiva/JournalUpdatesCarousel.vue
+++ b/src/components/MyKiva/JournalUpdatesCarousel.vue
@@ -5,9 +5,10 @@
@@ -19,6 +20,20 @@
@share-loan-clicked="shareLoanClicked"
/>
+
+
+
+ Load more
updates
+
+
+
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 },
+);