From 3b1d07d962c8b51c63cc11826ca7ce60bb2ca17a Mon Sep 17 00:00:00 2001
From: Roger Gutierrez <rogelio.gutierrez@contractors.kiva.org>
Date: Wed, 16 Aug 2023 17:30:36 -0600
Subject: [PATCH 1/2] feat: new loan card added for empty basket state in
 checkout page

---
 .../LoansYouMightLike/MinimalLoanCard.vue     | 174 ------------------
 .../RandomLoanSelector/RandomLoanSelector.vue |  68 +++++--
 src/pages/Checkout/CheckoutPage.vue           |   1 +
 3 files changed, 51 insertions(+), 192 deletions(-)
 delete mode 100644 src/components/LoansYouMightLike/MinimalLoanCard.vue

diff --git a/src/components/LoansYouMightLike/MinimalLoanCard.vue b/src/components/LoansYouMightLike/MinimalLoanCard.vue
deleted file mode 100644
index 2df545010d..0000000000
--- a/src/components/LoansYouMightLike/MinimalLoanCard.vue
+++ /dev/null
@@ -1,174 +0,0 @@
-<template>
-	<div
-		class="minimal-loan-card tw-bg-primary tw-border-tertiary tw-border tw-rounded tw-overflow-hidden"
-		style="width: 240px;"
-	>
-		<!-- Image -->
-		<!-- is-visitor set to false is hiding the loan favorite star on borrower images -->
-		<loan-card-image
-			:loan-id="loan.id"
-			:name="loan.name"
-			:retina-image-url="loan.image.retina"
-			:standard-image-url="loan.image.default"
-			:is-visitor="isVisitor"
-			v-kv-track-event="['basket', 'basket-loan-profile', 'basket-loan-profile']"
-			:open-in-new-tab="true"
-		/>
-		<div class="minimal-loan-card-data-wrap tw-mt-1.5 tw-mx-2">
-			<p
-				:loan-id="loan.id"
-				:name="loan.name"
-				:title="loan.name"
-				class="name tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis tw-mb-1"
-			>
-				{{ loan.name }}
-			</p>
-			<!-- loan meter	 -->
-			<fundraising-status-meter
-				class="minimal-fundraising-meter-margins"
-				:amount-left="amountLeft"
-				:percent-raised="percentRaised"
-				:is-funded="loan.status==='funded'"
-				:short-meter="true"
-			/>
-			<!-- Country -->
-			<p
-				class="loan-data tw-text-secondary tw-mt-1.5"
-				:country="loan.geocode.country.name"
-				:sector="loan.activity.name"
-			>
-				{{ loan.geocode.country.name }} <br> {{ loan.activity.name }}
-			</p>
-		</div>
-		<!-- Add to basket text -->
-		<div class="minimal-loan-card-action-wrap tw-mt-3 tw-mb-2 tw-mx-2">
-			<button
-				:loan-id="loan.id"
-				v-if="!itemInBasket"
-				@click="addToBasket()"
-				class="card-action tw-text-link"
-				v-kv-track-event="[
-					'basket',
-					'basket-loan-upsell',
-					'loan-type',
-					parseInt(cardNumber),
-					parseInt(cardNumber)
-				]"
-			>
-				Add to basket
-			</button>
-			<p
-				class="card-action"
-				v-else
-			>
-				In your basket
-			</p>
-		</div>
-	</div>
-</template>
-<script>
-import numeral from 'numeral';
-import _forEach from 'lodash/forEach';
-import _includes from 'lodash/includes';
-import * as Sentry from '@sentry/vue';
-import LoanCardImage from '@/components/LoanCards/LoanCardImage';
-import FundraisingStatusMeter from '@/components/LoanCards/FundraisingStatus/FundraisingStatusMeter';
-import updateLoanReservation from '@/graphql/mutation/updateLoanReservation.graphql';
-
-export default {
-	name: 'MinimalLoanCard',
-	components: {
-		LoanCardImage,
-		FundraisingStatusMeter,
-	},
-	inject: ['apollo'],
-	props: {
-		itemsInBasket: {
-			type: Array,
-			default: () => [],
-		},
-		loan: {
-			type: Object,
-			default: () => {
-				return {
-					userProperties: {},
-					loanFundraisingInfo: {},
-					geocode: {
-						country: {}
-					},
-					image: {}
-				};
-			}
-		},
-		cardNumber: {
-			type: Number,
-			default: 0
-		},
-		isVisitor: {
-			type: Boolean,
-			default: true
-		},
-		country: {
-			type: String,
-			default: ''
-		},
-		sector: {
-			type: String,
-			default: ''
-		},
-	},
-	computed: {
-		itemInBasket() {
-			return _includes(this.itemsInBasket, this.loan.id);
-		},
-		amountLeft() {
-			const { fundedAmount, reservedAmount } = this.loan.loanFundraisingInfo;
-			return numeral(this.loan.loanAmount).subtract(fundedAmount).subtract(reservedAmount).value();
-		},
-		isFunded() {
-			return this.loan.status === 'funded' || this.amountLeft <= 0;
-		},
-		percentRaised() {
-			return numeral(numeral(this.loan.loanAmount).subtract(this.amountLeft))
-				.divide(this.loan.loanAmount).value();
-		}
-	},
-	methods: {
-		addToBasket() {
-			this.$emit('updating-totals', true);
-			this.apollo.mutate({
-				mutation: updateLoanReservation,
-				variables: {
-					loanid: this.loan.id,
-					price: numeral(25).format('0.00'),
-				},
-			}).then(({ errors }) => {
-				if (errors) {
-					// Handle errors from adding to basket
-					_forEach(errors, error => {
-						this.$showTipMsg(error.message, 'error');
-						try {
-							this.$kvTrackEvent(
-								'Lending',
-								'Add-to-Basket',
-								`Failed: ${error.message.substring(0, 40)}...`
-							);
-							Sentry.captureMessage(`Add to Basket: ${error.message}`);
-						} catch (e) {
-							// no-op
-						}
-					});
-					this.$emit('updating-totals', false);
-				} else {
-					// If no errors, update the basket + loan info
-					this.$emit('refreshtotals');
-				}
-			}).catch(error => {
-				this.$showTipMsg('Failed to add loan. Please try again.', 'error');
-				this.$kvTrackEvent('Lending', 'Add-to-Basket', 'Failed to add loan. Please try again.');
-				Sentry.captureException(error);
-			});
-		}
-	},
-};
-</script>
diff --git a/src/components/RandomLoanSelector/RandomLoanSelector.vue b/src/components/RandomLoanSelector/RandomLoanSelector.vue
index 8dc76b8020..f725a63b0c 100644
--- a/src/components/RandomLoanSelector/RandomLoanSelector.vue
+++ b/src/components/RandomLoanSelector/RandomLoanSelector.vue
@@ -9,7 +9,6 @@
 				tw-border-t
 				tw-border-tertiary
 			"
-			style="min-height: 23rem;"
 		>
 			<div v-if="randomLoans.length" class="section-container tw-mx-auto tw-my-0">
 				<kv-carousel
@@ -22,18 +21,18 @@
 					ref="randomLoansCarousel"
 					:multiple-slides-visible="true"
 					slides-to-scroll="visible"
-					:slide-max-width="carouselCardWidth"
+					:slide-max-width="singleSlideWidth"
 					@interact-carousel="onInteractCarousel"
 				>
 					<template v-for="(loan, index) in randomLoans" #[`slide${index}`]>
-						<minimal-loan-card
-							:key="index"
-							:class="`minimal-loancard-${index}`"
-							:loan="loan"
-							category-set-id="random-loans"
-							:card-number="index"
-							@refreshtotals="$emit('refreshtotals')"
-							@updating-totals="$emit('updating-totals', $event)"
+						<kv-classic-loan-card-container
+							:key="`loan-card-${index}`"
+							:loan-id="loan.id"
+							:use-full-width="true"
+							:show-tags="true"
+							:enable-five-dollars-notes="enableFiveDollarsNotes"
+							@add-to-basket="addToBasket(index)"
+							class="tw-h-full"
 						/>
 					</template>
 				</kv-carousel>
@@ -43,7 +42,8 @@
 </template>
 
 <script>
-import MinimalLoanCard from '@/components/LoansYouMightLike/MinimalLoanCard';
+import _throttle from 'lodash/throttle';
+import KvClassicLoanCardContainer from '@/components/LoanCards/KvClassicLoanCardContainer';
 import emptyBasketData from '@/graphql/query/checkout/emptyBasketData.graphql';
 import KvCarousel from '~/@kiva/kv-components/vue/KvCarousel';
 
@@ -51,13 +51,17 @@ export default {
 	name: 'RandomLoanSelector',
 	components: {
 		KvCarousel,
-		MinimalLoanCard,
+		KvClassicLoanCardContainer
 	},
 	props: {
 		loans: {
 			type: Array,
 			default: () => [],
-		}
+		},
+		enableFiveDollarsNotes: {
+			type: Boolean,
+			default: false
+		},
 	},
 	data() {
 		return {
@@ -65,14 +69,27 @@ export default {
 			randomLoans: [],
 			loading: false,
 			scrollPos: 0,
-			windowWidth: 0,
-			wrapperWidth: 0,
+			windowWidth: typeof window !== 'undefined' ? window.innerWidth : 1024,
+			handleResize: _throttle(this.isWindowWidth, 200)
 		};
 	},
 	inject: ['apollo'],
-	mounted() {
-		// we're doing this all client side
-		this.loadLoans();
+	computed: {
+		singleSlideWidth() {
+			if (this.windowWidth <= 733) {
+				return '100%';
+			}
+			if (this.windowWidth > 733 && this.windowWidth < 1024) {
+				return '328px';
+			}
+			if (this.windowWidth >= 1024) {
+				if (this.isLargeCard) {
+					return '512px';
+				}
+				return '328px';
+			}
+			return '336px';
+		},
 	},
 	methods: {
 		loadLoans() {
@@ -87,6 +104,21 @@ export default {
 		onInteractCarousel(interaction) {
 			this.$kvTrackEvent('carousel', 'click-carousel-horizontal-scroll', interaction);
 		},
+		addToBasket(index) {
+			this.$kvTrackEvent('basket', 'basket-loan-upsell', 'loan-type', index, index);
+			this.$emit('refreshtotals');
+		},
+		isWindowWidth() {
+			this.windowWidth = window.innerWidth;
+		}
+	},
+	mounted() {
+		window.addEventListener('resize', this.handleResize);
+		// we're doing this all client side
+		this.loadLoans();
 	},
+	beforeDestroy() {
+		window.removeEventListener('resize', this.handleResize);
+	}
 };
 </script>
diff --git a/src/pages/Checkout/CheckoutPage.vue b/src/pages/Checkout/CheckoutPage.vue
index fa533e4271..7c988a7989 100644
--- a/src/pages/Checkout/CheckoutPage.vue
+++ b/src/pages/Checkout/CheckoutPage.vue
@@ -246,6 +246,7 @@
 					style="min-height: 23rem;"
 				>
 					<random-loan-selector
+						:enable-five-dollars-notes="enableFiveDollarsNotes"
 						@updating-totals="setUpdatingTotals"
 						@refreshtotals="refreshTotals"
 					/>

From 4130eb82ed24e7b7d2c46a945fb493aa66c20ab9 Mon Sep 17 00:00:00 2001
From: Roger Gutierrez <rogelio.gutierrez@contractors.kiva.org>
Date: Thu, 17 Aug 2023 10:38:10 -0600
Subject: [PATCH 2/2] fix: updating totals event restored in checkout empty
 status

---
 src/components/LoanCards/KvClassicLoanCardContainer.vue  | 2 ++
 src/components/RandomLoanSelector/RandomLoanSelector.vue | 1 +
 2 files changed, 3 insertions(+)

diff --git a/src/components/LoanCards/KvClassicLoanCardContainer.vue b/src/components/LoanCards/KvClassicLoanCardContainer.vue
index 293ba01855..e128ed822e 100644
--- a/src/components/LoanCards/KvClassicLoanCardContainer.vue
+++ b/src/components/LoanCards/KvClassicLoanCardContainer.vue
@@ -199,6 +199,8 @@ export default {
 			this.basketItems = result.data?.shop?.basket?.items?.values || null;
 		},
 		addToBasket(lendAmount) {
+			// emitting updating tools for empty state in checkout page
+			this.$emit('updating-totals', true);
 			this.isAdding = true;
 			return setLendAmount({
 				amount: lendAmount,
diff --git a/src/components/RandomLoanSelector/RandomLoanSelector.vue b/src/components/RandomLoanSelector/RandomLoanSelector.vue
index f725a63b0c..fbd5074918 100644
--- a/src/components/RandomLoanSelector/RandomLoanSelector.vue
+++ b/src/components/RandomLoanSelector/RandomLoanSelector.vue
@@ -31,6 +31,7 @@
 							:use-full-width="true"
 							:show-tags="true"
 							:enable-five-dollars-notes="enableFiveDollarsNotes"
+							@updating-totals="$emit('updating-totals', $event)"
 							@add-to-basket="addToBasket(index)"
 							class="tw-h-full"
 						/>