Conditionally hide ZE chat widget using react-zendesk

package.json

@@ -72,6 +72,7 @@
     "react-dom": "18.2.0",
     "react-markdown": "^8.0.3",
     "react-use-measure": "^2.1.1",
+    "react-zendesk": "^0.1.13",
     "subscriptions-transport-ws": "^0.11.0",
     "tailwindcss": "^3.1.6",
     "twin.macro": "^3.0.0-rc.3",

src/components/Layout/LayoutApp.tsx

@@ -1,6 +1,7 @@
 import { Icon } from "@iconify/react";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
+import Zendesk, { ZendeskAPI } from "react-zendesk";
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import tw from "twin.macro";
 
@@ -13,6 +14,7 @@ import {
   styledNavButton,
   styledTrigger,
 } from "src/components";
+import config from "src/config";
 import { useDeviceDetect } from "src/hooks";
 
 interface Props {
@@ -36,8 +38,31 @@ const LayoutApp = ({ children, renderNavMobile }: Props) => {
   const [isOpen, setIsOpen] = useState(false);
   useEffect(() => setIsOpen(false), [router.asPath]);
 
+  // ZE
+  useEffect(() => {
+    const hideZendesk = config.routesToHideZendeskWidget.some((path) =>
+      router.pathname.startsWith(path),
+    );
+    console.log("hideZendesk", hideZendesk);
+
+    if (hideZendesk) {
+      ZendeskAPI("webWidget", "hide");
+    }
+
+    return () => {
+      ZendeskAPI("webWidget", "show");
+    };
+  }, []);
+
   return (
     <>
+      {/* CHAT */}
+      <Zendesk
+        defer
+        zendeskKey={config.ZENDESK_WIDGET_KEY}
+        onLoaded={() => console.log("ZE is loaded")}
+      />
+
       {/* NAVBAR */}
       {!isSendPath && (
         <div tw="fixed top-0 left-0 right-0 bg-background">

src/config/index.ts

@@ -11,7 +11,7 @@ const generalConfig = {
   vanaExploreURL: "https://explore.vana.com",
 
   ZENDESK_WIDGET_KEY: "ae33c673-67c2-4bb9-96a4-3b62821d9567",
-  routesToHideZendeskWidget: ["/share"],
+  routesToHideZendeskWidget: ["/share", "/login"],
 
   preSignedObjectURLTTLInMilliseconds: 10 * 60 * 1000, // Valid for 10 minutes
   maxFileUploadSize: 2147483648,

src/pages/_app.tsx

@@ -7,8 +7,6 @@ import { CacheProvider } from "@emotion/react";
 import * as Toast from "@radix-ui/react-toast";
 import * as Tooltip from "@radix-ui/react-tooltip";
 import type { AppProps } from "next/app";
-import { useRouter } from "next/router";
-import Script from "next/script";
 import { ThemeProvider } from "next-themes";
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import tw from "twin.macro";
@@ -19,14 +17,12 @@ import {
   LayoutApp,
   UserProvider,
 } from "src/components";
-import config from "src/config";
 
 import GlobalStyles from "../styles/GlobalStyles";
 import { useApollo } from "../utils/apolloClient";
 
 const NextApp = ({ Component, pageProps }: AppProps) => {
   const client = useApollo(pageProps);
-  const router = useRouter();
 
   // Datadog RUM initialization
   datadogRum.init({
@@ -55,14 +51,6 @@ const NextApp = ({ Component, pageProps }: AppProps) => {
                   <AppHook>
                     <LayoutApp renderNavMobile>
                       <Component {...pageProps} />
-                      {!config.routesToHideZendeskWidget.some((path) =>
-                        router.pathname.startsWith(path),
-                      ) && (
-                        <Script
-                          id="ze-snippet"
-                          src={`https://static.zdassets.com/ekr/snippet.js?key=${config.ZENDESK_WIDGET_KEY}`}
-                        />
-                      )}
                     </LayoutApp>
                   </AppHook>
                 </AuthenticatedLayout>

yarn.lock

@@ -10995,6 +10995,13 @@ react-use-measure@^2.1.1:
   dependencies:
     debounce "^1.2.1"
 
+react-zendesk@^0.1.13:
+  version "0.1.13"
+  resolved "https://registry.npmjs.org/react-zendesk/-/react-zendesk-0.1.13.tgz#0b8eb76ea6642f563c948f03e84f34286368036c"
+  integrity sha512-9UNzzgdgC8nr2nZ13PNudspUClZZgsnS3FofnuGK1I7+yDPNAP8iDFD2WSQRJmYDAzH+mTlVB4K+G8lY1/0B+w==
+  dependencies:
+    prop-types "^15.7.2"
+
 [email protected]:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"