Add 1 files

index.html

@@ -200,10 +200,10 @@
         .pix-form.active {
             display: block;
         }
-        .pagarme-form {
+        .pagar-me-form {
             display: none;
         }
-        .pagarme-form.active {
+        .pagar-me-form.active {
             display: block;
         }
         .card-element {
@@ -785,13 +785,13 @@
                             <p class="text-sm text-gray-400">Pagamento instantâneo via PIX</p>
                         </div>
                     </div>
-                    <div class="payment-method" data-method="pagarme">
+                    <div class="payment-method" data-method="pagar_me">
                         <div class="payment-icon gradient-bg">
                             <i class="fas fa-credit-card text-white"></i>
                         </div>
                         <div>
                             <h4 class="font-medium">Pagar.me</h4>
-                            <p class="text-sm text-gray-400">Pagamento seguro com Pagar.me</p>
+                            <p class="text-sm text-gray-400">Pagamento via Pagar.me (cartão ou boleto)</p>
                         </div>
                     </div>
                 </div>
@@ -817,28 +817,18 @@
                     </button>
                 </div>
                 
-                <div id="pagarmeForm" class="pagarme-form">
-                    <div class="mb-4">
-                        <label for="pagarme-card-number" class="block text-gray-300 mb-2">Número do Cartão</label>
-                        <input type="text" id="pagarme-card-number" class="w-full px-4 py-2 bg-gray-800 rounded-lg border border-gray-700 focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="4242 4242 4242 4242">
-                    </div>
-                    <div class="grid grid-cols-2 gap-4 mb-4">
-                        <div>
-                            <label for="pagarme-card-expiry" class="block text-gray-300 mb-2">Validade</label>
-                            <input type="text" id="pagarme-card-expiry" class="w-full px-4 py-2 bg-gray-800 rounded-lg border border-gray-700 focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="MM/AA">
-                        </div>
-                        <div>
-                            <label for="pagarme-card-cvv" class="block text-gray-300 mb-2">CVV</label>
-                            <input type="text" id="pagarme-card-cvv" class="w-full px-4 py-2 bg-gray-800 rounded-lg border border-gray-700 focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="123">
+                <div id="pagarMeForm" class="pagar-me-form">
+                    <div class="text-center mb-4">
+                        <p class="text-gray-300 mb-2">Você será redirecionado para o Pagar.me para finalizar o pagamento</p>
+                        <div class="flex justify-center space-x-4">
+                            <button id="pagarMeCreditCard" class="gradient-bg text-white py-2 px-4 rounded-lg hover:opacity-90 transition">
+                                Cartão de Crédito
+                            </button>
+                            <button id="pagarMeBoleto" class="bg-gray-700 text-white py-2 px-4 rounded-lg hover:bg-gray-600 transition">
+                                Boleto Bancário
+                            </button>
                         </div>
                     </div>
-                    <div class="mb-4">
-                        <label for="pagarme-card-name" class="block text-gray-300 mb-2">Nome no Cartão</label>
-                        <input type="text" id="pagarme-card-name" class="w-full px-4 py-2 bg-gray-800 rounded-lg border border-gray-700 focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="Nome como no cartão">
-                    </div>
-                    <button id="submitPagarmePayment" class="w-full gradient-bg text-white py-2 px-4 rounded-lg hover:opacity-90 transition">
-                        Pagar com Pagar.me
-                    </button>
                 </div>
                 
                 <div class="text-center mt-6">
@@ -857,7 +847,7 @@
         const API_CONFIG = {
             baseUrl: 'https://api.spysmartai.com/v1',
             stripePublicKey: 'pk_test_your_stripe_public_key_here',
-            pagarmeEncryptionKey: 'ek_test_your_pagarme_encryption_key_here',
+            pagarmePublicKey: 'pk_test_your_pagarme_public_key_here',
             mistralApiKey: 'sk_your_mistral_api_key_here',
             n8nWebhookUrl: 'https://your-n8n-instance.com/webhook/path',
             competitorEndpoint: 'https://seu-replit.seu-usuario.repl.co/add-competitor'
@@ -922,12 +912,13 @@
         const paymentMethods = document.querySelectorAll('.payment-method');
         const creditCardForm = document.getElementById('creditCardForm');
         const pixForm = document.getElementById('pixForm');
-        const pagarmeForm = document.getElementById('pagarmeForm');
+        const pagarMeForm = document.getElementById('pagarMeForm');
+        const pagarMeCreditCard = document.getElementById('pagarMeCreditCard');
+        const pagarMeBoleto = document.getElementById('pagarMeBoleto');
         const planCounter = document.getElementById('planCounter');
         const analysisCount = document.getElementById('analysisCount');
         const analysisLimit = document.getElementById('analysisLimit');
         const selectPlanBtns = document.querySelectorAll('.select-plan-btn');
-        const submitPagarmePayment = document.getElementById('submitPagarmePayment');
 
         // =============================================
         // EVENT LISTENERS
@@ -950,7 +941,8 @@
         selectPlanBtns.forEach(btn => {
             btn.addEventListener('click', handlePlanSelection);
         });
-        submitPagarmePayment.addEventListener('click', handlePagarmePayment);
+        pagarMeCreditCard?.addEventListener('click', () => processPagarMePayment('credit_card'));
+        pagarMeBoleto?.addEventListener('click', () => processPagarMePayment('boleto'));
 
         // Initialize Stripe
         const stripe = Stripe(API_CONFIG.stripePublicKey);
@@ -958,24 +950,6 @@
         const cardElement = elements.create('card');
         cardElement.mount('#card-element');
 
-        // Initialize Pagar.me Checkout
-        const pagarmeCheckout = new PagarMeCheckout.Checkout({
-            encryption_key: API_CONFIG.pagarmeEncryptionKey,
-            success: function(data) {
-                console.log('Pagamento via Pagar.me realizado com sucesso:', data);
-                alert('Pagamento realizado com sucesso! Seu plano Pro foi ativado.');
-                upgradeUserPlan();
-                hideUpgradeModal();
-            },
-            error: function(err) {
-                console.error('Erro no pagamento via Pagar.me:', err);
-                alert('Erro ao processar pagamento: ' + err.message);
-            },
-            close: function() {
-                console.log('Modal Pagar.me fechado');
-            }
-        });
-
         // =============================================
         // FUNÇÕES PRINCIPAIS
         // =============================================
@@ -1068,15 +1042,15 @@
             // Hide all forms first
             creditCardForm.classList.remove('active');
             pixForm.classList.remove('active');
-            pagarmeForm.classList.remove('active');
+            pagarMeForm.classList.remove('active');
             
             // Show selected form
             if (methodType === 'credit_card') {
                 creditCardForm.classList.add('active');
             } else if (methodType === 'pix') {
                 pixForm.classList.add('active');
-            } else if (methodType === 'pagarme') {
-                pagarmeForm.classList.add('active');
+            } else if (methodType === 'pagar_me') {
+                pagarMeForm.classList.add('active');
             }
         }
 
@@ -1102,6 +1076,79 @@
             }
         }
 
+        function processPagarMePayment(paymentMethod) {
+            // Configuração do checkout Pagar.me
+            const checkout = new PagarMeCheckout.Checkout({
+                encryption_key: API_CONFIG.pagarmePublicKey,
+                success: function(data) {
+                    alert('Pagamento realizado com sucesso! ID da transação: ' + data.id);
+                    hideUpgradeModal();
+                    // Atualizar o plano do usuário para Pro
+                    if (currentUser) {
+                        currentUser.plan = 'pro';
+                        localStorage.setItem('currentUser', JSON.stringify(currentUser));
+                        alert('Seu plano foi atualizado para Pro com sucesso!');
+                        updatePlanCounter();
+                    }
+                },
+                error: function(err) {
+                    console.error('Erro no pagamento:', err);
+                    alert('Ocorreu um erro ao processar seu pagamento. Por favor, tente novamente.');
+                },
+                close: function() {
+                    console.log('Modal de pagamento fechado');
+                }
+            });
+
+            // Configuração da transação
+            const paymentData = {
+                amount: 19700, // R$ 197,00 em centavos
+                buttonText: 'Pagar R$ 197,00',
+                customerData: 'true',
+                createToken: 'false',
+                paymentMethod: paymentMethod,
+                postbackUrl: API_CONFIG.n8nWebhookUrl,
+                items: [
+                    {
+                        id: 'pro_plan',
+                        title: 'Plano Pro SpySmartAI',
+                        unit_price: 19700,
+                        quantity: 1,
+                        tangible: false
+                    }
+                ],
+                customer: {
+                    name: currentUser?.firstName + ' ' + currentUser?.lastName,
+                    email: currentUser?.email,
+                    external_id: currentUser?.id || 'guest_' + Date.now(),
+                    type: 'individual',
+                    country: 'br',
+                    documents: [
+                        {
+                            type: 'cpf',
+                            number: '00000000000' // Substituir por CPF real em produção
+                        }
+                    ],
+                    phone_numbers: ['+5511999999999'] // Substituir por telefone real em produção
+                },
+                billing: {
+                    name: currentUser?.firstName + ' ' + currentUser?.lastName,
+                    address: {
+                        country: 'br',
+                        state: 'sp',
+                        city: 'São Paulo',
+                        neighborhood: 'Centro',
+                        street: 'Av. Paulista',
+                        street_number: '1000',
+                        zipcode: '01310000'
+                    }
+                }
+            };
+
+            // Abrir modal de pagamento do Pagar.me
+            checkout.open(paymentData);
+        }
+
         function handleLogin(e) {
             e.preventDefault();
             const email = document.getElementById('loginEmail').value;
@@ -1130,18 +1177,18 @@
             const confirmPassword = document.getElementById('confirmPassword').value;
             const company = document.getElementById('company').value;
             const position = document.getElementById('position').value;
-            
+
             if (password !== confirmPassword) {
                 alert('As senhas não coincidem');
                 return;
             }
-            
+
             // Verificar se o usuário já existe
             if (usersDB.some(u => u.email === email)) {
                 alert('Este e-mail já está cadastrado');
                 return;
             }
-            
+
             // Criar novo usuário
             const newUser = {
                 id: Date.now().toString(),
@@ -1156,13 +1203,13 @@
                 competitorsCount: 0,
                 analysisCount: 0
             };
-            
+
             usersDB.push(newUser);
             localStorage.setItem('usersDB', JSON.stringify(usersDB));
-            
+
             currentUser = newUser;
             localStorage.setItem('currentUser', JSON.stringify(currentUser));
-            
+
             hideSignupModal();
             showDashboard();
             alert('Cadastro realizado com sucesso! Bem-vindo ao seu teste gratuito de 7 dias.');
@@ -1176,7 +1223,7 @@
                 showUpgradeModal('Você atingiu o limite de 3 concorrentes no plano Starter. Faça upgrade para Pro para adicionar mais concorrentes.');
                 return;
             }
-            
+
             const competitorData = {
                 id: Date.now().toString(),
                 name: document.getElementById('competitorName').value,
@@ -1189,7 +1236,7 @@
                 status: 'active',
                 lastUpdate: new Date().toISOString().split('T')[0]
             };
-            
+
             // Simulação de chamada à API
             try {
                 // Adiciona o concorrente localmente
@@ -1214,7 +1261,7 @@
                     },
                     body: JSON.stringify(competitorData)
                 });
-                
+
                 if (response.ok) {
                     loadCompetitors();
                     hideAddCompetitorForm();
@@ -1229,104 +1276,6 @@
             }
         }
 
-        function handlePagarmePayment() {
-            const cardNumber = document.getElementById('pagarme-card-number').value;
-            const cardExpiry = document.getElementById('pagarme-card-expiry').value;
-            const cardCvv = document.getElementById('pagarme-card-cvv').value;
-            const cardName = document.getElementById('pagarme-card-name').value;
-            
-            if (!cardNumber || !cardExpiry || !cardCvv || !cardName) {
-                alert('Por favor, preencha todos os campos do cartão');
-                return;
-            }
-            
-            // Configuração do pagamento
-            const paymentData = {
-                amount: 19700, // R$ 197.00 em centavos
-                payment_method: 'credit_card',
-                card_number: cardNumber.replace(/\s+/g, ''),
-                card_expiration_date: cardExpiry.replace('/', ''),
-                card_cvv: cardCvv,
-                card_holder_name: cardName,
-                customer: {
-                    external_id: currentUser?.id || 'guest_' + Date.now(),
-                    name: currentUser?.firstName + ' ' + currentUser?.lastName || 'Cliente SpySmartAI',
-                    email: currentUser?.email || 'guest@spysmartai.com',
-                    type: 'individual',
-                    country: 'br',
-                    documents: [
-                        {
-                            type: 'cpf',
-                            number: '00000000000' // CPF fictício para demonstração
-                        }
-                    ],
-                    phone_numbers: ['+5511999999999']
-                },
-                billing: {
-                    name: currentUser?.firstName + ' ' + currentUser?.lastName || 'Cliente SpySmartAI',
-                    address: {
-                        country: 'br',
-                        state: 'sp',
-                        city: 'São Paulo',
-                        neighborhood: 'Centro',
-                        street: 'Av. Paulista',
-                        street_number: '1000',
-                        zipcode: '01310000'
-                    }
-                },
-                items: [
-                    {
-                        id: 'pro_plan',
-                        title: 'Plano Pro SpySmartAI',
-                        unit_price: 19700,
-                        quantity: 1,
-                        tangible: false
-                    }
-                ]
-            };
-            
-            // Abrir modal de pagamento Pagar.me
-            pagarmeCheckout.open({
-                amount: paymentData.amount,
-                buttonText: 'Pagar R$ 197,00',
-                buttonClass: 'pagarme-button',
-                customerData: 'false',
-                paymentMethods: 'credit_card',
-                createToken: 'true',
-                uiColor: '#6e8efb',
-                maxInstallments: 12,
-                defaultInstallment: 1,
-                interestRate: 0,
-                freeInstallments: 1,
-                postback_url: API_CONFIG.baseUrl + '/pagarme/webhook',
-                headers: {
-                    'Authorization': 'Bearer ' + API_CONFIG.pagarmeEncryptionKey
-                }
-            });
-            
-            // Em um ambiente real, você enviaria os dados para seu backend
-            // que então processaria o pagamento com a API da Pagar.me
-            console.log('Dados do pagamento via Pagar.me:', paymentData);
-        }
-
-        function upgradeUserPlan() {
-            if (!currentUser) return;
-            
-            currentUser.plan = 'pro';
-            currentUser.trialEnd = null;
-            localStorage.setItem('currentUser', JSON.stringify(currentUser));
-            
-            // Atualiza o usuário no "banco de dados"
-            const userIndex = usersDB.findIndex(u => u.id === currentUser.id);
-            if (userIndex !== -1) {
-                usersDB[userIndex] = currentUser;
-                localStorage.setItem('usersDB', JSON.stringify(usersDB));
-            }
-            
-            updatePlanCounter();
-            alert('Seu plano foi atualizado para Pro com sucesso!');
-        }
-
         function loadCompetitors() {
             competitorsList.innerHTML = '';
             
@@ -1340,7 +1289,7 @@
                 `;
                 return;
             }
-            
+
             competitors.forEach(competitor => {
                 const statusClass = competitor.status === 'active' ? 'bg-green-500' : 'bg-yellow-500';
                 const statusText = competitor.status === 'active' ? 'Ativo' : 'Em Análise';
@@ -1370,7 +1319,7 @@
                     </tr>
                 `;
             });
-            
+
             // Adiciona event listeners aos botões
             document.querySelectorAll('.view-report-btn').forEach(btn => {
                 btn.addEventListener('click', (e) => {
@@ -1378,7 +1327,7 @@
                     viewCompetitorReport(competitorId);
                 });
             });
-            
+
             document.querySelectorAll('.delete-competitor-btn').forEach(btn => {
                 btn.addEventListener('click', (e) => {
                     const competitorId = e.currentTarget.getAttribute('data-id');
@@ -1395,7 +1344,7 @@
             if (currentUser?.plan === 'starter' || currentUser?.plan === 'starter_trial') {
                 const remainingAnalyses = 20 - (currentUser.analysisCount || 0);
                 if (remainingAnalyses <= 0) {
-                    showUpgradeModal('Você atingiu o limite de 20 análises mensais no plano Starter. Faça upgrade para Pro para análise ilimitadas.');
+                    showUpgradeModal('Você atingiu o limite de 20 análises mensais no plano Starter. Faça upgrade para Pro para análises ilimitadas.');
                     return;
                 }
                 
@@ -1407,7 +1356,7 @@
             
             // Atualiza o relatório na UI
             document.getElementById('currentCompetitor').textContent = competitor.name;
-            
+
             // Aqui você buscaria os dados reais da API
             // Por enquanto estamos usando dados mockados
             const detectedStrategies = [
@@ -1415,19 +1364,19 @@
                 'Uso intensivo de anúncios no Instagram',
                 'Preços dinâmicos baseados em concorrência'
             ];
-            
+
             const strengthsList = [
                 'Fotos de produtos em alta qualidade',
                 'Atendimento rápido via WhatsApp',
                 'Frete grátis acima de R$ 150'
             ];
-            
+
             const suggestionsList = [
                 'Criar promoções nas mesmas datas',
                 'Melhorar descrições de produtos',
                 'Oferecer frete grátis em compras menores'
             ];
-            
+
             // Preenche as listas
             const detectedStrategiesEl = document.getElementById('detectedStrategies');
             const strengthsListEl = document.getElementById('strengthsList');
@@ -1436,7 +1385,7 @@
             detectedStrategiesEl.innerHTML = detectedStrategies.map(item => `<li>${item}</li>`).join('');
             strengthsListEl.innerHTML = strengthsList.map(item => `<li>${item}</li>`).join('');
             suggestionsListEl.innerHTML = suggestionsList.map(item => `<li>${item}</li>`).join('');
-            
+
             // Rola até a seção de relatórios
             document.querySelector('#dashboardSection').scrollIntoView({
                 behavior: 'smooth'
@@ -1463,7 +1412,7 @@
             "Dados em Tempo Real",
             "Relatórios Automatizados"
         ];
-        
+                
         let wordIndex = 0;
         let charIndex = 0;
         let isDeleting = false;