feat: add resetWidget option and onResetWidget callback

Author: multivoltage

.changeset/ten-planes-hang.md

@@ -0,0 +1,5 @@
+---
+"react-use-zendesk": minor
+---
+
+feat: add resetWidget option and onResetWidget callback

apps/docs/app/components/ExampleList.tsx

@@ -55,8 +55,8 @@ export const ExampleList: React.FC = () => {
       },
     },
     {
-      id: "messenger set locale",
-      title: "Set locale",
+      id: "messenger set DE locale",
+      title: "Set DE locale",
       description: (
         <div>
           Sets the locale of the messaging Web Widget. For a list of supported
@@ -74,6 +74,26 @@ export const ExampleList: React.FC = () => {
         setLocale("de");
       },
     },
+    {
+      id: "messenger set ES locale",
+      title: "Set ES locale",
+      description: (
+        <div>
+          Sets the locale of the messaging Web Widget. For a list of supported
+          locales and associated codes, use the following{" "}
+          <a
+            href="https://support.zendesk.com/api/v2/locales/public.json"
+            target="_blank"
+          >
+            Zendesk public REST API endpoint
+          </a>
+        </div>
+      ),
+      buttonText: "set ES locale",
+      onClick: ({ setLocale }) => {
+        setLocale("es");
+      },
+    },
     {
       id: "messenger set zIndex",
       title: "Set zIndex",
@@ -184,6 +204,26 @@ export const ExampleList: React.FC = () => {
         logoutUser();
       },
     },
+    {
+      id: "resetWidget",
+      title: "Reset",
+      description: (
+        <div>
+          This method clears all widget local state, including user data,
+          conversations, and connections. To learn more about Reset Widget see{" "}
+          <a
+            href="https://developer.zendesk.com/api-reference/widget-messaging/web/core/#reset-widget"
+            target="_blank"
+          >
+            Reset Widget
+          </a>
+        </div>
+      ),
+      buttonText: "reset",
+      onClick({ resetWidget }) {
+        resetWidget();
+      },
+    },
   ];
   return (
     <>

apps/docs/app/page.tsx

@@ -48,6 +48,18 @@ export default function Page(): JSX.Element {
     ]);
   }
 
+  function handleResetWidget() {
+    toast("onResetWidget callback");
+    setCallBacks((old) => [
+      {
+        params: arguments,
+        id: "onResetWidget",
+        key: "onResetWidget" + old.length,
+      },
+      ...old,
+    ]);
+  }
+
   function onChangeKey(key: string) {
     setApiKey(key);
   }
@@ -58,6 +70,7 @@ export default function Page(): JSX.Element {
       onOpen={handleOpen}
       onClose={handleClose}
       onUnreadMessages={handleUnreadMessages}
+      onResetWidget={handleResetWidget}
     >
       <main className="main">
         <div className="section-grid">

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

@@ -12,7 +12,14 @@ import { ZendeskApi } from "./api";
 
 export const ZendeskProvider: React.FC<
   PropsWithChildren<ZendeskProviderProps>
-> = ({ apiKey, onOpen, onClose, onUnreadMessages, children }) => {
+> = ({
+  apiKey,
+  onOpen,
+  onClose,
+  onUnreadMessages,
+  onResetWidget,
+  children,
+}) => {
   const isRegisteredCb = useRef(false);
 
   const [isOpen, setIsOpen] = React.useState(false);
@@ -23,11 +30,13 @@ export const ZendeskProvider: React.FC<
   const onOpenRef = useRef(onOpen);
   const onCloseRef = useRef(onClose);
   const onUnreadMessagesRef = useRef(onUnreadMessages);
+  const onResetWidgetRef = useRef(onResetWidget);
 
   useLayoutEffect(() => {
     onOpenRef.current = onOpen;
     onCloseRef.current = onClose;
     onUnreadMessagesRef.current = onUnreadMessages;
+    onResetWidgetRef.current = onResetWidget;
   });
 
   function registerCallback() {
@@ -116,6 +125,12 @@ export const ZendeskProvider: React.FC<
     ZendeskApi("messenger", "logoutUser");
   }, []);
 
+  const resetWidget = React.useCallback(() => {
+    ZendeskApi("messenger", "resetWidget", (callback: () => void) => {
+      !!onResetWidgetRef.current && onResetWidgetRef.current();
+    });
+  }, []);
+
   const initialProviderValue: ZendeskContextValues = {
     show,
     hide,
@@ -128,6 +143,7 @@ export const ZendeskProvider: React.FC<
     setConversationTags,
     loginUser,
     logoutUser,
+    resetWidget,
     isOpen,
     unreadMessages,
   };

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

@@ -3,6 +3,7 @@ export type ZendeskProviderProps = {
   onOpen?: () => void;
   onClose?: () => void;
   onUnreadMessages?: (count: number) => void;
+  onResetWidget?: () => void;
 };
 
 export type ZendeskConversationField = {
@@ -19,11 +20,12 @@ 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;
   logoutUser: () => void;
+  resetWidget: () => void;
   isOpen: boolean;
   unreadMessages: number | undefined;
 };
@@ -40,4 +42,5 @@ export type ZendeskMethod =
   | "conversationFields"
   | "conversationTags"
   | "loginUser"
-  | "logoutUser";
+  | "logoutUser"
+  | "resetWidget";