feat: Main page flow

infrastructure/eid-wallet/src/lib/fragments/AppNav/AppNav.svelte

@@ -6,16 +6,22 @@ import type { HTMLAttributes } from "svelte/elements";
 interface IHeroProps extends HTMLAttributes<HTMLElement> {
 	title?: string;
 	titleClasses?: string;
+	iconColor?: string;
 }
-const { title, titleClasses, ...restProps }: IHeroProps = $props();
+const {
+	title,
+	titleClasses,
+	iconColor = "black",
+	...restProps
+}: IHeroProps = $props();
 const baseClasses = "w-full relative flex justify-center h-14 items-center";
 </script>
 
 <nav {...restProps} class={cn(baseClasses, restProps.class)}>
     <Button.Icon 
         icon={ArrowLeft01Icon}
         iconSize="md"
-        iconColor={"black"}
+        {iconColor}
         class="absolute left-2"
         onclick={() => window.history.back()}
     />

infrastructure/eid-wallet/src/lib/fragments/IdentityCard/IdentityCard.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 import * as Button from "$lib/ui/Button";
+import { cn } from "$lib/utils";
 import {
 	CheckmarkBadge02Icon,
 	Upload03Icon,
@@ -39,9 +40,11 @@ $effect(() => {
 	state.progressWidth =
 		usedStorage > 0 ? `${(usedStorage / totalStorage) * 100}%` : "0%";
 });
+
+const baseClasses = `relative ${variant === "eName" ? "bg-black-900" : variant === "ePassport" ? "bg-primary" : "bg-gray"}  rounded-3xl w-full min-h-[150px] text-white overflow-hidden`;
 </script>
 
-<div {...restProps} class="relative {variant === 'eName' ? "bg-black-900" : variant === 'ePassport' ? "bg-primary" : "bg-gray"}  rounded-3xl w-full min-h-[150px] text-white overflow-hidden">
+<div {...restProps} class={cn(baseClasses, restProps.class)}>
     <div class="w-full h-full pointer-events-none flex gap-13 justify-end absolute right-15 bottom-20">
         <div class="w-10 {variant === 'eVault' ? "bg-white/40" : "bg-white/10"} h-[300%] rotate-40"></div>
         <div class="w-10 {variant === 'eVault' ? "bg-white/40" : "bg-white/10"} h-[300%] rotate-40"></div>
@@ -55,7 +58,7 @@ $effect(() => {
                     <Button.Icon icon={ViewIcon} iconColor={"white"} strokeWidth={2} onclick={viewBtn} />
                     </div>
             {:else if variant === 'ePassport'}
-                <p class="bg-white text-black flex items-center rounded-4xl px-5 py-2 text-xs font-semibold">HIGH SECURITY</p>
+                <p class="bg-white text-black flex items-center leading-0 justify-center rounded-full h-7 px-5 text-xs font-medium">HIGH SECURITY</p>
                 <Button.Icon icon={ViewIcon} iconColor={"white"} strokeWidth={2} onclick={viewBtn} />
 
             {:else if variant === 'eVault'}
@@ -64,9 +67,9 @@ $effect(() => {
         </div>
         <div>
             {#if variant === "eName"}        
-                <p class="text-gray font-light">Your eName</p>
+                <p class="text-gray font-normal">Your eName</p>
                 <div class="flex items-center justify-between w-full">
-                    <p class="text-white w-[60%] font-medium">@{userId}</p>
+                    <p class="text-white w-full font-medium">@{userId}</p>
                 </div>
             {:else if variant === "ePassport"}
                 <div class="flex gap-2 flex-col">
@@ -92,7 +95,4 @@ $effect(() => {
             {/if}
         </div>
     </div>
-</div>
-
-
-
+</div>

infrastructure/eid-wallet/src/lib/ui/Button/ButtonAction.svelte

@@ -5,7 +5,7 @@ import type { HTMLButtonAttributes } from "svelte/elements";
 interface IButtonProps extends HTMLButtonAttributes {
 	variant?: "solid" | "soft" | "danger" | "danger-soft" | "white";
 	isLoading?: boolean;
-	callback?: () => Promise<void>;
+	callback?: () => Promise<void> | void;
 	blockingClick?: boolean;
 	type?: "button" | "submit" | "reset";
 	size?: "sm" | "md";
@@ -15,6 +15,7 @@ const {
 	variant = "solid",
 	isLoading,
 	callback,
+	onclick,
 	blockingClick,
 	type = "button",
 	size = "md",

infrastructure/eid-wallet/src/lib/ui/Button/ButtonIcon.svelte

@@ -6,7 +6,7 @@ import type { HTMLButtonAttributes } from "svelte/elements";
 interface IButtonProps extends HTMLButtonAttributes {
 	icon: IconSvgElement;
 	isLoading?: boolean;
-	callback?: () => Promise<void>;
+	callback?: () => Promise<void> | void;
 	onclick?: () => void;
 	blockingClick?: boolean;
 	type?: "button" | "submit" | "reset";

infrastructure/eid-wallet/src/lib/ui/Drawer/Drawer.svelte

@@ -53,17 +53,6 @@ $effect(() => {
 
 	return () => pane.destroy();
 });
-
-$effect(() => {
-	if (isPaneOpen) {
-		pane.present({ animate: true });
-	} else {
-		pane.destroy({ animate: true });
-	}
-	drawerElem.addEventListener("click_outside", () => {
-		handleClickOutside();
-	});
-});
 </script>
 
 <div
@@ -74,7 +63,7 @@ $effect(() => {
     })}
     onswipe={() => handleSwipe?.(isPaneOpen)}
     bind:this={drawerElem}
-    use:clickOutside
+    use:clickOutside={handleClickOutside}
     class={cn(restProps.class)}
 >
     <div class="px-6">

infrastructure/eid-wallet/src/lib/utils/clickOutside.ts

@@ -1,12 +1,13 @@
 /** Dispatch event on click outside of node */
-export const clickOutside = (node: HTMLElement) => {
+export const clickOutside = (node: HTMLElement, callback: () => void) => {
 	const handleClick = (event: Event) => {
-		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-		// @ts-ignore
-		if (node && !node.contains(event.target) && !event.defaultPrevented) {
-			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-			// @ts-ignore
-			node.dispatchEvent(new CustomEvent("click_outside", node));
+		if (
+			node &&
+			!node.contains(event.target as Node) &&
+			!event.defaultPrevented
+		) {
+			callback(); // Call the provided callback
+			node.dispatchEvent(new CustomEvent("click_outside"));
 		}
 	};
 

infrastructure/eid-wallet/src/routes/(app)/+layout.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+import { page } from "$app/state";
+import type { Snippet } from "svelte";
+import type { LayoutData } from "./$types";
+
+let { data, children }: { data: LayoutData; children: Snippet } = $props();
+
+let currentRoute = $derived(page.url.pathname.split("/").pop() || "home");
+</script>
+
+<!-- Dev only: remove this when deploying to production -->
+{#if currentRoute === "scan-qr"}
+<div class="fixed -z-10 bg-black w-screen h-screen top-0">
+    <img src="/images/dummyScan.png" class="opacity-40 w-screen h-screen object-cover" alt="dummy scan">
+</div>
+{/if}
+
+<div class="p-6 mb-16">
+    {@render children()}
+</div>

infrastructure/eid-wallet/src/routes/(app)/+page.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">
+import { goto } from "$app/navigation";
+import { Hero, IdentityCard } from "$lib/fragments";
+import { Drawer } from "$lib/ui";
+import * as Button from "$lib/ui/Button";
+import { QrCodeIcon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/svelte";
+import type { Snippet } from "svelte";
+
+const dummyData = {
+	Name: "John Doe",
+	"Date of birth": "01 - 01 - 1990",
+	"ID submitted": "American Passport",
+	"Passport number": "1234567-US",
+};
+
+let shareQRdrawerOpen = $state(false);
+
+function shareQR() {
+	alert("QR Code shared!");
+	shareQRdrawerOpen = false;
+}
+</script>
+
+
+<Hero
+    title="Good morning!"
+    subtitle="Don't forget to drink water."
+    showSettings
+/>
+
+{#snippet Section(title: string, children: Snippet)}
+    <section class="mt-8">
+    <h4 class="mb-2">{title}</h4>
+        {@render children()}
+    </section>
+{/snippet}
+
+{#snippet eName()}
+    <IdentityCard
+    variant="eName"
+    userId="caa0f630-2413-5aceaa2c-4628ce93e497"
+    viewBtn={() => alert("View button clicked!")}
+    shareBtn={() => shareQRdrawerOpen = true}
+    />
+{/snippet}
+{#snippet ePassport()}
+    <IdentityCard
+    variant="ePassport"
+    viewBtn={() => goto("/ePassport")}
+    userData={dummyData}
+    />
+{/snippet}
+{#snippet eVault()}
+    <IdentityCard
+    variant="eVault"
+    usedStorage={15}
+    totalStorage={100}
+    />
+{/snippet}
+
+{@render Section("eName", eName)}
+{@render Section("ePassport", ePassport)}
+{@render Section("eVault", eVault)}
+
+<Drawer
+    title="Scan QR Code"
+    bind:isPaneOpen={shareQRdrawerOpen}
+    isCancelRequired={true}
+    class="flex flex-col gap-4 items-center justify-center"
+>
+    <div class="flex justify-center relative items-center overflow-hidden h-full bg-gray rounded-3xl p-8">
+        <div class="bg-white h-[72px] w-[1000px] -rotate-45 absolute top-4"></div>
+        <div class="bg-white h-[72px] w-[1000px] -rotate-45 absolute bottom-4"></div>
+        <img class="z-10" src="/images/dummyQR.png" alt="QR Code" />
+    </div>
+
+    <h4 class="text-center">Share your eName</h4>
+    <p class="text-black-700 text-center">Anyone scanning this can see your eName</p>
+    <div class="flex justify-center items-center mt-4">
+        <Button.Action
+            variant="solid"
+            callback={shareQR}
+            class="w-full"
+        >
+            Share
+        </Button.Action>
+    </div>
+</Drawer>
+
+<Button.Nav href="/scan-qr">
+    <Button.Action
+        variant="solid"
+        onclick={() => alert("Action button clicked!")}
+        class="mx-auto text-nowrap flex gap-8 fixed bottom-5 left-1/2 -translate-x-1/2 z-10"
+    >
+        <HugeiconsIcon
+            size={32}
+            strokeWidth={2}
+            className="mr-2"
+            icon={QrCodeIcon}
+        />
+        Scan to Login
+    </Button.Action>
+</Button.Nav>

infrastructure/eid-wallet/src/routes/(app)/ePassport/+page.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+import { AppNav, IdentityCard } from "$lib/fragments";
+import * as Button from "$lib/ui/Button";
+import { Share05Icon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/svelte";
+
+const dummyData = {
+	Name: "John Doe",
+	"Date of birth": "01-01-1990",
+	"ID submitted": "American Passport",
+	"Passport number": "1234567-US",
+};
+
+const secondDummyData = {
+	"Birth Name": "John Doe",
+	"Place of birth": "New York, USA",
+	Nationality: "American",
+	"ID submitted": "American Passport",
+	"Expiry date": "19-12-2027",
+};
+
+function shareEPassport() {
+	alert("EPassport Code shared!");
+}
+</script>
+
+<AppNav title="ePassport" class="mb-8" />
+
+<div>
+    <IdentityCard
+        variant="ePassport"
+        userData={dummyData}
+        class="shadow-lg"
+    />
+    <div class="p-6 pt-12 bg-gray w-full rounded-2xl -mt-8 flex flex-col gap-2">
+        {#each Object.entries(secondDummyData) as [fieldName, value] }    
+            <div class="flex justify-between">
+                <p class="text-black-700 font-normal">{fieldName}</p>
+                <p class="text-black-500 font-medium">{value}</p>
+            </div>
+        {/each}
+    </div>
+</div>
+
+<Button.Action
+    variant="solid"
+    callback={shareEPassport}
+    class="mx-auto text-nowrap flex gap-8 fixed bottom-5 left-1/2 -translate-x-1/2 z-10"
+>
+    <HugeiconsIcon
+        size={32}
+        strokeWidth={2}
+        className="mr-2"
+        icon={Share05Icon}
+    />
+    Share ePassport
+</Button.Action>