ok

src/pages/CafePage.js

@@ -1,7 +1,7 @@
 // src/CafePage.js
 
 import React, { useState, useEffect } from "react";
-import { useParams, useSearchParams, useNavigate } from "react-router-dom";
+import { useParams, useSearchParams, useNavigate, useLocation } from "react-router-dom";
 
 import "../App.css";
 import SearchInput from "../components/SearchInput";
@@ -33,6 +33,7 @@ function CafePage({
   removeConnectedGuestSides,
   setModal,
 }) {
+  const location = useLocation();
   const [searchParams] = useSearchParams();
   const token = searchParams.get("token");
   const { shopId, tableCode } = useParams();
@@ -50,10 +51,15 @@ function CafePage({
   const [filterId, setFilterId] = useState(0);
 
   useEffect(() => {
-    if (user.cafeId != null && user.cafeId != shopId) {
-      navigate("/" + user.cafeId);
+    if (user.cafeId != null && user.cafeId !== shopId) {
+      // Preserve existing query parameters
+      const currentParams = new URLSearchParams(location.search).toString();
+      
+      // Navigate to the new cafeId while keeping existing params
+      navigate(`/${user.cafeId}?${currentParams}`, { replace: true });
     }
-  }, [user]);
+  }, [user, shopId]);
+  
 
   useEffect(() => {
     if (token) {

src/pages/NotificationBlocked.js

@@ -1,16 +1,15 @@
-// NotificationBlocked.js
 import React from "react";
 
 const NotificationBlocked = () => {
   return (
     <div style={styles.container}>
-      <h2 style={styles.header}>Notifications Blocked</h2>
+      <h2 style={styles.header}>Heads Up! Notifications Are Off</h2>
       <p style={styles.message}>
-        It looks like notifications are currently blocked in your browser.
-        Enabling notifications will help you receive important updates, such as
-        new orders or alerts, directly on your device.
+        It looks like you’ve got notifications turned off. Turning them on will
+        make sure you get important updates, like new orders or alerts, right on
+        your device.
       </p>
-      <h3 style={styles.instructionsHeader}>To enable notifications:</h3>
+      <h3 style={styles.instructionsHeader}>Here’s how to turn them on:</h3>
       <ol style={styles.instructions}>
         <li>Open Chrome and go to our café's website.</li>
         <li>Tap the menu (three dots) in the top-right corner.</li>
@@ -19,13 +18,12 @@ const NotificationBlocked = () => {
           &gt; <strong>Notifications</strong>.
         </li>
         <li>
-          Find our café's site in the list and change the setting to{" "}
-          <strong>Allow</strong>.
+          Find our café in the list and set it to <strong>Allow</strong>.
         </li>
       </ol>
       <p style={styles.footer}>
-        Once you enable notifications, you'll start receiving updates right
-        away! If you need help, feel free to ask!
+        Once you’ve turned on notifications, you’ll start getting updates
+        instantly. Need a hand? Just ask!
       </p>
     </div>
   );