feat(join): add flow overlay scaffolding for submit→redirect states

app/pages/join.vue

@@ -412,6 +412,86 @@
           </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">
+          <div class="join-flow-card">
+            <div class="join-flow-step">{{ flowStepLabel }}</div>
+
+            <!-- Progress states -->
+            <template
+              v-if="[
+                'creating-customer',
+                'opening-payment',
+                'processing-payment',
+                'creating-subscription',
+              ].includes(flowState)"
+            >
+              <h2 class="join-flow-heading">
+                {{
+                  flowState === "creating-customer"
+                    ? "Creating your account..."
+                    : flowState === "opening-payment"
+                    ? "Opening secure payment..."
+                    : flowState === "processing-payment"
+                    ? "Confirming your card..."
+                    : "Activating your membership..."
+                }}
+              </h2>
+              <p class="join-flow-body">
+                Please don't close this window. This usually takes a few seconds.
+              </p>
+            </template>
+
+            <!-- Success state -->
+            <template v-if="flowState === 'success'">
+              <h2 class="join-flow-heading">Welcome to Ghost Guild!</h2>
+              <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>
+                </dl>
+              </DashedBox>
+              <p class="join-flow-body" style="margin-top: 16px">
+                We've sent a confirmation email to {{ form.email }}. Redirecting
+                you to your dashboard...
+              </p>
+              <div class="button-row" style="margin-top: 20px">
+                <NuxtLink to="/welcome" class="form-submit">
+                  Go to Dashboard Now
+                </NuxtLink>
+              </div>
+            </template>
+
+            <!-- Error state -->
+            <template v-if="flowState === 'error'">
+              <h2 class="join-flow-heading">We couldn't complete your signup</h2>
+              <div v-if="errorMessage" class="error-box">
+                {{ errorMessage }}
+              </div>
+              <div class="button-row" style="margin-top: 20px">
+                <button class="btn" @click="closeFlowOverlay">
+                  Back to form
+                </button>
+              </div>
+            </template>
+          </div>
+        </div>
+      </Teleport>
     </template>
   </div>
 </template>
@@ -457,6 +537,14 @@ const errorMessage = ref("");
 const successMessage = ref("");
 const cadence = ref("monthly"); // 'monthly' | 'annual'
 
+// Flow overlay state — drives the post-submit full-viewport UI.
+// 'idle' = overlay hidden; user is editing the form.
+// 'creating-customer' | 'opening-payment' | 'processing-payment'
+//   | 'creating-subscription' = progress states, overlay shows a spinner + label.
+// 'success' = overlay shows confirmation, auto-redirect is queued.
+// 'error' = overlay shows error + Retry/Back buttons.
+const flowState = ref("idle");
+
 // Helcim state
 const customerId = ref(null);
 const customerCode = ref(null);
@@ -519,6 +607,23 @@ const selectedTier = computed(() => {
   return getContributionTierByValue(form.contributionTier);
 });
 
+const flowStepLabel = computed(() => {
+  switch (flowState.value) {
+    case "creating-customer":
+    case "opening-payment":
+      return "Step 2 of 3 — Payment";
+    case "processing-payment":
+    case "creating-subscription":
+      return "Step 2 of 3 — Finalizing";
+    case "success":
+      return "Step 3 of 3 — Welcome";
+    case "error":
+      return "Something went wrong";
+    default:
+      return "";
+  }
+});
+
 // Step 1: Create customer
 const handleSubmit = async () => {
   if (isSubmitting.value || !isFormValid.value) return;
@@ -678,6 +783,11 @@ const goBack = () => {
   }
 };
 
+const closeFlowOverlay = () => {
+  flowState.value = "idle";
+  errorMessage.value = "";
+};
+
 // Reset form
 const resetForm = () => {
   currentStep.value = 1;
@@ -1180,4 +1290,49 @@ onUnmounted(() => {
     align-items: stretch;
   }
 }
+
+.join-flow-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  background: rgba(42, 32, 21, 0.72); /* --parch @ 72% */
+  backdrop-filter: blur(4px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+}
+
+.join-flow-card {
+  background: var(--bg);
+  border: 1px dashed var(--border);
+  padding: 32px;
+  max-width: 520px;
+  width: 100%;
+  max-height: calc(100vh - 48px);
+  overflow-y: auto;
+}
+
+.join-flow-step {
+  font-family: var(--font-body);
+  font-size: 0.75rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--text-dim);
+  margin-bottom: 12px;
+}
+
+.join-flow-heading {
+  font-family: var(--font-display);
+  font-size: 1.5rem;
+  color: var(--text-bright);
+  margin: 0 0 16px;
+}
+
+.join-flow-body {
+  font-family: var(--font-body);
+  color: var(--text);
+  line-height: 1.5;
+  margin: 0;
+}
 </style>