IO-1551 Polling mode for unsupported browsers.

bodyshop_translations.babel

@@ -29927,6 +29927,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>nopush</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>phonenumber</name>
                                         <definition_loaded>false</definition_loaded>

client/public/firebase-messaging-sw.js

@@ -48,7 +48,6 @@ firebase.initializeApp(firebaseConfig);
 const messaging = firebase.messaging();
 
 messaging.onBackgroundMessage(function (payload) {
-  console.log("FCM BG MSG", payload);
   // Customize notification here
   const channel = new BroadcastChannel("imex-sw-messages");
   channel.postMessage(payload);

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

@@ -46,11 +46,8 @@ export function ChatAffixContainer({ bodyshop, chatVisible }) {
             <Space>
               <Button
                 onClick={async () => {
-                  const resp = await requestForToken();
-                  console.log(
-                    "🚀  ~ file: chat-affix.container.jsx  ~ line 44  ~ resp",
-                    resp
-                  );
+                  await requestForToken();
+
                   SubscribeToTopic();
                 }}
               >
@@ -84,12 +81,17 @@ export function ChatAffixContainer({ bodyshop, chatVisible }) {
         payload: (payload && payload.data && payload.data.data) || payload.data,
       });
     }
-    const stopMessageListenr = onMessage(messaging, handleMessage);
-    const channel = new BroadcastChannel("imex-sw-messages");
-    channel.addEventListener("message", handleMessage);
+    let stopMessageListenr, channel;
+    try {
+      stopMessageListenr = onMessage(messaging, handleMessage);
+      channel = new BroadcastChannel("imex-sw-messages");
+      channel.addEventListener("message", handleMessage);
+    } catch (error) {
+      console.log("Unable to set event listeners.");
+    }
     return () => {
-      stopMessageListenr();
-      channel.removeEventListener("message", handleMessage);
+      stopMessageListenr && stopMessageListenr();
+      channel && channel.removeEventListener("message", handleMessage);
     };
   }, [client]);
 

client/src/components/chat-popup/chat-popup.component.jsx

@@ -1,27 +1,26 @@
 import {
-  ShrinkOutlined,
   InfoCircleOutlined,
+  MessageOutlined,
+  ShrinkOutlined,
   SyncOutlined,
 } from "@ant-design/icons";
-
-import { Col, Row, Tooltip, Space, Typography, Badge, Card } from "antd";
-import React, { useEffect } from "react";
+import { useQuery } from "@apollo/client";
+import { Badge, Card, Col, Row, Space, Tag, Tooltip, Typography } from "antd";
+import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
+import { CONVERSATION_LIST_QUERY } from "../../graphql/conversations.queries";
 import { toggleChatVisible } from "../../redux/messaging/messaging.actions";
-import ChatConversationListComponent from "../chat-conversation-list/chat-conversation-list.component";
-import ChatConversationContainer from "../chat-conversation/chat-conversation.container";
 import {
   selectChatVisible,
   selectSelectedConversation,
 } from "../../redux/messaging/messaging.selectors";
-import "./chat-popup.styles.scss";
+import ChatConversationListComponent from "../chat-conversation-list/chat-conversation-list.component";
+import ChatConversationContainer from "../chat-conversation/chat-conversation.container";
 import ChatNewConversation from "../chat-new-conversation/chat-new-conversation.component";
-import { CONVERSATION_LIST_QUERY } from "../../graphql/conversations.queries";
-import { useQuery } from "@apollo/client";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
-import { MessageOutlined } from "@ant-design/icons";
+import "./chat-popup.styles.scss";
 
 const mapStateToProps = createStructuredSelector({
   selectedConversation: selectSelectedConversation,
@@ -37,11 +36,20 @@ export function ChatPopupComponent({
   toggleChatVisible,
 }) {
   const { t } = useTranslation();
+  const [pollInterval, setpollInterval] = useState(0);
+  const { loading, data, refetch, called } = useQuery(CONVERSATION_LIST_QUERY, {
+    ...(pollInterval > 0 ? { pollInterval } : {}),
+  });
 
-  const { loading, data, refetch, called } = useQuery(
-    CONVERSATION_LIST_QUERY,
-    {}
-  );
+  const fcmToken = sessionStorage.getItem("fcmtoken");
+
+  useEffect(() => {
+    if (fcmToken) {
+      setpollInterval(0);
+    } else {
+      setpollInterval(60000);
+    }
+  }, [fcmToken]);
 
   useEffect(() => {
     if (called && chatVisible) refetch();
@@ -71,6 +79,9 @@ export function ChatPopupComponent({
                 style={{ cursor: "pointer" }}
                 onClick={() => refetch()}
               />
+              {pollInterval > 0 && (
+                <Tag color="yellow">{t("messaging.labels.nopush")}</Tag>
+              )}
             </Space>
             <ShrinkOutlined
               onClick={() => toggleChatVisible()}

client/src/firebase/firebase.utils.js

@@ -38,8 +38,14 @@ export const updateCurrentPassword = async (password) => {
 
   return updatePassword(currentUser, password);
 };
+let messaging;
+try {
+  messaging = getMessaging();
+} catch (error) {
+  console.log(error);
+}
 
-export const messaging = getMessaging();
+export { messaging };
 
 export const requestForToken = () => {
   return getToken(messaging, {
@@ -48,6 +54,7 @@ export const requestForToken = () => {
     .then((currentToken) => {
       if (currentToken) {
         console.log("current token for client: ", currentToken);
+        window.sessionStorage.setItem("fcmtoken", currentToken);
         // Perform any other necessary action with the token
       } else {
         // Show permission request UI

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

@@ -185,7 +185,11 @@ export function Manage({ match, conflict, bodyshop }) {
   useEffect(() => {
     const widgetId = "IABVNO4scRKY11XBQkNr";
     window.noticeable.render("widget", widgetId);
-    requestForToken();
+    try {
+      requestForToken();
+    } catch (error) {
+      console.log("Unable to request for token.", error);
+    }
   }, []);
 
   useEffect(() => {

client/src/translations/en_us/common.json

@@ -1766,6 +1766,7 @@
 				"messaging": "Messaging",
 				"noallowtxt": "This customer has not indicated their permission to be messaged.",
 				"nojobs": "Not associated to any job.",
+				"nopush": "Polling Mode Enabled",
 				"phonenumber": "Phone #",
 				"presets": "Presets",
 				"recentonly": "Only your most recent 50 conversations will be shown here. If you are looking for an older conversation, find the related contact and click their phone number to view the conversation.",

client/src/translations/es/common.json

@@ -1766,6 +1766,7 @@
 				"messaging": "Mensajería",
 				"noallowtxt": "",
 				"nojobs": "",
+				"nopush": "",
 				"phonenumber": "",
 				"presets": "",
 				"recentonly": "",

client/src/translations/fr/common.json

@@ -1766,6 +1766,7 @@
 				"messaging": "Messagerie",
 				"noallowtxt": "",
 				"nojobs": "",
+				"nopush": "",
 				"phonenumber": "",
 				"presets": "",
 				"recentonly": "",