Merge pull request #4961 from kiva/ACK-744_process_join_team_page

feat: new process join team page

src/pages/ProcessJoinTeam.vue

@@ -0,0 +1,183 @@
+<template>
+	<www-page>
+		<kv-page-container>
+			<kv-grid class="tw-grid-cols-12 tw-pt-3 md:tw-pt-5 lg:tw-pt-7 tw-mb-4 md:tw-mb-6">
+				<div
+					class="tw-col-span-12 md:tw-col-start-3 md:tw-col-span-8"
+				>
+					<div v-if="isLoading" class="tw-flex tw-items-center tw-flex-col">
+						<h2>Joining team {{ teamName }}</h2>
+						<div>
+							<kv-loading-spinner class="tw-mt-2" />
+						</div>
+					</div>
+					<div v-else>
+						<h2 v-if="isPending">
+							Your request to join the {{ teamName }} team is pending. Please check back later.
+						</h2>
+						<h2 v-if="isMember">
+							You are a member of the {{ teamName }} team.
+						</h2>
+					</div>
+				</div>
+			</kv-grid>
+		</kv-page-container>
+	</www-page>
+</template>
+
+<script>
+/**
+ * This component is used for processing a join team request after authentication
+ * The flow would look like this: click button > auth0 > this component
+ * The user should always be authenticated when they reach this component
+ * If team join is successful, the user will be redirected to the doneUrl
+ * If team join is unsuccessful, display error message
+ * If join team is pending, display pending message
+ */
+import { gql } from '@apollo/client';
+
+import WwwPage from '@/components/WwwFrame/WwwPage';
+import joinTeam from '@/graphql/mutation/joinTeam.graphql';
+import KvPageContainer from '~/@kiva/kv-components/vue/KvPageContainer';
+import KvGrid from '~/@kiva/kv-components/vue/KvGrid';
+import KvLoadingSpinner from '~/@kiva/kv-components/vue/KvLoadingSpinner';
+
+const userTeamMembership = gql`query userTeamMembership( $teamPublicId: String!) {
+	my {
+		id
+		userAccount {
+		id
+		}
+	}
+	community {
+		team(teamPublicId: $teamPublicId) {
+			id
+			userProperties {
+				membershipStatus
+			}
+			name
+		}
+	}
+}`;
+
+export default {
+	name: 'ProcessJoinTeam',
+	props: {
+		doneUrl: {
+			type: String,
+			default: null
+		},
+		teamRecruitmentId: {
+			type: Number,
+			default: null,
+		},
+		teamPublicId: {
+			type: String,
+			required: true
+		},
+		promoId: {
+			type: Number,
+			default: null
+		},
+	},
+	components: {
+		KvLoadingSpinner,
+		KvGrid,
+		KvPageContainer,
+		WwwPage,
+	},
+	inject: ['apollo', 'cookieStore'],
+	apollo: {
+		preFetch: true,
+		query: userTeamMembership,
+		preFetchVariables({ route }) {
+			return {
+				teamPublicId: route.query.teamPublicId,
+			};
+		},
+		variables() {
+			return {
+				teamPublicId: this.teamPublicId,
+			};
+		},
+		result({ data }) {
+			this.userMembershipStatus = data?.community?.team?.userProperties?.membershipStatus ?? 'none';
+			this.teamName = data?.community?.team?.name ?? '';
+			this.teamId = data?.community?.team?.id ?? 0;
+		}
+	},
+	data() {
+		return {
+			userMembershipStatus: 'none',
+			isLoading: true,
+			teamName: '',
+		};
+	},
+	computed: {
+		isPending() {
+			return this.userMembershipStatus === 'requestPending';
+		},
+		isMember() {
+			return this.userMembershipStatus === 'member' || this.userMembershipStatus === 'captain';
+		},
+		isNotMember() {
+			return this.userMembershipStatus === 'none'
+			|| this.userMembershipStatus === 'recruited'
+			|| this.userMembershipStatus === 'recruitedByPromo';
+		},
+	},
+	methods: {
+		memberRedirect() {
+			if (!this.$isServer) {
+				window.location = this.doneUrl ? this.doneUrl : `/team/${this.teamPublicId}`;
+			}
+		},
+		async handleJoinTeam() {
+			try {
+				await this.apollo.mutate({
+					mutation: joinTeam,
+					variables: {
+						team_id: this.teamId,
+						team_recruitment_id: this.teamRecruitmentId,
+						promo_id: this.promoId
+					}
+				});
+				// get updated team membership status to determine if joined or pending
+				const { data: userMembershipData } = await this.apollo.query({
+					query: userTeamMembership,
+					variables: {
+						teamPublicId: this.teamPublicId,
+					},
+					fetchPolicy: 'network-only'
+				});
+				// update the users membership status
+				this.userMembershipStatus = userMembershipData?.community?.team?.userProperties?.membershipStatus;
+				if (this.isMember) {
+					this.$showTipMsg('You have joined the team!');
+					this.memberRedirect();
+				}
+				if (this.isPending) {
+					this.isLoading = false;
+					this.$showTipMsg('Your request to join the team was successful');
+				}
+			} catch (err) {
+				console.error(err);
+				this.isLoading = false;
+				this.$showTipMsg('There was a problem joining the team', 'error');
+			}
+		}
+	},
+	created() {
+		if (this.isPending) {
+			// is pending, do nothing
+			this.isLoading = false;
+		} else if (this.isNotMember) {
+			// handle joining team here
+			this.handleJoinTeam();
+		} else {
+			// is member, redirect to doneUrl or team page
+			this.memberRedirect();
+		}
+	}
+};
+</script>

src/router/routes.js

@@ -186,7 +186,7 @@ module.exports = [
 		component: () => import('@/pages/LoginAndRegister/JoinTeam'),
 		meta: {
 			excludeFromStaticSitemap: true,
-		}
+		},
 	},
 	{
 		path: '/legal',
@@ -502,6 +502,20 @@ module.exports = [
 			lendAmount: Number(route.params.lendAmount)
 		}),
 	},
+	{
+		path: '/process-join-team',
+		component: () => import('@/pages/ProcessJoinTeam'),
+		meta: {
+			excludeFromStaticSitemap: true,
+			authenticationRequired: true,
+		},
+		props: route => ({
+			doneUrl: route.query.doneUrl,
+			teamRecruitmentId: Number(route.query.teamRecruitmentId),
+			teamPublicId: route.query.teamPublicId,
+			promoId: Number(route.query.promoId),
+		})
+	},
 	{
 		path: '/register/social',
 		component: () => import('@/pages/LoginAndRegister/RegisterSocial'),