From cd249f67187f482400feaab64825cde27ebfd309 Mon Sep 17 00:00:00 2001
From: Matt Stover <mcs@mcstover.com>
Date: Fri, 4 Oct 2024 17:46:05 -0700
Subject: [PATCH] fix: use event emitter for dynamic events out of contentful
 content, fix basket hash

---
 src/components/Contentful/ButtonWrapper.vue   |  5 ++--
 src/components/WwwFrame/TheBasketBar.vue      |  2 +-
 .../CorporateCampaign/CCLandingPage.vue       | 24 ++++++++++++++-----
 src/plugins/event-emitter.js                  |  6 +++++
 4 files changed, 28 insertions(+), 9 deletions(-)
 create mode 100644 src/plugins/event-emitter.js

diff --git a/src/components/Contentful/ButtonWrapper.vue b/src/components/Contentful/ButtonWrapper.vue
index 67c210f923..6ac1bad504 100644
--- a/src/components/Contentful/ButtonWrapper.vue
+++ b/src/components/Contentful/ButtonWrapper.vue
@@ -12,6 +12,7 @@
 
 <script>
 import KvButton from '@kiva/kv-components/vue/KvButton';
+import emitter from '#src/plugins/event-emitter';
 
 /**
 * Contentful Button Wrapper
@@ -57,8 +58,8 @@ export default {
 			if (customEventName) {
 				// Current behavior is to replace a button navigation if a custom event name is passed
 				event.stopPropagation();
-				// Emit root level event that any component can listen for
-				this.$root.$emit(customEventName);
+				// Emit event that any component can listen for using the event-emitter plugin
+				emitter.emit(customEventName, { eventName: customEventName, event });
 			}
 		},
 	}
diff --git a/src/components/WwwFrame/TheBasketBar.vue b/src/components/WwwFrame/TheBasketBar.vue
index eed191e1d4..363f901d77 100644
--- a/src/components/WwwFrame/TheBasketBar.vue
+++ b/src/components/WwwFrame/TheBasketBar.vue
@@ -69,7 +69,7 @@ export default {
 	},
 	computed: {
 		basketLink() {
-			return this.corporate ? this.addHashToRoute('show-basket') : '/basket';
+			return this.corporate ? this.addHashToRoute('#show-basket') : '/basket';
 		},
 		hideBasketBar() {
 			// hide this banner on managed lending landing + checkout pages
diff --git a/src/pages/LandingPages/CorporateCampaign/CCLandingPage.vue b/src/pages/LandingPages/CorporateCampaign/CCLandingPage.vue
index 5fa6d8d032..679bd9e583 100644
--- a/src/pages/LandingPages/CorporateCampaign/CCLandingPage.vue
+++ b/src/pages/LandingPages/CorporateCampaign/CCLandingPage.vue
@@ -226,6 +226,7 @@ import LoanSearchFilters, { getSearchableFilters } from '#src/api/fixtures/LoanS
 import syncDate from '#src/util/syncDate';
 import trackTransactionEvent from '#src/util/trackTransactionEvent';
 import checkoutUtils from '#src/plugins/checkout-utils-mixin';
+import emitter from '#src/plugins/event-emitter';
 import updateLoanReservationTeam from '#src/graphql/mutation/updateLoanReservationTeam.graphql';
 import CampaignHowKivaWorks from '#src/components/CorporateCampaign/CampaignHowKivaWorks';
 import CampaignJoinTeamForm from '#src/components/CorporateCampaign/CampaignJoinTeamForm';
@@ -709,6 +710,11 @@ export default {
 		// show a loading screen if the page loads with an loan in the basket.
 		// const basketItems = this.rawPageData?.shop?.basket?.items?.values ?? [];
 		this.loadingPage = basketItems.some(item => item.__typename === 'LoanReservation'); // eslint-disable-line no-underscore-dangle, max-len
+
+		// setup emitter watcher
+		emitter.on('jumpToLoans', () => {
+			this.jumpToLoans();
+		});
 	},
 	async mounted() {
 		this.isClientReady = typeof window !== 'undefined';
@@ -1502,16 +1508,23 @@ export default {
 				this.basketBalancing = false;
 			}
 		},
-		checkoutLightboxClosed() {
+		async checkoutLightboxClosed() {
 			this.checkoutVisible = false;
+			// gaurd against navigation reset if hash is already empty
+			if (this.$router?.hash !== '') {
+				await this.$router.push(this.adjustRouteHash('')).catch(() => {});
+			}
 			this.handleScrollPosition();
-			this.$router.push(this.adjustRouteHash('')).catch(() => {});
+		},
+		getLoanSectionRef() {
+			const refs = this.$refs;
+			return refs?.mlLoanDisplay?.$refs || refs?.mlLoanDisplay?.[0]?.$refs;
 		},
 		handleScrollPosition(y) {
 			if (this.scrollToLoans) {
-				this.scrollToLoans = false;
-				this.loanDisplayComponent.campaignLoanSection.scrollIntoView({ behavior: 'smooth' });
-			} else if (y) {
+				// Fetch Current Refs using method above and Navigate using the result
+				this.getLoanSectionRef()?.campaignLoanSection?.scrollIntoView({ behavior: 'smooth' });
+			} else if (typeof y !== 'undefined') {
 				window.scrollTo(0, y);
 			}
 		},
@@ -1637,7 +1650,6 @@ export default {
 		jumpToLoans() {
 			this.scrollToLoans = true;
 			this.checkoutLightboxClosed();
-			this.handleScrollPosition();
 		},
 		adjustRouteHash(hash) {
 			const route = { ...this.$route };
diff --git a/src/plugins/event-emitter.js b/src/plugins/event-emitter.js
new file mode 100644
index 0000000000..371857e0a5
--- /dev/null
+++ b/src/plugins/event-emitter.js
@@ -0,0 +1,6 @@
+import mitt from 'mitt';
+
+// eslint-disable-next-line new-cap
+const emitter = new mitt();
+
+export default emitter;