ok

src/App.js

@@ -53,6 +53,7 @@ function App() {
   const [guestSideOfClerk, setGuestSideOfClerk] = useState(null);
   const [guestSides, setGuestSides] = useState([]);
   const [shopId, setShopId] = useState("");
+  const [shopIdentifier, setShopIdentifier] = useState("");
   const [table, setTable] = useState([]);
   const [totalItemsCount, setTotalItemsCount] = useState(0);
   const [deviceType, setDeviceType] = useState("");
@@ -94,12 +95,12 @@ function App() {
     };
   }, [shopId]);
 
-  const handleSetParam = async ({ shopId, tableCode }) => {
-    setShopId(shopId);
+  const handleSetParam = async ({ shopIdentifier, tableCode }) => {
+    setShopIdentifier(shopIdentifier);
 
     if (tableCode)
       if (table.length == 0) {
-        const gettable = await getTableByCode(shopId, tableCode);
+        const gettable = await getTableByCode(shopIdentifier, tableCode);
         if (gettable) setTable(gettable);
       }
   };
@@ -108,8 +109,9 @@ function App() {
     const fetchData = async () => {
       console.log("gettingItems");
       try {
-        const { response, cafe, data } = await getItemTypesWithItems(shopId);
+        const { response, cafe, data } = await getItemTypesWithItems(shopIdentifier);
         if (response.status === 200) {
+          setShopId(cafe.cafeId)
           setShop(cafe);
           setShopItems(data);
           console.log(data)
@@ -124,11 +126,11 @@ function App() {
           // Update local storage by removing unavailable items
           const updatedLocalStorage =
             JSON.parse(localStorage.getItem("cart")) || [];
-          const newLocalStorage = updatedLocalStorage.map((cafe) => {
-            if (cafe.cafeId === shopId) {
+          const newLocalStorage = updatedLocalStorage.map((cafee) => {
+            if (cafee.cafeId === cafe.cafeId) {
               return {
-                ...cafe,
-                items: cafe.items.filter((item) =>
+                ...cafee,
+                items: cafee.items.filter((item) =>
                   filteredData.some((filtered) =>
                     filtered.itemList.some(
                       (i) => i.itemId === item.itemId && i.availability
@@ -137,7 +139,7 @@ function App() {
                 ),
               };
             }
-            return cafe;
+            return cafee;
           });
           localStorage.setItem("cart", JSON.stringify(newLocalStorage));
 
@@ -150,8 +152,8 @@ function App() {
       }
     };
 
-    if (shopId !== "") fetchData();
-  }, [shopId]);
+    if (shopIdentifier !== "") fetchData();
+  }, [shopIdentifier]);
 
   const rmConnectedGuestSides = async (gueseSideSessionId) => {
     const sessionLeft = await removeConnectedGuestSides(gueseSideSessionId);
@@ -265,7 +267,7 @@ function App() {
       navigate("/guest-side");
     });
 
-    socket.on("updateQueue", ({queue}) => {
+    socket.on("updateQueue", ({ queue }) => {
       setQueue(queue); // Only set the queue if it's a valid non-empty array
       console.log("Updated Queue:", queue); // Log the valid queue
 
@@ -533,10 +535,11 @@ function App() {
             }
           />
           <Route
-            path="/:shopId/:tableCode?"
+            path="/:shopIdentifier/:tableCode?"
             element={
               <>
                 <CafePage
+                  shopId={shopId}
                   table={table}
                   sendParam={handleSetParam}
                   welcomePageConfig={shop.welcomePageConfig || false}
@@ -556,7 +559,7 @@ function App() {
                 />
                 <Footer
                   showTable={true}
-                  shopId={shopId}
+                  shopId={shopIdentifier}
                   table={table}
                   cartItemsLength={totalItemsCount}
                   selectedPage={0}
@@ -565,7 +568,7 @@ function App() {
             }
           />
           <Route
-            path="/:shopId/:tableCode?/search"
+            path="/:shopIdentifier/:tableCode?/search"
             element={
               <>
                 <SearchResult
@@ -579,7 +582,7 @@ function App() {
                   setModal={setModal} // Pass the function to open modal
                 />
                 <Footer
-                  shopId={shopId}
+                  shopId={shopIdentifier}
                   table={table}
                   cartItemsLength={totalItemsCount}
                   selectedPage={1}
@@ -588,10 +591,11 @@ function App() {
             }
           />
           <Route
-            path="/:shopId/:tableCode?/cart"
+            path="/:shopIdentifier/:tableCode?/cart"
             element={
               <>
                 <Cart
+                shopId={shopId}
                   table={table}
                   sendParam={handleSetParam}
                   socket={socket}
@@ -599,7 +603,7 @@ function App() {
                   deviceType={deviceType}
                 />
                 <Footer
-                  shopId={shopId}
+                  shopId={shopIdentifier}
                   table={table}
                   cartItemsLength={totalItemsCount}
                   selectedPage={2}
@@ -608,17 +612,18 @@ function App() {
             }
           />
           <Route
-            path="/:shopId/:tableCode?/invoice"
+            path="/:shopIdentifier/:tableCode?/invoice"
             element={
               <>
                 <Invoice
+                shopId={shopId}
                   table={table}
                   sendParam={handleSetParam}
                   socket={socket}
                   deviceType={deviceType}
                 />
                 <Footer
-                  shopId={shopId}
+                  shopId={shopIdentifier}
                   table={table}
                   cartItemsLength={totalItemsCount}
                   selectedPage={2}
@@ -627,15 +632,16 @@ function App() {
             }
           />
           <Route
-            path="/:shopId/:tableCode?/transactions"
+            path="/:shopIdentifier/:tableCode?/transactions"
             element={
               <>
                 <Transactions
+                shopId={shopId}
                   sendParam={handleSetParam}
                   deviceType={deviceType}
                 />
                 <Footer
-                  shopId={shopId}
+                  shopId={shopIdentifier}
                   table={table}
                   cartItemsLength={totalItemsCount}
                   selectedPage={3}
@@ -644,7 +650,7 @@ function App() {
             }
           />
           <Route
-            path="/:shopId/guest-side-login"
+            path="/:shopIdentifier/guest-side-login"
             element={<GuestSideLogin shopId={shopId} socket={socket} />}
           />
           <Route path="/guest-side" element={<GuestSide socket={socket} />} />