fix: iterable url

src/components/Teams/TeamGoal.vue

@@ -54,16 +54,14 @@
 <script>
 import TeamInfoFromId from '@/graphql/query/teamInfoFromId.graphql';
 import teamNoImage from '@/assets/images/team_s135.png';
-import {
-	parseISO,
-	differenceInDays,
-} from 'date-fns';
+import teamGoalInfo from '@/plugins/team-goal-mixin';
 import KvProgressBar from '~/@kiva/kv-components/vue/KvProgressBar';
 import KvButton from '~/@kiva/kv-components/vue/KvButton';
 import KvLoadingPlaceholder from '~/@kiva/kv-components/vue/KvLoadingPlaceholder';
 
 export default {
 	name: 'TeamGoal',
+	mixins: [teamGoalInfo],
 	inject: ['apollo'],
 	components: {
 		KvButton,
@@ -79,42 +77,13 @@ export default {
 			teamPublicId: '',
 		};
 	},
-	props: {
-		goal: {
-			type: Object,
-			required: true,
-			default: () => ({}),
-		}
-	},
 	computed: {
-		challengeEndDate() {
-			return this.goal?.endDate ?? null;
-		},
-		// calculate days remaining between now and the challengeEndDate using the the datefns library
-		daysRemaining() {
-			// Get planned expiration time as Date
-			const plannedExpirationDate = parseISO(this.challengeEndDate);
-			const diffInDays = differenceInDays(plannedExpirationDate, new Date());
-			return diffInDays;
-		},
-		loansFunded() {
-			const loans = this.goal?.targets?.values ?? [];
-			// filter out loans where status is not complete
-			const completedLoans = loans.filter(loan => loan.status === 'COMPLETE');
-			return completedLoans.length ?? 0;
-		},
-		totalLoans() {
-			return this.goal?.targets?.totalCount ?? 0;
-		},
 		teamId() {
 			return this.goal?.teamId ?? null;
 		},
 		teamImage() {
 			return this.teamImageUrl || this.teamNoImage;
 		},
-		percentageFunded() {
-			return (this.loansFunded / this.totalLoans) * 100;
-		},
 		membersParticipating() {
 			return this.goal?.participation?.totalCount ?? 0;
 		},

src/components/Thanks/NotifyMe.vue

@@ -7,13 +7,13 @@
 						class="tw-flex tw-justify-between tw-w-full"
 					>
 						<p class="tw-text-left tw-font-medium">
-							5/12 loans funded
+							{{ loansFunded }}/{{ totalLoans }} loans funded
 						</p>
 						<div class="tw-flex tw-items-center tw-justify-center tw-relative">
 							<kv-progress-circle
 								class="tw-w-10 tw-z-2 tw-h-10"
 								:stroke-width="20"
-								:value="goalPercent"
+								:value="percentageFunded"
 								:arc-scale=".8"
 								:rotate="36"
 								:show-number="false"
@@ -23,11 +23,11 @@
 							</div>
 						</div>
 						<p class="tw-text-right tw-font-medium">
-							16 days remaining
+							{{ daysRemaining }} days remaining
 						</p>
 					</div>
 					<div class="tw-mt-2 tw-mb-6">
-						<h3>Challenge <span class="tw-text-eco-green-3">{{ goalPercent }}% complete</span></h3>
+						<h3>Challenge <span class="tw-text-eco-green-3">{{ percentageFunded }}% complete</span></h3>
 					</div>
 					<div class="tw-flex tw-flex-col tw-items-center">
 						<h2 class="tw-text-center tw-mb-2">
@@ -43,7 +43,6 @@
 							@click="notify"
 						>
 							<check-mark v-if="addedToIterable" class="tw-text-white tw-mr-1" />
-							<!-- <kv-icon class="tw-w-4 tw-h-4" name="checkmark" /> -->
 							<span>{{ buttonCta }}</span>
 						</kv-button>
 					</div>
@@ -55,19 +54,19 @@
 <script>
 import KvProgressCircle from '@/components/Kv/KvProgressCircle';
 import MailIcon from '@/assets/icons/inline/thanks-mail.svg';
-import KvIcon from '@/components/Kv/KvIcon';
 import CheckMark from '@/assets/icons/inline/check-circle.svg';
+import teamGoalInfo from '@/plugins/team-goal-mixin';
 import KvButton from '~/@kiva/kv-components/vue/KvButton';
 import KvPageContainer from '~/@kiva/kv-components/vue/KvPageContainer';
 import KvGrid from '~/@kiva/kv-components/vue/KvGrid';
 
 export default {
 	name: 'NotifyMe',
 	inject: ['apollo'],
+	mixins: [teamGoalInfo],
 	components: {
 		KvProgressCircle,
 		MailIcon,
-		KvIcon,
 		CheckMark,
 		KvButton,
 		KvPageContainer,
@@ -81,15 +80,14 @@ export default {
 	},
 	data() {
 		return {
-			goalPercent: 50,
-			iterableListIdString: 'testing',
+			iterableListIdString: '0daedc50-6b66-44de-898d-fc7365f64da5',
 			addedToIterable: false,
 			loading: false,
 		};
 	},
 	computed: {
 		buttonCta() {
-			return this.addedToIterable ? 'You\'re all set' : 'Yes, notify me';
+			return this.addedToIterable ? 'You\'re all set!' : 'Yes, notify me';
 		},
 		buttonState() {
 			if (this.loading) return 'loading';
@@ -104,7 +102,7 @@ export default {
 		async notify() {
 			this.loading = true;
 			// eslint-disable-next-line max-len
-			const response = await fetch(`//links.iterable.com/lists/publicAddGoalServiceForm?publicIdString=${this.iterableListIdString}`, {
+			const response = await fetch(`//links.iterable.com/lists/publicAddSubscriberForm?publicIdString=${this.iterableListIdString}`, {
 				method: 'POST',
 				body: new URLSearchParams({
 					email: this.email,
@@ -114,10 +112,9 @@ export default {
 				this.addedToIterable = true;
 				this.$showTipMsg(`We will notify ${this.email} when the challenge is announced!`);
 			} else {
-				this.addedToIterable = true;
-				this.loading = false;
 				this.$showTipMsg('There was a problem. Please try again.', 'error');
 			}
+			this.loading = false;
 		}
 	}
 };

src/graphql/query/teamsGoals.graphql

@@ -1,5 +1,5 @@
-query GetGoals {
-  getGoals(filters: { audienceType: TEAM, isActive: true}) {
+query GetGoals ($teamId: Int, $limit: Int) {
+  getGoals(limit: $limit, filters: { audienceType: TEAM, isActive: true, teamId: $teamId}) {
     totalCount
     values {
       id
@@ -8,7 +8,9 @@ query GetGoals {
       participation {
         totalCount
         values {
-          lenderId
+          lender {
+            id
+          }
         }
       }
       status

src/pages/Thanks/ThanksPage.vue

@@ -6,6 +6,7 @@
 			/>
 		</template>
 		<template v-else>
+			<NotifyMe v-if="goal" :goal="goal" :email="lender.email" />
 			<div class="row page-content" v-if="receipt && !showFocusedShareAsk">
 				<div class="small-12 columns thanks">
 					<div class="thanks__header hide-for-print">
@@ -118,7 +119,9 @@ import { userHasLentBefore, userHasDepositBefore } from '@/util/optimizelyUserMe
 import { setHotJarUserAttributes } from '@/util/hotJarUtils';
 import logFormatter from '@/util/logFormatter';
 import { joinArray } from '@/util/joinArray';
+import NotifyMe from '@/components/Thanks/NotifyMe';
 import KvButton from '~/@kiva/kv-components/vue/KvButton';
+import { fetchGoals } from '../../util/teamsUtil';
 
 const hasLentBeforeCookie = 'kvu_lb';
 const hasDepositBeforeCookie = 'kvu_db';
@@ -135,7 +138,8 @@ export default {
 		ThanksLayoutV2,
 		WwwPage,
 		ThanksPageCommentAndShare,
-		ThanksPageDonationOnly
+		ThanksPageDonationOnly,
+		NotifyMe
 	},
 	inject: ['apollo', 'cookieStore'],
 	metaInfo() {
@@ -156,7 +160,8 @@ export default {
 			monthlyDonationAmount: '',
 			isFirstLoan: false,
 			isFtdMessageEnable: false,
-			ftdCreditAmount: ''
+			ftdCreditAmount: '',
+			goal: null,
 		};
 	},
 	apollo: {
@@ -255,7 +260,21 @@ export default {
 		},
 		showFtdMessage() {
 			return this.isFirstLoan && this.isFtdMessageEnable && this.ftdCreditAmount;
-		}
+		},
+		defaultLoanTeamId() {
+			return this.loans[this.loans.length - 1]?.team?.id ?? null;
+		},
+		defaultLenderTeamId() {
+			const teamsIds = this.loans
+				.filter(loan => loan?.team?.id)
+				.map(loan => loan.team.id) ?? [];
+
+			// return this.lender?.teams?.find(team => teamsIds.includes(team.id)) ?? null;
+			return 94;
+		},
+		teamId() {
+			return this.defaultLenderTeamId ?? this.defaultLoanTeamId;
+		},
 	},
 	created() {
 		// Retrieve and apply Page level data + experiment state
@@ -356,6 +375,16 @@ 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.

src/plugins/team-goal-mixin.js

@@ -0,0 +1,40 @@
+import { parseISO, differenceInDays } from 'date-fns';
+
+export default {
+	props: {
+		goal: {
+			type: Object,
+			required: true,
+			default: () => ({}),
+		},
+	},
+	computed: {
+		challengeEndDate() {
+			return this.goal?.endDate ?? null;
+		},
+		loansFunded() {
+			const loans = this.goal?.targets?.values ?? [];
+			// filter out loans where status is not complete
+			const completedLoans = loans.filter(
+				loan => loan.status === 'COMPLETE'
+			);
+			return completedLoans.length ?? 0;
+		},
+		totalLoans() {
+			return this.goal?.targets?.totalCount ?? 0;
+		},
+		percentageFunded() {
+			return Math.round((this.loansFunded / this.totalLoans) * 100);
+		},
+		// calculate days remaining between now and the challengeEndDate using the the datefns library
+		daysRemaining() {
+			// Get planned expiration time as Date
+			const plannedExpirationDate = parseISO(this.challengeEndDate);
+			const diffInDays = differenceInDays(
+				plannedExpirationDate,
+				new Date()
+			);
+			return diffInDays;
+		},
+	},
+};

src/util/teamsUtil.js

@@ -118,10 +118,11 @@ export async function fetchLeaderboard(apollo, category) {
 	}
 }
 
-export async function fetchGoals(apollo) {
+export async function fetchGoals(apollo, limit = null, filters = null) {
 	try {
 		const result = await apollo.query({
 			query: teamsGoals,
+			variables: { ...filters, limit },
 		});
 		return result.data?.getGoals;
 	} catch (e) {