From 4ecec1aa7871566fb029a1fdab51bb7532b0cdd9 Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Mon, 8 Sep 2025 13:54:45 +0200
Subject: [PATCH] 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.
---
 .../market/components/MerchantStore.vue       | 80 +++++++++++++++++--
 1 file changed, 73 insertions(+), 7 deletions(-)

diff --git a/src/modules/market/components/MerchantStore.vue b/src/modules/market/components/MerchantStore.vue
index 4b07062..ad6e366 100644
--- a/src/modules/market/components/MerchantStore.vue
+++ b/src/modules/market/components/MerchantStore.vue
@@ -30,9 +30,20 @@
       <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 
+        @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" />
+          <span>Create Merchant Profile</span>
+        </div>
       </Button>
     </div>
 
@@ -378,18 +389,22 @@ import type { OrderStatus } from '@/modules/market/stores/market'
 import type { NostrmarketService } from '../services/nostrmarketService'
 import type { NostrmarketAPI, Merchant } from '../services/nostrmarketAPI'
 import { auth } from '@/composables/useAuthService'
+import { useToast } from '@/core/composables/useToast'
 import { injectService, SERVICE_TOKENS } from '@/core/di-container'
 
 const router = useRouter()
 const marketStore = useMarketStore()
 const nostrmarketService = injectService(SERVICE_TOKENS.NOSTRMARKET_SERVICE) as NostrmarketService
 const nostrmarketAPI = injectService(SERVICE_TOKENS.NOSTRMARKET_API) as NostrmarketAPI
+const toast = useToast()
 
 // Local state
 const isGeneratingInvoice = ref<string | null>(null)
 const merchantProfile = ref<Merchant | null>(null)
 const isLoadingMerchant = ref(false)
 const merchantCheckError = ref<string | null>(null)
+const isCreatingMerchant = ref(false)
+const merchantCreateError = ref<string | null>(null)
 
 // Computed properties
 const userHasMerchantProfile = computed(() => {
@@ -623,10 +638,61 @@ const addProduct = () => {
   console.log('Adding new product')
 }
 
-const createMerchantProfile = () => {
-  // TODO: Implement merchant profile creation via LNbits nostrmarket extension
-  console.log('Create merchant profile functionality to be implemented')
-  // This should call the LNbits API: POST /nostrmarket/api/v1/merchant
+const createMerchantProfile = async () => {
+  const currentUser = auth.currentUser?.value
+  if (!currentUser) {
+    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 = () => {