Enhance MerchantStore component with merchant profile creation functionality

- Implement asynchronous merchant profile creation logic, including user authentication and wallet validation.
- Introduce loading and error handling states during the merchant creation process to improve user feedback.
- Update the button UI to reflect the creation status, providing a better user experience.
- Integrate toast notifications for success and error messages related to merchant profile creation.

These changes streamline the process for users to create their merchant profiles, ensuring they receive real-time feedback and guidance throughout the process.
This commit is contained in:
padreug 2025-09-08 13:54:45 +02:00
parent b25e502c17
commit 4ecec1aa78

View file

@ -30,9 +30,20 @@
<p class="text-muted-foreground text-center mb-6 max-w-md"> <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. 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> </p>
<Button @click="createMerchantProfile" variant="default" size="lg"> <Button
@click="createMerchantProfile"
variant="default"
size="lg"
:disabled="isCreatingMerchant"
>
<div v-if="isCreatingMerchant" class="flex items-center">
<div class="animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2"></div>
<span>Creating...</span>
</div>
<div v-else class="flex items-center">
<Plus class="w-5 h-5 mr-2" /> <Plus class="w-5 h-5 mr-2" />
Create Merchant Profile <span>Create Merchant Profile</span>
</div>
</Button> </Button>
</div> </div>
@ -378,18 +389,22 @@ import type { OrderStatus } from '@/modules/market/stores/market'
import type { NostrmarketService } from '../services/nostrmarketService' import type { NostrmarketService } from '../services/nostrmarketService'
import type { NostrmarketAPI, Merchant } from '../services/nostrmarketAPI' import type { NostrmarketAPI, Merchant } from '../services/nostrmarketAPI'
import { auth } from '@/composables/useAuthService' import { auth } from '@/composables/useAuthService'
import { useToast } from '@/core/composables/useToast'
import { injectService, SERVICE_TOKENS } from '@/core/di-container' import { injectService, SERVICE_TOKENS } from '@/core/di-container'
const router = useRouter() const router = useRouter()
const marketStore = useMarketStore() const marketStore = useMarketStore()
const nostrmarketService = injectService(SERVICE_TOKENS.NOSTRMARKET_SERVICE) as NostrmarketService const nostrmarketService = injectService(SERVICE_TOKENS.NOSTRMARKET_SERVICE) as NostrmarketService
const nostrmarketAPI = injectService(SERVICE_TOKENS.NOSTRMARKET_API) as NostrmarketAPI const nostrmarketAPI = injectService(SERVICE_TOKENS.NOSTRMARKET_API) as NostrmarketAPI
const toast = useToast()
// Local state // Local state
const isGeneratingInvoice = ref<string | null>(null) const isGeneratingInvoice = ref<string | null>(null)
const merchantProfile = ref<Merchant | null>(null) const merchantProfile = ref<Merchant | null>(null)
const isLoadingMerchant = ref(false) const isLoadingMerchant = ref(false)
const merchantCheckError = ref<string | null>(null) const merchantCheckError = ref<string | null>(null)
const isCreatingMerchant = ref(false)
const merchantCreateError = ref<string | null>(null)
// Computed properties // Computed properties
const userHasMerchantProfile = computed(() => { const userHasMerchantProfile = computed(() => {
@ -623,10 +638,61 @@ const addProduct = () => {
console.log('Adding new product') console.log('Adding new product')
} }
const createMerchantProfile = () => { const createMerchantProfile = async () => {
// TODO: Implement merchant profile creation via LNbits nostrmarket extension const currentUser = auth.currentUser?.value
console.log('Create merchant profile functionality to be implemented') if (!currentUser) {
// This should call the LNbits API: POST /nostrmarket/api/v1/merchant console.error('No authenticated user for merchant creation')
return
}
const userWallets = currentUser.wallets || []
if (userWallets.length === 0) {
console.error('No wallets available for merchant creation')
toast.error('No wallet available. Please ensure you have at least one wallet configured.')
return
}
const wallet = userWallets[0] // Use first wallet
if (!wallet.adminkey) {
console.error('Wallet missing admin key for merchant creation')
toast.error('Wallet missing admin key. Admin key is required to create merchant profiles.')
return
}
isCreatingMerchant.value = true
merchantCreateError.value = null
try {
console.log('Creating merchant profile...')
// Create merchant with empty config, exactly like the nostrmarket extension
const merchantData = {
config: {}
}
const newMerchant = await nostrmarketAPI.createMerchant(wallet.adminkey, merchantData)
console.log('Merchant profile created successfully:', {
merchantId: newMerchant.id,
publicKey: newMerchant.public_key
})
// Update local state
merchantProfile.value = newMerchant
// Show success message
toast.success('Merchant profile created successfully! You can now create your first store.')
} catch (error) {
const errorMessage = error instanceof Error ? error.message : 'Failed to create merchant profile'
console.error('Error creating merchant profile:', error)
merchantCreateError.value = errorMessage
// Show error to user
toast.error(`Failed to create merchant profile: ${errorMessage}`)
} finally {
isCreatingMerchant.value = false
}
} }
const createStall = () => { const createStall = () => {