Changed the intercom to aprovider model

frontend/src/components/utilities/intercom/intercom.ts

@@ -0,0 +1,64 @@
+/* eslint-disable prefer-template */
+/* eslint-disable prefer-rest-params */
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+/* eslint-disable no-nested-ternary */
+/* eslint-disable no-unexpected-multiline */
+/* eslint-disable react-hooks/exhaustive-deps */
+/* eslint-disable vars-on-top */
+/* eslint-disable no-var */
+/* eslint-disable func-names */
+// @ts-nocheck
+
+import { INTERCOM_ID as APP_ID } from '@app/components/utilities/config';
+
+// Loads Intercom with the snippet
+// This must be run before boot, it initializes window.Intercom
+
+// prettier-ignore
+export const load = () => {
+  (function(){
+    var w=window;
+    var ic=w.Intercom;
+    
+    if(typeof ic==="function"){
+      ic('reattach_activator');
+      ic('update',w.intercomSettings);
+    } else {
+      var d=document;
+      var i=function() {
+        i.c(arguments);
+      };
+      i.q=[];
+      i.c=function(args) {
+        i.q.push(args);
+      };
+      w.Intercom=i;
+      var l=function() {
+        var s=d.createElement('script');
+        s.type='text/javascript';
+        s.async=true;
+        s.src='https://widget.intercom.io/widget/' + APP_ID;
+        var x=d.getElementsByTagName('script')[0];
+        x.parentNode.insertBefore(s, x);
+      };
+      if (document.readyState==='complete') {
+        l();
+      } else if (w.attachEvent) {
+        w.attachEvent('onload',l);
+      } else {
+        w.addEventListener('load',l,false);
+      }
+    }
+  })();
+}
+
+// Initializes Intercom
+export const boot = (options = {}) => {
+  window &&
+    window.Intercom &&
+    window.Intercom("boot", { app_id: APP_ID, ...options });
+};
+
+export const update = () => {
+  window && window.Intercom && window.Intercom("update");
+};

frontend/src/components/utilities/intercom/intercomProvider.ts

@@ -0,0 +1,37 @@
+import { useEffect } from "react";
+import { useRouter } from "next/router";
+
+import {
+  boot as bootIntercom,
+  load as loadIntercom,
+  update as updateIntercom,
+} from "./intercom";
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const IntercomProvider = ({ children }: { children: any }) => {
+  const router = useRouter();
+
+  if (typeof window !== "undefined") {
+    loadIntercom();
+    bootIntercom();
+  }
+
+  useEffect(() => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const handleRouteChange = (url: string) => {
+      if (typeof window !== "undefined") {
+        updateIntercom();
+      }
+    };
+
+    router.events.on("routeChangeStart", handleRouteChange);
+
+    // If the component is unmounted, unsubscribe
+    // from the event with the `off` method:
+    return () => {
+      router.events.off("routeChangeStart", handleRouteChange);
+    };
+  }, [router.events]);
+
+  return children;
+};

frontend/src/layouts/AppLayout/AppLayout.tsx

@@ -21,7 +21,6 @@ import * as yup from 'yup';
 import { useNotificationContext } from '@app/components/context/Notifications/NotificationProvider';
 import onboardingCheck from '@app/components/utilities/checks/OnboardingCheck';
 import { tempLocalStorage } from '@app/components/utilities/checks/tempLocalStorage';
-import { INTERCOM_ID } from '@app/components/utilities/config';
 import { encryptAssymmetric } from '@app/components/utilities/cryptography/crypto';
 import {
   Button,
@@ -90,46 +89,6 @@ export const AppLayout = ({ children }: LayoutProps) => {
 
   const { t } = useTranslation();
 
-  useEffect(() => {
-		// Intercom code snippet
-		(function() {
-			var w=window;var ic=w.Intercom;
-			if(typeof ic==="function") {
-				ic('reattach_activator');
-				ic('update',w.intercomSettings);
-			} else {
-				var d=document;
-				var i=function() {
-					// eslint-disable-next-line prefer-rest-params
-					i.c(arguments);
-				}; 
-				i.q=[]; 
-				i.c=function(args) {
-					i.q.push(args);
-				};
-				w.Intercom=i;
-				var l=function() { 
-					var s=d.createElement('script');
-					s.type='text/javascript';
-					s.async=true;
-					s.src=`https://widget.intercom.io/widget/${INTERCOM_ID}`;
-					var x=d.getElementsByTagName('script')[0];
-					x.parentNode.insertBefore(s,x);};
-					if(w.attachEvent) { 
-						w.attachEvent('onload',l); 
-					} else {
-						w.addEventListener('load',l,false);
-					}
-				}
-			}
-		)();
-
-		window.Intercom('boot', {
-			app_id: {INTERCOM_ID} || "undefined",
-      email: user?.email || 'undefined'
-		});
-	}, []);
-
 	useEffect(() => {
 		const handleRouteChange = () => {
 			(window).Intercom('update');

frontend/src/pages/_app.tsx

@@ -11,6 +11,7 @@ import { config } from '@fortawesome/fontawesome-svg-core';
 import { QueryClientProvider } from '@tanstack/react-query';
 
 import NotificationProvider from '@app/components/context/Notifications/NotificationProvider';
+import { IntercomProvider } from '@app/components/utilities/intercom/intercomProvider';
 import Telemetry from '@app/components/utilities/telemetry/Telemetry';
 import { TooltipProvider } from '@app/components/v2';
 import { publicPaths } from '@app/const';
@@ -81,9 +82,11 @@ const App = ({ Component, pageProps, ...appProps }: NextAppProp): JSX.Element =>
               <SubscriptionProvider>
                 <UserProvider>
                   <NotificationProvider>
-                    <AppLayout>
-                      <Component {...pageProps} />
-                    </AppLayout>
+                    <IntercomProvider>
+                      <AppLayout>
+                        <Component {...pageProps} />
+                      </AppLayout>
+                    </IntercomProvider>
                   </NotificationProvider>
                 </UserProvider>
               </SubscriptionProvider>