jennie/ghostguild-org
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Jennie Robinson Faber 2026-04-19 12:21:10 +01:00
parent 5a4c09f988
commit 1bb59f07be
1 changed files with 43 additions and 75 deletions
Download patch file Download diff file Expand all files Collapse all files

90
app/pages/join.vue
View file

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