Leonardo
358 lines
13 KiB
Vue
358 lines
13 KiB
Vue
<!--
|
|
|--------------------------------------------------------------------------
|
|
| Agência PSI
|
|
|--------------------------------------------------------------------------
|
|
| Criado e desenvolvido por Leonardo Nohama
|
|
|
|
|
| Tecnologia aplicada à escuta.
|
|
| Estrutura para o cuidado.
|
|
|
|
|
| Arquivo: src/views/pages/auth/Welcome.vue
|
|
| Data: 2026
|
|
| Local: São Carlos/SP — Brasil
|
|
|--------------------------------------------------------------------------
|
|
| © 2026 — Todos os direitos reservados
|
|
|--------------------------------------------------------------------------
|
|
-->
|
|
<script setup>
|
|
import { computed, onMounted, ref, watch } from 'vue'
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
import { supabase } from '@/lib/supabase/client'
|
|
|
|
import Message from 'primevue/message'
|
|
import Chip from 'primevue/chip'
|
|
import ProgressSpinner from 'primevue/progressspinner'
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
|
|
// ============================
|
|
// Query
|
|
// ============================
|
|
const planFromQuery = computed(() => String(route.query.plan || '').trim().toLowerCase())
|
|
const intervalFromQuery = computed(() => String(route.query.interval || '').trim().toLowerCase())
|
|
|
|
function normalizeInterval (v) {
|
|
if (v === 'monthly') return 'month'
|
|
if (v === 'annual' || v === 'yearly') return 'year'
|
|
return v
|
|
}
|
|
|
|
const intervalNormalized = computed(() => normalizeInterval(intervalFromQuery.value))
|
|
|
|
const intervalLabel = computed(() => {
|
|
if (intervalNormalized.value === 'year') return 'Anual'
|
|
if (intervalNormalized.value === 'month') return 'Mensal'
|
|
return ''
|
|
})
|
|
|
|
const hasPlanQuery = computed(() => !!planFromQuery.value)
|
|
|
|
// ============================
|
|
// Session (opcional para CTA melhor)
|
|
// ============================
|
|
const hasSession = ref(false)
|
|
|
|
async function checkSession () {
|
|
try {
|
|
const { data } = await supabase.auth.getSession()
|
|
hasSession.value = !!data?.session
|
|
} catch {
|
|
hasSession.value = false
|
|
}
|
|
}
|
|
|
|
// ============================
|
|
// Pricing
|
|
// ============================
|
|
const loading = ref(false)
|
|
const planRow = ref(null)
|
|
|
|
const planName = computed(() => planRow.value?.public_name || planRow.value?.plan_name || null)
|
|
const planDescription = computed(() => planRow.value?.public_description || null)
|
|
|
|
function amountForInterval (row, interval) {
|
|
if (!row) return null
|
|
const cents = interval === 'year' ? row.yearly_cents : row.monthly_cents
|
|
// fallback inteligente: se não houver preço nesse intervalo, tenta o outro
|
|
if (cents == null) return interval === 'year' ? row.monthly_cents : row.yearly_cents
|
|
return cents
|
|
}
|
|
|
|
function currencyForInterval (row, interval) {
|
|
if (!row) return 'BRL'
|
|
const cur = interval === 'year' ? (row.yearly_currency || 'BRL') : (row.monthly_currency || 'BRL')
|
|
return cur || 'BRL'
|
|
}
|
|
|
|
const amountCents = computed(() => amountForInterval(planRow.value, intervalNormalized.value))
|
|
const currency = computed(() => currencyForInterval(planRow.value, intervalNormalized.value))
|
|
|
|
const formattedPrice = computed(() => {
|
|
if (amountCents.value == null) return null
|
|
try {
|
|
return new Intl.NumberFormat('pt-BR', {
|
|
style: 'currency',
|
|
currency: currency.value || 'BRL'
|
|
}).format(Number(amountCents.value) / 100)
|
|
} catch {
|
|
return null
|
|
}
|
|
})
|
|
|
|
async function loadPlan () {
|
|
planRow.value = null
|
|
if (!planFromQuery.value) return
|
|
|
|
loading.value = true
|
|
try {
|
|
const { data, error } = await supabase
|
|
.from('v_public_pricing')
|
|
.select(`
|
|
plan_key,
|
|
plan_name,
|
|
public_name,
|
|
public_description,
|
|
badge,
|
|
is_featured,
|
|
monthly_cents,
|
|
yearly_cents,
|
|
monthly_currency,
|
|
yearly_currency,
|
|
is_visible
|
|
`)
|
|
.eq('plan_key', planFromQuery.value)
|
|
.eq('is_visible', true)
|
|
.maybeSingle()
|
|
|
|
if (error) throw error
|
|
if (data) planRow.value = data
|
|
} catch (err) {
|
|
console.error('[Welcome] loadPlan:', err)
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
function goLogin () {
|
|
router.push('/auth/login')
|
|
}
|
|
|
|
function goBackLanding () {
|
|
router.push('/lp')
|
|
}
|
|
|
|
function goDashboard () {
|
|
router.push('/admin')
|
|
}
|
|
|
|
function goPricing () {
|
|
router.push('/lp#pricing')
|
|
}
|
|
|
|
onMounted(async () => {
|
|
await checkSession()
|
|
await loadPlan()
|
|
})
|
|
|
|
watch(
|
|
() => planFromQuery.value,
|
|
() => loadPlan()
|
|
)
|
|
</script>
|
|
|
|
<template>
|
|
<div class="min-h-screen bg-[var(--surface-ground)] text-[var(--text-color)] flex items-center justify-center p-4">
|
|
<!-- fundo suave (noir glow) -->
|
|
<div class="pointer-events-none absolute inset-0 overflow-hidden">
|
|
<div class="absolute -top-28 -left-28 h-96 w-96 rounded-full blur-3xl opacity-60 bg-indigo-400/10" />
|
|
<div class="absolute top-24 -right-24 h-[28rem] w-[28rem] rounded-full blur-3xl opacity-60 bg-emerald-400/10" />
|
|
<div class="absolute -bottom-40 left-1/3 h-[34rem] w-[34rem] rounded-full blur-3xl opacity-60 bg-fuchsia-400/10" />
|
|
</div>
|
|
|
|
<div class="relative w-full max-w-6xl">
|
|
<div class="rounded-3xl border border-[var(--surface-border)] bg-[var(--surface-card)] shadow-sm overflow-hidden">
|
|
<div class="grid grid-cols-12">
|
|
<!-- LEFT -->
|
|
<div
|
|
class="col-span-12 lg:col-span-6 p-6 md:p-10 bg-[color-mix(in_srgb,var(--surface-card),transparent_6%)] border-b lg:border-b-0 lg:border-r border-[var(--surface-border)]"
|
|
>
|
|
<div class="flex items-center gap-3">
|
|
<div
|
|
class="h-11 w-11 rounded-2xl border border-[var(--surface-border)] bg-[var(--surface-ground)] grid place-items-center"
|
|
>
|
|
<i class="pi pi-sparkles opacity-80 text-lg" />
|
|
</div>
|
|
<div class="min-w-0">
|
|
<div class="font-semibold leading-tight truncate">Psi Quasar</div>
|
|
<div class="text-xs text-[var(--text-color-secondary)] truncate">Gestão clínica sem ruído.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<Divider class="my-6" />
|
|
|
|
<div class="text-3xl md:text-4xl font-semibold leading-tight">
|
|
Bem-vindo(a).
|
|
</div>
|
|
|
|
<div class="mt-3 text-sm md:text-base text-[var(--text-color-secondary)] max-w-lg leading-relaxed">
|
|
Sua conta foi criada e sua intenção de assinatura foi registrada.
|
|
Agora o caminho é simples: instruções de pagamento → confirmação → ativação do plano.
|
|
</div>
|
|
|
|
<div class="mt-6 grid grid-cols-12 gap-3">
|
|
<div class="col-span-12 md:col-span-6">
|
|
<div class="rounded-2xl border border-[var(--surface-border)] bg-[var(--surface-ground)] p-4">
|
|
<div class="text-xs text-[var(--text-color-secondary)]">1) Pagamento</div>
|
|
<div class="text-xl font-semibold mt-1">Manual</div>
|
|
<div class="text-xs text-[var(--text-color-secondary)] mt-1">PIX ou boleto</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12 md:col-span-6">
|
|
<div class="rounded-2xl border border-[var(--surface-border)] bg-[var(--surface-ground)] p-4">
|
|
<div class="text-xs text-[var(--text-color-secondary)]">2) Confirmação</div>
|
|
<div class="text-xl font-semibold mt-1">Rápida</div>
|
|
<div class="text-xs text-[var(--text-color-secondary)] mt-1">verificação e liberação</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12">
|
|
<div class="rounded-2xl border border-[var(--surface-border)] bg-[var(--surface-ground)] p-4">
|
|
<div class="flex items-start justify-between gap-3">
|
|
<div>
|
|
<div class="text-xs text-[var(--text-color-secondary)]">3) Plano ativo</div>
|
|
<div class="font-semibold mt-1">Recursos liberados</div>
|
|
<div class="text-xs text-[var(--text-color-secondary)] mt-1">
|
|
entitlements PRO quando confirmado
|
|
</div>
|
|
</div>
|
|
<i class="pi pi-verified opacity-60" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-6 flex flex-wrap gap-2">
|
|
<Tag severity="secondary" value="Sem cobrança automática" />
|
|
<Tag severity="secondary" value="Ativação após confirmação" />
|
|
<Tag severity="secondary" value="Gateway depois, sem retrabalho" />
|
|
</div>
|
|
|
|
<div class="mt-6 text-xs text-[var(--text-color-secondary)]">
|
|
* Boas-vindas inspirada em layouts PrimeBlocks.
|
|
</div>
|
|
</div>
|
|
|
|
<!-- RIGHT -->
|
|
<div class="col-span-12 lg:col-span-6 p-6 md:p-10">
|
|
<div class="max-w-md mx-auto">
|
|
<div class="text-2xl font-semibold">Conta criada 🎉</div>
|
|
<div class="text-sm text-[var(--text-color-secondary)] mt-1 leading-relaxed">
|
|
Você já pode entrar. Se o seu plano for PRO, ele será ativado após confirmação do pagamento.
|
|
</div>
|
|
|
|
<div class="mt-5">
|
|
<Message severity="success" class="mb-3">
|
|
Intenção de assinatura registrada.
|
|
</Message>
|
|
|
|
<div v-if="loading" class="flex items-center gap-2 text-sm text-[var(--text-color-secondary)]">
|
|
<ProgressSpinner style="width: 18px; height: 18px" strokeWidth="4" />
|
|
Carregando detalhes do plano…
|
|
</div>
|
|
|
|
<Card v-else class="overflow-hidden rounded-[2rem]">
|
|
<template #content>
|
|
<div class="flex items-start justify-between gap-3">
|
|
<div class="min-w-0">
|
|
<div class="text-xs text-[var(--text-color-secondary)]">Resumo</div>
|
|
|
|
<div v-if="hasPlanQuery" class="mt-1 flex items-center gap-2 flex-wrap">
|
|
<div class="text-lg font-semibold truncate">
|
|
{{ planName || 'Plano' }}
|
|
</div>
|
|
<Tag v-if="planRow?.is_featured" severity="success" value="Popular" />
|
|
<Tag v-if="planRow?.badge" severity="secondary" :value="planRow.badge" />
|
|
<Chip v-if="intervalLabel" :label="intervalLabel" />
|
|
</div>
|
|
|
|
<div v-else class="mt-1">
|
|
<div class="text-lg font-semibold">Sem plano selecionado</div>
|
|
<div class="text-sm text-[var(--text-color-secondary)] mt-1">
|
|
Você pode escolher um plano agora ou seguir no FREE.
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="hasPlanQuery" class="mt-2 text-2xl font-semibold leading-none">
|
|
{{ formattedPrice || '—' }}
|
|
<span v-if="intervalLabel" class="text-sm font-normal text-[var(--text-color-secondary)]">
|
|
/{{ intervalNormalized === 'month' ? 'mês' : 'ano' }}
|
|
</span>
|
|
</div>
|
|
|
|
<div v-if="planDescription" class="mt-2 text-sm text-[var(--text-color-secondary)] leading-relaxed">
|
|
{{ planDescription }}
|
|
</div>
|
|
|
|
<Message v-if="hasPlanQuery && !planRow" severity="warn" class="mt-3">
|
|
Não encontrei esse plano na vitrine pública. Você pode continuar normalmente.
|
|
</Message>
|
|
</div>
|
|
</div>
|
|
|
|
<Divider class="my-4" />
|
|
|
|
<Message severity="info" class="mb-0">
|
|
Próximo passo: você receberá instruções de pagamento (PIX/boleto).
|
|
Assim que confirmado, sua assinatura será ativada.
|
|
</Message>
|
|
|
|
<div v-if="!hasPlanQuery" class="mt-3">
|
|
<Button
|
|
label="Escolher um plano"
|
|
icon="pi pi-credit-card"
|
|
severity="secondary"
|
|
outlined
|
|
class="w-full"
|
|
@click="goPricing"
|
|
/>
|
|
</div>
|
|
</template>
|
|
</Card>
|
|
</div>
|
|
|
|
<div class="mt-5 gap-2">
|
|
<Button
|
|
v-if="hasSession"
|
|
label="Ir para o painel"
|
|
class="w-full mb-2"
|
|
icon="pi pi-arrow-right"
|
|
@click="goDashboard"
|
|
/>
|
|
<Button
|
|
v-else
|
|
label="Ir para login"
|
|
class="w-full mb-2"
|
|
icon="pi pi-sign-in"
|
|
@click="goLogin"
|
|
/>
|
|
|
|
<Button
|
|
label="Voltar para a página inicial"
|
|
severity="secondary"
|
|
outlined
|
|
class="w-full"
|
|
icon="pi pi-arrow-left"
|
|
@click="goBackLanding"
|
|
/>
|
|
</div>
|
|
|
|
<div class="text-center text-xs text-[var(--text-color-secondary)] mt-4">
|
|
Psi Quasar — gestão clínica sem ruído.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template> |