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

refactor(join): move success state into overlay; remove step 2/3 UI

Browse source
This commit is contained in:
Jennie Robinson Faber 2026-04-19 12:23:19 +01:00
parent 1bb59f07be
commit f7c6bd88e7
1 changed files with 2 additions and 113 deletions
Download patch file Download diff file Expand all files Collapse all files

115
app/pages/join.vue
View file

@ -60,7 +60,7 @@
<!-- Not authenticated: show full join page -->
<template v-else>
<!-- CONTRIBUTION + SIGN UP (two columns) -->
<div v-if="currentStep === 1" class="join-two-col">
<div class="join-two-col">
<!-- Left: Monthly Contribution -->
<div class="join-col">
<div class="section-label" style="margin-bottom: 12px">
@ -318,101 +318,6 @@
</div>
</div>
<!-- Step 2: Payment -->
<div v-if="currentStep === 2" class="form-section">
<h2>Payment Information</h2>
<p class="form-intro">
You're signing up for the {{ selectedTier.label }} plan -- ${{
selectedTier.amount
}}
CAD / month
</p>
<!-- Error Message -->
<div v-if="errorMessage" class="error-box">
{{ errorMessage }}
</div>
<DashedBox :hoverable="false">
<p class="payment-instruction">
Click "Complete Payment" below to open the secure payment modal and
verify your payment method.
</p>
</DashedBox>
<div class="button-row" style="margin-top: 24px">
<button class="btn" :disabled="isSubmitting" @click="goBack">
Back
</button>
<button
class="form-submit"
:disabled="isSubmitting"
@click="processPayment"
>
<span v-if="isSubmitting">Processing...</span>
<span v-else>Complete Payment</span>
</button>
</div>
</div>
<!-- Step 3: Confirmation -->
<div v-if="currentStep === 3" class="form-section">
<h2>Welcome to Ghost Guild!</h2>
<div v-if="successMessage" class="success-box">
{{ successMessage }}
</div>
<DashedBox :hoverable="false">
<div class="section-label" style="margin-bottom: 12px">
Membership Details
</div>
<dl class="details-list">
<div class="details-row">
<dt>Name</dt>
<dd>{{ form.name }}</dd>
</div>
<div class="details-row">
<dt>Email</dt>
<dd>{{ form.email }}</dd>
</div>
<div class="details-row">
<dt>Circle</dt>
<dd class="capitalize">{{ form.circle }}</dd>
</div>
<div class="details-row">
<dt>Contribution</dt>
<dd>{{ selectedTier.label }}</dd>
</div>
<div v-if="customerCode" class="details-row">
<dt>Member ID</dt>
<dd>{{ customerCode }}</dd>
</div>
</dl>
</DashedBox>
<p class="form-note" style="margin-top: 20px">
We've sent a confirmation email to {{ form.email }} with your
membership details.
</p>
<DashedBox :hoverable="false" style="margin-top: 16px">
<p class="redirect-note">
You will be automatically redirected to your dashboard in a few
seconds...
</p>
</DashedBox>
<div class="button-row" style="margin-top: 24px">
<NuxtLink to="/member/dashboard" class="form-submit"
>Go to Dashboard Now</NuxtLink
>
<button class="btn" @click="resetForm">
Register Another Member
</button>
</div>
</div>
<!-- Flow overlay: covers the page from form submit through redirect -->
<Teleport to="body">
<div v-if="flowState !== 'idle'" class="join-flow-overlay">
@ -532,7 +437,6 @@ const form = reactive({
// UI state
const isSubmitting = ref(false);
const currentStep = ref(1); // 1: Info, 2: Billing (paid only), 3: Payment, 4: Confirmation
const errorMessage = ref("");
const successMessage = ref("");
const cadence = ref("monthly"); // 'monthly' | 'annual'
@ -718,7 +622,7 @@ const createSubscription = async (cardToken = null) => {
if (response.success) {
subscriptionData.value = response.subscription;
currentStep.value = 3;
flowState.value = "success";
successMessage.value = "Your membership is active.";
// Check member status to ensure user is properly authenticated
@ -756,21 +660,6 @@ const closeFlowOverlay = () => {
errorMessage.value = "";
};
// Reset form
const resetForm = () => {
currentStep.value = 1;
customerId.value = null;
customerCode.value = null;
subscriptionData.value = null;
paymentToken.value = null;
errorMessage.value = "";
successMessage.value = "";
form.email = "";
form.name = "";
form.circle = "community";
form.contributionTier = "15";
};
// Cleanup on unmount
onUnmounted(() => {
cleanupHelcimPay();