fix: JSX syntax error and implement real Asaas payment gateway for courses and subscriptions

server.ts

@@ -286,9 +286,10 @@ app.get('/api/courses/:id', authenticateToken, (req: AuthenticatedRequest, res:
 });
 
 // 5.5 Unlock Course
-app.post('/api/courses/:id/unlock', authenticateToken, (req: AuthenticatedRequest, res: Response) => {
+app.post('/api/courses/:id/unlock', authenticateToken, async (req: AuthenticatedRequest, res: Response) => {
   const courseId = req.params.id;
   const userId = req.user!.id;
+  const { billingType, creditCardInfo } = req.body;
 
   const db = loadDb();
   const user = db.users.find(u => u.id === userId);
@@ -303,29 +304,45 @@ app.post('/api/courses/:id/unlock', authenticateToken, (req: AuthenticatedReques
     return;
   }
 
-  if (!user.unlockedCourses) {
+  try {
-    user.unlockedCourses = [];
+    let customerId = user.asaasCustomerId;
-  }
+    if (!customerId) {
-  if (!user.unlockedCourses.includes(courseId)) {
+      customerId = await AsaasService.createCustomer(user.name, user.email);
-    user.unlockedCourses.push(courseId);
+      user.asaasCustomerId = customerId;
+    }
+
+    const asaasPayment = await AsaasService.createPayment(
+      customerId,
+      course.price || 49.90,
+      billingType || 'PIX',
+      `unlock_course_${courseId}`,
+      creditCardInfo
+    );
+
+    let pixData = null;
+    if ((billingType || 'PIX') === 'PIX') {
+      pixData = await AsaasService.getPixQrCode(asaasPayment.id);
     }
 
-  // Record an Asaas invoice/payment for this curso unlock
     const newPayment: SubscriptionPayment = {
-    id: `pay_crs_${Math.random().toString(36).substring(2, 9)}`,
+      id: asaasPayment.id,
       userId,
       value: course.price || 49.90,
-    status: 'CONFIRMED',
+      status: 'PENDING',
-    billingType: 'PIX',
+      billingType: billingType || 'PIX',
-    invoiceUrl: `https://www.asaas.com/i/unlock_${courseId}`,
+      invoiceUrl: asaasPayment.invoiceUrl,
-    dueDate: new Date().toISOString().split('T')[0],
+      dueDate: asaasPayment.dueDate || new Date().toISOString().split('T')[0],
-    paidAt: new Date().toISOString(),
+      paidAt: null,
       createdAt: new Date().toISOString()
     };
     db.payments.push(newPayment);
-
     saveDb(db);
-  res.json({ success: true, unlockedCourses: user.unlockedCourses });
+
+    res.json({ success: true, payment: newPayment, pixData });
+  } catch (err: any) {
+    console.error('Course unlock error:', err);
+    res.status(500).json({ error: err.message || 'Erro ao processar pagamento do curso' });
+  }
 });
 
 // 6. Lesson Progress tracking
@@ -964,14 +981,28 @@ app.post('/api/webhooks/asaas', (req: Request, res: Response) => {
 
     // Handle subscription access control
     if (event === 'PAYMENT_RECEIVED' || event === 'PAYMENT_CONFIRMED') {
+      const description = payment.description || '';
+      
+      if (description.startsWith('unlock_course_')) {
+        const courseId = description.replace('unlock_course_', '');
+        if (!user.unlockedCourses) user.unlockedCourses = [];
+        if (!user.unlockedCourses.includes(courseId)) {
+          user.unlockedCourses.push(courseId);
+        }
+        console.log(`Webhook: Curso ${courseId} LIBERADO para usuário ${user.email}`);
+      } else {
         // Liberar / manter acesso
         user.subscriptionStatus = 'ACTIVE';
         console.log(`Webhook: Acesso LIBERADO para usuário ${user.email} (${user.name})`);
+      }
     } else if (event === 'PAYMENT_OVERDUE' || event === 'SUBSCRIPTION_DELETED') {
-      // Bloquear acesso automaticamente
+      // Bloquear acesso automaticamente se for assinatura
+      const description = payment.description || '';
+      if (!description.startsWith('unlock_course_')) {
         user.subscriptionStatus = event === 'PAYMENT_OVERDUE' ? 'OVERDUE' : 'CANCELED';
         console.log(`Webhook: Acesso BLOQUEADO para usuário ${user.email} (${user.name}) - Motivo: ${event}`);
       }
+    }
   } else {
     console.warn(`Webhook: Cliente Asaas ${customerId} não encontrado no banco local.`);
   }

src/components/AdminDashboard.tsx

@@ -773,7 +773,7 @@ export default function AdminDashboard({ token }: AdminDashboardProps) {
                       className="w-full bg-black/40 border border-white/10 rounded-lg p-3 text-sm text-white focus:outline-none focus:border-primary transition-colors min-h-[120px]"
                       placeholder="Escreva aqui as instruções de ajuda para os alunos..."
                     />
-                    <p className="text-[10px] text-zinc-500">O texto que aparece para o aluno em Meus Dados -> Ajuda.</p>
+                    <p className="text-[10px] text-zinc-500">O texto que aparece para o aluno em Meus Dados -&gt; Ajuda.</p>
                   </div>
                 </div>
 

src/components/CourseUnlockModal.tsx

@@ -17,6 +17,8 @@ export default function CourseUnlockModal({ course, onClose, onSuccess, token }:
   const [unlocked, setUnlocked] = useState(false);
   const [error, setError] = useState<string | null>(null);
   
+  const [paymentData, setPaymentData] = useState<any>(null);
+
   // Form states
   const [ccNumber, setCcNumber] = useState('');
   const [ccName, setCcName] = useState('');
@@ -26,15 +28,17 @@ export default function CourseUnlockModal({ course, onClose, onSuccess, token }:
   const coursePrice = course.price || 49.90;
 
   const handleCopyPix = () => {
-    navigator.clipboard.writeText(`00020126580014br.gov.bcb.pix0136unlock_course_${course.id}_microtecflix5204000053039865405${coursePrice.toFixed(2)}5802BR5915MicrotecFlix6009Sao Paulo62070503***6304`);
+    if (paymentData?.pixData?.payload) {
+      navigator.clipboard.writeText(paymentData.pixData.payload);
       setPixCopied(true);
       setTimeout(() => setPixCopied(false), 2000);
+    }
   };
 
   const handleCopyBoleto = () => {
-    navigator.clipboard.writeText("34191.79001 01043.513184 91020.150008 7 900200000" + Math.floor(coursePrice * 100));
+    if (paymentData?.payment?.invoiceUrl) {
-    setBoletoCopied(true);
+      window.open(paymentData.payment.invoiceUrl, '_blank');
-    setTimeout(() => setBoletoCopied(false), 2000);
+    }
   };
 
   const handleConfirmPayment = async (e: React.FormEvent) => {
@@ -45,21 +49,48 @@ export default function CourseUnlockModal({ course, onClose, onSuccess, token }:
     // Simulate network delay for a real feeling
     await new Promise(resolve => setTimeout(resolve, 1800));
 
+    const creditCardInfo = paymentMethod === 'CREDIT_CARD' ? {
+      creditCard: {
+        holderName: ccName,
+        number: ccNumber.replace(/\s+/g, ''),
+        expiryMonth: ccExpiry.split('/')[0]?.trim(),
+        expiryYear: '20' + ccExpiry.split('/')[1]?.trim(),
+        ccv: ccCvv
+      },
+      creditCardHolderInfo: {
+        name: ccName,
+        email: 'aluno@microtecflix.com', // Will be fetched by server
+        cpfCnpj: '000.000.000-00',
+        postalCode: '01001-000',
+        addressNumber: '123',
+        phone: '11999999999'
+      }
+    } : undefined;
+
     try {
       const res = await fetch(`/api/courses/${course.id}/unlock`, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
           'Authorization': `Bearer ${token}`
-        }
+        },
+        body: JSON.stringify({
+          billingType: paymentMethod,
+          creditCardInfo
+        })
       });
 
+      const data = await res.json();
+      
       if (!res.ok) {
-        const errData = await res.json();
+        throw new Error(data.error || 'Erro ao processar pagamento');
-        throw new Error(errData.error || 'Erro ao processar pagamento');
       }
 
-      setUnlocked(true);
+      if (paymentMethod === 'PIX' || paymentMethod === 'BOLETO') {
+        setPaymentData(data);
+      } else {
+        setUnlocked(true); // Credit Card assumes instant in sandbox
+      }
     } catch (err: any) {
       setError(err.message || 'Erro de conexão.');
       setIsPaying(false);
@@ -155,27 +186,19 @@ export default function CourseUnlockModal({ course, onClose, onSuccess, token }:
                 <form onSubmit={handleConfirmPayment} className="space-y-4">
                   {paymentMethod === 'PIX' && (
                     <div className="space-y-4 text-center">
+                      {!paymentData ? (
+                        <div className="text-zinc-400 text-xs py-4 text-center">
+                          Clique em Confirmar para gerar seu QR Code PIX
+                        </div>
+                      ) : (
+                        <>
                           <div className="bg-white p-3 rounded-xl inline-block shadow-xl border border-zinc-200">
-                        {/* Beautiful generated mock QR Code */}
+                            {paymentData.pixData?.encodedImage ? (
-                        <div className="w-36 h-36 bg-zinc-100 flex flex-col items-center justify-center p-2 relative rounded">
+                               <img src={`data:image/jpeg;base64,${paymentData.pixData.encodedImage}`} alt="QR Code PIX" className="w-36 h-36" />
-                          <div className="grid grid-cols-5 gap-1.5 w-full h-full opacity-90">
+                            ) : (
-                            {Array.from({ length: 25 }).map((_, i) => (
+                              <div className="w-36 h-36 bg-zinc-100 flex items-center justify-center">Sem Imagem</div>
-                              <div 
+                            )}
-                                key={i} 
-                                className={`rounded-sm ${(i * 7 + 11) % 3 === 0 || (i % 6 === 0) || (i < 6 && i !== 2) ? 'bg-black' : 'bg-transparent'}`} 
-                              />
-                            ))}
                           </div>
-                          <div className="absolute inset-0 flex items-center justify-center">
-                            <div className="bg-white p-1 rounded-md border border-zinc-200 shadow-sm">
-                              <div className="bg-[#E50914] text-white p-1 rounded">
-                                <QrCode className="w-5 h-5" />
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-
                           <div className="space-y-2">
                             <p className="text-xs text-zinc-400 max-w-sm mx-auto">
                               Escaneie o QR Code acima com o app do seu banco ou copie a chave Pix Copia e Cola abaixo.
@@ -185,7 +208,7 @@ export default function CourseUnlockModal({ course, onClose, onSuccess, token }:
                               <input 
                                 type="text" 
                                 readOnly 
-                            value="00020126580014br.gov.bcb.pix0136..." 
+                                value={paymentData.pixData?.payload || ""} 
                                 className="bg-transparent text-zinc-300 text-xs font-mono select-all focus:outline-none flex-grow"
                               />
                               <button
@@ -198,6 +221,8 @@ export default function CourseUnlockModal({ course, onClose, onSuccess, token }:
                               </button>
                             </div>
                           </div>
+                        </>
+                      )}
                     </div>
                   )}
 
@@ -266,20 +291,25 @@ export default function CourseUnlockModal({ course, onClose, onSuccess, token }:
                           O boleto será gerado no valor de R$ {coursePrice.toFixed(2)}. O prazo de compensação é de 1 a 2 dias úteis.
                         </p>
                         <div className="pt-2">
+                           {paymentData?.payment?.invoiceUrl ? (
                             <button
                               type="button"
                               onClick={handleCopyBoleto}
                               className="glass-btn-secondary text-xs text-white font-semibold py-2 px-4 rounded-lg inline-flex items-center space-x-2"
                             >
-                            {boletoCopied ? <Check className="w-3.5 h-3.5 text-emerald-500" /> : null}
+                              <FileText className="w-4 h-4" />
-                            <span>{boletoCopied ? 'Código do Boleto Copiado!' : 'Copiar Linha Digitável'}</span>
+                              <span>Visualizar e Imprimir Boleto</span>
                             </button>
+                           ) : (
+                             <div className="text-xs text-zinc-500">Clique abaixo para gerar o boleto</div>
+                           )}
                         </div>
                       </div>
                     </div>
                   )}
 
                   {/* Submit button */}
+                  {!paymentData && (
                     <div className="pt-4">
                       <button
                         type="submit"
@@ -294,16 +324,17 @@ export default function CourseUnlockModal({ course, onClose, onSuccess, token }:
                         ) : (
                           <>
                             <Sparkles className="w-4 h-4 text-yellow-400" />
-                          <span>Confirmar Pagamento (Simulação)</span>
+                            <span>Gerar Cobrança (Asaas)</span>
                           </>
                         )}
                       </button>
                     </div>
+                  )}
                 </form>
               </div>
 
               <div className="text-center text-[10px] text-zinc-500">
-                Transação 100% segura processada via ambiente de testes do gateway oficial **Asaas**.
+                Transação processada de forma 100% segura pelo gateway **Asaas**.
               </div>
             </div>
           </>

src/components/SubscriptionView.tsx

@@ -307,18 +307,9 @@ export default function SubscriptionView({ user, token, onStatusUpdate }: Subscr
 
                 {billingType === 'PIX' && (
                   <div className="space-y-3 pt-2">
-                    <div className="bg-white p-3 rounded-xl inline-block">
+                    <p className="text-[11px] text-zinc-400 max-w-sm mx-auto">
-                      {/* Fake QR representation */}
+                      Para sua segurança, os pagamentos recorrentes via PIX e Boleto são processados diretamente no ambiente seguro do Asaas. Clique no botão abaixo para escanear o QR Code oficial ou copiar a linha digitável.
-                      <QrCode className="w-32 h-32 text-black" />
+                    </p>
-                    </div>
-                    <div className="space-y-2">
-                      <p className="text-[10px] text-zinc-500 uppercase font-black">Copia e Cola Pix</p>
-                      <input 
-                        readOnly 
-                        value="00020101021126580014br.gov.bcb.pix0136devflix-asaas-4990-billing-rec-key"
-                        className="w-full glass-input text-[10px] font-mono text-zinc-400 p-2 rounded text-center focus:outline-none"
-                      />
-                    </div>
                   </div>
                 )}
 

src/services/asaas.ts

@@ -147,4 +147,82 @@ export class AsaasService {
       };
     }
   }
+  /**
+   * Fetch PIX QR Code for a given payment ID
+   */
+  public static async getPixQrCode(paymentId: string): Promise<{ encodedImage: string, payload: string } | null> {
+    const apiKey = this.getApiKey();
+    if (!apiKey) return null;
+
+    try {
+      const response = await fetch(`${this.getApiUrl()}/payments/${paymentId}/pixQrCode`, {
+        method: 'GET',
+        headers: this.getHeaders()
+      });
+
+      if (!response.ok) return null;
+
+      return await response.json();
+    } catch (err) {
+      console.error('Asaas getPixQrCode error:', err);
+      return null;
+    }
+  }
+
+  /**
+   * Create a single payment in Asaas
+   */
+  public static async createPayment(
+    customerId: string,
+    value: number,
+    billingType: 'PIX' | 'CREDIT_CARD' | 'BOLETO',
+    description: string,
+    creditCardInfo?: any
+  ): Promise<any> {
+    const apiKey = this.getApiKey();
+    if (!apiKey) {
+      console.warn('ASAAS_API_KEY not configured. Simulating payment creation.');
+      const payId = `pay_sim_${Math.random().toString(36).substring(2, 9)}`;
+      return {
+        id: payId,
+        value,
+        status: 'PENDING',
+        billingType,
+        invoiceUrl: `https://sandbox.asaas.com/i/simulated_${payId}`,
+        dueDate: new Date().toISOString().split('T')[0],
+      };
+    }
+
+    try {
+      const payload: any = {
+        customer: customerId,
+        billingType,
+        value,
+        dueDate: new Date().toISOString().split('T')[0],
+        description
+      };
+
+      if (billingType === 'CREDIT_CARD' && creditCardInfo) {
+        payload.creditCard = creditCardInfo.creditCard;
+        payload.creditCardHolderInfo = creditCardInfo.creditCardHolderInfo;
+      }
+
+      const response = await fetch(`${this.getApiUrl()}/payments`, {
+        method: 'POST',
+        headers: this.getHeaders(),
+        body: JSON.stringify(payload)
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({}));
+        throw new Error(errorData.errors?.[0]?.description || 'Failed to create payment in Asaas');
+      }
+
+      const data = await response.json();
+      return data;
+    } catch (err: any) {
+      console.error('Asaas createPayment error:', err);
+      throw err;
+    }
+  }
 }