working on clerk notification

src/App.js

@@ -83,12 +83,7 @@ function App() {
           setShopItems(data);
           console.log(data);
           // setLoading(false);
-          socket.emit("join-room", { token: getLocalStorage("auth"), shopId });
-
-          socket.on("joined-room", (response) => {
-            // const { isSpotifyNeedLogin } = response;
-            // setNeedSpotifyLogin(isSpotifyNeedLogin);
-          });
+          // socket.emit("join-room", { token: getLocalStorage("auth"), shopId });
 
           socket.on("transaction_created", () => {
             console.log("transaction created");
@@ -127,17 +122,19 @@ function App() {
   // }, [navigate, socket, shopId]);
 
   useEffect(() => {
-    if (getLocalStorage("auth")) {
-      console.log("emitting");
-      socket.emit("checkUserToken", {
-        token: getLocalStorage("auth"),
-      });
-    } else if (getLocalStorage("authGuestSide")) {
+    if (socket == null) return;
+
+    if (getLocalStorage("authGuestSide")) {
       socket.emit("checkGuestSideToken", {
         token: getLocalStorage("authGuestSide"),
       });
+    } else {
+      console.log("emitting");
+      socket.emit("checkUserToken", {
+        token: getLocalStorage("auth"),
+        shopId,
+      });
     }
-    setDeviceType("guestDevice");
 
     socket.on("transaction_created", async (data) => {
       console.log("transaction notification");
@@ -145,13 +142,11 @@ function App() {
 
     socket.on("checkUserTokenRes", async (data) => {
       if (data.status !== 200) {
-        removeLocalStorage("authGuestSide");
         removeLocalStorage("auth");
-        console.log("auth failed");
+        setDeviceType("guestDevice");
+        console.log("guestDevice");
       } else {
         console.log("auth success");
-        console.log(data.data.user);
-
         setUser(data.data.user);
         if (data.data.user.cafeId == shopId) {
           const connectedGuestSides = await getConnectedGuestSides();
@@ -166,7 +161,6 @@ function App() {
     socket.on("checkGuestSideTokenRes", (data) => {
       if (data.status !== 200) {
         removeLocalStorage("authGuestSide");
-        removeLocalStorage("auth");
         navigate("/guest-side");
         console.log("isntguestside");
       } else {
@@ -187,7 +181,7 @@ function App() {
     return () => {
       socket.off("signout-guest-session");
     };
-  }, [navigate, socket]);
+  }, [socket, shopId]);
 
   return (
     <div className="App">
@@ -257,6 +251,7 @@ function App() {
                 <Cart
                   sendParam={handleSetParam}
                   totalItemsCount={totalItemsCount}
+                  deviceType={deviceType}
                 />
                 <Footer
                   shopId={shopId}

src/components/Footer.js

@@ -30,7 +30,7 @@ export default function Footer({ shopId, cartItemsLength, selectedPage }) {
 
         {/* Cart Icon */}
         <div onClick={goToCart} className={styles["footer-icon"]}>
-          {cartItemsLength !== "0" && (
+          {cartItemsLength != "0" && (
             <div className={styles.circle}>{cartItemsLength}</div>
           )}
           <svg

src/helpers/navigationHelpers.js

@@ -31,7 +31,7 @@ export const useNavigationHelpers = (params) => {
         `/${params}/invoice?orderType=${orderType}&tableNumber=${tableNumber}&email=${email}`,
       );
     } else {
-      navigate(`/${params}/invoice?orderType=${orderType}}&email=${email}`);
+      navigate(`/${params}/invoice?orderType=${orderType}&email=${email}`);
     }
   };
 

src/helpers/transactionHelpers.js

@@ -1,5 +1,5 @@
 import API_BASE_URL from "../config.js";
-import { getLocalStorage } from "./localStorageHelpers";
+import { getLocalStorage, updateLocalStorage } from "./localStorageHelpers";
 import { getItemsByCafeId } from "../helpers/cartHelpers.js";
 
 export const handlePaymentFromClerk = async (
@@ -148,6 +148,8 @@ export const handlePaymentFromGuestDevice = async (
     if (response.ok) {
       // Handle success response
       console.log("Transaction successful!");
+      const data = await response.json();
+      updateLocalStorage("auth", data.auth);
       // Optionally return response data or handle further actions upon success
       return true;
     } else {

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,