- Checkpoint

Signed-off-by: Dave Richer <dave@imexsystems.ca>

client/src/pages/manage/manage.page.component.jsx

@@ -18,12 +18,13 @@ import LoadingSpinner from "../../components/loading-spinner/loading-spinner.com
 import PartnerPingComponent from "../../components/partner-ping/partner-ping.component";
 import PrintCenterModalContainer from "../../components/print-center-modal/print-center-modal.container";
 import ShopSubStatusComponent from "../../components/shop-sub-status/shop-sub-status.component";
-import { requestForToken } from "../../firebase/firebase.utils";
+import { auth } from "../../firebase/firebase.utils";
 import { selectBodyshop, selectInstanceConflict } from "../../redux/user/user.selectors";
 
 import UpdateAlert from "../../components/update-alert/update-alert.component";
 import InstanceRenderManager from "../../utils/instanceRenderMgr.js";
 import "./manage.page.styles.scss";
+import SocketIO from "socket.io-client";
 
 const JobsPage = lazy(() => import("../jobs/jobs.page"));
 
@@ -110,17 +111,47 @@ const mapDispatchToProps = (dispatch) => ({});
 export function Manage({ conflict, bodyshop }) {
   const { t } = useTranslation();
   const [chatVisible] = useState(false);
+  const [socket, setSocket] = useState(null); // State for Socket.IO connection
 
   useEffect(() => {
-    const widgetId = InstanceRenderManager({
-      imex: "IABVNO4scRKY11XBQkNr",
-      rome: "mQdqARMzkZRUVugJ6TdS"
-    });
-    window.noticeable.render("widget", widgetId);
-    requestForToken().catch((error) => {
-      console.error(`Unable to request for token.`, error);
-    });
-  }, []);
+    if (bodyshop && bodyshop.id) {
+      const endpoint = import.meta.env.PROD ? import.meta.env.VITE_APP_AXIOS_BASE_API_URL : "http://localhost:3000"; // Use Vite proxy in development
+
+      const socketInstance = SocketIO(endpoint, {
+        path: "/ws", // Ensure this matches the Vite proxy and backend path
+        withCredentials: true,
+        auth: async (callback) => {
+          const token = auth.currentUser && (await auth.currentUser.getIdToken());
+          callback({ token });
+        }
+      });
+
+      setSocket(socketInstance);
+
+      socketInstance.on("connect", () => {
+        console.log("Socket connected:", socketInstance.id);
+        socketInstance.emit("join-bodyshop-room", bodyshop.id);
+      });
+
+      socketInstance.on("bodyshop-message", (message) => {
+        console.log(`Received message for bodyshop ${bodyshop.id}:`, message);
+      });
+
+      socketInstance.on("connect_error", (err) => {
+        console.error("Socket connection error:", err);
+      });
+
+      socketInstance.on("disconnect", () => {
+        console.log("Socket disconnected");
+      });
+
+      return () => {
+        socketInstance.emit("leave-bodyshop-room", bodyshop.id);
+        socketInstance.off("bodyshop-message");
+        socketInstance.disconnect();
+      };
+    }
+  }, [bodyshop]);
 
   useEffect(() => {
     document.title = InstanceRenderManager({
@@ -129,6 +160,7 @@ export function Manage({ conflict, bodyshop }) {
       promanager: t("titles.promanager")
     });
   }, [t]);
+
   const AppRouteTable = (
     <Suspense
       fallback={
@@ -569,6 +601,13 @@ export function Manage({ conflict, bodyshop }) {
   else if (bodyshop && bodyshop.sub_status !== "active") PageContent = <ShopSubStatusComponent />;
   else PageContent = AppRouteTable;
 
+  const broadcastMessage = () => {
+    if (socket && bodyshop && bodyshop.id) {
+      socket.emit("broadcast-to-bodyshop", bodyshop.id, "Hello");
+      console.log(`Broadcasting message to bodyshop ${bodyshop.id}: ${"hello"}`);
+    }
+  };
+
   return (
     <>
       {import.meta.env.PROD && <ChatAffixContainer bodyshop={bodyshop} chatVisible={chatVisible} />}
@@ -603,6 +642,8 @@ export function Manage({ conflict, bodyshop }) {
               </div>
               <div id="noticeable-widget" style={{ marginLeft: "1rem" }} />
             </div>
+            <button onClick={broadcastMessage}>Broadcast Message</button>
+
             <Link to="/disclaimer" target="_blank" style={{ color: "#ccc" }}>
               Disclaimer & Notices
             </Link>