fix agent balance QR

src/pages/members/agent-balance/AgentBalance.tsx

@@ -112,13 +112,15 @@ const AgentBalance = () => {
 
   async function getQrCode(customerId:any): Promise<void> {
     try {
-      setBarcode(`https://img.freepik.com/free-vector/scan-me-qr-code_78370-2915.jpg?semt=ais_hybrid&w=740`)
+      setBarcode(``)
       let getToken = await axios.get(`${BASE_URL}/token/get`, { params: { id: customerId }});
       console.log(getToken.data.data);
-      // setBarcode(getToken.data.data.qrCode);
+      setBarcode(getToken.data.data.qrCode);
     } catch (error: any) {
       toast.warning(error.message)
       console.log(error);
+    } finally {
+      // setBarcode(`https://miro.medium.com/v2/resize:fit:250/1*DcceOyLkzU--EzP4PYKd_g.png`)
     }
   }
 
@@ -192,35 +194,34 @@ const AgentBalance = () => {
 
 const PaymentCard = ({ barcode, agent_name, customerId }:any) => {
   const cardRef:any = useRef(null);
-  // useEffect(() => {
-  //  fetchToken();
-  // }, []);
 
-  // async function fetchToken(): Promise<void> {
+  const waitForImageLoad = (img: HTMLImageElement): Promise<void> => {
-  //   try {
+    return new Promise((resolve) => {
-  //     let getToken = await axios.get(`${BASE_URL}/token/get`, { params: { id: customerId }});
+      if (img.complete && img.naturalHeight !== 0) {
-  //     console.log(getToken.data.data);
+        resolve();
-  //     // setBarcode(getToken.data.data.qrCode);
+      } else {
-  //     setBarcode(`https://img.freepik.com/free-vector/scan-me-qr-code_78370-2915.jpg?semt=ais_hybrid&w=740`)
+        toast.warning(`No QR Code`)
-  //   } catch (error: any) {
+        img.onload = () => resolve();
-  //     toast.warning(error.message)
+      }
-  //     console.log(error);
+    });
-  //   }
+  };
-  // }
+
 
   const handleDownload = async () => {
     if (!cardRef.current) return;
 
     const img = cardRef.current.querySelector('img');
-    if (!img || !img.complete) {
+    if (img) {
-      // Wait until the barcode image has fully loaded
+      await waitForImageLoad(img);
-      await new Promise((resolve) => {
+    } else {
-        img.onload = resolve;
+      return toast.warning(`No QR Code`)
-      });
     }
 
     const canvas = await html2canvas(cardRef.current, {
-      useCORS: true, // Important for external images
+      useCORS: true,
+      allowTaint: false,
+      backgroundColor: 'white',
+      scale: 2,
     });
 
     const dataUrl = canvas.toDataURL('image/png');
@@ -230,23 +231,21 @@ const PaymentCard = ({ barcode, agent_name, customerId }:any) => {
     link.click();
   };
 
-
   return (
     <div className="flex flex-col items-center">
       {/* Card content to render */}
       <div ref={cardRef}
-        className="relative w-[320px] h-[460px] rounded-xl overflow-hidden shadow-xl bg-white"
+        className="relative w-[400px] h-[550px] rounded-xl overflow-hidden shadow-xl bg-white"
       >
-        <div className="absolute inset-0 z-10 flex flex-col items-center justify-start pt-[50px] px-4 text-center">
+        <div className="absolute inset-0 z-10 flex flex-col items-center justify-start pt-[100px] px-4 text-center">
           <p className="text-[24px] font-semibold text-[#5b0066] mb-5">
             {agent_name}
           </p>
-
           {barcode && (
             <img
               src={barcode}
               alt="Barcode"
-              className="w-56 h-56 object-contain mb-2"
+              className="w-80 h-80 object-contain mb-2"
             />
           )}
         </div>
@@ -261,51 +260,6 @@ const PaymentCard = ({ barcode, agent_name, customerId }:any) => {
       </button>
     </div>
   );
-
-  return (
-    <div className="relative w-[320px] h-[460px] rounded-xl overflow-hidden shadow-xl">
-      <div className="absolute inset-0 z-10 flex flex-col items-center justify-start pt-[50px] px-4 text-center">
-        <p className="text-[24px] font-semibold text-[#5b0066] mb-5">
-          {agent_name}
-        </p>
-        {barcode && (
-          <img
-            src={barcode}
-            alt="Barcode"
-            className="w-70 h-70 object-contain mb-2"
-          />
-        )}
-      </div>
-    </div>
-  );
-
-  // return (
-  //   <div className="relative w-[320px] h-[460px] rounded-xl overflow-hidden shadow-lg">
-  //     {/* Background Card Image */}
-  //     <img
-  //       src={toAbsoluteUrl("/media/images/card.png")}
-  //       alt="Card Template"
-  //       className="absolute inset-0 w-full h-full object-cover"
-  //     />
-
-  //     {/* Content Overlay */}
-  //     <div className="absolute inset-0 z-10 flex flex-col items-center justify-start pt-32 px-4 text-center">
-  //       {/* Agent Name at Top */}
-  //       <p className="text-sm font-semibold text-[#5b0066] mb-4">
-  //         {agent_name}
-  //       </p>
-
-  //       {/* Barcode */}
-  //       {barcode && (
-  //         <img
-  //           src={barcode}
-  //           alt="Barcode"
-  //           className="w-40 h-40 object-contain mb-4"
-  //         />
-  //       )}
-  //     </div>
-  //   </div>
-  // );
 };
 
 export default AgentBalance;