Merge pull request #316 from kiva/wwwHeader-borrower-trustee-states

feat: add borrower/trustee state and small fix in balance
kiva · Nov 20, 2023 · 6d5059a · 6d5059a
2 parents c98852b + 53b2230
commit 6d5059a
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 2 deletions.
diff --git a/@kiva/kv-components/vue/KvWwwHeader.vue b/@kiva/kv-components/vue/KvWwwHeader.vue
@@ -30,6 +30,7 @@
 			</transition>
 			<!-- logo -->
 			<a
+				v-kv-track-event="['TopNav', 'click-Logo']"
 				href="/"
 				class="
 					tw-px-1 tw-py-2
@@ -99,6 +100,9 @@
 							ref="menuComponentInstance"
 							:logged-in="loggedIn"
 							:login-url="loginUrl"
+							:balance="balance"
+							:is-borrower="isBorrower"
+							:is-trustee="isTrustee"
 							@load-lend-menu-data="emitLendMenuEvent"
 						/>
 					</div>
@@ -144,6 +148,18 @@ export default {
 			type: String,
 			default: '/ui-login',
 		},
+		balance: {
+			type: Number,
+			default: 0,
+		},
+		isBorrower: {
+			type: Boolean,
+			default: false,
+		},
+		isTrustee: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	emits: [
 		'load-lend-menu-data',

diff --git a/@kiva/kv-components/vue/KvWwwHeader/KvHeaderLinkBar.vue b/@kiva/kv-components/vue/KvWwwHeader/KvHeaderLinkBar.vue
@@ -21,6 +21,7 @@
 		<!-- lend -->
 		<a
 			ref="lendButton"
+			v-kv-track-event="['TopNav', 'click-Lend']"
 			href="/lend-by-category"
 			class="
 				tw-px-1.5 tw-py-1 tw-mx-1
@@ -88,6 +89,7 @@
 		<a
 			v-if="basketCount > 0"
 			ref="basketLink"
+			v-kv-track-event="['TopNav', 'click-Basket']"
 			href="/basket"
 			class="header-link tw-relative"
 			:class="{'tw-text-tertiary': !!openMenuItem}"
@@ -100,6 +102,7 @@
 		<!-- search icon -->
 		<button
 			ref="searchButton"
+			v-kv-track-event="['TopNav', 'click-Search-toggle']"
 			class="header-link"
 			:class="{
 				'tw-text-tertiary': !!openMenuItem
@@ -112,6 +115,7 @@
 		<a
 			v-if="!loggedIn"
 			ref="signInLink"
+			v-kv-track-event="['TopNav', 'click-Sign-in']"
 			:href="loginUrl"
 			class="header-link tw-hidden lg:tw-block"
 			:class="{'tw-text-tertiary': !!openMenuItem}"
@@ -121,6 +125,9 @@
 		<!-- 3-bar menu (sm) -->
 		<button
 			ref="menuButton"
+			v-kv-track-event="openMenuItem === KvHeaderMobileMenu
+				? ['TopNav', 'click-Hamburger-menu']
+				: null"
 			class="header-link tw-inline-flex lg:tw-hidden"
 			:class="{
 				'tw-text-tertiary': openMenuItem && openMenuItem !== KvHeaderMobileMenu

diff --git a/@kiva/kv-components/vue/KvWwwHeader/KvHeaderMobileMenu.vue b/@kiva/kv-components/vue/KvWwwHeader/KvHeaderMobileMenu.vue
@@ -2,27 +2,32 @@
 	<nav class="tw--mt-0.5 tw-pb-0.5 tw-flex tw-flex-col tw-items-end lg:tw-hidden tw-font-medium">
 		<kv-header-menu-link
 			v-if="!loggedIn"
+			v-kv-track-event="['TopNav', 'click-menu-Sign-in']"
 			:href="loginUrl"
 		>
 			Sign in
 		</kv-header-menu-link>
 		<kv-header-menu-link
+			v-kv-track-event="['TopNav', 'click-menu-Support-kiva']"
 			href="/donate/supportus"
 		>
 			Support Kiva
 		</kv-header-menu-link>
 		<kv-header-menu-link
 			v-if="!loggedIn"
+			v-kv-track-event="['TopNav', 'click-menu-Borrow']"
 			href="/borrow"
 		>
 			Borrow
 		</kv-header-menu-link>
 		<kv-header-menu-link
+			v-kv-track-event="['TopNav', 'click-menu-About-us']"
 			href="/about"
 		>
 			About us
 		</kv-header-menu-link>
 		<kv-header-menu-link
+			v-kv-track-event="['TopNav', 'click-menu-Partner-with-us']"
 			href="/about/partner-with-us"
 		>
 			Partner with us

diff --git a/@kiva/kv-components/vue/KvWwwHeader/KvHeaderMyKivaMenu.vue b/@kiva/kv-components/vue/KvWwwHeader/KvHeaderMyKivaMenu.vue
@@ -6,7 +6,7 @@
 		>
 			<span>Portfolio</span>
 			<span class="tw-text-secondary">|</span>
-			<span class="tw-text-eco-green-3">{{ balance }}</span>
+			<span class="tw-text-eco-green-3">{{ numeral(balance).format('$0') }}</span>
 		</kv-header-menu-link>
 		<kv-header-menu-link
 			href="/teams/my-teams"
@@ -23,6 +23,18 @@
 		>
 			Settings
 		</kv-header-menu-link>
+		<kv-header-menu-link
+			v-if="isBorrower"
+			href="/my/borrower"
+		>
+			Borrower Dashboard
+		</kv-header-menu-link>
+		<kv-header-menu-link
+			v-if="isTrustee"
+			href="/my/trustee"
+		>
+			Trustee Dashboard
+		</kv-header-menu-link>
 		<kv-header-menu-link
 			href="/ui-logout"
 		>
@@ -32,6 +44,7 @@
 </template>
 
 <script>
+import numeral from 'numeral';
 import KvHeaderMenuLink from './KvHeaderMenuLink.vue';
 
 export default {
@@ -43,6 +56,19 @@ export default {
 			type: Number,
 			default: 0,
 		},
+		isBorrower: {
+			type: Boolean,
+			default: false,
+		},
+		isTrustee: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	setup() {
+		return {
+			numeral,
+		};
 	},
 };
 </script>
diff --git a/@kiva/kv-components/vue/KvWwwHeader/KvHeaderSearchBar.vue b/@kiva/kv-components/vue/KvWwwHeader/KvHeaderSearchBar.vue
@@ -36,6 +36,7 @@
 		</div>
 		<!-- cancel search -->
 		<button
+			v-kv-track-event="['TopNav', 'click-cancel-search']"
 			class="tw-px-2.5 tw-transition-opacity"
 			:class="{
 				'tw-opacity-full tw-duration-300': searchExitVisible,

diff --git a/@kiva/kv-components/vue/stories/KvWwwHeader.stories.js b/@kiva/kv-components/vue/stories/KvWwwHeader.stories.js
@@ -23,6 +23,21 @@ export default {
 				type: 'text',
 			},
 		},
+		balance: {
+			control: {
+				type: 'number',
+			},
+		},
+		isTrustee: {
+			control: {
+				type: 'boolean',
+			},
+		},
+		isBorrower: {
+			control: {
+				type: 'boolean',
+			},
+		},
 	},
 };
 
@@ -32,7 +47,7 @@ const story = (args) => {
 		components: { KvWwwHeader, KvPageContainer },
 		template: `
 			<div class="tw-relative">
-				<kv-www-header :logged-in="loggedIn" :basket-count="basketCount" :login-url="loginUrl" />
+				<kv-www-header :logged-in="loggedIn" :basket-count="basketCount" :login-url="loginUrl" :balance="balance" :is-trustee="isTrustee" :is-borrower="isBorrower" />
 				<kv-page-container>
 					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam molestie tellus quis auctor luctus. Fusce consequat sit amet tortor sit amet euismod. Proin finibus blandit tortor scelerisque facilisis. Duis in euismod justo. Nam efficitur eu metus quis cursus. Duis a ligula nisi. Duis ligula eros, pharetra interdum malesuada vitae, feugiat quis ligula. Fusce non vestibulum elit, sed vehicula augue. Sed tellus dui, vestibulum in gravida eget, gravida a arcu. Duis sed sapien cursus velit bibendum auctor non a eros. Donec libero odio, fermentum faucibus justo vel, efficitur malesuada velit. Morbi odio ligula, congue id odio in, ornare bibendum turpis. Nunc consectetur imperdiet rutrum. Ut posuere turpis ac lacinia finibus. Proin velit arcu, ultrices vitae lacinia quis, tincidunt at justo.</p>
 					<p>Morbi volutpat eget enim eu tristique. Suspendisse potenti. Vivamus mollis purus magna, nec suscipit purus tempor id. Nulla porta ipsum sit amet sollicitudin accumsan. Cras pulvinar fringilla ullamcorper. Praesent sit amet sapien metus. Morbi volutpat tortor sed eros mattis ultricies. Duis convallis finibus lacus, a tempus felis pretium in. Ut eu est sem. Ut auctor ullamcorper dignissim. Praesent quis ullamcorper dui, ac sodales mi. Nullam volutpat augue vulputate congue suscipit. Praesent consectetur sem libero, id pharetra urna porttitor nec. Praesent vitae orci neque. Nam a diam orci.</p>