feat: my kiva experiment setup added (#5480)

src/graphql/query/portfolioQuery.graphql

@@ -17,6 +17,10 @@ query portfolioQuery {
 			id
 			preferences
 		}
+		lender {
+			id
+			loanCount
+		}
 	}
 	general {
 		team_challenge_enable: uiConfigSetting(key: "portfolio_team_challenge_enable") {

src/pages/Portfolio/ImpactDashboard/ImpactDashboardPage.vue

@@ -30,6 +30,9 @@
 </template>
 
 <script>
+import experimentAssignmentQuery from '@/graphql/query/experimentAssignment.graphql';
+import experimentVersionFragment from '@/graphql/fragments/experimentVersion.graphql';
+import { trackExperimentVersion } from '@/util/experiment/experimentUtils';
 import WwwPage from '@/components/WwwFrame/WwwPage';
 import TheMyKivaSecondaryMenu from '@/components/WwwFrame/Menus/TheMyKivaSecondaryMenu';
 import ThePortfolioTertiaryMenu from '@/components/WwwFrame/Menus/ThePortfolioTertiaryMenu';
@@ -50,6 +53,8 @@ import EducationModule from './EducationModule';
 import YourDonations from './YourDonations';
 import TeamChallenge from './TeamChallenge';
 
+const MY_KIVA_EXP_KEY = 'my_kiva_page';
+
 export default {
 	name: 'ImpactDashboardPage',
 	inject: ['apollo', 'cookieStore'],
@@ -82,7 +87,22 @@ export default {
 	mixins: [badgeGoalMixin],
 	apollo: {
 		preFetch(config, client) {
-			return client.query({ query: portfolioQuery });
+			return Promise.all([
+				client.query({ query: portfolioQuery }),
+				client.query({ query: experimentAssignmentQuery, variables: { id: MY_KIVA_EXP_KEY } }),
+			]).then(result => {
+				const userData = result?.[0]?.data?.my ?? {};
+				const loanCount = userData.lender?.loanCount ?? 0;
+
+				const { version } = client.readFragment({
+					id: `Experiment:${MY_KIVA_EXP_KEY}`,
+					fragment: experimentVersionFragment,
+				}) ?? {};
+
+				if (version === 'b' && loanCount < 4) {
+					return Promise.reject({ path: '/my-kiva' });
+				}
+			});
 		},
 	},
 	methods: {
@@ -121,6 +141,14 @@ export default {
 	async mounted() {
 		this.loadEducationPost();
 
+		trackExperimentVersion(
+			this.apollo,
+			this.$kvTrackEvent,
+			'event-tracking',
+			MY_KIVA_EXP_KEY,
+			'EXP-MP-623-Sept2024'
+		);
+
 		if (this.$route?.query?.goal_saved) {
 			const badgeName = this.$route?.query?.goal_saved ?? '';
 

src/pages/Portfolio/MyKiva/MyKivaPage.vue

@@ -0,0 +1,33 @@
+<template>
+	<www-page main-class="tw-bg-secondary">
+		<kv-page-container>
+			<!-- My Kiva Page Content -->
+		</kv-page-container>
+	</www-page>
+</template>
+
+<script>
+import { trackExperimentVersion } from '@/util/experiment/experimentUtils';
+import WwwPage from '@/components/WwwFrame/WwwPage';
+import KvPageContainer from '~/@kiva/kv-components/vue/KvPageContainer';
+
+const MY_KIVA_EXP_KEY = 'my_kiva_page';
+
+export default {
+	name: 'MyKivaPage',
+	inject: ['apollo', 'cookieStore'],
+	components: {
+		WwwPage,
+		KvPageContainer,
+	},
+	mounted() {
+		trackExperimentVersion(
+			this.apollo,
+			this.$kvTrackEvent,
+			'event-tracking',
+			MY_KIVA_EXP_KEY,
+			'EXP-MP-623-Sept2024'
+		);
+	},
+};
+</script>

src/router/routes.js

@@ -442,6 +442,14 @@ module.exports = [
 			excludeFromStaticSitemap: true,
 		}
 	},
+	{
+		path: '/my-kiva',
+		component: () => import('@/pages/Portfolio/MyKiva/MyKivaPage'),
+		meta: {
+			authenticationRequired: true,
+			excludeFromStaticSitemap: true,
+		}
+	},
 	{
 		path: '/portfolio',
 		component: () => import('@/pages/Portfolio/ImpactDashboard/ImpactDashboardPage'),