working on clerk notification

src/pages/CafePage.js

@@ -37,7 +37,7 @@ function CafePage({
   const [loading, setLoading] = useState(true);
   const [screenMessage, setScreenMessage] = useState("");
 
-  const [isSpotifyNeedLogin, setNeedSpotifyLogin] = useState(false);
+  const [isSpotifyNeedLogin, setNeedSpotifyLogin] = useState(true);
   const [isModalOpen, setIsModalOpen] = useState(false);
 
   useEffect(() => {
@@ -67,6 +67,17 @@ function CafePage({
     setLoading(false);
   }, [shopItems]);
 
+  useEffect(() => {
+    async function fetchData() {
+      socket.on("joined-room", (response) => {
+        const { isSpotifyNeedLogin } = response;
+        setNeedSpotifyLogin(isSpotifyNeedLogin);
+      });
+    }
+
+    if (socket) fetchData();
+  }, [socket]);
+
   if (loading)
     return (
       <div className="Loader">

src/pages/Cart.js

@@ -9,7 +9,7 @@ import { getCartDetails } from "../helpers/itemHelper.js";
 import { getItemsByCafeId } from "../helpers/cartHelpers"; // Import getItemsByCafeId
 import Modal from "../components/Modal"; // Import the reusable Modal component
 
-export default function Cart({ sendParam, totalItemsCount }) {
+export default function Cart({ sendParam, totalItemsCount, deviceType }) {
   const { shopId } = useParams();
   sendParam(shopId);
 
@@ -166,17 +166,18 @@ export default function Cart({ sendParam, totalItemsCount }) {
             itemList={itemType.itemList}
           />
         ))}
-
-        <div className={styles.EmailContainer}>
-          <label htmlFor="email">Email:</label>
-          <input
-            type="email"
-            id="email"
-            value={email}
-            onChange={handleEmailChange}
-            className={styles.EmailInput}
-          />
-        </div>
+        {deviceType != "guestDevice" && (
+          <div className={styles.EmailContainer}>
+            <label htmlFor="email">Email:</label>
+            <input
+              type="email"
+              id="email"
+              value={email}
+              onChange={handleEmailChange}
+              className={styles.EmailInput}
+            />
+          </div>
+        )}
         <div className={styles.OrderTypeContainer}>
           <span htmlFor="orderType">Order Type:</span>
           <select

src/pages/Invoice.js

@@ -64,7 +64,7 @@ export default function Invoice({ sendParam, deviceType }) {
         orderType,
         tableNumber,
       );
-    } else if (deviceType == "guestDevice") {
+    } else if (deviceType == "guestSide") {
       const pay = await handlePaymentFromGuestSide(
         shopId,
         email,