Remove Kapa event listeners

Author: matt-aitken

apps/webapp/app/hooks/useKapaWidget.tsx

@@ -3,6 +3,16 @@ import { useShortcuts } from "../components/primitives/ShortcutsProvider";
 import { useFeatures } from "~/hooks/useFeatures";
 import { useCallback, useEffect, useState } from "react";
 
+declare global {
+  interface Window {
+    Kapa: (
+      command: string,
+      options?: () => void,
+      remove?: string | { onRender?: () => void }
+    ) => void;
+  }
+}
+
 export function useKapaWidget() {
   const kapa = useKapaConfig();
   const features = useFeatures();
@@ -20,17 +30,19 @@ export function useKapaWidget() {
       enableShortcuts();
     };
 
+    const handleModalOpen = () => {
+      setIsKapaOpen(true);
+      disableShortcuts();
+    };
+
     const kapaInterval = setInterval(() => {
       if (typeof window.Kapa === "function") {
         clearInterval(kapaInterval);
         window.Kapa("render");
         window.Kapa("onModalClose", handleModalClose);
 
         // Register onModalOpen handler
-        window.Kapa("onModalOpen", () => {
-          setIsKapaOpen(true);
-          disableShortcuts();
-        });
+        window.Kapa("onModalOpen", handleModalOpen);
       }
     }, 100);
 
@@ -39,12 +51,13 @@ export function useKapaWidget() {
       clearInterval(kapaInterval);
       if (typeof window.Kapa === "function") {
         window.Kapa("unmount");
+
+        window.Kapa("onModalOpen", handleModalOpen, "remove");
+        window.Kapa("onModalClose", handleModalClose, "remove");
       }
     };
   }, [features.isManagedCloud, kapa?.websiteId, disableShortcuts, enableShortcuts]);
 
-  //todo remove listeners
-
   const openKapa = useCallback(() => {
     if (!features.isManagedCloud || !kapa?.websiteId) return;
 

apps/webapp/app/root.tsx

@@ -25,12 +25,6 @@ import { useTypedMatchesData } from "./hooks/useTypedMatchData";
 import { getUser } from "./services/session.server";
 import { appEnvTitleTag } from "./utils";
 
-declare global {
-  interface Window {
-    Kapa: (command: string, options?: (() => void) | { onRender?: () => void }) => void;
-  }
-}
-
 export const links: LinksFunction = () => {
   return [{ rel: "stylesheet", href: tailwindStylesheetUrl }];
 };