feat: goals service notify me in thanks page ack 864

src/components/Teams/TeamGoal.vue

@@ -81,17 +81,15 @@
 <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 { isLegacyPlaceholderAvatar } from '@/util/imageUtils';
 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,
@@ -107,42 +105,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;
-		},
 		participationTotalCount() {
 			return this.goal?.participation?.totalCount ?? 0;
 		},

src/components/Thanks/NotifyMe.vue

@@ -0,0 +1,140 @@
+<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="container">
+					<div
+						class="tw-flex tw-justify-between tw-w-full"
+					>
+						<p class="tw-text-left tw-font-medium">
+							{{ 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="percentageFunded"
+								:arc-scale=".8"
+								:rotate="36"
+								:show-number="false"
+							/>
+							<div class="tw-absolute">
+								<mail-icon class="tw-h-4.5 tw-w-4" />
+							</div>
+						</div>
+						<p class="tw-text-right tw-font-medium">
+							{{ daysRemaining }} days remaining
+						</p>
+					</div>
+					<div class="tw-mt-2 tw-mb-6">
+						<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">
+							We’ve got some fun rewards
+							<span class="tw-text-brand">for teams who complete their challenges!</span>
+							Would you like to be notified of these rewards?
+						</h2>
+						<kv-button
+							:class="['notify-button',
+								{'tw-pointer-events-none': addedToIterable }]"
+							:state="buttonState"
+							:variant="variant"
+							@click="notify"
+						>
+							<kv-material-icon
+								v-if="addedToIterable"
+								class="tw-w-2.5 tw-h-2.5 tw-mr-1"
+								:icon="mdiCheckCircleOutline"
+							/>
+							<span>{{ buttonCta }}</span>
+						</kv-button>
+					</div>
+				</div>
+			</div>
+		</kv-grid>
+	</kv-page-container>
+</template>
+<script>
+import KvProgressCircle from '@/components/Kv/KvProgressCircle';
+import MailIcon from '@/assets/icons/inline/thanks-mail.svg';
+import teamGoalInfo from '@/plugins/team-goal-mixin';
+import { mdiCheckCircleOutline } from '@mdi/js';
+import KvButton from '~/@kiva/kv-components/vue/KvButton';
+import KvPageContainer from '~/@kiva/kv-components/vue/KvPageContainer';
+import KvGrid from '~/@kiva/kv-components/vue/KvGrid';
+import KvMaterialIcon from '~/@kiva/kv-components/vue/KvMaterialIcon';
+
+export default {
+	name: 'NotifyMe',
+	inject: ['apollo'],
+	mixins: [teamGoalInfo],
+	components: {
+		KvProgressCircle,
+		KvMaterialIcon,
+		MailIcon,
+		KvButton,
+		KvPageContainer,
+		KvGrid
+	},
+	props: {
+		email: {
+			type: String,
+			default: '',
+		}
+	},
+	data() {
+		return {
+			addedToIterable: false,
+			loading: false,
+			mdiCheckCircleOutline
+		};
+	},
+	computed: {
+		buttonCta() {
+			return this.addedToIterable ? 'You\'re all set!' : 'Yes, notify me';
+		},
+		buttonState() {
+			if (this.loading) return 'loading';
+			return '';
+		},
+		variant() {
+			return this.addedToIterable ? 'secondary' : 'primary';
+		},
+		iterableListIdString() {
+			const isProd = window.location.hostname === 'www.kiva.org';
+			return isProd ? '0daedc50-6b66-44de-898d-fc7365f64da5' : '84945c52-fd49-4ae8-9ab6-4daa11eb6052';
+		}
+	},
+	methods: {
+		async notify() {
+			this.loading = true;
+			// eslint-disable-next-line max-len
+			const response = await fetch(`//links.iterable.com/lists/publicAddSubscriberForm?publicIdString=${this.iterableListIdString}`, {
+				method: 'POST',
+				body: new URLSearchParams({
+					email: this.email,
+				})
+			});
+			if (response.status === 200) {
+				this.addedToIterable = true;
+				this.$showTipMsg(`We will notify ${this.email} when the next challenge is announced!`);
+			} else {
+				this.$showTipMsg('There was a problem. Please try again.', 'error');
+			}
+			this.loading = false;
+		}
+	}
+};
+</script>
+
+<style lang="postcss" scoped>
+.notify-button >>> span {
+  @apply tw-flex tw-items-center;
+}
+
+.container {
+  @apply tw-flex tw-flex-col tw-items-center tw-w-full tw-bg-white tw-rounded tw-px-1.5 tw-pt-1.5 tw-pb-2.5;
+}
+
+</style>

src/graphql/query/teamsGoals.graphql

@@ -1,35 +1,35 @@
-query GetGoals {
-	getGoals(filters: { audienceType: TEAM, isActive: true}) {
-		totalCount
-		values {
-			id
-			description
-			name
-			participation {
-				totalCount
-				values {
-					lender {
-						id
-						image {
-							url
-						}
-					}
-				}
-			}
-			status
-			targets {
-				totalCount
-				values {
-					... on LoanTarget {
-						loanId
-						status
-					}
-				}
-			}
-			endDate
-			... on TeamGoal {
-				teamId
-			}
-		}
-	}
+query GetGoals ($teamId: Int, $limit: Int) {
+  getGoals(limit: $limit, filters: { audienceType: TEAM, isActive: true, teamId: $teamId}) {
+    totalCount
+    values {
+      id
+      description
+      name
+      participation {
+        totalCount
+        values {
+          lender {
+            id
+            image {
+              url
+            }
+          }
+        }
+      }
+      status
+      targets {
+        totalCount
+        values {
+          ... on LoanTarget {
+            loanId
+            status
+          }
+        }
+      }
+      endDate
+      ... on TeamGoal {
+        teamId
+      }
+    }
+  }
 }

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,13 @@ export default {
 		},
 		showFtdMessage() {
 			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;
+		},
 	},
 	created() {
 		// Retrieve and apply Page level data + experiment state
@@ -356,6 +367,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;
+		},
+	},
+};