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:
parent
b25e502c17
commit
4ecec1aa78
1 changed files with 73 additions and 7 deletions
|
|
@ -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 = () => {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue