diff --git a/app/pages/join.vue b/app/pages/join.vue index 80f9cdc..f455a3d 100644 --- a/app/pages/join.vue +++ b/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 = "";