ok

src/components/ButtonWithReplica.js

@@ -126,7 +126,22 @@ const ButtonWithReplica = ({
     console.log(qrisComponent.nmid); // Log the QR value
     Open();
   };
-
+  const downloadQR = () => {
+    const imageUrl = "https://dev.api.kedaimaster.com/uploads/1739542152564.jpg"; // Image URL
+  
+    // Create a new XMLHttpRequest to fetch the image as a Blob
+    fetch(imageUrl)
+      .then((response) => response.blob()) // Convert the response to a Blob
+      .then((blob) => {
+        const link = document.createElement("a");
+        link.href = URL.createObjectURL(blob); // Create a URL for the Blob
+        link.download = "QRCode.jpg"; // Set the download filename
+        link.click(); // Trigger the download
+      })
+      .catch((error) => {
+        console.error("Failed to download the image:", error);
+      });
+  }
   return (
     <div className="container">
       <button
@@ -138,13 +153,17 @@ const ButtonWithReplica = ({
       </button>
       <>
         <div className={`replica ${isActive ? "active" : ""}`}></div>
+        <div className={`bussinessQR ${isActive ? "active" : ""}`}>
         <QRCodeSVG
-          className={`bussinessQR ${isActive ? "active" : ""}`}
+          width={400}
+          height={400}
           style={{pointerEvents: 'none'}}
           bgColor={"transparent"}
           fgColor={fgColor}
           value={QRValue}
         />
+        <div onClick={downloadQR} className={`downloadQR ${isActive ? "active" : ""}`} >Download QRIS</div>
+        </div>
         <div className={`bussinessName ${isActive ? "active" : ""}`}>
           <h2>{qrisComponent.merchantName}</h2>
           {qrisComponent.nmid != "" && <h4>NMID : {qrisComponent.nmid}</h4>}
@@ -152,6 +171,8 @@ const ButtonWithReplica = ({
         <div className={`price ${isActive ? "active" : ""}`}>
           <h1>{price}</h1>
         </div>
+        <div className={`trapezoid ${isActive ? "active" : ""}`}></div>
+        <div className={`rightTriangle ${isActive ? "active" : ""}`}></div>
       </>
     </div>
   );