feat: empty basket carousel powered by flss in checkout page (#5043)

* feat: empty basket carousel powered by flss in checkout page

* feat: graphql uri updated for dev local config file

* feat: session uri updated in dev local config file

config/dev-local.js

@@ -8,9 +8,7 @@ module.exports = merge(base, devVm, {
 		host: 'localhost',
 		publicPath: '/',
 		photoPath: 'https://www-dev-kiva-org.freetls.fastly.net/img/',
-		graphqlUri: 'https://marketplace-api.dk1.kiva.org/graphql',
-		// Alternate graphql url (marketplace-api.dk1.kiva.org is redirected to this url)
-		// graphqlUri: 'https://gateway.development.kiva.org/graphql',
+		graphqlUri: 'https://gateway.development.kiva.org/graphql',
 		enableAnalytics: false,
 		enableSnowplow: false,
 		snowplowUri: 'events.fivetran.com/snowplow/v5qt54ocr2nm',
@@ -28,10 +26,8 @@ module.exports = merge(base, devVm, {
 		},
 	},
 	server: {
-		graphqlUri: 'https://marketplace-api.dk1.kiva.org/graphql',
-		sessionUri: 'https://www.dev.kiva.org/start-ui-session',
-		// Alternate session url
-		// sessionUri: 'https://www.development.kiva.org/start-ui-session',
+		graphqlUri: 'https://gateway.development.kiva.org/graphql',
+		sessionUri: 'https://www.development.kiva.org/start-ui-session',
 		memcachedEnabled: false,
 		disableCluster: true,
 	}

src/components/RandomLoanSelector/RandomLoanSelector.vue → src/components/Checkout/EmptyBasketCarousel.vue

@@ -45,31 +45,26 @@
 <script>
 import _throttle from 'lodash/throttle';
 import KvClassicLoanCardContainer from '@/components/LoanCards/KvClassicLoanCardContainer';
-import emptyBasketData from '@/graphql/query/checkout/emptyBasketData.graphql';
+import { runLoansQuery } from '@/util/loanSearch/dataUtils';
+import { FLSS_ORIGIN_CHECKOUT } from '@/util/flssUtils';
 import KvCarousel from '~/@kiva/kv-components/vue/KvCarousel';
 
 export default {
-	name: 'RandomLoanSelector',
+	name: 'EmptyBasketCarousel',
 	components: {
 		KvCarousel,
 		KvClassicLoanCardContainer
 	},
 	props: {
-		loans: {
-			type: Array,
-			default: () => [],
-		},
 		enableFiveDollarsNotes: {
 			type: Boolean,
 			default: false
 		},
 	},
 	data() {
 		return {
-			carouselCardWidth: '240px',
 			randomLoans: [],
 			loading: false,
-			scrollPos: 0,
 			windowWidth: typeof window !== 'undefined' ? window.innerWidth : 1024,
 			handleResize: _throttle(this.isWindowWidth, 200)
 		};
@@ -93,14 +88,15 @@ export default {
 		},
 	},
 	methods: {
-		loadLoans() {
+		async loadLoans() {
 			this.$emit('updating-totals', true);
-			this.apollo.query({
-				query: emptyBasketData,
-			}).then(({ data }) => {
-				this.randomLoans = data?.lend?.randomLoans?.values ?? [];
-				this.$emit('updating-totals', false);
-			});
+			const { loans } = await runLoansQuery(
+				this.apollo,
+				{ pageLimit: 15 },
+				FLSS_ORIGIN_CHECKOUT
+			);
+			this.randomLoans = loans ?? [];
+			this.$emit('updating-totals', false);
 		},
 		onInteractCarousel(interaction) {
 			this.$kvTrackEvent('carousel', 'click-carousel-horizontal-scroll', interaction);

src/pages/Checkout/CheckoutPage.vue

@@ -247,7 +247,7 @@
 					data-testid="empty-basket-loans"
 					style="min-height: 23rem;"
 				>
-					<random-loan-selector
+					<empty-basket-carousel
 						:enable-five-dollars-notes="enableFiveDollarsNotes"
 						@updating-totals="setUpdatingTotals"
 						@refreshtotals="refreshTotals"
@@ -298,7 +298,7 @@ import CampaignVerificationForm from '@/components/CorporateCampaign/CampaignVer
 import CampaignJoinTeamForm from '@/components/CorporateCampaign/CampaignJoinTeamForm';
 import CheckoutHolidayPromo from '@/components/Checkout/CheckoutHolidayPromo';
 import CheckoutDropInPaymentWrapper from '@/components/Checkout/CheckoutDropInPaymentWrapper';
-import RandomLoanSelector from '@/components/RandomLoanSelector/RandomLoanSelector';
+import EmptyBasketCarousel from '@/components/Checkout/EmptyBasketCarousel';
 import VerifyRemovePromoCredit from '@/components/Checkout/VerifyRemovePromoCredit';
 import upsellQuery from '@/graphql/query/checkout/upsellLoans.graphql';
 import UpsellModule from '@/components/Checkout/UpsellModule';
@@ -349,7 +349,7 @@ export default {
 		CampaignVerificationForm,
 		CheckoutHolidayPromo,
 		CheckoutDropInPaymentWrapper,
-		RandomLoanSelector,
+		EmptyBasketCarousel,
 		VerifyRemovePromoCredit,
 		UpsellModule,
 		MatchedLoansLightbox,

src/util/flssUtils.js

@@ -16,6 +16,7 @@ export const FLSS_ORIGIN_LEND_FILTER = 'web:lend-filter';
 export const FLSS_ORIGIN_BP_FUNDED = 'web:bp-funded';
 export const FLSS_ORIGIN_THANKS = 'web:thanks';
 export const FLSS_ORIGIN_PORTFOLIO_OVERVIEW = 'web:portfolio-overview';
+export const FLSS_ORIGIN_CHECKOUT = 'web:empty-checkout';
 
 /**
  * Gets the filters for FLSS