Many an update!

app/composables/useMemberPayment.js

@@ -0,0 +1,166 @@
+/**
+ * Member Payment Management Composable
+ * Handles payment setup and subscription creation for pending payment members
+ */
+
+export const useMemberPayment = () => {
+  const { memberData, checkMemberStatus } = useAuth()
+  const { initializeHelcimPay, verifyPayment, cleanup: cleanupHelcimPay } =
+    useHelcimPay()
+
+  const isProcessingPayment = ref(false)
+  const paymentError = ref(null)
+  const paymentSuccess = ref(false)
+
+  const customerId = ref('')
+  const customerCode = ref('')
+
+  /**
+   * Initiate payment setup for a member with pending_payment status
+   * This is the main entry point called from "Complete Payment" buttons
+   */
+  const initiatePaymentSetup = async () => {
+    isProcessingPayment.value = true
+    paymentError.value = null
+    paymentSuccess.value = false
+
+    try {
+      // Step 1: Get or create Helcim customer
+      await getOrCreateCustomer()
+
+      // Step 2: Initialize Helcim payment with $0 for card verification
+      await initializeHelcimPay(
+        customerId.value,
+        customerCode.value,
+        0,
+      )
+
+      // Step 3: Show payment modal and get payment result
+      const paymentResult = await verifyPayment()
+      console.log('Payment result:', paymentResult)
+
+      if (!paymentResult.success) {
+        throw new Error('Payment verification failed')
+      }
+
+      // Step 4: Verify payment on backend
+      const verifyResult = await $fetch('/api/helcim/verify-payment', {
+        method: 'POST',
+        body: {
+          cardToken: paymentResult.cardToken,
+          customerId: customerId.value,
+        },
+      })
+
+      if (!verifyResult.success) {
+        throw new Error('Payment verification failed on backend')
+      }
+
+      // Step 5: Create subscription with proper contribution tier
+      const subscriptionResponse = await $fetch('/api/helcim/subscription', {
+        method: 'POST',
+        body: {
+          customerId: customerId.value,
+          customerCode: customerCode.value,
+          contributionTier: memberData.value?.contributionTier || '5',
+          cardToken: paymentResult.cardToken,
+        },
+      })
+
+      if (!subscriptionResponse.success) {
+        throw new Error('Subscription creation failed')
+      }
+
+      // Step 6: Payment successful - refresh member data
+      paymentSuccess.value = true
+      await checkMemberStatus()
+
+      // Clear success message after 3 seconds
+      setTimeout(() => {
+        paymentSuccess.value = false
+      }, 3000)
+
+      return {
+        success: true,
+        message: 'Payment completed successfully!',
+      }
+    } catch (error) {
+      console.error('Payment setup error:', error)
+      paymentError.value =
+        error.message || 'Payment setup failed. Please try again.'
+      throw error
+    } finally {
+      isProcessingPayment.value = false
+      cleanupHelcimPay()
+    }
+  }
+
+  /**
+   * Get or create Helcim customer for member
+   */
+  const getOrCreateCustomer = async () => {
+    try {
+      if (!memberData.value?.helcimCustomerId) {
+        // Create new customer
+        const customerResponse = await $fetch(
+          '/api/helcim/get-or-create-customer',
+          {
+            method: 'POST',
+          },
+        )
+
+        customerId.value = customerResponse.customerId
+        customerCode.value = customerResponse.customerCode
+
+        console.log(
+          'Created new Helcim customer:',
+          customerId.value,
+        )
+      } else {
+        // Get customer code from existing customer
+        const customerResponse = await $fetch(
+          '/api/helcim/customer-code',
+        )
+        customerId.value = customerResponse.customerId
+        customerCode.value = customerResponse.customerCode
+
+        console.log(
+          'Using existing Helcim customer:',
+          customerId.value,
+        )
+      }
+    } catch (error) {
+      console.error('Failed to get or create customer:', error)
+      throw new Error('Failed to initialize payment. Please try again.')
+    }
+  }
+
+  /**
+   * Complete payment from status banner
+   * Entry point for clicking "Complete Payment" from any page
+   */
+  const completePayment = async () => {
+    try {
+      await initiatePaymentSetup()
+      return true
+    } catch (error) {
+      console.error('Payment failed:', error)
+      return false
+    }
+  }
+
+  const resetPaymentState = () => {
+    isProcessingPayment.value = false
+    paymentError.value = null
+    paymentSuccess.value = false
+  }
+
+  return {
+    isProcessingPayment: readonly(isProcessingPayment),
+    paymentError: readonly(paymentError),
+    paymentSuccess: readonly(paymentSuccess),
+    initiatePaymentSetup,
+    completePayment,
+    resetPaymentState,
+  }
+}