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 @@ + 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 }, +);