From 41dd2fda8afbc4a3f862e07de067e5156570c6e3 Mon Sep 17 00:00:00 2001 From: Vladyslav Matsiiako Date: Mon, 12 Jun 2023 21:42:29 -0700 Subject: [PATCH] Changed the intercom to aprovider model --- .../components/utilities/intercom/intercom.ts | 64 +++++++++++++++++++ .../utilities/intercom/intercomProvider.ts | 37 +++++++++++ frontend/src/layouts/AppLayout/AppLayout.tsx | 41 ------------ frontend/src/pages/_app.tsx | 9 ++- 4 files changed, 107 insertions(+), 44 deletions(-) create mode 100644 frontend/src/components/utilities/intercom/intercom.ts create mode 100644 frontend/src/components/utilities/intercom/intercomProvider.ts diff --git a/frontend/src/components/utilities/intercom/intercom.ts b/frontend/src/components/utilities/intercom/intercom.ts new file mode 100644 index 000000000..c2cb3f597 --- /dev/null +++ b/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"); +}; \ No newline at end of file diff --git a/frontend/src/components/utilities/intercom/intercomProvider.ts b/frontend/src/components/utilities/intercom/intercomProvider.ts new file mode 100644 index 000000000..e7944a7b1 --- /dev/null +++ b/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; +}; \ No newline at end of file diff --git a/frontend/src/layouts/AppLayout/AppLayout.tsx b/frontend/src/layouts/AppLayout/AppLayout.tsx index 97b27f885..643d7376d 100644 --- a/frontend/src/layouts/AppLayout/AppLayout.tsx +++ b/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'); diff --git a/frontend/src/pages/_app.tsx b/frontend/src/pages/_app.tsx index 5c5f95564..c1a561261 100644 --- a/frontend/src/pages/_app.tsx +++ b/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 => - - - + + + + +