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>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue