Merge pull request #5121 from kiva/ACK-913-make-thanks-page-completed…

…-text-clickable

feat: add link back to team challenge page

.storybook/stories/NotifyMe.stories.js

@@ -0,0 +1,34 @@
+import NotifyMe from '@/components/Thanks/NotifyMe';
+
+export default {
+	title: 'Components/Notify Me',
+	component: NotifyMe,
+};
+
+const story = (args = {}) => {
+	const template = (_args, { argTypes }) => ({
+		props: Object.keys(argTypes),
+		components: { NotifyMe },
+		template: '<notify-me :goal="goal" email="[email protected]" :teamPublicId="teamPublicId" />',
+	})
+	template.args = args;
+	return template;
+};
+
+const future = new Date();
+future.setDate(future.getDate() + 2);
+
+const goal = {
+	endDate: future.toISOString(),
+	targets: {
+		totalCount: 2,
+		values: [
+			{ status: 'COMPLETE' },
+			{ status: 'IN_PROGRESS' },
+		]
+	}
+}
+
+export const Default = story({ goal });
+
+export const Team = story({ goal, teamPublicId: 'aplus' });

src/components/Thanks/NotifyMe.vue

@@ -27,7 +27,12 @@
 						</p>
 					</div>
 					<div class="tw-mt-2 tw-mb-6">
-						<h3>Challenge <span class="tw-text-eco-green-3">{{ percentageFunded }}% complete</span></h3>
+						<h3>
+							Challenge
+							<a :href="teamChallengePath" class="tw-text-eco-green-3">
+								{{ percentageFunded }}% complete
+							</a>
+						</h3>
 					</div>
 					<div class="tw-flex tw-flex-col tw-items-center">
 						<h2 class="tw-text-center tw-mb-2">
@@ -68,7 +73,6 @@ import KvMaterialIcon from '~/@kiva/kv-components/vue/KvMaterialIcon';
 
 export default {
 	name: 'NotifyMe',
-	inject: ['apollo'],
 	mixins: [teamGoalInfo],
 	components: {
 		KvProgressCircle,
@@ -82,7 +86,11 @@ export default {
 		email: {
 			type: String,
 			default: '',
-		}
+		},
+		teamPublicId: {
+			type: String,
+			default: '',
+		},
 	},
 	data() {
 		return {
@@ -105,7 +113,10 @@ export default {
 		iterableListIdString() {
 			const isProd = window.location.hostname === 'www.kiva.org';
 			return isProd ? '0daedc50-6b66-44de-898d-fc7365f64da5' : '84945c52-fd49-4ae8-9ab6-4daa11eb6052';
-		}
+		},
+		teamChallengePath() {
+			return this.teamPublicId ? `/team/challenge/${this.teamPublicId}` : '/teams';
+		},
 	},
 	methods: {
 		async notify() {

src/graphql/query/thanksPage.graphql

@@ -87,9 +87,9 @@ query checkoutReceipt($checkoutId: Int!, $visitorId: String) {
 						}
 						team {
 							id
+							teamPublicId
 							name
 						}
-
 					}
 				}
 			}

src/pages/Thanks/ThanksPage.vue

@@ -7,7 +7,7 @@
 		</template>
 		<template v-else>
 			<div v-if="goal" class="tw-bg-secondary">
-				<NotifyMe :goal="goal" :email="lender.email" />
+				<NotifyMe :goal="goal" :email="lender.email" :team-public-id="teamPublicId" />
 			</div>
 			<div class="row page-content" v-if="receipt && !showFocusedShareAsk">
 				<div class="small-12 columns thanks">
@@ -299,6 +299,9 @@ export default {
 		teamId() {
 			return getTeamId(this.loans);
 		},
+		teamPublicId() {
+			return this.loans?.[0]?.team?.teamPublicId;
+		},
 	},
 	created() {
 		// Retrieve and apply Page level data + experiment state