refactor(join): auto-open Helcim modal after form submit

app/pages/join.vue

@@ -624,15 +624,15 @@ const flowStepLabel = computed(() => {
   }
 });
 
-// Step 1: Create customer
 const handleSubmit = async () => {
   if (isSubmitting.value || !isFormValid.value) return;
 
   isSubmitting.value = true;
   errorMessage.value = "";
+  flowState.value = "creating-customer";
 
   try {
-    // Create customer in Helcim
+    // Create customer
     const response = await $fetch("/api/helcim/customer", {
       method: "POST",
       body: {
@@ -645,82 +645,58 @@ const handleSubmit = async () => {
       },
     });
 
-    if (response.success) {
-      customerId.value = response.customerId;
-      customerCode.value = response.customerCode;
-
-      // Token is now set as httpOnly cookie by the server
-      // No need to manually set cookie on client side
-
-      // Move to next step
-      if (needsPayment.value) {
-        currentStep.value = 2;
-        // Initialize HelcimPay.js session for card verification
-        await initializeHelcimPay(customerId.value, customerCode.value, 0);
-      } else {
-        // For free tier, create subscription directly
-        await createSubscription();
-        // Check member status to ensure user is properly authenticated
-        await checkMemberStatus();
-
-        // Automatically redirect to welcome page after a short delay
-        setTimeout(() => {
-          navigateTo("/welcome");
-        }, 3000); // 3 second delay to show success message
-      }
+    if (!response.success) {
+      throw new Error("Failed to create account.");
     }
-  } catch (error) {
-    console.error("Error creating customer:", error);
-    errorMessage.value =
-      error.data?.message || "Failed to create account. Please try again.";
-  } finally {
-    isSubmitting.value = false;
-  }
-};
 
-// Step 2: Process payment
-const processPayment = async () => {
-  if (isSubmitting.value) return;
+    customerId.value = response.customerId;
+    customerCode.value = response.customerCode;
 
-  isSubmitting.value = true;
-  errorMessage.value = "";
+    // Free tier: no Helcim modal, go straight to subscription.
+    if (!needsPayment.value) {
+      flowState.value = "creating-subscription";
+      await createSubscription();
+      return;
+    }
+
+    // Paid tier: initialize HelcimPay session, then auto-open modal.
+    flowState.value = "opening-payment";
+    await initializeHelcimPay(customerId.value, customerCode.value, 0);
 
-  try {
-    // Verify payment through HelcimPay.js
     const paymentResult = await verifyPayment();
+    if (!paymentResult?.success) {
+      throw new Error("Payment was not completed.");
+    }
+    paymentToken.value = paymentResult.cardToken;
 
-    if (paymentResult.success) {
-      paymentToken.value = paymentResult.cardToken;
+    flowState.value = "processing-payment";
+    await $fetch("/api/helcim/verify-payment", {
+      method: "POST",
+      body: {
+        cardToken: paymentResult.cardToken,
+        customerId: customerId.value,
+      },
+    });
 
-      // Verify payment on server
-      const verifyResult = await $fetch("/api/helcim/verify-payment", {
-        method: "POST",
-        body: {
-          cardToken: paymentResult.cardToken,
-          customerId: customerId.value,
-        },
-      });
+    flowState.value = "creating-subscription";
+    const subscriptionResult = await createSubscription(
+      paymentResult.cardToken,
+    );
 
-      // Create subscription (don't let subscription errors prevent form progression)
-      const subscriptionResult = await createSubscription(
-        paymentResult.cardToken,
-      );
-
-      if (!subscriptionResult || !subscriptionResult.success) {
-        console.warn(
-          "Subscription creation failed but payment succeeded:",
-          subscriptionResult?.error,
-        );
-        // Still progress to success page since payment worked
-        currentStep.value = 3;
-        successMessage.value =
-          "Payment successful! Subscription setup may need manual completion.";
-      }
+    if (!subscriptionResult || subscriptionResult.success === false) {
+      // Payment succeeded but subscription couldn't be created.
+      // Keep overlay in success state; admin follow-up will reconcile.
+      successMessage.value =
+        "Payment successful. Subscription setup may need manual completion.";
+      flowState.value = "success";
     }
   } catch (error) {
-    console.error("Payment process error:", error);
+    console.error("Join flow error:", error);
     errorMessage.value =
-      error.message || "Payment verification failed. Please try again.";
+      error.data?.message ||
+      error.message ||
+      "Something went wrong. Please try again.";
+    flowState.value = "error";
   } finally {
     isSubmitting.value = false;
   }
@@ -775,14 +751,6 @@ const createSubscription = async (cardToken = null) => {
   }
 };
 
-// Go back to previous step
-const goBack = () => {
-  if (currentStep.value > 1) {
-    currentStep.value--;
-    errorMessage.value = "";
-  }
-};
-
 const closeFlowOverlay = () => {
   flowState.value = "idle";
   errorMessage.value = "";