feat: Refactor Zendesk integration in react-thirdparty package

This commit refactors the Zendesk integration in the react-thirdparty package. It updates the `ZendeskContextProps` interface in `Context.tsx` to use the `ZendeskWidget` type instead of `any`. It also updates the `ZendeskProvider` component in `Provider.tsx` to use the `ZendeskWidget` type for the `zendeskClient` state and the `executeZendesk` function.

Co-authored-by: Matias Pompilio <matias.pompilio@nan-labs.com>
Co-authored-by: Ulises Jeremias <ulisescf.24@gmail.com>

packages/react-thirdparty/zendesk/Context.tsx

@@ -1,7 +1,7 @@
 import { createContext, useContext } from "react";
 
 export interface ZendeskContextProps {
-  executeZendesk: (action: string, params?: any) => void;
+  executeZendesk: ZendeskWidget;
 }
 
 export const ZendeskContext = createContext<ZendeskContextProps | undefined>(

packages/react-thirdparty/zendesk/Provider.tsx

@@ -14,12 +14,12 @@ import {
 export const ZendeskProvider: React.FC<
   ZendeskScriptProps & { children: ReactNode }
 > = ({ zendeskKey, scriptId, appendTo = "body", handleOnLoad, children }) => {
-  const [zendeskClient, setZendeskClient] = useState<typeof window.zE | null>(
+  const [zendeskClient, setZendeskClient] = useState<ZendeskWidget | null>(
     null
   );
 
-  const executeZendesk = useCallback(
-    (action: string, params?: any) => {
+  const executeZendesk: ZendeskWidget = useCallback(
+    (action, params) => {
       if (!zendeskClient) {
         console.warn("Zendesk client is not available");
         return;
@@ -30,7 +30,7 @@ export const ZendeskProvider: React.FC<
   );
 
   const onLoad = () => {
-    if (typeof window === "undefined" || !(window as any).zE) {
+    if (!window?.zE) {
       console.warn("Zendesk script is not available");
       return;
     }

packages/react-thirdparty/zendesk/zendesk.d.ts

@@ -0,0 +1,160 @@
+interface ZendeskWidget {
+  (
+    type: "webWidget:on" | "webWidget" | "webWidget:get",
+    command: string,
+    payload?: any
+  ): void;
+  (
+    type: "webWidget",
+    command: "updateSettings",
+    payload: ZendeskSettings
+  ): void;
+}
+
+interface ZendeskUIString {
+  [locale: string]: string;
+}
+
+interface ZendeskField {
+  id: string | number;
+  prefill: ZendeskUIString;
+}
+
+interface ZendeskSettings {
+  analytics?: boolean;
+  cookies?: boolean;
+  errorReporting?: boolean;
+  webWidget?: {
+    answerBot?: {
+      avatar?: {
+        url: string;
+        name: ZendeskUIString;
+      };
+      suppress?: boolean;
+      title?: ZendeskUIString;
+      contactOnlyAfterQuery?: boolean;
+      search?: {
+        labels: string[];
+      };
+    };
+    authenticate?: {
+      chat?: {
+        jwtFn: (callback: (jwtToken: string) => void) => void;
+      };
+      jwtFn?: (callback: (jwtToken: string) => void) => void;
+    };
+    contactForm?: {
+      attachments?: boolean;
+      fields?: ZendeskField[];
+      selectTicketForm?: ZendeskUIString;
+      subject?: boolean;
+      suppress?: boolean;
+      title?: ZendeskUIString;
+      ticketForms?: Array<{ id: number; fields?: ZendeskField[] }>;
+    };
+    contactOptions?: {
+      enabled?: boolean;
+      contactButton?: ZendeskUIString;
+      contactFormLabel?: ZendeskUIString;
+      chatLabelOnline?: ZendeskUIString;
+      chatLabelOffline?: ZendeskUIString;
+    };
+    chat?: {
+      concierge?: {
+        avatarPath: string;
+        name: string;
+        title: ZendeskUIString;
+      };
+      departments?: {
+        enabled: string[];
+        select?: string;
+      };
+      hideWhenOffline?: boolean;
+      menuOptions?: {
+        emailTranscript?: boolean;
+      };
+      notifications?: {
+        mobile?: {
+          disable?: boolean;
+        };
+      };
+      offlineForm?: {
+        greeting?: ZendeskUIString;
+      };
+      prechatForm?: {
+        greeting?: ZendeskUIString;
+        departmentLabel?: ZendeskUIString;
+      };
+      profileCard?: {
+        avatar?: boolean;
+        rating?: boolean;
+        title?: boolean;
+      };
+      suppress?: boolean;
+      tags?: string;
+      title?: ZendeskUIString;
+    };
+    color?: {
+      theme?: string;
+      launcher?: string;
+      launcherText?: string;
+      button?: string;
+      resultLists?: string;
+      header?: string;
+      articleLinks?: string;
+    };
+    helpCenter?: {
+      messageButton?: ZendeskUIString;
+      originalArticleButton?: boolean;
+      searchPlaceholder?: ZendeskUIString;
+      suppress?: boolean;
+      title?: ZendeskUIString;
+      chatButton?: ZendeskUIString;
+      filter?: {
+        category?: string;
+        section?: string;
+        label_names?: string;
+      };
+    };
+    launcher?: {
+      label?: ZendeskUIString;
+      mobile?: {
+        labelVisible?: boolean;
+      };
+      badge?: {
+        label?: ZendeskUIString;
+        image?: string;
+        layout?: "image_right" | "image_left" | "image_only" | "text_only";
+      };
+      chatLabel?: ZendeskUIString;
+    };
+    navigation?: {
+      popoutButton?: {
+        enabled?: boolean;
+      };
+    };
+    offset?: {
+      horizontal?: string;
+      vertical?: string;
+      mobile?: {
+        horizontal?: string;
+        vertical?: string;
+      };
+    };
+    position?: {
+      horizontal: "left" | "right";
+      vertical: "top" | "bottom";
+    };
+    talk?: {
+      nickname?: string;
+      suppress?: boolean;
+      title?: ZendeskUIString;
+    };
+    zIndex?: number;
+  };
+}
+
+interface Window {
+  zESettings?: ZendeskSettings;
+  zE?: ZendeskWidget;
+}