fix(join): move flow overlay outside v-if so it survives auth flip
After createSubscription() calls checkMemberStatus(), isAuthenticated
flips to true and the <template v-else> branch unmounts, taking the
Teleport (and its overlay) with it. The authenticated 'You're already a
member' UI then showed for the 3-second pre-redirect delay, producing a
visible flash before navigateTo('/welcome') fired.
Teleport now lives at the root div alongside the v-if/v-else branches,
so the overlay stays mounted through the auth state transition and
covers the page continuously until the redirect.
This commit is contained in:
parent
faa5bcbb3c
commit
968a127f96
1 changed files with 82 additions and 79 deletions
|
|
@ -318,86 +318,89 @@
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</template>
|
||||||
|
|
||||||
|
<!-- Flow overlay: covers the page from form submit through redirect.
|
||||||
|
Lives outside v-if/v-else so it survives the auth state flip that
|
||||||
|
fires after checkMemberStatus() at the end of createSubscription. -->
|
||||||
|
<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>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue