fix: add event to notify me button

src/components/Thanks/NotifyMe.vue

@@ -1,7 +1,7 @@
 <template>
 	<kv-page-container>
 		<kv-grid class="tw-grid-cols-12">
-			<div class="tw-col-span-12 lg:tw-col-span-8 lg:tw-col-start-3 tw-pt-2 tw-mb-4 hide-for-print">
+			<div class="tw-col-span-12 lg:tw-col-span-8 lg:tw-col-start-3 tw-pt-6 tw-mb-4 hide-for-print">
 				<div class="container">
 					<div
 						class="tw-flex tw-justify-between tw-w-full"
@@ -40,6 +40,7 @@
 								{'tw-pointer-events-none': addedToIterable }]"
 							:state="buttonState"
 							:variant="variant"
+							v-kv-track-event="['Thanks', 'click-teams-reward-alert', 'Alert me']"
 							@click="notify"
 						>
 							<kv-material-icon

src/pages/Thanks/ThanksPage.vue

@@ -6,7 +6,9 @@
 			/>
 		</template>
 		<template v-else>
-			<NotifyMe v-if="goal" :goal="goal" :email="lender.email" />
+			<div v-if="goal" class="tw-bg-secondary">
+				<NotifyMe :goal="goal" :email="lender.email" />
+			</div>
 			<div class="row page-content" v-if="receipt && !showFocusedShareAsk">
 				<div class="small-12 columns thanks">
 					<div class="thanks__header hide-for-print">
@@ -122,10 +124,31 @@ import { joinArray } from '@/util/joinArray';
 import NotifyMe from '@/components/Thanks/NotifyMe';
 import KvButton from '~/@kiva/kv-components/vue/KvButton';
 import { fetchGoals } from '../../util/teamsUtil';
+import teamsGoalsQuery from '../../graphql/query/teamsGoals.graphql';
 
 const hasLentBeforeCookie = 'kvu_lb';
 const hasDepositBeforeCookie = 'kvu_db';
 
+const getLoans = receipt => {
+	const loansResponse = receipt?.items?.values ?? [];
+	const loans = loansResponse
+		.filter(item => item.basketItemType === 'loan_reservation')
+		.map(item => {
+			return {
+				...item.loan,
+				team: item.team,
+			};
+		});
+
+	return loans;
+};
+
+const getTeamId = loans => {
+	const teamsIds = loans.filter(loan => !!loan?.team?.id)
+		.map(loan => loan.team.id) ?? [];
+	return teamsIds?.[0] ?? null;
+};
+
 export default {
 	name: 'ThanksPage',
 	components: {
@@ -176,9 +199,21 @@ export default {
 					checkoutId: transactionId,
 					visitorId: cookieStore.get('uiv') || null,
 				}
-			}).then(() => {
+			}).then(({ data }) => {
+				// Get teamId from receipt
+				let teamId = null;
+				const receipt = data?.shop?.receipt ?? null;
+				const loans = getLoans(receipt);
+				teamId = getTeamId(loans);
+
+				const filters = {
+					teamId,
+				};
+				const limit = 1;
+
 				return Promise.all([
 					client.query({ query: experimentAssignmentQuery, variables: { id: 'share_ask_copy' } }),
+					teamId ? fetchGoals(client, limit, filters) : null
 				]);
 			}).catch(errorResponse => {
 				logFormatter(
@@ -262,10 +297,7 @@ export default {
 			return this.isFirstLoan && this.isFtdMessageEnable && this.ftdCreditAmount;
 		},
 		teamId() {
-			const teamsIds = this.loans
-				.filter(loan => !!loan?.team?.id)
-				.map(loan => loan.team.id) ?? [];
-			return teamsIds?.[0] ?? null;
+			return getTeamId(this.loans);
 		},
 	},
 	created() {
@@ -310,15 +342,27 @@ export default {
 		const ftdCreditAmountData = data?.general?.ftd_message_amount ?? null;
 		this.ftdCreditAmount = ftdCreditAmountData ? ftdCreditAmountData.value : '';
 
-		const loansResponse = this.receipt?.items?.values ?? [];
-		this.loans = loansResponse
-			.filter(item => item.basketItemType === 'loan_reservation')
-			.map(item => {
-				return {
-					...item.loan,
-					team: item.team,
+		this.loans = getLoans(this.receipt);
+
+		// Fetch Goal Information
+		try {
+			if (this.teamId) {
+				const filters = {
+					teamId: this.teamId,
 				};
-			});
+				const limit = 1;
+
+				const response = this.apollo.readQuery({
+					query: teamsGoalsQuery,
+					variables: { ...filters, limit },
+				});
+
+				this.goal = response.getGoals?.values.length ? response?.getGoals?.values[0] : null;
+			}
+		} catch (e) {
+			logReadQueryError(e, `Teams Goal readQuery failed: (team_id: ${this.teamId})`);
+		}
+
 		// MARS-194-User metrics A/B Optimizely experiment
 		const depositTotal = this.receipt?.totals?.depositTotals?.depositTotal;
 
@@ -367,16 +411,6 @@ export default {
 		const pageEntry = data?.contentful?.entries?.items?.[0] ?? null;
 		this.pageData = pageEntry ? processPageContentFlat(pageEntry) : null;
 	},
-	mounted() {
-		const filters = {
-			teamId: this.teamId,
-		};
-		const limit = 1;
-		fetchGoals(this.apollo, limit, filters)
-			.then(response => {
-				this.goal = response.values.length ? response.values[0] : null;
-			});
-	},
 	methods: {
 		createGuestAccount() {
 			// This is the only place this variable should be set.