From 58848481c9b1633b1c78845209abbb8a245fc35e Mon Sep 17 00:00:00 2001
From: Patrick Fic <>
Date: Wed, 8 Dec 2021 17:05:44 -0800
Subject: [PATCH] IO-1551 Polling mode for unsupported browsers.

---
 bodyshop_translations.babel                   | 21 ++++++++++
 client/public/firebase-messaging-sw.js        |  1 -
 .../chat-affix/chat-affix.container.jsx       | 22 ++++++-----
 .../chat-popup/chat-popup.component.jsx       | 39 ++++++++++++-------
 client/src/firebase/firebase.utils.js         |  9 ++++-
 .../pages/manage/manage.page.component.jsx    |  6 ++-
 client/src/translations/en_us/common.json     |  1 +
 client/src/translations/es/common.json        |  1 +
 client/src/translations/fr/common.json        |  1 +
 9 files changed, 74 insertions(+), 27 deletions(-)

diff --git a/bodyshop_translations.babel b/bodyshop_translations.babel
index 3c2411d57..06913c288 100644
--- a/bodyshop_translations.babel
+++ b/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>
diff --git a/client/public/firebase-messaging-sw.js b/client/public/firebase-messaging-sw.js
index 3bf458e19..7ee3f3d98 100644
--- a/client/public/firebase-messaging-sw.js
+++ b/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);
diff --git a/client/src/components/chat-affix/chat-affix.container.jsx b/client/src/components/chat-affix/chat-affix.container.jsx
index 02f7289ac..55fab18bd 100644
--- a/client/src/components/chat-affix/chat-affix.container.jsx
+++ b/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]);
 
diff --git a/client/src/components/chat-popup/chat-popup.component.jsx b/client/src/components/chat-popup/chat-popup.component.jsx
index b30710a0c..85a862689 100644
--- a/client/src/components/chat-popup/chat-popup.component.jsx
+++ b/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()}
diff --git a/client/src/firebase/firebase.utils.js b/client/src/firebase/firebase.utils.js
index 19f4b6706..87f5189e7 100644
--- a/client/src/firebase/firebase.utils.js
+++ b/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
diff --git a/client/src/pages/manage/manage.page.component.jsx b/client/src/pages/manage/manage.page.component.jsx
index 7e8571d23..836b73f6d 100644
--- a/client/src/pages/manage/manage.page.component.jsx
+++ b/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(() => {
diff --git a/client/src/translations/en_us/common.json b/client/src/translations/en_us/common.json
index 533dc579d..316f315b2 100644
--- a/client/src/translations/en_us/common.json
+++ b/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.",
diff --git a/client/src/translations/es/common.json b/client/src/translations/es/common.json
index b29eea831..2c8dd2ddc 100644
--- a/client/src/translations/es/common.json
+++ b/client/src/translations/es/common.json
@@ -1766,6 +1766,7 @@
 				"messaging": "Mensajería",
 				"noallowtxt": "",
 				"nojobs": "",
+				"nopush": "",
 				"phonenumber": "",
 				"presets": "",
 				"recentonly": "",
diff --git a/client/src/translations/fr/common.json b/client/src/translations/fr/common.json
index 581f98b86..ad44e8d23 100644
--- a/client/src/translations/fr/common.json
+++ b/client/src/translations/fr/common.json
@@ -1766,6 +1766,7 @@
 				"messaging": "Messagerie",
 				"noallowtxt": "",
 				"nojobs": "",
+				"nopush": "",
 				"phonenumber": "",
 				"presets": "",
 				"recentonly": "",