Merge pull request #5544 from kiva/fix-migration-stories

fix: migration stories
kiva · Sep 25, 2024 · cbf002d · cbf002d
2 parents a225fbb + da61990
commit cbf002d
Show file tree

Hide file tree

Showing 7 changed files with 106 additions and 54 deletions.
diff --git 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
@@ -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
@@ -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: `<borrower-profile />`,
 });
 
-export const Funded = () => ({
+export const Funded = (_, { argTypes }) => ({
+	props: Object.keys(argTypes),
 	components: { FundedBorrowerProfile },
 	parameters: {
 		layout: 'fullscreen',
 	},
 	mixins: [apolloStoryMixin({ queryResult }), cookieStoreStoryMixin(), kvAuth0StoryMixin],
-	template: `<funded-borrower-profile />`,
+	setup() { return { loan: mockLoans[0], hash: mockLoans[0].image.hash }; },
+	template: `<funded-borrower-profile :loan="loan" :hash="hash" />`,
 });
 
 export const PrivateFundraisingPeriod = () => ({

diff --git 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
@@ -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
@@ -33,29 +33,29 @@
 				/>
 			</template>
 			<!-- Show View more Card -->
-			<router-link
-				v-if="showViewMoreCard"
-				:key="`view-more-card`"
-				class="tw-flex tw-items-center tw-h-full tw-w-full
+			<template v-if="showViewMoreCard" #view-more>
+				<router-link
+					:key="`view-more-card`"
+					class="tw-flex tw-items-center tw-h-full tw-w-full
 						hover:tw-bg-action-highlight hover:tw-text-primary-inverse tw-rounded"
-				:to="cleanUrl"
-				v-kv-track-event="[
-					'Lending',
-					'click-carousel-view-all-category-loans',
-					`${viewAllLoansCategoryTitle}`]"
-			>
-				<div class="tw-w-full tw-text-center">
-					<h3>{{ viewAllLoansCategoryTitle }}</h3>
-				</div>
-			</router-link>
-			<div
-				v-if="showCheckBackMessage" class="tw-flex tw-items-center tw-h-full tw-w-full
-					tw-border-action-highlight tw-rounded"
-			>
-				<div class="tw-w-full tw-text-center">
-					<h3>Check back later, we add new loans everyday.</h3>
+					:to="cleanUrl"
+					v-kv-track-event="[
+						'Lending',
+						'click-carousel-view-all-category-loans',
+						`${viewAllLoansCategoryTitle}`]"
+				>
+					<div class="tw-w-full tw-text-center">
+						<h3>{{ viewAllLoansCategoryTitle }}</h3>
+					</div>
+				</router-link>
+			</template>
+			<template v-if="showCheckBackMessage" #check-back>
+				<div class="tw-flex tw-items-center tw-h-full tw-w-full tw-border-action-highlight tw-rounded">
+					<div class="tw-w-full tw-text-center">
+						<h3>Check back later, we add new loans everyday.</h3>
+					</div>
 				</div>
-			</div>
+			</template>
 		</kv-carousel>
 		<template v-if="newHomeExp">
 			<div class="tw-hidden md:tw-grid md:tw-grid-cols-3 md:tw-gap-4">

diff --git a/src/components/LoanCollections/KivaClassicSingleCategoryCarousel.vue b/src/components/LoanCollections/KivaClassicSingleCategoryCarousel.vue
@@ -152,7 +152,7 @@ export default {
 				channelUrl,
 				loanQueryVars,
 			);
-			const loanChannelData = channelData?.data?.lend?.loanChannelsById ?? [];
+			const loanChannelData = channelData?.lend?.loanChannelsById ?? [];
 			this.selectedChannel = loanChannelData?.[0];
 		},
 	},