fix: reset all state and re-initialize when api key changes

Author: multivoltage

.changeset/rare-clowns-stop.md

@@ -0,0 +1,5 @@
+---
+"react-use-zendesk": minor
+---
+
+fix: reset all state and re-initialize when api key changes

apps/docs/app/components/ExampleList.tsx

@@ -217,6 +217,8 @@ export const ExampleList: React.FC = () => {
           >
             Reset Widget
           </a>
+          <br />
+          Internally the library call this method when api key changes
         </div>
       ),
       buttonText: "reset",

packages/react-use-zendesk/src/initialize.ts

@@ -1,30 +1,53 @@
+const IdScript = "ze-snippet";
+
 export function initialize(apiKey: string, onLoad: () => void) {
   if (
     !!apiKey &&
-    typeof window !== "undefined" &&
-    typeof window.zE === "undefined"
+    typeof window !== "undefined"
+    // && typeof window.zE === "undefined"
   ) {
-    var appendScript = function () {
-      setTimeout(function () {
-        var s = document.createElement("script");
-        s.id = "ze-snippet";
-        s.type = "text/javascript";
-        s.async = true;
-        s.onload = onLoad;
-
-        s.src = "https://static.zdassets.com/ekr/snippet.js?key=" + apiKey;
-
-        var x = document.getElementsByTagName("script")[0];
-        x?.parentNode.insertBefore(s, x);
-      }, 0);
+    const setup = () => {
+      removeNodes();
+      appendScript(apiKey, onLoad);
     };
-
     if (document.readyState === "complete") {
-      appendScript();
+      setup();
     } else if (window.attachEvent) {
-      window.attachEvent("onload", appendScript);
+      window.attachEvent("onload", setup);
     } else {
-      window.addEventListener("load", appendScript, false);
+      window.addEventListener("load", setup, false);
     }
   }
 }
+
+export function removeNodes() {
+  if (typeof window !== "undefined") {
+    delete window.zE;
+    delete (window as any).zEmbed;
+    delete (window as any).zEACLoaded;
+    delete (window as any).zEWebpackACJsonp;
+    var scriptElement = document.getElementById(IdScript);
+    var frameElement = document.querySelector("iframe#launcher");
+    if (scriptElement) {
+      scriptElement.remove();
+    }
+    if (frameElement) {
+      frameElement.remove();
+    }
+  }
+}
+
+export function appendScript(apiKey: string, onLoad: () => void) {
+  setTimeout(function () {
+    const s = document.createElement("script");
+    s.id = IdScript;
+    s.type = "text/javascript";
+    s.async = true;
+    s.onload = onLoad;
+
+    s.src = "https://static.zdassets.com/ekr/snippet.js?key=" + apiKey;
+
+    const x = document.getElementsByTagName("script")[0];
+    x?.parentNode.insertBefore(s, x);
+  }, 0);
+}

packages/react-use-zendesk/src/provider.tsx

@@ -59,14 +59,20 @@ export const ZendeskProvider: React.FC<
       "unreadMessages",
       function (unreadMessages: number) {
         setUnreadMessages(unreadMessages);
-        onUnreadMessages && onUnreadMessages(unreadMessages);
-      }
+        !!onUnreadMessagesRef.current &&
+          onUnreadMessagesRef.current(unreadMessages);
+      },
     );
+
     isRegisteredCb.current = true;
   }
 
   useEffect(() => {
     initialize(apiKey, registerCallback);
+    return () => {
+      isRegisteredCb.current = false;
+      resetWidget();
+    };
   }, [apiKey]);
 
   const show = React.useCallback(() => {
@@ -101,14 +107,14 @@ export const ZendeskProvider: React.FC<
     (conversationFields: Array<ZendeskConversationField>) => {
       ZendeskApi("messenger:set", "conversationFields", conversationFields);
     },
-    []
+    [],
   );
 
   const setConversationTags = React.useCallback(
     (conversationTags: Array<string>) => {
       ZendeskApi("messenger:set", "conversationTags", conversationTags);
     },
-    []
+    [],
   );
 
   const loginUser = React.useCallback((jwtToken: string) => {
@@ -117,7 +123,7 @@ export const ZendeskProvider: React.FC<
       "loginUser",
       (callback: (token: string) => void) => {
         callback(jwtToken);
-      }
+      },
     );
   }, []);
 

packages/react-use-zendesk/src/types.ts

@@ -20,7 +20,7 @@ export type ZendeskContextValues = {
   setZIndex: (newZIndex: number) => void;
   setCookies: (isEnabled: boolean) => void;
   setConversationFields: (
-    conversationFields: Array<ZendeskConversationField>
+    conversationFields: Array<ZendeskConversationField>,
   ) => void;
   setConversationTags: (conversationTags: Array<string>) => void;
   loginUser: (jwtToken: string) => void;