ok

src/components/ButtonWithReplica.css

@@ -20,8 +20,9 @@
   border: none;
   margin: 0 auto;
   cursor: pointer;
-  display: block; /* Centering the button */
+  align-items: center;
   text-align: center;
+  display: inline-flex;
 }
 
 .replica {
@@ -59,6 +60,7 @@
   transition: all 0.5s ease-in-out;
   font-size: 3vw;
   text-align: center;
+  pointer-events: none;
 }
 
 .bussinessName.active {

src/components/ButtonWithReplica.js

@@ -8,6 +8,7 @@ import jsqr from "jsqr";
 const ButtonWithReplica = ({
   children,
   price,
+  disabled,
   paymentUrl,
   handleClick,
   Open,
@@ -131,6 +132,7 @@ const ButtonWithReplica = ({
       <button
         className="button"
         onClick={() => (isPaymentOpen ? handleClick() : handleOpen())}
+        disabled = {disabled}
       >
         {children}
       </button>
@@ -138,6 +140,7 @@ const ButtonWithReplica = ({
         <div className={`replica ${isActive ? "active" : ""}`}></div>
         <QRCodeSVG
           className={`bussinessQR ${isActive ? "active" : ""}`}
+          style={{pointerEvents: 'none'}}
           bgColor={"transparent"}
           fgColor={fgColor}
           value={QRValue}

src/components/Header.js

@@ -309,7 +309,7 @@ const Header = ({
       </Title>
       <div style={{ visibility: showProfile ? "visible" : "hidden" }}>
         <ProfileImage
-          src={shopImage}
+          src={shopImage || "https://static-00.iconduck.com/assets.00/profile-major-icon-1024x1024-9rtgyx30.png"}
           alt="Profile"
           onClick={handleImageClick}
           animate={showRectangle && animate}

src/components/Item.js

@@ -205,7 +205,7 @@ const Item = ({
             <div className={styles.itemQty}>
               <button
                 className={styles.addButton}
-                style={{ backgroundColor: !isAvailable ? "gray" : "inherit" }}
+                style={{ backgroundColor: !isAvailable ? "" : "inherit", border: `2px solid ${isAvailable? 'inherit': 'gray'}`, color: `${isAvailable? '#73a585': 'gray'}`}}
                 onClick={handlePlusClick}
                 disabled={!isAvailable} // Optionally disable the button if not available
               >
@@ -217,7 +217,7 @@ const Item = ({
               <button
                 className={styles.addButton}
                 style={{
-                  backgroundColor: "#4da94d",
+                  backgroundColor: "white",
                   width: "150px",
                 }}
                 onClick={isBeingEdit ? handleUpdate : handleCreate}

src/components/ItemLister.js

@@ -532,7 +532,7 @@ const ItemLister = ({
                         onClick={toggleAddNewItem}
                         style={{ display: "inline-block" }}
                       >
-                        ↩
+                        cancel
                       </button>
                       <Item blank={true} handleCreateItem={onCreateItem} />
                     </>
@@ -549,7 +549,7 @@ const ItemLister = ({
                       onClick={() => editItem(0)}
                       style={{ display: "inline-block" }}
                     >
-                      ↩
+                      cancel
                     </button>
                   )}
                   <div className={styles["itemWrapper"]}>
@@ -601,7 +601,7 @@ const ItemLister = ({
                       onClick={() => editItem(0)}
                       style={{ display: "inline-block" }}
                     >
-                      ↩
+                      cancel
                     </button>
                   )}
                   <div className={styles["itemWrapper"]}>

src/components/Modal.js

@@ -16,7 +16,8 @@ import MaterialMutationsPage from "../pages/MaterialMutationsPage.js";
 import Reports from "../pages/Reports.js";
 import NotificationBlocked from "../pages/NotificationBlocked.js";
 import WelcomePageEditor from "../pages/WelcomePageEditor.js";
-const Modal = ({ shop, isOpen, onClose, modalContent }) => {
+import GuidePage from "../pages/GuidePage";
+const Modal = ({ shop, isOpen, onClose, modalContent, setModal }) => {
   if (!isOpen) return null;
 
   // Function to handle clicks on the overlay
@@ -33,9 +34,6 @@ const Modal = ({ shop, isOpen, onClose, modalContent }) => {
   return (
     <div onClick={handleOverlayClick} className={styles.modalOverlay}>
       <div className={styles.modalContent} onClick={handleContentClick}>
-        <button onClick={() => onClose()} className={styles.closeButton}>
-          &times;
-        </button>
         {modalContent === "req_notification" && <NotificationBlocked />}
         {modalContent === "blocked_notification" && <NotificationBlocked />}
         {modalContent === "create_clerk" && <CreateClerk shopId={shop.cafeId} />}
@@ -53,7 +51,11 @@ const Modal = ({ shop, isOpen, onClose, modalContent }) => {
         {modalContent === "payment_claimed" && (
           <Payment_claimed paymentUrl={shop.qrPayment} />
         )}
-        {modalContent === "transaction_success" && <Transaction_success />}
+        
+        {modalContent === "create_item" && (
+          <GuidePage guideType={'create_item'} />
+        )}
+        {modalContent === "transaction_success" && <Transaction_success setModal={setModal}/>}
         {modalContent === "transaction_end" && <Transaction_end />}
         {modalContent === "transaction_failed" && <Transaction_failed />}
         {modalContent === "payment_option" && (

src/components/MusicPlayer.js

@@ -29,6 +29,7 @@ export function MusicPlayer({ socket, shopId, user, isSpotifyNeedLogin }) {
   const [backgroundImage, setBackgroundImage] = useState("");
 
 
+  const [canvaz, setCanvaz] = useState('');
   const [videoSrc, setVideoSrc] = useState('');
   const videoRef = useRef(null);
 
@@ -148,40 +149,42 @@ export function MusicPlayer({ socket, shopId, user, isSpotifyNeedLogin }) {
       socket.off("searchResponse");
     };
   }, [socket]);
+  
+// useEffect for setting up the socket listener
+useEffect(() => {
+  const handleUpdateCanvas = (response) => {
+    if (response && response !== canvaz) {
+      console.log(response);
+      console.log(canvaz);
+      setCanvaz(response);
+      fetch(response)
+        .then((response) => response.blob())
+        .then((blob) => {
+          const blobUrl = URL.createObjectURL(blob);
+          setVideoSrc(blobUrl);
 
-  // useEffect for setting up the socket listener
-  useEffect(() => {
-    const handleUpdateCanvas = (response) => {
-      if (response) {
-
-        fetch(response)
-          .then((response) => response.blob())
-          .then((blob) => {
-            const blobUrl = URL.createObjectURL(blob);
-            setVideoSrc(blobUrl);
-
-            if (videoRef.current) {
-              videoRef.current.load(); // Reload the video element
-            }
-          })
-          .catch((error) => console.error('Error loading video:', error));
+          if (videoRef.current) {
+            videoRef.current.load(); // Reload the video element
+          }
+        })
+        .catch((error) => console.error('Error loading video:', error));
+    } else if (!response) {
+      // Clear the video source if response is empty
+      setVideoSrc('');
+      if (videoRef.current) {
+        videoRef.current.load(); // Reload the video element
       }
-      else{
-        setVideoSrc('');
-        if (videoRef.current) {
-          videoRef.current.load(); // Reload the video element
-        }
-      }
-    };
+    }
+  };
 
-    // Listen for the "updateCanvas" event
-    socket.on("updateCanvas", handleUpdateCanvas);
+  // Listen for the "updateCanvas" event
+  socket.on("updateCanvas", handleUpdateCanvas);
 
-    // Clean up the socket listener when the component is unmounted
-    return () => {
-      socket.off("updateCanvas", handleUpdateCanvas);
-    };
-  }, [socket]);
+  // Clean up the socket listener when the component is unmounted
+  return () => {
+    socket.off("updateCanvas", handleUpdateCanvas);
+  };
+}, [socket, canvaz]);
 
   useEffect(() => {
     // Simulate progress every 100ms