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

app/pages/join.vue

@@ -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();