Refactor MerchantStore component to enhance merchant profile management

- Update empty state messaging to guide users in creating a merchant profile before setting up a store.
- Introduce computed properties to check for user merchant profile and stalls, improving user experience.
- Rename functions and variables for clarity, ensuring better alignment with user actions.
- Prepare for future implementation of merchant profile and stall creation functionalities.

These changes streamline the onboarding process for new merchants and clarify the steps needed to start selling on the platform.
This commit is contained in:
padreug 2025-09-08 13:00:08 +02:00
parent f4dbf9b340
commit 8cf62076fd

View file

@ -1,17 +1,32 @@
<template> <template>
<div class="space-y-6"> <div class="space-y-6">
<!-- No Store Empty State --> <!-- No Merchant Profile Empty State -->
<div v-if="!userHasStore" class="flex flex-col items-center justify-center py-12"> <div v-if="!userHasMerchantProfile" class="flex flex-col items-center justify-center py-12">
<div class="w-24 h-24 bg-muted rounded-full flex items-center justify-center mb-6">
<User class="w-12 h-12 text-muted-foreground" />
</div>
<h2 class="text-2xl font-bold text-foreground mb-2">Create Your Merchant Profile</h2>
<p class="text-muted-foreground text-center mb-6 max-w-md">
Before you can create a store, you need to set up your merchant profile. This will create your merchant identity on the Nostr marketplace.
</p>
<Button @click="createMerchantProfile" variant="default" size="lg">
<Plus class="w-5 h-5 mr-2" />
Create Merchant Profile
</Button>
</div>
<!-- No Stalls Empty State (has merchant profile but no stalls) -->
<div v-else-if="!userHasStalls" class="flex flex-col items-center justify-center py-12">
<div class="w-24 h-24 bg-muted rounded-full flex items-center justify-center mb-6"> <div class="w-24 h-24 bg-muted rounded-full flex items-center justify-center mb-6">
<Store class="w-12 h-12 text-muted-foreground" /> <Store class="w-12 h-12 text-muted-foreground" />
</div> </div>
<h2 class="text-2xl font-bold text-foreground mb-2">Create Your Store</h2> <h2 class="text-2xl font-bold text-foreground mb-2">Create Your First Store</h2>
<p class="text-muted-foreground text-center mb-6 max-w-md"> <p class="text-muted-foreground text-center mb-6 max-w-md">
You don't have a store yet. Set up your merchant profile to start selling products on the Nostr marketplace. Great! You have a merchant profile. Now create your first store (stall) to start listing products and receiving orders.
</p> </p>
<Button @click="createStore" variant="default" size="lg"> <Button @click="createStall" variant="default" size="lg">
<Plus class="w-5 h-5 mr-2" /> <Plus class="w-5 h-5 mr-2" />
Create My Store Create Store
</Button> </Button>
</div> </div>
@ -335,7 +350,8 @@ import {
CheckCircle, CheckCircle,
Download, Download,
Settings, Settings,
BarChart3 BarChart3,
User
} from 'lucide-vue-next' } from 'lucide-vue-next'
import type { OrderStatus } from '@/modules/market/stores/market' import type { OrderStatus } from '@/modules/market/stores/market'
import type { NostrmarketService } from '../services/nostrmarketService' import type { NostrmarketService } from '../services/nostrmarketService'
@ -350,20 +366,47 @@ const nostrmarketService = injectService(SERVICE_TOKENS.NOSTRMARKET_SERVICE) as
const isGeneratingInvoice = ref<string | null>(null) const isGeneratingInvoice = ref<string | null>(null)
// Computed properties // Computed properties
const userHasStore = computed(() => { const userHasMerchantProfile = computed(() => {
// Check if user has any store/stall set up
// For now, we'll check if they have ever been a seller on any order
const currentUserPubkey = auth.currentUser?.value?.pubkey const currentUserPubkey = auth.currentUser?.value?.pubkey
if (!currentUserPubkey) return false if (!currentUserPubkey) return false
// TODO: In the future, this should check if user has created a stall // Check multiple indicators that suggest user has a merchant profile:
// For now, we'll show the create store prompt if they have no incoming orders
const hasIncomingOrders = Object.values(marketStore.orders).some(order => // 1. User has wallets with admin keys (required for merchant operations)
const userWallets = auth.currentUser?.value?.wallets || []
const hasAdminWallet = userWallets.some(wallet => wallet.adminkey)
// 2. User has stalls (indicates they've set up merchant infrastructure)
const userStalls = marketStore.stalls.filter(stall =>
stall.pubkey === currentUserPubkey
)
const hasStalls = userStalls.length > 0
// 3. User has been a seller in orders (indicates merchant activity)
const hasSellerOrders = Object.values(marketStore.orders).some(order =>
order.sellerPubkey === currentUserPubkey order.sellerPubkey === currentUserPubkey
) )
return hasIncomingOrders
// User is considered to have a merchant profile if they have at least:
// - An admin wallet AND (stalls OR seller orders)
// OR just have stalls (indicates successful merchant setup)
return hasStalls || (hasAdminWallet && hasSellerOrders)
}) })
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
})
const incomingOrders = computed(() => { const incomingOrders = computed(() => {
// Filter orders to only show those where the current user is the seller // Filter orders to only show those where the current user is the seller
const currentUserPubkey = auth.currentUser?.value?.pubkey const currentUserPubkey = auth.currentUser?.value?.pubkey
@ -403,7 +446,7 @@ const storeStats = computed(() => {
.reduce((sum, o) => sum + o.total, 0), .reduce((sum, o) => sum + o.total, 0),
totalProducts: 0, // TODO: Implement product management totalProducts: 0, // TODO: Implement product management
activeProducts: 0, // TODO: Implement product management activeProducts: 0, // TODO: Implement product management
satisfaction: userHasStore.value ? 95 : 0, // TODO: Implement review system satisfaction: userHasStalls.value ? 95 : 0, // TODO: Implement review system
totalReviews: 0 // TODO: Implement review system totalReviews: 0 // TODO: Implement review system
} }
}) })
@ -576,9 +619,16 @@ const addProduct = () => {
console.log('Adding new product') console.log('Adding new product')
} }
const createStore = () => { const createMerchantProfile = () => {
// TODO: Implement store creation flow // TODO: Implement merchant profile creation via LNbits nostrmarket extension
console.log('Create store functionality to be implemented') console.log('Create merchant profile functionality to be implemented')
// This should call the LNbits API: POST /nostrmarket/api/v1/merchant
}
const createStall = () => {
// TODO: Implement stall creation via LNbits nostrmarket extension
console.log('Create stall functionality to be implemented')
// This should call the LNbits API: POST /nostrmarket/api/v1/stall
} }
const navigateToMarket = () => router.push('/market') const navigateToMarket = () => router.push('/market')