Implemented coin purchase-flow

frontend/src/components/layout/NavBar.vue

@@ -23,14 +23,14 @@
                 </NavigationMenuItem>
 
                 <NavigationMenuItem v-else class="flex flex-row gap-4">
-                    <NavigationMenuLink v-if="coins > 0" href="/user?tab=transaction-history"
+                    <NavigationMenuLink v-if="userStore.coins > 0" href="/coins-purchase"
                         class="flex flex-row items-center gap-1">
                         <div class="flex items-center justify-center w-5 h-5 bg-purple-400 rounded-full shadow-sm">
                             <span class="text-[10px] font-bold text-purple-900">$</span>
                         </div>
 
                         <span class="text-sm font-medium tabular-nums">
-                            {{ coins }} <span class="text-muted-foreground text-xs">Coins</span>
+                            {{ userStore.coins }} <span class="text-muted-foreground text-xs">Coins</span>
                         </span>
                     </NavigationMenuLink>
                     <NavigationMenuLink>
@@ -56,13 +56,12 @@ import {
     NavigationMenuTrigger,
 } from '@/components/ui/navigation-menu'
 import router from '@/router';
-import { ref, watch } from 'vue';
+import { watch } from 'vue';
 import { useUserStore } from '@/stores/user';
 
 
 const emits = defineEmits(['logout'])
 const { userLoggedIn } = defineProps(['userLoggedIn'])
-const coins = ref(0);
 
 const biscaStore = useBiscaStore()
 
@@ -84,22 +83,13 @@ const logoutClickHandler = () => {
     router.push('/login')
 }
 
-const fetchUserCoins = async () => {
-    if (userLoggedIn) {
-        try {
-            const response = await useUserStore().getCoins()
-            coins.value = response.data?.coins || 0
-        } catch (error) {
-            console.error('Error fetching user coins', error)
-        }
-    }
-}
+const userStore = useUserStore()
 
 watch(() => userLoggedIn, async (isLoggedIn) => {
     if (isLoggedIn) {
-        await fetchUserCoins()
+        await userStore.fetchCoins()
     } else {
-        coins.value = 0
+        userStore.coins = 0
     }
 }, { immediate: true })
 </script>