From 88d7bcaa9590581cedb50f804cbf51f33bbf0802 Mon Sep 17 00:00:00 2001
From: rckrdmrd <rckrdmrd@gmail.com>
Date: Tue, 20 Jan 2026 03:29:36 -0600
Subject: [PATCH] [MCH-FE] feat: Implement real QR code generation in CodiQR

- Added qrcode.react v4.2.0 dependency
- Replaced visual placeholder with QRCodeSVG component
- QR displays actual transaction qrData from backend
- Added qrData state to capture API response
- Configured QR with error correction level M and white margin

Resolves: TASK-2026-01-20-003 audit P2 gap

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 package-lock.json                  | 10 ++++++++++
 package.json                       |  1 +
 src/components/payments/CodiQR.tsx | 21 ++++++++++++++-------
 3 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 6978d6b..6153368 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
         "i18next": "^25.7.4",
         "i18next-browser-languagedetector": "^8.2.0",
         "lucide-react": "^0.562.0",
+        "qrcode.react": "^4.2.0",
         "react": "^19.2.0",
         "react-dom": "^19.2.0",
         "react-i18next": "^16.5.3",
@@ -6737,6 +6738,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/qrcode.react": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/qrcode.react/-/qrcode.react-4.2.0.tgz",
+      "integrity": "sha512-QpgqWi8rD9DsS9EP3z7BT+5lY5SFhsqGjpgW5DY/i3mK4M9DTBNz3ErMi8BWYEfI3L0d8GIbGmcdFAS1uIRGjA==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
diff --git a/package.json b/package.json
index 337a11f..8241f45 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "i18next": "^25.7.4",
     "i18next-browser-languagedetector": "^8.2.0",
     "lucide-react": "^0.562.0",
+    "qrcode.react": "^4.2.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-i18next": "^16.5.3",
diff --git a/src/components/payments/CodiQR.tsx b/src/components/payments/CodiQR.tsx
index 7fa5df7..d5f6d8d 100644
--- a/src/components/payments/CodiQR.tsx
+++ b/src/components/payments/CodiQR.tsx
@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react';
 import { useMutation, useQuery } from '@tanstack/react-query';
-import { QrCode, Clock, Check, X, RefreshCw } from 'lucide-react';
+import { QRCodeSVG } from 'qrcode.react';
+import { Clock, Check, X, RefreshCw } from 'lucide-react';
 import { codiSpeiApi } from '../../lib/api';
 
 interface CodiQRProps {
@@ -13,12 +14,14 @@ interface CodiQRProps {
 
 export function CodiQR({ amount, description, saleId, onSuccess, onCancel }: CodiQRProps) {
   const [transactionId, setTransactionId] = useState<string | null>(null);
+  const [qrData, setQrData] = useState<string | null>(null);
   const [timeLeft, setTimeLeft] = useState<number>(300); // 5 minutes in seconds
 
   const generateMutation = useMutation({
     mutationFn: () => codiSpeiApi.generateQr({ amount, description, saleId }),
     onSuccess: (res) => {
       setTransactionId(res.data.id);
+      setQrData(res.data.qrData);
       setTimeLeft(300);
     },
   });
@@ -119,12 +122,16 @@ export function CodiQR({ amount, description, saleId, onSuccess, onCancel }: Cod
 
       {/* QR Code Display */}
       <div className="bg-white p-4 rounded-xl shadow-lg mb-4">
-        <div className="w-48 h-48 bg-gray-100 rounded-lg flex items-center justify-center">
-          {/* In production, generate actual QR code from qrData */}
-          <div className="text-center">
-            <QrCode className="h-32 w-32 text-gray-800 mx-auto" />
-            <p className="text-xs text-gray-400 mt-2">Escanea con tu app bancaria</p>
-          </div>
+        <div className="flex flex-col items-center justify-center">
+          <QRCodeSVG
+            value={qrData || transactionId || ''}
+            size={200}
+            level="M"
+            includeMargin={true}
+            bgColor="#ffffff"
+            fgColor="#1f2937"
+          />
+          <p className="text-xs text-gray-400 mt-2">Escanea con tu app bancaria</p>
         </div>
       </div>