From 6f68c2320eb5c8df989c7c96f4af888dec51f8c9 Mon Sep 17 00:00:00 2001 From: padreug Date: Mon, 8 Sep 2025 17:46:54 +0200 Subject: [PATCH] Enhance MerchantStore component with improved stall management and loading states - Refactor the MerchantStore component to display a grid of user stalls, including loading indicators and action buttons for managing stalls and viewing products. - Introduce a new card for creating additional stores, enhancing the user experience for merchants. - Update the NostrmarketAPI to correct the endpoint for fetching stalls, ensuring accurate data retrieval. - Implement state management for user stalls and active stall selection, improving the overall functionality and responsiveness of the component. These changes streamline the stall management process for merchants, providing a more intuitive interface and better feedback during interactions. --- .../market/components/MerchantStore.vue | 196 ++++++++++++++---- src/modules/market/services/nostrmarketAPI.ts | 2 +- 2 files changed, 162 insertions(+), 36 deletions(-) diff --git a/src/modules/market/components/MerchantStore.vue b/src/modules/market/components/MerchantStore.vue index c9de132..2f9ec12 100644 --- a/src/modules/market/components/MerchantStore.vue +++ b/src/modules/market/components/MerchantStore.vue @@ -47,28 +47,112 @@ - -
-
- -
-

Create Your First Store

-

- Great! You have a merchant profile. Now create your first store (stall) to start listing products and receiving orders. -

- -
- - +
+ +
+
+
+

My Stores

+

+ Manage your stores and products +

+
+ +
+
+ + +
+
+
+ + +
+ +
+
+
+
+

{{ stall.name }}

+

+ {{ stall.config?.description || 'No description' }} +

+
+ {{ stall.currency }} +
+ +
+ +
+ Products + {{ stall.products?.length || 0 }} +
+
+ Shipping Zones + {{ stall.shipping_zones?.length || 0 }} +
+ + +
+ + +
+
+
+
+ + +
+ +
+
+ + +
-
+
-

My Store

-

Manage incoming orders and your products

+
+ +
+ {{ activeStall.currency }} +
+

{{ activeStall.name }}

+

{{ activeStall.config?.description || 'Manage incoming orders and your products' }}

-
-
+ + + + @@ -608,7 +694,7 @@ import { } from 'lucide-vue-next' import type { OrderStatus } from '@/modules/market/stores/market' import type { NostrmarketService } from '../services/nostrmarketService' -import type { NostrmarketAPI, Merchant, Zone, CreateStallRequest } from '../services/nostrmarketAPI' +import type { NostrmarketAPI, Merchant, Zone, Stall, CreateStallRequest } from '../services/nostrmarketAPI' import { auth } from '@/composables/useAuthService' import { useToast } from '@/core/composables/useToast' import { injectService, SERVICE_TOKENS } from '@/core/di-container' @@ -627,6 +713,14 @@ const merchantCheckError = ref(null) const isCreatingMerchant = ref(false) const merchantCreateError = ref(null) +// Multiple stalls state management +const userStalls = ref([]) +const activeStallId = ref(null) +const isLoadingStalls = ref(false) +const activeStall = computed(() => + userStalls.value.find(stall => stall.id === activeStallId.value) +) + // Stall creation state const isCreatingStall = ref(false) const stallCreateError = ref(null) @@ -698,16 +792,7 @@ const userHasMerchantProfile = computed(() => { }) const userHasStalls = computed(() => { - // Check if user has any stalls in the market store - const currentUserPubkey = auth.currentUser?.value?.pubkey - if (!currentUserPubkey) return false - - // Check if any stalls belong to the current user - const userStalls = marketStore.stalls.filter(stall => - stall.pubkey === currentUserPubkey - ) - - return userStalls.length > 0 + return userStalls.value.length > 0 }) @@ -1027,14 +1112,33 @@ const loadAvailableZones = async () => { const loadStallsList = async () => { const currentUser = auth.currentUser?.value - if (!currentUser?.wallets?.length) return + console.log('Loading stalls list - currentUser:', !!currentUser, 'wallets:', currentUser?.wallets?.length) + if (!currentUser?.wallets?.length) { + console.log('No user or wallets available, skipping stalls loading') + return + } + + isLoadingStalls.value = true try { + console.log('Calling getStalls with inkey:', currentUser.wallets[0].inkey.substring(0, 8) + '...') const stalls = await nostrmarketAPI.getStalls(currentUser.wallets[0].inkey) - // Update the merchant stalls list - this could be connected to a store if needed - console.log('Updated stalls list:', stalls.length) + userStalls.value = stalls || [] + console.log('Loaded user stalls:', { + stallsCount: stalls?.length || 0, + stalls: stalls?.map(s => ({ id: s.id, name: s.name })) + }) + + // If there are stalls but no active one selected, select the first + if (stalls?.length > 0 && !activeStallId.value) { + activeStallId.value = stalls[0].id + console.log('Set active stall ID to:', stalls[0].id) + } } catch (error) { console.error('Failed to load stalls:', error) + userStalls.value = [] + } finally { + isLoadingStalls.value = false } } @@ -1159,6 +1263,20 @@ const createStall = async (formData: any) => { } } +// Missing functions for stall management +const manageStall = (stallId: string) => { + console.log('Managing stall:', stallId) + // Set as active stall for the dashboard view + activeStallId.value = stallId +} + +const viewStallProducts = (stallId: string) => { + console.log('Viewing products for stall:', stallId) + // TODO: Navigate to products view for specific stall + // For now, set as active stall and scroll to products section + activeStallId.value = stallId +} + const navigateToMarket = () => router.push('/market') const viewAllOrders = () => router.push('/market-dashboard?tab=orders') const generateBulkInvoices = () => console.log('Generate bulk invoices') @@ -1219,6 +1337,14 @@ const checkMerchantProfile = async () => { onMounted(async () => { console.log('Merchant Store component loaded') await checkMerchantProfile() + + // Load stalls if merchant profile exists + if (merchantProfile.value) { + console.log('Merchant profile exists, loading stalls...') + await loadStallsList() + } else { + console.log('No merchant profile found, skipping stalls loading') + } }) // Watch for auth changes and re-check merchant profile diff --git a/src/modules/market/services/nostrmarketAPI.ts b/src/modules/market/services/nostrmarketAPI.ts index aac4163..d765b8f 100644 --- a/src/modules/market/services/nostrmarketAPI.ts +++ b/src/modules/market/services/nostrmarketAPI.ts @@ -212,7 +212,7 @@ export class NostrmarketAPI extends BaseService { async getStalls(walletInkey: string): Promise { try { const stalls = await this.request( - '/api/v1/stalls', + '/api/v1/stall', walletInkey, { method: 'GET' } )