Merge pull request #5585 from kiva/fix-mp-884-cc-page-dynamic-events

fix: mp 884 cc page dynamic events

package.json

@@ -11,7 +11,7 @@
 		"start": "cross-env NODE_ENV=production node --max-old-space-size=2048 server/index.js",
 		"start-k8s": "cross-env NODE_ENV=production node --max-old-space-size=1536 server/index.js",
 		"docker-dev-vm": "rimraf node_modules/.cache/hard-source && cross-env NODE_ENV=development node server/dev-server.js",
-		"inspect-dev": "cross-env NODE_ENV=development node --inspect --max-old-space-size=4096 server/dev-server.js",
+		"inspect-dev": "cross-env NODE_ENV=development TAILWIND_MODE=watch node --inspect --max-old-space-size=4096 server/dev-server.js",
 		"inspect": "cross-env NODE_ENV=production node --inspect --max-old-space-size=4096 server/index.js",
 		"build": "npm run build:all",
 		"build:all": "rimraf dist && npm run build:client && npm run build:server",
@@ -107,6 +107,7 @@
 		"memcached": "^2.2.2",
 		"memjs": "^1.2.2",
 		"minimist": "^1.2.6",
+		"mitt": "^3.0.1",
 		"numeral": "^2.0.6",
 		"passport": "^0.7.0",
 		"passport-auth0": "^1.4.4",

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 });
 			}
 		},
 	}

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

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';
@@ -765,9 +771,6 @@ export default {
 		}
 	},
 	computed: {
-		loanDisplayComponent() {
-			return this.$refs?.mlLoanDisplay?.$refs || this.$refs?.mlLoanDisplay?.[0]?.$refs;
-		},
 		campaignLoanWrapperProps() {
 			return {
 				filters: this.filters,
@@ -1502,16 +1505,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 +1647,6 @@ export default {
 		jumpToLoans() {
 			this.scrollToLoans = true;
 			this.checkoutLightboxClosed();
-			this.handleScrollPosition();
 		},
 		adjustRouteHash(hash) {
 			const route = { ...this.$route };

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;

vite.config.js

@@ -49,6 +49,7 @@ export default defineConfig(({ isSsrBuild, mode }) => {
 				// vite default
 				return size <= 4096;
 			},
+			sourcemap: !isProd,
 		},
 		css: {
 			postcss: {