feat(frontend): adds vip qr code item to the menu

src/frontend/src/lib/components/core/Menu.svelte

@@ -1,12 +1,15 @@
 <script lang="ts">
 	import { IconUser, Popover } from '@dfinity/gix-components';
+	import { nonNullish } from '@dfinity/utils';
 	import type { NavigationTarget } from '@sveltejs/kit';
+	import { onMount } from 'svelte';
 	import { afterNavigate, goto } from '$app/navigation';
 	import { page } from '$app/stores';
 	import AboutWhyOisy from '$lib/components/about/AboutWhyOisy.svelte';
 	import MenuAddresses from '$lib/components/core/MenuAddresses.svelte';
 	import SignOut from '$lib/components/core/SignOut.svelte';
 	import IconGitHub from '$lib/components/icons/IconGitHub.svelte';
+	import IconVipQr from '$lib/components/icons/IconVipQr.svelte';
 	import IconWallet from '$lib/components/icons/IconWallet.svelte';
 	import IconActivity from '$lib/components/icons/iconly/IconActivity.svelte';
 	import IconlySettings from '$lib/components/icons/iconly/IconlySettings.svelte';
@@ -24,9 +27,12 @@
 		NAVIGATION_MENU,
 		NAVIGATION_ITEM_ACTIVITY,
 		NAVIGATION_ITEM_EXPLORER,
-		NAVIGATION_ITEM_SETTINGS
+		NAVIGATION_ITEM_SETTINGS,
+		NAVIGATION_MENU_VIP_BUTTON
 	} from '$lib/constants/test-ids.constants';
+	import { authIdentity } from '$lib/derived/auth.derived';
 	import { networkId } from '$lib/derived/network.derived';
+	import { isVipUser } from '$lib/services/reward-code.services';
 	import { i18n } from '$lib/stores/i18n.store';
 	import {
 		isRouteActivity,
@@ -42,6 +48,17 @@
 
 	let fromRoute: NavigationTarget | null;
 
+	let isVip = false;
+	onMount(async () => {
+		if (nonNullish($authIdentity)) {
+			isVip = (
+				await isVipUser({
+					identity: $authIdentity
+				})
+			).success;
+		}
+	});
+
 	afterNavigate(({ from }) => {
 		fromRoute = from;
 	});
@@ -140,6 +157,18 @@
 			<Hr />
 		{/if}
 
+		{#if isVip}
+			<!-- TODO: implements on:click function -->
+			<ButtonMenu
+				ariaLabel={$i18n.navigation.alt.vip_qr_code}
+				testId={NAVIGATION_MENU_VIP_BUTTON}
+				on:click={() => {}}
+			>
+				<IconVipQr size="20" />
+				{$i18n.navigation.text.vip_qr_code}
+			</ButtonMenu>
+		{/if}
+
 		<AboutWhyOisy asMenuItem on:icOpenAboutModal={hidePopover} />
 
 		<ChangelogLink />

src/frontend/src/lib/components/icons/IconVipQr.svelte

@@ -0,0 +1,79 @@
+<!-- source: DFINITY foundation -->
+<script lang="ts">
+	export let size = '24';
+</script>
+
+<svg width={size} height={size} viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+		d="M1.83325 3.66683C1.83325 2.65431 2.65406 1.8335 3.66659 1.8335H6.41658C7.42911 1.8335 8.24992 2.65431 8.24992 3.66683V6.41683C8.24992 7.42935 7.42911 8.25016 6.41658 8.25016H3.66659C2.65406 8.25016 1.83325 7.42935 1.83325 6.41683V3.66683ZM6.41658 3.66683H3.66659V6.41683H6.41658V3.66683Z"
+		fill="black"
+	/>
+	<path
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+		d="M13.75 3.66683C13.75 2.65431 14.5708 1.8335 15.5833 1.8335H18.3333C19.3459 1.8335 20.1667 2.65431 20.1667 3.66683V6.41683C20.1667 7.42935 19.3459 8.25016 18.3333 8.25016H15.5833C14.5708 8.25016 13.75 7.42935 13.75 6.41683V3.66683ZM18.3333 3.66683H15.5833V6.41683H18.3333V3.66683Z"
+		fill="black"
+	/>
+	<path
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+		d="M1.83325 15.5833C1.83325 14.5708 2.65406 13.75 3.66659 13.75H6.41658C7.42911 13.75 8.24992 14.5708 8.24992 15.5833V18.3333C8.24992 19.3459 7.42911 20.1667 6.41658 20.1667H3.66659C2.65406 20.1667 1.83325 19.3459 1.83325 18.3333V15.5833ZM6.41658 15.5833H3.66659V18.3333H6.41658V15.5833Z"
+		fill="black"
+	/>
+	<path
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+		d="M14.5555 14.5555C15.0712 14.0397 15.7707 13.75 16.5 13.75H19.25C19.7563 13.75 20.1667 14.1604 20.1667 14.6667C20.1667 15.1729 19.7563 15.5833 19.25 15.5833H16.5C16.2569 15.5833 16.0237 15.6799 15.8518 15.8518C15.6799 16.0237 15.5833 16.2569 15.5833 16.5V19.25C15.5833 19.7563 15.1729 20.1667 14.6667 20.1667C14.1604 20.1667 13.75 19.7563 13.75 19.25V16.5C13.75 15.7707 14.0397 15.0712 14.5555 14.5555Z"
+		fill="black"
+	/>
+	<path
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+		d="M19.2499 18.3335C19.7562 18.3335 20.1666 18.7439 20.1666 19.2502V19.2593C20.1666 19.7656 19.7562 20.176 19.2499 20.176C18.7437 20.176 18.3333 19.7656 18.3333 19.2593V19.2502C18.3333 18.7439 18.7437 18.3335 19.2499 18.3335Z"
+		fill="black"
+	/>
+	<path
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+		d="M11 5.5C11.5063 5.5 11.9167 5.91041 11.9167 6.41667V9.16667C11.9167 9.89601 11.6269 10.5955 11.1112 11.1112C10.5955 11.6269 9.89601 11.9167 9.16667 11.9167H6.41667C5.91041 11.9167 5.5 11.5063 5.5 11C5.5 10.4937 5.91041 10.0833 6.41667 10.0833H9.16667C9.40978 10.0833 9.64294 9.98676 9.81485 9.81485C9.98676 9.64294 10.0833 9.40978 10.0833 9.16667V6.41667C10.0833 5.91041 10.4937 5.5 11 5.5Z"
+		fill="black"
+	/>
+	<path
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+		d="M1.83325 11.0002C1.83325 10.4939 2.24366 10.0835 2.74992 10.0835H2.75909C3.26535 10.0835 3.67575 10.4939 3.67575 11.0002C3.67575 11.5064 3.26535 11.9168 2.75909 11.9168H2.74992C2.24366 11.9168 1.83325 11.5064 1.83325 11.0002Z"
+		fill="black"
+	/>
+	<path
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+		d="M10.0833 2.75016C10.0833 2.2439 10.4937 1.8335 10.9999 1.8335H11.0091C11.5153 1.8335 11.9258 2.2439 11.9258 2.75016C11.9258 3.25642 11.5153 3.66683 11.0091 3.66683H10.9999C10.4937 3.66683 10.0833 3.25642 10.0833 2.75016Z"
+		fill="black"
+	/>
+	<path
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+		d="M10.9999 13.75C11.5062 13.75 11.9166 14.1604 11.9166 14.6667V14.6758C11.9166 15.1821 11.5062 15.5925 10.9999 15.5925C10.4937 15.5925 10.0833 15.1821 10.0833 14.6758V14.6667C10.0833 14.1604 10.4937 13.75 10.9999 13.75Z"
+		fill="black"
+	/>
+	<path
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+		d="M13.75 11.0002C13.75 10.4939 14.1604 10.0835 14.6667 10.0835H15.5833C16.0896 10.0835 16.5 10.4939 16.5 11.0002C16.5 11.5064 16.0896 11.9168 15.5833 11.9168H14.6667C14.1604 11.9168 13.75 11.5064 13.75 11.0002Z"
+		fill="black"
+	/>
+	<path
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+		d="M19.2499 10.0835C19.7562 10.0835 20.1666 10.4939 20.1666 11.0002V11.0093C20.1666 11.5156 19.7562 11.926 19.2499 11.926C18.7437 11.926 18.3333 11.5156 18.3333 11.0093V11.0002C18.3333 10.4939 18.7437 10.0835 19.2499 10.0835Z"
+		fill="black"
+	/>
+	<path
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+		d="M10.9999 17.4165C11.5062 17.4165 11.9166 17.8269 11.9166 18.3332V19.2498C11.9166 19.7561 11.5062 20.1665 10.9999 20.1665C10.4937 20.1665 10.0833 19.7561 10.0833 19.2498V18.3332C10.0833 17.8269 10.4937 17.4165 10.9999 17.4165Z"
+		fill="black"
+	/>
+</svg>

src/frontend/src/lib/constants/test-ids.constants.ts

@@ -1,5 +1,6 @@
 export const NAVIGATION_MENU_BUTTON = 'navigation-menu-button';
 export const NAVIGATION_MENU = 'navigation-menu';
+export const NAVIGATION_MENU_VIP_BUTTON = 'navigation-menu-vip-button';
 
 export const LOGOUT_BUTTON = 'logout-button';
 export const LOGIN_BUTTON = 'login-button';

src/frontend/src/lib/i18n/en.json

@@ -41,7 +41,8 @@
 			"source_code": "Source code",
 			"changelog": "Changelog",
 			"submit_ticket": "Submit a ticket",
-			"confirm_navigate": "Are you sure you want to navigate away?"
+			"confirm_navigate": "Are you sure you want to navigate away?",
+			"vip_qr_code": "VIP QR codes"
 		},
 		"alt": {
 			"tokens": "Go to the assets view",
@@ -52,7 +53,8 @@
 			"menu": "Your wallet address, settings, sign-out and external links",
 			"changelog": "Open the changelog of $oisy_name on GitHub to review the latest updates",
 			"submit_ticket": "Report an issue or request a feature on GitHub",
-			"open_twitter": "Open the DFINITY X/Twitter feed"
+			"open_twitter": "Open the DFINITY X/Twitter feed",
+			"vip_qr_code": "Generate an invitation link"
 		}
 	},
 	"auth": {

src/frontend/src/lib/types/i18n.d.ts

@@ -38,6 +38,7 @@ interface I18nNavigation {
 		changelog: string;
 		submit_ticket: string;
 		confirm_navigate: string;
+		vip_qr_code: string;
 	};
 	alt: {
 		tokens: string;
@@ -49,6 +50,7 @@ interface I18nNavigation {
 		changelog: string;
 		submit_ticket: string;
 		open_twitter: string;
+		vip_qr_code: string;
 	};
 }
 

src/frontend/src/tests/lib/components/core/Menu.spec.ts

@@ -0,0 +1,80 @@
+import type { UserData } from '$declarations/rewards/rewards.did';
+import * as rewardApi from '$lib/api/reward.api';
+import Menu from '$lib/components/core/Menu.svelte';
+import {
+	NAVIGATION_MENU_BUTTON,
+	NAVIGATION_MENU_VIP_BUTTON
+} from '$lib/constants/test-ids.constants';
+import * as authStore from '$lib/derived/auth.derived';
+import { userProfileStore } from '$lib/stores/user-profile.store';
+import { mockIdentity } from '$tests/mocks/identity.mock';
+import type { Identity } from '@dfinity/agent';
+import { render, waitFor } from '@testing-library/svelte';
+import { beforeEach } from 'node:test';
+import { readable } from 'svelte/store';
+
+describe('Menu', () => {
+	const menuButtonSelector = `button[data-tid="${NAVIGATION_MENU_BUTTON}"]`;
+	const menuItemVipButtonSelector = `button[data-tid="${NAVIGATION_MENU_VIP_BUTTON}"]`;
+
+	beforeEach(() => {
+		userProfileStore.reset();
+	});
+
+	const mockAuthStore = (value: Identity | null = mockIdentity) =>
+		vi.spyOn(authStore, 'authIdentity', 'get').mockImplementation(() => readable(value));
+
+	it('renders the vip menu item', async () => {
+		const mockedUserData: UserData = {
+			is_vip: [true],
+			airdrops: [],
+			sprinkles: []
+		};
+		vi.spyOn(rewardApi, 'getUserInfo').mockResolvedValue(mockedUserData);
+		mockAuthStore();
+
+		const { container } = render(Menu);
+		const menuButton: HTMLButtonElement | null = container.querySelector(menuButtonSelector);
+
+		expect(menuButton).toBeInTheDocument();
+
+		menuButton?.click();
+
+		await waitFor(() => {
+			const menuItemVipButton: HTMLButtonElement | null =
+				container.querySelector(menuItemVipButtonSelector);
+			if (menuItemVipButton == null) {
+				throw new Error('menu item not yet loaded');
+			}
+
+			expect(menuItemVipButton).toBeInTheDocument();
+		});
+	});
+
+	it('does not render the vip menu item', async () => {
+		const mockedUserData: UserData = {
+			is_vip: [false],
+			airdrops: [],
+			sprinkles: []
+		};
+		vi.spyOn(rewardApi, 'getUserInfo').mockResolvedValue(mockedUserData);
+		mockAuthStore();
+
+		const { container } = render(Menu);
+		const menuButton: HTMLButtonElement | null = container.querySelector(menuButtonSelector);
+
+		expect(menuButton).toBeInTheDocument();
+
+		menuButton?.click();
+
+		await waitFor(() => {
+			const menuItemVipButton: HTMLButtonElement | null =
+				container.querySelector(menuItemVipButtonSelector);
+			if (menuItemVipButton == null) {
+				expect(menuItemVipButton).toBeNull();
+			} else {
+				throw new Error('menu item loaded');
+			}
+		});
+	});
+});