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.

debug-token.js

@@ -0,0 +1,42 @@
+// Debug token encoding
+const originalToken = 'aG_Eu%lqXCIJdWb2fUx52P_*-9GzaUHAVXvRjF43#sZw_FEeV9q7gl$pe$1EPRNs'
+// Manually fix the %lq part - it should be a literal character, not URL encoded
+const correctedToken = originalToken.replace('%lq', 'lq')
+
+console.log('Original token:', originalToken)
+console.log('Corrected token:', correctedToken)
+console.log('Are they different?', originalToken !== correctedToken)
+
+async function testBoth() {
+  console.log('\n=== Testing Original Token ===')
+  try {
+    const response1 = await fetch('https://api.helcim.com/v2/connection-test', {
+      headers: {
+        'accept': 'application/json',
+        'api-token': originalToken
+      }
+    })
+    console.log('Original token status:', response1.status)
+    const data1 = await response1.text()
+    console.log('Original token response:', data1)
+  } catch (error) {
+    console.error('Original token error:', error.message)
+  }
+
+  console.log('\n=== Testing Corrected Token ===')
+  try {
+    const response2 = await fetch('https://api.helcim.com/v2/connection-test', {
+      headers: {
+        'accept': 'application/json',
+        'api-token': correctedToken
+      }
+    })
+    console.log('Corrected token status:', response2.status)
+    const data2 = await response2.text()
+    console.log('Corrected token response:', data2)
+  } catch (error) {
+    console.error('Corrected token error:', error.message)
+  }
+}
+
+testBoth()