<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<title>SKY • Assine online</title>
<style>
:root {
--bg: #f4f4f6;
--card: #ffffff;
--line: #e6e6eb;
--text: #141414;
--muted: #6b6c76;
--primary: #e30613;
--primary2: #ff2431;
--primarySoft: rgba(227, 6, 19, 0.08);
--success: #0f9d58;
--danger: #d93025;
--shadow: 0 16px 40px rgba(17, 24, 39, 0.08);
--maxw: 1120px;
}
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
background: var(--bg);
color: var(--text);
font-family: Arial, Helvetica, sans-serif;
}
body {
min-height: 100vh;
}
button,
input,
select {
font: inherit;
}
.app {
max-width: var(--maxw);
margin: 0 auto;
padding: 18px 12px 28px;
}
.shell {
background: linear-gradient(180deg, #ffffff 0%, #fafafb 100%);
border-radius: 34px;
overflow: hidden;
box-shadow: var(--shadow);
border: 1px solid rgba(0, 0, 0, 0.04);
}
.progress-track {
height: 10px;
background: #ececf0;
overflow: hidden;
}
.progress-bar {
height: 100%;
width: 20%;
background: linear-gradient(90deg, var(--primary) 0%, var(--primary2) 100%);
transition: width 0.25s ease;
}
.content {
padding: 22px 18px 118px;
}
.brand {
display: inline-flex;
align-items: center;
padding: 10px 16px;
border-radius: 999px;
color: var(--primary);
background: var(--primarySoft);
font-weight: 900;
letter-spacing: 0.12em;
text-transform: uppercase;
font-size: 12px;
}
.step-tag {
margin: 12px 0 10px;
color: #858692;
font-size: 13px;
font-weight: 800;
}
h1 {
margin: 0;
font-size: 30px;
line-height: 1.04;
letter-spacing: -0.04em;
font-weight: 900;
}
.subtitle {
margin: 10px 0 0;
color: var(--muted);
font-size: 15px;
line-height: 1.45;
max-width: 700px;
}
.step {
display: none;
}
.step.active {
display: block;
}
.plan-hint {
display: none;
margin-top: 14px;
color: var(--muted);
font-size: 13px;
font-weight: 700;
}
.plan-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
margin-top: 24px;
}
.plan-card {
background: #fff;
border: 1.5px solid var(--line);
border-radius: 30px;
padding: 18px;
cursor: pointer;
transition: 0.2s ease;
min-width: 0;
}
.plan-card.selected {
border-color: var(--primary);
box-shadow: 0 0 0 4px rgba(227, 6, 19, 0.08);
}
.plan-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.plan-name {
margin: 0;
font-size: 20px;
line-height: 1.12;
letter-spacing: -0.03em;
font-weight: 900;
flex: 1;
}
.pill {
background: #f3f4f6;
border-radius: 999px;
padding: 10px 14px;
font-size: 12px;
font-weight: 900;
white-space: nowrap;
}
.pill-action {
border: 0;
cursor: pointer;
background: rgba(227, 6, 19, 0.08);
color: var(--primary);
font-weight: 900;
}
.pill-action:hover {
background: rgba(227, 6, 19, 0.14);
}
.section-line {
display: flex;
align-items: center;
gap: 12px;
margin: 18px 0 14px;
}
.section-line strong {
font-size: 15px;
font-weight: 900;
}
.section-line span {
flex: 1;
height: 1px;
background: #d8d8de;
}
.benefits {
display: grid;
gap: 16px;
}
.benefit {
display: grid;
grid-template-columns: 40px 1fr;
gap: 12px;
align-items: center;
}
.check {
width: 34px;
height: 34px;
border-radius: 999px;
border: 2px solid #111;
display: grid;
place-items: center;
font-size: 18px;
font-weight: 900;
}
.benefit-text {
font-size: 16px;
line-height: 1.35;
}
.price-row {
margin-top: 18px;
}
.old-price {
color: #767781;
text-decoration: line-through;
font-size: 18px;
font-weight: 800;
}
.price {
display: flex;
align-items: baseline;
gap: 8px;
flex-wrap: wrap;
margin-top: 4px;
}
.price strong {
font-size: 32px;
line-height: 1;
letter-spacing: -0.05em;
font-weight: 900;
}
.price span {
color: #32333a;
font-size: 16px;
}
.placeholder-panel {
margin-top: 22px;
background: #fff;
border: 1px solid var(--line);
border-radius: 24px;
padding: 16px;
color: var(--muted);
line-height: 1.45;
}
.plan-mobile-nav {
display: none;
align-items: center;
justify-content: center;
gap: 14px;
margin-top: 14px;
}
.plan-nav-btn {
width: 42px;
height: 42px;
border-radius: 999px;
border: 1px solid #d7d7de;
background: #fff;
font-size: 22px;
font-weight: 900;
cursor: pointer;
}
.plan-dots {
display: flex;
gap: 8px;
align-items: center;
}
.plan-dot {
width: 8px;
height: 8px;
border-radius: 999px;
background: #d2d3da;
transition: 0.2s ease;
}
.plan-dot.active {
width: 24px;
background: var(--primary);
}
.field-grid {
display: grid;
gap: 14px;
margin-top: 22px;
}
.field-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.field {
display: block;
}
.field label {
display: block;
font-size: 13px;
font-weight: 900;
margin-bottom: 8px;
}
.input,
.select {
width: 100%;
height: 54px;
border-radius: 16px;
border: 1px solid var(--line);
background: #fff;
color: var(--text);
padding: 0 15px;
outline: none;
transition: 0.2s ease;
}
.input:focus,
.select:focus {
border-color: rgba(227, 6, 19, 0.6);
box-shadow: 0 0 0 4px rgba(227, 6, 19, 0.08);
}
.input[disabled],
.select[disabled] {
background: #f2f3f6;
color: #8a8b95;
cursor: not-allowed;
}
.readonly-field {
background: #f7f7f9 !important;
color: #63646e !important;
}
.status {
margin-top: 8px;
font-size: 12px;
min-height: 16px;
color: #868792;
}
.status.success {
color: var(--success);
}
.status.error {
color: var(--danger);
}
.footer-nav {
position: sticky;
bottom: 0;
z-index: 15;
background: linear-gradient(180deg, rgba(250, 250, 251, 0) 0%, #fafafb 28%, #fafafb 100%);
padding: 16px 0 0;
margin-top: 26px;
}
.footer-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.btn {
height: 58px;
border-radius: 999px;
border: 0;
cursor: pointer;
font-weight: 900;
font-size: 18px;
transition: 0.2s ease;
}
.btn-secondary {
background: #fff;
border: 1px solid #d7d7de;
color: #151515;
}
.btn-primary {
background: linear-gradient(180deg, #ff1f2f 0%, #e30613 100%);
color: #fff;
box-shadow: 0 16px 28px rgba(227, 6, 19, 0.18);
}
.btn:disabled {
opacity: 0.55;
cursor: not-allowed;
box-shadow: none;
}
.modal {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.42);
display: none;
align-items: flex-end;
justify-content: center;
z-index: 50;
padding: 14px;
}
.modal.open {
display: flex;
}
.modal-card {
width: min(760px, 100%);
max-height: 88vh;
overflow: auto;
background: #fff;
border-radius: 28px;
padding: 20px;
box-shadow: var(--shadow);
}
.modal-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
margin-bottom: 14px;
}
.modal-head h3 {
margin: 0;
font-size: 22px;
font-weight: 900;
letter-spacing: -0.03em;
}
.modal-close {
border: 0;
background: #f2f3f6;
width: 42px;
height: 42px;
border-radius: 999px;
cursor: pointer;
font-size: 22px;
}
.channel-block {
margin-bottom: 16px;
}
.channel-block h4 {
margin: 0 0 8px;
font-size: 15px;
font-weight: 900;
}
.channel-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.channel-tag {
background: #f4f4f7;
border: 1px solid #e5e6eb;
border-radius: 999px;
padding: 8px 12px;
font-size: 13px;
color: #353641;
font-weight: 700;
}
.hidden {
display: none !important;
}
@media (max-width: 860px) {
.plan-hint {
display: block;
}
.plan-grid {
display: flex;
overflow-x: auto;
gap: 14px;
scroll-snap-type: x mandatory;
padding-bottom: 4px;
-webkit-overflow-scrolling: touch;
}
.plan-grid::-webkit-scrollbar {
display: none;
}
.plan-card {
min-width: 92%;
scroll-snap-align: start;
}
.plan-mobile-nav {
display: flex;
}
}
@media (max-width: 640px) {
.app {
padding-left: 10px;
padding-right: 10px;
}
.content {
padding: 18px 14px 120px;
}
h1 {
font-size: 26px;
}
.subtitle {
font-size: 14px;
}
.field-row,
.footer-actions {
grid-template-columns: 1fr;
}
.plan-card {
min-width: 100%;
}
.benefit-text {
font-size: 15px;
}
.price strong {
font-size: 30px;
}
.modal-card {
border-radius: 24px 24px 0 0;
padding-bottom: 30px;
}
}
.required {
color: var(--danger);
margin-left: 4px;
font-weight: 900;
}
.choice-grid {
display: grid;
gap: 12px;
margin-top: 22px;
}
.choice-card {
border: 1px solid var(--line);
border-radius: 20px;
background: #fff;
padding: 14px;
cursor: pointer;
transition: 0.2s ease;
display: grid;
gap: 10px;
}
.choice-card.selected {
border-color: var(--primary);
box-shadow: 0 0 0 4px rgba(227, 6, 19, 0.08);
}
.choice-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.choice-title {
font-size: 17px;
font-weight: 900;
margin: 0;
}
.choice-sub {
font-size: 14px;
color: var(--muted);
line-height: 1.35;
}
.summary-card {
background: #fff;
border: 1px solid var(--line);
border-radius: 24px;
padding: 18px;
display: grid;
gap: 12px;
margin-top: 18px;
}
.summary-card h3 {
margin: 0;
font-size: 18px;
font-weight: 900;
}
.summary-line {
display: flex;
justify-content: space-between;
gap: 12px;
font-size: 15px;
}
.summary-total {
padding-top: 12px;
border-top: 1px solid var(--line);
font-size: 19px;
font-weight: 900;
}
input[type="date"] {
min-width: 0;
width: 100%;
max-width: 100%;
-webkit-appearance: none;
appearance: none;
}
.field .input {
min-width: 0;
}
.addon-grid {
display: grid;
gap: 12px;
margin-top: 22px;
}
.addon-card {
border: 1px solid var(--line);
border-radius: 20px;
background: #fff;
padding: 14px;
cursor: pointer;
transition: 0.2s ease;
display: grid;
gap: 10px;
}
.addon-card.selected {
border-color: var(--primary);
box-shadow: 0 0 0 4px rgba(227, 6, 19, 0.08);
}
.addon-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.addon-title {
font-size: 17px;
font-weight: 900;
margin: 0;
}
.addon-sub {
font-size: 14px;
color: var(--muted);
line-height: 1.35;
}
.final-status {
margin-top: 14px;
font-size: 13px;
min-height: 18px;
}
.final-status.success {
color: var(--success);
}
.final-status.error {
color: var(--danger);
}
.success-screen {
display: none;
text-align: center;
padding: 26px 8px 6px;
}
.success-screen.active {
display: block;
}
.success-icon {
width: 82px;
height: 82px;
border-radius: 999px;
background: var(--success);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 40px;
font-weight: 900;
margin: 0 auto 18px;
box-shadow: 0 14px 28px rgba(15, 157, 88, 0.18);
}
.success-title {
margin: 0;
font-size: 28px;
line-height: 1.08;
letter-spacing: -0.04em;
font-weight: 900;
}
.success-text {
margin: 12px auto 0;
max-width: 560px;
color: var(--muted);
font-size: 15px;
line-height: 1.5;
}
.success-actions {
margin-top: 22px;
display: grid;
gap: 12px;
}
.success-note {
margin-top: 14px;
font-size: 13px;
color: var(--muted);
}
.btn-link {
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
}
</style>
</head>
<body>
<div class="app">
<div class="shell">
<div class="progress-track">
<div class="progress-bar" id="progressBar"></div>
</div>
<div class="content">
<div class="brand">SKY • Assinatura online</div>
<div class="step-tag" id="stepTag">Etapa 1 de 5</div>
<section class="step active" id="step1">
<h1>Escolha seu plano</h1>
<p class="subtitle">Compare e selecione com o plano ideal.</p>
<div class="plan-hint">Deslize para comparar os planos</div>
<div class="plan-grid" id="planGrid"></div>
<div class="plan-mobile-nav" id="planMobileNav">
<button type="button" class="plan-nav-btn" id="planPrevBtn">‹</button>
<div class="plan-dots">
<span class="plan-dot active" id="dotSuper"></span>
<span class="plan-dot" id="dotTop"></span>
</div>
<button type="button" class="plan-nav-btn" id="planNextBtn">›</button>
</div>
</section>
<section class="step" id="step2">
<h1>Endereço de instalação</h1>
<p class="subtitle">Informe o endereço completo para instalação.</p>
<div class="field-grid">
<div class="field">
<label for="cep">CEP <span class="required">*</span></label>
<input class="input" id="cep" inputmode="numeric" maxlength="9" placeholder="00000-000" />
<div class="status" id="cepStatus"></div>
</div>
<div class="field">
<label for="logradouro">Logradouro <span class="required">*</span></label>
<input class="input" id="logradouro" disabled />
</div>
<div class="field">
<label for="numero">Número <span class="required">*</span></label>
<input class="input" id="numero" inputmode="numeric" disabled />
</div>
<div class="field">
<label for="complemento">Complemento</label>
<input class="input" id="complemento" disabled />
</div>
<div class="field">
<label for="bairro">Bairro <span class="required">*</span></label>
<input class="input" id="bairro" disabled />
</div>
<div class="field">
<label for="cidade">Cidade <span class="required">*</span></label>
<input class="input" id="cidade" disabled />
</div>
<div class="field">
<label for="uf">UF <span class="required">*</span></label>
<input class="input" id="uf" maxlength="2" disabled />
</div>
</div>
</section>
<section class="step" id="step3">
<h1>Dados pessoais</h1>
<p class="subtitle">Preencha seus dados pessoais.</p>
<div class="field-grid">
<div class="field">
<label for="nome">Nome completo <span class="required">*</span></label>
<input class="input" id="nome" placeholder="Digite seu nome completo" />
</div>
<div class="field">
<label for="cpf">CPF <span class="required">*</span></label>
<input class="input" id="cpf" inputmode="numeric" maxlength="14" placeholder="000.000.000-00" />
<div class="status" id="cpfStatus"></div>
</div>
<div class="field">
<label for="nascimento">Data de nascimento <span class="required">*</span></label>
<input class="input" id="nascimento" type="date" lang="pt-BR" />
</div>
<div class="field">
<label for="telefone">Telefone <span class="required">*</span></label>
<input class="input" id="telefone" inputmode="numeric" maxlength="15" placeholder="(43) 9999-9999" />
</div>
<div class="field">
<label for="whatsapp">WhatsApp <span class="required">*</span></label>
<input class="input" id="whatsapp" inputmode="numeric" maxlength="15" placeholder="(43) 99999-9999" />
</div>
<div class="field">
<label for="email">E-mail <span class="required">*</span></label>
<input class="input" id="email" inputmode="email" placeholder="voce@exemplo.com" />
</div>
<div class="status" id="step3Status"></div>
</div>
</section>
<section class="step" id="step4">
<h1>Forma de pagamento</h1>
<p class="subtitle">
Escolha a forma de pagamento da mensalidade. PAGAMENTO 30 DIAS APÓS A INSTALAÇÃO.
</p>
<div class="choice-grid" id="paymentGrid"></div>
<div class="field-grid hidden" id="bankPanel">
<div class="field">
<label for="banco">Banco <span class="required">*</span></label>
<select class="select" id="banco">
<option value="">Selecione</option>
<option value="Itaú">Itaú</option>
<option value="Bradesco">Bradesco</option>
<option value="Santander">Santander</option>
<option value="Banco do Brasil">Banco do Brasil</option>
<option value="Sicredi">Sicredi</option>
<option value="Banrisul">Banrisul</option>
<option value="Caixa">Caixa</option>
</select>
</div>
<div class="field">
<label for="agencia">Agência <span class="required">*</span></label>
<input class="input" id="agencia" inputmode="numeric" />
</div>
<div class="field">
<label for="conta">Número da conta <span class="required">*</span></label>
<input class="input" id="conta" inputmode="numeric" />
</div>
</div>
<div class="summary-card" id="paymentSummary">
<h3>Resumo do pagamento</h3>
<div class="summary-line">
<span>Selecione uma forma de pagamento</span>
<strong>—</strong>
</div>
</div>
</section>
<section class="step" id="step5">
<h1>Conteúdos adicionais</h1>
<p class="subtitle">
Selecione os adicionais desejados, escolha se quer ponto extra e confira o resumo final.
</p>
<div class="addon-grid" id="addonGrid"></div>
<div class="choice-grid" style="margin-top: 18px">
<div class="choice-card" id="extraPointCard">
<div class="choice-top">
<h3 class="choice-title">Ponto extra</h3>
<strong>R$ 30,00/mês</strong>
</div>
<div class="choice-sub">Selecione se deseja incluir um ponto extra.</div>
</div>
</div>
<div class="summary-card" id="finalSummary">
<h3>Resumo final</h3>
<div class="summary-line">
<span>Carregando</span>
<strong>—</strong>
</div>
</div>
<div class="final-status" id="finalStatus"></div>
</section>
<section class="success-screen" id="successScreen">
<div class="success-icon">✓</div>
<h2 class="success-title">Pedido realizado com sucesso!</h2>
<p class="success-text">
Recebemos suas informações e seu pedido já está
<strong>em análise pela nossa equipe</strong>.
</p>
<p class="success-text">
Em breve entraremos em contato para
<strong>confirmar os dados e agendar a instalação da SKY</strong>.
</p>
<div class="success-actions">
<a
id="whatsFollowBtn"
class="btn btn-primary btn-link"
href="#"
target="_blank"
rel="noopener noreferrer"
>
Acompanhar pedido
</a>
</div>
<div class="success-note">Você também poderá acompanhar o andamento pelo WhatsApp.</div>
</section>
<div class="footer-nav">
<div class="footer-actions">
<button class="btn btn-secondary" id="backBtn" type="button">Voltar</button>
<button class="btn btn-primary" id="nextBtn" type="button">Continuar</button>
</div>
</div>
</div>
</div>
</div>
<div class="modal" id="channelModal">
<div class="modal-card">
<div class="modal-head">
<h3 id="channelModalTitle">Canais do plano</h3>
<button class="modal-close" id="closeModalBtn" type="button">×</button>
</div>
<div id="channelModalBody"></div>
</div>
</div>
<script>
var state = {
currentStep: 1,
selectedPlan: "super",
selectedPayment: "",
selectedAddons: [],
extraPoint: false,
isSubmitting: false,
cepAutofilled: {
logradouro: false,
bairro: false,
cidade: false,
uf: false,
},
};
var plans = [
{
id: "super",
name: "Super HD",
badge: "+ 100 CANAIS",
oldPrice: "R$ 99,90",
introPrice: "R$ 59,90",
benefits: [
"Mais de 100 canais de TV",
"1 equipamento e acesso SKY+ sem custo adicional",
"Inclui Prime Video, Amazon Music e muito mais",
"Taxa de adesao gratis no cartao de credito ou debito em conta",
],
},
{
id: "top",
name: "Top HD",
badge: "+ 160 CANAIS",
oldPrice: "R$ 159,90",
introPrice: "R$ 119,90",
benefits: [
"Mais de 160 canais de TV por assinatura e TV aberta",
"1 equipamento e acesso SKY+ sem custo adicional",
"Inclui Prime Video, Amazon Music e muito mais",
"Taxa de adesao gratis no cartao de credito ou debito em conta",
],
},
];
var channelLists = {
super: {
"Abertos e obrigatórios": [
"Globo*","SBT","Record","Band","RedeTV!","TV Brasil","TV Câmara","TV Justiça","Futura","Gazeta",
"AgroCanal","Terraviva","Canal do Boi","GE TV","Rede Brasil","TV Cultura","CGTN","X Sports"
],
"Religiosos": [
"RIT","Canção Nova","RBI TV","Fonte","TV Aparecida","TV Pai Eterno","TV Evangelizar","Rede Mundial","RedeVida"
],
"Filmes e séries": [
"Megapix","Warner Channel","TNT","Sony Channel","Universal TV","Canal Brasil","Prime Box Brazil"
],
Esportes: ["SporTV 2"],
"Infantil e família": ["Gloob","Cartoon Network","Discovery Kids","Box Kids"],
Variedades: ["GNT","Globoplay Novelas","Modo Viagem","Fish TV","Multishow","Travel Box Brazil","Play TV"],
"Cultura e documentários": ["Discovery Channel"],
Notícias: ["GloboNews","CNN Brasil","C3 TV","Record News","SBT News"],
"Áudio": ["32 Canais de Música"],
"Apps e benefícios": ["Amazon Prime Video","Amazon Music","Prime Reading","SKY+"],
},
top: {
"Abertos e obrigatórios": [
"Globo*","SBT","Record","Band","RedeTV!","TV Brasil","TV Câmara","TV Justiça","Futura","Gazeta",
"AgroCanal","Terraviva","Canal do Boi","GE TV","Rede Brasil","TV Cultura","CGTN","X Sports"
],
"Religiosos": [
"RIT","Canção Nova","RBI TV","Fonte","TV Aparecida","TV Pai Eterno","TV Evangelizar","Rede Mundial","RedeVida"
],
"Filmes e séries": [
"Megapix","Warner Channel","TNT","Sony Channel","Universal TV","Canal Brasil","Prime Box Brazil",
"AXN","Space","TNT Novelas","TNT Series","Sony Movies","AMC","AMC Series","USA Network","Studio Universal","Cinemax"
],
Esportes: [
"SporTV 2","SporTV","SporTV 3","Bandsports","Golf Channel","ESPN","ESPN 2","ESPN 3","ESPN 4","ESPN 5","Rede 21"
],
"Infantil e família": [
"Gloob","Cartoon Network","Discovery Kids","Box Kids","Cartoonito","Dum Dum","Gloobinho"
],
Variedades: [
"GNT","Globoplay Novelas","Modo Viagem","Fish TV","Multishow","Travel Box Brazil","Play TV","BIS",
"Home & Health","Turbo","TLC","Canal Off","ID","Food Network","A&E","HGTV","Sabor & Arte","Lifetime",
"Adult Swim","Canal UOL","Music Box Brazil","FashionTV"
],
"Cultura e documentários": [
"Discovery Channel","Animal Planet","Theater Discovery","Science Discovery","World Discovery","Arte 1","History","H2 History"
],
Notícias: [
"GloboNews","CNN Brasil","C3 TV","Record News","SBT News","CNN Internacional","Agro+","BandNews","JP News",
"Bloomberg Television","Times Brasil","CNBC","CNN Money","Sky News","BBC News"
],
"Áudio": ["32 Canais de Música"],
"Apps e benefícios": ["Amazon Prime Video","Amazon Music","Prime Reading","SKY+"],
},
};
var paymentLabels = {
credito: "Cartão de crédito",
debito: "Débito em conta",
boleto: "Boleto",
};
var paymentPrices = {
super: {
credito: { adesao: 0.0, mensalidade: 59.9 },
debito: { adesao: 0.0, mensalidade: 59.9 },
boleto: { adesao: 19.9, mensalidade: 79.9 },
},
top: {
credito: { adesao: 0.0, mensalidade: 119.9 },
debito: { adesao: 0.0, mensalidade: 119.9 },
boleto: { adesao: 19.9, mensalidade: 139.9 },
},
};
var addons = [
{ id: "hbo_max", name: "HBO Max", price: 22.45, detail: "App completo" },
{ id: "telecine", name: "Telecine", price: 29.9, detail: "6 canais" },
{ id: "premiere", name: "Premiere", price: 49.9, detail: "8 canais" },
{ id: "disney", name: "Disney+", price: 46.9, detail: "App completo" },
{ id: "paramount", name: "Paramount+", price: 27.9, detail: "" },
{ id: "combate", name: "Combate", price: 34.9, detail: "" },
{ id: "sportynet", name: "SportyNet", price: 29.9, detail: "" },
{ id: "sexy_hot", name: "Sexy Hot", price: 19.9, detail: "" },
{ id: "playboy", name: "Playboy TV", price: 19.9, detail: "" },
{ id: "sexprive", name: "SexPrive", price: 19.9, detail: "" },
];
function onlyDigits(value) {
return String(value || "").replace(/\D/g, "");
}
function formatCep(value) {
var digits = onlyDigits(value).slice(0, 8);
if (digits.length > 5) {
return digits.replace(/(\d{5})(\d{1,3})/, "$1-$2");
}
return digits;
}
function money(value) {
return Number(value || 0).toLocaleString("pt-BR", {
style: "currency",
currency: "BRL",
});
}
function getSelectedPaymentPricing() {
if (!state.selectedPayment) return null;
return paymentPrices[state.selectedPlan][state.selectedPayment];
}
function getSelectedAddonObjects() {
return addons.filter(function (item) {
return state.selectedAddons.indexOf(item.id) > -1;
});
}
function getAddonsTotal() {
return getSelectedAddonObjects().reduce(function (acc, item) {
return acc + item.price;
}, 0);
}
function getExtraPointTotal() {
return state.extraPoint ? 30 : 0;
}
function getFinalMonthlyTotal() {
var pricing = getSelectedPaymentPricing();
var mensalidade = pricing ? pricing.mensalidade : 0;
return mensalidade + getAddonsTotal() + getExtraPointTotal();
}
function normalizePaymentLabel(value) {
return paymentLabels[value] || "";
}
function formatNascimentoForApi(value) {
return value || "";
}
function formatPhone(value) {
var digits = onlyDigits(value).slice(0, 11);
if (digits.length <= 2) return digits;
if (digits.length <= 6) return digits.replace(/(\d{2})(\d+)/, "($1) $2");
if (digits.length <= 10) return digits.replace(/(\d{2})(\d{4})(\d+)/, "($1) $2-$3");
return digits.replace(/(\d{2})(\d{5})(\d+)/, "($1) $2-$3");
}
function formatCpf(value) {
var digits = onlyDigits(value).slice(0, 11);
if (digits.length <= 3) return digits;
if (digits.length <= 6) return digits.replace(/(\d{3})(\d+)/, "$1.$2");
if (digits.length <= 9) return digits.replace(/(\d{3})(\d{3})(\d+)/, "$1.$2.$3");
return digits.replace(/(\d{3})(\d{3})(\d{3})(\d{1,2})/, "$1.$2.$3-$4");
}
function isValidEmail(value) {
return /^\S+@\S+\.\S+$/.test(String(value || "").trim());
}
function isValidCpf(value) {
var digits = onlyDigits(value);
if (!/^\d{11}$/.test(digits)) return false;
if (/^(\d)\1{10}$/.test(digits)) return false;
var sum = 0;
var i;
for (i = 0; i < 9; i++) sum += Number(digits.charAt(i)) * (10 - i);
var rev = 11 - (sum % 11);
if (rev >= 10) rev = 0;
if (rev !== Number(digits.charAt(9))) return false;
sum = 0;
for (i = 0; i < 10; i++) sum += Number(digits.charAt(i)) * (11 - i);
rev = 11 - (sum % 11);
if (rev >= 10) rev = 0;
return rev === Number(digits.charAt(10));
}
function renderPlans() {
var grid = document.getElementById("planGrid");
grid.innerHTML = "";
plans.forEach(function (plan) {
var card = document.createElement("article");
card.className = "plan-card" + (state.selectedPlan === plan.id ? " selected" : "");
var benefitsHtml = "";
plan.benefits.forEach(function (item) {
benefitsHtml +=
'<div class="benefit">' +
'<div class="check">✓</div>' +
'<div class="benefit-text">' + item + "</div>" +
"</div>";
});
card.innerHTML =
'<div class="plan-head">' +
'<h3 class="plan-name">' + plan.name + "</h3>" +
'<button class="pill pill-action" type="button" data-open-plan="' + plan.id + '">' +
plan.badge + " • VER LISTA" +
"</button>" +
"</div>" +
'<div class="section-line"><strong>Benefícios</strong><span></span></div>' +
'<div class="benefits">' + benefitsHtml + "</div>" +
'<div class="price-row">' +
'<div class="old-price">De ' + plan.oldPrice + "</div>" +
'<div class="price"><strong>' + plan.introPrice + "</strong><span>/mês</span></div>" +
"</div>";
card.addEventListener("click", function (e) {
if (e.target.closest("[data-open-plan]")) return;
state.selectedPlan = plan.id;
renderPlans();
updateDots();
syncMobileScroll();
});
grid.appendChild(card);
});
document.querySelectorAll("[data-open-plan]").forEach(function (btn) {
btn.addEventListener("click", function (e) {
e.stopPropagation();
openChannelsModal(btn.getAttribute("data-open-plan"));
});
});
}
function renderPayments() {
var grid = document.getElementById("paymentGrid");
var bankPanel = document.getElementById("bankPanel");
if (!grid) return;
grid.innerHTML = "";
Object.keys(paymentLabels).forEach(function (key) {
var pricing = paymentPrices[state.selectedPlan][key];
var card = document.createElement("div");
card.className = "choice-card" + (state.selectedPayment === key ? " selected" : "");
card.innerHTML =
'<div class="choice-top">' +
'<h3 class="choice-title">' + paymentLabels[key] + "</h3>" +
"<strong>" + money(pricing.mensalidade) + "/mês</strong>" +
"</div>" +
'<div class="choice-sub">Taxa de adesão: ' + money(pricing.adesao) + "</div>";
card.addEventListener("click", function () {
state.selectedPayment = key;
renderPayments();
renderPaymentSummary();
});
grid.appendChild(card);
});
if (bankPanel) {
bankPanel.classList.toggle("hidden", state.selectedPayment !== "debito");
}
}
function renderPaymentSummary() {
var box = document.getElementById("paymentSummary");
if (!box) return;
var pricing = getSelectedPaymentPricing();
if (!pricing) {
box.innerHTML =
"<h3>Resumo do pagamento</h3>" +
'<div class="summary-line"><span>Selecione uma forma de pagamento</span><strong>—</strong></div>';
return;
}
box.innerHTML =
"<h3>Resumo do pagamento</h3>" +
'<div class="summary-line"><span>Plano</span><strong>' + getPlanName(state.selectedPlan) + "</strong></div>" +
'<div class="summary-line"><span>Forma de pagamento</span><strong>' + paymentLabels[state.selectedPayment] + "</strong></div>" +
'<div class="summary-line"><span>Mensalidade</span><strong>' + money(pricing.mensalidade) + "/mês</strong></div>" +
'<div class="summary-line summary-total"><span>Taxa de adesão</span><strong>' + money(pricing.adesao) + "</strong></div>";
}
function renderAddons() {
var grid = document.getElementById("addonGrid");
if (!grid) return;
grid.innerHTML = "";
addons.forEach(function (item) {
var selected = state.selectedAddons.indexOf(item.id) > -1;
var card = document.createElement("div");
card.className = "addon-card" + (selected ? " selected" : "");
card.innerHTML =
'<div class="addon-top">' +
'<h3 class="addon-title">' + item.name + "</h3>" +
"<strong>" + money(item.price) + "/mês</strong>" +
"</div>" +
'<div class="addon-sub">' + (item.detail || "Conteúdo adicional") + "</div>";
card.addEventListener("click", function () {
if (selected) {
state.selectedAddons = state.selectedAddons.filter(function (id) {
return id !== item.id;
});
} else {
state.selectedAddons.push(item.id);
}
renderAddons();
renderFinalSummary();
});
grid.appendChild(card);
});
}
function renderExtraPoint() {
var card = document.getElementById("extraPointCard");
if (!card) return;
card.classList.toggle("selected", state.extraPoint);
card.onclick = function () {
state.extraPoint = !state.extraPoint;
renderExtraPoint();
renderFinalSummary();
};
}
function renderFinalSummary() {
var box = document.getElementById("finalSummary");
if (!box) return;
var pricing = getSelectedPaymentPricing();
var addonNames = getSelectedAddonObjects().map(function (item) {
return item.name;
});
box.innerHTML =
"<h3>Resumo final</h3>" +
'<div class="summary-line"><span>Plano</span><strong>' + getPlanName(state.selectedPlan) + "</strong></div>" +
'<div class="summary-line"><span>Forma de pagamento</span><strong>' + normalizePaymentLabel(state.selectedPayment) + "</strong></div>" +
'<div class="summary-line"><span>Mensalidade do plano</span><strong>' + (pricing ? money(pricing.mensalidade) : "—") + "</strong></div>" +
'<div class="summary-line"><span>Taxa de adesão</span><strong>' + (pricing ? money(pricing.adesao) : "—") + "</strong></div>" +
'<div class="summary-line"><span>Adicionais</span><strong>' + (addonNames.length ? addonNames.join(", ") : "Nenhum") + "</strong></div>" +
'<div class="summary-line"><span>Total adicionais</span><strong>' + money(getAddonsTotal()) + "/mês</strong></div>" +
'<div class="summary-line"><span>Ponto extra</span><strong>' + (state.extraPoint ? "Sim (+ " + money(30) + "/mês)" : "Não") + "</strong></div>" +
'<div class="summary-line summary-total"><span>Total mensal</span><strong>' + money(getFinalMonthlyTotal()) + "/mês</strong></div>";
}
function buildPayloadForSubmit() {
var cep = document.getElementById("cep").value.trim();
var logradouro = document.getElementById("logradouro").value.trim();
var numero = document.getElementById("numero").value.trim();
var complemento = document.getElementById("complemento").value.trim();
var bairro = document.getElementById("bairro").value.trim();
var cidade = document.getElementById("cidade").value.trim();
var uf = document.getElementById("uf").value.trim();
var nome = document.getElementById("nome").value.trim();
var cpf = document.getElementById("cpf").value.trim();
var nascimento = formatNascimentoForApi(document.getElementById("nascimento").value);
var telefone = document.getElementById("telefone").value.trim();
var whatsapp = document.getElementById("whatsapp").value.trim();
var email = document.getElementById("email").value.trim();
var banco = document.getElementById("banco").value.trim();
var agencia = document.getElementById("agencia").value.trim();
var conta = document.getElementById("conta").value.trim();
var addonNames = getSelectedAddonObjects().map(function (item) {
return item.name;
});
var planoNome = getPlanName(state.selectedPlan);
var adicionaisTexto = [planoNome].concat(addonNames).join(" - ");
var fachada = numero;
if (complemento) {
fachada = numero + " - " + complemento;
}
return {
plan: state.selectedPlan,
cep: cep,
logradouro: logradouro,
numero: numero,
complemento: complemento,
bairro: bairro,
cidade: cidade,
uf: uf,
nome: nome,
cpf: cpf,
nascimento: nascimento,
telefone: telefone,
whatsapp: whatsapp,
email: email,
formaPagamento: state.selectedPayment,
banco: banco,
agencia: agencia,
conta: conta,
addons: state.selectedAddons.slice(),
pontos: state.extraPoint ? 1 : 0,
fachada: fachada,
adicionaisTexto: adicionaisTexto
};
}
function buildWhatsFollowLink() {
var numero = "5511920076473";
var nome = document.getElementById("nome").value.trim() || "Cliente";
var plano = getPlanName(state.selectedPlan) || "SKY";
var mensagem =
"Olá, acabei de realizar uma contratação da SKY pelo formulário online. " +
"Gostaria de acompanhar meu pedido.\n\n" +
"Nome: " + nome + "\n" +
"Plano: " + plano;
return "https://wa.me/" + numero + "?text=" + encodeURIComponent(mensagem);
}
function showSuccessScreen() {
var successScreen = document.getElementById("successScreen");
var footerNav = document.querySelector(".footer-nav");
var stepTag = document.getElementById("stepTag");
var steps = document.querySelectorAll(".step");
var whatsFollowBtn = document.getElementById("whatsFollowBtn");
steps.forEach(function (step) {
step.classList.remove("active");
});
if (footerNav) footerNav.style.display = "none";
if (stepTag) stepTag.textContent = "Pedido concluído";
if (whatsFollowBtn) whatsFollowBtn.href = buildWhatsFollowLink();
successScreen.classList.add("active");
window.scrollTo({
top: 0,
behavior: "smooth",
});
}
async function submitViaAppsScript(payload) {
var response = await fetch("/api/lead", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(payload),
});
var text = await response.text();
var data = {};
try {
data = JSON.parse(text || "{}");
} catch (e) {
throw new Error("Resposta inválida do servidor.");
}
if (!response.ok || !data.ok) {
throw new Error(data.error || "Erro ao enviar solicitação.");
}
return data;
}
function openChannelsModal(planId) {
var title = document.getElementById("channelModalTitle");
var body = document.getElementById("channelModalBody");
var modal = document.getElementById("channelModal");
title.textContent = "Canais do plano • " + getPlanName(planId);
var html = "";
var groups = channelLists[planId];
Object.keys(groups).forEach(function (category) {
html += '<div class="channel-block">';
html += "<h4>" + category + "</h4>";
html += '<div class="channel-tags">';
groups[category].forEach(function (item) {
html += '<span class="channel-tag">' + item + "</span>";
});
html += "</div></div>";
});
body.innerHTML = html;
modal.classList.add("open");
}
function closeChannelsModal() {
document.getElementById("channelModal").classList.remove("open");
}
function getPlanName(planId) {
for (var i = 0; i < plans.length; i++) {
if (plans[i].id === planId) return plans[i].name;
}
return "";
}
function updateDots() {
var dotSuper = document.getElementById("dotSuper");
var dotTop = document.getElementById("dotTop");
if (state.selectedPlan === "super") {
dotSuper.classList.add("active");
dotTop.classList.remove("active");
} else {
dotSuper.classList.remove("active");
dotTop.classList.add("active");
}
}
function syncMobileScroll() {
var grid = document.getElementById("planGrid");
if (window.innerWidth > 860) return;
var targetIndex = state.selectedPlan === "super" ? 0 : 1;
var cards = grid.querySelectorAll(".plan-card");
if (cards[targetIndex]) {
cards[targetIndex].scrollIntoView({
behavior: "smooth",
inline: "start",
block: "nearest",
});
}
}
function bindPlanMobileNav() {
var prevBtn = document.getElementById("planPrevBtn");
var nextBtn = document.getElementById("planNextBtn");
prevBtn.addEventListener("click", function () {
state.selectedPlan = "super";
renderPlans();
updateDots();
syncMobileScroll();
});
nextBtn.addEventListener("click", function () {
state.selectedPlan = "top";
renderPlans();
updateDots();
syncMobileScroll();
});
}
function setAddressEnabled(enabled) {
var ids = ["logradouro", "numero", "complemento", "bairro", "cidade", "uf"];
ids.forEach(function (id) {
document.getElementById(id).disabled = !enabled;
});
}
function setReadonly(id, readonly) {
var input = document.getElementById(id);
input.readOnly = readonly;
input.classList.toggle("readonly-field", readonly);
}
function clearAddressFields() {
["logradouro", "numero", "complemento", "bairro", "cidade", "uf"].forEach(function (id) {
var input = document.getElementById(id);
input.value = "";
setReadonly(id, false);
});
state.cepAutofilled = {
logradouro: false,
bairro: false,
cidade: false,
uf: false,
};
}
function resetAddressLockedState() {
clearAddressFields();
setAddressEnabled(false);
document.getElementById("cepStatus").textContent = "";
document.getElementById("cepStatus").className = "status";
}
async function lookupCepDirect(cep) {
var cleanCep = onlyDigits(cep);
var response = await fetch("https://brasilapi.com.br/api/cep/v2/" + cleanCep, {
method: "GET",
});
if (!response.ok) {
throw new Error("CEP não encontrado");
}
return await response.json();
}
var cepTimer = null;
async function handleCepLookup() {
var cep = document.getElementById("cep").value;
var cleanCep = onlyDigits(cep);
var cepStatus = document.getElementById("cepStatus");
if (cleanCep.length !== 8) return;
cepStatus.textContent = "Consultando CEP...";
cepStatus.className = "status";
try {
var data = await lookupCepDirect(cleanCep);
setAddressEnabled(true);
var street = data.street || "";
var neighborhood = data.neighborhood || "";
var city = data.city || "";
var stateUF = data.state || "";
document.getElementById("logradouro").value = street;
document.getElementById("bairro").value = neighborhood;
document.getElementById("cidade").value = city;
document.getElementById("uf").value = stateUF;
setReadonly("logradouro", !!street);
setReadonly("bairro", !!neighborhood);
setReadonly("cidade", !!city);
setReadonly("uf", !!stateUF);
setReadonly("numero", false);
setReadonly("complemento", false);
state.cepAutofilled = {
logradouro: !!street,
bairro: !!neighborhood,
cidade: !!city,
uf: !!stateUF,
};
var msg = "Endereço encontrado. Informe número e complemento.";
if (!street && !neighborhood) {
msg = "CEP localizado. Preencha logradouro, bairro, número e complemento.";
} else if (!street) {
msg = "CEP localizado. Preencha o logradouro e o número.";
} else if (!neighborhood) {
msg = "CEP localizado. Preencha o bairro e o número.";
}
cepStatus.textContent = msg;
cepStatus.className = "status success";
} catch (error) {
setAddressEnabled(true);
clearAddressFields();
setReadonly("cidade", false);
setReadonly("uf", false);
cepStatus.textContent = "CEP não encontrado. Preencha o endereço manualmente.";
cepStatus.className = "status error";
}
}
function validateStep1() {
return !!state.selectedPlan;
}
function validateStep2() {
var cep = document.getElementById("cep").value.trim();
var logradouro = document.getElementById("logradouro").value.trim();
var numero = document.getElementById("numero").value.trim();
var bairro = document.getElementById("bairro").value.trim();
var cidade = document.getElementById("cidade").value.trim();
var uf = document.getElementById("uf").value.trim();
var cepStatus = document.getElementById("cepStatus");
if (onlyDigits(cep).length !== 8) {
cepStatus.textContent = "Informe um CEP válido.";
cepStatus.className = "status error";
return false;
}
if (!logradouro) {
cepStatus.textContent = "Informe o logradouro.";
cepStatus.className = "status error";
return false;
}
if (!numero) {
cepStatus.textContent = "Informe o número.";
cepStatus.className = "status error";
return false;
}
if (!bairro) {
cepStatus.textContent = "Informe o bairro.";
cepStatus.className = "status error";
return false;
}
if (!cidade) {
cepStatus.textContent = "Informe a cidade.";
cepStatus.className = "status error";
return false;
}
if (!uf) {
cepStatus.textContent = "Informe a UF.";
cepStatus.className = "status error";
return false;
}
return true;
}
function validateStep3() {
var nome = document.getElementById("nome").value.trim();
var telefone = document.getElementById("telefone").value.trim();
var whatsapp = document.getElementById("whatsapp").value.trim();
var email = document.getElementById("email").value.trim();
var cpf = document.getElementById("cpf").value.trim();
var nascimento = document.getElementById("nascimento").value;
var cpfStatus = document.getElementById("cpfStatus");
var step3Status = document.getElementById("step3Status");
cpfStatus.textContent = "";
cpfStatus.className = "status";
step3Status.textContent = "";
step3Status.className = "status";
if (!nome) {
step3Status.textContent = "Informe o nome completo.";
step3Status.className = "status error";
return false;
}
if (!isValidCpf(cpf)) {
cpfStatus.textContent = "Informe um CPF válido.";
cpfStatus.className = "status error";
return false;
}
if (!nascimento) {
step3Status.textContent = "Informe a data de nascimento.";
step3Status.className = "status error";
return false;
}
if (onlyDigits(telefone).length < 10) {
step3Status.textContent = "Informe um telefone válido.";
step3Status.className = "status error";
return false;
}
if (onlyDigits(whatsapp).length < 10) {
step3Status.textContent = "Informe um WhatsApp válido.";
step3Status.className = "status error";
return false;
}
if (!isValidEmail(email)) {
step3Status.textContent = "Informe um e-mail válido.";
step3Status.className = "status error";
return false;
}
return true;
}
function validateStep4() {
if (!state.selectedPayment) {
alert("Selecione uma forma de pagamento.");
return false;
}
if (state.selectedPayment === "debito") {
var banco = document.getElementById("banco").value.trim();
var agencia = document.getElementById("agencia").value.trim();
var conta = document.getElementById("conta").value.trim();
if (!banco) {
alert("Selecione o banco.");
return false;
}
if (!agencia) {
alert("Informe a agência.");
return false;
}
if (!conta) {
alert("Informe o número da conta.");
return false;
}
}
return true;
}
function validateStep5() {
return true;
}
function updateStep() {
var step1 = document.getElementById("step1");
var step2 = document.getElementById("step2");
var step3 = document.getElementById("step3");
var step4 = document.getElementById("step4");
var step5 = document.getElementById("step5");
var successScreen = document.getElementById("successScreen");
var stepTag = document.getElementById("stepTag");
var progressBar = document.getElementById("progressBar");
var backBtn = document.getElementById("backBtn");
var nextBtn = document.getElementById("nextBtn");
var footerNav = document.querySelector(".footer-nav");
step1.classList.remove("active");
step2.classList.remove("active");
step3.classList.remove("active");
step4.classList.remove("active");
step5.classList.remove("active");
if (successScreen) {
successScreen.classList.remove("active");
}
if (footerNav) {
footerNav.style.display = "";
}
if (state.currentStep === 1) {
step1.classList.add("active");
} else if (state.currentStep === 2) {
step2.classList.add("active");
} else if (state.currentStep === 3) {
step3.classList.add("active");
} else if (state.currentStep === 4) {
step4.classList.add("active");
} else {
step5.classList.add("active");
}
stepTag.textContent = "Etapa " + state.currentStep + " de 5";
progressBar.style.width = (state.currentStep / 5) * 100 + "%";
backBtn.disabled = state.currentStep === 1 || state.isSubmitting;
nextBtn.textContent = state.currentStep === 5 ? "Finalizar contratação" : "Continuar";
nextBtn.disabled = !!state.isSubmitting;
}
function bindStep2Events() {
var cep = document.getElementById("cep");
cep.addEventListener("input", function (e) {
e.target.value = formatCep(e.target.value);
clearTimeout(cepTimer);
if (onlyDigits(e.target.value).length === 8) {
cepTimer = setTimeout(handleCepLookup, 180);
} else {
resetAddressLockedState();
}
});
}
function bindStep3Events() {
var telefone = document.getElementById("telefone");
var whatsapp = document.getElementById("whatsapp");
var cpf = document.getElementById("cpf");
var cpfStatus = document.getElementById("cpfStatus");
telefone.addEventListener("input", function (e) {
e.target.value = formatPhone(e.target.value);
});
whatsapp.addEventListener("input", function (e) {
e.target.value = formatPhone(e.target.value);
});
cpf.addEventListener("input", function (e) {
e.target.value = formatCpf(e.target.value);
if (!e.target.value) {
cpfStatus.textContent = "";
cpfStatus.className = "status";
return;
}
if (onlyDigits(e.target.value).length === 11) {
var valid = isValidCpf(e.target.value);
cpfStatus.textContent = valid ? "CPF válido." : "CPF inválido.";
cpfStatus.className = "status " + (valid ? "success" : "error");
} else {
cpfStatus.textContent = "";
cpfStatus.className = "status";
}
});
}
function bindGlobalEvents() {
document.getElementById("backBtn").addEventListener("click", function () {
if (state.currentStep > 1) {
state.currentStep--;
updateStep();
}
});
document.getElementById("nextBtn").addEventListener("click", async function () {
if (state.isSubmitting) return;
if (state.currentStep === 1) {
if (!validateStep1()) return;
state.currentStep = 2;
updateStep();
return;
}
if (state.currentStep === 2) {
if (!validateStep2()) return;
state.currentStep = 3;
updateStep();
return;
}
if (state.currentStep === 3) {
if (!validateStep3()) return;
state.currentStep = 4;
updateStep();
renderPayments();
renderPaymentSummary();
return;
}
if (state.currentStep === 4) {
if (!validateStep4()) return;
state.currentStep = 5;
updateStep();
renderAddons();
renderExtraPoint();
renderFinalSummary();
return;
}
if (state.currentStep === 5) {
if (!validateStep5()) return;
var status = document.getElementById("finalStatus");
status.textContent = "";
status.className = "final-status";
state.isSubmitting = true;
updateStep();
try {
await submitViaAppsScript(buildPayloadForSubmit());
status.textContent = "";
status.className = "final-status";
showSuccessScreen();
} catch (error) {
status.textContent = error && error.message ? error.message : "Erro ao enviar solicitação.";
status.className = "final-status error";
state.isSubmitting = false;
updateStep();
}
}
});
document.getElementById("closeModalBtn").addEventListener("click", closeChannelsModal);
document.getElementById("channelModal").addEventListener("click", function (e) {
if (e.target.id === "channelModal") {
closeChannelsModal();
}
});
}
function init() {
renderPlans();
updateDots();
updateStep();
bindPlanMobileNav();
bindGlobalEvents();
bindStep2Events();
bindStep3Events();
resetAddressLockedState();
renderPayments();
renderPaymentSummary();
renderAddons();
renderExtraPoint();
renderFinalSummary();
setTimeout(syncMobileScroll, 50);
}
document.addEventListener("DOMContentLoaded", init);
</script>
</body>
</html>