feat!: migrate to vue 3

server/util/live-loan/live-loan-fetch.js

@@ -60,9 +60,30 @@ async function fetchLoansFromGraphQL(request, resultPath) {
 }
 
 // Get per-user recommended loans from the ML service
-async function fetchRecommendationsByLoginId(id) {
-	return fetchLoansFromGraphQL({
-		query: `{
+async function fetchRecommendationsByLoginId(id, flss = false) {
+	if (flss) {
+		return fetchLoansFromGraphQL(
+			{
+				query: `query($userId: Int) {
+					fundraisingLoans(
+						pageNumber: 0,
+						limit: ${loanCount},
+						userId: $userId,
+						origin: "email:live-loans"
+					) {
+						${loanValues}
+					}
+				}`,
+				variables: {
+					userId: Number(id),
+				}
+			},
+			'data.fundraisingLoans.values'
+		);
+	}
+	return fetchLoansFromGraphQL(
+		{
+			query: `{
 				ml {
 					recommendationsByLoginId(
 						segment: all
@@ -74,13 +95,16 @@ async function fetchRecommendationsByLoginId(id) {
 					}
 				}
 			}`,
-	}, 'data.ml.recommendationsByLoginId.values');
+		},
+		'data.ml.recommendationsByLoginId.values'
+	);
 }
 
 // Get loan-to-loan recommended loans from the ML service
 async function fetchRecommendationsByLoanId(id) {
-	return fetchLoansFromGraphQL({
-		query: `{
+	return fetchLoansFromGraphQL(
+		{
+			query: `{
 				ml {
 					relatedLoansByTopics(
 						loanId: ${id},
@@ -92,7 +116,9 @@ async function fetchRecommendationsByLoanId(id) {
 					}
 				}
 			}`,
-	}, 'data.ml.relatedLoansByTopics[0].values');
+		},
+		'data.ml.relatedLoansByTopics[0].values'
+	);
 }
 
 // Get mapping of sector name to id
@@ -301,9 +327,13 @@ const parseFilterStringFLSS = async filterString => {
 };
 
 // Get loans from the Fundraising Loan Search Service matching a set of filters
-async function fetchRecommendationsByFilter(userId, filterString) {
-	return fetchLoansFromGraphQL({
-		query: `query($userId: Int, $filters: [FundraisingLoanSearchFilterInput!]) {
+async function fetchRecommendationsByFilter(filterString) {
+	const filters = await parseFilterStringFLSS(filterString);
+	const sortOptions = await fetchFLSSSorts();
+	const sortBy = parseSortString(filterString, sortOptions);
+	return fetchLoansFromGraphQL(
+		{
+			query: `query($filters: [FundraisingLoanSearchFilterInput!], $sortBy: SortEnum) {
 				fundraisingLoans(
 					pageNumber: 0,
 					limit: ${loanCount},
@@ -314,11 +344,13 @@ async function fetchRecommendationsByFilter(userId, filterString) {
 					${loanValues}
 				}
 			}`,
-		variables: {
-			userId: Number(userId),
-			filters: parseFilterStringFLSS(filterString),
-		}
-	}, 'data.fundraisingLoans.values');
+			variables: {
+				filters,
+				sortBy,
+			}
+		},
+		'data.fundraisingLoans.values'
+	);
 }
 
 // Only returns true for supported legacy loan search filters
@@ -398,47 +430,81 @@ async function fetchRecommendationsByLegacyFilter(filterString) {
 		parseFilterStringLegacy(filterString),
 		fetchSorts(),
 	]);
-	return fetchLoansFromGraphQL({
-		query: `query($filters: LoanSearchFiltersInput, $sort: LoanSearchSortByEnum) {
+	const sort = parseSortString(filterString, sortOptions);
+	return fetchLoansFromGraphQL(
+		{
+			query: `query($filters: LoanSearchFiltersInput, $sort: LoanSearchSortByEnum) {
 				lend {
 					loans(limit: ${loanCount}, offset: 0, filters: $filters, sortBy: $sort) {
 						${loanValues}
 					}
 				}
 			}`,
-		variables: {
-			filters,
-			sort,
+			variables: {
+				filters,
+				sort,
+			},
 		},
-	}, 'data.lend.loans.values');
+		'data.lend.loans.values'
+	);
 }
 
 // Get loans from legacy lend search matching a set of filters
 async function fetchLoanById(loanId) {
-	return fetchLoansFromGraphQL({
-		query: `query($loanId: Int!) {
+	return fetchLoansFromGraphQL(
+		{
+			query: `query($loanId: Int!) {
 				lend {
 					loan(id: $loanId) {
 						${loanData}
 					}
 				}
 			}`,
-		variables: {
-			loanId: Number(loanId),
-		}
-	}, 'data.lend.loan');
+			variables: {
+				loanId: Number(loanId),
+			}
+		},
+		'data.lend.loan'
+	);
 }
 
+// Check if the filter string contains any FLSS filters
+const shouldUseFLSS = async filterString => {
+	// input needs to be a string
+	if (!filterString || typeof filterString !== 'string') {
+		return true; // Returning true so that FLSS is the default
+	}
+
+	// Check which sort options are used in the filter string
+	const [legacySorts, flssSorts] = await Promise.all([fetchSorts(), fetchFLSSSorts()]);
+	const legacySort = parseSortString(filterString, legacySorts);
+	const FLSSSort = parseSortString(filterString, flssSorts);
+	const usingLegacySort = !!legacySort;
+	const usingFLSSSort = !!FLSSSort;
+
+	// If the filter string contains a sort option that is only supported by one of the services, use that service
+	if (usingFLSSSort && !usingLegacySort) {
+		return true;
+	}
+	if (usingLegacySort && !usingFLSSSort) {
+		return false;
+	}
+
+	// Use FLSS by default
+	return true;
+};
+
+// Export a function that will fetch loans by live-loan type and id
 export default async function fetchLoansByType(type, id, flss = false) {
 	if (type === 'user') {
-		return flss ? fetchRecommendationsByFilter(id) : fetchRecommendationsByLoginId(id);
-	}
-	if (type === 'loan') {
+		return fetchRecommendationsByLoginId(id, flss);
+	} if (type === 'loan') {
 		return fetchRecommendationsByLoanId(id);
-	}
-	if (type === 'filter') {
-		// Swap which line below is commented out to switch between FLSS and legacy (monolith) lend search
-		// return fetchRecommendationsByFilter(id);
+	} if (type === 'filter') {
+		if (await shouldUseFLSS(id)) {
+			return fetchRecommendationsByFilter(id);
+		}
+		warn(`Using legacy loan search for filter "${id}"`);
 		return fetchRecommendationsByLegacyFilter(id);
 	}
 	if (type === 'loanid') {

src/components/MyKiva/MyKivaContainer.vue

@@ -11,8 +11,8 @@
 </template>
 
 <script>
-import KvPageContainer from '~/@kiva/kv-components/vue/KvPageContainer';
-import KvGrid from '~/@kiva/kv-components/vue/KvGrid';
+import KvPageContainer from '@kiva/kv-components/vue/KvPageContainer';
+import KvGrid from '@kiva/kv-components/vue/KvGrid';
 
 export default {
 	name: 'MyKivaContainer',

src/components/MyKiva/MyKivaHero.vue

@@ -15,8 +15,8 @@
 
 <script>
 import { mdiCogOutline } from '@mdi/js';
-import MyKivaContainer from '@/components/MyKiva/MyKivaContainer';
-import KvMaterialIcon from '~/@kiva/kv-components/vue/KvMaterialIcon';
+import MyKivaContainer from '#src/components/MyKiva/MyKivaContainer';
+import KvMaterialIcon from '@kiva/kv-components/vue/KvMaterialIcon';
 
 export default {
 	name: 'MyKivaHero',
@@ -35,12 +35,12 @@ export default {
 <style lang="postcss" scoped>
 
 .landscape {
-	background-image: url('~@/assets/images/my-kiva/header-mobile.svg');
+	background-image: url('#src/assets/images/my-kiva/header-mobile.svg');
 	background-position: 75%;
 	height: 148px;
 
 	@screen md {
-		background-image: url('~@/assets/images/my-kiva/header-desktop.svg');
+		background-image: url('#src/assets/images/my-kiva/header-desktop.svg');
 		background-size: cover;
 		background-position: center;
 		height: 249px;

src/components/MyKiva/MyKivaProfile.vue

@@ -25,8 +25,8 @@
 
 <script>
 
-import ActivityAvatar from '@/components/Iwd/ActivityAvatar';
-import MyKivaContainer from '@/components/MyKiva/MyKivaContainer';
+import ActivityAvatar from '#src/components/Iwd/ActivityAvatar';
+import MyKivaContainer from '#src/components/MyKiva/MyKivaContainer';
 
 export default {
 	name: 'MyKivaProfile',

src/components/Thanks/Badges/DetailSection.vue

@@ -6,31 +6,32 @@
 				YOUR BADGES
 			</p>
 		</div>
-		<kv-carousel
-			:embla-options="{ loop: true, align: 'center', startIndex: selectedBadgeIdx }"
-			:is-dotted="true"
-			:in-circle="true"
-			class="badge-carousel"
-			@change="handleChange"
-			ref="badgeCarousel"
-		>
-			<template v-for="badge in badges" #[`slide${badge.id}`] :key="badge.id">
-				<div
-					class="tw-flex tw-flex-col"
-					v-kv-track-event="[
-						'thanks',
-						'click',
-						'choose-a-badge',
-						badge.name
-					]"
-				>
-					<img
-						:src="imageRequire(`${badge.img}.svg`)"
-						class="badge tw-mx-auto"
-						alt="Gift icon"
+		<div class="tw-mx-auto" style="max-width: 8rem;">
+			<kv-carousel
+				:embla-options="{
+					loop: false,
+					align: 'center',
+					startIndex: selectedBadgeIdx,
+				}"
+				slides-to-scroll="visible"
+				:is-dotted="true"
+				:in-circle="true"
+				class="badge-carousel tw-overflow-visible"
+				@change="handleChange"
+				ref="badgeCarousel"
+			>
+				<template v-for="badge in badges" #[`slide${badge.id}`] :key="badge.id">
+					<div
+						class="tw-flex tw-flex-col slide-container"
+						v-kv-track-event="[
+							'thanks',
+							'click',
+							'choose-a-badge',
+							badge.name
+						]"
 					>
 						<img
-							:src="imageRequire(`./${badge.img}.svg`)"
+							:src="imageRequire(`${badge.img}.svg`)"
 							class="badge tw-mx-auto tw-mb-2"
 							alt="Gift icon"
 						>

src/pages/Portfolio/ImpactDashboard/DistributionGraphs.vue

@@ -23,8 +23,6 @@ import { gql } from 'graphql-tag';
 import delayUntilVisibleMixin from '#src/plugins/delay-until-visible-mixin';
 import getCacheKey from '#src/util/getCacheKey';
 import StatsTable from '#src/components/Stats/StatsTable';
-import KvPieChart from '@kiva/kv-components/vue/KvPieChart';
-import KvTreeMapChart from '@kiva/kv-components/vue/KvTreeMapChart';
 import AsyncPortfolioSection from './AsyncPortfolioSection';
 
 export default {

src/pages/Portfolio/ImpactDashboard/ImpactDashboardPage.vue

@@ -30,6 +30,9 @@
 </template>
 
 <script>
+import experimentAssignmentQuery from '#src/graphql/query/experimentAssignment.graphql';
+import experimentVersionFragment from '#src/graphql/fragments/experimentVersion.graphql';
+import { trackExperimentVersion } from '#src/util/experiment/experimentUtils';
 import WwwPage from '#src/components/WwwFrame/WwwPage';
 import TheMyKivaSecondaryMenu from '#src/components/WwwFrame/Menus/TheMyKivaSecondaryMenu';
 import ThePortfolioTertiaryMenu from '#src/components/WwwFrame/Menus/ThePortfolioTertiaryMenu';

src/pages/Portfolio/MyKiva/MyKivaPage.vue

@@ -6,11 +6,11 @@
 </template>
 
 <script>
-import { trackExperimentVersion } from '@/util/experiment/experimentUtils';
-import WwwPage from '@/components/WwwFrame/WwwPage';
-import myKivaQuery from '@/graphql/query/myKiva.graphql';
-import MyKivaHero from '@/components/MyKiva/MyKivaHero';
-import MyKivaProfile from '@/components/MyKiva/MyKivaProfile';
+import { trackExperimentVersion } from '#src/util/experiment/experimentUtils';
+import WwwPage from '#src/components/WwwFrame/WwwPage';
+import myKivaQuery from '#src/graphql/query/myKiva.graphql';
+import MyKivaHero from '#src/components/MyKiva/MyKivaHero';
+import MyKivaProfile from '#src/components/MyKiva/MyKivaProfile';
 
 const MY_KIVA_EXP_KEY = 'my_kiva_page';
 

src/router/routes.js

@@ -364,7 +364,7 @@ export default [
 	},
 	{
 		name: 'lenderProfile',
-		path: '/lender-vue/:publicId',
+		path: '/lender/:publicId',
 		component: () => import('#src/pages/LenderProfile/LenderProfile'),
 		meta: {
 			excludeFromStaticSitemap: true,
@@ -465,7 +465,7 @@ export default [
 	},
 	{
 		path: '/my-kiva',
-		component: () => import('@/pages/Portfolio/MyKiva/MyKivaPage'),
+		component: () => import('#src/pages/Portfolio/MyKiva/MyKivaPage'),
 		meta: {
 			authenticationRequired: true,
 			excludeFromStaticSitemap: true,