src/BCards.Web/Views/UserPage/Display.cshtml

@@ -209,37 +209,31 @@
 
         .qrcode-toggle {
             width: 100%;
-            background-color: var(--primary-color);
+            background: rgba(255, 255, 255, 0.1);
-            color: white !important;
+            border: 1px solid rgba(255, 255, 255, 0.2);
-            border: none;
             border-radius: 12px;
-            padding: 0.75rem 1.25rem;
+            padding: 1rem;
             display: flex;
             align-items: center;
             justify-content: space-between;
             cursor: pointer;
             transition: all 0.3s ease;
+            color: inherit;
             font-size: 1rem;
-            font-weight: 600;
+            font-weight: 500;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
         }
 
         .qrcode-toggle:hover {
-            background-color: var(--secondary-color);
+            background: rgba(255, 255, 255, 0.15);
+            border-color: rgba(255, 255, 255, 0.3);
             transform: translateY(-2px);
-            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
         }
 
         .qrcode-toggle i {
             transition: transform 0.3s ease;
         }
 
-        .qrcode-toggle div {
-            display: flex;
-            align-items: center;
-            gap: 0.75rem;
-        }
-
         .qrcode-container {
             margin-top: 1rem;
             padding: 1.5rem;
@@ -556,13 +550,13 @@
                     <div class="qrcode-section mt-4">
                         <button class="qrcode-toggle" onclick="toggleQRCode()" type="button">
                             <i class="fas fa-qrcode me-2"></i>
-                            QR Code
+                            <span id="qrToggleText">Ocultar QR Code</span>
                             <i class="fas fa-chevron-up ms-auto" id="qrToggleIcon"></i>
                         </button>
 
                         <div class="qrcode-container" id="qrcodeContainer" style="display: block;">
                             <div class="qrcode-canvas" id="qrcode"></div>
-                            <p class="qrcode-hint">Escaneie o QR Code para abrir no celular</p>
+                            <p class="qrcode-hint">Escaneie para compartilhar esta página</p>
                             <button class="btn-download-qr" onclick="downloadQR()" type="button">
                                 <i class="fas fa-download me-1"></i> Baixar QR Code
                             </button>
@@ -600,8 +594,8 @@
 </div>
 
 @section Scripts {
-    <!-- QR Code Library - Usando bwip-js para maior compatibilidade -->
+    <!-- QRCode.js Library - Load FIRST -->
-    <script src="https://cdn.jsdelivr.net/npm/bwip-js@3.4.1/dist/bwip-js-min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
 
     <script>
         function recordClick(pageId, linkIndex) {
@@ -724,76 +718,64 @@
         function toggleQRCode() {
             const container = document.getElementById('qrcodeContainer');
             const icon = document.getElementById('qrToggleIcon');
+            const text = document.getElementById('qrToggleText');
 
             if (container.style.display === 'block') {
                 // Close
                 container.style.display = 'none';
                 icon.classList.remove('fa-chevron-up');
                 icon.classList.add('fa-chevron-down');
+                text.textContent = 'Mostrar QR Code';
             } else {
                 // Open
                 container.style.display = 'block';
                 icon.classList.remove('fa-chevron-down');
                 icon.classList.add('fa-chevron-up');
+                text.textContent = 'Ocultar QR Code';
             }
         }
 
         function generateQRCode() {
             if (qrCodeGenerated) {
-                console.log('[QR] QR Code already generated, skipping...');
+                console.log('QR Code already generated, skipping...');
                 return;
             }
 
             const qrcodeElement = document.getElementById("qrcode");
             if (!qrcodeElement) {
-                console.error('[QR] QR Code container not found');
+                console.error('QR Code container not found');
                 return;
             }
 
-            if (typeof bwipjs === 'undefined') {
+            // Check if already has content (double-call prevention)
-                console.error('[QR] bwip-js library is not loaded');
+            if (qrcodeElement.querySelector('canvas')) {
-                qrcodeElement.innerHTML = '<p class="text-danger small">Erro ao carregar gerador de QR Code. Verifique sua conexão ou bloqueador de anúncios.</p>';
+                console.log('Canvas already exists, skipping generation');
-                return;
-            }
-
-            // Construir a URL final (LivePage)
-            const baseUrl = window.location.origin;
-            const categoryName = '@Html.Raw(category?.Name ?? "")'.trim();
-            const slug = '@Html.Raw(Model.Slug ?? "")'.trim();
-            
-            // Se não houver categoria, usa 'geral' ou remove a barra extra
-            const categoryPart = categoryName ? encodeURIComponent(categoryName) : "page";
-            const pageUrl = `${baseUrl}/page/${categoryPart}/${encodeURIComponent(slug)}`;
-            
-            console.log('[QR] Generating QR for URL:', pageUrl);
-
-            // Criar um elemento canvas dinamicamente
-            const canvas = document.createElement('canvas');
-            canvas.style.maxWidth = '100%';
-            canvas.style.height = 'auto';
-            
-            try {
-                // bwip-js usa um canvas para renderizar
-                bwipjs.toCanvas(canvas, {
-                    bcid: 'qrcode',       // Tipo de código de barras
-                    text: pageUrl,        // Texto/URL
-                    scale: 3,             // Escala (resolução)
-                    height: 50,           // Altura (para QR é proporcional)
-                    width: 50,
-                    includetext: false,   // Não mostrar o texto embaixo
-                    textxalign: 'center',
-                });
-
-                // Limpar e adicionar o canvas ao container
-                qrcodeElement.innerHTML = '';
-                qrcodeElement.appendChild(canvas);
-                
                 qrCodeGenerated = true;
-                console.log('[QR] QR Code generated successfully with bwip-js');
+                return;
+            }
+
+            // Mark as generated BEFORE creating to prevent race conditions
+            qrCodeGenerated = true;
+
+            // Clear any existing content
+            qrcodeElement.innerHTML = '';
+
+            const pageUrl = window.location.href.split('?')[0]; // Remove query params
+
+            try {
+                new QRCode(qrcodeElement, {
+                    text: pageUrl,
+                    width: 200,
+                    height: 200,
+                    colorDark: "#000000",
+                    colorLight: "#ffffff",
+                    correctLevel: QRCode.CorrectLevel.H
+                });
+                console.log('QR Code generated successfully for:', pageUrl);
             } catch (error) {
-                console.error('[QR] Error generating QR Code with bwip-js:', error);
+                console.error('Error generating QR Code:', error);
-                qrcodeElement.innerHTML = '<p class="text-danger small">Erro ao gerar QR Code. Consulte o console para detalhes.</p>';
+                qrcodeElement.innerHTML = '<p class="text-danger small">Erro ao gerar QR Code</p>';
-                qrCodeGenerated = false;
+                qrCodeGenerated = false; // Reset on error so it can retry
             }
         }
 

src/BCards.Web/appsettings.json

@@ -21,7 +21,7 @@
   "Plans": {
     "Basic": {
       "Name": "Básico",
-      "PriceId": "price_1TR10MBk8jHwC3c0iey23Ghb",
+      "PriceId": "price_1RycPaBMIadsOxJVKioZZofK",
       "Price": 12.90,
       "MaxPages": 3,
       "MaxLinks": 8,
@@ -35,7 +35,7 @@
     },
     "Professional": {
       "Name": "Profissional",
-      "PriceId": "price_1TR10NBk8jHwC3c0yqmy8soD",
+      "PriceId": "price_1RycQmBMIadsOxJVGqjVMaOj",
       "Price": 25.90,
       "MaxPages": 5,
       "MaxLinks": 20,
@@ -49,7 +49,7 @@
     },
     "Premium": {
       "Name": "Premium",
-      "PriceId": "price_1TR10OBk8jHwC3c0eZa77y31",
+      "PriceId": "price_1RycRUBMIadsOxJVkxGOh3uu",
       "Price": 29.90,
       "MaxPages": 15,
       "MaxLinks": -1,
@@ -64,7 +64,7 @@
     },
     "PremiumAffiliate": {
       "Name": "Premium+Afiliados",
-      "PriceId": "price_1TR10PBk8jHwC3c0B1oIvvYY",
+      "PriceId": "price_1RycTaBMIadsOxJVeDLseXQq",
       "Price": 34.90,
       "MaxPages": 15,
       "MaxLinks": -1,
@@ -79,7 +79,7 @@
     },
     "BasicYearly": {
       "Name": "Básico Anual",
-      "PriceId": "price_1TR10NBk8jHwC3c0L4SDaWe9",
+      "PriceId": "price_1RycWgBMIadsOxJVGdtEeoMS",
       "Price": 129.00,
       "MaxPages": 3,
       "MaxLinks": 8,
@@ -93,7 +93,7 @@
     },
     "ProfessionalYearly": {
       "Name": "Profissional Anual",
-      "PriceId": "price_1TR10OBk8jHwC3c0IuyvrvRf",
+      "PriceId": "price_1RycXdBMIadsOxJV5cNX7dHm",
       "Price": 259.00,
       "MaxPages": 5,
       "MaxLinks": 20,
@@ -107,7 +107,7 @@
     },
     "PremiumYearly": {
       "Name": "Premium Anual",
-      "PriceId": "price_1TR10PBk8jHwC3c0qngPYMUN",
+      "PriceId": "price_1RycYnBMIadsOxJVPdKmzy4m",
       "Price": 299.00,
       "MaxPages": 15,
       "MaxLinks": -1,
@@ -122,7 +122,7 @@
     },
     "PremiumAffiliateYearly": {
       "Name": "Premium+Afiliados Anual",
-      "PriceId": "price_1TR10QBk8jHwC3c0f8CBaD1n",
+      "PriceId": "price_1RycaEBMIadsOxJVEhsdB2Y1",
       "Price": 349.00,
       "MaxPages": 15,
       "MaxLinks": -1,