Implement multi-step registration process: Add step indicators, error handling, and payment processing for membership registration. Enhance form validation and user feedback with success and error messages. Refactor state management for improved clarity and maintainability.

app/composables/useAuth.js

@@ -0,0 +1,48 @@
+export const useAuth = () => {
+  const authCookie = useCookie('auth-token')
+  const memberData = useState('auth.member', () => null)
+  const isAuthenticated = computed(() => !!authCookie.value)
+  const isMember = computed(() => !!memberData.value)
+
+  const checkMemberStatus = async () => {
+    if (!authCookie.value) {
+      memberData.value = null
+      return false
+    }
+
+    try {
+      const response = await $fetch('/api/auth/member', {
+        headers: {
+          'Cookie': `auth-token=${authCookie.value}`
+        }
+      })
+      memberData.value = response
+      return true
+    } catch (error) {
+      console.error('Failed to fetch member status:', error)
+      memberData.value = null
+      return false
+    }
+  }
+
+  const logout = async () => {
+    try {
+      await $fetch('/api/auth/logout', {
+        method: 'POST'
+      })
+      authCookie.value = null
+      memberData.value = null
+      await navigateTo('/')
+    } catch (error) {
+      console.error('Logout failed:', error)
+    }
+  }
+
+  return {
+    isAuthenticated: readonly(isAuthenticated),
+    isMember: readonly(isMember),
+    memberData: readonly(memberData),
+    checkMemberStatus,
+    logout
+  }
+}

app/composables/useHelcim.js

@@ -0,0 +1,90 @@
+// Helcim API integration composable
+export const useHelcim = () => {
+  const config = useRuntimeConfig()
+  const helcimToken = config.public.helcimToken
+
+  // Base URL for Helcim API
+  const HELCIM_API_BASE = 'https://api.helcim.com/v2'
+
+  // Helper function to make API requests
+  const makeHelcimRequest = async (endpoint, method = 'GET', body = null) => {
+    try {
+      const response = await $fetch(`${HELCIM_API_BASE}${endpoint}`, {
+        method,
+        headers: {
+          'accept': 'application/json',
+          'content-type': 'application/json',
+          'api-token': helcimToken
+        },
+        body: body ? JSON.stringify(body) : undefined
+      })
+      return response
+    } catch (error) {
+      console.error('Helcim API error:', error)
+      throw error
+    }
+  }
+
+  // Create a customer
+  const createCustomer = async (customerData) => {
+    return await makeHelcimRequest('/customers', 'POST', {
+      customerType: 'PERSON',
+      contactName: customerData.name,
+      email: customerData.email,
+      billingAddress: customerData.billingAddress || {}
+    })
+  }
+
+  // Create a subscription
+  const createSubscription = async (customerId, planId, cardToken) => {
+    return await makeHelcimRequest('/recurring/subscriptions', 'POST', {
+      customerId,
+      planId,
+      cardToken,
+      startDate: new Date().toISOString().split('T')[0] // Today's date
+    })
+  }
+
+  // Get customer details
+  const getCustomer = async (customerId) => {
+    return await makeHelcimRequest(`/customers/${customerId}`)
+  }
+
+  // Get subscription details
+  const getSubscription = async (subscriptionId) => {
+    return await makeHelcimRequest(`/recurring/subscriptions/${subscriptionId}`)
+  }
+
+  // Update subscription
+  const updateSubscription = async (subscriptionId, updates) => {
+    return await makeHelcimRequest(`/recurring/subscriptions/${subscriptionId}`, 'PATCH', updates)
+  }
+
+  // Cancel subscription
+  const cancelSubscription = async (subscriptionId) => {
+    return await makeHelcimRequest(`/recurring/subscriptions/${subscriptionId}`, 'DELETE')
+  }
+
+  // Get payment plans
+  const getPaymentPlans = async () => {
+    return await makeHelcimRequest('/recurring/plans')
+  }
+
+  // Verify card token (for testing)
+  const verifyCardToken = async (cardToken) => {
+    return await makeHelcimRequest('/cards/verify', 'POST', {
+      cardToken
+    })
+  }
+
+  return {
+    createCustomer,
+    createSubscription,
+    getCustomer,
+    getSubscription,
+    updateSubscription,
+    cancelSubscription,
+    getPaymentPlans,
+    verifyCardToken
+  }
+}

app/composables/useHelcimPay.js

@@ -0,0 +1,158 @@
+// HelcimPay.js integration composable
+export const useHelcimPay = () => {
+  let checkoutToken = null
+  let secretToken = null
+  
+  // Initialize HelcimPay.js session
+  const initializeHelcimPay = async (customerId, customerCode, amount = 0) => {
+    try {
+      const response = await $fetch('/api/helcim/initialize-payment', {
+        method: 'POST',
+        body: {
+          customerId,
+          customerCode,
+          amount
+        }
+      })
+      
+      if (response.success) {
+        checkoutToken = response.checkoutToken
+        secretToken = response.secretToken
+        return true
+      }
+      
+      throw new Error('Failed to initialize payment session')
+    } catch (error) {
+      console.error('Payment initialization error:', error)
+      throw error
+    }
+  }
+  
+  // Show payment modal
+  const showPaymentModal = () => {
+    return new Promise((resolve, reject) => {
+      if (!checkoutToken) {
+        reject(new Error('Payment not initialized. Call initializeHelcimPay first.'))
+        return
+      }
+      
+      // Load HelcimPay.js modal script
+      if (!window.appendHelcimPayIframe) {
+        console.log('HelcimPay script not loaded, loading now...')
+        const script = document.createElement('script')
+        script.src = 'https://secure.helcim.app/helcim-pay/services/start.js'
+        script.async = true
+        script.onload = () => {
+          console.log('HelcimPay script loaded successfully!')
+          console.log('Available functions:', Object.keys(window).filter(key => key.includes('Helcim') || key.includes('helcim')))
+          console.log('appendHelcimPayIframe available:', typeof window.appendHelcimPayIframe)
+          openModal(resolve, reject)
+        }
+        script.onerror = () => {
+          reject(new Error('Failed to load HelcimPay.js'))
+        }
+        document.head.appendChild(script)
+      } else {
+        console.log('HelcimPay script already loaded, calling openModal')
+        openModal(resolve, reject)
+      }
+    })
+  }
+  
+  // Open the payment modal
+  const openModal = (resolve, reject) => {
+    try {
+      console.log('Trying to open modal with checkoutToken:', checkoutToken)
+      
+      if (typeof window.appendHelcimPayIframe === 'function') {
+        // Set up event listener for HelcimPay.js responses
+        const helcimPayJsIdentifierKey = 'helcim-pay-js-' + checkoutToken
+        
+        const handleHelcimPayEvent = (event) => {
+          console.log('Received window message:', event.data)
+          
+          if (event.data.eventName === helcimPayJsIdentifierKey) {
+            console.log('HelcimPay event received:', event.data)
+            
+            // Remove event listener to prevent multiple responses
+            window.removeEventListener('message', handleHelcimPayEvent)
+            
+            if (event.data.eventStatus === 'SUCCESS') {
+              console.log('Payment success:', event.data.eventMessage)
+              
+              // Parse the JSON string eventMessage
+              let paymentData
+              try {
+                paymentData = JSON.parse(event.data.eventMessage)
+                console.log('Parsed payment data:', paymentData)
+              } catch (parseError) {
+                console.error('Failed to parse eventMessage:', parseError)
+                reject(new Error('Invalid payment response format'))
+                return
+              }
+              
+              // Extract transaction details from nested data structure
+              const transactionData = paymentData.data?.data || {}
+              console.log('Transaction data:', transactionData)
+              
+              resolve({
+                success: true,
+                transactionId: transactionData.transactionId,
+                cardToken: transactionData.cardToken,
+                cardLast4: transactionData.cardNumber ? transactionData.cardNumber.slice(-4) : undefined,
+                cardType: transactionData.cardType || 'unknown'
+              })
+            } else if (event.data.eventStatus === 'ABORTED') {
+              console.log('Payment aborted:', event.data.eventMessage)
+              reject(new Error(event.data.eventMessage || 'Payment failed'))
+            } else if (event.data.eventStatus === 'HIDE') {
+              console.log('Modal closed without completion')
+              reject(new Error('Payment cancelled by user'))
+            }
+          }
+        }
+        
+        // Add event listener
+        window.addEventListener('message', handleHelcimPayEvent)
+        
+        // Open the HelcimPay iframe modal
+        console.log('Calling appendHelcimPayIframe with token:', checkoutToken)
+        window.appendHelcimPayIframe(checkoutToken, true)
+        console.log('appendHelcimPayIframe called, waiting for window messages...')
+        
+        // Add timeout to clean up if no response
+        setTimeout(() => {
+          console.log('60 seconds passed, cleaning up event listener...')
+          window.removeEventListener('message', handleHelcimPayEvent)
+          reject(new Error('Payment timeout - no response received'))
+        }, 60000)
+      } else {
+        reject(new Error('appendHelcimPayIframe function not available'))
+      }
+    } catch (error) {
+      console.error('Error opening modal:', error)
+      reject(error)
+    }
+  }
+  
+  // Process payment verification
+  const verifyPayment = async () => {
+    try {
+      return await showPaymentModal()
+    } catch (error) {
+      throw error
+    }
+  }
+  
+  // Cleanup tokens
+  const cleanup = () => {
+    checkoutToken = null
+    secretToken = null
+  }
+  
+  return {
+    initializeHelcimPay,
+    verifyPayment,
+    cleanup
+  }
+}