good

src/components/ButtonWithReplica.css

@@ -7,7 +7,7 @@
 
 .button {
   position: relative;
-  z-index: 99; /* Make sure the button is above the replica */
+  z-index: 201; /* Make sure the button is above the replica */
 
   font-family: "Poppins", sans-serif;
   font-weight: 500;
@@ -47,4 +47,91 @@
   z-index: 200;
   border-radius: 0px;
   background-color: white;
+  pointer-events: none; /* Allow interactions */
+}
+.bussinessName {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  color: rgba(0, 0, 0, 0);
+  transform: translate(-50%, -50%);
+  z-index: 98; /* Behind the button */
+  transition: all 0.5s ease-in-out;
+  font-size: 3vw;
+  text-align: center;
+}
+
+.bussinessName.active {
+  top: -700%;
+  position: absolute;
+  color: rgb(0, 0, 0);
+  width: 60vw;
+  right: 50%;
+  z-index: 201; /* Behind the button */
+  font-size: 3vw;
+  text-align: center;
+}
+
+.bussinessQR {
+  position: absolute;
+  height: 25vh;
+  width: 25vh;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 98; /* Behind the button */
+  transition: all 0.5s ease-in-out;
+}
+
+.bussinessQR.active {
+  position: absolute;
+  top: -250%;
+  transform: translate(-50%, -80%);
+
+  transition: all 0.5s ease-in-out;
+  z-index: 201; /* Behind the button */
+}
+
+.price {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  color: rgba(0, 0, 0, 0);
+  transform: translate(-50%, -50%);
+  z-index: 98; /* Behind the button */
+  transition: all 0.5s ease-in-out;
+  font-size: 3vw;
+  text-align: center;
+}
+
+.price.active {
+  position: absolute;
+  color: rgb(0, 0, 0);
+  transform: translate(-50%, -150%);
+  z-index: 201; /* Behind the button */
+  font-size: 3vw;
+  text-align: center;
+}
+
+.ClaimButton {
+  visibility: hidden;
+  position: absolute;
+}
+
+.ClaimButton.active {
+  visibility: visible;
+  font-family: "Poppins", sans-serif;
+  font-weight: 500;
+  font-style: normal;
+  font-size: 70%; /* Adjusted for better readability */
+  padding: 12px 24px; /* Added padding for a better look */
+  border-radius: 50px;
+  background-color: rgba(88, 55, 50, 1);
+  color: white;
+  border: none;
+  margin: 0 auto;
+  cursor: pointer;
+  display: block; /* Centering the button */
+  text-align: center;
+  z-index: 201;
 }

src/components/ButtonWithReplica.js

@@ -1,22 +1,153 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import "./ButtonWithReplica.css";
+import styles from "../pages/Transactions.module.css";
+import { QRCodeSVG } from "qrcode.react";
+import API_BASE_URL from "../config.js";
+import jsqr from "jsqr";
 
-const ButtonWithReplica = ({ children }) => {
+const ButtonWithReplica = ({
+  children,
+  price,
+  paymentUrl,
+  handleClick,
+  Open,
+  isPaymentOpen,
+}) => {
   const [isActive, setIsActive] = useState(false);
+  const [fgColor, setFgColor] = useState("transparent");
+  const [QRValue, setQRValue] = useState("");
+  const [qrisComponent, setQrisComponent] = useState({
+    merchantName: "",
+    nmid: "",
+  });
+  useEffect(() => {
+    const decodeQRCodeFromUrl = async (imageUrl) => {
+      const img = new Image();
+      img.crossOrigin = "Anonymous"; // Handle CORS if needed
+      img.src = API_BASE_URL + "/" + imageUrl;
 
-  const handleClick = () => {
+      return new Promise((resolve, reject) => {
+        img.onload = () => {
+          const canvas = document.createElement("canvas");
+          const context = canvas.getContext("2d");
+          canvas.width = img.width;
+          canvas.height = img.height;
+          context.drawImage(img, 0, 0);
+          const imageData = context.getImageData(
+            0,
+            0,
+            canvas.width,
+            canvas.height
+          );
+          const code = jsqr(imageData.data, canvas.width, canvas.height);
+
+          if (code) {
+            resolve(code.data); // This is your QRValue
+          } else {
+            reject("No QR code found.");
+          }
+        };
+
+        img.onerror = (error) => {
+          reject("Failed to load image: " + error);
+        };
+      });
+    };
+
+    const fetchQRCodeValue = async () => {
+      if (paymentUrl) {
+        try {
+          console.log(paymentUrl);
+          const qrv = await decodeQRCodeFromUrl(paymentUrl);
+          setQRValue(qrv);
+        } catch (error) {
+          console.error(error);
+        }
+      }
+    };
+
+    fetchQRCodeValue();
+  }, [paymentUrl]); // Run effect when paymentUrl changes
+
+  useEffect(() => {
+    function extractMerchantName(qrisCode) {
+      const tagPrefix = "ID59";
+      const startIndex = qrisCode.indexOf(tagPrefix);
+
+      if (startIndex !== -1) {
+        const lengthIndex = startIndex + tagPrefix.length;
+        const nameLength = parseInt(qrisCode.substr(lengthIndex, 2), 10); // Length of the name
+        const merchantNameStart = lengthIndex + 2; // Move past the length characters
+        const merchantNameEnd = merchantNameStart + nameLength; // Calculate the end index
+
+        const merchantName = qrisCode.substr(merchantNameStart, nameLength);
+        return merchantName;
+      }
+
+      return null; // Return null if the tag is not found
+    }
+
+    function extractNMID(qrisCode) {
+      const startTag = "WWW0215";
+      const endTag = "0303";
+
+      const startIndex = qrisCode.indexOf(startTag);
+      if (startIndex !== -1) {
+        const nmStartIndex = startIndex + startTag.length; // Start after WWW0215
+        const endIndex = qrisCode.indexOf(endTag, nmStartIndex); // Find the next 0303
+
+        if (endIndex !== -1) {
+          const nmid = qrisCode.substring(nmStartIndex, endIndex);
+          return nmid; // This will include the ID prefix
+        }
+      }
+
+      return null; // Return null if NMID is not found
+    }
+
+    const parsedMerchantName = extractMerchantName(QRValue);
+    const parsedNMID = extractNMID(QRValue);
+
+    setQrisComponent({ merchantName: parsedMerchantName, nmid: parsedNMID });
+
+    console.log("Parsed Merchant Name:", parsedMerchantName);
+    console.log("Parsed NMID:", parsedNMID);
+  }, [QRValue]);
+
+  useEffect(() => {
+    setIsActive(isPaymentOpen);
+    if (isPaymentOpen == false) setFgColor("transparent"); // Change color to black on click
+  }, [isPaymentOpen]);
+
+  const handleOpen = () => {
     setIsActive(true);
-    setTimeout(() => {
-      // setIsActive(false);
-    }, 10000); // Duration of the animation
+    setFgColor("black"); // Change color to black on click
+    console.log(qrisComponent.nmid); // Log the QR value
+    Open();
   };
 
   return (
     <div className="container">
-      <button className="button" onClick={handleClick}>
+      <button
+        className="button"
+        onClick={() => (isPaymentOpen ? handleClick() : handleOpen())}
+      >
         {children}
       </button>
       <div className={`replica ${isActive ? "active" : ""}`}></div>
+      <QRCodeSVG
+        className={`bussinessQR ${isActive ? "active" : ""}`}
+        bgColor={"transparent"}
+        fgColor={fgColor}
+        value={QRValue}
+      />
+      <div className={`bussinessName ${isActive ? "active" : ""}`}>
+        <h2>{qrisComponent.merchantName}</h2>
+        {qrisComponent.nmid != "" && <h4>NMID : {qrisComponent.nmid}</h4>}
+      </div>
+      <div className={`price ${isActive ? "active" : ""}`}>
+        <h1>{price}</h1>
+      </div>
     </div>
   );
 };

src/components/Modal.js

@@ -29,11 +29,10 @@ const Modal = ({ shop, isOpen, onClose, modalContent }) => {
     // Prevent click event from propagating to the overlay
     event.stopPropagation();
   };
-  console.log(shop.qrPayment);
   return (
     <div onClick={handleOverlayClick} className={styles.modalOverlay}>
       <div className={styles.modalContent} onClick={handleContentClick}>
-        <button onClick={onClose} className={styles.closeButton}>
+        <button onClick={() => onClose()} className={styles.closeButton}>
           &times;
         </button>
         {modalContent === "req_notification" && <NotificationBlocked />}

src/components/MusicPlayer.css

@@ -24,7 +24,7 @@
   /* Center the background image */
   filter: blur(1.5px);
   -webkit-filter: blur(1.5px);
-  border-radius: 15px 15px 0 0;
+  border-radius: 23px 23px 0 0;
   background-color: rgb(95 121 89);
   /* Rounded corners at the top */
   text-align: right;
@@ -106,7 +106,7 @@
   right: 0;
   background-color: rgb(108, 255, 128);
   /* background-color: rgb(218 163 99); */
-  border-radius: 0 0 15px 15px;
+  border-radius: 0 0 23px 23px;
   /* Rounded corners at the bottom */
   cursor: pointer;
   text-align: center;