diff --git a/.storybook/mock-data/loan-data-mock.js b/.storybook/mock-data/loan-data-mock.js index e7c32658bb..697661e630 100644 --- a/.storybook/mock-data/loan-data-mock.js +++ b/.storybook/mock-data/loan-data-mock.js @@ -7,6 +7,7 @@ export default [ "status": "fundraising", "name": "Alan", "borrowerCount": 1, + "gender": "female", "geocode": { "city": "Kochkor district, Naryn region", "state": "Naryn Region", @@ -77,6 +78,7 @@ export default [ "status": "fundraising", "name": "Alan", "borrowerCount": 1, + "gender": "female", "geocode": { "city": "Lyantonde", "state": "Central Region", @@ -143,6 +145,7 @@ export default [ "status": "fundraising", "name": "Alan", "borrowerCount": 1, + "gender": "female", "geocode": { "city": "Elbasan", "state": "Elbasan County", diff --git a/.storybook/preview.js b/.storybook/preview.js index 3c0b8e3567..1f220c65bb 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -31,6 +31,7 @@ setup((app) => { // Mock the analytics Vue plugin app.directive('kv-track-event', () => { }); app.config.globalProperties.$kvTrackEvent = () => { }; + app.config.globalProperties.$kvTrackSelfDescribingEvent = () => { }; // provide global application config app.config.globalProperties.$appConfig = config.app; diff --git a/.storybook/stories/BorrowerProfile.stories.js b/.storybook/stories/BorrowerProfile.stories.js index 27ef539b0a..09193bec7d 100644 --- a/.storybook/stories/BorrowerProfile.stories.js +++ b/.storybook/stories/BorrowerProfile.stories.js @@ -12,6 +12,41 @@ const queryResult = { data: { lend: { loan: mockLoans[0] + }, + fundraisingLoans: { + values: [ + { + id: 2413188 + }, + { + id: 2411288 + }, + { + id: 2406410 + }, + { + id: 2406459 + }, + { + id: 2406956 + }, + { + id: 2408858 + } + ] + }, + ml: { + relatedLoansByTopics: [ + { + values: [ + mockLoans[0], + mockLoans[0], + mockLoans[0], + mockLoans[0], + mockLoans[0] + ] + } + ] } } }; @@ -48,13 +83,15 @@ export const Default = () => ({ template: ``, }); -export const Funded = () => ({ +export const Funded = (_, { argTypes }) => ({ + props: Object.keys(argTypes), components: { FundedBorrowerProfile }, parameters: { layout: 'fullscreen', }, mixins: [apolloStoryMixin({ queryResult }), cookieStoreStoryMixin(), kvAuth0StoryMixin], - template: ``, + setup() { return { loan: mockLoans[0], hash: mockLoans[0].image.hash }; }, + template: ``, }); export const PrivateFundraisingPeriod = () => ({ diff --git a/.storybook/stories/KivaClassicSingleCategoryCarousel.stories.js b/.storybook/stories/KivaClassicSingleCategoryCarousel.stories.js index 8a97178a2e..6766076916 100644 --- a/.storybook/stories/KivaClassicSingleCategoryCarousel.stories.js +++ b/.storybook/stories/KivaClassicSingleCategoryCarousel.stories.js @@ -3,38 +3,40 @@ import apolloStoryMixin from '../mixins/apollo-story-mixin'; import cookieStoreStoryMixin from '../mixins/cookie-store-story-mixin'; import KvGrid from '@kiva/kv-components/vue/KvGrid'; import KvPageContainer from '@kiva/kv-components/vue/KvPageContainer'; +import loanData from '../mock-data/loan-data-mock'; const queryResult = { - "data": { - "lend": { - "loanChannelsById": [ + data: { + lend: { + loanChannelsById: [ { - "id": 108, - "name": "Recommended by lenders", - "url": "https://www.dev.kiva.org/lend/recommended-by-lenders", - "description": "Although nothing is guaranteed, loans such as these are favored by experienced lenders because they are the most likely to yield a repayment in one month and to be entirely repaid within a year.", - "loans": { - "values": [ - { - "id": 2413188 - }, - { - "id": 2411288 - }, - { - "id": 2406410 - }, - { - "id": 2406459 - }, - { - "id": 2406956 - }, - { - "id": 2408858 - } - ] - } + id: 108, + name: "Recommended by lenders", + url: "https://www.dev.kiva.org/lend/recommended-by-lenders", + description: "Although nothing is guaranteed, loans such as these are favored by experienced lenders because they are the most likely to yield a repayment in one month and to be entirely repaid within a year.", + } + ], + loan: loanData[0], + }, + fundraisingLoans: { + values: [ + { + id: 2413188 + }, + { + id: 2411288 + }, + { + id: 2406410 + }, + { + id: 2406459 + }, + { + id: 2406956 + }, + { + id: 2408858 } ] } diff --git a/.storybook/stories/KivaMultiCategoryGrid.stories.js b/.storybook/stories/KivaMultiCategoryGrid.stories.js index 44303da1f4..3f1470c137 100644 --- a/.storybook/stories/KivaMultiCategoryGrid.stories.js +++ b/.storybook/stories/KivaMultiCategoryGrid.stories.js @@ -3,6 +3,15 @@ import apolloStoryMixin from '../mixins/apollo-story-mixin'; import cookieStoreStoryMixin from '../mixins/cookie-store-story-mixin'; import LoanCategorySelectorHomeExp from '#src/components/LoanCollections/HomeExp/LoanCategorySelectorHomeExp'; import KvGrid from '@kiva/kv-components/vue/KvGrid'; +import loanData from '../mock-data/loan-data-mock'; + +const queryResult = { + data: { + lend: { + loan: loanData[0], + }, + } +}; const args = { showAllButton: true, @@ -49,7 +58,7 @@ export default { export const DefaultGrid = (_, { argTypes }) => ({ props: Object.keys(argTypes), components: { LoanCategorySelectorHomeExp, KivaLoanCardCategory, KvGrid }, - mixins: [apolloStoryMixin(), cookieStoreStoryMixin()], + mixins: [apolloStoryMixin({ queryResult }), cookieStoreStoryMixin()], methods: { handleCategoryClick(payload) { this.selectedChannel = this.combinedLoanChannelData.find( diff --git a/src/components/LoanCollections/KivaClassicLoanCarousel.vue b/src/components/LoanCollections/KivaClassicLoanCarousel.vue index d629c2f64a..ab40c998ca 100644 --- a/src/components/LoanCollections/KivaClassicLoanCarousel.vue +++ b/src/components/LoanCollections/KivaClassicLoanCarousel.vue @@ -33,29 +33,29 @@ /> - + -
-

{{ viewAllLoansCategoryTitle }}

-
-
-
-
-

Check back later, we add new loans everyday.

+ :to="cleanUrl" + v-kv-track-event="[ + 'Lending', + 'click-carousel-view-all-category-loans', + `${viewAllLoansCategoryTitle}`]" + > +
+

{{ viewAllLoansCategoryTitle }}

+
+ + +