refactor: Update Zendesk integration in react-thirdparty package

packages/react-thirdparty/recaptcha/Context.tsx

@@ -1,4 +1,4 @@
-import { createContext } from "react";
+import { createContext, useContext } from "react";
 import { ReCaptchaExecuteOptions } from "./Provider";
 
 export interface GoogleReCaptchaConsumerProps {
@@ -12,3 +12,6 @@ const GoogleReCaptchaContext = createContext<GoogleReCaptchaConsumerProps>({
 const { Consumer: GoogleReCaptchaConsumer } = GoogleReCaptchaContext;
 
 export { GoogleReCaptchaConsumer, GoogleReCaptchaContext };
+
+export const useGoogleReCaptchaContext = () =>
+  useContext(GoogleReCaptchaContext);

packages/react-thirdparty/recaptcha/index.ts

@@ -1,5 +1,4 @@
 export * from "./useGoogleReCaptcha";
-export * from "./useGoogleReCaptchaContext";
 export * from "./GoogleReCaptcha";
 export * from "./Context";
 export * from "./Provider";

packages/react-thirdparty/recaptcha/useGoogleReCaptcha.ts

@@ -1,5 +1,5 @@
 import { useCallback, useEffect } from "react";
-import { useGoogleReCaptchaContext } from "./useGoogleReCaptchaContext";
+import { useGoogleReCaptchaContext } from "./Context";
 
 export interface GoogleReCaptchaConfig {
   onVerify: (token: string) => void | Promise<void>;

packages/react-thirdparty/zendesk/Context.tsx

@@ -1,22 +1,14 @@
 import { createContext, useContext } from "react";
 
 export interface ZendeskContextProps {
-  executeZendesk: ZendeskWidget;
+  executeZendesk?: ZendeskWidget;
 }
 
-export const ZendeskContext = createContext<ZendeskContextProps | undefined>(
-  undefined
-);
+export const ZendeskContext = createContext<ZendeskContextProps>({});
 
 /**
  * Custom hook to use the Zendesk context.
  * @throws If used outside of a ZendeskProvider.
  * @returns The Zendesk context value.
  */
-export const useZendeskContext = (): ZendeskContextProps => {
-  const context = useContext(ZendeskContext);
-  if (!context) {
-    throw new Error("useZendeskContext must be used within a ZendeskProvider");
-  }
-  return context;
-};
+export const useZendeskContext = () => useContext(ZendeskContext);

packages/react-thirdparty/zendesk/Zendesk.tsx

@@ -9,6 +9,11 @@ const Zendesk: React.FC = () => {
   const { executeZendesk } = useZendesk();
 
   useEffect(() => {
+    if (!executeZendesk) {
+      console.warn("Zendesk client is not available");
+      return;
+    }
+
     // Example usage of executeZendesk when the component mounts
     executeZendesk("webWidget", "open");
 

packages/react-thirdparty/zendesk/useZendesk.ts

@@ -4,7 +4,4 @@ import { useZendeskContext } from "./Context";
  * Custom hook to access Zendesk client through context.
  * @returns The Zendesk context value.
  */
-export const useZendesk = () => {
-  const context = useZendeskContext();
-  return context;
-};
+export const useZendesk = () => useZendeskContext();