From e8b9f04494b378e1e6f952dd9511b9c337c1f2b3 Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Fri, 5 Sep 2025 16:18:13 +0200
Subject: [PATCH] Refactor PaymentService and related components for improved
 state management

- Reset payment state on initialization in PaymentService to prevent stuck states.
- Introduce forceResetPaymentState method for debugging purposes.
- Update useTicketPurchase and useLightningPayment composables to reflect changes in computed properties for better state handling.
- Ensure OrderHistory component resets payment state on mount to enhance user experience.
---
 src/core/services/PaymentService.ts               | 15 ++++++++++++++-
 .../events/composables/useTicketPurchase.ts       |  6 +++---
 src/modules/market/components/OrderHistory.vue    |  7 +++++++
 .../market/composables/useLightningPayment.ts     |  8 ++++----
 4 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/src/core/services/PaymentService.ts b/src/core/services/PaymentService.ts
index 948c752..56b19ba 100644
--- a/src/core/services/PaymentService.ts
+++ b/src/core/services/PaymentService.ts
@@ -46,7 +46,9 @@ export class PaymentService extends BaseService {
    * Service-specific initialization (called by BaseService)
    */
   protected async onInitialize(): Promise<void> {
-    this.debug('PaymentService initialized')
+    // Reset payment state on initialization to prevent stuck states
+    this.resetPaymentState()
+    this.debug('PaymentService initialized with clean state')
   }
 
   /**
@@ -265,6 +267,17 @@ export class PaymentService extends BaseService {
   resetPaymentState(): void {
     this._isProcessingPayment.value = false
     this._paymentError.value = null
+    this.debug('Payment state reset to clean state')
+  }
+
+  /**
+   * Force reset payment state (public method for debugging)
+   */
+  forceResetPaymentState(): void {
+    console.log('Force resetting payment state from:', this._isProcessingPayment.value)
+    this._isProcessingPayment.value = false
+    this._paymentError.value = null
+    console.log('Payment state after force reset:', this._isProcessingPayment.value)
   }
 
   /**
diff --git a/src/modules/events/composables/useTicketPurchase.ts b/src/modules/events/composables/useTicketPurchase.ts
index ea67531..809f387 100644
--- a/src/modules/events/composables/useTicketPurchase.ts
+++ b/src/modules/events/composables/useTicketPurchase.ts
@@ -35,9 +35,9 @@ export function useTicketPurchase() {
   })
   
   // Delegate to PaymentService
-  const userWallets = computed(() => paymentService.userWallets)
-  const hasWalletWithBalance = computed(() => paymentService.hasWalletWithBalance)
-  const isPayingWithWallet = computed(() => paymentService.isProcessingPayment)
+  const userWallets = computed(() => paymentService.userWallets) // getter method
+  const hasWalletWithBalance = computed(() => paymentService.hasWalletWithBalance) // getter method
+  const isPayingWithWallet = computed(() => paymentService.isProcessingPayment.value) // computed ref
 
   // Generate QR code for Lightning payment - delegate to PaymentService
   async function generateQRCode(bolt11: string) {
diff --git a/src/modules/market/components/OrderHistory.vue b/src/modules/market/components/OrderHistory.vue
index a841392..01bd33f 100644
--- a/src/modules/market/components/OrderHistory.vue
+++ b/src/modules/market/components/OrderHistory.vue
@@ -259,6 +259,7 @@ import type { OrderStatus } from '@/stores/market'
 const router = useRouter()
 const marketStore = useMarketStore()
 const relayHub = injectService(SERVICE_TOKENS.RELAY_HUB) as any
+const paymentService = injectService(SERVICE_TOKENS.PAYMENT_SERVICE) as any
 const { handlePayment, isPayingWithWallet, hasWalletWithBalance } = useLightningPayment()
 
 // const orderEvents = useOrderEvents() // TODO: Move to market module
@@ -483,6 +484,11 @@ const navigateToMarket = () => router.push('/market')
 
 // Load orders on mount
 onMounted(() => {
+  // Reset payment state to prevent stuck "Paying..." buttons (safety measure)
+  if (paymentService?.forceResetPaymentState) {
+    paymentService.forceResetPaymentState()
+  }
+  
   // Orders are already loaded in the market store
   console.log('Order History component loaded with', allOrders.value.length, 'orders')
   console.log('Market store orders:', marketStore.orders)
@@ -525,4 +531,5 @@ watch(
   },
   { immediate: true }
 )
+
 </script>
diff --git a/src/modules/market/composables/useLightningPayment.ts b/src/modules/market/composables/useLightningPayment.ts
index 5e687e0..0c1d790 100644
--- a/src/modules/market/composables/useLightningPayment.ts
+++ b/src/modules/market/composables/useLightningPayment.ts
@@ -8,10 +8,10 @@ export function useLightningPayment() {
   const marketStore = useMarketStore()
 
   // Computed properties - delegate to PaymentService
-  const userWallets = computed(() => paymentService.userWallets)
-  const hasWalletWithBalance = computed(() => paymentService.hasWalletWithBalance)
-  const isPayingWithWallet = computed(() => paymentService.isProcessingPayment)
-  const paymentError = computed(() => paymentService.paymentError)
+  const userWallets = computed(() => paymentService.userWallets) // getter method
+  const hasWalletWithBalance = computed(() => paymentService.hasWalletWithBalance) // getter method  
+  const isPayingWithWallet = computed(() => paymentService.isProcessingPayment.value) // computed ref
+  const paymentError = computed(() => paymentService.paymentError.value) // computed ref
 
   // Get wallet with sufficient balance - delegate to PaymentService
   const getWalletWithBalance = (requiredAmountSats?: number) => {