From 330822a95927e5cba3ecfabbbcca662db65a998f Mon Sep 17 00:00:00 2001
From: Karan Sekhri <ksekhri@gmail.com>
Date: Wed, 24 Jul 2019 14:55:03 -0700
Subject: [PATCH] CASH-1101: Disable hover temporarily after detailed panel is
 triggered

Now when users click a HoverLoanCard to expand the DetailedLoanCard, they will no longer page through loans on mouseover until they first interact with either the DetailedLoanCard or explicitly click on a neighboring card.

Fixes:
* Tapping on image in small hover card on mobile no longer triggers page redirection
---
 .../LoanCards/HoverLoanCard/HoverLoanCard.vue | 23 ++++++++++++++++---
 .../HoverLoanCard/HoverLoanCardSmall.vue      | 12 +++++++++-
 .../LoanCards/LoanCardController.vue          |  9 ++++++++
 .../LoansByCategory/CategoryRowHover.vue      | 10 ++++++++
 4 files changed, 50 insertions(+), 4 deletions(-)

diff --git a/src/components/LoanCards/HoverLoanCard/HoverLoanCard.vue b/src/components/LoanCards/HoverLoanCard/HoverLoanCard.vue
index 3d0b3dcdc6..33e650f402 100644
--- a/src/components/LoanCards/HoverLoanCard/HoverLoanCard.vue
+++ b/src/components/LoanCards/HoverLoanCard/HoverLoanCard.vue
@@ -23,6 +23,7 @@
 				:loan="loan"
 				:percent-raised="percentRaised"
 				:expanded="expanded"
+				@update-detailed-loan-index="hoverCardSmallUpdateDetailedLoanIndex"
 			/>
 			<hover-loan-card-large
 				:amount-left="amountLeft"
@@ -34,7 +35,7 @@
 				:is-visitor="isVisitor"
 				:is-selected-by-another="isSelectedByAnother"
 				:items-in-basket="itemsInBasket"
-				@update-detailed-loan-index="updateDetailedLoanIndex"
+				@update-detailed-loan-index="hoverCardLargeUpdateDetailedLoanIndex"
 			/>
 			<div
 				class="more-details-wrapper"
@@ -93,6 +94,10 @@ export default {
 			type: Number,
 			default: 0,
 		},
+		preventUpdatingDetailedCard: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	computed: {
 		expanded() {
@@ -133,7 +138,9 @@ export default {
 	methods: {
 		handleMouseEnter() {
 			if (this.rowHasDetailedLoan && !this.isDetailed) {
-				this.updateDetailedLoanIndex();
+				if (!this.preventUpdatingDetailedCard) {
+					this.updateDetailedLoanIndex();
+				}
 			} else if (this.hoverEffectActive()) {
 				this.updateHoverLoanIndex();
 			}
@@ -170,12 +177,22 @@ export default {
 		},
 		handleClick() {
 			if (!this.hoverEffectActive()) {
-				this.$emit('update-detailed-loan-index', this.loanIndex);
+				this.updateDetailedLoanIndex();
 			}
 		},
 		trackInteraction(args) {
 			this.$emit('track-interaction', args);
 		},
+		hoverCardLargeUpdateDetailedLoanIndex() {
+			if (!this.rowHasDetailedLoan) {
+				this.$emit('set-prevent-updating-detailed-card', true);
+			}
+			this.updateDetailedLoanIndex();
+		},
+		hoverCardSmallUpdateDetailedLoanIndex() {
+			this.$emit('set-prevent-updating-detailed-card', false);
+			this.updateDetailedLoanIndex();
+		}
 	},
 };
 </script>
diff --git a/src/components/LoanCards/HoverLoanCard/HoverLoanCardSmall.vue b/src/components/LoanCards/HoverLoanCard/HoverLoanCardSmall.vue
index 5c29bb1716..c883f9aa3c 100644
--- a/src/components/LoanCards/HoverLoanCard/HoverLoanCardSmall.vue
+++ b/src/components/LoanCards/HoverLoanCard/HoverLoanCardSmall.vue
@@ -8,10 +8,15 @@
 			:standard-image-url="loan.image.default"
 			:is-visitor="true"
 			:use-default-styles="false"
+			:disable-link="true"
 
 			@track-loan-card-interaction="trackInteraction"
+			@image-click="handleClick"
 		/>
-		<div class="hover-loan-card-data-wrap">
+		<div
+			class="hover-loan-card-data-wrap"
+			@click="handleClick"
+		>
 			<p class="name">
 				{{ loan.name }}
 			</p>
@@ -49,6 +54,11 @@ export default {
 			default: false,
 		},
 	},
+	methods: {
+		handleClick() {
+			this.$emit('update-detailed-loan-index');
+		},
+	},
 };
 </script>
 <style lang="scss" scoped>
diff --git a/src/components/LoanCards/LoanCardController.vue b/src/components/LoanCards/LoanCardController.vue
index 19c7267df4..1130ee21b3 100644
--- a/src/components/LoanCards/LoanCardController.vue
+++ b/src/components/LoanCards/LoanCardController.vue
@@ -32,10 +32,12 @@
 		:hover-loan-index="hoverLoanIndex"
 		:shift-increment="shiftIncrement"
 		:time-left-message="timeLeftMessage"
+		:prevent-updating-detailed-card="preventUpdatingDetailedCard"
 
 		@update-detailed-loan-index="updateDetailedLoanIndex"
 		@update-hover-loan-index="updateHoverLoanIndex"
 		@close-detailed-loan-card="handleCloseDetailedLoanCard"
+		@set-prevent-updating-detailed-card="handleSetPreventUpdatingDetailedCard"
 	/>
 	<!--
 		Blocks of attributes above:
@@ -155,6 +157,10 @@ export default {
 			type: Number,
 			default: 0,
 		},
+		preventUpdatingDetailedCard: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	inject: ['apollo'],
 	computed: {
@@ -296,6 +302,9 @@ export default {
 		handleCloseDetailedLoanCard() {
 			this.$emit('close-detailed-loan-card');
 		},
+		handleSetPreventUpdatingDetailedCard(newState) {
+			this.$emit('set-prevent-updating-detailed-card', newState);
+		},
 	},
 };
 </script>
diff --git a/src/components/LoansByCategory/CategoryRowHover.vue b/src/components/LoansByCategory/CategoryRowHover.vue
index ac067e22fe..ae8aafb2dc 100755
--- a/src/components/LoansByCategory/CategoryRowHover.vue
+++ b/src/components/LoansByCategory/CategoryRowHover.vue
@@ -62,9 +62,11 @@
 						:detailed-loan-index="detailedLoanIndex"
 						:hover-loan-index="hoverLoanIndex"
 						:shift-increment="calculateCardShiftIncrement(index)"
+						:prevent-updating-detailed-card="preventUpdatingDetailedCard"
 
 						@update-detailed-loan-index="updateDetailedLoanIndex"
 						@update-hover-loan-index="updateHoverLoanIndex"
+						@set-prevent-updating-detailed-card="handleSetPreventUpdatingDetailedCard"
 
 						ref="hoverLoanCards"
 					/>
@@ -176,6 +178,7 @@ export default {
 			detailedLoanIndex: null,
 			hoverLoanIndex: null,
 			cardWidth: hoverCardSmallWidthTotal,
+			preventUpdatingDetailedCard: false,
 		};
 	},
 	computed: {
@@ -390,6 +393,13 @@ export default {
 		},
 		handleMouseLeave() {
 			this.hoverLoanIndex = null;
+			this.setPreventUpdatingDetailedCard(false);
+		},
+		setPreventUpdatingDetailedCard(newState) {
+			this.preventUpdatingDetailedCard = newState;
+		},
+		handleSetPreventUpdatingDetailedCard(newState) {
+			this.setPreventUpdatingDetailedCard(newState);
 		},
 	},
 };