Fix ZD not loading after fire

jsoningram · jsoningram · commit 9312ae853b08 · 2026-02-21T20:35:47.000-05:00
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,7 +1,6 @@
 'use client';
 
-import { useCallback, useReducer, useState } from 'react';
-import Script from 'next/script';
+import { useCallback, useEffect, useReducer, useRef, useState } from 'react';
 import styles from './page.module.css';
 import PageLoadPixel from '@/components/page-load-pixel/page-load-pixel';
 import ConsentForm from '@/components/consent-form/consent-form';
@@ -29,20 +28,24 @@ import {
   ZENDESK_YES_BUTTON_IDENTIFIER,
   ZENDESK_NO_BUTTON_IDENTIFIER,
   ZENDESK_SCRIPT_TAG_ID,
-  ZENDESK_HIDDEN_IFRAME_SELECTOR,
 } from '@/constants/zendesk-selectors';
 import { ZENDESK_IFRAME_STYLES } from '@/constants/zendesk-styles';
 import { getCSSVariable } from '@/utils/get-css-variable';
 import { getSlugFromUrl } from '@/utils/get-slug-from-url';
 import { widgetReducer, initialWidgetState } from '@/reducers/widget-reducer';
 import { setStorageWithExpiry } from '@/utils/set-storage-with-expiry';
 import { deleteStorageKeysBySuffix } from '@/utils/delete-storage-keys-by-suffix';
+import { cleanupZendesk } from '@/utils/cleanup-zendesk';
 
 export default function Home() {
   const [widgetState, dispatch] = useReducer(widgetReducer, initialWidgetState);
   const { zendeskReady, loadWidget, firstMessageSent } = widgetState;
   const [isBurning, setIsBurning] = useState(false);
   const [showConfirmDialog, setShowConfirmDialog] = useState(false);
+  const scriptLoadedRef = useRef(false);
+  const initializeZendeskRef = useRef<((retries?: number) => void) | null>(
+    null,
+  );
 
   const onContinue = useCallback(() => {
     window.firePixelEvent?.('consent');
@@ -121,8 +124,14 @@ export default function Home() {
         // clear `ZD-widgetOpen`
         sessionStorage.clear();
 
+        // Clean up all Zendesk DOM elements, scripts, and globals
+        cleanupZendesk();
+
         // Reset state to clear UI elements
         dispatch({ type: 'RESET_STATE' });
+
+        // Reset script loaded flag so script will reload on next mount
+        scriptLoadedRef.current = false;
       });
     }, ZENDESK_RESET_DELAY_MS);
   }, [dispatch]);
@@ -142,88 +151,112 @@ export default function Home() {
       behavior: prefersReducedMotion ? 'auto' : 'smooth',
     });
 
-    // Clear contents of messaging-container div (Zendesk iframe, etc.)
-    const messagingContainer = document.getElementById(EMBEDDED_TARGET_ELEMENT);
-    if (messagingContainer) {
-      messagingContainer.innerHTML = '';
-    }
+    // Stop burn animation
+    setIsBurning(false);
+  }, []);
 
-    // Remove hidden Zendesk iframe (data-product="web_widget")
-    const hiddenIframe = document.querySelector(ZENDESK_HIDDEN_IFRAME_SELECTOR);
-    if (hiddenIframe) {
-      hiddenIframe.remove();
-    }
+  const initializeZendesk = useCallback(
+    (retries = 5) => {
+      // Wait a bit to ensure zE is available and messaging-container exists
+      setTimeout(() => {
+        try {
+          // Check if messaging-container exists
+          const messagingContainer = document.getElementById(
+            EMBEDDED_TARGET_ELEMENT,
+          );
+          if (!messagingContainer) {
+            if (retries > 0) {
+              initializeZendeskRef.current?.(retries - 1);
+            }
+            return;
+          }
 
-    // Remove ze-snippet script element
-    const zeSnippet = document.getElementById(ZENDESK_SCRIPT_TAG_ID);
-    if (zeSnippet) {
-      zeSnippet.remove();
-    }
+          // Check if zE exists (script might not have initialized yet)
+          if (typeof zE === 'undefined') {
+            if (retries > 0) {
+              initializeZendeskRef.current?.(retries - 1);
+            }
+            return;
+          }
 
-    // Clean up Zendesk global objects
-    if (typeof window !== 'undefined') {
-      // Remove zE function if it exists
-      try {
-        delete (window as unknown as { zE?: unknown }).zE;
-      } catch {
-        // Ignore errors if zE is not configurable
-      }
+          // Set cookies and theme customization first
+          zE('messenger:set', 'cookies', 'functional');
+          zE('messenger:set', 'customization', {
+            common: {
+              hideHeader: true,
+            },
+            theme: {
+              message: getCSSVariable('--sds-color-palette-blue-60'),
+              action: getCSSVariable('--sds-color-palette-blue-60'),
+              onAction: '#FAFAFA',
+              businessMessage: '#F2F2F2', // Chat response background
+              onBusinessMessage: getCSSVariable('--sds-color-text-01'),
+              background: 'transparent', // Chat window background
+              onBackground: '#666666',
+              error: '#FF1744',
+              onError: '#FFFFFF',
+              notify: '#FF007F',
+              onNotify: '#FFFFFF',
+            },
+          });
 
-      // Remove zEMessenger if it exists
-      try {
-        delete (window as unknown as { zEMessenger?: unknown }).zEMessenger;
-      } catch {
-        // Ignore errors if zEMessenger is not configurable
-      }
+          // Render the embedded messenger
+          zE('messenger', 'render', {
+            mode: 'embedded',
+            widget: {
+              targetElement: `#${EMBEDDED_TARGET_ELEMENT}`,
+            },
+          });
+
+          // Set ready after a delay to allow widget to render
+          setTimeout(() => {
+            dispatch({ type: 'SET_ZENDESK_READY' });
+          }, ZENDESK_READY_DELAY_MS);
+        } catch (error) {
+          window.fireJse?.(error);
+        }
+      }, 50);
+    },
+    [dispatch],
+  );
+
+  // Store initializeZendesk in a ref to enable recursive calls
+  useEffect(() => {
+    initializeZendeskRef.current = initializeZendesk;
+  }, [initializeZendesk]);
+
+  // Manually load Zendesk script when loadWidget becomes true
+  useEffect(() => {
+    if (!loadWidget || scriptLoadedRef.current) {
+      return;
     }
 
-    // Stop burn animation
-    setIsBurning(false);
-  }, []);
+    // Check if script already exists
+    const existingScript = document.getElementById(ZENDESK_SCRIPT_TAG_ID);
+    if (existingScript) {
+      // Script already exists, just initialize
+      initializeZendesk();
+      scriptLoadedRef.current = true;
+      return;
+    }
 
-  const handleOnError = useCallback((e: Error) => {
-    window.fireJse?.(e);
-  }, []);
+    // Create and inject script tag manually
+    const script = document.createElement('script');
+    script.id = ZENDESK_SCRIPT_TAG_ID;
+    script.src = ZENDESK_SCRIPT_URL;
+    script.async = true;
 
-  const handleOnLoad = useCallback(() => {
-    try {
-      // Set cookies and theme customization first
-      zE('messenger:set', 'cookies', 'functional');
-      zE('messenger:set', 'customization', {
-        common: {
-          hideHeader: true,
-        },
-        theme: {
-          message: getCSSVariable('--sds-color-palette-blue-60'),
-          action: getCSSVariable('--sds-color-palette-blue-60'),
-          onAction: '#FAFAFA',
-          businessMessage: '#F2F2F2', // Chat response background
-          onBusinessMessage: getCSSVariable('--sds-color-text-01'),
-          background: 'transparent', // Chat window background
-          onBackground: '#666666',
-          error: '#FF1744',
-          onError: '#FFFFFF',
-          notify: '#FF007F',
-          onNotify: '#FFFFFF',
-        },
-      });
+    script.onload = () => {
+      scriptLoadedRef.current = true;
+      initializeZendesk();
+    };
 
-      // Render the embedded messenger
-      zE('messenger', 'render', {
-        mode: 'embedded',
-        widget: {
-          targetElement: `#${EMBEDDED_TARGET_ELEMENT}`,
-        },
-      });
+    script.onerror = () => {
+      window.fireJse?.(new Error('Failed to load Zendesk script'));
+    };
 
-      // Set ready after a delay to allow widget to render
-      setTimeout(() => {
-        dispatch({ type: 'SET_ZENDESK_READY' });
-      }, ZENDESK_READY_DELAY_MS);
-    } catch (error) {
-      window.fireJse?.(error);
-    }
-  }, [dispatch]);
+    document.head.appendChild(script);
+  }, [loadWidget, initializeZendesk]);
 
   return (
     <>
@@ -272,14 +305,6 @@ export default function Home() {
 
         {!loadWidget && <ConsentForm onContinue={onContinue} />}
       </main>
-      {loadWidget && (
-        <Script
-          id={ZENDESK_SCRIPT_TAG_ID}
-          src={ZENDESK_SCRIPT_URL}
-          onLoad={handleOnLoad}
-          onError={handleOnError}
-        />
-      )}
       <PageLoadPixel />
     </>
   );
diff --git a/src/hooks/use-zendesk-iframe-styles.ts b/src/hooks/use-zendesk-iframe-styles.ts
@@ -166,7 +166,12 @@ export function useZendeskIframeStyles({
   }, [injectStyles]);
 
   useEffect(() => {
+    // Reset injection state when widget becomes unavailable
+    // This ensures styles are re-injected when widget reloads
     if (!zendeskReady) {
+      injectedRef.current = false;
+      styleElementRef.current = null;
+      replacedButtonsRef.current = new WeakSet<HTMLElement>();
       return;
     }
 
@@ -177,13 +182,12 @@ export function useZendeskIframeStyles({
     let observerTimeout: ReturnType<typeof setTimeout> | null = null;
 
     // Inject styles when widget becomes ready
-    if (!injectedRef.current) {
-      injectStylesTimeout = setTimeout(() => {
-        if (isMountedRef.current) {
-          injectStyles();
-        }
-      }, INITIAL_RENDER_DELAY_MS);
-    }
+    // Always inject (or re-inject) when zendeskReady becomes true
+    injectStylesTimeout = setTimeout(() => {
+      if (isMountedRef.current) {
+        injectStyles();
+      }
+    }, INITIAL_RENDER_DELAY_MS);
 
     // Set up MutationObserver to re-inject styles if iframe reloads
     let observerCleanup: (() => void) | null = null;
diff --git a/src/utils/cleanup-zendesk.ts b/src/utils/cleanup-zendesk.ts
@@ -0,0 +1,75 @@
+import { EMBEDDED_TARGET_ELEMENT } from '@/config/common';
+import { ZENDESK_SCRIPT_TAG_ID } from '@/constants/zendesk-selectors';
+
+/**
+ * Zendesk global objects that need to be cleaned up.
+ */
+const ZENDESK_GLOBALS = [
+  'zE',
+  'zEMessenger',
+  'zEmbed',
+  'zEACLoaded',
+  'zEWebpackACJsonp',
+] as const;
+
+/**
+ * Cleans up all Zendesk DOM elements, scripts, and global objects.
+ *
+ * This function removes:
+ * - All Zendesk iframes (messaging iframe, hidden iframe, etc.)
+ * - All Zendesk script tags
+ * - All Zendesk global objects (zE, zEMessenger, zEmbed, etc.)
+ * - Contents of the messaging-container div
+ *
+ * After cleanup, recreates zEMessenger with fresh config to ensure clean state
+ * for potential reload.
+ *
+ * @function cleanupZendesk
+ *
+ * @returns {void}
+ */
+export function cleanupZendesk(): void {
+  // Clear contents of messaging-container div (Zendesk iframe, etc.)
+  const messagingContainer = document.getElementById(EMBEDDED_TARGET_ELEMENT);
+  if (messagingContainer) {
+    messagingContainer.innerHTML = '';
+  }
+
+  // Remove ALL Zendesk iframes (not just the hidden one)
+  const allZendeskIframes = document.querySelectorAll(
+    'iframe[id*="zendesk"], iframe[data-product="web_widget"]',
+  );
+  allZendeskIframes.forEach((iframe) => iframe.remove());
+
+  // Remove ze-snippet script element
+  const zeSnippet = document.getElementById(ZENDESK_SCRIPT_TAG_ID);
+  if (zeSnippet) {
+    zeSnippet.remove();
+  }
+
+  // Remove any other Zendesk script tags
+  const zendeskScripts = document.querySelectorAll(
+    'script[src*="zdassets.com"], script[src*="zendesk"]',
+  );
+  zendeskScripts.forEach((script) => script.remove());
+
+  // Clean up Zendesk global objects
+  if (typeof window !== 'undefined') {
+    ZENDESK_GLOBALS.forEach((globalName) => {
+      try {
+        const win = window as unknown as Record<string, unknown>;
+        if (globalName in win) {
+          delete win[globalName];
+        }
+      } catch {
+        // Ignore errors if property is not configurable
+      }
+    });
+
+    // Recreate zEMessenger with fresh config (layout.tsx will also set this,
+    // but we need it here before state resets to ensure clean state)
+    (window as unknown as { zEMessenger?: unknown }).zEMessenger = {
+      autorender: false,
+    };
+  }
+}
