feat: add teams to navbar on desktop

kiva · May 8, 2024 · fd85813 · fd85813
1 parent 903d3bd
commit fd85813
Show file tree

Hide file tree

Showing 5 changed files with 418 additions and 0 deletions.
diff --git a/.storybook/stories/TheHeader.stories.js b/.storybook/stories/TheHeader.stories.js
@@ -23,6 +23,7 @@ const loggedIn = {
 					"https://www-dev-kiva-org.freetls.fastly.net/img/s140/726677.jpg",
 			},
 		},
+		team: null,
 		isBorrower: false,
 		mostRecentBorrowedLoan: null,
 		trustee: null,
@@ -66,6 +67,84 @@ const loggedInLargeCart = {
 	}
 };
 
+const loggedInWithOneTeam = {
+	my: {
+		...loggedIn.my,
+		teams: {
+			totalCount: 1,
+			values: [
+				{
+					id: 1,
+					team: {
+						id: 1,
+						name: 'Team 1',
+						teamPublicId: 'team1',
+					}
+				},
+			],
+		},
+	},
+};
+
+const loggedInWithMultipleTeams = {
+	my: {
+		...loggedIn.my,
+		teams: {
+			totalCount: 6,
+			values: [
+				{
+					id: 1,
+					team: {
+						id: 1,
+						name: '(A+) Atheists, Agnostics, Skeptics, Freethinkers, Secular Humanists and the Non-Religious',
+						teamPublicId: 'aplus',
+					}
+				},
+				{
+					id: 2,
+					team: {
+						id: 2,
+						name: 'Team 2',
+						teamPublicId: 'team2',
+					}
+				},
+				{
+					id: 3,
+					team: {
+						id: 3,
+						name: 'Team 3',
+						teamPublicId: 'team3',
+					}
+				},
+				{
+					id: 4,
+					team: {
+						id: 4,
+						name: 'Team 4',
+						teamPublicId: 'team4',
+					}
+				},
+				{
+					id: 5,
+					team: {
+						id: 5,
+						name: 'Team 5',
+						teamPublicId: 'team5',
+					}
+				},
+				{
+					id: 6,
+					team: {
+						id: 6,
+						name: 'Team 6',
+						teamPublicId: 'team6',
+					}
+				},
+			],
+		},
+	},
+};
+
 const provideMockedApollo = (mockedResult) => {
 	return {
 		readQuery() {
@@ -223,4 +302,32 @@ Minimal.args = {
 	minimal: true,
 };
 
+export const LoggedInWithOneTeam = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: {
+		TheHeader,
+	},
+	mixins: [cookieStoreStoryMixin(), kvAuth0StoryMixin],
+	provide: {
+		apollo: provideMockedApollo(loggedInWithOneTeam),
+	},
+	template: `
+		<the-header />
+	`,
+});
+
+export const LoggedInWithMultipleTeams = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: {
+		TheHeader,
+	},
+	mixins: [cookieStoreStoryMixin(), kvAuth0StoryMixin],
+	provide: {
+		apollo: provideMockedApollo(loggedInWithMultipleTeams),
+	},
+	template: `
+		<the-header />
+	`,
+});
+
 // TODO: trustee
diff --git a/src/components/WwwFrame/Header/TeamsMenu.vue b/src/components/WwwFrame/Header/TeamsMenu.vue
@@ -0,0 +1,119 @@
+<template>
+	<div class="tw-group">
+		<router-link
+			:id="teamMenuId"
+			to="/teams"
+			data-testid="header-teams"
+			class="header__button tw-inline-flex"
+			v-kv-track-event="['TopNav','click-Teams']"
+		>
+			<span class="tw-flex">
+				Teams
+				<kv-material-icon
+					v-if="totalTeams"
+					class="tw-w-3 tw-h-3 tw-transition-transform tw-duration-300 group-hover:tw-rotate-180"
+					:icon="mdiChevronDown"
+				/>
+			</span>
+		</router-link>
+		<kv-dropdown
+			:controller="teamMenuId"
+			class="dropdown-list"
+			data-testid="header-teams-dropdown-list"
+		>
+			<ul v-if="totalTeams === 1">
+				<li>
+					<a
+						v-kv-track-event="['TopNav','click-Teams-My Team\'s activity']"
+						:href="`/team/${teamsData[0].team.teamPublicId}`"
+					>
+						My Team's activity
+					</a>
+				</li>
+				<li>
+					<a
+						v-kv-track-event="['TopNav','click-Teams-My Team\'s impact']"
+						:href="`/team/${teamsData[0].team.teamPublicId}/impact`"
+					>
+						My Team's impact
+					</a>
+				</li>
+				<li>
+					<a v-kv-track-event="['TopNav','click-Teams-Join another team']" href="/teams">
+						Join another team
+					</a>
+				</li>
+			</ul>
+			<ul v-else style="width: 9rem;">
+				<li v-for="{ team } in teamsData" :key="team.id">
+					<a
+						v-kv-track-event="['TopNav',`click-Teams-${team.name}`]"
+						:href="`/team/${team.teamPublicId}`"
+						class="tw-whitespace-nowrap tw-text-ellipsis tw-overflow-hidden"
+					>
+						{{ team.name }}
+					</a>
+				</li>
+				<li v-if="totalTeams > teamsData.length">
+					<a v-kv-track-event="['TopNav','click-Teams-Join another team']" href="/teams/my-teams">
+						View all my teams
+					</a>
+				</li>
+			</ul>
+		</kv-dropdown>
+	</div>
+</template>
+
+<script>
+import KvDropdown from '@/components/Kv/KvDropdown';
+import {
+	mdiChevronDown,
+} from '@mdi/js';
+import KvMaterialIcon from '~/@kiva/kv-components/vue/KvMaterialIcon';
+
+export default {
+	name: 'TeamsMenu',
+	components: {
+		KvDropdown,
+		KvMaterialIcon
+	},
+	data() {
+		return {
+			mdiChevronDown,
+			teamMenuId: 'teams-header-dropdown',
+		};
+	},
+	props: {
+		teams: {
+			type: Object,
+			default: () => ({}),
+		},
+	},
+	computed: {
+		teamsData() {
+			return this.teams?.values?.slice(0, 5) ?? [];
+		},
+		totalTeams() {
+			return this.teams?.totalCount ?? 0;
+		},
+	},
+};
+</script>
+
+<style lang="postcss" scoped>
+
+.header__button {
+	@apply tw-items-center tw-flex-shrink-0;
+	@apply tw-font-medium tw-text-primary hover:tw-text-action-highlight hover:tw-no-underline focus:tw-no-underline;
+	@apply tw-h-8 md:tw-h-9 tw-whitespace-nowrap tw-flex-shrink-0;
+}
+
+.dropdown-list {
+	@apply tw-px-2 tw-rounded-b;
+}
+
+.dropdown-list a {
+	@apply tw-font-medium tw-text-primary hover:tw-text-action-highlight tw-block tw-w-full tw-py-1;
+}
+
+</style>
diff --git a/src/components/WwwFrame/TheHeader.vue b/src/components/WwwFrame/TheHeader.vue
@@ -217,6 +217,13 @@
 								Borrow
 							</router-link>
 
+							<!-- Teams -->
+							<teams-menu
+								v-if="!isVisitor"
+								class="tw-hidden lg:tw-block"
+								:teams="teams"
+							/>
+
 							<!-- About -->
 							<div class="tw-group" :class="{ 'tw-hidden md:tw-block': !isVisitor }">
 								<router-link
@@ -570,6 +577,7 @@ import {
 import CampaignLogoGroup from '@/components/CorporateCampaign/CampaignLogoGroup';
 import _throttle from 'lodash/throttle';
 import numeral from 'numeral';
+import TeamsMenu from '@/components/WwwFrame/Header/TeamsMenu';
 import KvButton from '~/@kiva/kv-components/vue/KvButton';
 import KvMaterialIcon from '~/@kiva/kv-components/vue/KvMaterialIcon';
 import KvPageContainer from '~/@kiva/kv-components/vue/KvPageContainer';
@@ -603,6 +611,7 @@ export default {
 		SearchBar,
 		KvButton,
 		TheLendMenu: () => import('@/components/WwwFrame/LendMenu/TheLendMenu'),
+		TeamsMenu,
 	},
 	inject: ['apollo', 'cookieStore', 'kvAuth0'],
 	data() {
@@ -633,6 +642,7 @@ export default {
 			hasEverLoggedIn: false,
 			isMobile: false,
 			basketTotal: 0,
+			teams: null,
 		};
 	},
 	props: {
@@ -749,6 +759,7 @@ export default {
 			this.basketTotal = data.shop?.basket?.items?.values?.reduce((sum, item) => {
 				return sum + +(item?.price ?? 0);
 			}, 0) ?? 0;
+			this.teams = data?.my?.teams ?? {};
 		},
 		errorHandlers: {
 			'shop.invalidBasketId': ({ cookieStore, route }) => {

diff --git a/src/graphql/query/wwwHeader.graphql b/src/graphql/query/wwwHeader.graphql
@@ -54,5 +54,16 @@ query wwwHeader($basketId: String) {
 		trustee {
 			id
 		}
+		teams (limit: 5) {
+			totalCount
+			values {
+				id
+				team {
+					id
+					name
+					teamPublicId
+				}
+			}
+		}
 	}
 }