Merged in release/2024-11-22 (pull request #1971)

IO-3000 Add back FCM notification subscribe

client/public/firebase-messaging-sw.js

@@ -14,7 +14,7 @@ switch (this.location.hostname) {
       storageBucket: "imex-dev.appspot.com",
       messagingSenderId: "759548147434",
       appId: "1:759548147434:web:e8239868a48ceb36700993",
-      measurementId: "G-K5XRBVVB4S",
+      measurementId: "G-K5XRBVVB4S"
     };
     break;
   case "test.imex.online":
@@ -24,7 +24,7 @@ switch (this.location.hostname) {
       projectId: "imex-test",
       storageBucket: "imex-test.appspot.com",
       messagingSenderId: "991923618608",
-      appId: "1:991923618608:web:633437569cdad78299bef5",
+      appId: "1:991923618608:web:633437569cdad78299bef5"
       // measurementId: "${config.measurementId}",
     };
     break;
@@ -38,7 +38,7 @@ switch (this.location.hostname) {
       storageBucket: "imex-prod.appspot.com",
       messagingSenderId: "253497221485",
       appId: "1:253497221485:web:3c81c483b94db84b227a64",
-      measurementId: "G-NTWBKG2L0M",
+      measurementId: "G-NTWBKG2L0M"
     };
 }
 
@@ -49,8 +49,6 @@ const messaging = firebase.messaging();
 
 messaging.onBackgroundMessage(function (payload) {
   // Customize notification here
-  const channel = new BroadcastChannel("imex-sw-messages");
-  channel.postMessage(payload);
-
-  //self.registration.showNotification(notificationTitle, notificationOptions);
+  console.log("[firebase-messaging-sw.js] Received background message ", payload);
+  self.registration.showNotification(notificationTitle, notificationOptions);
 });

client/src/components/chat-affix/chat-affix.container.jsx

@@ -1,9 +1,12 @@
 import { useApolloClient } from "@apollo/client";
+import { getToken } from "@firebase/messaging";
+import axios from "axios";
 import React, { useContext, useEffect } from "react";
 import { useTranslation } from "react-i18next";
+import SocketContext from "../../contexts/SocketIO/socketContext";
+import { messaging, requestForToken } from "../../firebase/firebase.utils";
 import ChatPopupComponent from "../chat-popup/chat-popup.component";
 import "./chat-affix.styles.scss";
-import SocketContext from "../../contexts/SocketIO/socketContext";
 import { registerMessagingHandlers, unregisterMessagingHandlers } from "./registerMessagingSocketHandlers";
 
 export function ChatAffixContainer({ bodyshop, chatVisible }) {
@@ -14,6 +17,23 @@ export function ChatAffixContainer({ bodyshop, chatVisible }) {
   useEffect(() => {
     if (!bodyshop || !bodyshop.messagingservicesid) return;
 
+    async function SubscribeToTopicForFCMNotification() {
+      try {
+        await requestForToken();
+        await axios.post("/notifications/subscribe", {
+          fcm_tokens: await getToken(messaging, {
+            vapidKey: import.meta.env.VITE_APP_FIREBASE_PUBLIC_VAPID_KEY
+          }),
+          type: "messaging",
+          imexshopid: bodyshop.imexshopid
+        });
+      } catch (error) {
+        console.log("Error attempting to subscribe to messaging topic: ", error);
+      }
+    }
+
+    SubscribeToTopicForFCMNotification();
+
     //Register WS handlers
     if (socket && socket.connected) {
       registerMessagingHandlers({ socket, client });