From 11a0c20aa2a000c43c989c6b530cbcb5b19bdafd Mon Sep 17 00:00:00 2001
From: Sidney Gomes <sidney.gomes1989@gmail.com>
Date: Tue, 21 Jul 2026 18:05:00 -0300
Subject: [PATCH] fix: render dynamic scannable QR Code image from payload
 fallback

---
 src/components/CourseUnlockModal.tsx | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/components/CourseUnlockModal.tsx b/src/components/CourseUnlockModal.tsx
index e841b71..6ee4f61 100644
--- a/src/components/CourseUnlockModal.tsx
+++ b/src/components/CourseUnlockModal.tsx
@@ -220,10 +220,20 @@ export default function CourseUnlockModal({ course, onClose, onSuccess, token }:
                       ) : (
                         <>
                           <div className="bg-white p-3 rounded-xl inline-block shadow-xl border border-zinc-200">
-                            {paymentData.pixData?.encodedImage ? (
-                               <img src={`data:image/jpeg;base64,${paymentData.pixData.encodedImage}`} alt="QR Code PIX" className="w-36 h-36" />
+                            {paymentData.pixData?.encodedImage && paymentData.pixData.encodedImage.length > 20 ? (
+                               <img 
+                                 src={paymentData.pixData.encodedImage.startsWith('data:') ? paymentData.pixData.encodedImage : `data:image/png;base64,${paymentData.pixData.encodedImage}`} 
+                                 alt="QR Code PIX" 
+                                 className="w-40 h-40 object-contain mx-auto" 
+                               />
+                            ) : paymentData.pixData?.payload ? (
+                               <img 
+                                 src={`https://api.qrserver.com/v1/create-qr-code/?size=250x250&data=${encodeURIComponent(paymentData.pixData.payload)}`} 
+                                 alt="QR Code PIX" 
+                                 className="w-40 h-40 object-contain mx-auto" 
+                               />
                             ) : (
-                              <div className="w-36 h-36 bg-zinc-100 flex items-center justify-center">Sem Imagem</div>
+                              <div className="w-40 h-40 bg-zinc-100 flex items-center justify-center text-zinc-500 text-xs font-bold rounded-lg">Gerando QR Code...</div>
                             )}
                           </div>
                           <div className="space-y-2">